/**
 * ==========================================================================
 * 春錦製茶 Chun-Jin Tea — 官方網站視覺設計系統
 * 策展美學：溫暖手繪繪本風格 × 無框線純色塊交疊 (Seamless Color Blocks)
 * 靈感來源：經典手繪原畫
 * ==========================================================================
 */

/* --- 1. 高級文青侘寂礦物茶色調色盤 (Muted Mineral Tea Terroir Palette) --- */
:root {
  /* 基底和紙與棉麻色系（未漂白手抄和紙微暖灰白） */
  --c-bg: #FAF7F2;                     /* 手抄和紙米白基底（溫潤不刺眼） */
  --c-paper: #F3ECE6;                  /* 焙茶烘烤紙色 */
  --c-paper-warm: #FAF5EE;             /* 溫潤奶油米紙色 */
  --c-card: #FFFFFF;                   /* 純白宣紙卡片 */

  /* 侘寂低彩度純色塊 (Muted Organic Color Blocks) */
  --c-block-terracotta: #F2E8E1;       /* 陶土紅土阿薩姆微暖米褐 */
  --c-block-terracotta-soft: #F9F3EE;  /* 陶土內嵌子色塊 */
  --c-block-celadon: #DEECE4;          /* 千米冷礦青嵐灰青 */
  --c-block-celadon-soft: #EEF5F1;     /* 青嵐內嵌子色塊 */
  --c-block-mist: #E3EBE4;             /* 杉林溪冰晶山嵐冷青 */
  --c-block-rose: #F2E5E8;             /* 破曉粉霞山巒淡灰粉 */
  --c-block-honey: #F7EFE0;            /* 金萱暖果蜜糖淡杏色 */
  --c-block-dark: #1E2B20;             /* 深山老林松煙炭墨色塊 */

  /* 高山晨曦微煙燻有機流動漸層系列 */
  --grad-dawn: linear-gradient(135deg, #F3DFDB 0%, #EFE5DC 50%, #E6D8CC 100%);     /* 日月潭破曉晨霞暖土 */
  --grad-mist: linear-gradient(135deg, #C7D8D2 0%, #D4E2DC 50%, #E2ECE5 100%);     /* 杉林溪千米晨嵐水青 */
  --grad-terroir: linear-gradient(125deg, #F1DED9 0%, #E4EDE2 45%, #CCDFD7 100%);  /* 兩山山稜交會水彩漸層 */
  --grad-dew: linear-gradient(135deg, #DFEBE0 0%, #FAF7F2 100%);                  /* 高山冷露嫩草綠 */
  --grad-amber-glow: linear-gradient(135deg, #F7E8D2 0%, #F3DCBD 100%);           /* 熟成茶湯蜜糖金 */

  /* 品牌標誌色彩（高雅松煙冷杉墨黑） */
  --c-primary: #202D22;                /* 杉林溪百年冷杉墨綠炭黑（文人墨色） */
  --c-primary-dark: #151F16;           /* 幽谷深墨黑 */
  --c-primary-light: #3D5440;          /* 茶樹鮮葉深墨綠 */
  --c-secondary: #6F856B;              /* 礦物草坡灰綠 */
  --c-moss: #475C4A;                   /* 濕潤苔蘚冷青 */
  --c-accent: #A65643;                 /* 日月潭紅土／紫砂陶土赤褐 */
  --c-terracotta: #BA644B;             /* 陶土熟成紅 */
  --c-amber: #D89C42;                  /* 冬片金色茶湯、日曬萬壽菊野蜜金 */
  --c-seal: #B84A39;                   /* 傳統東方朱紅篆刻印泥色 */

  /* 墨韻字體（從容文人墨色） */
  --c-ink: #23201D;                    /* 松煙松墨深黑（典雅古拙） */
  --c-ink-muted: #5E5851;              /* 暮煙灰淡墨 */
  --c-ink-light: #948D85;              /* 淺焙礦物灰 */

  /* 邊框變數全面透明化（落實無框線純色塊） */
  --c-border: transparent;
  --c-border-strong: transparent;

  /* 觸覺立體微漫射陰影 (Soft Watercolor Diffusion Shadows) */
  --shadow-sm: 0 4px 18px rgba(32, 45, 34, 0.03);
  --shadow-md: 0 10px 32px rgba(32, 45, 34, 0.05);
  --shadow-lg: 0 18px 48px rgba(32, 45, 34, 0.07);
  --shadow-hover: 0 16px 40px rgba(32, 45, 34, 0.09);

  /* 圓潤有機弧度 (Organic Curves) */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  /* 頂級字體混排族群 */
  --font-serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia, serif;
  --font-display: "Cormorant Garamond", "Cinzel", "Noto Serif TC", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- 2. 基礎重設與全局和紙纖維質感 (Global Grain & Canvas) --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  font-family: var(--font-sans);
  background-color: var(--c-bg);
  color: var(--c-ink);
  line-height: 1.85;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* 宣紙微纖維質感底層 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 环境漫射水彩光晕 (柔光天際) */
body::after {
  content: "";
  position: fixed;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 238, 228, 0.5) 0%, rgba(250, 246, 240, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- 3. 現代人文導覽列 (Artisanal Washi Header - 無底線浮動色塊) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  transition: all 0.3s ease;
}

.site-header.scrolled {
  background: rgba(250, 246, 240, 0.98);
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.05);
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  gap: 24px;
  flex-wrap: nowrap;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
  max-height: 48px;
}

.brand-logo-img {
  height: 44px;
  max-height: 44px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-symbol {
  width: 38px;
  height: 38px;
  background: var(--c-primary);
  color: var(--c-bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  border: none;
  box-shadow: var(--shadow-sm);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.brand-sub {
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--c-secondary);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nav-links > li {
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links > li > a {
  text-decoration: none;
  color: var(--c-ink-muted);
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 4px;
  position: relative;
  transition: color 0.25s ease;
}

.nav-links > li > a:hover,
.nav-links > li > a.active {
  color: var(--c-primary);
}

/* 下拉選單：純白無框線圓角色塊 */
.nav-item-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px;
  list-style: none;
  min-width: 260px;
  display: none;
  box-shadow: 0 12px 36px rgba(44, 62, 45, 0.08);
  border: none;
}

.nav-item-dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.dropdown-menu li a:hover {
  background: var(--c-paper);
}

.btn-nav-shop {
  background: var(--c-primary);
  color: #FFF !important;
  border-radius: var(--radius-pill);
  padding: 8px 20px !important;
  font-weight: 600;
  font-size: 13.5px;
  border: none;
  box-shadow: 0 4px 12px rgba(44, 62, 45, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.25s var(--transition-bounce), box-shadow 0.25s ease;
}

.btn-nav-shop:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44, 62, 45, 0.2);
}

.btn-lang {
  background: #F4EFEB;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--c-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 8px;
  list-style: none;
  min-width: 140px;
  display: none;
  box-shadow: 0 8px 24px rgba(44, 62, 45, 0.08);
  border: none;
}

.lang-switcher-dropdown:hover .lang-menu {
  display: block;
}

.lang-menu li a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: 8px;
}

.lang-menu li a:hover {
  background: var(--c-paper);
}

/* --- 4. 觸覺手作按鈕系統 (Tactile Button Suite - 無框線純色塊) --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-primary);
  color: #FAF6F0 !important;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 14px rgba(44, 62, 45, 0.18);
  cursor: pointer;
  transition: transform 0.3s var(--transition-bounce), box-shadow 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 22px rgba(44, 62, 45, 0.25);
  background: var(--c-primary-dark);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F4EFEB;
  color: var(--c-primary) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.3s var(--transition-bounce), background 0.3s ease;
}

.btn-secondary:hover {
  transform: translateY(-3px);
  background: #EAE3DC;
}

.btn-taste {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F4EFEB;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  transition: all 0.25s ease;
}

.btn-taste:hover {
  background: var(--c-primary);
  color: #FFF;
  transform: translateY(-2px);
}

/* 東方朱紅印章 */
.artisan-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--c-seal);
  background: rgba(184, 74, 57, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  font-weight: 700;
  border: none;
}

/* --- 5. 藝廊級排版標題系統 (Editorial Section Headers) --- */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-subtitle {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-moss);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--c-primary);
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-bottom: 12px;
}

.section-desc {
  font-size: 14.5px;
  color: var(--c-ink-muted);
  line-height: 1.85;
}

/* --- 6. Awwwards 策展級首頁主視覺 (無框線有機純色塊) --- */
.hero-editorial {
  padding: 32px 0 54px;
}

.hero-editorial-card {
  background: #FFFFFF;
  border: none;
  border-radius: 30px;
  padding: 50px 48px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  box-shadow: 0 16px 48px rgba(44, 62, 45, 0.06);
  position: relative;
  z-index: 2;
}

.hero-tag-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-tag {
  font-size: 12px;
  background: #EAE3DC;
  color: var(--c-primary);
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  border: none;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--c-primary);
  line-height: 1.45;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}

.hero-desc {
  font-size: 15px;
  color: var(--c-ink-muted);
  line-height: 2.05;
  margin-bottom: 28px;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* 藝術手繪畫作展示框 */
.acui-curated-frame {
  background: #F4EFEB;
  padding: 12px;
  border-radius: 20px;
  border: none;
  box-shadow: 0 6px 20px rgba(44, 62, 45, 0.04);
}

.acui-svg-wrap {
  overflow: hidden;
  border-radius: 14px;
  background: #FFF;
}

.acui-svg-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  transition: transform 0.6s ease;
}

.acui-curated-frame:hover .acui-svg-wrap img {
  transform: scale(1.03);
}

.acui-frame-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 0 4px;
}

.acui-caption-text {
  font-size: 11px;
  color: var(--c-ink-light);
}

.acui-artist-badge {
  font-size: 11px;
  background: rgba(44, 62, 45, 0.08);
  color: var(--c-primary);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

/* --- 7. 品牌雙核心雙扉頁排版 (Heritage Dual Color Blocks) --- */
.heritage-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}

.heritage-folio {
  background: #F4ECE6;
  border-radius: 24px;
  padding: 36px 32px;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(140, 80, 66, 0.05);
  transition: transform 0.35s var(--transition-bounce), box-shadow 0.3s ease;
}

.heritage-folio.mother {
  background: #E2ECE5;
  box-shadow: 0 4px 20px rgba(50, 88, 56, 0.05);
}

.heritage-folio:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 32px rgba(44, 62, 45, 0.08);
}

