/* 웹툰형 결과 페이지 — 컷(cut) 단위 세로 스크롤. 텍스트는 실제 텍스트(선택·복사·확대 가능). */
:root{--wt-max:560px;--wt-fs:17px;--wt-lh:1.8}
body[data-font="large"]{--wt-fs:19px;--wt-lh:1.8}   /* M19: 본문 17px·1.8, 크게 19px */
.wt{max-width:var(--wt-max);margin:0 auto;padding:0 14px 96px;font-size:var(--wt-fs);line-height:var(--wt-lh)}
.wt-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 6px}
.wt-top .btn{padding:10px 14px;font-size:14px}
.wt-top .grow{flex:1}
.fs-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.fs-toggle button{border:0;background:transparent;padding:8px 12px;font:inherit;font-size:13px;color:var(--muted,#777);cursor:pointer}
.fs-toggle button.on{background:var(--accent,#7c5cff);color:#fff}
/* 명식 요약 카드 */
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0}
.chart-card h3{margin:0 0 10px;font-size:1em}
.dm{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dm b{font-size:1.5em;color:var(--gold,#c9a35a)}
.dm small{color:var(--muted,#777);display:block;font-size:.8em}
.pill4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.pill4 div{text-align:center;background:var(--bg-2,#f6f4fb);border-radius:12px;padding:8px 4px}
.pill4 small{display:block;font-size:.7em;color:var(--muted,#777)}
.pill4 b{font-size:1.1em;color:var(--text)}
.pill4 span{display:block;font-size:.72em;color:var(--accent,#7c5cff)}
.ratio{display:grid;gap:5px;margin-top:10px}
.ratio div{display:grid;grid-template-columns:2.4em 1fr 3em;align-items:center;gap:8px;font-size:.85em}
.ratio i{display:block;height:9px;background:var(--bg-2,#eee);border-radius:6px;overflow:hidden}
.ratio i b{display:block;height:100%;background:var(--accent,#7c5cff)}
.ratio .e-목 b{background:#4f9a6a}.ratio .e-화 b{background:#d46a5c}.ratio .e-토 b{background:#c9a35a}.ratio .e-금 b{background:#8c94a6}.ratio .e-수 b{background:#4f74b3}
.daeun{display:flex;gap:6px;overflow-x:auto;padding:6px 0 2px;scrollbar-width:none}
.daeun div{flex:0 0 auto;min-width:64px;text-align:center;border:1px solid var(--line);border-radius:12px;padding:8px 6px;font-size:.8em}
.daeun div.now{border-color:var(--gold);background:var(--card-2);color:var(--gold)}
.daeun b{display:block;font-size:1.15em}
.daeun small{color:var(--muted,#777)}
/* 에피소드(장) */
.ep{margin:26px 0 0}
.ep-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.ep-head .no{font-size:.8em;color:var(--gold,#c9a35a);letter-spacing:.08em}
.ep-head h2{margin:0;font-size:1.25em;line-height:1.35}
.cut{margin:0 0 14px}
/* 말풍선 컷 */
.cut.speech{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:end}
.cut.speech .avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--bg-2,#eee);border:2px solid var(--line)}
.cut.speech .bubble{position:relative;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:14px 16px}
.cut.speech .bubble::before{content:"";position:absolute;left:-8px;bottom:14px;border:8px solid transparent;border-right-color:var(--line);border-left:0}
.cut.speech .who{display:block;font-size:.72em;color:var(--accent,#7c5cff);margin-bottom:4px}
.cut.speech.q .bubble{background:var(--card-2);border-color:transparent}
/* 패널 컷(그림 파일이 있을 때): 4:5 그림 위 상단 30% 여백에 말풍선. 아바타는 숨김 */
.cut.speech.panel{display:block;position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--bg-2,#eee)}
.cut.speech.panel .panel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cut.speech.panel .avatar{display:none}
.cut.speech.panel .bubble{position:absolute;left:12px;right:12px;top:10px;max-height:27%;overflow:auto;font-size:15px;line-height:1.45;padding:10px 14px;border-radius:18px 18px 18px 6px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 4px 18px rgba(0,0,0,.12)}
.cut.speech.panel .bubble::before{display:none}
/* 근거 컷 */
.cut.evidence{color:var(--text);background:linear-gradient(135deg,var(--bg-2),var(--card));border:1px solid var(--line);border-left:4px solid var(--gold,#c9a35a);border-radius:14px;padding:14px 16px}
.cut.evidence .tag{font-size:.72em;color:var(--gold,#c9a35a);letter-spacing:.06em;display:block;margin-bottom:6px}
.cut.evidence .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cut.evidence .chips span{font-size:.75em;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.cut.evidence mark{background:transparent;color:var(--accent,#7c5cff);font-weight:700}
/* 나레이션 */
.cut.narr{padding:2px 4px;white-space:pre-wrap;word-break:keep-all}
/* 진행 화면 */
.progress{color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:14px}
.progress .bar{height:10px;background:var(--bg-2,#eee);border-radius:6px;overflow:hidden;margin:12px 0}
.progress .bar b{display:block;height:100%;background:var(--accent,#7c5cff);transition:width .6s}
.progress ol{margin:0;padding-left:1.2em;font-size:.9em;color:var(--muted,#777)}
.progress li.st-done{color:var(--text,#222)}
.progress .stages{margin-top:6px;line-height:1.7}.progress .stages li{opacity:.55;transition:opacity .4s}.progress .stages li.st-done{opacity:1}.progress .stage{display:inline-block;min-height:1.4em}
.wt-bottom{position:sticky;bottom:12px;display:flex;gap:8px;padding:10px 0;background:linear-gradient(transparent,var(--bg,#fff) 30%)}
.wt-bottom .btn{flex:1}
@media (max-width:380px){.cut.speech{grid-template-columns:56px 1fr}.cut.speech .avatar{width:56px;height:56px}}

/* M11 저장·공유 */
.share-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share-bar.bottom{width:100%;margin-top:10px}
.free-badge{display:inline-block;font-size:.72em;font-weight:700;color:#191919;background:#ffd66b;border-radius:999px;padding:4px 10px;letter-spacing:.02em}
.inapp-hint{width:100%;margin-top:4px}
.chapter-save{margin:6px 0 2px auto;display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);color:var(--text);border-radius:22px 22px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px;max-height:86vh;overflow:auto}
.sheet h3{margin:0 0 4px}.sheet h4{margin:8px 0 0}.sheet hr{border:0;border-top:1px solid var(--line);margin:8px 0}.sheet .row{display:flex;gap:8px;flex-wrap:wrap}.sheet .btn{width:100%}.sheet .row .btn{flex:1}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#191919;color:#fff;padding:10px 16px;border-radius:999px;font-size:.9em;opacity:0;transition:.25s;z-index:70;pointer-events:none}.toast.on{opacity:1;transform:translateX(-50%)}
.img-overlay{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.92);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}.img-overlay.on{display:flex}.img-overlay img{max-width:92vw;max-height:74vh;border-radius:14px}.img-overlay .sub{color:#fff}
.share-card .hl{margin:14px 0 8px;font-size:1.15em;line-height:1.6;font-weight:700}
.share-cta{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.share-cta .btn{width:100%}

.progress .sub{text-align:left}
/* M18 로딩 단계 체크리스트 — 왼쪽 정렬, 줄 간격 12px. 완료 ✓ / 진행 중 점멸 / 대기 흐리게 */
.progress .stages.check{list-style:none;padding:0;margin:14px 0 0;text-align:left;display:flex;flex-direction:column;align-items:stretch;gap:12px;line-height:1.35;font-size:15px;width:100%}
.progress .stages.check li{display:flex;width:100%;justify-content:flex-start;align-items:center;gap:10px;opacity:.45;transition:opacity .4s;text-align:left}
.progress .stages.check li i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;box-sizing:border-box}
.progress .stages.check li.now{opacity:1;color:var(--text)}
.progress .stages.check li.now i{border-color:var(--accent,#FF4D3D);background:var(--accent,#FF4D3D);animation:stage-blink 1s ease-in-out infinite}
.progress .stages.check li.st-done{opacity:.9;color:var(--text)}
.progress .stages.check li.st-done i{border-color:var(--gold,#E9B949);background:var(--gold,#E9B949);color:#000}
.progress .stages.check li.st-done i::before{content:"✓";font-weight:900}
@keyframes stage-blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ── M19 웹툰 리듬 ── */
#chapters .cut{margin:16px 0}                                  /* 카드 사이 여백 16px */
.cut.narr.card-p,.cut.key,.cut.speech.say .bubble>div,.ep-sum{max-width:34em}
.cut.narr.card-p{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;white-space:normal;word-break:keep-all;font-size:var(--wt-fs);line-height:var(--wt-lh)}
.cut.narr.card-p mark,.cut.key mark,.cut.speech.say mark{background:transparent;color:var(--accent,#FF4D3D);font-weight:700}
.cut.key{margin:16px 0;padding:16px 18px 16px 20px;border-radius:16px;border:1px solid rgba(233,185,73,.45);border-left:4px solid var(--gold,#E9B949);background:linear-gradient(135deg,rgba(233,185,73,.14),rgba(233,185,73,.04));color:var(--text);font-weight:700;font-size:calc(var(--wt-fs) + 1px);line-height:1.7;word-break:keep-all;quotes:none}
.cut.key::before{content:"이 장의 한 문장";display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gold,#E9B949);margin-bottom:6px}
.cut.key mark{color:var(--gold,#E9B949)}
.cut.speech.say .bubble>div{font-size:var(--wt-fs);line-height:var(--wt-lh);word-break:keep-all}
.ep-head{margin-bottom:6px}
.ep-sum{margin:0 0 4px;font-size:15px;line-height:1.5;color:var(--muted,#9a9a9a)}
.ep-sum span{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;background:var(--card-2,#1c1c1c);color:var(--gold,#E9B949);font-size:12px;font-weight:700;vertical-align:1px}
/* 시작 컷(큰 그림 1개) */
.cut.speech.panel.lead{aspect-ratio:4/5}
.lead-chart{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(120% 80% at 50% 30%,#2a1e10,#0c0c0c 70%);color:#fff;padding:22% 16px 16px}
.lead-chart small{color:var(--gold,#E9B949);font-size:13px;letter-spacing:.1em}
.lead-chart .dm{font-size:44px;font-weight:900;letter-spacing:.04em;color:var(--gold,#E9B949)}
.lead-chart .p4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:320px}
.lead-chart .p4 div{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid rgba(233,185,73,.35);border-radius:12px;padding:10px 0;background:rgba(255,255,255,.04)}
.lead-chart .p4 span{font-size:12px;color:#aaa}.lead-chart .p4 b{font-size:20px}
/* 질문 — 그림 없는 작은 카드 */
.cut.speech.q.mini{grid-template-columns:48px 1fr;align-items:center}
.cut.speech.q.mini .avatar{width:48px;height:48px}
.cut.speech.q.mini .bubble{font-weight:700}
/* 장 구분: 도장 + 진행 */
.ep-sep{display:flex;align-items:center;justify-content:center;gap:10px;margin:34px 0 6px;color:var(--muted,#9a9a9a);font-size:14px;font-weight:700;letter-spacing:.06em}
.ep-sep::before,.ep-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.ep-sep .stamp{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--gold,#E9B949);background:var(--card)}
/* 목차 알약 — 헤더 아래 고정, 가로 스크롤 */
.ep-toc{position:sticky;top:56px;z-index:30;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:8px -14px 0;padding:10px 14px;background:color-mix(in srgb,var(--bg,#000) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ep-toc::-webkit-scrollbar{display:none}
.ep-toc button{flex:0 0 auto;min-width:44px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ep-toc button.on{background:var(--accent,#FF4D3D);border-color:transparent;color:#fff}
.ep{scroll-margin-top:118px}
/* 한마디 결과 — 가운데 큰 카드 */
.ol-answer{text-align:center}
.ol-answer .ol-q{margin:8px auto 14px;max-width:26em;color:var(--muted,#9a9a9a);font-size:16px}
.ol-answer .ol-q::before{content:"Q. ";color:var(--gold,#E9B949);font-weight:800}
.ol-card{position:relative;margin:0 auto;max-width:420px;padding:28px 22px 26px;border-radius:24px;background:linear-gradient(160deg,#1d1710,#111);border:1px solid rgba(233,185,73,.35);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.ol-card .ol-av{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--gold,#E9B949);display:block;margin:0 auto 8px}
.ol-card .who{display:block;color:var(--gold,#E9B949);font-size:14px;font-weight:800;margin-bottom:10px}
.ol-card .ans{margin:0;font-size:20px;line-height:1.65;font-weight:700;word-break:keep-all;color:#fff}
.ol-upsell{display:flex;align-items:center;gap:12px;margin:18px auto 0;max-width:420px;padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line);color:var(--text);text-decoration:none}
.ol-upsell .t{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:2px}
.ol-upsell b{font-size:16px}.ol-upsell small{font-size:13px;color:var(--muted,#9a9a9a)}
.ol-upsell .go{flex:0 0 auto;font-weight:800;color:var(--accent,#FF4D3D);white-space:nowrap}

/* ── M23 잼컨 결과 카드(report.jam) — 카드 4장 + 한 줄 평. 글자 16px 이상. ── */
.jam-result{display:flex;flex-direction:column;gap:16px;max-width:480px;margin:0 auto}
.jam-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 20px}
.jam-card .no{position:absolute;top:14px;right:16px;font-size:16px;color:var(--dim)}
.jam-card h2{font-size:18px;margin:0 0 12px;padding-right:56px}
.jam-card.t-hero{text-align:center;border-color:rgba(233,185,73,.5);background:linear-gradient(180deg,rgba(233,185,73,.12),transparent 70%),var(--card)}
.jam-card.t-hero h2{padding:0}
.jam-card .big{font-size:44px;font-weight:900;color:#E9B949;line-height:1.2;margin:6px 0 8px}
.jam-card p{font-size:17px;line-height:1.7;margin:0}
.jbar{display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 48px;gap:10px;align-items:center;font-size:16px;margin:10px 0}
.jbar i{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.jbar i b{display:block;height:100%;border-radius:999px;background:#E9B949}
.jbar em{font-style:normal;text-align:right;color:var(--muted)}
.jrank{list-style:none;margin:0;padding:0}
.jrank li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:17px}
.jrank li:first-child{border-top:0}
.jrank .rk{flex:0 0 32px;height:32px;border-radius:50%;background:rgba(233,185,73,.18);color:#E9B949;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.jrank .lb{flex:1;min-width:0}.jrank .lb b{display:block}.jrank .lb small{display:block;font-size:16px;color:var(--muted)}
.jrank strong{color:#E9B949;font-size:18px}
.jtable{margin:0}.jtable div{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.jtable div:first-child{border-top:0}
.jtable dt{flex:0 0 108px;font-size:16px;color:var(--muted)}.jtable dd{margin:0;flex:1;font-size:17px}.jtable dd b{display:block}.jtable dd small{display:block;font-size:16px;color:var(--muted)}
.jam-one{font-size:18px;line-height:1.6;text-align:center;color:var(--text);margin:4px 8px 0;font-weight:700}