/* ── 立體導覽頁：配色沿用主站（io17 米色手繪水彩） ── */
:root {
    --green-deep: #3f6655;
    --green-bar: #6a907c;
    --green-soft: #e6eee6;
    --orange: #dc6c45;
    --orange-dark: #c4593a;
    --peach: #f3ddbd;
    --tan-line: #e6cfae;
    --cream: #faf1e1;
    --paper: #fdf6ea;
    --ink: #3f4a42;
    --ink-strong: #33413a;
    --ink-soft: #6b6b5f;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Noto Sans TC', system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ol, ul, dl, dd, figure { margin: 0; }

/* ── 頂部列 ── */
.t-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px clamp(16px, 4vw, 40px);
}
.t-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; color: var(--green-deep); letter-spacing: .02em; }
.t-brand svg { width: 34px; height: 34px; flex: none; }
.t-back {
    padding: 8px 18px; border-radius: 999px; text-decoration: none; font-weight: 900; font-size: .92rem;
    color: var(--green-deep); background: rgba(253, 246, 234, .86); box-shadow: inset 0 0 0 2px var(--green-deep);
    transition: background .25s;
}
.t-back:hover { background: var(--green-soft); }

/* ── 一般排版（預設／減少動態／無 JS） ── */
.t-static .t-stage, .t-static .t-route, .t-static .t-hint, .t-static .t-track, .t-static .t-progress, .t-static .t-sky { display: none; }
.t-static .t-copylayer { width: min(760px, 100% - 32px); margin: 0 auto; padding: 96px 0 64px; display: grid; gap: 56px; }
.t-static .t-copy { padding-bottom: 48px; border-bottom: 1.5px solid var(--tan-line); }
.t-static .t-copy:last-child { border-bottom: 0; }
.t-static .t-fig { margin-top: 24px; }
.t-static .t-fig img { max-height: 360px; width: auto; margin-inline: auto; border-radius: 16px; }

/* ── 3D 模式 ── */
.t-3d body { overflow-x: hidden; }
.t-3d .t-fig { display: none; }
/* 兌換流程 1→2→3、常見問題三題在 3D 場景已有標籤與卡片：桌機上字夠大，文字欄改為視覺隱藏（仍保留給讀屏與搜尋引擎）；
   手機上 3D 文字僅約 8–10px 難以閱讀，保留文字欄清單 */
@media (min-width: 861px) {
    .t-3d .t-copy__flow, .t-3d .t-copy__qa { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.t-sky {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(1200px 700px at 70% 10%, rgba(255, 255, 255, .7), transparent 70%),
        radial-gradient(900px 600px at 10% 90%, rgba(221, 232, 221, .8), transparent 70%),
        linear-gradient(180deg, #fbf3e6 0%, #f7ead6 55%, #eee3cf 100%);
}
.t-sky img { position: absolute; top: -12%; opacity: .55; animation: t-fall linear infinite; }
@keyframes t-fall {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(var(--dx, 120px), 125vh, 0) rotate(var(--rot, 260deg)); }
}

.t-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(63, 102, 85, .12); }
.t-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--green-deep), var(--orange)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.t-stage {
    position: fixed; inset: 0; z-index: 1; overflow: hidden;
    perspective: var(--persp, 1000px); perspective-origin: var(--cx, 63%) var(--cy, 54%);
}
.t-world { position: absolute; left: var(--cx, 63%); top: var(--cy, 54%); width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.t-scene { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.t-scene.off { visibility: hidden; }
.t-o { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry, 0deg)); }
.t-o > * { opacity: var(--fog, 1); }
.t-o > .b { position: absolute; left: 0; top: 0; translate: -50% -100%; }
.t-o > .c { position: absolute; left: 0; top: 0; translate: -50% -50%; }

