/* ==========================================================================
   RUDIX Landing v2 — 디자인 토큰
   기존 RudimentGuideEdition-Landing/style.css 에서 추출한 브랜드 값 +
   860px 고정 설계를 대체하는 반응형 타이포/간격 스케일.

   [타이포 스케일 원리]
   기존: 860px 기준 고정 px -> 모바일에서 transform:scale(0.45) 로 통째 축소
         (390px 기기에서 본문 20px -> 실효 9px)
   변경: clamp() 유동 스케일. 뷰포트 360px~1024px 구간에서 선형 보간,
         그 바깥은 min/max 로 고정. 모바일에서도 본문이 15px 아래로 안 내려감.
   ========================================================================== */

/* ---------- 웹폰트 (자체호스팅 서브셋, 외부 의존 없음) ---------- */
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-7Bold.subset.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.subset.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* 본문 폰트 — KS X 1001 상용 한글 2,350자 + 사이트 실사용 글자를 담은 서브셋.
   scripts/build-fonts.py 로 생성한다. 카피를 바꿔도 글자가 깨지지 않는다.
   (기존 서브셋은 '그때 그 페이지의 글자'만 담아 297자였다) */
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-400.subset.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-500.subset.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-700.subset.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- 브랜드 컬러 (공식) ----------
     출처: 루딕스 브랜드 아이덴티티 및 웹/콘텐츠 가이드 V2.1 — 비주얼 아이덴티티
     브랜드 가이드가 정의한 3색이 정본이다.

       번트 오렌지  #ea5c2a  포인트 / 강조
       딥 블랙      #1e1e1e  메인 / 배경
       오프 화이트  #fcfaff  본문 / 여백

     ※ 실측했던 다른 값들은 정본이 아니다:
        rudix.biz 자사몰 버튼 #d35400, 기존 랜딩 최다사용 #e9562e.
        둘 다 가이드 값(#ea5c2a)에서 벗어나 있으므로 v2 는 가이드를 따른다.

     [사용 원칙 — 가이드 인용]
       · 오렌지는 '브랜드명 / 핵심 메시지 키워드 / CTA / 강조 라벨' 에만 절제해서.
       · 면적을 넓게 쓰는 색이 아니다. 검정 배경 위에서 가장 또렷하다.
       · "한 화면에 강조는 하나" — 오렌지 비중이 늘수록 강조의 힘이 약해진다.
       · 레드 계열 강조색은 브랜드를 저가로 보이게 하므로 쓰지 않는다. */
  --rdx-accent:        #ea5c2a;  /* 번트 오렌지 — 정본 */
  --rdx-accent-bright: #ff7448;  /* 호버/포커스용 밝은 변형 */
  --rdx-accent-deep:   #c4451c;  /* 눌림 상태 */

  /* 레거시 자산(기존 랜딩 이미지 등)과 색을 맞춰야 할 때만 사용 */
  --rdx-accent-legacy: #e9562e;

  /* ---------- 배경 ----------
     가이드의 딥 블랙 #1e1e1e 를 기본 배경으로 둔다.
     순수 검정(#000)보다 한 톤 부드러워 눈의 피로가 덜하다는 게 가이드의 근거.
     위아래로 한 단계씩만 파생해 면을 구분한다. */
  --rdx-ink:      #141414;  /* 딥 블랙보다 한 단계 아래 — 최하단/푸터 */
  --rdx-ink-2:    #1e1e1e;  /* 딥 블랙 — 기본 배경 (정본) */
  --rdx-ink-3:    #242424;  /* 한 단계 뜬 면 */
  --rdx-surface:  #2a2a2a;  /* 카드/패널 */
  --rdx-line:     rgba(252, 250, 255, 0.13);  /* 구분선 */

  /* 떠 있는 면 위에 까는 반투명 바탕 (플로팅바/상단바/오버레이).
     backdrop-filter 와 함께 써서 뒤 내용이 비치되 글자는 읽히게 한다. */
  --rdx-scrim:       rgba(20, 20, 20, 0.94);
  --rdx-scrim-heavy: rgba(20, 20, 20, 0.86);

  /* ---------- 텍스트 ----------
     가이드의 오프 화이트 #fcfaff 가 본문 기준색. */
  --rdx-paper:      #fcfaff;                   /* 오프 화이트 — 본문 (정본) */
  --rdx-paper-dim:  rgba(252, 250, 255, 0.78); /* 보조 텍스트 */
  --rdx-paper-mute: rgba(252, 250, 255, 0.58); /* 캡션/부연 */

  /* ---------- 상태 ---------- */
  --rdx-star: #ffb400;  /* 별점 */
  --rdx-ok:   #4fd07a;  /* 긍정/체크 */

  /* ---------- 폰트 패밀리 ----------
     Paperlogy / Pretendard 는 기존 서브셋을 그대로 쓴다(원본 파일이 없어
     재생성 불가). 각각 3자 / 28자가 빠져 있는데, 그 글자는 뒤의
     "Noto Sans KR" 로 폴백된다. 이 Noto 는 상용 한글 2,350자를 전부 담고
     있으므로 실제로 깨져 보이는 글자는 없다.
     맨 뒤의 시스템 한글 폰트는 웹폰트 로드 실패 시의 최종 안전망이다. */
  --rdx-font-display: "Paperlogy", "Noto Sans KR",
                      "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --rdx-font-bold:    "Pretendard", "Noto Sans KR",
                      "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --rdx-font-body:    "Noto Sans KR",
                      "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  /* ---------- 유동 타이포 스케일 (360px ~ 1024px 구간 보간) ---------- */
  --rdx-fs-hero: clamp(32px, 14.65px + 4.82vw, 64px);
  --rdx-fs-h1:   clamp(28px, 17.16px + 3.01vw, 48px);
  --rdx-fs-h2:   clamp(24px, 16.41px + 2.11vw, 38px);
  --rdx-fs-h3:   clamp(19px, 14.12px + 1.36vw, 28px);
  --rdx-fs-lead: clamp(17px, 14.29px + 0.75vw, 22px);
  --rdx-fs-body: clamp(15px, 13.37px + 0.45vw, 18px);
  --rdx-fs-sm:   clamp(13px, 11.92px + 0.30vw, 15px);
  --rdx-fs-xs:   clamp(12px, 11.46px + 0.15vw, 13px);

  /* ---------- 행간 ---------- */
  --rdx-lh-tight: 1.25;  /* 제목 */
  --rdx-lh-snug:  1.45;  /* 리드문 */
  --rdx-lh-body:  1.75;  /* 한글 본문 — 영문보다 넉넉하게 */

  /* ---------- 자간 (한글은 약간 좁혀야 정돈돼 보임) ---------- */
  --rdx-ls-tight: -0.03em;
  --rdx-ls-normal: -0.015em;
  --rdx-ls-wide:  0.24em;   /* eyebrow 대문자 */

  /* ---------- 간격 ---------- */
  --rdx-gutter:  clamp(20px, 5vw, 40px);    /* 좌우 여백. 최소 20px 보장 */
  --rdx-section: clamp(56px, 10vw, 110px);  /* 섹션 상하 패딩 */
  --rdx-gap-sm:  clamp(10px, 2vw, 16px);
  --rdx-gap:     clamp(16px, 3vw, 26px);
  --rdx-gap-lg:  clamp(28px, 5vw, 46px);

  /* ---------- 레이아웃 ---------- */
  --rdx-col:      860px;   /* 본문 최대 폭. 기존 디자인 폭을 그대로 승계 */
  --rdx-col-text: 680px;   /* 긴 글 가독 폭 */
  --rdx-radius:   14px;
  --rdx-radius-lg: 22px;

  /* ---------- 모션 ---------- */
  --rdx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rdx-dur:  0.55s;

  /* ---------- z-index 레이어 (충돌 방지용 단일 출처) ---------- */
  --rdx-z-reveal:   1;
  --rdx-z-sticky:   50;
  --rdx-z-floating: 80;
  --rdx-z-toast:    90;
  --rdx-z-overlay:  100;
}