/* ═══════════════════════════════════════════════════════════════
   데모 D — 오크 (OAK)
   무드: 오크·석고·자연광 · 인테리어/시공 스튜디오
   골격: C (사이드바 + 격자) — demo/_skeleton-c/

   base.css를 상속한다. 다른 데모와의 차이가 곧 이 파일의 내용이다:
     · 본문 면은 거의 흰 석고 톤 — 사진이 주인공이라 배경이 물러선다
     · 왼쪽 사이드바만 어둡다. 한 화면에 밝은 면과 어두운 면이 공존하는
       유일한 데모라, 사이드바 전용 색 역할을 따로 둔다
     · 격자가 여백 없이 붙으므로 카드 라운드가 0 이다
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── 팔레트 ───────────────────────────────────────────────
     마감 전 석고(본문 면)와 기름칠한 오크(사이드바). 두 재료의
     실제 색에서 뽑았다 — 사진 23장이 전부 그 두 재료다. */
  --plaster:   #f6f4f0;   /* 석고 — 기본 면 */
  --plaster-2: #eceae4;   /* 한 톤 내린 면 — 교차용 */
  --card:      #fffefb;
  --card-2:    #f1eee7;

  --oak-900: #241f1a;   /* 기름칠한 오크 — 사이드바 바닥 */
  --oak-800: #2f2924;
  --oak-700: #3d352d;

  --text:       #241f1a;
  --text-mute:  #5f574d;
  --text-faint: #8b8175;

  --accent:   #8a6a3f;   /* 오크 — 밝은 면에서 대비를 확보한 값 */
  --accent-2: #c2a479;

  /* ─── 배경 3단 (v3 §2) ─────────────────────────────────────
     인접 섹션에 같은 톤을 연속으로 쓰지 않는다. */
  --bg-0: var(--plaster);
  --bg-1: var(--plaster-2);
  --bg-2: color-mix(in srgb, var(--accent) 7%, var(--plaster));

  --fg-0: var(--text);
  --fg-1: var(--text-mute);
  --fg-2: var(--text-faint);

  /* ─── 색 역할 (base.css §6 의 14개) ─────────────────────── */
  --c-bg:        var(--plaster);
  --c-bg-alt:    var(--plaster-2);
  --c-surface:   var(--card);
  --c-surface-h: var(--card-2);
  --c-text:      var(--text);
  --c-muted:     var(--text-mute);
  /* ★ --text-faint(#8b8175)는 석고 바탕에서 3.48:1 로 AA 에 못 미친다.
       지정색(사이드바 #18120a · 강조 #18120a · 흰색)은 그대로 두고
       보조 글자 명도만 내려 통과시켰다.
     ★ 기준을 **가장 어두운 밝은 면**으로 잡았다. 처음에 석고(#f6f4f0)만
       보고 #786e62 로 정했는데, 교차 섹션·푸터(#eceae4)에서 4.15 로
       도로 미달이었다 — 렌더된 색으로 재서 잡았다. 한 면만 보고 정하면
       다른 면에서 걸린다.
       #72685c → 석고 4.97 · 교차면 4.53 · 카드 5.41. 세 면 모두 통과. */
  --c-faint:     #72685c;
  /* ★ 밝은 면 강조를 사이드바 배경과 같은 값으로 통일한다 (2026-08-29 지시).
       이전 값은 오크 브라운 #8a6a3f 였다.
     ★ 이 색은 본문 글자색(#241f1a)과 휘도비 1.14 다 — **색으로는 링크를
       본문과 구분할 수 없다.** 그래서 밑줄과 굵기로 구분한다
       (skeleton-c.css "밝은 면의 링크"). 색만 바꾸고 끝내면 문단 안의
       링크가 사라진다. */
  --c-accent:    #18120a;
  --c-accent-2:  var(--accent-2);
  --c-line:      rgba(36, 31, 26, .12);
  --c-line-2:    rgba(36, 31, 26, .24);
  --c-btn-bg:    var(--text);
  --c-btn-fg:    var(--plaster);

  --ph-bg:   #eceae4;
  --ph-line: rgba(138, 106, 63, .40);
  --ph-text: #7c7368;

  /* ─── 사이드바 전용 색 (골격 C) ──────────────────────────
     ★ 여기가 이 데모에만 있는 층이다. 다른 데모는 한 페이지가 한 톤이라
       --c-text 하나로 충분한데, 골격 C 는 어두운 면과 밝은 면이 같은
       화면에 있다. 사이드바 안에서 --c-text 를 그대로 쓰면 어두운 바탕에
       어두운 글자가 된다 — 그래서 이름을 나눈다.
     ★ 골격 C 를 쓰는 다음 데모는 이 일곱 개만 바꾸면 사이드바 무드가 바뀐다.
     ★ 2026-08-29: 사이드바 바닥을 #241f1a → #18120a 로 내렸다(지시).
       덕분에 그 위 글자 대비가 전부 한 단 올라갔고, **예전에 미달이던
       저작권 글자가 4.39 → 5.00 으로 통과했다.** 값을 따로 손보지 않았다.
     ★ 사이드바 안 강조(현재 메뉴·호버·활성 표시)는 흰색이다. 대비 18.59. */
  --c-sb-bg:     #18120a;
  --c-sb-bg-2:   #221a10;
  --c-sb-fg:     #f3efe8;   /* 대비 16.22:1 */
  --c-sb-muted:  #b3a99c;   /* 대비 8.03:1 */
  --c-sb-faint:  #8d8377;   /* 대비 5.00:1 — 예전 바닥에서는 4.39 로 미달이었다 */
  --c-sb-line:   rgba(243, 239, 232, .16);
  --c-sb-accent: #ffffff;   /* 대비 18.59:1 */

  /* ─── 데모 배너 바닥 ──────────────────────────────────────
     사이드바와 같은 #18120a 를 쓰다가 올렸다(2026-08-30). 그 값은 본문
     (#f6f4f0)과 대비가 16.92 라 화면 위쪽을 눌렀다 — 얇은 띠 하나가
     페이지에서 가장 무거운 면이 됐다.
     같은 계열(H 34° · S 41%)에서 명도만 6.7% → 30% 로 올렸다.
       본문과의 대비 16.92 → 6.70  (절반 이하)
       사이드바와의 차이 1.00 → 2.52 (두 띠가 서로 구분된다)
       흰 글자 18.59 → 7.36        (AAA 7.0 위)
     ★ 색을 skeleton-c.css 에 적지 않고 여기 둔다. 골격 파일은 값을 갖지
       않는다 — 골격 C 를 쓰는 다음 데모가 제 색을 넣을 자리다. */
  --c-demo-bar: #6c512d;

  /* ─── 서체 — 제목만 세리프 (2026-08-29 채택) ──────────────
     본문은 산세리프 그대로다. h1·h2·h3·h4 가 --font-head 를 쓰므로
     제목 계열 전체가 세리프가 된다.

     ★ 웹폰트를 추가하지 않았다. 한글 세리프는 플랫폼마다 하나씩 있다 —
       Windows 바탕, macOS·iOS AppleMyungjo, Android Noto Serif CJK KR.
       한 벌이 2MB 를 넘어 제목 몇 줄에 쓸 무게가 아니다.
     ★ 라틴은 Georgia 가 먼저 잡고, 한글은 Georgia 에 글자가 없어 다음
       후보로 떨어진다. 리넨이 쓰는 방식과 같다.
     ★ 이름을 여럿 늘어놓는 이유: 같은 글꼴이 기기마다 다른 이름으로
       설치돼 있다. 실측(이 개발기)에서는 'Noto Serif KR' 과 Batang 이
       잡히고 'Nanum Myeongjo' 는 그 이름으로는 안 잡혔다(파일은 있는데
       패밀리명이 한글이었다). 안 잡히는 이름은 건너뛰므로 비용이 없다.
     ★ 실제로 먹는지 폭으로 확인했다 — 같은 한글 문장이 제목 스택
       1022.6px, 본문 스택 939.6px 로 다른 글꼴이다. */
  --font-head: Georgia, 'Times New Roman',
               'Nanum Myeongjo', NanumMyeongjo, AppleMyungjo,
               'Noto Serif KR', 'Noto Serif CJK KR',
               Batang, '바탕', serif;
  --fw-head:    400;   /* 세리프는 굵게 쓰지 않는다 */
  --fw-display: 400;
  --fw-h1:      400;
  --fw-h2:      400;
  --ls-head:   -.005em;  /* 세리프는 자간을 조이지 않는다 */
  --ls-tight:  -.005em;

  /* 격자가 여백 없이 붙는다. 라운드가 있으면 셀 사이에 흰 삼각형이 생긴다. */
  --radius:    0;
  --radius-lg: 0;
  --radius-sm: 0;

  /* 사진이 주인공이라 컨테이너를 시스템 기본보다 넓게 쓴다.
     ★ 사이드바가 이미 왼쪽을 232px 먹으므로, 본문 컨테이너까지 좁히면
       1280 구간에서 격자가 3열도 못 채운다. */
  --w-base: 1560px;
  --w-wide: 1760px;

  /* ─── 골격 C 구조값 ───────────────────────────────────────
     ★ 값이 아니라 구조다. 사이드바 폭이 바뀌면 본문 컨테이너·격자 열수·
       실측 프로필이 전부 따라 움직인다 — 한 곳에서만 정한다. */
  --sb-w:    232px;   /* 데스크톱 사이드바 폭 */
  --sb-w-lg: 264px;   /* 1920+ */
  --topbar-h: 56px;   /* 모바일 상단 바 높이 */
}