/* maedong — 국내 증시 조회 UI
   국내 관행에 맞춰 상승/순매수는 붉은색, 하락/순매도는 파란색.

   색은 전부 여기 토큰으로만 쓴다. 다른 곳에 hex 를 적지 않는다 — 테마는
   :root(다크 기본)와 [data-theme="light"] 두 블록만 바꿔서 갈아입는다.
   차트(chart.js)도 이 토큰을 읽는다. */

:root {
  color-scheme: dark;

  /* 표면 */
  --bg: #0e1116;
  --bg-panel: #161b22;
  --bg-panel-2: #1c2229;
  --border: #2c3542;
  --border-soft: #232b36;
  --topbar-bg: rgba(14, 17, 22, 0.9);
  --tip-bg: rgba(22, 27, 34, 0.94);
  --shadow: rgba(0, 0, 0, 0.4);

  /* 글자 */
  --text: #eef3f8;
  --text-dim: #aab5c2;
  --text-faint: #9aa5b5;
  --on-accent: #1a1400;

  /* 의미색 */
  --pos: #f6465d;
  --avoid: #e08a3c;   /* 판정색 — 등락색과 섞이지 않게 */
  --warn: #d94f4f;    /* 제도 밖(정리매매·상장폐지) 경고 */
  --beat: #3fa8a0;
  --pos-soft: rgba(246, 70, 93, 0.12);
  --neg: #5b9df0;
  --neg-soft: rgba(74, 144, 226, 0.12);
  --accent: #f0b90b;
  --accent-soft: rgba(240, 185, 11, 0.12);
  --accent-line: rgba(240, 185, 11, 0.35);

  /* 차트 */
  --chart-bg: #161b22;
  --chart-grid: #1e242d;
  --chart-border: #262d38;
  --chart-text: #8b97a6;
  --chart-label-bg: #2c333d;
  --up: #f6465d;
  --down: #4a90e2;
  --up-soft: rgba(246, 70, 93, 0.55);
  --down-soft: rgba(74, 144, 226, 0.55);
  --ma5: #e8c468;
  --ma20: #4a90e2;
  --ma60: #9b6ef3;
  --ma120: #6b7684;
  --flow-foreign: #f0b90b;
  --flow-institution: #26c6a6;
  --flow-individual: #8b97a6;
  --flow-short: #c678dd;
  --flow-arb: #5c86ff;
  --flow-nonarb: #ff9f43;
  --line-1: #b8860b;
  --line-2: #2d6fd6;
  --line-3: #0f9d84;
  --line-4: #9b4fd6;
  /* 범용 선 차트(시장 폭·환율·비교) 계열 색 */
  --line-1: #f0b90b;
  --line-2: #5b9df0;
  --line-3: #26c6a6;
  --line-4: #c678dd;

  /* 모양 */
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f6f8;
  --bg-panel: #ffffff;
  --bg-panel-2: #eef1f5;
  --border: #d8dee7;
  --border-soft: #e6eaf0;
  --topbar-bg: rgba(245, 246, 248, 0.92);
  --tip-bg: rgba(255, 255, 255, 0.97);
  --shadow: rgba(16, 24, 40, 0.14);

  --text: #111827;
  --text-dim: #4b5563;
  --text-faint: #6b7280;
  --on-accent: #1a1400;

  --pos: #d6283c;
  --avoid: #b4651b;
  --warn: #c02b2b;
  --beat: #1f7c74;
  --pos-soft: rgba(214, 40, 60, 0.1);
  --neg: #2d6fd6;
  --neg-soft: rgba(45, 111, 214, 0.1);
  --accent: #c98f00;
  --accent-soft: rgba(201, 143, 0, 0.12);
  --accent-line: rgba(201, 143, 0, 0.4);

  --chart-bg: #ffffff;
  --chart-grid: #eef1f5;
  --chart-border: #d8dee7;
  --chart-text: #6b7280;
  --chart-label-bg: #e5e7eb;
  --up: #d6283c;
  --down: #2d6fd6;
  --up-soft: rgba(214, 40, 60, 0.5);
  --down-soft: rgba(45, 111, 214, 0.5);
  --ma5: #b8860b;
  --ma20: #2d6fd6;
  --ma60: #7c3aed;
  --ma120: #6b7280;
  --flow-foreign: #b8860b;
  --flow-institution: #0f9d84;
  --flow-individual: #6b7280;
  --flow-short: #9d4edd;
  --flow-arb: #3b63d9;
  --flow-nonarb: #e07b12;
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html {
  /* 상단바가 sticky 라, 앵커로 뛰거나 키보드로 포커스를 옮기면 대상이 바 뒤로 숨는다
     (WCAG 2.2 AA 'Focus Not Obscured'). 스크롤을 바 높이만큼 미리 물린다.
     모바일은 하단 탭바가 fixed 라 아래쪽도 같이 띄운다. */
  /* 실측: 데스크톱 상단바 66px, 모바일 56px · 하단 탭바 61px. 여유 8px 를 더한다 */
  scroll-padding-top: 74px;
  scroll-behavior: smooth;
}
@media (max-width: 640px) { html { scroll-padding-top: 64px; scroll-padding-bottom: 70px; } }

a { color: inherit; text-decoration: none; }

/* 이 사이트에는 transition 이 딱 하나, :active 가 하나도 없었다. 누르면 아무 반응이
   없으니 눌린 건지 안 눌린 건지 화면이 바뀌고 나서야 안다 — 느린 회선에서 두 번
   누르게 되는 이유다. 움직이는 속성은 transform·opacity·color 만 쓴다(레이아웃을
   다시 계산하지 않는다). 모션을 끈 사람에게는 아무것도 움직이지 않는다. */
a, button, .chip, .btn-primary, .range-btn, .index-card, .board a {
  transition: color .16s ease, background-color .16s ease,
              border-color .16s ease, transform .1s ease;
}
.chip:active, .btn-primary:active, .range-btn:active, button:active { transform: translateY(1px); }

/* 키보드로 다니는 사람에게 지금 어디인지 보여준다 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 한 단어가 마지막 줄에 혼자 남던 것 — '상한가 6개.' 가 셋째 줄을 혼자 썼다 */
h1, h2, .today-h1, .headline { text-wrap: balance; }
.today-p, .claim, .doc-meta { text-wrap: pretty; }

/* 본문을 읽는 화면에서 한 줄이 너무 길면 눈이 다음 줄을 못 찾는다 */
.today-p, .claim { max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* 본문으로 건너뛰기 — 키보드 사용자가 내비 열몇 개를 매번 지나지 않게 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* 숫자는 본문 글꼴을 쓴다. 고정폭은 '표 안에서 자릿수를 맞추려고' 쓰는 것인데
   tabular-nums 가 이미 그 일을 한다 — 고정폭까지 얹으면 문장 속 숫자가
   터미널 출력처럼 읽힌다('원/달러 1,337.9' 한 줄에 글꼴이 둘이었다).
   고정폭은 진짜 코드인 곳(종목코드·CSV)에만 남긴다. */
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--text-faint); }

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}
.brand-sub {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 1px;
}

.topnav { display: flex; align-items: center; gap: 12px; }
.mainnav { display: flex; align-items: center; gap: 4px; }
.mainnav a {
  font-size: 14px;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;   /* 좁아져도 글자가 세로로 쪼개지지 않는다 */
}
.brand { white-space: nowrap; }
.topnav .btn-mail-top { white-space: nowrap; }
/* 항목 아홉 개가 검색창·메일 버튼과 한 줄에 들어가지 않는 중간 폭 — 내비를 둘째 줄로 내리고 가로 스크롤 */
@media (max-width: 1100px) {
  .brand-sub { display: none; }
  .search { max-width: 240px; }
  .mainnav a { padding: 6px 8px; font-size: 13px; }
}
@media (max-width: 960px) and (min-width: 641px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding-bottom: 8px; }
  .search { order: 1; flex: 1; max-width: none; }
  .topnav { order: 2; }
  .mainnav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { flex: 0 0 auto; }
}
.mainnav a:hover { color: var(--text); background: var(--bg-panel-2); }
.theme-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  width: 34px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
/* 보이는 상자는 34px 그대로 두고 **눌리는 범위**만 44px 로 넓힌다(WCAG 2.2 Target Size).
   버튼 자체를 키우면 상단바 높이가 따라 늘어난다 — 손가락이 닿는 곳만 키우면 된다. */
.theme-btn { position: relative; }
.theme-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

.theme-btn:hover { color: var(--text); border-color: var(--text-faint); }
.theme-btn .sun { display: none; }
[data-theme="light"] .theme-btn .sun { display: inline; }
[data-theme="light"] .theme-btn .moon { display: none; }

/* 메인 최상단 — 오늘 시장 한 줄 + 시황으로 가는 길 */
.hero { margin-bottom: 22px; }
.hero-headline { margin-bottom: 12px; font-size: 17.5px; color: var(--text); }
.hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14.5px;
  padding: 9px 16px;
  border-radius: 8px;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-share {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
}
.btn-share:hover { color: var(--text); border-color: var(--text-faint); }
.btn-share::before { content: "↗ "; color: var(--accent); }
.stock-id .btn-share { margin-left: auto; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px var(--shadow);
  z-index: 50;
}
.toast[hidden] { display: none; }
.asof {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}
.back { font-size: 14.5px; color: var(--text-dim); }
.back:hover { color: var(--text); }

