/* 오가는 마음 — 바탕 모양. 색과 글꼴은 저장소의 다른 앱(첫 화면, 책 속의 길, 제안하는 글쓰기)과 같은 값.
   앱마다 모양은 따로: chat.css(ch- 화면, pr-ch 인쇄) · letter.css(lt-, pr-lt) · secret.css(sf-, pr-sf). 인쇄 클래스는 화면 클래스와 겹치지 않게 짓는다 */
: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;
  --yel:#94650F; --yel-soft:#FCF2D6; --yel-mid:#EAD08A;
  --pink:#B0446A; --pink-soft:#FBE7EE; --pink-mid:#EAB2C5;
  --blue:#3B6EA5; --blue-soft:#E4EDF6; --blue-mid:#AFC8E4;
  --pre:#3B6EA5; --pre-soft:#E6EFF8; --mid:#94650F; --mid-soft:#FCF2D6; --post:#4F7A4A; --post-soft:#E8F1E3;
  --shadow:0 1px 2px rgba(35,32,34,.06),0 10px 30px -14px rgba(35,32,34,.22); --on:#FFFFFF;
  --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;
    --yel:#E6C46E; --yel-soft:#302816; --yel-mid:#665327;
    --pink:#EBA0B9; --pink-soft:#33202A; --pink-mid:#6E3A4E;
    --blue:#93B9E3; --blue-soft:#1E2935; --blue-mid:#3A5470;
    --pre:#93B9E3; --pre-soft:#1E2935; --mid:#E6C46E; --mid-soft:#302816; --post:#9CC690; --post-soft:#1F2B1D;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); --on:#1A1917; }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
button,.sn{touch-action:manipulation}
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%}
blockquote{margin:6px 0 10px;padding:8px 14px;border-left:4px solid var(--rule);background:var(--sunken);border-radius:0 10px 10px 0;font-size:1.04em}
.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}

/* 단추 */
.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:var(--on)}
.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}
.btn.small{min-height:40px;padding:0 14px;font-size:.92em}
.btn small{color:inherit;opacity:.8;margin-left:4px}
.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:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.topin{max-width:980px;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:var(--on)}
.stg.done b{background:var(--leaf);color:var(--on)}
.stg.snd{padding:5px 12px 5px 8px;color:var(--muted)} .stg.snd svg{width:22px;height:22px}
.stg.snd[aria-pressed="false"]{color:var(--faint);border-style:dashed}
@media (max-width:600px){ .stg span{display:none} .stg{padding:5px} .stg.snd{padding:5px 8px} }

/* 화면 */
.scr{max-width:980px;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}
.tip{background:var(--amber-soft);border-radius:12px;padding:11px 15px;margin:14px 0}
.tip.pink{background:var(--pink-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} .donebox.big{font-size:1.12em;padding:16px 18px}
.result{animation:up .3s ease-out}
.place{display:inline-block;font-family:var(--cute);background:var(--sunken);border-radius:999px;padding:2px 12px;color:var(--muted)}
.story{font-size:1.18em;line-height:1.7;margin-top:8px;font-weight:600}
.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}
.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)}}
.err{color:var(--seal);font-weight:700;min-height:1.3em;margin:12px 0 0}
.err.shake{animation:shake .38s}
.pchip{display:inline-block;font-family:var(--cute);font-size:.92em;border-radius:999px;padding:1px 11px;white-space:nowrap;line-height:1.5;border:1.5px solid var(--rule);background:var(--sunken)}
.pchip.z-pre{color:var(--pre);background:var(--pre-soft);border-color:var(--pre)} .pchip.z-mid{color:var(--mid);background:var(--mid-soft);border-color:var(--yel-mid)} .pchip.z-post{color:var(--post);background:var(--post-soft);border-color:var(--post)}
.pchip.pen-main,.pchip.pen-opin{color:var(--yel);background:var(--yel-soft);border-color:var(--yel-mid)}
.pchip.pen-news{color:var(--pink);background:var(--pink-soft);border-color:var(--pink-mid)}
.pchip.pen-base{color:var(--blue);background:var(--blue-soft);border-color:var(--blue-mid)}

