/* ═══════════════════════════════════════════════════════════════
   흐놀 HNOL — quick-contact.css
   어느 페이지에서든 바로 연락하는 바(전화 · 카카오톡 · 1분 견적 문의)와 문의 시트.
   js/quick-contact.js 가 요소를 만든다. 자바스크립트가 꺼져 있으면 아무것도 안 보이고,
   페이지에 원래 있던 문의 링크가 그대로 남는다.

   휴대폰: 화면 아래 고정 바(세 칸). PC: 오른쪽 아래 작은 묶음.
   색과 서체는 site.css · page.css 토큰을 쓰고, 토큰이 없을 때를 위해 같은 값을 기본값으로 둔다.
   ═══════════════════════════════════════════════════════════════ */

.qc, .qcs{
  --qc-bg: rgba(8,10,18,.94);
  --qc-line: var(--line, rgba(150,170,220,.13));
  --qc-ink: var(--ink, #e9edf6);
  --qc-ink-2: var(--ink-2, #aab3c7);
}
.qc{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:1fr 1fr 1.45fr; gap:8px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:var(--qc-bg);
  border-top:1px solid var(--qc-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:var(--sans, system-ui, sans-serif);
  transform:translateY(110%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.qc.is-shown{ transform:none; }
.qc.is-hidden{ transform:translateY(110%); }
@media (prefers-reduced-motion:reduce){ .qc{ transition:none; } }

.qc__btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; padding:0 10px;
  border-radius:12px; border:1px solid var(--qc-line);
  background:rgba(150,170,220,.05); color:var(--qc-ink);
  font:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.qc__btn svg{ width:18px; height:18px; flex:none; }
.qc__btn:focus-visible{ outline:2px solid var(--cyan, #35e7e0); outline-offset:2px; }
.qc__btn--kakao{ background:#fee500; border-color:#fee500; color:#191919; }
.qc__btn--main{
  background:linear-gradient(96deg, #d9fffd, #cfe0ff); border-color:transparent; color:#06070d;
  box-shadow:0 10px 30px -14px rgba(53,231,224,.55);
}
.qc__num{ display:none; }

/* 바가 본문 끝(푸터)을 가리지 않게 */
body.has-qc{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }

@media (min-width:900px){
  .qc{
    left:auto; right:24px; bottom:24px;
    display:flex; gap:8px; padding:8px;
    border:1px solid var(--qc-line); border-radius:18px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
    transform:translateY(calc(100% + 32px));
  }
  .qc__btn{ min-height:44px; padding:0 16px; font-size:14px; }
  .qc__btn--tel .qc__lab{ display:none; }
  .qc__num{ display:inline; font-family:var(--mono, ui-monospace, monospace); font-weight:600; letter-spacing:0; }
  body.has-qc{ padding-bottom:0; }
}

/* ═══════════════════ 문의 시트 ═══════════════════ */
.qcs{
  --qcs-line: var(--line, rgba(150,170,220,.13));
  width:100%; max-width:100%; max-height:92vh; margin:auto 0 0;
  padding:0; border:0; border-radius:20px 20px 0 0;
  background:#0b0e18; color:var(--ink, #e9edf6);
  font-family:var(--sans, system-ui, sans-serif);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.8);
  overflow:auto; overscroll-behavior:contain;
}
.qcs::backdrop{ background:rgba(2,3,8,.66); }
@media (min-width:640px){
  .qcs{ width:460px; margin:auto; border-radius:20px; border:1px solid var(--qcs-line); }
}
.qcs__in{ padding:22px 20px calc(20px + env(safe-area-inset-bottom)); }
.qcs__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.qcs__title{ margin:0; font-size:20px; line-height:1.35; letter-spacing:-.03em; }
.qcs__sub{ margin:6px 0 0; color:var(--ink-2, #aab3c7); font-size:14px; line-height:1.6; }
.qcs__x{
  flex:none; width:36px; height:36px; margin:-6px -6px 0 0;
  border:0; border-radius:10px; background:transparent; color:var(--ink-2, #aab3c7);
  font-size:22px; line-height:1; cursor:pointer;
}
.qcs__x:hover{ background:rgba(150,170,220,.08); color:#fff; }

.qcs__form{ margin-top:16px; display:grid; gap:14px; }
.qcs__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; border:0; }
.qcs__chips legend{ margin-bottom:8px; padding:0; font-size:13px; font-weight:700; color:var(--ink-2, #aab3c7); }
.qcs__chip input{ position:absolute; opacity:0; pointer-events:none; }
.qcs__chip span{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid var(--qcs-line); background:rgba(150,170,220,.04);
  font-size:14px; color:var(--ink-2, #aab3c7); cursor:pointer;
}
.qcs__chip input:checked + span{ background:rgba(53,231,224,.14); border-color:rgba(53,231,224,.55); color:#fff; }
.qcs__chip input:focus-visible + span{ outline:2px solid var(--cyan, #35e7e0); outline-offset:2px; }

.qcs__field{ display:grid; gap:6px; }
.qcs__field > span{ font-size:13px; font-weight:700; color:var(--ink-2, #aab3c7); }
.qcs__field input, .qcs__field textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--qcs-line); background:#070910; color:#fff;
  font:inherit; font-size:16px; line-height:1.5;   /* 16px 미만이면 iOS 가 확대한다 */
}
.qcs__field textarea{ min-height:96px; resize:vertical; }
.qcs__field input:focus, .qcs__field textarea:focus{ outline:none; border-color:rgba(53,231,224,.6); }
.qcs__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.qcs__consent{ margin:0; font-size:12.5px; line-height:1.6; color:var(--dim, #6f7893); }
.qcs__consent a{ color:var(--ink-2, #aab3c7); }
.qcs__err{ margin:0; font-size:14px; color:#ff9c9c; }
.qcs__err a{ color:#ffd0d0; }
.qcs__send{
  min-height:52px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(96deg, #d9fffd, #cfe0ff); color:#06070d;
  font:inherit; font-size:16px; font-weight:800; letter-spacing:-.02em;
}
.qcs__send[disabled]{ opacity:.6; cursor:progress; }
.qcs__alt{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2, #aab3c7); text-align:center; }
.qcs__alt a{ color:#fff; }

.qcs__done{ display:grid; gap:12px; margin-top:6px; }
.qcs__done .qc__btn{ min-height:50px; }