/* 오가는 마음 — 「마음 편지」 모양. 화면은 lt-, 인쇄는 #printroot .pr-lt-
   짜임 일곱 색(lt-c0~6): 받는 사람 파랑 · 첫인사 초록 · 전하고 싶은 말 노랑 · 끝인사 분홍 · 쓴 날짜 보라 · 쓴 사람 주홍 · 추신 청록 */
.lt-c0{--c:#3B6EA5} .lt-c1{--c:#4F7A4A} .lt-c2{--c:#A9781A} .lt-c3{--c:#B0446A} .lt-c4{--c:#6B55A8} .lt-c5{--c:#C2452D} .lt-c6{--c:#2F7F86}
@media (prefers-color-scheme:dark){ .lt-c0{--c:#8DB4E0} .lt-c1{--c:#93BE8B} .lt-c2{--c:#E6C46E} .lt-c3{--c:#EBA0B9} .lt-c4{--c:#B9A6E6} .lt-c5{--c:#E2795F} .lt-c6{--c:#7EC7CC} }
.lt-h{margin:0 0 4px}
.lt-lead{color:var(--muted);margin:0 0 16px;max-width:44em;line-height:1.7}
.lt-lead b{color:var(--ink)}
.lt-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.lt-side .ask:first-child{margin-top:0}
@media (max-width:820px){ .lt-two{grid-template-columns:1fr} }
.lt-mk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.78em;font-weight:700;flex:none}
.lt-mk.ok{background:var(--leaf-soft);color:var(--leaf)} .lt-mk.no{background:var(--amber-soft);color:var(--amber)}

/* 편지지 — 손글씨. 위쪽 옅은 띠와 접힌 모서리 */
.lt-paper{position:relative;background:var(--letter);border:1px solid var(--rule);border-radius:6px 22px 6px 6px;box-shadow:var(--shadow);padding:22px clamp(16px,calc(3 * var(--vw,1vw)),30px) 20px;
  font-family:var(--hand);font-size:1.55em;line-height:1.55;color:var(--ink)}
.lt-paper::before{content:"";position:absolute;top:0;right:0;width:22px;height:22px;background:linear-gradient(225deg,var(--paper) 50%,var(--sunken) 50%);border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0 22px 0 6px}
.lt-paper p{margin:.15em 0}
.lt-paper .r,.lt-paper p.r{text-align:right}
.lt-recv{font-size:1.08em}

/* 1쪽: 이름표 붙이기 */
.lt-part{position:relative;border-left:4px solid transparent;border-radius:6px;padding:4px 8px 4px 10px;margin:2px 0 2px -14px;transition:background .2s,border-color .2s}
.lt-model.picking .lt-part:not(.on){cursor:pointer;outline:1.5px dashed color-mix(in srgb,var(--faint) 55%,transparent);outline-offset:-1px}
.lt-model.picking .lt-part:not(.on):hover{background:var(--sunken)}
.lt-part.on{border-left-color:var(--c);background:color-mix(in srgb,var(--c) 9%,transparent)}
.lt-part.on.r{text-align:right}
.lt-lab{display:inline-block;font-family:var(--cute);font-size:13px;line-height:1.5;color:#fff;background:var(--c);border-radius:999px;padding:0 10px;margin:0 0 2px;vertical-align:top}
@media (prefers-color-scheme:dark){ .lt-lab{color:#1A1917} }
.lt-part.r .lt-lab{float:left}
.lt-part.pop .lt-lab{animation:bounce .5s cubic-bezier(.2,1.6,.4,1)}
.lt-tray{position:sticky;top:64px;z-index:2;background:var(--surface);border:1.5px solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow)}
.lt-trayh{margin:0 0 8px;font-weight:600}
.lt-tags{display:flex;flex-wrap:wrap;gap:7px}
.lt-tag{font-family:var(--cute);font-size:1em;min-height:42px;padding:4px 14px;border-radius:999px;border:2px solid var(--c);color:var(--c);background:var(--surface);cursor:pointer;transition:transform .15s,background .15s}
.lt-tag:hover{transform:translateY(-1px)}
.lt-tag.sel{background:var(--c);color:var(--surface);transform:translateY(-2px);box-shadow:0 6px 14px -8px var(--c)}
.lt-tag.used{opacity:.45;border-style:dashed;cursor:default;transform:none}
.lt-fb{min-height:1.4em;margin:8px 2px 0;font-size:.95em}
.lt-fb small{display:block;color:var(--muted);font-size:.92em}
.lt-order{font-weight:500} .lt-order b{display:block;margin-bottom:2px}
.chip.lt-okc,.chip.lt-okc:disabled{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf);opacity:1}
.chip.lt-noc{background:var(--seal-soft);border-color:var(--seal);color:var(--seal)}
.lt-trayn{display:none}
@media (max-width:820px){ .lt-trayw{display:none} .lt-trayn{display:block;top:52px;margin:0 0 12px;padding:10px 12px} .lt-trayn .lt-tag{min-height:38px;padding:3px 11px;font-size:.95em} .lt-trayn .lt-trayh{font-size:.92em;margin-bottom:6px} .lt-trayn .lt-fb{font-size:.88em} }

/* 2쪽: 높임 바꾸기 */
.lt-hon .lt-hl,.lt-note .lt-hl{margin:.12em 0}
.lt-tok{font:inherit;color:inherit;background:none;border:0;padding:0 2px;margin:0;border-radius:6px;cursor:default;line-height:1.35}
.lt-tok.hon{color:var(--sky);font-weight:700}
.lt-hon.picking .lt-tok{cursor:pointer;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--faint) 45%,transparent)}
.lt-hon.picking .lt-tok:hover{background:var(--sunken)}
.lt-tok.pred{background:var(--yel-soft);box-shadow:inset 0 -3px 0 var(--yel-mid) !important}
.lt-tok.hit{background:var(--leaf-soft);color:var(--leaf);box-shadow:inset 0 0 0 2px var(--leaf)}
.lt-tok.miss{background:var(--seal-soft);color:var(--seal);box-shadow:inset 0 0 0 2px var(--seal)}
.lt-tok.over{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1.5px}
.lt-tok.flipin{display:inline-block;animation:ltflip .6s ease-out both}
@keyframes ltflip{0%{transform:rotateX(90deg);opacity:0}60%{transform:rotateX(-12deg);opacity:1}100%{transform:none}}
.lt-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.86em;margin:6px 0 0}
.lt-legend .lt-tok{font-family:var(--sans);padding:1px 8px}
.lt-readers{display:grid;gap:8px}
.lt-reader{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 12px;border:1.5px solid var(--rule);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,transform .15s}
.lt-reader:hover:not(:disabled){border-color:var(--faint);transform:translateX(2px)}
.lt-reader span{display:flex;flex-direction:column;line-height:1.3} .lt-reader small{font-size:.8em}
.lt-reader em{margin-left:auto;font-style:normal;font-family:var(--cute);font-size:.85em;color:var(--seal);background:var(--seal-soft);border-radius:999px;padding:0 10px}
.lt-reader.now{background:var(--sunken);cursor:default}
.lt-reader.tgt{border-color:var(--sky);background:var(--sky-soft)}
.lt-predtip .row{margin-top:10px}
.lt-predn{font-family:var(--mono);font-size:.82em;color:var(--muted);margin-left:4px}
.lt-res{line-height:1.7}
.lt-notew{margin-top:26px;padding-top:6px;border-top:1px dashed var(--rule)}
.lt-note{max-width:620px}
/* 맞게 쓴 낱말도 틀린 낱말과 똑같이 밑줄 — 밑줄이 답을 알려 주지 않게 */
.lt-note .lt-tok[data-fine]{cursor:pointer;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--faint) 45%,transparent)}
.lt-note .lt-tok[data-fine]:hover,.lt-tok.err:hover{background:var(--sunken)}
.lt-tok.err{cursor:pointer;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--faint) 45%,transparent)}
.lt-tok.err.open{background:var(--yel-soft)}
.lt-tok.fixed{color:var(--leaf);font-weight:700;background:var(--leaf-soft)}
.lt-errw{position:relative;display:inline-block}
.lt-pop{position:absolute;left:0;top:100%;z-index:3;display:flex;gap:6px;padding:8px;background:var(--surface);border:1.5px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);font-family:var(--sans);font-size:15px;white-space:nowrap;animation:up .2s ease-out}
.lt-hl.r .lt-pop{left:auto;right:0}

