/* ══════════════════════════════════════════════════════
   반응형 — 태블릿(1023px 이하) · 폰(767px 이하)
   설계: docs/05-작업요청/웹반응형-설계.md §2 · §3.1
   - 데스크톱(1024px 이상)은 이 파일의 어느 규칙도 받지 않는다. 폭 구간 밖 규칙은 폰 전용 단추를 숨기는 첫 줄뿐이다
   - 화면별 CSS(work.css 등)가 이 파일보다 뒤에 실린다. 같은 무게의 규칙이 겹치면 뒤 파일이 이기므로,
     겹치는 자리는 :root 를 앞에 붙여 한 단계 무겁게 쓴다
══════════════════════════════════════════════════════ */

.hdr-nav, .hdr-acct, .nav-scrim { display: none; }

/* ── 태블릿 · 폰 — 사이드바를 서랍으로 ─────────────── */
@media (max-width: 1023.98px) {
  .layout { height: 100vh; height: 100dvh; }

  /* 사이드바는 화면 밖 왼쪽에 있다가 [≡] 로 밀려 나온다. 뒤는 어둡게 덮고(.nav-scrim), 열린 동안 본문은 스크롤하지 않는다 */
  :root .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100;
    width: min(280px, 86vw);
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
  }
  html.nav-open .sidebar { transform: none; box-shadow: 6px 0 24px rgba(0, 0, 0, .35); }
  .nav-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(0, 0, 0, .45); }
  html.nav-open .nav-scrim { display: block; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  .sidebar .nav { padding-top: 9px; padding-bottom: 9px; }

  .hdr-nav {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; margin-left: -6px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--t1); cursor: pointer;
  }
  .hdr-nav svg { width: 20px; height: 20px; }
  .hdr-nav:hover { background: var(--surface); }
  .hdr .bc, .hdr .hd-t { flex: 1 1 auto; min-width: 0; }

  /* 고정 높이 화면(회원 · 조직 · 차수 · 감사)은 페이지 전체가 스크롤한다 — 폰에서 표 자리가 두 줄로 줄지 않게 */
  :root .content.fixed { display: block; overflow-y: auto; }
  :root .content.fixed .tbl-wrap,
  :root .content.fixed .pane-fill { display: block; flex: none; }
  :root .content.fixed .tbl-wrap .tbl-scroll { overflow-y: visible; }
}

/* ── 폰 ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* 머리 막대 — [≡] 제목 … [계정]. 오른쪽 묶음(차수 · 이름 · 글자 크기 · 테마 · 로그아웃)은 [계정] 을 누르면 펼친다 */
  :root .hdr { position: relative; z-index: 50; gap: 8px; padding: 0 8px 0 12px; }
  :root .svhdr { position: relative; z-index: 50; gap: 10px; padding: 0 8px 0 12px; }
  .hdr-acct {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; padding: 0; margin-left: auto;
    border: 1px solid var(--bd2); border-radius: 50%; background: var(--surface); color: var(--t2); cursor: pointer;
  }
  .hdr-acct svg { width: 18px; height: 18px; }
  .acct-open > .hdr-acct { color: var(--t1); border-color: var(--t3); }
  :root .hdr > .hdr-rt, :root .svhdr > .sv-rt { display: none; }
  :root .acct-open > .hdr-rt, :root .acct-open > .sv-rt {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    position: absolute; right: 8px; top: calc(100% + 6px); z-index: 1200;
    min-width: 230px; max-width: calc(100vw - 16px); margin: 0; padding: 12px;
    background: var(--surface); border: 1px solid var(--bd2); border-radius: 12px; box-shadow: var(--shadow);
  }
  .acct-open > .hdr-rt > *, .acct-open > .sv-rt > * { margin: 0 !important; align-self: stretch; }
  .acct-open .ts-tg, .acct-open .theme-tg { align-self: flex-start; }
  .acct-open .chip { align-self: flex-start; white-space: normal; }
  .acct-open #btnLogout { min-height: 4rem; justify-content: center; }

  /* 경로는 제목만 — 앞 마디(MHSS › 광해조사 ›)는 접는다 */
  .hdr .bc { overflow: hidden; }
  .hdr .bc .bc-r, .hdr .bc .bc-sep, .hd-t > .bc-r, .hd-t > .bc-sep { display: none; }
  .hdr .bc .bc-c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  :root .hd-t h1 { flex-shrink: 0; max-width: 60%; }   /* 제목보다 차수 칩(.sub)이 먼저 줄어든다 */
  .svhdr .sv-logo .sb { display: none; }
  :root .svgnb { min-width: 0; overflow-x: auto; flex-wrap: nowrap; }
  :root .svgnb a { white-space: nowrap; padding: 7px 10px; }

  /* 본문 여백 */
  :root .content { padding-left: 12px; padding-right: 12px; }
  :root .svmain { padding: 16px 12px 32px; }

  /* 입력 칸은 16px 이상 — 아이폰 사파리는 그보다 작은 칸을 누르면 화면을 확대한다. 누르는 자리는 40px(표 안은 36px) */
  :root .inp, :root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root select, :root textarea { font-size: max(1.6rem, 16px); }
  :root .inp, :root .btn { min-height: 4rem; }
  :root td .inp, :root td select, :root td .btn, :root th .btn { min-height: 3.6rem; }

  /* 대화상자 — 화면 아래에 붙은 판. 머리 · 단추 줄은 붙박이, 본문만 스크롤 */
  :root .dlg-back, :root .m-overlay { align-items: flex-end; padding: 0; }
  :root .dlg, :root .modal { width: 100%; max-width: none; max-height: 90vh; max-height: 90dvh; border-radius: 14px 14px 0 0; }
  :root .dlg-hd { position: sticky; top: 0; z-index: 1; background: var(--surface); }
  :root .dlg-ft { position: sticky; bottom: 0; z-index: 1; background: var(--surface); flex-wrap: wrap; }
  :root .m-ft { flex-wrap: wrap; }
  :root .frow { grid-template-columns: minmax(0, 1fr); }
}

