/* chatbot.css · 채팅 상담 위젯 (2026-09-11 · 챗봇 임무 WIDGET · DOM 계약 §C)
   ───────────────────────────────────────────────────────────────────────────
   무엇을 그리나
     ≥768  오른쪽 아래 알약 런처 + 그 위에 뜨는 380 폭 패널(비모달)
     <768  런처 없음. 하단 탭바 「상담 신청」이 창을 열고, 패널은 화면 전체를 덮는 시트(모달 · z 1100 > 탭바 1072)
   🔴 색·서체·반경·그림자는 stage.css :root 토큰만 쓴다. 이 파일에서 색값을 새로 만들지 않는다
      (render-M-probe 가 폐기 팔레트를, render-contrast 가 실렌더 대비를 본다).
   🔴 대비 — 🔴 2026-09-29 세로띠 투톤 전환에서 전부 다시 계산했다(sRGB 상대휘도 · stage.css §1-1 과 같은 식).
      흰 글자 #fafbf9/브랜드면 #17302a 13.55 · 브랜드 글자/흰 13.55 · 브랜드 글자/브랜드 연면 #e8ece9 11.80
      본문 #101f1b/중립면 #e2e6e1 13.49 · 본문/브랜드 연면 14.27 · 보조 #46574f/지면 #eef0ec 6.69 · 보조/브랜드 연면 6.43
      오류 #c81212/흰 5.70 · placeholder #5a655e/흰 5.85 · 부품 윤곽 --border-strong #6c766e = 흰 4.54 · 지면 4.11 · 판 3.74
      (윤곽은 글자가 아니라 부품 경계라 1.4.11 의 3:1 기준이다 — 이 색을 글자에 쓰지 않는다)
      🔴 브랜드 글자/--bg-brand-subtle-hover #ccd6d1 = 9.45 ✅ — 옛 파랑에서는 이 조합이 미달이라 금지 항목이었다.
         딥그린에서는 넉넉해졌지만 누름 상태는 그대로 채움 반전으로 그린다 — 짙어지기만 하는 변화는 눈에 잘 안 띄고,
         상태를 색 하나로 전하지 않는다는 규칙도 그대로다.
   🔴 조작부는 전부 높이 44 이상(--cs-hit). 입력칸 글자는 16px — iOS 가 초점에서 화면을 확대하지 않는 하한이다.
   🔴 --chatbot-lift 는 chatbot.js 가 하단 고정 바(.int-summary · .rg-dock)의 「화면 바닥에서 올라온 높이」로 갱신한다.
      통신사 페이지 요약바(z 40)는 PC 에서도 바닥에 붙어 있어, 올리지 않으면 런처가 요금 CTA 를 가린다. */


/* 1. 뿌리 --------------------------------------------------------------------- */
/* 🔴 display:contents — body 는 flex 세로 쌓기 + gap 10 이다(stage.css §2). 높이 0 짜리 상자라도 flex 항목이 되면
   푸터 아래에 gap 한 칸이 더 생긴다. 자식(런처·패널)은 전부 position:fixed 라 뿌리가 상자를 가질 이유가 없다.
   사용자 정의 속성은 DOM 상속이라 상자가 없어도 자식에게 내려간다. */
.chatbot{
  display:contents;
  --chatbot-edge:24px;          /* 화면 가장자리 여백 (≥768) */
  --chatbot-launcher-h:48px;    /* 런처 높이 · 터치 타깃 44 이상 */
  --chatbot-gap:12px;           /* 런처와 패널 사이 */
  --chatbot-lift:0px;
}
@media print{ .chatbot{display:none} }
/* 2026-09-15 signup-copy — ≥768 에서는 오른쪽 아래 런처(가장자리 24 + 높이 48)가 문서 끝 푸터 링크를 덮지 않도록 푸터 아래 여백을 런처 자리만큼 둔다.
   (시안 배지 두 줄을 걷어내 푸터가 짧아지자 /  @768 사이트맵 링크가 런처 밑에 들어갔다 · qa-390-probe (b3) 실측) 요약바 페이지의 형제 규칙(internet.css)이 더 구체적이라 그쪽이 이긴다 */
@media (min-width:768px){ .site-footer{padding-bottom:calc(16px + var(--cs-tabbar-h, 0px) + 72px)} }

/* 창 안의 전체 화면 시트가 열린 동안 문서 스크롤을 잠근다. body.style.top(=-스크롤 위치)은 JS 가 넣고 닫을 때 되돌린다.
   overflow:hidden 만으로는 iOS Safari 가 뒤 문서를 계속 끌어 올린다 — 그래서 body 를 제자리에 고정한다. */
