/* ==========================================================================
   TAROT CLASS corporate · design tokens (site_v4 rules)
   컬러와 서체는 site_v2·site_v3에서 계승, 치수는 재설계.
   이 파일은 토큰과 @font-face만 담는다. reset과 요소 스타일은 base.css.
   ========================================================================== */

@font-face {
  font-family: "Wanted Sans";
  src: url("../fonts/WantedSans-subset.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KoPub Batang";
  src: url("../fonts/KoPubBatang-subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Latin-only aliases of the same files. Japanese and Chinese pages use these
   so CJK punctuation and kana/hanzi come from native fonts, not the Korean
   subsets (which also contain U+3000–303F and full-width forms). */
@font-face {
  font-family: "Wanted Sans Latin";
  src: url("../fonts/WantedSans-subset.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}

@font-face {
  font-family: "KoPub Batang Latin";
  src: url("../fonts/KoPubBatang-subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}

:root {
  /* --- 색: site_v3 팔레트 계승 ------------------------------------------ */
  --ink-950: #27211D;
  --ink-800: #5B4739;
  --muted-700: #6C625A;
  --paper-50: #F4F0E9;
  --paper-0: #FFFCF6;
  --sand-300: #C7B9A8;
  --sand-200: #E2D9CC;
  --bronze-600: #855E38;
  --slate-900: #30313D;
  --slate-600: #58596B;
  --danger-700: #A33F3F;

  /* --- 색: site_v2 골드와 다크 계승 --------------------------------------
     v2의 gold(#cba258)와 gold-light(#f1d8a6)를 그대로 가져온다.
     v3의 따뜻한 브라운 위에 얹혀도 같은 계열이라 어긋나지 않는다. */
  --gold-500: #CBA258;
  --gold-200: #F1D8A6;

  /* 다크 서페이스. v2는 청흑(#171b22)이었으나 v3 팔레트와 맞추어 온흑으로 쓴다. */
  --dark-900: #1F1A16;
  --dark-800: #2B2420;
  --on-dark: #FFFCF6;
  --on-dark-soft: rgba(255, 252, 246, 0.86);
  --on-dark-muted: rgba(255, 252, 246, 0.68);
  --on-dark-line: rgba(255, 252, 246, 0.22);
  --on-dark-panel: rgba(255, 252, 246, 0.08);

  /* --- 의미 기반 색 -----------------------------------------------------
     컴포넌트는 원색 대신 이 토큰을 쓴다. 어두운 면에서는 이 토큰만 뒤집으면
     되므로 선택자를 하나하나 덮어쓰지 않아도 된다. */
  --text-strong: var(--ink-950);
  --text-body: var(--ink-800);
  --text-muted: var(--muted-700);
  --accent: var(--bronze-600);
  --line-color: var(--sand-300);
  --line-color-soft: var(--sand-200);
  --surface-panel: var(--paper-0);

  /* --- 서체: site_v2(Pretendard) + site_v3(Wanted Sans) 계보 ------------ */
  --font-sans: "Wanted Sans", "Pretendard", -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: "KoPub Batang", Georgia, "Nanum Myeongjo", serif;

  /* --- 타이포: 상한을 브랜드 사양의 하한에 고정 ------------------------- */
  --t-h1: clamp(2.125rem, 4.4vw, 3rem);          /* 34 → 48px */
  --t-h1-lh: 1.26;
  --t-h2: clamp(1.75rem, 2.6vw, 2rem);           /* 28 → 32px */
  --t-h2-lh: 1.32;
  --t-h3: clamp(1.375rem, 1.8vw, 1.5rem);        /* 22 → 24px */
  --t-h3-lh: 1.4;
  --t-h4: 1.0625rem;                             /* 17px */
  --t-h4-lh: 1.5;
  --t-lead: clamp(1.0625rem, 1.3vw, 1.1875rem);  /* 17 → 19px */
  --t-lead-lh: 1.7;
  --t-body: 1rem;                                /* 16 → 17px (≥640) */
  --t-body-lh: 1.76;
  --t-label: clamp(0.8125rem, 0.9vw, 0.875rem);  /* 13 → 14px */
  --t-label-lh: 1.45;
  --t-note: 0.9375rem;                           /* 15px */
  --t-note-lh: 1.7;
  --t-display-num: clamp(1.375rem, 2vw, 1.625rem);

  /* --- 간격: 4px 배수 --------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  --gutter: 20px;
  --section-y: clamp(4rem, 5.5vw, 6rem);         /* 64 → 96px */

  /* --- 스파인 그리드 ---------------------------------------------------- */
  --page-max: 1080px;
  --rail: 0px;
  --rail-gap: 0px;
  --content-max: 100%;
  --measure: 680px;

  /* --- 기타 ------------------------------------------------------------- */
  /* 정적 shadcn 프리미티브는 작고 정밀한 반경을 공유한다. 사진만 별도 반경을 쓴다. */
  --radius: 6px;
  --radius-lg: 8px;
  --radius-control: 4px;
  --radius-panel: 2px;
  --shadow: 0 1px 2px rgba(31, 26, 22, 0.12), 0 12px 30px rgba(31, 26, 22, 0.1);
  --rule: 1px solid var(--line-color);
  --rule-soft: 1px solid var(--line-color-soft);
  --rule-dark: 1px solid var(--on-dark-line);
  --control-min: 48px;
  --header-h: 60px;
  --focus-ring: 0 0 0 3px rgba(88, 89, 107, 0.22);

  /* 사진 위에 글자를 얹기 위한 스크림. 장식이 아니라 가독성 장치다.
     v2와 같은 방식으로 가로 방향에 농도 차를 두어 사진의 오른쪽이 드러나게 한다. */
  --scrim: linear-gradient(
      100deg,
      rgba(31, 26, 22, 0.94) 0%,
      rgba(31, 26, 22, 0.82) 42%,
      rgba(31, 26, 22, 0.44) 100%
    );
  --scrim-mobile: linear-gradient(
      180deg,
      rgba(31, 26, 22, 0.72) 0%,
      rgba(31, 26, 22, 0.88) 55%,
      rgba(31, 26, 22, 0.95) 100%
    );
}

@media (min-width: 640px) {
  :root {
    --t-body: 1.0625rem;                         /* 17px */
    --gutter: 32px;
    --rail: 104px;
    --rail-gap: 32px;
    --header-h: 68px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --rail: 152px;
    --rail-gap: 40px;
    --content-max: 888px;                        /* 152 + 40 + 888 = 1080 */
  }
}