:root{color:#402116;background:#fff9f2;font-family:system-ui,"Noto Sans TC","Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}
body{margin:0}
main{width:100%;max-width:760px;margin:auto;padding:0 12px 18px}
.hero{position:relative}
.hero img{width:100%;height:auto;display:block}
.hero a{position:absolute;left:7%;top:78%;width:45%;height:17%;border-radius:100px}
.hero a:focus-visible,.line-button:focus-visible{outline:3px solid #843400;outline-offset:4px}
.overview,.application{margin-top:12px;padding:18px 14px;border-radius:16px;background:#ffead6}
.application{background:#fff0e2}
h2{text-align:center;margin:0 0 7px;font-size:21px;font-size:clamp(21px,4.8vw,32px)}
#form-intro{text-align:center;margin:0 0 18px;font-size:14px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cards div{background:#fff8ef;border-radius:12px;display:grid;justify-items:center;gap:6px;text-align:center;padding:10px 4px;font-weight:700}
.cards svg{width:32px;fill:none;stroke:#a94b13;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#fields{display:grid;gap:10px}
.field{display:grid;grid-template-columns:minmax(78px,23%) minmax(0,1fr);align-items:center;gap:9px}
.field label,.field legend{font-weight:700;font-size:14px;font-size:clamp(13px,3.5vw,17px)}
.field input:not([type=checkbox]):not([type=radio]),.field select{width:100%;min-width:0;min-height:48px;padding:8px 11px;border:1px solid #9b8376;border-radius:9px;background:#fff;color:#402116;font:inherit;font-size:16px}
.field fieldset{border:1px solid #9b8376;border-radius:9px;min-width:0;margin:0}
.field fieldset label{display:block;padding:5px}
.reminder{background:#ffe0bc;border-radius:10px;padding:10px;margin:15px 0 12px;font-size:14px;line-height:1.5;text-align:center}
.reminder strong{color:#a44100}
#name-hint,#form-status{font-size:14px;margin:10px 0 0}
.line-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;margin-top:12px;padding:10px 6px;border:2px solid #d95700;border-radius:14px;background:#fff;color:#402116;font-size:16px;font-size:clamp(14px,3.8vw,24px);font-weight:800;cursor:pointer}
.line-logo{position:relative;display:grid;place-items:center;background:#008c30;color:#fff;border-radius:50%;width:45px;height:34px;margin-right:9px;font:bold 13px Arial;flex:none}
.line-logo:after{content:"";position:absolute;bottom:-4px;left:19px;border-top:7px solid #008c30;border-right:8px solid transparent}
.line-button:not(:disabled){animation:pulse 2.5s ease-in-out infinite}
.line-button:disabled{opacity:.72;cursor:default}
.line-button[aria-busy=true] .line-logo{display:none}
.line-button[aria-busy=true]:before{content:"";width:18px;height:18px;border:2px solid #ffd2ae;border-top-color:#ae4400;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,35%,100%{transform:scale(1)} 16%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.line-button:not(:disabled),.line-button[aria-busy=true]:before{animation:none}}