/* 十三學苑官網共用樣式 —— 由各頁內嵌 CSS 的共同部分抽出 */
:root{ --gold: #d8b46a; --gold-light: #f3dfa8; --gold-deep: #a9803c; --ink: #0c0a09; --ink-2: #171210; --plum: #241419; --cream: #f3ead9; --cream-dim: rgba(243,234,217,0.72); --line: rgba(216,180,106,0.28); }
*{ margin:0; padding:0; box-sizing:border-box; }
.wrap{ max-width: 900px; margin: 0 auto; padding: 100px 6vw 120px; }
.top-nav{ max-width: 1120px; margin: 0 auto; padding: 30px 6vw 0; display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 14px; }
.back{ font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 14px; color: var(--gold-light); letter-spacing: 0.08em; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.sub-nav{ display: flex; gap: 22px; flex-wrap: wrap; }
.sub-nav a{ font-size: 13px; color: var(--cream-dim); letter-spacing: 0.05em; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: all .25s ease; }
.sub-nav a:hover{ color: var(--gold-light); border-color: var(--line); }
.ornament{ width: 1px; height: 40px; position: relative; overflow: hidden; background: linear-gradient(180deg, transparent, rgba(216,180,106,0.22), transparent); margin: 50px auto; opacity: 0.85; }
.ornament::after{ content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: linear-gradient(180deg, transparent, var(--gold-light), transparent); animation: ornamentFlow 2.6s linear infinite; }
.quick-pick .qp-label{ text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; color: var(--gold-light); margin-bottom: 20px; }
.qp-row{ display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.qp-card{ display: flex; align-items: center; gap: 14px; width: 300px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(216,180,106,0.05); transition: all .25s ease; }
.qp-card:hover{ border-color: var(--gold); background: rgba(216,180,106,0.1); transform: translateY(-2px); }
.qp-card img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.qp-card .qp-text{ text-align: left; }
.qp-card .qp-tag{ font-size: 11px; color: var(--gold); letter-spacing: 0.05em; display: block; margin-bottom: 3px; }
.qp-card .qp-name{ font-size: 14px; color: var(--cream); font-weight: 600; }
.catalog{ position: relative; }
.search-box{ max-width: 480px; margin: 40px auto 0; position: relative; display: flex; align-items: center; }
.search-box input{ width: 100%; font-family: "Noto Serif TC", serif; font-size: 14px; color: var(--cream); letter-spacing: 0.02em; padding: 13px 20px; border: 1px solid var(--line); border-radius: 24px; background: rgba(216,180,106,0.05); backdrop-filter: blur(6px); transition: all .25s ease; }
.search-box input::placeholder{ color: var(--cream-dim); opacity: 0.6; }
.search-box input:focus{ outline: none; border-color: var(--gold); background: rgba(216,180,106,0.1); }
.search-box .search-count{ position: absolute; right: 20px; font-size: 12px; color: var(--gold-light); opacity: 0.8; pointer-events: none; display: none; }
.search-box .search-count.visible{ display: block; }
.no-result{ text-align: center; padding: 60px 20px; color: var(--cream-dim); font-size: 14px; display: none; line-height: 1.9; }
.no-result.visible{ display: block; }
.no-result a{ color: var(--gold-light); border-bottom: 1px solid var(--line); }
.cat-nav{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 40px 0 10px; position: sticky; top: 12px; z-index: 5; padding: 10px 10px 4px; border-radius: 24px; background: rgba(12,10,9,0.82); backdrop-filter: blur(10px); }
.cat-btn{ font-family: "Noto Serif TC", serif; font-size: 13px; color: var(--cream-dim); letter-spacing: 0.03em; padding: 9px 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(12,10,9,0.75); backdrop-filter: blur(6px); cursor: pointer; transition: all .25s ease; }
.cat-btn:hover, .cat-btn.active{ border-color: var(--gold); color: var(--gold-light); background: rgba(216,180,106,0.14); }
.group{ margin-top: 80px; }
.group-head{ text-align: center; margin-bottom: 34px; }
.group-head h2{ font-size: clamp(22px, 2.8vw, 28px); color: var(--gold-light); letter-spacing: 0.06em; margin-bottom: 8px; font-weight: 700; }
.group-head p{ font-size: 13.5px; color: var(--cream-dim); font-style: italic; font-family: "Cormorant Garamond", serif; }
.grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.r-card{ border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: rgba(216,180,106,0.03); transition: transform .3s ease, border-color .3s ease; display: flex; flex-direction: column; scroll-margin-top: 90px; }
.r-card:hover{ transform: translateY(-4px); border-color: var(--gold); }
.r-card:hover img{ transform: scale(1.06); }
.r-body{ padding: 20px 22px 24px; text-align: left; flex: 1; display: flex; flex-direction: column; }
.r-card h3{ font-size: 16px; color: var(--gold-light); margin-bottom: 10px; letter-spacing: 0.03em; font-weight: 600; }
.r-hook{ font-size: 13.5px; line-height: 1.85; color: var(--cream-dim); font-weight: 300; margin-bottom: 16px; }
.r-price{ margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.r-price-note{ font-size: 11px; color: var(--gold); opacity: 0.9; letter-spacing: 0.02em; margin-bottom: 6px; display: block; }
.r-price .tier-row{ display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--cream-dim); padding: 4px 0; letter-spacing: 0.02em; gap: 10px; }
.r-price .tier-row.top-tier{ color: var(--gold-light); font-weight: 600; }
.r-price .tier-left{ display: flex; flex-direction: column; }
.r-price span.tier-name{ opacity: 0.9; }
.r-price span.tier-desc{ font-size: 10.5px; opacity: 0.55; font-weight: 300; margin-top: 1px; }
.r-price .tier-row.top-tier span.tier-desc{ opacity: 0.75; }
.r-testimonial .rt-row{ display: flex; gap: 12px; align-items: flex-start; }
.r-testimonial .rt-thumb{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--gold); cursor: zoom-in; }
.r-testimonial p{ font-size: 13px; line-height: 1.8; color: var(--cream-dim); font-style: italic; font-family: "Cormorant Garamond", serif; margin: 0; }
.custom-card{ grid-column: 1 / -1; display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, rgba(216,180,106,0.06), transparent); }
.custom-card img{ width: 260px; flex-shrink: 0; object-fit: cover; cursor: zoom-in; }
.custom-card .cc-body{ text-align: center; padding: 40px 34px; margin: auto; }
.custom-card h3{ font-size: 19px; color: var(--gold-light); margin-bottom: 12px; }
.custom-card p{ font-size: 14px; color: var(--cream-dim); line-height: 1.9; max-width: 560px; margin: 0 auto 8px; }
.warn-note{ text-align: center; font-size: 12px; color: rgba(243,234,217,0.45); line-height: 1.8; margin-top: 30px; }
.faq-q .qmark{ font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--gold); font-size: 22px; flex-shrink: 0; }
.cta-block{ text-align:center; margin-top: 60px; }
.cta-block p{ font-size: 15px; color: var(--cream-dim); margin-bottom: 22px; line-height: 1.9; }
.btn-solid{ display: inline-block; padding: 16px 44px; background: linear-gradient(180deg, var(--gold-light), var(--gold-deep)); color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; border-radius: 2px; box-shadow: 0 6px 26px rgba(216,180,106,0.25); transition: transform .3s ease; }
.btn-solid:hover{ transform: translateY(-2px); }
.lightbox.active{ display:flex; }
.float-btn{ display: flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 30px; font-size: 13px; letter-spacing: 0.03em; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,0.4); transition: transform .25s ease; }
.float-btn:hover{ transform: translateY(-2px); }
.float-btn.primary{ background: linear-gradient(180deg, var(--gold-light), var(--gold-deep)); color: var(--ink); }
.float-btn.secondary{ background: rgba(12,10,9,0.85); backdrop-filter: blur(6px); color: var(--gold-light); border: 1px solid var(--line); font-weight: 400; }
.float-btn.top{ width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; font-size: 16px; background: rgba(12,10,9,0.85); backdrop-filter: blur(6px); color: var(--gold-light); border: 1px solid var(--line); font-weight: 400; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.float-btn.top.visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.r-card.hide{ display: none; }
.art-meta{ text-align:center; margin-bottom: 40px; }
.art-date{ font-size: 12px; color: var(--cream-dim); letter-spacing: 0.05em; }
.section{ margin-bottom: 90px; }
.compare-table{ width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.compare-table th, .compare-table td{ border: 1px solid var(--line); padding: 14px 16px; text-align: left; line-height: 1.7; }
.compare-table th{ color: var(--gold-light); font-weight: 600; background: rgba(216,180,106,0.06); }
.compare-table td{ color: var(--cream-dim); }
.related-links{ font-size: 14px; line-height: 2.2; margin: 20px 0; }
.related-links a{ color: var(--gold-light); border-bottom: 1px solid var(--line); }
.related-links a:hover{ border-color: var(--gold); }
.signal-list li{ font-size: 15px; line-height: 1.9; color: var(--cream-dim); padding-left: 30px; position: relative; margin-bottom: 12px; counter-increment: signal; }
.signal-list li::before{ content: counter(signal); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border: 1px solid var(--gold); border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 11px; color: var(--gold-light); font-family: "Cormorant Garamond", serif; }
.section .s-title{ text-align:center; font-size: clamp(20px, 3vw, 24px); color: var(--gold-light); letter-spacing: 0.04em; margin-bottom: 30px; font-weight: 700; }
.rule-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rule-card{ border: 1px solid var(--line); border-radius: 6px; padding: 24px; background: rgba(216,180,106,0.03); }
.rule-card .r-label{ font-size: 13px; color: var(--gold-light); font-weight: 600; letter-spacing: 0.03em; margin-bottom: 10px; display:block; }
.rule-card p{ font-size: 14px; line-height: 1.9; color: var(--cream-dim); font-weight: 300; margin-bottom: 6px; }
.rule-card p:last-child{ margin-bottom: 0; }
.tier-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.catalog-link{ text-align:center; margin-top: 24px; }
.catalog-link a{ font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 13px; color: var(--gold-light); letter-spacing: 0.05em; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.feature-list{ display:flex; flex-direction: column; gap: 22px; }
.feature-item{ border-bottom: 1px dashed var(--line); padding-bottom: 20px; }
.feature-item:last-child{ border-bottom: none; }
.feature-item .f-title{ font-size: 15px; color: var(--gold-light); font-weight: 600; margin-bottom: 8px; display:block; }
.feature-item p{ font-size: 14px; line-height: 1.9; color: var(--cream-dim); font-weight: 300; }
.note-block p{ margin-bottom: 6px; }
.note-block p:last-child{ margin-bottom: 0; }
.body-text{ max-width: 620px; margin: 0 auto; font-size: clamp(15px, 1.7vw, 17px); line-height: 2.15; color: var(--cream-dim); font-weight: 300; }
.body-text + .body-text{ margin-top: 22px; }
.body-text strong{ color: var(--gold-light); font-weight: 600; }
.t-card .quote-mark{ font-size: 30px; color: var(--gold); font-family: "Cormorant Garamond", serif; line-height:1; }
.t-card p.quote{ font-size: 15px; line-height: 1.9; color: var(--cream); font-weight: 300; margin: 12px 0 18px; }
.t-card .who{ font-size: 13px; color: var(--gold-light); letter-spacing: 0.08em; }
.trust-row{ display: flex; justify-content: center; gap: 60px; margin: 0 auto 44px; flex-wrap: wrap; }
.trust-item{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.trust-num{ font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(30px, 4vw, 40px); color: var(--gold-light); filter: drop-shadow(0 0 12px rgba(216,180,106,0.3)); }
.trust-label{ font-size: 13px; color: var(--cream-dim); letter-spacing: 0.08em; }
.btn-line:hover{ background: rgba(216,180,106,0.12); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.benefit-list{ list-style: none; margin: 20px 0; }
.benefit-list li{ font-size: 15px; line-height: 1.95; color: var(--cream-dim); padding-left: 26px; position: relative; margin-bottom: 10px; }
.benefit-list li::before{ content: "✨"; position: absolute; left: 0; }
.price-block{ margin-top: 20px; }
.price-note{ text-align:center; font-size: 14px; color: var(--gold-light); font-style: italic; font-family: "Cormorant Garamond", serif; margin-bottom: 28px; }
.tier{ border: 1px solid var(--line); border-radius: 6px; padding: 22px 26px; margin-bottom: 16px; background: rgba(216,180,106,0.03); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.tier.top{ border-color: var(--gold); background: rgba(216,180,106,0.08); }
.tier .tier-left{ flex: 1; min-width: 200px; }
.tier .tier-name{ font-size: 16px; color: var(--gold-light); font-weight: 600; letter-spacing: 0.03em; }
.tier .tier-desc{ font-size: 13px; color: var(--cream-dim); margin-top: 6px; line-height: 1.7; }
.tier .tier-price{ font-size: 22px; color: var(--gold-light); font-weight: 600; font-family: "Cormorant Garamond", serif; white-space: nowrap; }
.step-item{ text-align: left; }
.step-num{ font-family: "Cormorant Garamond", serif; font-size: 28px; font-style: italic; color: var(--gold); opacity: 0.8; display: block; margin-bottom: 8px; }
.step-item strong{ display: block; color: var(--gold-light); font-size: 15px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.02em; }
.rule-block{ margin-top: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 20px 24px; background: rgba(216,180,106,0.02); }
.rule-block p{ font-size: 12.5px; line-height: 1.9; color: var(--cream-dim); margin-bottom: 6px; }
.stance-note{ max-width:700px; margin:44px auto 0; padding:22px 24px; border-radius:8px; background:rgba(216,180,106,0.06); border:1px solid var(--line); }
.stance-note b{ display:block; font-size:13px; color:var(--gold-light); letter-spacing:.06em; margin-bottom:10px; font-weight:600; }
.stance-note p{ font-size:13px; line-height:1.95; color:rgba(243,234,217,0.66); font-weight:300; margin:0 0 8px; }
.stance-note p:last-child{ margin-bottom:0; }
.deadline-banner{ border: 1px solid var(--gold); border-radius: 6px; padding: 18px 24px; background: rgba(216,180,106,0.08); text-align: center; margin-bottom: 60px; }
.deadline-banner .dl-label{ font-size: 12px; letter-spacing: 0.15em; color: var(--gold); display:block; margin-bottom: 6px; }
.deadline-banner .dl-main{ font-size: 19px; color: var(--gold-light); font-weight: 700; letter-spacing: 0.03em; }
.deadline-banner .dl-sub{ font-size: 12.5px; color: var(--cream-dim); margin-top: 8px; }
.btn-solid.disabled, .float-btn.primary.disabled{ background: rgba(243,234,217,0.14); color: rgba(243,234,217,0.45); box-shadow: none; cursor: not-allowed; pointer-events: none; }
.btn-solid.disabled:hover{ transform: none; }
.plan-card{ flex: 1 1 260px; border: 1px solid var(--line); border-radius: 6px; padding: 26px 24px; background: rgba(216,180,106,0.03); position: relative; }
.plan-card.recommended{ border-color: var(--gold); background: rgba(216,180,106,0.08); }
.plan-title{ font-size: 16px; color: var(--gold-light); font-weight: 600; margin-bottom: 14px; }
.plan-breakdown{ font-size: 13px; color: var(--cream-dim); line-height: 1.8; }
.tier-card{ border: 1px solid var(--line); border-radius: 6px; padding: 22px 22px; background: rgba(216,180,106,0.03); position: relative; }
.tier-card.highlight{ border-color: var(--gold); background: rgba(216,180,106,0.08); }
.tier-head{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tier-num{ font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--gold); font-size: 15px; }
.tier-tag{ display: block; font-size: 12px; color: var(--gold); margin-bottom: 12px; }
.tier-includes{ font-size: 13px; line-height: 1.85; color: var(--cream-dim); margin-bottom: 14px; }
.tier-price-row{ padding-top: 12px; border-top: 1px dashed var(--line); }

@media (max-width: 480px){
  .qp-card{ width: 100%; }
  .float-btn .label{ display: none; }
  .float-btn{ padding: 13px; }
}

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
  .grid{ grid-template-columns: 1fr; }
}

@media (max-width: 700px){
  .custom-card{ flex-direction: column; }
  .custom-card img{ width: 100%; }
  .rule-grid{ grid-template-columns: 1fr; }
}

/* 頁尾（全站共用） */
footer{ text-align:center; padding: 60px 6vw 50px; background: var(--ink); border-top: 1px solid var(--line); }
footer .f-logo{ width:64px; height:64px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; }
footer .f-logo img{ width:100%; filter: drop-shadow(0 0 10px rgba(216,180,106,0.35)); }
footer p{ font-size: 12.5px; color: rgba(243,234,217,0.4); letter-spacing: 0.05em; margin-top: 6px; }
footer .f-fine{ font-size: 11px; line-height:1.8; color: rgba(243,234,217,0.3); max-width: 620px; margin: 14px auto; }

/* 商品圖統一 3:4 版位。少數 2:3 的圖左右露出的是頁面背景本身，
   比把補色烘進 JPEG 乾淨。排除 .rt-thumb（44px 圓形見證縮圖）。 */
body.ratio-lock .hero-img,
body.ratio-lock .section img:not(.rt-thumb){
  aspect-ratio: 3 / 4;
  object-fit: contain;
  height: auto;
}
body.ratio-lock .section .t-card img,
body.ratio-lock .section .r-testimonial img{
  aspect-ratio: auto;
  object-fit: fill;
}

/* 見證註記與標籤（部分頁面原本沒有定義，補在共用檔）*/
.care-note{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:11px; line-height:1.8; color:rgba(243,234,217,0.42); font-weight:300; }
.care-note b{ color:rgba(243,234,217,0.62); font-weight:600; display:block; margin-bottom:4px; }
.mind-note{ font-size:12.5px; color:rgba(243,234,217,0.6); }
.mind-note b{ color:var(--gold-light); }
.r-testimonial .rt-label{ display:block; font-size:11px; letter-spacing:0.1em;
  color:var(--gold); margin-bottom:10px; text-align:center; }