/* ====== Base ====== */
:root{
  --bg: #0b0b0c;
  --panel: #101012;
  --card: #121216;
  --text: #f3f3f4;
  --muted: rgba(243,243,244,.72);
  --muter: rgba(243,243,244,.56);
  --line: rgba(243,243,244,.10);
  --accent: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --container: 1120px;

  --font: "Noto Sans TC", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  --step-0: clamp(14px, 1.2vw, 16px);
  --step-1: clamp(18px, 1.5vw, 22px);
  --step-2: clamp(24px, 2.2vw, 34px);
  --step-3: clamp(34px, 3.2vw, 52px);
}

:root[data-theme="light"]{
  --bg: #fbfbfc;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #0b0b0c;
  --muted: rgba(11,11,12,.72);
  --muter: rgba(11,11,12,.56);
  --line: rgba(11,11,12,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --accent: #0b0b0c;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }


a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font: inherit; color: inherit; }
textarea{ resize: vertical; }
em{ font-style: normal; opacity: .9; }

.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-999px; top:8px;
  background: var(--panel);
  border:1px solid var(--line);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  z-index: 9999;
}
.skip:focus{ left: 12px; }

.muted{ color: var(--muted); }
.tiny{ font-size: 12px; }

/* ====== Header / Nav ====== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-elevated{
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 18%, transparent), transparent),
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--text) 18%, transparent), transparent 60%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1;     font-size: 2rem;}
.brand-title{ font-weight: 600; letter-spacing: .6px; }
.brand-sub{ color: var(--muted); font-size: 12px; letter-spacing: .5px; }

.nav{ display:flex; align-items:center; }
.nav-toggle{
  display:none;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 10px 12px;
}
.nav-toggle-lines{
  display:block;
  width: 18px;
  height: 12px;
  position: relative;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after,
.nav-toggle-lines span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  opacity: .9;
}
.nav-toggle-lines::before{ top:0; }
.nav-toggle-lines::after{ bottom:0; }

.nav-menu{
  display:flex;
  align-items:center;
  gap: 12px;
}
.nav-link{
  padding: 10px 12px;
  border-radius: 0px;
  color: var(--muted);
}
.nav-link:hover{ background: color-mix(in srgb, var(--panel) 75%, transparent); color: var(--text); }
.nav-link.is-active{
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 80%, transparent);

}

/* ====== Buttons ====== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); opacity: .9; }

.btn-ghost{
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--text);
  box-shadow: none;
}
.btn-ghost:hover{ background: color-mix(in srgb, var(--panel) 95%, transparent); }

/* ====== Typography ====== */
.h1{ font-size: var(--step-3); margin: 8px 0 10px; letter-spacing: .6px; }
.h2{ font-size: var(--step-2); margin: 0 0 10px; letter-spacing: .4px; }
.h3{ font-size: var(--step-1); margin: 0 0 8px; letter-spacing: .2px; }
.lead{ font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family: var(--mono);
  letter-spacing: .9px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before{
  content:"";
  width: 26px;
  height: 1px;
  background: var(--line);
}

/* ====== Sections ====== */
.section{ padding: 54px 0; }
.page-hero{
  padding: 52px 0 10px;
  border-bottom: 1px solid var(--line);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.divider{
  height:1px;
  background: var(--line);
  margin: 26px 0;
}

/* ====== Hero ====== */
.hero{ padding: 70px 0 30px; }
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: center;
}
.hero-copy{
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 26px;
  box-shadow: var(--shadow);
}
.hero-zh p{ margin: 8px 0; }
.actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.trust{ margin-top: 18px; display:flex; gap: 8px; flex-wrap: wrap; }
.pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .2px;
}
.hero-panel .panel-card{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, transparent), transparent);
  padding: 22px;
  min-height: 320px;
  box-shadow: var(--shadow);
}
.panel-line{
  height: 2px;
  width: 60px;
  background: color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 2px;
  margin-bottom: 14px;
}
.panel-title{ font-weight: 600; letter-spacing: .4px; }
.panel-meta{ color: var(--muted); margin-top: 6px; font-family: var(--mono); font-size: 12px; }
.panel-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.panel-box{
  border-radius: 18px;
  border: 1px solid var(--line);
  height: 92px;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--text) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--panel) 80%, transparent);
}

