링크 스타일 리셋 — 상속 색·하이라이트 제거.
display:none/block 제어는 기존 .landing-page .kroll / .kroll.on 룰 그대로 재사용. */
.landing-page.hub-updown { background:transparent;overflow-x:visible; }
.landing-page a.kroll { color:inherit;text-decoration:none; }
/* ── R125: 롤링 점 인디케이터 — "여러 슬라이드+현재 위치" 상시 신호(모션 아님) ── */
.landing-page .kroll-dots { display:flex;gap:5px;justify-content:center;margin-top:6px; }
.landing-page .kroll-dots span { width:5px;height:5px;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:background .3s; } /* R142c3(사용자 확정): 크기 원복(5px)·상태는 색으로만 */
.landing-page .kroll-dots span:hover { background:#64748b; }
.landing-page .kroll-dots span.on { background:#1e293b; } /* R142c4: 활성 점만 최대 대비(중립 잉크색 — 등락 빨강/파랑과 비충돌) */
/* ── R142: 롤 카드 전면 클릭(stretched-link) — "보이는 슬라이드의 링크가 카드 전체를 덮는다" ──
슬라이드 앵커 구조(내용-링크 일치)를 유지하면서 클릭 영역만 카드 전면으로 확장.
점 인디케이터는 z-index 상위로 클릭 유지. */
.landing-page .card.kpi { position:relative; }
/* CO-05 2026-10-09 · UF-20261009-11 — 클릭 덮개를 ::after → ::before 로 옮김: 같은 ::after 에 걸린 원형 화살표 배지(아래 CO-05 UF-20261009-11 블록 .kpi--multi .kroll::after)를 선택자가 더 세서 content:"" 로 덮어 13장이 빈 동그라미였다(_보고-홈강화-20261009.md 결함 1). 이 카드에 걸린 ::before 규칙은 없음(grep 확인). */
.landing-page a.kroll.on::before { content:""; position:absolute; inset:0; z-index:1; }
.landing-page .kroll-dots { position:relative; z-index:2; }
/* modules.css:5889 */
.module-chart__axis-line { stroke: var(--color-border, #e5e7eb); stroke-width: 1; } /* D6(2026-07-18): 세로 Y축선 — grid와 동일 색·두께·실선(점선 그리드와 구분) */
/* ───────── 브리지(이 사이트 전용 · 라이브 CSS 아님) ─────────
* ① 홈 마크업을 담는 info-box 모듈 껍데기(.module-info-box 배경·테두리·여백)를 무장해제 — 라이브 마크업이 껍데기 없이 보이게.
* ② JS 없이도 롤 카드의 첫 항목·첫 점이 보이게(JS 는 로드 때 같은 on 을 단다).
*/
.module-info-box:has(> .module-info-box__body > .landing-page) { background:none; border:0; border-radius:0; padding:0; margin:0; color:inherit; font-size:inherit; line-height:inherit; }
.module-info-box__body:has(> .landing-page) { font-size:inherit; line-height:inherit; }
.content-section-block:has(> .module-info-box > .module-info-box__body > .landing-page) { margin:0; padding:0; }
.landing-page .kpi__roll:not(:has(.kroll.on)) > .kroll:first-child { visibility:visible; opacity:1; transform:none; }
.landing-page .kroll-dots:not(:has(span.on)) > span:first-child { background:#1e293b; }
.landing-page .qmark:empty::before { content:"Q"; } /* 스키마 글자에 Q 가 섞이지 않게 CSS 로 */
.landing-page .module-faq__q { display:flex; gap:8px; margin:0 0 8px; font-size:16px; font-weight:700; color:var(--lp-text); line-height:1.5; }
.landing-page .module-faq__q .faq__q { margin:0; }
.landing-page .module-faq__a { margin:0; }
.landing-page .faq__a strong { color:var(--lp-text); font-weight:700; }
/* ── CLOUD-SISE-HOME-FIX2 브리지 ──────────────────────────────────────────────
라이브 front-page.php:808 p.disclaimer 는 .sources 카드 안 . 이 사이트의 면책 문장은 disclaimer 모듈(꼬리 절 · 렌더 규칙 면제)이 내므로
모듈 안 에 위 «.landing-page .disclaimer» 와 같은 값을 준다(홈에서만 로드). */
.module-disclaimer .disclaimer { font-size:14px;/* CO-05 2026-10-09 글자 최소(문장형): 12→14 */color:var(--lp-muted);line-height:1.7; }
/* ── CLOUD-SISE-HOME-FIX3 브리지: 히어로 칩 이름 색 — 라이브는 검정(--lp-text). 사이트 본문 링크색(파랑)이 span 에 먹지 않게 홈 범위로 고정 ── */
.landing-page a.chip, .landing-page a.chip:hover, .landing-page a.chip .chip__name { color:var(--lp-text); }
/* ── CLOUD-SISE-T01-HOME-FIX2 브리지(UF-20261008-16·17 · 여백을 라이브와 같게) ────────────────────────────
① 헤더 바로 아래 시세 띠: 이 사이트 셸 헤더에 margin-bottom 20px 이 있어 헤더와 띠 사이가 벌어졌다(라이브 = 0) → 띠(.above-main-block)가 바로 뒤에 올 때만 0.
② 본문 래퍼(.inside-article 좌우 패딩 10px·데스크톱 20px · 사이트 max-width 1300)가 라이브 .landing-page(모바일 전폭 · 컨테이너 패딩 20px) 보다 안쪽이라 모바일 글줄이 30px 에서 시작 → 본문 안 .landing-page 를 히어로·띠와 같은 방식(전폭 · 위 R5)으로 펼친다. 안쪽 .container(max-width 1080 · 패딩 20/36)는 그대로라 글줄 폭·위치는 라이브와 같다. */
/* FIX8 · UF-20261008-45 — 띠가 헤더 묶음 안으로 들어가 이 규칙 불필요(헤더 margin-bottom 20px 은 범용 템플릿 값 그대로 · 띠 아래~본문 사이 여백이 된다)
header:has(+ .above-main-block) { margin-bottom:0; } */
/* CLOUD-SISE-T01-HOME-FIX4→FIX6 · UF-20261008-17·24·27 — 본문 폭·좌우 여백 = «공용 틀». FIX4(홈만 열 1080)·FIX6 1차(라이브 1200 대조)는 철회:
사용자 «너비 좌우 여백을 일반 여백처럼 · 이전에는 본문 좌우 여백이 있었어»(UF-20261008-27) → 홈도 다른 페이지(page/about 등)와 같은 사이트 셸 틀(.site 1300 · .inside-article 좌우 패딩 20px(768px 이하 10px)) 안에 선다.
랜딩 안쪽 .container 만 공용 본문 안쪽 칸(about 실측 15px · 폭 제한 없음)에 맞춘다(라이브 .container 1080·20/36 은 라이브 열 전용 값). 사이드바: 홈 매니페스트에 없음(no-sidebar) → 만들지 않음. */
/* 라이브 .landing-page a{text-decoration:none}(modules.css:11522) 가 이 사이트 본문 링크 밑줄(.entry-content a)과 같은 특이성이라 밑줄이 이겼다 — 카드·칩 링크 밑줄 0 */
.inside-article .landing-page a, .inside-article .landing-page a:hover { text-decoration:none; }
/* ③ 라이브 GP 테마 main.min.css 는 p 마다 margin-bottom:1.5em(위 0)을 준다(라이브 hero__editorial-note 가 CSS 규칙 없이 0 0 24px 인 까닭) — 이 사이트 셸 p 는 위아래 16px 이라 같은 글줄이 8px 어긋났다. 라이브에 클래스 규칙이 있는 p 는 위 규칙(특이성 더 큼)이 그대로 이긴다. */
.landing-page p { margin:0 0 1.5em; }
/* ④ 라이브 .src-chip 기본 규칙(modules.css:11457-11469 · 위 .landing-page .src-chip 이 색·굵기·테두리를 덮고 display·gap·정렬만 남는다) + 라이브 GP 테마 main.min.css 의 small{font-size:75%} · button/select line-height:1.5 — 이 사이트 셸은 small 83%·button/select line-height normal 이라 글줄 높이가 어긋났다 */
.landing-page .src-chip { display:inline-flex;align-items:center;gap:4px;white-space:nowrap; }
.landing-page small { font-size:75%;line-height:inherit; }
.landing-page button, .landing-page select { line-height:1.5; }
.above-main-block a, .above-main-block a:hover { text-decoration:none; } /* 흐르는 시세판 링크 밑줄 0(라이브 .landing-page a — modules.css:11522) */
/* ── CLOUD-SISE-T01-HOME-FIX5 ───────────────────────────────────────────────────────────
① 카드 3장 줄(앱층·히어로 뒤) = 3열(4열에 3장이면 오른쪽 한 칸이 비었다) · 640px 이하 1열(3장·빈 칸 0) — 라이브 .board 4열 기본(modules.css:11679)은 그대로, 이 두 줄만 data-cols="3"
② 렌더러가 첫 본문 절 끝에 붙이는 서사·해설 블록(render.mjs supplementHtml · 랜딩 래퍼 밖)은 카드 열(.container 패딩 20/36 · modules.css:11529-11530)과 같은 안쪽 여백 */
.landing-page .board[data-cols="3"] { grid-template-columns:repeat(3,1fr); }
@media(max-width:640px) { .landing-page .board[data-cols="3"] { grid-template-columns:1fr; } }
.inside-article:has(.landing-page) .content-section-block > [data-narrative],
.inside-article:has(.landing-page) .content-section-block > [data-explain] { padding-left:0; padding-right:0; } /* 본문 열 하나 — 안쪽 여백 0(UF-20261008-42) */
/* ── CLOUD-SISE-T01-HOME-FIX6 · UF-20261008-26 «메뉴 밑 시세 요약 흐르는 시세 전부 언더라인이 있어. 수정해» ───────────────────────────
원인: info-box 모듈 CSS `.module-info-box.module-info-box a{color:#1a73e8;text-decoration:underline}`(특이성 0,3,1)·`a:hover{color:#c2410c}`(0,4,1)가
라이브 규칙 `.ticker-item{text-decoration:none}`(modules.css:11561 · 0,1,0)·`.landing-page a{text-decoration:none}`(:11522 · 0,1,1)보다 세다.
라이브 계산값(Playwright 1440px · 일반/hover 모두): a.ticker-item text-decoration-line none · color rgb(26,115,232) · 배경 투명 → 같은 값으로(core/modules 편집 0). */
.module-info-box.module-info-box .summary-strip a,
.module-info-box.module-info-box .landing-page a { text-decoration:none; }
.module-info-box.module-info-box .landing-page a:hover { color:#1557b0; text-decoration:none; } /* 라이브 .landing-page a:hover (modules.css:11523) */
/* FIX10 · UF-20261008-50 (최종안) — ① 묶음 박스 = 라이브 hover 효과 그대로: 라이브 modules.css:11562 `.ticker-item{padding:0 8px;border-radius:4px}` · :11563 `.ticker-item:hover{background:rgba(255,255,255,.08)}` · 전환 0.1s(라이브 GP 테마 main.min.css 의 a{transition:color .1s,background-color .1s} 값 — 이 사이트 셸엔 없어 직접)
② 그 위에 품목명·가격(흰 글자)만 노랑(--lp-amber-on-dark) ③ 등락(.tk-chg)은 건드리지 않음(상승 빨강·하락 파랑 SSOT) ④ :focus-visible = 라이브 윤곽선(outline 2px solid rgb(26,115,232) · offset 2px · 배경 투명) + 노랑 글자 · 밑줄 0.
(앞서 «hover 계산값 = 일반과 같음» 주장은 전환 0.1s 첫 순간을 잰 오류 — 정정.) info-box 공용 링크색(0,3,1)이 덮지 못하게 같은 선택자 깊이로. */
.module-info-box.module-info-box .summary-strip a.ticker-item { color:var(--lp-link); background:transparent; text-decoration:none; transition:color .1s ease-in-out, background-color .1s ease-in-out; }
.module-info-box.module-info-box .summary-strip a.ticker-item:hover { color:#1557b0; background:var(--lp-tick-hover-bg); text-decoration:none; } /* 라이브 a 계산 color = .landing-page a:hover #1557b0 (자식 글자는 각자 색이라 화면에는 안 보임) */
.module-info-box.module-info-box .summary-strip a.ticker-item:hover .tk-name, .module-info-box.module-info-box .summary-strip a.ticker-item:hover .tk-price,
.module-info-box.module-info-box .summary-strip a.ticker-item:focus-visible .tk-name, .module-info-box.module-info-box .summary-strip a.ticker-item:focus-visible .tk-price { color:var(--lp-amber-on-dark); }
.module-info-box.module-info-box .summary-strip a.ticker-item:focus-visible { color:var(--lp-link); background:transparent; text-decoration:none; outline:2px solid var(--lp-link); outline-offset:2px; }
.ticker-item .tk-name, .ticker-item .tk-price { transition:color .1s ease-in-out; }
/* ── CLOUD-SISE-T01-HOME-FIX6 · UF-20261008-24·27 — 흐르는 시세판 줄: 헤더 아래 전체 폭 밴드는 그대로 · 안쪽 글자 열만 공용 본문 틀에 맞춤
(공용 틀 = .site max 1300 가운데 + .inside-article 패딩 20px(≤768px 10px) + 안쪽 15px → 글자 왼쪽 끝 = 다른 페이지 본문 글자 왼쪽 끝) */
.above-main-block .landing-page div.container.summary-strip__row { max-width:1300px; margin:0 auto !important; padding-left:35px !important; padding-right:35px !important; }
@media (max-width:768px) { .above-main-block .landing-page div.container.summary-strip__row { padding-left:25px !important; padding-right:25px !important; } }
/* ── CLOUD-SISE-T01-HOME-FIX6 · UF-20261008-25 «위 히어로 와의 간격이 없어» ────────────────────────────────────────
라이브 절 사이 간격 = .block 위·아래 36px 만(modules.css:11538 `.landing-page .block{padding:36px 0}` · 마진 0) — 히어로는 앞 블록 바닥 36px 뒤에 선다.
우리 히어로 위 카드 줄은 .block 없이 바로 붙어 간격 0 이었다 → 앱층·히어로 뒤 카드 줄을 매니페스트에서 라이브 .block 으로 감쌌다(위아래 36px).
빈 서사 자리(data-narrative-empty · 글자 0)는 셸 위 여백 22px 만 남기므로 0 으로(글자가 있는 서사 블록은 그대로). */
.content-section-block > [data-narrative-empty="1"], .content-section-block > [data-explain][data-explain-empty="1"] { margin:0; padding:0; }
/* ── CLOUD-SISE-T01-HOME-FIX6 덧붙임 7 · UF-20261008-31(즉답을 히어로 아래로) ───────────────────────────────────────────
① 시세판 → 히어로 간격 0(라이브 modules.css 구조: .summary-strip 바로 다음 .hero · 마진 0) — 셸 .inside-article 위 패딩 40px(≤820px 30px)이 벌렸다 → 홈은 위 패딩 0
② 히어로 → 즉답 간격 = 라이브 절 사이 간격 36px(.block 위아래 36px · modules.css:11538) */
/* FIX8 · UF-20261008-45 — 범용 본문 위 여백(.inside-article padding-top 40px · ≤820px 30px)을 그대로 쓴다: 옛 «히어로 붙임» 0 은 철회
.inside-article:has(.landing-page .hero) { padding-top:0; } */
/* ③ 공용 틀(.site 1300 · 래퍼 패딩) 안에서는 라이브의 100vw «뷰포트 전폭 띠»(modules.css:11516-11520 · 라이브는 1080 열에 잘려 열 폭 띠가 됨)가 열 안에서 잘려 글이 밀린다 → 열 폭(width:auto)으로. 흐르는 시세판(헤더 아래 전체 폭)은 그대로. */
.inside-article .landing-page .hero, .inside-article .landing-page .block--tint { width:auto; margin-left:0; }
/* ── 등락 색 SSOT(UF-20261008-35) — 추이선·끝점: 마크업 stroke/fill 속성(라이브 정적 SVG 와 같은 hex · 수집기용)을 홈에서는 토큰이 덮는다 ── */
.landing-page svg polyline.sp-up { stroke:var(--lp-up); }
.landing-page svg polyline.sp-down { stroke:var(--lp-down); }
.landing-page svg polyline.sp-flat { stroke:var(--lp-flat); }
.landing-page svg circle.sp-up { fill:var(--lp-up); }
.landing-page svg circle.sp-down { fill:var(--lp-down); }
.landing-page svg circle.sp-flat { fill:var(--lp-flat); }
/* ── CLOUD-SISE-T01-HOME-FIX6 덧붙임 15~18 · UF-20261008-36·40·42·43 — 범용 템플릿 레이아웃: «본문 = 열 1개 · 그 안에 절이 쌓임» ──────────────────────────────
기준 = page/about 조립 출력: 셸 › main.site-main › article › .inside-article(패딩 20px/≤768px 10px) › .entry-content › section.content-section-block × N (절 간 바깥 틀 0).
라이브 내용 마크업(히어로·kpi 판·오른/내린 등)이 가진 홈 전용 틀(.landing-page › .block › .container)은 «내용 안쪽 감싸개»일 뿐 열 폭·여백을 다시 정하지 않게 0 으로 눕힌다 — 열 폭은 .inside-article 하나가 정한다.
(라이브 CSS 가 .landing-page 조상을 전제로 거는 규칙은 그대로 살아 있다: 마크업은 절마다 한 번씩 두되 폭·패딩·바탕·간격을 정하지 않는다 — 본문 열에 한 번만 두는 방식은 렌더러(절마다 모듈 감싸개) 편집이 필요해 이 PR 범위 밖 · 근거 = 홈 범위 CSS 로 선택자 맞춤) */
.inside-article:has(.landing-page) .landing-page { background:none; overflow:visible; width:auto; margin:0; }
.inside-article:has(.landing-page) .landing-page div.container { max-width:none; margin:0 !important; padding-left:0 !important; padding-right:0 !important; }
.inside-article:has(.landing-page) .landing-page .block { padding:0; background:#fff; }
.inside-article:has(.landing-page) .landing-page .block--tint { background:#fff; } /* 회색 바탕 없앰(UF-20261008-40 · #F1F5F9 · 띠 #EEF2F7 도 같은 취지) */
/* 히어로(라이브 짙은 판)는 열 폭 판 · 안쪽 글자 여백만 라이브 값(20/36px · modules.css:11529-11530) */
.inside-article:has(.landing-page) .landing-page .hero__inner.container { padding-left:20px !important; padding-right:20px !important; }
@media (min-width:821px) { .inside-article:has(.landing-page) .landing-page .hero__inner.container { padding-left:36px !important; padding-right:36px !important; } }
/* 절 간격 한 규칙: 절과 절 사이 36px(라이브 .block 위아래 36px = modules.css:11538 의 한 쪽 값) — 히어로 절(첫 절)은 위 0 */
.inside-article:has(.landing-page) .content-section-block { margin:0; padding:0; }
.inside-article:has(.landing-page) .content-section-block + .content-section-block { margin-top:36px; }
/* 흰 바탕 하나: 모듈 감싸개(앱층 타일·라이브 마크업을 담는 껍데기 = 본문 첫 자식이 .landing-page 인 info-box)의 바탕·테두리·여백 0 은 위 :466 규칙이 이미 한다.
CO-05 2026-10-09 · UF-20261009-38 · 사용자 «info-box 디폴트로 해둬» · 여기 있던 옛 규칙 «.module-info-box--plain {바탕 투명·테두리 0·안쪽 여백 0}» 은 홈의 «모든» plain info-box 를 껍데기로 보고 지워서,
글이 보이는 info-box(가이드 안내·휘발유 평균 문장·서사 상자 등)도 테두리·바탕이 0 이었다 → 이 규칙을 뗐다(되돌리기 = git 이력 5fba6288). 글이 들어 있는 plain info-box 는 info-box 모듈 기본 모양(옅은 회색 바탕 + 사방 1px 옅은 테두리 + 안쪽 여백) 그대로 보인다.
UF-20261009-35 가 서사 상자에만 따로 넣었던 바탕·테두리 규칙(고정 색 값 둘)도 같은 이유로 뗐다 — 이 홈 CSS 는 그 값을 다시 적지 않는다(고정 색 0 · IV-027) · 되돌리기 = git 이력 1b314291 */
/* 사용자 지시 UF-20261008-44 2026-10-08 «홈에도 사이드바» — 본문 열이 공용 틀 폭(about 과 같음: 1920·1440 = 920 · 1280 = 900 · 768 = 748)으로 좁아짐.
라이브 격자 열 수 규칙(modules.css 라이브 미디어 쿼리: board ≤900 → 3열 ≤640 → 2열 · chips/guides ≤820 → 2열 · answers ≤820 → 2열 ≤560 → 1열 — 위 :222-224·149-150·276-278·314-316)은 그대로 쓰고,
마지막 줄이 덜 찼을 때(예: 4열에 10장 → 끝 2칸 빔) 끝 카드를 남은 칸만큼 넓혀 «빈 칸 0». 카드 수와 무관한 구조 선택자(:nth-child/:last-child) · 숨은 카드 없음. */
/* FIX9-2 로 바뀜: 12칸 격자 방식(아래 «FIX9-2 12칸» 블록) — 옛 4/2칸 span 규칙은 3장 남는 줄(11장 등)을 못 채워 대체(보존: git 이력 b8ca6736) */
/* 사용자 지시 UF-20261008-FIX9-1 2026-10-08 «꼬리 4절 첫 글자 left 2회째 어긋남» — 원인(조상 사슬 표 = PR 문서): faq·sources 는 «글자를 직접 가진 요소(h2)»의 왼쪽이 절 왼쪽(330)과 같고(왼쪽 막대 border 3~4px + padding 15~16px 은 h2 안쪽), disclaimer·share 는 글자 요소(strong/p · h3)가
공용 모듈 상자(.module-disclaimer 상자: core/modules/display/disclaimer/style.css:1~11 itemized `border:1px; padding:14px 15px; background` · .module-share-buttons 상자: share-buttons/style.css padding 24 + border 1)의 안쪽 여백만큼(20~25px) 들어가 있어
FIX7 의 +18px 보정이 오히려 19px 어긋남을 만들었다. 홈 범위에서 두 상자의 좌우 여백·테두리·바탕을 0 으로 눕혀(UF-40 «의도한 카드 외 바탕 0» 과도 일치) 네 절 글자 요소 left 를 절 left 와 같게 한다. core/modules 편집 0. */
/* UF-20261008-60 공용 모듈 박스 복원 — 아래 4규칙(FIX9-1 에서 «첫 글자 left 맞추려고» 공용 disclaimer(itemized)·share-buttons 박스의 border·padding·radius·background 와 ul 모양을 벗김)은 주석 처리(삭제 0).
공용 모듈 박스(core/modules/display/disclaimer/style.css:2 border 1px · padding 14px 15px · radius · background / share-buttons 박스)가 그대로 나온다. 꼬리 4절 정렬 기준은 «절·모듈 바깥선(박스 left/right)» 으로 바뀜(박스 안 글자가 안쪽 여백만큼 들어가는 것은 정상).
.inside-article:has(.landing-page) #disclaimer .module-disclaimer,
.inside-article:has(.landing-page) #share .module-share-buttons { padding-left:0; padding-right:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.inside-article:has(.landing-page) #disclaimer .module-disclaimer ul { margin:0; padding:0; list-style:none; }
.inside-article:has(.landing-page) #disclaimer .module-disclaimer li { margin:0; padding:0; }
*/
.inside-article:has(.landing-page) #sources .module-sources__section-title { border-left-width:3px; padding-left:16px; }
/* 사용자 지시 UF-20261008-46 2026-10-08 «전체 21개 시세 보기 ↓ — 히어로 글자 라이브처럼 화이트»
원인 = 공용 info-box 모듈 CSS core/modules/display/info-box/style.css:65 `.module-info-box.module-info-box a{color:#1a73e8}`(0,3,1)가 라이브 규칙
`.landing-page .hero__all{color:#fff}`(위 :157 · modules.css 라이브 · 0,2,0)을 이김(hover 는 :66 `a:hover{color:#c2410c}`(0,4,1) + 셸 a:hover). 홈 범위 CSS 로만 더 높은 특이성(0,5,1)으로 라이브 값 복원 · core/modules 편집 0. */
.module-info-box.module-info-box .landing-page .hero a.hero__all, .module-info-box.module-info-box .landing-page .hero a.hero__all:hover { color:#fff; text-decoration:none; }
/* 사용자 지시 UF-20261008-FIX9-2 2026-10-08 «격자 마지막 줄 빈 칸» — 공용 card-grid 모듈 격자(mover 6장 · recent-content 9장 · 4열에서 2·3칸 빔)는 자동 열 격자라 칸 수 규칙으로 못 채움 →
홈 범위에서 줄바꿈 flex(기본 폭 200px · 남는 폭은 그 줄 카드가 나눠 가짐)로: 카드 수와 무관하게 마지막 줄 빈 칸 0 · 카드 삭제 0 · 한 줄 최소 폭은 원래 격자(auto-fit minmax(200px,1fr))와 같다. core/modules 편집 0. */
.inside-article:has(.landing-page) .module-card-grid { display:flex; flex-wrap:wrap; gap:16px; }
.inside-article:has(.landing-page) .module-card-grid > * { flex:1 1 200px; min-width:0; }
/* FIX9-2 12칸 — board·chips·guides(라이브 격자)를 12칸 트랙으로 보고 카드마다 «열 수에 맞는 칸 수»(4열=3칸 · 3열=4칸 · 2열=6칸 · 1열=12칸)를 줘 보이는 모양은 라이브와 같다.
마지막 줄이 덜 차면(n mod 열 = r) 남은 r장이 12칸을 나눠 가짐(1장=12 · 2장=6 · 3장=4) → 카드 수와 무관하게 빈 칸 0. 열 수 전환 폭은 라이브 미디어 쿼리 그대로
(board ≤900 3열 ≤640 2열 · chips ≤820 2열 · guides ≤820 2열 ≤480 1열 · 위 :149-150·222-224·314-316). 폭 구간마다 규칙을 따로 둬(min/max-width) 좁은 폭의 칸 수가 넓은 폭의 마지막 줄 규칙에 덮이지 않게 한다
(FIX10-3: 이전 판은 기본 규칙 특이성이 커 11장·360px 에서 끝에서 셋째·둘째 카드가 4칸으로 남아 한 줄이 비었다). data-cols="3"(인기 시세 바로가기 6장)은 제외. */
.landing-page :is(.board, .chips, .guides):not([data-cols]) { grid-template-columns:repeat(12,1fr); }
@media (min-width:901px) {
.landing-page .board:not([data-cols]) > * { grid-column:span 3; }
.landing-page .board:not([data-cols]) > :nth-child(4n+1):nth-last-child(1) { grid-column:span 12; }
.landing-page .board:not([data-cols]) > :nth-child(4n+1):nth-last-child(2),
.landing-page .board:not([data-cols]) > :nth-child(4n+2):nth-last-child(1) { grid-column:span 6; }
.landing-page .board:not([data-cols]) > :nth-child(4n+1):nth-last-child(3),
.landing-page .board:not([data-cols]) > :nth-child(4n+2):nth-last-child(2),
.landing-page .board:not([data-cols]) > :nth-child(4n+3):nth-last-child(1) { grid-column:span 4; }
}
@media (min-width:641px) and (max-width:900px) {
.landing-page .board:not([data-cols]) > * { grid-column:span 4; }
.landing-page .board:not([data-cols]) > :nth-child(3n+1):nth-last-child(1) { grid-column:span 12; }
.landing-page .board:not([data-cols]) > :nth-child(3n+1):nth-last-child(2),
.landing-page .board:not([data-cols]) > :nth-child(3n+2):nth-last-child(1) { grid-column:span 6; }
}
@media (max-width:640px) {
.landing-page .board:not([data-cols]) > * { grid-column:span 6; }
.landing-page .board:not([data-cols]) > :nth-child(2n+1):nth-last-child(1) { grid-column:span 12; }
}
@media (min-width:821px) {
.landing-page .chips:not([data-cols]) > * { grid-column:span 3; }
.landing-page .chips:not([data-cols]) > :nth-child(4n+1):nth-last-child(1) { grid-column:span 12; }
.landing-page .chips:not([data-cols]) > :nth-child(4n+1):nth-last-child(2),
.landing-page .chips:not([data-cols]) > :nth-child(4n+2):nth-last-child(1) { grid-column:span 6; }
.landing-page .chips:not([data-cols]) > :nth-child(4n+1):nth-last-child(3),
.landing-page .chips:not([data-cols]) > :nth-child(4n+2):nth-last-child(2),
.landing-page .chips:not([data-cols]) > :nth-child(4n+3):nth-last-child(1) { grid-column:span 4; }
}
@media (max-width:820px) {
.landing-page .chips:not([data-cols]) > * { grid-column:span 6; }
.landing-page .chips:not([data-cols]) > :nth-child(2n+1):nth-last-child(1) { grid-column:span 12; }
}
@media (min-width:821px) {
.landing-page .guides:not([data-cols]) > * { grid-column:span 3; }
.landing-page .guides:not([data-cols]) > :nth-child(4n+1):nth-last-child(1) { grid-column:span 12; }
.landing-page .guides:not([data-cols]) > :nth-child(4n+1):nth-last-child(2),
.landing-page .guides:not([data-cols]) > :nth-child(4n+2):nth-last-child(1) { grid-column:span 6; }
.landing-page .guides:not([data-cols]) > :nth-child(4n+1):nth-last-child(3),
.landing-page .guides:not([data-cols]) > :nth-child(4n+2):nth-last-child(2),
.landing-page .guides:not([data-cols]) > :nth-child(4n+3):nth-last-child(1) { grid-column:span 4; }
}
@media (min-width:481px) and (max-width:820px) {
.landing-page .guides:not([data-cols]) > * { grid-column:span 6; }
.landing-page .guides:not([data-cols]) > :nth-child(2n+1):nth-last-child(1) { grid-column:span 12; }
}
@media (max-width:480px) {
.landing-page .guides:not([data-cols]) > * { grid-column:span 12; }
}
/* FIX9-2 answers(즉답 3장 · 라이브 ≤820 2열 ≤560 1열): 2열에서 홀수 마지막 카드는 두 칸 */
@media(max-width:820px) { .landing-page .answers:not([data-cols]) > :nth-child(2n+1):last-child { grid-column:span 2; } }
@media(max-width:560px) { .landing-page .answers:not([data-cols]) > :nth-child(2n+1):last-child { grid-column:auto; } }
/* 사용자 지시 UF-20261008-51 2026-10-08 «홈 빵부스러기 없음 → 히어로 위 여백/좌우 여백이 about(빵부스러기 있음)과 조금 다르다 — B: 빵부스러기 없이 여백만 범용 템플릿과 같게»
about 실측(1920/360, playwright 계산값): 헤더 아래끝 → 빵부스러기 위끝 40px(≤820px 30px = .inside-article padding-top · shell.css:93·105) · 빵부스러기 높이 21px(margin-top −20 / margin-bottom +20 상쇄 포함 21px) ·
빵부스러기 아래끝 → 본문 첫 절 위끝 20px 포함 → 첫 절 위끝 = 헤더 아래끝 + 81px(1920) / +71px(360). 홈은 빵부스러기를 두지 않으므로(숨김 유지 · 이동 기능 0 · 라이브 홈에도 없음) 그 21px 를 본문 위 여백으로 더해
히어로 위끝 = about 본문 첫 절 위끝과 같게 둔다(시안 판단: about «헤더 → 본문 첫 절» 전체 간격). 좌우: 히어로 판 바깥선 = entry-content 폭 = about 본문 첫 절 좌우(330~1250 · 360px 10~350)로 이미 같다.
사이드바(side-by-side ≥769px)는 flex 맨 위(.site-content 위끝)에서 시작해 본문(article 패딩 40/30 + 21)보다 위라, 같은 만큼 내려 사이드바 첫 요소 top = 히어로 top. */
/* .inside-article:has(.landing-page .hero) .entry-content { padding-top:21px; } */
/* @media (min-width:769px) { body:has(.landing-page .hero) .info-sidebar { margin-top:61px; } } */
/* @media (min-width:769px) and (max-width:820px) { body:has(.landing-page .hero) .info-sidebar { margin-top:51px; } } */
/* 정정: UF-20261008-55 · 지휘자 해석 오류 — 위 UF-51 은 히어로를 about «본문 첫 절» 위치(빵부스러기 높이 21px 포함)에 맞췄으나, 바른 기준은 «본문 박스(main 열) 상단 = 사이드바 상단 = 히어로 상단» 세 선이 같고 그 위치 = about 에서 빵부스러기가 시작하는 위치. 따라서 히어로 위 +21px(.entry-content padding-top)와 사이드바 margin-top 61/51px 는 넣지 않는다(위 3줄 주석 처리·삭제 0). 띠 아래 → 본문 박스 상단 간격은 FIX8 의 21px(about 20px) 그대로. */
/* 사용자 지시 UF-20261008-58 2026-10-08 «부동산 가이드 전체 보기 → — 히어로 안 이 글자도 파랑색이라서 배경과 비슷해서 구분이 잘 안 돼» — 히어로(짙은 판 #1e3a8a→#1e293b) 안 글 속 링크는 공용 링크 파랑(info-box 모듈 CSS a{color:#1a73e8}·--lp-link)이라 배경과 섞임 →
시세판 hover 와 같은 밝은 노랑 SSOT 토큰(--lp-amber-on-dark)으로. 밑줄은 hover·focus-visible 때만. 제외: 버튼 a.hero__all(흰색 유지) · a.chip(흰 카드 안 글자). 선택자는 히어로 구조(.landing-page .hero)에만 기대고 옛 조상(.module-info-box)에 기대지 않으며
특이성 (0,4,1)/(0,5,1)로 info-box 공용 링크 규칙((0,3,1)/(0,4,1))을 이긴다. 짙은 바탕 판 a 전수(grep): 히어로 = 글 속 링크 1종(부동산 가이드 전체 보기) + 버튼 + 칩(흰 카드) · 시세 요약 띠 = a.ticker-item(위 UF-50 규칙 · 글자색은 각 span 이 정함) — 그 밖 짙은 바탕 판에 a 없음. */
.landing-page .hero a:not(.hero__all):not(.chip) { color:var(--lp-amber-on-dark); text-decoration:none; }
.landing-page .hero a:not(.hero__all):not(.chip):hover, .landing-page .hero a:not(.hero__all):not(.chip):focus-visible { color:var(--lp-amber-on-dark); text-decoration:underline; }
/* 사용자 지시 UF-20261008-59 2026-10-08 «히어로를 더 올려야 해. 좌우 여백과 동일하게 · 브레드크럼이 없어서» — 원인: sites/sise/shell/shell.css:93 `.inside-article{padding:40px 20px 20px}`(:105 ≤820px 위 30 · :108 ≤768px 좌우 10). 범용 페이지는 이 위 40 안에 빵부스러기가 있다.
빵부스러기 없는 홈(히어로가 있는 본문)에서만 위 padding = 그 폭의 좌우 padding(≥769px 20 · ≤768px 10)으로. 공용 셸 규칙은 그대로 · 사이드바 top = 본문 박스 top(.site-content 위끝) 그대로. */
.inside-article:has(.landing-page .hero) { padding-top:20px; }
@media (max-width:768px) { .inside-article:has(.landing-page .hero) { padding-top:10px; } }
/* 사용자 지시 UF-20261008-FIX11-4 2026-10-08 (3회째 FAIL · 방식 변경) — 열 수를 칸 수 규칙으로 맞추던 방식 대신 «줄바꿈 flex + 카드 flex-grow»: 마지막 줄 카드가 늘어나 카드 수와 무관하게 빈 칸 0.
① #live-price 의 .board 두 개(10장·22장): 4열(≥901px) / 3열(641~900px) / 2열(≤640px) — gap 14px 는 라이브 .board gap 그대로, 한 줄 카드 수는 flex-basis calc((100% - (열-1)*gap)/열) 로 · min-width 0 (카드 안 글이 넘치지 않게 grid 때와 같은 줄바꿈)
② 360(≤640px) 구간 한정: 히어로 칩(.chips · gap 10px) · 시세판 kpi(#today-board .board) 2열 flex 채움(11장이면 마지막 카드가 한 줄 전체). 넓은 화면의 칩·시세판·guide 는 라이브 빈 칸 수 이하라 그대로. */
#live-price .board { display:flex; flex-wrap:wrap; gap:14px; }
#live-price .board > * { flex:1 1 calc((100% - 3 * 14px) / 4); min-width:0; grid-column:auto; }
@media (min-width:641px) and (max-width:900px) { #live-price .board > * { flex-basis:calc((100% - 2 * 14px) / 3); } }
@media (max-width:640px) {
#live-price .board > * { flex-basis:calc((100% - 14px) / 2); }
#today-board .board { display:flex; flex-wrap:wrap; gap:14px; }
#today-board .board > * { flex:1 1 calc((100% - 14px) / 2); min-width:0; grid-column:auto; }
.landing-page .chips:not([data-cols]) { display:flex; flex-wrap:wrap; gap:10px; }
.landing-page .chips:not([data-cols]) > * { flex:1 1 calc((100% - 10px) / 2); min-width:0; grid-column:auto; }
}
/* 사용자 지시 UF-20261008-65 2026-10-08 «kpi__group 글자 크기 너무 작지 않아? 품목명은 어느 정도 사이즈는 돼야» — 카드 작은 글자 13px 하한(위 kpi__group·.u·kpi__dual·kpi__ts·kpi__week·kroll__name 13px · 품목명 kpi__label 15px·가격 22px 그대로).
추이선 기간 라벨(SVG text)은 viewBox 단위라 카드 폭 180px 이상에서 실제 px = font-size 이므로 매니페스트 text font-size 9 → 13 (밴드 y 44 · 높이 46, home-movers spark_h). */
/* 사용자 지시 UF-20261008-67 2026-10-08 «롤링 항목이 없는 1개 품목일 경우 선택 포인트 1개가 나오고 있어 — 안 나오게» — 항목이 1개뿐인 카드(국제유가 · 예금·적금 등: 우리 구성이 분야 1행도 kpi--multi 틀로 냄)는 점(.kroll-dots)·탭(.item-tabs)을 숨긴다.
근거: 라이브 landing-helpers.php 는 roll 항목이 2개 미만이면 롤 자체를 만들지 않아(`'roll' => count($roll) >= 2 ? $roll : null`) 점이 없다(라이브 home.html 에 kroll 1개짜리 롤 0건). 1순위(마크업에서 빼기)는 매니페스트 $each 가 «분야별 행 수»를 셀 수 없어(_n 은 전체 목록 번호) 불가 → CSS(:has) + home-live.js(rolls.length<2 → 점 숨김) 이중으로. */
.landing-page .kroll-dots:not(:has(> span:nth-child(2))) { display:none; }
.landing-page .item-tabs:not(:has(> .itab:nth-child(2))) { display:none; }
/* CO-05 2026-10-09 · CLOUD-SISE-T01-HOME-CANDLE · UF-20261009-04 — 코인 롤 슬라이드 스파크 = 범용 봉 타일(app-layer viz=candle · 새 class·새 그리기 0): 크기·간격만 카드 스파크 자리(180×28)에 맞추고 색 토큰만 이 사이트 등락색(상승 빨강·하락 파랑 · UF-53)으로 */
.landing-page .kpi__spark-area .kpi__candles { height:28px;gap:2px;padding:0;border-bottom:0;--up:var(--lp-up);--dn:var(--lp-down); }
.landing-page .kpi__spark-area .kpi__candles .module-app-layer__data-story-tile-candle::after { width:min(9px,80%); }
/* CO-05 2026-10-09 · UF-20261009-11 «타일 카드 중 링크 표시용 원형 화살표가 있는 곳/없는 곳 · 일관성있게» — 링크 카드는 전부 앱층 타일의 같은 원형 화살표 배지(core/modules/display/app-layer/style.css:1277 .u-row-entrance-arrow-badge + :1279 --card 위치 top/right 10px + :1286 hover)와 같은 크기·색·위치로.
홈 카드는 매니페스트 마크업을 고치지 않고 ::after 로 같은 규칙을 옮겼다(모듈 마크업 요소 대신 의사요소 · 규칙 값 동일). 링크가 아닌 카드(.card.feature 차트 카드 등)에는 붙이지 않는다. 예외: 히어로 칩(.chip 알약)·지역 행(.rrow 「조회 →」 글자 있음)은 카드가 아니다. */
.landing-page a.card.kpi, .landing-page .kpi--multi, .landing-page .acard,
.inside-article:has(.landing-page) .module-card-grid__vertical { position:relative; }
.landing-page a.card.kpi::after, .landing-page .kpi--multi .kroll::after, .landing-page .acard::after,
.inside-article:has(.landing-page) .module-card-grid__vertical::after {
content:"\2192"; position:absolute; top:10px; right:10px; margin:0; display:inline-grid; place-items:center; width:19px; height:19px; border-radius:999px; background:var(--surf2); border:1px solid var(--line2); color:var(--mut); font-size:13px; font-weight:800; line-height:1; text-align:center; letter-spacing:normal;
transition:transform .13s ease, background .13s ease, color .13s ease, border-color .13s ease; pointer-events:none;
}
.landing-page a.card.kpi:hover::after, .landing-page a.card.kpi:focus-visible::after,
.landing-page .kpi--multi:hover .kroll.on::after, .landing-page .kpi--multi:focus-within .kroll.on::after,
.landing-page .acard:hover::after, .landing-page .acard:focus-within::after,
.inside-article:has(.landing-page) .module-card-grid__vertical:hover::after, .inside-article:has(.landing-page) .module-card-grid__vertical:focus-visible::after {
background:var(--acc); border-color:var(--acc); color:#fff; transform:translateX(2px);
}
/* CO-05 2026-10-09 · UF-20261009-13 «나란히 나오는 타일 카드는 긴 쪽(그 줄의 가장 긴 카드) 기준으로 일관성있게 · 오른/내린도 높이 안 맞아 · 정기예금(차트 없는 짧은 카드)도» —
① .board 는 grid-auto-rows:1fr 이라 «보드 전체에서 가장 긴 줄»에 모든 줄이 맞춰졌다 → 줄마다 자기 줄 가장 긴 카드로(auto + 격자 stretch). 롤링 카드는 슬라이드를 한 칸에 겹쳐 높이가 고정이라(R122) 출렁임 없음.
② .lp-updown 은 상승·하락 두 묶음이 따로 높이를 정해 같은 줄이 어긋났다 → 묶음을 같은 높이로 늘리고 안쪽 줄은 1fr 로 나눠 같은 번호 줄끼리 높이가 같게.
카드 안은 위에서부터 같은 순서, 출처 줄은 .kpi__ts{margin-top:auto} 로 맨 아래 고정(R13 그대로). */
.landing-page .board { grid-auto-rows:auto; }
.landing-page .board > .kpi, .landing-page .board > .acard { height:auto; }
.landing-page .lp-updown__group { display:flex; flex-direction:column; }
.landing-page .lp-updown__cards { flex:1; grid-auto-rows:1fr; }
.landing-page .lp-updown__cards > .kpi { height:auto; }
/* ── 유리 방향 색(CO-05 2026-10-09 · UF-20261009-41 · 사용자 «맞아. 좋은 것은 빨강» · 전 사이트 승격 규칙 09-29 «빨강 = 사용자에게 유리») ─────────────────────────────
위 등락 색 SSOT 머리말의 «품목별로 뒤집지 않음» 은 이 블록으로 대체된다: 상승 = 빨강 은 «받거나 갖는 것»(금·코인·예금 금리·환율 = 현행 그대로)이고,
«내가 내는 돈»(기름값·농축수산) 은 내림 = 빨강(유리) · 오름 = 파랑(불리). 기존 편 표지 body.dir-good-down(sites/sise/shell/shell.css:309~322)이 토큰 --up/--dn 을 맞바꾸는 것과 같은 방식 —
홈은 한 화면에 두 가족이 섞여 있어 «품목 가족 범위»(링크 대상 /fuel/·/produce/·/seafood/·/livestock/ 카드 · 시세판 탭·패널)에만 같은 토큰 맞바꿈을 건다. 고정 hex 0 — 값은 아래 기본 토큰 한 곳.
// simplified: 가족 판별 = 카드 링크 앞부분·패널 id 4개 · 업그레이드 경로 = 굽기가 카드에 good 표지를 직접 싣기 */
:root {
--lp-good: #dc2626; --lp-bad: #2563eb; /* 유리한 변화 = 빨강 · 불리한 변화 = 파랑 */
--lp-good-bg: #fef2f2; --lp-bad-bg: #eff6ff;
--lp-good-dark: #991b1b; --lp-bad-dark: #1e40af;
--lp-good-on-dark: #f87171; --lp-bad-on-dark: #93c5fd;
}
/* CO-05 2026-10-09 · UF-20261009-41 3차 — 국제유가(WTI)도 기름값 가족(오름 ▲ 파랑 · 내림 ▼ 빨강 · 사용자 «WTI 도 기름값 가족»): /oil/ 링크 · 시세판 oil 탭·패널 · 매니페스트가 «대표 3품목» 카드 안 WTI 칸에 단 .lp-oil. 기준금리는 그대로(빌리는 사람·맡기는 사람 갈림) */
:is(a[href^="/fuel/"], a[href^="/gas-station/"], a[href^="/produce/"], a[href^="/seafood/"], a[href^="/livestock/"], a[href^="/oil/"], .lp-oil, #feat-popular-fuel, #feat-popular-cabbage, #feat-popular-livestock, #feat-popular-mackerel, #feat-popular-oil, .itab[aria-controls="feat-popular-fuel"], .itab[aria-controls="feat-popular-cabbage"], .itab[aria-controls="feat-popular-livestock"], .itab[aria-controls="feat-popular-mackerel"], .itab[aria-controls="feat-popular-oil"]) {
--lp-up: var(--lp-bad); --lp-down: var(--lp-good);
--lp-up-bg: var(--lp-bad-bg); --lp-down-bg: var(--lp-good-bg);
--lp-up-dark: var(--lp-bad-dark); --lp-down-dark: var(--lp-good-dark);
--lp-up-on-dark: var(--lp-bad-on-dark); --lp-down-on-dark: var(--lp-good-on-dark);
--up: var(--lp-bad); --dn: var(--lp-good);
}
/* 인기 시세 상자(#narrative-dod) 줄의 «화살표+차+률» 조각 — index.mjs 가 span 으로 표지(유리 = good · 불리 = bad) */
.lp-chg--good { color: var(--lp-good); }
.lp-chg--bad { color: var(--lp-bad); }
/* CO-05 2026-10-09 UF-20261009-44 — 기름값 상자 목록의 등락 «알약» (table 칸 안 .lp-chg · 색 토큰은 위와 같은 --lp-good/--lp-bad 가족 · 새 class 0) */
.module-table .lp-chg { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.module-table .lp-chg--good { background: var(--lp-good-bg); }
.module-table .lp-chg--bad { background: var(--lp-bad-bg); }
/* 좁은 화면(360)에서 기름값 목록이 좌우로 넘치지 않게 — 머리 칸 최소 폭·좌우 여백만 줄임(글자 14px 이상 유지) */
#narrative-dod .module-table th { min-width: 0; padding: 10px 6px; font-size: 14px; }
#narrative-dod .module-table td { padding: 10px 6px; }
#narrative-dod .module-table .lp-chg { padding: 2px 8px; font-size: 14px; }