/* ═══════════════════════════════════════════════════════════════════
   2026 청파제 靑月宴 — 밤하늘 · 달빛 · 靑(청록) 포인트
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #04101f;
  --bg-2: #081a31;
  --bg-3: #0c2240;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.11);
  --stroke-2: rgba(255, 255, 255, 0.2);
  --ink: #ffffff;
  --text: rgba(255, 255, 255, 0.92);
  --text-2: rgba(255, 255, 255, 0.66);
  --text-3: rgba(255, 255, 255, 0.46);
  --cyan: #79dce8;
  --cyan-logo: #5fd0e1;
  --cyan-soft: rgba(121, 220, 232, 0.14);
  --gold: #f2d9a0;
  --alert: #ff8f7d;
  --rule: rgba(255, 255, 255, 0.23);
  --btn-ink: #071227;
  --pill: linear-gradient(180deg, #ffffff 0%, #d6e8f8 4%, #d9ecfe 72%, #ffffff 100%);

  /* 메인 홈 팔레트 (밤하늘) */
  --n-navy: #192773;
  --n-slate: #344373;
  --n-gold: #d9ca7e;
  --n-yellow: #f2cb05;
  --n-orange: #f29f05;
  --n-deep: #080e30;

  --font-serif: "Hahmlet", "Noto Serif KR", Georgia, serif;
  --font-body: "IBM Plex Sans KR", "Pretendard Variable", "Pretendard", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-logo: "Poppins", sans-serif;

  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --e-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --e-slow: cubic-bezier(0.4, 0, 0.2, 1);

  --page-width: 480px;
  --radius: 18px;

  /* 히어로 설계 단위: 1u = 기준 화면(430×880)의 1px */
  --vw: min(100vw, var(--page-width));
  --u: max(min(0.92px, calc(100vh / 620)), min(calc(var(--vw) / 430), calc(100vh / 880)));
  --dh-px: calc(880 * var(--u));
  --vshift: calc(max(0px, (100vh - var(--dh-px))) * 0.34);
}

@supports (height: 100svh) {
  :root {
    --u: max(min(0.92px, calc(100svh / 620)), min(calc(var(--vw) / 430), calc(100svh / 880)));
    --vshift: calc(max(0px, (100svh - var(--dh-px))) * 0.34);
  }
}

@media (max-height: 620px) {
  :root {
    --u: max(min(0.85px, calc(100vh / 470)), min(calc(var(--vw) / 640), calc(100vh / 560)));
    --dh-px: calc(560 * var(--u));
    --vshift: 0px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--text);
  background: #020913;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font-family: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.page {
  position: relative;
  max-width: var(--page-width);
  min-height: 100vh;
  margin: 0 auto;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(38, 80, 140, 0.25), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x: clip;
}


/* ═══ HERO (참고 모션 UI 구조 그대로) ═══════════════════════════════ */
.stage {
  position: relative;
  z-index: 10;
  height: 100vh;
  height: 100svh;
  min-height: calc(560 * var(--u));
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  color: #ffffff;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s linear;
}

.scene.is-active {
  opacity: 1;
}

.scene-sky {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: sky-drift 48s ease-in-out infinite alternate;
}

@keyframes sky-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(-2.5%, 1.5%, 0); }
}

/* 배경의 큰 달 — 화면 아래에서 떠오르는 구도 */
.scene-moon {
  position: absolute;
  left: 50%;
  bottom: calc(-250 * var(--u));
  width: calc(480 * var(--u));
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.scene-moon::before {
  content: "";
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(150, 215, 255, 0.36)) 0%, transparent 62%);
  animation: moon-glow 7s ease-in-out infinite alternate;
}

.scene[data-planet="past"] .scene-moon { --glow: rgba(255, 196, 120, 0.34); }
.scene[data-planet="present"] .scene-moon { --glow: rgba(226, 170, 230, 0.32); }

.scene-moon img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: circle(49.4%);
}

.scene.is-active .scene-moon img {
  animation: moon-spin 260s linear infinite;
}

@keyframes moon-spin {
  to { transform: rotate(360deg); }
}

@keyframes moon-glow {
  from { opacity: 0.7; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1.03); }
}

/* 달 테두리에 은은하게 번지는 빛 */
.scene-moon::after {
  content: "";
  position: absolute;
  inset: 0.8%;
  border-radius: 50%;
  box-shadow: 0 0 calc(34 * var(--u)) calc(8 * var(--u)) var(--halo, rgba(200, 232, 255, 0.34)), 0 0 calc(90 * var(--u)) calc(20 * var(--u)) var(--halo-far, rgba(150, 205, 255, 0.16));
  animation: moon-halo 5s ease-in-out infinite alternate;
  pointer-events: none;
}

.scene[data-planet="past"] .scene-moon { --halo: rgba(255, 214, 150, 0.34); --halo-far: rgba(255, 180, 90, 0.16); }
.scene[data-planet="present"] .scene-moon { --halo: rgba(240, 200, 245, 0.32); --halo-far: rgba(210, 150, 230, 0.15); }

@keyframes moon-halo {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.stage.is-offscreen .scene-sky,
.stage.is-offscreen .scene-moon::before,
.stage.is-offscreen .scene-moon::after,
.stage.is-offscreen .scene-moon img {
  animation-play-state: paused;
}

/* 글자가 잘 읽히도록 위아래를 살짝 어둡게 */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 16, 31, 0.55) 0%, rgba(4, 16, 31, 0.15) 38%, rgba(4, 16, 31, 0) 58%, rgba(8, 14, 48, 0) 86%, var(--n-deep) 100%);
  pointer-events: none;
}

.stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ui {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Nav */
.navbar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 60;
  width: 100%;
  max-width: var(--page-width);
  height: calc(76 * var(--u));
  transform: translateX(-50%);
  transition: background 0.3s ease;
}

.navbar::after {
  content: "";
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(74 * var(--u));
  height: calc(2 * var(--u));
  background: var(--rule);
  transition: opacity 0.3s ease;
}