/* ── 폰 — 목록 표를 카드로(설계 §3.2) ───────────────────
   표에 data-m="card" 를 붙이면 줄 하나가 카드 하나가 된다. 칸 이름표(data-label)는 common.js 가 표 머리 글에서 복사한다.
   카드 제목 = .m-title 칸(표의 data-m-title 번째 칸, 없으면 첫 칸) · 처리 단추 칸(.m-acts) · 입력 칸 · 빈 줄 안내(colspan)는 한 줄 전체 */
@media (max-width: 767.98px) {
  :root table[data-m="card"], :root table[data-m="card"] > tbody { display: block; width: 100%; min-width: 0; border: 0; background: transparent; }
  :root table[data-m="card"] > thead { display: none; }
  :root table[data-m="card"] > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px;
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--bd); border-radius: 10px;
  }
  :root table[data-m="card"] > tbody > tr > td {
    display: block; min-width: 0; padding: 0; border: 0; background: none; text-align: left; white-space: normal;
  }
  :root table[data-m="card"] > tbody > tr > td::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-size: 1.1rem; font-weight: 500; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :root table[data-m="card"] > tbody > tr > td.m-title { grid-column: 1 / -1; order: -1; font-size: 1.4rem; font-weight: 600; color: var(--t1); }
  :root table[data-m="card"] > tbody > tr > td.m-title::before,
  :root table[data-m="card"] > tbody > tr > td[colspan]::before,
  :root table[data-m="card"] > tbody > tr > td.m-acts::before,
  :root table[data-m="card"] > tbody > tr > td[data-label=""]::before { content: none; }
  :root table[data-m="card"] > tbody > tr > td[colspan],
  :root table[data-m="card"] > tbody > tr > td.m-wide,
  :root table[data-m="card"] > tbody > tr > td:has(input.inp) { grid-column: 1 / -1; }
  :root table[data-m="card"] > tbody > tr > td.m-acts { grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed var(--bd); text-align: left; }
  :root table[data-m="card"] > tbody > tr > td.m-acts > div { flex-wrap: wrap; }
  :root table[data-m="card"] > tbody > tr > td.m-acts .btn { margin: 2px 4px 2px 0; }
  :root table[data-m="card"] > tbody > tr:hover > td { background: none; }
  /* 카드를 감싼 표 상자는 테두리 · 가로 스크롤을 뗀다 — 카드마다 테두리가 있다 */
  :root .tbl-wrap:has(table[data-m="card"]), :root .tbl-scroll:has(table[data-m="card"]),
  :root .tbl-x:has(table[data-m="card"]), :root .audit-tbl-scroll:has(table[data-m="card"]) {
    border: 0; background: transparent; overflow: visible; max-height: none; border-radius: 0;
  }
}

/* ── 폰 — 그 밖의 공통 부품(설계 §3.4) ─────────────── */
@media (max-width: 767.98px) {
  /* 요약 칸 격자(대시보드 .bento) — 4열 칸은 2열로, 넓은 칸은 한 줄 전체 */
  :root .bento .c-sp3, :root .bento .c-sp4, :root .bento .c-sp5 { grid-column: span 6; }
  :root .bento .c-sp6, :root .bento .c-sp7, :root .bento .c-sp8 { grid-column: span 12; }
  /* 카드가 아닌 표(통계 등)는 표 상자 안에서 가로로 민다 — 비교가 목적인 표는 표 모양을 지킨다 */
  :root .tbl-wrap { overflow-x: auto; }
}