/* 입력 */
.fl{display:block;font-weight:700;margin:16px 0 7px}
.fld{display:block;margin:0 0 10px}
.fld textarea,.fld input,.labrow input,.batch textarea{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,.labrow input:focus{border-color:var(--sky);outline:none}
.fld input::placeholder,.labrow input::placeholder,.batch textarea::placeholder{color:var(--faint)}
.fld input:disabled{opacity:.6}
.fld.narrow{max-width:360px;margin-inline:auto;text-align:left}
.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)}
.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:40px}
.chip.on{background:var(--sky-soft);border-color:var(--sky);color:var(--sky);font-weight:700}
.chip.big{font-size:1.05em;padding:8px 16px;min-height:46px}
.chip:disabled{opacity:.4;cursor:default}
.chip.ghost{cursor:default;border-style:dashed;color:var(--pink);border-color:var(--pink-mid);background:var(--pink-soft)}

/* 첫 화면 */
.home{padding-top:clamp(10px,calc(4 * var(--vw,1vw)),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,calc(6 * var(--vw,1vw)),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:46em;line-height:1.75}
.lede b{color:var(--ink)}
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:6px 0}
details.teacher b{color:var(--ink)}
.batch{margin:16px 0 6px;padding:12px 14px;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px}
.batch .fl{margin-top:0}
.batch textarea{font-size:1em;margin:6px 0 0}


/* 인쇄 상자·PNG */
.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}
.printbox .fine{max-width:36em;margin:0}
.printbox .fld{width:100%}
.prrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.paperopt{display:flex;align-items:center;gap:9px;cursor:pointer}
.paperopt input{width:22px;height:22px;accent-color:var(--seal)}
.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(260px,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}

