/* love.css — 感情 cluster 共用樣式（桃花月／吸引誰／渣男渣女／爛桃花／婚期／合婚）。
   暖象牙精品名牌風，沿用支柱頁色系。本檔在 style.css / article.css 之後載入，於 :root
   覆蓋暗金 token 為亮色，整頁 chrome 自動翻亮；共用件沿用 article.css，本檔補 cluster 專屬元件。
   類名一律 lv- 前綴，六篇共用同一支。 */

:root {
  --bg: #f7f3ec; --bg-card: #ffffff; --bg-input: #fffdf9; --border: #e4ddce;
  --text: #201d18; --text-dim: #6f685c; --gold: #a6824c; --gold-soft: #c0a070;
  --radius: 14px;
  --peach:#c86b8a;   /* 桃花／緋玫 */
  --fate:#a6824c;    /* 正緣／古金 */
  --he:#4f8c5f;      /* 合／吉 綠 */
  --chong:#b45c3f;   /* 沖／忌 緋 */
  --ping:#8a8f9c;    /* 平／中性 灰 */
  --lux-serif: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  --lux-sans: 'Jost', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
}

body { font-family: var(--lux-sans); }
.article h1, .article h2, .lv-note h2 { font-family: var(--lux-serif); font-weight: 600; }
.article h1 { font-size: 2.15rem; letter-spacing: 0.01em; line-height: 1.32; }
.article h2 { letter-spacing: 0.02em; }
.article .lead { font-size: 1.08rem; }
.article .lv-inlink, .article p a { color: var(--peach); }

.lv-sub { color: var(--text-dim); font-size: 0.98rem; margin: 0 0 18px; }

/* 兩欄對照（吸引/被吸引、渣/不渣、牆內/牆外、早婚/晚婚…） */
.lv-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 12px; }
.lv-col {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 3px solid var(--cc); border-radius: 12px; padding: 16px 18px 14px;
}
.lv-col .lv-tag { font-family: var(--lux-sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.lv-col h3 { margin: 4px 0 4px; font-family: var(--lux-serif); font-size: 1.5rem; color: var(--cc); font-weight: 600; }
.lv-col .lv-one { font-size: 0.86rem; color: var(--text-dim); margin: 0 0 10px; }
.lv-col ul { margin: 0; padding-left: 1.05em; }
.lv-col li { color: var(--text); font-size: 0.92rem; line-height: 1.7; margin-bottom: 5px; }
.lv-col li::marker { color: var(--cc); }

/* 三卡列（配偶星宮、類型…） */
.lv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 10px; }
.lv-card {
  background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--cc, var(--gold));
  border-radius: 12px; padding: 16px 16px 14px;
}
.lv-card h3 { margin: 0 0 6px; font-family: var(--lux-serif); font-size: 1.28rem; color: var(--cc, var(--gold)); font-weight: 600; }
.lv-card .lv-key { display: inline-block; margin: 0 0 8px; font-size: 0.72rem; color: #fffdf9; background: var(--cc, var(--gold-soft)); padding: 3px 10px; border-radius: 999px; letter-spacing: 0.06em; }
.lv-card p { margin: 0; color: var(--text); font-size: 0.9rem; line-height: 1.78; }
.lv-card p + p { margin-top: 8px; }
.lv-card b { color: var(--cc, var(--gold)); }

/* 桃花月／月份格（子午卯酉標記 hot） */
.lv-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.lv-m {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 6px; text-align: center; position: relative;
}
.lv-m .lv-zhi { font-family: var(--lux-serif); font-size: 1.25rem; color: var(--text); font-weight: 600; }
.lv-m .lv-mo { display: block; font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; }
.lv-m.hot { border-color: var(--peach); background: linear-gradient(160deg, #fff, #fdf3f6); }
.lv-m.hot .lv-zhi { color: var(--peach); }
.lv-m.hot::after { content: "桃花"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; background: var(--peach); color: #fffdf9; padding: 1px 7px; border-radius: 999px; letter-spacing: 0.06em; white-space: nowrap; }
.lv-m.hot[data-en]::after { content: attr(data-en); }

/* 訊號清單（渣/爛桃花「這幾個訊號」） */
.lv-sigs { list-style: none; padding: 0; margin: 6px 0 10px; }
.lv-sigs li {
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--sc, var(--chong));
  border-radius: 10px; padding: 12px 16px; margin: 0 0 9px; color: var(--text); font-size: 0.93rem; line-height: 1.8;
}
.lv-sigs li b { color: var(--sc, var(--chong)); }
.lv-sigs li .lv-note-in { display: block; margin-top: 3px; color: var(--text-dim); font-size: 0.85rem; }

/* 年齡帶／時機三段（早/中/晚 或 合/沖/平） */
.lv-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 10px; }
.lv-band {
  background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--sc);
  border-radius: 12px; padding: 14px 14px 12px; text-align: center;
}
.lv-band .lv-glyph { font-family: var(--lux-serif); font-size: 1.55rem; color: var(--sc); font-weight: 600; }
.lv-band .lv-when { display: block; font-size: 0.8rem; color: var(--sc); margin: 2px 0 6px; font-weight: 500; }
.lv-band p { margin: 0; color: var(--text-dim); font-size: 0.84rem; line-height: 1.7; }

/* 對照表（吸引型／婚期／合婚看點） */
.lv-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 4px 0 10px; }
.lv-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.93rem; }
.lv-table thead th { background: var(--bg-input); color: var(--gold); font-family: var(--lux-serif); font-weight: 600; font-size: 1.02rem; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lv-table tbody th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-family: var(--lux-serif); font-size: 1.14rem; font-weight: 600; white-space: nowrap; vertical-align: top; color: var(--rc, var(--gold)); }
.lv-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.lv-table tbody tr:last-child th, .lv-table tbody tr:last-child td { border-bottom: none; }
.lv-table .t-dim { color: var(--text-dim); font-size: 0.88rem; }

/* 誠實話 */
.lv-note {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-input));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin: 10px 0 8px;
}
.lv-note h2 { margin-top: 0; }
.lv-note p { color: var(--text-dim); }
.lv-note b { color: var(--gold); }

/* 合盤鈕（緋玫描邊） */
.cta-card .cta-btns .btn-affinity { border: 1px solid var(--peach); color: var(--peach); }

@media (max-width: 560px) {
  .lv-vs, .lv-grid3, .lv-bands { grid-template-columns: 1fr; }
  .lv-months { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 430px) {
  .article h1 { font-size: 1.8rem; }
  .lv-months { grid-template-columns: repeat(2, 1fr); }
}