/* ==========================================================================
   元件 — 對應 02_設計規格表.md 第 5 節
   反差規則：橘 ↔ 深藍綠互換；框線型 hover 轉實心；
   深底區實心按鍵 hover 保留 2px 橘框；hover 僅 hover:hover 裝置生效。
   ========================================================================== */

/* --- CTA 按鈕 --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(40 * var(--u));
  min-width: calc(118 * var(--u));
  padding-inline: calc(18 * var(--u));
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  font-family: inherit;
  font-size: max(var(--u-min-font), calc(14 * var(--u)));
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--cta { background: var(--c-orange); color: var(--c-white); }
@media (hover: hover) {
  .btn--cta:hover { background: var(--c-teal); color: var(--c-white); }
}
.btn--cta:active { background: var(--c-teal); }

/* 深底區（Footer）實心按鍵 hover 保留橘框 */
.on-dark .btn--cta { background: var(--c-orange); }
@media (hover: hover) {
  .on-dark .btn--cta:hover { background: var(--c-teal); border-color: var(--c-orange); }
}
.on-dark .btn--cta:active { background: var(--c-teal); border-color: var(--c-orange); }

.btn--ghost {
  background: transparent; color: var(--c-teal); border-color: var(--c-teal);
}
@media (hover: hover) {
  .btn--ghost:hover { background: var(--c-teal); color: var(--c-white); }
}
.btn--ghost:active { background: var(--c-teal); color: var(--c-white); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* --- Hero 關鍵字標籤 pill --- */
/* v1.21：這是「標籤」不是「按鈕」。
   先前用深色實線框 + 粗體 + hover/:active 轉實心橘，
   視覺語彙跟按鈕一模一樣，使用者在手機上按下去還會變橘色，
   但它是 <span> 沒有連結，按了當然沒反應 —— 看起來壞掉。
   改成淺底無強框、常規字重、不帶任何互動狀態，
   桌機與手機都明確讀作關鍵字標籤。
   日後若要讓它可點，應改成 <a> 並恢復 hover 狀態，而不是改回這裡。 */
.pill {
  display: inline-flex; align-items: center;
  min-height: calc(28 * var(--u));
  padding-inline: calc(12 * var(--u));
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-btn);
  background: var(--c-chip);
  color: var(--c-text);
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 500;
  cursor: default;
}

/* --- 核心卡 chip --- */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(39 * var(--u));
  min-width: calc(110 * var(--u));
  padding-inline: calc(14 * var(--u));
  background: var(--c-chip);
  color: var(--c-teal);
  border-radius: var(--radius-btn);
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  font-weight: 700;
  transition: background-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  .chip:hover { background: var(--c-orange); color: var(--c-white); }
}

/* --- 測試板串接條 --- */
.linkbar {
  display: flex; width: 100%;
  min-height: calc(42 * var(--u));
  border-radius: var(--radius-btn);
  overflow: hidden;
  background: var(--c-teal);
}
.linkbar__seg {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-white);
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  font-weight: 700;
  padding-inline: calc(8 * var(--u));
  text-align: center;
  transition: background-color var(--transition);
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.linkbar__seg:last-child { border-right: 0; }
@media (hover: hover) {
  .linkbar__seg:hover { background: var(--c-orange); }
}

/* --- 徽章 --- */
.badge {
  display: inline-flex; align-items: center;
  min-height: calc(27 * var(--u));
  padding-inline: calc(12 * var(--u));
  border-radius: 999px;
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 600;
  letter-spacing: .02em;
}
.badge--teal { background: var(--c-teal-soft); color: var(--c-teal); }
.badge--orange { background: var(--c-orange-soft); color: var(--c-orange); }

/* --- 了解更多 --- */
.more-link {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  font-weight: 700;
  transition: color var(--transition);
}
.more-link .mt-arrow { transition: transform var(--transition); }
.more-link .mt-arrow path { stroke: currentColor; }
@media (hover: hover) {
  .more-link:hover { color: var(--c-orange); }
  .more-link:hover .mt-arrow { transform: translateX(calc(4 * var(--u))); }
}

