/* 평택 물류 관제실 — 공통 스타일 (다크 관제실 + 시그널 오렌지) */
:root {
  --bg: #0a0e13; --bg2: #0f141b; --panel: #131a23; --panel2: #1a2230; --panel3: #212b3b;
  --line: #273244; --line2: #34425a;
  --text: #e8eef5; --muted: #8d9aab; --dim: #5d6a7c;
  --accent: #ff7a1a; --accent2: #ffa45c; --accent-soft: rgba(255, 122, 26, .15);
  --good: #22c55e; --bad: #ef4444; --warn: #f59e0b; --vip: #fbbf24; --cold: #38bdf8; --haz: #f97316;
  --r: 12px;
  --font: "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .acc { color: var(--accent); }
.hidden { display: none !important; }

/* 버튼 */
.btn { border: 1px solid var(--line2); background: var(--panel2); border-radius: 10px; padding: 9px 14px; font-weight: 600; transition: transform .08s, background .15s, border-color .15s; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--panel3); border-color: #46567a; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1a0d02; }
.btn.primary:hover:not(:disabled) { background: var(--accent2); border-color: var(--accent2); }
.btn.good { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.5); color: #86efac; }
.btn.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); color: #fca5a5; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 9px; font-size: 13px; border-radius: 8px; }
.btn.lg { padding: 14px 22px; font-size: 18px; border-radius: 14px; }

/* 칩·태그 */
.tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--panel3); color: var(--muted); }
.tag.cold { background: rgba(56,189,248,.16); color: #7dd3fc; }
.tag.haz { background: rgba(249,115,22,.18); color: #fdba74; }
.tag.vip { background: rgba(251,191,36,.2); color: #fde68a; }
.tag.snow { background: rgba(147,197,253,.18); color: #bfdbfe; }

/* 토스트 */
#toasts { position: fixed; top: 14px; right: 14px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(440px, 90vw); }
.toast { background: rgba(19,26,35,.96); border: 1px solid var(--line2); border-left: 5px solid var(--accent); border-radius: 12px; padding: 11px 15px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 600; animation: tin .28s cubic-bezier(.2,.9,.3,1.3); }
.toast.out { animation: tout .3s forwards; }
@keyframes tin { from { transform: translateX(40px); opacity: 0; } }
@keyframes tout { to { transform: translateX(40px); opacity: 0; } }

/* 모달 */
.modal-bg { position: fixed; inset: 0; background: rgba(3,6,10,.72); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .2s; backdrop-filter: blur(2px); }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 22px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal h3 { margin: 0 0 10px; font-size: 20px; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }

/* 깜빡임·등장 */
@keyframes blink { 50% { opacity: .35; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(255,122,26,.7); } 100% { box-shadow: 0 0 0 14px rgba(255,122,26,0); } }
@keyframes pop { 0% { transform: scale(.6) translateY(-10px); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: none; opacity: 1; } }
@keyframes vipGlow { 50% { box-shadow: 0 0 22px 4px rgba(251,191,36,.55); } }
.blink { animation: blink 1s infinite; }

/* 게이지 */
.gauge { height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; border: 1px solid var(--line); }
.gauge > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }

/* 연결 상태 뱃지 */
.conn { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }

/* 지도 */
.map-svg { width: 100%; height: 100%; display: block; }
.map-svg .land { fill: #16202c; stroke: #2c3a4f; stroke-width: 1.4; }
.map-svg .sea-bg { fill: #0b1119; }
.map-svg .route-road { stroke: #3a4960; stroke-width: 2; fill: none; }
.map-svg .route-rail { stroke: #5b6b86; stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.map-svg .route-sea { stroke: #1f5f8b; stroke-width: 1.6; fill: none; stroke-dasharray: 2 5; }
.map-svg .route-air { stroke: #6b5a8e; stroke-width: 1.2; fill: none; stroke-dasharray: 8 6; opacity: .7; }
.map-svg .dest circle { fill: #0f141b; stroke: #8d9aab; stroke-width: 2; }
.map-svg .dest text { fill: #cfd8e3; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #0a0e13; stroke-width: 4px; }
.map-svg .hub circle { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.map-svg .hub text { fill: #ffd2b0; font-size: 15px; font-weight: 800; paint-order: stroke; stroke: #0a0e13; stroke-width: 4px; }
.map-svg .veh text { font-size: 11px; }
.map-svg .snow { fill: #fff; opacity: .6; }