/* =============================================================
   슈퍼디바 적우 콘서트 - 대구 · 2026.08.22
   Design system: warm golden stage light on deep warm dark.
   Concept: 어둠 속에서 떠오르는 무대 조명 + 적우(赤雨=붉은 비) 모티프.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Surface — warm near-black stage (mood lives in accents, not a cream bg) */
  --bg:            oklch(0.985 0.004 75);
  --bg-deep:       oklch(0.955 0.008 75);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.965 0.006 75);
  --line:          oklch(0.30 0.02 50 / 0.14);
  --line-strong:   oklch(0.32 0.03 40 / 0.28);

  /* Ink — warm near-black on light */
  --ink:           oklch(0.24 0.02 40);
  --ink-soft:      oklch(0.40 0.02 40);      /* ≥4.5:1 on --bg */
  --ink-muted:     oklch(0.54 0.02 45);      /* large / secondary */

  /* Crimson accent — 포스터 아트디렉션(적우=붉은 비) */
  --gold:          oklch(0.53 0.21 26);
  --gold-bright:   oklch(0.46 0.21 26);      /* hover(더 진한 크림슨) */
  --gold-deep:     oklch(0.40 0.19 25);
  --bronze:        oklch(0.560 0.110 66);

  /* Wine */
  --wine:          oklch(0.48 0.18 25);
  --wine-deep:     oklch(0.40 0.16 24);

  /* On-accent text (흰색) */
  --on-gold:       oklch(0.99 0.005 80);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Fluid type scale (~1.25) — 50대 이상 가독성을 고려해 기존 대비 약 15% 확대 */
  --step--1: clamp(0.94rem, 0.9rem + 0.17vw, 1.03rem);
  --step-0:  clamp(1.15rem, 1.1rem + 0.23vw, 1.29rem);
  --step-1:  clamp(1.38rem, 1.29rem + 0.46vw, 1.73rem);
  --step-2:  clamp(1.73rem, 1.55rem + 0.86vw, 2.42rem);
  --step-3:  clamp(2.19rem, 1.84rem + 1.73vw, 3.45rem);
  --step-4:  clamp(2.76rem, 2.19rem + 3vw, 4.83rem);
  --hero:    clamp(3.91rem, 2.53rem + 6.9vw, 6.9rem);

  /* Type family — 전체 고딕체 통일 */
  --font: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, sans-serif;

  /* Spacing rhythm */
  --space-section: clamp(2.75rem, 1.9rem + 3vw, 4.5rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --measure: 62ch;

  /* Motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-1: 0.45s;
  --dur-2: 0.7s;
  --dur-3: 1.1s;

  /* Z-index scale */
  --z-canvas: 0;
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-mobilecta: 250;
  --z-overlay: 300;

  --maxw: 1180px;
}
@media (min-width: 1600px) { :root { --maxw: 1360px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

h1, h2, h3 {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.eyebrow {
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.eyebrow__icon { width: 1em; height: 1em; flex: none; }
.eyebrow::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section { padding-block: var(--space-section); position: relative; }
.section__head { max-width: 46ch; margin-bottom: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); }
.section__title { font-size: var(--step-3); margin-top: 0.5rem; }
.section__lead {
  margin-top: 1rem;
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Buttons */
.btn {
  --_bg: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.9em 1.6em;
  min-height: 48px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  background: var(--_bg);
  color: var(--on-gold);
  transition: transform var(--dur-1) var(--ease-out-quint),
              box-shadow var(--dur-1) var(--ease-out-quint),
              background var(--dur-1) var(--ease-out-quint);
  box-shadow: 0 8px 30px -12px oklch(0.64 0.19 26 / 0.7);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px oklch(0.64 0.19 26 / 0.85); background: var(--gold-bright); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: oklch(0.96 0.02 88 / 0.06); border-color: var(--gold); color: var(--gold-bright); box-shadow: none; }
.btn__arrow { transition: transform var(--dur-1) var(--ease-out-quint); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  transition: background var(--dur-2) var(--ease-out-quart),
              backdrop-filter var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) var(--ease-out-quart),
              padding var(--dur-2) var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: oklch(0.115 0.014 60 / 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-block: 0.6rem;
}
.nav__brand {
  font-family: var(--font);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.nav__brand .dot { color: var(--wine); }
.nav__brand small {
  font-family: var(--font);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__links a {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.3em;
  transition: color var(--dur-1) var(--ease-out-quart);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-1) var(--ease-out-quint);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { padding: 0.55em 1.15em; min-height: 40px; font-size: var(--step--1); }
.nav__menu-links { display: contents; }
.nav__toggle { display: none; }

@media (max-width: 760px) {
  .nav__menu-links { display: none; }
  .nav__cta { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-top: 5rem;
  padding-bottom: clamp(6rem, 4rem + 6vw, 9rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100%;
  height: 100%;
}
/* Volumetric golden light beams behind the title */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.64 0.19 26 / 0.30), transparent 55%),
    radial-gradient(90% 60% at 50% 120%, oklch(0.400 0.150 24 / 0.22), transparent 60%),
    linear-gradient(to bottom, var(--bg-deep), var(--bg) 45%, var(--bg));
}
.hero__beams {
  position: absolute;
  top: -10%;
  left: 50%;
  translate: -50% 0;
  width: min(120vw, 1100px);
  height: 120%;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%);
}
.hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 -120px 120px -60px var(--bg), inset 0 80px 100px -70px var(--bg-deep);
}

.hero__inner { position: relative; z-index: var(--z-base); text-align: center; }

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.5em 1.1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: oklch(0.115 0.014 60 / 0.5);
  backdrop-filter: blur(6px);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.hero__kicker .sep { width: 1px; height: 1em; background: var(--line-strong); }
.hero__kicker .muted { color: var(--ink-soft); letter-spacing: 0.04em; }

.hero__title {
  font-size: var(--hero);
  margin-top: clamp(1.2rem, 0.5rem + 2vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-weight: 800;
}
.hero__title .name { font-weight: 900; }
.hero__title .name {
  display: block;
  font-size: 1.35em;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-shadow: 0 0 42px oklch(0.64 0.19 26 / 0.35);
}
.hero__title .show {
  display: block;
  font-size: 0.5em;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-top: 0.35em;
}
.hero__title .show::before { content: "「"; opacity: 0.6; }
.hero__title .show::after { content: "」"; opacity: 0.6; }

.hero__sub {
  margin: 1.4rem auto 0;
  max-width: 40ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.4rem;
  margin-top: 1.8rem;
  font-size: var(--step-0);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.5em; color: var(--ink); font-weight: 600; }
.hero__meta svg { width: 1.15em; height: 1.15em; color: var(--gold); flex: none; }

.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 2.2rem; }

/* Countdown */
.countdown { margin-top: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.countdown__label { font-size: var(--step--1); letter-spacing: 0.12em; color: var(--ink-muted); font-weight: 700; }
.countdown__grid { display: flex; gap: clamp(0.6rem, 2vw, 1.4rem); }
.countdown__cell {
  min-width: clamp(58px, 14vw, 84px);
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: oklch(0.205 0.022 62 / 0.5);
  backdrop-filter: blur(8px);
  text-align: center;
}
.countdown__num {
  font-family: var(--font);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown__unit { display: block; margin-top: 0.4rem; font-size: var(--step--1); color: var(--ink-muted); letter-spacing: 0.08em; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: clamp(1.4rem, 3vh, 2.4rem);
  translate: -50% 0;
  z-index: var(--z-base);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ink-muted); font-weight: 700;
}
.hero__scroll .mouse {
  width: 22px; height: 34px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  position: relative;
}
.hero__scroll .mouse::after {
  content: ""; position: absolute; top: 6px; left: 50%; translate: -50% 0;
  width: 3px; height: 7px; border-radius: 3px; background: var(--gold);
  animation: scrollpulse 1.8s var(--ease-out-quart) infinite;
}
@keyframes scrollpulse { 0% { opacity: 0; transform: translate(-50%, -2px); } 40% { opacity: 1; } 80%,100% { opacity: 0; transform: translate(-50%, 9px); } }

/* ---------- Intro ---------- */
.intro { position: relative; }
.intro__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .intro__grid { grid-template-columns: 1.05fr 0.95fr; } }

.intro__copy p { max-width: var(--measure); font-size: var(--step-1); line-height: 1.75; color: var(--ink-soft); }
.intro__copy p + p { margin-top: 1.2rem; }
.intro__copy .lede {
  font-family: var(--font);
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 1.6rem;
}
.intro__copy .drop { color: var(--gold); }

/* Crafted stage figure (imagery via SVG/canvas, no fabricated artist photo) */
.stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 8%, oklch(0.64 0.19 26 / 0.35), transparent 60%),
    linear-gradient(to bottom, oklch(0.205 0.022 62), var(--bg-deep));
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -50px oklch(0 0 0 / 0.9), inset 0 1px 0 oklch(0.96 0.02 88 / 0.06);
}
.stage__figure { position: absolute; inset: 0; }
.stage__caption {
  position: absolute;
  left: 1.2rem; bottom: 1.1rem; right: 1.2rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
  display: flex; align-items: center; gap: 0.6em;
}
.stage__caption .tag {
  border: 1px dashed var(--line-strong); border-radius: var(--r-pill);
  padding: 0.2em 0.7em; color: var(--gold); font-weight: 700; flex: none;
}
/* Official poster fills the reserved image slot */
.stage--poster { aspect-ratio: 467 / 651; padding: 0; background: var(--bg-deep); }
.stage__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Info section band ---------- */
.band { background: linear-gradient(to bottom, transparent, oklch(0.115 0.014 60 / 0.6), transparent); }

/* Concert details — ticket-stub layout */
.details__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .details__grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }

