@charset "UTF-8";

/* ========================================
   Design Tokens
======================================== */

:root {
  /* Font family */
  --font-yuji-syuku: "Yuji Syuku", serif;
  --font-shilla: "Shilla", serif;
  --font-chosun-centennial: "Chosun Centennial", serif;
  --font-noto-serif-kr: "Noto Serif KR", serif;
  --font-pretendard: "Pretendard", sans-serif;
  --font-joseon-100-years: "Joseon100Years";

  /* Font weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Color */
  --color-black: #111111;
  --color-gray-800: #333333;
  --color-gray-500: #737373;
  --color-gray-400: #999999;
  --color-gray-100: #f5f5f5;
  --color-beige: #ebe6e1;
  --color-white: #ffffff;
  --color-point: #8e5b5b;

  --color-text-primary: var(--color-gray-800);
  --color-text-secondary: var(--color-gray-500);
  --color-text-muted: var(--color-gray-400);

  --color-border-light: rgba(51, 51, 51, 0.15);

  --color-page-background: var(--color-white);
  --color-header-background: var(--color-white);
  --color-header-scroll-background: rgba(255, 255, 255, 0.85);
  --color-mobile-menu-background: rgba(255, 255, 255, 0.85);
  --color-footer-background: rgba(244, 243, 242, 0.5);

  /* Header */
  --header-height: 5rem;

  /* Grid */
  --grid-columns: 12;
  --grid-gap: 1.25rem;

  /*
   * PC Container
   * 1920px: 230px
   * 1200px: 20px
   * 1200px 이하: 20px
   */
  --container-margin: clamp(
    1.25rem,
    calc(1.25rem + (100vw - 75rem) * 0.2916667),
    14.375rem
  );

  --container-max-width: 91.25rem;

  /* PC Typography */
  --font-size-title-01: 4rem;
  --font-size-title-02: 3rem;

  --font-size-subtitle-01: 2.25rem;
  --font-size-subtitle-02: 1.375rem;

  --font-size-body-01: 1.5rem;
  --font-size-body-02: 1.125rem;
  --font-size-body-03: 1rem;

  /* Transition */
  --transition-fast: 0.2s ease;
  --transition-default: 0.3s ease;
}

/* ========================================
   PC Small
   1200px 이하부터 좌우 여백 20px 고정
======================================== */

@media (max-width: 75rem) {
  :root {
    --container-margin: 1.25rem;
    --container-max-width: none;
  }
}

/* ========================================
   Tablet
   1024px 이하
======================================== */

@media (max-width: 64rem) {
  :root {
    --grid-columns: 8;

    --font-size-title-01: 3rem;
    --font-size-title-02: 2.5rem;

    --font-size-subtitle-01: 2rem;
    --font-size-subtitle-02: 1.75rem;

    --font-size-body-01: 1.25rem;
    --font-size-body-02: 1rem;
    --font-size-body-03: 0.875rem;
  }
}

/* ========================================
   Mobile
   767px 이하
======================================== */

@media (max-width: 47.9375rem) {
  :root {
    --header-height: 4.375rem;
    --grid-columns: 4;

    --font-size-title-01: 2.375rem;
    --font-size-title-02: 1.5rem;

    --font-size-subtitle-01: 1.625rem;
    --font-size-subtitle-02: 1.5rem;

    --font-size-body-01: 1rem;
    --font-size-body-02: 1rem;
    --font-size-body-03: 0.875rem;
  }
}