/* KOAT 챗봇 위젯. topbar 안에서 include 되지만 fixed 라 위치는 뷰포트 기준이다.

   디자인 원본: Claude Design 아티팩트 "디지털육종 챗봇"(2026-09-17). 색·크기·모서리는
   그 원본 값을 그대로 옮겼다. 위젯은 Velzon 페이지 위에 떠 있으므로 페이지 테마
   변수(--vz-*)를 따르지 않는다. 색은 전부 아래 변수에 모았다.

   테마: 기본은 다크(원본 디자인)이고, 헤더의 전환 버튼이 패널에 data-koat-theme="light"
   를 붙이면 아래 라이트 블록이 변수만 덮어쓴다. 규칙 본문에는 색을 직접 쓰지 않는다 —
   직접 쓰면 그 자리만 테마를 따라가지 않는다. 속성 이름을 data-theme 로 하지 않은 것은
   Velzon(app.min.css)이 이미 그 이름을 쓰기 때문이다.

   강조색은 두 역할로 나눈다. --kcb-accent 는 **채우는 색**(사용자 말풍선·전송 버튼·
   아바타)이고, --kcb-accent-ink 는 **바탕 위에 그리는 색**(강조 글자·아이콘 선·포커스
   테두리)이다. 밝은 초록(#3fd47f)은 흰 바탕에서 글자로 읽히지 않아(1.9:1) 라이트에서는
   ink 만 진한 초록으로 바꾼다. */
.koat-chatbot-toggle,
.koat-chatbot {
    --kcb-accent: #3fd47f;
    --kcb-on-accent: #0e1013;
    --kcb-accent-ink: #3fd47f;
    /* 아래 둘은 강조색의 반투명이다. 강조색을 바꾸면 라이트 블록까지 함께 고친다. */
    --kcb-accent-soft: rgba(63, 212, 127, .45);
    --kcb-accent-glow: rgba(63, 212, 127, .35);
    --kcb-accent-hi: #6ee7a8;
    --kcb-accent-tint: #1d2f26;
    --kcb-panel-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    --kcb-icon-hover: #ffffff;
    --kcb-hover-wash: rgba(255, 255, 255, .06);
    /* 패널 밖(흰 Velzon 페이지) 런처의 포커스 테두리. 테마와 무관하다. */
    --kcb-page-focus: #15803d;
    --kcb-bg: #17191d;
    --kcb-bar: #0e1013;
    --kcb-surface: #23262c;
    --kcb-surface-hover: #262a31;
    --kcb-input: #1c1f24;
    --kcb-line: #2e323a;
    --kcb-line-strong: #3a3e46;
    --kcb-text-strong: #f2f4f6;
    --kcb-text-name: #e6e9ed;
    --kcb-text: #d7dce2;
    --kcb-text-sub: #c6ccd4;
    --kcb-icon: #aeb4bd;
    --kcb-muted: #9aa1ab;
    /* 원본은 #7c828c 였으나 가장 밝은 바탕(#23262c)에서 대비 3.92:1 이라 WCAG AA(4.5:1)에
       못 미쳐 한 단계 올렸다(4.54:1). 입력칸 안내 문구·시각·안전하지 않은 링크가 이 색이다. */
    --kcb-faint: #878d97;
}
/* 라이트 테마. 대비는 가장 어두운 바탕(--kcb-surface #f1f3f5) 기준으로 잰 값이다:
   faint 4.84 · muted 5.22 · accent-ink 4.51 · text-sub 7.58 (전부 WCAG AA 4.5:1 이상).
   흰 패널이 흰 Velzon 페이지에 묻히지 않게 그림자에 1px 테두리를 겹친다. */
.koat-chatbot[data-koat-theme="light"] {
    --kcb-accent-ink: #15803d;
    --kcb-accent-soft: rgba(22, 163, 74, .35);
    --kcb-accent-glow: rgba(34, 197, 94, .30);
    --kcb-accent-hi: #166534;
    --kcb-accent-tint: #e5f5eb;
    --kcb-panel-shadow: 0 0 0 1px #e3e7eb, 0 24px 64px rgba(15, 23, 42, .18);
    --kcb-icon-hover: #111418;
    --kcb-hover-wash: rgba(17, 20, 24, .06);
    --kcb-bg: #ffffff;
    --kcb-bar: #f3f5f7;
    --kcb-surface: #f1f3f5;
    --kcb-surface-hover: #e9edf1;
    --kcb-input: #ffffff;
    --kcb-line: #e3e7eb;
    --kcb-line-strong: #c9cfd6;
    --kcb-text-strong: #111418;
    --kcb-text-name: #1f2429;
    --kcb-text: #2b3036;
    --kcb-text-sub: #474e56;
    --kcb-icon: #5b626b;
    --kcb-muted: #5f666f;
    --kcb-faint: #646b74;
}

