:root {
  --ink: #111827;
  --ink-soft: #334155;
  --paper: #f7f3e8;
  --cream: #fffdf7;
  --white: #ffffff;
  --gold: #f2c14e;
  --orange: #e98b4d;
  --red: #e45b45;
  --sage: #8fa68e;
  --teal: #3c7f7a;
  --blue: #4f6f9f;
  --purple: #7b6397;
  --line: rgba(17, 24, 39, 0.14);
  --shadow: 0 24px 70px rgba(15, 23, 42, 0.13);
  --radius: 28px;
  --max-width: 1240px;
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, Pretendard, "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, canvas { max-width: 100%; }
.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; }

.reading-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 1000;
  background: rgba(255,255,255,.12);
}
.reading-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--red)); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 clamp(18px, 4vw, 54px);
  background: rgba(255, 253, 247, 0.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold); font-size: 18px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.02em; }
.brand small { margin-top: 1px; font-size: 9px; letter-spacing: .16em; color: #64748b; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 22px; flex: 1; }
.main-nav a { position: relative; font-size: 13px; font-weight: 700; color: #475569; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--red); transition: .25s; }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.village-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 20px;
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.village-home-link:hover,
.village-home-link:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}
.language-label { font-size: 11px; color: #64748b; }
.language-select, .wide-select, .compare-controls select, .reflection-form select {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 10px 13px;
  color: var(--ink);
}
.menu-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 10px; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--ink); }

