/* ===================================================================== * 「침묵」 — 05-design-system.md §7 의 토큰과 그 위에 서는 컴포넌트 규칙. * * 정본은 `documents/poc/theme-pair.html` L1444-1541 이다. 05 §7 의 표에는 * 28개만 실려 있어 6개(--q-sans --q-mono --q-scheme --q-ad-bg --q-btn-bg * --q-code-rule)가 빠져 있다. 표를 보고 옮기면 광고 슬롯·GitHub 버튼· * 코드블록 헤드 하단선이 색을 못 찾는다. * * ## 이 파일의 불변식 두 개 — QuietCssContractTest 가 지킨다 * * 1. **색 리터럴은 아래 토큰 블록 세 개 안에만 있다.** 컴포넌트 규칙은 * 토큰만 참조한다. 한 곳이라도 리터럴이 새면 다크가 그 자리에서 무너진다. * 2. **다크 토큰 두 블록의 선언 집합이 같다.** 「침묵」은 원래 * prefers-color-scheme 을 안 쓰지만 F-V5 가 "쿠키 없으면 시스템"을 * 요구해서 두 경로가 다 필요해졌다. 05 §5.2 가 바로 이 복제를 결함으로 * 지목했다 — "한 곳만 고치면 OS 다크와 수동 다크가 조용히 갈라진다". * 그래서 사람의 기억이 아니라 테스트가 두 블록을 맞춘다. * * ## 스코프 * * `data-theme` 는 `` 에, `.v-quiet` 는 `` 에 붙는다. * 서버가 쿠키를 읽어 첫 페인트부터 맞는 테마로 그리고(F-V5), 쿠키가 * 없거나 `system` 이면 속성을 아예 붙이지 않아 아래 @media 폴백이 산다. * ===================================================================== */ /* --- TOKENS: LIGHT ------------------------------------------------ */ .v-quiet, [data-theme="light"] .v-quiet { /* 🔴 웹폰트 선언은 `fonts.css` 에 있다 (#45). 여기는 **스택만** 적는다. 스택 맨 앞이 웹폰트, 그 뒤가 폴백이다 — 파일이 못 오면 예전 모습으로 돌아간다. `Pretendard Variable` 이 우리가 내는 것이고, 그냥 `Pretendard` 는 사용자 기기에 설치돼 있는 경우를 받는 자리다. */ --q-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --q-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* 렌더링 힌트도 테마 토큰이다 */ --q-scheme: light; --q-smooth: antialiased; --q-img-filter: none; /* 표면 — 라이트에서 코드 면은 지면보다 한 칸 어둡다(눌린 면) */ --q-bg: #ffffff; --q-code-bg: #f7f7f7; --q-code-in: #f1f1f1; --q-ad-bg: #fcfcfc; --q-btn-bg: #ffffff; /* 잉크 계단 */ --q-ink: #121212; --q-ink-dim: #555555; --q-mid: #737373; --q-soft: #a6a6a6; --q-faint: #c6c6c6; --q-ghost: #d4d4d4; /* 괘선 */ --q-rule: #ededed; --q-rule-strong: #e2e2e2; --q-code-edge: #ededed; --q-code-rule: #e9e9e9; /* 선으로 쓰는 잉크 — 링크는 색이 아니라 밑줄 알파로 구분한다 */ --q-line-0: rgba(18, 18, 18, 0); --q-line-1: rgba(18, 18, 18, 0.14); --q-line-2: rgba(18, 18, 18, 0.42); --q-link-line: rgba(18, 18, 18, 0.26); --q-link-line-on: rgba(18, 18, 18, 0.9); --q-sel: rgba(18, 18, 18, 0.12); /* 구문 강조 — 전부 --q-code-bg 대비 AA(4.5:1) 이상 */ --q-kw: #8a2c72; --q-str: #2c6a4a; --q-com: #5c6672; --q-num: #9a4a1c; --q-fn: #2c579f; --q-type: #1c6567; --q-ann: #7a5520; } /* --- TOKENS: DARK (수동 선택) ------------------------------------- * 반전이 아니라 다시 계산한 값이다. * · 코드 면은 지면보다 "밝게" 뜬다 — 라이트에서는 눌렸다. 방향이 뒤집힌다 * · 회색 계단은 어두운 쪽을 들어 올렸다 (mid 1.08배 soft 1.25배 faint 1.45배) * · 괘선은 라이트 대비 약 2배로 올려야 같은 두께로 보인다 * · --q-ink 는 순백이 아니다. 7,000자를 견디려면 광량을 깎아야 한다 * ------------------------------------------------------------------ */ [data-theme="dark"] .v-quiet { --q-scheme: dark; --q-smooth: auto; --q-img-filter: brightness(0.86) contrast(1.02); --q-bg: #0d0e10; --q-code-bg: #16181b; --q-code-in: #242628; --q-ad-bg: #101214; --q-btn-bg: #191b1e; --q-ink: #e8e8e7; --q-ink-dim: #b3b4b6; --q-mid: #8d9095; --q-soft: #66686e; --q-faint: #4b4d52; --q-ghost: #414246; --q-rule: #2a2c30; --q-rule-strong: #38393d; --q-code-edge: #26292e; --q-code-rule: #232629; --q-line-0: rgba(232, 232, 231, 0); --q-line-1: rgba(232, 232, 231, 0.2); --q-line-2: rgba(232, 232, 231, 0.52); --q-link-line: rgba(232, 232, 231, 0.34); --q-link-line-on: rgba(232, 232, 231, 0.92); --q-sel: rgba(232, 232, 231, 0.22); --q-kw: #d093c0; --q-str: #52a57e; --q-com: #8996a5; --q-num: #c0865a; --q-fn: #839ecf; --q-type: #53a6a9; --q-ann: #b5935a; } /* --- TOKENS: DARK (OS 설정, 쿠키가 없을 때) ------------------------ * 🔴 위 블록과 **선언 집합이 같아야 한다.** QuietCssContractTest 가 두 * 블록의 이름·값을 대조한다. 한쪽만 고치면 시스템 다크와 수동 다크가 * 갈린다 — 214편을 운영하는 동안 반드시 일어난다(05 §5.2). * ------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .v-quiet { --q-scheme: dark; --q-smooth: auto; --q-img-filter: brightness(0.86) contrast(1.02); --q-bg: #0d0e10; --q-code-bg: #16181b; --q-code-in: #242628; --q-ad-bg: #101214; --q-btn-bg: #191b1e; --q-ink: #e8e8e7; --q-ink-dim: #b3b4b6; --q-mid: #8d9095; --q-soft: #66686e; --q-faint: #4b4d52; --q-ghost: #414246; --q-rule: #2a2c30; --q-rule-strong: #38393d; --q-code-edge: #26292e; --q-code-rule: #232629; --q-line-0: rgba(232, 232, 231, 0); --q-line-1: rgba(232, 232, 231, 0.2); --q-line-2: rgba(232, 232, 231, 0.52); --q-link-line: rgba(232, 232, 231, 0.34); --q-link-line-on: rgba(232, 232, 231, 0.92); --q-sel: rgba(232, 232, 231, 0.22); --q-kw: #d093c0; --q-str: #52a57e; --q-com: #8996a5; --q-num: #c0865a; --q-fn: #839ecf; --q-type: #53a6a9; --q-ann: #b5935a; } } /* ===================================================================== * 여기부터 아래로 색 리터럴이 없다. 컴포넌트는 토큰만 참조한다. * ===================================================================== */ /* --- 루트 --------------------------------------------------------- */ /* `html` 에 배경을 주지 않는다. 루트에 배경이 없으면 브라우저가 body 의 배경을 캔버스로 올려 쓰므로 오버스크롤 영역까지 테마색이 따라온다 — 여기에 리터럴 폴백을 하나 두는 순간 다크에서 그 영역만 흰색으로 남는다. */ .v-quiet { margin: 0; color-scheme: var(--q-scheme); background: var(--q-bg); color: var(--q-ink); min-height: 100vh; font-family: var(--q-sans); font-size: 16px; line-height: 1; /* 한글 어절을 보존한다. 공통 규칙이라 루트에 둔다. 🔴 `keep-all` 만 두면 줄 하나에 안 들어가는 영문 단어·URL·식별자가 상자를 뚫는다. 실측(2026-08-06 · Chrome headless): 제목 `h1.p-title` 이 700px 상자 안에서 내용 924px, 500px 폭에서는 문서 전체가 794px 로 가로 스크롤이 생겼다. `overflow-wrap: break-word` 는 **줄에 못 들어가는 단어만** 끊으므로 한글 어절 보존은 그대로 살아 있다. 상속되는 속성이라 루트 한 곳으로 끝난다. `anywhere` 를 쓰지 않는 이유는 05 §5 시안B 비평과 같다 — 영문 혼용 단어가 들어갈 자리가 있는데도 임의 지점에서 끊긴다. */ word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: var(--q-smooth); -moz-osx-font-smoothing: grayscale; font-kerning: normal; text-rendering: optimizeLegibility; padding: 128px 40px 176px; box-sizing: border-box; } .v-quiet *, .v-quiet *::before, .v-quiet *::after { box-sizing: border-box; } .v-quiet ::selection { background: var(--q-sel); color: var(--q-ink); } .v-quiet .q-inner { width: 1040px; max-width: 100%; margin: 0 auto; } .v-quiet a { color: inherit; text-decoration: none; } .v-quiet a:focus-visible { outline: none; box-shadow: 0 1px 0 var(--q-ink); } /* 스크린리더 전용. 라이트박스 안내문·건너뛰기 링크가 쓴다 */ .v-quiet .q-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 건너뛰기 링크 — 평소에는 `.q-sr` 로 숨어 있다가 **포커스를 받으면만** 나타난다. LNB 가 모든 화면 상시 노출(04 §3.2)이라 이것이 없으면 키보드 사용자가 화면마다 분류 링크 27개를 지나야 본문에 닿는다. 「침묵」이므로 장식 없이 지면색 위 1px 테두리다. */ .v-quiet .q-skip:focus { position: fixed; top: 16px; left: 16px; z-index: 80; width: auto; height: auto; margin: 0; padding: 12px 16px; overflow: visible; clip-path: none; background: var(--q-bg); color: var(--q-ink); font-family: var(--q-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.14em; box-shadow: 0 0 0 1px var(--q-ink); } /* --- 3트랙 그리드 ------------------------------------------------- * 🔴 `minmax(0, 1fr)` 이 필수다. 암시적 auto 트랙은 긴 코드 줄에 밀려 * 페이지 전체를 늘린다(05 §9-6). 자식의 `min-width: 0` 도 짝이다. * * ## 🔴 `--q-cols` 는 **테마 토큰 블록 안에 두면 안 된다** (2026-08-31) * * 원래 라이트 토큰 블록 안에 있었다. 그 블록의 선택자가 * `.v-quiet, [data-theme="light"] .v-quiet` 인데, 두 번째 것의 명시도가 * (0,2,0) 이다. 미디어 쿼리는 명시도를 **안 올리므로** * `@media (max-width: 940px) { .v-quiet { --q-cols: ... } }` 는 (0,1,0) 이라 * 진다. * * 결과: `` 가 찍힌 페이지에서는 **두 브레이크포인트가 * 통째로 죽었다.** 390px 실측 — 스탬프 없음/다크는 `--q-cols` 가 * `minmax(0, 1fr)` 이고 제목 폭 342px 인데, 라이트 스탬프에서는 * `116px 64px minmax(0, 1fr)` 이 남아 제목이 **116px** 로 눌렸다. 테마를 * 라이트로 고정한 사람만 폰에서 페이지가 깨져 보였다는 뜻이다. * * 색이 아니라 **레이아웃** 값이므로 테마와 무관한 자리에 둔다. 그러면 * 아래 미디어 쿼리들과 명시도가 같아져서 나중에 온 것이 이긴다. * 다크 블록에는 원래부터 없었다 — 그래서 다크만 멀쩡했다. * * 🔴 **쿠키가 없는 기본 상태도 멀쩡했다.** `data-theme` 속성이 아예 안 붙기 * 때문이다. 그래서 헤드리스 재현이 몇 번이나 「재현 안 됨」으로 끝났다 — * `colorScheme: 'light'` 는 OS 선호일 뿐 속성을 찍지 않는다. 라이트를 * **보는** 것과 **고르는** 것이 다르다. * ------------------------------------------------------------------ */ .v-quiet { --q-cols: 116px 64px minmax(0, 1fr); } .v-quiet .q-row { display: grid; grid-template-columns: var(--q-cols); } .v-quiet .q-main { grid-column: 3; min-width: 0; } /* --- 헤더 — 구분선 없이 여백으로만 분리한다 ----------------------- * * ## ABOUT 은 워드마크 **오른쪽**에 붙는다 (2026-08-31 오너 지시) * * 한 번 왼쪽 기둥(1번 트랙)에 넣었다가 오른쪽으로 옮겼다. 왼쪽에 두면 아래 * `분류`·`최근`·날짜와 같은 선에 서서 기둥이 페이지를 관통하는 이점이 있었지만, * 그만큼 워드마크에서 64px 떨어져 **따로 노는 한 칸**으로 읽혔다. * * 🔴 대신 왼쪽 기둥 116px 이 다시 빈다. 로고는 좌측 레일보다 180px 안쪽에서 * 시작한다(실측 @1280: `.q-inner`·`.p-rail` 은 x=112.5, 워드마크는 292.5). * 헤더 띠 하나에 왼쪽 기준선이 둘이라는 것은 그대로 남아 있는 문제다 — * 풀려면 `.q-head` 를 `grid-column: 1 / -1` 로 펴서 로고를 지면 왼쪽 끝에 * 붙여야 하는데, 그건 워드마크를 옮기는 일이라 지시 범위 밖이다. * * ## 바닥선이 하나다 * * 예전에는 로고 155 · 테마 153 · 검색 152 로 셋이 달랐다. `.q-head` 가 * `flex-start`, `.q-head-right` 가 `baseline` 이라 기준이 섞였고, 그 어긋남을 * `.site-logo { margin-top: 1px }` 로 손보정하고 있었다. 기준을 **아래쪽 하나**로 * 통일하면 손보정이 사라진다 — 검색창 글자 크기를 바꿔도 다시 안 틀어진다. * ------------------------------------------------------------------ */ .v-quiet .q-gnb { font-family: var(--q-mono); font-size: 10px; line-height: 18px; letter-spacing: 0.2em; text-indent: 0.2em; /* 🔴 항목을 관리 화면에서 넣게 되면서(#88) 대소문자를 사람이 정하게 됐다. 띠의 어휘는 10px 등폭 대문자 하나뿐이라, 소문자로 적힌 항목 하나가 줄 전체를 다른 서체처럼 보이게 만든다. 한글 항목에는 아무 일도 안 한다 — 그게 맞다 */ text-transform: uppercase; color: var(--q-faint); /* 🔴 `.q-search` 의 아래 패딩과 **같은 값**이라야 ABOUT 과 「검색」의 줄상자 바닥이 같은 y 에 선다. 한쪽만 고치면 헤더 띠가 글자 한 줄로 안 읽힌다 */ padding-bottom: 5px; white-space: nowrap; flex: 0 0 auto; /* 🔴 항목이 여럿이면 **가로로 선다** (#88). * * 예전에는 `a { display: block }` 하나로 끝났다. 항목이 ABOUT 하나뿐이라 * 세로로 쌓이든 말든 결과가 같았기 때문이다. 둘이 되는 순간 18px 짜리 헤더 띠 * 안에서 세로로 쌓여 헤더가 깨진다 — 데이터로 빼기 전에 이것부터 고쳐야 했다. * * 구분자(`·`)를 안 넣는다(오너 컨펌 2026-09-10). 「침묵」의 헤더는 선도 점도 * 거의 없는 면이고, `letter-spacing: 0.2em` 이 이미 항목을 떼어 놓는다. */ display: flex; gap: 18px; } .v-quiet .q-gnb a { display: block; transition: color 200ms ease; } .v-quiet .q-gnb a:hover { color: var(--q-ink); } /* 🔴 `space-between` 이 아니다. 자식이 셋(로고 · ABOUT · 컨트롤)이라 `space-between` 으로 두면 ABOUT 이 빈칸 한가운데로 밀려가 어디에도 안 붙는다. 왼쪽부터 쌓고 컨트롤만 `margin-left: auto` 로 오른쪽 끝에 보낸다. */ .v-quiet .q-head { display: flex; align-items: flex-end; justify-content: flex-start; /* 워드마크와 ABOUT 사이. 64(거터)는 왼쪽에 뒀을 때의 값이라 여기서는 너무 멀다 — 붙어 보이되 워드마크를 밀지 않는 거리로 잡았다 */ gap: 32px; } /* `.q-brand` 는 로고 파일이 오기 전의 글자 워드마크였다. #44 에서 로고로 바뀌면서 참조가 0 이 됐다 — 남겨 두면 다음 사람이 둘 중 무엇이 산 것인지 모른다. 되돌릴 일이 있으면 이 커밋을 보면 된다. */ /* --- 워드마크 (#44) ------------------------------------------------ * 원본 512x97. 22px 로 두면 폭이 정확히 116px — 좌측 트랙과 같은 폭이다. * 3배 이상 축소해서 쓰므로 레티나에서도 가장자리가 살아 있다. * * 🔴 라이트/다크가 **다른 파일**이다. 슬래브 색이 그 테마의 지면색이라 * 양쪽 모두 슬래브가 배경에 녹고 글자만 남는다. 한 장으로 쓰면 라이트에서 * 검은 벽돌이 되거나 다크에서 흰 벽돌이 된다. * * 전환 규칙은 토큰과 **같은 3단**이다 — 기본(라이트) · `prefers-color-scheme` * · `data-theme`. 마지막이 이겨야 토글이 양방향으로 동작한다. * ------------------------------------------------------------------ */ .v-quiet .site-logo { height: 26px; width: 137px; display: block; /* 🔴 예전의 `margin-top: 1px` 은 기준이 섞인 것을 눈으로 맞춰 둔 값이었다. `.q-head` 가 `flex-end` 가 된 지금은 넣으면 오히려 1px 어긋난다 */ background: url("/img/logo-light.png") no-repeat center / contain; } @media (prefers-color-scheme: dark) { .v-quiet .site-logo { background-image: url("/img/logo-dark.png"); } } :root[data-theme="dark"] .v-quiet .site-logo { background-image: url("/img/logo-dark.png"); } :root[data-theme="light"] .v-quiet .site-logo { background-image: url("/img/logo-light.png"); } .v-quiet .q-head-right { display: flex; align-items: flex-end; gap: 20px; margin-left: auto; /* 🔴 자리가 모자라면 이 묶음이 줄어든다 (#88). flex 자식의 기본 `min-width: auto` 는 「자기 내용보다 작아지지 않는다」라, 이 한 줄이 없으면 검색칸 166px 이 끝까지 버티고 헤더가 지면을 넘긴다. 자세한 실측은 `.q-search` 주석에 있다 */ min-width: 0; } /* --- 검색 (F-Q2) -------------------------------------------------- * * 예전에는 밑줄이 `--q-line-0`(알파 0)이라 **평상시에 아무 자국이 없었다.** * 「검색」이라는 `--q-faint` 글자 하나가 오른쪽 끝에 떠 있을 뿐이고, 그것이 * 입력칸이라는 것을 알 방법이 없었다. hover 해 봐야 알 수 있는 컨트롤은 * 조용한 것이 아니라 없는 것이다. * * 두 가지를 바꾼다. 새 토큰도 새 색도 만들지 않는다. * · 밑줄을 평상시에도 그린다(`--q-line-1`). 1px 괘선은 이 시스템이 이미 * 링크 밑줄에 쓰는 어휘라 들여오는 장식이 아니다. * · 선의 **왼쪽 끝**에 돋보기를 둔다. 190px 짜리 선이 왜 거기 있는지를 * 설명하는 것은 오른쪽 끝의 placeholder 가 아니라 이 표식이다. * * 🔴 밑줄이 `.q-search` 가 아니라 상자에 붙는다. input 에 두면 돋보기 밑에는 * 선이 없어서 선이 두 동강 난 것처럼 보인다. * ------------------------------------------------------------------ */ .v-quiet .q-searchbox { display: flex; align-items: flex-end; gap: 8px; /* 상자가 안 줄면 그 안의 입력칸도 못 준다 (#88) */ min-width: 0; box-shadow: 0 1px 0 var(--q-line-1); transition: box-shadow 260ms ease; } .v-quiet .q-searchbox:hover, .v-quiet .q-searchbox:focus-within { box-shadow: 0 1px 0 var(--q-line-2); } .v-quiet .q-searchbox svg { display: block; flex: 0 0 auto; color: var(--q-faint); /* 돋보기의 시각 중심을 「검색」 글자에 맞춘다. 줄상자 바닥에 맞추면 떠 보인다 */ margin-bottom: 4px; transition: color 200ms ease; } .v-quiet .q-searchbox:focus-within svg { color: var(--q-ink); } /* 🔴 자리가 모자라면 **검색칸이 먼저 양보한다** (#88). * * GNB 를 관리 화면에서 편집하게 되면서 헤더 왼쪽 폭이 사람이 정하는 값이 됐다. * 오너가 항목을 셋(`ABOUT · PROJECTS · MORE`)으로 늘리자 721~800px 구간에서 * 헤더가 지면을 넘겨 **가로 스크롤**이 생겼다 — WCAG 1.4.10 Reflow 위반이고, * 좁은 화면 서랍(≤720px)이 시작되기 직전 구간이라 아무도 안 보는 자리다. * * 🔴 브레이크포인트를 안 쓴다. `min-width: auto` 만 풀어 주면 flex 가 **모자랄 때만** * 줄인다 — 실측으로 850px 이상에서는 166px 그대로였고 그 아래에서만 양보했다. * 폭마다 값을 적어 두면 항목을 하나 더 넣는 날 그 표가 낡는다. * * 🔴 `min-width: 72px` 이 바닥이다. 「검색」 자리표시가 살아 있어야 그 칸이 * 입력칸인 줄 안다 — 0 까지 줄면 돋보기만 남고, 그건 고장으로 보인다. * * 실측 (항목 3개 · `ABOUT PROJECTS MORE`) * * ``` * 전 후 * 850px 넘침 0 · 검색 166 넘침 0 · 검색 166 ← 아무것도 안 바뀐다 * 800px 넘침 0 · 검색 166 넘침 0 · 검색 137 * 760px 넘침 29 · 검색 166 넘침 0 · 검색 97 * 721px 넘침 68 · 검색 166 넘침 0 · 검색 72 * ``` */ .v-quiet .q-search { /* 바닥값. 「검색」 자리표시가 남아야 입력칸인 줄 안다 (#88) */ min-width: 72px; -webkit-appearance: none; appearance: none; width: 166px; border: 0; outline: 0; background: transparent; font-family: var(--q-sans); font-size: 13px; line-height: 18px; letter-spacing: -0.005em; color: var(--q-ink); caret-color: var(--q-ink); text-align: right; padding: 0 0 5px; } .v-quiet .q-search::placeholder { color: var(--q-faint); letter-spacing: 0.06em; } .v-quiet .q-search:focus::placeholder { color: transparent; } /* --- 테마 토글 (F-V5) — 04 §3.3 "헤더에 두되 눈에 띄지 않게" ------- * * ## 글자에서 그림으로 (2026-08-31) * * 예전에는 모노 3글자(`AUTO`/`LIGHT`/`DARK`)를 `--q-ghost` 로 깔아 뒀다. * 다크에서 #414246 을 #0d0e10 위에 얹은 것이라 대비가 **1.3:1** 이었고, * 보이더라도 그 세 글자가 눌리는 것인지 알 수 없었다. 라벨이 상태에 따라 * 폭이 바뀌어서 오른쪽 덩어리가 미세하게 움직이는 문제도 있었다. * * 원 하나에 **채움만** 바꾼다 — 0% · 50% · 100%. * * LIGHT 빈 원 밝게 * AUTO 반만 채움 시스템을 따른다 * DARK 꽉 찬 원 어둡게 * * 해도 달도 그리지 않는다. 광선과 초승달은 이 시스템에 없는 어휘다. 셋이 같은 * 원이라 눌러서 도는 동안 크기도 자리도 흔들리지 않는다. * * 🔴 세 모양이 **모두 DOM 에 있고** `data-state` 가 무엇을 보일지 정한다. * 누를 때마다 innerHTML 을 갈아 끼우면 노드가 매번 새로 만들어져서 * 포커스 링과 전이가 끊긴다. * * 🔴 글자가 사라지므로 이름은 `aria-label` 이 진다. WCAG 2.5.3(Label in Name)은 * **보이는 글자가 있는** 컴포넌트에만 걸리는 조항이라 아이콘 전용 버튼은 * 대상이 아니다. 대신 4.1.2 가 요구하는 이름이 반드시 있어야 한다. * * ## 남아 있는 것 — 1.4.11 Non-text Contrast (미해결, 오너 판단 대기) * * 쉬는 상태의 `--q-faint` 는 지면 대비가 **라이트 1.71:1 · 다크 2.28:1** 이다. * `--q-ghost` 였던 예전(1.48 / 1.92)보다는 올라왔지만 1.4.11 이 UI 컴포넌트에 * 요구하는 3:1 에는 못 미친다. 아이콘이 곧 이 컨트롤의 유일한 표식이라 조항이 * 걸리는 자리가 맞다. * * 토큰 라이트 다크 * --q-ghost 1.48 1.92 ← 예전 * --q-faint 1.71 2.28 ← 지금 * --q-soft 2.43 3.47 다크만 통과 * --q-mid 4.74 6.03 둘 다 통과 * * 양쪽을 다 넘기는 것은 `--q-mid` 하나뿐인데, 그러면 이 아이콘이 워드마크 다음으로 * 진한 것이 되어 04 §3.3 "헤더에 두되 눈에 띄지 않게" 와 정면으로 어긋난다. * 옆의 `분류`·`최근`·날짜가 전부 `--q-faint` 라 혼자 튀기도 한다. * * 🔴 그래서 여기서 조용히 정하지 않았다. 지금 값은 「침묵」 쪽을 택한 것이고, * 접근성 쪽을 택하려면 이 한 줄(`--q-faint` → `--q-mid`)만 바꾸면 된다. * hover·focus 는 이미 `--q-ink` 라 그쪽은 어느 선택에서도 충분하다. * ------------------------------------------------------------------ */ .v-quiet .q-theme { -webkit-appearance: none; appearance: none; border: 0; background: transparent; display: block; margin: 0; padding: 0 0 4px; cursor: pointer; color: var(--q-faint); transition: color 200ms ease; } .v-quiet .q-theme svg { display: block; } .v-quiet .q-theme:hover, .v-quiet .q-head:hover .q-theme { color: var(--q-ink); } .v-quiet .q-theme:focus-visible { color: var(--q-ink); outline: 1px solid var(--q-soft); outline-offset: 3px; } /* 채움 세 단계. 기본(스크립트 전)은 서버가 쿠키로 정한 값이 이미 붙어 있다 */ .v-quiet .q-theme .q-theme-half, .v-quiet .q-theme .q-theme-full { display: none; } .v-quiet .q-theme[data-state="system"] .q-theme-half { display: block; } .v-quiet .q-theme[data-state="dark"] .q-theme-full { display: block; } /* JS 가 없으면 누를 수 있는 것처럼 보이면 안 된다 — 스크립트가 켠다 */ .v-quiet .q-theme[hidden] { display: none; } /* --- 햄버거와 서랍 (2026-08-31 · 오너 지시) ------------------------ * * 넓은 화면에서는 **없는 것과 같다.** 햄버거는 `display: none` 이고 서랍은 * `display: contents` 라 상자를 만들지 않는다 — ABOUT · 테마 · 검색이 지금까지처럼 * 헤더 띠에 그대로 늘어선다. 실제 모양은 720px 아래(맨 아래 미디어 블록)에서만 * 생긴다. 여기 셋은 그 세 줄을 되돌리는 기본값이다. * * 🔴 항목을 **복제하지 않는다.** 넓은 화면용과 좁은 화면용을 따로 두면 * `id="q-theme"` 가 둘이 되고 검색 input 도 둘이 된다. 같은 노드가 CSS 로만 * 자리를 옮기므로 문서에는 언제나 하나씩이다. * ------------------------------------------------------------------ */ .v-quiet .q-menu { display: none; } .v-quiet .q-drawer { display: contents; } /* 서랍 안에서만 필요한 글자. 헤더 띠에서는 테마 아이콘이 워드마크·검색과 나란해서 무엇인지 읽히지만, 판 안에 혼자 놓이면 동그라미 하나가 된다. 「조용한」 것과 뜻이 안 통하는 것은 다르다. 🔴 `aria-label` 이 이름을 정하므로 이 글자는 그 안에 **포함**돼야 한다 (WCAG 2.5.3) — "화면 테마" ⊂ "화면 테마, 눌러서 바꾼다". */ .v-quiet .q-mlabel { display: none; } /* --- 좌측 트랙에 매달리는 모노 메타 -------------------------------- */ .v-quiet .q-label { grid-column: 1; text-align: right; font-family: var(--q-mono); font-size: 10px; line-height: 18px; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--q-faint); white-space: nowrap; } .v-quiet .q-date { grid-column: 1; text-align: right; font-family: var(--q-mono); font-size: 11.5px; line-height: 28px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--q-faint); white-space: nowrap; } .v-quiet .q-n { font-family: var(--q-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--q-faint); margin-left: 6px; } .v-quiet .p-mark { display: block; font-family: var(--q-mono); font-size: 10px; line-height: 18px; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--q-faint); } /* --- 홈 인트로 블록 (관리자 편집형, 비면 서버가 렌더하지 않는다) --- */ .v-quiet .q-hello { margin-top: 104px; } .v-quiet .q-hello p { margin: 0 0 12px; font-size: 17px; line-height: 34px; letter-spacing: -0.012em; color: var(--q-mid); max-width: 560px; } .v-quiet .q-hello p:first-child { color: var(--q-ink); font-weight: 500; } .v-quiet .q-hello p:last-child { margin-bottom: 0; } .v-quiet .q-hello a { box-shadow: inset 0 -1px 0 var(--q-link-line); transition: box-shadow 200ms ease; } .v-quiet .q-hello a:hover { box-shadow: inset 0 -1px 0 var(--q-link-line-on); } /* --- 아카이브·검색 헤딩 ------------------------------------------- */ .v-quiet .q-heading { margin-top: 104px; } .v-quiet .q-heading .q-main { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--q-rule); } .v-quiet .q-heading h1 { margin: 0; font-size: 19px; font-weight: 500; line-height: 30px; letter-spacing: -0.018em; color: var(--q-ink); } .v-quiet .q-heading h1 i { font-style: normal; color: var(--q-faint); margin: 0 8px; } .v-quiet .q-heading .q-count { flex: 0 0 auto; font-family: var(--q-mono); font-size: 11.5px; line-height: 18px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--q-faint); } /* --- 오류 화면 (#39) ---------------------------------------------- * 새 컴포넌트를 만들지 않는다. 헤딩·본문 크기를 목록 화면에서 그대로 가져와 * **오류도 이 사이트의 한 화면**으로 읽히게 한다. 구분선도 두지 않는다 — * 나가는 문 두 개 말고는 아무것도 없는 자리다. * ------------------------------------------------------------------ */ .v-quiet .p-err { margin-top: 140px; } .v-quiet .p-err h1 { margin: 0; font-size: 19px; font-weight: 500; line-height: 30px; letter-spacing: -0.018em; color: var(--q-ink); } .v-quiet .p-err p { margin: 26px 0 0; max-width: 560px; font-size: 14px; line-height: 28px; color: var(--q-mid); } .v-quiet .p-err-out { margin-top: 40px; font-family: var(--q-mono); font-size: 11.5px; letter-spacing: 0.06em; } .v-quiet .p-err-out a { color: var(--q-soft); text-decoration: none; } .v-quiet .p-err-out a:hover { color: var(--q-ink); } .v-quiet .p-err-out span { color: var(--q-faint); margin: 0 10px; } .v-quiet .q-note { margin: 30px 0 0; max-width: 560px; font-size: 14px; line-height: 28px; letter-spacing: -0.01em; color: var(--q-mid); } .v-quiet .q-note em { font-style: normal; color: var(--q-ink); } /* --- 목록 --------------------------------------------------------- */ .v-quiet .q-recent { margin-top: 132px; } .v-quiet .q-list { margin-top: 30px; } .v-quiet .q-post { display: grid; grid-template-columns: var(--q-cols); align-items: start; padding-bottom: 38px; } .v-quiet .q-post:last-child { padding-bottom: 0; } .v-quiet .q-post .q-date { padding-top: 1px; transition: color 220ms ease; } .v-quiet .q-body { grid-column: 3; min-width: 0; } /* h2 로 나간다(04 §4.1 의 카드 제목이 곧 문서의 소제목이다). 브라우저 기본 여백을 지운다 */ .v-quiet .q-title { margin: 0; font-size: 19px; font-weight: 500; line-height: 28px; letter-spacing: -0.018em; color: var(--q-ink); max-width: 620px; } /* 검색 하이라이트는 제목에만 — 본문 발췌에는 하지 않는다(「침묵」, 04 §4.4) */ .v-quiet .q-title mark { background: var(--q-sel); color: var(--q-ink); } /* 04 §4.1 — 분류는 **날짜 아래**, 좌측 메타 트랙에 우측정렬. 복수면 줄바꿈이라 구분점(`·`)을 두지 않고 한 줄에 하나씩 쌓는다 */ .v-quiet .q-cats { grid-column: 1; text-align: right; margin-top: 3px; font-size: 11.5px; line-height: 18px; letter-spacing: 0.005em; color: var(--q-faint); } .v-quiet .q-cats span { display: block; } /* 발췌 — **기본은 없고, 카드에 마우스를 올리면 3줄이 펴진다** (#45, 오너 지시 2026-08-07). * * ## 세 번 뒤집힌 자리다 * * ``` * ① max-height: 0 · hover 에서만 편다 초기 시안 * ② 항상 3줄 ① 의 비대칭 때문에 바꿨다 * ③ 3줄이 바닥 · hover 에서 전문 오너 지시를 내가 잘못 읽었다 * ④ 없음 · hover 에서 3줄 ← 지금. ① 로 돌아왔다 * ``` * * ② 로 바꿀 때의 이유는 **"폰에서 아무것도 못 읽는다"** 였다. 그 이유는 지금도 * 유효하므로 `@media (hover: none)` 에서 상시 3줄로 편다(아래). 마우스가 없는 * 기기는 hover 라는 사건 자체가 없으니, 그쪽에는 처음부터 펴 두는 것이 맞다. * ① 이 틀렸던 것은 목록의 조용함이 아니라 **폰을 잊은 것**이었다. * * ## 목록은 제목만으로 선다 * * 214편이 제목·날짜·분류만으로 늘어선다. 발췌는 손이 닿은 카드 하나에만 나타난다 — * 「침묵」에서 정보는 요청할 때 온다. * * 🔴 `margin-top` 도 같이 전이시켜야 한다. 높이만 접으면 12px 이 남아 카드 사이가 * 들쭉날쭉해진다. */ .v-quiet .q-excerpt { margin-top: 0; max-width: 560px; font-size: 13.5px; line-height: 26px; letter-spacing: -0.006em; color: var(--q-mid); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 280ms ease, opacity 220ms ease, margin-top 280ms ease; } /* `focus-within` 이 있어야 키보드로도 닿는다 — 카드 안 제목이 링크다 */ .v-quiet .q-post:hover .q-excerpt, .v-quiet .q-post:focus-within .q-excerpt { margin-top: 12px; /* 3줄 = 26px × 3. 클램프와 같은 값이어야 마지막 줄이 잘리지 않는다 */ max-height: 78px; opacity: 1; } .v-quiet .q-post:hover .q-date { color: var(--q-ink); } .v-quiet .q-post:hover .q-cats { color: var(--q-soft); } /* --- 페이지네이션 (F-V8) ------------------------------------------ */ .v-quiet .q-pages { margin-top: 76px; } .v-quiet .q-pages nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px; font-family: var(--q-mono); font-size: 12.5px; line-height: 18px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--q-faint); } .v-quiet .q-pages a { transition: color 200ms ease; } .v-quiet .q-pages a:hover { color: var(--q-ink); } .v-quiet .q-pages .q-now { color: var(--q-ink); font-weight: 500; } .v-quiet .q-pages .q-gap { color: var(--q-ghost); } /* --- 푸터 --------------------------------------------------------- */ .v-quiet .q-foot { margin-top: 132px; } .v-quiet .q-foot p { margin: 0; font-family: var(--q-mono); font-size: 10.5px; line-height: 18px; letter-spacing: 0.16em; color: var(--q-ghost); } .v-quiet .q-foot a { transition: color 200ms ease; } .v-quiet .q-foot a:hover { color: var(--q-mid); } /* --- 빵부스러기 · 제목 블록 --------------------------------------- */ .v-quiet .p-crumb { margin-top: 104px; } .v-quiet .p-crumb nav { font-family: var(--q-mono); font-size: 10px; line-height: 18px; letter-spacing: 0.2em; color: var(--q-soft); } .v-quiet .p-crumb a { transition: color 200ms ease; } .v-quiet .p-crumb a:hover { color: var(--q-ink); } .v-quiet .p-crumb i { font-style: normal; color: var(--q-faint); margin: 0 8px 0 4px; } .v-quiet .p-head { margin-top: 30px; } .v-quiet .p-head .q-date { padding-top: 13px; } .v-quiet .p-title { margin: 0; font-size: 30px; font-weight: 500; line-height: 46px; letter-spacing: -0.028em; color: var(--q-ink); max-width: 700px; } .v-quiet .p-chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; } .v-quiet .p-chip { display: inline-block; border: 1px solid var(--q-rule); padding: 6px 12px; font-size: 11.5px; line-height: 16px; letter-spacing: -0.005em; color: var(--q-mid); transition: border-color 200ms ease, color 200ms ease; } .v-quiet .p-chip:hover { border-color: var(--q-soft); color: var(--q-ink); } /* --- 정적 목차 — JS 가 없을 때의 기본값 (F-V1) --------------------- */ .v-quiet .p-toc { margin-top: 88px; } .v-quiet .p-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: q-toc; max-width: 560px; } .v-quiet .p-toc li { display: flex; align-items: baseline; gap: 18px; padding: 6px 0; } .v-quiet .p-toc li::before { counter-increment: q-toc; content: counter(q-toc, decimal-leading-zero); flex: 0 0 auto; font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--q-faint); } .v-quiet .p-toc a { /* 🔴 `li` 가 flex 라 항목의 기본 `min-width: auto` 가 내용보다 작아지는 것을 막는다. 루트가 `word-break: keep-all` 이라 「오케스트레이터는」 같은 긴 낱말이 한 덩어리인데, 줄 자리가 없으면 줄바꿈 대신 **상자를 넓혀** 페이지를 가로로 민다. `.p-related span`·`.p-nb` 와 같은 종류다 (2026-08-31 실측). */ min-width: 0; font-size: 14px; line-height: 24px; letter-spacing: -0.012em; color: var(--q-mid); transition: color 200ms ease; } .v-quiet .p-toc a:hover { color: var(--q-ink); } /* --- 본문 문서: 레일 + 아티클 ------------------------------------- * 🔴 `grid-row: 1` 이 둘 다에 있어야 한다. 마크업이 **레일 → 본문** 순서인데 * 레일은 1트랙, 본문은 3트랙이라 자동 배치가 둘을 다른 행에 놓기 때문이다. * 좌우 배치는 그리드가 만든다 — `order` 로 뒤집지 않는다(탭 순서가 어긋난다). * ------------------------------------------------------------------ */ .v-quiet .p-doc, .v-quiet .q-doc { display: grid; grid-template-columns: var(--q-cols); } .v-quiet .p-doc { margin-top: 100px; } /* 🔴 목록·아카이브·검색에도 같은 상단 여백이 있어야 한다. * * 예전에는 `.q-doc` 에 여백이 0 이라 sticky 레일이 헤더 띠에 **2px** 간격으로 * 붙어 있었다(실측 @1280: 워드마크 bottom y=150 · `.p-rail-label` top y=152). * 상세에서 같은 값을 재면 766px 이라 두 화면이 아예 다른 규칙을 쓰고 있었다. * 「침묵」의 상단 여백은 104px 단위다(`.q-hello`·`.q-heading`·`.p-crumb`). * * 아래 두 줄이 짝이다 — 첫 블록의 상단 여백을 컨테이너로 올려야 레일과 본문이 * **같은 높이에서** 출발한다. 올리지 않으면 여백이 두 번 붙어 본문만 내려간다. * `.q-sr` 은 절대 위치라 자리를 차지하지 않으므로, 감춘 h1 이 먼저 오는 홈에서는 * 그 다음 블록이 실질적 첫 블록이다(그 경우만 원래 값 132 - 104 = 28 이 남는다). */ .v-quiet .q-doc { margin-top: 104px; } .v-quiet .q-docmain > .q-hello:first-child, .v-quiet .q-docmain > .q-heading:first-child { margin-top: 0; } .v-quiet .q-docmain > .q-sr:first-child + .q-recent { margin-top: 28px; } .v-quiet .p-main, .v-quiet .q-docmain { grid-column: 3; grid-row: 1; min-width: 0; } /* --- 좌측 레일 (LNB + 레일 목차) ---------------------------------- * 🔴 조상에 overflow:hidden 이 걸리면 sticky 가 죽는다. 가로 넘침을 * 막을 일이 있으면 overflow-x: clip 을 쓴다. * ------------------------------------------------------------------ */ .v-quiet .p-rail { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 36px; text-align: right; max-height: calc(100vh - 72px); overflow-y: auto; /* 🔴 `overscroll-behavior: contain` 을 뺐다 (#43). `contain` 은 **스크롤할 것이 없어도** 연쇄를 막는다. 레일이 안 넘치는 보통 상황에서 레일 위 116px 이 통째로 죽은 구역이 된다 — 휠을 굴려도 페이지가 안 움직인다. 실측(1280x900): 레일 위에서 휠 10회, y 가 4000 에서 그대로였다. 레일 끝에서 페이지가 안 밀리는 이점보다 잃는 게 크다. */ scrollbar-width: thin; scrollbar-color: var(--q-faint) transparent; } /* 분류 판의 라벨은 `summary`, 목차 판의 라벨은 `span` 이다. 둘이 같아 보여야 한다. 🔴 `display: block` 이 여닫이 삼각형을 없앤다(브라우저 기본은 `list-item`). 사파리는 `::-webkit-details-marker` 를 따로 지워야 한다. */ .v-quiet .p-rail-label { display: block; font-family: var(--q-mono); font-size: 10px; line-height: 18px; letter-spacing: 0.2em; color: var(--q-faint); margin-bottom: 26px; } .v-quiet summary.p-rail-label { list-style: none; cursor: pointer; transition: color 200ms ease; } .v-quiet summary.p-rail-label::-webkit-details-marker { display: none; } .v-quiet summary.p-rail-label:hover { color: var(--q-soft); } .v-quiet summary.p-rail-label:focus-visible { color: var(--q-ink); outline: 1px solid var(--q-soft); outline-offset: 3px; } /* 여닫이 표식. 접을 수 있다는 것을 알려주지 않으면 접힌 분류는 그냥 사라진 것으로 보인다. 폭에 상관없이 낸다 — 넓은 화면에서도 사용자가 접을 수 있는데 표식이 그때만 없으면 되펼 방법이 안 보인다 */ .v-quiet summary.p-rail-label::after { content: "+"; margin-left: 0.6em; font-variant-numeric: tabular-nums; } .v-quiet .p-rail-cats[open] > summary.p-rail-label::after { content: "−"; } .v-quiet .p-branch { margin-bottom: 22px; } .v-quiet .p-branch:last-child { margin-bottom: 0; } .v-quiet .p-branch-head { display: block; font-size: 12.5px; font-weight: 500; line-height: 20px; letter-spacing: -0.012em; color: var(--q-ink); transition: color 200ms ease; } .v-quiet .p-branch-head:hover { color: var(--q-ink-dim); } .v-quiet .p-branch ul { list-style: none; margin: 6px 0 0; padding: 0; } .v-quiet .p-branch ul a { display: block; font-size: 11.5px; line-height: 20px; letter-spacing: -0.008em; color: var(--q-soft); transition: color 200ms ease; } .v-quiet .p-branch ul a:hover { color: var(--q-ink); } .v-quiet .p-branch a[aria-current] { color: var(--q-ink); font-weight: 500; } .v-quiet .p-branch a[aria-current] .q-n { color: var(--q-soft); } /* --- F-V1 레일 전환: 분류 ↔ 목차 --------------------------------- * 둘 다 항상 DOM 에 있고 표시만 바뀐다. JS 가 없으면 분류가 그대로 남는 * 것이 기본값이므로, 레일 목차는 `hidden` 을 달고 서버에서 나간다. * * 🔴 aria-live 를 쓰지 않는다 — 스크롤마다 스크린리더가 읽으면 방해다. * * 전환 중 컨테이너 높이가 튀지 않도록 두 장을 겹쳐 놓고 opacity 만 * 바꾼다. 분류 27줄과 목차 5줄은 높이 차가 크다. * ------------------------------------------------------------------ */ .v-quiet .p-rail-stack { position: relative; } .v-quiet .p-rail-pane { transition: opacity 200ms ease; } .v-quiet .p-rail-pane[hidden] { display: block; opacity: 0; pointer-events: none; /* 스크린리더에도 감춘다. hidden 속성의 기본 동작을 display 로 덮었기 때문 */ visibility: hidden; position: absolute; inset: 0; /* 🔴 이 줄이 없으면 **안 보이는 pane 이 스크롤바를 만든다** (#43). `inset: 0` 이 숨은 pane 을 보이는 pane 높이에 가두는데, 내용이 그보다 길면 넘친 만큼이 레일의 스크롤 영역으로 잡힌다. 실측(1280x900 · 글 3702): 목차 표시 중 clientHeight 489 인데 scrollHeight 698 — 숨은 분류 27줄이 만든 209px 이었다. 보이는 것이 아니라 안 보이는 것 때문에 생기던 스크롤바다. */ overflow: hidden; } .v-quiet .p-rail-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: q-rail; } .v-quiet .p-rail-toc li { margin-bottom: 14px; } .v-quiet .p-rail-toc li:last-child { margin-bottom: 0; } .v-quiet .p-rail-toc li::before { counter-increment: q-rail; content: counter(q-rail, decimal-leading-zero); display: block; font-family: var(--q-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--q-faint); margin-bottom: 3px; } .v-quiet .p-rail-toc a { display: block; font-size: 11.5px; line-height: 18px; letter-spacing: -0.008em; color: var(--q-mid); transition: color 200ms ease; } .v-quiet .p-rail-toc a:hover { color: var(--q-ink); } .v-quiet .p-rail-toc a.is-cur { color: var(--q-ink); font-weight: 500; } /* --- 맨 위로 (#43) ------------------------------------------------ * `분류`·`목차` 와 같은 급의 글자 하나다. 원형 버튼도, 그림자도, 테두리도 없다. * 목차가 떠 있을 때만 나타난다 — 신호를 레일 전환과 공유한다. * ------------------------------------------------------------------ */ .v-quiet .p-totop { display: block; margin-top: 34px; font-family: var(--q-mono); font-size: 10px; line-height: 18px; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--q-faint); text-decoration: none; transition: color 200ms ease; } .v-quiet .p-totop[hidden] { display: none; } .v-quiet .p-totop:hover { color: var(--q-ink); } .v-quiet .p-totop:focus-visible { outline: 1px solid var(--q-soft); outline-offset: 4px; } /* --- 본문 --------------------------------------------------------- */ .v-quiet .post-body { counter-reset: q-sec; } .v-quiet .post-body > :first-child { margin-top: 0; } .v-quiet .post-body h2 { margin: 104px 0 26px; max-width: 672px; font-size: 21px; font-weight: 500; line-height: 34px; letter-spacing: -0.022em; color: var(--q-ink); scroll-margin-top: 36px; } /* 섹션 경계를 색이나 선이 아니라 모노 번호와 여백으로 만든다 */ .v-quiet .post-body h2::before { counter-increment: q-sec; content: counter(q-sec, decimal-leading-zero); display: block; margin-bottom: 16px; font-family: var(--q-mono); font-size: 10px; font-weight: 400; line-height: 14px; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--q-faint); } .v-quiet .post-body h3 { margin: 62px 0 18px; max-width: 672px; font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: -0.016em; color: var(--q-ink); scroll-margin-top: 36px; } /* 🔴 루트가 line-height:1 이라 개별 규칙이 없는 요소는 줄이 붙는다. 마크다운 저자가 h4~h6 을 쓰면 즉시 티가 나므로 받아 둔다 */ .v-quiet .post-body h1, .v-quiet .post-body h4, .v-quiet .post-body h5, .v-quiet .post-body h6 { margin: 48px 0 16px; max-width: 672px; font-size: 15px; font-weight: 600; line-height: 28px; letter-spacing: -0.014em; color: var(--q-ink); scroll-margin-top: 36px; } .v-quiet .post-body h1 { font-size: 24px; line-height: 38px; } .v-quiet .post-body dl, .v-quiet .post-body dd, .v-quiet .post-body dt, .v-quiet .post-body figcaption, .v-quiet .post-body address { font-size: 15px; line-height: 30px; letter-spacing: -0.01em; color: var(--q-mid); } .v-quiet .post-body hr { margin: 72px 0 0; max-width: 672px; border: 0; border-top: 1px solid var(--q-rule); } /* 🔴 문단 리듬 — 05 §5.1 X2. * * 문단 간격은 **행간보다 커야 한다.** 30px < 34px 이면 문단 경계가 줄바꿈과 * 구별되지 않아 장문에서 읽던 자리를 놓친다. 40px 로 올린다. * * 같은 값을 `ul`·`ol`·`blockquote 뒤` 에도 쓴다. 문단과 목록이 서로 다른 * 리듬을 가지면 「침묵」의 지면이 두 박자로 흔들린다. * * 줄바꿈은 루트(`.v-quiet`)가 `keep-all` + `overflow-wrap: break-word` 로 잡고 * 있는데, **본문 문단만 그 상속을 끊는다** (#42, 오너 지시 2026-08-06). */ .v-quiet .post-body p { margin: 40px 0 0; max-width: 672px; /* 오너 지시 2026-08-24 — 17px → 16px. 행간은 배수(2.0)를 지켜 34 → 32. 문단 간격 40px 은 그대로라 「간격 > 행간」(05 §5.1 X2)이 더 넉넉해진다. */ font-size: 16px; line-height: 32px; letter-spacing: -0.012em; color: var(--q-ink); /* 명세상 `word-break: normal` + `overflow-wrap: anywhere` 와 같은 값이다. 루트의 `keep-all` 이 여기서 풀리므로 **한글이 어절 중간에서도 끊긴다.** 그것이 이 지시의 내용이다 — 문단이 상자를 뚫는 쪽보다 낫다고 판단했다. 제목·목록·표는 건드리지 않는다. 루트 상속 그대로 어절을 지킨다. */ word-break: break-word; } .v-quiet .post-body strong { font-weight: 600; letter-spacing: -0.016em; } .v-quiet .post-body em { font-style: italic; color: var(--q-mid); } /* 링크는 색이 아니라 밑줄 알파로 구분한다 — 그레이스케일에서도 살아남는다 */ .v-quiet .post-body p a, .v-quiet .post-body li a, .v-quiet .post-body td a { color: var(--q-ink); box-shadow: inset 0 -1px 0 var(--q-link-line); transition: box-shadow 200ms ease; } .v-quiet .post-body p a:hover, .v-quiet .post-body li a:hover, .v-quiet .post-body td a:hover { box-shadow: inset 0 -1px 0 var(--q-link-line-on); } .v-quiet .post-body ul, .v-quiet .post-body ol { margin: 40px 0 0; padding: 0; max-width: 672px; list-style: none; counter-reset: q-li; } /* 🔴 항목 사이에 여백을 두지 않는다 (오너 지시 2026-08-06). * * `line-height` 는 문단과 이미 같은 34px 였고, 차이는 항목마다 붙던 * `margin-top: 12px` 하나였다 — 항목 사이가 46px 이라 목록만 성기게 떴다. * 목록 항목이 **문단 안의 줄들처럼** 34px 간격으로 이어져야 한다. * * 항목 경계는 여백이 아니라 불릿(`::before`)이 만든다. 실측으로 확인했다 — * 여러 줄로 넘어가는 항목에서도 불릿이 각 항목의 첫 줄에만 찍혀 경계가 남는다. */ .v-quiet .post-body li { position: relative; padding-left: 22px; /* 🔴 문단과 **같은 값**이어야 한다. 다르면 지면이 두 박자로 흔들린다 (QuietCssContractTest 가 두 값이 같은지 본다) */ font-size: 16px; line-height: 32px; letter-spacing: -0.012em; color: var(--q-ink); } /* 🔴 중첩 목록은 위 `margin: 40px 0 0` 을 물려받으면 안 된다. * * 그 40px 은 **문단과 목록 사이** 간격이다. 항목 사이 여백을 0 으로 만든 뒤로는 * 중첩된 `ul`/`ol` 만 40px 을 그대로 써서 부모 항목에서 뚝 떨어졌다 — 실측 * (2026-08-06 · Chrome headless): 부모 항목 글줄과 자식 항목 글줄 사이 74px, * 행간 34px 이므로 목록 한가운데 40px 짜리 빈 칸이 생긴다. * 중첩 목록은 부모 항목의 다음 줄로 **이어져야** 한다. */ .v-quiet .post-body li > ul, .v-quiet .post-body li > ol { margin-top: 0; } .v-quiet .post-body ul > li::before { content: ""; position: absolute; left: 3px; /* 행간을 따라간다 — 34px 일 때 15px, 32px 일 때 14px, 30px 일 때 13px */ top: 14px; width: 3px; height: 3px; border-radius: 50%; background: var(--q-soft); } .v-quiet .post-body ol > li::before { counter-increment: q-li; content: counter(q-li); position: absolute; left: 0; top: 0; font-family: var(--q-mono); font-size: 11px; line-height: 32px; color: var(--q-faint); font-variant-numeric: tabular-nums; } .v-quiet .post-body blockquote { margin: 58px 0 0; padding-left: 26px; max-width: 672px; border-left: 1px solid var(--q-rule); } .v-quiet .post-body blockquote p { margin: 0; /* 본문보다 한 칸 작다는 관계를 지킨다 (본문 17→16 에 맞춰 16→15) */ font-size: 15px; line-height: 30px; letter-spacing: -0.01em; color: var(--q-mid); } /* 인라인 코드 — X3. `break-all` 을 쓰면 Supplier> 가 Suppli / er> 로 잘린다 */ .v-quiet .post-body p code, .v-quiet .post-body li code, .v-quiet .post-body blockquote code, .v-quiet .post-body td code, .v-quiet .post-body h3 code { font-family: var(--q-mono); font-size: 0.855em; letter-spacing: 0; color: var(--q-ink); background: var(--q-code-in); padding: 0.1em 0.34em; /* 사이트 전체에서 유일한 라운드 값이다 */ border-radius: 2px; /* 🔴 05 §5 X3 의 판정을 뒤집는 값이다 (#42, 오너 지시 2026-08-06). X3 은 `break-all` 이 `Supplier>` 를 `Suppli / er>` 로 자른다며 `overflow-wrap: anywhere` 를 택했다. 그 판단이 뒤집혔다 — 식별자가 잘리더라도 상자를 뚫지 않는 쪽을 택한다. `anywhere` 는 지운다. `break-all` 이 이기므로 남겨 두면 읽는 사람이 헷갈린다. 코드블록은 `white-space: pre` 라 이 값이 닿아도 줄바꿈이 생기지 않는다. */ word-break: break-all; } /* --- 코드블록 — 이 블로그의 본체(949개 · 글의 71%) ----------------- * * 🔴 코드가 문단보다 넓어서 글이 정돈돼 보이지 않았다 (#43, 오너 지적). * 실측: 1440px 이상에서 문단 672px · 코드 860px — 코드가 188px 튀어나온다. * * 그런데 **넓을 이유가 거의 없다.** 코드블록 951개의 가장 긴 줄을 셌다. * * 672px(≈86자) 안에 들어감 89.6% * 860px(≈110자) 안에 들어감 96.5% * 860px 로도 스크롤해야 함 3.5% * * 89.6% 는 문단 폭에 그냥 들어간다. 열을 맞춰도 잃는 게 없다. * 나머지 10.4% 만 넓힐 수 있게 한다 — 할 일이 있는 블록에만 장치가 생긴다. * * ## 넓혀도 아래가 안 밀린다 * * `white-space: pre` 라 폭이 늘어도 **줄 수가 변하지 않는다.** 높이가 그대로이므로 * 뒤따르는 문단이 움직이지 않는다. 마우스가 지나갈 때 페이지가 흔들리지 않는 * 이유가 이것이다 — 이 조건이 깨지면(줄바꿈을 허용하면) 이 규칙도 같이 깨진다. * ------------------------------------------------------------------ */ .v-quiet .codeblock { margin: 58px 0 0; /* 문단과 같은 열에 선다. `.post-body p` 의 값과 **같아야** 한다 */ max-width: 672px; border: 1px solid var(--q-code-edge); background: var(--q-code-bg); transition: max-width 240ms ease; } /* 넘치는 블록만 표시가 붙는다(`quiet.js`). 안 넘치면 컨트롤도 없다. * * `.is-wide` 는 **클릭으로 고정한 상태**다 (#45, 오너 지시). hover 는 손을 떼면 * 돌아오지만 이건 남는다 — 긴 코드를 읽는 동안 마우스를 붙들고 있을 수는 없다. * 다시 누르면 풀린다. */ .v-quiet .codeblock.is-widenable:has(.codeblock-head:hover), .v-quiet .codeblock.is-widenable:focus-within, .v-quiet .codeblock.is-wide { max-width: 100%; } /* 고정 상태에서는 헤드가 눌린 컨트롤이라는 것을 라벨이 알린다 */ .v-quiet .codeblock.is-widenable .codeblock-lang { cursor: pointer; } .v-quiet .codeblock.is-widenable .codeblock-lang:hover, .v-quiet .codeblock.is-wide .codeblock-lang { color: var(--q-ink); } .v-quiet .codeblock-lang:focus-visible { outline: 1px solid var(--q-soft); outline-offset: 3px; } /* `:has` 가 없는 브라우저를 위한 폴백 — 블록 어디든 올리면 넓어진다 */ @supports not selector(:has(*)) { .v-quiet .codeblock.is-widenable:hover { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .v-quiet .codeblock { transition: none; } } .v-quiet .codeblock-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px 10px 20px; border-bottom: 1px solid var(--q-code-rule); } .v-quiet .codeblock-lang { font-family: var(--q-mono); font-size: 10px; line-height: 16px; letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase; color: var(--q-soft); } /* 언어 미지정 블록 15.3%(145개) — 빈 라벨을 그대로 두지 않는다 */ .v-quiet .codeblock-lang:empty::before { content: "PLAIN"; color: var(--q-faint); } .v-quiet .btn-copy { -webkit-appearance: none; appearance: none; border: 0; background: transparent; padding: 0; font-family: var(--q-mono); font-size: 10px; line-height: 16px; letter-spacing: 0.16em; color: var(--q-soft); cursor: pointer; opacity: 0; transition: opacity 220ms ease, color 200ms ease; } /* focus-within 이 있어야 키보드만으로 도달할 수 있다(N-X2) */ .v-quiet .codeblock:hover .btn-copy, .v-quiet .codeblock:focus-within .btn-copy { opacity: 1; } .v-quiet .btn-copy:hover { color: var(--q-ink); } .v-quiet .btn-copy:focus-visible { opacity: 1; outline: 1px solid var(--q-soft); outline-offset: 3px; } /* 🔴 가로 스크롤이 블록 내부에 갇힌다. 페이지가 밀리면 실패다(D5) */ .v-quiet .codeblock pre { margin: 0; padding: 22px 20px 24px; max-width: 100%; overflow-x: auto; overflow-y: hidden; background: transparent; scrollbar-width: thin; scrollbar-color: var(--q-faint) transparent; } .v-quiet .codeblock code { display: block; font-family: var(--q-mono); font-size: 13px; line-height: 24px; letter-spacing: 0; color: var(--q-ink); word-break: normal; white-space: pre; tab-size: 4; background: none; padding: 0; } /* 구문 토큰. 지금은 이 클래스를 만드는 쪽이 없다 — 서버 하이라이터를 붙이는 날 이 규칙 위에 그대로 얹힌다(05 §7.5) */ .v-quiet .tok-kw { color: var(--q-kw); } .v-quiet .tok-str { color: var(--q-str); } .v-quiet .tok-com { color: var(--q-com); } .v-quiet .tok-num { color: var(--q-num); } .v-quiet .tok-fn { color: var(--q-fn); } .v-quiet .tok-type { color: var(--q-type); } .v-quiet .tok-ann { color: var(--q-ann); } /* 로그의 [main] 같은 대괄호 태그가 링크로 오독되지 않도록 (R5) */ .v-quiet .codeblock code span { text-decoration: none; box-shadow: none; } /* --- 표 — max-width 가 빠지면 넓은 표가 페이지 전체를 민다 --------- */ .v-quiet .post-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 58px 0 0; } .v-quiet .post-body th, .v-quiet .post-body td { text-align: left; white-space: nowrap; padding: 13px 26px 13px 0; border-bottom: 1px solid var(--q-rule); } .v-quiet .post-body th { font-family: var(--q-mono); font-size: 10px; font-weight: 400; line-height: 18px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--q-soft); border-bottom-color: var(--q-rule-strong); padding-bottom: 11px; } .v-quiet .post-body td { font-size: 13.5px; line-height: 24px; letter-spacing: -0.008em; color: var(--q-mid); } .v-quiet .post-body td:first-child { color: var(--q-ink); } .v-quiet .post-body tbody tr:last-child td { border-bottom: 0; } /* --- 이미지 ------------------------------------------------------- */ .v-quiet .post-body p > img, .v-quiet .post-image img { display: block; width: auto; max-width: 100%; height: auto; margin: 62px 0 0; /* 다크에서 흰 여백 많은 도식이 발광하지 않게. 값은 토큰에서만 온다 */ filter: var(--q-img-filter); cursor: zoom-in; } .v-quiet .post-image { margin: 62px 0 0; max-width: 100%; } /* --- 다이어그램 (#79) ----------------------------------------------- 본문의 ```mermaid · ```svg 펜스가 구워져 로 나온 자리다. 🔴 인라인 SVG 가 아니라 이미지인 이유는 CSP 다. 실측(2026-08-10) — 우리 style-src 'self' 아래에서 내부