.koat-chatbot-toggle {
    position: fixed; right: 24px; bottom: 24px; z-index: 1040;
    width: 56px; height: 56px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--kcb-accent); color: var(--kcb-on-accent);
    line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
    /* 끌어서 옮긴다(chatbot.js). 터치로 끌 때 페이지가 스크롤·확대되지 않고, 길게 눌러도
       글자 선택이 시작되지 않게 한다. */
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
.koat-chatbot-toggle:hover { filter: brightness(1.08); }
.koat-chatbot-toggle:active { transform: scale(.96); }
/* 끄는 중: 들어 올린 느낌으로 그림자를 키운다(크기는 JS 가 transform 에 scale 로 준다).
   손가락을 따라가야 하므로 transform transition 을 끈다 — 켜 두면 버튼이 포인터보다 늦게 따라온다. */
.koat-chatbot-toggle.is-dragging {
    cursor: grabbing; transition: none; filter: none;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
}
/* 런처는 흰 Velzon 페이지 위에 있으므로 밝은 초록 대신 진한 초록 테두리를 쓴다(흰 바탕 5.0:1).
   !important 가 필요한 이유는 아래 .koat-chatbot button:focus-visible 주석 참고. */
.koat-chatbot-toggle:focus-visible { outline: 2px solid var(--kcb-page-focus) !important; outline-offset: 3px; }

.koat-chatbot {
    position: fixed; right: 24px; bottom: 92px; z-index: 1041;
    width: 460px; max-width: calc(100vw - 32px);
    height: 720px; max-height: calc(100vh - 116px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--kcb-bg); color: var(--kcb-text);
    border-radius: 16px; box-shadow: var(--kcb-panel-shadow);
    /* 폰트는 색과 달리 **시스템을 따른다.** 원본 디자인의 'Noto Sans KR' 은 어디서도 로드되지
       않아 실제로는 맑은 고딕으로 그려졌고, 페이지는 Bootstrap 변수(= "IBM Plex Sans", Velzon
       app.min.css 가 Google Fonts 로 로드)를 쓴다. 이름을 여기 다시 적지 않고 변수를 읽어야
       시스템 폰트를 바꿀 때 챗봇이 따라간다. 변수가 없는 화면에서는 같은 값으로 대체한다.
       IBM Plex Sans 에는 한글이 없어 한글은 페이지와 똑같이 OS 기본 고딕으로 그려진다.
       버튼·입력칸은 font-family: inherit 로 이 값을 물려받는다. */
    font-family: var(--vz-body-font-family, "IBM Plex Sans", sans-serif);
    font-size: 14px; line-height: 1.5; text-align: left;
}
/* hidden 속성만으로 숨긴다. JS 가 el.hidden 을 토글한다. */
.koat-chatbot[hidden] { display: none; }
/* 이 위젯만 Bootstrap 이 없는 화면에도 실리므로 박스 모델을 스스로 정한다. */
.koat-chatbot *, .koat-chatbot *::before, .koat-chatbot *::after { box-sizing: border-box; }
/* !important 가 필요하다. 사이트 CSS(app.min.css)에 `a, button { outline: 0 !important }` 가 있어
   이 규칙이 한 번도 적용되지 않았다 — 키보드 사용자는 위젯 안 어디에 포커스가 있는지 볼 수
   없었다(실측 2026-09-17). !important 끼리는 특이도로 갈리므로 이 선택자가 이긴다. */
.koat-chatbot button:focus-visible,
.koat-chatbot a:focus-visible { outline: 2px solid var(--kcb-accent-ink) !important; outline-offset: 2px; }

