:root {
    --main-back : #ffffff;
    --main-color : #333333;
    --other-back : #f5f6fb;
    --other-color : #9898b7;
    --tab-back : #c6ccdd;
    --tab-color : #ffffff;
    --border-color: rgba(0,0,0,0.08);
}

.cclog_wrap * {box-sizing: border-box;}
.cclog_wrap .ccl_inWrap {font-size: 15px; letter-spacing: -.5px; color: var(--main-color);}

.cclog_wrap .ccl_inWrap .ccl_tab {width: 100%; background: var(--other-back); position: relative;}
.cclog_wrap .ccl_inWrap .ccl_tab.ccl_main:before {background: #868bab;}
.cclog_wrap .ccl_inWrap .ccl_tab.ccl_main{background: var(--main-back);}
.cclog_wrap .ccl_inWrap .ccl_tabtitle {margin: 0; color: var(--tab-color); background: var(--tab-back); position: absolute; top: 10px; right: 10px; border-radius: 5px; padding: 5px; font-weight: 200}

.cclog_wrap .ccl_inWrap .ccl_player {display: flex; overflow: hidden; padding: 15px 0 15px 20px; border-bottom: 1px solid var(--border-color)}
.cclog_wrap .ccl_inWrap .ccl_infoWrap .ccl_imgWrap {overflow: hidden; width: 40px;height: 40px; float: left; }
.cclog_wrap .ccl_inWrap .ccl_infoWrap .ccl_imgWrap img {width: 40px; height: auto;}
.cclog_wrap .ccl_inWrap .ccl_infoWrap .ccl_imgWrap:not(:has(img)) {opacity: 0;}
.cclog_wrap .ccl_inWrap .ccl_textWrap {float: left; line-height: 1.6; margin-left: 20px; margin-right: 20px;}
.cclog_wrap .ccl_inWrap .ccl_textWrap .ccl_Uname {margin: 0; font-weight: 800;}
.cclog_wrap .ccl_inWrap .ccl_other .ccl_Uname {color: var(--other-color) !important}
.cclog_wrap .ccl_inWrap .ccl_textWrap .ccl_Utext {margin: 0; font-weight: 400; color: var(--other-color)}
.cclog_wrap .ccl_inWrap .ccl_tab.ccl_main .ccl_textWrap .ccl_Utext {color: var(--main-color);}

.cclog_wrap .ccl_inWrap .ccl_player.system {padding: 0px; border-color: #EBEBEB !important; background: #b1b5cd; text-align: center; justify-content: center}
.cclog_wrap .ccl_inWrap .ccl_player.system .ccl_infoWrap {display: none;}
.cclog_wrap .ccl_inWrap .ccl_player.system .ccl_textWrap {margin-left: 0; padding: 10px 20px}
.cclog_wrap .ccl_inWrap .ccl_player.system .ccl_textWrap .ccl_Uname {color: #ffffff; font-size:0.86em; letter-spacing: 1px; padding: 3px 8px; border-radius: 15px; background: #8993b3}
.cclog_wrap .ccl_inWrap .ccl_player.system .ccl_textWrap .ccl_Utext {margin-top: 5px; color: #ffffff; letter-spacing: -1px}

.cclog_wrap .ccl_inWrap .ccl_main .ccl_player.narrator {padding: 0px; text-align: center; justify-content: center;}
.cclog_wrap .ccl_inWrap .ccl_main .ccl_player.narrator .ccl_infoWrap {display: none;}
.cclog_wrap .ccl_inWrap .ccl_main .ccl_player.narrator .ccl_textWrap {margin-left: 0; padding: 10px 20px}
.cclog_wrap .ccl_inWrap .ccl_main .ccl_player.narrator .ccl_textWrap .ccl_Uname {display: none;}
.cclog_wrap .ccl_inWrap .ccl_main .ccl_player.narrator .ccl_textWrap .ccl_Utext {margin-top: 5px; letter-spacing: -1px}


/* 코코포 html 스타일 */
.message-list * {box-sizing: border-box;}
.message-list {font-size: 15px; letter-spacing: -.5px; color: var(--main-color); font-weight: 500;}
.message-list .log-title {display: none;}

.message-list .message {display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap:20px; overflow: hidden; padding: 20px 0px 20px 20px; border-top: 1px solid var(--border-color); width: 100%; position: relative; background: #ececf7;}
.message-list .message:nth-of-type(1) {border-top: 0;}
.message-list .message.system {text-align: center; display: block;}
.message-list .message .channel-name {margin: 0; color: var(--tab-color); background: var(--tab-back); position: absolute; top: 10px; right: 10px; border-radius: 5px; padding: 5px; font-weight: 200; font-size: 13px; line-height: 1;}
.message-list .message .avatar {overflow: hidden; width: 40px; height: 40px; border-radius: 5px; display: block; background-repeat: no-repeat; background-size: 100% 100%;}
.message-list .message .avatar:has(img) {background-image: none;}
.message-list .message .avatar-spacer {width: 40px;}
.message-list .message .message-content {line-height: 1.6; padding-right: 20px;}
.message-list .message .speaker {margin: 0; font-weight: 800; color: var(--speaker-color);}
.message-list .message .timestamp {margin-left: 5px; opacity: 0.6; color: var(--main-color); font-size: 0.85em;}
.message-list .message .message-text {margin: 0; color: var(--main-color)}
.message-list .message .edited {display: none;}

.message-list .message[data-channel="main"] {background: var(--main-back)}
.message-list .message[data-channel="other"] {background: var(--other-back);}
.message-list .message[data-channel="other"] .speaker,
.message-list .message[data-channel="other"] .message-text,
.message-list .message[data-channel="other"] .timestamp  {color: var(--other-color);}
.message-list .message[data-channel="other"] .speaker {color: var(--other-color);}
.message-list .message[data-channel="other"] .message-text {font-weight: 400; color: var(--other-color)}
.message-list .message[data-channel="other"] .roll-result {color: var(--other-color);}

.message-list .message .roll-result {opacity: 0.7;}
.message-list .message.same-channel .channel-name {display: none;}