.stub {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--surface), oklch(0.175 0.02 62));
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  overflow: hidden;
}
.stub::before {
  content: ""; position: absolute; inset-block: 0; left: -1px; width: 4px;
  background: linear-gradient(to bottom, var(--gold), var(--wine));
  opacity: 0.9;
}
.dl { display: grid; gap: 0; }
.dl__row {
  display: grid;
  grid-template-columns: minmax(6.5em, 8em) 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
.dl__row:last-child { border-bottom: 0; padding-bottom: 0; }
.dl__row:first-child { padding-top: 0; }
.dl dt { color: var(--ink-muted); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.04em; }
.dl dd { color: var(--ink); font-size: var(--step-1); font-weight: 600; }
.dl dd small { display: block; color: var(--ink-muted); font-size: 0.72em; font-weight: 500; margin-top: 0.25rem; }

.poster {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 50% at 50% 0%, oklch(0.64 0.19 26 / 0.28), transparent 60%),
    linear-gradient(to bottom, oklch(0.205 0.022 62), var(--bg-deep));
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
  min-height: 100%;
}
.poster__name { font-family: var(--font); font-size: var(--step-4); color: var(--ink); letter-spacing: 0.06em; text-align: center; text-shadow: 0 0 30px oklch(0.64 0.19 26 / 0.3); }
.poster__show { text-align: center; color: var(--gold); font-family: var(--font); font-size: var(--step-1); margin-top: 0.3rem; }
.poster__when { text-align: center; }
.poster__when b { display:block; font-size: var(--step-2); color: var(--ink); font-family: var(--font); }
.poster__when span { color: var(--ink-muted); font-size: var(--step--1); letter-spacing: 0.1em; }
.poster__seal {
  align-self: center;
  border: 1px solid var(--gold-deep);
  color: var(--gold);
  border-radius: var(--r-pill);
  padding: 0.4em 1em;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* ---------- Tickets ---------- */
.tiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tier {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.6rem 1.5rem;
  background: var(--surface);
  transition: transform var(--dur-1) var(--ease-out-quint), border-color var(--dur-1) var(--ease-out-quint), background var(--dur-1) var(--ease-out-quint);
}
.tier:hover { transform: translateY(-4px); border-color: var(--gold-deep); }
.tier--best { background: linear-gradient(160deg, oklch(0.255 0.04 74), oklch(0.185 0.025 64)); border-color: var(--gold-deep); }
.tier__badge {
  position: absolute; top: -0.7rem; right: 1.2rem;
  background: var(--gold); color: var(--on-gold);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.3em 0.8em; border-radius: var(--r-pill);
}
.tier__grade { font-family: var(--font); font-size: var(--step-2); color: var(--gold-bright); }
.tier__price { font-size: var(--step-2); color: var(--ink); font-weight: 800; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.tier__price small { font-size: 0.55em; color: var(--ink-muted); font-weight: 600; margin-left: 0.2em; }
.tier__desc { margin-top: 0.7rem; color: var(--ink-soft); font-size: var(--step--1); }

.booking {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, oklch(0.205 0.022 62 / 0.7), oklch(0.135 0.016 60 / 0.7));
}
@media (min-width: 760px) { .booking { grid-template-columns: 1fr auto; } }
.booking__open { color: var(--ink-soft); }
.booking__open b { color: var(--gold); font-weight: 800; }
.booking__vendors { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.vendor {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.7em 1.2em;
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out-quart), color var(--dur-1) var(--ease-out-quart), background var(--dur-1) var(--ease-out-quart);
}
.vendor:hover { border-color: var(--gold); color: var(--gold-bright); background: oklch(0.64 0.19 26 / 0.08); }
.vendor--phone {
  display: inline-flex; align-items: center; gap: 0.5em;
  border-color: var(--gold-deep); color: var(--gold-bright);
  background: oklch(0.64 0.19 26 / 0.06);
}
.vendor--phone svg { width: 1.05em; height: 1.05em; flex: none; }
.vendor--phone b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.vendor--phone:hover { border-color: var(--gold); background: oklch(0.64 0.19 26 / 0.14); }

/* ---------- Location ---------- */
.location__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .location__grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.map {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 300px;
  background:
    linear-gradient(oklch(0.34 0.03 66 / 0.25) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, oklch(0.34 0.03 66 / 0.25) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(60% 60% at 60% 40%, oklch(0.64 0.19 26 / 0.14), transparent 70%),
    var(--bg-deep);
  display: grid; place-items: center;
}
.map__pin {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--gold); text-align: center;
}
.map__pin svg { width: 40px; height: 40px; filter: drop-shadow(0 6px 14px oklch(0.64 0.19 26 / 0.4)); }
.map__pin b { color: var(--ink); font-size: var(--step-1); font-family: var(--font); }
.map__pin span { color: var(--ink-muted); font-size: var(--step--1); }
.location__info { display: flex; flex-direction: column; gap: 1.4rem; }
.location__block h3 { font-size: var(--step-1); margin-bottom: 0.5rem; color: var(--gold); }
.location__block p { color: var(--ink-soft); }

/* ---------- Notice / FAQ ---------- */
.faq { display: grid; gap: 0.8rem; max-width: 860px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease-out-quart);
}
.faq details[open] { border-color: var(--gold-deep); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 700; font-size: var(--step-1); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 1.2em; height: 1.2em; position: relative; color: var(--gold); }
.faq summary .plus::before, .faq summary .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
  transition: transform var(--dur-1) var(--ease-out-quint);
}
.faq summary .plus::before { width: 100%; height: 2px; }
.faq summary .plus::after { width: 2px; height: 100%; }
.faq details[open] summary .plus::after { transform: scaleY(0); }
.faq__body { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); line-height: 1.7; }
.faq__body ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.faq__body li { margin-block: 0.3rem; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 8rem;
  background: linear-gradient(to bottom, transparent, oklch(0.100 0.014 60));
  position: relative;
}
.footer__cta { text-align: center; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.footer__cta h2 { font-size: var(--step-3); }
.footer__cta p { color: var(--ink-soft); margin: 0.8rem auto 1.8rem; max-width: 40ch; }
.footer__grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 2rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
  color: var(--ink-muted); font-size: var(--step--1);
}
.footer__brand { font-family: var(--font); font-size: var(--step-1); color: var(--ink); letter-spacing: 0.06em; }
.footer__meta { display: grid; gap: 0.3rem; }
.footer__social { display: flex; gap: 0.8rem; align-items: center; }
.footer__social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: border-color var(--dur-1) var(--ease-out-quart), color var(--dur-1) var(--ease-out-quart);
}
.footer__social a:hover { border-color: var(--gold); color: var(--gold); }
.footer__social svg { width: 18px; height: 18px; }
.footer__note { margin-top: 1.5rem; color: var(--ink-muted); font-size: 0.78rem; opacity: 0.8; }

