/* ══ hawk.css — 호크 콘솔 디자인 토큰 «단일 소스» · v2 (공통틀방 2026-10-04 · 대표 「데모의 틀·느낌으로 · 노랑만 쓰지 말고 · 색은 업주가 고르게」) ══
   기준 = docs/specs/onhi-benchmark/19_ui_tailux.md(실측 치수·색 · 팔레트는 Tailwind CSS 표준값). 화면은 값을 적지 않고 «뜻» 이름 var(--hk-…)과 hk-* 로 쓴다.
   고르는 것(값은 <html> 속성 — 안 적으면 기본): data-hk-primary = yellow*|hawk|blue|indigo|green|amber|purple|rose · data-hk-light = neutral*|slate|gray ·
     data-hk-dark = cinder*|black|mint|mirage|navy · data-hk-skin = bordered*|shadow · data-hk-mono(흑백) · 밝기 = data-theme = light*|dark(지금 밝기 단추 그대로).
   옛 토큰 이름(--bg-0 · --surface-1 · --line-1 · --ink-hi · --accent · --ok · --alarm …)은 별칭으로 살아 있다 — 화면을 안 고쳐도 색이 바뀐다.
   호크 노랑(--hk-brand)은 로고·브랜드 표식에만. 그림자는 --hk-shadow 한 가지(떠 있는 것 · 그림자형 카드 = --hk-shadow-card). 굵기는 400·500·600·700.
   싣는 법: sidenav.js 가 op.css «앞»에 싣는다. 사이드바 없는 화면(/pos·/kiosk·회원 화면)은 <head> 에 <link rel="stylesheet" href="/asset/hawk.css">.
   ⚠️ 글꼴 규칙(@font-face)은 여기 넣지 않는다 — 이 파일은 첫 그림을 막는다(작게 · 36KB 이하). Pretendard 는 /asset/pretendard.css. ══ */
/* ── 1. 뼈대(테마 무관) — 글꼴 · 글자 · 간격 · 모서리. 셀렉터가 html(0,0,1)인 이유 = 화면이 자기 :root 에 같은 이름을 적어 뒀으면 그쪽이 이긴다. ── */
html{
  --font-ui:Pretendard,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;--font-stat:var(--font-ui);
  --fs-title:20px;--fs-h2:20px;--fs-h3:16px;--fs-body:14px;--fs-small:13px;--fs-desc:12px;--fs-tiny:11px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  --gutter-pc:64px;--gutter-tablet:24px;--gutter-phone:16px;--content-max:1200px;
  --hk-radius:8px;--hk-radius-lg:12px;--hk-radius-sm:4px;--radius-row:6px;--radius-pill:999px;--hk-count:#f04438;--hk-on-count:#fff;
  --touch:44px;
}
/* 글자는 «한글 기준»(19_ui §3-5 ⭐ · 대표 2026-10-04 21:50 「온하이가 더 뚜렷해 보인다」) — 자간 −0.02em(14px 에서 −0.28px) · 글자색 #222 / 제목 #111(3절).
   ⭐2026-10-05 대표 「온하이 같은 또렷함이 아니다 · 노랑과 어울리는 파랑으로」 → 「볼드체는 최소로」 · 「온하이 글씨가 깔끔하다 — 흡수」: 또렷함은 색·대비로 낸다.
   굵기 700 = 화면 제목 · KPI 큰 숫자 «둘뿐» / 600 = 카드·구역 제목 · 고른 탭·잎 · 채운 주 버튼 / 500 = 그 밖의 버튼 · 표 머리 · 라벨 · 배지·칩 / 400 = 본문 · 셀 · 잎.
   크기 = 본문 14 · 화면 제목 20 · 카드 제목 16 · 표 머리 13(#555 · 옅은 바탕 · 높이 40) · 보조 글 13 · 설명 12 · 아주 작은 글 11.
   · 회색 4단 #222/#555/#6B6B6B/#AEAEAE · 바탕 기본 = 뉴트럴(푸른기 0) · 구분선 한 단 진하게(250) · 메인 색 기본 = 호크 옐로(600 #FDC607).
   폼 요소는 브라우저가 자간을 되돌려 놓으므로 물려받게 한다. 행간 1.5 는 기본꼴(hk-*)과 화면이 정한다 — 여기서 body 에 걸면 행간을 안 적은 화면 50개의 줄 높이가 한꺼번에 바뀐다. */
body{letter-spacing:-.02em}
button,input,select,textarea{letter-spacing:inherit}
/* ── 2. 팔레트 — 메인 = 윈도우 11 원색 열하나(대표 2026-10-13 20:0x 「파스텔 금지 · 온하이처럼 안 보이게 — 윈도우 원색 위주 + 커스텀 색」 · 기본 = 노랑 = 속성 없음 = 아래 html{} · 「사용자 지정」은 themestore 자유 색)
      · 밝은 바탕 3(기본 = 뉴트럴) · 어두운 바탕 5. 화면은 이 단계 이름(--p-600 …)을 직접 쓰지 않는다(3절의 뜻 이름으로).
      600 = 그 원색 그대로 · 다른 단은 themestore.ladder()(자유 색과 같은 계산) · *-rgb = 옅은 바탕·고리에 쓰는 세 숫자 · --p-main = 채움: 늘 600(원색 면).
      --p-on = 채움 위 글자 — 흰 글자가 4.5:1 이 되면 흰색, 안 되는 원색(노랑 · 주황 · 다홍 · 하늘)은 먹 #191817(로고 먹색). 글자로 쓰는 메인 색은 없다 — 밝은 화면의 링크 · 옅은 바탕 위 글자는 먹 #111(3절).
      파랑만 윈도우 11 기본 강조색 #0078D4(10 의 #0078D7 은 흰 글자 4.4989:1). ── */
