/*
 * 디자인 토큰.
 *
 * 원칙 (0.10 에서 수정)
 *   배경·카드·테두리 같은 '판'은 무채색으로 둔다.
 *   그러나 **여러 선을 겹치는 곳에서는 색이 곧 데이터다.**
 *   처음에 이걸 구분 못 하고 계열선까지 전부 회색 계조로 만들었더니
 *   규모 카드의 SPY/MDY/IWM, 환율의 두 선, 커브의 다섯 시점,
 *   비교의 네 선이 서로 구분되지 않았다.
 *
 *   그래서 계열용 팔레트(--s1~--s8)를 따로 둔다.
 *   순서는 고정이고 순환시키지 않는다 — 같은 대상이 늘 같은 색이어야
 *   화면을 옮겨도 눈이 따라간다.
 *
 * 테마는 html[data-theme] 로 전환한다. 시스템 설정도 따라간다.
 */

:root {
  /* 라이트 */
  --bg:         #fbfbfc;
  --surface:    #ffffff;
  --surface-2:  #f4f4f6;
  --border:     #e6e6ea;
  --border-2:   #d4d4d9;
  --text:       #18181b;
  --text-2:     #5c5c66;
  --text-3:     #9a9aa4;
  --accent:     #2563eb;
  --accent-bg:  #eff4ff;

  /* 상승 = 빨강 (한국식). 데이터에만 쓴다. */
  --up:         #d93843;
  --down:       #2f6fd0;
  --flat:       #9a9aa4;

  /* 히트맵 발산 스케일: 파랑 ← 회색 → 빨강 */
  --heat-neg-3: #1e5aa8;
  --heat-neg-1: #a8c4e6;
  --heat-zero:  #eeeef0;
  --heat-pos-1: #f0b8bc;
  --heat-pos-3: #b52b36;

  /* 계열 팔레트 — 여러 선을 구분해야 하는 곳에만 쓴다 */
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #eda100;
  --s5: #e87ba4;  --s6: #0e8a3e;  --s7: #6b4fd8;  --s8: #d93843;
  /* 섹터 11개에 색을 하나씩 고정하려고 3개 더 (D27) */
  --s9: #0f9bb5;  --s10: #8a6b2f;  --s11: #9b3fb5;

  --radius: 8px;
  --radius-lg: 12px;
  --gap: 8px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
          "Malgun Gothic", Pretendard, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 맵 타일 티커용. 웹폰트를 받지 않는다 — 로컬 대시보드라 오프라인에서도 같아야 한다 */
  --ticker: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --bg:         #0e1014;
  --surface:    #15181e;
  --surface-2:  #1b1f27;
  --border:     #262b34;
  --border-2:   #343a45;
  --text:       #e9e9ee;
  --text-2:     #9aa0ab;
  --text-3:     #646a76;
  --accent:     #4a90e2;
  --accent-bg:  #16233a;

  --up:         #f2555f;
  --down:       #4a90e2;
  --flat:       #646a76;

  --heat-neg-3: #2c6fbb;
  --heat-neg-1: #24405e;
  --heat-zero:  #1e222a;
  --heat-pos-1: #5e2a30;
  --heat-pos-3: #d13c48;

  --s1: #4f9bff;  --s2: #ff8a5c;  --s3: #2fd39a;  --s4: #ffc247;
  --s5: #ff9dc0;  --s6: #45c46a;  --s7: #9b86f5;  --s8: #ff6b74;
  --s9: #35c9e0;  --s10: #c9a961;  --s11: #d183ea;
}

/* 시스템 설정을 따르는 경우. 명시적으로 고르면 위 규칙이 이긴다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0e1014;
    --surface:    #15181e;
    --surface-2:  #1b1f27;
    --border:     #262b34;
    --border-2:   #343a45;
    --text:       #e9e9ee;
    --text-2:     #9aa0ab;
    --text-3:     #646a76;
    --accent:     #4a90e2;
    --accent-bg:  #16233a;
    --up:         #f2555f;
    --down:       #4a90e2;
    --flat:       #646a76;
    --heat-neg-3: #2c6fbb;
    --heat-neg-1: #24405e;
    --heat-zero:  #1e222a;
    --heat-pos-1: #5e2a30;
    --heat-pos-3: #d13c48;
    --s1: #4f9bff;  --s2: #ff8a5c;  --s3: #2fd39a;  --s4: #ffc247;
    --s5: #ff9dc0;  --s6: #45c46a;  --s7: #9b86f5;  --s8: #ff6b74;
    --s9: #35c9e0;  --s10: #c9a961;  --s11: #d183ea;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 스크롤 막대.
   윈도우 기본 막대는 다크 테마에서도 흰 띠로 떠서 판 경계처럼 보인다.
   화면마다 숨기고 다니는 대신 여기서 한 번에 어둡고 얇게 깐다.
   (완전히 숨기는 곳은 검색식 목록·뉴스 목록처럼 격자 폭이 흔들리면 안 되는 칸뿐) */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── 셸: 좌측 사이드바 + 본문 ────────────────────────────────────── */
/*
 * 메뉴를 위에서 왼쪽으로 옮겼다.
 * 가로는 남고 세로가 모자란 화면이라, 상단 바가 먹던 44px 을 회수하고
 * 남는 가로 여백을 메뉴가 쓰게 하는 편이 낫다.
 */
.shell { display: grid; grid-template-columns: 148px 1fr; height: 100vh; overflow:hidden; }

aside {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 8px;
  position: sticky; top: 0; height: 100vh;
}

.brand {
  font-weight: 600; font-size: 13px; letter-spacing: -0.01em;
  padding: 0 8px 12px;
}

nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }

