/* /css/calm.css — 靜讀系（經書／殿志／卷文）
   目的：沉靜、可讀、內斂，與 common.css 同步協作
   版本：2025-11-10
*/

@import url("./common.css");

/* =============== 佈局容器 =============== */
.calm-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* 讓整頁進入“靜讀模式”：在 <main> 或外層加 .calm */
.calm { }

/* =============== 標題節奏 =============== */
h1.calm, .calm h1{
  letter-spacing: .5px;
  color: var(--lf-accent);
  text-shadow: 0 0 24px rgba(255,230,160,.08);
  margin: var(--space-4) 0 var(--space-2);
}
h2.calm, .calm h2{
  color: var(--lf-fg);
  margin: var(--space-4) 0 var(--space-2);
}
h3.calm, .calm h3{
  color: var(--lf-fg-muted);
  margin: var(--space-3) 0 var(--space-2);
}
.subtitle{
  color: var(--lf-fg-muted);
  font-size: clamp(15px,2.2vw,18px);
}

/* =============== 文字與分隔 =============== */
.calm p{ margin: .95rem 0; }
.calm hr{
  border:0; height:1px; background: var(--lf-line);
  margin: var(--space-4) 0;
}
.calm small, .calm .muted{
  color: var(--lf-fg-muted);
  opacity:.9; font-size: var(--size-small);
}

/* =============== 章節面板（替代硬分隔） =============== */
.panel{
  background: linear-gradient(180deg, rgba(255,240,200,.025), rgba(0,0,0,0));
  border-radius: var(--radius-lg);
  padding: clamp(.9rem,2.2vw,1.4rem);
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.06);
  margin: var(--space-3) 0 var(--space-4);
}

/* =============== 引文／詩行／註記 =============== */
blockquote{
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-left: 3px solid rgba(255,240,200,.18);
  background: rgba(255,240,200,.03);
  color: var(--lf-fg);
  border-radius: 6px;
}
.poem{
  margin: .9rem 0;
  padding-left: 12px;
  border-left: 3px solid #caa6ff;
  color: #e7dcff;
}
.note{
  margin: .8rem 0;
  padding: .7rem .9rem;
  border: 1px dashed rgba(255,240,200,.12);
  border-radius: 10px;
  background: rgba(255,240,200,.02);
}

/* 行內引號（中文標點） */
.calm q{ quotes:"「" "」" "『" "』"; }
.calm q::before{ content: open-quote; }
.calm q::after{ content: close-quote; }

/* =============== 清單／程式碼／表格 =============== */
.calm ul, .calm ol{ padding-left: 1.4rem; }
.calm li{ margin: .35rem 0; }

.calm pre{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 12px 14px;
  overflow:auto;
}
.calm code{ font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace); }

.calm table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  border: 1px solid rgba(255,240,200,.10);
  border-radius: 12px;
  overflow: hidden;
}
.calm th, .calm td{
  padding: .7rem .9rem;
  border-bottom: 1px solid rgba(255,240,200,.08);
}
.calm thead th{
  background: rgba(255,240,200,.05);
  color: var(--lf-accent);
}

/* =============== 內頁導覽（回殿／下一站） =============== */
.calm .lf-footer{ margin-top: var(--space-5); }
.calm .next-btn{ filter: saturate(.95); }

/* 內頁回殿（沿用 common 的 .back.lf-soft-link），這裡只調距 */
.calm .back.lf-soft-link{ margin-top: var(--space-3); display:inline-block; }

/* =============== 圖文元素 =============== */
.calm figure{ margin: var(--space-3) 0; }
.calm figcaption{
  text-align:center; color: var(--lf-fg-muted);
  font-size: var(--size-small);
  margin-top: .4rem;
  opacity:.9;
}
.calm img{
  max-width: 100%; height: auto; display:block;
  border-radius: 12px;
  box-shadow: var(--lf-shadow);
}

/* =============== 行動端優化 =============== */
@media (max-width: 480px){
  .calm h1{ font-size: clamp(24px, 7vw, 34px); }
  .panel{ padding: 1rem; }
}

/* =============== 列印友好（可選） =============== */
@media print{
  body{ background:#fff; color:#000; }
  .calm .back.lf-soft-link, .next-btn{ display:none !important; }
  .panel{ box-shadow:none; border:1px solid #ccc; }
}