:root {
  --ink: #15121f;
  --muted: #6f6a7d;
  --night: #090713;
  --purple: #7c3cff;
  --pink: #ff3d91;
  --gold: #ffd36a;
  --line: #e9e6ef;
  --paper: #fbfaff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.topbar { height: 72px; padding: 0 max(24px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(9,7,19,.97); color: white; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand { display: inline-flex; gap: 10px; align-items: center; font-weight: 900; letter-spacing: .08em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #120b20; background: linear-gradient(135deg, var(--gold), #ff8a3d 45%, var(--pink)); box-shadow: 0 0 25px rgba(255,61,145,.35); }
.menu-button { padding: 10px 16px; color: #e9e5f5; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 99px; cursor: pointer; }
.hero { min-height: 600px; color: white; position: relative; display: grid; align-items: center; overflow: hidden; background: var(--night) url('/assets/tonight-hero.png') center/cover no-repeat; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,6,17,.97) 0%, rgba(8,6,17,.84) 42%, rgba(8,6,17,.4) 76%, rgba(8,6,17,.68) 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; z-index: -1; background: linear-gradient(transparent, var(--night)); }
.hero-glow { position: absolute; width: 420px; height: 420px; left: -240px; top: 70px; border-radius: 50%; background: rgba(124,60,255,.32); filter: blur(80px); z-index: -1; }
.hero-content { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 74px 0 86px; }
.eyebrow { margin: 0 0 14px; color: var(--gold); font-size: .88rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.dark { color: #7040da; }
h1 { margin: 0; max-width: 650px; font-size: clamp(3.2rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.06em; }
h1 em { color: transparent; font-style: normal; background: linear-gradient(90deg, var(--gold), #ff7f66 50%, var(--pink)); -webkit-background-clip: text; background-clip: text; }
.hero-copy { margin: 28px 0; color: #d9d5e4; font-size: 1.12rem; line-height: 1.7; }
.search { display: flex; align-items: center; width: min(680px, 100%); padding: 7px; background: white; border-radius: 17px; box-shadow: 0 18px 45px rgba(0,0,0,.3); }
.search-icon { padding-left: 16px; color: #6d6678; font-size: 1.7rem; transform: rotate(-20deg); }
.search input { min-width: 0; flex: 1; height: 52px; padding: 0 14px; border: 0; outline: 0; color: #211b2c; font-size: 1rem; }
.search button { height: 48px; padding: 0 25px; border: 0; border-radius: 12px; color: white; font-weight: 800; background: linear-gradient(135deg, var(--purple), var(--pink)); cursor: pointer; }
.search input:focus-visible { outline: 3px solid rgba(124,60,255,.26); border-radius: 8px; }
.examples { color: #aaa3ba; font-size: .86rem; }
.search-message { min-height: 24px; color: #ffe196; font-weight: 700; }
.section { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 88px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-heading.compact { margin-bottom: 28px; }
.section-heading h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.045em; }
.section-heading > p { max-width: 370px; margin: 0 0 4px; color: var(--muted); line-height: 1.65; }
.region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.region-card { min-height: 100px; padding: 20px; display: flex; align-items: flex-end; justify-content: space-between; text-align: left; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 18px; cursor: pointer; transition: .2s ease; }
.region-card strong { font-size: 1.16rem; }
.region-card span { color: #8b8597; font-size: .82rem; }
.region-card:hover, .region-card:focus-visible { transform: translateY(-3px); border-color: #bba1ff; box-shadow: 0 12px 26px rgba(40,21,75,.08); outline: none; }
.region-card.active { color: white; background: linear-gradient(135deg, #171020, #4c237c); border-color: transparent; }
.region-card.active span { color: var(--gold); }
.popular { padding-top: 35px; }
.venue-card { display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; color: white; background: #100d19; border-radius: 28px; box-shadow: 0 26px 70px rgba(21,14,35,.18); }
.venue-image { min-height: 430px; background: #1b132a url('/assets/tonight-hero.png') center/cover no-repeat; }
.venue-info { padding: clamp(30px, 5vw, 58px); align-self: center; }
.venue-topline { display: flex; gap: 10px; align-items: center; }
.location, .open { padding: 7px 11px; border-radius: 99px; font-size: .78rem; font-weight: 800; }
.location { color: #1a1026; background: var(--gold); }
.open { color: #d9d0ed; border: 1px solid #494054; }
.venue-info h3 { margin: 20px 0 12px; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.05em; }
.venue-info > p { color: #bbb4c6; line-height: 1.7; }
dl { margin: 25px 0 32px; }
dl div { display: grid; grid-template-columns: 62px 1fr; padding: 11px 0; border-top: 1px solid #302b38; }
dt { color: #8f879b; }
dd { margin: 0; color: #e6e2eb; }
.primary-link { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-radius: 13px; color: #1b1024; background: white; font-weight: 900; }
.primary-link:hover, .primary-link:focus-visible { background: var(--gold); outline: 3px solid rgba(255,211,106,.25); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 24px; font-size: .9rem; }
.footer-nav a:hover { color: white; }
footer { margin-top: 48px; padding: 56px max(24px, calc((100vw - 1120px) / 2)); color: #9d96ab; background: var(--night); }
.footer-brand { color: white; }
footer p { margin: 20px 0 8px; color: #d8d2e0; font-weight: 700; }
footer small { line-height: 1.6; }
@media (max-width: 760px) {
  .topbar { height: 64px; padding: 0 18px; }
  .hero { min-height: 570px; background-position: 62% center; }
  .hero-content { width: calc(100% - 36px); padding: 58px 0 68px; }
  h1 { font-size: clamp(3.4rem, 17vw, 5.2rem); }
  .hero-copy { font-size: 1rem; }
  .search { padding: 6px; border-radius: 15px; }
  .search-icon { display: none; }
  .search input { padding: 0 9px; font-size: .92rem; }
  .search button { padding: 0 18px; }
  .examples { line-height: 1.6; }
  .section { width: calc(100% - 36px); padding: 66px 0; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 14px; }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .venue-card { grid-template-columns: 1fr; }
  .venue-image { min-height: 245px; }
  .venue-info { padding: 28px 22px 24px; }
  dl div { grid-template-columns: 54px 1fr; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .region-card { transition: none; } }