/* 3쪽: 누구에게 */
.lt-people{display:grid;gap:10px;margin:4px 0 6px}
.lt-pg{display:grid;grid-template-columns:7em 1fr;gap:8px;align-items:start}
.lt-pg .cl{padding-top:10px}
@media (max-width:600px){ .lt-pg{grid-template-columns:1fr} .lt-pg .cl{padding-top:0} }
.lt-upb{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){ .lt-upb{grid-template-columns:1fr} }
.lt-upc{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 16px;border:1.5px solid var(--rule);border-radius:16px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.lt-upc span{display:flex;flex-direction:column;gap:2px} .lt-upc b{font-size:1.06em} .lt-upc small{font-size:.84em}
.lt-upc:hover{border-color:var(--faint)}
.lt-upc.on{border-color:var(--seal);background:var(--seal-soft)}
.lt-recvprev{margin:14px 0 0;color:var(--muted)}
.lt-handi{font-family:var(--hand);font-size:1.6em;color:var(--ink);line-height:1.4}

/* 4쪽: 어떤 마음 */
.lt-hearts{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.lt-heart{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border:1.5px solid var(--rule);border-radius:16px;background:var(--surface);cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.lt-heart b{font-family:var(--serif);font-size:1em}
.lt-heart:hover{transform:translateY(-2px);border-color:var(--faint)}
.lt-heart.on{border-color:var(--seal);background:var(--seal-soft);transform:translateY(-2px)}
.lt-feel .linkbtn{margin-left:6px;font-size:.9em}
.lt-bodyprev{margin:18px 0 0;padding:12px 16px 10px;background:var(--letter);border:1px solid var(--rule);border-radius:12px}
.lt-bodyprev .lt-handi{margin:4px 0 0;font-size:1.5em}

/* 5쪽: 짜임대로 놓기 */
.lt-namef{margin:0 0 14px}
.lt-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.lt-prevw{position:sticky;top:64px}
.lt-prevh{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--muted)}
.lt-prevh b{color:var(--ink)}
@media (max-width:820px){ .lt-build{grid-template-columns:1fr} .lt-prevw{position:static;order:-1} }
.lt-rows{display:grid;gap:10px}
.lt-row{border:1px solid var(--rule);border-left:4px solid var(--c);border-radius:12px;padding:10px 12px;background:var(--surface)}
.lt-row.ok{background:color-mix(in srgb,var(--c) 5%,var(--surface))}
.lt-rowh{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--c);margin-bottom:6px}
.lt-rowh small{font-weight:400}
.lt-dot{width:9px;height:9px;border-radius:50%;background:var(--c)}
.lt-ch{display:flex;flex-direction:column;gap:6px}
.lt-o{text-align:left;padding:8px 12px;min-height:44px;border:1.5px solid var(--rule);border-radius:10px;background:var(--surface);cursor:pointer;line-height:1.45;transition:border-color .15s,background .15s}
.lt-o:hover{border-color:var(--faint)}
.lt-o.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--surface));font-weight:600}
.lt-o.none{color:var(--muted);font-style:normal}
.lt-fixed{margin:0;color:var(--muted);font-size:.95em}
.lt-psin{margin-top:8px}
/* 미리 보기 편지지 — 짜임마다 옅은 이름 */
.lt-prev{font-size:1.45em}
.lt-pp{position:relative;padding:2px 6px 2px 8px;margin:0 0 2px -10px;border-left:3px solid transparent;border-radius:4px;transition:background .3s}
.lt-ppl{display:block;font-family:var(--sans);font-size:11px;line-height:1.4;color:var(--c);opacity:.8;letter-spacing:.02em}
.lt-pp.r{text-align:right}
.lt-pp.void .lt-ppt{color:var(--faint)}
.lt-pp.hl,.lt-pp.flash{border-left-color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
.lt-pp.flash{animation:ltflash 1.2s ease-out}
@keyframes ltflash{0%{background:color-mix(in srgb,var(--c) 26%,transparent)}}

/* 6쪽: 읽는 사람 자리에서 */
.lt-seatw{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start;margin:0 0 18px}
@media (max-width:700px){ .lt-seatw{grid-template-columns:1fr} }
.lt-seat{display:flex;flex-direction:column;align-items:center;gap:8px;position:sticky;top:64px}
@media (max-width:700px){ .lt-seat{position:static;flex-direction:row} }
.lt-face .mood{width:110px;height:110px}
@media (max-width:700px){ .lt-face .mood{width:72px;height:72px} }
.lt-say{position:relative;margin:0;background:var(--surface);border:1.5px solid var(--ink);border-radius:14px;padding:8px 12px;font-family:var(--cute);font-size:1.02em;text-align:center}
.lt-seatw .lt-prev{font-size:1.35em}
.lt-checks{display:grid;gap:12px}
.lt-q{border:1px solid var(--rule);border-radius:14px;padding:12px 14px;background:var(--surface)}
.lt-q.done{border-color:#B9D3B2}
.lt-qq{display:flex;gap:10px;align-items:center;margin:0 0 8px;font-weight:700;font-family:var(--serif);font-size:1.08em}
.lt-qn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.8em;flex:none}
.lt-fact{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:8px 10px;border-radius:10px;background:var(--sunken);font-size:.95em}
.lt-fact small{display:block;font-size:.8em;color:var(--faint)}
.lt-fact.warn{background:var(--amber-soft)}
.lt-yn{display:flex;gap:8px}
.lt-ynb{min-width:96px;min-height:46px;border:1.5px solid var(--rule);border-radius:12px;background:var(--surface);font-weight:700;cursor:pointer}
.lt-ynb:hover{border-color:var(--faint)}
.lt-ynb.on{border-color:var(--sky);background:var(--sky-soft);color:var(--sky)}
.lt-again,.lt-notip{margin:10px 0 0}
.lt-again .row{margin-top:8px}
.lt-keptn{margin:8px 0 0}

/* 7쪽: 봉투 */
.lt-envw{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start;margin:0 0 6px}
@media (max-width:820px){ .lt-envw{grid-template-columns:1fr} }
.lt-envbox{background:var(--sunken);border-radius:18px;padding:14px}
.lt-envsvg{width:100%;height:auto}
.lt-zone{cursor:pointer}
.lt-zone .lt-zbg{fill:transparent;stroke:#B9AF9C;stroke-width:1.6;stroke-dasharray:5 5;transition:fill .15s}
.lt-zone:hover .lt-zbg,.lt-zone:focus .lt-zbg{fill:rgba(59,110,165,.08);stroke:#3B6EA5}
.lt-zone:focus{outline:none}
.lt-zone.ok .lt-zbg{fill:rgba(79,122,74,.08);stroke:#4F7A4A;stroke-dasharray:none}
.lt-zq{margin-top:0}
.lt-zdone{margin-top:0;font-weight:500}
.lt-popts{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lt-popts .lt-sub{margin-left:30px;font-size:.94em}

/* ---------- 인쇄 ---------- */
#printroot .pr-lt-hd{flex:none;display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;padding-bottom:1.6mm;border-bottom:.5mm solid #2B2523;margin-bottom:3mm}
#printroot .pr-lt-hd h1{font-size:18pt;line-height:1.15}
#printroot .pr-lt-h3{flex:none;font-size:11.5pt;margin:3mm 0 1.6mm;color:#2B2523}
#printroot .pr-lt-h3 small{font-family:"Gowun Dodum",sans-serif;font-size:8.4pt;color:#8C877E;margin-left:2mm}
#printroot .pr-lt-tb,#printroot .pr-lt-ck{flex:none;width:100%;border-collapse:collapse;font-size:10pt}
#printroot .pr-lt-tb th,#printroot .pr-lt-ck th{background:#F3F1EA;font-weight:400;color:#4A453F;text-align:left;padding:1.4mm 2.4mm;border:.3mm solid #CFC8BA;font-size:9pt}
#printroot .pr-lt-tb th{width:38mm}
#printroot .pr-lt-tb td,#printroot .pr-lt-ck td{border:.3mm solid #CFC8BA;padding:1.4mm 2.4mm;vertical-align:top}
#printroot .pr-lt-tb td{height:9mm;max-height:13mm;overflow:hidden}
#printroot .pr-lt-tag{font-size:8.4pt;color:#94650F;background:#FCF2D6;border-radius:99px;padding:.2mm 2.4mm;margin-left:2mm}
#printroot .pr-lt-grid{flex:none;display:grid;grid-template-columns:27mm 1fr;border:.4mm solid #2B2523;border-radius:1.6mm;overflow:hidden}
#printroot .pr-lt-k{font-family:"Jua",sans-serif;font-size:9.4pt;color:#fff;background:var(--c);padding:1.4mm 2mm;border-top:.25mm solid #fff;display:flex;align-items:center}
#printroot .pr-lt-v{font-family:"Nanum Pen Script",cursive;font-size:15pt;line-height:1.25;padding:1mm 3mm;border-top:.25mm solid #E2DED4;max-height:30mm;overflow:hidden;background:#FFFDF7}
#printroot .pr-lt-v.r{text-align:right}
#printroot .pr-lt-k:first-child,#printroot .pr-lt-k:first-child + .pr-lt-v{border-top:0}
#printroot .pr-lt-empty{font-family:"Gowun Dodum",sans-serif;font-size:8.6pt;color:#B9AF9C}
#printroot .pr-lt-ck td{font-size:9pt;height:9mm;max-height:12mm;overflow:hidden}
#printroot .pr-lt-ck td:first-child{width:52mm}
#printroot .pr-lt-ck .pr-lt-a{width:15mm;text-align:center;font-family:"Jua",sans-serif;font-size:11pt}
#printroot .pr-lt-ck th:nth-child(2){text-align:center}
#printroot .pr-lt-lines{flex:1;min-height:0;overflow:hidden}
#printroot .pr-lt-lines .wl{height:8.4mm}
/* 손으로 쓸 편지지 */
#printroot .pr-lt-frame{flex:1;display:flex;flex-direction:column;border:.6mm solid #D9C9A8;border-radius:5mm;padding:6mm 7mm 5mm;background:#FFFDF7;outline:.3mm solid #EFE6D3;outline-offset:-2.2mm}
#printroot .pr-lt-ph{flex:none;display:flex;align-items:center;justify-content:center;gap:4mm;font-family:"Jua",sans-serif;font-size:13pt;color:#B57A1F;margin-bottom:3mm}
#printroot .pr-lt-ph b{font-weight:400}
#printroot .pr-lt-corner{width:12mm;height:9mm}
#printroot .pr-lt-c2 .pr-lt-corner{transform:scaleX(-1)}
#printroot .pr-lt-rows{flex:1;display:flex;flex-direction:column}
#printroot .pr-lt-ln{position:relative;flex:1;border-bottom:.3mm solid #D9CFBE;margin-left:20mm;display:flex;align-items:flex-end}
#printroot .pr-lt-gut{position:absolute;left:-20mm;bottom:1mm;width:18mm;font-size:7.4pt;color:#C2B59C;line-height:1.1}
#printroot .pr-lt-pre{font-family:"Nanum Pen Script",cursive;font-size:19pt;line-height:1;color:#2B2523;padding:0 0 .6mm 1mm}
#printroot .pr-lt-foot{flex:none;margin:2.4mm 0 0;font-size:8pt;color:#A9A39A;text-align:center}
/* 편지봉투 도안 */
#printroot .pr-lt-netw{flex:none;display:flex;justify-content:center}
#printroot .pr-lt-net{display:block}
#printroot .pr-lt-how{flex:none;margin:2mm 0 0;padding-left:5mm;font-size:9.6pt;display:grid;grid-template-columns:1fr 1fr;gap:.6mm 6mm}
#printroot .pr-lt-tip{flex:none;margin:2mm 0 0;font-size:9pt;color:#6E6A63;background:#F3F1EA;border-radius:1.6mm;padding:2mm 3mm}
/* 인쇄는 기기가 어두운 화면이어도 종이 색으로 */
#printroot .lt-c0{--c:#3B6EA5} #printroot .lt-c1{--c:#4F7A4A} #printroot .lt-c2{--c:#A9781A} #printroot .lt-c3{--c:#B0446A} #printroot .lt-c4{--c:#6B55A8} #printroot .lt-c5{--c:#C2452D} #printroot .lt-c6{--c:#2F7F86}

/* 7~8차시 보탬: 238쪽 경험·좋은 점, 240쪽 쓰는 방법, 241쪽 정리 */
.lt-jeongjo{margin:0 0 12px}
.lt-ex{margin:0 0 18px}
.lt-ex .ask+.chips,.lt-exq+.chips{margin-bottom:8px}
.lt-exq{margin:8px 0 6px;font-weight:700}
.lt-ex .ch-in1{margin:4px 0 16px}
.lt-how,.lt-sum{margin-top:16px}
.lt-clue{margin:6px 0 12px;padding:12px 14px;border-radius:12px;background:var(--sunken);font-size:1.1em;font-weight:700}
.lt-howl,.lt-suml{margin:6px 0;padding-left:1.2em;line-height:2}
.lt-howl b{padding:1px 8px;border-radius:8px;margin-right:4px}
.lt-filled{color:var(--leaf)}
.lt-blank .chip{margin:0 2px}
/* 9~10차시 보탬 */
.lt-recall{margin:0 0 10px}
.lt-ideas,.lt-send{margin:0 0 16px}
.lt-send{margin-top:16px}
.lt-ideas ul,.lt-send ul{margin:6px 0;padding-left:1.2em;line-height:1.8}
.lt-more{margin:6px 0 0}
.lt-reread{margin:8px 0 0}

/* 1쪽 마음을 담은 옛 편지(oldletters.js) — 끝 장면이 기본, .play 일 때 봉투가 열리고 한 줄씩 펼쳐진다 */
.lo-envs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 4px}
.lo-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--rule);border-radius:16px;background:var(--surface);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s}
.lo-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(30,40,70,.14)}
.lo-card.on{border-color:var(--seal);box-shadow:0 0 0 3px var(--seal-soft)}
.lo-card small{display:block;color:var(--muted);font-size:.82em}
.lo-card em{position:absolute;right:-6px;top:-10px;padding:0 8px;border:2px solid var(--leaf);border-radius:999px;background:var(--surface);color:var(--leaf);font-style:normal;font-size:.76em;font-weight:700;transform:rotate(8deg)}
.lo-mini{position:relative;flex:none;width:56px;height:38px;border-radius:5px;background:#F4E6C8;box-shadow:0 2px 6px rgba(0,0,0,.18);overflow:hidden}
.lo-mini::before{content:"";position:absolute;inset:0 0 40% 0;background:#E9D3A8;clip-path:polygon(0 0,100% 0,50% 100%)}
.lo-mini i{position:absolute;left:50%;top:45%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%}
.lo-empty{display:grid;place-items:center;min-height:200px;margin:14px 0;border:2px dashed var(--rule);border-radius:20px;color:var(--muted)}
.lo-stage{position:relative;display:grid;place-items:center;min-height:470px;margin:16px 0 8px;padding:36px 16px 56px;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(20,25,45,.22)}
.lo-bg{position:absolute;inset:0;width:100%;height:100%}
.lo-fx{position:absolute;inset:0;pointer-events:none}
.lo-fx i{position:absolute;display:block}
.lo-jj .lo-fx i{top:-20px;width:14px;height:10px;border-radius:70% 0;background:#E2553A;animation:lo-fall 7s linear var(--d) infinite}
.lo-ahn .lo-fx i{top:60px;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.8;animation:lo-snow 4s linear var(--d) infinite}
.lo-ds .lo-fx i{width:4px;height:4px;border-radius:50%;background:#fff;animation:lo-tw 1.8s ease-in-out var(--d) infinite alternate}
@keyframes lo-fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--x,0),520px) rotate(540deg)}}
@keyframes lo-snow{from{transform:translateY(0);opacity:0}15%{opacity:.9}to{transform:translateY(130px);opacity:0}}
@keyframes lo-tw{from{opacity:.2}to{opacity:1}}
.lo-env{position:absolute;left:50%;top:50%;width:240px;height:150px;margin:-75px 0 0 -120px;opacity:0;z-index:2;perspective:700px}
.lo-back{position:absolute;inset:0;border-radius:8px;background:#E3CFA6}
.lo-front{position:absolute;inset:0;border-radius:8px;background:#F4E6C8;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.lo-flap{position:absolute;left:0;right:0;top:0;height:60%;background:#EDDAB2;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:2}
.lo-seal{position:absolute;left:50%;top:50%;width:32px;height:32px;margin-left:-16px;border-radius:50%;z-index:3;box-shadow:inset 0 0 0 3px rgba(255,255,255,.28),0 2px 4px rgba(0,0,0,.3)}
.lo-paper{position:relative;z-index:1;width:min(560px,92%);padding:26px 30px 22px;border-radius:4px;color:#3A2E22;font-family:"Gowun Batang",serif;font-size:clamp(15px,1.9vw,18px);line-height:1.9;transform-origin:center top;
  background:radial-gradient(circle at 20% 30%,rgba(180,150,100,.10) 0 2px,transparent 3px) 0 0/23px 19px,radial-gradient(circle at 70% 60%,rgba(180,150,100,.08) 0 1px,transparent 2px) 0 0/17px 13px,linear-gradient(#FBF3E2,#F2E4C6);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.lo-paper p{margin:0}
.lo-to{margin:0 0 10px!important;font-weight:700;font-size:1.1em}
.lo-from{margin-top:12px!important;text-align:right;font-weight:700}
.lo-cap{position:absolute;left:16px;bottom:12px;margin:0;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:.88em}
.lo-ctx{margin:6px 0 4px;color:var(--muted)}.lo-ctx small{display:block;color:var(--faint)}
.lo-q{margin-top:12px}.lo-sum{margin-top:14px}.lo-sum ul{margin:6px 0 12px;padding-left:1.2em;line-height:1.9}
/* 펼쳐지기 */
.play .lo-env{animation:lo-envin .6s cubic-bezier(.2,1.3,.5,1) both,lo-envout .6s 2.1s forwards}
.play .lo-flap{animation:lo-flap .5s .8s forwards}
.play .lo-seal{animation:lo-seal .3s .7s forwards}
.play .lo-paper{animation:lo-paper 1.4s cubic-bezier(.3,1.1,.5,1) 1.3s both}
.play .lo-ln{animation:lo-ln .8s ease-out var(--d) both}
@keyframes lo-envin{from{opacity:0;transform:translateY(-60px) scale(.8)}to{opacity:1;transform:none}}
@keyframes lo-envout{to{opacity:0;transform:translateY(70px) scale(.9)}}
@keyframes lo-flap{to{transform:rotateX(180deg)}}
@keyframes lo-seal{to{opacity:0;transform:scale(1.5)}}
@keyframes lo-paper{0%{opacity:0;transform:translateY(60px) scale(.45,.12)}45%{opacity:1;transform:translateY(0) scale(.6,.16)}100%{opacity:1;transform:none}}
@keyframes lo-ln{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:720px){.lo-envs{grid-template-columns:1fr}.lo-stage{min-height:0;padding:24px 10px 52px}.lo-paper{width:100%;padding:20px 18px}}

/* 1쪽 다듬기 — 봉투 카드에 장면 그림, 편지지 세로 괘선과 붉은 도장 */
.lo-card{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.lo-thumb{position:relative;display:block;aspect-ratio:16/8;overflow:hidden}
.lo-tsvg{position:absolute;inset:0;width:100%;height:100%;transition:transform .4s}
.lo-card:hover .lo-tsvg{transform:scale(1.06)}
.lo-thumb .lo-mini{position:absolute;left:50%;top:50%;width:76px;height:50px;margin:-25px 0 0 -38px;box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.3,1.5,.6,1)}
.lo-card:hover .lo-mini{transform:translateY(-4px) rotate(-3deg)}
.lo-thumb .lo-mini i{width:18px;height:18px;margin:-9px 0 0 -9px}
.lo-ct{padding:10px 14px 12px}
.lo-card em{z-index:2}
.lo-paper{background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(196,82,60,.12) 46px 47px),radial-gradient(circle at 20% 30%,rgba(180,150,100,.10) 0 2px,transparent 3px) 0 0/23px 19px,linear-gradient(#FBF3E2,#F2E4C6)}
.lo-paper::after{content:"";position:absolute;right:0;top:0;width:28px;height:28px;background:linear-gradient(225deg,rgba(0,0,0,.18) 0 50%,#EAD9B5 50%);border-bottom-left-radius:4px}
.lo-stamp{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:10px;padding:2px;border:2px solid #C0392B;border-radius:4px;color:#C0392B;font-size:.62em;line-height:1.1;writing-mode:vertical-rl;vertical-align:middle;transform:rotate(-6deg);opacity:.9}
.play .lo-stamp{animation:lo-stampin .4s cubic-bezier(.2,1.6,.5,1) var(--d) both}
@keyframes lo-stampin{from{opacity:0;transform:scale(2.2) rotate(-20deg)}to{opacity:.9;transform:rotate(-6deg)}}

/* 2쪽 편지로 마음을 나눈 경험 — 그림 카드 */
.ex-who{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 16px}
.ex-card,.ex-f,.ex-g{border:2px solid var(--rule);border-radius:16px;background:var(--surface);font:inherit;color:var(--ink);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.ex-card:hover,.ex-f:hover,.ex-g:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(30,40,70,.12)}
.ex-card.on,.ex-f.on,.ex-g.on{border-color:var(--seal);background:var(--seal-soft);box-shadow:0 0 0 3px var(--seal-soft)}
.ex-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px}
.ex-pair{display:flex;align-items:center;gap:6px}
.ex-pair .ch-pp{width:50px;height:50px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.15)}
.ex-pair i{font-style:normal;font-size:1.3em;color:var(--seal)}
.ex-card b{font-size:.95em;text-align:center}
.ex-feel{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 12px}
.ex-f{display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:999px}
.ex-f .mood{width:36px;height:36px}
.ex-good{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:8px}
.ex-g{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;text-align:left;line-height:1.5}
.ex-g svg{width:46px;height:46px}
@media (max-width:760px){.ex-who{grid-template-columns:repeat(2,1fr)}}

/* 3쪽 하윤 → 외삼촌, 편지지 꾸밈 */
.lt-who2{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 16px;padding:12px 16px;border-radius:16px;background:var(--sunken)}
.lt-who2 p{flex:1 1 280px;margin:0;color:var(--muted);line-height:1.6}
.lt-pa{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.85em}
.lt-pa .ch-pp{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.15)}
.lt-arr{display:flex;align-items:center;gap:4px;color:var(--seal);font-size:1.3em}.lt-arr i{width:22px;border-top:2px dashed var(--seal)}
.lt-sta{padding-top:56px;background:linear-gradient(90deg,transparent 0 30px,rgba(229,115,115,.35) 30px 32px,transparent 32px),radial-gradient(circle,rgba(0,0,0,.04) 1px,transparent 1.5px) 0 0/14px 14px,var(--letter)}
.lt-band{position:absolute;left:12px;right:80px;top:10px;height:38px;width:calc(100% - 92px)}
.lt-stamp{position:absolute;right:16px;top:12px;width:48px;height:56px;transform:rotate(6deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}

/* 3쪽 단계 나누기 · 하윤이 편지 창 */
.rd-steps{display:flex;align-items:center;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.rd-st{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border:2px solid var(--rule);border-radius:999px;background:var(--surface);font:inherit;font-weight:700;color:var(--muted);cursor:pointer}
.rd-st i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sunken);font-style:normal}
.rd-st.now{border-color:var(--seal);color:var(--ink);box-shadow:0 0 0 3px var(--seal-soft)}.rd-st.now i{background:var(--seal);color:#fff}
.rd-st.done i{background:var(--leaf);color:#fff}
.rd-st:disabled{opacity:.5;cursor:default}
.rd-line{flex:0 1 30px;border-top:2px dashed var(--rule)}
.lt-who2 .btn{flex:none}
.lt-side .lt-how{margin:0}
.lo-dlg{width:min(860px,calc(100vw - 20px))}
.lo-dlg .lo-stage{margin:0 14px;min-height:520px}
.lo-hy .lo-paper{font-family:"Nanum Pen Script",cursive;font-size:clamp(20px,2.4vw,25px);line-height:1.55;color:#2E2A26;background:repeating-linear-gradient(transparent 0 1.5em,rgba(120,150,190,.28) 1.5em calc(1.5em + 1px)),linear-gradient(#FFFFFF,#FFFBF2);border-left:3px solid rgba(229,115,115,.45)}
.lo-hy .lo-to{font-weight:400}.lo-hy .lo-from{font-weight:400}
.lo-date{text-align:right}.lo-ps{margin-top:8px!important;color:#5A524C}
.lo-hy .lo-fx i{width:16px;height:12px;border-radius:50% 50% 10% 10%;background:#FFB74D;box-shadow:10px 0 0 #FFCC80;animation:lo-fly 3s ease-in-out var(--d) infinite alternate}
@keyframes lo-fly{from{transform:translate(0,0) rotate(-8deg)}to{transform:translate(30px,-24px) rotate(10deg)}}
@media (max-width:720px){.rd-st{padding:6px 12px 6px 6px;font-size:.88em}.rd-line{display:none}.lo-dlg .lo-stage{margin:0 6px;min-height:0}}

/* 4쪽 높임 바꾸기 — 읽는 사람 얼굴 카드, 편지지, 할아버지께 드리는 쪽지(노란 메모) */
.hn-to{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:10px 14px;border-radius:16px;background:var(--sunken)}
.hn-to .ch-pp{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.15)}
.hn-to span{display:flex;flex-direction:column;line-height:1.3}.hn-to small{color:var(--muted);font-size:.8em}.hn-to b{font-size:1.15em}
.hn-to em{margin-left:auto;padding:3px 12px;border-radius:999px;font-style:normal;font-weight:800;font-size:.85em}
.hn-to em.up,.hn-r small.up{background:#E3EEFB;color:#2F6FEB}.hn-to em.fr,.hn-r small.fr{background:#FFF1C2;color:#B26A00}
.hn-to.swap{animation:sg-pop .5s cubic-bezier(.2,1.6,.5,1)}
.hn-r{padding:10px 14px}
.hn-r .ch-pp{width:46px;height:46px;flex:none;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.15)}
.hn-r small{align-self:flex-start;margin-top:2px;padding:0 8px;border-radius:999px;font-weight:700}
.hn-memo{max-width:none;padding-top:30px;background:linear-gradient(#FFF7B8,#FFEE8C);border:0;border-radius:4px;box-shadow:0 10px 24px rgba(120,100,20,.22);transform:rotate(-.6deg)}
.hn-memo::before{display:none}
.hn-tape{position:absolute;left:50%;top:-10px;width:110px;height:24px;margin-left:-55px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.05);transform:rotate(-3deg)}
.hn-to.memo{background:#FFF8DC}
.hn-dots{display:flex;gap:8px;margin:6px 0 10px}
.hn-dots i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px dashed var(--rule);font-style:normal;font-weight:800;color:#fff}
.hn-dots i.on{border:0;background:var(--leaf)}
.lt-side .lt-sum{margin:0}

/* 5쪽 누구에게 — 마음 떠올리기 카드, 사람 얼굴 고르기, 높여 쓸지 편지 조각 미리 보기 */
.wo-ideas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0}
.wo-idea{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;border-radius:14px;background:#fff;text-align:center;box-shadow:inset 0 -4px 0 var(--c)}
.wo-idea .mood{width:46px;height:46px}.wo-idea b{font-size:.95em}.wo-idea small{color:var(--muted);line-height:1.4}
.lt-ideas p{margin:6px 0 0}
.wo-ppl{display:flex;flex-wrap:wrap;gap:10px}
.wo-p{display:flex;flex-direction:column;align-items:center;gap:4px;width:104px;padding:10px 6px;border:2px solid var(--rule);border-radius:16px;background:var(--surface);font:inherit;color:var(--ink);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.wo-p:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(30,40,70,.12)}
.wo-p.on{border-color:var(--seal);background:var(--seal-soft);box-shadow:0 0 0 3px var(--seal-soft)}
.wo-p .ch-pp{width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.15)}
.wo-p b{font-size:.84em;line-height:1.3;text-align:center;word-break:keep-all}
.wo-me{display:flex;align-items:center;gap:16px;margin:18px 0 6px;padding:14px 18px;border-radius:18px;background:var(--sunken)}
.wo-me>div{flex:1;min-width:0}
.wo-big .ch-pp{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 4px 12px rgba(0,0,0,.18)}
.wo-up{flex-direction:column;align-items:stretch;gap:10px}
.wo-snip{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:8px;background:linear-gradient(90deg,transparent 0 14px,rgba(229,115,115,.35) 14px 16px,transparent 16px),#FFFDF7;font-family:"Nanum Pen Script",cursive;font-size:1.35em;line-height:1.3;color:#2E2A26;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.wo-snip i{font-style:normal;padding-left:10px}.wo-snip i.r{text-align:right}
.wo-snip u{text-decoration:none;color:#2F6FEB}.wo-snip.fr u{color:#C77700}
@media (max-width:760px){.wo-ideas{grid-template-columns:repeat(2,1fr)}.wo-p{width:88px}}