/* kiosk-skins.css — 키오스크 opt-in 표면 스킨 6종(#112). dashboard·watchdog 키오스크 공용.
   html.kiosk[data-skin="X"] 스코프. default·비키오스크 0영향. 자체호스팅 IBM Plex·CSP 준수.
   ★ 토큰 기반: 각 스킨이 --paper/--surface/--surf2/--ink/--ink-2/--muted/--line(+accent)을 통째로 재정의 →
     텍스트·지도(.kmap)·차트가 일괄 적응(요소별 땜질 대신 대비를 근본 확보). 시그니처(글로우/그리드/하프톤/프레임)만 추가. */

/* ══ TV 보정(2026-08-06) — 기본 키오스크(비스킨·default)에만 적용 ══
   왜: 키오스크는 모니터가 아니라 TV에서 원거리로 본다. TV는 감마 ~2.4(BT.1886)로 그림자 계조를 더 누르고
   주변광 반사(플레어)로 검정이 들려, 종전 팔레트의 인접 면·경계 대비 1.04~1.35:1 이 눈에 안 들어왔다(실측).
   면을 밝히면 글자 대비가 무너지므로(실측: --surface 를 TV 1.35:1 로 올리자 --muted 2.2:1) **경계선만** 올린다.
   --line 은 paper/surface/surf2/elev 네 면 전부에서 TV 3:1 이상(3.02~3.37), --muted 는 TV 4.55:1.
   스킨 7종은 각자 팔레트를 통째로 재정의하므로 여기서 건드리지 않는다(스킨별 보정은 별건). */
