/* 테마 토큰 — 기본 다크 = "프리미엄 골드" · 라이트 = "소프트 민트" (사용자 팔레트 2026-09-01) */
:root {
  --bg: #121212;
  --surface: #1b1b1b;
  --surface2: #242424;
  --line: #2d2d2d;
  --ink: #edebe6;
  --muted: #a3a099;
  --primary: #d4af37;
  --success: #6ee7b7;
  --warning: #fcd34d;
  --error: #fb7185;
  --primary-soft: rgba(212, 175, 55, 0.12);
  --primary-line: rgba(212, 175, 55, 0.4);
  --map-route: #d4af37;
  --map-marker: #fcd34d;
  /* 라인↔지도 매칭 dot 용 스테이지 색(다크 = 지도 리터럴과 동일 계열) — 사용자 요청 2026-09-04 */
  --stage-collecting: #a3a099;
  --stage-loading: #a78bfa;
  --stage-transit: #fcd34d;
  --stage-atport: #7fb3d1;
  --stage-delayed: #fb7185;
}
:root[data-theme="light"] {
  --bg: #fbfbfa;
  --surface: #ffffff;
  --surface2: #f2f4f2;
  --line: #e3e6e2;
  --ink: #20242a;
  --muted: #6b7280;
  --primary: #2ec4b6;
  --success: #40c057;
  --warning: #fab005;
  --error: #fa5252;
  --primary-soft: rgba(46, 196, 182, 0.1);
  --primary-line: rgba(46, 196, 182, 0.45);
  --map-route: #2ec4b6;
  --map-marker: #fab005;
  --stage-collecting: #6b7280;
  --stage-loading: #7c3aed;
  --stage-transit: #d97706;
  --stage-atport: #2b7ea1;
  --stage-delayed: #e11d48;
}
/* JS 실행 전(미스탬프 상태) 시스템 라이트 설정 추종 — 플래시 방지 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbfbfa;
    --surface: #ffffff;
    --surface2: #f2f4f2;
    --line: #e3e6e2;
    --ink: #20242a;
    --muted: #6b7280;
    --primary: #2ec4b6;
    --success: #40c057;
    --warning: #fab005;
    --error: #fa5252;
    --primary-soft: rgba(46, 196, 182, 0.1);
    --primary-line: rgba(46, 196, 182, 0.45);
    --map-route: #2ec4b6;
    --map-marker: #fab005;
    --stage-collecting: #6b7280;
    --stage-loading: #7c3aed;
    --stage-transit: #d97706;
    --stage-atport: #2b7ea1;
    --stage-delayed: #e11d48;
  }
  :root:not([data-theme="dark"]) .logo img.logo-dark { display: none; }
  :root:not([data-theme="dark"]) .logo img.logo-light { display: block; }
}

* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; padding: 24px 16px; }
.page { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* 상단 네비게이션 */
.nav { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.logo { display: inline-flex; align-items: center; margin-right: 8px; }
.logo img { display: block; height: 30px; width: auto; }
.logo img.logo-light { display: none; }
:root[data-theme="light"] .logo img.logo-dark { display: none; }
:root[data-theme="light"] .logo img.logo-light { display: block; }
.navlink { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 6px; }
.navlink:hover { color: var(--primary); background: var(--surface2); }
.theme-toggle { margin-left: auto; background: var(--surface2); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; }
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

h1 { font-size: 24px; }
h2 { font-size: 16px; margin-bottom: 8px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel-head h2 { margin-bottom: 0; }
.viewswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.viewbtn { background: var(--surface2); border: none; color: var(--muted); padding: 4px 12px; font-size: 12px; cursor: pointer; }
.viewbtn + .viewbtn { border-left: 1px solid var(--line); }
.viewbtn.active { background: var(--primary); color: var(--bg); font-weight: 600; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.lines { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st { font-weight: 600; }
.st-shipped, .st-delivered, .st-ready_for_pickup, .st-picked_up { color: var(--success); }
.st-processing, .st-awaiting_inbound { color: var(--warning); }
.st-cancelled { color: var(--error); }
.line-inbound { color: var(--muted); font-size: 13px; }
/* 라인 ↔ 지도 마커 색 매칭 dot(사용자 요청 2026-09-04): 그 제품이 실린 인바운드의 스테이지 색 */
.line-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); margin: 0 2px; vertical-align: -1px; }
.line-dot.dot-collecting { background: var(--stage-collecting); }
.line-dot.dot-loading { background: var(--stage-loading); }
.line-dot.dot-transit { background: var(--stage-transit); }
.line-dot.dot-atport { background: var(--stage-atport); }
.line-dot.dot-delayed { background: var(--stage-delayed); }

/* 멀티오더 탭(사용자 확정 2026-09-04): 한 카드 안에서 주문별 탭 전환 */
.order-tabs { display: flex; gap: 6px; margin: 6px 0 12px; flex-wrap: wrap; }
.order-tab { background: var(--surface2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.order-tab:hover { border-color: var(--primary); color: var(--primary); }
.order-tab.active { background: var(--primary); border-color: var(--primary); color: var(--bg); }

/* 주문 카드 노트 라인(추적 링크 등) */
.other-note { margin: 2px 0 8px; }
.other-note a { color: var(--primary); font-weight: 600; }
#order-panel .other-note { margin-top: 8px; margin-bottom: 0; }

.intl { background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--ink); border-radius: 6px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.intl-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--primary-line); font-size: 12.5px; color: var(--muted); }
.intl-note a { color: var(--primary); font-weight: 600; }

/* 셀프서비스 링크 재발송 폼 */
.link-form-lead { margin-top: 10px; }
.link-form { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.link-form input { flex: 1; min-width: 200px; background: var(--surface2); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 8px 10px; font-size: 14px; }
.link-form input:focus { outline: none; border-color: var(--primary); }
.link-form button { background: var(--primary); color: var(--bg); border: none; border-radius: 6px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.link-form button:disabled { opacity: 0.6; cursor: default; }

.contact-line { margin-top: 8px; }
.contact-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.contact-link:hover { text-decoration: underline; }

.mono { font-family: ui-monospace, Menlo, monospace; }
.small { font-size: 12.5px; }
.muted { color: var(--muted); }

/* 지도 — 해도 배경은 양 테마 공통(다크 네이비 카드), 액센트만 팔레트 추종 */
.map-area { position: relative; }
.map-area svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.m-hit { cursor: pointer; }
.m-hitzone { fill: transparent; pointer-events: all; }
.ship-popup { position: absolute; z-index: 6; max-width: 250px; background: #0d2230; border: 1px solid #2a4c5f; border-radius: 8px; padding: 10px 28px 10px 12px; color: #bfd9e6; font-size: 12.5px; line-height: 1.5; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); }
.ship-popup .sp-head { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--map-marker); }
.ship-popup .sp-sub { margin-top: 5px; font-size: 11px; color: #7fa3b5; letter-spacing: 0.04em; }
.ship-popup ul { margin: 4px 0 0; padding-left: 16px; }
.ship-popup li { margin: 2px 0; }
.ship-popup .sp-close { position: absolute; top: 3px; right: 5px; background: none; border: none; color: #7fa3b5; font-size: 15px; cursor: pointer; padding: 2px 4px; }
.ship-popup .sp-close:hover { color: #bfd9e6; }
.globe-wrap { position: relative; width: fit-content; margin: 0 auto; }
.globe-canvas { display: block; border-radius: 8px; background: #0d2230; cursor: grab; touch-action: none; }
.globe-canvas:active { cursor: grabbing; }
.globe-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.globe-zoom button { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #2a4c5f; background: #0d2230; color: #bfd9e6; font-size: 16px; cursor: pointer; line-height: 1; }
.globe-zoom button:hover { border-color: var(--primary); color: var(--primary); }
.m-bg { fill: #122b3a; }
.m-land { fill: #1d3d51; stroke: #35617a; stroke-width: 0.8; }
.m-grid { stroke: #244356; stroke-width: 1; }
.m-gridlabel { fill: #2a4c5f; font-size: 9px; font-family: ui-monospace, Menlo, monospace; }
.m-route { fill: none; stroke: var(--map-route); stroke-width: 2.5; stroke-linecap: round; }
.m-route.m-air { stroke: #bfd9e6; stroke-width: 1.3; stroke-dasharray: 1 6; opacity: 0.6; }
.m-route.m-idle { opacity: 0.18; }
.m-port { fill: var(--map-marker); }
.m-portlabel { fill: #bfd9e6; font-size: 11px; font-family: ui-monospace, Menlo, monospace; }
.m-icon path { fill: var(--map-marker); }
.m-legendbox { fill: #0d2230; stroke: #2a4c5f; stroke-width: 1; opacity: 0.95; }
.m-legendtext { fill: #bfd9e6; font-size: 10px; font-family: ui-monospace, Menlo, monospace; }
.m-legendair { opacity: 0.9; }
.m-pulse { fill: none; stroke: var(--map-marker); stroke-width: 1.5; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .m-pulse { animation: mpulse 2.6s ease-in-out infinite; }
  @keyframes mpulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.2; } }
}
.m-vessellabel { fill: var(--map-marker); font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; }
.m-overdue .m-icon path { fill: var(--error); }
.m-overdue .m-pulse { stroke: var(--error); }
.m-latelabel { fill: var(--error); }
/* 스테이지 원 색 = 라인아이템 상태색과 동일 어휘 (collecting=muted · loading=success · in transit=warning=마커색 · delayed=error)
   ⚠️ 지도 캔버스는 상시 다크 — 다크 팔레트 리터럴로 고정 (라이트 --muted #6b7280 은 '미포함' 옅은 흰색과 동색이 돼 구분 붕괴) */
/* loading = 퍼플(2026-09-04): 이전 green 이 라인 상태색(Picked up/Shipped)과 겹쳐 오해 유발 */
.m-stage-collecting .m-stagedot, .lgc-collecting { fill: #a3a099; }
.m-stage-loading .m-stagedot, .lgc-loading { fill: #a78bfa; }
.m-stage-at_port .m-stagedot, .lgc-atport { fill: #bfd9e6; }
.m-stage-at_port .m-pulse { stroke: #bfd9e6; }
.m-stage-collecting .m-vessellabel { fill: #a3a099; }
.m-stage-loading .m-vessellabel { fill: #a78bfa; }
.m-stage-at_port .m-vessellabel { fill: #bfd9e6; }
.lgc-transit { fill: var(--map-marker); }
.lgc-delayed { fill: var(--error); }
.lgc-dim { fill: rgba(255, 255, 255, 0.35); }
/* 지시선: 마커 ↔ 이름 직선 연결(라벨 교차 배치 시 소속을 직관화) */
.m-leader { stroke: rgba(191, 217, 230, 0.4); stroke-width: 1; }
.m-dim .m-leader { stroke: rgba(255, 255, 255, 0.18); }
/* 내 아이템 미포함 선적 = 옅은 흰색 (지도 캔버스는 상시 다크) — 스테이지 색보다 우선 */
.m-dim .m-icon path { fill: rgba(255, 255, 255, 0.35); }
.m-dim .m-stagedot { fill: rgba(255, 255, 255, 0.35); }
.m-dim .m-pulse { display: none; }
.m-dim .m-vessellabel, .m-dim .m-latelabel { fill: rgba(255, 255, 255, 0.4); }
#inbound-list li.dim { opacity: 0.5; }
#inbound-list li.late { color: var(--error); }
#inbound-list a.cbsa-link { color: var(--primary); font-weight: 600; text-decoration: none; }
#inbound-list a.cbsa-link:hover { text-decoration: underline; }
.ship-popup .sp-sub a { color: var(--map-marker); font-weight: 600; }
.ship-popup .sp-head.late { color: var(--error); }
.m-note { fill: #7fa3b5; font-size: 9.5px; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; }