.folio-archive-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--c-ink-light);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.folio-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--c-primary);
  margin-bottom: 12px;
}

.folio-body {
  font-size: 14px;
  color: var(--c-ink-muted);
  line-height: 1.95;
  margin-bottom: 24px;
}

.folio-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
}

.folio-terroir {
  font-size: 12px;
  color: var(--c-terracotta);
  font-weight: 600;
}

/* --- 8. 自然農法植物手繪三堅持 (Eco Principles Color Blocks) --- */
.eco-curation {
  margin: 64px 0 32px;
}

.eco-grid-curated {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.eco-card-botanical {
  background: #F5EFEB;
  border-radius: 22px;
  padding: 32px 26px;
  border: none;
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.03);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.35s var(--transition-bounce), box-shadow 0.3s ease;
}

.eco-card-botanical:nth-child(2) {
  background: #EAF0E8;
}

.eco-card-botanical:nth-child(3) {
  background: #F2ECE9;
}

.eco-card-botanical:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px rgba(44, 62, 45, 0.08);
}

.eco-art-vignette,
.eco-medallion {
  width: 76px;
  height: 76px;
  background: #FFFFFF;
  border: none;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(44, 62, 45, 0.05);
  transition: transform 0.4s var(--transition-bounce), box-shadow 0.3s ease;
}

