/* ============================================ */
/* Chatbot Widget — Figma design tokens          */
/* All hardcoded hex/px should reference these   */
/* ============================================ */
:root {
    /* Grays */
    --cw-gray-0:  #FFFFFF;
    --cw-gray-2:  #EDEFF2;   /* 배경 */
    --cw-gray-4:  #D5DADF;   /* 구분선, 디바이더 */
    --cw-gray-5:  #AAB1B8;   /* 비활성 / 플레이스홀더 / 도트 그리드 회색 */
    --cw-gray-7:  #6F767C;   /* 보조 텍스트, 불릿, 취소 보더 */
    --cw-gray-9:  #4E5257;   /* 날짜 칩 텍스트 */
    --cw-gray-10: #2F353A;   /* 본문, 가이드 딤 (multiply) */
    --cw-gray-11: #1C2025;   /* 헤더 타이틀, 확인 버튼 */
    --cw-gray-12: #000000;
    /* Brand */
    --cw-blue-main:    #09408A;   /* 경기도이주민포털 */
    --cw-blue-primary: #004097;   /* 체크박스 텍스트 */
    --cw-blue-sub-2:   #E8F2FD;   /* 질문 칩 배경 */
    /* Accent gradient */
    --cw-green-secondary: #02983B;
    --cw-grad-end:        #195FBE;
    /* Radii */
    --cw-r-btn: 12px;
    --cw-r-check: 5px;
    --cw-r-chip-tl: 0;        /* 좌상단만 0 */
    --cw-r-chip-other: 16px;
    --cw-r-input: 26px;
    --cw-r-pill: 9999px;
    /* Fonts */
    --cw-font-base: 'Noto Sans KR', 'Noto Sans', sans-serif;
    --cw-font-brand: 'Paperlogy', 'Noto Sans KR', 'Noto Sans', sans-serif;
}

/* ---- Floating Button ---- */
.cw-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37,99,235,0.4);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cw-float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(37,99,235,0.5);
}
.cw-float-btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

/* Admin variant - red floating button */
.cw-float-btn.cw-admin {
    background: #dc2626;
    box-shadow: 0 4px 12px rgba(220,38,38,0.4);
}
.cw-float-btn.cw-admin:hover {
    box-shadow: 0 6px 20px rgba(220,38,38,0.5);
}

/* Admin variant - maroon header (override default white) */
.chatbot.cw-admin .chatbot_toparea {
    background: #800020;
    border-bottom-color: rgba(0,0,0,0.1);
}
.chatbot.cw-admin .chatbot_toparea h2 {
    color: #FFFFFF;
}
.chatbot.cw-admin .chatbot_toparea .btn_history,
.chatbot.cw-admin .chatbot_toparea .btn_close {
    filter: invert(1);
}
.chatbot.cw-admin .chat_guide .chatbot_toparea {
    background: rgba(128,0,32,0.85);
}

/* ---- Chat Window (main container) ---- */
.chatbot {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 400px;
    height: 680px;
    max-height: calc(100vh - 130px);
    background: #FFFFFF !important;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 9999;
    overflow: hidden;
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: 14px;
    flex-direction: column;
    backdrop-filter: none !important;
    filter: none !important;
}
.chatbot.open {
    display: flex;
}

/* ---- Top Area (Header)
   contents.css lines 640-643 provide base styling.
   Defensive override: force horizontal flex on the main header so 시계/챗봇/X
   are NEVER stacked vertically (some inherited rule was breaking layout).
   ====================================================================== */
#chatbot .chatbot_toparea,
#chatbot #cwMainHeader {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0 16px !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    /* h2 를 절대 위치로 가운데 정렬하기 위한 컨테이너 */
    position: relative !important;
}
#chatbot .chatbot_toparea h2,
#chatbot #cwMainHeader h2 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1C2025 !important;
    /* 좌측에 버튼이 1개(이력)일 때와 2개(이력+새로고침)일 때 모두
       타이틀을 컨테이너의 가로 중앙에 고정. */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;            /* 클릭은 뒤에 있는 버튼이 받음 */
}
#chatbot .chatbot_toparea .btn_history,
#chatbot .chatbot_toparea .btn_refresh,
#chatbot .chatbot_toparea .btn_close,
#chatbot #cwMainHeader .btn_history,
#chatbot #cwMainHeader .btn_refresh,
#chatbot #cwMainHeader .btn_close {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
}
/* 좌측 버튼 묶음 — history + refresh 가 한 단위로 좌측에 머무르도록 wrapper.
   space-between flex 의 한 항목으로 취급되어 우측 close 와 마주 보고 정렬되며,
   가운데 절대중앙(h2) 와 겹치지 않게 한다. */
#chatbot .chatbot_toparea .cw-header-left,
#chatbot #cwMainHeader .cw-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
}
/* 새로고침 버튼 — 아이콘 PNG 경로: /gmigrant/images/hmpg/icon_chatbot_refresh.png.
   PNG 가 없으면 fallback inline SVG 가 표시되어 빈 버튼으로 보이지 않게. */
#chatbot .chatbot_toparea .btn_refresh,
#chatbot #cwMainHeader .btn_refresh {
    padding: 0 !important;
    border: 0 !important;
    cursor: pointer !important;
    background: transparent
        url('/gmigrant/images/hmpg/icon_chatbot_refresh.png') no-repeat center !important;
    background-size: 24px 24px !important;
}
/* PNG 미배포 환경 fallback — data-URI SVG (사용자 제공 아이콘과 유사한 번개 모양).
   .png 가 정상 로드되면 위 규칙이 우선 적용된다. */
#chatbot .chatbot_toparea .btn_refresh:not([data-icon-loaded]),
#chatbot #cwMainHeader .btn_refresh:not([data-icon-loaded]) {
    background-image:
        url('/gmigrant/images/hmpg/icon_chatbot_refresh.png'),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2025' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 L4 14 L11 14 L11 22 L20 10 L13 10 Z'/%3E%3C/svg%3E") !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 24px 24px, 24px 24px !important;
}

/* ============================================ */
/* Mid Area (Chat body)                         */
/* ============================================ */
.chatbot_midarea {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
}

/* ---- contents.css conflict overrides for floating widget context
   contents.css lines 644, 658, 667 all assume FULL-SCREEN mobile chatbot
   (height: calc(100vh - 60px), position: fixed 100vw 100vh).
   We keep the chatbot as a FLOATING WIDGET (400×680 bottom-right) and we
   need a PROPER FLEX SCROLL CONTAINER so messages scroll while header /
   date / search bar stay fixed.
   ====================================================================== */
/* chatbot_talk = flex column container that fills cwChatArea (chatbot_midarea).
   - date / banner / typing / search_wrap → flex-shrink: 0 (natural height)
   - chat_list → flex 1 + overflow-y: auto  (THIS is the scroll container) */
