/* 키오스크 화면별 스타일: K01 대기화면 · K02 메인 · 세부 메뉴 뼈대 · 콘텐츠 없음 */

/* ═════════ K01 대기화면 ═════════ */
.hk-attract {
  --att-base: color-mix(in oklab, var(--brand-primary-light) 34%, #021116);
  --att-mid: color-mix(in oklab, var(--brand-primary-light) 62%, #05232C);
  --att-glow-1: color-mix(in oklab, var(--brand-secondary-light) 70%, #8FE3C6);
  --att-glow-2: color-mix(in oklab, var(--brand-primary-light) 60%, #7FD3EE);
  --att-glow-3: color-mix(in oklab, var(--brand-accent-light) 70%, #FFD9A0);
  color: #fff;
  background:
    radial-gradient(90% 60% at 50% 34%, var(--att-mid) 0%, transparent 70%),
    linear-gradient(172deg, color-mix(in oklab, var(--att-mid) 80%, #000) 0%, var(--att-base) 55%, color-mix(in oklab, var(--att-base) 70%, #000) 100%);
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
:root[data-theme="dark"] .hk-attract { --att-base: color-mix(in oklab, var(--brand-primary-light) 22%, #010A0D); --att-mid: color-mix(in oklab, var(--brand-primary-light) 44%, #031820); }
.is-contrast .hk-attract { background: #000; }

/* 빛 덩어리 */
.hk-attract__ambient { position: absolute; inset: 0; pointer-events: none; }
.hk-orb { position: absolute; border-radius: 50%; will-change: transform; opacity: .55; mix-blend-mode: screen; }
.hk-orb--1 { width: 120vmax; height: 120vmax; left: -58vmax; top: -44vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--att-glow-2) 46%, transparent), transparent 70%); }
.hk-orb--2 { width: 105vmax; height: 105vmax; right: -50vmax; top: 18vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--att-glow-1) 34%, transparent), transparent 70%); }
.hk-orb--3 { width: 70vmax; height: 70vmax; left: 4vmax; bottom: -48vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--att-glow-3) 22%, transparent), transparent 70%); }
.is-landscape .hk-orb--2 { top: -10vmax; }
.hk-attract__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hk-attract__lines .ln { fill: none; stroke: #fff; stroke-width: 1.1; opacity: .07; transform-origin: 500px 420px; }
.hk-attract__lines .ln--1, .hk-attract__lines .ln--3 { stroke-dasharray: 2 10; opacity: .12; }
.is-landscape .hk-attract__lines { transform: translateY(2%); }
.is-contrast .hk-attract__ambient { display: none; }

/* 브랜드(가운데) */
.hk-attract__brand { position: absolute; left: 0; right: 0; top: 23%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5); padding: 0 var(--gutter); }
.hk-attract__mark { position: relative; width: calc(232px * var(--ui)); height: calc(232px * var(--ui)); display: grid; place-items: center; margin-bottom: var(--sp-7); }
.is-landscape .hk-attract__mark { width: calc(196px * var(--ui)); height: calc(196px * var(--ui)); margin-bottom: var(--sp-5); }
.hk-attract__mark::before {
  content: ""; position: absolute; inset: 0; border-radius: calc(72px * var(--ui));
  background: linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 calc(40px * var(--ui)) calc(80px * var(--ui)) calc(-30px * var(--ui)) rgb(0 0 0 / .55);
  backdrop-filter: blur(calc(20px * var(--ui))); -webkit-backdrop-filter: blur(calc(20px * var(--ui)));
}
.hk-attract__logo { position: relative; width: 64%; height: 64%; }
.hk-attract__halo { position: absolute; inset: 0; border-radius: calc(72px * var(--ui)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .28); opacity: 0; }
.hk-attract__name { font-size: max(14px, calc(104px * var(--ui-text) * var(--text-scale))); font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1.05; text-shadow: 0 2px calc(30px * var(--ui)) rgb(0 0 0 / .18); }
.is-landscape .hk-attract__name { font-size: max(14px, calc(96px * var(--ui-text) * var(--text-scale))); }
.hk-attract__tagline { font-size: max(14px, calc(40px * var(--ui-text) * var(--text-scale))); font-weight: var(--fw-medium); color: rgb(255 255 255 / .74); letter-spacing: -0.01em; word-break: keep-all; }
.is-landscape .hk-attract__tagline { font-size: max(14px, calc(36px * var(--ui-text) * var(--text-scale))); }

/* 메뉴 미리보기(무엇을 할 수 있는지) — 기본 연출에서만 */
.hk-attract__preview { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); max-width: calc(860px * var(--ui)); }
.hk-attract__pill { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: calc(76px * var(--ui)); padding: 0 var(--sp-6) 0 var(--sp-5); border-radius: var(--r-pill); background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: rgb(255 255 255 / .9); font-size: max(14px, calc(30px * var(--ui-text) * var(--text-scale))); font-weight: var(--fw-semibold); backdrop-filter: blur(calc(14px * var(--ui))); -webkit-backdrop-filter: blur(calc(14px * var(--ui))); white-space: nowrap; }
.hk-attract__pill .hk-ic { font-size: 1.35em; color: #fff; }
.hk-attract__pill .hk-ic-f { opacity: .3; }
.is-landscape .hk-attract__preview { margin-top: var(--sp-6); max-width: none; flex-wrap: nowrap; }
.is-contrast .hk-attract__pill { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; backdrop-filter: none; }

/* 재생목록이 있을 때: 브랜드는 왼쪽 위 작게 */
.hk-attract__brand.is-corner { top: var(--sp-8); left: var(--gutter); right: auto; flex-direction: row; gap: var(--sp-4); padding: 0; align-items: center; }
.hk-attract__brand.is-corner .hk-attract__mark { width: calc(88px * var(--ui)); height: calc(88px * var(--ui)); margin: 0; }
.hk-attract__brand.is-corner .hk-attract__mark::before, .hk-attract__brand.is-corner .hk-attract__halo { border-radius: calc(28px * var(--ui)); }
.hk-attract__brand.is-corner .hk-attract__mark::before { background: rgb(4 22 28 / .42); }
.hk-attract__brand.is-corner .hk-attract__name { text-shadow: 0 1px calc(16px * var(--ui)) rgb(0 0 0 / .4); }
.hk-attract__brand.is-corner .hk-attract__halo { display: none; }
.hk-attract__brand.is-corner .hk-attract__name { font-size: max(14px, calc(44px * var(--ui-text))); }

/* 시계 */
.hk-attract__clock { position: absolute; top: var(--sp-8); right: var(--gutter); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; color: rgb(255 255 255 / .92); }
.hk-attract__time { font-family: var(--font-num); font-size: max(14px, calc(48px * var(--ui-text))); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hk-attract__date { font-size: max(14px, calc(26px * var(--ui-text))); color: rgb(255 255 255 / .66); font-weight: var(--fw-medium); }
.hk-attract__status { position: absolute; top: calc(var(--sp-8) + 110px * var(--ui)); right: var(--gutter); display: flex; gap: var(--sp-3); }

/* 자막 + 터치 표시 */
.hk-attract__cta { position: absolute; left: 0; right: 0; bottom: calc(176px * var(--ui)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-7); padding: 0 var(--gutter); }
.is-landscape .hk-attract__cta { bottom: calc(96px * var(--ui)); gap: var(--sp-6); flex-direction: row; justify-content: center; }
.is-landscape .hk-attract__touch { width: calc(112px * var(--ui)); height: calc(112px * var(--ui)); }
.is-landscape .hk-attract__touch-dot { font-size: max(14px, calc(54px * var(--ui-text))); }
.is-landscape .hk-attract__brand { top: 13%; gap: var(--sp-4); }
.hk-attract__cta.is-center { bottom: auto; top: 62%; }
.hk-attract__touch { position: relative; width: calc(136px * var(--ui)); height: calc(136px * var(--ui)); display: grid; place-items: center; }
.hk-attract__touch-dot { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .3); font-size: max(14px, calc(64px * var(--ui-text))); color: #fff; backdrop-filter: blur(calc(14px * var(--ui))); -webkit-backdrop-filter: blur(calc(14px * var(--ui))); }
.hk-attract__touch-dot .hk-ic-f { opacity: .28; }
.hk-attract__pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); opacity: 0; }
.hk-cap { display: flex; flex-wrap: wrap; justify-content: center; font-size: max(14px, calc(56px * var(--ui-text) * var(--text-scale))); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.2; color: #fff; text-shadow: 0 2px calc(24px * var(--ui)) rgb(0 0 0 / .25); }
.is-landscape .hk-cap { font-size: max(14px, calc(52px * var(--ui-text) * var(--text-scale))); }
.hk-cap__ch { display: inline-block; white-space: pre; }
.is-contrast .hk-cap { color: #FFD400; text-shadow: none; }
.is-contrast .hk-attract__touch-dot { background: #000; box-shadow: inset 0 0 0 var(--border-w) #FFD400; color: #FFD400; backdrop-filter: none; }

/* 미디어 */
.hk-attract__media { position: absolute; inset: 0; background: #000; }
.hk-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-t9) var(--ease-standard); }
.hk-slide.is-in { opacity: 1; }
.hk-slide.is-out { opacity: 0; }
.fx-zoom .hk-slide.is-in { animation: hk-kenburns var(--slide-ms, 9500ms) linear both; }
.fx-slide .hk-slide { transition: opacity var(--dur-t8) var(--ease-standard), transform var(--dur-t9) var(--ease-standard); transform: translate3d(8%, 0, 0); }
.fx-slide .hk-slide.is-in { transform: none; }
.fx-slide .hk-slide.is-out { transform: translate3d(-8%, 0, 0); }
.fx-fade .hk-slide.is-in { animation: hk-drift var(--slide-ms, 9500ms) linear both; }
.hk-attract__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .42) 0%, transparent 18%, transparent 52%, rgb(0 0 0 / .62) 100%); }
.hk-attract__dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 2s linear; }