.page { max-width: 1400px; margin: 0 auto; padding: 26px 22px 64px; }

/* mock 데이터 경고 — 난수를 실제 수급으로 오해하면 그대로 매매 판단에 들어간다 */
.mock-banner {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 13.5px;
  padding: 11px 22px;
  text-align: center;
}
.mock-banner strong {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 4px;
  padding: 1px 7px;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
}

.period-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.period-note { font-size: 13px; color: var(--text-faint); margin-left: 4px; }

/* ------------------------------------------------------------- sections */

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.section-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.section-sub { font-size: 13px; color: var(--text-faint); }
.section-more { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.section-more:hover { color: var(--accent); }

/* 마감 시황 · 목록 페이지 */
.daily-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.daily-title h1 { font-size: 24px; margin: 0 0 2px; letter-spacing: -0.4px; }
.daily-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.headline {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 24px;
}
.boards-2 { grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
.stock-summary {
  max-width: 900px;
  margin: 10px 0 18px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
}
.perf { margin-bottom: 22px; }
.fin { margin-top: 18px; }
.fin-table { max-width: 620px; margin-top: 10px; }
.btn-mail::before { content: "✉ "; }
.sub-form { display: grid; gap: 14px; max-width: 520px; margin: 18px 0 8px; }
.sub-form label { display: grid; gap: 6px; font-size: 14px; color: var(--text-dim); }
.sub-form input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.sub-form input:focus { outline: none; border-color: var(--accent); }
.sub-form .btn-primary { border: 0; cursor: pointer; font-family: inherit; justify-self: start; }
.form-error { color: var(--pos); font-weight: 600; }
.form-ok { color: var(--accent); font-weight: 600; }
.subscribe form + form { margin-top: 10px; }
.perf-table { max-width: 720px; }
.perf-table caption { caption-side: top; text-align: left; padding: 2px 10px 8px;
                      color: var(--text-dim); font-size: var(--fs-5); white-space: normal; }
.perf-table th, .perf-table td { padding: 8px 10px; }
.board-wide { margin-top: 8px; }
.board-wide .rank-table { font-size: 14px; }
.board-wide .tag { margin-left: 6px; font-size: 11px; }
@media (max-width: 900px) {
  .boards-2 { grid-template-columns: 1fr; }
}
.section-sub strong { color: var(--accent); font-weight: 600; }

.muted-block {
  color: var(--text-dim);
  font-size: 14.5px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0;
}

/* ------------------------------------------------- 시장 요약 (최상단) */

.markets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.market-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 13px;
}

/* --- 헤더: 지수 + 등락률 + 추세 스파크라인 --- */

.market-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.market-id { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.market-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}
.market-index { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; }
.market-chg { font-size: 14px; font-weight: 600; }

/* 지수는 숫자만으로 방향이 안 보인다. 추세선을 옆에 붙여 한눈에 읽히게 한다. */
.spark {
  width: 108px;
  height: 30px;
  flex: none;
  overflow: visible;
}
.spark polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* --- 수급: 0 을 가운데 둔 발산형 막대 --- */

.flows {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.flow-row { display: flex; align-items: center; gap: 10px; }
/* 개인은 외인·기관의 잔량에 가까워 같은 비중으로 보일 이유가 없다. */
.flow-row.is-weak { opacity: 0.62; }

.flow-name {
  width: 44px;
  flex: none;
  font-size: 12.5px;
  color: var(--text-dim);
}

.flow-bar {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 12px;
  position: relative;
}
/* 가운데 0 기준선 */
.flow-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--border);
}
.bar-side { flex: 1; display: flex; height: 100%; min-width: 0; }
.bar-side.left { justify-content: flex-end; }
.bar-side i {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.bar-side.left i  { background: var(--neg); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bar-side.right i { background: var(--pos); border-top-left-radius: 0; border-bottom-left-radius: 0; }

.flow-num {
  width: 86px;
  flex: none;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
}

.market-foot {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-faint);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.market-foot b { color: var(--text-dim); font-weight: 700; }
.market-card { cursor: pointer; }
.market-more { color: var(--text-dim); text-decoration: none; }
.market-more:hover { text-decoration: underline; }

@media (max-width: 460px) {
  .market-index { font-size: 22px; }
  .spark { width: 72px; }
  .flow-num { width: 74px; font-size: 14px; }
}

/* ------------------------------------------------------ 수급 급변 카드 */

.surge { margin-bottom: 32px; }

.surge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

.surge-card {
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: background 0.12s, transform 0.12s;
}
.surge-card:hover { background: var(--bg-panel-2); transform: translateY(-1px); }
.surge-card.to-buy  { border-left-color: var(--pos); }
.surge-card.to-sell { border-left-color: var(--neg); }

.surge-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.surge-name { font-weight: 700; font-size: 16px; }
.surge-badge {
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.surge-flip { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-top: 5px; }
.to-buy  .surge-flip { color: var(--pos); }
.to-sell .surge-flip { color: var(--neg); }

.surge-nums {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 14px;
}
.surge-nums .arrow { color: var(--text-faint); }
.surge-nums .unit { font-size: 12px; color: var(--text-faint); }

.surge-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}

/* --------------------------------------------------------- 순매수 상위 */

.boards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.board {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 12px;
}

.rank-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rank-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 0 7px 10px;
  border-bottom: 1px solid var(--border);
}
.rank-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.rank-table tbody tr:last-child { border-bottom: none; }
.rank-table tbody tr:hover { background: var(--bg-panel-2); }
.rank-table td { padding: 11px 7px; }

.c-rank { width: 28px; color: var(--text-faint); font-family: var(--mono); font-size: 13px; }
.c-num  { text-align: right; white-space: nowrap; }
.c-name a { font-weight: 600; font-size: 15px; }
.c-name a:hover { color: var(--accent); }
.c-name .code {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* --------------------------------------------------------- 종목 상세 */

.stock-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.stock-id { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.stock-id h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.stock-id .code { font-family: var(--mono); font-size: 15px; color: var(--text-dim); }
.tag {
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

.stock-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-panel);
}
.stat-label { font-size: 12.5px; color: var(--text-dim); }
.stat-value { font-size: 18px; font-weight: 700; }
.stat-value em { font-style: normal; font-size: 11.5px; color: var(--text-faint); margin-left: 2px; }

/* ------------------------------------------------------------ 3단 차트 */

.chart-stack {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pane { position: relative; border-bottom: 1px solid var(--border); }
.pane:last-of-type { border-bottom: none; }

.pane-label {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 3;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  pointer-events: none;
}
.pane-hint { font-weight: 400; color: var(--text-faint); margin-left: 4px; }
/* 마우스 위치의 값 읽기. 트레이딩뷰처럼 pane 왼쪽 위에 한 줄로 얹는다. */
.readout {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.readout b { color: var(--text); font-weight: 600; }
.readout i { font-style: normal; }
.readout .sep { color: var(--text-faint); margin: 0 5px; }
@media (max-width: 640px) {
  .readout { white-space: normal; font-size: 11px; }
}
/* 마우스를 따라다니는 값 상자 */
.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--tip-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 6px 18px var(--shadow);
}
.chart-tip b { color: var(--text); font-weight: 600; }
.chart-tip i { font-style: normal; }
.chart-tip[hidden] { display: none; }
@media (hover: none) {
  .chart-tip { display: none !important; } /* 터치 화면은 고정 줄로 읽는다 */
}
/* 수급 pane 은 좌측에 공매도 비중 축이 하나 더 있어 라벨을 그만큼 밀어준다. */
.pane-supply .pane-label { left: 60px; }

.pane-price  .pane-chart { height: 380px; }
.pane-volume .pane-chart { height: 120px; }
.pane-supply .pane-chart { height: 220px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 14px; height: 2.5px; border-radius: 2px; }

.chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  color: var(--text-faint);
  font-size: 13px;
  z-index: 5;
}
.chart-loading.is-hidden { display: none; }

.range-bar { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.range-label { font-size: 13px; color: var(--text-faint); margin-right: 4px; }
/* 차트는 <button>, 메인 집계기간은 <a> 로 쓰므로 둘 다 같게 보이도록 한다. */
.range-btn {
  display: inline-block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.range-btn:hover { color: var(--text); border-color: var(--text-faint); }
.range-btn.is-active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------- 기타 */

.empty-state { text-align: center; padding: 90px 20px; }
.empty-code { font-size: 34px; font-weight: 800; color: var(--text-faint); font-family: var(--mono); }
.empty-msg { color: var(--text-dim); margin: 14px 0 24px; line-height: 1.8; font-size: 15px; }
.empty-msg code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
}
.btn {
  display: inline-block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 16px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.btn:hover { color: var(--text); }

.footer {
  border-top: 1px solid var(--border);
  padding: 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
}
.footer .dot { margin: 0 6px; }

/* ------------------------------------------------------------ 반응형 */

@media (max-width: 980px) {
  .boards { grid-template-columns: 1fr; }
  .pane-price .pane-chart { height: 300px; }
}

@media (max-width: 560px) {
  .page { padding: 16px 12px 40px; }
  .surge-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .stock-id h1 { font-size: 19px; }
}


/* --------------------------------------------------------- 검색 / 문서 */

.search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 320px;
  margin: 0 auto;
}
.search input {
  flex: 1;
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus {
  outline: none;
  border-color: var(--accent);
}
.search button {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.search button:hover { color: var(--text); border-color: var(--text-faint); }

.doc { max-width: 760px; margin: 0 auto; }
.doc h1 { font-size: 26px; margin: 0 0 24px; letter-spacing: -0.4px; }
.doc h2 {
  font-size: 17px;
  margin: 32px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.doc p { color: var(--text-dim); margin: 0 0 14px; }
.doc strong { color: var(--text); }
.doc ul { color: var(--text-dim); padding-left: 20px; margin: 0 0 14px; }
.doc li { margin-bottom: 7px; }
.doc a { color: var(--accent); text-decoration: underline; }
.doc-meta { font-size: 13px; color: var(--text-faint); margin-top: 28px; }

.footer-links {
  display: flex;
  justify-content: center;
  /* 항목이 열한 개 — 좁은 화면에서 줄바꿈이 없으면 링크마다 글자가 세로로 쪼개진다 */
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 10px;
}
.footer-links a { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.footer-links a:hover { color: var(--text); }
.footer p { margin: 0; }

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  /* 항목이 아홉 개라 좁은 화면에선 한 줄로 가로 스크롤 — 글자가 세로로 쪼개지면 안 된다 */
  .mainnav { order: 3; width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { padding: 4px 10px; flex: 0 0 auto; white-space: nowrap; }
  .search { order: 3; max-width: none; width: 100%; margin: 0; }
}

/* ── 공개 제한 안내 ─────────────────────────────────────────────
   데이터 제공처 약관상 공개할 수 없는 영역. 자리를 비워두면 '고장난
   화면' 으로 보이므로 왜 비었는지를 그 자리에 적는다. */
.notice-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.notice-card h2 { font-size: 1.05rem; margin: 0 0 8px; }
.notice-card p { margin: 0; color: var(--text-faint); line-height: 1.6; }

.pane-supply.is-restricted { display: none; }

.unlock-form { display: flex; gap: 8px; margin-top: 14px; }
.unlock-form input {
  flex: 1;
  max-width: 260px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: inherit;
}
.unlock-form button {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: inherit;
  cursor: pointer;
}

/* ── 종목 상세: 시세 파생 지표 ─────────────────────────────── */
.indicators { margin-top: 18px; }
.indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ind {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ind-label { font-size: 0.78rem; color: var(--text-faint); }
.ind-value { font-size: 1.05rem; font-weight: 600; }
.ind-value em { font-style: normal; font-size: 0.78rem; color: var(--text-faint); margin-left: 2px; }
.ind-sub { font-size: 0.75rem; color: var(--text-faint); }

/* 봉 단위 버튼 — 기간 버튼과 같은 줄에서 구분되게 */
.tf-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
}
.tf-btn.is-active {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: var(--accent);
}
.range-label-gap { margin-left: 14px; }

/* 가격 pane 의 이평선 범례와 로그 토글 */
.ma-legend { margin-left: 10px; font-size: 0.75rem; }
.ma-legend i { font-style: normal; margin-right: 8px; }
.ma5 { color: var(--ma5); }
.ma20 { color: var(--ma20); }
.ma60 { color: var(--ma60); }
.ma120 { color: var(--ma120); }
.scale-btn {
  float: right;
  padding: 2px 10px;
  font-size: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.scale-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================ 리모델링 — 오늘(메인) */
:root { --fs-1: 28px; --fs-2: 20px; --fs-3: 16px; --fs-4: 14px; --fs-5: 12px; }
.sub { font-size: var(--fs-5); color: var(--text-faint); }
.strong { font-weight: 600; }
.accent { color: var(--accent); }
.h-section { margin: 0; font-size: var(--fs-2); font-weight: 700; letter-spacing: -0.3px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-5); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
  background: transparent; font-family: inherit; cursor: pointer; line-height: 1.5;
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip-accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn-small { font-size: 13px; padding: 7px 12px; }

.today-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.today-lead {
  grid-column: span 7; background: var(--bg-panel); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 22px 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.today-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.today-date { font-size: var(--fs-5); color: var(--accent); font-weight: 600; letter-spacing: 0.4px; }
.today-actions { margin-left: auto; display: flex; gap: 6px; }
.today-h1 { margin: 0; font-size: var(--fs-1); line-height: 1.35; font-weight: 700; letter-spacing: -0.5px; }
.today-p { margin: 0; font-size: var(--fs-3); color: var(--text-dim); line-height: 1.7; }
.today-lead .chips { margin-top: auto; }

/* 히어로 안에 '읽는 것' 과 '누르는 것' 이 같은 알약을 쓰고 있었다. 상승·하락·거래대금은
   사실이고 업종별 등락·주요 공시는 문이다 — 둘이 같아 보이면 어느 쪽이 링크인지
   읽는 사람이 눌러 봐야 안다. 사실은 바로 아래 매크로 줄과 같은 모양으로 두고,
   테두리는 누를 수 있는 것만 가진다. */
.today-lead > .chips:not(.section-links) { gap: 4px 18px; }
.today-lead > .chips:not(.section-links) .chip {
  border: 0; background: transparent; padding: 0; border-radius: 0;
  font-size: var(--fs-4); cursor: default;
}
.today-lead > .chips:not(.section-links) .chip:hover { color: var(--text-dim); }
/* 등락색은 뜻이 있으므로 건드리지 않는다 */
.today-lead > .chips:not(.section-links) .chip b:not(.pos):not(.neg) { color: var(--text); }
.section-links { margin-top: 6px; }
.macro-strip { display: flex; gap: 14px 18px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: var(--fs-5); }
.macro-item { display: inline-flex; align-items: baseline; gap: 6px; }
.macro-item b { font-size: var(--fs-4); color: var(--text); }
/* 구분자를 인라인 '·' 로 두면 줄 끝에 매달린다 — gap 이 대신한다 */
.index-val { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; }
.index-val .metric { white-space: nowrap; }
.index-chg .sub { white-space: nowrap; }
.index-val b { color: var(--text-dim); }
.today-indices { grid-column: span 5; display: flex; flex-direction: column; gap: 16px; }
.index-card {
  /* 범례(.pct-note)가 flex 세 번째 자식이라 스파크라인 옆에서 폭을 빼앗았다 —
     라벨과 값이 쪼개지고 밸류에이션이 4줄로 늘었다. 범례는 카드 하단 전체 폭으로 내린다. */
  flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 22px;
}
.today-indices .pct-note { margin: 2px 0 0; }
.index-card:hover { background: var(--bg-panel-2); }
.index-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.index-name { font-size: var(--fs-5); font-weight: 700; letter-spacing: 0.6px; color: var(--text-dim); }
.index-value { font-size: var(--fs-1); font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; }
.index-chg { font-size: var(--fs-4); font-weight: 600; }
.spark-lg { width: 140px; height: 44px; }

.signals { margin-bottom: 28px; }
/* 신고가·거래대금 급증·신저가 셋. 신저가가 빠져 있어 공유 카드와 화면이 갈렸다 */
.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 3열이 되면 카드 하나가 400px 남짓이다. 52주 카드는 한 행에 이름·태그·전고가
   대비·종가·등락률 다섯이 들어가는데 그 폭에서는 이름이 세 줄로 쪼개진다
   ('마이크로 / 컨텍솔 / 098120'). 좁은 화면에 쓰던 압축을 여기에도 건다 —
   값은 그대로 두고 값이 아닌 것부터 줄인다(코드·되풀이 라벨은 감추고 태그는 두 글자). */
/* 미디어쿼리를 걸지 않는다 — 좁은 화면(≤640)에도 같은 압축이 이미 걸려 있어서
   min-641 로 감싸면 두 블록이 전 구간을 덮을 뿐이다. 아래 ≤640 블록은 홈 밖의
   단독 .signal-card 용으로 남는다. */
.signal-grid .signal-card .rank-table .c-name .code.inline { display: none; }
.signal-grid .signal-card .rank-table .pill-label { display: none; }
.signal-grid .signal-card .rank-table .tag-long { display: none; }
.signal-grid .signal-card .rank-table .tag-short { display: inline; }
/* 이름은 남는 폭을 받되 단어 중간에서 끊지 않는다 */
.signal-grid .signal-card .rank-table .c-name { word-break: keep-all; }
.signal-card { padding: 16px 20px 10px; }
.signal-card .section-head { margin-bottom: 6px; }
.signal-card h3 { margin: 0; font-size: var(--fs-3); font-weight: 700; }
.signal-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: var(--fs-5); color: var(--text-faint); }
/* 색만으로 링크를 구분하면 저시력 사용자가 못 찾는다 — 밑줄을 같이 준다 */
.signal-foot a { margin-left: 6px; color: var(--text-dim); text-decoration: underline;
                 text-underline-offset: 2px; }
.rank-table.compact { font-size: var(--fs-4); }
.rank-table.compact td { padding: 8px 6px; }
.rank-table.compact .c-name a { font-size: var(--fs-4); }
.hub-card .unit { margin-left: 1px; font-size: var(--fs-5); color: var(--text-faint); font-weight: 400; }
.code.inline { display: inline; margin-left: 4px; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.rank-table td.strong { font-weight: 600; }
.pill {
  display: inline-block; font-size: var(--fs-5); color: var(--text-dim);
  background: var(--bg-panel-2); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 1px 8px; white-space: nowrap;
}

.ranks { margin-bottom: 24px; }
/* align-items:start — 접힌 카드가 열린 카드의 행 높이만큼 늘어나면
   '내용 없는 빈 상자' 로 보인다. 카드는 제 내용만큼만 높으면 된다. */
.rank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rank-acc { padding: 12px 18px 8px; }
.rank-acc summary { list-style: none; display: flex; align-items: baseline; gap: 10px; cursor: default; }
.rank-acc summary::-webkit-details-marker { display: none; }
.rank-title { font-size: var(--fs-4); font-weight: 700; }
.rank-peek { display: none; }

.today-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
/* 옆에 있던 아카이브 상자를 지웠다(같은 링크가 히어로와 내비에 이미 있었다).
   비는 폭은 메일 CTA 가 받는다 — 이 화면에서 유일한 전환 지점인데 5칸에 눌려 있었다. */
.cta-strip { grid-column: span 12; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-color: var(--accent); }
.cta-strip > div { display: flex; flex-direction: column; gap: 2px; }
.archive-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.archive-month { padding: 14px 18px; }
.archive-month h2 { margin: 0 0 8px; font-size: var(--fs-4); color: var(--text-dim); }

/* ============================================================ 리모델링 — 종목 상세 */
.stock-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.stock-lead { display: flex; flex-direction: column; gap: 6px; max-width: 820px; min-width: 0; }
.stock-lead .stock-summary { margin: 0; font-size: var(--fs-4); }
.stock-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.price-row { display: flex; align-items: baseline; gap: 12px; }
.price { font-size: 34px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; }
.price-chg { font-size: var(--fs-3); font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.price-chg.pos { background: var(--pos-soft); }
.price-chg.neg { background: var(--neg-soft); }
.supply-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; }
.chart-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-panel-2);
}
.toolbar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.toolbar-share { margin-left: auto; padding: 5px 12px; font-size: 13px; }
.chart-toolbar .range-btn, .chart-toolbar .tf-btn { padding: 5px 12px; font-size: 13px; }
.chart-toolbar .scale-btn { float: none; padding: 5px 12px; font-size: 13px; border-radius: 7px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.detail-card { padding: 16px 20px; }
.detail-card .section-head { margin-bottom: 6px; }
.detail-card h2 { margin: 0; font-size: var(--fs-3); font-weight: 700; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-4); }
.kv:last-child { border-bottom: none; }
.kv > span:first-child { color: var(--text-dim); }
.kv b { font-weight: 600; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg-panel-2); border-radius: 8px; }
.kpi .num { font-size: 18px; font-weight: 700; }
.kpi em { font-style: normal; font-size: var(--fs-5); color: var(--text-faint); margin-left: 2px; }
.fin-hist { margin-top: 10px; }
.signal-history { margin-top: 16px; }
.perf-table thead th .sub { display: block; font-weight: 400; }

/* ============================================================ 모바일 탭바 · 접힘 */
.tabbar { display: none; }
@media (max-width: 640px) {
  .btn-mail-top { display: none; }
  /* 내비가 두 벌이었다 — 상단 6개와 하단 탭바. 헤더가 첫 화면의 36%를 먹어
     정작 오늘의 헤드라인이 접힘 아래에서 시작했다. 모바일에서는 하단 탭바
     하나만 둔다. 링크는 HTML 에 그대로 남아 크롤러 경로는 줄지 않는다. */
  .mainnav { display: none; }
  .topbar { flex-wrap: nowrap; gap: 10px; padding: 10px 14px; }
  .brand { flex: 0 0 auto; }
  .search { order: 0; flex: 1 1 auto; max-width: none; margin: 0; min-width: 0; }
  /* 엔터로 보낸다 — 모바일 키보드는 검색 입력에 검색 키를 띄운다 */
  .search button { display: none; }
  .topnav { order: 1; flex: 0 0 auto; }
  /* '다음 갱신 9월 11일(금) 오전 11시 30분 전후' 가 두 줄을 먹는다. 좁은 화면에서는
     '1영업일 전 데이터' 만 — 다음 갱신 시각은 title 과 /method 에 그대로 있다. */
  .fresh-next { display: none; }
  /* minmax(200px,·) 이라 375px 에서 한 열이 된다 — 카드 넷이 화면을 다 먹고
     정작 요점인 표가 660px 아래로 밀렸다. 숫자가 짧으니 두 열로 충분하다. */
  .scale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .scale-item { padding: 10px 12px; }
  .scale-item b { font-size: 20px; }
  .today-hero, .today-foot { grid-template-columns: 1fr; }
  .today-lead, .today-indices, .cta-strip { grid-column: auto; }
  .today-lead { padding: 16px; }
  .today-h1 { font-size: var(--fs-2); }
  .today-p { font-size: var(--fs-4); }
  .today-actions { margin-left: 0; width: 100%; }
  /* 카드 하나에 밸류에이션 4항목 + 백분위 범례가 들어간다 — 170px 로는 안 되므로 한 열 */
  .today-indices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .index-card { padding: 12px 14px; grid-template-columns: minmax(0, 1fr); }
  .index-value { font-size: var(--fs-2); }
  .spark-lg { display: none; }
  /* minmax(0,1fr) — 1fr 은 최소 폭이 내용(긴 종목명 표)이라 카드가 화면을 밀어 좌우 스크롤이 생긴다 */
  .signal-grid, .rank-grid, .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .signal-card { min-width: 0; overflow-x: auto; }
  /* width 100% + max-width 0 — 숫자 열이 먼저 자리를 잡고 종목명이 남는 폭에서 말줄임된다 */
  /* 종목명 열만 말줄임 — 과거 성과·재무 이력 표의 라벨 열(perf-table, fin-hist)은 제외 */
  .rank-table:not(.perf-table):not(.fin-hist) .c-name { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 다만 목록 페이지의 표는 예외다 — 아래 .board-wide 규칙이 이름을 접는다.
     '티에스…' '마이크…' 처럼 잘리면 어느 종목인지 알 수가 없는데, 이 화면은
     그걸 보러 온 화면이다. 자리는 머리글에서 나온다(값보다 머리글이 넓었다). */
  /* 종목명이 '남는 폭' 을 받는 구조라, 오른쪽 셀이 길면 이름이 0px 로 사라진다 —
     52주 신고가 카드가 그랬다(태그 + '직전 최고 대비 +1.7%' 가 폭을 다 먹음).
     값은 그대로 두고 값이 아닌 것부터 줄인다: 코드·되풀이 라벨은 감추고 태그는 두 글자. */
  /* 제목·설명·'전체 ›' 를 한 줄에 욱여넣으면 설명이 두 줄로 쪼개지고 링크 화살표만
     다음 줄로 떨어진다. 제목과 링크를 한 줄에 두고 설명을 아래로 내린다. */
  .signal-card .section-head { flex-wrap: wrap; }
  .signal-card .section-head h3 { flex: 0 0 auto; }
  .signal-card .section-head .section-more { order: 2; }
  .signal-card .section-head .section-sub { order: 3; flex: 1 0 100%; }
  .signal-card .rank-table .c-name .code.inline { display: none; }
  .signal-card .rank-table .pill-label { display: none; }
  .signal-card .rank-table .tag-long { display: none; }
  .signal-card .rank-table .tag-short { display: inline; }
  /* 목록 페이지(6열) — 시장 태그는 생략하고 마지막 값 열은 줄바꿈을 허용해 375px 에 맞춘다 */
  .board-wide { padding: 12px 10px 8px; }
  .board-wide .rank-table { font-size: 13px; }
  .board-wide .rank-table td, .board-wide .rank-table th { padding: 8px 4px; }
  .board-wide .rank-table .c-name .tag { display: none; }
  /* 시장 태그(KOSPI/KOSDAQ)는 접어도 되지만 종가 돌파·장중만 은 이 목록의 핵심 구분이다 —
     신고가 판정이 고가 기준이라 둘을 갈라 두었는데 좁은 화면에서 통째로 사라져 있었다 */
  .board-wide .rank-table .c-name .tag-breakout,
  .board-wide .rank-table .c-name .tag-wick { display: inline-block; }
  .board-wide .rank-table td:last-child, .board-wide .rank-table th:last-child { white-space: normal; }
  /* 종목명은 잘리는 대신 접힌다. 한글 이름은 두 줄이면 다 들어간다 */
  .board-wide .rank-table .c-name {
    width: auto; max-width: none; overflow: visible;
    white-space: normal; word-break: keep-all;
  }
  /* 머리글 '거래대금(억)' 이 78px 을 먹는데 값은 40px 이었다 — 머리글이 값보다 넓으면
     그 폭은 종목명에서 뺏어 온 것이다. 머리글만 접는다(keep-all 로 '거래대금' 은 붙여서). */
  .board-wide .rank-table thead th.c-num { white-space: normal; word-break: keep-all; }
  .board { min-width: 0; overflow-x: auto; }
  .rank-acc summary { cursor: pointer; }
  .rank-acc summary::after { content: "▾"; margin-left: auto; color: var(--text-faint); }
  .rank-acc[open] summary::after { content: "▴"; }
  .rank-acc summary .section-more { display: none; }
  .rank-peek { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .rank-acc:not([open]) summary { padding: 6px 0; }
  .stock-top { flex-direction: column; gap: 10px; }
  .stock-price { align-items: flex-start; }
  .price { font-size: 28px; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toolbar-share { margin-left: 0; }
  body { padding-bottom: 64px; }
  .tabbar {
    /* 관심을 더해 다섯 칸이 됐다. 4로 두면 다섯째가 둘째 줄로 접혀
       탭바가 두 겹이 되고 본문 아래가 가려진다. */
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--bg-panel); border-top: 1px solid var(--border); padding: 6px 0 10px;
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--text-faint); min-height: 44px; justify-content: center; }
  .tabbar a:hover { color: var(--text); }
}


/* ---- 범용 선 차트 · 시장 폭 · 환율 · 주간 · 비교 ---- */
.lines-wrap { padding: 12px 14px 14px; margin-top: 16px; }
.lines-wrap .chart-toolbar { margin-bottom: 8px; }
.lines-wrap .chart-toolbar .sub { margin-left: 6px; }
.lines-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; min-height: 22px; margin-bottom: 6px; font-size: var(--fs-5); color: var(--text-dim); }
.lines-legend .lines-time { font-family: var(--mono); color: var(--text-faint); }
.lines-key { display: inline-flex; align-items: center; gap: 6px; }
.lines-key i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.lines-key b { color: var(--text); }
#lines-chart { width: 100%; min-height: 300px; }
.lines-loading { font-size: var(--fs-5); color: var(--text-faint); padding: 6px 0; }
.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.stat-grid-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid .kpi { text-decoration: none; color: inherit; }
.stat-grid a.kpi:hover { background: var(--bg-panel); outline: 1px solid var(--border); }
.macro-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.macro-card { text-decoration: none; color: inherit; }
.macro-card.is-active { outline: 2px solid var(--accent); }
.macro-card:hover { background: var(--bg-panel); }
.repeat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.repeat-grid h3 { margin: 0 0 8px; font-weight: 600; }
.compare-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 14px; }
.compare-add { display: inline-flex; gap: 6px; align-items: center; }
.compare-add input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); color: var(--text); font-size: 14px; min-width: 200px; }
.compare-add input:focus { outline: none; border-color: var(--accent); }
.compare-add .btn-primary { border: 0; cursor: pointer; font-family: inherit; }
.chip-x { margin-left: 4px; color: var(--text-faint); text-decoration: none; }
.chip-x:hover { color: var(--pos); }
.compare-wrap { overflow-x: auto; }
.compare-table th.c-num .code { display: block; margin: 2px 0 0; font-weight: 400; }
.compare-table td.c-name { color: var(--text-dim); white-space: nowrap; }
.csv-btn::before { content: "↓ "; color: var(--accent); }
@media (max-width: 900px) {
  .stat-grid, .stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .macro-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .repeat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .macro-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lines-wrap .chart-toolbar .sub { display: none; }
}

/* ---- 정보 구조: 신호 허브 · 종목 디렉터리 · 종목 페이지 배지 ---- */
.hub-card { display: block; color: inherit; text-decoration: none; }
.hub-card:hover { border-color: var(--text-faint); }
.hub-desc { margin: 0 0 8px; font-size: var(--fs-5); color: var(--text-dim); line-height: 1.5; }
.hub-top { margin: 0; font-size: var(--fs-4); line-height: 1.6; }
.section-links { margin-top: 10px; }
.sector-chips { margin: 0 0 14px; }
.pager { margin-top: 12px; justify-content: center; }
.tag-signal { color: var(--accent); border-color: var(--accent); }
/* 정리매매·상장폐지 — 판정색(앰버)·등락색과 겹치지 않게 경고색을 따로 쓴다 */
.tag-halt { color: var(--warn); border-color: var(--warn); font-weight: 600; }
.halt-notice { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--warn); border-left-width: 4px;
               border-radius: 6px; background: var(--bg-panel-2); font-size: var(--fs-4); line-height: 1.55; }
.halt-notice b { color: var(--warn); }
.board-excluded { margin: 6px 0 0; font-size: var(--fs-5); color: var(--text-faint); line-height: 1.5; }
a.tag:hover { color: var(--text); border-color: var(--text-faint); }
.method-table .method-rule { white-space: normal; color: var(--text-dim); font-size: var(--fs-5); line-height: 1.5; }
.method-table td.c-name:first-child { white-space: nowrap; vertical-align: top; }
@media (max-width: 640px) {
  /* 첫 열 폭은 아래 (0,5,0) 규칙이 잡는다 — 여기 (0,3,0) 은 일반 규칙에 밀려 듣지 않았다 */
  .method-table .method-rule { max-width: none; }
}
/* 종목 디렉터리 — 좁은 화면에서는 거래대금 열을 숨겨 종목명에 자리를 준다 */
.stocks-table td:last-child, .stocks-table th:last-child { white-space: nowrap; }
@media (max-width: 640px) {
  .stocks-table .c-value { display: none; }
}

/* ---- 용어집 · 관심종목 · 허브 카드 ---- */
.glossary { margin: 0 0 8px; }
.glossary dt { font-weight: 700; margin-top: 12px; }
.glossary dd { margin: 4px 0 0; color: var(--text-dim); line-height: 1.6; }
.hub-card-wrap { padding: 0; }
.hub-card-wrap .hub-card { display: block; padding: 16px 20px 10px; color: inherit; }
.hub-card-wrap .hub-perf { margin: 0 20px 12px; }
.watch-add .sub-form { max-width: none; display: flex; align-items: end; gap: 10px; margin: 0; }
.watch-add .sub-form label { flex: 1; }
[data-watch-toggle][aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* ---- 성과 판정 · 데이터 신선도 · 신호 이력 한 줄 ---- */
.verdict { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-5); font-weight: 600;
           border: 1px solid var(--border); color: var(--text-dim); vertical-align: middle; }
.verdict.is-beat, .verdict.pos { color: var(--beat); border-color: var(--beat); }
.verdict.is-avoid, .verdict.neg { color: var(--avoid); border-color: var(--avoid); }
.perf-table + .perf-table { margin-top: 12px; }
.freshness.is-stale { color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 8px; }
.rank-line { margin: 0 0 8px; font-size: var(--fs-4); color: var(--text-dim); }
.chart-loading a { color: var(--accent); }
.chart-loading .chip { margin-left: 4px; }

/* ---- 목록 묶음 · 정렬 · 차트 표시 설정 · 관심종목 이전 ---- */
.screen-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 18px; margin: 0 0 14px; }
.screen-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.screen-group-name { font-size: var(--fs-5); color: var(--text-faint); font-weight: 600; white-space: nowrap; }
.chip-count { margin-left: 4px; font-size: 11px; color: var(--text-faint); }
/* 칩 숫자와 검정표시의 뜻을 한 번만 적는다 — 칩마다 단위를 반복하면 줄이 늘어난다 */
.chip-legend { flex: 1 0 100%; margin: 2px 0 0; font-size: var(--fs-5); color: var(--text-faint); }
.chip-legend b { color: var(--text-dim); font-weight: 600; }
.range-btn.is-active .chip-count { color: var(--on-accent); opacity: 0.85; }
.range-btn.is-empty { opacity: 0.55; }
.chip-verified { margin-left: 3px; font-size: 10px; color: var(--pos); }
.range-btn.is-active .chip-verified { color: var(--on-accent); }
.sortable a { color: inherit; }
.sortable.is-sorted a { color: var(--accent); }
.hub-group { font-size: var(--fs-3); margin: 18px 0 10px; }
.hub-group .sub { font-size: var(--fs-5); font-weight: 400; margin-left: 8px; }
.chart-settings { position: relative; display: inline-block; }
.chart-settings > summary { list-style: none; cursor: pointer; display: inline-block; }
.chart-settings > summary::-webkit-details-marker { display: none; }
.chart-settings-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; gap: 6px; flex-wrap: wrap;
                       padding: 8px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; min-width: 260px; }
