/* ============================================================================
   L2 · base.css — reset + 排版基線 + 工具類
   職責：只處理「元素預設」與「工具類」，不得出現任何版面尺寸
   ========================================================================== */

/* --------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 必須真的隱藏：元件的 display:flex/grid 會蓋掉 UA 樣式 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-body);
  background-color: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------- 排版基線 */
h1, h2, h3, h4, h5, h6 {
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl);  }
h4 { font-size: var(--fs-lg);  }
h5 { font-size: var(--fs-md);  }
h6 { font-size: var(--fs-base);}

p { overflow-wrap: break-word; }

small { font-size: var(--fs-sm); }

strong, b { font-weight: var(--fw-semibold); color: var(--c-ink); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--c-brand); }

/* 越南語 / 拉丁語系排版修正 → 獨立 css/vi.css（按需載入，作用域 html[lang="vi"]） */

/* ------------------------------------------------------------------ 英文全大寫小字（雙語編排用） */
.en {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* 手寫體點綴 */
.hand {
  font-family: var(--font-hand);
  font-size: var(--fs-2xl);
  color: var(--c-sage-deep);
  font-weight: var(--fw-regular);
  line-height: 1.1;
}

/* --------------------------------------------------------------------- 表單預設 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

button:disabled,
input:disabled,
select:disabled { cursor: not-allowed; }

input, textarea, select { background: none; border: 0; }
input:focus, textarea:focus, select:focus { outline: none; }

fieldset { border: 0; }

/* --------------------------------------------------------------------- 媒體預設 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; border-style: none; }

iframe { border: 0; }

/* --------------------------------------------------------------------- 表格 */
table { border-collapse: collapse; border-spacing: 0; text-indent: 0; }

/* --------------------------------------------------------------------- 程式碼 */
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --------------------------------------------------------------------- 焦點可見 */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------- 觸控基線（行動）
   -webkit-tap-highlight-color：關掉 iOS/Android 預設的全塊高亮（會蓋過圓角卡片）
   touch-action:manipulation：保留縮放手勢、只拿掉雙擊縮放的 300ms 延遲
   兩者皆為全域基線，個別元素不得再各自宣告 */
a, button, summary, label,
input, select, textarea,
[role="button"], [role="tab"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 捲動條 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-hv); }

/* ------------------------------------------------------------------ 動效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   工具類 .u-* —— 唯一允許 !important 的區域
   ========================================================================== */

/* --- 顯示與可見性 --- */
.u-flex        { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-grid        { display: grid !important; }
.u-block       { display: block !important; }
.u-hidden      { display: none !important; }

@media (max-width: 959px) {
  .u-hide-md { display: none !important; }
}
@media (max-width: 639px) {
  .u-hide-sm { display: none !important; }
}

/* --- 排列 --- */
.u-items-center   { align-items: center !important; }
.u-items-start    { align-items: flex-start !important; }
.u-items-end      { align-items: flex-end !important; }
.u-justify-between{ justify-content: space-between !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-end    { justify-content: flex-end !important; }
.u-wrap           { flex-wrap: wrap !important; }
.u-col            { flex-direction: column !important; }
.u-grow           { flex: 1 1 auto !important; }
.u-gap-1  { gap: var(--sp-1)  !important; }
.u-gap-2  { gap: var(--sp-2)  !important; }
.u-gap-3  { gap: var(--sp-3)  !important; }
.u-gap-4  { gap: var(--sp-4)  !important; }
.u-gap-6  { gap: var(--sp-6)  !important; }
.u-gap-8  { gap: var(--sp-8)  !important; }

/* --- 間距 --- */
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-2 { margin-top: var(--sp-2)  !important; }
.u-mt-4 { margin-top: var(--sp-4)  !important; }
.u-mt-6 { margin-top: var(--sp-6)  !important; }
.u-mt-8 { margin-top: var(--sp-8)  !important; }
.u-mb-2 { margin-bottom: var(--sp-2)  !important; }
.u-mb-4 { margin-bottom: var(--sp-4)  !important; }
.u-mb-6 { margin-bottom: var(--sp-6)  !important; }
.u-mb-8 { margin-bottom: var(--sp-8)  !important; }
.u-pt-6 { padding-top: var(--sp-6) !important; }
.u-pb-6 { padding-bottom: var(--sp-6) !important; }

/* --- 文字 --- */
.u-text-center  { text-align: center !important; }
.u-text-right   { text-align: right !important; }
.u-text-xs      { font-size: var(--fs-xs) !important; }
.u-text-sm      { font-size: var(--fs-sm) !important; }
.u-text-lg      { font-size: var(--fs-lg) !important; }
.u-text-xl      { font-size: var(--fs-xl) !important; }
.u-medium       { font-weight: var(--fw-medium) !important; }
.u-semibold     { font-weight: var(--fw-semibold) !important; }
.u-ink          { color: var(--c-ink) !important; }
.u-muted        { color: var(--c-muted) !important; }
.u-brand        { color: var(--c-brand) !important; }
.u-clay         { color: var(--c-clay-deep) !important; }
.u-nowrap       { white-space: nowrap !important; }
.u-lh-snug      { line-height: var(--lh-snug) !important; }
.u-lh-loose     { line-height: var(--lh-loose) !important; }
.u-ellipsis     { overflow: hidden !important; text-overflow: ellipsis !important;
                  white-space: nowrap !important; }
.u-clamp-2      { display: -webkit-box !important; -webkit-line-clamp: 2 !important;
                  -webkit-box-orient: vertical !important; overflow: hidden !important; }
.u-clamp-3      { display: -webkit-box !important; -webkit-line-clamp: 3 !important;
                  -webkit-box-orient: vertical !important; overflow: hidden !important; }
.u-lowercase-none { text-transform: none !important; }

/* --- 其他 --- */
.u-rel       { position: relative !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-w-full    { width: 100% !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-select-none    { user-select: none !important; }
.u-rounded-full  { border-radius: var(--r-pill) !important; }

/* 僅供螢幕閱讀器 */
.u-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}