/* 공통 스타일. 금융 데이터 화면이라 숫자가 읽히는 걸 최우선으로 둔다. */
:root{
  --ground:#F5F6F8;
  --panel:#FFFFFF;
  --ink:#15181D;
  --ink-2:#3D4551;
  --muted:#6B7482;
  --rule:#DDE1E7;
  --rule-soft:#EBEEF2;
  --accent:#12506B;
  --accent-soft:#E7F0F4;
  --up:#C0392B;      /* 한국 관행: 상승=빨강 */
  --down:#1B62B5;    /* 하락=파랑 */
  --warn:#8A6A1C;
  --warn-bg:#FCF5E4;
  --head:#EDF1F5;
}

/* `hidden` 속성이 작성자 규칙에 지는 것을 막는다.
   .bar{display:flex} 같은 규칙이 UA 의 [hidden]{display:none} 보다 우선순위가 높아서,
   hidden 을 걸어도 그대로 보인다(2026-09-21 실측: 0종목인데 선택 바가 떠 있었다). */
[hidden]{display:none !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101318; --panel:#171B21; --ink:#E8ECF1; --ink-2:#C3CAD4;
    --muted:#8C96A4; --rule:#2A313B; --rule-soft:#222831;
    --accent:#5FB4CE; --accent-soft:#132F3B;
    --up:#E8776A; --down:#6BA6E8; --warn:#D6B463; --warn-bg:#2E2718;
    --head:#1D232B;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Segoe UI","Malgun Gothic",system-ui,-apple-system,sans-serif;
  font-size:13px; line-height:1.5;
}
button,input,select{font-family:inherit; font-size:13px; color:inherit}
button{cursor:pointer}
a{color:var(--accent)}

/* ── 로그인 ── */
.auth-wrap{
  min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--rule); border-radius:8px; padding:28px;
}
.auth h1{font-size:19px; margin:0 0 4px; letter-spacing:-.01em}
.auth .sub{color:var(--muted); font-size:12px; margin:0 0 22px}
.tabs{display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--rule)}
.tabs button{
  flex:1; background:none; border:0; padding:9px 0; color:var(--muted);
  border-bottom:2px solid transparent; font-weight:500;
}
.tabs button.on{color:var(--accent); border-bottom-color:var(--accent)}
.field{margin-bottom:13px}
.field label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px}
.field input{
  width:100%; padding:8px 10px; border:1px solid var(--rule);
  border-radius:5px; background:var(--ground);
}
.field input:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.btn{
  width:100%; padding:9px; border:0; border-radius:5px;
  background:var(--accent); color:#fff; font-weight:600;
}
.btn:disabled{opacity:.55; cursor:default}
.msg{margin-top:13px; font-size:12px; padding:9px 11px; border-radius:5px; display:none}
.msg.err{display:block; background:var(--warn-bg); color:var(--warn)}
.msg.ok{display:block; background:var(--accent-soft); color:var(--accent)}
.note{margin-top:16px; font-size:11px; color:var(--muted); line-height:1.6}

/* ── 앱 뼈대 ── */
.top{
  display:flex; align-items:center; gap:14px; padding:0 16px; height:48px;
  background:var(--panel); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:20;
}
.brand{font-weight:700; font-size:14.5px; letter-spacing:-.01em; white-space:nowrap}
.switch{display:flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden}
.switch button{
  background:var(--panel); border:0; padding:6px 14px; color:var(--muted); font-weight:600;
}
.switch button.on{background:var(--accent); color:#fff}
.switch button[hidden]{display:none}   /* 2026-11-02 포트 단추 숨김(사용자) — 폰 폭 flex 규칙이 덮지 않게 */
.top .spacer{flex:1}
.top .who{color:var(--muted); font-size:12px; white-space:nowrap}
.top .lnk{
  background:none; border:1px solid var(--rule); border-radius:5px;
  padding:5px 10px; color:var(--ink-2);
}
.asof{
  font-size:11.5px; color:var(--muted); background:var(--head);
  padding:3px 9px; border-radius:99px; white-space:nowrap;
}
.asof.stale{background:var(--warn-bg); color:var(--warn); font-weight:600}
/* 2026-10-07(주식 탭 — 사용자 "주식 탭 화면 이어서") 좁은 화면 머리말: 최상위 전환(.switch)은 overflow:hidden 이라 flex 가 0 까지 줄일 수 있어,
   줄지 않는 글자(브랜드 · 기준일 · 이름 · 로그아웃)에 밀려 375px 에서 2px · 700px 에서 137/224px 로 눌려 탭을 못 골랐다(실측 — 주식 탭을 더하기 전에도 같았다).
   → 전환은 줄지 않게, 대신 기준일 · 자동 갱신 칩이 말줄임으로 줄고(전체는 툴팁), 폰 폭(640px 이하)은 머리말 두 줄 — 둘째 줄 = 전환 4칸이 폭을 나눠 가진다 */
.switch{flex-shrink:0}
.top .lnk{flex-shrink:0; white-space:nowrap}
.top .asof{min-width:0; overflow:hidden; text-overflow:ellipsis}
.top .asof.auto{flex-shrink:4}             /* 자동 갱신 칩이 먼저 준다 — 기준일이 더 중요하다 */
@media (max-width:640px){
  .top{flex-wrap:wrap; height:auto; min-height:48px; padding:6px 12px; gap:6px 10px}
  .switch{order:10; flex:1 0 100%}
  .switch button{flex:1 1 0; padding:6px 4px}
}
@media (max-width:480px){
  .top .brand{display:none}                /* 375px 첫 줄에 기준일 · 이름 · 로그아웃이 들어가게(전환 4칸이 화면 이름을 대신한다) */
}

main{padding:14px 16px 40px}
.bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.bar input[type=search]{
  padding:7px 11px; border:1px solid var(--rule); border-radius:5px;
  background:var(--panel); min-width:230px;
}
.bar select{
  padding:6px 8px; border:1px solid var(--rule); border-radius:5px; background:var(--panel);
  max-width:150px;
}
.bar .count{color:var(--muted); font-size:12px; margin-left:auto}
.bar .reset{background:none; border:1px solid var(--rule); border-radius:5px; padding:6px 10px}

.tablewrap{
  background:var(--panel); border:1px solid var(--rule); border-radius:7px;
  overflow:auto; max-height:calc(100vh - 175px);
}
table{border-collapse:separate; border-spacing:0; width:100%; font-variant-numeric:tabular-nums}
th,td{padding:5px 9px; white-space:nowrap; border-bottom:1px solid var(--rule-soft)}
thead th{
  position:sticky; top:0; background:var(--head); z-index:2;
  font-size:11.5px; font-weight:600; color:var(--ink-2); text-align:left;
  cursor:pointer; user-select:none; border-bottom:1px solid var(--rule);
}
thead th.num{text-align:right}
thead th .ar{color:var(--accent); margin-left:3px}
td.num{text-align:right}
td.up{color:var(--up)} td.down{color:var(--down)}
tbody tr:hover{background:var(--accent-soft)}
td.code{font-family:Consolas,"Courier New",monospace; color:var(--muted)}
td.name{font-weight:600; position:sticky; left:0; background:var(--panel)}
tbody tr:hover td.name{background:var(--accent-soft)}
.badge{
  display:inline-block; padding:1px 6px; border-radius:99px;
  background:var(--warn-bg); color:var(--warn); font-size:11px; font-weight:600;
}

/* ── 격자(매크로 시트 원본 배치) ── */
.grid{background:var(--panel); border:1px solid var(--rule); border-radius:7px;
      overflow:auto; max-height:calc(100vh - 150px); padding:2px}
.grid table{width:auto; min-width:100%}
.grid td{border-bottom:1px solid var(--rule-soft); font-size:12px}
.grid td.t{font-weight:700; color:var(--accent); font-size:13.5px; padding-top:14px}
.grid td.h{background:var(--head); font-weight:600; font-size:11.5px}
.grid td.n{text-align:right; font-variant-numeric:tabular-nums}
.grid td.note{color:var(--muted); font-size:11px}
.grid td.warn{background:var(--warn-bg); color:var(--warn)}
.subtabs{display:flex; gap:6px; margin-bottom:11px; flex-wrap:wrap}
.subtabs button{
  background:var(--panel); border:1px solid var(--rule); border-radius:6px;
  padding:6px 13px; color:var(--muted); font-weight:600;
}
.subtabs button.on{background:var(--accent); color:#fff; border-color:var(--accent)}
/* 서브탭 안의 작은 전환(2026-09-30 — ETF › 미국 ETF 의 목록 · 출처상세 · 필드정의).
   최상위 .switch 와 같은 붙은 버튼 모양이되 한 단계 작고, 켜진 칸은 옅은 색 — 위의 서브탭(진한 색)과 층이 구분되게 */
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden; margin-bottom:10px}
.seg button{
  background:var(--panel); border:0; border-left:1px solid var(--rule);
  padding:3px 11px; font-size:12px; color:var(--muted); font-weight:600;
}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--accent-soft); color:var(--accent)}
.empty{padding:40px; text-align:center; color:var(--muted)}

/* ── 관리 ── */
.admin{max-width:900px; margin:0 auto}
.admin h2{font-size:16px; margin:18px 0 10px}
.admin table{background:var(--panel); border:1px solid var(--rule); border-radius:7px}
.admin td,.admin th{border-bottom:1px solid var(--rule-soft)}
.pill{padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600}
.pill.pending{background:var(--warn-bg); color:var(--warn)}
.pill.active{background:var(--accent-soft); color:var(--accent)}
.pill.blocked{background:var(--rule-soft); color:var(--muted)}
.act{border:1px solid var(--rule); background:var(--panel); border-radius:4px;
     padding:3px 9px; margin-right:4px}

/* ── 열 선택기 ──────────────────────────────────────────────────────────────
   표가 30열(국내)·32열(미국)이라 다 켜면 가로로 흐른다. 기본은 서버가 정한
   `shown` 만 켜 두고, 나머지는 여기서 켠다. <details> 라 JS 없이 열고 닫힌다. */
.colpick{position:relative}
.colpick>summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:6px 10px; border:1px solid var(--rule); border-radius:5px;
  background:var(--panel); font-size:13px;
}
.colpick>summary::-webkit-details-marker{display:none}
.colpick>summary::after{content:" ▾"; color:var(--muted)}
.colpick[open]>summary{border-color:var(--accent); color:var(--accent)}
.colpick>div{
  position:absolute; z-index:20; top:calc(100% + 4px); left:0;
  width:330px; max-height:60vh; overflow:auto;
  display:flex; flex-wrap:wrap; gap:2px 10px;
  background:var(--panel); border:1px solid var(--rule); border-radius:6px;
  padding:10px 12px; box-shadow:0 6px 20px rgba(0,0,0,.13);
}
.colpick label{
  display:flex; align-items:center; gap:5px;
  width:calc(50% - 5px); font-size:12px; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.colpick input[type=checkbox]{accent-color:var(--accent); margin:0}
.colpick .mini{
  margin-top:8px; padding:4px 10px; font-size:12px;
  background:none; border:1px solid var(--rule); border-radius:5px; cursor:pointer;
}
.colpick .mini:hover{border-color:var(--accent); color:var(--accent)}

/* ── 선택 · 내 그룹 ─────────────────────────────────────────────────────────
   전체목록에서 체크한 종목을 그룹에 담는 줄. 체크한 게 있을 때만 나타난다. */
.selbar{
  background:var(--accent-soft); border:1px solid var(--rule);
  border-radius:6px; padding:8px 10px; margin:-4px 0 12px;
}
.selbar input{
  padding:6px 9px; border:1px solid var(--rule); border-radius:5px;
  background:var(--panel); min-width:180px;
}
.selbar .go{
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:5px; padding:6px 12px; cursor:pointer;
}
.selbar .go:hover{filter:brightness(1.1)}
th.chk,td.chk{width:26px; text-align:center; padding-left:6px; padding-right:2px}
th.chk input,td.chk input{accent-color:var(--accent); margin:0; cursor:pointer}
th.grp,td.grp{width:88px; white-space:nowrap}
.tag{
  display:inline-block; max-width:84px; overflow:hidden; text-overflow:ellipsis;
  vertical-align:bottom; padding:1px 6px; border-radius:3px; font-size:11px;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--rule);
}
.bar.sub{margin:-6px 0 10px}
.hint{color:var(--muted); font-size:12px}

/* ── 리밸런싱 · 채권특성 · 열 설명(2026-10-02) ──────────────────────────────
   0~7일 남은 리밸런싱 = 경고색 바탕(엑셀 '리밸런싱일정' 의 노랑과 같은 뜻 — 방향색 아님) */
td.soon{background:var(--warn-bg); color:var(--warn); font-weight:600}
/* 2026-11-11 코드 검토: 어디서도 안 쓰는 규칙 27개를 지웠다(저장소 전체 js · html · py 에 그 클래스 이름 0 · 조립되는 접두어 계열은 남김) —
   .soon-t · td.rebal-go(리밸런싱 탭 삭제 2026-10-19) · .mm-gauge · .mm-gbar · .mm-gs · .mm-gm · .mm-gl · .mm-blank(옛 가로 눈금 — 반원 계기판으로 바뀜) ·
   .ua-list · .ua-mixc · .ua-tick · .ua-rng · .ua-row3 · .ua-dvs3 · .ua-dvb · .ua-dv0 · .ua-dvs · .ua-rv3 · .ua-sty.ua-active(자산배분형 옛 판) · .er-gnote */
td.est{cursor:help; text-decoration:underline dotted var(--rule); text-underline-offset:3px}
td.opener{cursor:pointer}
.tw{display:inline-block; width:12px; color:var(--muted); font-size:10px}
tr.detail td{white-space:normal; background:var(--head); border-bottom:1px solid var(--rule)}
tr.detail:hover{background:none}
.detail-in{max-width:1100px; font-size:12px; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere}
.detail-in div{margin:2px 0}
.detail-in b{color:var(--ink); margin-right:4px}
.fielddoc>div{display:block; width:min(640px, calc(100vw - 40px))}
table.fd{width:100%}
table.fd th{position:static; background:none; text-align:left; vertical-align:top; font-size:12px; white-space:nowrap; cursor:default; padding:3px 8px 3px 0}
table.fd td{white-space:normal; font-size:12px; color:var(--ink-2); padding:3px 0}
.fd-src{margin-top:6px; font-size:11px}
.asof.auto{cursor:help}
@media (max-width:640px){
  #auto-chip{display:none}                 /* 머리말이 좁다 — 자동 갱신 상태는 기준일 칩 툴팁 대신 넓은 화면에서 */
}

/* ── Monitor — 그룹 블록 ── */
.gblock{margin-bottom:22px}
.ghead{
  display:flex; align-items:center; gap:10px; padding:6px 2px 8px;
  border-bottom:2px solid var(--accent);
}
.ghead b{font-size:14px}
.ghead .mini{padding:3px 9px; font-size:12px; cursor:pointer}
tr.gavg td{background:var(--head); font-weight:600}
td.gname{font-weight:700; color:var(--accent)}

/* ── 섹터지수 — 정렬 기준 열의 상위/하위 5개 ──────────────────────────────
   128개 지수를 훑을 때 '어디가 튀는가' 만 먼저 눈에 들어오게 한다.          */
tr.hot  td{background:color-mix(in srgb, var(--up) 9%, transparent)}
tr.cold td{background:color-mix(in srgb, var(--down) 9%, transparent)}
tr.hot  td:first-child{box-shadow:inset 3px 0 0 var(--up)}
tr.cold td:first-child{box-shadow:inset 3px 0 0 var(--down)}
.hot-t{color:var(--up)}
.cold-t{color:var(--down)}

/* ── 섹터 주간 순위표 ── */
.rk{
  display:inline-block; min-width:17px; margin-right:6px; padding:0 4px;
  border-radius:3px; font-size:10px; font-weight:700; text-align:center;
  color:#fff; vertical-align:1px;
}
.rk.hot{background:var(--up)}
.rk.cold{background:var(--down)}

/* ── Monitor — 모델 신호 ─────────────────────────────────────────────────────
   방향(매수/매도)을 칠하지 않는다. 추세계열과 역추세계열이 서로 반대를 가리키고,
   MACD 의 Strong_Buy 는 MACD 가 역대 저점일 때 뜬다 — 어느 쪽으로 칠해도 오해를
   만든다. '신호가 떴다' 만 눈에 띄게 하고 판단은 사람이 한다.                  */
td.sig, span.sig{
  color:var(--accent); font-weight:600;
  background:var(--accent-soft); border-radius:3px;
}
span.sig{padding:1px 5px; font-size:11px}
td.mute{color:var(--muted); opacity:.65}
/* 참고 표시(count=False — 단순모멘텀 · RSI다이버전시): 신호가 떠도 sig 보다 옅게 — 선정수에 안 센다(2026-10-02) */
td.sigref, span.sigref{
  color:var(--accent); background:color-mix(in srgb, var(--accent-soft) 45%, transparent);
  border-radius:3px; border:1px dashed var(--rule);
}
span.sigref{padding:0 5px; font-size:11px}
td.memo{opacity:1}
td.selN{color:var(--accent); font-weight:700}
tr.sel td{background:color-mix(in srgb, var(--accent) 5%, transparent)}

/* 행 끝 '이 그룹에서 빼기' */
th.del,td.del{width:24px; padding:0 2px; text-align:center}
td.del button{
  background:none; border:0; color:var(--muted); cursor:pointer;
  font-size:15px; line-height:1; padding:2px 4px; border-radius:3px;
}
td.del button:hover{color:var(--up); background:var(--rule-soft)}

