/* [X] 교구 체험관 — tokens.css · common.css · app.css 다음에 읽음. 색 · 크기 · 간격은 변수만 */
.kx-body { min-height: 100vh; background: var(--bg); }
/* app.css 는 선생님 앱처럼 「화면 고정 · 좁으면 숨김」 — 체험관은 쪽이 길게 내려가고, 휴대폰에서도 보기는 되게 */
html.tk.kx-page, html.tk.kx-page body { height: auto; min-height: 100%; }
html.tk.kx-page body { overflow: auto; }
@media (max-width: 1023px) {
  html.tk.kx-page body > #kx-topbar { display: flex !important; }
  html.tk.kx-page body > main#kx { display: block !important; }
  html.tk.kx-page body > #kx-toast { display: block !important; }
}
.kx-top .kx-tname { font-size: var(--t-l); font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; }
.kx-top #kx-big.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.kx-phone { display: none; }
#kx-toast { position: fixed; left: 50%; bottom: var(--s6); transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: var(--s3) var(--s5); border-radius: var(--r-l); font-size: var(--t-m); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity var(--m-mid) var(--ease), transform var(--m-mid) var(--ease); z-index: 50; max-width: calc(100vw - 32px); text-align: center; }
#kx-toast.on { opacity: 1; transform: translate(-50%, 0); }
.kx-empty { padding: var(--s6); font-size: var(--t-m); color: var(--ink-2); }

