/* 제안하는 글쓰기 — 색과 글꼴은 저장소의 다른 앱(첫 화면, 우리 반 토의)과 같은 값.
   글의 부분마다 색이 하나: 문제 상황 파랑, 제안하는 내용 노랑, 제안하는 이유 분홍(교과서 130쪽), 누구에게 초록, 제목 보라, 인사 회색 */
:root{
  --paper:#FBFAF6; --surface:#FFFFFF; --sunken:#F3F1EA; --ink:#232022; --muted:#6E6A63; --faint:#9A958C;
  --rule:#E2DED4; --seal:#C2452D; --seal-soft:#F7E6E1; --sky:#3B6EA5; --sky-soft:#E4EDF6; --leaf:#4F7A4A; --leaf-soft:#E6F0E2;
  --amber:#B57A1F; --amber-soft:#FBF0D9; --letter:#FFFDF7;
  --prob:#3B6EA5; --prob-soft:#E6EFF8; --prob-mid:#AFC8E4;
  --sug:#94650F; --sug-soft:#FCF2D6; --sug-mid:#EAD08A;
  --why:#B0446A; --why-soft:#FBE7EE; --why-mid:#EAB2C5;
  --to:#4F7A4A; --to-soft:#E8F1E3; --to-mid:#B8D2AE;
  --tit:#6650A8; --tit-soft:#EEEAF9; --tit-mid:#C7BEE8;
  --hi:#6E6A63; --hi-soft:#F3F1EA; --hi-mid:#D8D3C8;
  --shadow:0 1px 2px rgba(35,32,34,.06),0 10px 30px -14px rgba(35,32,34,.22);
  --sans:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --serif:"Gowun Batang","Batang",Georgia,serif;
  --mono:"IBM Plex Mono","Consolas","IBM Plex Sans KR","Malgun Gothic",monospace;
  --cute:"Jua","Gowun Dodum","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#1A1917; --surface:#242220; --sunken:#201E1C; --ink:#EDE9E0; --muted:#A8A197; --faint:#7D766C; --rule:#37332E;
    --seal:#E2795F; --seal-soft:#3A2622; --sky:#8DB4E0; --sky-soft:#1F2A36; --leaf:#93BE8B; --leaf-soft:#1F2B1D; --amber:#E0B05A; --amber-soft:#33291A;
    --letter:#26231F;
    --prob:#93B9E3; --prob-soft:#1E2935; --prob-mid:#3A5470;
    --sug:#E6C46E; --sug-soft:#302816; --sug-mid:#665327;
    --why:#EBA0B9; --why-soft:#33202A; --why-mid:#6E3A4E;
    --to:#9CC690; --to-soft:#1F2B1D; --to-mid:#3E5A38;
    --tit:#B9ABEC; --tit-soft:#28233A; --tit-mid:#4D4475;
    --hi:#B3ACA1; --hi-soft:#26241F; --hi-mid:#45413A;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--serif);line-height:1.35;margin:0 0 .5em}
h2{font-size:1.6em} h3{font-size:1.2em}
p{margin:.4em 0}
small{font-weight:400;color:var(--muted)}
button,input,textarea{font:inherit;color:inherit}
svg{display:block;max-width:100%}
.loading{color:var(--muted);text-align:center;padding:40px 16px}
.fine{color:var(--muted);font-size:.88em} .fine.right{text-align:right}
.muted{color:var(--faint)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.row.center,.center{justify-content:center;text-align:center}
.big{font-size:1.08em}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* 글의 부분 색 — 아래 조각들은 --c(진한), --cs(연한 바탕), --cm(테두리)만 쓴다 */
.p-prob{--c:var(--prob);--cs:var(--prob-soft);--cm:var(--prob-mid)}
.p-sug{--c:var(--sug);--cs:var(--sug-soft);--cm:var(--sug-mid)}
.p-why{--c:var(--why);--cs:var(--why-soft);--cm:var(--why-mid)}
.p-to{--c:var(--to);--cs:var(--to-soft);--cm:var(--to-mid)}
.p-title{--c:var(--tit);--cs:var(--tit-soft);--cm:var(--tit-mid)}
.p-hi,.p-bye{--c:var(--hi);--cs:var(--hi-soft);--cm:var(--hi-mid)}
.pchip{display:inline-block;font-family:var(--cute);font-size:.92em;color:var(--c);background:var(--cs);border:1.5px solid var(--cm);border-radius:999px;padding:1px 11px;white-space:nowrap;line-height:1.5}
.t-prob{color:var(--prob);font-weight:700} .t-sug{color:var(--sug);font-weight:700} .t-why{color:var(--why);font-weight:700}

/* 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;border-radius:12px;border:1.5px solid var(--rule);
  background:var(--surface);font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{border-color:var(--faint)} .btn:active{transform:scale(.97)}
.btn:disabled{opacity:.42;cursor:default;transform:none}
.btn.primary{background:var(--seal);border-color:var(--seal);color:#fff}
.btn.big{min-height:54px;font-size:1.08em;padding:0 24px}
.btn.huge{min-height:70px;font-size:1.35em;padding:0 40px;border-radius:18px}
.linkbtn{background:none;border:0;padding:0;color:var(--sky);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}

/* 위 막대 */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.topin{max-width:860px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.08em;padding:6px 2px}
.mark{width:.62em;height:.62em;border:2px solid var(--seal);transform:rotate(45deg);display:inline-block;flex:none}
.stages{display:flex;gap:6px}
.stg{display:flex;align-items:center;gap:7px;border:1.5px solid var(--rule);background:var(--surface);border-radius:999px;padding:5px 13px 5px 6px;cursor:pointer;font-weight:600;font-size:.92em}
.stg b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sunken);font-family:var(--mono);font-size:.9em}
.stg.on{border-color:var(--seal);background:var(--seal-soft)} .stg.on b{background:var(--seal);color:#fff}
.stg.done b{background:var(--leaf);color:#fff}
@media (max-width:560px){ .stg span{display:none} .stg{padding:5px} }

/* 화면 */
.scr{max-width:860px;margin:0 auto;padding:22px 16px 70px}
.scr.enter{animation:up .32s ease-out}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.shead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.kicker{font-family:var(--cute);color:var(--seal);font-size:1.08em}
.pg{font-family:var(--mono);font-size:.78em;color:var(--faint);letter-spacing:.02em}
.count{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--muted)}
.dots{margin-left:auto;display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;background:var(--rule);display:block}
.dots i.d{background:var(--leaf)} .dots i.c{outline:2.5px solid var(--seal);outline-offset:2px}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.navr{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.tip{background:var(--amber-soft);border-radius:12px;padding:11px 15px;margin:14px 0}
.tip.pink{background:var(--why-soft)}
.donebox{background:var(--leaf-soft);color:var(--leaf);border-radius:12px;padding:13px 16px;margin:16px 0;font-weight:600}
.donebox b{margin-right:6px}

/* 첫 화면 */
.home{padding-top:clamp(10px,4vw,40px)}
.eyebrow{font-family:var(--mono);font-size:.8em;color:var(--faint);letter-spacing:.04em;margin:0 0 6px}
.home h1{font-size:clamp(2em,6vw,2.8em);display:flex;align-items:center;gap:14px;margin:0 0 10px;letter-spacing:-.02em}
.home h1 .mark{width:.42em;height:.42em}
.lede{font-size:1.1em;color:var(--muted);max-width:44em;line-height:1.75}
.lede b{color:var(--ink)}
.stagecards{list-style:none;padding:0;margin:26px 0 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.stagecard{width:100%;height:100%;text-align:left;background:var(--surface);border:1.5px solid var(--rule);border-radius:18px;padding:18px 18px 16px;cursor:pointer;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;transition:transform .18s,border-color .18s}
.stagecard:hover{transform:translateY(-2px);border-color:var(--faint)}
.stagecard .no{font-family:var(--cute);color:var(--seal);font-size:1.05em}
.stagecard>b{font-family:var(--serif);font-size:1.35em}
.stagecard .pp{font-family:var(--mono);font-size:.76em;color:var(--faint)}
.stagecard p{color:var(--muted);margin:8px 0 6px}
.stagecard .st{margin-top:auto;font-weight:700;font-size:.9em}
.st.ok{color:var(--leaf)} .st.now{color:var(--seal)}
details.teacher{margin:30px 0 0;border:1px dashed var(--rule);border-radius:14px;padding:10px 16px;color:var(--muted)}
details.teacher summary{cursor:pointer;font-weight:700;color:var(--ink)}
details.teacher ul{margin:10px 0 4px;padding-left:1.2em} details.teacher li{margin:5px 0}

/* 1단계 */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 18px}
.tile{background:var(--cs);border:1.5px solid var(--cm);border-radius:14px;padding:14px 12px;display:flex;flex-direction:column;gap:4px}
.tile b{font-family:var(--cute);font-weight:400;color:var(--c);font-size:1.15em}
.tile span{font-size:.92em}
@media (max-width:680px){ .tiles{grid-template-columns:1fr 1fr} }
.sit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:center;margin-bottom:18px}
.art{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow);background:var(--sunken)}
.art img{display:block;width:100%;height:auto}
.place{display:inline-block;font-family:var(--cute);background:var(--sunken);border-radius:999px;padding:2px 12px;color:var(--muted)}
.story{font-size:1.14em;line-height:1.75;margin-top:8px}
@media (max-width:640px){ .sit{grid-template-columns:1fr} }
.qrows{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.qrow{background:var(--surface);border:1.5px solid var(--rule);border-radius:16px;padding:14px 16px 6px;animation:up .28s ease-out}
.qrow.done{background:color-mix(in srgb,var(--cs) 55%,var(--surface));border-color:var(--cm);animation:none}
.qh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.qa{font-weight:700;font-size:1.05em}
.opts{display:grid;gap:8px}
.opts.inline{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.opt{text-align:left;min-height:50px;padding:10px 14px;border:1.5px solid var(--rule);border-radius:12px;background:var(--surface);cursor:pointer;line-height:1.5;transition:border-color .15s,background .15s}
.opt:hover:not([disabled]){border-color:var(--faint)}
.opt.small{min-height:42px;padding:6px 16px;font-weight:600}
.opt.right{background:var(--cs);border-color:var(--c);font-weight:600;color:var(--ink);cursor:default}
.opt.right::before{content:"✓ ";color:var(--c);font-weight:700}
.opt.dim{opacity:.42;cursor:default}
.opt.tried{border-style:dashed;color:var(--muted)}
.opt.no{border-color:var(--seal)}
.fb{min-height:1.5em;margin:8px 2px;font-weight:600}
.fb.ok{color:var(--leaf)} .fb.no{color:var(--seal)}
.no{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.pcard{margin:18px 0 0;background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);animation:up .32s ease-out}
.pch{font-family:var(--cute);font-size:1.1em;margin-bottom:8px}
.pc{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:start;padding:7px 0;border-top:1px dashed var(--rule)}
.pc span{font-family:var(--cute);color:var(--c);background:var(--cs);border-radius:8px;padding:2px 8px;text-align:center}
.pc p{margin:0}
@media (max-width:520px){ .pc{grid-template-columns:1fr} .pc span{justify-self:start} }
/* 그림 모음 — 3장 + 2장(가운데), 좁으면 2장씩 */
.ghead{margin:30px 0 12px} .ghead h2{font-size:1.45em;margin:0} .ghead p{margin:4px 0 0;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin:16px 0 8px}
.gcard{grid-column:span 2;display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--rule);border-radius:18px;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.gcard:nth-child(4){grid-column:2 / span 2}
.gcard:hover{transform:translateY(-4px);border-color:var(--faint);box-shadow:0 2px 4px rgba(35,32,34,.06),0 18px 36px -16px rgba(35,32,34,.32)}
.gimg{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--sunken)}
.gimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gcard:hover .gimg img{transform:scale(1.05)}
.gq{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--cute);font-size:1.35em;
  background:var(--seal);color:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.4);animation:bob 2.6s ease-in-out infinite}
