/* ══ 색 ══ 손님이 40~60대 여성이다. 45세부터 수정체가 노랗게 흐려져
   대비가 낮은 회색부터 눈에서 사라진다. 예뻐 보이려고 옅게 쓰면 안 읽히신다.
   그래서 모든 글자색을 WCAG AA(보통 4.5:1 · 큰 글자 3:1) 위로 올려두었다.
   재는 자: node t_contrast.mjs – 옅게 고치면 거기서 잡힌다.
     --muted  4.40 → 5.23   --faint 3.05 → 4.84   --warn 4.19 → 5.29  (surface-2 기준) */
:root{
  /* 왜 #001 */
  --bp-xs: 380px;      /* 아주 좁은 폰 */
  --bp-phone: 430px;   /* 폰 */
  --bp-wide: 720px;    /* PC – 두 단 */

  /* 왜 #002 */
  --progh: 64px;
  --qstickh: 52px;

  --bg:#FBFAF8; --surface:#FFFFFF; --surface-2:#F3F5F4; --sunken:#EDF0EF;
  --ink:#1A211F; --ink-2:#3E4A47; --muted:#5C6965; --faint:#636E68;
  --accent:#0F8F80; --accent-soft:#E3F0ED; --accent-ink:#0A6055; --accent-line:#9FCEC6;
  --btn:#0C7A6D;   /* 단추 바탕. --accent 위의 흰 글자는 3.99 라 모자랐다 */
  --rule:#E3E7E5; --rule-2:#D0D8D5;
  --warn:#9A5316; --warn-soft:#FBF0E4; --warn-line:#E5C49A;
  --gold:#8A6E2F;
  /* 지시-1022i – 금빛 단추 · 금빛 밑줄 · 아래 메뉴 상자 · 머리줄 흐림. 흰 바탕에서도 4.5:1 을 넘는 진한 황동. */
  --gold-grad:linear-gradient(135deg,#B8923F 0%,#8A6E2F 100%); --gold-soft:rgba(138,110,47,.38);
  --dock-bg:#ffffff; --dock-line:rgba(138,110,47,.22); --head-bg:rgba(251,250,248,.88);
  --accent-ring:rgba(15,143,128,.3);
  --oh-mok:#2E7D5B; --oh-hwa:#B4462F; --oh-to:#8A6E2F; --oh-geum:#5A6B78; --oh-su:#2F5E86;

  /* 전체 풀이(.fr-*) 모양 – 2026-09-28 유료 화면에서 만든 것을 2026-09-29 무료 화면도
     쓰도록 여기(:root)로 옮겼다. #report 안에서만 쓰던 것을 화면 전체가 쓸 수 있게. */
  --fr-paper:var(--surface); --fr-red:#A23B2A; --fr-rule:var(--rule-2);

  /* ★ --line 과 --card 는 화면 열다섯 곳이 쓰고 있는데 정의가 없었다.
     정의 없는 var() 는 그 선언을 통째로 무효로 만든다. 그래서 지금까지
     카드의 테두리와 바탕이 아예 안 그려지고 있었다(칩 테두리가 글자색으로 보인 것은
     border-color 가 currentColor 로 떨어진 탓이다).
     이름을 고치려면 열다섯 곳을 손대야 하고, 그중 하나를 놓치면 거기만 또 사라진다.
     여기서 한 번에 이어 준다. 어두운 테마는 아래 두 벌이 그대로 받는다. */
  --line: var(--rule-2);
  --card: var(--surface);

  /* ══ 글자 크기 – 여기 있는 여덟 개 말고는 쓰지 않는다 ══
     예전에는 264곳에 51가지 값이 흩어져 있었다. .86 과 .88 은 0.32px 차이라
     아무도 구분 못 하지만, 한 화면에 나란히 놓이면 줄이 안 맞아 보인다.
     ★ 새 규칙을 더할 때도 여기 있는 것만 쓴다. 새 값을 만들지 않는다.
     ★ 여기 안 들어간 자리는 하나뿐이다:
         #lg-code(1.25rem) – 자간 .22em 에 맞춰 320px 에서 열 자리가
                             들어가도록 잰 값이다. 건드리면 다시 재야 한다.
       값 두 개(.wall .price · .onlyprice .opp)는 --fs-3xl 이 생기면서
       들어왔다. 그 둘은 아무것도 안 줄었다.
     ★ 그리고 clamp() 다섯 곳과 세 축 그림(.axes3)의 px 다섯은 그대로 둔다.
       clamp 는 폭에 따라 자라는 자리고, .axes3 의 px 는 viewBox 좌표다. */
  --fs-xs:   .78rem;   /* 12.5px  딱지·라벨·칩 */
  --fs-sm:   .88rem;   /* 14.1px  보조 설명·각주 */
  --fs-md:   .96rem;   /* 15.4px  작은 본문 */
  --fs-base: 1.1rem;   /* 17.6px  본문 – 명조라 고딕 때보다 한 눈금 올린다.
                          ★ 1.05rem 이었는데 그러면 .lead 가 17.6 → 16.8px 로
                            줄었다. 1.00~1.10 구간에서 줄어드는 자리가 하나도
                            없게 이 값으로 올렸다(재봤다). 카드 본문은
                            16.5 → 17.6px 로 커진다 – 노안 규칙과 같은 방향이다. */
  --fs-lg:   1.2rem;   /* 19.2px  소제목 */
  --fs-xl:   1.45rem;  /* 23.2px  제목 */
  --fs-2xl:  1.75rem;  /* 28.0px  큰 제목 */
  --fs-3xl:  2.3rem;   /* 36.8px  값 – 여기만 이 단계를 쓴다.
                          2.2rem 으로 두면 .onlyprice .opp 가 36.8 → 35.2px 로
                          줄어든다. 값이 작아지는 것은 반대 방향이라 2.3 이다. */
}
:root[data-theme="dark"]{
  --bg:#0F1312; --surface:#161C1A; --surface-2:#1D2422; --sunken:#131817;
  --ink:#E9EEEC; --ink-2:#C0CAC7; --muted:#8C9A96; --faint:#828F8B;
  --accent:#189E88; --accent-soft:#152B27; --accent-ink:#54C9B1; --accent-line:#2C5A51;
  --rule:#27302D; --rule-2:#343E3B;
  --warn:#D8944B; --warn-soft:#2A2016; --warn-line:#4A3722;
  --gold:#C6A75E;
  --gold-grad:linear-gradient(135deg,#E3C27E 0%,#B8923F 100%); --gold-soft:rgba(198,167,94,.38);
  --dock-bg:#161618; --dock-line:rgba(198,167,94,.24); --head-bg:rgba(15,19,18,.86);
  --accent-ring:rgba(24,158,136,.35);
  --oh-mok:#5FBF91; --oh-hwa:#E2795E; --oh-to:#CBA75E; --oh-geum:#9BB0C0; --oh-su:#6BA6D8;
  --fr-red:#E88A73;
}

/* ══ 먹빛 – 첫 화면(#s0)과 생년월일 화면(#s1)에만 ══════════════════════════
   ★ 검정이 아니라 먹빛이다. R18 · G17 · B14 로 빨강이 파랑보다 높다.
     먹을 갈면 순수 검정이 아니라 갈색이 도는 짙은 색이 나온다. 그 색이다.
   #000 으로 바꾸면 셋이 한꺼번에 깨진다.
     ① 금(#e1ad66)은 따뜻한 색이라 차가운 검정 위에서 부딪혀 탁해진다.
        이 화면은 금색이 사느냐가 전부이고, 그것을 바탕이 정한다.
     ② 순수 검정 위의 밝은 글씨는 대비가 너무 세서 글자 둘레가 번진다. 노안에서 심하다.
     ③ OLED 는 #000 에서 픽셀을 꺼서 스크롤할 때 글자가 끌린다.
   바탕(18)과 카드(27)는 명도 차가 한 단계뿐이다. 카드가 도드라지지 않고
   바탕에서 살짝 떠오르기만 한다. 이 차이를 벌리지 말 것.
   ★ #605d5d 는 쓰지 않는다 – 먹빛 위에서 2.90 이라 미달이다. 그 자리는 #9b9797.
   낱낱의 규칙을 고치지 않는다. 변수만 덮어쓴다. */
body.night{
  --bg:#12110e; --surface:#1b1914; --surface-2:#1b1914; --sunken:#12110e;
  --ink:#f3f2f2; --ink-2:#d7d3d3; --muted:#9b9797; --faint:#bab6b6;
  --rule:rgba(243,242,242,.12); --rule-2:rgba(225,173,102,.28);
  --line:rgba(243,242,242,.12); --card:#1b1914;
  --accent:#0FA894; --accent-ink:#36C4AE; --accent-line:#0FA894; --accent-ring:rgba(15,168,148,.35);
  --accent-soft:rgba(15,168,148,.14); --gold:#e1ad66;
  --gold-grad:linear-gradient(135deg,#F0CB85 0%,#C99A4F 100%); --gold-soft:rgba(225,173,102,.36);
  --dock-bg:#161618; --dock-line:rgba(225,173,102,.26); --head-bg:rgba(18,17,14,.84);
  --btn:#0FA894;
  background:#12110e; color:#f3f2f2;
  transition:background-color .4s ease, color .4s ease; /* 합침 – 01 아래 묶음 body.night, body.night .prog 에서 */
}
body.night .prog{transition:background-color .4s ease, color .4s ease}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
 font-family:"Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",serif;line-height:1.72;
 -webkit-font-smoothing:antialiased;
 word-break:keep-all;overflow-wrap:break-word}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.35rem 5rem}