@charset "utf-8";
/******************************************************************
    프레쉬랩 CTA — 전화문의 / 문의하기 / 맨위로
    - PC: 우측 하단 플로팅 — 딥그린 알약 패널(카톡문의 · 문의하기 · 전화문의) + 맨위로 원형 버튼
    - 모바일(1024px 이하): 하단 고정 [전화 문의][문의하기] 바
    참고: busanbcm 테마의 cta.css 구조. 색은 freshlab-brand.css 토큰만 사용.
    형광펜 · 숨고 크롤링 · 사이드 드로어 기능은 가져오지 않는다.
******************************************************************/

/* ---------- PC 우측 플로팅 퀵 버튼 ---------- */
/* tail.css 의 .ft-quick-container 크기·간격 로직을 유지하고 색상만 브랜드 톤으로 보정 */
.ft-quick-container {display: flex; flex-direction: column; align-items: center; gap: 12px; bottom: 30px; right: 30px;}
.ft-quick-container > li {width: 56px; height: 56px; margin-bottom: 0; background: #fff; box-shadow: var(--fl-shadow, 0 10px 30px rgba(29,35,32,.14)); transition: transform .25s, background .25s;}
.ft-quick-container > li:hover {transform: translateY(-3px);}

/* 카톡문의 · 문의하기 · 전화문의 — 딥그린 세로 알약 패널 하나에 아이콘 + 라벨 */
.ft-quick-container > li.quick-panel {
    flex-direction: column; gap: 4px; width: 76px; height: auto; padding: 14px 0;
    border: 1px solid transparent; border-radius: 999px; background: var(--fl-dark); box-shadow: var(--fl-shadow-lg); box-sizing: border-box;
}
.ft-quick-container > li.quick-panel:hover { transform: none; }
.quick-panel-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 64px; min-height: 64px; border-radius: 999px;
    font-family: var(--fl-font); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-decoration: none;
}
.quick-panel-item, .quick-panel-item:link, .quick-panel-item:visited { color: var(--fl-cream); }
.quick-panel-item .fl-ico, .quick-panel-item i { transition: transform .25s cubic-bezier(.22, .8, .24, 1); }
.quick-panel-item .fl-ico { width: 22px; height: 22px; }
/* 항목 호버: 아이콘만 살짝 위로 올라온다 */
a.quick-panel-item:hover .fl-ico, a.quick-panel-item:hover i { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { a.quick-panel-item:hover .fl-ico, a.quick-panel-item:hover i { transform: none; } }
/* 호버: 패널·맨 위로 버튼 테두리에 크림 1px 라인이 생긴다 */
.ft-quick-container > li.quick-panel, .ft-quick-container > li.quick-top { transition: border-color .2s ease, background .2s ease; }
.ft-quick-container > li.quick-panel:hover, .ft-quick-container > li.quick-top:hover { border-color: var(--fl-cream); }
.quick-panel-item.is-disabled { cursor: default; }
.ft-quick-container .quick-panel-item:focus-visible { outline: 3px solid var(--fl-mango-on-dark); outline-offset: -3px; }
.quick-panel-item i { font-size: 22px; line-height: 1; }
/* 관리자 전용 패널(테마관리·관리자) — 같은 알약 모양, 흰 바탕 */
.ft-quick-container > li.quick-panel--admin { background: var(--fl-white); }
.ft-quick-container > li.quick-panel--admin:hover { border-color: var(--fl-ink-2); }
.quick-panel--admin .quick-panel-item, .quick-panel--admin .quick-panel-item:link, .quick-panel--admin .quick-panel-item:visited { color: var(--fl-ink-2); }
.ft-quick-container .quick-panel--admin .quick-panel-item:focus-visible { outline-color: var(--fl-primary); }

/* 맨 위로 — 흰 바탕·잉크 화살표, 호버 시 패널과 같은 딥그린 바탕·크림 화살표 + 크림 라인, 모양만 패널 폭(76px)의 둥근 네모 */
.ft-quick-container > li.quick-top { width: 76px; height: 56px; border: 1px solid transparent; border-radius: 20px; background: var(--fl-white); box-sizing: border-box; }
.ft-quick-container > li.quick-top:hover { background: var(--fl-dark) !important; transform: none; }
.ft-quick-container > li.quick-top #gw-top_btn { border-radius: inherit; }
.ft-quick-container > li.quick-top #gw-top_btn,
.ft-quick-container > li.quick-top #gw-top_btn i { color: var(--fl-ink); }
.ft-quick-container > li.quick-top:hover #gw-top_btn,
.ft-quick-container > li.quick-top:hover #gw-top_btn i { color: var(--fl-cream); }
.ft-quick-container > li.quick-top #gw-top_btn i { font-size: 22px; }
/* 스크롤 맨 위에서는 숨김(tail.php 가 200px 넘게 내리면 .is-show 를 붙인다). 높이·간격을 0 으로 접어 위 패널이 아래로 부드럽게 내려온다 */
.ft-quick-container > li.quick-top { overflow: hidden; transition: height .3s ease, margin .3s ease, opacity .25s ease, visibility .3s, border-color .2s ease, background .2s ease; }
.ft-quick-container > li.quick-top:not(.is-show) { height: 0; margin-top: -12px; border-width: 0; opacity: 0; visibility: hidden; }
.ft-quick-container > li.quick-top #gw-top_btn:focus-visible { outline: 3px solid var(--fl-primary); outline-offset: 2px; }

/* ---------- 모바일 하단 고정 CTA 바 ---------- */
.mob-cta-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10000; /* #hd(9999)와 모바일 메뉴보다 위 */
    display: none;
    width: 100%;
    border-top: 1px solid var(--fl-line, #e7e3dc);
    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;
    min-height: 56px;
    font-family: var(--fl-font);
    font-weight: 700;
    font-size: 16px;
}
.mob-cta-bar .mob-cta-tel { background: var(--fl-ink, #1d2320); color: #fff; }
.mob-cta-bar .mob-cta-quote { background: var(--fl-primary, #e5484d); color: #fff; }
.mob-cta-bar > a:focus-visible { outline: 3px solid var(--fl-mango-on-dark, #eeac93); outline-offset: -5px; }

@media screen and (max-width: 1024px) {
    /* 하단 고정 바에 전화·문의가 있으므로 플로팅 패널은 숨김 */
    .ft-quick-container > li.quick-panel:not(.quick-panel--admin) { display: none; }
    .ft-quick-container > li.quick-top { width: 60px; height: 48px; border-radius: 16px; }

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

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

    /* Top/관리자 버튼이 고정 바와 겹치지 않도록 위로 */
    .ft-quick-container { bottom: 76px; right: 20px; }
}

@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(--fl-primary, #e5484d); }
@media screen and (max-width: 1024px) {
    /* tail.css 의 bottom:20px 보다 우선 */
    ul.ft-quick-container { bottom: 76px !important; }
}