/* datalab-naver.css — 네이버 스토어 순위표 스타일
 * naver-top-store build.py 가 조각(naver-rank-content.html)에 매일 반복 포함하던 CSS 를
 * 정적 파일로 분리한 것. 모든 규칙은 #nvrank 아래로 스코프되어 사이트 스타일과 충돌하지 않는다.
 * 라이트 전용 + body.dark 팔레트는 본사 사이트용 보정(FRAG_TUNE)까지 포함한 상태. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
#nvrank{
  --bg:#F7F7F8; --panel:#FFFFFF; --ink:#171719; --ink2:#70737C; --line:#EAEBEC;
  --acc:#0066FF; --acc-text:#0054D1; --acc-soft:#EAF2FE; --tint:#F7FBFF; --badge-ink:#FFFFFF;
  --up:#DE3024; --down:#005EEB;
}
#nvrank *{box-sizing:border-box}
#nvrank{margin:0;background:var(--bg);color:var(--ink);
  font-family:Pretendard,"Pretendard JP","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  line-height:1.55}
#nvrank .cnchd{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid var(--line)}
#nvrank .cnchd-in{max-width:1200px;margin:0 auto;height:80px;padding:0 40px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
#nvrank .cnclogo{display:block;flex:none;width:240px;height:40px;
  background:url(https://coolncool.com/images/logo.svg) no-repeat 0 0/100% 100%}
#nvrank .cncnav{display:flex;align-items:center}
#nvrank .cncnav a{display:flex;align-items:center;height:80px;padding:0 10px;color:var(--ink);opacity:.8;
  font-weight:600;font-size:15.5px;text-decoration:none;white-space:nowrap}
#nvrank .cncnav a:hover, #nvrank .cncnav a:focus-visible{opacity:1}
#nvrank .cncnav a.on{opacity:1;color:var(--acc-text);font-weight:800}
#nvrank .hero{background:linear-gradient(135deg,#0066FF 0%,#0054D1 70%,#003E9C 100%);color:#FFFFFF}
#nvrank .hwrap{max-width:1200px;margin:0 auto;padding:24px 20px 30px}
#nvrank .eyebrow{font-size:12px;letter-spacing:.14em;color:#C9DEFE;font-weight:700;text-transform:uppercase;margin:0}
#nvrank h1{font-size:clamp(24px,4.4vw,34px);font-weight:900;margin:6px 0 8px;letter-spacing:-.02em;text-wrap:balance;color:#FFFFFF}
#nvrank .sub{color:#EAF2FE;opacity:.92;font-size:14.5px;margin:0}
#nvrank .wrap{max-width:1200px;margin:0 auto;padding:26px 20px 40px}
#nvrank .tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
#nvrank .tile .k{font-size:12px;color:var(--ink2);letter-spacing:.04em}
#nvrank .sect{font-size:12px;color:var(--ink);font-weight:700;letter-spacing:.08em;margin:28px 0 8px}
#nvrank .cattiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 22px}
#nvrank .cattiles .k{color:var(--acc-text);font-weight:700}
#nvrank .tile .v2{font-size:14.5px;font-weight:700;margin-top:4px;line-height:1.3}
#nvrank .tile .c2{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums;margin-top:2px}
#nvrank .ctrl{display:flex;gap:12px;align-items:center;margin:0 0 12px}
#nvrank .ctrl input{flex:1;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;font:inherit;font-size:14px;color:var(--ink)}
#nvrank .ctrl input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
#nvrank .ctrl select{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
#nvrank .ctrl select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#nvrank .ctrl .cnt{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
#nvrank .chipsrow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
#nvrank .chipbtn{font:inherit;font-size:12.5px;color:var(--ink2);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;line-height:1.4}
#nvrank .chipbtn small{font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums}
#nvrank .chipbtn.on{background:var(--acc-soft);color:var(--acc-text);border-color:var(--acc)}
#nvrank .chipbtn.on small{color:var(--acc-text)}
#nvrank .chipbtn:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#nvrank /* --- 선택 바 / 추이 차트 --- */
.selbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
#nvrank .selbar[hidden]{display:none}
#nvrank .btnp{font:inherit;font-size:13px;font-weight:600;background:var(--acc);color:#fff;
  border:1px solid var(--acc);border-radius:8px;padding:8px 14px;cursor:pointer}
#nvrank .btnp:disabled{opacity:.5;cursor:default}
#nvrank .btns{font:inherit;font-size:13px;background:var(--panel);color:var(--ink2);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer}
#nvrank .btnp:focus-visible, #nvrank .btns:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#nvrank .selnote{font-size:12.5px;color:var(--ink2)}
#nvrank /* 호스트 테마(common.css)가 input 전체에 -webkit-appearance:none 을 걸어 두어
   그대로 두면 체크박스가 테두리·배경 없는 투명한 상자로 렌더된다(클릭은 되지만 안 보임).
   네이티브 렌더링을 되살린다. */