/* 地面：小島、陰影、步道 */
.t-island {
    position: absolute; left: -640px; top: -450px; width: 1280px; height: 900px; border-radius: 50%;
    transform: translateY(-2px) rotateX(90deg); opacity: var(--fog, 1);
    background: radial-gradient(closest-side, #f1dcb8 0%, #f1dcb8 58%, rgba(241, 220, 184, .75) 76%, rgba(241, 220, 184, 0) 100%);
}
.t-island.sage { background: radial-gradient(closest-side, #dce6d4 0%, #dce6d4 58%, rgba(220, 230, 212, .75) 76%, rgba(220, 230, 212, 0) 100%); }
.t-shade {
    position: absolute; top: -80px; left: calc(var(--w) / -2); width: var(--w); height: 160px;
    transform: translateY(-4px) rotateX(90deg);
    background: radial-gradient(closest-side, rgba(110, 80, 45, .28), rgba(110, 80, 45, 0));
}
.t-dash { position: absolute; left: -24px; top: -7px; width: 48px; height: 14px; border-radius: 7px; background: rgba(220, 108, 69, .55); opacity: var(--fog, 1); }
.t-dash.off { visibility: hidden; }

/* 立體物件 */
.t-card { padding: 10px; background: #fff; border-radius: 24px; box-shadow: 0 26px 50px rgba(70, 55, 35, .2); }
.t-card img { width: 100%; border-radius: 16px; }
.t-cut, .t-leaf { max-width: none; }
.t-leaf.flip { transform: scaleX(-1); }
.t-counter {
    width: 720px; height: 150px; border-radius: 22px 22px 10px 10px;
    background: linear-gradient(180deg, #ecd2ac 0 18px, #dcb688 18px 100%);
    box-shadow: 0 20px 40px rgba(70, 55, 35, .18), inset 0 -10px 0 rgba(120, 80, 40, .12);
}

.t-chip {
    white-space: nowrap; padding: 12px 24px; border-radius: 999px;
    background: #fffaf2; color: var(--green-deep); font-size: 26px; font-weight: 900; letter-spacing: .04em;
    box-shadow: 0 14px 28px rgba(70, 55, 35, .18); animation: t-bob 5s ease-in-out infinite;
}
.t-chip.orange { background: var(--orange); color: #fff; }
.t-chip.green { background: #e3eee6; }
.t-chip.big { font-size: 34px; padding: 14px 30px; }
.t-chip.big b { color: var(--orange); font-size: 1.45em; line-height: 1; vertical-align: -.06em; margin-right: 4px; }
.t-o:nth-child(3n) > .t-chip, .t-o:nth-child(3n) > .t-note, .t-o:nth-child(3n) > .t-step { animation-delay: -1.7s; }
.t-o:nth-child(3n+1) > .t-chip, .t-o:nth-child(3n+1) > .t-note, .t-o:nth-child(3n+1) > .t-step { animation-delay: -3.3s; }
@keyframes t-bob { 50% { transform: translateY(-16px); } }

.t-num {
    width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
    background: var(--orange); color: #fff; font-size: 42px; font-weight: 900;
    box-shadow: 0 0 0 10px #fffaf2, 0 18px 30px rgba(220, 108, 69, .35);
}
.t-note {
    display: flex; align-items: center; gap: 14px; white-space: nowrap;
    padding: 16px 26px 16px 18px; border-radius: 18px; background: #fffaf2;
    font-size: 30px; font-weight: 900; color: var(--ink-strong);
    box-shadow: 0 16px 30px rgba(70, 55, 35, .16); animation: t-bob 6s ease-in-out infinite;
}
.t-note i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-style: normal; font-size: 26px; }
.t-note small { font-size: 22px; font-weight: 500; color: var(--ink-soft); margin-left: 4px; }

.t-timer { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: #fffaf2; box-shadow: 0 16px 30px rgba(70, 55, 35, .18); }
.t-timer svg { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); transform: rotate(-90deg); fill: none; stroke-width: 4; }
.t-timer .bg { stroke: var(--green-soft); }
.t-timer .fg { stroke: var(--orange); stroke-dasharray: 119.4; stroke-dashoffset: var(--off, 0); stroke-linecap: round; }
.t-timer.urgent .fg { stroke: #c94a3a; }
.t-timer b { font-size: 36px; font-weight: 900; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.t-timer.urgent b { color: #c94a3a; }
.t-timer .fg { transition: stroke .3s, opacity .3s; }
.t-timer[data-state="idle"] .fg, .t-timer[data-state="generating"] .fg { opacity: .4; transition: stroke-dashoffset .6s var(--ease), stroke .3s, opacity .3s; }
.t-timer[data-state="scanned"] .fg { stroke: #3f8a5a; }
.t-timer[data-state="scanned"] b { color: #3f8a5a; }
.t-timer[data-state="expired"] b { color: #8a7f73; }
.t-tablet { position: relative; }   /* 平板互動（tablet-demo.js）的定位容器 */

.t-pop { animation: t-pop 2.6s var(--ease) infinite; }
@keyframes t-pop {
    0% { opacity: 0; transform: translateY(40px) scale(.5); }
    18%, 70% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-50px) scale(.9); }
}

.t-step {
    display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
    padding: 12px 26px 12px 12px; border-radius: 999px; background: #e3eee6;
    font-size: 28px; font-weight: 900; color: var(--ink-strong);
    box-shadow: 0 14px 26px rgba(70, 55, 35, .15); animation: t-bob 5.5s ease-in-out infinite;
}
.t-step i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; font-style: normal; font-size: 24px; }
.t-ok {
    white-space: nowrap; padding: 12px 26px; border-radius: 999px; font-size: 30px; font-weight: 900;
    background: #fff; color: #2f7a4d; box-shadow: inset 0 0 0 3px #a9cdb6, 0 16px 30px rgba(70, 55, 35, .16);
    animation: t-okpulse 2.4s ease-in-out infinite;
}
@keyframes t-okpulse { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } }

.t-qa {
    width: 380px; padding: 24px 28px; border-radius: 22px; background: #fffaf2;
    border-top: 10px solid var(--orange); box-shadow: 0 20px 36px rgba(70, 55, 35, .18);
    display: grid; gap: 8px;
}
.t-qa b { font-size: 30px; font-weight: 900; color: var(--ink-strong); }
.t-qa span { font-size: 23px; color: var(--ink); line-height: 1.5; }
.t-q { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; font-size: 70px; font-weight: 900; box-shadow: 0 18px 30px rgba(63, 102, 85, .3); animation: t-bob 4.5s ease-in-out infinite; }

.t-bubble {
    position: relative; width: 520px; padding: 34px 38px; border-radius: 36px;
    background: #fbefdd; border: 3px solid var(--tan-line);
    font-size: 34px; font-weight: 900; line-height: 1.55; color: var(--green-deep);
    box-shadow: 0 22px 40px rgba(70, 55, 35, .16);
}
.t-bubble::before {
    content: ''; position: absolute; left: -22px; bottom: 60px; width: 40px; height: 40px;
    background: #fbefdd; border-left: 3px solid var(--tan-line); border-bottom: 3px solid var(--tan-line);
    transform: rotate(45deg) skew(8deg, 8deg);
}

/* ── 文字層 ── */
.t-3d .t-copylayer { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.t-3d .t-copylayer::before {
    content: ''; position: absolute; inset: 0; width: min(54vw, 760px);
    background: linear-gradient(90deg, rgba(250, 241, 225, .96) 0%, rgba(250, 241, 225, .82) 38%, rgba(250, 241, 225, .35) 72%, rgba(250, 241, 225, 0) 100%);
}
.t-3d .t-copy {
    position: absolute; left: clamp(20px, 5vw, 72px); top: 50%; width: min(40vw, 470px);
    opacity: var(--o, 0); transform: translateY(calc(-50% + (1 - var(--o, 0)) * 26px)); will-change: opacity, transform;
}
.t-3d .t-copy.on a, .t-3d .t-copy.on button { pointer-events: auto; }
.t-3d .t-copylayer { transition: opacity .5s; }
.t-rewind .t-copylayer { opacity: 0; }

.t-copy__num { font-size: .78rem; letter-spacing: .14em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-copy__eyebrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 900; font-size: .92rem; letter-spacing: .18em; color: var(--orange-dark); }
.t-copy__eyebrow::before { content: ''; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.t-copy__title {
    margin-top: 10px; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.22; font-weight: 900; color: var(--green-deep); letter-spacing: .02em;
    text-shadow: 0 2px 18px rgba(250, 241, 225, .9);
}
.t-copy__quote { font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.5; }
.t-copy__body { margin-top: 16px; font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.85; color: var(--ink); }
.t-copy__note { margin-top: 10px; font-size: .95rem; font-style: italic; color: #5c6a5e; }
.t-copy__tags { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.t-copy__tags li { padding: 6px 16px; border-radius: 999px; font-size: .9rem; font-weight: 700; color: var(--green-deep); background: #e3eee6; }
.t-copy__list { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 12px; }
.t-copy__list li { position: relative; padding-left: 34px; line-height: 1.7; }
.t-copy__list li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-size: .8rem; font-weight: 900; }
.t-copy__list b, .t-copy__qa dt { font-weight: 900; color: var(--ink-strong); }
.t-copy__flow { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; counter-reset: f; }
.t-copy__flow li { counter-increment: f; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #e3eee6; font-weight: 900; font-size: .95rem; color: var(--ink-strong); }
.t-copy__flow li::before { content: counter(f); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; font-size: .8rem; }
.t-copy__flow li + li { margin-left: 22px; position: relative; }
.t-copy__flow li + li::after { content: '→'; position: absolute; left: -22px; color: var(--orange); font-weight: 900; }
.t-copy__qa { margin-top: 18px; display: grid; gap: 12px; }
.t-copy__qa div { padding: 12px 16px; border-radius: 14px; background: rgba(253, 246, 234, .9); box-shadow: inset 3px 0 0 var(--orange); }
.t-copy__qa dd { color: var(--ink); }
.t-copy__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.t-btn {
    display: inline-flex; align-items: center; padding: 13px 26px; border-radius: 999px; text-decoration: none;
    font-weight: 900; color: #fff; background: var(--green-deep); box-shadow: 0 8px 20px rgba(63, 102, 85, .28);
    transition: transform .25s var(--ease);
}
.t-btn:hover { transform: translateY(-2px); }
.t-btn.ghost { background: var(--paper); color: var(--green-deep); box-shadow: inset 0 0 0 2px var(--green-deep); }
.t-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--tan-line); display: grid; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
.t-foot a { color: var(--green-deep); font-weight: 700; text-decoration: none; }
.t-foot a:hover { text-decoration: underline; }
.t-foot .x { color: var(--orange); font-weight: 900; margin: 0 6px; }
.t-foot .sep { margin: 0 6px; color: var(--tan-line); }

/* ── 段落導覽、提示、捲動軌道 ── */
.t-route { position: fixed; right: clamp(12px, 2.4vw, 32px); top: 50%; translate: 0 -50%; z-index: 40; display: grid; gap: 6px; }
.t-route button { position: relative; width: 30px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.t-route i { width: 10px; height: 10px; border-radius: 50%; background: rgba(63, 102, 85, .3); transition: transform .3s var(--ease), background .3s; }
.t-route button.active i { background: var(--orange); transform: scale(1.6); box-shadow: 0 0 0 4px rgba(220, 108, 69, .18); }
.t-route span {
    position: absolute; right: 36px; top: 50%; translate: 0 -50%; white-space: nowrap;
    padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--green-deep); background: rgba(253, 246, 234, .95);
    box-shadow: 0 4px 12px rgba(70, 55, 35, .12); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.t-route button:hover span, .t-route button:focus-visible span { opacity: 1; transform: none; }
.t-route button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; border-radius: 50%; }

.t-hint {
    position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 30; display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-radius: 999px; background: rgba(253, 246, 234, .9); font-size: .9rem; font-weight: 700; white-space: nowrap; color: var(--green-deep);
    box-shadow: 0 6px 16px rgba(70, 55, 35, .12); transition: opacity .4s;
}
.t-hint i { position: relative; width: 18px; height: 28px; border-radius: 10px; border: 2px solid currentColor; }
.t-hint i::after { content: ''; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--orange); animation: t-wheel 1.6s ease-in-out infinite; }
@keyframes t-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }
.t-hint.gone { opacity: 0; }
.t-track { position: relative; z-index: -1; pointer-events: none; }

/* 閒置自動輪播提示 */
.t-auto {
    position: fixed; left: 50%; bottom: 26px; z-index: 31; display: flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(63, 102, 85, .92); color: #fff;
    font-size: .88rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px rgba(63, 102, 85, .3);
    opacity: 0; translate: -50% 12px; pointer-events: none; transition: opacity .4s, translate .4s var(--ease);
}
.t-auto.show { opacity: 1; translate: -50% 0; pointer-events: auto; }
.t-auto.paused { background: rgba(78, 96, 88, .94); }
.t-auto.paused .t-auto__dot { animation: none; opacity: .5; }
/* 切換狀態時提示寬度固定，按鈕不會從游標底下跳開：進度條與按鈕隱藏時保留位置，文字欄固定為最長文案寬度 */
.t-auto.paused .t-auto__bar, .t-auto.done .t-auto__off { visibility: hidden; }
.t-auto__text { min-width: 11em; }
.t-auto__off {
    margin-left: 2px; padding: 4px 12px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px;
    background: transparent; color: #fff; font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer;
    transition: background .2s, color .2s;
}
.t-auto__off:hover { background: #fff; color: var(--green-deep); }
.t-auto__off:focus-visible { outline: 2px solid #ffd2ad; outline-offset: 2px; }
.t-static .t-auto { display: none; }
.t-auto__dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd2ad; animation: t-autodot 1.4s ease-in-out infinite; }
@keyframes t-autodot { 50% { opacity: .3; transform: scale(.7); } }
.t-auto__bar { width: 46px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.t-auto__bar i { display: block; height: 100%; background: #ffd2ad; transform-origin: 0 50%; transform: scaleX(var(--hold, 0)); }

/* ── 手機 ── */
@media (max-width: 860px) {
    .t-brand span { font-size: .95rem; }
    .t-3d .t-copylayer::before {
        width: 100%; top: auto; height: 58%;
        background: linear-gradient(0deg, rgba(250, 241, 225, .98) 0%, rgba(250, 241, 225, .92) 52%, rgba(250, 241, 225, 0) 100%);
    }
    .t-3d .t-copy {
        left: 18px; right: 18px; width: auto; top: auto; bottom: calc(28px + env(safe-area-inset-bottom));
        transform: translateY(calc((1 - var(--o, 0)) * 22px));
    }
    .t-copy__title { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
    .t-copy__quote { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
    .t-copy__body { margin-top: 10px; }
    .t-copy__list { gap: 6px; margin-top: 12px; font-size: .95rem; }
    .t-copy__qa { gap: 8px; margin-top: 12px; font-size: .92rem; }
    .t-copy__qa div { padding: 8px 12px; }
    .t-copy__cta { margin-top: 16px; }
    .t-foot { margin-top: 14px; font-size: .74rem; }
    .t-route { right: 4px; gap: 0; top: 40%; }
    .t-route button { width: 24px; height: 24px; }
    .t-route i { width: 8px; height: 8px; }
    .t-route span { display: none; }
    .t-hint { bottom: auto; top: 64px; }
    .t-auto { bottom: auto; top: 64px; font-size: .8rem; }
    .t-auto__off { padding: 6px 12px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}