:root{--bg:#020c17;--panel:#041422;--line:#16466e;--text:#f7f9fc;--muted:#b7c8d9;--blue:#278be8;--green:#25c45e;--red:#ed4149;--yellow:#ffc328;--purple:#a45de1}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -25%,#08243a 0,#020c17 43%);color:var(--text);font-family:Inter,"Pretendard","Noto Sans KR","Malgun Gothic",Arial,sans-serif}.topbar{max-width:1780px;margin:auto;padding:18px 28px 10px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:16px;align-items:center}.brand h1{margin:0;font-size:30px;font-weight:950}.brand h1 em{font-size:11px;font-style:normal;color:#68aef5;border:1px solid #23527b;padding:3px 6px;border-radius:5px;vertical-align:middle}.brand p{margin:2px 0;font-size:13px}.logo-bars{width:54px;height:45px;display:flex;gap:5px;align-items:end}.logo-bars i{width:10px;border-radius:2px 2px 0 0;background:linear-gradient(#31d76f,#7cc73d)}.logo-bars i:nth-child(1){height:14px}.logo-bars i:nth-child(2){height:27px}.logo-bars i:nth-child(3){height:40px;background:linear-gradient(#28c9c8,#3bc66c)}.logo-bars i:nth-child(4){height:5px;background:#e73d51;position:absolute;width:54px}.tools{display:flex;gap:10px;align-items:center;font-size:13px}.tools button{border:1px solid #31506c;background:#020b14;color:white;padding:9px 13px;border-radius:9px;font-weight:800}.container{max-width:1780px;margin:auto;padding:0 28px 18px}.panel,.zone,.mini-guide{background:linear-gradient(135deg,rgba(4,20,34,.98),rgba(2,13,23,.98));border:1px solid var(--line);border-radius:12px}.top-metrics{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.08fr 1fr;gap:12px}.top-metrics article{padding:18px 22px;min-height:195px}.title{font-size:17px;font-weight:850}.title small{font-weight:500}.big{font-size:40px;font-weight:950;margin:12px 0 4px}.score-big{font-size:58px;color:var(--green)}.metric strong{font-size:17px}.metric p{font-size:15px;line-height:1.5;margin:0 0 7px}.neutral{color:white}.score-summary{font-size:16px;font-weight:800}.meter{height:9px;border-radius:9px;background:linear-gradient(90deg,#e94149 0,#e94149 37%,#efb847 49%,#2cc46c 66%,#22bd61 100%);margin-top:16px;position:relative}.meter b{position:absolute;width:13px;height:13px;background:#eaf0f5;border-radius:50%;top:50%;transform:translate(-50%,-50%)}.meter-label{display:flex;justify-content:space-between;margin-top:6px;font-size:12px}.meter-label span:first-child b{color:#ff4c52}.meter-label span:last-child b{color:#28ca6a}.level-strip{display:grid;grid-template-columns:1.05fr 1.05fr 1.05fr .8fr;margin-top:12px;overflow:hidden}.level-strip>div{padding:15px 24px;border-right:1px solid #22445e}.level-strip>div:last-child{border:0}.level-strip span{font-size:15px;font-weight:800}.level-strip b{font-size:30px;display:inline-block;margin:6px 15px 3px 0}.level-strip strong{color:#51aaff;font-size:19px}.level-strip p{font-size:12px;margin:0;color:#d2deea}.main-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(410px,.95fr);gap:10px;margin-top:12px}.map-card{padding:18px 22px}.map-head{display:flex;justify-content:space-between;align-items:center}.map-head h2{font-size:25px;margin:0}.map-head p{font-size:14px;margin:3px 0}.legend{display:flex;gap:20px;font-size:12px;flex-wrap:wrap}.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px}.legend .put{background:var(--blue)}.legend .call{background:var(--red)}.legend .now{background:var(--yellow);height:3px;width:18px;border-radius:0;vertical-align:middle}.chart-guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:14px;margin-top:8px}.chart-wrap{min-width:0}.axis-head{display:grid;grid-template-columns:1fr 126px 1fr;text-align:center;margin:0 4%;padding:7px 0;border-bottom:1px solid #14334c}.axis-head b:first-child{color:#40a6ff}.axis-head b:last-child{color:#ff4d54}.position-map{min-height:600px}.strike-row{display:grid;grid-template-columns:1fr 126px 1fr;align-items:center;min-height:27px;margin:0 3%;border-bottom:1px solid rgba(31,70,100,.38)}.leftbar,.rightbar{display:flex;align-items:center;height:20px}.leftbar{justify-content:flex-end}.bar-put,.bar-call{height:13px;border-radius:3px}.bar-put{background:linear-gradient(90deg,#1779d5,#329bf5)}.bar-call{background:linear-gradient(90deg,#df303a,#ee4d55)}.barlabel{font-size:11px;margin:0 6px}.strike{text-align:center;font-weight:850;font-size:13px}.strike-row.current{position:relative;border-top:1px dotted #e6ad00;border-bottom:1px dotted #e6ad00}.strike-row.current:before{content:"현재가 ▶";position:absolute;left:-4px;transform:translateX(-100%);color:var(--yellow);font-size:11px;font-weight:900}.strike-row.current .strike{font-size:18px;color:var(--yellow)}.xaxis{display:grid;grid-template-columns:1fr 126px 1fr;text-align:center;color:#c7d6e5;font-size:12px}.xaxis span:first-child{grid-column:1}.xaxis span:last-child{grid-column:3}.mini-guide{padding:20px 18px;align-self:stretch}.mini-guide h3{font-size:19px;margin:0 0 20px}.mini-guide div{margin:0 0 25px}.mini-guide b{font-size:12px}.mini-guide p{font-size:12px;line-height:1.6;color:#d2dfeb}.blue{color:#5aaaff}.red{color:#ff4d55}.purple{color:#bd70ff}.yellow{color:#ffc328}.zones{display:grid;grid-template-rows:repeat(3,1fr);gap:10px}.zone{padding:16px 14px}.zone h3{font-size:20px;margin:0 0 10px}.zone h3 span{font-weight:650}.zone-line{display:grid;grid-template-columns:1.65fr .9fr;border:1px solid currentColor;border-radius:10px;overflow:hidden;margin-top:7px}.zone-line>div{padding:9px 13px}.zone-line>div+div{border-left:1px solid currentColor}.zone-line small{display:block;font-size:12px;color:#d4dce6}.zone-line strong{display:block;font-size:22px;color:white;margin-top:3px}.zone-line b{display:block;font-size:17px;color:white;margin-top:5px}.zone p{font-size:12px;margin:10px 12px 0;color:#d8e2eb}.resistance{color:#ff4e55;border-color:#a82e33;background:linear-gradient(135deg,#1b0a0d,#10090b)}.battle{color:#b96dff;border-color:#7441a2;background:linear-gradient(135deg,#160b21,#0e0916)}.support{color:#42a6ff;border-color:#1763a1;background:linear-gradient(135deg,#061a2d,#04111e)}footer{max-width:1780px;margin:auto;padding:0 28px 20px;color:#b6c4d1;font-size:11px}.empty{text-align:center;padding:180px 0;color:#8fa7bd}
@media(max-width:1250px){.top-metrics{grid-template-columns:repeat(2,1fr)}.score-card{grid-column:span 2}.main-grid{grid-template-columns:1fr}.zones{grid-template-columns:repeat(3,1fr);grid-template-rows:none}.level-strip{grid-template-columns:repeat(2,1fr)}.chart-guide-layout{grid-template-columns:1fr 220px}}
@media(max-width:760px){.topbar{padding:12px;align-items:flex-start}.brand h1{font-size:20px}.brand p{font-size:10px}.logo-bars{width:38px;height:33px}.tools span,.tools button:last-child{display:none}.container{padding:0 8px 14px}.top-metrics{grid-template-columns:1fr 1fr;gap:7px}.top-metrics article{padding:13px;min-height:140px}.score-card{grid-column:span 2}.title{font-size:12px}.big{font-size:28px}.score-big{font-size:49px}.level-strip{grid-template-columns:1fr 1fr}.level-strip>div{padding:11px}.level-strip b{font-size:21px}.level-strip strong{font-size:13px}.main-grid{gap:8px}.map-card{padding:13px 7px}.map-head{display:block}.map-head h2{font-size:19px}.legend{gap:8px;margin-top:8px;font-size:9px}.chart-guide-layout{grid-template-columns:1fr}.mini-guide{display:none}.mini-guide.open{display:block}.axis-head,.strike-row{grid-template-columns:1fr 72px 1fr}.axis-head{font-size:10px;margin:0}.strike-row{margin:0;min-height:24px}.strike-row.current:before{display:none}.strike{font-size:10px}.barlabel{font-size:8px;margin:0 2px}.position-map{min-height:520px}.xaxis{grid-template-columns:1fr 72px 1fr}.zones{grid-template-columns:1fr}.zone h3{font-size:17px}.zone-line strong{font-size:20px}.zone-line b{font-size:14px}footer{padding:0 10px 15px}}


/* v0.51.2 — future expansion shell.
   Default remains the approved full-width dashboard.
   Rails are structurally ready and can be enabled later without rebuilding the dashboard. */
.app-shell{
  max-width:1920px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0 minmax(0,1fr) 0;
  transition:grid-template-columns .22s ease;
}
.shell-main{width:100%;min-width:0}
.side-rail{
  min-width:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  position:sticky;
  top:8px;
  height:calc(100vh - 16px);
}
.rail-placeholder{
  margin:0 8px;
  height:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(4,20,34,.98),rgba(2,13,23,.98));
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.rail-placeholder b{font-size:12px;color:#65b1ff;letter-spacing:.08em;margin-bottom:5px}
.rail-placeholder span{
  white-space:nowrap;
  padding:9px 10px;
  border-radius:8px;
  color:#c8d7e5;
  font-size:12px;
  border:1px solid transparent;
}
.rail-placeholder span:hover{border-color:#214b6e;background:#071b2c}
.shell-toggle{display:none!important}

/* Developer/preview switch: add class show-left-rail or show-right-rail to body.
   These classes are also used by the mobile drawer hooks already placed in HTML. */
body.show-left-rail .app-shell{grid-template-columns:210px minmax(0,1fr) 0}
body.show-right-rail .app-shell{grid-template-columns:0 minmax(0,1fr) 210px}
body.show-left-rail.show-right-rail .app-shell{grid-template-columns:210px minmax(0,1fr) 210px}
body.show-left-rail .left-rail,
body.show-right-rail .right-rail{opacity:1;pointer-events:auto}

@media (max-width:1450px){
  body.show-left-rail .app-shell,
  body.show-right-rail .app-shell,
  body.show-left-rail.show-right-rail .app-shell{grid-template-columns:minmax(0,1fr)}
  .side-rail{
    position:fixed;
    z-index:50;
    top:0;
    bottom:0;
    height:100vh;
    width:min(82vw,280px);
    background:#020c17;
    padding:10px 0;
  }
  .left-rail{left:0;transform:translateX(-102%);transition:transform .22s ease,opacity .18s ease}
  .right-rail{right:0;transform:translateX(102%);transition:transform .22s ease,opacity .18s ease}
  body.show-left-rail .left-rail{transform:translateX(0);opacity:1;pointer-events:auto}
  body.show-right-rail .right-rail{transform:translateX(0);opacity:1;pointer-events:auto}
}

/* Keep toggles invisible in phase 1. When menus are launched later,
   remove this rule or change display to inline-flex. */

.data-connection{font-weight:850;padding:6px 9px;border-radius:999px;border:1px solid #37526b}
.data-connection.connected{color:#35d879;border-color:#247f50;background:rgba(31,153,88,.08)}
.data-connection.partial{color:#ffc328;border-color:#80671d;background:rgba(255,195,40,.06)}
@media(max-width:900px){.data-connection{display:none}}

.unit-note{font-size:11px!important;color:#9fb8d1;margin:0 0 6px!important}
.raw-flow{margin-top:9px;font-size:12px;color:#d9e7f5;border-top:1px solid #173851;padding-top:8px}

.cost-basis{margin-top:8px;padding-top:8px;border-top:1px solid #173851;display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:end}
.cost-basis span{font-size:10px;color:#9fb8d1}
.cost-basis b{font-size:16px;color:#ffd05b}
.cost-basis small{grid-column:1/-1;font-size:9px;color:#7894b0;line-height:1.35}
@media(max-width:760px){.cost-basis b{font-size:14px}.cost-basis small{font-size:8px}}

.market-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:10px;
  overflow:hidden;
}
.market-strip article{
  padding:13px 22px;
  border-right:1px solid #22445e;
  min-height:78px;
}
.market-strip article:last-child{border-right:0}
.market-strip span{
  display:block;
  font-size:12px;
  font-weight:850;
  color:#cfe0f0;
}
.market-strip small{font-weight:500;color:#83a5c7}
.market-strip b{
  display:inline-block;
  font-size:25px;
  margin:6px 12px 0 0;
}
.index-change{font-size:12px;font-weight:850}
.up-index{color:#29d676}
.down-index{color:#ff5058}
.neutral-index{color:#9fb5ca}
@media(max-width:760px){
  .market-strip{grid-template-columns:1fr}
  .market-strip article{border-right:0;border-bottom:1px solid #22445e;min-height:auto;padding:10px 13px}
  .market-strip article:last-child{border-bottom:0}
  .market-strip b{font-size:21px}
}

.snapshot-cell p.snapshot-gap{font-size:10px;margin-top:4px}
.snapshot-gap.warn-gap{color:#ffbf3f}
.snapshot-gap.ok-gap{color:#42d98a}

.foreign-actual-box,.foreign-ref-box{border-top:1px solid #24445b;margin-top:7px;padding-top:6px}
.foreign-actual-box span,.foreign-ref-box span{font-size:10px;color:#9eb6ca;display:block}
.foreign-actual-box strong,.foreign-ref-box strong{font-size:15px;display:block;margin-top:2px}
.foreign-actual-box small,.foreign-ref-box small{font-size:8px;color:#668aa5;display:block;margin-top:2px;line-height:1.25}
.flow-up{color:#22d879}.flow-down{color:#ff4d58}

.probe-status{font-size:9px;margin-top:5px;padding:4px 6px;border-radius:6px;border:1px solid #31506c}
.probe-ok{color:#2cd77a;border-color:#257c51;background:rgba(31,153,88,.08)}
.probe-warn{color:#ffc928;border-color:#7e681e;background:rgba(255,201,40,.06)}