nav button {
  background: none; border: none; color: var(--text-2);
  font: inherit; text-align: left;
  padding: 6px 8px; border-radius: var(--radius); cursor: pointer;
}
nav button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
nav button[aria-current="true"] { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
nav button:disabled { color: var(--text-3); cursor: default; }

.side-foot { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.header-stat { display: flex; flex-direction: column; gap: 3px; color: var(--text-3); font-size: 11px; }
.header-stat b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }

.icon-btn {
  background: none; border: 1px solid var(--border);
  color: var(--text-2); width: 28px; height: 28px;
  border-radius: var(--radius); cursor: pointer;
  display: grid; place-items: center; font-size: 13px;
}
.icon-btn:hover { border-color: var(--border-2); color: var(--text); }

.content { min-width: 0; min-height:0; height:100vh; display: flex; flex-direction: column; overflow:hidden; }
.data-date { flex:none; padding:3px 14px; min-height:24px; color:var(--text-2);
  background:var(--bg); border-bottom:1px solid var(--border); font-size:11px;
  font-variant-numeric:tabular-nums; }
.date-warning { flex:none; padding:3px 14px; background:var(--accent-bg);
  border-bottom:1px solid var(--border); color:var(--text-2); font-size:11px; }

/* ── 툴바 ─────────────────────────────────────────────────────────── */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.group { display: flex; align-items: center; gap: 6px; }
.group > span { color: var(--text-3); font-size: 11px; }

.seg { display: flex; background: var(--surface-2); border-radius: var(--radius); padding: 2px; }
.seg button {
  background: none; border: none; color: var(--text-2); font: inherit;
  font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { color: var(--text); }
/* 눌린 게 눌린 것처럼 보여야 한다. 회색 배경만으로는 약했다. */
.seg button[aria-pressed="true"] {
  background: var(--accent); color: #fff; font-weight: 500;
}

/* ── 본문 ─────────────────────────────────────────────────────────── */
main { padding: 10px 14px 10px; flex: 1; min-height:0; min-width:0; }
main:not(#compareView):not(#screenerView) { overflow:auto; }
.hint { color: var(--text-3); font-size: 11px; margin: 0; }

/*
 * 상단 두 카드도 아래 카드 그리드와 같은 6열 리듬을 탄다.
 * 전체 폭을 채우면 카드 하나가 1000px 을 넘어 종횡비를 지킬 때 높이가 300px 이 된다.
 */
.top-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--gap); margin-bottom: var(--gap);
}
.top-row > .card { grid-column: span 2; }
@media (max-width: 1500px) { .top-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) {
  .top-row { grid-template-columns: repeat(2, 1fr); }
  .top-row > .card { grid-column: span 1; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
}

.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-name { font-weight: 500; }
.card-sub { color: var(--text-3); font-size: 11px; font-family: var(--mono); }
.card-val { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.card-val.up { color: var(--up); } .card-val.down { color: var(--down); }
.card-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.card-foot .up { color: var(--up); } .card-foot .down { color: var(--down); }

/*
 * 카드 6열.
 * 4열이면 카드 폭 390px 에 스파크 높이 62px 이라 종횡비가 6.2:1 이었다.
 * 그 정도로 가로로 늘리면 어떤 모양의 선이든 평평해 보인다.
 */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
@media (max-width: 1500px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/*
 * 높이를 뷰포트 비율(vh)로 잡는다.
 *
 * aspect-ratio 로 고정했더니 1080 짜리 모니터에서도 브라우저 탭·주소창을 빼면
 * 실제 뷰포트가 950 쯤이라 아래가 잘렸다. 사용자 브라우저마다 크롬 높이가
 * 다르므로 px 나 종횡비로는 맞출 수 없다.
 *
 * clamp 로 상·하한을 둬서 아주 작은 화면에서 뭉개지거나
 * 아주 큰 화면에서 과하게 커지는 것만 막는다.
 */
.spark { display: block; width: 100%; height: clamp(56px, 8.3vh, 112px); margin-top: 3px; }
.tall .spark { height: clamp(92px, 14.2vh, 190px); }
.spark .line { fill: none; stroke: var(--text); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark .zero { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.spark .base { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }

/* 여러 계열을 겹칠 때. 단일 계열(섹터 카드)은 --text 를 그대로 쓴다. */
.spark .s0 { stroke: var(--s1); }
.spark .s1 { stroke: var(--s2); }
.spark .s2 { stroke: var(--s3); }
.spark .s3 { stroke: var(--s4); }
.spark .s4 { stroke: var(--s5); }

.legend { display: flex; gap: 10px; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.legend i { width: 11px; height: 3px; border-radius: 2px; display: inline-block; vertical-align: middle; margin-right: 5px; flex: none; }

/* ── 히트맵 ───────────────────────────────────────────────────────── */
/*
 * 셀을 정사각형으로. 이전에는 56 x 16 이라 납작한 띠처럼 보였다.
 * 폭을 남기더라도 셀이 정사각이어야 색 덩어리가 눈에 잡힌다.
 */
/*
 * 아래 줄은 둘로 나눈다.
 *   히트맵  언제부터 강해졌나 (시간축)
 *   바      지금 누가 강한가 (스냅샷)
 * 히트맵이 정사각 셀이라 728px 에서 끝나므로 남는 가로를 바가 쓴다.
 */
.bottom-row {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 28px; margin-top: 10px; align-items: start;
}
.bars-wrap { min-width: 0; }
.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; }
.bars .bname { font-size: 11px; color: var(--text-2); text-align: right; white-space: nowrap; }
.bars .btrack { position: relative; height: 14px; }
.bars .bfill { position: absolute; top: 2px; height: 10px; border-radius: 2px; }
.bars .bzero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-2); }
.bars .bval { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }
.heat-wrap { }
.heat-title { display: flex; gap: 16px; align-items: baseline; margin-bottom: 6px; }
.heat-title h2 { font-size: 13px; font-weight: 500; margin: 0; }
/* 셀도 같은 이유로 뷰포트 비례. 정사각은 유지한다. */
.heat { --cell: clamp(12px, 1.82vh, 24px);
        display: grid; gap: 2px; align-items: center; width: max-content; }
.heat .rowname {
  font-size: 11px; color: var(--text-2); padding-right: 8px;
  white-space: nowrap; text-align: right;
}
.heat .cell { width: var(--cell); height: var(--cell); border-radius: 3px; }
.heat .colname {
  font-size: 9px; color: var(--text-3); text-align: center;
  height: 14px; white-space: nowrap; overflow: visible;
}

.scale { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.scale .bar { width: 90px; height: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--heat-neg-3), var(--heat-zero), var(--heat-pos-3)); }

/* ── 스크리너 탭 ──────────────────────────────────────────────────── */
/*
 * 마스터-디테일. 목록은 접지 않고 스크롤한다 —
 * 30개 정도는 어차피 전부 확인하므로 접었다 펴는 조작이 더 느리다.
 */
.funnel { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--text-3); }
.funnel b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.funnel i { color: var(--text-3); font-style: normal; }

#screenerView { overflow:hidden; }
/* 두 칸이다 — 목록 | 상세.
   왼쪽 '시황 · 최근 4주' 판은 2026-09-20 에 뺐다 (사용자 지시). 섹터 선택은 비교 탭
   맵에 있고(D19), 고른 섹터로 목록을 거르는 동작은 그대로다. 회수한 220px 은
   목록 340(칩 5열) 과 상세(차트)가 나눠 가진다.
   1500 아래에서는 차트가 먼저 좁아지므로 목록을 280(4열) 으로 줄인다. */
.scr { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 10px;
  height: 100%; min-height:0; }
@media (max-width: 1500px) { .scr { grid-template-columns: 280px minmax(0,1fr); gap: 8px; } }

/* 목록 — 뉴스 탭과 같은 칩 격자 (2026-09-20 사용자 요청).
 *
 * 왜 바꿨나
 *   검색식 세 개의 합집합이 되면서 목록이 121종목까지 늘었다. 한 줄 한 종목이면
 *   한 화면에 20개밖에 안 들어와서, "오늘 뭐가 걸렸나"를 보는 창인데 훑는 게 아니라
 *   뒤지는 게 됐다. 같은 폭에서 칩은 네 열이라 세로가 1/4 로 준다.
 *   뉴스 탭에서 이미 같은 모양을 쓰고 있어 조작감도 이어진다.
 *
 * 무엇을 버렸나
 *   · 행 왼쪽의 탈락 점 → 칩 점선 테두리. 글자 자리를 안 먹는다
 *   · 티커 옆 검색식 색점 → 칩 아래 색띠. 멀리서도 색이 먼저 읽힌다
 *   남긴 건 전고점 대비 위치(%)와 실적 D-n 둘. 칩 둘째 줄에 같이 둔다.
 *
 * 스크롤 막대는 숨긴다 (사용자 요청). 접지 않고 스크롤하는 원칙은 그대로다.
 */
.scr-list { display:flex; flex-direction:column; min-height:0; height:100%;
  overflow:hidden; border-right:1px solid var(--border); padding-right:8px; }

/* 색띠 범례. 띠만 보고 무슨 검색식인지 알 수 없으면 색이 장식이 된다.
   제목은 가운뎃점 앞까지만 자르고 전문은 툴팁에 둔다. */
.scr-legend { flex:none; display:flex; flex-wrap:wrap; gap:2px 8px;
  font-size:10px; color:var(--text-3); padding:3px 2px 6px; }
.scr-legend span { display:inline-flex; align-items:center; gap:4px; }
.scr-legend i { width:6px; height:6px; border-radius:50%; background:var(--hit-color); }
/* 섹터 판이 갖고 있던 "무엇을 뺐나" 를 여기로 옮겼다 (§2-4).
   [전체] 는 선택이 있을 때만 나온다 — 판이 없어져서 여기 말고 지울 곳이 없다. */
.scr-picked { flex:none; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font-size:10.5px; color:var(--text-2); padding:0 2px 6px; }
.scr-picked b { font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.scr-picked em { font-style:normal; color:var(--text-3); }
.scr-picked button { border:1px solid var(--border-2); border-radius:var(--radius);
  background:none; color:var(--text-2); font:inherit; font-size:10px;
  padding:0 6px; cursor:pointer; }
.scr-picked button:hover { color:var(--text); border-color:var(--text-3); }

.scr-list-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none; }
.scr-list-body::-webkit-scrollbar { width:0; height:0; }

/* 섹터마다 판 하나. 여백만으로 나누면 격자가 이어져 보여서 경계가 안 읽힌다
   (뉴스 탭에서 이미 겪은 것). */
.scr-sector { border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); padding:6px 7px 7px; margin-bottom:6px; }
.scr-sector:last-child { margin-bottom:0; }
.scr-sector .grp { font-size:11.5px; font-weight:600; color:var(--text-2); padding:0 1px 5px; }
.scr-sector .grp i { font-style:normal; font-weight:500; font-size:10px;
  color:var(--text-3); margin-left:3px; }
.scr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:4px; }

