/* 158차: 교과 연산 화면(index.html #s-textbook). 문제 칸 모양은 css/ws.css(.ws 아래)를 쓰고, 여기는 화면 배치·입력 칸·숫자판 자리만 */
body.no-textbook #btn-textbook { display: none !important; }
.mode-card.record.tbk { --tx: #1f4e9a; border-color: #9db9e8; box-shadow: 0 4px 0 #d6e3f7; }
#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: 300px; }
.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; }
.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.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: #3b6fc0; font-weight: 800; cursor: pointer; vertical-align: middle; line-height: 1.2; margin: 0 2px; }
.ws .fld.on { border: 2.5px solid #3b6fc0; background: #e8f0fd; box-shadow: 0 0 0 3px rgba(59,111,192,.18); }
.ws .fld.filled { border-style: solid; border-color: #6b7fa3; }
.ws .fld.on:empty:before { content: "|"; color: #3b6fc0; 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: #3b6fc0; font-weight: 800; } .ws svg .gin.on circle { stroke: #3b6fc0; 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 { font-size: 14px; color: #6b7280; text-align: center; margin-bottom: 4px; min-height: 18px; }
.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; }
}