/* ── 0. iOS safe-area (SV-6a69) ────────────────────────────────────────────
   증상: 아이폰에서 좌상단 햄버거가 **상태바(시계·다이나믹 아일랜드)와 겹쳐 안 눌림**.
   원인: safe-area inset 처리가 레포 전체에 0건이었고 버튼이 top:12px 고정이었다.
        PWA standalone + status-bar-style=black-translucent 라 콘텐츠가 상태바 밑까지
        올라오므로 더 심하다.
   설계: 인셋을 변수로 한 번만 정의해 쓴다(테스트에서 이 변수만 덮어써 검증 가능).
        노치 없는 기기·데스크톱에서는 env() 가 0 이라 아무 영향이 없다. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* 상단 고정 햄버거 — 상태바 아래로 내리고 터치 타깃 44px 확보 */
.sidebar-toggle-mobile {
  top: calc(12px + var(--sat)) !important;
  left: calc(12px + var(--sal)) !important;
  width: 44px !important;
  height: 44px !important;
}

/* 본문이 상태바 밑으로 파고들지 않게 (햄버거는 ≤960px 에서 뜬다) */
@media (max-width: 960px) {
  .app-shell main { padding-top: calc(64px + var(--sat)) !important; }
  .sidebar { padding-top: var(--sat); padding-bottom: var(--sab); }
}

/* 하단 홈 인디케이터·좌우 노치(가로모드) */
body { padding-left: var(--sal); padding-right: var(--sar); }
.tk-lightbox .qz-close, .qz-close { top: calc(12px + var(--sat)) !important; }
footer, .app-footer { padding-bottom: calc(var(--sab) + 8px); }

/* 모바일 반응형 정비 (SV-fe80)
 *
 * 원칙: **리디자인 아님.** 데스크톱 레이아웃이 폰에서 깨지는 것만 바로잡는다.
 *   - 가로 스크롤 0 (넘치는 건 해당 컨테이너 안에서만 스와이프)
 *   - 데스크톱 기준 고정 폰트를 폰에서 축소(clamp)
 *   - 터치 타깃 44px 확보
 * 데스크톱(641px 이상)에는 어떤 규칙도 적용되지 않는다.
 */

@media (max-width: 640px) {

  /* ── 0. 가로 스크롤 차단(근본 수정은 style.css 의 minmax(0,1fr); 여기는 잔여 방어) ── */
  img, video, canvas, svg, table, pre { max-width: 100%; }
  pre, code { overflow-x: auto; }

  /* ── 1. 대시보드 히어로 — 폰트 과대·두 줄 깨짐·상단 잘림 해소 ── */
  .dz { padding: 14px 14px 32px !important; gap: 14px !important; }
  .dz-hero { padding: 20px 16px 18px !important; }
  .dz-hero h1 {
    font-size: clamp(20px, 6.4vw, 26px) !important;   /* 31px 고정 → 화면 비례 */
    margin-top: 12px !important;
    line-height: 1.28 !important;
    word-break: keep-all;                              /* 한국어 어절 단위 줄바꿈 */
  }
  .dz-hero img[alt="VERADI"] { top: 16px !important; right: 14px !important; height: 16px !important; }
  .dz-chip {
    flex-wrap: wrap;
    max-width: calc(100% - 60px);                      /* 우상단 로고와 겹치지 않게 */
    font-size: 11px !important;
    line-height: 1.5;
  }
  .dz-stat { min-height: 44px; }                       /* 터치 타깃 */

  /* ── 2. 티켓 칸반 — 페이지가 아니라 보드 안에서 옆으로 스와이프 ── */
  .tk-page, .tk-head, .tk-new, .tk-board { max-width: 100%; }
  .tk-head { flex-wrap: wrap; gap: 10px; }
  .tk-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;                     /* 한 칼럼씩 착 붙게 */
  }
  .tk-col {
    flex: 0 0 84vw !important;                         /* 258px 고정 → 화면의 84% */
    scroll-snap-align: start;
  }
  .tk-new-row { flex-wrap: wrap; gap: 8px; }
  .tk-new-row input, .tk-new-row select, .tk-new-row button { min-height: 44px; }
  .tk-filter { flex-wrap: wrap; }
  .tk-filter a { min-height: 40px; display: inline-flex; align-items: center; }

  /* ── 3. 회의실 문항 그리드 — 버튼 넘침·터치 타깃 ── */
  .er-btn { min-height: 44px; padding-left: 10px; padding-right: 10px; }
  .er-btn.re { max-width: 100%; }

  /* ── 3-b. 사이드바(햄버거로 여는 오프캔버스) 항목 44px ── */
  .sidebar a, .sidebar .nav-item, .sidebar button {
    min-height: 44px; display: flex; align-items: center;
  }

  /* ── 4. 공통 터치 타깃(44px 권장치) ── */
  button, .btn, a.btn, input[type="submit"] { min-height: 44px; }
  input, select, textarea { font-size: 16px; }         /* iOS 자동 확대 방지 */

  /* ── 5. 표는 가로로 스와이프(페이지를 밀지 않게) ── */
  .table-wrap, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 6. 문항 이미지 — 잘림 해소 + 기존 라이트박스를 폰에서 읽히게 ────────────
   문제였던 것: .er-thumb 가 object-fit:cover + aspect-ratio 3/4 라 폰(1열)에서는
   문항 좌우가 통째로 잘려 나갔다("…격은 1초일 때" 처럼 글자가 끊김).
   썸네일이 작은 데스크톱(5열)에서는 의도된 크롭이므로 데스크톱은 건드리지 않는다. */
@media (max-width: 640px) {
  .er-thumb-wrap { aspect-ratio: auto !important; max-height: 62vh; }
  .er-thumb { height: auto !important; object-fit: contain !important; }
}

/* 라이트박스: 기존 규칙이 max-width:92vw/max-height:90vh 라 1400×3730 문항이
   화면에 욱여넣어져 글자를 읽을 수 없었다. 폰에서는 폭을 채우고 세로로 스크롤 +
   핀치줌으로 읽게 한다(데스크톱 규칙은 그대로). */
@media (max-width: 640px) {
  .tk-lightbox { padding: 0; align-items: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; }
  .tk-lightbox img {
    max-width: none !important; max-height: none !important;
    width: 100%; height: auto; border-radius: 0;
  }
}