/*
 * 2026-10-02（issue 176 第二階段，forms 群）：聯絡頁、活動頁表單、表單結果狀態。
 * 記憶點：浮動標籤（聚焦時邊框與標籤以品牌色亮起）、用途分頁的滑入底色、送出成功的勾號描繪、資安事件通報卡的脈動訊號點。
 * 全部收在 #main.inner-main 之下，蓋過 site.css 的舊規則；色彩只引用 token。
 * 動態只在 prefers-reduced-motion: no-preference 且 html:not([data-motion="off"]) 之內；其餘為靜態且完整可用。
 * 表單仍是原生 POST，沒有 JS 也可用；欄位標籤用 CSS 浮動，placeholder 平時透明、聚焦後才顯示。
 */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

#main.inner-main {
  --fld-h: 3.75rem;

  /* ---------- 起點卡：編號 + 品牌色頂線 ---------- */
  .contact-start { padding-block: var(--sec) calc(var(--sec) * .5); }
  .contact-start-cards { gap: clamp(1rem, 2vw, 1.5rem); }
  .contact-start-card { position: relative; isolation: isolate; padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
  .contact-start-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--cta), var(--soft)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
  .contact-start-card:is(:hover, :focus-within, :target)::after { transform: scaleX(1); }
  .contact-start-card:is(:hover, :focus-within, :target) { border-color: var(--cta); box-shadow: var(--elevation-raised); }

  /* ---------- 公司據點卡片（issue 207／388，頁面區塊「公司據點」用）：沿用起點卡外觀，內容是地址、電話列與選填地圖圖片 ---------- */
  .contact-office address { font-style: normal; }
  .contact-office-address { margin: 0 0 1rem; color: var(--ink); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
  .contact-office-lines { display: grid; gap: .375rem; margin: 0; }
  .contact-office-lines div { display: flex; flex-wrap: wrap; gap: 0 .75rem; }
  .contact-office-lines dt { min-width: 4.5em; color: var(--muted); font-size: .875rem; line-height: 1.75; }
  .contact-office-lines dd { margin: 0; color: var(--ink); }
  .contact-office-lines a { color: inherit; text-underline-offset: .2em; }
  .contact-office-map { margin: 1.25rem 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--r-card) * .6); }
  .contact-office-map img { display: block; width: 100%; height: auto; }
  /* 只有一個據點時改寬版：桌機左資訊、右地圖（issue 208；三欄格線下單卡只佔三分之一寬）。 */
  .contact-office-cards:has(> .contact-office:only-child) { grid-template-columns: 1fr; }
  @media (min-width: 761px) {
    .contact-office:only-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); align-content: start; }
    .contact-office:only-child > :not(.contact-office-map) { grid-column: 1; }
    .contact-office:only-child .contact-office-map { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  }
  .contact-start-card h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 900; line-height: 1.25; letter-spacing: -.01em; }

  /* ---------- 版面：表單卡 + 資訊側欄 ---------- */
  .contact-content { margin-block: 0; }
  .contact-layout { align-items: start; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); padding-bottom: var(--sec); }
  .contact-start + .contact-layout { padding-top: calc(var(--sec) * .5); }
  .contact-content:not(:has(.contact-start)) > .contact-layout { padding-top: var(--sec); }
  .contact-form-section { padding-block: 0; }
  .contact-form-section > h2 { margin-bottom: 1rem; }
  .contact-form-lead { max-width: 46ch; margin-bottom: 1.75rem; color: var(--muted); font-size: var(--fs-lead); line-height: 1.75; }
  .contact-form-section .lead-form { max-width: none; }
  .contact-form-section > .text-link { margin-top: 1.5rem; }

  /* ---------- 用途分頁：分段控制，選取底色滑入 ---------- */
  .contact-entrances { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.5rem; padding: .3125rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-sunken); }
  .contact-entrances a { position: relative; isolation: isolate; overflow: hidden; min-height: 2.75rem; padding: .5rem 1.25rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: .9375rem; font-weight: 700; justify-content: center; transition: color .35s var(--ease); }
  .contact-entrances a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); transform: scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .3s; }
  .contact-entrances a:is(:hover, :focus-visible) { color: var(--ink); background: var(--paper); }
  .contact-entrances a[aria-current="page"] { color: var(--paper); background: transparent; }
  .contact-entrances a[aria-current="page"]::before { transform: none; opacity: 1; }

  /* ---------- 表單卡 ---------- */
  .lead-fieldset { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--elevation-card); }
  .lead-fieldset > legend { float: left; width: 100%; margin: 0 0 1rem; padding: 0; color: var(--action); font-size: .75rem; font-weight: 700; letter-spacing: .24em; }
  .lead-fieldset > legend + * { clear: both; }
  .contact-required { margin: 0 0 1.5rem; color: var(--muted); font-size: .8125rem; }
  .contact-form-section .lead-fields, .campaign-form .lead-fields, .download-detail .lead-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .contact-form-section .lead-field[data-field-type="textarea"], .campaign-form .lead-field[data-field-type="textarea"], .download-detail .lead-field[data-field-type="textarea"] { grid-column: 1 / -1; }
  .contact-form-section .lead-field, .campaign-form .lead-field, .download-detail .lead-field { position: relative; display: block; margin: 0; }

  /* 浮動標籤：標籤疊在欄位上；有內容或聚焦時縮小浮到上緣。placeholder 平時透明，聚焦後才顯示。 */
  .lead-field > label { position: absolute; z-index: 1; left: 1rem; top: calc(var(--fld-h) / 2); max-width: calc(100% - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 1rem; line-height: 1; pointer-events: none; transform: translateY(-50%); transform-origin: left center; transition: transform .35s var(--ease), color .25s, top .35s var(--ease); }
  .lead-field[data-field-type="textarea"] > label { top: 1.9rem; }
  .lead-field :is(input, textarea) { display: block; width: 100%; min-height: var(--fld-h); margin: 0; padding: 1.5rem 1rem .5rem; border: 1px solid var(--field-border); border-radius: var(--radius-l); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; transition: border-color .25s, box-shadow .3s var(--ease); }
  .lead-field textarea { min-height: 9rem; padding-top: 1.75rem; resize: vertical; }
  .lead-field :is(input, textarea)::placeholder { color: transparent; transition: color .3s; }
  .lead-field :is(input, textarea):focus::placeholder { color: var(--muted); }
  .lead-field:is(:focus-within, :has(:is(input, textarea):not(:placeholder-shown))) > label { top: .5rem; transform: translateY(0) scale(.75); }
  .lead-field[data-field-type="textarea"]:is(:focus-within, :has(textarea:not(:placeholder-shown))) > label { top: .5rem; }
  .lead-field:focus-within > label { color: var(--action); font-weight: 700; }
  .lead-field :is(input, textarea):focus { outline: 0; border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 28%, transparent), 0 .75rem 2rem color-mix(in srgb, var(--cta) 14%, transparent); }
  .lead-field :is(input, textarea):focus-visible { outline: 2px solid transparent; }
  .lead-field [aria-invalid="true"] { border-width: 2px; border-color: var(--ink); background: var(--surface-sunken); }
  .lead-field-error { display: flex; align-items: flex-start; gap: .5rem; margin: .5rem .25rem 0; color: var(--ink); font-size: .875rem; font-weight: 700; line-height: 1.5; }
  .lead-field-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .75rem; line-height: 1; }
  .lead-form > p, .lead-fieldset > p { color: var(--muted); font-size: .875rem; line-height: 1.7; }
  .lead-fieldset > .lead-fields + p { margin-top: 1.5rem; }

  .cf-recaptcha-notice { margin: .75rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
  .cf-recaptcha-notice a { color: var(--action); text-decoration: underline; text-underline-offset: .15em; }
  .cf-recaptcha-notice a:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: var(--radius-s); }
  .lead-form .nav-cta { width: 100%; margin-top: 1.5rem; padding-block: 1.0625rem; font-size: 1rem; background: var(--cta); color: var(--on-accent); }
  /* issue 382：送出鍵改琥珀實心深字（聯絡、活動、下載三種表單共用）；滑過時白底從下方滑入，字色不變。 */
  .lead-form .nav-cta::before { background: var(--paper); }
  .lead-form .nav-cta:is(:hover, :focus-visible) { background: var(--cta); color: var(--on-accent); box-shadow: 0 .875rem 2.125rem color-mix(in srgb, var(--cta) 40%, transparent); }
  .lead-form .nav-cta:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
  /* issue 388：送出鍵正下方的一行說明（資料怎麼處理），reCAPTCHA 告知排在其下；字級與色彩同表單內的輔助說明。 */
  .lead-form .lead-disclosure { margin: .875rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.7; }
  @media (min-width: 40em) { .lead-form .nav-cta { width: auto; min-width: 14rem; } }

  /* ---------- 狀態訊息（cf-form-status 輸出 <p role=status>，標記不動，只換外觀） ---------- */
  .form-status { display: flex; align-items: flex-start; gap: .875rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--radius-l); background: var(--surface-sunken); color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.6; }
  .form-status--error::before, .form-status--submitting::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .875rem; line-height: 1; }
  .form-status--submitting::before { content: ""; border: 3px solid var(--line); border-top-color: var(--cta); background: none; }
  .form-status--submitting { border-left-color: var(--cta); }

  /* 成功：置中完成狀態，圓環繞一圈後勾號描繪出來 */
  .form-done { display: grid; justify-items: center; gap: 1rem; padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--r-card); background: radial-gradient(34rem 16rem at 50% 0, color-mix(in srgb, var(--cta) 14%, transparent), transparent 70%), var(--paper); box-shadow: var(--elevation-card); text-align: center; }
  .form-done .form-status--success { display: grid; justify-items: center; gap: 1.5rem; margin: 0; padding: 0; border: 0; background: none; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
  .form-done .form-status--success::before { content: ""; position: relative; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: conic-gradient(var(--cta) var(--ring, 360deg), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 62%, black 63%); mask: radial-gradient(circle, transparent 62%, black 63%); }
  .form-done .form-status--success::after { content: ""; position: absolute; width: 2.25rem; height: 1.1rem; margin-top: 2.1rem; border-left: 5px solid var(--action); border-bottom: 5px solid var(--action); border-radius: 2px; transform: rotate(-45deg); }
  .form-done .form-status--success { position: relative; }
  .form-done .form-status--success::after { top: 0; }
  .form-done > p:not(.form-status) { max-width: 40ch; margin: 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.75; }

  /* 停用預覽 */
  .contact-unavailable, .contact-browser-note { padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 4px solid var(--action); border-radius: var(--radius-l); background: var(--surface-sunken); color: var(--ink); font-weight: 700; }
  .contact-unavailable { margin: 0 0 1.25rem; }
  .lead-form-preview .lead-fieldset { position: relative; border-style: dashed; box-shadow: none; background: repeating-linear-gradient(135deg, transparent 0 .75rem, color-mix(in srgb, var(--line) 45%, transparent) .75rem calc(.75rem + 1px)), var(--surface-sunken); cursor: not-allowed; }
  .lead-form-preview .lead-field > label { color: var(--muted); }
  .lead-form-preview :is(input, textarea)[disabled] { background: color-mix(in srgb, var(--paper) 70%, transparent); border-color: var(--line); }
  .lead-form-preview button[disabled] { background: var(--muted); color: var(--paper); opacity: 1; }

  /* ---------- 側欄：資訊卡，事件通報為深色熱線卡 ---------- */
  .contact-aside { position: sticky; top: 6rem; gap: 1rem; }
  /* issue 388：側欄放在 .contact-main 內時（沒有告知卡），窄螢幕排在表單之後，與表單卡留出間距；寬螢幕改由網格間距接手（見 ≥64rem 區塊歸零）。 */
  .contact-main > .contact-aside { margin-top: clamp(1.5rem, 3.5vw, 3.5rem); }
  .aside-card { position: relative; padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
  .aside-card:hover { border-color: var(--cta); box-shadow: var(--elevation-card); }
  .aside-card h2 { margin: 0 0 .75rem; font-size: 1.1875rem; font-weight: 900; line-height: 1.3; }
  .aside-card p { color: var(--muted); font-size: .9375rem; line-height: 1.75; }
  .aside-card .secondary-cta { margin-top: 1rem; }
  /* issue 388：其他聯絡方式卡的第一個據點——電話與地址兩行，字級同卡內說明；address 預設斜體要關掉。 */
  .aside-card--hotline { border-color: var(--deep-line); background: radial-gradient(22rem 12rem at 100% 0, color-mix(in srgb, var(--cta) 22%, transparent), transparent 70%), var(--deeper); color: var(--paper); }
  .aside-card--hotline::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .625rem; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 0 color-mix(in srgb, var(--soft) 60%, transparent); vertical-align: middle; margin-bottom: .75rem; }
  .aside-card--hotline h2 { display: inline; color: var(--paper); }
  .aside-card--hotline p { margin-top: .75rem; color: var(--muted-on-dark); }

  /* ---------- 活動頁表單：同一套欄位語彙，深色邊緣的完整卡 ---------- */
  .campaign-form { position: relative; margin-block: var(--sec); padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: var(--r-card); background: radial-gradient(40rem 18rem at 0 0, color-mix(in srgb, var(--cta) 10%, transparent), transparent 70%), var(--paper); box-shadow: var(--elevation-card); }
  .campaign-form > h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

  /* 寬螢幕（≥64rem）：表單區改左右兩欄——左欄標題、說明與狀態訊息，右欄表單；資訊側欄移到表單區下方排成三欄。
     窄螢幕維持單欄。email 與需求摘要各占整列，其餘欄位兩兩成列。 */
  .lead-field[data-field-type="email"] { grid-column: 1 / -1; }
  @media (min-width: 64rem) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); }
    .contact-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
    .contact-main > * { grid-column: 1; }
    .contact-main > h2 { margin-bottom: 1rem; }
    .contact-main > .contact-form-lead { max-width: 28em; margin-bottom: 1.5rem; }
    .contact-main > :is(.lead-form, .form-done) { grid-column: 2; grid-row: 1 / 7; }
    .contact-main > .text-link { grid-column: 2; grid-row: 7; }
    .contact-main > .faq { grid-column: 1 / -1; grid-row: 8; margin-top: calc(var(--sec) * .4); }
    .contact-aside { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
    /* issue 388：左欄只有標題與說明時，兩欄會在標題下方留下大片空白。改成單欄：標題、說明、表單卡依序
       排成一條 56rem 的閱讀欄，左緣與頁首、起點卡、據點對齊（常見問題仍橫跨全寬）；只套用在「有真實表單或送出成功」的狀態，送出成功（.form-done，使用者 2026-10-22）沿用同一套左右欄，停用預覽維持兩欄。 */
    .contact-main:has(> :is(form.lead-form, .form-done)) { grid-template-columns: minmax(0, 56rem) minmax(0, 1fr); grid-template-rows: none; }
    .contact-main:has(> :is(form.lead-form, .form-done)) > :not(.faq) { grid-column: 1; grid-row: auto; }
    .contact-main:has(> :is(form.lead-form, .form-done)) > .contact-form-lead { max-width: 46ch; }
    /* issue 388：有右側欄（檢視檔把 aside 放在 .contact-main 內）時，右側補上聯絡資訊欄：7fr／4fr 兩欄，
       表單之前的標題、說明與狀態訊息橫跨整列，表單與側欄由 dense 排列落在同一列起頭（不靠固定邊距估高度）；側欄單欄直排、sticky。 */
    .contact-main:has(> :is(form.lead-form, .form-done)):has(> .contact-aside) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-auto-flow: row dense; }
    .contact-main:has(> :is(form.lead-form, .form-done)):has(> .contact-aside) > :has(~ :is(form.lead-form, .form-done)) { grid-column: 1 / -1; }
    .contact-main:has(> :is(form.lead-form, .form-done)):has(> .contact-aside) > .contact-aside { grid-column: 2; grid-row: span 2; grid-template-columns: minmax(0, 1fr); position: sticky; top: 6rem; align-self: start; margin-top: 0; }
  }
  @media (max-width: 60em) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); }
    .contact-aside { position: static; }
  }
  @media (max-width: 40em) {
    .contact-form-section .lead-fields, .campaign-form .lead-fields, .download-detail .lead-fields { grid-template-columns: minmax(0, 1fr); }
    .contact-entrances { display: flex; border-radius: var(--r-card); }
    .contact-entrances a { flex: 1 1 100%; }
  }

  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) & .contact-form-section :is(.lead-form, .form-done) { animation: cf-forms-in .7s var(--ease) backwards; }
    html:not([data-motion="off"]) & .form-status--submitting::before { animation: cf-forms-spin .9s linear infinite; }
    html:not([data-motion="off"]) & .form-done .form-status--success::before { animation: cf-forms-ring 1s var(--ease) backwards; }
    html:not([data-motion="off"]) & .form-done .form-status--success::after { animation: cf-forms-check .5s .7s var(--ease) backwards; }
    html.js:not([data-motion="off"]) & .aside-card--hotline::before { animation: cf-forms-pulse 2.2s ease-out infinite; }
  }
}
@keyframes cf-forms-in { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes cf-forms-spin { to { transform: rotate(1turn); } }
@keyframes cf-forms-ring { from { --ring: 0deg; } }
@keyframes cf-forms-check { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cf-forms-pulse { 70% { box-shadow: 0 0 0 .75rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }