/* ============================================================
   /features 頁面樣式｜features/features.css（2026-10-04 分頁 v3）
   ------------------------------------------------------------
   概念：「一封喜帖的解剖圖」＋「可以親手玩的功能」。
   骨架（.pv-hero／.pv-ch／.pv-tag／.pv-phone／.pv-end／.pv-next）來自 shared/pages.css，
   這裡只放本頁專屬、一律 ft- 前綴。

   降級鐵則（DESIGN §9）：預設 CSS＝完成態。所有「先藏起來再演」只寫在 html.pv-motion 底下；
   RM／?fx=0 下物件、裝飾、照片都在同一位置，只拿掉「動」。使用者手勢（點、拖、刮）在 RM 照常能用。
   紀律：唯一強調色 --accent；陰影只用 --shadow-soft 或更淡版；深色用暖褐墨；可點 ≥44px；input ≥16px。
   ============================================================ */

.ft-main {
  --ft-warm: #2b251e;            /* 暖褐墨（深色底，不用純黑） */
  --ft-board: #ebe7dc;           /* 桌面紙板 */
  --ft-soft: color-mix(in srgb, var(--accent) 5%, var(--paper));
  --ft-shadow-lite: 0 18px 40px -24px rgba(34, 39, 31, .22);
}
.ft-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ════════════════ 頁首：解剖圖 ════════════════ */
.ft-hero .pv-hero-in { gap: clamp(1.6rem, 5vw, 2.4rem); }
.ft-hero-hint { margin-top: 1.1rem; font-size: var(--text-tiny); letter-spacing: .14em; color: var(--ink-soft); max-width: 24em; }
.ft-hint-d { display: none; }
@media (min-width: 1100px) { .ft-hint-d { display: inline; } .ft-hint-m { display: none; } }

.ft-anat { display: grid; justify-items: center; gap: .6rem; }
.ft-hp { --pw: 17rem; }
@media (min-width: 900px) { .ft-hp { --pw: 15rem; } }
@media (min-width: 1100px) { .ft-hp { --pw: 16.5rem; } }
/* 手機外框的內距已由 pages.css 用 --pw 明算；這裡只讓標註與引線能伸到框外 */
.ft-ph { overflow: visible; }

/* 螢幕裡的喜帖：全部 cqw 絕對定位（螢幕寬＝100cqw），引線座標由此推算 */
.ft-inv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(90% 55% at 50% 46%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    #faf6ee;
}
.ft-inv > * { position: absolute; left: 0; right: 0; margin: 0; display: block; }
.ft-flap { left: 0; top: 0; width: 100cqw; height: 50cqw; overflow: visible; }
.ft-flap-fill { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.ft-flap-line { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ft-sc-sprig {
  left: auto !important; right: -17cqw !important; top: 15cqw; width: 40cqw !important; height: auto;
  opacity: .5; mix-blend-mode: multiply; filter: saturate(.8); transform: rotate(16deg); pointer-events: none;
}
.ft-seal {
  left: 42.5cqw; right: auto; top: 36.5cqw; width: 15cqw; height: 15cqw; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--accent) 74%, #fff), var(--accent) 64%);
  color: var(--accent-ink);
}
.ft-seal b { font-size: 7.4cqw; font-weight: 700; line-height: 1; }
.ft-inv-eye { top: 56cqw; font-family: var(--font-serif-latin); font-style: italic; font-size: 5cqw; letter-spacing: .2em; color: var(--accent); }
.ft-inv-couple { top: 65cqw; font-size: 8cqw; font-weight: 600; letter-spacing: .14em; line-height: 1.3; }
.ft-inv-couple i { font-family: var(--font-serif-latin); font-weight: 400; color: var(--accent); }
.ft-inv-when { top: 80cqw; font-size: 4cqw; letter-spacing: .08em; }
.ft-inv-when i { font-family: var(--font-serif-latin); font-style: italic; font-size: 1.15em; letter-spacing: .04em; }
.ft-inv-rule { top: 93cqw; left: 43cqw; right: 43cqw; height: 1px; background: var(--accent); opacity: .5; }
.ft-greet { top: 98cqw; height: 38cqw; left: 6cqw; right: 6cqw; display: grid; align-content: center; justify-items: center; gap: 1cqw; }
.ft-dear { font-size: 5.4cqw; letter-spacing: .3em; text-indent: .3em; color: var(--ink-soft); line-height: 1.4; }
.ft-nm { font-size: 16.5cqw; font-weight: 700; letter-spacing: .06em; line-height: 1.25; color: var(--accent); white-space: nowrap; }
.ft-inv-say { top: 137cqw; font-size: 4.6cqw; letter-spacing: .12em; line-height: 1.8; color: var(--ink-soft); }
.ft-rsvp { top: 158cqw; left: 25cqw; right: 25cqw; height: 11cqw; line-height: 11cqw; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 4.4cqw; letter-spacing: .16em; }
.ft-chips { top: 176cqw; left: 50%; right: auto; width: max-content; transform: translateX(-50%); display: flex !important; gap: 3cqw; padding: 0 1.5cqw; height: 8cqw; border-radius: 999px; }
.ft-chips em { font-style: normal; height: 8cqw; line-height: 7.2cqw; padding: 0 3.2cqw; border-radius: 999px; font-size: 3.4cqw; letter-spacing: .06em; box-shadow: inset 0 0 0 1px var(--hairline); white-space: nowrap; }
.ft-music { top: 196cqw; left: auto; right: 6cqw; width: 26cqw; height: 12cqw; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: flex !important; align-items: center; justify-content: center; font-size: 5cqw; }

/* 小喇叭 eq（頁面共用）：寬高用 em，各處用 font-size 決定大小 */
.ft-eq { display: flex; align-items: flex-end; gap: .14em; height: 1em; width: 1.1em; }
.ft-eq b { flex: 1; border-radius: 2px; background: currentColor; height: 35%; }
.ft-eq b:nth-child(1) { height: 45%; }
.ft-eq b:nth-child(2) { height: 90%; }
.ft-eq b:nth-child(3) { height: 62%; }
.ft-eq b:nth-child(4) { height: 100%; }
html.pv-motion .ft-eq b { animation: ft-eq .9s ease-in-out infinite alternate; }
html.pv-motion .ft-eq b:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
html.pv-motion .ft-eq b:nth-child(3) { animation-delay: -.55s; animation-duration: 1.1s; }
html.pv-motion .ft-eq b:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }
@keyframes ft-eq { from { height: 25%; } to { height: 100%; } }

/* 零件的亮起 */
.ft-part { transition: box-shadow .4s var(--ease-out); }
.ft-part.is-hot { box-shadow: 0 0 0 1px var(--accent), 0 0 0 2.4cqw color-mix(in srgb, var(--accent) 13%, transparent); }
.ft-seal.is-hot { box-shadow: 0 0 0 1px var(--accent), 0 0 0 2.4cqw color-mix(in srgb, var(--accent) 16%, transparent); }

/* 標註：圓點在零件旁，引線拉到手機外 */
.ft-pin {
  position: absolute;
  z-index: 4;
  left: calc(var(--pw) * var(--x));
  top: calc(var(--pw) * var(--y));
  width: 0;
  height: 0;
  pointer-events: none;
}
.ft-dot {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--paper-raise);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
  font: 600 .9rem/1 var(--font-serif-latin);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.ft-pin.is-hot .ft-dot { background: var(--accent); color: var(--accent-ink); }
.ft-ln { display: none; position: absolute; top: 0; height: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); transition: background-color .35s var(--ease-out); }
.ft-pin.is-hot .ft-ln { background: var(--accent); }
.ft-labs { display: none; }

@media (min-width: 1100px) {
  .ft-ln { display: block; }
  .ft-pin-l .ft-ln { right: 0; width: calc(var(--pw) * var(--x) + 1.7rem); transform-origin: 100% 50%; }
  .ft-pin-r .ft-ln { left: 0; width: calc(var(--pw) * (1 - var(--x)) + 1.7rem); transform-origin: 0 50%; }
  .ft-labs { display: block; position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 4; }
  .ft-labs li { position: absolute; top: calc(var(--pw) * var(--y)); transform: translateY(-50%); }
  .ft-lab-l { right: calc(100% + 1.7rem); }
  .ft-lab-r { left: calc(100% + 1.7rem); }
  .ft-lab {
    pointer-events: auto;
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: .5rem;
    font-size: .875rem; letter-spacing: .14em; white-space: nowrap;
    color: var(--ink); text-decoration: none;
    transition: color .3s var(--ease-out);
  }
  .ft-lab:hover, .ft-lab.is-hot { color: var(--accent); }
  .ft-lab-l .ft-lab { justify-content: flex-end; }
}
/* 手機／窄桌機：標註收成手機下方的編號清單 */
.ft-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.1rem; max-width: 24rem; margin-top: .6rem; }
.ft-legend a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-size: .875rem; letter-spacing: .1em; color: var(--ink); text-decoration: none;
}
.ft-legend a i {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent);
  font: 600 .9rem/1 var(--font-serif-latin); transition: background-color .3s, color .3s;
}
.ft-legend a.is-hot i { background: var(--accent); color: var(--accent-ink); }
@media (min-width: 1100px) { .ft-legend { display: none; } }

/* 頁首引線一條一條畫出來（pv-motion 才演；RM／fx=0 直接是完成態） */
html.pv-motion .ft-hp .ft-ln { transform: scaleX(0); animation: ft-draw 1s var(--ease-out) forwards; animation-delay: calc(.95s + var(--i) * .14s); }
html.pv-motion .ft-hp .ft-dot { opacity: 0; animation: ft-pop .6s var(--ease-out) forwards; animation-delay: calc(.8s + var(--i) * .14s); }
html.pv-motion .ft-hp .ft-lab { opacity: 0; animation: ft-fade .7s var(--ease-out) forwards; animation-delay: calc(1.55s + var(--i) * .14s); }
@keyframes ft-draw { to { transform: scaleX(1); } }
@keyframes ft-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ft-fade { to { opacity: 1; } }

/* ════════════════ 三幕共用 ════════════════ */
.ft-act { isolation: isolate; padding-block: var(--section-y); }
.ft-act-you { background: var(--ft-soft); }
.ft-act-head { max-width: 40rem; }
.ft-bot { display: none; position: absolute; z-index: 0; top: 2.2rem; right: max(1rem, 3%); width: 7.5rem; --bot-o: .6; }
.ft-bot-1 { display: block; width: 4.4rem; top: 1rem; right: .8rem; }
@media (min-width: 900px) { .ft-bot { display: block; } .ft-bot-1 { width: 7.5rem; top: 2.2rem; right: max(1rem, 3%); } }
@media (min-width: 900px) { .ft-bot-2 { top: auto; bottom: 3rem; } .ft-bot-4 { top: auto; bottom: 2rem; } }

/* 一項功能＝ 文字（.ft-a 標題與說明、.ft-b 要點與連結）＋ 物件（.ft-obj） */
.ft-feat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  padding-block: clamp(2.6rem, 6vw, 4.6rem);
  border-top: 1px solid var(--hairline);
}
.ft-act-head + .ft-feat { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.ft-feat > * { min-width: 0; }
@media (min-width: 900px) {
  .ft-feat {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 0;
  }
  .ft-a { grid-column: 1; grid-row: 2; }
  .ft-b { grid-column: 1; grid-row: 3; margin-top: 1.5rem; }
  .ft-obj { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .ft-feat.is-flip { grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); }
  .ft-feat.is-flip .ft-obj { grid-column: 1; }
  .ft-feat.is-flip .ft-a, .ft-feat.is-flip .ft-b { grid-column: 2; }
  /* 標題橫跨在上、物件滿幅在下 */
  .ft-feat.is-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 2rem; }
  .ft-feat.is-top .ft-a { grid-column: 1; grid-row: 1; }
  .ft-feat.is-top .ft-b { grid-column: 2; grid-row: 1; margin-top: 0; align-self: end; }
  .ft-feat.is-top .ft-obj { grid-column: 1 / -1; grid-row: 2; }
  .ft-obj-wide { }
}
.ft-no { display: flex; align-items: center; gap: .9rem; }
.ft-no i { font: italic 500 clamp(2.6rem, 6vw, 3.6rem)/1 var(--font-serif-latin); color: var(--accent); letter-spacing: -.02em; }
.ft-h3 { margin-top: .5rem; font-size: clamp(1.4rem, 3.2vw, 1.9rem); font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-wrap: balance; }
.ft-p { margin-top: .8rem; color: var(--ink-soft); max-width: 34em; }
.ft-pts { display: grid; font-size: var(--text-small); color: var(--ink-soft); }
.ft-pts li { position: relative; padding: .6rem 0 .6rem 1.7rem; border-top: 1px solid var(--hairline); }
.ft-pts li:last-child { border-bottom: 1px solid var(--hairline); }
.ft-pts li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: .9rem; height: 1px; background: var(--accent); }
.ft-pts b { color: var(--ink); font-weight: 600; }
.ft-link {
  display: inline-block; margin-top: .5rem; padding-block: calc((44px - 1.5em) / 2); line-height: 1.5;
  font-size: var(--text-small); font-weight: 600; letter-spacing: .08em; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-out);
}
.ft-link:hover { border-bottom-color: currentColor; }
.ft-anchor { margin-top: 1rem; font-size: var(--text-small); color: var(--ink-soft); }
.ft-redo {
  min-height: 44px; padding: .4rem .9rem; font-size: .8125rem; letter-spacing: .14em; color: var(--accent);
  text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px;
}