/* ═════════ K02 메인 ═════════ */
.hk-main .hk-screen-body { padding-top: var(--sp-5); gap: var(--sp-8); }
.hk-main__hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-4); min-height: 0; }
.hk-main__brand { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.hk-main__logo { width: calc(88px * var(--ui)); height: calc(88px * var(--ui)); padding: calc(10px * var(--ui)); border-radius: calc(28px * var(--ui)); background: var(--c-surface); box-shadow: var(--shadow-2), inset 0 0 0 var(--border-w) var(--c-line); }
.is-contrast .hk-main__logo { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.hk-main__name { font-size: max(14px, calc(40px * var(--ui-text) * var(--text-scale))); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); color: var(--c-text); }
.hk-main__greeting { font-size: max(14px, calc(84px * var(--ui-text) * var(--text-scale))); font-weight: var(--fw-bold); letter-spacing: -0.04em; line-height: 1.08; word-break: keep-all; }
.hk-main__hint { font-size: var(--fs-lg); color: var(--c-text-2); font-weight: var(--fw-medium); word-break: keep-all; }
.hk-main__menus { flex: none; height: calc(1040px * var(--ui)); min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--sp-6); }
.is-large .hk-main__menus { height: auto; flex: none; grid-auto-rows: minmax(max-content, 1fr); }
.is-large.is-landscape .hk-main__menus { flex: 1; }
.hk-main__menus.count-1, .hk-main__menus.count-2 { grid-template-columns: minmax(0, 1fr); }
.hk-main__menus.layout-list { grid-template-columns: minmax(0, 1fr); }
.hk-main__menus.is-empty { display: grid; place-items: center; }

