/* ============================================================
   tour.css — F5 新用戶引導動線（onboarding tour）「手繪便條版」
   設計：紅蠟筆手繪線「圈住」當前目標（主角）+ 旁邊一張手寫小便條（手寫字體、極簡）+ 塗鴉箭頭。
   不是規矩彈窗。蠟筆抖動用 SVG filter（feTurbulence+feDisplacementMap）。
   ============================================================ */

.tour-root {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    --crayon: #FF4D4D;                                  /* 紅麥克筆 — 圈重點 */
    --f-hand: 'LXGW WenKai TC', 'Noto Sans TC', cursive; /* 手寫繁中楷體 */
}
.tour-root.is-open { display: block; }

/* 暗背景：輕一點（手繪註記感、非厚重 modal）。置中步驟用整片、spotlight 步驟靠 spot 的 box-shadow */
.tour-backdrop {
    position: fixed; inset: 0; z-index: 1;
    background: rgba(10, 15, 31, 0.72);
    display: none;
    animation: tourFade 0.2s ease-out;
}
.tour-root.is-center .tour-backdrop { display: block; }

/* 點擊攔截層 */
.tour-catch { position: fixed; inset: 0; z-index: 1; }

/* spotlight 挖洞：box-shadow 把周圍變暗（輕） */
.tour-spot {
    position: fixed; z-index: 2;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(10, 15, 31, 0.72);
    pointer-events: none;
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-root.is-center .tour-spot { display: none; }

/* ── 紅蠟筆手繪圈：把目標框起來（主角）── */
.tour-spot::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 4px solid var(--crayon);
    border-radius: 20px 26px 16px 24px / 24px 16px 26px 20px;   /* 每角不同、手繪不規則 */
    filter: url(#tourSketch);                                    /* 蠟筆抖動 */
    animation: tourCircleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), tourPulse 1.9s 0.5s ease-in-out infinite;
}

/* ── 手寫註記（無盒子）：純蠟筆手寫字漂在變暗的畫面上 ──
   不用任何底色/邊框/卡片。字本身用暖白（像白蠟筆）+ 陰影襯底、壓在 dim 過的畫面上才讀得到。
   紅色只給「圈、箭頭、動作（下一步/連結）」當蠟筆重點。 */
.tour-note {
    position: fixed;
    z-index: 3;
    width: max-content;
    max-width: min(236px, calc(100vw - 32px));
    padding: 2px;
    transform: rotate(-1.5deg);                /* 手寫的微歪 */
    font-family: var(--f-hand);
    outline: none;
    animation: tourNoteIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tour-note__text {
    font-family: var(--f-hand);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--crayon);                      /* 紅蠟筆手寫（與圈/箭頭同一支筆）*/
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.98), 0 0 1px rgba(0, 0, 0, 1);
    letter-spacing: 0.01em;
}
.tour-note__link {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--f-hand);
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--crayon);
    text-decoration: underline wavy;
    text-underline-offset: 3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.tour-note__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
}
.tour-note__nav { display: inline-flex; align-items: center; gap: var(--sp-4); }
.tour-note__skip,
.tour-note__back,
.tour-note__next {
    font-family: var(--f-hand);
    font-size: 1.06rem;
    font-weight: 700;
    background: none;
    border: none;
    padding: 4px 2px;
    cursor: pointer;
    min-height: 32px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.tour-note__skip { color: rgba(255, 248, 231, 0.7); }
.tour-note__back { color: #FFF8E7; font-size: 1.25rem; line-height: 1; }
.tour-note__skip:hover,
.tour-note__back:hover { color: #FFFFFF; }
.tour-note__next {
    color: var(--crayon);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tour-note__next:hover { filter: brightness(1.12); }

/* ── 塗鴉手繪箭頭：從便條指向被圈的目標 ── */
.tour-note__arrow {
    position: absolute;
    width: 34px;
    height: 26px;
    overflow: visible;
    display: none;
    pointer-events: none;
    filter: url(#tourSketch);
}
.tour-note__arrow path { stroke: var(--crayon); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tour-note--below .tour-note__arrow { display: block; top: -22px; }                       /* 便條在目標下方 → 箭頭朝上 */
.tour-note--above .tour-note__arrow { display: block; bottom: -22px; transform: scaleY(-1); } /* 便條在上方 → 翻轉朝下 */

@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourNoteIn {
    0%   { opacity: 0; transform: rotate(-1.5deg) translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: rotate(-1.5deg) translateY(0) scale(1); }
}
@keyframes tourCircleIn {
    0%   { opacity: 0; transform: scale(0.8) rotate(-4deg); }
    60%  { opacity: 1; transform: scale(1.05) rotate(1.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes tourPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.40); }
    50%      { box-shadow: 0 0 0 9px rgba(255, 77, 77, 0); }
}

/* reduced-motion：關閉抖動以外的動態 */
@media (prefers-reduced-motion: reduce) {
    .tour-spot { transition: none !important; }
    .tour-spot::after, .tour-note, .tour-backdrop { animation: none !important; }
}