@charset "UTF-8";


.floating_banner_container {
    position: absolute;
    width: 1366px;
    height: 100%;
    pointer-events: none;           
}
/*.floating_banner_container{ position: absolute; z-index: 1; width: 1366px; height: 100%;}*/
#container:has(.floating_banner_wrap){ overflow: visible; padding-bottom: 100px;}   
.floating_point_color{color: var(--secondary-800) !important;}

/* 플로팅 배너 */
.floating_banner_wrap{
  pointer-events: auto;
  font-size: 16px; font-family: var(--font-family) !important; position: absolute; top: 0; right: -14%; text-align: center; color: var(--text-primary); box-sizing: border-box; display: inline-block; z-index: 10; height: 100%;
  & *{ box-sizing: border-box; letter-spacing: 0;}
  & .inner{ position: sticky; top: 0; padding: var(--space-3xl) 0;}
  & .floating_banner{
    width: 100%; border: 2px solid var(--surface-500); border-radius: 10em; margin: 0 auto;
    & .title{ font-size: var(--text-xs); font-weight: var(--font-extrabold); background-color: var(--secondary-800); color: var(--text-inverse); border-radius: 5em 5em 0 0; padding: var(--space-4xl) 5px var(--space-md);}
    & .list{
      position: relative;
      & + .list::before{ content: ''; display: block; width: 80%; height: 1px; border-top: 1px dashed var(--surface-500); margin: 0 auto;}
      & a{
        display: grid; gap: var(--space-sm); justify-items: center; padding: var(--space-sm) 12px; text-decoration: none; background-color: var(--bg-secondary); cursor: pointer;
        & .text{ font-weight: var(--font-semibold); font-size: var(--text-xs); line-height: 1.16; color: var(--text-primary);
        }
      }
      &:last-child a{ padding-bottom: 1.875em; border-radius: 0 0 5em 5em;}
    }
  }
}

/* chatbot_btn */
.chatbot_btn{
  position: relative; cursor: pointer;
  & .chatbot_state{ margin: var(--space-3xl) auto 0; display: flex; align-items: center; justify-content: center; border-radius: 5em; aspect-ratio: 1 / 1; width: 87%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);}
  & img{ width: 98%; height: 98%; object-fit: cover; display: block; overflow: hidden;}
  & .close{ background: linear-gradient(135deg, var(--secondary-400) 0%, var(--secondary-800) 100%); overflow: hidden;}
  & .open{
    display: none; background-color: var(--white);
    & img{ width: auto; height: auto;}
  }
  /* 대화창 열림 상태: 아이콘은 고정(로봇)하고, 창만 오픈 */
  &.is-open .chatbot_window{ display: flex;}
}

/* chatbot_window : 챗봇 대화창 */
.chatbot_window{
  display: none; /* 기본 숨김 (JS 토글) */ position: absolute; bottom: -80px; right: 0; z-index: 100; width: 460px; height: 700px; max-height: 80vh; flex-direction: column; overflow: hidden; background-color: #F4F9FF; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); font-family: var(--font-family); text-align: left; cursor: default;
  /* 모달을 챗봇 창 내부로 한정 (modal_wrap 컴포넌트는 position:fixed 기본) */
  & .modal_wrap{ position: absolute;}
}

/* 헤더 (고정) */
.chatbot_window_header{
  flex: 0 0 auto; position: relative; display: flex; align-items: center; min-height: 70px; padding: 0 var(--space-2xl); background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-brand-secondary);
  & .chat_state{ font-weight: var(--font-bold); color: var(--text-brand);}
  & .chat_title{ display: flex; gap: var(--space-3xs); line-height: 1 !important; margin: 0; font-size: var(--text-xl); line-height: 1.2em; font-weight: var(--font-bold); background-color: var(--bg-secondary);}
  /* 임시저장 버튼 (닫기 왼쪽) */
  & .chat_save{ position: absolute; right: 52px; top: 50%; transform: translateY(-50%); color: var(--surface-700);}
  & .chat_close{
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; background-color: transparent; color: var(--surface-700); cursor: pointer; display: flex; align-items: center; justify-content: center;
    & svg{ width: 80%; height: 80%; display: block;}
  }
}
/* 상담 종료 모달(modal_wrap.active) 활성 시 헤더 상태 텍스트 변경 */
/* font-size:0 으로 기존 텍스트 숨김 → ::after 는 em(상대) 대신 rem(절대) 사용해야 보임 */
.chatbot_window:has(.modal_wrap.active) .chat_state{ color: var(--text-secondary); font-size: 0;}
.chatbot_window:has(.modal_wrap.active) .chat_state::after{ content: "대화 종료"; font-size: 18px;}

