@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");


@font-face { font-display: swap;}



:root { --body:#222329; --header:#111113; --bg: #33353d; --bgsub: #1f2025; --main:#5665f4; --sub: #8787ff; --textbar: #3f4144; --font-primary:'Pretendard', sans-serif;}
html, body {
    margin: 0;
    padding: 0;

    padding-left: calc(env(safe-area-inset-left) * 0);
    padding-right: calc(env(safe-area-inset-right) * 0);
    padding-top: calc(env(safe-area-inset-top) * 0);
    padding-bottom: calc(env(safe-area-inset-bottom) * 0) !important;

    min-height: 100%;
}

@supports (-webkit-touch-callout: none) {
    @media (orientation: portrait) {
       #wrap { padding-top: env(safe-area-inset-top) !important;}   
       .navbar-fixed-bottom, .navbar-fixed-top {top:env(safe-area-inset-top) !important;}
    }
}



img {
  content-visibility: auto;
  contain-intrinsic-size: 100px 100px;
}

.usertext {
  will-change: transform;
  backface-visibility: hidden;
}

/* color_* 효과 사용자만 GPU 분리 */
[class*="color_"] .usertext,
[class*="color_"] .usericon {
  transform: translateZ(0);
  will-change: transform;
}

/* pwa */
.pwa-banner {opacity:0; pointer-events:none; position:fixed; bottom:40px; left:50%; transform:translateX(-50%); border:1px solid rgba(255,255,255,0.25); text-align:center; z-index:10000; padding:22px 30px; background:rgba(0,0,0,0.6); border-radius:10px; color:#fff; font-size:14px; display:flex; align-items:center; flex-direction:column; gap:5px; box-shadow:0 4px 12px rgba(0,0,0,0.4); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:opacity .2s ease;}
.pwa-banner.active {opacity:1 !important; pointer-events:auto;}
.pwa-banner * {font-size:15px !important;}
.pwa-banner p {gap:10px; color:#fff; display:block; margin-bottom:10px; line-height:1.45; display:flex; align-items:center;}
.pwa-banner p img {width:40px;}
.pwa-banner p span {font-weight:600;}
.pwa-banner .pwa-btn {display:inline-block; width:40px; height:40px; border-radius:6px; transition:.3s; border:0; outline:none;}
.pwa-banner .pwa-btn:hover {opacity:.8;}
.pwa-banner .pwa-btn:active {opacity:.5;}
.pwa-banner .btns {display:flex; align-items:center; gap:10px; width:100%;}
.pwa-banner #pwaInstallBtn {background:var(--main); width:200px; flex:1;}
.pwa-banner #pwaInstallCloseBtn {background:var(--bg);}
.pwa-banner #pwaIOSGuideBtn {background:var(--main); width:200px; flex:1;}
.pwa-banner #pwaIOSCloseBtn {background:var(--bg);}
.pwa-banner .pwa-img-area {width:100%; font-size:0; max-height:400px; overflow-y:auto; margin-bottom:10px;}
.pwa-banner .pwa-img-area img {width:100%;}


/**
 * Minified by jsDelivr using clean-css v5.3.2.
 * Original file: /gh/deafnv/bokitube-server@master/channel/style.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
::-webkit-scrollbar{width:8px;height:3px;border:0 solid #444;border-top:0;border-bottom:0;display:none}::-webkit-scrollbar-corner{background-color:#1a1a1a}::-webkit-scrollbar-track{border-radius:4px;background:var(--primarycolor)}::-webkit-scrollbar-thumb{border-radius:10px;background:#686868}::-webkit-scrollbar-thumb:hover{background:#555}#wrap{padding:0}#drinkbarwrap,#resizewrap{display:none}#chatwrap>.profile-box{height:100vh!important;width:100vw!important;z-index:1039!important;max-height:unset;max-width:unset;position:fixed!important;top:0!important;left:0!important;padding:unset!important;overflow:visible;border:none}.fluid>.profile-box{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:1020}div#chanjs-allow-prompt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#chanjs-allow-prompt>button.close{display:none}#mainpage{padding-top:50px}.navbar{border:none}.navbar-header,.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{background:var(--primarycolor)}.navbar-inverse .navbar-brand{letter-spacing:4px}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#cee8ff}.navbar-brand{float:left;padding:15px;font-size:18px;line-height:20px;height:50px}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:var(--tertiarycolor)!important}.navbar-nav>li:hover{background-image:var(--tertiarycolor)!important}.nav>li>a:focus,.nav>li>a:hover{background-color:var(--tertiarycolor)!important}#content-wrap{display:grid}#leftcontent{width:var(--leftcontentvw);background-image:var(--bgimageurl);background-repeat:no-repeat;background-attachment:fixed}#pollwrap{position:absolute}.poll-menu{position:absolute;z-index:1020;max-width:30%;background:rgba(0,0,0,.6);border:#bbb;border-style:solid;border-width:thin;border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(3.8px);-webkit-backdrop-filter:blur(3.8px)}.well.active{position:absolute;z-index:1020}#video-container{display:flex;flex-direction:column;justify-content:center;align-content:center;height:calc(100vh - 50px);background-color:#000}#videowrap{width:100%;padding:0}div.embed-responsive *{max-height:calc(100vh - 50px)}#motdwrap{background:rgba(28,30,34,.75);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid rgba(28,30,34,.34)}#motdrow{padding-top:15px}.row{margin-left:60px;margin-right:50px}#announcements{height:0;margin-top:15px}#controlsrow{margin-left:75px}#rightcontrols{display:flex;justify-content:space-between;flex-wrap:wrap;width:100%!important}#playlistrow{margin-left:initial}#playlistrow ::before{display:initial}#rightpane{width:var(--leftcontentvw)}#rightcontent{display:flex;flex-direction:column;height:calc(100vh - 50px);width:calc(100vw - var(--leftcontentvw));min-width:auto;position:fixed;right:0}#chatheader{background-color:var(--primarycolor);border-radius:unset}#chatheader .label{height:unset}.currenttitlewrap{overflow:hidden}#videowrap-header{display:flex;overflow-wrap:break-word;overflow-y:auto;background-color:var(--secondarycolor);padding:9px 15px 15px 15px;border-radius:0}#currenttitle{overflow-x:hidden;overflow-y:scroll;max-height:40px}#usercount{padding-left:20px;pointer-events:none}#userlist{height:30px!important;min-height:30px;width:inherit;min-width:inherit;float:unset;display:flex;overflow-x:scroll;overflow-y:hidden;background-color:var(--primarycolor)}#userlist::-webkit-scrollbar{display:block}#chatheader,#messagebuffer,#userlist,#videowrap-header{border:initial}.userlist_item{display:flex;padding-left:15px;padding-top:3px}.userlist_owner{font-size:small}#messagebuffer{height:unset!important;flex-grow:1;padding-left:10px;padding-right:10px;background-color:var(--secondarycolor)}#messagebuffer>div{position:relative;border-radius:.5rem;padding:.2rem;padding-right:5rem;margin-bottom:10px}#messagebuffer>div:last-child{padding-bottom:0;margin-bottom:1.25rem}.server-whisper{padding-left:100px;padding-bottom:0}.server-msg-disconnect,.server-msg-reconnect{padding-bottom:0!important;border-radius:6px}.label{display:flex}.username{display:flex}.timestamp{position:absolute;top:.6rem;right:0;color:#8f8f8f;visibility:visible}.channel-emote{max-width:80px;max-height:80px}.emote-big{max-width:120px;max-height:120px}.emote-big>img{max-width:-webkit-fill-available;max-height:-webkit-fill-available}.nick-highlight{border-radius:8px}#rightcontent>form{background-color:var(--primarycolor)}#chatline{height:3.6rem;max-height:10rem;margin:10px 0;border-radius:10px;resize:none}#chatline::placeholder{font-style:italic;opacity:.5;color:grey}.form-control{border:initial;border-radius:8px}#leftcontrols{background-color:var(--primarycolor);display:flex;padding:6px;min-height:42px;width:inherit;min-width:inherit}.btn{background-image:none;background-color:var(--tertiarycolor)}.btn:hover{filter:brightness(.9)}.btn-danger{color:#fff;background-color:#ee5f5b}.btn-danger:hover{filter:brightness(.5)}#jump-btn{color:#fff}#newpollbtn{display:flex;justify-content:center;align-items:center}#emotes-btn{display:flex;justify-content:center;align-items:center}#afk-btn{margin-left:auto}#needpw{top:50%!important;left:50%!important;transform:translate(-50%,-50%)}#needpw input{background-color:var(--secondarycolor)!important}.container .credit{margin:10px 0;text-align:center}.text-muted{color:#7a8288}#footer{font-size:11px}@media only screen and (max-width:1264px){#leftcontent{width:calc(100vw - 273px)}}@media only screen and (max-width:768px){@media only screen and (max-height:560px){#chatheader,#userlist{display:none}}@media only screen and (max-height:900px){#currenttitlewrap{display:none}}#leftcontent{width:100vw}#videowrap{padding-top:0;padding-bottom:0;margin-bottom:0}#video-container{position:fixed;height:calc(100vw / 16 * 9);width:100vw;z-index:1000}#emotewrap{/*position:fixed;top:calc(139vw / 16 * 9)!important;left:-4vw!important*/}#emotespanel{display:flex;flex-wrap:wrap;flex-direction:column;z-index:999}#chatwrap{height:485px!important;width:100%}#messagebuffer{height:336px!important}#rightcontent{position:initial;margin-top:calc(100vw / 16 * 9);height:calc((var(--vh,1vh) * 100 - 100vw / 16 * 9) - 50px);width:100%}#announcements{display:contents}.row{margin-left:0;margin-right:0}#controlsrow{margin-left:15px;margin-right:15px}#playlistrow{margin-right:50px}#rightpane{width:108%}}.modal-body::before{content:"";background-image:var(--dialogbgimageurl);background-size:contain;background-repeat:no-repeat;background-position-y:bottom;position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5}.modal-backdrop.in{opacity:.3}.form-group,.pm-history-content,.tab-content>.tab-pane{position:relative}textarea.form-control{height:500px}.nick-hover{background-color:rgba(0,0,0,0)}.emotewrap{position:absolute;cursor:move;top:17%;left:-4%}.ep__floating{position:fixed;z-index:1020;height:28%!important;overflow:scroll;text-align:center;width:380px;margin:10px 20px 0 30px;opacity:1;background:rgba(0,0,0,.27);border-radius:16px;border:#bbb;border-style:solid;border-width:thin;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(3.8px);-webkit-backdrop-filter:blur(3.8px)}.ep__fixed{z-index:1020; width:100%;margin:0;text-align:left;border:var(--primarycolor);border-style:none none solid none;border-width:thick;background-color:var(--secondarycolor)}#emotespanel img{cursor:pointer}#emotesbtnwrap{text-align:center;margin:5px}#emotespanel .alert{text-align:left;margin:5px -10px}#cs-csspreview{position:absolute;margin-left:10px;margin-top:10px}.banner-slideshow{height:215px;max-width:100%;margin:0 auto;border-style:solid;position:relative;overflow:hidden;transform:translate3d(0,0,0);border-color:#916907}.banner-slideshow>div{height:400px;width:5066px;background:var(--bannerimg);background-size:50%;background-position:center;position:absolute;top:0;left:0;height:100%;transform:translate3d(0,0,0)}.banner-slideshow .mover-1{animation:moveSlideshow 20s linear infinite}@keyframes moveSlideshow{100%{transform:translateX(-50%)}}.autocomplete-items{position:absolute;max-height:150px;overflow:scroll;border:1px solid #d4d4d4;border-left:none;border-right:none;border-bottom:none;z-index:99;bottom:100px;left:0;right:0;background:rgba(0,0,0,.67);border-style:none;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(7.8px);-webkit-backdrop-filter:blur(7.8px)}.autocomplete-items div{display:flex;align-items:center;padding:0 10px;cursor:pointer;background:0 0;border:none}.autocomplete-items div:hover{background-color:#4a4a4a}#autocomplete-image{margin-left:auto;display:block;height:42px}.autocomplete-active{background-color:var(--tertiarycolor)!important;color:#fff}.reply{position:relative;background-color:var(--tertiarycolor);padding:.5rem;padding-top:0;margin-bottom:.4rem;border:gray 1px solid;border-radius:1rem 1rem 1rem 0;overflow:hidden;max-height:10rem;width:98%;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms;cursor:pointer}.reply:hover{background-color:var(--secondarycolor)}.reply:hover::after{background-image:unset}.reply::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1rem;background-image:linear-gradient(to bottom,transparent,var(--tertiarycolor))}.reply-header{font-size:small}.reply-msg{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:small;color:#fff}.reply-button{visibility:hidden;display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;height:2.5rem;width:2.5rem;background:0 0;padding:0;border:none;border-radius:10000px;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.reply-button:hover{background-color:var(--tertiarycolor)}#messagebuffer>div:hover .reply-button{visibility:visible}#messagebuffer>div:not(:has(> .server-whisper)):hover .timestamp{visibility:hidden}.reply-icon{display:block;height:2.5rem;width:2.5rem;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTIwIDE4di04TDYgMjRsMTQgMTR2LTguMmMxMCAwIDE3IDMuMiAyMiAxMC4yLTItMTAtOC0yMC0yMi0yMnoiIGZpbGw9IiNjMmMyYzIiLz48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDQ4djQ4SDB6Ii8+PC9zdmc+);background-size:2.5rem 2.5rem;pointer-events:none}
/*# sourceMappingURL=/sm/a7293c5ef1f1ba15e2aac2b60f73aaaef4a2b4ec290e678a2582169bb7533000.map */
* {font-size:inherit !important;}
#chatwrap, #videowrap {margin-bottom:0 !important;}
#result {font-size:14px !important;}
.modal.none {display:none !important;}
.drink {border:0 !important; padding:0 !important; margin:0 !important;}
li {list-style-type: none;}
.navbar {background:var(--header) !important;} 
#rightcontent {background:var(--bgsub) !important;}
html.window .navbar {display:none;}
html.window #mainpage {padding-top:0 !important;}
html.window #channel-content {display:none;}
html.fullscreen #mainpage {padding-top:0 !important;}
html.fullscreen #video-container, html.fullscreen #rightcontent {height:calc(100vh);}
* {font-family:var(--font-primary) !important;}
pre {background-color:#333 !important; border:0 !important; font-size:14px !important; color:#ccc !important;}
.glyphicon {font-family:'Glyphicons Halflings' !important;}
:root {  --leftcontentvw:  81.5dvw; /* Width of video player section, chat will fill the rest */}
h1,h2,h3,h4,h5,h6 {text-shadow:none;}
.page_title {margin-bottom:20px; text-align:center; font-size:24px !important; font-weight:bold;}
body {background-color:var(--body) !important; color:#fff; line-height:1.55; font-size:15px; font-weight:500;}
#cs-csstext, #cs-jstext, #cs-motdtext { font-family:var(--font-primary) !important; line-height:1.7;}
code {background:transparent; color:#fff; font-size#emotelistbtn:13px; font-weight:bold;}
.server-whisper {margin:10px 0; display:block; font-style:normal; font-size:11px !important; padding:5px 0; padding-left:0 !important; text-align:center !important;}
input.form-control[type="text"], input.form-control[type="password"], inbodyput.form-control[type="email"], textarea.form-control {background:var(--textbar) !important; border:0;}
/*
#motdwrap.well {background:transparent !important; padding:0; min-height:auto; font-size:10px; line-height:50px; border:0; box-shadow:none;}
*/
#motdwrap.well {height:0; min-height:0; margin:0; background:transparent !important; box-shadow:none; border:0; padding:0 !important;}
.glyphicon {top:4px; margin-left:4px;}
.glyphicon-time {display:none;}
#plmeta {border:none; font-size:12px;}
#motd + .clear {display:none;}
#motdwrap .close {display:none;}
#messagebuffer {position:relative; font-size:0 !important;}
#messagebuffer .list_rule {margin-top:10px; padding:10px 10px 10px 10px; line-height:1.4; border:1px solid #666; }
#messagebuffer .list_rule li {display:block; font-size:14px !important; margin-bottom:3px; word-break:keep-all;}
#messagebuffer .list_rule li:last-child {margin-bottom:0;}
#messagebuffer .list_schedule {width:100%; display:table; margin:10px 0; padding:0;}
#messagebuffer .list_schedule li {display:table-row; width:100%;}
#messagebuffer .list_schedule li span {display:table-cell; font-size:14px !important; color:var(--sub); }
#messagebuffer .list_schedule li span.th {font-weight:bold;}
.reply-button:hover + span {text-decoration:underline; opacity:.6; transition:.2s;}
.h4, h4 {font-size:16px;}
table {background:transparent;}
.form-control {border-color:#666; height:48px; color:#eee !important;}
#footer {display:none;}
.autocomplete-items div {font-family:var(--font-primary) !important;}
#jump-btn {display:none;}
input::-webkit-input-placeholder {color:#eee !important;}
input:-ms-input-placeholder {color:#eee !important;}
textarea::-webkit-input-placeholder {color:#eee !important;}
textarea:-ms-input-placeholder {color:#eee !important;}
.tab_cont_wrap {overflow-y:auto; height:365px; background:rgba(0,0,0,0.4); touch-action: pan-y; /* 세로 스크롤 방지 */}


/* 팝업 */
.popup_iframe {display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%)!important; width:calc(100% - 30px); max-width:1700px; border-radius:10px; box-shadow:0px 10px 25px rgba(0,0,0,0.3); z-index:9999;  overflow:hidden; background:var(--textbar); font-size:0;}
.popup_iframe .popup_title {position:relative; width:100%; padding:0 25px; border-bottom:1px solid var(--textbar); }
.popup_iframe .popup_title h6 {margin:0; font-size:18px !important; font-weight:bold; text-align:left; line-height:55px;}
.popup_iframe .popup_cont {position:relative; min-height:700px;}
.popup_iframe iframe {position:absolute; top:0; left:0; border:0; width:100%; height:100%;}



#content-wrap .glyphicon {font-family:'Glyphicons Halflings' !important;}


/* 헤더 */
.dropdown-menu {background:rgba(10,10,10,.7); backdrop-filter: blur(3px);}
.dropdown-menu li {font-size:14px !important;}
.navbar {height:50px; backdrop-filter: blur(2px); border-bottom:1px solid #222;}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:inherit;}
.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-brand, .navbar-inverse .navbar-text {color:#fff;}
.navbar-text {margin-top:8px;}
.navbar-text * {font-size:14px !important;}
.navbar-nav>li>a {border:0;}
.navbar-nav>li>a:hover {background:rgba(0,0,0,0) !important;}
.navbar-brand {position:relative; font-size:0 !important; padding-left:66px !important; }
.navbar-brand:hover:before {color:var(--sub) !important;}

/*.navbar-brand:hover:after {background:url(https://s10.gifyu.com/images/SDxG9.png) 10px center no-repeat; background-size:24px;}*/
.navbar-toggle {padding:9px 6px !important;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus {background:#2d3147;}
.navbar-form input.form-control {width:140px; height:28px; background-color:var(--textbar) !important; border:0; font-size:12px !important;}
.navbar-text-nofloat {font-size:0 !important;}
.navbar-text-nofloat:before {content:"로그인저장"; font-size:11px;color:#fff; opacity:.85; display:inline-block; top:-2px; position:relative; margin-left:5px;}
.navbar .form_control {color:#333 !important;}
.navbar-nav {font-weight:bold;}
.navbar-nav>li a:hover {color:var(--sub) !important;}
.navbar.scroll {background:var(--bg) !important;}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {background:rgba(255,255,255,0.23);}
.navbar-toggle {background:transparent !important;}
.navbar-inverse .navbar-toggle, .modal-footer {border-color:rgba(255,255,255,0.35);}
.navbar-inverse .navbar-toggle .icon-bar {background:#fff;}
.nav-tabs, .table>thead>tr>th {border-bottom-color:rgba(255,255,255,0.3);}
.nav-tabs>li {font-size:14px;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {background:#fff !important;background:#fff; color:#222; font-weight:bold; opacity:1 !important;}
.nav-tabs>li.active>a:active {background:#fff !important;}
.nav-tabs>li>a:hover {background:rgba(255,255,255,.2) !important;}
.nav-tabs>li.active>a:hover {background:#fff !important;}
input#logout[type="submit"] {background:var(--main) !important; color:#fff !important; border-radius:8px; padding:5px 15px;}

/* 영상 & 채팅창 */
.reply-icon {width:25px; height:20px; background:url("https://s12.gifyu.com/images/SD2aM.png") center no-repeat; background-size:100%;}
.nick-highlight {background:var(--main) !important;}
.nick-highlight .server-whisper {color:#fff !important;}
#video-container {border-bottom:1px solid #333;}
#modflair {display:none;}
#userlist {border-bottom:1px solid #333 !important; overflow-y:visible; }
#messagebuffer {padding:15px 15px 5px !important; scrollbar-width: none; }
#messagebuffer>div {margin-bottom:0 !important; padding:0 !important; font-size:14.5px !important;}
.reply {border-color:var(--sub); color:var(--sub); border-radius:8px !important; padding:5px 10px !important; font-size:14px !important; margin-top:5px;}
.reply:hover {background:#222;}
#emotelist .modal-dialog {float:right;}
.timestamp {display:none;}
.userwrap {display:block; margin-top:10px; margin-bottom:3px;}
.username {display:inline-block; color:var(--sub); font-size:15.5px !important;}
.userlist_op {color:var(--sub);}
.userlist_item {position:relative; color:#fff !important; font-size:12px !important;}
.userlist_owner {color:var(--sub) !important;}
.server-whisper {color:#ddd !important;}
.nick-hover {background:transparent; background:rgba(255,255,255,0.1) !important;}
#videowrap {padding-right:0;}
#chatline, #guestname {font-size:16px !important;}
#usercount {font-weight:bold; font-size:12px !important; padding-left:15px !important;}
#videowrap {position:relative;}
#emotespanel.ep__fixed {position:fixed; border-color:transparent !important; background:#595367; backdrop-filter: blur(3px); border-bottom:0 !important; border-radius:0px; backdrop-filter: blur(8px); transition:0s !important; z-index:99999 !important; padding:0px 0px !important; width:calc(100vw - var(--leftcontentvw));}
#emotespanel img {width:calc(20% - 6px); margin:0px 7.5px 10px 0px; aspect-ratio:1/1; max-height:none !important; border-radius:8px;}
#emotespanel img:nth-child(5n) {margin-right:0;}
#emotespanel img:hover {opacity:.8; background:rgba(255,255,255,0.2);}
#emotespanel img:active {opacity:.6;}
#videowrap-header {display:none !important;}
#controlsrow {position:relative;}
#controlsrow, #motdrow.row, #rightpane-inner {margin-left:0px !important; margin-right:15px;}
.row .col-lg-12 {margin-left:0; padding-left:15px; margin-right:0; padding-right:0;}
.queue_entry {background-image:none; background:var(--bgsub); border:0; padding:5px 15px 10px !important; box-sizing:border-box; border-top:1px solid #444; border-bottom:1px solid #030303;}
.queue_entry:hover {background:#333;}
.queue_active.queue_entry {background-image:none; background:var(--bg) !important;}
.queue_active.queue_entry .qe_title {font-weight:bold; color:var(--sub) !important;}
.queue_entry * {font-size:13px !important;}
#rightpane, #rightcontrols {padding:0 !important; margin-left:0;}
/*
#motdwrap.well {background:#131313 !important; border-radius:10px !important; padding:20px 0px 20px 0px !important; border-top:1px solid #444; border-bottom:1px solid #444; margin-bottom:20px;}
#motdwrap.well #motd {font-size:0 !important; text-align:center;}
#motdwrap.well .motd-link {margin-right:15px;}
#motdwrap.well .motd-link img {width:480px;}
*/
#leftcontrols  {position:relative; height:0; min-height:0; padding:0;}
#leftcontrols #emotes-btn svg {display:none;}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {font-size:15px !important;}



/* 오토컴플리트 */
#autocomplete-list {max-height:200px;}
#autocomplete-list div {border-bottom:1px dotted rgba(255,255,255,0.2); font-size:14px !important;}
#autocomplete-list div:hover {background:rgba(255,255,255,0.2);}
#autocomplete-image {height:35px; border-radius:5px; padding:0px 15px;}


/* 1:1 채팅 */
.panel-heading {min-width:100px !important; background: linear-gradient(90deg, rgba(96,180,40,1) 0%, rgba(54,160,220,1) 100%) !important;
 color:#fff !important; font-weight:bold;border-bottom:0; letter-spacing:0.5px;}
.panel-heading  .close {margin-top:0px; color:#fff !important; font-size:21px !important;}
.panel-heading:after {content:" 님"; margin-right:10px;}
.pm-panel {position:relative;  left:0px; width:auto; min-width:260px; max-width:360px; background:rgba(0,0,0,0.95);border:0; }
.pm-panel > .panel-body {background:#fff; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.pm-panel > .panel-body hr {display:none;}
.pm-panel > .panel-body > .pm-buffer {height:280px; padding:0 15px; font-size:14px !important; padding-bottom:10px;}
.pm-panel > .panel-body > .pm-buffer .channel-emote {width:70px !important; height:70px !important;}
.pm-panel > .panel-body div {color:#333;}
.pm-panel > .panel-body input.form-control[type="text"] {background:#ddd !important; color:#000 !important; border-top:0;}
.panel {position:absolute; left:auto !important; right:calc(100vw - var(--leftcontentvw)); bottom:0;}

/* 번역 */
#cs-emotes-exporttext {height:200px;}
#cs-chanlog-text {font-size:12px;}
#newpollbtn {font-size:0; position:relative; top:0;}
#newpollbtn svg {height:24px;}
.userlist_item {white-space:nowrap; text-overflow:ellipsis; left:0 !important; }
.userlist_item span {font-style:normal !important;}
.user-dropdown {position:fixed;background:rgba(0,0,0,0.85) !important; border:0; left:auto !important; right:0px !important; width:calc(100vw - var(--leftcontentvw)) !important; border-radius:0; max-width:none !important; text-align:center; margin:auto !important; top:104px !important;}
#leftpane {display:block;}
#chatline {width:calc(100% - 30px); margin:20px auto !important; height:3rem !important; padding-left:20px; background:var(--textbar) !important; color:#fff; box-shadow:none; border-radius:500px !important;}
#chatline:focus {transition:.3s; background:#33353d;}
#chatheader .label {font-size:11px; line-height:20px;}
#emotelistbtn {position:fixed; bottom:121px; right:20px; width:48px; height:48px; z-index:10; background:url("https://s12.gifyu.com/images/Sr26V.png") center no-repeat var(--main) !important;  border-radius:190px; background-size:25px !important; font-size:0 !important; opacity:1; box-shadow:none;}
.pagination {margin-top:0; margin-bottom:10px;}
.emote-preview {width:100%;}
.emote-preview-container {width:calc(20% - 8px); border-radius:10px; overflow:hidden; margin:0; margin-right:8px !important; margin-bottom:8px; height:auto;}
.modal-content {background:rgba(36,36,51,0.9); backdrop-filter: blur(10px);}
.modal-backdrop.in {opacity:0.2;}
.close {opacity:1; color:#fff; text-shadow:none; font-size:28px;}
.toggleFullscreenBtn {width:50px; height:50px; position:fixed; background:#999; color:#333; }
.modal-body {font-size:12px; padding-top:0; line-height:1.5;}
.modal-body .form-control {height:40px; padding:0 12px; line-height:40px; background:#131313 !important; border:none;}
.modal-body textarea.form-control {height:500px; line-height:1.5;}
.modal-body input.form-control[type="text"], .modal-body textarea.form-control {}
.modal-footer {padding:10px 20px;}
#messagebuffer .server-msg-reconnect { color:var(--sub); background:transparent; padding:5px 5px !important; border:1px solid var(--main); border-radius:0px; font-size:12px !important; }
#messagebuffer .server-msg-disconnect {color:#ff6a6a; background:transparent; padding:5px 5px !important; border:1px solid #ff6a6a; border-radius:0px; font-size:12px !important; }

#rightcontrols {padding-left:15px !important; font-size:0;}
.poll-menu {background:rgba(0,0,0,0.8); border-color:#000; max-width:340px;}
.poll-menu input.form-control[type="text"] {background:#fff !important; color:#333 !important;}
.channel-emote {margin:7px 0; border-radius:0px; max-width:90px !important; max-height:90px !important;}
.channel-emote.megacon {max-width:140px !important; max-height:140px !important; width:140px !important; height:140px !important;}
.nick-hover {background:transparent !important;}

/* 외부스크립트 */
.profile-box {background:url("https://s10.gifyu.com/images/S5yPV.png") center no-repeat #000; background-size:260px !important;}


/* 버튼, 페이징 */
input, button {font-family:var(--font-primary) !important;}
.btn:focus, .btn:active, .btn:active{outline:none !important; }
.btn-primary, .btn-default {background:var(--main) !important; color:#fff; text-shadow:none; font-weight:bold;}
.btn-primary:hover, .btn-default:hover {background:var(--main) !important; opacity:.95 !important;}
.btn-danger {background:#cf2743 !important;}
button.close {display:block;}
.pagination>li>a, .pagination>li>span {background:#333;}
.pagination>li.disabled>a, .pagination>li.disabled>a:hover, .pagination>li.disabled>span, .pagination>li.disabled>span:hover {background:#333 !important; opacity:.6;}
#showsearch, #qlockbtn {display:none;}
.input-group-addon {background:#222 !important; text-shadow:none; font-weight:bold;}
#voteskip, #afk-btn {display:none;}
#mediaurl, #customembed-title, #userpl_name, #customembed-content {background:var(--textbar) !important; width:calc(100% - 20px); border-radius:10px; color:var(--sub) !important; font-weight:bold;}
.btn-group-vertical .btn:first-child {}
.input-group-btn {font-size:0 !important;}



/* 투표 */
#pollwrap {font-size:14px; line-height:1.5;}
#pollwrap * {font-family:var(--font-primary) !important;}
#pollwrap .well.active {position:fixed; width:calc(100% - 30px); max-width:360px; top:150px;  right:10px; margin:auto; background:rgba(239,83,80,0.8); backdrop-filter: blur(5px); box-shadow:0px 5px 15px rgba(0,0,0,0.6); border:0px solid #222 !important; border-radius:6px;}
#pollwrap .well  h3 {margin-top:0; font-size:20px; margin-bottom:20px; font-weight:bold; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.3);}
#pollwrap .well  h3:after {font-size:14px; opacity:.7; margin-left:5px;}
/*#pollwrap .well .close {display:none;}*/
#pollwrap .option {margin:10px 0;  font-size:16px; font-weight:normal; }
#pollwrap .option .btn-default {border:0 !important; width:26px; height:26px;  margin-right:10px; padding:0; background:#111 !important;}
#pollwrap .option .btn-default[disabled] {background:#fff !important; opactiy:.75; color:#333;}
#pollwrap .option.option-selected {font-weight:bold; color:#fff;}
#pollwrap  .option.option-selected .btn-default {background:#ffe400 !important; opacity:1; color:#000;}
#pollwrap .well.muted {position:fixed; top:50px; right:0; width:100%; max-width:360px; z-index:1000; border-radius:6px; background:rgba(0,160,252,.85); backdrop-filter: blur(10px); box-shadow:0px 10px 10px rgba(0,0,0,0.25); border:1px solid #333 !important;}
#pollwrap .well.muted h3:after {content:"(종료됨)";}
#pollwrap .well.muted .option .btn-default {background:#fff !important; color:#000;}
#pollwrap .well.muted .option.option-selected .btn-default {background:#ffe400 !important; border-width:1px !important; opacity:1;}
#pollwrap .well.muted .close {display:block;}


.username {cursor:pointer;}
#toggleOverlayScreen {position:fixed; right:0; top:50%; margin-top:-15px; z-index:1000; background:var(--main) !important;}
body.overlay #toggleOverlayScreen {opacity:.6} 
body.overlay #emotes-btn, body.overlay #btn_chat_opt, body.overlay .navbar, body.overlay #chatheader, body.overlay #userlist {display:none !important;}
body.overlay #chatline {margin:0 !important; margin-top:20px !important; height:40px !important; background:rgba(255,255,255,0.28) !important; padding-right:15px !important;}
body.overlay #chatline:focus {background:rgba(255,255,255,0.34) !important;}
body.overlay #mainpage {padding-top:0 !important;}
body.overlay #video-container {height:100dvh !important; width:100dvw !important;}
body.overlay #leftcontent {width:100dvw !important;}
body.overlay #rightcontent {height:50dvh !important; top:50% !important; right: var(--chat-right) !important;  margin-top:-25dvh !important; background:rgba(0,0,0,0) !important; width:250px;}
body.overlay div.embed-responsive * {height:100dvh !important; max-height:none !important; }
body.overlay .server-msg-announcement {display:none !important;}
body.overlay #messagebuffer > div { text-shadow: 0px 0px 1px rgba(0, 0, 0, 1), 0px 0px 2px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5), 0px 0px 2px rgba(0, 0, 0, 1);  }
body.overlay .username {text-shadow:none;}
body.overlay #messagebuffer {line-height:1.4; padding:0px 15px 0px 0px !important; opacity:.96;}
body.overlay #messagebuffer>div, body.overlay .username {font-weight:700; font-size:17px !important;}
body.overlay .server-whisper {display:none;}
body.overlay .channel-emote.megacon {max-width:100px !important; max-height:100px !important;}
body.overlay .channel-emote {max-height:70px !important; max-height:70px !important;}
.pm-panel > .panel-body div a {color:#000;}




/* 관리자 */
#channeloptions .modal-header h4 {color:var(--sub); font-weight:bold;}
.modal-body input.form-control[type="text"] {background:var(--textbar) !important;}


/* 표 */
.table-striped th, .table-striped td {font-size:14px !important;}
.table-striped>tbody>tr:nth-child(odd) {background:#222;}
.profile-box, .user-dropdown, .emotelist-table td {background:#222;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {font-weight:normal !important; border-top:1px solid #444; font-size:14px !important;}
.table>thead>tr>th {border-bottom:0;}
.modal-body textarea.form-control, .modal-body .form-control {background:var(--textbar) !important;}

/* 팝업 */
#open_popup {line-height:1; display:none; overflow:hidden; position:fixed; width:100%; top:50%; max-width:360px; font-size:0 !important; border-radius:10px; z-index:99; background:transparent; left: 50%; transform: translate(-50%, -50%); box-shadow:0px 5px 15px rgba(0,0,0,0.5);}
#open_popup .btn_close {position:absolute; top:15px; right:15px; width:48px; height:48px; text-indent:-99999px; background:url("https://s12.gifyu.com/images/SDMoL.png") center no-repeat; background-size:24px; border:0;}
#open_popup a:active {transition:.3s; opacity:.8;}
#open_popup img {width:100%;}
#open_popup.on {display:block;}
#open_popup .btn_today_close {width:100%; height:50px; background:#000; color:#fff;  font-weight:bold; font-size:14px !important; border:0;}
#open_popup .btn_today_close:hover {transition:.3s; opacity:.8;}


@media (max-width:720px) {
#open_popup {max-width:280px; height:auto;z-index:9999;}
#open_popup .btn_close {background-size:18px; top:5px; right:5px;}
#formline {padding:0px 15px 25px 15px;}
}


/* 모바일 */
@media (min-width:360px) and (max-width:1024px) {
html, body {height:auto; }
body {font-size:14px;}
#chatline {margin:0 !important; width:100%; height:44px !important; border:0; font-size:16px !important; padding-right:75px;}
#chatline:focus {background:#43464c !important;}
#formline.focus-up, #leftcontrols.focus-up {bottom:180px; position:absolute; width:100%;}
.navbar {background:#000 !important;}
#pollwrap .well.active  {right:0; left:0; top:60px;}
.channel-emote {max-width:60px !important; max-height:60px  !important;}
.channel-emote.megacon {max-width:100px !important; max-height:100px  !important; width:100px !important; height:100px !important;}
.navbar-inverse .navbar-collapse {backdrop-filter:none !important;  border-top:0 !important; background:rgba(0,0,0,0.8) !important;}
#messagebuffer {background-size:200px !important; contain: layout paint; will-change: transform, contents; transform: translateZ(0); overscroll-behavior: contain; content-visibility: auto; contain-intrinsic-size: 100vh; -webkit-overflow-scrolling: touch; backface-visibility: hidden;}
#messagebuffer>div {font-size:13px !important;}
.username {font-size:14.5px !important;}
#messagebuffer>div {will-change: opacity, transform; backface-visibility: hidden; }


/*
#motdwrap.well {background:transparent !important; padding:0 !important; padding-top:10px !important; ont-size:0; text-align:center;}
#motdwrap.well .motd-link {display:inline-block; font-size:0; width:100% ; max-width:360px; margin:0px 0px 10px;}
#motdwrap.well .motd-link img {width:100%;}
#motdwrap.well .motd-link:nth-child(even) {margin-right:0;}
*/
#playlistrow {padding-right:0 !important; margin-right:0 !important;}
#controlsrow, #motdrow.row, #rightpane-inner {margin-right:0 !important;}
#rightpane {width:100% !important;}
#emotespanel.ep__fixed {width:100%; display:block; background:#000 !important; top:auto; bottom:50px; left:0 !important; right:0 !important; margin:auto !important; text-align:center;}
#emotespanel img {width:calc(16.6% - 12px); margin:0px 12px 16px 0px;}
#emotespanel img:nth-child(5n) {margin-right:9px;}
#emotespanel img:nth-child(6n) {margin-right:0;}


.pm-panel  {width:260px !important;}
.panel-heading {padding:4px 15px; }
.user-dropdown {right:0 !important; top:auto !important; bottom:0; left:0 !important; width:100% !important; padding-bottom:40px;}
.user-dropdown .btn {width:240px; height:30px;}
.navbar.scroll {background:rgba(0,0,0,1) !important;}
}

/* pc 세로모드 */
@media (min-width:800px) and (max-width:1440px) and (orientation: portrait) {
#content-wrap {display:block  !important;}
#leftcontent {width:calc(100vw) !important; }
#video-container {height:43vh  !important;}
#video-container, #rightcontent {display:block  !important;}
#leftcontent + #rightcontent {width:100% !important; height:55vh  !important; position:relative;}
.linewrap#messagebuffer {height:calc(100vh - 52vh - 90px) !important;}
#channel-content {display:none  !important;}
#messagebuffer * {font-size:17px !important;}
.slider_container {display:none;}
}

@media (max-width:2000px) {
body.overlay #rightcontent  {width:220px;}
body.overlay #messagebuffer>div, body.overlay .username {font-size:15.5px !important;}
body.overlay .channel-emote.megacon {max-width:90px !important; max-height:90px !important;}
body.overlay .channel-emote {max-height:60px !important; max-height:60px !important;}
}



/* 모바일 가로모드 */
@media (orientation: landscape) and (max-width:980px) {
#wrap {padding-left: calc(env(safe-area-inset-left) * 0); padding-right: calc(env(safe-area-inset-right) * 0); padding-top: calc(env(safe-area-inset-top) * 0); padding-bottom: calc(env(safe-area-inset-bottom) * 0);}
#popup_chatmenu {bottom:30px !important;}
.popup_chatmenu .list li a {padding:6px 15px !important; font-size:12px !important;}
.popup_chatmenu .list .li_chat_schedule {display:none;}
body {line-height:1.4;}
#formline {padding:0px 10px 15px 10px; z-index:100;}
.userlist_item {padding-left:10px;}
.username {font-size:13px !important;}
#messagebuffer>div {font-size:12px !important;}
#btn_chat_opt, #emotes-btn {bottom:15px !important;}
#chatline {padding-right:40px;}
#emotes-btn {display:none !important;}
#btn_chat_opt {right:20px; z-index:100 !important;}
#content-wrap #leftcontent {width:100% !important;}
:root {--leftcontentvw:72dvw;}
#video-container {top:0; width:var(--leftcontentvw) !important; height:100dvh !important; display:inline-block !important; vertical-align:middle;}
#rightcontent{width:calc(100vw - var(--leftcontentvw));}
.navbar {display:none;}
#mainpage {padding-top:0 !important;}
div.embed-responsive * {max-height:none;}
#rightcontent {position:fixed !important; top:0 !important; right:0 !important; margin-top:0 !important; height:100dvh !important;}
#channel-content {display:none;}
#messagebuffer {padding:10px 10px !important;}
#emotespanel.ep__fixed {height:160px; margin:0 !important; top:0 !important; left:auto !important; right:0 !important;}
#emotespanel img {width:calc(8.3% - 6px) !important; margin:0px 8px 8px 0px !important;}
#emotespanel img:nth-child(12n) {margin-right:0px !important;}
.tab_menu {position:static;}
.tab_cont_wrap {margin-bottom:0; height:120px;}
.channel-emote.megacon {width:90px !important; height:90px !important;}
body.overlay {overflow-y:hidden;}
body.overlay #leftcontrols {display:none;}
#channel-content {display:block !important; width:calc(var(--leftcontentvw) - 15px);}
#toggleOverlayScreen {transform:scale(0.75);}
body.overlay .userwrap {margin-top:7px;}
body.overlay #rightcontent {width:180px !important; height:80dvh !important; top:50% !important; right: var(--chat-right) !important; margin-top:-40dvh !important; background:transparent !important; padding-right:5px !important;}
body.overlay #messagebuffer>div, body.overlay .username {font-size:12px !important;}
body.overlay .channel-emote.megacon {max-width:75px !important; max-height:75px !important;}
body.overlay .channel-emote {max-height:55px !important; max-height:55px !important;}
body.overlay #chatline {margin-top:10px !important; height:32px !important; font-size:14px !important;}
.popup_chatmenu.mypage {height:85dvh !important; overflow-y:auto;}
.popup_chatmenu.mypage canvas {width:500px !important; margin:auto;}
.popup_chatmenu.mypage .mypage_area .button_area {display:none;}
}

/* pc 세로모드2 */
@media (orientation: portrait) and (max-width:1280px) and (min-height:1200px) and (max-height:1400px) {
.embed-responsive.embed-responsive-16by9 {padding-bottom:40%;}
}





/* 와이드 */
@media (min-width:2560px)  {
#emotespanel img {width:calc(16.6% - 9px); margin:0px 9px 9px 0px;}
#emotespanel img:nth-child(5n) {margin-right:9px;}
#emotespanel img:nth-child(6n) {margin-right:0;}
}


@media (min-width:1280px) and (max-width:1660px) {
#emotespanel img {width:calc(25% - 6px); margin-right:8px;}
#emotespanel img:nth-child(5n) {margin-right:8px;}        
#emotespanel img:nth-child(4n) {margin-right:0px;}
}

#guestlogin > input, #guestlogin > .input-group-addon {border-radius:0 !important;}



/* 버튼 번역 */
.btn-success, .btn-info {background:transparent !important;}
* {font-family:var(--font-primary) !important;}
#userpl_save {border-radius:8px;}
#cs-chanranks .btn-group .dropdown-toggle .caret {position:relative; top:-4px; margin-right:3px;}

/* 라벨번역 */
#cs-miscoptions .form-horizontal + h4 {display:none;}
#cs-miscoptions .form-horizontal + h4 + form {display:none;}


/* 타이틀번역 */
#cs-chanranks .btn-group .dropdown-menu .glyphicon {font-size:12px !important; position:relative; top:-1px; margin-right:5px;}

/* 재생목록 */
#queue .btn-group .btn:after {font-size:13px; vertical-align:top; position:relative;}
#queue .btn-group .btn span {display:inline-block; vertical-align:top;}
.videolist {overflow:hidden; overflow-y:auto; border-radius:8px;}
#queue_next, #queue_end, #ce_queue_next, #ce_queue_end, #userpl_save {height:48px; padding:13px 15px; font-size:14px !important;}
#queue_next:after, #queue_end:after {font-size:14px !important;}
#queue_next, #ce_queue_next {border-radius:8px 0px 0px 8px;}
#queue_end, #ce_queue_end {border-radius:0px 8px 8px 0px;}
#plmeta {border:1px solid #333; padding:10px 15px; margin-top:10px; margin-bottom:20px; border-radius:8px; font-size:12px !important; color:#ccc;}



/* 와이드 */
@media (min-width:2560px)  {
#emotespanel img {width:calc(16.6% - 9px); margin:0px 9px 9px 0px;}
#emotespanel img:nth-child(5n) {margin-right:9px;}
#emotespanel img:nth-child(6n) {margin-right:0;}
}




.schedule-table {
  width: 100%;
  margin-bottom:0px;
  border-collapse: collapse;
  background-color: #222; /* Dark background color */
  color: #f2f2f2; /* Light text color for contrast */
  line-height: 1.4;
}

.schedule-table tr td:first-child {text-align:center;}

.schedule-table th,
.schedule-table td {
  padding: 12px 5px;
  /*border-bottom: 1px solid #e3e3e3; */
  vertical-align: middle;
  color: #333;
  font-size:14px !important;
}

.schedule-table th {
  background-color:var(--main); /* Darker header background */
  font-weight: bold;
  text-align: center;
  vertical-align:middle;
  height:48px;
  color:#fff;
  border-bottom:0;
}

.schedule-table td {
  background:#fff;
  text-align:center;
  color:#444;
  position:relative;
}
.schedule-table tr td:first-child {font-size:12px !important;}
.schedule-table td .team {width:50%; float:left; margin:0;}
.schedule-table td .team .name {font-weight:bold; color:#000; margin-top:1px;}
.schedule-table td .team .team-logo {display:inline-block; text-align:center; width:25px; height:20px;}
.schedule-table td .team .team-logo img {height:20px; max-width:100%;}
.schedule-table td .team1 {text-align:right; padding-right:25px;}
.schedule-table td .team2 {text-align:left; padding-left:25px;}
.schedule-table td .team1 .team-logo {margin-left:5px;}
.schedule-table td .team2 .team-logo {margin-right:5px;}

.schedule-table td .versus {position:absolute; left:50%; margin-left:-25px; width:50px; text-align:center;}
.schedule-table td .team, .schedule-table td .versus {display:inline-block; vertical-align:middle;}

.schedule-table + p {margin-bottom:0;}

/* 채팅팝업 */
#formline {position:relative;}
#btn_chat_opt { font-size:16px !important;right:30px; z-index:99; background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/icon_menu_v2.png?ver=1.2") center no-repeat; }
#btn_chat_opt, #emotes-btn {display:block; position:absolute; bottom:20px;  width:32px; height:48px; padding:0; background-size:16px !important; cursor:pointer; border:0;}
#btn_chat_opt:active, #emotes-btn:active {opacity:.4; transition:.3s;}
#btn_chat_opt:focus, #emotes-btn:focus {outline:none !important;}
#emotes-btn {right:60px; background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/icon_icon_v2.png?ver=1.2") center no-repeat !important; background-size: 16px !important;}
.popup_chatmenu {display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(9,10,11,0.9); width:220px; z-index:9999; border-radius:10px; box-shadow:0px 5px 10px rgba(0,0,0,0.5); color:#eee; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(10px);}
.popup_chatmenu ul, .popup_chatmenu ol {margin:0; padding:0;}
.popup_chatmenu .popup_title {width:100%; position:relative;  border-bottom:1px solid #373737; text-align:center;}
.popup_chatmenu .popup_title h6 {font-weight:bold; margin:0; font-size:16px !important;color:#fff; line-height:50px;}
.popup_chatmenu .btn_chatmenu_close, .popup_iframe .btn_chatmenu_close {position:absolute; top:0; right:0; line-height:1; width:40px; height:55px; background:url("https://s12.gifyu.com/images/SDMoL.png") center no-repeat; background-size:12px; border:0; font-size:0;  text-indent:-99999px;}
.popup_iframe .btn_chatmenu_close {right:7px;}
.popup_chatmenu .btn_chatmenu_close {height:50px;}
#popup_chatmenu {transform:none; top:auto; left:auto; bottom:85px; right:15px;}
.popup_chatmenu .list {position:relative; width:100%; margin-bottom:0; line-height:16px; padding:10px 0; text-align:left;}
.popup_chatmenu .list li {display:block; width:100%;}
.popup_chatmenu .list li a {display:block; width:100%; padding:10px 20px; font-size:14px !important;}
.popup_chatmenu .list li a:hover {background:rgba(90,90,90,0.4); color:#fff;}
.popup_chatmenu .list li a {text-decoration:none !important;}
.popup_chatmenu .list li .icon {width:16px; height:16px; margin-right:8px;}
.popup_chatmenu .list li .icon img {width:100%;}
.popup_chatmenu .list li .icon, .popup_chatmenu .list li span {display:inline-block; vertical-align:middle;}
.popup_chatmenu .list_rule {position:relative; width:100%; text-align:left; padding:20px 0px 10px 30px;}
.popup_chatmenu .list_rule li {font-size:14px !important; line-height:1.4; margin-bottom:7px; word-break:keep-all;}
.popup_chatmenu .list_rule li:last-child {margin-bottom:0;}
.popup_chatmenu  .group-wrap {position:relative; padding:25px 20px;}
.popup_chatmenu  .group-wrap .group {position:relative; font-size:14px; line-height:1; text-align:left; margin-bottom:20px; padding:0 0px 20px; border-bottom:1px solid #333; }
.popup_chatmenu .group-wrap .group label {display:block; color:#fff; font-weight:bold; margin:0; margin-bottom:10px; font-size:14px !important;}
.popup_chatmenu .group-wrap .group:last-child {padding-bottom:0; margin-bottom:0; border-bottom:0;}
.popup_chatmenu .group-wrap select {border:1px solid #4d536c; background:var(--textbar); width:100%; height:40px; padding-left:10px; border-radius:5px; font-size:14px !important;}
.popup_chatmenu .group-wrap select option {font-size:14px !important;}
#leftcontent.toggle-class {width:100%;}
#rightcontent.toggle-class {display:none;}
#popup_chatrule {width:280px;}
#popup_chatfont {width:280px;}
#popup_chatcolor {width:320px;}
#color-options {padding:15px; font-size:0 !important}
#color-options .color-button {transition:.2s; border:0; width:calc(25% - 8px); height:50px; margin:5px 0; margin-right:10px;} 
#color-options .color-button.random {background:url("https://s11.gifyu.com/images/S1uAv.png") center no-repeat #35383d; background-size:14px;}
#color-options .color-button:nth-child(4n) {margin-right:0;}
#color-options .color-button:hover {opacity:.7;}
#popup_pointdrawjoin {right:0; left:auto; z-index:99999; padding:25px; text-align:center; width:calc(100vw - var(--leftcontentvw)); border:1px solid var(--main);}
#popup_pointdrawjoin .title {font-size:18px !important; font-weight:bold;}
#popup_pointdrawjoin .txt {color:#ccc; font-size:14px !important; margin-bottom:20px;}
#popup_pointdrawjoin .btn_area {font-size:0 !important;}
#popup_pointdrawjoin .btn_area .btn_submit {width:calc(50% - 5px); display:inline-block;}
#popup_pointdrawjoin .btn_area .btn_submit.btn_main {margin-right:10px;}
.tab_menu_wrapper {position: relative; display: flex; align-items: center;} 
.tab_menu {position: relative; width: 100%; height: 40px; line-height: 40px; padding: 0; margin: 0; font-size: 0 !important; background: #000; overflow-x: auto; white-space: nowrap; display: flex;} 
.tab_menu li {display: inline-block; height: 100%; font-size: 13px !important; vertical-align: top; text-align: center; border-right: 1px solid #333; background: rgba(0, 0, 0, 0.5); font-weight: bold; color: #ccc; white-space: nowrap; width: 25%; flex: 0 0 auto; transition: transform 0.3s ease; } /* 추가된 flex 설정 */
.tab_nav_btn {background: #007f59; color: #fff; border: none; width:44px; height:40px; cursor: pointer; text-indent:-99999px; color:#999;} 
.tab_nav_btn.right {background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/tab_arrow_right.png") center no-repeat #242424; background-size:7px;}
.tab_nav_btn.left {background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/tab_arrow_left.png") center no-repeat #242424; background-size:7px;}

.tab_menu li:first-child {border-left:1px solid #333;}
.tab_menu li a {display: block; color: inherit;} 
.tab_menu li.active, .tab_menu li.active:hover {background: var(--main); font-weight: bold; color: #fff;} 
.tab_menu li:hover {background: #222;} 
.tab_menu li a:hover, .tab_menu li a:active, .tab_menu li a:focus {text-decoration: none;}


.emote_group {display:none; padding:10px 10px 5px; font-size:0 !important;transition: transform 0.3s ease-in-out;}
.emote_group.active {display:block;}
.emote_group:last-child {border-bottom:0; padding-bottom:0; margin-bottom:0;}
.emote_group .group_wrap {width:100%; border-bottom:1px solid #666; margin-bottom:20px; padding-bottom:10px;}
.emote_group .group_wrap:last-child {border-bottom:0; margin-bottom:0; padding-bottom:0;}
.emote_group .group_wrap h6 {font-size:14px !important; padding:0; margin:0; margin-bottom:15px;}
.emote_group.tab-active {display:block;}
.emote_group.group0 {display:block;}



.channel-emote[title="/어깨"] ~ img, 
.channel-emote[title="/당끼"] ~ img, 
.channel-emote[title="/말풍"] ~ img, 
.channel-emote[title="/신창섭1"] ~ img, 
.channel-emote[title="/과징금1"] ~ img, 
.channel-emote[title="/표독1"] ~ img,
.channel-emote[title="/호우1"] ~ img,
.channel-emote[title="/버거1"] ~ img,
.channel-emote[title="/이겨1"] ~ img,
.channel-emote[title="/신창섭3"] ~ img,
.channel-emote[title="/뇌절1"] ~ img,
.channel-emote[title="/광탈1"] ~ img,
.channel-emote[title="/관짝1"] ~ img,
.channel-emote[title="/퓨어1"] ~ img,
.channel-emote[title="/화해1"] ~ img,
.channel-emote[title="/봇치1"] ~ img,
.channel-emote[title="/빤1"] ~ img,
.channel-emote[title="/별루1"] ~ img,
.channel-emote[title="/시카1"] ~ img,
.channel-emote[title="/보고1"] ~ img
{margin-left:-5px; background:#fff;}


/* fhd 세로모니터 대응 */
@media (min-width: 1080px) and (min-height: 1920px) and (orientation: portrait) {
#emotespanel.ep__fixed {width:100%; text-align:center;}
#emotespanel img {width:calc(6.25% - 5px); margin:0 4px 8px !important;}
.tab_menu li {width:12.5%;}
.slider_container {display:none;}
}


/* 닉효과 */
#popup_chatcolor2, #popup_directIcon {background:rgba(0,0,0,0.99);}
.popup_chatmenu .color_album {width:100%; position:relative; overflow:hidden; padding:10px 10px;}
.popup_chatmenu .color_album li {display:inline-block; width:33.3%; float:left; padding:10px 0; text-align:center;}
.popup_chatmenu .color_album .nickcolor_preview {font-weight:bold; font-size:18px !important; width:auto; display:inline-block;}






/* 모바일 */
@media (min-width:320px) and (max-width:1025px) {
.username {font-size:14.5px !important;}
.emote_group {padding:25px 10px 10px;}
#btn_chat_opt {right:27px}
#emotes-btn{right:53px; background-position:4px center !important;}
#btn_chat_opt, #emotes-btn {height:44px; bottom:25px;}
.popup_chatmenu {bottom:51px; right:10px; transform:none; top:auto; left:auto;}
.popup_chatmenu .list li.li_chat_popup, .popup_chatmenu .list li.li_chat_hide, .popup_chatmenu .list li.li_chat_expand {display:none;}
.popup_chatmenu {display:none;}
.popup_chatmenu .list_rule {padding:15px 0px 5px 20px; margin-left:20px;}
.popup_chatmenu .list_rule li {margin-left:-10px; font-size:12px !important; line-height:1.4; margin-bottom:5px; word-break:keep-all;}
.popup_chatmenu .group-wrap {padding:15px;}
.popup_chatmenu .group-wrap .group label {font-size:12px !important; margin-bottom:8px;}
.popup_chatmenu .group-wrap .group {padding-bottom:15px; margin-bottom:15px;}
.popup_chatmenu .group-wrap select {height:35px; font-size:12px !important;}
.popup_vote .wrap_vote {padding:60px 0px 15px;}
.popup_vote .wrap_vote h5 {line-height:65px; !ine-height:65px;}
.popup_vote .wrap_vote .vote_group .team strong {font-size:48px !important;}
.popup_vote .wrap_vote .vote_group .team p {font-size:13px !important;}
.popup_vote .wrap_vote .vote_group:before {font-size:32px !important;}
.popup_vote .wrap_vote .vote_group .team.team_1 {padding-right:20px;}
.popup_vote .wrap_vote .vote_group .team.team_2 {padding-left:20px;}
.popup_iframe .popup_cont {min-height:500px;}
.popup_iframe .popup_cont iframe {zoom : 0.5;}
.popup_chatmenu .popup_title h6 {height:38px; line-height:38px; font-size:14px !important;}
.popup_chatmenu .list li a {padding:8px 15px; font-size:13px !important;}
.popup_chatmenu .btn_chatmenu_close, .popup_iframe .btn_chatmenu_close {height:38px;}
#messagebuffer {padding-bottom:15px !important;}
#formline.focus-on {position:fixed; left:0; right:0;  top:70%;}
#formline.focus-on #chatline { width:calc(100% - 30px); margin-top:-30px;  margin:auto !important; background:rgba(200,200,200,0.95) !important; border-radius:10px !important; box-shadow:0px 5px 40px rgba(0,0,0,0.5); backdrop-filter: blur(3px); z-index:9999; color:#000 !important;}
#formline.focus-on #emotes-btn {right:25px;}
#formline.focus-on #btn_chat_opt {display:none;}
#rightcontent.focus-on {height:calc(100%);}
#rightcontent.focus-on #messagebuffer {flex-grow: unset;}
.tab_cont_wrap {height:200px;}
				
}


@media (max-width:768px) {
	#rightcontent{position: absolute; margin-top:calc(100vw / 16 * 9);height: calc(100% - calc(100vw / 16 * 9) - 50px); z-index:9999;}
	/*
	#controlsrow, #playlistrow {display:none;}
	*/

}



/* 포인트 구매 */
#popup_chatpoint { width:450px; max-width:calc(100% - 15px);}
#popup_chatpoint .point_shop { display:flex; flex-wrap:wrap; gap:15px; padding:17px 15px 0 15px; margin-bottom:0; }
#popup_chatpoint .point_shop li { flex:0 0 calc((100% - 45px)/4); text-align:center; cursor:pointer; margin-bottom:8px; }

#popup_chatpoint .point_shop li:nth-child(4n) { margin-right:0; }
#popup_chatpoint .point_shop li h5 {color:#fff; font-size:13px !important; line-height:1.4; margin:0;}
#popup_chatpoint .point_shop li div { position:relative; width:100%; aspect-ratio:1/1; background:#888; border-radius:12px; color:#fff; font-weight:bold; padding-top:5px; margin-bottom:8px; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,0.28); transition:transform 0.1s ease, box-shadow 0.1s ease; }
#popup_chatpoint .point_shop li div:active { transform:scale(0.94); box-shadow:0 1px 3px rgba(0,0,0,0.35); }
#popup_chatpoint .point_shop li div p {line-height:20px; margin:0;}
#popup_chatpoint .point_shop #func-daewang div {background:#9460ff;}
#popup_chatpoint .point_shop li:hover {opacity:.85; transition:.4s;}
#popup_chatpoint .point_shop .info_point {font-size:18px !important;}

#popup_chatpoint .point_shop .info_duration {opacity:.85; font-size:13px !important; font-weight:normal;}
#popup_chatpoint .point_shop li:nth-child(1) div { background: linear-gradient(180deg, #60a5fa, #1d4ed8); } /* 블루 */
#popup_chatpoint .point_shop li:nth-child(2) div { background: linear-gradient(180deg, #d8b4fe, #7c3aed); } /* 퍼플 */
#popup_chatpoint .point_shop li:nth-child(3) div { background: linear-gradient(180deg, #74e49d, #16a34a); } /* 그린 */
#popup_chatpoint .point_shop li:nth-child(4) div { background: linear-gradient(180deg, #f3b36f, #ea580c); } /* 오렌지 */
#popup_chatpoint .point_shop li:nth-child(5) div { background: linear-gradient(180deg, #fca5a5, #dc2626); } /* 레드 */
#popup_chatpoint .point_shop li:nth-child(6) div { background: linear-gradient(180deg, #5eead4, #0f766e); } /* 틸 */
#popup_chatpoint .point_shop li:nth-child(7) div { background: linear-gradient(180deg, #fde047, #ca8a04); } /* 옐로우 */
#popup_chatpoint .point_shop li:nth-child(8) div { background: linear-gradient(180deg, #f9a8d4, #be185d); } /* 핑크 */
#popup_chatpoint .point_shop li:nth-child(9) div { background: linear-gradient(180deg, #6deeff, #0891b2); } /* 청록 */
#popup_chatpoint .point_shop li:nth-child(10) div { background: linear-gradient(180deg, #a5b4fc, #4338ca); } /* 인디고 */
#popup_chatpoint .point_shop li:nth-child(11) div { background: linear-gradient(180deg, #bef264, #4d7c0f); } /* 라임 */
#popup_chatpoint .point_shop li:nth-child(12) div { background: linear-gradient(180deg, #93c5fd, #2563eb); } /* 스카이블루 */





/* 베팅팝업 */
#popup_betjoin {right:0; left:auto; width:calc(100vw - var(--leftcontentvw));}
#popup_bet .popup_title {padding:0; padding-top:16px;}
#popup_bet .popup_title h6 {margin-left:16px;}
#popup_bet .popup_title .btn_chatmenu_close {margin-right:16px;}
#popup_prediction {width:480px;}
#popup_predictionJoin {left:0; right:0; margin:auto; width:480px;}
#popup_prediction .popup_cont, #popup_predictionJoin .popup_cont, #popup_schedule .popup_cont {max-height:680px; overflow-y:auto;}
#popup_notiMsg, #popup_schedule, #popup_standin {top: 50%; transform: translate(-50%, -50%); left:50%;}
#popup_schedule {width:600px;}
#popup_standin {width:420px;}
#popup_standin .team-logo {margin-right:3px; display:inline-block; width:22px; height:20px; text-align:center;}
#popup_standin .team-logo img {height:20px; max-width:100%;}
#popup_standin .schedule-table tr td:first-child {font-weight:bold; font-size:14px !important;}
/*
#popup_standin .schedule-table .top-tier td:first-child, #popup_standin .schedule-table .top-tier .team-name {color:#00b25c;}
#popup_standin .schedule-table .mid-tier td:first-child, #popup_standin .schedule-table .mid-tier .team-name {color:#ce9b13;}
#popup_standin .schedule-table .lower-tier td:first-child, #popup_standin .schedule-table .lower-tier .team-name {color:#c64848;}
*/
#popup_standin .standings-container {overflow:hidden;border-radius:8px;}
#popup_standin .schedule-table tr td:nth-child(2) {padding:12px 12px;}
#popup_standin .schedule-table .top-tier td:first-child {background:#eafff5;}
#popup_standin .schedule-table .mid-tier td:first-child {background:#fffcea;}
#popup_standin .schedule-table .lower-tier td:first-child {background:#fff2f4;}
.popup_chatmenu .icon_count {text-align:right; font-weight:400; color:#fff; text-align:right; font-size:14px !important; margin-bottom:10px; opacity:.8;}


#popup_standin .schedule-table .team-name {font-weight:bold;}
.popup_betting { position: fixed; top: 90px; left: 20px; width: 360px; background: #1d1f22; border-radius: 10px; box-shadow: 0 7px 10px rgba(0,0,0,0.6); z-index: 9999; font-family: sans-serif; color: #fff; }
.popup_betting .popup_title { padding: 12px 16px; background: #2c2f33; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.popup_betting .popup_title h6 { margin: 0; font-size: 16px !important; font-weight:bold; display: inline-block; }
.popup_betting .popup_title .btn_chatmenu_close { float: right; background: none; padding:0; border: none; color: #fff; font-size: 14px !important; cursor: pointer; }
.popup_betting .popup_cont {position:relative; width:100%;padding: 20px 16px; max-height:600px; overflow-y:auto;}
.popup_betting .popup_cont label {margin-bottom:0;}
.popup_betting .popup_cont .row.top {overflow:hidden; line-height:1;}
.popup_betting .popup_cont .row.top * {font-size:14px !important;}
.popup_betting .popup_cont .row.top input {height:auto; margin:0; margin-right:3px;}
.popup_betting .popup_cont .row.top .doubledown_area {cursor:pointer; float:right; color:#21cf86;}
.popup_betting .popup_cont .row.top .doubledown_area * {display:inline-block; vertical-align:middle;}
.popup_betting .popup_cont .row.top .doubledown_area #doubledown_count_display {color:#ccc;}
.popup_betting .section {position:relative; margin-bottom: 15px; }
.popup_betting .section .title { margin-top:0; margin-bottom: 10px; color: #ccc; }
.popup_betting  .timer-text {color:#bbb; line-height:1; font-size:13px !important; display:inline-block; margin-bottom:0; width:auto;}
.popup_betting input {height:44px; line-height:44px;}
.popup_betting .text_form { width: 100%; padding: 0px 10px; border: 1px solid #444; border-radius: 6px; font-size: 14px !important; background: #2c2f33; color: #fff; }
.popup_betting .text_form:focus {outline:none;}
.popup_betting input:disabled {opacity:.5; background:#333; cursor:auto;}
.popup_betting .text_form.select {height:44px;}
.popup_betting .text_form.textarea {padding:10px; resize:none; height:100px;}
.popup_betting .btn_submit {transition:.3s; width: 100%; padding: 0 10px; font-size: 14px !important; border: none; border-radius: 6px; cursor: pointer; }
.btn_submit:hover {transition:.2s; opacity:.85;}
.btn_submit:active {transition:.2s; opacity:.65;}
.popup_betting .row { margin-bottom: 20px;  margin-left:0 !important; margin-right:0 !important; overflow:hidden; }
.popup_betting .team { position: relative; margin-bottom: 8px; width:calc(50% - 5px); margin-right:10px; float:left; margin-bottom:0;}
.popup_betting .team input[type="radio"] { display: none; }
.popup_betting .team label {cursor:pointer; display: block; padding: 10px; border-radius: 6px; border:1px solid #444; background:#2c2f33; color: #fff; font-size: 14px !important; text-align: center; transition: all 0.2s ease; }
.popup_betting .team:last-child {margin-right:0;}
.popup_betting .team input[type="radio"]:checked + label { background: var(--main); border-color: var(--main); color: #fff; }
.popup_betting .row:last-child {margin-bottom:0;}
.popup_betting.warning { 
  border: 2px solid #ff4444; 
  animation: warningPulse 0.7s infinite alternate; 
}
.popup_betting .info_area {padding:15px 0; border-bottom:1px solid #444;}
.popup_betting .info_area p {margin:0; color:#ccc; font-size:14px !important;}
.popup_betting .info_area p b {color:var(--main); filter: brightness(1.2) saturate(1.5);}
@keyframes warningPulse {
  0% { border-color: #ff4444; box-shadow: 0 0 30px #ff4444; }
  100% { border-color: #ff0000; box-shadow: 0 0 70px #ff0000; }
}
.popup_betting.warning .timer-text {color:#ff0000; font-weight:bold;}

#choice_input {width:calc(100% - 110px); float:left;}
#add_choice {width:100px; float:right;}
#choice_list {padding:0; margin:0; font-size:0;}
#choice_list li {display:inline-block; padding:6px 15px 5px; border:1px solid #444; background:#202326; border-radius:5px; margin-right:10px; margin-bottom:10px;}
#choice_list li *  {display:inline-block; vertical-align:middle;}
#choice_list li span {margin-right:10px; font-size:12px !important;}
#choice_list li button {position:relative; top:-1px; background:#c03535; font-size:13px !important; cursor:pointer; border:0; outline:none; width:16px; height:16px; border-radius:2px; line-height:14px; padding:0;}
#choice_list li button:active {opacity:.6;}
.choice_list {padding:20px 0;}
.choice_list {margin:0; font-size:0 !important;}
.choice_list * {transition:.3s;}
.choice_list li {display:inline-block; width:100%; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.choice_list li:last-child {margin-bottom:0;}
.choice_list .input_choice {display:none;}
.choice_list label {display:block; width:100%; text-align:center; padding:7px 5px; background:#2a2d31; border-radius:6px; font-size:13px !important; cursor:pointer; font-weight:normal; color:#ccc; transform:scale(1);}
.choice_list .input_choice:checked + label {background:#555e6b; color:#fff; font-weight:bold;}
.choice_list label:hover {background:#383c41;}
.choice_list label:active {opacity:.85;}
.choice_list input:disabled + label {opacity:0.8; cursor:not-allowed;}




.chatalbum {position:fixed; width:480px; right:0;}
.chatalbum * {box-sizing:border-box;}
.chatalbum .album_wrap {width:100%; margin:0; padding:20px 15px 25px; overflow:hidden;}
.chatalbum .album_wrap .group {width:100%; overflow:hidden; height:440px; overflow-y:auto;}
.chatalbum .album_wrap .group .title {width:100%; display:block; overflow:hidden; margin-bottom:10px;}
.chatalbum .album_wrap .group .title h6 {float:left; font-weight:bold; color:#eee; font-size:16px !important; margin:0; line-height:20px;}
.chatalbum .album_wrap .group .title .btn_group {float:right; font-size:0; height:20px;}
.chatalbum .album_wrap .group .title .btn_group input[type='button'] {display:inline-block; width:20px; height:20px; border:0; outline:none;}
.chatalbum .album_wrap .group .title .btn_group .btn_prev {background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/arrow_prev.png?ver=1.1") center no-repeat;}
.chatalbum .album_wrap .group .title .btn_group .btn_next {background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/arrow_next.png?ver=1.1") center no-repeat;}
.chatalbum .album_wrap .group:last-child {margin-bottom:0; border-bottom:0; padding-bottom:0;}
.chatalbum .album_wrap .group .wheel_album {padding:0; margin:0; margin-top:5px; width:100%;}
.chatalbum .album_wrap .group .wheel_album li {display:block; width:100%; cursor:pointer;}
.chatalbum .album_wrap .arcana h6 {color:#ade55c !important; background:linear-gradient(90deg,#ade55c,#e0ff95); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:bold; animation:glowArcana 1.3s ease-in-out infinite;}
.chatalbum .album_wrap .immortal h6 {color:#ebbb42 !important; background:linear-gradient(90deg,#ebbb42,#ffd97c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:bold; animation:glowImmortal 1.3s ease-in-out infinite;}
.chatalbum .album_wrap .season h6 {color:#ff4d4d !important; background:linear-gradient(90deg,#ff4d4d,#ff9999); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:bold; animation:glowSeason 1.3s ease-in-out infinite;}
.chatalbum .album_wrap .group .wheel_album .wheel_label {display:block; width:100%; font-size:13px !important; color:#eee; white-space:nowrap; overflow:hidden; padding:1px 0; text-overflow:ellipsis;}
.chatalbum .album_wrap .group .wheel_album .wheel_label:hover {color:#fff;}
.chatalbum .album_wrap .group .wheel_album .wheel_label:last-child {margin-bottom:0;}

.chatalbum .album_wrap .group .wheel_album .wheel_label img, .chatalbum .album_wrap .group .wheel_album .wheel_label span {display:inline-block; vertical-align:middle;}
.chatalbum .album_wrap .group .wheel_album .wheel_label img {margin-right:5px;}
.chatalbum .album_wrap .group .wheel_album .wheel_label.locked {opacity:.5; font-weight:normal;}

@keyframes glowSeason {0%,100%{text-shadow:0 0 4px rgba(235,187,66,0.3),0 0 8px rgba(235,187,66,0.2);}50%{text-shadow:0 0 6px rgba(255,224,138,0.35),0 0 10px rgba(255,224,138,0.25);}}
@keyframes glowArcana {
  0%, 100% { text-shadow:0 0 4px rgba(173,229,92,0.3), 0 0 8px rgba(173,229,92,0.2); }
  50% { text-shadow:0 0 6px rgba(200,255,142,0.35), 0 0 10px rgba(200,255,142,0.25); }
}

@keyframes glowImmortal {
  0%, 100% { text-shadow:0 0 4px rgba(235,187,66,0.3), 0 0 8px rgba(235,187,66,0.2); }
  50% { text-shadow:0 0 6px rgba(255,224,138,0.35), 0 0 10px rgba(255,224,138,0.25); }
}

.chatalbum .album_wrap .rare h6 {color:#5c77ff !important;}
.chatalbum .album_wrap .common h6 {color:#b0c3d9 !important;}
.chatalbum .icon_album {width:100%; padding:0; margin:0;}
.chatalbum .icon_album li {cursor:pointer; aspect-ratio:1/1; flex:0 0 12.5%; transition:transform 0.3s ease, opacity 0.3s ease;}
.chatalbum .icon_album li img {width:100%; height:100%; display:block; transition:transform 0.3s ease, filter 0.3s ease;}
.chatalbum .icon_album li:hover {opacity:1; transform:scale(1.25); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}
.chatalbum .icon_album li:hover img {filter:drop-shadow(0 0 6px rgba(255,255,255,0.5));}
.chatalbum .icon_album li.empty {position:relative; width:100%; aspect-ratio:1/1; text-align:center; cursor:auto; background:#444; border-radius:10px;}
.chatalbum .icon_album li.empty:after {content:"없음"; position:absolute; top:50%; left:0; width:100%; text-align:center; font-size:12px !important; line-height:10px; margin-top:-5px; color:#ccc; }

#popup_betjoin .popup_title .timer-text {}
#popup_betjoin #my_bet_display {font-size:14px !important; color:#21cf86; padding-top:20px; margin-bottom:0px; line-height:1; text-align:center;}
#popup_betjoin #my_bet_display:empty {padding-top:0;}
#bet_point {width:calc(100% - 110px);  float:left;}
#bet_join {width:100px; float:right;}
#my_point {float:left; text-align:center; color:#ccc;}
#bet_settle_confirm {margin-bottom:15px;}
.tab_bet {width:100%; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #444; background-color: #2c2f33; overflow: hidden; margin-top:5px; }
.tab_bet li { float: left; width: 50%; text-align: center; padding: 8px 0; background-color: #2c2f33; color: #bbb; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; font-size:14px !important;}
.tab_bet li:hover { background-color: #3a3d41; color: #fff; }
.tab_bet li.active { background-color: #2c2f33; color: #fff; border-bottom: 2px solid var(--main); font-weight: bold; }
.popup_confirm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; z-index: 10001; padding: 45px 20px 42px; width: 440px; border-radius: 10px; background: #1d1f22; text-align: center; border: 1px solid #444; pointer-events: none; will-change: opacity, transform; }
.popup_confirm.active { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.dim { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.35); z-index: 100; opacity: 1; transition: opacity 0.35s ease; pointer-events: none; }
.dim.active { opacity: 1; pointer-events: auto; }
.popup_confirm .title { font-weight: bold; width: 100%; font-size: 24px !important; margin: 0 0 20px; color: #f3f3f3; }
.popup_confirm .title #winner_name { color: #0084ff; }
.popup_confirm .title .imp { color: #ed3f6c; }
.popup_confirm .txt { color: #aaa; font-size: 14px; margin-bottom: 30px; }
.popup_confirm .btn_area { width: 100%; text-align: center; }
.popup_confirm .btn_submit { border: 0; font-size: 14px !important; width: 135px; margin: 0 5px; height: 48px; border-radius: 6px; font-weight: bold; }
.btn_main { background: var(--main); color: #fff; }
.btn_sub { background: #cddbeb; }


#text_noticeMsg {position:fixed; top:120px; left:60px; line-height:1.45; color:#fff; font-weight:bold; text-align:center; width:400px; border-radius:12px; z-index:9999; max-width:80%; word-break:break-word; display:none; animation:fadeInPop 0.5s ease; text-shadow:0px 0px 4px rgba(0,0,0,1);}
#text_noticeMsg.show {display:block; animation: fadeInPop 0.6s ease, floating .9s ease-in-out infinite;}
#text_noticeMsg h6 {font-size:22px !important; margin:0 0 10px; line-height:1.3; text-shadow:0px 0px 4px rgba(0,0,0,0.9);}
#text_noticeMsg h6 span {color:rgb(234, 179, 8); font-weight:bold; animation:bounce 0.6s ease; text-shadow:0px 0px 4px rgba(0,0,0,0.9);}
#text_noticeMsg p {margin:0; font-size:30px !important; line-height:1.4; text-shadow:0px 0px 4px rgba(0,0,0,0.9);}
@keyframes fadeInPop {0%{transform:scale(0.8); opacity:0;} 100%{transform:scale(1.0); opacity:1;}}
@keyframes bounce {0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
@keyframes floating {0%   { transform: translateY(0px); } 50%  { transform: translateY(-6px); } 100% { transform: translateY(0px); }}


@media (min-width:2560px) {
	.chatalbum .icon_album li {flex:0 0 10%;}
}





.btn_push {position:absolute; right:15px; bottom:95px; width:46px; height:46px; border-radius:50%; background:url(https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/dice.png) no-repeat center #208cff; color:#fff; border:0; font-size:0px !important; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.2); transition:all 0.2s ease; text-align:center; background-size:25px;}
.btn_push:active {opacity:.65;}
.btn_push:hover {opacity:.85}
.btn_push.removePush {opacity:0; filter:grayscale(1); animation:none;}
@keyframes btnBounceUp {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.navbar-brand:after {content:""; width:40px; height:60px; position:absolute; top:50%; margin-top:-30px; left:17px;}
.user-dropdown {top:94px !important;}
/* 숨길 토큰 */
.hidden-notice-token {
  display: none !important;
}
.chatalbum .album_wrap .group .wheel_album .wheel_label {padding:3px 0; margin-bottom:0 !important; font-weight:bold;}
.chatalbum .album_wrap .group .wheel_album .wheel_label img, .chatalbum .album_wrap .group .wheel_album .wheel_label span {display:inline-block; vertical-align:middle;}
.chatalbum .album_wrap .group .wheel_album .wheel_label img {margin-right:5px;}
.chatalbum .album_wrap .group .wheel_album .wheel_label.locked {opacity:.5; font-weight:normal;}

.popup_chatmenu .store_section {position:relative; padding:15px;}
.popup_chatmenu .store_section h7 {color:#2ecc71; display:block; margin-bottom:10px;}
.popup_chatmenu .store_section:last-child {padding-top:5px;}
.popup_chatmenu .store_wrap {margin:0; text-align:left;}
.popup_chatmenu .store_wrap * {margin:0; padding:0;}
.popup_chatmenu .store_wrap .store_item {display:inline-block; width:24%; text-align:center; padding:10px 0; cursor:pointer;}
.popup_chatmenu .store_wrap .store_item img {margin-bottom:10px;}
.popup_chatmenu .store_wrap .store_item p {font-weight:bold;}
.popup_chatmenu .store_wrap .store_item .commend {font-weight:bold; font-size:15px !important;}
.popup_chatmenu .store_wrap .store_item .status {font-size:12px !important; opacity:.75}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.chatalbum .album_wrap .group .wheel_album li .wheel_label:hover {transition:.2s; background:#222;}

.usericon {width:25px !important; height:25px !important; margin-right:10px;}


html#ft_15 #messagebuffer > .chat-msg.tip , #messagebuffer > .chat-msg.tip {background:var(--textbar); padding:8px 15px !important; margin:10px 0; text-align:center; font-size:14px !important;}
html#ft_15 #messagebuffer > .chat-msg.tip .radiant, #messagebuffer > .chat-msg.tip .radiant {color:#ade438; margin-right:10px;}
html#ft_15 #messagebuffer > .chat-msg.tip .dire, #messagebuffer > .chat-msg.tip .dire {color:#FF4500; margin-left:10px;}
html#ft_15 #messagebuffer > .chat-msg.tip .radiant, #messagebuffer > .chat-msg.tip .radiant, html#ft_15 #messagebuffer > .chat-msg.tip .dire, #messagebuffer > .chat-msg.tip .dire {font-weight:bold; font-size:16px !important; display:inline-block; vertical-align:middle;}

#message_notice {position:fixed; z-index:100; padding:20px 20px 12px; top:98px; background: rgba(60, 110, 225, 0.9);
 right:0px; font-size:24px !important; width:calc(100vw - var(--leftcontentvw)); animation: fadeIn 0.5s ease-out, bounce 1s ease infinite;}
#message_notice span {font-size:16px !important;} 
#message_notice h5 {font-weight:bold; margin:0;}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bounce { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px); } 75% { transform: translateY(-5px); } }


.btn_top {background:var(--main); color:#fff; border-radius:8px; padding:5px 15px; display:inline-block; text-shadow:none;}
.greentext {color:inherit;}

/* 채팅방 이미지(드림리그) 
.navbar-brand:after {background:url(https://i.ibb.co/Y0HGBrM/logo-dl.webp) 10px center no-repeat; background-size:24px;}
#messagebuffer {background:url("https://i.ibb.co/s16cy8y/messagebuffer-dl-2.webp") center no-repeat; background-size:140px;}
*/ 

/* 채팅방 이미지(TI) */
.navbar-brand:after {background:url(https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/logo_xmas.webp?ver=1.1) center no-repeat; background-size:40px;}
/*#messagebuffer {background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/bg_ti2025_aegis.png?ver=1.5") center no-repeat; background-size:240px;*/
.daewangcon .channel-emote {width:140px !important; height:140px !important; max-width:140px !important; max-height:140px !important;}
.chatColor span {font-size:16px !important;}
.server-msg-announcement {white-space:normal; display:inline-block !important; width:100%; visibility:visible !important; height:auto !important; color:#9d6dff !important; margin:25px 0;  font-weight:bold; text-align:center; padding-right:0;}
.server-msg-announcement  * {display:inline-block; vertical-align:middle;}
.server-msg-announcement  span {margin-left:5px; letter-spacing:-0.5px;}
.server-msg-announcement img {width:40px; margin:0px 0px 0px -15px !important;  }


/* 투표팝업 */
#popup_poll {display:block; position:fixed; top:40px; right:10px; max-width:640px; border-radius:10px; z-index:1000;  overflow:hidden; font-size:0;}
#popup_poll .btn_chatmenu_close {position:absolute; top:60px; right:15px; line-height:1; width:30px; height:30px; opacity:.7; background:url("https://s12.gifyu.com/images/SDMoL.png") center no-repeat #333; border-radius:45px; background-size:12px; border:0; font-size:0;  text-indent:-99999px;}
.area_info {position:absolute;top:0;left:0;right:0;margin:auto; text-align:center; width:840px; letter-spacing:-0.5px;}

.slider_container {width:320px;height:50px; display:inline-block; vertical-align:middle;}
.slider_container * {text-shadow:none !important;}
.slider_container .slider_div {transition:.2s;display:inline-block;border-radius:50px;vertical-align:middle; padding-right:20px; position:relative;width:100%;margin-top:9px;background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/dropdown.png") calc(100% - 0px) center no-repeat;background-size:11px !important;}
.slider_container .slider_div:last-child {margin-right:0px;}
.slider {width:100%;font-size:0;height:32px;overflow:hidden;position:relative;margin:auto;line-height:32px;background:transparent;border-radius:250px;cursor:pointer;}

.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
.slide * {display:inline-block;}
.slide .info {position:relative; overflow:hidden; width:calc(100% - 50px);}
.slide .versus {position:absolute; left:50%; margin-left:-16px; width:32px; opacity:.7; font-size:12px !important; text-align:center;}
.slide span {display:inline-block;font-size:14px !important;text-shadow:none !important;}
.slide span.time {color:#ccc;width:40px;text-align:left; margin-right:0px; font-size:12px !important; vertical-align:top;}
.slide span.team {position:relative; top:-1px; width:calc(100% - 80px); font-weight:700 !important; color:#fff;}
.slider .slide.active { opacity: 1;}
.slide .team {width:50%; float:left; margin:0;}
.slide .team .name {font-weight:bold; width:calc(100% - 35px); text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.slide .team .team-logo {display:inline-block; text-align:center; vertical-align:top; width:25px; height:20px;}
.slide .team .team-logo img {height:20px; max-width:100%;}
.slide .team1 {text-align:right; padding-right:16px;}
.slide .team2 {text-align:left; padding-left:16px;}
.slide .team1 .team-logo {margin-left:5px;}
.slide .team2 .team-logo {margin-right:5px;}



#odds-box  {text-shadow:none; display:inline-block; margin-right:15px; vertical-align:middle; width:fit-content; height:20px;overflow:hidden;line-height:19px; border-right:1px solid #333; text-align:left; padding-right:15px; background:transparent; font-size:14px; color:#888;}
#odds-box .radiant {color:#ade438; font-weight:bold;}
#odds-box .dire {color:#FF4500; font-weight:bold;}
#odds-box .timer {color:#ccc; font-size:13px !important; font-weight:bold;}
#odds-box span  {display:inline-block; vertical-align:middle; margin:0 5px; font-size:14px !important;}
#odds-box * {text-shadow:none !important;}


@media (max-width:980px) {
  .navbar-brand {padding-left:15px !important;}
  .navbar-brand:after {display:none;}
  .area_info {right:60px; left:auto; top:11px; width:auto;}
  #odds-box {padding-right:0; border-right:0; margin-right:0;}
  #odds-box  span {font-size:11px !important; margin:0 3px;}
  #odds-box .timer, .slider_container {display:none !important;}
  
}

@media (min-width:1280px) {
#chatline {padding-right:85px;}
}




/* 중계방 이름 */
.navbar-brand:before {font-family:var(--font-primary) !important; letter-spacing:0px !important; content:"도갤중계방"; font-size:18px; font-weight:bold; text-
indent:0; text-shadow:0px 0px 5px rgba(0,0,0,0.3); color:#fff !important;}


/* 일정팝업 */
.popup_iframe {display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%)!important; width:calc(100% - 30px); max-width:1700px; border-radius:10px; box-shadow:0px 10px 25px rgba(0,0,0,0.3); z-index:9999;  overflow:hidden; background:#373a3f; font-size:0;}
.popup_iframe .popup_title {position:relative; width:100%; padding:0 20px; border-bottom:1px solid #373a3f; }
.popup_iframe .popup_title h6 {margin:0; font-size:16px !important; font-weight:bold; text-align:left; line-height:45px;}
.popup_iframe .popup_cont {position:relative; min-height:600px;}
.popup_iframe iframe {position:absolute; top:0; left:0; border:0; width:100%; height:100%;}
#leftcontrols #emotes-btn svg {display:none;}
#result {font-size:14px !important;}
.popup_chatmenu button {background:#373a3f; width:100%; border:1px solid #4d536c; border-radius:5px; height:40px; font-size:14px !important;}

.channel-emote[title="/도바"]  {max-width:180px !important; max-height:none !important;}


.channel-emote[title="/축"] ~ img, .channel-emote[title="/행복1"] ~ img
{margin-left:-5px; background:#fff;}


#userlist::-webkit-scrollbar {
  height: 7px;
}

.icon-style {
    padding-left: 20px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 12px;
}
.icon-style[data-icon] {
    background-image: attr(data-icon url);
}

#color-options .color-button {vertical-align:top;}
#popup_chaticon .icon_album li {cursor:pointer; width:12.5%; float:left; transition:transform 0.2s ease, opacity 0.2s ease; margin-right:8px; margin-bottom:8px;}
#popup_chaticon .icon_album li img {width:100%; height:100%; display:block; transition:transform 0.2s ease, filter 0.2s ease;}
#popup_chaticon .icon_album li:hover {opacity:1; transform:scale(1.08);}
#popup_megacon .album_tab .menu {width:25%;}
#popup_megacon .icon_album li {cursor:pointer; width:calc(20% - 7px); float:left; transition:transform 0.2s ease, opacity 0.2s ease; margin-right:8px; margin-bottom:8px;}
#popup_megacon .icon_album li:nth-child(5n) {margin-right:0;}
#popup_megacon .icon_album li img {width:100%; height:100%; display:block; transition:transform 0.2s ease, filter 0.2s ease;}
#popup_megacon .icon_album li:hover {opacity:1; transform:scale(1.08);}


.chatalbum .album_tab {width:100%; margin:0; margin-bottom:20px; padding:0; white-space:nowrap; overflow-x:auto; font-size:0 !important; }
.chatalbum .album_tab .menu {width:20%; border-right:1px solid rgba(255,255,255,0.1); font-weight:normal; font-size:14px !important; display:inline-block; padding:12px 0px; text-align:center; cursor:pointer; background:rgba(60,60,60,0.8); }
.chatalbum .album_tab .menu:first-child {border-radius:5px 0px 0px 5px;}
.chatalbum .album_tab .menu:last-child {border-radius:0px 5px 5px 0px;}
.chatalbum .album_tab .menu.active {font-weight:bold; background:#777; border-right:0;}
.chatalbum .album_tab .menu:last-child {border-right:0;}
.chatalbum .album_tab .menu.season.active, .chatalbum .album_tab .menu.special.active {background:linear-gradient(75deg,#cd2f2f,#ff4a4a);}
.chatalbum .album_tab .menu.arcana.active {background:linear-gradient(75deg,#009c9d, #0db755);}
.chatalbum .album_tab .menu.immortal.active {background:linear-gradient(75deg,#dd8512,#f2ad27);}
.chatalbum .album_tab .menu.rare.active {background:linear-gradient(75deg,#0a4abe,#165ee2);}
.chatalbum .album_tab .menu.common.active {background:linear-gradient(75deg,#737b88,#8c95a5);}


@media (max-width:960px) {
.navbar-brand:before {font-size:16px;}
.chatalbum {width:100% !important;}
.chatalbum .album_wrap {padding:15px 15px 20px; overflow-y:auto;}
.chatalbum .album_wrap .group {margin-bottom:18px; padding-bottom:0; border-bottom:0;}
.chatalbum .album_wrap .group .title {margin-bottom:12px;}
.chatalbum .album_wrap .group .title h6 {font-size:14px !important;}
#popup_chaticon .icon_album li {margin-right:0; margin-bottom:0; width:16.6%;}
#popup_megacon .icon_album li {margin-right:0; margin-bottom:0; width:16.6%;}
#popup_prediction .popup_cont, #popup_predictionJoin .popup_cont {max-height:calc(100% - calc(100vw / 16 * 9) - 25px);}
.choice_list {padding:16px 0;}
.popup_betting .info_area {padding:10px 0;}
.choice_list label {padding:5px; font-size:12px !important;}


.popup_betting {width:100% !important; max-width:440px !important; left:0% !important; /*top:calc(100vw / 16 * 9  + 50px) !important;*/ top:50%!important; transform:translate(0%, -50%); left:0;}
#popup_notiMsg, #popup_schedule, #popup_standin {top:auto; bottom:0 !important; left:0; transform:none;}

.popup_betting  .timer-text {font-size:12px !important; margin-bottom:10px;}
.popup_betting .popup_title {padding:10px 16px;}
.popup_betting .popup_cont {padding:15px 16px;}
.popup_betting .team label {font-size:14px !important;}
.popup_betting input {height:38px; line-height:38px;}
.popup_betting .row {margin-bottom:15px;}


#text_noticeMsg {left:0px; top:75px; width:320px;}
#text_noticeMsg h6 {font-size:14px !important; margin-bottom:5px;}
#text_noticeMsg p {font-size:18px !important;}
#popup_schedule {top:0; left:0; transform:none;}
#popup_prediction .popup_cont, #popup_predictionJoin .popup_cont, #popup_schedule .popup_cont {max-height:400px;}
}		


#messagebuffer > .aipredict { white-space: nowrap; padding: 15px !important; background: rgba(0,0,0,0.75); transition: .2s; line-height: 1; box-shadow: 0px 5px 5px rgba(0,0,0,0.2); margin-top: 10px; margin-bottom:10px;}
.aipredict .bar-labels { display: flex; justify-content: space-between; font-weight: bold; font-size: 14px !important; margin-bottom: 14px; }
.aipredict .bar-wrapper { display: flex; height: 32px; border-radius: 6px; overflow: hidden; background: #ddd; margin-bottom: 12px; }
.aipredict .bar { display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px !important; white-space: nowrap; transition: width 0.4s ease; }
.aipredict .team1 { background: linear-gradient(180deg, #2fbf4a, #1ea043, #2fbf4a); background-size: 100% 200%; animation: gradientFlow 3s ease-in-out infinite; color: #fff; }
.aipredict .team2 { background: linear-gradient(180deg, #e60026, #b9001f, #e60026); background-size: 100% 200%; animation: gradientFlow 3s ease-in-out infinite; color: #fff; }
.aipredict .team-label.team1 { background: transparent; color: #2fbf4a; }
.aipredict .team-label.team2 { background: transparent; color: #e60026; }
.aipredict p { font-size: 12px !important; color: #ddd; margin-bottom: 0; text-align: center; }
.aipredict p strong { color: #fff; }


.popup_chatmenu.mypage {width:100%; max-width:780px; z-index:9998; border-radius:14px; background:linear-gradient(rgba(10,12,18,1), rgba(15,19,23,0.91)), url('https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/ti2025_ui.webp'); background-size:cover; background-position:top left; background-repeat:no-repeat;}
.popup_chatmenu.mypage * {margin:0; padding:0;}
.popup_chatmenu.mypage .mypage_area {position:relative; width:100%; padding:30px 25px;}
.popup_chatmenu.mypage .mypage_area .tit {font-weight:bold; margin-bottom:15px; font-size:15px !important;}
.popup_chatmenu.mypage .mypage_area .profile_area {position:relative;width:100%;margin-bottom:22px;}
.popup_chatmenu.mypage .mypage_area .profile_area .tier_icon {position:relative; width:120px; height:120px; padding:15px; background:#141519; border-radius:110px; border:4px solid #39393f; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);}
.popup_chatmenu.mypage .mypage_area .profile_area .tier_icon img {width:100%;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info {width:calc(100% - 125px); padding-left:15px; font-size:14px !important;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .nickname {display:block; color:#fff; font-size:22px !important; font-weight:700; margin-bottom:12px;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .nickname * {display:inline-block; vertical-align:middle;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .nickname .icon {width:30px; height:30px; margin-right:8px; border-radius:30px;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .nickname .point {color:#adffe1; font-size:14px !important; padding-left:5px;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status {overflow:hidden; width:100%;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .record span {margin-right:7px; padding-right:13px; position:relative;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .record span:after {position:absolute; top:50%; content:""; margin-top:-6px; width:1px; right:0; height:12px; background:rgba(255,255,255,0.3);}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .record span.percent {color:#ccc; padding-right:0;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .record span:last-child:after {display:none;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .record, .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .mmr_area {display:inline-block; vertical-align:middle;}

.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .mmr {color:#ccc; font-size:12px !important; margin-right:5px;}
.popup_chatmenu.mypage .mypage_area .profile_area .tier_icon, .popup_chatmenu.mypage .mypage_area .profile_area .profile_info {display:inline-block; vertical-align:middle;}
.popup_chatmenu.mypage .mypage_area .record_area {width:100%; position:relative;}
.popup_chatmenu.mypage .mypage_area .record_area .item {width:100%; background:rgba(31, 36, 44,0.93); border:1px solid #2a3039; border-radius:8px; padding:12px 20px; display:flex; justify-content:space-between; gap:4px; font-size:12px !important; margin-bottom:8px;}
.popup_chatmenu.mypage .mypage_area .record_area .item span.name {flex:5; text-align:left; font-weight:600;}
.popup_chatmenu.mypage .mypage_area .record_area .item span.total,
.popup_chatmenu.mypage .mypage_area .record_area .item span.win,
.popup_chatmenu.mypage .mypage_area .record_area .item span.lose,
.popup_chatmenu.mypage .mypage_area .record_area .item span.mmr {flex:1; text-align:center; color:#ddd;}
.popup_chatmenu.mypage .mypage_area .record_area .item span.mmr.plus, .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .win {color:#2ecc71;}
.popup_chatmenu.mypage .mypage_area .record_area .item span.mmr.minus, .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .lose {color:#e74c3c;}
.popup_chatmenu.mypage .mypage_area .record_area .item span.date {flex:2; text-align:right;  color:#ddd;}
.popup_chatmenu.mypage .mypage_area .record_area .item:last-child {margin-bottom:0;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .mmr_area {position:relative; margin-bottom:0px;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .mmr_area .mmr, .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .mmr_area .tier_progress_wrap {display:inline-block; vertical-align:middle;}
.popup_chatmenu.mypage .tier_progress_wrap > * {display:inline-block; vertical-align:middle;}
.popup_chatmenu.mypage .tier_progress_wrap .tier_label {font-size:12px; color:#ccc; vertical-align:middle; font-size:12px !important;}
.popup_chatmenu.mypage .tier_progress_wrap .tier_bar {width:90px; height:6px; background:#1d222a; border-radius:6px; overflow:hidden; margin:0 10px 0 4px;}
.popup_chatmenu.mypage .tier_progress_wrap .tier_bar .tier_fill {height:100%; background:#2ecc71;}
.popup_chatmenu.mypage .skeleton-box { display:inline-block; height:14px; background:linear-gradient(90deg, #2a2e33, #1f2225, #2a2e33); background-size:200% 100%; animation:skeleton-loading 1.2s infinite linear; border-radius:4px; opacity:0.6; } .popup_chatmenu.mypage .item.loading span { color:transparent !important; } @keyframes skeleton-loading { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.popup_chatmenu.mypage .btn_chatmenu_close {right:17px; top:10px; width:50px; z-index:100;}
.popup_chatmenu.mypage .mypage_area .profile_area .tier_icon .ranking {width:28px; height:28px; line-height:28px; border-radius:26px; text-align:center; background:rgba(46,204,113,0.8); color:#fff; position:absolute; bottom:-3px; right:-2px; font-size:10px !important; opacity:.9; font-weight:bold;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .att_area {width:100%; overflow:hidden; position:relative; padding-top:4px;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .att_area span {font-size:12px !important; color:#aaa; margin-right:5px;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .att_area span.active {color:#2ecc71;}

.popup_chatmenu.mypage .mypage_area .button_area { position: relative; width: 100%; margin-bottom: 25px; display: flex; gap: 10px; }
.popup_chatmenu.mypage .mypage_area .button_area .btn { flex: 1 1 0;  height:46px; background:rgba(31, 36, 44,0.93); border:1px solid #2a3039; font-size:12px !important; font-weight:bold;}
.popup_chatmenu.mypage .mypage_area .button_area .btn .icon {width:16px; height:16px; margin-right:5px;}

.popup_chatmenu.mypage .mypage_tab_area { margin-top: 5px; }
.popup_chatmenu.mypage .mypage_tab_menu { display: flex; width: 100%; list-style: none; margin: 0; padding: 0; margin-bottom:20px; border-bottom: 1px solid #444; background: none; }
.popup_chatmenu.mypage .mypage_tab_item { flex: 1; text-align: center; padding: 8px 0; color: #bbb; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; font-size: 14px !important; background: none; }
.popup_chatmenu.mypage .mypage_tab_item:hover { color: #fff; }
.popup_chatmenu.mypage .mypage_tab_item.active { color: #fff; border-bottom: 2px solid rgba(0, 220, 200, .9); font-weight: bold; }
.popup_chatmenu.mypage .mypage_tab_contents { position: relative; }
.popup_chatmenu.mypage .mypage_tab_content {position:relative; display: none; height: auto;  }
.popup_chatmenu.mypage .mypage_tab_content.active { display: block; height: 361px; overflow-y: auto; }
.popup_chatmenu.mypage  canvas {height:361px !important; width:100% !important;}
.popup_chatmenu.mypage .record_toggle { position: absolute; top: 0px; right: 0; display: flex; gap: 0; background: rgba(15, 10, 10, 0.9); border-radius: 999px; padding: 4px; z-index: 10; border:1px solid rgba(70,70,70,.5);}
.popup_chatmenu.mypage .record_toggle button {padding-top:1px; height: 24px; min-width: 54px; border: none; border-radius: 999px; color: #aaa; font-size: 12px !important; cursor: pointer; transition: all 0.2s ease; font-weight: 500; line-height: 1; background:transparent;}
.popup_chatmenu.mypage .record_toggle button.active { background: linear-gradient(to bottom, rgba(0, 220, 200, 0.9), rgba(0, 180, 160, 0.85)); color: #fff; font-weight: 600; box-shadow: none; }
.profile_message_input {background:transparent; border:0; background:#262626; border-radius:100px; padding:0 12px !important; color:#fff; font-size:12px !important}
.profile_message_input:focus {outline:none;}


@media screen and (orientation: landscape) and (min-height: 360px) and (max-height: 430px) {
  #rightcontent {height:100dvh;}
}



@media (max-width:980px) {
  .popup_chatmenu.mypage {z-index:99999; right:0; bottom:0; height:476px; transform:translate(-50%,-50%); top:50%; left:50%;}
  .popup_chatmenu.mypage .mypage_area {padding:22px 15px;}
  .popup_chatmenu.mypage .mypage_area .profile_area .tier_icon {width:60px; height:60px; padding:10px;}
  .popup_chatmenu.mypage .mypage_area .profile_area .profile_info {font-size:12px !important; padding-left:10px; width:calc(100% - 75px);}
  .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .nickname {font-size:18px !important;}
  .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .nickname .point {font-size:14px !important;}
  .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .nickname .icon {display:none;}
  .popup_chatmenu.mypage .mypage_area .profile_area .profile_info .status .record {margin-bottom:3px;}
  .popup_chatmenu.mypage .tier_progress_wrap .tier_bar {width:75px; height:4px;}
  .popup_chatmenu.mypage .btn_chatmenu_close {top:8px; right:0; width:45px;}
  .popup_chatmenu.mypage canvas {height:auto !important;}
  .popup_chatmenu.mypage .mypage_area .record_area .item {padding:10px 13px; margin-bottom:7px; gap:3px;}
  .popup_chatmenu.mypage .mypage_area .record_area .item span.date {display:none;}
  .popup_chatmenu.mypage .mypage_area .record_area .item span.name {white-space: nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:3px;}
  .popup_chatmenu.mypage .mypage_area .record_area .item span.mmr {flex:2;}
  .popup_chatmenu.mypage .mypage_tab_content.active {height:190px;}
}


@media (orientation: landscape) and (max-width:1366px) and (min-width:1024px) {
  :root {  --leftcontentvw:  77dvw; }
  #messagebuffer>div {font-size:14px !important;}
  .slider_container {display:none !important;}
  .nav>li>a {padding:15px 10px;}
  .area_info {top:11px;}
  #odds-box {padding-right:0; border-right:0; margin-right:0;}
}



/* 환상리그 */
#popup_fantasy_join { width:auto; overflow:hidden; }
.popup_betting.popup_fantasy { width:1104px; margin:auto; left:50%; transform:translate(-50%, -50%); top:50%; --main:#1abdb3; overflow:hidden; }
.popup_betting.popup_fantasy .popup_cont { max-height:750px; padding:0; text-align:center; background:linear-gradient(rgba(10,12,18,1), rgba(15,19,23,0.85)), url('https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/bg_muerta.webp') top center no-repeat; background-size:cover; }
.popup_betting.popup_fantasy input[type=radio] { display:none; }
#dim_fantasy_join { opacity:1; z-index:9000; }
.popup_betting.popup_fantasy #fantasy_day_info { font-size:32px !important; height:32px; margin:40px 0 0 0 !important; color:#ccc; font-weight:200; }
.popup_betting.popup_fantasy #fantasy_day_info strong { background:linear-gradient(to bottom, rgba(2,255,232,1), rgba(0,166,148,1)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.popup_betting.popup_fantasy #btn_fantasy_rule { position:absolute; top:0; right:20px; height:32px; line-height:32px; font-size:13px !important; background:#df3838; color:#fff; border:0; outline:none; padding:0 15px; border-radius:6px; }
.popup_betting.popup_fantasy #fantasy_score_box { position:relative; background:rgba(255,255,255,0.2); backdrop-filter:blur(6px); height:60px; line-height:60px; }
.popup_betting.popup_fantasy #fantasy_score_box .btn_chatmenu_close { background:url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/player_close.png") center no-repeat; position:absolute; right:0; top:0; height:60px; width:60px; border:0; text-indent:-999999px; outline:none; background-size:40px; }
.popup_betting.popup_fantasy #fantasy_score_box span { font-size:16px !important; display:inline-block; margin:0 15px; }
.popup_betting.popup_fantasy #fantasy_score_box #fantasy_total_score { color:var(--main); }
.popup_betting.popup_fantasy .player_list { position:relative; width:100%; overflow-y:auto; padding:20px 20px; }

.popup_betting.popup_fantasy .lineup_slots { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:40px 20px; }
.popup_betting.popup_fantasy .lineup_slot.player_card { width:189px; text-align:center; cursor:pointer; }
.popup_betting.popup_fantasy .lineup_slot.player_card .position { font-size:16px !important; font-weight:bold; margin-bottom:8px; }
.popup_betting.popup_fantasy .lineup_slot .player_card_inner:hover { border-color:var(--main); box-shadow:0 0 25px rgba(26,189,179,0.4); }
.popup_betting.popup_fantasy .lineup_slot.player_card .player_point { padding-top:10px; }
.popup_betting.popup_fantasy .lineup_slot.player_card .player_point p { margin-bottom:0; color:#aaa; font-size:14px !important; }

.popup_betting.popup_fantasy #select_player_list { display:flex; flex-wrap:wrap; gap:14px 14px; justify-content:flex-start; }
.popup_betting.popup_fantasy .player_card { width:140px; text-align:center; }
.popup_betting.popup_fantasy .player_card * { transition:.3s; }
.popup_betting.popup_fantasy .player_card_inner { width:100%; aspect-ratio:3/4; border:2px solid #454545; cursor:pointer; background:rgba(10,10,10,0.88); }
.popup_betting.popup_fantasy .player_card_inner:hover { border-color:var(--main); box-shadow:0 0 25px rgba(26,189,179,.5); }
.popup_betting.popup_fantasy .player_img_wrap { width:100%; aspect-ratio:1/1; overflow:hidden; flex-shrink:0; padding:10px 10px 0 10px; background:url(https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/playercard/bg_player.webp) center no-repeat; background-size:cover; position:relative; }
.popup_betting.popup_fantasy .player_img_wrap::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.8); }
.popup_betting.popup_fantasy .player_img_wrap img { width:100%; height:100%; object-fit:contain; object-position:bottom; }
.popup_betting.popup_fantasy .player_info { display:flex; flex-direction:column; padding:10px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.popup_betting.popup_fantasy .player_name { font-size:16px !important; height:25px; font-weight:600; letter-spacing:0; }
.popup_betting.popup_fantasy .player_team { font-size:13px !important; height:20px; color:var(--main); }
.popup_betting.popup_fantasy input[type=radio]:checked + .player_card_inner { border-color:var(--main); box-shadow:0 0 25px rgba(26,189,179,.4); }
.popup_betting.popup_fantasy .btn_submit { max-width:210px; margin:0 auto 40px; font-size:16px !important; font-weight:bold; height:50px; line-height:50px; }

.popup_fantasy #fantasy_rank_content { padding:20px; display:flex; gap:20px; align-items:top; }
.popup_fantasy .box { width:50%; border:3px solid var(--main); height:600px; }
.popup_fantasy .box table { width:100%; height:100%; table-layout:fixed; }
.popup_fantasy .box table th { background:rgba(255,255,255,0.1); }
.popup_fantasy .box table th, .popup_fantasy .box table td { text-align:center; border:1px solid rgba(255,255,255,0.16); font-size:14px !important; }
.popup_fantasy .box table td { color:#ddd; }
.popup_fantasy .leaderboard { color:#ddd; overflow-y:auto; padding:30px 20px; }
.popup_fantasy .leaderboard .title { font-size:16px !important; font-weight:700; color:#fff; margin-top:0; margin-bottom:20px; }
.popup_fantasy .list_leaderboard { list-style:none; padding:0; margin:0; width:100%; }
.popup_fantasy .list_leaderboard .item { display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid rgba(255,255,255,0.16); color:#ddd; }
.popup_fantasy .list_leaderboard .item span { font-size:14px !important; font-weight:bold; }
.popup_fantasy .list_leaderboard .item span:nth-child(1) { width:34px; text-align:left; }
.popup_fantasy .list_leaderboard .item span:nth-child(2) { flex:1; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.popup_fantasy .list_leaderboard .item span:nth-child(3) { width:80px; text-align:right; }
.popup_fantasy .list_leaderboard .item.me { background:rgba(255,255,255,0.09); color:#fff; }
.popup_fantasy .list_leaderboard .item:hover { background:rgba(255,255,255,0.05); color:#fff; }
.popup_fantasy .list_leaderboard .item:nth-child(1), .popup_fantasy .list_leaderboard .item:nth-child(2), .popup_fantasy .list_leaderboard .item:nth-child(3) { color:var(--main); }
.popup_fantasy .list_leaderboard .item:nth-child(1) { color:#ffc52a; border-top:1px solid rgba(255,255,255,0.16); }

.popup_fantasy .popup_rule { display:none; position:absolute; top:48px; right:20px; width:340px; max-height:400px; overflow-y:auto; padding:25px 20px; background:rgba(10,12,18,0.95); border:1px solid var(--main); border-radius:12px; z-index:300; text-align:left; }
.popup_fantasy .rule_title { font-size:18px !important; font-weight:700; margin-top:0; margin-bottom:16px; color:var(--main); }
.popup_fantasy .rule_section { margin-bottom:18px; }
.popup_fantasy .rule_section h4 { font-size:15px !important; font-weight:600; margin-bottom:8px; color:#fff; }
.popup_fantasy .rule_section p { font-size:13px !important; line-height:1.6; color:#ccc; }
.popup_fantasy .popup_rule table { width:100%; border-collapse:collapse; margin-top:10px; }
.popup_fantasy .popup_rule th { background:#444; text-align:center; color:#fff; font-weight:600; }
.popup_fantasy .popup_rule td { color:#ddd; text-align:center; background:#000; }
.popup_fantasy .popup_rule th, .popup_fantasy .popup_rule td { border:1px solid #ddd; padding:5px; border-color:#666 !important; font-size:13px !important; }
.popup_betting.popup_fantasy .player_card input[type='radio']:disabled + .player_card_inner {cursor:no-drop; filter:grayscale(1); opacity:.4;}
.popup_chatmenu.mypage .mypage_area .profile_area .profile_info .btn {width:60px; height:28px; margin-left:5px; font-size:13px !important; border-radius:100px; background:transparent; border:2px solid #1abdb3; color:#1abdb3; font-weight:bold; text-shadow:none;}
.popup_betting.popup_fantasy .player_card #btn_buy_talent {text-shadow:none !important; width:100%; background:transparent; border-color:var(--main); color:var(--main); font-size:14px !important; font-weight:600;}
.popup_betting.popup_fantasy .player_card #btn_buy_talent:hover {opacity:.7;}
.popup_betting.popup_fantasy .player_card #btn_buy_talent:active {background:var(--main); color:#fff;}
.popup_betting.popup_fantasy .talent_slot.player_card {cursor:auto !important;}
.popup_betting.popup_fantasy .talent_slot .player_card_inner {position:relative; padding:20px; display:flex; align-items:center; cursor:auto; border:2px solid transparent; border-image:linear-gradient(135deg, rgba(2,255,232,0.6), rgba(0,166,148,0.5), #6a6a6a) 1; flex-direction:column; justify-content:center; background:url(https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/playercard/bg_player.webp) center no-repeat; background-size:cover; overflow:hidden;}
.popup_betting.popup_fantasy .talent_slot .player_card_inner::before {content:""; position:absolute; inset:0; background:rgba(0,0,0,0.85); pointer-events:none;}
.popup_betting.popup_fantasy .talent_slot .player_card_inner .talent_icon {position:relative; width:76px; height:76px; overflow:hidden; padding:4px; background:linear-gradient(145deg, rgba(2,255,232,0.45), rgba(0,166,148,0.25), #6f6f6f, #5a5a5a); box-shadow:inset 0 3px 6px rgba(255,255,255,0.15), inset 0 -3px 6px rgba(0,0,0,0.5), 0 3px 7px rgba(0,0,0,0.55); margin-bottom:5px;}
.popup_betting.popup_fantasy .talent_slot .player_card_inner .talent_icon img {width:100%;}
.popup_betting.popup_fantasy .talent_slot .player_card_inner .player_info {white-space:wrap; padding-bottom:0; z-index:1;}
.popup_betting.popup_fantasy .talent_slot .player_card_inner .player_name {font-size:16px !important; margin-bottom:5px;}
.popup_betting.popup_fantasy .talent_slot .player_card_inner .player_team {height:auto; word-break:keep-all; line-height:1.45;}


@media (max-width:1280px) {
    .popup_betting.popup_fantasy { left:0; transform:translate(0%, -50%); }
    .popup_betting.popup_fantasy .popup_cont { height:calc(100dvh - 160px); max-height:none; }
    .popup_betting.popup_fantasy #fantasy_day_info { font-size:28px !important; margin-top:30px; }
    .popup_betting.popup_fantasy .lineup_slots { flex-wrap:wrap; padding:20px 20px; width:100%; gap:16px; justify-content:center; }
    .popup_betting.popup_fantasy .lineup_slot.player_card { width:calc(50% - 8px); }
    .popup_betting.popup_fantasy #btn_fantasy_rule { position:static; margin-top:15px; }
    .popup_betting.popup_fantasy .lineup_slot.player_card .position { font-size:15px !important; }
    .popup_betting.popup_fantasy .player_name { font-size:14px !important; }
    .popup_betting.popup_fantasy .player_team { font-size:11px !important; }
    .popup_betting.popup_fantasy .lineup_slot.player_card .player_point p { font-size:12px !important; }
    .popup_betting.popup_fantasy #fantasy_score_box { position:fixed; letter-spacing:-0.5px; width:100%; bottom:0; left:0; height:50px; line-height:50px; padding:0 10px; }
    .popup_betting.popup_fantasy #fantasy_score_box span { font-size:13px !important; margin:0 4px; }
    .popup_betting.popup_fantasy .btn_submit { max-width:calc(100% - 40px); }
    .popup_betting.popup_fantasy #select_player_list { gap:8px; padding:15px; }
    #popup_fantasy_select .popup_cont { height:calc(100dvh - 160px); }
    .popup_betting.popup_fantasy .player_card { width:calc(33.3% - 6px); }
    .popup_fantasy .box { width:100%; }
    .popup_fantasy #fantasy_rank_content { height:auto; flex-direction:column; padding:20px 15px; }
    .popup_fantasy .leaderboard { padding:20px 15px; }
    .popup_fantasy .box table th, .popup_fantasy .box table td { padding:8px 5px; font-size:13px !important; }
    .popup_fantasy .list_leaderboard .item { padding:7px 10px; }
    .popup_fantasy .list_leaderboard .item span { font-size:13px !important; }
    .popup_fantasy .popup_rule { top:95px; }
}

:root { --fantasy-skeleton-bg:linear-gradient(90deg,#333 0%,#444 50%,#333 100%); }
@keyframes fantasySkeleton { 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
.popup_betting.popup_fantasy.loading .player_img_wrap img { opacity:0; }
.popup_betting.popup_fantasy.loading .player_img_wrap::before { content:""; position:absolute; inset:0; background:var(--fantasy-skeleton-bg); background-size:200% 100%; animation:fantasySkeleton 1.2s linear infinite; }
.popup_betting.popup_fantasy.loading .player_name { position:relative; color:transparent; }
.popup_betting.popup_fantasy.loading .player_name::before { content:""; position:absolute; inset:0; border-radius:4px; background:var(--fantasy-skeleton-bg); background-size:200% 100%; animation:fantasySkeleton 1.2s linear infinite; }
.popup_betting.popup_fantasy.loading .player_team { position:relative; color:transparent; }
.popup_betting.popup_fantasy.loading .player_team::before { content:""; position:absolute; inset:0; border-radius:4px; background:var(--fantasy-skeleton-bg); background-size:200% 100%; animation:fantasySkeleton 1.2s linear infinite; }
.popup_betting.popup_fantasy.loading .player_point p { position:relative; color:transparent; }
.popup_betting.popup_fantasy.loading .player_point p::before { content:""; position:absolute; inset:0; border-radius:4px; background:var(--fantasy-skeleton-bg); background-size:200% 100%; animation:fantasySkeleton 1.2s linear infinite; }
.popup_betting.popup_fantasy.loading #fantasy_score_box span b { position:relative; color:transparent; }
.popup_betting.popup_fantasy.loading #fantasy_score_box span b::before { content:""; position:absolute; inset:0; border-radius:4px; background:var(--fantasy-skeleton-bg); background-size:200% 100%; animation:fantasySkeleton 1.2s linear infinite; }
.popup_betting.popup_fantasy.loading #fantasy_deadline_info { position:relative; color:transparent; }
.popup_betting.popup_fantasy.loading #fantasy_deadline_info::before { content:""; position:absolute; inset:0; border-radius:4px; background:var(--fantasy-skeleton-bg); background-size:200% 100%; animation:fantasySkeleton 1.2s linear infinite; }



/* 팝업 */
.popup_donate { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:360px; background:#fff; border-radius:12px; overflow:hidden; display:none; z-index:99999; box-shadow:0 8px 20px rgba(0,0,0,0.35); }
.popup_donate * {padding:0; margin:0;}
.popup_donate_inner { position:relative; padding:0; background:#fff; }
.popup_donate_content { width:100%; padding:35px 20px; text-align:center;}
.popup_donate_content .popup_donate_title {font-size:20px !important; font-weight:bold; margin-bottom:20px; display:block;}
.popup_donate_content .popup_donate_note {color:var(--main); padding-top:6px; font-size:14px !important; margin-bottom:20px;}
.popup_donate_content * {color:#111;}
.popup_donate_content .popup_donate_body {}
.popup_donate_content img { width:100%; display:block; }
.popup_donate_content .btn_donate {background:#fee500; display:inline-block; margin:auto; border-radius:6px; padding:10px 30px; text-align:center; font-weight:bold;}
.popup_donate_content .btn_donate:hover, .popup_donate_content .btn_donate:focus {color:#000 !important;}
.popup_donate_actions { padding:12px; text-align:center; background:#fafafa; border-top:1px solid #ddd; }
.popup_donate_actions button { background:#444; border:0; color:#fff; padding:8px 16px; border-radius:6px; cursor:pointer; font-size:14px !important; }



/* 럭박 */
#luckbox_area { border:5px solid #444; width:240px; height:240px; margin:auto; margin-bottom:25px; display:flex; justify-content:center; align-items:center; overflow:hidden; position:relative; }
#luckbox_area img { width:100%; height:auto; object-fit:contain; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }
#luckbox_reward {width:100%; position:absolute; transform:scale(0.9); font-size:48px !important; font-weight:700; opacity:0; display:inline-block; background:linear-gradient(180deg, #ffffff 0%, #2ecc71 100%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
#popup_pointdrawjoin.luckybox {animation: warningPulse2 1s infinite alternate;  background:linear-gradient(rgba(10,12,18,1), rgba(15,19,23,0.87)), url('https://s3.ap-northeast-2.amazonaws.com/cytube.v2/ui/bg_muerta.webp'); border-color:#2ecc71; --main: #2ecc71; transform:translate(0%, -50%); top:50%; left:0; right:0; margin:auto;}
#popup_pointdrawjoin.luckybox .btn_area .btn_submit {width:240px;}
@keyframes warningPulse2 {
  0% { border-color: #2ecc71; box-shadow: 0 0 30px #2ecc71; }
  100% { border-color: #27ae60; box-shadow: 0 0 90px #27ae60; }
}
.modal-open .modal {z-index:99999 !important;}
#pollwrap .well.active .btn-danger {margin-right:20px;}



/* 닉네임 효과 */
.color_xmas .usertext, span.color_xmas { position:relative; background-image:repeating-linear-gradient(135deg, #fff 0 4px, #f01423 6px 12px); background-size:300% 300%; animation:xmasshift 12s linear infinite, xmashadow 4.8s ease-in-out infinite; -webkit-background-clip:text; -webkit-text-fill-color:transparent!important; color:transparent!important; font-weight:900; }
.color_xmas .usericon { animation:xmasfilter 4.8s ease-in-out infinite; filter:brightness(1.7) saturate(1.45); transform:translateZ(0); }
@keyframes xmasshift {
    0%   { background-position:100% 100%; }
    100% { background-position:0% 0%; }
}
@keyframes xmashadow { 0%,100% { text-shadow:none; } 50% { text-shadow:0 0 6px rgba(255,60,60,0.5), 0 0 8px rgba(50,255,120,0.4); } }
@keyframes xmasfilter { 0%,100% { filter:brightness(1) saturate(1.55) contrast(1) drop-shadow(0 0 2px rgba(255,60,60,0.55)) drop-shadow(0 0 3px rgba(50,255,120,0.45)); } 50% { filter:brightness(1.2) saturate(1.75) contrast(1.45) drop-shadow(0 0 6px rgba(255,60,60,0.95)) drop-shadow(0 0 8px rgba(50,255,120,0.85)); } }


.color_marorong .usertext, span.color_marorong { background-image: linear-gradient(90deg, #ff8800, #ffd966, #ffffff, #ff8800); background-size: 200% auto; animation: testshift 1.8s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent!important; color: transparent!important; font-weight:900; text-shadow: 0 0 14px rgba(255,136,0,0.9); position: relative; display: inline-block; }
.color_marorong .usertext::after { content: ""; position: absolute; width: 16px; height: 16px; background: url("https://s3.ap-northeast-2.amazonaws.com/cytube.v2/dotacon/%EB%A7%88%EB%A1%9C%EB%A1%B1.png") no-repeat center/contain; animation: starRandom 8s infinite ease-in-out; }
.color_marorong .usericon { animation: testfilter 4s ease-in-out infinite; filter: drop-shadow(0 0 2px #ff8800) brightness(1.1); }
@keyframes testshift { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes starRandom {
  0%   { top: -10px; left: -20px; opacity: 1; transform: scale(1); filter: drop-shadow(0 0 6px #ffd966);}
  20%  { top: 5px; left: 40px; opacity: 0; transform: scale(0.8); filter: drop-shadow(0 0 8px #ffffff);}
  40%  { top: -15px; right: -30px; opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 12px #ff8800);}
  60%  { bottom: -15px; left: 25px; opacity: 0; transform: scale(0.9); filter: drop-shadow(0 0 6px #ffd966);}
  80%  { top: 10px; right: -40px; opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 12px #ffffff);}
  100% { top: -10px; left: -20px; opacity: 1; transform: scale(1); filter: drop-shadow(0 0 6px #ffd966);}
}
@keyframes testfilter { 0%,100% { filter: drop-shadow(0 0 2px #ff8800) brightness(1.1);} 50% { filter: drop-shadow(0 0 4px #ffd966) brightness(1.2);} }
.modal {z-index:9999;}
.popup_chatmenu .icon_count {text-align:right; font-weight:400; color:#fff; text-align:right; font-size:14px !important; margin-bottom:10px; opacity:.8;}


.color_twilight .usertext, span.color_twilight { background-image: linear-gradient(90deg, #ff9966, #d279ff, #7b69ff, #2b75ff); background-size: 200% auto; animation: shine 2.5s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; }
.color_twilight .usericon { animation: twilightglow 2.5s ease-in-out infinite; filter: drop-shadow(0 0 2px #b68cff) saturate(1.2) brightness(1); }

@keyframes twilightglow {
  0%   { filter: drop-shadow(0 0 2px #b68cff) saturate(1.3) brightness(1.1); }
  50%  { filter: drop-shadow(0 0 5px #e0b3ff) saturate(2.6) brightness(1.25); }
  100% { filter: drop-shadow(0 0 2px #b68cff) saturate(1.3) brightness(1.1); }
}

.color_liquid .usertext, span.color_liquid { background-image: linear-gradient(90deg, #ffffff, #cde2ff, #7fb3ff, #cde2ff, #ffffff); background-size: 200% auto; animation: shine 2s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; }
.color_platinum .usertext, span.color_platinum { background-image: linear-gradient(90deg, #7be5dc, #ffffff, #978cff); background-size: 200% auto; animation: shine 2s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; }
.color_fire .usertext, span.color_fire { background-image: linear-gradient(0deg, #ff0000, #ff5500, #fff200, #ff5500, #ff0000); background-size: auto 250%; animation: firesway 3s ease-in-out infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; text-shadow: 0 0 8px rgba(255, 85, 0, 0.6); }
@keyframes firesway { 0% { background-position: center 0%; } 50% { background-position: center 100%; } 100% { background-position: center 0%; } }
.color_mint .usertext, span.color_mint { background-image: linear-gradient(135deg, #e6fcf8 0%, #33ddca 40%, #d4f779 80%, #e6fcf8 100%); background-size: 300% 300%; animation: mintcycle2 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; }
@keyframes mintcycle2 { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }

.color_peach .usertext, span.color_peach { background: linear-gradient(135deg, #ffe5b4 0%, #ffcc99 30%, #ff99cc 60%, #ffe5b4 90%, #cd72de 100%); background-size: 300% 300%; animation: peach-flow 2.5s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent!important; color: transparent!important; font-weight: bold; text-shadow: 0 0 8px rgba(255,230,200,0.4); }
@keyframes peach-flow { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }




.color_arcana .usertext, span.color_arcana { background-image: linear-gradient(75deg, #10fd7f, #29b1ff, #0077ff, #10fd7f); background-size: 300% auto; animation: arcanashift 3.5s ease-in-out infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent!important; color: transparent!important; font-weight: bold; text-shadow: 0 0 8px rgba(41,177,255,0.5); }
.color_arcana .usericon {
  animation: arcanafilter 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 2px #29b1ff) hue-rotate(0deg) brightness(1.2);
}
@keyframes arcanafilter {
  0%, 100% { filter: drop-shadow(0 0 2px #29b1ff) hue-rotate(0deg) brightness(1.2); }
  50%      { filter: drop-shadow(0 0 3px #10fd7f) hue-rotate(180deg) brightness(1.4); }
}

@keyframes arcanashift {
  0% { background-position: 0% center; }
  50% { background-position: 150% center; }
  100% { background-position: 0% center; }
}

.color_champagne .usertext, span.color_champagne { background-image: linear-gradient(150deg, #414141 0%, #bbbbbb 25%, #ffffff 50%, #bbbbbb 75%, #444444 100%); background-size: 200% 200%; animation: metallic-cycle-rev 2s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; }
@keyframes metallic-cycle-rev { 0% { background-position: 200% center; } 100% { background-position: 0% center; } }


.color_candy .usertext, span.color_candy { background-image: linear-gradient(180deg, #ffd1dc, #ffeaa7, #a0ffee, #d1b3ff, #ffb3ba, #ffd1dc); background-size: 300% 300%; animation: candyshine 4s ease-in-out infinite, candyglow 4s ease-in-out infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent!important; color: transparent!important; font-weight: bold; }

@keyframes candyshine { 0% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }





.color_gold .usertext, span.color_gold { background-image: linear-gradient(135deg, #ffe066 8%, #ffd700 18%, #ffb300 28%, #c97e00 38%, #ffd700 48%, #ffe066 58%, #fff2aa 62%, #ffd700 70%); background-size: 200% 200%; animation: goldstrike 2s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; }

.color_lime .usertext, span.color_lime { background-image: linear-gradient(270deg, #fff200, #4caf1d, #7eff3c, #fff200); background-size: 200% auto; animation: shine 2.5s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: bold; }


@keyframes goldstrike {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}




@keyframes shine {
  0%   { background-position: 0% center; }
  100%  { background-position:200% center; }
}


.color_purewhite .usertext, span.color_purewhite {
  color: #ffffff !important;
  -webkit-text-fill-color: #fdfdfd !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  animation: purewhite_glow 3.5s ease-in-out infinite;
}

.color_purewhite .usericon {
  animation: purewhite_icon 3.5s ease-in-out infinite;
  filter: grayscale(100%) drop-shadow(0 0 2px #ffffff) brightness(1.3);
}

@keyframes purewhite_glow {
  0%, 100% {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 07);
  }
}

@keyframes purewhite_icon {
  0%, 100% {
    filter: grayscale(0%) drop-shadow(0 0 0px #fcfcfc) brightness(1);
  }
  50% {
    filter: grayscale(50%) drop-shadow(0 0 4px #fcfcfc) brightness(1.4);
  }
}

.color_void .usertext, span.color_void {
  background-image: linear-gradient(135deg, #00ffd5, #4b0082, #ff6ec7, #002244, #00ffd5);
  background-size: 600% 600%;
  animation: voidgas 8s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: bold;
}
@keyframes voidgas {
  0% {background-position: 10% 90%;}
  20% {background-position: 80% 10%;}
  40% {background-position: 30% 70%;}
  60% {background-position: 70% 40%;}
  80% {background-position: 20% 30%;}
  100% {background-position: 10% 90%;}
}


#drinkbar {display:none !important;}

@keyframes hueLoop {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

img[src*="arcana_spirit.png"] {
    animation: hueLoop 2.5s infinite linear;
}