/* 수급노트 — 리퀴드 글래스 리스트.
기본 라이트, 로 다크 전환 (헤더 버튼이 토글, localStorage 에 저장).
색 규약: 한국 시장 관습대로 상승·강세 = 빨강, 하락 = 파랑. */
:root {
--fg: #14161a; --fg2: #454b56; --mute: #6b7383;
--hair: rgba(20,22,26,.07);
--up: #e0353b; --down: #2563c9; --gold: #d99e00;
--r: 20px;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
--glass-bg: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
--glass-blur: blur(24px) saturate(185%) brightness(1.03);
--glass-shadow:
0 14px 38px rgba(20,22,26,.11),
inset 0 1.4px 0 rgba(255,255,255,.98),
inset 1px 0 0 rgba(255,255,255,.5),
inset -1px 0 0 rgba(255,255,255,.34),
inset 0 -1.2px 0 rgba(255,255,255,.24),
0 0 0 .5px rgba(150,160,185,.20);
--rim: linear-gradient(138deg,
rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 14%,
rgba(255,255,255,0) 36%, rgba(255,255,255,0) 62%,
rgba(255,255,255,.42) 86%, rgba(255,255,255,.85) 100%);
--chip: rgba(20,22,26,.05);
}
html.dark {
--fg: #e9ecf2; --fg2: #b4bbc8; --mute: #8b93a5;
--hair: rgba(255,255,255,.07);
--up: #ff5865; --down: #5b9bff; --gold: #ffc94d;
--glass-bg: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
--glass-blur: blur(28px) saturate(1.18) brightness(1.06);
--glass-shadow:
0 10px 34px rgba(0,0,0,.44),
inset 0 1.4px 0 rgba(255,255,255,.34),
inset 1px 0 0 rgba(255,255,255,.14),
inset -1px 0 0 rgba(255,255,255,.08),
inset 0 -1.2px 0 rgba(255,255,255,.06),
0 0 0 .5px rgba(255,255,255,.10);
--rim: linear-gradient(138deg,
rgba(255,255,255,.85) 0%, rgba(255,255,255,.24) 15%,
rgba(255,255,255,0) 38%, rgba(255,255,255,0) 64%,
rgba(255,255,255,.20) 87%, rgba(255,255,255,.5) 100%);
--chip: rgba(255,255,255,.07);
}
* { box-sizing: border-box; }
body {
margin: 0; color: var(--fg); font-variant-numeric: tabular-nums;
font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
"Noto Sans KR", Segoe UI, Roboto, sans-serif;
line-height: 1.55; -webkit-font-smoothing: antialiased; word-break: keep-all;
/* 저채도 4색 메시 — 유리 뒤에 비칠 것이 있어야 유리로 보인다. 뷰포트 고정. */
background:
radial-gradient(72vw 62vh at 4% 2%, #dfe9e4 0%, transparent 60%),
radial-gradient(66vw 58vh at 99% 20%, #dbe4f0 0%, transparent 58%),
radial-gradient(62vw 56vh at 26% 90%, #e4e2ec 0%, transparent 56%),
radial-gradient(60vw 52vh at 92% 94%, #efe9de 0%, transparent 54%),
linear-gradient(180deg, #f4f6f8, #eceff3);
background-attachment: fixed;
}
html.dark body { background: #0b0d11; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---------- 배경 애니메이션 ---------- */
/* 주기를 서로 나누어떨어지지 않게(47·59·71) 잡아 반복이 눈에 띄지 않게 한다. */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); will-change: transform; }
.aurora i:nth-child(1) { width: 54vw; height: 54vw; left: -12vw; top: 4vh;
background: rgba(126,164,146,.24); animation: drift1 47s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 52vw; height: 52vw; right: -12vw; top: 48vh;
background: rgba(126,150,190,.24); animation: drift2 59s ease-in-out infinite; }
.aurora i:nth-child(3) { width: 44vw; height: 44vw; left: 26vw; top: 62vh;
background: rgba(158,140,180,.18); animation: drift3 71s ease-in-out infinite; }
html.dark .aurora i:nth-child(1) { background: rgba(86,132,124,.17); }
html.dark .aurora i:nth-child(2) { background: rgba(84,106,146,.16); }
html.dark .aurora i:nth-child(3) { background: rgba(112,104,140,.13); }
@keyframes drift1 { 0%,100%{transform:translate3d(0,0,0) scale(1)}
33%{transform:translate3d(9vw,7vh,0) scale(1.14)} 66%{transform:translate3d(-5vw,12vh,0) scale(.92)} }
@keyframes drift2 { 0%,100%{transform:translate3d(0,0,0) scale(1)}
40%{transform:translate3d(-11vw,-8vh,0) scale(1.18)} 70%{transform:translate3d(-4vw,9vh,0) scale(.9)} }
@keyframes drift3 { 0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(7vw,-13vh,0) scale(1.22)} }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
/* ---------- 헤더 ---------- */
header.site {
position: sticky; top: 0; z-index: 30; padding: 0;
background: rgba(255,255,255,.62);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--hair);
}
html.dark header.site { background: rgba(11,13,17,.68); }
.site-bar { max-width: 760px; margin: 0 auto; display: flex; align-items: center;
justify-content: space-between; gap: 14px; padding: 12px 18px 8px; }
.brand { font-weight: 750; font-size: 16.5px; letter-spacing: -.02em; }
.brand::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
background: var(--up); margin-right: 8px; vertical-align: 1px; }
.theme-btn { appearance: none; border: 0; font: inherit; font-size: 12px; font-weight: 600;
color: var(--fg2); background: var(--chip); padding: 4px 10px; border-radius: 20px; cursor: pointer; }
/* 최상위 두 축 — 수급 발굴 / 하우스뷰. 탭(모드)보다 한 단계 위다.
성격이 다른 두 자료라 여기서 갈리고, 아래 탭은 수급 발굴 안에서만 쓰인다. */
.site-nav { max-width: 760px; margin: 0 auto; padding: 0 18px 2px;
display: flex; align-items: center; justify-content: space-between; gap: 14px; }
/* 탭이 없는 페이지(하우스뷰·아카이브)는 내비가 헤더 경계선에 바짝 붙는다 — 아래를 벌린다.
탭이 있는 페이지는 **활성 탭의 밑줄이 헤더 경계선 위에 앉는 디자인**이라(.tab 의
margin-bottom:-1px) 벌리면 밑줄이 허공에 뜬다. 그래서 탭이 없을 때만 준다.
`:has()` 를 모르는 브라우저는 이 규칙을 통째로 무시하고 지금 모양 그대로 — 안전한 퇴화다. */
header.site:not(:has(.tabs)) .site-nav { padding-bottom: 11px; }
.secs { display: flex; gap: 4px; }
.sec { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--mute);
padding: 3px 11px 4px; border-radius: 999px; }
.sec:hover { color: var(--fg2); text-decoration: none; }
.sec.is-on { color: var(--fg); background: var(--chip); }
.site-nav .sub { font-size: 12.5px; font-weight: 550; color: var(--mute); white-space: nowrap; }
/* ---------- 탭 ---------- */
.tabs { max-width: 760px; margin: 0 auto; padding: 0 18px; display: flex; gap: 2px;
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
padding: 7px 11px 9px; margin-bottom: -1px; font: inherit; font-size: 13px; font-weight: 650;
color: var(--mute); cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--fg2); }
.tab.is-on { color: var(--fg); border-bottom-color: var(--up); }
.tab-n { font-size: 10.5px; font-weight: 700; line-height: 1.6; background: var(--chip);
color: var(--mute); border-radius: 20px; padding: 0 7px; }
.tab.is-on .tab-n { color: var(--up); }
main { max-width: 760px; margin: 0 auto; padding: 26px 18px 8px; position: relative; z-index: 1; }
footer.site { max-width: 760px; margin: 40px auto 0; padding: 24px 18px 46px;
border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--mute); position: relative; z-index: 1; }
footer.site p { margin: 0 0 4px; }
.fine { font-size: 11.5px; }
/* ---------- 리포트 헤딩 ---------- */
h1 { margin: 0 0 7px; font-size: clamp(23px,5vw,30px); letter-spacing: -.03em;
line-height: 1.25; font-weight: 750; }
.meta { margin: 0 0 26px; font-size: 12.5px; color: var(--mute); }
.mode { margin: 0 0 42px; }
.mode > h2 { margin: 0 0 6px; font-size: 18.5px; font-weight: 750; letter-spacing: -.02em;
display: flex; align-items: center; gap: 9px; }
.mode > h2::before { content:""; width:4px; height:16px; border-radius:3px;
background: var(--mute); flex-shrink: 0; }
.mode-strong > h2::before { background: var(--up); }
.mode-early > h2::before { background: var(--gold); }
.blurb { margin: 0 0 18px 13px; font-size: 13px; color: var(--fg2); line-height: 1.6; }
.count { font-size: 11px; font-weight: 700; color: var(--mute); background: var(--chip);
border-radius: 20px; padding: 2px 9px; }
.tier { margin: 0 0 22px; }
.tier-h { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.sub { margin: 0 0 12px; font-size: 12px; color: var(--mute); }
/* ---------- 유리 표면 ---------- */
.rows, .method, .empty, .backfill-note, .hv-block, .hv-list {
position: relative; border-radius: var(--r);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
}
/* 굴절 림 — 좌상단에서 밝게 시작해 사라졌다가 우하단에서 다시 살아난다 */
.rows::after, .method::after, .backfill-note::after,
.hv-block::after, .hv-list::after {
content: ""; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
padding: 1.4px; background: var(--rim);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
/* ---------- 업종 요약 스트립 ---------- */
.sector-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 16px 13px; }
/* 이 페이지의 작은 메타데이터 배지 규약을 따른다 (.count · .tab-n · .new):
**테두리 없음 · 채움 · 알약**. 강조는 테두리가 아니라 색으로 한다.
예전엔 이 계열에서 유일하게 1px 테두리가 있었고, 그 테두리가 가장 흐린 요소라
칩 전체가 뿌옇게 보였다. */
.ss-item { display: inline-flex; align-items: baseline; gap: 6px;
padding: 4px 11px; border-radius: 20px; font-size: 11.5px;
background: var(--chip); }
/* **2개 이상 몰린 업종만** 색을 갖는다. 대부분의 날은 업종당 1종목이라 종목 수에
비례해 전부 칠하면 정보 없이 색만 흔들린다. 1개짜리는 이름만 조용히 둔다.
색을 주는 방식은 .new 와 같다 — 이 페이지에서 이미 읽히는 것이 증명된 조합이다. */
.ss-item.ss-many { background: color-mix(in srgb, var(--up) 13%, transparent); }
.ss-item.is-top { background: color-mix(in srgb, var(--up) 18%, transparent); }
.ss-item b { font-weight: 600; color: var(--fg2); }
.ss-item.ss-many b { color: var(--up); font-weight: 700; }
.ss-item i { font-style: normal; font-weight: 800; color: var(--up); }
/* ---------- 종목 리스트 ---------- */
.rows { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.row { border-top: 1px solid var(--hair); }
.row:first-child { border-top: 0; }
/* 카드 전체가 펼침 버튼이다.
**접었을 때는 이름 · 한 줄 · 추세선 뿐** — 지표 타일과 수급 항목이 접힌 상태에 있으면
18종목마다 반복돼 한눈에 안 들어온다(2026-08-19). 정보는 하나도 안 버리고 안으로 옮겼다. */
.row-fold > summary {
display: flex; align-items: center; gap: 9px;
padding: 13px 16px; cursor: pointer; list-style: none;
transition: background .12s;
}
.row-fold > summary::marker, .row-fold > summary::-webkit-details-marker { display: none; }
.row-fold > summary:hover { background: var(--chip); }
.row-fold > summary:focus-visible { outline: 2px solid var(--up); outline-offset: -2px; }
.row:first-child .row-fold > summary { padding-top: 17px; }
.row:last-child .row-fold:not([open]) > summary { padding-bottom: 15px; }
.rank { font-family: var(--mono); font-size: 10.5px; color: var(--mute); flex-shrink: 0; }
.name { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; flex-shrink: 0; }
.star { color: var(--gold); font-size: 11px; flex-shrink: 0; }
/* 한 줄 요약 — 왜 이 종목이 목록에 있나. 길면 잘라낸다(줄바꿈보다 낫다).
🔴 **맨 클래스로 두면 안 된다.** `.why` 는 하우스뷰에서도 쓰이는데(`.stock .why`,
`.src .why`) 거기선 문장이라 잘라내면 뜻이 사라진다. 실제로 대장 후보의 근거가
문장 중간에서 끊겼다 — 아래 511행이 뒤에 와도 font-size·color 만 덮어서
white-space 가 살아 있었다. 그래서 **잘라내는 규칙은 스크리너 행에만** 건다. */
.row-fold > summary .why {
flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.why { font-family: var(--mono); font-size: 11.5px; color: var(--fg2); }
.row-fold > summary .chev {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center;
background: var(--chip); border: 1px solid var(--hair);
color: var(--fg2);
transition: transform .2s ease, border-color .12s, color .12s;
}
.row-fold > summary:hover .chev { border-color: var(--mute); color: var(--fg); }
.row-fold[open] > summary .chev { transform: rotate(180deg); color: var(--fg); }
.row-fold-body { padding: 0 16px 15px; }
.row-fold-body .meta { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; color: var(--mute); }
.sector-tag { font-size: 10.5px; color: var(--mute); }
.code { font-family: var(--mono); font-size: 10px; color: var(--mute); }
.mini { width: 78px; height: 24px; flex-shrink: 0; display: block; }
.mini-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mini.up .mini-line { stroke: var(--up); } .mini.up .mini-dot { fill: var(--up); }
.mini.down .mini-line { stroke: var(--down); } .mini.down .mini-dot { fill: var(--down); }
.metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 0 0 9px; }
.m { min-width: 0; }
.m-v { display: block; font-size: 14.5px; font-weight: 750; letter-spacing: -.02em; }
.m-v.pos { color: var(--up); } .m-v.neg { color: var(--down); }
.m-k { display: block; font-size: 9.5px; color: var(--mute); white-space: nowrap; }
.m-bar { display: block; height: 3px; border-radius: 2px; margin-top: 5px;
background: var(--chip); overflow: hidden; }
.m-bar i { display: block; height: 100%; border-radius: 2px;
background: linear-gradient(90deg, var(--up), #f0803a); }
.subline { margin: 0; font-size: 11.5px; color: var(--fg2); }
.subline b { font-weight: 650; color: var(--fg); }
.subline .neg { color: var(--down); }
.nodata { color: var(--mute); background: var(--chip); border-radius: 6px; padding: 1px 7px; font-weight: 600; }
/* ---------- 확대 차트 + 52주 위치 ---------- */
.spark-wrap { margin: 11px 0 4px; }
.spark { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 10px; }
.spark-line { fill: none; stroke: var(--up); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--up); opacity: .08; stroke: none; }
.spark-dot { fill: var(--up); }
/* 현재가 기준선 — 1년 레인지 안 위치를 한눈에. 데이터 선보다 뒤에 깔린다. */
.spark-now { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 4 4; opacity: .3; }
.spark-period { margin: 5px 0 0; font-size: 10px; color: var(--mute); font-family: var(--mono); text-align: center; }
.pos52 { margin-top: 10px; }
.pos52-bar { position: relative; height: 5px; border-radius: 3px; background: var(--chip); }
.pos52-bar span { position: absolute; top: 50%; width: 3px; height: 13px;
transform: translate(-50%,-50%); background: var(--fg); border-radius: 2px; }
.pos52-cap { display: flex; justify-content: space-between; align-items: baseline;
gap: 8px; margin-top: 6px; font-size: 10.5px; color: var(--mute); }
.pos52-cap b { color: var(--fg); font-size: 11px; font-weight: 700; }
dl.detail { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 11px 0 0; font-size: 12px; }
dl.detail dt { color: var(--mute); }
dl.detail dd { margin: 0; text-align: right; font-weight: 550; }
/* ---------- 방법론 / 고지 / 백필 ---------- */
.method, .backfill-note { padding: 16px 18px; margin-bottom: 16px; }
.method .tier-h { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
/* 선정 기준 — 제목 아래 설명으로 쌓는다.
값이 숫자가 아니라 두세 줄짜리 문장이라, 좌우 2열로 두면 모바일에서
오른쪽 열이 좁아져 글자가 서너 개씩 끊긴다 (dl.detail 과 성격이 다르다). */
dl.steps { margin: 0; }
dl.steps dt { margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--fg); }
dl.steps dt:first-child { margin-top: 0; }
dl.steps dd { margin: 3px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--fg2); }
.funnel { margin: 12px 0 0; font-size: 11px; color: var(--mute); font-family: var(--mono);
line-height: 1.8; background: var(--chip); border-radius: 8px; padding: 9px 11px; }
.backfill-note { margin: 0 0 16px 13px; font-size: 12px; color: var(--fg2); line-height: 1.6; }
.backfill-note b { color: var(--fg); }
/* 고지 — 본문 맨 아래 잔글씨. 박스로 두지 않는다(분석보다 먼저 읽힌다). */
.fineprint { margin: 22px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--mute); }
.fineprint b { font-weight: 600; color: var(--fg2); }
.empty { padding: 24px; text-align: center; color: var(--mute); font-size: 13px; }
/* ---------- 날짜 내비 / 아카이브 ---------- */
.daynav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px;
font-size: 13px; font-weight: 550; }
.daynav a:only-child { margin-left: auto; }
/* 월별 접기 — 라 JS 없이 동작한다 */
.ym {
position: relative; border-radius: var(--r); margin-bottom: 10px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
}
.ym::after {
content: ""; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
padding: 1.4px; background: var(--rim);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.ym > summary {
cursor: pointer; list-style: none; padding: 14px 18px;
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ym > summary::marker, .ym > summary::-webkit-details-marker { display: none; }
.ym-t { font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.ym-t::before { content: "▸ "; color: var(--mute); font-weight: 400; }
.ym[open] .ym-t::before { content: "▾ "; }
.ym-n { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.archive-list { list-style: none; margin: 0; padding: 0 18px 6px; }
.archive-list li { display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.archive-list li:last-child { border-bottom: 0; }
.archive-list a { font-weight: 650; }
.tally { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
@media (max-width: 430px) {
.metrics { gap: 8px; }
.m-v { font-size: 13px; }
.mini { width: 62px; height: 22px; }
.row { padding: 10px 13px 9px; gap: 9px; }
.row:first-child { padding-top: 15px; }
.row:last-child { padding-bottom: 13px; }
}
/* ---------- 하우스뷰 ----------
스크리너와 시각 언어를 반대로 간다. 저기는 조밀한 숫자·표, 여기는 읽는 글:
본문을 키우고 행간을 넓히고 한 줄에 담기는 글자 수를 줄인다.
같은 사이트인 건 헤더·유리 표면이 유지해준다. */
/* 폭은 main(760px)이 정한다 — 하우스뷰만 좁히면 같은 사이트의 두 축이 다른 페이지처럼
보인다. 글이라 줄을 짧게 두려고 640px 로 뒀었는데, 760px 도 한글 한 줄에 50자 정도라
좁힐 근거가 약했다. */
.house { max-width: none; margin: 0; }
.house h1 { margin: 0 0 10px; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.house .lede { margin: 0 0 8px; font-size: 17px; line-height: 1.62; font-weight: 550;
color: var(--fg); }
.house .lede .tone { display: inline-block; margin-right: 7px; padding: 2px 9px;
border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 2px;
background: var(--chip); color: var(--mute); }
.tone-up .tone { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.tone-down .tone { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.house .meta { margin: 0 0 16px; font-size: 12px; color: var(--mute); }
.hv-block { padding: 18px 20px 20px; margin-bottom: 14px; }
/* **접히는 블록은 패딩을 0 으로.** 카드에 패딩이 있으면 summary 가 그만큼 안쪽으로
들어가고, hover 배경이 summary 박스만 칠해 **카드 테두리가 안 칠해진 띠로 남는다**
(2026-08-19 사용자: "row 안에 박스만 dimm 돼서 이상해"). 패딩은 summary·본문이 갖는다. */
details.hv-block { padding: 0; }
.hv-block h2 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .01em;
color: var(--mute); text-transform: none; }
.hv-block p { margin: 0 0 17px; font-size: 15px; line-height: 1.8; color: var(--fg);
letter-spacing: -.005em; }
.hv-block p:last-child { margin-bottom: 0; }
/* 첫 문단은 그날의 결론이라 조금 크게 — 나머지는 근거다 */
.hv-block p:first-of-type { font-size: 15.5px; color: var(--fg); }
.hv-block .none { color: var(--mute); font-size: 14px; }
.hv-block.warn h2 { color: var(--gold); }
.hv-block ul.plain { margin: 0; padding-left: 18px; }
.hv-block ul.plain li { margin-bottom: 8px; font-size: 14.5px; line-height: 1.7; }
.hv-block ul.plain li:last-child { margin-bottom: 0; }
/* 서술 안의 숫자 — **부호가 글에 이미 적힌 것만** 칠한다. 방향을 만들어내지 않는다.
한국 시장 규약대로 오름 = 빨강, 내림 = 파랑. 다른 블록의 값 색과 같은 규약이다. */
.num { font-weight: 700; font-variant-numeric: tabular-nums; }
.num.up { color: var(--up); }
.num.down { color: var(--down); }
/* 글쓴이가 `**...**` 로 표시한 강조. 긴 글에서 눈이 먼저 닿아야 할 한 곳 —
색은 안 쓴다(빨강/파랑은 방향이라는 뜻이 이미 있다). 굵기와 명도만으로 든다. */
.em { font-weight: 700; color: var(--fg); }
/* 앞으로 볼 것 — 날짜가 스캔 앵커다 */
.hv-block ul.plain .when { font-weight: 700; color: var(--fg); }
.hv-block ul.plain .dash { color: var(--mute); }
/* 라벨 + 서술 — 한 줄에 한 가지만 */
.ch-row { margin-bottom: 13px; }
.ch-row:last-child { margin-bottom: 0; }
.ch-row i { display: block; font-style: normal; font-size: 11px; font-weight: 700;
letter-spacing: .02em; color: var(--mute); margin-bottom: 3px; }
.ch-row span { display: block; font-size: 14.5px; line-height: 1.72; color: var(--fg2); }
.changes, .sectors, .actors, .claims { list-style: none; margin: 0; padding: 0; }
.change, .sector, .actor, .claim { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--hair); }
.changes > li:first-child, .sectors > li:first-child, .actors > li:first-child,
.claims > li:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
/* 내건 주장 — 판정된 것은 색으로, 아직인 것은 무채색. 한국 규약대로 맞았으면 빨강 */
.claim .ch-head b { font-size: 15px; font-weight: 650; line-height: 1.6; }
.ch-head .tag.up { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.ch-head .tag.down { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
/* ── 어제와 달라진 것 ──
블록 마커 색이 **변화의 방향**이다. 장식이 아니라 정보 — 목록을 훑을 때
무엇이 올라갔고 무엇이 내려갔는지 읽기 전에 알 수 있어야 한다.
한국 시장 규약대로 올림 = 빨강, 내림 = 파랑. */
.change { position: relative; padding-left: 13px; }
.change::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 2px;
width: 3px; border-radius: 3px; background: var(--mute); }
.change.up::before { background: var(--up); }
.change.down::before { background: var(--down); }
.ch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-bottom: 12px; }
.ch-head .tag { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
border-radius: 6px; background: var(--chip); color: var(--fg2); }
.ch-head b { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.ch-head code, .stock code { font-family: var(--mono); font-size: 11px; color: var(--mute); }
/* 모양은 항상 같다. **색이 들어가는 자리만** 다르다 —
어느 쪽이 색을 받았는지가 곧 "무엇이 움직였나" 다.
모양까지 바꾸면 두 줄을 나란히 놓고 비교할 수 없다. */
.ch-head .shift, .ch-head .conv { display: inline-flex; align-items: baseline; gap: 4px;
font-size: 12.5px; font-weight: 600; color: var(--mute); }
.ch-head .shift i, .ch-head .conv i { font-style: normal; color: var(--mute);
font-size: 10.5px; }
.ch-head .shift em, .ch-head .conv em { font-style: normal; font-weight: 700;
color: var(--fg2); }
.ch-head .conv { font-family: var(--mono); font-size: 11px;
background: var(--chip); border-radius: 5px; padding: 1px 7px; }
/* **각 값이 자기 방향대로 색을 갖는다** — 좋아지면 빨강, 나빠지면 파랑.
스탠스와 확신도를 따로 칠하는 이유: 둘이 반대로 움직일 수 있고,
하나로 뭉뚱그리면 거짓이 된다. 안 바뀐 값은 색 없음. */
.ch-head .up, .ch-head em.up { color: var(--up); font-weight: 800; }
.ch-head .down, .ch-head em.down { color: var(--down); font-weight: 800; }
/* '어떻게 고쳤나' 는 앞선 판단이 틀렸다고 인정하는 자리다. 근거·결론과 같은 모양으로
늘어놓으면 셋이 구분 없이 읽힌다 — 한 칸 들여 조용하게 둔다. */
.ch-row.fix { margin-left: 11px; padding-left: 11px; border-left: 1px solid var(--hair); }
.ch-row.fix span { color: var(--mute); }
/* '그래서' 는 결론이라 본문보다 진하게 둔다. **굵기는 올리지 않는다** —
두세 문장짜리 문단을 통째로 굵게 하면 그 안에서 무엇이 핵심인지가 사라진다.
이 사이트 규칙이 "볼드는 스캔 앵커에만" 이고, 문단 전체는 앵커가 아니다.
앵커는 글쓴이가 `**...**` 로 찍는다(.em). */
.ch-row.so span { color: var(--fg); }
/* 반대 논지 — 이 판단이 무엇을 이기고 남았는지다. '어떻게 고쳤나'와 같은 들여쓰기로
묶되(둘 다 자기 판단을 의심하는 자리다), 라벨 색으로 성격을 구분한다. */
.ch-row.bear { margin-left: 11px; padding-left: 11px;
border-left: 1px solid color-mix(in srgb, var(--down) 35%, var(--hair)); }
.ch-row.bear i { color: var(--down); }
.ch-row.bear span { color: var(--fg2); }
/* ── 누가 움직였나 (정책 · 기업 · 자금) ──
변화 블록의 ch-head / ch-row 를 그대로 쓴다. 사실(무엇을)과 해석(그래서)을 가르는
방법이 사이트에 하나만 있어야 해서다. 종류 태그는 무채색 — 빨강/파랑은 여기서
"좋아졌다/나빠졌다" 라는 뜻이라 분류에 쓰면 뜻이 흐려진다. */
.ch-head .secs { font-size: 11.5px; color: var(--mute); }
/* ── 지난 노트 성적 ──
블록 마커는 **초과수익** 부호다. 이 표가 묻는 건 "무작위로 한 종목 뽑은 것보다
나았나" 이고, 그 답이 아닌 수익률만 크게 칠하면 시장이 오른 걸 실력으로 읽는다. */
.hv-block p.sc-meta { font-size: 11.5px; color: var(--mute); line-height: 1.6;
margin: -2px 0 12px; }
.hv-block p.sc-note { font-size: 13.5px; color: var(--fg2); line-height: 1.75;
margin: 14px 0 0; }
.scores { list-style: none; margin: 0; padding: 0; }
.score { position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
gap: 8px; padding: 11px 0 11px 13px; border-top: 1px solid var(--hair); }
.scores > li:first-child { border-top: 0; padding-top: 2px; }
.score::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 10px;
width: 3px; border-radius: 3px; background: var(--mute); }
.scores > li:first-child::before { top: 3px; }
.score.up::before { background: var(--up); }
.score.down::before { background: var(--down); }
/* 자격 태그 폭을 고정해 종목명을 한 줄에 세운다 — 이 표는 위아래로 비교하며 읽는다 */
.score .tag { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
border-radius: 6px; background: var(--chip); color: var(--fg2);
min-width: 66px; text-align: center; }
.score b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.score code { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.score .ret { font-family: var(--mono); font-size: 13px; font-weight: 700;
margin-left: auto; color: var(--fg2); }
.score .ex { font-size: 11.5px; font-weight: 650; color: var(--mute); white-space: nowrap; }
/* 기준선 풀 밖 픽 — 같은 비교인 척하면 안 된다 (과거 시총 복원은 근사값이다) */
.score .off { font-size: 10px; font-weight: 700; color: var(--mute);
background: var(--chip); border-radius: 5px; padding: 1px 6px; }
.score .up { color: var(--up); }
.score .down { color: var(--down); }
/* 섹터 제목에 색 마커 — 스크리너 모드 제목(.mode > h2::before)과 같은 언어.
제목·국내/해외·종목칩이 하나의 덩어리로 읽히게 하는 게 목적이다.
(마커 없이 여백만으로는 어디서 섹터가 끊기는지 안 보인다는 지적) */
.sector h3, .rotation h3 { margin: 0 0 12px; font-size: 16px; font-weight: 750;
letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.sector h3::before, .rotation h3::before { content: ""; width: 4px; height: 15px;
border-radius: 3px; background: var(--up); flex-shrink: 0; }
.rotation h3::before { background: var(--gold); }
/* 섹터 안의 내용은 마커 폭만큼 들여써서 제목 아래 묶인 것으로 보이게 */
.sector .ch-row, .sector .stocks, .rotation .ch-row, .rotation .stocks { margin-left: 12px; }
.stocks { list-style: none; margin: 15px 0 0; padding: 0; display: flex;
flex-wrap: wrap; gap: 7px; }
/* 칩은 내용만큼만 넓되 **컨테이너를 넘지 않는다.** 넘으면 `details.hv-block` 의
overflow:hidden 이 오른쪽을 잘라낸다 — 근거가 문장이라 잘리면 뜻이 사라진다.
`flex-wrap`+`min-width:0` 이라야 긴 근거가 칩 안에서 줄바꿈한다
(flex 아이템은 기본 min-width:auto 라 내용보다 좁아지지 않는다). */
.stock { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
padding: 5px 11px; border-radius: 9px; background: var(--chip);
border: 1px solid var(--hair); min-width: 0; max-width: 100%; }
.stock i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--mute); }
.stock b { font-size: 13.5px; font-weight: 650; }
.stock .why, .src .why { font-size: 12px; color: var(--fg2); min-width: 0; }
.src { padding: 4px 4px 0; margin-top: 18px; }
.src h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--mute); }
.src ul { list-style: none; margin: 0; padding: 0; }
.src li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
margin-bottom: 6px; font-size: 12.5px; }
.src a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.src time { font-family: var(--mono); font-size: 11px; color: var(--mute); }
/* ── 수급 발굴 성적 ──
이 페이지에서 **유일하게 서술이 아닌 블록**이다. 다른 블록은 읽는 글(넓은 행간)인데
여기만 스크리너 쪽 언어를 빌려 조밀한 숫자로 둔다 — 설명 없이 성격이 구분되게. */
.setups { border: 1px solid color-mix(in srgb, var(--mute) 22%, transparent); }
.setup-rows { list-style: none; margin: 0; padding: 0; }
.setup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
padding: 10px 0; border-top: 1px solid var(--hair); }
.setup-rows > li:first-child { border-top: 0; padding-top: 2px; }
.setup b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; min-width: 150px; }
.setup .n { font-size: 11.5px; color: var(--mute); font-family: var(--mono); }
.setup .v { font-size: 14px; font-weight: 700;
margin-left: auto; color: var(--fg2); }
.setup .v.up { color: var(--up); } .setup .v.down { color: var(--down); }
/* 숫자 앞의 작은 라벨 — 무엇 대비인지 줄 자체가 말해야 한다 */
.setup .gap { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.setup .v i { font-style: normal; font-size: 10.5px; font-weight: 600;
color: var(--mute); margin-right: 5px; }
.hv-block p.sc-meta b { color: var(--fg2); font-weight: 700; }
.setup .cum { font-size: 11.5px; color: var(--mute); font-family: var(--mono);
white-space: nowrap; }
.setup .cum i { font-style: normal; margin-left: 6px; padding: 1px 6px;
border-radius: 20px; background: var(--chip); font-size: 10.5px; }
/* 이번 구간에 잴 게 없던 셋업 — 줄은 남기되 조용히. 빠뜨린 것과 없는 것은 다르다. */
.setup.none b { color: var(--mute); font-weight: 650; }
.setup.none .n { margin-left: auto; }
/* 목록 페이지 — 날짜 + 한 줄 요약이면 고르기 충분하다 */
.hv-list { list-style: none; margin: 0; padding: 4px 0; overflow: hidden; }
.hv-row + .hv-row { border-top: 1px solid var(--hair); }
.hv-row a { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
gap: 10px; padding: 14px 20px; color: var(--fg); }
.hv-row .d { font-size: 13px; font-weight: 700; white-space: nowrap; }
.hv-row .tone { font-size: 11px; font-weight: 700; color: var(--mute); }
.hv-row .h { font-size: 13.5px; color: var(--fg2); line-height: 1.5; }
@media (max-width: 560px) {
.house h1 { font-size: 21px; }
.house .lede { font-size: 16px; }
.hv-block { padding: 15px 16px 17px; }
.ch-row { margin-bottom: 11px; }
.score { padding-left: 11px; gap: 7px; }
.setup b { min-width: 100%; }
.hv-row a { grid-template-columns: 1fr; gap: 4px; padding: 13px 16px; }
.hv-row .tone { display: none; }
}
/* 지난 노트 — 하우스뷰는 발행이 드물어 본문 아래에 붙인다 (별도 아카이브 페이지 없음) */
.hv-past { margin-top: 34px; }
.hv-past h2 { margin: 0 0 10px; font-size: 13.5px; font-weight: 700;
display: flex; align-items: center; gap: 8px; }
/* NEW (새로 들어온 종목) / 표시 상한 안내 —
추세 셋업은 통과 종목이 며칠씩 남는 게 정상이라 목록이 늘 같아 보인다.
무엇이 바뀌었는지 보이면 그 인상이 사라진다. */
.new { font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 1.6;
color: var(--up); background: color-mix(in srgb, var(--up) 11%, transparent);
border-radius: 5px; padding: 1px 5px; vertical-align: 1px; }
.cut { font-size: 10.5px; font-weight: 600; color: var(--mute);
background: var(--chip); border-radius: 20px; padding: 2px 9px; }
/* ---------- 하우스뷰 블록 접기 ----------
2026-08-19 사용자 지적: "내용이 너무 많아. 다 읽는거 자체가 힘들어."
12개 블록이 전부 펼쳐진 채로 나가면 끝까지 읽는 것 자체가 일이다.
**제목 + 한 줄**만 두고 본문은 눌러서 본다 — 버리는 내용은 없다. */
/* 그리드 — flex-wrap 을 쓰면 갈매기가 **세 번째 줄로 밀려나** 혼자 뜨고,
그 빈 줄이 접힌 카드의 하단 여백이 된다 (2026-08-19 실측). 그리드로 두면
갈매기가 오른쪽에 세로 가운데로 붙고 카드 높이가 내용만큼만 남는다. */
/* 유리 패널은 `border-radius: var(--r)` 인데 summary 의 hover 배경은 **각진 사각형**이라
둥근 카드 안에 네모 박스가 뜬다(2026-08-19 사용자: "row 안에 박스만 dimm 돼서 이상해").
일일 페이지는 `.rows` 에 overflow:hidden 이 있어 안 보이던 문제다 — 여기도 맞춘다. */
details.hv-block { overflow: hidden; }
details.hv-block > summary {
display: grid; grid-template-columns: 1fr auto;
align-items: center; column-gap: 12px;
padding: 16px 20px; cursor: pointer; list-style: none; transition: background .12s;
}
details.hv-block > summary::marker,
details.hv-block > summary::-webkit-details-marker { display: none; }
details.hv-block > summary:hover { background: var(--chip); }
details.hv-block > summary:hover .chev { border-color: var(--mute); color: var(--fg); }
details.hv-block > summary:focus-visible { outline: 2px solid var(--up); outline-offset: -2px; }
.hv-t { grid-column: 1; font-size: 14.5px; font-weight: 750; letter-spacing: -.02em; }
.hv-t .count { font-weight: 600; }
.hv-s { grid-column: 1; margin-top: 3px; font-size: 12.5px; color: var(--fg2); line-height: 1.5; }
.hv-s:empty { display: none; }
/* 펼치기 — 11px 갈매기 하나는 글자로 읽힌다. 원형 칩으로 만들어 **누르는 것**임을 알린다. */
details.hv-block > summary .chev {
grid-column: 2; grid-row: 1 / -1;
width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: var(--chip); border: 1px solid var(--hair);
color: var(--fg2);
transition: transform .2s ease, border-color .12s, color .12s;
}
details.hv-block[open] > summary .chev { transform: rotate(180deg); color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }
/* 펼쳤을 때 제목과 본문 사이 여백은 **한 군데서만** 만든다.
summary 아래 패딩(16) + 본문 첫 요소 margin-top(14) 이 겹쳐 빈 줄 하나가 생겼고
(2026-08-19), 게다가 `.hv-block p.sc-meta`(0,2,1)가 `.hv-body > *:first-child`(0,2,0)를
이겨서 블록마다 값이 달랐다. 본문 padding 하나로 고정하고 첫 요소 margin 은 죽인다. */
details.hv-block[open] > summary { padding-bottom: 12px; }
.hv-body { padding: 12px 20px 18px; border-top: 1px solid var(--hair); }
.hv-block .hv-body > *:first-child { margin-top: 0; }
/* 갈매기는 **인라인 SVG** 다. `›` 는 글자라 글리프의 시각 중심이 박스 중심과 달라
아무리 center 를 줘도 미세하게 어긋난다(2026-08-19 실측). 외부 아이콘을 받지
않는 건 정적 사이트에 CDN 의존을 만들지 않기 위해서다 — 차트도 같은 이유로 인라인이다. */
.chev svg { display: block; width: 15px; height: 15px; }
.chev svg path { fill: none; stroke: currentColor; stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round; }
/* 접힘 블록의 모바일 여백 — **파일 끝에 둔다.**
위쪽 `@media (max-width: 560px)` 블록은 아래 데스크톱 규칙보다 먼저 나와서,
같은 특정성이면 뒤가 이겨 override 가 통째로 죽는다 (2026-08-19 실측). */
@media (max-width: 560px) {
details.hv-block > summary { padding: 14px 16px; }
details.hv-block[open] > summary { padding-bottom: 11px; }
.hv-body { padding: 11px 16px 15px; }
.row-fold > summary { padding: 12px 14px; }
.row-fold-body { padding: 0 14px 13px; }
}