/* 상승=붉은색 / 하락=파란색 (한국 증시 관례). dataviz 검사기 통과: light #e34948/#2a78d6 (CVD dE 21.6), dark #e66767/#3987e5 (CVD dE 19.2). 이 4개 값은 변경 금지. */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg:#0e1117; --surface:#161b24; --surface-2:#1d232e; --line:#262d3a; --ink:#e8eaed; --ink-2:#a8b0bd; --ink-3:#6b7480; --up:#e66767; --down:#3987e5; --accent:#f0b429; --grid:#222834; --ad:#1b2230; --ad-line:#2c3546; --heat-u3:#8f2b2b; --heat-u2:#c0403f; --heat-u1:#e08b8b; --heat-z:#2a313d; --heat-d1:#7fb0e8; --heat-d2:#3a7cc4; --heat-d3:#245285; --heat-ink-dark:#151a21; } :root[data-theme="light"] { color-scheme: light; --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f0f2f5; --line:#e2e5ea; --ink:#151a21; --ink-2:#4d5563; --ink-3:#868e9b; --up:#e34948; --down:#2a78d6; --accent:#b7791f; --grid:#eceef1; --ad:#f7f8fa; --ad-line:#dfe3e9; --heat-u3:#7f1d1d; --heat-u2:#c53030; --heat-u1:#f5b3b3; --heat-z:#eceef1; --heat-d1:#bcd9f5; --heat-d2:#4a90d9; --heat-d3:#2b6cb0; --heat-ink-dark:#151a21; } /* JS가 꺼져 있으면 data-theme 스탬프가 없어 위 :root 규칙이 항상 다크가 된다. 그때는 OS 설정을 따르도록 라이트 토큰을 한 번 더 적용한다. `:root:not([data-theme="dark"])`는 `:root[data-theme="light"]`와 특이도가 같으므로(둘 다 0,2,0) **이 블록을 뒤에 두어** 순서로 이긴다. 결과: - data-theme 없음 + OS 라이트 -> 라이트(이 블록) - data-theme="dark" + OS 라이트 -> :not()이 안 맞아 다크 유지 - data-theme="light" + OS 다크 -> 이 블록 비활성, 위 규칙이 라이트 적용 즉 JS가 찍은 값이 양방향으로 OS 설정을 이긴다. 토큰 값은 위 :root[data-theme="light"]와 반드시 동일하게 유지할 것(둘이 갈라지면 JS on/off에 따라 색이 달라진다). */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f0f2f5; --line:#e2e5ea; --ink:#151a21; --ink-2:#4d5563; --ink-3:#868e9b; --up:#e34948; --down:#2a78d6; --accent:#b7791f; --grid:#eceef1; --ad:#f7f8fa; --ad-line:#dfe3e9; --heat-u3:#7f1d1d; --heat-u2:#c53030; --heat-u1:#f5b3b3; --heat-z:#eceef1; --heat-d1:#bcd9f5; --heat-d2:#4a90d9; --heat-d3:#2b6cb0; --heat-ink-dark:#151a21; } :root:not([data-theme="dark"]) .site-header{background-image:none} } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;font-size:15px; font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif} .container{max-width:860px;margin:0 auto;padding:0 16px} a{color:var(--accent)} /* 헤더 — 배경 이미지는 하단 캔들 영역만 보이게 잘라 쓴다(상단은 글자 자리). 1916x821 PNG(866KB)를 1600x686 JPEG q82(28KB)로 재인코딩했다 — 전 페이지에 로드되는 자산이라 용량이 체류 시간·가시성을 직접 깎는다. 어두운 저대비 이미지라 JPEG 아티팩트가 눈에 띄지 않는다. 투명도는 필요 없다. */ .site-header{border-bottom:1px solid var(--line);background:var(--surface); background-image:url("../img/header-bg.jpg");background-size:cover; background-position:center 78%;background-repeat:no-repeat} :root[data-theme="light"] .site-header{background-image:none} .site-header .container{display:flex;align-items:center;gap:14px;padding:12px 16px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem; letter-spacing:-.02em;color:var(--ink);text-decoration:none} .brand img{height:26px;width:auto;display:block} .brand em{font-style:normal;color:var(--up)} nav{display:flex;gap:13px;margin-left:auto;flex-wrap:wrap} nav a{color:var(--ink-2);text-decoration:none;font-size:.92rem} nav a:hover{color:var(--ink)} #theme-toggle{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2); border-radius:999px;padding:5px 12px;font-size:.8rem;cursor:pointer;font:inherit; font-size:.8rem;line-height:1} main{padding:22px 0 44px} h1{font-size:1.5rem;line-height:1.35;letter-spacing:-.02em;margin:22px 0 8px} h2{font-size:1.15rem;margin:34px 0 8px;padding-top:20px;border-top:1px solid var(--line)} h3{font-size:1rem;margin:22px 0 6px} .meta{color:var(--ink-3);font-size:.84rem} .meta a{color:var(--ink-3);text-decoration:none;border-bottom:1px dotted var(--line)} /* 표 */ .tbl-wrap{overflow-x:auto} table{border-collapse:collapse;width:100%;font-size:.9rem} /* 표는 머리·값 모두 가운데 정렬. 값이 짧고(등락률·종가·일수) 열 수가 적어 가운데로 모으면 머리와 값이 한 축에 놓여 읽기 쉽다. 숫자 열은 자릿수 비교를 위해 tabular-nums 를 유지한다(.num). */ th,td{border-bottom:1px solid var(--line);padding:7px 9px;text-align:center;white-space:nowrap} th{color:var(--ink-3);font-weight:600;font-size:.78rem} td.num,th.num{text-align:center;font-variant-numeric:tabular-nums} /* 카드 */ .card{background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:15px 17px;margin:14px 0} .card h3{margin:0 0 2px;font-size:.95rem} .card .sub{color:var(--ink-3);font-size:.8rem;margin-bottom:13px} /* A 테마 강도 막대 */ .bars{display:grid;gap:9px} .bar-row{display:grid;grid-template-columns:minmax(90px,170px) 1fr 62px;gap:10px;align-items:center} .bar-name{font-size:.86rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bar-track{background:var(--grid);border-radius:3px;height:9px} .bar-fill{height:9px;border-radius:0 3px 3px 0;background:var(--up)} .bar-val{font-size:.85rem;font-weight:700;text-align:right;color:var(--up); font-variant-numeric:tabular-nums} .bar-row.down .bar-fill{background:var(--down)} .bar-row.down .bar-val{color:var(--down)} /* 정확히 0.00%는 보합 — 한국 증시에서 빨강도 파랑도 아니다. 히트맵의 중립 셀(heat td.z)과 같은 회색 계열로 맞춘다. */ .bar-row.flat .bar-fill{background:var(--grid)} .bar-row.flat .bar-val{color:var(--ink-3)} /* B 스파크라인 */ .spark{display:block} /* 데이터 없음 표기(`-`). 행을 지우는 대신 이 표기를 남긴다 — 독자가 누락을 알 수 있게. */ .na{color:var(--ink-3)} /* C 히트맵 — 셀마다 숫자를 표기해 색만으로 읽지 않아도 되게 한다(대비 완화 규칙) */ .heat{border-collapse:separate;border-spacing:2px;font-size:.78rem;width:auto} .heat th{border:0;color:var(--ink-3);font-weight:600;padding:4px 6px} .heat th.rowh{text-align:left;max-width:150px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-weight:500;color:var(--ink-2)} .heat td{border:0;border-radius:3px;text-align:center;padding:6px 4px;min-width:52px; font-variant-numeric:tabular-nums;color:var(--ink)} .heat td.empty{background:transparent} .heat td.z{background:var(--heat-z);color:var(--ink-3)} .heat td.u1{background:var(--heat-u1);color:var(--heat-ink-dark)} .heat td.u2{background:var(--heat-u2);color:#fff} .heat td.u3{background:var(--heat-u3);color:#fff} .heat td.d1{background:var(--heat-d1);color:var(--heat-ink-dark)} .heat td.d2{background:var(--heat-d2);color:#fff} .heat td.d3{background:var(--heat-d3);color:#fff} .legend{display:flex;gap:2px;align-items:center;margin-top:11px;font-size:.75rem; color:var(--ink-3);flex-wrap:wrap} .legend i{width:24px;height:12px;border-radius:2px;display:inline-block} .legend span{margin:0 4px} /* 광고 */ .ad-caption{font-size:.68rem;color:var(--ink-3);text-transform:uppercase; letter-spacing:.06em;margin:18px 0 4px} .adslot{margin:0 0 20px} .adslot.ph{background:var(--ad);border:1px dashed var(--ad-line);border-radius:8px; display:flex;align-items:center;justify-content:center;flex-direction:column; color:var(--ink-3);font-size:.78rem;gap:3px} .adslot.ph.lb{height:100px} .adslot.ph.inart{height:250px} /* 실 광고도 높이를 예약해 로드 시 본문이 밀리지 않게 한다(.ph 자리표시자는 height로 고정, 실 광고는 min-height로 최소만 확보하고 커지는 것은 허용). */ .adslot.lb{min-height:100px} .adslot.inart{min-height:250px} /* 내부 링크 · 홍보 */ .related{background:var(--surface);border:1px solid var(--line);border-radius:8px; padding:13px 16px;margin:22px 0;font-size:.88rem} .related h4{margin:0 0 7px;font-size:.85rem;color:var(--ink-3);font-weight:600} .related ul{margin:0;padding-left:18px} .related li{margin:3px 0} .related a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)} .promo{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--up); border-radius:8px;padding:13px 16px;font-size:.9rem; /* margin:24px 0 이면 .container 의 margin:0 auto 를 덮어써(같은 특이도, 뒤에 선언) 배너가 가운데 정렬을 잃고 왼쪽으로 붙는다. auto 를 유지한다. */ margin:24px auto} .promo strong{display:block;margin-bottom:3px} .promo a{color:var(--up);text-decoration:none;font-weight:600} /* 목록 · 푸터 */ .post-list{list-style:none;padding:0} .post-list li{padding:12px 0;border-bottom:1px solid var(--line)} .hero{text-align:center;padding:22px 0} /* 페이지네이션 — Hugo 내장 `_internal/pagination.html` 은 부트스트랩 전제 마크업 (`ul.pagination > li.page-item > a.page-link`)을 낸다. 이 사이트는 부트스트랩을 싣지 않으므로 규칙이 없으면