:root {
  --bg: #f7f5f0;
  --paper: #fffdf8;
  --ink: #2c2416;
  --muted: #6b6358;
  --accent: #8b6914;
  --accent-light: #c4a35a;
  --border: #e0d8c8;
  --danger: #a94442;
  --ok: #3c763d;
  --input-bg: rgba(148, 227, 254, 0.45);
  --input-border: rgba(0, 86, 214, 0.85);
  --font: "Noto Sans TC", "PingFang TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body.front-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

.front-shell {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

.front-banner {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.front-title {
  margin: 12px 0;
  font-size: clamp(1.15rem, 4.2vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
}

.front-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 22px;
  box-shadow: 0 2px 12px rgba(44, 36, 22, 0.06);
}

.front-card--center {
  text-align: center;
}

.front-form label {
  display: block;
  margin: 10px 0 6px;
  font-size: 1rem;
  text-align: center;
}

.front-form input[type="text"],
.front-form input[type="tel"],
.front-form select {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 1.05rem;
}

.front-btn {
  display: block;
  width: min(100%, 280px);
  margin: 18px auto 0;
  padding: 11px 16px;
  border: none;
  border-radius: 10px;
  background: #ffc107;
  color: #111;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.front-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.front-btn--ghost {
  background: #e9ecef;
  color: #333;
}

.front-msg {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  text-align: center;
}

.front-msg--error {
  background: rgba(255, 0, 0, 0.08);
  border: 1px solid rgba(255, 0, 0, 0.35);
  color: var(--danger);
}

.front-muted {
  color: var(--muted);
  font-size: 0.9rem;
}

.front-link {
  color: #2c1376;
  text-decoration: none;
}

.front-link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .front-shell {
    padding-bottom: 48px;
  }
}