/* 대화 영역 (스크롤) */
.chatbot_window_body{
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-2xl);
  & .chat_date{
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2xl);
    & span{ font-size: var(--text-xs); font-weight: var(--font-semibold); background-color: var(--bg-brand-subtle); border: 1px solid var(--border-brand); border-radius: 5em; padding: var(--space-4xs) var(--space-lg);}
  }
  & .chat_intro{ margin-bottom: var(--space-lg);}
  /* 홈 버튼으로 다시 노출되는 안내 (처음 chat_intro와 구분되는 스타일) */
  & .chat_intro_resume{ margin-top: 1.875rem;}
  & .chat_hello{
    margin: 0 0 5px; font-size: var(--text-xl); font-weight: var(--font-bold); line-height: 1.4;
    & span{ color: var(--text-brand);}
  }
  & .chat_desc{ margin: 0; font-size: var(--text-sm); line-height: 1.5; font-weight: var(--font-semibold);}

  /* 봇 메시지 박스 */
  & .chat_msg.bot{ max-width: 335px; background-color: var(--bg-secondary); border: 1px solid var(--primary-100); border-radius: 0.875rem; padding: var(--space-xl); box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);}
  & .chat_msg.bot.compact { padding: 10px var(--space-xl); }
  & .chat_msg_tit{
    display: flex; align-items: baseline; gap: var(--space-3xs); margin: 0 0 var(--space-lg); font-size: var(--text-sm); background-color: var(--bg-secondary);
    & span{ flex: 1; font-weight: var(--font-bold);}
    &::before{ content: ''; background: url(../img/chat_choice.png) no-repeat center; width: 0.875em; height: 0.875em; background-size: 100%; display: block;}
  }
  & .chat_options{
    list-style: none; flex: 1; margin: 0; padding: 0; display: grid; gap: var(--space-xs);
    & button{ width: 100%; text-align: left; font-size: var(--text-sm); background-color: var(--bg-primary); border: 0; border-radius: var(--rounded-sm); padding: 11px var(--space-xl); cursor: pointer; transition: background .15s, border-color .15s; font-family: var(--font-family);}
    & button.on{ background-color: var(--primary-300);} /* 선택된 옵션 */
  }

  /* 메시지 간격 */
  & .chat_msg + .chat_msg{ margin-top: var(--space-lg);}

  /* 봇 답변 텍스트 */
  & .chat_answer{
    margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-primary); letter-spacing: -0.1px; font-weight: var(--font-medium);
    overflow-wrap: anywhere;
    word-break: break-word;
    /* 안내 답변(.lead) 옆 아이콘 : 첫 줄만 아이콘 옆, 이후 줄은 왼쪽 정렬 */
    &.lead::before{ content: ''; float: left; background: url(../img/chat_answer.png) no-repeat center; background-size: 100%; width: 1.125em; height: 1.125em; margin: 2.5px var(--space-xs) 0 0;}
  }
  & .chat_answer a{ overflow-wrap: anywhere; word-break: break-all; }
  /* AI 안내문구(면책성 문구): 본문 답변과 시각적으로 구분 */
  & .chat_answer_note{
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--surface-300);
    border-radius: var(--rounded-sm);
    background-color: var(--bg-tertiary);
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-secondary);
  }
  /* AI 안내문구를 말풍선 바깥에 분리 표시 */
