@charset "utf-8";
/* SCORELINE LIVECHAT ORIGINAL EXACT */

#livechat {
    width:334px !important;
    height:518px !important;
    margin:0 0 10px !important;
    border-top:2px solid #e4e9f2 !important;
    position:relative !important;
    background:#fff !important;
    overflow:visible !important;
}

#livechat #chatArea,
#chatArea.sl-chat-original {
    --scoreline-chat-font-size:12px;
    position:relative !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    display:block !important;
    width:334px !important;
    height:516px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:#fff !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    text-align:left !important;
    font-family:Arial,"돋움",Dotum,sans-serif !important;
}

#chatArea * {box-sizing:border-box;}
#chatArea button {font-family:Arial,"돋움",Dotum,sans-serif;}
#chatArea .left {float:left;}
#chatArea .right {float:right;}
#chatArea .clearfloat {display:block;clear:both;height:0;font-size:0;line-height:0;}
#chatArea .scoreline-chat-hidden {display:none !important;}

#chatArea .wrap {
    position:relative !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #bdc3c7 !important;
    background:#fff !important;
    overflow:hidden !important;
    box-shadow:none !important;
}

#chatArea .top {
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:20 !important;
    height:36px !important;
    margin:0 !important;
    padding:0 5px !important;
    border:0 !important;
    border-bottom:1px solid #bdc3c7 !important;
    background:#fff !important;
    color:#333 !important;
    box-shadow:0 0 4px rgba(0,0,0,.12) !important;
    font-size:0 !important;
}

#chatArea .top .title {
    display:table !important;
    height:35px !important;
    margin:0 4px !important;
    padding:0 !important;
    max-width:126px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
}
#chatArea .top .title > div {
    display:table-cell !important;
    height:35px !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
}

#chatArea .sl-livechat-site-title {
    display:inline-block !important;
    max-width:72px !important;
    margin:0 7px 0 0 !important;
    overflow:hidden !important;
    color:#1f3f67 !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:18px !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
}

#chatArea .countWrap {
    display:inline-flex !important;
    align-items:center !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
    color:#888 !important;
    font-size:12px !important;
    line-height:18px !important;
}
#chatArea .countIcon {
    display:inline-block !important;
    width:16px !important;
    height:16px !important;
    margin-right:3px !important;
    background:url('../img/livechat/group.svg') center/16px 16px no-repeat !important;
    vertical-align:middle !important;
}
#chatArea .count {font-weight:400 !important;color:#777 !important;}
#chatArea .sl-livechat-status {display:none !important;}

#chatArea .top .setting,
#chatArea .top .toolwrap button {
    display:inline-block !important;
    width:22px !important;
    height:22px !important;
    margin:6px 0 0 2px !important;
    padding:0 !important;
    border:0 !important;
    background-color:transparent !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:18px 18px !important;
    cursor:pointer !important;
    opacity:.78 !important;
    vertical-align:top !important;
}
#chatArea .top .setting:hover,
#chatArea .top .toolwrap button:hover {opacity:1 !important;}
#chatArea .top .toolwrap {height:35px !important;margin:0 !important;padding:0 !important;white-space:nowrap !important;}
#chatArea .top .setting {background-image:url('../img/livechat/setting.svg') !important;}
#chatArea .top .recommend {background-image:url('../img/livechat/rule.svg') !important;}
#chatArea .top .popup {background-image:url('../img/livechat/popup.svg') !important;}
#chatArea .top .clear {background-image:url('../img/livechat/clear.svg') !important;}
#chatArea .top .fontsizeup {background-image:url('../img/livechat/font-up.svg') !important;}
#chatArea .top .fontsizedown {background-image:url('../img/livechat/font-down.svg') !important;}
#chatArea .top .reload {background-image:url('../img/livechat/reload.svg') !important;}

