/* =====================================================================
   common.css — 모든 화면이 같이 쓰는 길잡이 부품 (D2 · 10-21)
   ① 「홈 · 처음으로」 단추 .tk-home — 모든 화면 같은 아이콘(집) · 같은 자리(머리 왼쪽, 로고 바로 옆)
   ② 이동 경로 한 줄 .tk-crumb (선생님 · 원장 앱)
   ③ 불러오는 중 뼈대 .tk-skel  ④ 빈 상태 그림 .tk-empty .art  ⑤ 오른쪽 판 열고 닫힘 움직임
   ⑥ 아이 화면 칭찬 움직임(별 · 블록)
   tokens.css 를 읽지 않는 화면(인쇄 · 같이 하는 방 시험판)도 있어 변수마다 기본값을 같이 적음.
   ===================================================================== */

/* ───── ① 홈 단추 ───── */
.tk-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill, 999px);
  border: 2px solid var(--line, #DCE1EB); background: var(--card, #fff); color: var(--ink, #15213B);
  font-family: var(--font, "Noto Sans KR", "Malgun Gothic", sans-serif); font-size: 18px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; flex: none;
  transition: border-color var(--m-fast, 140ms) var(--ease, ease), background var(--m-fast, 140ms) var(--ease, ease), color var(--m-fast, 140ms) var(--ease, ease); }
