/* ==========================================================
   한국사 : 한반도의 기적 — 스크롤 웹툰 뷰어 스타일
   ========================================================== */
:root {
  --bg: #0a0a0b;
  --ink: #1d1813;
  --paper: #f4eee2;
  --paper-2: #e9dfcb;
  --muted: #a39d93;
  --line: rgba(255, 255, 255, .12);
  --gold: #d9a441;
  --seal: #b8322a;
  --col: 760px;
  --f-story: "Gowun Batang", "Nanum Myeongjo", "Batang", serif;
  --f-talk: "Gowun Dodum", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --f-sfx: "Black Han Sans", "Malgun Gothic", sans-serif;
  --f-title: "Song Myung", "Gowun Batang", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: #eee8dc;
  font-family: var(--f-talk);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }

/* ---------- 분위기 조명 (현재 컷의 색이 뒤로 번짐) ---------- */
.ambient {
  position: fixed; inset: -10vh -10vw; z-index: -1;
  background-color: #10151d;
  transition: background-color 1.4s ease;
}
.ambient::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(10,10,11,.15) 0%, rgba(10,10,11,.82) 58%, #0a0a0b 80%);
}
@media (max-width: 820px) { .ambient::after { background: rgba(10,10,11,.55); } }

/* ---------- 상단 바 ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: linear-gradient(to bottom, rgba(8,8,9,.92), rgba(8,8,9,.72));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: transform .35s ease;
}
.topbar.hide { transform: translateY(-100%); }
.topbar .back {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 14px; color: #d8d1c4; padding: 6px 8px; border-radius: 8px;
}
.topbar .back:hover { background: rgba(255,255,255,.07); }
.topbar .ttl { flex: 1; min-width: 0; text-align: center; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .ttl b { font-family: var(--f-title); font-weight: 400; color: var(--gold); margin-right: 6px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.1); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.on { border-color: var(--gold); color: var(--gold); }
.icon-btn .x { display: inline; opacity: .8; }
.icon-btn .w { display: none; }
.icon-btn.on .x { display: none; }
.icon-btn.on .w { display: inline; }

/* ---------- 소리 메뉴 (상단 바) ---------- */
.snd { position: relative; flex: none; }
.sndpop {
  position: absolute; right: -4px; top: calc(100% + 10px); width: 264px; z-index: 5;
  background: rgba(20,19,17,.97); border: 1px solid #3b362f; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 14px 16px 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sndpop::before { content: ""; position: absolute; right: 16px; top: -7px; width: 12px; height: 12px; background: inherit; border-left: 1px solid #3b362f; border-top: 1px solid #3b362f; transform: rotate(45deg); }
.sndpop .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 14.5px; color: #eee6d6; }
.sndpop .row b { font-weight: 700; }
.sndpop .row.dim { opacity: .55; }
.sndpop .tip { margin: 10px 0 0; font-size: 12.5px; color: #9a9285; line-height: 1.55; word-break: keep-all; }
.sw {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 0; background: none; padding: 2px 0;
  font-size: 13.5px; color: #cfc6b6;
}
.sw i { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #3a3631; transition: background .2s; }
.sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #d8d0c2; transition: transform .2s, background .2s; }
.sw.on i { background: var(--gold); }
.sw.on i::after { transform: translateX(18px); background: #1b1307; }
.sw.on .lab { color: #ffe2a6; }
.vol { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #cfc6b6; }
.vol .vl { flex: none; }
.vol output { flex: none; width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: #eadfc8; }
.vol input[type=range] {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 28px; background: none; cursor: pointer;
  --p: 90%;
}
.vol input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--gold) 0 var(--p), #3a3631 var(--p) 100%);
}
.vol input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: #3a3631; }
.vol input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--gold); }
.vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #f5e6c4; border: 2px solid var(--gold); box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.vol input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #f5e6c4; border: 2px solid var(--gold); }
.vol input[type=range]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.vol.muted input[type=range] { --p: 0%; opacity: .75; }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ---------- 시간·장소 표시(HUD) ---------- */
.hud {
  position: fixed; z-index: 40; top: 64px; left: max(12px, calc(50% - var(--col)/2 - 190px));
  width: 170px; pointer-events: none;
  font-family: var(--f-story);
  transition: opacity .5s, transform .5s;
}
.hud.hidden { opacity: 0; transform: translateY(-8px); }
.hud .t { font-size: 20px; color: #fff; line-height: 1.25; text-shadow: 0 2px 10px #000; }
.hud .p { font-size: 13px; color: #cfc6b6; margin-top: 4px; text-shadow: 0 2px 8px #000; }
.hud .era { display: inline-block; font-family: var(--f-talk); font-size: 11px; letter-spacing: .08em; color: var(--gold); border: 1px solid rgba(217,164,65,.5); border-radius: 99px; padding: 1px 8px; margin-bottom: 6px; }
.hud .t.flip { animation: flip .6s ease; }
.hud.now .era { visibility: hidden; }
.hud.now .t { color: var(--gold); }
@keyframes flip { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
/* 좁은 화면: 떠 있는 표시 대신 컷 위 캡션 */
.stamp { display: none; }
@media (max-width: 1179px) {
  .hud { display: none !important; }
  .stamp { display: block; text-align: center; margin: 0 0 12px; padding: 0 6%; }
  .stamp span {
    display: inline-block; font-family: var(--f-story); font-size: 13.5px; color: #eadcc0; letter-spacing: .02em;
    padding: 3px 14px 4px; border-top: 1px solid rgba(217,164,65,.45); border-bottom: 1px solid rgba(217,164,65,.45);
  }
}
@media (max-width: 1180px) {
  .hud.peek-off { opacity: 0; transform: translateY(8px); }
  .hud { top: auto; bottom: 14px; left: 12px; width: auto; max-width: 70vw;
    background: rgba(8,8,9,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px 8px; }
  .hud .era { display: none; }
  .hud .t { font-size: 15px; }
  .hud .p { font-size: 12px; margin-top: 1px; }
}

/* ---------- 웹툰 기둥 ---------- */
.strip { width: 100%; max-width: var(--col); margin: 0 auto; padding-top: 52px; }

.cut { position: relative; margin: 0 0 6vh; }
.cut.tight { margin-bottom: 1.2vh; }
.cut.flush { margin-bottom: 0; }
.frame { position: relative; container-type: inline-size; overflow: hidden; background: #111; }
.frame.bleed { overflow: visible; }
.art { display: block; width: 100%; height: auto; }
.frame::after { /* 종이 질감 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/grain.png"); background-size: 220px;
  mix-blend-mode: overlay; opacity: .35;
}
.frame.clean::after { display: none; }
.ov { position: absolute; inset: 0; pointer-events: none; }
.ov > * { pointer-events: auto; }

/* 천천히 다가가는 카메라 */
.cut .art { transform-origin: 50% 50%; transition: transform 9s ease-out; transform: scale(1.06); }
.cut.seen .art { transform: scale(1); }
.cut.zoomin .art { transform: scale(1); }
.cut.zoomin.seen .art { transform: scale(1.07); }
.cut.still .art { transform: none; transition: none; }
.cut.shake.seen .frame { animation: shake .5s .5s ease; }
@keyframes shake {
  0%,100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); }
  60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); }
}

/* ---------- 내레이션 상자 ---------- */
.nar {
  position: absolute; max-width: 68%;
  margin: 0; padding: .7em .95em;
  font-family: var(--f-story); font-size: clamp(13px, 2.55cqw, 19px); line-height: 1.62;
  color: var(--ink); background: var(--paper);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08);
  border-radius: 2px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
  word-break: keep-all; text-wrap: pretty;
}
.nar.dark { background: rgba(10,10,12,.78); color: #f1eadc; box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12); }
.nar.clear { background: none; box-shadow: none; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.6); padding: 0; }
.nar.tl { top: 4%; left: 4%; }
.nar.tr { top: 4%; right: 4%; }
.nar.bl { bottom: 4%; left: 4%; }
.nar.br { bottom: 4%; right: 4%; }
.nar.tc { top: 4%; left: 50%; transform: translate(-50%, 12px); }
.nar.bc { bottom: 5%; left: 50%; transform: translate(-50%, 12px); }
.nar.mc { top: 50%; left: 50%; transform: translate(-50%, -40%); text-align: center; }
.nar.tc, .nar.bc, .nar.mc { width: max-content; }
.seen .nar { opacity: 1; transform: none; }
.seen .nar.tc, .seen .nar.bc { transform: translate(-50%, 0); }
.seen .nar.mc { transform: translate(-50%, -50%); }
.nar b, .tline b { color: #9a3b1d; font-weight: 700; }
.nar.dark b, .nar.clear b { color: #ffcf7a; }
.nar .who { display: block; font-family: var(--f-talk); font-size: .74em; letter-spacing: .06em; opacity: .7; margin-bottom: .1em; }
/* 내레이션 묶음: 넓은 화면에서는 그림 위에 겹치고, 좁은 화면에서는 그림 위아래로 뺀다 */
.nar-out { position: absolute; inset: 0; z-index: 3; pointer-events: none; container-type: inline-size; }
.nar-out > * { pointer-events: auto; }
@media (max-width: 540px) {
  .nar-out { position: static; display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
  .nar-out.top { padding-bottom: 10px; }
  .nar-out.bot { padding-top: 10px; }
  .nar-out .nar { position: static; max-width: 94% !important; font-size: 14.5px; transform: translateY(8px); }
  .nar-out .nar.tl, .nar-out .nar.bl { align-self: flex-start; }
  .nar-out .nar.tr, .nar-out .nar.br { align-self: flex-end; }
  .nar-out .nar.tc, .nar-out .nar.bc, .nar-out .nar.mc { align-self: center; text-align: center; }
  .seen .nar-out .nar { transform: none; }
  .nar-out .nar.clear { color: #f1eadc; }
}

/* ---------- 말풍선 ---------- */
.bub {
  position: absolute; max-width: 46%;
  padding: .55em .9em; border-radius: 1.3em;
  font-family: var(--f-talk); font-size: clamp(12px, 2.5cqw, 18.5px); line-height: 1.45;
  color: #111; background: #fff; border: 2px solid #111;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  opacity: 0; transform: scale(.6);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.6,.5,1);
  word-break: keep-all; text-align: center; text-wrap: balance;
}
.seen .bub { opacity: 1; transform: scale(1); }
.bub .who { display: block; font-size: .72em; color: #666; margin-bottom: -.1em; }
.bub::after, .bub::before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
/* 꼬리 방향: ur=말풍선이 기준점의 오른쪽 위 */
.bub.ur { transform-origin: 0 100%; }
.bub.ul { transform-origin: 100% 100%; }
.bub.dr { transform-origin: 0 0; }
.bub.dl { transform-origin: 100% 0; }
.bub.ur::before { left: 12%; bottom: -14px; border-width: 14px 12px 0 0; border-color: #111 transparent transparent transparent; }
.bub.ur::after  { left: calc(12% + 2.6px); bottom: -9.5px; border-width: 10px 8px 0 0; border-color: #fff transparent transparent transparent; }
.bub.ul::before { right: 12%; bottom: -14px; border-width: 14px 0 0 12px; border-color: #111 transparent transparent transparent; }
.bub.ul::after  { right: calc(12% + 2.6px); bottom: -9.5px; border-width: 10px 0 0 8px; border-color: #fff transparent transparent transparent; }
.bub.dr::before { left: 12%; top: -14px; border-width: 0 12px 14px 0; border-color: transparent transparent #111 transparent; }
.bub.dr::after  { left: calc(12% + 2.6px); top: -9.5px; border-width: 0 8px 10px 0; border-color: transparent transparent #fff transparent; }
.bub.dl::before { right: 12%; top: -14px; border-width: 0 0 14px 12px; border-color: transparent transparent #111 transparent; }
.bub.dl::after  { right: calc(12% + 2.6px); top: -9.5px; border-width: 0 0 10px 8px; border-color: transparent transparent #fff transparent; }
.bub.none::before, .bub.none::after { display: none; }
/* 속삭임 */
.bub.whisper { border-style: dashed; border-width: 2px; }
.bub.whisper::before { border-color: transparent; }
/* 외침 */
.bub.shout { border-radius: .35em; font-weight: 700; font-size: clamp(13px, 2.9cqw, 21px); background: #fff7d6; clip-path: none; }
.bub.shout::after { border-top-color: #fff7d6; border-bottom-color: #fff7d6; }
.bub.shout.dr::after, .bub.shout.dl::after { border-top-color: transparent; }
.bub.shout.ur::after, .bub.shout.ul::after { border-bottom-color: transparent; }
/* 신화 속 목소리 */
.bub.myth { background: #f3e6c4; border-color: #5a3a1c; color: #3a2410; font-family: var(--f-story); }
.bub.myth::before { border-top-color: #5a3a1c; }
.bub.myth::after { border-top-color: #f3e6c4; }
.bub.myth.dr::before, .bub.myth.dl::before { border-top-color: transparent; border-bottom-color: #5a3a1c; }
.bub.myth.dr::after, .bub.myth.dl::after { border-top-color: transparent; border-bottom-color: #f3e6c4; }
/* 생각 */
.bub.think { border-radius: 50%; padding: .9em 1.1em; }
.bub.think::before, .bub.think::after { display: none; }
/* 메아리: 지난날의 목소리가 희미하게 되살아난다 */
.bub.echo {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.4); color: #fff;
  font-family: var(--f-story); box-shadow: 0 0 26px rgba(255,255,255,.16); text-shadow: 0 1px 8px rgba(0,0,0,.75);
  transform: translateY(14px); transition: opacity 2.4s ease, transform 3s ease;
}
.bub.echo::before, .bub.echo::after { display: none; }
.bub.echo .who { color: rgba(255,255,255,.62); }
.seen .bub.echo { opacity: .9; transform: none; }

/* 여운: 감정이 큰 장면은 천천히 드러나고, 뒤에 숨 쉴 자리를 둔다 */
.cut.linger { margin-bottom: 14vh; }
.cut.linger .bub:not(.echo) { transition: opacity 1.3s ease, transform 1.3s ease; transform: scale(.94); }
.cut.linger.seen .bub:not(.echo) { transform: scale(1); }
.cut.linger .nar { transition-duration: 1.6s; }
.tcut.slow { padding: 20vh 8% 22vh; }
.tcut.slow .tline { transition-duration: 2.4s; }
.tcut.slow .tline + .tline { transition-delay: 1.1s; }

/* ---------- 효과음 ---------- */
.sfx {
  position: absolute; font-family: var(--f-sfx); line-height: 1; white-space: nowrap;
  font-size: calc(clamp(18px, 6cqw, 46px) * var(--sz, 1));
  color: var(--c, #fff);
  -webkit-text-stroke: calc(.07em) var(--s, #111); paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--s, #111), 0 0 .5em rgba(0,0,0,.35);
  transform: translate(-50%, -50%) rotate(var(--rot, -6deg)) scale(.2);
  opacity: 0;
  transition: transform .45s cubic-bezier(.25,1.8,.5,1), opacity .2s;
  transition-delay: var(--d, .25s);
  pointer-events: none;
}
.seen .sfx { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, -6deg)) scale(1); }
.sfx.soft { -webkit-text-stroke: 0; text-shadow: 0 2px 8px rgba(0,0,0,.8); font-family: var(--f-story); font-weight: 700; letter-spacing: .1em; }

/* ---------- 움직이는 컷 (효과툰) ----------
   그림 조각을 <g class="mv mv-종류">로 감싸 두면(kit/motion.py 의 mv), 컷이 화면에 들어오는 순간 움직인다.
   보이기 전에는 첫 모습으로 멈춰 있고(paused + fill both), 정지 모드·움직임 줄이기에서는 마지막 모습으로 보인다. */
.mv {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation-duration: var(--t, 1.2s); animation-delay: var(--d, 0s); animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1); animation-play-state: paused;
}
.seen .mv { animation-play-state: running; }
.mv-in-l { animation-name: mvInL; }
.mv-in-r { animation-name: mvInR; }
.mv-rise { animation-name: mvRise; }
.mv-drop { animation-name: mvDrop; animation-duration: var(--t, .9s); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
.mv-pop { animation-name: mvPop; animation-duration: var(--t, .8s); animation-timing-function: ease-out; }
.mv-fade { animation-name: mvFade; animation-duration: var(--t, 1.4s); animation-timing-function: ease; }
.mv-away { animation-name: mvAway; animation-duration: var(--t, 6s); animation-timing-function: cubic-bezier(.3,.1,.4,1); }
.mv-fall { animation-name: mvFall; animation-duration: var(--t, 1.1s); animation-timing-function: cubic-bezier(.55,0,.9,.45); }
.mv-swing { animation-name: mvSwing; animation-duration: var(--t, .6s); animation-timing-function: ease-out; }
.mv-gallop { animation-name: mvGallop; animation-duration: var(--t, 2.2s); animation-timing-function: linear; }
.mv-flash { animation-name: mvFlash; animation-timing-function: ease-out; }
.mv-burst { animation-name: mvBurst; animation-duration: var(--t, 1.4s); animation-timing-function: ease-out; }
.mv-glow { animation-name: mvFade; animation-duration: var(--t, 2.4s); animation-timing-function: ease-in-out; }
.mv-zoom { animation-name: mvZoom; animation-duration: var(--t, 8s); animation-timing-function: ease-out; }
.mv-shake { animation-name: mvShake; animation-duration: var(--t, .6s); animation-timing-function: linear; }
/* 계속 움직이는 종류 */
.mv-float, .mv-sway, .mv-bob, .mv-pulse, .mv-drift, .mv-spin { animation-iteration-count: infinite; animation-fill-mode: none; }
.mv-float { animation-name: mvFloat; animation-duration: var(--t, 4s); animation-timing-function: ease-in-out; }
.mv-sway { animation-name: mvSway; animation-duration: var(--t, 3s); animation-timing-function: ease-in-out; }
.mv-bob { animation-name: mvBob; animation-duration: var(--t, .55s); animation-timing-function: ease-in-out; }
.mv-pulse { animation-name: mvPulse; animation-duration: var(--t, 1.8s); animation-timing-function: ease-in-out; }
.mv-drift { animation-name: mvDrift; animation-duration: var(--t, 9s); animation-timing-function: ease-in-out; }
.mv-spin { animation-name: mvSpin; animation-duration: var(--t, 40s); animation-timing-function: linear; }
@keyframes mvInL { from { opacity: 0; transform: translateX(var(--dx, -140px)); } to { opacity: 1; transform: none; } }
@keyframes mvInR { from { opacity: 0; transform: translateX(var(--dx, 140px)); } to { opacity: 1; transform: none; } }
@keyframes mvRise { from { opacity: 0; transform: translateY(var(--dy, 60px)); } to { opacity: 1; transform: none; } }
@keyframes mvDrop { 0% { opacity: 0; transform: translateY(var(--dy, -90px)); } 70% { opacity: 1; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
@keyframes mvPop { 0% { opacity: 0; transform: scale(.35); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvAway { from { transform: none; } to { transform: translate(var(--dx, -160px), var(--dy, -30px)) scale(var(--s, .6)); } }
@keyframes mvFall { from { transform: rotate(0deg); } to { transform: rotate(var(--r, -72deg)); } }
@keyframes mvSwing { 0% { transform: rotate(var(--r, -50deg)); } 65% { transform: rotate(5deg); } 100% { transform: rotate(0deg); } }
@keyframes mvGallop {
  0% { opacity: 0; transform: translate(var(--dx, -220px), 0); } 12% { opacity: 1; }
  25% { transform: translate(calc(var(--dx, -220px) * .75), -9px); } 50% { transform: translate(calc(var(--dx, -220px) * .45), 0); }
  75% { transform: translate(calc(var(--dx, -220px) * .18), -7px); } 100% { opacity: 1; transform: none; }
}
@keyframes mvFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mvBurst { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(var(--s, 1.7)); } }
@keyframes mvZoom { from { transform: scale(1); } to { transform: scale(var(--s, 1.12)); } }
@keyframes mvShake { 0%, 100% { transform: none; } 15%, 55% { transform: translate(-4px, 2px); } 35%, 75% { transform: translate(4px, -2px); } }
@keyframes mvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--dy, -8px)); } }
@keyframes mvSway { 0%, 100% { transform: rotate(calc(var(--r, 4deg) * -1)); } 50% { transform: rotate(var(--r, 4deg)); } }
@keyframes mvBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--dy, -4px)); } }
@keyframes mvPulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes mvDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--dx, 30px)); } }
@keyframes mvSpin { to { transform: rotate(360deg); } }
/* 정지 모드·움직임 줄이기: 움직임 없이 마지막 모습 */
.static .mv { animation: none !important; }
.static .mv-fall { transform: rotate(var(--r, -72deg)); }
.static .mv-away { transform: translate(var(--dx, -160px), var(--dy, -30px)) scale(var(--s, .6)); }
.static .mv-zoom { transform: scale(var(--s, 1.12)); }
.static .mv-flash, .static .mv-burst { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .mv { animation: none !important; }
  .mv-fall { transform: rotate(var(--r, -72deg)); }
  .mv-away { transform: translate(var(--dx, -160px), var(--dy, -30px)) scale(var(--s, .6)); }
  .mv-zoom { transform: scale(var(--s, 1.12)); }
  .mv-flash, .mv-burst { opacity: 0; }
}

/* ---------- 장소 꼬리표 ---------- */
.place {
  position: absolute; left: 3%; bottom: 3%; font-size: clamp(10px, 1.9cqw, 13px);
  color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
  padding: .25em .7em; border-radius: 99px; backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 1s .4s;
}
.place::before { content: "📍 "; }
.seen .place { opacity: 1; }

/* ---------- 인물 이름표 ---------- */
.tag {
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
  padding: .26em .62em .3em; border-radius: 4px; border-left: 3px solid var(--gold, #c9a66b);
  background: rgba(12,10,8,.8); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-family: var(--f-talk); font-size: clamp(11px, 2.1cqw, 15px); line-height: 1.3; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, .9s);
  pointer-events: none;
}
.tag.r { align-items: flex-end; border-left: 0; border-right: 3px solid var(--gold, #c9a66b); }
.tag.c { align-items: center; }
.tag b { font-weight: 700; letter-spacing: .02em; }
.tag i { font-style: normal; font-size: .8em; opacity: .78; }
.seen .tag { opacity: 1; transform: none; }

/* ---------- 지난 이야기 · 등장인물 ---------- */
.recap { max-width: 600px; margin: 0 auto 7vh; padding: 0 6%; text-align: center; }
.recap .rk {
  display: inline-block; margin-bottom: 14px; padding: 3px 12px 3px 16px; border: 1px solid rgba(201,166,107,.5); border-radius: 99px;
  font-family: var(--f-talk); font-size: 12px; letter-spacing: .3em; color: var(--gold, #c9a66b);
}
.recap p { margin: 0; font-family: var(--f-story); font-size: clamp(15px, 2.3vw, 17.5px); line-height: 1.9; color: #d8d0c2; word-break: keep-all; text-wrap: balance; }
.recap p b { color: #ffd98a; font-weight: 700; }
.cast { max-width: var(--col); margin: 0 auto 8vh; padding: 0 4%; }
.cast h3 { margin: 0 0 14px; text-align: center; font-family: var(--f-talk); font-weight: 400; font-size: 12px; letter-spacing: .3em; color: var(--gold, #c9a66b); }
.castgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pc { flex: 0 0 calc((100% - 40px) / 5); margin: 0; overflow: hidden; border-radius: 12px; background: #16130f; border: 1px solid #2c2824; text-align: center; }
.pc .pa svg { display: block; width: 100%; height: auto; }
.pc figcaption { padding: 8px 6px 11px; word-break: keep-all; }
.pc b { display: block; font-family: var(--f-story); font-weight: 700; font-size: 16px; color: #fff; }
.pc span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #b8b0a2; }
/* 여섯 명이면 한 줄에 여섯 */
.castgrid:has(> .pc:nth-child(6)) > .pc { flex-basis: calc((100% - 50px) / 6); }
.castgrid:has(> .pc:nth-child(6)) .pc span { font-size: 12px; }
@media (max-width: 540px) {
  .castgrid { gap: 8px; }
  .pc, .castgrid:has(> .pc:nth-child(6)) > .pc { flex-basis: calc((100% - 16px) / 3); }
  /* 네 명이면 둘씩 두 줄 */
  .castgrid:has(> .pc:nth-child(4):last-child) > .pc { flex-basis: calc((100% - 8px) / 2); max-width: 150px; }
}

/* ---------- 글자만 있는 컷 ---------- */
.tcut {
  position: relative; padding: 14vh 8% 14vh; margin: 0 0 6vh;
  text-align: center; font-family: var(--f-story);
  font-size: clamp(18px, 3.6vw, 26px); line-height: 1.8; color: #efe7d8;
  word-break: keep-all;
}
.tcut.tight { padding: 6vh 8%; }
.tcut.onpaper { background: var(--paper); color: var(--ink); border-radius: 2px; }
.tcut .tline { margin: 0 0 1.4em; opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; text-wrap: balance; }
.tcut .tline:last-child { margin-bottom: 0; }
.tcut .tline.in { opacity: 1; transform: none; }
.tcut .tline.big { font-size: 1.55em; font-family: var(--f-title); color: #fff; line-height: 1.4; }
.tcut .tline.huge { font-size: 2.3em; font-family: var(--f-title); color: #fff; line-height: 1.25; }
.tcut .tline.small { font-size: .78em; color: #bdb4a4; }
.tcut .tline.quote { font-style: normal; color: #ffd98a; }
.tcut .tline.quote::before { content: "“"; } .tcut .tline.quote::after { content: "”"; }
.tcut.onpaper .tline.big, .tcut.onpaper .tline.huge { color: var(--ink); }

/* ---------- 이야기꾼의 서술 ---------- */
.prose {
  position: relative; margin: 0 0 7vh; padding: 1vh 9% 0;
  font-family: var(--f-story); font-size: clamp(16.5px, 2.35vw, 19px); line-height: 1.95;
  color: #e9e1d3; word-break: keep-all;
}
.prose p { margin: 0 0 1.15em; opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.prose p:last-child { margin-bottom: 0; }
.prose p.in { opacity: 1; transform: none; }
.prose b { color: #ffd98a; font-weight: 700; }
.prose em { font-style: normal; color: #f3c9a8; }
.prose .kicker { margin: 0 0 1.4em; text-align: center; }
.prose .kicker span {
  display: inline-block; font-family: var(--f-talk); font-size: 12.5px; letter-spacing: .28em; color: var(--gold);
  padding: 0 0 0 .28em;
}
.prose .kicker span::before, .prose .kicker span::after { content: ""; display: inline-block; vertical-align: middle; width: 34px; height: 1px; background: rgba(217,164,65,.55); margin: 0 12px; }
/* 잠시 오늘로: 종이 위에 적은 메모처럼 */
.prose.now {
  margin: 0 4% 7vh; padding: 26px 7% 28px;
  background: linear-gradient(180deg, rgba(246,240,227,.075), rgba(246,240,227,.035));
  border: 1px solid rgba(217,164,65,.22); border-radius: 6px;
  font-size: clamp(15.5px, 2.2vw, 17.5px); line-height: 1.9; color: #e4dccd;
}
.prose.now .kicker span { letter-spacing: .2em; }
.prose.now b { color: #ffcf7a; }

/* ---------- 실제 사진 ---------- */
.photo {
  margin: 0 4% 7vh; background: #151413; border: 1px solid #2c2925; border-radius: 6px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(24px) rotate(-.4deg); transition: opacity .9s, transform .9s;
}
.photo.in { opacity: 1; transform: rotate(-.4deg); }
.photo .ph { position: relative; background: #222 center/cover no-repeat; overflow: hidden; }
.photo .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo .badge {
  position: absolute; top: 12px; left: 12px; font-size: 12px; letter-spacing: .06em;
  background: var(--seal); color: #fff; padding: 3px 9px 4px; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.photo figcaption { padding: 14px 18px 16px; font-size: 15px; line-height: 1.6; color: #e8e0d2; word-break: keep-all; }
.photo figcaption strong { display: block; font-family: var(--f-story); font-size: 18px; color: #fff; margin-bottom: 2px; }
.photo .credit { display: block; margin-top: 8px; font-size: 11.5px; color: #8f887d; }
.photo .credit a { color: #b5ad9f; }
.photo .ph .fallback {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 20px;
  color: #bdb5a8; font-size: 14px; background: repeating-linear-gradient(45deg, #1e1d1b 0 12px, #232220 12px 24px);
}
.photo .ph.failed .fallback { display: grid; }

/* ---------- 여는 컷 (에피소드 표지) ---------- */
.opening { position: relative; margin: 0 0 8vh; }
.opening .frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
}
.opening .titlebox { position: absolute; z-index: 2; left: 0; right: 0; bottom: 7%; text-align: center; padding: 0 6%; }
.opening .epno {
  display: inline-block; font-family: var(--f-talk); font-size: clamp(12px, 2.1cqw, 15px); letter-spacing: .25em;
  color: #fff; background: var(--seal); padding: .25em .9em .3em 1.1em; border-radius: 2px; margin-bottom: .9em;
}
.opening h1 {
  margin: 0; font-family: var(--f-title); font-weight: 400; color: #fff;
  font-size: clamp(34px, 9cqw, 74px); line-height: 1.12; letter-spacing: .02em;
  text-shadow: 0 4px 30px rgba(0,0,0,.7);
  word-break: keep-all; text-wrap: balance;
}
.opening .sub { margin-top: .6em; font-family: var(--f-story); font-size: clamp(13px, 2.5cqw, 18px); color: #eadfca; text-shadow: 0 2px 10px #000; }
.opening .scrollhint { margin-top: 1.4em; font-size: 12px; letter-spacing: .2em; color: #d8cdb8; opacity: .8; animation: hint 2s ease-in-out infinite; }
@keyframes hint { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }

/* ---------- 소리 안내 ---------- */
.soundcard {
  margin: 0 5% 8vh; padding: 16px 18px; display: flex; gap: 16px 18px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.04);
  font-size: 14.5px; color: #d9d1c3;
}
.soundcard .txt { flex: 1 1 240px; }
.soundcard .ctl { flex: 1 1 220px; max-width: 320px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px) { .soundcard .ctl { max-width: none; } }
.soundcard .btn { justify-content: center; }
.soundcard.on .btn { background: rgba(255,255,255,.05); border-color: var(--line); color: #e8e0d2; font-weight: 400; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(217,164,65,.7);
  background: rgba(217,164,65,.14); color: #ffe2a6; font-size: 15px; font-weight: 700;
  transition: background .2s, transform .2s;
}
.btn:hover { background: rgba(217,164,65,.28); transform: translateY(-1px); }
.btn.solid { background: var(--gold); color: #1b1307; border-color: var(--gold); }
.btn.solid:hover { background: #e8b556; }
.btn.ghost { border-color: var(--line); background: rgba(255,255,255,.05); color: #e8e0d2; font-weight: 400; }

/* ---------- 시간 되감기 (1화 프롤로그) ---------- */
.rewind { position: relative; height: 380vh; margin: 0; }
.rewind .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.rewind canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rewind .center { position: relative; text-align: center; padding: 0 6%; }
.rewind .lead { font-family: var(--f-story); font-size: clamp(17px, 3.4vw, 24px); color: #e7dfd0; min-height: 1.8em; transition: opacity .5s; }
.rewind .year { font-family: var(--f-title); font-size: clamp(46px, 12vw, 108px); color: #fff; line-height: 1.1; margin: .15em 0; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(120,170,255,.35); }
.rewind .mile { font-family: var(--f-talk); font-size: clamp(13px, 2.4vw, 17px); color: var(--gold); letter-spacing: .1em; min-height: 1.5em; }
.rewind .hint { position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .25em; color: #bcb3a4; animation: hint 2s infinite; }

/* ---------- 에피소드 끝 ---------- */
.endblock { max-width: var(--col); margin: 0 auto; padding: 4vh 5% 10vh; }
.endmark { text-align: center; font-family: var(--f-title); font-size: 22px; color: #cfc6b6; margin: 4vh 0 7vh; letter-spacing: .3em; }
.endmark::before, .endmark::after { content: "— "; color: #5b554d; }
.endmark::after { content: " —"; }
.panel {
  background: #141312; border: 1px solid #2a2724; border-radius: 16px; padding: 22px 22px 20px; margin-bottom: 22px;
}
.panel h2 { margin: 0 0 14px; font-family: var(--f-title); font-weight: 400; font-size: 23px; color: #fff; display: flex; align-items: center; gap: 10px; }
.panel h2 .seal { font-family: var(--f-talk); font-size: 12px; background: var(--seal); color: #fff; padding: 2px 8px 3px; border-radius: 3px; letter-spacing: .1em; }
.keyspanel .epilogue { margin: 0 0 18px; font-family: var(--f-story); font-size: 16.5px; line-height: 1.9; color: #e4dccd; word-break: keep-all; }
.keyspanel .epilogue b { color: #ffd98a; }
.keys { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.keys li { padding: 12px 14px 13px; border-radius: 10px; background: #1b1916; border: 1px solid #2c2824; word-break: keep-all; }
.keys b { display: block; font-family: var(--f-story); font-size: 17px; color: #ffd98a; margin-bottom: 2px; }
.keys span { display: block; font-size: 14px; line-height: 1.6; color: #cfc6b6; }
/* 역사 노트: 이야기 속 장면의 바탕이 된 기록·유적 */
.notespanel .lead { margin: -6px 0 16px; font-size: 14px; color: #a39b8e; word-break: keep-all; }
.notes { margin: 0; padding: 0; list-style: none; counter-reset: nt; display: flex; flex-direction: column; gap: 12px; }
.note { counter-increment: nt; position: relative; background: #1b1916; border: 1px solid #2c2824; border-radius: 12px; overflow: hidden; word-break: keep-all; }
.note .nb { position: relative; padding: 14px 16px 15px 52px; }
.note .nb::before {
  content: counter(nt); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%;
  background: #3a2c1a; color: #ffd98a; font: 700 14px/26px var(--f-talk); text-align: center;
}
.note h3 { margin: 0 0 5px; font-family: var(--f-story); font-weight: 700; font-size: 17px; line-height: 1.5; color: #ffd98a; }
.note p { margin: 0; font-size: 15px; line-height: 1.75; color: #d8d0c2; }
.note p b { color: #fff; font-weight: 700; }
.note cite { display: block; margin-top: 7px; font-style: normal; font-size: 12.5px; color: #8d867b; }
.note .ph { position: relative; background: #222; aspect-ratio: 16/9; overflow: hidden; }
.note .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.note .ph .phc { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 11.5px; color: #fff; background: rgba(0,0,0,.6); padding: 2px 9px; border-radius: 99px; }
.note .ph .fallback { position: absolute; inset: 0; display: none; place-items: center; font-size: 13px; }
.note .ph .fallback a { color: #e9d3a6; }
.note .ph.failed .fallback { display: grid; }
.note .ph.failed img, .note .ph.failed .phc { display: none; }
@media (min-width: 600px) {
  .note.has-ph { display: grid; grid-template-columns: minmax(0, 1fr) 38%; }
  .note.has-ph .ph { order: 2; aspect-ratio: auto; min-height: 160px; height: 100%; }
}

.nextcard { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #3a342b; background: #16130f; margin-bottom: 22px; }
.nextcard .nart { position: relative; aspect-ratio: 16/8; overflow: hidden; background: #000; }
.nextcard .nart svg, .nextcard .nart img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nextcard .nbody { padding: 18px 20px 20px; }
.nextcard .label { font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.nextcard h3 { margin: 4px 0 6px; font-family: var(--f-title); font-weight: 400; font-size: 26px; color: #fff; }
.nextcard p { margin: 0 0 16px; color: #cfc6b6; font-family: var(--f-story); font-size: 15.5px; line-height: 1.7; word-break: keep-all; }
.nextcard .row { display: flex; gap: 10px; flex-wrap: wrap; }
.credits { font-size: 12.5px; color: #8d867b; line-height: 1.7; }
.credits h4 { margin: 0 0 6px; font-size: 13px; color: #b3ab9d; font-weight: 400; }
.credits ul { margin: 0; padding-left: 1.1em; }
.credits a { color: #aaa293; }
.disclaimer { margin-top: 14px; font-size: 12.5px; color: #7f796f; line-height: 1.7; }

/* ---------- 신화 컷 (한지 두루마리 느낌) ---------- */
.cut.myth .frame { background: #efe3c6; border-top: 6px solid #6b2a1a; border-bottom: 6px solid #6b2a1a; }
.cut.myth .nar { background: #3a2412; color: #f6e7c6; font-family: var(--f-story); }
.cut.myth .nar b { color: #ffd27a; }
.mythgate { text-align: center; margin: 0 0 6vh; padding: 8vh 8%; font-family: var(--f-title); color: #f3e3c0; }
.mythgate .k { font-size: clamp(28px, 6vw, 44px); letter-spacing: .1em; }
.mythgate .s { font-family: var(--f-story); color: #c9b894; margin-top: .6em; font-size: clamp(15px, 2.8vw, 19px); }
.mythgate .orn { width: 180px; height: 26px; margin: 0 auto 18px; opacity: .8; }

/* ---------- 여백 & 기타 ---------- */
.gap { height: 10vh; }
.gap.s { height: 4vh; }
.gap.l { height: 18vh; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 30px); z-index: 60; opacity: 0;
  background: rgba(20,19,17,.95); border: 1px solid #3b362f; border-radius: 12px; padding: 10px 16px; font-size: 14px; color: #eee;
  transition: opacity .3s, transform .3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .cut .art, .cut.seen .art { transform: none !important; transition: none; }
  .nar, .bub, .sfx, .tag, .tcut .tline, .prose p, .photo { transition: none !important; }
  .cut.shake.seen .frame { animation: none; }
}

/* ==========================================================
   목록(표지) 페이지
   ========================================================== */
.home .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.home .hero .bgart { position: absolute; inset: 0; }
.home .hero .bgart svg { width: 100%; height: 100%; display: block; }
.home .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,8,10,.82) 0%, rgba(8,8,10,.4) 36%, rgba(8,8,10,0) 54%, rgba(8,8,10,0) 84%, #0a0a0b 100%); }
.home .hero .inner { position: relative; z-index: 2; width: 100%; max-width: 980px; margin: 0 auto; padding: 11vh 6% 0; }
@media (max-width: 720px) {
  .home .hero { min-height: auto; }
  .home .hero .bgart { position: relative; inset: auto; aspect-ratio: 4 / 3; order: 2; }
  .home .hero::after { display: none; }
  .home .hero .inner { order: 1; padding: 8vh 6% 3vh; }
}
.home .kicker { display: inline-block; font-size: 13px; letter-spacing: .3em; color: #fff; background: var(--seal); padding: 4px 12px 5px 14px; border-radius: 2px; }
.home .logo { margin: 18px 0 10px; font-family: var(--f-title); font-weight: 400; font-size: clamp(52px, 12vw, 128px); line-height: 1; color: #fff; letter-spacing: .01em; text-shadow: 0 6px 40px rgba(0,0,0,.55); }
.home .logo .series { display: block; font-size: .4em; letter-spacing: .08em; color: #ffd98a; margin-bottom: .2em; }
.home .logo small { display: block; font-size: .24em; letter-spacing: .04em; color: #efdcb2; margin-top: .55em; word-break: keep-all; line-height: 1.4; }
.home .tagline { font-family: var(--f-story); font-size: clamp(16px, 2.6vw, 21px); color: #e9e1d2; max-width: 34em; line-height: 1.75; word-break: keep-all; }
.home .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.home main { max-width: 980px; margin: 0 auto; padding: 4vh 5% 12vh; }
.home .howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 8vh; }
.home .howto div { background: #141312; border: 1px solid #25221f; border-radius: 14px; padding: 18px; font-size: 14.5px; color: #cfc7b9; line-height: 1.65; word-break: keep-all; }
.home .howto b { display: block; font-family: var(--f-story); font-size: 17px; color: #fff; margin-bottom: 4px; }
@media (max-width: 720px) { .home .howto { grid-template-columns: 1fr; } }
.era-group { margin: 0 0 7vh; }
.era-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #2a2724; }
.era-head h2 { margin: 0; font-family: var(--f-title); font-weight: 400; font-size: clamp(24px, 4vw, 32px); color: #fff; }
.era-head span { color: #9c9486; font-size: 14px; }
.eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ep {
  position: relative; display: block; text-decoration: none; background: #141312; border: 1px solid #2a2724; border-radius: 14px; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
a.ep:hover { transform: translateY(-3px); border-color: #5b4a2c; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.ep .th { aspect-ratio: 16/9; background: #0e0e0f; overflow: hidden; position: relative; }
.ep .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
a.ep:hover .th img { transform: scale(1.04); }
.ep .body { padding: 13px 16px 16px; }
.ep .no { font-size: 12px; letter-spacing: .12em; color: var(--gold); }
.ep h3 { margin: 3px 0 5px; font-family: var(--f-title); font-weight: 400; font-size: 21px; color: #fff; line-height: 1.3; }
.ep p { margin: 0; font-size: 13.5px; color: #aaa294; line-height: 1.6; word-break: keep-all; }
.ep .meta { margin-top: 8px; font-size: 12px; color: #7f786d; }
.ep.locked { opacity: .55; }
.ep.locked .th { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #121212 0 14px, #161616 14px 28px); }
.ep.locked .th span { font-size: 13px; letter-spacing: .15em; color: #8a8378; border: 1px solid #3a3530; padding: 6px 12px; border-radius: 99px; }
.ep .readmark { position: absolute; top: 10px; right: 10px; font-size: 11.5px; background: rgba(0,0,0,.7); color: #ffd98a; padding: 3px 8px; border-radius: 99px; border: 1px solid rgba(217,164,65,.5); }
.eps.compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.ep.compact { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; opacity: .72; }
.ep.compact .body { padding: 0; }
.ep.compact h3 { font-size: 17px; margin: 2px 0 3px; }
.ep.compact p { font-size: 12.5px; }
.ep.compact .tag { flex: none; margin-top: 2px; font-size: 11px; color: #8a8378; border: 1px solid #3a3530; border-radius: 99px; padding: 2px 8px; }
.foot { max-width: 980px; margin: 0 auto; padding: 5vh 5% 8vh; border-top: 1px solid #1f1d1b; color: #7f786d; font-size: 13px; line-height: 1.8; }

/* ---------- 등장인물 이름표 ---------- */
.nametag {
  position: absolute; transform: translate(-50%, 0); text-align: center; width: 32%;
  opacity: 0; transition: opacity .8s ease .3s, transform .8s ease .3s;
}
.seen .nametag { opacity: 1; transform: translate(-50%, -6px); }
.nametag b { display: block; font-family: var(--f-title); font-weight: 400; font-size: clamp(18px, 4.4cqw, 30px); color: #fff; line-height: 1.2; }
.nametag span { display: block; font-size: clamp(9.5px, 2cqw, 14px); color: #e2c9a6; line-height: 1.35; word-break: keep-all; white-space: nowrap; }

/* 스크린샷·인쇄용 정지 모드 (?static) */
.static .nar, .static .bub, .static .sfx, .static .tline, .static .prose p, .static .photo, .static .place, .static .nametag, .static .tag { transition: none !important; }

/* 회차 목록: 시대별로 접고 펼치기 */
details.era-group > summary { list-style: none; cursor: pointer; }
details.era-group > summary::-webkit-details-marker { display: none; }
details.era-group > summary::marker { content: ""; }
.era-head em { margin-left: auto; font-style: normal; font-size: 13px; color: #8a8378; white-space: nowrap; }
.era-head::after { content: "▾"; flex: none; color: #8a8378; font-size: 15px; transition: transform .3s; }
details.era-group:not([open]) > .era-head::after { transform: rotate(-90deg); }
details.era-group:not([open]) { margin-bottom: 2.6vh; }
.era-head:hover h2, .era-head:focus-visible h2 { color: var(--gold); }
@media (max-width: 560px) {
  .era-head { flex-wrap: wrap; gap: 4px 12px; }
  .era-head em { margin-left: 0; width: 100%; order: 3; }
}

/* ==========================================================
   해설: 그림을 화면에 붙잡아 두고, 짧은 글이 한 장씩 지나간다
   (긴 설명 글 대신 — 그림을 보면서 읽도록)
   ========================================================== */
.cut.has-explain { margin-bottom: 4vh; }
.cut.has-explain .pin { position: sticky; top: var(--pin-top, 0px); z-index: 1; }
.cam { position: relative; transform-origin: 0 0; transition: transform 1.25s cubic-bezier(.45,.05,.25,1); }
.beats { position: relative; z-index: 4; padding: 12vh 0 14vh; pointer-events: none; }
.beat { min-height: 58vh; padding: 0 5%; }
.beat p {
  pointer-events: auto; position: sticky; top: 64vh; margin: 0 auto; max-width: 31em;
  padding: .95em 1.2em 1em; border-radius: 12px;
  background: rgba(14,12,10,.9); border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  color: #f4ede0; font-family: var(--f-story); font-size: clamp(16px, 2.3vw, 19px); line-height: 1.78;
  word-break: keep-all;
  opacity: .28; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
}
.beat p::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); opacity: .8; }
.beat.on p { opacity: 1; transform: none; }
.beat.past p { opacity: 0; transform: translateY(-10px); }
.beat p b { color: #ffcf7a; font-weight: 700; }
.beat cite { display: block; margin-top: .45em; font-style: normal; font-family: var(--f-talk); font-size: .7em; letter-spacing: .02em; color: #a59c8c; }
.cut.explaining .ov, .cut.explaining .nar-out { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.cut .ov, .cut .nar-out { transition: opacity .45s ease; }

/* 그림 위 동그라미 표시 */
.marks { position: absolute; inset: 0; pointer-events: none; }
.mark { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .45s ease; transform: scale(calc(1 / var(--cs, 1))); }
.mark::before {
  content: ""; position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%;
  border: 3px solid #ffd27a; box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 26px rgba(255,210,122,.7);
  animation: markpulse 1.5s ease-in-out infinite;
}
.mark span {
  position: absolute; left: 38px; top: -15px; white-space: nowrap;
  background: #ffd27a; color: #2a1a08; font-family: var(--f-talk); font-size: 14px; font-weight: 700;
  padding: 3px 9px 4px; border-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.mark.l span { left: auto; right: 38px; }
.mark.on { opacity: 1; }
@keyframes markpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.13); } }

/* 해설만 있는 대목 (지도·그림·실제 사진) */
.explain .frame { background: #0e0d0c; }
.explain .tags { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 6px; }
.explain .tags span { font-size: 12.5px; letter-spacing: .08em; padding: 3px 10px 4px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.explain .tags .kick { background: #d9a441; color: #1d1305; font-weight: 700; letter-spacing: .16em; }
.explain .tags .badge { background: var(--seal); color: #fff; }
.explain .ph { position: relative; background: #222; overflow: hidden; width: 100%; max-height: var(--ph-max, 80vh); }
.explain .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.explain .phcap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 14px 9px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.78));
  font-size: 11.5px; color: #cfc6b6; line-height: 1.45;
}
.explain .phcap b { display: block; font-family: var(--f-story); font-weight: 700; font-size: 15px; color: #fff; }
.explain .phcap a { color: #e9d3a6; }
.explain .fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; color: #bbb; font-size: 14px; }
.explain .ph.broken .fallback { display: grid; }

/* 노트북·태블릿: 그림 크기를 화면에 맞추고, 글상자는 그림 바로 아래에 멈춰 서게 (JS가 --fit-w, --card-top 계산) */
@media (min-width: 541px) and (max-width: 1359px) {
  .cut.has-explain .pin { width: var(--fit-w, auto); margin-inline: auto; }
  .beat p { top: var(--card-top, 64vh); }
}
/* 넓은 화면: 글을 그림 오른쪽 여백으로 빼서 그림을 가리지 않게 */
@media (min-width: 1360px) {
  .beats { padding-top: 18vh; }
  .beat { padding: 0; }
  .beat p { top: 34vh; margin-left: calc(100% + 26px); width: min(300px, calc((100vw - var(--col)) / 2 - 48px)); max-width: none; font-size: 17px; }
}
@media (max-width: 540px) {
  .beats { padding-top: 16vh; }
  .beat { min-height: 52vh; padding: 0 14px; }
  .beat p { top: var(--card-top, 63vh); }
  .beat p { font-size: 16px; padding: .85em 1.05em .9em; }
  .mark::before { left: -22px; top: -22px; width: 44px; height: 44px; }
  .mark span { left: 28px; top: -13px; font-size: 12.5px; }
  .mark.l span { right: 28px; }
}
@media (prefers-reduced-motion: reduce) { .cam { transition: none; } .mark::before { animation: none; } }

/* 검수·인쇄용 정지 모드: 그림 아래에 해설을 차례로 */
.static .cut.has-explain .pin { position: relative; top: 0 !important; }
.static .beats { padding: 12px 0 0; }
.static .beat { min-height: 0; margin-bottom: 10px; }
.static .beat p { position: relative; top: 0; opacity: 1; transform: none; margin: 0 auto; width: auto; max-width: 34em; }


/* ---------- 광고 칸 (ads.js 가 광고 단위 번호를 찾았을 때만 보인다) ---------- */
.adslot { max-width: var(--col); margin: 56px auto; padding: 0 16px; text-align: center; }
.adslot .adlab { font-size: 11px; letter-spacing: .25em; color: #6f685d; margin-bottom: 8px; }
.adslot ins.adsbygoogle { min-height: 100px; }
.adslot:has(ins[data-ad-status="unfilled"]) { display: none; }

/* ---------- 바닥글 (사이트 이름 + 소개·개인정보처리방침·문의) ---------- */
.sitefoot { max-width: 980px; margin: 0 auto; padding: 26px 20px 44px; border-top: 1px solid #1f1d1b; color: #7f786d; font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.sitefoot b { color: #a89f8f; font-weight: 400; font-family: var(--f-title); font-size: 15px; letter-spacing: .02em; }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sitefoot a { color: #a89f8f; text-decoration: none; }
.sitefoot a:hover, .sitefoot a:focus-visible { color: #ffd98a; text-decoration: underline; }

/* ---------- 안내 페이지 (소개 · 개인정보처리방침) ---------- */
.docbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; height: 52px; padding: 0 16px;
  background: rgba(10,10,11,.92); border-bottom: 1px solid #1f1d1b; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.docbar a { color: #e9dfcc; text-decoration: none; font-family: var(--f-title); font-size: 16px; }
.doc { max-width: var(--col); margin: 0 auto; padding: 6vh 20px 8vh; color: #e2dacb; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.doc h1 { font-family: var(--f-title); font-weight: 400; font-size: clamp(32px, 6vw, 46px); color: #fff; margin: 0 0 .3em; }
.doc .meta { color: #8a8273; font-size: 14px; margin: 0 0 1.8em; }
.doc .lead { font-family: var(--f-story); font-size: 17px; color: #efe6d6; }
.doc h2 { font-size: 18px; color: #ffd98a; margin: 2.2em 0 .5em; font-weight: 700; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: .4em 0; }
.doc a { color: #ffd98a; }
.doc .btn { margin: .4em .3em .4em 0; }