/* lueur-cahier.css — 아이 앱 「연필과 모눈」 (2026-11-11 원장: 시안 4·5차 "오 좋아!! 고고" · "권고대로 해")
   ─────────────────────────────────────────────────────────────────────────────
   **이 파일은 생성물이다 — 직접 고치지 않는다.** 원본 `tools/cahier/생성.py`(SVG 를 data: 로 싣는 일을 손으로 하지 않는다).
   프랑스 학생의 수학 공책 한 권. 인쇄된 것 = 모눈의 푸른 잉크(--ch-pr) · 아이의 것 = 연필(--ch-gr) ·
   선생님의 것 = 빨간 색연필(--ch-rd)과 만년필. 누가 쓴 것인지가 재료로 갈린다.
   lueur-aube.css **뒤에** 문다(새벽의 배치·누름·초점 규칙 위에 재료만 갈아 입힌다). 되돌리기: app.html 의
   이 파일 <link> 와 cahier.js <script> 두 줄을 빼면 새벽으로 돌아간다.
   규칙 셋
   ① 빨간 색연필은 선생님의 손이다 — 채점·표시·지금 자리. 넓은 면·본문 글자에는 안 쓴다.
   ② 질감(필터)은 작은 것에만 건다 — 획·단추·칸. **필기 지면(#bookOv 의 책 쪽) 위에는 깔지 않는다**(필기 지연이 먼저다).
   ③ 그림자는 종이에 붙인 것(표지·쪽지·견출지)에만. */
:root{
  --l-paper:#F6F4EB; --l-paper-2:#E9E6DA; --l-surface:#FFFEF8;
  --l-ink:#26282C; --l-ink-2:#565B63;
  --l-accent:#34373C; --l-on-accent:#F6F4EB; --l-accent-2:#34373C; --l-accent-soft:#ECE9DC;
  --l-gold:#D4372B; --l-gold-2:#D4372B; --l-gold-soft:#F6DFDB; --l-lamp:#D4372B; --l-lamp-glow:none;
  --l-rule:#BFCDDD; --l-rule-2:rgba(84,122,168,.45);
  --ch-pr:#44648C; --ch-gr:#34373C; --ch-rd:#D4372B; --ch-ik:#22355C;
}

/* ══ 홈 ═════════════════════════════════════════════════════════════════════════ */
html .ah-ov{background:var(--l-paper)}
/* 종이는 스크롤하는 통에 깐다(local) — .ah-in 에 깔면 그 상자 높이까지만 칠해져 아래쪽이 민판으로 남는다(1111 첫 렌더) */
html .ah-ov .ah-scroll{background-image:linear-gradient(90deg,transparent 19px,rgba(212,55,43,.36) 19px,rgba(212,55,43,.36) 20px,transparent 20px),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:100% 100%,220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 0,0 11px,7px 0,0 11px,7px 0;background-attachment:local}
/* 인쇄된 머리 — lueur + CAHIER DE MATHÉMATIQUES(모눈의 푸른 잉크) */
html .ah-ov .ah-bar b{font-family:var(--l-sans);font-weight:800;font-size:18px;letter-spacing:-.2px;text-transform:lowercase;color:var(--ch-pr)}
html .ah-ov .ah-bar b::after{content:"CAHIER DE MATHÉMATIQUES";font-size:8px;font-weight:700;letter-spacing:.2em;margin-top:5px;color:var(--ch-pr)}
html .ah-ov[data-ch] .ah-head{background:none;box-shadow:none;border-radius:0;overflow:visible}
html .ah-ov .ah-head img,html .ah-ov .ah-headtx{display:none}
html .ah-ov .ch-date{position:absolute;right:22px;top:calc(19px + var(--sat,0px));height:19px;width:auto;pointer-events:none;filter:url(#ch-pc)}
html .ah-ov .ch-date path{fill:none;stroke:var(--ch-gr);stroke-linecap:round;stroke-linejoin:round}
html .ah-ov[data-ch] .ah-head button.ah-ck{right:18px;top:calc(52px + var(--sat,0px));color:var(--l-ink-2)}
html .ah-ov[data-ch] .ah-head .ah-ck b,html .ah-ov[data-ch] .ah-head .ah-ck small{font-size:11.5px;font-weight:500;color:var(--l-ink-2)}
html .ah-ov[data-ch] .ah-head button.ah-ck:focus-visible{outline-color:var(--ch-gr)}
html .ah-ov .ah-sheet{background:none;background-image:none;border-radius:0}
@media(max-width:599px){
  html .ah-ov .ah-bar{padding:calc(20px + var(--sat,0px)) 24px 0 30px}
  html .ah-ov.ah-scrolled .ah-bar{background:var(--l-paper);box-shadow:0 1.5px 0 var(--l-rule-2);padding:calc(10px + var(--sat,0px)) 24px 10px 30px}
  html .ah-ov.ah-scrolled .ah-bar b{font-size:16px}
  html .ah-ov[data-ch] .ah-bar b,html .ah-ov[data-ch] .ah-bar b::after{color:var(--ch-pr)}
  html .ah-ov .ah-head{height:calc(104px + var(--sat,0px));min-height:0}
  html .ah-ov .ah-sheet{margin:0 -20px;padding:2px 22px 0 30px}
}
@media(max-width:359px){
  html .ah-ov .ah-bar,html .ah-ov.ah-scrolled .ah-bar{padding-left:28px;padding-right:18px}
  html .ah-ov .ah-sheet{margin:0 -16px;padding:2px 18px 0 28px}
  html .ah-ov .ch-date{right:18px;height:17px}
}
@media(min-width:600px){
  html .ah-ov .ah-bar{padding-left:30px}
  html .ah-ov .ah-head{height:96px}
  html .ah-ov .ch-date{right:28px;top:20px}
  html .ah-ov[data-ch] .ah-head button.ah-ck{right:24px;top:50px}
  html .ah-ov .ah-sheet{margin-top:0;padding:2px 30px 0}
  /* 아이패드(1111 원장 "내 아이패드에서 화면비율에 안 맞는데") — 새벽의 640 기둥(app.html .ah-scroll max-width)에 종이를 깔아
     1024 화면에서 가운데 640 만 모눈이고 양옆 192px 이 민판, 머리 'lueur' 는 종이 밖에 떠 있었다.
     종이는 화면 폭 전부에 깔고(빨간 여백 줄은 글 단 왼쪽), 글 단은 가운데 640 그대로 · 머리는 폰처럼 종이 위에 얹는다. */
  html .ah-ov .ah-scroll{max-width:none;padding-left:max(20px,calc(50% - 320px));padding-right:max(20px,calc(50% - 320px));background-image:linear-gradient(90deg,transparent calc(50% - 301px),rgba(212,55,43,.36) calc(50% - 301px),rgba(212,55,43,.36) calc(50% - 300px),transparent calc(50% - 300px)),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px)}
  html .ah-ov .ah-bar{position:absolute;left:0;right:0;top:0;z-index:3;max-width:none;min-height:0;background:transparent;pointer-events:none;padding:calc(20px + var(--sat,0px)) max(24px,calc(50% - 296px)) 0 max(30px,calc(50% - 290px))}
  html .ah-ov.ah-scrolled .ah-bar{background:var(--l-paper);box-shadow:0 1.5px 0 var(--l-rule-2);padding-top:calc(10px + var(--sat,0px));padding-bottom:10px}
  html .ah-ov.ah-scrolled .ah-bar b{font-size:16px}
  html .ah-ov.ah-scrolled .ah-bar b::after{display:none}
}
/* 작은 표제 — 인쇄된 푸른 글자 */
html .ah-ov .ah-sheet .l-eyebrow{font-family:var(--l-sans);font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--ch-pr)}
/* 이어서 — 테이프로 붙인 표지 · 연필로 칠한 칸 · 흑연 단추 · '여기부터' */
html .ah-ov .ah-rcard{position:relative}
html .ah-ov .ah-rrow{position:relative}
html .ah-ov .ah-rcov{border-radius:1.5px;transform:rotate(-3deg);box-shadow:0 1px 1px rgba(40,44,52,.25),2px 5px 9px rgba(40,44,52,.20)}
html .ah-ov .ah-rcov:not(:has(img)){transform:none;box-shadow:none}
html .ah-ov .ah-rrow::before{content:"";position:absolute;left:13px;top:-8px;z-index:2;width:46px;height:15px;background:#E9C46A;opacity:.86;transform:rotate(5deg);pointer-events:none;
  clip-path:polygon(0 0,3% 18%,0 36%,3% 54%,0 72%,3% 90%,1% 100%,99% 100%,97% 82%,100% 64%,97% 46%,100% 28%,97% 10%,99% 0)}
