/* I-MAP Mobile Web App — Dark Native Theme */
/* PC는 그대로 / 모바일에서만 이 레이어가 표시됨 */

#imap-mobile-app { display: none; }

@media (max-width: 768px) {
  #imap-mobile-app {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
  }
}

#imap-mobile-app {
  position: fixed; inset: 0;
  overflow: hidden; z-index: 99999;
  flex-direction: column;
  background: #0a0e1a;
  font-family: 'Noto Sans KR', 'Inter', sans-serif;
  font-size: 14px; color: #e2e8f0;
  -webkit-font-smoothing: antialiased;
  --bg:#0a0e1a; --bg2:#111827; --bg3:#1a2235;
  --surf:#1e2d47; --surf2:#243350; --bd:rgba(99,130,191,.18);
  --acc:#3b82f6; --acc2:#60a5fa;
  --red:#ef4444; --amber:#f59e0b; --green:#10b981; --purple:#8b5cf6;
  --t1:#e2e8f0; --t2:#94a3b8; --t3:#64748b;
  --r:14px; --nav:70px; --header-h:58px; --safe:env(safe-area-inset-bottom,0px);
}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.m-header{background:var(--bg);padding:14px 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0;position:relative;z-index:2}
#imap-mobile-app{--header-h:82px}
.m-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.m-logo-wrap{display:flex;align-items:center;gap:10px}
.m-logo-badge{background:var(--acc);border-radius:9px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:1px;color:#fff}
.m-logo-title{font-size:15px;font-weight:700}
.m-header-btns{display:flex;gap:8px}
.m-icon-btn{width:34px;height:34px;border-radius:10px;background:var(--surf);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .15s}
.m-icon-btn:active{background:var(--surf2)}
.m-status-row{display:flex;align-items:center;gap:6px}
.m-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:mpulse 2s infinite;flex-shrink:0}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* iOS 햅틱 폴백 — 짧은 흔들림 효과 */
@keyframes hapticShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
body.haptic-shake{animation:hapticShake .22s ease-in-out 1}
.m-status-txt{font-size:11px;color:var(--t2)}
.m-time-txt{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc2)}
.m-screen{
  display:none;
  position:absolute;
  top:var(--header-h, 58px);
  bottom:calc(var(--nav) + var(--safe));
  left:0; right:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding-bottom:8px;
  scroll-behavior:smooth;
}
.m-screen::-webkit-scrollbar{display:none}
@keyframes m-screen-reveal{from{opacity:0}to{opacity:1}}
.m-screen.active{
  display:block !important;
  touch-action:pan-y;
  z-index:1;
  animation:m-screen-reveal 0.1s ease-out;
}
/* dispatch는 opacity 트랜지션 방식 별도 사용 — 애니메이션 중복 방지 */
#m-screen-dispatch.active{animation:none}
/* 관제 지도 탭 */
#m-screen-dispatch{overflow-y:auto;box-sizing:border-box;min-height:0}
/* dispatch 스크린: display:none 대신 opacity 로 숨김 — Leaflet 재초기화·깜빡임 방지 */
/* 컨테이너 크기를 항상 유지해 invalidateSize 불필요, 탭 복귀 시 즉시 표시 */
#m-screen-dispatch{opacity:0;pointer-events:none;z-index:0;transition:opacity .12s}
#m-screen-dispatch.active{opacity:1;pointer-events:auto;z-index:1}
/* 모바일 이송 지도 — 초기 렌더 시 크게 나왔다가 줄어드는 버그 방지 */
/* #mob_dispatch_map 자체가 leaflet-container — 후손 선택자(.leaflet-container) 불필요 */
/* clip-path/overflow는 Leaflet 컨테이너에 직접 적용 금지 — GPU 컴포지터 버그(타일 블랙) 유발 */
/* 대신 상위 래퍼 div(ui.R)에 overflow:hidden 적용 */
#mob_dispatch_map{height:380px!important;max-height:380px!important;width:100%!important;max-width:100%!important;position:relative!important}
/* force-mobile-only(큰 화면): 지도가 앱 컨테이너(430px) 폭을 절대 초과하지 않도록 */
body.force-mobile-only #mob_dispatch_map{max-width:430px!important}
/* force-mobile-only: 범례 크기를 실제 모바일과 동일하게 유지 (resize 핸들러 inline style 방지) */
body.force-mobile-only #_hosp_legend{width:160px!important;max-width:160px!important;font-size:10px!important;line-height:1.7!important}
/* force-mobile-only: 관제 탭 오버레이 박스 430px 하드캡 — JS getBCR 오류 시 박스 확장 방지 */
body.force-mobile-only .route-dist-box{max-width:190px!important;box-sizing:border-box!important}
body.force-mobile-only #_amb-follow-btn{max-width:120px!important;box-sizing:border-box!important}
body.force-mobile-only #amb-map-status-overlay{left:10px!important;right:10px!important;max-width:calc(min(430px,100vw) - 20px)!important;box-sizing:border-box!important}
@keyframes mslideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.m-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav) + var(--safe));padding-bottom:var(--safe);background:rgba(17,24,39,.97);backdrop-filter:blur(12px);border-top:1px solid var(--bd);display:flex;align-items:stretch;z-index:10;will-change:transform;contain:layout style}
.m-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;border:none;background:none;transition:color .15s;position:relative;min-height:44px}
.m-nav-ico{font-size:22px;transition:transform .15s;will-change:transform}
.m-nav-lbl{font-size:10px;font-weight:500;color:var(--t3);transition:color .15s}
.m-nav-btn.on .m-nav-ico{transform:scale(1.12)}
.m-nav-btn.on .m-nav-lbl{color:var(--acc);font-weight:700}
.m-nav-badge{position:absolute;top:8px;right:calc(50% - 18px);background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;min-width:16px;text-align:center}
/* 6-tab nav adjustments */
.m-bottom-nav .m-nav-btn{gap:2px;padding:0 2px}
.m-bottom-nav .m-nav-lbl{font-size:9px}
.m-bottom-nav .m-nav-ico svg{width:18px;height:18px}
/* 전원 추천 조건 버튼 */
.m-cond-btn{background:rgba(99,130,191,.12);border:1px solid rgba(99,130,191,.25);color:#94a3b8;border-radius:20px;padding:6px 10px;font-size:11px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;text-align:center}
.m-cond-btn.active{background:rgba(59,130,246,.25);border-color:#3b82f6;color:#3b82f6;font-weight:700}
.m-d23-btn{background:rgba(99,130,191,.12);border:1px solid rgba(99,130,191,.25);color:#94a3b8;border-radius:20px;padding:6px 10px;font-size:11px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;text-align:center}
.m-d23-btn.active{background:rgba(239,68,68,.22);border-color:#ef4444;color:#f87171;font-weight:700}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.m-section{padding:16px 16px 0}
.m-sec-ttl{font-size:12px;font-weight:700;color:var(--t2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.m-card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.m-spacer{height:20px}
.m-alert{margin:14px 16px 0;background:linear-gradient(135deg,#7c2d12,#991b1b);border:1px solid rgba(239,68,68,.3);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;animation:mslideIn .4s ease}
.m-alert-ico{font-size:20px;flex-shrink:0}
.m-alert-ttl{font-size:12px;font-weight:700;color:#fca5a5;margin-bottom:2px}
.m-alert-desc{font-size:11px;color:#fcd4d4;opacity:.85}
.m-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 16px 0}
.m-kpi{background:var(--surf);border:1px solid var(--bd);border-radius:14px;padding:14px;position:relative;overflow:hidden}
.m-kpi::before{content:'';position:absolute;top:0;right:0;width:60px;height:60px;border-radius:50%;opacity:.08}
.m-kpi.kv-r::before{background:var(--red)}.m-kpi.kv-a::before{background:var(--amber)}.m-kpi.kv-g::before{background:var(--green)}.m-kpi.kv-p::before{background:var(--purple)}
.m-kpi-lbl{font-size:10px;color:var(--t2);margin-bottom:4px}
.m-kpi-val{font-size:26px;font-weight:900;font-family:'JetBrains Mono',monospace;line-height:1}
.m-kpi.kv-r .m-kpi-val{color:var(--red)}.m-kpi.kv-a .m-kpi-val{color:var(--amber)}.m-kpi.kv-g .m-kpi-val{color:var(--green)}.m-kpi.kv-p .m-kpi-val{color:var(--purple)}
.m-kpi-sub{font-size:10px;margin-top:4px;color:var(--t3)}
.m-region-list{margin:14px 16px 0;display:flex;flex-direction:column;gap:8px}
.m-region-item{background:var(--surf);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.m-rk{font-size:11px;font-weight:700;color:var(--t3);width:18px}
.m-ri{flex:1}.m-rnm{font-size:13px;font-weight:600;margin-bottom:3px}
.m-rbar-wrap{display:flex;align-items:center;gap:6px}
.m-rbar-bg{flex:1;height:4px;background:var(--bg3);border-radius:99px;overflow:hidden}
.m-rbar{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.m-rcnt{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--t2);min-width:28px;text-align:right}
.m-rtag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px}
.tag-ucc{background:rgba(239,68,68,.15);color:#f87171}.tag-upc{background:rgba(245,158,11,.15);color:#fbbf24}.tag-cnc{background:rgba(16,185,129,.15);color:#34d399}
.m-bed-list{display:flex;flex-direction:column;gap:0}
.m-bed-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd)}
.m-bed-item:last-child{border-bottom:none}
.m-bed-nm{font-size:12px;font-weight:600;flex:1}
.m-bed-bar-bg{width:64px;height:5px;background:var(--bg3);border-radius:99px;overflow:hidden;flex-shrink:0}
.m-bed-bar-fill{height:100%;border-radius:99px;transition:width .6s}
.m-bed-cnt{font-size:11px;font-family:'JetBrains Mono',monospace;font-weight:700;min-width:28px;text-align:right;flex-shrink:0}
.m-bed-tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;flex-shrink:0}
.m-ai-hero{margin:8px 6px 0;background:linear-gradient(145deg,#1e3a5f,#0f2444);border:1px solid rgba(59,130,246,.25);border-radius:14px;padding:12px 12px 14px}
.m-ai-label{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--acc2);margin-bottom:6px;text-transform:uppercase}
.m-ai-title{font-size:17px;font-weight:700;line-height:1.3;margin-bottom:10px}
.m-ai-title span{color:var(--acc2)}
.m-ai-inputs{display:flex;flex-direction:column;gap:8px}
.m-ai-sel{background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;padding:9px 12px;color:var(--t1);font-size:13px;font-family:inherit;width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.m-ai-sel option{background:#1e2d47}
/* 음성/수동 입력으로 값이 채워진 select — 녹색 강조 + 체크 */
.m-ai-sel.filled{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.6);color:#a7f3d0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:28px}
/* 음성 인식으로 활성화된 주증상 버튼 — 펄스 강조 */
/* outline은 layout 재계산을 유발하지 않으며, ::after 의사 요소 transform은 GPU 합성 레이어에서 처리됨 */
.m-chief-btn.voice-filled{outline:2px solid rgba(16,185,129,.6);outline-offset:1px;position:relative}
.m-chief-btn.voice-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;animation:voicePulse .8s ease-out forwards;pointer-events:none}
@keyframes voicePulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.7);opacity:1}100%{box-shadow:0 0 0 8px rgba(16,185,129,0);opacity:0}}
.m-ai-btn{background:var(--acc);color:#fff;border:none;border-radius:12px;padding:12px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:background-color .15s,transform .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.m-ai-btn:active{transform:scale(.97);background:#2563eb}
.m-ai-btn.busy{background:#1d4ed8;pointer-events:none}

/* ── 단계별 입력 섹션 ─────────────────────────────────────────── */
.m-step-section{margin-top:8px;border-radius:10px;transition:opacity .3s ease}
.m-step-section.locked{opacity:.38;pointer-events:none}
.m-step-section.locked .m-step-header{cursor:default}
.m-step-section.open .m-step-body{display:block}
.m-step-section.done .m-step-header{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35)}
.m-step-section.open .m-step-header{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45)}
.m-step-header{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1.5px solid rgba(99,130,191,.2);border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;transition:background-color .2s,border-color .2s}
.m-step-num{width:20px;height:20px;border-radius:50%;background:rgba(99,130,191,.25);color:#94a3b8;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .2s,color .2s}
.m-step-section.done .m-step-num{background:#10b981;color:#fff}
.m-step-section.open .m-step-num{background:#3b82f6;color:#fff}
.m-step-title{font-size:11px;font-weight:700;color:#94a3b8;flex:1;transition:color .2s}
.m-step-section.done .m-step-title{color:#10b981}
.m-step-section.open .m-step-title{color:#93c5fd}
.m-step-badge{font-size:10px;font-weight:600;color:#64748b;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-step-section.done .m-step-badge{color:#34d399}
.m-step-body{display:none;padding:8px 2px 2px}
.m-thinking{margin:14px 16px 0;background:var(--surf);border:1px solid rgba(139,92,246,.3);border-radius:14px;padding:14px;display:none}
.m-thinking.show{display:block;animation:mslideIn .3s ease}
.m-think-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.m-think-dot{width:8px;height:8px;border-radius:50%;background:var(--purple);animation:mblink 1.2s infinite}
.m-think-dot:nth-child(2){animation-delay:.2s}.m-think-dot:nth-child(3){animation-delay:.4s}
@keyframes mblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
.m-think-lbl{font-size:12px;color:#a78bfa;font-weight:600}
.m-think-steps{display:flex;flex-direction:column;gap:6px}
.m-think-step{font-size:11px;color:var(--t2);display:flex;align-items:center;gap:6px}
.m-think-step.done{color:var(--green)}.m-think-step.active{color:var(--acc2)}
.m-result{margin:12px 16px 0;display:none}
.m-result.show{display:block;animation:mslideIn .4s ease}
.m-hosp-card{background:var(--surf);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:10px}
.m-hosp-hdr{padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bd)}
.m-rank-num{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.rk1{background:rgba(251,191,36,.2);color:#fbbf24}.rk2{background:rgba(148,163,184,.15);color:#94a3b8}.rk3{background:rgba(180,120,80,.15);color:#d4905c}
.m-hosp-nm{font-size:14px;font-weight:700;flex:1}
.m-hosp-bdg{font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px}
.bdg-ok{background:rgba(16,185,129,.15);color:#34d399}.bdg-warn{background:rgba(245,158,11,.15);color:#fbbf24}.bdg-err{background:rgba(239,68,68,.15);color:#f87171}
.m-hosp-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.m-hosp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-metric{text-align:center}
.m-metric-val{font-size:16px;font-weight:700;font-family:'JetBrains Mono',monospace}
.mv-g{color:var(--green)}.mv-a{color:var(--amber)}.mv-r{color:var(--red)}.mv-b{color:var(--acc2)}
.m-metric-lbl{font-size:9px;color:var(--t3);margin-top:2px}
.m-hosp-route{display:flex;align-items:center;gap:8px;background:var(--bg3);border-radius:10px;padding:8px 12px}
.m-route-ico{font-size:14px}.m-route-txt{font-size:11px;color:var(--t2);flex:1}
.m-route-time{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--acc2)}
.m-ai-reason{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.m-ai-reason-ttl{font-size:11px;font-weight:700;color:#a78bfa;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.m-ai-reason-body{font-size:12px;color:var(--t2);line-height:1.6}
.m-chart-card{margin:10px 10px 0;background:var(--surf);border:1px solid var(--bd);border-radius:14px;padding:10px 12px}
.m-chart-ttl{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.m-chart-period{font-size:10px;font-weight:400;color:var(--t3)}
.m-bar-chart{display:flex;align-items:flex-end;gap:6px;min-height:80px}
.m-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.m-bar{width:100%;border-radius:6px 6px 0 0;min-height:4px}
.m-bar-lbl{font-size:9px;color:var(--t3)}
.m-hosp-perf{display:flex;flex-direction:column;gap:6px}
.m-perf-item{display:flex;align-items:center;gap:10px}
.m-perf-nm{font-size:11px;color:var(--t2);width:78px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-perf-bar{flex:1;height:6px;background:var(--bg3);border-radius:99px;overflow:hidden}
.m-perf-fill{height:100%;border-radius:99px}
.m-perf-val{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--t2);min-width:30px;text-align:right}
.m-heatmap{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}
.m-heat-cell{aspect-ratio:1;border-radius:2px}


/* ── 카카오톡 스타일 채팅 ───────────────────────────────────── */
.m-chat-msg{display:flex;gap:8px;align-items:flex-start;width:100%}
.m-chat-msg.user{flex-direction:row-reverse}
.m-chat-av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;text-align:center}
.m-chat-av.ai{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;border-radius:50%}
.m-chat-av.user{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-radius:10px}
.m-chat-av.doctor{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:50%}
.m-chat-av.faq{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border-radius:50%}
.m-chat-bbl{max-width:80%;padding:10px 14px;font-size:13.5px;line-height:1.6;word-break:break-word}
.m-chat-msg.ai .m-chat-bbl,.m-chat-msg.faq .m-chat-bbl,.m-chat-msg.doctor .m-chat-bbl{background:var(--surf);border:1px solid var(--bd);border-radius:2px 18px 18px 18px;color:var(--t1)}
.m-chat-msg.user .m-chat-bbl{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-radius:18px 2px 18px 18px;font-weight:500}
.m-chat-typing-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--t3);animation:mdblink 1.2s infinite;margin:0 1px}
.m-chat-typing-dot:nth-child(2){animation-delay:.2s}.m-chat-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes mdblink{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.m-chat-sugs{flex-shrink:0;display:flex;gap:6px;overflow-x:auto;padding:8px 14px 2px;scrollbar-width:none}
.m-chat-sugs::-webkit-scrollbar{display:none}
.m-chat-sug{flex-shrink:0;background:var(--surf);border:1px solid var(--bd);border-radius:99px;padding:7px 13px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.m-chat-sug:active{background:rgba(59,130,246,.15);border-color:var(--acc);color:var(--acc2)}


.m-chat-send:active{transform:scale(.93)}
.m-chat-send:disabled{opacity:.45;cursor:not-allowed}
.m-api-card{margin:16px 16px 0;background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:14px}
.m-api-ttl{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:10px}
.m-api-item{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.m-api-item:last-child{margin-bottom:0}
.m-api-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.m-api-nm{font-size:12px;flex:1}
.m-api-st{font-size:10px;font-weight:700}
.m-set-list{margin:14px 16px 0;display:flex;flex-direction:column;gap:4px}
.m-set-glbl{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;padding:8px 4px 4px}
.m-set-item{background:var(--surf);border:1px solid var(--bd);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer}
.m-set-ico{font-size:18px;width:28px;text-align:center}
.m-set-info{flex:1}
.m-set-nm{font-size:13px;font-weight:600}
.m-set-desc{font-size:11px;color:var(--t2);margin-top:2px}
.m-set-arr{color:var(--t3);font-size:18px}
.m-toggle{width:44px;height:26px;background:var(--bg3);border-radius:99px;position:relative;cursor:pointer;transition:background .2s;border:1px solid var(--bd)}
.m-toggle.on{background:var(--acc);border-color:var(--acc)}
.m-toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}
.m-toggle.on .m-toggle-knob{transform:translateX(18px)}

/* ── 관제 화면 레이아웃 ── */
#m-screen-dispatch{overflow-y:auto;box-sizing:border-box;min-height:0}

/* ── KTAS 이송 현황 ── */
.ktas-dispatch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 14px}
.ktas-dispatch-item{border-radius:10px;padding:8px 4px;text-align:center;border:1.5px solid transparent;transition:transform .3s,border-color .3s}
.ktas-dispatch-item.active{transform:scale(1.05)}
.ktas-dispatch-num{font-size:1.4rem;font-weight:900;font-family:'JetBrains Mono',monospace;line-height:1}
.ktas-dispatch-lbl{font-size:8px;margin-top:2px;opacity:.8}
.ktas-dispatch-cnt{font-size:10px;font-weight:700;margin-top:3px}

/* ── 이송 경로 카드 ── */
.dispatch-route-card{background:var(--surf);border-radius:12px;padding:12px 14px;border-left:3px solid}
.dispatch-route-card.ktas1{border-color:#ef4444}
.dispatch-route-card.ktas2{border-color:#f97316}
.dispatch-route-card.ktas3{border-color:#f59e0b}
.dispatch-route-card.ktas4{border-color:#3b82f6}
.dispatch-route-card.ktas5{border-color:#10b981}

/* ── 온보딩 오버레이 ── */
#mob-onboarding{
  position:fixed;inset:0;z-index:99998;
  background:rgba(10,14,26,.96);
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.onboard-header{
  background:linear-gradient(135deg,#0f2444,#1e3a5f);
  padding:40px 24px 28px;text-align:center;
}
.onboard-logo-big{font-size:48px;margin-bottom:12px}
.onboard-title{font-size:22px;font-weight:900;color:#e2e8f0;margin-bottom:6px}
.onboard-sub{font-size:12px;color:#94a3b8;line-height:1.6}
.onboard-features{padding:20px 16px 0;display:flex;flex-direction:column;gap:10px}
.onboard-feat{
  background:#1e2d47;border-radius:14px;padding:16px;
  display:flex;align-items:center;gap:14px;
  border:1px solid rgba(99,130,191,.2);
  cursor:pointer;transition:background-color .15s,transform .15s;
}
.onboard-feat:active{transform:scale(.98);background:#243350}
.onboard-feat-ico{font-size:28px;width:44px;text-align:center;flex-shrink:0}
.onboard-feat-ttl{font-size:14px;font-weight:700;color:#e2e8f0;margin-bottom:3px}
.onboard-feat-desc{font-size:11px;color:#94a3b8;line-height:1.4}
.onboard-feat-arrow{font-size:18px;color:#3b82f6;margin-left:auto;flex-shrink:0}
.onboard-start-btn{
  margin:20px 16px 40px;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#fff;border:none;border-radius:14px;
  padding:16px;font-size:16px;font-weight:700;font-family:inherit;
  cursor:pointer;width:calc(100% - 32px);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.onboard-skip{text-align:center;color:#64748b;font-size:11px;
              padding-bottom:20px;cursor:pointer;text-decoration:underline}

.mob-section{padding:0 14px;box-sizing:border-box}
/* ═══════════════════════════════════════════════
   챗봇 3탭 모드
═══════════════════════════════════════════════ */
.chat-mode-btn{
  flex:1;padding:7px 4px;font-size:11px;font-weight:600;
  border:1px solid rgba(99,130,191,.25);border-radius:8px;
  background:transparent;color:#64748b;cursor:pointer;
  transition:all .2s;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis
}
.chat-mode-btn.active{
  background:var(--acc);color:#fff;
  border-color:var(--acc);
}

/* FAQ 목록 */
.faq-cat-title{
  font-size:10px;font-weight:700;color:#7c3aed;
  text-transform:uppercase;letter-spacing:.5px;
  margin:14px 0 6px;
}
.faq-item{
  display:flex;align-items:flex-start;gap:8px;
  background:var(--surf);border:1px solid var(--bd);
  border-radius:10px;padding:10px 12px;
  margin-bottom:6px;cursor:pointer;
  transition:background .15s, border-color .15s;
}
.faq-item:active{ background:rgba(99,130,191,.15) }
.faq-item-q{
  font-size:12px;font-weight:600;color:var(--t1);
  line-height:1.4;flex:1;
}
.faq-item-arrow{ font-size:12px;color:#64748b;flex-shrink:0;padding-top:1px }

/* 당직의 답변 버블 */
.m-chat-msg.doctor .m-chat-bbl{
  border:1.5px solid rgba(16,185,129,.4);
  background:rgba(16,185,129,.08);
}
.doctor-badge{
  display:inline-block;font-size:10px;font-weight:700;
  color:#10b981;background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.3);
  border-radius:99px;padding:1px 8px;margin-bottom:6px;
}
/* FAQ 버블 */
.m-chat-msg.faq .m-chat-bbl{
  border:1.5px solid rgba(124,58,237,.3);
  background:rgba(124,58,237,.06);
}
/* 당직의 연결 패널 */
.doctor-panel-inner{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:rgba(16,185,129,.06);
  border-bottom:1px solid rgba(16,185,129,.2);
}
@keyframes pulse-dot{
  0%,100%{opacity:1} 50%{opacity:.3}
}
.doctor-dot-online{ animation:pulse-dot 2s infinite; background:#10b981 !important }

/* ── 이송 경로 애니메이션 마커 ── */
@keyframes anim-pulse-ring {
  0%   { transform:scale(1);   opacity:1 }
  50%  { transform:scale(1.6); opacity:.4 }
  100% { transform:scale(1);   opacity:1 }
}
.anim-pulse path {
  animation: anim-pulse-ring 1.2s ease-in-out infinite !important;
}

/* ── 표류 신고 송출 중 펄스 (Ⅶ-2) — transform+opacity 로 GPU 합성 레이어 처리 ── */
@keyframes mDriftPulse {
  0%   { transform: scale(1);    opacity: .8; }
  60%  { transform: scale(1.18); opacity: 0;  }
  100% { transform: scale(1);    opacity: 0;  }
}

/* ── 핫라인 탭 표류 배지 펄스 (Ⅶ-2) — box-shadow 제거, transform만 사용 ── */
@keyframes mDriftBadgePulse {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.15); opacity: .7; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ── 하단 네비 SVG 스트로크 색상 ── */
.m-nav-btn svg { stroke: var(--t2, #94a3b8); transition: stroke .2s }
.m-nav-btn.on svg { stroke: var(--acc, #3b82f6) }

/* ── 헤더 버튼 SVG ── */
.m-icon-btn svg { stroke: var(--t1, #e2e8f0) }

/* ── 브랜드: I-MAP 로고 배지 ── */
.m-logo-badge {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
}



/* ── 온보딩 플로팅 버튼 ── */
#btn-guide-float:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* 온보딩 화면 활성 시 플로팅 버튼 숨김 */
#mob-onboarding[style*="flex"] ~ #btn-guide-float,
#mob-onboarding:not([style*="none"]) ~ * #btn-guide-float {
  display: none !important;
}
/* 온보딩 feat 클릭 영역 */
.onboard-feat {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(99,130,191,.2);
}
.onboard-feat:active {
  background: rgba(59,130,246,.15) !important;
  transform: scale(0.98);
}

/* ── 상담탭 개선 ── */
.chat-mode-btn {
  flex:1; padding:7px 4px; font-size:11px; font-weight:600;
  border:1px solid rgba(99,130,191,.25); border-radius:8px;
  background:transparent; color:#64748b; cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:flex; align-items:center;
  justify-content:center; gap:4px; min-width:0;
}
.chat-mode-btn.active {
  background:var(--acc); color:#fff; border-color:var(--acc);
}
/* 채팅 화면에서 플로팅 버튼 숨김 */






/* ════════════════════════════════════════════
   채팅 화면 레이아웃 (완전 재작성)
   구조: 화면 전체 → 헤더/탭/빠른질문 고정, 메시지 스크롤, 입력창 하단 고정
════════════════════════════════════════════ */
#m-screen-chat {
  display: none;
  position: absolute;
  top: var(--header-h, 58px);
  bottom: calc(var(--nav, 70px) + var(--safe, 0px));
  left: 0; right: 0;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
#m-screen-chat.active {
  display: flex !important;
}

/* 탭 컨테이너 */
.m-chat-tab-bar {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 10px 12px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
}
.chat-mode-btn {
  flex: 1;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(99,130,191,.25);
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.chat-mode-btn.active {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}

/* 빠른질문 / FAQ / 당직의 패널 */
.m-chat-sugs {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-chat-sugs::-webkit-scrollbar { display: none; }
.m-chat-sug {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid rgba(99,130,191,.3);
  border-radius: 20px;
  background: rgba(99,130,191,.08);
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.m-chat-sug:active { background: var(--acc); color: #fff; border-color: var(--acc); }

#chat-faq-panel {
  overflow: hidden;
}

/* FAQ 모드: .m-chat-wrap 완전 숨김, FAQ 패널 전체 높이 */
#m-screen-chat.faq-active .m-chat-wrap    { display: none !important; }
#m-screen-chat.faq-active .m-chat-inputbar{ display: none !important; }
#m-screen-chat.faq-active #chat-faq-panel {
  display: flex !important;
  flex: 1 !important;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
#chat-doctor-panel {
  flex-shrink: 0;
  flex-direction: column;
}

/* 메시지 영역 - 남은 공간 전부 차지 */
.m-chat-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.m-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.m-chat-msgs::-webkit-scrollbar { display: none; }

/* 입력창 - 항상 하단 고정 */
.m-chat-inputbar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px calc(10px + var(--safe, 0px));
  background: rgba(17,24,39,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(99,130,191,.15);
}
.m-chat-input {
  flex: 1;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  background: rgba(30,45,71,.8);
  color: var(--fg);
  outline: none;
  max-height: 80px;
  min-height: 40px;
  line-height: 1.4;
}
.m-chat-input:focus { border-color: var(--acc); }
.m-chat-send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--acc);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: opacity .15s;
}
.m-chat-send:active { opacity: 0.7; }

/* 채팅 탭에서 플로팅 버튼 숨김 */
#m-screen-chat.active ~ #btn-guide-float {
  display: none !important;
}

/* ── 이송 준비 패널 강조 ───────────────────────────────────── */
#dispatch-confirm-panel { transition: all .3s ease; }
#mob-dispatch-start-btn { transition: background .2s, opacity .2s; }
#mob-dispatch-arrive-btn:active { opacity: 0.8; }

/* ── 다중 구급차 지도 배지 (관제 탭 네비 배지) ──────────────── */
#dispatch-badge {
  display: none;
  position: absolute;
  top: 6px; right: calc(50% - 20px);
  background: #ef4444;
  color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  min-width: 16px;
  text-align: center;
  animation: pulse-badge 1.5s infinite;
}
@keyframes pulse-badge {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

.m-chat-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 구급차/병원 마커: Leaflet 기본 스타일 제거 ─────────────── */
.amb-marker-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.amb-tooltip {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 18px !important;
  padding: 0 !important;
}
.amb-emoji-tip {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.amb-emoji-tip::before {
  display: none !important;
}
/* 병원 십자 마커 */
.hosp-cross-tip {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #fff !important;
  padding: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.hosp-cross-tip::before {
  display: none !important;
}
.route-info-tip {
  background: rgba(15,23,42,.9) !important;
  color: #fff !important;
  border: 1.5px solid rgba(59,130,246,.5) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
.route-info-tip::before {
  display: none !important;
}
/* 구급차/경로 마커: Leaflet 기본 div-icon 스타일 완전 제거 */
/* margin은 제거하지 않음 — Leaflet이 iconAnchor를 margin-left/top으로 처리 */
.imap-amb-icon,
.leaflet-div-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* ── 구급차 이동 애니메이션 펄스 효과 ───────────────────────── */
@keyframes amb-pulse {
  0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 0 rgba(59,130,246,.6); }
  50%      { box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 8px rgba(59,130,246,0); }
}

/* ── 병원 마커 (건물 + 병상수) ─────────────────────────────── */
.hosp-marker-wrap {
  position: relative;
  transform: translateX(-50%);
  cursor: default;
}
.hosp-marker-card {
  background: #0a1628;
  border: 1.5px solid #3b82f6;
  border-radius: 12px;
  padding: 7px 12px 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.65), 0 0 0 1px rgba(59,130,246,.2);
  white-space: nowrap;
  text-align: center;
  min-width: 80px;
  position: relative;
}
.hosp-marker-card svg {
  display: block;
  margin: 0 auto 4px;
}
.hosp-marker-name {
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1.2;
  margin-bottom: 3px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hosp-marker-beds {
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.hosp-marker-beds span {
  font-size: 8.5px;
  opacity: .8;
  font-weight: 600;
}
.hosp-marker-tail {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #3b82f6;
  margin: 0 auto;
}

/* ── I-NET 채팅 (카카오톡 스타일) ─────────────────────────── */
#chat-hotline-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#inet-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 10px 4px 8px;  /* 좌우 padding은 .inet-msg-row에서 처리 */
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #1a2333;    /* 카카오톡 채팅방 배경 (약간 진한 네이비) */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#inet-msgs::-webkit-scrollbar { display: none; }

/* 날짜 구분선 */
.inet-date-divider {
  text-align: center;
  margin: 14px 0 10px;
  position: relative;
}
.inet-date-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(99,130,191,.15);
}
.inet-date-divider span {
  position: relative;
  background: #111827;
  padding: 2px 14px;
  font-size: 11px;
  color: #64748b;
  border-radius: 99px;
  border: 1px solid rgba(99,130,191,.15);
}

/* 시스템 메시지 (입장/퇴장) — 단행 일반 알림 */
.inet-sys-msg {
  text-align: center;
  font-size: 11px;
  color: #64748b;
  background: rgba(99,130,191,.07);
  border-radius: 99px;
  padding: 4px 16px;
  margin: 4px auto;
  max-width: 82%;
  white-space: pre-line;
}
/* 다중 행 시스템 메시지 (수용 결정 등) — 강조 카드형 */
.inet-sys-msg.inet-sys-important {
  text-align: left;
  font-size: 12px;
  color: #166534;
  background: linear-gradient(135deg,rgba(22,163,74,.12),rgba(34,197,94,.08));
  border: 1.5px solid rgba(22,163,74,.4);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 6px;
  max-width: none;
  line-height: 1.55;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(22,163,74,.15);
  position: relative;
}
.inet-sys-msg.inet-sys-important::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #16a34a;
  border-radius: 12px 0 0 12px;
}

/* ── 카카오톡 스타일 채팅 말풍선 ─────────────────────────────── */

/* 메시지 행 */
.inet-msg-row {
  display: flex;
  align-items: flex-start;   /* 아바타·말풍선 상단 정렬 */
  gap: 8px;
  animation: mslideIn .18s ease;
  margin-bottom: 10px;
  padding: 0 10px;
}
.inet-msg-row.self {
  flex-direction: row-reverse;
  margin-bottom: 10px;
}

/* 아바타 (카카오톡: 둥근 사각형) */
.inet-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.inet-avatar-placeholder {
  width: 40px;
  flex-shrink: 0;
}

/* 메시지 본문 컨테이너 */
.inet-msg-body {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

/* 닉네임 — 상대방만 표시 (카카오톡 스타일) */
.inet-nick {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 2px;
  white-space: nowrap;
}
/* 자신의 메시지: 이름 숨김 (카카오톡 자기 이름 미표시) */
.inet-nick.self-nick {
  display: none;
}
.inet-role-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}

/* ── 말풍선 공통 ── */
.inet-bubble {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  max-width: 100%;
  min-width: 60px;
  position: relative;
}

/* 상대방 말풍선 — 카카오톡 흰색 */
.inet-bubble.other-bubble {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 0 18px 18px 18px;  /* 좌상단 뾰족 */
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* 내 말풍선 — 카카오톡 노란색 */
.inet-bubble.self-bubble {
  background: #FEE500;
  color: #1a1a1a;
  border-radius: 18px 0 18px 18px;  /* 우상단 뾰족 */
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  font-weight: 500;
}

/* ── 시간 (말풍선 아래·옆 카카오톡 스타일) ── */
/* 시간을 말풍선 바로 아래, 좌/우 정렬 */
.inet-time {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 1px;
}
/* 상대방 시간: 말풍선 오른쪽 하단 */
.inet-msg-row.other .inet-time {
  color: rgba(255,255,255,.45);
}
/* 내 시간: 말풍선 왼쪽 하단 */
.inet-msg-row.self .inet-time {
  color: rgba(255,255,255,.45);
  order: -1; /* 시간이 말풍선 왼쪽에 오도록 */
}

/* 핫라인 입력창 (채팅 모드일 때) */
#m-screen-chat.hotline-mode .m-chat-inputbar {
  border-top-color: rgba(16,185,129,.25);
}
#m-screen-chat.hotline-mode .m-chat-send {
  background: #10b981;
}

/* ═══════════════════════════════════════════════════════════════
   프리미엄 모션 이펙트 — 전체 모바일 메뉴
═══════════════════════════════════════════════════════════════ */

/* ── 1. 탭 전환 시 카드 순차 등장 (Staggered Reveal) ──────── */
@keyframes m-card-reveal {
  0%   { opacity: 0; transform: translateY(18px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.m-screen.active .m-card,
.m-screen.active .m-kpi,
.m-screen.active .m-chart-card,
.m-screen.active .m-region-item,
.m-screen.active .m-ai-hero,
.m-screen.active .m-thinking,
.m-screen.active .m-alert,
.m-screen.active .m-api-card,
.m-screen.active .m-bed-item,
.m-screen.active .m-hosp-card,
.m-screen.active .mob-section > div {
  animation: m-card-reveal .45s cubic-bezier(.22,1,.36,1) both;
}
.m-screen.active > :nth-child(1) { animation-delay: 0s; }
.m-screen.active > :nth-child(2) { animation-delay: .06s; }
.m-screen.active > :nth-child(3) { animation-delay: .12s; }
.m-screen.active > :nth-child(4) { animation-delay: .18s; }
.m-screen.active > :nth-child(5) { animation-delay: .24s; }
.m-screen.active > :nth-child(6) { animation-delay: .30s; }
.m-screen.active > :nth-child(7) { animation-delay: .36s; }
.m-screen.active > :nth-child(8) { animation-delay: .42s; }
.m-screen.active > :nth-child(9) { animation-delay: .48s; }
.m-screen.active > :nth-child(10) { animation-delay: .54s; }

/* ── 2. KPI 카드 숫자 — 미세한 숨쉬기 효과 ───────────────── */
@keyframes kpi-breathe {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%     { transform: scale(1.04); opacity: .82; }
}
.m-kpi-val {
  display: inline-block;
  animation: kpi-breathe 4s ease-in-out infinite;
}
.m-kpi.kv-r .m-kpi-val { animation-delay: 0s; }
.m-kpi.kv-a .m-kpi-val { animation-delay: 1s; }
.m-kpi.kv-g .m-kpi-val { animation-delay: 2s; }
.m-kpi.kv-p .m-kpi-val { animation-delay: 3s; }

/* ── 3. 섹션 헤더 그라디언트 텍스트 ──────────────────────── */
.m-sec-ttl,
.m-chart-ttl {
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #60a5fa);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: m-gradient-shift 4s ease-in-out infinite;
}
@keyframes m-gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ── 4. AI 히어로 배경 그라디언트 애니메이션 ──────────────── */
.m-ai-hero {
  background: linear-gradient(145deg, #1e3a5f, #0f2444, #1a1f4e, #0f2444);
  background-size: 300% 300%;
  animation: m-hero-bg 8s ease-in-out infinite;
}
@keyframes m-hero-bg {
  0%,100% { background-position: 0% 50%; }
  25%     { background-position: 100% 0%; }
  50%     { background-position: 100% 100%; }
  75%     { background-position: 0% 100%; }
}

/* AI 히어로 라벨 — 타이핑 글로우 */
.m-ai-label {
  animation: m-gradient-shift 3s linear infinite;
  background: linear-gradient(90deg, #60a5fa, #818cf8, #a78bfa, #60a5fa);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 5. 하단 네비 — 활성 탭 글로우 인디케이터 ────────────── */
.m-nav-btn.on::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 99px;
  background: var(--acc);
  box-shadow: 0 0 10px rgba(59,130,246,.7), 0 0 20px rgba(59,130,246,.3);
  animation: m-nav-glow 2s ease-in-out infinite;
}
@keyframes m-nav-glow {
  0%,100% { box-shadow: 0 0 8px rgba(59,130,246,.5), 0 0 16px rgba(59,130,246,.2); width: 20px; }
  50%     { box-shadow: 0 0 14px rgba(59,130,246,.8), 0 0 28px rgba(59,130,246,.4); width: 28px; }
}

/* ── 6. 카드 터치 시 빛 번짐 (ripple glow) ───────────────── */
.m-card,
.m-kpi,
.m-chart-card,
.m-region-item,
.m-hosp-card {
  transition: transform .2s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.m-card:active,
.m-kpi:active,
.m-chart-card:active,
.m-region-item:active,
.m-hosp-card:active {
  transform: scale(.98);
  box-shadow: 0 0 20px rgba(59,130,246,.15), inset 0 0 30px rgba(59,130,246,.05);
}

/* ── 7. 프로그레스 바 성장 애니메이션 ────────────────────── */
@keyframes m-bar-grow {
  from { width: 0; }
}
.m-rbar,
.m-bed-bar-fill,
.m-perf-fill {
  animation: m-bar-grow .8s cubic-bezier(.22,1,.36,1) both;
}

/* ── 8. 병원 카드 랭크 배지 — 빛나는 효과 ───────────────── */
@keyframes m-rank-shine {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.3); }
  50%     { box-shadow: 0 0 12px 4px rgba(251,191,36,.2); }
}
.rk1 {
  animation: m-rank-shine 2s ease-in-out infinite;
}

/* ── 9. 라이브 상태 점 — 향상된 펄스 (ECG 스타일) ────────── */
@keyframes m-ecg-dot {
  0%    { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
  25%   { opacity: 1; transform: scale(1.4); box-shadow: 0 0 8px 3px rgba(16,185,129,.3); }
  50%   { opacity: .3; transform: scale(.8); box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  100%  { opacity: 1; transform: scale(1); }
}
.m-live-dot {
  animation: m-ecg-dot 2s ease-in-out infinite;
}

/* ── 10. 히트맵 셀 — 순차 나타남 ────────────────────────── */
@keyframes m-heat-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
.m-heat-cell {
  animation: m-heat-pop .3s cubic-bezier(.22,1,.36,1) both;
}
.m-heatmap .m-heat-cell:nth-child(1) { animation-delay: .02s; }
.m-heatmap .m-heat-cell:nth-child(2) { animation-delay: .04s; }
.m-heatmap .m-heat-cell:nth-child(3) { animation-delay: .06s; }
.m-heatmap .m-heat-cell:nth-child(4) { animation-delay: .08s; }
.m-heatmap .m-heat-cell:nth-child(5) { animation-delay: .10s; }
.m-heatmap .m-heat-cell:nth-child(6) { animation-delay: .12s; }
.m-heatmap .m-heat-cell:nth-child(7) { animation-delay: .14s; }
.m-heatmap .m-heat-cell:nth-child(8) { animation-delay: .16s; }
.m-heatmap .m-heat-cell:nth-child(9) { animation-delay: .18s; }
.m-heatmap .m-heat-cell:nth-child(10) { animation-delay: .20s; }
.m-heatmap .m-heat-cell:nth-child(11) { animation-delay: .22s; }
.m-heatmap .m-heat-cell:nth-child(12) { animation-delay: .24s; }
.m-heatmap .m-heat-cell:nth-child(13) { animation-delay: .26s; }
.m-heatmap .m-heat-cell:nth-child(14) { animation-delay: .28s; }
.m-heatmap .m-heat-cell:nth-child(15) { animation-delay: .30s; }
.m-heatmap .m-heat-cell:nth-child(16) { animation-delay: .32s; }
.m-heatmap .m-heat-cell:nth-child(17) { animation-delay: .34s; }
.m-heatmap .m-heat-cell:nth-child(18) { animation-delay: .36s; }
.m-heatmap .m-heat-cell:nth-child(19) { animation-delay: .38s; }
.m-heatmap .m-heat-cell:nth-child(20) { animation-delay: .40s; }
.m-heatmap .m-heat-cell:nth-child(21) { animation-delay: .42s; }
.m-heatmap .m-heat-cell:nth-child(22) { animation-delay: .44s; }
.m-heatmap .m-heat-cell:nth-child(23) { animation-delay: .46s; }
.m-heatmap .m-heat-cell:nth-child(24) { animation-delay: .48s; }

/* ── 11. 알림 배너 — 글로우 보더 펄스 ───────────────────── */
@keyframes m-alert-border {
  0%,100% { border-color: rgba(239,68,68,.3); box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50%     { border-color: rgba(239,68,68,.6); box-shadow: 0 0 20px rgba(239,68,68,.15); }
}
.m-alert {
  animation: m-alert-border 3s ease-in-out infinite, mslideIn .4s ease;
}

/* ── 12. 채팅 메시지 — 부드러운 등장 ────────────────────── */
@keyframes m-msg-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.m-chat-msg {
  animation: m-msg-in .3s cubic-bezier(.22,1,.36,1) both;
}

/* ── 13. AI 버튼 — 빛나는 보더 ──────────────────────────── */
@keyframes m-btn-shine {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
  50%  { box-shadow: 0 0 20px 4px rgba(59,130,246,.2); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
}
.m-ai-btn:not(.busy) {
  animation: m-btn-shine 3s ease-in-out infinite;
}

/* ── 14. KTAS 이송 현황 — 활성 카드 펄스 ─────────────────── */
@keyframes ktas-active-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.3); }
  50%     { box-shadow: 0 0 12px 4px rgba(59,130,246,.15); }
}
.ktas-dispatch-item.active {
  animation: ktas-active-pulse 2s ease-in-out infinite;
}

/* ── 15. 채팅 빠른질문 칩 — 마이크로 바운스 ──────────────── */
@keyframes m-chip-bounce {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
.m-chat-sug {
  animation: m-chip-bounce .35s cubic-bezier(.22,1,.36,1) both;
}
.m-chat-sugs .m-chat-sug:nth-child(1) { animation-delay: .05s; }
.m-chat-sugs .m-chat-sug:nth-child(2) { animation-delay: .10s; }
.m-chat-sugs .m-chat-sug:nth-child(3) { animation-delay: .15s; }
.m-chat-sugs .m-chat-sug:nth-child(4) { animation-delay: .20s; }
.m-chat-sugs .m-chat-sug:nth-child(5) { animation-delay: .25s; }

/* ── 16. 시간 텍스트 — 미세한 깜빡임 (시계 느낌) ─────────── */
@keyframes m-time-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: .6; }
}
.m-time-txt {
  animation: m-time-blink 2s steps(1) infinite;
}

/* ── 17. 이송 경로 카드 — 좌측 보더 글로우 ───────────────── */
.dispatch-route-card {
  transition: box-shadow .3s;
}
.dispatch-route-card:active {
  box-shadow: -4px 0 16px rgba(59,130,246,.2), 0 4px 12px rgba(0,0,0,.3);
}

/* ── 18. 관제 배지 — 향상된 파동 효과 ───────────────────── */
@keyframes m-badge-wave {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  50%  { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(239,68,68,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
#dispatch-badge {
  animation: m-badge-wave 1.5s ease-in-out infinite;
}

/* ── 19. 로고 배지 — 미세한 빛 ──────────────────────────── */
@keyframes m-logo-shimmer {
  0%   { box-shadow: 0 0 6px rgba(59,130,246,.3); }
  50%  { box-shadow: 0 0 14px rgba(59,130,246,.5), 0 0 30px rgba(59,130,246,.1); }
  100% { box-shadow: 0 0 6px rgba(59,130,246,.3); }
}
.m-logo-badge {
  animation: m-logo-shimmer 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   이송 중 지도 상태 오버레이
═══════════════════════════════════════════════════════════ */
@keyframes amb-icon-pulse {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%     { transform: scale(1.35); opacity: .7; }
}
@keyframes amb-eta-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}
/* 타이프라이터 커서 — 지도 오버레이용 (파란 세로선) */
.amb-tw-cursor {
  display: inline-block;
  width: 1.5px;
  height: .9em;
  background: #60a5fa;
  margin-left: 1px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: tw-cursor .65s step-end infinite;
}

/* ═══════════════════════════════════════════════════════════
   Claude Code 스타일 타이프라이터 + 생각 중 인디케이터
═══════════════════════════════════════════════════════════ */

/* 타이프라이터 커서 */
@keyframes tw-cursor {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}
.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #60a5fa;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: tw-cursor .7s step-end infinite;
}

/* AI "생각 중" 인디케이터 — Claude Code 스타일 */
.m-thinking-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
}
/* Claude Code + 아이콘 스타일 */
.m-thinking-icon {
  font-size: 13px;
  font-weight: 300;
  color: #3b82f6;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  animation: td-icon-morph 3s ease-in-out infinite;
  line-height: 1;
}
@keyframes td-icon-morph {
  0%,100% { transform: scale(1);    color: #3b82f6; opacity: 1; }
  25%     { transform: scale(1.5);  color: #8b5cf6; opacity: .9; }
  50%     { transform: scale(0.85); color: #10b981; opacity: .7; }
  75%     { transform: scale(1.3);  color: #60a5fa; opacity: .85; }
}
.m-thinking-status {
  font-size: 12px;
  color: #94a3b8;
  font-family: 'JetBrains Mono', 'Noto Sans KR', monospace;
  letter-spacing: .2px;
  overflow: hidden;
  white-space: nowrap;
}
/* 텍스트 슬라이드 전환 */
@keyframes td-status-slide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.m-thinking-status.changing {
  animation: td-status-slide .3s cubic-bezier(.22,1,.36,1) both;
}
/* 기존 호환 */
@keyframes td-status-fade {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.m-thinking-dot-wrap { display: none; } /* 구형 dot 숨김 */

/* ── 병상 수치 변경 하이라이트 ───────────────────────────── */
@keyframes bed-changed {
  0%   { transform: scale(1.4); color: #fff; }
  40%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* 마지막 업데이트 타임스탬프 flash */
@keyframes bed-ts-flash {
  0%   { opacity: 0; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}
#m-bed-update-ts {
  font-size: 9px;
  color: #3b82f6;
  font-family: 'JetBrains Mono', monospace;
  margin-left: auto;
  padding: 2px 6px;
  background: rgba(59,130,246,.08);
  border-radius: 99px;
  border: 1px solid rgba(59,130,246,.2);
}

/* ── 20. 스크롤바 — 숨김 + 글로우 상단 그라디언트 ────────── */
.m-screen::before {
  content: '';
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: 0;
  z-index: 5;
  transition: opacity .3s;
  display: block;
  flex-shrink: 0;
}
.m-screen.scrolled::before {
  opacity: .6;
}

/* ════════════════════════════════════════════
   Pre-KTAS 분류 마법사
════════════════════════════════════════════ */
.ktas-step-label {
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:#94a3b8;margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.ktas-symptom-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;
}
.ktas-symptom-btn {
  background:var(--surf);border:1.5px solid var(--bd);border-radius:12px;
  padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.ktas-symptom-btn:active { transform:scale(.95); }
.ktas-symptom-btn.selected {
  border-color:#a855f7;background:rgba(168,85,247,.18);
}
.ktas-sym-ico { font-size:20px;line-height:1; }
.ktas-sym-lbl { font-size:10px;font-weight:600;color:#e2e8f0;line-height:1.2; }
.ktas-option-row { display:flex;flex-direction:column;gap:8px;margin-bottom:4px; }
.ktas-option-btn {
  background:var(--surf);border:1.5px solid var(--bd);border-radius:12px;
  padding:12px 14px;text-align:left;cursor:pointer;transition:all .15s;
  display:flex;align-items:flex-start;gap:10px;width:100%;
}
.ktas-option-btn:active { transform:scale(.98); }
.ktas-option-btn.sel-1 { border-color:#ef4444;background:rgba(239,68,68,.15); }
.ktas-option-btn.sel-2 { border-color:#f59e0b;background:rgba(245,158,11,.15); }
.ktas-option-btn.sel-3 { border-color:#10b981;background:rgba(16,185,129,.15); }
.ktas-opt-dot {
  width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px;
}
.ktas-opt-txt { font-size:13px;font-weight:600;color:#e2e8f0;line-height:1.3; }
.ktas-opt-sub { font-size:10px;color:#94a3b8;margin-top:2px; }
.ktas-pain-wrap { margin-bottom:4px; }
.ktas-pain-row {
  display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;
}
.ktas-pain-btn {
  flex:1;min-width:28px;max-width:40px;padding:6px 2px;border-radius:8px;
  border:1.5px solid var(--bd);background:var(--surf);
  font-size:12px;font-weight:700;color:#94a3b8;cursor:pointer;
  text-align:center;transition:all .15s;
}
.ktas-pain-btn.on {
  border-color:#3b82f6;background:rgba(59,130,246,.25);color:#60a5fa;
}
.ktas-result-card {
  border-radius:16px;padding:20px;text-align:center;
  margin-bottom:16px;border:2px solid transparent;
}
.ktas-result-card.k1 { background:rgba(239,68,68,.15);border-color:#ef4444; }
.ktas-result-card.k2 { background:rgba(249,115,22,.15);border-color:#f97316; }
.ktas-result-card.k3 { background:rgba(245,158,11,.15);border-color:#f59e0b; }
.ktas-result-card.k4 { background:rgba(34,197,94,.15);border-color:#22c55e; }
.ktas-result-card.k5 { background:rgba(100,116,139,.15);border-color:#64748b; }
.ktas-level-badge {
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;font-size:22px;font-weight:900;
  margin:0 auto 10px;font-family:'JetBrains Mono',monospace;
}
.k1 .ktas-level-badge { background:rgba(239,68,68,.25);color:#ef4444; }
.k2 .ktas-level-badge { background:rgba(249,115,22,.25);color:#f97316; }
.k3 .ktas-level-badge { background:rgba(245,158,11,.25);color:#f59e0b; }
.k4 .ktas-level-badge { background:rgba(34,197,94,.25);color:#22c55e; }
.k5 .ktas-level-badge { background:rgba(100,116,139,.25);color:#94a3b8; }
.ktas-result-name { font-size:16px;font-weight:800;margin-bottom:6px; }
.ktas-result-desc { font-size:12px;color:#94a3b8;line-height:1.5;margin-bottom:14px; }
.ktas-result-time {
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(15,20,40,.4);border-radius:8px;padding:5px 10px;
  font-size:11px;font-weight:600;margin-bottom:16px;
}
.ktas-nav-row {
  display:flex;gap:10px;margin-top:14px;
}
.ktas-btn-back {
  flex:0 0 auto;padding:11px 16px;border-radius:12px;
  background:var(--surf);border:1.5px solid var(--bd);color:#94a3b8;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;
}
.ktas-btn-next {
  flex:1;padding:12px;border-radius:12px;
  background:var(--acc);border:none;color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;
}
.ktas-btn-next:active { transform:scale(.97); }
.ktas-btn-next.disabled { opacity:.35;cursor:not-allowed; }
.ktas-critical-list { display:flex;flex-direction:column;gap:8px;margin-bottom:4px; }
.ktas-critical-btn {
  background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.35);border-radius:12px;
  padding:13px 14px;text-align:left;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:10px;width:100%;color:#fca5a5;font-size:13px;font-weight:600;
}
.ktas-critical-btn:active { transform:scale(.97);background:rgba(239,68,68,.18); }
.ktas-none-btn {
  background:rgba(34,197,94,.08);border:1.5px solid rgba(34,197,94,.35);border-radius:12px;
  padding:13px 14px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:10px;width:100%;color:#86efac;font-size:13px;font-weight:700;
}
.ktas-none-btn:active { transform:scale(.97); }
.ktas-vital-group { margin-bottom:14px; }
.ktas-vital-label {
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#64748b;margin-bottom:7px;
}
.ktas-vital-btns { display:flex;gap:6px; }
.ktas-vital-btn {
  flex:1;padding:9px 4px;border-radius:10px;text-align:center;cursor:pointer;
  border:1.5px solid var(--bd);background:var(--surf);
  font-size:11px;font-weight:600;color:#94a3b8;transition:all .15s;line-height:1.3;
}
.ktas-vital-btn:active { transform:scale(.95); }
.ktas-vital-btn.selected { color:#fff; }
.ktas-btn-er {
  width:100%;padding:13px;border-radius:12px;
  background:linear-gradient(135deg,#1e3a5f,#1d4ed8);
  border:none;color:#fff;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.ktas-btn-er:active { transform:scale(.97); }
.ktas-btn-reset {
  width:100%;padding:11px;border-radius:12px;margin-top:10px;
  background:var(--surf);border:1.5px solid var(--bd);color:#94a3b8;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;
}
.ktas-progress-bar {
  height:3px;border-radius:99px;background:var(--bg3);margin-bottom:14px;overflow:hidden;
}
.ktas-progress-fill {
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,#7c3aed,#a855f7);
  transition:width .4s ease;
}

/* ── 이송지침 모달 ── */
#ktas-guide-modal { touch-action:none; }
#ktas-guide-modal > div { animation:slideUpSheet .28s ease; }
@keyframes slideUpSheet {
  from { transform:translateY(40px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
#ktas-guide-body::-webkit-scrollbar { display:none; }
#ktas-guide-body ul { list-style:none; padding-left:0; }
#ktas-guide-body li::before {
  content:"▸ "; color:#64748b; font-size:10px;
}
#ktas-guide-body li {
  padding-left:12px; text-indent:-12px;
}

/* ── 하단 중앙 음성 FAB — 은은한 pulse glow ───────────────── */
#m-voice-fab::before {
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.35) 0%, rgba(59,130,246,0) 70%);
  z-index:-1;
  animation: m-voice-fab-pulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes m-voice-fab-pulse {
  0%,100% { transform:scale(1);   opacity:.55; }
  50%     { transform:scale(1.18); opacity:.95; }
}
#m-voice-fab:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.04) !important;
  box-shadow: 0 12px 32px rgba(59,130,246,.55), 0 0 0 8px rgba(59,130,246,.14) !important;
}
#m-voice-fab:active {
  transform: translateX(-50%) scale(.96) !important;
  box-shadow: 0 4px 14px rgba(59,130,246,.42) !important;
}
/* 녹음 중 상태 */
#m-voice-fab.recording {
  background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important;
  box-shadow: 0 8px 28px rgba(239,68,68,.55),0 0 0 6px rgba(239,68,68,.14) !important;
}
#m-voice-fab.recording::before {
  background:radial-gradient(circle, rgba(239,68,68,.45) 0%, rgba(239,68,68,0) 70%);
  animation-duration: 1.1s;
}
/* Shiny 재렌더 플래시 방지: body 탭 클래스로 비활성 화면 강제 숨김 */
body.tab-home     .m-screen:not(#m-screen-home),
body.tab-ai       .m-screen:not(#m-screen-ai),
body.tab-ktas     .m-screen:not(#m-screen-ktas),
body.tab-transfer .m-screen:not(#m-screen-transfer),
body.tab-dispatch .m-screen:not(#m-screen-dispatch),
body.tab-stats    .m-screen:not(#m-screen-stats),
body.tab-chat     .m-screen:not(#m-screen-chat) {
  display: none !important;
  pointer-events: none !important;
}
/* 관제 스크린은 어떤 탭에서도 display:block 유지 — Leaflet 컨테이너 크기 보존 */
/* 동일 specificity(0,1,2,1), 후순위 선언이 이기므로 위 display:none!important 를 무효화 */
body.tab-home .m-screen#m-screen-dispatch,
body.tab-ai .m-screen#m-screen-dispatch,
body.tab-ktas .m-screen#m-screen-dispatch,
body.tab-transfer .m-screen#m-screen-dispatch,
body.tab-stats .m-screen#m-screen-dispatch,
body.tab-chat .m-screen#m-screen-dispatch,
body.tab-settings .m-screen#m-screen-dispatch{display:block!important}