.scr-chip { display:flex; flex-direction:column; gap:1px; min-width:0;
  border:1px solid transparent; border-radius:var(--radius); background:var(--surface-2);
  color:var(--text); font:inherit; text-align:left; padding:5px 5px 4px; cursor:pointer; }
.scr-chip:hover { border-color:var(--border-2); }
/* 줄간격을 기본(1.5)으로 두면 칩 하나가 51px 이 된다. 121개면 그것만으로 한 화면이
   더 생기므로 두 줄 다 바짝 붙인다 — 글자 크기는 그대로다. */
.scr-chip .tk { font-family:var(--ticker); font-size:12.5px; font-weight:600;
  line-height:1.2; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scr-chip .gap { display:flex; justify-content:space-between; gap:3px;
  font-size:9.5px; line-height:1.25; font-variant-numeric:tabular-nums; color:var(--text-3);
  overflow:hidden; white-space:nowrap; }
.scr-chip .dday { font-style:normal; font-size:9px; color:var(--pass); font-family:var(--ticker); }
/* 걸린 검색식은 칩 아래 띠로. 둘에 걸리면 반씩 나눠 칠한다 — 겹침이 한눈에 보인다. */
.scr-chip .hits { display:flex; gap:2px; height:3px; margin-top:auto; padding-top:3px;
  box-sizing:content-box; }
.scr-chip .hits i { flex:1; border-radius:2px; background:var(--hit-color); }
/* 오늘 새로 걸린 것은 금테 — 비교 탭 타일의 금테와 같은 뜻으로 쓴다. */
.scr-chip.NEW { box-shadow:inset 0 0 0 1px var(--pass); }
/* 탈락(어제 있다 오늘 빠진 것)은 지우지 않고 점선으로 남긴다. 왜 빠졌나가 근거다. */
.scr-chip.DROPPED { background:none; border-style:dashed; border-color:var(--border-2);
  color:var(--text-3); }
.scr-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.scr-chip.on .gap, .scr-chip.on .dday { color:rgba(255,255,255,.82); }

/* 상세의 '왜 걸렸나'에서 쓰는 점. 목록에서는 더 안 쓴다. */
.hit-dot { display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-left:4px; vertical-align:middle; background:var(--hit-color); }

.scr-detail { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  min-height:0; overflow-y:auto; scrollbar-width:none; }
.scr-detail::-webkit-scrollbar { width:0; height:0; }
/* 트레이딩뷰 좌상단 표시 — 티커 · 봉 단위 · 올린 봉의 OHLC.
   pointer-events 를 끊어야 글자 위에서 십자선이 멈추지 않는다. */
.tv-legend { position:absolute; left:11px; top:8px; z-index:2; pointer-events:none;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-size:11px; color:var(--chart-cross); font-variant-numeric:tabular-nums; }
.tv-legend b { font-family:var(--ticker); font-size:13px; font-weight:700;
  color:var(--chart-text); }
.tv-legend em { font-style:normal; }
.tv-legend i { font-style:normal; margin-left:3px; }

.d-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.d-tk { font-size: 17px; font-weight: 600; font-family: var(--mono); }
.d-name { color: var(--text-2); }
.d-last { margin-left: auto; font-variant-numeric: tabular-nums; }
.d-last b { font-weight: 500; }
.d-last .up { color: var(--up); } .d-last .down { color: var(--down); }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.tag.NEW { background: var(--accent-bg); color: var(--accent); }
.tvlink { font-size: 11px; color: var(--accent); text-decoration: none; }
.tvlink:hover { text-decoration: underline; }

.d-badges { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--text-3); }
.d-badges span { background: var(--surface); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: var(--radius); font-variant-numeric: tabular-nums; }

