@charset "utf-8";

/* ============================
   화면에 떠 있는 것들의 z-index 사다리

     100  헤더            (header.css)
     150  모바일 메뉴 패널  (header.css)
     200  헤더 행          (header.css)
   ------------------------------------
     400  탑 버튼
     410  상담 신청 버튼 (닫힘)   상담 폼 스니펫
     420  퀵메뉴                 닫힌 상담 버튼보다 위여야 한다
     500  상담 폼                상담 폼 스니펫
     510  상담 신청 버튼 (열림)   폼보다 위여야 닫을 수 있다
     600  완료 모달              상담 폼 스니펫

   400 번대를 비워 둔 이유 — 사이에 끼워 넣을 자리를 남긴다.
   스니펫 쪽 값을 바꾸면 여기 표도 함께 고칠 것
============================ */

/* 퀵메뉴 · 탑 버튼 배치 토큰 (컴포넌트 전용) */
:root {
  --one-quick-size: 80px;    /* QUICK 버튼 지름 */
  --one-quick-right: 30px;   /* 화면 우측 여백 */
  --one-quick-bottom: 125px; /* QUICK 버튼 하단 위치 */
  --one-top-gap: 14px;       /* 두 버튼 사이 간격 */
  --one-top-size: var(--one-quick-size);              /* 탑 버튼 지름 — QUICK 과 동일 */
  --one-top-icon: calc(var(--one-top-size) * 0.32);   /* 화살표 — 지름의 32% */
  --one-quick-h: 52px;       /* 모바일 하단 고정 바 높이 — 패널 안전 패딩이 참조 */
}

.quick_btn_box {
  position: fixed;
  bottom: var(--one-quick-bottom);
  right: var(--one-quick-right);
  width: var(--one-quick-size);
  height: var(--one-quick-size);
  border-radius: 50%;
  transition: 0.2s;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  /* 닫힌 상담 신청 버튼(410) 위. SNS 바가 펼쳐질 때 덮이지 않는다.
     아래 .quick_btn · .quick_bar 은 이 박스가 만든 쌓임 맥락 안이라
     바깥과 비교되는 값은 여기 하나뿐이다 */
  z-index: 420;
  cursor: pointer;
}

.quick_btn_box.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.quick_btn_box .quick_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--main-color);
  z-index: 2;   /* 박스 안 — .quick_bar 위 */
  cursor: pointer;
}

.quick_btn_box .txt {
  color: #fff;
  padding-bottom: 2px;
}

.quick_bar {
  position: fixed;
  right: 0px;
  bottom: 40px;
  width: 80px;
  border-radius: 100px 100px 0 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: 0.6s;
  z-index: 1;   /* 박스 안 — QUICK 원 아래에서 펼쳐진다 */
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.05);
  /* ★ 닫힘 상태 포인터 통과 — 닫히는 0.6s 동안 탑 · 상담 버튼을 덮어 다시 열리는 것 방지 */
  pointer-events: none;
}

.quick_bar>ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 35px 0 50px;
  text-align: center;
  margin: 0;
  overflow: hidden;
}

.quick_bar li {
  list-style: none;
}

.quick_bar li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration-line: none;
  padding: 10% 0;
}

.quick_bar li a img {
  width: 32px;
}

.quick_bar li a span {
  color: #666;
  font-size: 13px;
}

.quick_bar li:hover a img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(42%) saturate(273%) hue-rotate(341deg) brightness(96%) contrast(91%);
}

.quick_bar li:hover a span {
  color: #1f3c84;
}

