/* 예일안과 리뉴얼 디자인 토큰 (피그마 "2026 예일안과 리뉴얼" 기준, 2026-10-13)
   - 모든 변수는 --rn- 접두어: 기존 사이트 CSS 와 섞여도 충돌하지 않게 */
:root {
    /* Blue */
    --rn-blue-50: #e7eeff;
    --rn-blue-100: #b7c6f3;
    --rn-blue-200: #899ee3;
    --rn-blue-400: #3b4eb6;
    --rn-blue-500: #1d2a8f;
    --rn-blue-600: #161e5c; /* 주컬러-01 */
    --rn-blue-700: #1b2046;
    --rn-blue-900: #0f1128;
    --rn-blue-accent: #7585da; /* 푸터 상담전화 */

    /* Gray */
    --rn-gray-50: #f7f7f7;
    --rn-gray-200: #d9d9d9;
    --rn-gray-300: #b7b7b7;
    --rn-gray-400: #9d9d9d;
    --rn-gray-500: #757575;
    --rn-gray-600: #515151;
    --rn-gray-700: #333333;
    --rn-gray-800: #1e1e1e;
    --rn-gray-900: #262626;
    --rn-black: #000000;
    --rn-white: #ffffff;
    --rn-white-70: rgba(255, 255, 255, 0.7);
    --rn-white-30: rgba(255, 255, 255, 0.3);

    /* 실크라식 포인트 (변수 없음 → 시안 값) */
    --rn-red-600: #bb1c1c;
    --rn-red-50: #fff4f4;

    /* Font */
    --rn-font-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --rn-font-serif: 'Cormorant Infant', 'Times New Roman', serif;

    /* Layout: 1920 기준 좌우 120, 화면이 줄면 비례 축소 */
    --rn-max: 1920px;
    --rn-margin: clamp(20px, 6.25vw, 120px);
    --rn-header-h: 88px;
    /* 헤더 아래에 붙는 고정 위치(sticky top 등) — 헤더가 숨으면 0 */
    --rn-header-offset: var(--rn-header-h);

    /* Type scale (PC 1920 기준 → clamp 로 반응형) */
    --rn-display: clamp(52px, 6.771vw, 130px);     /* 섹션 대제목 Cormorant 130 */
    --rn-keyword: clamp(36px, 3.646vw, 70px);      /* Why 키워드 70 */
    --rn-numeral: clamp(28px, 2.5vw, 48px);        /* PC/Numeral-M 48 */
    --rn-h2: clamp(24px, 1.771vw, 34px);           /* PC/H2 34 / 1.35 */
    --rn-h3: clamp(20px, 1.354vw, 26px);           /* PC/H3 26 / 1.4 */
    --rn-h4: clamp(17px, 1.042vw, 20px);           /* PC/H4 20 / 1.45 */
    --rn-body-l: clamp(15px, 0.9375vw, 18px);      /* PC/Body-L 18 / 1.6 */
    --rn-body-m: 16px;                             /* PC/Body-M 16 / 1.7 */
    --rn-body-s: 15px;                             /* PC/Body-S 15 / 1.65 */
    --rn-caption: 13px;                            /* PC/Caption 13 / 1.5 */

    --rn-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* 화면 높이 1% — 높이 계산은 vh·svh 대신 이걸 쓴다: calc(var(--rn-vh) * 100)
       --rn-vh · --rn-svh: 섹션 높이(스크롤 길이)에 / --rn-pin-*: 섹션 안에서 화면에 고정되는 칸(sticky) 높이에 */
    --rn-vh: 1vh;
    --rn-svh: 1svh;
    --rn-pin-vh: 1vh;
    --rn-pin-svh: 1svh;
}

/* 카카오·네이버 인앱 웹뷰: 하단 툴바가 접히고 펼쳐질 때마다 화면 크기 자체가 바뀌어(vh·svh 까지 같이 변함)
   히어로·고정 구간 높이가 출렁이며 화면이 점프했다 → 가로폭이 바뀔 때만 다시 재는 고정값(--kakao-vh)으로 묶는다.
   --kakao-vh 와 html 의 kakao-inapp 클래스는 [locale]/layout 의 인라인 스크립트가 넣는다 (bum-eye 와 같은 방식)
   섹션 안에서 화면에 고정되는 칸(sticky)도 같은 고정값 — 실기기(카카오 iOS)는 툴바가 움직일 때 웹뷰 높이를 여러 단계로
   줄였다 늘려서(797→770→754→747→773→797), 칸이 보이는 높이를 따라가면 사진·문구가 단계마다 출렁였다.
   툴바가 접혀 칸 아래에 남는 공간은 히어로 배경색으로 채운다 (main.css — 모바일 히어로 배경) */
.kakao-inapp {
    --rn-vh: var(--kakao-vh, 1vh);
    --rn-svh: var(--kakao-vh, 1svh);
    --rn-pin-vh: var(--kakao-vh, 1vh);
    --rn-pin-svh: var(--kakao-vh, 1svh);
}

@media (max-width: 1024px) {
    :root {
        --rn-header-h: 64px;
    }
}
body.rn-header-hidden { --rn-header-offset: 0px; }