/* 재무 허브 정본 복제본 · 원본 finance-hub/public/design/responsive.css
   수정 금지: tools/sync-hub-design.mjs 로만 갱신한다. 급여 고유 규칙은 public/design/salary-*.css */
/* ══════════════════════════════════════════════════════════════════════
   finance-hub · 반응형 레이어
   ──────────────────────────────────────────────────────────────────────
   base.css · components.css **뒤에** 싣는다 — 명시도를 올리지 않고
   순서만으로 이기게 한다.

   층 구조 (finance-simulator/responsive.css 의 판단을 승계)
     [A] 폭 무관   골격(햄버거·스크림)
     [B] 터치 기기 hover 로만 드러나던 손잡이를 상시 노출
     [C] ≤1024    격자 접기
     [D] ≤860     사이드바 → 서랍  ★ 본 판
     [E] ≤600     밀도 재조정 · 1열
     [F] ≤400     초협소 (SE · 폴드 접힌 상태)
     [G] 가로 모드 · 인쇄 · 접근성

   ★ 단위 규약
     이 앱의 숫자는 잘리면 안 된다. 그래서 «표는 줄이지 않고 가로로
     스크롤시킨다» 가 원칙이다. 폰트를 줄여 억지로 담으면 40~50대 주
     사용자층에게 읽히지 않는다 (라이트 퍼스트와 같은 근거).
     Impeccable 의 "모바일은 기능 제거가 아니라 맥락 적응" 과도 같다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── [A] 폭 무관 ──────────────────────────────────────────────── */
.navscrim{ display:none; }
/* 막은 서랍(≤860)에만 쓴다. 넓은 화면에서 nav-open 이 남으면 사이드바는 그대로인데
   막이 본문 클릭을 모두 삼킨다. */
@media (max-width:860px){ body.nav-open .navscrim{ display:block; } }

/* 머리 줄 · 손잡이 줄은 넘치면 다음 줄로 내린다. 한 줄을 고집하면 버튼 하나가
   페이지 전체를 가로로 밀어낸다(375 폭에서 단추 3개 + 단위 표지). */
.page__act,.sec__act,.modal__foot{ flex-wrap:wrap; }
/* 화면 이름이 길면 토프바 안에서 두 줄이 되어 52px 를 넘었다 — 한 줄 말줄임 */
.topbar__title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── [B] 터치 기기 ────────────────────────────────────────────── */
@media (hover:none){
  /* hover 로만 드러나는 손잡이는 터치에서 영영 안 보인다. 상시 노출. */
  .table tbody tr:hover td{ background:transparent; }
  .btn,.segmented button{ min-height:34px; }
  /* 손가락 크기 — 아이콘 단추는 폭도 키운다(높이만 키우면 30px 막대가 된다) */
  .btn--icon,.pal-trigger{ min-width:34px; min-height:34px; }
  .role-guide__close,.mg-chip-x{ min-width:32px; min-height:32px; }
  .drill{ border-bottom-color:var(--brand); padding:var(--sp-1) 0; }
  /* iOS 는 16px 미만 입력칸에 초점이 가면 화면을 확대하고 돌아오지 않는다 */
  .input,.select,.textarea{ font-size:16px; }
  .input,.select{ height:36px; }
}

