/* ============================================ */
/* 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;
    /* === 신규 시안(서울외국인포털 리뉴얼) 스킨 토큰 === */
    --cw-cta:         #0072CA;   /* 신규 기조색 (전송/테두리/링크/액티브) */
    --cw-cta-dark:    #1D1D1D;   /* 플로팅 버튼/강조 다크 */
    --cw-user-bubble: #D4E5F6;   /* 사용자 말풍선 (신규) */
    --cw-bot-bubble:  #FFFFFF;   /* 봇 말풍선 (신규) */
    --cw-win-grad:    linear-gradient(to bottom, #EFF7FF 0%, #EFF6EF 80%, #FFFFFF 100%);
    --cw-win-radius:  30px;
    /* 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 — 시안: 포털 전역 Pretendard 상속 */
    --cw-font-base: 'Pretendard', 'Noto Sans KR', 'Noto Sans', sans-serif;
    --cw-font-brand: 'Paperlogy', 'Noto Sans KR', 'Noto Sans', sans-serif;
}

/* ---- Floating Button (신규 시안: 다크 말풍선 + AI 뱃지 SVG) ---- */
.cw-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 66px;
    height: 56px;
    border-radius: 0;
    background: transparent url('/images/hmpg/icon_chatbot_fab.svg') no-repeat center / contain;
    color: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    filter: drop-shadow(0 4px 10px rgba(15,175,242,0.20));
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, filter 0.2s;
}
.cw-float-btn:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 6px 16px rgba(15,175,242,0.35));
}
/* 인라인 SVG(구 말풍선 아이콘)는 배경 SVG 로 대체 — 숨김 */
.cw-float-btn svg {
    display: none;
}
/* 시안: 창이 열리면 플로팅 버튼이 다크 X 원형으로 모핑.
   #cwFloatBtn 이 #chatbot 의 뒤쪽 형제로 위치해야 동작한다. */
#chatbot.open ~ .cw-float-btn {
    width: 56px;
    background-image: url('/images/hmpg/icon_chatbot_fab_close.svg');
}

/* 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) — 시안 .chat-window: 360 × min(640px,78vh)
   시안은 .fab-group 내부 absolute(bottom: calc(100%+12px))지만 개발 마크업은 #chatbot 이
   FAB 와 분리돼 있어 fixed 로 등가 재현: FAB(right 40/bottom 40, 닫기버튼 56px) 위 12px. */
.chatbot {
    display: none;
    position: fixed;
    bottom: 108px;                        /* 40(FAB bottom) + 56(닫기버튼) + 12(gap) */
    right: 40px;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: min(640px, 78vh);
    background: var(--cw-win-grad) !important;
    border-radius: var(--cw-win-radius);
    box-shadow: 0 0 5px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.10);
    z-index: 9999;
    overflow: hidden;
    font-family: var(--cw-font-base);
    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: flex-start !important;        /* 시안: 상단 정렬 (아이콘은 padding-top 으로 보정) */
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;                    /* 시안 .chat-head: 고정높이 없음 */
    padding: 16px 20px !important;              /* 시안 .chat-head padding */
    background: transparent !important;       /* 시안: 그라데이션 배경이 헤더까지 비치도록 */
    box-sizing: border-box !important;
    /* h2 를 절대 위치로 가운데 정렬하기 위한 컨테이너 */
    position: relative !important;
}
/* 신규 시안 헤더 — 좌측: 타이틀+부제 블록 / 우측: 새로고침+닫기 */
#chatbot #cwMainHeader .cw-header-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;                        /* 시안 p margin-top:4px */
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
#chatbot .chatbot_toparea h2,
#chatbot #cwMainHeader h2 {
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1C2025 !important;
    line-height: 1.5 !important;                /* 시안 */
    /* 시안: 좌측 정렬 (구 절대중앙 해제) */
    position: static !important;
    transform: none !important;
    pointer-events: auto !important;
}
#chatbot #cwMainHeader .cw-header-sub {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1C2025 !important;
    line-height: 1.5 !important;                /* 시안 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
/* 우측 액션 묶음 (새로고침 + 닫기) */
#chatbot #cwMainHeader .cw-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
    padding-top: 4px !important;                /* 시안 .ch-actions */
}
#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: 22px !important;
    height: 22px !important;
}
/* (구) 좌측 버튼 묶음 — 이력 버튼 임시 주석으로 미사용. 잔존해도 무해. */
#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;
}
/* 새로고침 버튼 — 인라인 SVG(원형 화살표). PNG 미배포로 404 나던 것을 인라인으로 대체. */
#chatbot .chatbot_toparea .btn_refresh,
#chatbot #cwMainHeader .btn_refresh {
    padding: 0 !important;
    border: 0 !important;
    cursor: pointer !important;
    background: transparent
        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='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 22px 22px !important;
}
/* 채팅뷰 헤더 — 기록/닫기 버튼 아이콘 (기존 배경 누락으로 안 보이던 것 보강. disclaimer 헤더 SVG 재사용) */
#chatbot #cwMainHeader .btn_history {
    padding: 0 !important;
    border: 0 !important;
    cursor: pointer !important;
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C2025'%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 !important;
    background-size: 22px 22px !important;
}
#chatbot #cwMainHeader .btn_close {
    padding: 0 !important;
    border: 0 !important;
    cursor: pointer !important;
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C2025' 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 !important;
    background-size: 22px 22px !important;    /* 시안 .ch-ico contain(22px) */
}

