/* ==========================================================================
   to-top — 맨 위로 `[2026-09-18]`

   제품 목록·약관처럼 긴 화면에서 위로 돌아가려면 손가락을 여러 번 쓸어야 했다.
   화면 오른쪽 아래에 늘 같은 자리로 둔다.

   화면 꼭대기에서도 늘 보인다 `[2026-09-18]` — 내려간 뒤에야 나타나면
   있는 줄 모르고 손가락으로 쓸어 올린다. 늘 같은 자리에 있어야 손이 기억한다.

   하단 고정 줄(장바구니·견적의 담기 줄) 위에 앉는다 — 그 줄을 가리면
   정작 눌러야 할 것을 못 누른다.
   ========================================================================== */

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 54;              /* 하단 줄(55)·메뉴(60) 아래 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-bg);
  /* 선은 옅게 `[2026-09-18]` — 썸네일 테두리색(--c-line)은 흰 동그라미 위에서
     또렷해 본문보다 먼저 눈에 들어왔다. 늘 떠 있는 것은 조용해야 한다 */
  border: 1px solid var(--c-line-soft);
  border-radius: 50%;
  color: var(--c-text-sub);
  box-shadow: 0 4px 14px rgb(0 24 56 / .16);

  transition: border-color .15s ease, color .15s ease;
}

/* 마우스를 올렸을 때만 진해진다 `[2026-09-18]`.
   손가락으로 쓰는 화면에서는 :hover 가 **누른 뒤에도 남는다** — 한 번 누르면
   다른 곳을 누를 때까지 계속 진한 채로 있어 눌린 것처럼 보였다.
   hover: hover 는 정말 올릴 수 있는 기기에서만 켜진다 */
@media (hover: hover) {
  .to-top:hover {
    border-color: var(--c-line);
    color: var(--c-text);
  }
}

/* 하단 고정 줄이 있는 화면에서는 그 위로 올라앉는다 `[2026-09-18]`.
   버튼이 줄 아래층(54 < 55)이라 그대로 두면 줄에 덮여 보이지 않는다.
   줄 높이는 화면마다 달라 각각 비켜 준다 — 장바구니가 가장 두껍다
   (합계 두 줄 + 버튼), INQUIRY 는 버튼 한 줄뿐이다.

   :has 를 모르는 브라우저에서는 버튼이 제자리에 남는다. 줄에 가리지만
   페이지가 깨지지는 않는다 */
@media (max-width: 767px) {
  body:has(.order-summary) .to-top { bottom: calc(118px + var(--sp-3)); }
  body:has(.config-bar) .to-top { bottom: calc(73px + var(--sp-3)); }
}

/* 떠 있는 문의 버튼과 같은 모서리를 쓴다 — 그 위로 쌓는다 `[2026-09-21]`.

   폭을 가리지 않는다 `[2026-09-29]`. 이 규칙이 좁은 화면 안에만 있어서
   넓은 화면에서는 둘이 같은 자리에 겹쳤다 — 흰 동그라미가 알약 뒤로
   초승달처럼 삐져나와 보였다. 버튼 높이는 --cta-h 가 폭마다 들고 있다 */
body:has(.floating-cta__btn) .to-top {
  bottom: calc(var(--gutter) + var(--cta-h) + var(--sp-3));
}