/* ══ 데일로 DAILO v3 · 계층 3 COMPONENT (부품) ══════════════════
   §3-7 크기 체계 · §3-8 레이아웃 리듬 · §4-7 실측 계약을 부품 토큰으로 고정.
   v3 = 재설계 2단계 2-① T-RD2-L1 · 반영 T-RD2-L1S(DS v3 §1-7 · §1-9) · 정본 = 이 파일(설계 조정자 결정 C-03). */
:root{
  /* ── 컨트롤 높이 3단 (v3 · 사장 선택 V3-G3 「A」 「3단(40·44·52)을 이름 있는 토큰으로」)
     sm = 데스크톱 보조·텍스트 버튼 · 표·도구줄 안 · 메뉴 항목 / md = 데스크톱 주 버튼 · 폼 제출 /
     lg = 폰·인증 카드·키오스크 전폭 버튼 · 외부 로그인. 보이는 높이와 별개로 누르는 면은 --touch-min(44).
     종전 「데스크톱 컨트롤 5단」(16~36)은 화면 사용 0 이라 지웠다(R-T4 · DS 부록 F-4). */
  --btn-h-sm:40px; --btn-h-md:44px; --btn-h-lg:52px;
  --input-h:44px;   /* 한 줄 입력 — 폰·터치 우선 화면은 --field-h-mobile(52) */
  --ctl-px:var(--space-10); --ctl-px-lg:var(--space-14); --ctl-gap:var(--space-8);

  /* ── 모바일 (§3-7 iOS 실측) ───────────────────────────── */
  --touch-min:44px;
  --tabbar-h:62px; --tabbar-h-total:99px; --toolbar-h:56px;
  --row-h:52px; --row-h-lg:68px; --field-h-mobile:52px;
  --toggle-w:64px; --toggle-h:28px;
  --segment-h:32px; --segment-item-w:80px; --segment-item-h:28px;

  /* ── 버튼 (§4-6 상태축 · §4-7 loading 계약) ────────────────── */
  --btn-radius:var(--radius-control);   /* 누르는 것 = 8 · 버튼 알약 없음(사장 결정 Q-2) */
  --social-login-radius:var(--r-12);    /* 외부 로그인 버튼 = 공급자 가이드 모양(사장 D-15 12px · DS §1-3-7 예외) */
  --btn-primary-bg:var(--theme-accent);       --btn-primary-fg:var(--text-on-accent);
  --btn-primary-bg-hover:var(--theme-accent-deep);
  --btn-secondary-bg:var(--surface-card);     --btn-secondary-fg:var(--text-strong);
  --btn-secondary-border:var(--border-input); --btn-secondary-border-hover:var(--border-strong);
  --btn-ghost-fg:var(--theme-accent);         --btn-ghost-bg-hover:var(--theme-accent-soft);
  --btn-danger-bg:var(--semantic-danger);     --btn-danger-fg:var(--white);
  --btn-danger-ghost-fg:var(--semantic-danger); --btn-danger-ghost-bg-hover:var(--semantic-danger-soft);
  --btn-disabled-bg:var(--gray-100);          --btn-disabled-fg:var(--text-disabled);
  /* loading = 액센트 유지, disabled 만 중립 회색 (§4-7) */

  /* ── 입력·폼 ──────────────────────────────────────────── */
  --input-bg:var(--surface-card); --input-border:var(--border-input);
  --input-radius:var(--radius-control); --input-px:var(--space-10);
  --input-error-fg:var(--semantic-danger); --input-error-border:var(--semantic-danger);

  /* ── 카드·레이아웃 (§3-8) ─────────────────────────────── */
  --card-pad:var(--space-18); --card-pad-lg:var(--space-24); --card-gap:var(--space-12); --card-gap-lg:var(--space-16);
  --section-gap:var(--space-32);
  /* 한 단 폭(DS §1-7) — 인증·코드 카드 400 / 폼 최대 폭(카드든 절이든)·안내 640 / 장문 문서·리포트 720 */
  --col-w-sm:400px; --col-w-md:640px; --col-w-lg:720px;
  --page-max:1200px; --page-max-wide:1440px;
  --page-pad-desktop:var(--space-24); --page-pad-mobile:var(--space-16);

  /* ── 관리자 셸 (§3-4 D-4 · 사이드바는 불투명 · 사장 결정 8zzz31 안 4b = 깊은 데일로 파랑 · 흰 글자 · 지금 메뉴 = 흰 탭)
     셸 = 테마 슬롯의 진한 단계 · 한 단계(마우스 올림 · 안쪽 선) = 테마 기본 단계 — 새 색 0 · 화이트라벨이면 학원 색의 진한
     단계가 셸이 된다. 「완료 = 액센트 파랑」(--status-done-fg)과 OKLab 거리 0.11(WCAG 1.54)로 다른 색으로 읽힌다(v2.3 결정 F
     개정 조건 · 종전 사장 결정 Q-1 「사이드바만 연회색」 대체). 일하는 면 · 상태 색 · 버튼·링크 파랑은 그대로.
     값 정본 = color-sian 바뀌는-토큰.md §6-0 b · §6-1 · 대비 실측 = evidence/redesign-s2/color-4b. */
  --sidebar-w:256px; --sidebar-bg:var(--theme-accent-deep);
  --sidebar-item-w:240px; --sidebar-item-h:40px;
  --sidebar-item-bg-hover:var(--theme-accent); --sidebar-item-bg-active:var(--surface-card);
  /* 셸 위 글자 · 선 · 초점 링 별칭 — styles.css 사이드바 규칙은 일반 의미 토큰 대신 이 이름만 쓴다
     (글자 흰 9.17 · 보조 연한 파랑 8.11 · 마우스 올림 위 5.98 · 5.28 · 오른쪽 경계 = 셸 색(면 색 차가 경계) · 찾기 칸 = 흰 칸) */
  --sidebar-fg:var(--text-on-accent); --sidebar-fg-sub:var(--theme-accent-soft);
  --sidebar-line:var(--theme-accent); --sidebar-edge:var(--theme-accent-deep);
  --sidebar-find-border:var(--surface-card); --sidebar-ring-focus:var(--ring-on-shell);
  --header-h:56px;
  /* 상단바 별칭 — 넓은 화면(1024 이상) = 흰 상단바 그대로(C-06) · 1023px 이하 위 띠 = 아래 폭 쿼리가 셸 색으로.
     경로 링크 마우스 올림 바탕은 시안 값 transparent 대신 상단바 바탕과 같은 값(모양 같음 · 알파 색 토큰 = 덮개 하나 R-T7). */
  --header-bg:var(--surface-card); --header-line:var(--border-line); --header-text-sub:var(--text-sub); --header-hover:var(--surface-sunken);
  --header-fg:var(--text-strong); --header-link:var(--theme-accent); --header-link-hover:var(--theme-accent-deep);
  --header-link-hover-bg:var(--header-bg); --header-link-underline:none; --header-ring-focus:var(--ring-focus);

  /* ── 표 (§4-2 P0) ─────────────────────────────────────── */
  --table-head-h:36px; --table-row-h:44px; --table-row-h-lg:56px; --table-cell-px:var(--space-12);   /* -lg = 두 줄 행(누구 + 무엇·언제) */
  --table-row-bg-hover:var(--gray-50); --table-row-bg-selected:var(--theme-accent-soft);

  /* ── Modal / BottomSheet / 서랍 (§4-7 D-1·D-2) ──────────── */
  --modal-w-sm:420px;      /* 확인용 소형 */
  --modal-w-md:760px;      /* 상세 뷰어용 중형 — 내부 스크롤 + 고정 헤더 */
  --modal-radius:var(--radius-panel); --modal-head-h:56px;
  --sheet-radius:var(--radius-panel); --sheet-grabber-w:36px; --sheet-grabber-h:5px;
  --drawer-w:480px;        /* 만들기·기록 서랍 · 태블릿 옆 패널(DS §1-7) */

  /* ── Toast (§4-7) ─────────────────────────────────────── */
  --toast-w:360px; --toast-radius:var(--radius-inner);
  --toast-offset:var(--space-16); --toast-dur:4s; --toast-dur-undo:8s; --toast-max:3;

  /* ── 배지·칩·게이지 ───────────────────────────────────── */
  --badge-h:24px; --chip-h:24px; --chip-h-lg:28px;   /* 배지 = 실물 24(R-T4 「토큰은 실물을 서술한다」 · DSX-V3-08) */
  --progress-h:8px; --progress-h-lg:10px; --progress-track:var(--gray-100);
  --ring-stroke:8px; --ring-track:var(--gray-100);

  /* ── 판정 타일 (확인 모드 판정 3분할 ChoiceTile · 07 순회 모드 시안 64px · DS §1-7) ── */
  --choice-tile-h:64px;

  /* ── 키오스크(공용 태블릿) 부품 묶음 (2-④ T-RD2-L4 · 통합 §6-6 · §11-2 · FA §3-6-3 가설 값 · DS-m22)
     첫 화면 주 버튼 · 숫자판 키 · 코드 숫자. 시계 = --type-clock-sm · 확인 = --choice-tile-h 재사용.
     값은 가설 — 3-②a 화면 레인이 실사용 시험(단계 4)에서 다시 본다. */
  --kiosk-btn-h:160px;                       /* 주 버튼 「등원 코드 입력」 높이 */
  --kiosk-key-w:105px; --kiosk-key-h:82px;   /* 숫자판 키 최소 크기(누르는 면) */
  --type-kiosk-code:var(--fw-bold) 48px/1.1 var(--font-en);   /* 코드 자리 숫자 — 글이 아니라 숫자 표시 */

  /* ── QueuePanel (v3 · DS §2-2 · RED-B-22) ─────────────────
     운영 대기열 행 = 선으로 나뉜 두 줄 행 — 표의 두 줄 행과 같은 높이(56). 레일·행 바탕 칠 0 —
     위급도는 맨 앞 주의 칩 「기한 지남」과 기한 글자가 말한다(V-2 · DS-m35).
     --queue-gap 은 확인 모드 · 태블릿 진행 목록이 쓴다(그 화면 레인 소유). */
  --queue-item-h:var(--table-row-h-lg); --queue-gap:var(--space-10);

  /* ── 대형 숫자 표시 (§3-3 램프 밖 · 숫자 전용)
     공용 태블릿 유휴 화면의 시계처럼 "글이 아니라 지표"로 읽히는 숫자에만.
     한글 텍스트에는 쓰지 않는다(램프 11단 유지). 트래킹 0 — 네거티브 금지. */
  --type-clock:var(--fw-bold) 92px/1.05 var(--font-en);
  --type-clock-sm:var(--fw-bold) 64px/1.05 var(--font-en);

  /* ── 기타 ─────────────────────────────────────────────── */
  --skeleton-base:var(--gray-100);
  --stepdot-size:8px; --stepdot-gap:var(--space-8);   /* 단계 점 = 8(V3-26 · LG-092) */
}

/* 폭 1023 이하 — 사이드바가 서랍으로 숨으면 길 찾기 자리 = 위 띠 → 사이드바와 같은 셸 색(사장 8zzz31 · 시안 4b 390).
   흰 글자 9.17 · 보조 연한 파랑 8.11 · 경로 링크 = 흰 글자 + 밑줄(색 대신 밑줄이 링크를 가른다) · 초점 = 셸 링.
   경계 값 1023 = base.css 폭 구간(R-T6)과 같다 — 상단바 별칭의 다른 판이라 별칭 정의 옆(이 파일)에 둔다. */
@media (max-width:1023px){:root{
  --header-bg:var(--theme-accent-deep); --header-line:var(--theme-accent-deep); --header-fg:var(--text-on-accent); --header-text-sub:var(--theme-accent-soft);
  --header-hover:var(--theme-accent); --header-link:var(--text-on-accent); --header-link-hover:var(--text-on-accent);
  --header-link-hover-bg:var(--theme-accent); --header-link-underline:underline; --header-ring-focus:var(--ring-on-shell);
}}