/* 2026-10-27 major-6 feedback — 퀵메뉴 (Figma 259:406: 국내 빠른예약·상담신청·전화연결 / 해외 빠른예약·상담신청·메신저 상담. 챗봇은 이번 시안 제외)
   PC(≥800): 오른쪽 가운데 세로 레일. 전화연결은 대표번호, 메신저 상담은 QR을 레일 옆에 노출.
   Mobile(<800): 오른쪽 아래 토글 버튼 → 위로 펼침. 아래 고정 바(상담 바·이벤트 바)가 보이면 그 위로 올라간다(--m6q-lift, JS 측정).
   디자인 시스템: 모서리 0, 검정 #111110, 민트는 표시용. hover 배경색 변경 없음(일러스트 확대·글자색만), pointer·focus 링 유지. */
.m6q{--m6q-ink:#111110;--m6q-line:rgba(17,17,16,.08);--m6q-sub:#323232;--m6q-lift:0px;position:fixed;z-index:58;font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:16px;line-height:normal;letter-spacing:-.02em;color:var(--m6q-ink);-webkit-font-smoothing:antialiased}
.m6q *{box-sizing:border-box}
.m6q a,.m6q button{-webkit-tap-highlight-color:transparent}
.m6q-list{margin:0;padding:0;list-style:none}
.m6q-item{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0;border:0;background:transparent;color:var(--m6q-sub);font-family:inherit;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}
.m6q-ico{display:grid;place-items:center;width:24px;height:24px;flex:none;color:var(--m6q-ink)}
.m6q-ico svg{display:block;width:20px;height:20px;overflow:visible}
.m6q-ico{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.m6q-ico-art{width:36px;height:36px}
.m6q-ico-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(17,17,16,.08))}
/* hover: 배경은 그대로, 일러스트만 살짝 커지고 이름이 검정으로 */
@media (hover:hover){.m6q-item:hover .m6q-ico{transform:scale(1.12)}}
.m6q-item:focus-visible .m6q-ico,.m6q-item[aria-expanded=true] .m6q-ico{transform:scale(1.12)}
/* 10/27 사용자 지시: hover 시 헤더 메뉴(.fm-link)처럼 검은 배경 + 흰 글자 */
/* .m6q를 앞에 붙여 페이지 껍데기의 전역 a:hover{color:inherit}(서비스 셸 services.css)보다 우선 */
.m6q .m6q-item:hover,.m6q .m6q-item:focus-visible,.m6q .m6q-item[aria-expanded=true]{background:#111110;color:#fff}
.m6q-item:focus-visible,.m6q-toggle:focus-visible{outline:2px solid #0FDFDD;outline-offset:-2px}
/* 10/27: 배경은 GNB(.dock)와 같은 liquid glass — 같은 면·그림자, 굴절은 JS(window.liquidGlass, GNB와 같은 옵션). Safari 등은 .lg-fallback 프로스트 */
.m6q-panel,.m6q-glass{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.18));-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 18px 44px rgba(17,17,16,.16),0 2px 6px rgba(17,17,16,.06),inset 0 1px 1px rgba(255,255,255,.85),inset 0 -10px 22px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.45)}
.m6q-panel.lg-fallback,.m6q-glass.lg-fallback{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.56))}
.m6q-pop{position:absolute;display:none;width:max-content;white-space:nowrap}
.m6q-pop b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--m6q-ink)}
.m6q-pop small{display:block;margin-bottom:4px;font-size:12px;color:var(--m6q-sub)}
.m6q-qr-pop{text-align:center}
.m6q-qr-pop small{margin-bottom:10px}
.m6q-qr-pop img,.m6q-qr-ph{display:block;width:120px;height:120px;margin:0 auto}
.m6q-qr-ph{background:repeating-linear-gradient(45deg,rgba(17,17,16,.06) 0 6px,transparent 6px 12px);outline:1px dashed rgba(8,123,133,.5);outline-offset:-1px}
.m6q-qr-pop .m6-todo{margin-top:8px}
.m6q-qr-pop em{display:block;margin-top:8px;font-size:12px;font-style:normal;color:var(--m6q-sub)}

/* PC: 오른쪽 가운데 세로 레일 */
@media (min-width:800px){
  .m6q{right:clamp(12px,1.6vw,24px);top:50%;transform:translateY(calc(-50% - var(--m6q-lift)));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .m6q-toggle{display:none}
  .m6q-panel{width:76px}
  .m6q-list>li+li{border-top:1px solid var(--m6q-line)}
  .m6q-item{flex-direction:column;height:76px;padding:0 4px}
  .m6q-li-pop{position:relative}
  .m6q-pop{right:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:14px 18px}
  .m6q-li-pop[data-open] .m6q-pop{display:block}
}
@media (min-width:800px) and (max-width:1279px){
  /* 좁은 PC: 본문과 겹침을 줄이도록 조금 작게. 10/27 사용자 지시로 이미지 아래 메뉴명도 노출 */
  .m6q-panel{width:64px}
  .m6q-item{height:68px;gap:8px;font-size:11px}
  .m6q-ico-art{width:30px;height:30px}
}

/* Mobile: 오른쪽 아래 토글 → 위로 펼침 */
@media (max-width:799px){
  .m6q{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + var(--m6q-lift));display:flex;flex-direction:column;align-items:flex-end;gap:8px;transition:bottom .3s cubic-bezier(.2,.8,.2,1)}
  .m6q-toggle{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;background:var(--m6q-ink);color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(17,17,16,.24),0 3px 8px rgba(17,17,16,.14)}
  .m6q-toggle-ico{position:relative;display:block;width:20px;height:20px}
  .m6q-toggle-ico::before,.m6q-toggle-ico::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .m6q-toggle-ico::before{width:20px;height:1.5px;transform:translate(-50%,-50%)}
  .m6q-toggle-ico::after{width:1.5px;height:20px;transform:translate(-50%,-50%)}
  .m6q[data-open] .m6q-toggle-ico::before{transform:translate(-50%,-50%) rotate(45deg)}
  .m6q[data-open] .m6q-toggle-ico::after{transform:translate(-50%,-50%) rotate(45deg)}
  .m6q-panel{order:-1;width:172px;display:none}
  .m6q[data-open] .m6q-panel{display:block;animation:m6q-in .22s cubic-bezier(.2,.8,.2,1)}
  .m6q-list>li+li{border-top:1px solid var(--m6q-line)}
  .m6q-item{justify-content:flex-start;gap:16px;height:52px;padding:0 16px;font-size:14px;color:#fff}
  /* 10/27: 모바일은 펼쳤을 때 검은 배경 + 흰 글자 */
  .m6q-panel,.m6q-panel.lg-fallback{background:linear-gradient(180deg,rgba(17,17,16,.92),rgba(17,17,16,.86));box-shadow:0 18px 44px rgba(17,17,16,.28),0 2px 6px rgba(17,17,16,.12),inset 0 0 0 1px rgba(255,255,255,.08)}
  .m6q-panel .m6q-list>li+li{border-top-color:rgba(255,255,255,.12)}
  .m6q-ico-art img{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
  .m6q-ico-art{width:30px;height:30px}
  .m6q-pop{display:none!important}
}
@keyframes m6q-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.m6q,.m6q-item,.m6q-ico,.m6q-toggle-ico::before,.m6q-toggle-ico::after{transition:none}.m6q[data-open] .m6q-panel{animation:none}}
@media print{.m6q{display:none}}