/* 메인 가로: 왼쪽 인사, 오른쪽 2×2 */
.is-landscape .hk-main .hk-screen-body { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); align-items: stretch; gap: var(--sp-9); padding-top: var(--sp-4); padding-bottom: var(--sp-6); }
.is-landscape .hk-main__hero { justify-content: center; padding: 0 0 var(--sp-6); }
.is-landscape .hk-main__menus { height: auto; flex: 1; gap: var(--sp-5); }
.is-landscape .hk-main__greeting { font-size: var(--fs-display); }
.is-landscape .hk-menu-card { padding: var(--sp-6); }
.is-landscape .hk-menu-card__tile { width: calc(112px * var(--ui)); height: calc(112px * var(--ui)); font-size: max(14px, calc(66px * var(--ui-text))); border-radius: calc(32px * var(--ui)); }
.is-landscape .hk-menu-card__go { width: calc(68px * var(--ui)); height: calc(68px * var(--ui)); font-size: max(14px, calc(34px * var(--ui-text))); }

/* 메인 정사각(1280×1024 등, data-layout=square): 좌우로 나누면 카드가 좁고 길어 가운데가 빈다 → 인사는 위에 한 줄로, 카드 2×2 를 화면 폭 전체로 */
:root[data-layout="square"] .hk-main .hk-screen-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-2); }
:root[data-layout="square"] .hk-main__hero { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: var(--sp-6); row-gap: var(--sp-2); padding: 0; }
:root[data-layout="square"] .hk-main__brand { margin-bottom: 0; flex: 1 0 100%; }
:root[data-layout="square"] .hk-main__greeting { font-size: var(--fs-title); }
:root[data-layout="square"] .hk-main__hint { margin-left: auto; }
:root[data-layout="square"] .hk-menu-card { padding: var(--sp-6) var(--sp-7); }

/* 큰 글씨: 세로는 1열 가로형 카드, 가로는 2×2 가로형 카드 */
.is-large .hk-main__menus { gap: var(--sp-5); }
.is-large.is-portrait .hk-main__menus { grid-template-columns: minmax(0, 1fr); max-height: none; }
.is-large.is-portrait .hk-main .hk-menu-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr; grid-template-areas: "tile text go"; align-items: center; column-gap: var(--sp-6); padding: var(--sp-6) var(--sp-7); }
.is-large.is-portrait .hk-main .hk-menu-card__go { align-self: center; }
.is-large.is-landscape .hk-main .hk-menu-card { padding: var(--sp-5) var(--sp-6); }
.is-large.is-landscape .hk-main .hk-menu-card__go { display: none; }
.is-large.is-landscape .hk-main .hk-menu-card__tile { width: calc(96px * var(--ui)); height: calc(96px * var(--ui)); font-size: max(14px, calc(56px * var(--ui-text))); }
.is-large.is-landscape .hk-main .hk-menu-card__label { font-size: max(14px, calc(58px * var(--ui-text))); }
.is-large.is-landscape .hk-main .hk-menu-card__text { gap: var(--sp-2); }
.is-large .hk-main__hero { gap: var(--sp-3); padding-top: var(--sp-4); }
.is-large.is-portrait .hk-main .hk-screen-body { gap: var(--sp-6); }