.navbar.is-solid {
  background: rgba(4, 16, 31, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.navbar.is-solid::after {
  left: 0;
  right: 0;
  height: 1px;
  background: var(--stroke);
}

.navrow {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: 0;
  height: calc(74 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  position: relative;
  top: calc(-1 * var(--u));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(14.5 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.logo i {
  font-style: normal;
  font-weight: 500;
  color: var(--n-gold);
}

.burger {
  position: relative;
  flex: none;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  background: none;
  border: 0;
}

.burger span {
  display: block;
  width: calc(24 * var(--u));
  height: calc(2 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #ffffff;
  transition: transform 0.28s var(--e-slow), opacity 0.18s linear;
}

.navrow[data-open="true"] .burger span:nth-child(1) { transform: translateY(calc(8 * var(--u))) rotate(45deg); }
.navrow[data-open="true"] .burger span:nth-child(2) { opacity: 0; }
.navrow[data-open="true"] .burger span:nth-child(3) { transform: translateY(calc(-8 * var(--u))) rotate(-45deg); }

.links {
  position: absolute;
  top: calc(84 * var(--u));
  right: 0;
  z-index: 5;
  width: min(calc(324 * var(--u)), calc(var(--vw) - 48 * var(--u)));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(9, 21, 42, 0.84);
  -webkit-backdrop-filter: blur(calc(18 * var(--u)));
  backdrop-filter: blur(calc(18 * var(--u)));
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(2, 8, 20, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-10 * var(--u)));
  transition: opacity 0.24s ease, transform 0.28s var(--e-slow), visibility 0.28s;
}

.navrow[data-open="true"] .links {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.links a + a {
  border-top: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
}

.links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: calc(16 * var(--u));
  bottom: calc(8 * var(--u));
  width: calc(26 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(1 * var(--u));
  background: var(--cyan);
}

.links a.enroll {
  justify-content: center;
  height: calc(46 * var(--u));
  margin: calc(14 * var(--u)) 0 calc(2 * var(--u));
  padding: calc(2 * var(--u)) 0 0;
  border-top: 0;
  border-radius: calc(23 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 700;
  color: var(--btn-ink);
  background: linear-gradient(180deg, #ffffff 0%, #d8ecfe 9%, #dceefe 72%, #f4f9ff 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(255, 255, 255, 0.22), inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.92);
}

/* Copy */
.copy {
  position: absolute;
  top: calc(76 * var(--u));
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(56 * var(--u)) calc(26 * var(--u)) 0;
  transform: translateY(var(--vshift));
  pointer-events: none;
}

.copy a {
  pointer-events: auto;
}

.col {
  position: static;
  width: 100%;
  text-align: center;
}

.ent-mask,
.ent-line {
  display: block;
}

.eyebrow {
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: calc(0.5 * var(--u));
  text-indent: calc(0.5 * var(--u));
  color: #ffffff;
}

h1.title {
  margin: calc(15 * var(--u)) 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(104 * var(--u));
  line-height: 1;
  letter-spacing: calc(2 * var(--u));
  text-indent: calc(2 * var(--u));
  color: #ffffff;
}

.rule {
  margin-top: calc(22 * var(--u));
  height: calc(5 * var(--u));
  font-size: 0;
  line-height: 0;
}

.rule span {
  display: inline-block;
  vertical-align: top;
  width: calc(84 * var(--u));
  height: 100%;
  border-radius: calc(2.5 * var(--u));
  background: var(--cyan);
}

p.lede {
  max-width: calc(350 * var(--u));
  margin: calc(19 * var(--u)) auto 0;
  font-size: calc(13.5 * var(--u));
  font-weight: 400;
  line-height: calc(24 * var(--u));
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: balance;
}

.cta {
  position: relative;
  height: calc(60 * var(--u));
  margin-top: calc(32 * var(--u));
  isolation: isolate;
}

.cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(190 * var(--u));
  height: calc(60 * var(--u));
  padding-top: calc(1 * var(--u));
  border-radius: calc(30 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--btn-ink);
  text-decoration: none;
  background: var(--pill);
  box-shadow:
    0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.5),
    0 0 calc(26 * var(--u)) rgba(255, 255, 255, 0.18),
    inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.9);
}

.cta a:active {
  transform: scale(0.98);
}

/* 양옆 달 슬롯 (화면 가장자리에 걸려 잘린다) */
.planet {
  position: absolute;
  z-index: -1;
  width: calc(89 * var(--u));
  padding: 0;
  line-height: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(190, 225, 255, 0.28));
  transition: transform 0.45s var(--e-quint);
}

.planet img {
  display: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  clip-path: circle(49.4%);
}

.planet img.is-shown {
  display: block;
}

.planet:hover {
  transform: scale(1.045);
}

.planet:active {
  transform: scale(0.99);
}

.planet-l {
  left: calc(-44.5 * var(--u));
  top: calc(-14.5 * var(--u));
}

.planet-r {
  right: calc(-44.5 * var(--u));
  top: calc(-14.5 * var(--u));
}

.label {
  position: absolute;
  top: calc(100% + 34 * var(--u));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(15 * var(--u));
  line-height: 1;
  letter-spacing: calc(4 * var(--u));
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.label.label-l {
  left: calc(6 * var(--u));
}

.label.label-r {
  right: calc(6 * var(--u));
  margin-right: calc(-4 * var(--u));
}

/* 한자 아래 작은 한글 읽기 */
h1.title ruby,
.label ruby {
  ruby-position: under;
  -webkit-ruby-position: after;
  ruby-align: center;
}

h1.title ruby {
  margin: 0 0.02em;
}

h1.title rt {
  padding-top: calc(6 * var(--u));
  font-family: var(--font-body);
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-indent: 0;
  color: rgba(255, 255, 255, 0.75);
}

.label rt {
  padding-top: calc(4 * var(--u));
  font-family: var(--font-body);
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
}

.scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(49 * var(--u));
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
  margin-left: calc(-37 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(24, 30, 42, 0.7);
  -webkit-backdrop-filter: blur(calc(6 * var(--u)));
  backdrop-filter: blur(calc(6 * var(--u)));
}

.scroll svg {
  display: block;
  width: calc(15.5 * var(--u));
  height: calc(19.5 * var(--u));
}

.scroll:focus-visible,
.links a:focus-visible,
.cta a:focus-visible,
.logo:focus-visible {
  outline: calc(2 * var(--u)) solid var(--cyan);
  outline-offset: calc(3 * var(--u));
}

.planet:focus-visible {
  outline: calc(2 * var(--u)) solid var(--cyan);
  outline-offset: calc(6 * var(--u));
}

@media (max-height: 660px) {
  .scroll { display: none; }
}

@media (max-height: 620px) {
  .copy { padding-top: calc(26 * var(--u)); }
  h1.title { font-size: calc(76 * var(--u)); margin-top: calc(8 * var(--u)); }
  .rule { margin-top: calc(12 * var(--u)); }
  p.lede { margin-top: calc(12 * var(--u)); }
  .cta { margin-top: calc(20 * var(--u)); }
}

/* 달을 바꿀 때: 제목이 마스크 안에서 떠오른다 */
.stage.is-swapping h1.title .ent-line {
  animation: swap-reveal 0.7s var(--e-expo) both;
}

.stage.is-swapping .eyebrow .ent-line {
  animation: swap-reveal 0.6s var(--e-expo) both;
}

.stage.is-swapping p.lede {
  animation: ent-rise 0.5s var(--e-quint) 0.05s both;
}

@keyframes swap-reveal { from { transform: translateY(105%); } to { transform: none; } }

/* 첫 등장 애니메이션 (재생 후 .anim/.play 클래스가 사라진다) */
@keyframes ent-reveal { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes ent-rise { from { opacity: 0; transform: translateY(var(--rise, 10px)); } to { opacity: 1; transform: none; } }
@keyframes ent-settle { from { opacity: 0; transform: translateY(var(--rise, 8px)) scale(0.965); } to { opacity: 1; transform: none; } }
@keyframes ent-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ent-fade { from { opacity: 0; } to { opacity: 1; } }

h1.title .ent-mask,
.eyebrow .ent-mask {
  overflow: hidden;
  padding-top: 0.18em;
  margin-top: -0.18em;
}

.anim .ent-line {
  transform: translateY(115%);
  will-change: transform;
}

.anim .navbar::after,
.anim .rule span {
  transform: scaleX(0);
}

.anim .logo,
.anim .burger,
.anim p.lede,
.anim .label,
.anim .cta a,
.anim .scroll,
.anim .sky {
  opacity: 0;
}

.anim .sky {
  will-change: opacity;
}

.anim.play .sky { animation: ent-fade 1.6s var(--e-slow) 0.25s both; }
.anim.play .navbar::after { animation: ent-draw 0.9s var(--e-expo) 0.12s both; }
.anim.play .logo { --rise: calc(8 * var(--u)); animation: ent-rise 0.6s var(--e-quint) 0.2s both; }
.anim.play .burger { --rise: calc(8 * var(--u)); animation: ent-settle 0.6s var(--e-quint) 0.46s both; }
.anim.play .eyebrow .ent-line { animation: ent-reveal 0.75s var(--e-expo) 0.3s both; }
.anim.play h1.title .ent-line { animation: ent-reveal 0.95s var(--e-expo) 0.44s both; }
.anim.play .rule span { animation: ent-draw 0.65s var(--e-expo) 0.78s both; }
.anim.play p.lede { --rise: calc(12 * var(--u)); animation: ent-rise 0.7s var(--e-quint) 0.86s both; }
.anim.play .label.label-l { --rise: calc(8 * var(--u)); animation: ent-rise 0.6s var(--e-quint) 1.04s both; }
.anim.play .label.label-r { --rise: calc(8 * var(--u)); animation: ent-rise 0.6s var(--e-quint) 1.1s both; }
.anim.play .cta a { --rise: calc(8 * var(--u)); animation: ent-settle 0.7s var(--e-quint) 1.14s both; }
.anim.play .scroll { animation: ent-settle 0.6s var(--e-quint) 1.42s both; }

@media (prefers-reduced-motion: reduce) {
  .scene-sky,
  .scene-moon::before,
  .scene.is-active .scene-moon img { animation: none; }
  .planet { transition: none; }
  .planet:hover,
  .planet:active { transform: none; }
  .links,
  .burger span { transition: none; }
}

/* ═══ Content (공통) ════════════════════════════════════════════════ */
.content {
  padding: 28px 20px 12px;
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--e-quint), transform 0.8s var(--e-quint);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* 공통 카드 (프로그램·지도·어드민 페이지) */
.program-card,
.legend-item,
.admin-panel .menu-group,
.admin-login {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}

/* 메인 미션 카드 — 기본(프로그램 페이지) */
.mission-card {
  position: relative;
  display: block;
  margin-bottom: 44px;
  padding: 22px 18px 18px;
  overflow: hidden;
  color: var(--gold);
  border-radius: 22px;
  border: 1px solid rgba(242, 217, 160, 0.22);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(242, 217, 160, 0.16), transparent 60%),
    linear-gradient(160deg, #0f2747 0%, #081629 100%);
}

.mission-kicker {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--btn-ink);
  background: var(--gold);
  border-radius: 999px;
}

.mission-title {
  margin: 10px 0 6px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  color: #ffffff;
}

.mission-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}

.mission-phases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 20px 0 16px;
  padding: 0;
  list-style: none;
}

.mission-phases li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.mission-moon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
  opacity: 0.95;
}

.mission-moon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.mission-phases b {
  font-size: 13px;
  font-weight: 700;
}

.mission-phases li > span:last-child {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-2);
}

.mission-rewards {
  margin: 0;
  padding: 2px 14px;
  list-style: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
}

.mission-rewards li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.mission-rewards li:last-child {
  border-bottom: 0;
}

.mission-rewards b {
  flex: none;
  min-width: 40px;
  padding: 3px 0;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  color: var(--btn-ink);
  background: var(--gold);
  border-radius: 999px;
}

.mission-rewards span {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.mission-soldout {
  display: none;
  padding: 2px 8px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  color: #ffffff;
  background: #e2603f;
  border-radius: 999px;
}

.mission-rewards li.is-soldout span {
  text-decoration: line-through;
  opacity: 0.5;
}

.mission-rewards li.is-soldout .mission-soldout {
  display: inline-block;
}

.mission-note {
  margin: 10px 2px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.mission-more {
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 700;
  color: var(--btn-ink);
  background: var(--pill);
  border: 0;
  border-radius: 24px;
}

/* 눈송산책 공지 배너 — 기본(지도 페이지) */
.nunsong-banner {
  width: 100%;
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 12px 14px;
  text-align: left;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(121, 220, 232, 0.18), rgba(121, 220, 232, 0.06));
  border: 1px solid rgba(121, 220, 232, 0.4);
  border-radius: 16px;
}

.nunsong-banner-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-ink);
  background: var(--cyan);
  border-radius: 50%;
  animation: ping 2.4s ease-out infinite;
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(121, 220, 232, 0.55); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(121, 220, 232, 0); }
}

