/* ===== 페이퍼로지 (Paperlogy) — 눈누, SIL 오픈폰트라이선스(OFL)
   외부 CDN을 링크하지 않고 같은 폴더의 파일을 씁니다. 학교 방화벽에서도 뜹니다. ===== */
@font-face{
  font-family:"Paperlogy";
  src:url("../fonts/Paperlogy-4Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Paperlogy";
  src:url("../fonts/Paperlogy-7Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
/* ===== 리아체 (RiaSans) — 눈누. 큰 제목에만 씁니다. ===== */
@font-face{
  font-family:"RiaSans";
  src:url("../fonts/RiaSans-ExtraBold.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}

/* ===== 기본값 ===== */
*,
*::before,
*::after{box-sizing:border-box}

/* 뿌리 글자를 16px → 17.6px로 올려 화면 전체가 함께 커집니다 */
html{-webkit-text-size-adjust:100%; font-size:calc(110% * var(--z,1))}

body{
  margin:0;
  font-family:"Paperlogy","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  word-break:keep-all; overflow-wrap:break-word; line-break:strict;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:var(--bg); color:var(--ink);
  overscroll-behavior:none;
}

p,
li,
span,
label,
button,
textarea,
input,
h1,
h2,
h3,
h4{word-break:keep-all;overflow-wrap:break-word}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

textarea,
input,
select{font-family:inherit}

textarea{font-weight:400}

[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ===== 색 ===== */
:root{
  --bg:#FBF7EE; --ink:#221F1A; --dim:#6B6558; --line:#E1D9C8; --card:#FFFDF8;
  --accent:#1E5F86; --accentSoft:#E6EFF5;
  --hl-y:#FFE9A3; --hl-g:#C9EFC2; --hl-b:#BFE0F5; --hl-p:#F7CFE0;
  --edge:#16150F;
  --grid:rgba(22,21,15,.07);
  --pill:#FFD3E4;
  --r:16px;
  --brandH:clamp(38px,4.3vw,54px);
  --ok:#1B7A4A;
}

/* ===== 화면 전환 ===== */
.screen{display:none;min-height:100dvh}

.screen.on{display:block}

.screen#scr-read.on,
.screen#scr-anat.on{display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* ══════════ 공통 블록 언어 ══════════ */
.blk{
  background:var(--card);
  border:3px solid var(--edge);
  border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);
}

.press{transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1)}

.press:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 0 var(--edge)}

.press:active{transform:translate(6px,6px);box-shadow:0 0 0 0 var(--edge)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:12px;
  background:#FFE04D;color:#16150F;
  border:2.5px solid var(--edge);
  box-shadow:4px 4px 0 0 var(--edge);
  font-size:1rem;font-weight:700;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--edge)}

.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 var(--edge)}

.btn--ghost{background:var(--card);color:var(--ink)}

.btn--sm{padding:9px 15px;font-size:.94rem}

.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══════════ 1. 서재(홈) ══════════ */
#scr-home{
  position:relative;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:24px 24px;
}

.home{
  max-width:1120px;margin:0 auto;
  padding:0 clamp(16px,3vw,24px) 70px;
}

/* 맨 윗줄 — 화면 전체 폭을 씁니다. 제목표는 왼쪽 끝, 로고는 오른쪽 끝. */
.brandrow{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 14px;
  padding:clamp(14px,2.2vw,22px) clamp(14px,2.4vw,28px) clamp(16px,2.6vw,26px);
}

/* 오른쪽 묶음 — 설정 단추는 왼쪽에 모으고, 로고는 맨 오른쪽 끝에 붙입니다 */
.topacts{display:flex;flex:1;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px}

/* 브랜드 로고 */
.brand{height:clamp(30px,3.4vw,42px);width:auto;display:block;flex:none;margin-left:clamp(6px,1.6vw,20px)}

.topbar .brand{height:clamp(26px,3vw,34px);margin-left:auto}

/* 푸터 — 자료를 만든 이 */
footer.credit{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6.7px;
  font-size:clamp(.98rem,.9rem + .34vw,1.16rem);font-weight:400;line-height:1.7;color:#7A7266;
  padding:26px 12px 10px;
}