/* ---------- 헤더 ---------- */
.koat-chatbot-head {
    flex: 0 0 auto; height: 56px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px 0 16px; background: var(--kcb-bar);
}
/* 헤더 로고: 첫 화면 마스코트와 같은 시스템 로고(logo-sm.png)다. 로고 자체가 원형이라
   바탕 원판을 두지 않는다 — DNA·잎의 뚫린 곳으로 헤더 바탕색이 비친다(사이드바와 같은 모양).
   position 은 아래 "답변 중" 링의 기준점이다. */
.koat-chatbot-mark {
    position: relative; flex: 0 0 auto; width: 28px; height: 28px;
}
.koat-chatbot-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 답변을 기다리는 동안(chatbot.js 의 setBusy → .is-thinking) 로고 둘레를 빛이 돈다.
   원래는 로고마크의 점 4개가 물결쳤으나 로고를 이미지로 바꾸며 점이 없어져 링으로 옮겼다.
   헤더는 스크롤해도 늘 보이므로 마스코트가 가려진 대화 중에도 전달된다.
   conic-gradient 원판을 radial mask 로 2px 고리만 남기고 회전(transform)만 애니메이션한다.
   mask 를 지원하지 않는 브라우저에서는 로고 뒤에 원판이 비칠 뿐 동작은 같다. */
.koat-chatbot-mark::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, var(--kcb-accent-ink) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.koat-chatbot.is-thinking .koat-chatbot-mark::before {
    opacity: 1;
    animation: koatChatbotSpin .9s linear infinite;
}
@keyframes koatChatbotSpin {
    to { transform: rotate(360deg); }
}
.koat-chatbot-title {
    flex: 1 1 auto; min-width: 0;
    color: var(--kcb-text-strong); font-size: 16px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.koat-chatbot-headbtn {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--kcb-icon); cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.koat-chatbot-headbtn:hover { color: var(--kcb-icon-hover); background: var(--kcb-hover-wash); }
/* 테마 전환 버튼은 해 아이콘과 달 아이콘을 둘 다 갖고, 누르면 **바뀔** 테마의 아이콘만
   보인다(다크에서는 해, 라이트에서는 달). JS 는 속성만 바꾸고 아이콘을 만지지 않는다. */
.koat-chatbot-theme-moon { display: none; }
.koat-chatbot[data-koat-theme="light"] .koat-chatbot-theme-sun { display: none; }
.koat-chatbot[data-koat-theme="light"] .koat-chatbot-theme-moon { display: block; }

/* ---------- 스크롤 영역 ---------- */
.koat-chatbot-log {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 24px 20px;
}
.koat-chatbot-log::-webkit-scrollbar { width: 6px; }
.koat-chatbot-log::-webkit-scrollbar-thumb { background: var(--kcb-line-strong); border-radius: 3px; }
.koat-chatbot-log::-webkit-scrollbar-track { background: transparent; }
/* 표준 속성은 ::-webkit-scrollbar 가 없는 브라우저(Firefox)에만 준다. Chromium 121+ 는
   scrollbar-width 가 있으면 위 규칙을 무시하고 화살표 달린 기본 막대를 그린다(실측). */
@supports not selector(::-webkit-scrollbar) {
    .koat-chatbot-log { scrollbar-width: thin; scrollbar-color: var(--kcb-line-strong) transparent; }
}

/* ---------- 첫 화면 ---------- */
.koat-chatbot-hero-title {
    color: var(--kcb-text-strong); font-size: 22px; font-weight: 900; line-height: 1.45;
}
.koat-chatbot-hero-title em { font-style: normal; color: var(--kcb-accent-ink); }
.koat-chatbot-hero-sub {
    margin-top: 14px; color: var(--kcb-text-sub); font-size: 15px; line-height: 1.7;
}
.koat-chatbot-mascot {
    position: relative;
    width: 150px; height: 150px; margin: 26px auto;
    border: 2px solid var(--kcb-accent-soft); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--kcb-accent-tint);
    animation: koatChatbotBreathe 5s ease-in-out infinite;
}
/* 마스코트 움직임은 상태마다 하나씩이다.
   - 대기(기본): 호흡. 5초에 한 번 아주 조금 부풀고 은은한 빛이 차오른다. 끝없이 퍼지는
     링(펄스)은 "알림·연결 중" 같은 경고 신호로 읽혀 기다리는 화면에 맞지 않아 걷어냈다.
   - 인사(.is-greeting): 사용자가 패널을 직접 열 때와 "처음으로" 때 한 번 떠오르며
     손 흔들듯 기운다. 페이지를 옮겨 열린 패널이 복원될 때는 하지 않는다 — 매 화면마다
     인사하면 거슬린다. chatbot.js 가 wave 가 끝나면 클래스를 떼어 호흡으로 돌아온다.
   - 답변 중: 마스코트가 아니라 헤더 로고 둘레에 빛 링이 돈다(.is-thinking). 대화 중에는
     마스코트가 스크롤로 가려지지만 헤더는 늘 보이기 때문이다.
   합성 단계에서 끝나도록 transform·opacity 만 움직인다. 빛은 box-shadow 를 고정해 두고
   그 층의 opacity 만 바꾼다(box-shadow 자체를 애니메이션하면 매 프레임 다시 칠한다).
   패널이 닫혀 있으면 display:none 이라 돌지 않는다. */