.eco-art-vignette img,
.eco-medallion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.eco-card-botanical:hover .eco-art-vignette,
.eco-card-botanical:hover .eco-medallion {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 22px rgba(44, 62, 45, 0.12);
}

.eco-botanical-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--c-primary);
  font-weight: 700;
  margin-bottom: 10px;
}

.eco-botanical-desc {
  font-size: 13.5px;
  color: var(--c-ink-muted);
  line-height: 1.85;
}

/* --- 9. 植物標本集藝廊茶單 (Herbarium Tea Gallery Cards) --- */
.tea-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 36px;
}

.tea-plate-card {
  background: #FAF7F2;
  border-radius: 24px;
  padding: 32px 28px;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.04);
  transition: transform 0.35s var(--transition-bounce), box-shadow 0.3s ease;
}

.tea-plate-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 14px 36px rgba(44, 62, 45, 0.09);
}

.plate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.plate-number {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink-light);
  letter-spacing: 0.18em;
}

.plate-origin {
  font-size: 11.5px;
  color: var(--c-moss);
  font-weight: 600;
}

.plate-tea-name {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--c-primary);
  margin-bottom: 12px;
}

.plate-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tea-tag {
  font-size: 12px;
  background: #F0EAE3;
  color: var(--c-ink-muted);
  padding: 3px 10px;
  border-radius: 20px;
  border: none;
}

.tea-tag.primary {
  background: #E8DCD4;
  color: #8A4839;
  font-weight: 600;
}

