/* ============================================================================
   토큰 (1단계) — 출처: 오산헤리티지자이-재현기준서.md + 최종/토큰애니/desktop-1440/tokens.json
   규칙: 기준서·JSON에 없는 값 없음. 원본 CSS 복사 없음(실측 수치만 토큰화).
   ----------------------------------------------------------------------------
   브레이크포인트(기준서 A-5, 이 4개만 사용 — 다른 미디어쿼리 금지):
     991px  — 마크업 전환(모바일↔데스크톱), 헤더 sticky→fixed, 헤더 배경 네이비→흰색
     992px  — #wrap 전환
     1001px — .wrapper column→row, gap 60→50
     2560px — .gnb/.logo 폰트 16→20px
   ============================================================================ */

:root {
  /* ---------- 컬러 (더샵 관저아르테 실측 — 2026-08-27 대표 승인) ----------
     출처: 공홈 computed style 집계(#001241 68회·#121D3C 27회·#94C5E4 20회) +
     로고성 에셋 픽셀 실측(icon svg 원 배경 #121D3C, landscape_tit 51.9%,
     danzi_complex_txt 그라데이션 양끝 #899BCA→#071948). 더샵 CI 추측값 없음. */
  --color-main1: #001241;              /* 브랜드 딥네이비 — 배경/강조 (공홈 최다) */
  --color-main2: #121D3C;              /* 보조 네이비 — 로고·헤드라인 */
  --color-main3: #94C5E4;              /* 라이트 스카이 포인트 */
  --grad-brand: linear-gradient(90deg, #899BCA 0%, #071948 100%); /* 영문 타이틀 그라데이션 실측 */

  --color-text: #111;                  /* 글자 기본 (208회) */
  --color-text-invert: #fff;           /* 글자 반전 (72회) */
  --color-gray-1: #aaa;                /* 회색 계열 */
  --color-gray-2: #ccc;
  --color-gray-3: #777;
  --color-footer-bg: rgb(27, 27, 27);  /* 배경색 실측 */
  --color-overlay-60: rgba(0, 0, 0, .6);   /* 오버레이 */
  --color-overlay-70: rgba(0, 0, 0, .7);
  --color-adend-bg: #000203;           /* 광고종료 배경 */

  /* 다크 글래스(폼 스킨, 기준서 C-11) */
  --glass-bg: rgba(255, 255, 255, .08);
  --glass-border: 1px solid rgba(255, 255, 255, .25);
  --glass-radius: 8px;

  /* ---------- 레이아웃 (tokens.json CSS변수 실측) ---------- */
  --pc-header-height: 80px;
  --mo-header-height: 15vw;
  --maxw: 60rem;
  --pc-gnb-width: 60rem;
  --hdr-gap: 24px;        /* 로고↔메뉴 · 메뉴↔전화 간격(PC 헤더) — 이 한 값으로 양쪽이 같이 움직인다 */
  /* 컨테이너폭 후보(기준서 A-1): 960 / 1200 / 1400 혼용, 울트라와이드 상한 2560 */
  --container-960: 960px;
  --container-1200: 1200px;
  --container-1400: 1400px;
  --page-max: 2560px;

  /* ---------- 타이포 (기준서 B-6~9 · tokens.json 타이포 실측) ---------- */
  --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Pretendard Variable", "Malgun Gothic", Roboto, "Noto Sans KR",
               sans-serif;
  --font-serif: "Noto Serif KR", serif;                 /* 제목(세리프 계열) */
  --font-display-kr: "GmarketSansBold", var(--font-body);   /* 모바일 배지류 */
  /* 영문 디스플레이: 원본 지정 Reforma 1969 Negra(유료·미보유) → 대표 선택(2026-08-27 후보3) Playfair Display 800 */
  --font-display-en: "Playfair Display", var(--font-serif);

  /* 크기 스케일 — 루트 16px, rem 고정 위주(clamp 남발 금지, 유동은 3종만) */
  --fs-12: 0.75rem;
  --fs-14: 0.9rem;      /* 14.4px */
  --fs-16: 1rem;
  --fs-17: 1.1rem;      /* 17.6px */
  --fs-19: 1.2rem;      /* 19.2px */
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-25: 1.6rem;      /* 25.6px */
  --fs-31: 1.98rem;     /* 31.68px */

  /* 행간 — 본문 16px→24px(1.5), 제목 계열 38.4/40/52.8 */
  --lh-body: 1.5;
  --lh-title-38: 38.4px;
  --lh-title-40: 40px;
  --lh-title-52: 52.8px;

  /* 자간 — 국문 기본 -0.8px(지배적), 제목 -1~-2px, 포인트/영문 +2px */
  --ls-base: -0.8px;
  --ls-title: -1px;
  --ls-title-tight: -2px;
  --ls-point: 2px;

  /* 굵기 — 400 본문 / 300 라이트 서브 / 700 헤드라인 / 500·600 버튼·강조 */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-btn: 500;
  --fw-emph: 600;
  --fw-head: 700;

  /* ---------- 스페이싱 (기준서 A-3: 4px 그리드, 빈도순 실측값) ---------- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-80: 80px;
  --sp-150: 150px;

  /* ---------- 모양 (기준서 C-11 · tokens.json 모양 실측) ---------- */
  --radius-btn-s: 6px;                 /* 버튼 6~8px */
  --radius-btn: 8px;
  --radius-circle: 100px;              /* 원형 요소(BGM 토글 등) */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  /* 그림자: 거의 없음(플랫) — 아래 실측 2종 외 box-shadow 남발 금지 */
  --shadow-soft: 0 1px 5px rgba(0, 0, 0, .2);
  --shadow-deep: 0 10px 20px rgba(0, 0, 0, .5);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, .1);   /* 실측: 모바일 카드(풀배너) 그림자 */

  /* ---------- 모션 (기준서 M2·M3·M4) ---------- */
  --ease-main: cubic-bezier(0.25, 0.1, 0.25, 1);  /* 지배 이징. spring 계열 없음 */
  /* 지속시간: 인트로 1.2~2s(주력 1.4/1.5s), UI 반응 0.2~0.5s, 모바일 0.2~0.3s */
  --dur-ui-fast: 0.2s;
  --dur-ui: 0.3s;
  --dur-ui-slow: 0.5s;
  --dur-section: 0.8s;
  --dur-snap: 0.9s;      /* 원본 fullPage scrollingSpeed 900ms 상당 */
  --dur-appear: 1s;
  --dur-intro: 1.4s;     /* 인트로 주력 */
  --dur-intro-line: 1.5s;
  --dur-intro-max: 2s;
  /* 딜레이(CSS delay 방식 — JS 순차 스태거 금지, 기준서 M4) */
  --delay-1: 0.1s;
  --delay-2: 0.2s;
  --delay-4: 0.4s;
  --delay-10: 1s;
  --delay-20: 2s;
}

/* 참고(의도적 제외): tokens.json CSS변수 중 --primary·--bg·--card 등 9종은
   DBCART iframe(외부 접수 서비스)의 변수라 이 사이트 토큰이 아님 → 제외.
   --swiper-* 3종은 Swiper 라이브러리 기본값 → 라이브러리가 공급하므로 제외. */