/* 낮은 위치: 조작 요소(카드)는 화면 아래 --low-zone 안으로, 위쪽은 보기 전용 */
.is-low .hk-main .hk-screen-body { padding-top: 0; }
.is-low.is-portrait .hk-main__hero { min-height: calc(var(--low-top, 45vh) - var(--topbar-h) - var(--sp-8)); justify-content: flex-end; padding-bottom: var(--sp-2); }
.is-low.is-portrait .hk-main__menus { flex: 1; height: auto; }
.is-low.is-portrait .hk-main__hero { flex: none; }
.is-low.is-landscape .hk-main .hk-screen-body { display: flex; flex-direction: column; gap: var(--sp-5); }
.is-low.is-landscape .hk-main__menus { height: auto; flex: 1; }
.is-low.is-landscape .hk-main__hero { flex: none; min-height: calc(var(--low-top, 45vh) - var(--topbar-h) - var(--sp-5)); justify-content: flex-end; padding: 0; }
.is-low.is-landscape .hk-main__greeting { font-size: var(--fs-title); }
.is-low.is-landscape .hk-main__menus { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.is-low.is-landscape .hk-main__menus.count-1, .is-low.is-landscape .hk-main__menus.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-low.is-landscape .hk-main .hk-menu-card__label { font-size: max(14px, calc(40px * var(--ui-text) * var(--text-scale))); }
.is-low.is-landscape .hk-main .hk-menu-card__sub { display: none; }

/* ═════════ 세부 메뉴 뼈대(허브·준비 중) ═════════ */
.hk-sub .hk-screen-body { gap: var(--sp-8); padding-top: var(--sp-6); }
.hk-sub__head { display: flex; align-items: center; gap: var(--sp-6); }
.hk-sub__tile { display: grid; place-items: center; flex: none; width: calc(144px * var(--ui)); height: calc(144px * var(--ui)); border-radius: calc(42px * var(--ui)); background: var(--tone-soft); color: var(--tone); font-size: max(14px, calc(84px * var(--ui-text))); box-shadow: inset 0 0 0 var(--border-w) color-mix(in oklab, var(--tone) 14%, transparent); }
.hk-sub__titles { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.hk-sub__eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--tone); letter-spacing: 0; }
.hk-sub__title { font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1.08; word-break: keep-all; }
.hk-sub__subtitle { font-size: var(--fs-lg); color: var(--c-text-2); font-weight: var(--fw-medium); word-break: keep-all; }
.is-contrast .hk-sub__tile { background: #000; box-shadow: inset 0 0 0 var(--border-w) #FFD400; }
.is-contrast .hk-sub__subtitle { color: #fff; }
.hk-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-content: start; }
.hk-hub .hk-menu-card { min-height: calc(248px * var(--ui)); }
.hk-hub .hk-menu-card--compact .hk-menu-card__tile { width: calc(120px * var(--ui)); height: calc(120px * var(--ui)); font-size: max(14px, calc(70px * var(--ui-text))); border-radius: calc(34px * var(--ui)); }
.is-landscape .hk-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-landscape .hk-hub .hk-menu-card { min-height: calc(220px * var(--ui)); }
.is-large.is-landscape .hk-hub { grid-template-columns: minmax(0, 1fr); }
.hk-sub__empty { flex: 1; display: grid; place-items: center; padding-bottom: var(--sp-8); }
.is-landscape .hk-sub__empty .hk-empty__art { width: calc(300px * var(--ui)); height: calc(300px * var(--ui)); }
.is-landscape .hk-sub__empty .hk-empty__tile { width: calc(132px * var(--ui)); height: calc(132px * var(--ui)); font-size: max(14px, calc(76px * var(--ui-text))); }
.is-landscape .hk-sub__empty .hk-empty { gap: var(--sp-3); padding: 0; }
.is-landscape .hk-sub .hk-screen-body { gap: var(--sp-5); }
.is-landscape .hk-sub__empty { padding-bottom: 0; }
.is-landscape .hk-sub__empty .hk-empty__art { width: calc(250px * var(--ui)); height: calc(250px * var(--ui)); margin-bottom: 0; }
.is-landscape .hk-sub__empty .hk-empty__tile { width: calc(116px * var(--ui)); height: calc(116px * var(--ui)); font-size: max(14px, calc(68px * var(--ui-text))); border-radius: calc(34px * var(--ui)); }
.is-landscape .hk-sub__empty .hk-empty__help { margin-top: var(--sp-1); }
.is-landscape .hk-sub__tile { width: calc(128px * var(--ui)); height: calc(128px * var(--ui)); font-size: max(14px, calc(76px * var(--ui-text))); }
.is-low .hk-sub .hk-screen-body { justify-content: space-between; }
.is-low .hk-hub { margin-top: auto; }

/* ═════════ 콘텐츠 없음(첫 실행에 서버도 캐시도 없을 때) ═════════ */
.hk-nocontent .hk-screen-body { justify-content: center; align-items: center; gap: var(--sp-6); }

/* 메인 카드 맞춤(screens/main.js fitCards) — 긴 외국어 이름·카드 5~6개로 글이 카드 밖으로 잘릴 때 단계적으로 줄인다 */
.hk-main__menus:is(.fit-1, .fit-2, .fit-3) .hk-menu-card { padding: var(--sp-6); }
.hk-main__menus:is(.fit-1, .fit-2, .fit-3) .hk-menu-card__tile { width: calc(92px * var(--ui)); height: calc(92px * var(--ui)); border-radius: calc(28px * var(--ui)); font-size: max(14px, calc(54px * var(--ui-text))); }
.hk-main__menus:is(.fit-1, .fit-2, .fit-3) .hk-menu-card__go { width: calc(60px * var(--ui)); height: calc(60px * var(--ui)); font-size: max(14px, calc(30px * var(--ui-text))); }
.hk-main__menus:is(.fit-1, .fit-2, .fit-3) .hk-menu-card__text { gap: var(--sp-2); }
.hk-main__menus:is(.fit-1, .fit-2) .hk-menu-card__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hk-main__menus.fit-2 .hk-menu-card__sub { -webkit-line-clamp: 1; }
.hk-main__menus:is(.fit-2, .fit-3) .hk-menu-card { padding: var(--sp-5) var(--sp-6); }
.hk-main__menus:is(.fit-2, .fit-3) .hk-menu-card__tile { width: calc(76px * var(--ui)); height: calc(76px * var(--ui)); border-radius: calc(24px * var(--ui)); font-size: max(14px, calc(44px * var(--ui-text))); }
.hk-main__menus.fit-3 .hk-menu-card__sub { display: none; }

/* ═════════ 메인 벤토(대표 지적 4, 2026-10-22 밤) — 주 카드 1개 크게, 나머지는 둘씩(홀수면 마지막을 넓게). 빈칸 없음 ═════════ */
.hk-main__menus.layout-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.5fr) repeat(var(--rest-rows, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.layout-bento > .is-hero, .layout-bento > .is-wide { grid-column: 1 / -1; }
:is(.is-landscape, [data-layout="square"]) .hk-main__menus.layout-bento { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--rest-rows, 2), minmax(0, 1fr)); }
:is(.is-landscape, [data-layout="square"]) .layout-bento > .is-hero { grid-column: 1; grid-row: 1 / -1; }
:is(.is-landscape, [data-layout="square"]) .layout-bento > .is-wide { grid-column: 2 / -1; }
.is-large .hk-main__menus.layout-bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(max-content, 1fr); }
.is-large .layout-bento > .hk-bento { grid-column: auto; grid-row: auto; }