footer.credit .dot{width:4px;height:4px;border-radius:50%;background:#7A7266;flex-shrink:0}

footer.credit .bar{width:2px;height:1.05em;border-radius:1px;background:#7A7266;opacity:.55;flex-shrink:0;margin-inline:2px}

footer.credit a{font-weight:700;text-decoration:none}

footer.credit a:hover{text-decoration:underline}

footer.credit .c-dou{color:#159C79}

footer.credit .c-gga{color:#2E6DB4}

@media(max-width:560px){
footer.credit{font-size:.96rem;padding:20px 12px 8px}
}

.tbtn{
  background:#FFFFFF;color:#16150F;
  border:2.5px solid #16150F;border-radius:99px;
  box-shadow:4px 4px 0 0 #16150F;
  padding:9px 16px;font-size:clamp(.86rem,.74rem + .4vw,1rem);
  font-weight:700;line-height:1;white-space:nowrap;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.tbtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 #16150F}

.tbtn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 #16150F}

/* 글씨 크기 고르기 — 같은 알약 모양의 드롭다운 */
.tsel{
  appearance:none;-webkit-appearance:none;
  background:#FFFFFF;color:#16150F;
  border:2.5px solid #16150F;border-radius:99px;
  box-shadow:4px 4px 0 0 #16150F;
  padding:9px 38px 9px 16px;
  font-family:inherit;font-size:clamp(.86rem,.74rem + .4vw,1rem);
  font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316150F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px 15px;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.tsel:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 #16150F}

.tsel:focus{outline:3px solid var(--accent);outline-offset:2px}

/* 하위 화면의 좁은 머리줄용 */
.tsel--sm{
  flex:none;padding:7px 32px 7px 13px;font-size:.92rem;
  box-shadow:3px 3px 0 0 #16150F;background-position:right 11px center;background-size:13px 13px;
}

.tsel--sm:hover{box-shadow:1px 1px 0 0 #16150F}

/* 좁은 화면에서는 머리줄이 한 줄에 들어가야 합니다.
   로고를 접고, 제목은 줄바꿈 없이 넘치면 말줄임합니다. */
@media(max-width:640px){
  .topbar{gap:8px}
  .topbar .tsel--sm{padding:7px 26px 7px 10px;font-size:.84rem}
  .topbar .brand{display:none}
  .topbar__t{
    font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

.pill{
  background:#FFFFFF;color:#16150F;
  border:3px solid #16150F;border-radius:99px;
  box-shadow:5px 5px 0 0 #16150F;
  height:var(--brandH);
  display:inline-flex;align-items:center;gap:.3em;flex:none;
  padding:0 clamp(14px,2.2vw,28px);
  font-size:clamp(1rem,.72rem + 1vw,1.5rem);
  font-weight:700;letter-spacing:.01em;line-height:1;white-space:nowrap;
}

.pill--sm{font-size:clamp(.86rem,.74rem + .4vw,1rem);height:auto;padding:9px 16px;box-shadow:4px 4px 0 0 #16150F;border-width:2.5px}

/* 하위 화면 왼쪽 위의 제목표 — 누르면 처음 화면으로 갑니다 */
.homebtn{
  gap:.35em;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.homebtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 #16150F}

.homebtn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 #16150F}

.homebtn__ic{font-size:1.2em;line-height:1;margin-top:-.1em}

.pill[data-home]{cursor:pointer;transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1)}

.pill[data-home]:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 0 #16150F}

@media(max-width:560px){
.homebtn__t{display:none}

.homebtn{padding:9px 13px}
}

.pill__brand{color:#12A98D;font-weight:inherit}

/* 큰 제목 — 리아체. 다른 블록과 같은 폭의 흰 블록에 담습니다. */
.maintitle{
  font-family:"RiaSans","Paperlogy",sans-serif;
  font-weight:800;
  font-size:clamp(2.1rem, 8vw, 92px);
  line-height:1.16;letter-spacing:-.01em;
  margin:0 0 clamp(20px,2.8vw,28px);
  padding:clamp(22px,3.4vw,40px) clamp(18px,2.8vw,26px);
  text-align:center;color:var(--ink);
  text-wrap:balance;
  background:#FFFFFF;
  border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);
}

/* 입력칸 */
.field{
  border:2.5px solid var(--edge);border-radius:12px;background:var(--bg);
  box-shadow:4px 4px 0 0 var(--edge);
  padding:12px 15px;font-size:1.04rem;line-height:1.6;color:var(--ink);min-width:0;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.field:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 0 var(--edge)}

.field:focus{
  outline:none;background:var(--card);
  transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--accent);border-color:var(--accent);
}

.field::placeholder{color:#9C9486}

/* 단계 블록 */
.course{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,22px);
  padding:clamp(18px,2.6vw,24px) clamp(18px,2.8vw,26px);
  margin-bottom:clamp(20px,2.8vw,28px);
}

.course__no{
  flex:none;
  background:#FBF0DA;color:#16150F;
  border:2.5px solid #16150F;border-radius:99px;
  box-shadow:3px 3px 0 0 #16150F;
  padding:6px 17px;font-size:.94rem;font-weight:700;
}

.course__main{flex:1;min-width:230px}

.course__main h2{margin:0 0 4px;font-size:clamp(1.14rem,1rem + .5vw,1.3rem)}

.course__main p{margin:0;color:var(--dim);font-size:1.02rem;line-height:1.7;text-wrap:balance}

.course__bar{height:14px;border:2.5px solid var(--edge);border-radius:99px;background:var(--bg);overflow:hidden;margin:12px 0 6px}

.course__bar i{display:block;height:100%;background:var(--pill);transition:width .35s}

.course.cleared .course__bar i{background:#93DCAC}

.course__cnt{margin:0;font-size:.96rem;color:var(--dim)}

.course.locked{opacity:.55}

.course.locked .course__no{background:var(--bg)}

/* ── 3단계 · 독서로에서 고르기 ── */
.pick{padding:clamp(20px,2.8vw,28px) clamp(18px,2.8vw,26px);margin-bottom:clamp(20px,2.8vw,28px)}

.pick.locked{opacity:.42;filter:saturate(.4);pointer-events:none}

.pick__h{margin:0 0 6px;font-size:clamp(1.14rem,1rem + .5vw,1.3rem)}

.pick__lede{margin:0 0 20px;color:var(--dim);font-size:1.05rem;line-height:1.75;text-wrap:pretty}

.pick__ask{margin:24px 0 16px;font-size:1.12rem;line-height:1.75}

.pick__ask b{background:var(--hl-y);border-radius:4px;padding:2px 4px;margin:0 -3px;color:#16150F}

.eyes{display:grid;gap:clamp(12px,1.6vw,16px);grid-template-columns:1fr}

@media(min-width:640px){
.eyes{grid-template-columns:1fr 1fr}
}

.eyes>*{min-width:0}

.eye{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--bg);border:2.5px solid var(--edge);border-radius:12px;
  box-shadow:3px 3px 0 0 var(--edge);padding:14px 16px;
}

.eye__n{
  flex:none;width:28px;height:28px;display:grid;place-items:center;
  background:var(--pill);color:#16150F;border:2.5px solid var(--edge);border-radius:99px;
  font-size:.88rem;font-weight:700;
}

.eye h3{margin:0 0 5px;font-size:1.1rem}

.eye p{margin:0;color:var(--dim);font-size:1.02rem;line-height:1.72}

.eye p b{color:var(--ink)}

.gobox{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin-top:clamp(16px,2.2vw,22px);
  background:var(--accentSoft);border:2.5px solid var(--edge);border-radius:12px;
  box-shadow:3px 3px 0 0 var(--edge);padding:16px 18px;
}

.gobox p{margin:0;flex:1;min-width:200px;font-size:1.08rem;line-height:1.75}

.golink{flex:none;text-decoration:none}

.tips{margin:16px 0 0;padding-left:1.25em;color:var(--dim);font-size:1.02rem;line-height:1.8}

.tips li{margin-bottom:4px}

.tips b{color:var(--ink)}

/* 문장 단위 줄바꿈 — .sn 과 같은 규칙 */
.ln{display:inline-block}

/* 책장 */
.shelf{display:grid;gap:clamp(16px,2.2vw,22px);grid-template-columns:1fr;margin-top:4px}

@media(min-width:700px){
.shelf{grid-template-columns:1fr 1fr}
}

@media(min-width:1000px){
.shelf{grid-template-columns:1fr 1fr 1fr}
}

.shelf>*{min-width:0}

.shelf.locked{opacity:.42;filter:saturate(.4);pointer-events:none}

.frow label .sub{display:block;font-weight:400;color:var(--dim);font-size:.95rem;line-height:1.6;margin-top:3px}

.card{
  display:flex;flex-direction:column;overflow:hidden;text-align:left;
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);width:100%;
}

.card__cover{
  position:relative;padding:20px 18px 16px;min-height:150px;
  display:flex;flex-direction:column;gap:6px;
  color:#16150F;border-bottom:3px solid var(--edge);
  background:var(--cv,#EFEADF);
}

.card__num{
  align-self:flex-start;background:#FFFFFF;border:2px solid #16150F;border-radius:99px;
  padding:3px 11px;font-size:.8rem;font-weight:700;
}

.card__t{margin:6px 0 0;font-size:1.16rem;font-weight:700;line-height:1.4}

.card__w{margin:0;font-size:.9rem;opacity:.75}

.card__body{padding:13px 18px 16px;flex:1;display:flex;flex-direction:column;gap:8px}

.card__why{margin:0;font-size:1.02rem;line-height:1.7;color:var(--dim)}

.card__cta{margin:0;font-size:1.02rem;color:var(--dim)}

.card--empty .card__cover{background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 9px,rgba(22,21,15,.05) 9px,rgba(22,21,15,.05) 18px);align-items:center;justify-content:center}

.card--empty .card__plus{font-size:2.1rem;font-weight:700;color:var(--dim)}

/* 홈 발 */
.homefoot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;margin-top:clamp(26px,4vw,40px);color:var(--dim);font-size:.9rem}

/* ══════════ 2. 해부 화면 ══════════ */
.topbar{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:9px clamp(10px,2vw,16px);
  border-bottom:3px solid var(--edge);background:var(--card);
}

.topbar__t{flex:1;text-align:center;font-size:clamp(.98rem,.88rem + .4vw,1.14rem);font-weight:700;min-width:0}

.board{
  flex:1;min-height:0;overflow:auto;
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  padding:clamp(14px,2.4vw,26px) clamp(12px,2.6vw,22px) clamp(14px,2.4vw,26px);
}

.board__in{max-width:1120px;margin:0 auto;display:grid;gap:clamp(16px,2.4vw,24px);grid-template-columns:1fr}

.board__in>*{min-width:0}

/* 다섯 장을 윗줄 셋 · 아랫줄 둘로 놓고, 아랫줄을 가운데에 맞춥니다.
   6칸 격자에서 한 장이 두 칸을 차지하면 4·5번째가 가운데로 옵니다. */
@media(min-width:620px) and (max-width:979px){
  .board__in[data-view="cards"]{grid-template-columns:repeat(4,1fr)}
  .board__in[data-view="cards"]>*{grid-column:span 2}
  /* 마지막 한 장만 남을 때 가운데로 (:nth-last-child 로 장수를 가려냅니다) */
  .board__in[data-view="cards"]>*:nth-child(odd):nth-last-child(1){grid-column:2 / span 2}
}

@media(min-width:980px){
.board__in[data-view="cards"]{grid-template-columns:repeat(6,1fr)}

.board__in[data-view="cards"]>*{grid-column:span 2}

/* 다섯 장일 때만 아랫줄 둘을 가운데로. 여섯 장이면 3 + 3 이라 손대지 않습니다 */
  .board__in[data-view="cards"]>*:nth-child(4):nth-last-child(2){grid-column:2 / span 2}

.board__in[data-view="cards"]>*:nth-child(5):nth-last-child(1){grid-column:4 / span 2}
}

/* 그림책 사진 카드 */
.pcard{
  display:block;width:100%;text-align:center;padding:0;overflow:hidden;
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.pcard:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 0 var(--edge)}

.pcard:active{transform:translate(6px,6px);box-shadow:0 0 0 0 var(--edge)}

.pcard__pic{display:block;border-bottom:3px solid var(--edge);background:var(--bg)}

.pcard__pic img{display:block;width:100%;height:auto}

.pcard__name{
  display:block;padding:11px 10px;
  font-size:clamp(1rem,.9rem + .4vw,1.16rem);font-weight:700;color:var(--dim);
}

.pcard.found{cursor:default;box-shadow:6px 6px 0 0 var(--edge);transform:none;animation:pop .45s cubic-bezier(.2,0,0,1)}

.pcard.found .pcard__name{background:var(--hl-y);color:#16150F}

.pcard.found .pcard__name::before{content:"✓ "}

@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.pcard.wrong{animation:nope .4s}

@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.pcard.aim{outline:3px dashed #E94A8C;outline-offset:4px}

/* ── 빌려온 내 그림책 적기 ── */
.mybook{
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);
  padding:clamp(20px,2.8vw,30px) clamp(18px,3vw,34px);
  width:100%;max-width:1060px;margin:0 auto;
}

.mybook__top{display:flex;gap:16px 22px;align-items:flex-start;margin-bottom:22px}

.mybook__thumb{
  flex:none;width:clamp(110px,18vw,200px);height:auto;border-radius:10px;
  border:2.5px solid var(--edge);box-shadow:3px 3px 0 0 var(--edge);
}

/* 넓은 화면에서는 물음을 두 칸으로 벌려 한눈에 들어오게 합니다.
   물음 길이가 달라도 입력칸의 윗줄은 반드시 나란히 맞춥니다. */
@media(min-width:860px){
  .mybook__fields{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
  .mybook__fields>*{min-width:0}
  .mrow--wide{grid-column:1 / -1}
  /* 도움말이 있는 칸과 없는 칸의 이름표 높이를 맞춥니다 */
  .mrow > label{min-height:3.5rem;display:flex;flex-direction:column;justify-content:flex-end}
  /* 부분 격자를 쓸 수 있으면 줄 단위로 정확히 맞춥니다 */
  @supports (grid-template-rows: subgrid){
    .mybook__fields{grid-auto-rows:auto}
    .mrow{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
    .mrow > label{min-height:0;justify-content:flex-end}
  }
}

.mybook__top h2{margin:0 0 5px;font-size:clamp(1.1rem,1rem + .5vw,1.28rem)}

.mybook__top h2 b{background:var(--hl-y);border-radius:5px;padding:1px 7px;color:#16150F}

.mybook__top p{margin:0;color:var(--dim);font-size:1.06rem;line-height:1.75;text-wrap:pretty}

.mybook__save{margin:18px 0 0;font-size:.96rem;color:var(--dim);text-align:right}

.mrow{margin-bottom:22px}

.mrow.off{display:none}

.mrow label{display:block;font-weight:700;font-size:1.1rem;line-height:1.65;margin-bottom:9px}

.mrow .req{
  display:inline-block;background:var(--pill);color:#16150F;
  border:2px solid var(--edge);border-radius:99px;
  padding:1px 9px;font-size:.76rem;font-weight:700;margin-left:4px;vertical-align:2px;
}

.mhelp{display:block;font-weight:400;color:var(--dim);font-size:.96rem;line-height:1.6;margin-top:3px}

.mrow .field{width:100%}

.mrow textarea.field{min-height:92px;resize:vertical;line-height:1.8}

.picks{display:flex;flex-wrap:wrap;gap:8px}

.pickbtn{
  background:var(--card);color:var(--ink);
  border:2.5px solid var(--edge);border-radius:99px;
  box-shadow:4px 4px 0 0 var(--edge);
  padding:12px 20px;font-size:1.06rem;line-height:1;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.pickbtn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--edge)}

.pickbtn[aria-pressed="true"]{background:var(--hl-y);font-weight:700}

/* 클릭할 수 있는 부위 */
svg text{font-family:inherit}

@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
/* ══════════ 미션 퀘스트 팝업 ══════════ */
.quest{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:100;display:none;
  width:min(680px,calc(100vw - 28px));
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);overflow:hidden;text-align:center;
}

.quest.on{display:block}

/* 두 하위 화면에서는 띄우지 않고 아래에 붙여 둡니다. 내용을 가리지 않게 하려는 것입니다. */
#scr-read .quest,
#scr-anat .quest{
  position:static;transform:none;bottom:auto;flex:none;
  width:min(680px,calc(100% - 20px));
  /* 위쪽 내용과 붙지 않도록 사이를 띄웁니다 */
  margin:12px auto 12px;
  max-height:46vh;overflow:auto;
}

/* 미션 상자 위에 옅은 경계를 두어 화면이 두 칸으로 읽히게 합니다 */
#scr-anat .quest{margin-top:0}

#scr-anat .questwrap{
  flex:none;border-top:3px solid var(--edge);background:var(--card);
  padding:12px 10px;
}

.quest__top{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;background:var(--pill);border-bottom:3px solid var(--edge)}

.quest__step{flex:none;font-size:.98rem;font-weight:700;color:var(--edge)}

.quest__bar{flex:1;height:12px;border:2px solid var(--edge);border-radius:99px;background:var(--card);overflow:hidden}

.quest__bar i{display:block;height:100%;background:var(--edge);transition:width .3s}

.quest__fold{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--edge);border-radius:7px}

.quest__fold svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}

.quest.folded .quest__fold svg{transform:rotate(180deg)}

.quest.folded .quest__body{display:none}

.quest__body{padding:18px clamp(16px,3vw,26px)}

.quest__ask{margin:0 auto;max-width:34em;font-size:clamp(1.06rem,1rem + .38vw,1.26rem);line-height:1.68;text-wrap:balance}

/* 형광 강조. 음수 여백으로 안쪽 여백을 상쇄해야 "앞면지 와"처럼
   조사 앞이 벌어져 보이는 일이 없습니다. */
.quest__ask b{background:var(--hl-y);border-radius:4px;padding:2px 4px;margin:0 -3px;white-space:nowrap;color:#16150F}

.quest__yes{display:block;font-weight:700;color:var(--ok);margin-bottom:8px;font-size:clamp(1.2rem,1.1rem + .45vw,1.44rem);text-wrap:balance}

.quest__hint{
  margin:15px auto 0;max-width:33em;
  background:var(--accentSoft);border:2.5px solid var(--edge);border-radius:12px;
  padding:13px 19px;font-size:1.06rem;line-height:1.72;color:var(--ink);text-wrap:pretty;
}

.quest__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:16px}

.quest.cleared .quest__top{background:#BFEBD0}

.sn{display:inline-block}

@media(max-width:700px){
.quest{left:8px;right:8px;transform:none;width:auto;bottom:8px}

#scr-read .quest{bottom:50px}

.quest__body{padding:15px 14px}

.quest__ask{font-size:1.02rem}

.quest__hint{font-size:.94rem}
}

/* ══════════ 3. 그림책 뷰어 ══════════ */
.page{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  gap:clamp(8px,1.6vh,18px);
  padding:clamp(10px,2vh,20px) clamp(12px,3vw,24px) clamp(10px,2vh,18px);
  overflow:auto;
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}

.words{
  flex:none;width:min(700px,100%);text-align:center;
  font-size:clamp(1.06rem,.92rem + .6vw,1.3rem);line-height:1.9;
  text-wrap:balance;margin:0;padding:0 6px;
}

.words.none{color:var(--dim);font-size:.92rem;line-height:1.6}

/* ══════════ 팝업 ══════════ */
.scrim{position:fixed;inset:0;background:rgba(22,21,15,.5);z-index:200;display:none}

.scrim.on{display:block}

.modal{
  position:fixed;z-index:210;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);padding:clamp(18px,3vw,26px);display:none;
}

.modal.on{display:block}

.modal h3{margin:0 0 4px;font-size:1.24rem}

.modal p.lead{margin:0 0 18px;color:var(--dim);font-size:1.02rem;line-height:1.7}

/* 기록 저장 창 */
.modal--save{width:min(560px,calc(100vw - 32px))}

.btn--save{
  background:var(--card);color:var(--ink);
  padding:15px 30px;font-size:1.12rem;border-radius:14px;
  box-shadow:5px 5px 0 0 var(--edge);
}

.btn--save:hover{box-shadow:3px 3px 0 0 var(--edge)}

/* 독서로 안내 창 — 다섯 걸음을 번호로 짚어 줍니다.
   글 머리 기호를 직접 그려야 두 줄짜리 항목에서도 번호가 첫 줄에 붙습니다. */
.modal--tips{width:min(960px,calc(100vw - 28px))}

.modal--tips .tips{
  list-style:none;margin:0;padding:20px 24px;counter-reset:tip;
  background:var(--bg);border:2.5px solid var(--edge);border-radius:14px;
  font-size:1.08rem;line-height:1.8;color:var(--ink);
}

.modal--tips .tips li{
  position:relative;counter-increment:tip;
  padding-left:2.6em;margin-bottom:14px;text-wrap:pretty;
}

.modal--tips .tips li:last-child{margin-bottom:0}

/* ── 네 쪽을 넘겨 보는 안내 ── */
.tut__head{padding-bottom:16px;border-bottom:3px solid var(--edge);margin-bottom:18px}

.tut__head h3{margin-bottom:6px}

.tut__head .lead{margin:0}

/* 차례 — 눌러서 바로 그 쪽으로 갑니다 */
.tut__rail{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 20px}

.railchip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--card);color:var(--dim);
  border:2.5px solid var(--edge);border-radius:99px;
  box-shadow:3px 3px 0 0 var(--edge);
  padding:7px 17px 7px 7px;font-size:1rem;font-weight:700;line-height:1;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.railchip:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--edge)}

.railchip__n{
  width:28px;height:28px;flex:none;display:grid;place-items:center;
  background:var(--bg);border:2.5px solid var(--edge);border-radius:50%;
  font-size:.9rem;color:var(--ink);
}

.railchip.on{background:var(--pill);color:#16150F;transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--edge)}

.railchip.on .railchip__n{background:#FFFFFF}

.tut__page{display:none}

.tut__page.on{display:block}

.tut__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:20px 0 6px}

.tut__dots{display:flex;gap:9px}

.tut__dot{width:12px;height:12px;border-radius:50%;background:var(--bg);border:2.5px solid var(--edge)}

.tut__dot.on{background:var(--pill);width:32px;border-radius:99px}

/* 독서로 화면을 다시 그린 그림 — 한 덩어리 블록으로 묶습니다 */
.tipshot{
  margin:0 0 20px;overflow:hidden;
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:6px 6px 0 0 var(--edge);
}

.tipshot svg{
  display:block;width:100%;height:auto;
  background:var(--bg);padding:16px 18px;
}

.tipshot figcaption{
  margin:0;padding:12px 16px;text-align:center;
  border-top:3px solid var(--edge);background:var(--card);
  font-size:.98rem;color:var(--dim);
}

.modal--tips .tips li::before{
  content:counter(tip);
  position:absolute;left:0;top:.16em;
  width:1.75em;height:1.75em;display:grid;place-items:center;
  background:var(--pill);color:#16150F;
  border:2.5px solid var(--edge);border-radius:99px;
  box-shadow:2px 2px 0 0 var(--edge);
  font-size:.84em;font-weight:700;line-height:1;
}

.tipnote{
  margin:18px 0 0;background:var(--hl-y);color:#16150F;
  border:2.5px solid var(--edge);border-radius:12px;box-shadow:3px 3px 0 0 var(--edge);
  padding:13px 17px;font-size:1.02rem;line-height:1.75;text-wrap:pretty;
}

.tipnote b{white-space:nowrap}

.modal--tips .modal__acts{justify-content:center}

#tipGo{text-decoration:none}

/* 다시 묻는 창 */
.modal--ask{width:min(500px,calc(100vw - 32px));text-align:center}

.modal--ask h3{font-size:1.3rem;margin-bottom:10px;text-wrap:balance}

.modal--ask p.lead{margin:0 0 4px;color:var(--ink);font-size:1.02rem;line-height:1.75;text-wrap:pretty}

.modal--ask .modal__acts{justify-content:center;margin-top:20px}

.frow{margin-bottom:18px}

.frow label{display:block;font-weight:700;font-size:1.06rem;line-height:1.6;margin-bottom:8px}

.frow .field{width:100%}

.frow textarea.field{min-height:66px;resize:vertical;line-height:1.7}

/* 표지 색 고르기 — 고른 색에는 체크와 이름이 함께 붙습니다 */
.swatches{display:flex;flex-wrap:wrap;gap:11px}

.sw{
  width:56px;height:44px;flex:none;
  border:2.5px solid var(--edge);border-radius:12px;
  box-shadow:4px 4px 0 0 var(--edge);
  display:grid;place-items:center;
  font-size:1.3rem;font-weight:700;color:#16150F;line-height:1;
  transition:transform .12s cubic-bezier(.2,0,0,1), box-shadow .12s cubic-bezier(.2,0,0,1);
}

.sw:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--edge)}

.sw[aria-pressed="true"]{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--edge);border-width:4px}

.sw[aria-pressed="true"]::after{content:"✓"}

/* 그림책 적기 창 — 넓게 펴고, 짧은 칸은 두 줄로 */
.modal{width:min(760px,calc(100vw - 28px))}

.bmgrid{display:grid;grid-template-columns:1fr;gap:0}

.bmgrid>*{min-width:0}

@media(min-width:700px){
.bmgrid{grid-template-columns:1fr 1fr;gap:0 26px;align-items:start}

.bmgrid>.frow:nth-child(n+3){grid-column:1 / -1}

@supports (grid-template-rows: subgrid){
.bmgrid>.frow:nth-child(-n+2){display:grid;grid-template-rows:subgrid;grid-row:span 2}
}
}

.modal__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}