& .chat_disclaimer {
    padding: 5px 12px 0px 12px;
    line-height: 1.55;
    font-size: 11px;
    color: #A6A6A6;
}
  & .chat_answer_tit{
    display: flex; align-items: center; gap: var(--space-2xs); margin: 0 0 var(--space-md); font-size: var(--text-sm); font-weight: var(--font-bold); line-height: 1.4; color: var(--text-default);
    & .material-symbols-outlined{ font-size: 1.25em; color: var(--success); font-variation-settings: 'FILL' 1;}
  }

  /* 오류코드 입력 박스 (input_base / btn_base.tertiary 컴포넌트 사용) */
  & .chat_search{ display: grid; gap: var(--space-sm);}
  /* 바로가기 버튼 (btn_base.tertiary 컴포넌트 + 우측 화살표) */
  & .chat_link_btn{
    width: 100%; justify-content: space-between; margin-top: var(--space-xl);
    & .ico_arrow{ font-size: 1.5em;}
  }

  /* 입력 중(...) 표시 */
  & .chat_msg.bot.chat_typing{ display: inline-flex; align-items: center; gap: 5px;}
  & .chat_typing span{
    width: 7px; height: 7px; border-radius: var(--rounded-circle); background-color: var(--primary-400); animation: chatTyping 1.2s infinite ease-in-out;
    &:nth-child(2){ animation-delay: .2s;}
    &:nth-child(3){ animation-delay: .4s;}
  }

  /* 상담 종료 안내(경고) */
  & .chat_msg.bot.chat_warn{ background-color: var(--orange-100); border-color: var(--orange-200);}
  & .chat_warn strong{ color: var(--error); font-weight: var(--font-bold);}

  /* 보낸 시간 */
  & .chat_time{
    display: block; margin-top: var(--space-xs); font-size: var(--text-xs);
    &.user_time{ text-align: right; margin-top: var(--space-3xs);}
    &.bot_time{ text-align: left;}
  }

  /* 사용자 메시지 */
  & .chat_msg.user{
    display: flex; flex-direction: column; align-items: flex-end; padding: 0; max-width: 300px; margin-left: auto;
    animation: chatRise .35s ease both; /* 입력 시 아래에서 위로 올라오는 효과 */
    & .chat_bubble{ margin: 0; max-width: 90%; font-size: var(--text-sm); font-weight: var(--font-bold); line-height: 1.4; color: var(--text-brand-strong);}
  }

  /* 챗 아바타가 붙는 봇 턴 (인트로 안내 제외 모든 봇 메시지) */
  & .chat_turn{ display: flex; align-items: flex-start; gap: var(--space-sm); margin: var(--space-lg) 0; animation: chatRise .35s ease both;}
  & .chat_avatar{
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--rounded-circle); overflow: hidden; background-color: var(--bg-secondary);
    & img{ width: 100%; height: 100%; object-fit: cover; display: block;}
  }
  & .chat_turn_body{ flex: 1 1 auto; min-width: 0;}
}

@keyframes chatTyping{ 0%, 60%, 100%{ transform: translateY(0); opacity: .35;} 30%{ transform: translateY(-4px); opacity: 1;} }
/* 대화 메시지 등장: 아래에서 위로 슬라이드 */
@keyframes chatRise{ from{ opacity: 0; transform: translateY(16px);} to{ opacity: 1; transform: translateY(0);} }

/* 입력 영역 (고정) */
.chatbot_window_footer{
  flex: 0 0 auto; background-color: var(--bg-secondary);
  & .chat_notice{
    position: absolute; bottom: 5.25em; left: 50%; transform: translateX(-50%); width: calc(100% - var(--space-4xl)); display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); font-size: var(--text-sm); line-height: 1.45; color: var(--text-inverse); background-color: var(--secondary-900); border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
    &.is-show{ opacity: 1; pointer-events: auto;}
  }
  & .chat_notice_ico{ flex: 0 0 auto; width: 1.625em; height: 1.625em; margin-top: 1px; object-fit: contain;}
  & .chat_input{ display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-xl); border-top: 1px solid var(--surface-400);}
  & .chat_home,
  & .chat_send{ flex: 0 0 auto; border: 0; background-color: transparent; color: var(--surface-700); cursor: pointer; font-size: 1em;}

  /* 홈 버튼 hover 안내 툴팁 */
  & .chat_home{
    position: relative;
    & .chat_home_tip{
      position: absolute; z-index: 2; bottom: calc(100% + var(--space-xl)); left: -2px; white-space: nowrap; padding: var(--space-md) var(--space-lg); font-size: var(--text-xs); line-height: 1; color: var(--surface-100); background-color: var(--surface-800); border-radius: var(--rounded-md); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; font-family: var(--font-family);
      /* 말풍선 꼬리 (아래 방향) */
      &::after{ content: ''; position: absolute; top: 100%; left: var(--space-md); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 12px solid var(--surface-800);}
    }
    &:hover .chat_home_tip,
    &:focus-visible .chat_home_tip{ opacity: 1; visibility: visible; transform: translateY(0);}
  }

  & .chat_send{
    color: var(--primary-400);
    & img{ display: block;}
    /* 입력창 포커스 시 전송 아이콘 교체 (chat_send_focus.svg) */
    & .ico_focus{ display: none;}
  }
  & .chat_field:focus-within .chat_send .ico_default{ display: none;}
  & .chat_field:focus-within .chat_send .ico_focus{ display: block;}
  & .chat_field{
    position: relative; flex: 1 1 auto; min-width: 0;
    & .chat_send{ position: absolute; top: 50%; right: var(--space-2xs); transform: translateY(-50%); padding: var(--space-2xs);}
  }
  & .chat_text{
    width: 100%; height: 42px; padding: 0 46px 0 var(--space-lg); background-color: var(--bg-tertiary); border: 1px solid var(--surface-300); border-radius: var(--rounded-sm); outline: none; transition: background-color .15s, border-color .15s; font-family: var(--font-family);
    &:focus{ background-color: var(--bg-brand-subtler); border-color: var(--border-brand-secondary);} /* 포커스 상태 */
    &::placeholder{ color: var(--surface-500);}
  }
}