html.chatbot-lock{overflow:hidden}
html.chatbot-lock body{position:fixed;left:0;right:0;width:100%;overflow:hidden}


/* 2. 런처 (≥768 전용 · <768 은 탭바가 연다) ---------------------------------- */
.chatbot__launcher{
  position:fixed;z-index:90;
  right:calc(var(--chatbot-edge) + env(safe-area-inset-right,0px));
  bottom:calc(var(--chatbot-edge) + var(--chatbot-lift) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:8px;
  min-width:var(--cs-hit);min-height:var(--chatbot-launcher-h);
  padding:0 20px 0 16px;
  border-radius:var(--cs-radius-pill);
  background:var(--bg-brand);color:var(--fg-on-color);
  box-shadow:var(--cs-shadow-panel);
  font:700 var(--cs-text-md)/1 var(--cs-font);white-space:nowrap;
  transition:background-color var(--cs-t-fast) ease,transform var(--cs-t-fast) var(--cs-ease-out),bottom var(--cs-t-fast) var(--cs-ease-out);
}
.chatbot__launcher-ic{flex:none}
@media (hover:hover){ .chatbot__launcher:hover{background:var(--bg-brand-hover);transform:translateY(-1px)} }
.chatbot__launcher:active{background:var(--bg-brand-pressed);transform:scale(.97)}
.chatbot__launcher[aria-expanded="true"]{background:var(--bg-brand-pressed)}


/* 3. 패널 공통 --------------------------------------------------------------- */
/* 패널 하나가 스크롤 상자다. 헤더는 sticky 로 붙고, 말풍선과 조작부는 대화처럼 이어 흐른다.
   말풍선이 적을 때는 기록(.chatbot__log)이 남는 높이를 채우고 말풍선을 아래로 모아, 조작부 바로 위에 붙게 한다. */
.chatbot__panel{
  position:fixed;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-surface-plain);color:var(--fg-primary);
  font:400 var(--cs-text-sm)/1.55 var(--cs-font);
  word-break:keep-all;overflow-wrap:anywhere;
}
/* 조작부가 없는 순간(보내는 중 · 설정 받는 중)에는 창 자체가 초점을 받는다. 창 전체에 윤곽을 두르면
   큰 상자가 번쩍일 뿐 위치 정보가 없으므로 이 요소에서만 윤곽을 뺀다. 조작부의 초점 윤곽은 그대로다. */
.chatbot__panel:focus{outline:none}
.chatbot[data-state="open"] .chatbot__panel{animation:chatbot-rise .24s var(--cs-ease-out)}
/* 아래로 더 읽을 내용이 남았을 때만 창 아래 가장자리에 흐림 띠(data-more 는 JS 가 스크롤마다 갱신한다).
   1280×800 에서 개인정보 안내가 창을 넘어 동의 버튼이 창 밖에 남는다. 잘린 표시가 없으면 대화가 링크에서 끝난 것처럼 보인다.
   높이와 음수 여백이 같아 레이아웃 높이는 0 이다 — 띠를 달고 떼도 스크롤 길이가 바뀌지 않는다. */
.chatbot__panel[data-more]::after{
  content:"";position:sticky;bottom:0;flex:none;
  height:32px;margin-top:-32px;
  background:linear-gradient(to bottom,transparent,var(--bg-surface-plain));
  pointer-events:none;
}

.chatbot__head{
  position:sticky;top:0;z-index:1;flex:none;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4px;align-items:center;
  padding:12px 6px 12px 18px;
  background:var(--bg-surface-plain);
  border-bottom:1px solid var(--border-tertiary);
}
.chatbot__title{grid-column:1;margin:0;font:700 var(--cs-text-md)/1.35 var(--cs-font);letter-spacing:-.01em;color:var(--fg-primary)}
.chatbot__subtitle{grid-column:1;margin:2px 0 0;font:400 var(--cs-text-xs)/1.45 var(--cs-font);color:var(--fg-secondary)}
.chatbot__close{
  grid-column:2;grid-row:1 / span 2;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--cs-hit);height:var(--cs-hit);border-radius:var(--cs-radius-pill);
  color:var(--fg-secondary);
  transition:background-color var(--cs-t-fast) ease,color var(--cs-t-fast) ease;
}
@media (hover:hover){ .chatbot__close:hover{background:var(--bg-neutral);color:var(--fg-primary)} }


