/* SIDE WORKS 교재 지면 — 애플 최신 톤 + 전문가·신뢰 톤(2026-10-26).
   style.css 의 .page 규칙을 덮어쓴다. 지면 구조(book.js)는 그대로, 겉모습만 바꾼다. 검정 바탕 금지. */
.page{
  --pg-ink:#1d1d1f; --pg-ink2:#424245; --pg-mute:#6e6e73; --pg-line:#d2d2d7; --pg-soft:#f5f5f7;
  --pg-blue:#0071e3; --pg-blue-bg:#eef5fe; --pg-orange:#b25000; --pg-orange-bg:#fff4e8; --pg-green:#1d7a3a;
  --pg-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  background:#fff;color:var(--pg-ink);border:1px solid #e8e8ed;border-radius:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.05);
  font-family:var(--pg-font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  padding:26px 22px 0;
}
@media (min-width:760px){.page{padding:3.4cqw 4cqw 0;border-radius:24px}}

/* 쪽 머리 */
.page .pt{font:700 var(--t)/1.12 var(--pg-font);letter-spacing:-.03em;color:var(--pg-ink);gap:6px 14px;padding-bottom:.55em;border-bottom:1px solid var(--pg-line)}
.page .pt small{font:500 var(--x)/1.45 var(--pg-font);color:var(--pg-mute);letter-spacing:0}
.page .pt .chip{font:600 var(--x)/1.7 var(--pg-font);border:0;background:var(--pg-soft);color:var(--pg-ink2);border-radius:999px;padding:0 .8em}
.page .bd{font-family:var(--pg-font);line-height:1.65;color:var(--pg-ink2)}
.page .bd b,.page .bd strong{color:var(--pg-ink)}
.page h6{font:700 var(--h)/1.3 var(--pg-font);color:var(--pg-ink);letter-spacing:-.01em;margin:0 0 .45em}
.page p{margin:0 0 .7em}
.page ol,.page ul{gap:.45em}
.page li::marker{color:var(--pg-mute)}
.page .lead{font-size:calc(var(--s) * 1.15);color:var(--pg-ink);font-weight:500;line-height:1.55}

/* 쪽 바닥 */
.page .ft{font:500 var(--x)/1.3 var(--pg-font);letter-spacing:.01em;color:var(--pg-mute);border-top:1px solid #e8e8ed;text-transform:none}
.page .big{font-family:var(--pg-font);font-weight:800;color:var(--pg-soft);opacity:1}

/* 라벨·값 */
.page .lab{font:600 var(--x)/1.4 var(--pg-font);letter-spacing:.02em;color:var(--pg-mute);text-transform:none}
.page .val{font:700 calc(var(--h) * 1.45)/1.2 var(--pg-font);letter-spacing:-.02em;color:var(--pg-ink);font-variant-numeric:tabular-nums}
.page .rule{border-top:1px solid var(--pg-line);padding-top:.6em}

/* 표 — 애플 사양표처럼 얇은 선, 회색 머리, 숫자 오른쪽 */
.page .tbl{font-family:var(--pg-font);font-variant-numeric:tabular-nums;border-collapse:collapse}
.page .tbl th{font:600 var(--x)/1.4 var(--pg-font);letter-spacing:.01em;color:var(--pg-mute);background:var(--pg-soft);border-bottom:1px solid var(--pg-line);padding:.55em .7em}
.page .tbl th:first-child{border-radius:10px 0 0 0} .page .tbl th:last-child{border-radius:0 10px 0 0}
.page .tbl td{border-bottom:1px solid #e8e8ed;padding:.6em .7em;color:var(--pg-ink2)}
.page .tbl td b{color:var(--pg-ink)}
.page .tbl td:nth-child(n+2):is(:has(b:only-child)){text-align:right}
.page .tbl a{color:var(--pg-blue);text-decoration:none}
.page .tbl a:hover{text-decoration:underline}
.page .blank td{height:2.6em}
.page .est{color:var(--pg-orange)}

/* 위험 등급 */
.page .lv{border:0;border-radius:999px;padding:0 .7em;font:700 var(--x)/1.8 var(--pg-font);background:var(--pg-soft);color:var(--pg-ink2)}
.page .lv.상{background:var(--pg-orange-bg);color:var(--pg-orange)}

/* 강조 상자: 요령은 옅은 파랑, 주의는 옅은 주황 */
.page .script{border:0;border-radius:14px;background:var(--pg-blue-bg);padding:.8em 1em;margin-bottom:.8em}
.page .script .lab{color:var(--pg-blue)}
.page .script p{color:var(--pg-ink)}
.page .calc{border:0;border-radius:14px;background:var(--pg-soft);padding:.8em 1em}
.page .flow div{border:1px solid var(--pg-line);border-radius:14px;background:#fff}
.page .flow div:last-child{background:var(--pg-blue-bg);color:var(--pg-ink);border-color:transparent}
.page .flow b{font:700 var(--x) var(--pg-font);letter-spacing:.02em;color:var(--pg-mute)}
.page .cap2{font:500 var(--x)/1.45 var(--pg-font);color:var(--pg-mute)}
.page .boxes li::before{border:1.5px solid var(--pg-line);border-radius:5px}
.page .ws .blank-line{border-bottom:1px solid var(--pg-line)}
.page .cards4 .rule{border:0;background:var(--pg-soft);border-radius:14px;padding:.8em 1em}
.page .gloss div{border-top:1px solid var(--pg-line)}
.page .gloss dt{font:700 var(--h) var(--pg-font);color:var(--pg-ink)}
.page .toc div{border-top:1px solid var(--pg-line)}
.page .toc b{font:700 var(--h) var(--pg-font);color:var(--pg-ink)}
.page .scale-bars i u{border-radius:3px;background:#e8e8ed}
.page .scale-bars i u.on{background:var(--pg-blue)}
.page .grid7 .c{border-radius:5px;background:#ececf0}
.page .grid7 .c.on{background:var(--pg-blue)}
.page .grid7 .c.mid{background:#a9c9f3}
.page .grid7 .h,.page .grid7 .l{font-family:var(--pg-font)}
.page .days b{font-family:var(--pg-font);color:var(--pg-blue)}

/* 그림·사진 자리 — 둥근 모서리 */
.page .fig,.page .bigfig,.page .cv-art{border-radius:18px;overflow:hidden}
.page .fig .cal,.page .bigfig .cal,.page .cv-art .cal{border-radius:16px}
.page img.yt{border-radius:14px}
.page .ph-src img{border-radius:12px}

/* 표지·뒤표지: 밝은 청회색 그대로, 큰 산세리프 제목 */
.page.dark{background:linear-gradient(160deg,#eef2f7 0%,#e6ecf3 100%);color:var(--pg-ink);border-color:#e1e6ee}
.page.dark .cv-k{font:600 var(--x)/1.4 var(--pg-font);letter-spacing:.06em;color:var(--pg-mute);opacity:1}
.page.dark .cv-t{font-family:var(--pg-font);font-weight:800;letter-spacing:-.045em;line-height:.95;color:var(--pg-ink)}
.page.dark .cv-s{font:500 calc(var(--s) * 1.2)/1.4 var(--pg-font);color:var(--pg-ink2);opacity:1}
.page.dark .strip i{background:var(--pg-ink);border-radius:3px;opacity:.85}
.page.dark .strip i.off{opacity:.18}
.page.dark .ft{border-color:rgba(0,0,0,.08);color:var(--pg-mute)}
.page.dark .logo{color:var(--pg-ink)}

/* 휴대폰: 읽기 좋게 */
@media (max-width:759px){
  .page{--t:26px;--s:15.5px;--x:12.5px;--h:16px;border-radius:20px;padding:22px 18px 0}
  .page .bd{line-height:1.7}
  .page .tbl{font-size:13.5px}
  .page .tbl th,.page .tbl td{padding:.5em .55em}
  .page .lead{font-size:16.5px}
  .page.dark .cv-t{font-size:clamp(40px,12vw,60px)}
}
.page .ft span:last-child{white-space:nowrap}
@media (max-width:759px){.page .ft{font-size:11px;gap:8px}}
/* 30·60·90일 큰 그림(story.py roadmap): 단계 이름 → 끝났을 때의 모습 → 큰 방향 → 넘어갈 기준·정할 것 */
.page .rm .rule{display:flex;flex-direction:column;gap:.45em}
.page .rm .rm-goal{margin:0;font-weight:600;line-height:1.5}
.page .rm ul{margin:.2em 0 0}
.page .rm .rm-k{margin:0;padding:.55em .75em;border-radius:10px;background:var(--pg-soft);font-size:.92em;line-height:1.5}
.page .rm .rm-k b{display:block;font-size:.8em;letter-spacing:.04em;color:var(--pg-mute,inherit);margin-bottom:.15em}