.nunsong-banner-icon svg {
  width: 18px;
  height: 18px;
}

.nunsong-banner-text {
  font-size: 14px;
  line-height: 1.5;
}

.nunsong-banner-text b {
  margin-right: 3px;
  color: var(--cyan);
}

/* ═══ 메인 홈 (히어로 아래) — 팔레트: #192773 #344373 #D9CA7E #F2CB05 #F29F05 ═══ */
.home-page .page {
  background-color: var(--n-deep);
  background-image:
    linear-gradient(180deg, rgba(8, 14, 48, 0.94) 0%, rgba(17, 28, 88, 0.86) 55%, rgba(25, 39, 115, 0.9) 100%),
    url("../assets/images/home/sky-cheong.jpg");
  background-size: 100% 100%, 100% auto;
  background-repeat: no-repeat, repeat-y;
}

.home {
  padding: 30px 20px 8px;
}

.home-section {
  margin-bottom: 48px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #ffffff;
}

/* 제목 앞 초승달 */
.section-title::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: inset 4px -2px 0 0 var(--n-yellow);
  transform: rotate(-20deg);
}

.section-note {
  font-size: 12.5px;
  color: rgba(217, 202, 126, 0.85);
  white-space: nowrap;
}

/* 캠퍼스 지도 카드 */
.campus-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.campus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 138px;
  padding: 14px 14px 14px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background: var(--n-navy);
  border: 1px solid rgba(217, 202, 126, 0.22);
  border-radius: 18px;
  transition: transform 0.2s var(--e-quint);
}

.campus-card.is-two {
  background: var(--n-slate);
}

.campus-card:active {
  transform: scale(0.97);
}

.campus-card-moon {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, #fff5c2 0%, var(--n-yellow) 48%, #c99a00 100%);
  box-shadow: 0 0 36px rgba(242, 203, 5, 0.35);
}

.campus-card.is-two .campus-card-moon {
  background: radial-gradient(circle at 34% 34%, #ffe1a6 0%, var(--n-orange) 50%, #b86a00 100%);
  box-shadow: 0 0 36px rgba(242, 159, 5, 0.35);
}

.campus-card-num {
  position: relative;
  font-family: "Noto Serif KR", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--n-gold);
}