.toolbar-grow { flex: 1; }
.pane-volume.is-hidden { display: none; }
.ma-legend .is-off { opacity: 0.35; text-decoration: line-through; }
.chart-note { margin: 6px 0 0; }
.watch-transfer summary { cursor: pointer; font-weight: 600; }
.watch-textarea { width: 100%; box-sizing: border-box; margin: 8px 0; font-family: var(--mono); font-size: 13px;
                  background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
@media (max-width: 640px) {
  .screen-groups { gap: 6px 12px; }
  .chart-settings-menu { left: auto; right: 0; }
}

/* ---- 회피 배너 · 분포 · 업종 히트맵 ---- */
.avoid-banner { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--avoid); background: var(--bg-panel-2); border-radius: 6px; font-size: var(--fs-4); line-height: 1.5; }
.avoid-banner.is-good { border-left-color: var(--beat); }
.dist-line { margin: 6px 0 0; font-size: var(--fs-5); color: var(--text-dim); }
.heat-table .heat-cell { font-weight: 700; }
/* 색이 안 보이면 히트맵이 아니다 — 등락률을 0~±3% 로 눌러 최대 18% 까지 칠한다 */
.heat-table tbody tr { background: color-mix(in srgb, var(--pos) calc(min(var(--heat, 0), 3) * 6%), transparent); }
.heat-table tbody tr[style*="--heat: -"] { background: color-mix(in srgb, var(--neg) calc(max(var(--heat, 0), -3) * -6%), transparent); }
.heat-table .heat-cell { font-weight: 700; }

