/* ==========================================================================
   typography.css — ereru 艾蕾露 共用 root 變數、基礎 reset 與文字級距
   斷點：1920(桌機) / 768(平板，導覽列切換為漢堡選單) / 480(手機) / 最小 390
   Fluid 區間：390px → 1920px（< 390 取最小值，> 1920 取最大值）
   clamp 公式：clamp(最小, 截距 + 斜率vw, 最大)
     斜率 = (最大-最小) / 1530 * 100；截距 = 最小 - 斜率 * 3.9（px）
   ========================================================================== */
:root {
  /* ---- 字體 ---- */
  --font-serif: "Noto Serif", serif;
  --font-serifTC: "Noto Serif TC", serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- 色彩 ---- */
  --color-text: #000000; /* 標題、內文 */
  --color-orange: #ee7959; /* 強調橘 */
  --color-note: #6f6f6f; /* 灰註解 */
  --color-bg: #f9f8f7; /* 頁面背景 */
  --color-line: #d1cfcd; /* 灰線 */
  --color-white: #ffffff;
  --color-header: rgba(255, 255, 255, 0.9); /* Header 底色 白 90% */
  --color-footer: #d1cfcd; /* Footer 底色 */

  /* ---- 文字級距（390 → 1920） ---- */
  --fs-brand: clamp(
    1.625rem,
    1.147rem + 1.961vw,
    3.5rem
  ); /* 26 → 56 首頁品牌標 */
  --fs-h1: clamp(1.75rem, 1.177rem + 2.353vw, 4rem); /* 28 → 64 */
  --fs-h2: clamp(1.5rem, 1.181rem + 1.307vw, 2.75rem); /* 24 → 44 */
  --fs-h3: clamp(1.25rem, 1.059rem + 0.784vw, 2rem); /* 20 → 32 */
  --fs-h4: clamp(1.125rem, 0.998rem + 0.523vw, 1.625rem); /* 18 → 26 */
  --fs-h5: clamp(1rem, 0.936rem + 0.261vw, 1.25rem); /* 16 → 20 */
  --fs-h6: clamp(0.9375rem, 0.89rem + 0.196vw, 1.125rem); /* 15 → 18 */
  --fs-product-title: clamp(1.375rem, 1.088rem + 1.176vw, 2.5rem); /* 22 → 40 */

  --fs-text-lg: clamp(1rem, 0.904rem + 0.392vw, 1.375rem); /* 16 → 22 */
  --fs-text-md: clamp(0.9375rem, 0.858rem + 0.327vw, 1.25rem); /* 15 → 20 */
  --fs-body: clamp(0.875rem, 0.827rem + 0.196vw, 1.0625rem); /* 14 → 17 */
  --fs-text-sm: clamp(0.8125rem, 0.765rem + 0.196vw, 1rem); /* 13 → 16 */
  --fs-xs: clamp(0.75rem, 0.718rem + 0.131vw, 0.875rem); /* 12 → 14 */
  --fs-2xs: clamp(0.6875rem, 0.672rem + 0.065vw, 0.75rem); /* 11 → 12 */
  --fs-nav: clamp(0.75rem, 0.702rem + 0.196vw, 0.9375rem); /* 12 → 15 */
  --fs-caption: clamp(0.6875rem, 0.656rem + 0.131vw, 0.8125rem); /* 11 → 13 */

  --lh-heading: 1.5;
  --lh-body: 1.9;

  /* ---- 容器 ---- */
  --container-width: 1200px;
  --container-wide: 1440px;
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem); /* 1280 以下左右安全留白 */

  /* ---- Header / 選單 ---- */
  --header-h: clamp(3.75rem, 2.922rem + 3.399vw, 7rem); /* 60 → 112 */
  --logo-w: clamp(5.75rem, 4.253rem + 6.144vw, 11.625rem); /* 92 → 186 */

  /* ---- 區塊間距 ---- */
  --space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(1rem, 1.5vw, 1.5rem);
  --space-md: clamp(1.5rem, 3vw, 2.5rem);
  --space-lg: clamp(2.5rem, 5vw, 4rem);
  --space-xl: clamp(3.5rem, 7vw, 6rem);
  --space-2xl: clamp(5rem, 10vw, 8.75rem);
  --space-3xl: clamp(6.875rem, 5.714rem + 4.76vw, 10rem);
  --space-4xl: clamp(9.375rem, 7.861rem + 6.19vw, 13.4375rem);
}

/* ==========================================================================
   基礎 reset（原 base.css）
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--color-bg);
  overflow-x: hidden;
}
/* body.is-menu-open {
  overflow: hidden;
} */
img, picture {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p,
address {
  margin: 0;
  font-style: normal;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* main {
  padding-top: var(--header-h);
} */

/* 使用者自行設定減少動畫 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   文字套用
   ========================================================================== */
body {
  font-family: var(--font-serif);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serifTC);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--lh-heading);
  margin: 0;
}
h1 {
  font-size: var(--fs-h1);
  letter-spacing: 0.08em;
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0.06em;
}
h3 {
  font-size: var(--fs-h3);
  letter-spacing: 0.06em;
}
h4 {
  font-size: var(--fs-h4);
  letter-spacing: 0.05em;
}
h5 {
  font-size: var(--fs-h5);
  letter-spacing: 0.05em;
}
h6 {
  font-size: var(--fs-h6);
  letter-spacing: 0.05em;
}

body,
p,
li,
td,
th {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.06em;
}

.text-lg,
.text-md,
.text-sm,
.text-xs,
.text-2xs,
.text-nav,
.text-caption {
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.06em;
}
.text-lg {
  font-size: var(--fs-text-lg);
}
.text-md {
  font-size: var(--fs-text-md);
}
.text-sm {
  font-size: var(--fs-text-sm);
}
.text-xs {
  font-size: var(--fs-xs);
}
.text-2xs {
  font-size: var(--fs-2xs);
}
.text-nav {
  font-size: var(--fs-nav);
}
.text-caption {
  font-size: var(--fs-caption);
}

.text-orange {
  color: var(--color-orange);
}
.text-note {
  color: var(--color-note);
}
.fw-medium {
  font-weight: var(--fw-medium);
}
.fw-semibold {
  font-weight: var(--fw-semibold);
}
.text-center {
  text-align: center;
}

/* ==========================================================================
   版型共用元件
   ========================================================================== */
.inner-wrap {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}
@media (max-width: 1280px) {
  .inner-wrap {
    max-width: none;
    padding-inline: var(--container-gutter);
  }
}

.inner-wrap--wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.full-bleed {
  width: 100%;
}

.section-spacing--2xs {
  padding-block: var(--space-2xs);
}
.section-spacing--xs {
  padding-block: var(--space-xs);
}
.section-spacing--sm {
  padding-block: var(--space-sm);
}
.section-spacing--md {
  padding-block: var(--space-md);
}
.section-spacing {
  padding-block: var(--space-xl);
}
.section-spacing--lg {
  padding-block: var(--space-2xl);
}

.section-spacing-inline--2xs {
  padding-inline: var(--space-2xs);
}
.section-spacing-inline--xs {
  padding-inline: var(--space-xs);
}
.section-spacing-inline--sm {
  padding-inline: var(--space-sm);
}
.section-spacing-inline--md {
  padding-inline: var(--space-md);
}
.section-spacing-inline {
  padding-inline: var(--space-xl);
}
.section-spacing-inline--lg {
  padding-inline: var(--space-2xl);
}