/* 歸根「午後窗光」風格：給 content/embeds/ 的互動區塊用（祈福報名、靈魂導航引導），全部以 .forest 開頭，不影響其他區塊。
   2026-10-18 經營者從三個方向選了 B（午後窗光：大照片開場、米白留白、窗光掃過），另外加上 C 的「語桐想跟你說」對話框和圓圓的字（粉圓 Huninn）。
   設計實驗頁在 design-lab/directions.html（不會部署）。動畫的程式在 js/forest.js。 */
.forest {
  --forest-900: #1D2618;
  --forest-700: #2C3B27;
  --forest-500: #3D4435;
  --moss: #5E6B4A;
  --paper: #EFE5D0;
  --cream: #F3EAD8;
  --linen: #F7F1E6;
  --rule: #DCCFB4;
  --body: #4F5245;
  --muted: #6A6C5C;
  --gold-deep: #8A6E3E;
  --serif: "Noto Serif TC", serif;
  --sans: "Noto Sans TC", sans-serif;
  --round: "Huninn", "Noto Sans TC", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  position: relative;
  overflow-x: clip;  /* 不能用 hidden：會讓底部結帳列無法貼在畫面底部 */
  background: var(--linen);
  color: var(--forest-700);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: .03em;
  padding-bottom: 96px;
  scroll-margin-top: 68px;
}
.forest *, .forest *::before, .forest *::after { box-sizing: border-box; }

/* 開場大照片：慢慢推近＋窗光掃過，下緣漸漸融進米白 */
.forest .f-hero { position: relative; height: 56vh; min-height: 340px; max-height: 600px; overflow: hidden; }
.forest .f-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.08); transition: transform 14s ease-out; }
.forest .f-hero.in img { transform: scale(1); }
.forest .f-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247, 241, 230, 0) 38%, var(--linen) 97%); }
.forest .f-light { position: absolute; inset: -20% -40%; background: linear-gradient(115deg, rgba(255, 244, 214, 0) 35%, rgba(255, 244, 214, .55) 45%, rgba(255, 244, 214, 0) 55%); animation: f-sweep 9s ease-in-out infinite; mix-blend-mode: soft-light; pointer-events: none; }
@keyframes f-sweep { 0%, 100% { transform: translateX(-12%); } 50% { transform: translateX(12%); } }

.forest .f-w { position: relative; max-width: 600px; margin: 0 auto; padding: 72px 24px 0; }
.forest .f-hero + .f-w { margin-top: -110px; padding-top: 0; }
.forest .f-eyebrow { margin: 0 0 14px; font-family: var(--serif); font-size: 12px; letter-spacing: .6em; color: var(--gold-deep); }
.forest .f-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(31px, 8.2vw, 50px); line-height: 1.34; letter-spacing: .1em; white-space: pre-line; text-wrap: balance; }
.forest .f-date { margin: 16px 0 0; display: flex; gap: 12px; align-items: center; color: var(--muted); letter-spacing: .12em; font-size: 15px; }
.forest .f-date::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--gold-deep); }
.forest .f-lead { margin: 40px 0 0; font-family: var(--serif); font-size: 18px; line-height: 2.05; color: var(--body); }
.forest .f-lead p { margin: 0 0 14px; }

/* 語桐想跟你說 */
.forest .f-bubble { margin: 34px 0 0; background: var(--paper); color: var(--body); border-radius: 22px 22px 22px 6px; padding: 16px 20px 18px; font-size: 16px; line-height: 1.85; }
.forest .f-bubble b { display: block; margin-bottom: 4px; font-family: var(--round); font-weight: 400; font-size: 15px; color: var(--forest-700); }

/* 段落標題 */
.forest .f-sec { margin: 76px 0 0; }
.forest .f-sec h2, .forest .f-h { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: .12em; color: var(--forest-700); }
.forest .f-sec > p, .forest .f-hint { margin: 6px 0 0; font-family: var(--round); font-size: 15px; color: var(--muted); }

/* 清單列（大字＋說明） */
.forest .f-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.forest .f-list li { position: relative; padding: 16px 0 16px 26px; border-bottom: 1px solid var(--rule); color: var(--body); }
.forest .f-list li::before { content: ""; position: absolute; left: 2px; top: calc(16px + .9em); width: 12px; height: 1px; background: var(--gold-deep); }
.forest .f-gl { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1; color: var(--moss); text-align: center; transition: color .5s, transform .5s var(--ease); }