/* ── 포트(EMP) — 무채색만(방향 색 없음) ── */
.badge.assume { background: var(--rule-soft); color: var(--muted); border: 1px solid var(--rule); }
.port-block { margin: 6px 0 14px; }
.port-h { font-weight: 600; margin: 4px 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.port-small { max-height: none; }
.port-meta { line-height: 1.5; }
.port-notes { margin: 6px 0 0 18px; color: var(--muted); font-size: 12px; }
.corr td.num { padding: 2px 6px; min-width: 44px; }
.corr th { font-size: 11px; font-weight: 500; }
.rcbar { display: inline-block; height: 8px; background: var(--muted); opacity: .55; border-radius: 2px; vertical-align: middle; }
span.mute, td.mute { color: var(--muted); }
.port-block thead th { cursor: default; }
.port-block th.rowh { font-weight: 500; text-align: left; background: none; color: var(--ink); position: static; }
.port-cap { font-size: 12px; margin: 4px 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── 내 포트(P4.3) — 무채색만 ── */
#pm-edit input.pm-code { width: 90px; padding: 3px 6px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
#pm-edit input.pm-w { width: 72px; padding: 3px 6px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); text-align: right; }
td.pm-x { width: 24px; padding: 0 2px; text-align: center; }
td.pm-x button { background: none; border: 0; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 3px; }
td.pm-x button:hover { color: var(--ink); background: var(--rule-soft); }
.pm-addbar { margin: 6px 4px; }
#port-myv .bar button, #port-myv .pm-addbar button { border: 1px solid var(--rule); border-radius: 5px; padding: 5px 10px; background: var(--panel); }
#port-myv .bar button:disabled { opacity: .45; cursor: not-allowed; }
#port-myv .bar input, #port-myv .bar select { padding: 5px 8px; border: 1px solid var(--rule); border-radius: 5px; background: var(--panel); }

/* ── 매크로 대시보드 한눈에(2026-09-25) — 색 없음, 이례는 굵게만 ── */
.md-bar{position:sticky; top:-2px; z-index:5; background:var(--panel); padding:8px 6px 6px; margin:0}
.md-bar input[type=search]{min-width:280px}
.md-chk{font-size:12.5px; display:inline-flex; gap:4px; align-items:center; color:var(--ink-2)}
.md-sub{margin:0 6px 8px; font-size:11.5px}
.md-card{margin:0 4px 14px}
.md-h{font-weight:700; color:var(--accent); margin:6px 2px 6px; font-size:13px}
.grid table.md-table{border-collapse:separate; border-spacing:0; width:auto; min-width:0}
.md-table thead th{position:sticky; top:44px; background:var(--head); z-index:3; font-size:11.5px; padding:5px 8px; text-align:left; white-space:nowrap}
.md-table th.md-lab{position:sticky; left:0; background:var(--panel); z-index:2; min-width:260px; max-width:340px; text-align:left; font-weight:500}
.md-table thead th.md-lab{z-index:4; background:var(--head)}
.md-table tr.md-g th{background:var(--rule-soft); font-weight:700; text-align:left; padding:9px 8px 5px; font-size:12.5px}
.md-table tr.md-g th.md-gname{position:sticky; left:0; z-index:2}
.md-table tr.md-g th.md-m{font-weight:600; font-size:11px; color:var(--muted); text-align:right}
.md-table tr.md-sec td{font-weight:700; color:var(--accent); padding-top:16px; font-size:13.5px}
.md-table td, .md-table th{padding:4px 8px}
.md-table td.num, .md-table th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.md-table td.md-asof{color:var(--muted); font-size:11.5px; white-space:nowrap}
.md-table td.md-m{color:var(--ink-2)}
.md-table tbody tr:hover td, .md-table tbody tr:hover th.md-lab{background:var(--accent-soft)}
.zhot{font-weight:700}
.md-notes{margin:6px 4px 4px 22px; color:var(--muted); font-size:11.5px; line-height:1.6}

/* 비교 — 구성종목 합집합(2026-09-25). 비중에 방향 색 없음 */
#cmp-hold { margin-top: 18px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cmp-chip { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--rule); border-radius: 14px;
            padding: 3px 10px; font-size: 12px; background: var(--bg, transparent); cursor: pointer; }
.cmp-chip.dis { opacity: .5; cursor: default; }
.cmp-chip.add input { border: none; background: transparent; font-size: 12px; width: 150px; outline: none; color: inherit; }
.cmp-help { font-size: 12px; margin: 4px 0 8px; }
.cmp-ctrl { margin-top: 12px; }
.cmp-ctrl button { background: none; border: 1px solid var(--rule); border-radius: 5px; padding: 5px 10px; color: inherit; cursor: pointer; }
.cmp-ctrl button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cmp-ctrl button:disabled { opacity: .4; cursor: default; }

/* ═══ 매크로 웹 화면(2026-09-25, static/macro.js) — 색은 방향을 뜻하지 않는다(--up/--down 안 씀) ═══ */
.mc-top{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px}
.mc-chips{display:flex; flex-wrap:wrap; gap:6px}
.mc-chip{font-size:11.5px; border:1px solid var(--rule); border-radius:12px; padding:3px 10px; color:var(--ink-2); background:var(--panel)}
button.mc-chip{cursor:pointer; font:inherit; font-size:11.5px}
.mc-chip.warn{background:var(--warn-bg); color:var(--warn); border-color:transparent}
#mc-q{flex:1; min-width:240px; max-width:520px; padding:7px 10px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:inherit}
.mc-noticebox{background:var(--warn-bg); color:var(--warn); border-radius:6px; padding:8px 12px; margin:0 0 10px; font-size:12px}
.mc-noticebox ul{margin:4px 0 0 18px; padding:0; line-height:1.6}
.mc-sec{margin:0 0 18px}
.mc-sh{font-weight:700; color:var(--accent); font-size:13.5px; margin:8px 2px 8px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.mc-sh .mute{font-weight:400; font-size:11.5px}
.mc-link{background:none; border:0; color:var(--accent); font-size:12px; cursor:pointer; padding:0}
.mc-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px}
.mc-card{text-align:left; background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:9px 11px 6px; color:inherit; cursor:pointer; font:inherit; display:flex; flex-direction:column; gap:3px; min-height:40px}
.mc-card:hover, .mc-card:focus-visible{border-color:var(--accent); outline:none; background:var(--accent-soft)}
.mc-card.hot{min-width:200px; scroll-snap-align:start}
.mc-ch{display:flex; justify-content:space-between; gap:6px; align-items:baseline}
.mc-name{font-size:12px; color:var(--ink-2); font-weight:600}
.mc-cv{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.mc-unit{font-size:11px; color:var(--muted); font-weight:500; margin-left:2px}
.mc-asof{font-size:10.5px; color:var(--muted); margin-left:8px; font-weight:400}
.mc-cd{font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.mc-cs{font-size:11px}
.mc-warn{color:var(--warn); font-weight:600}
.mc-z{font-size:11px; color:var(--muted); border:1px solid transparent; border-radius:10px; padding:0 6px; font-variant-numeric:tabular-nums}
.mc-z.hot{color:var(--ink); border-color:var(--ink-2); font-weight:700}
.mc-spark{width:100%; height:30px; margin-top:2px}
.mc-spark path{fill:none; stroke:var(--accent); stroke-width:1.5}
.mc-spark circle{fill:var(--accent)}
.mc-spark .mc-base, .mc-chart .mc-base{stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3}
.mc-strip{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 6px}
.mc-strip .mc-card{flex:0 0 210px}
.mc-fq{display:inline-block; min-width:14px; font-size:10.5px; color:var(--muted); border:1px solid var(--rule); border-radius:4px; text-align:center; padding:0 3px}
.mc-bandsum{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:6px 12px 10px; font-size:12.5px; line-height:1.6}
.mc-bandline{font-size:12.5px; line-height:1.6}
.mc-jump{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; position:sticky; top:-2px; z-index:4; background:var(--ground); padding:6px 0}
.mc-jump button{border:1px solid var(--rule); background:var(--panel); border-radius:12px; padding:3px 10px; font-size:11.5px; color:var(--ink-2); cursor:pointer}
.mc-jump button:hover{border-color:var(--accent); color:var(--accent)}
.mc-more{margin-top:8px}
.mc-more summary{cursor:pointer; font-size:12px; color:var(--accent); padding:4px 2px}
table.mc-list{border-collapse:collapse; width:100%; background:var(--panel); border:1px solid var(--rule); border-radius:6px; font-size:12px}
.mc-list th, .mc-list td{padding:5px 8px; border-bottom:1px solid var(--rule-soft); text-align:left}
.mc-list thead th{background:var(--head); font-size:11.5px; font-weight:600; color:var(--ink-2)}
.mc-list .num, .mc-list th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.mc-list td.name, .mc-list th.name{font-weight:500}
.mc-list tr.mc-row{cursor:pointer}
.mc-list tr.mc-row:hover td, .mc-list tr.mc-row:focus-visible td{background:var(--accent-soft)}
.mc-list td.mc-sp{width:64px; padding:2px 6px}
.mc-list td.mc-sp .mc-spark{height:16px; margin:0}
.mc-list td.mc-sp .mc-spark path{stroke-width:1.2}
.mc-country .mc-cc{cursor:pointer; line-height:1.2}
.mc-country .mc-cc:hover, .mc-country .mc-cc:focus-visible{background:var(--accent-soft); outline:none}
.mc-sub{display:block; font-size:10.5px; color:var(--muted)}
/* 2026-10-19 금리 탭 나라 표 — 곡선 아래 · 스프레드 위(사용자) · 표 꼴 = .mc-list(만기표와 같게) · 상자 최대 760px · 폰은 상자 안에서만 가로로 · 칸 셋째 줄 = 기준(asof) */
.mc-ctwrap{overflow-x:auto; max-width:none}   /* 2026-10-20 사용자 '가로 확대' — 760px 제한을 풀어 섹션 폭 전체 */
.mc-country th, .mc-country td{padding:3px 14px}   /* 2026-10-20 세로 줄임(5px 8px → 3px · 칸 2줄) */
.mc-country .mc-cc{line-height:1.15}
.mc-country .mc-ccdd{font-size:10.5px; color:var(--muted); margin-left:6px}
.mc-country th.name{white-space:nowrap}
.mc-country .mc-ccd{font-size:10px}
.mc-country td.mc-ccnone{vertical-align:middle}
/* 2026-10-19 금리밴드 '모형 이견' — 상자 최대 738px(안쪽 720 = macro.js DIS_MAXW) · 그림은 안쪽 폭 1:1(글자 10.5px 그대로 — 전엔 width 100% 로 늘어 1100px 에서 1.9배) */
.mc-dis{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:6px 8px 2px; max-width:738px}
/* 2026-10-19 같은 날(사용자 "모형 이견이 짧으니까 맘에 든다 — 사진 옆에 모형 표"): 넓은 창 = 왼쪽 그림 상자 · 오른쪽 모형 표(.mc-distbl). 표가 먼저 제 폭(내용 폭)을 받고
   그림 상자가 나머지(318~738px — 안쪽 300~720 = macro.js disChart 가 재는 폭 · flex-grow 1000 이라 738 까지는 그림이 다 먹고 그 뒤 남는 폭은 표가 채운다).
   그림 상자 폭은 flex-basis · min-width 로만 정한다(min-width:auto 면 그린 SVG 폭이 상자 최소 폭이 된다). 그보다 좁으면 표만 .mc-xwrap 안에서 가로로.
   비고 글(.hint)은 width 0 · min-width 100% — 한 줄 긴 글이 표 칸 폭을 늘리지 않게. 900px 이하 = 위아래(그림 → 표 · 예전 폭) */
.mc-dispair{display:flex; gap:8px 14px; align-items:flex-start}
.mc-dispair > .mc-dis{flex:1000 1 318px; min-width:318px}
.mc-dispair > .mc-distbl{flex:1 1 auto; min-width:0}
.mc-distbl .hint{width:0; min-width:100%; margin-top:4px}
.mc-distbl .mc-models th, .mc-distbl .mc-models td{padding:5px 6px}   /* 칸 좌우 8 → 6px(11칸 = 44px — 1,100px 창에서 그림 몫 · 950px 창에서 표가 상자 안에 다 든다) */
@media (max-width:900px){ .mc-dispair{display:block} .mc-dispair > .mc-dis{min-width:0} .mc-dispair > .mc-distbl{margin-top:8px} }
/* 금리밴드 모형 표 · 진단 · 계수 — 폰 폭에선 이 상자 안에서만 가로로(전엔 금리밴드 화면 전체가 옆으로 밀렸다) · 진단 비고 칸은 줄바꿈 */
.mc-xwrap{overflow-x:auto; max-width:100%}
.mc-diag td.mute{white-space:normal; min-width:14em}
/* 2026-10-19 표 탭 행 = 한눈에처럼 상세 서랍(macro.js dashIds — tr.md-row[data-id][tabindex=0]) */
.md-table tr.md-row{cursor:pointer}
.md-table tr.md-row:focus-visible td, .md-table tr.md-row:focus-visible th.md-lab{background:var(--accent-soft)}
.mc-curve, .mc-bigchart, .mc-dchart{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:6px 8px 2px; margin:0 0 8px}
.mc-chart{display:block; max-width:100%; height:auto}
.mc-chart .mc-grid{stroke:var(--rule-soft); stroke-width:1}
.mc-chart .mc-tick{font-size:10.5px; fill:var(--muted)}
.mc-chart .mc-tick.strong{fill:var(--ink); font-weight:700}
.mc-chart .mc-line{fill:none; stroke-width:1.8; stroke-linejoin:round; stroke:var(--accent)}
.mc-chart .mc-line.now{stroke:var(--ink); stroke-width:2}
.mc-chart .mc-line.m1{stroke:var(--ink-2); stroke-dasharray:5 3}
.mc-chart .mc-line.y1{stroke:var(--muted); stroke-dasharray:2 3}
.mc-chart .mc-line.fair{stroke:var(--accent)}
.mc-chart .mc-last{font-size:10.5px; fill:var(--ink); font-weight:600}
.mc-chart .mc-band{fill:var(--rule-soft); stroke:none}
.mc-chart .mc-band.b1{fill:var(--rule)}
.mc-chart .mc-band.b2{fill:var(--rule-soft)}
.mc-chart .mc-fair{fill:var(--accent)}
.mc-chart .mc-actual{stroke:var(--ink); stroke-width:1.5}
.mc-chart .mc-xline{stroke:var(--ink-2); stroke-width:1; stroke-dasharray:2 2}
.mc-chart .mc-tip{font-size:11px; fill:var(--ink); font-weight:600; paint-order:stroke; stroke:var(--panel); stroke-width:3px}
.mc-chart .mc-mname{cursor:pointer}
.mc-chart .mc-mname.on{fill:var(--accent); font-weight:700}
.mc-legend{display:flex; gap:12px; font-size:11px; color:var(--ink-2); padding:2px 4px 4px}
.mc-lg::before{content:""; display:inline-block; width:18px; height:0; border-top:2px solid var(--ink); margin-right:5px; vertical-align:middle}
.mc-lg.m1::before{border-top:2px dashed var(--ink-2)} .mc-lg.y1::before{border-top:2px dotted var(--muted)} .mc-lg.fair::before{border-top-color:var(--accent)}
.mc-lg.b1::before, .mc-lg.b2::before{border:0; height:8px; background:var(--rule)} .mc-lg.b2::before{background:var(--rule-soft)}
.mc-tenor th.name{white-space:nowrap}
/* 2026-10-19 금리 탭 — 미국 국채 곡선 왼쪽 · 국고채 곡선 오른쪽 반반(사용자). 900px 이하는 위아래 한 열. 만기표(3M 부터 10칸)는 반쪽 폭에서 상자 안에서만 가로로 민다 */
.mc-curves{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 14px; align-items:start}
.mc-curves > .mc-sec{min-width:0}
.mc-tenwrap{overflow-x:auto; max-width:100%}
.mc-tenwrap .mc-tenor th, .mc-tenwrap .mc-tenor td{padding:5px 6px}
@media (max-width:900px){ .mc-curves{grid-template-columns:minmax(0, 1fr)} }
.mc-models tr.mc-mrow{cursor:pointer} .mc-models tr.mc-mrow.on td{background:var(--accent-soft); font-weight:600}
.mc-smalls{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; margin-top:8px}
.mc-small{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:6px 8px 2px; cursor:pointer}
.mc-small.on, .mc-small:hover{border-color:var(--accent)}
.mc-sl{font-size:11.5px; color:var(--ink-2); font-weight:600; margin:0 0 2px}
.mc-bar i{display:inline-block; width:7px; height:9px; margin-right:2px; background:var(--rule-soft); border-radius:1px}
.mc-bar i.on{background:var(--ink-2)}
.mc-drawer{position:fixed; top:0; right:0; height:100dvh; width:min(600px, 100%); background:var(--panel); border-left:1px solid var(--rule); box-shadow:-8px 0 24px rgba(0,0,0,.12); z-index:50; overflow:auto; padding:14px 16px 24px; box-sizing:border-box}
.mc-noscroll{overflow:hidden}
.mc-dh{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.mc-dt{font-size:16px; font-weight:700} .mc-dm{font-size:11.5px; color:var(--muted); margin-top:2px} .mc-dm code{font-size:11px}
.mc-close{background:none; border:1px solid var(--rule); border-radius:6px; font-size:18px; line-height:1; padding:2px 9px; cursor:pointer; color:inherit}
/* 2026-11-04 서랍 '엑셀로 다운로드'(macro.js xlsxBtn · xlsxMsg) — 닫기 옆 · 나만의 차트 머리는 .mc-link 그대로 · 방향색 없음 */
.mc-dact{display:flex; gap:6px; align-items:flex-start; flex-shrink:0}
.mc-xlsx{background:none; border:1px solid var(--rule); border-radius:6px; font-size:12px; line-height:1.25; padding:4px 9px; cursor:pointer; color:inherit; white-space:nowrap; font-family:inherit}
.mc-xlsx:hover:not(:disabled){border-color:var(--accent); color:var(--accent)} .mc-xlsx:disabled, .mc-link[data-xlsx]:disabled{opacity:.6; cursor:progress}
.mc-xlsxmsg{font-size:11.5px; color:var(--muted); margin-left:6px; overflow-wrap:anywhere} .mc-dh .mc-xlsxmsg{display:block; margin:3px 0 0}
.mc-xlsxmsg:empty{display:none} .mc-xlsxmsg.bad{color:var(--warn)}
.mc-ds{font-size:12px; margin:8px 0}
.mc-drows{margin:10px 0}
.mc-dtabs{margin:8px 0 6px} .mc-dtabs .spacer{flex:1}
/* 차트 보기 추세 · 증감 · 전년비(2026-10-15) — 창 단추 줄 오른쪽 붙은 단추 · 증감 막대는 선과 같은 한 가지 색(방향색 아님) */
.mc-dtabs .mc-views{margin:0; align-self:center} .mc-dtabs .mc-views button{border-radius:0}
.mc-chart .mc-col{fill:var(--ink-2); opacity:.8}
/* 막대 기본(2026-11-02 — 일간이 아닌 지표 · 일간은 선) — 스파크 막대 · 겹쳐 보기 막대 · [막대 | 선] 단추 · '막대 바닥 = 축 끝' 글. 방향색 아님 */
.mc-sparkbar rect{fill:var(--accent); opacity:.4} .mc-sparkbar rect.last{opacity:1}
.mc-chart .ov-bar{fill:var(--ovc); opacity:.85}
.mc-chart .mc-barnote{font-size:10px; fill:var(--muted)}
.mc-dtabs .mc-shape, .ov-ctl .mc-shape{margin:0 0 0 6px; align-self:center} .mc-shape button{border-radius:0}
.mc-dtabs .mc-mrow{margin:0 0 0 6px; align-self:center} .mc-mrow button{border-radius:0}   /* 서랍 달별 MoM · YoY(2026-11-03) */
/* GDP 성장 기여도(2026-11-03 — macro.js ctbChart · 서랍 '기여도'): 조각 = 범주색 고정 순서(.xp-root --s1 … · 라이트/다크 따로 고른 값) · 기타(통계상 불일치) = 회색 ·
   선 · 점 = 잉크(점 테 = 바탕색 2px) · 칸 강조 = 옅은 회색 · 툴팁 · 범례 · 표 글자 = 잉크(범주색은 옆 짧은 선 · 네모에만) · 새 색 변수 없음 · 표 상자만 가로 스크롤 */
.mc-ctb .c1{fill:var(--s1); background:var(--s1)} .mc-ctb .c2{fill:var(--s2); background:var(--s2)} .mc-ctb .c3{fill:var(--s3); background:var(--s3)}
.mc-ctb .c4{fill:var(--s4); background:var(--s4)} .mc-ctb .c5{fill:var(--s5); background:var(--s5)} .mc-ctb .c6{fill:var(--s6); background:var(--s6)}
.mc-ctb .c7{fill:var(--s7); background:var(--s7)} .mc-ctb .cx{fill:var(--muted); background:var(--muted)}
.mc-ctbcap{margin:2px 0 4px}
.mc-ctbwrap{position:relative; outline:none; border-radius:6px} .mc-ctbwrap:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.mc-chart .mc-ctbhl{fill:var(--rule-soft)}
.mc-chart .mc-ctbln{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.mc-chart .mc-ctbpt{fill:var(--ink); stroke:var(--panel); stroke-width:2}
.mc-ctbtip{position:absolute; top:4px; z-index:2; min-width:150px; max-width:240px; background:var(--panel); border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.12); padding:6px 8px; font-size:11.5px; pointer-events:none}
.mc-ctbtip-h{font-weight:700; margin-bottom:2px}
.mc-ctbtip-r{display:flex; align-items:center; gap:6px; line-height:1.55} .mc-ctbtip-r b{min-width:50px; text-align:right; font-variant-numeric:tabular-nums}
.mc-ctbtip-r span{color:var(--ink-2)} .mc-ctbtip-f{margin-top:3px; color:var(--muted); font-size:11px}
.mc-ctbk{display:inline-block; width:12px; height:3px; border-radius:2px; flex:none}
.mc-ctbkl{display:inline-block; position:relative; width:14px; height:2px; background:var(--ink); flex:none; vertical-align:middle; margin-right:4px}
.mc-ctbkl::after{content:""; position:absolute; left:4px; top:-2px; width:6px; height:6px; border-radius:50%; background:var(--ink)}
.mc-ctbsw{display:inline-block; width:10px; height:10px; border-radius:2px; flex:none; vertical-align:-1px; margin-right:4px}
.mc-ctblg{flex-wrap:wrap; gap:4px 12px} .mc-ctblg-i{display:inline-flex; align-items:center; white-space:nowrap}
.mc-ctbtw{overflow-x:auto; margin-top:6px}
.mc-ctbtbl{width:100%; font-size:11.5px} .mc-ctbtbl td.name{white-space:nowrap} .mc-ctbtbl tr.sum td{color:var(--muted)} .mc-ctbtbl tr.ln td{font-weight:600}
/* 나만의 원자료 표(2026-10-16) — 차트 아래 · 최근 3년 · 스크롤 상자(머리줄 고정) */
.my-raw{margin-top:10px} .my-rawh{font-size:12px; margin:0 0 4px}
.my-raw-box{max-height:360px; overflow:auto; border:1px solid var(--rule); border-radius:6px}
.my-raw-tbl{width:100%; margin:0} .my-raw-tbl th{position:sticky; top:0; background:var(--panel); z-index:1}
.my-raw-tbl td, .my-raw-tbl th{padding:3px 10px; font-size:12px; white-space:nowrap}
.mc-dnote{margin-top:6px; line-height:1.5}
/* 매크로 › 나만의(2026-09-30) — 고르기(검색·그룹 목록·체크) | 고른 순서(↑↓×) · 카드는 한눈에 카드 그대로, 차트에 띄운 카드만 테두리 */
.my-pick{display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:14px; background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:10px 12px; margin:0 0 14px}
#my-q{width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:inherit; margin:0 0 6px}
.my-list{max-height:360px; overflow:auto; border-top:1px solid var(--rule-soft)}
.my-gh{font-size:11.5px; font-weight:700; color:var(--accent); padding:8px 2px 3px; position:sticky; top:0; background:var(--panel)}
.my-it{display:flex; gap:6px; align-items:baseline; font-size:12.5px; padding:3px 4px; border-radius:4px; cursor:pointer}
.my-it:hover{background:var(--accent-soft)}
.my-it input{margin:0; flex:none; align-self:center}
.my-it .my-nm{overflow-wrap:anywhere}
.my-it .mute{font-size:11px; white-space:nowrap}
.my-pr .mc-sh{margin-top:2px}
.my-order{list-style:none; margin:0 0 6px; padding:0; font-size:12.5px; max-height:330px; overflow:auto}
.my-order li{display:flex; gap:4px; align-items:center; padding:3px 0; border-bottom:1px solid var(--rule-soft)}
.my-order .my-k{min-width:20px; color:var(--muted); font-size:11px; text-align:right; font-variant-numeric:tabular-nums}
.my-order .my-on{flex:1; min-width:0; overflow-wrap:anywhere}
.my-order button{background:none; border:1px solid var(--rule); border-radius:4px; color:var(--ink-2); padding:0 7px; font-size:12px; line-height:20px; cursor:pointer}
.my-order button:disabled{opacity:.35; cursor:default}
.my-order button:hover:not(:disabled), .my-order button:focus-visible{border-color:var(--accent); color:var(--accent); outline:none}
.mc-card.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.my-chart{margin-top:14px}
.my-empty{line-height:1.8}
@media (max-width:640px){
  .my-pick{grid-template-columns:1fr; padding:8px}
  .my-list{max-height:260px}
  .my-it .mute{white-space:normal}
}
@media (max-width:640px){
  .mc-cards{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr))}
  .mc-cv{font-size:16px}
  .mc-drawer{width:100%; border-left:0}
  .mc-drows{display:block; overflow-x:auto}   /* 2026-11-03 서랍 표시 표(현재값 · 1M · 3M · 1Y · z)가 375px 에서 446px — 서랍째 가로로 밀리던 것 → 표 상자 안에서만 가로 */
  .mc-smalls{grid-template-columns:1fr}
  .mc-list td.mc-sp{display:none}
  .md-table th.md-lab{min-width:140px; max-width:180px}
  #mc-q{min-width:100%}
  .mc-list th, .mc-list td{padding:5px 5px}
}

/* ── 매크로 › 한눈에 리뉴얼(2026-10-03 사용자 "국가별로 매크로가 한눈에 딱 정리된 다음에, 그 밑에 지금처럼 구분") ──
   맨 위 = 핵심지표 스냅샷 격자(.mc-snap — 아래 .mc-snapwrap 절) + 나라 펼치기(.mc-cbopen) + 미국·한국 집중 카드(.mc-feat — 격자 아래 접이식 .mc-featmore) ·
   새로 나온 발표 표. (같은 날 1차의 '주요 8개국 비교표' .mc-ctbl 과 그 소제목 .mc-sh2 는 2차에서 걷어 냈다.)
   방향색 없음(--up/--down 안 씀) — 부호는 +/− 글자, |z| ≥ 2 만 굵은 z 배지. 다크 모드는 기존 변수만 써서 따라온다. */
.mc-feat{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap:10px; margin:0 0 14px}
.mc-fcard{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:8px 10px 6px; min-width:0; overflow-x:auto}
.mc-fh{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; margin:0 2px 6px}
.mc-fh b{font-size:14px; color:var(--ink)}
.mc-fh .mute{font-size:11.5px}
.mc-fh .mc-link{margin-left:auto}
table.mc-ftbl{border:0; border-radius:0; background:transparent}
.mc-ftbl th, .mc-ftbl td{padding:4px 6px}
.mc-ftbl td.name{white-space:normal; min-width:96px}
.mc-ftbl thead th, .mc-ftab thead th, .mc-cbopen thead th{cursor:default}
.mc-cbwrap{overflow-x:auto; max-width:100%}       /* 새로 나온 발표 표는 이 상자 안에서만 가로로 민다 — 375px 에서 페이지는 넘치지 않는다 */
/* 2026-10-03 2차(사용자 참고 이미지 "주요국비교 이런 느낌으로 바꿔봐. 그리고 데이터는 더 많이 넣고") — 8개국 × 6축 비교표(.mc-ctbl)를 걷고
   핵심지표 스냅샷 격자 = 열 나라 6 × 행 주제 9, 칸 = 지표 줄(라벨 — 두 줄까지 접힘 · 값 굵게·고정폭 · z 작은 muted). 1100px 창에서 가로 스크롤 없이 들어가고
   그보다 좁으면 .mc-snapwrap 안에서만 민다(375px 페이지 넘침 0). 방향색 없음 — |z| ≥ 2 는 굵게+테두리(.mc-z.hot), 낡음 ⚠ 만 warn 색.
   표 최소 폭은 min-width 960px 보다 줄의 최소 폭(라벨 칸 = 가장 긴 낱말 — '경제활동' · '공사채AAA')이 정한다: 2차 실측 약 1000px(창 1100 → 상자 1019~1045 라 들어간다)
   2026-10-03 3차(사용자 "표 크기를 좀 더 줄여줘"): 글자 11.5 → 10.5px · 줄 높이 1.4 → 1.3 · 줄 위아래 여백 0 · z 9.5 → 9px(칸 36 → 32px) · 주제 12 → 11px ·
   머리글 여백 5 → 3px · 칸 여백 2px 3px → 1px 2px · 표 min-width(960px)는 걷고 내용(min-content)에 맡긴다(서버 라벨도 같은 날 짧아졌다 — macro_web BOARD_SNAPSHOT).
   실측(같은 overview · 창 1100px · 2차 규칙을 덧씌워 전후 비교): 격자 높이 1,699.9 → 1,190.0px(−30.0% — 2차 CSS·옛 라벨 → 3차 CSS·새 라벨) · 두 줄 라벨 23 → 0 ·
   상자 안 가로 스크롤 없음 · 375px 페이지 넘침 0(헤드리스 하네스 innerWidth 1074: 1,730.7 → 1,116.4 · 두 줄 28 → 0 · z 넘침 0).
   같은 날 검토로 단위 · ⚠ · 줄 수를 10.5px 로 되돌린 뒤 재실측(하네스 innerWidth 1074 · 1100 같음): 1,116.9px(같은 새 라벨에 2차 CSS 1,508.2 → CSS 만 −25.9%) ·
   1100 · 1280 두 줄 0 · 잘림 0 · z 넘침 0 · 상자 안 가로 스크롤 없음 · 375px 페이지 넘침 0(격자는 상자 안 933px)
   2026-10-04(사용자 "핵심지표 스냅샷 표 크기 좀 줄여줘. 왼쪽 오른쪽에 여백이 좀 있어야 할 것 같아. 표가 확 차니까 보기 힘들다. 내용은 고용 · 성장 · 물가 ·
   중앙은행단기 · 주식 · 환율만"): 주제 9 → 6(서버 BOARD_SNAPSHOT — 151 → 92줄) · 상자를 가운데 두고 최대 폭 min(960px, 100% − 48px) — 화면 폭을 꽉 채우지
   않는다(표는 상자 폭 100% 그대로). 960px 에선 줄 사이 간격 3px · 줄 좌우 여백 2px 그대로면 두 줄 라벨이 3개 생겨('비농업 고용' · 'CPI 캐나다' · '위안/달러')
   .mc-si 를 간격 2px · 좌우 1px 로 — 글자는 10.5px 그대로(표 최소 폭 935 → 911px). 폰 폭(640px 이하)은 −48px 여백 없이 예전처럼 화면 폭(아래 @media).
   min-width min(100%, 916px) = 창이 960~1010px 쯤이면 '100% − 48px' 이 표 최소 폭(911 + 테두리)보다 좁아져 여백 때문에 상자 안 가로 스크롤이 생겼다(실측 990px:
   상자 889 < 표 911) → 여백부터 줄인다(990px: 상자 916 · 여백 10.5px · 스크롤 없음). 916 은 이 PC 글꼴 실측값 — 라벨·글자를 바꾸면 다시 잴 것.
   실측(브라우저 미리보기 innerWidth 1100 · devicePixelRatio 2 · 같은 MACRO_DB — 전 = 고치기 전 macro_web + 옛 CSS 규칙): 상자 1,047 × 1,192px → 960 × 730.8px(높이 −38.7%) ·
   섹션 안 좌우 여백 0 · 0 → 43.5 · 43.5px(창 가장자리부터 19 · 34 → 62.5 · 77.5px — 오른쪽은 스크롤 막대 15px 포함) · 9행 151줄 → 6행 92줄 · 두 줄 0 → 0 · 잘림 0 ·
   z 넘침 0 · 상자 안 가로 스크롤 없음(958 = 958) / 1280px 상자 960 · 여백 133.5px / 375px 페이지 넘침 0(상자 337px 안에서 표 911px 밂 — 나라 펼침 · 카드 펼침도) */
.mc-snapwrap{overflow-x:auto; max-width:min(960px, 100% - 48px); min-width:min(100%, 916px); margin:0 auto; background:var(--panel); border:1px solid var(--rule); border-radius:6px}
table.mc-snap{width:100%; border-collapse:separate; border-spacing:0; font-size:10.5px}
.mc-snap th, .mc-snap td{padding:1px 2px; border-bottom:1px solid var(--rule-soft); vertical-align:top}
.mc-snap thead th{background:var(--head); text-align:center; cursor:default; padding:3px 3px 2px; border-bottom:1px solid var(--rule)}
.mc-snap tbody tr:last-child > *{border-bottom:0}
.mc-snap tbody tr:hover{background:transparent}            /* 전역 tr:hover 칠하기 끔 — 줄(.mc-si) 하나만 칠한다 */
.mc-snap td.mc-sncell{white-space:normal; box-shadow:inset 1px 0 0 var(--rule-soft); font-size:10.5px}   /* .grid td{12px}(#macro-grid 가 .grid) 를 덮는다 — 3차 10.5px(2차 11.5px) */
.mc-snap td.mc-snone{text-align:center; vertical-align:middle}
.mc-snap th.mc-snt{position:sticky; left:0; z-index:1; background:var(--panel); text-align:left; font-size:11px; font-weight:700; color:var(--ink);
  white-space:normal; word-break:keep-all; width:3.9em; padding:2px 3px 1px 6px;   /* '중앙은행·단기' 처럼 긴 주제는 '·' 뒤에서 접힌다 */
  box-shadow:1px 0 0 var(--rule)}
/* 2026-10-03 검토: 375px 에서 격자를 옆으로 밀면 밑으로 들어간 칸의 끝자락('.90' 같은)이 고정된 주제 열 바로 옆에 붙어 라벨처럼 보였다 →
   주제 열(thead·tbody 둘 다) 오른쪽에 구분선. 바깥 그림자라 폭이 안 늘고(1100px 들어감 그대로) sticky z-index 로 옆 칸 위에 그려진다 */
.mc-snap thead th.mc-snt{z-index:3; background:var(--head)}
.mc-snap th.mc-snc.on{background:var(--accent-soft)}
.mc-snap .mc-cname{font-size:11.5px}
/* 줄 = 라벨 | 값+단위 | z. z 칸은 고정 34px(칸 안 줄끼리 z 가 세로로 맞는다 — 굵은 'z +2.90' 9px 글자 + 테두리. 2차는 36px · 9.5px 글자 · 좌우 여백 1px ·
   3차 32px — 2026-10-03 검토: 1100px 실측 hot 배지 10개가 scrollWidth 31 > clientWidth 30 으로 1px 넘쳐 34px).
   2026-10-03 검토(1100px 실측 151줄 중 39~50줄 '비…' · 'CSI3…' · '유로스톡…' 로 잘림): 예전 3.5em(줄 글자 12px 기준 42px) z 칸과 한 줄 줄임표가
   라벨 몫을 34~90px 로 깎았다 → 라벨은 두 줄까지 접고(낱말 단위 — keep-all · 괄호·'/' 앞뒤) 라벨 칸은 가장 긴 낱말보다 좁아지지 않는다
   (minmax(min-content, …) — 'CSI3 | 00' 처럼 낱말 가운데서 접히지 않게). 값·z 는 한 줄 그대로. 2차 당시 재실측: 1100px 잘림 0 · 두 줄 33 · 1280px 이상 두 줄 0
   2026-10-03 3차(사용자 "표 크기를 좀 더 줄여줘"): 글자 10.5px · 줄 높이 1.3 · 위아래 여백 0 · z 칸 32px(z 글자 9px).
   단위 글자 · ⚠ · 머리글 줄 수(.mc-cnn)는 줄이지 않는다(같은 날 3차 검토 — 한때 9.5 · 10 · 10px 로 더 줄였다): 라벨에서 '(YoY)' · '증감' 을 뺀 뒤로
   YoY 인지 전월증감인지 알려 주는 곳은 단위 칸('YoY %' · '전월증감, 천명')뿐이라 줄 글자와 같은 10.5px — 단위는 값 칸(auto 폭)이라 라벨 칸 영향은 작다 */
.mc-si{display:grid; grid-template-columns:minmax(min-content, 1fr) auto 34px; column-gap:2px; align-items:baseline; padding:0 1px; line-height:1.3; border-radius:3px; cursor:pointer; font-size:10.5px}   /* 2026-10-04: 간격 3 → 2px · 좌우 2 → 1px(상자 최대 960px 에서 두 줄 라벨 3 → 0 — 위 .mc-snapwrap 주석) */
.mc-si + .mc-si{border-top:1px dotted var(--rule-soft)}
.mc-si:hover, .mc-si:focus-visible{background:var(--accent-soft); outline:none}
/* 라벨 묶음은 .mc-sil — 금리밴드 작은 그림 제목 .mc-sl(위, font-weight 600 · margin)과 이름이 겹쳐 서로 규칙이 샜다(2026-10-03 검토) */
.mc-sil{display:flex; align-items:baseline; min-width:0; color:var(--ink-2); font-weight:400}
.mc-sln{min-width:0; overflow:hidden; white-space:normal; word-break:keep-all; overflow-wrap:break-word;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2}
.mc-sil .mc-warn{flex:none; margin-left:2px; font-size:10.5px}
.mc-sv{text-align:right; white-space:nowrap}
.mc-sv b{font-family:Consolas, "SF Mono", ui-monospace, monospace; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.mc-si .mc-unit{font-size:10.5px; margin-left:1px}   /* 3차 검토: 9.5 → 10.5px(2차 10px) — 라벨이 YoY · 증감을 말하지 않게 된 뒤로 단위가 그 뜻을 진다(위 주석) */
.mc-si .mc-z{font-size:9px; padding:0; border-radius:6px; white-space:nowrap; text-align:left}   /* 3차: 좌우 여백 1px → 0 — 굵은 'z +2.90'(hot · 테두리)이 32px 칸을 넘었다(실측 10줄) · 2026-10-03 검토: 그래도 1px 넘쳐 칸 34px(위 .mc-si) */
.mc-snhint{margin:4px 2px 0}
.mc-featmore{margin-top:10px}
.mc-featmore .mc-feat{margin-top:6px}
.mc-cname{background:none; border:0; padding:2px 0; font:inherit; font-weight:700; color:var(--accent); cursor:pointer; display:inline-flex; gap:4px; align-items:baseline}
.mc-cname::before{content:"▸"; font-size:10px; color:var(--muted)}
.mc-cname.on::before{content:"▾"}
.mc-cname:hover, .mc-cname:focus-visible{text-decoration:underline; outline:none}
.mc-cnn{font-size:10.5px; font-weight:500; color:var(--muted)}
.mc-cbopen{margin-top:10px}
.mc-cbopen:empty{display:none}
.mc-cbhead{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; margin:0 2px 6px}
.mc-cbhead .mc-link{margin-left:auto}
.mc-list tr.mc-gh td{background:var(--rule-soft); font-weight:700; font-size:11.5px; color:var(--ink-2); padding:7px 8px 4px}
.mc-fnone{padding:2px 4px}
.mc-ftab td.mc-fname{font-weight:600}
/* 2026-10-05 사용자 "새로나온 발표에 예측치도" — 예상치 · 직전치 열(ForexFactory 글 그대로). 작은 글씨 = 제목 꼬리(y/y · m/m)와 출처 FF · 색 없음(방향을 뜻하지 않는다).
   표가 넓어져도 .mc-cbwrap 안에서만 가로로 민다(375px 페이지 넘침 0) */
.mc-ftab td.mc-fcs, .mc-ftab td.mc-fpv{font-family:Consolas, "SF Mono", ui-monospace, monospace; color:var(--ink-2)}
.mc-fsrc{font-family:inherit; font-size:9.5px; color:var(--muted); margin-left:2px; white-space:nowrap}
/* 2026-10-05 검토: 꼬리 없는 FF 제목은 제목 전체(긴 것은 말줄임 — 전체는 칸 툴팁) · 표시 행과 꼴이 다르면 '행 YoY 와 다름'(같은 작은 회색 — 색으로 뜻을 싣지 않는다) */
.mc-fttl{display:inline-block; max-width:10em; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}   /* 제목만 말줄임 — 뒤의 '· FF' 는 남는다 */
.mc-fdiff{font-family:inherit; font-size:9.5px; color:var(--muted); white-space:nowrap}
/* 2026-10-05 같은 날 후속(사용자) — 표 크기: 핵심지표 스냅샷(10.5px · 칸 1px 2px)보다 **조금 덜** 줄인다 = 글자 11px(보통 12 사이) · 칸 여백 2px 6px ·
   상자는 스냅샷처럼 가운데 · 최대 min(960px, 100% − 48px)(좌우 여백) · 표 아래 안내 줄도 같은 폭. 폰 폭은 화면 폭 상자 안에서만 가로로 민다(아래 @media).
   table.mc-ftab 로 써서 .grid td{12px}(#macro-grid 가 .grid) 를 덮는다. 발표일 칸 배지는 달력의 .mc-cb(확정 실선 · 예상 점선 — 색 아님) 그대로 */
.mc-fwrap{max-width:min(960px, 100% - 48px); margin:0 auto}
.mc-fhint{max-width:min(960px, 100% - 48px); margin-left:auto; margin-right:auto}
table.mc-ftab th, table.mc-ftab td{font-size:11px; padding:2px 6px}
table.mc-ftab td.mc-in{white-space:nowrap}
.mc-faux{font-size:11px}
@media (max-width:640px){
  .mc-fwrap, .mc-fhint{max-width:100%}            /* 폰: 좌우 여백 없이 화면 폭 — 표는 .mc-cbwrap 안에서만 가로로 민다(375px 페이지 넘침 0) */
}
@media (max-width:640px){
  .mc-list th.mc-sp{display:none}                 /* 스파크 칸(td)은 위에서 숨겼다 — 머리 칸도 같이 */
  .mc-fcard{padding:6px 6px 4px}
  .mc-ftbl th, .mc-ftbl td{padding:4px 4px}
  .mc-ftbl td.name{min-width:0}
  .mc-ftbl td.mc-fv{white-space:normal}          /* 긴 단위(전월증감, 천명)는 값 아래로 접힌다 */
  .mc-fh .mc-link{margin-left:0}
  /* 한눈에의 줄 목록(검색 · 나머지 N개 · 나라 펼침) — 긴 라벨('신용스프레드 AA-(3년)  (%p)')이 nowrap 이면 표가 428px 로 벌어져 격자 상자가
     옆으로 밀렸다(실측 375px). 이름 칸만 줄바꿈 */
  .mc-olist td.name{white-space:normal; overflow-wrap:anywhere}
  .mc-snapwrap{max-width:100%}                     /* 2026-10-04: 좌우 여백(−48px)은 넓은 화면에서만 — 폰 폭은 예전처럼 화면 폭, 격자는 상자 안에서만 민다 */
}

/* ── 매크로 › 한눈에 › 발표 달력(2026-10-03 3차 사용자 "앞으로 곧 뜰 예정인 지표들도 달력 형태로 — 금일을 포함하여 향후 일주일 정도") ──
   열 = 날짜 8(오늘 + 7일) · 오늘 열 = 테두리(바깥 안쪽 그림자 2px — 폭이 안 는다, 칠하지 않는다) + '오늘' 글자 · 주말 열 = 흐리게(글자 muted · 줄 옅게 — 오늘 테두리는 그대로) ·
   줄(.mc-ci) = 나라 글자 · 이름 · 몇 월분 · ✓(muted). 회의 줄 = 굵게 + '회의' 꼬리표. 1100px 에서 가로 스크롤 없이(열 최소 104px × 8 = 832px),
   그보다 좁으면 .mc-calwrap 안에서만 민다(375px 페이지 넘침 0). 방향색 없음. 전역 th,td{nowrap} · thead th{sticky · pointer} · tr:hover 칠하기는 여기서 끈다 */
.mc-calwrap{overflow-x:auto; max-width:100%; background:var(--panel); border:1px solid var(--rule); border-radius:6px}
table.mc-cal{width:100%; min-width:832px; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:11px}
table.mc-cal th, table.mc-cal td{white-space:normal; padding:3px 4px; vertical-align:top; border-bottom:0; box-shadow:inset 1px 0 0 var(--rule-soft); font-size:11px}
table.mc-cal th:first-child, table.mc-cal td:first-child{box-shadow:none}
table.mc-cal thead th{position:static; cursor:default; user-select:auto; text-align:left; font-size:11.5px; font-weight:700; color:var(--ink);
  background:var(--head); border-bottom:1px solid var(--rule); padding:4px 5px 3px}
table.mc-cal tbody tr:hover{background:transparent}
.mc-cdow{font-weight:400; color:var(--muted)}
.mc-ctoday{display:inline-block; margin-left:4px; font-size:10px; font-weight:700; color:var(--accent); border:1px solid var(--accent); border-radius:8px; padding:0 4px; line-height:1.3}
table.mc-cal th.td{box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent)}
table.mc-cal td.td{box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent)}
table.mc-cal th.wk, table.mc-cal th.wk .mc-cdow{color:var(--muted); font-weight:500}
table.mc-cal td.wk .mc-ci{opacity:.6}
.mc-ci{display:block; padding:1px 2px; line-height:1.35; border-radius:3px; cursor:pointer; overflow-wrap:anywhere; word-break:keep-all; color:var(--ink-2)}
.mc-ci:not([data-id]){cursor:default}
.mc-ci + .mc-ci{border-top:1px dotted var(--rule-soft)}
.mc-ci[data-id]:hover, .mc-ci:focus-visible{background:var(--accent-soft); outline:none}
.mc-ci .cc{font-family:Consolas, "SF Mono", ui-monospace, monospace; font-size:9.5px; color:var(--muted); border:1px solid var(--rule); border-radius:3px; padding:0 2px}
.mc-ci .mute{font-size:10.5px}   /* 2026-10-03 검토: 10 → 10.5px — '9월분' 은 무엇이 나오는지 가르는 글자(✓ .mc-cok 도 같이). 나라 .cc · '회의' · '오늘' 은 그대로 */
.mc-ci.mt{font-weight:700; color:var(--ink)}
.mc-cmt{font-size:9.5px; font-weight:700; border:1px solid var(--ink-2); border-radius:3px; padding:0 3px; white-space:nowrap}
.mc-cok{font-size:10.5px; color:var(--muted); white-space:nowrap}   /* 2026-10-03 검토: 10 → 10.5px(위 .mute 와 같이) */
/* 2026-10-03 검토: 앞날짜 칸인데 이미 들어온 줄(서버 early — 규칙 어림보다 먼저 발표) = 글자 muted + '✓ 이미 들어옴'(좁은 열에서 접힘). 색 아님 */
.mc-ci.early{color:var(--muted)}
.mc-ci.early .mc-cok{white-space:normal}
.mc-cnone{display:block; text-align:center; padding:6px 0}
.mc-calhint{margin:4px 2px 0; line-height:1.55}
.mc-calhint b{color:var(--ink-2)}
.mc-calmore{margin-top:2px}
.mc-calmore summary{font-size:11.5px}
.mc-calnotes{margin:2px 0 0 18px; padding:0; font-size:11px; color:var(--muted); line-height:1.5}
/* 2026-10-04 4차 사용자 "실제 발표 일정" — 시각(한국 시각, muted 고정폭) · 출처 배지(확정 = 실선 테두리 + 굵게 / 예상 = 점선 테두리 + 옅은 글자 — 색 아님) ·
   중요도 높음(impact H) 굵게 · 대시보드 지표와 안 이어진 일정(.ev — 연설 · PMI 등) 흐리게 · 누르기 없음 · 달력 위 줄(중요도 전환 .seg + 원천 상태 / 파일 없음 안내) ·
   '중요' 에서 숨긴 개수(.mc-chid) */
.mc-ct{font-family:Consolas, "SF Mono", ui-monospace, monospace; font-size:10px; color:var(--muted)}
.mc-cb{display:inline-block; font-size:9px; line-height:1.25; border-radius:3px; padding:0 2px; white-space:nowrap; vertical-align:1px}
.mc-cb.fix{border:1px solid var(--ink-2); color:var(--ink-2); font-weight:700}
.mc-cb.est{border:1px dashed var(--rule); color:var(--muted); font-weight:400}
.mc-ci.hi{font-weight:700; color:var(--ink)}
.mc-ci.ev{color:var(--muted); cursor:default}
.mc-ci.ev .mc-cb.fix{border-color:var(--rule); color:var(--muted)}
.mc-calbar{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 4px}
.mc-calbar .seg{margin:0}
.mc-calsrc{font-size:11.5px; color:var(--muted); line-height:1.5}
.mc-calmiss .mc-calsrc{color:var(--ink-2)}
.mc-chid{font-size:10px; color:var(--muted); padding:2px 2px 0}
/* 2026-10-16 사용자 "발표 달력 밑에 이전 7일 발표도 같은 양식으로 — 값도 옆에": 지난 7일 표(.mc-cal.past — 열 7 · 오늘 테두리 없음) ·
   줄 아래 값 줄(.mc-cval — 굵은 값 = 그 발표분 · 이름표 MoM/YoY .mc-cvalk 는 muted · 예상 · 직전은 muted · 안 들어옴 = 줄째 muted). 방향색 없음.
   같은 날 검토: 처음 이름 .mc-cv 가 카드 큰 값(위 410행 19px/700)과 같아 모든 카드 값이 10.5px 로 줄었다 — 이름을 따로 · .mc-ci 안으로 한정 */
.mc-calpast{margin-top:12px}
.mc-calph{font-size:12.5px; font-weight:700; color:var(--ink); margin:0 2px 4px}
.mc-calph .mute{font-size:11px; font-weight:400}
table.mc-cal.past{min-width:728px}               /* 열 104px × 7 */
.mc-ci .mc-cval{display:block; font-size:10.5px; font-weight:400; line-height:1.35; color:var(--ink-2); overflow-wrap:anywhere}
.mc-ci .mc-cval b{font-weight:700; color:var(--ink); white-space:nowrap}
.mc-ci .mc-cval .mc-cvalk{font-size:10px; color:var(--muted)}
.mc-ci .mc-cval .mute{font-size:10px}
.mc-ci .mc-cval.no{color:var(--muted)}
@media (max-width:640px){
  table.mc-cal{min-width:736px}                   /* 폰: 열 92px × 8 — 상자 안에서만 가로로 민다 */
  table.mc-cal.past{min-width:644px}              /* 폰: 열 92px × 7 */
}
/* ── 매크로 한눈에 개편 1·2단계(2026-11-03 — macro.js todayBlock · foldBox · 그룹 details.mc-grp) ──
   맨 위 '오늘 볼 것'(왼쪽 최근 발표 · 오른쪽 앞으로 3일 — 900px 이하 위아래) · 접는 상자(.mc-fold — 새로 나온 발표 표 · 달력 지난 7일) · 접힌 그룹.
   방향색 없음(|z| ≥ 2 는 .mc-z.hot 테두리 그대로) */
.mc-today{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:4px 12px 8px}
.mc-tdgrid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 28px}
.mc-tdh{font-size:12.5px; font-weight:700; color:var(--accent); margin:6px 2px 4px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.mc-tdh .mute{font-size:11px; font-weight:400}
.mc-tdl{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:0 10px; align-items:baseline; padding:3px 4px; font-size:12px; line-height:1.4;
        border-radius:3px; color:var(--ink-2)}
.mc-tdl + .mc-tdl{border-top:1px dotted var(--rule-soft)}
.mc-tdl[data-id]{cursor:pointer}
.mc-tdl[data-id]:hover, .mc-tdl:focus-visible{background:var(--accent-soft); outline:none}
.mc-tdl.mc-tdhi .mc-tdn{font-weight:700; color:var(--ink)}
.mc-tdl.mc-tdev{opacity:.7}
.mc-tdd{font-family:Consolas, "SF Mono", ui-monospace, monospace; font-size:11px; color:var(--muted); white-space:nowrap}
.mc-tdn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.mc-tdn .cc{font-size:10.5px; color:var(--muted)}
.mc-tdn .mute{font-size:11px}
.mc-tdv{white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums}
.mc-tdv b{color:var(--ink)}
.mc-tdv .mc-z{margin-left:4px}
.mc-tds{grid-column:2 / 4; font-size:11px; text-align:right}
.mc-tdnone{margin:2px 4px 6px}
.mc-tdmore{margin:4px 4px 0; font-size:11.5px}
.mc-ovlay{margin-left:4px; font-size:11.5px}
.mc-fold > summary{cursor:pointer; font-size:12px; color:var(--accent); padding:4px 2px}
.mc-fold.mc-calpast > summary{color:var(--ink)}
details.mc-grp{margin:0 0 6px; border:1px solid var(--rule); border-radius:8px; background:var(--panel); padding:0 10px}
details.mc-grp > summary.mc-sh{cursor:pointer; list-style:none; margin:0; padding:8px 2px}
details.mc-grp > summary.mc-sh::-webkit-details-marker, details.mc-secfold > summary.mc-sh::-webkit-details-marker{display:none}
details.mc-grp > summary.mc-sh::before, details.mc-secfold > summary.mc-sh::before{content:"▸"; color:var(--muted); font-size:11px; width:10px}
details.mc-grp[open] > summary.mc-sh::before, details.mc-secfold[open] > summary.mc-sh::before{content:"▾"}
details.mc-secfold > summary.mc-sh{cursor:pointer; list-style:none}      /* 스냅샷(2026-11-03 — 기본 펼침 · 접은 것을 기억) */
details.mc-secfold[open] .mc-foldhint{display:none}
details.mc-grp[open]{padding-bottom:10px}
details.mc-grp > summary .mc-ghot{font-size:10.5px; font-weight:700}
@media (max-width:900px){ .mc-tdgrid{grid-template-columns:minmax(0, 1fr)} }
@media (max-width:640px){
  .mc-today{padding:4px 8px 8px}
  .mc-tdl{grid-template-columns:auto minmax(0, 1fr); font-size:11.5px}
  .mc-tdv{grid-column:1 / 3; text-align:left}
  .mc-tds{grid-column:1 / 3; text-align:left}
}

/* ── ETF 찾기(2026-10-02 — 구성종목 · 비교 · 비교의 '다른 ETF 추가' 가 같은 부품 etfPicker) ──
   치는 동안 아래에 후보 줄(코드 · 이름 · 꼬리표 · 시총). 고를 수 없는 줄(구성종목 캐시에 없음)은 흐리게. 방향색 없음. */
.pick{position:relative; display:inline-block; vertical-align:middle}
.bar .pick input[type=search]{min-width:300px}
.pick-list{position:absolute; z-index:40; top:calc(100% + 3px); left:0; margin:0; padding:4px 0; list-style:none;
  min-width:100%; width:max-content; max-width:min(620px, calc(100vw - 32px)); max-height:min(360px, 60vh); overflow:auto;
  background:var(--panel); border:1px solid var(--rule); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.13); font-size:12.5px}
