@charset "UTF-8";
/* ============================================================
   노란우산 AI 챗봇 (퍼블 원본: kbiz-publishing/resources/css/main.css + intro.css)
   - 퍼블 전역 규칙(*, html/body, reset)은 .chat-panel 스코프로 한정
   - 이미지 경로: ../images/ → /assets/img/chat/
   - 파일 끝 [yuma 통합 레이어]에서 도킹/반응형/런처 버튼 처리
============================================================ */

/* 퍼블 변수 (챗봇 스코프 한정) */
.chat-panel,
.chat__open-button {
    /* chat 너비 */
    --chat-width: 380px;
    --chat-height: 670px;

    /* color */
    --color-primary: #FFD200;
    --color-primary-dark: #EBB400;
    --color-black: #111111;
    --color-black2: #1A1A2E;
    --color-white: #FFFFFF;
    --color-blue: #0063E3;
    --color-text-blue: #4777AE;
    --color-text-blue2: #3A8CF8;
    --color-orange: #D19705;
    --color-green: #63908C;
    --color-darkblue: #143D6E;
    --color-text: #111111;
    --color-text2: #2E3338;
    --color-gray: #646D78;
    --color-gray2: rgba(17, 17, 17, 0.5);
    --color-gray3: #959DA8;
    --color-gray4: #848E9A;
    --color-gray5: #B1B6BF;
    --color-disabled: rgba(17, 17, 17, 0.13);

    /* bg */
    --bg-lightgray: #F4F5F6;
    --bg-lightgray2: #E3E5E8;
    --bg-lightblue: #E7F2FE;
    --bg-blue: #CCE8FB;
    --bg-blue2: #D6EAFF;
    --bg-orange: #FFF3E0;
    --bg-pink: #F9D4CD;
    --bg-lightpink: #FEF3F1;
    --bg-primary-hover: rgb(255, 218, 51) !important;

    /* border */
    --border-lightgray: #CDD0D6;
    --border-lightgray2: #E3E5E8;
    --border-blue: #C0DAFC;
    --border-btn: #A5ACB5;
}

/* 퍼블 공통(전역 * / reset을 챗봇 스코프로 한정) */
.chat-panel {
    font-family: "PretendardGOV", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}
.chat-panel *,
.chat-panel *::before,
.chat-panel *::after {
    box-sizing: border-box;
}
.chat-panel * {color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.5;word-break:break-all;padding:0;margin:0;}
.chat-panel ol,
.chat-panel ul,
.chat-panel li {list-style:none;}
/* 요소 리셋은 :where()로 명시도를 0으로 낮춘다 — 컴포넌트 클래스(.chat-composer__submit 등)가
   배경색을 정상적으로 이기도록. (스코프 리셋이 (0,1,1)로 컴포넌트 (0,1,0)를 덮어
   전송 버튼이 활성화 시 투명/흰 배경으로 보이던 문제 수정) */
.chat-panel :where(button) {border:0 none;background-color:transparent;cursor:pointer;font-family:inherit;}
.chat-panel :where(textarea) {resize:none;font-family:inherit;}
.chat-panel :where(a) {text-decoration:none;color:inherit;}
.chat-panel :where(img) {border:0 none;vertical-align:middle;}
.chat-panel .visually-hidden {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space: nowrap;}
.chat-panel .cursor-pointer {cursor:pointer!important;}
.chat-panel .cursor-pointer:disabled {cursor:default!important;}
.chat-panel .ellipsis {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-panel .ellipsis2 {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow: hidden;text-overflow:ellipsis;}
.chat-panel [hidden],
.chat-panel[hidden],
.js-chat-open[hidden] {display: none !important;}

/* ============================================================
   퍼블 본문 (원본: main.css — 2026-07-27 전문 싱크)
   · .chat 로 시작하지 않는 셀렉터는 .chat-panel 스코프로 한정(사이트 오염 방지)
   · html/body 등 전역 규칙은 제외, 이미지 경로만 /assets/img/chat/ 으로 치환
============================================================ */

/* 챗봇 디자인 */
/*
 * 전체 챗봇
 *
 * 1행: 헤더 고정 높이
 * 2행: 남은 높이를 사용하는 대화 영역
 * 3행: 입력창 내용에 따라 자동으로 늘어나는 하단 영역
 */
/* 챗봇 열기 버튼 */
.chat__open-button{position:fixed;right:40px;bottom:109px;z-index:500;}
.chat__open-button.active{display:none;}
.chat__open-button > button{position:relative;display:flex;align-items:center;justify-content:flex-end;width:74px;height:64px;padding:0;overflow:hidden;color:var(--color-black);white-space:nowrap;border:0;border-radius:33.6px 33.6px 0 33.6px;background:linear-gradient(159.86deg, #ffff68 16.21%, #ffdd00 64.45%);box-shadow: 0 12px 26.4px 0 #956d0036, 0 0 6px 0 #72620033;transition: width 0.85s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.58s ease-in-out, box-shadow 0.5s ease 0.26s;}
.chat__open-button > button::before{content:"노란우산 AI 챗봇이 도와드릴까요?";position:absolute;left:20px;font-size:16px;font-weight:500;opacity:0;transform:translateX(12px);transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);z-index:2;}
.chat__open-button > button::after{content:"↑";position:absolute;right:8px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;color:var(--color-white);font-size:24px;font-weight:300;line-height:1;border-radius:50%;background:var(--color-black);opacity:0;transform:translateX(32px);transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);z-index:2;}
.chat__open-button .chat-open__surface{position:absolute;inset:2px;width:auto;height:auto;border-radius:32px;background:var(--color-white);opacity:0;transition:opacity 0.4s ease;z-index:1;}
.chat__open-button .chat-ico-box{position:relative;z-index:2;width:74px;height:64px;flex-shrink:0;transform:translateX(0);transition:transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);}
.chat__open-button .chat-ico-box::before{content:url("/assets/img/chat/ico_btn_charc.svg");display:block;width:74px;height:64px;}
.chat__open-button:hover > button,
.chat__open-button > button:focus-visible{width:min(309px, calc(100vw - 32px));border-radius:34px;background:linear-gradient(91.75deg, #ffe74d 28.3%, #ffd466 96.6%);box-shadow: 0 20px 40px 0 #ffdd0026, 0 10px 20px 0 #dfa9201a;}
.chat__open-button:hover > button .chat-open__surface,
.chat__open-button > button:focus-visible .chat-open__surface{opacity:1;transition-delay:0.34s;}
.chat__open-button:hover > button .chat-ico-box,
.chat__open-button > button:focus-visible .chat-ico-box{transform:translateX(-309px);}
.chat__open-button:hover > button::before,
.chat__open-button > button:focus-visible::before,
.chat__open-button:hover > button::after,
.chat__open-button > button:focus-visible::after{opacity:1;transform:none;transition-delay:0.43s;}
/* 1. 상단 */
/*.chat-panel {position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);}!* 퍼블리싱용 *!*/
.chat-panel{position:fixed;bottom:109px;right:40px;z-index:500;}/* FIGMA용 */
.chat-panel{display:grid;grid-template-rows:auto minmax(0, 1fr) auto;width:min(var(--chat-width), calc(100vw - 32px));height:min(var(--chat-height), calc(100vh - 32px));box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.05);border-radius:28px;}
.chat-panel.is-closed{display:none;}
.chat-panel .guide-chat-open-wrap{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.chat-panel .guide-chat-open{padding:12px 18px;border-radius:24px;background-color:var(--color-black);color:var(--color-white);font-size:14px;font-weight:600;box-shadow:0 8px 20px rgba(36, 36, 35, 0.18);}
/* 서비스 원할X */
.chat-panel.is-unavailable{ grid-template-rows: auto minmax(0, 1fr);}
.chat-panel.is-unavailable .chat-bottom{display:none;}
/* 인트로 */
.chat-header{display:grid;grid-template-columns:52px minmax(0, 1fr) 52px;align-items:center;height:60px;padding:18px 20px;background-color:var(--color-white);border-radius:28px 28px 0 0;}
.chat-header > .chat-header-right{display:flex;align-items:center;justify-self: end;gap:12px;}
.chat-header__title{position:relative; font-size:16px;font-weight:700;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:visible;}
.chat-header__title::before{content:''; position: absolute; top: -10px; left: 50%; transform: translateX(52px); width:37px; height:16px; background:url('https://image.kbiz.or.kr/yuma/icon/ico_chatbot_beta.svg') no-repeat;}
.chat-header__button{display :flex;align-items: center;justify-content: center;width:20px;height:20px;background-size:20px 20px;background-position: center center;}
.chat-header__button.ico-before-chat{background-image:url(/assets/img/chat/ico_before_chat.svg);background-repeat: no-repeat;}
.chat-header__button.ico-close{background-image:url(/assets/img/chat/ico_close.svg);background-repeat: no-repeat;}
.chat-header__back{position:relative;width:20px;height:20px;}
.chat-header__back::before{content:"";position:absolute;left:7px;top:5px;width:8px;height:8px;border-left:2px solid var(--color-text);border-bottom:2px solid var(--color-text);transform:rotate(45deg);}
.chat-header__back:disabled{cursor:default;opacity:0;pointer-events:none;}
.chat-ico-box{display:flex;width:20px;height:20px;background-size:100%;background-repeat:no-repeat;background-position:center center;}
.chat-ico-box.br-round{border-radius:50%;}
.chat-ico-box.br-round:hover{background-color:var(--bg-lightgray);}
.chat-ico-box.shadow-ver{box-shadow: 0 8px 30px 0 rgba(36, 36, 35, 0.15), 0 3px 6px 0 rgba(36, 36, 35, 0.08);}
.chat-ico-box.size-12{width:12px;height:12px;}
.chat-ico-box.size-20{width:20px;height:20px;}
.chat-ico-box.size-22{width:22px;height:22px;}
.chat-ico-box.size-24{width:24px;height:24px;}
.chat-ico-box.size-36{width:36px;height:36px;}
.chat-ico-box.size-60{width:60px;height:60px;}
.chat-ico-box.size-138{width:138px;height:138px;}
.chat-ico-box.bg-size16{background-size:16px 16px;}
.chat-ico-box.bg-size24{background-size:24px 24px;}
.chat-ico-box.bg-gray{background-color:var(--color-gray);}
.chat-ico-box.bg-gray:hover{background-color:var(--color-gray3)}
.chat-ico-box.ico-umbrella{background-image:url(/assets/img/chat/ico_umbrella.svg);}
.chat-ico-box.ico-download{background-image:url(/assets/img/chat/ico_download.svg);}
.chat-ico-box.ico-notice{background-image:url(/assets/img/chat/ico_notice.svg);}
.chat-ico-box.ico-character{background-image:url(/assets/img/chat/counselor_ico_138.svg);}
.chat-ico-box.ico-reset{background-image:url(/assets/img/chat/ico_reset.svg);}
.chat-ico-box.ico-arrow-right-blue{background-image:url(/assets/img/chat/ico_arrow_right_blue.svg);}
.chat-ico-box.ico-arrow-down{background-image:url(/assets/img/chat/ico_arrow_down.svg);background-size:14px 16px;}
.chat-ico-box.ico-prev{background-image:url(/assets/img/chat/ico_prev.svg);background-size:14px 16px;}
.chat-ico-box.ico-clock{background-image:url(/assets/img/chat/ico_before_clock.svg);}
/* 2. 하단 */
.chat-bottom{padding:10px 16px 28px;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 8.2%);border-radius:0 0 28px 28px;}
.chat-form{
    border: 2px solid transparent;
    border-radius: 29px;
    background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
            90deg,
            rgba(255, 231, 77, 1),
            rgba(255, 212, 102, 1)
    ) border-box;

    box-shadow: 0 8px 20px rgb(255 212 102 / 24%);
}
.chat-composer{display:flex;align-items:center;gap:16px;padding:11px 10px 10px 20px;}
.chat-composer.is-multiline{align-items: center;}
.chat-composer__textarea{flex: 1 1 auto;min-width: 0;width: 100%;height: 45px !important; min-height: 24px;max-height: 63px;margin: 0;overflow-y: hidden;resize: none;color: var(--color-text);background: transparent;border: 0;outline: 0;font-size: 14px;font-weight:500;}
.chat-composer__textarea::placeholder{color: var(--color-gray5);}
.chat-composer__textarea:focus::placeholder{opacity:0;}
.chat-bottom__notice{text-align:center;margin-top:8px;font-size:11px;font-weight:400;color:var(--color-gray2);}
.chat-bottom__notice > span{color:var(--color-text);}
.chat-bottom__notice strong{font-weight:700;}
/* 전송 버튼 */
.chat-panel [hidden]{display: none !important;}
.chat-composer__submit{display: flex;align-items: center;justify-content: center;width:36px;height:36px;flex-shrink:0;border-radius: 50%;background-color:var(--color-black);background-image: url(/assets/img/chat/ico_arrow_up_white.svg);background-position: center center;background-repeat: no-repeat;background-size: 24px 24px;}
.chat-composer__submit:disabled{background-color:var(--color-disabled);cursor:default;}
.chat-composer__stop{display: flex;align-items: center;justify-content: center;width:36px;height:36px;flex-shrink:0;border-radius: 50%;background-color:var(--color-black);background-image: url(/assets/img/chat/ico_arrow_stop_white.svg);background-position: center center;background-repeat: no-repeat;background-size: 12px 12px;}
.chat-composer__stop:disabled{background-color:var(--color-disabled);cursor:default;}
/* 3. 대화영역 */
.chat-content-frame{position: relative;min-height: 0;overflow: hidden;}
.chat-content{height: 100%;min-height: 0;overflow-x: hidden;overflow-y: auto;padding: 24px 20px 12px;overscroll-behavior: contain;scroll-behavior: smooth;}
.chat-content-overlay{position: absolute;inset: 0;z-index: 10;pointer-events: none;}
/* 전체 인트로가 재생되는 동안에는 content-frame의 이전 기록 버튼을 숨깁니다. */
.chat-content-frame:has(.chat-intro-screen:not([hidden])) #chatFixedBefore{display: none !important;}
.chat-fixed__btn{position: absolute;pointer-events: auto;z-index: 10;}
.chat-fixed__btn--recent{left: 50%;bottom: 24px;transform: translateX(-50%);}
.chat-fixed__btn--before{right: 20px;bottom: 24px;}
.chat-content.al-center{display:flex;align-items:center;justify-content:center;}
.chat-error{display:flex;align-items:center;justify-content:center;height:100%;}
/*  챗 바텀시트 */
.chat-sheet{position:absolute;inset:0;z-index:300;display:flex;align-items:flex-end;border-radius:28px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.25s ease, visibility 0.25s ease;}
.chat-sheet.active{opacity:1;visibility:visible;pointer-events:auto;}
.chat-sheet__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0, 0, 0, 0.42);cursor:default;opacity:0;transition:opacity 0.25s ease;}
.chat-sheet.active .chat-sheet__backdrop{opacity:1;}
.chat-sheet__panel{position:relative;z-index:1;width:100%;max-height:calc(100% - 60px);overflow-y:auto;padding:24px 24px 34px;background:var(--color-white);border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);}
.chat-sheet.active .chat-sheet__panel{transform:translateY(0);}
.chat-sheet__header{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.chat-sheet__title{font-size:20px;font-weight:600;width:calc(100% - 24px);text-align:left;}
.chat-sheet__close{position:relative;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:url(/assets/img/chat/ico_close.svg) center center no-repeat;background-size:20px;}
.chat-sheet__body{margin-top:8px;}
.chat-sheet__text{font-size:12px;color:var(--color-gray4);}
.chat-sheet__list{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-left:18px;list-style:disc;}
.chat-sheet__list > li{font-size:12px;color:var(--color-text);}
.chat-sheet__action{width:100%;margin-top:28px;}
.chat-sheet--action .chat-sheet__backdrop{background:transparent;}
.chat-sheet--action .chat-sheet__panel{padding:12px 16px 18px;}
.chat-sheet--action .chat-sheet__body{margin-top:0;}
.chat-message + .chat-message{margin-top:16px;}
.chat-message.chat-message--assistant + .chat-message.chat-message--user{margin-top:40px;}
/* 간격 */
.chat-sheet__body > .line-list{margin-top:28px;}
/* 바텀 */
.chat-sheet__bottom{padding:40px 0 0;}
.chat-sheet__bottom > .chat-common__btn{flex:1;width:100%;}
/* 메시지 */
.chat-message__bubble{width: fit-content;border-radius:16px;padding:12px;position:relative;background-color:var(--bg-lightgray);}
.chat-message__bubble.size-whole{width: 100%;}
.chat-message__bubble.bg-orange{background-color:var(--bg-orange);}
.chat-message__bubble.bg-pink{background-color:var(--bg-lightpink);}

.chat-message__text{}
.chat-message__text > p{font-size:14px;font-weight:400;word-break:keep-all;}
.chat-message__text .c-notice-wrap{padding-top:10px;}
.chat-message__text > .typing-indicator + *{margin-top: 8px;}
.chat-panel .c-notice-wrap.bt-line{border-top:1px solid var(--border-lightgray2);}
/* 사용자 메시지 */
.chat-message--user{display:flex;justify-content:flex-end;}
.chat-message--user .chat-message__bubble{max-width: 80%;background-color:var(--color-primary);}
/* 챗봇 메시지 */
.chat-message--assistant .chat-message__avatar + .chat-message__body{margin-top:12px;}
.chat-message--assistant .chat-message__bubble::before{content:'';width:14px;height:14px;background:url(/assets/img/chat/ico_tri.svg) center no-repeat;background-size:100%;position:absolute;top:-10px;left:12px;}
.chat-message--assistant .chat-message__bubble.bg-orange::before{background:url(/assets/img/chat/ico_tri_orange.svg) center no-repeat;}
.chat-message--assistant .chat-message__bubble.bg-pink::before{background:url(/assets/img/chat/ico_tri_pink.svg) center no-repeat;}
.chat-message__avatar{display:flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--color-primary) url(/assets/img/chat/counselor_ico.svg) center top 8px no-repeat;background-size:100%;}
/* 민감질문 아바타 배경은 퍼블 원본이 #F9D4CD 고정(--bg-pink)이다.
   --bg-lightpink 는 말풍선 배경용이라 다크에서 #AB5862 로 바뀌어, 쓰면 아바타가 말풍선 색을 따라간다. */
