/* 158차: 교과 연산 화면(index.html #s-textbook). 문제 칸 모양은 css/ws.css(.ws 아래)를 쓰고, 여기는 화면 배치·입력 칸·숫자판 자리만 */
#s-textbook .tbk-body { max-width: none; width: 100%; padding: 14px 18px 24px; }   /* 화면 가득(앱 기본 784px 묶음 해제) */
@media (min-width: 1100px) { .ws.tbk-body .grid { grid-template-columns: 1fr 1fr 1fr; } }
.ws.tbk-body .slot, .ws.tbk-body .slot .fld { vertical-align: middle; }   /* 답 칸이 글자보다 떠 보이지 않게 */
body.tbk-pad-open #s-textbook .tbk-body { padding-bottom: calc(var(--tbk-padh, 300px) + 24px); }   /* 164차: 실제 숫자판 높이만큼 */
.tbk-head { font-size: 16px; color: #1f2937; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tbk-head .tbk-code { font-size: 12px; color: #6b7280; margin-left: auto; }
/* 174차(사용자): ✏️ 답만 넣기 — 문제(숫자·글·그림)는 접고 번호와 답 칸만 촘촘하게(종이에 풀고 답만 옮겨 넣는 아이) */
.tbk-head .tbk-ao { margin-left: auto; width: auto; height: 36px; padding: 0 12px; font-size: 14px; font-weight: 800; border-radius: 10px; }
/* 답 칸이 그림 안에 있는 문제(모으기·가르기·수직선 …)는 .keep — 접지 않고 그대로(textbook.js markAoKeep) */
#tbk-sheet.ansonly .grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 6px 8px; }
#tbk-sheet.ansonly .c:not(.keep) { min-height: 52px; padding: 8px 10px; font-size: 22px; align-items: center; gap: 4px 8px; }
#tbk-sheet.ansonly .c:not(.keep) .txt, #tbk-sheet.ansonly .c:not(.keep) .figrow, #tbk-sheet.ansonly .c:not(.keep) .fig, #tbk-sheet.ansonly .c:not(.keep) .sa:not(.da), #tbk-sheet.ansonly .c:not(.keep) .vt .row:not(.ar), #tbk-sheet.ansonly .c:not(.keep) .ft .opts { display: none !important; }
#tbk-sheet.ansonly .c:not(.keep) .vt { margin: 0; }
#tbk-sheet.ansonly .c:not(.keep) .vt .rule { border: 0; }
#tbk-sheet.ansonly .c:not(.keep) .vt .ar { min-height: 0; }
#tbk-sheet.ansonly .c:not(.keep) .vt .ar .fld { width: auto; min-width: 3.4em; max-width: none; justify-content: center; padding: 0 .4em; }   /* 세로셈 답 칸은 줄이 접히면 폭이 0 이 되므로 따로 */
#tbk-sheet.ansonly .c:not(.keep) .qw { font-size: 0; line-height: 0; letter-spacing: 0; word-spacing: 0; }
#tbk-sheet.ansonly .c:not(.keep) .qw .fld, #tbk-sheet.ansonly .c:not(.keep) .qw .frac, #tbk-sheet.ansonly .c:not(.keep) .qw .slot { font-size: 22px; line-height: 1.4; }
#tbk-sheet.ansonly .c:not(.keep) .no { font-size: 20px; }
#tbk-sheet.ansonly .c.paper { display: none; }   /* 그리는 문제(종이)는 답 칸이 없음 */
.tbk-box { background: #fff; border: 1.5px solid #d9dde4; border-radius: 14px; padding: 16px; }
.tbk-box h2 { font-size: 18px; margin: 0 0 8px; }
.tbk-box p { margin: 6px 0; line-height: 1.6; font-size: 15px; color: #374151; }
.tbk-tip { padding: 10px 14px; font-size: 14px; color: #374151; }
.tbk-codein { display: flex; gap: 8px; margin: 12px 0; }
.tbk-codein input { flex: 1; font: inherit; font-size: 22px; letter-spacing: .06em; padding: 10px 12px; border: 2px solid #d9dde4; border-radius: 10px; text-align: center; min-width: 0; -webkit-user-select: text; user-select: text; }
.tbk-codein input:focus { outline: none; border-color: #3b6fc0; }
.tbk-btn { font: inherit; font-size: 16px; font-weight: 700; padding: 11px 18px; border: none; border-radius: 10px; background: #3b6fc0; color: #fff; cursor: pointer; }
.tbk-btn.ghost { background: #fff; color: #1f2937; border: 1.5px solid #d9dde4; font-weight: 600; }
.tbk-btn.big { font-size: 19px; padding: 14px 22px; flex: 1; }
.tbk-err { color: #d6336c; font-weight: 700; margin-top: 6px; min-height: 1.4em; }
.tbk-muted { color: #6b7280; font-size: 13px; }
.tbk-log { list-style: none; margin: 0; padding: 0; }
.tbk-log li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef0f4; font-size: 14px; }
.tbk-log li .d { color: #6b7280; width: 3.2em; } .tbk-log li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbk-log li .s { font-weight: 700; }
.tbk-act { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; flex-wrap: wrap; }
.tbk-act .tbk-score { flex: 1 1 100%; }
.tbk-score { text-align: center; font-size: 20px; font-weight: 800; margin: 6px 0 8px; }
.tbk-score small { display: block; font-size: 14px; color: #6b7280; font-weight: 500; margin-top: 4px; }
.tbk-sum { margin: 8px 0; padding-left: 18px; } .tbk-sum li { margin: 4px 0; font-size: 15px; }
.tbk-dots { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; } .tbk-dots i { width: 12px; height: 12px; border-radius: 50%; background: #dfe4ec; display: block; } .tbk-dots i.ok { background: #2f9e6b; }
.tbk-fb { margin-top: 10px; font-size: 18px; font-weight: 800; min-height: 28px; } .tbk-fb.ok { color: #2f9e6b; } .tbk-fb.bad { color: #d6336c; }

/* 문제 칸 : 프린트 모양 그대로, 한 줄에 1~2칸 (A4 고정 높이 아님) */
.ws.tbk-body .blk { display: block; margin-bottom: 14px; }
.ws.tbk-body .lb { margin: 0 0 8px; font-size: 16px; }
.ws.tbk-body .grid { display: grid; grid-template-columns: 1fr; gap: 10px; grid-auto-rows: auto; }
@media (min-width: 700px) { .ws.tbk-body .grid { grid-template-columns: 1fr 1fr; } }
.ws.tbk-body #tbk-sheet.prac .grid { grid-template-columns: 1fr; }
.ws.tbk-body .c { min-height: 84px; font-size: 22px; }
.ws.tbk-body #tbk-sheet.prac .c { font-size: 24px; min-height: 120px; }
.ws.tbk-body .c .txt { font-size: 18px; }
.ws.tbk-body .c.cv { min-height: 150px; }
.ws.tbk-body .c.paper { opacity: .55; }
.ws.tbk-body .c.paper:after { content: "종이에서만 푸는 문제"; position: absolute; right: 10px; top: 8px; font-size: 12px; color: #6b7280; font-weight: 600; }
.ws.tbk-body .c .no { font-size: 18px; }
.ws.tbk-body .c.ok { border-color: #2f9e6b; background: #f0fbf5; color: #1f2937; }
.ws.tbk-body .c.ok .qw, .ws.tbk-body .c.ok .txt, .ws.tbk-body .c.bad .qw, .ws.tbk-body .c.bad .txt, .ws.tbk-body .c.bad .vt, .ws.tbk-body .c.ok .vt { color: #1f2937; }   /* 앱의 .ok/.bad 글자색을 되돌림 */
.ws.tbk-body .c.bad { border-color: #d6336c; background: #fff4f7; color: #1f2937; }
.ws.tbk-body .c.bad.show .slot { flex-direction: column; align-items: center; }   /* 정답은 입력 칸 아래 */
.ws .slot.rslot { flex-wrap: wrap; justify-content: center; }   /* 180차: 가로셈 나눗셈 몫 ··· 나머지 두 칸 */
.ws .slot.rslot .rdots { margin: 0 .3em; font-weight: 800; color: #1f2937; }
.ws.tbk-body .c.bad.show .slot.rslot { flex-direction: row; }
.ws.tbk-body .c.bad.show .slot.rslot .a { flex-basis: 100%; }
.ws.tbk-body .c .mark { position: absolute; right: 10px; top: 6px; font-size: 22px; font-weight: 800; }
.ws.tbk-body .c.ok .mark { color: #2f9e6b; } .ws.tbk-body .c.bad .mark { color: #d6336c; }
.ws.tbk-body .c .a { display: none; }                    /* 정답은 채점 전엔 절대 안 보임 */
.ws.tbk-body .c.bad.show .a { display: inline; visibility: visible; color: #d6336c; font-weight: 700; margin-left: 6px; font-size: .8em; }

/* 입력 칸 */
.ws .fld { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; min-height: 1.7em; padding: 0 .3em; border: 2px dashed #9aa3b2; border-radius: 8px; background: #fff; color: #1f2937; font-weight: 800; cursor: pointer; vertical-align: middle; line-height: 1.2; margin: 0 2px; }
.ws .fld.on, .ws .fld.filled.on { border: 2.5px solid #f59f00; background: #fff8e6; box-shadow: 0 0 0 3px rgba(245,159,0,.22); }   /* 168차(사용자): 번호(파랑)와 답 칸이 같은 색이라 헷갈림 → 답은 검정, 고른 칸은 주황 */
.ws .fld.filled { border-style: solid; border-color: #6b7fa3; }
.ws .fld.on:empty:before { content: "|"; color: #f59f00; animation: tbk-blink 1s step-end infinite; }
@keyframes tbk-blink { 50% { opacity: 0; } }
.ws .slot .fld { min-width: 2.4em; margin: 0; }
.ws.tbk-body .c.bad.show .slot .a { display: block; margin: 2px 0 0; font-size: .75em; text-align: center; }   /* 정답은 칸 아래 줄에 — 옆으로 늘어나 "=" 가 밀리지 않게 */
.ws.tbk-body .c.bad.show .vt .ar .a { display: block; text-align: right; padding-right: .55em; }
.ws.tbk-body .vt .ar { display: flex; flex-direction: column; align-items: flex-end; }
.ws.tbk-body .vt .ar .fld { width: calc(100% - .3em); max-width: 7.5em; min-width: 4.5em; justify-content: flex-end; padding: 0 .45em; letter-spacing: .08em; }   /* 답 칸은 숫자 전체 폭 — 백의 자리 한 칸으로 보이지 않게 */
.ws.tbk-body .ld .qq .fld { min-width: 3em; }
.ws .vt .ar { min-height: 1.6em; }
.ws .vt .ar .fld, .ws .ld .qq .fld, .ws .uv .un .fld { font-size: .9em; }
.ws .ld .qq .fld { min-width: 2.4em; }
.ws .frac { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.ws .frac .col { display: inline-flex; flex-direction: column; align-items: center; }
.ws .frac .col .fld { min-width: 1.9em; min-height: 1.4em; font-size: .85em; margin: 1px 0; }
.ws .frac .col .bar { width: 100%; height: 2px; background: #1f2937; margin: 1px 0; }
.ws .cmpf { min-width: 1.6em; }
.ws .opt { cursor: pointer; border-radius: 6px; }
.ws .opt.sel { box-shadow: inset 0 0 0 2.5px #d6336c; background: #fff4f7; }
.ws svg .seg { cursor: pointer; }
.ws svg .gin { cursor: pointer; } .ws svg .gin text { fill: #1f2937; font-weight: 800; } .ws svg .gin.on circle { stroke: #f59f00; stroke-width: 3; }

/* 숫자판 : 플래시 .gq-pad 모양을 그대로, 화면 아래 고정 */
.tbk-pad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1.5px solid #d9dde4; box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); }
.tbk-pad[hidden] { display: none; }
.tbk-pad .tbk-pad-in { max-width: 560px; margin: 0 auto; }
.tbk-pad .tbk-cur { display: none; }   /* 166차(사용자): 숫자판 위 '(9)번 답'·[닫기] 글씨 없앰 — ENTER 길게(0.45초) 누르면 닫힘 */
.tbk-pad .gq-pad { width: 100%; height: calc(4 * clamp(44px, 7vmin, 60px) + 3 * 8px); min-height: 180px; }
.tbk-pad .tbk-cmpk { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.tbk-pad.cmp .tbk-cmpk { display: grid; }
.tbk-pad .tbk-cmpk button { font: inherit; font-size: 28px; font-weight: 800; height: 48px; border: none; border-radius: 10px; background: #fff4f7; color: #d6336c; }
.tbk-pad.cmp .gq-keys button { opacity: .35; pointer-events: none; }

/* 159차-3: 스스로 풀기 고르기(학년 → 학기 → 단원 → 쪽) · 내준 분량 목록 */
.tbk-pick { display: flex; flex-direction: column; gap: 10px; }
.tbk-pick .row2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tbk-pick .lbl { font-size: 13px; color: #6b7280; width: 3.2em; }
.tbk-pick button { font: inherit; font-size: 16px; font-weight: 700; padding: 10px 14px; border: 1.5px solid #d9dde4; border-radius: 10px; background: #fff; color: #1f2937; cursor: pointer; }
.tbk-pick button.sel { background: #3b6fc0; border-color: #3b6fc0; color: #fff; }
.tbk-pick button.go { background: #2f9e6b; border-color: #2f9e6b; color: #fff; margin-left: auto; }
.tbk-pick button[disabled] { opacity: .4; }
.tbk-pick button.unit { font-weight: 600; font-size: 15px; text-align: left; }
.tbk-pick .units { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 700px) { .tbk-pick .units { grid-template-columns: 1fr 1fr; } }
.tbk-log li .t { white-space: normal; }
.tbk-asg .tbk-log li { padding: 8px 0; }

/* 159차-11: 체크리스트 카드는 앱 홈 체크리스트(.todo-card)와 같은 모양 */
#s-textbook .tbk-cl { padding: 14px 18px; }
#s-textbook .tbk-cl .todo-item .tx .tx-sub { display: block; margin: 2px 0 0; white-space: normal; }

/* 159차-14: 휴대폰 가로(높이 500px 이하) — 숫자판을 오른쪽에 세로로, 문제는 왼쪽에 */
@media (orientation: landscape) and (max-height: 500px) {
  .tbk-pad { left: auto; right: 0; top: 52px; bottom: 0; width: 46%; max-width: 420px; border-top: 0; border-left: 1.5px solid #d9dde4; box-shadow: -4px 0 16px rgba(0,0,0,.08); padding: 4px 8px; display: flex; align-items: center; }
  .tbk-pad .tbk-pad-in { width: 100%; }
  .tbk-pad .tbk-cur { margin-bottom: 2px; font-size: 12px; }
  .tbk-pad .gq-pad { height: auto !important; min-height: 0 !important; gap: 6px; }
  .tbk-pad .gq-keys { gap: 5px; }
  .tbk-pad .gq-keys button, .tbk-pad .gq-enter { height: 40px !important; min-height: 0 !important; font-size: 19px !important; }
  .tbk-pad .tbk-cmpk button { height: 36px; font-size: 22px; }
  body.tbk-pad-open #s-textbook .tbk-body { padding-right: calc(46% + 12px); padding-bottom: 24px; }
  body.tbk-pad-open .ws.tbk-body .grid { grid-template-columns: 1fr; }
  #s-textbook .tbk-tip { display: none; }
}

/* 164차-2(사용자 패드 사진: 87+2 의 7과 2 줄이 안 맞음, 65 는 붙고 31 은 떠 보임): 패드엔 Pretendard 가 없어 기기 글꼴의 숫자 폭이 제각각 →
   세로셈 숫자는 같은 폭 숫자(tabular-nums)로, 칸은 조금 넓게(.72em) 해서 어느 글꼴이든 자리수가 같은 줄에 오게 */
.ws.tbk-body .vt { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ws.tbk-body .vt .dg { width: .82em; }   /* 173차(사용자): 패드 숫자 자간 조금 더 — 세로셈은 자리 칸 폭으로(답 칸 .dg 도 같은 폭) */
.ws.tbk-body .vt .dg.pt { width: .41em; }
.ws.tbk-body .c .qw { letter-spacing: .06em; word-spacing: .18em; }   /* 173차: 가로셈 숫자 자간 · 기호 양옆 */

/* 167차: 교과 연산 나의 오답노트 */
.tbk-wn h2 small { font-size: 13px; font-weight: 500; margin-left: 6px; }
.tbk-wn .tbk-log li { align-items: center; }
.tbk-wn .tbk-log li .t .tx-sub { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; white-space: normal; }
.tbk-wn .tbk-log li.left { background: #fff8f0; border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.tbk-wn .tbk-log li .tbk-btn.small { font-size: 13px; padding: 6px 10px; min-height: 0; flex: none; }

/* 168차: 숫자판 글자 세로 가운데(아이패드 Safari 는 button 안 글자가 아래로 처짐) · '.' 은 칸 안에 */
.tbk-pad .gq-keys button { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; overflow: hidden; }
.tbk-pad .gq-keys button .k { display: block; line-height: 1; }
.tbk-pad .gq-keys button.dot { font-size: clamp(26px, 5vmin, 40px); }
.tbk-pad .gq-keys button.dot .k { transform: translateY(-.22em); }

/* 171차: 교과연산 모드 블럭 화면(#s-tbsel) — 급수 모드 블럭 모양, 학기 12개(3열) + 연산 4개(한 줄) */
#tb-grid { flex: 1; overflow-y: auto; width: 100%; max-width: 680px; margin: 0 auto; padding: 8px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
#tb-grid .tb-sec { font-size: 15px; font-weight: 800; color: var(--sub); margin: 6px 2px 0; display: flex; align-items: baseline; gap: 8px; }
#tb-grid .tb-sec small { font-weight: 600; font-size: 12px; }
#tb-grid .tb-sems { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 10px 12px; flex: none; }   /* 171차-8(사용자): 가로 2 · 세로 6 — 가로로 긴 블럭(연산 블럭 높이) */
#tb-grid .tb-ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; }
#tb-grid .grade-block { min-height: 72px; padding: 8px 6px; font-size: clamp(18px, 3.6vmin, 26px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; white-space: nowrap; letter-spacing: -.02em; }
#tb-grid .grade-block.sem { min-height: 108px; font-size: clamp(27px, 5.4vmin, 39px); }   /* 179차(사용자): 교과연산 모드 학년·학기 블록 1.5배 */
#tb-grid .grade-block.sem .gs { display: block; font-size: 1em; line-height: 1.15; }   /* 171차-6(사용자): 1학년 크게 · 1학기 작게 두 줄 */
#tb-grid .grade-block.sem .hs { display: block; font-size: .72em; line-height: 1.2; opacity: .92; }
#tb-grid .grade-block.op small { font-size: 18px; opacity: .85; margin-top: 2px; }
#tb-grid .tb-cont { display: flex; flex-direction: column; gap: 6px; }
#tb-grid .tb-cont-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1.5px solid #9db9e8; border-radius: 12px; padding: 10px 12px; background: #fff; font-size: 16px; font-weight: 700; color: var(--ink); font-family: inherit; }
#tb-grid .tb-cont-item .tx { flex: 1; min-width: 0; } #tb-grid .tb-cont-item .tx small { display: block; font-size: 12px; color: #6b7280; font-weight: 600; margin-top: 2px; }
#tb-grid .tb-cont-item .go { font-size: 13px; font-weight: 800; color: #fff; background: #4F86D9; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
@media (max-width: 700px) { #tb-grid .tb-sems { grid-template-columns: repeat(2, 1fr); } #tb-grid .tb-ops { grid-template-columns: repeat(2, 1fr); } #tb-grid .grade-block { min-height: 64px; } #tb-grid .grade-block.sem { min-height: 96px; } }
/* 홈 체크리스트의 교과 연산 항목 · 오답노트 교과 연산 카드 */
.todo-item.tbk .tx .tx-sub { display: block; white-space: normal; }
.tbk-wn .tbk-log li { align-items: center; } .tbk-wn p.tbk-muted { margin: 4px 0 8px; }
/* ○표·색칠 칸이 커서 차례일 때(171차: 커서는 번호 순서대로) · 그때는 숫자판 숫자 흐리게 */
.ws.tbk-body .c.act { outline: 3px solid #f59f00; outline-offset: -3px; }
.tbk-pad.nokeys .gq-keys button { opacity: .35; pointer-events: none; }
.ws.tbk-body .lb small { font-weight: 600; margin-left: 6px; }
/* 171차-2: 상단바 💾 저장(풀이 중에만) */
#s-textbook .tb-btn.tbk-save { width: auto; padding: 0 14px; font-size: 15px; font-weight: 800; white-space: nowrap; margin-left: 6px; }
#s-textbook .tb-btn.tbk-save[hidden] { display: none; }
/* 171차-2: 단원 고르기 — 교과서 단원 큰제목 아래 하위 제목 */
.tbk-pick .tb-unit { border: 1.5px solid #d9dde4; border-radius: 12px; padding: 8px 10px 10px; background: #fafbfc; }
.tbk-pick .tb-unit.all { border-color: #3b6fc0; background: #f3f7fd; }
.tbk-pick .tb-unit-h { display: block; width: 100%; text-align: left; font-size: 18px; font-weight: 800; padding: 6px 4px 8px; border: 0; background: none; color: #1f2937; }
.tbk-pick .tb-unit.all .tb-unit-h { color: #1f4e9a; }
.tbk-pick .tb-unit .units { margin-left: 8px; }
.tbk-pick .tb-unit button.unit { font-size: 15px; padding: 8px 12px; }
/* 171차-3(사용자): 문제 글씨 더 크게 · 문제 칸은 흰색 · 세로셈 답 칸은 자리 칸 · 학기 블럭 4열 */
.ws.tbk-body .c { font-size: 27px; background: #fff; }
.ws.tbk-body #tbk-sheet.prac .c { font-size: 29px; }
.ws.tbk-body .c .txt { font-size: 20px; }
.ws.tbk-body .c .no { font-size: 20px; }
.ws.tbk-body .vt { font-size: 27px; }
.ws.tbk-body .vt .ar .fld.vfld { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; padding: 0 calc(.55em - 2px) 0 .2em; letter-spacing: 0; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.ws.tbk-body .vt .ar .fld.vfld .dg { width: .82em; display: inline-block; text-align: center; font-style: normal; }   /* 173차: 위 .vt .dg 와 같은 폭 */
.ws.tbk-body .vt .ar .fld.vfld .dg.pt { width: .41em; }
.ws.tbk-body .vt .ar .fld.vfld.on:empty:before { content: "|"; }
@media (max-width: 700px) { .ws.tbk-body .c { font-size: 25px; } .ws.tbk-body .vt { font-size: 25px; } }
/* 171차-4(사용자 패드 피드백 8가지) */
.ws .fld { border-style: solid; }   /* 8) 안 푼 칸도 실선 */
.ws.tbk-body .grid { gap: 16px 18px; }   /* 8) 칸 사이 간격 */
.ws.tbk-body .blk { margin-bottom: 24px; }
.ws.tbk-body .c { padding: 14px 14px 10px; }
.ws.tbk-body .vt .ar .fld.vfld { font-size: 1em; }   /* 2) 곱셈 세로셈 답 자리(글자 크기가 .9em 이라 자리 폭이 윗줄과 달랐음) */
.ws.tbk-body .ld .qq { right: 3px; }   /* 1) 나눗셈: 몫 칸은 나누어지는 수 자리에(171차-8 측정으로 3px) */
.ws.tbk-body .ld .qq .fld.qfld { width: auto; min-width: 1.7em; padding: 0 0 0 .1em; margin: 0; font-size: 1em; }   /* 171차-8: 몫 끝 = 나누어지는 수 끝(오른쪽 안쪽 여백 없음) */
.ws.tbk-body .ld .br .rm { position: absolute; left: 100%; bottom: 100%; margin: 0 0 3px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: .9em; }
.ws.tbk-body .ld .br .rm .fld { min-width: 1.8em; }
.ws.tbk-body .ld { margin-top: 2.2em; font-size: 27px; }   /* 185차(사용자: 세로셈 나눗셈 숫자가 작게 보임): ws.css 의 .ld 21px(종이용 고정)를 앱·답 보기에서는 다른 문제(.c 27px·.vt 27px)와 같은 크기로 */
@media (max-width: 700px) { .ws.tbk-body .ld { font-size: 25px; } }
.ws.tbk-body .c.cv:has(.rm) { padding-right: 3.6em; }
/* 5) 개념 확인·수학익힘책: 한 줄에 한 문제, 글씨 크게·줄 간격 넉넉히 */
.ws.tbk-body .blk.one .grid { grid-template-columns: 1fr; }
.ws.tbk-body .blk.one .c { padding: 16px 18px 14px; }
.ws.tbk-body .blk.one .c .txt { font-size: 22px; line-height: 1.7; }
.ws.tbk-body .c .sa { font-size: 22px; margin-top: 8px; }
.ws.tbk-body .c .opts { font-size: 1em; margin-top: .5em; }
.ws.tbk-body .c .opt { padding: 4px 12px; }
.ws.tbk-body .c .txt .slot { margin: 0 2px; }
/* 7) 도형 크게 */
.ws.tbk-body .c.fv .figrow .fig svg, .ws.tbk-body .grid.w .figrow .fig svg, .ws.tbk-body .grid .figrow .fig svg { height: 160px; max-height: 160px; }
.ws.tbk-body .c.fx .figrow .fig svg, .ws.tbk-body .grid.w .c.fx .figrow .fig svg { height: 200px; max-height: 200px; }
.ws.tbk-body .c .hd .fig svg { height: 120px; max-height: 120px; }
.ws.tbk-body .c.fv .figrow { padding: 8px 0; }
/* 3) 커서가 ○표 칸에 있을 때 표시는 연한 파란 테두리(고른 답(분홍)과 헷갈리지 않게) */
.ws.tbk-body .c.act { outline: 3px dashed #8db4ea; outline-offset: -3px; }
/* 171차-6: 단원·꼴별 분석(아이 내 기록·선생님 공용) */
.tba .tba-h { font-size: 14px; font-weight: 800; color: #374151; margin: 4px 0 6px; } .tba .tba-h small { font-weight: 600; color: #6b7280; margin-left: 4px; }
.tba .tba-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.tba .tba-nm { flex: 0 0 42%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.tba .tba-bar { flex: 1; height: 10px; background: #eef0f4; border-radius: 999px; overflow: hidden; } .tba .tba-bar i { display: block; height: 100%; background: #2f9e6b; border-radius: 999px; } .tba .tba-bar i.mid { background: #f59f00; } .tba .tba-bar i.low { background: #d6336c; }
.tba .tba-v { flex: 0 0 auto; font-size: 13px; } .tba .tba-v small { color: #6b7280; }
.tba .tba-types { display: flex; flex-wrap: wrap; gap: 6px; } .tba .tba-type { font-size: 13px; } .tba .tba-type .tba-ex { color: #6b7280; font-weight: 500; }
/* 171차-7: 이어 풀기 그만두기 ✕ · 상단 그만두기 */
#tb-grid .tb-cont-row { display: flex; gap: 6px; align-items: stretch; }
#tb-grid .tb-cont-row .tb-cont-item { flex: 1; }
#tb-grid .tb-cont-x { flex: none; width: 44px; border: 1.5px solid #d9dde4; border-radius: 12px; background: #fff; color: #6b7280; font-size: 18px; font-weight: 800; font-family: inherit; }
#s-textbook .tb-btn.tbk-quit { background: #fff; color: #6b7280; border: 1.5px solid #d9dde4; }
/* 171차-8(사용자: 세로셈 답을 쓰면 자리가 안 맞음): .ar 도 .row 라 양옆 여백(.55em/.2em)이 있어 그 안의 답 칸이 한 자리쯤 왼쪽으로 밀렸음 → 답 칸은 .ar 의 여백 안에서 오른쪽 테두리를 2px 밖으로 내 글자 끝이 윗줄 숫자 끝과 같게 */
.ws.tbk-body .vt .ar { padding: 0 .55em 0 .2em; }
.ws.tbk-body .vt .ar .fld.vfld { width: calc(100% + 2px); margin: 0 -2px 0 0; padding: 0 0 0 .2em; box-sizing: border-box; }   /* 오른쪽 테두리 2px 만 바깥으로 → 글자 끝 = 윗줄 숫자 끝 */
/* 172차: 단원 ▶ 바로 시작 · 쪽 줄 고정 · 최근 설정 칩 */
.tbk-pick .unit-row { display: flex; gap: 6px; align-items: stretch; }
.tbk-pick .unit-row button.unit { flex: 1; }
.tbk-pick .unit-go { flex: none; width: 48px; border: 1.5px solid #9db9e8; border-radius: 10px; background: #e8f0fd; color: #1f4e9a; font-size: 16px; font-weight: 800; font-family: inherit; }
.tbk-pick .row2.start { position: sticky; bottom: 0; background: #fff; padding: 8px 0 4px; margin: 0; border-top: 1px solid #eef0f4; z-index: 2; }
#tb-grid .tb-recent { display: flex; flex-wrap: wrap; gap: 6px; }
#tb-grid .tb-recent-item { font: inherit; font-size: 14px; font-weight: 700; padding: 8px 12px; border: 1.5px solid #d9dde4; border-radius: 999px; background: #fff; color: #1f2937; }

/* 184차: 이미 채점한 문제(아이 화면) · 선생님 '넣은 답 보기' */
.ws.tbk-body .c.graded { opacity: .78; position: relative; }
.ws.tbk-body .c.graded::after { content: '채점됨'; position: absolute; right: 6px; bottom: 4px; font-size: 10px; font-weight: 800; color: #5B6B7A; background: #EEF1F4; border-radius: 999px; padding: 1px 6px; }
.ws.tbk-body.tba-sheet { max-height: 58vh; overflow: auto; padding: 6px; border: 1px solid #D9EDEA; border-radius: 10px; }
.ws.tbk-body.tba-sheet .c.empty { opacity: .5; }
.ws.tbk-body.tba-sheet .c.bad.show .a, .ws.tbk-body.tba-sheet .c.bad .a { display: inline; visibility: visible; color: #d6336c; font-weight: 700; margin-left: 6px; font-size: .8em; }   /* 선생님은 정답을 봄 */
/* 185차(사용자: 답지 네모칸 줄이 안 맞고 세로셈 몫이 위아래로 쌓임): 선생님 페이지의 폼용 .modal .fld(세로 배치·13px·여백)가 문제지 답 칸 .fld 에도 먹던 것 — 답 보기 창 안에서는 아이 화면과 같게 */
.modal .ws.tbk-body .fld { flex-direction: row; gap: 0; font-size: inherit; margin: 0 2px; color: #1f2937; font-weight: 800; }
.modal .ws.tbk-body .vt .ar .fld.vfld { margin: 0 -2px 0 0; }
.modal .ws.tbk-body .ld .qq .fld.qfld { margin: 0; }
.modal .ws.tbk-body .ld .br .rm .fld { margin: 0; }

/* 235차(사용자): 학년·학기 블록은 지금 학기(1~6월 1학기 · 7~12월 2학기)만 먼저, [1학기 | 2학기] 로 바꿈 */
#tb-grid .grade-block.sem.off { display: none; }
#tb-grid .tb-sec .tb-half { margin-left: 10px; vertical-align: middle; padding: 3px; }
#tb-grid .tb-sec .tb-half .seg-btn { min-height: 30px; padding: 0 12px; font-size: 13px; }