.plate-tea-desc {
  font-size: 13.5px;
  color: var(--c-ink-muted);
  line-height: 1.85;
  margin-bottom: 20px;
}

.plate-flavor-matrix {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 14px 16px;
  border: none;
  font-size: 12.5px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.matrix-row {
  display: flex;
  margin-bottom: 4px;
}

.matrix-label {
  font-weight: 600;
  color: var(--c-primary);
  width: 72px;
  flex-shrink: 0;
}

.matrix-val {
  color: var(--c-ink-muted);
}

.plate-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
}

/* --- 10. 詩性茶席心法宣言區 (Artisanal Manifesto Quote) --- */
.tea-manifesto-band {
  background: var(--c-block-dark);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  margin: 70px 0 40px;
  text-align: center;
  color: #FAF6F0;
  border: none;
  box-shadow: 0 10px 30px rgba(35, 55, 38, 0.15);
}

.manifesto-quote {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 2.1;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.manifesto-sub {
  font-size: 13px;
  color: rgba(250, 246, 240, 0.7);
  letter-spacing: 0.15em;
}

/* --- 11. 人文頁尾 (Humanistic Footer - 溫潤純色底座) --- */
.site-footer {
  background: #F2EBE3;
  padding: 56px 0 32px;
  margin-top: 80px;
  border: none;
}

.footer-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.footer-nav li a {
  text-decoration: none;
  font-size: 13.5px;
  color: var(--c-ink-muted);
  transition: color 0.2s ease;
}

.footer-nav li a:hover {
  color: var(--c-primary);
}

.footer-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--c-ink-light);
  padding-top: 24px;
}

/* --- 12. 文章卡片與商務專區 (Journal & B2B Elements) --- */
.heritage-card,
.article-card {
  background: #FAF7F2;
  border-radius: 22px;
  padding: 32px 28px;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.heritage-card:hover,
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.lock-box {
  background: #FAF7F2;
  border-radius: 24px;
  padding: 48px;
  text-align: center;
  max-width: 520px;
  margin: 30px auto;
  border: none;
  box-shadow: 0 4px 24px rgba(44, 62, 45, 0.04);
}

.input-passkey {
  padding: 10px 18px;
  border-radius: 20px;
  background: #FFFFFF;
  border: none;
  outline: none;
  font-size: 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
  width: 200px;
  margin-right: 8px;
}

.b2b-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 13.5px;
}

.b2b-table th {
  background: #EAE3DC;
  color: var(--c-primary);
  padding: 12px 16px;
  font-weight: 700;
  border: none;
}

.b2b-table th:first-child { border-radius: 12px 0 0 12px; }
.b2b-table th:last-child { border-radius: 0 12px 12px 0; }

.b2b-table td {
  background: #FAF7F2;
  padding: 14px 16px;
  border: none;
}

.b2b-table tr td:first-child { border-radius: 12px 0 0 12px; }
.b2b-table tr td:last-child { border-radius: 0 12px 12px 0; }

/* 手繪向量小圖示工具類 */
.acui-inline-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -2.5px;
  margin-right: 5px;
}

.acui-inline-icon-lg {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
}

.acui-inline-icon-white {
  width: 17px;
  height: 17px;
  display: inline-block;
  vertical-align: -2.5px;
  margin-right: 6px;
  filter: brightness(0) invert(1);
}

/* --- 13. 響應式佈局 (Responsive Media Queries) --- */
@media (max-width: 900px) {
  .hero-editorial-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 32px;
  }
  .heritage-spread,
  .eco-grid-curated,
  .footer-wrap {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 28px;
  }
  .nav-links {
    display: none;
  }
}


/* ==========================================================================
   ✦ 高山晨曦有機流動漸變背景系統 (Atmospheric Flow)
   設計哲學：背景氛圍有機流動，內容容器溫潤沉靜
   ========================================================================== */