section { position: relative; }
.section-dark { background: var(--ink); color: var(--paper); }
.section-light { background: #eef0ec; }
.section-paper { background: var(--paper); }
.section-future { background: radial-gradient(circle at 20% 15%, #243b4a 0, #111827 38%, #090d15 100%); color: white; }
.hero, .gallery, .museum-map { padding: 108px clamp(20px, 5vw, 72px); }
.gallery, .museum-map { min-height: 760px; }
.gallery > *, .museum-map > * { max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.gallery-number { position: absolute; top: 90px; right: clamp(20px, 5vw, 72px); font-size: clamp(60px, 8vw, 120px); font-weight: 900; line-height: 1; opacity: .07; letter-spacing: -.08em; }
.section-heading { max-width: 820px; margin-bottom: 54px; }
.section-heading.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-heading h2 { margin: 10px 0 18px; font-size: clamp(34px, 5vw, 66px); line-height: 1.1; letter-spacing: -.05em; }
.section-heading p:last-child { margin: 0; font-size: clamp(16px, 2vw, 20px); color: #596579; }
.section-dark .section-heading p:last-child, .section-future .section-heading p:last-child { color: #cbd5e1; }
.eyebrow { margin: 0; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.section-dark .eyebrow, .section-future .eyebrow { color: var(--gold); }

.hero {
  min-height: calc(100vh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  align-items: center;
  gap: 64px;
  overflow: hidden;
}
.hero-content { position: relative; z-index: 2; max-width: 780px; margin-left: max(0px, calc((100vw - var(--max-width)) / 2)); }
.hero h1 { margin: 14px 0 24px; font-size: clamp(50px, 7vw, 96px); line-height: .98; letter-spacing: -.07em; }
.hero-copy { max-width: 680px; color: #cbd5e1; font-size: clamp(17px, 2vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 48px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border-radius: 14px; border: 1px solid transparent; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: var(--ink); box-shadow: 0 12px 30px rgba(242,193,78,.22); }
.button-ghost { background: transparent; color: white; border-color: rgba(255,255,255,.28); }
.button-secondary { background: white; border-color: var(--line); color: var(--ink); }
.button-dark { background: var(--ink); color: white; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 650px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; }
.hero-stats div { padding: 16px; background: rgba(255,255,255,.045); }
.hero-stats strong, .hero-stats span { display: block; }
.hero-stats strong { font-size: 25px; color: var(--gold); }
.hero-stats span { color: #b8c2d1; font-size: 11px; }
.visitor-status { max-width: 650px; min-height: 18px; margin: 10px 0 0; color: #858883; font-size: 11px; }
.hero-visual { position: relative; z-index: 2; display: grid; place-items: center; }
.museum-dial { position: relative; width: min(42vw, 520px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: inset 0 0 0 48px rgba(255,255,255,.025), inset 0 0 0 49px rgba(255,255,255,.11), 0 40px 120px rgba(0,0,0,.3); animation: float 8s ease-in-out infinite; }
.museum-dial::before, .museum-dial::after { content: ""; position: absolute; inset: 14%; border: 1px dashed rgba(242,193,78,.42); border-radius: 50%; }
.museum-dial::after { inset: 31%; border-style: solid; border-color: rgba(255,255,255,.16); }
.dial-center { position: absolute; inset: 35%; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f5cf6f, var(--orange)); color: var(--ink); box-shadow: 0 0 80px rgba(242,193,78,.24); }
.dial-center span { font-size: 11px; letter-spacing: .22em; }
.dial-center strong { font-size: clamp(18px, 3vw, 32px); }
.dial-tag { position: absolute; min-width: 72px; padding: 10px 15px; text-align: center; border-radius: 99px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); font-size: 12px; font-weight: 800; }
.tag-a { top: 4%; left: 50%; transform: translateX(-50%); }
.tag-b { right: -2%; top: 48%; }
.tag-c { bottom: 5%; left: 50%; transform: translateX(-50%); }
.tag-d { left: -1%; top: 48%; }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.orbit-one { width: 760px; height: 760px; right: -220px; top: -240px; }
.orbit-two { width: 560px; height: 560px; left: -280px; bottom: -340px; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; width: 30px; height: 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; }
.scroll-cue span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--gold); animation: scrollCue 1.6s infinite; }

.map-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.map-card { position: relative; min-height: 210px; padding: 24px; overflow: hidden; border-radius: 24px; background: white; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(15,23,42,.05); transition: transform .25s, box-shadow .25s; }
.map-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.map-card .map-no { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--gold); font-size: 12px; font-weight: 900; }
.map-card h3 { margin: 42px 0 8px; font-size: 20px; line-height: 1.2; }
.map-card p { margin: 0; color: #64748b; font-size: 13px; }
.map-card::after { content: "→"; position: absolute; right: 22px; top: 24px; font-size: 22px; color: var(--red); }
.map-card.visited { outline: 3px solid rgba(60,127,122,.3); }
.map-card.visited .map-no { background: var(--teal); color: white; }

.timeline { position: relative; display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 0; overflow-x: auto; padding: 30px 4px 20px; }
.timeline::before { content: ""; position: absolute; top: 46px; left: 4%; right: 4%; height: 2px; background: var(--line); }
.timeline-item { position: relative; min-width: 155px; padding: 42px 16px 0; }
.timeline-item::before { content: ""; position: absolute; top: 9px; left: 18px; width: 14px; height: 14px; border: 5px solid var(--paper); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--red); }
.timeline-item strong { display: block; font-size: 13px; color: var(--red); }
.timeline-item h3 { margin: 8px 0; font-size: 20px; }
.timeline-item p { margin: 0; color: #64748b; font-size: 13px; }

.experience-panel { max-width: var(--max-width); margin-top: 54px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 40px; padding: 38px; border-radius: var(--radius); background: var(--ink); color: white; box-shadow: var(--shadow); }
.experience-panel.compact { grid-template-columns: .9fr 1.1fr; }
.experience-label { margin: 0 0 8px; color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.experience-panel h3 { margin: 0 0 10px; font-size: 28px; }
.experience-panel p { color: #cbd5e1; }
.body-selector, .segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.08); }
.body-selector button, .segmented button { border: 0; border-radius: 9px; padding: 9px 13px; background: transparent; color: #cbd5e1; font-weight: 800; font-size: 12px; }
.body-selector button.active, .segmented button.active { background: var(--gold); color: var(--ink); }
.body-stage { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; margin-top: 22px; }
.silhouette { position: relative; width: 100px; height: 210px; margin: 0 auto; transition: .4s; }
.silhouette::before { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 56px; transform: translateX(-50%); border-radius: 50%; background: var(--gold); }
.silhouette span { position: absolute; top: 50px; left: 50%; width: 84px; height: 150px; transform: translateX(-50%); border-radius: 42% 42% 28% 28%; background: linear-gradient(180deg, var(--orange), var(--red)); }
.silhouette.slim span { width: 58px; }
.silhouette.full span { width: 118px; }
.body-stage input[type="range"], .sim-controls input[type="range"], .future-controls input[type="range"] { width: 100%; accent-color: var(--gold); }
.result-card { margin-top: 14px; min-height: 110px; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); }
.result-card strong { display: block; color: var(--gold); }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filter-bar button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 9px 14px; color: #475569; font-size: 12px; font-weight: 800; }
.filter-bar button.active { background: var(--ink); color: white; }
.diet-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.diet-card { position: relative; min-height: 330px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: white; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.diet-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.diet-card .era-chip { display: inline-flex; border-radius: 999px; padding: 6px 10px; background: #eef0ec; color: #475569; font-size: 10px; font-weight: 900; }
.diet-card .risk-chip { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 900; }
.risk-1 { background: #dcefe6; color: #266b4a; }
.risk-2 { background: #fff2c6; color: #8a6410; }
.risk-3 { background: #ffd8cf; color: #973824; }
.diet-card h3 { margin: 38px 0 12px; font-size: 24px; line-height: 1.15; }
.diet-card p { color: #64748b; font-size: 13px; }
.diet-card dl { display: grid; grid-template-columns: 62px 1fr; gap: 8px 10px; font-size: 12px; }
.diet-card dt { color: #94a3b8; font-weight: 800; }
.diet-card dd { margin: 0; }
.diet-card button { position: absolute; left: 24px; bottom: 22px; border: 0; background: transparent; color: var(--red); font-weight: 900; }
.museum-dialog { width: min(760px, calc(100vw - 32px)); border: 0; border-radius: 26px; padding: 0; box-shadow: 0 40px 140px rgba(0,0,0,.35); }
.museum-dialog::backdrop { background: rgba(15,23,42,.72); backdrop-filter: blur(5px); }
.dialog-close { position: sticky; z-index: 2; float: right; top: 14px; margin: 14px 14px 0 0; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ink); color: white; font-size: 25px; }
#dialogContent { padding: 42px; }
#dialogContent .dialog-era { color: var(--red); font-weight: 900; letter-spacing: .12em; font-size: 11px; }
#dialogContent h2 { margin: 12px 0 14px; font-size: 42px; line-height: 1.1; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.dialog-box { padding: 18px; border-radius: 16px; background: #f5f3ec; }
.dialog-box strong { display: block; margin-bottom: 6px; }
.small-dialog { padding: 38px; }
.small-dialog h2 { margin-top: 0; }

.failure-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: center; }
.failure-wheel { position: relative; width: min(100%, 430px); aspect-ratio: 1; margin: 0 auto; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.failure-wheel::before, .failure-wheel::after { content: ""; position: absolute; inset: 14%; border: 1px dashed rgba(255,255,255,.15); border-radius: 50%; }
.failure-wheel::after { inset: 30%; }
.wheel-center { position: absolute; inset: 34%; display: grid; place-items: center; align-content: center; border-radius: 50%; background: var(--red); box-shadow: 0 0 70px rgba(228,91,69,.3); }
.wheel-center strong { font-size: 36px; }
.wheel-center span { font-size: 11px; }
.wheel-item { position: absolute; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 900; }
.wi-1 { top: 2%; left: 50%; transform: translateX(-50%); }
.wi-2 { top: 29%; right: -2%; }
.wi-3 { bottom: 8%; right: 9%; }
.wi-4 { bottom: 8%; left: 9%; }
.wi-5 { top: 29%; left: -2%; }
.quiz-card { min-height: 470px; border-radius: 28px; background: var(--paper); color: var(--ink); padding: 34px; box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.quiz-topline { display: flex; justify-content: space-between; color: #64748b; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.quiz-question { margin: 30px 0 22px; font-size: 26px; line-height: 1.35; }
.quiz-options { display: grid; gap: 10px; }
.quiz-options button { text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; padding: 15px 17px; transition: .2s; }
.quiz-options button:hover { border-color: var(--orange); }
.quiz-options button.correct { border-color: var(--teal); background: #e8f4ef; }
.quiz-options button.wrong { border-color: var(--red); background: #fff0ed; }
.quiz-explanation { margin-top: 18px; padding: 16px; border-radius: 14px; background: #eef0ec; }
.quiz-next { margin-top: 16px; }

.bmi-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; }
.calculator-card, .bmi-result { min-height: 390px; padding: 34px; border-radius: 28px; background: white; border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(15,23,42,.07); }
.calculator-card h3 { margin-top: 0; font-size: 28px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 18px; }
.field-row label { position: relative; display: block; }
.field-row label > span { display: block; margin-bottom: 7px; color: #64748b; font-size: 12px; font-weight: 800; }
.field-row input { width: 100%; height: 72px; border: 1px solid var(--line); border-radius: 14px; padding: 0 48px 0 16px; font-size: 30px; font-weight: 900; }
.field-row small { position: absolute; right: 15px; bottom: 22px; color: #94a3b8; }
.check-line { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; font-size: 13px; color: #64748b; }
.formula { color: #94a3b8; font-size: 12px; }
.bmi-result { position: relative; text-align: center; overflow: hidden; }
.bmi-gauge { position: relative; width: 260px; height: 130px; margin: 10px auto 0; overflow: hidden; border-radius: 260px 260px 0 0; background: conic-gradient(from 270deg at 50% 100%, #84a9c0 0 21%, #87b889 21% 53%, #f0bd56 53% 73%, #e56f52 73% 100%); }
.bmi-gauge::after { content: ""; position: absolute; left: 35px; right: 35px; bottom: 0; height: 95px; background: white; border-radius: 170px 170px 0 0; }
#bmiNeedle { position: absolute; z-index: 2; left: calc(50% - 2px); bottom: 0; width: 4px; height: 105px; background: var(--ink); transform-origin: bottom center; transform: rotate(-20deg); transition: .6s ease; }
#bmiNeedle::before { content: ""; position: absolute; left: -7px; bottom: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); }
.bmi-value { margin: -2px 0 0; }
.bmi-value span { display: block; font-size: 58px; font-weight: 900; letter-spacing: -.06em; }
.bmi-value small { color: #94a3b8; font-size: 11px; letter-spacing: .15em; }
.bmi-result h3 { margin: 8px 0; font-size: 24px; }
.bmi-result > p:last-child { max-width: 540px; margin: 0 auto; color: #64748b; font-size: 14px; }
.bmi-limit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.bmi-limit-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.55); }
.bmi-limit-grid article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: white; font-weight: 900; }
.bmi-limit-grid h3 { margin: 14px 0 8px; }
.bmi-limit-grid p { margin: 0; color: #64748b; }
.museum-note { margin-top: 20px; color: #64748b; font-size: 12px; }
.section-dark .museum-note, .section-future .museum-note { color: #94a3b8; }

.composition-demo { display: grid; grid-template-columns: 1fr 130px 1fr; gap: 20px; align-items: center; }
.person-card { min-height: 430px; padding: 30px; text-align: center; border-radius: 28px; background: white; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(15,23,42,.06); }
.person-card h3 { margin: 0; }
.mini-person { position: relative; width: 100px; height: 190px; margin: 20px auto; }
.mini-person::before { content: ""; position: absolute; top: 0; left: 50%; width: 52px; height: 52px; transform: translateX(-50%); border-radius: 50%; background: var(--gold); }
.mini-person::after { content: ""; position: absolute; top: 46px; left: 50%; width: 78px; height: 140px; transform: translateX(-50%); border-radius: 38px 38px 22px 22px; background: var(--blue); }
.mini-person.soft::after { width: 108px; background: var(--orange); }
.person-card > strong { display: block; margin: 8px 0 18px; }
.person-card ul { display: inline-block; margin: 14px auto 0; padding-left: 20px; text-align: left; color: #64748b; font-size: 13px; }
.stack-bar { display: flex; height: 24px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.stack-bar span { width: calc(var(--value) * 1%); }
.stack-bar [data-label="fat"] { background: var(--orange); }
.stack-bar [data-label="muscle"] { background: var(--teal); }
.stack-bar [data-label="other"] { background: #cbd5e1; }
.same-sign { text-align: center; }
.same-sign span { display: block; font-size: 58px; color: var(--red); }
.same-sign small { color: #64748b; }
.loss-bars { margin-top: 20px; display: grid; gap: 14px; }
.loss-row { display: grid; grid-template-columns: 80px 1fr 50px; align-items: center; gap: 10px; }
.loss-track { height: 20px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.loss-track span { display: block; height: 100%; border-radius: inherit; transition: width .4s; }
.loss-row.fat .loss-track span { background: var(--orange); }
.loss-row.muscle .loss-track span { background: var(--teal); }
.loss-row.water .loss-track span { background: #75a9d6; }

.simulator-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 24px; }
.sim-controls, .chart-card { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.sim-controls label { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 24px; }
.sim-controls label input { grid-column: 1 / -1; }
.sim-controls output { font-weight: 900; color: var(--red); }
.chart-card { min-height: 470px; }
.chart-legend { display: flex; justify-content: flex-end; gap: 22px; margin-bottom: 18px; color: #64748b; font-size: 11px; }
.chart-legend span::before { content: ""; display: inline-block; width: 24px; height: 3px; margin-right: 8px; vertical-align: middle; background: var(--red); }
.chart-legend span:last-child::before { background: var(--teal); }
#metabolismChart { width: 100%; height: auto; }
.chart-insight { margin: 12px 0 0; padding: 15px; border-radius: 14px; background: #f2f4f0; color: #475569; }

.compare-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 26px; }
.compare-controls select { min-width: min(330px, 40vw); }
.compare-controls span { font-weight: 900; color: var(--red); }
.compare-table { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; }
.compare-row { display: grid; grid-template-columns: 180px 1fr 1fr; border-bottom: 1px solid var(--line); }
.compare-row:last-child { border-bottom: 0; }
.compare-row > * { padding: 18px 20px; }
.compare-row > :nth-child(2) { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.compare-row.head { background: var(--ink); color: white; font-weight: 900; }
.compare-row .metric { font-weight: 900; color: #475569; }
.compare-row.head .metric { color: var(--gold); }
#compare blockquote, #compare + blockquote { margin: 30px auto 0; max-width: 900px; text-align: center; font-size: 24px; font-weight: 700; color: #334155; }

.medicine-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 44px; }
.medicine-step { min-height: 210px; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.12); }
.medicine-step strong { color: var(--gold); font-size: 12px; }
.medicine-step h3 { margin: 30px 0 8px; font-size: 19px; }
.medicine-step p { margin: 0; color: #aeb9ca; font-size: 12px; }
.signal-lab { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; padding: 38px; border-radius: var(--radius); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); }
.signal-figure { position: relative; min-height: 330px; }
.brain-node, .stomach-node { position: absolute; display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(242,193,78,.08); font-weight: 900; }
.brain-node { top: 20px; left: 20%; }
.stomach-node { right: 18%; bottom: 20px; border-color: var(--orange); }
.signal-line { position: absolute; height: 2px; transform-origin: left center; background: linear-gradient(90deg, var(--gold), var(--orange)); animation: pulseLine 2s infinite; }
.line-a { width: 230px; left: 32%; top: 120px; transform: rotate(30deg); }
.line-b { width: 180px; left: 28%; top: 180px; transform: rotate(15deg); }
.line-c { width: 150px; left: 44%; top: 230px; transform: rotate(-4deg); }
.signal-meters { display: grid; gap: 13px; margin: 24px 0; }
.signal-meter { display: grid; grid-template-columns: 90px 1fr 40px; gap: 10px; align-items: center; }
.signal-meter .meter-track { height: 12px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.signal-meter .meter-track span { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .5s; }
.signal-controls > p { color: #cbd5e1; }

.future-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.future-card { min-height: 250px; padding: 24px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.13); }
.future-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(242,193,78,.16); color: var(--gold); font-size: 24px; }
.future-card h3 { margin: 44px 0 10px; }
.future-card p { margin: 0; color: #aeb9ca; font-size: 13px; }
.future-console { margin-top: 46px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; }
.console-screen, .future-controls { border-radius: 24px; border: 1px solid rgba(255,255,255,.14); background: rgba(4,10,18,.55); }
.console-header { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.console-header span { width: 9px; height: 9px; border-radius: 50%; background: #ef6a5b; }
.console-header span:nth-child(2) { background: #eebd4f; }
.console-header span:nth-child(3) { background: #68b77b; }
.console-header strong { margin-left: auto; color: #94a3b8; font-size: 10px; letter-spacing: .15em; }
.console-body { min-height: 330px; display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; padding: 34px; }
.pulse-ring { display: grid; place-items: center; width: 190px; height: 190px; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 22px rgba(242,193,78,.05), 0 0 70px rgba(242,193,78,.15); }
.pulse-ring span { font-size: 56px; font-weight: 900; }
.future-readout { display: grid; gap: 12px; }
.readout-line { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: #cbd5e1; }
.readout-line strong { color: white; }
.future-controls { padding: 30px; }
.future-controls label { display: block; margin-bottom: 22px; }
.future-controls label span { display: block; margin-bottom: 8px; color: #cbd5e1; }

.ethics-list { display: grid; gap: 14px; }
.ethics-item { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.ethics-item h3 { margin: 0 0 15px; font-size: 20px; }
.ethics-options { display: flex; flex-wrap: wrap; gap: 9px; }
.ethics-options button { border: 1px solid var(--line); border-radius: 999px; background: #f8fafc; padding: 9px 14px; font-weight: 800; color: #475569; }
.ethics-options button.selected { background: var(--ink); color: white; }
.ethics-comment { margin: 14px 0 0; color: #64748b; font-size: 13px; }
.ethics-summary { margin-top: 26px; padding: 28px; border-radius: 22px; background: var(--ink); color: white; }
.ethics-summary h3 { margin-top: 0; }
.ethics-summary p { color: #cbd5e1; }

.reflection-section { padding-bottom: 130px; }
.reflection-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 32px; align-items: start; }
.reflection-form { display: grid; gap: 18px; padding: 28px; border-radius: 24px; background: white; border: 1px solid var(--line); }
.reflection-form label span { display: block; margin-bottom: 8px; color: #64748b; font-size: 12px; font-weight: 800; }
.reflection-form select { width: 100%; }
.reflection-card-wrap { display: grid; justify-items: center; gap: 14px; }
#reflectionCanvas { width: min(100%, 560px); border-radius: 22px; box-shadow: var(--shadow); background: var(--ink); }
.closing-question { max-width: 980px; margin: 80px auto 0; padding: 44px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.closing-question p { margin: 0; font-size: clamp(24px, 3vw, 40px); line-height: 1.3; font-weight: 900; letter-spacing: -.04em; }

.site-footer { display: flex; justify-content: space-between; gap: 30px; padding: 54px clamp(20px, 5vw, 72px); background: #0b1019; color: white; }
.site-footer p { margin: 8px 0 0; color: #94a3b8; font-size: 13px; }
.site-footer > div:last-child { text-align: right; }
.text-button { margin-top: 14px; border: 0; background: transparent; color: var(--gold); text-decoration: underline; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 1200; transform: translate(-50%, 120px); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: white; box-shadow: var(--shadow); transition: .35s; }
.toast.show { transform: translate(-50%, 0); }

@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes scrollCue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes pulseLine { 0%,100% { opacity: .28; } 50% { opacity: 1; } }

@media (max-width: 1100px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 11px; }
  .map-grid { grid-template-columns: repeat(3, 1fr); }
  .diet-card-grid { grid-template-columns: repeat(3, 1fr); }
  .future-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --header-height: 68px; }
  .site-header { gap: 12px; }
  .brand { min-width: 0; margin-right: auto; }
  .brand strong { font-size: 13px; }
  .brand small { display: none; }
  .menu-toggle { display: block; order: 3; }
  .header-actions { order: 2; }
  .language-select { max-width: 112px; }
  .language-label { display: none; }
  .main-nav { position: fixed; left: 0; right: 0; top: var(--header-height); display: grid; gap: 0; padding: 16px 20px 24px; background: rgba(255,253,247,.98); border-bottom: 1px solid var(--line); transform: translateY(-140%); transition: .3s; }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { padding: 12px 0; font-size: 14px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 90px; }
  .hero-content { margin-left: 0; }
  .hero-visual { padding-bottom: 40px; }
  .museum-dial { width: min(78vw, 480px); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .map-grid { grid-template-columns: repeat(2, 1fr); }
  .experience-panel, .experience-panel.compact, .failure-layout, .bmi-layout, .simulator-grid, .signal-lab, .future-console, .reflection-layout { grid-template-columns: 1fr; }
  .diet-card-grid { grid-template-columns: repeat(2, 1fr); }
  .composition-demo { grid-template-columns: 1fr; }
  .same-sign { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .medicine-timeline { grid-template-columns: repeat(2, 1fr); }
  .future-console { grid-template-columns: 1fr; }
  .reflection-form { order: 1; }
  .reflection-card-wrap { order: 2; }
}

@media (max-width: 580px) {
  .hero, .gallery, .museum-map { padding: 78px 18px; }
  .gallery-number { top: 70px; right: 18px; }
  .hero h1 { font-size: 49px; }
  .hero-copy { font-size: 16px; }
  .map-grid, .diet-card-grid, .future-grid { grid-template-columns: 1fr; }
  .map-card { min-height: 175px; }
  .timeline { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .experience-panel { padding: 24px; }
  .body-stage { grid-template-columns: 1fr; }
  .failure-wheel { width: 320px; }
  .quiz-card { padding: 24px; }
  .field-row, .bmi-limit-grid { grid-template-columns: 1fr; }
  .calculator-card, .bmi-result { padding: 24px; }
  .compare-controls { display: grid; grid-template-columns: 1fr; }
  .compare-controls select { min-width: 0; width: 100%; }
  .compare-controls span { text-align: center; }
  .compare-row { grid-template-columns: 105px 1fr 1fr; font-size: 11px; }
  .compare-row > * { padding: 13px 10px; }
  .medicine-timeline { grid-template-columns: 1fr; }
  .signal-figure { min-height: 290px; }
  .brain-node, .stomach-node { width: 105px; height: 105px; font-size: 12px; }
  .console-body { grid-template-columns: 1fr; }
  .pulse-ring { margin: 0 auto; }
  .site-footer { display: grid; }
  .site-footer > div:last-child { text-align: left; }
  #dialogContent { padding: 28px; }
  .dialog-grid { grid-template-columns: 1fr; }
  #dialogContent h2 { font-size: 34px; }
  .language-select { max-width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.hero h1 { white-space: pre-line; }

/* =========================================================
   IMMERSIVE MUSEUM EXPERIENCE UI — 2026 REDESIGN
   ========================================================= */
:root {
  --museum-black: #090a0c;
  --museum-charcoal: #141518;
  --museum-wall: #e8e1d3;
  --museum-stone: #cfc6b5;
  --museum-brass: #c9a86a;
  --museum-brass-light: #f0d49a;
  --museum-wine: #6f2734;
  --museum-green: #263c36;
  --museum-blue: #1f3443;
  --museum-shadow: 0 32px 90px rgba(0,0,0,.28);
  --ink: #17181b;
  --paper: #eee8dc;
  --cream: #f5f0e7;
  --gold: var(--museum-brass-light);
  --orange: #c98657;
  --red: #9f4350;
  --line: rgba(41,36,29,.18);
  --radius: 8px;
  --header-height: 82px;
}

html { scroll-padding-top: var(--header-height); }
body.museum-ui {
  background: var(--museum-black);
  font-family: Inter, Pretendard, "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif;
}
body.museum-ui.entrance-open { overflow: hidden; }
body.museum-ui h1,
body.museum-ui h2,
body.museum-ui .gallery-number,
body.museum-ui .room-plaque strong,
body.museum-ui .entrance-plaque h1,
body.museum-ui .central-portal strong {
  font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
  font-weight: 500;
}

/* Pointer lighting */
.museum-spotlight {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .48;
  background: radial-gradient(460px circle at var(--mouse-x, 50vw) var(--mouse-y, 45vh), rgba(255,236,193,.07), transparent 68%);
  mix-blend-mode: screen;
}

/* Entrance lobby */
.museum-entrance {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 72px 100%,
    radial-gradient(circle at 50% 18%, rgba(201,168,106,.13), transparent 25%),
    #08090b;
  color: #f1eadc;
  transition: opacity .8s ease, visibility .8s ease;
}
.museum-entrance::before,
.museum-entrance::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 17vw;
  min-width: 110px;
  background: linear-gradient(90deg, #131418, #090a0c);
  box-shadow: 0 0 80px rgba(0,0,0,.8);
}
.museum-entrance::before { left: 0; border-right: 1px solid rgba(201,168,106,.25); }
.museum-entrance::after { right: 0; transform: scaleX(-1); border-right: 1px solid rgba(201,168,106,.25); }
.museum-entrance.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.entrance-ceiling {
  position: absolute;
  inset: 0 0 auto;
  height: 19vh;
  display: flex;
  justify-content: center;
  gap: min(18vw, 260px);
  background: linear-gradient(#15161a, transparent);
  perspective: 900px;
}
.entrance-ceiling span {
  width: 90px;
  height: 8px;
  margin-top: 48px;
  border-radius: 50%;
  background: #f6e1b6;
  box-shadow: 0 12px 70px 30px rgba(244,216,160,.19);
  transform: rotateX(70deg);
}
.entrance-scene { position: relative; z-index: 2; width: min(760px, 72vw); text-align: center; }
.entrance-plaque { margin: 0 auto 32px; }
.plaque-kicker { color: var(--museum-brass-light); font-size: 10px; letter-spacing: .34em; font-weight: 800; }
.entrance-plaque h1 { margin: 16px 0 7px; font-size: clamp(38px, 5.5vw, 76px); letter-spacing: -.04em; }
.entrance-plaque p { margin: 0; color: #aaa69e; font-size: clamp(13px, 1.6vw, 18px); letter-spacing: .08em; }
.museum-doors {
  position: relative;
  display: flex;
  width: min(510px, 62vw);
  height: min(38vh, 340px);
  margin: 0 auto 26px;
  border: 10px solid #232328;
  border-bottom-width: 0;
  box-shadow: 0 -1px 0 var(--museum-brass), 0 40px 110px rgba(0,0,0,.65), inset 0 0 50px rgba(0,0,0,.7);
  perspective: 1100px;
  overflow: hidden;
}
.door { position: relative; width: 50%; background: linear-gradient(90deg, #202125, #111216); border: 1px solid rgba(201,168,106,.25); transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.door::before, .door::after { content:""; position:absolute; inset: 13% 14% 52%; border: 1px solid rgba(201,168,106,.27); }
.door::after { inset: 53% 14% 13%; }
.door span { position:absolute; top:49%; width:8px; height:8px; border-radius:50%; background:var(--museum-brass-light); box-shadow:0 0 14px rgba(240,212,154,.6); }
.door-left { transform-origin: left center; }
.door-right { transform-origin: right center; }
.door-left span { right:15px; }.door-right span { left:15px; }
.door-glow { position:absolute; inset:0; z-index:-1; background:linear-gradient(#f5dca7,#8a553b); filter:blur(10px); }
.museum-entrance.opening .door-left { transform: perspective(800px) rotateY(-82deg); }
.museum-entrance.opening .door-right { transform: perspective(800px) rotateY(82deg); }
.entrance-button {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-width: 210px;
  justify-content: center;
  border: 1px solid rgba(240,212,154,.6);
  background: rgba(10,10,12,.7);
  color: #f4ead7;
  padding: 14px 23px;
  font-weight: 800;
  letter-spacing: .07em;
  transition: .25s ease;
}
.entrance-button:hover { background: var(--museum-brass); color: #111; box-shadow: 0 0 40px rgba(201,168,106,.26); }
.entrance-button b { font-size: 20px; }
.entrance-guide { margin: 17px auto 0; max-width: 580px; color: #777873; font-size: 11px; }

/* Museum header and wayfinding */
.reading-progress { height: 2px; background: rgba(255,255,255,.08); }
.reading-progress span { background: var(--museum-brass-light); }
.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-height);
  background: rgba(8,9,11,.88);
  border-bottom: 1px solid rgba(201,168,106,.2);
  color: #f3ecdf;
  backdrop-filter: blur(22px);
}
.brand { min-width: 270px; }
.brand-mark {
  border: 1px solid var(--museum-brass);
  background: transparent;
  color: var(--museum-brass-light);
  border-radius: 2px;
  transform: rotate(45deg);
}
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand strong { font-family: Georgia, "Noto Serif KR", serif; font-weight: 500; font-size: 16px; }
.brand small { color: #8c8d8a; }
.museum-status { min-width: 112px; padding-left: 20px; border-left: 1px solid rgba(201,168,106,.22); line-height: 1.15; }
.museum-status span, .museum-status strong { display:block; }
.museum-status span { color:#777a78; font-size:7px; letter-spacing:.17em; }
.museum-status strong { margin-top:5px; color:var(--museum-brass-light); font-size:9px; letter-spacing:.14em; }
.main-nav { gap: 19px; }
.main-nav a { color: #a9aaa6; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.main-nav a::after { bottom:-12px; background:var(--museum-brass-light); }
.main-nav a.active { color:#fff; }
.language-select { background:#111216; color:#e8e1d3; border-color:rgba(201,168,106,.3); border-radius:2px; }
.language-label { color:#7f817e; }
.menu-toggle span:not(.sr-only) { background:#eee8dc; }

/* Fixed gallery rail */
.tour-rail {
  position: fixed;
  z-index: 800;
  right: 18px;
  top: 50%;
  width: 52px;
  padding: 14px 8px 10px;
  transform: translateY(-50%);
  border: 1px solid rgba(201,168,106,.24);
  background: rgba(10,11,13,.84);
  color: #fff;
  backdrop-filter: blur(15px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.rail-label { writing-mode:vertical-rl; transform:rotate(180deg); margin:0 auto 12px; color:#797a77; font-size:6px; letter-spacing:.22em; }
#tourRailNav { display:grid; gap:6px; }
.rail-dot { position:relative; display:grid; place-items:center; width:34px; height:25px; margin:auto; color:#6e706d; font-size:8px; border-left:1px solid transparent; transition:.25s; }
.rail-dot::after { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.rail-dot span { position:absolute; right:42px; width:max-content; max-width:180px; padding:7px 10px; opacity:0; transform:translateX(8px); pointer-events:none; background:#111216; border:1px solid rgba(201,168,106,.3); color:#eee8dc; font-size:10px; transition:.2s; }
.rail-dot:hover span { opacity:1; transform:none; }
.rail-dot.visited { color:#a98f60; }
.rail-dot.active { color:var(--museum-brass-light); border-left-color:var(--museum-brass-light); }
.rail-dot.active::after { width:8px; height:8px; box-shadow:0 0 13px var(--museum-brass); }
.rail-progress { margin-top:10px; padding-top:9px; border-top:1px solid rgba(201,168,106,.16); color:#8c8e8a; text-align:center; font-size:7px; }
.room-controls {
  position: fixed;
  z-index: 805;
  right: 18px;
  bottom: 18px;
  display:flex;
  align-items:center;
  background:rgba(9,10,12,.9);
  border:1px solid rgba(201,168,106,.25);
  backdrop-filter:blur(14px);
  transition:opacity .24s ease, transform .24s ease, visibility .24s ease;
}
.tour-rail { transition:opacity .24s ease, visibility .24s ease; }
body.footer-visible .room-controls { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(18px); }
body.footer-visible .tour-rail { opacity:0; visibility:hidden; pointer-events:none; }
.room-controls button { width:42px; height:42px; border:0; background:transparent; color:#ddd3bf; }
.room-controls button:hover { background:var(--museum-brass); color:#111; }
.room-controls span { min-width:42px; text-align:center; color:var(--museum-brass-light); font-family:Georgia,serif; font-size:13px; }

/* Hero: digital rotunda */
main { padding-top: var(--header-height); }
.hero {
  min-height: calc(100vh - var(--header-height));
  background:
    linear-gradient(90deg, rgba(201,168,106,.05) 1px, transparent 1px) center/120px 100%,
    radial-gradient(circle at 73% 32%, rgba(201,168,106,.14), transparent 26%),
    linear-gradient(180deg, #101115 0%, #090a0c 74%, #181512 74%, #08090b 100%);
}
.hero::before {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:26%;
  opacity:.52;
  background:repeating-linear-gradient(90deg, transparent 0 8%, rgba(201,168,106,.16) 8.1% 8.25%), linear-gradient(165deg,transparent 47%,rgba(201,168,106,.14) 48%,transparent 49%);
  transform:perspective(500px) rotateX(62deg);
  transform-origin:bottom;
}
.hero-content { margin-left:max(0px,calc((100vw - var(--max-width))/2)); }
.hero .eyebrow { color:var(--museum-brass-light); }
.hero h1 { font-size:clamp(50px,6.3vw,92px); color:#eee8dc; text-shadow:0 20px 60px rgba(0,0,0,.7); }
.hero-copy { color:#9c9d99; max-width:630px; }
.button { border-radius:2px; letter-spacing:.03em; }
.button-primary { background:var(--museum-brass); box-shadow:none; }
.button-primary:hover { background:var(--museum-brass-light); box-shadow:0 10px 35px rgba(201,168,106,.22); }
.button-ghost { border-color:rgba(201,168,106,.42); }
.hero-stats { border-radius:0; background:rgba(201,168,106,.12); border-color:rgba(201,168,106,.18); }
.hero-stats div { background:rgba(8,9,11,.72); }
.hero-stats strong { color:var(--museum-brass-light); font-family:Georgia,serif; font-weight:500; }
.hero-stats span { letter-spacing:.08em; }
.hero-stats .visitor-stat strong { font-variant-numeric:tabular-nums; }

/* Responsive Kakao AdFit placements */
.museum-ad { z-index:790; text-align:center; }
.museum-ad ins { display:block; margin:auto; }
.museum-ad-desktop {
  position:fixed;
  top:50%;
  right:78px;
  width:160px;
  height:600px;
  transform:translateY(-50%);
}
.museum-ad-mobile {
  position:relative;
  grid-column:1 / -1;
  width:min(320px,100%);
  min-height:50px;
  margin:32px auto 16px;
}
@media (min-width:1381px) {
  body.museum-ads-enabled main { padding-right:250px; }
}
@media (max-width:1380px) {
  .museum-ad-desktop { display:none!important; }
}
@media (min-width:1381px) {
  .museum-ad-mobile { display:none!important; }
}
.virtual-rotunda { position:relative; width:min(43vw,560px); height:min(65vh,610px); perspective:900px; filter:drop-shadow(0 45px 50px rgba(0,0,0,.7)); }
.rotunda-dome { position:absolute; left:4%; right:4%; top:0; height:39%; overflow:hidden; border:1px solid rgba(201,168,106,.38); border-radius:50% 50% 0 0 / 100% 100% 0 0; background:radial-gradient(ellipse at 50% 100%,#2a2928,#121317 66%); }
.rotunda-dome::before { content:""; position:absolute; inset:0; background:repeating-conic-gradient(from 0deg at 50% 100%,transparent 0 12deg,rgba(201,168,106,.22) 13deg 14deg); }
.rotunda-dome i { position:absolute; left:50%; bottom:0; width:1px; height:100%; background:rgba(201,168,106,.19); transform-origin:bottom; }
.rotunda-dome i:nth-child(1){transform:rotate(-35deg)}.rotunda-dome i:nth-child(3){transform:rotate(35deg)}
.rotunda-wall { position:absolute; left:0; right:0; top:36%; height:43%; display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,#16171a,#282625 50%,#16171a); border:1px solid rgba(201,168,106,.25); }
.central-portal { width:45%; height:93%; display:grid; place-items:center; align-content:center; border:6px solid #0c0d0f; box-shadow:0 0 0 1px var(--museum-brass),inset 0 0 55px #000; background:radial-gradient(circle at 50% 30%,rgba(201,168,106,.15),#08090b 68%); text-align:center; }
.central-portal span { color:#827861; font-size:7px; letter-spacing:.28em; }
.central-portal strong { margin:17px 0; color:#e8ddc7; font-size:clamp(24px,3.5vw,45px); line-height:.83; letter-spacing:.03em; }
.central-portal b { color:var(--museum-brass); font-size:9px; letter-spacing:.2em; }
.wall-label { width:24%; text-align:center; color:#6e6554; font-family:Georgia,serif; font-size:20px; }
.rotunda-floor { position:absolute; left:-7%; right:-7%; top:78%; bottom:0; transform:rotateX(63deg); transform-origin:top; border:1px solid rgba(201,168,106,.24); background:repeating-linear-gradient(90deg,transparent 0 19%,rgba(201,168,106,.16) 19.2% 19.5%),repeating-linear-gradient(0deg,#1c1916 0 24%,#0f0f10 24.5% 25%); }
.visitor { position:absolute; z-index:3; bottom:8%; width:12px; height:50px; border-radius:50% 50% 22% 22%; background:#050506; box-shadow:0 8px 13px #000; }
.visitor::before{content:"";position:absolute;left:1px;top:-10px;width:10px;height:10px;border-radius:50%;background:#050506}.visitor-a{left:20%}.visitor-b{right:18%;transform:scale(.82)}
.scroll-cue { border-radius:0; border-color:rgba(201,168,106,.32); }

/* Lobby map as floor plan */
.museum-map {
  background:#17181b;
  color:#eae2d3;
  border-top:1px solid rgba(201,168,106,.25);
}
.museum-map::before { content:""; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(201,168,106,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,106,.5) 1px,transparent 1px); background-size:54px 54px; }
.museum-map .section-heading p:last-child { color:#9a9b97; }
.museum-wayfinding { position:relative; z-index:2; max-width:var(--max-width); margin:0 auto 46px; display:flex; align-items:center; gap:18px; color:#7e807c; font-size:9px; letter-spacing:.2em; }
.museum-wayfinding i { flex:1; height:1px; background:linear-gradient(90deg,rgba(201,168,106,.55),transparent); }
.map-floorplan { position:relative; max-width:var(--max-width); margin:auto; padding:54px; border:1px solid rgba(201,168,106,.3); background:rgba(4,5,7,.4); box-shadow:inset 0 0 0 12px rgba(255,255,255,.015),var(--museum-shadow); }
.floorplan-corridor { display:flex; align-items:center; gap:12px; margin-bottom:30px; color:#777a76; font-size:8px; letter-spacing:.18em; }
.floorplan-corridor i { flex:1; border-top:1px dashed rgba(201,168,106,.32); }
.map-grid { grid-template-columns:repeat(5,1fr); gap:8px; }
.map-card { min-height:210px; border-radius:0; border:1px solid rgba(201,168,106,.24); background:#111216; color:#eee6d8; box-shadow:none; }
.map-card:hover { transform:translateY(-3px); border-color:var(--museum-brass); box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 0 35px rgba(201,168,106,.05); }
.map-card .map-no { border-radius:0; background:transparent; border:1px solid rgba(201,168,106,.42); color:var(--museum-brass-light); font-family:Georgia,serif; }
.map-card h3 { font-family:Georgia,"Noto Serif KR",serif; font-weight:500; }
.map-card p { color:#858884; }
.map-card::after { color:var(--museum-brass); }
.map-card.visited { outline:1px solid var(--museum-brass); background:#1a1917; }
.map-card.visited .map-no { background:var(--museum-brass); color:#111; }

/* Rooms */
.gallery {
  min-height:100vh;
  padding-top:130px;
  padding-bottom:150px;
  isolation:isolate;
  overflow:hidden;
  border-top:1px solid rgba(40,35,27,.2);
}
.gallery::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:180px;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% -15%,rgba(255,247,224,.75),transparent 48%);
  opacity:.38;
}
.gallery::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:-7%; right:-7%; bottom:-115px; height:230px;
  pointer-events:none;
  transform:perspective(500px) rotateX(68deg);
  transform-origin:bottom;
  background:repeating-linear-gradient(90deg,rgba(65,55,42,.14) 0 1px,transparent 1px 12%),linear-gradient(#bdb4a4,#d9d1c2);
  border-top:1px solid rgba(60,50,38,.24);
}
.section-paper { background:linear-gradient(100deg,#ddd6ca,#f2ede4 18%,#ece6db 82%,#d5cec1); }
.section-light { background:linear-gradient(100deg,#bfc4bc,#e5e7e0 16%,#e9eae5 84%,#bcc1b9); }
.section-dark { background:linear-gradient(100deg,#111216,#202126 16%,#1b1c20 84%,#0d0e11); color:#eee7da; }
.section-future { background:radial-gradient(circle at 50% 10%,#294355,#111820 48%,#070a0d); }
.gallery[data-gallery="2"] { background:linear-gradient(100deg,#b6ab98,#ddd3c2 16%,#e5dccd 84%,#b8ac99); }
.gallery[data-gallery="3"] { background:linear-gradient(100deg,#271218,#481b25 16%,#3d1720 84%,#1c0d12); }
.gallery[data-gallery="5"] { background:linear-gradient(100deg,#aeb5ab,#d9ddd5 17%,#e1e4df 83%,#a9b0a6); }
.gallery[data-gallery="7"] { background:linear-gradient(100deg,#b1aa9c,#e2dbce 17%,#eee8dc 83%,#afa89a); }
.gallery[data-gallery="8"] { background:linear-gradient(100deg,#0e1917,#263c36 18%,#1d302b 82%,#0b1513); }
.gallery[data-gallery="10"] { background:linear-gradient(100deg,#c8c0b2,#ece6dc 18%,#f0ebe3 82%,#c2baad); }
.room-ambience { position:absolute!important; inset:0!important; max-width:none!important; pointer-events:none; z-index:-1; }
.ceiling-light { position:absolute; top:32px; left:50%; width:min(58vw,740px); height:3px; transform:translateX(-50%); background:#fff7dd; box-shadow:0 16px 55px 25px rgba(255,239,198,.18); opacity:.65; }
.floor-line { position:absolute; left:0; right:0; bottom:91px; height:1px; background:rgba(58,47,35,.2); }
.section-dark .floor-line,.section-future .floor-line { background:rgba(201,168,106,.2); }
.room-plaque {
  position:absolute!important;
  z-index:3;
  top:114px;
  left:clamp(18px,3vw,48px);
  width:64px;
  padding:10px 6px;
  text-align:center;
  border:1px solid rgba(49,40,29,.35);
  background:rgba(242,237,227,.62);
  color:#26231e;
  box-shadow:0 9px 22px rgba(0,0,0,.12);
}
.section-dark .room-plaque,.section-future .room-plaque { background:rgba(9,10,12,.62); border-color:rgba(201,168,106,.38); color:#eee5d6; }
.room-plaque span { display:block; font-size:7px; letter-spacing:.16em; }
.room-plaque strong { display:block; font-size:25px; line-height:1.05; color:var(--museum-wine); }
.section-dark .room-plaque strong,.section-future .room-plaque strong { color:var(--museum-brass-light); }
.gallery-number { top:105px; right:6vw; opacity:.045; font-size:clamp(100px,15vw,220px); color:#000; }
.section-dark .gallery-number,.section-future .gallery-number { color:#fff; }
.section-heading { margin-bottom:68px; }
.section-heading h2 { font-weight:500; letter-spacing:-.045em; max-width:980px; }
.section-heading h2::after { content:""; display:block; width:82px; height:1px; margin-top:25px; background:var(--museum-brass); }
.section-heading.centered h2::after { margin-left:auto; margin-right:auto; }
.eyebrow { color:var(--museum-wine); font-size:9px; letter-spacing:.28em; }
.section-dark .eyebrow,.section-future .eyebrow { color:var(--museum-brass-light); }
.section-heading p:last-child { max-width:760px; color:#625d55; }
.section-dark .section-heading p:last-child,.section-future .section-heading p:last-child { color:#a9aaa6; }

/* Exhibition furniture */
[data-exhibit="interactive"] { position:relative; }
[data-exhibit="interactive"]::before {
  content:"HANDS-ON EXHIBIT";
  position:absolute;
  z-index:5;
  top:-13px;
  right:22px;
  padding:6px 10px;
  background:var(--museum-brass);
  color:#171512;
  border:1px solid rgba(0,0,0,.16);
  font-size:7px;
  font-weight:900;
  letter-spacing:.16em;
}
.experience-panel { border-radius:0; background:#111216; border:1px solid rgba(201,168,106,.35); box-shadow:0 28px 75px rgba(0,0,0,.28),inset 0 0 60px rgba(201,168,106,.025); }
.experience-panel::after { content:""; position:absolute; left:8%; right:8%; bottom:-18px; height:18px; background:#27241f; transform:perspective(90px) rotateX(-16deg); box-shadow:0 15px 30px rgba(0,0,0,.24); }
.experience-label { color:var(--museum-brass-light); }
.body-selector,.segmented { border-radius:0; border:1px solid rgba(201,168,106,.2); }
.body-selector button,.segmented button { border-radius:0; }
.body-selector button.active,.segmented button.active { background:var(--museum-brass); }
.result-card { border-radius:0; }
.timeline { padding-top:44px; }
.timeline::before { background:rgba(80,67,50,.28); }
.timeline-item::before { border-color:#eae4d9; background:var(--museum-wine); box-shadow:0 0 0 2px var(--museum-wine),0 0 20px rgba(111,39,52,.25); }
.timeline-item strong { color:var(--museum-wine); }
.timeline-item h3 { font-family:Georgia,"Noto Serif KR",serif; font-weight:500; }

.filter-bar button { border-radius:0; background:rgba(255,255,255,.45); border-color:rgba(50,42,32,.22); }
.filter-bar button.active { background:#19191b; }
.diet-card-grid { gap:24px; }
.diet-card {
  min-height:355px;
  border-radius:0;
  border:8px solid #28231e;
  outline:1px solid rgba(201,168,106,.4);
  outline-offset:-4px;
  background:#ede6d9;
  box-shadow:0 18px 45px rgba(52,43,32,.16);
}
.diet-card::before { content:""; position:absolute; inset:10px; border:1px solid rgba(65,51,34,.15); pointer-events:none; }
.diet-card:hover { transform:translateY(-4px) scale(1.008); box-shadow:0 26px 60px rgba(40,30,20,.25); }
.diet-card .era-chip { border-radius:0; background:#d7cfbf; }
.diet-card .risk-chip { border-radius:0; }
.diet-card h3 { font-family:Georgia,"Noto Serif KR",serif; font-weight:500; }
.diet-card button { color:var(--museum-wine); }
.museum-dialog { border-radius:0; border:1px solid var(--museum-brass); background:#eee7da; }
.museum-dialog::backdrop { background:rgba(4,5,6,.87); }
.dialog-close { border-radius:0; background:#131416; }
.dialog-box { border-radius:0; background:#ddd4c5; border-left:3px solid var(--museum-brass); }

.failure-wheel { border-color:rgba(201,168,106,.28); }
.wheel-center { background:#8c3140; border:1px solid var(--museum-brass); }
.wheel-item { border-radius:0; background:rgba(8,8,10,.45); border-color:rgba(201,168,106,.25); }
.quiz-card,.calculator-card,.bmi-result,.chart-card,.person-card,.ethics-item,.reflection-form {
  border-radius:0;
  border:1px solid rgba(70,58,42,.28);
  box-shadow:0 20px 50px rgba(41,32,22,.16);
}
.quiz-card { border:10px solid #20191a; outline:1px solid rgba(201,168,106,.4); outline-offset:-5px; }
.quiz-options button { border-radius:0; }
.quiz-options button:hover { border-color:var(--museum-wine); background:#f6efe3; }
.bmi-gauge { filter:saturate(.75); }
.bmi-limit-grid article { border-radius:0; border-left:4px solid var(--museum-brass); }
.museum-note { border-radius:0; }
.person-card { background:rgba(255,255,255,.48); }
.same-sign span { border-radius:0; background:#1b1b1d; color:var(--museum-brass-light); }
.loss-track,.meter-track { border-radius:0!important; }
.sim-controls { border-radius:0; }
.chart-card { background:#f4eee3; }
.compare-controls select,.wide-select,.reflection-form select { border-radius:0; }
.compare-table { border-radius:0; box-shadow:0 20px 50px rgba(40,31,20,.14); }
.compare-row > * { border-color:rgba(64,52,37,.18); }
.compare-row.header { background:#1a1918; }
.medicine-step { border-radius:0; border-color:rgba(201,168,106,.25); background:rgba(8,11,10,.4); }
.medicine-step h3 { font-family:Georgia,"Noto Serif KR",serif; font-weight:500; }
.signal-lab { border-radius:0; border-color:rgba(201,168,106,.3); background:rgba(5,8,7,.46); }
.brain-node,.stomach-node { border-radius:50%; border:1px solid var(--museum-brass); }
.future-card { border-radius:0; border-color:rgba(201,168,106,.22); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); }
.future-card:hover { transform:translateY(-4px); border-color:var(--museum-brass); box-shadow:0 22px 55px rgba(0,0,0,.3); }
.future-icon,.console-screen,.future-controls { border-radius:0; }
.ethics-item { border-left:5px solid var(--museum-brass); background:rgba(255,255,255,.58); }
.ethics-options button { border-radius:0; }
.ethics-options button.selected { background:var(--museum-wine); }
.ethics-summary { border-radius:0; background:#161619; border:1px solid rgba(201,168,106,.36); }
#reflectionCanvas { border-radius:0; border:10px solid #27211c; outline:1px solid var(--museum-brass); outline-offset:-5px; }
.closing-question { border-color:rgba(89,71,48,.28); }
.closing-question p { font-family:Georgia,"Noto Serif KR",serif; font-weight:500; }
.site-footer {
  position:relative;
  z-index:20;
  align-items:flex-start;
  flex-wrap:wrap;
  border-top:1px solid rgba(201,168,106,.25);
  background:#07080a;
}
.site-footer > div:first-child { flex:1 1 460px; min-width:0; }
.site-footer > div:last-child { flex:0 1 430px; min-width:260px; }
.site-footer p { overflow-wrap:anywhere; }
.toast { border-radius:0; border:1px solid rgba(201,168,106,.35); }

/* Room reveal transitions */
.gallery .section-heading,
.gallery .timeline,
.gallery .diet-card-grid,
.gallery .failure-layout,
.gallery .bmi-layout,
.gallery .composition-demo,
.gallery .simulator-grid,
.gallery .compare-controls,
.gallery .compare-table,
.gallery .medicine-timeline,
.gallery .signal-lab,
.gallery .future-grid,
.gallery .future-console,
.gallery .ethics-list,
.gallery .reflection-layout {
  opacity:0;
  transform:translateY(34px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1);
}
.gallery.is-visible .section-heading,
.gallery.is-visible .timeline,
.gallery.is-visible .diet-card-grid,
.gallery.is-visible .failure-layout,
.gallery.is-visible .bmi-layout,
.gallery.is-visible .composition-demo,
.gallery.is-visible .simulator-grid,
.gallery.is-visible .compare-controls,
.gallery.is-visible .compare-table,
.gallery.is-visible .medicine-timeline,
.gallery.is-visible .signal-lab,
.gallery.is-visible .future-grid,
.gallery.is-visible .future-console,
.gallery.is-visible .ethics-list,
.gallery.is-visible .reflection-layout { opacity:1; transform:none; }
.gallery.is-visible .diet-card-grid,.gallery.is-visible .signal-lab,.gallery.is-visible .future-console { transition-delay:.12s; }

@media (max-width: 1180px) {
  .museum-status { display:none; }
  .tour-rail { right:8px; }
  .room-controls { right:8px; }
  .gallery { padding-right:80px; }
}
@media (max-width: 860px) {
  .site-header { background:rgba(8,9,11,.96); }
  .main-nav { background:rgba(8,9,11,.98); border-color:rgba(201,168,106,.2); }
  .main-nav a { color:#c4c0b7; }
  .tour-rail { display:none; }
  .room-controls { right:12px; bottom:12px; }
  .gallery { padding-right:20px; }
  .virtual-rotunda { width:min(82vw,560px); height:520px; }
  .map-floorplan { padding:28px; }
  .room-plaque { top:82px; left:18px; }
  .gallery { padding-top:105px; }
  .museum-entrance::before,.museum-entrance::after { width:8vw; min-width:24px; }
  .entrance-scene { width:86vw; }
}
@media (max-width: 580px) {
  :root { --header-height:68px; }
  .brand-mark { width:32px;height:32px; }
  .museum-entrance { background:radial-gradient(circle at 50% 20%,rgba(201,168,106,.13),transparent 32%),#08090b; }
  .entrance-ceiling { display:none; }
  .entrance-plaque h1 { font-size:38px; }
  .museum-doors { width:70vw; height:31vh; border-width:7px; border-bottom-width:0; }
  .entrance-guide { padding:0 20px; }
  .virtual-rotunda { height:430px; }
  .hero { padding-top:72px; }
  .map-floorplan { padding:18px; }
  .floorplan-corridor { margin-bottom:18px; }
  .room-plaque { width:52px; }
  .room-plaque strong { font-size:21px; }
  .ceiling-light { width:76vw; }
  [data-exhibit="interactive"]::before { right:10px; }
  .room-controls { transform:scale(.9); transform-origin:bottom right; }
}
@media (hover:none) {
  .museum-spotlight { display:none; }
}

/* Final proportion tuning */
@media (min-width: 861px) {
  .hero { grid-template-columns:minmax(0,1.15fr) minmax(400px,.85fr); gap:40px; }
  .hero h1 { font-size:clamp(50px,5.2vw,76px); }
  .virtual-rotunda { width:min(38vw,500px); }
}
.museum-entrance { transition-duration:.45s; }

@media (max-width: 580px) {
  .site-header { padding:0 10px; gap:5px; }
  .brand { min-width:0; flex:1 1 auto; gap:8px; }
  .brand-mark { width:29px; height:29px; font-size:13px; flex:0 0 auto; }
  .brand strong { font-size:12px; white-space:nowrap; }
  .header-actions { flex:0 0 auto; }
  .language-select { width:82px; max-width:82px; padding:8px 5px; font-size:12px; }
  .menu-toggle { flex:0 0 34px; width:34px; height:38px; padding:7px; }
}


/* =========================================================
   PAGE-BY-PAGE EXHIBITION NAVIGATION
   Each gallery behaves like an independent museum screen.
   ========================================================= */
html { scroll-behavior: auto; }
body.page-navigation-ready { overflow-x: hidden; }
body.page-navigation-ready .museum-pages > .museum-page {
  display: none !important;
}
body.page-navigation-ready .museum-pages > .museum-page.page-active {
  display: block !important;
  min-height: calc(100svh - 72px);
  animation: museum-page-enter .48s cubic-bezier(.2,.72,.2,1) both;
}
body.page-navigation-ready .museum-pages > .museum-page.page-active[hidden] {
  display: none !important;
}
.museum-page:focus { outline: none; }
@keyframes museum-page-enter {
  from { opacity: 0; transform: translateY(16px) scale(.995); }
  to { opacity: 1; transform: none; }
}
.room-controls span { min-width: 54px; }
.room-controls button:disabled { opacity: .35; cursor: not-allowed; }
.main-nav a.active { color: var(--museum-brass-light, #e8c985); }
.main-nav a.active::after { transform: scaleX(1); }

/* The route page is still allowed to scroll vertically when its exhibit is tall. */
.museum-pages { min-height: calc(100svh - 72px); }
.museum-page.page-active { overflow: clip visible; }

@media (prefers-reduced-motion: reduce) {
  body.page-navigation-ready .museum-pages > .museum-page.page-active { animation: none; }
}


/* =========================================================
   AI HEALTH-PLAN PROMPT LAB
   Browser-only questionnaire and copyable safety prompt.
   ========================================================= */
.section-ai {
  color:#eef2f0;
  background:
    radial-gradient(circle at 80% 15%,rgba(64,153,145,.22),transparent 30%),
    radial-gradient(circle at 12% 70%,rgba(201,168,106,.14),transparent 33%),
    linear-gradient(145deg,#071211 0%,#0e1717 45%,#111416 100%);
}
.section-ai::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; background-image:linear-gradient(rgba(201,168,106,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,106,.07) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.section-ai .section-heading { position:relative; z-index:1; }
.final-plaque { border-color:#62b6ad; }
.final-plaque strong,.ai-gallery-number { color:#7ad0c6; }
.ai-safety-banner { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1180px; margin:34px auto 26px; border:1px solid rgba(122,208,198,.26); background:rgba(122,208,198,.18); }
.ai-safety-banner > div { display:grid; grid-template-columns:38px 1fr; column-gap:12px; align-items:start; padding:20px; background:rgba(5,12,12,.82); }
.ai-safety-banner > div > span { grid-row:1/3; display:grid; place-items:center; width:34px;height:34px;border:1px solid #7ad0c6;color:#7ad0c6;font-weight:900; }
.ai-safety-banner strong { font-size:13px; }
.ai-safety-banner p { margin:5px 0 0;color:#9fb4b1;font-size:12px;line-height:1.55; }
.ai-prompt-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr); gap:24px; max-width:1320px; margin:0 auto; padding:1px; background:linear-gradient(135deg,rgba(122,208,198,.46),rgba(201,168,106,.22)); }
.prompt-workbench,.prompt-output-panel { background:rgba(8,15,15,.95); }
.prompt-workbench { padding:30px; }
.prompt-stepper { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:28px; border-bottom:1px solid rgba(122,208,198,.2); }
.prompt-stepper button { position:relative; display:flex; align-items:center; gap:9px; border:0; border-bottom:3px solid transparent; padding:12px 8px 15px; background:transparent;color:#78908d;text-align:left;font-size:11px;font-weight:800; }
.prompt-stepper button b { display:grid;place-items:center;width:25px;height:25px;border:1px solid currentColor;font-size:10px; }
.prompt-stepper button.active { color:#7ad0c6;border-bottom-color:#7ad0c6; }
.prompt-stepper button.completed { color:#d9bd80; }
.prompt-form-step { min-height:570px; }
.prompt-form-step[hidden] { display:none!important; }
.prompt-step-heading { display:flex; gap:18px; align-items:flex-start; margin:8px 0 25px; }
.prompt-step-heading > span { color:#7ad0c6;font-family:Georgia,serif;font-size:34px;line-height:1; }
.prompt-step-heading h3 { margin:0 0 7px;font-family:Georgia,"Noto Serif KR",serif;font-size:27px;font-weight:500; }
.prompt-step-heading p { margin:0;color:#91a6a3;font-size:13px; }
.prompt-fields { display:grid; gap:16px; }
.prompt-fields.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.prompt-fields label,.prompt-wide-field { display:block; }
.prompt-fields label > span,.prompt-wide-field > span,.prompt-choice-group legend { display:block;margin-bottom:8px;color:#aebfbc;font-size:11px;font-weight:800;letter-spacing:.02em; }
.prompt-fields input,.prompt-fields select,.prompt-wide-field textarea { width:100%; border:1px solid rgba(122,208,198,.23); border-radius:0; padding:13px 14px; background:#0c1817;color:#eef4f2;font:inherit; }
.prompt-fields input:focus,.prompt-fields select:focus,.prompt-wide-field textarea:focus { outline:2px solid rgba(122,208,198,.52);outline-offset:1px;border-color:#7ad0c6; }
.prompt-fields select option { background:#0c1817; }
.prompt-wide-field { margin-top:17px; }
.prompt-wide-field textarea { resize:vertical;min-height:74px; }
.prompt-choice-group { display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:18px;border:1px solid rgba(122,208,198,.2); }
.prompt-choice-group legend { padding:0 8px; }
.prompt-choice-group label { position:relative; }
.prompt-choice-group input { position:absolute;opacity:0;pointer-events:none; }
.prompt-choice-group label span { display:block;padding:10px 12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.025);color:#bccbc8;font-size:12px;cursor:pointer;transition:.2s; }
.prompt-choice-group input:checked + span { border-color:#7ad0c6;background:rgba(122,208,198,.14);color:#dffcf7;box-shadow:inset 3px 0 #7ad0c6; }
.safety-choices label span { max-width:285px; }
.prompt-consent { display:flex;gap:11px;align-items:flex-start;margin-top:22px;padding:16px;border-left:4px solid #d9bd80;background:rgba(217,189,128,.08);font-size:12px;line-height:1.6;color:#d7d0bf; }
.prompt-consent input { margin-top:4px;accent-color:#7ad0c6; }
.prompt-form-error { min-height:22px;margin-top:10px;color:#ff9885;font-size:12px;font-weight:800; }
.prompt-navigation { display:flex;align-items:center;gap:12px;margin-top:13px;padding-top:19px;border-top:1px solid rgba(122,208,198,.18); }
.prompt-step-count { margin-left:auto;color:#80928f;font-size:12px; }
.generate-prompt-button { background:#56b7aa!important; }
.prompt-output-panel { position:sticky;top:92px;align-self:start;padding:28px;min-height:760px;transition:box-shadow .3s ease,transform .3s ease; }
.prompt-output-panel.prompt-ready { box-shadow:0 0 0 2px rgba(122,208,198,.68),0 24px 70px rgba(0,0,0,.35); }
.prompt-output-panel.prompt-ready #generatedPrompt { border-color:#7ad0c6; }
.prompt-output-header { display:flex;justify-content:space-between;gap:12px;align-items:flex-start; }
.prompt-output-header h3 { margin:0;font-family:Georgia,"Noto Serif KR",serif;font-size:27px;font-weight:500; }
.prompt-language-badge { padding:7px 10px;border:1px solid rgba(122,208,198,.35);color:#7ad0c6;font-size:10px;font-weight:900;letter-spacing:.08em; }
.prompt-safety-status { margin:20px 0 14px;padding:15px 16px;border-left:4px solid #80928f;background:rgba(128,146,143,.08); }
.prompt-safety-status strong { display:block;margin-bottom:5px;font-size:13px; }
.prompt-safety-status p { margin:0;color:#9aadaa;font-size:12px;line-height:1.5; }
.prompt-safety-status.general { border-color:#6bc6a1;background:rgba(107,198,161,.09); }
.prompt-safety-status.caution { border-color:#e5b55b;background:rgba(229,181,91,.1); }
#generatedPrompt { width:100%;min-height:480px;resize:vertical;border:1px solid rgba(122,208,198,.25);border-radius:0;padding:17px;background:#06100f;color:#dce9e6;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
#generatedPrompt:focus { outline:2px solid rgba(122,208,198,.45); }
.prompt-output-actions { display:flex;gap:10px;margin-top:13px; }
.prompt-output-actions .button { flex:1; }
.prompt-copy-guide { color:#859895;font-size:11px;line-height:1.55; }
.prompt-guideline-note { position:relative;z-index:1;max-width:1180px;margin:30px auto 0;padding:24px;border-top:1px solid rgba(122,208,198,.22);border-bottom:1px solid rgba(122,208,198,.22);background:rgba(3,10,10,.48); }
.prompt-guideline-note h3 { margin:0 0 8px;font-family:Georgia,"Noto Serif KR",serif;font-weight:500; }
.prompt-guideline-note p { margin:0;color:#9bafac;line-height:1.7;font-size:13px; }
.prompt-source-links { display:flex;flex-wrap:wrap;gap:10px;margin-top:16px; }
.prompt-source-links a { border:1px solid rgba(201,168,106,.28);padding:8px 10px;color:#d9bd80;font-size:10px;font-weight:800; }
.closing-question .button { margin-top:18px; }

.gallery .ai-safety-banner,.gallery .ai-prompt-layout,.gallery .prompt-guideline-note { opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1); }
.gallery.is-visible .ai-safety-banner,.gallery.is-visible .ai-prompt-layout,.gallery.is-visible .prompt-guideline-note { opacity:1;transform:none; }
.gallery.is-visible .ai-prompt-layout { transition-delay:.1s; }

@media (max-width:1050px) {
  .ai-prompt-layout { grid-template-columns:1fr; }
  .prompt-output-panel { position:relative;top:auto;min-height:auto; }
}
@media (max-width:720px) {
  .ai-safety-banner { grid-template-columns:1fr; }
  .prompt-stepper { grid-template-columns:repeat(4,44px);justify-content:space-between; }
  .prompt-stepper button { justify-content:center; }
  .prompt-stepper button span { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
  .prompt-fields.two-columns { grid-template-columns:1fr; }
  .prompt-workbench,.prompt-output-panel { padding:20px; }
  .prompt-form-step { min-height:auto; }
  .prompt-navigation { flex-wrap:wrap; }
  .prompt-step-count { order:-1;width:100%;text-align:center;margin:0; }
  .prompt-output-actions { flex-direction:column; }
}

@media (max-width:860px) {
  .site-footer { padding-bottom:96px; }
  body.footer-visible .room-controls { display:none; }
}