.tk-home:hover { border-color: var(--brand, #2B3FB8); color: var(--brand, #2B3FB8); }
.tk-home:active { transform: translateY(1px); }
.tk-home:focus-visible { outline: 3px solid var(--brand, #2B3FB8); outline-offset: 3px; }
.tk-home svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-home svg .soft { fill: currentColor; opacity: .14; stroke: none; }
.tk-home[aria-current="page"] { background: var(--brand-soft, #E7EAFB); border-color: var(--brand, #2B3FB8); color: var(--brand-deep, #1C2A82); }
.tk-home.stop { border-color: var(--hint, #A94F09); color: var(--hint, #A94F09); }       /* 문제 푸는 중 「그만하고 처음으로」 */
/* 로고를 눌러도 홈 */
a.tk-logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 12px; }
a.tk-logo:focus-visible { outline: 3px solid var(--brand, #2B3FB8); outline-offset: 3px; }

/* ───── ② 이동 경로 ───── */
.tk-crumb { height: 48px; display: flex; align-items: center; gap: 4px; padding: 0 var(--s5, 24px); background: var(--bg, #F4F5F8); border-bottom: 1px solid var(--line, #DCE1EB); font-size: var(--t-s, 18px); color: var(--ink-2, #44506C); white-space: nowrap; overflow: hidden; }
.tk-crumb ol { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.tk-crumb li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tk-crumb li + li::before { content: ""; width: 8px; height: 8px; border: solid var(--ink-3, #66708A); border-width: 2px 2px 0 0; transform: rotate(45deg); margin: 0 10px 0 6px; flex: none; }
.tk-crumb a { color: var(--ink-2, #44506C); text-decoration: none; font-weight: 600; padding: 4px 8px; border-radius: 8px; }
.tk-crumb a:hover { background: var(--bg-2, #EBEEF4); color: var(--brand, #2B3FB8); }
.tk-crumb li:last-child b { color: var(--ink, #15213B); font-weight: 800; padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; }
.tk-crumb .ico { width: 20px; height: 20px; }
.tk-crumb .grow { flex: 1; }
.tk-crumb .when { font-weight: 600; color: var(--ink-2, #44506C); }
html.tk.has-crumb #tk-main { height: calc(100vh - 72px - 48px); }

/* ───── ③ 불러오는 중 뼈대 ───── */
.tk-skel { padding: var(--s5, 24px); display: grid; gap: var(--s5, 24px); height: 100%; align-content: start; }
.tk-skel.cols { grid-template-columns: 292px minmax(0, 1fr) 344px; align-items: start; }
.tk-skel.bank { grid-template-columns: 292px minmax(0, 1fr); align-items: start; }
.tk-skel .col { display: flex; flex-direction: column; gap: var(--s4, 16px); }
.tk-skel .bar, .tk-skel .box { border-radius: var(--r-l, 16px); background: linear-gradient(90deg, #E3E7F0 0%, #F5F6FA 40%, #E3E7F0 80%); background-size: 300% 100%; animation: tk-shimmer 1.4s var(--ease, ease) infinite; }
.tk-skel .bar { height: 22px; border-radius: 999px; }
.tk-skel .bar.h { height: 34px; width: 46%; }
.tk-skel .bar.s { width: 62%; }
.tk-skel .box { height: 120px; }
.tk-skel .box.tall { height: 300px; }
.tk-skel .box.mid { height: 200px; }
.tk-skel .say { display: flex; align-items: center; gap: 12px; font-size: var(--t-s, 18px); font-weight: 700; color: var(--ink-2, #44506C); }
.tk-skel .say i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--brand-soft, #E7EAFB); border-top-color: var(--brand, #2B3FB8); animation: tk-spin 0.9s linear infinite; flex: none; }
@keyframes tk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes tk-spin { to { transform: rotate(360deg); } }

/* ───── ④ 빈 상태 — 그림 + 말 + 다음 할 일 ───── */
.tk-empty .art { width: 132px; height: 96px; margin-bottom: var(--s2, 8px); }
.tk-empty .art svg { width: 100%; height: 100%; display: block; }
.tk-empty .next { margin-top: var(--s2, 8px); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand-deep, #1C2A82); background: var(--brand-soft, #E7EAFB); border-radius: 999px; padding: 6px 16px; }
.tk-empty .next .ico { width: 20px; height: 20px; }

/* ───── ⑤ 오른쪽 판 — 오른쪽에서 미끄러져 들어오고 나감(덮개 없음) ───── */
.tk .tk-side { animation: tk-side-in var(--m-mid, 220ms) var(--ease, ease) both; }
.tk .tk-side-out { animation: tk-side-out 180ms var(--ease, ease) both; pointer-events: none; }
@keyframes tk-side-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tk-side-out { from { transform: none; opacity: 1; } to { transform: translateX(32px); opacity: 0; } }

/* 화면이 바뀔 때 부드럽게 나타남 */
#tk-main[data-ready] > * { animation: tk-fade var(--m-mid, 220ms) var(--ease, ease) both; }
@keyframes tk-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ───── ⑥ 아이 화면 칭찬 움직임 ───── */
@keyframes tk-pop { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes tk-drop { 0% { transform: translateY(-40px); opacity: 0; } 70% { transform: translateY(4px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes tk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tk-press { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }

/* ───── 문제 푸는 중 「처음으로」 안내 한 줄 ───── */
.tk-saveline { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 8px 0 0; font-size: 18px; color: var(--ink-2, #44506C); }
.tk-saveline svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ok, #17703E); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .tk-skel .bar, .tk-skel .box, .tk-skel .say i { animation: none; }
}
.tk .tk-side-out { top: 72px; }
.tk .tk-side-out.wide { width: min(760px, 56vw); }
body.tk-side-on #tk-crumb { margin-right: min(560px, 42vw); transition: margin-right var(--m-mid, 220ms) var(--ease, ease); }
body.tk-side-wide #tk-crumb { margin-right: min(760px, 56vw); }
/* 머리: 로고 · 홈 · 메뉴 사이 간격 */
.tk .topbar .tk-home { margin-left: calc(-1 * var(--s3, 12px)); }
.tk .tk-me-go { gap: var(--s3, 12px); border-top: 1px solid var(--line, #DCE1EB); padding-top: var(--s4, 16px); }
.tk .tk-me-go .btn { justify-content: flex-start; }
/* 반 고르기 = 어느 화면이든 같은 칩 줄(우리 반 · 숙제 · 채점 · 일지 · 뽑기) */
.tk-clspick { gap: var(--s2, 8px); }
.tk-empty.big { background: var(--card, #fff); padding: var(--s7, 48px) var(--s5, 24px); }
.tk-empty.big b { font-size: var(--t-l, 24px); }
/* 들어오기 화면 머리 — 앱과 같은 자리(로고 → 첫 화면으로) */
.tk-login-top { position: static; }
.tk-login-top + .tk-login { height: calc(100% - 72px); }
.tk-login .box > a.tk-logo { align-self: flex-start; }
/* 칠판: 구석에 작게(칠판 화면을 가리지 않게 · 선생님이 누르는 곳) */
.tk-home.tk-home-sm { min-height: 44px; font-size: 20px; padding: 0 14px 0 10px; color: var(--ink-2, #44506C); border-color: var(--line, #DCE1EB); background: transparent; }
.tk-home.tk-home-sm .ico, .tk-home.tk-home-sm svg { width: 22px; height: 22px; }

/* =====================================================================
   ⑦ 단추 체계 (원장님 10-21 「버튼부터 전부」) — 모든 화면이 이 한 꼴
   크기 3단: .btn-sm 작은(40) · .btn 보통(48 = --hit) · .btn-lg 큰(60)   — 패드 · 칠판은 --hit 가 커져 같이 커짐
   위계 5가지: .btn-go 초록 지금(한 화면 하나, setGo) · .btn-main 남청 주 · .btn 흰 보통 · .btn-quiet 글자만 조용한 · .btn-stop 빨강 멈춤
   상태: 올림(마우스 올림) · 누름 · 꺼짐(disabled · aria-disabled) · 불러오는 중(aria-busy="true" → 돌림 표시, 못 누름) · 고름(.on · aria-pressed)
   같은 꼴의 고르기 부품: .chip 칩 · .seg 탭 · .tk-cell 칸(○△✕) · 끌기 막대(.tk-slider · .s2-track)
   ===================================================================== */
:where(.tk, .pa, .hm) .btn { gap: var(--s2, 8px); transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), color var(--m-fast) var(--ease), transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
:where(.tk, .pa, .hm) .btn > .ico { width: calc(var(--icon, 24px) - 2px); height: calc(var(--icon, 24px) - 2px); margin-left: -2px; }
:where(.tk, .pa, .hm) .btn-sm { min-height: 40px; padding: 0 var(--s4, 16px); border-radius: var(--r-s, 8px); font-size: var(--t-s, 18px); gap: 6px; }
:where(.tk, .pa, .hm) .btn-sm > .ico { width: 20px; height: 20px; }
:where(.tk, .pa, .hm) .btn-lg > .ico { width: var(--icon, 24px); height: var(--icon, 24px); }
@media (hover: hover) {
  :where(.tk, .pa, .hm) .btn:not(.btn-quiet):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
  :where(.tk, .pa, .hm) .btn-quiet:not(:disabled):hover { background: var(--bg-2); color: var(--ink); }
  :where(.tk, .pa, .hm) .btn-stop:not(:disabled):hover { background: var(--no-bg); border-color: var(--danger); }
  :where(.tk, .pa, .hm) .chip:not(:disabled):not(.on):not([aria-pressed="true"]):hover { border-color: var(--brand); color: var(--brand-deep); }
  :where(.tk, .pa, .hm) .seg > :not(.on):hover { color: var(--ink); background: rgba(255,255,255,.6); }
  :where(.tk, .pa, .hm) .tk-cell:hover { border-color: var(--brand); }
}
:where(.tk, .pa, .hm) .btn:not(:disabled):active, :where(.tk, .pa, .hm) .chip:not(:disabled):active, :where(.tk, .pa, .hm) .seg > :active, :where(.tk, .pa, .hm) .tk-cell:active { transform: translateY(1px) scale(.98); box-shadow: none; }
/* 꺼짐 — 흐리게만이 아니라 회색 바탕 + 글자로 「지금은 못 눌러요」가 보이게 */
:where(.tk, .pa, .hm) .btn:disabled, :where(.tk, .pa, .hm) .btn[aria-disabled="true"] { background: var(--wait-bg, #EEF0F5); border-color: var(--line, #DCE1EB); color: var(--ink-3, #66708A); cursor: not-allowed; animation: none; box-shadow: none; transform: none; opacity: 1; }
:where(.tk, .pa, .hm) .btn-quiet:disabled { background: transparent; border-color: transparent; }
:where(.tk, .pa, .hm) .chip:disabled { opacity: .5; cursor: not-allowed; }
/* 불러오는 중 — 돌림 표시 + 못 누름(글자는 그대로) */
:where(.tk, .pa, .hm) .btn[aria-busy="true"] { pointer-events: none; cursor: progress; }
:where(.tk, .pa, .hm) .btn[aria-busy="true"] > .ico { display: none; }
:where(.tk, .pa, .hm) .btn[aria-busy="true"]::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: tk-spin .8s linear infinite; flex: none; }
/* 초록 지금 단추: 올려도 숨쉬기 그대로 */
:where(.tk, .pa, .hm) .btn-go:hover { transform: translateY(-1px); }
/* 칩 · 탭 · 칸: 같은 움직임 · 같은 테두리 */
:where(.tk, .pa, .hm) .chip { transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), color var(--m-fast) var(--ease), transform var(--m-fast) var(--ease); }
:where(.tk, .pa, .hm) .chip > .ico { width: 20px; height: 20px; }
:where(.tk, .pa, .hm) .seg > * { transition: background var(--m-fast) var(--ease), color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
:where(.tk, .pa, .hm) .seg > :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.tk, .pa, .hm) .tk-cell { transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), transform var(--m-fast) var(--ease); }
/* 끌기 막대 손잡이: 올리면 커지고 · 잡으면 남청으로 */
:where(.tk, .pa, .hm) .s2-track .h, :where(.tk, .pa, .hm) .tk-slider input[type=range]::-webkit-slider-thumb { transition: transform var(--m-fast) var(--ease), background var(--m-fast) var(--ease); }
:where(.tk, .pa, .hm) .s2-track .h:hover { transform: scale(1.08); }
:where(.tk, .pa, .hm) .s2-track.drag .h, :where(.tk, .pa, .hm) .s2-track .h:active { transform: scale(1.12); background: var(--brand-soft); }

/* ───── ⑧ 집 앱(하루 사고력) — 아이 친화 움직임 · 머리 「처음으로」 ───── */
[data-dev="pad"] .hm .tk-home { min-height: 56px; font-size: 22px; padding: 0 18px 0 14px; }
[data-dev="pad"] .hm .tk-home svg { width: 28px; height: 28px; }
.hm .hm-stone { animation: tk-drop .45s var(--ease) both; }
.hm .hm-stone:nth-of-type(2) { animation-delay: 60ms; } .hm .hm-stone:nth-of-type(3) { animation-delay: 120ms; }
.hm .hm-stone:nth-of-type(4) { animation-delay: 180ms; } .hm .hm-stone:nth-of-type(5) { animation-delay: 240ms; } .hm .hm-stone:nth-of-type(6) { animation-delay: 300ms; }
.hm .hm-stone.now .blk { animation: tk-bob 1.6s ease-in-out infinite; }
.hm .hm-stone:active, .hm .hm-kidbtn:active { animation: tk-press .18s var(--ease); }
.hm .hm-tower svg { animation: tk-drop .7s var(--ease) both; }
.hm .hm-fin h1 { animation: tk-pop .6s var(--ease) .25s both; }
.hm .hm-fb.ok > .ico, .hm .hm-fb.ok > svg { animation: tk-pop .45s var(--ease) both; }
.hm .tk-saveline { margin-top: var(--s3, 12px); }
@media (max-width: 430px) { .hm .hm-ptop .hm-pname { display: none; } }

/* ───── ⑨ 같이 하는 방 시험판(칠판 board · 패드 pad) — 「첫 화면으로」 ───── */
.tk-room-home { min-height: 44px; font-size: 18px; }
.tk-pad-home { margin: 12px 16px 0; width: max-content; }
/* 머리 한 줄 지키기(메뉴가 늘어도 줄바꿈 없이) — 1366 ~ 1500 폭은 로고 글자 · 학원 이름 표를 접음 */
.tk .topbar > * { flex: none; white-space: nowrap; }
.tk .topbar > .grow { flex: 1; }
.tk .tk-menu > a { white-space: nowrap; }
@media (max-width: 1560px) {
  .tk .topbar { gap: var(--s3, 12px); }
  .tk .topbar .tk-home { margin-left: 0; }
  .tk .topbar .brand.tk-logo b, .tk .topbar > .badge.b-spark, .tk .topbar > .tk-acab { display: none; }
  .tk .tk-menu > a { padding: 0 var(--s3, 12px); }
}
/* [B] 메뉴 9칸(체험관 · 게임관 더함) — 1366 ~ 1420 폭에서도 한 줄 · 오른쪽 여백 */
@media (max-width: 1420px) {
  .tk .topbar { gap: var(--s2, 8px); }
  .tk .tk-menu > a { padding: 0 10px; gap: 6px; }
}