/* 어린이 성경 플레이어 — 밝은 카드형 UI */
:root{
  --bg:#faf6ee;--surface:#fff;--surface2:#f4eee2;--line:#ebe2d0;
  --ink:#1f1a14;--sub:#6b604f;--muted:#a3977f;
  --pri:#f2a33a;--pri-ink:#3a2405;--pri-soft:#fff1d9;
  --brick:#d0573b;--olive:#6b8f47;--tan:#a0612d;
  --r-lg:24px;--r-md:16px;--r-sm:12px;
  --sh-1:0 1px 2px rgba(60,40,10,.06),0 2px 8px rgba(60,40,10,.06);
  --sh-2:0 8px 30px rgba(60,40,10,.12);
  --side:320px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:"Pretendard","Noto Sans CJK KR","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  display:flex;flex-direction:column;overflow:hidden;letter-spacing:-.01em}
.serif{font-family:inherit}
button{font-family:inherit;cursor:pointer;transition:transform .12s,background .2s,box-shadow .2s}
button:active{transform:scale(.96)}
button:focus-visible,a:focus-visible{outline:3px solid var(--pri);outline-offset:2px}

/* 상단 바 */
header{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:6}
header h1{font-size:17px;margin:0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
header h1 small{font-weight:500;color:var(--muted);margin-left:8px;font-size:13px}
header .sp{flex:1}
.tbtn{background:var(--surface2);color:var(--sub);border:0;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;white-space:nowrap}
.tbtn.icon{width:40px;height:40px;padding:0;font-size:18px;color:var(--ink)}
.tbtn[aria-pressed=true]{background:var(--pri-soft);color:var(--pri-ink);box-shadow:inset 0 0 0 2px var(--pri)}
.tbtn.icon[aria-pressed=true]{background:var(--surface2);box-shadow:none}

.layout{flex:1 1 auto;display:flex;min-height:0;position:relative}

/* 왼쪽 목록 */
aside{flex:0 0 var(--side);width:var(--side);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;transition:margin-left .3s cubic-bezier(.2,.8,.2,1)}
body.hide-side aside{margin-left:calc(-1 * var(--side));visibility:hidden;transition:margin-left .3s,visibility 0s .3s}
body.preload aside{transition:none}
.card{background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1)}
.ctag{display:inline-block;font-size:12px;font-weight:800;color:var(--olive);background:#eef4e6;border-radius:999px;padding:3px 10px}
aside h2{font-size:18px;margin:6px 0 10px;font-weight:800}
.eras{display:flex;gap:3px;height:10px}
.eras div{height:100%;border-radius:999px}
.eralbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:6px 0 10px}
.forest{font-size:13.5px;line-height:1.7;margin:0;color:var(--sub);word-break:keep-all}
.forest b{color:var(--ink)}
.prog{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12px;color:var(--muted);font-weight:700}
.pbar{flex:1;height:6px;background:var(--surface2);border-radius:999px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--olive);border-radius:999px}
.grp{font-size:13px;font-weight:800;margin:14px 0 6px;display:flex;align-items:center;gap:6px;border:0}
.grp::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.eps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.eps li{font-size:14px;padding:8px 10px;border-radius:var(--r-sm);display:flex;gap:10px;align-items:center}
.eps li b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--surface2);color:var(--sub);font-size:12px;display:grid;place-items:center}
.eps li .t{flex:1;min-width:0;word-break:keep-all}
.eps li.soon{color:var(--muted)}
.eps li .y{font-size:12px;opacity:.6}
.eps li.live{background:var(--pri-soft);font-weight:800;cursor:pointer}
.eps li.live b{background:var(--pri);color:var(--pri-ink)}
.eps li .badge{font-size:11px;font-weight:800;color:#fff;background:var(--brick);border-radius:999px;padding:2px 8px}
.eps li.toc{display:block;padding:2px 0 8px 18px}
.eps li.toc ol{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--line)}
.eps li.toc a{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;font-size:13px;color:var(--sub);text-decoration:none;cursor:pointer}
.eps li.toc a em{font-style:normal;font-size:11px;color:var(--muted);min-width:14px}
.eps li.toc a:hover{background:var(--surface2)}
.eps li.toc a.on{background:var(--ink);color:#fff;font-weight:800}
.eps li.toc a.on em{color:#fff}
.credit{font-size:12px;color:var(--muted);margin:4px 0;text-align:center}
.scrim{display:none;position:absolute;inset:0;z-index:4;background:rgba(40,25,10,.3);backdrop-filter:blur(2px)}

/* 무대 */
main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:0 12px}
.shead{flex:0 0 auto;width:100%;max-width:880px;padding:12px 4px 2px;display:flex;align-items:center;gap:10px}
.shead[hidden],body.intro .shead{display:none}
.shead .yr{background:var(--surface);color:var(--sub);font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:var(--sh-1)}
.shead h2{margin:0;font-size:clamp(18px,2.6vw,24px);font-weight:800;word-break:keep-all}
.stage{position:relative;width:100%;flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px 0 0}
.frame{position:relative;height:100%;max-width:100%;max-height:100%;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:var(--surface2);box-shadow:var(--sh-2)}
.track{display:flex;height:100%;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.slide{flex:0 0 100%;height:100%;position:relative;overflow:hidden;visibility:hidden}
.slide.vis{visibility:visible}
.slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.slide.on img{animation:kb 30s ease-out forwards}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1.5%)}}
@media (prefers-reduced-motion:reduce){.slide.on img{animation:none}.track{transition:none}}