#chatArea .middle {
    position:absolute !important;
    top:36px !important;
    left:0 !important;
    right:0 !important;
    bottom:40px !important;
    z-index:2 !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:#fff !important;
    overflow:hidden !important;
    color:#333 !important;
}
#chatArea .contentWrap {
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fff !important;
}
#chatArea .content,
#chatArea .sl-chat-msgs {
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:37px 3px 7px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:#fff !important;
    color:#333 !important;
    font-size:var(--scoreline-chat-font-size) !important;
    line-height:1.41 !important;
    scrollbar-width:thin !important;
    scrollbar-color:#9c9c9c transparent !important;
}
#chatArea .sl-chat-msgs::-webkit-scrollbar {width:7px;}
#chatArea .sl-chat-msgs::-webkit-scrollbar-track {background:transparent;}
#chatArea .sl-chat-msgs::-webkit-scrollbar-thumb {background:#999;border-radius:4px;}
#chatArea .sl-chat-empty {
    padding:45px 8px !important;
    color:#999 !important;
    font-size:11px !important;
    text-align:center !important;
}
#chatArea .sl-chat-line {
    min-height:0 !important;
    margin:0 !important;
    padding:2px 5px !important;
    border:0 !important;
    background:#fff !important;
    color:#333 !important;
    word-break:break-all !important;
    overflow:hidden !important;
    font-size:var(--scoreline-chat-font-size) !important;
    line-height:1.41 !important;
}
#chatArea .sl-chat-line:nth-child(even),
#chatArea .sl-chat-line:hover {background:#fff !important;}
#chatArea .sl-chat-time {display:none !important;}
#chatArea .sl-chat-line .name {
    display:inline !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    color:#333 !important;
    font-size:inherit !important;
    font-weight:700 !important;
    line-height:inherit !important;
    vertical-align:baseline !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    cursor:pointer !important;
}
#chatArea .sl-chat-line .name::after {content:":";}
#chatArea .sl-chat-line .msg {
    display:inline !important;
    margin-left:4px !important;
    color:#333 !important;
    font-size:inherit !important;
    line-height:inherit !important;
    vertical-align:baseline !important;
}

#chatArea .top_layer_wrap {
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    z-index:12 !important;
    width:100% !important;
    height:34px !important;
    color:#fff !important;
    font-weight:700 !important;
    pointer-events:none !important;
}
#chatArea .top_layer_wrap .floor {
    height:34px !important;
    margin:0 !important;
    padding:8px 9px !important;
    border:0 !important;
    border-bottom:1px solid #dce0ec !important;
    background:#003366 !important;
    overflow:hidden !important;
}
#chatArea .top_layer_wrap .text {
    width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    font-size:11px !important;
    line-height:17px !important;
}
#chatArea .ticker_01,
#chatArea .ticker_01 li {margin:0 !important;padding:0 !important;list-style:none !important;color:#fff !important;}

#chatArea .bottom {
    position:absolute !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    z-index:20 !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-top:1px solid #dbdbdb !important;
    background:#fff !important;
    color:#333 !important;
    box-shadow:0 -1px 7px rgba(0,0,0,.2) !important;
    overflow:hidden !important;
    font-size:0 !important;
}
#chatArea .bottom table {width:100% !important;height:39px !important;border:0 !important;border-collapse:collapse !important;}
#chatArea .bottom td {height:39px !important;margin:0 !important;padding:0 !important;border:0 !important;vertical-align:middle !important;}
#chatArea .inputWrap {position:relative !important;width:100% !important;height:39px !important;overflow:hidden !important;background:#fff !important;cursor:text !important;}
#chatArea .send {
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    z-index:3 !important;
    display:block !important;
    width:42px !important;
    height:39px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-left:1px solid #e1e1e1 !important;
    background:#fff url('../img/livechat/send.svg') center/20px 20px no-repeat !important;
    cursor:pointer !important;
}
#chatArea .send:hover {background-color:#f4f7fb !important;}
#chatArea .send:disabled {opacity:.35 !important;cursor:not-allowed !important;}
#chatArea .inputContent {position:absolute !important;top:0 !important;right:42px !important;bottom:0 !important;left:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important;}
#chatArea .chatInput {
    display:block !important;
    width:100% !important;
    height:39px !important;
    min-height:39px !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 8px !important;
    border:0 !important;
    outline:0 !important;
    background:#fff !important;
    color:#333 !important;
    font-size:13px !important;
    line-height:39px !important;
    resize:none !important;
}
#chatArea .chatInput:disabled {background:#f6f6f6 !important;color:#999 !important;}
#chatArea .sl-livechat-login-guide {
    position:absolute !important;
    right:48px !important;
    bottom:4px !important;
    z-index:22 !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#999 !important;
    font-size:10px !important;
    line-height:18px !important;
    pointer-events:none !important;
}

