@charset "utf-8";
/******************************************************************
    구해줘 부산 방충망 — 전화문의 / 견적문의 CTA
    디자인 브리프 8장(모바일 UX) 기준.
    - PC: 헤더 우측 전화문의 버튼
    - 모바일(1024px 이하): 하단 고정 [전화문의][견적문의] 바
    컬러 토큰은 brand.css 에 정의되어 있다.
******************************************************************/

/* ---------- 우측 퀵 버튼 (전화 / 블로그 / 인스타) ---------- */
/* 원형 버튼의 크기·그림자·간격은 tail.css 의 .ft-quick-container > li 를 그대로 따른다 */

.ft-quick-container > li.quick-tel > a,
.ft-quick-container > li.quick-blog > a,
.ft-quick-container > li.quick-insta > a,
.ft-quick-container > li.tnb_admin > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 700;
    font-size: 12px;
    transition: color .3s;
}

/* 퀵버튼 4종(전화·블로그·인스타·Top): 각진 사각형, 기본 흰 배경 + 브랜드 컬러 아이콘.
   호버하면 배경이 각 브랜드 컬러로 차고 아이콘은 흰색이 된다.
   tail.css 의 원형(border-radius:100%)·Top의 #333 배경을 덮어쓴다. */
.ft-quick-container > li.quick-tel,
.ft-quick-container > li.quick-blog,
.ft-quick-container > li.quick-insta,
.ft-quick-container > li.quick-top,
.ft-quick-container > li.tnb_admin {
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    transition: background .3s, transform .3s ease, opacity .3s ease;
}
/* a 채우기 + 텍스트 라벨 숨김(아이콘만) */
.ft-quick-container > li.quick-tel > a,
.ft-quick-container > li.quick-blog > a,
.ft-quick-container > li.quick-insta > a,
.ft-quick-container > li.tnb_admin > a {
    gap: 0;
    font-size: 0;          /* '전화문의'·'테마관리'·'관리자' 등 텍스트 숨김 */
    border-radius: 0;
}
.ft-quick-container > li.quick-tel i,
.ft-quick-container > li.quick-blog i,
.ft-quick-container > li.quick-insta i,
.ft-quick-container > li.tnb_admin i {
    font-size: 22px;
    transition: color .3s;
}

/* 관리자 퀵버튼(테마관리·관리자) — Top 버튼과 동일: 차콜 아이콘, 호버 시 주황 배경 + 흰 아이콘 */
.ft-quick-container > li.tnb_admin i { color: var(--charcoal); }
.ft-quick-container > li.tnb_admin:hover { background: var(--brand-orange); }
.ft-quick-container > li.tnb_admin:hover i { color: #fff; }

/* 전화 — 포인트 컬러 */
.ft-quick-container > li.quick-tel i { color: var(--brand-orange); }
.ft-quick-container > li.quick-tel:hover { background: var(--brand-orange); }
.ft-quick-container > li.quick-tel:hover i { color: #fff; }

/* 네이버 블로그 — 그린 */
.ft-quick-container > li.quick-blog i { color: #03c75a; }
.ft-quick-container > li.quick-blog:hover { background: #03c75a; }
.ft-quick-container > li.quick-blog:hover i { color: #fff; }

/* 인스타그램 — 핑크 */
.ft-quick-container > li.quick-insta i { color: #e1306c; }
.ft-quick-container > li.quick-insta:hover { background: #e1306c; }
.ft-quick-container > li.quick-insta:hover i { color: #fff; }

/* ---------- Top 버튼 ---------- */
/* 표시/숨김 및 슬라이드 애니메이션은 tail.css 의 .ft-quick-container.is-scrolled
   규칙에서 처리한다. (스크롤 시 fade in up, 최상단에서 fade out down) */
#gw-top_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: 0;          /* 'Top' 텍스트 흔적 제거 */
}
.bcm-chevron-up {
    width: 24px;
    height: 20px;
    fill: none;
    stroke: var(--charcoal);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s;
}
.ft-quick-container > li.quick-top:hover { background: var(--brand-orange); }
.ft-quick-container > li.quick-top:hover .bcm-chevron-up { stroke: #fff; }

/* ---------- 모바일 하단 고정 CTA 바 ---------- */

/* 바의 생김새는 화면 폭과 무관하게 같다. 노출 여부만 아래 미디어쿼리에서 정한다.
   (1024px 이하는 항상 노출, 1025~1440px 는 사이드메뉴가 열렸을 때만 노출) */
.mob-cta-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    /* 사이드메뉴(#mob-gnb)는 #hd(z-index:9999) 안에 있어서 9990 으로는 메뉴 패널에
       가려 보이지 않았다. 메뉴가 열려도 바가 위에 오도록 #hd 보다 높게 둔다. */
    z-index: 10000;
    display: none;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    /* 아이폰 홈 인디케이터 영역 확보 */
    padding-bottom: env(safe-area-inset-bottom);
}
.mob-cta-bar > a {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 브리프 8장: 터치 영역 최소 44px */
    min-height: 56px;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 700;
    font-size: 17px;
}
.mob-cta-bar .mob-cta-tel {
    background: var(--cta-orange);
    color: #fff;
}
.mob-cta-bar .mob-cta-quote {
    background: var(--navy);
    color: #fff;
}
.mob-cta-bar > a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -5px;
}

@media screen and (max-width: 1024px) {
    /* 하단 고정 바에 전화문의가 있으므로 퀵 버튼의 전화는 숨긴다 */
    .ft-quick-container > li.quick-tel { display: none; }

    .mob-cta-bar { display: flex; }

    /* 고정 바가 푸터 내용을 가리지 않도록 여백 확보 */
    #ft { padding-bottom: 56px; }

    /* Top 버튼이 고정 바에 겹치지 않게 위로 올린다 (tail.css bottom:15px) */
    .ft-quick-container { bottom: 70px; }
}

/* 1025~1440px 는 평소엔 하단 바가 없지만 사이드메뉴는 쓰는 구간이다.
   메뉴를 열면(head.php 스크립트가 body 에 .on 을 붙인다) 메뉴 하단에도 같은 바를 보여준다.
   바(z-index:9990)가 사이드메뉴(#mob-gnb) 위에 얹힌다. */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    body.on .mob-cta-bar { display: flex; }
}

/* ---------- 전화번호 링크 ---------- */

.tel-link { color: inherit; }
.tel-link:hover { color: var(--cta-orange); }