/* ══════════════════════════════════════════════════════════════════════
   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; }
body.nav-open .navscrim{ display:block; }

/* ── [B] 터치 기기 ────────────────────────────────────────────── */
@media (hover:none){
  /* hover 로만 드러나는 손잡이는 터치에서 영영 안 보인다. 상시 노출. */
  .table tbody tr:hover td{ background:transparent; }
  .btn,.segmented button{ min-height:34px; }
  .drill{ border-bottom-color:var(--brand); }
}

/* ── [C] ≤1024 : 격자 접기 ────────────────────────────────────── */
@media (max-width:1024px){
  .grid--2,.grid--3{ grid-template-columns: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:var(--z-drawer);
    transform:translateX(-100%);
    transition:transform var(--dur-2) var(--ease);
    box-shadow:var(--shadow-pop);
  }
  body.nav-open .sidebar{ transform:translateX(0); }

  .topbar{ padding:0 var(--sp-3); }
  .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; }

  .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; }
}

/* ── [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); }
}