/* ChatbotLauncher */
.launcher_launcher__JigkI {
  position: fixed;
  z-index: 58;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  right: max(0.75rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background-color: var(--color-white);
  /* 엘리베이션(--shadow) + 브랜드 링(엘리베이션 아닌 링이라 컬러 box-shadow 유지) */
  box-shadow:
    var(--shadow),
    0 0 0 2px
      color-mix(in srgb, var(--color-chatbot-cyan) 30%, transparent);
  transition:
    transform 150ms,
    box-shadow 150ms;
}

.launcher_launcher__JigkI:hover {
  transform: scale(1.05);
}

.launcher_launcher__JigkI:focus {
  outline: none;
  box-shadow:
    var(--shadow),
    0 0 0 2px var(--color-chatbot-cyan);
}

@media (min-width: 640px) {
  .launcher_launcher__JigkI {
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
  }
}

.launcher_launcherHidden___FKoS {
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
}

.launcher_launcherIcon__vCyp_ {
  width: 32px;
  height: 28px;
}

@media (min-width: 640px) {
  .launcher_launcherIcon__vCyp_ {
    width: 36px;
    height: 32px;
  }
}

/* ChatbotHeader */
.header_header__db1c2 {
  flex-shrink: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border); /* slate-200 — 대응 토큰 없음 */
  background-image: linear-gradient(
    to right,
    var(--color-chatbot-navy),
    var(--color-chatbot-blue)
  );
  color: var(--color-white);
}

@media (min-width: 640px) {
  .header_header__db1c2 {
    padding: 10px 12px;
  }
}

.header_bar__iKsOh {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 640px) {
  .header_bar__iKsOh {
    gap: 8px;
  }
}

.header_icon__O_N3Q {
  flex-shrink: 0;
  width: 24px;
  height: 20px;
}

@media (min-width: 640px) {
  .header_icon__O_N3Q {
    width: 28px;
    height: 25px;
  }
}

.header_titleGroup__f9btr {
  flex: 1 1;
  min-width: 0;
}

.header_title__rcTVL {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

@media (min-width: 640px) {
  .header_title__rcTVL {
    font-size: 14px;
  }
}

.header_langGroup__v3ucE {
  display: flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.15);
}

.header_langButton__oONuY {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  transition:
    background-color 150ms,
    color 150ms;
}

@media (min-width: 640px) {
  .header_langButton__oONuY {
    padding: 4px 8px;
    font-size: 12px;
  }
}

.header_langButtonActive__3DBvP {
  background-color: var(--color-white);
  color: var(--color-chatbot-navy);
  box-shadow: var(--shadow);
}

.header_langButtonInactive__fE2VT {
  color: rgba(255, 255, 255, 0.9);
}

.header_langButtonInactive__fE2VT:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.header_iconButton__RSCCw {
  padding: 4px;
  border-radius: 9999px;
}

.header_iconButton__RSCCw:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.header_iconButton__RSCCw:disabled {
  opacity: 0.4;
}

@media (min-width: 640px) {
  .header_iconButton__RSCCw {
    padding: 6px;
  }
}

.header_buttonIcon__yFArG {
  width: 14px;
  height: 14px;
}

@media (min-width: 640px) {
  .header_buttonIcon__yFArG {
    width: 16px;
    height: 16px;
  }
}

.header_closeIcon__MAaxK {
  width: 16px;
  height: 16px;
}

@media (min-width: 640px) {
  .header_closeIcon__MAaxK {
    width: 20px;
    height: 20px;
  }
}

/* ChatbotInput */
.input_form__ancpW {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--color-border); /* slate-200 — 대응 토큰 없음 */
  background-color: var(--color-white);
}

@media (min-width: 640px) {
  .input_form__ancpW {
    gap: 8px;
    padding: 12px;
  }
}

.input_textarea__Qswbz {
  flex: 1 1;
  min-height: 32px;
  max-height: 80px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 12px;
  resize: none;
  outline: none;
}

.input_textarea__Qswbz:focus {
  border-color: var(--color-chatbot-cyan);
  box-shadow: 0 0 0 1px var(--color-chatbot-cyan);
}

.input_textarea__Qswbz:disabled {
  background-color: var(
    --color-surface-subtle
  ); /* slate-50 — 대응 토큰 없음 */
}

@media (min-width: 640px) {
  .input_textarea__Qswbz {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
  }
}

.input_sendButton__NHGo0 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: var(--color-chatbot-navy);
  color: var(--color-white);
  transition: background-color 150ms;
}

.input_sendButton__NHGo0:hover {
  background-color: var(--color-chatbot-blue);
}

