@charset "UTF-8";

/**
 * 白陽書院 (https://www.jigong.org/) - 典雅水墨書院樣式系統
 * 
 * 包含：
 * 1. Google Fonts 字體引入 (Noto Serif TC 思源宋體 / Noto Sans TC 思源黑體)
 * 2. 經典書院色彩變數 (宣紙色、墨黑、硃砂紅、雅金、茶褐、竹青、黛藍) 與深淺色模式
 * 3. 典藏書卷卡片、印鑑徽章 (Seal Stamp) 與裝飾線條
 * 4. 中華傳統直書排版 (Vertical Writing Mode)
 * 5. 雅緻捲軸、彈窗 Modal 動畫、Toast 提示與無障礙互動
 */

/* ==========================================================================
   1. Google Fonts 字體引入
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700;900&display=swap');

/* ==========================================================================
   2. 主題設計色彩與 CSS 變數系統
   ========================================================================== */
:root,
html.theme-sky,
.theme-sky {
  /* 字體定義 */
  --font-serif: 'Noto Serif TC', 'Songti TC', 'Source Han Serif TC', 'STSong', 'SimSun', serif;
  --font-sans: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* 佈景 1：晴空藍天（預設模式 - 白陽小天使藍天白雲意象） */
  --color-paper: #f0f6fc;           /* 蔚藍輕雲底色 */
  --color-paper-light: #ffffff;     /* 純白雲朵卡片面 */
  --color-paper-subtle: #e6f1fa;    /* 淺藍微風過渡 */
  --color-paper-dark: #dbeafe;      /* 晴空晴朗飾底 */
  --color-paper-border: #cbdfe9;    /* 天際輪廓線 */
  --color-paper-border-subtle: #e0edf6;

  --color-ink: #0f172a;             /* 晴空夜墨（清晰深邃墨字） */
  --color-ink-muted: #334155;       /* 遠山青灰（副文字） */
  --color-ink-subtle: #64748b;      /* 輕雲霧藍（次要資訊） */
  --color-ink-light: #94a3b8;       /* 邊界微藍線 */

  /* 核心意象強調色 - 晴空藍與陽光金 */
  --color-vermilion: #0284c7;       /* 蔚藍天空藍（主操作色） */
  --color-vermilion-hover: #0369a1;
  --color-vermilion-light: #e0f2fe;
  --color-vermilion-subtle: rgba(2, 132, 199, 0.08);

  --color-gold: #d97706;            /* 晨曦陽光金 */
  --color-gold-hover: #b45309;
  --color-gold-light: #fef3c7;
  --color-gold-subtle: rgba(217, 119, 6, 0.08);

  --color-tea: #5c6b73;             /* 雅石灰藍 */
  --color-tea-light: #f1f5f9;
  --color-tea-subtle: rgba(92, 107, 115, 0.08);

  --color-bamboo: #0d9488;          /* 清新碧空竹青 */
  --color-bamboo-light: #ccfbf1;
  --color-bamboo-subtle: rgba(13, 148, 136, 0.08);

  --color-indigo: #2563eb;          /* 澄澈深藍 */
  --color-indigo-light: #dbeafe;
  --color-indigo-subtle: rgba(37, 99, 235, 0.08);

  /* 規範要求之標準語意變數 */
  --bg-paper: var(--color-paper);
  --bg-paper-subtle: var(--color-paper-subtle);
  --text-ink: var(--color-ink);
  --text-ink-muted: var(--color-ink-muted);
  --text-ink-subtle: var(--color-ink-subtle);

  /* 通用佈局語意變數 */
  --bg-primary: var(--color-paper);
  --bg-secondary: var(--color-paper-subtle);
  --bg-tertiary: var(--color-paper-dark);
  --bg-card: var(--color-paper-light);
  --bg-card-hover: #ffffff;
  --bg-modal: var(--color-paper-light);
  --bg-glass: rgba(240, 246, 252, 0.88);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-muted);
  --text-tertiary: var(--color-ink-subtle);

  --border-primary: var(--color-paper-border);
  --border-subtle: var(--color-paper-border-subtle);

  /* 精緻典籍陰影 */
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 18px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 16px 32px -4px rgba(15, 23, 42, 0.09), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px -6px rgba(15, 23, 42, 0.13), 0 8px 16px -3px rgba(15, 23, 42, 0.05);
  --shadow-book: -4px 0 12px rgba(2, 132, 199, 0.06), 0 10px 25px rgba(15, 23, 42, 0.08);
  --shadow-vermilion: 0 8px 24px -4px rgba(2, 132, 199, 0.25);
  --shadow-gold: 0 8px 24px -4px rgba(217, 119, 6, 0.25);
}