/* ════════════════ 01 專屬稱呼：一疊扇形喜帖 ════════════════ */
.ft-fan-obj { display: grid; gap: .8rem; justify-items: center; }
.ft-fan { --fw: 9.4rem; --fs: 1.3rem; --rot: 4.5deg; position: relative; width: 100%; height: calc(var(--fw) * 1.42 + 2rem); }
@media (min-width: 640px) { .ft-fan { --rot: 7.5deg; --fw: 14.2rem; --fs: 4.3rem; height: calc(var(--fw) * 1.42 + 2.4rem); } }
.ft-dk {
  position: absolute; left: 50%; top: .9rem;
  width: var(--fw); margin-left: calc(var(--fw) / -2); aspect-ratio: 1 / 1.42;
  text-align: center; cursor: pointer;
  transform-origin: 50% 135%;
  transform: translateX(calc(var(--o) * var(--fs))) translateY(calc(var(--ao) * var(--ao) * .3rem)) rotate(calc(var(--o) * var(--rot, 7.5deg)));
  z-index: calc(10 - var(--ao));
  transition: transform .85s var(--ease-out);
}
.ft-dk:not(.is-top):hover {
  transform: translateX(calc(var(--o) * var(--fs))) translateY(calc(var(--ao) * var(--ao) * .3rem - .55rem)) rotate(calc(var(--o) * var(--rot, 7.5deg)));
}
.ft-dk-nav { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.ft-dk-b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--accent); box-shadow: inset 0 0 0 1px var(--hairline); transition: background-color .3s, color .3s; }
.ft-dk-b:hover { background: var(--accent); color: var(--accent-ink); }
.ft-dk-cur { min-width: 13.5em; text-align: center; font-size: .8125rem; letter-spacing: .08em; color: var(--ink-soft); }
.ft-dk-in {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  padding: 1.7rem 1rem; container-type: inline-size;
  border-radius: .9rem; background: #faf6ee; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--ft-shadow-lite);
}
.ft-dk-eye { font-family: var(--font-serif-latin); font-style: italic; font-size: 5.4cqw; letter-spacing: .2em; color: var(--accent); }
.ft-dk-couple { font-size: 8.4cqw; font-weight: 600; letter-spacing: .14em; }
.ft-dk-couple i { font-family: var(--font-serif-latin); font-weight: 400; color: var(--accent); }
.ft-dk-rule { width: 14cqw; height: 1px; margin: 3cqw 0 1cqw; background: var(--accent); opacity: .5; }
.ft-dk-dear { font-size: 5.6cqw; letter-spacing: .3em; text-indent: .3em; color: var(--ink-soft); }
.ft-dk-name { font-size: min(15cqw, calc(72cqw / var(--len, 4))); font-weight: 700; letter-spacing: .06em; line-height: 1.3; color: var(--accent); white-space: nowrap; }
.ft-dk-say { margin-top: 2cqw; font-size: 4.4cqw; letter-spacing: .1em; color: var(--ink-soft); }
.ft-dk.is-flip .ft-dk-in { animation: ft-flip .72s var(--ease-out); }
@keyframes ft-flip {
  0% { transform: perspective(900px) rotateY(0); }
  45% { transform: perspective(900px) rotateY(88deg); }
  55% { transform: perspective(900px) rotateY(-88deg); }
  100% { transform: perspective(900px) rotateY(0); }
}
.ft-nameform { width: 100%; max-width: 24rem; display: grid; gap: .55rem; justify-items: center; }
.ft-nl { font-size: var(--text-small); letter-spacing: .14em; color: var(--ink-soft); }
.ft-nrow { display: flex; gap: .6rem; width: 100%; }
.ft-ni {
  flex: 1; min-width: 0; min-height: 48px; padding: .5rem 1.1rem; font-size: 16px;
  border: 0; border-radius: 999px; background: var(--paper-raise); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow .3s var(--ease-out);
}
.ft-ni:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ft-ni::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
.ft-nb { min-height: 48px; padding-inline: 1.4rem; flex: none; }
.ft-ntry { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .2rem; font-size: .8125rem; color: var(--ink-soft); letter-spacing: .08em; }
.ft-ntry button { min-height: 44px; padding: 0 .75rem; color: var(--accent); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; letter-spacing: .1em; }

/* ════════════════ 02 AR 開場：三格膠片 ════════════════ */
.ft-film { position: relative; padding: 3rem clamp(.7rem, 3vw, 1.6rem); border-radius: var(--radius); background: var(--ft-warm); color: #efe9dc; overflow: hidden; }
.ft-film::before, .ft-film::after {
  content: ""; position: absolute; left: 0; right: 0; height: .55rem;
  background: repeating-linear-gradient(90deg, transparent 0 .5rem, rgba(239, 233, 220, .2) .5rem 1.05rem, transparent 1.05rem 1.6rem);
}
.ft-film::before { top: .5rem; }
.ft-film::after { bottom: .5rem; }
.ft-film-strip { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2.4vw, 1.4rem); }
.ft-fr {
  flex: 1 1 0; min-width: 0; max-width: 13rem; display: grid; gap: .55rem; padding: 0; text-align: center; color: inherit;
  transform: scale(.9); opacity: .55;
  transition: transform .75s var(--ease-out), opacity .5s var(--ease-out);
}
.ft-fr:hover { opacity: .85; }
.ft-fr.is-on { transform: scale(1.1); opacity: 1; }
.ft-fr-no { justify-self: start; font: italic 500 .8125rem/1 var(--font-serif-latin); letter-spacing: .14em; opacity: .75; }
.ft-fr img { width: 100%; height: auto; aspect-ratio: 780 / 1688; border-radius: .9rem; outline: 1px solid rgba(239, 233, 220, .18); transition: outline-color .4s; }
.ft-fr.is-on img { outline: 1.5px solid rgba(239, 233, 220, .75); outline-offset: 3px; }
.ft-fr-cap { font-size: .8125rem; letter-spacing: .2em; text-indent: .2em; }
.ft-film button:focus-visible { outline: 2px solid #efe9dc; outline-offset: 4px; }
.ft-ar-list { display: grid; margin-bottom: .4rem; }
.ft-ar-list li { border-top: 1px solid var(--hairline); }
.ft-ar-list li:last-child { border-bottom: 1px solid var(--hairline); }
.ft-ar-b { display: grid; gap: .15rem; width: 100%; min-height: 44px; padding: .7rem 0 .7rem 1.1rem; text-align: left; border-left: 2px solid transparent; font-size: var(--text-small); color: var(--ink-soft); transition: border-color .4s var(--ease-out), color .4s var(--ease-out), padding .4s var(--ease-out); }
.ft-ar-b b { font-weight: 600; letter-spacing: .1em; }
.ft-ar-b:hover { color: var(--ink); }
.ft-ar-b[aria-pressed="true"] { border-left-color: var(--accent); color: var(--ink); padding-left: 1.4rem; }
.ft-ar-b[aria-pressed="true"] b { color: var(--accent); }

/* ════════════════ 03 拆開與互動 ════════════════ */
.ft-board {
  position: relative; display: grid; gap: 1.2rem 1.6rem; padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hairline);
  background: radial-gradient(70% 90% at 15% 0%, rgba(255, 255, 255, .5), transparent 70%), var(--ft-board);
  overflow: hidden;
}
@media (min-width: 640px) { .ft-board { grid-template-columns: 1.55fr 1fr; align-items: end; } .ft-mu-wrap { grid-column: 1 / -1; } }
.ft-env-wrap { display: grid; justify-items: center; padding-top: 8.4rem; }
.ft-env { position: relative; width: 19.5rem; max-width: 100%; aspect-ratio: 17 / 11; }
.ft-env-back { position: absolute; inset: 0; border-radius: .45rem; background: #ddd5c1; box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-env-card {
  position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 5%; height: 93%;
  display: grid; align-content: start; justify-items: center; gap: .25rem; padding: 1.1rem .6rem .5rem; text-align: center;
  border-radius: .35rem; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform 1.1s var(--ease-out) .18s;
  transform: translateY(-14%) rotate(0deg) translateZ(0);
}
.ft-ec-dear { font-size: .8rem; letter-spacing: .3em; text-indent: .3em; color: var(--ink-soft); margin-top: .1rem; }
.ft-ec-name { font-size: 1.75rem; font-weight: 700; letter-spacing: .06em; line-height: 1.2; color: var(--accent); }
.ft-ec-eye { font: italic .78rem var(--font-serif-latin); letter-spacing: .2em; color: var(--accent); }
.ft-ec-couple { font-size: 1.15rem; font-weight: 600; letter-spacing: .14em; }
.ft-ec-couple i { font-family: var(--font-serif-latin); font-weight: 400; color: var(--accent); }
.ft-ec-rule { width: 2.4rem; height: 1px; margin: .3rem 0; background: var(--accent); opacity: .5; }
.ft-ec-say { font-size: .78rem; letter-spacing: .1em; color: var(--ink-soft); }
.ft-env-front { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, #f4eddc, #ebe2cd); clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); border-radius: .45rem; transition: clip-path .9s var(--ease-out) .1s; }
.ft-env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 4;
  background: linear-gradient(180deg, #e3d9c3, #efe7d4); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0; transform: perspective(900px) rotateX(0deg);
  transition: transform .85s var(--ease-out), z-index 0s .42s;
}
.ft-env-lines { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; transition: opacity .25s; }
.ft-env-lines path { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ft-env-wrap.is-open .ft-env-lines { opacity: 0; }
.ft-seal-btn {
  position: absolute; z-index: 5; left: 50%; top: 58%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--accent-ink); font-size: 1.5rem; font-weight: 700;
  transition: transform .6s var(--ease-out);
}
.ft-sl {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent) 66%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent-ink) 14%, transparent);
  transition: transform 1s var(--ease-out), opacity .8s var(--ease-out);
}
.ft-sl-l { clip-path: polygon(0 0, 54% 0, 46% 24%, 56% 48%, 45% 74%, 52% 100%, 0 100%); }
.ft-sl-r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 45% 74%, 56% 48%, 46% 24%); }
.ft-seal-btn:hover { transform: scale(1.06); }
.ft-env-wrap.is-open .ft-env-card { transform: translateY(-44%) rotate(-1.5deg) translateZ(0); }
.ft-env-wrap.is-open .ft-env-front { clip-path: polygon(0 36%, 50% 43%, 100% 36%, 100% 100%, 0 100%); }
.ft-env-wrap.is-open .ft-env-flap { transform: perspective(900px) rotateX(180deg); z-index: 1; }
.ft-env-wrap.is-open .ft-seal-btn { pointer-events: none; }
.ft-env-wrap.is-open .ft-sl-l { transform: translate(-1.15rem, 1.7rem) rotate(-28deg); }
.ft-env-wrap.is-open .ft-sl-r { transform: translate(1.15rem, 1.4rem) rotate(24deg); }
.ft-env-wrap.is-open .ft-sl { opacity: .6; }
html.pv-motion .ft-env-wrap:not(.is-open) .ft-seal-btn { animation: ft-nudge 2.8s ease-in-out infinite; }
@keyframes ft-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.ft-env-hint { margin-top: .5rem; min-height: 44px; display: grid; align-items: center; justify-items: center; font-size: .8125rem; letter-spacing: .2em; text-indent: .2em; color: var(--ink-soft); }
.ft-env-wrap .ft-h-open { display: none; }
.ft-env-wrap.is-open .ft-h-open { display: inline-flex; align-items: center; }
.ft-env-wrap.is-open .ft-h-closed { display: none; }

.ft-scr-wrap { display: grid; gap: .5rem; justify-items: center; }
.ft-scr-lab { font-size: .75rem; letter-spacing: .24em; text-indent: .24em; color: var(--ink-soft); }
.ft-scr { position: relative; width: 100%; max-width: 13rem; height: 8.2rem; border-radius: .9rem; overflow: hidden; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--hairline); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ft-scr-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem 1.6rem; text-align: center; font-size: 1.05rem; letter-spacing: .1em; line-height: 1.9; text-wrap: balance; }
.ft-scr-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; transition: opacity .6s var(--ease-out); }
.ft-scr.is-revealed .ft-scr-cv { opacity: 0; pointer-events: none; }
.ft-scr-hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8125rem; letter-spacing: .3em; text-indent: .3em; color: #5f5a4d; pointer-events: none; transition: opacity .4s; }
.ft-scr.is-scratching .ft-scr-hint, .ft-scr.is-revealed .ft-scr-hint, .ft-scr.no-cv .ft-scr-hint { opacity: 0; }
.ft-scr-acts { display: flex; gap: .4rem; min-height: 44px; align-items: center; }
.ft-mu-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; justify-content: center; padding-top: .8rem; border-top: 1px solid var(--hairline); }
.ft-mu { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 1rem; }
.ft-mu .ft-eq { font-size: 14px; }
.ft-mu-t { font-family: var(--font-serif-latin); font-style: italic; font-size: 1.05rem; letter-spacing: .06em; }