.hk-bento {
  position: relative; overflow: hidden; isolation: isolate; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  padding: var(--sp-7); border-radius: calc(40px * var(--ui));
  background: var(--c-surface);
  box-shadow: 0 calc(18px * var(--ui)) calc(48px * var(--ui)) calc(-28px * var(--ui)) color-mix(in oklab, var(--tone) 45%, transparent), var(--shadow-1, none), inset 0 0 0 var(--border-w) color-mix(in oklab, var(--c-line) 70%, transparent);
  transition: transform var(--dur-t3) var(--ease-out), box-shadow var(--dur-t3) var(--ease-out);
}
.hk-bento > .hk-bento__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 90% at 100% 0%, color-mix(in oklab, var(--tone) 16%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in oklab, var(--tone-soft) 50%, var(--c-surface)), var(--c-surface) 72%); }
.hk-bento[data-cat="fortune"] .hk-bento__wash { background: radial-gradient(110% 90% at 100% 0%, color-mix(in oklab, #5b5bd6 16%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in oklab, #5b5bd6 9%, var(--c-surface)), var(--c-surface) 72%); }
.hk-bento > .hk-bento__art { position: absolute; z-index: 0; top: 7%; right: 4%; width: 54%; height: 56%; display: grid; place-items: center; color: var(--tone); pointer-events: none; transition: transform var(--dur-t4) var(--ease-out); }
.hk-bento__art .ba { width: 100%; height: 100%; overflow: visible; }
.hk-bento.is-hero > .hk-bento__art { top: 8%; right: 3%; width: 56%; height: 84%; }
.hk-bento.is-wide > .hk-bento__art { top: 8%; right: 3%; width: 40%; height: 84%; }
:is(.is-landscape, [data-layout="square"]) .hk-bento.is-hero > .hk-bento__art { top: 6%; right: 6%; left: 6%; width: auto; height: 50%; }
.hk-bento > .hk-bento__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); max-width: 100%; min-width: 0; }
.hk-bento.is-hero > .hk-bento__body { max-width: 48%; }
.hk-bento.is-wide > .hk-bento__body { max-width: 58%; }
:is(.is-landscape, [data-layout="square"]) .hk-bento.is-hero > .hk-bento__body { max-width: 100%; }
.hk-bento__label { font-size: calc(var(--fs-menu) * .8); font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: var(--track-tight); color: var(--c-text); word-break: keep-all; overflow-wrap: break-word; }
.is-hero .hk-bento__label { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.035em; }
.is-wide .hk-bento__label { font-size: var(--fs-menu); }
.hk-bento__sub { font-size: var(--fs-sm); color: var(--c-text-2); font-weight: var(--fw-medium); line-height: 1.35; word-break: keep-all; }
.is-hero .hk-bento__sub { font-size: var(--fs-body); }
.hk-bento__badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: calc(6px * var(--ui)) var(--sp-4); border-radius: var(--r-pill); font-size: max(14px, var(--fs-min)); font-weight: var(--fw-semibold, 600);
  background: color-mix(in oklab, var(--tone) 13%, var(--c-surface)); color: color-mix(in oklab, var(--tone) 82%, var(--c-text)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent); }