html.kiosk:not([data-skin]), html.kiosk[data-skin="default"]{
  --line:#4F75B7; --line2:#355286; --line-2:#355286; }
/* --muted는 라이트에서 제외한다(2026-08-11, TV 대비 감사 결함①) — 라이트 팔레트(dashboard.html
   :root[data-theme="light"])는 이미 --muted:#5C6672(TV 5.60:1, surf2 기준)로 기준(4.5)을 넘는다.
   다크용 #8794AA 를 라이트에도 그대로 덮으면 TV 2.92:1 로 붕괴한다(실측) — 덮지 않는 것이 가장 정직한
   수정이라 여기서 --muted 를 뺐다. --line 은 반대로 다크값 #4F75B7 을 라이트에도 그대로 유지한다 —
   라이트 자체 --line(#D5D9D1)은 TV 1.3:1 로 크게 미달인 반면 #4F75B7 은 라이트 면에서도 TV 4.40:1 로
   통과하기 때문이다(재계산 확인). 위 선택자의 특이도(0,2,1)가 :root[data-theme="light"](0,2,0)를 이겨
   라이트에서도 --line 을 지켜준다 — 그래서 --line 규칙은 그대로 두고 --muted 만 아래로 분리했다. */
html.kiosk:not([data-skin]):not([data-theme="light"]), html.kiosk[data-skin="default"]:not([data-theme="light"]){
  --muted:#8794AA; }

/* 지도·패널 경계 공통 보정(스킨 배경과 구분) — 기본(data-skin=default)·비스킨은 제외해 회귀 방지 */
html.kiosk[data-skin]:not([data-skin="default"]):not([data-skin="shadcn"]) .kmap{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:color-mix(in srgb,var(--surf2) 60%,transparent); }

/* ══ 경계 두께 — TV 원거리(2026-08-06) ══
   색을 올려도 1px 은 4m 거리에서 지각상 거의 사라진다(각크기 문제). 구조 패널만 2px 로 올린다.
   ⚠️ 키오스크는 **무스크롤**(16:10 한 화면)이 요건이라 두께를 올리면 넘칠 수 있다 — box-sizing:border-box
   덕에 바깥 크기는 그대로지만, 실브라우저에서 scrollHeight 를 확인하고 넣었다.
   장식 테두리(스킨 시그니처 프레임)는 각 스킨 규칙이 지므로 여기서 건드리지 않는다. */
html.kiosk .khl, html.kiosk .khr, html.kiosk .kident, html.kiosk .kc,
html.kiosk .wkhl, html.kiosk .wkhr, html.kiosk .wkpanel, html.kiosk .wkidx{ border-width:2px; }

/* ══ TV 보정 — 스킨 7종(2026-08-06) ══
   기본 키오스크와 같은 이유다(위 블록 주석 참고): TV는 감마 ~2.4 + 주변광 플레어라 경계가 사라진다.
   각 스킨의 **자기 팔레트 기준**으로 --line 이 그 스킨 면들에서 TV 3:1 이상, --muted 가 4.5:1 이상이 되게
   색조·채도를 유지하고 밝기만 옮겼다. 실측 전/후(TV 최악):
     shadcn   line 1.47 → 3.01 (#3F3F46 → #70707c, dashboard/watchdog 정의)
     phosphor line 1.72 → 3.02 · muted 3.99 → 4.55
     blueprint line 2.89 → 3.00 · muted 3.88 → 4.54
     neon     line 1.54 → 3.02 · muted 4.35 → 4.53
     glass    흰색 알파 .14 → .42 (합성 후 TV 3.17) · 패널 테두리도 .16 → .42
     riso(라이트 12.40)·brutal(흰 선 16.28)은 이미 충족 — 건드리지 않았다
   ⚠️ 면(paper/surface)은 어느 스킨에서도 올리지 않았다 — 어두운 면끼리 계조를 벌리면 면이 중간톤이 되어
      글자 대비가 무너진다(기본 팔레트에서 실측: --surface 를 TV 1.35:1 로 올리자 --muted 2.2:1). */

/* ══ A. phosphor — 인광 그린 터미널 ══ */
html.kiosk[data-skin="phosphor"]{ --paper:#041610; --bg:#041610; --surface:#0a2a1c; --surf2:#0a2a1c; --ink:#b8ffd4; --ink-2:#6fdca0; --muted:#4ca57a; --line:#298658; --az:#37d98a; --t:#37d98a; --vi:#6fdca0; }
html.kiosk[data-skin="phosphor"] .kv, html.kiosk[data-skin="phosphor"] .kkpi b, html.kiosk[data-skin="phosphor"] .num, html.kiosk[data-skin="phosphor"] .gv, html.kiosk[data-skin="phosphor"] .pnum{ font-family:var(--mono,ui-monospace,monospace); text-shadow:0 0 9px rgba(80,255,160,.45); }
html.kiosk[data-skin="phosphor"] body::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px); }

/* ══ B. blueprint — 청사진 ══ */
html.kiosk[data-skin="blueprint"]{ --paper:#0a2a5e; --bg:#0a2a5e; --surface:#103a72; --surf2:#103a72; --ink:#f0f6ff; --ink-2:#accaf5; --muted:#8eaada; --line:#6389c9; --az:#9dc0ff; --t:#9dc0ff; --vi:#c7b3ff; }
html.kiosk[data-skin="blueprint"] body{ background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px); background-size:22px 22px; }
html.kiosk[data-skin="blueprint"] .ktile, html.kiosk[data-skin="blueprint"] .kmatrix, html.kiosk[data-skin="blueprint"] .wkpanel, html.kiosk[data-skin="blueprint"] .wkidx{ border-style:dashed; }
html.kiosk[data-skin="blueprint"] .kv, html.kiosk[data-skin="blueprint"] .kkpi b, html.kiosk[data-skin="blueprint"] .num{ font-family:var(--mono,ui-monospace,monospace); }

/* ══ C. riso — 2도 인쇄 종이(라이트) ══ */
html.kiosk[data-skin="riso"]{ --paper:#f4efe6; --bg:#f4efe6; --surface:#ffffff; --surf2:#ffffff; --ink:#1a2340; --ink-2:#3a4260; --muted:#6b6152; --line:#1a2340; --az:#2540ff; --t:#2540ff; --vi:#ff5a36; color-scheme:light; }
html.kiosk[data-skin="riso"] body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.12; background-image:radial-gradient(#ff5a36 1.1px,transparent 1.4px); background-size:6px 6px; }
html.kiosk[data-skin="riso"] .ktile, html.kiosk[data-skin="riso"] .kmatrix, html.kiosk[data-skin="riso"] .kident, html.kiosk[data-skin="riso"] .wkpanel, html.kiosk[data-skin="riso"] .wkidx{ border-width:1.5px; border-radius:0; box-shadow:3px 3px 0 #2540ff22; }

/* ══ D. glass — 글래스 blur + 오로라 그라디언트(기본과 뚜렷이 구분: 그라디언트 그라운드·강한 blur·글로우) ══ */
/* --muted 추가(2026-08-11, TV 대비 감사 결함②) — 미정의라 다크 기본값 #7D8BA3(dashboard.html :root, TV
   보정 미적용)을 그대로 상속해 최악 배경(그라디언트 밝은 쪽 #173a66 에 패널 흰 알파 .06 합성)에서
   TV 2.71:1 로 붕괴했다(실측). 색조·채도는 유지하고 밝기만 옮긴다(파일 상단 방침) — HSL h217.9° s17.1%
   l56.5%→73% 로 올려 #AEB7C6, 최악 조건 TV 4.70:1 확보(기준 4.5). --ink(상속 #EAF0F8)보다는 어둡게
   남겨 위계를 지켰다. */
html.kiosk[data-skin="glass"]{ --line:rgba(255,255,255,.42); --surf2:rgba(255,255,255,.06); --surface:rgba(255,255,255,.06); --muted:#AEB7C6; }
html.kiosk[data-skin="glass"] body{ background:radial-gradient(130% 100% at 12% -10%,#173a66,#060b14 70%) fixed; }
html.kiosk[data-skin="glass"] .ktile, html.kiosk[data-skin="glass"] .kmatrix, html.kiosk[data-skin="glass"] .kident, html.kiosk[data-skin="glass"] .wkpanel, html.kiosk[data-skin="glass"] .wkidx, html.kiosk[data-skin="glass"] .kmap{ background:rgba(255,255,255,.06); backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px); border:2px solid rgba(255,255,255,.42); border-radius:16px; box-shadow:0 12px 44px rgba(0,20,60,.5); position:relative; overflow:hidden; }
html.kiosk[data-skin="glass"] .ktile::before, html.kiosk[data-skin="glass"] .kmatrix::before, html.kiosk[data-skin="glass"] .wkpanel::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--aurora,linear-gradient(100deg,#34E5C4,#3D8BFF 55%,#8E7CF6)); opacity:.95; }
html.kiosk[data-skin="glass"] .kv, html.kiosk[data-skin="glass"] .kkpi b{ background:var(--aurora,linear-gradient(100deg,#34E5C4,#3D8BFF 55%,#8E7CF6)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 10px rgba(60,200,220,.4)); }

/* ══ E. brutal — 초고대비 흑백 + 앰버 수치 ══ */
html.kiosk[data-skin="brutal"]{ --paper:#0a0a0c; --bg:#0a0a0c; --surface:#0a0a0c; --surf2:#0a0a0c; --ink:#ffffff; --ink-2:#e6e6e6; --muted:#9a9a9a; --line:#ffffff; --az:#F5B547; --t:#F5B547; --vi:#F5B547; }
html.kiosk[data-skin="brutal"] .ktile, html.kiosk[data-skin="brutal"] .kmatrix, html.kiosk[data-skin="brutal"] .kident, html.kiosk[data-skin="brutal"] .wkpanel, html.kiosk[data-skin="brutal"] .wkidx, html.kiosk[data-skin="brutal"] .kmap{ border:2px solid #fff; border-radius:0; box-shadow:none; }
html.kiosk[data-skin="brutal"] .kv, html.kiosk[data-skin="brutal"] .kkpi b, html.kiosk[data-skin="brutal"] .num, html.kiosk[data-skin="brutal"] .gv, html.kiosk[data-skin="brutal"] .pnum{ font-family:var(--mono,ui-monospace,monospace); color:#F5B547; }
html.kiosk[data-skin="brutal"] .kl, html.kiosk[data-skin="brutal"] .kcap, html.kiosk[data-skin="brutal"] .wkl{ text-transform:uppercase; letter-spacing:.1em; font-weight:800; }

/* ══ F. neon — 발광 시안 HUD + 코너 브래킷 ══ */
html.kiosk[data-skin="neon"]{ --paper:#060a16; --bg:#060a16; --surface:#0a1428; --surf2:#0a1428; --ink:#dff4ff; --ink-2:#7fe6ff; --muted:#5e92ba; --line:#276dcf; --az:#2bd6ff; --t:#2bd6ff; --vi:#6ad0ff; }
html.kiosk[data-skin="neon"] .ktile, html.kiosk[data-skin="neon"] .kmatrix, html.kiosk[data-skin="neon"] .kident, html.kiosk[data-skin="neon"] .wkpanel, html.kiosk[data-skin="neon"] .wkidx{ box-shadow:inset 0 0 0 1px rgba(43,214,255,.08); position:relative; }
html.kiosk[data-skin="neon"] .ktile::before, html.kiosk[data-skin="neon"] .kmatrix::before, html.kiosk[data-skin="neon"] .wkpanel::before{ content:""; position:absolute; top:-1px; left:-1px; width:12px; height:12px; border-top:1.5px solid #2bd6ff; border-left:1.5px solid #2bd6ff; }
html.kiosk[data-skin="neon"] .ktile::after, html.kiosk[data-skin="neon"] .kmatrix::after, html.kiosk[data-skin="neon"] .wkpanel::after{ content:""; position:absolute; bottom:-1px; right:-1px; width:12px; height:12px; border-bottom:1.5px solid #2bd6ff; border-right:1.5px solid #2bd6ff; }
html.kiosk[data-skin="neon"] .kv, html.kiosk[data-skin="neon"] .kkpi b, html.kiosk[data-skin="neon"] .num, html.kiosk[data-skin="neon"] .gv, html.kiosk[data-skin="neon"] .pnum{ text-shadow:0 0 9px rgba(43,214,255,.5); }

/* ══ G. shadcn — neutral(zinc) 팔레트, 2px 경계 + radius·미세 그림자로 정체성(#112 결함 수정: 정의가 dashboard.html에만 있고
   watchdog.html엔 아예 없어 skin=shadcn을 고르면 기본 팔레트로 새던 것을 여기 kiosk-skins.css로 통합해 양쪽에 적용) ══
   실측(ui.shadcn.com, Playwright getComputedStyle+canvas 변환, 2026-08-06): 다크 background #09090B(zinc-950)·border #27272A(zinc-800)·
   muted-foreground #A1A1AA(zinc-400)·foreground #FAFAFA(zinc-50) / 라이트 background #FFFFFF·border #E4E4E7(zinc-200)·muted-foreground #71717A(zinc-500) /
   Card border-radius 14px(border-width 0px+box-shadow 0 0 0 1px 링으로 대체) / Badge·Button border-radius 8px.
   TV(전 스킨과 동일 공식): 다크 --line 은 실측 zinc-800(#27272A, TV 1.11~1.17)이 3:1 미달이라 기존 #70707C(TV 3.01~3.16) 유지.
   라이트 --line 은 실측 zinc-200(#E4E4E7, TV 1.23~1.28)도 미달 — 같은 zinc 축에서 zinc-400↔500 사이 #93939C로 밝기만 낮춰 TV 3.05(surf2)~3.18(paper) 확보(색조는 유지).
   --muted 는 다크(zinc-400, TV 5.84~6.12)·라이트(zinc-500, TV 4.88~5.10) 모두 그대로 충족 — 손대지 않았다.
   카드 보더는 실제 shadcn처럼 0px+그림자 링이 아니라 명시 2px 보더를 쓴다(브리프 규칙 #2 — 1px는 TV 원거리에서 소실). */
html.kiosk[data-skin="shadcn"]{ --paper:#09090B; --surf2:#18181B; --surface:#18181B; --line:#70707C; --ink:#FAFAFA; --ink-2:#D4D4D8; --muted:#A1A1AA; }
html.kiosk[data-skin="shadcn"][data-theme="light"]{ --paper:#FFFFFF; --surf2:#FAFAFA; --surface:#FAFAFA; --line:#93939C; --ink:#18181B; --ink-2:#52525B; --muted:#71717A; }
/* ⚠️ 원 사이트는 UI 크롬이 **무채색**이다(zinc). 종전에는 면·글자만 중성으로 바꾸고 강조색을 그대로 둬서
   차트가 파랑·보라로 남아 "무채색 스킨"이라는 이름과 어긋났다. 크롬 강조(--az/--t/--vi)를 중성으로 옮긴다.
   ⚠️ **상태색(crit/warn/good)은 남긴다** — 위험·주의·안전의 뜻을 지고 있어 중성화하면 정보가 사라진다.
   ⚠️ `--t` 는 채움으로 쓰이고 그 위에 **어두운 글자**가 얹힌다(.sbadge.안전) — 그래서 다크에서도 밝은 회색을
   골랐다. 어두운 회색을 넣으면 그 배지가 읽히지 않는다(실측으로 확인). */
html.kiosk[data-skin="shadcn"]{ --az:#A1A1AA; --t:#D4D4D8; --vi:#71717A; }
html.kiosk[data-skin="shadcn"][data-theme="light"]{ --az:#71717A; --t:#A1A1AA; --vi:#52525B; }
/* 차트에 박아 둔 청록도 이 스킨에서는 중성으로 — 토큰이 아니라 하드코딩이라 따로 덮는다 */
html.kiosk[data-skin="shadcn"] .mxbar .s2,
html.kiosk[data-skin="shadcn"] .leg .lg i.s2{ background:#71717A; }
/* 모따기 — 원 사이트 차트는 막대 모서리가 둥글다.
   ⚠️ 처음에 `.oflow .bar`·`.mxbar`·`.hbars` 를 겨눴는데 **키오스크에는 그 요소가 없다**(비키오스크 대시보드 것).
   실제 키오스크 막대는 `svg.spark` 안의 bare `rect` 다 — 브라우저로 DOM 을 열어 보고서야 알았다.
   SVG 라 border-radius 가 아니라 rx 로 준다. 카드 반경(14px) 리듬에 맞춰 작은 값을 쓴다. */
/* (걷음 2026-08-06) 여기 있던 `.spark rect{rx:3}` 은 아래 키오스크 전체 규칙(rx:4)과 **겹쳐 이기고 있었다**
   — 특이도가 높아 무채색만 3px 로 남아 다른 스킨과 어긋났다(실측). 4px 한 값으로 통일한다. */
/* 카드 반경을 한 값으로 — .kc 만 12px 로 남아 같은 스킨 안에서 어긋나 있었다(실측) */
html.kiosk[data-skin="shadcn"] .kc{ border-radius:14px; }

/* ⚠️ 링차트(성별 보수비 등)가 무채색에서 안 보였다 — 실측 원인(2026-08-06):
   트랙은 인라인 `stroke="var(--line)"`(#70707C), 값 호는 --vi(#71717A)로 **두 색이 거의 같았다**
   (112,112,124 vs 113,113,122). 무채색 스킨은 강조가 회색이라 트랙과 겹치는 것이 구조적이다.
   → 이 스킨에서는 **트랙을 어둡게, 값 호를 밝게** 고정한다. CSS 는 인라인 presentation attribute 를 이긴다.
   값 호는 `stroke-dasharray` 가 붙은 원이라 그것으로 골라낸다(트랙엔 없다). */
/* ⚠️ 이 문제는 무채색만이 아니었다 — 기본 스킨도 트랙(--line #4F75B7, TV 보정으로 밝힌 값)과
   값 호(--vi #8E7CF6)가 1.40:1 로 거의 겹쳤다(실측). 트랙이 --line 을 쓰는 것이 원인이니
   **키오스크 전체에서 트랙을 어둡게** 깐다. 값 호는 지표별 색을 그대로 쓴다. */
html.kiosk .spark.dn circle:not([stroke-dasharray]){ stroke:color-mix(in srgb, var(--ink) 16%, transparent); }
/* 무채색은 강조까지 회색이라 값 호도 밝게 고정해야 트랙과 갈린다 */
html.kiosk[data-skin="shadcn"] .spark.dn circle[stroke-dasharray]{ stroke:var(--ink-2); }

/* 막대 그라데이션·모따기 — 워치독(.pbar>i)에는 있는데 대시보드 6분할 막대에는 없었다(사용자 지적).
   대시보드 막대는 SVG `rect` 라 CSS 배경 그라데이션이 안 먹는다 → SVG 그라데이션 def 를 참조한다.
   def 는 dashboard.html 이 문서 로드 시 한 번 심는다(#kbargrad, --az→--t 토큰 stop).
   워치독 막대 규칙(`html.kiosk .wkpyr .pbar>i`)이 키오스크 전체에 걸려 있으므로 **여기도 스킨을 가리지 않는다** —
   토큰으로 색을 받으니 스킨마다 자기 색으로 나온다. 모따기는 워치독과 같은 4px. */
html.kiosk .spark rect{ rx:4; fill:url(#kbargrad); }

/* 카드 표면 — 경계 실색 var(--line) 2px 명시(기존 kiosk 반투명 rgba(.14/.15/.22) 측면 오버라이드를 덮음) + radius 14px(실측 Card) + 미세 그림자.
   kident·wkpanel = 무강조 평판. wkpanel은 .wkmatrix와 같은 엘리먼트에 함께 쓰여 top도 먼저 var(--line)로 통일되므로,
   바로 다음 .wkmatrix 규칙에서 top만 crit accent로 되돌린다 — 순서를 바꾸면 강조색이 사라진다(구조·차트 accent 불변 원칙). */
html.kiosk[data-skin="shadcn"] .kident,
html.kiosk[data-skin="shadcn"] .wkpanel{ border:2px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.35); }
html.kiosk[data-skin="shadcn"] .ktile,
html.kiosk[data-skin="shadcn"] .kmatrix,
html.kiosk[data-skin="shadcn"] .wkidx{ border-left:2px solid var(--line); border-right:2px solid var(--line); border-bottom:2px solid var(--line);
  border-top-width:2px; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.35); } /* top은 색을 안 건드려 --az/--t/--vi/--warn/.turn(--vi) cascade 유지, 폭만 3→2px */
html.kiosk[data-skin="shadcn"] .wkmatrix{ border-top-color:var(--crit); border-top-width:2px; } /* 위 .wkpanel 규칙이 top을 var(--line)로 먼저 덮으므로 crit accent를 되돌린다 */
html.kiosk[data-skin="shadcn"] .kcpt-kpi .kkpi{ border:2px solid var(--line); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.35); } /* B형 독립 KPI 카드만(A형 .ksub HUD 바는 불변) */
/* 라이트 — border-color 승리 보장 + 그림자 완화. dashboard.html·watchdog.html 쪽 인라인 `[data-theme="light"] .kident/.ktile/.kmatrix/.wkpanel/.wkidx`
   제네릭 반투명 오버라이드가 특이도 동률에 문서상 나중이라(kiosk-skins.css는 <link>로 더 먼저 로드) 그대로 두면 이긴다 — [data-skin]+[data-theme] 복합으로 특이도를 올려 확정한다. */
html.kiosk[data-skin="shadcn"][data-theme="light"] .kident,
html.kiosk[data-skin="shadcn"][data-theme="light"] .wkpanel{ border-color:var(--line); box-shadow:0 1px 3px rgba(0,0,0,.08); }
html.kiosk[data-skin="shadcn"][data-theme="light"] .ktile,
html.kiosk[data-skin="shadcn"][data-theme="light"] .kmatrix,
html.kiosk[data-skin="shadcn"][data-theme="light"] .wkidx{ border-left-color:var(--line); border-right-color:var(--line); border-bottom-color:var(--line); box-shadow:0 1px 3px rgba(0,0,0,.08); }
html.kiosk[data-skin="shadcn"][data-theme="light"] .wkmatrix{ border-top-color:var(--crit); }
html.kiosk[data-skin="shadcn"][data-theme="light"] .kcpt-kpi .kkpi{ box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* 타이포 — 워드마크 트래킹·clamp 상하한 축소, 숫자 tabular-nums(미적용 요소만 — watchdog .wkidxnum/.wkgv/.wkcell .wkv는 기본이 이미 tabular), 라벨 색 muted·트래킹 축소 */
html.kiosk[data-skin="shadcn"] .kwm,
html.kiosk[data-skin="shadcn"] .wkwm{ letter-spacing:-.02em; font-size:calc(clamp(19px,2.3vw,40px) * var(--nsc,1)); }
html.kiosk[data-skin="shadcn"] .ktile .kv,
html.kiosk[data-skin="shadcn"] .kkpi b{ font-variant-numeric:tabular-nums; }
html.kiosk[data-skin="shadcn"] .ktile .kl,
html.kiosk[data-skin="shadcn"] .kmatrix .kmxhd .kl,
html.kiosk[data-skin="shadcn"] .wkcell .wkl,
html.kiosk[data-skin="shadcn"] .wkmatrix .wkmxhd .wkl{ color:var(--muted); letter-spacing:-.01em; }

/* ── 스킨별 지오메트리 큐(둥근 테두리·배지 등 디자인 큐 정합) — 각진 스킨은 radius 0, 네온/청사진은 소, 글래스는 대 ── */
html.kiosk[data-skin="riso"] .kbg, html.kiosk[data-skin="riso"] .wkbg, html.kiosk[data-skin="riso"] .kkpi, html.kiosk[data-skin="riso"] .chip,
html.kiosk[data-skin="brutal"] .kbg, html.kiosk[data-skin="brutal"] .wkbg, html.kiosk[data-skin="brutal"] .kkpi, html.kiosk[data-skin="brutal"] .chip{ border-radius:0 !important; }
html.kiosk[data-skin="blueprint"] .kbg, html.kiosk[data-skin="blueprint"] .wkbg, html.kiosk[data-skin="blueprint"] .kkpi,
html.kiosk[data-skin="neon"] .kbg, html.kiosk[data-skin="neon"] .wkbg, html.kiosk[data-skin="neon"] .kkpi{ border-radius:3px !important; }
html.kiosk[data-skin="glass"] .kbg, html.kiosk[data-skin="glass"] .wkbg, html.kiosk[data-skin="glass"] .kkpi{ border-radius:14px !important; }
html.kiosk[data-skin="phosphor"] .kbg, html.kiosk[data-skin="phosphor"] .wkbg, html.kiosk[data-skin="phosphor"] .kkpi{ border-radius:2px !important; }