#chatbot .chatbot_talk {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;             /* allow shrinking inside flex parent */
    height: auto !important;               /* override calc(100vh - 60px) */
    overflow: hidden !important;           /* clip; inner chat_list scrolls */
    padding: 0 !important;
    background: #FFFFFF !important;
}
/* Header-like fixed children */
#chatbot .chatbot_talk > .date,
#chatbot .chatbot_talk > .cw-empty-banner,
#chatbot .chatbot_talk > .chat_typing {
    flex: 0 0 auto !important;
}
/* Horizontal padding for top fixed elements (welcome text, typing indicator) */
#chatbot .chatbot_talk > .cw-empty-banner,
#chatbot .chatbot_talk > .chat_typing {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
/* Search wrap pinned to bottom (override contents.css line 653 absolute pos) */
#chatbot .chatbot_talk > .search_wrap {
    position: static !important;
    flex: 0 0 auto !important;
}
/* THE scroll area — chat_list grows to fill remaining space and scrolls.
   Horizontal padding 16px so message bubbles don't touch the edges. */
#chatbot .chatbot_talk > .chat_list,
#chatbot #cwMessages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;               /* override contents.css 100% */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 16px 16px !important;     /* breathing room from edges */
}
/* ============================================================
   날짜(.date) 도 함께 스크롤되도록 .chat_list 대신 .cw-scroll 을 스크롤
   컨테이너로 사용. (요청: 헤더 박스만 고정 / 날짜 영역 고정 해제)
   ============================================================ */
#chatbot .chatbot_talk > .cw-scroll,
#chatbot #cwScroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;         /* scrollUserQuestionToTop offsetTop 기준 */
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
}
/* cw-scroll 안에 들어간 chat_list 는 더 이상 자체 스크롤이 아닌, 정상 블록 흐름 */
#chatbot #cwScroll > .chat_list,
#chatbot #cwScroll > #cwMessages {
    flex: 0 0 auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}
/* cw-empty-banner / date 는 chatbot_talk 의 직접 자식이 아니게 되었으므로
   기존 `> .cw-empty-banner` 규칙이 매칭되지 않는다. 동일한 좌우 padding 을
   cw-scroll 내부 자식에 다시 부여한다. */
#chatbot #cwScroll > .cw-empty-banner {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
/* Clear floats since contents.css uses float for left/right bubbles */
#chatbot .chat_list::after {
    content: '';
    display: block;
    clear: both;
}

/* ---- Date / welcome text / message bubbles
   Base styles (originally in contents.css lines 645-652) are inlined here so
   the admin variant — which doesn't load contents.css — also renders correctly.
   All selectors are scoped under #chatbot to avoid leaking into admin layout.
   ====================================================================== */
#chatbot .chatbot_talk .date {
    padding: 8px 0;
    margin: 0 auto;
    display: block;
    width: 128px;
    font-size: 13px;
    text-align: center;
    color: #4E5257;
    border-radius: 36px;
    background-color: #EDEFF2;
}
#chatbot .chatbot_talk .txt {
    padding: 24px 0;
    line-height: 29px;
    font-size: 19px;
    font-weight: 600;
    color: #000;
}
#chatbot .chatbot_talk .chat_list li {
    clear: both;
    margin-bottom: 10px;
    padding: 10px 14px;
    display: block;
    width: fit-content;
    font-size: 13px;
    color: #000;
    list-style: none;
}
#chatbot .chatbot_talk .chat_list .left {
    float: left;
    border-radius: 0 16px 16px 16px;
    background-color: #E8F2FD;
}
#chatbot .chatbot_talk .chat_list .left.question {
    cursor: pointer;
}
#chatbot .chatbot_talk .chat_list .right {
    margin: 14px 0 24px;
    float: right;
    border-radius: 16px 0 16px 16px;
    background-color: #E4F4E6;
}
#chatbot .chatbot_talk .search_box {
    margin: -25px auto 0;
    position: relative;
    width: 100%;
    height: 52px;
    border-radius: 52px;
    padding: 1px;
    background-image: linear-gradient(to right, #2F9638, #195FBE);
    box-sizing: border-box;
}
#chatbot .chatbot_talk .search_box input {
    padding: 0 50px;
    width: 100%;
    height: 100%;
    font-size: 15px;
    color: #000;
    border-radius: 52px;
    border: none;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}
#chatbot .chatbot_talk .search_box .btn_faq {
    position: absolute;
    top: calc(50% - 9px);
    left: 20px;
    width: 18px;
    height: 18px;
    background: url('/gmigrant/images/hmpg/icon_chatbot_faq.png') no-repeat center;
    border: none;
    cursor: pointer;
}
#chatbot .chatbot_talk .search_box .btn_send {
    position: absolute;
    top: calc(50% - 12px);
    right: 20px;
    width: 24px;
    height: 24px;
    background: url('/gmigrant/images/hmpg/icon_chatbot_send.png') no-repeat center;
    border: none;
    cursor: pointer;
}

/* ---- Empty state banner — visible only when no user message yet
   New spec for active state: "추천 질문 칩은 그대로 표시되어 있고" —
   chips REMAIN visible during conversation. Only welcome banner hides. */
#chatbot .cw-empty-banner {
    display: block;
}
#chatbot.cw-has-conversation .cw-empty-banner,
#chatbot #cwChatArea.cw-has-conversation .cw-empty-banner {
    display: none !important;
}
/* Chips stay visible during conversation (used ones marked via .active class) */

/* ---- Question chip vertical gap — spec: 24px between chips
   contents.css line 648 sets margin-bottom: 10px. Override for question chips. */
#chatbot .chatbot_talk .chat_list li.left.question {
    margin-bottom: 24px !important;
}
#chatbot .chatbot_talk .chat_list li.left.question:last-child {
    margin-bottom: 0 !important;
}
/* "Used" chip state — already-clicked question chip turns blue-sub-3 */
#chatbot .chatbot_talk .chat_list li.left.question.active {
    background-color: #CDE3FB !important;     /* --blue-sub-3 */
}

/* ---- AI bubble (left bubble that is NOT a question chip) — full-width 328
   spec: "padding 10 14, ★ width 328 (좌우 16 패딩 제외 풀 폭)"
   contents.css line 648 has width:fit-content for ALL li → override here.
   하단 padding 을 32px 로 늘려 우측하단 복사 버튼이 본문 텍스트와 겹치지 않게 함. */