/* ════════════════ 瀏覽器窗（04–08 共用） ════════════════ */
.ft-win { background: var(--paper-raise); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-soft); overflow: hidden; font-size: .8125rem; line-height: 1.5; }
.ft-win-bar { display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .4rem 0 .9rem; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--paper) 72%, var(--paper-raise)); }
.ft-win-bar > i { flex: none; width: .6rem; height: .6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-win-bar > span:not(.ft-pres) { margin-left: .6rem; font-size: .75rem; letter-spacing: .22em; color: var(--ink-soft); }
.ft-replay { margin-left: auto; flex: none; min-width: 44px; min-height: 44px; padding: 0 .8rem; font-size: .75rem; letter-spacing: .2em; color: var(--accent); }
.ft-replay::before { content: "↺"; margin-right: .35em; font-size: 1.05em; }
html:not(.pv-motion) .ft-replay { display: none; }
.ft-live { display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--accent); vertical-align: .08em; }
html.pv-motion .ft-live { animation: ft-live 1.8s ease-in-out infinite; }
@keyframes ft-live { 50% { opacity: .3; } }
.ft-st { display: inline-flex; align-items: center; gap: .4em; padding: .12rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: .75rem; letter-spacing: .1em; white-space: nowrap; }
.ft-st.is-no { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); }
.ft-st.is-wait { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); }

/* 04 出席統計 */
.ft-dash-body { display: grid; gap: 1.3rem; padding: 1.1rem; }
@media (min-width: 760px) { .ft-dash-body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; padding: 1.5rem; } }
.ft-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 760px) { .ft-stats { grid-template-columns: repeat(4, 1fr); gap: .4rem; } }
.ft-stats > div { display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: .7rem; box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-cnt { font: italic 500 2.5rem/1 var(--font-serif-latin); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.ft-stats span { font-size: .75rem; letter-spacing: .12em; color: var(--ink-soft); }
.ft-bars { display: grid; gap: .8rem; margin-top: 1rem; }
.ft-bar-r { display: grid; grid-template-columns: 4.6rem 1fr 2.6rem; align-items: center; gap: .6rem; font-size: .75rem; color: var(--ink-soft); }
.ft-bar-r em { font-style: normal; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.ft-bar { display: block; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.ft-bar b { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: left; transform: scaleX(var(--w)); transition: transform 1.3s var(--ease-out) .5s; }
.ft-dash-export { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.ft-dash-export span { padding: .25rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hairline); font-size: .75rem; letter-spacing: .1em; color: var(--ink-soft); }
.ft-dash-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .5rem; border-bottom: 1px solid var(--hairline); font-size: .75rem; letter-spacing: .2em; color: var(--ink-soft); }
.ft-dash-h em { font-style: normal; letter-spacing: .1em; color: var(--accent); }
.ft-rps { display: grid; }
.ft-rp { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "av n st" "av m st"; column-gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--hairline); }
.ft-rp:last-child { border-bottom: 0; }
.ft-av { grid-area: av; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); font-size: .8rem; font-weight: 600; }
.ft-rp-n { grid-area: n; font-weight: 600; letter-spacing: .06em; }
.ft-rp-m { grid-area: m; font-size: .75rem; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-rp .ft-st { grid-area: st; }
/* 進視窗：回覆卡片一筆一筆飛進清單、長條長出來（只在 pv-motion；is-run 由 JS 在進視窗時掛） */
html.pv-motion .ft-dash:not(.is-run) .ft-bar b { transform: scaleX(0); }
html.pv-motion .ft-dash:not(.is-run) .ft-rp { opacity: 0; }
html.pv-motion .ft-dash.is-run .ft-rp { animation: ft-fly .85s var(--ease-out) both; animation-delay: calc(var(--i) * .5s + .35s); }
@keyframes ft-fly { from { opacity: 0; transform: translate(70px, -28px) rotate(2.5deg); } to { opacity: 1; transform: none; } }

/* 05 賓客名單 */
.ft-gtool { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--hairline); font-size: .75rem; color: var(--ink-soft); letter-spacing: .06em; }
.ft-gtool em { font-style: normal; padding: .15rem .8rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); letter-spacing: .1em; }
.ft-gt { width: 100%; border-collapse: collapse; table-layout: auto; }
.ft-gt th, .ft-gt td { padding: .6rem .45rem; text-align: left; vertical-align: middle; }
.ft-gt th:first-child, .ft-gt td:first-child { padding-left: 1rem; }
.ft-gt th:last-child, .ft-gt td:last-child { padding-right: 1rem; }
.ft-gt thead th { font-size: .75rem; font-weight: 400; letter-spacing: .2em; color: var(--ink-soft); border-bottom: 1px solid var(--hairline); }
.ft-gt tbody tr { border-bottom: 1px solid var(--hairline); transition: background-color .3s var(--ease-out); }
.ft-gt tbody tr:last-child { border-bottom: 0; }
.ft-gt tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ft-gt tbody th { font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.ft-gt code { font: .75rem/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink-soft); white-space: nowrap; }
.ft-qr { width: 2rem; height: 2rem; fill: var(--ink); }
html.pv-motion .ft-guests:not(.is-run) tbody tr { opacity: 0; transform: translateY(12px); }
html.pv-motion .ft-guests.is-run tbody tr { animation: ft-rowin .7s var(--ease-out) both; animation-delay: calc(var(--i) * .12s + .25s); }
@keyframes ft-rowin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .ft-gt th, .ft-gt td { padding: .5rem .25rem; }
  .ft-gt th:first-child, .ft-gt td:first-child { padding-left: .7rem; }
  .ft-gt th:last-child, .ft-gt td:last-child { padding-right: .7rem; }
  .ft-gt code { font-size: .75rem; }
  .ft-qr { width: 1.8rem; height: 1.8rem; }
  .ft-gt .ft-st { padding-inline: .45rem; font-size: .75rem; }
}

/* 06 桌次分配 */
.ft-seat-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .5rem .6rem .5rem 1rem; border-bottom: 1px solid var(--hairline); }
.ft-seat-count { font-size: .8125rem; letter-spacing: .06em; color: var(--ink-soft); }
.ft-seat-count em { font: italic 500 1.5rem/1 var(--font-serif-latin); color: var(--accent); margin: 0 .15em; font-variant-numeric: lining-nums tabular-nums; }
.ft-seat-btn { min-height: 44px; padding: 0 1.3rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .8125rem; letter-spacing: .14em; transition: opacity .3s; }
.ft-seat-btn:hover { opacity: .9; }
.ft-seat-btn:active { transform: scale(.97); }
.ft-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: .9rem; }
@media (min-width: 760px) { .ft-tables { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ft-tb { display: grid; align-content: start; gap: .25rem; padding: .7rem .6rem .5rem; border-radius: .8rem; box-shadow: inset 0 0 0 1px var(--hairline); background: var(--paper); min-width: 0; }
.ft-tb-h { display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
.ft-tb-h b { font-size: .8125rem; letter-spacing: .08em; }
.ft-tb-h span { font-size: .75rem; letter-spacing: .12em; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 999px; padding: 0 .45rem; white-space: nowrap; }
.ft-tb-c { font-size: .75rem; color: var(--ink-soft); }
.ft-tb-c em { font: italic 500 1.5rem/1 var(--font-serif-latin); color: var(--accent); margin-right: .15em; font-variant-numeric: lining-nums tabular-nums; }
.ft-tb-bar { display: block; height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.ft-tb-bar b { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--w, 0)); transition: transform .9s var(--ease-out); }
.ft-tb-seats { display: flex; flex-direction: column; min-height: calc(3 * 44px); }
.ft-tb-m { min-height: 1.3em; font-size: .75rem; letter-spacing: .06em; color: var(--ink-soft); }
.ft-cap { display: flex; align-items: center; min-height: 44px; padding: 0; text-align: left; flex: none; will-change: transform; }
.ft-cap span { display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--paper-raise)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); font-size: .75rem; letter-spacing: .04em; white-space: nowrap; transition: background-color .3s var(--ease-out); }
.ft-cap em { font: italic 500 .9rem/1 var(--font-serif-latin); color: var(--accent); }
.ft-cap:hover span { background: color-mix(in srgb, var(--accent) 18%, var(--paper-raise)); }
.ft-pool-wrap { padding: .6rem .9rem 1rem; border-top: 1px dashed var(--hairline); }
.ft-pool-h { font-size: .75rem; letter-spacing: .24em; color: var(--ink-soft); margin-bottom: .35rem; }
.ft-pool { display: flex; flex-wrap: wrap; gap: 0 .6rem; min-height: 44px; align-content: flex-start; }
.ft-cap.is-flying { z-index: 5; position: relative; }