/* ───── 목록 ───── */
.kx-list { padding: var(--s5) var(--s6) var(--s7); display: flex; flex-direction: column; gap: var(--s4); max-width: 1800px; margin: 0 auto; }
.kx-filter { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.kx-fl { font-size: var(--t-s); font-weight: 800; color: var(--ink-2); width: 56px; }
.kx-stchip .stage-en { margin-right: 4px; }
.kx-list .section-title { margin-top: var(--s4); font-size: var(--t-m); }
.kx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.kx-card { display: grid; grid-template-columns: 112px 1fr; gap: var(--s4); align-items: center; padding: var(--s4); background: var(--card); border: var(--line-w2) solid var(--line); border-radius: var(--r-l); text-decoration: none; color: var(--ink); min-height: 120px; transition: border-color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease), transform var(--m-fast) var(--ease); }
.kx-card:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-1px); }
.kx-card:focus-visible { outline: var(--line-w3) solid var(--brand); outline-offset: 3px; }
.kx-art { display: grid; place-items: center; background: var(--k-bg); border-radius: var(--r-m); padding: var(--s1); }
.kx-art.big { padding: var(--s4); margin-bottom: var(--s4); }
.kx-cb { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kx-cb b { font-size: var(--t-m); font-weight: 800; line-height: 1.3; }
.kx-cb small { font-size: var(--t-s); color: var(--ink-2); }
.kx-meta { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ───── 교구 하나 ───── */
.kx-view { display: grid; grid-template-columns: minmax(0, 1fr) min(540px, 34vw); gap: var(--s4); padding: var(--s4); height: calc(100vh - 72px); }
.kx-left { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; min-height: 0; }
.kx-vh { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.kx-vt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kx-vt h1 { font-size: var(--t-xl); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.kx-vt > span { font-size: var(--t-s); color: var(--ink-2); display: flex; gap: var(--s2); align-items: center; }
.kx-btabs { margin-left: auto; flex-wrap: wrap; }
.kx-stage { position: relative; flex: 1; min-height: 420px; overflow: hidden; background: var(--k-bg); padding: 0; touch-action: none; }
.kx-stage > .kx-svg, .kx-net-p > .kx-svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); user-select: none; -webkit-user-select: none; }
.kx-stage .tk-skel { height: 100%; align-content: center; justify-items: center; }
.kx-svg text { font-family: var(--font); }
.kx-svg .kx-piece { cursor: grab; }
.kx-svg .kx-piece:active { cursor: grabbing; }
.kx-svg .kx-hit, .kx-geo circle { cursor: pointer; }
.kx-wrap { position: absolute; inset: 0; }
.kx-net { position: absolute; inset: 0; display: flex; flex-direction: column; }
.kx-net-tabs { align-self: flex-start; margin: var(--s3); }
.kx-net-p { position: relative; flex: 1; min-height: 0; }
.kx-net-p[hidden] { display: none; }
.kx-tools { display: flex; flex-direction: column; gap: var(--s2); }
.kx-trow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.kx-std { justify-content: flex-end; }
.kx-info { flex: 1; font-size: var(--t-s); color: var(--ink-2); font-weight: 600; min-width: 240px; }
.kx-tools .btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.kx-sw { width: 18px; height: 18px; border-radius: 4px; border: var(--line-w2) solid var(--ink); display: inline-block; }
.kx-paper { padding: var(--s6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); max-width: 860px; overflow: auto; height: 100%; }
.kx-paper h2 { font-size: var(--t-xl); }
.kx-pp, .kx-near { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-m); }
.kx-pp ul { margin: 0; padding-left: 1.2em; }
.kx-near .chip { text-decoration: none; }

/* 오른쪽 판 — 덮개 없이 화면 높이 꽉 */
.kx-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.kx-stabs { margin: var(--s3); align-self: stretch; }
.kx-stabs > * { flex: 1; justify-content: center; }
.kx-stabs .n { font-size: var(--t-badge); color: var(--ink-2); }
.kx-sb { flex: 1; overflow: auto; padding: 0 var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.kx-h2 { font-size: var(--t-l); display: flex; align-items: center; gap: var(--s3); }
.kx-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.kx-task { border: var(--line-w2) solid var(--line); border-radius: var(--r-l); background: var(--card); }
.kx-task.now { border-color: var(--brand); box-shadow: var(--sh-2); }
.kx-task.is-ok { border-color: var(--ok-line); background: var(--ok-bg); }
.kx-task.is-re { border-color: var(--no-line); }
.kx-tb { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: transparent; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 72px; }
.kx-tb i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--bg-2); color: var(--ink-2); font-size: var(--t-s); }
.kx-task.now .kx-tb i { background: var(--brand); color: #fff; }
.kx-task.is-ok .kx-tb i { background: var(--ok); color: #fff; }
.kx-tb > span { font-size: var(--t-s); font-weight: 700; line-height: 1.45; }
.kx-tnow { padding: 0 var(--s4) var(--s4) calc(var(--s4) + 52px); display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.kx-tnow .btn { min-height: 56px; }
.kx-hint { font-size: var(--t-s); color: var(--no); font-weight: 700; }
.kx-alldone { font-size: var(--t-s); color: var(--ok); font-weight: 700; }
.kx-g { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s3); border-bottom: var(--line-w) solid var(--line); }
.kx-g:last-child { border-bottom: 0; }
.kx-g h3 { font-size: var(--t-m); }
.kx-g p, .kx-g li { font-size: var(--t-s); line-height: 1.6; }
.kx-g ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.kx-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); font-size: var(--t-s); }
.kx-steps { flex-direction: column; gap: var(--s3); }
.kx-steps li { align-items: flex-start; color: var(--ink); }
.kx-steps li b { flex: none; background: var(--brand-soft); color: var(--brand-deep); }
.kx-steps strong { font-size: var(--t-s); }
.kx-ask li { font-weight: 600; }
.kx-age { display: flex; flex-direction: column; gap: var(--s2); }
.kx-age b { display: inline-block; margin-right: var(--s2); color: var(--brand-deep); }
.kx-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.kx-themes li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-m); border: var(--line-w) solid var(--line); background: var(--card); }
.kx-themes li.on { border: var(--line-w2) solid var(--brand); background: var(--brand-soft); }
.kx-themes li div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kx-themes b { font-size: var(--t-s); }
.kx-themes small { font-size: var(--t-s); color: var(--ink-2); }

/* 전자칠판 크게(1920) — data-dev="board" 로 숫자만 커짐 */
[data-dev="board"] .kx-view { grid-template-columns: minmax(0, 1fr) min(640px, 34vw); }
[data-dev="board"] .kx-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }

/* 좁은 화면(노트북 1366 아래) — 오른쪽 판 좁게 */
@media (max-width: 1400px) { .kx-view { grid-template-columns: minmax(0, 1fr) 440px; } }
/* 패드 · 휴대폰 — 위 판 · 아래 안내로 쌓기, 깨지지 않게 보기만 */
@media (max-width: 1023px) {
  .kx-view { grid-template-columns: 1fr; height: auto; }
  .kx-stage { min-height: 60vw; }
  .kx-side { max-height: none; }
  .kx-list { padding: var(--s4); }
  .kx-grid { grid-template-columns: 1fr; }
  .kx-top .kx-tname, .kx-top #kx-big { display: none; }
  .kx-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  html.tk.kx-page body > #kx-phone { display: block !important; }
  .kx-phone { display: block; margin: 0; padding: var(--s3) var(--s4); background: var(--spark-soft); font-size: var(--t-s); font-weight: 700; position: sticky; bottom: 0; }
  .kx-card { grid-template-columns: 80px 1fr; }
  .kx-art svg { width: 80px; height: 60px; }
  .topbar { gap: var(--s3); padding: 0 var(--s4); }
}
.kx-views { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: flex-end; padding: var(--s2) 0; }
.kx-vw { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kx-vw figcaption { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); }

