@charset "utf-8";
/* CSS Document */
* {padding:0;margin:0;
    box-sizing:border-box;}
html,body{}
html, body {
    width:100%;
    height:100%;
    font-size:12px;
    font-family:dotum,돋움;
    color:#a3a3a3;
    background:#111;
}
a{color:#DDD;}
a:visited{color:#777;}
img{border:none;}
input{
    outline: none;
}
li {list-style:none}
.right{float:right;margin-left: 10px;};
span.logo{
    display:block;
    width:25px;
    height:25px;
    background: #151515;
    margin-top: 3px;
    border-radius:2px;
    text-align:center;
    line-height:30px;
}
span.logo::before{
    content:"B";
    font-size:22px;
    color:#c04040;
    font-weight:900;
    text-decoration: none;
}
header{
    width:100%;
    height: 50px;
    background: #2b2b2b;
    padding: 10px 7px;
    position:fixed;
    top:0;
    z-index:99;
    box-shadow: 0px 2px 1px rgba(0,0,0,0.6);
}
header>a{
    float:left;
    text-decoration: none;
}
header .logo{
    position: relative;
    top: 4px;
    left:10px;
}
header>.logout{
    float:right;
    line-height:30px;
    font-size: 10px;
}
header>.btn-favo{
    position:relative;
    left:30px;
    top:3px;
    float:left;
    border:1px solid #555;
    font-size:10px;
    border-radius:4px;
    padding:0px 10px;
    line-height:25px;
    background:#222;
    cursor:pointer;
}
header>.btn-favo.on{
    background:#999;
    border-color:#AAA;
    color:#333;
}
header>.btn-refresh{
    float:right;
    position:relative;
    width:20px;
    height:20px;
    top:5px;
    margin-left: 10px;
    background:transparent;
    color:#DDD;
    border:0;
    cursor:pointer;
    font-size: 16px;
}
header>.search{
    float:right;
    line-height:30px;
    margin-right:10px;
    margin-top: 2px;
    border: 1px solid #444;
    padding:0 4px;
    background:#222;
}
header>.search:focus-within{border-color:#999;}
header>.search input{
    height:26px;
    background:#222;
    border:0;
    float:left;
    color:#AAA;
    width: 100px;
}
header>.search button{
    height:26px;
    width:20px;
    background:#222;
    border:0;
    float:left;
    color:#AAA;
}
body{
    height:auto;
    padding-top: 55px;
    padding-bottom: 30px;
}
#toon-list li{
    height: 61px;
    border-bottom: 1px solid #333;
    padding: 8px 10px;
    position: relative;
    /* padding-left: 90px; */
    padding-right: 90px;
    font-size:11px;
    white-space: nowrap;
}
#toon-list li a{
    text-decoration:none;
    width: 100%;
    display: block;
    padding-left: 90px;
    /* padding-right: 90px; */
    overflow: hidden;
}
#toon-list li a>*{
    pointer-events:none;
}
#toon-list li .user-btn-group{
    position: absolute;
    right: 5px;
    top: 15px;
}
#toon-list li .badge{
    background:#555;
    color:#000;
    padding:0 4px;
    border-radius:5px;
    margin-left:3px;
    font-size:10px;
}
#toon-list li .badge.badge-dark{
    background:#999;
}
#toon-list li .badge.badge-success{
    background:#DDD;
}
.user-btn-group>button{
    width: 26px;
    height: 26px;
    font-size: 18px;
    border: 0;
    margin-left: 2px;
    background: transparent;
    color: #888;
    cursor: pointer;
}
.user-btn-group>button:hover{
    /* color:#999; */
}
.user-btn-group>button.on{
    color:#FFF;
}
.user-btn-group>button:nth-child(1).on{
    color:#4d89ff;
}
.user-btn-group>button:nth-child(3).on{
    color:#ff4d4d;
}
#toon-list h5{
    font-size: 14px;
    font-weight: 500;
    color: #DDD;
    padding-left:20px;
    position:relative;
}
#toon-list h5::before{
    content:"";
    display:inline-block;
    width:14px;
    height:14px;
    /* background:#EEE; */
    position:absolute;
    left:0;
    background-size:100%;
    border-radius:2px;
}
#toon-list auth{
    /* margin-left:5px; */
    font-size: 11px;
    font-weight:100;
    color:#AAA;
    line-height:17px;
}
#toon-list auth::before{
    content:'\f007';
    margin-right:3px;
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    font-size:10px;
}

#toon-list li:hover,#toon-list li:active{
    background:#333;
}
#toon-list li .img{
    width: 76px;
    height: 44px;
    position: absolute;
    left: 8px;
    background-size: cover;
    background-position: center;
}

[c="naver"]::before{
    background-image:url(/img/naver.png);
}
[c="etc"]::before{
    background-image:url(/img/etc.png);
}
[c="kakao"]::before{
    background-image:url(/img/kakao.png);
}
[c="rejin"]::before{
    background-image:url(/img/rejin.png);
}
[c="daum"]::before{
    background-image:url(/img/daum.png);
}
[c="toptoon"]::before{
    background-image:url(/img/toptoon.png);
}
[c="bom"]::before{
    background-image:url(/img/bom.png);
}
[c="tomics"]::before{
    background-image:url(/img/tomics.png);
}
.subtitle-area{
    padding:10px;
    font-size:14px;
    display:none;
}
.subtitle-area.show{
    display:block;
}
.tab{
    padding-left:1%;
    padding-bottom:5px;
    position: sticky;
    top: 50px;
    z-index: 1;
    background: rgba(17, 17, 17, 0.8);
    padding-top: 5px;
}
.tab button{
    width:24%;
    height:30px;
    background:#111;
    color:#888;
    border:1px solid #555;
    cursor:pointer;
}
.tab button.on{
    background:#333;
    border-color:#444;
}
.footer{
    padding:10px;
}
.hatehide::before{
    content:"SHOW";
    margin-right:2px;
}
.hatehide.on::before{
    content:"HIDE";
}