/* 되돌아보기 */
.look{padding:clamp(18px,2.6vw,24px) clamp(18px,2.8vw,26px);margin-bottom:clamp(20px,2.8vw,28px)}

.look h2{margin:0 0 12px;font-size:1.18rem}

.lookrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 0;border-top:2px dashed var(--line)}

.lookrow p{margin:0;flex:1;min-width:190px;font-size:1.08rem;line-height:1.7}

.faces{display:flex;gap:8px;flex:none}

.mood{width:46px;height:46px;border:2.5px solid var(--edge);border-radius:12px;background:var(--bg);font-size:1.4rem;line-height:1;display:grid;place-items:center;box-shadow:3px 3px 0 0 var(--edge)}

.mood[aria-pressed="true"]{background:var(--hl-y);outline:3px solid var(--accent);outline-offset:2px}

/* 알림 */
/* 아래쪽은 미션 상자가 차지하므로 알림은 위에서 내려옵니다 */
.toast{
  position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:300;
  background:var(--edge);color:var(--bg);border-radius:99px;padding:11px 22px;font-size:.98rem;
  opacity:0;pointer-events:none;transition:opacity .25s;max-width:90vw;text-align:center;
}

.toast.on{opacity:1}

/* ══════════ 인쇄 ══════════ */
#printSheet{display:none}