/* 佈景 2：宣紙古風（保留之古風書院模式 - 宣紙白與松煙墨、硃砂紅） */
html.theme-classic,
.theme-classic {
  --color-paper: #fcfaf2;           /* 宣紙底色 */
  --color-paper-light: #ffffff;     /* 純白卡片面 */
  --color-paper-subtle: #f7f4ea;    /* 淺宣紙陰影過渡 */
  --color-paper-dark: #f0ebd9;      /* 陳年宣紙色 / 邊框飾底 */
  --color-paper-border: #e6dfcb;    /* 典籍書頁框線 */
  --color-paper-border-subtle: #eee8d8;

  --color-ink: #1f2022;             /* 松煙濃墨（主文字） */
  --color-ink-muted: #535457;       /* 焦茶淡墨（副文字） */
  --color-ink-subtle: #848588;      /* 輕煙淡灰（次要資訊） */
  --color-ink-light: #b0b1b4;       /* 裝飾灰淡線 */

  /* 核心意象強調色 - 硃砂紅與雅緻金 */
  --color-vermilion: #b8362d;       /* 硃砂印泥紅 */
  --color-vermilion-hover: #9c2b23;
  --color-vermilion-light: #faecea;
  --color-vermilion-subtle: rgba(184, 54, 45, 0.08);

  --color-gold: #b38827;            /* 雅緻泥金 */
  --color-gold-hover: #96701d;
  --color-gold-light: #faf5e7;
  --color-gold-subtle: rgba(179, 136, 39, 0.08);

  --color-tea: #7d6550;             /* 古籍茶褐 */
  --color-tea-light: #f4efe9;
  --color-tea-subtle: rgba(125, 101, 80, 0.08);

  --color-bamboo: #426955;          /* 靜心竹青 */
  --color-bamboo-light: #edf5f0;
  --color-bamboo-subtle: rgba(66, 105, 85, 0.08);

  --color-indigo: #394d63;          /* 藏經黛藍 */
  --color-indigo-light: #edf2f7;
  --color-indigo-subtle: rgba(57, 77, 99, 0.08);

  --bg-primary: var(--color-paper);
  --bg-secondary: var(--color-paper-subtle);
  --bg-tertiary: var(--color-paper-dark);
  --bg-card: var(--color-paper-light);
  --bg-card-hover: #ffffff;
  --bg-modal: var(--color-paper-light);
  --bg-glass: rgba(252, 250, 242, 0.85);

  --shadow-book: -4px 0 12px rgba(0, 0, 0, 0.04), 0 10px 25px rgba(44, 30, 14, 0.08);
  --shadow-vermilion: 0 8px 24px -4px rgba(184, 54, 45, 0.25);
  --shadow-gold: 0 8px 24px -4px rgba(179, 136, 39, 0.25);
}

/* 佈景 3：夜讀水墨（深色夜讀模式 - 玄青夜墨與月光白） */
html.dark,
html.theme-dark,
.dark,
.theme-dark {
  --color-paper: #141416;           /* 玄青夜色 */
  --color-paper-light: #1d1d22;     /* 深墨卡片底 */
  --color-paper-subtle: #19191d;    /* 微暗過渡 */
  --color-paper-dark: #101012;      /* 極致玄底 */
  --color-paper-border: #2c2c34;    /* 深色分界線 */
  --color-paper-border-subtle: #23232a;

  --color-ink: #f2efe6;             /* 月白宣紙字 */
  --color-ink-muted: #b5b2a8;       /* 寒煙灰 */
  --color-ink-subtle: #7a7872;      /* 幽冥灰 */
  --color-ink-light: #444340;

  --color-vermilion: #38bdf8;       /* 夜光天藍 / 亮藍標誌 */
  --color-vermilion-hover: #7dd3fc;
  --color-vermilion-light: #182836;
  --color-vermilion-subtle: rgba(56, 189, 248, 0.15);

  --color-gold: #dcb348;            /* 燭光雅金 */
  --color-gold-hover: #ebd068;
  --color-gold-light: #2c2514;
  --color-gold-subtle: rgba(220, 179, 72, 0.15);

  --color-tea: #9f846d;             /* 琥珀古木 */
  --color-tea-light: #26201b;
  --color-tea-subtle: rgba(159, 132, 109, 0.15);

  --color-bamboo: #5c9176;          /* 寒潭蒼松 */
  --color-bamboo-light: #16241e;
  --color-bamboo-subtle: rgba(92, 145, 118, 0.15);

  --color-indigo: #5d7b9e;          /* 霽藍夜空 */
  --color-indigo-light: #19232e;
  --color-indigo-subtle: rgba(93, 123, 158, 0.15);

  --bg-primary: var(--color-paper);
  --bg-secondary: var(--color-paper-subtle);
  --bg-tertiary: var(--color-paper-dark);
  --bg-card: var(--color-paper-light);
  --bg-card-hover: #24242a;
  --bg-modal: var(--color-paper-light);
  --bg-glass: rgba(20, 20, 22, 0.85);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-muted);
  --text-tertiary: var(--color-ink-subtle);

  --border-primary: var(--color-paper-border);
  --border-subtle: var(--color-paper-border-subtle);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 32px -4px rgba(0, 0, 0, 0.65), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 48px -6px rgba(0, 0, 0, 0.75), 0 8px 16px -3px rgba(0, 0, 0, 0.5);
  --shadow-book: -4px 0 14px rgba(0, 0, 0, 0.6), 0 10px 28px rgba(0, 0, 0, 0.6);
  --shadow-vermilion: 0 8px 24px -4px rgba(56, 189, 248, 0.3);
  --shadow-gold: 0 8px 24px -4px rgba(220, 179, 72, 0.3);
}

