/* UK Clinic design tokens — UK_Clinic_Brand_Guide_V1 "HANDOFF TOKENS" 기준.
   색·폰트·폭은 이 파일에서만 바꾼다. 화면은 아래 "역할" 변수만 쓴다. */
:root {
  /* Official brand colors — do not modify */
  --uk-ivory: #F8F7F1;
  --uk-navy: #1C2D60;
  --uk-burgundy: #901D22;
  --uk-gold-soft: #BDA16E;
  --uk-gold-rich: #C09344;

  /* Supporting UI colors — suggested */
  --uk-white: #FFFFFF;
  --uk-text: #253047;
  --uk-muted: #566073;
  --uk-border: #DFDBCF;

  --font-family: 'Pretendard', 'Apple SD Gothic Neo',
                 'Malgun Gothic', sans-serif;
  --content-max: 1140px;
  --reading-max: 740px;

  /* 프로토타입 보조값 (브랜드 팔레트 아님) */
  --uk-placeholder: #ECEAE1;        /* 준비 중 자리 배경 */
  --uk-burgundy-soft: #F5EAE8;      /* 버건디 옅은 바탕 (칩·hover) */
  --uk-ivory-on-navy: #E3E5EC;      /* 네이비 위 보조 글자 (대비 10.5:1) */
  --gutter: 22px;
  /* 간격 규칙 (휴대폰 값, PC 값은 아래) */
  --section-pad: 80px;   /* 섹션 위아래 */
  --block-gap: 56px;     /* 섹션 안 큰 묶음 사이 */
  --head-gap: 32px;      /* 제목 → 내용 */
  --row-gap: 44px;       /* 상세 페이지 행 사이 */
  --header-h: 64px;
  --bottom-nav-h: 60px;
  --radius: 10px;

  /* ── 역할 ── */
  --c-heading: var(--uk-navy);          /* 제목·강조 글자 */
  --c-text: var(--uk-text);
  --c-muted: var(--uk-muted);
  --c-accent: var(--uk-burgundy);       /* 버튼·흐름 번호·표 머리·현재 위치 */
  --c-on-accent: var(--uk-white);
  --c-accent-soft: var(--uk-burgundy-soft);
  --c-line-strong: var(--uk-burgundy);  /* 굵은 구분선 */
  --c-line-gold: var(--uk-gold-soft);   /* 장식선·점 (글자에는 쓰지 않음) */
  --c-back-bg: var(--uk-gold-soft);     /* 돌아가기 버튼 — 골드는 안내·이동 */
  --c-back-fg: var(--uk-navy);          /* 대비 5.3:1 */
  --c-note: #474F61;                    /* 안내 문장 (아이보리 위 7.6:1, 흰 바탕 8.2:1) */
  --c-link: var(--uk-burgundy);         /* 자세히 읽기 링크 (아이보리 위 8.2:1) */

  /* ── 첫 화면 영상 위 그라데이션 ── */
  --hero-shade-strong: rgba(20, 24, 40, .78);   /* PC 아래쪽 */
  --hero-shade-mid: rgba(20, 24, 40, .45);
  --hero-shade-top: rgba(20, 24, 40, .72);      /* 휴대폰 위쪽 */
  --hero-shade-top-mid: rgba(20, 24, 40, .42);

  /* ── 섹션 배경 리듬 ── */
  --sec-bg: var(--uk-ivory);            /* 기본 */
  --sec-alt-bg: var(--uk-white);        /* 번갈아 쓰는 흰 바탕 */
  --sec-dark-bg: var(--uk-navy);        /* 원장 소개 */
  --sec-dark-heading: var(--uk-ivory);  /* 네이비 위 제목 12.3:1 */
  --sec-dark-text: var(--uk-ivory-on-navy);  /* 네이비 위 본문 10.5:1 */
  --sec-dark-muted: #C9CDD9;            /* 네이비 위 보조 글자 8.3:1 */
  --sec-dark-rule: rgba(248, 247, 241, .2);  /* 네이비 위 구분선 (원장 사이) */
  --footer-rule: rgba(248, 247, 241, .2);    /* 푸터 구분선 */
  --lightbox-bg: rgba(12, 18, 38, .96); /* 크게 보기 배경 */

  /* 카카오톡 상담 버튼 (카카오 가이드 색, 대비 14:1) */
  --kakao-bg: #FEE500;
  --kakao-fg: #191919;
  /* 네이버 지도 버튼 (네이버 초록) */
  --naver-bg: #03C75A;
  --naver-fg: #0B1F14;   /* 대비 7.6:1 (17차) */

  /* ── 상단: 버건디 (색감 확정 2026-10-29) ── */
  --header-bg: var(--uk-burgundy);
  --header-fg: var(--uk-ivory);         /* 대비 8.2:1 */
  --header-hover-bg: rgba(248, 247, 241, .14);
  --header-line: rgba(248, 247, 241, .18);
  --logo-color: var(--uk-gold-soft);    /* 로고(그래픽) 대비 3.6:1 */

  /* ── 하단: 네이비 ── */
  --footer-bg: var(--uk-navy);
  --footer-fg: var(--uk-ivory);         /* 12.3:1 */
  --footer-muted: var(--uk-ivory-on-navy); /* 10.5:1 */
  --footer-logo: var(--uk-gold-soft);   /* 로고(그래픽) 대비 5.3:1 */
}

body {
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 1.75;
  background: var(--sec-bg);
  color: var(--c-text);
}

@media (max-width: 768px) {
  body { font-size: 17px; }
}

@media (min-width: 861px) {
  :root { --section-pad: 104px; --block-gap: 72px; --head-gap: 48px; --row-gap: 56px; }
}