@media print{
@page{size:A4;margin:13mm}
body{background:#fff}

.screen,
.quest,
.topbar,
.toast,
.scrim,
.modal{display:none!important}

#printSheet{
    display:block!important;color:#111;
    font-size:10.5pt;line-height:1.6;
    word-break:keep-all;overflow-wrap:break-word;
  }

/* 머리 */
  #printSheet .psheet__top{
    text-align:center;margin:0 0 7mm;
    padding-bottom:3.5mm;border-bottom:2.4pt solid #111;
  }

#printSheet .psheet__eyebrow{
    margin:0 0 1mm;font-size:9.5pt;letter-spacing:.4mm;color:#666;
  }

#printSheet h1{
    margin:0 0 3mm;font-size:20pt;letter-spacing:-.02em;
    font-family:"RiaSans","Paperlogy",sans-serif;font-weight:800;
  }

#printSheet .psheet__who{
    margin:0;display:flex;justify-content:center;gap:14mm;font-size:11pt;
  }

#printSheet .psheet__who b{margin-right:2.5mm;color:#555;font-size:9.5pt}

/* 큰 갈래 제목 */
  #printSheet h2{
    display:flex;align-items:center;gap:3mm;
    font-size:12.5pt;margin:7mm 0 3mm;
    page-break-after:avoid;break-after:avoid;
  }