/* ==========================================================================
   3. 基礎排版與重設
   ========================================================================== */
html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 平滑主題過渡 */
body,
.theme-transition {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 自定義選取文字底色 */
::selection {
  background-color: var(--color-gold-light);
  color: var(--color-ink);
}

.dark ::selection {
  background-color: var(--color-vermilion-light);
  color: var(--color-ink);
}

/* ==========================================================================
   4. 字體與色彩輔助類別 (Typography & Color Helpers)
   ========================================================================== */
.font-serif {
  font-family: var(--font-serif) !important;
}

.font-sans {
  font-family: var(--font-sans) !important;
}

.font-mono {
  font-family: var(--font-mono) !important;
}

.text-ink {
  color: var(--text-primary) !important;
}

.text-ink-muted {
  color: var(--text-secondary) !important;
}

.text-ink-subtle {
  color: var(--text-tertiary) !important;
}

.text-vermilion {
  color: var(--color-vermilion) !important;
}

.text-gold {
  color: var(--color-gold) !important;
}

.text-tea {
  color: var(--color-tea) !important;
}

.text-bamboo {
  color: var(--color-bamboo) !important;
}

.text-indigo {
  color: var(--color-indigo) !important;
}

.bg-paper {
  background-color: var(--bg-paper) !important;
}

.bg-paper-subtle {
  background-color: var(--bg-paper-subtle) !important;
}

.bg-card {
  background-color: var(--bg-card) !important;
}

.border-paper {
  border-color: var(--border-primary) !important;
}

.tracking-loose {
  letter-spacing: 0.15em;
}

.tracking-widest-plus {
  letter-spacing: 0.25em;
}

.leading-relaxed-plus {
  line-height: 1.9;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* ==========================================================================
   5. 捲軸美化 (Aesthetic Scrollbars)
   ========================================================================== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-paper-border) transparent;
}

.dark * {
  scrollbar-color: var(--color-paper-border) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-paper-border);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gold);
}

.dark ::-webkit-scrollbar-thumb {
  background-color: var(--color-paper-border);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gold);
}

/* 局部隱藏捲軸但保有滾動功能 */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   6. 中華傳統直書排版 (Vertical Writing Modes)
   ========================================================================== */
.writing-vertical,
.writing-vertical-rl {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  text-orientation: mixed;
  letter-spacing: 0.18em;
  line-height: 2.1;
}

.writing-upright {
  text-orientation: upright;
}

/* 直排容器裝飾 */
.vertical-container {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 1.5rem 1rem;
  border-right: 2px solid var(--color-paper-border);
  border-left: 2px solid var(--color-paper-border);
  background: repeating-linear-gradient(
    to left,
    transparent,
    transparent 2.2rem,
    var(--border-subtle) 2.2rem,
    var(--border-subtle) 2.25rem
  );
}

/* ==========================================================================
   7. 硃砂古印與印鑑標籤 (Seal Stamp & Badges)
   ========================================================================== */
/* 硃砂印章風格標誌 */
.seal-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-vermilion);
  color: var(--color-vermilion);
  font-family: var(--font-serif);
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  position: relative;
  letter-spacing: 0.1em;
  background-color: var(--color-vermilion-subtle);
  box-shadow: inset 0 0 4px rgba(184, 54, 45, 0.15);
  user-select: none;
  transition: all 0.2s ease;
}