/* ───── [D3 10-21] 체험관 — 앱과 같은 틀(본문 최대 폭 · 양옆 여백) ───── */
html.tk .kx-list { max-width: var(--page-max); padding: var(--s5) var(--gutter) var(--s7); }
html.tk .kx-card { border-width: var(--line-w); box-shadow: var(--sh-1); }
html.tk .kx-card:hover { border-color: var(--sky-3); }
html.tk .kx-art { background: var(--sky-1); }
html.tk .kx-fl { color: var(--accent-deep); }

/* ───── [X56] 초5 · 초6 교과 체험 판 — 판(SVG) 위 · 조절 띠(끌기 막대 · 고르기) 아래 ───── */
/* 판 높이 = 폭에 맞춰(1600 : 820) — 낮은 화면(1366 × 768)에서도 판 글자가 18px 밑으로 줄지 않게, 모자라면 쪽이 내려감 */
.kx-view:has(.kx-k) { height: auto; min-height: calc(100vh - 72px); }
.kx-view:has(.kx-k) > .kx-side { contain: size; }
.kx-stage:has(> .kx-k) { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.kx-k { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }
.kx-k-art { position: relative; flex: 1 0 auto; aspect-ratio: 1600 / 820; }
.kx-k-art > .kx-svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); user-select: none; -webkit-user-select: none; touch-action: none; }
.kx-ctl { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; padding: var(--s2) var(--s4) var(--s3); background: var(--card); border-top: var(--line-w) solid var(--line); }
.kx-ctl:empty { display: none; }
.kx-ctl [hidden] { display: none !important; }
.kx-sl { flex: 1 1 170px; min-width: 160px; max-width: 420px; gap: 0; }
.kx-sl-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--s2); }
.kx-sl-n { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.kx-sl-v { font-size: var(--t-m); font-weight: 800; color: var(--brand-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kx-ctl .tk-slider input[type=range] { height: 56px; }
.kx-ctl .tk-slider input[type=range]::-webkit-slider-thumb { width: 44px; height: 44px; margin-top: -16px; }
.kx-ctl .tk-slider input[type=range]::-moz-range-thumb { width: 40px; height: 40px; }
.kx-segw { display: flex; flex-direction: column; gap: 4px; }
.kx-segw .seg > button { min-height: var(--hit); font-size: var(--t-s); padding: 0 var(--s3); }
.kx-vote { display: flex; flex-wrap: wrap; gap: var(--s2); width: 100%; }
.kx-vote > button { flex: 1 1 140px; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: var(--s2); font-size: var(--t-m); font-weight: 800; border-radius: var(--r-m); border: var(--line-w2) solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; font-family: inherit; }
.kx-vote > button:active { transform: translateY(1px) scale(.98); }
.kx-vote > button svg { width: 36px; height: 36px; flex: none; border-radius: 6px; }
.kx-vote > button.minus { flex: 0 0 auto; padding: 0 var(--s4); border-style: dashed; font-weight: 700; }
.kx-vote > button.minus.on { background: var(--no-bg); border-color: var(--no); color: var(--no); }
.kx-up .n { margin-left: 4px; }
/* 패드 · 손가락(굵은 누름) — 누르는 곳 72px */
@media (pointer: coarse) {
  .kx-ctl .tk-slider input[type=range] { height: 72px; }
  .kx-ctl .tk-slider input[type=range]::-webkit-slider-thumb { width: 56px; height: 56px; margin-top: -22px; }
  .kx-segw .seg > button, .kx-vote > button { min-height: 72px; }
}
[data-dev="board"] .kx-ctl .tk-slider input[type=range] { height: 72px; }
[data-dev="board"] .kx-ctl .tk-slider input[type=range]::-webkit-slider-thumb { width: 60px; height: 60px; margin-top: -24px; }
[data-dev="board"] .kx-segw .seg > button, [data-dev="board"] .kx-vote > button { min-height: 72px; }
[data-dev="board"] .kx-sl { max-width: 520px; }
/* 패드 1024 · 좁은 화면 — 교과 체험 판은 폭을 다 쓰고 과제 판은 아래로(판 글자 18px 지키기) */
@media (max-width: 1200px) { .kx-view:has(.kx-k) { grid-template-columns: 1fr; } .kx-view:has(.kx-k) > .kx-side { contain: none; } }