/* Mobile-first responsive — UIUX v2 §7. Per CLAUDE.md §1, <= 200 lines.
 * Targets: mobile <=768px (single column + sticky CTA + full-screen modals)
 * Tablet <=1024px (2 col where applicable)
 */

/* [LP4] 햄버거·드로어 — 기본(PC 769px+) 완전 비표시: 데스크톱 헤더 현행 불변 */
.nav-hamburger, .orbit-drawer { display: none; }

/* ---- Base mobile adjustments ---- */
@media (max-width: 768px) {
  .orbit-header { padding: var(--sp-3) var(--sp-4); }
  .orbit-logo { font-size: 20px; }
  .orbit-nav { gap: var(--sp-3); }
  .orbit-nav a { font-size: 13px; }

  /* [LP4] 시안2+파생: 바=로고+언어+CTA+햄버거 — 텍스트 nav·메일함은 드로어로
     (원인: nav 6항목이 좁은 폭에 눌려 한글 글자 단위 세로 줄바꿈).
     언어(.lang-switcher)는 외국인 사용자 핵심 — 바에 상시 노출(국기만, 사용자 지시) */
  .orbit-nav > a:not(.nav-cta-start) { display: none !important; }
  .nav-hamburger {
    display: inline-flex; position: relative; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: none; padding: 0;
    font-size: 22px; line-height: 1; color: var(--text); cursor: pointer;
  }
  .nav-hamburger .ham-dot { top: 2px; right: 2px; }
  .orbit-drawer.open { display: block; }
  .orbit-drawer {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); z-index: 99;
  }
  .drawer-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--sp-4); border-top: 1px solid var(--border);
    font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none;
  }
  .drawer-item:hover { background: var(--surface-alt); text-decoration: none; }

  .container, .container-md, .container-sm { padding: 0 var(--sp-4); }
  main.container-md { padding: 24px var(--sp-4) !important; }

  .card { padding: var(--sp-4); border-radius: var(--radius); }
  .row, .row-wide { flex-direction: column; align-items: stretch; gap: var(--sp-3); }

  /* Buttons full width on mobile */
  .btn, .btn-block { width: 100%; }
  .btn-sm { width: auto; }

  /* Sticky bottom CTA pattern */
  .sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  }

  /* Full-screen modals */
  .modal {
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0;
  }
  .modal-overlay { padding: 0; align-items: stretch; }

  /* Wizard step list — vertical scrollable */
  .stack-3, .stack-4 { gap: var(--sp-3); }

  /* Hero compresses */
  h1 { font-size: 26px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 16px !important; }

  /* Milestone card — tighter padding */
  .milestone-card { padding: var(--sp-3) var(--sp-4); }

  /* Slot picker — single column */
  .slot-picker { gap: var(--sp-2); }
  .slot-row { padding: var(--sp-3); }

  /* Lang switcher — collapse to flag only */
  .lang-current span { display: none; }

  /* Toast bottom-positioned on mobile */
  .toast-stack {
    top: auto !important;
    bottom: var(--sp-4);
    left: var(--sp-4);
    right: var(--sp-4);
  }
  .toast { max-width: 100%; }

  /* Entry card stacks */
  .entry-card { padding: var(--sp-4); }
  .entry-card-price { font-size: 24px; }
  .entry-card-title { font-size: 16px; }

  /* Chat panel takes more height */
  .chat-panel { height: calc(100vh - 200px); min-height: 360px; }
}


/* ---- Small mobile (<=480px) ---- */
@media (max-width: 480px) {
  :root { --fs-base: 14px; }
  .orbit-stub-main h1 { font-size: 20px; }
  .orbit-nav { gap: var(--sp-2); }
  .orbit-nav a { font-size: 12px; }
  .pill { font-size: 10px; padding: 3px 8px; }
  .badge-urgent { font-size: 10px; padding: 3px 8px; }
}


/* ---- Tablet (769-1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { max-width: 760px; }
}


/* ---- Print (form download preview) ---- */
@media print {
  .orbit-header, .orbit-footer, .sticky-cta, .toast-stack { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
}


/* ---- Accessibility: focus rings on touch devices too ---- */
@media (hover: none) {
  .btn:focus { outline: 2px solid var(--toss-blue); outline-offset: 2px; }
}


/* ---- High contrast preference ---- */
@media (prefers-contrast: high) {
  :root {
    --border: #000;
    --text-sub: #000;
    --text-mute: #333;
  }
  .btn { border: 1.5px solid currentColor; }
}


/* ---- Dark mode preference (future) ---- */
@media (prefers-color-scheme: dark) {
  /* Phase 41 leaves light theme as default; dark = v1.x */
}