/* ---- 백분위 · 공시 ---- */
.pctile { display: inline-block; font-size: 10px; margin-left: 3px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-faint); font-weight: 600; font-family: var(--mono); vertical-align: 1px; }
.pct-note { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text-faint); }
.heat-table .thin a { color: var(--text-dim); }
.macro-more { font-size: var(--fs-5); color: var(--text-dim); white-space: nowrap; }
/* 백분위 상·하위 10% 가 아니면 눕힌다 — 매일 같은 크기로 서 있으면 무엇이 특이한지 안 보인다 */
.pctile.is-quiet { color: var(--text-faint); border-color: var(--border-soft); opacity: 0.75; }
.pctile.hot { color: var(--pos); }
.pctile.cold { color: var(--neg); }
.report-nm { white-space: normal; }
.report-nm a { font-weight: 500; font-size: 14px; }
/* 숫자 열 헤더는 본문과 같은 오른쪽 정렬 — .rank-table thead th 의 왼쪽 정렬이 .c-num 을 이기던 것 */
.rank-table thead th.c-num { text-align: right; }

/* ---- 예정 일정 ---- */
.tag-event { color: var(--accent); border-color: var(--accent); }
.cal-day + .cal-day { margin-top: 12px; }
.range-btn.is-static { cursor: default; opacity: 0.85; }