.campus-card-title {
  position: relative;
  margin-top: auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.campus-card-desc {
  position: relative;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* 나머지 바로가기 */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 13px 4px 11px;
  text-decoration: none;
  background: rgba(52, 67, 115, 0.55);
  border: 1px solid rgba(217, 202, 126, 0.16);
  border-radius: 14px;
  transition: transform 0.2s var(--e-quint), background 0.2s ease;
}

.quick-item:active {
  transform: scale(0.95);
  background: rgba(52, 67, 115, 0.85);
}

.quick-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--n-gold);
}

.quick-icon svg,
.quick-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.quick-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #ffffff;
}

/* 메인 미션 — 밤하늘 도장판 */
.home-page .mission-card {
  margin-bottom: 48px;
  color: var(--n-gold);
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(242, 203, 5, 0.18), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgba(242, 159, 5, 0.12), transparent 60%),
    linear-gradient(165deg, var(--n-slate) 0%, var(--n-navy) 100%);
  border: 1px solid rgba(217, 202, 126, 0.3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.home-page .mission-kicker {
  color: var(--n-navy);
  background: var(--n-yellow);
}

.home-page .mission-title {
  font-size: 27px;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.home-page .mission-sub,
.home-page .mission-phases li > span:last-child,
.home-page .mission-note {
  color: rgba(255, 255, 255, 0.68);
}

.home-page .mission-phases b {
  color: var(--n-gold);
}

.home-page .mission-moon {
  color: var(--n-yellow);
  border-color: rgba(217, 202, 126, 0.45);
  background: rgba(8, 14, 48, 0.3);
}

.home-page .mission-rewards {
  background: rgba(8, 14, 48, 0.32);
  border: 1px solid rgba(217, 202, 126, 0.14);
}

.home-page .mission-rewards li {
  border-bottom-color: rgba(217, 202, 126, 0.16);
}

.home-page .mission-rewards b {
  color: var(--n-navy);
  background: var(--n-gold);
}

.home-page .mission-rewards span {
  color: #ffffff;
}

.home-page .mission-soldout {
  color: var(--n-navy);
  background: var(--n-orange);
}

.home-page .mission-more {
  color: var(--n-navy);
  background: var(--n-yellow);
  box-shadow: none;
}

/* 전체 타임라인 */
.tl-days {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  background: rgba(8, 14, 48, 0.45);
  border: 1px solid rgba(217, 202, 126, 0.14);
  border-radius: 999px;
}

.tl-day {
  flex: 1;
  padding: 9px 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  background: none;
  border: 0;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.tl-day small {
  margin-left: 3px;
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.8;
}

.tl-day.active {
  color: var(--n-navy);
  background: var(--n-gold);
}

.tl-board {
  margin: 0 -10px;
  padding: 12px 8px 10px 4px;
  background: rgba(8, 14, 48, 0.45);
  border: 1px solid rgba(217, 202, 126, 0.14);
  border-radius: 18px;
}

.tl-head,
.tl-body {
  display: grid;
  /* 시간 | 메인·사이드·부스(좁게, 세로쓰기) | 무대1·무대2(넓게) | 푸드트럭·놀이기구(좁게) */
  grid-template-columns: 32px repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, 2fr)) repeat(2, minmax(0, 1fr));
  column-gap: 3px;
}

.tl-head {
  margin-bottom: 10px;
}

.tl-col-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--n-navy);
  background: var(--n-gold);
  border-radius: 14px;
  word-break: keep-all;
}

.tl-col-name.is-wide {
  grid-column: span 2;
}

.tl-col-name small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.8;
}

.tl-body {
  position: relative;
}

.tl-hour {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid rgba(217, 202, 126, 0.13);
  pointer-events: none;
}

.tl-hour em {
  position: absolute;
  left: 0;
  top: -7px;
  width: 32px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  color: rgba(217, 202, 126, 0.75);
}

.tl-lane {
  position: relative;
  grid-row: 1;
}

.tl-block {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  overflow: hidden;
  text-align: center;
  border: 0;
  border-radius: 8px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tl-block:active {
  transform: scale(0.96);
  filter: brightness(1.12);
}

.tl-block b {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tl-block small {
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.85;
}

.tl-block i {
  font-size: 8.5px;
  font-style: normal;
  line-height: 1.2;
  opacity: 0.72;
}

.tl-block.is-short b,
.tl-block.is-tiny b {
  font-size: 10px;
}

.tl-block.is-tiny {
  padding: 0 2px;
}

/* 좁은 열: 이름은 위에서 아래로 세로쓰기, 시간은 두 줄로 쌓기 */
.tl-block.is-vertical {
  gap: 5px;
  padding: 6px 1px;
}

.tl-block.is-vertical b {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  line-height: 1.08;
}

.tl-block.is-vertical b .tl-gap {
  height: 4px;
}

.tl-block.is-vertical small {
  word-break: keep-all;
}

.tl-block.is-vertical i {
  font-size: 8.5px;
  letter-spacing: -0.03em;
}

.tl-block.is-program {
  color: var(--n-gold);
  background: var(--n-navy);
  box-shadow: inset 0 0 0 1px rgba(217, 202, 126, 0.3);
}

.tl-block.is-booth {
  color: #ffffff;
  background: var(--n-slate);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tl-block.is-stage {
  color: var(--n-navy);
  background: var(--n-gold);
}

.tl-block.is-special {
  color: var(--n-navy);
  background: var(--n-yellow);
}

.tl-block.is-artist {
  color: var(--n-navy);
  background: var(--n-orange);
}

.tl-block.is-fnb {
  color: var(--n-gold);
  background: rgba(52, 67, 115, 0.35);
  box-shadow: inset 0 0 0 1px rgba(217, 202, 126, 0.35);
}

.tl-block.is-artist small {
  font-size: 8.5px;
  word-break: keep-all;
}

.tl-now {
  position: absolute;
  left: 30px;
  right: 0;
  z-index: 3;
  height: 0;
  border-top: 2px solid #ff7a59;
  pointer-events: none;
}

.tl-now::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a59;
}

.tl-now span {
  position: absolute;
  right: 0;
  top: -18px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
  background: #ff7a59;
  border-radius: 999px;
}

.tl-foot {
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(217, 202, 126, 0.75);
}
/* 프로그램 링크 */
.program-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.program-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 178px;
  padding: 18px 15px 15px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background: var(--n-navy);
  border: 1px solid rgba(217, 202, 126, 0.2);
  border-radius: 20px;
  transition: transform 0.2s var(--e-quint);
}

.program-link.is-side {
  background: var(--n-slate);
}

.program-link:active {
  transform: scale(0.97);
}

.program-link-moon {
  position: absolute;
  right: -22px;
  bottom: 38px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: inset 14px -6px 0 0 var(--n-yellow);
  transform: rotate(-18deg);
  opacity: 0.9;
}

.program-link.is-side .program-link-moon {
  box-shadow: inset 14px -6px 0 0 var(--n-orange);
}

.program-link-kicker {
  position: relative;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.program-link-names {
  position: relative;
  flex: 1;
  padding-right: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.program-link-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--n-yellow);
  border-top: 1px solid rgba(217, 202, 126, 0.25);
}

.program-link.is-side .program-link-foot {
  color: var(--n-orange);
}

.program-link-foot i {
  font-style: normal;
}

/* 공연 — 티켓 */
.stage-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.stage-card {
  --stub: 96px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  text-align: left;
  color: var(--n-navy);
  background: var(--n-gold);
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  -webkit-mask:
    radial-gradient(circle 9px at 0 calc(100% - var(--stub)), transparent 96%, #000 100%),
    radial-gradient(circle 9px at 100% calc(100% - var(--stub)), transparent 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at 0 calc(100% - var(--stub)), transparent 96%, #000 100%),
    radial-gradient(circle 9px at 100% calc(100% - var(--stub)), transparent 96%, #000 100%);
  mask-composite: intersect;
  transition: transform 0.2s var(--e-quint);
}

.stage-card:active {
  transform: scale(0.97);
}

.stage-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 15px 14px 8px;
}

.stage-card-day {
  font-family: "Noto Serif KR", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.stage-card-date {
  font-size: 12px;
  font-weight: 600;
  color: rgba(25, 39, 115, 0.7);
}

.stage-card-row {
  padding: 1px 14px;
  font-size: 13px;
  line-height: 1.55;
}

.stage-card-row b {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--n-gold);
  background: var(--n-navy);
  border-radius: 4px;
}

.stage-card-pick {
  align-self: flex-start;
  margin: 8px 14px 14px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--n-navy);
  background: var(--n-orange);
  border-radius: 999px;
}

.stage-card-artist {
  box-sizing: border-box;
  height: var(--stub);
  margin-top: auto;
  padding: 11px 14px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.02em;
  color: var(--n-navy);
  background: rgba(25, 39, 115, 0.1);
  border-top: 2px dashed rgba(25, 39, 115, 0.35);
}

.stage-card-artist small {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(25, 39, 115, 0.7);
}

.text-rows {
  display: grid;
  gap: 8px;
}

.text-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(52, 67, 115, 0.55);
  border: 1px solid rgba(217, 202, 126, 0.16);
  border-radius: 14px;
}

.text-row b {
  margin-right: 6px;
  font-weight: 700;
  color: #ffffff;
}

.text-row-arrow {
  flex: none;
  color: var(--n-yellow);
}

/* 눈송이 출몰 배너 (메인) */
.home-page .nunsong-banner {
  color: var(--n-navy);
  background: var(--n-yellow);
  border: 0;
}

.home-page .nunsong-banner-icon {
  color: var(--n-yellow);
  background: var(--n-navy);
  animation: none;
}

.home-page .nunsong-banner-text b {
  color: var(--n-navy);
}

/* Footer */
.footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 36px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  background: rgba(52, 67, 115, 0.55);
  border: 1px solid rgba(217, 202, 126, 0.16);
  border-radius: 14px;
}