#chatArea .latest_chat {display:none !important;}
#chatArea .settingBackground {
    display:none;
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    z-index:100 !important;
    background:rgba(0,0,0,.02) !important;
}
#chatArea .settingContent {
    display:none;
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    z-index:111 !important;
    border:1px solid #dce0ec !important;
    background:#fff !important;
    color:#333 !important;
    overflow-y:auto !important;
}
#chatArea .chat_set {padding:20px !important;}
#chatArea .chat_set h2 {margin:0 !important;padding:0 0 10px !important;color:#1b7ede !important;font-size:12px !important;font-weight:700 !important;}
#chatArea .chat_set_cont {margin:0 0 20px !important;padding:10px 0 !important;border-bottom:1px dashed #dbdbdb !important;color:#333 !important;font-size:12px !important;line-height:1.4 !important;}
#chatArea .chat_set_cont p {margin:0 !important;padding:0 0 10px !important;}
#chatArea .chat_set_cont p strong {display:inline-block !important;width:70px !important;padding-left:10px !important;font-weight:400 !important;}
#chatArea .chat_set_cont label {display:inline-block !important;padding:0 4px !important;vertical-align:middle !important;}
#chatArea .chat_set_cont input {vertical-align:middle !important;}
#chatArea .chat_set_btn {width:100% !important;padding:10px 0 !important;text-align:center !important;}
#chatArea .chat_set_btn button {display:inline-block !important;margin:0 2px !important;padding:9px 20px !important;border:1px solid #ddd !important;background:#fff !important;color:#333 !important;font-size:12px !important;font-weight:700 !important;cursor:pointer !important;}
#chatArea .chat_set_btn .ok {border-color:#002291 !important;background:#002291 !important;color:#fff !important;}

#chatArea .chat_rule {
    display:none;
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    z-index:2200 !important;
    margin:0 !important;
    padding:20px !important;
    border:1px solid #dce0ec !important;
    background:#fff !important;
    color:#333 !important;
    overflow-y:auto !important;
}
#chatArea .chat_rule h2 {margin:0 !important;padding:0 0 8px !important;color:#1b7ede !important;font-size:12px !important;font-weight:700 !important;}
#chatArea .chat_rule ol {margin:0 0 18px !important;padding:0 10px 10px 25px !important;}
#chatArea .chat_rule li {padding:3px !important;color:#333 !important;font-size:12px !important;line-height:1.3 !important;list-style:decimal !important;}
#chatArea .chat_rule_close {position:absolute !important;top:6px !important;right:8px !important;width:24px !important;height:24px !important;border:0 !important;background:transparent !important;color:#666 !important;font-size:20px !important;line-height:24px !important;cursor:pointer !important;}

