@charset "utf-8";
/* ─────────────────────────────────────────────────────────────
   카카오톡 오픈채팅 문의 — 우측 스티키 버튼 (PC 공통)
   · 카카오 브랜드 컬러: 배경 #FEE500 / 심볼·글자 #3C1E1E
   · index.html 의 .right_brand_wrap(top:12rem, height:240px, z-index:9990)
     바로 아래에 오도록 top 값을 잡아 겹치지 않게 했다.
   ───────────────────────────────────────────────────────────── */

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

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

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

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

  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  transition: width .3s, padding .3s, box-shadow .3s;
}

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

/* theartpixel.css 가 전역으로 svg{width:33.125rem;display:flex} / path{fill:none;stroke:#000;
   stroke-dashoffset:400000} 를 걸어두고 있어(인트로 라인 애니메이션용) 그대로 두면
   아이콘이 아예 안 그려진다. 아래에서 전부 되돌린다. */
.kakao_fab .kf_ico {
  width: 30px; height: 30px;
  display: block;
  margin: 0;
  flex: none;
}
.kakao_fab .kf_ico path {
  fill: #3C1E1E;
  stroke: none;
  stroke-width: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.kakao_fab .kf_txt { display: block; }
/* "1:1 실시간" 보조 문구 */
.kakao_fab .kf_sub {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: rgba(60, 30, 30, .62);
}

/* 원본 우측 브랜드바(.right_brand_wrap)와 같은 방식으로 hover 시 살짝 넓어진다 */
.kakao_fab:hover {
  width: 96px;
  box-shadow: -3px 4px 16px rgba(0, 0, 0, .26);
}

/* 태블릿 이하에서는 조금 작게 */
@media screen and (max-width: 1024px) {
  .kakao_fab { width: 70px; padding: 13px 0 11px; font-size: 11px; }
  .kakao_fab .kf_ico { width: 26px; height: 26px; }
  .kakao_fab:hover { width: 82px; }
}

/* 모바일 폭에서는 모바일 페이지의 하단 CTA가 별도로 있으므로 노출하지 않는다 */
@media screen and (max-width: 767px) {
  .kakao_fab { display: none; }
}