/* --- 卡片 --- */
.card {
  background: var(--c-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* --- 勾選項 --- */
.check-list { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.check-item {
  display: flex; align-items: flex-start; gap: calc(8 * var(--u));
  font-size: max(var(--u-min-font), calc(14 * var(--u)));
  line-height: calc(20 * var(--u));
  color: var(--c-text);
}
.check-item__mark {
  flex: 0 0 auto;
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  border-radius: 50%;
  background: var(--c-teal);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: calc(2 * var(--u));
}
.check-item__mark svg { width: 68%; height: 68%; }

/* 特色卡小勾選：橘勾配 --c-check-bg-sm 圓底 */
.check-item--soft .check-item__mark {
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  background: var(--c-check-bg-sm);
}
.check-item--soft .check-item__mark svg path { stroke: var(--c-orange); }
.check-item--soft { font-size: max(var(--u-min-font), calc(16 * var(--u))); line-height: calc(27 * var(--u)); }

/* Hero 大勾選：44u 圓底 */
.check-item--hero .check-item__mark {
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  background: var(--c-check-bg);
}
.check-item--hero .check-item__mark svg path { stroke: var(--c-orange); stroke-width: 3.4; }

/* --- 表單（03 第 10.2 節）--- */
.form { max-width: calc(720 * var(--u)); }
.form__row { margin-bottom: calc(20 * var(--u)); }
.form__label {
  display: block;
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  font-weight: 500;
  margin-bottom: calc(6 * var(--u));
}
.form__req { color: var(--c-orange); margin-left: 2px; }
.form__hint {
  color: var(--c-text); font-size: max(var(--u-min-font), calc(13 * var(--u)));
  margin-top: calc(4 * var(--u));
}
.form__control {
  width: 100%;
  min-height: calc(52 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  color: var(--c-navy);
  background: var(--c-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__control:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: inset 0 0 0 1px var(--c-teal);
}
textarea.form__control { min-height: calc(160 * var(--u)); resize: vertical; line-height: 1.7; }
.form__control[aria-invalid="true"] { border-color: var(--c-error); }
.form__error {
  color: var(--c-error); font-size: max(var(--u-min-font), calc(14 * var(--u)));
  margin-top: calc(4 * var(--u));
}
.form__counter {
  text-align: right; color: var(--c-text);
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  margin-top: calc(4 * var(--u));
}
.form__consent { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }
.form__consent input[type="checkbox"] {
  width: calc(20 * var(--u)); height: calc(20 * var(--u));
  margin-top: calc(3 * var(--u)); accent-color: var(--c-teal); flex: 0 0 auto;
}
.form__consent label {
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: 1.6;
}
/* 蜜罐：以位移隱藏而非 display:none */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.alert {
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-radius: var(--radius-btn);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  margin-bottom: calc(20 * var(--u));
}
.alert--ok { background: var(--c-teal-soft); color: var(--c-teal); }
.alert--warn { background: var(--c-orange-soft); color: var(--c-orange); }
.alert--error { background: #FBECEA; color: var(--c-error); }

/* --- 留言卡（03 第 10.1 節）--- */
.voice-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: calc(20 * var(--u));
  align-items: start;
}
.voice-card { padding: calc(24 * var(--u)); }
.voice-card__head {
  display: flex; align-items: baseline; gap: calc(10 * var(--u));
  flex-wrap: wrap; margin-bottom: calc(10 * var(--u));
}
.voice-card__name {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  font-weight: 700;
}
.voice-card__company,
.voice-card__date {
  color: var(--c-text);
  font-size: max(var(--u-min-font), calc(14 * var(--u)));
}
.voice-card__date { margin-left: auto; }
.voice-card__body {
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  line-height: calc(27 * var(--u));
  white-space: pre-line;
}
.voice-reply {
  margin-top: calc(16 * var(--u));
  margin-left: calc(24 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  background: var(--c-teal-soft);
  border-radius: var(--radius-btn);
  border-left: calc(3 * var(--u)) solid var(--c-orange);
}
.voice-reply__title {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  font-weight: 700;
  margin-bottom: calc(6 * var(--u));
}
.voice-reply__body {
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: 1.7; white-space: pre-line;
}

.pagination {
  display: flex; gap: calc(8 * var(--u)); justify-content: center;
  margin-top: calc(28 * var(--u));
}
.pagination a, .pagination span {
  min-width: calc(44 * var(--u)); min-height: calc(44 * var(--u));
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-btn);
  border: 1px solid var(--c-border);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  color: var(--c-teal);
}
.pagination [aria-current="page"] {
  background: var(--c-teal); color: var(--c-white); border-color: var(--c-teal);
}

/* 摺疊區 */
.collapsible summary {
  cursor: pointer; color: var(--c-teal); font-weight: 700;
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  padding: calc(10 * var(--u)) 0;
}
.collapsible[open] summary { margin-bottom: calc(8 * var(--u)); }


/* --- 訪客聯絡表單（依新設計 HTML contact 區：左深色資訊卡、右表單）--- */
.inquiry { display: grid; grid-template-columns: calc(340 * var(--u)) 1fr; gap: calc(24 * var(--u)); align-items: start; }
.inquiry__info {
  background: var(--c-teal); color: var(--c-white);
  border-radius: var(--radius-card); padding: calc(28 * var(--u)) calc(26 * var(--u));
}
.inquiry__info-title { font-size: calc(22 * var(--u)); font-weight: 700; margin-bottom: calc(18 * var(--u)); }
.inquiry__dl dt {
  color: var(--c-orange); font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 700; letter-spacing: .04em; margin-top: calc(14 * var(--u));
}
.inquiry__dl dd { margin: calc(4 * var(--u)) 0 0; font-size: max(var(--u-min-font), calc(15 * var(--u))); line-height: 1.6; }
.inquiry__dl a { color: var(--c-white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.inquiry__dl a:hover { color: var(--c-orange); }
.inquiry__form { padding: calc(28 * var(--u)); }
.inquiry__form-title { color: var(--c-navy); font-size: calc(20 * var(--u)); font-weight: 700; margin-bottom: calc(18 * var(--u)); }
.form--inquiry { max-width: none; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(16 * var(--u)); }
.btn--block { width: 100%; }
@media (max-width: 1023px) {
  .inquiry { grid-template-columns: 1fr; gap: 20px; }
  .inquiry__info { padding: 22px; }
  .form__grid { grid-template-columns: 1fr; }
}

/* 整塊可點的按鈕／標籤：外觀與原本一致，但整個區域都是連結 */
.linkbar__seg--link, .chip--link { text-decoration: none; cursor: pointer; }
.linkbar__seg--link:hover { background: var(--c-orange); color: #fff; }
.chip--link:hover { background: var(--c-teal); color: #fff; }
.linkbar__seg--link:focus-visible, .chip--link:focus-visible {
  outline: 2px solid var(--c-orange); outline-offset: 2px;
}