/* ====== Cards / Grids ====== */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 18px;
}
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

/* ====== Plans ====== */
.plan{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 18px;
}
.plan-dark{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 85%, transparent), transparent);
}
.plan-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.price{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}
.list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.note{
  margin: 12px 0 0;
  color: var(--muter);
  font-size: 13px;
}
.plan-actions{ margin-top: 14px; }

/* ====== Cases filter ====== */
.filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chips{ display:flex; gap: 8px; flex-wrap: wrap; }
.chip{
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
}
.chip.is-active{ color: var(--text); background: color-mix(in srgb, var(--panel) 92%, transparent); }
.search input{
  width: 220px;
  max-width: 70vw;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  outline: none;
}
.search input:focus{ border-color: color-mix(in srgb, var(--text) 25%, transparent); }

.case-top{ display:flex; align-items:center; gap: 10px; }
.meta{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}
.meta dt{ font-family: var(--mono); color: var(--muter); }
.meta dd{ margin: 4px 0 0; }

/* ====== Forms ====== */
.form-wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items:start;
}
.form{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 18px;
}
.field{ margin-bottom: 14px; }
.field label{ display:block; margin-bottom: 8px; color: var(--muted); }
.field input, .field select, .field textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: color-mix(in srgb, var(--text) 25%, transparent);
}
.field-hint{
  margin: 8px 0 0;
  font-size: 12px;
  color: #ffb3b3;
  min-height: 14px;
}
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.is-checkbox .checkbox{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.is-checkbox input{ width: 18px; height: 18px; margin-top: 2px; }

.form-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.form-result{
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--muted);
}

.side{ position: sticky; top: 86px; }

/* ====== Footer ====== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 24px 0 34px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-brand{ font-weight: 600; letter-spacing: .3px; margin-bottom: 6px; }
.footer-right{ display:flex; gap: 14px; flex-wrap: wrap; }
.footer-link{ color: var(--muted); }
.footer-link:hover{ color: var(--text); }

/* ====== Responsive ====== */
@media (max-width: 920px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-panel{ display:none; }
  .grid3{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .form-wrap{ grid-template-columns: 1fr; }
  .side{ position: static; }
  .meta{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .brand{ min-width: auto; }
  .nav-toggle{ display:inline-flex; }
  .nav-menu{
    position: absolute;
    right: 20px;
    top: 62px;
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: min(340px, calc(100vw - 40px));
    padding: 12px;
    border-radius: 0px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    box-shadow: var(--shadow);
  }
  .nav-menu.is-open{ display:flex; }
  .nav-link{ display:block; }
  .form-row{ grid-template-columns: 1fr; }
}



/* ✅ RWD 跑版（body 寬度變多）修正補丁：貼到 styles.css 最底部 */

/* 1) 先把水平溢位直接鎖住（最常見：某個元素超出 1~2px 就會撐寬） */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) iOS/Safari 常見：某些元件/陰影/絕對定位在窄螢幕會撐出水平卷軸
      讓所有區塊避免超出 viewport */
*{
  max-width: 100%;
}

/* 3) 你的最可疑元兇：手機版 nav-menu 用 100vw 計算 + right 定位
      改成左右貼齊，不用 100vw，避免 1px 計算誤差撐寬 */
@media (max-width: 720px){
  .nav-menu{
    left: 20px;
    right: 20px;
    width: auto;          /* 覆蓋原本的 min(340px, calc(100vw - 40px)) */
    max-width: none;
  }
}

/* 4) 若仍有零星跑版：避免任何元素因長字串（網址/英文）撐寬 */
body{
  word-break: break-word;
  overflow-wrap: anywhere;
}


/*fdc*/

/* =========================================================
   Retro RollRoll Visual Skin (NO layout changes / no reflow)
   只改「視覺變數＋表面樣式」，不動 grid/寬度/position
   貼到 styles.css 最底部（在你原本補丁後面）
   ========================================================= */

/* 0) 加入可用字體（可選）：IBM Plex Mono / Cormorant（不會影響版面） */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Cormorant+Garamond:wght@400;500;600&display=swap');

/* 1) 色系：紙感 + 墨黑 + 黃銅 + 青花藍灰（只覆蓋 token，不改布局） */
:root{
  --rr-paper: #f6f1e6;
  --rr-ink: #111010;
  --rr-brass: #b7955f;
  --rr-brass-deep: #8d725f;
  --rr-porcelain: #cad0db;
  --rr-linen: #d6dbdc;
  --rr-olive: #655914;

  /* 讓你的 dark mode 仍維持原本結構，只是更「復古工藝」 */
  --accent: var(--rr-brass);
  --line: rgba(243,243,244,.12); /* 比原本稍清楚一點點（仍然很細） */
}

/* 2) Light mode：把「紙感」放在 light 主題（避免改你預設 dark 的整體） */
:root[data-theme="light"]{
  --bg: var(--rr-paper);
  --panel: #ffffff;
  --card: #ffffff;

  --text: var(--rr-ink);
  --muted: rgba(17,16,16,.72);
  --muter: rgba(17,16,16,.56);
  --line: rgba(17,16,16,.12);

  --accent: var(--rr-brass);
  --shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* 3) 紙感背景：只動 background，不動任何寬度/定位 */
:root[data-theme="light"] body{
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(183,149,95,.12), transparent 60%),
    radial-gradient(700px 460px at 78% 18%, rgba(202,208,219,.12), transparent 60%),
    /* 細纖維 */
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.020) 0px,
      rgba(0,0,0,.020) 1px,
      transparent 2px,
      transparent 7px
    ),
    /* 極淡網點（FDC 版畫暗示） */
    radial-gradient(circle, rgba(0,0,0,.020) 1px, transparent 1.6px) 0 0/18px 18px,
    var(--bg);
}

