.zq-floating {
  --zq-size: 48px;
  --zq-x: 50px;
  --zq-y: 50px;
  position: fixed;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.zq-floating[data-x="right"] { right: calc(var(--zq-x) + env(safe-area-inset-right, 0px)); }
.zq-floating[data-x="left"] { left: calc(var(--zq-x) + env(safe-area-inset-left, 0px)); align-items: flex-start; }
.zq-floating[data-y="bottom"] { bottom: calc(var(--zq-y) + env(safe-area-inset-bottom, 0px)); }
.zq-floating[data-y="top"] { top: calc(var(--zq-y) + env(safe-area-inset-top, 0px)); flex-direction: column-reverse; }
.zq-floating__cluster, .zq-floating__stack { display: flex; flex-direction: column; align-items: inherit; gap: 10px; }
/* 여는 버튼은 늘 고정한 모서리에 붙어 있고 목록은 모서리 반대쪽으로 자란다. DOM 은 [토글][목록] 한 벌뿐이라
   아래쪽 고정일 때만 뒤집는다 — 안 뒤집으면 열 때마다 토글이 목록 위로 밀려 X 가 위·가운데로 간다. */
.zq-floating[data-y="bottom"] .zq-floating__cluster,
.zq-floating[data-y="bottom"] .zq-floating__stack { flex-direction: column-reverse; }
.zq-floating__stack[hidden], .zq-floating__cluster[hidden], .zq-floating__item[hidden] { display: none !important; }
.zq-floating__item, .zq-floating__toggle {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: var(--zq-size);
  min-height: var(--zq-size);
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--zq-bg) 78%, #000);
  border-radius: 999px;
  background: var(--zq-bg);
  color: var(--zq-fg);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform .2s ease, border-color .2s ease;
}
.zq-floating--rounded .zq-floating__item, .zq-floating--rounded .zq-floating__toggle { border-radius: 14px; }
.zq-floating__item:focus-visible, .zq-floating__toggle:focus-visible { outline: 3px solid rgba(25,170,255,.24); outline-offset: 3px; }
@media (hover:hover) {
  .zq-floating__item:hover, .zq-floating__toggle:hover { transform: translateY(-1px); }
}
.zq-floating__face, .zq-floating__toggle {
  width: var(--zq-size);
  height: var(--zq-size);
  flex: 0 0 var(--zq-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.zq-floating__face svg, .zq-floating__toggle svg { width: var(--zq-icon, 46%); height: var(--zq-icon, 46%); }
.zq-floating__face img { width: 100%; height: 100%; object-fit: cover; }
.zq-floating__label { display: none; padding: 0 17px 0 0; font-size: 14px; line-height: 1.3; font-weight: 650; white-space: nowrap; }
.zq-floating[data-x="left"] .zq-floating__item { flex-direction: row-reverse; }
.zq-floating[data-x="left"] .zq-floating__label { padding: 0 0 0 17px; }
.zq-floating--label-always .zq-floating__label { display: inline; }
@media (hover:hover) {
  .zq-floating--label-hover .zq-floating__item:hover .zq-floating__label,
  .zq-floating--label-hover .zq-floating__item:focus-visible .zq-floating__label { display: inline; }
}
.zq-floating__item.is-standalone { align-self: inherit; }
@media (max-width:767px) {
  .zq-floating--label-hover .zq-floating__label { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .zq-floating__item, .zq-floating__toggle { transition: none; }
  .zq-floating__item:hover, .zq-floating__toggle:hover { transform: none; }
}

/* 문의 폼·팝업은 플로팅보다 위, 시스템 동의/결제 모달보다 아래인 공용 레이어 예산을 쓴다. */
.zq-floating-dialog {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background: rgba(17, 24, 39, .48);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.zq-floating-dialog[hidden] { display: none !important; }
.zq-floating-dialog__panel {
  display: flex;
  width: min(720px, 100%);
  max-height: min(820px, calc(100vh - 36px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  box-sizing: border-box;
}
.zq-floating-dialog__head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-bottom: 1px solid #e7eaf0; }
.zq-floating-dialog__title { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 700; }
.zq-floating-dialog__close { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #667085; cursor: pointer; }
.zq-floating-dialog__close svg { display: block; width: 15px; height: 15px; }
.zq-floating-dialog__close:hover { background: #f3f5f8; color: #172033; }
.zq-floating-dialog__close:focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
.zq-floating-dialog__body { min-height: 180px; overflow: auto; padding: 20px; overscroll-behavior: contain; }
.zq-floating-dialog__body .wv-inquiry { max-width: none; }
.zq-floating-dialog__frame { display: block; width: 100%; min-height: min(620px, calc(100vh - 150px)); border: 0; background: #fff; }
.zq-floating-dialog__notice { margin: 0; padding: 28px 12px; color: #667085; font-size: 13px; line-height: 1.65; text-align: center; }
.zq-floating-dialog__actions { display: grid; gap: 8px; }
.zq-floating-dialog__actions button, .zq-floating-dialog__actions a { display: flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid #d9dee7; border-radius: 8px; background: #fff; color: #172033; font: 650 14px/1.35 Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.zq-floating-dialog__actions button:first-child { border-color: #2563eb; background: #2563eb; color: #fff; }
.zq-floating-dialog__actions button:hover, .zq-floating-dialog__actions a:hover { border-color: #94a3b8; background: #f8fafc; }
.zq-floating-dialog__actions button:first-child:hover { border-color: #1d4ed8; background: #1d4ed8; }
.zq-floating-dialog__actions :focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
/* 안내 한 마디짜리 판. 폼·팝업과 같은 720px 를 쓰면 두 줄짜리 문장이 가로로 흩어지고 글씨도 작아 보인다. */
.zq-floating-dialog--notice .zq-floating-dialog__panel { width: min(420px, 100%); }
.zq-floating-dialog--notice .zq-floating-dialog__body { min-height: 0; }
.zq-floating-dialog--notice .zq-floating-dialog__title { font-size: 16px; }
.zq-floating-dialog--notice .zq-floating-dialog__notice { padding: 40px; color: #172033; font-size: 16px; font-weight: 600; }
.zq-floating-dialog--notice .zq-floating-dialog__actions { justify-content: center; }
.zq-floating-dialog--notice .zq-floating-dialog__actions button { width: 135px; min-height: 50px; font-size: 16px; }
@media (max-width: 767px) {
  .zq-floating-dialog { padding: 0; align-items: end; }
  .zq-floating-dialog__panel { width: 100%; max-height: calc(100vh - env(safe-area-inset-top, 0px)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 8px 8px 0 0; }
  .zq-floating-dialog__body { padding: 16px; }
}

/* ── 구 서비스에서 옮겨 온 버튼의 아이콘 ─────────────────────────────────────────
   구 서비스는 버튼마다 관리자가 고른 아이콘을 icon_font_class 로 들고 있었다. 링크 종류로만
   아이콘을 정하면 "페이지이동" 버튼이 전부 같은 사슬 그림이 된다. 글꼴(modoo)은 신 서비스
   에셋에 이미 있으므로 새로 들이는 자산 없이 그 글자표만 여기 둔다.
   글리프는 구 floating.css 의 .floating_item .iconN:after 값에서 뽑았다 — 같은 파일의
   맨몸 .iconN:after 목록은 첫 줄이 어긋나 있어(.icon1 자리에 .icon2) 기준으로 쓰지 않는다. */
@font-face { font-family: "modoo"; src: url("/weven_service/asset/font/modoo_43c742.woff") format("woff"), url("/weven_service/asset/font/modoo_5a9be1.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: block; }
.zq-floating__glyph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; }
.zq-floating__glyph::after { font-family: "modoo"; font-size: 22px; font-weight: normal; font-style: normal; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; }
.zq-floating__glyph.icon1::after{content:"\EA4F"}
.zq-floating__glyph.icon2::after{content:"\EA5A"}
.zq-floating__glyph.icon3::after{content:"\EA65"}
.zq-floating__glyph.icon4::after{content:"\EA70"}
.zq-floating__glyph.icon5::after{content:"\EA7B"}
.zq-floating__glyph.icon6::after{content:"\EA7C"}
.zq-floating__glyph.icon7::after{content:"\EA7D"}
.zq-floating__glyph.icon8::after{content:"\EA7E"}
.zq-floating__glyph.icon9::after{content:"\EA7F"}
.zq-floating__glyph.icon10::after{content:"\EA50"}
.zq-floating__glyph.icon11::after{content:"\EA51"}
.zq-floating__glyph.icon12::after{content:"\EA52"}
.zq-floating__glyph.icon13::after{content:"\EA53"}
.zq-floating__glyph.icon14::after{content:"\EA54"}
.zq-floating__glyph.icon15::after{content:"\EA55"}
.zq-floating__glyph.icon16::after{content:"\EA56"}
.zq-floating__glyph.icon17::after{content:"\EA57"}
.zq-floating__glyph.icon18::after{content:"\EA58"}
.zq-floating__glyph.icon19::after{content:"\EA59"}
.zq-floating__glyph.icon20::after{content:"\EA5B"}
.zq-floating__glyph.icon21::after{content:"\EA5C"}
.zq-floating__glyph.icon22::after{content:"\EA5D"}
.zq-floating__glyph.icon23::after{content:"\EA5E"}
.zq-floating__glyph.icon24::after{content:"\EA5F"}
.zq-floating__glyph.icon25::after{content:"\EA60"}
.zq-floating__glyph.icon26::after{content:"\EA61"}
.zq-floating__glyph.icon27::after{content:"\EA62"}
.zq-floating__glyph.icon28::after{content:"\EA63"}
.zq-floating__glyph.icon29::after{content:"\EA64"}
.zq-floating__glyph.icon30::after{content:"\EA66"}
.zq-floating__glyph.icon31::after{content:"\EA67"}
.zq-floating__glyph.icon32::after{content:"\EA68"}
.zq-floating__glyph.icon33::after{content:"\EA69"}
.zq-floating__glyph.icon34::after{content:"\EA6A"}
.zq-floating__glyph.icon35::after{content:"\EA6B"}
.zq-floating__glyph.icon36::after{content:"\EA6C"}
.zq-floating__glyph.icon37::after{content:"\EA6D"}
.zq-floating__glyph.icon38::after{content:"\EA6E"}
.zq-floating__glyph.icon39::after{content:"\EA6F"}
.zq-floating__glyph.icon40::after{content:"\EA71"}
.zq-floating__glyph.icon41::after{content:"\EA72"}
.zq-floating__glyph.icon42::after{content:"\EA73"}
.zq-floating__glyph.icon43::after{content:"\EA74"}
.zq-floating__glyph.icon44::after{content:"\EA75"}
.zq-floating__glyph.icon45::after{content:"\EA76"}
.zq-floating__glyph.icon46::after{content:"\EA77"}
.zq-floating__glyph.icon47::after{content:"\EA78"}
.zq-floating__glyph.icon48::after{content:"\EA79"}
.zq-floating__glyph.icon49::after{content:"\EA7A"}
/* 구 서비스에서 옮겨 온 버튼 묶음. 그쪽은 테두리 없이 그림자 하나로 떠 있었다 —
   신 서비스 기본 차림(1px 링, 그림자 없음)과 달라 "효과가 빠졌다" 로 읽힌다(2026-08-31 QA). */
.zq-floating--legacy .zq-floating__item,
.zq-floating--legacy .zq-floating__toggle {
  border-color: transparent;
  box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, .2);
}
