/* ===========================================================================
   themes.css — **색상 테마 후보.** (2026-09-11)

   ★ 사용자 결정 — *"테마를 색상으로만 하고… 테마를 지정할 수 있는 제어부만
     추가해줘. 확인해보자."*

   ⚠️⚠️⚠️ **값만 바꾼다. 이름은 하나도 안 건드린다.** 화면 29개가 이 토큰을
      500번 넘게 부른다 — 이름을 건드리면 스타일이 **조용히 사라진다**
      (`tokens.css` 가 2026-09-08 에 같은 이유로 못 박아 둔 규칙이다).

   ⚠️⚠️ **계열을 크게 벗어나지 않는다.** 생성 AI 그림 22장이 인디고·블루·코랄로
      만들어져 있고 **같은 그림을 다시 안 준다** — 청록·자주로 옮기면 22장이
      통째로 겉돈다. 그래서 후보는 **색조 ±15° 안**에서 온도·깊이만 굴린다.

   ⚠️ 안 건드리는 것 — **치수·타이포**(원본 실측값) · 레이아웃 · 그림.
   ⚠️ 판정 색(민트=좋음 · 앰버=확인 · 코랄=막힘 · 바이올렛=참고)은 **뜻이 달린
      색**이라 후보마다 크게 흔들지 않는다. 흔들면 같은 태그가 테마마다 다른
      뜻으로 읽힌다.

   ★ 기본(`data-palette` 없음)은 `tokens.css` 그대로다 — 이 파일은 **덮어쓰기만**
     한다. 그래서 제어부를 떼면 아무 일도 없었던 것이 된다.
   =========================================================================== */

/* ⚠️⚠️⚠️ **2026-09-11 다시 잡았다** (사용자 재지적 —
   *"4가지 모두 파랑 계열이라 변화가 거의 안보여. 따뜻한 잉크 조차도 파랑 계열로
   보이네?"*). 처음엔 색조 ±15° 안에서만 굴렸고, 「따뜻한 잉크」는 **회색 계단만**
   돌려 브랜드 색 8개를 하나도 안 덮었다 — 그래서 넷이 다 파랗게 보였다.

   ⭐ **제약이 걸리는 곳을 다시 재 보니 콘솔이 아니었다.** 생성 AI 그림 22장은
     **루트 7페이지와 홍보(`check.html`)에만** 있고 **콘솔 17화면은 하나도 안 쓴다**
     (검토서·제안서가 그렇다). 제안서 PDF 를 보고 계신데 거기엔 그림이 없다.
     → 그래서 **후보를 제대로 벌린다.** 판단은 눌러 보고 한다 — 그게 제어부의 쓸모다.

   ⚠️ 후보마다 **그림과 겉돌 위험**을 칩 설명(`js/theme.js` 의 `why`)에 적었다.
   ⚠️⚠️ **판정 색 넷은 안 흔든다**(민트=좋음 · 앰버=확인 · 코랄=막힘 · 바이올렛=참고) —
      흔들면 같은 태그가 테마마다 다른 뜻으로 읽힌다.
      ⚠️ 다만 **청록 테마는 주조가 민트에 가깝다** — 「좋음」 태그가 브랜드색으로
         읽힐 수 있다. 눌러 보고 판단할 자리다. */

/* ── ① 청록 — 재생에너지·물 ────────────────────────────────────────────────
   딥을 짙은 청록으로, 주조를 틸로. CTA 는 따뜻하게 남겨 보색으로 살린다.
   ⚠️ 흰 글자가 띠 위에 앉는다 — 딥은 어둡게 유지한다(#0f3b40 대비 ~11:1). */