/* 07 LINE 聊天機器人 */
.ft-line-obj { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.6rem 2rem; }
.ft-lph { --pw: 17.5rem; }
.ft-line { background: #7b96ab; font-size: 3.6cqw; display: flex; flex-direction: column; }   /* LINE 聊天室底：螢幕內容，不受單一主色紀律管 */
.ft-line-head { flex: none; display: flex; align-items: center; gap: 2cqw; padding: 13.5cqw 3.4cqw 2.6cqw; background: #f6f5f1; border-bottom: 1px solid var(--hairline); font-size: 3.7cqw; letter-spacing: .04em; }
.ft-lh-back { font-size: 6cqw; line-height: 1; color: var(--ink-soft); }
.ft-line-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4cqw; padding: 3cqw; }
.ft-line-msgs > * { flex: none; }
.ft-m-day { align-self: center; margin-bottom: 1cqw; }
.ft-m-day span { padding: .8cqw 3cqw; border-radius: 999px; background: rgba(255, 255, 255, .28); color: #fff; font-size: 2.8cqw; letter-spacing: .12em; }
.ft-m-card { width: 72cqw; border-radius: 3cqw; overflow: hidden; background: var(--paper-raise); }
.ft-m-card img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.ft-mc-body { display: grid; gap: .4cqw; padding: 2.4cqw 3cqw 3cqw; }
.ft-mc-body em { font: italic 3cqw var(--font-serif-latin); letter-spacing: .2em; color: var(--accent); }
.ft-mc-body b { font-size: 3.8cqw; letter-spacing: .08em; }
.ft-mc-body span { font-size: 3cqw; color: var(--ink-soft); }
.ft-mc-btn { margin-top: 1.4cqw; padding: 1.4cqw; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-style: normal; font-size: 3.2cqw; letter-spacing: .12em; text-align: center; }
.ft-m-chips { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.ft-m-chips span { padding: 1.2cqw 3cqw; border-radius: 999px; background: var(--paper-raise); font-size: 3cqw; }
.ft-m-me { align-self: flex-end; padding: 1.8cqw 3.4cqw; border-radius: 3cqw; background: #b3e07a; color: #1d2a12; font-size: 3.4cqw; }   /* LINE 自己的訊息泡泡色：螢幕內容 */
.ft-m-seat { display: grid; gap: .6cqw; width: 62cqw; padding: 3cqw 3.4cqw; border-radius: 3cqw; background: var(--paper-raise); font-size: 3cqw; }
.ft-m-seat em { font: italic 3cqw var(--font-serif-latin); letter-spacing: .18em; color: var(--accent); }
.ft-m-seat b { font-size: 6cqw; letter-spacing: .08em; color: var(--accent); line-height: 1.3; }
.ft-m-seat dl { display: grid; grid-template-columns: 8.5cqw 1fr; gap: .4cqw 1.6cqw; margin-top: 1cqw; color: var(--ink-soft); }
.ft-m-typing { align-self: flex-start; display: flex; gap: 1.2cqw; padding: 2.6cqw 3.4cqw; border-radius: 3cqw; background: var(--paper-raise); }
.ft-m-typing i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--ink-soft); opacity: .45; }
html.pv-motion .ft-m-typing i { animation: ft-dot 1s ease-in-out infinite; }
html.pv-motion .ft-m-typing i:nth-child(2) { animation-delay: .15s; }
html.pv-motion .ft-m-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ft-dot { 40% { opacity: 1; transform: translateY(-.8cqw); } }
.ft-m-in { animation: ft-msg .5s var(--ease-out) both; }
@keyframes ft-msg { from { opacity: 0; transform: translateY(2.4cqw); } to { opacity: 1; transform: none; } }
.ft-line-in { flex: none; display: flex; align-items: center; gap: 1.4cqw; padding: 1.8cqw 2cqw; background: #f6f5f1; border-top: 1px solid var(--hairline); }
.ft-line-in input { flex: 1; min-width: 0; min-height: 44px; padding: 0 3.6cqw; font-size: 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-line-in input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ft-line-in button { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.ft-line-side { display: grid; gap: 1.2rem; width: 100%; max-width: 17.5rem; }
.ft-plan { padding: .9rem; border-radius: var(--radius); background: var(--paper-raise); box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-plan-t { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .6rem; font-size: .75rem; letter-spacing: .14em; color: var(--ink-soft); }
.ft-plan-t em { font-style: normal; color: var(--accent); font-weight: 600; letter-spacing: .06em; }
.ft-plan-room { display: grid; gap: .55rem; justify-items: center; padding: .7rem; border-radius: .6rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-plan-stage { width: 70%; padding: .15rem 0; text-align: center; font-size: .75rem; letter-spacing: .3em; text-indent: .3em; border-radius: .3rem; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ft-plan-main { padding: .2rem 1.8rem; border-radius: 999px; font-size: .75rem; letter-spacing: .2em; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.ft-plan-tb { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .55rem; }
.ft-plan-tb i { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font: italic 500 .95rem/1 var(--font-serif-latin); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); transition: background-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .5s; }
.ft-plan-tb i.is-on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
html.pv-motion .ft-plan-tb i.is-on.is-pop { animation: ft-ping 1s var(--ease-out); }
@keyframes ft-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 .9rem transparent; } }
.ft-plan-door { font-size: .75rem; letter-spacing: .3em; text-indent: .3em; color: var(--ink-soft); }
.ft-menu { display: grid; gap: .4rem; margin: 0; }
.ft-menu img { width: 100%; height: auto; border-radius: .7rem; box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-menu figcaption { font-size: .75rem; letter-spacing: .14em; color: var(--ink-soft); text-align: center; }
.ft-lcta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.ft-lqr { display: none; width: 6rem; height: 6rem; border-radius: calc(var(--radius) * .4); box-shadow: inset 0 0 0 1px var(--hairline); }
@media (min-width: 900px) { .ft-lqr { display: block; } }
.ft-lcta-b { display: grid; gap: .5rem; flex: 1 1 14rem; justify-items: start; }
.ft-lhint { font-size: var(--text-tiny); color: var(--ink-soft); }
.ft-ldesk { display: none; font-weight: 400; }
@media (min-width: 900px) { .ft-ldesk { display: inline; } }

/* 08 共同編輯 */
.ft-pres { margin-left: auto; display: flex; align-items: center; gap: .35rem; font-size: .75rem; letter-spacing: .12em; color: var(--ink-soft); }
.ft-pres b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .75rem; font-weight: 600; }
.ft-pres b.is-me, .ft-feed b.is-me { background: var(--accent); color: var(--accent-ink); }
.ft-pres b.is-ptn, .ft-feed b.is-ptn { background: var(--ink); color: var(--paper); }
.ft-pres em { font-style: normal; margin-left: .3rem; }
.ft-co .ft-replay { margin-left: .2rem; }
.ft-co-body { position: relative; display: grid; gap: 1.2rem; padding: 1.1rem; }
@media (min-width: 560px) { .ft-co-body { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 1.8rem; padding: 1.4rem; } }
.ft-co-lab { margin-bottom: .45rem; font-size: .75rem; letter-spacing: .24em; color: var(--ink-soft); }
.ft-co-thumbs { display: flex; gap: .7rem; margin-bottom: 1.2rem; }
.ft-th { position: relative; width: 3.7rem; aspect-ratio: 3 / 4; opacity: .55; transition: opacity .5s var(--ease-out) 1s; }
.ft-th img { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }
.ft-th::before { content: ""; position: absolute; inset: -4px; border-radius: .75rem; box-shadow: 0 0 0 2px var(--accent); opacity: 0; transition: opacity .4s var(--ease-out) 1s; }
.ft-co[data-step="0"] .ft-th-a, .ft-co:not([data-step="0"]) .ft-th-b { opacity: 1; }
.ft-co[data-step="0"] .ft-th-a::before, .ft-co:not([data-step="0"]) .ft-th-b::before { opacity: 1; }
.ft-flow { display: grid; gap: .4rem; }
.ft-flow li { position: relative; padding: .45rem .7rem; border-radius: .45rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); letter-spacing: .04em; white-space: nowrap; }
.ft-flow-new { color: var(--accent); }
.ft-flow-new > span { display: inline-block; vertical-align: bottom; overflow: hidden; max-width: 14em; white-space: nowrap; transition: max-width 1.1s steps(9, end) 1.2s; }
.ft-co:not([data-step="2"]) .ft-flow-new > span { max-width: 0; transition: none; }
.ft-co:not([data-step="2"]) .ft-flow-new { box-shadow: inset 0 0 0 1px var(--accent); }
.ft-co-prev { display: grid; place-items: center; }
.ft-co-card { width: 100%; max-width: 12.5rem; display: grid; gap: .6rem; padding: .7rem .7rem 1rem; border-radius: .8rem; background: #faf6ee; box-shadow: inset 0 0 0 1px var(--hairline), var(--ft-shadow-lite); text-align: center; }
.ft-cc-ph { position: relative; display: block; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: .5rem; }
.ft-cc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease-out) 1.1s; }
.ft-co[data-step="0"] .ft-cc-b { opacity: 0; }
.ft-cc-names { font-size: 1rem; font-weight: 600; letter-spacing: .14em; }
.ft-cc-names i { font-family: var(--font-serif-latin); font-weight: 400; color: var(--accent); }
.ft-cc-flow { display: grid; gap: .1rem; font-size: .75rem; color: var(--ink-soft); letter-spacing: .04em; }
.ft-cc-flow em { font-style: normal; }
.ft-cc-new { color: var(--accent); transition: opacity .6s var(--ease-out) 2.3s; }
.ft-co:not([data-step="2"]) .ft-cc-new { opacity: 0; }
.ft-cur-anchor { display: inline-block; position: relative; width: 0; height: 1em; vertical-align: bottom; }
.ft-cur { position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none; display: flex; align-items: flex-start; transition: transform 1.1s var(--ease-out); }
.ft-cur svg { flex: none; width: 16px; height: 20px; fill: var(--cc); stroke: var(--paper-raise); stroke-width: 1.2; stroke-linejoin: round; }
.ft-cur b { margin: 12px 0 0 -2px; padding: .05rem .5rem; border-radius: 0 .5rem .5rem .5rem; background: var(--cc); color: var(--paper); font-size: .75rem; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
.ft-cur-a { --cc: var(--accent); left: 52%; top: 48%; }
.ft-cur-b { --cc: var(--ink); left: 2px; top: .55rem; }
.ft-co[data-step="0"] .ft-cur-a { transform: translate(3.4rem, 3.9rem); }
.ft-co[data-step="0"] .ft-cur-b { transform: translate(6rem, 3.2rem); }
.ft-co[data-step="1"] .ft-cur-b { transform: translate(3.6rem, 1.8rem); }
.ft-feed { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: .75rem 1.1rem; border-top: 1px solid var(--hairline); font-size: .75rem; color: var(--ink-soft); letter-spacing: .04em; }
.ft-feed li { display: inline-flex; align-items: center; gap: .5rem; transition: opacity .6s var(--ease-out) 1.2s; }
.ft-feed-b { transition-delay: 2.4s !important; }
.ft-co.is-reset *, .ft-co.is-reset *::before { transition: none !important; }
.ft-feed b { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.ft-co[data-step="0"] .ft-feed-a, .ft-co[data-step="0"] .ft-feed-b, .ft-co[data-step="1"] .ft-feed-b { opacity: .0; }

/* ════════════════ CTA 帶 ════════════════ */
.ft-band { max-width: var(--wide-max); margin-inline: auto; padding: clamp(1.7rem, 4vw, 2.4rem) var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.1rem 2rem; border-block: 1px solid var(--hairline); }
.ft-band-l { font-size: clamp(1.1rem, 2.6vw, 1.45rem); letter-spacing: .08em; line-height: 1.6; }
.ft-band-l em { display: block; font-style: normal; color: var(--accent); }
.ft-band-a { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ════════════════ 還有這些 ════════════════ */
.ft-more { isolation: isolate; padding-block: var(--section-y); }
.ft-list { display: grid; margin-top: 2rem; border-top: 1px solid var(--hairline); }
@media (min-width: 900px) { .ft-list { grid-template-columns: 1fr 1fr; column-gap: 4.5rem; } .ft-li:nth-child(even) { margin-top: 2.4rem; } .ft-list { padding-bottom: 2.4rem; } }
.ft-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 900px) { .ft-li { border-top: 0; } .ft-list { border-top: 0; } .ft-li:nth-child(odd), .ft-li:nth-child(even) { border-top: 1px solid var(--hairline); } }
.ft-li-no { min-width: 3rem; font: italic 500 2.4rem/1 var(--font-serif-latin); color: var(--accent); }
.ft-li h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: .08em; line-height: 1.5; }
.ft-li p { margin-top: .25rem; font-size: var(--text-small); color: var(--ink-soft); }
.ft-li p a { display: block; width: fit-content; padding-block: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--accent); text-decoration: none; }
.ft-ico { flex: none; width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease-out); }
.ft-li:hover .ft-ico { transform: translateY(-3px) rotate(-5deg); }
@media (max-width: 420px) { .ft-li { grid-template-columns: auto minmax(0, 1fr); } .ft-ico { display: none; } }

/* ════════════════ 三步驟 ════════════════ */
.ft-stepsec { isolation: isolate; padding-block: var(--section-y); }
.ft-steps { position: relative; display: grid; gap: 2.4rem; margin-top: 2rem; }
.ft-steps::before { content: ""; position: absolute; left: 1.2rem; top: 1.2rem; bottom: 1.2rem; width: 1px; background: var(--hairline); transform-origin: top; transition: transform 1.4s var(--ease-out); }
.ft-step { position: relative; display: grid; gap: .8rem; align-content: start; padding-left: 3.6rem; }
.ft-step > .ft-sv { margin-left: 0; }
.ft-step-no { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font: italic 500 1.4rem/1 var(--font-serif-latin); }
.ft-step h3 { font-size: var(--text-h3); font-weight: 600; letter-spacing: .1em; }
.ft-step p { color: var(--ink-soft); font-size: var(--text-small); }
@media (min-width: 900px) {
  .ft-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem; padding-top: 3.8rem; }
  .ft-steps::before { left: 0; right: 0; top: 1.2rem; bottom: auto; width: auto; height: 1px; transform-origin: left; }
  .ft-step { padding-left: 0; }
  .ft-step-no { top: -3.8rem; }
}
html.pv-motion .ft-steps:not(.is-run)::before { transform: scaleY(0); }
@media (min-width: 900px) { html.pv-motion .ft-steps:not(.is-run)::before { transform: scaleX(0); } }
.ft-sv { display: grid; align-content: center; justify-items: center; gap: .9rem; min-height: 17.5rem; padding: 1.2rem; border-radius: var(--radius); background: var(--paper-raise); box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-sv-card { position: relative; width: 8.6rem; aspect-ratio: 3 / 4; border-radius: .7rem; overflow: hidden; outline: 2px solid var(--c, var(--accent)); outline-offset: 3px; transition: outline-color .4s var(--ease-out); }
.ft-sv-card img { width: 100%; height: 100%; object-fit: cover; }
.ft-sv-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .1rem; padding: 1.4rem .5rem .6rem; text-align: center; color: #fff; background: var(--scrim); }
.ft-sv-eye { font-size: .75rem; letter-spacing: .2em; text-indent: .2em; }
.ft-sv-names { font-size: .95rem; font-weight: 600; letter-spacing: .1em; }
.ft-sv-names i { font-family: var(--font-serif-latin); font-weight: 400; }
.ft-sv-url { display: flex; flex-wrap: wrap; justify-content: center; padding: .75rem 1.1rem; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); font-size: .875rem; color: var(--ink-soft); letter-spacing: .02em; max-width: 100%; }
.ft-sv-url em { font-style: normal; font-weight: 600; color: var(--accent); min-width: 8.6em; }
.ft-sv-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1.1rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .78rem; letter-spacing: .12em; }
.ft-sv-badge::before { content: ""; width: .35rem; height: .6rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.ft-sv-bubble { position: relative; padding: .8rem 1.1rem; border-radius: 1rem 1rem 1rem .25rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); font-size: .9rem; letter-spacing: .04em; }
.ft-sv-bubble em { display: block; margin-top: .15rem; font-style: normal; font-size: .75rem; color: var(--ink-soft); }
.ft-sv-stat { display: flex; align-items: baseline; gap: .5rem; font-size: .8125rem; color: var(--ink-soft); letter-spacing: .1em; }
.ft-sv-stat b { font: italic 500 3.6rem/1 var(--font-serif-latin); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }

/* ════════════════ 收尾 ════════════════ */
.ft-end .pv-wrap { max-width: 56rem; }
.ft-end .ft-br { display: none; }
@media (min-width: 900px) { .ft-end .ft-br { display: inline; } }
.ft-end h2 { margin-top: 1rem; font-size: var(--text-body); font-weight: 400; letter-spacing: .1em; opacity: .9; }
.ft-end-note { margin-top: 1.6rem !important; font-size: var(--text-small); line-height: 1.8; }
.ft-end-note .pg-more { margin-left: .4em; color: var(--accent-ink); border-bottom-color: color-mix(in srgb, var(--accent-ink) 55%, transparent); }
.ft-end .btn:focus-visible, .ft-end a:focus-visible { outline-color: var(--accent-ink); }

/* 窄螢幕保險：任何東西都不准撐出水平捲動 */
.ft-main { overflow-x: clip; }
@media (max-width: 420px) {
  .ft-fan { --fs: 2.3rem; }
  .ft-film-strip { gap: .4rem; }
}

/* ════════════════ 窄螢幕補強 ════════════════ */
@media (max-width: 559px) {
  .ft-win-bar > span:not(.ft-pres) { white-space: nowrap; }
  .ft-pres em { display: none; }
}

/* ════════════════ 第二輪（2026-10-04）：收斂 ════════════════ */
.ft-main .pv-tag { font-size: .8125rem; }

/* 圖例：基本款是什麼、免費版是什麼（連到定價） */
.ft-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .9rem; min-height: 44px; margin-top: 1.1rem; color: var(--ink-soft); text-decoration: none; font-size: .8125rem; letter-spacing: .08em; }
.ft-key em { font-style: normal; color: var(--ink); }
.ft-key:hover em { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.ft-hero-hint { margin-top: .4rem; }

/* 01：900–1279 比照單欄（兩欄會讓扇形壓到文字欄），扇形整個在欄內 */
@media (min-width: 900px) and (max-width: 1279px) {
  #ft-f01 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 1.6rem; }
  #ft-f01 .ft-a, #ft-f01 .ft-b, #ft-f01 .ft-obj { grid-column: 1; grid-row: auto; margin-top: 0; }
  #ft-f01 .ft-obj { order: 2; }
  #ft-f01 .ft-b { order: 3; }
}
@media (min-width: 1280px) { .ft-fan { --fs: 4rem; } }

/* 03 */
.ft-board { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ft-board { grid-template-columns: 1.55fr 1fr; } }

/* 04：左欄收掉空白 */
.ft-dash-l { display: grid; align-content: space-between; gap: 1rem; }
.ft-dash-l .ft-bars { margin-top: 0; }
.ft-dash-l .ft-dash-export { margin-top: 0; }

/* 06：固定高度（按重排前後頁面零位移）；待分配做成虛線落點區 */
.ft-tb-seats { min-height: calc(2 * 44px); }
.ft-pool { padding: .3rem .6rem; border: 1px dashed color-mix(in srgb, var(--ink) 24%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--accent) 3%, transparent); }
.ft-pool-wrap { border-top: 0; padding-top: .4rem; }
.ft-cap:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 07 */
.ft-line-ph { display: grid; gap: .4rem; justify-items: center; }
.ft-line-hint { font-size: .8125rem; letter-spacing: .14em; color: var(--ink-soft); }
.ft-m-seat { position: relative; }
.ft-m-demo { position: absolute; top: 2.4cqw; right: 3cqw; padding: .4cqw 2cqw; border-radius: 999px; font-style: normal; font-size: 2.8cqw; letter-spacing: .1em; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); }
@media (max-width: 899px) { .ft-line-side { display: none; } }