.stages { display: flex; gap: 4px; flex-wrap: wrap; }
.stages .st {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-3);
}
.stages .st b { font-weight: 500; margin-left: 5px; font-variant-numeric: tabular-nums; }
.stages .st.ok { color: var(--text-2); }
.stages .st.no { background: var(--bg); border: 1px solid var(--border-2); color: var(--text-2); }

/* '왜 걸렸나' 패널은 뺐다 (D28) — 어느 단계에서 왜 걸렸나는 검색식을 고칠 때 보는 것이고
   [오늘] 은 살지 말지를 정하는 화면이다. 그 안의 거래대금·RVol·6개월만 머리 배지로 올렸다.
   compare.js 의 판정 카드(.why-sc)는 별개다 (compare.css). */

/* ── 캔들 차트 색 — 트레이딩뷰 기본 테마 그대로 (2026-09-20 사용자 지시) ──
 * 눈대중으로 맞춘 값이 아니라 저쪽 기본 팔레트다 (다크 #131722 / 격자 #2a2e39 /
 * 글자 #b2b5be / 테두리 #363a45 / 십자선 #9598a1).
 *
 * 왜 대시보드 토큰(--surface·--border·--text-3)을 안 쓰나
 *   **판단은 트레이딩뷰에서 한다.** 같은 봉을 두 도구가 다른 색으로 칠하면
 *   여기서 본 모양과 거기서 본 모양이 달라진다. 차트 안쪽만 저쪽 규격에 맞추고,
 *   차트를 담는 카드·글자는 계속 대시보드 토큰을 쓴다.
 *
 * 예외 — **캔들 몸통은 상승=빨강(한국식, --up/--down)** 을 유지한다.
 *   트레이딩뷰 기본은 초록/빨강이지만 사용자 화면이 한국식이고,
 *   이 대시보드 전체(히트맵·수익률)가 같은 규칙이라 여기만 뒤집으면 오독한다.
 */
:root {
  --chart-bg:     #ffffff;
  --chart-grid:   #e1e3eb;
  --chart-text:   #131722;
  --chart-border: #d6dcde;
  --chart-cross:  #9598a1;
  --chart-mark:   rgba(19,23,34,.05);   /* 배경 티커 워터마크 */
}
:root[data-theme="dark"] {
    --chart-bg:     #131722;   /* 트레이딩뷰 다크 판 */
    --chart-grid:   #2a2e39;
    --chart-text:   #b2b5be;
    --chart-border: #363a45;
    --chart-cross:  #9598a1;
    --chart-mark:   rgba(255,255,255,.045);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chart-bg:     #131722;   /* 트레이딩뷰 다크 판 */
    --chart-grid:   #2a2e39;
    --chart-text:   #b2b5be;
    --chart-border: #363a45;
    --chart-cross:  #9598a1;
    --chart-mark:   rgba(255,255,255,.045);
  }
}

.chartbox {
  position: relative;                 /* 좌상단 OHLC 범례를 얹는다 */
  height: clamp(220px, 42vh, 460px);
  background: var(--chart-bg); border: 1px solid var(--chart-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.cmpbox .sparkbox .spark { height: clamp(70px, 12vh, 140px); }

/* ── 거시 탭 ───────────────────────────────────────────────────────── */
/*
 * 커브를 두 장으로 나눈다. 만기 14개를 하나의 선형 축에 놓으면
 * 1M~1Y 여덟 개가 왼쪽 끝에 뭉개진다. 각 장 안에서는 실제 연수 비례.
 * 단기 쪽이 좁은 이유는 담는 만기 수가 적어서다.
 *
 * --curve-h 를 변수로 둔 것은 y 눈금 글자를 SVG 밖 오버레이로 얹기 때문이다.
 * 오버레이 높이가 SVG 와 정확히 같아야 py() 비율을 그대로 top% 로 쓸 수 있다.
 */
.curve-row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); margin-bottom: var(--gap); }
.curvebox { --curve-h: clamp(130px, 22vh, 240px); position: relative; margin-top: 4px; }
.curve { display: block; width: 100%; height: var(--curve-h); }
.curve .grid { stroke: var(--border); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.curve .cline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; }
/*
 * 시점마다 다른 색. 회색 진하기로만 구분하면 세 개 이상에서 안 읽힌다.
 * '오늘'만 굵게 해서 어느 게 현재인지 바로 보이게 한다.
 */
.curve .cline.c0 { stroke: var(--text); stroke-width: 2.4; }
.curve .cline.c1 { stroke: var(--s1); }
.curve .cline.c2 { stroke: var(--s2); }
.curve .cline.c3 { stroke: var(--s3); }
.curve .cline.c4 { stroke: var(--s7); }
.curve .cdot { fill: var(--text); }

.clabels { position: relative; height: 13px; }
.clabels span {
  position: absolute; transform: translateX(-50%);
  font-size: 9.5px; color: var(--text-3); white-space: nowrap;
}

/* y 눈금. 커브 왼쪽 여백(L=11)이 이 글자 자리다. */
.ylabels { position: absolute; left: 0; top: 0; width: 100%; height: var(--curve-h);
  pointer-events: none; }
.ylabels span {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: 9.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
}

.rates-row { margin-bottom: var(--gap); }

/*
 * 만기별 변화. 겹쳐보기로 커브 모양이 달라진 건 보이지만 몇 bp 인지는
 * 못 읽는다 — 10bp 가 130px 패널에서 5px 다. 숫자는 이 표가 맡는다.
 * 행 머리 색은 커브 선 색(c0~c4)과 같은 규칙이라 표와 그림이 서로 가리킨다.
 */
/* 만기 16칸이라 창이 아주 좁으면 표가 카드를 밀어낸다. 밀지 말고 표만 넘긴다. */
.dtabwrap { overflow-x: auto; }
.dtab { width: 100%; border-collapse: collapse; margin-top: 6px;
  font-size: 11px; font-variant-numeric: tabular-nums; }
