/* generated by scripts/build-css.cjs */
:root{--ink:#173b67;--blue:#0867cd;--line:#d4e6f3;--muted:#4e687d;--light:#eff9ff}*{box-sizing:border-box}body{margin:0;font-family:"Huninn","Zen Maru Gothic","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:#fbfdff;font-size:16px;line-height:1.7}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit}button,.button{border:0;border-radius:10px;background:var(--blue);color:white;padding:12px 22px;min-height:48px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}button:hover,.button:hover{background:#0758b1;text-decoration:none}button:disabled{opacity:.55;cursor:wait}.secondary{background:white;color:var(--ink);border:1px solid #a6c6e0}.secondary:hover{background:#eaf6ff}.danger{background:#fff2ef;color:#a12d24;border:1px solid #edc2bb}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f0ae24;outline-offset:3px}.test-note{text-align:center;font-size:12px;background:#e6f5ff;padding:6px}header{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:25px 30px;gap:20px}.brand{display:flex;align-items:center;gap:14px;color:var(--ink);white-space:nowrap}.brand b{font-size:30px;letter-spacing:-2px;color:#0876d8}.brand span{font-size:15px;font-weight:700;border-left:1px solid #c3dbea;padding-left:14px}nav{display:flex;gap:22px;align-items:center;font-size:14px}nav button{padding:5px 14px;min-height:40px;background:white;color:var(--ink);border:1px solid var(--line)}main{max-width:1120px;margin:30px auto 70px;padding:0 30px;min-height:65vh}h1{font-size:32px;line-height:1.45;margin:0 0 15px;letter-spacing:-.7px}h2{font-size:22px;margin:0 0 15px}h3{font-size:18px;margin:0 0 9px}p{margin:0 0 18px}.muted,small{color:var(--muted)}small{font-size:13px}.auth-wrap{max-width:470px;margin:45px auto;background:white;border:1px solid var(--line);border-radius:22px;padding:38px;box-shadow:0 18px 50px #156eaf08}.eyebrow{font-size:12px;color:var(--blue);letter-spacing:1px;font-weight:700;margin-bottom:12px}label{display:block;font-size:15px;font-weight:500;margin:20px 0 8px}input,select{display:block;width:100%;min-height:48px;border:1px solid #9dbbd4;border-radius:9px;background:white;padding:11px 13px;color:var(--ink)}input[type=checkbox]{width:19px;min-height:19px;flex-shrink:0;margin-top:5px;accent-color:var(--blue)}.check{display:flex;gap:10px;font-size:13px;align-items:flex-start}.full{width:100%;margin-top:20px}.form-footer{font-size:14px;text-align:center;margin:22px 0 0}.form-links{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin:14px 0}.message{color:#a12922;font-size:14px;margin-top:16px;white-space:pre-line}.message:empty{display:none}.success{color:#116846;background:#e4faef;padding:14px;border-radius:10px}.note{font-size:13px;color:#486579;background:#edf8ff;padding:15px;border-radius:10px;margin:18px 0}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.heading p{margin:0}.layout{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:26px;margin:0 0 22px}.empty{padding:45px 25px;text-align:center;background:#edf9ff;border-radius:16px}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.buttons button,.buttons a{font-size:14px}.order-top{display:flex;justify-content:space-between;gap:15px;align-items:start}.code{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.badge{font-size:12px;background:#e4f8ef;color:#176f55;padding:5px 11px;border-radius:20px;white-space:nowrap}.pending{background:#fff4d5;color:#765800}.cancelled,.refunded{background:#f0f2f5;color:#536478}.order-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin:15px 0}.price{font-size:30px;font-weight:700;margin:15px 0}.price small{font-size:14px;font-weight:400}dl{margin:18px 0}dl>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #e6eff7;font-size:14px}dt{color:var(--muted)}dd{margin:0;text-align:right}.steps{font-size:13px;color:#3076ac;margin:0 0 22px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stats .panel{background:#eaf8ff;border:0}.stats strong{display:block;font-size:30px}.filters{display:flex;gap:12px;margin-bottom:20px}.filters input{flex:1}.filters select{max-width:200px}.tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);margin-bottom:25px;padding-bottom:12px}.tabs a{padding:8px 12px;border-radius:8px}.tabs a.active{background:#e3f3ff;color:#0656a7}.records{padding-left:20px;font-size:14px}.loading{text-align:center;padding:80px;color:var(--muted)}dialog{max-width:450px;width:calc(100% - 36px);padding:30px;border:1px solid var(--line);border-radius:18px;color:var(--ink)}dialog::backdrop{background:#15375b55}footer{max-width:1120px;margin:auto;padding:25px 30px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:720px){header{padding:20px;flex-wrap:wrap;gap:10px}nav{gap:16px;font-size:13px;flex-wrap:wrap}.brand span{font-size:13px}main{padding:0 18px;margin-top:18px}.auth-wrap{padding:28px 24px;margin:22px auto}h1{font-size:27px}.layout{grid-template-columns:1fr}.heading{align-items:start;flex-direction:column}.stats{gap:8px}.stats .panel{padding:14px 10px;font-size:12px}.stats strong{font-size:23px}.panel{padding:20px}.filters{flex-direction:column}.filters select{max-width:none}.buttons button,.buttons .button{flex:1}.order-top{gap:10px}.form-links{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 購物頁面視覺：明亮但有層次。底層冷暖光暈＋極淡點陣、卡片雙層陰影＋內側高光、六站各自色脊、等寬眉標、玻璃態導覽。 */
:root{--accent:#f0ae24;--accent-ink:#7a4d00;--teal:#0f9f8a;--teal-soft:#e6f7f3;--soft:#f3f8fc;--card:#ffffff;--ink-2:#26517a;--radius:22px;
 --shadow:0 1px 2px rgba(23,59,103,.06),0 18px 46px -18px rgba(23,59,103,.22);--hi:inset 0 1px 0 rgba(255,255,255,.9);
 --c-ms:#6b5bd2;--c-mi:#e0812f;--c-al:#0f9f8a;--c-sel:#e0567a;--c-4c:#0867cd;--c-ps:#8a6d3b;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body{background:#f7fafd;background-image:radial-gradient(900px 520px at 8% -10%,rgba(8,103,205,.10),transparent 60%),radial-gradient(700px 420px at 100% 0%,rgba(240,174,36,.14),transparent 60%),radial-gradient(#173b67 .6px,transparent .6px);background-size:auto,auto,26px 26px;background-attachment:fixed,fixed,fixed}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,#f7fafd 78%);z-index:-1}
header{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);background:rgba(251,253,255,.72);border-bottom:1px solid rgba(23,59,103,.08);padding:16px 30px}
.test-note{letter-spacing:.04em;background:linear-gradient(90deg,#e6f5ff,#fff6dc)}
nav{flex-wrap:wrap;row-gap:8px}nav a{padding:6px 2px;position:relative}nav a:hover{text-decoration:none}nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s cubic-bezier(.32,.72,0,1)}nav a:hover::after{transform:scaleX(1)}
.cart-link{position:relative;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.8)}.cart-link::after{display:none}.cart-link span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;margin-left:4px}
button,.button{border-radius:14px;box-shadow:0 8px 20px -10px rgba(8,103,205,.7),var(--hi);transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .2s,background .2s}button:hover,.button:hover{transform:translateY(-1px)}button:active,.button:active{transform:translateY(0) scale(.99)}.secondary{box-shadow:0 6px 16px -12px rgba(23,59,103,.4)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
h1{font-size:40px;letter-spacing:-1.2px;line-height:1.3;text-wrap:balance}h1 .dot{color:var(--accent)}h2{letter-spacing:-.3px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;margin-top:14px}.hero .buy{position:sticky;top:96px}
.hero-head{position:relative;padding:34px 0 8px}.hero-head .num{position:absolute;right:0;top:0;font-family:var(--mono);font-size:120px;line-height:1;color:rgba(8,103,205,.06);letter-spacing:-6px;user-select:none;pointer-events:none}
.panel{background:linear-gradient(180deg,#ffffff,#fbfdff);border:1px solid rgba(23,59,103,.10);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow),var(--hi);margin-bottom:20px;position:relative}
.panel>h2:first-child{display:flex;align-items:baseline;gap:12px}.panel>h2:first-child::before{content:attr(data-n);font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--blue);opacity:.8}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;background:var(--light);color:var(--blue);letter-spacing:.04em}.badge.paid{background:var(--teal-soft);color:#0b6f60}.badge.pending{background:#fff6e0;color:var(--accent-ink)}.badge.cancelled,.badge.refunded{background:#f2f2f2;color:#666}.badge.revoked,.badge.expired{background:#fdecea;color:#a12922}
.price-big{font-size:42px;font-weight:800;letter-spacing:-1.5px;color:var(--ink);margin:6px 0 2px;font-variant-numeric:tabular-nums}.price-big small{font-size:14px;font-weight:500;color:var(--muted);margin-left:8px;letter-spacing:0}
.perk{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:9px 0}.perk::before{content:'';width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:3px;background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3 3 7-7' fill='none' stroke='%230f9f8a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.spectrum{display:flex;height:10px;border-radius:999px;overflow:hidden;margin:6px 0 20px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}.spectrum i{flex:1}.spectrum i:nth-child(1){background:var(--c-ms)}.spectrum i:nth-child(2){background:var(--c-mi)}.spectrum i:nth-child(3){background:var(--c-al)}.spectrum i:nth-child(4){background:var(--c-sel)}.spectrum i:nth-child(5){background:var(--c-4c)}.spectrum i:nth-child(6){background:var(--c-ps)}
.stations{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 8px}.station{background:linear-gradient(180deg,#fff,#f6f9fc);border:1px solid rgba(23,59,103,.08);border-radius:16px;padding:16px 18px 16px 20px;position:relative;overflow:hidden;box-shadow:0 8px 20px -16px rgba(23,59,103,.35)}.station::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,var(--blue))}.station[data-k="MS"]{--c:var(--c-ms)}.station[data-k="MI"]{--c:var(--c-mi)}.station[data-k="AL"]{--c:var(--c-al)}.station[data-k="SEL"]{--c:var(--c-sel)}.station[data-k="4C"]{--c:var(--c-4c)}.station[data-k="PS"]{--c:var(--c-ps)}
.station b{display:block;font-size:16px;margin-bottom:4px}.station small{display:block;color:var(--muted);line-height:1.6}.station .who{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;background:white;border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-top:10px;color:var(--c,var(--blue))}.station .k{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:11px;color:var(--c,var(--blue));opacity:.55;letter-spacing:.1em}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.report-card{border:1px solid rgba(23,59,103,.10);border-radius:16px;padding:16px;background:linear-gradient(180deg,#fff,#f3f8fc);box-shadow:0 10px 24px -18px rgba(23,59,103,.4)}
.report-card .mock{height:120px;border-radius:12px;background:#fff;border:1px solid var(--line);margin-bottom:12px;position:relative;overflow:hidden;padding:12px}.report-card .mock::after{content:'示意';position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.report-card .mock .bar{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--c-4c),var(--c-al));margin:9px 0 0;width:var(--w,60%);box-shadow:0 0 12px rgba(8,103,205,.35)}.report-card .mock .bar.b{background:linear-gradient(90deg,var(--c-mi),var(--accent));box-shadow:0 0 12px rgba(224,129,47,.35)}.report-card .mock .ln{height:6px;border-radius:3px;background:#e8eef5;margin:8px 0 0;width:var(--w,80%)}
.steps-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.steps-list div{background:linear-gradient(180deg,#fff,#f6f9fc);border:1px solid rgba(23,59,103,.08);border-radius:14px;padding:14px 16px}.steps-list b{display:block;margin-bottom:4px}
.faq details{border-top:1px solid var(--line);padding:14px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'＋';color:var(--blue);transition:transform .25s}.faq details[open] summary::after{transform:rotate(45deg)}.faq p{margin:10px 0 0;color:var(--muted);font-size:15px}
.qty{display:flex;align-items:center;gap:8px;margin:14px 0}.qty button{min-height:40px;width:40px;padding:0;background:white;color:var(--ink);border:1px solid #a6c6e0;border-radius:12px;box-shadow:none}.qty output{min-width:2.4em;text-align:center;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.buy .panel{background:linear-gradient(180deg,#fff,#fbf7ec);border-color:rgba(240,174,36,.35)}.buy .panel::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--c-ms),var(--c-mi),var(--c-al),var(--c-sel),var(--c-4c),var(--c-ps))}
.stickybar{display:none}
.cart-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}.cart-row:first-of-type{border-top:0}.cart-row .sub{color:var(--muted);font-size:14px}.cart-row select{margin:0;min-height:42px}
.summary dl{margin:0}.summary div{display:flex;justify-content:space-between;padding:8px 0;font-size:15px;font-variant-numeric:tabular-nums}.summary .total{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;font-size:22px;font-weight:800}.summary .off{color:#0b6f60}
.layout{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.steps{display:flex;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}.steps span{padding:5px 12px;border-radius:999px;background:white;border:1px solid var(--line)}.steps span.on{background:var(--ink);color:white;border-color:var(--ink)}
.item-block{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;background:linear-gradient(180deg,#fff,#f8fbfe)}.item-block .head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:600}
.inline-form{background:var(--soft);border-radius:14px;padding:12px 16px 16px;margin-top:10px}.inline-form label{margin-top:10px}.inline-form summary{cursor:pointer;font-weight:600;color:var(--blue)}
.code-card{background:linear-gradient(135deg,#fff8e6,#fffdf7);border:1px solid #f3ddae;border-radius:16px;padding:16px 18px;margin:12px 0;box-shadow:0 10px 24px -18px rgba(122,77,0,.45),var(--hi)}.code-card .code{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:.18em;color:#8a5a00;margin:6px 0}
.status-hero{text-align:center;padding:10px 0 4px}.status-hero .icon{width:68px;height:68px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:white;background:var(--teal);box-shadow:0 0 0 10px var(--teal-soft),0 12px 30px -10px rgba(15,159,138,.6)}.status-hero .icon.wait{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 10px #fff3d6}.status-hero .icon.fail{background:#c9463d;box-shadow:0 0 0 10px #fdecea}
.records{list-style:none;padding:0;margin:12px 0 0;font-size:13px;color:var(--muted)}.records li{padding:6px 0;border-top:1px dashed var(--line)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 22px}.tabs a{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--ink);font-size:14px}.tabs a:hover{text-decoration:none;border-color:var(--blue)}.tabs a.active{background:var(--ink);color:white;border-color:var(--ink)}
.kid-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}.progress{display:flex;gap:6px;margin:8px 0}.progress i{flex:1;height:8px;border-radius:4px;background:#e4eef6}.progress i.done{background:var(--teal);box-shadow:0 0 10px rgba(15,159,138,.5)}
.filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}.filters input,.filters select{margin:0;flex:1;min-width:180px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}.stats .panel{padding:16px 18px;margin:0}.stats strong{display:block;font-size:28px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.buttons .full{flex:1 1 100%}
table.grid{width:100%;border-collapse:collapse;font-size:14px}table.grid th,table.grid td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}table.grid th{color:var(--muted);font-weight:600;font-size:12px;font-family:var(--mono);letter-spacing:.1em}
textarea{display:block;width:100%;min-height:110px;border:1px solid #9dbbd4;border-radius:9px;padding:11px 13px;font:inherit;color:var(--ink)}
.help-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}.contact li{margin:8px 0}
.empty{text-align:center;padding:48px 20px;background:rgba(255,255,255,.7);border:1px dashed var(--line);border-radius:var(--radius)}
.notice{background:#fff8e6;border:1px solid #f3ddae;border-radius:12px;padding:12px 16px;font-size:14px;margin:12px 0}
.code{font-family:var(--mono);letter-spacing:.06em}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.32,.72,0,1),transform .6s cubic-bezier(.32,.72,0,1)}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}button,.button{transition:none}}
@media (max-width:900px){.hero,.layout,.help-grid{grid-template-columns:1fr}.hero .buy{position:static}.stations,.report-grid{grid-template-columns:1fr 1fr}.steps-list{grid-template-columns:1fr}.hero-head .num{font-size:80px}h1{font-size:32px}}
@media (max-width:640px){header{padding:12px 16px}.stations,.report-grid{grid-template-columns:1fr}.panel{padding:20px 18px}.cart-row{grid-template-columns:1fr;gap:8px}.price-big{font-size:34px}.stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 16px;gap:12px;align-items:center;justify-content:space-between;z-index:5;box-shadow:0 -8px 24px rgba(0,0,0,.06)}.stickybar b{font-size:20px}main{padding-bottom:90px}.kid-card{grid-template-columns:1fr}.hero-head .num{display:none}}

/* 由 inline style 轉出的工具類（CSP 不允許 inline style） */
.sc3f837{margin-left:8px}
.s647295{grid-template-columns:1fr1fr}
.s9977d8{grid-template-columns:1fr1fr1fr}
.sd07753{white-space:pre-wrap}
.s88e0b8{width:90px;min-height:36px;display:inline}
.sf6e3d7{text-align:right}
.s83616a{color:#0b6f60}
.s9c6869{display:flex;gap:8px}
.s5f7abe{text-transform:uppercase}
.s553a64{margin-top:14px}
.s5371db{margin-top:10px}
.sa373b9{--w:40%}
.s3d6216{--w:72%}
.s6753ab{--w:48%}
.s74ca56{--w:86%}
.s6ccfdb{--w:35%}
.s08155d{--w:64%}
.sa205b2{--w:78%}
.s24da65{--w:90%}
.s7776e9{--w:50%}
.sae4074{--w:85%}
.s0bef6c{--w:70%}
.sa8a77e{--w:30%}
.s002535{margin-top:12px}
.s4ddbe9{white-space:nowrap}
.s16a312{font-size:17px;max-width:34em}
.sdeb85c{margin:004px;font-weight:700}
.sb89a77{margin-top:22px}
.s823d07{grid-template-columns:repeat(3,1fr)}
.s1e2cc3{align-items:center}
.sb5053b{align-items:flex-start}
.sfa9aec{display:block}
.s4dd59a{max-width:640px}
.s4a909e{margin-top:18px}
.s2ff93e{font-weight:800;letter-spacing:.06em}
.nw{white-space:nowrap}.dot{color:var(--accent)}
@media (max-width:640px){nav{gap:12px;font-size:13px}nav a[href="/help"]{display:none}.cart-link{padding:5px 10px}nav button{min-height:36px;padding:4px 12px}}
.demo-box{margin-top:22px;padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,#fff8e6,#fffdf7);border:1px dashed #e9c886}.demo-box .eyebrow{margin-bottom:4px}.demo-box p{margin:0 0 6px}
.howto{padding-left:20px;margin:6px 0 10px}.howto li{margin:4px 0}
.s9c6869 button{white-space:nowrap;min-width:72px}
.station.check{gap:12px;align-items:flex-start}.station.check input[type=radio]{display:inline-block;width:20px;min-height:20px;height:20px;margin:3px 0 0;flex-shrink:0;accent-color:var(--blue)}.station.check span{line-height:1.5}
@media (max-width:640px){.s823d07{grid-template-columns:1fr!important}.s647295{grid-template-columns:1fr!important}}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 16px 4px}.table-scroll table.grid{display:table;white-space:nowrap;min-width:100%}table.act-grid td,table.act-grid th{white-space:nowrap;padding-left:7px;padding-right:7px}.act-grid .code{font-size:13px;letter-spacing:.08em}
.mem-filters #act-search{flex:1 1 220px;min-width:180px}.stats .panel small{display:block;color:var(--muted);font-size:12px}.stats .panel small .muted{font-weight:400}.act-grid .warn{color:var(--accent-ink);font-weight:600}
@media (max-width:640px){.filters.mem-filters #act-search,.filters.mem-filters #member-search,.filters.mem-filters #mail-search{flex:0 0 auto;width:100%}}

/* 自架字型子集（scripts/build-fonts.py 產生）：先用本站子集，缺的字才落到 Google Fonts，再落到系統字型 */
@font-face{font-family:"GLSans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gl-sans-400.woff2) format("woff2")}
@font-face{font-family:"GLSans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/gl-sans-700.woff2) format("woff2")}
@font-face{font-family:"GLSerif";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/gl-serif-900.woff2) format("woff2")}
/* ═══════════════════════════════════════════════════════════
   成長線 Growth Line — 覺知全人測評購物站主題（2026-09-21 定案）
   來源：Claude Design「重新設計購物介面 · 成長線 定案」
   底 #ece7e1／卡 #ffffff／墨棕 #3a2e2a／Noto Serif TC 大標＋Noto Sans TC 內文
   一條 3px 成長線貫穿全站：實心節點＝已完成，年段色＝現在，虛線＝還沒到
   本檔最後載入，覆蓋 app.css 與 shop.css
   ═══════════════════════════════════════════════════════════ */

:root{
 --ink:#3a2e2a;
 --muted:#5b4d47;
 --dim:#665a54;
 --paper:#fdfbf7;
 --card:#ffffff;
 --white:#fff;
 --line:rgba(58,46,42,.15);
 --line-2:rgba(58,46,42,.25);
 --soft:#f3ede6;
 --blue:#40528a;
 --orange:#c4553f;
 --green:#357053;
 --amber:#8a5d1f;
 --c-pre:#e0673d; --c-es:#e0a83d; --c-jh:#6f8fd8; --c-sh:#4fa3a8;
 --c-ms:#e0673d; --c-mi:#e0a83d; --c-al:#6fa86f; --c-sel:#4fa3a8; --c-4c:#6f8fd8; --c-ps:#9a7bd0;
 --accent:#e0a83d; --accent-ink:#8a5d1f; --teal:#4fa3a8; --teal-soft:#e4f0e9; --light:#f3ede6;
 --shadow:0 1px 3px rgba(58,46,42,.06);
 --mono:"GLSans","Noto Sans TC","PingFang TC","Microsoft JhengHei",ui-monospace,Consolas,monospace;
}

/* ── 版面基底 ── */
body{font-family:"GLSans","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:#fdfbf7;background-image:none;color:var(--ink);font-size:16px;line-height:1.75}
body::before{display:none}
a{color:var(--ink)}
a:hover{color:var(--orange)}
main{max-width:1200px}

/* ── 字級與襯線大標 ── */
h1,h2,h3,.price-big,.sf{font-family:"GLSerif","Noto Serif TC","GLSans","Noto Sans TC","PingFang TC",serif;font-weight:900;letter-spacing:-.01em}
h1{font-size:42px;line-height:1.18;margin:0 0 14px}
h1.hero-title{font-size:52px;line-height:1.15;letter-spacing:-.015em}
h1.hero-title em,h1 em{font-style:normal;color:#b2512c}
h1.hero-title .hl{background:none}
h1 .dot{color:var(--dim);font-weight:400}
h2{font-size:28px;margin:0 0 12px}
h3{font-size:19px;margin:0 0 8px}
.muted{color:var(--muted)}
.eyebrow{font-family:"GLSans","Noto Sans TC",sans-serif;font-size:12px;letter-spacing:.2em;font-weight:700;color:#9e4525;text-transform:none;margin-bottom:14px}

/* ── 按鈕 ── */
button,.button{background:var(--ink);color:#ffffff;border:0;border-radius:10px;min-height:52px;padding:0 26px;font-weight:700;font-size:15px;box-shadow:none;transition:background .2s cubic-bezier(.32,.72,0,1),transform .2s cubic-bezier(.32,.72,0,1)}
button:hover,.button:hover{background:#241b18;color:#ffffff}
button:active,.button:active{transform:scale(.985)}
.secondary,.button.secondary{background:#fff;color:var(--ink);border:1px solid var(--line-2);font-weight:500;box-shadow:none}
.secondary:hover,.button.secondary:hover{background:var(--soft);color:var(--ink)}
.danger{background:#fdf1ee;color:#a8412a;border:1px solid #eccfc7;box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #9e4525;outline-offset:3px}

/* ── 頁首 ── */
header{background:rgba(253,251,247,.92);border-bottom:1px solid rgba(58,46,42,.1);max-width:1200px;padding:22px 30px;min-height:0;align-items:center}
.brand{gap:12px}
.brand img{border-radius:8px}
.brand-t{display:flex;flex-direction:column;line-height:1.2;border-left:0;padding-left:0}
.brand-t b{font-family:"GLSerif","Noto Serif TC",serif;font-size:17px;font-weight:900;color:var(--ink);letter-spacing:0}
.brand-t small{font-size:11px;color:var(--dim);letter-spacing:.12em}
nav{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:500;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
nav::-webkit-scrollbar{display:none}
nav a,nav button{color:var(--ink);line-height:1.4;min-height:0;flex-shrink:0}
nav a::after{background:var(--ink)}
nav button{background:#fff;border:1px solid var(--line-2);color:var(--ink);padding:7px 15px;min-height:40px;font-weight:500;border-radius:999px}
.cart-link{padding:8px 16px;border:1px solid var(--ink);border-radius:999px;background:transparent}
.cart-link span{background:var(--ink);color:#ffffff;font-weight:700}
.test-note{background:#f4efe8;color:var(--muted);line-height:1.5;min-height:28px;font-size:12px}

/* ── 卡片與面板 ── */
.panel{background:#fff;border:1px solid rgba(58,46,42,.14);border-radius:20px;box-shadow:0 1px 2px rgba(58,46,42,.04)}
.panel>h2:first-child::before{color:var(--dim);font-family:"GLSans","Noto Sans TC",sans-serif;font-weight:700}
.auth-wrap{background:#fff;border:1px solid rgba(58,46,42,.14);border-radius:20px;box-shadow:0 1px 2px rgba(58,46,42,.04)}
.note{background:var(--soft);color:var(--muted);border-radius:12px;font-size:13.5px}
.note a,.perk a,.muted a,p a,li a,.form-footer a,.form-links a,.check a,label a,small a,dd a,td a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.note a:hover,p a:hover{color:var(--orange)}
.callout{background:#f7f1ea;border:0;border-left:3px solid #9e4525;border-radius:0 12px 12px 0;padding:14px 20px;color:var(--muted);font-size:14.5px;line-height:1.8;margin:0 0 16px}
.callout b{color:var(--ink)}

/* ── 表單 ── */
label{font-size:13px;font-weight:500;color:var(--muted);margin:18px 0 6px}
input,select,textarea{border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink);min-height:48px}
input[type=checkbox],input[type=radio]{accent-color:var(--ink);min-height:18px;width:18px}
.check{font-size:13px;line-height:1.75;color:var(--muted)}

/* ══ 成長線 ══ */
.gl-node{display:block;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid #ffffff;box-shadow:0 0 0 2px var(--ink);box-sizing:border-box}
.gl-node.todo{background:#ffffff;border:2px dashed var(--ink);box-shadow:none}

/* 結帳步驟＝線上的節點 */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;gap:0;padding:14px 0 26px;margin:0 0 26px;background:none;border:0}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:3px;background:var(--ink)}
.steps span{position:relative;display:flex;flex-direction:column;align-items:center;background:none;border:0;border-radius:0;padding:0;color:var(--dim);font-size:13px;font-weight:500;text-align:center;line-height:1.5}
.steps span::before{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#ffffff;border:2px dashed var(--ink);margin-bottom:10px;box-sizing:border-box}
.steps span.on{background:none;border:0;color:var(--ink);font-weight:700}
.steps span.on::before{background:var(--ink);border:3px solid #ffffff;box-shadow:0 0 0 2px var(--ink)}

/* 2026-09-21：首頁改成 KWJ 那版之後，舊的 .product-card（更早一代的商品列表，
   卡片下方掛一顆成長線節點）已經沒有任何標記在用，而且會在新商品卡上多出一顆
   浮在半空的圓點。整組刪掉，新的商品卡樣式在本檔最後的 .jy .product-card。 */
@media (min-width:861px){
 .stations{position:relative}
 .stations::before{content:"";position:absolute;left:2%;right:2%;top:192px;height:3px;background:var(--ink);z-index:0}
 .stations>*{position:relative;z-index:1}
}
@media (max-width:860px){
 .stations{position:relative;padding-left:30px}
 .stations::before{content:"";position:absolute;left:9px;top:16px;bottom:16px;width:3px;background:var(--ink)}
}

/* 商品頁六站 */
.station{background:#fff;border:1px solid rgba(58,46,42,.12);border-radius:16px;position:relative}
.station .k{font-family:"GLSerif","Noto Serif TC",serif;font-weight:900;color:var(--ink)}
.station .who{background:#fff;border:1px solid var(--line-2);color:var(--ink);font-size:11px;font-family:"GLSans","Noto Sans TC",sans-serif;letter-spacing:.08em}
.station::before{content:"";position:absolute;left:-31px;top:22px;width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid #ffffff;box-shadow:0 0 0 2px var(--ink);box-sizing:border-box}
.station[data-k=MS]::before{background:var(--c-ms)}
.station[data-k=MI]::before{background:var(--c-mi)}
.station[data-k=AL]::before{background:var(--c-al)}
.station[data-k=SEL]::before{background:var(--c-sel)}
.station[data-k="4C"]::before{background:var(--c-4c)}
.station[data-k=PS]::before{background:var(--c-ps)}
.panel .stations{padding-left:0}
.panel .stations.rail{padding-left:34px;position:relative}
.panel .stations.rail::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--ink)}

.spectrum{gap:10px}
.spectrum i{width:12px;height:12px;border-radius:50%}
.spectrum i:nth-child(1){background:var(--c-ms)}.spectrum i:nth-child(2){background:var(--c-mi)}.spectrum i:nth-child(3){background:var(--c-al)}
.spectrum i:nth-child(4){background:var(--c-sel)}.spectrum i:nth-child(5){background:var(--c-4c)}.spectrum i:nth-child(6){background:var(--c-ps)}

/* ── 首屏 ── */
.hero-head{padding:26px 0 10px}
.hero-art{position:relative;height:290px;margin:0 0 6px}
.hero-art .doodle{position:absolute;left:0;bottom:0;width:min(480px,72%);height:auto;filter:none}
.hero-art .bean{position:absolute;right:8%;bottom:6px;width:108px;height:auto;filter:none;animation:bob 4s ease-in-out infinite}
.hero-art .blob{display:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hero-art .bean{animation:none}}
.hero-head .num{display:none}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);padding:16px 0 0}
.crumb a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.crumb a:hover{color:var(--ink)}
.crumb span[aria-current]{color:var(--ink);font-weight:700}

/* ── 標籤 ── */
.badge{background:var(--soft);color:var(--muted);border-radius:999px;font-weight:700;font-size:12px;padding:4px 12px}
.badge.paid{background:#e4f0e9;color:var(--green)}
.badge.pending{background:#faeedd;color:var(--amber)}
.badge.cancelled,.badge.expired{background:#f0eae6;color:#665a54}
.badge.refunded{background:#f8dcd5;color:#a8412a}
.badge.tag{background:#eef1f8;color:var(--blue)}

/* ── 購買區 ── */
.buy .panel{background:#fff;border:1px solid rgba(58,46,42,.12)}
.buy .panel::before{display:none}
.price-big{font-size:40px;color:var(--ink)}
.price-big small{font-family:"GLSans","Noto Sans TC",sans-serif;font-weight:400;font-size:13px;color:var(--dim)}
.perk{position:relative;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.85}
.perk::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;border-radius:50%;background:var(--c-es)}
.qty button{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--ink);font-size:18px;font-weight:400}
.qty output{font-family:"GLSerif","Noto Serif TC",serif;font-weight:900;font-size:20px}
.stickybar{background:rgba(253,251,247,.96);border-top:1px solid var(--line);padding-bottom:max(12px,env(safe-area-inset-bottom))}
.in-cart{font-size:13px;margin:10px 0 0;color:var(--muted)}
.in-cart b{color:var(--ink)}

/* ── 報告示意 ── */
.report-card{background:#fff;border:1px solid rgba(58,46,42,.12);border-radius:16px}
.report-card .phone{border-radius:18px;border:6px solid #2c2622;background:#000;overflow:hidden;aspect-ratio:430/560;margin-bottom:12px;box-shadow:none}
.report-card .phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* ── 購物車與摘要 ── */
.cart-row{border-bottom:1px solid var(--line)}
dl>div{border-bottom:1px solid var(--line);font-size:14px}
dl>div>dt{margin:0;font-weight:400;color:var(--muted)}
dl>div>dd{margin:0;text-align:right;color:var(--ink)}
.code-card{background:#f7f1ea;border:1px dashed var(--line-2);border-radius:16px}
.code-card .code{color:var(--ink);font-family:"GLSerif","Noto Serif TC",serif;font-weight:900;letter-spacing:.12em}
.code{font-family:"GLSans","Noto Sans TC",ui-monospace,monospace;letter-spacing:.06em}
.copy-code{min-height:28px;padding:5px 12px;font-size:12px;border-radius:999px;background:#fff;color:var(--muted);border:1px solid var(--line-2);box-shadow:none;margin-left:6px;vertical-align:middle;font-weight:500}

/* ── 表格 ── */
table.grid{border-collapse:collapse;font-size:13.5px}
table.grid th{font-family:"GLSans","Noto Sans TC",sans-serif;font-weight:700;font-size:12px;color:#665a54;background:transparent;border-bottom:2px solid var(--ink);letter-spacing:.04em}
table.grid td{border-bottom:1px solid rgba(58,46,42,.1)}
table.spec{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0 16px}
table.spec th{width:104px;text-align:left;color:#665a54;font-weight:700;font-family:"GLSans","Noto Sans TC",sans-serif;padding:10px 10px 10px 0;vertical-align:top;border-bottom:1px solid var(--line)}
table.spec td{padding:10px 0;border-bottom:1px solid var(--line);line-height:1.8}
.panel h3{font-size:16px;margin:16px 0 6px}
ul.notes{padding-left:20px;margin:0}
ul.notes li{margin:6px 0;line-height:1.8;font-size:14px;color:var(--muted)}

/* ── 分頁籤 ── */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.tabs a{padding:0 2px 12px;border:0;border-radius:0;background:none;color:#665a54;font-size:14px;font-weight:500;min-height:0}
.tabs a.active{background:none;border:0;border-bottom:3px solid var(--ink);color:var(--ink);font-weight:700}
.tabs a:hover{color:var(--ink);text-decoration:none}

/* ── 家長常常先問 ── */
.concerns{display:grid;gap:14px}
.concern{border-left:3px solid var(--c-es);padding:4px 0 4px 16px}
.concern .q{font-family:"GLSerif","Noto Serif TC",serif;font-weight:900;font-size:17px;margin:0 0 4px;color:var(--ink)}
.concern .a{margin:0;color:var(--muted);line-height:1.85;font-size:14.5px}

/* ── 常見問題 ── */
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:"GLSerif","Noto Serif TC",serif;font-weight:900;font-size:17px;color:var(--ink)}
.faq p{color:var(--muted);font-size:14.5px;line-height:1.85}

/* ── 頁尾 ── */
footer{color:var(--muted);line-height:1.9;border-top:1px solid var(--line);background:transparent}
footer .dots{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
footer .dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);box-sizing:border-box}
footer .dots i:nth-child(1){background:var(--c-pre)}
footer .dots i:nth-child(2){background:var(--c-es)}
footer .dots i:nth-child(3){background:var(--c-jh)}
footer .dots i:nth-child(4){background:var(--c-sh)}
footer .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0 0 10px;font-size:13px}
footer .foot-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
footer .foot-links a:hover{color:var(--ink)}

/* ── 骨架與跳過連結 ── */
.skeleton{max-width:760px;margin:20px auto}
.sk{background:linear-gradient(90deg,#efe9e2 25%,#f9f5f0 37%,#efe9e2 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:12px}
.sk-h{height:36px;width:60%;margin:14px 0}.sk-t{height:14px;width:90%;margin:10px 0}.sk-t.short{width:55%}
.sk-card{height:120px;margin:18px 0;border-radius:20px}.sk-art{height:220px;border-radius:20px;margin:8px 0 14px}
@media (min-width:641px){.sk-art{height:290px}}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#ffffff;padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{left:12px}

/* ── 加入購物車浮層 ── */
.added-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(58,46,42,.4);transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.32,.72,0,1),opacity .25s;pointer-events:none}
.added-bar.show{transform:translateY(0);opacity:1;pointer-events:auto}
.added-bar b{display:block;font-size:14px}.added-bar small{color:#665a54;font-size:12.5px}
.added-bar .acts{display:flex;gap:8px;flex-shrink:0}
.added-bar .acts .button,.added-bar .acts button{padding:0 16px;font-size:13px;min-height:44px}
@media (prefers-reduced-motion:reduce){.added-bar{transition:none}}

/* ── 法律頁 ── */
.legal{max-width:720px;margin:24px auto 48px;padding:34px 34px 40px;line-height:1.9;font-size:15px;background:#fff;border:1px solid rgba(58,46,42,.12);border-radius:20px}
.legal h1{font-size:36px;margin:8px 0 6px}
.legal h2{font-size:22px;margin:30px 0 8px;padding-top:0;border-top:0}
.legal h2::before{content:"";display:block;width:34px;height:3px;background:var(--ink);margin:0 0 14px}
.legal ul,.legal ol{padding-left:22px;margin:8px 0}
.legal li{margin:5px 0;color:var(--muted)}
.legal p{color:var(--muted)}
.legal table.grid{width:100%;font-size:14px;margin:10px 0 4px}
.legal table.grid th,.legal table.grid td{border:0;border-bottom:1px solid var(--line);padding:10px 12px 10px 0;text-align:left;vertical-align:top;white-space:normal}
.legal table.grid th{background:transparent}
@media (max-width:640px){.legal{padding:24px 18px 28px;margin:12px 0 28px;font-size:14.5px;border-radius:16px}.legal h1{font-size:28px}}

/* ── 後台會員管理 ── */
.mem-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.mem-filters #member-search{flex:1 1 220px;min-width:180px}
.mem-filters select{padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font:inherit;font-size:14px;min-height:48px;color:var(--ink)}
.check.inline{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin:0}
.mem-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;align-items:center;text-decoration:none;color:inherit;margin-bottom:10px;padding:20px 24px;transition:transform .2s cubic-bezier(.32,.72,0,1),border-color .2s}
.mem-row:hover{transform:translateY(-1px);border-color:var(--ink);text-decoration:none}
.mem-main{display:flex;flex-direction:column;gap:4px;min-width:200px}
.mem-main b{font-family:"GLSerif","Noto Serif TC",serif;font-size:17px;font-weight:900}
.mem-mail{color:#665a54;font-size:13px}
.mem-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mem-stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#665a54}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 32px}
.pager .buttons{margin:0}
.ticket{border-left:3px solid var(--line-2);padding:4px 0 10px 14px;margin-bottom:10px}
.ticket p{margin:4px 0;font-size:14px}
ul.logs{padding-left:18px;margin:0;font-size:13px;color:var(--muted);line-height:1.95}

/* ── 手機 ── */
@media (max-width:720px){
 header{flex-wrap:wrap;row-gap:6px;padding:12px 16px;min-height:0}
 header .brand{flex:1 1 100%}
 nav{flex:1 1 100%;width:100%;justify-content:flex-start;gap:16px;padding-bottom:2px}
 nav a,nav button{line-height:20px;padding:4px 2px}
 .cart-link{padding:4px 12px}
}
@media (max-width:640px){
 h1{font-size:30px}
 h1.hero-title{font-size:32px}
 h2{font-size:23px}
 .hero-art{height:210px}.hero-art .bean{width:84px}
 .steps{padding:12px 0 20px}.steps span{font-size:11.5px}
 .steps::before{left:12%;right:12%}
 table.grid{display:block;overflow-x:auto;white-space:nowrap}
 table.grid td,table.grid th{font-size:12.5px}
 .mem-row{flex-direction:column;align-items:flex-start}
 .price-big{font-size:34px}
}

/* 觸控尺寸 */
button,.button,.tabs a{min-height:44px}
nav a,nav button,.crumb a,.copy-code{min-height:0}

/* ── 其餘元件對齊主題 ── */
.status-hero{text-align:left;padding:6px 0 10px}
.status-hero .icon{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#ffffff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.status-hero h1{font-size:40px;line-height:1.18}
.howto{list-style:none;padding:0;margin:12px 0 10px;position:relative;padding-left:32px}
.howto::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:3px;background:var(--ink)}
.howto li{position:relative;margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.8}
.howto li::before{content:"";position:absolute;left:-32px;top:9px;width:16px;height:16px;border-radius:50%;background:#ffffff;border:2px dashed var(--ink);box-sizing:border-box}
.howto li:first-child::before{background:var(--ink);border:3px solid #ffffff;box-shadow:0 0 0 2px var(--ink)}
.item-block{border:1px solid rgba(58,46,42,.12);border-radius:16px;background:#fff;padding:16px 18px}
.notice{background:#f7f1ea;border:1px solid var(--line);border-radius:12px;color:var(--muted)}
.inline-form{background:var(--soft);border-radius:14px}
.demo-box{background:#f7f1ea;border:1px dashed var(--line-2);border-radius:16px}
.demo-box .eyebrow{color:#665a54}
.records{color:var(--muted)}
.stats .panel{padding:18px 20px;border-radius:16px}
.stats .panel b,.stats b{font-family:"GLSerif","Noto Serif TC",serif;font-weight:900}
.filters input,.filters select{min-height:48px}
.empty{padding:40px 0;text-align:center}
.empty h1,.empty h2{font-size:28px}

/* 年段區段：四個大按鈕，直接進對應版本 */
.pick{padding:18px 20px;margin:18px 0 24px}
.pick-q{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 14px}
.pick-q b{font-family:"GLSerif","Noto Serif TC",serif;font-weight:900;font-size:17px}
.pick-q .muted{font-size:13.5px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.seg-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border:1px solid var(--line-2);border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s cubic-bezier(.32,.72,0,1)}
.seg-b:hover{border-color:var(--ink);transform:translateY(-1px);text-decoration:none;color:var(--ink)}
.seg-b b{font-family:"GLSerif","Noto Serif TC",serif;font-weight:900;font-size:17px}
.seg-b span{font-size:11.5px;color:var(--dim)}
.seg-b:nth-child(1){border-top:3px solid var(--c-pre)}
.seg-b:nth-child(2){border-top:3px solid var(--c-es)}
.seg-b:nth-child(3){border-top:3px solid var(--c-jh)}
.seg-b:nth-child(4){border-top:3px solid var(--c-sh)}
@media (max-width:640px){.seg{grid-template-columns:repeat(2,1fr)}.pick{padding:16px}}

/* ── 2026-09-21 使用者：色系太暗沉 → 主按鈕改暖橘、說明框改淡、優惠用綠色 ── */
:root{--cta:#bf4f28;--cta-hover:#a8412a}
button,.button{background:var(--cta);color:#fff}
button:hover,.button:hover{background:var(--cta-hover);color:#fff}
.secondary,.button.secondary{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.secondary:hover,.button.secondary:hover{background:#fdf6f2;border-color:var(--cta);color:var(--cta-hover)}
.cart-link{border-color:var(--cta);color:var(--cta-hover)}
.cart-link span{background:var(--cta);color:#fff}
nav button{background:#fff;color:var(--ink)}
nav button:hover{background:#fdf6f2;color:var(--cta-hover)}
.skip{background:var(--cta)}
.status-hero .icon{background:var(--cta)}
/* 說明框淡化，不再是厚重米色 */
.note{background:#faf8f4;border:1px solid rgba(58,46,42,.09);color:var(--muted)}
.inline-form,.demo-box,.code-card{background:#faf8f4}
.notice{background:#fdf6f2;border-color:rgba(191,79,40,.18)}
.callout{background:#fdf6f2;border-left-color:var(--cta)}
.badge{background:#f6f3ee}
/* 折扣用綠色，看得出是省下來的 */
dl>div.off dt,dl>div.off dd,.off{color:var(--green)}
.perk::before{background:var(--cta)}
.concern{border-left-color:var(--cta)}
.steps span.on{color:var(--cta)}
.steps span.on::before{background:var(--cta);box-shadow:0 0 0 2px var(--cta)}
.tabs a.active{border-bottom-color:var(--cta);color:var(--cta-hover)}

/* ── 商品頁：左邊內容捲動時，右邊選購區跟著留在畫面上（桌機） ──
   原本 aside 自己設 sticky，但 .hero 是 align-items:start，aside 盒子只有內容高、
   沒有可滑動的空間，所以看起來完全不會跟。改成 aside 撐滿列高、真正黏住的是裡面那張卡。 */
@media (min-width:901px){
 .hero{align-items:stretch}
 .hero>section{min-width:0}
 aside.buy{position:static;align-self:stretch;height:100%}
 aside.buy>.panel{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain}
 aside.buy>.panel::-webkit-scrollbar{width:6px}
 aside.buy>.panel::-webkit-scrollbar-thumb{background:rgba(58,46,42,.18);border-radius:999px}
 /* 會員中心、客服頁的側欄同樣處理 */
 .help-grid>aside{align-self:stretch}
 .help-grid>aside>.panel:first-child{position:sticky;top:84px}
}


/* ══════════════════════════════════════════════════════════════════════════
   2026-09-21 第五輪 KWJ：「改成我這版」
   ──────────────────────────────────────────────────────────────────────────
   來源：她自己用 GPT-6 Astra 做的單一商品長銷頁
   https://zway-elementary-assessment.taiwan-z-way-0069.chatgpt.site/
   本檔案把那一頁的設計語言整組移植過來，標記在 public/home.js。

   她那頁的辨識度不是動效做出來的（整頁只有三條 transition、兩個 hover 位移），
   是這四件事做出來的，所以這一區照抄的是這四件事：
     一 大字章節編號 kicker（1.35rem/800，不是常見的小字全大寫 eyebrow）
     二 Noto Serif TC 巨型標題 ＋ 負字距 ＋ 緊行高（1.18–1.46），內文鬆到 1.75–1.85
     三 底色節奏：紙白 → 暖米 → 深色 → 紙白 → 橘色大卡，每三～四段換一次
     四 暖棕調的投影（#3c2c21 / #493426 / #37261c 系），沒有一個純黑灰

   她的頁面上有、我們刻意不照抄的五件事（照抄會變成缺陷）：
     1 整頁沒有任何 :focus-visible → 我們補
     2 熱區有 40×40 未達 44 的 → 我們一律 ≥44
     3 transition:all 用了兩處 → 我們列舉屬性
     4 沒有 scroll-margin-top，錨點會被 sticky header 切掉標題 → 我們補 96px
     5 prefers-reduced-motion 只蓋了兩個選擇器 → 我們做全域降級

   ⚠ 滑過的位移一律寫在獨立的 translate 屬性，不寫進 transform。
     進場動畫（.jy .reveal）用的是 transform，兩者寫在同一個屬性就會互相蓋掉，
     元素一進場就再也浮不起來 —— 這個坑在十個設計版本裡實測中了兩次。
     translate 與 transform 是兩個各自獨立又會疊加的屬性，從根本不會打架。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 色票（scope 在 .jy，不外漏到商品頁與購物車）────────────────────────── */
.jy{
  --ink:#26211f;        /* 內文（紙白上 15.66、暖米上 14.20）*/
  --muted:#6f6762;      /* 所有輔助說明（紙白上 5.45、暖米上 4.94）*/
  --paper:#fffdf9;
  --warm:#f8f1e8;
  --sand:#f8f0e7;       /* 報告段，和 --warm 差一階，是另一個色 */
  --orange:#d9572b;     /* 主色：只做圖形、大字與框線，不當白字的底 */
  --orange-dark:#ac3b1a;/* 紙白上 6.09，紙白底上的小字用這個 */
  /* 她的橘色大卡與主按鈕是 #d9572b 配白字，實測只有 3.93，正文 AA 要 4.5。
     凡是白字壓上去的實色面一律改用 #c2400e（白字 5.21），純圖形仍用 --orange。 */
  --orange-solid:#c2400e;
  --deep:#313c39;       /* 深色區塊（紙白上 11.26，白字在其上 11.44）*/
  --line:#e8ded3;
  --serif:"GLSerif","Noto Serif TC","Songti TC",PMingLiU,serif;
  --sans:"GLSans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-family:var(--sans);color:var(--ink);line-height:1.75;
}
/* 六個色相：--t 圖形、--td 小字、--tw 底。六張商品卡與六個面向共用同一組。 */
.jy .tone-coral {--t:#d9572b;--td:#ac3b1a;--tw:#fff1ec}
.jy .tone-gold  {--t:#c98a10;--td:#8a5d1f;--tw:#fff6db}
.jy .tone-green {--t:#5d9d63;--td:#2f6b45;--tw:#edf8ee}
.jy .tone-teal  {--t:#278f8c;--td:#1c6b69;--tw:#e7f7f6}
.jy .tone-blue  {--t:#4976bb;--td:#35548a;--tw:#edf3ff}
.jy .tone-violet{--t:#8b63b8;--td:#63479a;--tw:#f4edfb}

/* 紙白底鋪滿整個視窗：不改 body 背景，其他頁面的奶油底不受影響 */
.jy::before{content:"";position:fixed;inset:0;background:var(--paper);z-index:-1;pointer-events:none}
/* 首頁不吃 main 的 30px 內距與 1200 上限，版心交給 .shell 自己管 */
main:has(>.jy){max-width:none;padding:0;margin:0}

/* ── 版心 ──────────────────────────────────────────────────────────────── */
.jy .shell{width:min(1200px,100% - 64px);margin-inline:auto}
.jy .narrow{max-width:780px;margin-inline:auto}
.jy .center{text-align:center}
.jy .center .section-intro,.jy .center h2{margin-inline:auto}

/* ── 區塊節奏：紙白／暖米／深色／橘色大卡，每三～四段換一次 ──────────── */
.jy-sec{padding:104px 0;position:relative}
.jy-sec[id]{scroll-margin-top:96px}   /* 她漏掉的：sticky header 會切掉錨點標題 */
@media (max-width:640px){.jy-sec[id]{scroll-margin-top:118px}}  /* 手機 header 是兩列 */
/* 滿版：100vw 會把捲軸寬度算進去，桌機就多出幾像素可以左右拖。
   --sbw 由 jyMotion() 量到實際捲軸寬寫進 :root，沒有 JS 時退回 0。 */
.jy-sec.band,.jy-sec.bleed{
  width:calc(100vw - var(--sbw,0px));
  margin-left:calc(50% - ((100vw - var(--sbw,0px)) / 2));
  margin-right:calc(50% - ((100vw - var(--sbw,0px)) / 2))}
.jy-sec.band{background:var(--warm)}
.jy-sec.k-report.band{background:var(--sand)}
.jy-sec.bleed{background:var(--deep);color:#fff}
.jy .bleed-in{width:min(1200px,100% - 64px);margin-inline:auto}

/* ── 一 大字章節編號：她那頁辨識度最高的一件事 ─────────────────────────── */
.jy .section-kicker{
  color:var(--orange);font-size:1.35rem;font-weight:800;line-height:1.45;
  letter-spacing:.07em;margin-bottom:24px}
.jy .section-kicker.light{color:#f4b774}   /* 深色區塊上的版本（6.47）*/
/* 同一個 .light 放到橘色大卡上只有 2.22，橘卡一律用純白 */
.jy .timing-card .section-kicker.light,.jy .purchase-card .section-kicker.light{color:#fff}

/* ── 二 標題與內文 ─────────────────────────────────────────────────────── */
.jy h1,.jy h2{font-family:var(--serif);margin:0 0 20px;text-wrap:pretty}
/* 只在桌機生效的分句斷行（她原檔的 .desktop-break） */
.jy .dk-break{display:none}
@media (min-width:901px){.jy .dk-break{display:inline}}
.jy h1{font-size:clamp(3.45rem,4.7vw,4.2rem);font-weight:800;line-height:1.18;
  letter-spacing:-.035em;max-width:690px;margin-bottom:25px}
.jy h1 em{display:block;font-style:normal;color:var(--orange);
  font-size:.68em;line-height:1.5;letter-spacing:-.02em;margin-top:14px}
.jy h2{font-size:clamp(2.45rem,3.45vw,3.25rem);line-height:1.32;letter-spacing:-.025em}
.jy h3{font-family:var(--serif);font-weight:800;margin:0;text-wrap:pretty}
.jy p{margin:0}
.jy .section-intro{color:var(--muted);font-size:1.12rem;max-width:680px}
.jy strong,.jy b{font-weight:800}
.jy .ki{flex:none}
.jy a{text-decoration:none}

/* ── 按鈕（列舉屬性，不用 transition:all）──────────────────────────────── */
.jy .button,.jy button{font-family:var(--sans);font-weight:800;border-radius:999px;
  border:0;min-height:48px;padding:15px 24px;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;cursor:pointer;box-shadow:none;
  transition:background-color .2s ease,color .2s ease,translate .2s ease,box-shadow .2s ease}
.jy .button.primary,.jy .buy-button{background:var(--orange-solid);color:#fff;
  box-shadow:0 14px 30px #c2421e33}
.jy .button.secondary,.jy .pc-buttons .button{background:#fff;color:var(--ink);
  border:1px solid var(--line);font-weight:700}
.jy .text-link{color:var(--orange-dark);font-weight:800;border-bottom:1px solid var(--orange-dark);
  padding:12px 2px;display:inline-flex;align-items:center;min-height:44px;
  transition:color .15s ease,border-color .15s ease}
@media (hover:hover){
  .jy .button.primary:hover{background:var(--orange-dark);color:#fff;translate:0 -2px}
  .jy .button.secondary:hover,.jy .pc-buttons .button:hover{background:var(--warm);color:var(--ink)}
  .jy .text-link:hover{color:var(--orange);border-color:var(--orange)}
}
/* 她整頁沒有一個 focus 樣式。鍵盤使用者看不到自己在哪，我們補。 */
.jy :where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--orange-dark);outline-offset:3px;border-radius:6px}
.jy-sec.bleed :where(a,button,summary):focus-visible{outline-color:#f4b774}
.jy .timing-card :where(a,button):focus-visible{outline-color:#fff}

/* ══ 01 hero ═══════════════════════════════════════════════════════════ */
.jy .k-hero{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(440px,.86fr);
  gap:68px;align-items:center;min-height:690px;padding:66px 0 72px}
.jy .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:26px;
  color:var(--orange-dark);font-size:.84rem;font-weight:800;letter-spacing:.11em;
  font-family:var(--sans);text-transform:none}
.jy .eyebrow span{background:var(--orange);width:30px;height:2px;flex:none}
.jy .hero-lead{color:#5d5550;font-size:1.16rem;line-height:1.85;max-width:620px}
.jy .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:36px}
.jy .hero-trust{display:flex;flex-wrap:wrap;gap:20px;margin-top:30px;
  color:#635c57;font-size:.9rem}
.jy .hero-trust span{display:inline-flex;align-items:center;gap:7px}
.jy .hero-trust .ki{color:#4d8a53}
.jy .hero-visual{position:relative;display:grid;place-items:center;min-height:420px}
.jy .orbit{position:absolute;border-radius:50%;pointer-events:none}
.jy .orbit-one{width:min(510px,92%);aspect-ratio:1;background:#f5e5d3}
.jy .orbit-two{width:min(350px,64%);aspect-ratio:1;border:1px dashed #dabfa7}
.jy .hero-visual .doodle{position:relative;width:min(430px,88%);height:auto;filter:sepia(.3)}
.jy .hero-visual .bean{position:absolute;right:4%;bottom:2%;width:min(132px,26%);height:auto;
  filter:drop-shadow(0 16px 16px #52372633)}
.jy .floating-card{position:absolute;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:13px 17px;box-shadow:0 18px 50px #4934261c;max-width:230px}
.jy .floating-card strong{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.5}
.jy .floating-card small{display:block;margin-top:4px;color:var(--muted);font-size:.72rem}
.jy .floating-card span{display:block;color:var(--orange-dark);font-size:.72rem;
  font-weight:800;letter-spacing:.12em;margin-bottom:4px}
.jy .card-a{left:-2%;top:6%}
.jy .card-b{right:-2%;bottom:10%}

/* ══ 02 understand：痛點認領 ═══════════════════════════════════════════ */
.jy .tension-title{font-size:clamp(2.6rem,3.55vw,3.2rem)}
.jy .tension-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  margin-top:46px}
.jy .thought{background:#fff;border:1px solid transparent;border-radius:18px;
  display:flex;align-items:center;gap:18px;padding:24px 28px;min-height:88px;
  transition:border-color .15s ease,translate .3s ease}
.jy .thought span{color:var(--orange-dark);font-family:var(--serif);font-weight:700;font-size:.78rem;flex:none}
.jy .thought p{font-family:var(--serif);font-size:1.08rem;font-weight:700;line-height:1.7}
@media (hover:hover){.jy .thought:hover{border-color:#e8c6b4;translate:0 -3px}}
.jy .insight-strip{display:flex;align-items:center;gap:20px;background:var(--deep);
  color:#fff;border-radius:24px;max-width:940px;padding:28px 34px;margin-top:28px}
.jy .insight-icon{width:48px;height:48px;background:var(--orange);border-radius:50%;
  display:grid;place-items:center;flex:none;color:#fff}
.jy .insight-strip p{font-size:1.07rem;line-height:1.75}

/* ══ 03 reframe：轉念（整頁的呼吸段）══════════════════════════════════ */
.jy .split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.jy .reframe-copy p{font-size:1.15rem;color:var(--muted);line-height:1.85}
.jy blockquote{margin:32px 0 0;padding:14px 0 14px 24px;border-left:4px solid var(--orange);
  color:var(--orange-dark);font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.55}

/* ══ 04 dimensions：六個面向 ═══════════════════════════════════════════
   她那頁六面向是 3×2 卡片網格。我們首頁的「六」是六個商品，
   同一頁出現兩組六格卡片一定會被當成要買六份。六面向改橫列，版型即語意。 */
.jy .section-heading-row{display:grid;grid-template-columns:1.18fr .82fr;gap:72px;
  align-items:end;margin-bottom:48px}
.jy .section-heading-row h2{max-width:680px}
.jy-sec.bleed .section-heading-row p{color:#cbc9c4;font-size:1.03rem}
.jy .k-change .section-heading-row p{color:var(--muted);font-size:1.03rem}
.jy .dimension-list{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff1f}
.jy .dimension-row{display:grid;grid-template-columns:48px 40px 1fr;gap:20px;
  align-items:center;padding:20px 8px;border-bottom:1px solid #ffffff1f;
  transition:background-color .25s ease,translate .25s ease}
.jy .dimension-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.jy .dimension-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  color:var(--t);background:var(--tw)}
.jy .dimension-code{font-family:var(--serif);font-weight:700;font-size:1rem;color:#c9cfcc}
.jy .dimension-row h3{font-size:1.25rem;line-height:1.4;color:#fff;min-width:7.2em}
.jy .dimension-row p{color:#c9cfcc;font-size:.95rem;line-height:1.7}
@media (hover:hover){.jy .dimension-row:hover{background:#ffffff0f;translate:0 -2px}}

/* ══ 05 perspectives：親子交叉分析 ════════════════════════════════════ */
.jy .perspectives{grid-template-columns:.9fr 1.1fr}
.jy .perspective-visual{position:relative;display:grid;gap:26px}
.jy .parent-card,.jy .child-card{border-radius:24px;padding:30px;color:#fff;
  box-shadow:0 22px 45px #332a2424}
.jy .parent-card{background:#3b506f}
.jy .child-card{background:#b9481f;margin-left:12%}   /* 她是 #c65430，白字 4.46 差一點；壓深到白字 5.0 */
.jy .parent-card span,.jy .child-card span{display:block;font-size:.76rem;
  letter-spacing:.1em;color:#fff;margin-bottom:10px}
.jy .parent-card strong,.jy .child-card strong{display:block;font-family:var(--serif);
  font-size:1.35rem;font-weight:700;line-height:1.5}
.jy .connection{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:#fff;color:var(--orange);
  display:grid;place-items:center;box-shadow:0 10px 30px #3c2c212b;z-index:1}
.jy .perspectives p{color:var(--muted);font-size:1.05rem;margin-bottom:16px}
.jy .cross-note{color:var(--orange-dark);font-weight:700}
.jy .cross-values{display:grid;gap:10px;margin:24px 0}
.jy .cross-values span{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;font-weight:700}
.jy .cross-values .ki{color:#4d8a53;margin-top:4px}
.jy .emphasis{background:var(--warm);border-radius:16px;padding:20px 22px;margin-top:25px;
  color:var(--muted);line-height:1.8}
.jy .emphasis strong{color:var(--ink)}

/* ══ 06 report：交付物具象化 ═══════════════════════════════════════════ */
.jy .report-stage{display:flex;justify-content:center;align-items:center;margin-top:50px}
.jy .phone{border:9px solid var(--ink);border-radius:36px;overflow:hidden;
  width:min(240px,30vw);box-shadow:0 30px 60px #37261c33;background:var(--ink)}
.jy .phone img{display:block;width:100%;height:auto}
.jy .phone-left{transform:rotate(-7deg) translate(35px);opacity:.88}
.jy .phone-right{transform:rotate(7deg) translate(-35px);opacity:.88}
.jy .phone-main{position:relative;z-index:1}
.jy .report-note{margin-top:34px;color:var(--muted);font-size:.9rem;text-align:center}
.jy .report-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.jy .report-benefits>div{background:#fff;border-radius:16px;padding:18px;font-size:.9rem;
  font-weight:700;display:flex;align-items:flex-start;gap:10px;line-height:1.7}
.jy .report-benefits .ki{color:#4d8a53;margin-top:4px}

/* ══ 07 change：過去／現在 對照表 ═════════════════════════════════════ */
.jy .change-table{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff}
.jy .change-head,.jy .change-row{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center}
.jy .change-head{background:var(--ink);color:#fff;letter-spacing:.08em;
  padding:14px 28px;font-size:.8rem;font-weight:800}
.jy .change-row{border-bottom:1px solid var(--line);padding:23px 28px}
.jy .change-row:last-child{border:0}
.jy .change-row>span{color:var(--muted)}
.jy .change-row>.ki{color:var(--orange);justify-self:center}

/* ══ 08 stages：橘色大卡，六個階段各一句 ══════════════════════════════
   她這段是「國小是孩子形成我是誰的階段」，單一商品才寫得了。
   六個階段各一句，讓每個訪客在這裡就找到自己那一行，chip 直接錨到商品區。 */
.jy .timing-card{background:var(--orange-solid);color:#fff;border-radius:32px;
  display:grid;grid-template-columns:.42fr 1fr;gap:62px;padding:58px 66px;
  box-shadow:0 30px 80px #9d35182b}
.jy .timing-grade{display:inline-flex;align-items:center;border:1px solid #ffffff6b;
  border-radius:999px;padding:8px 15px;font-size:.78rem;font-weight:800;letter-spacing:.1em;
  margin-bottom:20px}
.jy .timing-content h2{color:#fff;font-size:3.05rem;line-height:1.45}
.jy .timing-content h2 strong{color:#ffdcc9;font-weight:800}
.jy .timing-copy{max-width:640px}
.jy .timing-copy p{color:#fff;font-size:1rem;line-height:1.8;margin-bottom:14px}
.jy .timing-quote{color:#fff;font-weight:700}
.jy .stage-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:30px}
.jy .stage-chip{display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:60px;padding:12px 16px;border-radius:16px;color:#fff;
  background:#ffffff1f;border:1px solid #ffffff2e;
  transition:background-color .2s ease,translate .2s ease}
.jy .stage-chip strong{font-family:var(--serif);font-size:1rem;font-weight:800;line-height:1.35}
.jy .stage-chip span{font-size:.78rem;color:#fff}
@media (hover:hover){.jy .stage-chip:hover{background:#ffffff33;translate:0 -2px}}
.jy .health-message{background:var(--warm);border-left:4px solid var(--orange);
  border-radius:18px;display:flex;align-items:flex-start;gap:16px;padding:24px 28px;
  margin-top:34px}
.jy .health-message .ki{color:var(--orange);margin-top:3px}
.jy .health-message strong{display:block;font-family:var(--serif);font-size:1.14rem;
  font-weight:700;line-height:1.6}
.jy .health-message small{display:block;margin-top:10px;color:var(--muted);font-size:.85rem}

/* ══ 09 process：四步驟 ════════════════════════════════════════════════ */
.jy .process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:50px}
.jy .process-grid article{border-top:2px solid var(--orange);padding:26px 10px 10px}
.jy .process-grid span{display:block;font-family:var(--serif);font-weight:800;font-size:2rem;
  line-height:1;color:#8a7466}
.jy .process-grid h3{margin:14px 0 8px;font-size:1.08rem;line-height:1.4}
.jy .process-grid p{color:var(--muted);font-size:.9rem;line-height:1.75}

/* ══ 10 trust：深色，學術依據 ══════════════════════════════════════════ */
.jy .trust-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:54px 64px;align-items:start}
.jy .trust-intro h2{color:#fff}
.jy .trust-intro p{color:#c9cfcc;font-size:1.03rem;max-width:540px;margin-bottom:12px}
.jy .trust-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.jy .trust-list>article{background:#ffffff12;border:1px solid #ffffff1a;border-radius:18px;
  display:flex;align-items:flex-start;gap:14px;min-height:190px;padding:21px}
.jy .trust-list .ki{color:#f4b774;margin-top:2px}
.jy .trust-list strong{display:block;color:#fff;font-size:1.03rem;line-height:1.5;margin-bottom:8px}
.jy .trust-list small{display:block;color:#c9cfcc;font-size:.9rem;line-height:1.75}
.jy .trust-difference{grid-column:1/-1;margin:0;padding:25px 30px;border:0;border-radius:20px;
  background:#fff;color:var(--deep);text-align:center;font-family:var(--serif);
  font-weight:800;font-size:1.28rem;line-height:1.7;box-shadow:0 18px 48px #0000001f}

/* ══ 11 fit：適合／不適合 ══════════════════════════════════════════════ */
.jy .fit-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:42px}
.jy .fit-grid>div{border-radius:24px;padding:30px}
.jy .fit-yes{background:#eaf5ec}
.jy .fit-no{background:#f5f1ed}
.jy .fit-grid h3{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin-bottom:18px}
.jy .fit-yes h3 .ki{color:#2f6b45}
.jy .fit-grid p{display:flex;align-items:flex-start;gap:10px;color:var(--muted);
  font-size:.95rem;line-height:1.8;margin-bottom:10px}
.jy .fit-yes .ki{color:#2f6b45;margin-top:5px}
.jy .fit-no .ki{color:#8a6f60;margin-top:5px}
.jy .fit-limit{display:block;margin-top:20px;padding-top:18px;border-top:1px solid #e2d9d2;
  font-size:.9rem;line-height:1.85}
.jy .fit-limit b{color:var(--ink)}

/* ══ 12 faq：原生 details，關掉 JavaScript 也展得開 ═══════════════════ */
.jy .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:start}
.jy .faq-side{position:sticky;top:130px;height:max-content}
.jy .faq-side p{color:var(--muted);font-size:.95rem}
.jy .faq-item{border-bottom:1px solid #d9cbbd}
.jy .faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 0;min-height:44px;font-weight:800;cursor:pointer;list-style:none}
.jy .faq-item summary::-webkit-details-marker{display:none}
.jy .faq-item summary .ki{color:var(--muted);transition:rotate .25s ease,color .25s ease}
.jy .faq-item[open] summary .ki{rotate:180deg;color:var(--orange)}
.jy .faq-item>p{color:var(--muted);padding:0 42px 23px 0;line-height:1.85}

/* ══ 13 buy：橘色大卡（方案共同說明）＋ 3×2 商品卡 ══════════════════════
   她那頁大卡右欄是單一商品的 buy-box，六個價格塞不進一個 buy-box，
   整個拿掉，大卡只講一次共用方案，六張卡各自承接下單。 */
.jy .purchase-card{background:var(--orange-solid);color:#fff;border-radius:34px;padding:56px 66px;
  box-shadow:0 30px 80px #9d35182b}
.jy .purchase-copy h2{color:#fff;font-size:clamp(2.35rem,3.2vw,2.9rem);line-height:1.44}
.jy .purchase-copy>p{color:#fff;font-size:1.08rem;max-width:660px;line-height:1.8}
.jy .annual-timeline{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;
  gap:12px;margin:30px 0;max-width:620px}
.jy .annual-timeline>div:not(.timeline-line){background:#ffffff1f;border:1px solid #ffffff2e;
  border-radius:16px;padding:18px}
.jy .annual-timeline span{display:block;font-size:.72rem;letter-spacing:.12em;color:#fff}
.jy .annual-timeline strong{display:block;font-family:var(--serif);font-size:1.25rem;
  font-weight:800;margin:6px 0}
.jy .annual-timeline small{display:block;font-size:.72rem;line-height:1.7;color:#fff}
.jy .timeline-line{display:grid;place-items:center;color:#ffd9c7}
.jy .purchase-points{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}
.jy .purchase-points span{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700}
.jy .buy-head{margin-top:56px}
.jy .jy-plan{color:var(--muted);font-size:.95rem;line-height:1.85;max-width:680px}
.jy .buy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.jy .product-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:24px;transition:translate .25s ease,box-shadow .25s ease}
.jy .pc-art{height:112px;border-radius:16px;background:var(--tw);display:grid;place-items:center;
  margin-bottom:18px}
.jy .pc-art img{width:auto;height:88px;filter:sepia(.25)}
.jy .pc-badge{display:inline-flex;align-self:flex-start;background:var(--tw);color:var(--td);
  border-radius:999px;padding:5px 13px;font-size:.74rem;font-weight:800;letter-spacing:.04em}
.jy .product-card h3{margin:14px 0 8px;font-size:1.25rem;line-height:1.45;text-wrap:balance}
.jy .pc-sub{color:var(--muted);font-size:.9rem;line-height:1.8;text-wrap:pretty}
.jy .pc-price{margin-top:auto;padding-top:20px;font-family:var(--serif);font-weight:800;
  font-size:2.1rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.jy .pc-price small{display:block;margin-top:8px;font-family:var(--sans);font-size:.76rem;
  font-weight:400;color:var(--muted);letter-spacing:0}
.jy .pc-buttons{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.jy .pc-buttons>*{flex:1 1 auto;min-height:46px;padding:12px 18px;font-size:.92rem}
.jy .pc-buttons button{background:var(--orange-solid);color:#fff}
.jy .buy-note{display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:26px;color:var(--muted);font-size:.85rem;text-align:center}
.jy .buy-note .ki{color:#4d8a53}
@media (hover:hover){
  .jy .product-card:hover{translate:0 -5px;box-shadow:0 18px 40px #4934261f}
  .jy .pc-buttons button:hover{background:var(--orange-dark)}
}
.jy .product-card:focus-within{translate:0 -5px}

/* ── 進場：整組接力浮現。位移寫在 transform，和滑過的 translate 各走各的。 ── */
.jy .reveal{transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s ease;
  transition-delay:calc(var(--i,0) * 60ms)}
html.jy-anim .jy .reveal{opacity:0;transform:translate3d(0,14px,0)}
html.jy-anim .jy .reveal.in{opacity:1;transform:none}
.jy-prog{position:fixed;left:0;top:0;height:4px;width:100%;z-index:60;background:#d9572b;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none}

/* ── 平板 641–900 ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .jy .shell,.jy .bleed-in{width:min(1180px,100% - 48px)}
  .jy-sec{padding:84px 0}
  .jy h1{font-size:clamp(3rem,8.2vw,4.2rem);line-height:1.2;letter-spacing:-.025em}
  .jy h1 em{font-size:.67em;line-height:1.45;margin-top:12px}
  .jy h2{font-size:clamp(2.15rem,6vw,3rem);line-height:1.34}
  .jy .section-kicker{font-size:1.2rem;margin-bottom:20px}
  .jy .k-hero{grid-template-columns:1fr;gap:24px;min-height:auto;padding:58px 0 70px}
  .jy .hero-visual{max-width:600px;margin-inline:auto}
  .jy .split,.jy .perspectives,.jy .faq-layout,.jy .trust-layout{grid-template-columns:1fr;gap:34px}
  .jy .section-heading-row{grid-template-columns:1fr;gap:12px;margin-bottom:30px}
  .jy .faq-side{position:static}
  .jy .report-benefits,.jy .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jy .timing-card{grid-template-columns:1fr;gap:24px;padding:44px 34px}
  .jy .timing-content h2{font-size:2.4rem}
  .jy .fit-grid{grid-template-columns:1fr}
  .jy .buy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jy .purchase-card{padding:44px 34px}
  .jy .annual-timeline{max-width:none}
}

/* ── 手機 ≤640：390px 不得出現橫向捲動 ─────────────────────────────── */
@media (max-width:640px){
  .jy .shell,.jy .bleed-in{width:calc(100% - 36px)}
  .jy-sec{padding:68px 0}
  .jy h1{font-size:2.42rem;line-height:1.24;letter-spacing:-.025em;margin-bottom:20px}
  .jy h1 em{font-size:.7em;line-height:1.55;margin-top:10px}
  .jy h2{font-size:2.05rem;line-height:1.38;letter-spacing:-.02em;margin-bottom:16px}
  .jy .tension-title{font-size:2.05rem}
  /* 她的 <br> 是桌機的分句，手機寬度只夠放半行，硬斷會把末行壓成兩個字。
     手機收掉 <br>，整段交給 text-wrap:balance，末行才有三字以上。 */
  .jy h2 br,.jy blockquote br,.jy .trust-intro h2 br{display:none}
  .jy .thought p{text-wrap:balance}
  /* 17.28px 不到大字門檻（18.66px/700），--orange 只有 3.86，改用深階 6.09 */
  .jy .section-kicker{font-size:1.08rem;line-height:1.5;letter-spacing:.04em;margin-bottom:17px;
    color:var(--orange-dark)}
  .jy .timing-card .section-kicker.light,.jy .purchase-card .section-kicker.light,
  .jy-sec.bleed .section-kicker.light{color:#fff}
  .jy .eyebrow{font-size:.75rem;letter-spacing:.07em;margin-bottom:20px}
  .jy .hero-lead,.jy .section-intro,.jy .reframe-copy p,.jy .perspectives p,
  .jy .trust-intro p,.jy .purchase-copy>p,.jy .insight-strip p{font-size:1rem;line-height:1.8}
  .jy .k-hero{padding:44px 0 54px;gap:20px}
  .jy .hero-actions{margin-top:28px;gap:14px}
  .jy .hero-actions .button{width:100%}
  .jy .hero-trust{margin-top:24px;font-size:.84rem;gap:12px}
  /* 她的手機版把四個絕對定位元素硬塞在一起會疊住。只留 doodle＋bean。 */
  .jy .floating-card,.jy .orbit-two{display:none}
  .jy .hero-visual{min-height:260px}
  .jy .tension-grid{grid-template-columns:1fr;gap:12px;margin-top:34px}
  .jy .thought{padding:19px 18px;gap:12px;border-radius:16px;min-height:0}
  .jy .thought p{font-size:1rem;line-height:1.65}
  .jy .insight-strip{align-items:flex-start;gap:14px;padding:20px 18px;
    border-radius:18px;margin-top:18px}
  .jy .insight-strip p{font-size:.95rem}
  .jy .split{gap:32px}
  .jy blockquote{font-size:1.25rem;margin-top:24px}
  .jy .dimension-row{grid-template-columns:44px 1fr;gap:14px;padding:18px 0}
  .jy .dimension-icon{width:44px;height:44px;border-radius:13px}
  .jy .dimension-code{grid-column:2;font-size:.85rem;color:#c9cfcc}
  .jy .dimension-text{grid-column:2;flex-direction:column;gap:5px}
  .jy .dimension-row h3{min-width:0}
  .jy .child-card{margin-left:0}
  .jy .parent-card,.jy .child-card{padding:20px}
  .jy .parent-card strong,.jy .child-card strong{font-size:1.15rem}
  .jy .connection{position:static;transform:none;margin-inline:auto}
  .jy .perspective-visual{gap:14px}
  .jy .emphasis{padding:18px;font-size:.95rem}
  .jy .report-stage{margin-top:34px}
  .jy .phone{border-width:6px;border-radius:25px;width:38vw}
  .jy .phone-left{transform:rotate(-7deg) translate(18px)}
  .jy .phone-right{transform:rotate(7deg) translate(-18px)}
  .jy .report-benefits{grid-template-columns:1fr;margin-top:22px}
  .jy .report-benefits>div{padding:16px}
  /* 對照表塌成卡片，表頭隱藏，用偽元素補欄位標籤（中文寫在本檔，UTF-8）*/
  .jy .change-head{display:none}
  .jy .change-table{border:0;background:transparent;display:grid;gap:12px}
  .jy .change-row{border:1px solid var(--line);border-radius:16px;background:#fff;
    grid-template-columns:1fr;gap:7px;padding:18px}
  .jy .change-row>.ki{display:none}
  .jy .change-row>span:before,.jy .change-row>strong:before{
    display:block;letter-spacing:.08em;margin-bottom:4px;
    font:800 .7rem/1.4 var(--sans)}
  .jy .change-row>span:before{content:"過去常常";color:#8a7d74}
  .jy .change-row>strong:before{content:"現在可以";color:var(--orange-dark)}
  .jy .change-row>span{font-size:.84rem}
  .jy .timing-card{padding:30px 24px;border-radius:24px;gap:18px}
  .jy .timing-content h2{font-size:2.08rem;line-height:1.42}
  .jy .stage-chips{grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
  .jy .stage-chip{padding:10px 12px}
  .jy .stage-chip strong{font-size:.92rem}
  .jy .stage-chip span{font-size:.72rem}
  .jy .health-message{padding:18px;border-radius:15px;border-left-width:3px;gap:12px}
  .jy .health-message strong{font-size:1.04rem}
  .jy .process-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .jy .process-grid article{border:1px solid var(--line);border-radius:16px;padding:20px;
    border-top:2px solid var(--orange)}
  .jy .trust-list{grid-template-columns:1fr;gap:12px}
  .jy .trust-list>article{min-height:0;padding:18px}
  .jy .trust-difference{padding:20px 18px;font-size:1.05rem}
  .jy .fit-grid{gap:12px;margin-top:30px}
  .jy .fit-grid>div{padding:22px}
  .jy .faq-layout{gap:28px}
  .jy .faq-item summary{padding:19px 0}
  .jy .faq-item>p{padding-right:18px}
  .jy .purchase-card{padding:28px 20px;border-radius:24px}
  .jy .annual-timeline{grid-template-columns:1fr;gap:10px;margin:24px 0}
  .jy .timeline-line{rotate:90deg;height:24px}
  .jy .purchase-points{grid-template-columns:1fr;gap:9px}
  .jy .buy-head{margin-top:40px}
  .jy .buy-grid{grid-template-columns:1fr;gap:12px}
  .jy .pc-buttons>*{flex:1 1 100%}
  .jy .buy-note{text-align:left;justify-content:flex-start;align-items:flex-start}
}

/* ── 降級：她只蓋了 .dimension-card 與 .button，我們做全域 ─────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .jy *,.jy *::before,.jy *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  html.jy-anim .jy .reveal{opacity:1;transform:none}
  .jy .product-card:hover,.jy .product-card:focus-within,.jy .thought:hover,
  .jy .dimension-row:hover,.jy .stage-chip:hover,.jy .button.primary:hover{translate:none}
}
html{scroll-behavior:smooth}


/* 2026-09-21 上線前對比修正：
   橘底卡片（#c2400e）上的年段標籤原本疊 12% 白，合成後底色變亮成 rgb(201,87,43)，
   白字對比掉到 4.26，低於正文需要的 4.5。改疊深色層讓底色變深，白字才站得住。 */
.jy .stage-chip{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.28)}
@media (hover:hover){.jy .stage-chip:hover{background:rgba(0,0,0,.26);translate:0 -2px}}


/* 2026-09-21 上線前對比修正之二：
   購買卡（橘底）裡的「第 1 次／第 2 次」小標與說明，原本是半透明白與淡色，
   合成後對比 4.30，低於 12px 正文需要的 4.5。小標改成深色藥丸配白字，說明文字改純白。 */
.jy .annual-timeline>div>span{background:rgba(0,0,0,.24);color:#fff;border-radius:99px;
  padding:3px 10px;display:inline-block;font-weight:700;letter-spacing:.06em}
.jy .annual-timeline>div>small{color:#fff;opacity:1}


/* 2026-09-21 上線前對比修正之三：
   兩張時間卡本身疊的是 12% 白（#ffffff1f），把橘底洗亮，裡面 12px 的說明文字
   合成後只有 4.30。外層一起改成深色疊層，白字才有 5:1 以上。 */
.jy .annual-timeline>div:not(.timeline-line){background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.3)}


/* 2026-09-21 上線前孤行修正：
   390px 下六處文字的末行只剩一到兩個字（按鈕文字、適合對象三條、報告註腳、兩個世界那句）。
   中文斷行規則是每行至少三字。用 text-wrap:pretty 讓瀏覽器自己避免末行過短，
   按鈕則直接不斷行；兩者都不改文案一個字。 */
.jy p,.jy li,.jy small,.jy .report-note{text-wrap:pretty}
.jy .button,.jy button{text-wrap:nowrap;white-space:nowrap}
@supports not (text-wrap:pretty){
  .jy .fit-list p,.jy .report-note{max-width:19em}
}


/* ── 圖示三層（2026-09-22）：底層柔和色塊／細線主體／實心重點，全部走 currentColor ── */
.ki .l1{fill:currentColor;opacity:.16}
.ki .l2{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ki .l3{fill:currentColor}
.jy .dimension-icon .ki .l1{opacity:.22}          /* 淡色底上讓色塊再明顯一點 */
.jy .insight-icon .ki .l1,.jy .connection .ki .l1{opacity:.28}
.jy .trust-list .ki .l1{opacity:.24}              /* 深色底上白橘圖示，底層要撐得住 */
.jy .fit-no .ki .l1{opacity:.12}
.jy .faq-item summary .ki .l2{stroke-width:2.2}   /* 只有一層線的箭頭，粗一點才看得到 */


/* 2026-09-22：「也請你知道它不能做什麼」那段掛在 .fit-no p 的 flex 規則底下，
   開頭的 <b> 變成一格、正文變另一格，整段被折成兩欄。這段沒有圖示，改回一般段落。 */
.jy .fit-no p.fit-limit{display:block}
.jy .fit-no p.fit-limit b{display:inline}
.nb-wrap{display:inline}