/* 상상의 날개 · 「방 씨 규수의 화살」 — 화면 ls-, 인쇄 pr-ls- */
.ls-h{font-size:1.5em;margin:2px 0 6px}
.ls-lead{color:var(--muted);margin:0 0 12px}
.ls-goal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--seal-soft);font-family:var(--serif);font-size:1.08em}

/* 1쪽 만화 */
.ls-comic{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:6px 0 10px}
.ls-cp{position:relative;margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.ls-cpsvg{width:100%;height:auto}
.ls-cn{position:absolute;left:8px;bottom:8px;z-index:2;width:26px;height:26px;border-radius:50%;background:rgba(35,32,34,.75);color:#fff;font-family:var(--mono);font-size:.8em;display:grid;place-items:center}
.ls-sb{position:absolute;z-index:2;max-width:46%;margin:0;padding:6px 11px;border-radius:14px;background:#fff;color:#232022;font-size:.86em;line-height:1.4;box-shadow:0 4px 14px -6px rgba(0,0,0,.4);animation:ls-pop .35s cubic-bezier(.2,1.6,.4,1) both}
.ls-sb b{display:block;font-family:var(--cute);font-weight:400;font-size:.86em;color:#B0446A}
.ls-cp:nth-child(2) .ls-sb{animation-delay:.2s} .ls-cp:nth-child(3) .ls-sb{animation-delay:.4s} .ls-cp:nth-child(4) .ls-sb{animation-delay:.6s}
@keyframes ls-pop{from{opacity:0;transform:scale(.6)}}
.ls-snow{animation:ls-snow 3.6s var(--d) linear infinite}
@keyframes ls-snow{from{transform:translateY(-30px);opacity:0}20%{opacity:1}}
.ls-shiver{animation:ls-shiver .25s infinite alternate}
@keyframes ls-shiver{from{transform:translateX(-1.5px)}}
.ls-breath{transform-box:fill-box;transform-origin:left bottom;animation:ls-puff 2.2s ease-out infinite}
@keyframes ls-puff{from{transform:translate(-6px,4px) scale(.4);opacity:0}30%{opacity:1}}
.ls-sweat{animation:ls-drip 2.4s ease-in infinite}
@keyframes ls-drip{from{transform:translateY(-4px);opacity:0}40%{opacity:1}}
.ls-blink{animation:ls-led 1s steps(2) infinite}
@keyframes ls-led{from{opacity:.2}}
.ls-tipchain{margin-top:12px}

/* 고르기 */
.ls-opts .opt{font-size:1em}
.ls-pair{margin:10px 0 14px}
.ls-pc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700;margin:0 0 4px}

/* 차례 맞추기 */
.ls-ord{margin:8px 0}
.ls-slots{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.ls-slot{flex:1 1 180px;min-height:96px;border:2px dashed var(--rule);border-radius:14px;padding:8px 10px;background:var(--sunken);display:flex;flex-direction:column;gap:6px;transition:border-color .2s,background .2s}
.ls-slot.on{border-style:solid;border-color:var(--leaf);background:var(--leaf-soft)}
.ls-sn{align-self:flex-start;font-family:var(--cute);font-size:.92em;color:var(--sky);background:var(--sky-soft);border-radius:999px;padding:0 10px}
.ls-slot.on .ls-sn{color:var(--leaf);background:var(--surface)}
.ls-empty{margin:auto;color:var(--faint);font-size:.88em}
.ls-arr{align-self:center;color:var(--faint);font-weight:700}
.ls-pool{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.ls-cd{flex:1 1 220px;text-align:left;margin:0;padding:12px 14px;border-radius:12px;border:1.5px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);font-size:.98em;line-height:1.5;cursor:grab;touch-action:none}
.ls-cd.placed{flex:none;box-shadow:none;border:0;background:none;padding:0;cursor:default;animation:ls-pop .3s ease-out}
.ls-cd.lift{opacity:.35}
.ls-ghost{position:fixed;z-index:30;pointer-events:none;transform:rotate(-2deg);box-shadow:0 18px 40px -10px rgba(0,0,0,.45);opacity:.95}
.ls-cd.no{animation:shake .38s}

/* 이야기 무대 */
.ls-st{position:relative;display:block;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#0B1430}
.ls-svg{width:100%;height:auto}
.ls-st .lo{opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.ls-st[data-s="0"] .o0,.ls-st[data-s="1"] .o1,.ls-st[data-s="2"] .o2,.ls-st[data-s="3"] .o3,.ls-st[data-s="4"] .o4,.ls-st[data-s="5"] .o5,.ls-st[data-s="6"] .o6,.ls-st[data-s="7"] .o7{opacity:1;visibility:visible}
.ls-bub{position:absolute;z-index:2;margin:0;max-width:40%;padding:7px 13px;border-radius:14px;background:#FFFDF7;color:#232022;font-family:var(--cute);font-size:clamp(.8em,2vw,1.08em);line-height:1.35;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.ls-bub.n{background:#F6E2C3;font-family:var(--serif);font-size:.9em}
.ls-st[data-s="4"] .o4.ls-bub,.ls-st[data-s="5"] .o5.ls-bub,.ls-st[data-s="6"] .o6.ls-bub,.ls-st[data-s="7"] .o7.ls-bub{animation:ls-pop .4s .3s cubic-bezier(.2,1.6,.4,1) both}
.ls-star{animation:ls-tw 2.4s var(--d) ease-in-out infinite alternate}
@keyframes ls-tw{from{opacity:.25}}
.ls-flame{transform-box:fill-box;transform-origin:50% 90%;animation:ls-fl .18s infinite alternate}
@keyframes ls-fl{from{transform:scale(.9,1.08)}}
.ls-ring{transform-box:fill-box;transform-origin:center;animation:ls-ring 1s infinite alternate}
@keyframes ls-ring{from{opacity:.1;transform:scale(.8)}}
/* 장면에 들어올 때 — 그림은 끝 자리에 있고 from 에서 출발한다 */
.ls-st[data-s="1"] .ls-thieves{animation:ls-in 1.6s ease-out both}
@keyframes ls-in{from{transform:translateX(-260px);opacity:0}}
.ls-st[data-s="2"] .ls-arw{animation:ls-arw .7s var(--d) cubic-bezier(.3,0,.8,1) both}
@keyframes ls-arw{from{transform:translate(300px,-130px);opacity:0}20%{opacity:1}55%{transform:translate(130px,-90px)}}
.ls-st[data-s="2"] .ls-aim{animation:ls-recoil .35s 3 ease-out}
@keyframes ls-recoil{from{transform:translateX(3px)}}
.ls-st[data-s="3"] .ls-sneak{animation:ls-sneak 3s ease-in-out both}
@keyframes ls-sneak{from{transform:translateX(260px)}}
.ls-st[data-s="3"] .ls-run{animation:ls-bob .5s ease-in-out infinite alternate}
.ls-stk{transform-box:fill-box;transform-origin:center}
.ls-st[data-s="5"] .ls-stk{animation:ls-fall .8s calc(.6s + var(--d)) both}
@keyframes ls-fall{from{transform:translate(calc(60px + var(--dx)),var(--dy)) rotate(var(--r));opacity:0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}12%{opacity:1}62%{transform:none;animation-timing-function:ease-out}78%{transform:translateY(-7px) rotate(5deg);animation-timing-function:ease-in}}
.ls-st[data-s="5"] .ls-door{animation:ls-door .6s .1s ease-out both}
@keyframes ls-door{from{transform:translateX(64px)}}
.ls-st[data-s="5"] .ls-boom{animation:ls-boom .7s 1.1s cubic-bezier(.2,1.6,.4,1) both}
@keyframes ls-boom{from{transform:translate(625px,182px) scale(.2);opacity:0}}
.ls-st[data-s="6"] .ls-flee{animation:ls-flee 1.4s ease-in both}
@keyframes ls-flee{from{transform:translateX(180px)}}
.ls-st[data-s="6"] .ls-run{animation:ls-bob .22s ease-in-out infinite alternate}
@keyframes ls-bob{from{transform:translateY(-4px)}}
.ls-dust{transform-box:fill-box;transform-origin:right center}
.ls-st[data-s="6"] .ls-dust{animation:ls-dust .9s calc(.2s + var(--d)) ease-out both}
@keyframes ls-dust{from{transform:scale(.2);opacity:0}}
/* 가만히 있을 때 — 횃불·초롱 빛 일렁임, 숨쉬기, 눈 깜빡임, 구름(태블릿에 가볍게: 모두 transform·opacity 만) */
.ls-glow{animation:ls-glowf 1.1s ease-in-out infinite alternate}
@keyframes ls-glowf{from{opacity:.72}}
.ls-cloud{animation:ls-cloud 26s ease-in-out infinite alternate}
@keyframes ls-cloud{from{transform:translateX(-30px)}}
.ls-breathe{transform-box:fill-box;transform-origin:50% 100%;animation:ls-br 3.2s ease-in-out infinite alternate}
@keyframes ls-br{from{transform:scale(1.008,.988)}}
.ls-eye{transform-box:fill-box;transform-origin:center;animation:ls-blink 4.2s infinite}
@keyframes ls-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.12)}}
.ls-thumb .ls-breathe,.ls-thumb .ls-eye,.ls-thumb .ls-cloud{animation:none}
.ls-mini{border-radius:10px;box-shadow:none;width:100%}
.ls-intro{margin:6px 0 12px}

.ls-player{margin:6px 0 14px}
.ls-cap{min-height:3.4em;margin:12px 2px 6px;font-family:var(--serif);font-size:1.16em;line-height:1.6}
.ls-cap.sm{font-size:1em;min-height:0;margin:6px 0 0;color:var(--muted)}
.ls-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ls-dots{display:flex;gap:5px;flex-wrap:wrap}
.ls-dots i{width:10px;height:10px;border-radius:50%;background:var(--rule)}
.ls-dots i.d{background:var(--leaf)} .ls-dots i.c{background:var(--seal);outline:2.5px solid var(--seal-soft)}
.ls-memo{margin:6px 0 10px}
.ls-memo .fl{margin-top:0}
.ls-text,.ls-ex,.ls-edi{margin:12px 0;border:1px dashed var(--rule);border-radius:12px;padding:8px 14px;background:var(--surface)}
.ls-text summary,.ls-ex summary,.ls-edi summary{cursor:pointer;font-weight:700}
.ls-text p{margin:.5em 0;font-family:var(--serif)}
.ls-ex li{margin:5px 0}
.chip.ls-bad{background:var(--seal-soft);border-color:var(--seal);color:var(--seal)}
.ls-replay{margin:0 0 12px}

/* 5쪽 표·사슬 */
.ls-tb{width:100%;border-collapse:separate;border-spacing:0;border:1.5px solid var(--rule);border-radius:14px;overflow:hidden;margin:8px 0;background:var(--surface)}
.ls-tb th{background:var(--sunken);font-family:var(--cute);font-weight:400;padding:8px;width:50%}
.ls-tb td{padding:12px 14px;border-top:1px solid var(--rule);vertical-align:top;line-height:1.55}
.ls-tb td+td,.ls-tb th+th{border-left:1px solid var(--rule)}
.ls-blank{color:var(--faint);background:repeating-linear-gradient(-45deg,transparent 0 8px,var(--sunken) 8px 16px);text-align:center;vertical-align:middle !important}
.ls-fill{background:var(--leaf-soft);font-weight:600;animation:ls-pop .35s ease-out}
.ls-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 6px;padding:14px;border-radius:16px;background:var(--sunken)}
.ls-bead{padding:6px 12px;border-radius:999px;border:1.5px dashed var(--rule);color:var(--faint);font-size:.88em;background:var(--surface)}
.ls-bead.on{border-style:solid;border-color:var(--sky);color:var(--ink);background:var(--sky-soft)}
.ls-chain.all .ls-bead{animation:ls-glow .6s calc(var(--k) * .15s) both}
@keyframes ls-glow{from{transform:scale(.85);background:var(--amber-soft)}}
.ls-link{color:var(--rule);font-weight:700} .ls-link.on{color:var(--sky)}

/* 6쪽 포도 치마 */
.ls-grape-wrap{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:16px;align-items:center;margin:8px 0}
.ls-chimabox{background:linear-gradient(#FFF8EC,#F3E6CF);border-radius:18px;padding:10px;box-shadow:var(--shadow)}
.ls-chima .ls-grape{opacity:0;transition:opacity 1.2s}
.ls-chima .ls-stain{transition:opacity 1.2s}
.ls-chima.grape .ls-grape{opacity:1} .ls-chima.grape .ls-stain{opacity:0}
/* 붓이 내려와 줄기를 긋는다 — 바뀌는 순간에만(transition), 움직임을 끄면 끝 모습 */
.ls-chima .ls-brush{transform:translate(-56px,-70px);transition:transform 1.6s cubic-bezier(.3,.6,.3,1)}
.ls-chima .ls-ink{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s .3s ease-out}
.ls-chima.grape .ls-brush{transform:none} .ls-chima.grape .ls-ink{stroke-dashoffset:0}
.ls-gchain{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px 0}
.ls-gbox{width:min(520px,100%);display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1.5px solid var(--rule);background:var(--surface)}
.ls-gbox p{margin:0}
.ls-gbox.blank{border-style:dashed;color:var(--faint)} .ls-gbox.fill{background:var(--leaf-soft);border-color:#B9D3B2}
.ls-down{color:var(--faint);font-weight:700}
.ls-editx{font-family:var(--serif);line-height:1.7}

@media (max-width:600px){
  .ls-comic{grid-template-columns:1fr}
  .ls-grape-wrap{grid-template-columns:1fr}
  .ls-chimabox{max-width:220px;margin:0 auto}
  .ls-arr{transform:rotate(90deg);margin:0 auto}
  .ls-slots{flex-direction:column}
  .ls-slot{flex:none}
  .ls-bub{font-size:.72em;padding:4px 8px}
}

/* ---------- 인쇄 ---------- */
#printroot .pr-ls-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:2mm}
#printroot .pr-ls-hd h1{font-size:16pt;line-height:1.15}
#printroot .pr-ls-h3{flex:none;font-size:11pt;margin:2.6mm 0 1.4mm;color:#2B2523}
#printroot .pr-ls-h3 small{font-family:"Gowun Dodum",sans-serif;font-size:8.4pt;color:#8C877E;margin-left:2mm}
#printroot .pr-ls-tb,#printroot .pr-ls-cr{flex:none;width:100%;border-collapse:collapse;font-size:9.6pt;table-layout:fixed}
#printroot .pr-ls-tb th{width:42mm;background:#F3F1EA;font-weight:400;color:#4A453F;text-align:left;padding:1.2mm 2.4mm;border:.3mm solid #CFC8BA;font-size:9pt}
#printroot .pr-ls-tb td,#printroot .pr-ls-cr td{border:.3mm solid #CFC8BA;padding:1.2mm 2.4mm;height:9mm;max-height:12mm;overflow:hidden;vertical-align:top}
#printroot .pr-ls-cr th{background:#F3F1EA;font-weight:400;border:.3mm solid #CFC8BA;padding:1mm;font-size:9pt}
#printroot .pr-ls-cr th:nth-child(2){width:7mm;border:0;background:none}
#printroot .pr-ls-cr td.pr-ls-ar{border:0;text-align:center;vertical-align:middle;padding:0;width:7mm}
#printroot .pr-ls-ar{color:#8C877E;font-weight:700}
#printroot .pr-ls-ord{flex:none;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.4mm}
#printroot .pr-ls-ord li{display:flex;gap:2mm;align-items:flex-start;border:.3mm solid #CFC8BA;border-radius:1.6mm;padding:1.2mm 2mm;height:13mm;font-size:9pt}
#printroot .pr-ls-ord li span{flex:1;height:100%;overflow:hidden}
#printroot .pr-ls-ord b{flex:none;width:5.4mm;height:5.4mm;border-radius:50%;background:#3B6EA5;color:#fff;display:grid;place-items:center;font-size:8.4pt}
#printroot .pr-ls-gc{flex:none;display:flex;align-items:center;gap:1.4mm}
#printroot .pr-ls-gb{flex:1;border:.3mm solid #CFC8BA;border-radius:1.6mm;padding:1.2mm 2mm;height:19mm;font-size:8.6pt;display:flex;flex-direction:column;gap:.6mm;overflow:hidden}
#printroot .pr-ls-gb i{font-style:normal;font-size:7.6pt;color:#4F7A4A}
#printroot .pr-ls-gb span{flex:1;overflow:hidden}
#printroot .pr-ls-void{display:block;height:5mm;border-bottom:.3mm dotted #B9B2A6}
#printroot .pr-ls-lines{flex:none}
#printroot .pr-ls-lines .wl{height:8.4mm}