/* ============================================ */
/* Mid Area (Chat body)                         */
/* ============================================ */
.chatbot_midarea {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: transparent;       /* 시안: 창 그라데이션 노출 */
}

/* ---- 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: transparent !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: transparent !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;
    /* typing(형제 div)이 ul 바로 아래 붙으므로 ul 하단 패딩 제거 —
       마지막 말풍선↔typing 간격을 li margin 16px(시안값)만 남긴다 */
    padding-bottom: 0 !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 !important;          /* 전역 .date{padding-left:22px} 무력화 */
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    font-size: 13px !important;
    text-align: center !important;
    color: #56595E !important;         /* 시안: 배경 없는 가운데 날짜 텍스트 */
    border-radius: 0 !important;
    /* table.css 전역 .date{background:url(icon-line.svg)} 가 background-color 만
       덮은 기존 규칙을 뚫고 아이콘으로 비쳐 보이던 문제 → 배경 전체 제거. */
    background: none !important;
}
#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: 16px;                      /* 시안 .chat-msg margin-bottom */
    padding: 12px 14px;                       /* 시안 .msg-bubble padding */
    display: block;
    width: fit-content;
    font-size: 13px;
    color: #1d1d1d;                           /* 시안 본문색 */
    list-style: none;
}
#chatbot .chatbot_talk .chat_list .left {
    float: left;
    border-radius: 0 16px 16px 16px;
    background-color: var(--cw-bot-bubble);   /* 시안: 봇 말풍선 흰색 */
}
/* 추천 질문 칩은 답변(흰색)과 구분되도록 연파랑 틴트 유지 */
#chatbot .chatbot_talk .chat_list .left.question {
    cursor: pointer;
    background-color: var(--cw-blue-sub-2);   /* #E8F2FD */
}
#chatbot .chatbot_talk .chat_list .right {
    margin: 0 0 16px;                         /* 시안 말풍선 간격 16px (추가 상단 여백 없음) */
    float: right;
    border-radius: 16px 16px 1px 16px;        /* 시안 사용자 말풍선 라운드 */
    background-color: var(--cw-user-bubble);  /* #D4E5F6 */
}
#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('/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('/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;
}
/* 시안: 환영 메시지 상단의 AI 아바타 아이콘 (chatbot-ai-prof.svg — 봇 말풍선 아바타와 통일) */
#chatbot .cw-empty-banner::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin: 8px 0 8px;                /* 시안 .chat-msg gap: 8px */
    background: url('../img/layout/chatbot-ai-prof.svg') no-repeat left center / contain;
}
/* 시안: 환영 문구를 봇 말풍선형(흰 배경 + 방향성 radius)으로 */
#chatbot .cw-empty-banner .txt {
    display: inline-block;
    padding: 12px 14px;
    background: var(--cw-gray-0);
    border-radius: 0 16px 16px 16px;
    box-shadow: 0 2px 8px rgba(15, 175, 242, 0.08);
    max-width: 286px;                 /* 시안 봇 말풍선 상한 */
    font-size: 13px;                  /* 시안 .msg-bubble */
    font-weight: 400;
    line-height: 1.5;
    color: #1d1d1d;
    word-break: break-word;
}
/* 시안 전환(2026-07-06): 인사말은 시안의 '첫 봇 말풍선'이므로 대화 시작 후에도 상단에 유지.
   (구 동작: cw-has-conversation 시 display:none — 필요 시 아래 주석 해제로 복귀)
#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: fit-content !important;               /* 시안: 내용폭 말풍선 (풀폭 아님) */
    max-width: 286px !important;                 /* 시안 .msg-bubble max-width */
    box-sizing: border-box !important;
    padding: 12px 14px 32px 14px !important;     /* 시안 12/14 + bottom 여유: 복사 버튼 자리 */
    margin-top: 32px !important;                 /* 아바타 24 + gap 8(시안) — 행간은 li margin-bottom 16 */
    word-break: break-word !important;
    white-space: normal !important;              /* cw-msg-body 안에서 처리 */
    line-height: 150% !important;
}
/* 시안: 봇 말풍선 좌상단 밖(그라디언트 위)에 AI 아바타 표시 — CSS-only(appendMessage 무변경) */
#chatbot .chatbot_talk .chat_list li.left:not(.question)::before {
    content: '';
    position: absolute;
    top: -32px;                                  /* 아바타 24 + 시안 gap 8 */
    left: 0;
    width: 24px;
    height: 24px;
    background: url(../img/layout/chatbot-ai-prof.svg) no-repeat center / contain;
}
/* 본문 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: var(--cw-cta) !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: #0061AD !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("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") 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;
}
/* 복사 직후 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: 264px !important;                 /* 시안 .chat-msg.me .msg-bubble max-width */
}

