:root{
 --bg:#0d0d0f; --pan:#17181b; --pan2:#1d1e22; --pan3:#24252a; --bd:#2e2f35; --bd2:#3a3b42;
 --tx:#ececef; --tx2:#c8c8d0; --mu:#9a9aa4; --mu2:#7c7c86;
 /* 타입 스케일 — 이 6개 값만 사용한다 */
 --f1:11.5px;  /* 보조·캡션  */
 --f2:12.5px;  /* 표·라벨    */
 --f3:13.5px;  /* 본문       */
 --f4:15px;    /* 카드 제목  */
 --f5:17.5px;  /* 섹션 제목  */
 --f6:25px;    /* 페이지 제목 */
 --a1:#4f8cff; --a2:#39d3a3; --a3:#ffb84d; --a4:#ff6b6b; --a5:#cc5de8; --a6:#22b8cf; --a7:#ff922b; --a8:#94d82d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(77,171,247,.18);overflow-x:hidden}
body{background:var(--bg);color:var(--tx);
 font:var(--f3)/1.6 "Segoe UI",system-ui,-apple-system,"Malgun Gothic","맑은 고딕",sans-serif}
/* ---- 다크 테마 스크롤바 ---- */
*{scrollbar-width:thin;scrollbar-color:#3a424e transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--pan);border-radius:8px}
::-webkit-scrollbar-thumb{background:#39414d;border-radius:8px;border:2px solid var(--pan)}
::-webkit-scrollbar-thumb:hover{background:#4a5462}
::-webkit-scrollbar-corner{background:var(--pan)}
.scrollbox{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.scrollbox::-webkit-scrollbar-track{background:var(--pan2)}
.scrollbox::-webkit-scrollbar-thumb{border-color:var(--pan2)}
/* ---- 레이아웃 ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(13,13,15,.94);backdrop-filter:blur(10px);
 border-bottom:1px solid var(--bd)}
.nav .in{max-width:1300px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav .brand{font-weight:700;font-size:17px;margin-right:10px;display:flex;align-items:center;gap:9px}
.nav a{color:var(--mu);text-decoration:none;padding:8px 14px;border-radius:9px;font-size:var(--f3);
 font-weight:600;background:var(--pan);border:1px solid var(--bd);white-space:nowrap}
.nav a:hover{background:var(--pan3);color:var(--tx);border-color:var(--bd2)}
.nav a.on{background:var(--a1);color:#fff;border-color:var(--a1)}
.nav a.on svg{color:#fff;opacity:1}
.nav .sp{flex:1}
.nav .env{color:var(--mu2);font-size:var(--f1)}
.wrap{max-width:1300px;margin:0 auto;padding:10px 22px 70px}
h1{font-size:var(--f6);margin:0;line-height:1.25;letter-spacing:-.015em}
.sub{color:var(--mu);font-size:var(--f2);margin:6px 0 22px;line-height:1.55}
h2{font-size:var(--f5);margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--bd);display:flex;align-items:baseline;gap:9px}
h2 span{color:var(--mu);font-size:var(--f2);font-weight:400}
/* ---- KPI ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.kpi{background:var(--pan);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;
 display:flex;gap:11px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.kpi>div:last-child{display:flex;flex-direction:column;min-width:0}
.kpi .ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--pan3)}
.kpi .ic svg{width:18px;height:18px;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kpi .l{color:var(--mu);font-size:var(--f1);order:2}
.kpi .v{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.kpi .d{color:var(--mu2);font-size:var(--f1);margin-top:2px;order:3}
/* ---- 카드 ---- */
.card{background:var(--pan);border:1px solid var(--bd);border-radius:12px;padding:15px 16px;
 margin-top:12px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.card h3{margin:0 0 10px;font-size:var(--f4);font-weight:600;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card h3 em{font-style:normal;color:var(--mu);font-weight:400;font-size:var(--f2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
/* ---- 표 ---- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--f2);font-variant-numeric:tabular-nums}
th{text-align:right;color:var(--mu);font-weight:500;padding:7px 8px;border-bottom:1px solid var(--bd);
 white-space:nowrap;position:sticky;top:0;background:var(--pan);z-index:2}
th:first-child,td:first-child{text-align:left}
td{padding:6px 8px;border-bottom:1px solid #21262d;text-align:right;white-space:nowrap}
td.l,th.l{text-align:left}
td.msg{text-align:left;white-space:normal;color:var(--mu);font-size:var(--f2);max-width:420px}
tbody tr:hover td{background:var(--pan2)}
.pill{display:inline-block;padding:1.5px 7px;border-radius:9px;font-size:var(--f1);border:1px solid var(--bd);color:var(--mu)}
.pill.bad{color:#ff8787;border-color:#5c2b2b;background:#2a1618}
.pill.warn{color:#ffd43b;border-color:#5c4a1a;background:#2a2410}
.pill.ok{color:#69db7c;border-color:#255c2b;background:#152a18}
.pill.i{color:#74c0fc;border-color:#1c3d5c;background:#122232}
.flag{font-size:var(--f1);color:var(--mu2);margin-left:5px}
/* ---- 폼 ---- */
.bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.inp,.sel{background:var(--pan2);color:var(--tx);border:1px solid var(--bd);border-radius:7px;
 padding:7px 10px;font-size:var(--f3);font-family:inherit}
.inp:focus,.sel:focus{outline:none;border-color:var(--a1)}
.inp::placeholder{color:var(--mu2)}
.btn{background:var(--a1);color:#fff;border:0;border-radius:7px;padding:7px 15px;font-size:var(--f3);
 font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{filter:brightness(1.1)} .btn:disabled{opacity:.5;cursor:default}
.btn.g{background:var(--pan3);color:var(--tx);border:1px solid var(--bd)}
.seg{display:inline-flex;background:var(--pan2);border:1px solid var(--bd);border-radius:7px;overflow:hidden}
.seg button{background:none;border:0;color:var(--mu);padding:7px 13px;font-size:var(--f2);cursor:pointer;font-family:inherit}
.seg button.on{background:var(--a1);color:#fff;font-weight:600}
.lbl{color:var(--mu);font-size:var(--f2)}
/* ---- 기타 ---- */
.note:empty{display:none}   /* 내용이 채워지지 않으면 빈 상자만 남는다 */
.note{background:var(--pan2);border-left:3px solid var(--a3);border-radius:0 8px 8px 0;padding:11px 14px;
 margin-top:12px;font-size:var(--f3);color:var(--tx2);line-height:1.65}
.note.b{border-left-color:var(--a4)} .note.g{border-left-color:var(--a2)} .note.i{border-left-color:var(--a1)}
.note b{color:var(--tx)}
ul{margin:6px 0 0;padding-left:18px} li{margin:5px 0;font-size:var(--f3);color:var(--tx2);line-height:1.6}
.ch{position:relative;height:300px} .ch.s{height:230px} .ch.t{height:360px} .ch.xs{height:170px}
.legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px;font-size:var(--f1);color:var(--mu)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:4px}
.cavbox{background:var(--pan);border:1px solid var(--bd);border-radius:10px;
 padding:10px 14px;margin-top:26px;font-size:var(--f2)}
.cavbox summary{cursor:pointer;color:var(--tx2);font-weight:600;list-style:none}
.cavbox summary::-webkit-details-marker{display:none}
.cavbox summary:before{content:'▸ ';color:var(--mu)}
.cavbox[open] summary:before{content:'▾ '}
.cavbox ul{margin:8px 0 2px;padding-left:18px}
.cavbox li{color:var(--mu);font-size:var(--f2);line-height:1.7;margin:6px 0}
.foot{color:var(--mu2);font-size:var(--f1);line-height:1.6;margin-top:34px;border-top:1px solid var(--bd);padding-top:14px}
code{background:var(--pan3);padding:1.5px 5px;border-radius:4px;font-size:var(--f1);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.empty{color:var(--mu2);text-align:center;padding:34px 0;font-size:var(--f3)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--bd);border-top-color:var(--a1);
 border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.tl{position:relative;padding-left:20px}
.tl:before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--bd)}
.tl .ev{position:relative;padding:5px 0 5px 4px;font-size:var(--f2);line-height:1.55}
.tl .ev:before{content:'';position:absolute;left:-19px;top:11px;width:9px;height:9px;border-radius:50%;
 background:var(--a1);border:2px solid var(--bg)}
.tl .ev .t{color:var(--mu2);font-size:var(--f1);margin-right:8px}
.step{display:flex;align-items:center;gap:9px;margin:5px 0}
.step .n{width:22px;color:var(--mu2);font-size:var(--f1);text-align:right}
.step .b{height:19px;border-radius:4px;background:linear-gradient(90deg,#4dabf7,#22b8cf);min-width:2px}
.step .x{font-size:var(--f2);color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==========================================================================
   모바일 / 태블릿 (iPhone · iPad)
   ========================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(77,171,247,.18)}
.scrollbox,.tblwrap{-webkit-overflow-scrolling:touch}
/* 표는 항상 가로 스크롤 가능한 래퍼 안에 */
.tblwrap{overflow-x:auto;overscroll-behavior-x:contain}
.tblwrap>table{min-width:max-content}
.card{overflow:hidden}          /* 카드 밖으로 표가 삐져나오지 않게 */
canvas{max-width:100%}

/* ---- iPad 세로 / 좁은 데스크톱 ---- */
@media (max-width:1024px){
  .wrap{padding:10px 16px 64px}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .ch{height:280px} .ch.t{height:320px}
}

/* ---- iPhone / 작은 화면 ---- */
@media (max-width:720px){
  h1{font-size:21px}
  h2{margin:26px 0 10px;flex-wrap:wrap;gap:4px}
  h2 span{flex-basis:100%}
  .wrap{padding:8px 12px 56px}

  /* 내비 — 가로 스크롤 되는 탭 줄 */
  .nav .in{height:auto;padding:8px 12px;gap:4px;overflow-x:auto;white-space:nowrap;
    padding-top:calc(8px + env(safe-area-inset-top))}
  .nav .brand{margin-right:8px}
  .nav .brand svg{width:16px;height:16px}
  .nav a{padding:6px 11px}
  .nav .env{display:none}
  .nav .sp{display:block}

  /* KPI — 2열, 아이콘 살짝 축소 */
  .kpis{grid-template-columns:repeat(2,1fr);gap:9px}
  .kpi{padding:11px 12px;gap:9px}
  .kpi .ic{width:29px;height:29px;border-radius:8px}
  .kpi .ic svg{width:16px;height:16px}

  .card{padding:12px;border-radius:10px;margin-top:11px}
  .grid2,.grid3{gap:11px}

  /* 차트 — 세로로 조금 더 확보 (가로가 좁아 라벨이 겹침) */
  .ch{height:250px} .ch.s{height:230px} .ch.t{height:270px} .ch.xs{height:160px}

  /* 표 — 여백 축소, 메시지 칸은 줄바꿈 허용 */
  th,td{padding:6px 6px}

  /* 검색 폼 — 세로 스택, iOS 자동 확대 방지(16px) */
  .bar{gap:7px}
  .bar .lbl{width:100%;margin-bottom:-4px}
  .inp,.sel{font-size:16px;padding:9px 11px;width:100%;min-height:42px}
  .bar .inp,.bar .sel{flex:1 1 100%}
  input[type=date].inp{min-width:0}
  .btn{font-size:var(--f4);padding:10px 16px;min-height:44px;flex:1 1 45%}
  .seg{width:100%;overflow-x:auto}
  .seg button{flex:1;padding:10px 8px;font-size:var(--f3);min-height:44px;white-space:nowrap}

  .step .n{width:18px}
}

/* ---- 아주 좁은 화면 (iPhone SE 등) ---- */
@media (max-width:380px){
  .kpis{grid-template-columns:1fr}
  .ch{height:225px}
}

/* ---- 노치 / 홈 인디케이터 ---- */
@supports(padding:max(0px)){
  .wrap{padding-left:max(12px,env(safe-area-inset-left));
        padding-right:max(12px,env(safe-area-inset-right));
        padding-bottom:max(56px,calc(40px + env(safe-area-inset-bottom)))}
  .nav .in{padding-left:max(12px,env(safe-area-inset-left));
           padding-right:max(12px,env(safe-area-inset-right))}
}

/* ---- 터치 기기: hover 효과 제거, 스크롤바 자리 차지 안 함 ---- */
@media (hover:none){
  tbody tr:hover td{background:none}
  .nav a:hover{background:none}
  ::-webkit-scrollbar{width:0;height:0}
}

/* ---- 가로 모드 iPhone ---- */
@media (max-height:500px) and (orientation:landscape){
  .ch{height:200px} .ch.t{height:220px} .ch.s{height:190px}
  .nav .in{height:44px;padding-top:4px}
}

/* ---- 인쇄 ---- */
@media print{
  .nav,.bar,.btn{display:none}
  body{background:#fff;color:#000}
  .card{border-color:#ccc;background:#fff;break-inside:avoid}
}

/* 앱 11개가 y축에 오는 가로 누적막대 — 모바일에서 행 간격 확보 */
.ch.apps{height:290px}
@media (max-width:720px){ .ch.s.apps{height:330px} }
@media (max-width:380px){ .ch.s.apps{height:320px} }
@media (max-height:500px) and (orientation:landscape){ .ch.s.apps{height:250px} }

.navcard{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border:1px solid var(--bd);
 border-radius:9px;background:var(--pan2);text-decoration:none;color:var(--tx)}
.navcard:hover{border-color:var(--a1);background:var(--pan3)}
.navcard b{font-size:var(--f3)} .navcard span{color:var(--mu);font-size:var(--f2)}
.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:12px}
.hlc{background:var(--pan);border:1px solid var(--bd);border-left:3px solid var(--a1);
 border-radius:12px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.hlc.bad{border-left-color:var(--a4)} .hlc.good{border-left-color:var(--a2)} .hlc.warn{border-left-color:var(--a3)}
.hlc .h{font-size:var(--f3);font-weight:640;margin-bottom:4px}
.hlc .b{font-size:var(--f2);color:var(--tx2);line-height:1.6}
.hlc .m{font-size:22px;font-weight:680;margin:2px 0 4px}
@media(max-width:640px){.hl{grid-template-columns:1fr}.hlc{padding:11px 13px}}


/* ==========================================================
   라이트 테마
   ========================================================== */
:root[data-theme="light"]{
 --bg:#f5f7fa; --pan:#ffffff; --pan2:#f1f4f8; --pan3:#e6ebf1; --bd:#dbe2ea; --bd2:#c5cfda;
 --tx:#0f141a; --tx2:#2b3440; --mu:#48545f; --mu2:#5f6b78;
 --a1:#2563eb; --a2:#0f9d74; --a3:#a37700; --a4:#e03131; --a5:#9c36b5; --a6:#0c8599;
 --a7:#e8590c; --a8:#66a80f;
 --grid:#e5eaf0; --tick:#5a6675;
}
:root{ --grid:#21262d; --tick:#8b949e; }
:root[data-theme="light"] body{-webkit-tap-highlight-color:rgba(25,113,194,.15)}
:root[data-theme="light"] .nav{background:rgba(247,248,250,.94)}
:root[data-theme="light"] .card,
:root[data-theme="light"] .kpi{box-shadow:0 1px 2px rgba(16,24,40,.05)}
:root[data-theme="light"] td{border-bottom-color:#eef2f6}
:root[data-theme="light"] code{background:#eef2f6;color:#1f2933}
:root[data-theme="light"] th{color:#48545f;background:var(--pan)}
:root[data-theme="light"] .kpi .v{color:#0f141a}
:root[data-theme="light"] .note{background:#f7f9fc}
:root[data-theme="light"] .hlc{background:var(--pan)}
:root[data-theme="light"] .pill.bad{color:#c92a2a;border-color:#ffc9c9;background:#fff5f5}
:root[data-theme="light"] .pill.warn{color:#a97800;border-color:#ffe8a3;background:#fffbeb}
:root[data-theme="light"] .pill.ok{color:#2b8a3e;border-color:#b2f2bb;background:#f4fce7}
:root[data-theme="light"] .pill.i{color:#1864ab;border-color:#a5d8ff;background:#f1f8ff}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c5cfda;border-color:var(--pan)}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#aab6c4}
:root[data-theme="light"] .step .b{background:linear-gradient(90deg,#1971c2,#0c8599)}
:root[data-theme="light"] .brandmark{filter:none}

/* 브랜드 / 메뉴 아이콘 / 테마 토글 */
.brand{display:flex;align-items:center;gap:9px}
.brandmark{width:26px;height:26px;border-radius:7px;flex:none;display:block}
.nav a{display:inline-flex;align-items:center;gap:6px}
.nav a svg{width:15px;height:15px;flex:none;stroke-width:1.9;fill:none;
 stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.nav a.on svg{opacity:1;color:#fff}
/* 브랜드(로고+이름)는 탭 칩 스타일을 쓰지 않는다 */
.nav a.brand{background:none !important;border:0 !important;padding:0 !important;
 border-radius:0 !important;color:var(--tx) !important}
.nav a.brand:hover{background:none !important;color:var(--tx) !important}
.themebtn{margin-left:10px;background:var(--pan2);border:1px solid var(--bd);color:var(--mu);
 width:34px;height:34px;border-radius:9px;display:inline-grid;place-items:center;cursor:pointer;flex:none}
.themebtn:hover{background:var(--pan3);color:var(--tx)}
.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
 stroke-linecap:round;stroke-linejoin:round}
.themebtn .sun{display:none}
:root[data-theme="light"] .themebtn .sun{display:block}
:root[data-theme="light"] .themebtn .moon{display:none}
/* 메뉴: 아이콘 + 라벨을 항상 함께. 좁으면 메뉴 줄만 가로 스크롤 */
.menu{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;
 -webkit-overflow-scrolling:touch;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.nav a span{display:inline !important;white-space:nowrap}

@media(max-width:900px){ .nav .env{display:none} }
@media(max-width:834px){
 .nav a{padding:7px 10px}
 .themebtn{width:32px;height:32px}
}
@media(max-width:640px){ .nav a{padding:6px 8px} .nav a svg{width:14px;height:14px} }
@media(max-width:640px){
 .brand span{font-size:var(--f3)}
 .brandmark{width:22px;height:22px}
}

/* ==========================================================
   반응형 — iPad / iPhone
   ========================================================== */
@media (max-width:1100px){
  .grid2,.grid3{grid-template-columns:1fr}
}
/* --- iPad 세로 및 그 이하 --- */
@media (max-width:834px){
  :root{--f1:11px;--f2:12px;--f3:13px;--f4:14px;--f5:16px;--f6:21px}
  .wrap{padding:8px 14px 60px}
  h2{margin:26px 0 10px;flex-wrap:wrap;gap:4px}
  h2 span{flex-basis:100%}
  .card{padding:13px;border-radius:10px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:9px}
  .kpi{padding:11px 12px;gap:10px}
  .kpi .ic{width:30px;height:30px;border-radius:8px}
  .kpi .ic svg{width:16px;height:16px}
  .ch{height:250px}.ch.t{height:280px}.ch.s{height:210px}.ch.xs{height:160px}
}
/* --- iPhone --- */
@media (max-width:640px){
  .legend{gap:7px}
  :root{--f1:11px;--f2:12px;--f3:13px;--f4:13.5px;--f5:15.5px;--f6:20px}
  .wrap{padding:8px 11px 54px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:10px;flex-direction:column;gap:6px}
  .kpi .d{display:none}
  .card{padding:11px}
  .card h3 em{flex-basis:100%;margin-top:2px}
  .ch{height:220px}.ch.t{height:240px}.ch.s{height:200px}
  /* 표: 카드 밖으로 넘치지 않게 가로 스크롤 + 여백 축소 */
  th,td{padding:6px 6px}
  /* 스크롤 영역은 화면 높이에 맞춰 제한 */
  .scrollbox{max-height:62vh !important}
  /* 검색 바 세로 정렬 */
  .bar{gap:7px}
  .bar>.lbl{width:100%;margin-bottom:-3px}
  .inp,.sel{flex:1 1 100%;min-width:0;font-size:16px;padding:9px 11px}  /* 16px = iOS 자동 줌 방지 */
  .btn{flex:1 1 calc(50% - 4px);padding:11px 14px;font-size:var(--f4)}
  .seg{width:100%}
  .seg button{flex:1;padding:9px 4px;font-size:var(--f2)}
  .step .n{width:18px}
}
/* --- 아주 좁은 화면 (iPhone SE 등) --- */
@media (max-width:400px){
  .kpis{grid-template-columns:1fr 1fr;gap:7px}
  .ch{height:200px}
}
/* --- 노치/홈바 안전영역 (iPhone 가로모드 포함) --- */
@supports (padding:max(0px)){
  .nav .in{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .wrap{padding-left:max(11px,env(safe-area-inset-left));padding-right:max(11px,env(safe-area-inset-right));
        padding-bottom:max(54px,calc(40px + env(safe-area-inset-bottom)))}
}
/* --- 터치 기기: hover 효과 대신 탭 피드백, 스크롤바 얇게 --- */
@media (hover:none){
  tbody tr:hover td{background:transparent}
  tbody tr:active td{background:var(--pan2)}
  .nav a:hover{background:none}
  .btn,.seg button,.nav a{min-height:38px}
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-thumb{border:0}
}
/* --- 가로모드 iPhone: 세로 공간이 좁으므로 차트 축소 --- */
@media (max-height:500px) and (orientation:landscape){
  .ch{height:190px}.ch.t{height:200px}
  .scrollbox{max-height:52vh !important}
}
/* --- 인쇄 --- */
@media print{
  .nav,.bar{display:none}
  body{background:#fff;color:#000}
  .card{border-color:#ccc;background:#fff}
}

/* 저작권 푸터 */
.copy{margin-top:18px;padding:16px 0 4px;border-top:1px solid var(--bd);
 color:var(--mu2);font-size:var(--f1);display:flex;justify-content:space-between;
 align-items:center;gap:10px;flex-wrap:wrap}
.copy .brandmini{display:flex;align-items:center;gap:7px;color:var(--mu)}
.copy .brandmini img{width:16px;height:16px;border-radius:4px;display:block}
@media(max-width:640px){.copy{justify-content:center;text-align:center}}

/* 내비 우측 끝 테마 토글 */
.nav .themebtn{margin-left:10px;flex:none}
/* 제목을 없앴으므로 첫 요소 상단 여백을 줄인다 */
.wrap>.sub:first-child{margin-top:2px}
.wrap>h2:first-child,.wrap>.kpis:first-child,.wrap>.card:first-child{margin-top:4px}

/* 기간 선택 바 */
.rangebar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 16px;
 padding:9px 12px;background:var(--pan);border:1px solid var(--bd);border-radius:10px}
.rangebar .rngnote{color:var(--mu2);margin-left:2px}
.rangeseg button{padding:6px 12px}
@media(max-width:640px){
 .rangebar{padding:8px 10px;gap:6px}
 .rangeseg{width:100%} .rangeseg button{flex:1;padding:8px 4px}
 .rangebar .rngnote{width:100%;text-align:center}
}

/* 로그 코드 2줄 표기 */
.cx{display:inline-flex;flex-direction:column;line-height:1.25}
.cx b{font-weight:600;color:var(--tx)}
.cx i{font-style:normal;color:var(--mu2);font-size:var(--f1);
 font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.cxs{font-style:normal;color:var(--mu2);font-size:var(--f1);
 font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

/* ==========================================================
   Scan for Clinics Insight 스타일 정렬 — 상태줄·필터바·배너
   ========================================================== */
/* 업데이트 상태줄 */
.statusline{margin:2px 0 10px;font-size:var(--f2);color:var(--mu);line-height:1.7}
.statusline .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
 background:var(--a2);margin-right:6px;vertical-align:1px}
.statusline .ok{color:var(--a2)}
.statusline b{color:var(--tx);font-weight:600}

/* 안내 배너 */
.banner{display:flex;align-items:flex-start;gap:10px;background:var(--pan);border:1px solid var(--bd);
 border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:var(--f2);color:var(--tx2);
 box-shadow:0 1px 2px rgba(0,0,0,.3)}
.banner .bi{flex:none;width:18px;height:18px;border-radius:5px;background:var(--a1);color:#fff;
 display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px}
.banner .bx{margin-left:auto;background:none;border:0;color:var(--mu2);cursor:pointer;
 font-size:16px;line-height:1;padding:0 2px}
.banner .bx:hover{color:var(--tx)}

/* 필터 바 — 참조 사이트의 기간 선택 줄 */
.rangebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;
 padding:10px 14px;background:var(--pan);border:1px solid var(--bd);border-radius:12px;
 box-shadow:0 1px 2px rgba(0,0,0,.3)}
.rangebar .lbl{color:var(--mu);font-size:var(--f2);font-weight:600}
.rangebar .rngnote{color:var(--mu2);font-weight:400;margin-left:auto}
.rangeseg{display:inline-flex;gap:6px;background:none;border:0}
.rangeseg button{background:var(--pan2);border:1px solid var(--bd);color:var(--mu);
 padding:7px 14px;border-radius:9px;font-size:var(--f2);font-weight:600;cursor:pointer;font-family:inherit}
.rangeseg button:hover{background:var(--pan3);color:var(--tx)}
.rangeseg button.on{background:var(--a1);color:#fff;border-color:var(--a1)}

/* 섹션 제목에 색점 */
h2{position:relative}
h2::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
 background:var(--a1);margin-right:9px;vertical-align:2px;flex:none}
h2 span{color:var(--mu)}

/* 카드 제목 */
.card h3{font-size:var(--f4);font-weight:700}
.card h3 em{color:var(--mu)}

@media(max-width:640px){
 .rangebar{padding:9px 11px}
 .rangebar .rngnote{margin-left:0;width:100%}
 .rangeseg{width:100%;gap:5px} .rangeseg button{flex:1;padding:8px 4px}
 .statusline{font-size:var(--f1)}
}

/* 기간 직접 선택 */
.custwrap{display:inline-flex;align-items:center;gap:6px}
.inp.mon{padding:6px 9px;font-size:var(--f2);border-radius:8px;color-scheme:dark}
:root[data-theme="light"] .inp.mon{color-scheme:light}
.custwrap .btn{padding:6px 13px;font-size:var(--f2)}
@media(max-width:640px){
 .custwrap{width:100%;flex-wrap:wrap}
 .inp.mon{flex:1 1 40%;font-size:16px}
 .custwrap .btn{flex:1 1 100%}
}

/* 선택된 탭 아이콘은 흰색 */
.nav a.on svg{color:#fff !important;opacity:1 !important}

/* 로그아웃 */
.logoutbtn{background:var(--pan);border:1px solid var(--bd);color:var(--mu);
 padding:8px 14px;border-radius:9px;font-size:var(--f3);font-weight:600;cursor:pointer;
 font-family:inherit;margin-left:8px;flex:none}
.logoutbtn:hover{background:var(--pan3);color:var(--tx);border-color:var(--bd2)}
@media(max-width:640px){.logoutbtn{padding:7px 10px}}

/* 우측 고정 묶음 — 줄바꿈 없이 붙어 있게 */
.nav .env,.nav .themebtn,.nav .logoutbtn{flex:none}
.nav .sp{flex:1 1 auto;min-width:0}

/* ================= 세계 지도 ================= */
.mapctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.mapctl .sp{flex:1}
.mapctl .seg{display:inline-flex;background:var(--pan2);border:1px solid var(--bd);border-radius:9px;padding:2px}
.mapctl .seg button{background:none;border:0;color:var(--mu);font:inherit;font-size:var(--f2);
 padding:5px 13px;border-radius:7px;cursor:pointer;transition:.15s}
.mapctl .seg button:hover{color:var(--tx2)}
.mapctl .seg button.on{background:var(--a1);color:#fff;font-weight:600}
.mapctl .mapcrumb{color:var(--tx2);font-size:var(--f2)}
.mapctl .mapcrumb em{font-style:normal;color:var(--mu2);margin:0 2px}
.mapctl .mapinfo{color:var(--mu);font-size:var(--f1)}
.mapzoom{display:inline-flex;gap:4px}
.mapzoom button{background:var(--pan2);border:1px solid var(--bd);color:var(--tx2);font:inherit;
 font-size:var(--f2);min-width:30px;height:28px;padding:0 9px;border-radius:8px;cursor:pointer;line-height:1}
.mapzoom button:hover{border-color:var(--a1);color:var(--tx)}
.mapwrap{position:relative;border:1px solid var(--bd);border-radius:12px;overflow:hidden;
 background:var(--pan2);cursor:grab;touch-action:none}
.mapwrap.grabbing{cursor:grabbing}
.worldmap{display:block;width:100%;height:auto;aspect-ratio:1000/448}
.worldmap .sea{fill:var(--pan2)}
.worldmap .land{fill:var(--pan3);stroke:var(--bd2);stroke-width:.28;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;shape-rendering:geometricPrecision;
 vector-effect:non-scaling-stroke}
.worldmap circle{cursor:pointer;transition:fill-opacity .15s}
.worldmap .nb{fill:var(--a1);fill-opacity:.5;stroke:var(--a1)}
.worldmap .nb:hover{fill-opacity:.88}
.worldmap .rb{fill:var(--a6);fill-opacity:.5;stroke:var(--a6)}
.worldmap .rb:hover{fill-opacity:.88}
.worldmap .cb{fill:var(--a2);fill-opacity:.55;stroke:var(--a2)}
.worldmap .cb:hover{fill-opacity:.9}
/* 지도 이름표 — 글자 크기는 JS 가 화면 px 기준으로 넣는다(확대해도 커지지 않게).
   paint-order:stroke 로 글자 뒤에 바탕색 테두리를 둘러 바다·육지 어디서든 읽히게 한다.
   stroke 는 non-scaling 이라 확대 배율과 무관하게 항상 같은 두께다. */
.worldmap .lbl{pointer-events:none;user-select:none}
.worldmap .lbl text{paint-order:stroke fill;stroke:var(--pan2);stroke-width:2.8px;
 stroke-linejoin:round;vector-effect:non-scaling-stroke;text-anchor:middle;
 font-family:inherit;letter-spacing:.01em}
.worldmap .lbl text.t1{fill:var(--tx);font-weight:600}
.worldmap .lbl text.t2{fill:var(--mu);font-weight:500}
.worldmap .lbl .pin{fill:var(--mu2);stroke:none}
:root[data-theme="light"] .worldmap .lbl text{stroke:#ffffff;stroke-width:3px}
:root[data-theme="light"] .worldmap .lbl text.t1{fill:#111820}
:root[data-theme="light"] .worldmap .lbl text.t2{fill:#5b6472}
.maptip{position:absolute;pointer-events:none;z-index:5;background:var(--pan);border:1px solid var(--bd2);
 border-radius:9px;padding:8px 11px;font-size:var(--f1);line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.45);
 display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.maptip b{color:var(--tx);font-size:var(--f2)}
.maptip .c{color:var(--mu2)}
.maptip .v{color:var(--a1)}
@media(max-width:900px){
 .mapctl{gap:7px}
 .mapctl .sp{display:none}
 .mapctl .mapinfo,.mapctl .mapcrumb{font-size:11px}
 .mapctl .mapinfo{order:9;width:100%;color:var(--mu2)}
 .mapctl .seg{width:auto;flex:0 0 auto}
 .mapctl .seg button{flex:0 0 auto;padding:6px 13px;font-size:12.5px}
 .mapzoom{margin-left:auto}
}

/* ================================================================
   모바일 톤앤매너 (Scan for Clinics Insight 기준)
   1행: 로고 + 테마/로그아웃 · 2행: 메뉴 칩 가로 스크롤
   ================================================================ */
@media (max-width:900px){
 .nav .in{flex-wrap:wrap;padding:9px 14px 7px;gap:7px;row-gap:8px}
 .nav a.brand{order:1;font-size:16px;margin-right:0}
 .nav .sp{order:2;flex:1 1 auto;min-width:0}
 .nav .themebtn{order:3}
 .nav .logoutbtn{order:4;margin-left:0}
 .nav .env{display:none}
 .nav .menu{order:9;width:100%;display:flex;gap:7px;flex-wrap:nowrap;
   overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
   scroll-snap-type:x proximity;padding:1px 0 5px;margin:0 -2px;
   scrollbar-width:none;-ms-overflow-style:none}
 .nav .menu::-webkit-scrollbar{display:none}
 .nav .menu a{flex:0 0 auto;scroll-snap-align:start;padding:8px 13px}
 /* 스크롤 가능함을 알리는 오른쪽 페이드 */
 .nav .in{position:relative}
 .nav .menu{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent)}
}
@media (max-width:900px){
 /* 본문 여백·간격을 레퍼런스와 동일한 리듬으로 */
 .wrap{padding:8px 14px 60px}
 .grid2,.grid3{grid-template-columns:1fr;gap:12px}
 h2{margin:26px 0 10px}
 .statusline{margin-bottom:10px}
 .banner{padding:11px 13px}
 .rangebar{padding:9px 11px}
}
@media (max-width:640px){
 /* KPI: 아이콘 왼쪽 · 숫자 위 · 라벨 아래 (레퍼런스와 동일) */
 .kpis{grid-template-columns:repeat(2,1fr);gap:9px}
 .kpi{flex-direction:row;align-items:center;gap:10px;padding:12px 12px}
 .kpi .ic{width:34px;height:34px;border-radius:10px}
 .kpi .ic svg{width:18px;height:18px}
 .kpi>div:last-child{min-width:0}
 .kpi .v{font-size:19px}
 .kpi .l{font-size:11px;line-height:1.35;word-break:keep-all}
 .kpi .d{display:none}
 .card{padding:13px 13px}
 .card h3{font-size:14px}
 /* 폰에서도 글씨는 줄이지 않는다 — 읽히는 게 우선 */
 :root{--f1:11.5px;--f2:12.5px;--f3:13px;--f4:14px;--f5:16px;--f6:20px}
 .nav a.brand span,.nav a.brand{font-size:15.5px}
 .logoutbtn{padding:8px 12px;font-size:13px}
 .themebtn{width:38px;height:38px}
}
@media (max-width:400px){
 .kpis{grid-template-columns:1fr 1fr;gap:8px}
 .kpi .v{font-size:18px}
 .nav a.brand{font-size:14.5px}
 .nav .menu a span{font-size:12.5px}
}
/* 지도: 모바일에서는 세로 여유를 준다 */
@media (max-width:900px){
 .mapctl .mapinfo{width:100%;order:3;font-size:11px;color:var(--mu2)}
 .mapctl .mapreset{margin-left:auto}
}

/* ================= 로그인 화면 ================= */
.loginpage{min-height:100vh;display:flex;flex-direction:column}
.loginwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:32px 18px 40px;gap:20px}
.logincard{width:100%;max-width:404px;background:var(--pan);border:1px solid var(--bd);
 border-radius:14px;padding:26px 26px 22px;box-shadow:0 10px 34px rgba(0,0,0,.42)}
.loginhead{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.loginhead img{flex:none;border-radius:9px}
.loginhead h1{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0}
.loginhead p{margin:3px 0 0;color:var(--mu);font-size:var(--f2)}
.logincard label{display:block;color:var(--mu);font-size:var(--f2);margin:0 0 6px}
.logincard .inp{width:100%;padding:11px 13px;font-size:15px;border-radius:9px;margin-bottom:14px}
.logincard .inp:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(79,140,255,.16)}
.loginbtn{width:100%;padding:12px;font-size:15px;border-radius:9px;margin-top:4px;
 background:var(--a1);color:#fff;font-weight:700}
.loginbtn:hover{filter:brightness(1.08)}
.loginmsg{border-radius:9px;padding:10px 13px;font-size:var(--f2);margin-bottom:16px;line-height:1.5}
.loginmsg.bad{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.35);color:#ffb3b3}
.loginmsg.ok{background:rgba(57,211,163,.11);border:1px solid rgba(57,211,163,.32);color:#8ee8c8}
.loginnote{margin-top:16px;padding-top:14px;border-top:1px solid var(--bd);
 color:var(--mu2);font-size:var(--f1);line-height:1.55}
.loginfoot{border:0;margin:0;padding:0;justify-content:center}
:root[data-theme="light"] .logincard{box-shadow:0 8px 26px rgba(15,23,42,.10)}
@media (max-width:640px){
 .loginwrap{padding:22px 14px 30px;justify-content:flex-start}
 .logincard{padding:22px 18px 18px;border-radius:13px}
 .loginhead h1{font-size:17px}
 .logincard .inp{font-size:16px}   /* iOS 자동 확대 방지 */
}

/* 긴 설명 접기 */
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,3);
 overflow:hidden}
.morebtn{background:none;border:0;color:var(--a1);font:inherit;font-size:var(--f1);font-weight:600;
 cursor:pointer;padding:4px 0 0;margin:0}
.morebtn:hover{text-decoration:underline}
.note+.morebtn{margin-left:2px}

/* 지도 확대는 휠(마우스 있는 기기)·핀치(터치)로 — +/− 버튼은 터치 기기에만 */
@media (hover:hover) and (pointer:fine){
 .mapzoom button[data-z="in"],.mapzoom button[data-z="out"]{display:none}
}

/* 국기 아이콘 */
.flg{width:17px;height:12.75px;border-radius:2px;vertical-align:-1px;flex:none;
 box-shadow:0 0 0 1px rgba(255,255,255,.12);object-fit:cover;background:var(--pan3)}
.cty{display:inline-flex;align-items:center;gap:7px;min-width:0}
.cty>span{overflow:hidden;text-overflow:ellipsis}
.maptip .flg{width:16px;height:12px;vertical-align:-1px}
.mapcrumb .flg{width:16px;height:12px}

/* 지도 원 — 상위 지역은 천천히 깜빡여 눈에 들어오게 */
@keyframes mapPulse{
 0%{fill-opacity:.30} 50%{fill-opacity:.85} 100%{fill-opacity:.30}}
@keyframes mapRing{
 0%{transform:scale(1);opacity:.55} 70%{transform:scale(2.4);opacity:0} 100%{opacity:0}}
.mapwrap.inview .worldmap circle.pulse{animation:mapPulse 2.4s ease-in-out infinite}
.worldmap circle.ring{pointer-events:none;fill:none;transform-box:fill-box;transform-origin:center;opacity:0}
.mapwrap.inview .worldmap circle.ring{animation:mapRing 2.4s ease-out infinite}
.worldmap .bub{isolation:isolate}
@media (prefers-reduced-motion:reduce){
 .worldmap circle.pulse,.worldmap circle.ring{animation:none}
 .worldmap circle.ring{display:none}
}

/* 푸터 중앙 정렬 */
.copy{justify-content:center;text-align:center}
.foot{text-align:center}

/* 스크롤 영역 '전체 보기' */
.sbwrap{position:relative}
.sbmore{display:flex;justify-content:center;margin-top:8px}
.sbmore button{background:var(--pan2);border:1px solid var(--bd);color:var(--tx2);font:inherit;
 font-size:var(--f2);padding:6px 16px;border-radius:8px;cursor:pointer}
.sbmore button:hover{border-color:var(--a1);color:var(--tx)}
.scrollbox.open{max-height:none !important;overflow:visible}

/* 폰: 테마·로그아웃은 오른쪽 끝으로 */
@media (max-width:900px){
 .nav .themebtn{margin-left:auto}
 .nav .logoutbtn{margin-left:6px}
}

/* 앱을 연 순서 (경로) */
.seq{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.seq b{color:var(--mu2);font-weight:400}
.stp{display:inline-flex;align-items:center;gap:5px;background:var(--pan2);border:1px solid var(--bd);
 border-radius:20px;padding:2px 10px 2px 3px;white-space:nowrap}
.stp i{font-style:normal;width:17px;height:17px;border-radius:50%;background:var(--a1);color:#fff;
 font-size:10.5px;font-weight:700;display:grid;place-items:center;flex:none}

/* KPI 값이 긴 앱 이름일 때 넘치지 않게 */
.kpi .v{overflow-wrap:anywhere;word-break:keep-all}

/* 표 헤더 클릭 정렬 */
th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:16px !important}
th.sortable:hover{color:var(--tx)}
th.sortable::after{content:'⇅';position:absolute;right:4px;opacity:.28;font-size:10px}
th.sortable.sorted{color:var(--a1)}
th.sortable.sorted::after{content:'▾';opacity:.9}
th.sortable.sorted.asc::after{content:'▴'}

/* 앱 선택 패널 */
.chrow{display:flex;gap:14px;align-items:stretch}
.chrow>.ch{flex:1;min-width:0}
.apppick{flex:0 0 168px;display:flex;flex-direction:column;gap:4px;align-self:flex-start;
 max-height:100%;overflow:auto}
.apppick button{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;
 color:var(--mu);font:inherit;font-size:var(--f1);padding:5px 8px;border-radius:7px;cursor:pointer;
 text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apppick button i{width:9px;height:9px;border-radius:3px;flex:none;background:var(--bd2);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.apppick button:hover{background:var(--pan2);color:var(--tx2)}
.apppick button.on{color:var(--tx);background:var(--pan2);border-color:var(--bd)}
.apppick button.on i{background:var(--dot)}
.apppick-act{display:flex;gap:4px;margin-top:4px;padding-top:6px;border-top:1px solid var(--bd)}
.apppick-act button{flex:1;justify-content:center;font-size:10.5px;padding:4px 6px;color:var(--mu2)}
@media (max-width:900px){
 .chrow{flex-direction:column}
 .apppick{flex:none;width:100%;flex-direction:row;flex-wrap:wrap;max-height:none;overflow:visible}
 .apppick button{font-size:11.5px;padding:5px 10px;border:1px solid var(--bd);background:var(--pan2)}
 .apppick-act{margin-top:0;padding-top:0;border:0;width:100%}
 .apppick-act button{flex:0 0 auto}
}

/* 경로 단계 사이의 간격 표시 */
.gap{display:inline-flex;align-items:center;gap:6px}
.gapv{display:inline-flex;flex-direction:column;line-height:1.2;color:var(--mu);font-size:10.5px;
 align-items:center}
.gapv i{font-style:normal;color:var(--mu2);font-size:9.5px}
.gapv .wk{color:var(--a3);font-size:9.5px}
/* 경로 줄 펼치기 */
tr.expand{cursor:pointer}
tr.expand:hover td{background:var(--pan2)}
tr.expand.open td{background:var(--pan2)}
tr.expand td:first-child{position:relative}
.pdetrow>td{background:var(--pan2) !important;padding:0 !important}
.pdet{padding:12px 14px 13px}
.pdet table{width:100%;border-collapse:collapse;font-size:var(--f1)}
.pdet th{color:var(--mu2);font-weight:600;text-align:right;padding:4px 8px;border-bottom:1px solid var(--bd)}
.pdet th:nth-child(2){text-align:left}
.pdet td{text-align:right;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.pdet td.l{text-align:left;color:var(--tx)}
.pdet .lbl{margin-top:9px;line-height:1.6}

/* 행정구역(주·도) 경계 — 확대했을 때만 */
.worldmap .adm1{fill:none;stroke:var(--bd2);stroke-width:.5;stroke-linejoin:round;
 vector-effect:non-scaling-stroke;opacity:0;transition:opacity .25s}
.mapwrap.admon .worldmap .adm1{opacity:.85}
.mapwrap.admon .worldmap .land{fill:var(--pan3);stroke:var(--mu2);stroke-opacity:.55}

/* ================= 그래프 전체화면 보기 ================= */
.card.hasfs{position:relative}
.fsbtn{position:absolute;top:11px;right:11px;z-index:3;width:28px;height:28px;padding:0;
 display:grid;place-items:center;background:var(--pan2);border:1px solid var(--bd);border-radius:8px;
 color:var(--mu);cursor:pointer;opacity:.65;transition:.15s}
.fsbtn svg{width:15px;height:15px}
.fsbtn:hover{opacity:1;color:var(--tx);border-color:var(--a1)}
.card.hasfs:hover .fsbtn{opacity:1}
body.fslock{overflow:hidden}
.fsov{position:fixed;inset:0;z-index:200;background:var(--bg);
 display:none;flex-direction:column;padding:14px 16px 18px}
.fsov.on{display:flex}
.fsbar{display:flex;align-items:center;gap:12px;padding:2px 2px 10px;flex:none}
.fsbar .fstitle{font-size:var(--f5);font-weight:700;color:var(--tx);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.fsbar .fshint{color:var(--mu2);font-size:var(--f1);flex:1;white-space:nowrap;overflow:hidden}
.fsx{width:34px;height:34px;display:grid;place-items:center;background:var(--pan2);
 border:1px solid var(--bd);border-radius:9px;color:var(--tx2);cursor:pointer;flex:none}
.fsx svg{width:17px;height:17px}
.fsx:hover{border-color:var(--a1);color:var(--tx)}
.fsbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;
 background:var(--pan);border:1px solid var(--bd);border-radius:12px;padding:14px}
.fsbody>.fsbig{flex:1;min-height:0;height:auto !important;max-height:none !important}
.fsbody>.fsbig.chrow{display:flex}
.fsbody>.fsbig.chrow>.ch{height:auto !important}
.fsbody .apppick{flex:0 0 200px;max-height:100%}
.fsbody>.legend{flex:none;justify-content:center}
.fsbody .worldmap{aspect-ratio:auto !important;width:100%;height:100%}
.fsbody .mapwrap{flex:1;min-height:0}
.fsslot{background:transparent}
@media (max-width:640px){
 .fsov{padding:8px 8px 12px}
 .fsbar .fstitle{font-size:var(--f4)} .fsbar .fshint{display:none}
 .fsbody{padding:9px}
 .fsbody .apppick{flex:none}
}

/* ================= 앱별 사용 흐름 (하루 타임라인) ================= */
.fltl{display:flex;flex-direction:column;gap:2px}
.flhead{display:grid;grid-template-columns:132px 1fr 84px;gap:8px;align-items:center;
 position:sticky;top:0;z-index:2;background:var(--pan);padding:4px 0 6px;
 border-bottom:1px solid var(--bd);color:var(--mu2);font-size:var(--f1)}
.flhead .hrs{display:flex;justify-content:space-between;padding:0 2px}
.flrow{display:grid;grid-template-columns:132px 1fr 84px;gap:8px;align-items:center;
 padding:3px 0;border-radius:6px;cursor:pointer}
.flrow:hover{background:var(--pan2)}
.flrow.on{background:var(--pan2);box-shadow:inset 2px 0 0 var(--a1)}
.flrow .who{font-size:var(--f1);color:var(--tx2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.flrow .who i{font-style:normal;color:var(--mu2);margin-left:5px}
.flrow .lane{position:relative;height:16px;background:var(--pan2);border-radius:4px;overflow:hidden}
.flrow .lane .g{position:absolute;top:0;bottom:0;background:var(--pan3)}
.flrow .lane .p{position:absolute;top:2px;height:12px;width:3px;border-radius:2px;opacity:.92}
.flrow .meta{font-size:var(--f1);color:var(--mu);text-align:right;white-space:nowrap}
.flrow .meta b{color:var(--tx2);font-weight:600}
.fltip{position:fixed;z-index:210;pointer-events:none;background:var(--pan);border:1px solid var(--bd2);
 border-radius:8px;padding:7px 10px;font-size:var(--f1);box-shadow:0 6px 20px rgba(0,0,0,.45);white-space:nowrap}
@media (max-width:720px){
 .flhead,.flrow{grid-template-columns:96px 1fr 64px;gap:6px}
 .flrow .who,.flrow .meta{font-size:10.5px}
}

/* 전체화면: 지도는 카드 안쪽을 꽉 채운다 */
.fsbody>.fsbig#map0,.fsbody>.fsbig#map1{display:flex;flex-direction:column;gap:8px}
.fsbody>.fsbig .mapwrap{flex:1;min-height:0}
.fsbody .fsleg{margin-top:2px}
/* 화이트 테마에서도 오버레이가 배경색을 따른다 */
:root[data-theme="light"] .fsov{background:var(--bg)}

/* 표 안의 그룹 소계 줄 */
td b.grp{color:var(--tx)}
td b.grp i{font-style:normal;color:var(--mu2);font-weight:400;margin-left:6px;font-size:var(--f1)}

/* 전체화면 헤더: 제목 + 설명 + 안내 */
.fsbar .fshd{display:flex;align-items:baseline;gap:10px;min-width:0;max-width:70%}
.fsbar .fstitle{max-width:none;flex:0 1 auto}
.fsbar .fsdesc{color:var(--mu);font-size:var(--f2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsbar .fshint{text-align:right;padding-right:6px}
@media (max-width:900px){
 .fsbar .fshd{max-width:100%;flex-wrap:wrap;gap:2px 8px}
 .fsbar .fsdesc{font-size:11px}
}

/* 몇 줄 안 가려진 스크롤 영역은 캡을 풀어 전부 보여준다 */
.scrollbox.nocap{max-height:none !important;overflow:visible}

/* 파란 배경 위 글자는 항상 흰색 — 라이트 테마에서 어두운 남색이라 잘 안 보였다 */
.btn,.btn:hover,.seg button.on,.rangeseg button.on,.mapctl .seg button.on,
.loginbtn,.nav a.on{color:#fff}
.btn.g{color:var(--tx)}
:root[data-theme="light"] .btn{box-shadow:0 1px 2px rgba(37,99,235,.25)}

/* 라이트 테마 세부 대비 보정 */
:root[data-theme="light"] .worldmap .sea{fill:#eef2f7}
:root[data-theme="light"] .worldmap .land{fill:#dde5ee;stroke:#b9c6d4}
:root[data-theme="light"] .worldmap .adm1{stroke:#a9b8c9}
:root[data-theme="light"] .flrow .lane{background:#eef2f7}
:root[data-theme="light"] .flrow .lane .g{background:#dfe7f0}
:root[data-theme="light"] .fsov{background:var(--bg)}
:root[data-theme="light"] .fsbtn{background:var(--pan2);color:var(--mu)}
:root[data-theme="light"] .maptip,:root[data-theme="light"] .fltip{box-shadow:0 6px 20px rgba(16,24,40,.16)}
:root[data-theme="light"] .stp i{color:#fff}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c2ccd8;border-color:var(--pan)}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#aab7c6}
:root[data-theme="light"] *{scrollbar-color:#c2ccd8 transparent}

/* 도움말 링크 */
.doclink{color:var(--a1);text-decoration:none;white-space:nowrap;font-size:var(--f1)}
.doclink:hover{text-decoration:underline}

/* 버전·계정 구분 바 */
.splitbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-8px 0 16px;
 padding:8px 12px;background:var(--pan);border:1px solid var(--bd);border-radius:10px}
.splitbar .seg button{padding:5px 11px;font-size:var(--f2)}
.splitbar .lbl{color:var(--mu2)}
.splitbar .rngnote{color:var(--mu2);font-size:var(--f1);margin-left:4px}
.nosplit{margin-left:8px;font-size:10.5px;font-weight:400;color:var(--a3);
 border:1px solid var(--bd2);border-radius:20px;padding:1px 8px;white-space:nowrap}
@media (max-width:640px){
 .splitbar{gap:6px;padding:8px 10px} .splitbar .rngnote{width:100%;margin-left:0}
}

/* 카드가 쓰는 기간 배지 */
.pbadge{margin-left:auto;font-size:10.5px;font-weight:400;color:var(--mu2);
 border:1px solid var(--bd);border-radius:20px;padding:1px 9px;white-space:nowrap;flex:none}
.pbadge.fix{color:var(--a3);border-color:var(--a3)}
.card h3{padding-right:34px}
@media (max-width:640px){ .pbadge{font-size:9.5px;padding:1px 7px} }

/* 용어 도움말 */
.term{border-bottom:1px dashed var(--mu2);cursor:help;outline:none}
.term:hover,.term:focus{border-bottom-color:var(--a1);color:var(--tx2)}
.termtip{position:fixed;z-index:220;background:var(--pan);border:1px solid var(--bd2);border-radius:9px;
 padding:9px 12px;font-size:var(--f2);line-height:1.6;color:var(--tx2);
 box-shadow:0 8px 24px rgba(0,0,0,.4)}
:root[data-theme="light"] .termtip{box-shadow:0 8px 24px rgba(16,24,40,.16)}

/* 국가별 OS 비중 막대 */
.osbar{display:inline-block;width:86px;height:8px;border-radius:5px;overflow:hidden;
 background:var(--pan3);vertical-align:middle}
.osbar i,.osbar b{display:inline-block;height:8px;vertical-align:top}
.osbar i{background:#4dabf7}      /* Windows */
.osbar b{background:#51cf66}      /* macOS */
.osval{margin-left:7px;color:var(--mu);font-size:var(--f1)}

/* 스크롤 표: 머리글 고정 */
.scrollbox thead th{position:sticky;top:0;z-index:3;background:var(--pan);
 box-shadow:inset 0 -1px 0 var(--bd)}
.scrollbox table{border-collapse:separate;border-spacing:0}
:root[data-theme="light"] .scrollbox thead th{background:#fff}
/* 그룹 소계 줄도 살짝 구분 */
.scrollbox tbody tr:has(b.grp) td{background:var(--pan2)}

/* 상단 메뉴: 폭이 부족하면 메뉴만 가로 스크롤 (개요가 잘려 사라지던 문제) */
.nav .menu{display:flex;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;
 flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:1px}
.nav .menu::-webkit-scrollbar{display:none}
.nav .menu a{flex:0 0 auto}
.nav .sp{flex:0 0 auto}
/* 스캐너 보유 막대 (보유=파랑, 없음=회색) */
.osbar.scbar i{background:#4dabf7}
.osbar.scbar b{background:#868e96}

/* ===== 상단 바 2행 고정 (Scan for Clinics Insight 와 같은 배치) =====
   1행: 로고 ......... 환경정보 · 새로고침 · 테마 · 로그아웃
   2행: 메뉴 칩 (넘치면 가로 스크롤) */
.nav .in{flex-wrap:wrap;row-gap:9px}
.nav a.brand{order:1}
.nav .sp{order:2;flex:1 1 auto;min-width:0}
.nav .env{order:3;text-align:right}
.nav #reloadbtn{order:4}
.nav .themebtn{order:5;margin-left:0}
.nav .logoutbtn{order:6;margin-left:2px}
.nav .menu{order:9;flex:0 0 100%;width:100%;overflow-x:auto;overflow-y:hidden;
 flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.nav .menu::-webkit-scrollbar{display:none}
/* 동그란 아이콘 버튼 (새로고침·테마) 통일 */
.iconbtn,.themebtn{width:34px;height:34px;display:grid;place-items:center;flex:none;
 background:var(--pan);border:1px solid var(--bd);border-radius:9px;color:var(--mu);cursor:pointer;
 font-family:inherit;padding:0}
.iconbtn:hover,.themebtn:hover{background:var(--pan3);color:var(--tx);border-color:var(--bd2)}
.iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
 stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
 .nav .env{display:none}
 .iconbtn,.themebtn{width:32px;height:32px}
}

/* 오른쪽 버튼 묶음은 어떤 폭에서도 우측 정렬 — 스페이서에 의존하지 않는다 */
.nav .in>.sp{flex:1 1 auto !important;min-width:0 !important;display:block !important}
.nav #reloadbtn{margin-left:auto !important}
.nav .env{margin-left:auto}
.nav .env+#reloadbtn{margin-left:10px !important}

/* 하루 타임라인 범례: 클릭으로 앱 켜고 끄기 */
.legend span.lg{cursor:pointer;user-select:none;border-radius:6px;padding:2px 6px;margin:-2px 0;
  transition:opacity .12s,background .12s}
.legend span.lg:hover{background:var(--pan2)}
.legend span.lg:focus-visible{outline:2px solid var(--a1);outline-offset:1px}
.legend span.lg.off{opacity:.4}
.legend span.lg.off i{background:transparent !important;box-shadow:inset 0 0 0 2px var(--bd)}
.legend span.lg.off{text-decoration:line-through;text-decoration-thickness:1px}
.legend .lghint{color:var(--mu2);font-size:11px;margin-left:2px}
.legend .lghint a{color:var(--a1)}

/* ================= MIA (Medit Intelligence Assistant) ================= */
.nav .menu a.mia .navemo{font-size:14px;line-height:1;margin-right:5px}
.miacard{padding:16px 16px 14px}
.miahead .miatitle{font-size:16px;font-weight:700;color:var(--tx)}
.miahead .miatitle span{font-weight:500;color:var(--mu);font-size:12.5px}
.miahead .sub{color:var(--mu);font-size:var(--f1);margin-top:5px;line-height:1.7}
.miachips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.miachip{display:inline-block;padding:5px 10px;border:1px solid var(--bd);border-radius:999px;
  background:var(--pan2);color:var(--tx2);font-size:12px;cursor:pointer;user-select:none;
  transition:border-color .12s,color .12s,background .12s}
.miachip:hover{border-color:var(--a1);color:var(--a1)}
.miachip.sm{font-size:11px;padding:3px 8px}
.miallmrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--bd)}
.mialbl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.miabadge{font-size:11px;color:var(--a2)}
.mialog{margin-top:12px;max-height:min(62vh,620px);overflow:auto;padding:4px 2px}
.miarow{display:flex;justify-content:flex-start;margin:8px 0}
.miarow.me{justify-content:flex-end}
.miabub{max-width:86%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.7;
  word-break:break-word;overflow-wrap:anywhere;background:var(--pan2);color:var(--tx);
  border:1px solid var(--bd)}
.miabub.me{background:var(--a1);border-color:var(--a1);color:#fff}
.miabub.me b{color:#fff}
.miabub .mut{color:var(--mu2);font-size:11.5px}
.miafol{margin-top:9px;font-size:11px;color:var(--mu2)}
.miafolrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.miainrow{display:flex;gap:8px;margin-top:12px}
.miainrow .inp{flex:1;min-width:0}
#mia-privacy{margin-top:11px}
@media (max-width:640px){.miabub{max-width:92%;font-size:13px}.mialog{max-height:58vh}}

/* ================= 공통 모달 ================= */
.amod{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
 display:none;align-items:center;justify-content:center;padding:18px}
.amod.on{display:flex}
.amodbox{background:var(--pan);border:1px solid var(--bd);border-radius:14px;
 width:min(860px,100%);max-height:min(86vh,860px);display:flex;flex-direction:column;
 box-shadow:0 18px 60px rgba(0,0,0,.45)}
.amodhd{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--bd)}
.amodhd .amodt{font-size:14.5px;color:var(--tx)}
.amodhd .amods{font-size:12px}
.amodx{margin-left:auto;background:none;border:0;color:var(--mu);font-size:22px;line-height:1;
 cursor:pointer;padding:0 4px;border-radius:6px}
.amodx:hover{color:var(--tx);background:var(--pan2)}
.amodbody{padding:14px;overflow:auto;-webkit-overflow-scrolling:touch}
.amodbody.kpidet .tblwrap{margin-top:2px}
.amodbody .scrollbox{max-height:min(48vh,420px)}
@media (max-width:640px){.amod{padding:0}.amodbox{width:100%;max-height:100vh;border-radius:0;border:0}}

/* ================= MIA 플로팅 버튼 · 캐릭터 =================
   캐릭터는 SVG 라 테마 색을 그대로 따라간다.
   가만히 있지 않고 살짝 떠 있다가 8초마다 '데이터를 읽는' 동작을 한다.
   prefers-reduced-motion 이면 전부 멈춘다. */
.miafab{position:fixed;right:18px;bottom:18px;z-index:110;display:inline-flex;align-items:center;gap:7px;
 padding:7px 15px 7px 8px;border-radius:999px;border:1px solid var(--bd);cursor:pointer;
 background:var(--pan);color:var(--tx);font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;
 box-shadow:0 8px 24px rgba(0,0,0,.32);transition:transform .16s,border-color .16s,box-shadow .16s;
 -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.miafab:hover{transform:translateY(-3px);border-color:var(--a1);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.miafab:active{transform:translateY(-1px) scale(.98)}
.miafab:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.miafab .mascot{position:relative;width:34px;height:34px;flex:0 0 34px;display:block}
.miafab .pulse{position:absolute;left:9px;top:8px;width:32px;height:32px;border-radius:50%;
 border:2px solid var(--a1);opacity:0;pointer-events:none;animation:miapulse 3.4s ease-out infinite}
@keyframes miapulse{0%{transform:scale(.9);opacity:.4}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ---- 캐릭터 자체 ---- */
.miasvg{display:block;width:100%;height:100%;overflow:visible}
.miasvg .mcap{fill:var(--a1)}
.miasvg .mvisor{fill:#0e1526;opacity:.94}
.miasvg .meye{fill:#8fd0ff}
.miasvg .mbar{fill:var(--a1);transform-box:fill-box;transform-origin:50% 100%}
.miasvg .mbar.b2{fill:#5aa9ff}
.miasvg .mbar.b3{fill:#8fd0ff}
.miasvg .mspark{fill:#ffd43b;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
:root[data-theme="light"] .miasvg .mcap{fill:#4c6ef5}
/* 떠 있기 · 눈 깜빡임 · 막대 리듬 */
.miasvg .mbody{animation:miabob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 70%}
.miasvg .meyes{animation:miablink 5.4s infinite;transform-box:fill-box;transform-origin:50% 50%}
.miasvg .mbar.b1{animation:miabar 1.6s ease-in-out infinite}
.miasvg .mbar.b2{animation:miabar 1.6s ease-in-out .22s infinite}
.miasvg .mbar.b3{animation:miabar 1.6s ease-in-out .44s infinite}
@keyframes miabob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2px)}}
@keyframes miablink{0%,93%,100%{transform:scaleY(1)}95.5%,97%{transform:scaleY(.1)}}
@keyframes miabar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
/* 8초마다: 데이터를 읽는 듯 막대가 빨라지고 반짝임이 뜬다 */
.miafab.think .miasvg .mbar{animation-duration:.42s}
.miafab.think .miasvg .mspark{animation:miaspark 1.9s ease-in-out}
.miafab.think .miasvg .mbody{animation:miabob 1.9s ease-in-out, miatilt 1.9s ease-in-out}
.miafab.think{border-color:var(--a1)}
@keyframes miaspark{0%,100%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.15)}60%{opacity:.7;transform:scale(1)}}
@keyframes miatilt{0%,100%{rotate:0deg}30%{rotate:-6deg}65%{rotate:5deg}}
@media (prefers-reduced-motion: reduce){
 .miasvg *,.miafab .pulse{animation:none !important}
 .miafab .pulse{display:none}
}
@media (max-width:640px){
 .miafab{right:12px;padding:6px 8px}
 .miafab .t{display:none}
 .miafab .pulse{left:8px;top:7px}
}
/* 처음 방문 말풍선 */
.miatip{position:fixed;right:20px;bottom:74px;z-index:112;max-width:min(300px,calc(100vw - 40px));
 padding:11px 30px 11px 13px;border-radius:12px;border:1px solid var(--a1);background:var(--pan);
 color:var(--tx);font-size:12.5px;line-height:1.65;cursor:pointer;
 box-shadow:0 10px 28px rgba(0,0,0,.34);animation:miatipin .28s ease-out both;transition:opacity .5s}
.miatip.fade{opacity:0}
.miatip .mut{font-size:11.5px}
.miatip .x{position:absolute;right:6px;top:5px;background:none;border:0;color:var(--mu);font-size:17px;
 line-height:1;cursor:pointer;padding:2px 5px;border-radius:6px}
.miatip .x:hover{color:var(--tx);background:var(--pan2)}
.miatip::after{content:'';position:absolute;right:26px;bottom:-7px;width:12px;height:12px;
 background:var(--pan);border-right:1px solid var(--a1);border-bottom:1px solid var(--a1);
 transform:rotate(45deg)}
@keyframes miatipin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:640px){.miatip{right:12px;bottom:64px}}

/* MIA 소개 (창 안) */
.miaabout{margin:-2px 0 9px;font-size:11.5px;border:1px solid var(--bd);border-radius:9px;
 background:var(--pan2);overflow:hidden}
.miaabout summary{cursor:pointer;padding:7px 10px;font-weight:700;color:var(--tx2);list-style:none}
.miaabout summary::-webkit-details-marker{display:none}
.miaabout summary::before{content:'▸ ';color:var(--mu)}
.miaabout[open] summary::before{content:'▾ '}
.miaabout[open] summary{border-bottom:1px solid var(--bd)}
.miaabout .ab{padding:9px 11px 10px;color:var(--mu);line-height:1.75;max-height:230px;overflow:auto}
.miaabout .ab p{margin:0 0 7px}
.miaabout .ab p:last-child{margin:0}
.miaabout .ab b{color:var(--tx2)}
.miaabout .ab a{color:var(--a1)}

/* 창 헤더의 작은 캐릭터 */
.miapane .mpt{display:inline-flex;align-items:center;gap:6px}
.miapane .mpt .miasvg{width:20px;height:20px;flex:0 0 20px}
.miapane .mpt .mpn{font-weight:700}
.amodbody.mia{padding:12px 14px 14px}
.amodbody.mia .mialog{max-height:min(50vh,460px)}
.miapriv{margin-top:11px;font-size:11.5px;line-height:1.7;color:var(--mu2);
 border-top:1px solid var(--bd);padding-top:9px}

/* MIA 답변 레이아웃 — 좁은 창에서도 라벨과 수치가 서로 밀리지 않게 그리드로 고정한다.
   flex + margin-auto 로 밀면 긴 이름이 들어올 때 줄이 어긋난다. */
.miabub{max-width:96%}
.miabub.me{max-width:86%}
.miabub .miah{font-size:13px;font-weight:700;color:var(--tx);margin:2px 0 8px;
 display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;line-height:1.45}
.miabub .miah:not(:first-child){margin-top:13px;padding-top:10px;border-top:1px solid var(--bd)}
.miabub .miah span{font-weight:500;font-size:11px;color:var(--mu2);line-height:1.5}

/* 값 표 — 왼쪽 라벨 / 오른쪽 수치, 보조설명은 그 아래 오른쪽 정렬 */
.miabub .miakv{display:grid;gap:0}
.miabub .miakv>div{display:grid;grid-template-columns:minmax(74px,auto) 1fr;
 column-gap:10px;row-gap:1px;align-items:baseline;padding:5px 0;
 border-bottom:1px dotted var(--bd)}
.miabub .miakv>div:last-child{border-bottom:0}
.miabub .miakv .k{grid-column:1;color:var(--mu);font-size:11.5px;line-height:1.5}
.miabub .miakv .v{grid-column:2;justify-self:end;text-align:right;font-weight:700;font-size:13px;
 line-height:1.5;word-break:keep-all}
.miabub .miakv .s{grid-column:1 / -1;justify-self:end;text-align:right;color:var(--mu2);
 font-size:11px;line-height:1.55;margin-top:1px}

/* 순위 목록 — 번호 / 이름 / 수치 3열 고정, 보조설명은 이름 열 아래로 */
.miabub .miarank{display:grid;gap:0}
.miabub .miarank>div{display:grid;grid-template-columns:15px minmax(0,1fr) auto;
 column-gap:9px;row-gap:1px;align-items:baseline;padding:5px 0;
 border-bottom:1px dotted var(--bd)}
.miabub .miarank>div:last-child{border-bottom:0}
.miabub .miarank .n{grid-column:1;color:var(--mu2);font-size:10.5px;text-align:right;line-height:1.6}
.miabub .miarank .t{grid-column:2;font-size:12.5px;line-height:1.55;word-break:break-word}
.miabub .miarank .v{grid-column:3;justify-self:end;text-align:right;font-weight:700;font-size:12.5px;
 line-height:1.55;white-space:nowrap}
.miabub .miarank .s{grid-column:2 / -1;color:var(--mu2);font-size:11px;line-height:1.55}

.miabub .mianote{margin-top:10px;color:var(--mu2);font-size:11.5px;line-height:1.7}
.miabub .mianote:first-child{margin-top:0}
.miabub .mialine{margin:4px 0;font-size:13px;line-height:1.7}
.miabub .miafol{margin-top:11px;padding-top:9px;border-top:1px solid var(--bd);
 font-size:11px;color:var(--mu2)}
.miabub .miafolrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
/* 아주 좁을 때(폰 시트)는 라벨 열을 더 줄인다 */
@media (max-width:420px){
 .miabub .miakv>div{grid-template-columns:minmax(62px,auto) 1fr}
 .miabub .miakv .k{font-size:11px}
 .miabub .miarank .t{font-size:12px}
}

/* ================= KPI 박스 클릭 ================= */
.kpi.kpiC{cursor:pointer;position:relative;transition:border-color .12s,transform .12s}
.kpi.kpiC:hover{border-color:var(--a1);transform:translateY(-1px)}
.kpi.kpiC:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
.kpi .kpimore{position:absolute;right:9px;top:8px;font-size:10px;color:var(--mu2);
 border:1px solid var(--bd);border-radius:999px;padding:1px 6px;opacity:.8}
.kpi.kpiC:hover .kpimore{color:var(--a1);border-color:var(--a1)}

/* 상태줄 */
.statusline .sldiv{display:inline-block;width:1px;height:10px;background:var(--bd);margin:0 9px;
 vertical-align:middle}
.statusline .slrow{margin-top:5px;line-height:1.75}

/* 스크롤 표 안의 가로 스크롤 래퍼가 머리글 고정을 깨뜨리지 않게 */
.scrollbox>.tblwrap{overflow:visible}

.statusline .slchip{display:inline-block;margin-right:7px;padding:1px 7px;border-radius:999px;
 border:1px solid var(--bd);background:var(--pan2);color:var(--tx2);font-size:10.5px;font-weight:600;
 vertical-align:1px}
.statusline .slnote{border-bottom:1px dotted var(--mu);cursor:help;color:var(--mu)}

/* ================= 범례: 눌러서 Show/Hide ================= */
.legend .lgi{display:inline-flex;align-items:center;gap:0;font:inherit;font-size:var(--f1);
 color:var(--mu);background:none;border:0;border-radius:6px;padding:4px 7px;margin:-2px 0;
 cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
 min-height:30px;transition:opacity .12s,background .12s,color .12s}
.legend.tap{gap:4px}
.legend .lgi:hover{background:var(--pan2);color:var(--tx2)}
.legend .lgi:active{background:var(--pan3)}
.legend .lgi:focus-visible{outline:2px solid var(--a1);outline-offset:1px}
.legend .lgi>i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;flex:0 0 9px}
.legend .lgi.off{opacity:.42;text-decoration:line-through;text-decoration-thickness:1px}
.legend .lgi.off>i{background:transparent !important;box-shadow:inset 0 0 0 2px var(--bd)}
/* 폰에서는 손가락으로 누를 수 있게 여유를 더 준다 */
@media (max-width:720px){
 .legend .lgi{padding:6px 9px;min-height:34px;font-size:11.5px}
 .legend.tap{gap:5px 6px}
}

/* ================= MIA 떠 있는 창 (배경을 덮지 않는다) =================
   구조: 헤더 고정 · 대화만 스크롤 · 입력줄은 항상 아래에 붙어 있음
   크기: 좌상단 손잡이로 조절, ⤢ 로 크게/작게, 마지막 크기를 기억한다 */
.miapane{position:fixed;right:18px;bottom:74px;z-index:115;
 width:min(500px,calc(100vw - 36px));height:min(620px,calc(100vh - 130px));
 display:none;flex-direction:column;background:var(--pan);border:1px solid var(--bd);
 border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.42);overflow:hidden}
.miapane.on{display:flex}
.miapane.max{width:min(1040px,calc(100vw - 36px)) !important;height:calc(100vh - 110px) !important}
.miapane.dragging,.miapane.sizing{transition:none;opacity:.97;user-select:none}
.miapane .mpgrip{position:absolute;left:0;top:0;width:22px;height:22px;cursor:nwse-resize;z-index:3;
 background:linear-gradient(135deg,var(--mu) 0 2px,transparent 2px 5px,var(--mu) 5px 7px,transparent 7px);
 opacity:.35;border-top-left-radius:14px}
.miapane .mpgrip:hover{opacity:.8}
.miapane .mphd{position:relative;display:flex;align-items:center;gap:4px;padding:9px 10px 9px 26px;
 flex:0 0 auto;border-bottom:1px solid var(--bd);cursor:move;user-select:none;background:var(--pan2);
 touch-action:none}
.miapane .mpt{font-size:12.5px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.miapane .mpt .mut{font-weight:500;font-size:11px}
.miapane .mpb{background:none;border:0;color:var(--mu);font-size:15px;line-height:1;cursor:pointer;
 padding:3px 7px;border-radius:6px;min-height:28px;-webkit-tap-highlight-color:transparent}
.miapane .mpb#mia-max{margin-left:auto}
.miapane .mpb:hover{color:var(--tx);background:var(--pan3)}
/* 본문: 위(예시·설정) 고정 → 대화 스크롤 → 입력줄 고정 */
.miapane .mpbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
 padding:10px 12px 10px;overflow:hidden}
.miapane.mini{height:auto !important}
.miapane.mini .mpbody{display:none}
.miapane .miahead{flex:0 0 auto}
.miapane .miahead .sub{font-size:11.5px;line-height:1.6;margin-bottom:7px}
.miapane .miachips{max-height:64px;overflow:auto;margin-top:0}
.miapane .miallmrow{margin-top:8px;padding-top:8px}
.miapane .mialog{flex:1 1 auto;min-height:80px;max-height:none;margin-top:9px;
 overflow:auto;-webkit-overflow-scrolling:touch}
.miapane .miainrow{flex:0 0 auto;margin-top:9px}
.miapane .miainrow .inp{min-height:38px}
.miapane .miainrow .btn{white-space:nowrap}
.miapane .miapriv{flex:0 0 auto;margin-top:8px;padding-top:7px;font-size:10.5px;
 border-top:1px solid var(--bd);color:var(--mu2)}
.miapane .miapriv summary{cursor:pointer;color:var(--mu);list-style:none}
.miapane .miapriv summary::-webkit-details-marker{display:none}
.miapane .miapriv summary::before{content:'\24D8 ';opacity:.7}
.miapane .miapriv[open] summary{margin-bottom:4px}
/* 폰: 아래쪽 시트 — 헤더를 위아래로 끌어 높이를 바꾼다 */
@media (max-width:720px){
 .miapane{left:0;right:0;bottom:0;width:auto;height:min(72vh,600px);
  border-radius:14px 14px 0 0;border-bottom:0}
 .miapane.max{width:auto !important;height:92vh !important}
 .miapane .mpgrip{display:none}
 .miapane .mphd{padding:13px 12px 11px;cursor:ns-resize}
 .miapane .mphd::after{content:'';position:absolute;left:50%;top:5px;width:36px;height:3px;
  margin-left:-18px;border-radius:2px;background:var(--bd)}
 .miapane .mpbody{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
 .miafab{bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* 계정 관리 화면 */
.btn.sm{padding:4px 9px;font-size:11.5px;min-height:28px}
.sel.sm{padding:3px 6px;font-size:11.5px;min-height:26px}
.loginlinks{margin-top:11px;text-align:center;font-size:12px}
.loginlinks a{color:var(--a1);text-decoration:none}
.loginlinks a:hover{text-decoration:underline}

/* 추세 요약 칩 */
.trgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:11px}
.trc{border:1px solid var(--bd);border-radius:10px;padding:8px 10px;background:var(--pan2)}
.trc .l{font-size:11px;color:var(--mu)}
.trc .v{font-size:16px;font-weight:700;margin-top:1px}
.trc .d{font-size:10.5px;color:var(--mu2);margin-top:2px}
.trc.up .v{color:var(--a2)} .trc.dn .v{color:var(--a4)} .trc.flat .v{color:var(--tx2)}

/* 이상 징후 카드 */
.alcard{margin-bottom:14px}
.alrow{display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:start;padding:9px 0;
 border-bottom:1px solid var(--bd)}
.alrow:last-of-type{border-bottom:0}
.alsev{justify-self:start;font-size:10.5px;font-weight:700;color:#fff;padding:2px 8px;border-radius:999px;
 background:var(--mu)}
.alrow.crit .alsev{background:var(--a4)} .alrow.warn .alsev{background:var(--a7)}
.alrow.info .alsev{background:var(--a1)}
.altx b{font-size:13px}
.altx .ald{color:var(--mu);font-size:12px;line-height:1.65;margin-top:2px}
.altx .alac{color:var(--a1);font-size:11.5px;margin-top:3px}
.allow{margin-top:8px;border-top:1px solid var(--bd);padding-top:7px}
.allow summary{cursor:pointer;font-size:11.5px;color:var(--mu);list-style:none}
.allow summary::-webkit-details-marker{display:none}
.allow summary::before{content:'▸ '}
.allow[open] summary::before{content:'▾ '}

/* 메일 발송 확인 창 */
.amodbody.askmail{max-width:520px}
.askrow{display:grid;grid-template-columns:82px 1fr;gap:10px;padding:6px 0;
 border-bottom:1px dotted var(--bd);font-size:12.5px;align-items:baseline}
.askrow:last-of-type{border-bottom:0}
.askrow .k{color:var(--mu);font-size:11.5px}
.askrow .v{color:var(--tx)}
.askbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* 관리자 전용 메뉴 구분 */
.nav .menu a.adminonly{border-color:var(--a7)}
.nav .menu a.adminonly svg{color:var(--a7)}
.nav .menu a.adminonly.on{border-color:var(--a7);box-shadow:inset 0 0 0 1px var(--a7)}
.adbadge{margin-left:5px;font-size:9.5px;font-weight:700;letter-spacing:.02em;
 padding:1px 5px;border-radius:999px;background:var(--a7);color:#1a1a1a;vertical-align:1px}
.adnote{display:inline-block;margin-right:6px;font-size:10.5px;font-weight:700;padding:1px 7px;
 border-radius:999px;background:var(--a7);color:#1a1a1a}

/* 앱 전환 표기 — 코드 대신 이름을 쓰고, 좁은 칸에서 줄이 넘어가도 화살표가 붙어 보이게 */
.apn{display:inline-block;font-size:.86em;line-height:1.3;word-break:keep-all}
.apar{display:inline-block;margin:0 .32em;opacity:.55;font-weight:400}

/* 그래프를 다시 그리는 동안 덮어 두는 로딩 표시.
   숫자가 바뀌는 동안 옛 그래프가 남아 있으면 '멈춘 것'처럼 보이기 때문이다. */
.busywrap{position:relative}
.busyveil{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  gap:9px;background:color-mix(in srgb,var(--bg1) 78%,transparent);backdrop-filter:blur(1.5px);
  border-radius:12px;font-size:12.5px;color:var(--mu);font-weight:500}
.busyveil .spin{width:15px;height:15px;border-width:2px}
.busybar{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:9px 12px;
  border:1px solid var(--ln);border-radius:9px;background:var(--bg2);font-size:12.5px;color:var(--mu)}

/* 제품처럼 항목이 많은 선택지는 한 줄에 안 들어간다 — 감기게 두고 고른 것만 강조한다 */
.seg.chips{flex-wrap:wrap;max-width:100%;row-gap:4px}
.seg.chips button{font-size:11.5px;padding:4px 9px}
.seg.chips button .n{opacity:.55;margin-left:4px;font-weight:400}
.seg.chips button.on .n{opacity:.8}

/* 앱 이름 표기 — 아이콘·이름·배지를 한 줄로 묶는다 */
.appnm{display:inline-flex;align-items:center;gap:6px;min-width:0}
.appnm>span:not([class]){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appic{flex:none;border-radius:4px;object-fit:contain;vertical-align:middle}
.appic.ph{display:inline-flex;align-items:center;justify-content:center;color:#0d1117;
  font-size:10px;font-weight:800;border-radius:5px}
.atag{flex:none;font-size:9.5px;font-weight:700;line-height:1;padding:3px 5px;border-radius:4px;
  letter-spacing:.02em;white-space:nowrap}
.atag.dead{background:#e0313122;color:#ff8787;text-decoration:line-through}
.atag.paid{background:#f59f0033;color:#ffc078}
.atag.bundle{background:#4c6ef533;color:#91a7ff}

/* 표에서 방금 고른 줄 — 화면이 움직이지 않으니 어디를 눌렀는지 표시가 필요하다 */
tbody tr.rowsel{background:color-mix(in srgb,var(--a1) 14%,transparent);
  box-shadow:inset 3px 0 0 var(--a1)}

/* 표 안의 긴 메모 — 한 줄로 줄이고 전체는 title 로 (표가 밀리지 않게) */
.clip{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}
@media(max-width:900px){.clip{max-width:150px}}
.rowbtns{display:inline-flex;gap:5px;white-space:nowrap}
.iconbtn.sm{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.iconbtn.sm.danger:hover{color:var(--a4);border-color:var(--a4)}

/* 3rd Party 표시 — 구분만 되면 되는 정보라 눈에 튀지 않게 (경고색을 쓰지 않는다) */
.pill.third{background:#7f93ad26;color:#adbdd0;border-color:#7f93ad55}

/* ---- 표 머리글 고정 (페이지 스크롤) ----
   내비 높이만큼 내려 붙여야 스크롤 중에도 머리글이 보인다.
   --navh 는 스크립트가 실제 높이로 갱신한다(줄바꿈되면 높이가 달라진다).
   단, 고정은 긴 표(.tallbox — tbl() 이 20줄 이상일 때 붙인다) 안에서만 건다.
   짧은 표에 걸면 머리글이 한 줄을 가리고 지나간 줄이 머리글 위에 남아 순서가 어긋나 보인다.
   .scrollbox·모달 안의 표는 자기 스크롤 컨테이너를 기준으로 붙으므로 항상 0 을 유지한다. */
:root{--navh:58px}
/* 페이지 스크롤에는 머리글을 고정하지 않는다 — 머리글이 표 밖으로 떠다니며
   지나간 줄 위에 얹히거나 다음 카드까지 침범한다. */
table th{position:static;top:auto}
/* 긴 표(.tallbox)는 자기 상자 안에서 세로로 스크롤하고, 머리글은 그 상자에만 붙는다 */
.tallbox{max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch}
/* 이미 스크롤하는 상자(모달 본문·.scrollbox) 안에서는 .tallbox 를 끈다.
   스크롤 영역이 겹치면 '전체 보기'를 눌러도 안쪽 상자가 그대로 잘려 있어
   표·버튼·안내 문구가 서로 어긋나 보인다 (국가별 사용 모달에서 그랬다). */
.scrollbox .tallbox, .amodbody .tallbox, .mbody .tallbox{max-height:none;overflow:visible}
.tallbox>table{border-collapse:separate;border-spacing:0}
.tallbox thead th{position:sticky;top:0;z-index:3;background:var(--pan);
 box-shadow:inset 0 -1px 0 var(--bd)}
:root[data-theme="light"] .tallbox thead th{background:#fff}
.scrollbox table th, .amodbody table th, .mbody table th{position:sticky;top:0;z-index:3}
th{box-shadow:inset 0 -1px 0 var(--bd)}
@media(max-width:640px){:root{--navh:52px}.tallbox{max-height:min(56vh,460px)}}

/* 아이콘 대체 글자는 CSS 로 그린다 — 표를 정렬하거나 복사할 때 글자가 섞이지 않게 */
.appic.ph::before{content:attr(data-ch)}
/* 아이폰에서 표 머리글 고정이 화면을 밀어 보이는 문제:
   좁은 화면에서는 페이지 스크롤용 고정을 끈다(스크롤 상자 안은 그대로 둔다). */
@media(max-width:768px){
  .scrollbox table th{position:sticky;top:0}
}

/* ---- 법인(Region) 선택 — 상단 바 오른쪽 드롭다운 ----
   한 번 정해 놓고 계속 보는 값이라 기간처럼 한 줄을 차지할 이유가 없다.
   단추에는 현재 값만 적고 목록은 눌렀을 때만 편다. */
/* 법인 단추는 2행(메뉴 줄)의 맨 왼쪽 — 로고 칸 바깥이다.
   1행(로고·오른쪽 버튼)에는 손대지 않아 로고가 원래 자리 그대로 있는다. */
.navrow2{order:9;flex:0 0 100%;width:100%;display:flex;align-items:center;gap:8px;min-width:0}
.navrow2 .menu{order:2;flex:1 1 auto;width:auto;min-width:0}
.regionpick{position:relative;flex:none;order:1}
.regionpick[hidden]{display:none}
.rpbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px;
 border:1px solid var(--bd);border-radius:8px;background:var(--pan2);color:var(--tx);
 font-size:var(--f1);cursor:pointer;max-width:210px}
.rpbtn:hover{border-color:var(--mu)}
.rpbtn.on{border-color:#4dabf7;color:#8ec5ff}
.rpbtn svg{width:14px;height:14px;flex:none;stroke-width:1.7;fill:none}
.rpbtn .cv{width:12px;height:12px;opacity:.7}
.rpbtn .rplab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 목록은 <body> 바로 밑에 붙는다 (상단 바의 backdrop-filter 가 fixed 의 기준을 가로채서,
   그 안에 두면 아이폰에서 시트가 상단 바에 갇힌다). 위치는 스크립트가 잡아 준다. */
/* z-index 는 MIA 창(.miapane 115)보다 위, 모달(.amod 120)보다 아래로 둔다.
   전에는 80 이라 아이폰에서 아래 시트가 MIA 버튼(110) 밑에 깔려 겹쳐 보였다. */
.rpmenu{position:fixed;z-index:117;width:266px;
 max-height:min(70vh,470px);overflow-y:auto;background:var(--pan);border:1px solid var(--bd);
 border-radius:10px;padding:5px;box-shadow:0 12px 34px rgba(0,0,0,.45);
 -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rpmenu[hidden]{display:none}
.rpgrp{padding:7px 9px 3px;font-size:var(--f1);color:var(--mu);font-weight:600;
 border-top:1px solid var(--bd);margin-top:3px}
.rpmenu .rpgrp:first-child{border-top:0;margin-top:0}
/* 모든 줄을 정확히 같은 높이로 — 글자가 접히면 줄마다 높이가 달라져 들쭉날쭉해 보인다 */
.rpitem{display:flex;align-items:center;gap:6px;width:100%;height:30px;padding:0 9px;border:0;
 border-radius:7px;background:transparent;color:var(--tx);font-size:var(--f2);
 line-height:1;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.rpitem.sub{padding-left:20px}
.rpitem:hover{background:var(--pan2)}
.rpitem.on{background:#4dabf722;color:#8ec5ff}
.rpitem .nm{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
/* 한글 이름은 영문 바로 옆에 붙인다. 오른쪽 끝으로 밀면(margin-left:auto)
   'Korea ················ 한국' 처럼 가운데가 텅 비어 두 줄이 따로 노는 것처럼 보인다. */
.rpitem .mut{flex:0 1 auto;font-size:var(--f1);overflow:hidden;text-overflow:ellipsis}
.rpitem .tick{margin-left:auto;padding-left:6px;color:#4dabf7;flex:none}
.rpfoot{padding:9px;margin-top:5px;border-top:1px solid var(--bd);
 font-size:var(--f1);color:var(--mu);line-height:1.6}
.rpscrim{display:none}

/* ---- 아이폰 등 좁은 화면 ----
   구석에 뜨는 작은 목록은 손가락으로 고르기 어렵고, 19개가 들어가면 화면 밖으로 나간다.
   그래서 아래에서 올라오는 시트로 바꾸고 항목을 손가락 크기(42px)로 키운다. */
@media(max-width:640px){
  .rpbtn{max-width:none;height:32px;padding:0 10px;font-size:var(--f2)}
  .rpbtn .rplab{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* !important — 넓은 화면용 좌표를 스크립트가 인라인으로 넣기 때문에 여기서 덮어써야 한다 */
  .rpmenu{left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:auto!important;max-height:76vh;border-radius:15px 15px 0 0;border-bottom:0;
    padding:6px 8px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 34px rgba(0,0,0,.55);z-index:117}
  /* 시트 위쪽 손잡이 — 아래에서 올라온 창이라는 것을 알려 준다 */
  .rpmenu::before{content:'';display:block;width:38px;height:4px;border-radius:2px;
    background:var(--bd2,#3a4250);margin:4px auto 8px}
  .rpitem{height:40px;padding:0 12px;font-size:var(--f3)}
  .rpitem.sub{padding-left:26px}
  .rpitem .mut{font-size:var(--f2)}
  .rpgrp{padding:9px 12px 4px;font-size:var(--f2)}
  .rpfoot{padding:11px 12px;font-size:var(--f2)}
  /* 시트가 열린 동안 뒤 화면 고정 — iOS 는 overflow:hidden 만으로는 안 멈춘다 */
  body.rp-lock{overflow:hidden;touch-action:none}
  /* MIA 는 오른쪽 아래 고정이라 시트와 정확히 겹친다 — 시트가 열린 동안 감춘다 */
  body.rp-lock .miafab,
  body.rp-lock .miatip{display:none}
  body.rp-lock .miapane{visibility:hidden}
  /* 시트 뒤를 덮어 바깥을 누르면 닫히는 것이 눈에 보이게 한다 */
  .rpscrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:116}
  .rpscrim[hidden]{display:none}
}

/* 받는 사람 고르기 — 주소를 손으로 적지 않고 등록 계정에서 체크로 고른다 */
.whobox{display:flex;flex-wrap:wrap;gap:7px;padding:10px;border:1px solid var(--bd);
 border-radius:9px;background:var(--pan2);max-height:190px;overflow:auto}
.whochip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
 border:1px solid var(--bd);background:var(--pan);color:var(--tx2);font-size:var(--f2);cursor:pointer}
.whochip:hover{border-color:var(--mu)}
.whochip.on{border-color:#4dabf7;background:#4dabf722;color:#8ec5ff}
.whochip input{accent-color:#4dabf7;margin:0}

/* 그래프의 세로 표시선 목록 — 선 위에는 번호만 찍고 이름은 여기에 적는다.
   같은 달에 여러 정책이 몰리면 그래프 안 글자가 겹쳐 못 읽었다.
   칩을 누르면 그 선만 숨는다(선택은 새로고침해도 유지된다). */
.evchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.evchip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:13px;
 border:1px solid var(--bd);background:var(--pan2);color:var(--tx);font-size:var(--f1);
 cursor:pointer;line-height:1.5}
.evchip:hover{border-color:var(--mu)}
.evchip .no{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
 border-radius:50%;color:#0d0d0f;font-weight:700;font-size:10px;flex:none}
.evchip.off{opacity:.42;text-decoration:line-through}
.evchip.off .no{filter:grayscale(1)}
.evchip.act{padding:3px 10px;color:var(--mu)}

/* 추세 분석 창 — 분석 도구처럼 크게 본다 */
.amodbody.trendmodal{max-width:none}
.trdbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.trdkpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:10px 0}
.trdkpi .kpi{padding:9px 11px}
.trdchart{height:min(52vh,460px);position:relative}
.trdchart canvas{width:100%!important;height:100%!important}
@media(max-width:640px){.trdchart{height:44vh}.trdkpi{grid-template-columns:1fr 1fr}}
.trendbtn{margin-left:auto}

/* 아주 좁은 화면(380px 이하)에서는 KPI 를 한 줄에 하나씩.
   위쪽 380px 블록이 뒤의 400px 블록 두 곳에 덮여 무효였다 — 맨 뒤에서 다시 잡는다. */
@media (max-width:380px){ .kpis{grid-template-columns:1fr} }