body.sl-chat-popup-page {margin:0 !important;padding:0 !important;background:#fff !important;overflow:hidden !important;}
body.sl-chat-popup-page #livechat {width:100vw !important;height:100vh !important;margin:0 !important;border:0 !important;}
body.sl-chat-popup-page #chatArea.sl-chat-original {width:100vw !important;height:100vh !important;}

html.dark #chatArea .wrap,
html.dark #chatArea .top,
html.dark #chatArea .middle,
html.dark #chatArea .contentWrap,
html.dark #chatArea .content,
html.dark #chatArea .sl-chat-msgs,
html.dark #chatArea .sl-chat-line,
html.dark #chatArea .bottom,
html.dark #chatArea .inputWrap,
html.dark #chatArea .chatInput {background:#242525 !important;color:#d8d4cc !important;border-color:#464948 !important;}
html.dark #chatArea .sl-chat-line .name,
html.dark #chatArea .sl-chat-line .msg {color:#d8d4cc !important;}
html.dark #chatArea .top .setting,
html.dark #chatArea .top .toolwrap button {filter:invert(1) brightness(1.35);}
html.dark #chatArea .settingContent,
html.dark #chatArea .chat_rule {background:#242525 !important;color:#d8d4cc !important;border-color:#464948 !important;}
html.dark #chatArea .chat_set_cont,
html.dark #chatArea .chat_rule li {color:#d8d4cc !important;border-color:#464948 !important;}

/* AI BOT MEMBER SEPARATION */
#chatArea .sl-chat-line.is-ai-bot{background:#f3f7ff;border-left:2px solid #3f78c5;padding-left:4px}
#chatArea .sl-chat-line.is-ai-bot .name{color:#1559a6;font-weight:700}
html.dark #chatArea .sl-chat-line.is-ai-bot{background:#252f3d;border-left-color:#6fa7ed}
html.dark #chatArea .sl-chat-line.is-ai-bot .name{color:#8fc0ff}

/* GATELINKE_CHAT_MEMBER_INPUT_FIX_BEGIN */
/*
 * 채팅 메시지 줄 겹침 및 입력 안내 중복 보정
 * 기존 채팅 기능·메시지 데이터는 변경하지 않습니다.
 */
#chatArea .content,
#chatArea .sl-chat-msgs {
    box-sizing:border-box !important;
    padding-bottom:8px !important;
    font-family:"Malgun Gothic","맑은 고딕",Arial,sans-serif !important;
    letter-spacing:0 !important;
}

#chatArea .content .line,
#chatArea .sl-chat-line {
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-height:20px !important;
    height:auto !important;
    margin:0 !important;
    padding:1px 7px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    clear:both !important;
    color:#222 !important;
    font-size:var(--scoreline-chat-font-size,12px) !important;
    line-height:20px !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
}

#chatArea .content .line > *,
#chatArea .sl-chat-line > *,
#chatArea .content .line .nick,
#chatArea .content .line .chatContent,
#chatArea .sl-chat-line .name,
#chatArea .sl-chat-line .msg {
    position:static !important;
    float:none !important;
    display:inline !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    vertical-align:baseline !important;
    font-size:inherit !important;
    line-height:20px !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
}

#chatArea .content .line .nick,
#chatArea .sl-chat-line .name {
    font-weight:700 !important;
}

#chatArea .content .line .chatContent,
#chatArea .sl-chat-line .msg {
    margin-left:4px !important;
    font-weight:400 !important;
}

/* 입력창에는 placeholder 하나만 표시하고 별도 안내문 중복을 제거합니다. */
#chatArea .sl-livechat-login-guide {
    display:none !important;
}

#chatArea .bottom,
#chatArea .inputWrap,
#chatArea .inputContent {
    box-sizing:border-box !important;
}

#chatArea .inputContent {
    z-index:2 !important;
    height:39px !important;
}

#chatArea .chatInput {
    position:relative !important;
    z-index:2 !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:39px !important;
    min-height:39px !important;
    margin:0 !important;
    padding:0 9px !important;
    border:0 !important;
    outline:0 !important;
    color:#222 !important;
    background:#fff !important;
    font-family:"Malgun Gothic","맑은 고딕",Arial,sans-serif !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:39px !important;
    letter-spacing:0 !important;
    text-indent:0 !important;
    white-space:nowrap !important;
}

#chatArea .chatInput::placeholder {
    color:#8b929a !important;
    opacity:1 !important;
    font-size:11px !important;
    font-weight:400 !important;
}

#chatArea .chatInput:disabled {
    color:#8b929a !important;
    background:#f7f8fa !important;
    -webkit-text-fill-color:#8b929a !important;
    opacity:1 !important;
}

#chatArea .send {
    z-index:4 !important;
}

#chatArea .send:disabled {
    opacity:.35 !important;
    pointer-events:none !important;
}

@media screen and (max-width:480px) {
    #chatArea .content .line,
    #chatArea .sl-chat-line,
    #chatArea .content .line > *,
    #chatArea .sl-chat-line > * {
        line-height:19px !important;
    }
}
/* GATELINKE_CHAT_MEMBER_INPUT_FIX_END */