@charset "utf-8";
/******************************************************************
    프레쉬랩 CTA — 전화문의 / 문의하기 / 맨위로
    - PC: 우측 하단 플로팅 — 딥그린 알약 패널(카톡문의 · 문의하기 · 전화문의) + 맨위로 원형 버튼
    - 태블릿·랩탑(769~1536px): 같은 플로팅 패널을 화면에 맞춰 축소
    - 모바일(768px 이하): 본문을 가리지 않도록 하단 가로 바, 안전 영역과 문서 끝 여백 확보
    참고: busanbcm 테마의 cta.css 구조. 색은 freshlab-brand.css 토큰만 사용.
    형광펜 · 숨고 크롤링 · 사이드 드로어 기능은 가져오지 않는다.
******************************************************************/

/* ---------- PC 우측 플로팅 퀵 버튼 ---------- */
/* 퀵 버튼 위치·폭 — 푸터(fl-footer.css)가 이 값으로 오른쪽 여백을 비우므로 한 곳에서만 관리한다.
   right 는 헤더 양옆 여백과 같게 맞춘다(PC 알약 헤더 바깥 여백 40px, 1280px 이하 24px, 1024px 이하 --fl-gutter).
   768px 이하 가로 바는 아래 반응형 규칙에서 위치와 푸터 여백을 재정의한다. */
:root { --fl-quick-right: 40px; --fl-quick-w: 76px; }
@media screen and (max-width: 1280px) { :root { --fl-quick-right: 24px; } }
@media screen and (max-width: 1024px) { :root { --fl-quick-right: var(--fl-gutter); --fl-quick-w: 64px; } }
/* 모든 퀵 버튼은 테두리·안쪽 여백을 크기에 포함한다 */
.ft-quick-container, .ft-quick-container *, .ft-quick-container *::before, .ft-quick-container *::after { box-sizing: border-box; }
.ft-quick-container {display: flex; flex-direction: column; align-items: center; gap: 12px; bottom: 30px;}
ul.ft-quick-container { right: var(--fl-quick-right); } /* ul 까지 붙여 responsive.css 의 .ft-quick-container right 보다 우선 */
.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: none; 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: var(--fl-quick-w); height: auto; padding: 14px 0;
    border: 1px solid transparent; border-radius: 999px; background: var(--fl-dark); box-shadow: none; 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 { transition: transform .3s ease, 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); }
.quick-panel-item { position: relative; }
.quick-panel-badge { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--fl-mango); font-family: var(--fl-font-en); font-size: 11px; font-weight: 700; line-height: 18px; color: var(--fl-white); text-align: center; } /* 문의관리: 처리 전 문의 수 */
.ft-quick-container .quick-panel--admin .quick-panel-item:focus-visible { outline-color: var(--fl-primary); }

/* 맨 위로 — 흰 바탕·잉크 화살표, 호버 시 패널과 같은 딥그린 바탕·크림 화살표 + 크림 라인, 모양만 패널 폭(76px)의 둥근 네모 */
.ft-quick-container > li.quick-top { width: var(--fl-quick-w); 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 넘게 내리면 li 에 .is-show, 목록에 .has-visible-top 을 붙인다).
   높이는 접지 않고 제자리에서 살짝 내려가며 스르륵 사라지고, 위 패널들은 그 자리(버튼 높이 + 간격)만큼 부드럽게 내려온다 */
.ft-quick-container { --fl-quick-top-offset: 68px; } /* 56px + gap 12px */
.ft-quick-container > li.quick-top { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, border-color .2s ease, background .2s ease; }
.ft-quick-container > li.quick-top.is-show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.ft-quick-container:not(.has-visible-top) > li:not(.quick-top) { transform: translateY(var(--fl-quick-top-offset)); }
.ft-quick-container > li.quick-top #gw-top_btn:focus-visible { outline: 3px solid var(--fl-primary); outline-offset: 2px; }