#chatbot .chatbot_talk .chat_list li.left:not(.question) {
    position: relative !important;               /* 복사 버튼 absolute 기준점 */
    width: calc(100% - 32px) !important;        /* 328 in 360 viewport, scales */
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    padding: 10px 14px 32px 14px !important;     /* bottom 여유: 복사 버튼 자리 */
    word-break: break-word !important;
    white-space: normal !important;              /* cw-msg-body 안에서 처리 */
    line-height: 150% !important;
}
/* 본문 div — pre-wrap 으로 줄바꿈/공백 보존, 단어 단위 줄바꿈 */
#chatbot .chatbot_talk .chat_list li.left .cw-msg-body {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    line-height: 150% !important;
}
/* AI 답변 안 URL 링크 — 새 창 이동(<a target="_blank">) */
#chatbot .chat_list li.left .cw-msg-body a.cw-msg-link,
#chatbot .chat_list li.left .cw-msg-body a.cw-msg-link:link,
#chatbot .chat_list li.left .cw-msg-body a.cw-msg-link:visited {
    color: #1A4FB0 !important;
    text-decoration: underline !important;
    word-break: break-all !important;            /* 긴 URL 도 자연스럽게 줄바꿈 */
}
#chatbot .chat_list li.left .cw-msg-body a.cw-msg-link:hover,
#chatbot .chat_list li.left .cw-msg-body a.cw-msg-link:active {
    color: #0A3A8F !important;
}
/* 복사 버튼 — 답변 말풍선 우측하단 */
#chatbot .chat_list li.left .cw-copy-btn {
    position: absolute !important;
    right: 10px !important;
    bottom: 6px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    cursor: pointer !important;
    opacity: 0.55 !important;
    background: transparent
        url('/gmigrant/images/hmpg/icon_chatbot_copy.png') no-repeat center !important;
    background-size: 18px 18px !important;
    transition: opacity 0.15s !important;
}
#chatbot .chat_list li.left .cw-copy-btn:hover,
#chatbot .chat_list li.left .cw-copy-btn:focus {
    opacity: 1 !important;
}
/* PNG 미배포 fallback — 겹친 사각형(복사) 아이콘 SVG. PNG 가 정상이면 그 위로 가려짐. */
#chatbot .chat_list li.left .cw-copy-btn:not(.cw-copied) {
    background-image:
        url('/gmigrant/images/hmpg/icon_chatbot_copy.png'),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2025' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15 H4 a1 1 0 0 1 -1 -1 V4 a1 1 0 0 1 1 -1 h10 a1 1 0 0 1 1 1 v1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 18px 18px, 18px 18px !important;
}
/* 복사 직후 0.8초간 체크 아이콘 표시 */
#chatbot .chat_list li.left .cw-copy-btn.cw-copied {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F9638' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12 L10 17 L20 7'/%3E%3C/svg%3E") !important;
    background-size: 18px 18px !important;
    opacity: 1 !important;
}
/* 복사 완료 토스트 */
#chatbot .cw-toast {
    position: absolute !important;
    bottom: 92px !important;                     /* 입력바 위 */
    left: 50% !important;
    transform: translate(-50%, 8px) !important;
    padding: 8px 16px !important;
    background: rgba(28, 32, 37, 0.88) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.18s, transform 0.18s !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}
#chatbot .cw-toast.show {
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
}
/* User bubble — preserve line breaks too */
#chatbot .chatbot_talk .chat_list li.right {
    word-break: break-word !important;
    white-space: pre-wrap !important;
    line-height: 150% !important;
    max-width: 254px !important;                 /* spec hug limit */
}

/* ---- Header height: spec wants 360×58 (16px padding).
   contents.css line 640 has height: 60px which is close, keep it. */

/* (Input bar gradient border now consolidated into the main .search_box
   override below — spec: 시안은 항상 표시 형태) */

/* ---- Typing indicator ---- */
.chat_typing {
    padding: 6px 16px;
    display: none;
    flex-shrink: 0;
}
.chat_typing.show {
    display: flex;
    align-items: center;
    gap: 4px;
}
.chat_typing span {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #999;
    border-radius: 50%;
    animation: cw-bounce 1.2s infinite;
}
.chat_typing span:nth-child(2) { animation-delay: 0.2s; }
.chat_typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cw-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* ---- Search / Input area (Component C — capsule input, spec match)
   contents.css line 654 paints a gradient border via `padding:1px + bg gradient`.
   Spec wants a PLAIN WHITE CAPSULE (no border) with a 1px×16 divider between
   the mic icon and the text input. We override contents.css here.
   ====================================================================== */
#chatbot .chatbot_talk .search_wrap {
    /* parent: padding 20/16/16 (bottom 16 lifts input bar off the edge),
       white fade gradient from top to opaque white */
    padding: 20px 16px 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--cw-gray-0) 100%) !important;
    border-top: 0 !important;
}
#chatbot .chatbot_talk .search_box {
    /* spec: 328×52, white capsule with ALWAYS-ON gradient border (#2F9638→#195FBE 90deg)
       Double-background trick: white inside + gradient as 1px ring */
    width: auto !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    background:
        linear-gradient(var(--cw-gray-0), var(--cw-gray-0)) padding-box,
        linear-gradient(90deg, var(--cw-green-secondary) 0%, var(--cw-grad-end) 100%) border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--cw-r-input) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-left: 20px !important;
    padding-right: 8px !important;
    position: relative !important;
}
/* Mic-style icon (left): contents.css line 656 already uses /gmigrant/images/hmpg/icon_chatbot_faq.png */
#chatbot .chatbot_talk .search_box .btn_faq {
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background-position: center !important;
    background-size: 18px !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}
/* 1px×16 divider after the mic icon */
#chatbot .chatbot_talk .search_box .btn_faq::after {
    content: '' !important;
    display: block !important;
    width: 1px !important;
    height: 16px !important;
    background: var(--cw-gray-4) !important;
    position: absolute !important;
    left: 46px !important;       /* 20 (padding) + 18 (icon) + 8 (gap to divider) */
    top: 50% !important;
    transform: translateY(-50%) !important;
}
/* Text input area */
#chatbot .chatbot_talk .search_box input[type="search"],
#chatbot .chatbot_talk .search_box input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 12px 0 16px !important;   /* 16px after divider */
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    font-family: var(--cw-font-base) !important;
    font-size: 15px !important;
    color: var(--cw-gray-12) !important;
    border-radius: 0 !important;
}
#chatbot .chatbot_talk .search_box input::placeholder {
    color: var(--cw-gray-5) !important;
}
/* Send button (paperplane 24×24, black, contents.css line 657 provides PNG) */
#chatbot .chatbot_talk .search_box .btn_send {
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    background-position: center !important;
    background-size: 22px !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    margin-right: 12px !important;       /* spec: padding-right 20 - 8 = 12 from edge */
}