/* 可點選的列 */
.forest .f-picks { margin-top: 22px; border-top: 1px solid var(--rule); }
.forest .f-wrapi { border-bottom: 1px solid var(--rule); }
.forest .f-pick { display: grid; grid-template-columns: 56px 1fr 28px; gap: 14px; align-items: center; width: 100%; padding: 20px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.forest .f-picks > .f-pick { border-bottom: 1px solid var(--rule); }
.forest .f-pick .f-gl { font-size: 40px; }
.forest .f-pick:hover .f-gl { transform: translateY(-2px); }
.forest .f-pick[aria-checked="true"] .f-gl, .forest .f-pick[aria-pressed="true"] .f-gl { color: var(--gold-deep); }
.forest .f-nm { position: relative; display: inline; font-family: var(--serif); font-size: 20px; letter-spacing: .08em; background: linear-gradient(var(--gold-deep), var(--gold-deep)) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); padding-bottom: 2px; }
.forest .f-pick:hover .f-nm, .forest .f-pick[aria-checked="true"] .f-nm, .forest .f-pick[aria-pressed="true"] .f-nm { background-size: 100% 1px; }
.forest .f-tag { margin-left: 10px; font-family: var(--round); font-size: 13px; letter-spacing: .08em; color: var(--gold-deep); white-space: nowrap; }
.forest .f-for { display: block; margin-top: 4px; font-size: 15px; line-height: 1.7; color: var(--muted); white-space: pre-line; }
.forest .f-price { display: block; margin-top: 4px; font-family: var(--serif); font-size: 16px; color: var(--forest-700); letter-spacing: .04em; }
.forest .f-ck { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); position: relative; transition: background-color .4s, border-color .4s; }
.forest .f-ck::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--linen); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.forest .f-pick[aria-checked="true"] .f-ck, .forest .f-pick[aria-pressed="true"] .f-ck { background: var(--forest-700); border-color: var(--forest-700); }
.forest .f-pick[aria-checked="true"] .f-ck::after, .forest .f-pick[aria-pressed="true"] .f-ck::after { transform: rotate(45deg) scale(1); }