.ckb{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:auto;
  width:16px;height:16px;margin:0 8px 0 0;vertical-align:-2px;accent-color:var(--acc);cursor:pointer}
#nvrank .cbt{font:inherit;background:none;border:none;color:var(--ink2);cursor:pointer;
  padding:2px 3px;margin-left:5px;line-height:0;border-radius:4px;vertical-align:-3px}
#nvrank .cbt:hover{color:var(--acc-text)}
#nvrank .cbt:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#nvrank .cmodal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);padding:20px}
#nvrank .cmodal[hidden]{display:none}
#nvrank .cbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(980px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:18px 20px 20px}
#nvrank .chd{display:flex;align-items:center;gap:10px;margin:0 0 3px}
#nvrank .chd h3{margin:0;font-size:16.5px;font-weight:800;color:var(--ink);flex:1;line-height:1.35}
#nvrank .csub{font-size:12.5px;color:var(--ink2);margin:0 0 12px}
#nvrank .cmodes{display:flex;gap:6px;margin:0 0 12px}
#nvrank #cplotwrap{position:relative}
#nvrank .cplot{width:100%;height:auto;display:block}
#nvrank .cgrid{stroke:var(--line);stroke-width:1}
#nvrank .czero{stroke:var(--ink2);stroke-width:1;stroke-dasharray:4 4;opacity:.65}
#nvrank .cax{fill:var(--ink2);font-size:12px}
#nvrank .cdot{stroke:var(--panel);stroke-width:2}
#nvrank .chair{stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
#nvrank .chit{cursor:crosshair}
#nvrank .ctip{position:absolute;top:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font-size:12.5px;color:var(--ink);pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.14);min-width:158px}
#nvrank .ctip[hidden]{display:none}
#nvrank .ctipd{font-weight:700;margin-bottom:5px;color:var(--ink2);font-size:12px}
#nvrank .ctip .cr{white-space:nowrap;display:flex;align-items:center;gap:6px}
#nvrank .ctip b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
#nvrank .cleg{display:flex;flex-wrap:wrap;gap:7px 18px;margin:14px 0 0}
#nvrank .cleg span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink)}
#nvrank .cleg b{font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
#nvrank .cleg i, #nvrank .ctip i, #nvrank .ctbl i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
#nvrank .ctblwrap{overflow-x:auto;margin-top:10px}
#nvrank .ctbl{min-width:0;font-size:12.5px}
#nvrank .ctbl th, #nvrank .ctbl td{padding:6px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
#nvrank .ctbl th{position:static;background:var(--panel);color:var(--ink2)}
#nvrank .ctbl th:first-child, #nvrank .ctbl td:first-child{text-align:left}
#nvrank .ctbl th i{margin-right:5px;vertical-align:-1px}
#nvrank .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
#nvrank table{border-collapse:collapse;width:100%;min-width:800px;font-size:14px}
#nvrank thead th{position:sticky;top:0;background:var(--panel);z-index:2;text-align:left;font-size:12px;
  color:var(--ink2);font-weight:600;letter-spacing:.05em;padding:11px 12px;border-bottom:1px solid var(--line)}
#nvrank td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
#nvrank tbody tr:last-child td{border-bottom:none}
#nvrank tr.t20{background:var(--tint)}
#nvrank .rk{width:96px;white-space:nowrap}
#nvrank .rk .b3, #nvrank .rk .b20, #nvrank .rk .bn{display:inline-flex;min-width:30px;height:24px;align-items:center;justify-content:center;
  border-radius:7px;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;padding:0 6px}
#nvrank .b3{background:var(--acc);color:var(--badge-ink)}
#nvrank .b20{background:var(--acc-soft);color:var(--acc-text)}
#nvrank .bn{color:var(--ink2)}
#nvrank .dl{font-size:11px;font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums;vertical-align:middle}
#nvrank .dl.up{color:var(--up)}
#nvrank .dl.down{color:var(--down)}
#nvrank .dl.new{color:var(--acc-text)}
#nvrank .dl.same{color:var(--ink2);opacity:.55}
#nvrank .cd{display:block;font-size:10.5px;font-weight:700;line-height:1.25;margin-top:1px;
  font-variant-numeric:tabular-nums}
#nvrank .cd.up{color:var(--up)}
#nvrank .cd.down{color:var(--down)}
#nvrank .fx{font:inherit;background:none;border:none;color:var(--acc-text);cursor:pointer;
  padding:0 0 0 6px;font-size:12px;vertical-align:1px}
