/* 금병방역본부 — 디자인 시스템 (플랫 벡터 / 다크 컨트롤룸)
 * 색각 이상 대응: 감염도는 색(따뜻함↑) + 밝기 + 패턴 + 숫자 3중 표기.
 * 상태(건강/감염/사망/면역)는 CVD 구분 가능한 색 + 아이콘 점 + 항상 숫자.
 */
:root{
  --bg:#0e1726; --bg2:#152033; --panel:#1b2942; --panel2:#22314e;
  --line:#2c3d5c; --text:#e8eefb; --muted:#9fb0cd; --dim:#6c7d9c;
  --accent:#38bdf8; --accent2:#22d3ee;
  --ok:#28c9a6;        /* 건강 (teal) */
  --infect:#f6a609;    /* 감염 (amber) */
  --dead:#c04664;      /* 사망 (rose-charcoal) */
  --immune:#8b7bf0;    /* 면역 (violet) */
  --danger:#ef4444; --warn:#f59e0b; --good:#22c55e;
  --authority:#38bdf8;
  --radius:12px; --radius-sm:8px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --tap:44px;
  /* 감염 단계 색 (밝기 순차 + 따뜻함) */
  --inf0:#1f3b47; --inf1:#f4e08a; --inf2:#f7c14b; --inf3:#f2913a; --inf4:#e35d43; --inf5:#b52d55;
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden 속성은 항상 우선한다 (display:flex 등 author 규칙이 [hidden]을 덮어쓰는 것을 방지) */
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:"Pretendard",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--text); overflow:hidden;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
#app{position:fixed;inset:0}