@keyframes acuiOrganicBreathe {
  0%, 100% {
    border-radius: 54% 46% 62% 38% / 45% 58% 42% 55%;
    transform: scale(1) translate3d(0, 0, 0);
  }
  50% {
    border-radius: 46% 54% 38% 62% / 55% 42% 58% 45%;
    transform: scale(1.025) translate3d(8px, -10px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acui-hero-atmosphere,
  .acui-hero-atmosphere-left {
    animation: none !important;
  }
}

.acui-flow-wrapper {
  position: relative;
}

/* 首頁 Hero 晨曦水彩流動光暈底座（高山晨霧） */
@keyframes acuiDawnFlow {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    border-radius: 54% 46% 62% 38% / 45% 58% 42% 55%;
  }
  50% {
    transform: translate3d(36px, -24px, 0) rotate(5deg) scale(1.1);
    border-radius: 46% 54% 38% 62% / 55% 42% 58% 45%;
  }
  100% {
    transform: translate3d(-18px, 16px, 0) rotate(-3deg) scale(0.96);
    border-radius: 62% 38% 54% 46% / 42% 55% 45% 58%;
  }
}

@keyframes acuiMistFlow {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%;
  }
  50% {
    transform: translate3d(-32px, 26px, 0) rotate(-6deg) scale(1.09);
    border-radius: 56% 44% 62% 38% / 44% 56% 38% 62%;
  }
  100% {
    transform: translate3d(20px, -18px, 0) rotate(4deg) scale(0.95);
    border-radius: 38% 62% 44% 56% / 56% 44% 62% 38%;
  }
}

@keyframes acuiAmberFlow {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translate3d(18px, 12px, 0) scale(1.15);
    opacity: 0.85;
  }
}

/* 右上：日月潭破曉晨霞（溫暖低彩煙燻桃霞粉質光暈） */
.acui-hero-atmosphere {
  position: absolute;
  top: -110px;
  right: -90px;
  width: 760px;
  height: 640px;
  background: radial-gradient(ellipse at 50% 50%, rgba(234, 192, 180, 0.58) 0%, rgba(240, 214, 204, 0.4) 42%, rgba(245, 230, 224, 0.18) 68%, transparent 85%);
  border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  animation: acuiDawnFlow 11s ease-in-out infinite alternate;
}

/* 左下：杉林溪冷杉千米晨嵐（青嵐灰綠水彩光暈） */
.acui-hero-atmosphere-left {
  position: absolute;
  bottom: -100px;
  left: -90px;
  width: 720px;
  height: 600px;
  background: radial-gradient(ellipse at 50% 50%, rgba(158, 194, 184, 0.58) 0%, rgba(188, 214, 206, 0.4) 42%, rgba(214, 232, 226, 0.18) 68%, transparent 85%);
  border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%;
  filter: blur(62px);
  z-index: 0;
  pointer-events: none;
  animation: acuiMistFlow 13s ease-in-out infinite alternate;
}

/* 中央：破曉金曦茶氣流動光斑 */
.acui-hero-atmosphere-center {
  position: absolute;
  top: 18%;
  left: 24%;
  width: 560px;
  height: 440px;
  background: radial-gradient(circle at 50% 50%, rgba(242, 216, 172, 0.45) 0%, rgba(248, 232, 204, 0.22) 45%, transparent 75%);
  border-radius: 50%;
  filter: blur(52px);
  z-index: 0;
  pointer-events: none;
  animation: acuiAmberFlow 12s ease-in-out infinite alternate;
}

/* 雙扉頁：日月潭暖霞有機大色塊 */
.organic-spread-dawn {
  background: var(--grad-dawn);
  border-radius: 42px 26px 46px 30px / 34px 46px 30px 42px;
  padding: 44px 38px;
  box-shadow: 0 10px 32px rgba(184, 74, 57, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--transition-bounce), box-shadow 0.3s ease;
}
.organic-spread-dawn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(184, 74, 57, 0.08);
}

/* 雙扉頁：杉林溪冷嵐有機大色塊 */
.organic-spread-mist {
  background: var(--grad-mist);
  border-radius: 30px 46px 34px 42px / 42px 30px 46px 34px;
  padding: 44px 38px;
  box-shadow: 0 10px 32px rgba(44, 62, 45, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--transition-bounce), box-shadow 0.3s ease;
}
.organic-spread-mist:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(44, 62, 45, 0.08);
}

/* 內容容器：溫潤沉靜內膽 (Pure Calm Solid Container) */
.calm-container-pure {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px 26px;
  border: none;
  box-shadow: 0 4px 18px rgba(44, 62, 45, 0.03);
}

.calm-container-warm {
  background: #FAF7F2;
  border-radius: 20px;
  padding: 24px 26px;
  border: none;
  box-shadow: 0 4px 18px rgba(44, 62, 45, 0.03);
}

/* 兩山相遇有機水彩過渡條（Terroir Convergence Bar） */
.terroir-convergence-pill {
  background: var(--grad-terroir);
  border-radius: 30px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.04);
}