/* ============================================ */
/* Modal popups (History, FAQ, FAQ detail)       */
/* ============================================ */
.chatbot .cw-modal {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 20 !important;
    background: rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.chatbot .cw-modal.show {
    display: flex !important;
}

/* ---- History modal — special dim with multiply blend (spec) ---- */
/* The default .cw-modal uses plain rgba dim. For history drawer the spec
   requires #2F353A + mix-blend-mode: multiply, which only works if the dim
   is a separate layer behind the white drawer. Using ::before pseudo so the
   white drawer (positioned higher) is NOT affected by the blend. */
.chatbot #cwHistoryModal {
    background: transparent !important;     /* override .cw-modal dim */
}
.chatbot #cwHistoryModal::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background: var(--cw-gray-10) !important;     /* #2F353A */
    mix-blend-mode: multiply !important;
    z-index: 0 !important;
    pointer-events: none !important;               /* let modal click pass through to bg dismiss */
}

/* ---- Popup base ---- */
.chatbot .popup {
    position: absolute !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* (cw-history-open header-hide rule removed — drawer is 304px overlay,
   chatbot header stays visible behind multiply dim per spec) */

/* ---- History drawer — 304px from left, slide-in animation (spec) ---- */
.chatbot .popup.history {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 304px !important;
    max-width: 304px !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: 4px 0 16px rgba(0,0,0,0.06) !important;
    background: var(--cw-gray-0) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1 !important;                          /* above ::before dim */
    animation: cwSlideInLeft 0.25s ease-out !important;
}
@keyframes cwSlideInLeft {
    from { transform: translateX(-304px); }
    to   { transform: translateX(0); }
}
/* Title bar — only X on the right, no border, no title text */
.chatbot .popup.history .popup_title,
.chatbot .popup.history .cw-history-title,
.chatbot .popup.history .popup_scroll .popup_title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 14px 16px !important;
    border-bottom: none !important;
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
}
.chatbot .popup.history .popup_title .modal_close,
.chatbot .popup.history .cw-history-title .modal_close {
    width: 24px !important;
    height: 24px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C2025'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 22px !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
}
/* Scroll wrapper (legacy) — disable its constraint */
.chatbot .popup.history .popup_scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}
/* Inner scroll area — spec: width 288, padding 0 0 0 12, scrollable
   Bottom padding leaves room for the absolute footer (99px tall) so list
   items don't sit under the button.
   Top padding 16px: chatbot 헤더(.chatbot_toparea, 60px·z-index 1001) 가 드로어
   (z-index 1) 위에 떠 있어서 drawer 의 popup_title(52px) 보다 8px 더 아래까지
   덮인다. 그대로 두면 첫 번째 히스토리 항목(.active 음영 12px radius)의 상단
   8px 정도가 헤더 뒤로 숨어 둥근 모서리가 잘려보인다. */
.chatbot .popup.history .popup_inner,
.chatbot .popup.history .cw-history-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 4px 99px 12px !important;  /* top 16: 헤더에 가려지지 않도록 / 99 bottom = footer */
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Custom scrollbar — 5px gray capsule (spec) */
.chatbot .popup.history .popup_inner::-webkit-scrollbar,
.chatbot .popup.history .cw-history-inner::-webkit-scrollbar {
    width: 5px;
}
.chatbot .popup.history .popup_inner::-webkit-scrollbar-track,
.chatbot .popup.history .cw-history-inner::-webkit-scrollbar-track {
    background: transparent;
}
.chatbot .popup.history .popup_inner::-webkit-scrollbar-thumb,
.chatbot .popup.history .cw-history-inner::-webkit-scrollbar-thumb {
    background: var(--cw-gray-5);
    border-radius: 10px;
    min-height: 40px;
}

/* Fixed footer at drawer bottom — absolute over scroll area with white fade.
   Spec: 304×99 absolute bottom 0, padding 24 16, gradient fade above. */
.chatbot .popup.history .button_box,
.chatbot .popup.history .cw-history-foot {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 99px !important;
    padding: 24px 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--cw-gray-0) 50%) !important;
    border-top: 0 !important;                                 /* fade replaces hard border */
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;                                     /* above scroll content */
}
.chatbot .popup.history .button_box .center {
    display: block !important;
    width: 100% !important;
}
/* Clear button — spec: 272×51, white bg + #6F767C 1px border, radius 12 */
.chatbot .popup.history .button_box button,
.chatbot .popup.history .cw-history-clear-btn {
    width: 100% !important;
    min-height: 51px !important;
    height: 51px !important;
    padding: 14px 20px !important;
    background: var(--cw-gray-0) !important;
    color: var(--cw-gray-12) !important;
    border: 1px solid var(--cw-gray-7) !important;
    border-radius: var(--cw-r-btn) !important;
    font-family: var(--cw-font-base) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.chatbot .popup.history .button_box button:hover,
.chatbot .popup.history .cw-history-clear-btn:hover {
    background: #F4F6F8 !important;
}

/* ---- FAQ category bottom sheet (height bumped so all 6 cards show fully) ---- */
.chatbot .popup.faq {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: 400px !important;                                       /* taller — fits all 2x3 cards */
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 6px 80px rgba(0, 0, 0, 0.06) !important;
    background: var(--cw-gray-0) !important;
    padding: 20px 16px 24px !important;
    z-index: 2 !important;
    animation: cwSlideUpSheet 0.28s ease-out !important;
}
@keyframes cwSlideUpSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
/* FAQ modal dim — translucent overlay so chat content shows through */
.chatbot #cwFaqModal {
    background: transparent !important;     /* override .cw-modal default rgba */
}
.chatbot #cwFaqModal::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    /* rgba dim instead of multiply: with chat bg often white, multiply just
       turns the area solid gray. rgba lets the content show through. */
    background: rgba(148, 155, 160, 0.45) !important;
    mix-blend-mode: normal !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ---- FAQ detail popup (slides from bottom) ---- */
/* FAQ detail sheet — IDENTICAL to .popup.faq (same height for visual continuity) */
.chatbot .popup.faq2 {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: 400px !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 6px 80px rgba(0, 0, 0, 0.06) !important;
    background: var(--cw-gray-0) !important;
    padding: 20px 16px 24px !important;
    z-index: 2 !important;
    animation: cwSlideUpSheet 0.28s ease-out !important;
}
@keyframes slideFromBottom {                                         /* legacy keyframe, kept for safety */
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
/* FAQ detail modal dim — same translucent overlay as category step */
.chatbot #cwFaqDetailModal {
    background: transparent !important;
}
.chatbot #cwFaqDetailModal::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background: rgba(148, 155, 160, 0.45) !important;
    mix-blend-mode: normal !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ---- Popup scroll container ---- */
.popup_scroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Popup title bar ---- */
.popup_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    position: relative;
}
.popup_title h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
    flex: 1;
    text-align: center;
}

