/* [현재 유효] 다나음 홈페이지 토큰 — 색·글자·간격·모서리는 여기서만 정한다(단일 출처).
   다른 CSS·HTML 에 # 색값을 직접 쓰지 않는다. 값을 바꾸면 모든 쪽이 따라온다.
   출처 : 로고 .ai(사진자료/logo1-가로 · 2025-05) 의 채움색 #2DAEB5(청록) · #353536(먹) · #7D8182(회색) 을 그대로 쓰고,
          나머지는 그 둘에서 파생했다. 대비 수치는 흰 바탕 기준(WCAG). 기획 「디자인 기준안」 4장의 센터 보조색 셋을 그대로 둔다. */

:root {
  /* ── 브랜드 청록 ─────────────────────────────── */
  --c-brand: #2DAEB5;        /* 로고 원색. 큰 면·마크·장식·띠에만 쓴다 — 흰 글자 대비 2.7:1 이라 글자로 쓰지 않는다 */
  --c-brand-ink: #157C82;    /* 글자·링크·단추 바탕. 흰 바탕 대비 4.96:1 · 위에 흰 글자 4.96:1 */
  --c-brand-deep: #0F6166;   /* 제목 강조 · 단추 hover. 7.2:1 */
  --c-brand-soft: #E4F5F6;   /* 연한 청록 바탕(배지·띠) */
  --c-brand-mist: #F2FAFA;   /* 가장 연한 청록. 큰 면 */

  /* ── 먹과 회색 ───────────────────────────────── */
  --c-ink: #2E3233;          /* 큰 제목 */
  --c-text: #353536;         /* 본문 (로고 먹) · 12.3:1 */
  --c-mute: #5F6A6D;         /* 보조 글 · 5.6:1 */
  --c-line: #DCE3E4;         /* 선 */
  --c-bg: #FFFFFF;
  --c-bg2: #F4F7F7;          /* 연회색 바탕 하나. 청록 쪽으로 살짝 기울인 회색 */

  /* ── 센터 보조색 (기획 4장) — 그 센터 쪽에서만, 강조 한 곳에만 ── */
  --c-spine: #2B4C8C;        --c-spine-soft: #E7ECF6;
  --c-accident: #9A4F1F;     --c-accident-soft: #F8EEE6;   /* 교통사고 · 따뜻한 갈색주황 · 6.0:1 */
  --c-onco: #8C6430;         --c-onco-soft: #F3E6D2;   --c-onco-line: #C7AF8E;   /* 암면역 센터 정체성 색(tokens-cancer.css 와 같은 값 · 2026-09-17 원장님 「센터 정체성이 드러나게」). 5.3:1 */

  /* ── 카카오톡 단추 — 카카오 브랜드 색(카카오 가이드 값 · 이 둘 밖에서는 쓰지 않는다) ── */
  --c-kakao: #FEE500;
  --c-kakao-ink: #191919;

  /* ── 상태 ───────────────────────────────────── */
  --c-ok: #2F7D4F;
  --c-warn: #9A4F1F;
  --c-stop: #9C2F2A;

  /* ── 글꼴 ───────────────────────────────────── */
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --lh-tight: 1.25;
  --lh-body: 1.7;

  /* ── 글자 사다리 — 하나만 쓴다. 본문은 폰 16 · PC 18 (fs-3 / fs-4) ── */
  --fs-1: 0.8125rem;                                   /* 13 · 각주·표 안 */
  --fs-2: 0.9375rem;                                   /* 15 · 보조 글 */
  --fs-3: 1rem;                                        /* 16 · 폰 본문 */
  --fs-4: 1.125rem;                                    /* 18 · PC 본문 */
  --fs-5: 1.25rem;                                     /* 20 · 리드 · 카드 제목 */
  --fs-6: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);    /* 22~28 · 소제목 */
  --fs-7: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);      /* 28~40 · 절 제목 */
  --fs-8: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);     /* 34~56 · 첫 화면 제목 */
  --fs-9: 4rem;                                        /* 64 · 관문 병원 이름(제호형 · PC 만 · 원장님 2026-09-28) */

  /* ── 간격 (4 의 배수) ─────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ── 모서리·그림자·너비 ───────────────────────── */
  --r-1: 8px; --r-2: 16px; --r-3: 24px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 40, 42, 0.06), 0 4px 16px rgba(20, 40, 42, 0.06);
  --shadow-2: 0 8px 32px rgba(20, 40, 42, 0.12);
  --w-content: 1120px;       /* 본문 폭 */
  --w-text: 44rem;           /* 글 한 줄 ≈ 한글 40자 */
  --h-top: 64px;             /* 머리띠 높이 */
  --h-dock: 64px;            /* 폰 아래 고정 단추 높이 */
}

/* 글자 크기 조절(기획 5장 · 자생과 같은 방식) — html[data-size] 로 뿌리 크기만 바꾼다. rem 사다리가 통째로 따라온다 */
html { font-size: 100%; }
html[data-size="lg"] { font-size: 112.5%; }
html[data-size="xl"] { font-size: 125%; }