/* 聯絡我們 /contact/ ；表單樣式亦供 /pro/ 使用 */
.contact{padding-top:96px;padding-bottom:var(--section-y);row-gap:64px}
.contact__info{grid-column:1/span 5;display:flex;flex-direction:column;gap:40px}
.contact__head{display:flex;flex-direction:column;gap:20px}
.contact__head p{max-width:420px}
.contact__table{display:grid;grid-template-columns:1fr 160px;gap:32px;align-items:start}
.contact .kv__row{grid-template-columns:80px 1fr}
.contact .kv__row dt{font-size:10.5px}
.contact .kv__row dd.mono{font-size:15px;word-break:break-all}

.line-qr{display:flex;flex-direction:column;gap:10px;color:var(--c-ink)}
.line-qr__box{width:160px;height:160px;background:var(--c-bg-2);border:1px solid var(--c-line);display:grid;place-items:center;text-align:center;padding:16px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;line-height:1.8;color:var(--c-ink);transition:border-color var(--dur)}
.line-qr__box img{width:100%;height:100%;object-fit:contain}
.line-qr:hover .line-qr__box{border-color:var(--c-ink)}
.line-qr:hover{color:var(--c-accent)}
.line-qr__cap{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--c-ink-2);text-align:center;width:160px}

.map{position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.6)}
.map__link{position:absolute;left:16px;bottom:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;background:var(--c-bg);color:var(--c-ink);padding:6px 10px;line-height:1.5}
.map__link:hover{background:var(--c-ink);color:var(--c-bg)}

.contact-form{grid-column:7/span 6;border-top:1px solid var(--c-ink);padding-top:40px;align-content:start}
.contact-form textarea.field__input{min-height:96px}
.contact-form .checkbox a{color:var(--c-ink);border-bottom:1px solid var(--c-line)}
.contact-form .field--consent{gap:6px}

@media (max-width:1100px){
  .contact__table{grid-template-columns:1fr}
}
@media (max-width:767px){
  .contact{padding-top:48px;row-gap:56px}
  .contact__info{gap:32px}
  .contact-form{padding-top:28px}
  .contact__table{gap:24px}
  .line-qr{flex-direction:row;align-items:center;gap:16px}
  .line-qr__box{width:120px;height:120px}
  .line-qr__cap{width:auto;text-align:left}
  .map.media--16x9{aspect-ratio:4/3}
}