@charset "UTF-8";
/* =============================================================================
theme-dancheong.css — 5A「단청(丹靑)」 다크 테마 v2.1-a (designer, 2026-08-03)
⚠ 🔴 **이 줄은 아래 «변경 이력» 의 마지막 회차와 반드시 같아야 합니다.**
v1.9 회차에 «v1.8» 로, v2.1 회차에 «v2.0» 으로 두 번 낡은 자리입니다.
이력을 늘릴 때 이 줄을 같이 고치십시오 — 안 고치면 다음 사람이 파일 전체를
한 판 낮춰 읽습니다.
-----------------------------------------------------------------------------
변경 이력 — 이 파일에서 «구조» 가 바뀐 회차만 적습니다. 값 조정은 §7 안에 적습니다.
v1.0 2026-08-01 최초. 히어로 사진 없음(출처 미확인). @keyframes 삭제.
v1.3 2026-08-01 결정-35 — 히어로 사진 1장 도입(스크림 알파 .96 · 균일).
v1.4 2026-08-01 사용자 지시 ①「세로가 잘린다」→ 사진 층을 auto 100% 로 두고
좌우 빈 폭을 같은 사진 cover 로 메우는 **4층 구조**.
지시 ②「조금 더 잘 보이게」→ 하이라이트 억제 톤커브 + 알파 .83.
v1.5 2026-08-02 🔴 사용자 지시로 **v1.4 의 4층 구조를 폐기**하고 cover 단층으로
되돌렸습니다. 사용자가 참조 시안을 보고 「세로 약 42% 잘림」이라는
트레이드오프를 알고 고른 것입니다. 되돌리지 마십시오 — 사유는 §7 ㉮.
스크림도 균일 .83 단층에서 **≥768px 에서만 가로 방향 그라디언트**로
바꿨습니다(왼쪽 짙게 · 오른쪽 옅게). 사유와 좁은 폭 예외는 §7 ㉯.
v1.6 2026-08-02 사용자 결정 **ⓓ** — v1.5 §7 「천장」 절이 「더 밝게 하려면 넷 중
하나를 결정해야 한다」고 적어 둔 선택지 중 ⓓ 를 골랐습니다:
히어로의 **글자·테두리를 전부 왼쪽 구역에 못박고**(--hero-text-max)
오른쪽 구간을 «대비 요건이 하나도 걸리지 않는 면» 으로 비웠습니다.
그래서 옅은 끝 알파를 .55 → .25 로 더 내렸습니다.
🔴 대가: 히어로가 높아집니다(1280 에서 402.8 → 448.4px).
🔴 옅은 끝 알파는 이제 **WCAG 가 지켜주지 않는 값**입니다. 그 자리를
메우려고 «디자인 상한» 검사 1건을 새로 넣었습니다 — §7 ㉯.
v1.7 2026-08-02 ① 사용자 「밝기가 너무 밝네 이거보다 어둡게 해줘」 → 옅은 끝 알파
.25 → **.40**. 디자인 상한도 1.8 → **1.6** 으로 함께 조였습니다
(값이 내려간 만큼 한도를 안 내리면 그 검사가 아무것도 안 지킵니다).
② 사진 폭 상한 1600px + 오른쪽 정렬 + --hero-edge 가장자리 층.
🔴 **이 항목은 사용자 지시가 바뀌어 중단되었습니다** — 새 요구는
「원본 그대로 다 나오게 + 크기 고정」이고 아직 확정이 아닙니다.
지금 파일에 들어 있는 것은 «1600 에서 확대만 멈추고 여전히
cover 로 잘린» 판입니다. 규칙·검사·주석이 서로 일치하는
완결 상태이므로 그대로 둡니다. 다음 회차에 재검토하십시오.
③ 영문 제목 안의 «四柱» 가 갈라지던 결함 — style.css §3-4 의
.han 에 white-space:nowrap. 방향성 스크림 시작 폭도 768 → **1024**
(768~1023 에서 제목이 5줄로 접혔습니다). 사유는 §7 ㉯·㉲.
v1.8 2026-08-02 🔴 **사용자 결정 — 시안 3판(design/_archive/2026-08-02-hero-option/)
의 캡처를 보고 「안 B + 사진 left 정렬」을 골랐습니다.** 근거 문서는
design/hero-option-notes.md 이고 캡처 67장이 같은 폴더에 있습니다.
바뀐 것은 넷이며 서로 맞물려 있습니다 — 하나만 되돌리지 마십시오:
① 사진 축척 **cover → 1600px 873px 고정** + 히어로 min-height:873px.
세로가 어느 폭에서도 잘리지 않습니다(v1.7 은 2560 에서 32.1%만
보였습니다). 대가는 «가로가 잘림» 입니다(375 에서 23.4%) —
사용자가 그 수치를 보고 골랐습니다. 사유는 §7 ㉳.
② 사진 정렬 **기본 left · ≥1600 에서 right 로 반전.** 두 요구가
폭에 따라 반대이기 때문입니다. 사유·실측은 §7 ㉳.
③ 🔴 **사진을 다시 뽑았습니다** — v1.4 이후 처음입니다.
목표는 «밝게» 가 아니라 **«계조»** 였습니다. v1.7 판은 5px 블록
8×4 격자 32칸이 전부 #3C~#41(5레벨)이라 «어두운» 것이 아니라
**평평했습니다.** -Black 32 -Knee 60 -Ceil 128.
파일 표준편차 18.46 → **41.96** · 범위 0~77 → **0~144**.
화면 평균은 유지했습니다. 계산과 근거는 §7 ㉴.
④ 그 결과 짙은 끝 알파 .83 → **.91** (배지 3:1 이 요구하는 최소
알파가 0.715 → 0.887 로 올랐습니다). 옅은 끝 .40 은 **그대로**.
🔴 검사 모델도 함께 바꿨습니다 — 값보다 **먼저** 바꿨습니다:
18-6 에 「히어로 사진 구역 **평균** vs 지면 ≤ 1.20」을 신설하고
(HERO_PHOTO_MEAN 핀), 종전의 최댓값 상한은 «계조» 상한으로
성격을 바꿔 1.6 → 2.8 로 올렸습니다. 사유는 §7 ㉴ 와
check-l0-contrast.js 18-6 의 같은 자리 주석에 있습니다.
v1.9 2026-08-02 🔴 **사용자 결정 — 사진을 「가운데로 이동」.** v1.8 의 「기본 left ·
≥1600 right」 두 구간을 **세 구간으로** 나눴습니다:
<1280 left · **≥1280 center(신설)** · ≥1600 right
사유: app/tools/hero-render-probe.js 판정 ⑦ 이 1280(en·ja)에서
빨간불이었습니다. 사진이 1600px 고정이라 left 면 히어로의 마지막
10% 가 사진의 어두운 기둥(x 1152~1280)에 떨어집니다. 임계값이
아니라 «보여 주는 조각» 을 고쳤습니다.
🔴 v1.8 이 「기본 left」를 «전 폭» 결정처럼 적어 두었지만, 그 사유
(「≥1600 의 여백을 짙은 쪽으로」)는 <1600 에는 적용되지 않는
별개 결정이었고 검토되지 않은 채 남아 있었습니다.
🔴 약 1145~1279px 은 **여전히 미달**입니다(사진 자체의 어두운 띠).
v1.8 에서도 미달이었고 이번에 나빠진 폭은 없습니다.
실측·캡처·경계 근거는 아래 §7 의 @media (min-width:1280px) 주석에
한 벌만 적었습니다. 보고서는 design/hero-v19-notes.md.
v2.0 2026-08-02 🔴 **사용자 결정 「C 안」 — 외부 분기본(claude.ai/design 프로젝트)
의 §7 을 전체 채택했습니다.** 향연기 애니메이션과 filter 포함입니다.
§7 이 통째로 바뀌었고, v1.4~v1.9 의 히어로 구조는 **폐기하되 사유와
함께 §7 ㉵ 의 「폐기 목록」에 남겼습니다**(ⓐ~ⓕ). 지우지 마십시오.
🔴 검사를 **먼저** 고치고 값을 나중에 넣었습니다(§7 의 순서 규칙):
① check-l0-contrast.js — 18-0 의 「@keyframes 0건」을 허용 목록
(incense 1건)으로, 18-6 을 .hero::before + **filter 합성 모델**로.
946행이 .hero 의 background-image 를 읽어 «검사기가 죽던» 자리를
셀렉터부터 고쳤습니다. trule 은 그대로 «던지게» 두었습니다.
② design/render-probe.js — 「실행 중 애니메이션 0」(§10-4)을
§15 로 옮겨 「테마 없는 페이지 0건 · 히어로 1건 · reduce 0건」
으로 바꿨습니다. 종전 판정은 design/index.html(인라인 사본 ·
테마 없음)만 보고 있어서 히어로를 **못 보고 있었습니다.**
③ check-theme-break.js — v1.9 구조를 지키던 변이를 폐기 사유와
함께 새 구조 변이로 교체했습니다.
🔴 원본에서 바꾼 것 3가지(사진 경로 · brightness 값 · 배지 테두리
반려)와 그 근거는 §7 ㉵ 에 있습니다.
🔴 **«천장이 사라진다» 는 진단은 절반만 맞았습니다** — 배지의 자기
배경이 반투명 50% 라 사진 영향이 절반만 줄고, 진짜 천장은
자기 배경이 없는 **.btn--ghost 테두리** 로 옮겨갔습니다. §7 참조.
v2.1 2026-08-03 🔴 **사용자가 원본 사진을 올리고 「클로드 디자인파일 준거 그대로」
를 지시했습니다.** v2.0 이 원본에서 바꿨던 4건을 **전부 철회**하고
§7 을 외부 분기본 원문과 한 글자도 다르지 않게 되돌렸습니다.
🔴 **대표의 「우리 사진에 맞게 brightness 를 다시 잡으라」는 지시가
원본 이탈이었습니다.** .45 를 「어두우니 올리자」고 다시 올리지
마십시오 — 그 값은 아래 사진과 한 쌍입니다. 사유는 §7 ㉶.
· 사진: 마스터에서 **톤커브 없이** 축소·재압축만 (1600×873 ·
296,207 B · sha 3b74f911…47d5). v1.8 판은 지우지 않았습니다.
· 핀 3종을 함께 갱신했습니다(IMG_ALLOW · HERO_PHOTO_MAX ·
HERO_PHOTO_MEAN)와 두 디자인 상한. 한쪽만 고치면 계산이
조용히 낡습니다 — check-l0-contrast.js 18-0-b·18-6.
🔴 **검사 3건이 «일부러» 빨간불입니다.** 원본의 배지 테두리
#4A4032 가 3:1 미달이고, 원본에 background-color 폴백이
없습니다. **한도를 낮추지 않았습니다.** §7 ㉶ ③.
v2.1-a 2026-08-03 🔴 **원본에서 벗어나는 지점이 «하나» 생겼습니다** — .hero 의
background-color 폴백 한 줄입니다. 원본은 background 단축만 쓰고,
단축은 background-color 를 transparent 로 되돌립니다. 이미지·
그라디언트가 꺼지는 환경에서 **글자가 어느 색 위에 놓이는지 아무도
모르게 되므로** 접근성 사유로 색만 되살렸습니다. 그라디언트는
건드리지 않았고 **캡처 픽셀이 전후 동일**합니다(§7 ㉷).
🔴 다음 사람이 「원본과 다르네」 하고 되돌리지 마십시오.
· 남은 «일부러 빨간불» 은 배지 테두리 1건뿐이었습니다(사용자 결정
대기 → **v2.1-b 에서 ⓒ 로 결정됨.** 아래 줄).
· 함께 고친 검사 3건(사진 상한의 포화 · 밝기 대비비의 비단조 ·
reduce 애니메이션 0건의 무의미)은 §7 ㉷ 에 적었습니다.
· 이 회차에 CSS 에서 바뀐 것은 위 한 줄과 «주석·제목» 뿐입니다.
v2.1-b 2026-08-03 🔴 **사용자 결정 ⓒ — 배지 테두리 1.86:1 을 «받아들인 미달» 로
못박았습니다.** 원문 유지가 지시이므로 `.hero .badge` 는 손대지
않았습니다. **CSS 는 한 글자도 바뀌지 않았습니다** — 이 회차에
바뀐 것은 검사기 2개(check-l0-contrast.js 18-6-a 신설 ·
check-theme-break.js 변이 3건 추가)와 주석뿐입니다.
🔴 하한 3:1 을 낮추지 «않았습니다». 이 한 항목만 종료코드에서
빼고, 표의 상태 칸은 여전히 FAIL 이며 합계에 「받아들인 미달
1건」이 별도로 찍힙니다. **exit 0 이 «미달 0건» 이 아닙니다.**
🔴 왜 — 영구 빨간불은 「원래 빨간불이잖아」로 다음 결함을 삼킵니다.
고치는 방법(ⓐ 테두리를 밝게 / ⓑ 배지 배경을 진하게)과
brightness 로는 못 푼다는 실측표는 §7 ㉸ 에 있습니다.
v2.2 2026-08-03 향연기가 «아예 안 보인다» 는 사용자 보고 → 후보 6종 실측 →
사용자가 **c4** 채택. 크기 320px · 알파 .40 · blur 36px ·
@keyframes 22% 를 .70. 원본 이탈 4건(표는 §7 ㉹ ①).
⚠ 이 줄은 **2026-08-03 오후에 뒤늦게 채워 넣었습니다** — v2.2 를
만든 회차가 이 이력표에 줄을 안 남겨서 v2.1-b 다음이 비어
있었습니다. 이력이 판을 건너뛰면 다음 사람이 «어느 판을 보고
있는지» 를 못 세므로 사실만 옮겨 적었습니다(내용 출처: §7 ㉹).
v2.2-b 2026-08-03 🔴 **배지 테두리 WCAG 위반을 해소했습니다 — 결정 ⓒ → ⓐ 전환.**
사용자가 「이건 알아서 진행」으로 위임했고, 알고 있는 WCAG 1.4.11
위반(1.86:1)을 배포할 수 없다는 판단으로 border-color 를
#4A4032 → **#6E6355(3.22:1)**. **원본 이탈 6번**입니다(§7 ㉺·㉹ ①).
· check-l0-contrast.js 의 「받아들인 미달」 장치 **18-6-a 삭제**.
이제 이 검사기에 «받아들인 미달» 개념이 없고 exit 0 = 미달 0건입니다.
· check-theme-break.js 의 면제 전제 변이 ⓐ~ⓕ 6건을 폐기·교체.
🔴 **인계** — app/tools/hero-render-probe.js 의 readCalc() 가 계산기
표의 «FAIL» 을 읽습니다. 그 행이 이제 PASS 입니다(§7 ㉺ ⑥).
· 함께: style.css §5 ㉤ 언어 전환 칸 줄바꿈 수정(이 파일 아님).
-----------------------------------------------------------------------------
style.css 를 고치지 않습니다. 그 뒤에 한 줄 더 링크해서 토큰만 덮어씁니다.
← 추가
되돌리려면 이 한 줄만 지우면 원래 화면입니다.
관리 관계 (단방향 — design-guide.md §0-1 과 같은 규칙)
design/theme-dancheong.css ──▶ app/assets/css/theme-dancheong.css
원본은 design/ 입니다. 사본을 고치지 마십시오.
✅ 이 사본의 diff-0 은 app/tools/check-decor-wiring.js **D-7** 이 감시합니다.
(v1.0 머리말은 「D-3 으로 추가해야 합니다」라고 적었으나, D-3 은 이미 쓰이는
번호여서 developer 가 D-7 로 잡았습니다 — 정당한 거부입니다. 그 파일 29~35행에
이유가 적혀 있습니다. 여기 D-3 이라고 남아 있던 것은 낡은 문장이었습니다.)
🔴 사진 파일도 같이 복사해야 합니다 (v1.3 신규 · v1.4 에서 문장 갱신)
design/assets/img/hero-shrine.jpg ──▶ app/assets/img/hero-shrine.jpg
§7 의 배경 경로는 배포 기준 절대경로 `/assets/img/hero-shrine.jpg` 입니다.
🔴 v2.1(2026-08-03)에서 **파일명이 바뀌었습니다.** app/ 쪽 사본과
app/tools/check-decor-wiring.js D-8 의 경로·sha 핀은 **developer 소관**입니다.
designer 가 고치지 않았습니다 — 지금 D-8 은 빨간불이고, 그것이 정상 인계
신호입니다. 새 sha: 3b74f911ca1ada3a9125cff23e5325aec7fc56306360ea8172f4bd7b9ee847d5
⚠ 옛 사본 app/assets/img/hero-shrine-01.jpg 는 D-8 의 「고아 파일 0」에
걸립니다. 지울지 남길지도 developer 판단입니다.
✅ app/assets/img/ 디렉터리는 **이제 있고 사본도 배치되어 있습니다**(developer 작업).
v1.3 머리말은 「app/assets/img/ 디렉터리는 없습니다」라고 적고 있었습니다 —
그 문장이 쓰인 시점(2026-08-01 22:5x)에는 사실이었고 지금은 낡았습니다.
✅ 그 사본의 존재·동일성을 감시하는 검사도 **이미 있습니다** —
app/tools/check-decor-wiring.js 의 **D-8** 이고, 실제로 동작 중입니다.
v1.3 머리말은 「아직 없습니다. D-8 후보입니다」라고 적고 있었습니다. 낡은 문장입니다.
✅ v1.4 에서 사진을 다시 뽑았고, 그 뒤 developer 가 사본과 D-8 핀을 갱신했습니다.
【확인함 2026-08-02 — sha256 대조: design/ 과 app/assets/img/ 가 3f3b3ab5… 로 동일】
v1.5·v1.6 은 사진을 다시 뽑지 않았으므로 이 핀은 그대로입니다(§7 ㉯).
만약 다시 어긋나면 게시본 히어로는 사진 없이 폴백 면만 나옵니다 — 글자는 읽힙니다
(18-6 「히어로 사진 미로드」 항목이 그 상태를 따로 재고 있습니다).
-----------------------------------------------------------------------------
§0 대비 — 전부 node design/check-l0-contrast.js 의 18절이 **실행 시점에 계산**합니다.
이 주석에는 수치를 적지 않습니다. 손으로 옮겨 적은 수치는 반드시 낡습니다
(check-decor-wiring.js 머리말 D-1·D-2 가 같은 이유로 행수를 지웠습니다).
🔴 초안(claude.ai/design)의 §0 에 적혀 있던 4건은 실측과 전부 달랐습니다
(15.7→15.04 · 6.6→6.10 · 7.3→8.01 · 3.1→3.30). 그래서 지웠습니다.
§0-1 초안에서 designer 가 바꾼 것 — 근거는 harden-notes 인계 보고 참조
① 히어로 사진 — v1.0 에서 뺐다가 **v1.3 에서 되살렸습니다**(§7).
v1.0 당시 이유: 출처·라이선스 미확인. 그 뒤 사용자가 적용을 지시했고
그 판단의 근거와 제기된 이견 3건이 meeting-notes.md 에 남아 있습니다.
지금 §7 에 실제로 걸려 있는 파일은 **hero-shrine.jpg** 입니다(v2.1 · ㉶ ①).
🔴 v1.3~v2.0 은 hero-shrine-01.jpg 였고 이 문장도 그렇게 적혀 있었습니다 —
2026-08-03 에 고쳤습니다. 두 파일 모두 design/assets/img/ 에 실재하므로
(«-01» 은 결정-35 되돌림 자리) 이름을 헷갈리면 조용히 다른 사진을 잽니다.
출처 표기와 sha256 핀을 check-l0-contrast.js 18-0 이 기계로 대조합니다.
이 파일에서 ![]()
태그를 쓰지 않는다는 점은 그대로입니다(D-6) — CSS 배경입니다.
② ~~@keyframes 삭제~~ — 🔴 **v2.0 에서 되돌렸습니다(사용자 결정 C 안).**
v1.0~v1.9 는 「장식용 향연기를 위해 «실행 중 애니메이션 0» 제약을 푸는 것은
손익이 맞지 않는다」고 판단해 정적 광원만 두었습니다. 그 판단이 틀렸던 것은
아니고, **사용자가 손익 계산을 다시 해서 향연기 쪽을 골랐습니다.**
제약을 «지운» 것이 아니라 «허용 목록 1건 + reduce 에서 0건» 으로 **바꿨습니다** —
check-l0-contrast.js 18-0 과 design/render-probe.js §15 가 한 쌍으로 봅니다.
③ 🔴 --c-text-invert 를 재선언하지 않습니다. 이 토큰은 check-l0-contrast.js
의 PINNED 목록에 있고, .notice__title(법무 L-2 고지 제목)의 글자색이
여기 걸려 있습니다. 금색 버튼용 글자색은 **새 토큰 --c-on-primary** 로
뺐습니다. 초안대로 --c-text-invert 를 #100D0A 로 덮으면 고지 제목이
--c-notice 칩 위에서 흰 글자 → 검은 글자로 조용히 바뀝니다.
④ 🔴 고지 3토큰(--c-notice · -tint · -text)을 재선언하지 않습니다.
초안은 고지를 지면과 같은 검정(tint 대 지면 1.03:1)으로 만들었습니다.
「다크니까 고지도 어둡게」는 check-l0-contrast.js 위생 규칙 ③ 이 명시적으로
금지한 실수이며, 대비 검사는 그 뒤에도 초록입니다(본문 대 tint 비율은
같이 어두워지면 유지되므로). 고지는 광고 흰 패널과 같이 **밝은 섬**으로 둡니다.
⑤ 대비 미달 5건 교정 — 자리표시자 3.26:1, 입력창 테두리 1.34:1,
ghost 버튼·칩 테두리 1.58:1, --c-bg-soft 대 지면 1.01:1, --c-border 1.17:1.
전부 초안 값이며 18절이 각각의 하한으로 잡습니다.
⑥ 단청 띠 5색을 지면 대비 3:1 이상으로 올렸습니다. 초안값(청 2.15 · 적 2.60 ·
녹 2.94)은 먹빛 지면에서 사실상 보이지 않았습니다. 순수 장식이라 WCAG
하한은 없지만, **보이지 않는 단청**은 이 테마의 이름을 배신합니다.
§0-2 이 파일이 «보지 않는» 것 (S-1 — 늘릴 때 안 보는 것도 같이 적습니다)
· 실기기 렌더 · Chrome 외 브라우저 — 【미검증】
· forced-colors 모드 — §7 에 규칙은 넣었으나 **그 모드로 열어 본 적은 없습니다**.
확인처: Windows 설정 → 접근성 → 고대비 테마. 【미검증】
· 히어로 사진의 «보기 좋음» — v1.4 에서 **1280·375 두 폭의 실제 캡처를 사람이 봤고**
그 결과로 §7 ㉮ 의 ③ 층(빈 폭 채움)이 추가됐습니다. 다만 「예쁜가」는 여전히
designer 1인의 눈이며 사용자 승인은 받지 않았습니다. 【부분 확인 · 승인 미검증】
· 사진이 «충분히 밝은가» — 밝기 증가량은 수치로 쟀습니다(§7 ㉯). 그러나 그 정도가
사용자에게 충분한지는 사용자만 답할 수 있습니다. 천장도 §7 ㉯ 에 적었습니다. 【미검증】
· app/ 게시본에서의 거동 — 배선이 아직 없습니다. 【미검증】
· 이 테마는 **OS 선호와 무관하게 항상 다크**입니다. 그래서 이 파일을 실은
페이지에서는 app/tools/dark-render-probe.js 의 ④(라이트≠다크) 전제가
무너집니다. developer 인계 항목 ② 를 보십시오.
========================================================================== */
/* =============================================================================
1. 토큰 — 오방색(五方色)을 어두운 목조 지면 위에 포인트로만
🔴 재선언 금지 목록(check-l0-contrast.js PINNED 8종)은 여기에 한 줄도 없습니다:
--c-notice · --c-notice-tint · --c-notice-text · --c-text-invert ·
--c-ad-panel · --c-ad-label · --c-ad-surface · --c-ad-border
18절 18-0 이 이 사실을 기계로 검사합니다. 늘리지 마십시오.
========================================================================== */
:root{
color-scheme:dark;
/* --- 기본 --- */
--c-primary:#C9A227; /* 황(黃) — 링크·주요 버튼·포커스 링 */
--c-primary-dark:#E3C964; /* hover 는 더 밝게 (다크에서는 밝아지는 쪽이 hover) */
--c-primary-tint:#1D1608; /* 「연한 면」이 다크에서는 「덜 어두운 면」 */
--c-text:#E8E2D8; /* 백(白) */
--c-text-sub:#9A8F7F;
--c-bg:#100D0A; /* 흑(黑) — 목조 실내 */
--c-bg-soft:#1A140B; /* 읽는 면. 초안 #0D0B08 은 지면과 1.01:1 이었습니다 */
--c-border:#403629; /* 초안 #241D17 은 지면과 1.17:1 이었습니다 */
--c-border-strong:#6E6355;
/* 🔴 --c-text-invert 대신 쓰는 새 토큰. 금색 면 위에 얹는 글자입니다.
--c-text-invert(흰색)는 고지 제목의 것이므로 건드리지 않습니다. */
--c-on-primary:#100D0A;
/* 포커스 링. style.css 의 --shadow-focus 는 var(--c-primary) 를 보므로
덮지 않으면 링이 금색(--c-primary)이 되고, 그러면 **평상시 테두리
--c-border-strong 과 2.43:1** 로 붙습니다(= 포커스가 갔는지 알기 어렵습니다).
한 단 더 밝은 --c-primary-dark 로 올려 3:1 을 확보합니다. 18절 18-2 가 잽니다. */
--shadow-focus:0 0 0 3px var(--c-primary-dark);
/* --- 오행 --- *
⚠ -tint 3종(--c-*-tint)은 여기에 없습니다. style.css 에 선언은 있으나
**어떤 규칙도 쓰지 않습니다**(재현: grep -rn "wood-tint)" design/ app/ → 0건).
쓰지 않는 토큰을 덮으면 18절이 잴 수 없는 색만 늘어납니다. */
--c-wood:#4F9B78; --c-wood-text:#6FB894;
--c-fire:#D0554C; --c-fire-text:#E08A82;
--c-earth:#E0BD4C; --c-earth-text:#E6C96A;
--c-metal:#C6BBA6; --c-metal-text:#D8D0BE;
--c-water:#6B8CCC; --c-water-text:#8AA6DD;
/* --- 시맨틱 (--c-error-tint 도 같은 이유로 뺐습니다) --- */
--c-error:#D0554C; --c-error-text:#E08A82;
/* --- TODO 칩 (미확정 값 표시 — 지우지 마십시오. design-guide §9 N-2) --- */
--c-todo-tint:#1D1608; --c-todo-border:#8A7647; --c-todo-text:#D8C079;
/* --- 그림자 --- */
--shadow-card:0 1px 2px rgba(0,0,0,.5),0 2px 12px rgba(0,0,0,.4);
/* --- 이 테마가 새로 쓰는 값 --- */
--dancheong:linear-gradient(90deg,
#2F6FA8 0 20%, #C6403A 0 40%, #C9A227 0 60%, #E8E2D8 0 80%, #2E9B7F 0 100%);
--c-niche:#17130E; /* 흰 광고 패널을 앉히는 감실(龕室) 띠 */
--c-placeholder:#857C6D; /* 초안 #6A6153 은 입력면에서 3.26:1 이었습니다 */
}
/* =============================================================================
2. 조판 — 제목만 명조로. 본문은 그대로 둡니다(가독성).
========================================================================== */
h1,h2,h3,
.brand__name,
.result__title,
.card__title,
.han{
font-family:var(--font-han);
font-weight:600;
letter-spacing:.01em;
}
h1{ line-height:1.24; }
.lede{ color:var(--c-text-sub); }
/* 2-1. 로고 글자 — 사용자 지시(2026-08-01): 「글씨체 변경 · 흰색 · 시안 크기」
-----------------------------------------------------------------------------
① 서체 — **새로 넣은 것이 없습니다.** .brand__name 은 바로 위 §2 목록에 이미 들어
있어서 --font-han(명조 스택, style.css 77~84행)으로 그려지고 있었습니다.
실측(getComputedStyle · 2026-08-01 당시의 dist/private-beta 빌드): .brand__name 은
⚠ 그 경로에는 지금 v1.6 이후 빌드가 들어 있습니다. 당시 판(v1.4)은 developer 가
dist/_archive/2026-08-02-v1.4/private-beta/ 로 옮겼습니다. 재현하려면 그쪽입니다.
이미 "Hiragino Mincho ProN", …, Batang, serif 였고 .card__title 과 같은 값입니다.
대표 보고의 「sans-serif」는 «글자를 담은 » 를 잰 값이며,
글자 자체를 그리는 것은 안쪽 입니다.
EXT-1(외부 리소스 0건) 때문에 웹폰트는 못 들여옵니다 — 이미 있는 스택을 씁니다.
② 색 — var(--c-text). 이 테마의 백(白)이고 --dancheong 띠의 4번째 색과 같은 값입니다.
#FFFFFF 를 직접 적지 않은 이유가 둘 있습니다:
· 오방색 체계 안에 로고를 남겨 둡니다(왼쪽 기둥 마크가 황·적·녹·백입니다).
· 18-10 이 「18절에서 재지 않은 #RRGGBB」를 실패로 잡습니다. 토큰을 쓰면
18-1 이 이미 재고 있는 색이라 새 측정을 만들 필요가 없습니다.
순백 #FFFFFF 를 원하면 이 한 줄만 바꾸고 18절에 측정 항목을 하나 더 넣으십시오.
③ 크기 — 28px 고정. 시안 원본 파일이 없어 «시안의 정확한 px» 은 잴 수 없었습니다.
대신 이 페이지 안에 이미 있는 값에 맞췄습니다:
· .brand__mark SVG 의 height 가 28 입니다(29페이지 마크업에 박힌 값).
글자 높이 = 마크 높이 → 로고 한 덩어리의 위아래가 맞습니다.
· --fs-h1 의 모바일 값도 28px 입니다(style.css 88행).
--fs-h1 을 그대로 쓰지 않은 것은 1280 에서 38px 로 뛰어 머리 띠를 밀기 때문입니다.
375·1280 두 폭에서 가로 넘침 0 을 실측했습니다(scrollWidth === innerWidth).
✅ 시트 순서 의존이 **해소됐습니다** (2026-08-02).
v1.0~v1.6 의 이 자리에는 「이 규칙은 반드시 style.css «뒤» 에 있어야 한다 —
:lang(en) 이 (0,1,0) 이라 .brand__name 과 비겨서 앞에 두면 진다」고 적혀 있었고,
그 문장은 사실이었습니다. 같은 이유로 **h1·h2·h3 은 아예 지고 있었습니다**
(요소 셀렉터 (0,0,1) < :lang() (0,1,0) — 제목이 sans 로 그려졌습니다).
style.css §3-1 의 font-family 선언을 :where() 로 감싸 (0,0,0) 으로 낮췄으므로
이제 아래 §2 규칙은 **시트 순서와 무관하게 항상 이깁니다.**
⚠ 그래도 이 파일은 style.css 뒤에 링크하십시오 — 색 토큰이 그 순서를 전제합니다.
바뀐 것은 «서체가 순서에 매달려 있지 않다» 는 것뿐입니다.
⚠ 근본 설명과 재현 방법은 style.css §3-1 「서체 특이도」 주석에 있습니다. */
.brand__name{
color:var(--c-text);
font-size:28px;
/* :lang(en) 이 line-height 1.65 를 물려줘 28px 글자가 46px 짜리 줄상자에 들어갑니다.
그러면 아래 ④ 로 마크 위를 맞춰도 마크만 9px 떠 보입니다. 줄상자를 글자 높이에
맞춰 마크(28)와 글자 상자(28)를 같게 만듭니다. 한 줄짜리 로고라 행간이 필요 없습니다. */
line-height:1;
}
/* ④ 크기를 키운 «결과» 로 생긴 것이라 같이 고칩니다 — 375 캡처를 보고 넣었습니다.
style.css 291행의 .brand 는 align-items:center 라 기둥 마크가 «span 전체» 의
한가운데에 섭니다. 375 에서는 그 span 이 칩 4줄 때문에 132px 라, 마크만 왼쪽
중간으로 내려가고 글자는 위에 뜹니다(로고가 두 조각으로 보입니다).
마크 높이(28)와 글자 높이(28)가 같으므로 위를 맞추면 정확히 한 줄이 됩니다.
⚠ 칩을 지워 고치지 않았습니다 — 「잠정 · 상표·도메인 미검증」은 아직 유효한 상태입니다. */
.brand__mark{ align-self:flex-start; }
/* =============================================================================
3. 머리·꼬리의 오방색 띠
========================================================================== */
.head{ position:relative; padding-top:4px; background:var(--c-bg-soft); }
.head::before{
content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--dancheong);
}
.foot{ position:relative; padding-bottom:calc(var(--sp-8) + 4px); background:#0B0907; }
.foot::after{
content:""; position:absolute; inset:auto 0 0 0; height:4px; background:var(--dancheong);
}
.head__bar .lang__link[aria-current="true"],
.nav-list a[aria-current="page"]{
border-bottom:1px solid var(--c-primary);
border-radius:0;
}
/* =============================================================================
4. 면 — 카드 위쪽에 오방색 한 줄. 3열 그리드에서 색이 순환합니다.
========================================================================== */
.section--soft{ background:var(--c-bg-soft); }
.card{
background:var(--c-bg);
border-color:var(--c-border);
border-top:3px solid var(--c-metal);
}
.grid--3 > .card:nth-child(3n+1){ border-top-color:var(--c-wood); }
.grid--3 > .card:nth-child(3n+2){ border-top-color:var(--c-water); }
.grid--3 > .card:nth-child(3n+3){ border-top-color:var(--c-fire); }
.grid--2 > .card:nth-child(4n+1){ border-top-color:var(--c-wood); }
.grid--2 > .card:nth-child(4n+2){ border-top-color:var(--c-fire); }
.grid--2 > .card:nth-child(4n+3){ border-top-color:var(--c-earth); }
.grid--2 > .card:nth-child(4n+4){ border-top-color:var(--c-water); }
.card--link:hover{ background:var(--c-primary-tint); border-color:var(--c-primary); }
.result{ border-color:var(--c-border); background:var(--c-bg); }
.result__head{ position:relative; }
.result__head::before{
content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--dancheong);
}
/* 결과 안의 간지 글자는 명조로 크게 */
.result .han,
.result .glyph{ font-family:var(--font-han); }
/* =============================================================================
5. 폼 — 어두운 입력면, 금색 포커스
⚠ 테두리는 선언하지 않습니다. style.css 의 .input 이 이미 var(--c-border-strong)
을 보고 있고, 위에서 그 토큰을 다크값으로 덮었으므로 자동으로 따라옵니다.
초안은 여기에 #2E2620 을 직접 적어 입력면 대비 1.34:1 로 떨어뜨렸습니다.
⚠ outline 을 끄지 마십시오 — 위생 검사가 outline:none 을 실패로 잡습니다(P1-1).
========================================================================== */
.input,.select{
background:#0B0907;
color:var(--c-text);
}
.input::placeholder{ color:var(--c-placeholder); }
.input:hover,.select:hover{ border-color:var(--c-primary); }
.btn--primary{ background:var(--c-primary); color:var(--c-on-primary); border-color:var(--c-primary); }
.btn--primary:hover{ background:var(--c-primary-dark); border-color:var(--c-primary-dark); }
.btn--ghost{ background:transparent; color:var(--c-text); border-color:var(--c-border-strong); }
.btn--ghost:hover{ background:var(--c-primary-tint); border-color:var(--c-primary); color:var(--c-text); }
.btn[disabled],.btn[aria-disabled="true"]{
background:#1B1712; color:#6A6153; border-color:#1B1712;
}
.chip{ background:transparent; border-color:var(--c-border-strong); color:var(--c-text); }
.badge{ border:1px solid var(--c-border-strong); color:var(--c-text-sub); background:transparent; }
/* =============================================================================
6. HTML 안에 색이 박혀 있는 SVG — 다크에서 사라지므로 여기서 되살립니다
⚠ 선택자는 design/index.html 의 실제 마크업 기준입니다:
.brand__mark > rect(바탕판) + g > rect ×4(네 기둥).
========================================================================== */
/* 바탕판은 --c-bg 입니다. --c-primary-tint 로 두면 머리띠 배경(--c-bg-soft)과
1.02:1 이라 로고 판이 머리띠에 녹아 사라집니다(18절 18-8 이 잡습니다). */
.brand__mark > rect{ fill:var(--c-bg); }
.brand__mark g rect{ fill:var(--c-primary); }
.brand__mark g rect:nth-child(2){ fill:var(--c-fire); }
.brand__mark g rect:nth-child(3){ fill:var(--c-wood); }
.nav-btn svg g rect{ fill:var(--c-text); }
.privacy-line svg path{ stroke:var(--c-text-sub); }
/* =============================================================================
7. 히어로 — 사진 1장(::before) + 세로 스크림 + filter + 향연기 1줄기 (v2.0)
-----------------------------------------------------------------------------
🔴 사진 출처 — 18-0 이 아래 네 항목을 **문자열로 대조**합니다. 지우면 빨간불입니다.
· 파일명 : hero-shrine.jpg
· 출처 : AI 생성 【대표 진술 2026-08-01】 — 생성 과정은 확인하지 않았습니다
· 근거 문서 : meeting-notes.md §8-3
· 결정 번호 : 결정-35 — 사진의 내용(무속·신상)에 대한 이견 3건이 제기되었고,
사용자가 그것을 알고 적용을 지시한 건입니다. 같은 이견을 다시
꺼내지 마십시오. 판정이 바뀌는 조건도 그 절에 적혀 있습니다.
원본은 design/assets/img/ 이고 app/assets/img/ 로 복사됩니다(developer 소관).
sha256 핀은 check-l0-contrast.js 18-0-b 의 IMG_ALLOW 에 있습니다.
⚠ 2026-08-03 에 파일명이 hero-shrine-01.jpg → hero-shrine.jpg 로 바뀌었습니다.
v1.8 판(hero-shrine-01.jpg · 273,875 B · sha aa5323b2…)은 **지우지 않았습니다** —
결정-35 로 되돌아갈 자리입니다. 아래 ㉶ 참조.
=============================================================================
㉺ v2.2-b — 배지 테두리 WCAG 위반을 해소했습니다 (결정 ⓒ → ⓐ 전환)
(사용자 위임 「이건 알아서 진행」 → 대표 판단 · 2026-08-03 · designer)
=============================================================================
⚠ **이 절이 가장 최근입니다.** 아래 ㉹·㉸·㉷·㉶ 는 그대로 둡니다.
① 무엇이 바뀌었나 — 이탈 6번 (표는 아래 ㉹ ① 에 있습니다)
-----------------------------------------------------------------------------
히어로 배지 규칙의 border-color 를 **#4A4032 → #6E6355**(= --c-border-strong).
고치기 전 1.86:1 < 하한 3:1 ← WCAG 1.4.11(비텍스트 대비) **실제 위반**
고친 뒤 **3.22:1** >= 3
🔴 **계산값을 인용하지 않고 두 방법으로 다시 냈습니다** 【확인함 2026-08-03】
ⓐ node design/check-l0-contrast.js 재실행 → 표에 3.22:1 · PASS
ⓑ 그 검사기를 쓰지 않고 WCAG 상대휘도·대비식을 **따로 구현**해 대조:
배지 면 #12110F 기준 #6E6355 = 3.2161 · #4A4032 = 1.8607.
ⓐ 의 3.22 / 1.86 과 소수 둘째 자리까지 일치합니다.
🔴 **렌더로도 재야 합니다** — 이 항목은 계산 1.86 / 렌더 1.88~1.97 로 «렌더가 더
높게» 나오는 자리였습니다(㉶ ④). 고친 뒤 렌더 실측은 아래 ④ 입니다.
② 왜 «원본 유지(ⓒ)» 를 뒤집었나 — 결정 이력을 지우지 않습니다
-----------------------------------------------------------------------------
🔴 **한때 ⓒ 였던 이유가 여기 있습니다. 이 문단을 지우지 마십시오** — 없으면 다음
사람이 「원본과 다르네」 하고 #4A4032 로 되돌립니다(㉸ 전체가 그 상태의 기록입니다).
2026-08-03 오전 · 사용자 결정 **ⓒ**「원본 그대로 두고 미달로 기록」
근거 — 「외부 분기본 원문 유지」. §7 을 한 글자도 안 바꾸는 것이 그 회차의 지시였고,
그래서 CSS 대신 검사기에 「받아들인 미달」 장치(18-6-a)를 만들었습니다.
2026-08-03 오후 · 사용자 **위임**「이건 알아서 진행」 → 대표 판단으로 **ⓐ 전환**
근거 — **알고 있는 WCAG 1.4.11 위반을 그대로 배포할 수 없습니다.**
ⓒ 는 「원문 보존」과 「접근성」이 충돌할 때 전자를 고른 것이고, 위임은 그 선택을
designer/대표에게 되돌려준 것입니다. 접근성 기본은 깎지 않는 것이 이 회사 규율입니다.
⚠ 즉 **ⓒ 가 틀렸던 것이 아니라 판단 주체가 바뀐 것**입니다. 다시 원문으로
되돌리려면 사용자 결정이 필요합니다 — designer 가 혼자 뒤집지 마십시오.
③ 왜 ⓐ 이고 ⓑ 가 아닌가
-----------------------------------------------------------------------------
ⓑ(배지 배경 알파를 올려 면을 어둡게)는 **혼자서는 3:1 에 못 닿습니다.**
실측 【확인함 2026-08-03 · 알파만 바꿔 검사기 재실행】 #4A4032 기준 .5 → 1.86 ·
.6 → 1.88. 면 밝기에 천장이 있어(자기 배경이 α 검정) 알파를 올려도 거의 안 움직입니다.
ⓐ 는 **이 테마에 이미 있는 토큰**(--c-border-strong · ghost 버튼 테두리와 같은 색)이라
새 색을 들여오지 않습니다 — 18-10「재지 않은 색」에 걸리지 않는 것도 그 덕입니다.
🔴 `brightness` 로는 어떤 값에서도 못 풉니다(실측표는 ㉸ ③). 밝기부터 만지지 마십시오.
④ 무엇이 이 값을 지키는가 — 면제를 지우고 시험을 갈았습니다
-----------------------------------------------------------------------------
· check-l0-contrast.js **18-6-a 는 삭제**했습니다. 미달이 없는데 면제가 남아 있으면
그 자체가 결함입니다. 그 자리에는 «무엇이 있었고 왜 사라졌는가» 만 남겼습니다.
🔴 **정정** — 「고치면 면제가 exit 1 로 운다」는 사실이 아니었습니다.
재현해 보니 drift 가지가 «먼저» 잡아 **exit 0 으로 조용히 물러납니다**(설계대로).
즉 이 블록을 지우도록 강제하는 장치는 **없었습니다.** 근거는 그 폐기 기록에.
· check-theme-break.js — 「배지 테두리를 원본 #4A4032 로 되돌림」(1.86 · exit 1) 이
새 주 시험입니다. 면제를 전제로 짜였던 ⓐ~ⓕ 여섯 건의 폐기 사유도 그 파일에.
🔴 **렌더 실측** 【미검증 — 이 회차에 못 쟀습니다】
렌더 쪽 짝은 `app/tools/hero-render-probe.js` 이고 **app/ 은 designer 소관이
아닙니다.** 게다가 그 파일의 `readCalc()` 가 계산기 표의 `FAIL` 을 읽어 렌더
미달을 물려받는 구조라, 배지가 `PASS` 가 된 지금 **그쪽 동작이 달라집니다.**
고치지 않았습니다 — developer 인계 항목입니다(아래 ⑥).
계산 3.22 가 렌더에서도 3:1 을 넘는지는 그 프로브를 고친 뒤에 확인해야 합니다.
⚠ 종전 관계(계산 1.86 < 렌더 1.88~1.97)가 유지된다면 렌더는 3.22 «이상» 일
가능성이 높습니다 — 그러나 그것은 **추정이고 측정이 아닙니다.**
⑤ 🔴 헤더(언어 전환 칸) 수정은 «이탈이 아닙니다» — 판단 근거
-----------------------------------------------------------------------------
같은 회차에 style.css §5 ㉤ 에서 .lang / .lang__link 를 고쳤습니다. 그것을
이탈표에 «넣지 않았습니다.** 근거:
· 이 이탈표가 대조하는 원본은 **외부 분기본의 §7(히어로)** 입니다. 이 표의
머리말이 「이 파일이 외부 분기본 원문과 다른 것」이라고 범위를 밝히고 있습니다.
· **분기본에 헤더 규칙이 없습니다** 【확인함 2026-08-03 — 이 파일 전체에서
`lang__link` 를 찾으면 §3(오방색 띠)의 aria-current 밑줄 한 줄뿐이고,
그것은 v1.x 부터 우리가 쓴 규칙입니다. §7 에는 헤더가 아예 없습니다】.
· 고친 파일이 **style.css** 입니다. 그 파일은 분기본에서 온 적이 없고
design-guide §0-1 이 design/style.css 를 원본으로 못박고 있습니다.
→ 분기본이 건드린 자리가 아니므로 **우리 고유 코드**이고, 이탈 6번은 배지 1건뿐입니다.
⑥ 🔴 developer 인계 — app/tools/hero-render-probe.js
-----------------------------------------------------------------------------
`readCalc()` 가 check-l0-contrast.js 표에서 «히어로 배지 테두리» 행의 `FAIL` 을
읽어 자기 쪽 렌더 미달 6셀을 「알고 있는 미달」로 물려받습니다. 그 행이 이제
**`PASS` 3.22:1** 입니다. 파서가 `FAIL` 을 전제한다면 동작이 바뀝니다 —
exit 2 로 죽거나, 렌더 미달을 «새 결함» 으로 셀 수 있습니다.
designer 는 app/ 을 고치지 않았습니다. 그 파일 소관자가 확인해 주십시오.
=============================================================================
㉹ v2.2 — 향연기가 «아예 안 보였습니다». 실측 후 강도를 c4 로 올렸습니다
(사용자 보고 → 후보 6종 실측 → 사용자 결정 c4 · 2026-08-03 · designer)
=============================================================================
⚠ **위 ㉺ 가 이 절 위에 있습니다.** 아래 ㉸·㉷·㉶ 는 그대로 둡니다.
🔴 ① 이 파일이 외부 분기본 원문과 «다른» 것 — 전부 여기 있습니다
-----------------------------------------------------------------------------
이 표 밖에는 이탈이 없습니다. 「원본 그대로인가?」를 묻는 사람은 **이 표만** 보면
됩니다. 새로 벗어나면 여기에 줄을 추가하십시오 — §7 여기저기에 흩어 놓지 마십시오.
| # | 자리 | 원본값 | 현재값 | 사유 | 날짜 |
|---|-----------------------------|-----------------------|-----------------------|----------------------------------------|------------|
| 1 | .hero background-color | (없음 · 단축만) | #0B0907 (단축 «뒤») | 이미지 차단·강제 색에서 글자 바탕 불명 | 2026-08-03 |
| 2 | .hero::after width/height | 200px | 320px | 아래 ② — c4 | 2026-08-03 |
| 3 | .hero::after 그라디언트 알파| .16 | .40 | 아래 ② — c4 | 2026-08-03 |
| 4 | .hero::after filter blur | 28px | 36px | 아래 ② — c4 | 2026-08-03 |
| 5 | @keyframes incense 22% | opacity:.42 | opacity:.70 | 아래 ② — c4 | 2026-08-03 |
| 6 | 히어로 배지 border-color | #4A4032 | #6E6355 | WCAG 1.4.11 위반(1.86:1) 해소·사용자 위임 | 2026-08-03 |
1번의 자세한 사유는 ㉷ 와 그 줄 자신의 주석에 있습니다. 2~5번이 이 절입니다.
🔴 **6번은 위 ㉺ 입니다** — 이 절(㉹)보다 «나중» 에 결정됐습니다. 표만 여기 둔 것은
「이탈은 한 표에만」이라는 이 절의 규칙 때문입니다. 흩어 놓지 마십시오.
🔴 **바뀌지 않은 것**(원본 그대로 · 건드리지 마십시오): .hero::before 의 스크림·
사진·filter(brightness .45) · .hero .lede ·
⚠ 「.hero .badge(㉸ 결정 ⓒ)」가 여기 있었습니다 — **낡았습니다.** 배지 테두리는
이제 이탈 6번이고, 색(color)과 배경(background) 두 속성만 원본 그대로입니다 ·
.hero::after 의 left:18% · bottom:-40px · border-radius · animation 18s linear ·
@keyframes 의 0%/100% · prefers-reduced-motion 블록 · forced-colors 블록.
🔴 ② 왜 바꿨는가 — 원본은 최대 레벨차 «8» 이었습니다
-----------------------------------------------------------------------------
사용자 보고: 「향연기 효과가 어디서 나타나는거야 전혀 안보이는데」 「아예 안보임」.
원본 c0 를 실측하니 화면을 가장 세게 바꾸는 순간에도 **255 눈금 중 8** 이었습니다
(3.1%). 배경이 brightness(.45)로 눌린 거의 순흑(레벨 2)이라 그 위의 +8 은 사람
눈에 안 잡힙니다. **결함이 아니라 강도 문제였습니다** — 요소도 애니메이션도
정상으로 그려지고 있었습니다.
후보 6종 실측 【확인함 2026-08-03 · design/hero-incense-lab.js · Chrome 150.0.7871.187
· 1280 en · design/hero-option-live.en.html · 전부 주기의 22%(불투명도 최대)에 고정
· 「최대 레벨차」 = 0% 프레임과 같은 좌표에서 세 채널 절대차의 최댓값(0~255)】
| key | 알파 | 22% 최대 | blur | 크기 | 최대 레벨차 | 차이>=1 픽셀 | 눈으로 |
|-------------|------|----------|------|-------|-------------|--------------|--------|
| c0 (원본) | .16 | .42 | 28 | 200px | 8 | 36,255 | 안 보임 |
| c1 | .28 | .42 | 28 | 200px | 15 | 44,079 | 안 보임 |
| c2 | .28 | .70 | 28 | 200px | 26 | 51,130 | 겨우 |
| c3 | .40 | .70 | 28 | 200px | 38 | 55,325 | 보임 |
| **c4 채택** | .40 | .70 | 36 | 320px | **43** | **136,372** | 확실 |
| c5 | .60 | .85 | 36 | 320px | 79 | 145,604 | 확실 |
375 도 같은 순서입니다(8 / 15 / 26 / 37 / 42 / 77).
🔴 **적용 후 이 파일로 다시 쟀습니다** — 덮어쓰기 없이 §7 그대로 재면
1280 에서 43 · 375 에서 42 로 후보 페이지의 c4 와 **최댓값·최강 픽셀 좌표·
외접 사각형·영향 픽셀 수까지 전부 일치**합니다 【확인함 2026-08-03】.
즉 「후보에서 고른 그림」과 「적용된 그림」이 같습니다.
밝기 축은 **알파 × 22% 최대**(곱해집니다). blur·크기는 밝기보다 «번지는 넓이» 를
바꿉니다 — c3→c4 는 최댓값이 38→43 인데 영향 픽셀은 2.5배입니다.
⚠ 「눈으로」 칸은 designer 가 캡처를 보고 적은 것입니다. 실기기·주변광 【미검증】.
캡처: design/hero-incense-shots/ · 수치: design/hero-incense-measurements.w*.json
사람이 보는 비교판: design/hero-incense-options.en.html (여섯 칸이 동시에 돕니다)
🔴 ③ 320px 로 키우면서 left:18% · bottom:-40px 은 «안 고쳤습니다»
-----------------------------------------------------------------------------
200px 기준으로 잡힌 값이라 크기를 키우면 기하가 따라 움직입니다. 실제로 움직였습니다:
· left 는 «왼쪽 모서리» 기준이므로 원 중심이 **오른쪽으로 60px** 갑니다
(1280 에서 중심 x 330 → 390. 실측 최강 픽셀도 321 → 380 으로 따라갔습니다)
· bottom 은 «아래 모서리» 기준이므로 원 중심이 **위로 60px** 갑니다
🔴 그런데도 고치지 «않은» 이유: **사용자가 고른 c4 캡처가 바로 이 기하입니다.**
여기서 left/bottom 을 손보면 사용자가 보지 않은 그림을 내보내게 됩니다.
고칠 근거가 생기면(예: 「연기가 너무 가운데다」) 그때 사용자에게 다시 물으십시오.
관측된 대가 두 가지 — 받아들였습니다:
· 아래쪽 일부가 overflow:hidden 에 잘립니다. 22% 기하로 요소 하단이 히어로
하단보다 20.6px 아래입니다 【자체 산출】. 실측 외접 사각형 하단도 398 에서
끊깁니다(히어로 403) — 계산과 관측이 일치합니다. 최댓값은 잘리는 구간 «밖» 입니다.
· 375 에서 폭 320 + scale 이 히어로 폭을 넘습니다. overflow:hidden 이 잘라내므로
**가로 스크롤은 생기지 않습니다**(scrollWidth 375 실측). 200px 판도 scale 2.3
구간에서 이미 그랬습니다 — 새로 생긴 성질이 아닙니다.
🔴 ④ 대표가 의심했다가 «전부 배제된» 다섯 가지 — 다시 조사하지 마십시오
-----------------------------------------------------------------------------
원인은 강도 하나였습니다. 아래는 전부 원인이 «아닙니다» 【확인함 2026-08-03】:
ⓐ ::before 와 ::after 가 둘 다 z-index:0 이라 가려진다 → 둘 다 0 이 맞지만
칠 순서가 트리 순서라 ::after 가 위입니다. 사진 위에서 차이가 실제로 측정됩니다
ⓑ style.css 에 .hero::after 를 쓰는 다른 규칙이 있다 → `hero::after`·`incense`
문자열 **0건**입니다
ⓒ filter:blur 의 스택 문맥이 무언가에 가린다 → blur(28px)가 계산되고 화면에도
나타납니다
ⓓ overflow:hidden + bottom:-40px + translate3d 로 가시 구간에서 잘려 나간다 →
하단 일부만 잘립니다(위 ③). 최댓값은 안쪽입니다
ⓔ 히어로가 짧아 상승 360px 의 대부분이 화면 밖이다 → 22~50% 구간이 전부 히어로
안이고 75% 에도 아직 보입니다(1280 히어로 403 · 375 히어로 601 둘 다)
🔴 ⑤ 함정 — `--virtual-time-budget` 은 CSS 애니메이션을 «진행시키지 않습니다»
-----------------------------------------------------------------------------
대표가 `chrome --headless --virtual-time-budget=200/3960/9000` 으로 세 시점을 찍어
비교했는데 **세 PNG 가 바이트 단위로 동일**했습니다(sha256 9d5991f1… · 429,034 B).
하마터면 「차이 0 = 안 그려진다」로 결론 낼 뻔했습니다. 실제로는 **아무것도 안 잰
것**입니다. 이 함정에 다시 빠지지 마십시오.
유효한 처방 — Web Animations API 로 «세우고», 세웠다는 증거를 함께 냅니다:
const a = document.getAnimations().find(x => x.animationName === 'incense');
a.pause(); a.currentTime = 3960; ← 18s 의 22%
⚠ 이 줄에 «별표 두 개 + 슬래시» 를 쓰지 마십시오 — 그 세 글자가 이 주석을 닫고
아래 규칙이 통째로 CSS 밖으로 나갑니다. 이 절을 쓰면서 실제로 한 번 그랬습니다
(18-6 이 「.hero 에 background 선언이 없습니다」로 즉시 잡았습니다). ㉵ ① 에도
같은 경고가 있습니다 — 두 번째입니다.
증거 3종을 매 컷 함께 기록합니다 — ① a.currentTime 되읽기 ② a.playState ==='paused'
③ getComputedStyle(.hero,'::after').opacity 가 시점마다 달라지는 것.
③ 이 0% 에서 0, 22% 에서 .70 으로 나오지 않으면 그 측정은 무효입니다.
구현은 design/hero-incense-lab.js 에 있습니다(그 파일 머리말에 같은 경고).
🔴 ⑥ 어떤 검사가 이 값을 지키는가
-----------------------------------------------------------------------------
v2.1-b 까지 향연기를 보는 검사는 **이름뿐**이었습니다(animation:incense · @keyframes
허용 목록 · 렌더의 animation-name). **네 값 중 하나도 안 봤습니다** — c0 로 되돌려도
전건 초록이었습니다 【확인함 — check-theme-break.js 에 되돌림 변이를 넣어 재현】.
그래서 신설했습니다:
· check-l0-contrast.js 18-6 ⑥ — 네 값을 CSS 에서 읽어 c4 와 대조(정적 · 빠름)
· check-theme-break.js 4건 — 네 값을 각각 c0 로 되돌려 빨간불 확인
렌더로 레벨차를 다시 재려면 design/hero-incense-lab.js 를 쓰십시오(느립니다 ·
검사에 넣지 않았습니다).
🔴 값을 바꾸려면 18-6 ⑥ 의 상수와 이 절의 표를 **함께** 고치십시오. 한쪽만 고치면
다음 사람이 어느 쪽이 원본인지 알 수 없습니다.
=============================================================================
㉸ v2.1-b — 배지 테두리 1.86:1 을 「받아들인 미달」로 못박았습니다
(사용자 결정 ⓒ · 2026-08-03 오전 · 회의록 §11 · designer)
=============================================================================
🔴🔴 **이 절 전체가 «과거» 입니다 — 2026-08-03 오후에 ⓒ 가 ⓐ 로 뒤집혔습니다.**
결정 ⓒ 로 갔다가 **사용자 위임(「이건 알아서 진행」)으로 ⓐ 로 전환 · 2026-08-03**.
지금 상태와 사유는 위 **㉺** 입니다. 이 절은 **지우지 않았습니다** — 「왜 한때
#4A4032 를 그대로 두기로 했는가」가 없으면 다음 사람이 이탈표만 보고
「원본과 다르네」 하며 되돌립니다.
⚠ 아래 ①~④ 의 «지금 …이다» 꼴 문장은 전부 **2026-08-03 오전 기준**으로 읽으십시오.
특히 ① 의 「고치지 마십시오」와 ④ 의 면제 파손 시험 6건은 **더 이상 유효하지
않습니다**(면제 장치 자체가 삭제됨). ③ 의 «고치는 방법 ⓐ» 는 실제로 채택됐습니다.
⚠ 위 ㉺·㉹ 가 이 절 위에 있습니다. 아래 ㉷·㉶ 는 같은 날의 기록이고 그대로 둡니다.
🔴 (당시) CSS 는 한 글자도 바뀌지 않았습니다. 바뀐 것은 검사기 2개와 이 주석뿐이었습니다.
① 결정 — ⓒ 「원본 그대로 두고 미달로 기록」 ← 🔴 2026-08-03 오후에 폐기(㉺ ②)
-----------------------------------------------------------------------------
㉶ ③ 에 올린 세 안(ⓐ 테두리를 밝게 / ⓑ ghost 에도 자기 배경 / ⓒ 미달로 기록) 중
사용자가 **ⓒ** 를 골랐습니다. 근거는 「외부 분기본 원문 유지」입니다.
[단청] 히어로 배지 테두리 vs 배지 면 : **1.86:1 < 하한 3:1** (WCAG 1.4.11 위반)
🔴 (당시) 배지 규칙의 세 속성을 고치지 말 것 — 값이 아니라 «사용자가 그대로 두기로
한 원문» 이라는 이유였습니다.
🔴 **지금은 border-color 만 #6E6355 로 바뀌었습니다**(이탈 6번). color 와
background 두 속성은 여전히 원문 그대로입니다.
🔴 이것은 «모델만» 의 미달이 아니었습니다 — 렌더 실측도 6셀 1.88~1.97 로 전부 미달이고
designer·developer 가 서로 다른 도구로 독립 교차검증해 일치했습니다(㉶ ④).
⚠ **고친 뒤의 렌더는 아직 안 쟀습니다** 【미검증】 — 사유는 ㉺ ④.
② 왜 검사기를 손댔는가 — **영구 빨간불은 그 자체가 위험합니다**
-----------------------------------------------------------------------------
ⓒ 를 그냥 두면 `node design/check-l0-contrast.js` 가 **영구히 exit 1** 입니다.
그러면 다음에 진짜 새 결함이 생겨도 「원래 빨간불이잖아」로 넘어가고
**종료코드가 신호로서 죽습니다.** 이 세션에 「종료코드만 봤으면 통과로 셌을」
사고가 이미 2건 있었습니다(회의록 §10-5 · developer 의 `head -c` 파손 실패).
그래서 **하한 3:1 은 그대로 두고 이 한 항목만** 「받아들인 미달」로 뺐습니다.
· 장치: `design/check-l0-contrast.js` **18-6-a** (그 블록이 1차 출처입니다)
· 표의 상태 칸은 **여전히 `FAIL`** 입니다. 합계에 「받아들인 미달 1건」이
별도로 찍히고 마지막 줄이 「통과(받아들인 미달 1건 제외)」로 바뀝니다
· 잃는 것: **종료코드만 보는 사람에게는 이 미달이 안 보입니다.** 그 대가로
「exit 1 = 새 결함」이라는 신호를 되찾았습니다. 둘 다 가질 수는 없었습니다
🔴 하한 3:1 자체를 낮추지 않았습니다 — 낮추면 ghost 테두리·.input 테두리 등
스무 항목이 함께 헐거워집니다. 오히려 18-6-a 는 **하한을 몰래 낮추면 대신
웁니다** 【확인함 — 하한 3.0→1.5 로 바꿔 실행 → 표는 PASS, exit 1】.
③ 🔴 고치고 싶어지면 — 무엇을 만지면 되는가 (마음이 바뀌었을 때의 지도)
🔴 **2026-08-03 오후에 마음이 바뀌었고, 아래 ⓐ 를 그대로 실행했습니다**(㉺ ①).
이 절은 그 지도가 맞았는지 대조할 수 있게 남깁니다 — 예고 3.2:1 · 실측 3.22:1.
-----------------------------------------------------------------------------
ⓐ **테두리를 밝게** — 배지 규칙의 border-color 를 #4A4032 → #6E6355 로
(⚠ 이 절에 규칙 «전문» 을 적지 않습니다 — 「선택자 + 중괄호」 꼴을 주석에
적으면 raw 파일을 정규식으로 훑는 도구가 **주석을 먼저 잡습니다.**
check-theme-break.js 가 2026-08-02 에 정확히 그렇게 4건 헛돌았습니다)
(= --c-border-strong) → **3.22:1** 【확인함 2026-08-03 · 검사기 재실행】
v2.0 이 하던 것이고, check-theme-break.js 의 'GONE' 변이가 이 값을 증명합니다.
ⓑ **배지 배경을 진하게** — `background:rgba(11,9,7,.5)` 의 알파를 올려 면을
더 검게 만들면 밝은 테두리와의 차가 커집니다. 알파 .6 은 1.88 로 **모자랍니다**
【확인함 — 검사기 재실행】. 3:1 에 닿는 알파는 **재 보고 적으십시오** — 이 면은
«사진 × 스크림 × filter» 합성 위에 얹히므로 산술로 예측하지 마십시오.
🔴 ⓐ·ⓑ 어느 쪽을 하든 18-6-a 의 «원문 대조» 에 걸려 **면제가 자동으로 무효**가
됩니다. 그때 18-6-a 블록을 지우면 됩니다(지우는 것은 안전한 방향입니다).
🔴 **`brightness` 로는 어떤 값에서도 3:1 을 못 넘습니다.** 실측표는 ㉶ ③ 에 있습니다:
.30 → 1.92 · **.45 → 1.86(현행)** · .80 → 1.71 · 1.20 → 1.50 · 1.80 → 1.19
어둡게 갈수록 좋아지지만 .30 의 1.92 가 사실상 최대이고, 그 아래는
「사진 구역 평균 vs 지면」이 먼저 웁니다. **밝기부터 만지지 마십시오.**
④ 면제 장치를 «일부러 깨뜨려» 확인했습니다 【확인함 2026-08-03 오전】
🔴 **여섯 건 전부 2026-08-03 오후에 폐기됐습니다 — 겨냥할 면제가 없습니다.**
무엇으로 교체됐는지는 check-theme-break.js 의 「폐기」 블록에 있습니다.
-----------------------------------------------------------------------------
자동(check-theme-break.js 1부 · `--dry` 로 앵커가 실제로 걸리는지 먼저 확인):
ⓐ 테두리를 더 어둡게(#3A3228) → 1.50:1 · **exit 1** (면제 무효)
→ 🔴 **유지**(이름만 갱신). 지금도 1.50:1 · exit 1 입니다
ⓑ 배지 배경 알파 .5→.6 → 1.88:1 로 «좋아지는데도» **exit 1**
← 면제의 대상이 «숫자» 가 아니라 «그 세 선언» 임을 증명하는 줄이었습니다
→ 🔴 **폐기.** 지금 걸면 **3.26:1 로 초록**입니다(면제가 없으므로 값만 봅니다)
ⓒ 배지는 그대로 · brightness .45→.80 → 1.71:1 · **exit 1** (핀 1.86 붕괴)
→ 🔴 **교체.** 기대 문구를 면제 메시지에서 항목 이름으로 바꿨습니다.
지금 그 변이의 배지 값은 **2.95:1** 이고 여전히 exit 1 입니다
손(자동화하지 않음 — 그 표는 CSS 만 변이시킵니다):
ⓓ `acceptKnownShortfall({…})` 호출을 죽임 → `FAIL — 대비 1건` · **exit 1**
ⓔ 면제를 2건으로 늘림 → 「2건 이상입니다」 · **exit 1**
ⓕ 하한 3.0 → 1.5 → 「면제가 낡았습니다」 · **exit 1**
→ 🔴 ⓓ·ⓔ·ⓕ **전부 폐기.** 함수가 없어 겨냥할 대상이 없습니다.
ⓕ 가 막던 「하한을 몰래 낮춰 초록 만들기」의 **대체물은 없습니다**
【미검증 — 만들지 않았습니다】. 사유는 ㉺ ④ 와 check-l0-contrast.js
18-6-a 폐기 기록의 «함께 잃은 것» 절.
-----------------------------------------------------------------------------
㉷ v2.1-a — 폴백 한 줄 복구 + 검사 무결성 3건 (2026-08-03 · designer)
-----------------------------------------------------------------------------
⚠ 아래 ㉶ 는 같은 날 오전의 기록이고 그대로 둡니다. 위 ㉸ 가 이 절 위에 있습니다.
① 🔴 **원본에서 벗어나는 지점이 «하나» 생겼습니다** — .hero 의 background-color
-----------------------------------------------------------------------------
무엇을 왜 — 원본은 `background:radial-gradient(…)` **단축**만 씁니다. 단축은
background-color 를 transparent 로 되돌리므로, 이미지·그라디언트가 꺼지는
환경(이미지 차단 · 강제 색)에서 히어로가 «투명» 이 되고 **글자가 어느 색 위에
놓이는지 아무도 모르게 됩니다.** 18-6 이 v1.3 부터 그 폴백을 검사해 왔고,
㉶ 의 원본 복귀로 그 검사가 빨간불이었습니다.
🔴 화면이 바뀌지 않는 **순수 버그 수정**입니다 — 대표가 「묻지 않고 고친다」고
사용자에게 보고한 항목입니다(배지 테두리 건과 성격이 다릅니다).
어떻게 — 그라디언트는 **한 글자도 건드리지 않고** 색만 별도 선언으로
단축 **뒤에** 덧붙였습니다. 앞에 두면 뒤따르는 단축이 다시 지웁니다.
색을 #0B0907 로 고른 근거 — ㉠ 방사 그라디언트의 «바깥 색»(74% 이후 끝까지
이어지는 색)과 같은 값이라 그라디언트가 켜져 있는 한 한 픽셀도 안 보입니다.
㉡ v1.9 이전 판이 쓰던 폴백 값과도 같습니다. ㉢ §0 대비표(18-6)의
「히어로 배경색 폴백 vs 본문 15.43:1 · vs ghost 테두리 3.39:1」이 이 색에서
나옵니다 — 둘 다 하한을 넘습니다. 두 항목은 이 줄이 없으면 **판정 대상에서
아예 빠집니다**(HERO_FALLBACK 이 null).
🔴 렌더 무변화 확인 【확인함 2026-08-03】
design/hero-option-live.en.html 을 http://127.0.0.1:8765 로 서빙(1280 · en ·
prefers-reduced-motion:reduce 로 향연기 고정) → .hero 사각형 1280×403 을
CDP Page.captureScreenshot 으로 클립 캡처. **전후 PNG 의 sha256 동일**:
900f4f8866dc1955d520af07fd64e24646d169017251b631c5f14e3d74f98ee9
(재현 절차는 이 항목의 다음 사람이 그대로 따라 할 수 있습니다 — 서버 루트를
design/ 로 두면 /assets/img/hero-shrine.jpg 가 그대로 풀립니다.)
🔴 **다음 사람에게** — 이것이 원본과 다른 유일한 지점입니다. 「원본과 다르네」
하고 지우지 마십시오. 지우면 18-6 이 다시 웁니다.
② 🔴 18-6 의 «밝기» 항목이 **밝기를 안 지키고 있었습니다** (developer 인계)
-----------------------------------------------------------------------------
대비비는 두 색의 «순서» 와 무관하고 항상 ≥1 입니다. 그래서 「지면보다 밝다」와
「지면보다 어둡다」가 **같은 값**으로 나옵니다. 종전 「히어로 사진 구역 평균 vs
지면 ≤ 1.05」의 실측 1.04 는 «밝다» 가 아니라 **«어둡다»** 였고, 밝히면 값이
내려갔다가 지면을 지나 다시 올라가는 V 자였습니다 —
**brightness 1.50 까지 통과**했습니다(현행 .45).
고친 방법: 휘도 차의 «방향» 을 곱해 단조 증가로 편 뒤 두 쪽을 나눴습니다.
· 밝은 쪽 상한 ≤ 1.00 (신설) — 지면보다 밝아지면 미달. 이제 .90 에서 웁니다
· 어두운 쪽 상한 ≤ 1.05 — 종전 항목이 «실제로 하던 일». 값·한도는 그대로
**이름도 사실에 맞게 고쳤습니다**((밝기 상한)→(어두운 쪽 상한) ·
(디자인 상한)→(계조 상한)). §10-6 이 남긴 것과 같은 종류의 자리였습니다.
계산과 실측표는 check-l0-contrast.js 18-6 의 같은 자리 주석에 있습니다 —
**여기에 옮겨 적지 않습니다**(손으로 옮긴 수치는 반드시 낡습니다).
③ 사진 최명 상한이 «사실상 순백» 인 것 — 사실이고, 성격을 적었습니다
-----------------------------------------------------------------------------
HERO_PHOTO_MAX 가 #FEFFFF(8bit 천장)라 `surfaceAt(#FEFFFF)` 와
`surfaceAt(#FFFFFF)` 가 **같은 색**입니다. 사진을 어떤 것으로 바꿔도 계조 상한이
더 올라갈 수 없습니다. 원인은 ㉶ 의 구조 그 자체입니다 — 스크림 α=.80 이
사진을 20%만 통과시키고 filter 의 brightness(.45) 가 다시 절반 이하로 누릅니다.
🔴 그래서 그 항목은 이제 «사진» 이 아니라 «스크림+filter 합성 사슬» 을 잽니다.
**사진 내용을 지키는 것은 18-0-b 의 sha256 핀입니다** — 그 초록을 「사진이
안전하다」로 읽지 마십시오. 조일 수 있는 자리는 계조가 아니라 위 ② 의
«밝은 쪽» 이었고, 그쪽을 조였습니다.
④ 「reduce 에서 애니메이션 0건」은 우리 CSS 의 증거가 아니었습니다
-----------------------------------------------------------------------------
@media (prefers-reduced-motion) 블록을 통째로 지워도 **0 이 그대로 통과**합니다
— CDP 에뮬레이션에서 Chrome 이 애니메이션을 아예 돌리지 않기 때문입니다
【확인함 2026-08-03 — 실제로 지우고 design/render-probe.js 실행】.
규칙이 살아 있음을 증명하는 것은 **.hero::after 의 animation-name 판정 하나뿐**
이고, 불변을 그쪽으로 옮겼습니다. 개수 판정은 «브라우저 관측» 으로 남겼습니다
(지우지 않았습니다 — 그 0 이 1 로 바뀌면 그 사실을 알아야 합니다).
⚠ 실기기에서 실제로 멈추는지는 **【미검증】** 입니다.
⑤ 이름·내용 불일치 2건 — 고쳤습니다
-----------------------------------------------------------------------------
· 이 파일 3행 제목이 v2.0 인데 이력은 v2.1 이었습니다 → v2.1-a
· §0-1 ① 이 「§7 에 걸려 있는 파일은 hero-shrine-01.jpg」라고 적고 있었습니다
→ hero-shrine.jpg (v2.1 에서 바뀐 것을 그 문장이 못 따라갔습니다)
⚠ 이력 서술(「v1.9 는 4층이었다」 류)은 **사실이므로 그대로 뒀습니다.**
=============================================================================
㉶ v2.1 — 사용자가 원본 사진을 올리고 «원본 값 복귀» 를 지시했습니다 (2026-08-03)
=============================================================================
지시 원문: 「아니 지금 이거 선택말고 클로드 디자인파일 준거 그대로 해 물어보지말고」
🔴 이 회차의 요점 한 줄 — **대표의 brightness(.80) 지시가 «원본 이탈» 이었습니다.**
v2.0 은 「원본의 .45 는 그쪽 사진 기준이니 우리 사진에 맞게 다시 잡으라」는
대표 지시로 .80 이 됐습니다. 사용자가 그 지시를 **철회**했습니다.
그러니 다음 사람은 「왜 .45 지? 어두운데?」 하고 **다시 올리지 마십시오.**
.45 는 «틀린 값을 대충 놔둔 것» 이 아니라 **아래 사진과 한 쌍인 값**입니다.
왜 v2.0 에서 .45 가 화면을 죽였는가 — 사진이 달랐기 때문입니다 【확인함】
재현: powershell -NoProfile -File design/hero-photo.ps1 -Build -NoCurve -Out hero-shrine.jpg
(출력 전문: design/hero-photo-v20orig.out.txt)
같은 자(8×4 격자 32칸 · max(R,G,B) 척도)로 나란히 잰 값:
평균 σ 범위 파일 크기
hero-shrine-01.jpg (v1.8 판) 36.6* 36.0* 0.3~122* 273,875 B
hero-shrine.jpg (이 판) 72.91 39.48 8~151 296,207 B
* 표 안의 v1.8 행은 【대표 실측 인용 · 회차 지시문】입니다. designer 가 같은
자로 다시 잰 값은 40.13 / 24.19 / 0~88 이라 **일치하지 않습니다** — 격자
다운샘플 방식이 다른 것으로 보이나 원인을 분리하지 못했습니다 【미검증】.
designer 자체 산출끼리의 비교(원본 72.97 → 출력 72.91)는 같은 자입니다.
즉 v1.8 판은 하이라이트를 억제한(-Black 32 -Knee 60 -Ceil 128) 눌린 판이고,
.45 를 또 곱해서 화면 평균 5.2 까지 떨어졌던 것입니다. 원본은 그 두 배입니다.
① 사진 — **톤커브를 걸지 않았습니다.** 축소·재압축만 했습니다
마스터 design/assets/shrine-01-source.png (2816×1536 · 9,854,938 B ·
sha c2ea73d1…b0ab) → 1600×873 · JPEG q=80 · 296,207 B · sha 3b74f911…47d5
🔴 사용자가 「올린 원본」(design/assets/img/hero-shrine.jpg 9.85MB)은 위 마스터와
**바이트 동일**했습니다(cmp 로 확인 · 확장자만 .jpg 이고 실체는 PNG 였습니다).
새 파일이 아니라 이미 있던 마스터의 사본입니다. 그래서 배포물 자리에서
치우기만 했고, 마스터는 assets/shrine-01-source.png 에 그대로 있습니다.
🔴 이 sha 3b74f911…47d5 는 18-0-b 핀 이력의 «v1.3 곡선 없음» 과 **같은 값**입니다.
우연이 아니라 같은 마스터·같은 폭·같은 인코더의 재현입니다. 뜻: 이 판은
「새로 만든 것」이 아니라 v1.4 이전으로 되돌아간 것입니다.
폭 1600 을 유지한 이유 — design/hero-live-probe.js · hero-pos-lab.js ·
hero-v20-lab.js 세 파일이 PHOTO_W=1600, PHOTO_H=873 을 상수로 갖고 있습니다.
바꾸면 그 셋을 함께 고쳐야 하고, 이 회차의 지시에 없는 변경입니다.
q=80 인 이유 — 300,000 B 목표 안에 드는 «가장 높은» 품질입니다(q=85 는 342,782 B).
목표 자체는 v1.4 부터 쓰던 값이고 이 회차에서 바꾸지 않았습니다.
② CSS — 원본과 한 글자도 다르지 않습니다. **예외 4건을 전부 철회했습니다**
v2.0 이 원본에서 바꿨던 4건과, 이 회차의 처리:
① 사진 경로 hero-shrine-01.jpg → 철회. 원본대로 hero-shrine.jpg
② brightness(.80) → 철회. 원본대로 .45
③ .hero .badge 의 border-color 삭제 → 철회. 원본대로 #4A4032 를 되넣음
④ .hero 의 background-color 폴백 한 줄 → 철회. 원본에 없으므로 삭제
🔴 **④ 는 2026-08-03 에 다시 되넣었습니다**(v2.1-a · ㉷ ①). 위 문장은
그날 오전의 기록이고, 지금 CSS 에는 그 줄이 **있습니다.**
🔴 ③④ 는 «검사를 초록으로 유지하려고» 넣었던 예외입니다. 되돌리면 검사가
빨간불이 납니다. **그 빨간불을 검사 쪽에서 지우지 않았습니다** — 아래 ③.
③ 🔴 지금 «일부러» 빨간불인 검사 3건 — 한도를 낮추지 않았습니다
(재현: node design/check-l0-contrast.js · 실측값은 그 출력이 1차 출처입니다)
· [단청] 히어로 배지 테두리 vs 배지 면 — 원본의 #4A4032 가 3:1 미달입니다.
🔴 **brightness 를 어떤 값으로 해도 넘지 못합니다.** 새 사진으로 다시 쟀습니다
【확인함 — brightness 만 바꿔 node design/check-l0-contrast.js 를 6회 실행】
.30 → 1.92 .45 → **1.86**(현행) .80 → 1.71 1.20 → 1.50 1.80 → 1.19
어둡게 갈수록 좋아지지만 .30 의 1.92 가 사실상 최대이고, 그 아래로는
「사진 구역 평균 vs 지면」이 먼저 빨간불입니다(.30 에서 이미 1.05 = 상한).
⚠ v2.0 이 적어 둔 「.45 에서 1.94 · 1.80 에서 1.62」는 **v1.8 사진 기준**이라
지금은 틀린 값입니다. 사진이 바뀌면 이 숫자도 바뀝니다 — 옮겨 적지 말고
검사기를 돌리십시오.
· .hero 에 background-color 폴백이 없습니다 — 이미지 전면 차단 환경에서
히어로가 투명해집니다. 그 결과로 «폴백» 대비 2건도 판정 대상에서 빠집니다.
🔴 **이 항목은 2026-08-03 에 해소됐습니다**(㉷ ①). 지금 «일부러 빨간불» 은
배지 테두리 **1건뿐**입니다. 위 문장은 그날 오전의 기록입니다.
해법 후보(2026-08-03 오전 시점 — **사용자 결정 대기**였습니다):
ⓐ 배지 테두리를 --c-border-strong(#6E6355)으로 → 3.2:1. v2.0 이 하던 것
ⓑ ghost 버튼에도 .badge 처럼 자기 배경을 준다 → 밝기 천장 자체가 올라감
ⓒ 3:1 을 포기한다는 결정을 명시하고 검사에서 이 항목을 «알고 있는 미달» 로 표시
🔴 **같은 날 사용자가 ⓒ 를 골랐습니다.** 이 목록은 «그때 올린 안» 이고,
결정 이후의 상태·되돌리는 방법은 위 **㉸** 입니다. 여기서 판단하지 마십시오.
⚠ 「한도를 낮춰 초록을 만든다」는 이 파일이 처음부터 금지한 순서입니다.
미달을 미달로 두는 편이 정직합니다.
④ 🔴 배지 테두리 미달은 «모델만» 의 이야기가 아닙니다 — 렌더에서도 미달입니다
v2.0 은 「계산 모델이 보수적이라 낮게 나오고 화면은 초록」인 항목이 여럿이었고
(hero-v2-applied-notes.md §3), 그래서 이번에도 그렇겠거니 넘어갈 수 있는 자리입니다.
**넘어가면 안 됩니다.** 화면 픽셀로 다시 쟀고 6셀 전부 미달입니다:
【확인함 — node design/hero-v20-lab.js --widths 375,768,1280 --langs en,ja】
배지 테두리 렌더 실측 en 1.93 / 1.97 / 1.93 ja 1.88 / 1.89 / 1.92 (하한 3.00)
계산 모델은 1.86 — 이번에는 모델과 렌더가 «같은 쪽» 을 가리킵니다.
즉 WCAG 1.4.11 실제 위반이고, 「보수적 모델의 착시」가 아닙니다.
⚠ 같은 실행에서 .lede 는 렌더 11.53~11.73 로 4.5:1 을 크게 넘습니다.
미달은 배지 테두리 «하나» 입니다.
⑤ 톤커브를 항등으로 둔 이유 — 새 구조에는 그 제약이 없습니다
v1.4~v1.8 이 하이라이트를 누른 것은 **균일 스크림 .83 을 견디게** 하려던 것입니다.
(α 가 한 값이면 사진의 최대 휘도가 곧 화면 최대 휘도라, 순백이 섞인 사진은
α 를 .96 까지 올려야만 배지 테두리 3:1 을 살 수 있었습니다 — 사진 4% 통과.)
C 안의 스크림은 **세로 3정지점(.90/.80/.96)** 이고 filter 가 따로 붙습니다.
밝기를 누르는 손잡이가 사진 바깥에 생겼으므로 사진을 미리 눌러 둘 이유가 없어졌고,
원본의 계조(8bit 8~151 · σ 39.5 · 32칸)를 그대로 들고 오는 편이 낫습니다.
🔴 되돌리지 마십시오 — 톤커브를 다시 걸면 .45 가 또 «두 번 눌린» 값이 되어
v2.0 이 겪은 문제(화면 평균 5.2)로 정확히 되돌아갑니다.
⑥ 화면 실측 — 「.45 로 되돌리면 밝아지는가」 【확인함 · 1280·en · 위와 같은 실행】
판 화면 평균 계조 σ
v1.9 (폐기) 18.2 12.0
v2.0 (.80 · v1.8 사진) 8.3 5.4 ← 재현 불가 · §1 인용
시안.45 (.45 · v1.8 사진) 5.2 — ← 사진만 다른 대조군
**v2.1 (.45 · 원본 사진) 7.2 4.8**
🔴 사진을 바꾼 효과는 **있었습니다**(5.2 → 7.2 · 같은 .45). 그러나 v2.0 의 8.3 보다
**낮고** v1.9 의 18.2 에는 크게 못 미칩니다. 「원본에 걸면 의도한 밝기가 나온다」는
이 회차의 전제는 **부분적으로만 맞았습니다.** 밝기를 올리지 않은 이유는
지시(원본 그대로)이고, 올릴 여지도 없습니다 — ghost 테두리가 3.00 으로 여유 0.00.
-----------------------------------------------------------------------------
㉵ v2.0 — 외부 분기본의 §7 을 채택했습니다 (사용자 결정 「C 안」 · 2026-08-02)
⚠ 아래 ㉵ 는 **2026-08-02 시점의 기록**입니다. 위 ㉶ 가 그 위에 있습니다.
지우지 않는 이유: 「왜 .80 이었다가 .45 가 됐는가」의 근거가 여기 있습니다.
-----------------------------------------------------------------------------
무엇을 채택했는가 — 1차 출처는 claude.ai/design 프로젝트의 outputs/theme-dancheong.css
(projectId 962defe2-361d-4608-97b3-629c5be5eb68 · DesignSync MCP 로 대표가 읽어
회의록 §11 에 원문을 옮겼습니다. designer 는 MCP 를 쓸 수 없으므로 **그 옮긴
원문**을 1차 출처로 삼았습니다 — 원본 파일을 직접 열지는 못했습니다 【확인 실패】)
· .hero::before 단일 층 — 스크림 + 사진을 한 background 목록에 (앞이 위)
· filter:saturate(.9) contrast(1.05) brightness(…)
· .hero .lede{color:#D6CCBB} · .hero .badge 에 «자기 배경»
· .hero::after 향연기 + @keyframes incense + prefers-reduced-motion 대응
· 사진 축척 center 40% / cover · 히어로 고정 높이 없음
🔴 원본에서 **바꾼 것 3가지** — 전부 이유를 적습니다
🔴 **아래 ①②③④ 는 2026-08-03 에 전부 철회됐습니다(㉶ ②). 지금 CSS 에 없습니다.**
남겨 두는 이유는 「왜 한때 그렇게 했는가」와 「되돌리면 무엇이 깨지는가」가
여기 적혀 있기 때문입니다. ③④ 의 사유는 지금도 유효하고, 그래서 지금
검사 3건이 빨간불입니다 — 그것이 사용자가 알고 고른 상태입니다.
① 사진 경로 /assets/img/hero-shrine.jpg → 「/assets/img/hero-shrine-01.jpg」
⚠ 여기에 «별표 두 개 + 슬래시» 를 쓰지 마십시오. 그 세 글자가 주석을 닫습니다
(이 줄을 처음 쓸 때 실제로 그렇게 닫혀서 아래 규칙이 통째로 CSS 밖이 됐습니다).
원본의 이름은 이 저장소에 **존재한 적이 없습니다.** 우리 것은 v1.8 계조
복원판(273,875 B · sha aa5323b2…)이고 18-0-b 가 sha 로 잠급니다.
② brightness() 값을 다시 잡았습니다 — 원본은 .45 입니다. **그 값은 그쪽 사진
기준**이고 우리 사진은 이미 톤커브로 눌린 판이라 .45 를 또 곱하면 죽습니다.
시안 v20 실측: 화면 평균 18.2 → **5.2** · 계조 σ 12.0 → **3.4**
(design/hero-v20-notes.md). 재선정 근거는 아래 「밝기를 어떻게 골랐는가」.
③ 🔴 **.hero .badge 의 border-color:#4A4032 를 반려했습니다.**
그 색은 배지 자기 배경 위에서 **1.94:1** 입니다 — 어떤 brightness 값에서도
3:1(WCAG 1.4.11 비텍스트 대비)을 넘지 못합니다. brightness .45 에서도 1.94,
1.80 에서도 1.62 입니다 【자체 산출 — check-l0-contrast.js 18-6 의 모델로
후보 10개를 계산. 재현: 그 절의 surfaceAt() 에 값을 넣어 보십시오】.
그래서 테두리는 선언하지 «않고» style.css 의 .badge 가 쓰는
--c-border-strong(#6E6355)을 그대로 둡니다. 색(color)과 배경(background)은
원본 그대로입니다. 되돌리려면 3:1 을 포기한다는 사용자 결정이 먼저입니다.
④ (원본에 없던 한 줄) .hero 에 background-color 폴백을 되넣었습니다.
원본은 background 단축 속성만 씁니다 — 단축은 background-color 를 transparent
로 되돌리므로 이미지가 전면 차단된 환경에서 히어로가 «투명» 이 됩니다.
18-6 이 v1.3 부터 그 폴백의 존재를 검사해 왔습니다. 검사를 지우는 대신
한 줄을 되넣었습니다. 화면에는 나타나지 않습니다(방사 그라디언트의 바깥색과 같음).
-----------------------------------------------------------------------------
🔴 폐기 목록 — v1.4~v1.9 로 만든 것. **지우지 않고 사유와 함께 남깁니다**
-----------------------------------------------------------------------------
지우면 다음 사람이 똑같은 것을 다시 만듭니다. 「왜 만들었고 왜 폐기했는가」 한 줄씩:
ⓐ 사진 원본 크기 고정 1600×873 + min-height:873px (v1.8)
왜 만들었나 — 사용자 지시 「세로가 잘린다」. cover 는 넓을수록 세로를 더
잘라냈습니다(2560 에서 세로 32.1%만 보임 · 실측).
왜 폐기하나 — C 안이 cover 로 돌아갑니다. 사용자가 시안 v20 캡처(세로 노출
1920 에서 33%)를 보고 그 대가를 알고 고른 것입니다.
🔴 375 에서는 오히려 **좋아집니다** — v1.9 는 나무 벽 구석만
보였는데(사진의 23.4%) cover 는 신당 전체가 들어옵니다.
ⓑ 방향성 스크림 (≥1024px 에서 to right · 왼쪽 .91 → 오른쪽 .40) (v1.5~v1.9)
왜 만들었나 — 글자가 없는 오른쪽을 밝게 해서 사진을 «보이게» 하려고.
왜 폐기하나 — C 안은 세로 스크림(.90 → .80@42% → .96)입니다. 좌우가 균일해져
「글자를 어느 쪽에 두는가」라는 문제 자체가 사라집니다.
🔴 대가: 화면 평균 밝기가 크게 내려갑니다. v1.9 의 평균 18.2 는
«글자가 없는 오른쪽 절반이 밝아서» 나온 값이었습니다. 좌우 균일
스크림에서 같은 평균을 만들려면 **글자 밑도 같이 밝아져야** 하고,
그 순간 아래 ⓔ 의 천장에 걸립니다. 자세한 것은 「밝기」 절.
ⓒ --hero-edge (≥1600px 왼쪽 빈 면을 지면색으로 덮고 240px 페이드) (v1.7~v1.9)
왜 만들었나 — 사진 폭이 1600 고정이라 그보다 넓으면 «사진 아닌 면» 이 생겼고,
1920 에서 경계 좌우 열 평균 9.2 대 17.2 = 약 8레벨 계단이 보였습니다.
왜 폐기하나 — cover 는 빈 면을 만들지 않습니다. 덮을 것이 없습니다.
ⓓ --hero-text-max (히어로 내용 넷을 왼쪽 50% 에 못박기) + 스크림 평탄 구간 58%
(v1.6~v1.9 · 사용자 결정 ⓓ)
왜 만들었나 — 방향성 스크림에서 «요소가 놓이는 x 를 CSS 로는 알 수 없다» 는
문제를 «추정하지 않고 CSS 로 못박아» 푼 장치입니다. 그 덕에
오른쪽 구간의 WCAG 요건이 0건이 되어 자유롭게 밝힐 수 있었습니다.
왜 폐기하나 — 세로 스크림에는 «옅은 쪽» 이 좌우로 없습니다. 못박을 대상이
없어졌습니다. 원본 §7 에도 이 장치가 없습니다.
🔴 되살리지 마십시오 — 되살리면서 스크림을 to right 로 되돌리는 조합만이
의미가 있는데, 그건 C 안을 통째로 되돌리는 것입니다. 사용자 결정이 먼저입니다.
18-6 이 «스크림이 180deg 인가» 를 그 목적으로 검사합니다.
ⓔ 폭 3구간 사진 정렬 (<1280 left · ≥1280 center · ≥1600 right) (v1.8~v1.9)
왜 만들었나 — 사진이 1600 고정이라 뷰포트가 그보다 좁으면 «어느 조각을 보여
주는가» 를 정렬이 정했고, 이 사진의 밝은 구역이 x 900~1050 과
x 1330~1600 두 덩어리뿐이라 한 값으로는 모든 폭을 만족시킬 수
없었습니다(그래도 약 1145~1279px 은 끝내 미달로 남았습니다).
왜 폐기하나 — cover 는 폭에 맞춰 축척을 바꾸므로 «잘림 오프셋» 개념이
사라집니다. center 40% 한 값이 모든 폭을 덮습니다.
🔴 §11-9 의 2번 항목(「1145~1279px 에서 사진 오른쪽이 어두움 — 사진 재선정
필요」)은 **이 폐기로 함께 사라집니다.** 그 문제는 «1600 고정 + 정렬» 구조가
만든 것이었습니다. 사진 재선정은 이제 필요 없습니다 — 다만 그것은
«그 증상이 사라진다» 는 뜻이지 «사진이 좋아진다» 는 뜻이 아닙니다.
ⓕ HERO_LIFT_MAX(계조 상한 2.8) / HERO_PHOTO_MEAN(밝기 상한 1.20) 의 **값** (v1.8~v1.9)
⚠ 이름과 값의 짝을 뒤집어 적지 마십시오 — 2.8 이 «계조», 1.20 이 «밝기» 입니다.
§10-6 이 「이름과 실제로 막는 것이 다른 검사는 반드시 오해시킨다」로 남긴 자리입니다.
왜 만들었나 — v1.8 이 「평균은 유지 · 계조를 키워라」를 하려는데, 그때까지의
최댓값 상한이 이름과 달리 «계조» 를 막고 있었기 때문입니다.
그래서 «밝기(평균)» 와 «계조(최댓값)» 로 항목을 나눴습니다.
무엇이 남았나 — **항목은 그대로 남습니다.** 값만 새 구조의 실측값 바로 위로
다시 잡았습니다(1.06 · 1.30). 구조가 바뀌어 값이 내려갔는데
한도를 그대로 두면 여유가 1.7 이나 되어 아무것도 안 지킵니다.
🔴 항목 «이름» 은 바꾸지 않았습니다 — app/tools/hero-render-probe.js
가 문자열로 찾아 씁니다(developer 소관 · 인계 항목).
-----------------------------------------------------------------------------
🔴 «천장» 은 사라지지 않았습니다 — 옮겨 갔습니다. 여기를 반드시 읽으십시오
-----------------------------------------------------------------------------
회의록 §11-4 는 「배지에 자기 배경을 줬으므로 밝기 천장이 사라진다」고 적었습니다.
**절반만 맞습니다.** 실제로 계산해 보고 알게 된 것:
① 배지의 자기 배경은 **rgba(11,9,7,.5) = 반투명 50%** 입니다. 불투명이 아닙니다.
사진이 절반 비쳐 나오므로 배지 대비는 «사진과 무관해지는» 것이 아니라
«사진의 영향이 절반이 되는» 것입니다. 천장이 사라진 게 아니라 두 배로 올라갔습니다.
② 🔴 그리고 진짜 천장은 배지가 아니라 **.btn--ghost 테두리** 입니다.
ghost 버튼에는 자기 배경이 없습니다. 사진면 위에 테두리(--c-border-strong
#6E6355)만 놓이고, 3:1 이 걸립니다. v1.9 는 그 버튼을 --hero-text-max 로
«짙은 왼쪽» 에 가둬서 이 문제를 피하고 있었는데, v2.0 은 ⓓ 를 폐기했으므로
ghost 테두리가 **가장 옅은 띠(알파 .80)** 위에 놓입니다.
원본 §7 의 작성자는 이 문제를 만나지 않았습니다 — 그쪽에는 217건짜리 대비
검사가 없었기 때문입니다.
후보별 계산 【자체 산출 — check-l0-contrast.js 18-6 의 filter 모델】
brightness ghost 테두리(3:1) 배지 테두리(3:1) 본문(4.5:1)
0.45 3.30 ✅ 3.42 ✅ 15.05 ✅
0.60 3.20 ✅ 3.35 ✅ 14.56 ✅
0.70 3.12 ✅ 3.30 ✅ 14.20 ✅
0.80 3.03 ✅ 3.22 ✅ 13.81 ✅
0.90 2.94 🔴 3.16 ✅ 13.40 ✅
1.58 2.28 🔴 2.79 🔴 10.39 ✅
(배지 테두리 열은 #4A4032 를 반려하고 --c-border-strong 을 쓴 값입니다.
#4A4032 를 그대로 쓰면 같은 줄이 1.94 / 1.91 / 1.89 / 1.87 / 1.85 / 1.68 입니다.)
🔴 즉 **v1.9 의 화면 평균 18 은 이 구조에서 WCAG 를 지키면서는 만들 수 없습니다.**
평균 18 이 나오려면 brightness 가 약 1.6 이어야 하는데(v20 실측 5.2@0.45 에서의
선형 외삽 【자체 산출 · 미검증】), 그 값에서 ghost 테두리가 2.28:1 로 떨어집니다.
v1.9 의 18.2 는 «글자가 없는 오른쪽 절반» 이 만든 평균이었고, 좌우 균일 스크림에는
그런 구역이 없습니다. **둘 중 하나를 사용자가 골라야 합니다** — 아래 「남은 결정」.
-----------------------------------------------------------------------------
밝기를 어떻게 골랐는가 — 후보를 캡처해 눈으로 골랐습니다 【2026-08-02 · 폐기】
-----------------------------------------------------------------------------
🔴 이 절의 결론(.80)은 **폐기됐습니다.** 사용자가 원본 .45 를 지시했습니다(㉶).
아래 표와 「이 값을 올리지 마십시오」는 **v1.8 사진(눌린 판) 기준**이라 지금
사진에는 그대로 적용되지 않습니다. 지금 사진 기준 값은 ㉶ 와 보고서에 있습니다.
절을 지우지 않는 이유: 「.80 은 어디서 나온 숫자인가」를 남겨야 합니다.
-----------------------------------------------------------------------------
후보와 실측·캡처는 design/hero-v2-applied-notes.md §2 「v2.0 밝기 후보」 절입니다.
⚠ hero-v20-notes.md 는 «시안 v20(.45 · 적용 안 됨)» 의 보고서입니다. 다른 파일입니다.
재현: node design/hero-v20-lab.js (히어로 평균·계조 σ·요소별 «렌더» 대비를 함께 냅니다.
끝에 brightness 후보 훑기가 붙습니다 — 파일을 고치지 않고 페이지 안에서만 덮습니다)
🔴 고른 값과 «지시받은 목표» 가 다릅니다. 숨기지 않고 적습니다.
목표는 「화면 평균 18 부근 · 계조 σ 12 부근 유지」였고 .80 은 **8.3 / 5.4** 입니다.
평균 18 은 brightness 1.75 에서 나오는데 그 값에서 배지 테두리가 2.85:1 로
WCAG 1.4.11(3:1) 아래입니다 【렌더 실측 · 1280·en】. 그리고 .80 을 넘기는 순간
18-6 의 ghost 테두리 항목이 빨간불입니다(여유 0.03).
**밝기와 대비 중 무엇을 포기할지는 사용자 결정이고, 아직 답을 받지 못했습니다.**
선택지 넷은 hero-v2-applied-notes.md §5 결정 A 에 있습니다. 그 답이 오기 전에
이 값을 올리지 마십시오 — 검사 한도를 먼저 낮추는 것은 §7 이 금지한 순서입니다.
⚠ 캡처 PNG 의 절대 밝기를 신뢰하지 마십시오 — 뷰어가 정규화합니다. 밝기는 표의
수치로 판단하고 PNG 는 구도·잘림·계조 유무를 보는 데 쓰십시오.
-----------------------------------------------------------------------------
구조 — 무엇이 어디에 있는가
-----------------------------------------------------------------------------
.hero 방사 그라디언트(사진이 안 왔을 때 보이는 면) + background-color 폴백
position:relative — ::before 의 inset:0 이 이것을 기준으로 잡힙니다
overflow:hidden — 향연기가 히어로 밖으로 새지 않게
.hero::before [스크림, 사진] 한 background 목록 + filter. z-index:0
🔴 어둡게 덮는 층은 **사진과 같은 background 목록 안**에 두어야 합니다.
::before 는 자기 부모의 배경 «위» 에 그려지므로, .hero 쪽에 스크림을 두면
사진 아래로 깔려 아무 일도 하지 않습니다. background 목록은 «앞이 위» 입니다.
🔴 filter 는 ::before **전체**에 걸립니다 — 스크림 색까지 함께 변환됩니다.
18-6 의 계산도 그 순서(알파 합성 → filter)로 되어 있습니다.
.hero::after 향연기 1줄기. 순수 장식. z-index:0 · pointer-events:none
.hero > .wrap position:relative + z-index:1
🔴 이 한 줄이 없으면 **글자가 사진 아래로 내려갑니다.** 대비 검사는 전부 초록인
채로 화면만 비어 보입니다. 18-6 이 구조로 대조합니다.
-----------------------------------------------------------------------------
⚠ 이 절이 «보지 않는» 것 (S-1)
-----------------------------------------------------------------------------
· 요소가 실제로 화면 어느 y 에 놓이는가. 스크림이 세로라 알파가 .90→.80→.96 으로
변하는데 CSS 만으로는 알 수 없습니다. 18-6 은 **가장 옅은 .80 을 전 요소에**
적용합니다 — 보수적인 쪽입니다. 실측은 design/hero-v20-lab.js 가 냅니다.
· 사진의 밝은 블록이 실제로 글자 아래 오는가. cover 라 폭에 따라 다릅니다.
역시 보수적으로 «온다» 고 봅니다.
· 강제 색 모드에서 향연기(.hero::after)는 그라디언트라 브라우저가 스스로 끕니다.
애니메이션은 계속 돌지만 보이는 것이 없습니다 — 받아들였습니다. 【미검증: 실기기】
· 실기기·Chrome 외 브라우저·고DPI 【미검증】
========================================================================== */
/* 🔴 아래 여섯 규칙과 @keyframes·@media 는 외부 분기본 §7 을 바탕으로 합니다.
원본과 다른 곳은 **여섯 군데뿐이고 전부 위 ㉹ ① 의 표에 있습니다.**
그 표 밖은 원문 그대로입니다(사용자 지시 2026-08-03 「클로드 디자인파일 준거 그대로 해」).
🔴 «원본과 다르네» 하고 되돌리지 마십시오 —
· background-color 폴백을 지우면 18-6 이 빨간불이고, 이미지가 꺼진 환경에서
글자가 어느 색 위에 놓이는지 알 수 없게 됩니다(㉷)
· 향연기 네 값을 c0(.16/.42/28px/200px)로 되돌리면 **최대 레벨차가 43 → 8 로
떨어져 사용자가 「아예 안 보인다」고 보고한 상태로 돌아갑니다**(㉹ ②).
18-6 ⑥ 이 그 되돌림을 빨간불로 잡습니다.
고치기 전에 위 ㉺·㉹·㉸·㉷·㉶ 를 읽으십시오.
🔴 **배지 테두리는 더 이상 «받아들인 미달» 이 아닙니다** (2026-08-03 오후 · 이탈 6번).
#4A4032(1.86:1 · WCAG 1.4.11 위반) → **#6E6355(3.22:1)** 로 고쳤고,
check-l0-contrast.js 의 면제 장치 18-6-a 는 **삭제**했습니다.
🔴 이 줄 위의 「받아들인 미달」 서술을 어딘가에서 보면 그것은 **낡은 것**입니다.
사유·이력·되돌리면 무엇이 우는지는 위 **㉺** 입니다. */
.hero{
position:relative;
overflow:hidden;
background:radial-gradient(ellipse 70% 70% at 50% 58%, #191309 0%, #0B0907 74%);
/* 🔴 이 한 줄만 원본 §7 에 없습니다 (2026-08-03 · 접근성 사유 · 이력 v2.1-a 참조).
원본은 background «단축» 만 씁니다. 단축은 background-color 를 transparent 로
되돌리므로, 이미지·그라디언트가 꺼지는 환경(이미지 차단 · 강제 색)에서 히어로가
투명해지고 **글자가 어느 색 위에 놓이는지 아무도 모르게 됩니다.**
색은 위 방사 그라디언트의 «바깥 색»(74% 이후로 끝까지 이어지는 색)과 같은
#0B0907 입니다 — v1.9 이전 판이 쓰던 값과도 같습니다. 그래서 그라디언트가
켜져 있는 한 이 색은 화면에 한 픽셀도 나타나지 않습니다.
【확인함 2026-08-03 — 1280·en(design/hero-option-live.en.html) 히어로 1280×403
캡처 PNG 의 sha256 이 이 줄을 넣기 전후로 동일: 900f4f8866dc1955…】
🔴 «단축 앞» 에 두면 안 됩니다 — 뒤따르는 단축이 다시 transparent 로 지웁니다.
반드시 단축 «뒤» 입니다. 18-6 이 이 선언의 존재를 검사합니다. */
background-color:#0B0907;
}
.hero::before{
content:""; position:absolute; inset:0; z-index:0;
background:
linear-gradient(180deg, rgba(11,9,7,.90), rgba(11,9,7,.80) 42%, rgba(11,9,7,.96)),
url("/assets/img/hero-shrine.jpg") center 40% / cover no-repeat;
filter:saturate(.9) contrast(1.05) brightness(.45);
}
.hero .lede{ color:#D6CCBB; }
/* 🔴 border-color 는 외부 분기본 원문(#4A4032)이 «아닙니다» — 이탈 6번(㉺ ①).
원문은 1.86:1 로 WCAG 1.4.11(비텍스트 3:1) 위반이었고 사용자가 해소를 위임했습니다.
#6E6355 = --c-border-strong · 3.22:1. 사유·이력은 아래 ㉺ 와 ㉸ ⑤ 에 있습니다. */
.hero .badge{ color:#C6BBA6; border-color:#6E6355; background:rgba(11,9,7,.5); }
/* 🔴 네 값(크기 320px · 알파 .40 · blur 36px · 아래 @keyframes 22% 의 .70)은 사용자가
후보 6종 실측을 보고 고른 «c4» 입니다(㉹). 원본 c0 는 .16/.42/28px/200px 이고
그 값에서는 화면이 최대 8/255(3.1%)밖에 안 바뀌어 «아예 안 보였습니다».
left:18% · bottom:-40px 은 200px 기준 값이지만 «고치지 않았습니다» — 사용자가 고른
캡처가 바로 이 기하입니다. 그 대가(중심이 우 60px·상 60px 이동, 하단 일부 잘림)는
㉹ ③ 에 적혀 있습니다. 18-6 ⑥ 이 네 값을 대조합니다. */
.hero::after{
content:""; position:absolute; z-index:0; left:18%; bottom:-40px;
width:320px; height:320px; border-radius:50%;
background:radial-gradient(circle, rgba(224,210,182,.40), transparent 66%);
filter:blur(36px);
animation:incense 18s linear infinite;
pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:1; }
/* 🔴 v2.0 — 이 저장소에서 유일한 @keyframes 입니다.
v1.0~v1.9 는 「@keyframes 0건」이 커밋된 제약이었고(§10-4), 사용자 결정 C 안으로
그 제약을 **먼저 고치고** 이것을 넣었습니다. 순서를 바꾸지 마십시오:
check-l0-contrast.js 18-0 — 허용 목록(incense 1건)
design/render-probe.js §15 — 렌더에서 「히어로 1건 · 그 외 0건 · reduce 0건」
이름을 바꾸면 두 곳이 함께 빨간불입니다. */
@keyframes incense{
0% { transform:translate3d(0,40px,0) scale(1); opacity:0; }
22% { opacity:.70; } /* 🔴 원본 .42 → c4 (㉹ ②). 위 알파 .40 과 «곱해집니다» */
100% { transform:translate3d(-26px,-360px,0) scale(2.3); opacity:0; }
}
/* 감속 선호 — 움직임을 지우고 «있었다는 사실» 만 옅게 남깁니다.
0 으로 지우지 않는 이유는 style.css P2-3 과 같습니다(전이를 없애지 않고 짧게). */
@media (prefers-reduced-motion:reduce){
.hero::after{ animation:none; opacity:.22; transform:none; }
}
/* 강제 색 모드(forced-colors)
-----------------------------------------------------------------------------
왜 이 규칙이 있는가: 그 모드에서 브라우저는 글자색을 시스템 색으로 바꾸면서
background-image 의 «그라디언트» 는 스스로 끄지만 «url()» 은 그대로 둡니다.
즉 사진 위에 우리가 고르지 않은 글자색이 얹히고 대비가 우리 손을 떠납니다.
🔴 v2.0 에서 **셀렉터를 고쳤습니다.** v1.9 는 `.hero{ background-image:none }`
이었는데, 사진이 ::before 로 옮겨간 뒤에는 그 규칙이 사진을 못 잡습니다 —
.hero 자신에는 이제 그라디언트밖에 없고 그건 브라우저가 알아서 끕니다.
시안 v20 에서 실제로 사진이 그 모드에서 살아남았습니다.
18-6 과 design/render-probe.js §14 가 각각 정적·렌더로 대조합니다.
🔴 그 다음에 실제로 무엇이 남는가 — 실측 【확인함 2026-08-02 · Chrome 에뮬레이션】
.hero 배경 rgb(255,255,255) · 글자 rgb(0,0,0) · body 흰색/검정.
즉 **이 다크 테마는 강제 색 모드에서 라이트 화면이 됩니다.** 이 파일의 색은
한 개도 화면에 나가지 않습니다. 그게 그 모드의 정의된 동작이고 결함이 아닙니다.
⚠ 그러므로 이 파일의 대비 계산은 그 모드에서 **적용되지 않습니다.** 우리가
지켜야 하는 것은 «색» 이 아니라 «형태가 남는가» 이고 §14 가 그것을 봅니다
(FC-a 고지 테두리 · FC-b 광고 슬롯 테두리 · FC-c 단청 띠는 사라짐 — 받아들임).
⚠ 실제 Windows 고대비 테마의 팔레트는 이용자가 고릅니다 — 【미검증】. */
@media (forced-colors:active){
.hero::before{ background-image:none; }
}
/* =============================================================================
8. TODO 칩 — 값이 미확정임을 표시합니다. 지우지 마십시오(design-guide §9 N-2).
⚠ .notice 는 여기에 없습니다. 고지는 색 구성과 무관하게 밝은 채로 둡니다(§0-1 ④).
========================================================================== */
.todo-chip{ background:var(--c-todo-tint); border:1px solid var(--c-todo-border); color:var(--c-todo-text); }
/* =============================================================================
9. 광고 — 흰 패널 규칙을 미디어 쿼리 밖으로. 4토큰은 건드리지 않습니다.
⚠ 광고가 0개인 화면(비공개 베타 빌드 · BETA-AD-2)에서는 이 규칙의 대상 요소가
아예 없으므로 레이아웃에 영향이 없습니다 — box-shadow 는 흐름을 차지하지 않고,
margin 은 요소가 있을 때만 적용됩니다.
========================================================================== */
.ad-slot-wrap{
background:var(--c-ad-panel);
border-radius:var(--r-lg);
padding:var(--sp-4);
box-shadow:0 0 0 1px rgba(10,7,5,.55), 0 0 0 24px var(--c-niche);
margin:calc(var(--ad-gap) + 24px) auto;
}
.ad-slot-wrap--afterresult{ margin-top:calc(var(--ad-gap-afterresult) + 24px); }
.ad-side{
background:var(--c-ad-panel);
border-radius:var(--r-lg);
padding:var(--sp-4);
box-shadow:0 0 0 1px rgba(10,7,5,.55);
}
.ad-side .ad-label{ padding-left:var(--sp-3); }
/* =============================================================================
10. 전통 문양 보더 — 섹션 사이 구분선. 이미지가 아니라 반복 그라디언트입니다.
========================================================================== */
.section + .section{ position:relative; }
.section + .section::before{
content:""; position:absolute; inset:0 0 auto 0; height:10px;
background:repeating-linear-gradient(90deg,
var(--c-border) 0 8px, transparent 8px 10px,
var(--c-border) 10px 12px, transparent 12px 20px);
opacity:.9;
}