/* 4. 말풍선 ------------------------------------------------------------------- */
.chatbot__log{
  flex:1 0 auto;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  padding:16px 16px 4px;
}
.chatbot__log:empty{flex-grow:0;padding:0}
.chatbot__msg{
  max-width:86%;margin:0;padding:10px 14px;
  border-radius:16px;
  font:400 var(--cs-text-sm)/1.55 var(--cs-font);
  white-space:pre-line;
}
/* 새 차례에 붙은 말풍선만 떠오른다(data-new 는 JS 가 다음 차례에서 뗀다). 창을 다시 열 때 기록 전체가 춤추지 않게 */
.chatbot__msg[data-new]{animation:chatbot-rise .22s var(--cs-ease-out) both}
.chatbot__msg--bot{align-self:flex-start;border-bottom-left-radius:4px;background:var(--bg-neutral);color:var(--fg-primary)}
.chatbot__msg--user{
  align-self:flex-end;border-bottom-right-radius:4px;
  background:var(--cs-brand-tint);color:var(--fg-primary);
  box-shadow:inset 0 0 0 1px var(--border-brand-light);
}
/* 보내는 중 표시 — 마지막 봇 말풍선 끝의 작은 고리. 움직임을 줄인 환경에서는 멈춘 고리로 남는다 */
.chatbot__panel[data-step="sending"] .chatbot__msg--bot:last-child::after{
  content:"";display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-1px;
  border:2px solid var(--border-secondary);border-top-color:var(--fg-brand);border-radius:50%;
  animation:chatbot-spin .8s linear infinite;
}


/* 5. 조작부 ------------------------------------------------------------------- */
.chatbot__controls{flex:none;display:flex;flex-direction:column;gap:12px;padding:8px 16px 16px}
.chatbot__controls:empty{display:none}

/* 선택지 칩 — 테두리 버튼, 줄바꿈 허용. 동의 · 비동의도 같은 모양이다(한쪽을 눈에 띄게 만들어 고르게 하지 않는다) */
.chatbot__options{display:flex;flex-wrap:wrap;gap:8px}
.chatbot__option{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--cs-hit);padding:8px 16px;
  border:1px solid var(--border-brand);border-radius:var(--cs-radius-pill);
  background:var(--bg-surface-plain);color:var(--fg-brand);
  font:700 var(--cs-text-sm)/1.3 var(--cs-font);text-align:center;
  transition:background-color var(--cs-t-fast) ease,color var(--cs-t-fast) ease;
}
@media (hover:hover){ .chatbot__option:hover{background:var(--cs-brand-tint)} }
.chatbot__option:active{background:var(--bg-brand);color:var(--fg-on-color)}

/* 처음으로 · 그만두기 · 닫기 — 회녹 윤곽(--border-strong #6c766e · 흰 위 4.54 · 비텍스트 3:1 기준 · 09-29 재계산).
   선택지와 모양을 달리해 「답」과 「이동」을 가른다 */
.chatbot__navs{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--border-tertiary)}
.chatbot__nav{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--cs-hit);padding:8px 14px;
  border:1px solid var(--border-strong);border-radius:var(--cs-radius-pill);
  background:var(--bg-surface-plain);color:var(--fg-secondary);
  font:400 var(--cs-text-sm)/1.3 var(--cs-font);
  transition:background-color var(--cs-t-fast) ease,color var(--cs-t-fast) ease;
}
@media (hover:hover){ .chatbot__nav:hover{background:var(--bg-secondary);color:var(--fg-primary)} }

/* 주 동작 — 확인 화면 전송 · 다시 보내기 · 새 상담 요청 · 상담 신청 페이지로 가기 · 입력 */
.chatbot__submit-final,
.chatbot__nav--primary,
.chatbot__fallback,
.chatbot__submit{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;
  border:0;border-radius:var(--cs-radius-btn);
  background:var(--bg-brand);color:var(--fg-on-color);
  font:700 var(--cs-text-sm)/1.2 var(--cs-font);text-align:center;text-decoration:none;
  transition:background-color var(--cs-t-fast) ease;
}
.chatbot__submit-final{width:100%;font-size:var(--cs-text-md)}
@media (hover:hover){
  .chatbot__submit-final:hover,.chatbot__nav--primary:hover,.chatbot__fallback:hover,.chatbot__submit:hover{background:var(--bg-brand-hover);color:var(--fg-on-color)}
}
.chatbot__submit-final:active,.chatbot__nav--primary:active,.chatbot__fallback:active,.chatbot__submit:active{background:var(--bg-brand-pressed)}

