/* 암산짱 교과 연산 — 문제지 모양. print.html(프린트)과 index.html 교과 연산 화면(js/textbook.js)이 함께 씀. 모든 규칙은 .ws 아래에만 적용(앱 스타일과 충돌 방지). 158차 */
:root{--ws-ink:#1f2937;--ws-line:#9aa3b2;--ws-accent:#3b6fc0;--ws-accent-soft:#e8f0fd;--ws-ans:#d6336c;--ws-bg:#eceff4;--ws-muted:#6b7280;--ws-border:#d9dde4;--ws-band:#4a78b8;--ws-cell:#f8fafc;--ws-cellb:#dfe4ec}
.ws,.ws *{box-sizing:border-box}
.ws{background:var(--ws-bg);color:var(--ws-ink);font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.ws{margin:0}
/* 한 쪽 = A4 한 장 */
.ws .page{position:relative;width:210mm;height:297mm;background:#fff;padding:12mm 10mm 12mm 20mm;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 24px rgba(30,40,60,.12);display:flex;flex-direction:column;overflow:hidden}
.ws header{background:#fff;color:var(--ws-ink);border:2px solid var(--ws-band);border-radius:8px;padding:6px 12px 6px 9px;margin-bottom:4mm;flex:none;display:flex;align-items:center;gap:10px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ws .ht{flex:1;min-width:0}
.ws .t1{display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap}
.ws .gr,.ws .t2,.ws .lb,.ws .tag,.ws .set{font-family:inherit}
.ws .hl{display:flex;align-items:center;gap:9px}
.ws .lg{height:8.4mm;overflow:hidden;flex:none;display:block;border-radius:6px;padding:0 2px} /* 로고의 윗부분(그림)만 */
.ws .logo{height:13mm;width:auto;display:block;margin-top:0} /* 987 중 위 635 ≈ 8.4mm */
.ws .gr{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ws-band)}
.ws .rt{display:flex;align-items:center;gap:10px}
.ws .set{font-size:12.5px;color:var(--ws-muted)}
.ws .t2{display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap;margin-top:1px;font-size:14.5px;font-weight:600;color:var(--ws-ink)}
.ws .tag{font-size:12.5px;font-weight:700;color:#fff;background:var(--ws-band);padding:1px 9px;border-radius:10px}
.ws .tag.w{background:#fff;color:var(--ws-band);border:1.5px solid var(--ws-band);padding:0 8px}
.ws .body{flex:1;min-height:0;display:flex;flex-direction:column;gap:4mm}
.ws .blk{display:flex;flex-direction:column;min-height:0}
.ws .blk.top{flex:3}.ws .blk.bot{flex:5}.ws .blk.one{flex:1}.ws .blk.eq{flex:1}.ws .blk.one.cb{flex:1}.ws .blk.one.hb{flex:1.7}
.ws .lb{flex:none;font-size:16px;font-weight:700;color:var(--ws-ink);margin-bottom:1.2mm;display:flex;align-items:center;gap:7px;letter-spacing:-.01em}
.ws .lb:before{content:"";display:inline-block;width:4px;height:.95em;border-radius:2px;background:var(--ws-accent);flex:none}
.ws .grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:2.5mm 5mm}
.ws .grid.w{grid-template-columns:repeat(2,1fr)}
.ws .c{background:var(--ws-cell);border:1.5px solid var(--ws-cellb);border-radius:10px;padding:11px 10px 7px;-webkit-print-color-adjust:exact;print-color-adjust:exact;margin:0;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:first baseline;gap:5px;font-size:21px;line-height:1.45}
.ws .c.h{align-items:first baseline;align-content:flex-start}
.ws .no{display:inline-flex;align-items:center;flex:none;color:var(--ws-accent);font-weight:700;font-size:17px;line-height:1.3;margin-right:4px;white-space:nowrap}
.ws .no:before{content:"("}.ws .no:after{content:")"}
.ws .c.h > .no,.ws .hd > .no{margin-top:0}
.ws .c:not(.cv) > .no,.ws .hd > .no{position:relative;top:0}
.ws .c{position:relative}
.ws .c.fx .no.tl{position:absolute;left:10px;top:9px;margin:0}
.ws .c.h:has(.fr) > .no,.ws .c.h:has(.mx) > .no,.ws .c.h:has(.slot.big) > .no{align-self:center;margin-top:0}
.ws .c.h.wrapped > .no{align-self:auto !important;margin-top:0 !important}
.ws .c .txt{flex:1 1 100%;font-size:18px;line-height:1.5}
.ws .c .sa{flex:1 1 100%}
.ws .hd{display:flex;align-items:first baseline;gap:8px;width:100%;flex:none}
.ws .hd .txt{flex:1 1 0;min-width:0;padding-top:2px}
.ws .hd .fig{margin:0 auto;padding-right:0;min-width:0;max-width:calc(100% - 40px)}
.ws .hd .fig svg{max-width:100%}
.ws .figrow{flex:1;display:flex;justify-content:center;align-items:center;min-height:0}
.ws .figrow .fig{margin:0}
.ws .grid.w .figrow .fig svg{height:112px}
.ws .c.fv,.ws .c.ws{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.ws .c.ws{padding-bottom:8px}
.ws .c.fv > .txt,.ws .c.ws > .txt{flex:none;margin-top:6px}
.ws .c.fv .hd .txt{padding-top:2px}
.ws .c.fv .figrow{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;padding:4px 0}
.ws .c.fv .hd .slot{min-width:2.6em} /* 그림 칸에서는 "전체의 ___" 가 한 줄에 */
.ws .c.fv .figrow .fig{margin:0;max-width:100%}
.ws .c.fv .figrow .fig svg{max-width:100%;height:auto;max-height:86px}
.ws .c.fx .figrow .fig svg{height:110px;max-height:110px}
.ws .grid.w .c.fx .figrow .fig svg{height:92px;max-height:92px}
.ws .grid.sp{gap:4mm 6mm}
.ws .grid.sp .c{font-size:21px}
.ws .grid.sp .c.fv .figrow{padding:6px 0}
.ws .grid.sp .c.fv .figrow .fig svg{max-height:120px;height:120px}
.ws .c.fv .fig svg{height:86px;max-width:100%}
.ws .c.fx .fig svg{height:110px}
.ws .c.fx{justify-content:center}
.ws .c.ws .sa{flex:none;margin-top:4px}
.ws .grid .c.ws .sa.da{margin-top:auto}
.ws .grid .c.ws .sa.da + .sa.da{margin-top:6px}
.ws .grid.w .c.fv .fig svg{height:68px}
.ws .grid.w .c.fx .fig svg{height:92px}
.ws .sa.da{flex-wrap:nowrap;white-space:nowrap}
.ws .sa.da .slot,.ws .sa.da .slot.sm{border:none;border-bottom:1.5px solid var(--ws-line);border-radius:0;flex:1 1 3em;min-width:3em;max-width:9em;min-height:1.25em;align-items:flex-end} /* 답 줄은 모두 밑줄, 단위와 한 줄 */
.ws .sa.da:has(.slot ~ .slot) .slot{min-width:2.6em;max-width:5em} /* 답이 두 칸(시·분 등) */
.ws .opts{margin-left:6px;white-space:nowrap;font-size:.95em}
.ws .opt{position:relative;display:inline-block;padding:1px 9px;margin:0 3px}
.ws .ring{position:absolute;left:-1px;right:-1px;top:-3px;bottom:-3px;border:2.5px solid var(--ws-ans);border-radius:50%}
.ws .grid.w .c .txt{font-size:17.5px;line-height:1.42}
.ws .grid.w .c .sa{margin-top:12px;min-height:2.1em;font-size:18px}
.ws .sa{margin-top:6px;font-size:19px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ws .c:has(> .hd > .txt) > .sa{margin-left:36px}
.ws .fr{display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:middle;margin:0 2px;font-size:.92em}
.ws .fr i{display:flex;align-items:center;justify-content:center;font-style:normal;padding:0 4px;height:1.55em;line-height:1.55em;text-align:center}
.ws .fr i .slot{min-width:1.4em;min-height:0;height:1.15em;margin:0;border-radius:3px}
.ws .fr i:first-child{border-bottom:1.5px solid currentColor}
.ws .mx{display:inline-flex;align-items:center;vertical-align:middle}
.ws .mx b{font-weight:inherit;margin-right:2px}
.ws .slot{display:inline-flex;align-items:center;justify-content:center;min-width:6em;min-height:1.8em;border:none;margin:0 2px;padding:0 4px}
.ws .slot.nb{min-width:4.6em}
.ws .slot.sm{min-width:1.9em;border:1.5px solid var(--ws-line);border-radius:4px}
.ws .slot.eq{border:none;justify-content:flex-start;padding-left:.5em}
.ws .slot.sm.big{min-width:3.3em;min-height:2.4em;border-width:2px;border-radius:6px}
.ws .a{visibility:hidden;color:var(--ws-ans);font-weight:700}
.ws.show .a, body.show .ws .a{visibility:visible}
/* 1학년 : 아이들이 숫자를 크게 쓰므로 글자와 칸을 키움 */
.ws .page.g1 .c{font-size:25px;line-height:1.5}
.ws .page.g1 .c .txt,.ws .page.g1 .grid.w .c .txt{font-size:20px}
.ws .page.g1 .slot.sm{min-width:2.2em;min-height:2.1em}
.ws .page.g1 .vt{font-size:25px}
.ws .page.g1 .sa{font-size:21px}
.ws .page.g1 .no{font-size:19px}
.ws .page.g1 .c.fx .figrow .fig svg{height:150px;max-height:150px}
.ws .page.g1 .grid.w .c.fx .figrow .fig svg{height:118px;max-height:118px}
.ws .page.g1 .c:has(.clk){font-size:21px;line-height:1.45}
.ws .c:has(.clk) .slot.sm{min-width:1.9em !important;min-height:1.8em} /* 시계 칸은 공간이 빠듯해 기본 크기 */
.ws .c:has(.clk){padding-top:5px}
.ws .c:has(.clk) .sa{margin-top:3px}
.ws .page.g1 .c:has(.clk) .sa{font-size:19px}
/* 세로셈 : 가로셈과 같은 글꼴·크기, 숫자는 같은 칸 너비로 맞춤 */
.ws .dg{display:inline-block;width:.62em;text-align:center;font-style:normal}
.ws .dg.pt{width:.3em}
.ws .vt{font-size:21px;line-height:1.5;display:inline-block;margin:6px 0 0 14px;font-weight:400}
.ws .vt .row{white-space:nowrap;padding:0 .55em 0 .2em;display:block;margin:0;gap:0} /* 앱의 .row(flex) 와 이름이 겹쳐 되돌림 */
.ws .vt .rule{border-bottom:2px solid var(--ws-ink)}
.ws .vt .ar{margin-top:2px}
.ws .ld{display:inline-flex;align-items:center;margin:2em 0 0 26px;font-size:21px;font-weight:400}
.ws .ld .dd{margin-right:3px;line-height:1}
.ws .ld .br{display:flex;flex-direction:column;position:relative}
.ws .ld .qq{position:absolute;right:8px;bottom:100%;margin-bottom:3px;white-space:nowrap;line-height:1.2}
.ws .ld .nn{display:flex;align-items:center;height:1.38em;border-top:1.5px solid var(--ws-ink);white-space:nowrap}
.ws .ld .bk{width:9px;height:100%;flex:none;display:block;margin-top:-1px}
.ws .ld .dv{display:flex;align-items:center;line-height:1;padding:0 7px 0 2px}
.ws .uv{display:inline-grid;margin:8px 0 0 10px;font-size:21px;font-weight:400;line-height:1.55;align-items:baseline;column-gap:0;padding-right:.5em}
.ws .uv .rl{border-bottom:2px solid var(--ws-ink);height:3px;margin:2px 0 4px}
.ws .uo{text-align:center}
.ws .un{text-align:right;padding-left:.35em}
.ws .uu{font-size:.78em;font-weight:400;margin:0 .5em 0 .15em;white-space:nowrap}
.ws .mn{display:inline-block;position:relative;top:-.09em}
.ws .qw{flex:1 1 0;min-width:0;line-height:1.55;font-weight:700;letter-spacing:.01em}
.ws .vt,.ws .ld,.ws .uv{font-weight:700}
.ws .c .sa{font-weight:600}
.ws .c .txt{font-weight:400}
.ws .txt,.ws .qw,.ws .sa{word-break:keep-all;overflow-wrap:anywhere} /* 한글은 어절 단위로 줄바꿈 */
.ws .nw{white-space:nowrap}
.ws .rhs{display:inline-block;white-space:nowrap}
.ws .rm{flex:1 1 100%;font-size:19px;margin-top:70px;display:flex;align-items:center;gap:4px;font-family:inherit;font-weight:400}
.ws .fig{flex:none;margin-right:6px;display:inline-block}
.ws .fig svg{height:84px;width:auto;max-width:180px}
.ws .c.cv{position:relative;display:flex;justify-content:center;align-items:flex-start;align-content:flex-start}
.ws .c.cv .no{position:absolute;left:10px;top:9px}
.ws .c.cv .vt,.ws .c.cv .uv{margin:10px 0 0 0}
.ws .c.cv .ld{margin:2.1em 0 0 0}
.ws .clk{flex:1 1 100%;display:flex;justify-content:center}
.ws .lb.star{color:#b02a5b}
.ws .lb.star:before{background:#e8590c}
.ws .note{max-width:210mm;margin:0 auto;font-size:12.5px;color:#555;padding:14px 18px;line-height:1.7;background:#fff;border:1px solid var(--ws-border);border-radius:10px}
.ws .note b{color:var(--ws-ink)}
.ws .note + .note{margin-top:0}
.ws .foot{padding:0 16px 32px;display:flex;justify-content:center}
@page{size:A4;margin:10mm 10mm 10mm 20mm} /* 왼쪽은 타공·제본 여백 */
@media print{
.ws body{background:#fff}
.ws .bar,.ws .foot{display:none}
.ws .page{border-radius:0}
.ws #sheets{padding:0;gap:0;display:block}
.ws .page{box-shadow:none;width:auto;height:276mm;padding:0;break-after:page;page-break-after:always}
.ws .page:last-child{break-after:auto;page-break-after:auto}
}
/* 세로 풀이(등호가 아래로) — 2-1 여러 가지 방법으로 계산하기 */
.ws .steps{flex:1 1 100%;display:flex;flex-direction:column;gap:3px;margin-top:1px;font-weight:700;font-size:.95em;line-height:1.5}
.ws .steps > div{white-space:nowrap}
.ws .steps .eq{display:inline-block;width:1.1em;font-style:normal}
.ws .steps .eq.hid{visibility:hidden}
.ws .steps .slot.sm{min-height:1.5em}
/* 영역별 색 — 단원 고르기 버튼·체크에만. 평소엔 아주 연한 테두리, 고르면 안쪽까지 그 색(글자 흰색). 덧셈·뺄셈 하늘 · 곱셈 주황 · 나눗셈 초록 · 분수 보라 · 소수 분홍 · 측정·도형 청록 · 그 밖 회색 */
.uopt{border:2px solid !important;background:#fff !important;color:#1f2937 !important}
.uopt.sel{color:#fff !important;font-weight:800 !important}
.ct-as.uopt{border-color:#c5e3fb !important}.ct-as.uopt.sel{background:#4dabf7 !important;border-color:#4dabf7 !important}
.ct-mul.uopt{border-color:#ffe3c4 !important}.ct-mul.uopt.sel{background:#ff922b !important;border-color:#ff922b !important}
.ct-div.uopt{border-color:#c8f3cf !important}.ct-div.uopt.sel{background:#51cf66 !important;border-color:#51cf66 !important}
.ct-frac.uopt{border-color:#dfd3ff !important}.ct-frac.uopt.sel{background:#9775fa !important;border-color:#9775fa !important}
.ct-dec.uopt{border-color:#fdd6e3 !important}.ct-dec.uopt.sel{background:#f783ac !important;border-color:#f783ac !important}
.ct-ms.uopt{border-color:#bdf0f6 !important}.ct-ms.uopt.sel{background:#3bc9db !important;border-color:#3bc9db !important}
.ct-etc.uopt{border-color:#e4e7eb !important}.ct-etc.uopt.sel{background:#868e96 !important;border-color:#868e96 !important}
.ws .lb.star:before{background:#e8590c}