:root[data-palette="teal"] {
  --c-text: #132226;
  --c-heading: #0b2b30;
  --c-navy: #0f3b40;
  --c-navy-deep: #082226;
  --c-muted: #5f7276;
  --c-subtle: #4f676b;
  --c-blue: #0d8a9c;
  --c-blue-pale: #c9ecf1;
  --c-blue-solid: #0d8a9c;
  --c-blue-soft: #6fc7d4;
  --c-orange: #ff6a2b;
  --c-surface-alt: #e6f4f7;
  --c-surface-gray: #cfe9ee;
  --c-surface-soft: #f4fbfc;
  --c-cream: #fff6ed;
  --c-line: #dde9eb;
  --c-scrim: rgb(8 34 38 / 68%);
  --c-sky-pale: #e2f5f8;
  --c-sky-line: #bde5ec;
  --c-sky-wash: #f2fbfc;
  --c-g900: #14211f;
  --c-g800: #33433f;
  --c-g700: #4d5e5a;
  --c-g600: #657572;
  --c-g500: #7c8c89;
  --c-g400: #93a09e;
  --c-g300: #aab7b5;
  --c-g250: #c2cfcd;
  --c-g200: #d5e0de;
  --c-g150: #e5eeec;
  --c-g100: #eff6f5;
  --c-g75: #f5faf9;
  --g-slide-1: linear-gradient(140deg, #0f3b40 0%, #0d8a9c 100%);
  --g-slide-2: linear-gradient(#9adde8 0%, #e7f8fb 100%);
  --g-cta: linear-gradient(to right top, #ffb02b 0%, #ff5f3d 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #e4f5f8 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #fff1e4 0%, transparent 58%);
}

/* ── ② 따뜻한 잉크 — 종이·테라코타 ─────────────────────────────────────────
   ⚠️⚠️ 처음 판이 **회색 계단만** 돌려 「따뜻한」데 파랬다. 이제 **브랜드 색도**
      갈아 끼운다 — 딥은 다크 브라운, 주조는 테라코타. */
:root[data-palette="warm"] {
  --c-text: #2a1f18;
  --c-heading: #3a2115;
  --c-navy: #4a2c1e;
  --c-navy-deep: #2b1710;
  --c-muted: #7a6a5c;
  --c-subtle: #6b5a4c;
  --c-blue: #b4552a;
  --c-blue-pale: #f7ddd0;
  --c-blue-solid: #b4552a;
  --c-blue-soft: #dda184;
  --c-orange: #e2600f;
  --c-surface-alt: #faf0e8;
  --c-surface-gray: #f0ddcf;
  --c-surface-soft: #fbf8f2;
  --c-cream: #fff7ee;
  --c-line: #ece0d4;
  --c-scrim: rgb(43 23 16 / 68%);
  --c-sky-pale: #fbeee6;
  --c-sky-line: #f0d6c4;
  --c-sky-wash: #fdf8f4;
  --c-g900: #29231b;
  --c-g800: #4b4237;
  --c-g700: #665c4d;
  --c-g600: #7b7160;
  --c-g500: #918674;
  --c-g400: #a79c88;
  --c-g300: #bdb3a0;
  --c-g250: #d3cab8;
  --c-g200: #e4dccb;
  --c-g150: #efe9dc;
  --c-g100: #f7f3ea;
  --c-g75: #fbf8f2;
  --g-slide-1: linear-gradient(140deg, #4a2c1e 0%, #b4552a 100%);
  --g-slide-2: linear-gradient(#f2c9a8 0%, #fdf1e6 100%);
  --g-cta: linear-gradient(to right top, #f0a73a 0%, #d2482f 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #faf0e6 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #fdeadb 0%, transparent 58%);
}

/* ── ③ 모노 슬레이트 — 절제·기업용 ─────────────────────────────────────────
   색을 **CTA 하나로 몰고** 나머지를 중립으로 둔다. 숫자가 많은 화면에서 잡음이
   가장 적다(검토서·제안서가 그렇다).
   ⚠️ 주조가 회색이라 **링크·버튼이 죽어 보이기 쉽다** — CTA 주황은 그대로 남긴다. */
:root[data-palette="slate"] {
  --c-text: #1b1f24;
  --c-heading: #14181d;
  --c-navy: #1f2328;
  --c-navy-deep: #0f1215;
  --c-muted: #5f6873;
  --c-subtle: #505965;
  --c-blue: #44505f;
  --c-blue-pale: #dfe3e8;
  --c-blue-solid: #44505f;
  --c-blue-soft: #9aa5b1;
  --c-orange: #ff6a2b;
  --c-surface-alt: #eef0f2;
  --c-surface-gray: #dde1e6;
  --c-surface-soft: #f7f8f9;
  --c-cream: #fff6ed;
  --c-line: #e2e5e9;
  --c-scrim: rgb(15 18 21 / 70%);
  --c-sky-pale: #eceef1;
  --c-sky-line: #d7dbe0;
  --c-sky-wash: #f7f8f9;
  --c-g900: #16191d;
  --c-g800: #363b42;
  --c-g700: #51565e;
  --c-g600: #696f77;
  --c-g500: #80868f;
  --c-g400: #979da5;
  --c-g300: #aeb4bb;
  --c-g250: #c6cbd1;
  --c-g200: #d9dde2;
  --c-g150: #e8ebee;
  --c-g100: #f2f4f6;
  --c-g75: #f8f9fa;
  --g-slide-1: linear-gradient(140deg, #1f2328 0%, #44505f 100%);
  --g-slide-2: linear-gradient(#c2c9d1 0%, #eef0f3 100%);
  --g-cta: linear-gradient(to right top, #ffa32b 0%, #ff5f3d 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #eef0f3 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #fff1e4 0%, transparent 58%);
}

/* ── ④ 숲 — 자연·녹지 (145°) ───────────────────────────────────────────────
   ⚠️ 주조가 **민트(「좋음」 태그 #0f9d76)에 가깝다** — 태그가 브랜드색으로 읽힐 수 있다. */
:root[data-palette="forest"] {
  --c-text: #141f19;
  --c-heading: #0c2b1f;
  --c-navy: #12352a;
  --c-navy-deep: #071c14;
  --c-muted: #63736b;
  --c-subtle: #52685e;
  --c-blue: #1f8a5b;
  --c-blue-pale: #c8ecd8;
  --c-blue-solid: #1f8a5b;
  --c-blue-soft: #74cfa2;
  --c-orange: #ff7a2b;
  --c-surface-alt: #e6f5ec;
  --c-surface-gray: #cdead9;
  --c-surface-soft: #f4fbf7;
  --c-cream: #fff6ed;
  --c-line: #dceae2;
  --c-scrim: rgb(7 28 20 / 68%);
  --c-sky-pale: #e4f6ea;
  --c-sky-line: #c0e6cd;
  --c-sky-wash: #f3fbf6;
  --c-g900: #141f19; --c-g800: #333f38; --c-g700: #4d5b53; --c-g600: #65726a;
  --c-g500: #7c8982; --c-g400: #939e98; --c-g300: #aab5af; --c-g250: #c2ccc6;
  --c-g200: #d5ded9; --c-g150: #e5ece8; --c-g100: #eff5f2; --c-g75: #f5faf7;
  --g-slide-1: linear-gradient(140deg, #12352a 0%, #1f8a5b 100%);
  --g-slide-2: linear-gradient(#9adcb6 0%, #e8f8ef 100%);
  --g-cta: linear-gradient(to right top, #ffb02b 0%, #ff5f3d 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #e5f5ec 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #fff1e4 0%, transparent 58%);
}

/* ── ⑤ 일몰 — 태양광에 가장 직관적 (25°) ───────────────────────────────────
   ⚠️⚠️ 브랜드가 따뜻해지면 **CTA 주황이 안 도드라진다** — 그래서 이 테마만
      **CTA 를 청록으로 돌린다.** 액센트는 브랜드의 보색이라야 눌린다.
   ⚠️ 코랄(「막힘」 태그 #dc4f36)과 브랜드가 가깝다. */
:root[data-palette="sunset"] {
  --c-text: #2a2119;
  --c-heading: #4a1e0c;
  --c-navy: #5a2411;
  --c-navy-deep: #33130a;
  --c-muted: #7d6d5c;
  --c-subtle: #6e5c4b;
  --c-blue: #e0631b;
  --c-blue-pale: #ffdcc4;
  --c-blue-solid: #e0631b;
  --c-blue-soft: #f2a274;
  --c-orange: #0d8a9c;
  --c-surface-alt: #fdf0e6;
  --c-surface-gray: #fadfc9;
  --c-surface-soft: #fdf9f5;
  --c-cream: #fff6ec;
  --c-line: #f2e2d5;
  --c-scrim: rgb(51 19 10 / 70%);
  --c-sky-pale: #fdeee2;
  --c-sky-line: #f7d7bd;
  --c-sky-wash: #fefaf6;
  --c-g900: #2a2119; --c-g800: #4c4136; --c-g700: #675b4c; --c-g600: #7c705f;
  --c-g500: #928573; --c-g400: #a89c87; --c-g300: #beb39f; --c-g250: #d4cab7;
  --c-g200: #e5dcca; --c-g150: #f0e9db; --c-g100: #f8f3e9; --c-g75: #fcf9f2;
  --g-slide-1: linear-gradient(140deg, #5a2411 0%, #e0631b 100%);
  --g-slide-2: linear-gradient(#ffc596 0%, #fff0e2 100%);
  --g-cta: linear-gradient(to right top, #12b5c8 0%, #0d6f9c 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #fdeee2 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #e6f6f8 0%, transparent 58%);
}

/* ── ⑥ 자주 — 프리미엄 (290°) ──────────────────────────────────────────────
   ⚠️ 바이올렛(「참고」 태그 #6b4fe0)과 겹친다. */
:root[data-palette="plum"] {
  --c-text: #1e1823;
  --c-heading: #2d1240;
  --c-navy: #3a1a4d;
  --c-navy-deep: #210d2e;
  --c-muted: #6e6775;
  --c-subtle: #5e5568;
  --c-blue: #8341a8;
  --c-blue-pale: #ecd9f6;
  --c-blue-solid: #8341a8;
  --c-blue-soft: #c294dd;
  --c-orange: #ff7a2b;
  --c-surface-alt: #f5ecfa;
  --c-surface-gray: #e7d2f2;
  --c-surface-soft: #faf6fc;
  --c-cream: #fff6ed;
  --c-line: #ebdff2;
  --c-scrim: rgb(33 13 46 / 70%);
  --c-sky-pale: #f4e9fa;
  --c-sky-line: #e2cbef;
  --c-sky-wash: #fbf7fd;
  --c-g900: #1e1823; --c-g800: #3d3546; --c-g700: #57505f; --c-g600: #6e6775;
  --c-g500: #857e8c; --c-g400: #9b94a1; --c-g300: #b1abb6; --c-g250: #c8c3cd;
  --c-g200: #dad5de; --c-g150: #e9e5ec; --c-g100: #f3f0f6; --c-g75: #f8f6fa;
  --g-slide-1: linear-gradient(140deg, #3a1a4d 0%, #8341a8 100%);
  --g-slide-2: linear-gradient(#d3a8ea 0%, #f3e7fa 100%);
  --g-cta: linear-gradient(to right top, #ffa32b 0%, #ff5f3d 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #f4eafa 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #fff1e4 0%, transparent 58%);
}

/* ── ⑦ 와인 — 중후함 (345°) ────────────────────────────────────────────────
   ⚠️ 코랄(「막힘」 태그)과 겹친다 — 판정 태그가 브랜드색으로 읽힐 수 있다. */
:root[data-palette="wine"] {
  --c-text: #231a1d;
  --c-heading: #3e0f1e;
  --c-navy: #4a1425;
  --c-navy-deep: #2a0a15;
  --c-muted: #756568;
  --c-subtle: #655357;
  --c-blue: #a8203f;
  --c-blue-pale: #f8d4dc;
  --c-blue-solid: #a8203f;
  --c-blue-soft: #e08599;
  --c-orange: #d98324;
  --c-surface-alt: #fbebef;
  --c-surface-gray: #f3d3db;
  --c-surface-soft: #fdf7f9;
  --c-cream: #fff5ec;
  --c-line: #f0dde3;
  --c-scrim: rgb(42 10 21 / 70%);
  --c-sky-pale: #fbe9ee;
  --c-sky-line: #f4cfd9;
  --c-sky-wash: #fdf7f9;
  --c-g900: #231a1d; --c-g800: #453539; --c-g700: #5f4e52; --c-g600: #756568;
  --c-g500: #8b7c7f; --c-g400: #a19295; --c-g300: #b6a9ac; --c-g250: #ccc1c4;
  --c-g200: #ded4d7; --c-g150: #ece5e7; --c-g100: #f5f0f1; --c-g75: #faf7f8;
  --g-slide-1: linear-gradient(140deg, #4a1425 0%, #a8203f 100%);
  --g-slide-2: linear-gradient(#eaa1b2 0%, #fbe7ec 100%);
  --g-cta: linear-gradient(to right top, #e8a53a 0%, #c0392b 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #fbeaef 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #fdf0e0 0%, transparent 58%);
}

/* ── ⑧ 브론즈 — 금속·설비 (45°) ────────────────────────────────────────────
   ⚠️ 앰버(「확인할 것」 태그 #cf8306)와 겹친다.
   ⚠️ CTA 를 청록으로 돌린다(일몰과 같은 이유 — 따뜻한 브랜드에 따뜻한 CTA 는 안 눌린다). */
:root[data-palette="bronze"] {
  --c-text: #26221a;
  --c-heading: #3a2e12;
  --c-navy: #3a2e12;
  --c-navy-deep: #211a08;
  --c-muted: #79705e;
  --c-subtle: #6a614f;
  --c-blue: #9a7b1f;
  --c-blue-pale: #f3e5bd;
  --c-blue-solid: #9a7b1f;
  --c-blue-soft: #d9c274;
  --c-orange: #0e7c8a;
  --c-surface-alt: #f8f2e0;
  --c-surface-gray: #efe3c3;
  --c-surface-soft: #fbf9f1;
  --c-cream: #fff8e8;
  --c-line: #eee6d2;
  --c-scrim: rgb(33 26 8 / 70%);
  --c-sky-pale: #f7f1de;
  --c-sky-line: #ece0bb;
  --c-sky-wash: #fcfaf3;
  --c-g900: #26221a; --c-g800: #474034; --c-g700: #625a4b; --c-g600: #776f5e;
  --c-g500: #8d8472; --c-g400: #a39a86; --c-g300: #b9b09c; --c-g250: #cfc7b4;
  --c-g200: #e1dac6; --c-g150: #ede8d9; --c-g100: #f6f2e8; --c-g75: #fbf9f2;
  --g-slide-1: linear-gradient(140deg, #3a2e12 0%, #9a7b1f 100%);
  --g-slide-2: linear-gradient(#e2cf8a 0%, #f8f2dd 100%);
  --g-cta: linear-gradient(to right top, #22b3c4 0%, #0d6f9c 100%);
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #f7f1de 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #e6f6f8 0%, transparent 58%);
}

/* ══ 제어부 — ⚠️⚠️ **개발용이다.** 데모·배포 전에 떼거나 관문 뒤로 옮긴다.
      (`js/theme.js` 한 줄과 이 파일 한 줄만 빼면 된다)
   ⚠️ 인쇄에는 안 나간다 — 제안서·검토서를 PDF 로 저장하는 제품이다.
   ⚠️ 오른쪽에 두지 않는다 — 루트 페이지의 `.quick` 플로팅 바(82px)가 거기 있고,
      그것이 이미 내용을 덮은 적이 있다. ══════════════════════════════════════ */
.thbar {
  position: fixed; left: 12px; bottom: 12px; z-index: 900;
  /* ⚠️ 후보가 여덟이 됐다 — **줄바꿈을 허용**하지 않으면 화면 밖으로 나간다.
     좁은 화면에서 오른쪽 끝이 잘려 마지막 후보를 못 누른다. */
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: calc(100vw - 24px);
  padding: 6px 8px; border-radius: 10px;
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--c-line, #e3e9f2);
  box-shadow: 0 6px 20px rgb(13 20 48 / 14%);
  font: 500 12px/1.2 system-ui, sans-serif;
  color: var(--c-muted, #6b7489);
}
.thbar__t { font-weight: 700; color: var(--c-text, #1c2333); }
.thbar__b {
  border: 1px solid var(--c-g200, #d8dde8); background: #fff;
  color: var(--c-text, #1c2333);
  padding: 4px 8px; border-radius: 7px; cursor: pointer;
  font: 600 12px/1.2 system-ui, sans-serif;
}
.thbar__b:hover { border-color: var(--c-blue, #2f6bf0); }
.thbar__b.is-on {
  background: var(--c-blue, #2f6bf0); border-color: var(--c-blue, #2f6bf0);
  color: #fff;
}
/* ⚠️ 색 견본을 함께 보여준다 — 이름만으로는 무엇이 바뀌는지 모른다 */
.thbar__sw {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}
@media print { .thbar { display: none !important; } }
@media (max-width: 720px) { .thbar { font-size: 11px; padding: 5px 6px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ★★★ 제안서(pptx) 색을 **테마에 잇는다** (2026-09-11 사용자 지적)

   *"pdf 로 만들면 의미없는 배경색만 바뀌는데? 나는 타이틀 배경과 글자색등이
   변하는걸 원했는데."* — 맞다. 제안서 슬라이드의 색은 **전부 `layout.json` 에
   박힌 값**(35종 · 1,628곳)이고 토큰을 **한 번도** 안 썼다. 그래서 테마가 바꾼
   것은 페이지 바깥 껍데기뿐이었다.

   ★ `proposal.js` 의 `cvar()` 가 `#3E6BAC` → `var(--ppc-3e6bac, #3E6BAC)` 로 낸다.
     · **기본 테마는 폴백이라 원본 색 그대로** — 「원본 그대로 옮긴다」가 지켜진다
     · 아래 한 블록이 **테마가 하나라도 걸리면** 적용된다(`[data-palette]` 속성 존재)
     ⭐ 그래서 **여기만 적으면 세 테마가 다 따라온다** — 값은 각 테마의 `--c-*` 다

   ⛔ **안 건드리는 색 셋** — 건드리면 문서가 고장 난 것처럼 보인다:
     · `#FFFFFF` (295곳) — 남색 띠 위 **흰 글자**다. 바꾸면 제목이 사라진다
     · 녹색기 5종(`#232B27`·`#1F6E43`·`#143A2B`·`#6B736E`·`#E7EFE7`) — 로고·푸터
     · `#FFFF00` (1곳) — 템플릿 작성자의 형광 표시(원본에 있어서 그대로 둔 것)
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-palette] {
  /* ── 타이틀 띠와 진한 파랑 — **원하신 「타이틀 배경」이 이것이다** ─────────── */
  --ppc-3e6bac: var(--c-navy);        /* 173곳 · 슬라이드 제목 띠 */
  --ppc-4475bc: var(--c-blue);        /*  25곳 · 띠 변형 */
  --ppc-2b4b79: var(--c-navy-deep);   /*  10곳 */
  --ppc-002f61: var(--c-navy-deep);   /*  39곳 · 진한 남색 글자 */
  --ppc-002774: var(--c-navy-deep);   /*   1곳 */

  /* ── 연한 파랑 면·줄 ──────────────────────────────────────────────────── */
  --ppc-b3c6e3: var(--c-sky-line);    /*  86곳 · 타이틀 아래 줄 */
  --ppc-d7e1f1: var(--c-sky-line);    /*  12곳 */
  --ppc-e8edf8: var(--c-sky-pale);    /* 288곳 · 표·카드 면 */
  --ppc-ecf1f8: var(--c-sky-pale);    /*   8곳 */
  --ppc-f6f9fc: var(--c-sky-wash);    /*  35곳 · 슬라이드 바탕 */
  --ppc-f3f3ff: var(--c-sky-wash);    /*  18곳 */
  --ppc-d2dbe5: var(--c-g200);        /*   1곳 */
  --ppc-9ca2ae: var(--c-g400);        /*   3곳 · 회색 글자 */
  --ppc-f3f4f6: var(--c-g100);        /*   1곳 */

  /* ── 글자 회색 계단 — **원하신 「글자색」이 이것이다** ──────────────────────
     ⚠️ 순검정(146곳)을 `--c-g900` 으로 보낸다. `tokens.css` 가 *"순검정은
        딱딱하다"* 고 적어 둔 그 자리다 — 덤으로 읽힘이 좋아진다. */
  --ppc-000000: var(--c-g900);        /* 146곳 */
  --ppc-262626: var(--c-g900);        /* 101곳 */
  --ppc-404040: var(--c-g800);        /*  67곳 */
  --ppc-464646: var(--c-g800);        /*   6곳 */
  --ppc-595959: var(--c-g700);        /*  51곳 */
  --ppc-808080: var(--c-g500);        /*  31곳 */
  --ppc-bfbfbf: var(--c-g300);        /*   7곳 */
  --ppc-f2f2f2: var(--c-g100);        /*  49곳 */
  --ppc-f7f7f7: var(--c-g75);         /*   1곳 */

  /* ── 강조 주황 ────────────────────────────────────────────────────────── */
  --ppc-ee7a3a: var(--c-orange);      /*   5곳 */
  --ppc-fcece4: var(--c-cream);       /*   3곳 */
  --ppc-fcd5b5: var(--c-cream);       /*   1곳 */
}