/* ============================================================
   INFUCOCO V6 — 沉浸式場景 · 翻轉雜誌
   全屏照片沉浸 + 不對稱雜誌網格 + 3D 翻轉 + 視差 + 斜切
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');
:root{
  --paper:#FFF8FD;        /* 粉白卡片底 */
  --paper2:#F7E8FF;
  --card:#FFFDF7;
  --card-grad:radial-gradient(circle at 18% 14%,rgba(255,255,255,.82),transparent 38%),radial-gradient(circle at 86% 86%,rgba(255,183,132,.30),transparent 46%),radial-gradient(circle at 72% 20%,rgba(255,220,235,.38),transparent 42%),linear-gradient(135deg,#FFE7D2 0%,#FFD9E6 34%,#FFF8F2 62%,#FFE3EE 100%);
  --txt:#1C1A15;          /* 墨黑字 */
  --soft:#6E6757;
  --accent:#E36B00;       /* 暖橘 */
  --accent2:#7A5CC8;      /* 紫 */
  --mint:#3E9B6F;
  --ink:#181510;
  --coffee:#5A3A22;       /* 深咖啡：文章標題 */
  --line:rgba(28,26,21,.12);
  --shadow:0 18px 50px rgba(24,21,16,.16);
  --radius:22px;
  /* 遊戲引擎通用變數（補齊，避免背景透明）*/
  --bg2:#FBF3E4;                 /* 遊戲場地底 */
  --chip:#EFE4CC;                /* 空格/按鈕底 */
  --grad:linear-gradient(120deg,#E36B00,#7A5CC8); /* 主漸層 */
  --btn-grad:linear-gradient(100deg,#FFD6AE 0%,#FFB7C8 42%,#D6C6F5 100%);
  --btn-ink:#4A2433;
  --soft-txt:#8a8170;            /* 輔助說明字 */
}
html{scroll-behavior:smooth}
body{background:linear-gradient(90deg,#FFD9E8 0%,#FFF1F5 32%,#FFFFFF 62%,#FFFFFF 100%);background-attachment:fixed;color:var(--txt);font-family:"Fredoka","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.7;overflow-x:hidden}
a{color:#000;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1240px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

/* ===== 導覽（極簡紙感，浮在照片上）===== */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(100deg,#E36B00 0%,#B85B3A 38%,#8A52C0 72%,#5F3FA8 100%);border-bottom:none;box-shadow:0 2px 18px rgba(0,0,0,.22)}
.site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;background:linear-gradient(180deg,rgba(95,63,168,.75),rgba(95,63,168,0));pointer-events:none;z-index:59}
.header-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;height:72px}
.logo{flex:0 0 168px;text-decoration:none;cursor:pointer;font-family:'Fredoka','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;font-weight:900;font-size:1.9rem;letter-spacing:.02em;color:#fff;line-height:1.05;text-align:left;white-space:nowrap}
.logo small{display:block;font-size:1rem;font-weight:800;color:rgba(255,255,255,.92);letter-spacing:.12em;margin-top:3px;text-align:left}
.logo .rip{display:inline-block;animation:ripWave 2s ease-in-out infinite}
.logo .rip:nth-child(1){animation-delay:0s}
.logo .rip:nth-child(2){animation-delay:.1s}
.logo .rip:nth-child(3){animation-delay:.2s}
.logo .rip:nth-child(4){animation-delay:.3s}
.logo .rip:nth-child(5){animation-delay:.4s}
.logo .rip:nth-child(6){animation-delay:.5s}
.logo .rip:nth-child(7){animation-delay:.6s}
.logo .rip:nth-child(8){animation-delay:.7s}
@keyframes ripWave{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-6px) scale(1.06)}60%{transform:translateY(2px) scale(.98)}}
/* 全站 h1/h2 infucoco ripple + 漸層 */
.rt span{display:inline-block;color:#C44A00;animation:ripWave 2s ease-in-out infinite}
.rt span:nth-child(1){animation-delay:0s}
.rt span:nth-child(2){animation-delay:.1s}
.rt span:nth-child(3){animation-delay:.2s}
.rt span:nth-child(4){animation-delay:.3s}
.rt span:nth-child(5){animation-delay:.4s}
.rt span:nth-child(6){animation-delay:.5s}
.rt span:nth-child(7){animation-delay:.6s}
.rt span:nth-child(8){animation-delay:.7s}
.logo em{font-style:normal;color:#000}
.nav-links{display:flex;gap:2px;flex-wrap:nowrap;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-family:'Fredoka','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;color:#fff;font-weight:700;font-size:.88rem;line-height:1.4;padding:8px 10px;border-radius:30px;transition:.2s;white-space:nowrap;flex:0 0 auto}
.nav-links a:hover{background:rgba(255,255,255,.25);color:#fff;transform:rotate(-2deg)}
.nav-links a.active{background:#fff;color:#C2539A}
.nav-actions{margin-left:0;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:#5B3A99;cursor:pointer;font-size:.88rem;font-weight:800;transition:.2s;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{transform:rotate(10deg) scale(1.06);background:#6A48B0}
#tools-btn{width:48px;height:48px;font-size:.92rem;font-weight:900;letter-spacing:.04em;box-shadow:0 12px 26px rgba(59,32,110,.55),0 4px 10px rgba(59,32,110,.38)}
#tools-btn:hover{box-shadow:0 14px 30px rgba(59,32,110,.65),0 5px 12px rgba(59,32,110,.42)}
@media(max-width:900px){
  .header-inner{height:auto;padding:18px 24px;justify-content:center}
  .logo{flex:1 1 auto;font-size:1.35rem;text-align:center;white-space:nowrap}
  .logo small{display:inline;font-size:.85rem;letter-spacing:.04em;margin:0 0 0 6px;text-align:center}
  .nav-links{display:none}
  .icon-btn{width:36px;height:36px;font-size:.8rem}
  #tools-btn{width:42px;height:42px;font-size:.82rem}
}
@media(max-width:560px){
  .header-inner{padding:18px 20px}
  .logo{font-size:1.2rem}
  .logo small{font-size:.85rem;margin-left:4px}
  .nav-links{display:none}
  .icon-btn{width:34px;height:34px;font-size:.75rem}
  #tools-btn{width:40px;height:40px;font-size:.78rem}
}

/* Popover Dropdown（紙感） */
.popover-wrap{position:relative}
.popover-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:min(88vw,300px);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 18px 44px rgba(24,21,16,.22);z-index:70;display:none}
.popover-dropdown.open{display:block;animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.popover-dropdown__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.popover-dropdown__title{font-weight:900;font-size:1rem;color:#000}
.popover-dropdown__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.popover-dropdown__link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:10px;background:linear-gradient(90deg,#1E1B4B 0%,#3B2A7A 50%,#5B3A99 100%);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 10px rgba(30,27,75,.4),0 1px 3px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.25);font-size:.78rem;color:#fff;font-weight:900;text-align:center;transition:.2s;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.popover-dropdown__link:hover{background:linear-gradient(90deg,#2D2670 0%,#4A3690 50%,#6E4BC0 100%);filter:brightness(1.1);transform:translateY(-1px) scale(1.03);box-shadow:0 6px 16px rgba(30,27,75,.5),0 2px 4px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.2)}
.popover-dropdown__icon{font-size:1.1rem}
.popover-dropdown__foot{display:flex;gap:6px;margin-top:8px}
.popover-dropdown__chip{flex:1;padding:5px;border-radius:8px;border:1px solid var(--line);background:var(--paper2);color:var(--soft);font-size:.7rem;cursor:pointer;transition:.2s}
.popover-dropdown__chip:hover{color:#000;border-color:#000}

/* ===== 全屏沉浸式 Hero 場景 ===== */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5vh;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:heroZoom 22s ease-in-out infinite;z-index:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#181510}
@keyframes heroZoom{0%,100%{transform:scale(1.02)}50%{transform:scale(1.1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(24,21,16,.38) 0%,rgba(24,21,16,.28) 40%,rgba(24,21,16,.62) 100%)}
.hero-content{position:relative;z-index:3;text-align:center;color:#fff;padding:0 24px;max-width:760px}
.hero-stamp{display:inline-block;background:#fff;color:var(--ink);font-weight:900;padding:5px 16px;border-radius:4px;transform:rotate(-3deg);font-size:.76rem;margin-bottom:14px;box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.hero-title{font-family:'Fredoka','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;font-size:clamp(1.5rem,4.2vw,3.2rem);font-weight:900;letter-spacing:.01em;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.8);line-height:1;margin:26px 0 0;text-transform:lowercase}
.hero-title .hl{color:#FFE27A;text-shadow:0 4px 30px rgba(227,107,0,.6),0 2px 4px rgba(0,0,0,.9)}
.hero-title .rl{display:inline-block;transform:rotate(-3deg);color:#fff;margin:0 .1em}
.hero-sub{max-width:560px;margin:14px auto 20px;color:#fff;font-size:1rem;text-shadow:0 3px 14px rgba(0,0,0,.9);font-weight:600}
.hero-ctas{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;margin:0 auto}
.hero-ctas .btn.o,.hero-ctas .btn{font-family:'Fredoka','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;background:linear-gradient(135deg,#1E1B4B 0%,#3B2A7A 50%,#5B3A99 100%) !important;color:#fff !important;font-weight:700;font-size:.82rem;padding:7px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 12px rgba(30,27,75,.45),inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
.hero-ctas .btn:hover{transform:translateY(-2px);filter:brightness(1.15);box-shadow:0 10px 24px rgba(30,27,75,.55),0 4px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.hero-ctas .btn:active{transform:translateY(2px);box-shadow:0 2px 6px rgba(30,27,75,.4),inset 0 -1px 2px rgba(0,0,0,.2)}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.8rem;z-index:3;letter-spacing:.2em;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}

/* ===== 紙感按鈕 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:40px;font-weight:900;font-size:1rem;background:var(--btn-grad);background-size:160% 160%;color:var(--btn-ink);border:1px solid rgba(74,36,51,.12);cursor:pointer;transition:.22s;box-shadow:0 10px 30px rgba(186,140,215,.22)}
.btn:hover{transform:translateY(-3px) rotate(-1deg);filter:brightness(1.05)}
.btn.o,.btn.w,.btn.ghost,.btn.dark{background:var(--btn-grad);background-size:160% 160%;color:var(--btn-ink);border-color:rgba(74,36,51,.12)}
.btn.ghost{border:2px solid rgba(74,36,51,.22)}
.btn.ghost:hover{filter:brightness(1.08)}

/* ===== 斜切分區 ===== */
.skew-sec{position:relative;padding:90px 0;background:rgba(255,255,255,.42)}
.skew-sec:nth-of-type(even){background:rgba(255,241,245,.48)}
.skew-sec::before{content:"";position:absolute;left:0;right:0;top:-44px;height:90px;background:rgba(255,255,255,.42);clip-path:polygon(0 100%,100% 0,100% 100%);}
.skew-sec:nth-of-type(even)::before{background:rgba(255,241,245,.48)}

/* ===== 巨型章節標題 ===== */
.section-title{margin-bottom:34px;position:relative}
.sec-no{display:inline-block;font-size:1rem;font-weight:900;color:#000;letter-spacing:.25em;text-transform:uppercase;margin-bottom:10px}
.section-title h2{font-size:clamp(2rem,5.5vw,4rem);font-weight:900;line-height:1.3;letter-spacing:.04em}
.section-title h1{font-size:clamp(2rem,5.5vw,4rem);font-weight:900;line-height:1.3;letter-spacing:.04em}
h3{letter-spacing:.03em;line-height:1.35}
.article-body{line-height:2;font-size:1.08rem}
.article-head h1{color:var(--coffee)}
.article-body h2{font-size:1.35rem;font-weight:900;margin:30px 0 14px;color:var(--coffee);border-left:4px solid var(--accent);padding-left:12px}
.article-body h3{font-size:1.1rem;font-weight:800;margin:18px 0 10px;color:var(--coffee)}
.article-body p{margin:10px 0;color:var(--txt)}
.section-title h2 .sl{color:#000}
.section-title h2 .rl{display:inline-block;transform:rotate(-4deg)}
.section-title .lead{color:var(--soft);max-width:560px;margin-top:18px;line-height:1.9}

/* ===== Bento 不對稱網格（更特殊版型）===== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:18px}
.bento .card-b{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--card-grad);border:1px solid var(--line);box-shadow:var(--shadow);transition:.3s;cursor:pointer}
.bento .card-b:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 26px 70px rgba(24,21,16,.22)}
.bento .card-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.bento .card-b:hover img{transform:scale(1.08)}
.bento .card-b .ovl{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(24,21,16,.72));display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff}
.bento .card-b .ovl .tag{font-size:.72rem;font-weight:800;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.bento .card-b .ovl h3{font-size:1.3rem;font-weight:900}
.bento .card-b .ovl p{font-size:.84rem;color:rgba(255,255,255,.85)}
.bento .big{grid-column:span 2;grid-row:span 2}
.bento .w2{grid-column:span 2}
.bento .h2{grid-row:span 2}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento .big{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento .big,.bento .w2{grid-column:span 1}}

/* ===== 3D 翻轉卡 ===== */
.flip-wrap{perspective:1200px}
.flip{position:relative;width:100%;height:320px;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;cursor:pointer}
.flip-wrap:hover .flip,.flip.turn{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.flip .front{background:var(--card);display:grid;place-items:center;border:1px solid var(--line)}
.flip .front img{width:100%;height:100%;object-fit:cover}
.flip .front .fcap{position:absolute;bottom:0;left:0;right:0;background:rgba(24,21,16,.6);color:#fff;padding:12px 16px;font-weight:800;font-size:.95rem}
.flip .back{background:var(--ink);color:#fff;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center}
.flip .back h3{color:var(--accent);margin-bottom:10px;font-size:1.3rem}
.flip .back p{color:rgba(255,255,255,.85);font-size:.9rem}

/* ===== 遊戲卡（紙感）===== */
.game-card{display:block;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--card-grad);transition:.3s;box-shadow:var(--shadow)}
.game-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 26px 60px rgba(24,21,16,.2)}
.game-thumb{height:160px;background-size:cover;background-position:center;display:flex;align-items:flex-start;justify-content:space-between;padding:12px}
.gcat{background:rgba(24,21,16,.7);color:#fff;padding:4px 10px;border-radius:20px;font-size:.74rem;font-weight:900}
.gdiff{background:rgba(255,255,255,.85);color:var(--ink);padding:4px 10px;border-radius:20px;font-size:.74rem;font-weight:900}
.gnum{display:none}
.game-info{padding:14px 16px}
.game-info h4{font-size:1.02rem}
.game-info p{color:var(--soft);font-size:.84rem;margin-top:4px}

/* ===== 播放器 ===== */
.game-stage{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.game-stage > img{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--card);border-radius:var(--radius);display:block}
.game-start{text-align:center;padding:40px 20px}
.game-start h3{font-size:2.2rem;color:#000;margin:10px 0}
.game-start p{color:var(--soft);margin-bottom:20px}
.g-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:900}
.g-info{color:#000}
.score{color:var(--mint)}
.g-opt{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.g-opt button{padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--paper2);color:var(--txt);font-size:1.05rem;cursor:pointer;font-weight:700;transition:.2s}
.g-opt button:hover{border-color:var(--accent);transform:scale(1.02)}
.g-opt button.correct{background:var(--mint);color:#fff;border-color:var(--mint)}
.g-opt button.wrong{background:#E8605A;border-color:#E8605A;color:#fff}
.g-emojis{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.g-item{padding:18px;border:2px solid var(--line);border-radius:14px;font-size:2rem;cursor:pointer;transition:.2s;background:var(--card)}
.g-item:hover{border-color:var(--accent);transform:scale(1.06)}

/* ===== 金句 / 寓言 ===== */
.quote-main{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800;line-height:1.45;text-align:center;padding:40px 26px;background:var(--card-grad);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.quote-main .mark{color:#000}
.card-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.q-card{border-left:5px solid var(--accent)}
.n-num{font-size:1.4rem;font-weight:900;color:#000}
.card-tag{display:inline-block;padding:4px 12px;border-radius:20px;background:rgba(227,107,0,.12);color:#000;font-size:.85rem;font-weight:900;margin-bottom:8px}
#q-list{scroll-margin-top:96px}
.quote-pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:28px 0 0}
.quote-pager .qp-btn{padding:8px 16px;font-size:.84rem}
.quote-pager .qp-btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.quote-pager .qp-num{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card-grad);color:var(--txt);font-weight:800;font-size:.9rem;cursor:pointer;transition:.2s}
.quote-pager .qp-num:hover{transform:translateY(-2px)}
.quote-pager .qp-num.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
@media(max-width:560px){.quote-pager{gap:6px}.quote-pager .qp-num{width:34px;height:34px;font-size:.84rem}.quote-pager .qp-btn{padding:7px 12px;font-size:.78rem}}
.opt-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.opt-row button{padding:12px 18px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--txt);font-weight:800;cursor:pointer;transition:.2s}
.opt-row button:hover{border-color:var(--accent);transform:scale(1.05)}
.opt-row button.sel{background:var(--ink);color:#fff;border-color:transparent}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.center{text-align:center}
.mt{margin-top:30px}

/* ===== Footer ===== */
.site-footer{background:linear-gradient(120deg,#081126 0%,#172A55 48%,#05070D 100%);color:#fff;margin-top:44px;padding:26px 0 12px;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#FFE27A,#24427A,#05070D)}
.footer-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:16px 22px}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:14px 18px}}
.footer-col h4{color:#FFE27A;margin-bottom:6px;font-weight:900;font-size:1rem !important;text-shadow:0 1px 6px rgba(0,0,0,.18)}
.footer-col p{color:rgba(255,255,255,.88);font-size:.82rem !important;line-height:1.6;margin-top:6px !important}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:4px}
.footer-col a{color:rgba(255,255,255,.88);transition:.2s}
.footer-col a:hover{color:#FFE27A}
.footer-drop summary{color:#FFE27A;margin-bottom:6px;font-weight:900;font-size:1rem;cursor:pointer;list-style:none;display:flex;justify-content:center;align-items:center;gap:6px;text-shadow:0 1px 6px rgba(0,0,0,.18)}
.footer-drop summary::-webkit-details-marker{display:none}
.footer-drop summary::after{content:"＋";font-weight:900;color:#FFE27A;transition:transform .2s;display:inline-block}
.footer-drop[open] summary::after{transform:rotate(45deg)}
.footer-drop ul{margin-top:8px}
.footer-credit{max-width:1240px;margin:12px auto 0;padding:10px 24px 0;border-top:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.86);font-size:.82rem;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.footer-credit a{color:#fff;font-weight:800;text-decoration:underline}
.footer-bottom{max-width:1240px;margin:8px auto 0;padding:0 24px;color:rgba(255,255,255,.82);font-size:.75rem}
.footer-notice{max-width:1240px;margin:8px auto 0;padding:0 24px 14px;color:rgba(255,255,255,.62);font-size:.72rem;line-height:1.9;text-align:center}

/* ===== 其他 ===== */
.breadcrumb{position:relative;z-index:2;color:var(--soft);font-size:.85rem;margin:10px 0 6px;padding:0 24px;max-width:1240px;margin-left:auto;margin-right:auto}
.breadcrumb a{color:#000}
.breadcrumb span.sep{margin:0 6px;color:var(--soft)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.toolbar-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.filter-chip{padding:8px 18px;border-radius:30px;border:1px solid var(--line);background:var(--card);color:var(--soft);cursor:pointer;font-weight:800;font-size:.86rem;transition:.2s}
.filter-chip:hover{color:#000;border-color:#000}
.filter-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.reveal{opacity:0;transform:translateY(26px);transition:.6s}
.reveal.in{opacity:1;transform:none}
.d2{transition-delay:.08s}.d3{transition-delay:.16s}.d4{transition-delay:.24s}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 24px;border-radius:30px;font-weight:800;z-index:99;display:none;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#particles{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5}

/* ===== 白話詩與遊戲小詩 ===== */
.poem{margin-top:18px;text-align:center;color:#111111;line-height:2.1}
.poem .verse{font-size:1.02rem;margin:0 0 14px;color:#111111}
.game-poem{margin:20px 0 4px;padding:22px 24px;border-radius:18px;background:var(--card-grad);text-align:center;color:var(--txt);font-size:1.18rem;font-weight:800;line-height:1.9}
.game-poem span{display:block}
.game-scene-poem{text-align:center}
.game-scene-poem .verse{font-size:.98rem}
.game-note{margin-top:18px;text-align:center;color:var(--soft);font-size:.92rem;line-height:1.9}
.tongyan-close{margin-top:28px;padding:18px;border-radius:14px;background:var(--chip);color:var(--soft)}
.game-info p{line-height:1.7}

/* ===== 全站置中編排 · 會員與聯絡表單 ===== */
.section-title{text-align:center}
.section-title .lead{margin-left:auto;margin-right:auto}
.btn-row,.toolbar-row{justify-content:center}
.hero-content,.game-start,.quote-main,.game-poem,.game-scene-poem,.game-note,.game-info{text-align:center}
.game-info h4,.game-info p{text-align:center}
.card-b{text-align:center}
.card-b .ovl{align-items:center;text-align:center}
.poem,.poem .verse{text-align:center}
.site-footer{text-align:center}
.footer-inner{text-align:center}
.footer-col ul{text-align:center}
.footer-col li{display:inline-block;margin:0 8px 4px}
.footer-credit{justify-content:center;text-align:center}

.member-hero{max-width:760px;margin:0 auto;text-align:center}
.member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px;margin:0 auto}
@media(max-width:900px){.member-grid{grid-template-columns:1fr}}
.member-card{display:flex;flex-direction:column;align-items:center;padding:30px 24px;text-align:center;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-height:320px}
.member-card h3{font-size:1.5rem;margin:12px 0 6px;color:var(--ink)}
.member-card p{color:var(--soft);margin:12px 0 22px;line-height:1.9;flex:0 1 auto}
.member-card .plan-price{font-weight:900;color:#000;font-size:1.2rem;margin:0 0 14px;line-height:1.6}
.member-card ul.benefits{list-style:none;text-align:left;margin:0 0 20px;width:100%;display:flex;flex-direction:column;gap:9px}
.member-card ul.benefits li{position:relative;padding-left:18px;color:var(--soft);font-size:.88rem;line-height:1.7}
.member-card ul.benefits li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--accent2)}
.member-card .btn{width:100%;justify-content:center;margin-top:auto}
.member-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto 38px}
.member-why .why-card{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px;text-align:center}
.member-why .why-card h3{font-size:1.35rem;font-weight:900;color:#000;margin-bottom:8px}
.member-why .why-card p{color:var(--soft);font-size:.88rem;line-height:1.85;margin:0}
@media(max-width:900px){.member-why{grid-template-columns:1fr}}
.member-form-card{max-width:680px;margin:36px auto 0;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px;text-align:center}
.member-plan-pick{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.member-plan-pick label{position:relative;cursor:pointer;padding:10px 16px;border:2px solid var(--line);border-radius:999px;background:var(--paper2);font-weight:800;text-align:center}
.member-plan-pick input{position:absolute;opacity:0;pointer-events:none}
.member-plan-pick label:has(input:checked){border-color:#000;background:#fff3e0;color:#000}
.form-field{margin:18px auto;max-width:500px;text-align:center}
.form-field label{display:block;font-weight:900;margin-bottom:8px;text-align:center}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:13px 16px;border:2px solid var(--line);border-radius:16px;background:var(--paper);font:inherit;color:var(--txt);text-align:center}
.form-field textarea{min-height:110px;text-align:left;resize:vertical}
.form-field .hint{display:block;color:var(--soft);font-size:.82rem;margin-top:6px}
.form-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.form-note{color:var(--soft);font-size:.88rem;margin-top:14px}
.form-success{display:none;margin-top:24px;padding:22px;border-radius:18px;background:#F2FFF7;border:2px solid var(--mint);text-align:center}
.form-success.show{display:block}
.form-success h3{color:var(--mint);margin-bottom:10px}
.shop-card .ovl{gap:4px;padding:18px;align-items:flex-end;justify-content:flex-end;text-align:right}
.shop-card .ovl h3{font-size:1.05rem;font-weight:900;margin:0}
.shop-card .ovl p{font-size:.86rem;color:rgba(255,255,255,.88);margin:0}
.shop-card .ovl .shop-desc{font-size:.78rem;color:rgba(255,255,255,.82);margin:3px 0 0;line-height:1.6}
.shop-cta{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-weight:800;font-size:.82rem;text-align:right;align-self:flex-end}
.hero-transition{position:absolute;inset:0;background-size:cover;background-position:center;z-index:2;pointer-events:none;transition:opacity 1.4s ease}
.hero-transition.fade{opacity:0}

/* ===== 全站頁面橫幅（乾淨圖片，不疊文字；標題文字置於圖片下方） ===== */
.page-banner{width:100%;overflow:hidden}
.page-banner img{width:100%;height:clamp(400px,70vh,720px);object-fit:cover;object-position:center;display:block}
.page-banner + .skew-sec{padding-top:15px}
.page-banner + .skew-sec::before{display:none}
.banner-ctas{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0 0}
@media(max-width:560px){.page-banner img{height:320px}}
.card-b{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--card-grad);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--txt)}
.card-b img{width:100%;height:260px;object-fit:cover}
.card-b .ovl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:20px;color:#fff;background:linear-gradient(180deg,transparent 40%,rgba(24,21,16,.72))}

/* ===== 頁首：全站單列固定，字級與位置一致 ===== */
.site-header{text-align:left}
.header-inner{justify-content:space-between;flex-direction:row;gap:16px;text-align:left}
.logo{margin:0;text-align:left}
.nav-links{justify-content:center;align-items:center;margin:0;gap:2px;flex-wrap:nowrap;min-width:0}
.nav-actions{margin-left:0;justify-content:flex-end}
.breadcrumb{text-align:center}
#join{scroll-margin-top:96px}

/* ===== 全站互動：測驗、金句、遊戲、提示 ===== */
.quiz-wrap{max-width:680px;margin:0 auto;text-align:center}
.quiz-progress{height:8px;border-radius:99px;background:rgba(255,255,255,.55);overflow:hidden;margin:18px auto;max-width:520px}
.quiz-progress>div{height:100%;background:linear-gradient(90deg,#FF9EC8,#9F70D8);width:0%;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.quiz-card{background:var(--card-grad);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);border:1px solid var(--line);min-height:320px;position:relative;text-align:center}
.quiz-q{font-size:1.3rem;font-weight:800;margin-bottom:20px;line-height:1.5;text-align:center}
.quiz-opt{display:block;width:100%;text-align:center;padding:16px 20px;margin:10px auto;border-radius:14px;border:2px solid var(--line);background:var(--paper);font-size:1rem;cursor:pointer;transition:all .2s;color:var(--txt)}
.quiz-opt:hover{border-color:var(--accent2);transform:translateY(-2px)}
.quiz-opt.picked{border-color:var(--accent2);background:#fff0fa}
.quiz-tag{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--paper2);font-size:.8rem;color:var(--soft);margin-bottom:14px}
.quiz-result{text-align:center;padding:30px}
.quiz-result .emoji{font-size:4rem;margin-bottom:10px}
.quiz-result h3{font-size:1.6rem;margin:8px 0}
.quiz-result p{color:var(--soft);line-height:1.8;margin:10px 0}
.quiz-start-img{width:100%;height:auto;object-fit:cover;object-position:center;border-radius:18px;margin:0 auto 18px;display:block}
.quiz-fade{animation:quizFade .4s ease}
@keyframes quizFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.quiz-nian{color:var(--accent);font-weight:800;text-decoration:none;display:inline-block;position:relative;transition:transform .25s ease}
.quiz-nian::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(255,158,200,.55),rgba(159,112,216,.25) 60%,transparent);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.quiz-nian:hover{transform:scale(1.18)}
.quiz-nian:hover::after{animation:quizRipple .55s ease-out forwards}
@keyframes quizRipple{0%{width:0;height:0;opacity:.55}100%{width:150px;height:150px;opacity:0}}

.game-play-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0 16px}
.game-arena-mount{max-width:560px;margin:0 auto}
.game-arena-mount .g-toolbar{justify-content:center;text-align:center}
.game-arena-mount .g-arena,.game-arena-mount .arena{position:relative;width:100%;max-width:540px;height:420px;margin:10px auto 0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--paper2)}
.game-arena-mount .g-holes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:380px;width:100%;margin:0 auto}
.game-arena-mount .g-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:420px;width:100%;margin:0 auto}
.game-arena-mount .g-opt{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:500px;margin-left:auto;margin-right:auto}
.game-arena-mount .g-opt button{padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--paper2);color:var(--txt);font-size:1.05rem;cursor:pointer;font-weight:700;transition:.2s}
.game-arena-mount .g-opt button:hover{border-color:var(--accent2);transform:scale(1.02)}
.game-arena-mount .g-opt button.correct{background:var(--mint);color:#fff;border-color:var(--mint)}
.game-arena-mount .g-opt button.wrong{background:#E8605A;border-color:#E8605A;color:#fff}
.game-arena-mount .g-emojis{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.game-arena-mount .g-item{padding:18px;border:2px solid var(--line);border-radius:14px;font-size:2rem;cursor:pointer;transition:.2s;background:var(--card)}
.game-arena-mount .g-item:hover{border-color:var(--accent2);transform:scale(1.06)}
.game-status{text-align:center;color:var(--soft);margin-top:14px;min-height:24px}
.game-filter-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.filter-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 24px;border-radius:30px;font-weight:800;z-index:99;display:none;box-shadow:0 10px 30px rgba(0,0,0,.3);text-align:center}
#toast.show{display:block}
.flip-wrap{cursor:pointer}
@media(max-width:560px){.game-arena-mount .g-arena,.game-arena-mount .arena{height:320px}.game-arena-mount .g-cards{grid-template-columns:repeat(3,1fr)}}

/* 商品卡：品名、價格與按鈕統一靠右、置底 */
.card-b.shop-card .ovl{align-items:flex-end;justify-content:flex-end;text-align:right}
.card-b.shop-card .ovl h3,.card-b.shop-card .ovl p{text-align:right;margin-left:auto}
.card-b.shop-card .shop-cta{align-self:flex-end;display:inline-block;text-align:right}

/* 全站按鈕：橘紅紫橫向漸層 */
.shop-cta,.filter-chip,.quiz-opt,.g-opt button,.game-arena-mount .g-opt button,.opt-row button,.popover-dropdown__chip{
  background:var(--btn-grad);
  background-size:160% 160%;
  color:var(--btn-ink);
  border:1px solid rgba(74,36,51,.12);
  box-shadow:0 8px 22px rgba(186,140,215,.20);
}
.icon-btn:hover,.shop-cta:hover,.filter-chip:hover,.quiz-opt:hover,.g-opt button:hover,.game-arena-mount .g-opt button:hover,.opt-row button:hover,.popover-dropdown__chip:hover,.popover-dropdown__link:hover{filter:brightness(1.05)}
.shop-cta{padding:7px 14px;border-radius:999px;font-weight:800;font-size:.82rem;text-align:right}
.filter-chip{padding:8px 18px;border-radius:30px;font-weight:800;font-size:.86rem;cursor:pointer}
.filter-chip.on{background:var(--btn-grad);color:var(--btn-ink);border-color:rgba(255,255,255,.55);box-shadow:0 8px 24px rgba(216,58,86,.32)}
.quiz-opt{display:block;width:100%;text-align:center;padding:16px 20px;margin:10px auto;border-radius:14px;font-size:1rem;cursor:pointer;transition:all .2s}
.quiz-opt.picked{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.45),0 10px 26px rgba(122,92,200,.3)}
.g-opt button,.game-arena-mount .g-opt button{padding:14px;border-radius:14px;font-size:1.05rem;cursor:pointer;font-weight:700;transition:.2s}
.g-opt button.correct,.game-arena-mount .g-opt button.correct{background:var(--mint);color:#fff;border-color:var(--mint)}
.g-opt button.wrong,.game-arena-mount .g-opt button.wrong{background:#E8605A;border-color:#E8605A;color:#fff}
.opt-row button{padding:12px 18px;border-radius:16px;font-weight:800;cursor:pointer;transition:.2s}
.opt-row button.sel{background:var(--btn-grad);color:var(--btn-ink);border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.popover-dropdown__chip{flex:1;padding:8px;border-radius:12px;font-size:.78rem;cursor:pointer}

/* ===== 右下角單一浮動群組 (回首頁／上一頁／LINE／選單) ===== */
.float-actions{position:fixed;right:16px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:center}
/* 主按鈕列：單一深色圓角膠囊容器，裡面橫排 4 個按鈕 */
.float-actions .fab-bar{display:flex;flex-direction:row;gap:8px;align-items:center;background:rgba(28,26,21,.85);backdrop-filter:blur(12px);padding:8px 12px;border-radius:50px;box-shadow:0 8px 28px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}
.float-actions .fab-bar a,.float-actions .fab-bar button{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;text-decoration:none;border:none;cursor:pointer;transition:.2s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.float-actions .fab-bar a.home{background:linear-gradient(135deg,#FF8C42,#E36B00);color:#fff}
.float-actions .fab-bar a.line-btn{width:auto;padding:0 18px;border-radius:40px;background:#06C755;color:#fff;font-size:.9rem;font-weight:900;letter-spacing:.05em;box-shadow:0 4px 14px rgba(6,199,85,.4)}
.float-actions .fab-bar button.back{background:#fff;color:#1C1A15}
.float-actions .fab-bar button.menu{background:#fff;color:#1C1A15}
.float-actions .fab-bar a:hover,.float-actions .fab-bar button:hover{transform:scale(1.1)}
.float-actions.open .fab-bar button.menu::after{content:"✕";font-size:1.3rem}
.float-actions .fab-bar button.menu::after{content:"☰";font-size:1.3rem}
/* 展開選單 */
.float-actions .nav-list{display:none !important;flex-direction:column;gap:6px;align-items:center}
.float-actions.open .nav-list{display:flex !important}
.float-actions .nav-list a{display:inline-flex;align-items:center;justify-content:center;width:220px;padding:12px 0;border-radius:40px;font-size:.95rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#8A52C0 0%,#6B3FA8 100%);box-shadow:0 6px 18px rgba(59,32,110,.35);line-height:1.2;white-space:nowrap;text-align:center;text-decoration:none;letter-spacing:.05em}
.float-actions .nav-list a:hover{transform:translateY(-2px);filter:brightness(1.15);box-shadow:0 10px 26px rgba(59,32,110,.5)}
@media(max-width:900px){
  .float-actions{right:10px;bottom:14px;gap:8px}
  .float-actions .fab-bar{gap:6px;padding:6px 10px}
  .float-actions .fab-bar a,.float-actions .fab-bar button{width:38px;height:38px;font-size:1rem}
  .float-actions .fab-bar a.line-btn{padding:0 14px;font-size:.8rem}
  .float-actions .nav-list a{width:200px;padding:11px 0;font-size:.95rem}
}

/* ===== 全域響應式文字 RWD ===== */
.rt{white-space:nowrap}
.rt span{white-space:nowrap}
.section-title h2 .rt,.section-title h1 .rt{font-size:.82em}
.section-title h2 .rl,.section-title h1 .rl{font-size:.88em}
@media(max-width:900px){
  body{font-size:15px}
  .container{padding-left:16px;padding-right:16px}
  h1,h2,h3,h4{line-height:1.3}
  p{font-size:.95rem;line-height:1.7}
  .lead{font-size:1rem!important}
  .card h3{font-size:1.05rem;line-height:1.4}
  .card p{font-size:.85rem;line-height:1.6}
  .footer-inner{font-size:.85rem}
  .footer-credit{font-size:.78rem}
  .footer-notice{font-size:.75rem}
  .breadcrumb{font-size:.8rem}
  .tag{font-size:.72rem;padding:3px 10px}
  .btn,.cta{font-size:.9rem;padding:10px 20px}
  .section-title{padding:30px 16px}
  .ovl h3{font-size:1.1rem}
  .ovl p{font-size:.82rem}
  .section-title h2 .rt,.section-title h1 .rt{font-size:.72em}
  .section-title h2 .rl,.section-title h1 .rl{font-size:.82em}
}
@media(max-width:560px){
  body{font-size:14px}
  .container{padding-left:12px;padding-right:12px}
  .section-title h2,.section-title h1{font-size:clamp(1.5rem,6.5vw,2rem)}
  .hero-title{font-size:clamp(1.3rem,8vw,2rem)}
  p{font-size:.9rem}
  .card h3{font-size:.98rem}
  .card p{font-size:.8rem}
  .quote-main{font-size:1.15rem;padding:24px 16px}
  .footer-inner{grid-template-columns:1fr;font-size:.82rem}
  .footer-credit{font-size:.72rem}
  .footer-notice{font-size:.7rem}
  .btn,.cta{font-size:.82rem;padding:9px 16px}
  .section-title{padding:24px 12px}
  .ovl h3{font-size:.98rem}
  .ovl p{font-size:.76rem}
  .tag{font-size:.68rem;padding:2px 8px}
  .breadcrumb{font-size:.74rem}
  .section-title h2 .rt,.section-title h1 .rt{font-size:.65em}
  .section-title h2 .rl,.section-title h1 .rl{font-size:.78em}
}
/* ===== 工具下拉 frame（header 下方）===== */
.nav-tool-btn{font-family:'Fredoka','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;color:#fff;font-weight:700;font-size:.88rem;line-height:1.4;padding:8px 10px;border-radius:30px;transition:.2s;white-space:nowrap;flex:0 0 auto;background:none;border:0;cursor:pointer;display:inline-block}
.nav-tool-btn:hover{background:rgba(255,255,255,.25);color:#fff;transform:rotate(-2deg)}
.nav-tool-btn.open{background:#fff;color:#C2539A}
/* ===== Megamenu：icon + 簡潔樹狀排列（2026-10-29）===== */
.nav-tool-frame{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(88vw,300px);display:none;background:#fff;border-radius:18px;padding:14px;box-shadow:0 22px 60px rgba(24,21,16,.25);z-index:80;white-space:nowrap}
.nav-tool-frame.open{display:block;animation:pop .18s ease}
.mm-group{display:flex;flex-direction:column;gap:2px}
.mm-group__head{font-weight:900;font-size:.82rem;color:var(--accent);padding:2px 10px 10px;letter-spacing:.05em;border-bottom:1px solid var(--line);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mm-tree{position:relative;padding-left:18px}
.mm-tree::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.nav-tool-frame a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#2B2A26;font-weight:700;font-size:.88rem;font-family:'Fredoka','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;transition:.15s;text-decoration:none}
.mm-tree a::before{content:"";position:absolute;left:-13px;top:50%;width:9px;height:2px;background:var(--line);border-radius:2px}
.mm-tree a::after{content:"";position:absolute;left:-19px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#fff;border:2px solid var(--accent2);transition:.15s}
.nav-tool-frame a:hover{background:#FBF6EC;color:#B85B3A}
.mm-icon{font-size:1.05rem;width:24px;text-align:center;flex:0 0 24px;line-height:1}
.nav-dd-panel .mm-icon{font-size:1rem;width:22px;text-align:center;flex:0 0 22px;line-height:1}
/* ===== 工具百寶箱嵌入 frame（hero 下方，原地使用不跳頁） ===== */
.tool-embed-frame{ margin-top:24px; border-radius:16px; overflow:hidden; box-shadow:0 18px 40px -18px rgba(0,0,0,.35); background:#fff; border:1px solid rgba(0,0,0,.08); }
.tool-embed-frame iframe{ display:block; width:100%; height:1000px; border:0; }
@media(max-width:720px){ .tool-embed-frame iframe{ height:840px; } }
/* ===== 療癒 / 數位週邊 下拉（2026-10-29）===== */
.nav-dd{position:relative;display:inline-flex;flex:0 0 auto;align-items:center}
.nav-dd-btn{font-family:'Fredoka','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;color:#fff;font-weight:700;font-size:.88rem;line-height:1.4;padding:8px 10px;border-radius:30px;transition:.2s;white-space:nowrap;flex:0 0 auto;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.nav-dd-btn:hover{background:rgba(255,255,255,.25);color:#fff;transform:rotate(-2deg)}
.nav-dd-btn.open{background:#fff;color:#C2539A}
.nav-dd-arrow{font-size:.6em;opacity:.85}
.nav-dd-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);display:none;flex-direction:column;gap:2px;background:#fff;border-radius:14px;padding:8px;box-shadow:0 18px 44px rgba(24,21,16,.28);z-index:80;min-width:150px;white-space:nowrap}
.nav-dd-panel.open{display:flex;animation:pop .18s ease}
.nav-dd-panel a{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;color:#333;text-decoration:none;font-weight:700;font-size:.9rem;transition:.15s}
.nav-dd-panel a:hover{background:#FBF6EC;color:#B85B3A}
.nav-dd-panel a.active{background:#FFE9F2;color:#C2539A}
/* 下拉開啟時解除 nav 溢出裁切（2026-10-29） */
.nav-links.dd-open{overflow:visible}