/* ---- 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 — 시안(.msg-typing): 흰 말풍선 + "답변을 생성하고 있습니다" + 회전 스피너.
   위치: #cwScroll 내부, 메시지 리스트 바로 뒤 — 시안처럼 마지막 말풍선 '바로 아래' 대화 흐름에 표시. ---- */
#chatbot .chat_typing {
    clear: both;                               /* 메시지 li float 해제 후 아래 줄에 배치 */
    margin: 0 16px 16px;                       /* 좌우 16 = 메시지 영역 패딩과 정렬 */
    padding: 12px 14px;                        /* 시안 .msg-bubble padding */
    display: none;
    flex-shrink: 0;
    width: fit-content;                        /* 내용폭 말풍선 */
    max-width: 286px;
    align-self: flex-start;
    background: var(--cw-gray-0);
    border-radius: 0 16px 16px 16px;   /* 봇 말풍선과 동일한 방향성 radius */
    box-shadow: 0 2px 8px rgba(15, 175, 242, 0.08);
}
#chatbot .chat_typing.show {
    display: flex;
    flex-direction: column;                    /* 시안 .msg-typing: 문구 위 / 스피너 아래 */
    align-items: flex-start;
    gap: 8px;
}
#chatbot .chat_typing .typing-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #000;                               /* 시안 .typing-text */
}
/* 입력 언어 감지 전(라틴 모호)엔 문구를 숨기고 스피너만 노출 — 엉뚱한 언어 깜빡임 방지 */
#chatbot .chat_typing .typing-text.cw-typing-hidden { display: none; }
#chatbot .chat_typing .typing-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: url(../img/layout/chatbot-loading.svg) no-repeat center / contain;
    animation: cw-loading-spin 0.8s steps(8, end) infinite;
}
@keyframes cw-loading-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #chatbot .chat_typing .typing-spinner { animation: none; }
}

/* ---- 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 {
    /* 신규 시안: 흰 캡슐 + 1px #0072CA 솔리드 테두리, 알약형(74px) */
    width: auto !important;
    height: 46px !important;                     /* 시안 .ci-box: 30(input)+7*2(padding)+2(border) */
    margin: 0 !important;
    padding: 0 !important;
    background: var(--cw-gray-0) !important;
    border: 1px solid var(--cw-cta) !important;
    border-radius: 74px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 20px !important;
    padding-right: 8px !important;
    position: relative !important;
}
/* FAQ 아이콘 — 시안 .ci-box 에는 좌측 아이콘이 없음(입력+전송뿐). 사용자 요청(2026-07-06)으로 숨김.
   칩 패널은 입력창 포커스로 열림. 마크업/핸들러는 보존(재도입 대비). */
#chatbot .chatbot_talk .search_box .btn_faq {
    display: none !important;
    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 — faq 아이콘 옆 군더더기 세로선("|")이라 숨김 */
