/* 카카오톡 문의가 잘 보이게 (2026-10-21) — front/pi/web/dock.jspf. web.css · 블로그 프로그램 site.css 와 따로(두 화면 틀이 같이 쓴다).
   카카오 노랑은 카카오 버튼에만. 휴대폰 띠의 다른 칸은 사이트 파랑(누르는 것). 움직임은 마우스 올림 때 글자 꼬리표만. */
.pi-float { position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:25; display:none;
            flex-direction:column; align-items:flex-end; gap:10px; }
.pi-float a { position:relative; display:grid; place-items:center; border-radius:50%; text-decoration:none;
              box-shadow:0 10px 24px -10px rgba(22,24,29,.45), 0 2px 6px rgba(22,24,29,.12); transition:transform .15s; }
.pi-float a:hover { transform:translateY(-2px); }
.pi-float a:focus-visible { outline:3px solid rgba(47,91,234,.45); outline-offset:3px; }
.pi-float svg { display:block; }
.pf-kakao { width:58px; height:58px; background:#FEE500; color:#191919; }
.pf-kakao svg { width:28px; height:28px; }
.pf-tip { position:absolute; right:calc(100% + 10px); top:50%; transform:translate(6px, -50%); white-space:nowrap; pointer-events:none;
          background:#191919; color:#fff; font-size:13px; font-weight:600; padding:6px 10px; border-radius:8px; opacity:0;
          transition:opacity .15s, transform .15s; }
.pf-kakao:hover .pf-tip, .pf-kakao:focus-visible .pf-tip { opacity:1; transform:translate(0, -50%); }
.pf-sns { width:44px; height:44px; background:#fff; color:#16181d; border:1px solid #e6e7ea; }
.pf-sns svg { width:20px; height:20px; }

/* 카카오 노란 버튼 — 문의 화면 제목 아래 · 검은 띠의 [문의하기] 옆 (.btn .btn-lg 와 같은 높이, 2026-10-21) */
.btn-kakao { background:#FEE500; color:#191919; border-color:#FEE500; gap:8px; line-height:1.25; }   /* 양식 [문의 보내기](button) 와 같은 높이 */
.btn-kakao:hover { background:#f5dc00; border-color:#f5dc00; }
.btn-kakao svg { width:20px; height:20px; flex:none; }
/* 검은 띠(다른 화면 band · 블로그 프로그램 trial)의 두 버튼 — 같은 높이(글줄 높이를 맞춘다) · 휴대폰은 위아래로 꽉 차게 */
.band-cta { display:flex; flex-wrap:wrap; gap:10px; }
.band-cta .btn { line-height:1.25; }
@media (max-width:767px) {
    .band-cta { display:grid; grid-template-columns:minmax(0,1fr); }
    .band-cta .btn { width:100%; justify-content:center; }
}

/* 휴대폰 아래 띠 — 본문 끝이 가리지 않게 같은 높이의 빈칸(mbar-space)을 둔다 */
.mbar, .mbar-space { display:none; }
@media (max-width:768px) {
    .mbar { position:fixed; left:0; right:0; bottom:0; z-index:25; display:flex; gap:8px;
            padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);
            border-top:1px solid #e6e7ea; box-shadow:0 -6px 18px -12px rgba(22,24,29,.25); }
    .mbar a { flex:1 1 0; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
              border-radius:12px; font-size:15px; font-weight:700; text-decoration:none; }
    .mbar a:active { transform:translateY(1px); }
    .mbar svg { width:20px; height:20px; flex:none; }
    .mbar-kakao { background:#FEE500; color:#191919; }
    .mbar-go { background:#2f5bea; color:#fff; }
    .mbar-space { display:block; height:calc(65px + env(safe-area-inset-bottom)); }   /* 띠 높이 = 8 + 48 + 8 + 위 선 1 */
}
@media (min-width:769px) {
    .pi-float { display:flex; }
}
@media (prefers-reduced-motion:reduce) {
    .pi-float a, .pf-tip { transition:none; }
}