.chat-message__avatar.bg-pink{background:var(--bg-pink) url(/assets/img/chat/counselor_ico2.svg) center top 6px no-repeat;background-size:42px;}

/* 챗봇 메시지 답변 디자인 */
.chat-message__body{display:flex;flex-direction:column;}
.chat-comment__text{font-size:14px;font-weight:400;color:var(--color-gray4);padding-left:24px;}
.chat-comment__text.c-blue{color:var(--color-text-blue);}
.chat-comment__text.size-sm{font-size:11px;padding-left:19px;background-size:15px 15px;}
.chat-comment__text.ico-chat{background: url(/assets/img/chat/ico_chat.svg) center left 4px no-repeat;background-size:16px 16px;}
.chat-comment__text.ico-paper{background: url(/assets/img/chat/ico_paper.svg) center left 4px no-repeat;background-size:16px 16px;}
.chat-comment__text.ico-magnify{background: url(/assets/img/chat/ico_magnify.svg) center left 4px no-repeat;background-size:16px 16px;}
.chat-comment__text.ico-present-blue{background: url(/assets/img/chat/ico_present_blue.svg) left center no-repeat;background-size:15px 15px;}
.chat-message__bubble + .chat-comment__text{margin-top:16px;}
.chat-comment__text + .chat-action__btn-container{margin-top:12px;}

/* 액션 버튼 모음 */
.chat-action__btn-container{display:flex;flex-direction:column;gap:8px;}
.chat-action__btn{width:fit-content;display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;font-size:14px;font-weight:400;color:var(--color-gray);text-align:center;border-radius:17px;border:1px solid var(--border-lightgray);background-color:var(--color-white);transition:border-color 0.3s;}
.chat-action__btn.active{color:var(--color-text);background-color:var(--bg-lightblue);border-color:var(--border-blue);}
.chat-action__btn.active:hover{color:var(--color-blue);border-color:var(--color-blue);font-weight:600;}
.chat-action__btn:hover{color:var(--color-blue);border-color:var(--color-blue);font-weight:600;}
.chat-action__btn.insert-ico{padding-right:36px;}
.chat-action__btn.insert-ico.ico-reset-black{background-image:url(/assets/img/chat/ico_reset_black.svg);background-repeat: no-repeat;background-position: right 10px center;background-size:22px 22px;}

/* 채팅 입력 애니메이션 */
.chat-panel .typing-indicator{display:flex;align-items: center;gap: 4px;}
.chat-panel .typing-indicator--center{justify-content:center;}
.chat-panel .typing-indicator span{display: block;width: 5px;height: 5px;border-radius: 50%;background: var(--color-gray3);animation: typing-bounce 1.2s ease-in-out infinite;}
.chat-panel .typing-indicator span:nth-child(2){animation-delay: 0.15s;}
.chat-panel .typing-indicator span:nth-child(3){animation-delay: 0.3s;}

@keyframes typing-bounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-2px);
        opacity: 1;
    }
}
/* 퀵 채팅 버튼 박스 */
.chat-action__btn-container + .chat_quick__btn-container{margin:10px 4px 2px;}
.chat_quick__btn-container{display:flex;align-items:center;gap:12px;margin:0 4px;}
.chat_quick__btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background-repeat:no-repeat;background-size:22px 22px;background-position: center center;}
.chat_quick__btn.ico-up{background-image:url(/assets/img/chat/ico_up.svg);}
.chat_quick__btn.ico-up.active{background-image:url(/assets/img/chat/ico_up_active.svg);}
.chat_quick__btn.ico-down{background-image:url(/assets/img/chat/ico_down.svg);}
.chat_quick__btn.ico-down.active{background-image:url(/assets/img/chat/ico_down_active.svg);}
.chat_quick__btn.ico-copy{background-image:url(/assets/img/chat/ico_copy.svg);}
.chat_quick__btn.ico-copy.active{background-image:url(/assets/img/chat/ico_check.svg);}
.chat_quick__btn.ico-source{background-image:url(/assets/img/chat/ico_source.svg);}
.chat_quick__btn.ico-source.active{}
/* 텍스트 입력 */
.chat-panel .fw-extrabold{font-weight:800;}
.chat-panel .fw-bold{font-weight:700;}
.chat-panel .fw-semibold{font-weight:600;}
.chat-panel .fw-medium{font-weight:500;}
.chat-panel .txt-lg{font-size:19px;}
.chat-panel .txt-md{font-size:16px;}
.chat-panel .txt-rgl{font-size:14px;}
.chat-panel .txt-sm{font-size:12px;}
.chat-panel .txt-xsm{font-size:11px;}
.chat-panel .text-center{text-align:center;}
.chat-panel .text-ico{padding-left:18px;background-position:left top -2px;background-size:16px;background-repeat:no-repeat;}
.chat-panel .text-ico.ico-pin{background-image:url(/assets/img/chat/ico_pin.svg);}
.chat-panel .c-blue{color:var(--color-blue);}
.chat-panel .c-blue-text{color:var(--color-text-blue);}
.chat-panel .c-dark-blue{color:var(--color-darkblue);}
.chat-panel .c-gray{color:var(--color-gray);}
.chat-panel .c-gray4{color:var(--color-gray4);}
.chat-panel .c-gray5{color:var(--color-gray5);}
.chat-panel .c-yellow{color:var(--color-primary);}
.chat-panel .c-yellow-dark{color:var(--color-primary-dark);}
.chat-panel .c-orange{color:var(--color-orange);}
.chat-panel .c-green{color:var(--color-green);}
.chat-panel .mt-2{margin-top:2px;}
.chat-panel .mt-4{margin-top:4px;}
.chat-panel .mt-8{margin-top:8px;}
.chat-panel .mt-12{margin-top:12px;}
.chat-panel .mt-16{margin-top:16px;}
.chat-panel .lh-152{line-height:1.52;}
.chat-panel .lh-14{line-height:1.4;}
.chat-panel .txt__check-list{display:flex;flex-direction:column;gap:4px;}
.chat-panel .txt__check-list > li{padding-left:20px;text-align:left;font-size:12px;font-weight:400;line-height:1.52;background:url(/assets/img/chat/ico_atomic_check.svg) left center no-repeat;background-size:16px 16px;}
.chat-panel .line-list{display:flex;flex-direction:column;}
.chat-panel .line-list > li{padding-bottom:14px;}
.chat-panel .line-list > li + li{padding-top:14px;border-top:1px solid var(--border-lightgray2);}
.chat-panel .line-list > li:last-child{padding-bottom:0;}
.chat-panel .vtl-line-list{display:flex;flex-wrap:wrap;}
.chat-panel .vtl-line-list > li + li{position:relative;margin-left:10px;padding-left:10px;}
.chat-panel .vtl-line-list > li + li::before{content:"";position:absolute;top:50%;left:0;width:1px;height:14px;background-color:var(--border-lightgray2);transform:translateY(-50%);}
.chat-panel .c-info-list > li{display:flex;align-items:flex-start;gap:10px;}
.chat-panel .c-info-list > li + li{margin-top:4px;}
.chat-panel .c-info-list > li > span{display:block;}
.chat-panel .c-info-list > li > span:first-child{width:100px;}
.chat-panel .c-info-list > li > span:last-child{width:calc(100% - 100px);}
.chat-panel .c-info-list > li.size-sm  > span:first-child{width:60px;}
.chat-panel .c-info-list > li.size-sm  > span:last-child{width:calc(100% - 60px);}
.chat-panel .c-info-list > li.size-sm2  > span:first-child{width:80px;}
.chat-panel .c-info-list > li.size-sm2  > span:last-child{width:calc(100% - 80px);}
.chat-panel .txt-dot{font-size:14px;font-weight:400;padding-left:20px;position:relative;}
.chat-panel .txt-dot::before{content:"";width:3px;height:3px;border-radius:50%;background-color:var(--color-black);position:absolute;left:8px;top:10px;}
.chat-panel .notice-dot{font-size:12px;font-weight:400;color:var(--color-gray);padding-left:18px;background:url(/assets/img/chat/ico_people.svg) left top no-repeat;background-size:14px 16px;}
.chat__info-confirm-box > p.c-info-tit{margin-bottom:4px;}
.chat__info-confirm-box > div > * + *{margin-top:2px;}
/* 채팅 내 테이블 */
.chat-panel .c-info-table{width:100%;}
.chat-panel .c-info-table > table{width:100%;}
.chat-panel .c-info-table thead th{text-align:left;padding:8px;background-color:var(--bg-blue2);}
.chat-panel .c-info-table thead th:first-child{padding-left:20px;border-top-left-radius:12px;}
.chat-panel .c-info-table thead th:last-child{padding-right:20px;border-top-right-radius:12px;}
.chat-panel .c-info-table .c-th-wrap{font-size:12px;color:rgba(17, 17, 17, 0.7);line-height:1.52;}
.chat-panel .c-info-table .c-th-wrap.c-blue{color:var(--color-blue);}
.chat-panel .c-info-table .c-td-wrap{font-size:12px;color:rgba(17, 17, 17, 0.7);line-height:1.52;}
.chat-panel .c-info-table tbody td{padding:8px;background-color:var(--color-white);}
.chat-panel .c-info-table tbody td:first-child{text-align:left;padding-left:20px;}
.chat-panel .c-info-table tbody td:last-child{padding-right:20px;}
.chat-panel .c-info-table tbody tr + tr{border-top:1px solid var(--border-lightgray2);}
.chat-panel .c-info-table .c-info-foot{padding:8px 20px;background-color:var(--color-white);border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-top:1px solid var(--border-lightgray2);}
/* 채팅 내 스텝박스 */
.chat-panel .c-step-list{display:flex;flex-direction:column;gap:10px;}
.chat-panel .c-step-list > li{position:relative;display:flex;align-items:flex-start;gap:12px;}
.chat-panel .c-step-list > li:not(:last-child)::before{
    content:"";
    position:absolute;
    top:22px;
    left:10px;
    width:1px;
    height:calc(100% + 10px - 22px);
    background:repeating-linear-gradient(
            to bottom,
            var(--border-blue) 0 4px,
            transparent 4px 8px
    );
}
.chat-panel .c-step-list > li > .c-circle + div{width:calc(100% - 22px);}
.chat-panel .c-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;flex-shrink:0;font-size:14px;font-weight:500;color:var(--color-blue);text-align:center;border-radius:50%;background-color:var(--bg-blue);border: 1px solid rgba(163, 197, 240, 0.2)}
.chat-panel .c-circle.step-finished{background-image:url(/assets/img/chat/ico_atomic_check_lightblue.svg);background-size:22px 22px;background-position:center center;background-repeat:no-repeat;}
.chat-panel .c-circle.step-present{background-color:#C4DCFD;position:relative;}
.chat-panel .c-circle.step-present::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50% ,-50%);width:10px;height:10px;border-radius:50%;background-color:var(--color-blue);z-index: 1;}
.chat-panel .c-badge{display:inline-block;padding:1px 6px;border-radius:26px;background-color:var(--bg-blue);font-size:11px;font-weight:500;line-height:1.52;color:var(--color-text-blue2);}