#chatbot .chatbot_talk .search_box .btn_faq::after {
    content: '' !important;
    display: none !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 0 !important;      /* FAQ 아이콘 숨김 — 시안: 캡슐 padding-left 20px 만 */
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    font-family: var(--cw-font-base) !important;
    font-size: 14px !important;                  /* 시안 .ci-box input */
    color: #1d1d1d !important;
    border-radius: 0 !important;
}
#chatbot .chatbot_talk .search_box input::placeholder {
    color: #818892 !important;                   /* 시안 placeholder */
}
/* 시안 .ci-box input:focus — 키보드 포커스 가시화 */
#chatbot .chatbot_talk .search_box input:focus {
    outline: 3px dotted rgb(55, 55, 245) !important;
    outline-offset: 0 !important;
}
/* Send button (신규 시안: 파란 원 #0072CA + 흰 위쪽 화살표, 30px/아이콘 14px) */
#chatbot .chatbot_talk .search_box .btn_send {
    position: static !important;
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: var(--cw-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='6'/%3E%3Cpolyline points='5 13 12 6 19 13'/%3E%3C/svg%3E") no-repeat center / 14px !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    margin-right: 0 !important;                  /* 시안: 캡슐 padding-right 8px 만으로 여백 */
    transition: background-color 0.15s !important;
}
#chatbot .chatbot_talk .search_box .btn_send:hover {
    background-color: #0061AD !important;
}
#chatbot .chatbot_talk .search_box .btn_send:disabled {
    background-color: var(--cw-gray-5) !important;
    cursor: not-allowed !important;
}

/* ---- 추천질문 해시태그 칩 (시안 .chat-faq — 입력창 포커스 시 입력영역 위에 노출)
   데이터는 qnaList.json 으로 #cwChips 에 렌더. .on 토글은 ChatWidget.js. */
#chatbot #cwSearchWrap .chat-faq {
    display: none;
    flex-wrap: wrap;
    gap: 10px 7px;
    margin: 0 0 20px;               /* 시안 margin-bottom */
    padding: 0;
    list-style: none;
    max-height: 96px;               /* 칩 2줄 상한 — 모바일 키보드와 겹침 완화 (시안엔 없음, 방어) */
    overflow-y: auto;
}
#chatbot #cwSearchWrap.on .chat-faq {
    display: flex;
}
/* 칩 노출 상태: 시안처럼 입력영역이 흰 solid + 상단 라운드로 전환 */
#chatbot #cwSearchWrap.on {
    background: var(--cw-gray-0) !important;
    border-radius: 16px 16px 0 0;
}
#chatbot #cwSearchWrap .chat-faq a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 40px;
    background: #EFF7FF;
    color: #004CAF;
    font-size: 14px;
    line-height: 1.5;                /* 시안 */
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s;
}
/* '#' 접두는 CSS 로만 표기 — 질문 텍스트/전송 페이로드 오염 방지 (‹ 뒤로 칩 제외) */
#chatbot #cwSearchWrap .chat-faq a::before {
    content: '#';
}
#chatbot #cwSearchWrap .chat-faq a.cw-chip-back::before {
    content: '';
}
#chatbot #cwSearchWrap .chat-faq a.cw-chip-back {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
}
/* 시안 hover: 배경 유지 + 볼드 */
#chatbot #cwSearchWrap .chat-faq a:hover,
#chatbot #cwSearchWrap .chat-faq a:focus {
    font-weight: 700;
}

