/* ============================================================
   MODERN MODE — 2026 cyber-luxe overlay
   Activated via html[data-era="modern"]
============================================================ */

html[data-era="modern"] {
  --font-display: "Cormorant Garamond", serif;
  --font-serif-kr: "Pretendard", "Noto Serif KR", sans-serif;
  --font-sans: "Pretendard", -apple-system, sans-serif;
  --grain-opacity: .03;
}

/* Monospace everywhere for meta / numbers / tags */
html[data-era="modern"] .eyebrow,
html[data-era="modern"] .label-num,
html[data-era="modern"] .nav-link,
html[data-era="modern"] .nav-concierge,
html[data-era="modern"] .hero-chip,
html[data-era="modern"] .section-head .num,
html[data-era="modern"] .section-head .tail,
html[data-era="modern"] .hero-meta .k,
html[data-era="modern"] .hero-meta .v small,
html[data-era="modern"] .btn,
html[data-era="modern"] .room-card .tag,
html[data-era="modern"] .room-card .num,
html[data-era="modern"] .room-card .meta-row,
html[data-era="modern"] .room-card .price small,
html[data-era="modern"] .room-card .avail,
html[data-era="modern"] .bottle-origin,
html[data-era="modern"] .bottle-note,
html[data-era="modern"] .bottle-price small,
html[data-era="modern"] .bottle-order,
html[data-era="modern"] .bottle-media .tag,
html[data-era="modern"] .bottle-media .rarity,
html[data-era="modern"] .res-step,
html[data-era="modern"] .res-step .n,
html[data-era="modern"] .res-timer,
html[data-era="modern"] .res-timer small,
html[data-era="modern"] .date-cell .d,
html[data-era="modern"] .date-cell .n,
html[data-era="modern"] .date-cell .avail,
html[data-era="modern"] .time-chip,
html[data-era="modern"] .sum-row .k,
html[data-era="modern"] .sum-row .v small,
html[data-era="modern"] .sum-total .k,
html[data-era="modern"] .coll-chip,
html[data-era="modern"] .coll-search,
html[data-era="modern"] .footer-col h5,
html[data-era="modern"] .footer-bottom {
  font-family: var(--font-mono);
}

/* Titles — mix of serif KR + mono tag */
html[data-era="modern"] .hero-title {
  font-size: clamp(56px, 10.5vw, 170px);
  letter-spacing: -0.055em;
  font-weight: 600;
  font-family: "Pretendard", sans-serif;
}
html[data-era="modern"] .hero-title .accent {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.03em;
}
html[data-era="modern"] .section-head .title,
html[data-era="modern"] .exp-body h3,
html[data-era="modern"] .step-title,
html[data-era="modern"] .room-card h4,
html[data-era="modern"] .bottle-name,
html[data-era="modern"] .res-room .t,
html[data-era="modern"] .opt .info .t {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
}
html[data-era="modern"] .section-head .title .en,
html[data-era="modern"] .exp-body h3 .en,
html[data-era="modern"] .step-title .en,
html[data-era="modern"] .room-card h4 .en,
html[data-era="modern"] .bottle-name .en,
html[data-era="modern"] .res-room .t .en {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.42em;
  color: var(--gold-300);
}

/* Lede — modern sans */
html[data-era="modern"] .hero-lede,
html[data-era="modern"] .exp-lede,
html[data-era="modern"] .step-sub {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
}

/* Nav tech treatment */
html[data-era="modern"] .nav-brand {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  gap: 6px;
}
html[data-era="modern"] .nav-brand .mark {
  background: var(--gold-300);
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: none;
  box-shadow: 0 0 0 1px rgba(201,169,97,.3), 0 0 16px var(--gold-300);
}
html[data-era="modern"] .nav-brand .sub {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
}
html[data-era="modern"] .nav-link {
  font-size: 11px;
  letter-spacing: 0.2em;
}

/* Hero chips — glass + bracket style */
html[data-era="modern"] .hero-chip {
  border-radius: 4px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 9px 14px;
  position: relative;
}
html[data-era="modern"] .hero-chip::before,
html[data-era="modern"] .hero-chip::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-color: var(--gold-300);
  border-style: solid;
  opacity: .6;
}
html[data-era="modern"] .hero-chip::before {
  top: -1px; left: -1px;
  border-width: 1px 0 0 1px;
}
html[data-era="modern"] .hero-chip::after {
  bottom: -1px; right: -1px;
  border-width: 0 1px 1px 0;
}