.icon-chip {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--n-gold);
}

.icon-chip svg {
  width: 19px;
  height: 19px;
}

.contact-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}

.contact-text small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--n-gold);
}

.footer-mark {
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  color: rgba(217, 202, 126, 0.7);
}

/* ═══ Sub-page header & side menu ═══════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 16, 31, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.header-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
}

.hamburger,
.header-back {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #ffffff;
  text-decoration: none;
  background: none;
  border: none;
  transform: translateY(-50%);
}

.hamburger {
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
}

.header-back {
  font-size: 22px;
  line-height: 1;
}

.menu-root {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 300;
  width: 100%;
  max-width: var(--page-width);
  transform: translateX(-50%);
  pointer-events: none;
}

.menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 20, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.menu-root.open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

.side-menu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 84%;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0a1d36 0%, #061426 100%);
  border-right: 1px solid var(--stroke);
  transform: translateX(-102%);
  transition: transform 0.35s var(--e-quint);
  pointer-events: none;
}

.menu-root.open .side-menu {
  transform: translateX(0);
  pointer-events: auto;
}

.side-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--stroke);
}

.side-menu-title {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.1;
  color: #ffffff;
}

.side-menu-title small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--cyan);
}

.side-menu-close {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 50%;
}

.side-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 18px 16px;
}

.accordion {
  border-bottom: 1px solid var(--stroke);
}

.accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: none;
  border: none;
}

.accordion-arrow {
  font-size: 12px;
  color: var(--cyan);
  transition: transform 0.25s ease;
}

.accordion.open .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.open .accordion-panel {
  max-height: 360px;
}

.menu-program-item {
  display: block;
  width: 100%;
  padding: 10px 6px 10px 14px;
  font-size: 14.5px;
  text-align: left;
  color: var(--text-2);
  background: none;
  border: none;
  border-left: 1px solid var(--stroke-2);
}

.menu-program-item:last-child {
  margin-bottom: 12px;
}

.menu-program-link {
  display: block;
  margin: 0 0 8px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--btn-ink);
  text-decoration: none;
  background: var(--pill);
  border-radius: 999px;
  text-align: center;
}

.side-menu-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 18px 22px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--btn-ink);
  text-decoration: none;
  background: var(--pill);
  border-radius: 999px;
}

.side-menu-footer svg {
  width: 18px;
  height: 18px;
}

.side-menu-footer svg path {
  fill: var(--btn-ink);
}

/* ═══ Modal ═════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 400;
  width: 100%;
  max-width: var(--page-width);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  background: rgba(2, 8, 20, 0.66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 350px;
  max-height: 84vh;
  overflow-y: auto;
  padding: 24px 20px 20px;
  color: var(--text);
  background: linear-gradient(180deg, #0f2442 0%, #0a1a31 100%);
  border: 1px solid var(--stroke-2);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.4s var(--e-quint);
}

.modal-backdrop.show .modal-box {
  transform: none;
}

.modal-box.modal-box-wide {
  max-width: 440px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 50%;
}

.modal-title {
  margin: 0 0 14px;
  padding-right: 44px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.35;
  color: #ffffff;
}

.modal-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-2);
}

.modal-desc strong {
  margin-right: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}

.ingredient-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

/* 필터·칩·표 (학생부스·무대 팝업 공용) */
.booth-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.booth-filter-btn {
  flex: 1;
  padding: 9px 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.booth-filter-btn.active {
  color: var(--btn-ink);
  background: var(--pill);
}

.booth-modal-subtitle {
  margin: -4px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
}

.booth-list {
  max-height: 320px;
  overflow: auto;
}

.modal-box-wide .booth-list {
  max-height: 60vh;
}

.booth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.55;
}

.booth-table th {
  position: sticky;
  top: 0;
  padding: 9px 7px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: var(--cyan);
  background: #0e2240;
  border-bottom: 1px solid var(--stroke-2);
}

.booth-table td {
  padding: 10px 7px;
  vertical-align: top;
  color: var(--text-2);
  border-bottom: 1px solid var(--stroke);
}

.booth-table td:first-child {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
}

.booth-table td:nth-child(2) {
  font-weight: 600;
  color: #ffffff;
}

.booth-table a {
  color: var(--cyan);
}

