/* css/responsive.css — 반응형 (태블릿/모바일) */

/* 태블릿: 우측 패널을 좁힘 */
@media (max-width: 1180px) {
  :root { --info-w: 290px; --sidebar-w: 180px; }
  .routes-grid { grid-template-columns: 320px 1fr; }
}

/* 좁은 태블릿: 우측 패널 숨기고 지도 확대 */
@media (max-width: 960px) {
  .app-shell {
    grid-template-areas:
      "topbar topbar"
      "sidebar main"
      "statusbar statusbar";
    grid-template-columns: var(--sidebar-w) 1fr;
  }
  .info-panel { display: none; }
  .routes-grid { grid-template-columns: 1fr; }
}

/* 모바일: 사이드바를 드로어로 */
@media (max-width: 720px) {
  :root { --topbar-h: 54px; --status-h: 92px; }
  .app-shell {
    grid-template-areas:
      "topbar"
      "main"
      "statusbar";
    grid-template-columns: 1fr;
  }
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
    transform: translateX(-100%); transition: transform 0.22s ease;
    z-index: 50; padding-top: calc(var(--topbar-h) + 8px);
  }
  .app-shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow); }
  .tb-stats { gap: var(--sp-3); }
  .tb-label { font-size: 0.62rem; }
  .tb-value { font-size: 0.82rem; }
  .tb-airline { display: none; }
  .tb-actions .icon-btn { width: 32px; height: 32px; }
  #btn-next-turn { padding: 8px 10px; font-size: 0.8rem; }
  .difficulty-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .settle-meta { grid-template-columns: 1fr; }
  .setup-card { padding: var(--sp-4); }
}

/* 초소형 (390px 대응) */
@media (max-width: 400px) {
  .tb-brand .tb-code { font-size: 0.75rem; padding: 2px 6px; }
  .tb-stat:nth-child(n+4) { display: none; } /* 핵심 지표만 노출 */
  .card-grid { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}