/* 바탕 · 타이포 · 레이아웃. 칸(`table.css`)과 조건(`controls.css`)은 따로 산다. * * ⚠️ 이 화면은 **워드프레스에 iframe 으로 들어간다.** 그래서 배경을 반드시 칠한다 — * 투명하면 감싼 쪽의 배경이 비쳐 대비가 무너지고, 그 화면은 우리 로그에 200 으로만 * 남는다. 폰트도 웹폰트를 받지 않는다(iframe 안에서 한 번 더 받는 값이 크다). * * 색은 **한국 증시 관행**을 따른다: 상승이 빨강, 하락이 파랑. 미국 관행(상승=초록)을 * 그대로 옮기면 같은 사람이 두 화면에서 반대로 읽는다. */ /* 테마는 `` **하나**가 정한다 — `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; --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; } * { 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; } .top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap); margin-bottom: 10px; } h1 { margin: 0; font-size: 19px; letter-spacing: -0.3px; } .sub { margin: 2px 0 0; color: var(--ink-soft); font-size: 12.5px; } .disclaimer { margin: 0 0 12px; padding: 8px 11px; border-left: 3px solid var(--warn); background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-soft); font-size: 12px; } .disclaimer b { color: var(--ink); } /* ── 검색 ─────────────────────────────────────────────────────────────── */ /* 검색칸은 **눈에 띄어야 한다** — 조건 막대와 생김새가 같으면 필터 중 하나로 읽히고, 그러면 아무도 누르지 않는다 `✅ 사용자 지적 (2026-08-12)`. 라벨을 붙이고 테두리를 강조색으로 둔다. 하는 일이 다르므로(표를 거르지 않는다) 생김새도 달라야 한다. */ .searchbox { position: relative; min-width: 260px; flex: 0 1 340px; } .search-label { display: block; margin-bottom: 3px; color: var(--ink-soft); font-size: 11.5px; font-weight: 600; } .search-field { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; } .searchbox input { width: 100%; padding: 9px 11px 9px 31px; border: 1.5px solid var(--accent); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; } .searchbox input::placeholder { color: var(--ink-faint); font-size: 13px; } .searchbox input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* 아이콘이 입력칸 **앞**에 있으므로 `input:focus + .search-icon` 은 영원히 안 맞는다. */ .search-field:focus-within .search-icon { color: var(--accent); } .suggest { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); } .suggest a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 11px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; } .suggest a:last-child { border-bottom: 0; } .suggest a:hover { background: var(--accent-soft); } .suggest span { color: var(--ink-faint); font-size: 12px; } /* ── 상태줄 ───────────────────────────────────────────────────────────── */ .statusbar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin: 12px 0 6px; color: var(--ink-soft); font-size: 12.5px; } #status.loading { color: var(--ink-faint); } /* 실패는 눈에 띄어야 한다 — 빈 표를 조용히 보여 주면 "조건에 맞는 종목이 없다"로 읽힌다. */ #status.error { color: var(--up); font-weight: 600; } .pager { display: flex; align-items: center; gap: 6px; } .pageno { color: var(--ink-faint); } .empty { padding: 28px 0; color: var(--ink-faint); text-align: center; } .foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--ink-faint); font-size: 11.5px; } .foot b { color: var(--ink-soft); }