/* FAQ category title — left-aligned, 3×3 dot grid icon (spec: 점 그리드 아이콘 18×18,
   좌상단 초록 점 + 나머지 회색 점, "다음" 버튼과 동일 스타일) */
.popup_title.cw-faq-title {
    justify-content: space-between !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    height: auto !important;
}
.popup_title.cw-faq-title h3 {
    flex: 1 !important;
    text-align: left !important;
    font-family: var(--cw-font-base) !important;
    font-size: 17px !important;                 /* spec Body-M-SB */
    font-weight: 600 !important;
    color: var(--cw-gray-12) !important;
    line-height: 150% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
/* 3×3 dot grid icon — green TL, gray others (spec) */
.popup_title.cw-faq-title .cw-faq-title-ic {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='2' cy='2' r='2' fill='%2302983B'/%3E%3Ccircle cx='9' cy='2' r='2' fill='%23AAB1B8'/%3E%3Ccircle cx='16' cy='2' r='2' fill='%23AAB1B8'/%3E%3Ccircle cx='2' cy='9' r='2' fill='%23AAB1B8'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23AAB1B8'/%3E%3Ccircle cx='16' cy='9' r='2' fill='%23AAB1B8'/%3E%3Ccircle cx='2' cy='16' r='2' fill='%23AAB1B8'/%3E%3Ccircle cx='9' cy='16' r='2' fill='%23AAB1B8'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23AAB1B8'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* X close button override for FAQ title (spec: 16×16 black 2px stroke) */
.popup_title.cw-faq-title .modal_close {
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10'/%3E%3Cpath d='M13 3L3 13'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Close button in popup */
.popup_title .modal_close {
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 18px;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

/* Back (prev) button in popup */
.popup_title .modal_prev {
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 20px;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

/* ---- Popup inner (scrollable content) ---- */
.popup_inner {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
/* FAQ category modal — no scroll, no inner padding (sheet has its own padding) */
.chatbot .popup.faq .popup_inner,
.chatbot .popup.faq .popup_scroll {
    flex: 1 1 auto !important;
    padding: 0 !important;
    overflow: hidden !important;       /* hide both vertical and horizontal scroll */
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* ============================================ */
/* History list (drawer) — spec: 276×43 items   */
/* ============================================ */
.history_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;                                /* spec: items fill space, no gap */
}
.history_list li {
    width: 276px;
    height: 43px;
    border-radius: 12px;                   /* spec */
    transition: background 0.15s;
    margin: 0;
}
.history_list li a {
    display: flex;
    align-items: center;                   /* spec: 가운데 세로정렬 */
    width: 100%;
    height: 100%;
    padding: 10px 0 10px 12px;             /* spec */
    font-family: var(--cw-font-base);
    font-size: 15px;                       /* spec Body-S-R */
    font-weight: 400;
    color: var(--cw-gray-9);               /* #4E5257 spec */
    line-height: 150%;
    text-decoration: none;
    /* Single-line ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.history_list li:hover,
.history_list li.active {
    background: var(--cw-gray-2);          /* #EDEFF2 spec selected/active */
}
/* spec: active state changes only bg (--gray-2); text style stays same */

/* ---- Button box (기록 지우기) ---- */
.button_box {
    padding: 12px 0 4px;
    flex-shrink: 0;
}
.button_box .center {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.button_box .btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 28px;
    min-height: 38px;
    line-height: 1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid #ddd;
}
.button_box .btn2.bg_white {
    background: #fff;
    color: #555;
    border-color: #ccc;
}
.button_box .btn2.bg_white:hover {
    background: #f5f5f5;
}
.button_box .btn2.bg_black {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}
.button_box .btn2.bg_black:hover {
    background: #2a2a4e;
}

/* ============================================ */
/* FAQ Category Grid                            */
/* ============================================ */
/* FAQ category grid — 2×3 adaptive (1fr) so all cards fit without scroll */
.faq_list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;     /* adaptive width */
    grid-auto-rows: 1fr !important;                        /* equal-height rows */
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;                           /* no scroll */
}
.faq_list li {
    text-align: center !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    width: 100% !important;                                /* fill grid cell */
    height: 100% !important;
    min-width: 0 !important;
}
.faq_list li::before {
    display: none !important;
}
/* Card — spec: bg --gray-1, 1px solid --gray-2, radius 16, padding 16 */
.faq_list li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--cw-gray-1, #F8F9FA) !important;
    border: 1px solid var(--cw-gray-2) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s !important;
    gap: 12px !important;                       /* spec icon→label gap */
    padding: 16px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;                /* spec: no per-card shadow */
}
/* Selected/active card — bg --gray-2 (spec) */
.faq_list li a:hover,
.faq_list li.active a {
    background: var(--cw-gray-2) !important;
    border-color: var(--cw-gray-2) !important;
}

/* Category icon wrapper */
.faq_list li a .cw-cat-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
}
.faq_list li a .cw-cat-icon svg,
.faq_list li a .cw-cat-icon img {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
    object-fit: contain !important;
}
/* Label — spec Body-XS-SB 13/600 #000 */
.faq_list li a .cw-cat-name {
    display: block !important;
    font-family: var(--cw-font-base) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cw-gray-12) !important;
    line-height: 150% !important;
}
/* Hide any old ::before icons */
.faq_list li a::before {
    display: none !important;
    content: none !important;
}
/* list1 - 비자 (passport - green) */
.faq_list li.list1 a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='10' y='6' width='28' height='36' rx='2' fill='%2316a34a'/%3E%3Crect x='12' y='8' width='24' height='32' rx='1' fill='%2316a34a' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='24' cy='20' r='6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M18 20 h12 M24 14 v12 M20 16 Q24 18 28 16 M20 24 Q24 22 28 24' stroke='%23ffffff' stroke-width='1' fill='none'/%3E%3Crect x='16' y='30' width='16' height='2' fill='%23ffffff'/%3E%3Crect x='16' y='34' width='12' height='2' fill='%23ffffff'/%3E%3C/svg%3E");
}
/* list2 - 취업 (helmet - yellow) */
.faq_list li.list2 a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 30 Q8 14 24 14 Q40 14 40 30 L40 34 L8 34 Z' fill='%23fbbf24'/%3E%3Crect x='20' y='14' width='8' height='6' fill='%23fbbf24' stroke='%23d97706' stroke-width='1'/%3E%3Cpath d='M8 30 Q8 14 24 14 Q40 14 40 30' fill='none' stroke='%23d97706' stroke-width='2'/%3E%3Crect x='6' y='32' width='36' height='4' rx='1' fill='%23d97706'/%3E%3C/svg%3E");
}
/* list3 - 병원 (hospital cross - green) */
.faq_list li.list3 a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='8' y='8' width='32' height='32' rx='4' fill='%2322c55e'/%3E%3Crect x='20' y='14' width='8' height='20' fill='%23ffffff'/%3E%3Crect x='14' y='20' width='20' height='8' fill='%23ffffff'/%3E%3C/svg%3E");
}
/* list4 - 교육 (house/building - red) */
.faq_list li.list4 a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 6 L42 20 L38 20 L38 42 L10 42 L10 20 L6 20 Z' fill='%23ef4444'/%3E%3Crect x='20' y='28' width='8' height='14' fill='%23ffffff'/%3E%3Crect x='14' y='24' width='6' height='6' fill='%23ffffff'/%3E%3Crect x='28' y='24' width='6' height='6' fill='%23ffffff'/%3E%3C/svg%3E");
}
/* list5 - 인권 (book/graduation - blue) */
.faq_list li.list5 a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 18 L24 10 L42 18 L24 26 Z' fill='%232563eb'/%3E%3Cpath d='M12 22 L12 32 Q12 38 24 38 Q36 38 36 32 L36 22' fill='none' stroke='%232563eb' stroke-width='3'/%3E%3Cline x1='42' y1='18' x2='42' y2='30' stroke='%232563eb' stroke-width='2'/%3E%3Ccircle cx='42' cy='32' r='2' fill='%232563eb'/%3E%3C/svg%3E");
}
/* list6 - 기타 (girl/people - pink) */
.faq_list li.list6 a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='18' r='10' fill='%23f9a8d4'/%3E%3Ccircle cx='20' cy='17' r='1.5' fill='%23000'/%3E%3Ccircle cx='28' cy='17' r='1.5' fill='%23000'/%3E%3Cpath d='M20 22 Q24 24 28 22' stroke='%23000' stroke-width='1' fill='none'/%3E%3Cpath d='M14 18 Q14 6 24 6 Q34 6 34 18' fill='%23ec4899'/%3E%3Cpath d='M10 42 Q10 30 24 30 Q38 30 38 42 Z' fill='%23ec4899'/%3E%3C/svg%3E");
}

