/* Link 전용 추가 스타일. style.css 의 변수(--pan, --bd, --a1…)를 그대로 씁니다.
   색·간격·글자 크기를 새로 정하지 않습니다 — 그러면 두 대시보드가 다른 회사 것처럼 보입니다. */

/* ---- 퍼널 ---- */
.fn{display:flex;flex-direction:column;gap:6px}
.fnr{display:grid;grid-template-columns:120px 1fr 92px 68px;align-items:center;gap:10px}
.fnb{height:22px;background:var(--pan2);border-radius:5px;overflow:hidden}
.fnb i{display:block;height:100%;border-radius:5px;
 background:linear-gradient(90deg,var(--a1),var(--a6))}
.fnl{font-size:var(--f2);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnv{font-size:var(--f2);text-align:right;font-variant-numeric:tabular-nums}
.fnk{font-size:var(--f2);text-align:right;color:var(--mu);font-variant-numeric:tabular-nums}
.fnk.ok{color:#69db7c} .fnk.bad{color:#ff8787}
.fnleg{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;color:var(--mu2);font-size:var(--f1)}
@media (max-width:720px){
 .fnr{grid-template-columns:84px 1fr 66px 54px;gap:7px}
 .fnl{font-size:var(--f1)}
}

/* ---- 히트맵 ---- */
.hm{overflow-x:auto}
.hmg{display:grid;grid-template-columns:26px repeat(24,minmax(13px,1fr));gap:2px;min-width:430px}
.hmc{font-size:var(--f1);color:var(--mu2);text-align:center;line-height:1.4}
.hmr{font-size:var(--f1);color:var(--mu);display:flex;align-items:center;justify-content:flex-end;
 padding-right:4px}
.hmv{height:17px;border-radius:3px;
 background:color-mix(in srgb, var(--a1) calc(var(--k) * 100%), var(--pan2))}
.hmleg{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--mu2);font-size:var(--f1)}
.hmleg i{flex:none;width:88px;height:9px;border-radius:5px;
 background:linear-gradient(90deg,var(--pan2),var(--a1))}

/* color-mix 를 못 쓰는 브라우저 대비 — 투명도로 같은 효과를 낸다 */
@supports not (background: color-mix(in srgb, red 50%, blue)){
 .hmv{background:var(--a1);opacity:calc(.12 + var(--k) * .88)}
}

/* ---- 아직 못 뽑은 항목 ---- */
.nodata{background:var(--pan2);border:1px dashed var(--bd2);border-radius:10px;
 padding:15px 16px;color:var(--tx2);font-size:var(--f3);line-height:1.7}
.nodata b{color:var(--a3)}
.nodata .mut{color:var(--mu2);font-size:var(--f2);margin-top:6px}
.nodata a{color:var(--a1)}

/* ---- 샘플 표시 ---- */
.smpchip{margin-left:8px;padding:2px 9px;border-radius:9px;font-size:var(--f1);font-weight:700;
 color:#fff;background:var(--a4);border:1px solid var(--a4);white-space:nowrap}
/* KPI 값 옆의 '샘플' 표시는 레이아웃을 밀지 않아야 한다 —
   inline 으로 넣었더니 큰 숫자가 줄바꿈되며 카드 높이가 들쭉날쭉해졌다. */
body.is-sample .kpi{position:relative}
body.is-sample .kpi:after{content:'샘플';position:absolute;top:6px;right:8px;
 font-size:9.5px;font-weight:700;color:var(--a4);letter-spacing:.02em;pointer-events:none}

/* ---- 충족도 막대 ---- */
.covbar{height:8px;border-radius:5px;background:var(--pan3);overflow:hidden;min-width:70px}
.covbar i{display:block;height:100%;background:var(--a2)}
.covbar.low i{background:var(--a3)}
.covbar.no i{background:var(--a4)}

/* ---- 표 안의 작은 막대 (국가·짝 순위) ---- */
.mini{display:inline-block;height:7px;border-radius:4px;background:var(--a1);opacity:.85;
 vertical-align:middle;min-width:2px}

/* ==========================================================================
   Link 정체성 — 색은 meditlink.com 이 실제로 쓰는 값에서 가져온다.

   meditlink.com 에서 뽑은 실사용 색 (DOM 전수 조사, 등장 횟수·배경 면적 기준)
     #2e70ea  주 버튼·링크에 가장 많이 쓰임 (67곳)  → 이 대시보드의 주색
     #0554f5  강조 (42곳)
     #1c92ee  히어로 그라데이션 시작 (넓은 배경)
     #303cb7  히어로 그라데이션 끝 (넓은 배경)
     #2A72D1  로고 파랑 (파비콘에서 실측)

   Apps 와의 구분은 색상 계열이 아니라 아래 세 가지로 잡는다 —
   Apps 도 파랑 선두라 색만으로는 갈라지지 않기 때문이다.
     · 파비콘·홈화면 아이콘이 meditlink 로고
     · 메뉴 아이콘이 얇은 선(Apps) 이 아니라 채워진 면(solid)
     · 지도 원이 꽉 찬 원(Apps) 이 아니라 테두리 고리(ring)
   같은 파랑이어도 명도·채도가 다르다: Apps 는 밝은 하늘색 #4dabf7(L0.72),
   여기는 진한 브랜드 블루 #2e70ea(L0.57).

   색 선정 근거 — dataviz 스킬의 검증기(scripts/validate_palette.js)를 실제로 돌렸다.
     다크(표면 #17181b) : 인접 CVD ΔE 16.0 · 정상시야 ΔE 26.2 · 전 슬롯 대비 ≥3:1 → 전부 PASS
     라이트(표면 #ffffff): 인접 CVD ΔE 21.1 · 정상시야 ΔE 35.0 · 전 슬롯 대비 ≥3:1 → 전부 PASS
     앞 3슬롯은 '전체 쌍' 기준도 통과(다크 CVD 13.1)하므로 지도처럼 인접이 정해지지 않는
     도형에 쓸 수 있다.
   참고: Apps 의 현재 팔레트는 같은 검증기에서 FAIL 이다
     (명도 상한 초과 7개 · #94d82d↔#ff922b 가 적록색약에서 ΔE 3.7 로 붙는다).
   ========================================================================== */
:root{
 /* --a2(좋음·상승) --a3(주의) --a4(나쁨·하락) 는 style.css 가 의미색으로 쓴다.
    그 세 자리는 뜻을 유지한 채 값만 이 팔레트의 같은 계열로 바꿨다. */
 --a1:#2e70ea;   /* 버튼·활성 메뉴 = meditlink.com 주 버튼색. 흰 글씨 4.54:1 로 본문
                    기준(4.5:1)을 통과한다. Apps 의 #4dabf7 은 2.48:1 이라 읽기에도 낫다. */
 --a2:#03b432;   /* 좋음·상승 */
 --a3:#c48800;   /* 주의 */
 --a4:#9d4b5d;   /* 나쁨·하락 */
 --a5:#7543dd;   /* 바이올렛 */
 --a6:#18a499;   /* 청록 */
 --a7:#e0a63a;   /* 밝은 앰버 — 어두운 글씨를 얹는 배지 배경이라 밝게 둔다 */
 --a8:#b51f9e;   /* 마젠타 */
 /* 차트 시리즈 — 1번이 meditlink 브랜드 블루 (주지표는 항상 이 색) */
 --s1:#2e70ea; --s2:#c48800; --s3:#b51f9e; --s4:#e76612;
 --s5:#18a499; --s6:#7543dd; --s7:#03b432; --s8:#9d4b5d;
 /* 브랜드 그라데이션 — meditlink.com 히어로와 같은 두 색 (퍼널·히트맵에 쓴다) */
 --grad-a:#1c92ee; --grad-b:#303cb7;
}
:root[data-theme="light"]{
 --a1:#2461c9;   /* 라이트 배경에서 흰 글씨 5.79:1 (브랜드 블루의 한 단계 진한 값) */
 --a2:#25ab3a; --a3:#c48800; --a4:#95043e;
 --a5:#5d1fbe; --a6:#18a499; --a7:#b7810f; --a8:#890076;
 --s1:#2461c9; --s2:#c48800; --s3:#890076; --s4:#18a499;
 --s5:#95043e; --s6:#25ab3a; --s7:#5d1fbe; --s8:#f26904;
 --grad-a:#1c92ee; --grad-b:#303cb7;
}

/* ---- 메뉴 아이콘: 선 → 면 ---- */
.nav a svg{fill:currentColor;stroke:none;stroke-width:0}
.nav a.on svg{fill:#fff}

/* ---- 퍼널 막대 = meditlink 히어로 그라데이션 ---- */
.fnb i{background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}

/* ---- 히트맵: 브랜드 블루 단색 램프 (연속 크기 = 한 색상, light→dark) ---- */
.hmv{background:color-mix(in srgb, var(--grad-a) calc(var(--k) * 100%), var(--pan2))}
@supports not (background: color-mix(in srgb, red 50%, blue)){
 .hmv{background:var(--grad-a);opacity:calc(.12 + var(--k) * .88)}
}
.hmleg i{background:linear-gradient(90deg,var(--pan2),var(--grad-a))}

/* ---- 표 안 미니 막대 ---- */
.mini{background:var(--s1)}

/* ==========================================================================
   세계지도 — 기능은 그대로, 결만 바꾼다.
   mapView() 는 common.js(Apps 공용) 것을 그대로 쓴다. 국가→주·지역→도시 드릴다운,
   휠 확대, 드래그 이동, 이름표 충돌 회피가 전부 살아 있다. 바꾸는 건 칠하는 방식이다.

   Apps : 회색 육지 + 반투명하게 꽉 찬 원(blob)
   Link : 어두운 육지 + 테두리 위주의 '고리(ring)' 원

   고리로 바꾼 이유가 취향만은 아니다 — 유럽처럼 원이 몰리는 곳에서 꽉 찬 원은 서로를
   가려 몇 개가 겹쳤는지 못 센다. 테두리를 세우면 겹쳐도 각 원의 경계가 남는다.
   stroke 는 vector-effect:non-scaling-stroke 로 화면 기준 고정폭이라
   확대해도 선이 굵어지지 않는다(common.js 가 inline 으로 넣는 zoom 배율을 덮어쓴다).

   단계별 색은 meditlink 브랜드 램프를 쓴다. 국가/주·지역/도시는 한 번에 하나만
   그려지므로(탭으로 전환) 서로 붙어 보일 일이 없어 같은 계열이어도 헷갈리지 않는다.
   ========================================================================== */
.worldmap .sea{fill:transparent}
.worldmap .land{fill:var(--pan2);stroke:var(--bd2);stroke-width:.34;stroke-opacity:.85}
.worldmap .adm1{stroke:var(--bd2);stroke-width:.34;stroke-opacity:.55}

.worldmap circle:not(.ring){
 fill-opacity:.16;
 stroke-opacity:.95;
 stroke-width:1.7px !important;
 vector-effect:non-scaling-stroke;
 transition:fill-opacity .15s, stroke-opacity .15s;
}
.worldmap circle:not(.ring):hover{fill-opacity:.45;stroke-opacity:1}
.worldmap .nb:not(.ring){fill:var(--s1);stroke:var(--s1)}          /* 국가 — 브랜드 블루 */
.worldmap .rb:not(.ring){fill:var(--grad-b);stroke:var(--grad-b)}  /* 주·지역 — 인디고 */
.worldmap .cb:not(.ring){fill:var(--grad-a);stroke:var(--grad-a)}  /* 도시 — 스카이 */

/* 지도 판을 카드 안에서 한 단계 눌러 앉힌다 (칠이 옅어져 경계가 필요해졌다) */
.mapwrap{background:var(--bg);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
:root[data-theme="light"] .mapwrap{background:#eef2f7}
:root[data-theme="light"] .worldmap .land{fill:#ffffff;stroke:#c8d2de;stroke-opacity:1}

/* 이름표 — 육지 색에 맞춰 외곽선을 준다 */
.worldmap .lbl text{stroke:var(--bg)}
:root[data-theme="light"] .worldmap .lbl text{stroke:#eef2f7}