/* 오가는 마음 — 「우리 반 대화방」 모양. 화면은 ch-, 인쇄는 #printroot .pr-ch- 로 시작한다.
   대화방은 메신저처럼 보이되 스튜디오 말투(가는 진한 선, 옅은 판)로: 남의 말은 흰 말풍선, 내 말은 노랑 */
:root{ --ch-feed:#EEF2F5; --ch-me:#FFE58A; --ch-me-ink:#3A2F12; --ch-bub:#FFFFFF }
@media (prefers-color-scheme:dark){ :root{ --ch-feed:#1E2226; --ch-me:#5A4A1E; --ch-me-ink:#FFF3C9; --ch-bub:#2B2926 } }
.ch-ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}

/* ---------- 휴대 전화 ---------- */
.ch-phone{position:relative;width:100%;max-width:360px;margin:0 auto;background:var(--surface);border:2px solid var(--inkk);border-radius:30px;box-shadow:6px 6px 0 rgba(46,42,38,.12),var(--shadow);overflow:hidden;display:flex;flex-direction:column}
@media (prefers-color-scheme:dark){ .ch-phone{border-color:#6E6A63} }
.ch-top{display:flex;align-items:center;gap:8px;padding:16px 16px 10px;border-bottom:1px solid var(--rule);background:var(--surface)}
.ch-top::before{content:"";position:absolute;left:50%;top:6px;width:54px;height:5px;border-radius:9px;background:var(--rule);transform:translateX(-50%)}
.ch-top b{font-size:.98em} .ch-top small{color:var(--faint);font-family:var(--mono);font-size:.78em}
.ch-back{font-size:1.4em;line-height:1;color:var(--muted)}
.ch-feed{display:flex;flex-direction:column-reverse;overflow-y:auto;height:420px;background:var(--ch-feed);overscroll-behavior:contain}
.ch-in{display:flex;flex-direction:column;gap:9px;padding:14px 12px 16px}
.ch-msg{display:flex;align-items:flex-end;gap:7px;max-width:100%}
.ch-msg.me{flex-direction:row-reverse}
.ch-av{flex:none;align-self:flex-start;width:34px;height:34px;display:grid;place-items:center}
.ch-av.anon{border-radius:50%;background:#E9E2D3;border:2px solid var(--inkk);font-family:var(--cute);color:var(--inkk)}
.ch-body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:78%}
.ch-msg.me .ch-body{align-items:flex-end}
.ch-nick{font-size:.78em;color:var(--muted);margin-left:2px}
.ch-bub{background:var(--ch-bub);border:1.5px solid var(--rule);border-radius:4px 16px 16px 16px;padding:8px 12px;line-height:1.5;font-size:.98em;overflow-wrap:anywhere}
.ch-msg.me .ch-bub{background:var(--ch-me);color:var(--ch-me-ink);border-color:#E3C55E;border-radius:16px 4px 16px 16px}
.ch-bub.stk{background:transparent;border:0;padding:0}
.ch-bub.pic{padding:4px;border-radius:12px}
.ch-pic svg{width:190px;height:auto;border-radius:9px;display:block}
.ch-stk{display:inline-flex;flex-wrap:wrap;gap:2px;vertical-align:middle;margin-left:4px}
.ch-stk .mood{width:30px;height:30px}
.ch-meta{font-family:var(--mono);font-size:.7em;color:var(--faint)}
.ch-meta.spread{color:var(--seal);font-weight:600}
.ch-msg time{flex:none;font-size:.66em;color:var(--faint);white-space:nowrap;padding-bottom:3px}
.ch-sys{align-self:center;max-width:92%;text-align:center;font-size:.8em;color:var(--muted);background:rgba(46,42,38,.07);border-radius:999px;padding:4px 12px}
@media (prefers-color-scheme:dark){ .ch-sys{background:rgba(255,255,255,.07)} }
.ch-cancel{font-style:italic;color:var(--faint);border:1px dashed var(--rule);background:transparent}
.ch-slip .ch-bub{opacity:.85}
/* 찾기 — 누를 수 있는 말, 찾은 말 */
.ch-tap{cursor:pointer}
.ch-tap .ch-bub,.ch-sys.ch-tap{transition:box-shadow .15s,transform .15s}
.ch-tap:hover .ch-bub,.ch-sys.ch-tap:hover{box-shadow:0 0 0 3px var(--sky-soft)}
.ch-found .ch-bub,.ch-sys.ch-found{box-shadow:0 0 0 3px var(--seal);border-color:var(--seal)}
.ch-found .ch-body::after,.ch-sys.ch-found::after{content:"문제!";font-family:var(--cute);font-size:.82em;color:#fff;background:var(--seal);border-radius:999px;padding:0 9px;margin-top:2px}
.ch-sys.ch-found::after{margin-left:8px}
/* 입력 막대 */
.ch-bar{display:flex;align-items:center;gap:8px;padding:10px 12px 14px;border-top:1px solid var(--rule);background:var(--surface)}
.ch-bar input{flex:1;min-width:0;border:1.5px solid var(--rule);border-radius:999px;padding:9px 14px;background:var(--paper);font-size:1em}
.ch-bar input:focus{outline:none;border-color:var(--sky)}
.ch-draft{flex:1;min-width:0;border:1.5px solid var(--rule);border-radius:18px;padding:8px 14px;background:var(--paper);line-height:1.6}
.ch-draft.find{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.ch-draft mark{background:var(--pink-soft);color:var(--pink);border-radius:4px;padding:0 3px;text-decoration:line-through;text-decoration-thickness:2px}
.ch-tok{border:1.5px dashed var(--blue-mid);background:var(--surface);border-radius:8px;padding:2px 7px;margin:2px 0;font-size:1em;cursor:pointer}
.ch-tok:hover{border-style:solid}
.ch-tok.bad{border:1.5px solid var(--seal);background:var(--seal-soft);color:var(--seal)}
.ch-sendic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ch-me);color:var(--ch-me-ink);font-size:.9em}
/* 차례로 나타나기 — --d 초 뒤에. 남의 말 앞에는 「…」 */
.ch-msg.new,.ch-sys.new,.ch-cm.new,.ch-after.new,.ch-res.new{animation:chin .38s ease-out var(--d,0s) both}
@keyframes chin{from{opacity:0;max-height:0;transform:translateY(10px)}to{opacity:1;max-height:440px;transform:none}}
.ch-typing{display:none}
html:not(.calm) .ch-typing{display:flex;gap:4px;align-self:flex-start;margin-left:41px;padding:9px 12px;background:var(--ch-bub);border:1.5px solid var(--rule);border-radius:4px 14px 14px 14px;overflow:hidden;animation:tshow .6s linear var(--t,0s) both}
.ch-typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:tdot .9s infinite}
.ch-typing i:nth-child(2){animation-delay:.15s} .ch-typing i:nth-child(3){animation-delay:.3s}
@keyframes tshow{0%{opacity:0;max-height:0;padding-block:0}3%{opacity:1;max-height:44px;padding-block:9px}95%{opacity:1;max-height:44px;padding-block:9px}100%{opacity:0;max-height:0;padding-block:0;margin:0;border-width:0}}
@keyframes tdot{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}}
/* 게시판 — 이름 대신 별명, 줄마다 조회 수 */
.ch-phone.ch-board .ch-feed{background:var(--surface)}
.ch-phone.ch-board .ch-in{gap:0;padding:6px 10px}
.ch-phone.ch-board .ch-msg{padding:12px 4px;border-bottom:1px solid var(--rule)}
.ch-phone.ch-board .ch-body{max-width:100%}
.ch-phone.ch-board .ch-bub{border:0;background:transparent;padding:0;border-radius:0}

/* ---------- 쪽 짜임: 왼쪽 전화, 오른쪽 단계 ---------- */
.ch-case{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:22px;align-items:start;margin-top:14px}
@media (max-width:760px){ .ch-case{grid-template-columns:1fr} .ch-feed{height:360px} }
.ch-left{display:flex;flex-direction:column;gap:6px}
.ch-left .row{margin-top:6px}
.ch-steps{display:flex;flex-direction:column;gap:10px}
.ch-step{border:1.5px solid var(--rule);border-radius:14px;padding:10px 14px;background:var(--surface);opacity:.55}
.ch-step.on{opacity:1;border-color:var(--sky);box-shadow:var(--shadow)}
.ch-step.done{opacity:1;background:var(--paper)}
.ch-sh{display:flex;align-items:center;gap:9px;margin:2px 0 6px;font-weight:700;font-family:var(--serif)}
.ch-sh b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sunken);font-family:var(--mono);font-size:.82em;flex:none}
.ch-step.on .ch-sh b{background:var(--sky);color:var(--on)} .ch-step.done .ch-sh b{background:var(--leaf);color:var(--on)}
.ch-step .opt{min-height:44px;font-size:.96em}
.ch-step .opt .k{background:transparent;width:24px;height:24px;color:var(--seal)}
.ch-step .opt.ok .k{background:transparent;color:var(--leaf)}

/* 방 고르기 */
.ch-rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 4px}
@media (max-width:760px){ .ch-rooms{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
.ch-room{position:relative;display:flex;align-items:center;gap:9px;text-align:left;padding:10px 12px;border:1.5px solid var(--rule);border-radius:14px;background:var(--surface);cursor:pointer;color:var(--muted)}
.ch-room span{display:flex;flex-direction:column;line-height:1.3} .ch-room b{color:var(--ink);font-size:.92em} .ch-room small{font-size:.78em}
.ch-room.on{border-color:var(--seal);background:var(--seal-soft);color:var(--seal)}
.ch-room.ok{color:var(--leaf)}
.ch-seal{position:absolute;right:-6px;top:-9px;font-style:normal;font-family:var(--cute);font-size:.78em;color:var(--seal);background:var(--surface);border:2px solid var(--seal);border-radius:999px;padding:0 8px;transform:rotate(8deg)}
.ch-room.ok .ch-seal{color:var(--leaf);border-color:var(--leaf)}
/* 예절을 지킨 뒤 */
.ch-after{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border-radius:14px;background:var(--leaf-soft)}
.ch-after p{flex-basis:100%;margin:2px 0 0;font-weight:600;color:var(--leaf)}
.ch-who{font-family:var(--serif);font-weight:700}
.ch-arrow{font-size:1.5em;color:var(--leaf)}
.ch-found5 ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ch-found5 li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--rule)}
.ch-found5 .ch-ic{width:26px;height:26px;color:var(--seal)}
.ch-found5{margin-top:22px}

