/* 플로팅 내비게이션(지시서 2026-11-13) — 하단 스티키 바 + 우측 퀵메뉴(≥1024px) + 1:1 상담센터.
   static/floatnav.js 짝. z-index 35 — 페이지보다 위, 메가 메뉴(45)·정책 받기 팝업(100)·
   커스텀 커서(9999)보다 아래(지시서 "공통" §4). */

body{ transition:padding-bottom .3s ease; }

/* ---------- 하단 스티키 바 ---------- */
.fn-bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  background:var(--hp-ink);
  transform:translateY(100%); transition:transform .3s ease;
}
.fn-bottombar.is-visible{ transform:translateY(0); }

.fn-bottombar-inner{
  display:none;
  max-width:1152px; margin:0 auto; height:64px; padding:0 24px;
  align-items:center; justify-content:space-between; gap:24px;
}
.fn-bottombar-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fn-bottombar-text strong{ font-size:15px; font-weight:700; color:var(--hp-white); white-space:nowrap; }
.fn-bottombar-text span{ font-size:12px; color:rgba(255,255,250,.6); white-space:nowrap; }

.fn-bottombar-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.fn-bar-btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  height:40px; padding:0 18px; border-radius:var(--radius-btn);
  border:1px solid rgba(255,255,250,.3); color:var(--hp-white);
  font-size:13px; font-weight:600; text-decoration:none;
}
.fn-bar-btn--primary{ background:var(--hp-accent); border-color:var(--hp-accent); }

.fn-bottombar-mobile{ display:none; }

@media (min-width:1024px){
  .fn-bottombar-inner{ display:flex; }
}

@media (max-width:1023px){
  .fn-bottombar{ padding-bottom:env(safe-area-inset-bottom, 0px); }
  .fn-bottombar-mobile{
    display:grid; grid-template-columns:repeat(3,1fr); height:60px;
  }
  .fn-mbar-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:rgba(255,255,250,.75); text-decoration:none; font-size:11px; font-weight:600;
  }
  .fn-mbar-btn--primary{ background:var(--hp-accent); color:var(--hp-white); }
}

/* ---------- 우측 퀵메뉴(≥1024px) ---------- */
.fn-quickmenu{
  display:none;
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:35;
  width:64px; flex-direction:column; align-items:stretch;
  background:var(--hp-white); border:1px solid var(--hp-line); border-radius:var(--radius-card);
  padding:12px 0; box-shadow:none;
}
@media (min-width:1024px){ .fn-quickmenu{ display:flex; } }

.fn-quick-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px; background:none; border:0; color:var(--hp-ink);
  font-size:11px; font-weight:600; text-decoration:none; cursor:pointer; font-family:inherit;
}
.fn-quick-item:hover{ color:var(--hp-accent); background:var(--hp-accent-tint); }
.fn-quick-divider{ height:1px; background:var(--hp-line); margin:6px 10px; }
.fn-quick-top{
  padding:10px 4px; background:none; border:0; color:var(--hp-grey);
  font-size:11px; font-weight:700; letter-spacing:.02em; cursor:pointer; font-family:inherit;
}
.fn-quick-top:hover{ color:var(--hp-accent); }

/* ---------- 1:1 상담센터 ---------- */
.fn-consult{
  position:fixed; right:22px; bottom:24px; z-index:35;
  display:flex; align-items:center; gap:10px;
  transition:bottom .3s ease;
}
.fn-consult.bar-visible{ bottom:84px; }
@media (max-width:1023px){
  .fn-consult{ right:16px; bottom:16px; }
  .fn-consult.bar-visible{ bottom:80px; }
}

