/* ==========================================================================
   강사 화면(style.css)과 학생·학부모 화면(student.css)이 함께 쓰는 부품 (2026-10-12 W77 묶음 1)
   하단 탭바 한 부품: 마크업은 templates/_tabbar.html 매크로 하나 · 값은 이 파일 한 곳.
   두 CSS 보다 먼저 읽는다(템플릿에서 style.css / student.css 앞). 쓰는 토큰은 두 쪽 :root 에 같은 값으로 있다
   (--tabbar-h --rail-w --card --line --ink-3 --navy-100 --navy-800 --accent-y-lt --ink --r-sm --space-1 --space-2).
   ========================================================================== */
.tabbar { display: none; }
.tabbar a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (max-width: 839px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card);
    box-shadow: inset 0 1px 0 var(--line); padding-top: 2px; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  }
  .tabbar a { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 11px; font-weight: 600; position: relative; line-height: normal; text-decoration: none; }   /* 아이콘+글자 묶음이 1.06px 위로 뜨던 것 보정 */
  .tabbar .tb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: min(calc(100% - var(--space-2)), var(--rail-w)); padding: var(--space-1) 0 calc(var(--space-1) + 2px); border-radius: var(--r-sm); position: relative; }   /* 안여백 위 4 · 아래 6: 아이콘+글자 묶음 잉크를 선택 칸 가운데 0.5px 안으로 1 올림(글줄 normal 이라 기하 0 · W331) */
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a[href="/attend"] .tb { padding-bottom: var(--space-1); }   /* 출결·과제(clipboard 아이콘)는 그림 윗선이 다른 아이콘보다 1 낮아 올리면 오히려 0.8 위로 뜬다 → 이 칸만 위·아래 같음(W331) */
  .tabbar a.on { color: var(--navy-800); font-weight: 700; }
  .tabbar a.on .tb { background: var(--navy-100); }   /* 선택 칸: 아이콘+글자를 함께 감싼다 · 반경은 사이드바 선택 칸과 같은 --r-sm (2026-10-11 14:28 대표 · W75) */
  .tabbar .cnt { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 16px; min-width: 16px; min-height: 0; line-height: 12px; position: absolute; top: calc(var(--space-1) + 2px); right: calc(50% - 18px); box-shadow: 0 0 0 2px var(--card); background: var(--accent-y-lt); color: var(--ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 6px; padding: 0 4px; }   /* 노란 개수 배지 한 규격(W199: 16 · 4 · 6 · 700 · 11.5/12) · 안여백 위아래 0 = 숫자 잉크 정중앙(4배 잉크 차 0.0 · 짝수 규칙) */   /* token-ok */
  .tabbar .cnt[hidden] { display: none; }   /* 위티챗 칸 안 읽은 개수는 chat.js 가 채우기 전·0일 때 숨김 */
  body.kb-open .tabbar { display: none; }   /* 강사 화면: app.js 가 키보드가 올라오면 붙인다 */
  body:not(:has(.sidebar)):has(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus, textarea:focus, select:focus) .tabbar { display: none; }   /* 학생 화면(app.js 없음 · 사이드바 없음)만: 입력 칸에 커서가 있는 동안 숨겨 키보드 위에 뜨지 않게 · 강사 화면은 kb-open 만(autofocus 화면에서 열자마자 숨던 회귀 · F0 10-13) */
}
/* 폰 폭(599 이하): 탭바 좌우 안여백 늘 8 · 선택 칸은 min(64, 칸 폭 − 4) → 5칸 320·360·375·402 에서 첫·끝 선택 칸이 화면 끝에서 10 이상(2026-10-13 critic 2차 2) */
@media (max-width: 599px) {
  .tabbar { padding-left: max(var(--space-2), env(safe-area-inset-left)); padding-right: max(var(--space-2), env(safe-area-inset-right)); }
  .tabbar .tb { width: min(calc(100% - var(--space-1)), var(--rail-w)); }
}
/* 폰 가로 모드(높이 500 이하): 탭바를 낮춘다(--tabbar-h 50 은 style.css 와 student.css 의 같은 밴드에서) */
@media (max-width: 839px) and (orientation: landscape) and (max-height: 500px) {
  .tabbar a { font-size: 10px; } .tabbar .tb { gap: 2px; }
  .tabbar a svg { width: 20px; height: 20px; }
  .tabbar .cnt { right: calc(50% - 16px); }   /* 아이콘 20 → 오른쪽 위 6 겹침 그대로 */
}