#nvrank .fx:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-radius:4px}
#nvrank tr.subrow{background:var(--bg)}
#nvrank tr.subrow td{padding:6px 12px;font-size:13px}
#nvrank tr.subrow .nm{font-weight:500;color:var(--ink2)}
#nvrank tr.subrow .rk span{background:none;color:var(--ink2);font-size:11.5px}
#nvrank tr.subrow .ct{color:var(--ink2);font-weight:600}
#nvrank tr.subrow .bar.sub{height:6px;opacity:.55}
#nvrank .nm{font-weight:600;white-space:nowrap}
#nvrank .cg{white-space:nowrap}
#nvrank .chip{display:inline-block;font-size:11.5px;color:var(--ink2);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;background:var(--bg);line-height:1.5}
#nvrank .ct{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;width:110px;white-space:nowrap}
#nvrank .br{width:24%;min-width:110px}
#nvrank .bar{display:block;height:8px;border-radius:0 4px 4px 0;background:var(--acc)}
#nvrank .ur{white-space:nowrap}
#nvrank .ur a{color:var(--ink2);font-size:12.5px;text-decoration:none}
#nvrank .ur a:hover, #nvrank .ur a:focus-visible{color:var(--acc-text);text-decoration:underline}
#nvrank .notes{margin-top:26px;font-size:13.5px;color:var(--ink2)}
#nvrank .notes h2{font-size:13px;color:var(--ink);letter-spacing:.08em;margin:18px 0 6px;text-transform:uppercase}
#nvrank .notes ul{margin:0;padding-left:18px}
#nvrank .notes li{margin:4px 0}
#nvrank .legal{margin:0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;line-height:1.65;font-size:12.5px;color:var(--ink2)}
#nvrank footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
@media (prefers-reduced-motion: no-preference){
#nvrank .ctrl input, #nvrank .ur a{transition:color .12s,border-color .12s}
}
#nvrank [hidden]{display:none !important}
@media (max-width:900px){
#nvrank .cncnav{display:none}
#nvrank .cnchd-in{height:56px;padding:0 20px}
#nvrank .cnclogo{width:170px;height:28px}
#nvrank .cattiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:640px){
#nvrank .hwrap{padding:16px 14px 22px}
#nvrank .wrap{padding:20px 14px 32px}
#nvrank .ctrl{flex-wrap:wrap}
#nvrank .ctrl input{max-width:none;width:100%}
#nvrank table{min-width:0}
#nvrank thead{display:none}
#nvrank tbody tr{display:grid;grid-template-columns:78px 1fr auto;
    grid-template-areas:"rk nm cg" "rk ct ct" "rk br br" "rk ur ur";
    padding:11px 12px;border-bottom:1px solid var(--line);align-items:center;
    column-gap:8px;row-gap:5px}
#nvrank tbody tr:last-child{border-bottom:none}
#nvrank td{display:block;border:none;padding:0;width:auto}
#nvrank .rk{grid-area:rk;align-self:start;width:auto}
#nvrank .nm{grid-area:nm;white-space:normal;line-height:1.35}
#nvrank .cg{grid-area:cg;justify-self:end;align-self:start}
#nvrank .ct{grid-area:ct;text-align:left;width:auto}
#nvrank .br{grid-area:br;width:100%;min-width:0}
#nvrank .ur{grid-area:ur;white-space:normal;word-break:break-all}
#nvrank .ur a{font-size:11.5px}
#nvrank .cbox{padding:14px 14px 16px;max-height:calc(100vh - 24px)}
#nvrank .cmodal{padding:12px}
#nvrank .ctbl thead{display:table-header-group}
#nvrank .ctbl tbody tr{display:table-row;padding:0;column-gap:0;row-gap:0}
#nvrank .ctbl td{display:table-cell;width:auto;padding:6px 8px}
}

#nvrank{--bg:#FFFFFF;--line:#D7DDE5;font-size:16px}
#nvrank .tile{background:#F5F8FD}
body.dark #nvrank{--bg:#141415;--panel:#212225;--ink:#F7F7F8;--ink2:#989BA2;--line:#37383C;
  --acc:#3385FF;--acc-text:#69A5FF;--acc-soft:#102C54;--tint:#171E2B;--badge-ink:#FFFFFF;
  --up:#FF7A72;--down:#69A5FF}
body.dark #nvrank .tile{background:var(--panel)}
#nvrank td{color:var(--ink)}
#nvrank table{font-size:15.5px}
#nvrank thead th{font-size:13px}
#nvrank .legal{font-size:14px}
#nvrank .tile .k{font-size:13px}
#nvrank .tile .v2{font-size:16px}
#nvrank .tile .c2{font-size:14.5px}
#nvrank .sect{font-size:17px;font-weight:800}
#nvrank .ctrl input,#nvrank .ctrl select{font-size:15px}
#nvrank .ctrl .cnt{font-size:14px}
#nvrank .chipbtn{font-size:14px}
#nvrank .chipbtn small{font-size:12.5px}
#nvrank .chip{font-size:12.5px}
#nvrank .ur a{font-size:13.5px}
#nvrank .dl{font-size:12px}
#nvrank .cd{font-size:11.5px}
#nvrank tr.subrow td{font-size:14px}
#nvrank .notes{font-size:14.5px}
#nvrank .notes h2{font-size:14px}
#nvrank footer{font-size:13.5px}