@charset "utf-8";

/* ==========================================================================
   maruburi.css — MaruBuri 테마 토큰만
   --------------------------------------------------------------------------
   - 출처: font_guide/maruburi.md (PC + Mobile)
   - Fluid 구간: :root 의 --typo-vw-min ~ --typo-vw-max
     (사이트별로 setting.css 등에서 선언. 이 프로젝트 기본 1440)
   - 공통 클래스(.headline-1 등)는 typography-base.css — 이 파일에 넣지 말 것
   - @font-face는 setting.css MaruBuri-Regular CDN 담당
   - 사용: <section class="font-mrb"> … headline-1, title-1, body-1 …
   ========================================================================== */

   @font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2);
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2);
    font-weight: 700;
    font-display: swap;
}

.font-mrb {
  font-family: "MaruBuri", serif;

  --typo-fluid: clamp(
    0,
    calc(
      (100vw - (var(--typo-vw-min, 375) * 1px))
      / ((var(--typo-vw-max, 1440) - var(--typo-vw-min, 375)) * 1px)
    ),
    1
  );

  /* ----- Headline 1: M 36 / PC 42 ----- */
  --hl1-min: 2.25rem;
  --hl1-max: 2.625rem;
  --hl1-size: clamp(
    var(--hl1-min),
    calc(var(--hl1-min) + (var(--hl1-max) - var(--hl1-min)) * var(--typo-fluid)),
    var(--hl1-max)
  );
  --hl1-lh: 1.3;
  --hl1-ls: -0.02em;
  --hl1-weight: 700;

  /* ----- Headline 2: M 30 / PC 36 ----- */
  --hl2-min: 1.875rem;
  --hl2-max: 2.25rem;
  --hl2-size: clamp(
    var(--hl2-min),
    calc(var(--hl2-min) + (var(--hl2-max) - var(--hl2-min)) * var(--typo-fluid)),
    var(--hl2-max)
  );
  --hl2-lh: 1.3;
  --hl2-ls: -0.02em;
  --hl2-weight: 700;

  /* ----- Headline 3: Mobile 없음 → M Headline 2(30) / PC 30 ----- */
  --hl3-min: 1.875rem;
  --hl3-max: 1.875rem;
  --hl3-size: clamp(
    var(--hl3-min),
    calc(var(--hl3-min) + (var(--hl3-max) - var(--hl3-min)) * var(--typo-fluid)),
    var(--hl3-max)
  );
  --hl3-lh: 1.3;
  --hl3-ls: -0.02em;
  --hl3-weight: 700;

  /* ----- Title 1: M 24 / PC 28 ----- */
  --t1-min: 1.5rem;
  --t1-max: 1.75rem;
  --t1-size: clamp(
    var(--t1-min),
    calc(var(--t1-min) + (var(--t1-max) - var(--t1-min)) * var(--typo-fluid)),
    var(--t1-max)
  );
  --t1-lh: 1.3;
  --t1-ls: -0.02em;
  --t1-weight: 600;

  /* ----- Title 2: M 22 / PC 24 ----- */
  --t2-min: 1.375rem;
  --t2-max: 1.5rem;
  --t2-size: clamp(
    var(--t2-min),
    calc(var(--t2-min) + (var(--t2-max) - var(--t2-min)) * var(--typo-fluid)),
    var(--t2-max)
  );
  --t2-lh: 1.3;
  --t2-ls: -0.02em;
  --t2-weight: 600;

  /* ----- Title 3: 가이드 없음 → Title 2·Title 1 중간 보간 M 23 / PC 26 ----- */
  --t3-min: 1.4375rem;
  --t3-max: 1.625rem;
  --t3-size: clamp(
    var(--t3-min),
    calc(var(--t3-min) + (var(--t3-max) - var(--t3-min)) * var(--typo-fluid)),
    var(--t3-max)
  );
  --t3-lh: 1.3;
  --t3-ls: -0.02em;
  --t3-weight: 600;

  /* ----- Body 1: M 18 / PC 22 ----- */
  --b1-min: 1.125rem;
  --b1-max: 1.375rem;
  --b1-size: clamp(
    var(--b1-min),
    calc(var(--b1-min) + (var(--b1-max) - var(--b1-min)) * var(--typo-fluid)),
    var(--b1-max)
  );
  --b1-lh: 1.5;
  --b1-ls: -0.02em;
  --b1-weight: 400;
  --b1-medium-weight: 600;

  /* ----- Body 2: M 16 / PC 18 ----- */
  --b2-min: 1rem;
  --b2-max: 1.125rem;
  --b2-size: clamp(
    var(--b2-min),
    calc(var(--b2-min) + (var(--b2-max) - var(--b2-min)) * var(--typo-fluid)),
    var(--b2-max)
  );
  --b2-lh: 1.5;
  --b2-ls: -0.02em;
  --b2-weight: 400;
  --b2-medium-weight: 600;

  /* ----- Caption: M 14 / PC 16 ----- */
  --cap-min: 0.875rem;
  --cap-max: 1rem;
  --cap-size: clamp(
    var(--cap-min),
    calc(var(--cap-min) + (var(--cap-max) - var(--cap-min)) * var(--typo-fluid)),
    var(--cap-max)
  );
  --cap-lh: 1.5;
  --cap-ls: -0.02em;
  --cap-weight: 400;

  /* ----- Tag: M Button·Tag(15) / PC Tag·Button(16) ----- */
  --tag-min: 0.9375rem;
  --tag-max: 1rem;
  --tag-size: clamp(
    var(--tag-min),
    calc(var(--tag-min) + (var(--tag-max) - var(--tag-min)) * var(--typo-fluid)),
    var(--tag-max)
  );
  --tag-lh: 1;
  --tag-ls: -0.02em;
  --tag-weight: 600;

  /* ----- Label: 가이드 없음 → Caption 스케일 + weight 600 ----- */
  --lab-min: 0.875rem;
  --lab-max: 1rem;
  --lab-size: clamp(
    var(--lab-min),
    calc(var(--lab-min) + (var(--lab-max) - var(--lab-min)) * var(--typo-fluid)),
    var(--lab-max)
  );
  --lab-lh: 1.5;
  --lab-ls: -0.02em;
  --lab-weight: 600;

  /* ----- Button: M 15 / PC 16 ----- */
  --btn-min: 0.9375rem;
  --btn-max: 1rem;
  --btn-size: clamp(
    var(--btn-min),
    calc(var(--btn-min) + (var(--btn-max) - var(--btn-min)) * var(--typo-fluid)),
    var(--btn-max)
  );
  --btn-lh: 1;
  --btn-ls: -0.02em;
  --btn-weight: 600;

  /* ----- Navigation Main: PC·Mobile 동일 18px ----- */
  --nav-main-size: 1.125rem;
  --nav-main-lh: 1.2;
  --nav-main-ls: -0.02em;
  --nav-main-weight: 600;

  /* ----- Navigation Sub: PC·Mobile 동일 16px ----- */
  --nav-sub-size: 1rem;
  --nav-sub-lh: 1.2;
  --nav-sub-ls: -0.02em;
  --nav-sub-weight: 400;
}