/* 選茶測驗引流橫幅：有機流動漸變 */
.organic-quiz-banner {
  background: var(--grad-terroir);
  border-radius: 36px 24px 38px 26px / 28px 38px 24px 36px;
  padding: 30px 40px;
  margin: 20px auto 50px;
  max-width: 920px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  box-shadow: 0 8px 30px rgba(44, 62, 45, 0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--transition-bounce), box-shadow 0.3s ease;
}
.organic-quiz-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(44, 62, 45, 0.08);
}

/* 三大堅持色塊：水彩交錯有機漸層卡片 */
.eco-organic-card-1 {
  background: linear-gradient(140deg, #F8EFE9 0%, #F5ECE5 100%);
  border-radius: 32px 22px 30px 22px;
  border: none;
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.04);
  padding: 36px 30px;
}
.eco-organic-card-2 {
  background: linear-gradient(140deg, #E6F0E7 0%, #DFECE1 100%);
  border-radius: 22px 32px 22px 30px;
  border: none;
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.04);
  padding: 36px 30px;
}
.eco-organic-card-3 {
  background: linear-gradient(140deg, #F6ECE6 0%, #EDE3DA 100%);
  border-radius: 28px 22px 32px 22px;
  border: none;
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.04);
  padding: 36px 30px;
}

/* ==========================================================================
   ✦ 全站晨曦山嵐水彩流動背景系統 (Global Flowing Atmosphere)
   ========================================================================== */

.acui-global-atmosphere {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 右上：日月潭破曉晨霞（溫暖低彩煙燻桃霞水彩光暈） */
.acui-atmosphere-top {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 780px;
  height: 660px;
  background: radial-gradient(ellipse at 50% 50%, rgba(234, 192, 180, 0.55) 0%, rgba(240, 214, 204, 0.38) 42%, rgba(245, 230, 224, 0.18) 68%, transparent 85%);
  border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
  filter: blur(64px);
  animation: acuiDawnFlow 11s ease-in-out infinite alternate;
}

/* 左下：杉林溪冷杉千米晨嵐（青嵐水綠冷礦灰青山彩光暈） */
.acui-atmosphere-bottom {
  position: absolute;
  bottom: -120px;
  left: -100px;
  width: 740px;
  height: 620px;
  background: radial-gradient(ellipse at 50% 50%, rgba(158, 194, 184, 0.55) 0%, rgba(188, 214, 206, 0.38) 42%, rgba(214, 232, 226, 0.18) 68%, transparent 85%);
  border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%;
  filter: blur(66px);
  animation: acuiMistFlow 13s ease-in-out infinite alternate;
}

/* 中央：破曉金曦茶氣流動微光 */
.acui-atmosphere-center {
  position: absolute;
  top: 25%;
  left: 30%;
  width: 580px;
  height: 460px;
  background: radial-gradient(circle at 50% 50%, rgba(242, 216, 172, 0.42) 0%, rgba(248, 232, 204, 0.22) 48%, transparent 75%);
  border-radius: 50%;
  filter: blur(56px);
  animation: acuiAmberFlow 12s ease-in-out infinite alternate;
}

/* 確保全站主要容器浮於流動背景光暈之上 */
main.container {
  position: relative;
  z-index: 1;
}

/* 水彩流體畫筆攪動 Canvas 畫布（桌面專屬・點擊 100% 穿透） */
.acui-fluid-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  z-index: 1;
  opacity: 0.95;
  mix-blend-mode: multiply;
}

@media (max-width: 899px), (hover: none) {
  .acui-fluid-canvas {
    display: none !important;
  }
}

/* ==========================================================================
   ✦ 各茶款專屬風土水彩光暈色系 (Dynamic Tea Terroir Palettes)
   ========================================================================== */

/* 1. 紫芽山茶 (Purple Camellia) — 深谷紫霧、原生古木野林紫晶色系 */
body[data-theme="purple-tea"] .acui-atmosphere-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(184, 151, 214, 0.88) 0%, rgba(212, 192, 235, 0.72) 42%, rgba(235, 222, 248, 0.35) 68%, transparent 85%);
}
body[data-theme="purple-tea"] .acui-atmosphere-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(142, 108, 186, 0.85) 0%, rgba(176, 145, 215, 0.68) 42%, rgba(215, 195, 235, 0.35) 68%, transparent 85%);
}
body[data-theme="purple-tea"] .acui-atmosphere-center {
  background: radial-gradient(circle at 50% 50%, rgba(218, 192, 242, 0.65) 0%, rgba(238, 225, 250, 0.4) 48%, transparent 75%);
}