/* ============================================ */
/* FAQ Detail (faq2) — header + Q. list (spec)  */
/* ============================================ */

/* Header — ← back + category name (left) + X close (spec) */
.popup_title.cw-faq2-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    height: auto !important;
    flex-shrink: 0 !important;
}
.popup_title.cw-faq2-title .modal_prev {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 L9 12 L15 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.popup_title.cw-faq2-title h3 {
    flex: 1 1 auto !important;
    text-align: left !important;
    font-family: var(--cw-font-base) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--cw-gray-12) !important;
    line-height: 150% !important;
    margin: 0 !important;
}
.popup_title.cw-faq2-title .modal_close {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10'/%3E%3Cpath d='M13 3L3 13'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Body — scroll area for question list + bottom fade overlay */
.chatbot .popup.faq2 .cw-faq2-body {
    flex: 1 1 auto !important;
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Question list — overflow-y auto with custom scrollbar */
.chatbot .popup.faq2 .faq2_list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
/* Custom 5px gray capsule scrollbar (spec) */
.chatbot .popup.faq2 .faq2_list::-webkit-scrollbar {
    width: 5px;
}
.chatbot .popup.faq2 .faq2_list::-webkit-scrollbar-track {
    background: transparent;
}
.chatbot .popup.faq2 .faq2_list::-webkit-scrollbar-thumb {
    background: var(--cw-gray-5);
    border-radius: 10px;
    min-height: 60px;
}

/* Each question item — spec: padding 8 0 8 12, gap 4, radius 12, multi-line */
.chatbot .popup.faq2 .faq2_list li {
    width: 100% !important;
    border-radius: 12px !important;
    transition: background 0.15s !important;
    margin: 0 !important;
}
.chatbot .popup.faq2 .faq2_list li a {
    display: flex !important;                    /* Q. label + question text */
    align-items: flex-start !important;
    gap: 4px !important;                          /* spec: Q.와 텍스트 사이 4 */
    padding: 8px 0 8px 12px !important;          /* spec: 좌측만 12 */
    text-decoration: none !important;
    line-height: 150% !important;
    /* Multi-line wrap allowed — spec "말줄임 없도록" */
    white-space: normal !important;
    word-break: break-word !important;
}
.chatbot .popup.faq2 .faq2_list li a::before {
    content: 'Q.' !important;
    flex: 0 0 16px !important;                    /* spec: 16px hug */
    font-family: var(--cw-font-base) !important;
    font-size: 15px !important;                   /* spec Body-S-R */
    font-weight: 400 !important;                  /* spec: not bold */
    color: var(--cw-blue-primary) !important;     /* #004097 spec */
    line-height: 150% !important;
    position: static !important;                  /* override earlier absolute */
}
/* Question text wraps next to Q. label using ::after / inherited via the `a` text node */
.chatbot .popup.faq2 .faq2_list li a {
    font-family: var(--cw-font-base) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--cw-gray-9) !important;           /* #4E5257 spec */
}
/* Selected/hover — spec: bg --gray-2 */
.chatbot .popup.faq2 .faq2_list li:hover,
.chatbot .popup.faq2 .faq2_list li.active {
    background: var(--cw-gray-2) !important;
}

/* Bottom white fade — spec: 28-29px gradient overlay at bottom */
.chatbot .popup.faq2 .cw-faq2-fade {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 29px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--cw-gray-0) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ============================================================
   Disclaimer (v5) — exact match to MO_챗봇 (확인사항) 360×808 spec
   Sections (per spec): 상태바 → 헤더 → 타이틀 → 메시지5 → 구분선 → 체크박스 → 하단버튼
   Token aliases used to avoid duplication:
     --d-bg #EDEFF2  --d-white #FFFFFF  --d-text #2F353A
     --d-bullet #6F767C  --d-divider #D5DADF
     --d-blue #09408A  --d-link #004097  --d-border #AAB1B8
     --d-cancel-border #6F767C  --d-ok-bg #1C2025  --d-ok-disabled #D5DADF
   ============================================================ */
#cwDisclaimer.cw-disc-v5,
#cwDisclaimer.cw-disc-v5 * {
    box-sizing: border-box;
}
#cwDisclaimer.cw-disc-v5 {
    background: #EDEFF2 !important;
    overflow: hidden !important;
    padding: 0 !important;
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
}
/* Root — flex column 3-단 레이아웃: header (top) / content (scroll) / foot (fixed) */
#cwDisclaimer.cw-disc-v5 .cw-disc-root {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: #EDEFF2 !important;
}

/* Content scroll area (title + bullets) — flex 1, scrolls if overflow */
#cwDisclaimer.cw-disc-v5 .cw-disc-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