/* SNS 바 열기 — common.js 의 initQuickBar() 가 .is-open 을 토글한다 */
.quick_btn_box.is-open .quick_bar {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* 아이콘만 타입 (.quick-ico) — 라벨은 마크업에 남겨 두고 숨긴다 (img alt 가 접근성 이름).
   모바일은 원래 아이콘만이라 차이가 없다. 미디어쿼리로 감싸지 않으면
   상세도가 아래 모바일 규칙보다 높아 하단 바까지 덮는다 */
@media all and (min-width: 1025px) {

  .quick-ico .quick_bar li a {
    gap: 0;
    padding: 14% 0;
  }

  .quick-ico .quick_bar li a span {
    display: none;
  }
}


@media screen and (max-width : 1024px) {
  /* QUICK 원형 버튼은 화면 밖으로 빼고 하단 바만 노출.
     부모 opacity 는 자식이 되돌릴 수 없으므로 여기서 해제한다. */
  .quick_btn_box {
    right: 100%;
    bottom: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  /* ★ transform 이 걸리면 position:fixed 자식(.quick_bar)의 컨테이닝 블록이 되어
     화면 밖 박스 기준으로 밀려난다. .active 의 translateY(0) 도 마찬가지라 함께 해제 */
  .quick_btn_box.active {
    transform: none;
  }

  /* 하단 고정 바 — 아이콘만 가로 균등 배치. 항목 개수 무관.
     pointer-events 는 되살린다 (빼면 하단 바 전체가 클릭되지 않는다) */
  .quick_bar {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    left: 0;
    right: 0;
    width: auto;
    bottom: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    /* ★ safe-area 보정을 일부러 넣지 않는다.
       viewport-fit=cover 를 쓰지 않으므로 브라우저가 홈 인디케이터 위에서
       레이아웃을 끝낸다 — env() 를 써도 항상 0px 이라 효과가 없었다.
       나중에 viewport-fit=cover 를 켜면 이 자리에
       padding-bottom: env(safe-area-inset-bottom, 0px); 를 되살릴 것 */
  }

  .quick_bar > ul {
    flex-direction: row;
    align-items: center;
    gap: 0;
    height: var(--one-quick-h);
    padding: 0 8px;
  }

  /* 항목 개수만큼 균등 분할 */
  .quick_bar ul li {
    flex: 1 1 0;
    min-width: 0;
  }

  .quick_bar li a {
    gap: 0;
    padding: 0;
  }

  /* 크기 고정 — % 로 두면 항목 개수에 따라 아이콘 크기가 달라진다 */
  .quick_bar li a img {
    width: 32px;
    max-width: 100%;
    height: auto;
  }

  /* 아이콘만 노출 (접근성 이름은 img alt 가 제공) */
  .quick_bar li a span {
    display: none;
  }

  /* hover 색상 반전은 PC 전용 */
  .quick_bar li:hover a img {
    filter: none;
  }

  /* 탑 버튼 — QUICK 이 숨겨지므로 축소 + 하단 바 위로.
     --one-top-bottom 은 상담 폼 스니펫의 플로팅 버튼도 참조한다.
     safe-area 보정을 더하지 않는 이유는 위 .quick_bar 주석 참조 */
  :root {
    --one-top-size: 60px;
    --one-top-bottom: calc(var(--one-quick-h) + 18px);
  }

  .one-top-btn {
    right: var(--one-space-safe);
    bottom: var(--one-top-bottom);
  }
}


/* ============================
   탑 버튼 (.one-top-btn)

   Astra 기본 scroll-to-top 은 inc/astra-compat.php 에서 끔.
   노출 조건은 QUICK 버튼과 동일 (common.js — initQuickBar)
============================ */

.one-top-btn {
  position: fixed;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--one-top-size);
  height: var(--one-top-size);
  border-radius: 50%;
  background-color: var(--main-color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.25s ease,
              visibility 0.25s ease, background-color 0.2s ease;
}

.one-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.one-top-btn:hover,
.one-top-btn:focus {
  background-color: var(--sub-color03);
  color: #fff;
}

.one-top-btn svg {
  display: block;
  width: var(--one-top-icon);
  height: auto;
}

/* QUICK 버튼 바로 아래, 같은 중심축에 정렬.
   min-width 로 감싸지 않으면 위 모바일 미디어쿼리의 위치 지정을 덮어쓴다 */
@media all and (min-width: 1025px) {

  .one-top-btn {
    right: calc(var(--one-quick-right) + (var(--one-quick-size) - var(--one-top-size)) / 2);
    bottom: calc(var(--one-quick-bottom) - var(--one-top-gap) - var(--one-top-size));
  }
}