/* ---- 보합·헤더·백분위 범례 ---- */
.flat { color: var(--text-dim); }
.topbar { backdrop-filter: blur(10px); }
/* 줄바꿈·폭은 위 .index-val / .index-card 기본 규칙이 잡는다 */
.pct-note { margin-top: 6px; white-space: normal; }
.index-text { min-width: 0; }

/* ---- 회피 배지 · 판정 근거 · 캘린더 표 · footer 그룹 ---- */
.avoid-badge { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--avoid); border-left-width: 4px;
               border-radius: 6px; background: var(--bg-panel-2); font-size: var(--fs-4); line-height: 1.5; }
.avoid-badge b:first-child { color: var(--avoid); }
/* 승패 분절 바 — 이 표에는 판정색이 없으니 등락색 하나만 쓴다. 숫자 라벨을 항상 같이 둔다 */
.wl { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.wl-bar { display: flex; width: 66px; height: 8px; gap: 2px; }
.wl-bar .w { background: var(--pos); border-radius: 2px 0 0 2px; }
.wl-bar .l { background: var(--neg); border-radius: 0 2px 2px 0; }
.wl-txt { font-size: var(--fs-5); color: var(--text-dim); }
.wl-txt b { font-weight: 600; }
.ev-detail { display: block; margin-top: 3px; font-size: var(--fs-5); color: var(--text-dim); }
.top-inline { display: none; margin-top: 2px; font-size: var(--fs-5); color: var(--text-dim); }
.avoid-chip { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: var(--fs-5);
              font-weight: 600; color: var(--neg); border: 1px solid var(--neg); }
.verdict-basis { font-weight: 400; opacity: 0.75; font-size: 0.85em; }

/* /verify 표의 규칙 한 줄. 목록 이름만으로는 '급락 후 반등' 이 무슨 뜻인지 모른다 */
.verify-rule { display: block; margin-top: 3px; font-size: var(--fs-5); color: var(--text-faint);
               line-height: 1.5; max-width: 46ch; }
@media (max-width: 900px) { .verify-rule { display: none; } }
.cal-table .cal-date-row th { text-align: left; padding: 14px 7px 6px; border-bottom: 1px solid var(--border);
                              font-size: var(--fs-4); color: var(--accent); font-family: var(--mono); }
.cal-table .c-event { width: 150px; }
.cal-table .tag-event { display: inline-block; min-width: 108px; text-align: center; }
.tag-event[data-event="배당기준일"], .tag-event[data-event="배당지급일"] { color: var(--pos); border-color: var(--pos); }
.tag-event[data-event="매매거래정지"] { color: var(--neg); border-color: var(--neg); }
.tag-event[data-event="주주총회"] { color: var(--text-dim); border-color: var(--border); }
.screen-group > summary { cursor: pointer; list-style: none; }
.screen-group > summary::-webkit-details-marker { display: none; }
.screen-group > summary::after { content: " ▾"; color: var(--text-faint); }
.screen-group[open] > summary::after { content: " ▴"; }
.tag-breakout { color: var(--pos); border-color: var(--pos); }
.tag-wick { color: var(--text-faint); }
/* 태그의 짧은 표기(종가/장중). 넓은 화면에서는 긴 쪽만 보인다 — 640px 미디어에서 뒤집는다 */
.tag-short { display: none; }
.footer-group { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.footer-group-name { font-size: 11px; color: var(--text-faint); font-weight: 600; }
/* 규모 — /about. 숫자를 먼저 크게, 무엇의 숫자인지를 아래에 */
.scale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
              gap: 10px; margin: 14px 0 10px; }
.scale-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
              background: var(--bg-panel-2); display: flex; flex-direction: column; gap: 2px; }
