/* 公用樣式庫 - 適用於服務信箱四個步驟頁面 */

:root {
  --main-blue: #005fa3;
  --main-blue-dark: #004785;
  --main-border: #004785;
  --light-bg: #f5f8fb;
  --light-gray: #ccc;
  --text-dark: #333;
  --highlight-blue: #004785;
}

body {
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  background-color: var(--light-bg);
  color: var(--text-dark);
  margin: 0;
  padding: 40px;
}

h1, h2, h3, h4 {
  color: var(--highlight-blue);
  font-weight: 600;
  margin-bottom: 0.5em;
}

h2 {
  border-bottom: 2px solid var(--highlight-blue);
  padding-bottom: 10px;
}

.notice-box,
.card-box {
  border: 1px solid var(--light-gray);
  border-left: 5px solid var(--main-blue);
  background-color: #fff;
  padding: 20px 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.notice-box h3,
.card-box h3 {
  color: var(--main-blue);
  margin-top: 1em;
  margin-bottom: 0.3em;
}

.notice-box a,
.card-box a {
  color: var(--main-blue);
  text-decoration: underline;
}

.action-area {
  margin-top: 30px;
  text-align: center;
}

#agreeChk,
input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 8px;
}

button,
.btn-primary {
  background-color: var(--main-blue);
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover,
.btn-primary:hover {
  background-color: var(--main-blue-dark);
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

input[type="text"],
input[type="email"],
textarea, select {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #767676;
  border-radius: 4px;
  font-size: 93.75%;
  box-sizing: border-box;
}

.alert {
  padding: 12px;
  border-radius: 4px;
  margin-top: 15px;
  font-size: 93.75%;
}

.alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
  border-left: 5px solid #198754;
}

.alert-danger {
  background-color: #f8d7da;
  color: #842029;
  border-left: 5px solid #dc3545;
}

@media (max-width: 768px) {
  body {
    padding: 20px;
  }

  .notice-box,
  .card-box {
    padding: 15px;
  }

  button,
  .btn-primary {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* ===== 進度列 progressBar（由 progressBar.aspx 移入）===== */
.stepper-dash{
  --blue-600:#2563eb; --blue-400:#60a5fa; --blue-800:#1e40af;
  --green:#22c55e; --green-300:#86efac; --green-400:#4ade80;
  --gray-300:#d1d5db; --gray-500:#6b7280;
  background:#fff; border:1px solid #bfdbfe; border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding:24px 16px; margin:0 auto 32px; max-width:960px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.stepper-dash .node{ flex:0 0 auto; width:20%; min-width:120px; text-align:center; position:relative; }
.stepper-dash .circle{
  width:40px; height:40px; margin:0 auto;
  border-radius:999px; border:4px solid var(--gray-300);
  display:flex; align-items:center; justify-content:center;
  background:#f3f4f6; color:#374151; font-weight:700; font-size:0.875rem;
  box-shadow:0 1px 2px rgba(0,0,0,.06); transition:.2s ease;
}
.stepper-dash .label{ margin-top:8px; font-size:0.75rem; color:var(--gray-500); }
.stepper-dash .seg{ flex:0 0 auto; width:36px; height:4px; border-radius:999px; background:var(--gray-300); }
.stepper-dash .node.is-done .circle{ background:var(--green); color:#fff; border-color:var(--green-300); }
.stepper-dash .node.is-current .circle{ background:var(--blue-600); color:#fff; border-color:var(--blue-400); }
.stepper-dash .node.is-current .label{ color:#1e3a8a; font-weight:600; }
.stepper-dash .seg.is-done{ background:var(--green-400); }
@media (max-width:540px){
  .stepper-dash .node{ min-width:96px; }
  .stepper-dash .circle{ width:36px; height:36px; border-width:3px; }
  .stepper-dash .seg{ width:28px; }
  .stepper-dash .label{ font-size:0.6875rem; }
}
.ftc-brand{ display:block; align-items:center; gap:10px; margin-bottom:6px; }
.ftc-logo{ margin:0 auto; display:block; width:300px; height:68px; object-fit:contain; }
.ftc-brand .tw{ font-weight:700; font-size:1.125rem; letter-spacing:0.02em; }
.ftc-brand .en{ font-size:0.75rem; opacity:0.7; }
@media (max-width:480px){ .ftc-brand .en{ display:block; margin-left:0; } }

.sitemap-link{ max-width:960px; margin:0 auto 24px; padding:0 12px; text-align:right; }

.site-footer{
  max-width: 960px;
  margin: 2.5rem auto 0;
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}
.site-footer a{
  color: #005fa3;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}