/* 바탕 · 타이포 · 레이아웃. 칸(`table.css`)과 조건(`controls.css`)은 따로 산다.
 *
 * ⚠️ 이 화면은 **워드프레스에 iframe 으로 들어간다.** 그래서 배경을 반드시 칠한다 —
 *    투명하면 감싼 쪽의 배경이 비쳐 대비가 무너지고, 그 화면은 우리 로그에 200 으로만
 *    남는다. 폰트도 웹폰트를 받지 않는다(iframe 안에서 한 번 더 받는 값이 크다).
 *
 * 색은 **한국 증시 관행**을 따른다: 상승이 빨강, 하락이 파랑. 미국 관행(상승=초록)을
 * 그대로 옮기면 같은 사람이 두 화면에서 반대로 읽는다. */

/* 테마는 `<html data-theme>` **하나**가 정한다 — `theme.js` 가 OS 설정이나 `?theme=`
   에서 읽어 붙인다. `@media (prefers-color-scheme)` 를 CSS 에 직접 두지 않는 이유는
   그 파일 머리말에 있다: 두 자리에 같은 팔레트를 적으면 한쪽만 고친 날 «OS 다크에서만
   옛 색»이 되고, 그 화면은 고친 사람 눈에는 안 보인다. */
:root {
  color-scheme: light;

  --bg: #ffffff;
  --panel: #f7f8fa;
  --line: #e3e6ec;
  --line-soft: #eef0f4;
  --ink: #1a1d23;
  --ink-soft: #5b6472;
  --ink-faint: #8a93a3;

  --up: #d62b2b;      /* 한국 증시: 상승 = 빨강 */
  --down: #1257c9;    /* 하락 = 파랑 */
  --flat: #6b7280;
  --accent: #0f62d6;
  --accent-soft: #e8f0fd;
  --warn: #b45309;

  /* 재무 차트 막대(`fund.js` SERIES) — 매출 파랑·영업이익 주황(2026-10-06 사용자 요청: 빨강은 «상승»으로 읽힌다).
     막대는 반투명 채움 + 이 색 테두리, 막대 안 금액은 `-ink`(채움 위에서 읽히는 진한 쪽). */
  --fund-rev: #2f6fe4; --fund-rev-ink: #123f99;
  --fund-op: #f08c00;  --fund-op-ink: #8f4a00;

  /* 리포트 차트의 계열 색(D-011). 앞의 둘은 재무 차트와 **같은 색**이다(`fund.js`). */
  --series-1: var(--fund-rev);
  --series-2: var(--fund-op);
  --series-3: #0e8a6a;
  --series-4: #7c3aed;
  --series-5: #a16207;

  --code-bg: #f2f0e8; --code-line: #e8e4d8;   /* 리포트 인라인 코드 — 회색이 아닌 종이색. 🔗 **screener_us 에 같은 이름의 쌍둥이가 있다** — 값을 바꾸면 함께 바꾼다(`web/report.css` 의 코드 규칙 머리말이 그 이유를 적는다) */

  --radius: 7px;
  --gap: 10px;
}

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

  --bg: #14161a;
  --panel: #1c1f25;
  --line: #2c313a;
  --line-soft: #23272e;
  --ink: #e8eaef;
  --ink-soft: #a3abb9;
  --ink-faint: #757e8d;
  --up: #ff6b6b;
  --down: #6aa4ff;
  --accent: #6aa4ff;
  --accent-soft: #1e2938;
  --fund-rev: #6aa4ff; --fund-rev-ink: #cfe0ff;
  --fund-op: #ffa94d;  --fund-op-ink: #ffe0bd;
  /* 1·2 는 `--fund-rev`·`--fund-op` 을 따라 저절로 바뀐다. 나머지 셋만 어두운 바탕용으로 올린다. */
  --series-3: #34d3a6;
  --series-4: #a78bfa;
  --series-5: #e0a458;
  --code-bg: #23211d; --code-line: #32302a;   /* 종이색은 못 쓴다 — 따뜻한 쪽으로만 민다. **이 줄은 짝이 없다**: screener_us 에는 다크 모드가 없어 저쪽 토큰은 한 벌뿐이다 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 14px 16px 40px;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
        "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  /* 숫자가 자리를 맞춰 서야 자릿수를 눈으로 비교할 수 있다. */
  font-variant-numeric: tabular-nums;
}

