/* =============================================================================
 * device_context.css — 기기 대응 공통 규칙(PLAN_기기대응 2-6)
 * 모든 규칙은 `<html>` 표시(data-touch · data-size) 안에서만 — 데스크탑 마우스 화면은 안 바뀜.
 * 표시는 `device_context.ts` 가 적음.
 * ========================================================================== */

/* 누를 자리 44px — 손가락(주 입력 coarse) 또는 터치 모드 켬 */
html[data-touch="on"]
  :is(
    .ui-btn,
    .ui-workflow-overlay__toggle,
    .ui-sidebar-row,
    .ui-workflow-layout__step,
    .ui-ctx-menu__item,
    select,
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"])
  ) {
  min-height: 44px;
}

html[data-touch="on"] .ui-btn {
  min-width: 44px;
}

/* 체크 · 라디오 — 상자를 키우고 글까지 한 줄 전체가 누를 자리 */
html[data-touch="on"] :is(input[type="checkbox"], input[type="radio"]) {
  width: 22px;
  height: 22px;
}

html[data-touch="on"] .ui-checkbox {
  min-height: 44px;
}

/* 접힌 좌측 패널 손잡이 — 손가락 폭 · 화면 왼쪽 끝 안 */
html[data-touch="on"]
  .ui-workflow-overlay__panel--title.is-collapsed
  > .ui-workflow-overlay__handle--side {
  width: 32px;
  right: -32px;
}

/* 팝업(2-4) — 폭 600 미만은 전체 화면 · 겹치면 나중 것(맨 위)만 보이고 × 로 앞 창.
   공용 모달(.ui-modal) · 페이지 팝업은 공용 클래스 `.ui-popup` 만 붙여 맞춤(자리 · 크기 인라인 값도 덮음) */
html[data-size="compact"] :is(.ui-modal, .ui-popup) {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  overflow: auto;
}

html[data-size="compact"] .ui-confirm__panel {
  min-width: 0;
  max-width: calc(100vw - var(--spacing-32));
}

/* 공용 표(2-5) — 폭 840 미만은 고정 열이 없는 표도 첫 열을 붙임(머리줄은 늘 붙어 있음 · 가로는 밀기) */
html:is([data-size="compact"], [data-size="medium"])
  .ui-data-table__table:not(:has(.is-frozen))
  tr
  > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

html:is([data-size="compact"], [data-size="medium"])
  .ui-data-table__table:not(:has(.is-frozen))
  thead
  tr
  > :first-child {
  z-index: 3;
}

/* 터치 모드에서만 보이는 단추(자판 없는 기기용 · 4-3) — 마우스 화면엔 없음 */
html:not([data-touch="on"]) .ui-touch-only {
  display: none !important;
}

/* 위 줄 높이(6-1) — 화면 높이 계산이 모두 이 값을 씀 · 로그인 뒤 쪽(B · M)은 위 줄을 걷어 0(7-1)
   ☰ 폭(7-4) · 들여쓰기(7-2) = 왼쪽 위에 뜬 ☰(자리 8 + 폭) + 틈 8 · 그 자리에 걸치는 첫 줄이 이만큼 왼쪽을 비움 */
:root {
  --app-header-h: 64px;
  --app-burger-w: 36px;
  --app-burger-inset: 0px;
}

html.is-bm-route {
  --app-header-h: 0px;
  --app-burger-inset: calc(var(--spacing-8) * 2 + var(--app-burger-w));
}