#printSheet h2 .hn{
    display:inline-grid;place-items:center;
    width:7mm;height:7mm;border-radius:50%;
    background:#111;color:#fff;font-size:9.5pt;
  }

/* 부위 상자 — 쪽이 넘어갈 때 상자가 잘리지 않습니다 */
  #printSheet .pbox{
    border:1.1pt solid #111;border-radius:2.6mm;
    padding:3mm 4mm 2mm;margin:0 0 3.4mm;
    page-break-inside:avoid;break-inside:avoid;
  }

#printSheet .pbox__t{
    display:inline-block;margin:0 0 2mm;
    background:#111;color:#fff;border-radius:99px;
    padding:.7mm 4mm;font-size:10pt;font-weight:700;
  }

#printSheet dl{margin:0}

#printSheet .row{
    display:grid;grid-template-columns:56mm 1fr;gap:3mm;
    padding:1.7mm 0;border-bottom:.35pt dotted #aaa;
  }

#printSheet .row:last-child{border-bottom:0}

#printSheet .row dt{margin:0;color:#555;font-size:9.5pt;line-height:1.45}

#printSheet .row dd{margin:0;min-height:5.4mm}

#printSheet .row.look dd{display:flex;gap:6mm}

#printSheet .row.look .mk{color:#888;font-size:9.5pt}

#printSheet .row.look .mk.on{color:#111;font-weight:700}

/* 표 */
  #printSheet table{
    width:100%;border-collapse:collapse;font-size:10pt;
    page-break-inside:avoid;break-inside:avoid;
  }

#printSheet th,
#printSheet td{
    border:.8pt solid #111;padding:2.2mm 2.4mm;text-align:left;vertical-align:top;
  }

#printSheet th{background:#efefef;font-size:9.5pt}

#printSheet td{height:11mm}

#printSheet td.c{text-align:center;color:#555}
}

@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}