/* /css/common.css
   全站共用：色票、排版、回殿導覽、雙層頁尾、按鈕、卡片、淡入就緒態
*/

/* ===== 設計變數（可微調色階即可全站生效） ===== */
:root{
  --lf-bg: #0c0c0f;            /* 深黑底 */
  --lf-surface: #131418;       /* 次層底 */
  --lf-fg: #e9e1cc;            /* 主文字（暖金米） */
  --lf-fg-muted: #c8c1ad;      /* 次文字 */
  --lf-accent: #f0d9a6;        /* 亮金（標題/按鈕字） */
  --lf-accent-soft: #b59f74;   /* 柔金（描邊/次要icon） */
  --lf-glow: rgba(255, 230, 160, .35); /* 柔光暈 */
  --lf-line: rgba(255, 240, 200, .08); /* 微分隔 */
  --lf-shadow: 0 6px 20px rgba(0,0,0,.45);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;

  --size-h1: clamp(28px, 4.5vw, 44px);
  --size-h2: clamp(22px, 3.4vw, 32px);
  --size-h3: clamp(18px, 2.6vw, 24px);
  --size-body: 18px;
  --size-small: 14.5px;

  --space-1: .35rem;
  --space-2: .7rem;
  --space-3: 1.1rem;
  --space-4: 1.6rem;
  --space-5: 2.2rem;
}

/* ===== 基礎排版 ===== */
html,body{
  background: var(--lf-bg);
  color: var(--lf-fg);
  font-family: ui-serif, "Noto Serif TC","Songti TC","PingFang TC","Source Han Serif TC", serif;
  font-size: var(--size-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin:0;
}
main{ display:block }

/* 進場就緒：你常用的 body.lf-ready */
body{ opacity:.001; transition: opacity .5s ease; }
body.lf-ready{ opacity:1; }

/* 標題節奏 */
h1{ font-size:var(--size-h1); color:var(--lf-accent); margin: var(--space-4) 0 var(--space-2); }
h2{ font-size:var(--size-h2); color:var(--lf-accent); margin: var(--space-4) 0 var(--space-2); }
h3{ font-size:var(--size-h3); color:var(--lf-fg);     margin: var(--space-3) 0 var(--space-2); }
.subtitle{ color:var(--lf-fg-muted); font-size: clamp(15px,2.2vw,18px); }

/* 段落與弱分隔 */
p{ margin: .9rem 0; }
hr{ border:0; height:1px; background:var(--lf-line); margin: var(--space-4) 0; }

/* ===== 回殿導覽（頁首左上） ===== */
.back.lf-soft-link{
  display:inline-block;
  color:var(--lf-accent);
  text-decoration:none;
  padding:.45rem .8rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,240,200,.06), rgba(255,240,200,.02));
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.12);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.back.lf-soft-link:hover,
.back.lf-soft-link:focus{
  background: linear-gradient(180deg, rgba(255,240,200,.13), rgba(255,240,200,.04));
  box-shadow: 0 0 22px var(--lf-glow), inset 0 0 0 1px rgba(255,240,200,.18);
  transform: translateY(-1px);
  outline: none;
}

/* ===== 主要行動按鈕（下一站） ===== */
.next-btn{
  --pad: 0.9rem 1.2rem;
  display:inline-block;
  margin: var(--space-3) 0;
  padding: var(--pad);
  color:#0c0c0f;
  background: radial-gradient(120% 120% at 50% 0%, #ffe9b8, #f2d9a9);
  border-radius: var(--radius-xl);
  text-decoration:none;
  font-weight: 600;
  box-shadow: 0 6px 28px rgba(255,230,160,.18), 0 2px 0 rgba(255,255,255,.3) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.next-btn:hover,.next-btn:focus{
  transform: translateY(-1px);
  box-shadow: 0 10px 36px rgba(255,230,160,.26);
}

/* ===== 低調輔助導覽（頁尾第二層） ===== */
.lf-footer{ text-align:center; margin: var(--space-5) 0 var(--space-4); }
.lf-footer .note{
  color:var(--lf-fg-muted);
  opacity:.9;
  margin-bottom: var(--space-3);
  font-size: var(--size-small);
}

.nav-buttons{
  margin-top: var(--space-3);
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.nav-buttons a{
  display:inline-block;
  padding:.55rem 1rem;
  border-radius: var(--radius-md);
  color:var(--lf-accent);
  text-decoration:none;
  background: rgba(255,240,200,.05);
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.12);
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.nav-buttons a:hover,.nav-buttons a:focus{
  background: rgba(255,240,200,.10);
  box-shadow: 0 0 14px var(--lf-glow), inset 0 0 0 1px rgba(255,240,200,.18);
  transform: translateY(-1px);
}
.nav-buttons .sep{ opacity:.5; color:var(--lf-fg-muted); }

/* ===== 卡片（通用） ===== */
.lf-card{
  background: linear-gradient(180deg, rgba(255,240,200,.03), rgba(255,240,200,.01));
  border-radius: var(--radius-xl);
  box-shadow: var(--lf-shadow), inset 0 0 0 1px rgba(255,240,200,.08);
  padding: clamp(1rem, 2.2vw, 1.6rem);
}

/* ===== 可讀長文寬度 ===== */
.lf-container{ max-width: 860px; margin: 0 auto; padding: 0 1.1rem; }
@media (min-width: 960px){ .lf-container{ padding: 0 1.6rem; }}

/* ===== 可選：頁尾接近時微亮主出口 ===== */
@media (hover:hover){
  .lf-footer:has(.next-btn){
    scroll-margin-block-end: 20vh;
  }
}

/* 卷內雙欄排版 */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.two-col .left, .two-col .right{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
}
/* 手機自動改回單欄 */
@media (max-width: 780px){
  .two-col{ grid-template-columns: 1fr; }
}