@charset "utf-8";
/* ============================================================
   카카오톡 오픈채팅 문의 — PC 우측 스티키 버튼
   마크업은 js/kakao-fab.js 가 document.body 에 주입한다.

   [top 값 근거]
   theartpixel.css 의 기존 우측 고정바
     .right_brand_wrap { position: fixed; right: -82px; top: 12rem; height: 240px; }
   가 .show 상태에서 right:0 으로 붙는다. 그 아래로 내려보내기 위해
     top = 12rem(브랜드바 top) + 240px(브랜드바 height) + 20px(여백)
   로 잡았다. rem 부분은 브레이크포인트별 root font-size
   (16px 기본 / 15px ≤1600 / 14px ≤1400)를 그대로 따라가므로
   어느 폭에서도 브랜드바와 겹치지 않는다.
   z-index 는 .right_brand_wrap(9990) 보다 높은 9995,
   단 팝업 레이어(99999998~)보다는 낮게 둔다.
   ============================================================ */

.kakao_fab {
  position: fixed;
  right: 0;
  top: calc(12rem + 240px + 20px);
  z-index: 9995;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  box-sizing: border-box;
  width: 82px;
  padding: 16px 8px 14px;

  background: #FEE500;
  color: #3C1E1E;
  border-radius: 10px 0 0 10px;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, .16);

  text-decoration: none;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -.03em;
  cursor: pointer;

  transition: width .25s ease, box-shadow .25s ease;
}

.kakao_fab:hover,
.kakao_fab:focus,
.kakao_fab:visited { color: #3C1E1E; text-decoration: none; }

.kakao_fab:hover {
  width: 96px;
  box-shadow: -3px 3px 14px rgba(0, 0, 0, .24);
}

/* ── 아이콘 ────────────────────────────────────────────────
   원본 템플릿에 인트로 라인 애니메이션용 전역 규칙
     svg { width: 40.125rem; display: flex; margin: auto; overflow: hidden; }  (theartpixel.css)
     svg { width: 25rem; }  (m.css, ≤767px)
   가 있어 그대로 두면 아이콘이 화면 밖으로 늘어나 안 보인다.
   #lineSvg path / .logo_stroke path 같은 stroke 애니메이션 규칙에
   휩쓸리는 경우까지 대비해 fill/stroke 계열을 전부 되돌린다. */
.kakao_fab .kf_ico {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  flex: none;
  overflow: visible;
}

.kakao_fab .kf_ico path {
  fill: #3C1E1E;
  stroke: none;
  stroke-width: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
  animation: none;
}

/* ── 텍스트 ──────────────────────────────────────────────── */
.kakao_fab .kf_tit {
  display: block;
  font-family: 'nanumSq', 'Malgun Gothic', 'Dotum', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #3C1E1E;
}

.kakao_fab .kf_sub {
  display: block;
  font-family: 'nanumSq', 'Malgun Gothic', 'Dotum', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(60, 30, 30, .62);
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media all and (max-width: 1024px) {
  .kakao_fab { width: 68px; padding: 12px 6px 11px; gap: 5px; }
  .kakao_fab:hover { width: 78px; }
  .kakao_fab .kf_ico { width: 24px; height: 24px; }
  .kakao_fab .kf_tit { font-size: 11.5px; }
  .kakao_fab .kf_sub { font-size: 10px; }
}

/* 모바일은 하단 고정 CTA 바가 따로 있으므로 숨긴다 */
@media all and (max-width: 767px) {
  .kakao_fab { display: none !important; }
}