/* BOOUP datalab 공통 UI — 흰 바탕 + 파랑 하나.
   참고: 업비트(파란 상단 바·촘촘한 표·빨강/파랑 등락), 코인베이스(흰 바탕·굵은 제목·카드 없는 행·오른쪽 레일), 네이버 증권(검정 밑줄 탭·헤어라인 구분).
   원칙: 상자(카드)로 나누지 않고 헤어라인과 여백·제목 굵기로 위계를 만든다. 그림자 없음. 모서리는 작게. */
:root{
  --font:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#FFFFFF; --bg-2:#F5F7FA; --card:#FFFFFF; --card-2:#F5F7FA; --hover:#F7F9FC;
  --line:#E3E7ED; --line-2:#C9D0DA; --line-soft:#EEF1F5;
  --ink:#0F172A; --ink-2:#475366; --ink-3:#7C8797; --ink-4:#AEB6C2;
  --blue:#0B5CFF; --blue-2:#0A46C7; --blue-deep:#0A2E8A; --blue-soft:#EAF1FF; --blue-line:#B9CEFF;
  --up:#E0303A; --up-soft:#FDECEE; --down:#1E63E9; --down-soft:#EAF1FF;
  --ok:#0E8A5F; --ok-soft:#E4F5EE; --warn:#D07A00; --warn-soft:#FFF3E0;
  --star:#F2A900; --dummy:#7C8797;
  --r:6px; --r-lg:6px; --shadow:none;
  --max:1320px; --gutter:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select{font:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
::selection{background:var(--blue-soft)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); font-size:.92em}
.d-up{color:var(--up)} .d-down{color:var(--down)}
.na{color:var(--ink-3); font-size:11px; font-weight:500; font-style:normal}
.dim{color:var(--ink-3)}
.hide{display:none !important}

/* ── 헤더: 파란 바 ── */
header.site{position:sticky; top:0; z-index:40; background:var(--blue-2); color:#fff}
header.site .in{max-width:var(--max); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:stretch; gap:22px; height:52px}
.logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; letter-spacing:-.02em; flex:none; color:#fff}
.logo .mk{width:22px; height:22px; border-radius:5px; background:#fff; color:var(--blue-2); display:grid; place-items:center; font-size:12px; font-weight:900}
nav.gnb{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; align-items:stretch}
nav.gnb::-webkit-scrollbar{display:none}
nav.gnb a{display:flex; align-items:center; padding:0 11px; font-size:14px; font-weight:600; color:rgba(255,255,255,.78); white-space:nowrap; border-bottom:3px solid transparent; border-top:3px solid transparent; transition:color .12s}
nav.gnb a:hover{color:#fff}
nav.gnb a.on{color:#fff; border-bottom-color:#fff}
nav.gnb a[hidden]{display:none}
.hd-r{margin-left:auto; display:flex; gap:8px; align-items:center; flex:none}
.status{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.8); white-space:nowrap}
.status i{width:7px; height:7px; border-radius:50%; background:#3DE58A}
.status.late i{background:#FFC54D}
.btn{border-radius:var(--r); padding:6px 12px; font-size:12.5px; font-weight:600; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); transition:border-color .12s, color .12s, background .12s}
.btn:hover{border-color:var(--ink-3); color:var(--ink)}
.btn.pri{background:var(--blue); border-color:var(--blue); color:#fff} .btn.pri:hover{background:var(--blue-2)}
header.site .adm{margin-left:8px; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.18); color:#fff; letter-spacing:0; vertical-align:2px}
header.site .who{font-size:12.5px; color:rgba(255,255,255,.85); white-space:nowrap}
header.site .btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff} header.site .btn:hover{background:rgba(255,255,255,.2)}
.search{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:var(--r); padding:6px 10px; font-size:12.5px; color:rgba(255,255,255,.85); min-width:190px}
.search kbd{margin-left:auto; font:600 10px var(--mono); color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.35); border-radius:3px; padding:0 4px}

/* ── 페이지 뼈대 ── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter) 72px}
.page-h{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:26px 0 14px}
.page-h h1{margin:0; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.page-h .sub{font-size:12.5px; color:var(--ink-3)}
.page-h .r{margin-left:auto; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--ink-3)}
.eyebrow{display:none}
.sec{margin-top:40px}
.sec-h{display:flex; align-items:baseline; gap:12px; margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--ink); flex-wrap:wrap}
.sec-h h2{margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em}
.sec-h small{font-size:12.5px; color:var(--ink-3)}
.sec-h .r{margin-left:auto; font-size:12.5px; color:var(--ink-2); display:flex; gap:12px; align-items:center; font-weight:500}
.sec-h .r a:hover{color:var(--blue)}
.note{font-size:12.5px; color:var(--ink-3); line-height:1.55; margin:0 0 14px}
details.fine{font-size:12.5px; color:var(--ink-3); margin:6px 0 14px}
details.fine summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:500}
details.fine summary::-webkit-details-marker{display:none}
details.fine summary::before{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .12s; margin-left:2px}
details.fine[open] summary::before{transform:rotate(45deg)}
details.fine p{margin:8px 0 0; max-width:96ch; line-height:1.6}

/* ── 블록(패널): 헤어라인 하나, 그림자 없음 ── */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0; display:flex; flex-direction:column}
.panel > .hd{display:flex; align-items:center; gap:10px; padding:12px 16px 8px; flex:none}
.panel > .hd h3{margin:0; font-size:15px; font-weight:750; letter-spacing:-.01em; display:flex; align-items:center; gap:8px}
.panel > .hd small{font-size:12px; color:var(--ink-3); font-weight:400}
.panel > .hd .r{margin-left:auto; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--ink-2); white-space:nowrap; font-weight:500}
.panel > .hd a:hover{color:var(--blue)}
.panel > .hd .api{font-family:var(--mono); font-size:10.5px; padding:1px 6px; border:1px solid var(--line); border-radius:4px; color:var(--ink-3); font-weight:500}
.panel > .hd .api:hover{border-color:var(--blue-line); color:var(--blue)}
.panel > .bd{padding:4px 16px 14px; min-width:0}
.panel .ft{font-size:11.5px; color:var(--ink-3); padding:8px 16px 12px; border-top:1px solid var(--line-soft); margin-top:auto}
.empty{padding:14px 8px; font-size:12.5px; color:var(--ink-3); text-align:center}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .g3{grid-template-columns:repeat(3, minmax(0,1fr))} .g4{grid-template-columns:repeat(4, minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:1000px){ .g2,.g3,.g4,.g-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:640px){ .g2,.g3,.g4,.g-main{grid-template-columns:minmax(0,1fr)} }

/* ── 타일 ── */
.tiles{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px 13px; min-width:0}
.tile .k, .tile > small{display:flex; justify-content:space-between; gap:6px; font-size:12px; color:var(--ink-3); white-space:nowrap; font-weight:500}
.tile .v, .tile > b{display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; margin-top:4px; white-space:nowrap; line-height:1.2}
.tile .d{font-size:12px; margin-top:4px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .d b{font-weight:700}
.tile.bad .v, .tile.bad > b{color:var(--up)} .tile.warn .v, .tile.warn > b{color:var(--warn)} .tile.good .v, .tile.good > b{color:var(--ok)}
@media (max-width:1000px){ .tiles{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:560px){ .tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* ── 표: 업비트·코인베이스 식 — 세로선 없음, 헤어라인만 ── */
.tbl{overflow-x:auto; background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th{text-align:left; font-size:12px; font-weight:600; color:var(--ink-3); padding:10px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card)}
td{padding:10px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--hover)}
th.r,td.r{text-align:right}
th .na{display:block; font-size:10.5px; margin-top:-1px; font-weight:500}

/* ── 배지·태그: 작고 각진 ── */
.badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:1px 6px; border-radius:3px; line-height:1.7; white-space:nowrap}
.badge.ok{background:var(--ok-soft); color:var(--ok)} .badge.warn{background:var(--warn-soft); color:var(--warn)} .badge.bad{background:var(--up-soft); color:var(--up)}
.badge.brand{background:var(--blue-soft); color:var(--blue)} .badge.neu{background:var(--card-2); color:var(--ink-2)}
.tag{display:inline-block; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:3px; line-height:1.7; vertical-align:middle; background:var(--card-2); color:var(--ink-2)}
.tag.ok{background:var(--ok-soft); color:var(--ok)} .tag.warn{background:var(--warn-soft); color:var(--warn)} .tag.up{background:var(--up-soft); color:var(--up)} .tag.g{background:var(--card-2); color:var(--ink-2)}
.tag.t1{background:var(--blue-deep); color:#fff} .tag.t2{background:var(--blue); color:#fff} .tag.t3{background:var(--blue-soft); color:var(--blue-2)}
.tier{display:inline-block; font-size:10px; font-weight:800; padding:1px 5px; border-radius:3px; line-height:1.5; vertical-align:1px; letter-spacing:.02em}
.tier.t1{background:var(--blue-deep); color:#fff} .tier.t2{background:var(--blue); color:#fff} .tier.t3{background:var(--blue-soft); color:var(--blue-2)} .tier.t0{background:transparent; color:var(--ink-3); border:1px solid var(--line)}
.src{display:inline-flex; align-items:center; font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:1px 5px; border-radius:3px; line-height:1.6; vertical-align:middle; color:#fff; background:var(--ok)}
.src.live{background:var(--ok)} .src.dummy{background:var(--dummy)}
.kr{font-size:9.5px; font-weight:800; color:var(--blue); border:1px solid var(--blue-line); border-radius:3px; padding:0 3px; line-height:1.5; vertical-align:1px}
.ci{width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-size:9.5px; font-weight:800; color:#fff; flex:none; position:relative; overflow:hidden; vertical-align:middle}
.ci img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff}
.exl{width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:3px; object-fit:cover}
.grade{display:inline-block; font-size:11px; font-weight:800; padding:1px 6px; border-radius:3px; color:#fff; background:var(--ink-3)}
.grade.gA{background:var(--ok)} .grade.gB{background:var(--blue)} .grade.gC{background:var(--warn)} .grade.gD{background:var(--up)}
.lk{font-size:12px; font-weight:600; padding:4px 9px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink-2); white-space:nowrap}
.lk:hover{border-color:var(--blue); color:var(--blue)}

/* ── 칩(필터): 활성 = 파랑 ── */
.chips{display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 0 6px; align-items:center}
.chips::-webkit-scrollbar{display:none}
.chips button, .chip{border:1px solid var(--line-2); background:var(--card); border-radius:var(--r); padding:4px 10px; font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap; flex:none; transition:background .12s, color .12s, border-color .12s}
.chips button:hover, .chip:hover{border-color:var(--blue); color:var(--blue)}
.chips button.on, .chip.on{background:var(--blue); color:#fff; border-color:var(--blue)}
.chips .sp{margin-left:auto; font-size:11px; color:var(--ink-3); white-space:nowrap; flex:none; padding-left:6px}

/* ── 리스트 행 ── */
.rows a, .rows .row{display:flex; align-items:center; gap:10px; padding:9px 8px; border-bottom:1px solid var(--line-soft); font-size:13.5px; min-width:0}
.rows a:last-child, .rows .row:last-child{border-bottom:none}
.rows a:hover{background:var(--hover)}
.rows .t{flex:1; min-width:0} .rows .t b{font-weight:700}
.rows .t small{display:block; color:var(--ink-3); font-size:12px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rows .side{text-align:right; font-size:12px; color:var(--ink-3); white-space:nowrap}
.dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-4)}
.dot.up{background:var(--up)} .dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.brand{background:var(--blue)}

/* ── 푸터 ── */
footer.site{border-top:1px solid var(--line); margin-top:56px; background:var(--bg-2)}
footer.site .in{max-width:var(--max); margin:0 auto; padding:24px var(--gutter) 34px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12.5px; color:var(--ink-3); align-items:center}
footer.site .in b{color:var(--ink); font-weight:800}
footer.site .in a:hover{color:var(--blue)}
footer.site .sys{width:100%; font-size:11px; color:var(--ink-4); font-family:var(--mono)}

@media (max-width:1000px){ .search, .hd-r .btn.ghost{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }
/* 묶음 메뉴 (nav.js, 2026-10-15) */
nav.gnb{display:flex; align-items:center; gap:2px} nav.gnb .gm{position:relative} nav.gnb .gb{font:inherit; font-size:inherit; font-weight:600; color:inherit; background:none; border:0; cursor:pointer; padding:0 10px; height:100%; display:inline-flex; align-items:center; gap:4px; opacity:.85; line-height:inherit}
nav.gnb .gb i{font-style:normal; font-size:10px; opacity:.7} nav.gnb .gb .cur{font-weight:800; opacity:1} nav.gnb .gm.on .gb{opacity:1; box-shadow:inset 0 -3px 0 currentColor} nav.gnb .gm:hover .gb,nav.gnb .gm.open .gb{opacity:1}
nav.gnb .gdd{display:none; position:absolute; top:100%; left:0; min-width:168px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow); padding:5px; z-index:60; margin-top:0}
nav.gnb .gm.open .gdd{display:block} nav.gnb .gdd a{display:block; padding:8px 12px; color:var(--ink); font-size:13.5px; font-weight:600; border-radius:4px; opacity:1; height:auto; line-height:1.3; box-shadow:none} nav.gnb .gdd a:hover{background:var(--hover)} nav.gnb .gdd a.on{color:var(--blue); background:var(--blue-soft)}
.gnb-burger{display:none; font-size:20px; background:none; border:0; color:inherit; cursor:pointer; padding:4px 8px}
@media (max-width:760px){ .gnb-burger{display:none} header.site .in{position:relative} }
/* 다크 모드 (2026-10-15) — nav.js 의 🌙 버튼(localStorage datalab.theme) 또는 시스템 설정 */
:root[data-theme="dark"], :root:not([data-theme="light"]):has(body.sys-dark){ --bg:#0F1319; --bg-2:#161B23; --card:#161B23; --card-2:#1D242E; --hover:#1D242E; --line:#273040; --line-2:#36415A; --line-soft:#1F2733; --ink:#E6EAF0; --ink-2:#B4BCC8; --ink-3:#8791A0; --ink-4:#5B6574; --blue:#4D8DFF; --blue-2:#1B3F8F; --blue-deep:#0F2A66; --blue-soft:#1C2B4A; --blue-line:#2E4B8A; --up:#F0555E; --up-soft:#3A1F23; --down:#4D8DFF; --down-soft:#1C2B4A; --ok:#3FBF8A; --ok-soft:#173228; --warn:#F0A030; --warn-soft:#3A2A12; --star:#F2C14E; --shadow:0 8px 28px rgba(0,0,0,.5) }
:root[data-theme="dark"] body, body.sys-dark{background:var(--bg); color:var(--ink)}
:root[data-theme="dark"] img.coin-logo, :root[data-theme="dark"] .ci img{background:#fff}
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea{color:var(--ink); background:var(--bg-2); border-color:var(--line-2)} :root[data-theme="dark"] input::placeholder{color:var(--ink-4)}
:root[data-theme="dark"] .btn{background:var(--card-2); color:var(--ink-2); border-color:var(--line-2)}
.theme-btn{font-size:12.5px; font-weight:600; background:none; border:0; color:inherit; cursor:pointer; padding:4px 8px; opacity:.85} .theme-btn:hover{opacity:1}
/* 모바일 하단 탭 (nav.js) */
.tabbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:65; background:var(--card); border-top:1px solid var(--line); padding:4px 0 calc(4px + env(safe-area-inset-bottom)); justify-content:space-around}
.tabbar a{display:flex; flex:1; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; color:var(--ink-3); padding:4px 0; text-decoration:none; min-width:0} .tabbar a i{font-style:normal; font-size:18px; line-height:1} .tabbar a.on{color:var(--blue); font-weight:700}
@media (max-width:760px){ .tabbar{display:flex} body{padding-bottom:62px; overflow-x:hidden} }
/* 묶음 메뉴일 때는 드롭다운이 잘리지 않게 (nav.gnb 의 overflow-x:auto 가 absolute 메뉴를 가렸다, 2026-10-14) */
nav.gnb[data-grouped="1"]{overflow:visible}
nav.gnb .gdd a{color:var(--ink); border:0; padding:8px 12px} nav.gnb .gdd a:hover{color:var(--blue); background:var(--hover)}

/* 종목 탐색 하위 탭 (2026-10-14): 시총 상위 종목 · TGE 전 프로젝트 · 거래소 현황 */
.subnav{display:flex; gap:4px; margin:-4px 0 12px; border-bottom:1px solid var(--line)} .subnav a{padding:8px 12px; font-size:13.5px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px} .subnav a:hover{color:var(--ink)} .subnav a.on{color:var(--blue); border-bottom-color:var(--blue)}
/* 2026-10-15 모바일: 하위 탭 줄은 가로 스크롤, 제목 줄은 줄바꿈, 넓은 표는 .tscroll 로 감싼다 */
@media (max-width:640px){ .subnav{overflow-x:auto; scrollbar-width:none; white-space:nowrap} .subnav a{flex:none} .page-h{flex-wrap:wrap} .page-h .r{margin-left:0} .tscroll{overflow-x:auto} .wrap{overflow-x:hidden} }

/* 2026-10-21 허브 임베드(?embed=1): 머리글·하위 메뉴·화면 설정 버튼 숨김 */
html.embed header.site, html.embed .subnav, html.embed .page-h .sub + .r{display:none !important} html.embed .wrap{padding-top:4px} html.embed body{background:transparent}

/* 2026-10-21 지표 하위 메뉴 정리: 운영은 오른쪽 끝에 작게 */
.subnav a.sub-r{margin-left:auto;color:var(--ink-3);font-size:12px}
.subnav .sub-kids{flex-basis:100%;display:flex;gap:4px;padding:2px 0 6px 2px;font-size:12px}.subnav .sub-kids a{padding:2px 8px;border-radius:999px;color:var(--ink-3);border:0}.subnav .sub-kids a.on{background:var(--card-2,#eef3fb);color:var(--blue,#2563eb);font-weight:600}.subnav{flex-wrap:wrap}
/* 2026-10-28: 넓은 모니터에서 오른쪽이 비어 보임(사용자) → 1700px 이상이면 본문 폭을 넓힌다 */
@media (min-width:1700px){:root{--max:1560px}}
@media (min-width:2100px){:root{--max:1760px}}