/* 오른쪽 아래 바로가기 — 2026.10.13 (상담 · 도입사례 · TOP, 둥근 네모 + 반투명, 상담 파랑)
   불러오는 곳: main/inc/topM.html, index.html  ·  고칠 때 두 파일의 바로가기 HTML 도 같이 확인
   - 버튼 뒤가 어두우면(메인 첫 화면 영상·하단) 스크립트가 .qk-dark 를 붙여 어두운 유리 + 흰 그림으로
   - TOP 은 화면 반 이상 내려야 나타남 (.is-down) */
.qk{--qk-fg:#191f28;--qk-blue:rgba(0,133,245,.66);--qk-blue-h:rgba(0,110,203,.85);
  position:fixed!important;right:24px;bottom:24px;z-index:1500;display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin:0;padding:0;
  font-family:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;text-align:center}
.qk a,.qk button{all:unset;box-sizing:border-box;cursor:pointer}
.qk .qk-b{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:56px;height:56px;border-radius:16px;
  color:var(--qk-fg);background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);
  box-shadow:0 8px 24px rgba(17,24,39,.10),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .2s,color .2s,border-color .2s,opacity .3s,visibility .3s}
.qk .qk-b svg{display:block;width:22px;height:22px;flex:none}
.qk .qk-l{font-size:11px;font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap}
/* 상담 */
.qk .qk-call{color:#fff;background:var(--qk-blue);border-color:rgba(255,255,255,.35)}
/* TOP */
.qk .qk-top{opacity:0;visibility:hidden;transform:translateY(8px)}
.qk.is-down .qk-top{opacity:1;visibility:visible;transform:none}
.qk .qk-top .qk-l{font-size:10px;letter-spacing:.04em}
/* 상담 전화번호 (PC 에서 마우스 올리면) */
.qk .qk-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);opacity:0;visibility:hidden;pointer-events:none;
  padding:8px 12px;border-radius:10px;background:rgba(25,31,40,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;font-size:13px;font-weight:600;line-height:1.45;white-space:nowrap;text-align:left;
  box-shadow:0 8px 20px rgba(17,24,39,.18),0 0 0 1px rgba(255,255,255,.14);transition:opacity .2s,transform .2s,visibility .2s}
.qk .qk-tip small{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.7)}
.qk .qk-tip b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:4px}
.qk .qk-tip b:last-child{margin-bottom:0}
/* 어두운 화면 위 */
.qk.qk-dark .qk-b:not(.qk-call){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
@media(hover:hover) and (pointer:fine){
  .qk .qk-b:hover{transform:translateY(-2px);background:rgba(255,255,255,.6);box-shadow:0 10px 24px rgba(17,24,39,.14),0 2px 4px rgba(17,24,39,.06)}
  .qk .qk-call:hover{background:var(--qk-blue-h)}
  .qk.qk-dark .qk-b:not(.qk-call):hover{background:rgba(255,255,255,.24)}
  .qk .qk-call:hover .qk-tip,.qk .qk-call:focus-visible .qk-tip{opacity:1;visibility:visible;transform:translate(0,-50%)}
}
.qk .qk-b:focus-visible{outline:2px solid #0085f5;outline-offset:3px}
/* 흐림을 못 쓰는 브라우저는 덜 투명하게 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .qk .qk-b{background:rgba(255,255,255,.92)}
  .qk .qk-call{background:#0085f5}
  .qk.qk-dark .qk-b:not(.qk-call){background:rgba(60,66,76,.92)}
}
/* 휴대폰 */
@media(max-width:700px){
  .qk{right:12px;bottom:16px;gap:8px}
  .qk .qk-b{width:48px;height:48px;border-radius:14px}
  .qk .qk-b svg{width:20px;height:20px}
  .qk .qk-l{font-size:10px}
}
/* 모바일 메뉴가 열려 있으면 숨김 */
body[style*="overflow-y: hidden"] .qk,body[style*="overflow-y:hidden"] .qk,body[style*="overflow: hidden"] .qk,body[style*="overflow:hidden"] .qk,#header.menu-open~.qk{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){.qk .qk-b,.qk .qk-tip{transition:none}}
@media print{.qk{display:none!important}}