:root{
  --bg:#0d1014; --surface:#161b22; --surface2:#1c2430; --line:#222b36;
  --text-hi:#e8edf2; --text-mid:#aab6c4; --text-lo:#7c8896;
  --up:#ff5257; --up-soft:#3a1c1f; --down:#3b82f6; --down-soft:#16233c;
  --gold:#e0b341; --gold-soft:#2c2410;
  --tile-text:#ffffff; --tile-shadow:0 1px 3px rgba(0,0,0,.55);
  --badge1-bg:rgba(255,255,255,.16); --badge1-fg:#ffffff;
  --head-bg:rgba(13,16,20,.82);
  --mono:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --display:"Jua","Pretendard Variable",sans-serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --maxw:1120px;
}
:root[data-theme="light"]{
  --bg:#f5f7fa; --surface:#ffffff; --surface2:#eef1f6; --line:#dfe4ec;
  --text-hi:#1a2129; --text-mid:#465162; --text-lo:#606b7a;
  --up:#e5484d; --up-soft:#fbe3e4; --down:#2563eb; --down-soft:#e2eafc;
  --gold:#e8ab1e; --gold-soft:#f9e7b4;
  --tile-text:#ffffff; --tile-shadow:0 1px 3px rgba(0,0,0,.55);
  --badge1-bg:rgba(0,0,0,.10); --badge1-fg:#1a2129;
  --head-bg:rgba(255,255,255,.85);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text-hi);
  font-family:var(--sans); line-height:1.6; letter-spacing:-.01em;
  font-feature-settings:"tnum" 1; word-break:keep-all;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* header */
.site-head{position:sticky; top:0; z-index:20; background:var(--head-bg);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:18px; height:60px}
.brand{display:flex; align-items:baseline; gap:9px; font-weight:400; font-size:20px; font-family:var(--display); letter-spacing:0}
.brand .dot{width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ff7a7d,var(--up)); box-shadow:0 0 12px #ff525799}
.brand small{font-weight:500; color:var(--text-lo); font-size:12px; letter-spacing:.04em; font-family:var(--sans)}
.nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.nav a{padding:7px 11px; border-radius:8px; font-size:14px; color:var(--text-mid)}
.nav a:hover{background:var(--surface); color:var(--text-hi)}
.nav a.active{color:var(--text-hi); background:var(--surface2)}
.theme-toggle{margin-left:6px; width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text-mid);
  font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center}
.theme-toggle:hover{color:var(--text-hi); border-color:var(--gold)}