.toast{position:fixed;left:50%;top:30%;transform:translate(-50%,0) scale(1);z-index:20;background:var(--seal);color:#fff;font-family:var(--cute);font-size:2em;padding:12px 30px;border-radius:999px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.5);animation:pop .4s cubic-bezier(.2,1.6,.4,1);transition:opacity .5s,transform .5s}
.toast.out{opacity:0;transform:translate(-50%,-30px)}
@keyframes pop{from{transform:translate(-50%,0) scale(.4);opacity:0}}
/* 쪽 번호 막대·아래 막대(우리말 조사 스튜디오처럼) */
.topin{max-width:none;flex-wrap:nowrap;gap:10px}
.brand .bt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.brand .bt small{font-family:var(--sans);font-weight:400;font-size:.62em;color:var(--faint)}
.pstrip{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pstrip::-webkit-scrollbar{display:none}
.pgrp{display:flex;align-items:center;gap:3px;flex:none}
.plab{font-size:.74em;color:var(--faint);margin-right:3px;white-space:nowrap}
.pnum{min-width:26px;height:26px;padding:0 4px;border:1.5px solid var(--rule);background:var(--surface);border-radius:6px;font-family:var(--mono);font-size:.78em;color:var(--muted);cursor:pointer}
.pnum.on{border-color:var(--seal);color:var(--seal);background:var(--seal-soft);font-weight:700}
.pcount{flex:none;font-family:var(--mono);font-size:.82em;color:var(--faint)}
.scr{padding-bottom:110px}
.scr .navrow{display:none}
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--paper);background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid var(--rule)}
.bbin{max-width:980px;margin:0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bhint{margin-left:auto;font-size:.86em;color:var(--muted);text-align:right}
@media (max-width:600px){ .brand .bt small,.pcount{display:none} .snd span{display:none} }

/* 앱 카드(국어 수업앱 첫 화면처럼) */
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:24px 0 18px}
.acard{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--rule);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.acard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#C8D8C4}
.athumb{display:grid;place-items:center;background:var(--sunken);border-bottom:1px solid var(--rule);padding:12px 16px 8px}
.athumb svg{width:100%;max-width:300px;height:auto}
.abody{display:flex;flex-direction:column;gap:9px;padding:16px 18px 18px;flex:1}
.atag{align-self:flex-start;font-family:var(--mono);font-size:.68em;letter-spacing:.04em;color:var(--sky);background:var(--sky-soft);border-radius:5px;padding:3px 9px}
.aname{font-family:var(--serif);font-size:1.3em}
.adesc{font-size:.9em;color:var(--muted);line-height:1.65}
.adesc b{color:var(--ink)}
.abul{display:flex;flex-direction:column;gap:5px}
.abul span{font-size:.83em;color:var(--muted);display:flex;gap:8px} .abul span::before{content:"·";color:#C8D8C4;font-weight:700}
.ago{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.78em;color:var(--seal);display:flex;align-items:center;gap:6px}
.ago small{color:var(--faint);margin-left:auto}
.acard.done .ago{color:var(--leaf)}
.acard:hover .ar{transform:translateX(4px)} .ar{transition:transform .18s}

html.calm *{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;overflow:hidden;background:#fff;break-after:page;page-break-after:always;display:flex;flex-direction:column}
#printroot.port .ps{width:190mm;height:277mm}
#printroot.land .ps{width:277mm;height:190mm}
#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 .psub{margin:.8mm 0 0;font-size:8.6pt;color:#6E6A63}
#printroot .who{display:grid;grid-template-columns:auto 36mm;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 .wl{height:8.6mm;border-bottom:.3mm solid #A9A39A}


/* ---------- 세 앱이 함께 쓰는 조각 ---------- */
:root{ --inkk:#2E2A26; --hand:"Nanum Pen Script","Gowun Dodum",cursive }
.toast{font-size:1.5em}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px}
.panel.flat{box-shadow:none}
.hgroup{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 6px}
.hgroup h2{margin:0}
.ask{font-family:var(--serif);font-weight:700;font-size:1.18em;margin:18px 0 8px;line-height:1.5}
.ask small{font-family:var(--sans);font-size:.72em;margin-left:6px}
.book{font-family:var(--mono);font-size:.74em;color:var(--faint);letter-spacing:.02em;border:1px solid var(--rule);border-radius:5px;padding:1px 7px;white-space:nowrap}
/* 알약 이름표 */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--cute);font-size:.92em;border-radius:999px;padding:2px 12px;border:1.5px solid var(--rule);background:var(--sunken);color:var(--muted);white-space:nowrap;line-height:1.5}
.pill.sky{color:var(--sky);background:var(--sky-soft);border-color:var(--blue-mid)} .pill.leaf{color:var(--leaf);background:var(--leaf-soft);border-color:#B9D3B2}
.pill.amber{color:var(--yel);background:var(--yel-soft);border-color:var(--yel-mid)} .pill.pink{color:var(--pink);background:var(--pink-soft);border-color:var(--pink-mid)}
.pill.seal{color:var(--seal);background:var(--seal-soft);border-color:#E8B4A6}
/* 고르기 단추 — 맞으면 초록, 아니면 흔들림. 고른 뒤 설명은 .why */
.opts{display:grid;gap:9px;margin:8px 0}
.opts.two{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.opt{display:flex;align-items:center;gap:10px;text-align:left;width:100%;min-height:52px;padding:10px 16px;border:1.5px solid var(--rule);border-radius:14px;background:var(--surface);cursor:pointer;font-size:1.02em;line-height:1.5;transition:border-color .15s,background .15s,transform .15s}
.opt:hover{border-color:var(--faint)} .opt:active{transform:scale(.99)}
.opt .k{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sunken);font-family:var(--mono);font-size:.82em;color:var(--muted)}
.opt.pick{border-color:var(--sky);background:var(--sky-soft)}
.opt.ok{border-color:var(--leaf);background:var(--leaf-soft)} .opt.ok .k{background:var(--leaf);color:var(--on)}
.opt.no{border-color:var(--seal);background:var(--seal-soft);animation:shake .38s} .opt.no .k{background:var(--seal);color:var(--on)}
.opt:disabled{cursor:default;opacity:.55} .opt.ok:disabled,.opt.no:disabled{opacity:1}
.why{margin:8px 2px 0;padding:10px 14px;border-radius:12px;background:var(--sunken);font-size:.96em}
.why.ok{background:var(--leaf-soft)} .why.no{background:var(--seal-soft)}
.why b{color:var(--ink)}
/* 마음 얼굴 */
.mood{width:56px;height:56px;flex:none}
.mood.s{width:34px;height:34px} .mood.l{width:84px;height:84px} .mood.xl{width:120px;height:120px}
.bounce{animation:bounce .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bounce{from{transform:scale(.6)}}
/* 쪽 안 작은 단계 표시(○ ○ ●) */
.substeps{display:flex;gap:6px;align-items:center;margin-left:auto}
.substeps i{width:10px;height:10px;border-radius:50%;background:var(--rule);display:block}
.substeps i.d{background:var(--leaf)} .substeps i.c{outline:2.5px solid var(--seal);outline-offset:2px}
/* 한 줄 쓰기 칸 + 글자 수 */
.oneline{display:flex;gap:8px;align-items:center}
.oneline input{flex:1;min-width:0;border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--surface);font-size:1.08em}
.oneline input:focus{border-color:var(--sky);outline:none}
.oneline input::placeholder{color:var(--faint)}

/* 아래 막대 — 좁은 화면에서도 단추가 접히지 않게, 알림 글은 작게 */
.bbin .btn{flex:none;white-space:nowrap}
@media (max-width:600px){ .bhint{font-size:.76em;line-height:1.35} }