.scale-item b { font-size: 22px; color: var(--accent); line-height: 1.2; }
/* 판정 색이 accent 에 덮이면 '하회 11' 과 '상회 3' 이 같은 색으로 보인다 */
.scale-item b.pos { color: var(--pos); }
.scale-item b.neg { color: var(--neg); }
.scale-item span { font-size: var(--fs-5); color: var(--text-dim); }
.scale-item .sub { color: var(--text-faint); }

/* 사실 칩(상승 1,425)과 링크 칩(업종별 등락)이 같은 모양이라 섞여 보였다.
   링크에만 화살표를 붙여 '누를 것' 과 '읽을 것' 을 가른다. */
.section-links .chip::after { content: " ›"; color: var(--text-faint); }

/* 인용 문장 — 목록 화면 도입부. 아래 표와 같은 숫자지만 문장이어야 인용된다 */
.claim { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--border);
         background: var(--bg-panel-2); border-radius: 0 6px 6px 0;
         font-size: var(--fs-4); line-height: 1.65; color: var(--text-dim); }
.claim.is-avoid { border-left-color: var(--avoid); }
.claim.is-avoid b:first-child { color: var(--avoid); }

/* 시각별 막대 (/traffic). 값을 읽는 그래프가 아니라 '언제 한산한가' 만 보면 되므로
   축도 눈금도 두지 않는다 — 막대 높이와 가장 낮은 칸 하나면 충분하다. */
.hour-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.hour-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
            justify-content: flex-end; align-items: center; height: 100%; }
.hour-bar i { display: block; width: 100%; min-height: 1px; background: var(--text-faint);
              border-radius: 2px 2px 0 0; }
.hour-bar b { font-size: 9px; font-weight: 400; color: var(--text-faint); font-family: var(--mono); }
.hour-bar.is-quiet i { background: var(--accent); }
.hour-bar.is-quiet b { color: var(--accent); font-weight: 700; }

/* 접힌 사이트맵. 펼치기 전에는 한 줄이고, 펼치면 그룹이 세로로 쌓인다 */
.footer-map { margin: 0 0 12px; }
.footer-map > summary { cursor: pointer; list-style: none; font-size: 12px; color: var(--text-faint); }
.footer-map > summary::-webkit-details-marker { display: none; }
.footer-map > summary::after { content: " ▾"; }
.footer-map[open] > summary::after { content: " ▴"; }
.footer-map-body { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.footer-map-body .footer-group { justify-content: center; }
.footer-map-body a { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.footer-map-body a:hover { color: var(--text); }
/* 에이전트 접점 줄 — 사람용 링크(.footer-links)보다 한 단계 흐리게. 늘 보이되
   먼저 읽히지는 않게 한다. `.footer p { margin: 0 }` 이라 간격을 여기서 준다. */
.footer-agents { margin: 0 0 8px !important; font-size: 12px; color: var(--text-faint); }
.footer-agents a { color: var(--text-dim); white-space: nowrap; }
.footer-agents a:hover { color: var(--text); }
main.page { min-height: 62vh; }
.alert-line { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--bg-panel-2);
              border-radius: 6px; font-size: var(--fs-5); line-height: 1.5; color: var(--text-dim); }

/* ---- 관심종목 신호 이력 (/my) ---- */
.nav-my { position: relative; }
.watch-count { margin-left: 3px; padding: 0 5px; border-radius: 999px; font-size: 10px;
               background: var(--accent); color: var(--on-accent); font-weight: 700; vertical-align: 1px; }
.my-today-banner { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent);
                   background: var(--bg-panel-2); border-radius: 6px; font-size: var(--fs-4); line-height: 1.5; }
.mix-verdict { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-left-width: 4px;
               border-radius: 6px; background: var(--bg-panel-2); font-size: var(--fs-3); line-height: 1.5; }