.chatbot_window {
    position: fixed;
    right: 120px;
    bottom: 435px;
    z-index: 2147483647;
}

/* mainRenewal에서 body로 이동된 챗봇 위치 보정(user.master와 동일 여백) */
.chatbot_window.is-main-layout {
    right: 145px;
    bottom: 435px;
}

/* 페이지별 전역 스타일 영향 차단 (user.master와 동일 톤 고정) */
.chatbot_window,
.chatbot_window * {
    font-family: var(--font-family) !important;
    letter-spacing: 0 !important;
}

.chatbot_window {
    font-size: 15px;
}

.chatbot_window .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

/* main_chatbot 메인 챗봇 말풍선 스타일 */
.main_chatbot {
    --height-2xs: 2rem;
    --height-xs: 2.4rem;
    --height-sm: 3.2rem;
    --height-md: 4rem;
    --height-lg: 4.8rem;
    --height-xl: 5.6rem;
    --height-2xl: 7rem;
    --height-3xl: 10rem;
    --height-4xl: 12.4rem;
    font-size: 16px;
}

.main_chatbot * {
    box-sizing: border-box;
}

    .main_chatbot .chatbot_bubble {
        position: absolute;
        bottom: 125%;
        right: 0;
        z-index: 5;
        width: max-content;
        text-align: left;
        max-width: 260px;
        padding: 12px;
        border-radius: 8px;
        background: var(--blue-200);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.20) inset;
        color: var(--bk);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        line-height: var(--leading-xl);
        white-space: nowrap;
        animation: chatbotBubbleFade 6s ease-in-out infinite;
    }

.main_chatbot .chatbot_bubble b {
    color: var(--primary-700);
    font-weight: var(--font-bold);
}

.main_chatbot .chatbot_bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 30px;
    border: 9px solid transparent;
    border-top-color: var(--blue-200);
    border-bottom: 0;
}

.main_chatbot.is-open .chatbot_bubble {
    display: none;
}

@keyframes chatbotBubbleFade {
    0% { opacity: 0; transform: translateY(6px); }
    5% { opacity: 1; transform: translateY(0); }
    62% { opacity: 1; transform: translateY(0); }
    67% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 0; transform: translateY(6px); }
}

.chatbot_window.is-open-window {
    display: flex;
}

/* 입력 영역 기준 */
.chat_field {
    position: relative;
    width: 100%;
}

.chatbot_window_header {
    cursor: move;
    user-select: none;
}

/* 일부 스크립트가 input에 inline padding을 주더라도 챗봇 입력창 패딩 고정 */
.chatbot_window_footer .chat_text {
    padding: 10px !important;
}

/* 자동완성 UI 공통: 오류코드/질문 입력 동일 톤 적용 */
.chat_field,
.chat_search {
    position: relative;
}

.error_autocomplete,
.chat_autocomplete {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 220px;
    overflow-y: auto;
}

/* 질문 자동완성은 입력영역 전체 폭에 가깝게 확장 */
.chatbot_window_footer .chat_autocomplete {
    left: -44px;
    width: calc(100% + 44px);
}

/* 오류코드 자동완성은 살짝만 가로 확장 */
.chat_search .error_autocomplete {
    left: -8px;
    width: calc(100% + 8px);
}

.error_auto_item,
.question_auto_item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
}

    .error_auto_item:last-child,
    .question_auto_item:last-child {
        border-bottom: 0;
    }

    .error_auto_item:hover,
    .question_auto_item:hover {
        background: #f5f5f5;
    }

    .error_auto_item strong {
        margin-right: 8px;
        font-weight: 700;
    }

    .error_auto_item span {
        color: #666;
    }

.error_auto_empty {
    padding: 10px 12px;
    color: #999;
}