/* =====================================================================
   PURPLE SAJU — 디자인 토큰 (PHASE 2)
   ---------------------------------------------------------------------
   ★ 이 파일은 style.css 보다 "먼저" 불러와야 합니다.

   세계관
     Deep Purple + Violet/Lavender + Champagne Gold + Ivory
     + Cosmic/Celestial (별·달·행성·천체 궤도)

   두 가지 경험을 분리해서 다룹니다.
     · 브랜드 영역(홈·표지·챕터) = 깊은 보라 우주 + 골드   → 신비롭고 프리미엄
     · 읽기 영역(리포트 본문)     = 아이보리·라벤더·화이트 → 밝고 편안하고 전문적

   구성
     1. 폰트
     2. PURPLE SAJU 원본 토큰 (--ps-*)
     3. 기존 변수 재매핑 (구 style.css 720줄이 그대로 새 팔레트를 쓰도록)
   ===================================================================== */

/* =====================================================================
   1. 폰트
   ---------------------------------------------------------------------
   본문 : Pretendard  (디자인 명세)
   제목 : Noto Serif KR (디자인 명세 — "가독성과 고급스러운 느낌")

   ⚠ CDN 장애 대비
     · Pretendard 는 사용자가 직접 설치했을 수도 있어 'Pretendard' 를 함께 지정
     · 그 다음 각 OS 기본 한글 서체로 순차 폴백
     · 마지막에 Noto Sans KR(구글 폰트) → 둘 다 실패해도 sans-serif 로 안착
     · 즉 CDN 두 곳이 동시에 죽어도 글자는 깨지지 않고 시스템 폰트로 표시됩니다.

   ▶ 완전한 무중단을 원하시면 PHASE 16에서 폰트 파일을 서버에 직접 올리는
     self-host 방식으로 전환할 수 있습니다. (지금은 CDN + 폴백으로 충분)
   ===================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

:root{
  --font-body:
    'Pretendard Variable', Pretendard,
    -apple-system, BlinkMacSystemFont, system-ui,
    'Apple SD Gothic Neo', 'Segoe UI', Roboto,
    'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;

  --font-title:
    'Noto Serif KR', 'Nanum Myeongjo', 'Apple SD Gothic Neo',
    'Batang', '바탕', serif;

  /* 원국 한자(甲乙丙丁…) 전용 — 명조 계열이 더 잘 어울립니다 */
  --font-hanja:
    'Noto Serif KR', 'Nanum Myeongjo', 'Batang', '바탕', serif;

  /* ---- 타이포 스케일 (디자인 시스템 02번) ---- */
  --fs-h1: 48px;   --fw-h1: 700;
  --fs-h2: 32px;   --fw-h2: 700;
  --fs-h3: 24px;   --fw-h3: 600;
  --fs-h4: 18px;   --fw-h4: 500;
  --fs-body1: 16px;
  --fs-body2: 14px;
  --fs-caption: 12px;

  /* 모바일에서 자동으로 줄어드는 반응형 제목 크기 */
  --fs-h1-fluid: clamp(30px, 6.2vw, 48px);
  --fs-h2-fluid: clamp(23px, 4.2vw, 32px);
  --fs-h3-fluid: clamp(19px, 2.6vw, 24px);


  /* =====================================================================
     2. PURPLE SAJU 원본 토큰
     ===================================================================== */

  /* ---- 우주(깊은 밤) — 어두운 쪽 ---- */
  --ps-cosmic-950:#120B26;   /* 가장 깊은 밤 · 히어로/푸터 바탕 */
  --ps-cosmic-900:#1A1033;   /* Text Dark 겸 딥 배경 */
  --ps-cosmic-800:#241548;
  --ps-cosmic-700:#3B186B;   /* Primary Dark */

  /* ---- 퍼플 ---- */
  --ps-purple-600:#5B2D91;   /* Primary */
  --ps-purple-500:#7C4DFF;   /* Secondary */
  --ps-purple-400:#9B7BFF;
  --ps-purple-300:#B89CFF;   /* Light Purple */
  --ps-purple-200:#D9C9FF;
  --ps-purple-100:#E9E2FF;   /* Lavender */
  --ps-purple-50:#F3EFFF;

  /* ---- 샴페인 골드 ---- */
  --ps-gold:#D4AF37;
  --ps-gold-bright:#F0D57A;  /* 어두운 배경 위 빛나는 금 */
  --ps-gold-soft:#EBD79A;
  --ps-gold-deep:#A8842A;

  /* ---- 밝은 바탕 (읽기 영역) ---- */
  --ps-white:#FFFFFF;
  --ps-surface:#F8F5FF;      /* Light Beige — 라벤더빛 화이트 · 기본 페이지 바탕 */
  --ps-surface-2:#F3EFFF;
  --ps-ivory:#FBF7EE;        /* 따뜻한 아이보리 · 리포트 본문 바탕 */
  --ps-ivory-2:#FFFCF5;

  /* ---- 텍스트 ---- */
  --ps-text:#1A1033;
  --ps-text-soft:#4A4260;
  --ps-text-mute:#6C6C7A;    /* Text Gray */
  --ps-text-on-dark:#F2EDFA;
  --ps-text-on-dark-soft:rgba(242,237,250,.72);
  --ps-text-on-dark-mute:rgba(242,237,250,.52);

  /* ---- 선 ---- */
  --ps-line:#E4DCF2;
  --ps-line-soft:#EDE6FA;
  --ps-line-gold:rgba(212,175,55,.34);
  --ps-line-on-dark:rgba(212,175,55,.22);
  --ps-line-on-dark-soft:rgba(242,237,250,.14);

  /* ---- 상태색 ---- */
  --ps-danger:#C0574A;
  --ps-warn:#C79A2E;
  --ps-ok:#3E8F6E;
  --ps-info:#5E7FD0;

  /* ---- 그라디언트 (브랜드 가이드의 GRADATION EXAMPLE) ---- */
  --ps-grad-brand:linear-gradient(135deg,#3B186B 0%,#5B2D91 45%,#7C4DFF 100%);
  --ps-grad-royal:linear-gradient(135deg,#5B2D91 0%,#7C4DFF 100%);
  --ps-grad-gold:linear-gradient(135deg,#F0D57A 0%,#D4AF37 55%,#A8842A 100%);
  --ps-grad-purple-gold:linear-gradient(90deg,#5B2D91 0%,#7C4DFF 55%,#D4AF37 100%);
  --ps-grad-night:linear-gradient(180deg,#120B26 0%,#1A1033 40%,#2A1550 100%);
  --ps-grad-dawn:linear-gradient(180deg,#F8F5FF 0%,#FFFFFF 100%);

  /* ---- 천체 장식용 ---- */
  --ps-star:rgba(255,255,255,.9);
  --ps-star-gold:rgba(240,213,122,.9);
  --ps-nebula-1:radial-gradient(closest-side,rgba(124,77,255,.38),transparent 72%);
  --ps-nebula-2:radial-gradient(closest-side,rgba(212,175,55,.20),transparent 72%);
  --ps-nebula-3:radial-gradient(closest-side,rgba(184,156,255,.28),transparent 72%);

  /* ---- 그림자 (보라빛) ---- */
  --ps-shadow-sm:0 2px 10px rgba(26,16,51,.07);
  --ps-shadow:0 12px 40px rgba(26,16,51,.12);
  --ps-shadow-lg:0 30px 80px rgba(26,16,51,.20);
  --ps-shadow-purple:0 12px 30px rgba(91,45,145,.30);
  --ps-shadow-gold:0 12px 30px rgba(212,175,55,.30);
  --ps-glow-gold:0 0 40px rgba(240,213,122,.38);
  --ps-glow-purple:0 0 44px rgba(124,77,255,.34);

  /* ---- 라운드 ---- */
  --ps-radius-btn:12px;      /* 디자인의 버튼은 알약이 아니라 둥근 사각형 */
  --ps-radius-input:12px;
  --ps-radius-sm:12px;
  --ps-radius:16px;
  --ps-radius-lg:24px;
  --ps-radius-pill:999px;

  /* ---- 레이아웃 ---- */
  --ps-maxw:1200px;
  --ps-maxw-narrow:820px;
  --ps-ease:cubic-bezier(.22,.61,.36,1);


  /* =====================================================================
     3. 기존 변수 재매핑
     ---------------------------------------------------------------------
     style.css(720줄)와 각 페이지의 인라인 style 이 아래 이름을 쓰고 있습니다.
     이름은 그대로 두고 '값'만 PURPLE SAJU 팔레트로 바꿔서,
     기존 화면을 한 줄도 건드리지 않고 브랜드 전환이 되도록 합니다.

     🔴 --el-wood / fire / earth / metal / water 는
        guide.js 가 JS 에서 직접 참조합니다. 이름을 절대 바꾸지 마십시오.
     ===================================================================== */

  /* 바탕 */
  --ivory:var(--ps-surface);
  --ivory-2:var(--ps-white);
  --cream:var(--ps-ivory);
  --beige:var(--ps-line-soft);
  --beige-2:var(--ps-surface-2);

  /* 구 '네이비' = 이제 딥 퍼플 (제목·주요 버튼) */
  --navy:#3B186B;
  --navy-2:#5B2D91;
  --navy-3:#7C4DFF;
  --navy-ink:#1A1033;

  /* 골드 */
  --gold:var(--ps-gold);
  --gold-soft:var(--ps-gold-soft);
  --gold-deep:var(--ps-gold-deep);

  /* 판타지 컬러 — 퍼플 세계관 쪽으로 재조정 */
  --lav:var(--ps-purple-200);   --lav-2:var(--ps-purple-100);  --lav-deep:var(--ps-purple-500);
  --rose:#F3CBE4;               --rose-2:#FCEBF6;              --rose-deep:#C06BA6;
  --sky:#C3CDFF;                --sky-2:#EAEEFF;               --sky-deep:#6B7FD1;
  --purple:var(--ps-purple-600); --purple-soft:var(--ps-purple-400);

  /* 텍스트 / 선 */
  --text:var(--ps-text);
  --text-soft:var(--ps-text-soft);
  --text-mute:var(--ps-text-mute);
  --line:var(--ps-line);
  --line-lav:var(--ps-line-soft);
  --white:var(--ps-white);
  --danger:var(--ps-danger);
  --ok:var(--ps-ok);

  /* 오행 — 도메인 시각언어라 구분성은 유지하되 퍼플 세계관에 맞춰 미세 조정 */
  --el-wood:#3FA07C;
  --el-fire:#E0705F;
  --el-earth:#D4AF37;
  --el-metal:#AEB4DC;
  --el-water:#5E8BE0;

  /* 여섯 개의 세계 — 퍼플 계열 안에서 구분되도록 재조정 */
  --w-essence:#D4AF37;  --w-essence-bg:#FBF3DC;   /* 01 나의 본질   · Gold */
  --w-work:#3FA07C;     --w-work-bg:#E6F4EE;      /* 02 돈과 일     · Emerald */
  --w-love:#C06BA6;     --w-love-bg:#FBEAF4;      /* 03 사랑과 결혼 · Rose */
  --w-bond:#7C4DFF;     --w-bond-bg:#EFE9FF;      /* 04 궁합과 관계 · Violet */
  --w-year:#6B7FD1;     --w-year-bg:#E9EDFC;      /* 05 신년운세    · Moonlight */
  --w-fate:#5B2D91;     --w-fate-bg:#EDE6F8;      /* 06 대운과 전환점 · Deep Purple */

  /* 라운드 / 그림자 / 레이아웃 */
  --radius:var(--ps-radius);
  --radius-sm:var(--ps-radius-sm);
  --radius-lg:var(--ps-radius-lg);
  --shadow-sm:var(--ps-shadow-sm);
  --shadow:var(--ps-shadow);
  --shadow-lg:var(--ps-shadow-lg);
  --glow:var(--ps-glow-gold);
  --maxw:var(--ps-maxw);
  --ease:var(--ps-ease);
}

/* 접근성 — 움직임 최소화 설정을 존중 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}