.booth-empty {
  margin: 0;
  padding: 22px 0;
  font-size: 14px;
  text-align: center;
  color: var(--text-3);
}

#boothControls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

#boothControls .booth-filter-row {
  margin-bottom: 0;
}

.field-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke-2);
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.field-input:focus {
  border-color: var(--cyan);
}

.field-input::placeholder {
  color: var(--text-3);
}

.booth-chip-row {
  display: flex;
  gap: 6px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.booth-chip-row::-webkit-scrollbar {
  display: none;
}

.booth-chip {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--stroke-2);
  border-radius: 999px;
}

.booth-chip.active {
  color: var(--btn-ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

.booth-poster-link {
  display: block;
  margin: -2px 0 14px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--gold);
  text-decoration: none;
  background: rgba(242, 217, 160, 0.08);
  border: 1px solid rgba(242, 217, 160, 0.3);
  border-radius: 999px;
}

.booth-section-title {
  margin: 18px 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan);
}

.booth-section-title:first-child {
  margin-top: 0;
}

.booth-card {
  margin-bottom: 8px;
  padding: 13px 13px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  border-radius: 14px;
}

.booth-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.booth-slot {
  flex: none;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--btn-ink);
  background: var(--cyan);
  border-radius: 6px;
}

.booth-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}

.booth-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 6px;
}

.booth-category,
.booth-tag {
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  border-radius: 999px;
}

.booth-category {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.booth-tag {
  color: var(--gold);
  background: rgba(242, 217, 160, 0.1);
}

.booth-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.booth-lines li {
  position: relative;
  margin-bottom: 3px;
  padding-left: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.booth-lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-3);
}

.booth-lines li.booth-line-food::before {
  background: var(--gold);
}

.booth-lines b {
  font-weight: 600;
  color: #ffffff;
}

.booth-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
}

/* 포스터 · 굿즈 */
.poster-inline-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--btn-ink);
  background: var(--pill);
  border: 0;
  border-radius: 999px;
}

.poster-modal-img {
  display: block;
  width: 100%;
  border-radius: 12px;
}

.goods-buy-info {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: rgba(121, 220, 232, 0.07);
  border: 1px solid rgba(121, 220, 232, 0.22);
  border-radius: 14px;
}

.goods-buy-info p {
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

.goods-buy-info p:last-child {
  margin-bottom: 0;
}

.goods-buy-info strong {
  margin-right: 4px;
  font-weight: 600;
  color: var(--cyan);
}

.goods-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.goods-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  border-radius: 14px;
}

.goods-image {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.goods-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 굿즈 사진: 누르면 아래로 크게 펼쳐진다 */
.goods-item.has-photos {
  position: relative;
  flex-wrap: wrap;
  cursor: pointer;
}

.goods-image {
  position: relative;
}

.goods-image.is-contain {
  display: flex;
  align-items: center;
  background: #192773;
}

.goods-image.is-contain img {
  height: auto;
  object-fit: contain;
}

.goods-image-count {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  color: #ffffff;
  background: rgba(3, 5, 15, 0.7);
  border-radius: 8px;
}

.goods-toggle {
  flex: none;
  align-self: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--n-gold);
  white-space: nowrap;
}

.goods-toggle::after {
  content: " ▾";
}

.goods-item.is-expanded .goods-toggle::after {
  content: " ▴";
}

.goods-photos {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: auto;
}

.goods-photos img {
  flex: none;
  width: 100%;
  height: auto;
  border-radius: 10px;
  scroll-snap-align: center;
}

/* 사진이 여러 장이면 옆 사진이 살짝 보이게 해서 넘겨볼 수 있다는 걸 알려준다 */
.goods-photos.is-multi img {
  width: 88%;
}

.goods-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--stroke-2);
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.goods-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.goods-price {
  font-size: 13px;
  color: var(--text-2);
}

.goods-spec {
  font-size: 12px;
  color: var(--text-3);
}

.goods-notice {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}

.goods-notice p {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

.goods-lowstock-badge {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--btn-ink);
  background: var(--alert);
  border-radius: 999px;
}

.goods-hours-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

/* 눈송산책 알림 팝업 */
.nunsong-modal {
  text-align: center;
}

.nunsong-modal .modal-title {
  padding: 0;
}

.nunsong-modal-icon {
  width: 58px;
  height: 58px;
  margin: 4px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-ink);
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(121, 220, 232, 0.4);
}

.nunsong-modal-icon svg {
  width: 28px;
  height: 28px;
}

.nunsong-modal-message {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #ffffff;
  white-space: pre-line;
}

.nunsong-modal-time {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

.nunsong-inline-slot:empty {
  display: none;
}

.nunsong-inline-notice {
  display: block;
  margin-bottom: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #ffffff;
  background: rgba(121, 220, 232, 0.12);
  border: 1px solid rgba(121, 220, 232, 0.35);
  border-radius: 12px;
}

.nunsong-inline-notice b {
  margin-right: 4px;
  color: var(--cyan);
}

/* ═══ Programs page ═════════════════════════════════════════════════ */
.segment {
  position: sticky;
  top: 60px;
  z-index: 40;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 10px 20px 12px;
  background: rgba(4, 16, 31, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.segment-btn {
  flex: 1;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.segment-btn.active {
  color: var(--btn-ink);
  background: var(--pill);
}

.program-page {
  padding-top: 22px;
}

.program-page .mission-card {
  margin-bottom: 18px;
}

.program-card {
  margin-bottom: 14px;
  padding: 18px 16px 16px;
  scroll-margin-top: 140px;
}

.program-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.program-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
  color: #ffffff;
}

.program-name small {
  margin-left: 4px;
  font-size: 13px;
  color: var(--cyan);
}

.program-sub {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.program-badge {
  flex: none;
  margin-top: 3px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold);
  background: rgba(242, 217, 160, 0.1);
  border-radius: 999px;
}

.program-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0 0 14px;
  padding: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  border-top: 1px solid var(--stroke);
}

.program-meta dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}

.program-meta dd {
  margin: 0;
  color: var(--text);
}

.program-day {
  display: inline-block;
  margin-right: 5px;
  padding: 0 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--btn-ink);
  background: var(--gold);
  border-radius: 999px;
}

