@charset "utf-8";

/* 스크린리더 전용 */
.blind {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   헤더 설정 버튼
   스킨에는 .set_btn 의 img 규칙만 있어서, 이미지 없이 그리는 버전을 둔다.
   운영에서 아이콘 이미지를 쓰면 이 블록은 지워도 된다.
   --------------------------------------------------------------------- */
#header .set_btn {
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.06); transition: background 0.2s;
}
#header .set_btn:hover { background: rgba(143, 46, 218, 0.18); }
#header .set_btn svg { color: #4a4a4a; display: block; }
#header .set_btn:hover svg { color: #8f2eda; }

/* ---------------------------------------------------------------------
   접속 설정 레이어
   스킨 .set_wrap 을 그대로 쓰고, 스킨에 없는 배치만 보탠다.
   --------------------------------------------------------------------- */
/* 스킨의 .set_wrap button 규칙(검은 배경·13.6rem 폭·상단 3rem 여백)이
   레이어 안의 모든 버튼에 걸린다. 닫기 버튼은 되돌린다. */
.set_wrap .set_close {
    width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
    padding: 0; margin: 0; background: transparent; border-radius: 0;
}
.set_wrap .set_close:hover { background: transparent; }
.set_wrap .set_close svg { color: #333; display: block; }
.set_wrap .set_close:hover svg { color: #e6027e; }

/* 스킨(style.css)의 토글 스타일은 #ttsYn / #dialect 두 id 에만 걸려 있다.
   #ttsYn(음성 켜기/끄기)은 없앴다 — 음성 출력은 이제 토글이 아니라
   "마이크로 물었는가" 로 정해진다(skin-chat.js 의 voiceTurn 참고).
   style.css 의 #ttsYn 규칙은 디자이너 원본이라 그대로 두었다. 걸릴 요소가 없어 무해하다.
   설정 레이어에 새로 넣은 사투리 토글(#cfgDialect)에도 같은 규칙을 준다. */
.option_wrap #cfgDialect:checked ~ .tg_switch { background: #503ad1; }
.option_wrap #cfgDialect:checked ~ .tg_switch .tg_btn { left: calc(100% - 2.2rem); }
.option_wrap #cfgDialect:checked ~ .tg_switch .tg_name { left: 0.5rem; }

.set_wrap .cfg_two,
.set_wrap .cfg_three { gap: 1.2rem; }
.set_wrap .cfg_two .sel_bx.type1 { width: 30%; margin-right: 0; }
.set_wrap .cfg_two .sel_bx.type2 { width: calc(70% - 1.2rem); }
.set_wrap .cfg_three .sel_bx { flex: 1 1 0; }
.set_wrap .cfg_hint { flex: 1 1 auto; line-height: 1.5; }
.set_wrap .cfg_hint code {
    font-family: Consolas, Monaco, monospace; font-size: 1.3rem;
    background: #f2f2f4; border-radius: 0.3rem; padding: 0 0.4rem;
}
.set_wrap .cfg_reset {
    flex: 0 0 auto; width: auto; height: 4.5rem; padding: 0 1.8rem;
    margin: 0; border: 1px solid #dcdcdc; border-radius: 0.3rem;
    background: #f7f7f9; line-height: 1;
}
.set_wrap .cfg_reset:hover { background: #ececf1; }
.set_wrap .cfg_note {
    margin-top: 2rem; padding: 1.2rem 1.5rem; line-height: 1.6;
    background: #faf7ff; border: 1px solid #e6dcf5; border-radius: 0.5rem;
}
.set_wrap .cfg_apply { width: 13.6rem; }
.set_wrap input[readonly] { background: #f4f4f6; color: #888; }

@media screen and (max-width: 768px) {
    .set_wrap .cfg_two,
    .set_wrap .cfg_three { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .set_wrap .cfg_two .sel_bx.type1,
    .set_wrap .cfg_two .sel_bx.type2 { width: 100%; }
    .set_wrap .cfg_reset { height: 3.5rem; }
}

/* ---------------------------------------------------------------------
   말풍선 안 진행 상태 줄
   첫 토큰이 오면 사라진다. 점 3개는 스킨의 .typing-dot 을 그대로 쓴다.
   --------------------------------------------------------------------- */
.chat_area .boogi_bx .prog_bx {
    display: flex; align-items: center; gap: 0.6rem;
    color: #7b7b7b; font-size: 1.5rem; line-height: 2.2rem;
}
.chat_area .boogi_bx .prog_bx .el { color: #b0b0b0; font-size: 1.3rem; }

/* ---------------------------------------------------------------------
   답변 본문

   모델이 마크다운을 섞어 보낸다(### 제목, - 목록, **굵게**).
   skin-chat.js 의 answerHtml() 이 블록으로 바꿔주고, 여기서 모양을 잡는다.

   글자 크기는 스킨의 fs16 클래스와 반응형 규칙을 그대로 쓰고,
   여기서는 줄간·간격·색만 다룬다.
   --------------------------------------------------------------------- */
.chat_area .boogi_bx .text_bx .txt {
    line-height: 1.75;              /* 단위 없는 값 — 반응형으로 글자가 줄면 같이 줄어든다 */
    color: #2f333a;
    white-space: normal;
    word-break: break-word;
}

.chat_area .boogi_bx .text_bx .txt p { margin: 0.5rem 0; }
.chat_area .boogi_bx .text_bx .txt p:first-child { margin-top: 0; }
.chat_area .boogi_bx .text_bx .txt p:last-child  { margin-bottom: 0; }

/* ### 제목 — 크기를 키우지 않고 무게와 여백으로만 구분한다.
   말풍선 안이라 제목이 커지면 오히려 산만하다. */
.chat_area .boogi_bx .text_bx .txt .mh {
    display: block;
    margin: 1.4rem 0 0.6rem;
    font-weight: 700;
    color: #14171c;
    letter-spacing: -0.01em;
}
.chat_area .boogi_bx .text_bx .txt .mh:first-child { margin-top: 0; }

/* - 목록 */
.chat_area .boogi_bx .text_bx .txt .ml {
    margin: 0.4rem 0 0.2rem;
    padding-left: 1.5rem;
    list-style: disc;
}
.chat_area .boogi_bx .text_bx .txt .ml li {
    margin: 0.45rem 0;
    padding-left: 0.2rem;
    list-style: disc;          /* reset.css 의 li{list-style:none} 을 덮는다 */
    list-style-position: outside;
}
.chat_area .boogi_bx .text_bx .txt .ml li::marker { color: #b9bec7; }

.chat_area .boogi_bx .text_bx .txt strong { font-weight: 700; color: #14171c; }

/* 답변이 흐르는 동안 커서 */
.chat_area .boogi_bx.streaming .text_bx .txt::after {
    content: ''; display: inline-block; width: 0.2rem; height: 1.5rem;
    margin-left: 0.2rem; vertical-align: -0.25rem;
    background: #8f2eda; animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------------------------------------------------------------------
   본문 안의 인용 칩

   핑크로 강조하니 본문보다 칩이 먼저 읽혔다. 출처는 보조 정보다.
   회색으로 낮추고 크기도 줄인다. 마우스를 올렸을 때만 색이 든다.
   --------------------------------------------------------------------- */
.chat_area .cite {
    display: inline-block;
    margin: 0.3rem 0.3rem 0 0;
    padding: 0.15rem 0.8rem;
    border: 1px solid #e2e3e8;
    border-radius: 999px;
    background: #f4f5f7;
    color: #656b76;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat_area .cite:hover {
    background: #efe6fa;
    border-color: #d9c6f2;
    color: #6b21c8;
}
.chat_area .cite.has_link::after {
    content: '\2197';
    margin-left: 0.3rem;
    font-size: 0.9em;
    opacity: 0.55;
}

/* 인용 칩 hover 카드 */
.ref_card {
    position: fixed; z-index: 1200; width: 32rem;
    border: 1px solid #e4e4e4; border-radius: 1rem; background: #fff;
    box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.16); overflow: hidden;
    font-size: 1.4rem; display: none;
}
.ref_card.on { display: block; }
.ref_card .thumb { display: block; width: 100%; height: 15rem; object-fit: cover; background: #f3f3f5; }
.ref_card .in { padding: 1.2rem 1.4rem; }
.ref_card .src {
    display: inline-block; margin-bottom: 0.7rem; padding: 0.1rem 0.9rem;
    border: 1px solid #f0a8d0; border-radius: 999px;
    background: #fdeef6; color: #c0126a; font-size: 1.2rem;
}
.ref_card .ttl { margin-bottom: 0.7rem; font-size: 1.5rem; font-weight: 600; line-height: 1.4; color: #111; word-break: break-word; }
.ref_card .fld { display: flex; gap: 0.8rem; line-height: 1.6; color: #4b5563; }
.ref_card .fld b { flex: 0 0 auto; min-width: 4.5rem; font-weight: 600; color: #9198a3; }
.ref_card .fld span { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.ref_card .snip {
    margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid #eee;
    color: #374151; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* 첨부(HWP·PDF)에서 뽑힌 표. 글로 이어붙이면 못 읽어서 표로 그린다 */
.ref_card .tbl { margin-top: 0.9rem; overflow-x: auto; }
.ref_card .tbl table { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
.ref_card .tbl th,
.ref_card .tbl td {
    border: 1px solid #e6e6e6; padding: 0.35rem 0.5rem;
    text-align: left; white-space: nowrap;
}
.ref_card .tbl th { background: #f7f5fb; font-weight: 600; color: #4b5563; }
.ref_card .tbl .more { margin-top: 0.4rem; font-size: 1.1rem; color: #9aa0aa; }

.ref_card .go { display: inline-block; margin-top: 1rem; color: #8f2eda; font-weight: 600; }
.ref_card .nolink { display: inline-block; margin-top: 1rem; color: #999; }

@media screen and (max-width: 768px) {
    .ref_card { width: calc(100vw - 4rem); }
}

/* 참고자료 목록(.ref_bx)은 쓰지 않는다.
   본문 인용 칩이 같은 정보를 이미 보여주므로 아래에 또 나열하면 중복이다.
   스킨의 .ref_bx 규칙은 style.css 에 그대로 남겨 두었다(나중에 되살릴 수 있게). */

/* ---------------------------------------------------------------------
   담당 부서 안내 (전화번호부 별도 섹션)
   검색 결과(.ref_bx)와 성격이 달라 색을 나눈다.
   --------------------------------------------------------------------- */
.chat_area .boogi_bx .contact_bx {
    margin-top: 1rem; padding: 0.9rem 1.1rem;
    border: 1px solid #ded3f2; border-radius: 0.8rem;
    background: rgba(250, 247, 255, 0.9);
}
.chat_area .boogi_bx .contact_bx .c_head {
    margin-bottom: 0.6rem; font-size: 1.3rem; font-weight: 700; color: #6b21c8;
}
.chat_area .boogi_bx .contact_bx .c_item {
    padding: 0.55rem 0; border-top: 1px solid #ebe3f7;
}
.chat_area .boogi_bx .contact_bx .c_item:first-of-type { border-top: 0; padding-top: 0; }
.chat_area .boogi_bx .contact_bx .c_line {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
}
.chat_area .boogi_bx .contact_bx .c_dept { font-size: 1.4rem; font-weight: 600; color: #111; }
.chat_area .boogi_bx .contact_bx .c_owner { font-size: 1.2rem; color: #9096a2; }
/* 번호와 배지를 한 덩어리로 묶어야 좁은 화면에서 같이 접힌다 */
.chat_area .boogi_bx .contact_bx .c_pw {
    margin-left: auto; display: flex; gap: 0.6rem; align-items: baseline;
}
.chat_area .boogi_bx .contact_bx .c_phone { font-size: 1.4rem; font-weight: 700; }
.chat_area .boogi_bx .contact_bx .c_phone a { color: #8f2eda; }
.chat_area .boogi_bx .contact_bx .c_phone a:hover { text-decoration: underline; }
/* 담당자 직통이 아니라 부서 대표번호일 때. 없으면 직통으로 오해한다 */
.chat_area .boogi_bx .contact_bx .c_badge {
    font-size: 1.05rem; color: #92400e; background: #fef3c7;
    border: 1px solid #fde68a; border-radius: 999px; padding: 0 0.6rem;
    white-space: nowrap; cursor: help;
}
.chat_area .boogi_bx .contact_bx .c_duty {
    margin-top: 0.25rem; font-size: 1.2rem; color: #7b8290; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media screen and (max-width: 768px) {
    .chat_area .boogi_bx .contact_bx { padding: 0.8rem 1rem; }
    .chat_area .boogi_bx .contact_bx .c_dept { font-size: 1.3rem; }
    .chat_area .boogi_bx .contact_bx .c_phone { font-size: 1.3rem; }
    .chat_area .boogi_bx .contact_bx .c_duty { font-size: 1.15rem; }
}

/* ---------------------------------------------------------------------
   오류 말풍선
   --------------------------------------------------------------------- */
.chat_area .boogi_bx.err .text_bx {
    border-color: #f2b8b8; background: rgba(255, 244, 244, 0.92);
}
.chat_area .boogi_bx.err .text_bx .txt { color: #b42318; white-space: pre-wrap; }

/* ---------------------------------------------------------------------
   기본 프로필 이미지가 없을 때 대체 원형
   skin-chat.js 의 BOOGI_IMG 를 채우면 이 규칙은 안 쓰인다.
   --------------------------------------------------------------------- */
.chat_area .boogi_bx .boogi_img.noimg {
    display: grid; place-items: center;
    /*background: linear-gradient(135deg, #8f2eda, #e6027e);*/
	background:url(/humanframe/theme/busan22/assets/chatbot/images/boogi_img.png) no-repeat 50% 50%;
    color: #fff; font-family: "Jalnan", sans-serif; font-size: 1.8rem;
}

/* 안내 문구 */
.input_wrap .guide_txt { text-align: center; }
@media screen and (max-width: 768px) { .input_wrap .guide_txt { font-size: 1.3rem; } }

/* -------------------------------------------------------------------
   이전 대화 이어보기 — 위로 올릴 때 뜨는 표시
   말풍선이 아니라 구분선에 가깝게 둔다. 대화 내용으로 오인되면 안 된다.
   ------------------------------------------------------------------- */
.chat_area .hist_loading {
    margin: 0.6rem 0 1.4rem;
    padding: 0.6rem 0;
    text-align: center;
    font-size: 1.3rem;
    color: #8b919c;
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------
   출처 카드 안의 지도 (카카오 정적 지도)
   높이를 고정해 두는 이유 — SDK 가 비동기로 채우는데 자리가 없으면
   지도가 들어오는 순간 카드가 커지면서 마우스가 카드 밖으로 빠진다.
   ------------------------------------------------------------------- */
.ref_card .map_bx { margin: 1rem 0 0.2rem; }

.ref_card .mapbox {
    width: 100%;
    height: 14rem;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #eef0f3;
}
/* 카카오 SDK 가 넣는 로고·저작권 표시가 잘리지 않게 */
.ref_card .mapbox img { max-width: none; }

.ref_card .mapgo {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: #6b21c8;
    text-decoration: none;
}
.ref_card .mapgo:hover { text-decoration: underline; }

/* ===================================================================
   사용 가이드 레이어

   PC  — 화면 가운데 카드
   모바일 — 아래에서 올라오는 시트(스킨의 채팅 시트와 결이 같게)
   =================================================================== */
.help_wrap { position: fixed; inset: 0; z-index: 1300; display: none; }
.help_wrap.on { display: block; }

/* 레이어가 열린 동안 뒤 배경이 같이 스크롤되지 않게 */
body.help_open { overflow: hidden; }

.help_wrap .help_dim {
    position: absolute; inset: 0;
    background: rgba(24, 20, 34, 0.45);
    animation: helpFade 0.18s ease;
}

.help_wrap .help_box {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: calc(100% - 4rem); max-width: 58rem;
    max-height: calc(100vh - 8rem);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 1.6rem;
    box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.24);
    overflow: hidden;
    animation: helpUp 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes helpFade { from { opacity: 0; } }
@keyframes helpUp {
    from { opacity: 0; transform: translate(-50%, -46%); }
}

.help_wrap .help_head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 2rem 2.2rem 1.4rem;
    border-bottom: 1px solid #eceaf1;
}
.help_wrap .help_tit {
    font-size: 1.9rem; font-weight: 700; color: #14171c; letter-spacing: -0.02em;
}
/* 스킨의 button{background:#000} 규칙을 되돌린다 */
.help_wrap .help_close {
    width: 3.2rem; height: 3.2rem; padding: 0; margin: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: #6b7280; cursor: pointer;
}
.help_wrap .help_close:hover { background: #f3f0f8; color: #8f2eda; }

.help_wrap .help_list {
    flex: 1 1 auto; overflow-y: auto;
    margin: 0; padding: 1.6rem 2.2rem 0.4rem; list-style: none;
    -webkit-overflow-scrolling: touch;
}

.help_wrap .h_item {
    display: flex; gap: 1.4rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid #f4f2f7;
    list-style: none;
}
.help_wrap .h_item:last-child { border-bottom: 0; }

.help_wrap .h_ico {
    flex: 0 0 auto;
    width: 4.2rem; height: 4.2rem;
    display: grid; place-items: center;
    border-radius: 1.1rem;
    background: #f6f0fd; color: #8f2eda;
}

.help_wrap .h_txt { flex: 1 1 auto; min-width: 0; }
.help_wrap .h_tit {
    display: block; margin-bottom: 0.5rem;
    font-size: 1.6rem; font-weight: 700; color: #14171c;
}
.help_wrap .h_body {
    font-size: 1.5rem; line-height: 1.65; color: #4b5563; word-break: keep-all;
}
.help_wrap .h_body b, .help_wrap .h_note b { font-weight: 700; color: #14171c; }

.help_wrap .h_note {
    margin-top: 0.7rem; padding: 0.8rem 1.1rem;
    border-radius: 0.8rem; background: #f7f7fa;
    font-size: 1.4rem; line-height: 1.6; color: #5b6472; word-break: keep-all;
}

/* 좋은 질문 / 아쉬운 질문 예시 */
.help_wrap .h_ex { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.help_wrap .h_ex li {
    display: flex; align-items: flex-start; gap: 0.7rem;
    margin-top: 0.5rem;
    font-size: 1.4rem; line-height: 1.6; color: #4b5563; word-break: keep-all;
}
.help_wrap .h_ex .mk {
    flex: 0 0 auto; margin-top: 0.1rem;
    padding: 0.1rem 0.7rem; border-radius: 999px;
    font-size: 1.2rem; font-weight: 600; white-space: nowrap;
}
.help_wrap .h_ex .ok  .mk { background: #eaf7ee; color: #1f7a3d; }
.help_wrap .h_ex .no  .mk { background: #f5f5f7; color: #8a8f98; }
.help_wrap .h_ex .no      { color: #9aa0aa; }

/* 본문 안 인용 칩과 같은 모양을 안내에서도 보여준다 */
.help_wrap .hcite {
    display: inline-block; margin: 0 0.2rem; padding: 0.05rem 0.7rem;
    border: 1px solid #e2e3e8; border-radius: 999px;
    background: #f4f5f7; color: #656b76;
    font-size: 1.2rem; font-weight: 500; cursor: default;
}

.help_wrap .help_foot {
    flex: 0 0 auto;
    padding: 1.3rem 2.2rem 1.8rem;
    border-top: 1px solid #eceaf1;
    background: #fbfafd;
    font-size: 1.35rem; line-height: 1.6; color: #7b828e; word-break: keep-all;
}

/* 헤더의 도움말 버튼 */
#header .help_open {
    width: 3.4rem; height: 3.4rem; margin: 0; padding: 0;
    border: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.06); color: #4a4a4a;
    cursor: pointer; transition: background 0.2s, color 0.2s;
}
#header .help_open:hover { background: rgba(143, 46, 218, 0.18); color: #8f2eda; }

/* --- 태블릿 --- */
@media screen and (max-width: 1024px) {
    .help_wrap .help_box { max-width: 52rem; }
}

/* --- 모바일 : 아래에서 올라오는 시트 --- */
@media screen and (max-width: 768px) {
    .help_wrap .help_box {
        top: auto; bottom: 0; left: 0; transform: none;
        width: 100%; max-width: 100%;
        max-height: 88vh;
        border-radius: 2rem 2rem 0 0;
        animation: helpSheet 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
    }
    @keyframes helpSheet { from { transform: translateY(100%); } }

    /* 손잡이 — 스킨의 채팅 시트와 같은 표시 */
    .help_wrap .help_head { padding: 2.2rem 1.8rem 1.2rem; }
    .help_wrap .help_head::before {
        content: ''; position: absolute; top: 0.9rem; left: 50%;
        transform: translateX(-50%);
        width: 6rem; height: 0.5rem; border-radius: 1rem; background: #d8d5df;
    }
    .help_wrap .help_tit { font-size: 1.75rem; }
    .help_wrap .help_list { padding: 1.2rem 1.8rem 0.4rem; }
    .help_wrap .help_foot { padding: 1.2rem 1.8rem 2.2rem; }

    .help_wrap .h_item { gap: 1.1rem; padding: 1.2rem 0; }
    .help_wrap .h_ico { width: 3.6rem; height: 3.6rem; border-radius: 0.9rem; }
    .help_wrap .h_ico svg { width: 19px; height: 19px; }
    .help_wrap .h_tit { font-size: 1.5rem; }
    .help_wrap .h_body { font-size: 1.42rem; }
}

@media screen and (max-width: 380px) {
    .help_wrap .h_ex li { flex-direction: column; gap: 0.3rem; }
}