/* Footer — divider + checkbox + buttons, always visible at bottom */
#cwDisclaimer.cw-disc-v5 .cw-disc-foot {
    flex: 0 0 auto !important;
    padding: 0 16px 24px !important;
    background: #EDEFF2 !important;
}

/* [1] 헤더 — 흰 배경, 16px 패딩, 시계/X 다크 (상태바 제거됨) */
#cwDisclaimer.cw-disc-v5 .cw-disc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    height: 58px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-h-history {
    width: 24px; height: 24px; padding: 0; border: 0; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E") no-repeat center / 22px;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-h-title {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1C2025 !important;
    line-height: 150% !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-h-close {
    width: 16px; height: 16px; padding: 0; border: 0; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10'/%3E%3Cpath d='M13 3L3 13'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* [3] 타이틀 — 32px 16px 패딩, gap 16, 가운데 정렬 */
#cwDisclaimer.cw-disc-v5 .cw-disc-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 32px 16px !important;
    margin: 0 !important;
    text-align: center !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-brand {
    font-family: 'Paperlogy', 'Noto Sans KR', 'Noto Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    color: #09408A !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-heading {
    font-weight: 600 !important;
    font-size: 22px !important;
    color: #000000 !important;
    margin: 0 !important;
    line-height: 150% !important;
}

/* [4] 안내 메시지 — 16px 좌우 패딩, 메시지 사이 24px */
#cwDisclaimer.cw-disc-v5 .cw-disc-list {
    list-style: none !important;
    padding: 0 16px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-list li {
    position: relative !important;
    padding-left: 12px !important;          /* 4px dot + 8px gap */
    margin: 0 !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 150% !important;
    color: #2F353A !important;
    list-style: none !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 10px !important;                   /* align with first text line */
    width: 4px !important;
    height: 4px !important;
    background: #6F767C !important;
    border-radius: 50% !important;
}

/* [5] 구분선 — 1px #D5DADF, 풀폭 (foot 안 padding으로 16px 양옆 자동) */
#cwDisclaimer.cw-disc-v5 .cw-disc-divider {
    border: 0 !important;
    height: 1px !important;
    background: #D5DADF !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* [6] 체크박스 행 — flex 정상 흐름, foot 안 */
#cwDisclaimer.cw-disc-v5 .cw-disc-agree {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 24px 0 !important;              /* 위/아래 24, 좌우는 foot padding */
    margin: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-agree-input {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-agree-box {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    background: #FFFFFF !important;
    border: 1px solid #AAB1B8 !important;
    border-radius: 5px !important;
    position: relative !important;
    transition: background 0.15s, border-color 0.15s !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-agree-input:checked + .cw-disc-agree-box {
    background: #004097 !important;
    border-color: #004097 !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-agree-input:checked + .cw-disc-agree-box::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 3px !important;
    width: 7px !important;
    height: 12px !important;
    border: solid #FFFFFF !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-agree-txt {
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 150% !important;
    color: #004097 !important;
}

/* [7] 하단 버튼 — flex 정상 흐름 (foot 안), gap 8, 1:1 */
#cwDisclaimer.cw-disc-v5 .cw-disc-actions {
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-btn {
    flex: 1 1 0 !important;
    height: 51px !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 150% !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-btn-cancel {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #6F767C !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-btn-cancel:hover { background: #F8F9FA !important; }
#cwDisclaimer.cw-disc-v5 .cw-disc-btn-ok {
    background: #1C2025 !important;
    color: #FFFFFF !important;
    border: 1px solid #1C2025 !important;
}
#cwDisclaimer.cw-disc-v5 .cw-disc-btn-ok:hover:not(:disabled) { background: #000000 !important; }
#cwDisclaimer.cw-disc-v5 .cw-disc-btn-ok:disabled {
    background: #D5DADF !important;
    color: #FFFFFF !important;
    border-color: #D5DADF !important;
    cursor: not-allowed !important;
}

/* When disclaimer is shown, hide chatbot's own header — disclaimer brings its own */
/* Higher specificity (2 IDs + 1 class) — must beat the new
   #chatbot #cwMainHeader { display: flex !important } header rule */
#chatbot.cw-disclaimer-mode #cwMainHeader,
#chatbot.cw-disclaimer-mode .chatbot_toparea#cwMainHeader { display: none !important; }

/* Guide overlay uses a semi-transparent dim — keep the real chat visible
   underneath so users can see what they're being walked through. */

/* ============================================ */
/* Guide Overlay (B-2 spec)
   contents.css lines 667-688 provides base. We override:
   - dim color #2F353A with mix-blend-mode: multiply (spec ★)
   - SVG dotted lines instead of PNG (round dots via stroke-dasharray)
   - Add "다음" gradient-border button (spec [z=6])
   - Hide PNG line images from contents.css since we render SVG
   ============================================ */
.chat_guide { display: none; }
.chat_guide.active,
.chatbot .chat_guide.active {
    display: flex !important;
}

/* Full-cover guide overlay inside floating widget — must beat
   contents.css line 640 .chatbot_toparea { z-index: 1001 } so the main
   header is fully covered. Solid rgba dim (no blend) so child elements
   render cleanly on top. (display: flex is applied via .active rule above) */
.chatbot .chat_guide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    background-color: rgba(20, 24, 28, 0.55) !important;
    mix-blend-mode: normal !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Inner header inside guide — force horizontal layout so 시계/챗봇/X
   are NOT stacked vertically. Higher specificity (#chatbot) so it beats
   the main-header rule which sets white bg. */
#chatbot .chat_guide .chatbot_toparea {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0 16px !important;
    background: transparent !important;        /* dim shows through */
    position: relative !important;
    z-index: 2 !important;
}
/* Inner content (chatbot_talk inside guide) — TRANSPARENT bg so the dim
   shows through (the main #chatbot .chatbot_talk rule sets white bg).
   Higher specificity (#chatbot .chat_guide ...) so it beats the global. */
#chatbot .chat_guide .chatbot_talk {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    height: auto !important;
    background: transparent !important;          /* dim shows through */
}
/* chat_list inside guide also transparent */
#chatbot .chat_guide .chat_list {
    background: transparent !important;
}

/* Hide contents.css's PNG-based dotted line images (we use SVG below) */
.chatbot .chat_guide .ex.ex1::before,
.chatbot .chat_guide .ex.ex2::before,
.chatbot .chat_guide .ex.ex3::before,
.chatbot .chat_guide .ex.ex4::before {
    display: none !important;
}

/* Tooltip text positions — override contents.css mobile-100vh coords for the
   floating widget context. Higher specificity (#chatbot) so it wins. */
#chatbot .chat_guide .ex {
    position: absolute !important;
    z-index: 18 !important;
    color: #FFFFFF !important;
    font-family: var(--cw-font-base) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
    width: auto !important;
}
#chatbot .chat_guide .ex.ex1 {                /* history tooltip — top-left */
    top: 76px !important;
    left: 70px !important;
    width: 153px !important;
    text-align: left !important;
}
#chatbot .chat_guide .ex.ex2 {                /* active pill tooltip — middle */
    top: 284px !important;
    left: 70px !important;
    width: 220px !important;
    text-align: left !important;
}
#chatbot .chat_guide .ex.ex3 {                /* FAQ button tooltip — bottom-left */
    bottom: 130px !important;
    left: 50px !important;
    top: auto !important;
    width: 110px !important;
    text-align: left !important;
}
#chatbot .chat_guide .ex.ex4 {                /* input tooltip — bottom-center */
    bottom: 110px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: 150px !important;
    text-align: center !important;
}