.program-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.program-times span {
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.program-actions {
  display: flex;
  gap: 8px;
}

.program-more {
  flex: 1;
  height: 42px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  background: none;
  border: 1px solid var(--stroke-2);
  border-radius: 999px;
}

.program-more:first-child {
  color: var(--btn-ink);
  background: var(--pill);
  border-color: transparent;
}

/* ═══ Map pages ═════════════════════════════════════════════════════ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
}

.campus-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.switch-btn {
  flex: 1;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 999px;
}

.switch-btn.active {
  color: var(--btn-ink);
  background: var(--pill);
}

.map-hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-3);
}

.map-frame {
  position: relative;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  border-radius: 20px;
}

.map-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1275.59 / 841.89;
  overflow: hidden;
  background: #fcfad8;
  border-radius: 14px;
  touch-action: none;
}

.map-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  touch-action: none;
}

.map-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

.map-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-marker {
  position: absolute;
  width: 15px;
  height: 19px;
  padding: 0;
  background: transparent url("../assets/icons/mapicon.png") center / contain no-repeat;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: auto;
  filter: drop-shadow(0 1px 2px rgba(4, 16, 31, 0.5));
}

.map-marker:active {
  transform: translate(-50%, calc(-100% - 10px)) scale(0.9);
}

.map-zone-label {
  position: absolute;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
  background: var(--bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.map-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: rgba(4, 16, 31, 0.8);
  border: 1px solid var(--stroke-2);
  border-radius: 50%;
}

.map-btn-reset {
  font-size: 15px;
}

.legend {
  margin-top: 30px;
}

.legend-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
  color: #ffffff;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.legend-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 6px 12px;
  color: var(--text);
  border-radius: 16px;
  transition: transform 0.2s var(--e-quint);
}

.legend-item:active {
  transform: scale(0.96);
}

.legend-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.legend-icon-svg svg {
  width: 26px;
  height: 26px;
}

.legend-label {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.group-divider {
  height: 1px;
  margin: 0 0 14px;
  background: var(--stroke);
}

.legend-divider {
  margin-top: 30px;
  margin-bottom: 28px;
}

.wait-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--btn-ink);
  background: var(--cyan);
  border-radius: 999px;
}

/* ═══ Poster gallery ════════════════════════════════════════════════ */
.gallery-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}

.gallery-zones {
  margin: 6px 0 22px;
}

.gallery-section {
  margin-bottom: 28px;
}

.gallery-section-title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  color: #ffffff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 10px;
  align-items: start;
}

.gallery-card {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: none;
}

.gallery-thumb {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-count,
.gallery-time {
  position: absolute;
  top: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
}

.gallery-count {
  right: 6px;
  color: #ffffff;
  background: rgba(4, 16, 31, 0.8);
}

.gallery-time {
  left: 6px;
  color: var(--btn-ink);
  background: var(--gold);
}

.gallery-card-caption {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.gallery-card-caption .booth-slot {
  padding: 1px 5px;
  font-size: 10.5px;
}

.gallery-card-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
}

.gallery-lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 500;
  width: 100%;
  max-width: var(--page-width);
  display: flex;
  flex-direction: column;
  background: rgba(2, 8, 20, 0.96);
  transform: translateX(-50%);
}

.gallery-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 12px 8px;
  touch-action: pan-y;
}

.gallery-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: none;
}

.gallery-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 50%;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
}

.gallery-prev {
  left: 8px;
}

.gallery-next {
  right: 8px;
}

.gallery-caption {
  padding: 10px 16px 26px;
  text-align: center;
}

.gallery-caption-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.gallery-caption-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

/* ═══ Admin ═════════════════════════════════════════════════════════ */
.btn-primary {
  height: 48px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--btn-ink);
  background: var(--pill);
  border: 0;
  border-radius: 24px;
}

.btn-primary:disabled {
  opacity: 0.5;
}

.admin-login {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 56px auto 0;
  padding: 24px 20px;
  text-align: center;
}

.admin-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.menu-group {
  margin-bottom: 18px;
}

.admin-panel .menu-group {
  padding: 18px 16px;
}

.group-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: #ffffff;
}

.admin-open-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-wait-row,
.admin-goods-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke);
}

.admin-wait-row:last-child,
.admin-goods-row:last-child {
  border-bottom: none;
}

.admin-wait-label,
.admin-goods-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.admin-wait-input {
  flex: none;
  width: 72px;
  padding: 9px;
  text-align: center;
}

.admin-save-btn,
.admin-close-btn,
.admin-goods-toggle {
  flex: none;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
}

.admin-save-btn {
  color: var(--btn-ink);
  background: var(--cyan);
}

.admin-close-btn {
  color: #ffffff;
  background: rgba(255, 143, 125, 0.22);
}

.admin-goods-toggle {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.admin-goods-toggle.active {
  color: var(--btn-ink);
  background: var(--alert);
}

.admin-btn-row {
  display: flex;
  gap: 8px;
}

.admin-btn-row > * {
  flex: 1;
}

.admin-btn-lg {
  height: 48px;
  font-size: 15px;
  border-radius: 24px;
}

.admin-row-status {
  min-width: 42px;
  font-size: 12px;
  color: var(--text-2);
}

.admin-status {
  min-height: 16px;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

.admin-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
}

.admin-empty {
  font-size: 14px;
  color: var(--text-3);
}

.admin-textarea {
  resize: vertical;
  line-height: 1.55;
}

.admin-notice-current {
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.admin-notice-current.is-live {
  color: #ffffff;
  background: rgba(121, 220, 232, 0.14);
  border: 1px solid rgba(121, 220, 232, 0.35);
}

.admin-notice-current.is-live b {
  color: var(--cyan);
}

/* 한글 명조 제목: Noto Serif KR 기본 자간이 넓어 살짝 좁힌다 */
.mission-title,
.program-link-kicker,
.modal-title,
.program-name,
.legend-title,
.gallery-section-title,
.group-title,
.header-title,
.side-menu-title {
  letter-spacing: -0.035em;
}
/* ═══ 추가: 안내 문구 · 포스터 · 재고/소진 표시 ═══════════════════════ */
.program-notice {
  margin: -4px 0 14px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gold);
  background: rgba(242, 217, 160, 0.08);
  border: 1px solid rgba(242, 217, 160, 0.28);
  border-radius: 12px;
}

.gallery-notice {
  margin: 0 0 16px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  background: rgba(242, 217, 160, 0.07);
  border: 1px solid rgba(242, 217, 160, 0.25);
  border-radius: 12px;
}

.gallery-notice b {
  font-weight: 600;
  color: var(--gold);
}

#galleryKinds .switch-btn {
  font-family: inherit;
  border: 0;
  background: none;
}

#galleryKinds .switch-btn.active {
  background: var(--pill);
}

.poster-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goods-item.is-soldout .goods-name,
.goods-item.is-soldout .goods-price {
  opacity: 0.5;
}

.goods-lowstock-badge.is-out {
  color: #ffffff;
  background: #c9493a;
}

.admin-seg {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.admin-seg-btn {
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: 999px;
}

.admin-seg-btn.active {
  color: var(--btn-ink);
  background: var(--cyan);
}

.admin-seg-btn.active.is-low {
  background: var(--gold);
}

.admin-seg-btn.active.is-out {
  color: #ffffff;
  background: #c9493a;
}

.admin-seg-btn:disabled {
  opacity: 0.5;
}

.admin-reward-count {
  margin-right: 4px;
  color: var(--cyan);
}

.admin-panel .admin-hint {
  margin: -6px 0 8px;
}
.quick-label small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(217, 202, 126, 0.85);
}

/* 메인 히어로(인터랙티브 영역) 폰트 통일: 고운바탕 — 한자는 고운바탕에 없어 Noto Serif KR로 이어진다 */
.stage,
.stage .logo,
.stage .eyebrow,
.stage h1.title,
.stage h1.title rt,
.stage p.lede,
.stage .cta a,
.stage .label,
.stage .label rt,
.stage .links a {
  font-family: "Gowun Batang", "Noto Serif KR", serif;
}