.fn-consult-launcher{
  display:flex; align-items:center; gap:10px;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
}
.fn-consult-label{
  background:var(--hp-white); border:1px solid var(--hp-line); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:600; color:var(--hp-ink); white-space:nowrap;
}
.fn-consult-circle{
  width:60px; height:60px; border-radius:50%; background:var(--hp-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}

.fn-consult-panel{
  /* 팝업·대화창류는 "덮개·팝업" 단(z-index:100, 정책 받기 팝업과 같은 단)에 둔다 — 모바일
     전체화면 시트일 때 헤더(40)보다 위에 와야 해서 플로팅 내비 본단(35)보다 높아야 한다. */
  position:fixed; right:22px; bottom:96px; z-index:100;
  width:360px; max-width:calc(100vw - 32px); height:520px; max-height:70vh;
  background:var(--hp-white); border-radius:var(--radius-card); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 64px rgba(16,24,43,.18);
  opacity:0; transform:translateY(12px); transition:opacity .2s ease, transform .2s ease, bottom .3s ease;
}
/* 1024px 이상(둥둥 뜬 패널)에서만 하단 바 높이만큼 올려준다 — 모바일 전체화면 시트는
   아래 미디어쿼리의 top:0/bottom:0가 이 규칙보다 특정도가 낮아 밀릴 수 있어 폭을 좁힌다. */
@media (min-width:1024px){
  .fn-consult-panel.bar-visible{ bottom:156px; }
}
.fn-consult-panel.is-open{ opacity:1; transform:translateY(0); }
.fn-consult-panel[hidden]{ display:none; }

.fn-consult-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 20px; background:var(--hp-ink); color:var(--hp-white); flex:0 0 auto;
}
.fn-consult-title{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; }
.fn-online-dot{ width:7px; height:7px; border-radius:50%; background:var(--hp-accent); flex:0 0 auto; }
.fn-consult-sub{ margin-top:4px; font-size:11.5px; color:rgba(255,255,250,.6); }
.fn-consult-close{ background:none; border:0; color:var(--hp-white); padding:2px; cursor:pointer; flex:0 0 auto; }
.fn-consult-close:hover{ opacity:.7; }

.fn-consult-body{ flex:1 1 auto; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.fn-consult-msg{ max-width:88%; padding:10px 14px; border-radius:var(--radius-card); font-size:13px; line-height:1.55; }
.fn-consult-msg--assistant{ align-self:flex-start; background:var(--hp-grey-bg); color:var(--hp-ink); }
.fn-consult-msg--user{ align-self:flex-end; background:var(--hp-accent); color:#fff; }

.fn-consult-chips{ display:flex; flex-direction:column; gap:8px; }
.fn-consult-chip{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:#fff; border:1px solid var(--hp-line); border-radius:var(--radius-btn);
  font-size:13px; font-weight:600; color:var(--hp-ink); text-decoration:none; cursor:pointer; font-family:inherit;
  text-align:left;
}
.fn-consult-chip::after{ content:'→'; color:var(--hp-grey); }
.fn-consult-chip:hover{ border-color:var(--hp-accent); color:var(--hp-accent-text); }

.fn-consult-footer{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:14px 16px; border-top:1px solid var(--hp-line);
}
.fn-consult-input{
  flex:1 1 auto; height:40px; border:1px solid var(--hp-line); border-radius:999px;
  padding:0 16px; font-size:13px; font-family:inherit; color:var(--hp-ink); background:#fff;
}
.fn-consult-input:focus{ outline:none; border-color:var(--hp-accent); }
.fn-consult-send{
  width:40px; height:40px; border-radius:50%; background:var(--hp-accent); color:#fff;
  border:0; display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer;
}
.fn-consult-send:hover{ background:var(--hp-ink); }

@media (max-width:1023px){
  .fn-consult-panel{
    right:0; bottom:0; left:0; top:0; width:auto; max-width:none; height:auto; max-height:none;
    border-radius:0;
  }
  .fn-consult-header{ padding-top:calc(18px + env(safe-area-inset-top, 0px)); }
  .fn-consult-footer{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion:reduce){
  .fn-bottombar, .fn-consult, .fn-consult-panel{ transition:none; }
}

/* 아이콘 선 색 — SVG에 stroke 속성이 없어 아이콘이 안 보이던 문제 수정(2026-11-06) */
.fn-quick-item svg, .fn-bar-btn svg, .fn-mbar-btn svg{ stroke:currentColor; }