/* 해상도 독립 보정 (docs/RESPONSIVE.md) — 마지막에 불러온다. 선택자에 html[...] 를 붙여 화면 모듈 스타일보다 우선.
 *  · 큰 화면: 가운데 정렬 폭 제한(--content-max)
 *  · square(1280×1024·4:3): 가로 레이아웃 + 세로 여유 채움
 *  · compact(너비 700 CSS px 미만 — 폰·좁은 창): 한/두 칸 격자, 옆 패널은 아래로, 공통 바는 아이콘만
 */

/* ───────── 큰 화면 가운데 정렬 ───────── */
.hk-screen-body { padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2)); }

/* ───────── 공통: 글씨만 숨기되 읽어 주기는 유지(아이콘만 보이는 단추) ───────── */
html[data-compact] .hk-bar .hk-btn__label,
html[data-compact] .hk-bar .hk-toggle__text,
html[data-compact] .hk-bar__help > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ───────── compact: 머리 띠·공통 바 ───────── */
html[data-compact] {
  --gutter: calc(40px * var(--ui));            /* 폰 390 에서 20px */
  --topbar-h: 64px;
  --bottombar-h: 72px;
  --sp-5: calc(20px * var(--ui) + 4px);
  --sp-6: calc(28px * var(--ui) + 6px);
}
html[data-compact] .hk-top { gap: var(--sp-3); grid-template-columns: auto minmax(0, 1fr) auto; }
html[data-compact] .hk-top__name, html[data-compact] .hk-top__date { display: none; }
html[data-compact] .hk-top__title { font-size: var(--fs-body); }
html[data-compact] .hk-top__time { font-size: max(16px, calc(36px * var(--ui-text))); }
html[data-compact] .hk-bar { padding: 0 var(--sp-3); gap: var(--sp-2); justify-content: space-between; --fs-bar: 14px; }
html[data-compact] .hk-bar__nav, html[data-compact] .hk-bar__a11y { gap: 4px; flex: 0 1 auto; }
html[data-compact] .hk-bar__help { display: none; }
html[data-compact] .hk-bar .hk-btn--nav { min-width: 48px; min-height: 48px; padding: 0; border-radius: 16px; }
html[data-compact] .hk-bar .hk-btn--nav .hk-btn__icon { font-size: 24px; }
html[data-compact] .hk-bar .hk-toggle { min-width: 48px; min-height: 48px; padding: 0; border-radius: 16px; flex-direction: column; }
html[data-compact] .hk-bar .hk-toggle__icon { font-size: 24px; }

/* 음성 안내 단추는 작은 화면에서도 글자를 보인다(아이콘만으로는 무엇인지 알기 어렵다는 대표 의견 2026-10-22) — 켜짐 표시는 색으로 */
html[data-compact] .hk-bar .hk-bar__voice { min-width: 72px; padding: 2px 4px; gap: 0; }
html[data-compact] .hk-bar .hk-bar__voice .hk-toggle__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html[data-compact] .hk-bar .hk-bar__voice .hk-toggle__label { font-size: 14px; line-height: 1.05; letter-spacing: -.02em; }
html[data-compact] .hk-bar .hk-bar__voice .hk-toggle__state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 단추가 6개 이상(음성·언어까지)이면 작은 화면에서 촘촘히 — 음성 단추도 아이콘만(읽어 주기 이름은 유지) */
html[data-compact] .hk-bar__a11y:is([data-n="6"], [data-n="7"]) { gap: 2px; }
html[data-compact] .hk-bar:has(.hk-bar__a11y:is([data-n="6"], [data-n="7"])) { padding-inline: 4px; gap: 2px; }
html[data-compact] .hk-bar:has(.hk-bar__a11y:is([data-n="6"], [data-n="7"])) .hk-bar__nav { gap: 2px; }
html[data-compact] .hk-bar:has(.hk-bar__a11y:is([data-n="6"], [data-n="7"])) :is(.hk-toggle, .hk-btn--nav) { min-width: 44px; width: 44px; min-height: 48px; padding-inline: 0; }
html[data-compact] .hk-bar__a11y:is([data-n="5"], [data-n="6"], [data-n="7"]) .hk-bar__voice { min-width: 44px; }
html[data-compact] .hk-bar__a11y:is([data-n="5"], [data-n="6"], [data-n="7"]) .hk-bar__voice .hk-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 작은 썸네일의 사진 없음 자리: 아이콘만(글자는 안 들어감) */
html .fx-viewer__strip .fx-photo__fail > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* compact 자판: 키가 좁아 겹쳐 보이는 보조 글자(쌍자음 힌트)는 숨김 — 모양 바꾸기(⇧)로 입력 */
html[data-compact] .kb-sub { display: none; }