.pick-o{display:flex; gap:8px; align-items:baseline; padding:4px 10px; cursor:pointer; white-space:nowrap}
.pick-o.act, .pick-o:hover{background:var(--accent-soft)}
.pick-o.act{box-shadow:inset 3px 0 0 var(--accent)}
.pick-o.dim{opacity:.55}
.pick-c{font-family:Consolas,"Courier New",monospace; color:var(--muted); min-width:52px}
.pick-n{font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.pick-t{font-size:10.5px; padding:0 5px; border-radius:3px; border:1px solid var(--rule); color:var(--muted)}
.pick-s{font-size:11px; color:var(--muted)}
.pick-m{font-size:11px; color:var(--ink-2); min-width:56px; text-align:right; font-variant-numeric:tabular-nums}
.pick-more, .pick-none{padding:5px 10px; color:var(--muted); font-size:11.5px; white-space:normal}
.pick-more{border-top:1px solid var(--rule-soft)}
.cmp-chip.add .pick-list{font-size:12px}

/* ── 매크로 › 나만의 — 판 고르기 줄(2026-10-02 여러 판: 나만의 1 · 나만의 2 …) ── */
.my-boards{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px}
.my-boards .seg{margin:0; flex-wrap:wrap}
/* 이름(.my-bnm)만 줄임표 — 지표 수 배지(.my-bn)는 줄어들지 않고 늘 보인다(2026-10-02 검토: 버튼 통째 ellipsis 면 긴 이름에서 배지가 잘려 사라졌다) */
.my-seg button{display:inline-flex; align-items:baseline; max-width:220px; white-space:nowrap}
.my-bnm{overflow:hidden; text-overflow:ellipsis; min-width:0}
.my-bn{flex:none; display:inline-block; min-width:16px; margin-left:3px; padding:0 4px; border-radius:8px; background:var(--rule-soft); color:var(--muted); font-size:10.5px; text-align:center}
.my-seg button.on .my-bn{background:var(--panel); color:var(--accent)}
#my-new{color:var(--accent)}
.my-seg button:disabled{opacity:.45; cursor:not-allowed}
.my-bacts{display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center}
.my-bact{background:none; border:1px solid var(--rule); border-radius:5px; padding:2px 9px; font-size:12px; color:var(--ink-2); cursor:pointer}
.my-bact:disabled{opacity:.35; cursor:default}
.my-bact:hover:not(:disabled), .my-bact:focus-visible{border-color:var(--accent); color:var(--accent); outline:none}
.my-ren{display:inline-flex; gap:4px; align-items:center}
#my-ren{padding:3px 8px; border:1px solid var(--accent); border-radius:5px; background:var(--panel); color:inherit; width:180px}
@media (max-width:640px){
  .bar .pick, .bar .pick input[type=search]{min-width:0; width:100%}
  .pick{display:block}
  .pick-list{max-width:calc(100vw - 32px)}
  .pick-s{display:none}
  .my-seg button{max-width:150px}
}

/* ── 매크로 › 나만의 v2(2026-10-14 — 설계서 plan_macro_my_v2 §4 · §5) — 주식 담기 · 주식 카드 · 겹쳐 보기 ──
   방향색 없음(상승·하락 색 변수 안 씀 · 수익률은 부호와 숫자만 · 장중 배지는 회색 테두리 — 주식 탭 .sk-live 와 같은 뜻). 찾기 목록은 ETF 찾기의 .pick-* 그대로.
   겹쳐 보기 시리즈 구분색 .ov-s0 ~ .ov-s3 = ink · accent · 보라 · 주황(방향과 무관 — 어두운 테마 따로) · 클래스 이름에 up/down 없음(test_web_macro [5]) */
.my-stk{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; padding:0 0 8px; border-bottom:1px solid var(--rule-soft)}
.my-stkl{font-size:11.5px; font-weight:700; color:var(--accent)}
.my-spick input[type=search]{width:340px; max-width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:inherit}
.my-spick input[type=search]:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.my-stk .hint{font-size:11.5px; overflow-wrap:anywhere; min-width:0}
.my-cw{position:relative; display:flex; min-width:0}
.my-cw > .mc-card{flex:1; min-width:0; padding-bottom:30px}
.my-stab{position:absolute; right:9px; bottom:7px; padding:1px 8px; border:1px solid var(--rule); border-radius:5px; background:var(--panel); color:var(--accent); font-size:11.5px}
.my-stab:hover, .my-stab:focus-visible{border-color:var(--accent); outline:none}
.my-sline{font-size:10.5px; overflow-wrap:anywhere}
.my-smeta{display:flex; flex-wrap:wrap; gap:3px 6px; align-items:center; font-size:11px; min-width:0}
.my-smeta .mute{overflow-wrap:anywhere}
.my-live{display:inline-block; padding:0 7px; border:1px solid var(--muted); border-radius:99px; font-size:10.5px; line-height:1.55; color:var(--ink-2); font-weight:600; white-space:nowrap}
.my-live.closed{border-style:dashed}
.my-zna{color:var(--muted)}
.my-ov{--ov0:var(--ink); --ov1:var(--accent); --ov2:#7A4FB8; --ov3:#C0661A;
  background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:6px 12px; margin:0 0 12px; min-width:0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .my-ov{--ov2:#B497E6; --ov3:#E3A15F}
}
.ov-s0{--ovc:var(--ov0)} .ov-s1{--ovc:var(--ov1)} .ov-s2{--ovc:var(--ov2)} .ov-s3{--ovc:var(--ov3)}
.my-ov > summary{cursor:pointer; font-weight:700; color:var(--accent); font-size:13px; padding:2px 0; overflow-wrap:anywhere}
.my-ov > summary .mute{font-weight:400; font-size:11.5px}
.my-ov[open] > summary{margin-bottom:6px}
.ov-chips{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 8px}
.ov-chip{max-width:100%; overflow-wrap:anywhere; text-align:left}
.ov-chip.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.ov-sel{display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 8px; align-items:center}
.ov-row{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; min-width:0; max-width:100%}
.ov-nm{overflow-wrap:anywhere; min-width:0}
.ov-row .seg{margin:0; flex:none}
.ov-row .seg button{padding:1px 8px}
.ov-row .seg button:disabled{opacity:.45; cursor:not-allowed}
.ov-x{background:none; border:1px solid var(--rule); border-radius:4px; color:var(--ink-2); padding:0 7px; line-height:20px; flex:none}
.ov-x:hover, .ov-x:focus-visible{border-color:var(--accent); color:var(--accent); outline:none}
.ov-ctl{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:0 0 6px}
.ov-ctl .seg{margin:0; flex-wrap:wrap}
.ov-ctl .seg button:disabled{opacity:.4; cursor:not-allowed}
.ov-wrap{margin:0 0 6px}
.ov-sw{display:inline-block; width:14px; height:3px; border-radius:2px; background:var(--ovc); flex:none}
.ov-legend{flex-wrap:wrap; gap:4px 14px}
.ov-li{display:inline-flex; align-items:center; gap:5px; min-width:0; overflow-wrap:anywhere}
.ov-axl{font-size:10px; color:var(--muted); border:1px solid var(--rule); border-radius:3px; padding:0 3px; font-weight:600}
.mc-chart .ov-line{stroke:var(--ovc); stroke-width:1.8}
.mc-chart .ov-mk{fill:var(--ovc); stroke:var(--panel); stroke-width:.8}
.mc-chart .ov-end{fill:var(--ovc)}
.mc-chart .ov-tip tspan[class]{fill:var(--ovc)}
.mc-chart .ov-uh{font-weight:600}
.mc-chart .ov-mixed{fill:var(--warn)}
.mc-chart .ov-100{stroke:var(--ink-2)}
.ov-skip{margin-top:2px}
@media (max-width:640px){
  .my-spick, .my-spick input[type=search]{width:100%}
  .mc-chart .ov-tr{font-size:9.5px}                  /* 폰: 오른쪽 축 글자(여백 48px 안) */
  .my-ov{padding:6px 8px}
}

/* ── 매크로 › 관계 — ① 무엇이 이 지표를 움직이나 | ② 이 지표가 움직이는 ETF(2026-10-02) ──
   ② = 지표 고르기(찾기 칸 + 빠른 칩) · 옵션 줄 · 요약(변화 정의 · 짝짓기 시차 · 기간) · 표 둘(취약 · 반대). 방향색 없음 — 부호는 글자, 1σ당 크기는 회색 막대 */
.drv-seg{margin:0 0 12px; flex-wrap:wrap}
.sn-head{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:10px 12px 8px}
.sn-pickrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 8px}
.sn-pick input[type=search]{width:340px; max-width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:inherit}
.sn-pick input[type=search]:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.sn-quick{display:flex; flex-wrap:wrap; gap:5px}
.sn-quick .mc-chip{cursor:pointer}
.sn-quick .mc-chip.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.sn-opts{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:0 0 6px}
.sn-ol{font-size:11.5px; color:var(--muted); margin-left:4px}
.sn-opts .seg{margin:0}
.sn-opts select{padding:3px 6px; border:1px solid var(--rule); border-radius:5px; background:var(--panel); color:inherit; font-size:12px}
.sn-chk{font-size:12px; color:var(--ink-2); display:inline-flex; gap:4px; align-items:center; margin-left:6px}
.sn-chk input{accent-color:var(--accent); margin:0}
.sn-def{font-size:12px; color:var(--ink-2); line-height:1.6; margin:0 2px 8px}
.sn-def b{color:var(--ink); font-weight:600}
.sn-seg{flex-wrap:wrap}
.sn-mk{list-style:none; margin:0 0 8px; padding:0; font-size:12px; color:var(--ink-2); line-height:1.55}
.sn-mk li{padding:5px 8px; background:var(--panel); border:1px solid var(--rule-soft); border-radius:6px; margin:0 0 4px; overflow-wrap:anywhere}
.sn-mk b{color:var(--ink); margin-right:4px}
.sn-mkn{display:block; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.sn-note{display:block; font-size:11px; color:var(--accent); margin-top:1px}
.sn-find{margin:4px 0 6px}
#sn-f{width:340px; max-width:100%; box-sizing:border-box; padding:6px 10px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:inherit}
.sn-hit{margin:0 0 14px}
.sn-two{display:grid; grid-template-columns:minmax(0, 1fr); gap:0 18px}
@media (min-width:1560px){ .sn-two{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)} }
.sn-tbl td{vertical-align:top}
.sn-tbl td.sn-nm{min-width:180px; white-space:normal}            /* 전역 th,td 는 nowrap — 긴 이름이 폰 폭을 밀어낸다 */
.sn-n{display:block; font-weight:600; overflow-wrap:anywhere}
.sn-sub{display:flex; flex-wrap:wrap; gap:3px 5px; align-items:baseline; margin-top:1px}
.sn-c{font-family:Consolas,"Courier New",monospace; color:var(--muted); font-size:11px}
.sn-tag{font-size:10.5px; padding:0 5px; border-radius:3px; border:1px solid var(--rule); color:var(--muted); white-space:nowrap}
.sn-tag.lev{border-color:var(--ink-2); color:var(--ink); font-weight:600}
.sn-tag.weak{border-style:dashed}
.sn-tier td{padding:6px 8px; font-size:11.5px; color:var(--muted); background:var(--rule-soft); white-space:normal}
.sn-as{color:var(--muted); margin-left:1px; cursor:help}
.sn-cls{font-size:10.5px; color:var(--muted)}
.sn-why{display:block; font-size:11px; color:var(--warn); margin-top:1px}
.sn-u{display:block; font-size:10px; font-weight:400; color:var(--muted)}
.sn-b{font-weight:700}
.sn-bar{display:inline-block; height:7px; background:var(--ink-2); opacity:.45; border-radius:1px; margin-right:6px; vertical-align:middle}
.sn-none{padding:16px}
#sn-body.sn-busy{opacity:.55; transition:opacity .15s}
@media (max-width:640px){
  .sn-head{padding:8px}
  .sn-pick, .sn-pick input[type=search], #sn-f{width:100%}
  .sn-opt, .sn-cls, .sn-bar{display:none}
  .sn-tbl td.sn-nm{min-width:0}
  .sn-tbl .num{white-space:normal}
  .sn-tbl th, .sn-tbl td{padding:5px 4px}
  .sn-opts .sn-ol{width:100%; margin:2px 0 0}
}

/* ── 주식 — finviz 식 히트맵(2026-10-07 사용자 "주식 탭 화면 이어서", static/stocks.js) ───────────────────────
   상자 색은 stocks.js 가 --down(하락 파랑) ↔ --sk-zero(0 = 회색) ↔ --up(상승 빨강) 사이를 보간해 칠한다 — 한국 관행(Finviz 의 초록/빨강 아님).
   --sk-zero 는 붉지도 푸르지도 않은 중립 회색(r = g = b). 빈칸(그 기간 수익률 없음) = 빗금(--sk-na · --sk-na-ln).
   SVG 는 폭 100% · 높이는 viewBox 비율(넓은 화면 1000×620 · 폰 1000×900) — 폰 가로 넘침 0. 표는 .tablewrap 안에서만 민다.
   2026-10-07 오후(사용자 "히트맵 크기 좀 줄여봐 — 매크로 한눈에 핵심지표 스냅샷 정도 크기"): 서브탭 아래 본문 전체(머리 · 칩 · 찾기 · 범례 · SVG · 종목 패널 · 업종 목록)가
   한 상자 .sk-wrap — 핵심지표 스냅샷 .mc-snapwrap 과 같은 규칙(가운데 · 최대 min(960px, 100% − 48px) · 폰 폭 100%). 서브탭(국내 · 미국)은 상자 밖 왼쪽 그대로.
   같은 날 장중(수집기 10분 · 화면 5분 확인): 배지 .sk-live(회색 테두리 — 방향색 아님 · 마감 잠정은 점선) · 장중 시세 없는 상자 .sk-box.nolive = 흐리게(빗금은 null 전용 그대로) ·
   머리 오른쪽 '지금 새로고침'(.sk-reload) + 작은 글(.sk-poll — 실패는 warn 색). */
.sk-wrap{max-width:min(960px, 100% - 48px); margin:0 auto}
.sk-root{--sk-zero:#C8C8C8; --sk-na:#ECEEF1; --sk-na-ln:#C3C8CF; --sk-band:#E3E7EC}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sk-root{--sk-zero:#4A4A4A; --sk-na:#22272E; --sk-na-ln:#3B424C; --sk-band:#232A33}
}
.sk-head{margin-bottom:6px}
.sk-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.sk-meta{flex:1 1 320px; min-width:0; font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.sk-act{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:2px 8px; margin-left:auto; max-width:100%}
.sk-reload{padding:1px 9px; border:1px solid var(--rule); border-radius:5px; background:var(--panel); font-size:12px; white-space:nowrap}
.sk-reload:disabled{opacity:.55; cursor:default}
.sk-poll{font-size:11px; color:var(--muted); overflow-wrap:anywhere}
.sk-poll.fail{color:var(--warn)}
.sk-poll.stale{color:var(--warn)}                  /* 수집이 40분 넘게 멈춤(stocks.js STALE_MIN) — 방향색 아님 */
.sk-live{display:inline-block; padding:0 7px; border:1px solid var(--muted); border-radius:99px; font-size:11px; line-height:1.55; color:var(--ink-2); font-weight:600; vertical-align:1px}
.sk-live.closed{border-style:dashed}
.sk-nl{cursor:help; border-bottom:1px dotted var(--muted)}
.sk-nlt{color:var(--muted)}
.sk-nlr td{opacity:.6}
.sk-warn{color:var(--warn)}
.sk-notes{margin:3px 0 0; padding-left:18px; font-size:11.5px; color:var(--muted); overflow-wrap:anywhere}
.sk-fail{margin-top:4px; padding:3px 8px; border-radius:5px; font-size:11.5px; background:var(--warn-bg); color:var(--warn); overflow-wrap:anywhere}
.sk-src{margin-top:3px; font-size:11.5px; color:var(--muted)}
.sk-src>summary{cursor:pointer; width:max-content}
.sk-src div{overflow-wrap:anywhere}
.sk-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:8px 0 6px}
.sk-ctl .seg{margin:0}
.sk-lab{font-size:12px; color:var(--muted)}
.sk-q{width:210px; max-width:100%; padding:5px 10px; border:1px solid var(--rule); border-radius:5px; background:var(--panel)}
.sk-hits{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0 0 6px}
.sk-hits:empty{display:none}
.sk-hitb{padding:1px 9px; border:1px solid var(--rule); border-radius:99px; background:var(--panel); font-size:12px}
.sk-code{font-family:Consolas,"Courier New",monospace; font-size:11.5px; color:var(--muted)}
.sk-legend{display:flex; flex-wrap:wrap; align-items:center; gap:4px 5px; margin:0 0 8px; font-size:11.5px}
.sk-legend .hint{font-size:11.5px}
.sk-sw{display:inline-block; min-width:42px; padding:1px 4px; border-radius:3px; text-align:center; font-size:11px; font-variant-numeric:tabular-nums}
.sk-swna{background:repeating-linear-gradient(45deg, var(--sk-na) 0 4px, var(--sk-na-ln) 4px 6px); color:var(--ink); cursor:help}
.sk-lg-t{color:var(--muted)}
.sk-mapwrap{position:relative; background:var(--panel); border:1px solid var(--rule); border-radius:7px}
.sk-svg{display:block; width:100%; height:auto}
.sk-svg text{pointer-events:none; user-select:none}
.sk-box{cursor:pointer}
.sk-box rect{stroke:var(--panel); stroke-width:1px; vector-effect:non-scaling-stroke}
.sk-box.nolive{opacity:.55}                     /* 장중 시세 없음 — 전일 종가(EOD 값) 그대로 그린 상자 */
.sk-searching .sk-box:not(.hit){opacity:.3}
.sk-band{fill:var(--sk-band)}
.sk-bandt{fill:var(--ink-2); font-weight:700}
.sk-band0{fill:transparent; pointer-events:none}
.sk-sech{cursor:pointer; outline:none}
.sk-tna{fill:var(--ink)}
.sk-na-bg{fill:var(--sk-na)}
.sk-na-ln{stroke:var(--sk-na-ln)}
#sk-hl rect{fill:none; pointer-events:none; vector-effect:non-scaling-stroke}
.sk-hit{stroke:var(--ink); stroke-width:2px}
.sk-selr{stroke:var(--ink); stroke-width:3px; stroke-dasharray:6 3}
.sk-focr{stroke:var(--accent); stroke-width:3px}
.sk-tip{position:absolute; z-index:6; pointer-events:none; min-width:150px; max-width:min(280px, calc(100% - 4px));
        padding:7px 9px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:var(--ink);
        box-shadow:0 6px 18px rgba(0,0,0,.18); font-size:12px; line-height:1.45; overflow-wrap:anywhere}
.sk-tt{width:auto; margin-top:3px}
.sk-tt td{padding:0 10px 0 0; border:0}
.sk-tt tr.cur td{font-weight:700}
.sk-tt-m{color:var(--ink-2)}
.sk-help{margin:6px 0 0}
.sk-panel{margin-top:12px; padding:10px 12px; background:var(--panel); border:1px solid var(--rule); border-radius:7px}
.sk-ph{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin-bottom:6px}
.sk-ph b{font-size:14.5px}
.sk-x{margin-left:auto; padding:2px 9px; background:none; border:1px solid var(--rule); border-radius:5px; font-size:12px}
.sk-pm{margin-bottom:8px; font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.sk-pgrid{display:grid; grid-template-columns:minmax(0, 320px) minmax(0, 1fr); gap:12px}
.sk-pt{margin-bottom:4px; font-size:12.5px; font-weight:600}
.sk-small{max-height:340px}
.sk-slist{max-height:440px}
.sk-panel thead th{cursor:default}
.sk-lnk{padding:0; background:none; border:0; color:var(--accent); font-weight:600; text-align:left}
.sk-more, .sk-go{margin:6px 6px 0 0; padding:3px 10px; background:var(--panel); border:1px solid var(--rule); border-radius:5px; font-size:12px}
.sk-srcn{margin-top:4px; font-size:11px; overflow-wrap:anywhere}
.sk-msg{white-space:normal; overflow-wrap:anywhere}
.sk-msg .sk-retry{margin-top:8px; padding:4px 12px; border:1px solid var(--rule); border-radius:5px; background:var(--panel)}
/* 2026-10-14 nav 2단(.seg — 히트맵 [코스피 · 코스닥 · S&P500] / 시세 [국내 · 미국]) — 1단 서브탭 아랫줄 왼쪽(ETF › 미국 ETF #us-tabs 선례) · 폰 폭에선 칸이 접힌다 */
#stock-map-views, #stock-quote-mkts{margin-bottom:8px; flex-wrap:wrap}
/* 실적(2026-10-22) — 캘린더 주 다섯 칸 · 발표 요약 */
#stock-earn-views, #stock-earn-mkts{margin-bottom:8px; flex-wrap:wrap; display:inline-flex; margin-right:10px}
.er-src{margin:0 0 6px; font-size:11px; overflow-wrap:anywhere}
.er-head{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:2px 0 8px}
.er-week{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px}
.er-day{border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:6px 8px; min-width:0}
.er-day.today{border-color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--ink-2)}
.er-dh{display:flex; justify-content:space-between; font-weight:700; font-size:12.5px; margin-bottom:3px}
.er-day ul{list-style:none; margin:0; padding:0}
.er-day li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 5px; font-size:11.5px; padding:2px 0; border-top:1px solid var(--rule-soft); cursor:help}
.er-t{font-size:10px; color:var(--muted); border:1px solid var(--rule); border-radius:3px; padding:0 3px}
.er-e{color:var(--muted); font-size:10.5px}
.er-s{font-weight:700; font-variant-numeric:tabular-nums}
.er-s.up, .er-kpi b.up{color:var(--up)} .er-s.down, .er-kpi b.down{color:var(--down)}
.er-more summary{font-size:11px; color:var(--muted); cursor:pointer; margin-top:3px}
.er-kpi{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px}
.er-kpi > div{border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:5px 10px; display:flex; flex-direction:column; min-width:96px}
.er-kpi b{font-size:17px; font-variant-numeric:tabular-nums}
.er-three{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; margin-bottom:10px}
.er-two{display:contents}
.er-box{border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:6px 10px}
.er-bh{font-weight:700; font-size:12.5px; margin-bottom:3px}
.er-box ol{margin:0; padding-left:18px; font-size:11.5px} .er-box li{padding:1px 0; cursor:help}
.er-key{line-height:1.7}
.er-fh{font-size:9px; color:var(--muted); margin-left:2px; font-weight:400}
@media (max-width:899.98px){ .er-week{grid-template-columns:minmax(0, 1fr)} }
/* 시세 표의 '시세' 배지 — 회색 테두리(방향색 아님 · 히트맵 .sk-live 와 같은 뜻): .live 장중 · .closed 마감(잠정) 점선 · .nolive 전일 종가 흐림 .55 · 글자 '종가'(EOD) 는 기본 */
.badge.sk-qlive{background:none; color:var(--ink-2); border:1px solid var(--muted); font-weight:600}
.badge.sk-qlive.closed{border-style:dashed}
.badge.sk-qlive.nolive{opacity:.55}
.bar.sub .mini{padding:1px 9px; border:1px solid var(--rule); border-radius:5px; background:var(--panel); font-size:12px; white-space:nowrap}   /* 표 위 '지금 새로고침' */
/* 2026-10-20 상승 · 보합 · 하락 종목 수(stocks.js drawBreadth — 기간 칩 아래 한 줄 · 섹터 띠 툴팁 .sk-tt-bd): 상승 빨강(--up) · 하락 파랑(--down) — 한국 관행 ·
   작은 비율 막대 = 상승 : 보합 : 하락(보합 = 중립 회색 --sk-zero) · 값 없음 · 장중 시세 없음은 흐린 글자(방향색 아님) */