.mix-verdict.is-bad { border-left-color: var(--neg); }
.mix-section + .mix-section { margin-top: 18px; }
.mix-section .section-head { align-items: baseline; margin-bottom: 4px; }
.mix-section h3 { margin: 0; font-size: var(--fs-3); font-weight: 700; }
.axis-range { font-size: var(--fs-5); color: var(--text-faint); }
.mix-table .mix-bar-col { width: 26%; }
/* 막대는 단색 — 한 행에 색 체계가 둘 서지 않게. 판정은 배지가, 등락은 숫자가 말한다 */
.mix-bar { display: block; height: 10px; border-radius: 999px; background: var(--text-faint); min-width: 6px; }
.tag-avoid { color: var(--neg); border-color: var(--neg); }
.tag-good { color: var(--pos); border-color: var(--pos); }
.chip-x { margin-left: 4px; border: 0; background: none; color: var(--text-faint); cursor: pointer; font-family: inherit; }
.chip-x:hover { color: var(--neg); }
.preview-box { margin: 14px 0 18px; padding: 14px 16px; border: 1px dashed var(--border);
               border-radius: var(--radius); background: var(--bg-panel-2); }
.preview-head { margin: 0 0 10px; font-size: var(--fs-5); color: var(--text-faint); letter-spacing: 0.4px; }
.preview-box .mix-verdict { background: var(--bg-panel); }
.onboard-chips { align-items: center; gap: 8px; }
.adopt-bar { margin-bottom: 14px; font-size: var(--fs-4); }
.adopt-bar .btn-primary { margin-left: 8px; }
.toast a { color: var(--accent); }
@media (max-width: 640px) { .mix-table .mix-bar-col { display: none; } }

@media (max-width: 640px) {
  /* 좁은 화면에서는 막대 색과 '내 종목' 수치로 충분하다 — 판정·전체평균 열은 접는다 */
  .mix-table .c-verdict, .mix-table .c-allmean, .today-table .c-value { display: none; }
  /* 종목별 표: '회피' 칩이 잘리지 않게 횟수를 접고 목록 이름을 말줄임 */
  /* 종목별 표: c-name 이 두 개라 width:100% 를 서로 다투다 '가장 많이 걸린 목록' 열이
     8px 로 짜부라져 내용이 통째로 잘려 있었다. 좁은 화면에서는 열을 접고
     종목명 아래 한 줄로 내린다 — 판정 칩까지 그대로 보인다. */
  /* 성과 표도 7열이라 라벨 열이 41px 로 눌려 글자가 한 자씩 세로로 쪼개졌다.
     기준선 열(전 종목 평균·확률)을 접으면 나머지가 들어간다 — '시장 대비' 가
     이미 목록 평균 − 전 종목 평균이라 뜻은 남는다(각주에 설명이 있다). */
  .perf-table .c-mkt { display: none; }
  .perf-table .c-name { width: auto; max-width: none; white-space: nowrap; }
  /* 목록 페이지의 성과 표는 .board 안이 아니라 섹션에 바로 놓여 스크롤 컨테이너가 없다 —
     min-content 382px 가 페이지를 19px 밀어냈다. 여백을 줄여 들어가게 하고 스크롤은 안전망. */
  .perf-table th, .perf-table td { padding: 8px 5px; }
  .perf { min-width: 0; overflow-x: auto; }

  /* 업종 히트맵은 7열이라 375px 에 안 들어간다 — 업종명이 47px 로 잘리고
     '업종 내 최고' 는 8px 로 사라져 있었다. 이차 지표 둘을 접고 최고 종목은
     업종명 아래로 내린다. 남는 것은 업종·종목수·평균 등락·상승 비율. */
  .heat-table .c-capchg, .heat-table .c-value, .heat-table .c-top-stock { display: none; }
  .heat-table .top-inline { display: block; white-space: nowrap; font-size: var(--fs-5); }
  .rank-table.heat-table:not(.perf-table) .c-name:first-child {
    width: 100%; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 공시 제목·종목명이 8px 로 잘려 있던 표들 — 같은 원인(c-name 여러 개가 width:100% 를 다툼).
     앞 열은 내용 폭 한 줄로 두고, 뒤 c-name 이 남는 폭을 줄바꿈으로 쓴다. */
  /* 구독자 표: 이메일이 길어 상태 열을 8px 로 짜부라뜨린다 — 이메일만 말줄임하고
     상태는 제 내용 폭을 갖는다 */
  /* MCP 도구 표: 도구 이름은 한 줄로 두고 설명이 남는 폭을 줄바꿈으로 쓴다 */
  .rank-table.tool-table .c-name:first-child { width: auto; max-width: none; white-space: nowrap; }
  .rank-table.tool-table .c-name ~ .c-name { width: 100%; max-width: none; white-space: normal; }
  .rank-table.sub-table .c-name:first-child { width: 100%; max-width: 0; overflow: hidden;
                                              text-overflow: ellipsis; white-space: nowrap; }
  .rank-table.sub-table .c-name ~ .c-name { width: auto; max-width: none; white-space: nowrap; }
  .rank-table.disc-table:not(.perf-table) .c-name:first-child,
  .rank-table.method-table:not(.perf-table) .c-name:first-child,
  .rank-table.hits-table:not(.perf-table) .c-name:first-child {
    width: auto; max-width: none; white-space: nowrap; overflow: visible;
  }
  .rank-table.disc-table:not(.perf-table) .c-name ~ .c-name,
  .rank-table.method-table:not(.perf-table) .c-name ~ .c-name,
  .rank-table.hits-table:not(.perf-table) .c-name ~ .c-name {
    width: 100%; max-width: none; white-space: normal; overflow: visible; text-overflow: clip;
  }

  /* 일정 표도 c-name 이 셋이라 종목명이 폭을 다 먹고 유형·공시가 18px 로 잘려 있었다.
     공시명은 종목명 아래로 내리고, 일정 열(태그·금액)이 남는 폭을 쓴다. */
  .cal-table .report-nm { display: none; }
  .cal-table .top-inline { display: block; white-space: normal; }
  .rank-table.cal-table:not(.perf-table) .c-name:first-child {
    width: auto; max-width: none; white-space: nowrap; overflow: visible;
  }
  .rank-table.cal-table:not(.perf-table) .c-event {
    width: 100%; max-width: 0; white-space: normal; overflow: visible; text-overflow: clip;
  }

  /* 종목별·이력 표는 목록 이름을 종목명 아래 한 줄로 내린다 */
  .stock-mix .c-top, .my-timeline .c-list, .today-table .c-siglist,
  .stock-mix .c-rankhits { display: none; }
  .stock-mix .wl-bar { display: none; }
  .stock-mix .top-inline, .my-timeline .top-inline, .today-table .top-inline { display: block; white-space: normal; }
  /* 목록 페이지의 시장 태그를 숨기는 규칙이 이 신호 태그까지 지웠다 — 여기서는 태그가 본문이다 */
  .board-wide .rank-table.today-table .c-name .tag { display: inline-block; }
  /* 앞 열이 width:100% 를 먹어 뒤 c-name 열이 8px 로 짜부라지던 것.
     일반 규칙(.rank-table:not()..) 이 (0,4,0) 이라 같은 무게로 맞춰야 이긴다. */
  .rank-table.today-table:not(.perf-table) .c-name:first-child {
    width: 100%; max-width: none; white-space: nowrap; overflow: visible;
  }
  .rank-table.my-timeline:not(.perf-table) .c-name:first-child {
    width: auto; max-width: none; white-space: nowrap; overflow: visible;
  }

  .today-table .c-name:nth-child(2) .tag { margin: 0 3px 3px 0; }
  .my-timeline .top-inline a { color: var(--text-dim); }
  .mix-table .c-name:first-child { width: auto; max-width: 40vw; }
  .verdict { margin-left: 0; }
}

/* ---- 레짐 (지금 먹히는 규칙) ---- */
.regime-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 6px; background: var(--bg-panel);
  color: var(--text); text-decoration: none; font-size: var(--fs-4);
}
.regime-strip:hover { background: var(--bg-panel-2); }
.regime-strip-k { font-size: var(--fs-5); color: var(--text-faint); letter-spacing: 0.4px; }
.regime-strip-d { color: var(--text-dim); font-size: var(--fs-5); }
.regime-strip-more { margin-left: auto; color: var(--accent); font-size: var(--fs-5); white-space: nowrap; }
.regime-label { margin: 0 0 16px; padding: 12px 15px; border: 1px solid var(--border);
                border-left: 4px solid var(--accent); border-radius: 6px; background: var(--bg-panel-2);
                font-size: var(--fs-2); line-height: 1.4; }
.regime-label .sub { display: block; margin-top: 4px; font-size: var(--fs-5); font-weight: 400; }
.axis-table .top-inline, .regime-table .top-inline { display: none; }
@media (max-width: 640px) {
  /* 축 설명은 이름 아래로, 부수 열은 접는다 */
  .axis-table .c-axisnote, .axis-table .c-axisn, .regime-table .c-rn { display: none; }
  .axis-table .top-inline { display: block; white-space: normal; font-size: var(--fs-5); color: var(--text-dim); }
  .regime-strip-more { margin-left: 0; }
}

/* ---- 오늘 특이한 것 ---- */
.notable { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--border);
           border-left: 4px solid var(--accent); border-radius: 6px; background: var(--bg-panel-2); }
.notable-head { display: block; margin-bottom: 6px; font-size: var(--fs-5); font-weight: 700;
                color: var(--text-faint); letter-spacing: 0.4px; }
.notable-list { margin: 0; padding-left: 16px; display: grid; gap: 6px; font-size: var(--fs-4); line-height: 1.5; }
.notable-list li::marker { color: var(--accent); }
.notable-list a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.notable-list .sub { display: block; font-size: var(--fs-5); color: var(--text-dim); }

