/* ═══════════════════════════════════════════════════════════
복덕방(福德房) 오버라이드 레이어
적용 방법:
index.html의 에서, 다른 모든 스타일시트 뒤
(assets/style.css, assets/saju.css, assets/calendar.css,
assets/map3.css, assets/lotto.css 등 — 반드시 맨 마지막)에
아래 한 줄을 추가한다.
되돌리려면 그 한 줄만 지우면 된다. 이 파일은 기존 파일을
전혀 건드리지 않는 순수 오버라이드이며, 새 클래스를 만들지
않고 기존 클래스명만 사용한다.
설계 원칙 (docs/design/bokdukbang-proposal.md 참조):
- 글자색은 어두운 먹색(--ink) 하나로 고정한다. 복덕방다운
색(형광 노랑 --mint, 빨간 매직 --seal, 금박 --gold)은
배경·테두리·강조에만 쓰고 글자색으로는 쓰지 않는다.
이 규칙 덕분에 :root 토큰 재정의만으로 12개 탭
(orgs/map/calc/cal/flow/buy/banks/terms/miss/buylinks/
links/saju, 그리고 calendar.css·map3.css·lotto.css가
그리는 화면)의 대비가 전부 자동으로 안전해진다.
- 시그니처 요소는 단 하나 — 선택된 좌측 탭이 유리창에 붙인
노란 형광 시세표 스티커처럼 보이는 것. 나머지는 조용히.
═══════════════════════════════════════════════════════════ */
/* 강조 캡션 전용 손글씨 폰트. 본문에는 절대 쓰지 않는다 —
Gaegu 자체는 한글 완성형 글리프를 제공해 tofu(□)가 나지
않지만, 장문에서는 가독성이 떨어지므로 짧은 라벨에만 쓴다. */
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap');
:root {
/* ── 색 재정의 — 증서 어휘 → 복덕방 어휘 ──────────────────
대비비 실측(4쌍, sRGB 상대휘도 공식):
--ink on --paper = 12.41:1
--ink on --paper-2 = 10.84:1
--ink on --mint = 10.94:1 (형광 스티커 배경 위 글자)
--ink-soft on --paper = 7.34:1
전부 WCAG AA 4.5:1을 넉넉히 넘는다. */
--mint: #FFD84D; /* 유리창 형광 시세표 스티커 — 시그니처 배경색 */
--mint-deep: #D8B93B; /* 스티커 눌린 가장자리 — 테두리·막대그래프 */
--ink: #2E2A24; /* 복덕방 먹색 — 원목 책상·장부. 본문 글자는 전부 이 색 */
--ink-soft: #5C4A37; /* 흐린 먹색 — 보조 설명 */
--seal: #A81C22; /* 빨간 매직 — 밑줄·경고·강조 1곳. 원래보다 살짝 어둡게 조정(대비 확보) */
--paper: #F5EFDE; /* 달력 종이 — 누렇게 뜬 벽걸이 달력 */
--paper-2: #ECE0BE; /* 마룻바닥 · 오래된 장판 */
--han: #2A5F94; /* 지번도 파랑 — 원본 유지, 조합별 대비 이미 충분 */
--gold: #7A4E15; /* 낡은 액자 금박 — 부록(사주) 포인트. 어둡게 조정해 본문 대비 확보 */
--rule: rgba(46, 42, 36, 0.20);
--rule-soft: rgba(46, 42, 36, 0.10);
/* ── 서체 재정의 ───────────────────────────────────────── */
/* 제목·본문·숫자는 원본 역할 그대로 유지 (증서 때도 이미
좋은 선택이었고, 복덕방이라고 바꿀 이유가 없다).
한글 폰트를 폴백에 반드시 둔다 — IBM Plex Mono는 한글
글리프가 없어 라틴/숫자만 mono가 되고 한글은 자동으로
폴백 폰트로 넘어간다. 이 동작을 명시적으로 보장한다. */
--display: 'Gowun Batang', 'Nanum Myeongjo', serif;
--body: 'IBM Plex Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif;
--mono: 'IBM Plex Mono', 'IBM Plex Sans KR', 'SFMono-Regular', monospace;
/* 강조 캡션 전용 — 짧은 라벨 1~2곳에서만 사용 (아래 개별
셀렉터 참조). 본문 텍스트에는 이 변수를 쓰지 않는다. */
--hand: 'Gaegu', var(--display);
}
/* ── 배경 텍스처 살짝 어둡게 (톤만 맞춤, 새 텍스처 추가 안 함) ── */
body::before {
background:
repeating-radial-gradient(circle at 12% 8%, transparent 0 38px, rgba(46,42,36,.05) 38px 39px),
repeating-radial-gradient(circle at 88% 92%, transparent 0 46px, rgba(122,78,21,.05) 46px 47px);
}
/* ── 시그니처: 선택된 탭 = 유리창 형광 스티커 ─────────────────
기존 .rail__t[aria-selected="true"]는 배경만 --mint로 바뀌는
평평한 상태였다. 여기서 살짝 기울인 사각 스티커처럼 보이게
그림자와 회전을 더한다. 이 효과는 오직 이 한 곳에만 쓴다. */
.rail__t[aria-selected="true"] {
background: var(--mint);
box-shadow: 1px 2px 0 rgba(46,42,36,.18), 0 0 0 1px rgba(46,42,36,.06);
transform: rotate(-1deg);
transition: background .16s, box-shadow .16s, transform .16s, padding-left .16s;
}
/* 좌측 강조선(빨간 매직 밑줄)은 원본 어휘 그대로 유지 — 이미
복덕방에도 맞는 표현이라 개별 재정의하지 않는다. */
@media (max-width: 939px) {
/* 모바일 가로 스크롤 탭에서는 회전을 주면 인접 탭과 겹쳐
보이므로 스티커 느낌은 그림자로만 표현한다. */
.rail__t[aria-selected="true"] { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rail__t[aria-selected="true"] { transition: none; }
}
/* ── 좌측 목차 레일 — "벽에 붙은 안내판" ─────────────────── */
@media (min-width: 940px) {
.rail {
background: var(--paper-2);
border-right-color: var(--rule);
}
}
/* 목차 캡션에 손글씨 느낌 — 짧은 라벨 1곳 */
.rail__cap {
font-family: var(--hand);
font-size: .82rem;
letter-spacing: .08em;
font-weight: 700;
}
/* 하단 안내 힌트도 짧은 라벨이므로 손글씨 적용 */
.rail__hint {
font-family: var(--hand);
font-size: .72rem;
letter-spacing: .02em;
opacity: .85;
}
/* ── eyebrow(장 상단 소제목)도 짧은 라벨 — 손글씨로 온기 추가 ── */
.eyebrow {
font-family: var(--hand);
font-size: .8rem;
letter-spacing: .05em;
text-transform: none; /* 손글씨체는 대문자 강제 변환이 어색하다 */
}
/* ── 관인 도장(.seal) — 모티프는 유지, 색만 매직 계열로 ─────
증서의 "공식 판정" 신호는 그대로 두고(제안서 6절), 형광
노랑 대신 매직 빨강/먹색 계열로 맞춘다. seal--el(사주 부록)
은 금박 --gold를 이미 쓰고 있어 별도 처리 불필요. */
.seal { border-color: var(--seal); color: var(--seal); }
.seal::before { border-color: var(--seal); }
.seal--won { border-color: var(--ink); color: var(--ink); }
.seal--won::before { border-color: var(--ink); }
/* ── 초점 링 유지 확인 — 원본과 동일한 시각 언어(--seal)를
그대로 쓰므로 재정의 불필요. 접근성 유지 조건 명시 목적의
주석만 남긴다. focus-visible 규칙은 style.css의 것을 그대로
따른다. */
/* ── 지도 타일 3등급 보조 텍스트 대비 보정 ─────────────────
style.css의 .tile[data-tier="3"] 배경(#9DBCAE)은 등급 3~5의
중간 채도라 --ink-soft 그대로 얹으면 4.11:1로 AA 4.5:1에
못 미친다(등급 배경색 자체는 style.css 소유라 손대지 않고,
그 위에 얹는 텍스트 색만 이 레이어에서 보정한다). 3등급 안의
시세 보조 텍스트만 --ink로 올려 6.95:1을 확보한다. 등급 1·2
(딥그린 계열, 밝은 텍스트)와 4·5(옅은 배경, --ink-soft로 충분)
는 이미 AA를 넘으므로 손대지 않는다. */
.tile[data-tier="3"] .tile__p { color: var(--ink); }
/* 등급 2 배경(style.css 고정값 #3D6B5C)에 얹는 흐린 시세 텍스트도
원본 rgba(228,237,230,.72)로는 3.49:1로 AA에 못 미쳤다(팔레트
교체 이전부터 있던 문제이나, 지도 탭을 점검하며 함께 바로잡는다).
불투명도를 올려 6:1대로 확보한다. 등급 1(#0F4034)은 원본
그대로도 5.88:1로 이미 충분하다. */
.tile[data-tier="2"] .tile__p { color: rgba(228,237,230,.95); }