/* =========================================================
   운정뿌리사랑치과 디자인 시스템 — 토큰
   사이트 전체의 색·글꼴·간격·둥글기·유리·움직임 값은 모두 여기에서만 정합니다.
   다른 파일은 이 값을 var(--rl-…)로 가져다 씁니다. 값 하나를 바꾸면 모든 페이지가 함께 바뀝니다.
   ========================================================= */
:root {
  /* ---------- 색 ---------- */
  --rl-ink: #173652;                 /* 기본 글자, 남색 버튼 */
  --rl-ink-hover: #10293f;           /* 남색 버튼 마우스 올림 */
  --rl-ink-on-glass: #2c455e;        /* 유리 위 작은 글 (가장 어두운 배경에서도 대비 5.0:1) */
  --rl-accent: #006eff;              /* 사진 위 버튼 마우스 올림 (원본 브랜드 파랑) */
  --rl-page: #f3f6f9;                /* 페이지 바탕 (원본) */
  --rl-white: #ffffff;
  --rl-line-on-light: #cddbe6;       /* 밝은 바탕의 구분선 */
  --rl-line-on-dark: rgba(255, 255, 255, .18);  /* 남색 패널의 구분선 */
  --rl-head-line-opacity: .22;       /* 섹션 머리 위 가는 선 (글자색 기준 투명도) */

  /* 사진 톤 */
  --rl-tone-hero: saturate(0.88) brightness(0.93) contrast(1.02);
  --rl-tone-concept: saturate(0.5) hue-rotate(18deg) brightness(0.78) contrast(1.16);  /* 청록 연출 이미지 → 남색 계열 */
  --rl-tone-concept-bg: #163c63;
  --rl-hero-shade: linear-gradient(180deg, rgba(16, 46, 80, .34) 0%, rgba(16, 46, 80, .06) 34%, rgba(10, 42, 76, .2) 58%, rgba(6, 36, 70, .86) 100%);

  /* ---------- 글꼴 ---------- */
  --rl-font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --rl-tracking-body: -0.012em;
  /* 역할별 굵기·자간 */
  --rl-fw-display: 500;      --rl-tracking-display: -0.062em;     /* 영문 큰 제목 (Our Care. 등) */
  --rl-fw-heading: 400;      --rl-tracking-heading: -0.036em;     /* 큰 한글 제목 (두 줄 제목) */
  --rl-fw-subheading: 450;   --rl-tracking-subheading: -0.032em;  /* 중간 한글 제목 */
  --rl-fw-title: 600;        --rl-tracking-title: -0.038em;       /* 카드 제목 */
  --rl-fw-label: 600;        --rl-tracking-label: -0.015em;       /* + 섹션 라벨 */
  --rl-fw-ui: 500;           --rl-tracking-ui: -0.02em;           /* 메뉴, 버튼 */
  --rl-fw-photo: 500;        --rl-tracking-photo: -0.045em;       /* 사진 위 큰 제목 (사진 위라 한 단계 굵게) */
  --rl-fw-number: 500;       --rl-tracking-number: -0.05em;       /* 큰 숫자 (01, 02) */
  /* 크기 */
  --rl-fs-label: 14px;
  --rl-fs-ui: 15px;
  --rl-fs-pill: 14.5px;
  --rl-fs-note: 15px;        --rl-lh-note: 1.7;
  --rl-fs-hero-title: clamp(26px, 2.3vw, 34px);
  --rl-fs-statement: clamp(30px, 2.65vw, 40px);
  --rl-fs-service: clamp(26px, 2.35vw, 34px);
  --rl-fs-card-title: 22px;
  --rl-fs-caption-title: 20px;
  --rl-fs-faq: 17px;
  --rl-fs-lead: 22px;        --rl-lh-lead: 1.6;   /* 섹션 안 긴 안내 문장 */
  --rl-fs-small-title: 20px;                     /* 단계·사실 카드 제목 */

  /* ---------- 간격 ---------- */
  --section-gap: clamp(92px, 9.2vw, 150px);   /* 섹션 위아래 (원본 변수 이름 그대로) */
  --rl-head-line-gap: 36px;                  /* 섹션 머리: 가는 선 ~ 첫 줄 */
  --rl-head-gap-lg: 5vw;                     /* 큰 영문 제목 머리 아래 (Our Care.) */
  --rl-head-gap-md: 4.1vw;                   /* 패널 안 머리 아래 */
  --rl-head-gap-sm: 36px;                    /* 짧은 머리 아래 */
  --rl-head-gap-row: 52px;                   /* 가로로 놓인 머리 아래 */
  --rl-header-space: 64px;                   /* 첫 화면 위 (원본 머리글 높이 기준) */
  --rl-subpage-top: 92px;                    /* 하위 페이지: 캡슐 ~ 경로 표시 */

  /* ---------- 둥글기 ---------- */
  --rl-r-panel: 28px;        /* 메인의 큰 패널 */
  --rl-r-sub: 24px;          /* 하위 페이지의 패널·카드 (원본 값) */
  --rl-r-card: 22px;
  --rl-r-tile: 18px;
  --rl-r-media: 16px;
  --rl-r-media-sm: 14px;
  --rl-r-pill: 999px;

  /* ---------- 유리 (리퀴드) ---------- */
  --rl-cap-m: clamp(16px, 3.4vw, 48px);      /* 캡슐 좌우 여백 */
  --rl-cap-h: 60px;                          /* 캡슐 높이 */
  --rl-cap-top: 18px;                        /* 캡슐 위 여백 */
  --rl-cap-tools-offset: 10px;               /* 캡슐 오른쪽 끝 ~ 전화·예약 */
  --rl-glass-cap-bg: rgba(255, 255, 255, .56);
  --rl-glass-cap-blur: saturate(140%) blur(14px);
  --rl-glass-cap-line: rgba(255, 255, 255, .24);
  --rl-glass-cap-shadow: 0 1px 2px rgba(20, 40, 60, .04), 0 10px 28px rgba(20, 40, 60, .06);
  --rl-glass-sheet-bg: rgba(243, 246, 249, .62);
  --rl-glass-sheet-blur: saturate(140%) blur(32px);
  --rl-glass-sheet-line: rgba(255, 255, 255, .3);
  --rl-glass-sheet-shadow: 0 18px 44px rgba(20, 45, 75, .08);
  --rl-glass-btn-bg: rgba(255, 255, 255, .34);
  --rl-glass-btn-blur: saturate(140%) blur(10px);
  --rl-glass-btn-line: rgba(255, 255, 255, .34);
  --rl-glass-solid: rgba(255, 255, 255, .94);  /* 흐림 미지원·투명도 줄이기일 때 */

  /* ---------- 움직임 ---------- */
  --rl-ease: cubic-bezier(.16, 1, .3, 1);      /* 사진·선 */
  --rl-ease-text: cubic-bezier(.22, 1, .36, 1); /* 글 */
  --rl-ease-io: cubic-bezier(.65, 0, .35, 1);  /* 선 긋기 */
  --rl-ease-btn: cubic-bezier(.2, .7, .1, 1);  /* 버튼 회전 */
  --rl-dur-lines: 1.6s;     --rl-stagger-lines: 130ms;   /* 한 줄씩 */
  --rl-dur-chars: 1.35s;    --rl-stagger-chars: 42ms;    /* 한 글자씩 */
  --rl-dur-fade: 1.25s;     --rl-dur-fade-move: 1.35s;  --rl-fade-distance: 16px;
  --rl-dur-img: 1.5s;       --rl-dur-img-zoom: 1.9s;    --rl-img-zoom: 1.14;
  --rl-dur-draw: 1.5s;
  --rl-hover-zoom: 1.045;
  /* 시작 지점 (스크립트가 읽음): 화면 아래에서 이만큼 올라온 선을 넘으면 시작 */
  --rl-trigger-text: 33%;
  --rl-trigger-img: 18%;
  --rl-trigger-img-visible: 0.2;
}

@media (max-width: 1100px) {
  :root { --rl-cap-tools-offset: 62px; }   /* 태블릿: 메뉴 버튼(☰) 왼쪽에 전화·예약 */
}
@media (max-width: 700px) {
  :root {
    --rl-cap-m: 16px; --rl-cap-h: 56px; --rl-cap-top: 22px; --rl-cap-tools-offset: 60px;
    --rl-head-line-gap: 32px;
    --rl-head-gap-lg: 32px; --rl-head-gap-md: 32px; --rl-head-gap-sm: 32px; --rl-head-gap-row: 32px;
  }
}