.check-row { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 2px; font-size: var(--fs-4); line-height: 1.5; }
.check-row input { margin-top: 3px; }
.check-row .muted { display: block; font-size: var(--fs-5); }
@media (max-width: 640px) {
  /* 일정 유형은 종목명 아래로 */
  .my-cal .c-caltype { display: none; }
  .my-cal .top-inline { display: block; white-space: normal; }
}

/* ---- API 문서 ---- */
.code-block { margin: 0 0 12px; padding: 12px 14px; overflow-x: auto; border-radius: 6px;
              background: var(--bg-panel-2); border: 1px solid var(--border-soft);
              font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--text-dim);
              white-space: pre; }
.json-sample { max-height: 380px; overflow: auto; }
.unit-table .top-inline, .slug-table .top-inline, .flag-table .top-inline { display: none; }
@media (max-width: 640px) {
  .unit-table .c-unitex, .slug-table .c-slugroup, .flag-table .c-flagnote { display: none; }
  .unit-table .top-inline, .slug-table .top-inline, .flag-table .top-inline {
    display: block; white-space: normal; font-size: var(--fs-5); color: var(--text-dim);
  }
  .code-block { font-size: 11.5px; }
}

/* 속보 배지 — 확정치와 눈으로 구분돼야 한다. 브랜드 노랑을 쓰되 판정 색
   (상승 빨강·하락 파랑)과는 섞지 않는다. */
.provisional {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  white-space: nowrap;
}

/* 화면에는 안 보이고 스크린리더만 읽는 텍스트. `display:none` 은 낭독기도
   건너뛰므로 쓸 수 없다. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 기간별 누적 순매수 표 — 차트 바로 아래. 좁은 화면에서 표가 본문을 밀어
   가로 스크롤을 만들지 않도록 제 안에서 넘긴다. */
.supply-sum { overflow-x: auto; margin-top: 14px; }
.supply-sum table { min-width: 320px; }
.supply-sum th[scope="row"] { color: var(--text-dim); font-weight: 500; white-space: nowrap; }

/* 연속 순매수 배지. 순매수 상위표에서 '얼마나' 옆에 '며칠째' 를 붙인다.
   상승 빨강·하락 파랑은 판정 색이라 여기 쓰지 않는다 — 연속은 방향이 아니다. */
.streak {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  line-height: 16px;
  color: var(--text-dim);
  white-space: nowrap;
  vertical-align: 1px;
}

/* 표본 부족 안내 — 판정 배지가 없는 이유를 말한다. 경고가 아니라 설명이라
   경고색을 쓰지 않는다. */
.thin-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--border);
  background: var(--bg-panel);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.thin-note b { color: var(--text); font-weight: 600; }

/* 다음 거래일 일정 — 마감 시황 끝. 표가 아니라 칩 목록이다. 종목 하나에 정보가
   셋(유형·이름·상세)뿐이라 표로 만들면 빈 열이 생긴다. */
.ahead-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ahead-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  min-height: 34px;
}
.ahead-item:hover { border-color: var(--accent); }
.ahead-name { font-weight: 500; }
.ahead-detail { font-size: 12px; }
@media (max-width: 640px) {
  .ahead-item { width: 100%; }
}

/* 이번 주 요약 — 한 주의 마지막 거래일에만 나온다. 지수 칩은 상승 빨강·하락
   파랑을 그대로 쓴다(국내 관행). */
.weekly-wrap { margin-bottom: 28px; }
.week-line { margin: 0 0 12px; max-width: 68ch; }
.week-idx { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.week-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-panel); font-size: 14px;
}
.week-chip b { font-weight: 600; font-size: 13px; color: var(--text-dim); }

/* 다음 주 일정은 날짜별로 끊는다 — 한 줄로 이으면 무슨 요일 건인지 안 보인다. */
.ahead-day {
  margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.ahead-day:first-of-type { margin-top: 0; }
.ahead-more { color: var(--text-dim); cursor: default; }

/* ── 지금 시장 (장중) ─────────────────────────────────────────────
   확정 화면과 눈으로 구분돼야 한다. 색을 하나 더 만들지는 않고, '지금' 이라는
   사실만 점 하나로 말한다. */
.live-hero { margin-bottom: 24px; }
.live-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.live-head h1 { margin: 0; font-size: var(--fs-1); letter-spacing: -0.5px; }
.live-at { display: flex; align-items: center; gap: 6px; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 2.4s ease-in-out infinite; }
}
@keyframes live-pulse { 50% { opacity: .45; } }

.live-warn {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--bg-panel);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.live-warn b { color: var(--text); font-weight: 600; }

.live-boards { display: grid; gap: 16px; }
@media (min-width: 900px) { .live-boards { grid-template-columns: repeat(3, 1fr); } }
.live-boards .board { min-width: 0; overflow-x: auto; }

/* 시장 폭 막대 — 상승 비율. 국내 관행대로 상승이 빨강이다. */
.breadth-bar {
  height: 6px; border-radius: 999px; margin: 10px 0 8px;
  background: var(--neg); overflow: hidden;
}
.breadth-bar .bp { display: block; height: 100%; background: var(--pos); }

/* 좁은 화면에서는 다섯 열이 종목명을 'S…' 로 눌러 버린다. 현재가를 뺀다 —
   등락률이 오늘의 움직임을 말하고, 현재가는 종목 페이지에 있다. */
@media (max-width: 700px) {
  .live-boards .c-price { display: none; }
  .live-boards .c-name { min-width: 0; }
  .live-boards .c-name a,
  .live-boards .c-name .name-plain {
    white-space: normal; word-break: keep-all; overflow: visible;
    text-overflow: clip; max-width: none;
  }
}

/* 링크가 없는 이름(ETF 등)도 링크와 같은 자리·같은 크기로 읽혀야 한다. */
.name-plain { display: inline-block; }

/* ── 소급 검증 대 공개 발행 기록 ────────────────────────────────────
   왼쪽은 복제할 수 있고 오른쪽은 못 한다. 그 대비가 한눈에 읽혀야 한다. */
.record { margin: 20px 0 28px; }
.record-split { display: grid; gap: 14px; }
@media (min-width: 720px) { .record-split { grid-template-columns: 1fr 1fr; } }
.record-col {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.record-col.is-live { border-color: var(--accent); }
.record-label {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .06em;
  color: var(--text-dim); font-weight: 600;
}
.record-col.is-live .record-label { color: var(--accent); }
.record-n { margin: 0 0 8px; font-size: 30px; font-weight: 700; line-height: 1.1; }
.record-n span { font-size: 14px; font-weight: 500; color: var(--text-dim); margin-left: 4px; }
.record-col .sub { margin: 0; font-size: 13px; line-height: 1.6; }

/* 판정 분포 한 줄 — 이 사이트가 파는 문장이다. */
.verdict-line {
  margin: 0 0 24px; padding: 14px 16px;
  border-left: 3px solid var(--neg);
  background: var(--bg-panel); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px; line-height: 1.7; max-width: 68ch;
}

/* 판정 한 줄 — 홈 상단. 레짐 스트립과 같은 모양을 쓰되 테두리를 하락색으로
   둔다: 이 줄이 말하는 건 '대부분 사지 마세요' 이기 때문이다. */
.verdict-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 11px 14px; margin-bottom: 10px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-left: 3px solid var(--neg);
  border-radius: var(--radius);
  text-decoration: none; color: inherit; font-size: 14px;
}
.verdict-strip:hover { border-color: var(--accent); border-left-color: var(--neg); }
.verdict-strip-k { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.verdict-strip-d { color: var(--text-dim); font-size: 13px; }
.verdict-strip-go { margin-left: auto; color: var(--accent); font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) { .verdict-strip-go { margin-left: 0; } }

/* ── 수급 화면 ──────────────────────────────────────────────────
   이 사이트 이름값(매동 = 매매동향). 네 질문을 순서대로 놓는다:
   오늘 누가 샀나 → 얼마나 오래 → 가격을 앞서나 → 그래서 먹혔나. */
.flow-hero { margin-bottom: 22px; }
.flow-cover {
  margin: 10px 0 0; padding: 10px 12px;
  border-left: 2px solid var(--border); background: var(--bg-panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px; color: var(--text-dim); line-height: 1.6;
}
.flow-cover b { color: var(--text); font-weight: 600; }

.flow-boards { display: grid; gap: 14px; }
@media (min-width: 900px) { .flow-boards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .flow-boards.two { grid-template-columns: 1fr 1fr; } }
.flow-boards .board { min-width: 0; overflow-x: auto; }
.flow-board-t { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.flow-note { margin: -4px 0 10px; font-size: 12.5px; }

.flow-today, .flow-lead, .flow-cross, .flow-score { margin-bottom: 30px; }

/* 기간 탭 — 섹션 머리 오른쪽 */
.period-tabs { display: flex; gap: 4px; margin-left: auto; }
.period-tab {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; color: var(--text-dim); text-decoration: none; white-space: nowrap;
}
.period-tab.is-on { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .period-tabs { margin-left: 0; width: 100%; } }

/* 마감 화면의 수급 미리보기 — 전체는 /supply 에 있다. */
.flow-peek { margin-bottom: 28px; }
.flow-peek .board { min-width: 0; overflow-x: auto; }