/* KOSPICAST 서브페이지 공용 스타일 — web/pages.py 가 생성 */
:root{
  --bg:#08070c; --surface:#12111b; --surface-2:#1a1826; --surface-3:#221f31;
  --line:#241f33; --line-2:#35304a;
  --fg:#f2eefa; --fg-2:#a79cc0; --fg-3:#6d6485;
  --accent:#7c65ff;
  --up:#ff5470; --down:#2fa8ff;
  --tier-0:#35d6a4; --tier-1:#ffb454; --tier-2:#8f86a8;
  --r-md:16px; --r-sm:9px;
  --font:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 520px at 50% -18%, rgb(124 101 255 / .12), transparent 66%);
  background-repeat:no-repeat;
}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.wrap{max-width:1060px; margin:0 auto; padding:0 16px 72px}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--fg-3)}

/* 헤더 */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:14px 0 12px; border-bottom:1px solid var(--line)}
a.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px;
  letter-spacing:-.02em; color:inherit; text-decoration:none}
a.brand svg{width:22px; height:22px; flex:none; display:block}
a.brand:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
nav{display:flex; gap:4px; flex-wrap:wrap}
nav a{font-size:12.5px; color:var(--fg-3); text-decoration:none; padding:5px 11px;
  border-radius:999px; border:1px solid transparent}
nav a:hover{color:var(--fg-2); background:var(--surface)}
nav a[aria-current]{color:var(--fg); background:var(--surface-3); border-color:var(--line-2)}

/* 본문 */
h1{font-size:clamp(24px,4.6vw,32px); font-weight:800; letter-spacing:-.03em;
  margin:34px 0 8px; text-wrap:balance}
.lede{color:var(--fg-2); font-size:15px; margin:0 0 6px}
.meta{color:var(--fg-3); font-size:12.5px; margin:0}
h2{font-size:17px; font-weight:750; letter-spacing:-.02em; margin:38px 0 10px}
h3{font-size:14.5px; font-weight:700; margin:24px 0 8px}
p{margin:0 0 12px}
ul,ol{margin:0 0 14px; padding-left:20px}
li{margin:0 0 6px}
b,strong{color:var(--fg); font-weight:650}
code{font-family:ui-monospace,"SF Mono",monospace; font-size:.9em;
  background:var(--surface-2); padding:2px 6px; border-radius:5px; color:var(--fg-2)}
a{color:var(--fg-2)}
.panel{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px; margin:0 0 16px}
.note{background:rgb(255 180 84 / .07); border:1px solid rgb(255 180 84 / .2);
  border-radius:var(--r-sm); padding:13px 15px; font-size:13.5px; color:var(--fg-2); margin:0 0 16px}
.note b{color:var(--tier-1)}
.empty{color:var(--fg-3); text-align:center; padding:40px 20px}

/* 표 */
.feed{list-style:none;padding:0;margin:1rem 0}
.feed li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0}
.feed a{display:block;line-height:1.45}
.feed .by{display:block;margin-top:.2rem;font-size:.82em;color:var(--fg-3)}
.tbl{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); margin:0 0 18px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:13px}
th,td{padding:9px 13px; text-align:right; white-space:nowrap}
th{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3);
  font-weight:650; background:var(--surface-2); border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
tbody tr+tr td{border-top:1px solid var(--line)}
td{background:var(--surface)}

/* 통계 타일 */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; margin:0 0 18px}
.stat{background:var(--surface); padding:15px 16px}
.stat dt{font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-3); font-weight:650; margin:0}
.stat dd{margin:7px 0 0; font-size:23px; font-weight:750; letter-spacing:-.03em; line-height:1}
.stat dd small{font-size:11.5px; font-weight:500; color:var(--fg-3)}

.portal-link{margin:1rem 0; color:var(--fg-3); line-height:2}
.portal-link a{margin:0 .15rem}
.mark{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; font-size:9px; font-weight:800}
.mark.o{background:rgb(53 214 164 / .16); color:var(--tier-0)}
.mark.x{background:rgb(255 84 112 / .16); color:var(--up)}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700}
.tag.live{background:rgb(53 214 164 / .13); color:var(--tier-0)}
.tag.backtest{background:var(--surface-3); color:var(--fg-3)}

footer{margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  font-size:12px; color:var(--fg-3); line-height:1.75}
footer p{margin:0 0 9px}
footer a{color:var(--fg-2); text-decoration:none; border-bottom:1px solid var(--line-2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}