/* 터치 기기(호버 없음): 호버 때만 보이던 테두리를 항상 흰색 1px 로 보여 버튼 경계를 드러낸다 */
@media (hover: none) {
    .ft-quick-container > li.quick-panel, .ft-quick-container > li.quick-top { border-color: var(--fl-white); }
    .ft-quick-container > li.quick-panel--admin { border-color: var(--fl-ink-2); } /* 흰 바탕 관리자 패널은 흰 테두리가 안 보이므로 호버 때와 같은 색 */
}

/* 전화번호 링크는 밑줄 없이 본문 색 유지, 호버만 브랜드 컬러 */
.tel-link { color: inherit; }
.tel-link:hover { color: var(--fl-primary, #e5484d); }

/* ---------- 태블릿·랩탑: 플로팅 패널 모양 그대로 축소 ---------- */
@media screen and (max-width: 1024px) {
    ul.ft-quick-container { gap: 10px; bottom: 20px !important; }
    .ft-quick-container > li.quick-panel { padding: 10px 0; }
    .quick-panel-item { width: 56px; min-height: 56px; gap: 4px; font-size: 11px; }
    .quick-panel-item .fl-ico { width: 20px; height: 20px; }
    .quick-panel-item i { font-size: 20px; }
    .ft-quick-container > li.quick-top { height: 48px; border-radius: 16px; }
    .ft-quick-container { --fl-quick-top-offset: 58px; } /* 48px + gap 10px */
}

/* 모바일(768px 이하): 세로 퀵 패널이 본문·게시판 검색을 가리지 않도록 화면 아래 가로 바로 붙인다.
   (한때 1536px 이하 전체를 가로 바로 바꿨으나 랩탑 화면에서 어색해 모바일만으로 되돌림) */
.ft-quick-container { pointer-events: none; }
.ft-quick-container > li { pointer-events: auto; }
body.on .ft-quick-container { visibility: hidden; pointer-events: none; }
body.on .ft-quick-container > li, body.on .ft-quick-container > li.quick-top { visibility: hidden; pointer-events: none; }
@media screen and (max-width: 768px) {
    :root { --fl-quick-bar-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
    html { scroll-padding-bottom: calc(var(--fl-quick-bar-h) + 16px); }
    html body { padding-bottom: var(--fl-quick-bar-h); }
    html:has(.quick-panel--admin) { --fl-quick-bar-h: calc(120px + env(safe-area-inset-bottom, 0px)); }
    ul.ft-quick-container {
        left: 0; right: 0; bottom: 0 !important; width: 100%; height: var(--fl-quick-bar-h);
        flex-direction: row; justify-content: center; align-items: center; gap: 8px;
        padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--fl-dark); border-top: 1px solid var(--fl-primary); pointer-events: auto;
    }
    .ft-quick-container > li.quick-panel {
        flex-direction: row; flex: 1; max-width: 540px; width: auto; height: 50px; gap: 0;
        padding: 0; border: 0; border-radius: 0; background: transparent; transform: none;
    }
    .ft-quick-container:not(.has-visible-top) > li:not(.quick-top) { transform: none; }
    .ft-quick-container .quick-panel-item { flex: 1; width: auto; min-width: 0; min-height: 48px; gap: 4px; font-size: 11px; }
    .ft-quick-container .quick-panel-item .fl-ico { width: 20px; height: 20px; }
    .ft-quick-container .quick-panel-item i { font-size: 20px; }
    .ft-quick-container .quick-panel-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }
    .ft-quick-container > li.quick-top { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--fl-cream); }
    .ft-quick-container > li.quick-top:not(.is-show) { display: none; }
    /* 관리자 도구도 가로로 유지해 로그인 상태에서 본문 옆으로 다시 쌓이지 않게 한다. */
    .ft-quick-container:has(.quick-panel--admin) { flex-wrap: wrap; }
    .ft-quick-container > li.quick-panel--admin { flex-basis: 100%; max-width: 100%; height: 48px; }
    .ft-quick-container .quick-panel--admin .quick-panel-item { color: var(--fl-cream); }
    body #ft.fl-ft { --fl-ft-quick-reserve: 0px; }
}