html{--p-50:#fff9e8;--p-300:#ffd975;--p-400:#ffcd47;--p-500:#ffc01a;--p-600:#ffb900;--p-700:#cc9400;--p-800:#996f00;--p-rgb:255 185 0;--p5-rgb:255 192 26;--p4-rgb:255 205 71;--p8-rgb:153 111 0;--p-main:var(--p-600);--p-hover:var(--p-700);--p-on:#191817;--p-ink:var(--p-800)}
html[data-hk-primary=orange]{--p-50:#fff5e8;--p-300:#ffc175;--p-400:#ffac47;--p-500:#ff981a;--p-600:#ff8c00;--p-700:#cc7000;--p-800:#995400;--p-rgb:255 140 0;--p5-rgb:255 152 26;--p4-rgb:255 172 71;--p-on:#191817;--p-ink:var(--p-800)}
html[data-hk-primary=vermilion]{--p-50:#fef1e9;--p-300:#fbab7c;--p-400:#f98f50;--p-500:#f87324;--p-600:#f7630c;--p-700:#c64f0a;--p-800:#943b07;--p-rgb:247 99 12;--p5-rgb:248 115 36;--p4-rgb:249 143 80;--p-on:#191817;--p-ink:var(--p-800)}
html[data-hk-primary=red]{--p-50:#fdeaeb;--p-300:#f37e88;--p-400:#ee5461;--p-500:#ea2939;--p-600:#e81123;--p-700:#ba0e1c;--p-800:#8b0a15;--p-rgb:232 17 35;--p5-rgb:234 41 57;--p4-rgb:238 84 97;--p-on:#fff;--p-ink:var(--p-700)}
html[data-hk-primary=magenta]{--p-50:#fce8f5;--p-300:#f075c1;--p-400:#eb47ac;--p-500:#e61a98;--p-600:#e3008c;--p-700:#b60070;--p-800:#880054;--p-rgb:227 0 140;--p5-rgb:230 26 152;--p4-rgb:235 71 172;--p-on:#fff;--p-ink:var(--p-700)}
html[data-hk-primary=purple]{--p-50:#f4eaf6;--p-300:#bf82c7;--p-400:#a958b5;--p-500:#942ea2;--p-600:#881798;--p-700:#6d127a;--p-800:#520e5b;--p-rgb:136 23 152;--p5-rgb:148 46 162;--p4-rgb:169 88 181;--p-on:#fff;--p-ink:var(--p-700)}
html[data-hk-primary=blue]{--p-50:#e8f3fb;--p-300:#75b6e8;--p-400:#479ee0;--p-500:#1a86d8;--p-600:#0078d4;--p-700:#0060aa;--p-800:#00487f;--p-rgb:0 120 212;--p5-rgb:26 134 216;--p4-rgb:71 158 224;--p-on:#fff;--p-ink:var(--p-700)}
html[data-hk-primary=sky]{--p-50:#e8f6f9;--p-300:#75c8db;--p-400:#47b6cf;--p-500:#1aa3c3;--p-600:#0099bc;--p-700:#007a96;--p-800:#005c71;--p-rgb:0 153 188;--p5-rgb:26 163 195;--p4-rgb:71 182 207;--p-on:#191817;--p-ink:var(--p-800)}
html[data-hk-primary=teal]{--p-50:#e8f4f2;--p-300:#75bcb3;--p-400:#47a599;--p-500:#1a8e80;--p-600:#008272;--p-700:#00685b;--p-800:#004e44;--p-rgb:0 130 114;--p5-rgb:26 142 128;--p4-rgb:71 165 153;--p-on:#fff;--p-ink:var(--p-700)}
html[data-hk-primary=green]{--p-50:#e9f3e9;--p-300:#7eb87e;--p-400:#53a153;--p-500:#288928;--p-600:#107c10;--p-700:#0d630d;--p-800:#0a4a0a;--p-rgb:16 124 16;--p5-rgb:40 137 40;--p4-rgb:83 161 83;--p-on:#fff;--p-ink:var(--p-700)}
html[data-hk-primary=gray]{--p-50:#efefef;--p-300:#9e9d9c;--p-400:#7e7d7b;--p-500:#5e5c5a;--p-600:#4c4a48;--p-700:#3d3b3a;--p-800:#2e2c2b;--p-rgb:76 74 72;--p5-rgb:94 92 90;--p4-rgb:126 125 123;--p-on:#fff;--p-ink:var(--p-700)}
html{--hk-bb:0px}      /* 폰 하단바 높이(op.css body.has-snbb 가 덮는다 · 대표 10-15 11:2x) — 바닥에 붙는 부품(알림 · 되돌리기 · 클립 띠 · 현장 수납 띠)이 그만큼 올라간다 */
html{--n-50:#fafafa;--n-125:#f1f1f1;--n-100:#f5f5f5;--n-150:#ededed;--n-200:#e5e5e5;--n-250:#ddd;--n-300:#d4d4d4;--n-400:#a1a1a1;--n-500:#737373;--n-600:#525252;--n-800:#262626;--n-900:#171717}
html[data-hk-light=slate]{--n-50:#f8fafc;--n-125:#edf1f6;--n-100:#f1f5f9;--n-150:#e9eef5;--n-200:#e2e8f0;--n-250:#d6dfe9;--n-300:#cad5e2;--n-400:#90a1b9;--n-500:#62748e;--n-600:#45556c;--n-800:#1d293d;--n-900:#0f172b}
html[data-hk-light=gray]{--n-50:#fbf9f5;--n-125:#f1ece2;--n-100:#f6f2ea;--n-150:#ede7db;--n-200:#e6dfd1;--n-250:#dbd2c1;--n-300:#cfc5b2;--n-400:#a69a83;--n-500:#7a6e58;--n-600:#5a4f3d;--n-800:#2c2519;--n-900:#1c170f}
html{--d-50:#e6e7eb;--d-100:#d0d2db;--d-200:#b7bac4;--d-450:#383a41;--d-500:#2a2c32;--d-600:#232429;--d-700:#1c1d21;--d-750:#1a1b1f;--d-900:#0e0f11}
html[data-hk-dark=black]{--d-50:#ebebed;--d-100:#d9d9de;--d-200:#c5c5cc;--d-450:#333338;--d-500:#242428;--d-600:#1f1f21;--d-700:#131314;--d-750:#0c0c0d;--d-900:#000000}
/* 민트 · 미라지 · 네이비 = 바탕 단계(450~900) 색조 2배(신더에서 벌어진 만큼 × 2 · 대표 10-15 12:4x 「확 차이」) · 글자 단계(50~200)는 종전(읽기) */
html[data-hk-dark=mint]{--d-50:#e2f3ee;--d-100:#c3e3da;--d-200:#9cc9bc;--d-450:#127457;--d-500:#0c6048;--d-600:#09503d;--d-700:#043f2f;--d-750:#003123;--d-900:#02251b}
html[data-hk-dark=mirage]{--d-50:#ebe6fa;--d-100:#d1c8ef;--d-200:#b0a4dc;--d-450:#442ea3;--d-500:#362486;--d-600:#2d1e71;--d-700:#201557;--d-750:#1a0f49;--d-900:#140b37}
html[data-hk-dark=navy]{--d-50:#e3eaf9;--d-100:#c0cff0;--d-200:#97addd;--d-450:#225cd5;--d-500:#1a4cb6;--d-600:#15409d;--d-700:#0e3183;--d-750:#0a2971;--d-900:#081f57}
html[data-hk-mono]{--p-ink:var(--n-900);--p-main:var(--n-800);--p-hover:var(--n-900);--p-700:var(--n-900);--p-500:var(--n-500);--p-400:var(--d-100);--p-300:var(--d-100);--p-rgb:29 41 61;--p5-rgb:98 116 142;--p4-rgb:208 210 219;--p-on:#fff}
/* 테마와 무관한 것 — 브랜드 표식(호크 노랑). AI 아이덴티티 색(--ai-*)은 쓰는 화면이 /coach 하나라 그 화면 안으로 옮겼다(2026-10-05). */
:root{
  --hk-brand:#FFD400;--hk-accent:var(--hk-brand);--hk-on-accent:#111;
  /* 윈도우 11 원색 열하나(대표 10-13 20:0x) — 메인 색 팔레트(2절)와 같은 값을 «고정 색»으로 쓰는 자리(운영 묶음 띠 색 판 · 운영 아이콘 · 종목 색) — 매장 메인 색과 무관 · 어두운 화면도 같은 값 */
  --hk-win-yellow:#ffb900;--hk-win-orange:#ff8c00;--hk-win-vermilion:#f7630c;--hk-win-red:#e81123;--hk-win-magenta:#e3008c;--hk-win-purple:#881798;
  --hk-win-blue:#0078d4;--hk-win-sky:#0099bc;--hk-win-teal:#008272;--hk-win-green:#107c10;--hk-win-gray:#4c4a48;--yellow-dim:#F1E6B2;--gold-soft:rgba(255,212,0,.2);--gold-line:rgba(198,158,0,.42);--glass-blur:14px;--pur:#7A5BD6;
  /* 색을 섞어 쓰는 이름(19_ui §3-7 「컬러풀하게」) — 메인 색은 행동·선택·링크에만, 나머지는 «뜻»으로. 값(--hk-c1…c6 = 인디고·그린·앰버·로즈·퍼플·스카이)은 3·4절.
     그래프 계열 = 메인 색 · 민트 · 앰버 · 로즈 · 퍼플 · 스카이. 상태 뜻색 = 어디서나 같은 색(출석 attend 그린 · 지각 late 앰버 · 결석 absent 로즈 · 보강 makeup 퍼플 ·
     휴원 hold 슬레이트 · 체험 trial 스카이 · 미납 unpaid 로즈 · 완납 paid 그린 · 예약 booked 인디고 · 안 냄(기한 전) due 앰버 · 환불 refund 슬레이트)
     — 이름마다 색 · -soft(옅은 바탕) · -ink(그 위 글자). 상태 이름은 아래 별칭 블록에 있다(어두운 섬 .hk-dark 안에서도 그 자리의 값으로 다시 풀리게).
     그라데이션은 이 한 가지뿐(강조 카드·환영 띠 1종 · 그 위 글자 = --hk-on-primary). */
  --hk-chart-1:var(--hk-heading);--hk-chart-2:var(--hk-border-strong);--hk-chart-3:var(--p-main);--hk-chart-4:var(--hk-muted);--hk-chart-5:var(--hk-faint);--hk-chart-6:var(--hk-border);
  --hk-primary-grad:var(--p-main);
}
/* ── 3. «뜻» 이름(19_ui_tailux.md §3-6 계약) — 밝은 화면(기본). 캔버스: 테두리형 = 흰색 / 그림자형 = 50.
      --hk-surface = 카드 면(테두리형은 투명) · --hk-card = 겹쳐 뜨는 것(확인 상자·메뉴)처럼 «불투명»해야 하는 면.
      --hk-muted 는 500(4.8:1) — 계약 표의 400(2.6:1)은 읽는 글에 흐려서 --hk-faint(자리표시·장식)로 따로 둔다.
      본문 #222 · 제목 #111 · 메뉴 #333 은 바탕 팔레트(슬레이트·그레이·뉴트럴)와 무관하게 고정이다 — 슬레이트 700(#314158)은 한글이 흐려 보였다. ── */
html,html[data-theme=light]{
  color-scheme:light;--hk-bg:#fff;--hk-surface:#fff;--hk-card:#fff;--hk-surface-2:#f5f5f5;--hk-well:#f5f5f5;--hk-th-bg:#f5f5f5;
  --hk-border:rgba(0,0,0,.06);--hk-border-strong:rgba(0,0,0,.12);--hk-card-border:rgba(0,0,0,.1);
  --hk-text:#111;--hk-heading:#111;--hk-muted:#555;--hk-faint:#6b6b6b;--hk-disabled:#a6a69e;--sg:#007a55;--sgs:#e5f4ec;--so:#9c5400;--sos:#fbf1da;--sr:#b42318;--srs:#fbeae6;--sv:#6d28d9;--svs:#f0eafb;--hk-menu:#555;
  --hk-primary:var(--p-main);--hk-primary-hover:var(--p-hover);--hk-on-primary:var(--p-on);--hk-primary-soft:rgb(var(--p-rgb)/.1);--hk-on-primary-soft:#111;--hk-primary-line:rgb(var(--p-rgb)/.3);
  --hk-link:#111;--hk-focus:var(--p-600);--hk-ring:rgb(var(--p-rgb)/.5);--hk-btn-soft:var(--n-150);--hk-on-btn-soft:var(--n-900);
  --hk-success:#007a55;--hk-warning:#f59200;--hk-danger:#b42318;--hk-info:#0084d1;--hk-secondary:#e000ad;--hk-on-status:#fff;
  --hk-success-soft:rgba(0,128,85,.07);--hk-warning-soft:rgba(213,128,0,.09);--hk-danger-soft:rgba(227,42,0,.07);--hk-info-soft:rgba(0,99,170,.07);--hk-secondary-soft:rgba(184,0,142,.07);
  --hk-on-success-soft:#007a55;--hk-on-warning-soft:#a35800;--hk-on-danger-soft:#cf2900;--hk-on-info-soft:#0069a8;--hk-on-secondary-soft:#b8008c;
  --hk-shadow:0 4px 16px rgb(25 31 40/.08);--hk-shadow-card:none;--hk-backdrop:rgba(17,17,17,.5);--hk-scrim:rgba(255,255,255,.92);
  --hk-c1:#4f39f6;--hk-c2:#00a63e;--hk-c3:#e17100;--hk-c4:#ec003f;--hk-c5:#9810fa;--hk-c6:#0084d1;
  --hk-c1-ink:#432dd7;--hk-c2-ink:#008236;--hk-c3-ink:#bb4d00;--hk-c4-ink:#c70036;--hk-c5-ink:#8200db;--hk-c6-ink:#0069a8;
  --hk-c1-soft:rgb(79 57 246/.1);--hk-c2-soft:rgb(0 166 62/.1);--hk-c3-soft:rgb(225 113 0/.1);--hk-c4-soft:rgb(236 0 63/.1);--hk-c5-soft:rgb(152 16 250/.1);--hk-c6-soft:rgb(0 132 209/.1);
}
/* ── 4. 어두운 화면 — 바탕 900 · 테두리 600 · 본문 200 · 제목 100 · 입력 테두리 450 · 강조 글자는 메인 300. 그림자 없이 면으로 구분한다.
      상태색은 밝은 변형 — 그 위 글자는 어두운 색(--hk-on-status).
      .hk-dark = 밝은 화면 안의 «늘 어두운 섬»(영상 재생 무대 — 영상·분석 그림은 어두운 바탕에서 본다). 그 안의 hk-* 는 어두운 화면 값으로 그려진다. ── */
.hk-dark:not(.hk-hero):not(.hk-detail-head):not(.hk-dash-hello),html[data-theme=dark]{      /* 단순 결 v3 — 머리 띠 · 상세 머리 · 환영 띠는 섬에서 뺀다(흰 카드) · 영상 무대(.hk-dark 그 밖)는 어둡게 그대로 */
  color-scheme:dark;--hk-bg:var(--d-900);--hk-surface:var(--d-750);--hk-card:var(--d-900);--hk-surface-2:var(--d-600);--hk-well:var(--d-750);--hk-th-bg:var(--d-600);
  --hk-border:var(--d-500);--hk-border-strong:var(--d-450);--hk-card-border:var(--d-500);
  --hk-text:#e4e5ea;--hk-heading:#f2f3f5;--hk-muted:#aeaeae;--hk-faint:#8e8e8e;--hk-disabled:#555;--sg:#5bd08c;--sgs:rgb(91 208 140/.13);--so:#fdc607;--sos:rgb(253 198 7/.13);--sr:#ff8a8a;--srs:rgb(255 138 138/.13);--sv:#a78bfa;--svs:rgb(167 139 250/.16);--hk-menu:var(--d-200);
  --hk-primary:var(--p-main);--hk-primary-hover:var(--p-500);--hk-on-primary:var(--p-on);--hk-primary-soft:rgb(var(--p4-rgb)/.15);--hk-on-primary-soft:var(--p-300);--hk-primary-line:rgb(var(--p4-rgb)/.35);
  --hk-link:var(--p-400);--hk-focus:var(--p-500);--hk-ring:rgb(var(--p5-rgb)/.5);--hk-btn-soft:var(--d-500);--hk-on-btn-soft:var(--d-50);
  --hk-success:#00bc7d;--hk-warning:#ffa71a;--hk-danger:#ff6933;--hk-info:#00a6f4;--hk-secondary:#ff2ecf;--hk-on-status:var(--d-900);
  --hk-success-soft:rgba(0,188,125,.15);--hk-warning-soft:rgba(255,167,26,.15);--hk-danger-soft:rgba(255,105,51,.15);--hk-info-soft:rgba(0,166,244,.15);--hk-secondary-soft:rgba(255,46,207,.15);
  --hk-on-success-soft:#00bc7d;--hk-on-warning-soft:#ffa71a;--hk-on-danger-soft:#ff6933;--hk-on-info-soft:#00a6f4;--hk-on-secondary-soft:#ff2ecf;
  --hk-shadow:none;--hk-shadow-card:none;--hk-backdrop:rgba(0,0,0,.6);--hk-scrim:rgba(14,15,17,.9);
  --hk-c1:#7c86ff;--hk-c2:#05df72;--hk-c3:#ffb900;--hk-c4:#ff637e;--hk-c5:#c27aff;--hk-c6:#00a6f4;
  --hk-c1-ink:var(--hk-c1);--hk-c2-ink:var(--hk-c2);--hk-c3-ink:var(--hk-c3);--hk-c4-ink:var(--hk-c4);--hk-c5-ink:var(--hk-c5);--hk-c6-ink:var(--hk-c6);
  --hk-c1-soft:rgb(124 134 255/.15);--hk-c2-soft:rgb(5 223 114/.15);--hk-c3-soft:rgb(255 185 0/.15);--hk-c4-soft:rgb(255 99 126/.15);--hk-c5-soft:rgb(194 122 255/.15);--hk-c6-soft:rgb(0 166 244/.15);
}
/* 카드 모양(대표 10-15 12:3x 「테두리 · 그림자 차이를 모르겠다 → 차이가 좀 나게」) — 테두리(기본) = 1px 또렷한 선 + 그림자 0 · 그림자 = 선 0 + 떠 있는 그림자 + 바탕 살짝 밝게.
   밝은 화면 값은 아래 «v4 바탕» 줄 뒤(같은 무게라 뒤가 이긴다) · 어두운 화면 = 카드 면 700 + 짙은 그림자. 흑백의 어두운 화면은 밝은 채움. */
html[data-hk-skin=shadow]{--hk-surface:#fff}
html[data-hk-skin=shadow][data-theme=dark]{--hk-bg:var(--d-900);--hk-surface:var(--d-700);--hk-card:var(--d-700);--hk-card-border:transparent;--hk-shadow-card:0 6px 24px rgb(0 0 0/.5)}
html[data-hk-mono] .hk-dark,html[data-hk-mono][data-theme=dark]{--hk-primary:var(--d-100);--hk-primary-hover:var(--d-50);--hk-on-primary:var(--d-900)}
/* 채움 위 글자는 팔레트의 --p-on(2절) — 밝게 · 어둡게 · 어두운 섬(.hk-dark) 전부. 스위치 손잡이(그 이름을 쓴다)는 «글자»가 아니라 늘 흰색(먹 글자 원색에서 꺼짐 · 성공색 스위치까지 먹색이 됐다) ·
   흑백은 제 규칙(어두운 흑백 = 밝은 채움 위 어두운 손잡이). 종전 「호크 옐로」 특례 셀렉터(html:not([data-hk-primary]) …)는 2026-10-13 원색 팔레트와 함께 걷었다. */
html:not([data-hk-mono]) .hk-switch{--hk-on-primary:#fff}
/* 카운터 결(대표 2026-10-09 · 현장 수납 /pos · 키오스크 /kiosk) — 주 단추 · 강조 = 호크 노랑 면 + 먹 글자. 그 매장의 메인 색 대신 «이 칸 안에서만» — 속성 data-hk-counter(팔레트 속성 data-hk-primary 와 같은 꼴)
   (머리띠 · 메뉴는 매장 색 그대로). 옛 이름(--accent*)도 여기서 다시 잇는다 — :root 에서 이미 계산된 별칭은 아래로 물려받아 바뀌지 않는다. */
[data-hk-counter]{--hk-primary:#FDC607;--hk-primary-hover:#E5B20D;--hk-on-primary:#191817;--hk-primary-soft:rgb(253 198 7/.2);--hk-on-primary-soft:#806000;--hk-primary-line:rgb(253 198 7/.6);--hk-link:#806000;--hk-focus:#806000;--hk-ring:rgb(128 96 0/.45);--accent:var(--hk-primary);--accent-ink:var(--hk-on-primary);--accent-hi:var(--hk-primary-hover);--accent-text:var(--hk-on-primary-soft);--accent-soft:var(--hk-primary-soft);--accent-glow:var(--hk-ring);--accent-line:var(--hk-primary-line)}
[data-theme=dark] [data-hk-counter],.hk-dark [data-hk-counter]{--hk-primary-hover:#FED651;--hk-primary-soft:rgb(253 198 7/.16);--hk-on-primary-soft:#FDC607;--hk-primary-line:rgb(253 198 7/.5);--hk-link:#FED651;--hk-focus:#FDC607;--hk-ring:rgb(253 198 7/.45)}
/* 옛 이름 → 뜻 이름(별칭). 셀렉터에 html[data-theme] 를 같이 적는 이유 = 종전처럼 화면의 :root 선언보다 앞서게(0,1,1). 새 코드는 --hk-… 를 쓴다. */
.hk-dark,html,html[data-theme]{
  --hk-status-attend:var(--hk-c2);--hk-status-attend-soft:var(--sgs);--hk-status-attend-ink:var(--sg);--hk-status-late:var(--hk-c3);--hk-status-late-soft:var(--sos);--hk-status-late-ink:var(--so);--hk-status-absent:var(--hk-c4);--hk-status-absent-soft:var(--srs);--hk-status-absent-ink:var(--sr);--hk-status-makeup:var(--hk-c5);--hk-status-makeup-soft:var(--svs);--hk-status-makeup-ink:var(--sv);--hk-status-trial:var(--hk-c6);--hk-status-trial-soft:var(--hk-c6-soft);--hk-status-trial-ink:var(--hk-c6-ink);--hk-status-unpaid:var(--hk-c4);--hk-status-unpaid-soft:var(--srs);--hk-status-unpaid-ink:var(--sr);--hk-status-paid:var(--hk-c2);--hk-status-paid-soft:var(--sgs);--hk-status-paid-ink:var(--sg);--hk-status-booked:var(--hk-c1);--hk-status-booked-soft:var(--hk-c1-soft);--hk-status-booked-ink:var(--hk-c1-ink);--hk-status-due:var(--hk-c3);--hk-status-due-soft:var(--sos);--hk-status-due-ink:var(--so);--hk-status-hold:var(--hk-muted);--hk-status-hold-soft:var(--hk-surface-2);--hk-status-hold-ink:var(--hk-menu);--hk-status-refund:var(--hk-muted);--hk-status-refund-soft:var(--hk-surface-2);--hk-status-refund-ink:var(--hk-menu);--hk-status-sent:var(--hk-c2);--hk-status-sent-soft:var(--sgs);--hk-status-sent-ink:var(--sg);--hk-status-failed:var(--hk-c4);--hk-status-failed-soft:var(--srs);--hk-status-failed-ink:var(--sr);--hk-status-pending:var(--hk-c3);--hk-status-pending-soft:var(--sos);--hk-status-pending-ink:var(--so);
  --bg-0:var(--hk-bg);--bg-1:var(--hk-surface-2);--bg-deep:var(--hk-surface-2);--bg-well:var(--hk-well);--surface-1:var(--hk-card);--surface-2:var(--hk-surface-2);--surface-3:var(--hk-btn-soft);
  --line-1:var(--hk-border);--line:var(--hk-border);--line-2:var(--hk-border-strong);--line-focus:var(--hk-focus);--ink-hi:var(--hk-heading);--ink:var(--hk-text);--ink-2:var(--hk-menu);--ink-3:var(--hk-muted);--ink-4:var(--hk-faint);
  --accent:var(--hk-primary);--accent-ink:var(--hk-on-primary);--accent-hi:var(--hk-primary-hover);--accent-text:var(--hk-on-primary-soft);--accent-soft:var(--hk-primary-soft);--accent-glow:var(--hk-ring);--accent-line:var(--hk-primary-line);
  --ok:var(--hk-on-success-soft);--online:var(--hk-success);--online-hi:var(--hk-on-success-soft);--online-soft:var(--hk-success-soft);--offline:var(--hk-faint);
  --red:var(--hk-on-danger-soft);--alarm:var(--hk-on-danger-soft);--warn:var(--hk-on-warning-soft);--alarm-soft:var(--hk-danger-soft);--warn-soft:var(--hk-warning-soft);--alarm-glow:var(--hk-danger-soft);
  --hvac:var(--hk-on-info-soft);--hvac-soft:var(--hk-info-soft);--saving:var(--hk-on-success-soft);--saving-soft:var(--hk-success-soft);
  --scrim:var(--hk-scrim);--backdrop:var(--hk-backdrop);--shadow-card:var(--hk-shadow-card);--shadow-pop:var(--hk-shadow);--luxe-shadow:var(--hk-shadow-card);--luxe-shadow-sm:var(--hk-shadow-card);
  --glass-bg:var(--hk-card);--glass-2:var(--hk-card);--glass-line:var(--hk-border);--gold:var(--hk-brand);--yellow:var(--hk-brand);
  --radius:var(--hk-radius);--radius-lg:var(--hk-radius-lg);
}

/* ── 5. 기본꼴(hk-*) — 값은 뜻 이름만. 색 바꾸기 = is-ok · is-bad · is-warn · is-info · is-second(버튼·배지·스위치·상자·KPI 공통).
      버튼: (기본)옅은 · is-main 채움 · is-line 테두리 · is-text 글자만 · is-soft 옅은 색 · 크기 is-xs 24 · is-sm 28 · is-md 32 · (기본 36) · is-lg 40 · is-pill · is-icon.
      손가락 화면(폰·태블릿)에서는 버튼·입력·탭·칩이 44px 까지 커진다(기본꼴은 is-xs · is-sm 을 빼지만 콘솔 틀 op.css #36 이 button · a.hk-btn 은 크기와 상관없이 44 로 올린다). 보기 = tests/demo/kit.html(/_t?to=/_demo/kit). ── */
/* hidden 속성은 기본꼴의 display 보다 세다 — 닫아 둔 창(.hk-dialog-back[hidden])·버튼이 보이지 않게(사이드바 없는 화면에는 op.css 의 같은 줄이 없다) */
[hidden]{display:none!important}
:where(b,strong){font-weight:500}  /* 맨 b · 기본 700 = 제목 굵기 */
.hk-btn,.hk-badge,.hk-switch,.hk-box,.hk-kpi{--c:var(--hk-primary);--ch:var(--hk-primary-hover);--co:var(--hk-on-primary);--ct:var(--hk-on-primary-soft);--cs:var(--hk-primary-soft)}
.hk-btn.is-ok,.hk-badge.is-ok,.hk-switch.is-ok,.hk-box.is-ok,.hk-kpi.is-ok{--c:var(--hk-success);--ch:var(--hk-on-success-soft);--co:var(--hk-on-status);--ct:var(--hk-on-success-soft);--cs:var(--hk-success-soft)}
.hk-btn.is-bad,.hk-badge.is-bad,.hk-switch.is-bad,.hk-box.is-bad,.hk-kpi.is-bad{--c:var(--hk-danger);--ch:var(--hk-on-danger-soft);--co:var(--hk-on-status);--ct:var(--hk-on-danger-soft);--cs:var(--hk-danger-soft)}
.hk-btn.is-warn,.hk-badge.is-warn,.hk-switch.is-warn,.hk-box.is-warn,.hk-kpi.is-warn{--c:var(--hk-warning);--ch:var(--hk-on-warning-soft);--co:var(--hk-on-status);--ct:var(--hk-on-warning-soft);--cs:var(--hk-warning-soft)}
.hk-btn.is-info,.hk-badge.is-info,.hk-switch.is-info,.hk-box.is-info,.hk-kpi.is-info{--c:var(--hk-info);--ch:var(--hk-on-info-soft);--co:var(--hk-on-status);--ct:var(--hk-on-info-soft);--cs:var(--hk-info-soft)}
.hk-btn.is-second,.hk-badge.is-second,.hk-box.is-second,.hk-kpi.is-second{--c:var(--hk-secondary);--ch:var(--hk-on-secondary-soft);--co:var(--hk-on-status);--ct:var(--hk-on-secondary-soft);--cs:var(--hk-secondary-soft)}
/* 여섯 색 물들이기(§3-7) — is-c1…is-c6: 배지·상자·KPI·아바타가 옅은 바탕(-soft) + 진한 글자(-ink)로. 한 줄에 같은 색을 둘 쓰지 않는다 · 아바타는 이름으로 여섯 중 하나. */
[class*=hk-].is-c1{--c:var(--hk-c1);--ch:var(--hk-c1-ink);--co:var(--hk-on-status);--ct:var(--hk-c1-ink);--cs:var(--hk-c1-soft)}
[class*=hk-].is-c2{--c:var(--hk-c2);--ch:var(--hk-c2-ink);--co:var(--hk-on-status);--ct:var(--hk-c2-ink);--cs:var(--hk-c2-soft)}
[class*=hk-].is-c3{--c:var(--hk-c3);--ch:var(--hk-c3-ink);--co:var(--hk-on-status);--ct:var(--hk-c3-ink);--cs:var(--hk-c3-soft)}
[class*=hk-].is-c4{--c:var(--hk-c4);--ch:var(--hk-c4-ink);--co:var(--hk-on-status);--ct:var(--hk-c4-ink);--cs:var(--hk-c4-soft)}
[class*=hk-].is-c5{--c:var(--hk-c5);--ch:var(--hk-c5-ink);--co:var(--hk-on-status);--ct:var(--hk-c5-ink);--cs:var(--hk-c5-soft)}
[class*=hk-].is-c6{--c:var(--hk-c6);--ch:var(--hk-c6-ink);--co:var(--hk-on-status);--ct:var(--hk-c6-ink);--cs:var(--hk-c6-soft)}
.hk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:36px;padding:0 20px;border:1px solid transparent;border-radius:var(--hk-radius);background:var(--hk-btn-soft);color:var(--hk-on-btn-soft);font:500 var(--fs-body)/1 var(--font-ui);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s,border-color .12s}
.hk-btn:hover{background:var(--hk-border-strong)}
.hk-btn:focus-visible{outline:0;box-shadow:0 0 0 2px var(--hk-ring)}
.hk-btn.is-main{background:var(--c);color:var(--co);font-weight:600}
.hk-btn.is-main:hover{background:var(--ch)}
.hk-btn.is-line{height:38px;background:var(--hk-card);border-color:var(--hk-border-strong)}
.hk-btn.is-line:hover,.hk-btn.is-text:hover{background:var(--hk-surface-2)}
.hk-btn.is-text{background:none;color:var(--hk-text)}
.hk-btn.is-soft{background:var(--cs);color:var(--ct)}
.hk-btn.is-ink{background:var(--hk-heading);color:var(--hk-card)}
.hk-btn.is-ink:hover{background:var(--hk-text)}
.hk-btn.is-bad:not(.is-main),.hk-btn.is-ok:not(.is-main),.hk-btn.is-warn:not(.is-main),.hk-btn.is-info:not(.is-main){color:var(--ct)}
.hk-btn.is-xs{height:24px;padding:0 8px;border-radius:var(--hk-radius-sm);font-size:var(--fs-desc)}
.hk-btn.is-sm{height:28px;padding:0 12px;font-size:var(--fs-small)}
.hk-btn.is-md{height:32px;padding:0 14px}
.hk-btn.is-lg{height:40px}
.hk-btn.is-pill{border-radius:var(--radius-pill)}
.hk-btn.is-icon{width:32px;height:32px;padding:0}
.hk-btn:disabled,.hk-btn[aria-disabled=true]{opacity:.45;cursor:default;pointer-events:none}
/* 누름 = 우리 색 반응(대표 10-16 피드백 2 「누를 때 우리 색 반응 0」 · 하단바와 같은 결 · 영상방 검수 ⑤) — 바탕이 옅은 단추(기본 · 선 · 글 · 옅음)는 그 단추 색(없으면 메인 색) 옅은 바탕 ·
   꽉 찬 단추(메인 · 먹)는 한 단 어둡게 — 둘 다 살짝 눌림(.97) · 0.12초 */
.hk-btn{-webkit-tap-highlight-color:transparent}
.hk-btn:not(.is-main):not(.is-ink):active:not(:disabled){background:color-mix(in srgb,var(--c,var(--hk-primary)) 16%,var(--hk-card));transform:scale(.97);transition:background-color .12s,transform .12s}
.hk-btn:is(.is-main,.is-ink):active:not(:disabled){filter:brightness(.9);transform:scale(.97);transition:filter .12s,transform .12s}
.hk-card{box-sizing:border-box;padding:var(--sp-4) 20px;border:1px solid var(--hk-card-border);border-radius:var(--hk-radius-lg);background:var(--hk-surface);box-shadow:var(--hk-shadow-card)}
.hk-card-t{margin:0 0 var(--sp-3);font-size:var(--fs-h3);font-weight:600;line-height:1.4;color:var(--hk-heading)}
.hk-box{padding:var(--sp-4);border-radius:var(--hk-radius-lg);background:var(--hk-surface-2);color:var(--hk-text)}
.hk-box.is-soft{background:var(--cs);color:var(--ct)}
.hk-box.is-fill{background:var(--c);color:var(--co);font-size:18px;font-weight:500}
.hk-kpi{box-sizing:border-box;padding:20px;border:1px solid var(--hk-card-border);border-radius:var(--hk-radius-lg);background:var(--hk-surface);box-shadow:var(--hk-shadow-card)}
.hk-kpi-n{font-size:var(--fs-small);color:var(--hk-muted)}
.hk-kpi-v{margin-top:var(--sp-2);font-size:var(--fs-h2);font-weight:700;line-height:1.2;color:var(--hk-heading)}
.hk-kpi.is-tint .hk-kpi-v{color:var(--ct)}
.hk-kpi-d{margin-top:var(--sp-1);font-size:var(--fs-small);color:var(--hk-muted)}
.hk-kpi-d.is-up{color:var(--hk-on-success-soft)}
.hk-kpi-d.is-down{color:var(--hk-on-danger-soft)}
.hk-label{display:block;margin:0 0 6px;font-size:var(--fs-body);font-weight:500;color:var(--hk-text)}
.hk-hint{margin:6px 0 0;font-size:var(--fs-desc);line-height:1.5;color:var(--hk-faint)}
.hk-hint.is-bad{color:var(--hk-on-danger-soft)}
.hk-input{box-sizing:border-box;width:100%;height:38px;padding:0 12px;border:1px solid var(--hk-border-strong);border-radius:var(--hk-radius);background:var(--hk-card);color:var(--hk-heading);font:var(--fs-body)/1.3 var(--font-ui)}
.hk-input::placeholder{color:var(--hk-disabled)}
.hk-input:focus{outline:0;border-color:var(--hk-focus);box-shadow:0 0 0 2px var(--hk-ring)}
.hk-input.is-sm{height:32px;font-size:var(--fs-desc)}
.hk-input.is-bar{height:36px}
.hk-input.is-bad,.hk-input[aria-invalid=true]{border-color:var(--hk-danger)}
.hk-input:is(textarea){height:auto;min-height:76px;padding:8px 12px;line-height:1.5}
.hk-input:disabled{background:var(--hk-surface-2);color:var(--hk-muted)}
.hk-input:is(select) option{background:var(--hk-card);color:var(--hk-heading)}
/* 리스트박스(<select>) 목록 = 페이지 안에 그린다(대표 10-15 14:2x Y4 「누르면 검정으로 나왔다가 리스트가 보인다」 · 크롬 · 엣지 135+ base-select).
   원인(실측 · 크롬 155 · 윈도 다크 모드): OS 기본 목록 창이 다크 바탕으로 약 0.2초 먼저 칠해진 뒤 흰 목록이 그려진다 — 페이지 color-scheme 으로는 안 바뀐다.
   base-select 는 목록을 맨 위 층(top layer)에 바로 그려 OS 창이 없다 · 못 하는 브라우저(사파리 · 옛 크롬)는 종전 그대로 · 터치 기기는 selectfix.js 가 먼저 받는다 */
@supports (appearance:base-select){
select,::picker(select){appearance:base-select}
select{align-items:center}
select::picker-icon{content:"";width:7px;height:7px;margin:0 3px 3px auto;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);color:var(--hk-muted)}
::picker(select){margin-block:4px;padding:4px;border:1px solid var(--hk-border-strong);border-radius:var(--hk-radius);background:var(--hk-card);color:var(--hk-heading);box-shadow:var(--hk-shadow);max-block-size:min(360px,60vh)}
select option{padding:8px 12px;border-radius:var(--hk-radius-sm)}
select option:hover,select option:focus-visible{background:var(--hk-surface-2);outline:0}
select option:checked{background:var(--hk-primary-soft);font-weight:600}
select option::checkmark{display:none}
}
.hk-check,.hk-radio{-webkit-appearance:none;appearance:none;flex:none;box-sizing:border-box;width:18px;height:18px;margin:0;border:1px solid var(--hk-faint);border-radius:var(--hk-radius-sm);background:transparent center/12px no-repeat;vertical-align:-4px;cursor:pointer}
.hk-check:checked{border-color:var(--hk-primary);background-color:var(--hk-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E")}
.hk-radio{border-radius:50%}
.hk-radio:checked{border:5px solid var(--hk-primary)}
.hk-check:focus-visible,.hk-radio:focus-visible,.hk-switch:focus-visible{outline:0;box-shadow:0 0 0 2px var(--hk-ring)}
.hk-switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:40px;height:20px;margin:0;border-radius:var(--radius-pill);background:var(--hk-border-strong);vertical-align:-5px;cursor:pointer;transition:background-color .15s}
.hk-switch::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--hk-on-primary);transition:transform .15s}
.hk-switch:checked{background:var(--c)}
.hk-switch:checked::before{transform:translateX(20px)}
.hk-badge{--c:var(--hk-muted);--ct:var(--hk-on-btn-soft);--cs:var(--hk-border);display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:20px;padding:0 8px;border-radius:var(--radius-pill);background:var(--cs);color:var(--ct);font:500 var(--fs-desc)/1 var(--font-ui);white-space:nowrap}
.hk-badge.is-pri{--c:var(--hk-primary);--ct:var(--hk-on-primary-soft);--cs:var(--hk-primary-soft)}
.hk-badge.is-main{background:var(--c);color:var(--co)}
.hk-badge.is-line{height:22px;background:none;border:1px solid var(--ct);border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.hk-badge.is-pill{border-radius:var(--radius-pill)}
/* 저장 공간 단계(대표 10-15 14:4x 「초록이 메인 색 · 넉넉하지 않을 때만 노랑 · 주황 · 빨강」) — 막대 · 칩 · 글이 같은 색.
   화면은 data-disk="1~4" 만 단다 · 경계 70 · 85 · 95% (/storage · /hawk 같은 값 — tests/test_disk_levels.py) */
[data-disk]{--disk:var(--hk-success);--disk-soft:var(--hk-success-soft)}
[data-disk="2"]{--disk:var(--hk-win-yellow);--disk-soft:var(--hk-warning-soft)}
[data-disk="3"]{--disk:var(--hk-win-orange);--disk-soft:var(--hk-warning-soft)}
[data-disk="4"]{--disk:var(--hk-danger);--disk-soft:var(--hk-danger-soft)}
.hk-badge[data-disk]{background:var(--disk-soft);color:var(--hk-heading)}
.hk-badge[data-disk]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--disk)}
.hk-chip{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:32px;padding:0 12px;border:1px solid var(--hk-border-strong);border-radius:var(--radius-pill);background:var(--hk-card);color:var(--hk-text);font:500 var(--fs-desc)/1 var(--font-ui);white-space:nowrap;cursor:pointer}
.hk-chip:hover{background:var(--hk-surface-2)}
.hk-chip[aria-pressed=true]{background:var(--hk-heading);border-color:var(--hk-heading);color:var(--hk-card)}
.hk-tabs{display:flex;gap:0;border-bottom:1px solid var(--hk-border);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.hk-tab{flex:none;height:38px;padding:0 14px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;color:var(--hk-menu);font:500 var(--fs-body)/1 var(--font-ui);white-space:nowrap;cursor:pointer}
.hk-tab:hover{color:var(--hk-heading)}
.hk-tab[aria-selected=true]{color:var(--hk-heading);border-bottom-color:var(--hk-heading);font-weight:600}
/* 탭의 빨간 숫자 — 그 탭에 «오늘 할 것»이 있을 때만(대표 2026-10-11 22:1x · 앱 홈 타일 배지 꼴 · 99+ · 트리의 .snv-cnt 와 같은 빨강).
   건수(.hk-list-n · 회색 · 늘 보인다)와 다르다 — 알릴 것이 있을 때만 붙고 0 이면 없다. 붙이는 손 = HawkUI.tabCount(ui.js) */
.hk-tab-n{display:inline-block;box-sizing:border-box;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:var(--radius-pill);background:var(--hk-count);color:var(--hk-on-count);font:600 var(--fs-desc)/18px var(--font-ui);font-style:normal;text-align:center;vertical-align:middle}
.hk-tabs.is-pills{gap:4px;padding:4px;border:0;border-radius:var(--hk-radius-lg);background:var(--hk-surface-2)}
.hk-tabs.is-pills .hk-tab{height:32px;margin:0;border:0;border-radius:var(--hk-radius)}
.hk-tabs.is-pills .hk-tab[aria-selected=true]{background:var(--hk-card);color:var(--hk-heading)}
.hk-tabs.is-seg{gap:0;border:1px solid var(--hk-border-strong);border-radius:var(--hk-radius);width:max-content;max-width:100%}
.hk-tabs.is-seg .hk-tab{height:34px;margin:0;border:0;color:var(--hk-text)}
.hk-tabs.is-seg .hk-tab+.hk-tab{border-left:1px solid var(--hk-border-strong)}
.hk-tabs.is-seg .hk-tab[aria-selected=true]{background:var(--hk-th-bg);color:var(--hk-heading)}
.hk-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body);color:var(--hk-text)}
.hk-table th{height:40px;padding:0 16px;background:var(--hk-surface-2);color:var(--hk-muted);font-size:var(--fs-small);font-weight:500;text-align:left;white-space:nowrap}
.hk-table th:first-child{border-radius:var(--hk-radius) 0 0 var(--hk-radius)}
.hk-table th:last-child{border-radius:0 var(--hk-radius) var(--hk-radius) 0}
.hk-table td{padding:10px 16px;border-bottom:1px solid var(--hk-border);vertical-align:middle}
.hk-table tr:last-child td{border-bottom:0}
.hk-pager{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-small);color:var(--hk-muted)}
.hk-pager button{min-width:32px;height:32px;padding:0 6px;border:0;border-radius:var(--hk-radius);background:none;color:var(--hk-text);font:500 var(--fs-small)/1 var(--font-ui);cursor:pointer}
.hk-pager button:hover{background:var(--hk-surface-2)}
.hk-pager button[aria-current]{background:var(--hk-primary);color:var(--hk-on-primary)}
.hk-steps{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0;padding:0;list-style:none;counter-reset:hk-step}
.hk-step{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body);color:var(--hk-muted);counter-increment:hk-step}
.hk-step::before{content:counter(hk-step);display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--hk-border-strong);border-radius:50%;font-weight:500}
.hk-step[aria-current]{color:var(--hk-heading)}
.hk-step[aria-current]::before{border-color:var(--hk-primary);color:var(--hk-link)}
.hk-step.is-done::before{border-color:var(--hk-primary);background:var(--hk-primary);color:var(--hk-on-primary)}
.hk-acc{border-bottom:1px solid var(--hk-border)}
.hk-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:var(--fs-h3);font-weight:600;color:var(--hk-heading);cursor:pointer;list-style:none}
.hk-acc>summary::-webkit-details-marker{display:none}
.hk-timeline{margin:0;padding:0;list-style:none}
.hk-timeline li{position:relative;padding:0 0 var(--sp-4) 20px;border-left:1px solid var(--hk-border);margin-left:4px;font-size:var(--fs-body);color:var(--hk-text)}
.hk-timeline li::before{content:"";position:absolute;left:-5px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--hk-primary)}
.hk-timeline time{display:block;font-size:var(--fs-desc);color:var(--hk-muted)}
.hk-skel{border-radius:var(--hk-radius);background:var(--hk-well);color:transparent;animation:hk-skel 1.2s ease-in-out infinite alternate}
.hk-avatar{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--cs,var(--hk-primary-soft));color:var(--ct,var(--hk-on-primary-soft));font-size:var(--fs-small);font-weight:500;overflow:hidden}
.hk-title{margin:0;font-size:var(--fs-title);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--hk-heading)}
.hk-title.is-list{font-size:var(--fs-h2);font-weight:600}
.hk-muted{color:var(--hk-muted);font-size:var(--fs-small)}
/* 아이콘 — <svg class="hk-i"><use href="/asset/hk-icons.svg#이름"/></svg> (수업방 · 쓰는 법 hk-icons.md). 선·채움은 심볼이 갖고, 여기서는 크기(20 · is-16/24/48)와 글줄 맞춤·색만. 색 = 글자색. */
.hk-i{--i:20px;display:inline-block;flex:none;width:var(--i);height:var(--i);vertical-align:calc(.36em - var(--i)/2);pointer-events:none}
.hk-i.is-16{--i:16px}
.hk-i.is-24{--i:24px}
.hk-i.is-48{--i:48px}
.hk-i.is-pri{color:var(--hk-link)}
.hk-i.is-ok{color:var(--hk-success)}
.hk-i.is-bad{color:var(--hk-danger)}
.hk-i.is-warn{color:var(--hk-warning)}
.hk-i.is-info{color:var(--hk-info)}
.hk-i.is-muted{color:var(--hk-muted)}
@keyframes hk-skel{to{opacity:.5}}
/* 손가락 화면 44 — 폭 기준은 틀(op.css #36)과 같은 880 이다. 틀이 그 폭에서 button·select 를 44 로 올리므로,
   기본꼴이 599 에서만 올리면 600~880 의 마우스 화면에서 a.hk-btn · input.hk-input(38)이 옆 단추(44)와 한 줄에서 어긋난다. */
@media(pointer:coarse),(max-width:880px){
.hk-btn:not(.is-xs):not(.is-sm):not(.is-icon),.hk-input:not(.is-sm),.hk-tab,.hk-chip{min-height:var(--touch)}
.hk-table th{height:var(--touch)}
.hk-btn.is-icon{width:var(--touch);height:var(--touch)}
.hk-tab{min-width:var(--touch)}      /* 한 글자 탭(「표」 · 「판」)도 너비 44 — 앱 타일 360 실측(공통틀방 ⓙ · 10-11)에서 40 이었다 */
}
/* 폰의 설명 글·칩은 13px — «읽고 누르는 글자»다(19_ui §7 · 칩은 수업방 2026-10-05). 배지·숫자 점은 12px 그대로. */
@media(max-width:599px){.hk-hint,.hk-chip{font-size:var(--fs-small)}}

/* 밝은 화면 바탕 = 화이트(기본) 순백 #fff + 회색 카드 선(토큰 검정 10%) — 대표 10-15 12:4x(종전 v4 옅은 회색 #f4f5f7 을 걷었다).
   카드 = 테두리(기본 · 1px 또렷한 선 · 그림자 0) / 그림자(선 0 + 떠 있는 그림자) — 대표 10-15 12:3x. 색 값은 토큰 자리(6절 앞)에만 — 6절 뒤는 쓰기만(test_ui_kit) */
html[data-hk-skin=shadow]:not([data-theme=dark]){--hk-card-border:transparent;--hk-shadow-card:0 6px 24px rgb(16 24 40/.14)}
/* 밝은 바탕 셋 = 확 다른 셋(대표 10-15 11:0x → 12:4x 「틴트 2배 · 카드까지」) — 화이트 · 스카이(하늘) · 크림(아이보리) — 바탕 · 카드 · 옅은 칸 · 구분선 · 카드 선 · 머리띠가 같이 바뀐다 */
html[data-hk-light=slate]:not([data-theme=dark]){--hk-bg:#dfe9f7;--hk-surface:#f3f7fd;--hk-card:#f3f7fd;--hk-surface-2:#e6eef9;--hk-well:#e6eef9;--hk-th-bg:#e6eef9;--hk-border:rgba(30,80,150,.14);--hk-border-strong:rgba(30,80,150,.26);--hk-card-border:rgba(30,80,150,.2);--hk-topbar:#e6eef9}
html[data-hk-light=gray]:not([data-theme=dark]){--hk-bg:#efe6d3;--hk-surface:#fbf7ee;--hk-card:#fbf7ee;--hk-surface-2:#f3ebdb;--hk-well:#f3ebdb;--hk-th-bg:#f3ebdb;--hk-border:rgba(110,80,30,.14);--hk-border-strong:rgba(110,80,30,.26);--hk-card-border:rgba(110,80,30,.2);--hk-topbar:#f3ebdb}
/* ── 6. 공통 부품(ui.js) — 토스트 · 확인 상자 · 빈 상태 · 되돌리기 띠. 색·모서리만 토큰(자리·쌓는 방식은 그대로). ── */
.hk-toasts{position:fixed;left:50%;bottom:calc(24px + max(var(--hk-bb),env(safe-area-inset-bottom,0px)));transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.hk-toasts.has-undo{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.hk-toast{pointer-events:auto;box-sizing:border-box;max-width:100%;padding:12px 16px;border-radius:var(--hk-radius);background:var(--hk-heading);color:var(--hk-bg);font:500 var(--fs-small)/1.45 var(--font-ui);word-break:keep-all;overflow-wrap:break-word;cursor:pointer;box-shadow:var(--hk-shadow)}
.hk-toast.is-bad{background:var(--hk-on-danger-soft);color:var(--hk-on-status)}
.hk-dialog-back{position:fixed;inset:0;z-index:390;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--hk-backdrop)}
.hk-dialog{box-sizing:border-box;width:100%;max-width:420px;padding:20px;border:1px solid var(--hk-border);border-radius:var(--hk-radius-lg);background:var(--hk-card);color:var(--hk-heading);font-family:var(--font-ui);box-shadow:var(--hk-shadow)}
.hk-dialog h2{margin:0 0 8px;font-size:var(--fs-h3);font-weight:600;line-height:1.4}
.hk-dialog p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--hk-text);white-space:pre-line;word-break:keep-all;overflow-wrap:break-word}
.hk-dialog p.hk-dialog-note{margin-top:10px;font-size:var(--fs-small);font-weight:500;color:var(--hk-muted)}
.hk-dialog p.hk-dialog-note.is-bad{color:var(--hk-on-danger-soft)}
.hk-dialog-f{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.hk-dialog-f .hk-btn{min-width:88px}
.hk-dialog .hk-label{margin-top:14px}
.hk-dialog .hk-hint:empty{display:none}
.hk-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 16px;text-align:center;color:var(--hk-muted);font-family:var(--font-ui)}
.hk-empty b{font-size:var(--fs-body);font-weight:500;color:var(--hk-heading)}
.hk-empty.is-bad b{color:var(--hk-on-danger-soft)}
.hk-empty p{margin:0;max-width:36em;word-break:keep-all;overflow-wrap:break-word;font-size:var(--fs-small);line-height:1.5}
.hk-empty .hk-btn{margin-top:12px}
.hk-undo{position:fixed;left:50%;bottom:calc(24px + max(var(--hk-bb),env(safe-area-inset-bottom,0px)));transform:translateX(-50%);z-index:401;box-sizing:border-box;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:var(--hk-radius);background:var(--hk-heading);color:var(--hk-bg);font:500 var(--fs-small)/1.4 var(--font-ui);overflow:hidden;box-shadow:var(--hk-shadow)}
.hk-undo span{flex:1;min-width:0;word-break:keep-all;overflow-wrap:break-word}
.hk-undo button{flex:none;min-height:var(--touch);padding:0 14px;border:1px solid currentColor;border-radius:var(--hk-radius);background:none;color:inherit;font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
.hk-undo button:focus-visible{outline:2px solid var(--p-400);outline-offset:2px}
.hk-undo i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--p-400);transform-origin:left;animation:hk-undo linear forwards}
@keyframes hk-undo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.hk-undo i,.hk-skel{animation:none}}
@media(max-width:720px){.hk-undo{left:16px;right:16px;transform:none;max-width:none}
.hk-toasts{left:16px;right:16px;transform:none;width:auto;max-width:none}
.hk-toast{width:100%}}
@media(max-width:420px){.hk-dialog-f{flex-direction:column-reverse}.hk-dialog-f .hk-btn{width:100%}}
/* 폰 긴 창(OP-직원 C6 — /staff 「정보 수정」 1119px 는 저장 · 취소가 스크롤 밖) = 창 안에서 넘기고 발(저장 줄)은 창 바닥에 붙는다(바탕 = 창 · 선 · 그림자 0 — 짧은 창은 모양 그대로).
   지우기 같은 «글 단추 + 위험»(is-text is-bad)은 세로로 쌓일 때 취소 바로 밑이 아니라 맨 위 · 왼쪽 글 줄로 뗀다(확인 창이 한 번 더 뜨지만 손이 닿는 자리에서 뺀다).
   PC 는 손대지 않는다 — 창 안에 뜨는 펼침 메뉴가 넘김 상자에 잘릴 수 있다 */
@media(max-width:599px){.hk-dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.hk-dialog-f{position:sticky;bottom:-20px;margin:8px -20px -20px;padding:12px 20px 20px;background:var(--hk-card)}}
@media(max-width:420px){.hk-dialog-f>.hk-btn.is-text.is-bad{order:9;width:auto;align-self:flex-start;margin:0 0 8px -12px}}
@media print{.hk-toasts,.hk-undo,.hk-dialog-back{display:none!important}}
/* ══ v4 결(대표 10-13 18:4x 「매우 복잡해 보인다 · 왜 이렇게 글이 많은가 · 컬러풀하고 단순한 아이콘 · 더 심플하고 큰 버튼 · 업주도 결국 쉬워야 쓴다」 · 시안 = _send_tmp/op_screens_v4 · 공통틀방) ══
   ① 캔버스 연회색 + 흰 카드(선 0) — 카드가 «떠 보이는» 게임 2D 결(디펜스) · 어두운 화면은 그대로
   ② 큰 단추 48(.hk-btn.is-lg) — 블록마다 단추 하나 · 노랑(.is-main)은 화면에 한 곳
   ③ 큰 아이콘 타일(.hk-tile) — 회원 앱 2D 한 벌(docs/specs/app/art/1013-2d)을 그대로 · 크기 = --hk-tile
   ④ 걸음(.hk-walk · hk-walk.js — 이름 .hk-steps 는 위 「단계」 부품(번호 동그라미 · 폼 순서)이 이미 쓴다) — 현장 › 경기 › 원본 › 클립 › 분석(51 §0) · 띠 꼴 = 영상 다섯 화면 맨 위 · 카드 꼴(.is-cards) = 홈 「오늘의 영상」
   ⑤ 글 줄이기 — 카드 부제 · 설명 줄은 숨긴다(숫자 · 제목 · 단추 글만 · 글자 수 v3-1 의 19%) */
html{--hk-btn-h:48px;--hk-tile:64px;--hk-tile-r:18px;--hk-radius-xl:20px}
.hk-btn.is-lg{height:var(--hk-btn-h);padding:0 22px;border-radius:14px;font-size:16px;font-weight:700}
.hk-dash-sub,.hk-set-sub,.hk-board-sub,.hk-list-sub,.hk-detail-sub{display:none}
.hk-walk{display:flex;align-items:center;gap:4px;padding:12px 16px;border-radius:var(--hk-radius-xl);background:var(--hk-surface);overflow-x:auto;scrollbar-width:none}
.hk-walk-it{position:relative;display:flex;align-items:center;flex:none;gap:12px;padding:6px 16px 6px 6px;border-radius:16px;color:var(--hk-heading);text-decoration:none}
.hk-walk-it img{display:block;width:44px;height:44px;border-radius:13px}
.hk-walk-it b{display:block;font:700 16px/1.3 var(--font-ui)}
.hk-walk-it small{display:block;font:600 14px/1.3 var(--font-ui);color:var(--hk-muted)}
.hk-walk-it small i{font-style:normal;font-size:.5em;margin-left:2px;color:var(--hk-muted)}
.hk-walk-it.is-now{background:var(--hk-primary-soft);box-shadow:inset 0 0 0 2px var(--hk-primary)}
.hk-walk-it.is-next{opacity:.55}
.hk-walk-it.is-done::after{content:"";position:absolute;left:38px;top:2px;width:18px;height:18px;border:2px solid var(--hk-surface);border-radius:50%;background:var(--hk-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.hk-walk-ln{flex:1;min-width:16px;height:3px;border-radius:2px;background:var(--hk-border-strong)}
.hk-walk-ln.is-done{background:var(--hk-success)}
.hk-walk.is-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;background:none;overflow:visible}
.hk-walk.is-cards .hk-walk-it{flex-direction:column;gap:6px;padding:18px 10px;background:var(--hk-surface-2);text-align:center}
.hk-walk.is-cards .hk-walk-it img{width:96px;height:96px;margin-bottom:6px;border-radius:26px}
.hk-walk.is-cards .hk-walk-it b{font-weight:600;color:var(--hk-muted)}
.hk-walk.is-cards .hk-walk-it small{font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--hk-heading)}
.hk-walk.is-cards .hk-walk-it small i{font-size:16px}
.hk-walk.is-cards .hk-walk-it.is-done::after{left:auto;right:12px;top:12px;width:22px;height:22px;background-size:14px}
.hk-walk.is-cards .hk-walk-it.is-next{opacity:1}
@media(max-width:480px){.hk-walk.is-cards{gap:8px}.hk-walk.is-cards .hk-walk-it img{width:56px;height:56px}}