.koat-chatbot-mascot::before {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    box-shadow: 0 0 28px 6px var(--kcb-accent-glow);
    opacity: .15; pointer-events: none;
    animation: koatChatbotGlow 5s ease-in-out infinite;
}
@keyframes koatChatbotBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
@keyframes koatChatbotGlow {
    0%, 100% { opacity: .15; }
    50%      { opacity: 1; }
}
.koat-chatbot-mascot.is-greeting {
    animation: koatChatbotGreetIn 560ms cubic-bezier(.23, 1, .32, 1) both;
}
.koat-chatbot-mascot.is-greeting img {
    transform-origin: 50% 85%;
    animation: koatChatbotWave 900ms ease-in-out 480ms both;
}
@keyframes koatChatbotGreetIn {
    from { opacity: 0; transform: scale(.86) translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes koatChatbotWave {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(-12deg); }
    45%  { transform: rotate(10deg); }
    70%  { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}
/* 로고(logo-sm.png)는 거의 원형이고 DNA·잎 모양이 투명하게 뚫려 있다. 원 안에 여백을
   두고 contain 으로 얹어 자르지 않는다 — 뚫린 곳으로 원판 색이 비치는 모양은
   어두운 사이드바에서 이미 쓰고 있는 모양과 같다. */
.koat-chatbot-mascot img { display: block; width: 70%; height: 70%; object-fit: contain; }

/* 웰컴 카드. 누르는 동작은 대화 중 선택지와 같은 경로(chatbot.js 의 choiceNode)를
   그대로 쓰고, 여기서는 모양만 카드로 바꾼다. 그래서 .koat-chatbot-action 클래스가
   함께 붙어 있다 — 아래 선택자는 그 칩 모양을 덮어쓰려고 한 단계 더 구체적이다. */
.koat-chatbot-cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.koat-chatbot-cards.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.koat-chatbot-cards:empty { display: none; }
.koat-chatbot-cards > .koat-chatbot-welcome-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    margin: 0; padding: 16px 14px; min-width: 0;
    background: var(--kcb-surface); border: 1px solid var(--kcb-line); border-radius: 10px;
    color: var(--kcb-text-strong); font-family: inherit;
    font-size: 15px; font-weight: 700; line-height: 1.4;
    text-align: left; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.koat-chatbot-cards > .koat-chatbot-welcome-card:hover {
    border-color: var(--kcb-accent-ink); background: var(--kcb-surface-hover); color: var(--kcb-text-strong);
}
/* 비활성 카드. 글자색까지 hover 에서 고정한다 — 빠지면 위 :hover 규칙(특이도가 더 높다)이
   글자를 밝혀 눌릴 것처럼 보인다(QA 실측). */
.koat-chatbot-cards > .koat-chatbot-welcome-card[disabled],
.koat-chatbot-cards > .koat-chatbot-welcome-card[disabled]:hover {
    opacity: .5; cursor: default; border-color: var(--kcb-line); background: var(--kcb-surface);
    color: var(--kcb-text-sub);
}
.koat-chatbot-cards > .koat-chatbot-welcome-card.koat-chatbot-action-unsafe,
.koat-chatbot-cards > .koat-chatbot-welcome-card.koat-chatbot-action-unsafe:hover {
    color: var(--kcb-faint); border-color: var(--kcb-line); border-style: dashed;
    background: var(--kcb-surface); cursor: default;
}
/* 아이콘까지 회색으로 죽인다. 강조색 아이콘이 남으면 점선 카드도 반쯤 살아 보인다. */
.koat-chatbot-cards > .koat-chatbot-welcome-card.koat-chatbot-action-unsafe .koat-chatbot-card-icon {
    background: var(--kcb-input); color: var(--kcb-faint);
}
.koat-chatbot-card-icon {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--kcb-accent-tint); color: var(--kcb-accent-ink);
}
.koat-chatbot-chips { margin-top: 16px; }
.koat-chatbot-chips:empty { display: none; }

/* ---------- 대화 ---------- */
@keyframes koatChatbotMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.koat-chatbot-turn { display: flex; flex-direction: column; margin-top: 18px; }
/* 방금 오간 말풍선에만 붙인다. 페이지를 옮겨 대화를 복원할 때 20개가 한꺼번에
   떠오르면 산만하다. */
.koat-chatbot-turn.is-anim { animation: koatChatbotMsgIn .25s ease; }

.koat-chatbot-row { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.koat-chatbot-time { flex: 0 0 auto; color: var(--kcb-faint); font-size: 11px; white-space: nowrap; }

.koat-chatbot-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.koat-chatbot-avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--kcb-accent); }
/* 로고가 들어가면 바탕 원을 뺀다. 남기면 로고의 뚫린 DNA·잎 사이로 강조색이 비친다.
   헤더 로고가 없어 JS 가 img 를 못 넣으면 위의 강조색 원이 그대로 아바타가 된다. */