.sk-breadth{margin:0 0 6px; font-size:12.5px; line-height:1.6; color:var(--ink-2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; cursor:help}
.sk-breadth:empty{display:none}
.sk-bd-k, .sk-bd-x{color:var(--muted)}
.sk-bd-up, .sk-bd-up b{color:var(--up)}
.sk-bd-dn, .sk-bd-dn b{color:var(--down)}
.sk-bd-fl b{color:var(--ink)}
.sk-bd-bar{display:inline-flex; width:96px; max-width:30%; height:6px; margin:0 3px; vertical-align:1px; border-radius:3px; overflow:hidden; background:var(--rule-soft)}
.sk-bd-bar span{display:block; height:100%}
.sk-bd-bar .u{background:var(--up)}
.sk-bd-bar .f{background:var(--sk-zero)}
.sk-bd-bar .d{background:var(--down)}
/* 2026-10-23 지수 수익률(stocks.js drawIndex — 기간 칩 아래 첫 줄 · 기여도 머리 옆): 수익률 숫자만 방향색(상승 빨강 · 하락 파랑) · 값 · 기준은 흐린 글자 */
.sk-index{margin:0 0 2px; font-size:13px; line-height:1.6; color:var(--ink-2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; cursor:help}
.sk-index:empty{display:none}
.sk-ix-k{color:var(--ink)}
.sk-ix-v{color:var(--ink)}
.sk-ix-v.up{color:var(--up)}
.sk-ix-v.down{color:var(--down)}
.sk-ix-x{color:var(--muted)}
/* 2026-10-20 기여도(stocks.js drawContrib — 히트맵 맨 아래): 패널과 같은 상자 · 위 10 표 둘 나란히(폰 위아래) · 업종별 합 표 · 수익률 · 기여도 칸만 방향색(td.up · td.down — 전역 규칙) */
.sk-contrib{margin-top:14px; padding:10px 12px; background:var(--panel); border:1px solid var(--rule); border-radius:7px}
.sk-contrib:empty{display:none}
.sk-ch{margin-bottom:8px; font-size:13px; color:var(--ink-2); overflow-wrap:anywhere}
.sk-ch b{color:var(--ink)}
.sk-ch b.up{color:var(--up)}
.sk-ch b.down{color:var(--down)}
.sk-ch .hint{margin-left:4px}
.sk-cgrid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px}
.sk-ctw{max-height:340px}
.sk-csw{max-height:300px}
.sk-ctab{font-size:12px}
.sk-ctab th, .sk-ctab td{padding:4px 7px}
.sk-ctab thead th{cursor:default}
.sk-ctab td.name{white-space:normal; min-width:96px}
.sk-ctab td.sk-csec{color:var(--ink-2)}
.sk-cbn, .sk-csn{padding:0; background:none; border:0; color:var(--accent); font:inherit; font-weight:600; text-align:left; cursor:pointer}
.sk-cst{margin-top:12px}
.sk-cnote{margin-top:8px; font-size:11.5px; overflow-wrap:anywhere}
@media (max-width:640px){
  .sk-wrap{max-width:100%}                         /* 폰: 좌우 여백(−48px) 없이 화면 폭 — 스냅샷 .mc-snapwrap 과 같다 */
  .sk-pgrid{grid-template-columns:minmax(0, 1fr)}
  .sk-q{width:100%}
  .sk-breadth{font-size:12px}
  .sk-index{font-size:12.5px}
  .sk-cgrid{grid-template-columns:minmax(0, 1fr)}
  .sk-contrib{padding:8px}
  .sk-ctab .sk-csec{display:none}                 /* 폰: 위 10 표의 업종 칸을 접어 기여도 칸이 상자 안에 들어오게(업종은 종목 패널에) */
}
/* 2026-10-29 ETF 분석 셋 범주색(static/etfplus.js — 선 · 점 · 견본): 데이터 시각화 기본 팔레트 · 고정 순서 · 라이트/다크 따로 고른 값(이웃 쌍 색각 구분 검증된 순서).
   'ETF 한눈에' · '코스피 시장 전체' 블록 앞에 둔다 — 그 두 블록 검사는 블록부터 파일 끝까지에 새 색 변수 · 고정 색이 없는지 본다(나머지 .xp-* 규칙은 파일 맨 끝) */
.xp-root{--s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .xp-root{--s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767}
}
:root[data-theme="dark"] .xp-root{--s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767}

/* ── ETF 한눈에(2026-10-20 사용자 "ETF → 모니터에서 해당 ETF 클릭하면 한눈에 볼 수 있는 팝업 — 차트랑 기본 정보") — app.html openEtfView ──
   오른쪽 서랍(#ev-drawer — 매크로 상세 서랍 .mc-drawer 와 같은 꼴 · 폭 min(640px, 화면) · 폰 640px 이하 전체 화면) + 뒤 막(#ev-back).
   색: 수익률 줄 · 괴리율만 상승 빨강 / 하락 파랑(전체목록 표와 같다 — td.up 규칙은 td 에만 걸려 여기 따로) · 가격 선은 잉크색(.mc-line.now — 방향색 아님) ·
   모델 신호는 td.sig · td.sigref · td.mute(Monitor 와 같은 강조 — 방향색 없음) · 구성종목 비중 막대는 회색. 새 색 변수 없음(어두운 테마는 기존 변수로 따라온다) */
.ev-open{background:none; border:0; padding:0; margin:0; font:inherit; font-weight:600; color:inherit; cursor:pointer; text-align:left;
  text-decoration:underline dotted var(--muted); text-underline-offset:3px}
.ev-open:hover{color:var(--accent); text-decoration-color:var(--accent)}
.ev-open:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:2px}
.ev-back{position:fixed; inset:0; background:rgba(0,0,0,.22); z-index:49}
.ev-drawer{position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(640px, 100%); background:var(--panel); border-left:1px solid var(--rule);
  box-shadow:-8px 0 24px rgba(0,0,0,.14); z-index:50; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:14px 16px 28px; box-sizing:border-box}