/* 이름 · 휴대전화 입력 */
.chatbot__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center}
.chatbot__label{grid-column:1 / -1;font:700 var(--cs-text-xs)/1.4 var(--cs-font);color:var(--fg-secondary)}
.chatbot__input{
  width:100%;min-width:0;min-height:var(--cs-hit);padding:10px 14px;
  border:1px solid var(--border-strong);border-radius:var(--cs-radius-btn);
  background:var(--bg-surface-plain);color:var(--fg-primary);
  font:400 var(--cs-text-md)/1.3 var(--cs-font);
}
.chatbot__input::placeholder{color:var(--fg-placeholder);opacity:1}
.chatbot__input:focus-visible{outline-offset:1px;border-color:var(--border-brand)}
.chatbot__input[aria-invalid="true"]{border-color:var(--fg-error)}
.chatbot__submit{min-height:var(--cs-hit);padding:0 18px;white-space:nowrap}
.chatbot__error{grid-column:1 / -1;margin:0;font:400 var(--cs-text-sm)/1.45 var(--cs-font);color:var(--fg-error)}

/* 개인정보 안내(수집·이용 네 항목 + 받는 곳) */
.chatbot__notice{
  margin:0;padding:14px 16px;
  border:1px solid var(--border-secondary);border-radius:var(--cs-radius-bar);
  background:var(--bg-secondary);
}
.chatbot__notice dt{margin:0;font:700 var(--cs-text-xs)/1.4 var(--cs-font);color:var(--fg-secondary)}
.chatbot__notice dd{margin:2px 0 10px;font:400 var(--cs-text-sm)/1.55 var(--cs-font);color:var(--fg-primary)}
.chatbot__notice dd:last-of-type{margin-bottom:0}
.chatbot__age{margin:0;font:700 var(--cs-text-sm)/1.5 var(--cs-font);color:var(--fg-primary)}
.chatbot__privacy,
.chatbot__offline a{
  align-self:flex-start;
  display:inline-flex;align-items:center;min-height:var(--cs-hit);
  color:var(--fg-brand);font:700 var(--cs-text-sm)/1.3 var(--cs-font);
  text-decoration:underline;text-underline-offset:.2em;
}

/* 확인 화면 */
.chatbot__review{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:baseline;
  margin:0;padding:14px 16px;
  border:1px solid var(--border-secondary);border-radius:var(--cs-radius-bar);
  background:var(--bg-secondary);
}
.chatbot__review dt{margin:0;font:400 var(--cs-text-xs)/1.5 var(--cs-font);color:var(--fg-secondary);white-space:nowrap}
.chatbot__review dd{margin:0;font:700 var(--cs-text-sm)/1.45 var(--cs-font);color:var(--fg-primary)}
.chatbot__review-sub{display:block;font-weight:400;color:var(--fg-secondary)}

/* 접수 완료 */
.chatbot__receipt-line{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  margin:0;padding:14px 16px;border-radius:var(--cs-radius-bar);
  background:var(--cs-brand-tint);
}
.chatbot__receipt-label{font:400 var(--cs-text-sm)/1.4 var(--cs-font);color:var(--fg-secondary)}
.chatbot__receipt{font:700 var(--cs-text-lg)/1.2 var(--cs-font);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--fg-primary)}

/* 설정 파일을 받지 못했을 때 */
.chatbot__offline{flex:none;margin:0;padding:20px 18px;font:400 var(--cs-text-sm)/1.6 var(--cs-font);color:var(--fg-primary)}


/* 6. ≥768 떠 있는 창 --------------------------------------------------------- */
/* 🔴 계약의 최대 높이 min(600px, 100vh − 48px) 에서 런처 자리와 --chatbot-lift 를 더 뺀다.
      런처 위에 뜨는 창이라, 그 둘을 빼지 않으면 요약바가 있는 통신사 페이지(1280×800)에서 창 머리가 화면 위로 잘린다. */
@media (min-width:768px){
  .chatbot__panel{
    z-index:90;
    right:calc(var(--chatbot-edge) + env(safe-area-inset-right,0px));
    bottom:calc(var(--chatbot-edge) + var(--chatbot-launcher-h) + var(--chatbot-gap) + var(--chatbot-lift) + env(safe-area-inset-bottom,0px));
    width:min(380px,calc(100vw - 2 * var(--chatbot-edge)));
    height:min(600px,calc(100vh - 2 * var(--chatbot-edge) - var(--chatbot-launcher-h) - var(--chatbot-gap) - var(--chatbot-lift)));
    max-height:min(600px,calc(100vh - 2 * var(--chatbot-edge) - var(--chatbot-launcher-h) - var(--chatbot-gap) - var(--chatbot-lift)));
    border:1px solid var(--border-secondary);border-radius:var(--cs-radius-card);
    box-shadow:var(--cs-shadow-panel);
    transform-origin:bottom right;
    transition:bottom var(--cs-t-fast) var(--cs-ease-out);
  }
  /* 헤더 메뉴(768~875 는 드로어 · stage.js body.menu-open)가 열리면 헤더(z 50) 아래로 내려 메뉴를 가리지 않는다 */
  body.menu-open .chatbot__launcher,
  body.menu-open .chatbot__panel{z-index:40}
}