.gcard.solved .gq{background:var(--leaf);animation:none}
.gcard.solved .gimg img{filter:saturate(.75)}
@keyframes bob{50%{transform:translateY(-4px)}}
.gcap{display:flex;flex-direction:column;gap:3px;padding:12px 15px 14px}
.gcap b{font-family:var(--serif);font-size:1.08em}
.gcap small{color:var(--muted);font-size:.9em;line-height:1.5}
.gcard.solved .gcap small{color:var(--sug);font-weight:600}
@media (max-width:640px){ .gallery{grid-template-columns:1fr 1fr;gap:12px} .gcard,.gcard:nth-child(4){grid-column:auto} .gcard:nth-child(5){grid-column:1 / -1} }

/* 2단계 */
.flow{list-style:none;counter-reset:f;padding:0;margin:12px 0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.flow li{counter-increment:f;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:12px;font-weight:600;position:relative}
.flow li::before{content:counter(f);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--seal);color:#fff;font-family:var(--mono);font-size:.85em;margin-right:6px}
@media (max-width:680px){ .flow{grid-template-columns:1fr 1fr} }
.penlegend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.pl{display:flex;align-items:center;gap:8px;font-family:var(--cute);color:var(--c)}
.pl svg{width:54px}
.howto{margin:0 0 10px}
.pencils{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.pencil{display:flex;align-items:center;gap:9px;border:2px solid var(--rule);background:var(--surface);border-radius:999px;padding:8px 16px 8px 10px;cursor:pointer;font-family:var(--cute);font-size:1.05em;color:var(--c);transition:transform .15s,box-shadow .15s}
.pencil svg{width:58px;transition:transform .2s}
.pencil.on{border-color:var(--c);background:var(--cs);box-shadow:0 6px 16px -8px var(--c);transform:translateY(-2px)}
.pencil.on svg{transform:rotate(-12deg) translateX(-3px)}
.pencil em{font-style:normal;color:var(--leaf)}
.letter{position:relative;background:var(--letter);border:1px solid var(--rule);border-radius:6px;padding:30px clamp(16px,4vw,38px) 24px;box-shadow:var(--shadow);margin:8px 0 6px}
.clip{position:absolute;top:-12px;left:28px;width:16px;height:44px;border:3px solid #8FB0D2;border-radius:10px;transform:rotate(-8deg)}
.para{border-radius:10px;padding:7px 10px;margin:4px -10px;line-height:1.85;font-size:1.06em;transition:background .25s,box-shadow .25s}
.para.fixed{color:var(--muted)}
.ltitle{text-align:center;font-family:var(--serif);font-size:1.2em;color:var(--ink);margin:0 -10px 6px}
.para.tap{cursor:pointer}
.para.tap:hover{box-shadow:inset 0 0 0 2px var(--rule)}
.para.c-prob{background:var(--prob-soft);box-shadow:inset 0 0 0 2px var(--prob-mid)}
.para.c-sug{background:var(--sug-soft);box-shadow:inset 0 0 0 2px var(--sug-mid)}
.para.c-why{background:var(--why-soft);box-shadow:inset 0 0 0 2px var(--why-mid)}
.para.no{box-shadow:inset 0 0 0 2px var(--seal)}
.ptag{display:inline-block;font-family:var(--cute);font-size:.8em;border-radius:999px;padding:0 9px;margin-right:7px;vertical-align:2px;background:var(--cs);color:var(--c);border:1.5px solid var(--cm);line-height:1.6}
.ptag.t-fixed{background:var(--sunken);color:var(--faint);border-color:var(--rule)}
.ltitle .ptag{font-family:var(--cute)}
u.mk{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--seal);font-weight:700}
.learn{background:var(--surface);border:1.5px solid var(--rule);border-radius:16px;padding:14px 16px;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;animation:up .3s ease-out}
.lr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.order{margin:4px 0 0;color:var(--muted);font-size:.95em}
.sum{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:10px}
.sl{background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:12px 16px}
.sl p{margin:0;font-size:1.08em}
.sl.done{border-color:var(--leaf-soft)}
.blank{display:inline-block;min-width:5em;border-bottom:2px solid var(--ink);margin:0 4px}
.filled{display:inline-block;background:var(--leaf-soft);color:var(--leaf);border-radius:8px;padding:0 9px;margin:0 3px}

/* 3단계 */
.sheetbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.sb{font-size:.8em;font-weight:600;color:var(--c);border:1.5px dashed var(--cm);border-radius:999px;padding:2px 10px;background:transparent}
.sb.got{border-style:solid;background:var(--cs)}
h2.q{font-size:1.55em;margin:0 0 4px}
.qsub{color:var(--muted);margin:0 0 16px;font-size:1.03em}
.fl{display:block;font-weight:700;margin:16px 0 7px}
.fld{display:block;margin:0 0 10px}
.fld textarea,.fld input{width:100%;border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--surface);resize:vertical;line-height:1.6;font-size:1.08em}
.fld textarea:focus,.fld input:focus{border-color:var(--sky);outline:none}
.fld textarea::placeholder,.fld input::placeholder{color:var(--faint)}
.fld.narrow{max-width:360px}
.fm{display:flex;justify-content:space-between;gap:10px;font-size:.84em;color:var(--faint);margin-top:4px}
.live{font-weight:600} .live.ok{color:var(--leaf)} .live.no{color:var(--seal)}
.err{color:var(--seal);font-weight:700;min-height:1.3em;margin:12px 0 0}
.err.shake{animation:shake .38s}
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.placecard,.tcard{position:relative;text-align:left;min-height:74px;background:var(--surface);border:2px solid var(--rule);border-radius:14px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px;transition:border-color .15s,background .15s}
.placecard b,.tcard b{font-size:1.06em}
.placecard span,.tcard span{font-size:.84em;color:var(--muted)}
.placecard.on,.tcard.on{border-color:var(--seal);background:var(--seal-soft)}
.targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:14px}
.tcard.on{border-color:var(--to);background:var(--to-soft)}
.rec{position:absolute;top:-9px;right:10px;font-style:normal;font-size:.74em;font-weight:700;background:var(--leaf);color:#fff;border-radius:999px;padding:1px 8px}
.seeds{display:flex;flex-direction:column;gap:7px;margin:0 0 6px}
.seedhint{color:var(--muted);font-size:.92em;margin-bottom:2px}
.seed{text-align:left;background:var(--sunken);border:1.5px dashed var(--rule);border-radius:12px;padding:9px 13px;cursor:pointer;line-height:1.5}
.seed:hover{border-color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:4px 0 6px}
.cl{font-size:.85em;color:var(--muted);font-weight:600;margin-right:2px}
.chip{border:1.5px solid var(--rule);background:var(--surface);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.95em;min-height:38px}
.chip.on{background:var(--sky-soft);border-color:var(--sky);color:var(--sky);font-weight:700}
.showbox,.preview{background:var(--cs);border:1.5px solid var(--cm);border-radius:14px;padding:10px 14px;margin:0 0 10px}
.showbox p,.preview p{margin:6px 0 0;font-size:1.04em}
.preview{margin-top:14px}
.towho{margin:0 0 6px;font-weight:600}
.exprs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.exprs.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){ .exprs,.exprs.two{grid-template-columns:1fr} }
.expr{position:relative;text-align:left;background:var(--surface);border:2px solid var(--rule);border-radius:14px;padding:13px 14px 11px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.expr b{font-size:1.06em} .expr span{font-size:.85em;color:var(--muted)}
.expr.on{border-color:var(--sug);background:var(--sug-soft)}
.exprs.two .expr.on{border-color:var(--why);background:var(--why-soft)}
.example{color:var(--muted);margin:8px 2px 0;font-size:.95em}
.keys{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 4px}
.keys span:not(.cl){background:var(--sunken);border-radius:8px;padding:2px 9px;font-size:.9em}
.checks{border:1.5px dashed var(--rule);border-radius:12px;padding:8px 14px 6px;margin:14px 0 0}
.checks legend{font-weight:700;padding:0 6px}
.checks label{display:flex;gap:10px;align-items:center;min-height:40px;cursor:pointer}
.checks input{width:22px;height:22px;accent-color:var(--leaf)}
.byes{display:grid;gap:8px}
.byecard{text-align:left;background:var(--surface);border:2px solid var(--rule);border-radius:12px;padding:11px 14px;cursor:pointer}
.byecard.on{border-color:var(--hi);background:var(--hi-soft);font-weight:600}
.sheetpv{display:flex;flex-direction:column;gap:10px}
.order-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.blk{background:var(--cs);border:1.5px solid var(--cm);border-radius:14px;padding:10px 14px}
.blk p{margin:6px 0 0;font-size:1.04em}
.bh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.think{margin:20px 0 0;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:4px 16px 12px}
.tq{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px dashed var(--rule)}
.tq:first-of-type{border-top:0}
.tb{display:flex;gap:6px}
.printbox{text-align:center;margin:22px 0 0;padding:20px 16px;background:var(--surface);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px}
.paperopt{display:flex;align-items:center;gap:9px;cursor:pointer}
.paperopt input{width:22px;height:22px;accent-color:var(--seal)}
.printbox .fine{max-width:34em;margin:0}
.prrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.pngout{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px;border-top:1px dashed var(--rule)}
.pngout .fl{margin:6px 0 0}
.pnglist{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.pnglist figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(220px,100%)}
.pnglist img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow)}
.pnglist figcaption{display:flex;flex-direction:column;align-items:center;gap:2px}
.pnglist a.btn{text-decoration:none}

