/* 키오스크 공용 스타일 — 바탕·틀·구성 요소. 화면별은 kiosk-screens.css, 움직임은 motion.css.
 * 터치 전용: :hover 규칙을 쓰지 않는다(누름은 .is-pressed / :active). 선택·끌기·확대 막기는 여기 + core/guards.js.
 */

/* ───────── 바탕 ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  letter-spacing: var(--track);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
  font-weight: var(--fw-regular);
}
body {
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: var(--c-bg);
}
html.is-kiosk, html.is-kiosk * { cursor: none !important; }
img, svg { display: block; }
img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }
h1, h2, h3, p, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring); }
.hk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.word { word-break: keep-all; }

/* 아이콘(두 겹: 옅은 면 + 선) */
.hk-ic { width: 1em; height: 1em; flex: none; overflow: visible; }
.hk-ic-f { fill: currentColor; stroke: none; opacity: .16; }
.is-contrast .hk-ic-f { opacity: 0; }

/* 색 묶음(tone) — 카드·타일·대화상자가 같이 씀 */
.tone-primary   { --tone: var(--c-primary);   --tone-soft: var(--c-primary-soft); }
.tone-secondary { --tone: var(--c-secondary); --tone-soft: var(--c-secondary-soft); }
.tone-accent    { --tone: color-mix(in oklab, var(--c-accent) 78%, #6b3d00); --tone-soft: var(--c-accent-soft); }
.tone-danger    { --tone: var(--c-danger);    --tone-soft: var(--c-danger-soft); }
.tone-warn      { --tone: var(--c-warn);      --tone-soft: var(--c-warn-soft); }
:root[data-theme="dark"] .tone-accent { --tone: var(--c-accent); }
.is-contrast .tone-primary, .is-contrast .tone-secondary, .is-contrast .tone-accent, .is-contrast .tone-warn { --tone: #FFD400; --tone-soft: #000; }
.is-contrast .tone-danger { --tone: #FF8A80; --tone-soft: #000; }

/* ───────── 앱 틀 ───────── */
.hk-root { position: fixed; inset: 0; }
.hk-app {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) auto minmax(0, 1fr) auto var(--bottombar-h);
  grid-template-areas: "top" "strip" "stage" "cap" "bar";
  background: var(--c-bg);
  overflow: hidden;
}
.is-contrast .hk-app { background: #000; }
.hk-app > .hk-top { grid-area: top; }
.hk-app > .hk-strip { grid-area: strip; }
.hk-app > .hk-stage { grid-area: stage; }
.hk-app > .hk-bar { grid-area: bar; }
.hk-app > .hk-tts-cap { grid-area: cap; }
.hk-app.is-bare { grid-template-rows: 0 0 minmax(0, 1fr) 0 0; }
.hk-app.is-bare > .hk-stage { grid-row: 1 / -1; }
.hk-app.is-bare > .hk-top, .hk-app.is-bare > .hk-bar, .hk-app.is-bare > .hk-strip, .hk-app.is-bare > .hk-tts-cap { visibility: hidden; opacity: 0; }
.hk-app.is-booting { background: var(--c-primary-deep); }
.hk-stage { position: relative; overflow: hidden; isolation: isolate; }
.hk-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; will-change: transform, opacity;
  /* 화면은 불투명(전환 때 겹쳐 비치지 않게). 은은한 빛은 위 가장자리에 닿지 않게 안쪽에 둔다 */
  background:
    radial-gradient(55% 32% at 88% 30%, color-mix(in oklab, var(--c-primary) 7%, transparent) 0%, transparent 70%),
    radial-gradient(60% 34% at 0% 96%, color-mix(in oklab, var(--c-secondary) 6%, transparent) 0%, transparent 70%),
    var(--c-bg);
}
.is-contrast .hk-screen { background: #000; }
.hk-screen.is-leaving { pointer-events: none; z-index: 0; }
.hk-screen.is-current { z-index: 1; }
.hk-screen-body {
  flex: 1; min-height: 0;
  padding: var(--sp-6) var(--gutter) var(--sp-7);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}
.hk-screen-body::-webkit-scrollbar { display: none; }
.hk-stage.is-warned [role="textbox"] { filter: blur(calc(8px * var(--ui))); }

/* ───────── 머리 띠 ───────── */
.hk-top {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5);
  padding: 0 var(--gutter);
  transition: opacity var(--dur-base) var(--ease-standard);
}
.hk-top__brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.hk-top__logo { width: calc(56px * var(--ui)); height: calc(56px * var(--ui)); }
.hk-top__name { font-size: max(14px, calc(32px * var(--ui-text) * min(var(--text-scale), 1.2))); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); white-space: nowrap; }
.hk-top[data-mode="main"] .hk-top__brand { opacity: 0; transform: translate3d(0, calc(-8px * var(--ui)), 0); }
.hk-top__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: center; opacity: 0; }
.hk-top.has-title .hk-top__title { opacity: 1; }
.hk-top__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-5); }
.hk-top__clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.hk-top__clock-in { display: contents; }   /* 시계·날짜는 언어 형식으로 만들므로 번역하지 않는다(data-no-i18n) */
.hk-top__time { font-family: var(--font-num); font-size: max(14px, calc(36px * var(--ui-text) * min(var(--text-scale), 1.2))); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hk-top__date { font-size: max(14px, calc(24px * var(--ui-text) * min(var(--text-scale), 1.2))); color: var(--c-text-2); font-weight: var(--fw-medium); }
.is-landscape .hk-top__logo { width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); }