/* 4) 字體語氣：標題用襯線（科學圖鑑感），eyebrow 用 mono（印刷/標籤感）
      不改 font-size，不改 margin，不會導致跑版 */
.h1, .h2{
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
}
.eyebrow, .price, .panel-meta, .meta dt{
  font-family: "IBM Plex Mono", var(--mono);
}

/* 5) FDC 線框更像印刷：保持你原本邊框結構，只改顏色/透明度 */
:root[data-theme="light"] .card,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .hero-copy,
:root[data-theme="light"] .hero-panel .panel-card,
:root[data-theme="light"] .form,
:root[data-theme="light"] .cta-row{
  border-color: color-mix(in srgb, var(--rr-brass) 18%, var(--line));
  background: color-mix(in srgb, #fff 88%, var(--rr-paper));
  box-shadow: var(--shadow);
}

/* 6) 按鈕：黃銅點綴（不改 padding/尺寸），維持原本不跑版 */
:root[data-theme="light"] .btn{
  background: var(--rr-ink);
  color: var(--rr-paper);
  border-color: color-mix(in srgb, var(--rr-brass) 40%, var(--line));
}
:root[data-theme="light"] .btn-ghost{
  background: color-mix(in srgb, #fff 85%, var(--rr-paper));
  color: var(--rr-ink);
  border: 1px solid color-mix(in srgb, var(--rr-brass) 28%, var(--line));
}

/* 7) pill/chip/price：像首日封的標籤（不改大小） */
:root[data-theme="light"] .pill,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .price{
  border-color: color-mix(in srgb, var(--rr-brass) 34%, var(--line));
  background: color-mix(in srgb, #fff 88%, var(--rr-paper));
  color: rgba(17,16,16,.70);
}
:root[data-theme="light"] .chip.is-active{
  background: color-mix(in srgb, var(--rr-brass) 14%, #fff);
  border-color: color-mix(in srgb, var(--rr-brass) 55%, var(--line));
  color: var(--rr-ink);
}

/* 8) Hero 右側 panel：微黃銅光（不改 grid/高度） */
:root[data-theme="light"] .panel-line{
  background: color-mix(in srgb, var(--rr-brass) 70%, transparent);
}
:root[data-theme="light"] .panel-box{
  border-color: color-mix(in srgb, var(--rr-brass) 22%, var(--line));
  background:
    radial-gradient(circle at 25% 20%, rgba(183,149,95,.12), transparent 60%),
    color-mix(in srgb, #fff 82%, var(--rr-paper));
}

/* 9) Logo（如果你用 img.brand-logo）只改外觀不改尺寸 */
.brand-logo{
    width: 165px;
    height: 140px;
  object-fit: contain;
  background: color-mix(in srgb, var(--panel) 85%, transparent);

}

/* 10) 小工具：Caption / Stamp（不動任何既有元件結構；你想用再加 HTML）
   - caption: 科學圖鑑註記
   - stamp: FDC 標籤章印感 */
.caption{
  font-family: "IBM Plex Mono", var(--mono);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--muted);
    border-left: 2px solid 
color-mix(in srgb, var(--rr-brass) 55%, var(--line));
    padding: 10px;
    border-right: 2px solid 
color-mix(in srgb, var(--rr-brass) 55%, var(--line));
}
.stamp{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--rr-brass) 48%, var(--line));
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  font-family: "IBM Plex Mono", var(--mono);
  font-size: 12px;
  letter-spacing: .9px;
  color: var(--muted);
}

/* 11) 絕對不動 layout：避免任何「max-width:100%」套到所有元素造成怪異
   你之前加的 *{max-width:100%} 會影響某些 flex/grid 子元素計算
   建議改成只限制媒體元素（更安全） */
*{ max-width: none; }                /* 覆蓋你之前的 *{max-width:100%} */
img, svg, video, canvas{ max-width:100%; }

/* 12) 保留你原本防跑版設定（不改） */
html, body{ max-width:100%; overflow-x:hidden; }
@media (max-width: 720px){
  .nav-menu{ left:20px; right:20px; width:auto; max-width:none; }
}
body{ overflow-wrap:anywhere; word-break:break-word; }



/*紙設定*/

/* =========================================================
   Default to LIGHT (paper) — CSS only (no JS changes)
   目的：未設定 data-theme 時，一律用紙感 light 版
   貼到 styles.css 最底部（在你現有所有 patch 之後）
   ========================================================= */

/* 1) 沒有 data-theme 時，強制套用 light token */
:root:not([data-theme]){
  --bg: #f6f1e6;
  --panel: #ffffff;
  --card: #ffffff;

  --text: #111010;
  --muted: rgba(17,16,16,.72);
  --muter: rgba(17,16,16,.56);
  --line: rgba(17,16,16,.12);

  --accent: #b7955f;                 /* brass */
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  color-scheme: light;
}

/* 2) 沒有 data-theme 時，套用紙感背景（FDC / paper fiber / halftone） */
/* :root:not([data-theme]) body{
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(183,149,95,.12), transparent 60%),
    radial-gradient(700px 460px at 78% 18%, rgba(202,208,219,.12), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.020) 0px,
      rgba(0,0,0,.020) 1px,
      transparent 2px,
      transparent 7px
    ),
    radial-gradient(circle, rgba(0,0,0,.020) 1px, transparent 1.6px) 0 0/18px 18px,
    var(--bg);
} */

/* 3) 仍保留你原本的 dark：當 data-theme="dark" 時才進入深色 */
:root[data-theme="dark"]{
  color-scheme: dark;
}

/* 4) 修正：不要用 *{max-width:100%}（會造成 layout 計算怪） */
*{ max-width: none; }
img, svg, video, canvas{ max-width:100%; }

/* 5) 保留防水平溢位 */
html, body{ max-width:100%; overflow-x:hidden; }
@media (max-width: 720px){
  .nav-menu{ left:20px; right:20px; width:auto; max-width:none; }
}
body{ overflow-wrap:anywhere; word-break:break-word; }


/*rwd*/

/* Fix header overflow between 721–920px */
.header-inner{
  flex-wrap: wrap;
}

.nav-menu{
  flex-wrap: wrap;
}

/* 讓右側按鈕不會把整排撐爆 */
.nav-menu .btn{
  white-space: nowrap;
}


/*fanal*/

/* Paste to END of styles.css (prevents header overflow without changing layout rules elsewhere) */
.header-inner{ flex-wrap: wrap; }
.nav-menu{ flex-wrap: wrap; }
.nav-menu .btn{ white-space: nowrap; }




/* ==========================================================================
   Retro RollRoll 終極視覺重塑補丁
   風格融合：陶瓷、金箔金繕、日本版畫首日封、19世紀植物誌
   ========================================================================== */

/* 0. 引入古典襯線字體與打字機字體
   Cormorant Garamond (標題/典雅), Noto Serif TC (內文/閱讀), Courier Prime (標籤/印章) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Noto+Serif+TC:wght@400;500;700&family=Courier+Prime:wght@400;700&display=swap');

:root {
  /* --- 定義新色票：自然、礦物與時間的痕跡 --- */
  --rr-paper-bg: #f4f1e8;       /* 陳年米色和紙基底 */
  --rr-ceramic-white: #fdfcf8;  /* 溫潤的陶瓷釉面百 */
  --rr-ink: #2a2623;            /* 深褐色的版畫油墨黑 */
  --rr-ink-light: #5e5750;      /* 較淺的墨跡色 */
  --rr-gold: #bfa575;           /* 復古與金繕修復的古銅金 */
  --rr-indigo: #3e4a5e;         /* 青花瓷與植物染的靛藍 */
  --rr-moss: #556b4d;           /* 乾燥苔蘚與植物標本綠 */

  /* --- 字體系統 --- */
  --heading-font: "Cormorant Garamond", "Noto Serif TC", serif;
  --body-font: "Noto Serif TC", serif;
  --stamp-font: "Courier Prime", monospace;

  /* --- 覆蓋原始變數 (強制套用新風格) --- */
  --bg: var(--rr-paper-bg);
  --panel: var(--rr-ceramic-white);
  --card: var(--rr-ceramic-white);
  --text: var(--rr-ink);
  --muted: var(--rr-ink-light);
  /* 邊框改為墨色線條，而非現代的灰色 */
  --line: rgba(42, 38, 35, 0.15); 
  --accent: var(--rr-gold);
  /* 陰影變得更柔和、發散，像紙張浮起而非數位投影 */
  --shadow: 0 2px 10px rgba(42, 38, 35, 0.06), 0 8px 30px rgba(42, 38, 35, 0.04);
  --radius: 8px;  /* 圓角變小，更像手工裁切的紙卡 */
  --radius2: 16px;
}

/* ================= 全局與背景材質 ================= */

body {
margin: 0;
  background-color: var(--rr-paper-bg);
  background-image: url('../img/bg.jpg');
  background-size: cover; /* 建議加上這個，讓背景圖可以鋪滿螢幕 */
  background-position: center; /* 讓背景圖居中 */
  background-attachment: fixed; /* 可選：讓背景圖固定，滑動時只有內容動 */
  color: var(--text);
  font-family: var(--body-font); 
  font-size: var(--step-0);
  letter-spacing: .2px;
}

/* 標題全面替換為古典襯線體，模擬印刷品 */
h1, h2, h3, .h1, .h2, .h3, .brand-title {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 導航列與頁尾：融入紙張背景，加入金線裝飾 */
.site-header {
    background: rgb(255 255 255);
    border-bottom: 1px solid var(--rr-gold);
}
.site-footer {
    background: var(--rr-paper-bg);
    border-top: 3px double var(--line); /* 雙線墨印風格 */
    position: relative;
}
/* 頁尾加入一點植物色彩點綴 */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(to right, var(--rr-gold), var(--rr-moss), var(--rr-indigo));
    opacity: 0.3;
}


/* ================= 組件風格重塑 ================= */

/* 1. 卡片與面板：模仿厚磅紙卡或陶瓷片的質感 */
.card, .plan, .hero-copy, .hero-panel .panel-card, .form, .cta-row, .side.card, .nav-menu.is-open {
  background-color: var(--rr-ceramic-white);
  /* 邊框加粗，模仿墨水蓋印的邊緣 */
  border: 1px solid rgba(42, 38, 35, 0.15);
  box-shadow: var(--shadow);
  /* 增加極細微的內部紋理 */
  background-image: linear-gradient(to bottom right, rgba(255,255,255,0.8), transparent);
}

/* 特別強調的卡片 (如 Plan D)：深色版畫與金箔風格 */
.plan.plan-dark {
  background: var(--rr-ink);
  border: 2px solid var(--rr-gold); /* 金箔邊框 */
  color: var(--rr-ceramic-white);
}
.plan.plan-dark .muted, .plan.plan-dark .list li {
    color: rgba(253, 252, 248, 0.8);
}
.plan.plan-dark .h2 { color: var(--rr-gold); }


/* 2. 按鈕：模仿琺瑯徽章或封蠟章 */
.btn {
  background: var(--rr-ink); /* 墨黑底 */
  color: var(--rr-paper-bg);
  border: none;
  font-family: var(--heading-font);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 4px; /* 較方正的印章感 */
  /* 底部加入金線，模仿金屬底座或金箔邊緣 */
  box-shadow: 0 3px 0 var(--rr-gold), var(--shadow);
  transition: all 0.15s ease;
}
.btn:hover {
  transform: translateY(2px); /* 按壓感 */
  box-shadow: 0 1px 0 var(--rr-gold), var(--shadow);
  background: var(--rr-indigo); /* hover 變青花藍 */
}
.btn-ghost {
  background: transparent;
  border: 2px solid var(--rr-ink); /* 墨線邊框 */
  color: var(--rr-ink);
  box-shadow: none;
}
.btn-ghost:hover {
    background: rgba(42, 38, 35, 0.05);
    transform: none;
    border-color: var(--rr-indigo);
    color: var(--rr-indigo);
}


/* 3. 標籤、印章與小標題：模仿打字機或手工蓋印 */
.eyebrow, .panel-meta, .meta dt, .caption, .pill, .chip, .price, .stamp {
  font-family: var(--stamp-font); /* 打字機字體 */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 首頁 Hero 的特殊印章 */
.stamp {
    color: var(--rr-indigo);
    border: 2px solid var(--rr-indigo);
    border-radius: 2px;
    transform: rotate(-2deg) inline-block; /* 歪斜蓋印效果 */
    padding: 6px 10px;
    background: rgba(62, 74, 94, 0.05);
    font-weight: 700;
}

/* 植物標籤風格 */
.pill, .chip, .price {
    background: var(--rr-paper-bg);
    border: 1px solid var(--rr-moss); /* 植物綠邊框 */
    color: var(--rr-moss);
    font-weight: 600;
    border-radius: 4px;
}
.chip.is-active {
    background: var(--rr-moss);
    color: var(--rr-paper-bg);
}

/* ================= 特殊區塊細節 ================= */

/* Hero 右側面板：科學儀器/標本盒風格 */
.hero-panel .panel-card {
    border: 3px double var(--line); /* 雙線邊框，像舊相框 */
}
.panel-line {
    background: var(--rr-gold); /* 金色裝飾線 */
    height: 3px;
}
.panel-box {
    /* 模仿標本槽位，帶有內陰影 */
    background: rgba(62, 74, 94, 0.05);
    border: 1px solid rgba(62, 74, 94, 0.2);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* 表單輸入框：舊式表格 */
.field input, .field select, .field textarea {
    background: var(--rr-paper-bg);
    border: 2px solid var(--line);
    border-radius: 4px;
    font-family: var(--body-font);
    color: var(--rr-ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--rr-indigo); /* focus 時變青花藍 */
    background: #fff;
}

/* Logo 調整 */
.brand-logo {

}
.brand-sub {
    font-family: var(--stamp-font);
    color: var(--rr-indigo);
}


/* ====== 頁尾智慧財產權聲明 ====== */
.footer-legal {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px dashed var(--line); /* 虛線模仿舊式印刷的裁切線或分隔線 */
  text-align: left;
}

.footer-legal p {
  margin: 0;
  line-height: 1.6;
  font-family: var(--stamp-font); /* 使用打字機/印章字體增加復古感 */
  letter-spacing: 0.05em;
  color: var(--rr-ink-light);
  opacity: 0.8; /* 稍微淡化，不搶主視覺 */
}



/* 輪播 */
/* ==========================================================================
   Hero Slider (復古輪播圖)
   ========================================================================== */
.panel-slider {
  position: relative;
  margin-top: 18px;
  border-radius: 4px; /* 呼應紙張邊緣 */
  overflow: hidden;
  /* 標本槽位底色與內陰影 */
  background: rgba(62, 74, 94, 0.05);
  border: 1px solid rgba(62, 74, 94, 0.2);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* 平滑柔和的滑動曲線 */
  height: 220px; /* 您可依圖片實際比例微調此高度 */
}

.slider-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.slider-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 2px;
  /* 圖片加上淡淡的老照片邊框感 */
  box-shadow: 0 2px 8px rgba(42, 38, 35, 0.1); 
}

/* 控制列（按鈕與點點） */
.slider-controls {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 2;
}

/* 復古打字機風格按鈕 */
.slider-btn {
  background: var(--rr-paper-bg);
  border: 1px solid var(--rr-indigo);
  color: var(--rr-indigo);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--stamp-font);
  font-size: 14px;
  line-height: 1;
  padding-bottom: 2px; /* 微調箭頭垂直置中 */
  opacity: 0.85;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.slider-btn:hover {
  background: var(--rr-indigo);
  color: var(--rr-paper-bg);
  opacity: 1;
  transform: translateY(-1px);
}

/* 指示點點 */
.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px; /* 故意不用正圓，改成小方塊模仿底片孔或打孔紙 */
  background: transparent;
  border: 1px solid var(--rr-indigo);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.slider-dot.is-active {
  background: var(--rr-gold);
  border-color: var(--rr-gold);
  opacity: 1;
  transform: scale(1.1);
}


/* ==========================================================================
   Hero 滿版輪播與無邊框文字重排
   ========================================================================== */

/* 1. 滿版輪播區塊 */
.hero-slider-banner {
  width: 100%;
  height: 60vh; /* 滿版高度，您可依需求修改數值 (例如改為 500px) */
  min-height: 400px;
  position: relative;
  overflow: hidden;
  margin-bottom: 48px; /* 與下方文字的間距 */
}

.hero-slider-banner .slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slider-banner .slider-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.hero-slider-banner .slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 讓圖片自動裁切並完美填滿整個畫面 */
  border-radius: 0;  /* 滿版不需要圓角 */
  box-shadow: none;
}

/* 將輪播控制按鈕移到圖片底部的中央 */
.hero-slider-banner .slider-controls {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  z-index: 10;
}

/* 2. 重新設定文字區塊，移除背景與邊框 */
.hero-content {
  max-width: 800px; /* 控制最大寬度，讓文字稍微集中，閱讀體驗更好 */
  margin: 0 auto 60px;
  text-align: center; /* 文字整體置中 */
}

.hero-copy-clean {
  background: transparent !important; /* 強制移除背景 */
  border: none !important;            /* 強制移除邊框 */
  box-shadow: none !important;        /* 強制移除陰影 */
  padding: 0 20px;
}

/* 修正細節元素的置中 */
.hero-copy-clean .stamp {
  margin: 0 auto 20px;
}

.hero-copy-clean .actions {
  justify-content: center; /* 讓兩顆按鈕也置中排列 */
  margin-top: 32px;
  margin-bottom: 24px;
}

/* 隱藏舊的 hero layout 設定，避免衝突 */
.hero { padding: 0; display: none; }