:root{
  --bg:#07070c;--text:#e0ded8;--text-sub:#b0b0b0;--muted:#6b7280;--dim:#555;--dimmer:#444;
  --card-bg:rgba(255,255,255,0.02);--card-bd:rgba(255,255,255,0.06);
  --card-hbg:rgba(255,255,255,0.035);--card-hbd:rgba(255,255,255,0.1);
  --div:rgba(255,255,255,0.04);--div2:rgba(255,255,255,0.05);--div3:rgba(255,255,255,0.06);
  --inp-bg:rgba(255,255,255,0.05);--inp-bd:rgba(255,255,255,0.1);
  --tab-bg:rgba(255,255,255,0.07);--tab-bd:rgba(255,255,255,0.1);
  --ticker-bg:linear-gradient(90deg,#0a0a12,#0e0e1a,#0a0a12);
  --hover:rgba(255,255,255,0.03);--hover2:rgba(255,255,255,0.015);
  --badge-bg:rgba(255,255,255,0.05);--badge-bg2:rgba(255,255,255,0.04);
  --h-grad:linear-gradient(135deg,#e0ded8 30%,#888 100%);
  --glow1:rgba(6,182,212,0.03);--glow2:rgba(139,92,246,0.025);
  --skel1:rgba(255,255,255,0.04);--skel2:rgba(255,255,255,0.08);
  --scroll-thumb:rgba(255,255,255,0.1);
  --row-head:rgba(255,255,255,0.025);
}
.light{
  --bg:#f5f5f7;--text:#1a1a2e;--text-sub:#444;--muted:#6b7280;--dim:#9ca3af;--dimmer:#b0b0b0;
  --card-bg:#ffffff;--card-bd:rgba(0,0,0,0.08);
  --card-hbg:rgba(0,0,0,0.03);--card-hbd:rgba(0,0,0,0.15);
  --div:rgba(0,0,0,0.06);--div2:rgba(0,0,0,0.08);--div3:rgba(0,0,0,0.1);
  --inp-bg:rgba(0,0,0,0.03);--inp-bd:rgba(0,0,0,0.12);
  --tab-bg:rgba(0,0,0,0.06);--tab-bd:rgba(0,0,0,0.12);
  --ticker-bg:linear-gradient(90deg,#e8e8f0,#eff0f5,#e8e8f0);
  --hover:rgba(0,0,0,0.03);--hover2:rgba(0,0,0,0.015);
  --badge-bg:rgba(0,0,0,0.05);--badge-bg2:rgba(0,0,0,0.04);
  --h-grad:linear-gradient(135deg,#1a1a2e 30%,#555 100%);
  --glow1:transparent;--glow2:transparent;
  --skel1:rgba(0,0,0,0.04);--skel2:rgba(0,0,0,0.08);
  --scroll-thumb:rgba(0,0,0,0.15);
  --row-head:rgba(0,0,0,0.03);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px}
::selection{background:rgba(6,182,212,0.3)}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
@keyframes liveBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 8px rgba(6,182,212,0.2)}50%{box-shadow:0 0 20px rgba(6,182,212,0.4)}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-up{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) both}
.fade-up-d1{animation-delay:.05s}.fade-up-d2{animation-delay:.1s}.fade-up-d3{animation-delay:.15s}.fade-up-d4{animation-delay:.2s}
.skeleton{background:linear-gradient(90deg,var(--skel1) 25%,var(--skel2) 50%,var(--skel1) 75%);background-size:200% 100%;animation:shimmer 1.8s infinite;border-radius:6px}
body::before{content:'';position:fixed;top:-40%;left:-20%;width:80%;height:80%;background:radial-gradient(ellipse,var(--glow1) 0%,transparent 70%);pointer-events:none;z-index:0;transition:background .5s}
body::after{content:'';position:fixed;bottom:-30%;right:-15%;width:60%;height:60%;background:radial-gradient(ellipse,var(--glow2) 0%,transparent 70%);pointer-events:none;z-index:0;transition:background .5s}
#root{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
/* === Tablet (900px) === */
@media(max-width:900px){
  .grid-2col{grid-template-columns:1fr!important}
  .grid-index{grid-template-columns:repeat(3,1fr)!important}
  .grid-sector{grid-template-columns:repeat(2,1fr)!important}
  .header-wrap{padding:20px 16px 22px!important;flex-wrap:wrap!important}
  .main-wrap{padding:16px 16px 40px!important}
  .nav-wrap{padding:14px 16px 14px!important;margin-top:-14px!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-wrap::-webkit-scrollbar{display:none}
  .nav-btn{padding:12px 16px!important;min-height:44px!important}
  .stock-row{grid-template-columns:36px 1fr 90px 70px 100px 1.2fr 80px!important;font-size:13px!important}
  .stock-col-reason{font-size:12px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .search-wrap{width:100%!important;margin-bottom:12px!important}
  .search-wrap input{width:100%!important}
  .theme-dropdown{min-width:0!important;max-width:calc(100vw - 32px)!important}
  .card-pad{padding:16px 18px!important}
}
/* === Phone (600px) === */
@media(max-width:600px){
  .header-wrap{padding:14px 16px 18px!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important}
  .header-title{font-size:23px!important}
  .header-subtitle{display:none!important}
  .header-right{width:100%!important;display:flex!important;justify-content:space-between!important;align-items:center!important}
  .header-date{font-size:13px!important}
  .header-time-large{font-size:18px!important}
  .nav-wrap{gap:4px!important;padding:14px 16px 12px!important;margin-top:-14px!important;overflow-x:auto!important;flex-wrap:nowrap!important}
  .nav-btn{padding:10px 14px!important;font-size:14px!important;min-height:44px!important;white-space:nowrap!important;flex-shrink:0!important}
  .nav-btn-icon{font-size:13px!important}
  .grid-index{grid-template-columns:1fr 1fr!important;gap:6px!important}
  .grid-index .fade-up{padding:0!important}
  .grid-index a>div{padding:12px!important;border-radius:10px!important}
  .idx-value{font-size:16px!important}
  .idx-label{font-size:11px!important}
  .grid-sector{grid-template-columns:1fr!important}
  .stock-row{display:grid!important;grid-template-columns:32px 1fr auto!important;grid-template-rows:auto auto auto auto!important;padding:12px 16px!important;gap:2px 10px!important;font-size:15px!important;align-items:center!important}
  .stock-row.stock-row-header{display:none!important}
  .stock-col-rank{grid-row:1/3;align-self:center}
  .stock-col-name{grid-column:2;grid-row:1;font-size:15px!important;font-weight:600!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .stock-col-change{grid-column:3;grid-row:1;text-align:right!important;font-size:14px!important;white-space:nowrap}
  .stock-col-price{grid-column:2;grid-row:2;font-size:13px!important;font-weight:500!important;text-align:left!important;color:var(--text-sub)!important}
  .stock-col-volume{grid-column:3;grid-row:2;text-align:right!important;font-size:12px!important;color:var(--muted)}
  .stock-col-reason{grid-column:1/4;grid-row:3;font-size:12px!important;padding-left:0!important;margin-top:4px;line-height:1.4!important}
  .stock-col-tags{grid-column:1/4;grid-row:4;margin-top:4px}
  .stock-detail{padding:12px 16px!important}
  .stock-detail .stock-3axis{grid-template-columns:1fr!important}
  .stock-detail .stock-investor>div{min-width:0!important;flex:1!important}
  .card-pad{padding:14px!important}
  .theme-card{padding:16px!important}
  .theme-news-wrap{display:block!important;max-width:100%!important}
  .theme-layout{flex-wrap:wrap!important;gap:10px!important}
  .theme-right{width:100%!important;flex-direction:row!important;justify-content:flex-start!important;gap:16px!important}
  .theme-tags{gap:6px!important;overflow:hidden!important}
  .theme-tag{font-size:14px!important;padding:4px 9px!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .alltheme-layout{flex-wrap:wrap!important;gap:8px!important}
  .alltheme-right{width:100%!important;justify-content:flex-start!important;padding-left:48px!important}
  .theme-pct{font-size:21px!important}
  .ai-section{padding:14px 16px!important}
  .news-filter-btn{padding:8px 12px!important;font-size:13px!important;min-height:40px!important}
  .sector-stock-row{padding:12px 0!important}
  footer{flex-direction:column!important;text-align:center!important;padding:18px 16px!important}
}
/* === Small phone (400px) === */
@media(max-width:400px){
  .header-title{font-size:21px!important}
  .header-time-large{font-size:16px!important}
  .idx-value{font-size:15px!important}
  .theme-pct{font-size:19px!important}
}
/* === Sub-page specific === */
.page-wrap{max-width:900px;margin:0 auto;padding:40px 40px 60px}
.page-header{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;max-width:900px;margin:0 auto}
.page-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;transition:color .2s}
.page-back:hover{color:var(--text)}
.page-section{margin-bottom:32px}
.page-section h2{font-size:18px;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--div2)}
.page-section h3{font-size:15px;font-weight:600;margin:16px 0 8px;color:var(--text)}
.page-section p,.page-section li{font-size:14px;line-height:1.8;color:var(--text-sub)}
.page-section ul{padding-left:20px}
.page-section li{margin-bottom:4px}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:var(--dim);font-size:13px;transition:color .2s}
.footer-links a:hover{color:var(--text)}
.archive-grid{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
@media(max-width:900px){
  .archive-grid{grid-template-columns:1fr}
  .archive-grid .sticky-cal{position:static!important}
}
@media(max-width:600px){
  .page-wrap{padding:20px 16px 40px}
  .page-header{padding:14px 16px}
}