/* 扛扛 KangKang — base：reset、字體排版、版面、色塊區塊、跳到主要內容、focus、減少動態 */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-feature-settings: "palt" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;             /* 375px 寬不能左右滑 */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
/* 底線一路畫到底，不要在 g、j、p 這種往下伸的字母那裡斷開（看起來像被切到） */
a, u, button { text-decoration-skip-ink: none; }
p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"], .list-plain { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: var(--ink); }

/* Lenis（原本 lenis.css 的規則，內嵌避免多一個請求） */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 字體排版 ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  color: var(--fg);
  text-wrap: balance;
}
h1, .display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-black);
}
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  font-weight: var(--fw-black);
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}
h4, .h4 { font-size: 1.0625rem; line-height: 1.4; font-weight: var(--fw-bold); }
p, li { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.7; font-weight: var(--fw-medium); }
.caption, small { font-size: var(--fs-small); line-height: 1.65; color: var(--fg-muted); }
.muted { color: var(--fg-muted); }
.eyebrow {
  font-family: var(--font-latin);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--jp { font-family: var(--font-jp); letter-spacing: 0.1em; text-transform: none; }
.latin, .num { font-family: var(--font-latin); }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.price {
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: var(--fs-price);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price__unit { font-size: 0.42em; font-weight: 700; letter-spacing: 0; margin-right: 0.12em; vertical-align: 0.55em; }
.huge {
  font-size: var(--fs-huge);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: var(--fw-black);
}
.text-red { color: var(--red); }       /* 只給大字或粗體 19px 以上用（暖白上 3.8:1） */
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.tbd { white-space: nowrap; }          /* 〔待填〕〔待公布〕 */
strong, b { font-weight: var(--fw-bold); }
a:not([class]) {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:not([class]):hover { text-decoration-color: var(--accent); }
hr, .rule { border: 0; border-top: var(--border); margin: 0; }
code, kbd {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.85em;
}

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 版面 ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.stack--xs { --stack-gap: var(--space-2); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-6); }
.stack--xl { --stack-gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }
.grid { display: grid; gap: var(--grid-gap, var(--space-5)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 240px)), 1fr)); }
.grid--2 { --grid-min: 320px; }
.grid--3 { --grid-min: 260px; }
.grid--4 { --grid-min: 220px; }
.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.3fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.3fr; }
}
.section-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }

/* ---------- 區塊色塊：整片換色 ---------- */
.section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: var(--section-pad-tight); }
.section--flush-top { padding-top: 0; }

.section--paper, .theme-paper {
  --bg: var(--paper); --fg: var(--ink); --fg-muted: var(--muted);
  --line: var(--ink); --accent: var(--red); --focus: var(--red); --key-shadow: var(--ink); --selection: var(--oat);
}
/* 朱紅底：小字一律炭黑（3.9:1），而且放大成 19px 粗體；暖白字只給描邊大標 */
.section--red, .theme-red {
  --bg: var(--red); --fg: var(--ink); --fg-muted: var(--ink);
  --line: var(--ink); --accent: var(--ink); --focus: var(--ink); --key-shadow: var(--ink); --selection: var(--paper);
}
.section--oat, .theme-oat {
  --bg: var(--oat); --fg: var(--ink); --fg-muted: var(--ink);
  --line: var(--ink); --accent: var(--red); --focus: var(--ink); --key-shadow: var(--ink); --selection: var(--paper);
}
.section--ink, .theme-ink {
  --bg: var(--ink); --fg: var(--paper); --fg-muted: var(--oat);
  --line: var(--paper); --accent: var(--red); --focus: var(--red); --key-shadow: var(--oat); --selection: var(--red);
}
.theme-paper, .theme-red, .theme-oat, .theme-ink { background: var(--bg); color: var(--fg); }

.section--red :where(p, li, dd, dt, label, figcaption, small, .caption):not(:where(.card, .burst, .key, .field, .marker__pop, .badge) *) {
  font-size: max(1em, var(--fs-on-red-min));
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* 圓弧上緣：疊在上一個區塊上（上一個區塊的下方留白要夠） */
.section--lip {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: calc(var(--radius-lg) * -1);
  z-index: var(--z-base);
}

/* ---------- 跳到主要內容 ---------- */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 12px 18px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius-key);
  box-shadow: 0 5px 0 var(--ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

main:focus { outline: none; }
/* 站內換頁（js/nav.js）等超過 0.2 秒：內容先變淡，讓人知道正在換頁 */
html.kk-nav-busy { cursor: progress; }
html.kk-nav-busy main { opacity: 0.55; transition: opacity 0.2s ease; }
/* 錨點跳轉扣掉頁首高度：用 html 的 scroll-padding-top（不要再加 scroll-margin，會重複扣） */

/* ---------- focus 看得到 ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- 減少動態：全部靜止 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 捲動淡入（main.js 載到 GSAP 才會加 .motion；沒載到或減少動態就直接顯示） */
.motion [data-reveal] { opacity: 0; transform: translateY(24px); }
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal="left"] { transform: translateX(-32px); }
.motion [data-reveal="right"] { transform: translateX(32px); }
.motion [data-reveal="pop"] { transform: scale(0.9); }