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

/* ---------- PC 우측 플로팅 퀵 버튼 ---------- */
/* 퀵 버튼 위치·폭 — 푸터(fl-footer.css)가 이 값으로 오른쪽 여백을 비우므로 한 곳에서만 관리한다.
   right 는 헤더 양옆 여백과 같게 맞춘다(fl-header.css — PC 알약 헤더 바깥 여백 40px, 1280px 이하 24px,
   1024px 이하 전체 폭 헤더의 안쪽 여백 = --fl-gutter). 퀵 버튼 오른쪽 끝이 헤더(햄버거 버튼 쪽) 끝과 세로로 맞는다 */
: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; } }
@media screen and (max-width: 576px)  { :root { --fl-quick-w: 48px; } }

/* 모든 퀵 버튼은 테두리·안쪽 여백을 크기에 포함한다 */
.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: var(--fl-shadow, 0 10px 30px rgba(42, 26, 16,.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: var(--fl-quick-w); 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 { 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); } /* 흰 바탕 관리자 패널은 흰 테두리가 안 보이므로 호버 때와 같은 색 */
}

/* ---------- 태블릿·모바일: 하단 고정 바 없이 PC 플로팅 모양 그대로 축소 ---------- */
@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 */
}
/* 라벨 자리가 부족한 폭에서는 아이콘만 보인다(라벨은 스크린리더용으로 남긴다) */
@media screen and (max-width: 576px) {
    ul.ft-quick-container { gap: 8px; bottom: 16px !important; }
    .ft-quick-container > li.quick-panel { padding: 4px 0; }
    .quick-panel-item { width: 44px; min-height: 44px; gap: 0; }
    .quick-panel-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .ft-quick-container > li.quick-top { height: 44px; border-radius: 14px; }
    .ft-quick-container > li.quick-top #gw-top_btn i { font-size: 18px; }
    .ft-quick-container { --fl-quick-top-offset: 52px; } /* 44px + gap 8px */
}

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