.hk-bento__badge .hk-ic { font-size: 1.05em; }
.hk-bento > .hk-bento__go { position: absolute; z-index: 1; left: var(--sp-6); top: var(--sp-6); width: calc(60px * var(--ui)); height: calc(60px * var(--ui)); min-width: 30px; min-height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklab, var(--tone) 12%, var(--c-surface)); color: var(--tone); font-size: max(14px, calc(28px * var(--ui-text))); transition: transform var(--dur-t3) var(--ease-out), background-color var(--dur-t2) linear; }
.hk-bento.is-pressed { transform: scale(.975); box-shadow: var(--shadow-press), inset 0 0 0 var(--border-w) color-mix(in oklab, var(--tone) 40%, transparent); }
.hk-bento.is-pressed .hk-bento__art { transform: translate3d(0, calc(6px * var(--ui)), 0) scale(.96); }
.hk-bento.is-pressed .hk-bento__go { transform: translate3d(calc(6px * var(--ui)), 0, 0); background: var(--tone); color: var(--c-surface); }
/* 큰 글씨: 한 줄씩 — 그림은 오른쪽에 작게 */
.is-large .hk-bento { min-height: calc(220px * var(--ui)); padding: var(--sp-6) var(--sp-7); }
.is-large .hk-bento > .hk-bento__art { top: 10%; right: 3%; width: 28%; height: 80%; }
.is-large .hk-bento > .hk-bento__body { max-width: 66%; }
.is-large .hk-bento .hk-bento__go { display: none; }
/* 카드 맞춤(screens/main.js fitCards): 글이 넘치면 그림을 줄이고 → 설명 한 줄 → 설명 숨김 */
.hk-main__menus.layout-bento:is(.fit-1, .fit-2, .fit-3) .hk-bento:not(.is-hero) > .hk-bento__art { height: 44%; width: 46%; }
.hk-main__menus.layout-bento:is(.fit-1, .fit-2, .fit-3) .hk-bento { padding: var(--sp-5) var(--sp-6); }
.hk-main__menus.layout-bento:is(.fit-1, .fit-2) .hk-bento__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.hk-main__menus.layout-bento.fit-3 .hk-bento__sub { display: none; }
.hk-main__menus.layout-bento.fit-3 .hk-bento:not(.is-hero) > .hk-bento__art { height: 36%; width: 40%; }
html:not([lang="ko"]) .hk-bento__label { font-size: calc(var(--fs-menu) * .68); }
html:not([lang="ko"]) .is-hero .hk-bento__label { font-size: calc(var(--fs-display) * .72); }
html[data-compact] .hk-bento { padding: var(--sp-5); border-radius: calc(32px * var(--ui)); }
html[data-compact] .hk-bento > .hk-bento__go { left: var(--sp-4); top: var(--sp-4); }