.seal-stamp:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px var(--color-vermilion-subtle);
}

.seal-stamp-gold {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background-color: var(--color-gold-subtle);
  box-shadow: inset 0 0 4px rgba(179, 136, 39, 0.15);
}

.seal-stamp-solid {
  background-color: var(--color-vermilion);
  color: #ffffff;
  border-color: var(--color-vermilion);
  box-shadow: var(--shadow-vermilion);
}

/* 雅緻分類標籤 */
.badge-paper {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
}

.badge-vermilion {
  background-color: var(--color-vermilion-light);
  color: var(--color-vermilion);
  border: 1px solid rgba(184, 54, 45, 0.2);
}

.badge-gold {
  background-color: var(--color-gold-light);
  color: var(--color-gold);
  border: 1px solid rgba(179, 136, 39, 0.25);
}

.badge-bamboo {
  background-color: var(--color-bamboo-light);
  color: var(--color-bamboo);
  border: 1px solid rgba(66, 105, 85, 0.25);
}

.badge-tea {
  background-color: var(--color-tea-light);
  color: var(--color-tea);
  border: 1px solid rgba(125, 101, 80, 0.25);
}

.badge-indigo {
  background-color: var(--color-indigo-light);
  color: var(--color-indigo);
  border: 1px solid rgba(57, 77, 99, 0.25);
}

/* ==========================================================================
   8. 典藏書卡與水墨陰影 (Book Cards & Aesthetics)
   ========================================================================== */
.book-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.book-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--color-vermilion);
  opacity: 0.85;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold);
}

.book-card:hover::before {
  width: 6px;
  opacity: 1;
  background-color: var(--color-gold);
}

/* 古籍裝訂雙線裝飾 */
.book-spine-stitch {
  position: relative;
}

.book-spine-stitch::after {
  content: '';
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 1rem;
  width: 1px;
  background-color: var(--border-subtle);
  box-shadow: 2px 0 0 var(--border-subtle);
}

/* 水墨微光飾底 */
.paper-pattern {
  background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 書院典雅分割線 */
.ink-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2.5rem 0;
  color: var(--color-gold);
}

.ink-divider::before,
.ink-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-primary);
}

.ink-divider::before {
  margin-right: 1.25rem;
}

.ink-divider::after {
  margin-left: 1.25rem;
}

.ink-divider-symbol {
  display: inline-block;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  background-color: var(--color-gold);
  margin: 0 4px;
}

/* ==========================================================================
   9. 彈窗動畫與毛玻璃遮罩 (Modal & Backdrop Transitions)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(15, 15, 18, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content-box {
  background-color: var(--bg-modal);
  border: 1px solid var(--border-primary);
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  max-width: 48rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(12px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-backdrop.active .modal-content-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ==========================================================================
   10. Toast 提示訊息與按鈕動畫 (Toasts & Micro-Interactions)
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-radius: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.925rem;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
  animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-item.toast-leave {
  animation: toastSlideDown 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }
}

/* 按鈕微互動 */
.btn-classic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

.btn-classic:active {
  transform: scale(0.97);
}

.btn-vermilion {
  background-color: var(--color-vermilion);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-vermilion:hover {
  background-color: var(--color-vermilion-hover);
  box-shadow: var(--shadow-vermilion);
  transform: translateY(-1px);
}

.btn-gold {
  background-color: var(--color-gold);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-gold:hover {
  background-color: var(--color-gold-hover);
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

.btn-outline:hover {
  border-color: var(--color-gold);
  background-color: var(--color-gold-subtle);
  color: var(--color-gold);
}

/* 沉浸式毛玻璃導覽列 */
.nav-glass {
  background-color: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

/* ==========================================================================
   11. 多行截斷輔助類 (Line Clamp Utilities)
   ========================================================================== */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   12. 輔助動畫與焦點樣式 (Accessibility & Animation Helpers)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

@keyframes pulseSubtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

.animate-pulse-subtle {
  animation: pulseSubtle 3s ease-in-out infinite;
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-float {
  animation: floatGentle 4s ease-in-out infinite;
}

/* 列印專用樣式 */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .nav-glass,
  .modal-backdrop,
  .toast-container,
  button,
  .no-print {
    display: none !important;
  }

  .book-card {
    box-shadow: none !important;
    border: 1px solid #cccccc !important;
    break-inside: avoid;
  }
}

/* 減弱動態效果無障礙支援 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}