/* 2. 杉林溪高山烏龍 (Shanlinxi) — 千米冷杉冷礦山嵐清冽水青 */
body[data-theme="shanlinxi"] .acui-atmosphere-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(133, 194, 180, 0.88) 0%, rgba(165, 218, 206, 0.72) 42%, rgba(205, 236, 228, 0.35) 68%, transparent 85%);
}
body[data-theme="shanlinxi"] .acui-atmosphere-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(98, 168, 152, 0.85) 0%, rgba(138, 198, 185, 0.68) 42%, rgba(185, 225, 215, 0.35) 68%, transparent 85%);
}
body[data-theme="shanlinxi"] .acui-atmosphere-center {
  background: radial-gradient(circle at 50% 50%, rgba(200, 235, 225, 0.65) 0%, rgba(230, 246, 240, 0.4) 48%, transparent 75%);
}

/* 3. 春錦紅 (Chun-Jin Hong) — 百香熟果芳草熟成珊瑚橙金 */
body[data-theme="chunjin-hong"] .acui-atmosphere-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(248, 178, 152, 0.88) 0%, rgba(252, 210, 154, 0.72) 42%, rgba(254, 232, 205, 0.35) 68%, transparent 85%);
}
body[data-theme="chunjin-hong"] .acui-atmosphere-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(245, 155, 124, 0.85) 0%, rgba(250, 195, 140, 0.68) 42%, rgba(252, 225, 190, 0.35) 68%, transparent 85%);
}
body[data-theme="chunjin-hong"] .acui-atmosphere-center {
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 145, 0.65) 0%, rgba(255, 235, 195, 0.4) 48%, transparent 75%);
}

/* 4. 金萱烏龍 (Jin Xuan) — 天然溫潤奶香蜜果金 */
body[data-theme="jin-xuan"] .acui-atmosphere-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(252, 228, 170, 0.88) 0%, rgba(254, 240, 200, 0.72) 42%, rgba(255, 248, 225, 0.35) 68%, transparent 85%);
}
body[data-theme="jin-xuan"] .acui-atmosphere-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(248, 206, 128, 0.85) 0%, rgba(252, 225, 165, 0.68) 42%, rgba(254, 242, 210, 0.35) 68%, transparent 85%);
}
body[data-theme="jin-xuan"] .acui-atmosphere-center {
  background: radial-gradient(circle at 50% 50%, rgba(255, 242, 195, 0.7) 0%, rgba(255, 250, 230, 0.45) 48%, transparent 75%);
}

/* 5. 文山包種 (Baozhong) — 白玉蘭清幽花香鮮爽嫩綠 */
body[data-theme="baozhong"] .acui-atmosphere-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(178, 222, 170, 0.88) 0%, rgba(205, 235, 198, 0.72) 42%, rgba(230, 248, 225, 0.35) 68%, transparent 85%);
}
body[data-theme="baozhong"] .acui-atmosphere-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(138, 200, 128, 0.85) 0%, rgba(175, 222, 168, 0.68) 42%, rgba(215, 242, 208, 0.35) 68%, transparent 85%);
}
body[data-theme="baozhong"] .acui-atmosphere-center {
  background: radial-gradient(circle at 50% 50%, rgba(220, 245, 212, 0.65) 0%, rgba(240, 252, 235, 0.4) 48%, transparent 75%);
}

/* 6. 紅韻 (Hong Yun) — 白柚花香柑橘橙金 */
body[data-theme="hong-yun"] .acui-atmosphere-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(249, 190, 114, 0.88) 0%, rgba(252, 218, 165, 0.72) 42%, rgba(254, 236, 205, 0.35) 68%, transparent 85%);
}
body[data-theme="hong-yun"] .acui-atmosphere-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(247, 163, 72, 0.85) 0%, rgba(250, 195, 125, 0.68) 42%, rgba(252, 225, 185, 0.35) 68%, transparent 85%);
}
body[data-theme="hong-yun"] .acui-atmosphere-center {
  background: radial-gradient(circle at 50% 50%, rgba(255, 225, 155, 0.65) 0%, rgba(255, 242, 205, 0.4) 48%, transparent 75%);
}

/* 7. 阿薩姆與紅玉 (Assam / Ruby) — 日月潭紅土晨霞與黑糖麥芽焦糖赤紅 */
body[data-theme="assam-ruby"] .acui-atmosphere-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(246, 175, 165, 0.88) 0%, rgba(248, 198, 188, 0.72) 42%, rgba(245, 224, 216, 0.35) 68%, transparent 85%);
}
body[data-theme="assam-ruby"] .acui-atmosphere-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(226, 120, 102, 0.85) 0%, rgba(242, 165, 150, 0.68) 42%, rgba(248, 205, 195, 0.35) 68%, transparent 85%);
}
body[data-theme="assam-ruby"] .acui-atmosphere-center {
  background: radial-gradient(circle at 50% 50%, rgba(252, 210, 170, 0.65) 0%, rgba(254, 230, 205, 0.4) 48%, transparent 75%);
}