/* ============================================ */
/* 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-cta) !important;              /* 시안 기조색 */
    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: transparent !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: transparent !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: transparent !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: transparent !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: var(--cw-cta) !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: var(--cw-cta) !important;
    border-color: var(--cw-cta) !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: var(--cw-cta) !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("/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) {
    .cw-float-btn {
        bottom: 16px;
        right: 16px;
    }
    .chatbot {
        position: fixed;
        top: var(--cw-vt, 0px);
        right: 0;
        bottom: auto;
        left: 0;
        width: 100vw;
        width: 100dvw;
        max-width: none;      /* base 의 calc(100vw-32px) 해제 — 미해제 시 우측 32px 띠 잔존 */
        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;
    /* flex 아이템 기본 min-width:auto 는 min-content 아래로 줄지 않아, 끊을 수 없는 긴 런이
       배지 박스를 뚫고 나간다. 0 으로 낮춰 아래 줄바꿈 규칙이 실제로 먹게 한다. */
    min-width: 0;
}
/* [2026-08-28] 줄바꿈 규칙 — 종전엔 여기에 word-break: keep-all 만 있었다.
   keep-all 은 한국어 어절을 보존하려고 넣은 값이지만, CJK 에서는 "글자 사이 줄바꿈 전면 금지"로
   동작한다. 중국어/일본어는 단어 사이 공백이 없어 문장 전체가 하나의 끊을 수 없는 런이 되고,
   그 결과 노란 배지 박스 밖으로 텍스트가 넘쳐 나갔다(일본어/중국어 답변에서 리포트됨).
   → 기본은 일반 줄바꿈, 한국어일 때만 keep-all. lang 속성은 ChatWidget.js 가 서버가 감지한
     입력 언어로 채운다(스크린리더 발음에도 도움). */
.cw-llm-fallback-badge .cw-llm-fallback-text,
.cw-llm-fallback-prefix {
    word-break: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;           /* 구형 브라우저 별칭 */
}
.cw-llm-fallback-badge .cw-llm-fallback-text[lang="ko"],
.cw-llm-fallback-prefix[lang="ko"] {
    word-break: keep-all;            /* 한국어만 어절 유지 */
}
/* 면책은 종전에 word-break 지정이 없었다(=브라우저 기본). 한국어 줄바꿈 모양을 바꾸지 않도록
   word-break 는 건드리지 않고, 긴 URL 이 말풍선을 넘지 않게 하는 보호만 추가한다. */
#cwMessages li.left .cw-msg-disclaimer {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
#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;
    /* 줄바꿈 규칙은 위 공통 블록에서 언어별로 지정한다 (keep-all 은 한국어에만). */
}
/* 정확성 면책 — 답변 말풍선 하단(본문과 분리 노드).
   서버가 입력 언어로 결정론적 주입한 텍스트(응답 disclaimer 필드)를 렌더. 본문/히스토리 미포함.

   [2026-07-29] 본문과 동일한 서체로 환원.
     이 규칙은 작성 당시엔 사실상 비활성이었다 — 관리자 system_prompt 가 등록돼 있으면 서버가
     disclaimer 를 null 로 내려보내서, 실제 화면의 면책은 LLM 이 답변 본문(.cw-msg-body) 안에 쓴
     평범한 텍스트였기 때문이다. 면책을 서버 주입으로 되돌리자 이 규칙이 처음으로 화면에 적용되면서
     구분선 + 작은 회색 글씨로 바뀌어 "면책 스타일이 달라졌다" 는 리포트가 나왔다.
     → 본문과 같은 크기·색으로 맞추고, 종전 LLM 이 넣던 빈 줄 1개만 간격으로 남긴다. */
#cwMessages li.left .cw-msg-disclaimer {
    margin: 1em 0 0;                             /* 종전 본문 끝의 빈 줄 1개와 동일한 간격 */
    padding: 0;
    font-size: inherit;
    line-height: 150%;
    color: inherit;
    word-break: break-word;
}

/* 출처칩 — 답변 근거가 된 CMS 콘텐츠로 이동하는 링크(본문/히스토리 미포함, 별도 노드).
   서버 citations 의 url 이 있는 항목만 최대 3건 노출. 면책 문구 바로 위에 위치한다. */
#cwMessages li.left .cw-msg-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    padding: 6px 0 0;
    border-top: 1px solid #eef0f2;
}
#cwMessages li.left .cw-msg-sources .cw-src-label {
    flex: 0 0 auto;
    margin-right: 2px;
    font-size: 11px;
    line-height: 1.5;
    color: #9aa1a9;
}
#cwMessages li.left .cw-msg-sources .cw-src-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid #d9dee3;
    border-radius: 12px;
    background: #f7f9fb;
    font-size: 11px;
    line-height: 1.5;
    color: #4a5158;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#cwMessages li.left .cw-msg-sources .cw-src-chip:hover,
#cwMessages li.left .cw-msg-sources .cw-src-chip:focus {
    border-color: #1f6feb;
    background: #eef4ff;
    color: #1f6feb;
    text-decoration: underline;
}
#cwMessages li.left .cw-msg-sources .cw-src-type {
    flex: 0 0 auto;
    color: #9aa1a9;
}