/* ---------- Sticky booking bar (always fixed, all viewports) ---------- */
.mobilecta {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-mobilecta);
  display: flex;
  padding: 0.8rem var(--gutter) calc(0.8rem + env(safe-area-inset-bottom));
  background: oklch(0.100 0.014 60 / 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  gap: 0.8rem; align-items: center; justify-content: space-between;
}
.mobilecta__info { display: grid; gap: 0.1rem; }
.mobilecta__info b { color: var(--ink); font-size: var(--step-0); font-family: var(--font); }
.mobilecta__info span { color: var(--ink-muted); font-size: 0.72rem; }
.mobilecta .btn { flex: none; }

/* ---------- Reveal animation ----------
   Content is visible by DEFAULT. Initial-hidden state only applies once JS
   has confirmed it can run (html.reveal-ready), so no-JS / crawler / headless
   renders never ship a blank section. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-3) var(--ease-out-quint), transform var(--dur-3) var(--ease-out-quint); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
.reveal-ready [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-2) var(--ease-out-quint), transform var(--dur-2) var(--ease-out-quint); }
.reveal-ready [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero__scroll .mouse::after { animation: none; opacity: 1; }
}

/* ---------- Hero entrance (JS adds .hero-ready) ---------- */
.reveal-ready .hero__inner > * { opacity: 0; transform: translateY(26px); }
.hero.hero-ready .hero__inner > * { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out-quint), transform var(--dur-3) var(--ease-out-quint); }
.hero.hero-ready .hero__inner > *:nth-child(1) { transition-delay: 0.1s; }
.hero.hero-ready .hero__inner > *:nth-child(2) { transition-delay: 0.22s; }
.hero.hero-ready .hero__inner > *:nth-child(3) { transition-delay: 0.34s; }
.hero.hero-ready .hero__inner > *:nth-child(4) { transition-delay: 0.46s; }
.hero.hero-ready .hero__inner > *:nth-child(5) { transition-delay: 0.58s; }
.hero.hero-ready .hero__inner > *:nth-child(6) { transition-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) {
  .hero__inner > * { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 520px) {
  .hero__meta { gap: 0.5rem 1rem; font-size: var(--step--1); }
  .footer__grid { flex-direction: column; }
  .dl__row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* =============================================================
   개편: 포스터 히어로 · 좌석 행 · 네이버맵 · 사업자정보 · 예매 모달
   ============================================================= */

/* ---------- Poster hero ---------- */
.hero--poster { padding-top: 6.5rem; padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.hero__poster {
  position: relative; z-index: var(--z-base);
  height: min(78svh, 680px); width: fit-content; max-width: 92vw;
  margin-inline: auto;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -40px oklch(0 0 0 / 0.9), 0 0 60px -20px oklch(0.64 0.19 26 / 0.35);
}
.hero__poster img { height: 100%; width: auto; display: block; }
@media (max-width: 560px) { .hero__poster { height: auto; width: min(92vw, 460px); } }

/* ---------- Guests ---------- */
.guests__intro { text-align: center; color: var(--ink-soft); font-size: var(--step-0); margin: -0.5rem auto 2rem; }
.guests__intro-logo { display: inline-block; height: 1.4em; width: auto; vertical-align: -0.35em; margin-right: 0.15em; }
.guests__grid {
  list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem); max-width: 860px; margin-inline: auto;
}
.guest { text-align: center; }
.guest__photo {
  width: clamp(110px, 22vw, 170px); aspect-ratio: 1 / 1; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 1px solid var(--line); margin: 0 auto 1rem;
  box-shadow: 0 20px 40px -24px oklch(0 0 0 / 0.6);
}
.guest__name { font-weight: 800; font-size: var(--step-1); color: var(--ink); }
.guest__desc { margin-top: 0.2rem; color: var(--ink-muted); font-size: var(--step--1); }
@media (max-width: 640px) {
  .guests__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; gap: 1.4rem 1rem; }
  .guest__photo { width: clamp(100px, 30vw, 130px); }
  .guest__desc-break { display: block; }
}

/* ---------- Tickets: one seat per row ---------- */
.tiers--rows { grid-template-columns: 1fr; gap: 0.8rem; max-width: 860px; margin-inline: auto; }
.tier--row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.4rem 1.4rem; padding: 1.15rem 1.6rem;
}
.tier--row .tier__grade { font-size: var(--step-1); min-width: 3.2em; }
.tier--row .tier__desc { margin-top: 0; color: var(--ink-muted); }
.tier--row .tier__price { margin-top: 0; font-size: var(--step-1); white-space: nowrap; }
.tier--row .tier__badge { top: -0.6rem; }
@media (max-width: 560px) {
  .tier--row { grid-template-columns: 1fr auto; }
  .tier--row .tier__desc { grid-column: 1 / -1; }
}
.tickets__action { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
.tickets__note { color: var(--ink-muted); font-size: var(--step--1); max-width: 48ch; }

/* ---------- Naver map card ---------- */
.map--naver { cursor: pointer; transition: border-color var(--dur-1) var(--ease-out-quart), transform var(--dur-1) var(--ease-out-quint); }
.map--naver:hover { border-color: var(--gold); transform: translateY(-2px); }
.map__cta { margin-top: 0.7rem; display: inline-flex; align-items: center; gap: 0.35em; color: #05c757; font-weight: 800; font-size: var(--step--1); letter-spacing: 0.01em; }

/* ---------- Business info (footer) ---------- */
.bizinfo {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  color: var(--ink-muted); font-size: 0.78rem; line-height: 1.65;
}
.bizinfo__name { color: var(--ink-soft); font-weight: 800; }
.bizinfo em { font-style: normal; opacity: 0.7; }

/* ---------- Reservation modal ---------- */
/* ---------- Share modal ---------- */
.share__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 0.6rem; }
.share__item {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; text-align: center;
}
.share__icon {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  transition: transform var(--dur-1) var(--ease-out-quint);
}
.share__item:hover .share__icon { transform: translateY(-3px); }
.share__icon svg { width: 26px; height: 26px; }
.share__icon--kakao { background: #FEE500; color: #191600; }
.share__icon--band { background: #00C242; color: #fff; }
.share__icon--facebook { background: #1877F2; color: #fff; }
.share__icon--x { background: #000; color: #fff; }
.share__icon--line { background: #06C755; color: #fff; }
.share__icon--copy { background: var(--surface-2, oklch(0.9 0.01 80)); color: var(--ink); border: 1px solid var(--line-strong); }

.modal { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: 1.2rem; opacity: 0; transition: opacity var(--dur-1) var(--ease-out-quart); }
.modal.is-open { opacity: 1; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: oklch(0.08 0.01 60 / 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal__dialog {
  position: relative; z-index: 1; width: min(92vw, 440px);
  background: linear-gradient(160deg, var(--surface), oklch(0.14 0.016 60));
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(1.7rem, 1rem + 2.5vw, 2.5rem);
  box-shadow: 0 40px 100px -30px oklch(0 0 0 / 0.9);
  transform: translateY(14px) scale(0.98); transition: transform var(--dur-1) var(--ease-out-quint);
}
.modal.is-open .modal__dialog { transform: none; }
.modal__close { position: absolute; top: 0.9rem; right: 0.9rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--ink-muted); border: 1px solid var(--line); }
.modal__close:hover { color: var(--ink); border-color: var(--line-strong); }
.modal__close svg { width: 20px; height: 20px; }
.modal__title { font-size: var(--step-2); margin-top: 0.4rem; }
.modal__sub { color: var(--ink-muted); font-size: var(--step--1); margin-top: 0.4rem; margin-bottom: 1.5rem; }
.modal__vendors { display: grid; gap: 0.7rem; }
.vendor--lg { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 1em 1.3em; font-size: var(--step-0); border-radius: var(--r-md); }
.vendor--lg.vendor--phone { justify-content: center; }
.vendor--lg svg { width: 1.15em; height: 1.15em; flex: none; }
.vendor__logo { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; max-height: 34px; object-fit: contain; object-position: left center; display: block; }
.vendor__arrow { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__dialog { transition: none; }
}

/* ---------- 문의 폼 ---------- */
.inquiry__form { display: flex; gap: 0.6rem; }
.inquiry__input {
  flex: 1; min-width: 0; padding: 0.9em 1.1em; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); font-size: var(--step-0); font-family: var(--font);
}
.inquiry__input::placeholder { color: var(--ink-muted); }
.inquiry__input:focus { outline: none; border-color: var(--gold); }
.inquiry__submit { flex: none; padding-inline: 1.3em; }
.inquiry__status { margin-top: 0.8rem; font-size: var(--step--1); color: var(--ink-muted); min-height: 1.3em; }
.inquiry__status.is-error { color: oklch(0.62 0.2 25); }
.inquiry__status.is-ok { color: var(--gold-bright, var(--gold)); }
@media (max-width: 420px) {
  .inquiry__form { flex-direction: column; }
  .inquiry__submit { width: 100%; }
}

/* ---------- Seat map ---------- */
.seatmap { max-width: 860px; margin: 0 auto clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-deep); }
@media (max-width: 640px) {
  .seatmap { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; }
  .seatmap__legend-label { font-size: 34px; }
}
.seatmap img { width: 100%; height: auto; display: block; }
.seatmap figcaption { padding: 0.75rem 1rem; font-size: var(--step--1); color: var(--ink-muted); text-align: center; border-top: 1px solid var(--line); }

/* ---------- Nav brand (title at top) ---------- */
.nav__brand { font-size: var(--step-0); font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; }
.nav__brand-city { color: var(--gold); }
@media (max-width: 430px) { .nav__brand { font-size: var(--step--1); } }

/* ---------- Poster section (moved below hero) ---------- */
.posterband { padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem); }
.posterfig {
  width: fit-content; max-width: 92vw; height: min(72svh, 640px);
  margin-inline: auto; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -40px oklch(0 0 0 / 0.9), 0 0 60px -22px oklch(0.64 0.19 26 / 0.32);
}
.posterfig img { height: 100%; width: auto; display: block; }
@media (max-width: 560px) { .posterfig { height: auto; width: min(92vw, 460px); } }

/* ---------- Seat map (inline SVG) ---------- */
.seatmap__svg { display: block; width: 100%; height: auto; background: var(--bg-deep); padding: clamp(0.6rem, 2vw, 1.3rem); }

/* ---------- Seats: information only (not selectable) ---------- */
.tiers--rows.tiers--info { padding-left: 0; list-style: none; }
.tier--r { --grade: #7c2e8c; }
.tier--s { --grade: #21406f; }
.tier--a { --grade: #238040; }
.tiers--info .tier { cursor: default; border-left: 4px solid var(--grade, var(--line)); }
.tiers--info .tier:hover { transform: none; border-color: var(--line); border-left-color: var(--grade, var(--line)); }
.tiers--info .tier__grade { color: var(--ink); }


/* ---------- Sticky booking bar: show once hero CTA scrolls away (all viewports) ---------- */

/* ---------- Share toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 6rem; transform: translateX(-50%) translateY(10px);
  z-index: var(--z-overlay);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 0.7em 1.3em; font-size: var(--step--1); font-weight: 700;
  box-shadow: 0 20px 50px -20px oklch(0 0 0 / 0.8);
  opacity: 0; transition: opacity 0.3s var(--ease-out-quart), transform 0.3s var(--ease-out-quint);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Hero title single line (dedup) ---------- */
.hero--poster { }
.hero__title .name + .show { display: none; }

/* ---------- Hero banner (top-half poster) ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero__banner {
  width: min(92vw, 620px); margin: 0 auto clamp(0.6rem, 2vw, 1.2rem);
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 30px 80px -40px oklch(0 0 0 / 0.9), 0 0 52px -18px oklch(0.64 0.19 26 / 0.35);
}
.hero__banner img { width: 100%; height: auto; display: block; }

/* ---------- Sticky bar action buttons ---------- */
.mobilecta__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.mobilecta__actions .btn { height: 48px; min-height: 0; padding-block: 0; }
.mobilecta__icon { padding: 0; width: 48px; min-width: 48px; min-height: 48px; }
.mobilecta__icon svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .mobilecta__info { display: none; }
  .mobilecta__actions { flex: 1; }
  .mobilecta__actions .btn:first-child { flex: 1; }
}

/* ---------- PC: 예매바는 화면 100% 폭, 버튼은 다시 중앙 정렬 ---------- */
@media (min-width: 900px) {
  .mobilecta {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  }
  .mobilecta__info { grid-column: 1; }
  .mobilecta__actions { grid-column: 2; justify-self: center; }
}

/* ---------- Hero: static title + poster-as-background countdown ---------- */
.hero__title-text {
  font-size: var(--step-2); font-weight: 800; letter-spacing: 0.01em; color: var(--ink);
  margin-bottom: clamp(0.9rem, 2.2vw, 1.5rem); line-height: 1.2;
}
.hero__title-city { color: var(--gold); }
.hero__poster {
  position: relative; width: min(100%, 900px); height: auto; margin: 0 auto;
  aspect-ratio: 467 / 325; background-image: url(assets/poster-banner.jpg); background-size: cover; background-position: center;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 30px 80px -40px oklch(0 0 0 / 0.9), 0 0 52px -18px oklch(0.64 0.19 26 / 0.35);
}
/* PC: 크롭된 배너 대신 세로형 풀 포스터를 사용 */
@media (min-width: 900px) {
  .hero__poster {
    background-image: url(assets/poster-desktop.jpg);
    aspect-ratio: 1100 / 1551;
    width: auto; height: min(74svh, 760px);
  }
}
.hero__poster::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, oklch(0.08 0.01 60 / 0) 40%, oklch(0.07 0.01 60 / 0.55) 72%, oklch(0.04 0.01 60 / 0.9) 100%);
}
.hero__cd {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(0.7rem, 2.4vw, 1.3rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero__cd .countdown__cell { background: oklch(0.10 0.014 60 / 0.62); }
.hero__cd .countdown__label { color: var(--ink); text-shadow: 0 1px 6px oklch(0 0 0 / 0.6); }

/* ---------- Google map embed ---------- */
.map--embed { display: block; padding: 0; overflow: hidden; position: relative; min-height: 340px; }
.map__frame { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.map__open {
  position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4em;
  background: oklch(0.12 0.014 60 / 0.92); color: var(--surface);
  border: 1px solid oklch(1 0 0 / 0.16); border-radius: var(--r-pill);
  padding: 0.55em 1em; font-size: var(--step--1); font-weight: 700;
  box-shadow: 0 8px 20px -8px oklch(0 0 0 / 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.map__open svg { width: 1.05em; height: 1.05em; flex: none; }
.map__open:hover { border-color: var(--gold); color: var(--gold-bright); }
.map__note {
  display: grid; place-items: center; text-align: center; gap: 0.3rem;
  padding: 2rem 1.4rem; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.6;
  min-height: 340px;
}

/* ============================================================
   LIGHT THEME 보정 — 하드코딩 다크 색상을 밝은 톤으로 오버라이드
   ============================================================ */
.nav.is-scrolled { background: oklch(0.99 0.004 80 / 0.85); border-bottom-color: var(--line); }
.hero__glow {
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.62 0.20 26 / 0.12), transparent 55%),
    radial-gradient(90% 60% at 50% 120%, oklch(0.55 0.16 25 / 0.08), transparent 60%),
    linear-gradient(to bottom, var(--bg), var(--bg) 62%, var(--bg-deep));
}
.hero__beams { mix-blend-mode: multiply; opacity: 0.10; }
.band { background: linear-gradient(to bottom, transparent, oklch(0.95 0.01 70 / 0.75), transparent); }
.footer { background: linear-gradient(to bottom, transparent, oklch(0.955 0.008 70)); border-top-color: var(--line); }
.mobilecta { background: oklch(0.99 0.004 80 / 0.95); border-top-color: var(--line); }
.modal__dialog { background: linear-gradient(160deg, var(--surface), oklch(0.965 0.006 75)); box-shadow: 0 30px 80px -34px oklch(0.3 0.02 40 / 0.35); }
.modal__backdrop { background: oklch(0.25 0.01 60 / 0.5); }

.btn { box-shadow: 0 8px 22px -12px oklch(0.53 0.21 26 / 0.42); }
.btn:hover { box-shadow: 0 14px 32px -12px oklch(0.53 0.21 26 / 0.52); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: oklch(0.53 0.21 26 / 0.07); border-color: var(--gold); color: var(--gold-bright); }

/* 히어로 포스터: 오버레이 제거(인물 노출), 그림자 완화 */
.hero__poster::before { display: none; }
.hero__poster { box-shadow: 0 24px 60px -38px oklch(0.3 0.02 40 / 0.34), 0 0 44px -22px oklch(0.55 0.2 26 / 0.24); }

/* 카운트다운: 밝은 카드로 (포스터 밖에서 잘 보이게) */
.countdown { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.countdown__cell { background: var(--surface); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 6px 18px -12px oklch(0.3 0.02 40 / 0.25); }
.countdown__num { color: var(--gold); }
.countdown__label { color: var(--ink-muted); }
.countdown__unit { color: var(--ink-muted); }

/* 좌석 배치도: 다크 다이어그램 카드로 유지(가독성) */
.seatmap { background: #15121d; border-color: oklch(1 0 0 / 0.10); }
.seatmap__svg { background: transparent; }
.seatmap figcaption { color: oklch(0.82 0.01 80); border-top-color: oklch(1 0 0 / 0.12); }

/* 전화예매/공유 반응형: 모바일=아이콘만, PC=아이콘+텍스트 */
.tel-num { display: none; }
.cta-text-pc { display: none; }
@media (min-width: 761px) {
  .tel-label { display: none; }
  .tel-num { display: inline; }
  .cta-text-pc { display: inline; }
  .mobilecta__tel.mobilecta__icon,
  .mobilecta__share.mobilecta__icon,
  .mobilecta__inquiry.mobilecta__icon { width: auto; min-width: 0; padding: 0 1.05em; gap: 0.4em; }
}

/* ============================================================
   정렬·여백·폰트 정비 (좌우 대칭 + 상하 폰트 균형)
   ============================================================ */
/* 최상단 여백 축소 + 히어로를 위에서부터 정렬 */
.hero { align-items: start; padding-top: clamp(3.6rem, 2.8rem + 1.6vw, 4.6rem); }

/* 내비/섹션 헤드/FAQ 중앙 정렬 → 좌우 대칭 */
.nav { justify-content: center; }
.section__head { margin-inline: auto; text-align: center; }
.section__head .eyebrow { justify-content: center; font-size: var(--step-2); font-weight: 800; }
.section__head .eyebrow::before { display: none; }
.faq { margin-inline: auto; }

/* 폰트 균형: FAQ 제목은 히어로 타이틀보다 작게, 질문/푸터 본문을 상단과 맞춤 */
.section__title { font-size: var(--step-1); }
.faq summary { font-size: var(--step-0); }
.footer__note, .bizinfo { font-size: var(--step--1); }

/* 히어로 메타 간격 정돈 */
.hero__meta { gap: 0.45rem 1rem; }

/* ---------- 폰트 가독성 정리 (등급 굵기·색 / 소제목 / 모바일 메타 / "원") ---------- */
.tiers--info .tier__grade { color: var(--grade, var(--ink)); font-weight: 800; }
.location__block h3 { font-size: var(--step-0); }
.tier__price small { font-size: 0.62em; }
@media (max-width: 520px) { .hero__meta { font-size: 0.92rem; } }

/* ---------- 여백 대칭 보정 ---------- */
/* 최상단(내비 아래) 여백을 좌우 여백과 비슷하게 살짝 확보 */
.hero { padding-top: clamp(4.3rem, 3.5rem + 1.4vw, 4.8rem); }

/* ---------- 흘림체(붓글씨) 타이틀 — Nanum Brush Script 서브셋 임베드 ---------- */
@font-face {
  font-family: "JeokwooBrush";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}
.hero__title-text {
  font-family: "JeokwooBrush", var(--font);
  font-weight: 400; font-size: var(--step-3); letter-spacing: 0.02em; line-height: 1.15;
}
.hero__title-city { font-family: "JeokwooBrush", var(--font); }

/* ---------- 최상단 여백 추가 축소 ---------- */
.nav { padding-block: 0.6rem; }
.hero { padding-top: clamp(3.1rem, 2.5rem + 1vw, 3.6rem); }

/* ---------- 상단 간격 살짝 확보(0 방지) + 히어로 정보영역 정리 ---------- */
.hero { padding-top: clamp(3.5rem, 2.9rem + 1vw, 4rem); }

/* 좁은 화면: 일시/장소/관람시간을 세로로 깔끔하게(어정쩡한 2+1 줄바꿈 방지) */
@media (max-width: 760px) {
  .hero__meta { flex-direction: column; align-items: center; gap: 0.55rem; }
}
/* 정보 블록 세로 리듬 정돈 */
.countdown { margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.hero__meta { margin-top: clamp(1.1rem, 2.5vw, 1.6rem); }