/* ==========================================================================
   ✦ 東方茶席「縱書豎排」與文人微排版系統 (Eastern Vertical Typography)
   ========================================================================== */

.zen-vertical-spine {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.26em;
  color: var(--c-ink-muted);
  line-height: 1.8;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  opacity: 0.85;
}

.zen-vertical-spine .artisan-seal-mini {
  writing-mode: horizontal-tb;
  font-family: var(--font-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--c-seal);
  background: rgba(184, 74, 57, 0.08);
  border: 1px solid rgba(184, 74, 57, 0.35);
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 6px;
  letter-spacing: 0.05em;
}

/* 雙扉頁側邊風土豎排詩意標籤 */
.folio-vertical-emboss {
  position: absolute;
  right: 20px;
  top: 36px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--c-primary);
  opacity: 0.38;
  pointer-events: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 900px) {
  .folio-vertical-emboss {
    display: none;
  }
}

/* 高級文青微排版韻律：加大呼吸感字距與行高 */
.hero-title {
  letter-spacing: 0.08em !important;
  line-height: 1.55 !important;
}

.section-title {
  letter-spacing: 0.08em !important;
  line-height: 1.45 !important;
}

.section-desc {
  letter-spacing: 0.04em !important;
  line-height: 2.05 !important;
}

.plate-tea-name {
  letter-spacing: 0.06em !important;
}

.plate-tea-desc {
  letter-spacing: 0.03em !important;
  line-height: 1.95 !important;
}

/* 克制細微的微互動：去除突兀強烈彈跳，改為沉靜優雅的慢速過渡 */
.tea-plate-card:hover,
.eco-card-botanical:hover,
.heritage-folio:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(44, 62, 45, 0.07) !important;
}

/* ==========================================================================
   ✦ 高級文青刊物微排版（章節眉標、極細風土刻度線、風土座標標本手札）
   ========================================================================== */

/* 獨立小誌章節眉標 (Editorial Chapter Eyebrows) */
.chapter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--c-moss);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.chapter-eyebrow::before,
.chapter-eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(71, 92, 74, 0.28);
}

/* 典雅植物標本卡 (Herbarium Botanical Specimen Card) */
.tea-plate-card {
  background: #FFFFFF !important;
  border-radius: 26px !important;
  padding: 36px 32px !important;
  border: none !important;
  box-shadow: 0 10px 32px rgba(32, 45, 34, 0.04) !important;
  transition: transform 0.4s var(--transition-bounce), box-shadow 0.35s ease !important;
  position: relative;
}
.tea-plate-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 44px rgba(32, 45, 34, 0.08) !important;
}

/* 風土座標與時令微註標籤 */
.plate-terroir-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--c-moss);
  background: rgba(71, 92, 74, 0.07);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* 極細風土刻度光譜線 (Minimalist Spectrum Gauge) */
.spectrum-gauge-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 16px 0 20px;
  padding: 16px 18px;
  background: #FAF8F5;
  border-radius: 14px;
}

.spectrum-item {
  display: grid;
  grid-template-columns: 66px 1fr 52px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.spectrum-label {
  color: var(--c-ink-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.spectrum-bar-track {
  position: relative;
  height: 2px;
  background: rgba(32, 45, 34, 0.12);
  border-radius: 2px;
  width: 100%;
}

.spectrum-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--c-primary);
  border-radius: 2px;
}

.spectrum-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 2px #FFFFFF;
}

.spectrum-val-text {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--c-primary);
  text-align: right;
}

/* 感官通感詩意引言 (Poetic Sensory Excerpt) */
.sensory-quote-excerpt {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--c-ink);
  font-style: italic;
  padding: 10px 14px;
  border-left: 2px solid var(--c-accent);
  background: rgba(242, 232, 225, 0.35);
  border-radius: 0 8px 8px 0;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}

/* 大器減法章節留白 (Editorial Spacious Rhythm) */
.editorial-section-spacious {
  margin: 92px 0 54px !important;
}

@media (max-width: 900px) {
  .editorial-section-spacious {
    margin: 64px 0 36px !important;
  }
}