.input_sendButton__NHGo0:disabled {
  opacity: 0.4;
}

@media (min-width: 640px) {
  .input_sendButton__NHGo0 {
    width: 40px;
    height: 40px;
  }
}

.input_sendIcon__4fCA0 {
  width: 14px;
  height: 14px;
}

@media (min-width: 640px) {
  .input_sendIcon__4fCA0 {
    width: 16px;
    height: 16px;
  }
}

/* ChatbotPanel */
.panel_panel__GxDfP {
  /* 열고 닫는 데 걸리는 시간 — 발판 단추의 커짐(150ms)보다 조금 길게. */
  --panel-move: 200ms;
  position: fixed;
  z-index: 60;
  right: 10px;
  bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: min(340px, calc(100vw - 1.25rem));
  height: min(400px, calc(100dvh - 5.75rem));
  max-height: calc(100dvh - 5.75rem);
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-border); /* slate-200 — 대응 토큰 없음 */
  border-radius: 12px;
  box-shadow: var(--shadow);
  /* 오른쪽 아래 발판 단추 자리에서 커져 나온다. */
  transform-origin: bottom right;
  transition:
    transform var(--panel-move) ease-out,
    opacity var(--panel-move) ease-out,
    visibility var(--panel-move);
}

/* 닫힌 동안 — 줄어든 채 감춰 둔다. visibility 는 움직임이 끝나는 순간에만
   바뀌므로, 닫을 때 줄어드는 모습이 다 보인 뒤에 사라진다. */
.panel_panelClosed__nXDaj {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

/* 움직임을 줄여 달라고 한 기기에서는 바로 나타나고 사라진다. */
@media (prefers-reduced-motion: reduce) {
  .panel_panel__GxDfP {
    transition: none;
  }
}

@media (min-width: 640px) {
  .panel_panel__GxDfP {
    right: 16px;
    bottom: 80px;
    width: min(380px, calc(100vw - 2rem));
    height: min(460px, calc(100dvh - 6rem));
    max-height: min(460px, calc(100dvh - 6rem));
    border-radius: 16px;
  }
}

@media (min-width: 768px) {
  .panel_panel__GxDfP {
    right: 24px;
    height: min(500px, calc(100dvh - 5.5rem));
    max-height: min(500px, calc(100dvh - 5.5rem));
  }
}

@media (min-width: 1024px) {
  .panel_panel__GxDfP {
    width: min(400px, calc(100vw - 2rem));
  }
}

.panel_conversation__LxEKb {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel_scroll__oatNv {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background-color: var(
    --color-surface-subtle
  ); /* slate-50 — 대응 토큰 없음 */
  -webkit-overflow-scrolling: touch;
}

/* MessageList */
.panel_list__PdFqF {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

@media (min-width: 640px) {
  .panel_list__PdFqF {
    gap: 12px;
    padding: 16px;
  }
}

/* 메시지 버블 — 정렬 행 */
.panel_rowStart__noxsz {
  display: flex;
  justify-content: flex-start;
}

.panel_rowEnd__yILwG {
  display: flex;
  justify-content: flex-end;
}

/* UserMessage */
.panel_userBubble__p7sPy {
  max-width: min(100%, 16rem);
  padding: 8px 12px;
  border-radius: 12px;
  border-bottom-right-radius: 2px;
  background-color: var(--color-chatbot-navy);
  font-size: 12px;
  color: var(--color-white);
  word-break: break-word;
}

@media (min-width: 640px) {
  .panel_userBubble__p7sPy {
    max-width: 85%;
    padding: 10px 16px;
    border-radius: 16px;
    border-bottom-right-radius: 2px;
    font-size: 14px;
  }
}

/* BotMessage */
.panel_botBubble__fj_lZ {
  max-width: min(100%, 16rem);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  border-bottom-left-radius: 2px;
  background-color: var(--color-white);
  font-size: 12px;
  color: var(--color-text); /* slate-800 */
  box-shadow: var(--shadow);
  word-break: break-word;
}

@media (min-width: 640px) {
  .panel_botBubble__fj_lZ {
    max-width: 85%;
    padding: 10px 16px;
    border-radius: 16px;
    border-bottom-left-radius: 2px;
    font-size: 14px;
  }
}

/* AnswerMessage — 답변 말풍선 + 그 아래 연관 질문 블록 묶음 */
.panel_answerGroup__LVTRG {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 제목 없이 채팅 말풍선처럼 본문만 또렷하게. 글자는 진한 본문색으로. */
.panel_answerBubble__6fVpK {
  max-width: min(100%, 17rem);
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-bottom-left-radius: 3px;
  background-color: var(--color-white);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text); /* slate-800 — 또렷하게 */
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--shadow);
}

@media (min-width: 640px) {
  .panel_answerBubble__6fVpK {
    max-width: 90%;
    padding: 12px 16px;
    border-radius: 16px;
    border-bottom-left-radius: 3px;
    font-size: 15px;
  }
}

/* 답변 본문 안 링크를 대체하는 '바로 가기' 버튼 */
.panel_goButton__IVRoo {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-chatbot-navy);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  vertical-align: baseline;
}

.panel_goButton__IVRoo:hover {
  opacity: 0.9;
}

/* RelatedList — 답변 말풍선과 분리된 '이어서 물어보기' 목록(별도 블록) */
.panel_related__biWsY {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}

.panel_relatedLabel__KWo6n {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-slate); /* slate-500 */
}