.koat-chatbot-avatar.has-logo { background: none; }
.koat-chatbot-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.koat-chatbot-name { color: var(--kcb-text-name); font-size: 13px; font-weight: 700; }

.koat-chatbot-bubble {
    align-self: flex-start; max-width: 85%;
    padding: 16px 18px; border: 1px solid var(--kcb-line); border-radius: 4px 16px 16px 16px;
    background: var(--kcb-surface); color: var(--kcb-text);
    font-size: 14px; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.koat-chatbot-turn.is-user .koat-chatbot-bubble {
    max-width: 75%; padding: 12px 16px; border: 0; border-radius: 16px 16px 4px 16px;
    background: var(--kcb-accent); color: var(--kcb-on-accent);
    font-size: 15px; font-weight: 500; line-height: 1.55;
}
/* 카드 제목은 원본 디자인의 말풍선 제목 자리다. message 와 card.body 가 같으면
   (카드가 있는 응답의 대부분) chatbot.js 가 message 를 생략하므로 제목+본문만 남는다.
   둘이 다를 때만 message 아래에 구분선을 두고 카드를 붙인다. */
.koat-chatbot-card-title {
    margin-bottom: 8px; color: var(--kcb-accent-ink);
    font-size: 16px; font-weight: 700; line-height: 1.5;
}
.koat-chatbot-text + .koat-chatbot-card {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kcb-line);
}

.koat-chatbot-typing { display: inline-flex; align-items: center; gap: 5px; padding: 16px 18px; }
.koat-chatbot-typing i {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--kcb-faint); animation: koatChatbotBlink 1.2s infinite ease-in-out;
}
.koat-chatbot-typing i:nth-child(2) { animation-delay: .15s; }
.koat-chatbot-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes koatChatbotBlink {
    0%, 80%, 100% { opacity: .35; }
    40% { opacity: 1; }
}

