/* ============================================================
   공통 GNB 헤더/푸터 + main_site_v1 디자인 토큰
   모든 페이지(메인 제외, 메인은 동일 inline 사용)에 link
   ============================================================ */
:root {
  /* Twilight Purple */
  --twilight-950: #1F1547;
  --twilight-900: #2A1F5C;
  --twilight-800: #342673;
  --twilight-700: #3E2D8C;
  --twilight-600: #4F3DA8;
  --twilight-500: #6B53C7;

  /* Lilac */
  --lilac-500: #A78BFA;
  --lilac-400: #C4B5FD;
  --lilac-300: #DDD6FE;
  --lilac-200: #EDE9FE;

  /* Gold / Pink */
  --moon-gold: #FCD34D;
  --moon-gold-deep: #F59E0B;
  --moon-cream: #FEF3C7;
  --y2k-pink: #F472B6;

  /* Text */
  --text-primary: #FFFFFF;
  --text-lavender: #F5F3FF;
  --text-muted: #C4B5FD;
  --text-mute-2: #9B8FCF;
  --text-disabled: #7C6FB0;

  /* Surfaces */
  --bg-card: rgba(52, 38, 115, 0.55);
  --bg-card-strong: rgba(42, 31, 92, 0.75);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border-soft: rgba(196, 181, 253, 0.18);
  --border-mid: rgba(196, 181, 253, 0.32);

  --radius-xs: 8px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px;
  --radius-pill: 999px;
  --tap: 44px;
  --shadow-card: 0 12px 32px rgba(31, 21, 71, 0.55), 0 2px 8px rgba(167, 139, 250, 0.18);

  --font-display: 'Cafe24Ssurround', 'Pretendard Variable', sans-serif;
  --font-body: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --header-h: 64px;
}
@media (min-width: 768px) { :root { --header-h: 72px; } }

/* === GNB === */
.gnb {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  padding-top: var(--safe-top);
  background: rgba(31, 21, 71, 0.55);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.gnb.scrolled {
  background: rgba(31, 21, 71, 0.85);
  border-bottom: 1px solid var(--border-soft);
}

/* ============================================================
   본인 좌석 lock 카운트다운 sticky bar — GNB 바로 아래
   ============================================================ */
#lockCountdownBar {
  position: sticky;
  top: var(--header-h, 56px);
  z-index: 95;
  background: linear-gradient(180deg, rgba(252,211,77,0.18), rgba(252,211,77,0.10));
  border-bottom: 1px solid rgba(252,211,77,0.45);
  color: #FDE68A;
  font-size: 13px;
  padding: 8px clamp(16px, 3vw, 32px);
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
#lockCountdownBar .lcb-ico { font-size: 16px; }
#lockCountdownBar .lcb-text b { color: #FCD34D; font-weight: 800; }
#lockCountdownBar .lcb-timer {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 16px;
  color: #FCD34D;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 5ch;
}
#lockCountdownBar .lcb-link {
  margin-left: auto;
  color: #FDE68A;
  text-decoration: underline;
  font-weight: 600;
  font-size: 12.5px;
}
#lockCountdownBar.urgent {
  background: linear-gradient(180deg, rgba(239,68,68,0.22), rgba(239,68,68,0.10));
  border-bottom-color: rgba(239,68,68,0.55);
  color: #FECACA;
  animation: lcbUrgentPulse 1s ease-in-out infinite alternate;
}
#lockCountdownBar.urgent .lcb-timer { color: #FCA5A5; }
@keyframes lcbUrgentPulse {
  from { box-shadow: inset 0 0 0 rgba(239,68,68,0); }
  to   { box-shadow: inset 0 -2px 0 rgba(239,68,68,0.5); }
}
/* 좁은 화면에서도 줄 안 깨지게 */
@media (max-width: 480px) {
  #lockCountdownBar { font-size: 12px; gap: 6px; padding: 6px 12px; }
  #lockCountdownBar .lcb-timer { font-size: 14px; }
  #lockCountdownBar .lcb-link { font-size: 11.5px; }
}
.gnb-inner {
  width: 100%; max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  text-decoration: none;
}
.brand-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(252, 211, 77, 0.25), transparent 60%),
    linear-gradient(135deg, var(--twilight-700), var(--twilight-500));
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--border-mid), 0 4px 12px rgba(31, 21, 71, 0.6);
  overflow: hidden; flex-shrink: 0;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-logo-fallback {
  font-family: var(--font-display);
  color: var(--moon-gold); font-size: 18px; letter-spacing: -0.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text-main {
  font-family: var(--font-display);
  font-size: 15px; color: var(--text-primary);
  letter-spacing: -0.01em;
}
.brand-text-sub {
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.02em;
}
@media (max-width: 480px) { .brand-text-sub { display: none; } }

.gnb-menu { display: none; align-items: center; gap: 4px; }
.gnb-menu a {
  font-family: var(--font-display);
  font-size: 15px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  color: var(--text-lavender);
  min-height: var(--tap);
  display: inline-flex; align-items: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.gnb-menu a:hover { background: rgba(196, 181, 253, 0.1); color: var(--text-primary); }
.gnb-menu a.active { color: var(--moon-gold); }
@media (min-width: 880px) { .gnb-menu { display: flex; } }

.gnb-hamburger {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: 10px;
  border: none; background: transparent;
  color: var(--text-lavender); cursor: pointer;
}
.gnb-hamburger:hover { background: rgba(196, 181, 253, 0.1); }
.gnb-hamburger svg { width: 22px; height: 22px; }
@media (min-width: 880px) { .gnb-hamburger { display: none; } }

.mobile-drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(15, 10, 38, 0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: calc(var(--header-h) + 24px + var(--safe-top)) 24px 24px;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}
.mobile-drawer.open { transform: translateY(0); visibility: visible; }
.mobile-drawer nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-drawer a {
  font-family: var(--font-display);
  font-size: 22px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border-soft);
  min-height: var(--tap);
  display: flex; align-items: center;
  color: var(--text-lavender);
  text-decoration: none;
}
.mobile-drawer a.active { color: var(--moon-gold); }
@media (min-width: 880px) { .mobile-drawer { display: none; } }

/* === 푸터 === */
.app-footer {
  margin-top: 80px;
  padding: 32px clamp(20px, 4vw, 40px) calc(24px + var(--safe-bottom));
  border-top: 1px solid var(--border-soft);
  background: rgba(15, 10, 40, 0.5);
  font-size: 12px; line-height: 1.7;
  color: var(--text-muted);
}
.app-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 24px;
  grid-template-columns: 1fr 1fr 1fr;
}
.app-footer h4 {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700;
  color: var(--moon-cream);
  letter-spacing: 0.02em; text-transform: uppercase;
  font-family: var(--font-display);
}
.app-footer .biz-info p { margin: 2px 0; }
.app-footer a { color: var(--text-muted); text-decoration: none; }
.app-footer a:hover { color: var(--moon-gold); }
.app-footer .legal-list { list-style: none; margin: 0; padding: 0; }
.app-footer .legal-list li { margin: 4px 0; }
.app-footer .copyright {
  grid-column: 1/-1;
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
  text-align: center;
  font-size: 11px; color: var(--text-disabled);
}
@media (max-width: 720px) {
  .app-footer-inner { grid-template-columns: 1fr; }
}