/* 祈福項目的線條圖（js/forest.js 的 yc.icon）：選了會重新畫一次 */
.forest .f-ic { width: 46px; height: 46px; margin: 0 auto; display: block; color: var(--moss); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: color .5s, transform .5s var(--ease); }
.forest .f-pick:hover .f-ic { transform: translateY(-2px) rotate(-3deg); }
.forest .f-pick[aria-checked="true"] .f-ic { color: var(--gold-deep); }
.forest .f-pick[aria-checked="true"] .f-ic * { stroke-dasharray: 1; animation: f-draw 1.1s var(--ease) both; }
.forest .f-pick[aria-checked="true"] .f-ic *:nth-child(2) { animation-delay: .12s; }
.forest .f-pick[aria-checked="true"] .f-ic *:nth-child(3) { animation-delay: .24s; }
.forest .f-pick[aria-checked="true"] .f-ic *:nth-child(n+4) { animation-delay: .36s; }
@keyframes f-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* 首頁引導第一題：六格小卡片（線條圖＋短短幾個字），選了線條會重新畫一次 */
.forest .f-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
@media (min-width: 640px) { .forest .f-cards { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.forest .f-card { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 136px; padding: 20px 10px 16px; border: 1px solid var(--rule); border-radius: 20px; background: var(--cream); color: var(--forest-700); font: inherit; text-align: center; cursor: pointer; transition: border-color .35s, background-color .35s, transform .35s var(--ease), box-shadow .35s; }
.forest .f-card:hover { transform: translateY(-3px); border-color: var(--gold-deep); box-shadow: 0 14px 28px -20px rgba(29, 38, 24, .45); }
.forest .f-card .f-ic { width: 42px; height: 42px; }
.forest .f-card b { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: .08em; line-height: 1.4; }
.forest .f-card small { margin-top: -6px; font-family: var(--round); font-size: 12px; color: var(--gold-deep); }
.forest .f-card[aria-pressed="true"] { border-color: var(--forest-700); background: var(--paper); box-shadow: inset 0 0 0 1px var(--forest-700); }
.forest .f-card[aria-pressed="true"] .f-ic { color: var(--gold-deep); }
.forest .f-card[aria-pressed="true"] .f-ic * { stroke-dasharray: 1; animation: f-draw 1s var(--ease) both; }
.forest .f-card[aria-pressed="true"] .f-ic *:nth-child(2) { animation-delay: .1s; }
.forest .f-card[aria-pressed="true"] .f-ic *:nth-child(n+3) { animation-delay: .2s; }
.forest .f-card:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* 沒有左欄圖示的選項 */
.forest .f-pick--plain { grid-template-columns: 1fr 28px; }
.forest .f-pick:disabled { cursor: not-allowed; opacity: .5; }

/* 方案（選了項目才展開） */
.forest .f-tiers { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.forest .f-wrapi.on .f-tiers { grid-template-rows: 1fr; }
.forest .f-tiers > div { overflow: hidden; display: flex; gap: 12px; padding-left: 70px; }
.forest .f-wrapi.on .f-tiers > div { padding-bottom: 20px; }
.forest .f-tiers label { position: relative; flex: 1; min-width: 0; padding: 4px 0; color: var(--muted); font-size: 14px; cursor: pointer; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.forest .f-tiers input { position: absolute; opacity: 0; pointer-events: none; }
.forest .f-tiers b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--forest-700); }
.forest .f-tiers small { display: block; font-family: var(--round); font-size: 12px; color: var(--gold-deep); }
.forest .f-tiers label:has(input:checked) { color: var(--forest-700); border-bottom-color: var(--gold-deep); }
@media (max-width: 420px) { .forest .f-tiers > div { padding-left: 0; } }

/* 表單：底線輸入框 */
.forest .f-form { margin-top: 22px; }
.forest .f-field { display: grid; gap: 2px; margin-bottom: 18px; font-family: var(--round); font-size: 15px; color: var(--forest-700); }
.forest .f-field input, .forest .f-field select, .forest .f-field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  color: var(--forest-700); font-family: var(--sans); font-size: 17px; padding: 8px 2px; -webkit-appearance: none; appearance: none; transition: border-color .3s;
}
.forest .f-field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.forest .f-field textarea { resize: vertical; }
.forest .f-field ::placeholder { color: #a8a693; }
.forest .f-field input:focus, .forest .f-field select:focus, .forest .f-field textarea:focus { outline: none; border-bottom-color: var(--forest-700); }
.forest .f-row2 { display: grid; gap: 0 20px; }
@media (min-width: 560px) { .forest .f-row2 { grid-template-columns: 1fr 1fr; } }
.forest .f-small { margin: 4px 0 0; font-family: var(--round); font-size: 14px; line-height: 1.9; color: var(--muted); }

/* 按鈕 */
.forest .f-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--forest-700); color: var(--linen); font-family: var(--sans); font-size: 16px; letter-spacing: .14em; padding: 13px 24px; cursor: pointer; white-space: nowrap; transition: background-color .3s, transform .2s; }
.forest .f-btn:hover { background: var(--forest-500); }
.forest .f-btn:active { transform: scale(.97); }
.forest .f-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.forest .f-link { background: none; border: 0; padding: 8px 0; font-family: var(--round); font-size: 15px; color: var(--muted); cursor: pointer; }
.forest button:focus-visible, .forest input:focus-visible, .forest select:focus-visible, .forest textarea:focus-visible, .forest label:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* 底部結帳列：在區塊裡捲動時貼在畫面底部；右邊留位置給 LINE／IG 浮動按鈕 */
.forest .f-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 40px; background: rgba(247, 241, 230, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); }
.forest .f-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 600px; margin: 0 auto; padding: 12px 84px 12px 24px; }
@media (min-width: 900px) { .forest .f-bar-in { padding-right: 24px; } }
.forest .f-bar small { display: block; font-family: var(--round); font-size: 13px; color: var(--muted); }
.forest .f-bar strong { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: .04em; color: var(--forest-700); }
.forest .f-toast { min-height: 1.5em; margin: 10px 0 0; font-family: var(--round); font-size: 15px; color: var(--forest-700); }
.forest .f-bar .f-toast { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px); margin: 0 0 10px; padding: 8px 16px; border-radius: 999px; background: var(--forest-700); color: var(--linen); white-space: nowrap; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.forest .f-bar .f-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 捲動浮現（js/forest.js 加上 .rv-on 才啟用，程式沒跑時內容照常顯示） */
.forest.rv-on .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.forest.rv-on .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .forest *, .forest *::before, .forest *::after { animation: none !important; transition: none !important; }
  .forest.rv-on .rv { opacity: 1; transform: none; }
  .forest .f-hero img { transform: none; }
}