:root{color-scheme:light;--ink:#201D24;--muted:#625D69;--paper:#F5F3F7;--purple:#E0CEE9;--gold:#F4D095;--green:#BEE0C6;--red:#F4C6C6;--blue:#B1DEED;--line:#e7e2eb;--outline:rgb(98 93 105 / .4);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.65}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
button,input,select{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #625D69;outline-offset:3px}
[hidden]{display:none!important}
.shell{max-width:820px;padding:0 40px;margin:auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px;border-bottom:1px solid var(--line)}
.brand{font-size:1.3rem;font-weight:800;text-decoration:none;letter-spacing:.04em}
nav{display:flex;gap:24px}
nav a{font-size:.9rem;color:var(--muted);text-decoration:none;padding:10px 0}
nav a:hover{text-decoration:underline}
main{padding:44px 0 60px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow{font-size:.875rem;color:var(--muted);margin:0 0 8px}
h1{font-size:clamp(1.7rem,4vw,2.3rem);line-height:1.3;margin:0;font-weight:750;letter-spacing:.02em}
h2{font-size:1.2rem;line-height:1.45;margin:0 0 8px}
.identity{font-size:.9rem;color:var(--muted);margin:0}
.heading-note{font-size:.9rem;color:var(--muted);margin:10px 0 0}
.gate,.result{padding:30px 32px;border:1px solid var(--line);border-top:3px solid var(--purple);border-radius:12px;margin-bottom:28px}
.gate p,.result p{color:var(--muted);margin:0 0 18px}
.result.is-good{border-top-color:var(--green)}
.result.is-wait{border-top-color:var(--gold)}
.result.is-bad{border-top-color:var(--red)}
.result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.primary-link,.primary-button{display:inline-block;min-height:46px;padding:10px 22px;border:1px solid var(--purple);border-radius:7px;background:var(--purple);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer}
.primary-button:disabled{opacity:.55;cursor:not-allowed}
.text-link{font-size:.9rem;color:var(--muted);text-underline-offset:4px}
fieldset{border:0;padding:0;margin:0 0 28px;min-width:0}
legend{padding:0;margin-bottom:12px;font-weight:700}
.options{display:grid;gap:12px}
.methods{grid-template-columns:repeat(2,minmax(0,1fr))}
.option{position:relative;display:block;padding:16px 18px 16px 50px;border:1.5px solid var(--outline);border-radius:10px;cursor:pointer}
.option input{position:absolute;left:18px;top:21px;width:18px;height:18px;margin:0;accent-color:#625D69}
.option:has(input:checked){border-color:var(--muted);background:var(--paper)}
.option.is-disabled{cursor:not-allowed;color:var(--muted);background:#fbfafc}
.option-top{display:flex;justify-content:space-between;gap:14px;font-weight:700}
.option-price{white-space:nowrap}
.option small{display:block;margin-top:4px;font-size:.875rem;color:var(--muted)}
.option .option-reason{color:var(--ink)}
.months-control{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;align-items:center;margin-top:16px}
.months-control label{font-weight:600}
.months-control select{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--outline);border-radius:7px;background:#fff;color:var(--ink)}
.terms{padding:20px 22px;margin-bottom:28px;border:1px solid var(--gold);border-left:4px solid var(--gold);border-radius:8px}
.terms h2{font-size:1rem}
.terms p{margin:0 0 10px;font-size:.9rem;color:var(--muted)}
.check{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:#625D69}
.summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.summary p{margin:0;font-weight:700}
.form-message{margin:14px 0 0;padding:12px 16px;border-left:4px solid var(--red);background:#fdf6f6;border-radius:6px;font-size:.9rem}
.footnote{font-size:.875rem;color:var(--muted);margin:18px 0 0}
.pay-info{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 18px;padding:16px 18px;background:var(--paper);border-radius:8px}
.pay-info dt{color:var(--muted);font-size:.9rem}
.pay-info dd{margin:0;font-weight:700;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.orders{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.order{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
.order b{overflow-wrap:anywhere}
.order small{color:var(--muted);font-size:.85rem}
.order a{font-size:.9rem;text-underline-offset:4px}
.badge{align-self:start;font-size:.8rem;white-space:nowrap;border-radius:5px;padding:3px 9px;background:var(--paper)}
.badge.is-good{background:var(--green)}
.badge.is-wait{background:var(--gold)}
.badge.is-bad{background:var(--red)}
.payment-details{margin-top:10px;font-size:.875rem;color:var(--muted)}
.payment-details summary{cursor:pointer;width:fit-content;padding:4px 0}
.payment-details summary:focus-visible{outline:3px solid var(--muted);outline-offset:3px}
.payment-details p{margin:10px 0 0}
.howto ol{margin:0;padding-left:1.3em}
.summary-lines{display:grid;gap:2px}
.summary-lines small{font-size:.875rem;font-weight:400;color:var(--muted)}
.progress{display:flex;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.progress li{flex:1;padding:8px 10px;border-radius:6px;background:var(--paper);font-size:.85rem;color:var(--muted);text-align:center}
.progress li.is-done{background:var(--green);color:var(--ink)}
.progress li.is-current{background:var(--gold);color:var(--ink);font-weight:700}
.progress li.is-problem{background:var(--red);color:var(--ink);font-weight:700}
.pay-info dd.is-code{font-size:1.5rem;letter-spacing:.08em}
.howto{margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);border-radius:8px}
.howto h3{font-size:1rem;margin:0 0 8px}
.howto li{margin:0 0 4px}
.howto-note{font-size:.875rem;margin:10px 0 0!important}
.next-list{margin:0 0 18px;padding-left:1.3em}
.next-list li{margin:0 0 4px}
footer{border-top:1px solid var(--line);padding:24px 0 32px;font-size:.875rem;color:var(--muted)}
footer a{text-underline-offset:3px;overflow-wrap:anywhere}
.alternative-payment{margin:0 0 14px}
footer address{display:flex;flex-wrap:wrap;gap:6px 20px;font-style:normal}
@media(max-width:720px){.shell{padding:0 20px}.header{min-height:72px}nav{gap:16px}main{padding-top:30px}.page-heading{align-items:flex-start;flex-direction:column;gap:10px}.methods{grid-template-columns:1fr}.gate,.result{padding:24px 20px}.summary{flex-direction:column;align-items:stretch;text-align:center}.pay-info{grid-template-columns:1fr;gap:2px}.progress{flex-direction:column}.progress li{text-align:left}.pay-info dd{margin-bottom:8px}footer address{flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:no-preference){.option,.primary-button,.primary-link{transition:background-color .15s,border-color .15s}}