/* ============================================================
   CONTACT · 正式版「單一聯絡窗口」— 疊在 contact-livery.css 之上
   2026-08-16 v2:使用者「header 以下太白」→ 段落節奏改成
   黑 hero → 紅時鐘帶 → 黑「聯絡窗口」帶(留言精靈本身:黑色摘要票 + 紙白面板;第三輪把說明卡拿掉直接放精靈)→ 工坊照 CTA → 黑 footer。
   對比實證(碳黑 #0b0b0d 底):#fff 19.6 / #b6b8bf 9.7 / #9aa0ab 7.0 / #ff4d57 5.9 / #ff8d94 8.6;
   白底沿用 livery:#55565C 7.1 / #6A6C73 5.25 / #B0121B 7.1。
   ============================================================ */

/* ---------- I. 聯絡窗口(碳黑全幅帶) ---------- */
.win{position:relative;background:var(--carbon);color:var(--d-ink);overflow:clip;isolation:isolate}
.win-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% 0%,rgba(210,31,43,.24),transparent 62%),
    radial-gradient(700px 700px at 6% 100%,rgba(210,31,43,.10),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 84px),
    var(--carbon);
}
/* 右側一道紅斜條,接續 hero 的 slash 語言 */
.win-bg::after{
  content:'';position:absolute;top:-20%;right:-8%;width:34%;height:140%;
  background:linear-gradient(180deg,rgba(210,31,43,.16),rgba(210,31,43,0));
  transform:skewX(-14deg);border-left:1px solid rgba(210,31,43,.34);
}
.win-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:96px 68px 104px}
.win-head{border-bottom-color:rgba(255,255,255,.28)}
.win-head h2{color:#fff}
.win-head h2 .num{color:var(--d-red)}
.win-head .mono{color:var(--d-lab)}

/* 留言精靈直接住在黑帶裡(v2:說明卡拿掉) */
.win .inq-grid{margin-top:50px}
.win .inq-table{border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.win .inq-panel{border:1px solid rgba(255,255,255,.18);border-top:6px solid var(--red-hero);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.5)}
/* 黑帶直接接工坊照 CTA,中間不留白 */
.cta{margin-top:0}
.win .inq-panel::after{background:var(--red-hero)}

/* ---------- 留言精靈元件(摘要票碳黑、面板紙白+黑框;v2 起住在 .win 黑帶內) ---------- */
.inq-table{border:none;background:var(--carbon);color:var(--d-ink);position:relative;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.inq-table::before{
  content:'';display:block;height:6px;
  background:repeating-linear-gradient(-45deg,#fff 0 8px,var(--red) 8px 16px);
}
.inq-row{border-bottom:1px solid rgba(255,255,255,.12)}
.inq-row .lbl{color:var(--d-lab)}
.inq-row .val{color:#fff}
.inq-row .val.empty{color:var(--d-lab)}
.inq-row.active{background:rgba(210,31,43,.22)}
.inq-row.active .lbl{color:var(--d-soft)}
.inq-row.done:hover{background:rgba(255,255,255,.06)}
.inq-panel{border:1px solid var(--carbon);border-top:6px solid var(--carbon);position:relative}
.inq-panel::after{
  content:'';position:absolute;right:0;top:0;width:44px;height:44px;
  background:var(--red);clip-path:polygon(100% 0,100% 100%,0 0);
}
.inq-step{display:inline-block;background:var(--carbon);color:#fff;padding:7px 12px 6px;letter-spacing:.26em}
.inq-route.solo{border-color:var(--carbon);background:var(--paper)}
.inq-route.solo b{color:var(--red-t)}

@media (max-width:980px){
  .win-inner{padding:72px 22px 76px}
  .win .inq-grid{margin-top:34px}
}