@charset "utf-8";
/* ==========================================================
   BMTECH Floating UI — a2_ucube_floating-ui_expand-pill-inquiry-top 클론
   확장형 알약 문의 버튼 + 원형 TOP 버튼 (우하단 2단 스택)
   archive style.css verbatim — 수치 변경 없음. 색·폰트만 --bmt-* 토큰 연결
   ========================================================== */

/* 로컬 --wd-* 는 전역 --bmt-* 로 연결만 한다 (biz-cards 와 같은 규율) */
.wd-float-ui,
.wd-to-top {
  --wd-primary: var(--bmt-accent);
  --wd-text-inverse: var(--bmt-inverse);
  --wd-text-primary: var(--bmt-ink);
  --wd-transition: all 0.4s ease-in-out;
  --wd-font-primary: var(--bmt-font);
}

/* ==========================================================
   문의하기 — 확장형 알약
   ==========================================================
   기본은 60px 정원. hover 하면 width 만 160px 로 늘고
   그때 숨어 있던 라벨이 0.2s 늦게 떠오른다.
   아이콘은 폭 70px 로 잡혀 있어서, 늘어나도 아이콘 위치가 흔들리지 않는다 */
.wd-float-ui {
  position: fixed;
  right: 50px;
  bottom: -70px;                    /* 화면 밖에 대기 */
  z-index: 101;
  transition: var(--wd-transition);
  font-family: var(--wd-font-primary);
}

.wd-float-ui a {
  position: relative;
  display: flex;
  align-items: center;
  width: 60px;
  height: 60px;
  margin: auto;
  margin-right: 0;                  /* 늘어날 때 오른쪽 끝을 고정한다 */
  border-radius: 60px;
  background: var(--wd-primary);
  overflow: hidden;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.21);
  transition: var(--wd-transition);
}
.wd-float-ui a:hover { width: 160px; }

.wd-float-ui__icon {
  position: relative;
  z-index: 1;
  width: 70px;                      /* 60px 버튼보다 넓다 — 확장 중 아이콘 이동 방지 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wd-text-inverse);
}

.wd-float-ui__txt {
  position: absolute;
  left: 70px;                       /* 아이콘 폭 뒤에서 대기 */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--wd-text-inverse);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
  transition-delay: 0s;
}
/* 폭이 다 늘어난 뒤에 글자가 뜬다. 동시에 뜨면 글자가 잘려 보인다 */
.wd-float-ui a:hover .wd-float-ui__txt {
  opacity: 1;
  transition: var(--wd-transition);
  transition-delay: 0.2s;
}

/* 노출 상태 — 원본은 상황별로 위치를 달리 잡는다 */
.wd-float-ui--active { bottom: 60px; }
.wd-float-ui--stacked { bottom: 110px; }   /* TOP 버튼과 겹치지 않게 한 칸 올린다 */

/* ==========================================================
   TOP 버튼
   ==========================================================
   흰 반투명 + 그림자. 문의 버튼과 색을 맞추지 않아
   '주 액션(문의) / 보조 액션(TOP)' 위계가 색으로 갈린다 */
.wd-to-top {
  position: fixed;
  right: 50px;
  bottom: -60px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--wd-text-primary);
  box-shadow: 3px 4px 5px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: var(--wd-transition);
}
.wd-to-top--active { bottom: 40px; }

.wd-to-top__blind {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ==========================================================
   Responsive — 원본 기준 모바일에서 40px 로 줄이고 여백에 맞춘다
   ========================================================== */
@media screen and (max-width: 768px) {
  .wd-float-ui { right: 30px; }
  .wd-float-ui a { width: 45px; height: 45px; }
  .wd-float-ui a:hover { width: 130px; }
  .wd-float-ui__icon { width: 45px; }
  .wd-float-ui__txt { left: 45px; font-size: 13px; }
  .wd-float-ui--active { bottom: 45px; }
  .wd-float-ui--stacked { bottom: 85px; }

  .wd-to-top { right: 30px; width: 40px; height: 40px; }
  .wd-to-top svg { width: 16px; height: 16px; }
  .wd-to-top--active { bottom: 35px; }
}