/* coin 화면 전용 스타일 — 2026-10-27 인라인에서 분리 */
.head{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px}
.head img{width:56px; height:56px; border-radius:50%; background:var(--card-2); flex:none}
.head h1{margin:0; font-size:26px; font-weight:800; letter-spacing:-.03em; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.head h1 .sym{font-size:15px; color:var(--ink-3); font-weight:600}
.head .meta{font-size:12.5px; color:var(--ink-3); margin-top:2px; display:flex; gap:10px; flex-wrap:wrap}
.head .links{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-self:center}
.tag{display:inline-block; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:5px; line-height:1.7; vertical-align:middle}
.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)}
.strip{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-bottom:14px}
/* 개요 블록 — CMC·코인게코식 */
.ov{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; margin:0 0 14px; align-items:start}   /* 2026-10-28: stretch → start + 오른쪽 sticky — 두 열 높이가 달라도 빈 공간이 눈에 띄지 않게 */
#ov-stats{position:sticky; top:118px}
.about details.facts{margin:6px 0 8px} .about details.facts summary{cursor:pointer; font-size:12px; color:var(--blue); font-weight:600} .about details.facts ul{margin-top:6px}
.ov-main{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px 10px; min-width:0; display:flex; flex-direction:column}
.ov-price .big{font-size:36px; font-weight:800; letter-spacing:-.02em; margin-right:10px} .ov-p1{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap} .ov-p1 small{color:var(--ink-3); font-size:12px}
.pt{display:inline-block; font-weight:800; font-size:14px; padding:2px 7px; border-radius:6px; background:var(--bg-2); color:var(--ink-2)} .pt.up{background:var(--up-soft); color:var(--up)} .pt.down{background:var(--down-soft); color:var(--down)} .pt.na{color:var(--ink-4)}
.ov-p2{font-size:13px; color:var(--ink-2); margin:4px 0 10px} .ov-p2 b.up{color:var(--up)} .ov-p2 b.down{color:var(--down)}
.ov-range{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums} .ov-range .bar{position:relative; height:6px; border-radius:3px; background:linear-gradient(90deg,var(--down),var(--ink-4),var(--up)); opacity:.75} .ov-range .bar i{position:absolute; top:-4px; width:4px; height:14px; margin-left:-2px; background:var(--ink); border-radius:2px} .ov-range small{grid-column:1/-1; color:var(--ink-3); font-size:11px}
.ov-perf{display:flex; gap:8px; margin:12px 0 8px; flex-wrap:wrap} .ov-perf >div{display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:5px 10px; border:1px solid var(--line-soft); border-radius:var(--r); min-width:76px} .ov-perf small{font-size:11px; color:var(--ink-3)} .ov-perf .pt{font-size:13px; padding:1px 5px}
.ov-chart{flex:1; display:flex; flex-direction:column; min-height:380px; margin-top:4px}   /* 2026-10-28: 열을 stretch 하지 않으므로 차트 기본 높이를 올려 오른쪽 통계 열과 높이를 맞춘다 */ .ov-tf{display:flex; gap:2px; align-items:center; margin-bottom:4px} .ov-tf button{font:inherit; font-size:12px; font-weight:600; padding:4px 9px; border:1px solid transparent; border-radius:var(--r); background:none; cursor:pointer; color:var(--ink-2)} .ov-tf button.on{background:var(--ink); color:#fff} .ov-tf .lk{margin-left:auto; font-size:12px}
#ov-canvas{flex:1; min-height:220px} .ov-cap{font-size:11px; color:var(--ink-3); padding:4px 0 0}
.ov-stats{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:6px 16px 12px; font-size:13px; min-width:0}
.ov-stats .row{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:8px 0; border-bottom:1px solid var(--line-soft)} .ov-stats .row:last-child{border-bottom:0} .ov-stats .k{color:var(--ink-3); font-size:12px} .ov-stats .v{font-weight:700; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} .ov-stats .d{grid-column:1/-1; font-size:11.5px; color:var(--ink-3); text-align:right} .ov-stats .d .pt{font-size:11px; padding:0 5px}
.sbar{height:6px; border-radius:3px; background:var(--bg-2); overflow:hidden; margin:3px 0 2px} .sbar i{display:block; height:100%; background:var(--blue)}
.conv{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)} .conv b{font-size:12px; color:var(--ink-3)} .conv .cr{display:grid; grid-template-columns:1fr 50px; gap:6px; align-items:center; margin-top:5px} .conv input{width:100%; font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line-2); border-radius:var(--r); text-align:right; font-variant-numeric:tabular-nums; background:var(--bg)} .conv span{font-size:12px; color:var(--ink-2); font-weight:700}
.ovnote{font-size:10.5px; color:var(--ink-3); margin:8px 0 0; line-height:1.45}
@media (max-width:900px){ .ov{grid-template-columns:1fr} .ov-price .big{font-size:30px} }
.about{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 16px; margin:0 0 14px}
.about .ah{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px} .about .ah b{font-size:14px} .about .ah small{font-size:11.5px; color:var(--ink-3)}
.about .sum4{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 14px; margin:0 0 10px} .about .sum4 div{display:grid; grid-template-columns:44px 1fr; gap:6px; font-size:13.5px; line-height:1.55} .about .sum4 b{color:var(--blue); font-size:12px; padding-top:2px} .about details.rawd{margin:4px 0 8px; font-size:13px} .about details.rawd summary{cursor:pointer; color:var(--ink-3); font-size:12px} .about details.rawd p{margin:6px 0 0; line-height:1.6; color:var(--ink-2)}
@media (max-width:900px){ .about .sum4{grid-template-columns:1fr}
.ov-main .about.about-wide{margin:12px 0 4px; border:0; border-top:1px solid var(--line); border-radius:0; padding:12px 0 0; box-shadow:none}
.ov-main .about.about-wide .sum4{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:900px){.ov-main .about.about-wide .sum4{grid-template-columns:1fr}} }
.about .lead{margin:0 0 8px; font-size:14px; line-height:1.6} .about .claims{margin:0; padding-left:18px; font-size:13px; line-height:1.65; color:var(--ink-2)} .about .claims li{margin:2px 0} .about .vf{color:var(--ok); font-size:11px} .about details.more{margin-top:4px; font-size:12.5px} .about details.more summary{cursor:pointer; color:var(--blue)}
.about .tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:10px} .about .tags span{font-size:11.5px; padding:2px 9px; border-radius:999px; background:var(--bg-2); color:var(--ink-2)} .about .alinks{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px} .about .alinks .lk{font-size:12px}
.brief{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:var(--r-lg); padding:12px 16px; margin:0 0 14px}
.brief .bh{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px} .brief .bh b{font-size:14px} .brief .bh small{font-size:11.5px; color:var(--ink-3)}
.brief ul{list-style:none; margin:0; padding:0; display:grid; gap:4px} .brief li{display:flex; gap:8px; font-size:13.5px; line-height:1.5; align-items:flex-start} .brief li i{flex:none; width:8px; height:8px; border-radius:50%; margin-top:7px; background:var(--ink-4)} .brief li.up i{background:var(--up)} .brief li.down i{background:var(--down)} .brief li.warn i{background:var(--warn)} .brief li a{font-size:12px; color:var(--blue); margin-left:4px; white-space:nowrap}
@media (max-width:900px){.strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tile .k{font-size:11px; color:var(--ink-3); display:flex; justify-content:space-between; gap:6px; white-space:nowrap}
.tile .v{font-size:18px; font-weight:800; letter-spacing:-.02em; margin-top:3px; white-space:nowrap}
.tile .d{font-size:11.5px; margin-top:2px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.grid{display:block; columns:2; column-gap:12px}   /* 2026-10-28: 카드 높이가 제각각이라 격자에 빈 공간이 생겨 2단 컬럼으로(사용자: 컴팩트하게) */
.grid>*{break-inside:avoid; margin:0 0 12px; display:block}
@media (max-width:900px){.grid{columns:1}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); min-width:0}
.card.wide{grid-column:1 / -1}
.card .hd{display:flex; align-items:baseline; gap:10px; padding:12px 14px 6px}
.card .hd h3{margin:0; font-size:14px; font-weight:750; letter-spacing:-.01em}
.card .hd small{font-size:11.5px; color:var(--ink-3)}
.card .hd .r{margin-left:auto; font-size:11.5px; color:var(--ink-3)}
.card .bd{padding:4px 14px 12px; max-height:520px; overflow:auto}
.empty{font-size:12.5px; color:var(--ink-3); padding:8px 0 4px}
table.t{width:100%; border-collapse:collapse; font-size:12.5px}
table.t th{font-weight:600; color:var(--ink-3); text-align:left; padding:5px 6px; border-bottom:1px solid var(--line); font-size:11px; white-space:nowrap; background:transparent}
table.t td{padding:6px 6px; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.t tr:last-child td{border-bottom:none}
table.t td.r, table.t th.r{text-align:right; white-space:nowrap}
.tl{list-style:none; margin:0; padding:0}
.tl li{display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px; align-items:baseline}
.tl li:last-child{border-bottom:none}
.tl .dt{color:var(--ink-3); width:84px; flex:none; font-size:11.5px}
.tl .b{flex:1; min-width:0}
.tl .b small{display:block; color:var(--ink-3); font-size:11.5px}
.src{font-size:10px; font-weight:600; letter-spacing:0; color:var(--ink-3); background:transparent; border:1px solid var(--line); border-radius:4px; padding:0 4px; margin-left:4px; white-space:nowrap}
.src.v{color:var(--ok); border-color:var(--ok)}
.bk{display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; margin:2px 3px 2px 0; background:var(--card)}
.spark{width:100%; height:64px; display:block}
.sp2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:12.5px}
.kv b{color:var(--ink-3); font-weight:500}
.lv{margin-top:12px} .lv .hd2{display:flex; align-items:baseline; gap:8px; margin:0 0 6px; font-size:12.5px} .lv .hd2 small{color:var(--ink-3); font-size:11.5px}
.lvrow{display:grid; grid-template-columns:78px minmax(0,1fr) 120px; gap:8px; align-items:center; font-size:11.5px; padding:1px 0} .lvrow .p{color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums} .lvrow .bar{display:flex; height:9px; gap:1px; background:var(--bg-2); border-radius:2px; overflow:hidden} .lvrow .bar i{display:block; height:100%} .lvrow .bar .l{background:var(--up)} .lvrow .bar .s{background:var(--down)} .lvrow .v{color:var(--ink-2); white-space:nowrap} .lvrow.now{background:var(--blue-soft); border-radius:3px} .lvrow.now .p{color:var(--blue); font-weight:700} .lvrow em{font-style:normal; color:var(--blue); font-weight:700}
.desc{font-size:13px; color:var(--ink-2); line-height:1.6}
.err{color:var(--up); font-weight:600}
.pill{font-size:11px; font-weight:700; padding:1px 6px; border-radius:4px; background:var(--card-2); color:var(--ink-2)}
.hk{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:12px} .hk i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;vertical-align:middle} #hist-sel div{padding:3px 0;font-size:12.5px}
.st-ax{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:2px 0 4px} .st-t{background:var(--card-2);border-radius:10px;padding:8px 10px;border-left:3px solid var(--ink-4)} .st-t.up{border-left-color:var(--up)} .st-t.down{border-left-color:var(--down)} .st-t.warn{border-left-color:#d97706} .st-t.cold{border-left-color:#b91c1c} .st-t.none{opacity:.55}
.st-h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)} .st-h b{font-size:14px;color:var(--ink);margin-left:auto} .st-d{font-style:normal;font-size:10px} .st-d.up{color:var(--up)} .st-d.down{color:var(--down)}
.st-bar{height:4px;background:var(--line-soft);border-radius:2px;margin:5px 0 4px;overflow:hidden} .st-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--down),var(--ink-4) 50%,var(--up));border-radius:2px} .st-t small{display:block;font-size:11px;line-height:1.35;color:var(--ink-2)}
.vp-wrap{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:start} .vp-svg{width:100%;height:270px;display:block;background:var(--card-2);border-radius:8px} .vp-side{font-size:12.5px;line-height:1.7} .vp-side b{font-weight:700;color:var(--ink-3);margin-right:4px} .vp-side .mut{color:var(--ink-3);font-size:11px;line-height:1.4;margin-top:6px} @media(max-width:700px){.vp-wrap{grid-template-columns:1fr}}
.lights{margin:0 0 12px}.pers{margin:0 0 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}.pers h3{margin:0 0 6px;font-size:13.5px}.pers h3 small{font-weight:400;color:var(--ink-3);font-size:11.5px}.pers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}@media(max-width:760px){.pers ul{grid-template-columns:1fr}}.pers li{font-size:12.5px;line-height:1.45;display:flex;gap:6px;padding:3px 0}.pers li.t-good{color:var(--ink)}.pers li.t-bad span,.pers li.t-warn span{filter:none}.pers li.t-bad{color:#b91c1c}.pers-p{font-size:12px;color:var(--ink-3);margin-top:6px}.pers-p a{color:var(--ink-2)}.lt-sum{font-size:13px;font-weight:700;margin:0 0 6px}.lt-sum small{font-weight:400;color:var(--ink-3)}
.lt-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}@media(max-width:900px){.lt-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.lt-row{grid-template-columns:1fr}}
.lt{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;color:inherit;min-width:0;position:relative}
.lt:hover{border-color:var(--blue)}.lt-l{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}.lt-l i{font-style:normal;font-size:10.5px;font-weight:700;margin-left:auto;padding:0 6px;border-radius:999px;background:var(--card-2);color:var(--ink-3)}
.lt b{font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.lt-t{font-size:11.5px;color:var(--ink-3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lt-dot{position:absolute;top:10px;left:-1px;width:4px;height:calc(100% - 20px);border-radius:0 4px 4px 0;background:var(--ink-4)}
.lt.t-good .lt-dot{background:#16a34a}.lt.t-warn .lt-dot{background:#f59e0b}.lt.t-bad .lt-dot{background:var(--up)}
.lt.t-good .lt-l i{background:#dcfce7;color:#15803d}.lt.t-warn .lt-l i{background:#fef3c7;color:#b45309}.lt.t-bad .lt-l i{background:var(--up-soft);color:var(--up)}
.lt.t-good b{color:#15803d}.lt.t-warn b{color:#b45309}.lt.t-bad b{color:var(--up)}.lt-empty{grid-column:1/-1;color:var(--ink-3);font-size:12px;padding:8px}
.whynow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:10px 12px;margin:0 0 10px;border-radius:10px;background:var(--blue-soft);border:1px solid rgba(30,99,233,.18);font-size:13px;line-height:1.55}.whynow b{color:var(--blue);font-size:12px;white-space:nowrap}.whynow span{flex:1 1 300px;min-width:0}.whynow small{flex-basis:100%;color:var(--ink-3);font-size:11px}.whynow.quiet{background:var(--card-2);border-color:var(--line)}.whynow.quiet b{color:var(--ink-3)}
/* 2026-10-28: 머리글 아래 한 줄 — 기간 등락 + 환산 */
.ov-inline{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:-2px 0 14px}
.ov-inline .ov-perf{margin:0; gap:6px}
.ov-inline .ov-perf>div{flex-direction:row; align-items:baseline; gap:6px; padding:4px 9px}
.ov-inline .conv{margin:0; padding:0; border:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ov-inline .conv b{margin-right:2px}
.ov-inline .conv .cr{display:inline-grid; grid-template-columns:auto auto; align-items:center; gap:4px}
.ov-inline .conv .cr input{width:92px; padding:4px 6px; font-size:12.5px; text-align:right; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); color:var(--ink)}
.ov-inline .conv .cr span{font-size:11px; color:var(--ink-3)}