@supports selector(:has(a)){ html .ah-ov .ah-rrow:not(:has(.ah-rcov img))::before{display:none} }
html .ah-ov .ah-rmeta b{font-family:var(--l-sans);font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.25}
html .ah-ov .ah-rmeta span{font-size:12.5px;color:var(--l-ink-2)}
html .ah-ov .ah-rbar{height:13px;max-width:170px;margin-top:10px;background:repeating-linear-gradient(90deg,rgba(84,122,168,.85) 0,rgba(84,122,168,.85) 1px,transparent 1px,transparent 10%);
  border:1px solid rgba(84,122,168,.85);border-left:0}
html .ah-ov .ah-rbar i{background:repeating-linear-gradient(118deg,var(--ch-gr) 0,var(--ch-gr) 1.1px,transparent 1.1px,transparent 3.1px);filter:url(#ch-pc)}
html .ah-ov .ah-rcnt{font-size:10.5px;margin-top:4px}
html .ah-ov button.ah-rbtn{min-height:48px;border-radius:3px;font-size:15px;font-weight:700;background:var(--ch-gr);color:var(--l-on-accent);filter:url(#ch-rough)}
html .ah-ov button.ah-rbtn::before{display:none}
@supports selector(:has(a)){
  html .ah-ov .ah-rcard:has(.ah-rcov img) button.ah-rbtn{width:calc(100% - 96px);margin-left:96px}
  html .ah-ov .ah-rcard:has(.ah-rcov img)::after{content:"";position:absolute;left:0;bottom:-18px;width:96px;height:82px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 82%22%3E%3Cfilter id=%22p%22 x=%22-8%25%22 y=%22-8%25%22 width=%22116%25%22 height=%22116%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.15%22 numOctaves=%222%22 seed=%229%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.6 0 0 0 2.1%22 result=%22a%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cg filter=%22url%28%23p%29%22 fill=%22none%22 stroke=%22%2334373C%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 50C22 30 40 18 74 26M74 26L62 17M74 26L64 36%22 stroke-width=%221.7%22/%3E%3Cg transform=%22translate%284 58%29 rotate%28-6%29 scale%280.0348%29%22%3E%3Cpath d=%22M354 61L351 178L218 178L169 181L141 190L101 175L55 172L22 190L3 240L0 267L9 326L22 344L46 363L83 369L117 360L148 332L163 295L145 193M354 181L354 289L268 289L166 298M354 292L360 486L366 526M805 44L802 192L795 238L802 518M482 161L513 152L531 155L583 145L645 145L639 204L623 247L599 290L571 330L537 364L485 395M1015 28L1030 117L1190 114L1209 108L1209 28L1200 0M1030 117L1030 222L1043 231L1077 231L1203 222L1212 209L1209 114M917 354L1027 345L1319 339M1156 348L1156 563M1774 35L1771 232L1743 238L1645 238L1626 244M1399 139L1423 139L1423 235L1414 287L1414 361L1420 379L1426 385L1509 382L1608 388M1423 136L1433 127L1553 118L1589 121M1771 238L1780 515M1423 241L1565 241%22 stroke-width=%2243%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
}
/* 할 것 — 연필 네모 · 빨간 체크 */
html .ah-ov .ah-hw .hwh{border-bottom:1px solid var(--l-rule-2)}
html .ah-ov .ah-hw .ahHwCk,html .ah-ov .ah-hw .hwi .st{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:20px;margin:0 10px 0 0;border:1.5px solid var(--ch-gr);border-radius:2px 3px 2px 4px;background:none;transform:rotate(-1.5deg)}
html .ah-ov .ah-hw .ahHwCk:checked,html .ah-ov .ah-hw .hwi.done .st{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 26 24%22%3E%3Cfilter id=%22r%22 x=%22-10%25%22 y=%22-40%25%22 width=%22120%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.04%22 numOctaves=%222%22 seed=%2211%22 result=%22w%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22w%22 scale=%221.6%22 result=%22d%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%222%22 seed=%2221%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3 0 0 0 2.25%22 result=%22a%22/%3E%3CfeComposite in=%22d%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M5 12C8 14 9 17 10 20C13 12 18 5 24 0%22 fill=%22none%22 stroke=%22%23D4372B%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 filter=%22url%28%23r%29%22/%3E%3C/svg%3E") 3px -4px/24px 24px no-repeat}
html .ah-ov .ah-hw .hwi.done .t{color:#6A6F77}
html .ah-ov .ah-hw .hwg .bar{height:9px;background:repeating-linear-gradient(90deg,rgba(84,122,168,.85) 0,rgba(84,122,168,.85) 1px,transparent 1px,transparent 10%);border:1px solid rgba(84,122,168,.85);border-left:0;border-radius:0}
html .ah-ov .ah-hw .hwg .bar b{background:repeating-linear-gradient(118deg,var(--ch-gr) 0,var(--ch-gr) 1.1px,transparent 1.1px,transparent 3.1px);border-radius:0}
/* 오늘 — 숫자 셋은 작게, 그 아래 형광펜 10분 칸과 이어진 날 동그라미(cahier.js 가 놓는다) */
html .ah-ov .ah-sheet #ahHero{border-top:0;padding-top:0;margin-top:22px}
html .ah-ov .ah-sheet #ahFootH{position:static;width:auto;height:auto;margin:0 0 8px;padding:0;overflow:visible;clip:auto;white-space:normal}
html .ah-ov .ah-sheet .ah-fig,html .ah-ov .ah-sheet .ah-fig b{font-family:var(--l-sans);font-size:22px;font-weight:800;letter-spacing:-.3px}
html .ah-ov .ah-sheet .ah-figk{font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--l-ink-2);margin-top:4px}
html .ah-ov .ch-plan{position:relative;height:30px;margin-top:14px;max-width:320px}
html .ah-ov .ch-plan svg{position:absolute;left:0;top:0;width:100%;height:30px}
html .ah-ov .ch-plan i{position:absolute;left:0;top:11px;height:17px;background:#FFE040;opacity:.72;mix-blend-mode:multiply;border-radius:2px;filter:url(#ch-hl)}
html .ah-ov .ch-week{display:flex;justify-content:space-between;max-width:320px;margin-top:12px}
html .ah-ov .ch-week span{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--l-ink-2)}
html .ah-ov .ch-week span.t{color:var(--l-ink);font-weight:800}
html .ah-ov .ch-week svg{position:absolute;left:-2px;top:-2px;width:38px;height:38px;overflow:visible;filter:url(#ch-rp)}
html .ah-ov .ah-rule{border-color:var(--l-rule-2)}
html .ah-ov .ah-list{border-color:var(--l-rule-2)}
html .ah-ov .ah-sheet .ah-card{border-top-color:var(--l-rule-2)}
html .ah-ov .ah-sheet .ah-garden{border-radius:3px}

/* ══ 하단 메뉴 — 공책의 색인 견출지 ════════════════════════════════════════════════ */
html #appNav{background:linear-gradient(180deg,transparent 0,transparent 12px,var(--l-paper-2) 12px)!important;border-top:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;gap:4px;padding-left:9px;padding-right:9px;align-items:end}
html #appNav .an-item{font-family:var(--l-sans);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-indent:0;color:#4B4F57;min-height:46px;height:46px;padding:0;align-items:center;
  border-radius:9px 9px 0 0;box-shadow:0 -1px 2px rgba(40,44,52,.14),inset 0 1px 0 rgba(255,255,255,.5)}
html #appNav .an-item:nth-child(1){background:#F2D9A0} html #appNav .an-item:nth-child(2){background:#C5D9EA} html #appNav .an-item:nth-child(3){background:#EBC8C2}
html #appNav .an-item:nth-child(4){background:#CDDFC0} html #appNav .an-item:nth-child(5){background:#D8CDE6}
html #appNav .an-item.on{height:56px;background:#FFFEF8;color:#1F2124;box-shadow:0 -2px 5px rgba(40,44,52,.2)}
html #appNav .an-item.on::before{left:14px;right:14px;top:auto;bottom:11px;width:auto;height:6px;margin:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 7%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22r%22 x=%22-10%25%22 y=%22-40%25%22 width=%22120%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.04%22 numOctaves=%222%22 seed=%2211%22 result=%22w%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22w%22 scale=%221.6%22 result=%22d%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%222%22 seed=%2221%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3 0 0 0 2.25%22 result=%22a%22/%3E%3CfeComposite in=%22d%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M2 4C12 1 20 6 30 3C40 1 48 6 58 3%22 fill=%22none%22 stroke=%22%23D4372B%22 stroke-width=%222%22 stroke-linecap=%22round%22 filter=%22url%28%23r%29%22/%3E%3C/svg%3E") center/100% 100% no-repeat;box-shadow:none;animation:none}
html #appNav .an-item:active{opacity:1;filter:brightness(.94)}
html #appNav .an-item:focus-visible{outline:2px solid var(--ch-gr);outline-offset:-3px}
@media(max-width:360px){ html #appNav .an-item{font-size:10.5px;letter-spacing:.03em} html #appNav{gap:3px;padding-left:6px;padding-right:6px} }

/* ══ 서가 — 표지를 테이프로 붙여 둔 쪽 ═══════════════════════════════════════════════ */
@supports selector(:has(a)){
  html #bookOv:has(#bkBody > .bk-shelf){background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 11px,7px 0,0 11px,7px 0}
}
html #bookOv .bk-h1{font-family:var(--l-sans);font-size:10px;font-weight:700;letter-spacing:.18em;line-height:1.4;color:var(--ch-pr);margin:6px 0 2px}
html #bookOv .bk-lead{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--l-ink);margin-bottom:6px}
html #bookOv .bk-cchip.on{font-size:20px;font-weight:800;letter-spacing:-.3px}
html #bookOv .bk-filt{border-bottom:1.5px solid var(--l-rule-2)}
html #bookOv .bk-rowh{font-family:var(--l-sans);font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--ch-pr)}
html #bookOv .bk-grid{gap:30px 18px;padding-top:10px}
html #bookOv .bk-gcard{position:relative}
html #bookOv .bk-gcov{border-radius:1.5px;box-shadow:0 1px 1px rgba(40,44,52,.25),2px 5px 9px rgba(40,44,52,.20)}
html #bookOv .bk-gcard:nth-child(3n+1) .bk-gcov{transform:rotate(-1.8deg)} html #bookOv .bk-gcard:nth-child(3n+2) .bk-gcov{transform:rotate(1.3deg)} html #bookOv .bk-gcard:nth-child(3n) .bk-gcov{transform:rotate(-.7deg)}
html #bookOv .bk-gcard::before{content:"";position:absolute;left:calc(50% - 23px);top:-8px;z-index:2;width:46px;height:15px;opacity:.86;pointer-events:none;background:#E9C46A;transform:rotate(4deg);
  clip-path:polygon(0 0,3% 18%,0 36%,3% 54%,0 72%,3% 90%,1% 100%,99% 100%,97% 82%,100% 64%,97% 46%,100% 28%,97% 10%,99% 0)}
html #bookOv .bk-gcard:nth-child(5n+2)::before{background:#9FC3DE;transform:rotate(-3deg)} html #bookOv .bk-gcard:nth-child(5n+3)::before{background:#E3A9A0;transform:rotate(2deg)}
html #bookOv .bk-gcard:nth-child(5n+4)::before{background:#A9CC97;transform:rotate(-5deg)} html #bookOv .bk-gcard:nth-child(5n)::before{background:#C3B2DD;transform:rotate(3deg)}
html #bookOv .bk-gnm{font-family:var(--l-sans);font-size:13.5px;font-weight:700;letter-spacing:-.2px;margin-top:12px}
html #bookOv .bk-gsub{font-size:11.5px}
@supports selector(:has(a)){
  html #bookOv .bk-gcard:has(.bk-gmark) .bk-gnm::before{display:none}
  html #bookOv .bk-gcard:has(.bk-gmark) .bk-gnm{padding-bottom:7px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 7%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22r%22 x=%22-10%25%22 y=%22-40%25%22 width=%22120%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.04%22 numOctaves=%222%22 seed=%2211%22 result=%22w%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22w%22 scale=%221.6%22 result=%22d%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%222%22 seed=%2221%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3 0 0 0 2.25%22 result=%22a%22/%3E%3CfeComposite in=%22d%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M2 4C12 1 20 6 30 3C40 1 48 6 58 3%22 fill=%22none%22 stroke=%22%23D4372B%22 stroke-width=%222%22 stroke-linecap=%22round%22 filter=%22url%28%23r%29%22/%3E%3C/svg%3E") left bottom/92px 6px no-repeat}
}
/* 누름 — 종이에 붙인 것은 살짝 눌린다 */
html #bookOv .bk-gmain:active .bk-gcov{filter:brightness(.96)}
@media (prefers-reduced-motion:reduce){ html .ah-ov .ah-rbar i{animation:none} }

/* ══ 2단계(1111 밤 · 원장 "일단 다 적용해줘") — 한 문제씩 · 튜터 · 공용 단추 ════════════════════════════════════
   필기가 일어나는 종이(.bk-qnpaper · 책 쪽)에는 필터를 걸지 않는다 — 바탕 무늬(CSS 그림)만 깐다. */
html body .lb-pri,html body .lb-ghost{border-radius:3px}
/* ── 한 문제씩 ── */
@supports selector(:has(a)){
  html #bookOv:has(.bk-dock) .bk-body{background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 11px,7px 0,0 11px,7px 0;background-attachment:local}
}
html #bookOv .bk-top{border-bottom:1.5px solid var(--l-rule-2)}
html #bookOv .bk-jbtn,html #bookOv .bk-thmbtn,html #bookOv .bk-zbtn{border-radius:3px}
html #bookOv .bk-ask{border-radius:3px;background:var(--ch-ik)}
html #bookOv .bk-pcard{position:relative;border:0;border-radius:2px;background:#FFFEF8;box-shadow:0 1px 1px rgba(40,44,52,.2),2px 5px 10px rgba(40,44,52,.14);margin-top:10px;overflow:visible}
html #bookOv .bk-pcard::before{content:"";position:absolute;left:calc(50% - 26px);top:-8px;z-index:2;width:52px;height:15px;background:#9FC3DE;opacity:.86;transform:rotate(-2deg);pointer-events:none;clip-path:polygon(0 0,3% 18%,0 36%,3% 54%,0 72%,3% 90%,1% 100%,99% 100%,97% 82%,100% 64%,97% 46%,100% 28%,97% 10%,99% 0)}
html #bookOv .bk-qnhead .bk-qntt{color:var(--ch-pr);font-weight:700;letter-spacing:.08em}
html #bookOv .bk-qnai,html #bookOv .bk-qnundo,html #bookOv .bk-qnclear,html #bookOv .bk-qnt{border-radius:3px}
html #bookOv .bk-qnai{border:1.4px solid var(--ch-ik);color:var(--ch-ik)}
html #bookOv .bk-qnpaper{border-radius:2px;border:1px solid rgba(84,122,168,.7);background-color:#FFFEF8;
  background-image:linear-gradient(rgba(84,122,168,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.26) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.12) 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 11px,7px 0,0 11px,7px 0}
html #bookOv .bk-dock{border-top:1.5px solid var(--l-rule-2)}
html #bookOv .bk-dock .bk-inp{border-radius:2px;border:1.5px solid rgba(84,122,168,.8);background:rgba(255,255,255,.6)}
html #bookOv .bk-dock .bk-grade,html #bookOv .bk-dock .bk-nav button{border-radius:3px}
html #bookOv .bk-dock .bk-grade{filter:url(#ch-rough)}
html #bookOv .bk-dock .bk-keys button{border-radius:3px;border:1px solid rgba(84,122,168,.7);background:rgba(255,255,255,.5)}
/* 채점 — 학교에서 받던 그대로: 동그라미 · 빗금(✕ 표와 붉은 상자 대신) */
html #bookOv .bk-res{border-color:var(--l-rule-2)}
html #bookOv .bk-res .ic{flex:none;width:52px;height:44px;border:0;border-radius:0;background-color:transparent;box-shadow:none;font-size:0;color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat}
html #bookOv .bk-res.o .ic{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 54%22%3E%3Cfilter id=%22r%22 x=%22-10%25%22 y=%22-40%25%22 width=%22120%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.04%22 numOctaves=%222%22 seed=%2211%22 result=%22w%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22w%22 scale=%221.6%22 result=%22d%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%222%22 seed=%2221%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3 0 0 0 2.25%22 result=%22a%22/%3E%3CfeComposite in=%22d%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M34 5C17 3 5 12 6 27C7 42 20 50 35 48C50 46 59 36 57 23C55 11 44 4 28 7M30 5C18 7 9 14 7 24%22 fill=%22none%22 stroke=%22%23D4372B%22 stroke-width=%223.6%22 stroke-linecap=%22round%22 filter=%22url%28%23r%29%22/%3E%3C/svg%3E")}
html #bookOv .bk-res.x .ic{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 54%22%3E%3Cfilter id=%22r%22 x=%22-10%25%22 y=%22-40%25%22 width=%22120%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.04%22 numOctaves=%222%22 seed=%2211%22 result=%22w%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22w%22 scale=%221.6%22 result=%22d%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%222%22 seed=%2221%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3 0 0 0 2.25%22 result=%22a%22/%3E%3CfeComposite in=%22d%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M10 46L54 8%22 fill=%22none%22 stroke=%22%23D4372B%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 filter=%22url%28%23r%29%22/%3E%3C/svg%3E")}
html .bk-sheet{border-radius:6px 6px 0 0}
html .bk-sheet button{border-radius:3px}
html #bookOv #bkShow{border-radius:3px!important;border:1.4px solid var(--ch-gr)!important;color:var(--ch-gr)!important}
/* ── 튜터 — 아이의 말은 연필 테두리 · 튜터의 말은 만년필 줄 · 쪽지 ── */
html:not([data-theme]) .chat .chat-body{background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 11px,7px 0,0 11px,7px 0;background-attachment:local}
html .chat-top{border-bottom:1.5px solid var(--l-rule-2)}
html .chat-top .t{font-family:var(--l-sans);font-weight:800;letter-spacing:-.2px}
html .chat-top .badge{border-radius:3px;color:var(--ch-pr);border-color:var(--l-rule-2)}
html .msg.user{background:rgba(255,255,255,.55);border:1.4px solid var(--ch-gr);border-radius:3px 5px 3px 6px}
html .msg.bot{border-left:2.5px solid var(--ch-ik);padding-left:12px}
html .msg.bot.thinking{border-left-color:var(--l-rule-2)}
html .msg-inkpad{background:rgba(255,255,255,.75);border:0;border-radius:1px;box-shadow:0 1px 1px rgba(40,44,52,.2),1px 4px 8px rgba(40,44,52,.14)}
html .cl-hello-t{font-family:var(--l-sans);font-weight:800}
html .chip{border-radius:3px;border:1.3px solid rgba(52,55,60,.55);background:rgba(255,255,255,.5)}
html .cl-composer{background:var(--l-paper)}
html .cl-box{border-radius:3px;border:0;background:#FFFEF8;box-shadow:0 1px 1px rgba(40,44,52,.2),1px 3px 8px rgba(40,44,52,.14)}
html .cl-box:focus-within{box-shadow:0 0 0 2px var(--ch-gr),1px 3px 8px rgba(40,44,52,.14)}
html #sendBtn{border-radius:3px}

/* ══ 3단계(1111 · 원장 "문제 목록·지면의 스크롤바·툴바 단추까지 다 검토해서") — 딸린 화면과 작은 단추 ══════════════════
   H = html:not([data-theme]) body — 스킨(lueur-skin.css)이 같은 머리로 짚는 자리를 뒤에서 이긴다. */
/* ── 한 문제씩 머리띠 — 손끝 44 · 폰에서는 테마 글자를 접어 책 이름에 자리를 준다 ── */
html #bookOv .bk-jbtn,html #bookOv .bk-ask{min-height:44px}
html #bookOv .bk-jbtn,html #bookOv .bk-thmbtn{border:1px solid rgba(84,122,168,.75);background:rgba(255,255,255,.5);color:var(--l-ink)}
html #bookOv .bk-jbtn{font-variant-numeric:tabular-nums;font-weight:700}
html #bookOv .bk-thmbtn i{border-color:rgba(52,55,60,.45)}
@media(max-width:480px){
  html #bookOv .bk-top.solver .bk-thmbtn{width:44px;padding:0;gap:0}
  html #bookOv .bk-top.solver .bk-thmbtn span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* 확대 — 문제 그림을 덮지 않게 쪽지 아래에 매단 꼬리표 */
html #bookOv .bk-pcard{margin-bottom:44px}
html #bookOv .bk-zbtn{top:auto;bottom:-36px;right:12px;min-height:44px;padding:0 14px;border:1px solid rgba(84,122,168,.75);background:#FFFEF8;color:var(--ch-pr);font-size:11px;font-weight:700;letter-spacing:.1em;
  box-shadow:0 1px 1px rgba(40,44,52,.2),1px 3px 6px rgba(40,44,52,.12)}
/* 풀이 노트 도구 — 고른 색은 흑연 고리 · 같이 볼 사람 단추는 연필 점선 */
html #bookOv .bk-qntools .bk-qnc.on i{box-shadow:0 0 0 2px #FFFEF8,0 0 0 3.5px var(--ch-gr)}
html #bookOv .sg-ask{border-radius:3px;border:1.4px dashed rgba(52,55,60,.6);background:rgba(255,255,255,.4);color:var(--l-ink)}
html #bookOv .bk-dock .bk-inp:focus{outline:2px solid var(--ch-gr);outline-offset:-1px;border-color:transparent;box-shadow:none}
html #bookOv .bk-dock .bk-nav button.bk-prev{border:1px solid rgba(84,122,168,.7);background:rgba(255,255,255,.5);color:var(--ch-gr)}
/* ── 문제 목록 — 모눈 칸에 번호 · 맞음은 동그라미 · 틀림은 빗금 · 지금 문항은 흑연 테두리 ── */
html #bookOv .bj-back{background:rgba(38,40,44,.3)}
html #bookOv .bj-sheet{border-radius:6px 6px 0 0;background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E");background-size:220px 220px}
html #bookOv .bj-ttl{color:var(--ch-pr);font-family:var(--l-sans);font-size:10px;font-weight:700;letter-spacing:.18em}
html #bookOv .bj-head{border-bottom:1.5px solid var(--l-rule-2);margin-bottom:10px}
html #bookOv .bj-filt button{min-height:44px;border-radius:3px;border:1px solid rgba(84,122,168,.75);background:rgba(255,255,255,.5);color:var(--l-ink-2);font-size:11px;font-weight:700;letter-spacing:.08em}
html #bookOv .bj-filt button.on{background:var(--ch-gr);border-color:var(--ch-gr);color:var(--l-on-accent)}
html #bookOv .bj-grid{gap:0;padding:1px 17px 18px 16px}
html #bookOv .bj-grid button{position:relative;border-radius:0;border:1px solid rgba(84,122,168,.6);margin:0 -1px -1px 0;background:rgba(255,255,255,.6);color:var(--l-ink-2);font-size:13px;font-weight:500}
html #bookOv .bj-grid button.o{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 54%22%3E%3Cfilter id=%22r%22 x=%22-10%25%22 y=%22-40%25%22 width=%22120%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.04%22 numOctaves=%222%22 seed=%2211%22 result=%22w%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22w%22 scale=%221.6%22 result=%22d%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%222%22 seed=%2221%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3 0 0 0 2.25%22 result=%22a%22/%3E%3CfeComposite in=%22d%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M34 5C17 3 5 12 6 27C7 42 20 50 35 48C50 46 59 36 57 23C55 11 44 4 28 7M30 5C18 7 9 14 7 24%22 fill=%22none%22 stroke=%22%23D4372B%22 stroke-width=%223.6%22 stroke-linecap=%22round%22 filter=%22url%28%23r%29%22/%3E%3C/svg%3E") center/82% 82% no-repeat,rgba(255,255,255,.6);border-color:rgba(84,122,168,.6);color:var(--l-ink);font-weight:700}
html #bookOv .bj-grid button.x{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 54%22%3E%3Cfilter id=%22r%22 x=%22-10%25%22 y=%22-40%25%22 width=%22120%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.04%22 numOctaves=%222%22 seed=%2211%22 result=%22w%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22w%22 scale=%221.6%22 result=%22d%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%222%22 seed=%2221%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3 0 0 0 2.25%22 result=%22a%22/%3E%3CfeComposite in=%22d%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M10 46L54 8%22 fill=%22none%22 stroke=%22%23D4372B%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 filter=%22url%28%23r%29%22/%3E%3C/svg%3E") center/82% 82% no-repeat,rgba(255,255,255,.6);border-color:rgba(84,122,168,.6);color:var(--l-ink);font-weight:700}
html #bookOv .bj-grid button.cur{outline:2.5px solid var(--ch-gr);outline-offset:-2px;z-index:1;color:var(--l-ink);font-weight:800}
/* ── 확대 창 ── */
html #bkZoom .bz-bar{border-bottom:1.5px solid var(--l-rule-2)}
html #bkZoom .bz-b,html #bkZoom .bz-x{border-radius:3px;border:1px solid rgba(84,122,168,.75);background:rgba(255,255,255,.5);color:var(--ch-gr)}
html #bkZoom .bz-l{color:var(--l-ink-2)}
html #bkZoom .bz-stage{background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 11px,7px 0,0 11px,7px 0;background-attachment:local}
html #bkZoom .bz-doc{box-shadow:0 1px 1px rgba(40,44,52,.2),2px 5px 12px rgba(40,44,52,.14)}
/* ── 교재 지면 — 쪽 띠는 자(눈금 열 칸 · 붉은 커서) · 도구 띠는 종이 필통 ── */
html #bookOv .bk-pgnav{border-bottom:1.5px solid var(--l-rule-2)}
html #bookOv .bk-pgnav.bot{border-bottom:0;border-top:1.5px solid var(--l-rule-2)}
html #bookOv .bk-pgsl .tr{top:10px;height:10px;border-radius:0;border-right:1px solid rgba(84,122,168,.8);
  background:linear-gradient(rgba(84,122,168,.85),rgba(84,122,168,.85)) 0 100%/100% 1.5px no-repeat,
    repeating-linear-gradient(90deg,rgba(84,122,168,.8) 0,rgba(84,122,168,.8) 1px,transparent 1px,transparent 10%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(84,122,168,.4) 0,rgba(84,122,168,.4) 1px,transparent 1px,transparent 2%) 0 100%/100% 5px no-repeat}
html #bookOv .bk-pgsl .fl{top:18px;height:3px;border-radius:0;background:var(--ch-gr)}
html #bookOv .bk-pgsl .th{top:6px;width:3px;height:17px;border-radius:1px;background:var(--ch-rd)}
html #bookOv .bk-pgsl.drag .th{transform:translateX(-50%) scaleY(1.2);background:var(--ch-rd)}
html #bookOv .bk-pgsl .nt{top:3px;width:5px;height:5px;border-radius:50%;background:var(--ch-rd);box-shadow:none}
html #bookOv .bk-pgpill{color:var(--l-ink);font-weight:700}
html #bookOv .bk-pgtip{background:var(--ch-gr);border-radius:3px}
html #bookOv .bk-pgtip .pv{border-radius:1px}
html #bookOv .bk-fbpg{border-radius:2px;box-shadow:0 1px 1px rgba(40,44,52,.2),2px 5px 12px rgba(40,44,52,.14)}
html #bookOv .bk-fbnum{color:var(--l-ink-2)}
html:not([data-theme]) body .bk-fbtool{background:#FFFEF8;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(84,122,168,.75);border-radius:5px;box-shadow:0 1px 1px rgba(40,44,52,.22),2px 6px 14px rgba(40,44,52,.18)}
html:not([data-theme]) body .bk-fbtool button{border-radius:3px;border-color:rgba(84,122,168,.6);background:rgba(255,255,255,.6);color:var(--ch-gr)}
html:not([data-theme]) body .bk-fbtool .bk-tl.on{background:var(--ch-gr);color:var(--l-on-accent);border-color:var(--ch-gr)}
html:not([data-theme]) body .bk-fbtool .bk-th{background:none}
html:not([data-theme]) body .bk-fbtool .bk-th span{background:#9AA0A8}
html:not([data-theme]) body .bk-fbtool .bk-th.on{border-color:var(--ch-gr);background:rgba(52,55,60,.08)}
html:not([data-theme]) body .bk-fbtool .bk-th.on span{background:var(--ch-gr)}
html:not([data-theme]) body .bk-fbtool .bk-sw{border-radius:50%;border:2px solid #FFFEF8;box-shadow:0 0 0 1px rgba(52,55,60,.35)}
html:not([data-theme]) body .bk-fbtool .bk-sw.on{box-shadow:0 0 0 2.5px var(--ch-gr)}
html:not([data-theme]) body .bk-fbtool .bk-cust{border-radius:50%;border:0}
html:not([data-theme]) body .bk-fbtool .bk-div{background:rgba(84,122,168,.55)}
html:not([data-theme]) body .bk-fbtool .bk-fbpin{border-left-color:rgba(84,122,168,.55)}
@media(max-width:560px){ html:not([data-theme]) body .bk-fbtool{border-radius:5px} html:not([data-theme]) body .bk-fbtool .bk-fbpin{border-top-color:rgba(84,122,168,.55)} }
/* 힌트 단추(.bk-hint)는 book.js 가 !important 로 옛 크림·금 테두리를 박아 둔다 — 같은 세기로 만년필 색을 입힌다(힌트 = 선생님의 잉크) */
html:not([data-theme]) body .bk-hint{background:#FFFEF8!important;color:var(--ch-ik)!important;border:1.4px solid var(--ch-ik)!important}
/* 묻기 시트 머리 — 초록 밤 대신 만년필 잉크(공책 안에서 유일하게 짙은 띠 · 오브는 그대로) */
html body.app-in.tutor-sheet #chatBox,html body.app-in.has-appnav.tutor-sheet #chatBox{border-radius:6px 6px 0 0;border-top:0}
html body.tutor-sheet .bk-tsbar{background:var(--ch-ik);border-radius:6px 6px 0 0}
html body.tutor-sheet .bk-tsbar button{border-radius:3px;min-height:44px}
html:not([data-theme]) body .bk-fbtool .bk-zlbl{color:var(--l-ink-2)}
/* ── 스크롤바(마우스·트랙패드 기기) — 가는 푸른 줄 ── */
html .ah-ov .ah-scroll,html #bookOv .bk-body,html #bookOv .bk-fbscroll,html #bookOv .bj-grid,html .chat-body,html #bkZoom .bz-stage{scrollbar-width:thin;scrollbar-color:rgba(84,122,168,.55) transparent}
html .ah-ov .ah-scroll::-webkit-scrollbar,html #bookOv .bk-body::-webkit-scrollbar,html #bookOv .bk-fbscroll::-webkit-scrollbar,html #bookOv .bj-grid::-webkit-scrollbar,html .chat-body::-webkit-scrollbar,html #bkZoom .bz-stage::-webkit-scrollbar{width:9px;height:9px}
html .ah-ov .ah-scroll::-webkit-scrollbar-thumb,html #bookOv .bk-body::-webkit-scrollbar-thumb,html #bookOv .bk-fbscroll::-webkit-scrollbar-thumb,html #bookOv .bj-grid::-webkit-scrollbar-thumb,html .chat-body::-webkit-scrollbar-thumb,html #bkZoom .bz-stage::-webkit-scrollbar-thumb{background:rgba(84,122,168,.5);border:3px solid transparent;background-clip:content-box;border-radius:0}

/* ══ 4단계(1111 · 원장 "로딩 화면들을 다 검토해서 예쁘게") — 기다림의 말은 하나: **연필이 줄을 긋는다** ══════════════════
   ① 글 한 줄 + 그 밑에 연필 물결이 왼쪽에서 그어진다(.lu-wait — 기다리는 자리에만 붙는 이름. 빈 자리·오류 글에는 안 붙는다)
   ② 뼈대(.lu-skel)는 세이지 물결 대신 모눈 칸이 연필로 칠해진다  ③ 책 쪽은 그림이 오기 전 옅은 물결 하나(멈춘 그림 — 지면 위에서는 아무것도 안 움직인다)
   움직임은 기다리는 동안에만 돈다. 동작 줄이기 기기에서는 멈춘 그림. */
@keyframes chDraw{0%{clip-path:inset(0 100% 0 0);opacity:1}55%,84%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
html .lu-wait{color:var(--l-ink-2)}
html .lu-wait::after,html #lzVeil::after,html .sl-load::after{content:"";display:block;width:92px;height:10px;margin:10px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 92 10%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%22-8%25%22 y=%22-8%25%22 width=%22116%25%22 height=%22116%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.15%22 numOctaves=%222%22 seed=%229%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.6 0 0 0 2.1%22 result=%22a%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M2 6C10 1 16 9 24 5C32 1 38 9 46 5C54 1 60 9 68 5C76 1 82 9 90 4%22 fill=%22none%22 stroke=%22%2334373C%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none;
  animation:chDraw 1.7s cubic-bezier(.4,0,.2,1) infinite}
html .sl-load::after,html .sg-empty.lu-wait::after,html .ta-cap.lu-wait::after{margin-left:0}
html #lzVeil{border-radius:3px!important;background:#FFFEF8!important;color:var(--l-ink)!important;border:1px solid rgba(84,122,168,.75)!important;padding:12px 22px 10px!important;text-align:center;
  box-shadow:0 1px 1px rgba(40,44,52,.22),2px 6px 14px rgba(40,44,52,.18)!important}
/* 책을 펴는 동안 — 상자 없이 종이 위에 글과 물결만. 그 밖의 .bk-ph(빈 자리·못 불러옴)는 연필 점선 칸 */
html #bookOv .bk-ph{background:rgba(255,255,255,.5);border:1.4px dashed rgba(52,55,60,.45);border-radius:3px}
html #bookOv .bk-ph.lu-wait{background:none;border:0;padding:72px 16px}
html #nestOv .ns-load.lu-wait{padding:44px 0}
/* 정원 — 껍데기(garden-host.js)는 게임 문서와 판이 묶여 있어 손대지 않는다. 다시 시도 단추가 없는 상태(= 불러오는 중)에만 물결 */
@supports selector(:has(a)){ html #gardenOv .gh-state:not(:has(button))::after{content:"";display:block;width:92px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 92 10%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%22-8%25%22 y=%22-8%25%22 width=%22116%25%22 height=%22116%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.15%22 numOctaves=%222%22 seed=%229%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.6 0 0 0 2.1%22 result=%22a%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M2 6C10 1 16 9 24 5C32 1 38 9 46 5C54 1 60 9 68 5C76 1 82 9 90 4%22 fill=%22none%22 stroke=%22%2334373C%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none;animation:chDraw 1.7s cubic-bezier(.4,0,.2,1) infinite} }
html #gardenOv .gh-state{background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 11px,7px 0,0 11px,7px 0}
/* 뼈대 — 푸른 칸이 연필로 칠해진다 */
html .lu-skel{position:relative;overflow:hidden;border-radius:2px;background:none;animation:none;border:1px solid rgba(84,122,168,.45)}
html .lu-skel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(118deg,rgba(52,55,60,.2) 0,rgba(52,55,60,.2) 1.1px,transparent 1.1px,transparent 3.4px);animation:chDraw 1.7s cubic-bezier(.4,0,.2,1) infinite}
html .lu-skel:nth-child(2)::before{animation-delay:.12s} html .lu-skel:nth-child(3)::before{animation-delay:.24s} html .lu-skel:nth-child(4)::before{animation-delay:.36s} html .lu-skel:nth-child(n+5)::before{animation-delay:.48s}
html .lu-skel.card{border:1.4px dashed rgba(52,55,60,.4);border-radius:2px}
/* 서가의 뼈대는 서가처럼 두 줄로 선 종이 — 책이 오면 자리가 덜 튄다 */
html #bookOv .lu-skelwrap{display:grid;grid-template-columns:1fr 1fr;gap:30px 18px;padding:26px 2px 0}
html #bookOv .lu-skelwrap .lu-skel.card{height:auto;aspect-ratio:210/297;margin-top:0;background:rgba(255,255,255,.45)}
/* 튜터가 생각하는 동안 — 점 셋 대신 만년필 물결 */
html .msg.thinking::after,html .msg.bot.thinking::after{content:"";display:block;width:64px;height:9px;margin-top:8px;text-align:left;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 92 10%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%22-8%25%22 y=%22-8%25%22 width=%22116%25%22 height=%22116%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.15%22 numOctaves=%222%22 seed=%229%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.6 0 0 0 2.1%22 result=%22a%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M2 6C10 1 16 9 24 5C32 1 38 9 46 5C54 1 60 9 68 5C76 1 82 9 90 4%22 fill=%22none%22 stroke=%22%2322355C%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:chDraw 1.7s cubic-bezier(.4,0,.2,1) infinite}
html .msg.bot.thinking{text-align:left}
/* 책 쪽 — 그림이 오기 전(멈춘 그림 · 필터·움직임 없음) */
html #bookOv .bk-fbpg{background:#FFFEF8 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 92 10%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%22-8%25%22 y=%22-8%25%22 width=%22116%25%22 height=%22116%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.15%22 numOctaves=%222%22 seed=%229%22 result=%22g%22/%3E%3CfeColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.6 0 0 0 2.1%22 result=%22a%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22a%22 operator=%22in%22/%3E%3C/filter%3E%3Cpath d=%22M2 6C10 1 16 9 24 5C32 1 38 9 46 5C54 1 60 9 68 5C76 1 82 9 90 4%22 fill=%22none%22 stroke=%22%239AA0A8%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E") center/92px 10px no-repeat}
@media (prefers-reduced-motion:reduce){ html .lu-wait::after,html #lzVeil::after,html .sl-load::after,html .lu-skel::before,html .msg.thinking::after,html .msg.bot.thinking::after{animation:none} }
/* ══ 아이패드 — 기둥 밖도 같은 종이(1111 원장 "내 아이패드에서 화면비율에 안 맞는데") ═══════════════════════
   한 문제씩(680)·튜터(640)는 폰 폭 기둥이라, 1024 화면에서 기둥만 모눈이고 양옆이 민판이었다 — 튜터는 위는 흰 판(#ai) 아래는 크림으로
   두 겹이었다. 기둥 너비·자리는 그대로 두고(그림 자르기·좌표가 그 폭을 잰다), 종이만 화면 전부로 편다: 바깥 판에 같은 모눈,
   기둥 안의 모눈은 걷는다(두 장이 겹치면 스크롤할 때 줄이 어긋난다). */
@media(min-width:700px){
  @supports selector(:has(a)){
    html #bookOv:has(.bk-dock){background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 11px,7px 0,0 11px,7px 0}
    html #bookOv:has(.bk-dock) .bk-body{background-image:none;background-color:transparent}
  }
  html body.app-in{background-color:var(--l-paper);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-position:0 0,0 11px,7px 0,0 11px,7px 0}
  html body.app-in #ai{background:transparent}
  /* 튜터 기둥은 투명하게 못 연다 — 밑에 #ai 의 옛 소개 글이 깔려 있다(1111 실측). 기둥 안 모눈은 그대로 두고, 바깥 모눈과 줄이 어긋나는 자리는 헤어라인 한 줄로 가른다(책상 위 공책 한 장) */
  html body.app-in #chatBox{box-shadow:-1px 0 0 var(--l-rule-2),1px 0 0 var(--l-rule-2)}
}

/* ══ 아이패드 가로 — 펼친 공책(1111 원장 "가로로 하면 두 페이지 보는 거같이 한다면서" · 시안 5차 'IPAD · 가로') ══════════
   왼쪽 쪽 = 머리(날짜·출석)·이어서·오늘 할 것 · 오른쪽 쪽 = 오늘의 시간·이어진 날·도구·기록 · 가운데 스프링 · 메뉴는 오른쪽 가장자리 견출지.
   DOM 은 손대지 않는다 — 시트를 두 단(multicol)으로 흘리고 오늘(#ahHero)에서 단을 끊는다. 홈에만(견출지도 #appHomeOv 가 있을 때만). */
@media (orientation:landscape) and (min-width:1000px) and (min-height:600px){
  html .ah-ov .ah-scroll{padding:0 104px 28px 44px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2234%22 viewBox=%220 0 56 34%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F4F5F7%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23B9BEC5%22/%3E%3Cstop offset=%221%22 stop-color=%22%236F757D%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx=%229%22 cy=%2217%22 r=%222.6%22 fill=%22%2355595F%22 opacity=%22.55%22/%3E%3Ccircle cx=%2247%22 cy=%2217%22 r=%222.6%22 fill=%22%2355595F%22 opacity=%22.55%22/%3E%3Crect x=%226.5%22 y=%2212.5%22 width=%2243%22 height=%228%22 rx=%224%22 fill=%22url%28%23g%29%22 stroke=%22%237B8088%22 stroke-width=%22.7%22/%3E%3C/svg%3E"),linear-gradient(90deg,transparent calc(50% - 46px),rgba(40,44,52,.07) calc(50% - 30px),transparent calc(50% - 14px)),linear-gradient(90deg,transparent 22px,rgba(212,55,43,.36) 22px,rgba(212,55,43,.36) 23px,transparent 23px),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);
    background-size:56px 34px,100% 100%,100% 100%,220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;background-repeat:repeat-y,no-repeat,no-repeat,repeat,repeat,repeat,repeat,repeat;
    background-position:calc(50% - 30px) 8px,0 0,0 0,0 0,0 11px,7px 0,0 11px,7px 0}
  html .ah-ov .ah-in{display:block;column-count:2;-webkit-column-count:2;column-gap:132px;-webkit-column-gap:132px;column-fill:balance}
  html .ah-ov .ah-sheet{display:contents}
  html .ah-ov .ah-head{-webkit-column-break-inside:avoid;break-inside:avoid}
  html .ah-ov .ah-sec{-webkit-column-break-inside:avoid;break-inside:avoid;padding-left:8px;padding-right:8px}
  html .ah-ov #ahHero{-webkit-column-break-before:always;break-before:column;margin-top:26px}
  html .ah-ov .ah-bar,html .ah-ov.ah-scrolled .ah-bar{padding-left:52px;padding-right:110px}
  html .ah-ov.ah-scrolled .ah-bar{box-shadow:0 1.5px 0 var(--l-rule-2)}
  /* 오른쪽 가장자리 견출지 — 홈에서만(다른 화면은 아래 띠 그대로) */
  html body:has(#appHomeOv) #appNav{left:auto!important;right:0!important;top:50%!important;bottom:auto!important;transform:translateY(-50%);
    width:60px;max-width:none;height:auto!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;align-items:flex-end;gap:6px;
    background:transparent!important;border:0!important;box-shadow:none!important}
  html body:has(#appHomeOv) #appNav .an-item{writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;width:46px;min-width:46px;height:auto!important;min-height:92px;
    padding:14px 0!important;letter-spacing:.14em;border-radius:0 10px 10px 0;box-shadow:1px 0 2px rgba(40,44,52,.16),inset -1px 0 0 rgba(255,255,255,.5)}
  html body:has(#appHomeOv) #appNav .an-item.on{width:56px;min-width:56px;height:auto!important;box-shadow:2px 0 5px rgba(40,44,52,.2)}
  html body:has(#appHomeOv) #appNav .an-item.on::before{left:auto;right:10px;top:16px;bottom:16px;width:6px;height:auto;transform:rotate(180deg)}
  /* 한 문제씩 — 왼쪽 쪽은 문제와 답 띠, 오른쪽 쪽은 풀이 노트(시안 5차 "문제 풀이 화면에서는 왼쪽 쪽이 문제, 오른쪽 쪽이 풀이 공간").
     세로·폰에서는 노트가 답 띠 밑에 깔려 스크롤해야 보였다. 본문(#bkBody)을 두 단 격자로 — 스크롤 통·DOM 은 그대로,
     자르기는 비율 좌표라 폭이 줄어도 같은 네모, 노트 종이는 0.6 비율·폭 기준 좌표라 그대로 줄어든다. */
  @supports selector(:has(a)){
    /* 1112 내 공책 꾸미기 — 문제 35 : 풀이 65 · 단 사이 36px(옛 1:1 · 112px). 문제 폭은 아이가 28~48% 로 고른다(--ln-split-fraction · 꾸미기가 #bookOv 에 적는다 ·
       없으면 .35). 스프링·그늘은 단 사이 한가운데 = 32px + (폭 − 64px)×비율 + 18px. 풀이 종이는 0.6 비율·폭 기준 좌표라 넓어지기만 한다(1000×600 계약 그대로). */
    html #bookOv:has(.bk-qnote){background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2234%22 viewBox=%220 0 56 34%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F4F5F7%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23B9BEC5%22/%3E%3Cstop offset=%221%22 stop-color=%22%236F757D%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx=%229%22 cy=%2217%22 r=%222.6%22 fill=%22%2355595F%22 opacity=%22.55%22/%3E%3Ccircle cx=%2247%22 cy=%2217%22 r=%222.6%22 fill=%22%2355595F%22 opacity=%22.55%22/%3E%3Crect x=%226.5%22 y=%2212.5%22 width=%2243%22 height=%228%22 rx=%224%22 fill=%22url%28%23g%29%22 stroke=%22%237B8088%22 stroke-width=%22.7%22/%3E%3C/svg%3E"),linear-gradient(90deg,transparent calc((50px + (100% - 64px) * var(--ln-split-fraction,.35)) - 46px),rgba(40,44,52,.07) calc((50px + (100% - 64px) * var(--ln-split-fraction,.35)) - 30px),transparent calc((50px + (100% - 64px) * var(--ln-split-fraction,.35)) - 14px)),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .5 -.17%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),linear-gradient(rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.30) 1px,transparent 1px),linear-gradient(rgba(84,122,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(84,122,168,.15) 1px,transparent 1px);background-size:56px 34px,100% 100%,220px 220px,60px 60px,60px 60px,12px 12px,12px 12px;
      background-repeat:repeat-y,no-repeat,repeat,repeat,repeat,repeat,repeat;background-position:calc(22px + (100vw - 64px) * var(--ln-split-fraction,.35)) 84px,0 0,0 0,0 11px,7px 0,0 11px,7px 0}
    html #bookOv:has(.bk-qnote) #bkBody{display:grid;grid-template-columns:minmax(0,calc(var(--ln-split-fraction,.35) * 100%)) minmax(0,1fr);column-gap:36px;align-content:start;align-items:start;
      max-width:none;width:100%;margin:0;padding:18px 32px 24px;box-sizing:border-box}
    html #bookOv:has(.bk-qnote) #bkBody>*{grid-column:1;min-width:0;margin-left:0;margin-right:0}
    html #bookOv:has(.bk-qnote) #bkBody>.bk-qnote{grid-column:2;grid-row:1 / span 8;margin-top:0}
    html #bookOv:has(.bk-qnote) #bkBody>#sgAsk{grid-column:2}
    html #bookOv:has(.bk-qnote) .bk-dock{max-width:none;width:calc((100% - 64px) * var(--ln-split-fraction,.35));margin:0 0 0 32px;align-self:flex-start}
    /* 1112 — 답 띠를 왼쪽 쪽 바닥에 얹는다(흐름 밖). 35:65 로 넓어진 풀이 종이는 0.6 비율이라 키도 커져, 띠가 화면 아래 한 줄을 통째로 먹으면
       종이 밑과 도구가 잘렸다(1024×768 실측 · 종이 353px 중 아래가 띠 밑). 오른쪽 쪽은 화면 바닥까지 쓰고, 왼쪽 쪽 끝에는 띠만큼 빈 칸(::after)을
       두어 긴 문제도 띠 위로 올려 볼 수 있다. 띠의 DOM·자리(#bookOv 의 자식)·안의 단추는 그대로다. */
    html #bookOv:has(.bk-qnote) .bk-dock{position:absolute;left:0;bottom:0;z-index:2}
    html #bookOv:has(.bk-qnote) #bkBody::after{content:"";grid-column:1;display:block;height:320px}
    /* 쪽 폭이 줄어 이전·다음이 셋째 줄로 밀렸다(띠 248px) — 기호 칸을 이동 단추 몫만큼 좁혀 한 줄에 */
    html #bookOv:has(.bk-qnote) .bk-dock .bk-keys{max-width:calc(100% - 150px)}
  }
}

/* ══ 내 공책 꾸미기(1112) — 꾸미기가 붙은 책(#bookOv.ln-live)에서만. 원천: tools/cahier/생성.py ══ */
html #bookOv.ln-live{background-color:var(--ln-desk)!important;background-image:none!important}
html #bookOv.ln-live #bkBody,html #bookOv.ln-live .fb-vp{background-color:var(--ln-desk)!important;background-image:none!important}
html #bookOv.ln-live .bk-qnpaper{background:var(--ln-paper)!important;isolation:isolate}
html #bookOv.ln-live .bk-qnpaper::before,html #bookOv.ln-live .bk-qnpaper::after{background-image:none!important;pointer-events:none}
html #bookOv.ln-live .bk-qnote{display:flex;flex-direction:column;min-width:0}
html #bookOv.ln-live .bk-qnhead{order:0}
html #bookOv.ln-live .bk-qnpaper{order:2}
html #bookOv.ln-live .bk-qntools{order:1;align-self:stretch;flex-wrap:wrap;margin:8px 0;border-color:var(--ln-border)!important;background:var(--ln-toolbar)!important;color:var(--ln-ink)!important}
html #bookOv.ln-live[data-ln-dock=bottom] .bk-qntools{order:3}
html #bookOv.ln-live .bk-fbtool.ln-tools{background:var(--ln-toolbar)!important;color:var(--ln-ink)!important;border-color:var(--ln-border)!important;flex-wrap:wrap;max-width:calc(100vw - 24px)}
html #bookOv.ln-live[data-ln-dock=top] .bk-fbtool{top:calc(env(safe-area-inset-top,0px) + var(--ln-host-toolbar-top,124px));bottom:auto!important}
html #bookOv.ln-live[data-ln-dock=bottom] .bk-fbtool{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
html #bookOv.ln-live .bk-qntools button,html #bookOv.ln-live .bk-fbtool button{color:inherit;min-height:44px}
/* 노트 머리(풀이 노트 · HINT · UNDO · CLEAR)는 책상 위에 놓인다 — 밤의 서재(어두운 책상)에서 옛 갈색 글자가 묻혔다(1112 실측). 글자는 꾸미기 잉크로 */
html #bookOv.ln-live .bk-qnhead,html #bookOv.ln-live .bk-qnhead .bk-qntt,html #bookOv.ln-live .bk-qnhead .bk-qnhint{color:var(--ln-ink)!important}
html #bookOv.ln-live .bk-qnhead button{color:var(--ln-ink)!important;border-color:color-mix(in srgb,var(--ln-ink) 38%,transparent)!important;background:color-mix(in srgb,var(--ln-toolbar) 72%,transparent)!important}
/* 랜딩의 section{padding:clamp(84px,…) 0} 이 패널 안 구획 밑에도 들어 구획 사이가 100px 넘게 비었다(1112 실측) — 아래 여백만 되돌린다 */
html #bookOv .ln-live-panel .ln-section{padding-bottom:0}
/* 고른 도구(.on) — 위 color:inherit 가 밤의 서재에서 밝은 바탕(액센트) 위 밝은 글자가 되어 PEN 이 안 보였다(1112 실측). 고른 것은 액센트 위 툴바색.
   색 견본(.bk-sw·.bk-cust)은 제 바탕이 곧 색이라 건드리지 않는다 */
html #bookOv.ln-live .ln-tools button.on:not(.bk-sw):not(.bk-cust){background:var(--ln-accent)!important;color:var(--ln-toolbar)!important;border-color:transparent!important}
html #bookOv .ln-decoration .ln-sticker,html #bookOv .ln-decoration .ln-handle{touch-action:none}
/* 손끝 하한 44 — 패키지 studio.css 의 .ln-tools button(42 · 폰 38)이 옛 44 를 깎았다(지면QA 실측 38×44). 색 견본은 옛 크기 그대로(폭을 넓히면 동그라미가 타원이 된다) */
html #bookOv.ln-live .ln-tools button{min-width:44px;min-height:44px}
html #bookOv.ln-live .bk-fbtool .bk-sw,html #bookOv.ln-live .bk-fbtool .bk-cust{min-width:0}
/* 머리띠의 단추 — 붙으면 '내 공책 꾸미기', 표가 없으면 '꾸미기 준비 중', 못 읽었으면 '꾸미기 다시 불러오기'(notebook-host.js) */
html #bookOv .bk-nbhost{display:inline-flex;flex:none;margin-left:auto}
html #bookOv .bk-nbhost:empty{display:none}
html #bookOv .bk-nbhost:not(:empty)+.bk-thmbtn{margin-left:8px}
html #bookOv .ln-host-trigger{border:1px solid var(--ln-border,rgba(84,122,168,.6));background:var(--ln-toolbar,#FFFEF8);color:var(--ln-ink,var(--l-ink));border-radius:3px;padding:0 12px;font:inherit;font-size:12px;min-height:44px;white-space:nowrap;cursor:pointer}
html #bookOv .ln-host-trigger:disabled{opacity:.55;cursor:default}
@media(max-width:560px){
  html #bookOv .ln-host-trigger{padding:0 9px;font-size:0}
  html #bookOv .ln-host-trigger::after{content:"꾸미기";font-size:12px}
  html #bookOv .ln-host-stub[disabled]::after{content:"준비 중"}
  html #bookOv .ln-host-stub:not([disabled])::after{content:"다시"}
}
/* 꾸미기 패널 — 머리띠·답 띠·안전 영역을 비켜 화면 오른쪽(넓은 화면) · 아래 절반(≤850) */
html #bookOv.ln-live>.ln-live-panel{position:fixed;right:12px;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:320px;max-width:calc(100vw - 24px);z-index:11000}
html #bookOv.ln-live[data-ln-editing=true] .bk-qntools,html #bookOv.ln-live[data-ln-editing=true] .bk-fbtool{visibility:hidden}
html #bookOv.ln-live[data-ln-editing=true] .bk-qncv,html #bookOv.ln-live[data-ln-editing=true] .bk-fbpg canvas{pointer-events:none!important}
@media(max-width:850px){
  html #bookOv.ln-live>.ln-live-panel{top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));right:8px;width:calc(100vw - 16px);max-width:none;height:48dvh;min-height:300px}
  html #bookOv.ln-live[data-ln-editing=true] #bkBody{padding-bottom:50dvh}
}
@media (orientation:landscape) and (min-width:1000px) and (min-height:600px){
  @supports selector(:has(a)){
    /* 꾸미기가 붙으면 바깥은 책상 한 장(시안과 같게) — 스프링·모눈은 꾸미기 없는 판(위 펼친 공책)에만 남는다 */
    /* 꾸미는 동안 풀이 쪽을 패널(320+24px) 왼쪽으로 — 종이 위 스티커가 패널에 안 가린다(종이는 폭 기준 좌표라 줄기만 한다) */
    html #bookOv.ln-live[data-ln-editing=true]:has(.bk-qnote) #bkBody{padding-right:368px}
  }
}