/* 오프라인·오류 띠 */
.hk-strip { position: relative; z-index: 2; display: flex; justify-content: center; padding: 0 var(--gutter) var(--sp-3); }
.hk-strip__item {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: calc(64px * var(--ui)); padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--c-warn-soft); color: color-mix(in oklab, var(--c-warn) 80%, #000);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  box-shadow: inset 0 0 0 var(--border-w) color-mix(in oklab, var(--c-warn) 28%, transparent);
}
:root[data-theme="dark"] .hk-strip__item { color: var(--c-warn); }
.hk-strip__item .hk-ic { font-size: 1.15em; }
.is-contrast .hk-strip__item { background: #000; color: #FFD400; box-shadow: inset 0 0 0 var(--border-w) #FFD400; }

/* ───────── 아래 공통 바 ───────── */
.hk-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 0 calc(var(--gutter) * 0.6);
  background: color-mix(in oklab, var(--c-surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(calc(18px * var(--ui)));
  -webkit-backdrop-filter: saturate(1.4) blur(calc(18px * var(--ui)));
  box-shadow: 0 -1px 0 var(--c-line), 0 calc(-18px * var(--ui)) calc(40px * var(--ui)) calc(-24px * var(--ui)) rgb(15 40 50 / .18);
  --fs-bar: calc(28px * var(--ui) * min(var(--text-scale), 1.15));
}
:root[data-theme="dark"] .hk-bar { box-shadow: 0 -1px 0 var(--c-line), 0 calc(-18px * var(--ui)) calc(40px * var(--ui)) calc(-24px * var(--ui)) rgb(0 0 0 / .6); }
.is-contrast .hk-bar { background: #000; box-shadow: 0 calc(-1 * var(--border-w)) 0 #fff; backdrop-filter: none; }
.hk-bar__nav, .hk-bar__a11y { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.hk-bar__help { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-text-2); font-size: var(--fs-bar); font-weight: var(--fw-medium); padding-left: var(--sp-3); max-width: calc(560px * var(--ui)); line-height: 1.3; word-break: keep-all; }
.hk-bar__help .hk-ic { font-size: 1.3em; color: var(--c-primary); }
.is-portrait .hk-bar__help { max-width: calc(440px * var(--ui)); }

/* ───────── 단추 ───────── */
.hk-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: var(--touch-min); min-width: var(--touch-min);
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: var(--track);
  white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear, opacity var(--dur-fast) linear;
}
.hk-btn--lg { font-size: var(--fs-body); min-height: var(--touch-min); }
.hk-btn--xl { font-size: var(--fs-lg); min-height: calc(max(var(--touch-min), 112px * var(--ui))); padding: 0 var(--sp-7); }
.hk-btn--block { width: 100%; }
.hk-btn__icon { display: inline-flex; font-size: 1.25em; }
.hk-btn--primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 calc(10px * var(--ui)) calc(24px * var(--ui)) calc(-12px * var(--ui)) color-mix(in oklab, var(--c-primary) 70%, transparent); }
.hk-btn--secondary { background: var(--c-surface); color: var(--c-text); box-shadow: inset 0 0 0 var(--border-w) var(--c-line-strong), var(--shadow-1); }
.hk-btn--ghost { background: transparent; color: var(--c-primary); }
.hk-btn--danger { background: var(--c-danger); color: #fff; }
.hk-btn--nav {
  background: var(--c-sunken); color: var(--c-text);
  font-size: var(--fs-bar); min-height: calc(max(var(--touch-min), 108px * var(--ui))); padding: 0 var(--sp-6) 0 var(--sp-5);
  border-radius: var(--r-lg);
}
.is-landscape .hk-btn--nav { min-height: calc(max(var(--touch-min), 96px * var(--ui))); }
.hk-btn--nav .hk-btn__icon { font-size: 1.35em; color: var(--c-primary); }
.hk-btn.is-pressed, .hk-btn:active { transform: scale(.97); }
.hk-btn--primary.is-pressed { background: var(--c-primary-strong); }
.hk-btn--secondary.is-pressed, .hk-btn--nav.is-pressed { background: color-mix(in oklab, var(--c-sunken) 70%, var(--c-line-strong)); }
.hk-btn:disabled:not(.is-busy) { opacity: .45; }
.hk-btn__spinner { display: none; width: 1em; height: 1em; border-radius: 50%; border: .14em solid currentColor; border-right-color: transparent; animation: hk-spin var(--dur-t7) linear infinite; }
.hk-btn.is-busy .hk-btn__spinner { display: inline-block; }
.hk-btn.is-busy .hk-btn__icon { display: none; }
.is-contrast .hk-btn--primary { background: #FFD400; color: #000; box-shadow: none; }
.is-contrast .hk-btn--secondary, .is-contrast .hk-btn--nav { background: #000; color: #fff; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-btn--nav .hk-btn__icon { color: #FFD400; }
.is-contrast .hk-btn.is-pressed { background: #FFD400; color: #000; }

/* 켜기/끄기(접근성 모드) — 아이콘 위·글자 아래, 켜지면 주색 면 + 「켜짐」 글자 */
.hk-toggle {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6px * var(--ui));
  min-width: calc(max(var(--touch-min), 132px * var(--ui))); min-height: calc(max(var(--touch-min), 108px * var(--ui)));
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-sunken);
  color: var(--c-text-2);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.hk-toggle .hk-toggle__icon { color: var(--c-primary); }
.hk-toggle[aria-pressed="true"] .hk-toggle__icon { color: inherit; }
.is-landscape .hk-toggle { min-height: calc(max(var(--touch-min), 96px * var(--ui))); flex-direction: row; gap: var(--sp-3); padding: 0 var(--sp-5); }
.hk-toggle__icon { display: inline-flex; font-size: max(14px, calc(40px * var(--ui-text) * min(var(--text-scale), 1.15))); }
.hk-toggle__text { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.is-landscape .hk-toggle__text { align-items: flex-start; }
.hk-toggle__label { font-size: max(14px, calc(24px * var(--ui-text) * min(var(--text-scale), 1.15))); font-weight: var(--fw-semibold); white-space: nowrap; }
.hk-toggle__state { font-size: max(14px, calc(17px * var(--ui-text) * min(var(--text-scale), 1.15))); font-weight: var(--fw-bold); letter-spacing: .02em; min-height: 1em; }
.hk-toggle__state:empty { display: none; }
.hk-toggle[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); }
.hk-toggle.is-pressed { transform: scale(.95); }
.hk-toggle[aria-pressed="false"].is-pressed { background: color-mix(in oklab, var(--c-sunken) 70%, var(--c-line-strong)); }
.is-contrast .hk-toggle { color: #fff; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-toggle[aria-pressed="true"] { background: #FFD400; color: #000; box-shadow: none; }

/* 세로 화면에서 보기 설정 단추가 4개 이상이면(모션 줄이기·언어 단추 포함) 폭을 줄여 한 줄에 맞춘다. 「언어」 단추는 토글과 같은 세로형(아이콘 위·글자 아래) */
.is-portrait .hk-bar__a11y[data-n="4"], .is-portrait .hk-bar__a11y[data-n="5"] { gap: var(--sp-2); }
.is-portrait .hk-bar__a11y[data-n="4"] .hk-toggle, .is-portrait .hk-bar__a11y[data-n="5"] .hk-toggle { min-width: calc(max(var(--touch-min), 116px * var(--ui))); padding: var(--sp-2) var(--sp-2); }
.is-portrait .hk-bar__a11y[data-n="5"] .hk-toggle { min-width: calc(max(var(--touch-min), 104px * var(--ui))); }
.is-portrait .hk-bar__a11y[data-n="5"] .hk-toggle__label { font-size: max(14px, calc(22px * var(--ui-text) * min(var(--text-scale), 1.15))); }
.hk-bar__lang { flex-direction: column; gap: calc(6px * var(--ui)); min-width: calc(max(var(--touch-min), 116px * var(--ui))); min-height: calc(max(var(--touch-min), 108px * var(--ui))); padding: var(--sp-2) var(--sp-3); font-size: max(14px, calc(24px * var(--ui-text) * min(var(--text-scale), 1.15))); }
.hk-bar__lang .hk-btn__icon { font-size: max(14px, calc(40px * var(--ui-text) * min(var(--text-scale), 1.15))); }
.is-landscape .hk-bar__lang { flex-direction: row; gap: var(--sp-3); min-height: calc(max(var(--touch-min), 96px * var(--ui))); padding: 0 var(--sp-5); }
.is-portrait .hk-bar__a11y[data-n="5"] .hk-bar__lang { min-width: calc(max(var(--touch-min), 104px * var(--ui))); padding: var(--sp-2) var(--sp-2); font-size: max(14px, calc(22px * var(--ui-text) * min(var(--text-scale), 1.15))); }

/* 물결(tap-ripple) */
.hk-ripple { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; z-index: 0; opacity: 0; }
.hk-btn--primary .hk-ripple { background: #fff; }
.hk-btn > :not(.hk-ripple), .hk-toggle > :not(.hk-ripple), .hk-menu-card > :not(.hk-ripple) { position: relative; z-index: 1; }

/* ───────── 큰 메뉴 카드 ───────── */
.hk-menu-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "tile go" ". ." "text text";
  text-align: left;
  padding: var(--sp-7);
  min-height: var(--touch-min);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-2), inset 0 0 0 var(--border-w) color-mix(in oklab, var(--c-line) 70%, transparent);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.hk-menu-card .hk-ripple { color: var(--tone); }
.hk-menu-card__glow {
  position: absolute !important; z-index: 0 !important; inset: auto -30% -45% auto; width: 90%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--tone) 16%, transparent), transparent 72%);
  pointer-events: none;
}
.hk-menu-card__tile {
  grid-area: tile;
  display: grid; place-items: center;
  width: calc(128px * var(--ui)); height: calc(128px * var(--ui));
  border-radius: calc(36px * var(--ui));
  background: var(--tone-soft);
  color: var(--tone);
  font-size: max(14px, calc(76px * var(--ui-text)));
  box-shadow: inset 0 0 0 var(--border-w) color-mix(in oklab, var(--tone) 14%, transparent);
}
.hk-menu-card__go {
  grid-area: go; justify-self: end; align-self: start;
  display: grid; place-items: center;
  width: calc(76px * var(--ui)); height: calc(76px * var(--ui));
  border-radius: 50%;
  background: var(--c-sunken); color: var(--c-text-2);
  font-size: max(14px, calc(38px * var(--ui-text)));
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) linear;
}
.hk-menu-card__text { grid-area: text; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hk-menu-card__label { font-size: var(--fs-menu); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--track-tight); word-break: keep-all; overflow-wrap: anywhere; }
.hk-menu-card__sub { font-size: var(--fs-sm); color: var(--c-text-2); font-weight: var(--fw-medium); line-height: 1.35; word-break: keep-all; }
.hk-menu-card.is-pressed { transform: scale(.97); box-shadow: var(--shadow-press), inset 0 0 0 var(--border-w) color-mix(in oklab, var(--tone) 40%, transparent); background: color-mix(in oklab, var(--tone-soft) 55%, var(--c-surface)); }
.hk-menu-card.is-pressed .hk-menu-card__go { transform: translate3d(calc(6px * var(--ui)), 0, 0); background: var(--tone); color: var(--c-surface); }
/* 작게(허브 칸) */
.hk-menu-card--compact { padding: var(--sp-6); grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; grid-template-areas: "tile text go"; align-items: center; column-gap: var(--sp-5); }
.hk-menu-card--compact .hk-menu-card__tile { width: calc(104px * var(--ui)); height: calc(104px * var(--ui)); border-radius: calc(30px * var(--ui)); font-size: max(14px, calc(60px * var(--ui-text))); }
.hk-menu-card--compact .hk-menu-card__go { align-self: center; width: calc(64px * var(--ui)); height: calc(64px * var(--ui)); font-size: max(14px, calc(32px * var(--ui-text))); }
.hk-menu-card--compact .hk-menu-card__label { font-size: var(--fs-xl); }
.hk-menu-card--compact .hk-menu-card__text { gap: var(--sp-1); }
.is-contrast .hk-menu-card { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-menu-card__glow { display: none; }
.is-contrast .hk-menu-card__tile { background: #000; box-shadow: inset 0 0 0 var(--border-w) #FFD400; }
.is-contrast .hk-menu-card__go { background: #FFD400; color: #000; }
.is-contrast .hk-menu-card__sub { color: #fff; }
.is-contrast .hk-menu-card.is-pressed { background: #FFD400; color: #000; }
.is-contrast .hk-menu-card.is-pressed .hk-menu-card__sub, .is-contrast .hk-menu-card.is-pressed .hk-menu-card__tile { color: #000; }

/* ───────── 칩 ───────── */
.hk-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: calc(52px * var(--ui)); padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: max(14px, calc(24px * var(--ui-text) * min(var(--text-scale), 1.2))); font-weight: var(--fw-semibold); white-space: nowrap;
  background: var(--c-sunken); color: var(--c-text-2);
}
.hk-chip .hk-ic { font-size: 1.2em; }
.hk-chip--warn { background: var(--c-warn-soft); color: color-mix(in oklab, var(--c-warn) 80%, #000); }
.hk-chip--soft { background: var(--c-primary-soft); color: var(--c-primary); }
.hk-chip--glass { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); backdrop-filter: blur(calc(12px * var(--ui))); -webkit-backdrop-filter: blur(calc(12px * var(--ui))); }
.is-contrast .hk-chip { background: #000; color: #FFD400; box-shadow: inset 0 0 0 var(--border-w) #FFD400; }

/* ───────── 빈 상태 ───────── */
.hk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5); padding: var(--sp-8) var(--sp-5); max-width: calc(820px * var(--ui)); margin: 0 auto; }
.hk-empty__art { position: relative; width: calc(420px * var(--ui)); height: calc(420px * var(--ui)); display: grid; place-items: center; margin-bottom: var(--sp-2); }
.hk-empty__ring { position: absolute; border-radius: 50%; inset: 0; margin: auto; box-shadow: inset 0 0 0 calc(2px * var(--ui)) color-mix(in oklab, var(--tone) 14%, transparent); }
.hk-empty__ring--1 { width: 56%; height: 56%; background: color-mix(in oklab, var(--tone) 6%, transparent); }
.hk-empty__ring--2 { width: 78%; height: 78%; box-shadow: inset 0 0 0 calc(2px * var(--ui)) color-mix(in oklab, var(--tone) 10%, transparent); }
.hk-empty__ring--3 { width: 100%; height: 100%; box-shadow: inset 0 0 0 calc(2px * var(--ui)) color-mix(in oklab, var(--tone) 6%, transparent); }
.hk-empty__tile {
  position: relative; display: grid; place-items: center;
  width: calc(168px * var(--ui)); height: calc(168px * var(--ui)); border-radius: calc(48px * var(--ui));
  background: var(--c-surface); color: var(--tone); font-size: max(14px, calc(96px * var(--ui-text)));
  box-shadow: var(--shadow-2), inset 0 0 0 var(--border-w) color-mix(in oklab, var(--tone) 16%, transparent);
}
.hk-empty__title { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: var(--lh-tight); word-break: keep-all; }
.hk-empty__body { font-size: var(--fs-body); color: var(--c-text-2); word-break: keep-all; max-width: 26em; }
.hk-empty__help { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: inset 0 0 0 var(--border-w) var(--c-line); word-break: keep-all; text-align: left; }
.hk-empty__help .hk-ic { font-size: 1.3em; color: var(--c-primary); }
.is-contrast .hk-empty__tile, .is-contrast .hk-empty__help { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-empty__ring { display: none; }
.is-contrast .hk-empty__body, .is-contrast .hk-empty__help { color: #fff; }

/* ───────── 진행 표시 ───────── */
.hk-progress { position: relative; width: 100%; height: calc(12px * var(--ui)); border-radius: var(--r-pill); background: var(--c-sunken); overflow: hidden; }
.hk-progress__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--c-primary); border-radius: inherit; transition: transform var(--dur-base) var(--ease-standard); }
.hk-progress.is-indeterminate .hk-progress__fill { width: 40%; transform: none; animation: hk-indeterminate 1.4s var(--ease-standard) infinite; }
.hk-spinner { display: inline-block; border-radius: 50%; border: calc(6px * var(--ui)) solid var(--c-primary-soft-2); border-top-color: var(--c-primary); animation: hk-spin var(--dur-t8) linear infinite; }
.hk-spinner--md { width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); }
.hk-spinner--lg { width: calc(96px * var(--ui)); height: calc(96px * var(--ui)); border-width: calc(8px * var(--ui)); }
.is-contrast .hk-spinner { border-color: #333; border-top-color: #FFD400; }
.is-contrast .hk-progress__fill { background: #FFD400; }

/* ───────── 겹침(대화상자·알림창·카운트다운) ───────── */
.hk-overlays { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.hk-layer { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--gutter); pointer-events: auto; }
.is-low .hk-layer { place-items: end center; padding-bottom: calc(var(--bottombar-h) + var(--sp-5)); }
.hk-backdrop { position: absolute; inset: 0; background: var(--c-overlay); backdrop-filter: blur(calc(10px * var(--ui))) saturate(.9); -webkit-backdrop-filter: blur(calc(10px * var(--ui))) saturate(.9); }
.hk-dialog {
  position: relative;
  width: min(calc(880px * var(--ui)), 100%);
  max-height: calc(100% - var(--sp-6));
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5);
  padding: var(--sp-9) var(--sp-8) var(--sp-8);
  border-radius: calc(48px * var(--ui));
  background: var(--c-surface);
  box-shadow: var(--shadow-3), inset 0 0 0 var(--border-w) color-mix(in oklab, var(--c-line) 60%, transparent);
}
.hk-dialog__icon { display: grid; place-items: center; width: calc(128px * var(--ui)); height: calc(128px * var(--ui)); border-radius: calc(40px * var(--ui)); background: var(--tone-soft); color: var(--tone); font-size: max(14px, calc(76px * var(--ui-text))); }
.hk-dialog__title { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: var(--lh-tight); word-break: keep-all; }
.hk-dialog__body { font-size: var(--fs-body); color: var(--c-text-2); word-break: keep-all; }
.hk-dialog__details { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.hk-dialog__row { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: baseline; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--c-surface-2); box-shadow: inset 0 0 0 var(--border-w) var(--c-line); text-align: left; }
.hk-dialog__row dt { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--tone); white-space: nowrap; }
.hk-dialog__row dt .hk-ic { font-size: 1.25em; }
.hk-dialog__row dd { font-size: var(--fs-body); color: var(--c-text); word-break: keep-all; line-height: 1.4; }
.hk-dialog__actions { width: 100%; display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.hk-dialog__actions.is-multi { grid-template-columns: 1fr 1.35fr; }
.is-contrast .hk-dialog { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-dialog__row { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-dialog__icon { background: #000; box-shadow: inset 0 0 0 var(--border-w) var(--tone); }
.is-contrast .hk-dialog__body { color: #fff; }
.is-contrast .hk-backdrop { backdrop-filter: none; }

/* countdown-ring */
.hk-dialog--countdown { padding-top: var(--sp-8); }
.hk-dialog__count { display: grid; place-items: center; margin-bottom: var(--sp-2); }
.hk-count { position: relative; width: calc(300px * var(--ui)); height: calc(300px * var(--ui)); display: grid; place-items: center; }
.hk-count__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hk-count__track { fill: none; stroke: var(--c-sunken); stroke-width: 14; }
.hk-count__arc { fill: none; stroke: var(--c-primary); stroke-width: 14; stroke-linecap: round; transition: stroke .3s linear; }
.hk-count.is-urgent .hk-count__arc { stroke: var(--c-danger); }
.hk-count__center { position: relative; display: flex; align-items: baseline; gap: calc(6px * var(--ui)); }
.hk-count__num { font-family: var(--font-num); font-size: max(14px, calc(132px * var(--ui-text))); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1; }
.hk-count__unit { font-size: var(--fs-lg); color: var(--c-text-2); font-weight: var(--fw-semibold); }
.is-contrast .hk-count__track { stroke: #333; }
.is-contrast .hk-count__arc { stroke: #FFD400; }

/* 진행 겹침 */
.hk-dialog--busy { width: min(calc(640px * var(--ui)), 100%); }
.hk-busy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); padding: var(--sp-4) 0; }
.hk-busy__label { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }

/* 토스트(성공만) */
.hk-toast {
  position: absolute; left: 50%; bottom: calc(var(--bottombar-h) + var(--sp-6)); transform: translate3d(-50%, 0, 0);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: calc(96px * var(--ui)); padding: 0 var(--sp-7);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--c-text) 92%, transparent); color: var(--c-surface);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-3);
  pointer-events: none;
}
.hk-toast .hk-ic { font-size: 1.4em; color: var(--c-secondary); }
:root[data-theme="dark"] .hk-toast { background: #E8EFF2; color: #0A1316; }
.is-contrast .hk-toast { background: #000; color: #fff; box-shadow: inset 0 0 0 var(--border-w) #FFD400; }

/* ───────── 키보드 시트(O6) — 키 자체는 keyboard 모듈 ───────── */
.hk-kbsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }
/* 키보드 본체(keyboard 모듈의 kb-dock, 화면 아래 고정)는 하단 공통 바(뒤로·처음으로·접근성 단추) 바로 위에 놓는다 — 키보드가 떠 있어도 바를 누를 수 있게(§6-18) */
.hk-kbsheet .kb-host.kb-dock { bottom: var(--bottombar-h); }
/* 실제 키보드(keyboard.css)는 스스로 시트 모양을 그린다 — 여기서는 셸 색으로 토큰만 맞춘다 */
:root .hk-kbsheet .kb-host, :root[data-theme] .hk-kbsheet .kb-host { --kb-accent: var(--c-primary); --kb-accent-ink: var(--c-on-primary); --kb-accent-soft: var(--c-primary-soft); --kb-ring: var(--c-primary); }   /* 키보드 모듈의 어둡게 규칙(파랑)보다 우선 — 셸 강조색으로 통일 */
:root .hk-app .kbf, :root[data-theme] .hk-app .kbf { --kb-ring: var(--c-primary); --kb-accent: var(--c-primary); --kb-pre-bg: color-mix(in oklab, var(--c-primary) 20%, transparent); }
.hk-kb-fallback { background: var(--c-surface); border-radius: calc(40px * var(--ui)) calc(40px * var(--ui)) 0 0; box-shadow: 0 -1px 0 var(--c-line), 0 calc(-24px * var(--ui)) calc(60px * var(--ui)) calc(-20px * var(--ui)) rgb(15 40 50 / .3); display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-8); color: var(--c-text-2); font-size: var(--fs-body); }

/* ───────── 청소용 화면 잠금(core/clean-lock.js) ───────── */
.hk-top__clock, .hk-attract__clock { position: relative; -webkit-touch-callout: none; user-select: none; }
/* 길게 누르는 동안: 시계 아래에 차오르는 막대(시간 = 설정 kiosk.clean_lock_hold_s) */
.hk-top__clock::after, .hk-attract__clock::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-10px * var(--ui)); height: calc(5px * var(--ui)); border-radius: 99px; background: var(--c-primary); transform: scaleX(0); transform-origin: 100% 50%; opacity: 0; }
.hk-top__clock.is-holding::after, .hk-attract__clock.is-holding::after { opacity: 1; animation: hk-hold var(--hold, 5000ms) linear forwards; }
@keyframes hk-hold { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hk-cleanlock { position: fixed; inset: 0; z-index: 200; pointer-events: auto; display: grid; place-items: center; padding: var(--gutter); background: color-mix(in oklab, var(--c-bg) 72%, transparent); backdrop-filter: blur(calc(24px * var(--ui))) saturate(1.2); -webkit-backdrop-filter: blur(calc(24px * var(--ui))) saturate(1.2); touch-action: none; animation: hk-cl-in var(--dur-base) var(--ease-out) both; }
.hk-cleanlock.is-leaving { animation: hk-cl-out var(--dur-fast) var(--ease-in) both; }
.hk-cleanlock__card { width: min(100%, calc(820px * var(--ui))); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); padding: calc(64px * var(--ui)) var(--sp-8) var(--sp-7); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--shadow-3), inset 0 0 0 var(--border-w) var(--c-line); }
.hk-cleanlock__ic { width: calc(132px * var(--ui)); height: calc(132px * var(--ui)); border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); font-size: calc(64px * var(--ui)); box-shadow: 0 0 0 calc(14px * var(--ui)) color-mix(in oklab, var(--c-primary-soft) 45%, transparent); animation: hk-cl-breathe 2.6s ease-in-out infinite; }
.hk-cleanlock__title { margin: var(--sp-3) 0 0; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.2; word-break: keep-all; }
.hk-cleanlock__body { margin: 0; color: var(--c-text-2); font-size: var(--fs-body); line-height: 1.5; word-break: keep-all; }
.hk-cleanlock__count { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-4); }
.hk-cleanlock__left { font-size: var(--fs-hero); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--c-primary); line-height: 1; }
.hk-cleanlock__unit { font-size: var(--fs-body); color: var(--c-text-2); }
.hk-cleanlock__bar { width: 100%; height: calc(10px * var(--ui)); border-radius: 99px; background: var(--c-surface-2); box-shadow: inset 0 0 0 var(--border-w) var(--c-line); overflow: hidden; }
.hk-cleanlock__bar i { display: block; height: 100%; width: 100%; background: var(--c-primary); border-radius: inherit; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform var(--dur-fast) linear; }
.hk-cleanlock__staff { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; color: var(--c-text-3); font-size: max(13px, calc(24px * var(--ui-text))); }
/* 잠금 화면을 길게 누르는 동안(일찍 풀기): 화면 아래에 차오르는 막대 */
.hk-cleanlock__ring { position: absolute; left: 0; right: 0; bottom: 0; height: calc(8px * var(--ui)); background: var(--c-primary); transform: scaleX(0); transform-origin: 0 50%; }
.hk-cleanlock.is-holding .hk-cleanlock__ring { animation: hk-hold var(--hold, 5000ms) linear forwards; transform-origin: 0 50%; }
.is-contrast .hk-cleanlock { background: #000; backdrop-filter: none; }
.is-contrast .hk-cleanlock__card { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-cleanlock__left, .is-contrast .hk-cleanlock__ic { color: #FFD400; }
.is-contrast .hk-cleanlock__bar i, .is-contrast .hk-cleanlock__ring { background: #FFD400; }
@keyframes hk-cl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hk-cl-out { to { opacity: 0; } }
@keyframes hk-cl-breathe { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hk-cleanlock, .hk-cleanlock__ic { animation: none; } }
.is-reduced .hk-cleanlock__ic { animation: none; }

/* ───────── 음성 안내(docs/VOICE-KIOSK.md §6): 자막 줄 · 음성 단추 · 다시 듣기 ───────── */
.hk-tts-cap { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--sp-4); min-height: 48px; padding: var(--sp-3) var(--gutter); background: var(--c-text); color: var(--c-surface); cursor: pointer; animation: hk-tts-cap-in var(--dur-t3) var(--ease-out, ease-out); }   /* 하단 바 위 전용 줄 — 완전 불투명, 아무것도 가리지 않음 */
.hk-tts-cap__x { flex: none; margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .14); font-size: 22px; }
.hk-tts-cap[hidden] { display: none; }
.hk-tts-cap > .hk-ic { flex: none; font-size: max(20px, calc(40px * var(--ui-text))); color: var(--c-primary-soft, #8FD3D0); animation: hk-tts-bob var(--dur-t9) ease-in-out infinite; }
.hk-tts-cap__body { min-width: 0; flex: 1 1 auto; display: grid; gap: calc(2px * var(--ui)); }
.hk-tts-cap__t { margin: 0; font-size: max(16px, calc(30px * var(--ui-text) * min(var(--text-scale), 1.25))); font-weight: var(--fw-semibold, 600); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* 두 줄까지, 넘치면 말줄임 */
.hk-tts-cap__n { margin: 0; font-size: max(14px, calc(18px * var(--ui-text) * min(var(--text-scale), 1.2))); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-tts-cap__n[hidden] { display: none; }
.is-contrast .hk-tts-cap { background: #000; color: #FFD400; box-shadow: inset 0 3px 0 #FFD400; }
.is-contrast .hk-tts-cap > .hk-ic { color: #FFD400; }
@keyframes hk-tts-cap-in { from { opacity: 0; } }
@keyframes hk-tts-bob { 50% { transform: scale(1.12); } }
:root.motion-reduced .hk-tts-cap, :root.motion-reduced .hk-tts-cap > .hk-ic { animation: none; }
.hk-bar__replay { gap: var(--sp-3); min-height: calc(max(var(--touch-min), 96px * var(--ui))); }
.is-portrait .hk-bar__a11y[data-n="6"] { gap: var(--sp-1, 4px); }
.is-portrait .hk-bar__a11y[data-n="6"] .hk-toggle { min-width: calc(max(var(--touch-min), 92px * var(--ui))); padding: var(--sp-2) var(--sp-1, 4px); }
.is-portrait .hk-bar__a11y[data-n="6"] .hk-toggle__label, .is-portrait .hk-bar__a11y[data-n="6"] .hk-bar__lang { font-size: max(14px, calc(19px * var(--ui-text) * min(var(--text-scale), 1.1))); }
.is-portrait .hk-bar__a11y[data-n="6"] .hk-bar__lang { min-width: calc(max(var(--touch-min), 92px * var(--ui))); padding: var(--sp-2) var(--sp-1, 4px); }
/* 세로 화면: 음성 단추가 있으면 「다시 듣기」는 아이콘 + 아래 글자(작게), 도움 안내 글은 접는다 */
.is-portrait .hk-bar__replay { min-width: calc(max(var(--touch-min), 104px * var(--ui))); padding: var(--sp-2) var(--sp-2); flex-direction: column; gap: calc(2px * var(--ui)); }
.is-portrait .hk-bar__replay .hk-btn__label { font-size: max(14px, calc(22px * var(--ui-text) * min(var(--text-scale), 1.15))); line-height: 1.1; white-space: nowrap; }   /* 아이콘만 두면 무슨 단추인지 모른다 — 다른 단추처럼 글자를 아래에 */
.is-portrait .hk-bar:has(.hk-bar__replay:not([hidden])) .hk-bar__help { display: none; }
@media (max-width: 520px) {   /* 아주 좁은 화면(폰 크기 시험용): 「다시 듣기」는 숨기고 공통 바 단추를 촘촘히 */
  .hk-bar__replay { display: none; }
  .hk-bar__a11y[data-n="5"] { gap: 2px; }
  .hk-bar__a11y[data-n="5"] .hk-toggle { min-width: 44px; padding-inline: 2px; }
}

.hk-bar__voice { order: -1; }   /* 음성 안내 단추를 보기 설정 맨 앞에 */

/* ───────── 다국어(docs/I18N-KIOSK.md §4): 언어별 글꼴(시스템 글꼴 우선 — 글꼴 파일을 새로 싣지 않음)·줄바꿈 ───────── */
html[lang="ja"] { --font: "Pretendard Variable", "Pretendard", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; }
html[lang="zh"] { --font: "Pretendard Variable", "Pretendard", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif; }
html:is([lang="en"], [lang="vi"], [lang="mn"]) { --font: "Pretendard Variable", "Pretendard", "Segoe UI", "Roboto", "Noto Sans", "Helvetica Neue", Arial, system-ui, sans-serif; }
/* 한국어는 낱말 단위로(keep-all), 일·중은 글자 단위로 줄을 바꿔야 한다. 영·베·몽은 긴 낱말이 넘치지 않게 */
html:is([lang="ja"], [lang="zh"]) body :where(*) { word-break: normal !important; line-break: strict; }
html:is([lang="en"], [lang="vi"], [lang="mn"]) body :where(*) { word-break: normal !important; overflow-wrap: break-word; }
html[lang="en"] body { hyphens: manual; }   /* 낱말 가운데 자동 하이픈(「treat-ment」) 없이 — 긴 제목은 글자 크기로 맞춘다 */
html[lang="vi"] body { line-height: 1.5; }   /* 성조 부호가 위아래로 쌓인다 */

/* 언어 고르기 시트: 각 언어를 그 언어 이름으로(국기 없음) */
.hk-langsheet { max-width: min(92vw, calc(980px * var(--ui))); }
.hk-langsheet__body { display: grid; gap: var(--sp-5); }
.hk-langsheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.hk-langsheet__opt { min-height: calc(max(var(--touch-min), 120px * var(--ui))); font-size: var(--fs-lg); justify-content: center; }
.hk-langsheet__opt[aria-pressed="true"] { box-shadow: 0 0 0 calc(4px * var(--ui)) color-mix(in oklab, var(--c-primary) 30%, transparent); }
/* 동의·고지 아래 「한국어 원문 기준」 안내 — 한국어 화면에서는 숨김 */
.i18n-legal-note { margin: 0; font-size: var(--fs-sm); color: var(--c-text-3); }
html[lang="ko"] .i18n-legal-note { display: none; }
/* 긴 외국어(영·베·몽은 한국어보다 30~60% 길다): 메뉴 카드 제목·공통 바 단추 글자를 한 단계 줄이고 두 줄까지 */
html:not([lang="ko"]) .hk-menu-card__label { font-size: calc(var(--fs-menu) * .78); line-height: 1.12; }
html:is([lang="vi"], [lang="mn"]) .hk-menu-card__label { font-size: calc(var(--fs-menu) * .7); }
html:not([lang="ko"]) .hk-menu-card__sub { font-size: max(14px, calc(var(--fs-sm) * .92)); }
/* 공통 바 단추 글자: 낱말은 끊지 않고(한 글자씩 세로로 꺾이지 않게) 두 줄까지 — 그래도 넘치면 바가 접근성 단추를 「보기 설정」으로 접는다(chrome.js fit) */
html:not([lang="ko"]) .hk-bar .hk-toggle__label, html:not([lang="ko"]) .hk-bar .hk-btn__label { white-space: normal; text-align: center; line-height: 1.1; font-size: max(14px, calc(19px * var(--ui-text) * min(var(--text-scale), 1.1))); overflow-wrap: normal; word-break: normal !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html:not([lang="ko"]) .is-portrait .hk-bar .hk-toggle { max-width: calc(150px * var(--ui)); }
html:not([lang="ko"]) .hk-bar__help { font-size: max(14px, calc(20px * var(--ui-text))); }
/* 긴 외국어: 한 줄로 묶어 둔 칩·단추 글자가 상자 밖으로 나가지 않게 줄바꿈 허용(한국어는 그대로 한 줄) */
html:not([lang="ko"]) :is(.fx-fact, .gd-hcard__fact, .hk-attract__pill, .fx-today__slot, .hk-dialog__actions .hk-btn, .kx-actions .hk-btn, .hk-chip) { white-space: normal; min-width: 0; max-width: 100%; height: auto; }
html:not([lang="ko"]) :is(.fx-fact, .gd-hcard__fact, .hk-attract__pill) { padding-block: var(--sp-2); line-height: 1.2; }
html:not([lang="ko"]) :is(.fx-fact, .gd-hcard__fact, .hk-attract__pill, .fx-today__slot, .hk-btn__label, .hk-chip) > span, html:not([lang="ko"]) .hk-btn__label { white-space: normal; overflow-wrap: anywhere; text-align: center; }
html:not([lang="ko"]) .hk-attract__preview { flex-wrap: wrap; justify-content: center; max-width: 100%; }

/* 접힌 공통 바: 큰 글씨·고대비·낮은 화면·모션 줄이기 대신 「보기 설정」 하나 */
.hk-bar.is-folded .hk-bar__a11y > .hk-toggle:not(.hk-bar__voice) { display: none; }
.hk-bar__view[hidden] { display: none; }
.hk-viewsheet { max-width: min(92vw, calc(900px * var(--ui))); }
.hk-viewsheet__grid { order: 1; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-2); }   /* 제목 아래, 닫기 위 */
.hk-viewsheet .hk-dialog__actions { order: 2; }
.hk-viewsheet__opt { min-height: calc(max(var(--touch-min), 120px * var(--ui))); flex-direction: column; justify-content: center; gap: var(--sp-2); }
/* 긴 영어·베·몽 메뉴 제목: 단계로 더 줄인다(낱말을 자르지 않으려고) */
html:is([lang="en"], [lang="vi"], [lang="mn"]) .hk-menu-card__label { font-size: calc(var(--fs-menu) * .68); }
/* 빌드 판(구석에 작게 — 업데이트 반영 확인용, 누르는 것 없음) */
.hk-build { position: fixed; z-index: 90; right: 6px; top: 2px; font: 500 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--c-text-3); opacity: .55; pointer-events: none; letter-spacing: .02em; }
.hk-build[data-state="stale"], .hk-build[data-state="reloading"] { color: #E0A100; opacity: 1; }
.hk-build.is-diag { font-size: 14px; opacity: .9; background: rgb(0 0 0 / .6); color: #B9F6CA; padding: 2px 6px; border-radius: 6px; }