.dtab th, .dtab td { padding: 4px 2px; text-align: right; white-space: nowrap; }
.dtab tr:first-child th { color: var(--text-3); font-weight: 400;
  border-bottom: 1px solid var(--border); }
.dtab th:first-child { text-align: left; font-weight: 400; padding-right: 10px; }
.dtab th i { font-style: normal; font-size: 9.5px; color: var(--text-3);
  margin-left: 5px; }
.dtab .lv th, .dtab .lv td { border-bottom: 1px solid var(--border); }
.dtab .lv td { color: var(--text); }
.dtab td.up { color: var(--up); } .dtab td.down { color: var(--down); }
.dtab .vd { padding-left: 12px; color: var(--text-2); }
.dtab tr:first-child .vd { color: var(--text-3); }
/* 커브 선 색과 맞춘다. :first-child 규칙보다 뒤에 와야 색이 덮인다. */
.dtab th.c0 { color: var(--text); }
.dtab th.c1 { color: var(--s1); }
.dtab th.c2 { color: var(--s2); }
.dtab th.c3 { color: var(--s3); }
.dtab th.c4 { color: var(--s7); }

/* ── 매매기록 ─────────────────────────────────────────────────────── */
/*
 * 기록 화면에는 손익이 없다. 티커·수량·가격·날짜·비고만.
 * 색으로도 새어나가면 안 되므로 매수/매도 구분 외에는 --up/--down 을 쓰지 않는다.
 */
.btn {
  background: var(--accent); color: #fff; border: none;
  font: inherit; font-size: 12px; padding: 5px 12px;
  border-radius: var(--radius); cursor: pointer;
}
.btn.ghost { background: none; color: var(--text-2); border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--border-2); color: var(--text); }
.spacer { flex: 1; }
.linklike { background: none; border: none; color: var(--accent);
  font: inherit; font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline; }
.seg.small button { font-size: 11px; padding: 2px 8px; }

/*
 * 입력 한 줄 — 늘 펼쳐져 있다.
 * 모달을 여닫는 마찰이 없어야 장중에 실제로 적는다. 어느 칸에서든 Enter 로 기록된다.
 */
.jentry-card { margin-bottom: var(--gap); }
.jentry {
  display: grid;
  grid-template-columns: auto 94px 96px 84px 140px minmax(160px, 1fr) auto;
  gap: 6px; align-items: center;
  border-left: 3px solid transparent; padding-left: 5px; margin-left: -8px;
}
/* 매도로 바꾸면 왼쪽에 띠가 선다 — 반대쪽을 적는 실수를 막는 가장 싼 장치. */
.jentry.sell { border-left-color: var(--down); }
.ji {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); font: inherit; font-size: 12px; padding: 6px 8px;
  min-width: 0;
}
.ji:focus { outline: none; border-color: var(--accent); }
.ji.tk { font-family: var(--mono); text-transform: uppercase; font-weight: 500; }
.ji.nm { text-align: right; font-variant-numeric: tabular-nums; }
.ji.dt { font-variant-numeric: tabular-nums; }
.jentry-hint { min-height: 15px; margin-top: 5px; padding-left: 5px;
  font-size: 11px; color: var(--text-3); }
.jentry-hint .err { color: var(--up); }
.jentry-hint .warn { color: var(--text-2); }
.jentry-hint .ok { color: var(--accent); }

/* 보유(좁게) + 기록(넓게). 보유 목록은 짧고 기록은 계속 길어진다. */
.jshell { display: grid; grid-template-columns: 240px 1fr; gap: var(--gap);
  align-items: start; }