/* 시작 화면: 그림 위 */
.start{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:28px;
  background:linear-gradient(180deg,rgba(20,12,4,0) 35%,rgba(20,12,4,.78) 100%);color:#fff;text-align:left}
body:not(.intro) .start{display:none}
.start .kicker{background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-weight:800;font-size:13px;padding:5px 12px;border-radius:999px}
.start .big{font-size:clamp(28px,4.6vw,46px);font-weight:900;line-height:1.15;letter-spacing:-.02em}
.start .years{font-size:clamp(15px,2vw,18px);font-weight:700;color:#ffd38a}
.start .sub{font-size:14px;color:rgba(255,255,255,.85)}
.start button{margin-top:8px;background:var(--pri);color:var(--pri-ink);border:0;border-radius:999px;padding:14px 28px;font-size:18px;font-weight:900;box-shadow:0 8px 24px rgba(242,163,58,.45)}
.start button:hover{box-shadow:0 10px 30px rgba(242,163,58,.6)}

/* 그림 위 자막 */
.cc{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:90%;background:rgba(20,14,8,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:clamp(15px,2.3vw,20px);line-height:1.45;font-weight:700;padding:8px 16px;border-radius:14px;text-align:center;word-break:keep-all;pointer-events:none;z-index:3}
.cc[hidden],body.cc-off .cc,body.intro .cc{display:none}

/* 마무리 슬라이드(말씀·퀴즈·역사) */
.html-slide{background:var(--bg);color:var(--ink);overflow-y:auto;padding:22px;word-break:keep-all}
.html-slide h2{margin:0 0 14px;font-size:22px;font-weight:900}
.verse{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;background:linear-gradient(160deg,#fff7e6,#f3e6cc)}
.verse .lbl{background:var(--olive);color:#fff;font-weight:800;padding:5px 14px;border-radius:999px;font-size:14px}
.verse blockquote{margin:0;font-family:"Noto Serif CJK KR","Noto Serif KR",serif;font-size:clamp(22px,3.6vw,34px);line-height:1.5;font-weight:800;max-width:88%}
.verse cite{font-style:normal;color:var(--tan);font-weight:700}
.q{margin:0 0 12px;padding:16px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.q p{margin:0 0 12px;font-weight:800;font-size:16px;line-height:1.45}
.q .opts{display:flex;flex-wrap:wrap;gap:8px}
.q .opts button{flex:1 1 30%;min-width:90px;min-height:52px;padding:10px;font-size:16px;border:2px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-weight:700}
.q .opts button:hover:not(:disabled){border-color:var(--pri);background:var(--pri-soft)}
.q.ox .opts button{font-size:28px}
.q button.ok{background:#e3f3df;border-color:#4f9a45}
.q button.no{background:#fbe3dc;border-color:var(--brick)}
.q button:disabled{cursor:default}
.q button:disabled:not(.ok):not(.no){opacity:.55}
.q .picked{min-height:44px;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:8px;background:var(--surface2);border-radius:var(--r-sm);font-size:14px}
.q .picked:empty::before{content:"아래에서 차례대로 눌러 보세요";color:var(--muted);font-size:13px;align-self:center;padding-left:4px}
.q .picked span{background:var(--pri);color:var(--pri-ink);border-radius:999px;padding:5px 12px;font-weight:800}
.q .fb{font-size:14px;font-weight:700;margin-top:10px;line-height:1.5}
.q .fb:empty{display:none}
.q .fb.good{color:#3f8a36}.q .fb.bad{color:var(--brick)}
.score{font-weight:900;font-size:18px;text-align:center;padding:12px}
.score:not(:empty){background:var(--pri-soft);border-radius:var(--r-md)}
.score .stars{font-size:38px;letter-spacing:6px}
.hsec{margin:0 0 10px;padding:14px 16px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.hsec h3{margin:0 0 6px;font-size:15px;color:var(--brick);font-weight:800}
.hsec p{margin:0;font-size:15px;line-height:1.7;color:#3b3328}
.routes{display:flex;flex-wrap:wrap;gap:6px}
.routes span{background:#eef4e6;color:#3f5e26;border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:700}
details{font-size:13px;color:var(--sub);padding:4px 6px}
details summary{cursor:pointer;font-weight:700}
.again{display:block;margin:14px auto 4px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:12px 24px;font-size:16px;font-weight:800}

/* 자막 상자 */
.sub-box{flex:0 0 auto;width:100%;max-width:880px;margin-top:10px;padding:12px 16px;font-size:clamp(15px,2.1vw,18px);line-height:1.75;max-height:8.5em;overflow-y:auto;
  color:var(--muted);word-break:keep-all;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.sub-box .now{color:var(--ink);font-weight:800}
body.cc-off .sub-box,body.intro .sub-box,body.endslide .sub-box{display:none}

/* 조작 도크 */
.ctrl{width:100%;max-width:880px;display:flex;align-items:center;gap:12px;margin:10px 0 14px;padding:8px 16px 8px 8px;background:var(--surface);border-radius:999px;box-shadow:var(--sh-2)}
.btns{display:flex;align-items:center;gap:4px}
.ctrl .main{background:var(--pri);color:var(--pri-ink);border:0;border-radius:50%;width:56px;height:56px;font-size:22px;font-weight:900;box-shadow:0 6px 16px rgba(242,163,58,.4)}
.ctrl .nav{background:transparent;color:var(--sub);border:0;border-radius:50%;width:46px;height:46px;font-size:18px}
.ctrl .nav:hover{background:var(--surface2)}
.bar{flex:1 1 auto;display:flex;gap:4px;align-items:center;min-width:0}
.bar span{flex:1;height:8px;border-radius:999px;background:var(--surface2);cursor:pointer;position:relative;overflow:hidden}
.bar span.done{background:var(--pri)}
.bar span i{position:absolute;left:0;top:0;bottom:0;background:var(--pri);width:0;border-radius:999px}
.bar span.end{background:#e6eedc}.bar span.end.done{background:var(--olive)}
.count{font-size:13px;color:var(--muted);font-weight:700;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* 태블릿 이하: 목록은 서랍 */
@media (max-width:900px){
  aside{position:absolute;z-index:5;top:0;bottom:0;left:0;background:var(--bg);box-shadow:var(--sh-2);border-radius:0 var(--r-lg) var(--r-lg) 0}
  body.hide-side aside{margin-left:calc(-1 * var(--side) - 40px)}
  body:not(.hide-side) .scrim{display:block}
}
/* 휴대폰 */
@media (max-width:600px){
  header{padding:8px 10px;gap:6px}
  header h1{font-size:15px}
  header h1 small{display:none}
  .tbtn{padding:7px 10px;font-size:13px}
  main{overflow-y:auto;padding:0 10px}
  .stage{flex:0 0 auto;padding-top:8px}
  .frame{width:100%;height:auto}
  .start{padding:18px}
  .sub-box{max-height:none}
  .ctrl{position:sticky;bottom:10px;margin-top:auto}
  .html-slide{padding:14px}
  body.endslide main{overflow:hidden}
  body.endslide .stage{flex:1 1 0;min-height:0}
  body.endslide .frame{aspect-ratio:auto;height:100%}
}
/* 퀴즈: 한 문제씩 */
#quiz{display:flex;flex-direction:column}#quiz>.qdone{margin:auto 0}
.qhead{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:800;color:var(--sub);font-size:14px}
.qdots{flex:1;display:flex;gap:6px}
.qdots i{flex:1;height:8px;border-radius:999px;background:var(--surface2)}
.qdots i.done{background:var(--olive)}.qdots i.cur{background:var(--pri)}
#quiz .q{padding:22px}
#quiz .q p{font-size:clamp(18px,2.6vw,22px);margin-bottom:18px}
#quiz .q .opts{flex-direction:column}
#quiz .q.ox .opts,#quiz .q.order .opts{flex-direction:row}
#quiz .q .opts button{min-height:60px;font-size:18px}
#quiz .q.ox .opts button{min-height:90px;font-size:40px}
.q .fb{font-size:15px}
.qnext{display:block;width:100%;margin-top:12px;background:var(--pri);color:var(--pri-ink);border:0;border-radius:999px;padding:14px;font-size:17px;font-weight:900;box-shadow:0 6px 16px rgba(242,163,58,.35)}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.qdone{text-align:center;background:var(--surface);border-radius:var(--r-lg);padding:28px 20px;box-shadow:var(--sh-1)}
.qdone .stars{font-size:46px;letter-spacing:6px}
.qdone h2{margin:8px 0}.qdone p{color:var(--sub);font-size:16px}
.qbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.qbtns .again,.qbtns .qnext{margin:8px 0 0;width:auto;padding:12px 24px}
.ctrl .nav:disabled{opacity:.3;cursor:default}
/* 아이콘 */
.ic{width:20px;height:20px;flex:0 0 auto;display:block}
.tbtn{display:inline-flex;align-items:center;gap:6px;color:#4b3521}
.tbtn.icon{display:inline-grid;place-items:center}
.tbtn.icon .ic{width:22px;height:22px}
.ctrl .nav,.ctrl .main{display:grid;place-items:center;color:#4b3521}
.ctrl .nav .ic{width:22px;height:22px}
.ctrl .main .ic{width:26px;height:26px}
.ctrl .main{color:var(--pri-ink)}
.start button{display:inline-flex;align-items:center;gap:8px}
.start button .ic{width:22px;height:22px}