/* 표 화면 전체를 감싸는 한 겹. 상세는 `body.detail` 이 제 폭을 따로 정한다(`detail.css`). */
.page { max-width: 1180px; margin: 0 auto; }

/* ── 머리말 ───────────────────────────────────────────────────────────── */
/* screener_us 와 같은 세 줄이다: 제목 · 무엇을 거르는 화면인지 · 기준일.
   기준일을 **강조 상자**로 두는 이유는 이 표의 모든 숫자가 그 하루의 것이기 때문이다 —
   작은 회색 글씨로 흘리면 «어제 표를 보고 있다»는 사실이 화면에서 사라진다. */
.head { margin-bottom: 12px; }
.title { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.3px; }
.lede { margin: 0 0 8px; color: var(--ink-soft); font-size: 12.5px; }
.lede strong { color: var(--ink); }

.asof {
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}
.asof-note { margin-left: 6px; color: var(--ink-soft); font-size: 11.5px; font-weight: 400; }

/* ── 요약 줄 ──────────────────────────────────────────────────────────── */
/* 몇 종목인가(왼쪽) + 무슨 조건인가(그 옆). 조건 글귀는 칩에 적힌 것과 **같은 함수**에서
   온다(`js/controls.js` describe) — 두 벌이면 "칩에는 RS 70 인데 요약에는 RS 80" 인 자리가
   생기고, 그 화면은 완벽히 정상으로 보인다. */
.summary-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0 0 8px;
  font-size: 12.5px;
}
.summary { font-weight: 700; }
.conditions { color: var(--ink-soft); font-size: 11.5px; }
/* 갱신 중임을 **표를 지우지 않고** 알린다. 지우면 조건을 한 칸 바꿀 때마다 화면이 깜빡이고,
   그 사이 방문자는 자기가 무엇을 바꿨는지 비교할 대상을 잃는다. */
.busy-chip { display: none; margin-left: auto; color: var(--ink-faint); font-size: 11.5px; }
#app.is-busy .busy-chip { display: inline-block; }
#app.is-busy .tablewrap { opacity: 0.5; }

/* ── 상태 패널 ────────────────────────────────────────────────────────── */
/* **상태 하나가 화면을 고른다**(`#app[data-state]`): loading | ok | empty | error.
   0건과 실패를 빈 표로 함께 보여 주면 둘이 구별되지 않는다 — 그래서 표는 `ok` 에서만 뜬다. */
.panel { display: none; padding: 13px 14px; border-radius: var(--radius); font-size: 13px; }
.panel-loading { background: var(--panel); color: var(--ink-soft); }
.panel-empty { background: var(--panel); border-left: 3px solid var(--warn); }
.panel-error { background: var(--panel); border-left: 3px solid var(--up); color: var(--up); }
#app[data-state="loading"] .panel-loading,
#app[data-state="empty"] .panel-empty,
#app[data-state="error"] .panel-error { display: block; }
#app:not([data-state="ok"]) .tablewrap,
#app:not([data-state="ok"]) .pager,
#app:not([data-state="ok"]) .tabletools { display: none; }

.retry-btn {
  margin-left: 8px; padding: 4px 12px;
  border: 1px solid var(--up); border-radius: 6px;
  background: var(--bg); color: var(--up); font: inherit; font-size: 12px; cursor: pointer;
}
.retry-btn[hidden] { display: none; }
.note { margin: 5px 0 0; color: var(--ink-faint); font-size: 11.5px; }
.panel-empty .note, .panel-error .note { display: block; }
.panel-error .note { color: var(--up); }

/* ── 페이지 이동 ──────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; }
.pager:empty { display: none; }
.pageno { color: var(--ink-faint); }

/* ── 면책 ─────────────────────────────────────────────────────────────── */
.foot {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font-size: 11.5px;
}
.foot b, .foot strong { color: var(--ink-soft); }
.disclaimer { margin: 0; font-size: 12px; }
.disclaimer strong { color: var(--ink); }