/* 그림(ui/menu-art.js) 색 — 카드 색 묶음(--tone) 기준. 밝게·어둡게는 표면색과 섞여 자동 */
.ba * { vector-effect: non-scaling-stroke; }
.ba-top { fill: color-mix(in oklab, var(--tone) 20%, var(--c-surface)); stroke: var(--tone); stroke-width: 2; stroke-linejoin: round; }
.ba-side { fill: color-mix(in oklab, var(--tone) 48%, var(--c-surface)); }
.ba-side--r { fill: color-mix(in oklab, var(--tone) 34%, var(--c-surface)); }
.ba-plate--3 .ba-top { fill: color-mix(in oklab, var(--tone) 28%, var(--c-surface)); }
.ba-room { fill: var(--tone); opacity: .55; } .ba-room--2 { opacity: .28; }
.ba-route { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 7; animation: ba-flow var(--dur-t10) linear infinite; }
.ba-pin { animation: ba-bob calc(var(--dur-t10) * 2) var(--ease-breathe) infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.ba-pin__body { fill: var(--c-accent); } .ba-pin__dot { fill: var(--c-surface); }
.ba-soft { fill: color-mix(in oklab, var(--tone) 14%, var(--c-surface)); }
.ba-line-fill { fill: color-mix(in oklab, var(--tone) 55%, var(--c-surface)); }
.ba-pillow { fill: var(--c-surface); stroke: var(--tone); stroke-width: 2; }
.ba-blanket { fill: color-mix(in oklab, var(--tone) 42%, var(--c-surface)); }
.ba-card { animation: ba-bob calc(var(--dur-t10) * 2.4) var(--ease-breathe) infinite alternate; transform-box: fill-box; }
.ba-card__bg { fill: var(--c-surface); stroke: color-mix(in oklab, var(--tone) 40%, transparent); stroke-width: 1.5; }
.ba-card__head { fill: var(--tone); } .ba-check { fill: var(--c-secondary); } .ba-card__row { fill: color-mix(in oklab, var(--c-text) 18%, transparent); }
.ba-orbit { fill: none; stroke: color-mix(in oklab, var(--tone) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 3 7; }
.ba-q { stroke: var(--c-surface); stroke-width: 3; }
.ba-q--1 { fill: color-mix(in oklab, var(--tone) 72%, var(--c-surface)); } .ba-q--2 { fill: color-mix(in oklab, var(--tone) 46%, var(--c-surface)); }
.ba-q--3 { fill: color-mix(in oklab, var(--tone) 26%, var(--c-surface)); } .ba-q--4 { fill: color-mix(in oklab, var(--tone) 13%, var(--c-surface)); }
.ba-core { fill: var(--c-surface); stroke: var(--tone); stroke-width: 2; }
.ba-dot { fill: var(--tone); }
.ba-spin { animation: ba-spin calc(var(--dur-t10) * 12) linear infinite; transform-box: view-box; transform-origin: 112px 92px; }
.ba-spark { fill: var(--c-accent); animation: ba-twinkle calc(var(--dur-t10) * 1.6) var(--ease-breathe) infinite alternate; transform-box: fill-box; transform-origin: center; }
.ba-face { fill: color-mix(in oklab, var(--tone) 9%, var(--c-surface)); stroke: var(--tone); stroke-width: 2; }
.ba-feat { fill: none; stroke: var(--tone); stroke-width: 2.5; stroke-linecap: round; }
.ba-mesh { fill: var(--tone); opacity: .55; } .ba-mesh--in { opacity: .85; }
.ba-bracket { fill: none; stroke: var(--tone); stroke-width: 3; stroke-linecap: round; }
.ba-scan { animation: ba-scan calc(var(--dur-t10) * 2) var(--ease-breathe) infinite alternate; }
.ba-scan__bar { fill: var(--tone); opacity: .75; }
.ba-palm__hand { fill: color-mix(in oklab, var(--tone) 9%, var(--c-surface)); stroke: var(--tone); stroke-width: 2; stroke-linejoin: round; }
.ba-palm__line { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-linecap: round; }
.ba-typing { fill: var(--tone); animation: ba-typing var(--dur-t10) var(--ease-breathe) infinite; }
.ba-typing--1 { animation-delay: var(--dur-t3); } .ba-typing--2 { animation-delay: var(--dur-t6); }
.ba-tick { fill: none; stroke: var(--c-secondary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ba-flow { to { stroke-dashoffset: -26; } }
@keyframes ba-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes ba-spin { to { transform: rotate(360deg); } }
@keyframes ba-twinkle { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ba-scan { from { transform: translateY(-42px); } to { transform: translateY(42px); } }
@keyframes ba-typing { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
:is(.motion-reduced, .is-still) :is(.ba-route, .ba-pin, .ba-card, .ba-spin, .ba-spark, .ba-scan, .ba-typing) { animation: none; }
@media (prefers-reduced-motion: reduce) { :is(.ba-route, .ba-pin, .ba-card, .ba-spin, .ba-spark, .ba-scan, .ba-typing) { animation: none; } }
/* 고대비: 검정 바탕 + 노랑 선 하나 */
.is-contrast .hk-bento { background: #000; box-shadow: inset 0 0 0 var(--border-w) #fff; }
.is-contrast .hk-bento__wash { display: none; }
.is-contrast .hk-bento__badge { background: #000; color: #FFD400; box-shadow: inset 0 0 0 2px #FFD400; }
.is-contrast .hk-bento__go { background: #FFD400; color: #000; }
.is-contrast .ba :is(.ba-top, .ba-side, .ba-side--r, .ba-soft, .ba-line-fill, .ba-pillow, .ba-blanket, .ba-card__bg, .ba-face, .ba-palm__hand, .ba-core, .ba-q) { fill: #000; stroke: #FFD400; stroke-width: 2; }
.is-contrast .ba :is(.ba-room, .ba-pin__body, .ba-card__head, .ba-check, .ba-dot, .ba-mesh, .ba-scan__bar, .ba-typing, .ba-spark) { fill: #FFD400; opacity: 1; }
.is-contrast .ba :is(.ba-route, .ba-feat, .ba-bracket, .ba-palm__line, .ba-tick, .ba-orbit) { stroke: #FFD400; }
/* 벤토 다듬기: 세로에서는 카드 판이 남는 높이를 채우고(위 빈 공간 없음), 작은 카드 그림은 위쪽 46% 안에만(제목과 겹치지 않게) */
.hk-main__menus.layout-bento { flex: 1; height: auto; }
.hk-main:has(.layout-bento) .hk-main__hero { flex: none; }
.hk-bento.is-small > .hk-bento__art { top: 5%; right: 4%; width: 52%; height: 44%; }
:is(.is-landscape, [data-layout="square"]) .hk-bento.is-small > .hk-bento__art { height: 46%; }
html[data-compact] .hk-bento.is-small > .hk-bento__art { top: 6%; right: 4%; width: 42%; height: 36%; }
/* 주 카드도 맞춤 단계에 — 긴 외국어·좁은 폭: 그림을 위로 작게, 글은 폭 전체 */
.hk-main__menus.layout-bento:is(.fit-1, .fit-2, .fit-3) .hk-bento.is-hero > .hk-bento__body { max-width: 100%; }
.hk-main__menus.layout-bento:is(.fit-1, .fit-2, .fit-3) .hk-bento.is-hero > .hk-bento__art { top: 5%; right: 4%; left: auto; width: 44%; height: 42%; }
html[data-compact]:not([lang="ko"]) .hk-bento.is-hero .hk-bento__label { font-size: calc(var(--fs-display) * .58); }
.hk-main__menus.layout-bento:is(.fit-2, .fit-3) .hk-bento__badge { padding: calc(3px * var(--ui)) var(--sp-3); }
.hk-main__menus.layout-bento.fit-3 .hk-bento__badge > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 좁은 폭 + 긴 외국어: 한 줄에 한 카드, 높이는 글에 맞춤(화면은 스크롤) — 작은 칸에 세 줄 제목이 잘리지 않게 */
html[data-compact]:not([lang="ko"]) .hk-main__menus.layout-bento { flex: none; height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(calc(220px * var(--ui)), auto); }
html[data-compact]:not([lang="ko"]) .layout-bento > .hk-bento { grid-column: auto; padding-right: 42%; }
html[data-compact]:not([lang="ko"]) .layout-bento > .hk-bento > .hk-bento__body { max-width: 100%; }
html[data-compact]:not([lang="ko"]) .layout-bento > .hk-bento > .hk-bento__art { top: 12%; right: 4%; left: auto; width: 36%; height: 76%; }
html[data-compact]:not([lang="ko"]) .layout-bento > .hk-bento.is-hero { min-height: calc(320px * var(--ui)); }
html[data-compact]:not([lang="ko"]) .layout-bento > .hk-bento .hk-bento__label { font-size: max(16px, calc(var(--fs-menu) * .62)); }
html[data-compact]:not([lang="ko"]) .layout-bento > .hk-bento > .hk-bento__go { display: none; }
/* 큰 글씨 + 벤토: 옛 카드 규칙(가운데 정렬·격자)을 이기고 한 줄 카드 — 글은 왼쪽, 그림은 오른쪽에 작게 */
.is-large .hk-main .hk-menu-card.hk-bento { display: flex; align-items: flex-start; justify-content: center; text-align: left; padding: var(--sp-6) var(--sp-7); }
.is-large .hk-main .hk-bento.hk-bento > .hk-bento__art { top: 10%; right: 3%; left: auto; width: 26%; height: 80%; }
.is-large .hk-main .hk-bento.hk-bento > .hk-bento__body { max-width: 70%; }