/* ---------- 1쪽 카드 나누기 ---------- */
.ch-goal{display:flex;align-items:center;gap:10px;margin:2px 0 14px;padding:10px 14px;border-radius:12px;background:var(--sunken)}
.ch-exps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 22px}
.ch-exp{display:flex;flex-direction:column;gap:6px;padding:10px;border:2px solid var(--rule);border-radius:14px;background:#fff;font:inherit;text-align:left;cursor:pointer;position:relative}
.ch-exp svg{width:100%;height:auto;border-radius:8px}
.ch-exp>b{position:absolute;left:16px;top:16px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2E2A26;color:#fff;font-size:.85em}
.ch-exp>span{font-size:.92em;line-height:1.45}
.ch-exp.on{border-color:#C2452D;background:#FFF6F1;box-shadow:0 0 0 2px #C2452D inset}
.ch-exp.on::after{content:"✓ 해 봤어요";position:absolute;right:10px;top:10px;padding:2px 8px;border-radius:999px;background:#C2452D;color:#fff;font-size:.78em;font-weight:700}
.ch-exp.me{cursor:default;border-style:dashed;justify-content:center;padding-top:48px}
.ch-exp.me input{width:100%;padding:8px 10px;border:1.5px solid var(--rule);border-radius:8px;font:inherit}
@media (max-width:760px){.ch-exps{grid-template-columns:repeat(2,1fr)}}
.ch-in1{display:block;width:100%;margin-top:10px;padding:10px 12px;border:1.5px solid var(--rule);border-radius:10px;font:inherit;background:#fff}
.ch-ads{margin:6px 0 16px}
.ch-planh{margin-top:18px}
.ch-plan6{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;margin:8px 0}
.ch-plan6 dt{font-weight:700;white-space:nowrap}
.ch-plan6 dd{margin:0}
@media(max-width:600px){.ch-plan6{grid-template-columns:1fr;gap:4px}.ch-plan6 dt{margin-top:6px}}
.ch-want{margin:0 0 6px}
.ch-tip236{margin:0 0 10px}
.ch-must{margin-top:14px}
.ch-room small.ch-bk{color:var(--sky);font-weight:700}
.ch-herobox{margin:6px 0 4px}
.ch-herobox svg{width:100%;max-width:640px;margin:0 auto}
.ch-herobox figcaption{text-align:center;color:var(--muted);font-size:.92em;margin-top:6px}
/* 머리 그림 누르면 움직임(chatart.js kindHero) — 멈춘 그림은 끝 장면, .play 일 때만 처음부터 펼쳐진다 */
.ch-play{display:block;position:relative;width:100%;max-width:640px;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.ch-playbtn{position:absolute;right:10px;bottom:10px;padding:6px 12px;border-radius:999px;background:#2E2A26;color:#fff;font-size:.85em;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .15s}
.ch-play:hover .ch-playbtn,.ch-play:focus-visible .ch-playbtn{transform:scale(1.06)}
.ch-play:focus-visible{outline:3px solid #C2452D;outline-offset:4px;border-radius:16px}
@media (max-width:600px){.ch-play{text-align:center}.ch-playbtn{position:static;display:inline-block;margin-top:8px}}
.ch-hero .a,.ch-hero .shk,.ch-hero .bob,.ch-hero .tmp,.ch-hero .tmp>*{transform-box:fill-box;transform-origin:center}
.ch-hero .tmp{opacity:0}
.play .ch-hero .a{animation:hb-in .4s cubic-bezier(.3,1.6,.6,1) var(--d) both}
.play .ch-hero .shk{animation:hb-shk .5s var(--d) both}
.play .ch-hero .bob{animation:hb-bob .45s ease-in-out var(--d) 2 both}
.play .ch-hero .typing{animation:hb-show 1s var(--d) both}
.play .ch-hero .typing circle{animation:hb-dot .5s calc(var(--i) * .15s) infinite alternate}
.play .ch-hero .env.go{animation:hb-go 1.2s ease-in-out var(--d) both}
.play .ch-hero .env.back{animation:hb-go 1.1s ease-in-out var(--d) reverse both}
.play .ch-hero .ring{animation:hb-ring .8s ease-out var(--d) 2 both}
.play .ch-hero .wave{animation:hb-show 1.3s var(--d) both}
.play .ch-hero .wave path{animation:hb-dot .4s calc(var(--i) * .12s) infinite alternate}
.play .ch-hero .pan.on{animation:hb-hi 5.4s .1s both}
.play .ch-hero .pan.face{animation:hb-hi 2.8s 5.8s both}
@keyframes hb-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes hb-shk{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-3deg)}40%{transform:translateX(3px) rotate(3deg)}60%{transform:translateX(-2px) rotate(-2deg)}80%{transform:translateX(2px)}}
@keyframes hb-bob{0%,100%{transform:none}50%{transform:translateY(-7px)}}
@keyframes hb-show{0%{opacity:0}12%,85%{opacity:1}100%{opacity:0}}
@keyframes hb-dot{from{opacity:.25}to{opacity:1}}
@keyframes hb-go{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}25%{transform:translate(27px,-14px) rotate(-8deg)}50%{transform:translate(54px,-21px)}75%{transform:translate(81px,-14px) rotate(8deg)}92%{opacity:1}100%{opacity:0;transform:translate(108px,0)}}
@keyframes hb-ring{0%{opacity:0;transform:scale(.5)}1%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.7)}}
@keyframes hb-hi{0%,100%{stroke-width:2}10%,90%{stroke-width:4}}
.ch-sort{display:flex;flex-direction:column;align-items:center;gap:14px;margin:6px 0 18px}
.ch-card{width:min(520px,100%);background:var(--letter);border:2px solid var(--inkk);border-radius:18px;box-shadow:5px 5px 0 rgba(46,42,38,.12);padding:16px 20px;text-align:center}
.ch-card p{font-size:1.25em;font-weight:600;margin:8px 0 2px;line-height:1.5}
.ch-card .ch-hint{font-size:.92em;font-weight:400;color:var(--seal)}
.ch-card.no{animation:shake .38s}
.ch-card{position:relative;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .25s cubic-bezier(.3,1.4,.6,1),box-shadow .2s}
.ch-card:hover{box-shadow:6px 8px 0 rgba(46,42,38,.14)}
.ch-card.drag{cursor:grabbing;transition:none;z-index:20;box-shadow:0 18px 36px rgba(46,42,38,.28)}
.ch-grip{position:absolute;right:14px;top:10px;color:var(--faint);font-size:1.2em;letter-spacing:-2px}
.ch-bin.over{transform:scale(1.07);box-shadow:0 0 0 4px currentColor inset,0 10px 22px rgba(0,0,0,.12)}
.ch-bin.got{animation:ch-got .5s cubic-bezier(.3,1.6,.6,1)}
@keyframes ch-got{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
.ch-bins{display:grid;grid-template-columns:1fr .8fr 1fr;gap:10px;width:min(640px,100%)}
.ch-bin{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:16px;border:2px solid var(--rule);background:var(--surface);cursor:pointer;min-height:96px;transition:transform .15s,border-color .15s}
.ch-bin:hover{transform:translateY(-2px)} .ch-bin:active{transform:scale(.97)}
.ch-bin .ch-ic{width:30px;height:30px}
.ch-bin b{font-family:var(--serif);font-size:1.05em}
.ch-bin small{font-family:var(--mono)}
.ch-bin.b-on{border-color:var(--blue-mid);color:var(--sky);background:var(--sky-soft)}
.ch-bin.b-face{border-color:#B9D3B2;color:var(--leaf);background:var(--leaf-soft)}
.ch-bin.b-both{border-color:var(--yel-mid);color:var(--yel);background:var(--yel-soft)}
.ch-tablebox .fl{margin-top:4px}
.ch-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.94em}
.ch-table th,.ch-table td{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
.ch-table thead th{font-family:var(--serif);background:var(--sunken)}
.ch-table thead th:nth-child(2){color:var(--sky)} .ch-table thead th:nth-child(3){color:var(--leaf)}
.ch-table tbody th{width:22%;white-space:nowrap;color:var(--muted);font-weight:600}
.ch-table td.empty span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px dashed var(--rule);color:var(--faint)}
.ch-table td.just{animation:glow 1.2s ease-out}
@keyframes glow{from{background:var(--yel-soft)}}
.ch-both{margin:0;padding-left:1.2em} .ch-both li.empty{color:var(--faint)}

/* ---------- 3쪽 첫 댓글 실험 ---------- */
.ch-lab{display:grid;grid-template-columns:1fr minmax(260px,.9fr);gap:22px;align-items:start;margin:14px 0}
@media (max-width:760px){ .ch-lab{grid-template-columns:1fr} }
.ch-post{background:var(--surface);border:2px solid var(--inkk);border-radius:20px;padding:14px 16px;box-shadow:6px 6px 0 rgba(46,42,38,.1)}
.ch-ph{display:flex;align-items:center;gap:8px} .ch-ph small{color:var(--faint);margin-left:auto}
.ch-ph .ch-av{width:46px;height:46px} .ch-ph .ch-av .mood{width:46px;height:46px}
.ch-draw svg{width:100%;max-width:340px;margin:6px auto;border:1px solid var(--rule);border-radius:10px}
.ch-cms{position:relative;padding-left:34px;min-height:120px;border-top:1px solid var(--rule);margin-top:8px}
.ch-stream{position:absolute;left:4px;top:6px;bottom:6px;width:26px;height:calc(100% - 12px)}
.ch-cms ul{list-style:none;margin:0;padding:8px 0 0;display:flex;flex-direction:column;gap:8px}
.ch-cm{display:flex;gap:8px;align-items:flex-start}
.ch-cm span:last-child{display:flex;flex-direction:column;background:var(--sunken);border-radius:4px 14px 14px 14px;padding:6px 12px;line-height:1.45}
.ch-cm b{font-size:.78em;color:var(--muted)}
.ch-cm.me span:last-child{background:var(--ch-me);color:var(--ch-me-ink)}
.ch-empty{color:var(--faint);padding:20px 0}
.ch-res{margin-top:12px;padding:10px 14px;border-radius:12px;font-weight:600}
.ch-res.kind{background:var(--sky-soft);color:var(--sky)} .ch-res.mean{background:#EFE6DA;color:#7A5F3E}
@media (prefers-color-scheme:dark){ .ch-res.mean{background:#2E261D;color:#D9B98F} }
.ch-pick .opt{min-height:48px}
.ch-q,.ch-say{margin-top:16px}
.ch-face2{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:8px 0}
.ch-face2>div:not(.ch-sayb){display:flex;flex-direction:column;align-items:center;font-weight:700}
.ch-sayb{position:relative;max-width:320px;background:var(--letter);border:2px solid var(--inkk);border-radius:18px;padding:12px 16px;font-size:1.15em;font-weight:600}
.ch-sayb::after{content:"";position:absolute;left:-12px;top:50%;border:8px solid transparent;border-right-color:var(--inkk);transform:translateY(-50%)}

/* ---------- 4쪽 보내기 전에 ---------- */
.ch-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.ch-tab{position:relative;flex:none;display:flex;align-items:center;gap:7px;padding:6px 14px 6px 6px;border:1.5px solid var(--rule);border-radius:999px;background:var(--surface);cursor:pointer;font-weight:600}
.ch-tab .mood{width:30px;height:30px}
.ch-tab.on{border-color:var(--seal);background:var(--seal-soft)}
.ch-tab i{font-style:normal;color:var(--leaf);font-weight:700}
.ch-to{display:flex;align-items:center;gap:12px;margin:0;font-size:1.05em}
.ch-to .pill{margin:0 6px}

/* ---------- 5쪽 대화하기 ---------- */
.ch-scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:16px 0}
.ch-scene{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px;border:1.5px solid var(--rule);border-radius:18px;background:var(--surface);cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.ch-scene:hover{transform:translateY(-3px);border-color:var(--seal)}
.ch-scene .ch-ic{width:40px;height:40px;color:var(--sky)}
.ch-scene b{font-family:var(--serif);font-size:1.25em}
.ch-scene small{color:var(--muted);line-height:1.5}
.ch-scene.ok .ch-ic{color:var(--leaf)}
.ch-plan dl{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;margin:0;align-items:start}
.ch-plan dt{font-weight:700;padding-top:8px;white-space:nowrap}
.ch-plan dd{margin:0}
@media (max-width:600px){ .ch-plan dl{grid-template-columns:1fr} .ch-plan dt{padding-top:0} }
.ch-coach{border:2px solid var(--seal);background:var(--seal-soft);border-radius:14px;padding:10px 14px}
.ch-coach .ch-sh b{background:var(--seal);color:#fff}
.ch-coach ul{margin:4px 0;padding-left:1.2em}
.ch-coach .pill{margin-right:4px}

/* ---------- 6쪽 점검과 다짐 ---------- */
.ch-check .fl small{font-weight:400}
.ch-crow{display:grid;grid-template-columns:1.3fr auto 1fr;gap:10px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
@media (max-width:700px){ .ch-crow{grid-template-columns:1fr} }
.ch-cq{margin:0;font-weight:600}
.ch-dots{display:flex;align-items:center;gap:6px}
.ch-dots small{min-width:4.5em}
.ch-dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--inkk);background:var(--surface);cursor:pointer;padding:0}
.ch-dot.on{background:var(--inkk)}
@media (prefers-color-scheme:dark){ .ch-dot{border-color:var(--ink)} .ch-dot.on{background:var(--ink)} }
.ch-fact{margin:0;font-size:.88em;color:var(--muted);background:var(--sunken);border-radius:10px;padding:6px 10px}
.ch-vowlead{font-family:var(--hand);font-size:1.6em;margin:0 0 4px}
.panel+.panel,.panel+.printbox{margin-top:16px}

/* ---------- 인쇄: 다짐 카드(A4 세로) ---------- */
#printroot .pr-ch-vow{padding:0 2mm;gap:4.5mm}
#printroot .pr-ch-hd{flex:none;display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;padding-bottom:2mm;border-bottom:.5mm solid #2B2523}
#printroot .pr-ch-hd h1{font-size:22pt;line-height:1.1}
#printroot .pr-ch-slogan{flex:none;height:30mm;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1mm;border:.6mm solid #2B2523;border-radius:8mm;background:#FFF6D3;position:relative;padding:0 8mm}
#printroot .pr-ch-slogan span{font-size:9pt;color:#94650F}
#printroot .pr-ch-slogan b{font-family:"Jua",sans-serif;font-weight:400;font-size:24pt;line-height:1.2;text-align:center;max-height:20mm;overflow:hidden}
#printroot .pr-ch-vow h3{font-size:12.5pt;margin:0 0 2mm}
#printroot .pr-ch-rules{flex:none}
#printroot .pr-ch-rules ol{list-style:none;margin:0;padding:0;display:grid;gap:1.6mm}
#printroot .pr-ch-rules li{display:flex;align-items:center;gap:3mm;border:.3mm solid #CFC8BB;border-radius:3mm;padding:1.8mm 3mm;font-size:10.5pt}
#printroot .pr-ch-ic{width:7mm;height:7mm;color:#C2452D;flex:none}
#printroot .pr-ch-vowbox{flex:none;border:.4mm dashed #8C877E;border-radius:4mm;padding:3mm 4mm;height:42mm;display:flex;flex-direction:column}
#printroot .pr-ch-hand{flex:1;margin:0;font-family:"Nanum Pen Script",cursive;font-size:24pt;line-height:1.35;overflow:hidden}
#printroot .pr-ch-hand b{font-weight:400;color:#1F3F75}
#printroot .pr-ch-chk{flex:1;min-height:0;display:flex;flex-direction:column}
#printroot .pr-ch-chk table{width:100%;border-collapse:collapse;font-size:9.5pt;table-layout:fixed}
#printroot .pr-ch-chk th,#printroot .pr-ch-chk td{border:.3mm solid #8C877E;padding:1.8mm 2.2mm;vertical-align:middle;text-align:left}
#printroot .pr-ch-chk th{background:#F3EDDF;font-weight:700}
#printroot .pr-ch-chk th:nth-child(1){width:46%} #printroot .pr-ch-chk th:nth-child(2){width:18%}
#printroot .pr-ch-chk .c{text-align:center}
#printroot .pr-ch-chk td.f{font-size:8.6pt;color:#4A4540;height:19mm;overflow:hidden}
#printroot .pr-ch-dots i{display:inline-block;width:4.6mm;height:4.6mm;border-radius:50%;border:.45mm solid #2B2523;margin:0 .8mm}
#printroot .pr-ch-dots i.on{background:#2B2523}
#printroot .pr-ch-key{margin:1.6mm 0 0;font-size:8.5pt;color:#6E6A63;text-align:right}

/* ---------- 인쇄: 표어 포스터(A4 가로) ---------- */
#printroot .pr-ch-poster{align-items:center;justify-content:center;gap:6mm;padding:6mm}
#printroot .pr-ch-pbub{position:relative;width:250mm;height:118mm;margin-bottom:8mm;border:1mm solid #2B2523;border-radius:22mm;display:grid;place-items:center;padding:8mm 14mm}
#printroot .pr-ch-tail{position:absolute;left:38mm;bottom:-17.2mm;width:22mm;height:18.3mm;overflow:visible}
#printroot .pr-ch-pbub b{font-family:"Jua",sans-serif;font-weight:400;font-size:62pt;line-height:1.2;text-align:center;color:#fff;-webkit-text-stroke:.9mm #2B2523;paint-order:stroke fill;max-height:100mm;overflow:hidden;width:100%}
#printroot .pr-ch-faces{display:flex;gap:12mm;margin-top:2mm}
#printroot .pr-ch-faces svg{width:24mm;height:24mm}
#printroot .pr-ch-by{margin:0;font-size:11pt;color:#6E6A63}

/* 경험 카드 창(expdemo.js) — 실제처럼 펼쳐지는 게시판·메시지·영상 회의 */
.dm-dlg{width:min(600px,calc(100vw - 20px));max-height:calc(100vh - 20px);padding:0;border:0;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.dm-dlg::backdrop{background:rgba(24,22,20,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px 20px}
.dm-head b{display:flex;align-items:center;gap:9px;font-size:1.1em}
.dm-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2E2A26;color:#fff;font-size:.8em}
.dm-x{width:40px;height:40px;border:0;border-radius:50%;background:var(--sunken);color:var(--ink);font-size:1.1em;cursor:pointer}
.dm-stage{position:relative;margin:0 14px;padding:22px 18px;border-radius:16px;overflow:hidden;color:#1F2328;font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;font-size:13.5px;line-height:1.45;
  background:radial-gradient(120% 90% at 0% 0%,#FBE3D3 0,transparent 55%),radial-gradient(110% 90% at 100% 100%,#D7E6FA 0,transparent 60%),#EEF0F6}
.dm-stage p,.dm-stage h4{margin:0}
.dm-cap{margin:12px 20px 0;color:var(--muted);font-size:.95em}
.dm-btns{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 14px 16px}
.dm-ic{width:18px;height:18px;flex:none;vertical-align:middle}
.dm-avt{width:26px;height:26px;flex:none;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.18)}
.dm-avt.l{width:34px;height:34px}

/* 나타나기 · 눈 깜빡 · 말할 때 입 */
.dm-stage.play .dm-in{animation:dm-in .5s cubic-bezier(.2,1.3,.5,1) var(--d) both}
@keyframes dm-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.dm-eyes{transform-box:fill-box;transform-origin:center;animation:dm-blink 4.2s infinite}
@keyframes dm-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.1)}}
.dm-mouth{transform-box:fill-box;transform-origin:top center}
.dm-stage.play .t1 .dm-mouth.tk{animation:dm-talk .17s 2s 8 alternate}
.dm-stage.play .t3 .dm-mouth.tk{animation:dm-talk .17s 3.2s 8 alternate}
@keyframes dm-talk{from{transform:scaleY(1)}to{transform:scaleY(.35)}}

/* ── 가: 게시판(브라우저 창) ── */
.dm-win{border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 18px 40px rgba(30,40,70,.22),0 0 0 1px rgba(0,0,0,.06)}
.dm-chrome{display:flex;align-items:flex-end;gap:12px;padding:8px 12px 0;background:#DFE3EA}
.dm-lights{display:flex;gap:6px;padding-bottom:9px}
.dm-lights i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.dm-lights i+i{background:#FEBC2E}.dm-lights i+i+i{background:#28C840}
.dm-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px 9px 0 0;background:#fff;font-size:.86em;font-weight:600}
.dm-fav{width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,#43A047,#1E88E5)}
.dm-addr{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#fff;border-bottom:1px solid #E6E8EC;color:#5F6670}
.dm-addr .dm-ic{width:16px;height:16px}
.dm-url{flex:1;display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#F1F3F5;font-size:.85em}
.dm-url .dm-ic{width:12px;height:12px;color:#2E7D32}
.dm-site{background:#F6F7F9}
.dm-sh{display:flex;align-items:center;gap:14px;padding:10px 16px;background:linear-gradient(90deg,#2F5D8A,#3B78B0);color:#fff}
.dm-logo{display:flex;align-items:center;gap:7px;font-weight:800;letter-spacing:-.02em}
.dm-logo b{width:20px;height:20px;border-radius:50% 50% 50% 4px;background:linear-gradient(135deg,#A5D6A7,#66BB6A);box-shadow:inset -3px -3px 0 rgba(0,0,0,.12)}
.dm-sh nav{display:flex;gap:4px;flex:1;font-size:.88em}
.dm-sh nav span{padding:3px 10px;border-radius:999px;opacity:.75}
.dm-sh nav .on{background:rgba(255,255,255,.22);opacity:1;font-weight:700}
.dm-sp{display:flex;flex-direction:column;gap:8px;padding:12px}
.dm-post,.dm-rep,.dm-cin{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04)}
.dm-post{padding:12px 14px}
.dm-cat{display:flex;gap:6px;margin-bottom:5px!important;font-size:.78em;color:#6B7280}
.dm-cat span{padding:1px 8px;border-radius:6px;background:#E3F2FD;color:#1565C0;font-weight:700}
.dm-post h4{font-size:1.12em;letter-spacing:-.02em}
.dm-who{display:flex;align-items:center;gap:7px;margin:7px 0 6px!important;font-size:.84em;color:#8A9099}
.dm-who b{color:#1F2328}
.dm-st{display:flex;align-items:center;gap:3px;margin-left:auto}.dm-st .dm-ic{width:14px;height:14px}
.dm-me{padding:0 6px;border-radius:5px;background:#FFF3E0;color:#E65100;font-weight:700;font-size:.9em}
.dm-react{display:flex;gap:14px;margin-top:9px!important;padding-top:9px;border-top:1px solid #EEF0F2;color:#8A9099;font-size:.84em}
.dm-react span{display:flex;align-items:center;gap:4px}.dm-react .dm-ic{width:15px;height:15px}
.dm-react span:first-child{color:#E57373}
.dm-cc{color:#1E88E5}
.dm-rep{padding:9px 14px}
.dm-rep .dm-who{margin-top:0!important}
.dm-rep.sub{display:flex;gap:6px;margin-left:22px;background:#FAFBFF}
.dm-rarr{color:#B0B7C3;width:16px;height:16px;margin-top:4px}
.dm-cin{display:flex;align-items:center;gap:9px;padding:8px 8px 8px 12px;color:#A0A6AF}
.dm-cin span{flex:1}
.dm-cin b{padding:6px 14px;border-radius:8px;background:#3B78B0;color:#fff;font-size:.9em}

/* ── 나: 휴대 전화 ── */
.dm-iphone{width:min(292px,100%);margin:0 auto;padding:9px;border-radius:46px;background:linear-gradient(145deg,#4A4E57,#1D1F24);box-shadow:0 22px 50px rgba(20,25,45,.35),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.dm-scr{position:relative;display:flex;flex-direction:column;height:520px;border-radius:38px;overflow:hidden;background:#fff}
.dm-stat{display:flex;align-items:center;justify-content:space-between;padding:12px 22px 4px 26px;font-size:.95em}
.dm-island{position:absolute;left:50%;top:9px;width:86px;height:25px;margin-left:-43px;border-radius:999px;background:#0B0B0D}
.dm-sb{width:58px;height:13px}
.dm-chead{display:flex;align-items:center;gap:8px;padding:6px 12px 9px;border-bottom:1px solid #EEF0F3;color:#3478F6}
.dm-chead span{flex:1;display:flex;flex-direction:column;color:#1F2328;line-height:1.2}
.dm-chead small{display:flex;align-items:center;gap:4px;color:#8A9099;font-size:.72em}
.dm-chead small i{width:7px;height:7px;border-radius:50%;background:#34C759}
.dm-chead .dm-ic{width:20px;height:20px}
.dm-cbody{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px 12px;background:linear-gradient(#F5F8FD,#EAF1FB);overflow:hidden}
.dm-date{align-self:center;padding:2px 10px;border-radius:999px;background:rgba(60,70,90,.08);color:#7A828E;font-size:.74em}
.dm-row{display:flex;align-items:flex-end;gap:6px}
.dm-row.me{justify-content:flex-end}
.dm-bub{max-width:190px;padding:8px 12px;border-radius:18px;font-size:.95em;line-height:1.4}
.dm-row.me .dm-bub{background:linear-gradient(160deg,#4F95FF,#2F6FEB);color:#fff;border-bottom-right-radius:6px;box-shadow:0 2px 6px rgba(47,111,235,.3)}
.dm-row.you .dm-bub{background:#fff;border-bottom-left-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dm-nm{display:block;margin:0 0 2px 2px;color:#8A9099;font-size:.72em}
.dm-meta{display:flex;flex-direction:column;align-items:flex-end;color:#9AA1AB;font-size:.66em;white-space:nowrap}
.dm-row.you .dm-meta{align-items:flex-start}
.dm-unr{color:#F5A623;font-size:1.15em;opacity:0}
.dm-stage.play .dm-unr{animation:dm-unr 2s .3s both}
@keyframes dm-unr{0%{opacity:0}8%,92%{opacity:1}100%{opacity:0}}
.dm-avsp{width:26px;flex:none}
.dm-sticker{width:96px;height:96px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}
.dm-typing{display:none}
.dm-stage.play .dm-typing{display:flex;animation:dm-type 1.2s var(--d) both}
@keyframes dm-type{0%{opacity:0;max-height:0;margin-top:-7px}12%,85%{opacity:1;max-height:50px;margin-top:0}100%{opacity:0;max-height:0;margin-top:-7px}}
.dm-typing .dm-bub{display:flex;gap:4px;padding:11px 13px}
.dm-typing .dm-bub i{width:7px;height:7px;border-radius:50%;background:#A3AAB5;animation:dm-dot .9s infinite}
.dm-typing .dm-bub i:nth-child(2){animation-delay:.15s}.dm-typing .dm-bub i:nth-child(3){animation-delay:.3s}
@keyframes dm-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.dm-cin2{display:flex;align-items:center;gap:8px;margin:8px 10px 6px;padding:5px 5px 5px 10px;border-radius:999px;background:#F1F3F6;color:#9AA1AB;font-size:.88em}
.dm-cin2 span{flex:1}
.dm-cin2 b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2F6FEB;color:#fff}
.dm-cin2 b .dm-ic{width:15px;height:15px}
.dm-home{align-self:center;width:110px;height:5px;margin:4px 0 8px;border-radius:999px;background:#1F2328}

/* ── 다: 영상 회의 ── */
.dm-meet{border-radius:14px;background:#1B1F2A;color:#E8EBF2;overflow:hidden;box-shadow:0 20px 44px rgba(10,15,30,.4),0 0 0 1px rgba(255,255,255,.06)}
.dm-mtop{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:.84em}
.dm-mtop b{flex:1;text-align:center}
.dm-rec{display:flex;align-items:center;gap:5px;color:#9BA3B4;font-size:.9em}
.dm-rec i{width:7px;height:7px;border-radius:50%;background:#9BA3B4}
.dm-mr{display:flex;align-items:center;gap:5px;color:#9BA3B4}
.dm-mr .dm-ic{width:15px;height:15px}
.dm-clock{margin-left:6px;padding:1px 7px;border-radius:6px;background:rgba(255,255,255,.08);color:#E8EBF2;font-variant-numeric:tabular-nums}
.dm-sec::after{content:"2";animation:dm-sec 4s steps(4) infinite}
@keyframes dm-sec{0%{content:"2"}25%{content:"3"}50%{content:"4"}75%{content:"5"}}
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 8px}
.dm-tile{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#2A3040}
.dm-roombg{position:absolute;inset:0;width:100%;height:100%}
.dm-body{position:absolute;left:50%;bottom:-6%;width:62%;height:auto;transform:translateX(-50%)}
.dm-tag{position:absolute;left:7px;bottom:7px;display:flex;align-items:center;gap:4px;padding:2px 8px 2px 5px;border-radius:7px;background:rgba(15,18,26,.62);color:#fff;font-size:.78em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dm-tag .dm-ic{width:13px;height:13px}
.dm-wave{position:absolute;right:8px;top:8px;display:flex;align-items:flex-end;gap:2px;height:14px;padding:3px 5px;border-radius:7px;background:rgba(15,18,26,.55);opacity:0}
.dm-wave i{width:3px;height:100%;border-radius:2px;background:#34D27B;transform-origin:bottom}
.dm-tile::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 3px #34D27B;opacity:0}
.dm-stage.play .t1::after,.dm-stage.play .t1 .dm-wave{animation:dm-spk 1.5s 2s both}
.dm-stage.play .t3::after,.dm-stage.play .t3 .dm-wave{animation:dm-spk 1.5s 3.2s both}
.dm-stage:not(.play) .t3::after,.dm-stage:not(.play) .t3 .dm-wave{opacity:1}
.dm-stage.play .dm-wave i{animation:dm-bar .3s infinite alternate}
.dm-wave i:nth-child(2){animation-delay:.1s!important}.dm-wave i:nth-child(3){animation-delay:.2s!important}
@keyframes dm-spk{0%,100%{opacity:0}10%,90%{opacity:1}}
@keyframes dm-bar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.dm-toasts{display:flex;flex-direction:column;gap:5px;padding:8px 10px 0}
.dm-toast{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.08)}
.dm-toast span{display:flex;flex-direction:column;line-height:1.3;font-size:.92em}
.dm-toast b{color:#9CC2FF;font-size:.82em}
.dm-tools{display:flex;justify-content:center;gap:8px;padding:10px 8px 12px}
.dm-tb{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px;color:#C9CFDB;font-size:.72em}
.dm-tb .dm-ic{width:38px;height:38px;padding:9px;border-radius:50%;background:#2E3546;color:#fff}
.dm-tb.end .dm-ic{width:52px;border-radius:999px;background:#EA4335}
@media (max-width:480px){.dm-stage{margin:0 8px;padding:14px 8px;font-size:12.5px}.dm-scr{height:470px}.dm-tb{min-width:44px}.dm-tb .dm-ic{width:34px;height:34px;padding:8px}.dm-tb.end .dm-ic{width:46px}.dm-sh nav{display:none}}

/* 229쪽 2 비교 창(expdemo.js CMP) */
.dm-dlg.wide{width:min(900px,calc(100vw - 20px))}
.cm-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cm-scene{margin:0;padding:10px 10px 12px;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(30,40,70,.16)}
.cm-scene figcaption{margin:2px 4px 8px;font-size:1.05em}
.cm-on figcaption b{color:#2F6FEB}.cm-face figcaption b{color:#2E7D32}
.cm-scene p{margin:8px 4px 0;color:#4A505A;font-size:.95em}
.cm-svg{display:block;width:100%;height:auto;border-radius:12px}
.cm-tx{font-size:13px;font-weight:700;fill:#1F2328;font-family:inherit}
.cm-lb{font-size:12px;font-weight:700;fill:#3A3A3A;font-family:inherit}
.cm-tx.w,.cm-lb.w{fill:#fff}
.cm-sign{font-size:15px;font-weight:800;fill:#FFD54F;letter-spacing:2px;font-family:inherit}
.cm-svg g.dm-in{transform-box:fill-box;transform-origin:50% 100%}
.cm-env{opacity:0;transform-box:view-box}
.dm-stage.play .cm-env.go{animation:cm-fly 1.2s ease-in-out var(--d) both}
.dm-stage.play .cm-env.back{animation:cm-fly 1.2s ease-in-out var(--d) reverse both}
@keyframes cm-fly{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}25%{transform:translate(34px,-22px) rotate(-10deg)}50%{transform:translate(68px,-30px)}75%{transform:translate(102px,-22px) rotate(10deg)}92%{opacity:1}100%{opacity:0;transform:translate(136px,0)}}
.cm-ring,.cm-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.dm-stage.play .cm-ring{animation:cm-ring .7s ease-out var(--d) 2 both}
.dm-stage.play .cm-glow{animation:cm-glow 1.4s var(--d) both}
@keyframes cm-ring{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.8)}}
@keyframes cm-glow{0%,100%{opacity:0}15%,70%{opacity:1}}
.dm-stage.play .spk .dm-mouth{animation:dm-talk .17s var(--t) var(--n) alternate}
.dm-stage.play .cm-heart{animation:dm-in .5s cubic-bezier(.2,1.3,.5,1) var(--d) both,cm-float 2.4s calc(var(--d) + .5s) ease-in-out infinite alternate}
@keyframes cm-float{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.cm-scene{transition:box-shadow .3s}
.dm-stage.play .cm-on{animation:cm-hi 4.4s .1s both}
.dm-stage.play .cm-face{animation:cm-hi 3.6s 4.4s both}
@keyframes cm-hi{0%,100%{box-shadow:0 10px 26px rgba(30,40,70,.16)}8%,92%{box-shadow:0 0 0 4px #FFC94D,0 14px 30px rgba(30,40,70,.22)}}
@media (max-width:720px){.cm-two{grid-template-columns:1fr}}

/* 2쪽 「두 세계에 붙이기」 */
.sg-deck{position:relative;display:flex;justify-content:center;margin:4px 0 30px;padding-top:6px}
.sg-stack{position:absolute;left:50%;top:6px;width:min(520px,100%);height:100%;transform:translateX(-50%);pointer-events:none}
.sg-stack i{position:absolute;inset:0;border:2px solid var(--inkk);border-radius:18px;background:repeating-linear-gradient(135deg,#F7E7C9 0 10px,#F1DDB8 10px 20px);transform:translate(calc(var(--k) * 6px),calc(var(--k) * 5px)) rotate(calc(var(--k) * 1.6deg));z-index:-1}
.sg-card{position:relative;z-index:2;background:var(--letter)}
.sg-card.go{transition:transform .28s cubic-bezier(.5,0,.8,.4),opacity .28s;opacity:.4}
.sg-art .cm-bub,.sg-art .cm-heart{display:none}
.sg-combo{position:absolute;z-index:3;right:max(0px,calc(50% - 300px));top:-12px;padding:4px 12px;border-radius:999px;background:#FF7A59;color:#fff;font-weight:800;font-size:.9em;transform:rotate(6deg);animation:sg-pop .5s cubic-bezier(.2,1.6,.5,1)}
.sg-board{display:grid;grid-template-columns:1fr .52fr 1fr;gap:10px;align-items:start;margin:0 0 18px}
.sg-zone{display:flex;flex-direction:column;gap:8px;padding:10px;border:2.5px solid transparent;border-radius:18px;background:var(--surface);box-shadow:0 8px 22px rgba(30,40,70,.12);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.sg-zone.z-on{border-color:#B9D2F3}.sg-zone.z-both{border-color:#F4D58A}.sg-zone.z-face{border-color:#B9DDB4}
.sg-zone:hover{transform:translateY(-2px)}
.sg-zone.over{transform:scale(1.03);box-shadow:0 0 0 4px #FFC94D,0 16px 32px rgba(30,40,70,.2)}
.sg-title{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-weight:800;font-size:1.02em}
.z-on .sg-title{color:#2F6FEB}.z-both .sg-title{color:#C77700}.z-face .sg-title{color:#2E7D32}
.sg-title small{font-family:var(--mono);font-weight:600;color:var(--muted)}
.sg-art{position:relative;display:block}
.sg-art .cm-svg{display:block;width:100%;height:auto;border-radius:12px}
.sg-say{position:absolute;left:50%;top:10%;max-width:92%;padding:7px 12px;border-radius:14px;background:#fff;color:#1F2328;font-weight:800;font-size:.92em;line-height:1.35;text-align:center;white-space:normal;box-shadow:0 6px 16px rgba(0,0,0,.2);transform:translateX(-50%);animation:sg-say 2.4s both}
.sg-say::after{content:"";position:absolute;left:50%;bottom:-7px;border:7px solid transparent;border-top-color:#fff;border-bottom:0;margin-left:-7px}
.sg-say.no{background:#FFF1EE;color:#B3261E}.sg-say.no::after{border-top-color:#FFF1EE}
@keyframes sg-say{0%{opacity:0;transform:translate(-50%,8px) scale(.7)}10%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-4px)}}
.sg-zone.yes{animation:sg-yes .5s}
.sg-zone.nope{animation:shake .38s}
@keyframes sg-yes{0%,100%{transform:none}40%{transform:scale(1.04)}}
.sg-notes{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;padding:6px;border-radius:12px;background:var(--sunken)}
.sg-notes:empty::before{content:"여기에 카드가 붙어요";margin:auto;color:var(--faint);font-size:.82em}
.sg-note{flex:1 1 140px;padding:6px 9px;border-radius:6px;font-size:.84em;line-height:1.35;color:#2E2A26;box-shadow:0 2px 4px rgba(0,0,0,.1);transform:rotate(-.8deg)}
.sg-note:nth-child(even){transform:rotate(.9deg)}
.z-on .sg-note{background:#DCEBFF}.z-both .sg-note{background:#FFF0C2}.z-face .sg-note{background:#DDF1D9}
.sg-note.new{animation:sg-pop .55s cubic-bezier(.2,1.6,.5,1)}
@keyframes sg-pop{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1}}
.sg-result{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 16px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#FFF6D8,#FFE9F0);text-align:center}
.sg-stars{margin:0;font-size:2.6em;letter-spacing:6px;line-height:1}
.sg-stars span{color:#E2DED4}
.sg-stars span.on{color:#FFB300;text-shadow:0 2px 0 #E08E00;display:inline-block;animation:sg-pop .6s cubic-bezier(.2,1.6,.5,1) calc(var(--i) * .25s) both}
.sg-rt{margin:0}.sg-rt span{display:block;color:var(--muted);font-size:.92em}
.sg-todo{margin:0 0 10px;padding:10px 14px;border-radius:12px;background:#FFF6D8;font-weight:600}
.ch-table td.flip,.ch-both li.flip{animation:sg-flip .5s cubic-bezier(.3,1.3,.6,1) calc(var(--i) * .12s) both}
@keyframes sg-flip{from{opacity:0;transform:rotateX(90deg)}to{opacity:1;transform:none}}
.row.center{justify-content:center}
@media (max-width:640px){.sg-board{grid-template-columns:1fr .6fr 1fr;gap:6px}.sg-zone{padding:6px;border-radius:14px}.sg-title{font-size:.84em;flex-direction:column;gap:0}.sg-note{flex-basis:100%;font-size:.74em;padding:4px 6px}.sg-say{font-size:.76em;padding:5px 8px}}

/* 3쪽 정답 상자 */
.ch-ans{display:block;padding:7px 11px;border-radius:10px;font-weight:700;line-height:1.45;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.06)}
.ch-table td.ans{padding:5px 6px}
.ch-table td:nth-child(2) .ch-ans{background:#DCEBFF;color:#1F4E9C}
.ch-table td:nth-child(3) .ch-ans{background:#DDF1D9;color:#245A28}
.ch-both.ans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;padding:0;list-style:none}
.ch-both.ans .ch-ans{background:#FFF0C2;color:#7A4E00}

/* 230쪽 ‘말’로 해 보기 장면(expdemo.js sayScene) — 끝 장면이 기본, .play 일 때 처음부터 */
.fs-stage{margin:10px 0 8px;padding:0;background:none}
.fs-scene{position:relative;aspect-ratio:640/300;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(30,40,70,.16);font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
.fs-bg{position:absolute;inset:0;width:100%;height:100%}
.fs-kid{position:absolute;bottom:0;width:34%;aspect-ratio:1}
.fs-me{left:6%}.fs-jia{right:6%}
.fs-l{position:absolute;inset:0}
.fs-p{width:100%;height:100%;display:block}
.fs-me .fs-p{transform:scaleX(-1)}
.fs-me .fs-b,.fs-jia .fs-b{opacity:1}.fs-me .fs-a,.fs-jia .fs-a{opacity:0}
.fs-draw{position:absolute;left:4%;bottom:6%;width:46%;height:auto;transform-origin:20% 90%;transform:rotate(-24deg) translateY(10%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.fs-nm{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#2E2A26;font-size:.9em;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.fs-bub{position:absolute;margin:0;padding:10px 16px;border-radius:18px;background:#fff;color:#1F2328;font-weight:800;font-size:clamp(.82em,2.2vw,1.12em);line-height:1.35;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.fs-bub::after{content:"";position:absolute;bottom:-9px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.fs-jb1{right:8%;top:8%;opacity:0}.fs-jb1::after{right:30%}
.fs-mb{left:6%;top:10%;max-width:52%;background:#FFF1EE;color:#B3261E}.fs-mb::after{left:30%;border-top-color:#FFF1EE}
.fs-jb2{right:14%;top:14%}.fs-jb2::after{right:34%}
.fs-stage .fs-cap{display:block;width:fit-content;max-width:100%;margin:12px auto 0;padding:9px 18px;border-radius:12px;background:#2E2A26;color:#fff;font-size:1em;text-align:center}
.fs-cap b{color:#FFD54F}
.dm-tear{transform-box:fill-box;transform-origin:top}
/* 펼쳐지기 */
.fs-stage.play .fs-a{animation:fs-fade .35s var(--fsend) reverse both}
.fs-stage.play .fs-b{animation:fs-fade .35s var(--fsend) both}
.fs-stage.play .fs-me .fs-a{animation-delay:calc(var(--fsend) + .7s)}.fs-stage.play .fs-me .fs-b{animation-delay:calc(var(--fsend) + .7s)}
@keyframes fs-fade{from{opacity:0}to{opacity:1}}
.fs-stage.play .fs-draw{animation:fs-droop .6s cubic-bezier(.4,0,.6,1) var(--fsend) both}
@keyframes fs-droop{from{transform:rotate(-4deg) translateY(-6%)}to{transform:rotate(-24deg) translateY(10%)}}
.fs-stage.play .fs-jb1{animation:fs-life 1.6s var(--d) both}
@keyframes fs-life{0%{opacity:0;transform:scale(.6)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
.fs-stage.play .fs-mb,.fs-stage.play .fs-jb2{animation:dm-in .4s cubic-bezier(.2,1.3,.5,1) var(--d) both}
.fs-stage.play .fs-mb span{animation:fs-ch .01s var(--c) both}
@keyframes fs-ch{from{opacity:0}to{opacity:1}}
.fs-stage.play .fs-me .tk{animation:dm-talk .15s 1.9s 10 alternate}
.fs-stage.play .dm-tear{animation:fs-tear 1.2s calc(var(--fsend) + .3s) both}
@keyframes fs-tear{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
.fs-stage.play .fs-cap{animation:fs-capin .5s var(--d) both}
@keyframes fs-capin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:560px){.fs-kid{width:40%}.fs-me{left:2%}.fs-jia{right:2%}.fs-bub{padding:6px 10px}}

/* 대화방 휴대 전화 — 진짜 스마트폰처럼(테두리·상태 표시줄·사람 얼굴·말풍선) */
.ch-phone{max-width:370px;border:11px solid #1F2228;border-radius:48px;background:#fff;color:#1F2328;box-shadow:0 0 0 1.5px #4A4E57,0 24px 50px rgba(20,25,45,.3);font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
@media (prefers-color-scheme:dark){ .ch-phone{border-color:#1F2228} }
.ch-stat{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 22px 2px 24px;font-size:.88em;background:#fff}
.ch-stat::before{content:"";position:absolute;left:50%;top:7px;width:84px;height:24px;margin-left:-42px;border-radius:999px;background:#0B0B0D}
.ch-stat .dm-sb{width:56px;height:12px}
.ch-top{padding:8px 12px 10px;gap:8px;border-bottom:1px solid #EEF0F3;background:#fff}
.ch-top::before{content:none}
.ch-back{display:grid;place-items:center;color:#3478F6}
.ch-ric{width:20px;height:20px;flex:none}
.ch-rav{display:flex;flex:none}
.ch-rav .ch-pp{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.ch-rav.many .ch-pp{width:28px;height:28px}.ch-rav.many .ch-pp+.ch-pp{margin-left:-10px}
.ch-rav.board{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#E3EEFB;color:#2F6FEB}
.ch-tt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ch-tt b{font-size:.98em;color:#1F2328;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-tt small{display:flex;align-items:center;gap:4px;color:#8A9099;font-family:inherit;font-size:.74em}
.ch-tt small i{width:7px;height:7px;border-radius:50%;background:#34C759}
.ch-tic{display:flex;gap:12px;color:#3478F6}
.ch-feed{background:linear-gradient(#F4F7FC,#E8EFF9)}
.ch-av .ch-pp{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.18);display:block}
.ch-av.anon{background:none;border:0}
.ch-nick{color:#7A828E}
.ch-bub{background:#fff;color:#1F2328;border:0;border-radius:18px 18px 18px 6px;padding:8px 13px;box-shadow:0 1px 3px rgba(0,0,0,.09)}
.ch-msg.me .ch-bub{background:linear-gradient(160deg,#4F95FF,#2F6FEB);color:#fff;border:0;border-radius:18px 18px 6px 18px;box-shadow:0 2px 6px rgba(47,111,235,.28)}
.ch-bub.stk,.ch-msg.me .ch-bub.stk{background:transparent;box-shadow:none}
.ch-bub.pic{padding:0;overflow:hidden;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ch-pic svg,.ch-pic .ch-photo{width:200px;height:auto;display:block;border-radius:0}
.ch-msg time{color:#9AA1AB}
.ch-sys{background:rgba(60,70,90,.09);color:#6B7380}
.ch-meta{color:#9AA1AB}
.ch-found .ch-bub,.ch-sys.ch-found{box-shadow:0 0 0 3px #E5484D,0 4px 12px rgba(229,72,77,.25)}
.ch-tap:hover .ch-bub,.ch-sys.ch-tap:hover{box-shadow:0 0 0 3px #9CC2FF}
html:not(.calm) .ch-typing{background:#fff;border:0;box-shadow:0 1px 3px rgba(0,0,0,.09);border-radius:18px 18px 18px 6px}
.ch-bar{gap:8px;margin:8px 10px 4px;padding:5px 5px 5px 10px;border:0;border-radius:999px;background:#F1F3F6;color:#9AA1AB}
.ch-bar input{background:#fff;border-color:#E3E6EB}
.ch-bar.fake span{flex:1;font-size:.9em}
.ch-bar.fake b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2F6FEB;color:#fff}
.ch-bar.fake b .ch-ric{width:15px;height:15px}
.ch-home{display:block;width:110px;height:5px;margin:6px auto 8px;border-radius:999px;background:#1F2328}
.ch-phone.ch-board .ch-feed{background:#fff}
.ch-phone.ch-board .ch-bub{box-shadow:none}

/* 7쪽 상황 카드 — 그림이 큰 카드, 올리면 그림이 살짝 커지고 「대화 시작하기」가 빛남 */
.ch-scenes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ch-scene{padding:0;gap:0;overflow:visible;border:0;border-radius:20px;background:var(--surface);box-shadow:0 10px 26px rgba(30,40,70,.13);transition:transform .2s cubic-bezier(.3,1.4,.6,1),box-shadow .2s}
.ch-scene:hover,.ch-scene:focus-visible{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 18px 36px rgba(30,40,70,.22)}
.sc-pic{position:relative;display:block;width:100%;border-radius:20px 20px 0 0;overflow:hidden}
.sc-art{display:block;width:100%;height:auto;transition:transform .35s}
.ch-scene:hover .sc-art{transform:scale(1.05)}
.sc-bk{position:absolute;right:10px;bottom:10px;padding:2px 9px;border-radius:999px;background:rgba(46,42,38,.78);color:#fff;font-family:var(--mono);font-size:.74em}
.sc-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;width:100%}
.ch-scene .sc-body b{font-family:var(--serif);font-size:1.2em}
.ch-scene .sc-body small{color:var(--muted);line-height:1.5}
.sc-go{align-self:flex-start;margin-top:8px;padding:7px 14px;border-radius:999px;background:var(--seal);color:#fff;font-weight:800;font-size:.9em;box-shadow:0 4px 10px rgba(194,69,45,.3);transition:transform .2s}
.ch-scene:hover .sc-go{transform:translateX(4px)}
.ch-scene.ok .sc-go{background:var(--leaf);box-shadow:0 4px 10px rgba(79,122,74,.3)}
.ch-scene .ch-seal{z-index:2}
.sc-fly{animation:sc-fly 2.6s ease-in-out infinite alternate}.sc-fly.b{animation-delay:-1.3s}
@keyframes sc-fly{from{transform:translateY(0)}to{transform:translateY(-6px)}}

/* 7쪽 대화 방식별 화면 — 영상 통화 · 전자 우편 · 온라인 게시판 */
.ch-way{font-size:.55em;vertical-align:middle;background:var(--sky-soft);color:var(--sky)}
.sk-video{background:#1B1F2A}
.sk-video .ch-stat,.sk-video .ch-top{background:#1B1F2A;color:#E8EBF2;border-color:#2A3040}
.sk-video .ch-tt b{color:#fff}
.ch-rec{width:10px;height:10px;border-radius:50%;background:#EA4335;box-shadow:0 0 0 4px rgba(234,67,53,.25)}
.ch-vid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;padding:6px 10px 8px;background:#1B1F2A}
.ch-vt{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#2A3040}
.ch-vt .ch-vp{width:100%;height:100%;display:block;object-fit:cover}
.ch-vt i{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:3px;padding:1px 7px 1px 4px;border-radius:7px;background:rgba(15,18,26,.62);color:#fff;font-style:normal;font-size:.72em}
.ch-mi{width:12px;height:12px}
.ch-vt.me{position:absolute;right:16px;bottom:14px;width:70px;aspect-ratio:3/4;border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.ch-vt.me i{left:4px;bottom:4px;padding:0 5px}
.sk-video .ch-feed{height:250px;background:#1B1F2A}
.sk-video .ch-nick,.sk-video .ch-msg time{color:#9BA3B4}
.sk-video .ch-bub{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.sk-video .ch-msg.me .ch-bub{background:rgba(79,149,255,.85)}
.sk-video .ch-sys{background:rgba(255,255,255,.1);color:#C9CFDB}
.sk-video .ch-bar{background:#262C3A}
.sk-video .ch-bar input{background:#1B1F2A;color:#fff;border-color:#3A4254}
.ch-bar.fake.vid{justify-content:center;gap:14px;color:#fff;background:transparent}
.ch-bar.fake.vid .ch-ric{width:38px;height:38px;padding:9px;border-radius:50%;background:#2E3546}
.ch-bar.fake.vid b.end{width:auto;height:auto;background:none}.ch-bar.fake.vid b.end .ch-ric{width:52px;border-radius:999px;background:#EA4335}
.sk-video .ch-home{background:#C9CFDB}
/* 전자 우편 — 말 하나가 편지 한 통 */
.ch-rav.mail{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#FFF3E0;color:#E65100}
.sk-mail .ch-feed{background:#F6F7F9}
.sk-mail .ch-in{gap:10px}
.sk-mail .ch-msg{position:relative;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sk-mail .ch-msg.me{flex-direction:row;background:#EEF4FF}
.sk-mail .ch-msg.me .ch-body{align-items:flex-start}
.sk-mail .ch-msg.me .ch-body::before{content:"보낸 편지 · 나";font-size:.78em;color:#2F6FEB;font-weight:700}
.sk-mail .ch-nick::after{content:" · 받은 편지";color:#9AA1AB}
.sk-mail .ch-bub,.sk-mail .ch-msg.me .ch-bub{background:none;color:#1F2328;box-shadow:none;padding:2px 0 0;border-radius:0}
.sk-mail .ch-msg time{position:absolute;right:12px;top:10px}
.sk-mail .ch-typing{display:none!important}
/* 게시판 화면에서 내가 쓴 댓글 — 말풍선 대신 「나」 표시가 붙은 한 줄 */
.ch-phone.ch-board .ch-msg.me{flex-direction:row;padding-left:10px;background:#F2F7FF}
.ch-phone.ch-board .ch-msg.me .ch-body{align-items:flex-start}
.ch-phone.ch-board .ch-msg.me .ch-body::before{content:"나";font-size:.78em;color:#2F6FEB;font-weight:800}
.ch-phone.ch-board .ch-msg.me .ch-bub{background:none;color:#1F2328;box-shadow:none;padding:0;border-radius:0}

/* 8쪽 다짐방 */
.ch-vowroom .ch-case{margin-top:10px}
.ch-vpre{flex:none;padding:6px 10px;border-radius:999px;background:#E3EEFB;color:#2F6FEB;font-weight:800;font-size:.8em;white-space:nowrap}

/* 8쪽 다짐방 들어가기 카드 · 다짐방 창 */
.vw-door{display:flex;align-items:center;gap:16px;width:100%;margin-top:8px;padding:16px 18px;border:0;border-radius:18px;background:linear-gradient(120deg,#E3EEFB,#FDE7EF);color:#1F2328;font:inherit;text-align:left;cursor:pointer;box-shadow:0 8px 20px rgba(30,40,70,.12);transition:transform .2s cubic-bezier(.3,1.4,.6,1),box-shadow .2s}
.vw-door:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(30,40,70,.18)}
.vw-door.done{background:linear-gradient(120deg,#E6F4E3,#FFF4D6)}
.vw-avs{display:flex;flex:none}.vw-avs .ch-pp{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 3px #fff}.vw-avs .ch-pp+.ch-pp{margin-left:-14px}
.vw-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.vw-txt small{color:#6B7380;font-weight:700}.vw-txt b{font-size:1.08em;line-height:1.45}
.vw-cheer{color:#E5484D;font-weight:800;font-size:.9em}
.vw-go{flex:none;padding:9px 16px;border-radius:999px;background:var(--seal);color:#fff;font-weight:800;box-shadow:0 4px 10px rgba(194,69,45,.3)}
.vw-door.done .vw-go{background:var(--leaf);box-shadow:0 4px 10px rgba(79,122,74,.3)}
.vw-dlg{width:min(820px,calc(100vw - 20px))}
.vw-body{display:grid;grid-template-columns:minmax(0,370px) 1fr;gap:18px;align-items:start;padding:4px 18px 18px}
.vw-body .ch-feed{height:430px}
.vw-side .chips{margin-top:8px}
@media (max-width:720px){.vw-body{grid-template-columns:1fr;padding:4px 10px 12px}.vw-body .ch-feed{height:340px}.vw-door{flex-wrap:wrap}.vw-go{width:100%;text-align:center}}

/* 9쪽 표어 포스터(poster.js) — 종이는 277×190mm, 화면에서는 .pz-fr 안에서 줄여 보인다 */
.pz{position:relative;width:277mm;height:190mm;overflow:hidden;background:var(--pc);color:#2B2523;font-family:"Jua",sans-serif;line-height:1.22;word-break:keep-all;-webkit-print-color-adjust:exact;print-color-adjust:exact}
#printroot .pz{display:block;background:var(--pc)}
#printroot .pz-news{background:#FBF8F1}#printroot .pz-color{background:#fff}
.pz-t{display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;font-weight:400}
.pz-by{position:absolute;right:12mm;bottom:6mm;margin:0;font-family:"Gowun Dodum",sans-serif;font-size:11pt;color:#5A524C}
.pz-by b{font-weight:700;color:#2B2523}
.pz-stk{position:absolute;right:12mm;top:9mm;width:30mm;height:30mm;transform:rotate(12deg);z-index:3}
.pz-stk svg{width:100%;height:100%;display:block}
/* 말풍선 */
.pz-bub{position:absolute;left:16mm;top:12mm;width:240mm;height:110mm;background:#fff;border:1.2mm solid #2B2523;border-radius:24mm;box-shadow:3mm 3mm 0 var(--pa)}
.pz-bub .pz-t{position:absolute;inset:8mm 14mm;font-size:60pt}
.pz-tail{position:absolute;left:36mm;bottom:-15.5mm;width:22mm;height:18mm}
.pz-kids{position:absolute;left:24mm;bottom:12mm;display:flex;gap:5mm}
.pz-kids svg{width:30mm;height:30mm;border-radius:50%;border:1mm solid #fff;box-shadow:0 1mm 2mm rgba(0,0,0,.15)}
/* 교통 표지판 */
.pz-dia{position:absolute;left:24mm;top:22mm;width:80mm;height:80mm;transform:rotate(45deg);background:#FFD54F;border:2.4mm solid #2B2523;border-radius:6mm;box-shadow:inset 0 0 0 2.4mm #FFD54F,inset 0 0 0 3.4mm #2B2523;z-index:2}
.pz-dia>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-45deg)}
.pz-dia b{font-size:52pt;line-height:1}.pz-dia span{font-size:22pt}
.pz-pole{position:absolute;left:60mm;top:110mm;width:8mm;height:62mm;background:#9AA3B2;border:1mm solid #2B2523}
.pz-sbox{position:absolute;left:126mm;top:20mm;width:138mm;height:128mm;display:flex;flex-direction:column}
.pz-kick{margin:0 0 4mm;font-size:18pt;color:var(--pa)}
.pz-sbox .pz-t{flex:1;font-size:56pt;justify-content:flex-start;text-align:left}
.pz-road{position:absolute;left:0;right:0;bottom:0;height:20mm;background:linear-gradient(90deg,#fff 0 18mm,transparent 18mm) 0 50%/34mm 2.4mm repeat-x,#4A4E57}
.pz-sign .pz-by{bottom:23mm}
/* 휴대 전화 알림 */
.pz-left{position:absolute;left:18mm;top:18mm;width:148mm;height:150mm;display:flex;flex-direction:column}
.pz-bell{margin:0 0 6mm;align-self:flex-start;padding:2mm 6mm;border-radius:20mm;background:var(--pa);color:#fff;font-size:16pt}
.pz-left .pz-t{flex:1;font-size:58pt;justify-content:flex-start;text-align:left}
.pz-ph{position:absolute;right:24mm;top:9mm;width:82mm;height:166mm;padding:3mm;border-radius:15mm;background:#1F2228;box-shadow:3mm 4mm 0 rgba(0,0,0,.12)}
.pz-scr{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;padding-top:15mm;border-radius:12mm;background:linear-gradient(160deg,var(--pa),#1B1F2A);color:#fff}
.pz-isl{position:absolute;top:3mm;width:22mm;height:6mm;border-radius:6mm;background:#000}
.pz-time{font-size:40pt;line-height:1}.pz-date{margin-top:1mm;font-family:"Gowun Dodum",sans-serif;font-size:10pt;opacity:.85}
.pz-noti{display:flex;gap:3mm;width:72mm;margin-top:10mm;padding:3mm;border-radius:6mm;background:rgba(255,255,255,.9);color:#1F2328;text-align:left}
.pz-app{flex:none;width:10mm;height:10mm;border-radius:3mm;background:var(--pa)}
.pz-noti small{display:block;font-family:"Gowun Dodum",sans-serif;font-size:8pt;color:#6B7380}.pz-noti b{font-weight:400;font-size:12pt}
.pz-phone .pz-stk{right:auto;left:150mm;top:8mm}
/* 손팻말 */
.pz-board{position:absolute;left:30mm;top:10mm;width:217mm;height:104mm;background:#fff;border:1.6mm solid #2B2523;border-radius:6mm;box-shadow:3mm 3mm 0 var(--pa);z-index:2}
.pz-board .pz-t{position:absolute;inset:8mm 12mm;font-size:56pt}
.pz-stick{position:absolute;left:134mm;top:112mm;width:9mm;height:60mm;background:#C8A27C;border:1mm solid #2B2523}
.pz-kid{position:absolute;left:101mm;bottom:0;width:76mm;height:76mm;z-index:2}.pz-pp{width:100%;height:100%;display:block}
.pz-hand{position:absolute;top:158mm;width:12mm;height:10mm;border-radius:50%;background:#F3C9A8;border:.6mm solid #C98C6B;z-index:3}.pz-hand.l{left:128mm}.pz-hand.r{left:138mm;top:164mm}
.pz-picket .pz-stk{top:6mm;right:22mm}
/* 우리 반 신문 */
.pz-news{background:#FBF8F1}
.pz-mast{position:absolute;left:14mm;right:14mm;top:8mm;display:flex;align-items:baseline;justify-content:space-between;padding-bottom:3mm;border-bottom:1.6mm double #2B2523}
.pz-mast b{font-family:"Gowun Batang",serif;font-weight:700;font-size:34pt}.pz-mast span{font-family:"Gowun Dodum",sans-serif;font-size:10pt}
.pz-tag{position:absolute;left:14mm;top:36mm;margin:0;padding:1mm 5mm;background:#E53935;color:#fff;font-size:16pt}
.pz-news .pz-t{position:absolute;left:14mm;right:14mm;top:48mm;height:56mm;justify-content:flex-start;text-align:left;font-family:"Gowun Batang",serif;font-weight:700;font-size:48pt}
.pz-cols{position:absolute;left:14mm;right:14mm;top:110mm;bottom:16mm;display:grid;grid-template-columns:1.1fr 1fr;gap:8mm}
.pz-photo{display:flex;flex-wrap:wrap;align-content:flex-start;gap:3mm;padding:4mm;background:var(--pc);border:.6mm solid #2B2523}
.pz-photo svg{width:26mm;height:26mm;border-radius:4mm}.pz-photo small{width:100%;font-family:"Gowun Dodum",sans-serif;font-size:9pt}
.pz-lines i{display:block;height:3mm;margin:0 0 4mm;border-radius:1mm;background:#D6CFC2}.pz-lines i:nth-child(3n){width:70%}
.pz-news .pz-stk{top:32mm}
/* 색칠용 */
.pz-color{background:#fff}
.pz-frame-d{position:absolute;inset:6mm;border:1mm dashed #2B2523;border-radius:10mm}
.pz-color .pz-t{position:absolute;left:22mm;right:22mm;top:20mm;height:108mm;font-size:66pt;color:#fff;-webkit-text-stroke:.9mm #2B2523;paint-order:stroke fill}
.pz-faces{position:absolute;left:0;right:0;bottom:22mm;display:flex;justify-content:center;gap:12mm}.pz-faces svg{width:24mm;height:24mm}

/* 9쪽 화면 — 미리 보기 칸 */
.pz-fr{position:relative;display:block;width:100%;aspect-ratio:277/190;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pz-fr .pz{position:absolute;left:0;top:0;transform-origin:0 0}
.pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:10px}
.pz-pick{display:flex;flex-direction:column;gap:6px;padding:8px;border:2.5px solid transparent;border-radius:16px;background:var(--surface);font:inherit;color:var(--ink);cursor:pointer;transition:transform .2s,border-color .2s}
.pz-pick:hover{transform:translateY(-3px)}
.pz-pick.on{border-color:var(--seal);box-shadow:0 0 0 4px var(--seal-soft)}
.pz-pick b{font-size:.95em}
.pz-deco{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:18px;align-items:start;margin-top:8px}
.pz-big{border-radius:14px;box-shadow:0 10px 26px rgba(30,40,70,.16)}
.pz-ctl .ask{margin:0 0 6px}
.pz-sw{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pz-c{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border:2px solid var(--rule);border-radius:999px;background:var(--surface);font:inherit;font-size:.9em;color:var(--ink);cursor:pointer}
.pz-c i{width:20px;height:20px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 20px var(--ac)}
.pz-c i{background:linear-gradient(135deg,var(--bg) 50%,var(--ac) 50%)}
.pz-c.on,.pz-s.on{border-color:var(--seal);box-shadow:0 0 0 3px var(--seal-soft)}
.pz-s{width:50px;height:50px;padding:6px;border:2px solid var(--rule);border-radius:14px;background:var(--surface);cursor:pointer}
.pz-s svg{width:100%;height:100%;display:block}
@media (max-width:760px){.pz-deco{grid-template-columns:1fr}}