/* 문의 버튼 — 문의 카드의 전화·카카오톡 버튼과 화면 오른쪽 아래 상시 버튼. 정솔푸드 contact.css와 같은 클래스
   카카오 심볼(말풍선)은 카카오디벨로퍼스 디자인 리소스 「카카오톡 채널 › 채널 채팅 › 톡문의 · Small · Yellow」
   공식 SVG에서 심볼 path만 그대로 옮겼다. 모양을 바꾸지 말 것. 카카오 버튼 색은 카카오 가이드 값을 쓴다:
   배경 #FEE500, 심볼 검정, 라벨 검정 85%. (브랜드 토큰이 아니라 카카오 고정 색이다)
   전화·메일 아이콘: Material Icons 「call」「mail」(Apache License 2.0) */

/* 연락처 버튼 — 둥근 직사각형 + 아이콘 + 라벨, 두 버튼은 같은 폭 */
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:1 1 150px;height:52px;padding:0 22px;border-radius:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.cta:hover{transform:translateY(-2px)}
.cta:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.cta-ico{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.cta-tel{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow)}
.cta-tel:hover{background:var(--brand-deep)}
.cta-mail{background:var(--white);color:var(--brand);border:1px solid var(--brand)}
.cta-mail:hover{background:var(--brand-soft)}
.cta-kakao{background:#FEE500;color:rgba(0,0,0,.85);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.cta-kakao .cta-ico{fill:#000}

/* 상시 문의 버튼 — 글자 없는 원형 심볼 버튼. 이름은 aria-label(스크린리더)·title(마우스 툴팁)로 전한다.
   카카오톡은 늘, 전화는 받을 수 있는 시간에만 보인다(contact-route.js가 data-route를 붙인다).
   스크립트가 돌지 않으면 둘 다 보인다. 엄지에 가까운 아래쪽이 전화다.
   히어로를 지나면 나타나고 문의 섹션이 보이면 숨는다(index.js). */
.contact-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;gap:12px;transition:opacity .32s ease,visibility .32s ease}
.contact-fab.is-hidden{opacity:0;visibility:hidden}
.contact-fab[data-route="kakao"] .fab-tel{display:none}
.fab{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;box-shadow:0 10px 28px rgba(0,0,0,.18);transition:transform .2s ease}
.fab:hover{transform:translateY(-2px)}
.fab:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.fab-kakao svg{width:100%;height:100%;display:block}
.fab-tel{background:var(--brand)}
.fab-tel:hover{background:var(--brand-deep)}
.fab-tel svg{width:26px;height:26px;fill:var(--on-brand)}
@media(max-width:520px){
  .contact-fab{right:16px;bottom:16px;gap:10px}
  .fab{width:52px;height:52px}
  .fab-tel svg{width:24px;height:24px}
}
@media print{.contact-fab{display:none!important}}