/* 09：一張連到 /styles/ 的卡 */
.ft-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .8rem; padding: clamp(1rem, 3vw, 1.6rem); border-radius: var(--radius); background: var(--paper-raise); box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-soft); }
@media (min-width: 760px) { .ft-styles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } }
.ft-sty { display: grid; gap: .55rem; align-content: start; text-decoration: none; color: var(--ink); min-height: 44px; }
.ft-sty img { width: 100%; height: auto; aspect-ratio: 390 / 520; border-radius: .6rem; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform .6s var(--ease-out); }
.ft-sty span { font-size: .8125rem; letter-spacing: .08em; text-align: center; line-height: 1.4; }
.ft-sty span i { display: block; font: italic 500 .8125rem/1.2 var(--font-serif-latin); color: var(--accent); }
.ft-sty:hover img, .ft-sty:focus-visible img { transform: translateY(-.35rem); }
.ft-feat.is-card .ft-b { align-self: end; }

/* 還有這些：5 項、每項標歸屬 */
.ft-li-tag { margin-bottom: .15rem; }
@media (max-width: 899px) { .ft-li-x { display: none; } }

/* 三步驟：三張靜態小卡 */
.ft-sv { min-height: 15rem; }
.ft-sv-card { width: 7.4rem; }

/* 手機：收斂（段落更緊、只留一條 CTA 帶、表格只留 3 列） */
@media (max-width: 899px) {
  .ft-band-1 { display: none; }
  .ft-feat { padding-block: 2.1rem; gap: 1.1rem; }
  .ft-no i { font-size: 2.4rem; }
  .ft-act { padding-block: 2.6rem; }
  .ft-more, .ft-stepsec { padding-block: 2.6rem; }
  .ft-li { padding-block: 1.1rem; }
}
@media (max-width: 759px) {
  .ft-gt tbody tr:nth-child(n+4) { display: none; }
  .ft-sv { min-height: 11rem; padding: .9rem; }
  .ft-steps { gap: 1.6rem; }
}
.ft-steps { margin-right: 0; }
.ft-step { min-width: 0; }

.nw { white-space: nowrap; }
.ft-feat.is-card .ft-obj { order: 2; }
.ft-feat.is-card .ft-b { order: 3; }
@media (min-width: 900px) {
  .ft-feat.is-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 1.6rem; }
  .ft-feat.is-card .ft-a, .ft-feat.is-card .ft-obj, .ft-feat.is-card .ft-b { grid-column: 1; margin-top: 0; }
  .ft-feat.is-card .ft-a { grid-row: 1; max-width: 46rem; }
  .ft-feat.is-card .ft-obj { grid-row: 2; }
  .ft-feat.is-card .ft-b { grid-row: 3; align-self: start; }
}

/* 手機再收：細節要點收起來（說明文已含主要事實）、模擬視窗縮小，整頁 ≤15 屏 */
@media (max-width: 899px) {
  .ft-pts { display: none; }
  .ft-act-head .pv-sub { margin-top: .5rem; }
  .ft-lph { --pw: 15.5rem; }
  .ft-stats { grid-template-columns: repeat(4, 1fr); gap: .3rem; }
  .ft-stats > div { padding: .5rem .45rem; }
  .ft-cnt { font-size: 1.7rem; }
  .ft-stats span { letter-spacing: .04em; }
  .ft-dash-export { display: none; }
  .ft-dash-body { gap: .8rem; padding: .9rem; }
  .ft-rp { padding-block: .4rem; }
  .ft-env-wrap { padding-top: 6.6rem; }
  .ft-env { width: 14.5rem; }
  .ft-scr { height: 7.6rem; }
  .ft-board { gap: .8rem; padding: 1rem; }
  .ft-co-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .9rem; padding: .9rem; }
  .ft-th { width: 3rem; }
  .ft-co-card { padding: .5rem .5rem .7rem; gap: .4rem; }
  .ft-cc-names { font-size: .875rem; letter-spacing: .08em; }
  .ft-flow li { padding: .35rem .5rem; font-size: .75rem; }
  .ft-cc-flow em { white-space: nowrap; }
  .ft-ar-b span { display: none; }
  .ft-ar-b[aria-pressed="true"] span { display: block; }
  .ft-ar-b { min-height: 44px; padding-block: .45rem; }
  .ft-film { padding-block: 2.6rem; }
  .ft-tb { padding: .55rem .5rem .4rem; }
  .ft-tb-seats { min-height: calc(2 * 44px); }
  .ft-seat-top { padding-block: .2rem; }
  .ft-tables { padding: .6rem; gap: .5rem; }
  .ft-sv { min-height: 7.5rem; padding: .7rem; gap: .5rem; }
  .ft-sv-card { width: 4.6rem; }
  .ft-sv-body { padding: .8rem .3rem .3rem; }
  .ft-sv-names { font-size: .75rem; }
  .ft-sv-eye { font-size: .75rem; }
  .ft-sv-stat b { font-size: 2.6rem; }
  .ft-step { gap: .5rem; }
  .ft-lcta { margin-top: .4rem; }
}

@media (max-width: 899px) {
  .ft-lph { --pw: 14.5rem; }
  .ft-hero-hint { display: none; }
  .ft-feat { padding-block: 1.7rem; gap: 1rem; }
  .ft-p { font-size: .9375rem; line-height: 1.65; margin-top: .5rem; }
  .ft-act-head .pv-sub { display: none; }
  .ft-act-head { margin-bottom: 0; }
  .pv-lead { font-size: .9375rem; }
}
@media (max-width: 759px) {
  /* 待分配：單排橫向（高度固定、膠囊仍 ≥44px 高），不是一大塊 */
  .ft-pool { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ft-pool::-webkit-scrollbar { display: none; }
  .ft-pool .ft-cap { flex: none; }
  /* 09：六張封面一排、左右滑 */
  .ft-styles { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: .9rem; padding: .9rem; scrollbar-width: none; }
  .ft-styles::-webkit-scrollbar { display: none; }
  .ft-sty { flex: none; width: 7.2rem; scroll-snap-align: start; }
}
@media (max-width: 899px) {
  .ft-act, .ft-more, .ft-stepsec { padding-block: 1.8rem; }
  .ft-li { padding-block: .9rem; }
  .ft-step p { font-size: .875rem; line-height: 1.65; }
  .ft-sv { min-height: 6.5rem; }
  .ft-band { padding-block: 1.3rem; }
  .ft-line-obj { gap: 1rem; }
}
@media (min-width: 900px) {
  .ft-feat { padding-block: clamp(2.2rem, 3.6vw, 3.2rem); }
  .ft-act { padding-block: clamp(2.4rem, 4vw, 3.6rem); }
}
@media (max-width: 759px) { .ft-sv-body { display: none; } .ft-sv-card { width: 4.4rem; } }
.ft-ec-say { white-space: nowrap; letter-spacing: .04em; }
@media (max-width: 899px) { .ft-env-wrap { padding-top: 6.6rem; } }
.ft-tb-m { min-height: 1.7em; line-height: 1.7; }
@media (max-width: 899px) {
  .ft-anchor { display: none; }
  .ft-end { padding-block: 3rem; }
  .pv-next { padding-block: 2.2rem; }
  .ft-sv { min-height: 5.8rem; }
  .ft-film { padding-block: 2.4rem; }
}

/* ════════════════ 第三輪（2026-10-05） ════════════════ */
/* 手機隱藏類的斷點：899 → 759（768 平板直向要看得到） */
@media (min-width: 760px) and (max-width: 899px) {
  .ft-pts { display: grid; }
  .ft-band-1 { display: flex; }
  .ft-li-x { display: grid; }
  .ft-line-side { display: grid; }
  .ft-anchor { display: block; }
  .ft-act-head .pv-sub { display: block; }
  .ft-ar-b span { display: block; }
}

/* hero */
.ft-key-sub { margin-top: .2rem; font-size: .8125rem; letter-spacing: .06em; color: var(--ink-soft); max-width: 30em; }
@media (min-width: 1100px) {
  .ft-lab:hover, .ft-lab.is-hot { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
}

/* 01 側牌 hover 上浮 6px */
.ft-dk:not(.is-top):hover { transform: translateX(calc(var(--o) * var(--fs))) translateY(calc(var(--ao) * var(--ao) * .3rem - 6px)) rotate(calc(var(--o) * var(--rot, 7.5deg))); }

/* 03：刮刮卡提示的手指位移一次 */
.ft-fing { display: inline-block; width: 1.05rem; height: 1.05rem; margin-left: .7rem; border-radius: 50%; vertical-align: -.2em; border: 1.5px solid currentColor; background: color-mix(in srgb, currentColor 18%, transparent); }
html.pv-motion .ft-scr.is-hint .ft-fing { animation: ft-finger 1.4s var(--ease-out) 1; }
@keyframes ft-finger { 0% { transform: translateX(-10px); opacity: 0; } 25% { opacity: 1; } 65% { transform: translateX(10px); } 100% { transform: translateX(0); } }

/* 05：一疊專屬連結卡片（紙板上的實體卡，不再是第三個後台視窗） */
.ft-pile { display: grid; gap: .9rem; padding: clamp(1rem, 3vw, 1.5rem); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hairline); background: radial-gradient(70% 90% at 85% 0%, rgba(255, 255, 255, .5), transparent 70%), var(--ft-board); }
.ft-pile-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .8rem; font-size: .8125rem; letter-spacing: .06em; color: var(--ink-soft); }
.ft-pile-top em { font-style: normal; padding: .15rem .8rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); letter-spacing: .1em; }
.ft-pc-list { display: grid; gap: .6rem; justify-items: center; }
.ft-pc { width: min(100%, 26rem); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .7rem 1rem; border-radius: .7rem; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--hairline), var(--ft-shadow-lite); transform: translateX(var(--x)) rotate(var(--r)); }
.ft-pc .ft-qr { width: 2.7rem; height: 2.7rem; }
.ft-pc-t { display: grid; min-width: 0; }
.ft-pc-t b { font-weight: 600; letter-spacing: .06em; }
.ft-pc-t code { font: .75rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.pv-motion .ft-pile:not(.is-run) .ft-pc { opacity: 0; transform: translateY(26px) rotate(0deg); }
html.pv-motion .ft-pile.is-run .ft-pc { animation: ft-deal .8s var(--ease-out) both; animation-delay: calc(var(--i) * .13s + .2s); }
@keyframes ft-deal { from { opacity: 0; transform: translateY(26px) rotate(0deg); } to { opacity: 1; transform: translateX(var(--x)) rotate(var(--r)); } }
@media (max-width: 759px) { .ft-pc:nth-child(n+4) { display: none; } }

/* 06 待分配數 */
.ft-pool-h em { font: italic 500 .95rem/1 var(--font-serif-latin); color: var(--accent); margin: 0 .1em; }

/* 章節頂的圖例（還有這些全部免費） */
.ft-more-key { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; font-size: .875rem; color: var(--ink-soft); letter-spacing: .06em; }

/* CTA 帶：搬進所在章節（同底色），只留一條頂線，不再 1088px 的線疊在滿版色塊上 */
.ft-band { max-width: none; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--hairline); }
.ft-act-you { background: linear-gradient(to bottom, var(--paper) 0, var(--ft-soft) 5rem, var(--ft-soft) calc(100% - 5rem), var(--paper) 100%); }

/* 手機模擬畫面的字：保證 ≥9px */
@media (max-width: 599px) {
  .ft-lph { --pw: 16.5rem; }
  .ft-line-head { font-size: 4.3cqw; }
  .ft-m-chips, .ft-m-day { display: none; }
  .ft-mc-body em { font-size: 3.7cqw; }
  .ft-mc-body b { font-size: 4.6cqw; }
  .ft-mc-body span { font-size: 3.7cqw; }
  .ft-mc-btn { font-size: 3.9cqw; }
  .ft-m-me { font-size: 4.2cqw; }
  .ft-m-seat { font-size: 3.7cqw; width: 70cqw; }
  .ft-m-seat em { font-size: 3.7cqw; }
  .ft-m-seat b { font-size: 7cqw; }
  .ft-m-seat dl { grid-template-columns: 11cqw 1fr; }
  .ft-m-demo { font-size: 3.4cqw; }
  /* 扇形：卡上只留名字（其餘小字在這個尺寸讀不到，留著只是雜訊） */
  .ft-dk-eye, .ft-dk-say, .ft-dk-rule, .ft-dk-dear { display: none; }
  .ft-dk-couple { font-size: 11cqw; }
  .ft-dk-name { font-size: min(19cqw, calc(76cqw / var(--len, 4))); }
  .ft-dk-in { gap: .7rem; }
}
@media (max-width: 899px) { .ft-env-card { padding-top: .75rem; gap: .12rem; } .ft-ec-rule { display: none; } .ft-ec-couple { font-size: 1rem; } .ft-ec-name { font-size: 1.45rem; } .ft-ec-eye { font-size: .75rem; } }
@media (max-width: 639px) {
  .ft-board { grid-template-columns: 1fr 1fr; align-items: center; }
  .ft-env-wrap { grid-column: 1 / -1; }
  .ft-mu-wrap { grid-column: auto; border-top: 0; padding-top: 0; flex-direction: column; justify-content: center; gap: .6rem; }
  .ft-scr { height: 6.6rem; max-width: 100%; }
  .ft-scr-text { padding: .6rem .8rem; font-size: .95rem; }
}
@media (max-width: 899px) { .ft-p { font-size: .9rem; line-height: 1.6; } }

/* ════════════════ 第四輪（2026-10-05） ════════════════ */

/* 03：信卡抽出後的位置——卡頂離板邊有餘裕、關閉態不再有一大塊死空間 */
.ft-env-wrap { padding-top: 6.2rem; }
.ft-env-card { gap: .18rem; padding-top: .9rem; }
.ft-ec-name { margin-block: .05rem; }
@media (max-width: 899px) { .ft-env-wrap { padding-top: 5rem; } }
html.pv-motion .ft-env-wrap.is-open .ft-ec-name { animation: ft-nm 1.1s var(--ease-out) .55s both; }
@keyframes ft-nm { from { letter-spacing: .24em; opacity: 0; } to { letter-spacing: .06em; opacity: 1; } }

/* 02：膠片載入前的佔位底色 */
.ft-fr img { background: rgba(239, 233, 220, .08); }

/* 04：進度列與註記 */
.ft-bar-r { grid-template-columns: 4.6rem 1fr 5.2rem; }
.ft-dash-note { font-size: .75rem; color: var(--ink-soft); letter-spacing: .04em; line-height: 1.6; }

/* 06：六桌三欄；主鈕＝一鍵初步分桌，排好後變次要鈕「重新示範」 */
.ft-tables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-cap span { padding: .25rem .55rem; gap: .3rem; }
.ft-seat-btn.is-sec { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ft-seat-btn.is-sec:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); opacity: 1; }
html.pv-motion .ft-seat-btn:not(.is-sec) { animation: ft-nudge 2.8s ease-in-out infinite; }

/* 07：桌機放大、字級 ≥10px；平板／手機沿用較大的比例；平面圖回到手機、競品行情那句也留著 */
.ft-lph { --pw: 20rem; }
.ft-line-obj { gap: 1.4rem 1.6rem; }
.ft-line-side { display: grid; max-width: 15.5rem; }
.ft-anchor { display: block; }
.ft-line-head { font-size: 4cqw; }
.ft-mc-body em { font-size: 3.5cqw; }
.ft-mc-body b { font-size: 4.3cqw; }
.ft-mc-body span { font-size: 3.5cqw; }
.ft-mc-btn { font-size: 3.6cqw; }
.ft-m-chips span { font-size: 3.5cqw; }
.ft-m-me { font-size: 3.9cqw; }
.ft-m-seat { font-size: 3.5cqw; }
.ft-m-seat em { font-size: 3.5cqw; }
.ft-m-seat b { font-size: 6.4cqw; }
.ft-m-seat dl { grid-template-columns: 10cqw 1fr; }
.ft-m-day span { font-size: 3.3cqw; }
.ft-m-demo { font-size: 3.2cqw; }
@media (max-width: 899px) {
  .ft-lph { --pw: 17.5rem; }
  .ft-line-head { font-size: 4.4cqw; }
  .ft-mc-body em, .ft-mc-body span, .ft-m-chips span, .ft-m-seat, .ft-m-seat em { font-size: 3.9cqw; }
  .ft-mc-body b { font-size: 4.7cqw; }
  .ft-mc-btn { font-size: 4cqw; }
  .ft-m-me { font-size: 4.3cqw; }
  .ft-m-seat b { font-size: 7cqw; }
  .ft-m-seat dl { grid-template-columns: 11cqw 1fr; }
  .ft-m-demo { font-size: 3.5cqw; }
}
@media (max-width: 759px) { .ft-menu { display: none; } .ft-line-side { max-width: 20rem; } }

