:root{
  --bg:#F4F1EA; --card:#FFFFFF; --ink:#13223A; --sub:#5A6577; --line:#E3DDD0;
  --up:#D2382B; --down:#2F6DB5; --accent:#C2551F; --accent-soft:#FBE1D2;
  --kr:#1F6F5C; --us:#2F6DB5; --coin:#B7791F; --tg:#2AABEE; --bubble:#EEF3F8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10151F; --card:#1A2130; --ink:#EEF1F6; --sub:#9AA4B5; --line:#2A3345;
    --up:#FF6B5E; --down:#6FA6EC; --accent:#F08A4B; --accent-soft:#3A2418;
    --kr:#4DBB9A; --us:#6FA6EC; --coin:#E0A642; --bubble:#232C3E;
  }
}
:root[data-theme="dark"]{
  --bg:#10151F; --card:#1A2130; --ink:#EEF1F6; --sub:#9AA4B5; --line:#2A3345;
  --up:#FF6B5E; --down:#6FA6EC; --accent:#F08A4B; --accent-soft:#3A2418;
  --kr:#4DBB9A; --us:#6FA6EC; --coin:#E0A642; --bubble:#232C3E;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Noto Sans KR',system-ui,sans-serif;font-size:15px;line-height:1.45}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}
.period .bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:10px 0 6px}
.period .bar i{display:block;height:100%;background:var(--accent)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sub{color:var(--sub);font-size:13px}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--card)}
.toggle button{border:0;background:none;color:var(--sub);font:inherit;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;min-width:34px;white-space:nowrap}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.rank{display:grid;grid-template-columns:22px 30px minmax(0,1fr) 52px 66px;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.rank:last-child{border-bottom:0}
.rank .pos{font-weight:800;font-size:17px;text-align:center}
.rank .mv{display:block;font-size:10px;font-weight:700}
.rank.me{background:var(--accent-soft);margin:0 -16px;padding:11px 16px;border-radius:10px;border-bottom-color:transparent}
.rank .name{font-weight:600}
.rank .picks{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .ret{text-align:right;font-weight:800;font-size:15px;white-space:nowrap}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;color:#fff;margin-right:4px;vertical-align:1px}
.tag.kr{background:var(--kr)} .tag.us{background:var(--us)} .tag.coin{background:var(--coin)}
.hold{padding:12px 0;border-bottom:1px solid var(--line)}
.hold:last-of-type{border-bottom:0}
.hold .top{display:flex;justify-content:space-between;gap:8px}
.hold .nm{font-weight:600}
.hold .r{text-align:right;font-weight:800}
.legs{font-size:12px;color:var(--sub);margin-top:4px}
.tl{position:relative;padding-left:26px}
.tl .it{position:relative;padding:0 0 14px}
.tl .it:last-child{padding-bottom:0}
.tl .it::before{content:"";position:absolute;left:-24px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--line);border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.tl .it.now::before{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tl .it:not(:last-child)::after{content:"";position:absolute;left:-19px;top:20px;bottom:-4px;width:2px;background:var(--line)}
.big{font-size:22px;font-weight:800}
.btn{display:block;width:100%;padding:13px;border-radius:12px;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn.tg{background:var(--tg);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px}
.chips button{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rv{display:flex;gap:6px;margin:4px 0 10px}
.rv button{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.rv button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chartwrap{position:relative;touch-action:pan-y}
.chartwrap svg text{font-family:inherit;fill:var(--sub);font-size:11px}
.chartwrap .hit:focus{outline:none}
.chartwrap .hit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pop{position:absolute;top:0;left:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:0 6px 18px rgba(0,0,0,.18);font-size:12px;pointer-events:none;min-width:140px;max-width:calc(100% - 8px)}
.pop[hidden]{display:none}
.pop .tt{font-weight:800;font-size:13px;margin-bottom:4px}
.pop .pr{display:flex;justify-content:space-between;gap:14px;padding:1px 0}
.pop .note{margin-top:4px;font-size:11px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
.day{font-size:12px;font-weight:700;color:var(--sub);margin:14px 0 8px;text-align:center}
.swap .head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.swap .move{font-weight:800}
.msg{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.msg .av{width:26px;height:26px;font-size:11px}
.msg .bub{background:var(--bubble);border-radius:4px 14px 14px 14px;padding:7px 11px;font-size:14px;max-width:85%}
.msg .bub .who{font-size:11px;font-weight:700;color:var(--sub)}
.msg .bub .t{font-size:10px;color:var(--sub);margin-left:6px}
.msg.admin{flex-direction:row-reverse}
.msg.admin .bub{background:var(--accent-soft);border-radius:14px 4px 14px 14px}
.applied{border-top:1px dashed var(--line);padding-top:8px;margin-top:4px}
.kv{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;gap:12px}
details.rules summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
details.rules summary::-webkit-details-marker{display:none}
details.rules summary h2{margin:0}
details.rules summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .15s}
details.rules[open] summary::after{transform:rotate(-135deg);margin-top:4px}
details.rules[open] summary{margin-bottom:8px}
.kv b{text-align:right}
h2{font-size:15px;font-weight:800;margin-bottom:8px}
.note{font-size:12px;color:var(--sub);margin-top:6px}
.mock{font-size:11px;color:var(--sub);text-align:center;margin:0 0 12px}
[hidden]{display:none !important}
.lab{cursor:pointer}
.lab:focus{outline:none}
.lab:focus-visible rect{stroke:var(--accent);stroke-width:1.5}
.rank.sel .name{color:var(--accent)}
.mock a{color:inherit}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gcard{display:block;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.gcard.empty{border-style:dashed;cursor:default;background:transparent}
.gcard .dot{width:7px;height:7px}
.ghold{padding:10px 0;border-bottom:1px solid var(--line)}
.ghold:last-of-type{border-bottom:0}
.wbar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.wbar i{display:block;height:100%}
.back{background:none;border:0;color:var(--sub);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:4px 0;margin-bottom:8px}
.pie-pop{position:fixed;z-index:50}
.slice{cursor:pointer;transition:opacity .15s}
.slice:focus{outline:none}
.pie.hl .slice:not(.on){opacity:.4}
.slab{fill:#fff;font-weight:700;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.28);stroke-width:2px}
.swapdot{cursor:pointer;transition:r .12s}
.swapdot:focus{outline:none}
.swapdot.on,.swapdot:focus-visible{stroke:var(--accent)}
/* 대회 종목: 국내·해외·코인 색 박스 안에 종목명 */
.pickchip{display:inline-block;max-width:100%;font-size:11px;font-weight:700;line-height:1.5;color:#fff;padding:0 7px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.pickchip.kr{background:var(--kr)} .pickchip.us{background:var(--us)} .pickchip.coin{background:var(--coin)}
/* 시세 지연 경고: 작은 ! 아이콘, 누르면 팝오버 */
.stalebtn{width:22px;height:22px;border-radius:50%;border:0;background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:800;line-height:22px;padding:0;cursor:pointer;flex:none}
.stalebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 카드 캐러셀·위치 점·카드 안 구역 */
.swipe{overflow:hidden;margin-bottom:12px;touch-action:pan-y;user-select:none;cursor:grab;border-radius:16px}
.swipe:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.track{display:flex;gap:12px;will-change:transform}
.track > .card{flex:0 0 100%;margin:0}
.track > .ghost{visibility:hidden}
.nowsec{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.chatbtn{display:block;width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.chatbox{margin-top:10px}
.chatbox .card{background:transparent;margin-bottom:10px;padding:12px}
.dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px}
.dots.top{margin:0 0 8px}
.dots{gap:0}
.dots button{background:none;border:0;padding:8px 4px;cursor:pointer;color:var(--sub);font:inherit;line-height:1}
.dots .dot i{display:block;width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .2s}
.dots .dot.on i{width:18px;background:var(--accent)}
.dots .hint{font-size:18px;padding:4px 12px}
.dots .hint:disabled{visibility:hidden}
/* 1위: 왕관 + 큰 순위 */
.first{display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 10px;border-radius:999px;background:linear-gradient(135deg,#F6D46B,#E2B13C);box-shadow:0 2px 8px rgba(226,177,60,.35)}
.first b{font-size:18px;font-weight:800;color:#3A2A00;letter-spacing:-.3px}
.first svg path{fill:#FFF3C4;stroke:#8A6400}
.first svg circle{fill:#FFF3C4}
/* 국내 태그 앞 태극 문양 (빨강 위·파랑 아래, 흰 테두리) */
.tag.kr::before{content:"";display:inline-block;width:10px;height:10px;margin-right:3px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 -11 22 22'%3E%3Ccircle r='10.5' fill='%23fff'/%3E%3Ccircle r='9.5' fill='%230047A0'/%3E%3Cpath d='M-9.5 0A9.5 9.5 0 0 1 9.5 0A4.75 4.75 0 0 0 0 0A4.75 4.75 0 0 1 -9.5 0Z' fill='%23CD2E3A'/%3E%3C/svg%3E") center/contain no-repeat}
/* 해외 태그 앞 미국 국기, 코인 태그 앞 비트코인 로고 */
.tag.us::before,.tag.coin::before{content:"";display:inline-block;height:10px;margin-right:3px;vertical-align:-1px;background:center/contain no-repeat}
.tag.us::before{width:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.6 -.6 20.2 11.2'%3E%3Crect x='-.6' y='-.6' width='20.2' height='11.2' rx='1.4' fill='%23fff'/%3E%3CclipPath id='c'%3E%3Crect width='19' height='10' rx='1'/%3E%3C/clipPath%3E%3Cg clip-path='url%28%23c%29'%3E%3Crect y='0.000' width='19' height='1.429' fill='%23B22234'/%3E%3Crect y='1.429' width='19' height='1.429' fill='%23fff'/%3E%3Crect y='2.857' width='19' height='1.429' fill='%23B22234'/%3E%3Crect y='4.286' width='19' height='1.429' fill='%23fff'/%3E%3Crect y='5.714' width='19' height='1.429' fill='%23B22234'/%3E%3Crect y='7.143' width='19' height='1.429' fill='%23fff'/%3E%3Crect y='8.571' width='19' height='1.429' fill='%23B22234'/%3E%3Crect width='8.6' height='5.714' fill='%233C3B6E'/%3E%3Ccircle cx='1.3' cy='1.2' r='.45' fill='%23fff'/%3E%3Ccircle cx='3.3' cy='1.2' r='.45' fill='%23fff'/%3E%3Ccircle cx='5.3' cy='1.2' r='.45' fill='%23fff'/%3E%3Ccircle cx='7.3' cy='1.2' r='.45' fill='%23fff'/%3E%3Ccircle cx='1.3' cy='2.7' r='.45' fill='%23fff'/%3E%3Ccircle cx='3.3' cy='2.7' r='.45' fill='%23fff'/%3E%3Ccircle cx='5.3' cy='2.7' r='.45' fill='%23fff'/%3E%3Ccircle cx='7.3' cy='2.7' r='.45' fill='%23fff'/%3E%3Ccircle cx='1.3' cy='4.2' r='.45' fill='%23fff'/%3E%3Ccircle cx='3.3' cy='4.2' r='.45' fill='%23fff'/%3E%3Ccircle cx='5.3' cy='4.2' r='.45' fill='%23fff'/%3E%3Ccircle cx='7.3' cy='4.2' r='.45' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E")}
.tag.coin::before{width:11px;height:11px;vertical-align:-2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%23fff'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23F7931A'/%3E%3Cpath d='M9 6.5h4.2c1.9 0 3.2 1 3.2 2.6 0 1-.6 1.8-1.5 2.1 1.2.3 2 1.2 2 2.4 0 1.8-1.4 2.9-3.5 2.9H9zm2 1.8v2.8h1.9c1 0 1.6-.5 1.6-1.4s-.6-1.4-1.6-1.4zm0 4.5v3h2.2c1.1 0 1.7-.6 1.7-1.5s-.6-1.5-1.7-1.5z M10.3 5v2 M12.6 5v2 M10.3 16.5v2.5 M12.6 16.5v2.5' fill='%23fff' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E")}
/* 현금 태그 앞 지폐 다발 */
.tag.cash::before{content:"";display:inline-block;width:14px;height:10px;margin-right:3px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 24 17'%3E%3Crect x='4' y='0' width='18' height='10' rx='1.5' fill='%232E7D4F' stroke='%23fff' stroke-width='1'/%3E%3Crect x='2' y='2' width='18' height='10' rx='1.5' fill='%233A9A62' stroke='%23fff' stroke-width='1'/%3E%3Crect x='0' y='4.5' width='18' height='10' rx='1.5' fill='%234CB874' stroke='%23fff' stroke-width='1'/%3E%3Ccircle cx='9' cy='9.5' r='2.6' fill='none' stroke='%23E8F7EE' stroke-width='1.1'/%3E%3Crect x='7.6' y='4.5' width='2.8' height='10' fill='%23F3E3B5'/%3E%3C/svg%3E") center/contain no-repeat}
.slab,.lg{transition:opacity .15s}
.pie-hl .slab:not(.on),.pie-hl .lg:not(.on){opacity:.35}