/* ============================================================================ theme-bugopage.css — bugopage.com 디자인 시스템 (Design System 09 채택) ============================================================================ 그래파이트 프리미엄 — 순수 검정 배경 + 무채색 4단 표면 + 흰색 악센트. 정본: {OneDrive}\WEB\Projects\docs\design\design_system_09-graphite-premium.md ★ 이 테마에는 브랜드 색이 없다. 색이 허용되는 자리는 상태 표시(성공·경고·오류)뿐이고, 강조는 ① 표면 명도 ② 글자 크기 ③ 여백으로 만든다(DS09 §1·§9). 파란 버튼 하나만 넣어도 테마 인상이 무너지므로 색을 새로 들이지 않는다. ★ 깊이는 그림자가 아니라 명도 계단으로 만든다: #000 → #1c1c1e → #2c2c2e. 검정 배경 위 검정 그림자는 보이지 않는다(DS09 §2). 한 단계 안으로 들어갈 때마다 표면을 한 단계 밝게 올리고, 3단계를 넘으면 카드를 나눈다(DS09 §8-1). ★★ 3.0.0 부터 **화면이 두 종류다.** 아래 §0 을 반드시 먼저 읽을 것. 홈만 다크 무대이고, 나머지 화면은 전부 라이트다. 헤더·푸터는 어느 쪽에서도 다크다. @version 3.1.0 @updated 2026-09-13 @shared 복제사이트 공용 파일 — 여기서 고치면 다른 사이트에도 이식해야 한다 (단 이 파일을 실제로 읽는 사이트는 3호 bugopage 뿐이다. 2026-08-12 shared-files.psd1 에서 **전파 대상에서 제외**됐다 — theme-{code}.css 는 사이트의 디자인 그 자체라 사본을 둘 이유가 없다) @changelog 3.1.0 (2026-09-13) ⭐ Pretendard @font-face 400·500·700 선언(§00). 아홉 테마 전부 --font-sans 첫 자리에 Pretendard 를 적어 두고도 **어디서도 로드하지 않아** Windows 는 맑은 고딕(Regular·Bold 두 얼굴)으로 떨어지고 있었다. 표준 css-standard.md §14 대로 webworks.co.kr 중앙 폰트를 쓴다. 별도 pretendard.css + preload 대신 이 파일에 직접 선언한 이유는 공용 header.php 를 건드리지 않기 위해서다(전파·1호 라이브 업로드가 딸려온다). 홈 히어로 제목(500)이 Medium 으로 서게 된다 3.0.4 (2026-09-13) 플로팅 「위로」 버튼 테두리를 --ds-accent → --ds-on-accent(흰색)로. 배경도 --ds-accent 라 같은 색 위에서 테두리가 사라졌다(사용자 지적, 홈 다크 무대에서 검은 알약이 통째로 묻혔다) 3.0.3 (2026-09-07) --shadow-lift 추가. home-bugopage.css 의 .bp-quick 이 쓰는데 **어느 테마에도 정의가 없어** box-shadow 선언이 통째로 무효였다. bugopage.com 라이브에서도 그림자 없이 나오고 있었다. 값은 --shadow-lg("떠 있어야 하는 것" 전용)를 그대로 쓴다 3.0.2 (2026-08-12) 라이트 전환 후속 2건(사용자 지적). ① **입력창이 안 보였다** — 흰 카드 위에 #f4f4f7 면 + rgba(0,0,0,.12) 테두리라 면도 선도 안 보여 어디를 눌러야 할지 알 수 없었다 (계좌 정보·장례식장 정보 화면). 라이트에서 입력창의 경계는 **면이 아니라 테두리**다 → --ds-field-bg / --ds-field-line 을 만들어 §9-3 에서 §9-3-B 로 분리하고, 공용 CSS 원본과 같은 "흰 배경 + var(--ds-border) 테두리"로 되돌렸다. ⚠️ §5 패턴 F(`input[type="text"]` = 0,1,1)가 §9(`body input` = 0,0,2)보다 특이도가 높아 **실제 값은 §5 가 정한다.** 두 곳을 같이 고쳐야 화면이 바뀐다 — 한쪽만 고치면 무반응이라 원인을 못 찾는다 ② **빈소 머리띠를 테마색 띠로** 되돌렸다 — 흰 카드로 두면 아래 정보 카드들과 구분이 없어 "이 부고장이 어디인가"가 안 잡힌다. --ds-on-band* 신설(띠 위 글자). 다크에서는 --ds-band-bg 가 #2c2c2e 라 흰 판이 되지 않는다 3.0.1 (2026-08-12) 라이트 전환에서 드러난 **흰 배경 이미지 문제** 2건. ① 프로필·텍스트 이미지는 알파 채널이 없는 WebP(VP8 lossy)라 **불투명 흰 사각형**이다. 그래서 공용 CSS 가 원래 `.thumb{background:#fff}` 로 흰색을 박아 뒀는데, 3.0.0 의 §9-3 이 그 면을 회색(--ds-surface-2)으로 덮어 **이미지 둘레에 사각 경계**가 드러났다(템플릿 선택 화면 썸네일·미리보기). → §9-3-A 를 신설해 `.thumb`·`.compact-grid .thumb`· `.tpl-photo__thumb`·`.bugo-preview` 를 --ds-media-bg(흰색)로 되돌렸다. 구분은 배경이 아니라 테두리가 한다 ② `.public-bugo-portrait` 의 `background: transparent` 덮어쓰기를 제거 — 그 배경은 장식이 아니라 **액자 이미지 자체**여서, 라이트에서 지우면 영정사진을 올린 부고장의 액자가 사라진다 ⚠️ 부고장 열람(share)의 심볼은 문제가 없었다 — `.public-bugo-hero-card` 위에 **바로** 놓이고 그 카드는 이미 흰색이기 때문이다. 경계가 생기는 기준은 화면이 아니라 **"카드 위인가, 카드 안 한 단계 들어간 면인가"** 다 3.0.0 (2026-08-12) ⭐ **화면을 다크/라이트 두 종류로 나눈다.** 홈은 그대로 그래파이트 다크, 부고장 만들기·관리·검색, 장례식장 검색, 장례정보, 문의하기 등 **서브 페이지는 전부 라이트**로 뒤집었다. 오래 읽고 입력하는 화면에서 다크가 눈에 잘 안 띈다는 사용자 판단이다. ⛔ 뒤집는 방법이 중요하다 — §9(약 540줄)의 선택자는 **하나도 복제하지 않았다.** §9 규칙이 전부 `--ds-*` 토큰으로 쓰여 있어서, :root 의 토큰 값만 라이트로 바꾸면 §9 가 통째로 따라온다. 홈은 home-bugopage.css 가 `html:root` 로 다크 값을 되돌린다 (그 파일은 홈에서만 로드된다 — 이 분리의 유일한 축이다). · 신설 `--ds-on-accent` — 주 버튼 **위**의 글자색. §9 에 리터럴 `#000` 으로 박혀 있던 자리를 전부 이 토큰으로 바꿨다. 다크에서 #000(흰 버튼 위 검은 글자), 라이트에서 #fff(검은 버튼 위 흰 글자). 대상이 전부 `background: var(--color-primary)` 인 것을 공용 CSS 에서 하나씩 대조해 확인하고 바꿨다. · 신설 `--chrome-*`(§0-B) — 헤더·푸터·플로팅 메뉴는 **어느 화면에서도 다크**여야 하므로 `--ds-*` 를 쓰면 안 된다. 고정 다크 토큰을 따로 뒀다. §6·§7 이 이 토큰만 쓰도록 바꾸고, home.css 가 `--home-ink` · `--home-muted` 로 칠하던 헤더 글자·구분선·글라이더도 여기서 덮는다 (안 덮으면 라이트 토큰이 흘러들어가 **검은 헤더에 검은 글자**가 된다) 2.1.1 (2026-08-12) 2.1.0 의 상향 폭이 **너무 작아 여전히 검정으로 보인다**는 지적을 받고 다시 올렸다. #17171a/#232328/#303036 → #1e1e21/#2b2b2f/#3a3a3f. ⚠️ 교훈: 다크에서 23/255 정도의 상향은 눈에 안 잡힌다. 픽셀로 재면 "바뀌었다"고 나오지만 사람 눈에는 그대로 검정이다 — 가독성 조정은 측정값이 아니라 **화면을 보고** 판단할 것. 푸터(--ds-bg-alt)는 페이지보다 한 단계 낮춰 바닥으로 읽히게 바꿨다. 2.1.0 (2026-08-12) 표면 사다리를 한 칸 올려 "작업 화면" 명도로 조정 — 본문·보조 글자도 함께 상향(보조 문구 대비 4.6:1 → 약 6.6:1). 부고장 만들기·관리·검색, 장례식장 검색, 장례정보, 문의하기처럼 오래 읽고 입력하는 화면에서 순수 검정이 가독성을 떨어뜨린다는 피드백을 반영했다. ⛔ 홈은 예외 — home-bugopage.css 가 순수 검정으로 되돌린다(§1 주석) 2.0.0 (2026-08-12) 화이트 클린 + 딥 슬레이트(#2f4157) → DS09 그래파이트 프리미엄 전면 재설계. 사이트 전체가 다크로 바뀐다. 변수 계약은 그대로 유지하되 값만 다크로 바꾸고, 공용 CSS 에 리터럴로 박혀 있는 밝은 값은 아래 §9 에서 사이트 한정으로 덮는다. 1.0.0 (2026-07-31) 버전 헤더 도입 시점 상태 (화이트 클린 + 딥 슬레이트 블루) ============================================================================ */ /* ============================================================================ 00. 웹폰트 — Pretendard, webworks.co.kr 중앙 호스팅 (css-standard.md §14) ============================================================================ - 실제 쓰는 굵기만 선언한다. 선언하지 않은 굵기는 요청 자체가 없고, 선언해도 그 굵기를 쓰는 글자가 화면에 없으면 내려받지 않는다. 400 본문 / 500 히어로 제목·강조 / 700 섹션 제목·버튼 - font-display: swap — 폰트가 오기 전에는 --font-sans 뒤의 시스템 폰트로 먼저 그리고 도착하면 바꿔 끼운다. 글자가 비어 보이는 구간(FOIT)이 없다. - 파일은 각 프로젝트 서버에 복사하지 않는다(§14.3). CORS · 1년 immutable 캐시가 중앙 서버에 잡혀 있다(2026-09-13 curl 로 확인). - 이 파일은 사이트 전 페이지에서 첫 번째로 로드되므로 별도 pretendard.css 나 header.php 수정이 필요 없다. ============================================================================ */ @font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://webworks.co.kr/fonts/pretendard/Pretendard-Regular.woff2") format("woff2"); } @font-face { font-family: "Pretendard"; font-weight: 500; font-style: normal; font-display: swap; src: url("https://webworks.co.kr/fonts/pretendard/Pretendard-Medium.woff2") format("woff2"); } @font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://webworks.co.kr/fonts/pretendard/Pretendard-Bold.woff2") format("woff2"); } /* ============================================================================ 0. ⭐ 이 테마는 화면을 두 종류로 나눈다 — 먼저 읽을 것 (3.0.0) ============================================================================ ┌ 홈(/) … 그래파이트 다크. 그라데이션 무대 + 제품 사진이 서는 "얼굴" └ 그 외 전 화면 … 라이트. 오래 읽고 입력하는 "작업 화면" (부고장 만들기·작성·관리·검색, 장례식장 검색, 장례정보, 문의하기, 정책 문서, 관리자 화면) 헤더·푸터·플로팅 메뉴는 **양쪽 모두 다크**다. 브랜드 인상을 잡아 주는 띠라 본문 명암과 함께 흔들리면 안 된다. ── 어떻게 나누는가 (이 파일의 핵심 설계) ──────────────────────────────────── 이 파일 아래쪽 §9(약 540줄)는 공용 CSS 의 밝은 리터럴을 다크로 덮는 규칙들인데, **값이 전부 `--ds-*` 토큰으로 쓰여 있다.** 그래서 화면을 뒤집을 때 선택자를 복제할 필요가 없다 — **토큰 값만 바꾸면 §9 전체가 따라온다.** ① 이 파일의 `:root` → **라이트** 값 (= 기본값. 서브 페이지 전부) ② home-bugopage.css 의 `html:root` → **다크** 값으로 되돌림 (= 홈만) 그 파일은 views/sites/bugopage/home.php 에서만 로드되고, 이 파일보다 뒤에 오며 `html:root`(0,1,1) 라 `:root`(0,1,0) 를 이긴다. ③ 헤더·푸터는 아래 §0-B `--chrome-*` → 고정 다크. ①②와 무관하게 안 흔들린다 ⛔ 그래서 **토큰을 새로 만들면 home-bugopage.css §0 에도 다크 값을 반드시 추가**해야 한다. 빠뜨리면 홈에서 그 토큰만 라이트로 남아 검정 화면에 흰 판이 하나 뜬다. 두 파일은 짝이다. ⛔ §9 에 색을 **리터럴로 적지 말 것.** 리터럴은 토큰 전환을 타지 않아 한쪽 화면에서만 깨지고, 그 깨짐은 HTTP 200 으로는 절대 안 잡힌다. 필요하면 토큰을 새로 만든다. ============================================================================ */ /* ============================================================================ 0-B. 크롬(헤더·푸터) 고정 다크 토큰 — 화면 종류와 무관하다 ============================================================================ ⚠️ 헤더·푸터 규칙에서 `--ds-*` 를 쓰면 안 된다. 서브 페이지에서 `--ds-*` 가 라이트로 바뀌므로 **검은 헤더에 검은 글자**가 된다. 여기 토큰만 쓸 것. (home.css 가 `--home-ink`·`--home-muted`·`--home-line` 으로 칠하는 부분도 §6 에서 이 토큰으로 덮는다 — 그 토큰들은 본문용이라 라이트를 따라가기 때문이다) ============================================================================ */ :root { --chrome-bg: #131316; /* 모바일 헤더·오프캔버스 메뉴 판 */ --chrome-bg-alt: #161619; /* 푸터 */ --chrome-surface: #2b2b2f; /* 햄버거 버튼 */ --chrome-accent: #ffffff; /* 헤더 주 CTA(흰 알약) */ --chrome-accent-dim: #e5e5e7; --chrome-on-accent: #000000; /* 흰 알약 위 글자 */ --chrome-text: #ffffff; --chrome-text-muted: rgba(255, 255, 255, .74); --chrome-border: rgba(255, 255, 255, .14); --chrome-border-strong: rgba(255, 255, 255, .32); --chrome-ring: rgba(255, 255, 255, .45); /* 현재 페이지 링 */ --chrome-glider: rgba(255, 255, 255, .10); /* 글라이딩 필 */ } /* ============================================================================ 1. 원색 — **라이트가 기본값이다** (홈은 home-bugopage.css 가 다크로 되돌린다) ============================================================================ 아래 §2 의 프로젝트 계약 변수는 전부 이 값들을 가리킨다. 색을 조정할 일이 생기면 여기만 고치면 되고, §2 의 매핑은 건드리지 않는다. ★ 라이트에서도 DS09 의 뼈대는 그대로다 — 무채색만 쓰고, 그림자 대신 명도 계단과 테두리로 깊이를 만들고, 브랜드 색을 새로 들이지 않는다. ★★ 다만 **한 가지가 뒤집힌다.** 다크에서 "가장 밝은 것 = 주 행동(흰 버튼)"이었다면, 라이트에서는 "가장 **어두운** 것 = 주 행동(검은 버튼)"이다. 그래서 --ds-accent 는 라이트에서 거의 검정이고, 그 위에 얹는 글자(--ds-on-accent)는 흰색이다. 이 두 토큰이 짝으로 뒤집히기 때문에 §9 의 버튼들이 자동으로 맞아떨어진다. ============================================================================ */ :root { /** * 브라우저에게 이 문서의 명암을 알린다. * * ⚠️ 이 한 줄이 없으면 스크롤바·select 드롭다운 목록·날짜 선택기·자동완성 배경이 * 우리 CSS 로 닿지 않는 채 OS 기본값으로 남는다. 부고장 작성 화면은 날짜·시간 * 입력이 많아 특히 눈에 띈다. (홈은 home-bugopage.css 가 dark 로 되돌린다) */ color-scheme: light; /** * ── 배경 (무채색 4단계) ── * * 라이트에서는 계단이 "밝기"가 아니라 **흰색에서 얼마나 떨어져 있나**로 바뀐다. * 페이지(옅은 회색) → 카드(순백, 그래서 떠 보인다) → 카드 안 요소(다시 옅은 회색) * 카드가 흰색이어야 부고장·목록·폼이 종이처럼 읽힌다. */ --ds-bg: #f1f1f4; /* 페이지 */ --ds-bg-alt: #e7e7ec; /* 표 헤더 등 (푸터는 --chrome-bg-alt 를 쓴다) */ --ds-surface: #ffffff; /* 카드·패널 기본 */ --ds-surface-2: #f4f4f7; /* 입력창, 카드 위 카드, 눌림 상태 */ /* ── 히어로 (홈 전용. 라이트 화면에는 히어로가 없다) ── */ --gradient-hero: linear-gradient(155deg, #5c5c62 0%, #303034 42%, #0f0f11 100%); --overlay-scrim: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.75) 100%); /* ── 악센트 = 주 행동. 라이트에서는 "가장 어두운 것" ── */ --ds-accent: #17171a; --ds-accent-rgb: 23, 23, 26; /* Bootstrap --bs-primary-rgb 매핑용 */ --ds-accent-dim: #33333a; /* hover */ --ds-accent-soft: rgba(0, 0, 0, .05); /* 고스트 버튼 배경 */ --ds-accent-soft-2: rgba(0, 0, 0, .09); /* 그 hover */ --ds-accent-soft-line: rgba(0, 0, 0, .14); /* 그 테두리 */ --ds-accent-ring: rgba(0, 0, 0, .32); /* 현재 페이지 링 등 */ /** * ★ 악센트 **위**에 얹는 글자·아이콘. 리터럴로 적으면 화면을 뒤집을 때 반드시 깨진다. * (다크 #000 ↔ 라이트 #fff) */ --ds-on-accent: #ffffff; --ds-on-accent-soft: rgba(255, 255, 255, .18); /* 악센트 띠 위의 반투명 버튼 */ /** * ★ 흰 글자를 **리터럴로** 박아 둔 머리띠 배경(§3 --search-card-head-bg). * 공용 CSS 가 `color:#fff` 를 리터럴로 쓰므로 이 면은 어느 화면에서도 어두워야 한다. * 라이트에서는 악센트(거의 검정), 다크에서는 표면 한 단계 위(#2c2c2e). * ⛔ 라이트에서 이걸 밝은 회색으로 두면 **회색 위 흰 글자**가 되어 제목이 사라진다 * (3.0.0 첫 렌더에서 실제로 났다 — 부고장 검색·장례식장 검색·부고장 관리 3면). */ --ds-band-bg: var(--ds-accent); /** * ★ **불투명 흰 배경 이미지를 담는 면**은 흰색이어야 한다. * 프로필·텍스트 이미지(uploads/profile-images · text-images)는 전부 * 알파 채널이 없는 WebP(VP8 lossy)라 **어떤 배경에 올려도 흰 사각형이 남는다.** * 그래서 공용 CSS 가 원래 `.thumb{background:#fff}` 로 흰색을 박아 둔 것이고, * 이 면을 회색으로 바꾸면 이미지 둘레에 사각 경계가 그대로 드러난다 * (3.0.0 에서 §9-3 으로 덮었다가 실제로 났다 — 템플릿 선택 화면 썸네일·미리보기). * ⛔ 카드 안 요소라고 --ds-surface-2 를 주지 말 것. 구분은 테두리로 한다. */ --ds-media-bg: #ffffff; /** * ★ 입력창 — 라이트에서는 **면이 아니라 테두리**가 경계다. * 흰 카드 위에 옅은 회색 면을 얹으면 둘 다 안 보인다(§9-3-B 주석 참조). */ --ds-field-bg: #ffffff; --ds-field-line: var(--ds-border); /* 테마색 띠(--ds-band-bg) 위에 얹는 글자 — 띠가 어두우므로 흰 계열 */ --ds-on-band: #ffffff; --ds-on-band-soft: rgba(255, 255, 255, .78); --ds-on-band-line: rgba(255, 255, 255, .20); /** * ── 텍스트 계층 ── * 흰 카드(#fff) 위 대비: text 15.9:1 · soft 11.5:1 · muted 6.6:1 — 모두 AA 이상. */ --ds-text: #17171a; /* 제목·수치·CTA */ --ds-text-soft: #33333a; /* 본문 */ --ds-text-muted: #5f5f68; /* 설명·캡션 */ --ds-text-dim: #86868f; /* 라벨·저작권·placeholder */ /* ── 테두리 ── */ --ds-border: #dcdce2; --ds-border-soft: rgba(0, 0, 0, .12); --ds-border-strong: rgba(0, 0, 0, .30); /** * ── 효과 ── * DS09 는 일반 카드에 그림자를 쓰지 않는다. 라이트에서도 유지하고, 모달처럼 * "떠 있어야 하는 것"에만 --ds-shadow-lg 를 쓴다. 다크의 rgba(0,0,0,.6) 을 * 그대로 쓰면 흰 배경에서 먹구름이 된다. */ --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, .16); --ds-focus-ring: rgba(0, 0, 0, .16); --ds-select-ring: rgba(0, 0, 0, .10); /* 선택된 카드 바깥 링 */ --ds-scrim-bar: rgba(255, 255, 255, .92); /* 하단 고정 메뉴 바 */ --ds-tile-filter: none; /* 지도 타일 — 라이트에서는 손대지 않는다 */ /** * ── 시맨틱 (이 테마에서 색이 허용되는 유일한 자리) ── * 다크용 iOS 계열 채도 높은 값(#ff453a 등)을 흰 배경에 그대로 쓰면 대비가 3:1 아래로 * 떨어져 읽히지 않는다. 라이트에서는 한 단계 어두운 값을 쓴다. */ --ds-success: #1a7f37; --ds-warning: #9a6700; --ds-danger: #c62828; --ds-info: #0b62d6; --ds-danger-bg: rgba(198, 40, 40, .07); --ds-danger-line: rgba(198, 40, 40, .28); --ds-warning-bg: rgba(154, 103, 0, .10); } /* ============================================================================ 2. 프로젝트 변수 계약 — 이름은 그대로, 값만 다크로 ============================================================================ 공용 CSS(home.css · bugo-*.css · funeral-info.css · admin.css)가 쓰는 변수 이름은 6개 사이트가 공유하는 계약이라 바꾸지 않는다. 이름은 밝은 테마 기준으로 붙어 있어서 다크에서는 뜻이 뒤집히는 것이 두 개 있다 — 아래 ★ 두 줄을 반드시 읽을 것. ============================================================================ */ :root { /* ── 배경 ── */ --color-bg: var(--ds-bg); --color-bg-light: var(--ds-bg-alt); /** * ★★ --color-white 는 "흰색"이라는 이름과 달리 두 가지 뜻으로 쓰인다. * 이 테마에서는 어느 화면에서든 그 둘이 같은 값으로 만난다. * * ① 카드·패널의 표면색 → 배경 위에 얹히는 면 * ② 주 버튼 위에 얹는 글자색 → --color-primary 버튼 위 글자 * * 라이트에서는 둘 다 #ffffff (흰 카드 / 검은 버튼 위 흰 글자), * 다크에서는 둘 다 #1c1c1e (검은 카드 / 흰 버튼 위 검은 글자). * 공용 CSS 의 `background: var(--color-white)` 70여 곳이 이 한 줄로 전부 표면이 된다. * * ⚠️ 그래서 이 값을 리터럴로 "고치면" 안 된다 — 한쪽 화면이 통째로 무너진다. */ --color-white: var(--ds-surface); /** * ★★ --color-primary 는 이 테마에서 브랜드 색이 아니라 **악센트**다. * 색이 없는 테마라 "가장 강조되는 것" = 라이트에서는 가장 어두운 것, * 다크에서는 가장 밝은 것이다(DS09 §9). * * 공용 CSS 의 `background: var(--color-primary); color: #fff` 조합은 * 라이트에서 저절로 맞고(검은 버튼 + 흰 글자), 다크에서는 흰 배경에 흰 글자가 * 되므로 §9-1 이 글자만 --ds-on-accent 로 덮는다. (bugo-create.css:345 주석이 * "밝은 색을 primary 로 쓰는 사이트가 생기면 이 규칙이 깨진다"고 예고해 둔 그 문제다) */ --color-primary: var(--ds-accent); --color-primary-light: var(--ds-accent-dim); --color-primary-dark: var(--ds-accent-dim); /* ── 링크 ── */ --color-link: var(--ds-text); --color-link-dark: var(--ds-text-soft); /* ── 브랜드 파생 (은은한 배경·테두리) ── */ --color-primary-soft: var(--ds-accent-soft); --color-primary-soft-hover: var(--ds-accent-soft-2); --color-primary-soft-border: var(--ds-accent-soft-line); --color-primary-border: var(--ds-border-strong); /* ── 표면 ── */ --color-surface-soft: var(--ds-surface); --color-surface-mute: var(--ds-surface-2); /* ── 텍스트 ── */ --color-text: var(--ds-text); --color-text-light: var(--ds-text-soft); --color-text-muted: var(--ds-text-muted); --color-placeholder: var(--ds-text-dim); /* ── 테두리 ── */ --color-border: var(--ds-border); --color-border-light: var(--ds-border-soft); /** * ── 시맨틱 ── * 어두운 배경용으로 채도를 올린 값이다. 라이트 테마용 #d4453a·#25864b 를 그대로 * 쓰면 검정 위에서 탁해 보인다(DS09 §1). --color-danger 는 폼 에러에 실제로 쓰이는 * 필수 토큰이라 빠뜨리면 에러가 빨강이 아닌 흰색으로 렌더링된다. */ --color-danger: var(--ds-danger); --color-warning: var(--ds-warning); --color-warning-bg: var(--ds-warning-bg); --color-success: var(--ds-success); --color-sold: var(--ds-text-dim); /** * 원래 어느 테마에도 정의돼 있지 않던 변수들. 공용 CSS 가 `var(--color-accent)` · * `var(--color-accent-deep)` · `var(--color-accent-text)` 를 쓰는데(정책 문서 페이지, * 부고장 공유 화면) 정의가 없어 폴백이나 초기값으로 떨어지고 있었다. * 여기서 정의해 3호에서는 의도한 색이 나오게 한다. */ --color-accent: var(--ds-accent); --color-accent-deep: var(--ds-text-muted); --color-accent-text: var(--ds-text-soft); /** * ── 그림자 ── * DS09 는 일반 카드에 그림자를 쓰지 않는다(§2). 검정 위 검정 그림자는 보이지 않고 * 억지로 진하게 넣으면 카드 주변만 지저분해진다. 대신 --shadow-lg 만 남겨 * 모달처럼 "떠 있어야 하는 것"에 쓴다. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: var(--ds-shadow-lg); /** * 히어로를 물고 올라오는 카드(.bp-quick — home-bugopage.css §5-1) 전용. * ⛔ **정의가 아예 없어서 `box-shadow: var(--shadow-lift)` 선언이 통째로 무효였다** * (2026-09-07 발견). 어느 테마에도 없던 이름이라 bugopage.com 라이브에서도 * 그림자가 안 나오고 있었다. 변수 미정의는 에러가 아니라 **조용한 누락**이다. * 위 §2 의 "일반 카드에 그림자를 쓰지 않는다"에 어긋나지 않는다 — 이 카드는 어두운 * 히어로 위로 -24px 올라타는 **밝은 면**이라 정확히 "떠 있어야 하는 것"이다. */ --shadow-lift: var(--shadow-lg); --focus-glow: 0 0 0 3px var(--ds-focus-ring); /* ── 모서리 — DS08(직각)과 정반대 축. 넉넉한 라운드가 프리미엄 인상의 절반이다 ── */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ── 타이포 스케일 (기존 계약 유지) ── */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 15px; --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 22px; --fs-4xl: 28px; --fs-5xl: 32px; --fs-hero: 42px; /* Pretendard 가 없는 환경에서도 무너지지 않게 시스템 폰트로 이어 받는다 */ --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; /* ── Bootstrap 5 매핑 ── */ --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-primary: var(--color-primary); --bs-primary-rgb: var(--ds-accent-rgb); --bs-border-color: var(--color-border); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); --bs-link-color: var(--color-link); --bs-link-hover-color: var(--color-link-dark); } /* ============================================================================ 3. 나중에 로드되는 파일이 정의하는 변수 덮어쓰기 ============================================================================ ⚠️ 이 파일은 header.php 에서 **가장 먼저** 로드된다(theme → home.css → 페이지 CSS). 그래서 home.css 의 `:root{--home-bg:...}` 나 bugo-common.css 의 `:root{--bugo-btn-bg:...}` 는 소스 순서상 뒤에 와서 이긴다. 같은 `:root` 로는 못 덮는다. `html:root` 는 요소 선택자 하나가 더 붙어 특이도가 (0,1,1) 이라 (0,1,0) 인 `:root` 를 **소스 순서와 무관하게** 이긴다. 아래 블록이 그 용도다. ⚠️ --home-section · --home-gutter 는 여기서 건드리지 않는다. home.css 가 `@media (max-width:768px){:root{...}}` 로 모바일 값을 줄이는데, 여기서 덮으면 그 미디어쿼리까지 이겨 버려 모바일에서도 데스크톱 여백이 남는다. ============================================================================ */ html:root { /** * home.css 의 --page-bg 는 `color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-light))` * 인데 --color-bg-light 가 어느 테마에도 정의돼 있지 않아 계산이 무효였다. * (무효가 되면 `background: var(--page-bg)` 는 transparent 로 떨어진다 — * 정책 문서 페이지 .privacy-page 가 실제로 그 상태였다.) * 이 테마에서는 섞을 것 없이 페이지 배경 그대로 둔다(라이트/다크 양쪽 동일). */ --page-bg: var(--ds-bg); /* ── home.css 토큰 ── */ --home-bg: var(--ds-bg); --home-ink: var(--ds-text); --home-muted: var(--ds-text-muted); --home-soft: var(--ds-surface); --home-line: var(--ds-border-soft); /** * --home-accent 는 밝은 테마에서 금색(#f2bd48)이었다. 로고 마크 테두리, 현재 페이지 * 링, 모바일 메뉴의 금색 막대에 쓰인다. DS09 에는 금색이 없으므로 "밝기"로 바꾼다 — * 색을 하나 들이는 순간 무채색이라는 전제가 깨진다(DS09 §1). * * ⚠️ 이 토큰은 **본문용**이다. 헤더 안에서 같은 토큰을 쓰는 자리(로고 마크·현재 페이지 * 링·모바일 구분선)는 §6 이 --chrome-* 로 따로 덮는다 — 안 덮으면 서브 페이지에서 * 라이트 값(거의 검정)이 검은 헤더로 흘러들어가 보이지 않는다. */ --home-accent: var(--ds-accent-ring); --home-radius: var(--radius-lg); --home-radius-sm: var(--radius-md); --home-shadow: none; --home-shadow-hover: none; /* DS09 §5-A 컨테이너 폭. 헤더·푸터 내부 폭이 이 값을 따른다 */ --home-max: 1140px; /* ── bugo-common.css 의 보조 버튼 토큰 ── */ --bugo-btn-bg: var(--ds-accent-soft); --bugo-btn-bg-hover: var(--ds-accent-soft-2); --bugo-btn-color: var(--ds-text); --bugo-btn-border: var(--ds-border-strong); /** * bugo-search.css 는 검색 카드 머리띠 배경으로 --color-primary-dark 를 쓰고, * 그 위 글자를 **`#fff` 리터럴**로 박아 두었다(bugo-search.css:60·65·72). * 글자를 못 바꾸므로 **띠는 어느 화면에서도 어두워야 한다** → --ds-band-bg. * (다크에서 primary-dark 는 #e5e5e7 거의 흰색이라 그대로 두면 흰 글자가 사라진다) */ --search-card-head-bg: var(--ds-band-bg); } /* ============================================================================ 4. 기본 리셋 + 타이포 ============================================================================ */ /** * ⚠️ html 에 배경을 주는 이유 — **푸터 아래 빈 화면 색**이다. * * body 에만 배경이 있으면 그 색이 캔버스(뷰포트 전체)로 전파된다. 내용이 짧은 페이지 * (문의하기·장례정보 목록 등)에서는 검은 푸터 **아래로 밝은 회색 띠**가 길게 남아 * 페이지가 잘린 것처럼 보인다. html 에 배경을 주면 캔버스는 이 색이 되고 body 배경은 * 자기 박스에만 칠해지므로, 푸터가 화면 바닥까지 이어지는 것처럼 읽힌다. * 다크였을 때는 body 도 푸터도 어두워 티가 안 났고, 라이트로 뒤집으면서 드러났다. */ html { -webkit-text-size-adjust: 100%; background: var(--chrome-bg-alt); } /** * ⚠️ `html body` 로 쓴다 — `body` 하나로는 못 이긴다. * * bugo-common.css:34 와 admin.css:37 이 `body{color:#1a1a1a}` 로 **거의 검정 글자**를 * 박아 두었고, 두 파일 모두 이 테마보다 뒤에 로드된다. 특이도가 같으면(0,0,1) 뒤가 * 이기므로 `body{color:...}` 로는 밀린다. `html body`(0,0,2)라야 이긴다. * * ⛔ 이걸 빠뜨리면 부고장 공유·검색·관리 화면의 **본문이 통째로 사라진다** * (검정 카드 위 검정 글자). 상주 이름·일정·주소가 전부 안 보였다 — * 실제 렌더로 확인하고 잡은 문제다. HTTP 200 으로는 절대 안 잡힌다. */ html body { margin: 0; background: var(--color-bg); color: var(--ds-text-soft); /* 본문은 제목보다 한 단계 낮춘다 — 최대 대비는 장문에 과하다 */ font-family: var(--font-sans); font-size: var(--fs-xl); line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-link-dark); text-decoration: none /* 2026-09-07 호버 밑줄 제거 — 사용자 선호 */; } h1, h2, h3, h4, h5, h6 { color: var(--ds-text); font-weight: 700; line-height: 1.3; margin: 0 0 0.5em; letter-spacing: -0.02em; } ::placeholder { color: var(--color-placeholder); } ::-webkit-input-placeholder { color: var(--color-placeholder); } /* 이미지·지도 타일이 검정 위에서 그대로 뜨면 눈이 찔린다 — 아주 살짝만 낮춘다 */ img { max-width: 100%; } /* ============================================================================ 5. 컴포넌트 패턴 (DS09 §7) ============================================================================ */ /* ── 패턴 C: 기본 카드 — 그림자 없음, 명도로만 떠 있게 ── */ .card-base { background: var(--ds-surface); border: 1px solid var(--ds-border-soft); border-radius: var(--radius-md); box-shadow: none; padding: 1.5rem; transition: border-color 0.2s ease, background 0.2s ease; } /* hover 는 부양이 아니라 "표면 한 단계 밝게"(DS09 §10 비교표) */ .card-base:hover { border-color: var(--ds-border-strong); } .card-soft { background: var(--ds-surface); border: none; border-radius: var(--radius-md); padding: 1.5rem; } /* ── 패턴 D: 활성/선택 카드 — 색이 아니라 테두리 밝기로 표현 ── */ .card-base.is-active, .card-soft.is-active { border: 1px solid var(--ds-border-strong); } /* ── 히어로 / CTA — DS09 는 채운 브랜드색 대신 그라데이션 스테이지 ── */ .hero-primary { background: var(--gradient-hero); color: var(--ds-text); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem; } .hero-primary h1, .hero-primary h2 { color: var(--ds-text); } .hero-primary .hero-sub { color: var(--ds-text-soft); } .hero-primary .hero-badge { display: inline-block; background: var(--ds-accent-soft); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-size: var(--fs-sm); } /* ── 패턴 F: 폼 입력 ── ⚠️ 이 블록의 선택자는 `input[type="text"]`(0,1,1) 처럼 **§9 의 `body input`(0,0,2)보다 특이도가 높다.** 그래서 폼 입력창의 실제 값은 여기서 정해진다 — §9-3-B 와 값을 **반드시 같이** 움직일 것. 한쪽만 고치면 화면에는 아무 변화가 없어 원인을 못 찾는다. */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="url"], textarea, select { width: 100%; background: var(--ds-field-bg); color: var(--ds-text); border: 1px solid var(--ds-field-line); border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; font-size: var(--fs-lg); line-height: 1.5; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ds-border-strong); box-shadow: var(--focus-glow); } .form-control[readonly], input[readonly] { background: var(--ds-surface-2); color: var(--ds-text-muted); } .form-control.is-invalid, input.is-invalid { border-color: var(--color-danger); } .form-error { color: var(--color-danger); font-size: var(--fs-sm); margin-top: 0.25rem; } .form-label { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--ds-text); margin-bottom: 0.4rem; } .form-required::after { content: '*'; color: var(--color-danger); margin-left: 2px; } /* ── 버튼 ── */ .btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.625rem 1.4rem; border-radius: var(--radius-pill); /* DS09 버튼은 알약 */ border: 1px solid transparent; font-size: var(--fs-xl); font-weight: 600; line-height: 1.4; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* 패턴 A — Primary 버튼. 화면에서 배경과 가장 멀리 떨어진 면이 곧 주 행동이다 (라이트에서는 검은 알약 + 흰 글자 / 다크에서는 흰 알약 + 검은 글자) */ .btn-primary { background: var(--ds-accent); color: var(--ds-on-accent); border-color: var(--ds-accent); } .btn-primary:hover { background: var(--ds-accent-dim); border-color: var(--ds-accent-dim); color: var(--ds-on-accent); } .btn-primary:active { background: var(--ds-accent-dim); } /* 패턴 B — 보조 버튼(고스트) */ .btn-outline { background: transparent; color: var(--ds-text); border-color: var(--ds-border-strong); } .btn-outline:hover { background: var(--ds-accent-soft); color: var(--ds-text); } .btn-secondary { background: var(--ds-surface-2); color: var(--ds-text); border-color: transparent; } .btn-secondary:hover { background: var(--ds-border); } /* 패턴 H — 비활성 */ .btn-disabled, .btn:disabled { background: var(--ds-surface); color: var(--ds-text-dim); border-color: transparent; cursor: not-allowed; } .btn-lg { padding: 0.85rem 1.7rem; font-size: var(--fs-2xl); } /* ── 경고 배너 ── */ .alert-warning-banner { background: var(--color-warning-bg); border-left: 4px solid var(--color-warning); border-radius: var(--radius-sm); padding: 0.875rem 1rem; color: var(--ds-text-soft); font-size: var(--fs-md); } .alert-warning-banner .icon { color: var(--color-warning); margin-right: 0.4rem; } /* ── 푸터 ── ⚠️ 푸터는 라이트 화면에서도 다크다 — 여기서 --ds-* 를 쓰면 서브 페이지에서 어두운 푸터 위에 어두운 글자가 된다. --chrome-* 만 쓴다(§0-B). */ .site-footer { background: var(--chrome-bg-alt); color: var(--chrome-text-muted); padding: 2rem 1rem 1.5rem; margin-top: 3rem; } .site-footer a { color: var(--chrome-text-muted); } .site-footer a:hover { color: var(--chrome-text); text-decoration: none; } .site-footer .footer-divider { border: 0; border-top: 1px solid var(--chrome-border); margin: 1.5rem 0; } .site-footer .footer-copyright { color: var(--chrome-text-muted); font-size: var(--fs-sm); } /* ── 패턴 G: 상태 필 / 배지 ── */ .badge-pill { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--ds-accent-soft); color: var(--ds-text); font-size: var(--fs-sm); font-weight: 600; } /* ── 네비게이션 ── (헤더 안이므로 --chrome-* — 위 푸터와 같은 이유) */ .site-nav { background: transparent; border-bottom: 1px solid var(--chrome-border); padding: 0.75rem 1rem; position: sticky; top: 0; z-index: 100; } .site-nav .brand { color: var(--chrome-text); font-weight: 800; font-size: var(--fs-2xl); text-decoration: none; letter-spacing: -0.03em; } .site-nav .brand:hover { color: var(--chrome-text); text-decoration: none; } /* ── 유틸리티 ── */ .container-app { max-width: 720px; margin: 0 auto; padding: 0 1rem; } .text-muted { color: var(--ds-text-muted); } .text-light { color: var(--ds-text-soft); } .fs-hero { font-size: var(--fs-hero); } .fs-stat { font-size: var(--fs-5xl); } .section-title { font-size: var(--fs-4xl); margin-bottom: 1rem; } .mt-section { margin-top: 2.5rem; } .mb-section { margin-bottom: 2.5rem; } @media (max-width: 576px) { .fs-hero { font-size: 32px; } .fs-stat { font-size: 24px; } .section-title { font-size: 22px; } .hero-primary { padding: 2rem 1.25rem; } } /* ============================================================================ 6. 공용 헤더 — 어느 화면에서도 다크 (--chrome-* 만 쓴다) ============================================================================ ★ `body ` 접두사가 붙는 이유: 이 파일은 home.css 보다 **먼저** 로드되므로 접두사 없이 같은 선택자를 쓰면 home.css 에 밀린다. `body .x`(0,1,1)는 `.x`(0,1,0)를 소스 순서와 무관하게 이긴다. 아래 §7~§9 도 같은 이유다. ⛔⛔ 여기에 `--ds-*` 를 쓰면 안 된다. 서브 페이지에서 --ds-* 는 라이트(거의 검정)라 **검은 헤더에 검은 글자**가 된다. 3.0.0 에서 이 절의 모든 값을 --chrome-* 로 옮겼다. ⚠️ home.css 는 헤더 글자·구분선·링을 `--home-ink` · `--home-muted` · `--home-line` · `--home-accent` · `--home-primary*` 로 칠한다. 그 토큰들은 **본문용**이라 서브 페이지에서 라이트를 따라간다 — 그래서 아래에서 하나씩 덮는다. 덮지 않으면 로고와 메뉴 글자가 검은 헤더 위에서 사라진다. ============================================================================ */ body .site-header { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; border-bottom: 1px solid var(--chrome-border); } /* 사이트 이름 — home.css 는 var(--home-ink) 다 (서브 페이지에서 거의 검정이 된다) */ body .site-logo, body .site-logo:hover { color: var(--chrome-text); } /* 로고 마크 — 흰 원형 (사이트 식별). 이미지 로고가 있으면 home.css 가 이걸 감춘다 */ body .site-logo::before { border: 2px solid var(--chrome-accent); border-radius: 50%; transform: none; } /* 주/보조 메뉴 사이 구분선 (home.css: var(--home-line)) */ body .site-nav__sep { background: var(--chrome-border); } /* 텍스트 메뉴 (home.css: var(--home-muted) → hover/active 는 var(--home-primary-dark)) */ body .site-nav__secondary a { color: var(--chrome-text-muted); } body .site-nav__secondary a:hover, body .site-nav__secondary a:focus-visible, body .site-nav__secondary a.active { color: var(--chrome-text); } /* 현재 페이지 링 (home.css: var(--home-accent)) */ body .site-nav__secondary a.active::before { border-color: var(--chrome-ring); } /** * 글라이딩 필 — home.css 는 `color-mix(in srgb, var(--home-primary) 7%, transparent)` 다. * 서브 페이지에서 --home-primary 가 거의 검정이 되어 **검은 헤더 위 검은 필**로 사라진다. */ body .site-nav__glider { background: var(--chrome-glider); } /** * 헤더 주 CTA — home.css 는 배경을 #1f252b 로 **리터럴**로 박아 두었다(변수가 아니라 * 여기서 값으로는 못 잡는다). 주 행동은 흰 알약 + 검은 글자다. */ body .btn-header-cta:not(.btn-header-cta--ghost) { background: var(--chrome-accent); border-color: var(--chrome-accent); color: var(--chrome-on-accent); } body .btn-header-cta:not(.btn-header-cta--ghost):hover { background: var(--chrome-accent-dim); border-color: var(--chrome-accent-dim); color: var(--chrome-on-accent); } /* 보조 CTA(고스트) — 한 화면에 흰 버튼은 하나라는 원칙을 헤더에서도 지킨다 */ body .btn-header-cta--ghost { background: transparent; border-color: var(--chrome-border-strong); color: var(--chrome-text); } body .btn-header-cta--ghost:hover { background: rgba(255, 255, 255, .10); color: var(--chrome-text); } /* 햄버거 버튼 — 막대 색은 home.css 가 var(--home-ink) 로 칠한다 */ body .nav-toggle { background: var(--chrome-surface); border-color: var(--chrome-border); } body .nav-toggle span { background: var(--chrome-text); } /** * ⚠️ 모바일 오프캔버스 메뉴 — home.css 가 768px 이하에서 헤더와 메뉴 배경을 * **흰색 리터럴(#fff)** 로 박는다. 덮지 않으면 좁은 화면에서 메뉴를 여는 순간 * 화면 전체가 흰 판으로 바뀐다(다크 테마에서 가장 눈에 띄는 파손이다). * media query 안에서 `body ` 접두사를 그대로 유지해야 이긴다. */ @media (max-width: 768px) { body .site-header { background: var(--chrome-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } body .site-nav { background: var(--chrome-bg); border-top: 1px solid var(--chrome-border); } /* 모바일 주 액션 알약 — 첫째는 흰 채움(검은 글자), 둘째부터 고스트 */ body .site-nav__primary a { border-color: var(--chrome-accent); background: var(--chrome-accent); color: var(--chrome-on-accent); } body .site-nav__primary a:hover, body .site-nav__primary a:focus-visible, body .site-nav__primary a.active { color: var(--chrome-on-accent); } body .site-nav__primary li + li a, body .site-nav__primary li + li a:hover, body .site-nav__primary li + li a:focus-visible, body .site-nav__primary li + li a.active { background: transparent; border-color: var(--chrome-border-strong); color: var(--chrome-text); } /* 현재 페이지 표식(box-shadow: var(--home-accent)) · 구분선 그라데이션 */ body .site-nav__primary a.active { box-shadow: 0 0 0 2px var(--chrome-ring); } body .site-nav__sep { background: linear-gradient(90deg, var(--chrome-ring), transparent); } /* 목록형 보조 메뉴의 아래 구분선 (home.css: var(--home-line)) */ body .site-nav__secondary a { border-bottom-color: var(--chrome-border); } } /* ============================================================================ 7. 공용 푸터 — home.css 가 #15191d 리터럴을 쓴다 ============================================================================ */ body .site-footer { background: var(--chrome-bg-alt); border-top: 1px solid var(--chrome-border); margin-top: 0; padding: 54px 0 30px; } /** * ⚠️ 푸터 로고와 링크 hover 는 home.css 에서 `color: var(--home-white)` 다. * --color-white 는 "표면색"이라 다크에서 #1c1c1e 이고, 그대로 두면 어두운 푸터 위에 * 어두운 글자가 얹혀 **거의 보이지 않는다.** 이 세 곳은 "어두운 면 위의 밝은 글자"라 * 화면 종류와 무관하게 진짜 흰색이어야 한다 → --chrome-text. */ body .footer-logo, body .footer-links a:hover, body .footer-partner-link:hover { color: var(--chrome-text); } /* 로고 이미지를 밝은 판 위에 올리던 규칙 — 어두운 푸터에서는 판이 필요 없다 */ body .footer-logo__mark { background: var(--chrome-surface); } /* ============================================================================ 8. 홈 공용 레이아웃(home.css) 다크 보정 ============================================================================ 여기 있는 선택자들은 3호 홈이 직접 쓰지는 않지만(3호는 .bp-* 로 자기 홈을 그린다), 견본 홈·정책 문서 페이지·플로팅 메뉴가 같은 파일을 읽으므로 함께 맞춘다. ============================================================================ */ /* .btn-sub 는 어두운 히어로 위의 고스트 버튼이라 글자가 진짜 흰색이어야 한다 */ body .btn-sub, body .btn-sub:hover { border-color: var(--ds-border-strong); color: var(--ds-text); } /* .btn-cta-pill 도 #1f252b 리터럴 배경 — 주 행동이므로 악센트 알약으로 */ body .btn-cta-pill { background: var(--ds-accent); color: var(--ds-on-accent); } body .btn-cta-pill:hover { background: var(--ds-accent-dim); color: var(--ds-on-accent); } /* 히어로·통계 밴드는 이미 어두운 리터럴 배경이라 글자만 흰색으로 되돌린다 */ body .hero-title, body .stats-section, body .stat-item strong { color: var(--ds-text); } /* 견본 홈의 밝은 회색 리터럴들 */ body .intro-links a { background: var(--ds-surface); border-color: var(--ds-border-soft); color: var(--ds-text); } body .intro-links a:hover { background: var(--ds-accent); color: var(--ds-on-accent); } body .feature-icon { background: var(--ds-accent-soft); color: var(--ds-text); } body .trust-item { background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-border-soft); } body .trust-item:hover { box-shadow: inset 0 0 0 1px var(--ds-border-strong); } body .trust-icon { color: var(--ds-text); } /* 절차 원형 번호 — hover 시 악센트 원 위에 같은 색 글자가 되지 않게 */ body .process-item span:hover { color: var(--ds-on-accent); } /* FAQ 문의 버튼 — hover 에 악센트 배경이 깔리므로 글자를 반대색으로 */ body .faq-contact-btn:hover, body .faq-contact-btn:focus-visible { color: var(--ds-on-accent); } /* 정책 문서 페이지 — 보조 버튼 배경이 #fff 리터럴 */ body .privacy-actions .secondary { background: var(--ds-surface-2); border-color: var(--ds-border-soft); color: var(--ds-text); } body .privacy-content .privacy-section--accent { background: var(--ds-surface-2); border-color: var(--ds-border-soft); border-left-color: var(--ds-border-strong); } body .privacy-content .privacy-section--accent .privacy-table th { background: var(--ds-border); } body .privacy-table th { background: var(--ds-bg-alt); } /** * 플로팅 메뉴 — 위로가기 버튼. 배경이 --ds-accent(검정)라 테두리는 반드시 반대색 * (--ds-on-accent, 흰색)이어야 한다. 예전에 --ds-accent 로 두었더니 배경과 테두리가 * 한 색이 되어 홈 다크 무대·푸터 위에서 알약이 통째로 묻혔다(2026-09-13 수정). * ⚠️ 플로팅 메뉴는
밖(footer.php)에 있지만 토큰은 :root 단위라 **화면 종류를 * 그대로 따라간다.** 라이트 화면에서는 검은 알약 + 흰 글자 + 흰 테두리가 된다. */ body .floating-menu__btn--top, body .floating-menu__btn--top:hover { color: var(--ds-on-accent); border-color: var(--ds-on-accent); } /* 카카오 버튼은 브랜드색이라 유일하게 건드리지 않는다 */ /* ============================================================================ 9. 부고 서비스 화면 명암 보정 (bugo-*.css · funeral-info.css · admin.css) ============================================================================ 이 파일들에는 `#fff` 와 `#111~#777` 이 **리터럴**로 230여 곳 박혀 있어 변수로는 닿지 않는다. 역할이 정확히 두 가지라 그에 맞춰 두 묶음으로 덮는다. 9-1. `background: var(--color-primary); color: #fff` → 악센트 버튼 위 글자. --ds-on-accent 로 덮는다 (다크 = 흰 버튼 위 검정 / 라이트 = 검은 버튼 위 흰색) 9-2. `background: #fff` → 카드·패널·입력창 표면. --ds-surface(카드) 또는 --ds-surface-2(카드 안 요소)로. ⛔⛔ **여기 값은 전부 토큰이어야 한다.** 이 절이 라이트/다크 양쪽에서 그대로 쓰이고, 전환은 오직 :root 토큰 값으로만 일어나기 때문이다(§0). 리터럴을 하나 적으면 그 자리만 한쪽 화면에서 깨지는데, **HTTP 200 으로는 절대 안 잡힌다.** 예외는 @media print 뿐이다 — 인쇄는 언제나 흰 종이다. ⚠️ 배경이 **리터럴 어두운 색**인 곳(#444 · #6f7780 · #6c757d · 카카오 #fee500)은 흰 글자가 그대로 맞으므로 건드리지 않는다. 여기 목록에 없는 것은 의도적으로 뺀 것이다. ============================================================================ */ /* ── 9-1. 악센트 배경 위 글자 → --ds-on-accent (배경과 반대색) ──────────────── */ body .public-bugo-map-actions a, body .public-bugo-content-head button, body .public-bugo-guestbook-form .public-bugo-content-head button, body .public-bugo-donation-modal__header, body .public-bugo-donation-modal__header h3, body .public-bugo-donation-modal__header button, body .public-bugo-sample-banner a, body .public-bugo-sample-cta a, body .public-bugo-share-symbol--message, body .public-bugo-flower-cta:hover, body .public-bugo-flower-cta:active, body .public-bugo-search-item a:hover, body .public-bugo-pagination strong, body .funeral-search-call, body .funeral-detail-actions .primary, body .section-guide__example b, body .chip.is-active, body .search-field button, body .funeral-search-box button, body .fw-chip:hover, body .fw-order-btn, body .fi-cat-btn:hover, body .fi-cat-btn.active, body .fi-pagination strong, body .fi-detail-cta, body .fi-article-body .fi-btn, body .fi-article-body .fi-btn:hover, body .admin-search button, body .admin-nav a.primary, body .admin-btn.primary, body .admin-pagination strong { color: var(--ds-on-accent); } /** * 빈소 머리띠 — 부고장 맨 위의 장례식장 이름 띠다. * 3.0.2 에서 **테마색 띠**로 되돌렸다(사용자 요청). 흰 카드로 두면 아래 정보 카드들과 * 구분이 없어 "이 부고장이 어디인가"가 첫눈에 안 잡힌다. * 공용 CSS 원본도 `background: var(--color-primary)` 였다 — 라이트에서 어두운 띠 + * 흰 글자, 다크에서 흰 띠가 되므로 다크에서만 표면으로 낮춘다. */ body .public-bugo-hall-head { background: var(--ds-band-bg); box-shadow: none; } body .public-bugo-hall-head, body .public-bugo-hall-head__name { color: var(--ds-on-band); } body .public-bugo-hall-head__room { color: var(--ds-on-band-soft); border-top-color: var(--ds-on-band-line); } /* 위 묶음 안에서 자식 글자까지 함께 검어져야 하는 것들 */ body .fi-detail-cta p, body .public-bugo-donation-modal__header * { color: var(--ds-on-accent); } /* 악센트 머리띠 위의 반투명 버튼은 머리띠와 반대색이어야 보인다 */ body .public-bugo-donation-modal__header button { background: var(--ds-on-accent-soft); } /* 장례정보 상세 CTA — 악센트 띠 안의 버튼이 또 악센트색이라 통째로 사라진다. 안쪽을 반대색으로 */ body .fi-detail-cta a { background: var(--ds-on-accent); color: var(--ds-accent); } body .fi-detail-cta a:hover { background: var(--ds-surface-2); } /* 장례정보 본문 FAQ 의 'Q' 원형 배지 — 흰 원 + 검은 글자 */ body .fi-article-body details.blog_faq summary::before { color: var(--ds-on-accent); } /* ── 9-2. 카드·패널 표면 (#fff 리터럴) → --ds-surface ─────────────────────── */ body .public-bugo-hero-card, body .public-bugo-section, body .public-bugo-empty-message, body .public-bugo-account-card, body .public-bugo-flower-sender-chip, body .public-bugo-donation-modal__dialog, body .public-bugo-example-modal__dialog, body .public-bugo-share-modal__dialog, body .public-bugo-thanks-card, body .public-bugo-search-card, body .public-bugo-search-item, body .funeral-search-item, body .funeral-search-detail, body .funeral-detail-map-card, body .public-bugo-manage-card, body .public-bugo-manage-topbar, body .public-bugo-manage-panel, body .public-bugo-stats-modal__dialog, body .public-bugo-stats-box, body .picker-card, body .preview-card, body .fw-section, body .create-card, body .section-card, body .form-card, body .bugo-card, body .location-card, body .admin-card, body .admin-stat, body .admin-empty, body .fi-card, body .fi-article, body .fi-empty { background: var(--ds-surface); border-color: var(--ds-border-soft); box-shadow: none; } /* ── 9-3. 카드 **안**에 들어가는 요소 → --ds-surface-2 ──────────────────────── 카드와 같은 표면을 카드 안에 또 쓰면 통째로 사라진다(DS09 §8-1). ⚠️ 라이트에서는 흰 카드(#fff)와 그 안 요소(#f4f4f7)의 차이가 작아 **테두리가 곧 경계**다 — 아래에서 border-color 를 함께 주는 이유이고, 빼면 입력창이 사라진다. */ body .check, body .select-card, body .compact-grid .select-card, body .tpl-photo__remove, body .mini-button, body .agree-box, body .option-box, body .notice-box, body .multi-entry, body .add-entry, body .remove-entry, body .copy-addr, body .public-bugo-preview-actions .secondary, body .public-bugo-fixed-menu .fixed-menu-btn, body .public-bugo-example-box button, body .public-bugo-guestbook-delete form, body .public-bugo-guestbook-delete button, body .public-bugo-example-modal__header button, body .public-bugo-example-modal__body button, body .public-bugo-thanks-actions button, body .public-bugo-share-option, body .public-bugo-manage-small-button, body .public-bugo-manage-actions.compact button, body .public-bugo-manage-logout.compact button, body .public-bugo-manage-stat-detail-button, body .public-bugo-pagination a, body .funeral-search-map, body .funeral-detail-actions button, body .template-modal__header button, body .bugo-template-item, body .fw-qty-btn, body .fi-cat-btn, body .fi-pagination a, body .fi-back-btn, body .fi-toc, body .fi-article-body details.blog_faq, body .admin-btn, body .admin-btn-sm, body .admin-nav a, body .admin-link-grid a, body .admin-pagination a, body .help-toc a { background: var(--ds-surface-2); color: var(--ds-text); border-color: var(--ds-border-soft); } /* 위 묶음 중 테두리가 곧 의미인 것들은 테두리를 되살린다 */ body .add-entry, body .funeral-search-map, body .public-bugo-preview-actions .secondary { border-color: var(--ds-border-strong); } /** * 선택된 카드는 색이 아니라 **대비**로 표현한다(패턴 D). * ⚠️ 테두리에 --ds-border-strong(라이트 rgba(0,0,0,.30))을 쓰면 흰 썸네일 위에서 * 미선택 칸과 거의 구분되지 않는다(3.0.1 실렌더에서 확인). 화면에서 가장 대비가 * 큰 색인 --ds-accent 를 쓴다 — 라이트에서 거의 검정, 다크에서 흰색으로 양쪽 다 맞다. * (공용 CSS 원본도 `border-color: var(--color-primary)` 였다) */ body .select-card.is-selected, body .select-card:has(input:checked), body .frame-picker__opt:has(input:checked) { background: var(--ds-accent-soft); border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-select-ring); } body .select-card.is-selected .check, body .select-card:has(input:checked) .check { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); } /* 액자 선택기 — 국화 화환(01)은 크림색 불투명, 금색 액자(02)는 투명이다. 둘 다 밝은 판 위에서만 제대로 보이므로 이미지 면과 같은 취급을 한다(§9-3-A) */ body .frame-picker__opt { background: var(--ds-media-bg); color: var(--ds-text-soft); border-color: var(--ds-border-soft); } body .frame-picker__title { color: var(--ds-text-muted); } /* ── 9-3-A. 불투명 흰 이미지를 담는 면 → 항상 흰색 ──────────────────────────── 위 §9-3 에서 **일부러 뺀 것들**이다. 카드 안 요소지만 --ds-surface-2 를 주면 이미지의 흰 사각형이 둘레에 그대로 드러난다(--ds-media-bg 주석 참조). 구분은 배경이 아니라 테두리가 한다. */ body .thumb, body .compact-grid .thumb, body .tpl-photo__thumb, body .bugo-preview { background: var(--ds-media-bg); border-color: var(--ds-border-soft); } /* ── 9-3-B. 입력창 → 배경이 아니라 **테두리**가 경계다 ──────────────────────── ⛔ 입력창을 §9-3(카드 안 요소)과 같이 다루면 라이트에서 사라진다. 흰 카드(#fff) 위에 #f4f4f7 을 얹고 테두리를 rgba(0,0,0,.12) 로 낮추면 **면도 선도 안 보여** 어디를 눌러야 입력이 되는지 알 수 없다 (3.0.2 이전 실제 상태 — 계좌 정보·장례식장 정보 화면에서 지적받았다). 공용 CSS 원본이 `input,select,textarea{background:#fff;border:1px solid var(--color-border)}` 인 것이 정답이었다. 라이트에서는 그 값으로 돌아가고, 다크에서만 표면을 한 단계 올린다. ────────────────────────────────────────────────────────────────────────── */ body input, body select, body textarea, body .public-bugo-guestbook-form textarea, body .public-bugo-search-form input, body .admin-form-group textarea, body .contact-form-group input, body .contact-form-group select, body .contact-form-group textarea, body .ne-time-row select, body .ne-row select { background: var(--ds-field-bg); color: var(--ds-text); border: 1px solid var(--ds-field-line); } /* 읽기 전용·비활성은 "누를 수 없다"가 보여야 한다 — 면을 한 단계 눌러 둔다 */ body input[readonly], body input:disabled, body select:disabled, body textarea:disabled { background: var(--ds-surface-2); color: var(--ds-text-muted); } /** * ⛔ 영정 사진 액자(`.public-bugo-portrait`)의 `background: transparent` 덮어쓰기를 * 3.0.1 에서 **뺐다.** 그 배경은 장식이 아니라 **액자 이미지 그 자체**다 * (bugo-public.css:157 `background: url(goin_frame_01.webp)`, 금색 액자는 .is-gold). * 다크에서는 크림색(#fffaf5) 액자가 검정 위에 사각형으로 떠서 지우는 게 맞았지만, * 라이트에서 지우면 **영정사진을 올린 부고장의 액자가 통째로 사라진다.** * ⚠️ 샘플 부고장에는 영정사진이 없어 `.public-bugo-profile-symbol` 로 렌더되므로 * 이 파손은 샘플 화면으로는 드러나지 않는다 — 영정사진을 올린 부고장으로 봐야 한다. */ /* 조문 메시지 작성 버튼 — 배경이 #22282b 리터럴이라 다크에서 눌린 것처럼 보인다. 이 화면의 주 행동이므로 흰 알약으로 세운다 */ body .public-bugo-guestbook-form button { background: var(--ds-accent); color: var(--ds-on-accent); } /* 화환 주문 버튼의 파란색(#4a90d9)은 이 테마에 없는 색이다 — 무채색으로 되돌린다 */ body .public-bugo-fixed-menu .fixed-menu-btn--flower { background: var(--ds-accent); color: var(--ds-on-accent); } body .public-bugo-fixed-menu .fixed-menu-btn--flower:active { background: var(--ds-accent-dim); } /* 하단 고정 메뉴 바 자체 */ body .public-bugo-fixed-menu { background: var(--ds-scrim-bar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--ds-border-soft); } /* 오류·경고 박스 — 연분홍(#fff5f5 · #fff1f2)이 다크에서 흰 판이 된다. 상태색 계열로 통일 */ body .public-bugo-find-error, body .public-bugo-alert, body .admin-error, body .admin-badge.deleted, body .admin-btn.danger, body .admin-btn-sm.danger { background: var(--ds-danger-bg); border-color: var(--ds-danger-line); color: var(--color-danger); } /* ── 9-4. 리터럴 글자색 → 텍스트 3계층 ────────────────────────────────────── 공용 CSS 에 `color: #111 ~ #777` 이 110 곳 박혀 있다. 전부 "흰 카드 위 검은 글자"를 전제한 값이라 다크에서는 카드에 묻힌다. 값에 따라 세 묶음으로 나눠 토큰에 태운다. (라이트에서는 원래 값과 비슷해지므로 이 절이 하는 일이 거의 없다 — 그래도 남겨 둔다. 토큰을 타야 홈/서브 어느 쪽에서도 한 벌의 규칙으로 맞는다) #111 · #1a1a1a · #222 → --ds-text 제목·수치·강조 본문 #333 · #444 · #555 → --ds-text-soft 일반 본문 #666 · #777 → --ds-text-muted 설명·캡션 ⚠️ 카카오 브랜드색 위의 글자(#3c1e1e · #3a2800)는 **일부러 뺐다.** 노란 배경 위라 그대로 두어야 맞다. 여기 목록에 없는 것은 빠뜨린 게 아니라 뺀 것이다. ────────────────────────────────────────────────────────────────────────── */ /* [1계층] 제목·수치·강조 본문 → 흰색 */ body .public-bugo-main-copy, body .public-bugo-list-value, body .public-bugo-table dd, body .public-bugo-message-box, body .public-bugo-guestbook-item strong, body .public-bugo-phone-link, body .public-bugo-account-number, body .public-bugo-share-modal__header h3, body .public-bugo-share-option, body .public-bugo-search-header h1, body .public-bugo-search-form input, body .public-bugo-search-results h2, body .public-bugo-search-empty strong, body .public-bugo-search-item h3, body .funeral-search-item h3, body .funeral-detail-card__head h2, body .funeral-detail-info dd, body .funeral-detail-map-head h2, body .public-bugo-manage-summary dd, body .public-bugo-stats-summary dt, body .public-bugo-stats-summary dd, body .public-bugo-stats-table th, body .fw-title, body .fw-info-dl dd, body .fi-breadcrumb > span:not([aria-hidden]), body .fi-article-body h3, body .fi-article-body details.blog_faq summary, body .fi-toc__toggle, body .admin-nav a, body .admin-link-grid a, body .admin-btn, body .admin-form-group textarea, body .help-toc a, body .sample-name { color: var(--ds-text); } /* [2계층] 일반 본문 → #d1d1d6 */ body .frame-picker__opt, body .public-bugo-preview-head p, body .public-bugo-support-section p, body .public-bugo-flower-modal-desc, body .public-bugo-flower-sender-chip, body .public-bugo-guestbook-item p, body .public-bugo-example-box p, body .public-bugo-example-box button, body .public-bugo-example-modal__body button, body .public-bugo-thanks-body, body .public-bugo-share-qr__label, body .public-bugo-share-qr__hint, body .public-bugo-sample-cta p, /* ⚠️ 하단 고정 메뉴(.fixed-menu-btn)는 여기 넣지 않는다 — 위 §9-3 에서 이미 흰 글자를 주었고, 여기 넣으면 특이도가 같아 **뒤에 오는 이 규칙이 이겨서** 흰 배경의 근조화환 버튼 글자가 #d1d1d6 으로 흐려진다(실제 렌더에서 확인하고 뺐다). */ body .section-guide, body .mubinso-detail__lead, body .mubinso-preview p, body .order-entry, body .preview-copy, body .public-bugo-search-help, body .public-bugo-find-forgot, body .public-bugo-search-item p, body .funeral-search-item p, body .public-bugo-manage-heading p, body .public-bugo-manage-username, body .public-bugo-stats-modal__header button, body .public-bugo-stats-box h3, body .fw-section-title, body .fw-product-name, body .fi-breadcrumb a, body .fi-article-body h4, body .fi-article-body details.blog_faq .blog_faq_a, body .fi-toc__item a, body .admin-form-group label, body .help-where { color: var(--ds-text-soft); } /* [3계층] 설명·캡션 → #98989d */ body .muted, body .empty, body .section-head p, body .frame-picker__title, body .public-bugo-map-note, body .public-bugo-preview-note, body .public-bugo-empty-message, body .public-bugo-account-card__meta, body .public-bugo-guestbook-delete label span, body .public-bugo-share-modal__header button, body .public-bugo-pagination span, body .create-header p, body .card-head p, body .privacy-note, body .bugo-template-item span, body .mubinso-preview__where b, body .chip-field small b, body .funeral-result-item em, body .public-bugo-search-header p, body .public-bugo-search-result-head p, body .public-bugo-search-empty p, body .public-bugo-search-item h3 span, body .funeral-detail-map-head p, body .funeral-detail-map-note, body .public-bugo-manage-stat-total span, body .public-bugo-manage-stat-bars strong, body .public-bugo-manage-muted, body .public-bugo-manage-help, body .public-bugo-manage-logout.compact button, body .public-bugo-stats-note, body .fw-sub, body .fi-article-body details.blog_faq .blog_faq_meta, body .admin-muted, body .admin-stat span, body .admin-empty, body .admin-chart-value, body .admin-chart-label, body .admin-visit-mini span, body .admin-dl dt { color: var(--ds-text-muted); } /* 에러 문구는 위 3계층이 아니라 상태색이다 */ body .photo-field__error, body .help-note.warn { color: var(--color-danger); } /* ── 9-5. 각 화면의 주 행동을 악센트 버튼으로 승격 ──────────────────────────── `--bugo-btn-*` 는 은은한 고스트(rgba(255,255,255,.08))로 두었다. 그 토큰을 통째로 흰색으로 바꾸면 편하지만, 같은 토큰을 쓰는 `.location-card__badge` 가 흰 배지에 흰 글자가 되어 사라진다(--color-primary 도 흰색이기 때문이다). 그래서 토큰은 그대로 두고, **화면당 하나뿐인 주 행동만** 골라 흰색으로 올린다 — DS09 §7 "한 화면에 흰 버튼은 하나". ────────────────────────────────────────────────────────────────────────── */ body .next-button, body .sticky-cta button, body .public-bugo-search-form button { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); } body .next-button:hover, body .sticky-cta button:hover, body .public-bugo-search-form button:hover { background: var(--ds-accent-dim); } /* ============================================================================ 9-6. 뷰 파일 안의 인라인