/* 6-1. ≥768 인데 떠 있는 창이 너무 낮을 때 — 전체 화면 시트 (2026-09-11 리뷰 FIX A11Y-2)
   chatbot.js 가 「화면 높이 − 가장자리 · 런처 · 틈 − 하단 바」가 360px 보다 낮으면 .chatbot 에 data-sheet 를 단다
   (가로로 눕힌 휴대전화 844×390 · 932×430, 요약바가 큰 짧은 노트북 화면). 종전에는 창에 최소 높이가 없어 통신사 페이지
   844×390 에서 121px(머리 69px)로 줄고 선택지 · 입력칸이 하나도 보이지 않았다(리뷰 실측).
   시트는 <768 과 같은 모달이다(스크롤 잠금 · 초점 가두기 · inert · visualViewport). 선택자 우선순위(0,3,0)가
   위 body.menu-open 규칙(0,2,1)보다 높아 메뉴가 열려 있어도 시트가 위에 선다(모달이 머리를 inert 로 뺀다).
   넓은 화면에서 말풍선과 조작부가 화면 끝까지 퍼지지 않게 가운데 640 한 줄로 모은다. */
@media (min-width:768px){
  .chatbot[data-sheet] .chatbot__panel{
    z-index:1100;
    top:var(--chatbot-vv-top,0px);right:0;bottom:auto;left:0;
    width:100%;height:var(--chatbot-vv-h,100%);max-height:none;
    border:0;border-radius:0;box-shadow:none;
    transition:none;
  }
  .chatbot[data-sheet] .chatbot__head{padding:calc(10px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) 10px calc(18px + env(safe-area-inset-left,0px))}
  .chatbot[data-sheet] .chatbot__log,
  .chatbot[data-sheet] .chatbot__controls,
  .chatbot[data-sheet] .chatbot__offline{width:100%;max-width:640px;margin-left:auto;margin-right:auto}
  .chatbot[data-sheet] .chatbot__controls{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* 처리방침 링크 뒤 「새 탭에서 열림」 표시(A11Y-5). 링크 글자와 같은 색이라 대비는 링크와 같고, 굵기만 낮춰 링크 이름과 구분한다 */
/* 링크가 inline-flex 라 사이의 공백 글자는 그려지지 않는다(실렌더 캡처: 「보기(새 탭에서 열림)」). 간격은 여백으로 준다 */
.chatbot__newtab{font-weight:400;margin-left:.3em}


/* 7. <768 전체 화면 시트 ----------------------------------------------------- */
/* 높이·위치는 visualViewport 를 따른다(--chatbot-vv-h · --chatbot-vv-top 은 JS 가 연 동안만 넣는다).
   가상 키보드가 올라오면 시트가 보이는 영역만큼 줄어 입력칸과 버튼이 키보드 위에 남는다. */
@media (max-width:767.98px){
  .chatbot__launcher{display:none}
  .chatbot__panel{
    z-index:1100;
    left:0;right:0;top:var(--chatbot-vv-top,0px);
    width:100%;height:var(--chatbot-vv-h,100%);
  }
  .chatbot__head{padding:calc(10px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) 10px calc(18px + env(safe-area-inset-left,0px))}
  .chatbot__log{padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px))}
  .chatbot__log:empty{padding:0}
  .chatbot__controls{padding:8px calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
  .chatbot__offline{padding-left:calc(18px + env(safe-area-inset-left,0px));padding-right:calc(18px + env(safe-area-inset-right,0px))}
}


/* 8. 움직임 · 강제 색상 ------------------------------------------------------ */
@keyframes chatbot-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes chatbot-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){
  .chatbot *,.chatbot *::before,.chatbot *::after{animation:none!important;transition:none!important}
}
/* 고대비 모드에서는 배경색이 사라지므로 부품 경계를 선으로 다시 그린다 */
@media (forced-colors:active){
  .chatbot__launcher,.chatbot__option,.chatbot__nav,.chatbot__submit,.chatbot__submit-final,.chatbot__fallback,.chatbot__msg{border:1px solid CanvasText}
}