.stage .logo {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stage .eyebrow {
  font-weight: 700;
}
.stage .cta a,
.stage .links a.enroll {
  font-weight: 700;
  letter-spacing: 0;
}
/* 제목 아래 민트 선: 굵기 절반 */
.stage .rule {
  height: calc(2.5 * var(--u));
}

.stage .rule span {
  border-radius: calc(1.25 * var(--u));
}

/* 안내 팝업 속 배치도 */
.info-map {
  margin: 0 0 16px;
}

.info-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.info-map figcaption {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

.info-map figcaption b {
  font-weight: 600;
  color: var(--text-2);
}

/* 눈송 발자국: 달 도장 둘레의 점선 원 없애기 */
.mission-moon,
.home-page .mission-moon {
  border: 0;
  background: none;
}

/* ═══ 메인 홈 아주 어두운 밤 배경 ═══ */
.home-page {
  --night-top: #03050f;
  --night-bottom: #070b24;
}

.home-page .page {
  background-color: var(--night-top);
  background-image:
    linear-gradient(180deg, rgba(3, 5, 15, 0.9) 0%, rgba(4, 7, 22, 0.88) 50%, rgba(7, 11, 36, 0.92) 100%),
    url("../assets/images/home/sky-cheong.jpg");
  background-size: 100% 100%, 100% auto;
  background-repeat: no-repeat, repeat-y;
}

/* 히어로 아래쪽이 깊은 밤으로 이어지게 */
.home-page .sky::after {
  background: linear-gradient(180deg, rgba(4, 16, 31, 0.55) 0%, rgba(4, 16, 31, 0.15) 38%, rgba(4, 16, 31, 0) 58%, rgba(3, 5, 15, 0) 82%, var(--night-top) 100%);
}

.home-page .section-note {
  color: rgba(217, 202, 126, 0.7);
}

.home-page .campus-card,
.home-page .program-link {
  border-color: rgba(217, 202, 126, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.home-page .quick-item {
  background: rgba(25, 39, 115, 0.55);
  border-color: rgba(217, 202, 126, 0.12);
}

.home-page .quick-item:active {
  background: var(--n-navy);
}

.home-page .mission-card {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.home-page .stage-card {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

.home-page .text-row,
.home-page .contact-card {
  background: rgba(25, 39, 115, 0.5);
  border-color: rgba(217, 202, 126, 0.12);
}

.home-page .tl-days,
.home-page .tl-board {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(217, 202, 126, 0.12);
}

.home-page .footer-mark {
  color: rgba(217, 202, 126, 0.55);
}

/* 스크롤하면 아래 화살표 버튼이 상단 바 위로 올라오지 않게 */
.stage .ui {
  z-index: 5;
  pointer-events: none;
}

.stage .navbar {
  pointer-events: auto;
}

/* 메인 아래 UI 폰트: 본문·설명은 IBM Plex Sans KR, 단어·제목은 함렛 */
.home-page .home,
.home-page .footer {
  font-family: "IBM Plex Sans KR", "Pretendard Variable", "Pretendard", sans-serif;
  letter-spacing: -0.01em;
}

.home-page .section-title,
.home-page .campus-card-num,
.home-page .campus-card-title,
.home-page .quick-label,
.home-page .program-link-kicker,
.home-page .program-link-foot,
.home-page .mission-kicker,
.home-page .mission-title,
.home-page .mission-phases b,
.home-page .mission-rewards b,
.home-page .mission-rewards span,
.home-page .mission-more,
.home-page .stage-card-day,
.home-page .stage-card-pick,
.home-page .stage-card-artist,
.home-page .text-row b,
.home-page .tl-day,
.home-page .tl-col-name,
.home-page .nunsong-banner-text b {
  font-family: "Hahmlet", "Noto Serif KR", serif;
  letter-spacing: -0.02em;
}

.home-page .section-title,
.home-page .campus-card-title,
.home-page .program-link-kicker,
.home-page .mission-title,
.home-page .stage-card-day {
  font-weight: 700;
}

.home-page .section-title {
  font-size: 24px;
}

.home-page .campus-card-title {
  font-size: 18px;
}

.home-page .program-link-kicker {
  font-size: 21px;
}

.home-page .quick-label,
.home-page .mission-rewards span,
.home-page .text-row b {
  font-weight: 600;
}

.home-page .quick-label small,
.home-page .stage-card-artist small {
  font-family: "IBM Plex Sans KR", sans-serif;
  letter-spacing: 0;
}

/* 상세 페이지·팝업: 단어·제목은 함렛 (본문은 --font-body = IBM Plex Sans KR) */
.header-title,
.segment-btn,
.switch-btn,
.program-name,
.program-meta dt,
.program-more,
.program-badge,
.program-day,
.legend-title,
.legend-label,
.modal-title,
.modal-desc strong,
.booth-filter-btn,
.booth-chip,
.booth-section-title,
.booth-name,
.booth-slot,
.booth-poster-link,
.booth-table th,
.booth-table td:nth-child(2),
.poster-inline-btn,
.goods-name,
.goods-buy-info strong,
.gallery-section-title,
.gallery-card-name,
.gallery-caption-title,
.side-menu-title,
.accordion-toggle,
.menu-program-item,
.menu-program-link,
.side-menu-footer,
.group-title,
.admin-wait-label,
.admin-goods-name,
.admin-seg-btn,
.btn-primary,
.nunsong-banner-text b,
.nunsong-inline-notice b,
.back-link {
  font-family: "Hahmlet", "Noto Serif KR", serif;
  letter-spacing: -0.02em;
}

.side-menu-title small {
  font-family: var(--font-body);
}

.program-name small {
  font-family: "Hahmlet", "Noto Serif KR", serif;
}

/* 눈송이 출몰 팝업 — 하양 + 노랑, 눈송이 캐릭터 */
.modal-box.nunsong-modal {
  max-width: 320px;
  padding: 0 20px 22px;
  overflow: hidden;
  color: #192773;
  background: #ffffff;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.nunsong-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 128px;
  background:
    radial-gradient(circle at 50% 120%, #fff6c8 0 38%, transparent 39%),
    linear-gradient(180deg, #f2cb05 0%, #ffd83a 100%);
}

.nunsong-modal .modal-close {
  color: #192773;
  background: rgba(255, 255, 255, 0.7);
}

.nunsong-modal-icon {
  position: relative;
  width: 116px;
  height: 142px;
  margin: 18px auto 10px;
  display: block;
  color: inherit;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.nunsong-modal-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(25, 39, 115, 0.18));
  animation: nunsong-hop 1.6s ease-in-out infinite;
}

@keyframes nunsong-hop {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nunsong-modal-icon img { animation: none; }
}

.nunsong-modal .modal-title {
  position: relative;
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 14px;
  font-size: 18px;
  color: #192773;
  background: #fff3b0;
  border-radius: 999px;
  border-bottom: 0;
}

.nunsong-modal-message {
  position: relative;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  color: #192773;
}

.nunsong-modal-time {
  position: relative;
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(25, 39, 115, 0.55);
}