.panel_relatedList__YHIEV {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.panel_relatedButton__hg52S {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--color-text); /* slate-800 — 또렷하게 */
  cursor: pointer;
  word-break: break-word;
  transition:
    border-color 150ms,
    background-color 150ms;
}

.panel_relatedButton__hg52S:hover {
  border-color: var(--color-chatbot-cyan);
  background-color: var(--color-info-bg); /* blue-50 */
}

/* ErrorBubble */
.panel_errorBubble__ITiZN {
  max-width: 85%;
  padding: 8px 12px;
  border: 1px solid var(--color-danger-border); /* red-200 — 대응 토큰 없음 */
  border-radius: 12px;
  background-color: var(--color-danger-bg); /* red-50 */
  font-size: 12px;
  color: #b91c1c; /* red-700 */
}

@media (min-width: 640px) {
  .panel_errorBubble__ITiZN {
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 14px;
  }
}

/* LoadingBubble */
.panel_loadingBubble__OgwY6 {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-white);
  font-size: 12px;
  color: var(--color-text-slate); /* slate-500 */
}

@media (min-width: 640px) {
  .panel_loadingBubble__OgwY6 {
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
  }
}

/* QuickPrompts — 자주 묻는 질문(세로 목록) */
.panel_prompts___7MbX {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--color-border);
  background-color: rgba(248, 250, 252, 0.9); /* slate-50/90 */
}

.panel_promptsIntro__y6bn8 {
  font-size: 11px;
  line-height: 1.375;
  color: var(--color-text-slate-strong); /* slate-600 */
}

@media (min-width: 640px) {
  .panel_promptsIntro__y6bn8 {
    font-size: 12px;
  }
}

.panel_promptList__RT106 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.panel_promptButton__IiUJO {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--color-text); /* slate-800 — 또렷하게 */
  cursor: pointer;
  word-break: break-word;
  transition:
    border-color 150ms,
    background-color 150ms;
}

.panel_promptButton__IiUJO:hover {
  border-color: var(--color-chatbot-cyan);
  background-color: var(--color-info-bg); /* blue-50 */
}

.panel_promptButton__IiUJO:disabled {
  opacity: 0.5;
}

.panel_promptButton__IiUJO:disabled {
  opacity: 0.5;
}

@media (min-width: 640px) {
  .panel_promptButton__IiUJO {
    max-width: min(220px, 75vw);
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 답을 못 찾았을 때만 버블 안에 붙는 문의 길. 본문과 구분되게 한 줄 띄운다. */
.panel_inquiryLink__Jic1Q {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.panel_inquiryBox__sN9Nk {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.panel_inquiryForm__DsvzP,
.panel_inquiryAddress__CVbKP {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel_inquiryForm__DsvzP input,
.panel_inquiryForm__DsvzP textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.panel_inquiryForm__DsvzP textarea {
  min-height: 72px;
  resize: vertical;
}

.panel_inquiryForm__DsvzP button,
.panel_inquiryAddress__CVbKP button {
  align-self: flex-start;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  cursor: pointer;
}

.panel_inquiryForm__DsvzP button:disabled {
  opacity: 0.6;
  cursor: default;
}

.panel_inquiryAddress__CVbKP strong {
  word-break: break-all;
}

.panel_inquiryAddress__CVbKP a {
  font-size: 0.85em;
  color: var(--primary);
}

.panel_inquiryNotice__284Hs {
  margin: 0;
  font-size: 0.8em;
  color: var(--muted-foreground);
}

.panel_inquiryStatus__T54Gj {
  margin: 6px 0 0;
  font-weight: 600;
}

/* ChatbotWidget — 열렸을 때 뒤 오버레이 */
.component_overlay__kObTs {
  position: fixed;
  inset: 0;
  z-index: 59;
  background-color: rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
  .component_overlay__kObTs {
    background-color: rgba(0, 0, 0, 0.25);
  }
}

