:root { --gold:#dfbf86; --gold-deep:#b78d49; --ink:#443a2e; --muted:#796f63; --cream:#fffaf2; --line:#eadcc5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1080px, calc(100% - 40px)); margin:auto; }
.hero { position:relative; overflow:hidden; min-height:530px; display:grid; place-items:center; background:linear-gradient(140deg,#fffdf9 0%,#f7ead7 100%); border-radius:0 0 46px 46px; }
.hero__glow { position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(223,191,134,.18); filter:blur(2px); top:-300px; right:-210px; }
.hero__content { position:relative; text-align:center; padding:68px 0 46px; }
.brand-lockup { display:inline-grid; gap:6px; justify-items:center; color:#d8af61; }
.brand-lockup__wordmark { font-family:Georgia,"Times New Roman",serif; font-size:clamp(68px,12vw,120px); font-weight:400; line-height:.8; letter-spacing:-.09em; }
.brand-lockup__wordmark span { font-style:italic; margin-left:.04em; }
.brand-lockup__rule { width:120px; border-top:1px solid currentColor; opacity:.65; }
.brand-lockup__tagline { letter-spacing:.25em; font-size:11px; font-weight:600; }
.hero__intro { max-width:470px; margin:34px auto 25px; color:#655b4c; font-size:16px; line-height:1.8; }
.hero__actions { display:grid; justify-items:center; gap:14px; }
.button { min-height:52px; padding:0 27px; border:0; border-radius:999px; font-weight:700; transition:.2s transform,.2s box-shadow; }
.button:hover { transform:translateY(-2px); box-shadow:0 9px 18px rgba(112,81,35,.18); }
.button--primary { color:#fff; background:linear-gradient(135deg,var(--gold),#c99b52); }
.button span { margin-left:12px; }
.hero__secondary-actions { display:flex; gap:18px; }
.text-button { border:0; color:#6d5a3e; background:transparent; text-decoration:none; padding:5px 2px; border-bottom:1px solid #cbb183; }
.trust-list { margin:30px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; color:#6d5f4e; font-size:14px; }
.trust-list span { color:var(--gold-deep); }
.services-section { padding:62px 0 70px; }
.section-heading { text-align:center; max-width:600px; margin:0 auto 28px; }
.eyebrow { color:var(--gold-deep); font-size:12px; letter-spacing:.16em; font-weight:700; margin:0 0 10px; }
h1,h2 { font-family:"Noto Serif TC",Georgia,serif; margin:0; }
h1 { font-size:clamp(25px,4vw,34px); }
h2 { font-size:26px; }
.section-heading > p:last-child { color:var(--muted); line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-card { border:1px solid var(--line); border-radius:18px; background:#fff; padding:24px; text-align:left; transition:.2s transform,.2s border-color,.2s box-shadow; }
.service-card:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 14px 25px rgba(85,64,34,.09); }
.service-card__category { color:var(--gold-deep); font-size:12px; letter-spacing:.12em; }
.service-card h3 { margin:10px 0 7px; font-size:20px; }
.service-card p { color:var(--muted); line-height:1.6; font-size:14px; min-height:45px; }
.service-card__meta { display:flex; justify-content:space-between; color:#6d5a3e; font-size:13px; border-top:1px solid #f2eadf; padding-top:15px; margin-top:18px; }
.service-card button { margin-top:20px; width:100%; min-height:40px; border:1px solid var(--gold); border-radius:10px; color:#7c5f32; background:#fffaf2; font-weight:700; }
.appointment-section { background:#f2e7d7; padding:42px 0; }
.appointment-card,.dialog__card { position:relative; max-width:760px; margin:auto; padding:32px; border-radius:22px; background:#fff; box-shadow:0 18px 44px rgba(79,58,27,.1); }
.booking-steps{display:flex;align-items:center;gap:7px;margin:0 0 18px}.booking-steps span{display:grid;place-items:center;width:26px;height:26px;border:1px solid #d9c6a5;border-radius:50%;color:#9a896f;font-size:12px;font-weight:700}.booking-steps span.is-active{color:#fff;background:var(--gold);border-color:var(--gold)}.booking-steps i{width:26px;border-top:1px solid #d9c6a5}.booking-review{margin-top:22px;padding:21px;border:1px solid var(--line);border-radius:14px;background:#fffaf2}.booking-review h3{margin:0 0 12px;font-size:20px}.booking-review dl{display:grid;grid-template-columns:110px 1fr;gap:9px;margin:0}.booking-review dt{color:#897d6f}.booking-review dd{margin:0;font-weight:700}.review-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.close-button { position:absolute; right:18px; top:14px; border:0; background:transparent; color:#897b69; font-size:31px; line-height:1; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
label { display:grid; gap:7px; margin-top:18px; color:#5e5143; font-size:14px; font-weight:700; }
input,select,textarea { width:100%; border:1px solid #ddcfba; border-radius:9px; background:#fffdf9; padding:12px; color:var(--ink); }
textarea { resize:vertical; }
form .button { margin-top:21px; }
.form-note { color:#897e70; font-size:12px; line-height:1.55; }
footer { text-align:center; padding:25px; color:#8a7d6d; font-size:12px; }
.dialog { border:0; padding:0; background:transparent; max-width:min(520px,calc(100% - 30px)); }
.dialog::backdrop { background:rgba(47,38,27,.48); backdrop-filter:blur(3px); }
.dialog__card { padding:32px; }
.dialog__card--success { text-align:center; }
.success-mark { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 17px; border-radius:50%; color:#fff; background:#a88652; font-size:27px; }
.member-result { margin-top:18px; padding:14px; border-radius:10px; color:#4a4033; background:#fff7e9; line-height:1.7; }
.glowv-date-picker { position:relative; }
.glowv-date-picker__trigger { width:100%; min-height:48px; padding:12px 42px 12px 14px; border:1px solid #ddcfba; border-radius:9px; color:var(--ink); background:#fffdf9; text-align:left; font-weight:600; }
.glowv-date-picker__trigger::after { content:"⌄"; position:absolute; right:14px; top:12px; color:#735b34; font-size:20px; line-height:1; pointer-events:none; }
.glowv-date-picker__trigger:disabled { color:#a29789; cursor:not-allowed; }
.glowv-date-picker__panel { position:absolute; z-index:30; top:calc(100% + 7px); left:0; width:min(330px,100%); padding:13px; border:1px solid var(--line); border-radius:12px; background:#fffdf9; box-shadow:0 16px 34px rgba(73,54,25,.18); }
.glowv-date-picker__nav { display:grid; grid-template-columns:34px 1fr 34px; align-items:center; text-align:center; margin-bottom:10px; }
.glowv-date-picker__nav button { height:30px; border:0; border-radius:7px; color:#725a32; background:transparent; font-size:24px; line-height:1; }
.glowv-date-picker__nav button:not(:disabled):hover { background:#f5e5c9; }
.glowv-date-picker__nav button:disabled { color:#d6cbbb; cursor:default; }
.glowv-date-picker__week,.glowv-date-picker__days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.glowv-date-picker__week { margin-bottom:5px; color:#9a896f; font-size:11px; }
.glowv-date-picker__day,.glowv-date-picker__blank { display:grid; place-items:center; min-height:33px; }
.glowv-date-picker__days > :first-child { grid-column-start:var(--start-day); }
.glowv-date-picker__day { border:0; border-radius:50%; color:#5e4d36; background:#f8ead1; font-weight:700; }
.glowv-date-picker__day:hover,.glowv-date-picker__day.is-selected { color:#fff; background:var(--gold-deep); }
.glowv-date-picker__blank { pointer-events:none; }
.remember-profile { display:flex; flex-wrap:wrap; align-items:center; gap:9px 16px; margin-top:18px; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:#fffaf2; }
.remember-profile__choice { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; }
.remember-profile__choice input { width:17px; height:17px; accent-color:var(--gold-deep); }
.remember-profile p { width:100%; margin:0; color:#8a7d6d; font-size:11px; line-height:1.5; }
.remember-profile .text-button { font-size:12px; }
@media (max-width:700px) { .shell { width:min(100% - 28px,1080px); } .hero { min-height:455px; border-radius:0 0 28px 28px; } .hero__content { padding:48px 0 28px; } .brand-lockup__wordmark { font-size:74px; } .hero__intro { margin:25px auto 18px; font-size:14px; } .trust-list { margin-top:20px; gap:8px 15px; font-size:12px; } .services-section { padding:35px 0 45px; } .service-grid { grid-template-columns:1fr; gap:12px; } .service-card { padding:18px; } .service-card p { min-height:auto; } .form-grid { grid-template-columns:1fr; gap:0; } .appointment-card,.dialog__card { padding:27px 19px; } }