/* 燈箱與表單共用元件(Figma PC_0.2 / PC_1.0 / m_0.2 / m_1.0) */
.dlg {
    position: relative;
    box-sizing: content-box;
    width: 520px;
    max-width: calc(100% - 128px);
    padding: 60px 40px;
    border: 24px solid #ffb878;
    border-radius: 40px;
    background: #fff;
    color: #6c3a20;
    font-family: "Bpmf GenSen Rounded", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 700;
}
.dlg-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    background: url("../images/register/close.svg") no-repeat center / 100% 100%;
    cursor: pointer;
}
.dlg-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    line-height: normal;
    color: #6c3a20;
}
.dlg-title img { width: 48px; height: 48px; }

/* 紅色按鈕 */
.btn-red {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px 20px;
    border: 0;
    border-radius: 12px;
    background: #f54c40;
    color: #fff;
    font: 800 28px/normal "Bpmf GenSen Rounded", "Noto Sans TC", sans-serif;
    text-decoration: none;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
    cursor: pointer;
    filter: drop-shadow(0 4px 1px rgba(0, 0, 0, .25));
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .1);
}
.btn-red::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 64px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 12px;
    background: #f54c40;
    box-shadow: 0 10px 0 rgba(0, 0, 0, .2);
}
.btn-red span { position: relative; }
.liao, .hang { font-feature-settings: "ss01"; }
.btn-red:hover { filter: drop-shadow(0 4px 1px rgba(0, 0, 0, .25)) brightness(1.06); }
.btn-red:active { transform: translateY(3px); }
.btn-red:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }

/* ───── 註冊頁 ───── */
body.register {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(rgba(249, 231, 211, .55), rgba(249, 231, 211, .55)), url("../images/home/paper.jpg") top left / 1280px 1280px #f9e7d3;
}
.reg-page {
    flex: 1 0 auto;
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 828px;
    padding: 76px 10px 56px;
    overflow: hidden;
}
.reg-page .deco { position: absolute; pointer-events: none; transform: translateX(-50%); }
.reg-page .logo { position: absolute; left: max(30px, calc(50% - 610px)); top: 30px; width: 128px; height: 66px; }
.reg-dialog { display: flex; flex-direction: column; gap: 40px; z-index: 1; }
.reg-fields { display: flex; flex-direction: column; gap: 16px; }
.reg-row { display: flex; align-items: center; gap: 12px; }
.reg-row > label, .reg-row > .unit {
    flex: none;
    width: 145px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.6px;
    white-space: nowrap;
}
.reg-row > .unit { width: auto; }
.reg-hint {
    margin: -8px 0 0 157px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.48px;
    color: #6c3a20;
    opacity: .7;
}
.reg-row .pill {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    height: 60px;
    padding: 0 24px;
    border: 0;
    border-radius: 100px;
    background: #ffede3;
    color: #6c3a20;
    font: 700 20px/normal "Bpmf GenSen Rounded", "Noto Sans TC", sans-serif;
    letter-spacing: -.6px;
}
.reg-row .pill.no-bpmf { font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.pill-wrap { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.pill-wrap .ph {
    display: none;
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6c3a20;
    opacity: .5;
    font: 700 20px/normal "Bpmf GenSen Rounded", "Noto Sans TC", sans-serif;
    letter-spacing: -.6px;
    white-space: nowrap;
}
.pill-wrap .pill:placeholder-shown + .ph { display: block; }
.reg-row .pill::placeholder { color: #6c3a20; opacity: .5; }
.reg-row .pill:focus { outline: 2px solid #f54c40; }
.reg-row input.num { text-align: center; }
.reg-row select.pill {
    appearance: none;
    padding-right: 60px;
    background: #ffede3 url("../images/register/arrow.svg") no-repeat right 24px center / 22px 14px;
}
.reg-row input[type=number]::-webkit-inner-spin-button { appearance: none; }
.reg-row input[type=number] { appearance: textfield; -moz-appearance: textfield; }

.reg-bottom { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.consent {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -.6px;
    color: #1584ce;
}
.consent input {
    appearance: none;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    box-sizing: border-box;
    border: 2px solid #1584ce;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
}
.consent input:checked { border: 0; background: url("../images/register/check-on.svg") no-repeat center / 100% 100%; }
.consent label { text-decoration: underline; cursor: pointer; }
.consent a { color: inherit; }
.reg-error {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 16px;
}
.reg-back { text-align: center; margin: 0; font-size: 16px; }
.reg-back a { color: #6c3a20; }

.page-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    background: #594126;
    color: #fff;
    font: 700 18px "Bpmf GenSen Rounded", "Noto Sans TC", sans-serif;
    letter-spacing: -.54px;
}

/* 個資聲明(沿用註冊頁燈箱) */
/* 遮罩基底:本檔獨立可用(部分頁面未載入 style.css) */
.dlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    background: rgba(74, 46, 29, .7);
}
.dlg-overlay.show { display: flex; }
.dlg-overlay .dlg { flex: none; margin: auto; }
.consent-dlg { gap: 24px; }
.consent-box { box-sizing: border-box; width: 100%; height: 400px; padding: 24px 14px 24px 0; border-radius: 24px; background: #fff5f0; }
.consent-scroll { box-sizing: border-box; height: 100%; overflow-y: auto; padding: 8px 14px 8px 40px; }
.consent-scroll::-webkit-scrollbar { width: 12px; }
.consent-scroll::-webkit-scrollbar-track { border-radius: 100px; background: #fccdb4; }
.consent-scroll::-webkit-scrollbar-thumb { border-radius: 100px; background: #b7724e; }
@supports not selector(::-webkit-scrollbar) { .consent-scroll { scrollbar-color: #b7724e #fccdb4; } }
.consent-text { display: flex; flex-direction: column; gap: 24px; color: #000; font-size: 16px; line-height: 1.2; letter-spacing: -.48px; text-align: left; }
.consent-text p, .consent-text h3, .consent-text h4 { margin: 0; }
.consent-main { display: flex; flex-direction: column; gap: 12px; }
.consent-list { display: flex; flex-direction: column; gap: 16px; counter-reset: consent; }
.consent-list > div { display: flex; flex-direction: column; gap: 8px; }
.consent-list h3 { counter-increment: consent; color: #823913; font-size: 16px; font-weight: 800; }
.consent-list h3::before { content: counter(consent) ". "; }
.consent-foot { display: flex; flex-direction: column; gap: 8px; }
.consent-foot h4 { font-size: 16px; font-weight: 800; }

/* ───── 得獎名單燈箱 ───── */
.win-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(74, 46, 29, .7);
}
.win-overlay.show { display: flex; }
.win-dlg { display: flex; flex-direction: column; align-items: center; gap: 24px; max-height: calc(100vh - 200px); overflow-y: auto; }
.win-head { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.win-note { margin: 0; color: #bf7955; font-size: 20px; text-align: center; }
.win-tables { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.win-table { border: 1px solid #f4c2a8; border-radius: 12px; overflow: hidden; }
.win-table h3 {
    margin: 0;
    padding: 16px 10px;
    background: #ffcfa3;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
}
.win-table h3 b { color: #f65400; font-weight: 800; }
.win-grid { display: grid; grid-template-columns: 240px 1fr 130px; width: 100%; font-size: 18px; }
.win-grid > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 10px;
    border-bottom: 1px solid #f4c2a8;
    background: #ffede3;
    color: #6c3a20;
}
.win-grid > .th { border-bottom: 0; background: #895337; color: #fff; }
.win-grid > .th.mid { background: #b3795b; }
.win-grid > .mid { background: #fff9f6; }
.win-grid > .prize { justify-content: flex-start; gap: 4px; padding: 16px 24px; }
.win-grid > .prize em { font-style: normal; color: #a16647; }
.win-grid > .last { border-bottom: 0; }
.win-grid .no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 2px;
    background: no-repeat center / 100% 100%;
    color: #fff;
    font-size: 14.5px;
    font-style: normal;
}
.win-grid .no-1 { background-image: url("../images/home/rank-1.svg"); }
.win-grid .no-2 { background-image: url("../images/home/rank-2.svg"); }
.win-grid .no-3 { background-image: url("../images/home/rank-3.svg"); }
.win-empty { grid-column: 1 / -1; justify-content: center; border-bottom: 0 !important; color: #a16647 !important; }

/* ───── 健康檢測(前測/後測) ───── */
.survey-dlg { width: 820px; display: flex; flex-direction: column; align-items: center; gap: 40px; z-index: 1; }
.sv-list { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.sv-row { display: flex; align-items: center; gap: 24px; }
.sv-q { flex: 1 1 0; min-width: 0; padding-left: 30px; text-indent: -30px; font-size: 20px; line-height: 1.5; }
.sv-no { display: inline-block; width: 30px; text-indent: 0; }
.sv-block { display: flex; flex-direction: column; gap: 16px; }
.sv-choices { display: flex; padding-left: 30px; }
.sv-choices.col { flex-direction: column; gap: 16px; }
.sv-choices.row { flex-wrap: wrap; gap: 16px; }
.sv-choices label, .sv-opts label { display: flex; align-items: center; gap: 8px; font-size: 20px; letter-spacing: -.6px; cursor: pointer; }
.sv-opts { display: flex; flex: none; gap: 16px; }
.sv-opts label { display: flex; align-items: center; gap: 8px; font-size: 20px; cursor: pointer; }
.sv-opts input, .sv-choices input, .sat-pick input {
    appearance: none;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    box-sizing: border-box;
    border: 2px solid #de6d33;
    border-radius: 2.4px;
    background: #fff;
    cursor: pointer;
}
.sv-opts input:checked, .sv-choices input:checked, .sat-pick input:checked { border: 0; background: url("../images/register/check-main.svg") no-repeat center / 100% 100%; }
.survey-dlg .reg-error { width: 100%; box-sizing: border-box; }
.sv-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: -28px; }
.sv-head p { margin: 0; font-size: 20px; line-height: 1.2; text-align: center; }
.sv-badge { padding: 14px 24px; border: 4px solid #ffb878; border-radius: 100px; background: #526023; color: #fff; font-size: 28px; font-weight: 800; white-space: nowrap; }

/* ───── 前後測結果 ───── */
.rs-section { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.rs-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rs-head p { margin: 0; font-size: 20px; line-height: 1.5; text-align: center; }
.rs-table { border: 6px solid #ffb878; border-radius: 24px; overflow: hidden; background: #526023; }
.rs-row { display: flex; align-items: stretch; color: #fff; font-size: 18px; line-height: 1.5; }
.rs-row + .rs-row { border-top: 1px solid #9ca972; }
.rs-row > div { display: flex; align-items: center; justify-content: center; padding: 16px; }
.rs-row .c1 { flex: none; width: 100px; box-sizing: border-box; border-right: 1px solid #9ca972; font-weight: 800; }
.rs-row .c2 { flex: none; width: 200px; box-sizing: border-box; border-right: 1px solid #9ca972; }
.rs-row .cf { display: block; align-self: center; flex: 1 1 0; min-width: 0; text-align: left; }
.rs-row.odd { background: #526023; }
.rs-row.even { background: #62722d; }
.rs-th { background: #3e4d0d; color: #ffee69; font-weight: 800; }
.rs-th .cf { text-align: center; }
a.btn-red { text-decoration: none; }
.btn-red .btn-ico { position: relative; width: 28px; height: 28px; margin-left: 8px; }
.br-m, .th-m { display: none; }

/* ───── 滿意度及行為調查(Figma PC_7.0 / 7.1) ───── */
.sat-head { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.sat-head .dlg-title { margin: 0; }
.sat-head p { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 500; text-align: center; }
.sat-legend { display: flex; justify-content: center; gap: 24px; }
.sat-legend span { display: flex; align-items: center; gap: 4px; font-size: 20px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.sat-legend img { width: 32px; height: 32px; }
.sat-table { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.sat-row { display: flex; align-items: center; gap: 24px; }
.sat-q { flex: 1 1 0; min-width: 0; padding-left: 30px; text-indent: -30px; font-size: 20px; line-height: 1.5; }
.sat-no { display: inline-block; width: 30px; text-indent: 0; }
.sat-pick { display: flex; flex: none; align-items: center; justify-content: space-between; box-sizing: border-box; width: 199px; padding: 0 4px; }
.sat-pick label { display: flex; align-items: center; }
.sat-lab { display: none; }
.sat-th .sat-q { padding: 0; text-indent: 0; text-align: center; line-height: 1.2; }
.sat-th .sat-pick { padding: 0; }
.sat-th .sat-pick img { width: 32px; height: 32px; }
.sat-thanks-dlg { width: 440px; margin: auto; }
.sat-thanks { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 100%; }
.sat-thanks img.ok { width: 120px; height: auto; }
.sat-thanks h2 { margin: 0; font-size: 32px; font-weight: 800; line-height: normal; text-align: center; }
.sat-thanks .sv-badge { font-size: 24px; padding: 12px 24px; }
.sat-pick input:disabled { cursor: default; opacity: .75; }

/* ───── 登入燈箱 ───── */
.login-dlg { display: flex; flex-direction: column; gap: 40px; }
.login-form { display: flex; flex-direction: column; gap: 40px; align-items: stretch; }
.login-dlg .reg-row > label { width: auto; }
.login-actions { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.login-link { color: #1584ce; font-size: 20px; letter-spacing: -.6px; text-decoration: underline; }

/* ───── 手機 ───── */
@media (max-width: 799px) {
    .dlg { box-sizing: border-box; width: 100%; max-width: 100%; padding: 40px 24px; border-width: 12px; border-radius: 40px; }
    .win-dlg, .dlg-overlay .dlg { max-height: calc(100vh - 32px); }
    .dlg-close { top: 8px; right: 8px; width: 48px; height: 48px; }
    .dlg-title { font-size: 22px; }
    .dlg-title img { width: 36px; height: 36px; }
    .btn-red { font-size: 20px; padding: 12px 16px 16px; }
    .btn-red::before { height: 52px; }

    .reg-page { padding: 90px 16px 30px; min-height: 0; }
    .reg-page .logo { left: 20px; top: 16px; width: 98px; height: 50px; }
    .reg-page .deco { display: none; transform: none; left: auto !important; top: auto !important; bottom: auto !important; }
    .reg-page .deco-cocoa { display: block; right: -25.34px; bottom: -29.01px !important; width: 132.336px !important; height: 110.012px !important; }
    .reg-page .deco-fish { display: block; left: -46px !important; bottom: -16.33px !important; width: 156.764px !important; height: 114.33px !important; }
    .reg-page .deco-banana { display: block; right: -26.32px; top: 16px !important; width: 141.322px !important; height: 119.371px !important; }
    .reg-page .deco-waxapple { display: block; left: -23.73px !important; top: 57px !important; width: 129.238px !important; height: 113.92px !important; }
    .reg-dialog { gap: 24px; width: 100%; max-width: 343px; }
    .reg-dialog .dlg-title, .login-dlg .dlg-title { gap: 4px; font-size: 24px; }
    .reg-dialog .dlg-title img, .login-dlg .dlg-title img { width: 40px; height: 40px; }
    .reg-row { flex-wrap: wrap; gap: 12px; }
    .reg-row > label { width: 100%; font-size: 16px; line-height: 1.1; letter-spacing: -.48px; }
    .reg-hint { margin: -4px 0 0; font-size: 12px; letter-spacing: -.6px; white-space: nowrap; }
    .pill-wrap { flex-basis: 100%; }
    .pill-wrap .ph { font-size: 16px; letter-spacing: -.48px; }
    .reg-row .pill { height: 56px; font-size: 16px; letter-spacing: -.48px; padding: 0 24px; }
    .reg-row .unit { font-size: 16px; letter-spacing: -.48px; }
    .reg-row.cls > label { width: 100%; }
    .reg-row select.pill { padding-right: 44px; background-position: right 16px center; background-size: 16px 10px; }
    .survey-dlg { width: 100%; gap: 28px; }
    .sv-head { margin-top: -16px; }
    .sv-head p { font-size: 16px; }
    .sv-badge { padding: 10px 20px; font-size: 22px; }
    .sv-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sv-q { font-size: 20px; padding-left: 30px; text-indent: -30px; }
    .sv-no { width: 30px; }
    .sv-opts, .sv-choices { padding-left: 30px; }
    .sv-opts label, .sv-choices label { font-size: 20px; }
    .sv-choices.row { gap: 16px 24px; }
    .survey-dlg > .dlg-title { gap: 4px; font-size: 24px; }
    .survey-dlg > .dlg-title img { width: 40px; height: 40px; }
    .br-m, .th-m { display: inline; }
    .dlg.consent-dlg { gap: 24px; padding: 40px 16px; }
    .consent-box { padding-right: 8px; }
    .consent-scroll { padding: 8px 8px 8px 24px; }
    .consent-dlg .btn-red { font-size: 24px; }
    .rs-section { gap: 12px; }
    .rs-head .dlg-title { gap: 4px; font-size: 24px; line-height: 1.2; }
    .rs-head .dlg-title img { width: 40px; height: 40px; }
    .rs-head p { font-size: 20px; }
    .rs-row { flex-wrap: wrap; font-size: 20px; }
    .rs-row > div { padding: 8px 16px; }
    .rs-row .c1 { flex: 1 1 50%; width: auto; white-space: nowrap; }
    .rs-row .c1 + .c1 { border-right: 0; }
    .rs-row .c2 { flex: 1 1 100%; width: auto; border-right: 0; white-space: nowrap; }
    .rs-row .cf { flex: 1 1 100%; padding: 16px; border-top: 1px solid #9ca972; }
    .rs-th > div { padding: 16px 8px; }
    .rs-th .cf { display: none; }
    .rs-th .c2 { white-space: pre; }
    .btn-red .btn-ico { width: 24px; height: 24px; margin-left: 0; }
    .btn-red:has(.btn-ico) { font-size: 24px; line-height: 1.2; }
    .btn-red:has(.btn-ico)::before { height: 76px; }
    .survey-dlg:has(.sat-head) { gap: 24px; }
    .sat-head .dlg-title { gap: 4px; font-size: 24px; }
    .sat-head .dlg-title img { width: 40px; height: 40px; }
    .sat-legend { flex-direction: column; align-items: flex-start; align-self: flex-start; gap: 12px; padding-left: 4px; }
    .sat-legend img { width: 28px; height: 28px; }
    .sat-legend span { gap: 8px; }
    .sat-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sat-pick { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; width: 100%; padding: 0 0 0 30px; }
    .sat-pick label { gap: 8px; font-size: 20px; line-height: 1.5; }
    .sat-lab { display: inline; }
    .sat-th { display: none; }
    form.survey-dlg .btn-red { min-width: 193px; }
    .sat-thanks { gap: 16px; }
    .sat-thanks img.ok { width: 80px; }
    .sat-thanks h2 { font-size: 20px; }
    .sat-thanks .sv-badge { padding: 8px 20px; font-size: 20px; }
    .login-dlg, .login-form { gap: 24px; }
    .login-dlg .reg-row > label { width: 100%; font-size: 16px; }
    .login-dlg .reg-row .pill { height: 60px; font-size: 16px; padding: 0 24px; }
    .login-link { font-size: 16px; letter-spacing: -.48px; }
    #login-modal { align-items: flex-start; padding-top: 50px; }
    .login-actions .btn-red { min-width: 120px; font-size: 24px; padding: 12px 24px 16px; }
    .consent { font-size: 16px; line-height: 1.5; letter-spacing: -.48px; }
    .reg-bottom { gap: 24px; align-self: stretch; }
    .reg-bottom .btn-red { width: 100%; font-size: 24px; line-height: 1.2; padding: 12px 24px 16px; }
    .reg-bottom .btn-red::before { height: 86px; }
    .page-footer { font-size: 16px; }

    .win-note { font-size: 16px; }
    .win-table h3 { font-size: 16px; padding: 12px 8px; }
    .win-grid { grid-template-columns: 1.2fr 1fr 1.1fr; font-size: 16px; }
    .win-grid > div { padding: 12px 4px; }
    .win-grid > .prize { padding: 12px 8px; flex-wrap: wrap; justify-content: center; }
    .win-grid .no { width: 20px; height: 20px; font-size: 14px; }
}

/* ───── 動態效果 ───── */
/* 燈箱由下往上淡入;裝飾雲朵與農產品的循環飄動定義於 motion.css */
.reg-page > .dlg { animation: mFadeUp .7s ease-out backwards; }
.reg-page > .dlg-overlay .dlg, .dlg-overlay .dlg { animation: mPop .45s ease-out backwards; }