/* ---------- 화면 전환 ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;animation:fade .25s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- 버튼 ---------- */
.btn{
  font:inherit;font-weight:600;color:var(--text);background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 18px;min-height:var(--tap);cursor:pointer;transition:.12s;
}
.btn:hover{background:var(--panel);border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04121e;border:none}
.btn-primary:hover{filter:brightness(1.08)}
.btn-lg{padding:14px 30px;font-size:1.1rem}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--panel2)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 세로 안내 오버레이 ---------- */
#rotate-notice{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:radial-gradient(1000px 700px at 50% 0,#1c3a63,var(--bg) 65%);padding:34px;text-align:center}
.rotate-inner{max-width:420px}
.rotate-icon{font-size:64px;margin-bottom:14px;animation:rock 2s ease-in-out infinite}
@keyframes rock{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.rotate-inner h2{font-size:1.6rem;margin-bottom:12px}
.rotate-inner p{color:var(--muted);line-height:1.7}
@media (max-width:900px) and (orientation:portrait){
  #rotate-notice{display:flex}
  #app{display:none}
}

/* ---------- 타이틀 ---------- */
#screen-title{align-items:center;justify-content:center;overflow:auto;
  background:radial-gradient(1200px 600px at 50% -10%,#1c3a63 0%,var(--bg) 60%)}
.title-wrap{text-align:center;max-width:560px;padding:24px;margin:auto}
.title-badge{font-size:80px;filter:drop-shadow(0 6px 18px rgba(56,189,248,.4))}
.title-main{font-size:clamp(2.6rem,7vw,4.4rem);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,#7dd3fc,#e0f2fe);-webkit-background-clip:text;background-clip:text;color:transparent;margin:.1em 0}
.title-sub{color:var(--muted);font-size:1.05rem;margin-bottom:1.6em}
.title-buttons{display:flex;flex-direction:column;gap:12px;max-width:300px;margin:0 auto}
.title-buttons .btn{width:100%}
.title-credit{margin-top:1.8em;color:var(--dim);font-size:.85rem}

/* ---------- 공통 헤더 ---------- */
.screen-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--bg2)}
.screen-head h2{font-size:1.4rem;font-weight:700}
.screen-head span{width:70px}

/* ---------- 카드(시나리오) ---------- */
.card-row{flex:1;display:flex;gap:20px;padding:30px;justify-content:center;align-items:stretch;flex-wrap:wrap;overflow:auto}
.scn-card{width:300px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;cursor:pointer;transition:.15s;display:flex;flex-direction:column}
.scn-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.scn-icon{font-size:56px;text-align:center;margin-bottom:8px}
.scn-card h3{font-size:1.5rem;margin-bottom:6px}
.scn-diff{display:inline-block;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:12px;width:fit-content}
.scn-diff.easy{background:#123a2e;color:#4ade80}
.scn-diff.medium{background:#3a3312;color:#fbbf24}
.scn-diff.hard{background:#3a1620;color:#fb7185}
.scn-card p{color:var(--muted);font-size:.95rem;line-height:1.5;margin-bottom:8px}
.scn-learn{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);color:var(--accent);font-size:.9rem}

/* ---------- 준비 화면 ---------- */
.setup-body{flex:1;overflow:auto;padding:24px 30px;max-width:900px;margin:0 auto;width:100%}
.setup-block{margin-bottom:26px}
.setup-block h3{font-size:1.15rem;margin-bottom:12px}
.setup-block h3 small{color:var(--muted);font-weight:400;font-size:.85rem}
.chip-row{display:flex;gap:12px;flex-wrap:wrap}
.chip{padding:12px 22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);cursor:pointer;min-height:var(--tap)}
.chip.selected{background:var(--accent);color:#04121e;border-color:var(--accent);font-weight:700}
.advisor-group{margin-bottom:16px}
.advisor-group .ag-label{color:var(--muted);font-size:.9rem;margin-bottom:6px}
.ag-options{display:flex;gap:10px;flex-wrap:wrap}
.adv-chip{padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);cursor:pointer;max-width:240px}
.adv-chip.selected{border-color:var(--immune);background:var(--panel2);box-shadow:inset 0 0 0 2px var(--immune)}
.adv-chip b{display:block;font-size:.95rem}
.adv-chip span{color:var(--muted);font-size:.82rem}

/* ================= 게임 화면 ================= */
#screen-game{background:var(--bg)}
#hud{display:flex;align-items:center;gap:16px;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:nowrap;z-index:20}
.hud-left,.hud-center,.hud-right{display:flex;align-items:center;gap:14px}
.hud-center{flex:1;justify-content:center}
.hud-item{display:flex;align-items:center;gap:6px}
.hud-label{color:var(--muted);font-size:.8rem}
.hud-val{font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.hud-item.authority{gap:8px}
.meter{width:120px;height:12px;background:#0c1524;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.meter.sm{width:70px;height:8px}
.meter-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--authority),#7dd3fc);transition:width .3s,background .3s}
.meter-fill.vac{background:linear-gradient(90deg,#34d399,#6ee7b7)}
.stat{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;font-size:.92rem}
.stat .dot{width:11px;height:11px;border-radius:50%;flex:none}
.stat .stat-label{color:var(--muted);font-size:.8rem}
.stat.healthy .dot{background:var(--ok)}
.stat.infected .dot{background:var(--infect);border-radius:2px}          /* 사각 = 감염 (모양 구분) */
.stat.dead .dot{background:var(--dead);clip-path:polygon(50% 0,100% 100%,0 100%)} /* 삼각 = 사망 */
.stat.dead .dot{border-radius:0;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--dead);background:none}
.stat.immune .dot{background:var(--immune);border-radius:50%;box-shadow:0 0 0 2px rgba(139,123,240,.35)}
.vaccine-mini{display:flex;flex-direction:column;gap:3px;font-size:.72rem;color:var(--muted)}
.vrow{display:flex;align-items:center;gap:6px}
.vrow span{width:24px}
.speed-controls{display:flex;gap:3px;background:#0c1524;padding:3px;border-radius:8px}
.btn-speed{min-width:38px;height:36px;border:none;background:transparent;color:var(--muted);border-radius:6px;cursor:pointer;font-size:.85rem}
.btn-speed.active{background:var(--accent);color:#04121e;font-weight:700}

#game-body{flex:1;display:flex;position:relative;overflow:hidden}
#map-wrap{flex:1;position:relative;background:radial-gradient(1400px 900px at 50% 40%,#12203a,#0b1220);overflow:hidden}
#world-map{width:100%;height:100%;display:block}

/* 지도 스타일 */
.gb-sea{fill:#0b1a2e}
.gb-country{stroke:#0b1220;stroke-width:.6}
.gb-country.bg{fill:#20304a;opacity:.55}
.gb-country.playable{fill:var(--inf0)}
.gb-country.playable[data-level="1"]{fill:var(--inf1)}
.gb-country.playable[data-level="2"]{fill:var(--inf2)}
.gb-country.playable[data-level="3"]{fill:var(--inf3)}
.gb-country.playable[data-level="4"]{fill:var(--inf4)}
.gb-country.playable[data-level="5"]{fill:var(--inf5)}
.gb-country.playable.undetected{fill:#3a4460;stroke-dasharray:2 2}
.gb-country.playable{cursor:pointer;transition:fill .4s}
.gb-country.playable:hover{stroke:var(--accent);stroke-width:1.4}
.gb-country.selected{stroke:var(--accent);stroke-width:2}
/* 고감염 국가 빗금 패턴(색각 대응) */
.gb-country[data-level="4"],.gb-country[data-level="5"]{stroke:#7a0f2e}
.gb-markers .gb-mk{opacity:.95}
.gb-mk.infect{fill:var(--danger);opacity:.5}
.gb-mk.infect.lvl4,.gb-mk.infect.lvl5{fill:#ff2d55}
.gb-mk.unknown{fill:#64748b;stroke:#94a3b8;stroke-dasharray:2 2}
.gb-mk.bubble{fill:#fbbf24;stroke:#fff;stroke-width:1.5;animation:pulse 1.3s infinite}
.gb-mk.field{fill:#22d3ee;stroke:#fff;stroke-width:2}
.gb-mk.origin{fill:none;stroke:#f43f5e;stroke-width:3;stroke-dasharray:4 3;animation:spin 8s linear infinite}
@keyframes pulse{0%,100%{r:9}50%{r:12}}
@keyframes spin{to{transform:rotate(360deg)}}
.gb-mk-label{fill:#dbeafe;font-size:16px;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:#0b1220;stroke-width:3px}
.gb-routes .gb-route{fill:none;stroke:#38bdf8;stroke-width:1.6;stroke-dasharray:5 7;opacity:.5;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}

/* 뉴스 티커 / 범례 */
#news-ticker{position:absolute;left:0;right:0;bottom:0;background:rgba(9,15,26,.85);border-top:1px solid var(--line);
  padding:8px 16px;font-size:.9rem;color:var(--accent2);white-space:nowrap;overflow:hidden}
#map-legend{position:absolute;top:12px;left:12px;background:rgba(9,15,26,.8);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.75rem;color:var(--muted);line-height:1.7}
#map-legend .lg{display:flex;align-items:center;gap:6px}
#map-legend .sw{width:14px;height:14px;border-radius:3px;flex:none}

/* 사이드 패널 */
.side-panel{width:330px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;z-index:10}
#country-panel{position:absolute;right:330px;top:0;bottom:0;width:300px;background:var(--panel2);border-left:1px solid var(--line);box-shadow:var(--shadow);padding:18px;overflow:auto;z-index:15}
.panel-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer}
#cp-name{margin-bottom:12px;font-size:1.3rem}
.cp-stat{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.cp-stat b{font-variant-numeric:tabular-nums}
.cp-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}

/* 컨트롤 패널 */
.control-tabs{display:flex;border-bottom:1px solid var(--line)}
.ctab{flex:1;padding:14px 0;background:var(--bg2);border:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;min-height:var(--tap)}
.ctab.active{background:var(--panel);color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}
#policy-list{flex:1;overflow-y:auto;padding:10px}
.pol-group-title{font-size:.8rem;color:var(--dim);text-transform:uppercase;margin:12px 6px 6px;letter-spacing:.04em}
.pol{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:8px;background:var(--panel2);cursor:pointer;transition:.12s}
.pol:hover{border-color:var(--accent)}
.pol.owned{opacity:.55;background:#16321f;border-color:#245c37;cursor:default}
.pol.locked{opacity:.45;cursor:not-allowed}
.pol.cant{opacity:.7}
.pol .pol-icon{width:34px;height:34px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.pol .pol-info{flex:1;min-width:0}
.pol .pol-name{font-weight:600;font-size:.95rem}
.pol .pol-desc{color:var(--muted);font-size:.78rem;line-height:1.3;margin-top:2px}
.pol .pol-cost{font-weight:800;color:var(--warn);font-variant-numeric:tabular-nums;white-space:nowrap}
.pol.owned .pol-cost{color:var(--good)}

/* ---------- 모달 ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(4,9,18,.72);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);max-width:520px;width:100%;padding:26px;box-shadow:var(--shadow);animation:pop .2s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-size:1.35rem;margin-bottom:10px}
.modal .modal-body{color:var(--muted);line-height:1.6;margin-bottom:18px}
.modal .modal-choices{display:flex;flex-direction:column;gap:10px}
.modal .event-badge{display:inline-block;background:var(--danger);color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px}

/* ---------- 종료 화면 ---------- */
#screen-end{align-items:center;justify-content:center;overflow:auto}
.end-wrap{max-width:680px;width:100%;padding:34px;text-align:center}
#end-title{font-size:2.6rem;font-weight:800}
#end-title.win{color:var(--good)} #end-title.lose{color:var(--danger)}
.end-reason{color:var(--muted);font-size:1.1rem;margin:10px 0 20px}
.end-score{display:flex;justify-content:center;gap:22px;margin-bottom:26px;flex-wrap:wrap}
.end-score .sc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 22px;min-width:110px}
.end-score .sc .lbl{color:var(--muted);font-size:.85rem}
.end-score .sc .num{font-size:1.8rem;font-weight:800}
.end-score .grade .num{font-size:2.6rem;color:var(--accent)}
.end-briefing{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:left;margin-bottom:24px}
.end-briefing h3{margin-bottom:6px}
.briefing-note{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.ineq-row{display:flex;align-items:center;gap:10px;margin-bottom:5px;font-size:.85rem}
.ineq-row .nm{width:120px;flex:none;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ineq-row .bar-wrap{flex:1;background:#0c1524;border-radius:4px;height:16px;overflow:hidden}
.ineq-row .bar{height:100%;border-radius:4px}
.ineq-row .bar.poor{background:var(--dead)} .ineq-row .bar.rich{background:var(--ok)}
.ineq-row .vl{width:52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.end-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- 튜토리얼 ---------- */
#tutorial-layer{position:fixed;inset:0;z-index:200}
.tut-backdrop{position:absolute;inset:0;background:rgba(4,9,18,.4)}
.tut-bubble{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);
  background:var(--accent);color:#04121e;border-radius:var(--radius);padding:18px 22px;max-width:440px;box-shadow:var(--shadow)}
.tut-bubble p{font-size:1.02rem;line-height:1.5;font-weight:500;margin-bottom:12px}
.tut-foot{display:flex;align-items:center;justify-content:space-between}
#tut-progress{font-size:.8rem;font-weight:700;opacity:.7}
.tut-bubble .btn-primary{background:#04121e;color:var(--accent)}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .side-panel{width:290px}
  #country-panel{right:290px;width:270px}
  .hud-center{display:none}
  .meter{width:90px}
}
@media (max-width:760px){
  #hud{flex-wrap:wrap;gap:8px}
  .side-panel{width:250px}
  #country-panel{right:0;width:100%}
}
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accent);
  padding:10px 20px;border-radius:20px;z-index:300;box-shadow:var(--shadow);animation:fade .2s;font-weight:600}