.ev-noscroll{overflow:hidden}
.ev-h{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.ev-hm{min-width:0}
.ev-t{font-size:17px; font-weight:700; margin:0; line-height:1.35; overflow-wrap:anywhere}
.ev-t:focus{outline:none}
.ev-meta{font-size:12px; color:var(--muted); margin-top:3px; overflow-wrap:anywhere}
.ev-meta code{font-size:11.5px; color:var(--ink-2)}
.ev-grp{display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:5px; font-size:11.5px}
.ev-grp .tag{max-width:160px}
.ev-memo{margin-top:5px; font-size:12.5px; line-height:1.5; color:var(--ink-2); overflow-wrap:anywhere}   /* 2026-10-20 Monitor 메모 */
.ev-memo .mute{font-size:11.5px; margin-right:6px}
.ev-ret{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; margin:12px 0 2px}
.ev-r{background:var(--head); border-radius:6px; padding:5px 3px; text-align:center; min-width:0}
.ev-rk{display:block; font-size:11px; color:var(--muted)}
.ev-rv{display:block; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.ev-rv.up, .ev-f dd.up{color:var(--up)}
.ev-rv.down, .ev-f dd.down{color:var(--down)}
.ev-rnote{font-size:11.5px}
.ev-sec{margin-top:16px}
.ev-sh{display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; font-size:13.5px; font-weight:700; margin:0 0 6px}
.ev-sh .mute{font-size:11.5px; font-weight:400; overflow-wrap:anywhere}
/* 개요 글(2026-10-20 — 가격 그림 바로 위 3~5줄 · 퀀트 모델 칸 .ev-mt 는 같은 날 뺐다) */
.ev-about{margin:0; font-size:13px; line-height:1.65; color:var(--ink); overflow-wrap:anywhere; word-break:keep-all}
.ev-wins{margin:0 0 6px; flex-wrap:wrap}
/* [가격 | TR](2026-11-04) — 기간 단추와 한 줄 · 좁으면 다음 줄 */
.ev-ctl{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:0 0 6px}
.ev-ctl .seg{margin:0}
.ev-basis button{padding:2px 10px}
.ev-basis button:disabled{opacity:.4; cursor:not-allowed}
.ev-chart .ev-divm{stroke:var(--ink-2); stroke-width:1.2}
.ev-wins button{padding:2px 10px}
.ev-wins button:disabled{opacity:.4; cursor:not-allowed}
.ev-span{font-size:12px; color:var(--ink-2); margin:0 0 4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.ev-chart{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:4px 4px 0; min-height:120px; touch-action:pan-y}
.ev-chart:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ev-chart.ev-wait{display:flex; align-items:center; justify-content:center}
.ev-chart .mc-chart{width:100%}
.ev-chart .ev-dot{fill:var(--ink); stroke:var(--panel); stroke-width:1.5}
.ev-chart .ev-end{fill:var(--ink)}
.ev-src{margin-top:4px; font-size:11.5px; overflow-wrap:anywhere}
.ev-pxmsg{padding:8px 0}
.ev-facts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px; margin:0}
.ev-f{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--rule-soft); min-width:0}
.ev-f dt{flex:none; color:var(--muted); font-size:12px}
.ev-f dt[title]{cursor:help; text-decoration:underline dotted var(--rule); text-underline-offset:3px}
.ev-f dd{margin:0; min-width:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.ev-f dd.soon{color:var(--warn)}
.ev-hl{list-style:none; margin:0; padding:0; counter-reset:evh}
.ev-hl li{display:flex; align-items:center; gap:8px; padding:3px 0; border-bottom:1px solid var(--rule-soft); counter-increment:evh; font-size:12.5px; min-width:0}
.ev-hl li::before{content:counter(evh); flex:none; min-width:16px; color:var(--muted); font-size:11px; text-align:right}
.ev-hn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev-hb{flex:none; display:inline-block; height:7px; background:var(--muted); opacity:.45; border-radius:2px}
.ev-hw{flex:none; min-width:54px; text-align:right; font-variant-numeric:tabular-nums}
.ev-more{margin-top:3px}
.ev-links{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px}
.ev-bline{font-size:12.5px; overflow-wrap:anywhere}
.ev-why{margin-top:4px}
.ev-why summary{cursor:pointer; color:var(--accent); font-size:12px}
.ev-why div{font-size:12px; color:var(--ink-2); line-height:1.6; overflow-wrap:anywhere; margin-top:3px}
.ev-foot{margin-top:18px; font-size:11.5px}
@media (max-width:640px){
  .ev-drawer{width:100%; border-left:0; padding:12px 12px 24px}
  .ev-ret{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .ev-facts{grid-template-columns:minmax(0, 1fr)}
}

/* ── ETF › 기여도(2026-10-20 — app.html ctbDraw) — 구성종목 히트맵 · 기여 위/아래 표. 색 변수는 주식 히트맵(.sk-root — --sk-zero · --sk-na …)을 그대로 쓴다
   (#ctb-out 에 sk-root 를 같이 단다) · 상승 빨강 / 하락 파랑(--up · --down) — 방향색은 수익률 칸에만 ── */
.ct-go{padding:5px 18px; border:1px solid var(--accent); background:var(--accent); color:var(--panel); border-radius:6px; font:inherit; font-weight:600; cursor:pointer; flex:0 0 auto}
.ct-go:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ct-wrap{max-width:min(1100px, calc(100% - 32px)); margin:0 auto}
.ct-head{margin:6px 0 2px; font-size:13px; line-height:1.6}
.ct-head b.up{color:var(--up)} .ct-head b.down{color:var(--down)}
.ct-meta{font-size:12px; line-height:1.5}
.ct-legend{display:flex; gap:4px; align-items:center; flex-wrap:wrap; font-size:11px; margin:6px 0}
.ct-sw{display:inline-block; min-width:40px; text-align:center; padding:1px 5px; border-radius:2px; font-size:11px}
.ct-map{position:relative}
.ct-svg{width:100%; height:auto; display:block}
.ct-box rect{stroke:var(--panel); stroke-width:1px; vector-effect:non-scaling-stroke}
.ct-tip{position:absolute; z-index:6; pointer-events:none; min-width:150px; max-width:min(280px, calc(100% - 4px));
        padding:7px 9px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:var(--ink);
        box-shadow:0 6px 18px rgba(0,0,0,.18); font-size:12px; line-height:1.45; overflow-wrap:anywhere}
.ct-tip b.up{color:var(--up)} .ct-tip b.down{color:var(--down)}
.ct-tables{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; margin-top:12px}
.ct-tbl h4{margin:0 0 4px; font-size:13px}
.ct-t{width:100%; border-collapse:collapse; font-size:12px}
.ct-t th, .ct-t td{padding:3px 6px; border-bottom:1px solid var(--rule-soft)}
.ct-t td.name{white-space:normal}
.ct-t td.up{color:var(--up)} .ct-t td.down{color:var(--down)}
.ct-notes{font-size:12px; color:var(--ink-2); margin:10px 0 4px; padding-left:18px; line-height:1.55}
@media (max-width:640px){ .ct-wrap{max-width:100%} .ct-tables{grid-template-columns:1fr} }

/* (2026-10-22 정리) 아래 주식 블록들(실적 상세 · 봉 · 시세 줄 그림 · 주요 기사)은 원래 맨 끝이었다 — '코스피 시장 전체' 블록(.mm-*)이 맨 끝이어야 해서(test_web_mood) 여기로 옮겼다. 규칙은 그대로. */
/* 실적 상세 · 4분기 · 섹터별(2026-10-22) · 주식 가격 그림 skchart.js(2026-10-22 — 종목 패널 · 실적 상세) */
.er-hd{font-size:12px; margin-right:1px; color:var(--muted); cursor:help} .er-hd.up{color:var(--up)} .er-hd.down{color:var(--down)}
.er-hcell{white-space:nowrap}
#earn-body [data-ek]{cursor:pointer}
#earn-body li[data-ek].on, #earn-body tr[data-ek].on > td{background:var(--accent-soft)}
#earn-body [data-ek]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.er-det{border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:8px 10px; margin:8px 0}
.er-dh2{display:flex; gap:8px; align-items:baseline; margin-bottom:6px; flex-wrap:wrap} .er-dh2 .er-detx{margin-left:auto}
.er-dgrid{display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:14px}
.er-kv{border-collapse:collapse; font-size:12px; margin-bottom:6px} .er-kv th{text-align:left; color:var(--muted); font-weight:400; padding:2px 10px 2px 0; white-space:nowrap; vertical-align:top}
.er-kv td{padding:2px 0} .er-kv .num{text-align:right}
.er-news{margin:2px 0 0; padding-left:16px; font-size:12px} .er-news li{padding:2px 0; overflow-wrap:anywhere}
.er-secbox{margin-bottom:10px} .er-sect{width:100%} .er-sect th, .er-sect td{padding:2px 10px 2px 0} .er-sect thead th{border-bottom:1px solid var(--rule)}
.er-detr > td{padding:0 4px 6px; white-space:normal}
.er-thint{margin:2px 0 4px; font-size:11px}
/* 국내 가이던스(2026-10-26 — stocks.js erGuideHtml · 요약 '회사 가이던스' · 표 '전망 대비') — 방향색은 이전 전망 변화 · 직전 기간 오차율의 부호(.er-s)만 */
.er-gsec{margin-top:8px; padding-top:6px; border-top:1px solid var(--rule-soft)}
.er-gkv{width:100%} .er-gkv td{white-space:normal; overflow-wrap:anywhere}
.er-gplan{margin:2px 0 0; padding-left:16px; font-size:11.5px} .er-gplan li{padding:1px 0}
.er-gmore{font-size:11.5px} .er-gmore summary{cursor:pointer; color:var(--muted); font-size:11px}
.er-gnone{margin:2px 0 6px}
/* 투자 · 경영계획 가이던스(2026-10-26 — 실적 수치 전망과 따로 · 'IR 에서 제공' 은 회색 테두리 꼬리표 — 방향색 아님) */
.er-gbh{margin:8px 0 2px; font-weight:600; font-size:12px} .er-gbh .hint{font-weight:400}
.er-gbiz{margin:0; padding-left:16px; font-size:12px} .er-gbiz > li{padding:3px 0} .er-gbiz > li + li{border-top:1px dashed var(--rule-soft)}
.er-gamt{margin-top:1px} .er-gir{display:inline-block; padding:0 5px; border:1px solid var(--rule); border-radius:8px; font-size:10.5px; color:var(--ink); white-space:nowrap}
/* 국내 가이던스 표(2026-10-26 '미국처럼 표로') · 컨센서스 줄 · 직전 기간 전망 vs 실적 · 경영계획 공시 접이 — 색은 기존 .er-s(상향 · 하향 부호)만 */
.er-gtw{max-width:100%; margin:2px 0} .er-gtab{font-size:12px; width:auto} .er-gtab th{font-weight:600; color:var(--muted); font-size:11px; white-space:nowrap}
.er-gtab td{white-space:nowrap; vertical-align:top; padding:2px 8px 2px 0} .er-gtab td .hint{font-size:10.5px}
.er-gcons{margin:6px 0 2px; font-size:12px; line-height:1.5} .er-glast{margin:4px 0 2px; font-size:11.5px} .er-gplanbox{margin-top:6px}
.er-girout{margin:2px 0 4px} .er-girseg{margin:1px 0} .er-girseg > summary{font-size:11.5px; color:var(--ink); line-height:1.5} .er-gsub{margin:1px 0 2px; padding-left:14px; font-size:11.5px}
@media (max-width:640px){ .er-gtab td{white-space:normal; min-width:52px} }
/* 히트맵 종목 패널 · 시세 줄 상세의 가이던스 칸(stocks.js skGuideInto — 지표 칸과 같은 폭) · 실적 상세에서 오른쪽 실적 표가 없을 때(가이던스만인 회사) 그림 한 칸 */
.sk-guidebox{margin:2px 0 10px; max-width:900px} .sk-guidebox .er-kv{margin-bottom:2px}
/* 컨센서스 칸 · 가이던스 큰 토글(2026-10-26 사용자 "컨센서스를 가이던스 위에 가이던스는 토글 하나 큰거 더 만들어서 그걸 눌러야 나오게") — 단추 = 칸 폭 전체 · 방향색 없음 */
.sk-consbox, .er-consbox{margin:2px 0 8px; max-width:900px} .sk-consbox .er-gcons, .er-consbox .er-gcons{margin:0}
.er-consh{margin-top:8px}
.er-gtog{display:flex; align-items:baseline; gap:8px; width:100%; box-sizing:border-box; padding:8px 12px; text-align:left;
  background:var(--panel); border:1px solid var(--rule); border-radius:6px; font-size:13px; font-weight:600; color:var(--ink)}
.er-gtog:hover{border-color:var(--accent); background:var(--accent-soft)}
.er-gtog:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.er-gtog[aria-expanded="true"]{border-color:var(--accent)}
.er-gtog .er-gtt{font-weight:400; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.er-gbody{margin-top:6px} .er-ghint{margin:0 0 4px; font-size:11px}
.er-gsec .er-gtog{margin-top:2px}
.er-dgrid1{grid-template-columns:minmax(0, 1fr)}
/* 표 줄 아래 상세(tr.er-detr) — 표가 상자보다 넓으면(국내 15칸 1,228px > 1100px 창의 상자 1,036px) 상세가 오른쪽에서 잘렸다 → 상자 왼쪽에 붙이고 보이는 폭으로(2026-10-26) */
.er-detr .er-det{position:sticky; left:0; box-sizing:border-box; width:min(100%, calc(100vw - 64px))}
@media (max-width:899.98px){ .er-dgrid{grid-template-columns:minmax(0, 1fr)} }
.sk-chartbox{margin:4px 0 10px}
.skc-bar{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-bottom:4px; font-size:11.5px}
.skc-wins button{padding:1px 8px}
.skc-chg.up{color:var(--up)} .skc-chg.down{color:var(--down)}
.skc-wrap{position:relative}
.skc-svg{display:block; width:100%; height:auto}
.skc-line{fill:none; stroke:var(--ink); stroke-width:1.5}
.skc-grid{stroke:var(--rule-soft); stroke-width:1}
.skc-tick{font-size:10px; fill:var(--muted)}
.skc-mk{fill:var(--panel); stroke:var(--accent); stroke-width:2}
.skc-cross{stroke:var(--muted); stroke-dasharray:3 3}
.skc-dot{fill:var(--ink)}
.skc-hit{fill:transparent; cursor:crosshair; touch-action:pan-y}
.skc-tip{position:absolute; pointer-events:none; background:var(--panel); border:1px solid var(--rule); border-radius:4px; padding:2px 6px; font-size:11px; white-space:nowrap; box-shadow:0 1px 3px rgba(0, 0, 0, .12)}
.skc-foot{font-size:10.5px; margin-top:2px; overflow-wrap:anywhere}
/* 봉 · 막대 · 거래량(2026-10-22 사용자 "주가 차트는 꺾은선 말고 그 바형식으로") — 한국 관행: 종가 > 시가 빨강(--up) · 종가 < 시가 파랑(--down) · 같음 잉크 */
.skc-modes button{padding:1px 8px}
.skc-wk{fill:none; stroke-width:1; shape-rendering:crispEdges} .skc-wk.up{stroke:var(--up)} .skc-wk.dn{stroke:var(--down)} .skc-wk.eq{stroke:var(--ink)}
.skc-cd{stroke:none; shape-rendering:crispEdges} .skc-cd.up{fill:var(--up)} .skc-cd.dn{fill:var(--down)} .skc-cd.eq{fill:var(--ink)}
.skc-nb{fill:none; stroke:var(--muted); stroke-width:1; opacity:.6}
.skc-vol{stroke:none; opacity:.45; shape-rendering:crispEdges} .skc-vol.up{fill:var(--up)} .skc-vol.dn{fill:var(--down)} .skc-vol.eq{fill:var(--muted)}

/* 시세 표 줄 누르기 = 가격 그림(2026-10-22 · stocks.js quoteChartWire) */
#stkospi-tbody tr, #stkosdaq-tbody tr, #stus-tbody tr, #stwatch-tbody tr{cursor:pointer}
#stkospi-tbody tr.sk-qon > td, #stkosdaq-tbody tr.sk-qon > td, #stus-tbody tr.sk-qon > td, #stwatch-tbody tr.sk-qon > td{background:var(--accent-soft)}
tr.sk-qdet{cursor:default} tr.sk-qdet > td{white-space:normal; padding:6px 10px 10px; background:var(--panel)}
.sk-qhead{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; margin-bottom:4px} .sk-qhead .sk-qx{margin-left:auto}
.sk-qchart{max-width:900px}
/* 시세 줄 상세의 칸(머리 · 가격 · 지표 · 가이던스 · 기사) — 표가 상자보다 넓어(코스피 19칸 ≈1,165px) 폰에선 칸이 1,145px 로 늘어 옆으로 밀어야 읽혔다(닫기 × 도 화면 밖) →
   실적 상세(.er-detr .er-det)처럼 상자 왼쪽에 붙이고 보이는 폭으로(2026-10-26) */
tr.sk-qdet > td > *{position:sticky; left:10px; box-sizing:border-box; max-width:min(900px, calc(100vw - 64px))}

/* 종목 주요 기사(2026-10-22 · stocks.js skNewsInto — /api/stocks/news) */
.sk-newsbox{margin:2px 0 10px}
.sk-news{margin:2px 0 0; padding-left:18px; font-size:12px} .sk-news li{padding:2px 0; overflow-wrap:anywhere} .sk-news li b{font-weight:600}
.sk-newsmore{font-size:11px; margin-top:3px; overflow-wrap:anywhere}

/* 종목 지표(2026-10-26 · stocks.js skFundInto — /api/stocks/fund) — 칸 격자(넓으면 6열 · 폰 3열) · 방향색 없음(잉크 · 흐린 글자만) */
.sk-fundbox{margin:2px 0 10px; max-width:900px}
.sk-fund{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:6px; overflow:hidden}
.sk-fc{background:var(--panel); padding:5px 8px; min-width:0} .sk-fc[title]{cursor:help}
.sk-fk{display:block; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sk-fv{display:block; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .sk-fv.na{color:var(--muted); font-weight:400}
.sk-fsrc{font-size:11px; margin-top:3px; overflow-wrap:anywhere} .sk-fwhy{color:var(--muted)}
@media (max-width:640px){ .sk-fund{grid-template-columns:repeat(3, minmax(0, 1fr))} }

/* ── 모멘텀 성적 서랍(2026-10-22 — app.html openMt · /api/monitor/momentum · ETF_DB/code/momentum_track.py) ──
   그릇은 ETF 한눈에 서랍(.ev-drawer · .ev-back · .ev-h · .ev-sec)을 그대로 쓰고 폭만 넓힌다. 색: 수익률 · 초과 숫자만 상승 빨강 / 하락 파랑 ·
   선은 잉크 농도(바구니 accent 굵게 · 동일가중 잉크 · KODEX 200 옅은 점선) · IC 막대 회색. */
.mt-drawer{width:min(980px, 100%)}
.mt-sub{font-size:12px; font-weight:400; color:var(--muted); margin-left:4px}
.mt-drawer .up{color:var(--up)} .mt-drawer .down{color:var(--down)}
.mt-msg{margin-top:14px}
.mt-lead{margin:0 0 6px; font-size:12.5px; line-height:1.55; color:var(--ink-2); overflow-wrap:anywhere}
.mt-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px; margin:6px 0 2px}
.mt-tile{background:var(--head); border-radius:8px; padding:6px 9px 7px; min-width:0}
.mt-tk{display:flex; justify-content:space-between; gap:6px; font-size:11.5px; color:var(--muted)}
.mt-tv{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; margin:1px 0 2px; white-space:nowrap}
.mt-tx{font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mt-bar{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:4px}
.mt-bar .seg{margin-bottom:0}
.mt-seg button{padding:3px 10px}
.mt-seg button:disabled{opacity:.4; cursor:not-allowed}
.mt-key{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; color:var(--ink-2); margin:4px 0}
.mt-key i{display:inline-block; width:18px; height:0; border-top:2.5px solid var(--accent); vertical-align:middle; margin-right:5px}
.mt-key i.mt-l1{border-top:2px solid var(--ink-2)}
.mt-key i.mt-l2{border-top:2px dashed var(--muted)}
.mt-key i.mt-icb{width:9px; border-top:8px solid var(--muted); opacity:.5}
.mc-chart .mc-line.mt-l0{stroke:var(--accent); stroke-width:2.2}
.mc-chart .mc-line.mt-l1{stroke:var(--ink-2); stroke-width:1.5}
.mc-chart .mc-line.mt-l2{stroke:var(--muted); stroke-width:1.4; stroke-dasharray:4 3}
.mc-chart .mt-zero{stroke:var(--ink-2); stroke-width:1; stroke-dasharray:2 3}
.mc-chart .mt-icbar{fill:var(--muted); opacity:.45}
.mt-chart{min-height:160px}
.mt-cnote{margin-top:3px}
.mt-x{overflow-x:auto; max-width:100%}
table.mt-tbl{width:auto; min-width:100%; font-size:12.5px}
table.mt-tbl th, table.mt-tbl td{padding:3px 9px}
table.mt-tbl thead th{position:static; background:var(--head); font-size:12px; cursor:default}
table.mt-tbl td .mute{font-size:11px}
.mt-cols{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:8px 18px}
.mt-mini{font-size:11.5px; color:var(--muted); margin:2px 0 3px}
.mt-top{margin:0; padding-left:20px; font-size:12.5px; line-height:1.6}
.mt-top .mute{font-size:11px}
.mt-names{font-size:12.5px; line-height:1.6; margin-bottom:6px; overflow-wrap:anywhere}
.mt-nm{font-weight:600}
.mt-years, .mt-notes{margin-top:8px; font-size:12.5px}
.mt-years summary, .mt-notes summary{cursor:pointer; color:var(--ink-2)}
.mt-notes ul{margin:6px 0; padding-left:18px; line-height:1.6}
.hint.warn{color:var(--warn)}
@media (max-width:640px){
  .mt-tiles{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .mt-cols{grid-template-columns:minmax(0, 1fr)}
  .mt-tv{font-size:16px}
}

/* ── ETF › Monitor 맨 위 '코스피 시장 전체'(2026-10-20 — app.html mmDraw · /api/market/mood) — 세 칸(Fear & Greed · 투기심리지수 · 빈 칸).
   방향색(상승 · 하락 변수) 없음 — Monitor 규칙(모델 라벨에 방향색을 쓰지 않는다)처럼 잉크 농도만 · 새 색 변수 · 고정 색 없음(어두운 테마는 기존 변수로) ·
   900px 이상 세 칸 같은 폭 · 그보다 좁으면 위아래 ── */
.mm-root{margin:2px 0 12px}
.mm-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:0 0 6px; font-size:13px}
.mm-asof{color:var(--muted); font-size:11.5px}
.mm-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; align-items:stretch}
.mm-card{min-width:0; background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:10px 12px}
.mm-h{margin:0 0 6px; font-size:13.5px; font-weight:700; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px}
.mm-hs{font-size:11.5px; font-weight:400; color:var(--muted)}
.mm-top{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.mm-big{font-size:30px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--ink)}
.mm-big small{font-size:13px; font-weight:600; color:var(--ink-2); margin-left:2px}
.mm-band{font-size:13px; font-weight:700; color:var(--ink-2); border:1px solid var(--rule); border-radius:999px; padding:0 9px; background:var(--head)}
.mm-sub{font-size:11.5px; color:var(--muted)}
.mm-g0{opacity:.08} .mm-g1{opacity:.16} .mm-g2{opacity:.26} .mm-g3{opacity:.38} .mm-g4{opacity:.52}
.mm-list{list-style:none; margin:8px 0 0; padding:0}
.mm-ci{display:grid; grid-template-columns:minmax(0, 1fr) 2.4em 48px; align-items:center; column-gap:8px; padding:3px 0 2px; border-top:1px solid var(--rule-soft); font-size:12px; cursor:help}
.mm-cn{font-weight:600; min-width:0; overflow-wrap:anywhere}
.mm-cs{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.mm-cb{display:block; height:6px; background:var(--rule-soft); border-radius:3px; overflow:hidden}
.mm-cb i{display:block; height:100%; background:var(--ink-2); opacity:.6}
.mm-cr{grid-column:1 / -1; font-size:11px; color:var(--muted); line-height:1.35; overflow-wrap:anywhere}
.mm-ci.off .mm-cn, .mm-ci.off .mm-cs{color:var(--muted); font-weight:400}
.mm-line{font-size:12px; color:var(--ink-2); margin-top:3px; overflow-wrap:anywhere}
.mm-bars{display:block; width:100%; height:64px; margin:8px 0 0}
.mm-bars .mm-b0{stroke:var(--rule); stroke-width:1px; vector-effect:non-scaling-stroke}
.mm-bars rect{fill:var(--ink-2); opacity:.45}
.mm-bars rect.last{fill:var(--ink); opacity:1}
.mm-bars rect.mtd{fill:none; opacity:1; stroke:var(--ink-2); stroke-width:1px; stroke-dasharray:3 2; vector-effect:non-scaling-stroke}
.mm-bl{display:flex; justify-content:space-between; gap:6px; font-size:10.5px; color:var(--muted)}
.mm-codes{font-size:11px; color:var(--muted); margin-top:6px; cursor:help; overflow-wrap:anywhere}
.mm-note{margin:8px 0 0; font-size:11px; color:var(--muted); line-height:1.5; overflow-wrap:anywhere}
.mm-mute{color:var(--muted)}
/* ③ 경기 국면 — 성장 × 물가 차트(경로 12달 + 지금 · 방향색 없음 · 잉크 농도만) */
.mm-clock{display:block; width:100%; height:auto; margin:8px 0 2px}
.mm-clock .ax{stroke:var(--rule); stroke-width:1px; vector-effect:non-scaling-stroke}
.mm-clock .pa{fill:none; stroke:var(--rule-soft); stroke-width:1px; vector-effect:non-scaling-stroke}
.mm-clock .ql{font-size:10px; fill:var(--muted)}
.mm-clock .ql.now{fill:var(--ink); font-weight:700}
.mm-clock .an{font-size:9px; fill:var(--muted)}
.mm-clock .tr{fill:none; stroke:var(--ink-2); stroke-width:1.2px; opacity:.5; vector-effect:non-scaling-stroke}
.mm-clock .tr2{stroke:var(--ink); stroke-width:1.4px; stroke-dasharray:3 2; vector-effect:non-scaling-stroke}
.mm-clock .ah{fill:var(--ink)}
.mm-clock .pt{fill:var(--ink-2)}
.mm-clock circle.cur{fill:var(--ink); stroke:var(--panel); stroke-width:1.5px}
.mm-clock .lb{font-size:9.5px; fill:var(--muted)}
.mm-clock .lb.cur{fill:var(--ink); font-weight:700}
.mm-clock .mn{font-size:8.5px; fill:var(--muted)}
.mm-clock .mn.yr{font-weight:700; fill:var(--ink-2)}
.mm-cap{font-size:10.5px; color:var(--muted); text-align:center; overflow-wrap:anywhere}
.mm-nw{white-space:nowrap}
.mm-wait{color:var(--muted); font-size:12px; padding:6px 0}
.mm-msg{font-size:12.5px; color:var(--muted); padding:4px 0 8px}
@media (max-width:899.98px){ .mm-grid{grid-template-columns:minmax(0, 1fr)} }
/* 2026-10-22 사용자 "너무 크다 좀 사이즈를 많이 줄여도" — 작게: 글자 · 여백 · 막대 · 차트 줄이고 설명 글은 칸 제목 · 줄 툴팁으로(화면에서 숨김) */
.mm-root{margin:0 0 8px}
.mm-head{margin:0 0 4px; font-size:12px}
.mm-asof{font-size:10.5px}
.mm-grid{gap:8px}
.mm-card{padding:6px 9px; border-radius:6px}
.mm-h{margin:0 0 2px; font-size:12.5px; cursor:help}
.mm-hs{font-size:10.5px}
.mm-top{gap:2px 8px}
.mm-big{font-size:21px}
.mm-big small{font-size:11px}
.mm-band{font-size:11.5px; padding:0 7px}
.mm-sub{font-size:10.5px}
.mm-list{margin:3px 0 0}
.mm-ci{padding:1px 0; font-size:11.5px; column-gap:6px}
.mm-cr, .mm-note, .mm-codes, .mm-cap{display:none}
.mm-line{font-size:11.5px; margin-top:2px}
.mm-bars{height:40px; margin:4px 0 0}
.mm-bl{font-size:9.5px}
.mm-clock{margin:3px 0 0}
/* 2026-10-22 둘째 — F&G 반원 계기판(CNN 처럼) · SSI 막대 키움 · 경기 국면 글을 이름 옆으로 · 칸 사이 넓힘 */
.mm-grid{gap:16px}
.mm-fgw{display:grid; grid-template-columns:116px minmax(0, 1fr); column-gap:12px; align-items:center}
.mm-fgl{text-align:center; min-width:0}
.mm-fgl .mm-top{justify-content:center; gap:2px 6px}
.mm-fgl .mm-sub{display:block}
.mm-gsvg{display:block; width:116px; height:auto; margin:0 auto}
.mm-ga{fill:none; stroke:var(--ink); stroke-width:11px}
.mm-ga.mm-g0{opacity:.16} .mm-ga.mm-g1{opacity:.26} .mm-ga.mm-g2{opacity:.36} .mm-ga.mm-g3{opacity:.5} .mm-ga.mm-g4{opacity:.66}
.mm-nd{stroke:var(--ink); stroke-width:2.4px; stroke-linecap:round}
.mm-nh{fill:var(--ink)}
.mm-gt{font-size:8px; fill:var(--muted)}
.mm-fgw .mm-list{margin:0}
.mm-bars{height:72px}
.mm-c3t{display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap}
.mm-c3l .mm-line{margin-top:0; line-height:1.35}
/* 2026-10-23 SSI 일간(20거래일 창) — 선 그림(막대와 같은 72px) · 일간/월간 전환 단추 · 월간 참고 줄. 방향색 없음 — 잉크 농도만 */
.mm-day{display:block; width:100%; height:72px; margin:4px 0 0; overflow:visible}
.mm-day .mm-b0{stroke:var(--rule); stroke-width:1px; vector-effect:non-scaling-stroke}
.mm-day .mm-da{fill:var(--ink); opacity:.1}
.mm-day .mm-dz{stroke:var(--muted); stroke-width:1px; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; opacity:.75}
.mm-day .mm-dl{fill:none; stroke:var(--ink-2); stroke-width:1.3px; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.mm-day .mm-dd{stroke:var(--ink); stroke-width:5px; stroke-linecap:round; vector-effect:non-scaling-stroke}
.mm-day .mm-dh{fill:var(--ink); opacity:0}
.mm-day .mm-dh:hover{opacity:.12}
.mm-bl{align-items:center}
.mm-tg{display:inline-flex; flex:none; border:1px solid var(--rule); border-radius:999px; overflow:hidden}
.mm-tg button{font-size:10px; line-height:1.5; padding:0 7px; border:0; background:transparent; color:var(--muted)}
.mm-tg button + button{border-left:1px solid var(--rule)}
.mm-tg button.on{background:var(--head); color:var(--ink); font-weight:700}
.mm-ref{color:var(--muted); font-size:10.5px}
.mm-ref b{color:var(--ink-2)}

/* 2026-10-23 주식 › 국가별(stocks.js worldDraw — /api/stocks/world · 사용자 "국가별 탭 … 실시간 현재가"): 히트맵과 같은 상자(.sk-wrap) 안 표 한 장 ·
   전일 대비 · 등락률 숫자만 방향색(td.up · td.down — 전역 규칙) · 상태 '장중' = .sk-live(회색 테두리 — 방향색 아님) · 마감 흐림 · 멈춤 ⚠ = warn 색 ·
   정렬 없는 표라 머리 칸 손가락 모양 없음 · 폰(640px 이하) 지역 · 원천 칸 숨김 */
.wd-wrap{padding-top:10px}
.wd-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:0 0 8px}
.wd-head > b{font-size:14px}
.wd-warn{margin:0 0 8px; padding:5px 9px; border-radius:5px; background:var(--warn-bg); color:var(--warn); font-size:12px}
.wd-tw{max-height:none}
.wd-table{font-size:13px}
.wd-table thead th{cursor:default}
.wd-table th.num, .wd-table td.num{text-align:right}
.wd-table td, .wd-table th{padding:7px 9px}
.wd-at, .wd-dl{color:var(--ink-2)}
.wd-closed{color:var(--muted); font-size:12px}
.wd-stale{color:var(--warn); font-weight:600; font-size:12px}
.wd-foot{margin-top:8px; line-height:1.6; white-space:normal}
/* 줄 누르기 = 바로 아래 가격 그림(stocks.js worldDet · skchart.js 지수 모드 — 2026-10-23) */
.wd-table tr.wd-row{cursor:pointer}
.wd-table tr.wd-row:hover > td, .wd-table tr.wd-row.on > td{background:var(--head)}
.wd-table tr.wd-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.wd-table tr.wd-det > td{white-space:normal; padding:6px 10px 10px; background:var(--panel)}
.wd-dh{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:2px 0 6px}
.wd-dh .wd-close{margin-left:auto}
@media (max-width: 640px){
  .wd-table .wd-opt{display:none}
  .wd-table{font-size:12px}
  .wd-table td, .wd-table th{padding:6px 7px}
}

/* 2026-10-29 ETF 분석 셋(static/etfplus.js — 사용자 "2번 · 3번 · 4번 다 해봐라"): 구성종목 › 비교 '가격 겹쳐 보기'(#cmp-px) · 채권특성 › 상대가치(#bond-rv) ·
   구성종목 › 편입·편출(#h-changes). 범주색 --s1 … --s8 = 데이터 시각화 기본 팔레트(고정 순서 · 라이트/다크 따로 고른 값 — 이웃 쌍 색각 구분 검증된 순서) —
   선 · 점 · 견본에만(글자는 잉크) · 색은 ETF 에 붙는다(etfplus.js ovSlot). 수익률 · 시나리오 숫자만 전역 방향색 클래스(표 칸) · 범주색 정의는 'ETF 한눈에' 블록 앞(.xp-root) */
#cmp-px{margin:14px 0 6px}
#cmp-px:empty{display:none}
.xp-sw{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; background:var(--muted); flex:none}
.xp-sw.s1, .xp-dot.s1{background:var(--s1)} .xp-sw.s2, .xp-dot.s2{background:var(--s2)} .xp-sw.s3, .xp-dot.s3{background:var(--s3)} .xp-sw.s4{background:var(--s4)}
.xp-sw.s5{background:var(--s5)} .xp-sw.s6{background:var(--s6)} .xp-sw.s7{background:var(--s7)} .xp-sw.s8{background:var(--s8)}
.xp-chip .xp-x{border:0; background:none; color:var(--muted); cursor:pointer; padding:0 2px; font-size:14px; line-height:1}
.xp-chip .xp-x:hover, .xp-chip .xp-x:focus-visible{color:var(--ink)}
.xp-ctrl{margin:4px 0 6px; gap:8px 12px}
.xp-seg{margin:0; flex-wrap:wrap}
.xp-meta{margin:2px 0 4px}
.xp-key{margin:4px 0}
.mt-key i.xp-ln{border-top-width:2.5px}
.mt-key i.xp-ln.s1{border-top-color:var(--s1)} .mt-key i.xp-ln.s2{border-top-color:var(--s2)} .mt-key i.xp-ln.s3{border-top-color:var(--s3)} .mt-key i.xp-ln.s4{border-top-color:var(--s4)}
.mt-key i.xp-ln.s5{border-top-color:var(--s5)} .mt-key i.xp-ln.s6{border-top-color:var(--s6)} .mt-key i.xp-ln.s7{border-top-color:var(--s7)} .mt-key i.xp-ln.s8{border-top-color:var(--s8)}
.mt-key i.xp-ln.dash{border-top-style:dashed; border-top-width:2px}
.xp-chart{outline:none; background:var(--panel); border:1px solid var(--rule); border-radius:7px; padding:6px 2px}
.xp-chart:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mc-chart .mc-line.xp-l{stroke-width:2}
.mc-chart .mc-line.xp-l.s1{stroke:var(--s1)} .mc-chart .mc-line.xp-l.s2{stroke:var(--s2)} .mc-chart .mc-line.xp-l.s3{stroke:var(--s3)} .mc-chart .mc-line.xp-l.s4{stroke:var(--s4)}
.mc-chart .mc-line.xp-l.s5{stroke:var(--s5)} .mc-chart .mc-line.xp-l.s6{stroke:var(--s6)} .mc-chart .mc-line.xp-l.s7{stroke:var(--s7)} .mc-chart .mc-line.xp-l.s8{stroke:var(--s8)}
.xp-stats{max-height:none; margin-top:8px}
.xp-stats td.name{display:flex; align-items:center; gap:2px}
.xp-sub{font-weight:600; font-size:13px; margin:12px 0 4px}
.xp-corr{max-height:none; display:inline-block; max-width:100%}
.xp-corr table{width:auto}
.xp-corr th{cursor:default}
td.xp-rho{background:color-mix(in srgb, var(--ink-2) calc(var(--a) * 22%), transparent)}
.xp-empty{padding:18px}
.xp-root .mini{padding:1px 9px; border:1px solid var(--rule); border-radius:5px; background:var(--panel); font-size:12px; white-space:nowrap; cursor:pointer; color:var(--ink-2)}
/* 채권특성 › 상대가치 — 상대가치를 고르면 표 묶음(.bar · 부제 · 표)을 숨긴다 */
#p-bond.xp-rvon > :not(#bond-tabs):not(#bond-rv){display:none}
.xp-chk{display:inline-flex; gap:4px; align-items:center; font-size:12.5px; color:var(--ink-2)}
.xp-plotbar{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:8px 0 6px}
.xp-plotwrap{position:relative; background:var(--panel); border:1px solid var(--rule); border-radius:7px; padding:6px 2px}
.xp-plot{min-height:200px}
.xp-svg .xp-pt{stroke:var(--panel); stroke-width:1.5; cursor:pointer}
.xp-svg .xp-pt.s1{fill:var(--s1)} .xp-svg .xp-pt.s2{fill:var(--s2)} .xp-svg .xp-pt.s3{fill:var(--s3)}
.xp-svg .xp-pt.on{stroke:var(--ink); stroke-width:2.2}
.xp-svg .xp-curve{fill:none; stroke-width:1.6; stroke-dasharray:6 4}
.xp-svg .xp-curve.s1{stroke:var(--s1)} .xp-svg .xp-curve.s2{stroke:var(--s2)}
.xp-tip{position:absolute; z-index:5; pointer-events:none; background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:6px 9px;
  font-size:12px; line-height:1.5; box-shadow:0 2px 8px rgba(0,0,0,.14); max-width:min(320px, 90vw); color:var(--ink)}
.mt-key i.xp-dot{width:9px; height:9px; border:0; border-radius:50%; vertical-align:-1px}
.mt-key i.xp-dia{width:8px; height:8px; border:0; transform:rotate(45deg); vertical-align:0; margin-left:2px}
.mt-key i.xp-dot.o, .mt-key i.xp-dia.o{background:transparent; border:1.5px solid var(--ink-2)}
td i.xp-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px}
.xp-rvtab{margin-top:4px}
.xp-rvtab tbody tr{cursor:pointer}
.xp-rvtab tr.xp-on > td{background:var(--accent-soft)}
.xp-def{margin:10px 0; font-size:12px; color:var(--ink-2)}
.xp-def summary{cursor:pointer; font-weight:600}
.xp-def li{margin:3px 0; white-space:normal; line-height:1.55}
/* 구성종목 › 편입·편출 */
.xp-hcsum{margin:4px 0 8px; font-size:13px}
.xp-hcgrid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px}
.xp-hcgrid > section{min-width:0}
.xp-hcgrid > section.wide{grid-column:1 / -1}
.xp-hct{max-height:440px}
.xp-more{margin-top:4px}
.xp-link{border:0; background:none; padding:0; color:var(--accent); cursor:pointer; font:inherit; text-align:left}
.xp-link:hover, .xp-link:focus-visible{text-decoration:underline}
td.xp-etfs{white-space:normal; min-width:220px; font-size:12px; line-height:1.5}
#hc-dates select{margin:0 2px}
/* 편입·편출 › 자산배분형(미국) — 2026-11-02 static/usalloc.js: 배분 한 줄 = 견본(묶음 색 --s1 주식 · --s2 채권(·현금) · --s3 원자재 · --s4 현금 · --s5 파생 · --s6 기타) + 이름 + 값.
   '뚜렷'(평소 흔들림의 2배 넘게)만 굵게 + 꼬리표 — 방향색 없음(비중 변화는 수익률이 아니다) */
.ua-mx{display:inline-flex; align-items:center; gap:0; margin-right:10px; white-space:nowrap; font-size:12.5px}
.ua-mx .badge, .ua-mx > b{margin-left:3px}
.ua-line{margin:4px 0; font-size:12.5px; line-height:1.7}
.ua-line > .mute:first-child{margin-right:8px}
.ua-head{margin-top:14px; padding-top:10px; border-top:1px solid var(--rule)}
.ua-hint{margin:10px 0}
.ua-key{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-2); margin:6px 0}
.ua-key > span{display:inline-flex; align-items:center}
#ua-det > section{margin-bottom:6px}
/* 맨 위 그림 · 들여다보기(2026-11-02 사용자 "요약 란에 글 싹 다 빼고 차트로" · "지역 · 섹터 · 채권 · 원자재") — 범주색 = .xp-root --s1~--s7 고정 순서 ·
   '모름' 회색(ua-cx) · 누적 칸 사이 2px 바탕 틈 · 끝 4px 둥글게 · 글자는 잉크(칸 안 숫자만 바탕 밝기로 흰 / 검정) · 방향색 없음 */
.ua-charts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px; margin:8px 0 14px}
.ua-card{border:1px solid var(--rule); border-radius:8px; background:var(--panel); padding:8px 12px 10px; min-width:0}
.ua-ct{font-weight:600; font-size:13px; line-height:1.5}
.ua-ct .mute{font-weight:400; font-size:11.5px; margin-left:4px}
.ua-ct .xp-sw{vertical-align:0}
.ua-card .ua-key{margin:4px 0 6px; font-size:11.5px; gap:2px 12px}
.ua-sq{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; flex:none}
.ua-c1{background:var(--s1)} .ua-c2{background:var(--s2)} .ua-c3{background:var(--s3)} .ua-c4{background:var(--s4)}
.ua-c5{background:var(--s5)} .ua-c6{background:var(--s6)} .ua-c7{background:var(--s7)} .ua-c8{background:var(--s8)} .ua-cx{background:var(--muted); opacity:.55}
.ua-row{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:12px; min-width:0}
.ua-rl{flex:0 0 58px; font-weight:600; white-space:nowrap; line-height:1.2}
.ua-rl small{display:block; font-weight:400; color:var(--muted); font-size:10.5px}
.ua-rv{flex:0 0 auto; min-width:58px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-2); font-size:12px}
.ua-fill{flex:1}
.ua-bar{position:relative; flex:1; display:flex; height:18px; min-width:0}
.ua-row1 .ua-bar{height:16px}
.ua-seg{height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:10.5px; color:var(--panel); white-space:nowrap;
  box-shadow:inset -2px 0 0 var(--panel); font-variant-numeric:tabular-nums; cursor:default}
.ua-seg:first-child{border-radius:4px 0 0 4px}
.ua-seg:last-of-type{border-radius:0 4px 4px 0; box-shadow:none}
.ua-seg:only-of-type{border-radius:4px}
/* 2026-11-11 고정 색(#fff · #1a1a1a) → 테마 변수(테마 변수만 규칙): 칸 숫자 = 바탕 색(--panel) — 라이트 = 흰 글자 · 다크 = 다크 팔레트 칸이 밝아 어두운 글자가 대비 더 큼.
   밝은 칸(--s4 · --s5 · 모름)은 라이트에서 잉크(--ink — 어두움) · 다크에선 --ink 가 밝아 대비가 낮아 바탕 색(어두움)으로 되돌린다 */
.ua-seg.ua-c4, .ua-seg.ua-c5, .ua-seg.ua-cx{color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ua-seg.ua-c4, :root:not([data-theme="light"]) .ua-seg.ua-c5, :root:not([data-theme="light"]) .ua-seg.ua-cx{color:var(--panel)} }
:root[data-theme="dark"] .ua-seg.ua-c4, :root[data-theme="dark"] .ua-seg.ua-c5, :root[data-theme="dark"] .ua-seg.ua-cx{color:var(--panel)}
/* 2026-11-11 독립 검토: 다크 --s6(#008300 · 어두운 초록)만은 어두운 글자(--panel) 대비 3.4 — 밝은 잉크(--ink) 4.2 가 낫다(옛 흰 글자 5.0 에 가장 가깝다) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ua-seg.ua-c6{color:var(--ink)} }
:root[data-theme="dark"] .ua-seg.ua-c6{color:var(--ink)}
.ua-axis{display:flex; justify-content:space-between; margin:6px 66px 0 66px; font-size:10.5px; color:var(--muted)}
.ua-lk{display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin:4px 0}
.ua-lkc .ua-ct{margin-bottom:2px}
.ua-sub{font-size:12px; font-weight:600; color:var(--ink-2); margin:8px 0 2px}
.ua-g2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 22px}
.ua-hbs{display:flex; flex-direction:column; gap:3px}
.ua-hb{display:grid; grid-template-columns:minmax(86px, 38%) minmax(0, 1fr) 54px; align-items:center; gap:8px; font-size:12px; line-height:1.35}
.ua-hl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ua-ht{height:10px; min-width:0}
.ua-ht > i{display:block; height:100%; border-radius:0 3px 3px 0; min-width:1px}
.ua-hv{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2)}
/* 2026-11-02 둘째 판(사용자 "매니저 관점 차트 · 첫 화면 줄이고 ETF 클릭 때 · 운용사들이 자산배분을 어떻게 조정하나") — 기간 전환 · 위험 포지션(점 → 점) · 변화 표(늘림 --up · 줄임 --down 섞음) */
.ua-top{display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin:4px 0 2px}
.ua-top .seg{margin-bottom:0}
.ua-per button:disabled{opacity:.4; cursor:not-allowed}
.ua-charts > .ua-wide, .ua-wide{grid-column:1 / -1}
.ua-pos2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 28px; margin-top:4px}
.ua-pos .ua-ct{font-size:12.5px}
.ua-trk{position:relative; flex:1; height:22px; min-width:0; border-bottom:1px solid var(--rule)}
.ua-trk > i{position:absolute; display:block}
.ua-rngb{top:5px; bottom:5px; background:var(--accent-soft); border-radius:3px}
.ua-bml{top:1px; bottom:1px; width:0; border-left:2px dashed var(--accent)}
.ua-dal{top:9.5px; height:3px; background:var(--ink-2); opacity:.85; border-radius:2px}
/* 화살촉(2026-11-02 사용자 "화살표를 넣어주면 좋겠다") — 끝이 최신 점 가장자리에 닿게(점 반지름 6px) */
.ua-arr{top:5px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent}
.ua-arr-r{border-left:10px solid var(--ink-2); margin-left:-16px}
.ua-arr-l{border-right:10px solid var(--ink-2); margin-left:6px}
/* 첫 화면 수익률 표 · 들여다보기 주식 | 채권 양옆(2026-11-02 사용자 "수익률 도표는 안 눌러도 · 들여다보기의 주식과 채권은 한 줄에 양옆으로") */
table.ua-pt td{min-width:58px}
table.ua-pt th.ua-slvh .ua-rl{display:inline-block}
/* 맨 위 · 작게(같은 날 사용자 "수익률 차트 맨 위로 조금 더 작게") — 운용사 이름 줄은 숨기고(티커 툴팁에 이름) 칸 높이를 줄인다 */
.ua-ptc{padding:6px 10px 6px; margin:4px 0 10px}
.ua-ptc .ua-ct{font-size:12px}
table.ua-hm.ua-pt{width:auto; border-spacing:0}
table.ua-hm.ua-pt th, table.ua-hm.ua-pt td{padding:1px 8px; font-size:11.5px; line-height:1.35; min-width:0}
table.ua-hm.ua-pt td.num{min-width:54px}
table.ua-pt .xp-link{font-size:11.5px; line-height:1.35}
table.ua-pt th.ua-slvh .ua-rl small{display:none}
table.ua-pt th.ua-slvh .ua-rl{flex-basis:auto; font-size:11.5px}
.ua-lk{grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start}
.ua-lk > .ua-lkc .ua-g2{grid-template-columns:minmax(0, 1fr)}
/* 위험 포지션(왼쪽 — 주식 위 · 채권 아래) | 무엇을 늘리고 줄였나(오른쪽) 한 줄 · 압축(같은 날 사용자 "주식 아래에 채권을 · 그 오른쪽에 무엇을 늘리고 줄였나 · 좀 압축시키자") */
.ua-poscard .ua-pos2{grid-template-columns:minmax(0, 1fr); gap:6px; margin-top:2px}
.ua-poscard .ua-pos .ua-ct{font-size:12px}
.ua-poscard .ua-row{margin:1px 0}
.ua-poscard .ua-rl{flex-basis:46px}
.ua-poscard .ua-rl small{display:none}
.ua-poscard .ua-trk{height:18px}
.ua-poscard .ua-dot{top:3px}
.ua-poscard .ua-dal{top:7.5px}
.ua-poscard .ua-arr{top:3px}
.ua-poscard .ua-rngb{top:4px; bottom:4px}
.ua-poscard .ua-pos .ua-rv{min-width:96px; font-size:11.5px}
.ua-poscard .ua-pos .ua-rv small{display:inline; font-size:10.5px}
.ua-poscard .ua-axis2{margin:1px 104px 0 54px; font-size:10px}
.ua-hmcard .ua-hkey{margin:2px 0 4px}
.ua-hmcard table.ua-hm{border-spacing:1px}
.ua-hmcard table.ua-hm th, .ua-hmcard table.ua-hm td{padding:2px 4px; font-size:11.5px}
.ua-hmcard table.ua-hm th.ua-slvh{white-space:normal; word-break:keep-all; min-width:86px; max-width:110px; line-height:1.2}
.ua-hmcard table.ua-hm thead th small{font-size:9.5px}
.ua-hmcard td.ua-hc{min-width:38px}
.ua-hmcard td.ua-cons{white-space:normal; line-height:1.2; min-width:52px}
/* 나눠 보기(2026-11-04) — 주식 줄 아래 매매 · 가격 · 유출입 · 히트맵 보기 전환 · ETF 아래 요약 줄 */
.ua-spl{margin:-2px 0 3px 54px; font-size:10.5px; line-height:1.3; color:var(--ink-2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; cursor:help}
.ua-spl b{color:var(--ink)}
.ua-hmct{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px}
.ua-hmode{margin:0}
.ua-hmode button{padding:1px 8px; font-size:11.5px}
.ua-hmode button:disabled{opacity:.4; cursor:not-allowed}
.ua-spsum{font-size:12px; margin:2px 0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.ua-spsum[title]{cursor:help}
.ua-notrade{margin:2px 0 8px}
.ua-head{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px}
.ua-close{margin-left:auto}
.ua-dot{top:5px; width:12px; height:12px; margin-left:-6px; border-radius:50%; box-sizing:border-box}
.ua-dot0{background:var(--panel); border:2px solid var(--muted)}
.ua-dot1{background:var(--ink); border:2px solid var(--panel); box-shadow:0 0 0 1px var(--ink)}
.ua-pos .ua-rv{min-width:96px}
.ua-pos .ua-rv small{display:block; font-size:10.5px; line-height:1.2; color:var(--ink-2)}
.ua-axis2{margin:4px 104px 0 66px}
.ua-hkey{display:flex; align-items:center; gap:2px; font-size:11px; color:var(--ink-2); margin:4px 0 6px}
.ua-hkey > i{display:inline-block; width:22px; height:10px; border:1px solid var(--rule)}
.ua-hkey > span{margin:0 6px}
.ua-hmw{max-height:none}
table.ua-hm{width:100%; border-collapse:separate; border-spacing:2px}
table.ua-hm th, table.ua-hm td{padding:4px 6px; font-size:12px; white-space:nowrap}
table.ua-hm thead th{font-weight:600; vertical-align:bottom}
table.ua-hm thead th small{display:block; font-weight:400; font-size:10px; color:var(--muted)}
table.ua-hm th.ua-slvh{text-align:left; font-weight:500}
td.ua-hc{border-radius:3px; font-variant-numeric:tabular-nums; min-width:46px}
td.ua-cons{font-size:11px; color:var(--ink-2)}
.ua-db{display:grid; grid-template-columns:minmax(96px, 40%) minmax(0, 1fr) 62px; align-items:center; gap:8px; font-size:12px; line-height:1.35}
.ua-dt{position:relative; height:10px; min-width:0}
.ua-dt > i{position:absolute; top:0; height:100%}
.ua-d0{left:50%; top:-2px !important; height:calc(100% + 4px) !important; border-left:1px solid var(--rule)}
.ua-dp{background:var(--up); opacity:.75; border-radius:0 3px 3px 0}
.ua-dn{background:var(--down); opacity:.75; border-radius:3px 0 0 3px}
.ua-ct2{font-size:12px; color:var(--ink-2); margin:2px 0}
.ua-kpis{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px}
.ua-kpi{border:1px solid var(--rule); border-radius:8px; background:var(--panel); padding:6px 12px; min-width:110px}
.ua-kpi > span{display:block; font-size:11px; color:var(--muted)}
.ua-kpi > b{font-size:17px; font-variant-numeric:tabular-nums}
.ua-kpi > small{display:block; font-size:11px; color:var(--ink-2)}
.ua-trend{display:flex; align-items:flex-end; gap:6px; overflow-x:auto; padding:2px 0 4px}
.ua-tc{flex:0 0 auto; width:46px; display:flex; flex-direction:column; align-items:center}
.ua-tcb{position:relative; width:30px; height:150px; display:flex; flex-direction:column-reverse; border-bottom:1px solid var(--rule)}
.ua-tcb > span{display:block; width:100%; box-shadow:inset 0 1px 0 var(--panel)}
.ua-tbm{position:absolute; left:-6px; right:-6px; height:0; border-top:2px dashed var(--ink)}
.ua-tcl{font-size:10.5px; color:var(--ink-2); text-align:center; line-height:1.2; margin-top:3px; white-space:nowrap}
.ua-tcl small{display:block; color:var(--muted)}
.ua-fold{margin:8px 0; border-top:1px solid var(--rule); padding-top:6px}
.ua-fold > summary, .ua-notes > summary{cursor:pointer; font-weight:600; font-size:12.5px}
.ua-notes{margin:10px 0}
#ua-det > .ua-card{margin-bottom:10px}
.ua-sty{display:inline-block; padding:0 7px; border-radius:9px; font-size:11.5px; line-height:18px; white-space:nowrap; border:1px solid var(--rule); color:var(--ink-2)}
.ua-small{font-size:11.5px; line-height:1.4}
.ua-cmp{max-height:none; display:inline-block; max-width:100%; margin:4px 0}
.ua-cmp table{width:auto}
.ua-cmp td, .ua-cmp th{padding-left:12px; padding-right:12px}
@media (max-width: 640px){
  .ua-mx{margin-right:8px}
  .ua-g2{grid-template-columns:minmax(0, 1fr)}
  .ua-rl{flex-basis:50px}
  .ua-axis{margin:6px 66px 0 58px}
  .ua-axis2{margin:4px 104px 0 58px}
  .ua-kpi{min-width:0; flex:1 1 40%}
}
@media (max-width: 900px){
  .xp-hcgrid{grid-template-columns:minmax(0, 1fr)}
  .ua-charts{grid-template-columns:minmax(0, 1fr)}
  .ua-pos2{grid-template-columns:minmax(0, 1fr)}
  .ua-lk{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width: 640px){
  .xp-plotbar{gap:4px 8px}
  td.xp-etfs{min-width:160px}
}

/* ── 포트 = 판단 기록(2026-11-04 — static/journal.js · 꼬리표 20261104a · 20261104b 에 포트 블록 추가) ──
   방향색은 점수 · 수익률 숫자만(.up · .down — 전역 규칙과 같은 --up 빨강 · --down 파랑). 유형 A · B · C 는 글자 + 모양(채움 · 테두리 · 회색)으로 가른다(색만으로 안 가름) */
.jr-root{max-width:1120px; margin:0 auto}
.jr-root .up{color:var(--up)} .jr-root .down{color:var(--down)}
.jr-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:2px 0 12px}
.jr-h{font-size:18px; margin:0 0 2px; letter-spacing:-.01em}
.jr-pri{background:var(--accent); color:var(--panel); border:1px solid var(--accent); border-radius:6px; padding:6px 14px; font-weight:600; white-space:nowrap}
.jr-pri:disabled{opacity:.6; cursor:default}
.jr-btn{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:5px 12px; color:var(--ink-2); white-space:nowrap}
.jr-btn.sm{padding:1px 9px; font-size:12px}
.jr-btn.warn{border-color:var(--warn); color:var(--warn); background:var(--warn-bg); font-weight:600}
.jr-lnk{background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-align:left}
.jr-na{color:var(--muted); font-size:12px}
.jr-flash{border:1px solid var(--rule); border-left:3px solid var(--accent); background:var(--panel); border-radius:6px; padding:7px 12px; margin-bottom:12px}
.jr-flash.warn{border-left-color:var(--warn); background:var(--warn-bg); color:var(--warn)}
/* 머리 칸 다섯 */
.jr-sum{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin-bottom:12px}
.jr-card{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:9px 12px; min-width:0}
.jr-card.warn{border-color:var(--warn); background:var(--warn-bg)}
.jr-ck{font-size:11.5px; color:var(--muted); font-weight:600}
.jr-cv{font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3}
.jr-cv small{font-size:12px; font-weight:600; color:var(--muted); margin-left:2px}
.jr-card.warn .jr-cv{color:var(--warn)}
.jr-cs{font-size:11.5px; color:var(--ink-2); overflow-wrap:anywhere}
.jr-kb{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 3px; border-radius:5px; font-size:11px; font-weight:700;
  background:var(--accent); color:var(--panel); border:1px solid var(--accent); vertical-align:1px; line-height:1}
.jr-kb.B{background:var(--panel); color:var(--accent)}
.jr-kb.C{background:var(--rule-soft); color:var(--muted); border-color:var(--rule)}
/* 확인할 때가 된 기록 */
.jr-due{border:1px solid var(--warn); background:var(--warn-bg); border-radius:8px; padding:9px 12px; margin-bottom:12px}
.jr-due > b{color:var(--warn)}
.jr-due ul{margin:6px 0 0; padding:0; list-style:none}
.jr-due li{padding:3px 0; display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center}
.jr-dd{font-variant-numeric:tabular-nums; color:var(--warn); font-weight:600}
/* 새 기록 · 고치기 */
.jr-form{background:var(--panel); border:1px solid var(--accent); border-radius:9px; padding:12px 14px 14px; margin-bottom:14px}
.jr-fh{display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.jr-fh b{font-size:15px}
.jr-x{margin-left:auto; background:none; border:0; font-size:20px; line-height:1; color:var(--muted); padding:0 4px}
.jr-kinds, .jr-ek{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.jr-kind{display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; text-align:left; background:var(--panel);
  border:1px solid var(--rule); border-radius:8px; padding:8px 10px; color:var(--ink)}
.jr-kind b{font-size:13px}
.jr-kind .jr-kx{grid-column:2; font-size:11.5px; color:var(--muted); line-height:1.45}
.jr-kind.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.jr-kind:hover{border-color:var(--accent)}
.jr-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px 14px; margin-top:12px}
.jr-f{display:flex; flex-direction:column; gap:4px; min-width:0}
.jr-f > span{font-size:11.5px; color:var(--muted); font-weight:600}
.jr-wide{grid-column:span 2}
.jr-w3{grid-column:span 3}
.jr-full{grid-column:1 / -1}
.jr-f input, .jr-f select, .jr-f textarea, .jr-note{border:1px solid var(--rule); border-radius:5px; padding:6px 8px; background:var(--panel); width:100%; min-width:0}
.jr-f textarea, .jr-note{resize:vertical; font:inherit; line-height:1.5}
.jr-f .pick{display:block; width:100%}
.jr-f .pick input{width:100%}
.jr-how2{align-self:end; font-size:11.5px; color:var(--ink-2); background:var(--accent-soft); border-radius:5px; padding:6px 9px; line-height:1.45}
.jr-cn{font-size:11px; color:var(--muted); min-height:1em; overflow-wrap:anywhere}
.jr-chips{display:flex; flex-wrap:wrap; gap:6px}
.jr-chip{border:1px solid var(--rule); background:var(--panel); border-radius:99px; padding:3px 11px; font-size:12px; color:var(--ink-2)}
.jr-chip[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600}
.jr-chip[aria-pressed="true"]::before{content:"\2713  "}
.jr-hz{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.jr-hz .seg{margin:0}
.jr-hz input{width:auto}
.jr-fb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
/* 거르기 · 목록 */
.jr-bar .seg{margin:0}
.jr-bar input[type=search]{min-width:220px}
.jr-list{background:var(--panel); border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin-bottom:12px}
.jr-lh, .jr-row{display:grid; grid-template-columns:132px minmax(0, 1.7fr) minmax(0, 1.1fr) 150px 128px; gap:12px; align-items:center; padding:8px 12px}
.jr-lh{font-size:11.5px; font-weight:600; color:var(--ink-2); background:var(--head); border-bottom:1px solid var(--rule); padding-top:6px; padding-bottom:6px}
.jr-item + .jr-item{border-top:1px solid var(--rule-soft)}
.jr-row{cursor:pointer}
.jr-row:hover{background:var(--accent-soft)}
.jr-item.open > .jr-row{background:var(--accent-soft)}
.jr-tog{display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; color:var(--ink); font-variant-numeric:tabular-nums}
.jr-chev{display:inline-block; color:var(--muted); font-size:10px; transition:transform .12s}
.jr-item.open .jr-chev{transform:rotate(90deg)}
.jr-day{font-weight:600}
.c-what{min-width:0; overflow-wrap:anywhere; line-height:1.45}
.jr-act{font-size:11.5px; color:var(--muted); font-weight:600; margin-right:2px}
.jr-nm{font-weight:600}
.jr-ar{color:var(--muted)}
.jr-vs, .jr-amt{font-size:11.5px; color:var(--muted)}
.jr-amt{border:1px solid var(--rule); border-radius:4px; padding:0 5px; white-space:nowrap}
.jr-rs{color:var(--ink-2)}
.c-scr{display:flex; flex-wrap:wrap; gap:4px; min-width:0}
.jr-tag{border:1px solid var(--rule); background:var(--panel); border-radius:4px; padding:0 6px; font-size:11px; color:var(--ink-2); white-space:nowrap}
.jr-tag:hover{border-color:var(--accent); color:var(--accent)}
.c-res{font-variant-numeric:tabular-nums}
.jr-sc{font-size:14px; font-weight:700}
.jr-ln{font-size:12px; color:var(--ink-2)}
.jr-rsub{display:block; font-size:11px; color:var(--muted)}
.c-st{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.jr-st{display:inline-block; padding:0 8px; border-radius:99px; font-size:11px; font-weight:600; border:1px solid var(--rule); color:var(--ink-2); white-space:nowrap}
.jr-st.due{background:var(--warn-bg); color:var(--warn); border-color:var(--warn)}
.jr-st.done{border-color:var(--accent); color:var(--accent)}
.jr-chk{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.jr-dl{font-size:10.5px}
/* 펼친 기록 */
.jr-det{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px 22px; padding:12px 14px 14px 26px; border-top:1px dashed var(--rule)}
.jr-sec{min-width:0}
.jr-sec h4{font-size:12px; color:var(--ink-2); margin:0 0 6px; font-weight:700}
.jr-sec h4 .jr-na{font-weight:400; font-size:11px}
.jr-reason{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; margin-bottom:6px}
.jr-meta{font-size:11.5px; color:var(--muted); margin-bottom:8px}
.jr-t{width:100%; font-size:12px; margin:2px 0 6px}
.jr-t th, .jr-t td{padding:4px 7px; white-space:nowrap}
.jr-t thead th{position:static; cursor:default; background:var(--head)}
.jr-t td.num{text-align:right}
.jr-t td.up{color:var(--up)} .jr-t td.down{color:var(--down)}
.jr-how1{font-size:11.5px; color:var(--muted); margin-top:4px}
.jr-vrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:8px}
.jr-vseg{margin:0}
.jr-vseg button{padding:4px 14px}
.jr-delq{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--warn); font-size:12px}
/* 빈 화면 · 계산 방법 · 예전 포트 단추 */
.jr-empty{background:var(--panel); border:1px dashed var(--rule); border-radius:9px; padding:18px; margin-bottom:12px}
.jr-empty h3{margin:0 0 4px; font-size:15px}
.jr-empty .hint{margin:0 0 12px}
.jr-howto{margin:4px 0 10px; color:var(--ink-2)}
.jr-howto summary{cursor:pointer; color:var(--muted); font-size:12px}
.jr-howto ul{margin:6px 0 0; padding-left:18px; font-size:12px; line-height:1.6}
.jr-foot{margin:6px 0 20px; text-align:right}
.jr-foot .jr-lnk{font-size:12px; color:var(--muted)}
@media (max-width: 1000px){
  .jr-sum{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .jr-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .jr-w3{grid-column:1 / -1}
}
@media (max-width: 640px){
  .jr-head{align-items:flex-start; flex-direction:column}
  .jr-sum{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
  .jr-cv{font-size:18px}
  .jr-kinds, .jr-ek{grid-template-columns:1fr}
  .jr-grid{grid-template-columns:1fr}
  .jr-wide, .jr-w3{grid-column:1 / -1}
  .jr-bar input[type=search]{min-width:0; flex:1 1 100%}
  .jr-lh{display:none}
  .jr-row{grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"when st" "what what" "scr res"; gap:5px 10px; padding:9px 10px}
  .c-when{grid-area:when} .c-what{grid-area:what} .c-scr{grid-area:scr} .c-res{grid-area:res; text-align:right} .c-st{grid-area:st; align-items:flex-end}
  .jr-det{grid-template-columns:1fr; padding:10px}
  .jr-sec{overflow-x:auto}
}

/* ── 포트 › 포트 — 내 포트 점검(2026-11-04 — static/port.js · 꼬리표 20261104b) + 작은 전환 [포트 | 판단 기록](#pt-sw) ──
   방향색은 수익률 · 차 · 금리 충격 숫자만(.pt-root .up · .down) · 비중 · 위험기여 · 노출 막대는 회색(잉크 농도) · 상관은 |ρ| 회색 농도(인라인 color-mix) */
.pt-sw{margin:0 0 12px}
.pt-sw button{padding:4px 14px; font-size:12.5px}
.pt-root{max-width:1320px; margin:0 auto}
.pt-root .up{color:var(--up)} .pt-root .down{color:var(--down)}
.pt-head{margin:2px 0 12px}
.pt-wrap{display:grid; grid-template-columns:minmax(300px, 340px) minmax(0, 1fr); gap:16px; align-items:start}
#pt-edit-box{position:sticky; top:62px; align-self:start}               /* 그리드 칸 자체를 붙인다(안 상자에 sticky 를 주면 칸 높이에 묶여 안 따라온다) */
.pt-edit{background:var(--panel); border:1px solid var(--rule); border-radius:9px; padding:12px; display:flex; flex-direction:column; gap:9px;
  max-height:calc(100vh - 76px); overflow:auto}
.pt-eh{display:flex; align-items:center; gap:8px}
.pt-eh b{font-size:14px}
.pt-busy{font-size:11.5px; color:var(--muted)}
.pt-edit .jr-f input, .pt-edit .jr-f select{width:100%}
.pt-tblw{max-height:340px; overflow:auto; border:1px solid var(--rule-soft); border-radius:6px}
.pt-et{width:100%; font-size:12.5px}
.pt-et th, .pt-et td{padding:4px 6px; white-space:normal}
.pt-et thead th{position:sticky; top:0; cursor:default}
.pt-et td.num{text-align:right; width:84px}
.pt-et input.pt-w{width:72px; text-align:right; border:1px solid var(--rule); border-radius:4px; padding:3px 5px; background:var(--panel); font-variant-numeric:tabular-nums}
.pt-nm{line-height:1.35; min-width:0}
.pt-nm .jr-lnk{font-weight:600; color:var(--ink); text-decoration:none}
.pt-nm .jr-lnk:hover{color:var(--accent); text-decoration:underline}
.pt-cd{display:block; font-size:11px; color:var(--muted); font-weight:400}
.pt-x{background:none; border:0; color:var(--muted); font-size:16px; line-height:1; padding:0 4px}
.pt-x:hover{color:var(--ink)}
.pt-empty{color:var(--muted); text-align:center; padding:14px 6px !important}
.pt-add{display:flex; gap:6px; align-items:center}
.pt-add .pick{flex:1; min-width:0}
.pt-add input{width:100%; border:1px solid var(--rule); border-radius:5px; padding:6px 8px; background:var(--panel)}
.pt-sum{font-size:12px; padding:5px 8px; border-radius:5px; background:var(--rule-soft); color:var(--ink-2); line-height:1.6}
.pt-sum.ok{background:var(--accent-soft); color:var(--accent); font-weight:600}
.pt-sum.bad{background:var(--warn-bg); color:var(--warn)}
.pt-row2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pt-bmq input{width:100%; border:1px solid var(--rule); border-radius:5px; padding:6px 8px; background:var(--panel)}
.pt-bmq .pick{display:block}
.pt-paste summary{cursor:pointer; color:var(--muted); font-size:12px}
.pt-paste textarea{width:100%; margin-top:6px; border:1px solid var(--rule); border-radius:5px; padding:6px 8px; background:var(--panel); font:12px/1.5 Consolas, monospace}
.pt-main{min-width:0}
.pt-kpi{grid-template-columns:repeat(6, minmax(0, 1fr))}
.pt-sec{background:var(--panel); border:1px solid var(--rule); border-radius:9px; padding:11px 13px; margin-bottom:12px; min-width:0}
.pt-sec h3{font-size:14px; margin:0 0 8px}
.pt-sec h3 .jr-na{font-weight:400; font-size:11.5px}
.pt-perbar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-bottom:4px}
.pt-perbar .seg{margin:0}
.pt-key{font-size:12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px}
.pt-key i{display:inline-block; width:18px; vertical-align:middle}
.pt-key i.k0{border-top:2.4px solid var(--accent)}
.pt-key i.k2{border-top:2px dashed var(--muted); margin-left:6px}
.pt-chart{min-height:200px; outline-offset:2px}
.pt-tw{overflow-x:auto}
.pt-pt tr.on td{background:var(--accent-soft)}
.pt-pt tr.pt-off td{color:var(--muted)}
.pt-ht td, .pt-ht th{font-size:12px}
.pt-ht .pt-nm{white-space:normal; min-width:150px; max-width:240px}
.pt-sig{font-size:11.5px; color:var(--ink-2)}
.pt-bar{display:inline-block; width:46px; height:6px; background:var(--rule-soft); border-radius:3px; vertical-align:middle; margin-left:4px; overflow:hidden}
.pt-bar i{display:block; height:100%; background:var(--muted)}
.pt-grid3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px 18px}
.pt-bl h4{font-size:12px; margin:0 0 5px; color:var(--ink-2)}
.pt-blr{display:grid; grid-template-columns:minmax(0, 1fr) auto 52px; gap:6px; align-items:center; font-size:12px; padding:1px 0}
.pt-blr span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pt-blr .pt-bar{width:90px; margin:0}
.pt-blr b{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.pt-bond{margin-top:12px; padding-top:10px; border-top:1px dashed var(--rule)}
.pt-shock{width:auto; margin-top:6px}
.pt-pairs{border:1px solid var(--warn); background:var(--warn-bg); border-radius:7px; padding:7px 10px; margin:8px 0}
.pt-pairs b{color:var(--ink)}
.pt-pairs ul{margin:4px 0 0; padding-left:18px; font-size:12.5px}
.pt-lt td.pt-by{white-space:normal; font-size:11.5px; color:var(--ink-2)}
.pt-corr td, .pt-corr th{font-size:11.5px; padding:3px 6px}
.pt-corr tbody th{position:static; text-align:left; font-weight:600; background:none; cursor:default}
.pt-ct td{white-space:normal; vertical-align:top}
.pt-ct td.num{white-space:nowrap}
.pt-ct td:nth-child(1), .pt-ct td:nth-child(2){min-width:150px}
.pt-ct td:last-child{min-width:128px}
.pt-ct td .jr-btn{margin-top:2px}
.pt-warn{display:inline-block; font-size:11px; color:var(--warn); border:1px solid var(--warn); border-radius:99px; padding:0 6px; margin:0 4px 2px 0}
.pt-guide{background:var(--panel); border:1px dashed var(--rule); border-radius:9px; padding:22px}
.pt-guide h3{margin:0 0 6px; font-size:15px}
@media (max-width: 1200px){
  .pt-kpi{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width: 900px){
  .pt-wrap{grid-template-columns:minmax(0, 1fr)}
  #pt-edit-box{position:static}
  .pt-edit{max-height:none}
  .pt-grid3{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width: 640px){
  .pt-kpi{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pt-sec{padding:10px}
  .pt-row2{grid-template-columns:1fr}
}

/* ── 포트 › 포트 › 운용 — 실제 운용 기록(2026-11-04 셋째 — static/port.js '운용' 덩어리 · 꼬리표 20261104c) ──
   기여도 칸 · 지도 색 = 그날 값의 부호(--up 빨강 · --down 파랑)를 세기만큼 --rule-soft 에 섞음(인라인 color-mix) · 글자는 잉크(지도 글자는 판 색 테두리) · 고정 색 0 */
.pt-vw{margin:0 0 10px}
.pt-vw button{padding:4px 16px; font-size:12.5px}
.pt-vwh{margin:0 0 8px}
.pb-start p{margin:0 0 10px}
.pb-form{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 12px; margin-bottom:8px}
.pb-form input, .pb-form select{width:100%; border:1px solid var(--rule); border-radius:5px; padding:6px 8px; background:var(--panel)}
.pb-warn{color:var(--warn); font-weight:600}
.pb-set{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12.5px; color:var(--ink-2); margin:0 0 10px}
.pb-setf{border-color:var(--accent)}
.pb-chk{display:flex; align-items:center; gap:6px; font-size:12.5px; margin:4px 0}
.pt-key i.k1{border-top:2px solid var(--ink-2); margin-left:6px}
.pb-per{width:auto; min-width:360px; margin-top:8px}
.pb-pos td.pb-big{font-weight:700}
.pb-pos .pt-nm{min-width:160px}
.pb-map{margin:6px 0 10px}
.pb-tm{display:block; width:100%; height:auto; border-radius:6px; background:var(--rule-soft)}
.pb-tm rect{stroke:var(--panel); stroke-width:2}
.pb-tm text{fill:var(--ink); font-size:12.5px; paint-order:stroke; stroke:var(--panel); stroke-width:3px; stroke-linejoin:round; pointer-events:none}
.pb-tm text.n{font-weight:700}
.pb-tm text.v{font-size:11.5px}
.pb-hw{max-height:none}
.pb-legend{display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; margin-top:6px; font-size:11px}
.pb-legend i{display:inline-block; width:22px; height:10px; border-radius:2px}
.pb-tform{display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:6px 10px; align-items:end; margin-bottom:6px}
.pb-tform .pb-wide{grid-column:span 2}
.pb-tform input, .pb-tform select{width:100%; border:1px solid var(--rule); border-radius:5px; padding:5px 7px; background:var(--panel)}
.pb-tform input:disabled{opacity:.45}
.pb-tform .pick{display:block}
.pb-tt td, .pb-ht td{white-space:normal; vertical-align:top}
.pb-tt tr.pb-off td{color:var(--muted)}
.pb-memo{font-size:11.5px; color:var(--ink-2); max-width:220px}
#pb-navt{width:100%; border:1px solid var(--rule); border-radius:5px; padding:6px 8px; background:var(--panel); font:12px/1.5 Consolas, monospace}
@media (max-width: 1200px){
  .pb-tform{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .pb-form{grid-template-columns:minmax(0, 1fr)}
  .pb-tform{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pb-per{min-width:0}
}
/* 포트 — 수익률 기준 [TR(분배 포함) | 가격만](2026-11-04 · port.js ptBasisSeg · pbBasisHtml · pbDivHtml) — 방향색은 숫자만(전역 규칙) */
.pt-bs button{padding:3px 10px; font-size:12px}
.pt-bs button:disabled{opacity:.45; cursor:not-allowed}
.pb-basis{margin:0 0 10px; padding:6px 10px; border:1px solid var(--rule-soft); border-radius:6px; background:var(--panel)}
.pb-basis .jr-na{font-size:12px}
.pt-oth{opacity:.72}
th.pt-oth{font-weight:500}
.pb-divs{display:flex; flex-wrap:wrap; gap:4px 14px; margin:2px 0 6px; font-size:12.5px; color:var(--ink-2)}
.pb-divs b{color:var(--ink); font-weight:600}
.pb-dt td{white-space:nowrap}
.pb-more{margin-top:4px}
.pb-more summary{cursor:pointer; font-size:12px; color:var(--ink-2)}
/* 포트 — 운용 = 기록 넣기 · 점검 = 종합(2026-11-04 다섯째 · port.js ptWmodeHtml · ckKpiHtml · ckNavHtml · ptDayHtml · ckCtbHtml · ptBondAltHtml · pbSumHtml · pbMoveHtml) — 고정 색 0 */
.pt-wm{margin:0 0 10px}
.pt-wm .seg button{padding:3px 10px; font-size:12px}
h3.pt-div{margin:22px 0 8px; padding-top:12px; border-top:2px solid var(--rule); font-size:15px}
.pb-sumbar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 10px; padding:6px 10px; border:1px solid var(--rule-soft); border-radius:6px;
  background:var(--panel); font-size:12.5px; color:var(--ink-2)}
.pb-move{font-size:12.5px}
.pb-ctb td{white-space:nowrap}
.pb-ctb .pt-nm{min-width:180px; white-space:normal}
.pb-ctb tr.pb-hr td{color:var(--ink-2)}
.pb-ctb tr.pb-ctot td{border-top:1px solid var(--rule)}
/* 기여도 표 '최근 현지 수익률' 1 · 2 · 3 · 5 · 7일(2026-11-05) — 두 줄 머리 */
.pb-ctb th.pb-rch{text-align:center; border-bottom:1px solid var(--rule)}
.pb-ctb th.pb-rcn{font-weight:500}
.pb-ctb td sup{font-size:9px; margin-left:1px}
.pb-ctb td.pb-rc, .pb-ctb th.pb-rcn{padding-left:4px; padding-right:4px}
.pb-ctb.pb-rcw .pt-nm{min-width:160px}
.pb-navt td, .pt-dayt td{white-space:nowrap}
.pt-bat td{white-space:nowrap; vertical-align:top}
.pt-bat .pt-nm{min-width:220px; white-space:normal}
.pt-bat tr.pt-bah td{border-top:2px solid var(--rule); background:var(--rule-soft)}
/* 포트 › 점검 v2(2026-11-04 여섯째 · port.js ckTopHtml · ckCtbHtml · ckNavHtml · ckStrip · ckHoldHtml · ckFxHtml · ckRiskHtml · ckLogHtml · pbVerifyHtml · pbSetForm) — 고정 색 0 */
.ck-top{padding-top:10px}
.ck-t1{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:13px}
.ck-tn{color:var(--ink-2)}
.ck-tv{font-size:22px; font-weight:700; letter-spacing:-.01em}
.ck-ti{white-space:nowrap}
.ck-alc{border:1px solid var(--warn); color:var(--ink); background:var(--panel); border-radius:12px; padding:1px 10px; font-size:12px; cursor:pointer}
.ck-tin{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; font-size:12.5px}
.ck-tin input{width:120px; border:1px solid var(--rule); border-radius:5px; padding:4px 6px; background:var(--panel)}
.ck-t2{margin-top:6px}
.ck-why{border:0; background:none; padding:0; text-align:left; font-size:12.5px; color:var(--ink); cursor:pointer}
.ck-why:hover{text-decoration:underline}
.ck-t3{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 16px; margin-top:6px}
.ck-dt{font-size:11.5px; max-width:52%}
.ck-next{display:flex; flex-direction:column; gap:2px; text-align:left; font-size:12px; border:1px solid var(--rule); border-radius:6px; padding:6px 10px; background:var(--panel); color:var(--ink); cursor:pointer; max-width:48%}
.ck-als{display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:8px}
.ck-al{border:1px solid var(--rule); border-radius:12px; background:var(--panel); color:var(--ink); padding:2px 10px; font-size:12px; cursor:pointer; text-align:left}
.ck-al.warn{border-color:var(--warn)}
.ck-ctbw{display:grid; grid-template-columns:minmax(0, 1fr) 270px; gap:10px; align-items:start; margin:6px 0 8px}
.ck-map{margin:0}
.ck-lad{width:100%; font-size:12.5px}
.ck-lad td{padding:3px 6px; white-space:nowrap}
.ck-lad tr.ck-lf td:first-child, .ck-lad tr.ck-lo td:first-child{padding-left:16px; color:var(--ink-2)}
.ck-lad tr.ck-lt td, .ck-lad tr.ck-lb td{border-top:1px solid var(--rule)}
.ck-lad tr.ck-neu td{color:var(--ink-2)}
.pb-ctb tr.ck-g td{background:var(--rule-soft)}
.ck-gt{border:0; background:none; padding:0; font-weight:700; color:var(--ink); cursor:pointer}
.pb-ctb tr.ck-pend td{color:var(--muted)}
.ck-strip{margin:4px 0 8px}
.ck-sh{font-size:11.5px; margin-bottom:2px}
.ck-sv{display:block; width:100%; height:auto; background:var(--rule-soft); border-radius:6px}
.ck-sv .ck-zero{stroke:var(--rule); stroke-width:1}
.ck-sv .ck-bar{fill:color-mix(in srgb, var(--ink) 35%, transparent); cursor:pointer}
.ck-sv .ck-bar.fl{fill:var(--ink)}
.ck-sv .ck-bar.sel{fill:var(--accent)}
.ck-sv .ck-cum{fill:none; stroke:var(--accent); stroke-width:1.5}
.ck-diag{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; margin:4px 0}
.ck-rule{margin:2px 0 6px}
.ck-fl td{white-space:nowrap}
.ck-ht td{white-space:nowrap}
.ck-ht .pt-nm{min-width:170px; white-space:normal}
.ck-ht tr.ck-g td{background:var(--rule-soft)}
.ck-fx{margin:4px 0 6px; padding-left:18px; font-size:13px; line-height:1.7}
.ck-fxc{min-height:150px}
.ck-fold > summary{cursor:pointer; list-style:none}
.ck-fold > summary::-webkit-details-marker{display:none}
.ck-fold > summary h3{display:inline}
.ck-fold > summary h3::before{content:"▸ "; color:var(--muted)}
.ck-fold[open] > summary h3::before{content:"▾ "}
.ck-fold h4{margin:12px 0 4px; font-size:13px}
.ck-alloc{margin:10px 0}
.pt-mode{font-size:12.5px}
.pb-verify{margin:8px 0; padding:8px 10px; border:1px solid var(--rule-soft); border-radius:6px; font-size:12.5px}
.pb-verify h4{margin:0 0 4px; font-size:13px}
.pb-verify > div{margin:3px 0}
.pb-vt{width:auto; margin:4px 0}
.pb-vt tr.on td{font-weight:600}
.pb-pform{margin-top:8px}
.pb-sform{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px 12px; margin:6px 0}
.pb-sform input, .pb-sform select{width:100%; border:1px solid var(--rule); border-radius:5px; padding:5px 7px; background:var(--panel)}
.pb-cn{display:flex; gap:4px}
.pb-cn select{flex:1 1 60%}
.pb-cn input{flex:1 1 40%}
@media (max-width: 900px){
  .ck-ctbw{grid-template-columns:minmax(0, 1fr)}
  .ck-dt, .ck-next{max-width:100%}
  .pb-sform{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){ .pb-sform{grid-template-columns:minmax(0, 1fr)} .ck-tv{font-size:19px} }
.pb-pform{grid-template-columns:minmax(0, 2fr) minmax(0, 1.4fr) auto; max-width:620px}
@media (max-width: 640px){ .pb-pform{grid-template-columns:minmax(0, 1fr)} }
/* 포트 › 운용 — 보유 현황 붙여넣기(2026-11-11 · port.js pbHoldHtml · phSumHtml) — 고정 색 0 */
.ph-sec .ph-in{width:100%; min-height:84px; resize:vertical; border:1px solid var(--rule); border-radius:6px; padding:6px 8px; background:var(--panel); color:var(--ink);
  font:12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre; overflow:auto}
.ph-btns{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:6px 0}
.ph-fund{display:block; max-width:520px; margin:6px 0}
.ph-fund select{width:100%}
.ph-days{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:8px 0}
.ph-day{border:1px solid var(--rule); border-radius:12px; padding:1px 9px; background:var(--panel); color:var(--ink-2); font-size:12px; cursor:pointer}
.ph-day.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600}
.ph-sum{margin-top:10px}
.ph-sum h4{margin:12px 0 4px; font-size:13px}
.ph-gt{width:auto; min-width:min(100%, 520px); margin:6px 0}
.ph-rt td, .ph-gt td{white-space:nowrap}
.ph-rt td.pt-nm{white-space:normal; min-width:180px}
.ph-rt tr.ck-g td{background:var(--head)}

/* 2026-11-11 ETF 장중 현재가(app.html evDrawLive · port.js ptLiveStrip — /api/etf/live) — 장중% · 기여 숫자만 방향색(.ev-rv.up · .down 은 위 규칙 · 여기는 b.up · b.down) */
.ev-live{margin-top:5px; font-size:13px; overflow-wrap:anywhere}
.ev-live b{font-variant-numeric:tabular-nums}
.pt-live{background:var(--panel); border:1px solid var(--rule); border-radius:9px; padding:7px 12px; margin-bottom:10px; font-size:13px; overflow-wrap:anywhere}
.pt-live.stale{border-color:var(--warn, var(--rule))}
.pt-live b.up{color:var(--up)} .pt-live b.down{color:var(--down)}

/* 2026-11-11 필터 여러 개 고르기 · 빼기(app.html fxOpen — 필터 select 의 '여러 개 고르기 · 빼기…') — .colpick 판과 같은 꼴 · 새 색 없음 */
.fx-host{position:relative; display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center}
.fx-pop{position:absolute; z-index:25; top:calc(100% + 4px); left:0; width:min(340px, calc(100vw - 32px)); max-height:60vh; overflow:auto;
  background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:10px 12px; box-shadow:0 6px 20px rgba(0,0,0,.13)}
.fx-pop[hidden]{display:none}
.fx-h{font-size:13px; margin-bottom:6px}
.fx-list{display:flex; flex-direction:column; gap:2px}
.fx-list label{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); cursor:pointer}
.fx-list .fx-v{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fx-list input[type=checkbox]{accent-color:var(--accent); margin:0}
.fx-b{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.fx-b .mini{padding:4px 10px; font-size:12px; background:none; border:1px solid var(--rule); border-radius:5px; cursor:pointer}
.fx-b .mini:hover{border-color:var(--accent); color:var(--accent)}