/**
 * ==============================================================================
 * Project: 植香芳療｜預約與問卷紀錄系統（WEB-202609-008）
 * Author: Ray (施睿皇) - Jingrui Design Studio
 * Email: jingrui.ray@gmail.com
 * Contact: services@jingruidesign.com
 * Created: 2026-09-30 17:20
 * Version: 1.0.0
 *
 * Copyright (c) 2026 Jingrui Design Studio. All rights reserved.
 *
 * Unauthorized use, reproduction, or distribution is prohibited.
 * ==============================================================================
 *
 * 檔案：src/web/styles.css
 * 操作流程：由 index.html 載入；手機優先，色彩集中於 :root 變數。
 * 更新日誌：1.0.0 - 初始版本建立（2026-09-30）
 */
:root {
  --bg: #f6f8f5; --card: #ffffff; --ink: #2b2b2b; --muted: #6b6b6b; --brand: #3d5a45; --brand-ink: #ffffff;
  --line: #cfd9d1; --soft: #eef3ef; --warn: #a33a2f; --warn-bg: #fbeceb; --focus: #1f6feb;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161a17; --card: #1f2621; --ink: #ecefec; --muted: #a9b3ab; --brand: #8fb89a; --brand-ink: #10160f; --line: #34413a; --soft: #26302a; --warn: #ffb4ab; --warn-bg: #3a1f1c; --focus: #79a8ff; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; line-height: 1.7; font-size: 16px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 20px 16px 8px; }
main.wrap { background: var(--card); margin: 12px auto; border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; }
h1 { font-size: 1.35rem; color: var(--brand); margin: 0 0 12px; line-height: 1.4; }
.lead { font-size: 1.05rem; margin: 6px 0 14px; }
.note { color: var(--muted); font-size: .92rem; }
.note.warn { color: var(--warn); }
.step { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
.bar { height: 6px; background: var(--soft); border-radius: 4px; margin: 0 0 16px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--brand); }
.field { margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { font-weight: 600; font-size: .95rem; }
input[type=text], input[type=tel], input[type=email], input[type=number], select, textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.q { margin: 0 0 18px; }
.qlabel { font-weight: 700; margin: 8px 0; }
.opt, .check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; font-weight: 400; cursor: pointer; }
.opt input, .check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.check { border-style: dashed; }
.notice { background: var(--soft); border-radius: 10px; padding: 10px 14px; margin: 12px 0; font-size: .92rem; }
.notice p { margin: 4px 0; }
.btn { font: inherit; font-weight: 700; border: 1px solid var(--brand); background: var(--card); color: var(--brand); border-radius: 12px; padding: 12px 18px; min-height: 48px; cursor: pointer; }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.big { display: block; width: 100%; margin: 10px 0; }
.btn:disabled { opacity: .55; cursor: wait; }
.nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 18px; }
.nav .btn { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.chip { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 14px; min-height: 44px; cursor: pointer; }
.chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.err { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 6px 16px 26px; }
.footer a { color: inherit; }
@media (max-width: 380px) { .row { grid-template-columns: 1fr; } }