가 아니라
를 감싸므로 상단의 .about-grid p 규칙이
그대로 먹지 않는다. 아래에서 다시 잡아준다. */
.about-criteria .about-grid section { grid-template-columns: 190px minmax(0, 1fr); gap: 56px; padding: 30px 0; align-items: start; }
.about-criteria .about-grid section > div { max-width: 640px; }
.about-criteria .about-grid span { padding-top: 3px; font: 550 9px/1.5 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
/* 본문 글씨는 사이트 전체가 13.5px 이다 (.about-deck, 상세 .detail-section > p).
여기만 12.5px 라 한 줄이 최대 74자까지 늘어났다. 폭은 그대로 두고 글씨만 맞춘다. */
.about-criteria .about-grid p { margin: 0 0 11px; color: #4f534b; font-size: 13.5px; line-height: 1.92; }
.about-criteria .about-grid p:last-child { margin-bottom: 0; }
.about-criteria .about-grid b { font-weight: 600; color: var(--ink); }
.about-criteria code { padding: 1px 5px; border-radius: 2px; background: rgba(23,26,23,.055); font-family: Inter, ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0; }
.about-list { margin: 0 0 11px; padding: 0; list-style: none; display: grid; gap: 9px; }
.about-list:last-child { margin-bottom: 0; }
.about-list li { padding-left: 15px; position: relative; color: #4f534b; font-size: 12.5px; line-height: 1.85; }
.about-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 5px; height: 1px; background: var(--line-dark); }
.about-mail { margin-top: 14px !important; }
.about-mail a { border-bottom: 1px solid var(--line-dark); font-size: 13px; }
.about-mail a:hover { border-bottom-color: var(--ink); }
/* 타일 3개일 때 2열로 두면 하나가 혼자 남는다. 좁아지면 바로 1열로 간다. */
@media (max-width: 640px) {
.about-stats-3 { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
.about-criteria .about-grid section { grid-template-columns: 150px minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 640px) {
.about-criteria { padding-top: 50px; }
.about-criteria h1 { font-size: 24px; }
.about-criteria .about-grid section { grid-template-columns: 1fr; gap: 10px; }
.about-criteria .about-grid span { padding-top: 0; }
/* 헤더 nav는 좁은 화면에서 이미 8px까지 줄어 있다. 항목을 하나 더 밀어넣지 않고
여기서만 숨긴다 — 푸터 About 링크와 홈 레일 링크가 같은 곳을 가리킨다. */
.nav a.nav-about { display: none; }
/* LOG_V1 — Log 를 넣으면 좁은 화면 nav 가 넷이 된다. Log 는 숨기지 않는다:
인스타 유입이 거의 전부 모바일이라 여기서 가려지면 탭을 만든 뜻이 없다.
대신 저장·비교 개수 배지를 숨긴다. 실측(2026-08-17, 320~420px):
배지 상태 Log 전 Log 후 배지 숨김 후
빈칸(처음 온 사람) 한 줄 한 줄 한 줄
1~2자리(재방문) ≤375 두 줄 ≤420 두 줄 한 줄
Log 없이도 ≤375px 에서 이미 두 줄이었다. 이 한 줄이 그 회귀까지 같이 없앤다.
배지를 다시 보이려면 이 선언만 지우면 된다 — 그러면 재방문 화면이 두 줄이 된다.
숫자는 9px 이라 이 폭에서 사실상 안 읽히고, 담긴 것은 Collections 화면에 있다. */
.nav a span { display: none; }
}
/* CERTIFICATION_V1 — 상세 페이지 인증서 목록.
국내 소재는 환경표지·환경성적표지·저탄소·GR 이 주 근거라 이 자리가 비면
근거를 넣어도 보이지 않는다. 근거 등급 배지는 .evidence-item 과 같은 체계를 쓴다. */
/* 810px 상한은 .evidence-list·.source-list와 같다. 없으면 1680px에서 1288px까지
늘어나 오른쪽 끝 .level 배지가 인증서 이름에서 1100px 떨어진다 (규칙 5). */
.cert-list { display: grid; gap: 1px; max-width: 810px; background: var(--line); border: 1px solid var(--line); }
.cert-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 14px; background: var(--surface); align-items: start; }
.cert-item strong { grid-column: 1; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.cert-item > div { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cert-item .cert-no { font: 450 10.5px/1.4 Inter, ui-monospace, monospace; color: var(--muted); letter-spacing: .02em; }
.cert-item small { font-size: 10.5px; }
.cert-item .level { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.cert-item.expired strong { color: var(--muted); }
.cert-item.expired small { color: #a2534b; }
/* =========================================================
SSR 폴백 — app.js 가 부팅하기 전 한 프레임 동안 보이는 화면.
구글은 렌더링을 하므로 이 상태를 본다. 부팅되면 #app 이 통째로 갈아치워지므로
아래 규칙은 그 뒤로는 어디에도 안 걸린다. 기존 선택자를 건드리지 않는 순수 추가.
마크업은 api 의 explore.js · material.js 가 만든다.
========================================================= */
/* /explore·패싯 — 컨테이너와 목록은 이미 잡혀 있다. 붙어 나오는 조각만 뗀다.
지금은 "01HONEXT® Board재생 셀룰로오스 인테리어 보드" 처럼 한 덩어리로 읽힌다. */
.seo-card .seo-idx { margin-right: 9px; }
.seo-card .seo-ko { display: block; margin-top: 3px; }
/* 소재 상세 폴백 — 여기는 아무것도 안 걸려 있었다.
컨테이너 폭이 없어 본문이 1680px 를 한 줄로 채우고,
![]()
에 max-width 가 없어 420px 화면에서 문서가 1800px 로 벌어졌다
(가로 1,380px 넘침). 구글 모바일 사용성 신호에 걸리는 상태였다. */
.seo-material-fallback {
max-width: 1040px;
margin-inline: auto; /* 규칙 1 — max-width 와 같이 다닌다 */
padding: 32px 22px 64px;
}
.seo-material-fallback img {
display: block;
max-width: 100%;
height: auto;
margin: 18px 0;
}
/* =========================================================
NEWSLETTER_V1 — 구독 블록. 홈 하단과 /about 하단 두 자리에 같은 마크업이 온다.
(SPA 라 동시에 살아 있지 않다 — 스티비의 "한 페이지에 폼 하나" 제약을 지킨다.)
기존 선택자를 하나도 건드리지 않는 순수 추가다. 규칙 9 에 따라 이 컴포넌트의
기본값과 반응형을 여기 한자리에 붙여 둔다. 뒤에 조건 없는 블록을 더 얹지 말 것.
라임(--signal)은 쓰지 않는다. 라임은 "확인된 것·귀한 것" 표식이고
구독 권유는 거기 해당하지 않는다 (design-rules 라임 용법).
========================================================= */
.newsletter {
max-width: 1080px;
margin: 64px auto 0; /* 규칙 1 — max-width 와 margin-inline 은 같이 다닌다 */
padding-top: 42px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 56px;
align-items: start;
}
/* /about 은 이미 96px 아래 여백을 갖고 끝난다. 둘을 더하면 160px 이 된다. */
.about-page + .newsletter { margin-top: 0; }
.newsletter-eyebrow {
display: block;
margin-bottom: 14px;
color: var(--faint);
font: 550 9px/1 Inter, sans-serif;
letter-spacing: .13em;
text-transform: uppercase;
}
.newsletter h2 {
margin: 0 0 14px;
font: 500 22px/1.35 "Pretendard Variable", Pretendard, sans-serif;
letter-spacing: -.03em;
}
.newsletter p {
margin: 0 0 10px;
max-width: 640px; /* 규칙 2 — 한국어 본문 40~50자 */
color: #4a4e46;
font-size: 13.5px;
line-height: 1.85;
}
/* .newsletter-note 는 규칙을 두지 않는다 — .newsletter p (0,1,1) 이 이겨서 어차피
안 먹었고, 지금 화면(본문과 같은 13.5px)이 확정된 모습이다. 작고 흐리게 하려면
.newsletter p.newsletter-note 로 올릴 것. */
/* --- 스티비가 내보낸 마크업에 우리 값을 준다 ---------------------------------
id·class 는 스티비 스크립트가 잡는 이름이라 바꾸지 않는다. 스티비 기본
스타일시트(resource.stibee.com/…/stb_subscribe_form_style.css)는 부러 안
불러온다 — 사이트 디자인과 충돌한다. CSS 는 각자 쓰는 것이라고 문서에 있다.
⚠ `.blind` 는 스티비 스타일시트에 있던 규칙이다. 여기서 다시 정의하지 않으면
**동의 안내 모달이 처음부터 열린 채로 보인다.** 남의 스타일시트를 빼면
그쪽이 숨기고 있던 것까지 같이 딸려 온다.
⚠ 모달은 position: fixed 다. 조상에 transform·filter·backdrop-filter 가 생기면
기준 상자가 그 조상으로 바뀐다 (/explore 툴바에서 같은 일이 있었다). */
#stb_subscribe .blind { display: none; }
.stb_form_set, .stb_form_set_submit { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.stb_form_set_label {
display: block;
margin-bottom: 7px;
color: var(--muted);
font: 550 8.5px/1 Inter, sans-serif;
letter-spacing: .11em;
text-transform: uppercase;
}
.stb_asterisk { margin-left: 3px; color: var(--faint); }
.stb_form_set_input {
width: 100%;
min-height: 39px;
padding: 0 12px;
border: 1px solid var(--line-dark);
border-radius: 0;
background: var(--surface);
color: var(--ink);
font-size: 13px;
}
.stb_form_set_input:focus { border-color: var(--accent); outline: none; }
/* 체크박스를 흐름에서 빼내 "(필수) 개인정보 수집 및 이용에 동의합니다." 가
한 문장으로 이어지게 둔다. flex 로 묶으면 버튼 뒤의 "에 동의합니다." 가
따로 떨어져 줄이 갈린다. */
.stb_form_policy { margin-top: 12px; color: var(--muted); font-size: 10.5px; line-height: 1.6; }
.stb_form_policy > label { display: block; position: relative; padding-left: 21px; cursor: pointer; }
.stb_form_policy > label > input { position: absolute; left: 0; top: 2px; margin: 0; accent-color: var(--accent); }
.stb_form_policy > label > span { color: var(--faint); }
.stb_form_modal_open_btn {
padding: 0;
border: 0;
border-bottom: 1px solid var(--line-dark);
background: transparent;
color: var(--muted);
font-size: 10.5px;
}
.stb_form_modal_open_btn:hover { color: var(--ink); border-bottom-color: var(--ink); }
.stb_form_msg_error { margin-top: 5px; color: #a2534b; font-size: 10px; line-height: 1.5; }
.stb_form_result { margin-top: 10px; font-size: 10.5px; line-height: 1.6; }
.stb_form_msg_error:empty, .stb_form_result:empty { display: none; }
.stb_form_submit_button {
width: 100%;
min-height: 39px;
margin-top: 14px;
border: 1px solid var(--ink);
border-radius: 0;
background: var(--ink);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: .06em;
}
.stb_form_submit_button:hover { background: #000; }
/* 동의 안내 모달 */
.stb_form_modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.stb_form_modal_bg { position: absolute; inset: 0; background: rgba(21, 22, 21, .45); }
.stb_form_modal_body {
position: relative;
z-index: 1;
max-width: 460px;
margin: 22px;
padding: 26px 26px 20px;
border: 1px solid var(--line-dark);
background: var(--surface);
}
/* .stb_form_modal_title 도 두지 않는다 — .newsletter h2 (0,1,1) 가 이긴다.
모달 제목은 지금 .newsletter h2 값(22px)으로 나오고 그게 확정된 모습이다. */
.stb_form_modal_text { color: #4a4e46; font-size: 12px; line-height: 1.8; white-space: pre-line; }
.stb_form_modal_btn { margin-top: 18px; text-align: right; }
.stb_form_modal_close_btn {
min-height: 32px;
padding: 0 16px;
border: 1px solid var(--line-dark);
background: transparent;
color: var(--ink);
font-size: 9px;
font-weight: 700;
letter-spacing: .06em;
}
.stb_form_modal_close_btn:hover { border-color: var(--ink); }
@media (max-width: 900px) {
.newsletter { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 48px; padding-top: 34px; }
}
/* iOS Safari 는 포커스된 입력의 글씨가 16px 미만이면 페이지를 확대한다.
.search-large input 과 같은 이유·같은 브레이크포인트. */
@media (max-width: 680px) {
.stb_form_set_input { font-size: 16px; }
}
/* =========================================================
GSEED_V1 — 인증 행 옆 G-SEED 항목 칩 + 안내 한 줄. 순수 추가.
근거 배지(.level)와 같은 규칙 — 색 한 계열, 채움 정도로 구분, 모서리 2px (규칙 7).
verified 만 채움, documented 는 테두리, unknown 은 점선. 인증 마크처럼 보이면 안 된다.
========================================================= */
.gseed-chip {
display: inline-block;
vertical-align: 2px;
margin-left: 8px;
padding: 1px 6px;
border: 1px solid var(--line-dark);
border-radius: 2px;
font: 600 8.5px/1.6 Inter, sans-serif;
letter-spacing: .04em;
/* 이 color 는 지우지 말 것. 아래 네 상태 클래스에 늘 가려 css-winners 가
"한 번도 못 이기는 선언" 으로 보고하지만, evidence_level 에는 claimed 도 있고
.gseed-chip.claimed 규칙은 없다. claimed 인증이 들어오면 이게 유일한 색이다. */
color: var(--muted);
background: transparent;
white-space: nowrap;
}
.gseed-chip.verified { border-color: #b3c2b1; background: #e9efe6; color: #3f5544; }
.gseed-chip.documented { border-color: #c4d0c5; color: #55684f; }
.gseed-chip.unknown { border-style: dashed; color: var(--faint); }
.gseed-chip.expired { border-style: dashed; color: var(--faint); background: transparent; text-decoration: line-through; }
/* .detail-section > p (0,1,1) 가 .gseed-note (0,1,0) 를 이긴다 — 뒤에 써도 진다.
특이도를 맞춘다. 하네스로 잡았다 (max-width 810 · 13.5px 이 그대로 나옴). */
.detail-section > p.gseed-note {
grid-column: 2; /* .detail-section 은 180px 1fr 그리드 — 이게 없으면 라벨 열(180px)로 떨어진다. */
margin: 12px 0 0;
max-width: 640px; /* 규칙 2 — 본문 폭 */
color: var(--faint);
font-size: 10.5px;
line-height: 1.7;
}
/* 마지막 필터의 메뉴는 오른쪽 기준으로 편다. left:0 이면 min-width 222px 메뉴가 툴바
오른쪽 끝을 넘어 가로 스크롤을 만든다 (Availability 가 마지막일 때부터 있던 문제 —
하네스가 첫 메뉴만 열어서 못 봤다. G-SEED 가 6번째로 붙으면서 확인). 640px 이하는
position:fixed 규칙이 따로 있어 그대로 둔다. */
@media (min-width: 641px) {
.filters > .filter:last-child > .filter-menu { left: auto; right: 0; }
}
/* 640px 이하에서 .detail-section 은 1열이다 (246행). 2열 지정이 남으면 빈 열이 생긴다. */
@media (max-width: 640px) {
.detail-section > p.gseed-note { grid-column: 1; }
}
/* ===========================================================================
LOG_V1 (2026-08-17) — 읽을거리 /log · /log/:slug
---------------------------------------------------------------------------
본문은 DB(`log_archive_public.body_html`)가 원본이라 여기서 쓸 수 있는 훅이
태그와 소수의 클래스뿐이다. 그래서 `.log-body` 를 조상으로 잡는다.
⚠ 두 부분 선택자(0,1,1)가 단일 클래스(0,1,0)를 이긴다. `.log-body p` 를 둔 뒤에
`.log-draft-note` 같은 단일 클래스로 그 값을 되돌리려 하면 진다.
본문 안의 예외는 전부 `.log-body <태그>.<클래스>` 로 특이도를 맞춰 쓸 것.
⚠ 라임(--signal)은 "확인된 것" 표식이다. 이 블록 어디에도 쓰지 않는다.
구독 버튼도 기존대로 --ink 검정이다.
=========================================================================== */
.log-page { max-width: 1040px; margin-inline: auto; padding: 0 0 8px; }
/* 글 페이지는 **읽는 폭 하나**로 통일하고 가운데 정렬한다.
목록(1040px)의 폭을 그대로 쓰면서 본문만 640px 로 두면 오른쪽에 400px 가 비고
글이 왼쪽으로 몰린 것처럼 보인다 (2026-08-19 실측: 본문 left 180 / right 580).
/about 은 190px 라벨 열이 그 자리를 채우지만 글에는 라벨 열이 없다.
머리글·본문·표·카드가 같은 단을 쓰게 해서 축을 하나로 만든다. */
.log-page.log-entry { max-width: 720px; }
.log-page.log-entry .log-body { max-width: none; }
.log-head { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.log-lede { margin: 12px 0 0; max-width: 62ch; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.log-list-skeleton { min-height: 320px; }
/* 목록 */
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.log-item { border-bottom: 1px solid var(--line); }
.log-item > a { display: block; position: relative; padding: 24px 44px 24px 0; color: inherit; text-decoration: none; }
.log-item > a:hover { background: rgba(255, 255, 255, .45); }
.log-item-kind { margin: 0; font: 550 8.5px/1 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.log-item h2 { margin: 9px 0 0; max-width: 34ch; font-size: 20px; font-weight: 650; letter-spacing: -.026em; line-height: 1.35; }
.log-item-deck { margin: 8px 0 0; max-width: 58ch; color: var(--muted); font-size: 13px; line-height: 1.7; }
.log-item-date { margin: 11px 0 0; color: var(--faint); font-size: 10.5px; letter-spacing: .02em; }
.log-item .card-link-mark { position: absolute; top: 24px; right: 6px; }
/* 글 */
.log-crumb { font-size: 11px; letter-spacing: .02em; color: var(--muted); }
.log-crumb a { color: inherit; }
.log-entry-head { margin: 16px 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.log-entry-head h1 { margin: 10px 0 0; max-width: 22ch; font-size: 34px; font-weight: 700; letter-spacing: -.032em; line-height: 1.22; }
.log-deck { margin: 14px 0 0; max-width: 54ch; color: var(--muted); font-size: 15px; line-height: 1.7; }
/* 본문 — 폭은 위 `.log-page.log-entry`(720px) 한 곳에서만 정한다.
2026-08-19 단 통일 전에는 여기 `.log-body { max-width: 640px }` 가 있었는데,
`.log-page.log-entry .log-body { max-width: none }`(0,3,0)에 늘 져서 한 번도 안 먹었다.
`.log-body` 는 app.js 에서 `article.log-page.log-entry` 안에서만 만들어진다(app.js 2055행).
같은 이유로 `@media (max-width:640px)` 안의 `.log-body { max-width: none }` 도 같이 뺐다 —
미디어 쿼리는 특이도를 올려 주지 않으므로 그것도 한 번도 못 이기고 있었다.
2026-08-20 css-winners 가 둘 다 "한 번도 못 이기는 선언" 으로 보고, 전수 스냅샷 차이 0 으로 확인함. */
.log-body h2 { margin: 44px 0 14px; font-size: 19px; font-weight: 650; letter-spacing: -.024em; line-height: 1.4; }
.log-body h3 { margin: 30px 0 10px; font-size: 14.5px; font-weight: 650; letter-spacing: -.014em; }
.log-body p { margin: 0 0 15px; font-size: 14px; line-height: 1.85; }
.log-body ul, .log-body ol { margin: 0 0 18px; padding-left: 20px; }
.log-body li { margin-bottom: 8px; font-size: 14px; line-height: 1.8; }
.log-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-dark); }
.log-body a:hover { text-decoration-color: currentColor; }
.log-body code { padding: 1px 5px; border: 1px solid var(--line); background: rgba(255, 255, 255, .55); font-size: 12px; }
.log-body pre { margin: 0 0 18px; padding: 14px 15px; overflow-x: auto; border: 1px solid var(--line); background: rgba(255, 255, 255, .45); }
.log-body pre code { padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.log-body blockquote { margin: 0 0 22px; padding-left: 17px; border-left: 2px solid var(--line-dark); }
.log-body blockquote p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.log-body figure { margin: 0 0 20px; }
.log-body img { display: block; max-width: 100%; height: auto; }
.log-body figcaption { margin-top: 7px; color: var(--faint); font-size: 10.5px; line-height: 1.6; }
/* 표 — 근거 표(.log-evidence)와 자료 표(.log-table).
좁은 화면에서 가로 스크롤을 허용한다. 셀을 접으면 어느 값이 어느 열인지 무너진다. */
.log-body table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 12.5px; }
.log-body caption { margin-bottom: 8px; text-align: left; color: var(--faint); font-size: 10.5px; line-height: 1.6; }
.log-body th, .log-body td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.6; }
.log-body thead th { border-bottom-color: var(--line-dark); color: var(--muted); font: 550 8.5px/1.4 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.log-body table.log-evidence { border: 1px solid var(--line-dark); table-layout: fixed; }
.log-body table.log-evidence th, .log-body table.log-evidence td { padding-inline: 12px; }
/* 열 폭을 균등하게 주지 않는다 — 주장은 길고 근거는 짧다 (뉴스레터 챗 D절).
table-layout: fixed 라서 첫 행의 th 폭이 표 전체를 결정한다. */
.log-body table.log-evidence th:nth-child(1) { width: 46%; }
.log-body table.log-evidence th:nth-child(2) { width: 21%; }
.log-body table.log-evidence th:nth-child(3) { width: 33%; }
/* 출처 셀 — 가 있는 줄과 없는 줄이 같은 크기·같은 자리로 보여야 한다.
링크 없는 줄에 빈 나 # 를 넣지 않는다. */
.log-body table.log-evidence td:nth-child(3) { color: var(--muted); font-size: 11.5px; line-height: 1.65; }
/* 근거 셀 — 배지는 기존 .level 을 그대로 쓴다(4단계 + .official).
강등 사유 은 배지 **아래 줄**로 내린다. 한 줄로 붙으면 등급이 안 보인다. */
.log-body td.evidence-cell .level { min-width: 0; padding: 2px 8px; font-size: 9px; }
.log-body td.evidence-cell small { display: block; margin-top: 5px; color: var(--faint); font-size: 10px; line-height: 1.6; }
/* 확인하지 못한 것 — 점선 테두리. 미확인 표식은 라임이 아니라 점선이다
(research/design-rules.md, 라임 용법 2026-08-13). */
.log-body ul.log-unconfirmed { margin: 0 0 20px; padding: 15px 17px 15px 34px; border: 1px dashed var(--line-dark); list-style: disc; }
.log-body ul.log-unconfirmed li { margin-bottom: 9px; color: var(--muted); font-size: 13px; }
.log-body ul.log-unconfirmed li:last-child { margin-bottom: 0; }
.log-body ul.log-sources li { color: var(--muted); font-size: 12.5px; line-height: 1.75; }
/* 초안 표시 — 원고에 아직 문장이 안 들어간 자리.
발행분에는 남아 있으면 안 된다. 눈에 띄게 둔 것이 목적이다. */
.log-body p.log-draft-note {
margin: 0 0 15px;
padding: 10px 12px;
border: 1px dashed #b08a4a;
background: rgba(255, 249, 235, .7);
color: #7a5c22;
font-size: 12px;
line-height: 1.7;
}
/* 본문 안 소재 카드 */
/* 본문 안 소재 카드.
⚠ `.material-grid`(5열 고정)를 물려받으면 안 된다 — 640px 본문 단 안에서 카드 하나가
1/5 폭(약 115px)으로 쪼그라들어 왼쪽에 붙는다. 2026-08-19 배포에서 그렇게 나갔다.
여기서는 카드 수에 맞춰 폭을 잡고 가운데로 모은다. */
.log-materials { margin: 26px 0 24px; display: grid; gap: 14px; justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }
.seo-card-list.log-materials { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; }
.log-web { margin: 30px 0 0; font-size: 12.5px; }
.log-web a { color: var(--muted); }
.log-foot { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; }
.log-foot a { color: var(--muted); }
@media (max-width: 640px) {
.log-entry-head h1 { font-size: 26px; }
.log-deck { font-size: 14px; }
.log-item h2 { font-size: 17px; }
/* 자료 표(.log-table)는 **비교하는 표**라 열을 지킨다. 가로로 민다. */
.log-body table { display: block; overflow-x: auto; white-space: nowrap; }
.log-body td, .log-body th { white-space: normal; min-width: 96px; }
/* 근거 표(.log-evidence)는 **읽는 표**다. 한 행이 주장 하나라서 세로로 접는다.
가로 스크롤을 주면 주장 셀이 길어서 근거·출처가 화면 밖으로 나간다 —
근거를 보여주려고 만든 표에서 근거가 안 보이게 된다.
열 이름은 thead 를 숨기고 출처에만 다시 붙인다. 첫 열은 주장 자체라
이름이 필요 없고, 근거는 배지가 스스로 말한다.
⚠ `.log-body table` (0,1,1) 을 이기려고 전부 (0,2,2) 이상으로 쓴다. */
.log-body table.log-evidence { display: block; overflow-x: visible; white-space: normal; border: 0; table-layout: auto; }
.log-body table.log-evidence thead { display: none; }
.log-body table.log-evidence tbody,
.log-body table.log-evidence tr,
.log-body table.log-evidence td { display: block; width: auto; min-width: 0; }
.log-body table.log-evidence tr { padding: 15px 0; border-bottom: 1px solid var(--line); }
.log-body table.log-evidence tr:first-child { padding-top: 0; }
.log-body table.log-evidence td { padding: 0; border: 0; }
.log-body table.log-evidence td:nth-child(1) { font-size: 13.5px; line-height: 1.75; }
.log-body table.log-evidence td:nth-child(2) { margin-top: 10px; }
.log-body table.log-evidence td:nth-child(3) { margin-top: 11px; font-size: 11.5px; }
.log-body table.log-evidence td:nth-child(3)::before {
content: "출처";
display: block;
margin-bottom: 3px;
font: 550 8.5px/1 Inter, sans-serif;
letter-spacing: .11em;
color: var(--faint);
}
}
/* SSR 폴백 — 부팅 전 한 프레임 동안 보이고, 구글은 이 상태를 본다.
부팅 뒤에는 .seo-* 가 DOM 에 없으므로 이 규칙들은 어디에도 안 걸린다.
⚠ tools/harness-lib.js 의 ROUTES 에 log 라우트를 등록해 두지 않으면
다음 CSS 정리 회차에서 "죽은 선택자"로 지워진다. 토스트·뉴스레터에서
이미 두 번 밟은 함정이다. */
.seo-log-fallback { max-width: 1040px; margin: 0 auto; padding: 32px 22px 64px; color: var(--ink, #1c1e1a); }
.seo-log-fallback nav[aria-label="breadcrumb"] { font-size: 11px; letter-spacing: .02em; color: var(--muted, #6e7168); }
.seo-log-fallback nav[aria-label="breadcrumb"] a { color: inherit; }
.seo-log-fallback header { margin: 18px 0 26px; }
.seo-log-fallback h1 { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -.028em; }
.seo-log-fallback h1 small { margin-left: 9px; font-size: 13px; font-weight: 500; color: var(--muted, #6e7168); }
.seo-log-fallback header p { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.7; color: var(--muted, #6e7168); }
.seo-log-list { list-style: none; margin: 0; padding: 0; }
.seo-log-item { padding: 16px 0; border-bottom: 1px solid var(--line, #dedcd2); }
.seo-log-item h2 { margin: 5px 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -.022em; }
.seo-log-item h2 a { color: inherit; text-decoration: none; }
.seo-log-item p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted, #6e7168); }
.seo-log-kind { font: 550 8.5px/1 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
/* .seo-log-item p (0,1,1) 가 .seo-log-date (0,1,0) 를 이긴다 — 뒤에 써도 진다.
margin-top·color·font-size 셋이 전부 가려졌다 (css-winners 로 잡음).
.gseed-note·.product-note 와 똑같은 함정이라 똑같이 특이도를 맞춘다. */
.seo-log-item p.seo-log-date { margin-top: 6px; color: var(--faint, #9a9d93); font-size: 10.5px; }
.seo-log-body { max-width: 640px; margin-top: 8px; font-size: 14px; line-height: 1.85; }
.seo-log-body img { display: block; max-width: 100%; height: auto; margin: 16px 0; }
.seo-log-body table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 12.5px; }
.seo-log-body th, .seo-log-body td { padding: 8px 10px; border-bottom: 1px solid var(--line, #dedcd2); text-align: left; vertical-align: top; }
.seo-log-web { margin-top: 24px; font-size: 12.5px; }