@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }

/* ---------- 인쇄 ---------- */
#printroot{display:none}
body.printing #printroot{display:block;position:fixed;left:-20000px;top:0;visibility:visible}
@media print{
  body{background:#fff}
  body > *:not(#printroot){display:none !important}
  body #printroot,body.printing #printroot{display:block;position:static;left:auto}
}
#printroot{color:#2B2523;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:"Gowun Dodum","Malgun Gothic",sans-serif;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
#printroot .ps{position:relative;width:190mm;height:277mm;overflow:hidden;background:#fff;break-after:page;page-break-after:always;display:flex;flex-direction:column}
#printroot .ps:last-child{break-after:auto;page-break-after:auto}
#printroot h1,#printroot h3{font-family:"Jua","Gowun Dodum",sans-serif;font-weight:400;margin:0}
#printroot .k-title{--c:#7A68BE;--cs:#F1EDFB;--cm:#CFC6EE}
#printroot .k-hi,#printroot .k-bye{--c:#8C877E;--cs:#F4F2EC;--cm:#DAD5CA}
#printroot .k-prob{--c:#4F82BC;--cs:#E9F1FA;--cm:#B5CDE8}
#printroot .k-sug{--c:#C2922A;--cs:#FCF4DC;--cm:#ECD79A}
#printroot .k-why{--c:#CB6889;--cs:#FBE9EF;--cm:#EDB7C8}
#printroot .ph{display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;border-bottom:.6mm solid #2B2523;padding-bottom:2.4mm;margin-bottom:3mm}
#printroot .ph h1{font-size:20pt;line-height:1.2}
#printroot .ph.small h1{font-size:16pt}
#printroot .psub{margin:1mm 0 0;font-size:9pt;color:#6E6A63}
#printroot .who{display:grid;grid-template-columns:auto 38mm;gap:1.2mm 2.5mm;margin:0;align-items:end;font-size:10pt}
#printroot .who dt{color:#6E6A63;font-size:8.5pt}
#printroot .who dd{margin:0;border-bottom:.3mm solid #2B2523;padding:0 1mm;font-size:11.5pt;min-height:6mm}
#printroot .tostrip{display:flex;align-items:center;gap:3mm;background:#E8F1E3;border:.4mm solid #B8D2AE;border-radius:3mm;padding:2mm 4mm;margin-bottom:3mm}
#printroot .tostrip .lab{font-family:"Jua",sans-serif;color:#4F7A4A;font-size:11pt}
#printroot .tostrip b{font-size:12.5pt}
#printroot .tostrip .tw{font-size:9.5pt;color:#5E5A54}
#printroot .rows{display:flex;flex-direction:column;gap:2mm}
#printroot .pr{display:grid;grid-template-columns:23mm 1fr 44mm;border:.4mm solid var(--cm);border-radius:3mm;overflow:hidden;background:var(--cs)}
#printroot .pr.k-title{height:16mm} #printroot .pr.k-hi{height:18mm} #printroot .pr.k-prob{height:40mm}
#printroot .pr.k-sug{height:27mm} #printroot .pr.k-why{height:46mm} #printroot .pr.k-bye{height:18mm}
#printroot .plab{background:var(--c);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.4mm;padding:1mm}
#printroot .plab .n{font-family:"Jua",sans-serif;font-size:12pt;line-height:1}
#printroot .plab b{font-family:"Jua",sans-serif;font-weight:400;font-size:10.5pt;line-height:1.15}
#printroot .pbody{background:#fff;padding:2mm 3.5mm;font-size:12.5pt;line-height:1.55;overflow:hidden}
#printroot .pbody p{margin:0 0 .8mm}
#printroot .pr.k-title .pbody{font-size:14pt;font-weight:700;display:flex;align-items:center}
#printroot .ptip{padding:2mm 3mm;font-size:8.6pt;line-height:1.45;color:#5E5A54;border-left:.4mm dashed var(--cm);display:flex;align-items:center}
#printroot .bottom{margin-top:auto;display:grid;grid-template-columns:1.6fr 1fr;gap:4mm;padding-top:3mm}
#printroot .bottom h3{font-size:11pt;margin-bottom:1.5mm}
#printroot .bottom h3 small{font-family:"Gowun Dodum",sans-serif;font-size:8pt;color:#8C877E;margin-left:1.5mm}
#printroot .chk table{width:100%;border-collapse:collapse;font-size:9.4pt}
#printroot .chk td{padding:1.15mm 1.5mm;border-bottom:.25mm dotted #B8B2A6}
#printroot .chk td.o{width:21mm;text-align:center;letter-spacing:1.2mm;color:#8C877E;white-space:nowrap}
#printroot .legend{margin:1.2mm 0 0;font-size:8pt;color:#8C877E;text-align:right}
#printroot .send{border:.4mm dashed #B8B2A6;border-radius:3mm;padding:2.5mm 3.5mm}
#printroot .send .sendl{margin:1.5mm 0 0;font-size:8.6pt;color:#6E6A63}
#printroot .send .ln{border-bottom:.3mm solid #8C877E;min-height:7.5mm;font-size:11pt;padding:1mm 0 0}
#printroot .send .ex{margin:2mm 0 0;font-size:7.8pt;color:#8C877E;line-height:1.4}
#printroot .pp{flex:1;display:grid;grid-template-columns:1fr 44mm;gap:5mm;min-height:0}
#printroot .lines{border:.6mm solid #8FC3C8;border-radius:4mm;padding:5mm 7mm}
#printroot .tl{width:62%;margin:3mm auto 5mm;border-bottom:.4mm solid #555;height:9mm}
#printroot .wl{height:12.4mm;border-bottom:.3mm solid #A9A39A}
#printroot .stickies{display:flex;flex-direction:column;justify-content:space-around;gap:4mm}
#printroot .sn{background:var(--cs);border:.3mm solid var(--cm);border-radius:3mm;padding:3.5mm;font-size:9pt;line-height:1.5;color:#3B3632}