/* Guide header — white circle history button uses designer PNG */
#chatbot .chat_guide .chatbot_toparea .btn_history {
    background-image: url("/gmigrant/images/hmpg/icon_chatbot_history_btn.png") !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border-radius: 0 !important;
    width: 38px !important;
    height: 38px !important;
}
/* Eye icon (img replacement for inline SVG) inside btn_nosee */
#chatbot .chat_guide .btn_nosee img {
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px !important;
    vertical-align: -2px !important;
}

/* SVG dotted guide lines (designer-provided, natural sizes) */
.chatbot .chat_guide .cw-guide-line {
    position: absolute;
    z-index: 17;
    pointer-events: none;
    display: block;
    overflow: visible;
}
/* Line 1 (24×26) — top-left curve: history btn ↘ ex1 text */
.chatbot .chat_guide .cw-guide-line-1 {
    top: 50px;
    left: 45px;
}
/* Line 2 (24×26) — same curve: active pill ↘ ex2 text */
.chatbot .chat_guide .cw-guide-line-2 {
    top: 258px;
    left: 45px;
}
/* Line 3 (24×130) — long L: FAQ btn ↑ then ↗ to ex3 text */
.chatbot .chat_guide .cw-guide-line-3 {
    bottom: 35px;
    left: 22px;
}
/* Line 4 (2×26) — vertical: ex4 text ↓ to input bar */
.chatbot .chat_guide .cw-guide-line-4 {
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
}

/* (cw-guide-next button removed — Figma shows just input bar at bottom) */

/* ============================================ */
/* Confirm Dialog                               */
/* ============================================ */
.chatbot .cw-confirm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chatbot .cw-confirm-box {
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px 18px;
    width: 260px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.chatbot .cw-confirm-box p {
    margin: 0 0 18px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.chatbot .cw-confirm-actions {
    display: flex;
    gap: 8px;
}
.chatbot .cw-confirm-cancel,
.chatbot .cw-confirm-ok {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 9px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.chatbot .cw-confirm-cancel {
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
}
.chatbot .cw-confirm-cancel:hover {
    background: #f5f5f5;
}
.chatbot .cw-confirm-ok {
    border: none;
    background: #1a1a2e;
    color: #fff;
}
.chatbot .cw-confirm-ok:hover {
    background: #2a2a4e;
}

/* ============================================ */
/* Responsive                                   */
/* ============================================ */
/*
    모바일 / 태블릿 portrait — 챗봇 윈도우를 viewport 에 100% 꽉 채움.
    이전엔 좌우 10px, 아래 80px 여백이 남아 페이지 하단 메뉴가 노출되는 문제가 있었음.
    100dvh / 100dvw 는 iOS Safari 의 동적 viewport (주소창 슬라이드 시) 까지 정확히 반영.
    지원 안 되는 브라우저(IE 등)는 바로 위의 100vh / 100vw 가 fallback.

    [KEYBOARD FIX]
    iOS/Android 에서 가상키보드가 올라올 때 100vh/100dvh 는 줄어들지 않아
    fixed 위치인 챗봇이 키보드 위로 밀려 헤더(이력/챗봇/X)와 본문이 화면 밖으로 사라지는
    문제가 있었음.  ChatWidget.js 가 visualViewport API 로 실제 보이는 영역의
    높이(--cw-vh)와 상단 오프셋(--cw-vt)을 px 단위로 주입하므로, 키보드가 떠 있는 동안에도
    챗봇 창은 보이는 영역에 정확히 맞춰 표시된다.
    visualViewport 미지원 브라우저는 var() 기본값(100dvh / 0)을 사용하여 기존 동작 유지.
*/
@media (max-width: 768px) {
    .chatbot {
        position: fixed;
        top: var(--cw-vt, 0px);
        right: 0;
        bottom: auto;
        left: 0;
        width: 100vw;
        width: 100dvw;
        height: 100vh;
        height: 100dvh;
        height: var(--cw-vh, 100dvh);
        max-height: none;
        border-radius: 0;
    }
    /*
        iOS Safari 는 input 의 font-size 가 16px 미만이면 포커스 시 전체 페이지를
        자동 확대(zoom-in) 한다. 이 자동 확대는 input blur 시 자동 복귀되지 않는
        경우가 많고, 그 결과 챗봇을 닫고 메인 화면으로 돌아왔을 때 본문이 확대된
        상태로 굳어 UI 가 일그러져 보이는 문제가 발생한다.
        모바일에서만 16px 로 올려 자동 확대 자체를 차단한다. 디자인 차이는 미미.
    */
    #chatbot .chatbot_talk .search_box input[type="search"],
    #chatbot .chatbot_talk .search_box input[type="text"] {
        font-size: 16px !important;
    }
    /* .chatbot .popup.history is now full-cover; no override needed here */
}

/* ============================================ */
/* LLM_FALLBACK 답변 배지                          */
/* KB 미매칭으로 LLM 일반지식 사용 시 답변 위에 표시  */
/* ============================================ */
.cw-llm-fallback-badge {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    padding: 8px 10px;
    background: #FFF7E0;
    border: 1px solid #F2C94C;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #8B5C00;
}
.cw-llm-fallback-badge .cw-llm-fallback-icon {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.2;
    color: #D89400;
}
.cw-llm-fallback-badge .cw-llm-fallback-text {
    flex: 1 1 auto;
    word-break: keep-all;
}
#cwMessages li.left.cw-llm-fallback .cw-msg-body {
    /* 본문 자체에는 변화 없음 — 배지만 위에 추가됨 */
}
/* LLM Fallback 안내 prefix (사용자 요청 2026-05-28 — "LLM이 답변 중" 짧은 안내문).
   기존 badge 와 차별화: 회색 톤, 작은 글자, 본문 위 inline 표시.
   본문(answer) 에는 부착하지 않고 별도 노드로 표시하여 conversationHistory 오염 방지. */
.cw-llm-fallback-prefix {
    margin: 0 0 6px;
    padding: 4px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    word-break: keep-all;
}