.held { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.held:hover { background: var(--surface-2); }
.held .hqty { font-variant-numeric: tabular-nums; }
.held .hsub { grid-column: 1 / -1; font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums; }
.jtk { font-family: var(--mono); font-weight: 500; }
.jtk.dim { color: var(--text-2); }

/* 기록 목록. 기록 줄과 수정 줄이 같은 열을 써야 눈금이 안 흔들린다. */
.fills { max-height: calc(100vh - 275px); overflow: auto; }
.frow, .jlog-row, .jlog-head {
  display: grid;
  gap: 8px; align-items: center;
  padding: 5px 4px; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* 기록 줄: 끝이 [고치기][지우기]. 매매일지 줄: 끝이 실현손익 + 비고.
   열 개수는 같지만 마지막 두 열의 역할이 반대라 따로 준다. */
.frow { grid-template-columns: 90px 44px 62px 56px 72px minmax(0, 1fr) 54px; }
.jlog-row, .jlog-head { grid-template-columns: 90px 44px 62px 56px 72px 132px minmax(0, 1fr); }
.frow { border-bottom: 1px solid var(--border); }
.frow.daystart { border-top: 1px solid var(--border-2); }
.frow:first-child { border-top: none; }
.frow .fdate, .jlog-row .fdate { color: var(--text-3); font-size: 11px; }
.frow .fside, .jlog-row .fside { font-size: 11px; }
.frow.buy .fside, .jlog-row.buy .fside { color: var(--up); }
.frow.sell .fside, .jlog-row.sell .fside { color: var(--down); }
.fqty, .fprice { text-align: right; }
.fprice { color: var(--text-2); }
.frow.editing { background: var(--surface-2); padding: 4px; }
.frow.editing .ji { padding: 3px 6px; font-size: 11px; }

/* 고치기·지우기 버튼은 올렸을 때만. 평소에 줄이 버튼으로 시끄러우면 안 읽힌다. */
.facts { display: flex; gap: 3px; opacity: 0; transition: opacity .1s; }
.frow:hover .facts, .frow.editing .facts { opacity: 1; }
.fbtn { width: 22px; height: 20px; border-radius: 5px; line-height: 1;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-3); cursor: pointer; font-size: 11px; }
.fbtn:hover { border-color: var(--accent); color: var(--accent); }
.fbtn.ok { border-color: var(--accent); color: var(--accent); }

/*
 * 비고 칸.
 * 칸이 좁아 한 줄로 자르고, 올리면 말풍선으로 전체를 편다.
 * title 속성을 안 쓴 이유: 브라우저 기본 툴팁은 뜨는 데 1초 넘게 걸리고
 * 테마를 안 따라간다. 여러 줄 비고도 한 줄로 뭉갠다.
 */
.memo-cell { position: relative; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.memo-cell.empty { color: var(--border-2); }
.memo-cell[data-memo]:hover::after {
  content: attr(data-memo);
  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 60;
  width: max-content; max-width: 420px; white-space: pre-wrap;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 7px 9px; font-size: 12px; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
/* 맨 윗줄은 위로 띄우면 잘린다. 아래로 편다. */
.jlog-row:first-of-type .memo-cell[data-memo]:hover::after,
.frow:first-child .memo-cell[data-memo]:hover::after { bottom: auto; top: calc(100% + 4px); }

/* ── 성과 ─────────────────────────────────────────────────────────── */
/*
 * 위에서 아래로 시간 축이다.
 *   지금 얼마인가(요약) → 목표 대비(KPI·목표) → 어떻게 왔나(곡선) →
 *   무엇을 들고 있나(비중·보유) → 무엇을 했나(성적·끝난 매매·일지)
 * 스크롤은 허용한다. 접는 건 안 한다 — 사용자가 싫어한다.
 */

/* 요약 한 줄. 칸 수가 8개라 고정 폭을 주면 1280 에서 넘친다. */
.sumbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 4px 10px; margin-bottom: var(--gap); }
.sumbar > div { padding: 2px 0; border-left: 1px solid var(--border); padding-left: 10px; }
.sumbar > div:first-child { border-left: none; padding-left: 0; }
.sumbar span { display: block; font-size: 11px; color: var(--text-3); }
.sumbar b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sumbar b.up { color: var(--up); } .sumbar b.down { color: var(--down); }
.sumbar i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 5px; }
.sumbar i.up { color: var(--up); } .sumbar i.down { color: var(--down); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.kpi { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 12px; }
.kpi span { display: block; font-size: 11px; color: var(--text-3); }
.kpi b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kpi b.up { color: var(--up); } .kpi b.down { color: var(--down); }
.kpi i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 6px; }
.kpi i.up { color: var(--up); } .kpi i.down { color: var(--down); }

.prow { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.prow > .card { min-width: 0; }
.ptable { width: 100%; font-size: 12px; margin-top: 4px; }
.ptable td { padding: 3px 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ptable td:last-child { text-align: right; color: var(--text); }
.ptable .down { color: var(--down); } .ptable .up { color: var(--up); }

.capin { display: flex; gap: 6px; margin-top: 8px; }
.capin input { flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit; padding: 6px 8px; }
.capin button { background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius); font: inherit; padding: 6px 14px; cursor: pointer; }

/*
 * 목표.
 * 막대 축은 0~150% 고정이고 100% 지점에 눈금선이 있다 (= 66.667%).
 * "얼마나 벌었나"가 아니라 "선을 넘었나"를 먼저 보려는 화면이라 축을 목표에 맞췄다.
 */
.tgcard { margin-bottom: var(--gap); }
.tgrid { display: grid; grid-template-columns: auto auto 1fr auto;
  gap: 8px 12px; align-items: center; margin-top: 8px; }
.tgin { display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-2); white-space: nowrap; }
.tgin input { width: 62px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: 13px; font-weight: 500; padding: 4px 6px;
  text-align: right; font-variant-numeric: tabular-nums; }
.tgin input:focus { outline: none; border-color: var(--accent); }
.tglabel { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.tgtrack { position: relative; height: 12px; background: var(--surface-2);
  border-radius: 6px; overflow: hidden; }
.tgfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.tgfill.pos { background: var(--up); }
.tgfill.neg { background: var(--down); }
.tgmark { position: absolute; top: 0; bottom: 0; left: 66.667%;
  width: 2px; background: var(--text-3); opacity: .6; }
.tgval { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
  min-width: 132px; text-align: right; }
.tgval.up { color: var(--up); } .tgval.down { color: var(--down); }
.tgval i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 5px; }
.tgnote { margin-top: 8px; }

/*
 * 자산 곡선 + 낙폭.
 * 실제 픽셀로 그리므로 높이를 CSS 가 정하고 JS 가 읽어간다.
 * 뷰포트 비례로 잡는 이유는 0.06 에서와 같다 — 브라우저 크롬 높이 차이를 흡수한다.
 */
.eqbox { height: clamp(180px, 26vh, 300px); margin-top: 4px; }
.eqsvg { display: block; }
.eqline { fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; }
.ddarea { fill: var(--down); fill-opacity: .28; stroke: none; }
.pg { stroke: var(--border); stroke-width: 1; }
.pax { fill: var(--text-3); font-size: 10px; font-family: var(--mono); }
.pax.dim { opacity: .7; }

/*
 * 비중 — 차원마다 도넛 하나 (섹터 / 산업 / 종목).
 * 큰 도넛 하나로 다 보여주려 하면 종목이 11개만 넘어도 못 읽는다.
 */
.pierow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin-top: 6px; }
.piecell { min-width: 0; border-left: 1px solid var(--border); padding-left: 12px; }
.piecell:first-child { border-left: none; padding-left: 0; }
.piecell h4 { margin: 0 0 6px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.pie { display: flex; gap: 12px; align-items: center; min-width: 0; }
.donut { width: 92px; height: 92px; border-radius: 50%; flex: none;
  mask: radial-gradient(circle, transparent 44%, #000 45%);
  -webkit-mask: radial-gradient(circle, transparent 44%, #000 45%); }
/* .legend / .legend i 는 공통 구성요소 절(위쪽)에 있다. 여기서는 세로형만 더한다. */
.legend.vert { flex-direction: column; gap: 2px; align-items: stretch;
  min-width: 0; flex: 1; }
.legend.vert span { display: flex; align-items: center; gap: 2px; min-width: 0; }
.legend.vert em { font-style: normal; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; }
.legend.vert b { font-weight: 500; color: var(--text-2);
  font-variant-numeric: tabular-nums; margin-left: 6px; flex: none; }

/* 보유 종목 표 · 끝난 매매 표. 열 수가 달라 각각 템플릿을 준다. */
.htab { margin-top: 4px; }
.htab-head, .htab-row {
  display: grid; gap: 8px; align-items: center; padding: 5px 4px;
  font-size: 12px; font-variant-numeric: tabular-nums;
  /* 섹터는 짧다(기술·에너지). 고정하고 남는 폭은 산업이 먹게 둔다 —
     산업명은 "Technology Hardware, Storage & Peripherals" 처럼 길다.
     둘 다 1fr 로 두면 섹터가 440px 를 먹고 산업은 그대로 잘렸다. */
  grid-template-columns: 62px 96px minmax(160px, 1fr)
                         52px 66px 66px 96px 56px 140px 56px;
}
.htab.closed .htab-head, .htab.closed .htab-row {
  grid-template-columns: 62px minmax(70px, 1fr) 88px 88px 56px 86px 96px 72px;
}
.htab-head { font-size: 11px; color: var(--text-3);
  border-bottom: 1px solid var(--border-2); }
.htab-head span:nth-child(n+4) { text-align: right; }
.htab.closed .htab-head span:nth-child(n+5) { text-align: right; }
.htab.closed .htab-head span:nth-child(3),
.htab.closed .htab-head span:nth-child(4) { text-align: left; }
.htab-row { border-bottom: 1px solid var(--border); }
.htab-row:hover { background: var(--surface-2); }
.htab .num { text-align: right; }
.htab .num.up { color: var(--up); } .htab .num.down { color: var(--down); }
.htab .num i { font-style: normal; font-size: 11px; opacity: .75; margin-left: 4px; }
.htab .dim { color: var(--text-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* 섹터별 — 숫자 세 칸 + 0 기준 발산 막대 */
.sectab { margin-top: 4px; }
.sectab-head, .sectab-row { display: grid;
  grid-template-columns: minmax(70px, 1fr) 52px 78px 78px minmax(70px, 1.2fr);
  gap: 8px; align-items: center; padding: 4px; font-size: 12px;
  font-variant-numeric: tabular-nums; }
.sectab-head { font-size: 11px; color: var(--text-3);
  border-bottom: 1px solid var(--border-2); }
.sectab-head span:nth-child(n+2) { text-align: right; }
.sectab-row { border-bottom: 1px solid var(--border); }
.sectab .num { text-align: right; }
.sectab .num.up { color: var(--up); } .sectab .num.down { color: var(--down); }
.sectab .dim { color: var(--text-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sectab .btrack { position: relative; display: block; height: 12px;
  background: var(--surface-2); border-radius: 3px; }
.sectab .bzero { position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--border-2); }
.sectab .bfill { position: absolute; top: 2px; height: 8px; border-radius: 2px; }

/* 매매 성적 — 작은 타일 여러 개. 표로 하면 숫자 나열이 되어 안 읽힌다. */
.tstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px 10px; margin-top: 8px; }
.tstats > div { padding: 4px 0 4px 10px; border-left: 1px solid var(--border); }
.tstats span { display: block; font-size: 11px; color: var(--text-3); }
.tstats b { display: block; font-size: 17px; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1.25; }
.tstats b.up { color: var(--up); } .tstats b.down { color: var(--down); }
/* 설명은 값 아래 한 줄로. 옆에 붙이면 1280 에서 칸이 좁아
   "이익합 ÷ 손실합" 같은 짧은 말도 세 줄로 찢어진다. */
.tstats i { display: block; font-style: normal; font-size: 11px;
  color: var(--text-3); margin-top: 1px; line-height: 1.3; }

/* 매매일지 — 기록 화면과 같은 줄인데 여기서만 손익이 붙는다. */
.jlog { margin-top: 4px; }
.jlog-head { font-size: 11px; color: var(--text-3);
  border-bottom: 1px solid var(--border-2); }
.jlog-head span:nth-child(4), .jlog-head span:nth-child(5),
.jlog-head span:nth-child(6) { text-align: right; }
.jlog-row { border-bottom: 1px solid var(--border); }
.jlog-row:hover { background: var(--surface-2); }
.fpnl { text-align: right; color: var(--text-3); }
.fpnl.up { color: var(--up); } .fpnl.down { color: var(--down); }
.fpnl i { font-style: normal; font-size: 11px; opacity: .75; margin-left: 4px; }

/* 섹터 카드 클릭 — 아래 바 영역이 그 섹터 종목으로 바뀐다 */
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--border-2); }
.card.sel { border-color: var(--accent); background: var(--accent-bg); }
.bars .bname { cursor: default; }

/* 성과 화면의 카드 사이 간격 — prow 밖의 단독 카드들 */
#perfBody > .card { margin-bottom: var(--gap); }

/*
 * 저장 위치 표시.
 * 폴백은 조용해서 위험하다. 파일이 아니라 브라우저에 쌓이고 있다는 걸 모르면
 * 캐시를 지우는 순간 몇 달치가 사라진다. 그래서 늘 보이게 둔다.
 */
.where { font-size: 11px; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-3); white-space: nowrap; }
.where::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--flat); }
.where.file::before { background: var(--s3); }
.where.browser { color: var(--text-2); border-color: var(--border-2); }
.where.browser::before { background: var(--s4); }
.where.err { color: var(--up); border-color: var(--up); }
.where.err::before { background: var(--up); }

/* PIN 입력창 (journal.js askPin) */
.pin-dialog { border: 1px solid var(--border-2); border-radius: 10px; padding: 18px 20px;
  background: var(--surface); color: var(--text); min-width: 240px; }
.pin-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.pin-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.pin-dialog input { width: 100%; box-sizing: border-box; font-size: 20px; letter-spacing: .4em;
  text-align: center; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: inherit; }
.pin-msg { font-size: 11px; color: var(--text-3); margin: 8px 0 12px; min-height: 14px; }
.pin-msg.err { color: var(--up); }
.pin-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* ── 진단 탭 ──────────────────────────────────────────────────────── */
.params { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-3); }
.params b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.drow2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }

.funnelbox { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px;
  align-items: center; margin-top: 6px; }
.fname { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.tagx { font-style: normal; font-size: 10px; color: var(--up);
  border: 1px solid var(--up); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.ftrack { display: flex; height: 14px; border-radius: 3px; overflow: hidden;
  background: var(--surface-2); }
.fpass { background: var(--s1); }
.fdrop { background: var(--surface-2); border-left: 1px solid var(--border-2); }
.fval { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fval i { font-style: normal; color: var(--text-3); margin-left: 5px; }

.dtable { width: 100%; font-size: 11px; margin-top: 6px; border-collapse: collapse; }
.dtable th { text-align: left; color: var(--text-3); font-weight: 400;
  padding: 2px 6px 4px; border-bottom: 1px solid var(--border); }
.dtable td { padding: 3px 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dtable .mono { font-family: var(--mono); color: var(--text); }
.dtable .down { color: var(--down); }
.dtable.wi td { text-align: center; }
.dtable.wi td.now { color: var(--accent); font-weight: 500; }

.drow { display: grid; grid-template-columns: 80px 90px 28px 1fr; gap: 8px;
  align-items: center; margin-bottom: 5px; font-size: 11px; }
.dname { color: var(--text-2); }
.dbar { height: 10px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.dbar i { display: block; height: 100%; background: var(--s2); }
.dcnt { text-align: right; font-variant-numeric: tabular-nums; }
.dtk { color: var(--text-3); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* T10 통합 탭의 뉴스·이력 보조 레이아웃. */
.sub-switch { min-height:38px; }
.search-input { min-width:260px; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:5px; padding:6px 9px; }
.search-results { position:absolute; top:38px; left:12px; z-index:20; width:360px;
  background:var(--surface); border:1px solid var(--border); border-radius:5px; }
.search-results:empty { display:none; }
.search-results button { width:100%; border:0; border-bottom:1px solid var(--border);
  background:transparent; color:var(--text); padding:6px 9px; text-align:left; cursor:pointer; }
/* 뉴스 (D23) — 왼쪽 후보 격자 + 오른쪽 세이브티커 iframe.
   폭을 이렇게 나눈 이유: 1600 에서 재보니 저쪽이 실제로 쓰는 건 **가운데 800px** 뿐이고
   양옆 325px 씩이 빈 여백이었다. 1000 으로 줄여도 데스크톱 레이아웃이 유지되므로
   (모바일로 접히는 건 768 아래) 프레임은 1000 에 고정하고 남는 폭을 전부 목록에 준다.
   1520 아래에서는 그럴 여유가 없으니 예전처럼 좁은 한 줄로 돌아간다. */
#newsView { overflow:hidden; }
.news-split { display:grid; grid-template-columns:minmax(220px,1fr) 1000px; gap:12px;
  height:100%; min-height:0; }
@media (max-width:1520px) { .news-split { grid-template-columns:132px minmax(0,1fr); gap:8px; } }

.news-tickers { display:flex; flex-direction:column; min-height:0; overflow:hidden;
  border-right:1px solid var(--border); padding-right:10px; }
.news-tickers-head { flex:none; font-size:11px; color:var(--text-2);
  padding:4px 2px 8px; }
/* 접지 않는다. 스크롤은 하되 막대는 숨긴다 — 사용자 요청.
   섹터 머리 11줄이 붙으면서 화면에 따라 넘칠 수 있는데, 막대가 뜨면
   격자 폭이 그만큼 줄었다 늘었다 해서 칩 열 수가 흔들린다. */
.news-tickers-body { min-height:0; overflow-y:auto; flex:1; overscroll-behavior:contain;
  scrollbar-width:none; }
.news-tickers-body::-webkit-scrollbar { width:0; height:0; }
/* 섹터마다 판을 하나씩. 머리글만 키우고 구분을 여백에 맡겼더니
   격자가 이어져 보여서 어디서 섹터가 갈리는지 눈에 안 들어왔다. */
.news-sector { border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); padding:7px 8px 8px; margin-bottom:7px; }
.news-sector:last-child { margin-bottom:0; }
.news-group { font-size:12px; font-weight:600; color:var(--text-2); padding:0 1px 6px; }
.news-group i { font-style:normal; font-weight:500; font-size:10px; color:var(--text-3);
  margin-left:2px; }
.news-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr));
  gap:4px; }

.news-ticker { border:1px solid transparent; border-radius:var(--radius);
  background:var(--surface-2); color:var(--text); font:inherit; font-size:12px;
  font-weight:600; text-align:center; padding:10px 2px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-ticker:hover { border-color:var(--border-2); }
.news-ticker.selected { background:var(--accent); border-color:var(--accent);
  color:#fff; }
/* 경계선은 채우지 않고 테두리만 — 통과와 한눈에 갈리되 줄은 안 늘어난다. */
.news-ticker.weak { background:none; border-color:var(--border); color:var(--text-2);
  font-weight:500; }
.news-ticker.weak.selected { background:var(--accent); color:#fff; }

/* 티커 한 칸이면 되므로 공용 검색 상자(260px)보다 좁게. 입력은 대문자로 보이게. */
#newsFilter, #scrFilter { min-width:96px; width:96px; text-transform:uppercase; }

.news-frame { width:100%; height:100%; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); }

.history-head,.history-row { display:grid; grid-template-columns:110px minmax(160px,1fr) 90px 100px;
  gap:10px; padding:7px 9px; border-bottom:1px solid var(--border); font-size:11px; }
.history-head { color:var(--text-3); }
@media (max-width:760px) { .news-row { grid-template-columns:60px 48px minmax(0,1fr); }
  .news-row small { display:none; } }
/* author display 규칙이 HTML hidden을 덮으면 비활성 탭도 높이를 차지한다. */
[hidden] { display:none !important; }

/* 과거 날짜(재계산)로 들어가는 문 — 이력 탭 (D28). [오늘] 에는 셀렉트가 없다.
   재계산이라는 게 머리에 늘 보여야 하므로 들어가면 .tag.recon 과 상단 기준일 줄이 말해준다. */
.hist-days { display:flex; flex-wrap:wrap; gap:4px; padding:2px 0 10px; }
.hist-days button { border:1px solid var(--border-2); border-radius:var(--radius);
  background:none; color:var(--text-2); font:inherit; font-size:11px;
  font-variant-numeric:tabular-nums; padding:2px 7px; cursor:pointer; }
.hist-days button:hover { color:var(--text); border-color:var(--text-3); }
.hist-note { font-size:11px; color:var(--text-3); padding:0 0 6px; }
.tag.recon { background: transparent; border: 1px dashed var(--border-2); color: var(--text-2); }

/* ── 검색식 상세 아래 줄: 비교 | 일정 (T18) ────────────────────────── */
/* 비교를 반으로 줄이고 그 자리에 기업 일정을 넣는다 (사용자 요청 2026-09-20).
   비교 3선(종목·산업ETF·S&P500)은 반 폭에서도 읽히고, 일정은 줄 목록이라 좁은 폭이 오히려 맞다. */
.scr-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.calbox { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 7px 10px; min-width: 0; }
.cal-next { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.cal-dday { font-size: 15px; font-weight: 700; font-family: var(--ticker); }
.cal-dday.soon { color: var(--pass); }          /* 임박 = 금색. 검색식 통과와 같은 "주의해서 볼 것" */
.cal-when { color: var(--text-2); font-size: 11px; }
.cal-tag { font-size: 10px; padding: 0 5px; border-radius: 8px; border: 1px solid var(--border-2);
  color: var(--text-3); }
.cal-list { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.cal-list .row2 { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
.cal-list .d { color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }
.cal-list .f { flex: none; font-weight: 600; color: var(--text-2); }
.cal-list .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.cal-list a { color: var(--accent); text-decoration: none; }
.cal-sec { color: var(--text-3); font-size: 10.5px; margin: 6px 0 2px; }
.cal-beat { color: var(--up); } .cal-miss { color: var(--down); }