/* ── [C] ≤1024 : 격자 접기 ────────────────────────────────────── */
@media (max-width:1024px){
  /* 1fr 은 minmax(auto,1fr) — 차트·표의 고유 폭(520px)이 열을 밀어 320 화면이 가로로 넘쳤다 */
  .grid--2,.grid--3{ grid-template-columns:minmax(0,1fr); }
  .rail{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .page{ padding:var(--sp-4); }
}

/* ── [D] ≤860 : 사이드바 → 서랍  ★ 본 판 ─────────────────────── */
@media (max-width:860px){
  .shell{ grid-template-columns:1fr; }

  .sidebar{
    position:fixed; top:0; bottom:0; left:0; width:var(--sidebar-w);
    z-index:calc(var(--z-dock) + 1);   /* 토프바 위 — 서랍 머리(로고)가 가려지지 않게 */
    transform:translateX(-100%);
    /* 닫힌 서랍은 visibility 로도 숨긴다 — transform 만으로는 링크가 Tab 순서에
       남아 키보드 포커스가 화면 밖으로 사라진다. 닫힐 때는 미끄러진 뒤 숨긴다. */
    visibility:hidden;
    transition:transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
    box-shadow:var(--shadow-pop);
  }
  body.nav-open .sidebar{ transform:translateX(0); visibility:visible; transition-delay:0s; }
  /* 서랍은 늘 열고 닫는 것이다 — 고정핀이 할 일이 없다 */
  .sidebar__pin{ display:none; }

  .topbar{ padding:0 var(--sp-3); }
  .btn.topbar__burger{ display:inline-flex; }

  .page{ padding:var(--sp-4) var(--sp-3); }
  .page__head{ flex-direction:column; align-items:stretch; gap:var(--sp-2); }

  /* 표는 좁히지 않고 가로로 민다. 손가락으로 미는 것이 읽히지 않는 표보다 낫다. */
  .tablewrap{ -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }

  /* 보기 전환은 줄이지 않고 자기 안에서 옆으로 민다 — 다섯 갈래짜리가 화면 폭을 넘었다 */
  .segmented{ max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .segmented::-webkit-scrollbar{ display:none; }
  .segmented button{ flex:none; white-space:nowrap; }


  .drawer{ width:100vw; }
}

/* ── [E] ≤600 : 밀도 재조정 ───────────────────────────────────── */
@media (max-width:600px){
  .rail{ grid-template-columns:repeat(2,1fr); }
  .rail__cell:nth-child(2n+1){ border-left:0; }
  .rail__cell:nth-child(n+3){ border-top:1px solid var(--line); }
  .modal{ width:100vw; max-height:92vh; top:auto; bottom:0; left:0;
          transform:none; border-radius:var(--r-4) var(--r-4) 0 0; }
  .toast{ left:var(--sp-3); right:var(--sp-3); transform:none; justify-content:center; }
  /* 시트 안 머리 · 몸 · 발 — 몸만 스크롤, 발은 홈 표시줄 위로 */
  .modal__foot{ padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom)); }

  /* 섹션 머리 — 제목 · 단위 · 손잡이가 한 줄을 넘으면 손잡이를 다음 줄로 */
  .sec__head{ flex-wrap:wrap; row-gap:var(--sp-2); }

  /* 첫 열 고정은 지키되 폭은 화면의 4할까지 — 긴 계정명이 숫자 열을 다 가렸다 */
  .table .sticky{ max-width:40vw; overflow:hidden; text-overflow:ellipsis; }

  /* 단추 + 설명 줄 — 넘치면 내린다. 파일 이름이 붙은 긴 단추는 단추 안에서 줄을 바꾼다 */
  .row{ flex-wrap:wrap; }
  .btn{ max-width:100%; }
  .row > .btn{ white-space:normal; height:auto; min-height:34px; padding-block:var(--sp-1); }

  /* 업로드 놓는 자리 — 폰에서는 끌어다 놓을 일이 없다. 키를 낮춘다 */
  .drop{ padding:var(--sp-5) var(--sp-3); }
}

/* ── [F] ≤400 : 초협소 ────────────────────────────────────────── */
@media (max-width:400px){
  .rail{ grid-template-columns:1fr; }
  .rail__cell{ border-left:0; border-top:1px solid var(--line); }
  .rail__cell:first-child{ border-top:0; }
  .sidebar{ width:min(var(--sidebar-w),86vw); }
}

/* ── [G] 가로 모드 · 인쇄 · 접근성 ───────────────────────────── */
@media (max-width:900px) and (max-height:480px){
  /* 가로로 눕힌 폰 — 세로 여백을 깎는다. 가로는 그대로 둔다. */
  .topbar{ height:44px; }
  .sec{ padding:var(--sp-3) 0; }
}

@media print{
  .sidebar,.topbar,.navscrim,.drawer,.toast,.btn,.segmented{ display:none !important; }
  .shell{ grid-template-columns:1fr; }
  .page{ padding:0; }
  .card,.tablewrap,.rail{ box-shadow:none; border-color:var(--line-3); }
  .table thead th{ position:static; }
  /* validator:allow pure-bw — 인쇄 용지는 흰색이다. 화면 토큰과 무관하다 */
  body{ background:#FFFFFF; }
}

@media (prefers-contrast:more){
  :root{ --line:rgba(var(--veil),.24); --line-2:rgba(var(--veil),.34);
         --muted:var(--body); --faint:var(--muted); }
}