/* 요소 공통 정렬 */
.chat-panel .c-flex-wrap{display:flex;}
.chat-panel .c-flex-wrap.al-start{align-items:flex-start;}
.chat-panel .c-flex-wrap.al-center{align-items:center;}
.chat-panel .c-flex-wrap.gap2{gap:2px;}
.chat-panel .c-flex-wrap.gap4{gap:4px;}
.chat-panel .c-flex-wrap.gap6{gap:6px;}
.chat-panel .c-flex-wrap.gap8{gap:8px;}
.chat-panel .c-flex-wrap.gap16{gap:16px;}
.chat-panel .c-flex-wrap.gap20{gap:20px;}
.chat-panel .c-flex-wrap.col-ver{flex-direction:column;}
/* 간격 조정 */
.chat__line-box{border-top:1px solid var(--border-lightgray2);padding:12px 2px 0;margin-top:16px;}
.chat__line-box > *  +.txt__check-list{margin-top:8px;}
.chat__line-box.size-sm{margin-top:10px;padding:10px 0 0 0;}
.chat__line-box.size-sm:first-child{border-top:0;padding-top:0;margin-top:0;}
.chat__white-box{display:block;background-color:var(--color-white);padding:20px;border-radius:12px;box-shadow: 0px 4px 20px 0px #0000000A;}
.chat__white-box.link-ver:hover *{text-decoration:underline;}
.chat__white-box + .chat__white-box{margin-top:8px;}
.chat__white-box.pd-sm{padding:16px;}
/* 버튼 */
.chat-common__btn{width:fit-content;display:inline-flex;align-items:center;justify-content:center;padding:7px 18px;font-size:14px;font-weight:600;color:var(--color-text);border:1px solid var(--border-btn);background-color:var(--color-white);border-radius:17px;gap:4px;transition:all 0.3s;}
.chat-common__btn:hover{border-color:var(--color-primary);font-weight:700;}
.chat-common__btn.bg-black{background-color:var(--color-black);border-color:var(--color-black);color:var(--color-white);}
.chat-common__btn.bg-black:hover{background-color:var(--color-text2);}
.chat-common__btn.bg-transparent{background-color:transparent;border-color:transparent;color:var(--color-black);}
.chat-common__btn.bg-yellow{background-color:var(--color-primary);border-color:var(--color-primary);}
.chat-common__btn.bg-yellow:hover{background-color:var(--bg-primary-hover);}
.chat-common__btn.size-lg{padding:14px 28px;font-size:16px;}/**/
.chat-common__btn.size-slg{padding:13px 28px;font-size:16px;}/**/
.chat-common__btn.size-md{padding:10px 18px;font-size:14px;}
.chat-common__btn.size-rgl{padding:7px 18px;}
.chat-common__btn.size-sm{padding:6px 12px;}/**/
.chat-common__btn.fw-rgl{font-weight:400;}
.chat-common__btn.fw-rgl:hover{font-weight:600;}
.chat-common__btn.c-gray{color:var(--color-gray);}
.chat-common__btn.br-8{border-radius:8px;}
.chat-common__btn.lh-1{line-height:1;}
.chat-common__btn.br-18{border-radius:18px;}
.chat-common__btn.br-24{border-radius:24px;}
.chat-common__btn.br-27{border-radius:27px;}
/* 세션만료 */
.chat-bottom__session-expired{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px 8px 20px;background-color:var(--bg-lightgray2);border-radius:18px;}
.chat-bottom__session-expired > p{width:100%;}
.chat-bottom__session-expired .chat-common__btn{flex-shrink:0;}
/* 출처 */
.chat_attach-container{display:flex;flex-direction:column;gap:4px;padding-left:8px;margin-left:4px;border-left:2px solid var(--border-blue);}
.chat_attach__btn{display:flex;align-items:center;padding:8px 12px;font-size:12px;font-weight:400;text-align:left;color:var(--color-gray);background-color:var(--bg-lightgray);border:1px solid var(--border-lightgray2);border-radius: 8px;transition:all 0.3s;}
/*.chat_attach__btn:hover {background-color:var(--bg-lightgray2);}*/
/* 이전 대화목록 */
.chat-before{}
.chat-before-list{display:flex;flex-direction:column;gap:12px;}
.chat-before-list > li > button{width:100%;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:0 16px 16px 16px;background-color:var(--bg-lightgray);}
.chat-before-list > li > button:hover .chat-ico-box{right:-6px;}
.chat-before-list > li > button .chat-ico-box{flex-shrink:0;position:relative;right:0;transition:right 0.3s;}
/* 이전 대화목록 > 세부화면 */
.chat-btn__wrap{width:100%;display:flex;flex-direction:column;gap:6px;}
.chat-btn__wrap > .chat-common__btn{width:100%;}

/* ========================================
   챗봇 반응형 규격

   - PC: 380 × 670
   - 태블릿 세로: 380 × 670
   - 태블릿 가로(뷰포트 높이 813px 미만):
     화면 안에 들어오도록 높이 자동 축소,
     가운데 콘텐츠 영역 내부 스크롤
   - App Full Screen은 개발 환경에서 별도 적용
======================================== */

/* PC
   퍼블 원본은 380/670 하드코딩이었으나 변수 참조로 정리(2026-09-14) —
   크기 조절(.chat-resize-handle 드래그)이 인라인 --chat-width/height 로 반영되도록.
   기본값은 변수 선언부(--chat-width:380px; --chat-height:670px)와 동일해 동작 변화 없음. */
@media (min-width:1025px) {
    .chat-panel{
        width:min(var(--chat-width), calc(100vw - 32px));
        height:min(var(--chat-height), calc(100vh - 32px));
    }
}

/* 태블릿 (PC와 같은 사유로 변수화 — 확대 상태로 창을 줄여도 뷰포트 클램프가 잡아준다) */
@media (min-width:601px) and (max-width:1024px) {
    .chat-panel{
        width:min(var(--chat-width), calc(100vw - 32px));
        height:min(var(--chat-height), calc(100vh - 32px));
    }
}

/*
 * 브라우저 높이가 부족한 경우
 * fixed 위치는 유지하고 패널을 viewport 안에서 축소합니다.
 */
@media (min-width:601px) and (max-height:812px) {
    .chat-panel{
        bottom:16px;
        height:min(670px, calc(100dvh - 32px));
        min-height:0;
    }

    .chat__open-button{
        bottom:16px;
    }

    .chat-content{
        min-height:0;
        overflow-y:auto;
    }
}

/* 모바일(App): Full Screen */
@media (max-width:600px) {
    .chat-panel{
        position:fixed;
        inset:0;
        width:100%;
        height:100dvh;
        border-radius:0;
        transform:none;
    }

    .chat-header{
        border-radius:0;
    }
}


/* ============================================================
   퍼블 인트로 (원본: intro.css — 2026-07-27 전문 싱크)
============================================================ */
@charset "UTF-8";

/* ========================================
   챗봇 인트로 애니메이션
======================================== */
/* 인트로 페이지 스킵 */
.chat-panel[data-use-intro="false"] .intro-bg-effect,
.chat-panel[data-use-intro="false"] .chat-intro-screen,
.chat-panel[data-use-intro="false"] .chat-intro {
    display: none;
}
.chat-bottom {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;}
.chat-bottom.is-show {opacity: 1;visibility: visible;pointer-events: auto;transform: translateY(0);}
.chat-message-list[hidden],
.chat-intro[hidden] {
    display:none;
}

/* 실제 대화 중 */
.chat-panel.is-chatting .chat-intro {
    display:none;
}

.chat-panel.is-chatting .chat-message-list {
    display:flex;
}
/* 채팅 인트로 애니메이션 도중 넘침 없게 */
.chat-content {
    min-height: 0;
}

.chat-panel.is-intro .chat-content {
    overflow-y:auto;
}

/* 첫 번째 인트로 애니메이션 화면이 보일 때만 스크롤 방지 */
.chat-panel.is-intro .chat-content:has(> .chat-intro-screen:not([hidden])) {
    overflow-y:hidden;
}

/* 첫 번째 인트로 화면에서는 하단 입력 영역과 grid 공간을 함께 제거.
   단, 페이드아웃이 시작된 뒤(is-hide)에는 제외한다 — 퍼블 chat-intro.js 는 is-hide 후
   550ms 지나서야 hidden 을 붙이는데, 그때까지 입력창이 grid 에서 빠져 있다가 뒤늦게
   끼어들면서 화면이 밀려 보인다. is-hide 시점부터 자리를 잡아 다른 컴포넌트와 함께 나타난다.
   (스플래시는 position:absolute 오버레이라 레이아웃에 영향을 주지 않는다) */
.chat-panel:has(.chat-intro-screen:not([hidden]):not(.is-hide)) .chat-bottom {
    display:none;
}

.chat-panel.is-chatting .chat-content {
    overflow-y: auto;
}

/* 채팅 목록이 세로 배치라고 가정 */
.chat-message-list {
    flex-direction:column;
    margin:0;
    padding:0;
    list-style:none;
}

.chat-panel {
    overflow:hidden;
    background-color:var(--color-white);
}

/* 전체 인트로 화면 */
.chat-intro-screen {
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:40px;
    text-align:center;
    background-color:var(--color-white);
    opacity:1;
    visibility:visible;
    transition:
            opacity 0.55s ease,
            visibility 0.55s ease;
}
/* intro 디자인 */
.chat-intro-screen .chat-intro-text p {font-size:16px;font-weight:600;color:var(--color-primary-dark);}
.chat-intro-screen .chat-intro-text p >  span {font-size:22px;font-weight:600;color:var(--color-black2);line-height:1.2;margin-top:10px;}
.chat-intro-screen .chat-intro-box {display:flex;flex-direction:column;align-items:center;margin-top:50px;}
.chat-intro-screen .chat-intro-ani {
    display:flex;
    align-items:flex-start;
    margin-top:58px;
    transform:translateZ(0);
}
.chat-intro-screen .chat-intro-ani img {
    display:block;
    flex-shrink:0;
    backface-visibility:hidden;
}
.chat-intro-screen .chat-intro-ani .cloud1 {margin-top: 142px;width:78px;height:48px;}
.chat-intro-screen .chat-intro-ani .cloud2 {margin-top: 44px;width:76px;height:47px;}
/* 인트로 첫 번째 문장 */
.chat-intro-screen .chat-intro-box p:first-child {
    opacity:0;
    transform:translateY(18px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 인트로 두 번째 문장 */
.chat-intro-screen .chat-intro-box p:nth-child(2) {
    opacity:0;
    transform:translateY(20px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 안녕하세요 노출 */
.chat-intro-screen.is-greeting .chat-intro-box p:first-child {
    opacity:1;
    transform:translateY(0);
}

/* 아래 문장 노출 */
.chat-intro-screen.is-description .chat-intro-box p:nth-child(2) {
    opacity:1;
    transform:translateY(0);
}

/*
 * 새 인트로 비주얼
 * 텍스트와 중앙 캐릭터는 아래에서 올라오고,
 * 구름은 화면 양옆에서 중앙 방향으로 진입합니다.
 */
.chat-intro-screen .chat-intro-text,
.chat-intro-screen .intro-character {
    opacity:0;
    transform:translate3d(0, 28px, 0);
    transition:
            opacity 1.25s ease-out,
            transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change:opacity, transform;
    backface-visibility:hidden;
}

.chat-intro-screen .intro-character {
    transform:translate3d(0, 72px, 0) scale(0.84);
    transform-origin:center bottom;
    transition-duration:1.3s, 1.65s;
    transition-delay:0.12s;
}

.chat-intro-screen .chat-intro-ani .cloud1,
.chat-intro-screen .chat-intro-ani .cloud2 {
    opacity:0;
    transition:
            opacity 1.25s ease-out,
            transform 1.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change:opacity, transform;
    backface-visibility:hidden;
}

.chat-intro-screen .chat-intro-ani .cloud1 {
    transform:translate3d(-46px, 0, 0);
}

.chat-intro-screen .chat-intro-ani .cloud2 {
    transform:translate3d(46px, 0, 0);
}

.chat-intro-screen.is-greeting .chat-intro-text,
.chat-intro-screen.is-greeting .chat-intro-ani .cloud1,
.chat-intro-screen.is-greeting .chat-intro-ani .cloud2 {
    opacity:1;
    transform:translate3d(0, 0, 0);
}

.chat-intro-screen.is-greeting .intro-character {
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
}

/* 새 구조에서는 문단별 기존 모션 대신 텍스트 묶음을 한 번에 움직입니다. */
.chat-intro-screen .chat-intro-text p:first-child,
.chat-intro-screen .chat-intro-text p:nth-child(2),
.chat-intro-screen.is-greeting .chat-intro-text p:first-child,
.chat-intro-screen.is-description .chat-intro-text p:nth-child(2) {
    opacity:1;
    transform:none;
    transition:none;
}

/* 전체 인트로 화면 종료 */
.chat-intro-screen.is-hide {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/*
 * 낮은 화면의 첫 인트로 대응
 * 여백과 비주얼 크기를 줄이고, 극단적으로 낮은 화면에서는
 * 인트로 화면 자체에 스크롤을 허용해 콘텐츠 잘림을 방지합니다.
 */
@media (max-height:812px) {
    .chat-intro-screen {
        padding:clamp(16px, 4dvh, 32px) 20px;
        overflow:hidden;
    }

    .chat-intro-screen .chat-intro-box {
        margin-top:0;
    }

    .chat-intro-screen .chat-intro-ani {
        margin-top:clamp(16px, 4dvh, 36px);
    }

    .chat-intro-screen .intro-character {
        width:auto;
        height:clamp(150px, 40dvh, 240px);
    }

    .chat-intro-screen .chat-intro-ani .cloud1 {
        width:62px;
        height:auto;
        margin-top:clamp(76px, 20dvh, 112px);
    }

    .chat-intro-screen .chat-intro-ani .cloud2 {
        width:60px;
        height:auto;
        margin-top:clamp(24px, 7dvh, 38px);
    }
}


/* ========================================
   chat-content 내부 단계별 애니메이션
======================================== */
.c-intro-text-top {position:relative; font-size:24px;font-weight:600;line-height:1.35;}
.c-intro-text-top .c-beta-icon {
    position:absolute;
    top:11px;
    left:0;
    transform:translateX(162px);
}
.c-intro-text-top .c-beta-icon > img {
    width:42px;
}
/* 모든 단계의 초기 상태 */

.chat-intro .c-motion {
    opacity:0;
    visibility:hidden;

    transition:
            opacity 0.75s ease,
            visibility 0.75s ease;
}

/* JS에서 is-show를 붙이면 노출 */
.chat-intro .c-motion.is-show {
    opacity:1;
    visibility:visible;
}
/* ========================================
   하단 입력 영역 애니메이션
======================================== */
.chat-panel.is-intro .chat-bottom {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:transparent;

    transition:
            opacity 0.75s ease,
            visibility 0.75s ease;
}

/* step4와 함께 나타남 */
.chat-panel.is-intro .chat-bottom.is-show {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* ========================================
   모션 최소화 설정
======================================== */

@media (prefers-reduced-motion: reduce) {
    .chat-intro-screen,
    .chat-intro-screen > p,
    .chat-intro-screen .chat-intro-text,
    .chat-intro-screen .intro-character,
    .chat-intro-screen .chat-intro-ani .cloud1,
    .chat-intro-screen .chat-intro-ani .cloud2,
    .chat-intro .c-motion,
    .chat-panel.is-intro .chat-bottom {
        transition:none;
    }

    .chat-intro-screen .chat-intro-text,
    .chat-intro-screen .intro-character,
    .chat-intro-screen .chat-intro-ani .cloud1,
    .chat-intro-screen .chat-intro-ani .cloud2 {
        opacity:1;
        transform:none;
    }
}

.chat-header,
.chat-content,
.chat-bottom {
    position: relative;
    z-index: 2;
}

/* ========================================
   인트로 배경 효과
======================================== */
.intro-bg-effect {
    --travel-x: clamp(80px, 16vw, 150px);
    --travel-x-sm: clamp(28px, 5.6vw, 52px);
    --travel-x-xs: clamp(20px, 4vw, 38px);

    position: absolute;
    z-index: 100;
    left: 50%;
    bottom: -300px;

    width: min(720px, 150%);
    aspect-ratio: 1;
    border-radius: 50%;

    pointer-events: none;
    opacity: 0;
    visibility: hidden;

    background:
            radial-gradient(
                    circle at 50% 40%,
                    rgba(255, 226, 77, 0.72) 0%,
                    rgba(255, 210, 0, 0.48) 24%,
                    rgba(255, 210, 0, 0.2) 50%,
                    rgba(255, 210, 0, 0) 72%
            );

    filter: blur(18px);

    transform:
            translate3d(
                    calc(-50% - var(--travel-x)),
                    14px,
                    0
            )
            scale(0.98);

    will-change: transform, opacity;
    backface-visibility:hidden;
    contain:strict;
}

.intro-bg-effect.sub {
    --travel-x: clamp(90px, 18vw, 170px);

    left: 50%;
    bottom: -340px;

    width: min(820px, 170%);

    background:
            radial-gradient(
                    circle,
                    rgba(255, 210, 0, 0.32) 0%,
                    rgba(255, 210, 0, 0.18) 42%,
                    rgba(255, 210, 0, 0) 72%
            );

    filter: blur(32px);

    transform:
            translate3d(
                    calc(-50% + var(--travel-x)),
                    30px,
                    0
            )
            scale(1.03);
}

/*
 * is-intro 클래스가 있을 때만 노출
 */
.chat-panel.is-intro .intro-bg-effect {
    visibility: visible;
    animation:
            intro-wave 7.2s cubic-bezier(0.45, 0, 0.55, 1) infinite,
            intro-flash 5.4s ease-in-out infinite;
}

.chat-panel.is-intro .intro-bg-effect.sub {
    animation:
            intro-wave-sub 8.8s cubic-bezier(0.45, 0, 0.55, 1) infinite,
            intro-flash-sub 6.8s ease-in-out infinite;
}
.chat-panel.is-intro .chat-bottom {z-index: 100;}

/*
 * 첫 번째 원 움직임
 */
@keyframes intro-wave {
    0%,
    100% {
        transform:
                translate3d(
                        calc(-50% - var(--travel-x)),
                        18px,
                        0
                )
                scale(0.96);
    }

    25% {
        transform:
                translate3d(
                        calc(-50% - var(--travel-x-sm)),
                        -4px,
                        0
                )
                scale(1.02);
    }

    50% {
        transform:
                translate3d(
                        calc(-50% + var(--travel-x)),
                        -26px,
                        0
                )
                scale(1.09);
    }

    75% {
        transform:
                translate3d(
                        calc(-50% + var(--travel-x-xs)),
                        -8px,
                        0
                )
                scale(1.03);
    }
}

/*
 * 첫 번째 원 밝기 변화
 */
@keyframes intro-flash {
    0%,
    100% {
        opacity: 0.28;
    }

    18% {
        opacity: 0.48;
    }

    38% {
        opacity: 0.32;
    }

    58% {
        opacity: 0.62;
    }

    72% {
        opacity: 0.38;
    }
}

/*
 * 두 번째 원 움직임
 */
@keyframes intro-wave-sub {
    0%,
    100% {
        transform:
                translate3d(-50%, 28px, 0)
                scale(1);
    }

    30% {
        transform:
                translate3d(-45%, -18px, 0)
                scale(1.08);
    }

    65% {
        transform:
                translate3d(-55%, -2px, 0)
                scale(0.98);
    }
}

/*
 * 두 번째 원 밝기 변화
 */
@keyframes intro-flash-sub {
    0%,
    100% {
        opacity: 0.12;
    }

    35% {
        opacity: 0.34;
    }

    68% {
        opacity: 0.18;
    }
}
/* 인트로 페이지 */
.chat-intro {display:flex;flex-direction:column;height:100%;}
.c-intro-info-box {padding-top:16px;margin-top:16px;border-top:1px solid var(--border-lightgray2);}
.c-intro-type {position:relative;flex:1;}
.c-intro-btn-wrap {max-width:calc(100% - 138px);}
.chat-intro-ico {position:absolute;right:0;bottom:0;}
.c-intro-link {display:flex;align-items:center;gap:16px;width:100%;min-width:0;padding:10px 16px;background-color:var(--bg-blue);border-radius:0 16px 16px 16px;transition:all 0.3s;}
.c-intro-link:hover .chat-ico-box {right:-6px;}
.c-intro-link > div {flex:1;min-width:0;}
.c-intro-link .chat-ico-box {flex-shrink:0;position:relative;right:0;transition:right 0.3s;}

/* 낮은 챗봇 높이: 인트로 하단 원형 효과 축소 및 위치 조정 */
@media (max-height:812px) {
    .intro-bg-effect {
        bottom:-320px;
        width:min(520px, 125%);
        filter:blur(16px);
    }

    .intro-bg-effect.sub {
        bottom:-370px;
        width:min(600px, 140%);
        filter:blur(28px);
    }
}


/* ============================================================
   [yuma 통합 레이어] 도킹 / 반응형 / 런처 버튼
============================================================ */
/* 챗봇 전용 플로팅 버튼(퍼블 .chat__open-button) — 기존 .floating-area(앱다운로드)와 독립.
   퍼블 기본값(right:40px/bottom:109px/z-index:500)을 yuma 배치 규칙으로 재정의한다.
   확장 애니메이션·hover 연출은 퍼블 본문 규칙을 그대로 사용. */
.chat__open-button {
    /* 정상 동작하던 구 .chat-floating 과 동일하게 컨테이너를 flex 로 (자식 버튼 크기에 맞춤) */
    display: flex;
    right: var(--page-padding-x-default, 16px);
    bottom: var(--page-padding-x-default, 16px);
    /* 사이트 최고 레이어(GNB 9999, 모바일메뉴 10000, flatpickr 99999)보다 항상 위 */
    z-index: 2147482000;
}

/* 메인/서브 공통: 앱다운로드 플로팅 버튼(높이 5rem + 간격) 위에 스택 */
.chat__open-button.chat-floating--stacked {
    bottom: calc(var(--page-padding-x-default, 16px) + 5rem + var(--spacing-card-small, 1.2rem));
}

@media (min-width: 1024px) {
    .chat__open-button {
        right: 4rem;
        bottom: 4rem;
    }
    .chat__open-button.chat-floating--stacked {
        bottom: calc(4rem + 5rem + var(--spacing-card-small, 1.2rem));
    }
}

/* ==========================================================
   플로팅 버튼 반응형 크기
   퍼블 원본은 74×64 / 확장 309px 고정이라 모바일에서도 그대로 커 보인다.
   서로 맞물린 값(버튼·아이콘·확장폭·아이콘 이동거리)을 변수 하나로 묶어
   화면이 좁아질수록 함께 줄어들게 한다.
   ※ 아이콘 이동거리는 반드시 확장폭과 같아야 아이콘이 정확히 밖으로 빠진다.
   ========================================================== */
.chat__open-button {
    --chat-fab-w: 74px;        /* 접힘 폭 */
    --chat-fab-h: 64px;        /* 높이 */
    --chat-fab-expand: 309px;  /* 펼침 폭 */
    --chat-fab-font: 16px;     /* 안내 문구 */
    --chat-fab-arrow: 42px;    /* 화살표 원 */
    --chat-fab-text-x: 20px;   /* 문구 좌측 여백 */
}

/* 펼침 폭은 "문구 + 화살표"가 잘리지 않는 최소치로 잡는다.
   (문구는 CSS content 고정값이라 폭을 줄이면 바로 잘린다 — 폰트 크기와 함께 내려야 한다) */
@media (max-width: 1023px) {
    .chat__open-button {
        --chat-fab-w: 64px;
        --chat-fab-h: 56px;
        --chat-fab-expand: min(288px, calc(100vw - 32px));
        --chat-fab-font: 14px;
        --chat-fab-arrow: 36px;
        --chat-fab-text-x: 16px;
    }
}

@media (max-width: 640px) {
    .chat__open-button {
        --chat-fab-w: 56px;
        --chat-fab-h: 48px;
        --chat-fab-expand: min(266px, calc(100vw - 32px));
        --chat-fab-font: 13px;
        --chat-fab-arrow: 32px;
        --chat-fab-text-x: 14px;
    }
}

/* 위 변수를 실제 크기에 적용 (퍼블 본문 고정값을 덮어쓴다) */
.chat__open-button > button {
    width: var(--chat-fab-w);
    height: var(--chat-fab-h);
    border-radius: calc(var(--chat-fab-h) * 0.525) calc(var(--chat-fab-h) * 0.525)
    0 calc(var(--chat-fab-h) * 0.525);
}
.chat__open-button .chat-ico-box {
    width: var(--chat-fab-w);
    height: var(--chat-fab-h);
}

/*
 * 아이콘은 background-image 로 그린다.
 * 퍼블 원본은 content:url(...) 인데, 이렇게 삽입된 이미지는 CSS width/height 로
 * 축소되지 않고 원본 크기(74×64)로 그려진다 → 모바일 축소 시 오른쪽이 잘린다.
 * background-size:contain 은 비율을 지킨 채 확실히 축소된다.
 */
.chat__open-button .chat-ico-box::before {
    content: "";
    display: block;
    width: var(--chat-fab-w);
    height: var(--chat-fab-h);
    background: url("/assets/img/chat/ico_btn_charc.svg") center center / contain no-repeat;
}
.chat__open-button .chat-open__surface {
    border-radius: calc(var(--chat-fab-h) * 0.5);
}
.chat__open-button > button::before {
    left: var(--chat-fab-text-x);
    font-size: var(--chat-fab-font);
}
.chat__open-button > button::after {
    width: var(--chat-fab-arrow);
    height: var(--chat-fab-arrow);
    font-size: calc(var(--chat-fab-arrow) * 0.57);
}
.chat__open-button:hover > button,
.chat__open-button > button:focus-visible {
    width: var(--chat-fab-expand);
    border-radius: calc(var(--chat-fab-h) * 0.53);
}
.chat__open-button:hover > button .chat-ico-box,
.chat__open-button > button:focus-visible .chat-ico-box {
    transform: translateX(calc(var(--chat-fab-expand) * -1));
}

/* 터치 기기의 첫 탭 펼침(cust-chat.js 가 .is-expanded 를 붙인다) — hover 와 같은 모습 */
.chat__open-button.is-expanded > button {
    width: var(--chat-fab-expand);
    border-radius: calc(var(--chat-fab-h) * 0.53);
    background: linear-gradient(91.75deg, #ffe74d 28.3%, #ffd466 96.6%);
    box-shadow: 0 20px 40px 0 #ffdd0026, 0 10px 20px 0 #dfa9201a;
}
.chat__open-button.is-expanded > button .chat-open__surface {
    opacity: 1;
    transition-delay: 0.34s;
}
.chat__open-button.is-expanded > button .chat-ico-box {
    transform: translateX(calc(var(--chat-fab-expand) * -1));
}
.chat__open-button.is-expanded > button::before,
.chat__open-button.is-expanded > button::after {
    opacity: 1;
    transform: none;
    transition-delay: 0.43s;
}

/* PC: 우측 하단 도킹 패널 — 하단 라인을 챗봇 플로팅 버튼(.chat-floating--stacked)과 정확히 일치시킨다 */
.chat-panel {
    position: fixed;
    right: var(--page-padding-x-default, 16px);
    /* 챗봇 플로팅 버튼과 동일 계산식 (앱다운로드 버튼 높이 5rem + 간격 위) */
    bottom: calc(var(--page-padding-x-default, 16px) + 5rem + var(--spacing-card-small, 1.2rem));
    /* 최상위 오버레이: 사이트 GNB/헤더/모바일 햄버거 위에 항상 노출.
       cust-chat.js에서 패널을 <body> 직속으로 이동해 스택 컨텍스트 함정도 회피한다. */
    z-index: 2147483000;
    overscroll-behavior: contain;
}
.chat-panel:not(.is-closed) {
    animation: yuc-chat-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* PC 도킹 패널: 배경(부모) 스크롤은 잠그지 않는다 —
   챗봇 위에서 스크롤하면 챗봇만(경계 도달 시 체이닝 차단), 배경에서 스크롤하면 배경이 움직인다.
   (모바일 전면 팝업은 배경이 보이지 않으므로 아래 미디어쿼리에서 계속 잠금) */
.chat-panel .chat-content {
    overscroll-behavior: contain;
}

@keyframes yuc-chat-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1024px) {
    .chat-panel {
        right: 4rem;
        /* 챗봇 플로팅 버튼(.chat-floating--stacked PC)과 하단 라인 일치 */
        bottom: calc(4rem + 5rem + var(--spacing-card-small, 1.2rem));
        /* 상단 4rem 여백 확보: 100dvh - bottom - 4rem */
        height: min(var(--chat-height), calc(100dvh - (4rem + 5rem + var(--spacing-card-small, 1.2rem)) - 4rem));
    }
}

/* 모바일: 전면 팝업 */
@media (max-width: 1023px) {
    .chat-panel {
        inset: 0;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
    }
    .chat-panel .chat-header {
        border-radius: 0;
    }
    .chat-panel .chat-bottom {
        border-radius: 0;
    }
    .chat-panel:not(.is-closed) {
        animation: yuc-chat-rise-full 0.3s ease;
    }
    /* 전면 팝업이 열리면 뒤 페이지 스크롤 잠금 */
    body:has(.chat-panel:not(.is-closed)) {
        overflow: hidden;
    }

    @keyframes yuc-chat-rise-full {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
}

/* 단독 페이지(/chat) 모드: 항상 전체 화면 */
.chat-panel.chat-panel--page {
    position: fixed;
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    z-index: 1;
    animation: none;
}
.chat-panel.chat-panel--page .chat-header,
.chat-panel.chat-panel--page .chat-bottom {
    border-radius: 0;
}

/*
 * 네이티브 앱 전체화면 웹뷰(노치/홈바) 대응.
 * chat.html viewport 에 viewport-fit=cover 가 선언되어 있어야 env() 값이 잡힌다.
 * 일반 브라우저에서는 env() 가 0 이라 영향 없다.
 */
.chat-panel.chat-panel--page {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================
   이전 대화(이력) 화면 — 퍼블 YUC-ADD-500/501 + 피그마 YUC-ADD-502
   ========================================================== */

/* 뒤로가기 아이콘 (퍼블 main.css .ico-prev 동일, 경로만 yuma 기준) */
.chat-ico-box.ico-prev {background-image:url(/assets/img/chat/ico_prev.svg);background-size:14px 16px;}

/* 퍼블 유틸 보충 (이력 UI에서 사용) */
.chat-panel .fw-medium {font-weight:500;}
.chat-common__btn.size-slg {padding:13px 28px;font-size:16px;}

/* 헤더 구성: 이력 화면에서는 뒤로가기만, 그 외에는 우산 아이콘만
   (퍼블 YUC-ANS-05 / YUC-ADD-501 헤더 기준 — chat.js 는 disabled 만 토글하므로 표시는 여기서 제어) */
.chat-panel[data-view="history-list"] .chat-header-left .ico-umbrella,
.chat-panel[data-view="history-detail"] .chat-header-left .ico-umbrella {display:none;}
.chat-panel:not([data-view="history-list"]):not([data-view="history-detail"]) .chat-header__back {opacity:0;pointer-events:none;position:absolute;}

/* 이력 상세 헤더 타이틀 = 세션 제목 (YUC-ADD-502): 한 줄 말줄임 */
.chat-panel[data-view="history-detail"] .chat-header__title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 이력 목록 빈 상태 */
.chat-before__empty {padding:24px 0;text-align:center;}

/* 바텀시트 스타일은 퍼블 본문(main.css 싱크분)에 포함되어 있어 별도 이식 불필요 —
   중복 정의 제거(2026-07-29). 액션 시트 포인터 예외만 파일 하단에서 재정의한다. */

/* 모바일 전면 팝업에서는 시트/패널 라운드 제거 */
@media (max-width: 1023px) {
    .chat-sheet {border-radius:0;}
}

/* 이력 버튼 위치 보정: 입력창(.chat-bottom 좌우 패딩 16px) 우측 끝과 정렬 (퍼블 12px → 16px) */
.chat-fixed__btn--before {right:16px;}

/* ==========================================================
   이력 화면 스크롤 물리 분리 (2026-07-24)
   문제: chat/history-list/history-detail 이 #chatContent 스크롤러 하나를 공유해
        목록에서 내린 스크롤이 곧 채팅의 스크롤 위치를 바꿔 버렸다.
        (+ .chat-content 의 scroll-behavior:smooth 때문에 JS 보정도 전부
         "눈에 보이는 스크롤 이동"으로 나타났다)
   해결: 이력 목록/상세를 frame 기준 절대배치 "자체 스크롤 레이어"로 분리하고,
        그동안 채팅 섹션은 display:none 대신 visibility 로 숨겨 레이아웃(=스크롤
        위치·높이)을 물리적으로 보존한다. #chatContent 는 이력 화면 동안 잠근다.
   ========================================================== */
.chat-panel[data-view="history-list"] .chat-content,
.chat-panel[data-view="history-detail"] .chat-content {
    position: static;      /* 이력 섹션의 absolute 기준을 .chat-content-frame 으로 */
    overflow-y: hidden;    /* 채팅 스크롤러 잠금 — 사용자 스크롤 불가, 위치 보존 */
}

/* 이력 화면 동안 채팅 섹션은 안 보이게만(레이아웃 유지) — scrollTop/scrollHeight 보존 */
.chat-panel[data-view="history-list"] section[data-content-view="chat"][hidden],
.chat-panel[data-view="history-detail"] section[data-content-view="chat"][hidden] {
    display: block !important;
    visibility: hidden;
}

/* 상세를 보는 동안 목록 섹션도 동일 보존 → 뒤로가기로 목록 복귀 시 스크롤 그대로 */
.chat-panel[data-view="history-detail"] section[data-content-view="history-list"][hidden] {
    display: block !important;
    visibility: hidden;
}

/* 이력 목록/상세 = 자체 스크롤 레이어 (.chat-content 와 동일한 패딩/스크롤바 정책) */
.chat-panel .chat-content section[data-content-view="history-list"],
.chat-panel .chat-content section[data-content-view="history-detail"] {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 20px 24px;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-panel .chat-content section[data-content-view="history-list"]::-webkit-scrollbar,
.chat-panel .chat-content section[data-content-view="history-detail"]::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   퍼블 갱신 반영 (2026-07-27, main.css)
   · 신규 컴포넌트/상태 규칙만 선별 이식 — 이미지 경로는 yuma 기준
   · 전역 오염(html/body), 퍼블 데모용 패널 중앙정렬, 바텀시트 [hidden] 방식,
     chat-content 하단패딩·고정버튼 우측정렬은 기존 동작 유지를 위해 미반영
   ========================================================== */

/* 좋아요/싫어요/복사 활성 상태 — 퍼블 전용 활성 아이콘 사용(복사는 체크로 전환) */
.chat_quick__btn.ico-up.active {background-image:url(/assets/img/chat/ico_up_active.svg);}
.chat_quick__btn.ico-down.active {background-image:url(/assets/img/chat/ico_down_active.svg);}
.chat_quick__btn.ico-copy.active {background-image:url(/assets/img/chat/ico_check.svg);}

/* 버튼 hover */
.chat-action__btn:hover,
.chat-action__btn.active:hover {color:var(--color-blue);border-color:var(--color-blue);font-weight:600;}
.chat-common__btn.bg-black:hover {background-color:var(--color-text2);}

/* 아이콘/간격 */
.chat-ico-box.size-20 {width:20px;height:20px;}
.chat-comment__text.ico-magnify {background:url(/assets/img/chat/ico_magnify.svg) center left 4px no-repeat;background-size:16px 16px;}
.chat-message.chat-message--assistant + .chat-message.chat-message--user {margin-top:40px;}
.typing-indicator--center {justify-content:center;}

/* 유틸 (챗봇 스코프 한정) */
.chat-panel .mt-2 {margin-top:2px;}
.chat-panel .mt-12 {margin-top:12px;}
.chat-panel .lh-14 {line-height:1.4;}
.chat-panel .c-orange {color:var(--color-orange);}
.chat-panel .c-green {color:var(--color-green);}
.chat-panel .c-flex-wrap.gap2 {gap:2px;}
.chat-panel .c-flex-wrap.gap8 {gap:8px;}
.chat-panel .c-flex-wrap.gap20 {gap:20px;}

/* 말풍선 내부 박스 */
.chat__white-box {display:block;background-color:var(--color-white);padding:20px;border-radius:12px;box-shadow:0px 4px 20px 0px #0000000A;}
.chat__white-box.pd-sm {padding:16px;}
.chat__white-box + .chat__white-box {margin-top:8px;}
.chat__white-box.link-ver:hover * {text-decoration:underline;}
.chat__line-box {border-top:1px solid var(--border-lightgray2);padding:12px 2px 0;margin-top:16px;}
.chat__line-box.size-sm {margin-top:10px;padding:10px 0 0 0;}
.chat__line-box.size-sm:first-child {border-top:0;padding-top:0;margin-top:0;}

/* 라벨-값 목록 (조회형 답변) */
.c-info-list > li {display:flex;align-items:flex-start;gap:10px;}
.c-info-list > li + li {margin-top:4px;}
.c-info-list > li > span {display:block;}
.c-info-list > li > span:first-child {width:100px;}
.c-info-list > li > span:last-child {width:calc(100% - 100px);}
.c-info-list > li.size-sm > span:first-child {width:60px;}
.c-info-list > li.size-sm > span:last-child {width:calc(100% - 60px);}
.c-info-list > li.size-sm2 > span:first-child {width:80px;}
.c-info-list > li.size-sm2 > span:last-child {width:calc(100% - 80px);}

/*
 * 라벨 열 가변폭 (챗봇 표 카드 한정 — 퍼블 고정폭 위에 덧씌운다)
 *
 * 퍼블은 라벨을 80px 로 고정해 두어 '가입기간' 정도만 넘어도 줄바꿈됐다.
 * ul 을 그리드로 바꾸고 라벨 열을 fit-content(165px) 로 두면
 * 내용만큼 늘어나되 165px 에서 멈춰 그 이상은 다시 줄바꿈된다.
 *
 * 열 단위로 계산되므로 행마다 라벨 폭이 달라지지 않는다(값 열이 세로로 정렬된 채 유지).
 * li 는 display:contents 로 걷어내 span 이 직접 그리드 아이템이 되게 한다
 * (li 박스가 사라지므로 gap/margin 은 그리드의 row-gap 이 대신한다).
 *
 * span 의 min-width 는 퍼블의 기존 고정폭과 같은 값이다 —
 * 라벨이 짧을 때 지금보다 좁아져 레이아웃이 흔들리는 것을 막는 하한선이다.
 */
.chat-panel .c-info-list {display:grid;grid-template-columns:fit-content(165px) minmax(0, 1fr);align-items:start;column-gap:10px;row-gap:4px;}
.chat-panel .c-info-list > li {display:contents;}
.chat-panel .c-info-list > li > span:first-child {width:auto;min-width:100px;}
.chat-panel .c-info-list > li > span:last-child {width:auto;}
.chat-panel .c-info-list > li.size-sm > span:first-child {width:auto;min-width:60px;}
.chat-panel .c-info-list > li.size-sm > span:last-child {width:auto;}
.chat-panel .c-info-list > li.size-sm2 > span:first-child {width:auto;min-width:80px;}
.chat-panel .c-info-list > li.size-sm2 > span:last-child {width:auto;}

/* 표 (조회형 답변) */
.c-info-table {width:100%;}
.c-info-table > table {width:100%;table-layout:fixed;}
.c-info-table thead th {text-align:left;padding:8px;background-color:var(--bg-blue2);}
.c-info-table thead th:first-child {padding-left:20px;border-top-left-radius:12px;}
.c-info-table thead th:last-child {padding-right:20px;border-top-right-radius:12px;}
.c-info-table .c-th-wrap {font-size:12px;color:rgba(17, 17, 17, 0.7);line-height:1.52;}
.c-info-table .c-th-wrap.c-blue {color:var(--color-blue);}
.c-info-table .c-td-wrap {font-size:12px;color:rgba(17, 17, 17, 0.7);line-height:1.52;}
.c-info-table tbody td {padding:8px;background-color:var(--color-white);}
.c-info-table tbody td:first-child {text-align:left;padding-left:20px;}
.c-info-table tbody td:last-child {padding-right:20px;}
.c-info-table tbody tr + tr {border-top:1px solid var(--border-lightgray2);}
.c-info-table .c-info-foot {padding:8px 20px;background-color:var(--color-white);border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-top:1px solid var(--border-lightgray2);}

/* 뱃지/구분선 목록/점 목록 */
.c-badge {display:inline-block;padding:1px 6px;border-radius:26px;background-color:var(--bg-blue);font-size:11px;font-weight:500;line-height:1.52;color:var(--color-text-blue2);}
.c-notice-wrap.bt-line {border-top:1px solid var(--border-lightgray2);}
.line-list {display:flex;flex-direction:column;}
.line-list > li {padding-bottom:14px;}
.line-list > li + li {padding-top:14px;border-top:1px solid var(--border-lightgray2);}
.line-list > li:last-child {padding-bottom:0;}
.vtl-line-list {display:flex;flex-wrap:wrap;}
.vtl-line-list > li + li {position:relative;margin-left:10px;padding-left:10px;}
.vtl-line-list > li + li::before {content:"";position:absolute;top:50%;left:0;width:1px;height:14px;background-color:var(--border-lightgray2);transform:translateY(-50%);}
.chat-panel .txt-dot {font-size:14px;font-weight:400;padding-left:20px;position:relative;}
.chat-panel .txt-dot::before {content:"";width:3px;height:3px;border-radius:50%;background-color:var(--color-black);position:absolute;left:8px;top:10px;}
.chat-panel .notice-dot {font-size:12px;font-weight:400;color:var(--color-gray);padding-left:18px;background:url(/assets/img/chat/ico_people.svg) left top no-repeat;background-size:14px 16px;}
.chat-panel .text-ico {padding-left:18px;background-position:left top -2px;background-size:16px;background-repeat:no-repeat;}
.chat-panel .text-ico.ico-pin {background-image:url(/assets/img/chat/ico_pin.svg);}

/* ==========================================================
   yuma 커스텀 보강 (퍼블에 없는 개발 연동 전용 규칙)
   · 카드(list/table/grid)·notices 는 퍼블 컴포넌트로 이관되어 별도 규칙 불필요
   ========================================================== */

/* LLM 응답 마크다운 볼드 **문구** — 피그마 지정 색(#0063E3) */
.chat-md-bold {font-weight:700;color:var(--color-blue);}
/*
 * 다크 대응. 이 클래스는 yuma 자체 클래스라 퍼블 다크 블록이 덮어주지 않는다.
 * 퍼블은 강조 파랑을 .c-blue → --chat-info-blue(#6DA9F8) 로 밝히므로 동일하게 맞춘다.
 * (--color-blue 자체는 퍼블이 다크에서도 #0063E3 그대로라 변수만으론 해결되지 않는다)
 */
[data-theme="dark"] .chat-md-bold {color:var(--chat-info-blue);}

/* 조회 결과(표/리스트) 대기 로더 — 텍스트 스트림이 멈춘 동안 말풍선 안 흰 카드 */
/*
 * 카드 대기 로더 — 2단계.
 * 로더는 tool_result 수신 "전에" 뜨므로, 뜨는 시점엔 카드가 올지 알 수 없다.
 *  · 기본(.chat-card-loading)      : 배경 없이 점 3개만.
 *      actions 만 오는 답변에서 빈 흰 카드가 깜빡이는 것을 막는다.
 *  · 카드 확정(.is-card)           : tool_result 수신 후 흰 카드 플레이스홀더로 승격.
 *      실제 카드가 그려질 자리이므로 배경을 유지해 자리 이동이 없다.
 */
.chat-card-loading {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:12px;
    padding:8px 0;
}

.chat-card-loading.is-card {
    padding:20px;
    background-color:var(--color-white);
    border-radius:12px;
    box-shadow:0px 4px 20px 0px #0000000A;
}

/* ==========================================================
   인트로 계정유형 래퍼 높이 이어받기
   퍼블 단일 화면(YUC-MAI-302_2 등)은 .chat-intro 바로 아래에 콘텐츠가 오지만,
   우리는 계정유형 분기를 위해 [data-intro-account] 래퍼가 한 겹 더 있다.
   이 래퍼가 높이를 못 받으면 그 안의 .c-intro-type{flex:1} 이 늘어나지 못해
   우측 하단 캐릭터(.chat-intro-ico, absolute bottom:0)가 콘텐츠 길이에 따라 떠다닌다.
   → 래퍼도 세로 flex + 남은 높이를 채우게 해 캐릭터를 영역 하단에 고정한다.
   ([hidden] 래퍼는 `.chat-panel [hidden]{display:none!important}` 가 우선이라 영향 없음)
   ========================================================== */
.chat-intro > [data-intro-account] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ==========================================================
   서비스 오류 전면 안내 (퍼블 YUC-COM-102 ERROR-01/02)
   퍼블은 .chat-content 를 통째로 오류 화면으로 교체하지만, 우리는 인트로/채팅/이력 뷰가
   같은 컨테이너를 공유하므로 프레임 위에 덮는 오버레이로 처리한다(뷰 상태 보존).
   입력창은 .chat-panel.is-unavailable 규칙(퍼블 원본)이 숨긴다.
   ========================================================== */
.chat-error {
    position: absolute;
    inset: 0;
    z-index: 20;
    padding: 24px 20px;
    background-color: var(--color-white);
}

/* 추천질문(actions)이 없어 좋아요/복사 영역이 말풍선 바로 뒤에 오는 경우 간격 보정.
   퍼블에는 `.chat-action__btn-container + .chat_quick__btn-container` 규칙만 있어
   직접 인접하면 말풍선에 딱 붙는다. */
.chat-message__bubble + .chat_quick__btn-container {margin-top:10px;}

/* ==========================================================
   이력 상세 액션 시트: 포인터 통과
   .chat-sheet 는 패널 전체(inset:0, z-index:300)를 덮고 .active 에서 pointer-events:auto 가
   되므로, 상세 화면 내내 떠 있는 액션 시트가 헤더 닫기(X)와 본문 스크롤을 가로챈다.
   배경 차단이 필요 없는 액션 시트만 통과시키고, 실제 버튼이 있는 패널만 클릭을 받는다.
   (이전대화보기 안내 시트는 모달이므로 기존 동작 유지)
   ========================================================== */
.chat-sheet--action.active,
.chat-sheet--action .chat-sheet__backdrop {
    pointer-events: none;
}
.chat-sheet--action .chat-sheet__panel {
    pointer-events: auto;
}

/*
 * 액션 시트는 모달 시트보다 아래에 깔린다.
 *
 * .chat-sheet 는 전부 z-index:300 인데 이 시트가 마크업상 가장 마지막이라,
 * 같은 값이면 뒤에 온 쪽이 위로 올라온다.
 * 그래서 이력 상세에서 출처 시트를 열면 딤은 보이는데 패널이 이 시트 뒤에 깔리고,
 * pointer-events:auto 인 액션 버튼이 클릭까지 가로챘다.
 * (로그인 만료 안내 시트도 같은 이유로 묻힌다 — 새 대화 클릭 시 verifySession 이 띄운다)
 *
 * 이 시트는 상세 화면 내내 떠 있는 '하단 바'이지 모달이 아니므로,
 * 콘텐츠(z-index 없음)보다는 위, 모달 시트(300)보다는 아래인 290 에 둔다.
 */
.chat-sheet--action {
    z-index: 290;
}

/*
 * 액션 시트는 딤 처리하지 않는다 — 이력 상세를 보는 내내 떠 있는 UI라
 * 배경을 가리면 대화 내용이 어두워진다. (모달인 안내/확인 시트와 다르다)
 *
 * 다크에서도 유지해야 한다. 퍼블 다크의 `[data-theme="dark"] .chat-sheet__backdrop`
 * 이 위 `.chat-sheet--action .chat-sheet__backdrop{background:transparent}` 과
 * 특정도가 같아(0,2,0) 뒤에 오는 다크 규칙이 이겨버리기 때문에,
 * 한 단계 더 구체적인 셀렉터로 다시 눌러준다.
 */
[data-theme="dark"] .chat-sheet--action .chat-sheet__backdrop {
    background: transparent;
}

/* 액션 시트에 가려 마지막 대화가 안 보이지 않도록 상세 영역 하단 여백 확보 */
.chat-panel[data-view="history-detail"] .chat-content section[data-content-view="history-detail"] {
    padding-bottom: 140px;
}

/* ==========================================================
   스크롤바 UI 숨김 (스크롤 동작은 유지)
   퍼블 CSS 전면 싱크 때 유실되어 본 대화 영역에 스크롤바가 노출됐다.
   사이트 .page-layout 과 동일한 패턴.
   ========================================================== */
.chat-content,
.chat-composer__textarea {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* 구형 Edge/IE */
}
.chat-content::-webkit-scrollbar,
.chat-composer__textarea::-webkit-scrollbar {
    display: none;              /* Chrome/Safari/Edge */
}

/* 퍼블 main.css 누락분 보충 (2026-07-29) */
* + .chat_attach-container {margin-top:16px;}

/* 출처(sources) 노출 방식 (퍼블 YUC-ADD-511)
   PC·모바일 모두 바텀시트로 통일 — 인라인 목록은 해상도와 무관하게 감춘다.
   (엘리먼트 자체는 data-chat-sources 보관용으로 DOM 에 남겨둔다) */
.chat_attach-container {
    display: none !important;
}


/* ==========================================================
   다크모드 (퍼블 2026-07-31 추가분 이식)
   ----------------------------------------------------------
   · 퍼블 원본은 <body class="dark-mode"> 로 켠다.
     yuma 는 common.js 가 <html data-theme="dark"> 를 심으므로
     셀렉터를 [data-theme="dark"] 로 치환해 이식했다.
   · 변수는 chat.css 상단에서 .chat-panel / .chat__open-button 에
     "직접" 선언돼 있다. 커스텀 프로퍼티는 가장 가까운 조상 선언이 이기므로
     html 에만 얹으면 무시된다 → 같은 엘리먼트에 더 높은 특정도로 재선언한다.
   · 이미지: ../images/darkmode/ → /assets/img/chat/darkmode/ (29개 복사)
     (퍼블 원본의 ico_atomic_check_dark.svg 경로 오타는 실제 위치로 교정)
   ========================================================== */

[data-theme="dark"] .chat-panel,
[data-theme="dark"] .chat__open-button {
    /* chat semantic colors (확정된 다크모드 색상) */
    --chat-surface: #3D3D3D;
    --chat-surface-transparent: rgba(61, 61, 61, 0);
    --chat-surface-session: #525252;
    --chat-text-on-yellow: #524700;
    --chat-text-on-user-message: #111111;
    --chat-text-muted: rgba(255, 255, 255, 0.5);
    --chat-text-table: rgba(255, 255, 255, 0.8);
    --chat-action-active-bg: #022D64;
    --chat-accent-blue: #044395;
    --chat-info-blue: #6DA9F8;
    --chat-step-bg: #414850;
    --chat-step-border: rgba(163, 197, 240, 0.2);
    --chat-step-present-bg: #C4DCFD;
    --chat-table-head-bg: #596471;
    --chat-form-border-start: #FFE74D;
    --chat-form-border-end: #FFD466;
    --chat-form-shadow: rgb(255 212 102 / 24%);
    --chat-backdrop: rgba(0, 0, 0, 0.5);

    /* color */
    --color-primary: #FFD200;
    --color-primary-dark: #EBB400;
    --color-black: #fafafa;/**/
    --color-black2: #fafafa;/**/
    --color-white: #3D3D3D;/**/
    --color-blue:#0063E3;
    --color-text-blue:#4777AE;
    --color-text-blue2:#3A8CF8;
    --color-darkblue:#143D6E;
    --color-orange:#D19705;
    --color-green:#63908C;
    --color-text: #FAFAFA;/**/
    --color-text2: #2E3338;
    --color-gray:#CCCCCC;/**/
    --color-gray2:rgba(17, 17, 17, 0.5);
    --color-gray3:#7A7A7A;/**/
    --color-gray4:#9E9E9E;/**/
    --color-gray5: #696969;/**/
    --color-disabled: rgba(255, 255, 255, 0.18);/**/

    /* bg */
    --bg-lightgray: #2B2B2B;/**/
    --bg-lightgray2: #E3E5E8;
    --bg-lightblue: #E7F2FE;
    --bg-blue:#CCE8FB;
    --bg-blue2:#D6EAFF;
    --bg-orange: #FFF3E0;
    --bg-lightpink:#AB5862;
    --bg-primary-hover:rgb(255, 218, 51) !important;

    /* border */
    --border-lightgray: #5C5C5C;/**/
    --border-lightgray2: #5C5C5C;
    --border-blue: #C0DAFC;
    --border-btn: #5C5C5C;
}


/* 페이지 및 챗봇 기본 배경 */
[data-theme="dark"] .chat-panel {border:1px solid var(--border-btn);}
/* 헤더 */
[data-theme="dark"] .chat-header__button.ico-close {background-image:url(/assets/img/chat/darkmode/ico_close_dark.svg);}
[data-theme="dark"] .chat-header__button.ico-before-chat {background-image:url(/assets/img/chat/darkmode/ico_before_chat_dark.svg);}
/* 퍼블의 .chat-header__back 아이콘 규칙(우산 / 모바일 prev)은 이식하지 않는다.
   퍼블은 이 버튼 자체를 우산 로고로 쓰지만, yuma 마크업은
   #beforePage 를 `chat-header__back chat-ico-box ico-prev` 로 두어 뒤로가기 전용이고
   우산은 별도 span 이다. 아이콘은 .chat-ico-box.ico-prev 다크 규칙이 이미 처리한다. */
/* 인트로 */
[data-theme="dark"] .chat-ico-box.shadow-ver {background-color:#353535;border:1px solid var(--border-btn);}
[data-theme="dark"] .chat-ico-box.bg-gray {background-color:#353535;box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.05);}
[data-theme="dark"] .chat-ico-box.ico-umbrella {background-image:url(/assets/img/chat/darkmode/ico_umbrella_dark.svg);}
[data-theme="dark"] .chat-ico-box.ico-download {background-image:url(/assets/img/chat/darkmode/ico_download_dark.svg);}
[data-theme="dark"] .chat-ico-box.ico-notice {background-image:url(/assets/img/chat/darkmode/ico_notice_dark.svg);}
[data-theme="dark"] .chat-ico-box.ico-reset {background-image:url(/assets/img/chat/darkmode/ico_reset_dark.svg);}
[data-theme="dark"] .chat-ico-box.ico-arrow-down {background-image:url(/assets/img/chat/darkmode/ico_arrow_down_dark.svg);background-size:14px 16px;}
[data-theme="dark"] .chat-ico-box.ico-prev {background-image:url(/assets/img/chat/darkmode/ico_prev_dark.svg);background-size:14px 16px;}
[data-theme="dark"] .chat-ico-box.ico-clock {background-image:url(/assets/img/chat/darkmode/ico_before_clock_dark.svg);}
/* 2. 하단 */

[data-theme="dark"] .chat-bottom {background:linear-gradient(180deg, var(--chat-surface-transparent) 0%, var(--chat-surface) 8.2%);}
[data-theme="dark"] .chat-form {
    border: 2px solid transparent;
    border-radius: 29px;
    background:
            linear-gradient(var(--chat-surface), var(--chat-surface)) padding-box,
            linear-gradient(
                    90deg,
                    var(--chat-form-border-start) 28.3%,
                    var(--chat-form-border-end) 96.6%
            ) border-box;
    box-shadow:0 8px 20px var(--chat-form-shadow);
}

[data-theme="dark"] .chat-composer__textarea::-webkit-scrollbar,
[data-theme="dark"] .chat-composer__textarea::-webkit-scrollbar-track,
[data-theme="dark"] .chat-composer__textarea::-webkit-scrollbar-corner {
    background:var(--chat-surface);
}
[data-theme="dark"] .chat-composer__textarea::-webkit-scrollbar {
    width:4px;
}
[data-theme="dark"] .chat-composer__textarea::-webkit-scrollbar-button {
    background-color:var(--chat-surface);
}
[data-theme="dark"] .chat-composer__textarea::-webkit-scrollbar-thumb {
    background-color:var(--color-gray3);
    border-radius:4px;
}
[data-theme="dark"] .chat-composer__textarea::-webkit-scrollbar-thumb:hover {
    background-color:var(--color-gray4);
}
[data-theme="dark"] .chat-composer__textarea {color: var(--color-text);}
[data-theme="dark"] .chat-composer__textarea::placeholder {color: var(--color-gray5);}
[data-theme="dark"] .chat-bottom__notice,
[data-theme="dark"] .chat-bottom__notice > span {color:var(--chat-text-muted);}
/* 전송 버튼 */
[data-theme="dark"] .chat-composer__submit {background-color:var(--bg-lightgray2);background-image:url(/assets/img/chat/darkmode/ico_arrow_up_white_dark.svg);}
[data-theme="dark"] .chat-composer__submit:disabled {background-color:var(--color-disabled);}
[data-theme="dark"] .chat-composer__stop {background-color:var(--color-black);background-image: url(/assets/img/chat/darkmode/ico_arrow_stop_white_dark.svg);}
[data-theme="dark"] .chat-composer__stop:disabled {background-color:var(--color-disabled);}
/* 3. 대화영역 */
/* Chrome, Edge, Safari */
/* 전체 인트로가 재생되는 동안에는 content-frame의 이전 기록 버튼을 숨깁니다. */
/*  챗 바텀시트 */
[data-theme="dark"] .chat-sheet__backdrop {background:var(--chat-backdrop);}
[data-theme="dark"] .chat-sheet__close {background:url(/assets/img/chat/darkmode/ico_close_dark.svg) center center no-repeat;}
[data-theme="dark"] .chat-sheet__text {color:var(--color-gray);}
/* 간격 */
/* 바텀 */
/* 메시지 */
[data-theme="dark"] .chat-message--user .chat-message__text {color:var(--chat-text-on-user-message);}
/* 사용자 메시지 */
/* 챗봇 메시지 */
[data-theme="dark"] .chat-message--assistant .chat-message__bubble::before {content:'';width:14px;height:14px;background:url(/assets/img/chat/darkmode/ico_tri_dark.svg) center no-repeat;}
[data-theme="dark"] .chat-message--assistant .chat-message__bubble.bg-pink::before {background:url(/assets/img/chat/darkmode/ico_tri_pink_dark.svg) center no-repeat;}

/* 챗봇 메시지 답변 디자인 */
[data-theme="dark"] .chat-comment__text {color:var(--color-gray4);}
[data-theme="dark"] .chat-comment__text.ico-chat {background: url(/assets/img/chat/darkmode/ico_chat_dark.svg) center left 4px no-repeat;}
[data-theme="dark"] .chat-comment__text.ico-paper {background: url(/assets/img/chat/darkmode/ico_paper_dark.svg) center left 4px no-repeat;}
[data-theme="dark"] .chat-comment__text.ico-magnify {background: url(/assets/img/chat/darkmode/ico_magnify_dark.svg) center left 4px no-repeat;}

/* 액션 버튼 모음 */
[data-theme="dark"] .chat-action__btn {color:var(--color-gray);}
[data-theme="dark"] .chat-action__btn.active {background-color:var(--chat-action-active-bg);border-color:var(--chat-accent-blue);}
[data-theme="dark"] .chat-action__btn.active:hover {color:var(--color-blue);border-color:var(--color-blue);}
[data-theme="dark"] .chat-action__btn:hover {color:var(--color-blue);border-color:var(--color-blue);}
[data-theme="dark"] .chat-action__btn.insert-ico.ico-reset-black {background-image:url(/assets/img/chat/darkmode/ico_reset_black_dark.svg);}

/* 채팅 입력 애니메이션 */
/* 퀵 채팅 버튼 박스 */
[data-theme="dark"] .chat_quick__btn.ico-up {background-image:url(/assets/img/chat/darkmode/ico_up_dark.svg);}
[data-theme="dark"] .chat_quick__btn.ico-up.active {background-image:url(/assets/img/chat/darkmode/ico_up_active_dark.svg);}
[data-theme="dark"] .chat_quick__btn.ico-down {background-image:url(/assets/img/chat/darkmode/ico_down_dark.svg);}
[data-theme="dark"] .chat_quick__btn.ico-down.active {background-image:url(/assets/img/chat/darkmode/ico_down_active_dark.svg);}
[data-theme="dark"] .chat_quick__btn.ico-copy {background-image:url(/assets/img/chat/darkmode/ico_copy_dark.svg);}
[data-theme="dark"] .chat_quick__btn.ico-copy.active {background-image:url(/assets/img/chat/darkmode/ico_check_dark.svg);}
[data-theme="dark"] .chat_quick__btn.ico-source {background-image:url(/assets/img/chat/darkmode/ico_source_dark.svg);}
/* 텍스트 입력 */
[data-theme="dark"] .c-blue {color:var(--chat-info-blue);}
[data-theme="dark"] .txt__check-list > li {background:url(/assets/img/chat/darkmode/ico_atomic_check_dark.svg) left center no-repeat;}
[data-theme="dark"] .notice-dot {background:url(/assets/img/chat/darkmode/ico_people_dark.svg) left top no-repeat;}
/* 채팅 내 테이블 */
[data-theme="dark"] .c-info-table thead th {background-color:var(--chat-table-head-bg);}
[data-theme="dark"] .c-info-table .c-th-wrap {color:var(--chat-text-table);}
[data-theme="dark"] .c-info-table .c-th-wrap.c-blue {color:var(--chat-info-blue);}
[data-theme="dark"] .c-info-table .c-td-wrap {color:var(--chat-text-table);}
/* 채팅 내 스텝박스 */
[data-theme="dark"] .c-step-list > li:not(:last-child)::before {
    background:repeating-linear-gradient(
            to bottom,
            var(--chat-accent-blue) 0 4px,
            transparent 4px 8px
    );
}
[data-theme="dark"] .c-step-list > li > .c-circle + div {width:calc(100% - 22px);}
[data-theme="dark"] .c-circle {color:var(--chat-info-blue);background-color:var(--chat-step-bg);border-color:var(--chat-step-border);}
[data-theme="dark"] .c-circle.step-finished {background-image:url(/assets/img/chat/darkmode/ico_atomic_check_lightblue_dark.svg);}
[data-theme="dark"] .c-circle.step-present {background-color:var(--chat-step-present-bg);}
[data-theme="dark"] .c-circle.step-present::after {background-color:var(--color-blue);}
[data-theme="dark"] .c-badge {background-color:var(--chat-table-head-bg);color:var(--border-blue);}
/* 버튼 */
[data-theme="dark"] .chat-common__btn.dark-bg-ver {background-color:var(--border-btn);}
[data-theme="dark"] .chat-common__btn.bg-yellow {color:var(--chat-text-on-yellow);}
[data-theme="dark"] .chat-common__btn.bg-black {background-color:var(--color-black);border-color:var(--color-black);color:var(--color-white);}
[data-theme="dark"] .chat-common__btn.bg-black:hover{background-color:#fff;border-color:#fff;color:#474747;}
/* 세션만료 */
[data-theme="dark"] .chat-bottom__session-expired {background-color:var(--chat-surface-session);}
/* 출처 */
[data-theme="dark"] .chat_attach-container {border-left-color:var(--chat-accent-blue);}

/*
 * 이전 대화목록 화살표 (퍼블 main.css:578 이식).
 * 퍼블 원본은 다크 섹션 안에 있으면서 body.dark-mode 접두사가 빠져 있어
 * 라이트에서도 다크 아이콘이 적용된다(특정도 0,3,0 이 라이트 0,2,0 을 이김).
 * 명백한 오타로 보고 다크 전용으로 바로잡아 이식한다.
 */
[data-theme="dark"] .chat-before-list .chat-ico-box.ico-arrow-right-blue {
    background-image:url(/assets/img/chat/darkmode/ico_arrow_right_blue_dark.svg);
}


/*
 * 오류 전면 안내(YUC-COM-102)의 아이콘만 data URI 로 인라인한다.
 *
 * 이 두 아이콘은 .js-chat-error 안에서만 쓰이는데, 이 영역은 평소 hidden(=display:none)이라
 * 브라우저가 배경 이미지를 아예 요청하지 않는다. 즉 최초 요청 시점이 '화면을 띄우는 순간'이다.
 * 백엔드 오류(ERROR-01)는 회선이 살아 있어 그때 받아오지만,
 * 네트워크 단절(ERROR-02)은 '끊긴 상태'에서 뜨는 화면이라 그 요청이 실패해 아이콘만 빈칸이 된다.
 * (앞서 다른 화면에서 캐시된 적이 있으면 보이므로 '됐다 안 됐다' 하는 것처럼 보인다)
 *
 * 파일을 그대로 인라인한 것이라 모양·색은 퍼블 원본과 동일하다. 합쳐서 4KB 남짓.
 */
.chat-ico-box.ico-notice {background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMzBDMCAxMy40MzE1IDEzLjQzMTUgMCAzMCAwQzQ2LjU2ODUgMCA2MCAxMy40MzE1IDYwIDMwQzYwIDQ2LjU2ODUgNDYuNTY4NSA2MCAzMCA2MEMxMy40MzE1IDYwIDAgNDYuNTY4NSAwIDMwWiIgZmlsbD0iI0ZGREQwMCIvPgo8cGF0aCBkPSJNMjYuMzE5IDE5LjQ4NzNDMjYuMTQ3MSAxNy4zMzg2IDI3Ljg0NDQgMTUuNSAzMCAxNS41QzMyLjE1NTYgMTUuNSAzMy44NTI5IDE3LjMzODYgMzMuNjgxIDE5LjQ4NzNMMzIuNTkxNCAzMy4xMDc2QzMyLjQ4MzMgMzQuNDU4NyAzMS4zNTU0IDM1LjUgMzAgMzUuNUMyOC42NDQ2IDM1LjUgMjcuNTE2NyAzNC40NTg3IDI3LjQwODYgMzMuMTA3NkwyNi4zMTkgMTkuNDg3M1oiIGZpbGw9IiMxMTExMTEiLz4KPGNpcmNsZSBjeD0iMzAiIGN5PSI0MS41IiByPSIzIiBmaWxsPSIjMTExMTExIi8+Cjwvc3ZnPgo=");}
.chat-ico-box.ico-download {background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk4NzMgOC4xMjM0NEM1LjkzNzA1IDguMTIzNDQgNS44Nzk2NyA4LjExMzI3IDUuODI2NjEgOC4wOTI5MkM1Ljc3MzQ1IDguMDcyNjcgNS43MjE4OSA4LjAzNzUyIDUuNjcxOTIgNy45ODc0NUwzLjU4MTI1IDUuODk2OTJDMy40ODc1IDUuODAxNDggMy40NDI5NyA1LjY5MDExIDMuNDQ3NjYgNS41NjI4QzMuNDUyMzQgNS40MzU0OCAzLjQ5ODggNS4zMjQ5NSAzLjU4NzAyIDUuMjMxMkMzLjY4MzIgNS4xMzc0NSAzLjc5NjEyIDUuMDg5ODMgMy45MjU3OCA1LjA4ODMzQzQuMDU1NDQgNS4wODY3MyA0LjE2NzE0IDUuMTMyODEgNC4yNjA4OSA1LjIyNjU2TDUuNTMxMyA2LjUwNjI1VjEuOTY4N0M1LjUzMTMgMS44MzU5NSA1LjU3NjM0IDEuNzI0NjMgNS42NjY0NCAxLjYzNDcyQzUuNzU2NjIgMS41NDQ5MSA1Ljg2ODM3IDEuNSA2LjAwMTY5IDEuNUM2LjEzNDkxIDEuNSA2LjI0NjA1IDEuNTQ0OTEgNi4zMzUxMSAxLjYzNDcyQzYuNDI0MTcgMS43MjQ2MyA2LjQ2ODcgMS44MzU5NSA2LjQ2ODcgMS45Njg3VjYuNTA2MjVMNy43NDgzOSA1LjIyNjU2QzcuODQwOTIgNS4xMzI4MSA3Ljk1MDggNS4wODgyOCA4LjA3ODAyIDUuMDkyOTdDOC4yMDUxNCA1LjA5NzY2IDguMzE2OCA1LjE0Njg3IDguNDEyOTggNS4yNDA2MkM4LjUwMTIgNS4zMzQzNyA4LjU0NjExIDUuNDQ1MzMgOC41NDc3IDUuNTczNDhDOC41NDkyIDUuNzAxNTUgOC41MDMwOCA1LjgxMjQ1IDguNDA5MzMgNS45MDYyTDYuMzI4MDggNy45ODc0NUM2LjI3ODExIDguMDM3NTIgNi4yMjYxMiA4LjA3MjY3IDYuMTcyMTIgOC4wOTI5MkM2LjExODIyIDguMTEzMjcgNi4wNjA0MiA4LjEyMzQ0IDUuOTk4NzMgOC4xMjM0NFpNMi40Mzc1NSAxMC41QzIuMTg0NDIgMTAuNSAxLjk2NDg2IDEwLjQwNyAxLjc3ODg2IDEwLjIyMTFDMS41OTI5NSAxMC4wMzUxIDEuNSA5LjgxNTU4IDEuNSA5LjU2MjQ1VjguMTI4MDhDMS41IDcuOTk1MzMgMS41NDUwOSA3Ljg4NCAxLjYzNTI4IDcuNzk0MDlDMS43MjUzNyA3LjcwNDI4IDEuODM3MDggNy42NTkzNyAxLjk3MDM5IDcuNjU5MzdDMi4xMDM3IDcuNjU5MzcgMi4yMTQ4OSA3LjcwNDI4IDIuMzAzOTUgNy43OTQwOUMyLjM5MzAyIDcuODg0IDIuNDM3NTUgNy45OTUzMyAyLjQzNzU1IDguMTI4MDhWOS41NjI0NUg5LjU2MjQ1VjguMTI4MDhDOS41NjI0NSA3Ljk5NTMzIDkuNjA3NTUgNy44ODQgOS42OTc3MyA3Ljc5NDA5QzkuNzg3OTIgNy43MDQyOCA5Ljg5OTYyIDcuNjU5MzcgMTAuMDMyOCA3LjY1OTM3QzEwLjE2NjIgNy42NTkzNyAxMC4yNzczIDcuNzA0MjggMTAuMzY2NCA3Ljc5NDA5QzEwLjQ1NTUgNy44ODQgMTAuNSA3Ljk5NTMzIDEwLjUgOC4xMjgwOFY5LjU2MjQ1QzEwLjUgOS44MTU1OCAxMC40MDcgMTAuMDM1MSAxMC4yMjExIDEwLjIyMTFDMTAuMDM1MSAxMC40MDcgOS44MTU1OCAxMC41IDkuNTYyNDUgMTAuNUgyLjQzNzU1WiIgZmlsbD0iIzExMTExMSIvPgo8L3N2Zz4K");}
[data-theme="dark"] .chat-ico-box.ico-notice {background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMzBDMCAxMy40MzE1IDEzLjQzMTUgMCAzMCAwQzQ2LjU2ODUgMCA2MCAxMy40MzE1IDYwIDMwQzYwIDQ2LjU2ODUgNDYuNTY4NSA2MCAzMCA2MEMxMy40MzE1IDYwIDAgNDYuNTY4NSAwIDMwWiIgZmlsbD0iI0ZGREQwMCIvPgo8cGF0aCBkPSJNMjYuMzE5IDE5LjQ4NzNDMjYuMTQ3MSAxNy4zMzg2IDI3Ljg0NDQgMTUuNSAzMCAxNS41QzMyLjE1NTYgMTUuNSAzMy44NTI5IDE3LjMzODYgMzMuNjgxIDE5LjQ4NzNMMzIuNTkxNCAzMy4xMDc2QzMyLjQ4MzMgMzQuNDU4NyAzMS4zNTU0IDM1LjUgMzAgMzUuNUMyOC42NDQ2IDM1LjUgMjcuNTE2NyAzNC40NTg3IDI3LjQwODYgMzMuMTA3NkwyNi4zMTkgMTkuNDg3M1oiIGZpbGw9IiM1MjQ3MDAiLz4KPGNpcmNsZSBjeD0iMzAiIGN5PSI0MS41IiByPSIzIiBmaWxsPSIjNTI0NzAwIi8+Cjwvc3ZnPgo=");}
[data-theme="dark"] .chat-ico-box.ico-download {background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk4NzMgOC4xMjM0NEM1LjkzNzA1IDguMTIzNDQgNS44Nzk2NyA4LjExMzI3IDUuODI2NjEgOC4wOTI5MkM1Ljc3MzQ1IDguMDcyNjcgNS43MjE4OSA4LjAzNzUyIDUuNjcxOTIgNy45ODc0NUwzLjU4MTI1IDUuODk2OTJDMy40ODc1IDUuODAxNDggMy40NDI5NyA1LjY5MDExIDMuNDQ3NjYgNS41NjI4QzMuNDUyMzQgNS40MzU0OCAzLjQ5ODggNS4zMjQ5NSAzLjU4NzAyIDUuMjMxMkMzLjY4MzIgNS4xMzc0NSAzLjc5NjEyIDUuMDg5ODMgMy45MjU3OCA1LjA4ODMzQzQuMDU1NDQgNS4wODY3MyA0LjE2NzE0IDUuMTMyODEgNC4yNjA4OSA1LjIyNjU2TDUuNTMxMyA2LjUwNjI1VjEuOTY4N0M1LjUzMTMgMS44MzU5NSA1LjU3NjM0IDEuNzI0NjMgNS42NjY0NCAxLjYzNDcyQzUuNzU2NjIgMS41NDQ5MSA1Ljg2ODM3IDEuNSA2LjAwMTY5IDEuNUM2LjEzNDkxIDEuNSA2LjI0NjA1IDEuNTQ0OTEgNi4zMzUxMSAxLjYzNDcyQzYuNDI0MTcgMS43MjQ2MyA2LjQ2ODcgMS44MzU5NSA2LjQ2ODcgMS45Njg3VjYuNTA2MjVMNy43NDgzOSA1LjIyNjU2QzcuODQwOTIgNS4xMzI4MSA3Ljk1MDggNS4wODgyOCA4LjA3ODAyIDUuMDkyOTdDOC4yMDUxNCA1LjA5NzY2IDguMzE2OCA1LjE0Njg3IDguNDEyOTggNS4yNDA2MkM4LjUwMTIgNS4zMzQzNyA4LjU0NjExIDUuNDQ1MzMgOC41NDc3IDUuNTczNDhDOC41NDkyIDUuNzAxNTUgOC41MDMwOCA1LjgxMjQ1IDguNDA5MzMgNS45MDYyTDYuMzI4MDggNy45ODc0NUM2LjI3ODExIDguMDM3NTIgNi4yMjYxMiA4LjA3MjY3IDYuMTcyMTIgOC4wOTI5MkM2LjExODIyIDguMTEzMjcgNi4wNjA0MiA4LjEyMzQ0IDUuOTk4NzMgOC4xMjM0NFpNMi40Mzc1NSAxMC41QzIuMTg0NDIgMTAuNSAxLjk2NDg2IDEwLjQwNyAxLjc3ODg2IDEwLjIyMTFDMS41OTI5NSAxMC4wMzUxIDEuNSA5LjgxNTU4IDEuNSA5LjU2MjQ1VjguMTI4MDhDMS41IDcuOTk1MzMgMS41NDUwOSA3Ljg4NCAxLjYzNTI4IDcuNzk0MDlDMS43MjUzNyA3LjcwNDI4IDEuODM3MDggNy42NTkzNyAxLjk3MDM5IDcuNjU5MzdDMi4xMDM3IDcuNjU5MzcgMi4yMTQ4OSA3LjcwNDI4IDIuMzAzOTUgNy43OTQwOUMyLjM5MzAyIDcuODg0IDIuNDM3NTUgNy45OTUzMyAyLjQzNzU1IDguMTI4MDhWOS41NjI0NUg5LjU2MjQ1VjguMTI4MDhDOS41NjI0NSA3Ljk5NTMzIDkuNjA3NTUgNy44ODQgOS42OTc3MyA3Ljc5NDA5QzkuNzg3OTIgNy43MDQyOCA5Ljg5OTYyIDcuNjU5MzcgMTAuMDMyOCA3LjY1OTM3QzEwLjE2NjIgNy42NTkzNyAxMC4yNzczIDcuNzA0MjggMTAuMzY2NCA3Ljc5NDA5QzEwLjQ1NTUgNy44ODQgMTAuNSA3Ljk5NTMzIDEwLjUgOC4xMjgwOFY5LjU2MjQ1QzEwLjUgOS44MTU1OCAxMC40MDcgMTAuMDM1MSAxMC4yMjExIDEwLjIyMTFDMTAuMDM1MSAxMC40MDcgOS44MTU1OCAxMC41IDkuNTYyNDUgMTAuNUgyLjQzNzU1WiIgZmlsbD0iI0UzRTNFMyIvPgo8L3N2Zz4K");}

/* ============================================================
   모바일 키보드 대응
   ------------------------------------------------------------
   iOS 는 입력 글자가 16px 미만이면 포커스 시 페이지를 확대한다.
   전체화면 구간에서 16px 로 올려 확대를 막는다.
   (키보드 위 입력창 재배치는 cust-chat.js visualViewport 추종)
   ============================================================ */
@media (max-width: 1023px) {
    .chat-composer__textarea {
        font-size: 16px;
    }
}

/* 키보드/입력 모드에서 웹뷰가 100dvh 보다 커질 때 패널 아래로 노출되는 영역은
   body 배경으로만 덮인다(fixed 요소는 layout viewport 밖에 그려지지 않는다).
   패널이 열려 있는 동안 body 배경을 패널색으로 맞춘다. */
@media (max-width: 1023px) {
    body:has(.chat-panel:not(.is-closed)) {
        background: #fff;
    }
    [data-theme="dark"] body:has(.chat-panel:not(.is-closed)) {
        background: #3D3D3D; /* chat.css 다크 --chat-surface 와 동일색 (body 는 변수 스코프 밖) */
    }

    /* 전면 방패 — 키보드 팬 추종이 한 박자 늦는 동안 패널 위/아래 틈으로 뒤 페이지가
       보이지 않도록, 패널이 열려 있는 동안 뷰포트 전체를 패널색으로 덮는다.
       (여닫이 애니메이션 중에는 fixed 가 패널 기준이라 패널과 함께 움직인다) */
    .chat-panel:not(.is-closed)::before {
        content: '';
        position: fixed;
        inset: 0;
        background: #fff;
        z-index: -1;
    }
    [data-theme="dark"] .chat-panel:not(.is-closed)::before {
        background: #3D3D3D;
    }
}

/* 앱 웹뷰(html.app-webview — 인라인 스크립트가 첫 페인트 전에 스탬프):
   헤더 닫기(X)와 웹 FAB 를 즉시 감춘다. defer JS 의 숨김은 느린 네트워크에서
   한 박자 늦어 네이티브 닫기 버튼과 겹쳐 보인다. X 는 자리를 유지한다(visibility). */
html.app-webview .chat-header__button.ico-close {
    visibility: hidden;
}
html.app-webview .chat__open-button {
    display: none !important;
}

/* 뒤 페이지 콘텐츠 비표시 — 키보드가 열린 상태의 패널 밖 영역에 크롬(iOS)은
   페이지 요소까지 그린다. 패널이 열려 있는 동안 페이지 래퍼(.page-layout)를
   visibility 로 감춘다(레이아웃·스크립트에 영향 없음). 열림 애니메이션 뒤에
   적용하고 닫으면 즉시 복구한다. 전역 알럿은 body 직속이라 영향 없다. */
@media (max-width: 1023px) {
    body:has(.chat-panel:not(.is-closed)) .page-layout {
        visibility: hidden;
        transition: visibility 0s linear 0.3s;
    }
    body:has(.chat-panel:not(.is-closed)) .page-layout .chat-panel,
    body:has(.chat-panel:not(.is-closed)) .page-layout .chat__open-button {
        visibility: visible;
    }
}

/* 헤더·입력영역에서 시작한 드래그가 visual viewport 팬으로 번지지 않게 한다.
   스크롤은 대화 목록·입력창(세로)·시트에서만. cust-chat.js touchmove 가드와 병행. */
@media (max-width: 1023px) {
    .chat-panel .chat-header,
    .chat-panel .chat-bottom {
        touch-action: none;
    }
    .chat-panel .chat-bottom textarea {
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
}

/* 모바일 헤더 접기(.is-header-collapsed — cust-chat.js): 키보드가 올라와 있는 동안
   헤더를 접어 대화 영역을 넓힌다. 이력 화면에서는 접지 않는다. */
@media (max-width: 1023px) {
    .chat-panel .chat-header {
        /* 높이·패딩은 전환 없이 즉시 바꾼다 — 전환하면 그 0.2초 동안 대화 영역 높이가
           계속 변해 내용이 위아래로 흔들린다(키보드 애니메이션과 겹쳐 더 두드러짐) */
        transition: opacity 0.15s ease;
    }
    .chat-panel.is-header-collapsed .chat-header {
        height: 0;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

/* placeholder 는 글자를 입력하기 전까지 유지한다(퍼블 규칙은 포커스 시 숨김).
   길게 눌러 확대경이 떠도 안내 문구가 그대로 보인다. */
.chat-composer__textarea:focus::placeholder {
    opacity: 1;
}

/* ============================================================
   모바일 하단 입력 바 — 대화 위에 떠 있는 입력창
   ------------------------------------------------------------
   입력 필(.chat-form)만 또렷하고, 그 아래로 흘러가는 대화는 흐리게 비친다.
   바 자체는 배경이 없다. 블러는 ::before 레이어가 맡고 위쪽 가장자리를
   마스크로 서서히 사라지게 해, 입력창을 감싸는 사각형처럼 보이지 않는다.
   대화 목록은 바에 가려지는 높이(--chat-bottom-h, cust-chat.js 가 실측)만큼 하단 여백을
   두어 마지막 답변이 바에 가려지지 않는다. 바의 크기는 포커스·키보드와 무관하게
   일정하다 — 바뀌면 그 순간 입력창이 움직여 보인다.
   ============================================================ */
@media (max-width: 1023px) {
    .chat-panel .chat-bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        padding: 2px 16px max(15px, calc(8px + env(safe-area-inset-bottom, 0px)));
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    /* 블러 레이어 — 위로 24px 더 덮고 그만큼 마스크로 페이드시켜 경계선을 없앤다.
       ::before 는 형제보다 먼저 그려지므로 입력창은 그 위에 또렷하게 남는다.
       (mask 미지원 브라우저는 경계가 생길 뿐 동작에는 영향 없음) */
    .chat-panel .chat-bottom::before {
        content: '';
        position: absolute;
        top: -24px;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 40%,
        rgba(255, 255, 255, 0.5) 100%);
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 24px);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 24px);
    }
    .chat-panel .chat-bottom > * {
        position: relative;
    }
    /* 인트로 화면은 블러 없이 투명 — 뒤의 노란 글로우를 그대로 보여준다 */
    .chat-panel.is-intro .chat-bottom::before {
        display: none;
    }
    [data-theme="dark"] .chat-panel .chat-bottom::before {
        background: linear-gradient(180deg,
        rgba(61, 61, 61, 0) 0%,
        rgba(61, 61, 61, 0.35) 40%,
        rgba(61, 61, 61, 0.5) 100%);
    }
    /* 대화 화면의 스크롤 여유 (두 값 모두 cust-chat.js 가 실측해 설정)
       --chat-top-fill    : 짧은 대화를 바 위에 붙이기 위한 위쪽 채움. 내용이 넘치면 0
       --chat-scroll-buffer: 마지막 답변 아래 여유. 질의 하나짜리 대화에서도 이만큼은 항상 스크롤된다.
       정지 위치는 여유를 남긴 지점이라 마지막 답변은 늘 바 위 12px 에 놓인다 */
    .chat-panel .chat-content {
        padding-bottom: calc(var(--chat-bottom-h, 120px) + 12px + var(--chat-scroll-buffer, 0px));
    }
    .chat-panel[data-view="chat"] .chat-content {
        padding-top: calc(24px + var(--chat-top-fill, 0px));
    }
    /* 이력 목록·상세는 자체 스크롤 영역이라 떠 있는 바 높이만큼 끝에 여백을 둔다 */
    .chat-panel .chat-content section[data-content-view="history-list"],
    .chat-panel .chat-content section[data-content-view="history-detail"] {
        padding-bottom: calc(var(--chat-bottom-h, 120px) + 12px);
    }
    .chat-panel .chat-fixed__btn--recent,
    .chat-panel .chat-fixed__btn--before {
        bottom: calc(var(--chat-bottom-h, 120px) + 12px);
    }
    /* 플로팅 버튼이 바의 블러 레이어(24px 위까지 덮음)에 가려지지 않게 위로 올린다 */
    .chat-panel .chat-content-overlay {
        z-index: 21;
    }
}

/* 인트로(메인) 화면: 키보드로 영역이 줄면 잘리지 않고 스크롤되게 한다.
   .chat-intro{height:100%} + 래퍼{flex:1;min-height:0} 조합은 내용이 넘쳐도 컨테이너가
   커지지 않아 마지막 컴포넌트(추천질문·새로고침)가 입력창 뒤로 잘렸다.
   내용이 넘치면 늘어나고(스크롤 발생), 공간이 남으면 종전대로 채운다(캐릭터 하단 고정 유지). */
@media (max-width: 1023px) {
    .chat-intro {
        height: auto;
        min-height: 100%;
    }
    .chat-intro > [data-intro-account] {
        min-height: auto;
    }
}

/* =========================================================
   PC 패널 크기 조절 핸들 (yuma 추가 — 퍼블 원본에 없음, 2026-09-14)
   · nw(좌상단 모서리): 폭+높이 / n(상단 가장자리): 높이 / w(좌측 가장자리): 폭
     cust-chat.js 가 --chat-width/--chat-height 인라인 변수를 갱신한다.
     우측·하단은 고정 — 패널이 화면을 떠다니지 않도록 위치는 바꾸지 않는다(2026-09-15 확정).
   · 가장자리 핸들은 패널 안쪽에 둔다 — .chat-panel 이 overflow:hidden 이라 바깥은 히트되지 않는다.
   · 마우스 전용 편의 기능: PC(≥1025px) 플로팅 패널에서만 노출.
     전면팝업(모바일)·단독 페이지(--page)·앱 웹뷰는 제외.
   ========================================================= */
.chat-resize-handle { display: none; }
html.app-webview .chat-resize-handle { display: none !important; }   /* 태블릿 웹뷰 안전망 */

@media (min-width: 1025px) {
    .chat-panel:not(.chat-panel--page) .chat-resize-handle {
        display: block;
        position: absolute;
        z-index: 30;                    /* 헤더 위. 시트(z 300)가 열리면 그 아래로 자연히 가려진다 */
    }
    .chat-panel:not(.chat-panel--page) .chat-resize-handle--nw {
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        cursor: nwse-resize;
        border-top-left-radius: 28px;   /* 패널 라운드와 일치 — 밖으로 새는 히트영역 방지 */
    }
    .chat-panel:not(.chat-panel--page) .chat-resize-handle--w {
        top: 28px;                      /* 라운드 코너 구간은 비워 둔다 */
        bottom: 28px;
        left: 0;
        width: 8px;
        cursor: ew-resize;
    }
    /* 상단 가장자리: 모서리 핸들(22px)·라운드 코너 구간은 비워 둔다 */
    .chat-panel:not(.chat-panel--page) .chat-resize-handle--n {
        top: 0;
        left: 28px;
        right: 28px;
        height: 8px;
        cursor: ns-resize;
    }

    /* 모서리 그립: 평소엔 숨기고 호버·모서리 드래그 중에만 보여준다.
       currentColor 라 다크모드에서도 텍스트 색을 따라 자동 반전된다. */
    .chat-panel:not(.chat-panel--page) .chat-resize-handle--nw::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 7px;
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-left: 2px solid currentColor;
        border-top-left-radius: 3px;
        opacity: 0;
        transition: opacity .15s ease;
    }
    .chat-panel .chat-resize-handle--nw:hover::before,
    .chat-panel[data-resizing="nw"] .chat-resize-handle--nw::before {
        opacity: .45;
    }
    /* 드래그 중: 전환 애니메이션·텍스트 선택을 꺼서 끌리는 대로 즉시 반영한다 */
    .chat-panel.is-resizing,
    .chat-panel.is-resizing * {
        transition: none !important;
        user-select: none !important;
    }
}

/* =========================================================
   AI 응답 안내 문구 강조 (yuma 추가 — 퍼블 원본은 11px 옅은 회색 텍스트)
   입력창 아래 "AI가 생성한 응답은 부정확할 수 있습니다"가 확실히 보여야 한다는 고객 요구.
   느낌표 아이콘 + 연노랑 알약 배경 + 12px 세미볼드 진한 글자.
   이력 화면의 7일 안내(.chat-bottom__notice)는 종전 스타일을 유지한다.
   ========================================================= */
.chat-bottom__notice--ai {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 10px auto 0;
    padding: 6px 14px 6px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.2px;
    color: #fff;
    background-color: #555555;
    border-radius: 14px;
}
.chat-bottom__notice--ai::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url(/assets/img/chat/ico_notice.svg) center / 16px 16px no-repeat;
}
[data-theme="dark"] .chat-bottom__notice--ai {
    color: rgba(255, 255, 255, 0.9);
    background-color: #555555;
}
[data-theme="dark"] .chat-bottom__notice--ai::before {
    background-image: url(/assets/img/chat/darkmode/ico_notice_dark.svg);
}