/* ─────────────────────────────────────────────────────────
   안내 데스크(챗봇) — 떠 있는 말풍선 단추 + 대화창 팝업.
   ★ 이 파일과 help.js 가 «한 벌»이다. 페이지마다 복사하지 말고 두 줄로 불러 쓴다:
       <link rel="stylesheet" href="help.css">
       <script src="help.js" data-site="ATHOME" defer></script>
     (아래 폴더에서는 ../help.css · ../help.js)
   색은 페이지 토큰에 기대지 않고 여기서 스스로 정한다 — 어느 페이지에 붙어도 같은 모습.
   ───────────────────────────────────────────────────────── */

.hd-fab, .hd-dim, .hd-panel{
  --hd-deep:#060F1C;
  --hd-panel:#132133;
  --hd-panel-2:#1A2A3D;
  --hd-line:#1F2E42;
  --hd-gold:#DAC694;
  --hd-gold-hi:#EBDCB7;
  --hd-on-gold:#09182D;
  --hd-text:#E9F0F8;
  --hd-mute:#93A7BF;
  --hd-body:#C4D2E2;
  --hd-faint:#7E93AC;
}

@keyframes hdRise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ───────── 떠 있는 단추 ───────── */
.hd-fab{
  position:fixed; right:20px; bottom:20px; z-index:60; cursor:pointer;
  display:flex; align-items:center; gap:9px; border:none; border-radius:999px;
  padding:13px 20px 13px 17px;
  font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:14.5px; font-weight:700;
  background:var(--hd-gold); color:var(--hd-on-gold); box-shadow:0 10px 26px rgba(0,0,0,.42);
}
.hd-fab:hover{background:var(--hd-gold-hi)}
.hd-fab.off{display:none}          /* 대화창이 열려 있는 동안에는 감춘다 */
.hd-fab svg{width:19px; height:19px; fill:currentColor; flex:0 0 auto}
@media (max-width:520px){
  .hd-fab{padding:0; width:56px; height:56px; justify-content:center; right:16px; bottom:16px}
  .hd-fab .fab-t{display:none}
}

/* ───────── 대화창 ───────── */
.hd-dim{position:fixed; inset:0; background:rgba(4,10,20,.62); z-index:70; display:none}
.hd-dim.on{display:block}
.hd-panel{
  position:fixed; z-index:71; right:20px; bottom:20px; display:none; flex-direction:column;
  width:min(400px, calc(100vw - 40px)); height:min(620px, calc(100vh - 40px));
  font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  line-height:1.7; color:var(--hd-text);
  background:var(--hd-panel); border:1px solid var(--hd-line); border-radius:16px;
  overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55); animation:hdRise .18s ease;
}
.hd-panel.on{display:flex}
.hd-panel *{box-sizing:border-box}
/* 휴대폰에서는 아래에서 올라오는 시트 */
@media (max-width:520px){
  .hd-panel{right:0; left:0; bottom:0; width:100%; height:88vh; border-radius:16px 16px 0 0}
}

.hd-head{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:14px 12px 14px 18px; background:var(--hd-deep); border-bottom:1px solid var(--hd-line);
}
.hd-head .boat{width:17px; height:auto; fill:var(--hd-gold); flex:0 0 auto}
.hd-head b{flex:1; min-width:0; font-size:15px; letter-spacing:-.01em}
.hd-x{
  flex:0 0 auto; border:none; background:transparent; color:var(--hd-mute);
  font-size:21px; line-height:1; cursor:pointer; padding:5px 8px; border-radius:8px;
}
.hd-x:hover{color:var(--hd-text); background:var(--hd-panel-2)}

.hd-body{flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px}
.hd-msg{
  max-width:90%; font-size:14.5px; line-height:1.75; border-radius:12px;
  padding:11px 14px; white-space:pre-wrap; word-break:break-word;
}
.hd-bot{align-self:flex-start; background:var(--hd-panel-2); color:var(--hd-body); border-top-left-radius:4px}
.hd-me{align-self:flex-end; background:var(--hd-gold); color:var(--hd-on-gold); font-weight:700; border-top-right-radius:4px}

.hd-cards{display:grid; gap:8px}
.hd-card{
  width:100%; display:flex; gap:10px; align-items:baseline; text-align:left; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; line-height:1.5;
  background:#101D2E; border:1px solid var(--hd-line); color:var(--hd-text);
  border-radius:11px; padding:12px 14px;
}
.hd-card:hover{border-color:var(--hd-gold); color:var(--hd-gold-hi)}
.hd-card .n{flex:0 0 auto; font-size:11.5px; color:var(--hd-gold); opacity:.85;
            font-family:'Space Mono',ui-monospace,Consolas,monospace}
.hd-more{
  align-self:flex-start; cursor:pointer; font-family:inherit; font-size:13px;
  background:transparent; border:1px dashed var(--hd-line); color:var(--hd-mute);
  border-radius:10px; padding:9px 13px;
}
.hd-more:hover{color:var(--hd-gold); border-color:var(--hd-gold)}

/* ───────── 문의 칸 ───────── */
.hd-form{background:var(--hd-panel-2); border:1px solid var(--hd-line); border-radius:12px;
         padding:14px; display:grid; gap:9px}
.hd-form .lab{font-size:12px; font-weight:700; color:var(--hd-mute)}
.hd-form input,.hd-form textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--hd-text);
  background:#0D1A2A; border:1px solid var(--hd-line); border-radius:9px; padding:10px 12px;
}
.hd-form textarea{min-height:86px; resize:vertical; line-height:1.6}
.hd-form input::placeholder,.hd-form textarea::placeholder{color:var(--hd-faint)}
.hd-send{
  margin-top:3px; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:700;
  background:var(--hd-gold); color:var(--hd-on-gold); border:none; border-radius:9px; padding:11px;
}
.hd-send:hover{background:var(--hd-gold-hi)}
.hd-send:disabled{opacity:.6; cursor:default}
.hd-bad{color:#F0A9A0; font-size:13px; line-height:1.6}
/* 숨은 칸 — 사람에게는 안 보이므로 차 있으면 로봇이다(가입 신청서와 같은 방식) */
.hd-hp{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden}

/* ───────── 아래 입력 줄 ───────── */
.hd-foot{flex:0 0 auto; display:flex; gap:8px; padding:12px;
         background:var(--hd-deep); border-top:1px solid var(--hd-line)}
.hd-foot input{
  flex:1; min-width:0; font-family:inherit; font-size:14.5px; color:var(--hd-text);
  background:var(--hd-panel); border:1px solid var(--hd-line); border-radius:10px; padding:11px 13px;
}
.hd-foot input::placeholder{color:var(--hd-faint)}
.hd-foot button{
  flex:0 0 auto; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700;
  background:var(--hd-gold); color:var(--hd-on-gold); border:none; border-radius:10px; padding:0 16px;
}
.hd-foot button:hover{background:var(--hd-gold-hi)}

@media (prefers-reduced-motion:reduce){ .hd-panel{animation:none} }