/* 章節交界：背景層（氛圍光／葉影／紙紋）上下各 4.5rem 淡出，內容不受影響 */
.ft-main .atmo { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4.5rem, #000 calc(100% - 4.5rem), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 4.5rem, #000 calc(100% - 4.5rem), transparent 100%); }
.ft-ec-rule { display: none; }
.ft-ec-name { font-size: 1.5rem; }
.ft-ec-couple { font-size: 1.05rem; }
.ft-env-card { padding-top: .75rem; }
.ft-env-card { line-height: 1.3; }
.ft-env-card .ft-ec-say { margin-top: .1rem; }
.ft-tb-h { flex-wrap: wrap; row-gap: .15rem; }
.ft-tb-h b { white-space: nowrap; }
@media (max-width: 599px) { .ft-plan { padding: .7rem; } .ft-plan-room { gap: .35rem; padding: .5rem; } .ft-plan-t { margin-bottom: .4rem; } }
@media (max-width: 899px) {
  .ft-env-wrap.is-open .ft-env-card { transform: translateY(-40%) rotate(-1.5deg) translateZ(0); }
  .ft-env-wrap.is-open .ft-env-front { clip-path: polygon(0 45%, 50% 51%, 100% 45%, 100% 100%, 0 100%); }
  .ft-env-wrap { padding-top: 4.8rem; }
  .ft-ec-name { font-size: 1.35rem; }
}
@media (max-width: 759px) { .ft-tb-m { min-height: 3.4em; } }

/* ════════════════ 收尾輪（2026-10-05） ════════════════ */

/* 03：關閉態信卡只露出紙色（不切字）；閉合態上方再收；打開後文字才淡入 */
.ft-env-card > * { opacity: 0; transition: opacity .5s var(--ease-out) .55s; }
.ft-env-wrap.is-open .ft-env-card > * { opacity: 1; }
.ft-env-wrap { padding-top: 4.6rem; }
@media (max-width: 899px) { .ft-env-wrap { padding-top: 3.6rem; } }

/* 章節交界：巨型章碼不再被 .pv-ch 的 overflow:clip 平切（只在本頁覆寫）、背景層淡出拉長 */
.ft-main .pv-ch-no { top: -.14em; }
.ft-main .atmo { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12rem, #000 calc(100% - 12rem), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12rem, #000 calc(100% - 12rem), transparent 100%); }

/* 06：空桌用虛線座位當佔位（看起來是「等你排」而不是空盒）；素食／兒童椅各自不斷行；待分配說明 */
.ft-tb-seats:empty::before, .ft-tb-seats:empty::after { content: ""; display: block; height: 1.9rem; margin-top: .65rem; border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 999px; }
.ft-tb-m span { white-space: nowrap; }
.ft-tb-m span + span::before { content: "・"; }
.ft-pool-note { margin-top: .55rem; font-size: .8125rem; letter-spacing: .06em; color: var(--accent); visibility: hidden; }
.ft-seat.is-done .ft-pool-note { visibility: visible; }
@media (max-width: 759px) {
  .ft-pool { flex-wrap: wrap; overflow: visible; }
  .ft-tb-m span { display: block; }
  .ft-tb-m span + span::before { content: none; }
}

/* 07：900–1279 上下結構（文字在上、手機＋平面圖＋選單並排在下），不留中間死白 */
@media (min-width: 900px) and (max-width: 1279px) {
  #ft-f07 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 1.6rem; }
  #ft-f07 .ft-a, #ft-f07 .ft-b, #ft-f07 .ft-obj { grid-column: 1; grid-row: auto; margin-top: 0; }
  #ft-f07 .ft-obj { order: 2; }
  #ft-f07 .ft-b { order: 3; }
  #ft-f07 .ft-line-obj { justify-content: center; }
}
@media (max-width: 899px) { .ft-m-day { display: none; } }
.ft-main .atmo-paper::before { opacity: .12; }
.ft-main .atmo-leaf::after { opacity: .2; }
@media (max-width: 759px) { .ft-tb-h { flex-wrap: nowrap; gap: .2rem; } .ft-tb-h span { padding: 0 .3rem; } .ft-tb { padding: .55rem .5rem .45rem; } }

/* ════════════════ 最後四件（2026-10-05） ════════════════ */
/* 07 平面圖：主桌＋第 1–5 桌（跟 06 一致） */
.ft-plan-tb { grid-template-columns: repeat(5, auto); gap: .4rem .4rem; justify-content: center; }
.ft-plan-tb i { width: 1.95rem; height: 1.95rem; }
.ft-plan-main { transition: background-color .5s var(--ease-out), color .5s var(--ease-out); }
.ft-plan-main.is-on { background: var(--accent); color: var(--accent-ink); }

/* 還有這些：前面少一截空白、右欄不錯位、第 5 項橫跨兩欄當結尾條、花移到標題旁 */
.ft-more { padding-top: max(1.2rem, calc(var(--section-y) - 3.75rem)); }
@media (min-width: 900px) {
  .ft-li:nth-child(even) { margin-top: 0; }
  .ft-list { padding-bottom: 0; }
  .ft-li:nth-child(5) { grid-column: 1 / -1; }
  .ft-main .ft-bot-4 { top: 1.2rem; bottom: auto; }
}
/* 1024：Act II 末端的花莖會壓到 CTA 按鈕，窄於 1280 不畫 */
@media (max-width: 1279px) { .ft-bot-2 { display: none; } }

/* ════════════════ IV 婚禮當天（進階版，2026-10-19）════════════════
   深色章節＝宴會廳的夜：暖褐墨底（不用純黑）＋上緣一排失焦的暖燈。三台裝置的螢幕是房間裡
   唯一的亮光，所以「亮」交給螢幕本身，不靠陰影（陰影仍只有 --shadow-soft）。
   沒有第二強調色：暖燈是骨白／米色的光；螢幕內仍是 --accent 深森林綠（照真實畫面）。
   裝置內一律 cqw（框是 container）；⚠ container 自己的 padding 不能用 cqw（會解到祖先），
   所以平板與電視的內距寫在子元素上。 */
.ft-day {
  --dk: #221d17;
  --dk-ink: #efe9dc;
  --dk-soft: color-mix(in srgb, #efe9dc 76%, transparent);
  --dk-line: color-mix(in srgb, #efe9dc 17%, transparent);
  background: var(--dk);
  color: var(--dk-ink);
}
.ft-day-light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40rem 28rem at 62% 34%, rgba(243, 226, 191, .10), transparent 70%),
    radial-gradient(30rem 24rem at 8% 88%, rgba(243, 226, 191, .06), transparent 70%);
}
.ft-day-light::before {   /* 串燈的失焦光點：只在上緣，往下漸隱 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9rem;
  background:
    radial-gradient(.5rem circle at 4% 22%, rgba(255, 232, 192, .55), rgba(255, 232, 192, .12) 45%, transparent),
    radial-gradient(.35rem circle at 12% 34%, rgba(255, 232, 192, .45), rgba(255, 232, 192, .1) 45%, transparent),
    radial-gradient(.45rem circle at 21% 26%, rgba(255, 232, 192, .5), rgba(255, 232, 192, .12) 45%, transparent),
    radial-gradient(.3rem circle at 30% 38%, rgba(255, 232, 192, .4), transparent),
    radial-gradient(.5rem circle at 39% 28%, rgba(255, 232, 192, .5), rgba(255, 232, 192, .12) 45%, transparent),
    radial-gradient(.35rem circle at 48% 40%, rgba(255, 232, 192, .42), transparent),
    radial-gradient(.45rem circle at 57% 30%, rgba(255, 232, 192, .5), rgba(255, 232, 192, .12) 45%, transparent),
    radial-gradient(.3rem circle at 66% 41%, rgba(255, 232, 192, .4), transparent),
    radial-gradient(.5rem circle at 75% 31%, rgba(255, 232, 192, .52), rgba(255, 232, 192, .12) 45%, transparent),
    radial-gradient(.35rem circle at 84% 39%, rgba(255, 232, 192, .42), transparent),
    radial-gradient(.45rem circle at 93% 27%, rgba(255, 232, 192, .5), rgba(255, 232, 192, .12) 45%, transparent);
  -webkit-mask-image: linear-gradient(#000 20%, transparent);
  mask-image: linear-gradient(#000 20%, transparent);
}
.ft-day .pv-ch-no { color: var(--dk-ink); opacity: .045; }
.ft-nw { display: inline-block; }
.ft-main .pv-rail.is-on-dark { background: color-mix(in srgb, #2b251e 74%, transparent); }
.ft-day .pv-kicker { color: var(--dk-soft); }
.ft-day .pv-sub, .ft-day .ft-p { color: var(--dk-soft); }
.ft-day .pv-tag, .ft-day .pv-tag.is-paid { color: var(--dk-ink); }
.ft-day .ft-no i { color: var(--dk-ink); }
.ft-day .btn:not(.btn-ghost) { background: var(--dk-ink); color: var(--dk); font-weight: 600; }
.ft-day .btn:not(.btn-ghost):hover { background: #fff; opacity: 1; }
.ft-day .btn-ghost { background: transparent; color: var(--dk-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ink) 50%, transparent); }
.ft-day .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--dk-ink); }
.ft-day-key {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
  margin-top: 1.4rem; padding: .7rem 1.1rem; border-radius: .9rem;
  font-size: var(--text-small); color: var(--dk-soft);
  box-shadow: inset 0 0 0 1px var(--dk-line);
}

/* ── 10–12 一次報到，三個畫面 ── */
.ft-trio { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.ft-trio-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.6rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.ft-trio-k { display: flex; align-items: baseline; gap: .9rem; font-size: var(--text-small); letter-spacing: .14em; color: var(--dk-soft); }
.ft-trio-k i { font: italic 500 1.9rem/1 var(--font-serif-latin); letter-spacing: 0; color: var(--dk-ink); }
.ft-trio-go { min-height: 48px; padding-inline: 1.5rem; }
.ft-trio-go::after { content: "→"; margin-left: .6em; transition: transform .4s var(--ease-out); }
.ft-trio-go:hover::after { transform: translateX(.25rem); }

.ft-trio-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "tv tv" "ck bd";
  gap: 1.6rem .9rem;
  align-items: end;
  padding-top: clamp(.8rem, 3vw, 1.6rem);
}
@media (min-width: 900px) {
  .ft-trio-stage {
    grid-template-columns: minmax(0, .58fr) minmax(0, 2.2fr) minmax(0, 1fr);
    grid-template-areas: "ck tv bd";
    column-gap: 0;
  }
}
.ft-dv-lab {
  display: flex; align-items: baseline; justify-content: center; gap: .5rem;
  font-size: .8125rem; letter-spacing: .16em; color: var(--dk-soft); white-space: nowrap;
}
.ft-dv-lab b { font: italic 500 1.05rem/1 var(--font-serif-latin); letter-spacing: 0; color: var(--dk-ink); }

/* 迎賓螢幕：16:9、照 checkin/screen.html 雜誌風（紙色＋雙線框＋大名字＋第 N 桌） */
.ft-tv { grid-area: tv; position: relative; display: grid; justify-items: center; }
.ft-tv::before {   /* 螢幕的光灑在牆上（光，不是陰影） */
  content: ""; position: absolute; z-index: -1; left: -8%; right: -8%; top: -14%; bottom: 8%;
  background: radial-gradient(closest-side, rgba(246, 236, 214, .17), transparent);
  pointer-events: none;
}
.ft-tv-sc {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  container-type: inline-size;
  border: clamp(5px, .8vw, 10px) solid #12100d; border-radius: clamp(6px, .9vw, 12px);
  background: #f6f4ef; color: #22261e;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255, 255, 255, .06);
}
.ft-tv-sc::before {   /* 雙線框 */
  content: ""; position: absolute; inset: 2.2cqw; border: 1px solid rgba(34, 38, 30, .16);
  outline: 1px solid rgba(34, 38, 30, .1); outline-offset: -.7cqw; pointer-events: none;
}
.ft-tv-idle, .ft-tv-call {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.ft-tv-idle { opacity: 0; visibility: hidden; }
.ft-tv-sc.is-idle .ft-tv-idle { opacity: 1; visibility: visible; }
.ft-tv-sc.is-idle .ft-tv-call { opacity: 0; visibility: hidden; }
.ft-tv-k { font: 600 2.1cqw/1 var(--font-serif-latin); letter-spacing: .55em; text-indent: .55em; text-transform: uppercase; color: var(--accent); }
.ft-tv-zh { margin-top: 1.5cqw; font-size: 2.7cqw; letter-spacing: .5em; text-indent: .5em; color: #5d6057; }
.ft-tv-nm {
  margin-top: 1.4cqw; font-size: min(11.5cqw, calc(46cqw / var(--len, 4))); font-weight: 700;
  letter-spacing: .08em; text-indent: .08em; line-height: 1.2; white-space: nowrap; color: #1f231b;
}
.ft-tv-nm .ch { display: inline-block; }
.ft-tv-rule { display: block; width: 22cqw; height: 1px; margin: 2.6cqw auto 2.3cqw; background: rgba(34, 38, 30, .42); }
.ft-tv-tb { font-size: 3.2cqw; letter-spacing: .14em; color: #5d6057; white-space: nowrap; }
.ft-tv-tb em { font: italic 500 6.4cqw/1 var(--font-serif-latin); color: var(--accent); margin: 0 .12em; }
.ft-tv-tb span { margin: 0 .5em; }
.ft-tv-cpl { margin-top: 1.6cqw; font-size: 7.2cqw; font-weight: 600; letter-spacing: .14em; text-indent: .14em; color: #1f231b; }
.ft-tv-cpl i { font-family: var(--font-serif-latin); font-weight: 400; color: var(--accent); }
.ft-tv-date { font: 500 3.2cqw/1 var(--font-serif-latin); letter-spacing: .4em; text-indent: .4em; color: #22261e; }
.ft-tv-wait { margin-top: 1.6cqw; font-size: 1.8cqw; letter-spacing: .3em; text-indent: .3em; color: #5d6057; }
.ft-tv-foot { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; bottom: 4cqw; margin: 0; font-size: 1.45cqw; letter-spacing: .3em; color: #7b7d74; }
.ft-tv-neck { display: block; width: 6%; height: clamp(.7rem, 2vw, 1.5rem); background: linear-gradient(90deg, #15130f, #26221c, #15130f); }
.ft-tv-foot-b { display: block; width: 26%; height: .4rem; border-radius: .35rem .35rem .15rem .15rem; background: #1a1713; margin-bottom: .8rem; }

/* 接待手機：照 /checkin/<token> 掃到之後的「報到完成」底板 */
.ft-ckw { grid-area: ck; display: grid; justify-items: center; gap: .8rem; }
.ft-ckp { --pw: 8.8rem; }
@media (min-width: 420px) { .ft-ckp { --pw: 9.6rem; } }
@media (min-width: 900px) { .ft-ckw { justify-self: end; margin-right: -1.2rem; z-index: 2; } .ft-ckp { --pw: 11.2rem; } }
@media (min-width: 1200px) { .ft-ckp { --pw: 12.4rem; } }
.ft-ck { background: #8e908a; color: #1f231b; font-size: 4cqw; line-height: 1.45; }
.ft-ck > * { position: absolute; left: 7cqw; right: 7cqw; margin: 0; }
.ft-ck-eye { top: 15cqw; font-size: 3.4cqw; letter-spacing: .2em; color: #3b3e37; }
.ft-ck-cpl { top: 21cqw; font-size: 7cqw; font-weight: 600; letter-spacing: .06em; }
.ft-ck-pill { top: 34cqw; right: auto; padding: 1.4cqw 3.8cqw; border-radius: 999px; background: #3e4b39; color: #d6d8cf; font-size: 3.4cqw; font-weight: 600; letter-spacing: .06em; }
.ft-ck-pill em { font-style: normal; }
.ft-ck-scan { top: 47cqw; height: 58cqw; border-radius: 4cqw; background: #6c6e68; overflow: hidden; display: grid; place-items: center; }
.ft-ck-qr { width: 34cqw; height: 34cqw; padding: 4cqw; border-radius: 3cqw; background: #a5a7a1; fill: #141512; }
.ft-ck-c { position: absolute; width: 8cqw; height: 8cqw; border: .9cqw solid #e9e9e3; }
.ft-ck-c:nth-child(1) { left: 14cqw; top: 6cqw; border-right: 0; border-bottom: 0; border-top-left-radius: 2cqw; }
.ft-ck-c:nth-child(2) { right: 14cqw; top: 6cqw; border-left: 0; border-bottom: 0; border-top-right-radius: 2cqw; }
.ft-ck-c:nth-child(3) { left: 14cqw; bottom: 6cqw; border-right: 0; border-top: 0; border-bottom-left-radius: 2cqw; }
.ft-ck-c:nth-child(4) { right: 14cqw; bottom: 6cqw; border-left: 0; border-top: 0; border-bottom-right-radius: 2cqw; }
.ft-ck-line { position: absolute; left: 16cqw; right: 16cqw; top: 50%; height: 2px; background: rgba(255, 255, 255, .8); opacity: 0; }
.ft-ck-sheet {
  left: 0 !important; right: 0 !important; bottom: 0; top: 112cqw;
  display: grid; align-content: start; gap: 2.8cqw;
  padding: 6.5cqw 7cqw; border-radius: 6cqw 6cqw 0 0;
  background: #fdfcf9;
}
.ft-ck-ok { display: flex; align-items: center; gap: 2cqw; font-size: 4.2cqw; font-weight: 700; color: var(--accent); }
.ft-ck-ok i { position: relative; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: var(--accent); }
.ft-ck-ok i::after { content: ""; position: absolute; left: 1.8cqw; top: 1.1cqw; width: 1.4cqw; height: 2.6cqw; border: solid #fff; border-width: 0 .6cqw .6cqw 0; transform: rotate(45deg); }
.ft-ck-nm { font-size: 9cqw; font-weight: 700; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; }
.ft-ck-tb { display: flex; align-items: baseline; gap: 3cqw; padding: 3.2cqw 4.4cqw; border-radius: 3.4cqw; background: var(--accent); color: var(--accent-ink); }
.ft-ck-tb span { font-size: 3.2cqw; letter-spacing: .1em; opacity: .85; }
.ft-ck-tb b { font-size: 9.6cqw; font-weight: 700; letter-spacing: .06em; line-height: 1.1; white-space: nowrap; }
.ft-ck-pt { display: flex; align-items: center; gap: 2.4cqw; font-size: 3.6cqw; font-weight: 700; }
.ft-ck-pt span { flex: 1; }
.ft-ck-pt i { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 2cqw; font-style: normal; font-weight: 400; color: #4a4d45; box-shadow: inset 0 0 0 1px rgba(31, 35, 27, .16); background: #f4f3ee; }
.ft-ck-pt b { min-width: 5cqw; text-align: center; font-size: 5.6cqw; }
.ft-ck-btn { display: block; padding: 3cqw 0; border-radius: 3cqw; text-align: center; background: var(--accent); color: var(--accent-ink); font-size: 3.8cqw; font-weight: 700; letter-spacing: .06em; }

/* 新娘房看板：照 /app/checkin-board.html（已到大數字＋進度條＋剛報到＋依桌次的還沒到） */
.ft-tab { grid-area: bd; display: grid; gap: .8rem; justify-items: center; align-self: end; }
@media (min-width: 900px) { .ft-tab { margin-left: -1.2rem; z-index: 2; } }
.ft-tab-sc {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  container-type: inline-size; container-name: ftbd;
  border: clamp(6px, .7vw, 9px) solid #1d1f1b; border-radius: clamp(12px, 1.4vw, 18px);
  background: #fbfaf6; color: var(--ink);
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255, 255, 255, .06);
}
.ft-tab-sc > * { margin-inline: 6cqw; }
.ft-bd-k { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin-top: 5.5cqw; font-size: 4.6cqw; font-weight: 600; letter-spacing: .1em; }
.ft-bd-k em { display: inline-flex; align-items: center; font-style: normal; font-weight: 400; font-size: .8em; letter-spacing: .12em; color: var(--accent); white-space: nowrap; }
.ft-bd-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2cqw; margin-top: 3cqw; font-size: 4.6cqw; color: var(--ink-soft); }
.ft-bd-big b { font: 600 16cqw/1 var(--font-serif-latin); letter-spacing: -.02em; color: var(--accent); }
.ft-bd-big small { flex-basis: 100%; font-size: 4cqw; margin-top: 1.4cqw; }
.ft-bd-bar { display: block; height: 2cqw; margin-top: 4cqw; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ft-bd-bar b { display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: inherit; background: var(--accent); transition: width .9s var(--ease-out); }
.ft-bd-cols { display: grid; gap: 4cqw; margin-top: 4cqw; }
.ft-bd-h { padding-bottom: 1.8cqw; border-bottom: 1px solid var(--hairline); font-size: 3.8cqw; letter-spacing: .16em; color: var(--ink-soft); }
.ft-bd-h em { font-style: normal; color: var(--ink); font-weight: 600; }
.ft-bd-rc li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 3cqw; padding: 1.7cqw 0; border-bottom: 1px solid var(--hairline); font-size: 4.4cqw; }
.ft-bd-rc li span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bd-rc li em { font-style: normal; font-size: .82em; color: var(--ink-soft); white-space: nowrap; }
.ft-bd-rc li time { font: 500 .9em/1 var(--font-serif-latin); color: var(--ink-soft); }
.ft-bd-pd { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5cqw; }
.ft-bd-pd li { display: flex; justify-content: space-between; padding: 1.2cqw 0; border-bottom: 1px solid var(--hairline); font-size: 3.7cqw; color: var(--ink-soft); }
.ft-bd-pd li em { font-style: normal; font-weight: 600; color: var(--ink); }
.ft-bd-pd li.is-done em { color: var(--accent); }
@container ftbd (max-width: 250px) {
  .ft-bd-k { font-size: 5.6cqw; }
  .ft-bd-k em { display: none; }
  .ft-bd-big { font-size: 5.6cqw; }
  .ft-bd-big b { font-size: 22cqw; }
  .ft-bd-big small { font-size: 5cqw; }
  .ft-bd-h { font-size: 4.8cqw; }
  .ft-bd-rc li { font-size: 5.6cqw; padding: 2.4cqw 0; }
  .ft-bd-rc li em, .ft-bd-rc li time { display: none; }
  .ft-bd-cols > div + div { display: none; }
}
/* 同一拍：三個畫面外緣一起亮一下（光，不是陰影） */
html.pv-motion .ft-trio.is-beat .ft-tv-sc,
html.pv-motion .ft-trio.is-beat .ft-tab-sc,
html.pv-motion .ft-trio.is-beat .ft-ckp { animation: ft-sync 1.3s var(--ease-out) .55s; }
@keyframes ft-sync { 0% { outline: 2px solid rgba(255, 236, 205, 0); outline-offset: 2px; } 25% { outline: 2px solid rgba(255, 236, 205, .55); outline-offset: 5px; } 100% { outline: 2px solid rgba(255, 236, 205, 0); outline-offset: 10px; } }
.ft-ckw { cursor: pointer; }

/* 報到的那一下：三個畫面依序動（pv-motion 才演；RM 只換字） */
html.pv-motion .ft-trio.is-beat .ft-ck-line { animation: ft-scan .7s var(--ease-out); }
@keyframes ft-scan { 0% { opacity: 0; transform: translateY(-14cqw); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14cqw); } }
html.pv-motion .ft-trio.is-beat .ft-ck-sheet { animation: ft-sheet .75s var(--ease-out) .35s backwards; }
@keyframes ft-sheet { from { transform: translateY(100%); } to { transform: none; } }
html.pv-motion .ft-tv-nm.is-in .ch { animation: ft-rise .9s var(--ease-out) backwards; animation-delay: calc(var(--i) * .09s + .55s); }
html.pv-motion .ft-trio.is-beat .ft-tv-tb { animation: ft-fade-in .8s var(--ease-out) 1s backwards; }
@keyframes ft-rise { from { opacity: 0; transform: translateY(.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ft-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.pv-motion .ft-trio.is-beat .ft-bd-rc li:first-child { animation: ft-rowin .7s var(--ease-out) .9s backwards; }
html.pv-motion .ft-trio.is-beat .ft-bd-big b { animation: ft-bump .7s var(--ease-out) .9s; }
@keyframes ft-bump { 40% { transform: translateY(-.06em); } }

.ft-trio-caps { display: grid; gap: 1.8rem; margin-top: clamp(2.2rem, 5vw, 3rem); }
@media (min-width: 900px) { .ft-trio-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.6rem, 3.5vw, 3rem); } }
.ft-cap3 { padding-top: 1.3rem; border-top: 1px solid var(--dk-line); }
.ft-cap3 .ft-no i { font-size: clamp(2.2rem, 4.4vw, 2.9rem); }
.ft-cap3 .ft-h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.ft-cap3 .ft-p { font-size: var(--text-small); line-height: 1.85; }

/* ── 13–14 相簿 ── */
.ft-alb { display: grid; gap: 2.2rem; margin-top: clamp(3rem, 7vw, 5rem); }
@media (min-width: 900px) { .ft-alb { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); column-gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; } }
.ft-alb-obj { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.ft-albp { --pw: 10.6rem; flex: none; }
@media (min-width: 420px) { .ft-albp { --pw: 11.6rem; } }
@media (min-width: 900px) { .ft-albp { --pw: 14rem; } }
.ft-al { background: #f6f5f1; color: #1f231b; text-align: center; }
.ft-al-eye { margin-top: 17cqw; font: italic 500 6.2cqw/1 var(--font-serif-latin); letter-spacing: .06em; color: var(--accent); }
.ft-al-h { margin-top: 3.4cqw; font-size: 8.4cqw; font-weight: 600; letter-spacing: .12em; text-indent: .12em; line-height: 1.3; }
.ft-al-cpl { margin-top: 1.4cqw; font-size: 4cqw; letter-spacing: .1em; color: var(--ink-soft); }
.ft-al-btn { display: block; margin: 6cqw 9cqw 0; padding: 3.4cqw 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 4.2cqw; letter-spacing: .2em; text-indent: .2em; }
.ft-al-meta { display: flex; justify-content: space-between; align-items: baseline; margin: 7cqw 4.5cqw 2.6cqw; }
.ft-al-meta span { font-size: 5.6cqw; font-weight: 600; letter-spacing: .1em; }
.ft-al-meta em { font-style: normal; font-size: 3.6cqw; color: var(--ink-soft); }
.ft-al-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9cqw; margin: 0 4.5cqw; }
.ft-al-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ft-zip { position: relative; z-index: 2; width: min(19rem, 58%); margin: 0 0 2.6rem -1.8rem; flex: none; color: var(--ink); }
@media (max-width: 559px) { .ft-zip { width: 12.6rem; margin-left: -1.4rem; margin-bottom: 1.6rem; } .ft-zip .ft-win-bar > i, .ft-zip-sm { display: none; } .ft-zip-l { padding-inline: .8rem; } .ft-zip-l li { column-gap: .6rem; } }
.ft-zip .ft-win-bar > span { margin-left: .5rem !important; letter-spacing: .12em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-zip-l { display: grid; padding: .3rem 1rem .9rem; }
.ft-zip-l li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic n s" "ic bar ok";
  align-items: center; column-gap: .75rem; row-gap: .35rem; padding: .65rem 0; border-bottom: 1px solid var(--hairline);
}
.ft-zip-l li:last-child { border-bottom: 0; }
.ft-zip-ic {
  grid-area: ic; display: grid; place-items: end center; width: 2rem; height: 2.5rem; padding-bottom: .35rem; border-radius: .25rem .7rem .25rem .25rem;
  font: 600 .6rem/1 var(--font-serif-latin); letter-spacing: .1em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--paper-raise)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ft-zip-n { grid-area: n; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-zip-s { grid-area: s; font-size: .75rem; color: var(--ink-soft); white-space: nowrap; }
.ft-zip-bar { grid-area: bar; display: block; height: 4px; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.ft-zip-bar b { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; }
.ft-zip-ok { grid-area: ok; font-size: .6875rem; letter-spacing: .12em; color: var(--accent); white-space: nowrap; }
html.pv-motion .ft-zip:not(.is-run) .ft-zip-bar b { transform: scaleX(0); }
html.pv-motion .ft-zip:not(.is-run) .ft-zip-ok { opacity: 0; }
html.pv-motion .ft-zip.is-run .ft-zip-bar b { animation: ft-zipfill 1.2s cubic-bezier(.45, .05, .3, 1) backwards; animation-delay: calc(var(--i) * 1s + .3s); }
html.pv-motion .ft-zip.is-run .ft-zip-ok { animation: ft-fade-in .5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 1s + 1.45s); }
@keyframes ft-zipfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ft-alb-txt { display: grid; gap: 2rem; }

/* ── 15 保存一年：一把尺 ── */
.ft-keep { display: grid; gap: 2.2rem; margin-top: clamp(3rem, 7vw, 5rem); }
@media (min-width: 900px) { .ft-keep { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); column-gap: clamp(2.4rem, 5vw, 4.5rem); align-items: end; } }
.ft-yr { position: relative; padding: 0 .4rem 0 .2rem; }
.ft-yr-ruler { position: relative; height: 2.4rem; border-bottom: 1px solid var(--dk-line); }
.ft-yr-m { position: absolute; bottom: 0; left: calc(var(--m) / 12 * 100%); width: 1px; height: .45rem; background: var(--dk-line); }
.ft-yr-m b { position: absolute; bottom: .9rem; left: 0; transform: translateX(-50%); font-weight: 400; font-size: .8125rem; letter-spacing: .1em; color: var(--dk-soft); white-space: nowrap; }
.ft-yr-m:first-child b { transform: none; }
.ft-yr-m:last-child b { transform: translateX(-100%); }
.ft-yr-row { position: relative; margin-top: 1.5rem; padding-top: 1.35rem; }
.ft-yr-lab { position: absolute; left: 0; top: 0; padding-left: .55rem; font-size: .75rem; letter-spacing: .16em; color: var(--dk-soft); }
.ft-yr-bar { display: block; height: .5rem; width: calc(var(--to) / 12 * 100%); border-radius: 99px; transform-origin: 0 50%; transition: transform 1.4s var(--ease-out) .2s; }
.ft-yr-end { position: absolute; top: 0; left: calc(var(--to) / 12 * 100%); transform: translateX(-100%); padding-left: .5rem; background: var(--dk); font-size: .75rem; letter-spacing: .12em; white-space: nowrap; }
.ft-yr-row.is-base .ft-yr-bar { background: color-mix(in srgb, var(--dk-ink) 26%, transparent); }
.ft-yr-row.is-base .ft-yr-lab, .ft-yr-row.is-base .ft-yr-end { color: var(--dk-soft); }
.ft-yr-row.is-plus .ft-yr-bar { background: var(--dk-ink); height: .6rem; }
.ft-yr-row.is-plus .ft-yr-lab, .ft-yr-row.is-plus .ft-yr-end { color: var(--dk-ink); font-weight: 600; }
html.pv-motion .ft-yr:not(.is-in) .ft-yr-bar { transform: scaleX(0); }
.ft-yr-pins { position: relative; height: 3.2rem; margin-top: 1.1rem; }
.ft-yr-pin { position: absolute; top: 0; left: calc(var(--at) / 12 * 100%); display: grid; gap: .1rem; padding-top: .7rem; font-size: .75rem; letter-spacing: .08em; color: var(--dk-soft); white-space: nowrap; }
.ft-yr-pin b { font-weight: 600; letter-spacing: .12em; color: var(--dk-ink); }
.ft-yr-pin::before { content: ""; position: absolute; top: -6.1rem; height: 6.4rem; width: 1px; background: repeating-linear-gradient(var(--dk-soft) 0 3px, transparent 3px 6px); }
.ft-yr-pin.is-day::before { left: 0; }
.ft-yr-pin.is-mail { transform: translateX(-100%); text-align: right; }
.ft-yr-pin.is-mail::before { right: 0; }

/* 收尾帶（深色版） */
.ft-band-day { margin-top: clamp(3rem, 7vw, 5rem); padding-inline: 0; border-color: var(--dk-line); }
.ft-band-day .ft-band-l em { color: var(--dk-soft); }

/* 第二輪評審（2026-10-19）：孤字、手機版每段文字都要貼著一個物件 */
.ft-day .ft-p, .ft-band-day .ft-band-l, .ft-day .pv-sub { text-wrap: pretty; }
@media (max-width: 899px) {
  /* 13 文字 → 相簿手機 → 14 文字 → ZIP 視窗：手機上不准連續一屏只有字 */
  .ft-alb-obj, .ft-alb-txt { display: contents; }
  .ft-albp { order: 1; justify-self: center; --pw: min(15rem, 68vw); }
  #ft-f13 { order: 2; }
  #ft-f14 { order: 3; }
  .ft-zip { order: 4; justify-self: center; width: min(22rem, 100%); margin: 0; }
  .ft-zip .ft-win-bar > i, .ft-zip-sm { display: revert; }
  /* 10–12：螢幕 → 手機＋看板 → 按鈕（一個視窗看得全，按下去三格同時看到）→ 10、11、12 文字 */
  .ft-trio { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: .9rem;
    grid-template-areas: "tv tv" "ck bd" "bar bar" "c10 c10" "c11 c11" "c12 c12"; }
  .ft-trio-stage, .ft-trio-caps { display: contents; }
  .ft-tv { margin-top: 1.2rem; }
  .ft-ckw { margin-top: 1.4rem; }
  #ft-f11 { grid-area: c11; margin-top: 1.8rem; }
  #ft-f10 { grid-area: c10; margin-top: 2rem; }
  #ft-f12 { grid-area: c12; margin-top: 1.8rem; }
  .ft-trio-bar { grid-area: bar; }
  .ft-ckw, .ft-tab { align-self: end; }
  /* 窄看板只到內容高度，收在「還沒到 N 人」 */
  .ft-tab { align-self: center; }
  .ft-tab-sc { aspect-ratio: auto; padding-bottom: .9rem; }
}
@container ftbd (max-width: 250px) {
  .ft-bd-cols > div + div { display: block; }
  .ft-bd-cols > div + div .ft-bd-h { border-bottom: 0; padding-bottom: 0; }
  .ft-bd-pd { display: none; }
}