/* Hero meta — tighter, tabular */
html[data-era="modern"] .hero-meta .v {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1;
}

/* Buttons — sharper, with chevron marks */
html[data-era="modern"] .btn {
  border-radius: 3px;
  height: 44px;
  font-size: 11px;
  letter-spacing: 0.22em;
  position: relative;
  overflow: hidden;
}
html[data-era="modern"] .btn-primary {
  background: var(--gold-300);
  color: #0a0905;
  border-color: var(--gold-300);
}
html[data-era="modern"] .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease-out-cubic);
}
html[data-era="modern"] .btn-primary:hover::before {
  transform: translateX(100%);
}

/* Cards — glass + corner brackets */
html[data-era="modern"] .room-card,
html[data-era="modern"] .bottle,
html[data-era="modern"] .res-shell {
  border-radius: 6px;
}
html[data-era="modern"] .room-card {
  background: var(--surface-1);
}
html[data-era="modern"] .room-card::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 18px; height: 18px;
  border-top: 1px solid var(--gold-300);
  border-left: 1px solid var(--gold-300);
  z-index: 3;
  opacity: 0;
  transition: opacity var(--dur-med);
}
html[data-era="modern"] .room-card:hover::before {
  opacity: .7;
}

/* Section head — with mono tag */
html[data-era="modern"] .section-head {
  grid-template-columns: auto 1fr auto;
}
html[data-era="modern"] .section-head .num {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-300);
  padding: 6px 10px;
  border: 1px solid var(--gold-500);
  border-radius: 2px;
}

/* Experience toggle — pill → square */
html[data-era="modern"] .exp-toggle {
  border-radius: 4px;
  background: var(--surface-1);
}
html[data-era="modern"] .exp-toggle button {
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.2em;
}

/* Exp stage caption — sans, no giant italics */
html[data-era="modern"] .exp-stage-caption {
  font-family: "Pretendard", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 56px;
  letter-spacing: -0.04em;
}
html[data-era="modern"] .exp-stage-caption .kr {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-top: 12px;
}
html[data-era="modern"] .exp-stage-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  border-radius: 2px;
  background: rgba(0,0,0,.7);
}

/* Feature blocks — with index */
html[data-era="modern"] .exp-feat .num {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-300);
}
html[data-era="modern"] .exp-feat .t {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
}

/* Bottle price & meta — tabular */
html[data-era="modern"] .bottle-price,
html[data-era="modern"] .room-card .price,
html[data-era="modern"] .res-room .ft .p,
html[data-era="modern"] .opt .p,
html[data-era="modern"] .sum-total .v,
html[data-era="modern"] .sum-row .v {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}
html[data-era="modern"] .sum-total .v {
  font-size: 32px;
  color: var(--ink-100);
}

/* Confirm crest — geometric */
html[data-era="modern"] .confirm-crest {
  border-radius: 4px;
  transform: rotate(45deg);
}
html[data-era="modern"] .confirm-crest > * {
  transform: rotate(-45deg);
  display: block;
}

/* Dossier number — bigger, sans */
html[data-era="modern"] .dossier-num {
  font-family: "Pretendard", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(80px, 14vw, 160px);
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-400);
  letter-spacing: -0.06em;
  line-height: 1;
  align-self: center;
}
html[data-era="modern"] .dossier-body blockquote {
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
}
html[data-era="modern"] .dossier-body blockquote em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}

/* Footer brand — restyled */
html[data-era="modern"] .footer-brand {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 40px;
}
html[data-era="modern"] .footer-brand .it {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Magnetic hover for primary buttons (extra polish) */
html[data-era="modern"] .btn-primary,
html[data-era="modern"] .room-card,
html[data-era="modern"] .bottle {
  transition: transform 400ms var(--ease-out-cubic), border-color 300ms, background 300ms;
}

/* Remove italicised "Inner Circle" etc replaced with mono sub */
html[data-era="modern"] .footer-col h5 {
  font-size: 10px;
  letter-spacing: 0.24em;
}
html[data-era="modern"] .footer-col a, 
html[data-era="modern"] .footer-col p {
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
}