/* 선택지·링크·추천 질문. 원본 디자인의 칩 모양이다. */
.koat-chatbot-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.koat-chatbot-action {
    display: inline-block; margin: 0; padding: 7px 14px;
    border: 1px solid var(--kcb-line-strong); border-radius: 999px;
    background: transparent; color: var(--kcb-text-sub);
    font-family: inherit; font-size: 13px; line-height: 1.4;
    text-align: left; text-decoration: none; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.koat-chatbot-action:hover { border-color: var(--kcb-accent-ink); color: var(--kcb-accent-hi); text-decoration: none; }
.koat-chatbot-action[disabled] { opacity: .45; cursor: default; border-color: var(--kcb-line-strong); color: var(--kcb-text-sub); }
/* 화면 이동 링크는 질문을 보내는 버튼과 누른 결과가 다르므로 꺾쇠로 구별한다. */
a.koat-chatbot-action::after { content: "\203A"; margin-left: 6px; color: var(--kcb-faint); }
a.koat-chatbot-action:hover::after { color: var(--kcb-accent-hi); }
.koat-chatbot-cards > a.koat-chatbot-welcome-card::after { content: none; }

/* "자주 하는 질문" 목록. 칩 대신 카드 안의 세로 목록으로, 줄마다 "Q." 를 붙인다.
   말풍선(최대 85%)보다 넓게 턴 폭을 다 쓴다 — 질문 문장이 길어 좁으면 줄마다 꺾인다.
   글자가 길어 두 줄이 돼도 "Q." 는 첫 줄에 붙어 있도록 위쪽 정렬한다. */
.koat-chatbot-qlist {
    margin-top: 10px; padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--kcb-surface); border: 1px solid var(--kcb-line); border-radius: 14px;
}
.koat-chatbot-qitem {
    display: flex; align-items: flex-start; gap: 8px; width: 100%;
    margin: 0; padding: 12px 14px;
    background: var(--kcb-input); border: 1px solid var(--kcb-line); border-radius: 10px;
    color: var(--kcb-text-strong); font-family: inherit; font-size: 14px; font-weight: 500;
    line-height: 1.5; text-align: left; word-break: keep-all; overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.koat-chatbot-qitem:hover { border-color: var(--kcb-accent-ink); background: var(--kcb-surface-hover); }
.koat-chatbot-qitem:active { transform: scale(.99); }
.koat-chatbot-qmark { flex: 0 0 auto; color: var(--kcb-accent-ink); font-weight: 700; }
.koat-chatbot-qlabel { flex: 1 1 auto; min-width: 0; }

/* 안전하지 않은 href(javascript:, 외부 도메인 등)는 <a> 로 만들지 않고
   이 클래스로 렌더한다 — 테두리·hover 반전·포인터 커서 등 실제 동작하는
   버튼처럼 보이는 스타일을 일부러 주지 않는다. 눌러도 아무 일 없는
   "멀쩡해 보이는" 버튼보다는 못 누르는 텍스트로 보이는 편이 낫다. */
.koat-chatbot-action-unsafe {
    display: inline-block; padding: 7px 4px; font-size: 13px;
    color: var(--kcb-faint);
}

/* ---------- 입력 ---------- */
.koat-chatbot-form {
    flex: 0 0 auto; margin: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: var(--kcb-bar);
}
.koat-chatbot-input {
    flex: 1 1 auto; min-width: 0; margin: 0;
    padding: 11px 16px; border: 1px solid var(--kcb-line); border-radius: 999px;
    background: var(--kcb-input); color: var(--kcb-text-strong);
    font-family: inherit; font-size: 14px; line-height: 1.4; outline: none;
    transition: border-color .15s ease;
}
.koat-chatbot-input::placeholder { color: var(--kcb-faint); opacity: 1; }
.koat-chatbot-input:focus { border-color: var(--kcb-accent-ink); }
.koat-chatbot-send {
    flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--kcb-accent); color: var(--kcb-on-accent);
    transition: filter .15s ease;
}
.koat-chatbot-send:hover { filter: brightness(1.1); }
.koat-chatbot-send[disabled] { opacity: .5; cursor: default; filter: none; }

@media (max-width: 480px) {
    .koat-chatbot { right: 12px; left: 12px; width: auto; bottom: 84px; max-height: calc(100vh - 100px); }
    .koat-chatbot-toggle { right: 16px; bottom: 16px; }
    .koat-chatbot-log { padding: 22px 16px 16px; }
    .koat-chatbot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .koat-chatbot-turn.is-anim { animation: none; }
    .koat-chatbot-typing i { animation: none; opacity: .7; }
    .koat-chatbot-qitem:active { transform: none; }
    /* 크기·기울기 변화는 빼고 빛의 밝기(opacity)만 남긴다. chatbot.js 도 이 설정이면
       인사 클래스를 붙이지 않는다. */
    .koat-chatbot-mascot,
    .koat-chatbot-mascot.is-greeting,
    .koat-chatbot-mascot.is-greeting img { animation: none; }
    /* "답변 중" 은 정보라 없애지 않고, 링이 도는 대신 온전한 고리로 흐려졌다 돌아오게만 한다. */
    .koat-chatbot.is-thinking .koat-chatbot-mark::before {
        background: var(--kcb-accent-ink);
        animation: koatChatbotRingFade 1.2s ease-in-out infinite;
    }
}
@keyframes koatChatbotRingFade {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}