/* hero */
.hero{padding:34px 0 18px}
.hero .date{font-family:var(--mono); font-size:14px; color:var(--text-lo); letter-spacing:.02em}
.hero h1{margin:6px 0 14px; font-size:clamp(28px,4.8vw,44px); line-height:1.15; font-weight:400; font-family:var(--display); letter-spacing:0; color:var(--text-hi)}
.market-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:700; border:1px solid var(--line); background:var(--surface)}
.chip .k{color:var(--text-lo); font-weight:600}
.chip .v{font-family:var(--mono)}
.chip.mood{font-weight:700}
.chip.mood-bull{color:#e5484d; border-color:#e5484d; background:rgba(229,72,77,.14)}
.chip.mood-strong{color:#ef7a6f; border-color:#ef7a6f; background:rgba(239,122,111,.14)}
.chip.mood-normal{color:var(--text-mid); border-color:var(--line); background:var(--surface2)}
.chip.mood-weak{color:#2f6fe0; border-color:#2f6fe0; background:rgba(47,111,224,.14)}
.chip.mood-extreme{color:#d39a12; border-color:#d39a12; background:rgba(211,154,18,.14)}
.chip.mood-narrow{color:#9b6dd6; border-color:#9b6dd6; background:rgba(155,109,214,.14)}
.up-num{color:var(--up)} .down-num{color:var(--down)} .flat-num{color:var(--text-mid)}
.summary{margin:14px 0 0; color:var(--text-mid); font-size:15px; max-width:62ch}

/* 제목 + 시세 기준 시각(우상단 박스) */
.hero-top{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin:4px 0 14px}
.hero-top h1{margin:0}
.hero-time{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto;
  padding:9px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface2)}
.ht-k{font-size:11.5px; color:var(--text-lo); letter-spacing:.02em}
.ht-v{font-family:var(--mono); font-weight:800; font-size:clamp(34px,5.2vw,50px); color:var(--text-hi); line-height:1.02}

/* market ticker (글로벌 지표) — 지표만 폭 꽉 채우는 한 줄 바 */
.ticker{display:flex; align-items:stretch; margin:18px 0 0;
  border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.tk{flex:1 1 0; display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:13px 18px; min-width:0; border-left:1px solid var(--line)}
.tk:first-child{border-left:0}
.tk-k{font-size:13px; color:var(--text-lo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk-v{font-family:var(--mono); font-size:18.5px; font-weight:700; color:var(--text-hi); white-space:nowrap}
.tk-c{font-family:var(--mono); font-size:13.5px; font-weight:600; white-space:nowrap}
@media(max-width:760px){
  .ticker{flex-wrap:wrap}
  .tk{flex:1 1 33%; border-top:1px solid var(--line)}
  .tk:nth-child(-n+3){border-top:0}
  .tk:nth-child(3n+1){border-left:0}
}

/* legend */
.legend{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:22px 0 14px;
  padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  font-size:13px; color:var(--text-mid)}
.legend .grad{height:10px; width:140px; border-radius:6px;
  background:linear-gradient(90deg,var(--surface2),var(--up))}
.legend b{color:var(--text-hi); font-weight:700}
.legend .tier-mark{width:13px; height:13px; border-radius:4px; border:2px solid var(--gold); display:inline-block; vertical-align:-2px}

/* heatmap treemap */
.grid{position:relative; width:100%; margin:0 0 8px}
.grid-hint{color:var(--text-lo); font-size:13px; margin:0 0 30px}
.tile{position:relative; border:1px solid var(--line); border-radius:13px; padding:14px 14px 12px;
  background:var(--surface2); overflow:hidden; min-height:116px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .12s ease, border-color .12s ease}
.tile:hover{transform:translateY(-2px); border-color:var(--gold)}
.tile.t2{border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-soft)}
:root[data-theme="light"] .tile{background:#c8cfd8}
:root[data-theme="light"] .tile.t2{box-shadow:inset 0 0 0 1.5px var(--gold)}
.tile.open{outline:2px solid var(--gold); outline-offset:-1px; transform:none}
.tile .heat{position:absolute; inset:0; z-index:0}
.tile .body{position:relative; z-index:1; display:flex; flex-direction:column; height:100%}
.tile .theme{font-weight:700; font-size:15px; line-height:1.25; color:var(--tile-text); text-shadow:var(--tile-shadow)}
.tile .ret{font-family:var(--mono); font-size:24px; font-weight:700; margin:6px 0 2px;
  color:var(--tile-text); text-shadow:var(--tile-shadow); white-space:nowrap}
.tile .meta{font-size:12px; color:var(--tile-text); opacity:.82; font-family:var(--mono);
  text-shadow:var(--tile-shadow)}
.tile .badge{position:absolute; top:10px; right:10px; z-index:2; font-size:10.5px; font-weight:800;
  padding:3px 7px; border-radius:6px; letter-spacing:.03em}
.badge.b2{background:var(--gold); color:#1a1405}
.badge.b1{background:var(--badge1-bg); color:var(--badge1-fg)}

/* expand detail panel */
.detail{grid-column:1/-1; background:var(--surface); border:1px solid var(--gold);
  border-radius:13px; padding:18px 20px 20px; position:relative; animation:dopen .18s ease}
@keyframes dopen{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.detail .d-close{position:absolute; top:12px; right:14px; background:transparent; border:0;
  color:var(--text-lo); font-size:22px; line-height:1; cursor:pointer; padding:2px 6px}
.detail .d-close:hover{color:var(--text-hi)}
.d-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px; padding-right:30px}
.d-theme{font-size:20px; font-weight:800; color:var(--text-hi)}
.d-ret{font-family:var(--mono); font-size:20px; font-weight:700}
.d-stats{display:flex; flex-wrap:wrap; gap:10px 22px; padding:13px 16px; margin-bottom:16px;
  background:var(--surface2); border:1px solid var(--line); border-radius:10px}
.d-stats span{display:flex; flex-direction:column; gap:2px; font-family:var(--mono); font-size:15px; color:var(--text-hi)}
.d-stats i{font-style:normal; font-size:11.5px; color:var(--text-lo); font-family:var(--sans)}
.d-sec{margin-top:14px}
.d-sec h4{margin:0 0 9px; font-size:13px; color:var(--text-lo); font-weight:600; letter-spacing:.02em}
.d-stocks{display:flex; flex-wrap:wrap; gap:8px}
.d-stock{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:8px;
  background:var(--surface2); border:1px solid var(--line); font-size:14px}
.d-stock span{font-family:var(--mono); font-size:13px}
.d-newslist{display:flex; flex-direction:column; gap:8px}
.d-news{display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:9px;
  background:var(--surface2); border:1px solid var(--line); font-size:14.5px; color:var(--text-hi)}
.d-news:hover{border-color:var(--gold)}
.d-src{margin-left:auto; font-size:12px; color:var(--text-lo); white-space:nowrap}
.d-empty{color:var(--text-lo); font-size:13.5px; padding:4px 2px}

/* full table */
.table-wrap{margin:8px 0 40px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--surface)}
.table-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.table-head h2{margin:0; font-size:16px}
.table-head .count{color:var(--text-lo); font-size:13px; font-family:var(--mono)}
.sortbtns{margin-left:auto; display:flex; gap:6px}
.sortbtns button{font-family:var(--sans); font-size:12.5px; color:var(--text-mid); cursor:pointer;
  background:var(--surface2); border:1px solid var(--line); padding:6px 11px; border-radius:8px}
.sortbtns button.on{color:#1a1405; background:var(--gold); border-color:var(--gold); font-weight:700}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:10px 16px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{position:sticky; top:0; background:var(--surface); color:var(--text-lo); font-weight:600; font-size:12.5px; cursor:pointer}
tbody tr:hover{background:var(--surface2)}
td.num{font-family:var(--mono)}
.t-tier{display:inline-block; min-width:30px; text-align:center; font-size:11px; font-weight:700; padding:2px 6px; border-radius:5px}
.t-tier.x2{background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold)}
.t-tier.x1{background:var(--surface2); color:var(--text-mid)}
.t-tier.x0{color:var(--text-lo)}

/* content pages */
.page{padding:36px 0 20px; max-width:760px}
.page h1{font-size:30px; margin:0 0 6px; color:var(--text-hi)}
.page .lead{color:var(--text-mid); font-size:16px; margin:0 0 26px}
.page h2{font-size:20px; margin:34px 0 10px; padding-top:6px; color:var(--text-hi)}
.page h3{font-size:16px; margin:22px 0 6px; color:var(--text-hi)}
.page p,.page li{color:var(--text-mid); font-size:15.5px}
.page b,.page strong{color:var(--text-hi)}
.page ul,.page ol{padding-left:20px}
.page li{margin:5px 0}
.page .card{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:18px 20px; margin:16px 0}
.page .warn{border-color:var(--gold); background:var(--gold-soft)}
.page table{margin:14px 0; font-size:14.5px}
.page th,.page td{text-align:left}
.updated{font-family:var(--mono); font-size:12.5px; color:var(--text-lo)}

/* footer */
.site-foot{border-top:1px solid var(--line); margin-top:20px; padding:26px 0 50px; color:var(--text-lo); font-size:13px}
.site-foot .disc{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:14px 16px; margin-bottom:18px; color:var(--text-mid); line-height:1.55}
.site-foot .disc b{color:var(--text-hi)}
.site-foot .flinks{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.site-foot .flinks a:hover{color:var(--text-hi)}
.site-foot .copy{color:var(--text-lo)}

@media(max-width:880px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){
  .site-head .wrap{height:60px; flex-wrap:nowrap; gap:10px}
  .brand{flex:0 0 auto}
  .brand small{display:none}
  .nav{flex-wrap:nowrap; overflow-x:auto; gap:4px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:6px 9px; font-size:13px; flex:0 0 auto}
  .theme-toggle{flex:0 0 auto; width:30px; height:30px}
  .hero{padding:22px 0 14px}
  .hero-time{align-items:flex-start; padding:9px 14px}
  .grid{grid-template-columns:repeat(2,1fr); gap:8px}
  .tile{min-height:104px; padding:12px; border-radius:4px} .tile .ret{font-size:21px}
  .tile .body{justify-content:center; gap:2px}
  .tile .theme{flex:0 1 auto !important}
  .d-stats{gap:8px 16px}
  .table-head .sortbtns{margin-left:0; width:100%}
  table{font-size:12.5px}
  th,td{padding:8px 9px; white-space:normal}
}
@media(prefers-reduced-motion:reduce){ .tile{transition:none} .detail{animation:none} }