@import url("//fonts.googleapis.com/earlyaccess/notosanskr.css");
@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

.btn_confirm {display:block; text-align:center; padding:20px 0;}
.help {display:block; color:#d66552; font-family: 'Dotum'; font-size:11px;}
#bo_sch {padding:20px 0;}

/**************************************
			LIST
***************************************/
#bo_cate_ul {text-align:center; padding:20px 0;}
#bo_cate_ul li {display:inline-block; margin:0 2px;}
#bo_cate_ul li .ui-btn {border-radius:16px;}

.avocado-ss-list {display:grid; gap:20px;}
.avocado-ss-list li {display:inline-block; height:200px; position:relative;}
.avocado-ss-list li a {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.3));}
.avocado-ss-list li a h1 {position:absolute; bottom:20px; text-align:center; display:block; width:100%; color:#fff; font-family:'SUITE-Regular';}

.avocado-ss-list img {max-width:28px; border-radius:50%; background:linear-gradient(to bottom, rgba(255,255,255,.7), rgba(0,0,0,.3)); border:1px solid #111; position:relative; z-index:2;}

.avocado-ss-list .list_member { padding: 4px 6px; display: inline-block; margin: 4px 2px;}
.avocado-ss-list .list_member .name {font-size:12px; padding: 0px 5px 0px 0px; margin-left:2px; color:#111; font-family:'SUITE-Regular'; position:relative; z-index: 1;}
.avocado-ss-list .list_member .name:before {content: ""; z-index: -1; left: -0.5em; top: 0em; border-width: 0.7em; border-style: solid; border-color: #fff;  position: absolute;   width: 103%;  border-right-color: transparent;  transition-duration: 0.1s;  background: none; border-radius: 0;  height: initial;}

.bo_fx {padding:20px 0;}

/**************************************
			VIEWER
***************************************/
.subject {font-size:20px; text-align:center; padding:20px 0;}
#bo_v_bot {display:flex; justify-content: space-between; padding:20px 0;}
.empty {text-align:center; padding:20px 0;}

/**************************************
			COMMENT WRITE
***************************************/
.comment-member-list {top: 50%; transform: translate(-100%,-50%); left:calc(50% - 340px);}
.comment-member-list.theme-box{display:inline-block;position: fixed;}
.comment-member-list img {max-width:40px;}

.comment-member-list .name {padding:0 4px; font-weight:bold;}
.comment-member-list li {margin:6px 0;}

#comment-plus {display:block; max-width:640px; margin:0 auto; font-family:'Noto Sans KR', sans-serif;}
#comment-plus li {background:#efefef; padding:20px; margin:12px 0; /*display: flex; flex-direction: column; width: 60%;*/}
#comment-plus input:read-only {background:none; border:none; color:#111; font-weight:bold; font-size:13px; font-family:'Noto Sans KR', sans-serif;}
#comment-plus textarea {background:white; border:1px solid #ccc; color:#111;}
#comment-plus .input-a {/*justify-self: self-start;*/}
#comment-plus .input-b {/*justify-self:self-end;*/}


/**************************************
			COMMENT VIEWER
***************************************/
.ss-line {font-family:'Noto Sans KR', sans-serif; position:relative;}
.ss-line img {max-width:48px;}
.ss-line .line-detail {overflow-wrap: anywhere;}

.pagination {display:block;text-align:center;padding-top:20px;position: fixed;top: 50%;right: calc(50% - 380px);transform: translate(+100%,-50%);width: 28px;}
.pagination a {display:inline-block; font-size:14px; width:25px; height:24px; line-height:24px; text-align:center; background:#111; border-radius:50%; border:1px solid #fff; color:#fff; margin:2px 0;}
.pagination a.current {font-weight:bold; background:#fff; color:#111;}
.pagination a:hover {background:#444; border:1px solid #111; color:#fff;}

.update_menu {display:none; position:absolute; border-radius:4px; overflow:hidden; width:100px; border: 1px solid #111;}
.update_menu.on {display:block;}
.ss-line:hover .update_button {opacity:1;}
.update_button {color:#aaa; background:#fff; display:inline-block; border-radius:50%; width:24px; height:24px; opacity:0; transition:opacity 0.3s; cursor:pointer;}
.update_menu li{background:#eee; padding:4px 8px; color:#222; cursor:pointer;}
.update_menu li:hover {background:#ccc;}
.update_menu li + li {border-top:2px solid #ccc;}
.update_menu li a{color:#222;}


.hash-tags {display:block; text-align:center; padding:12px 0 40px;}
.hash-tags .hash_tag {display:inline-block; border-radius:4px; background:#fff; padding:2px 4px; color:#111; font-weight:bold; line-height: 15px; border:1px solid #111;}
.hash-tags .hash_tag .material-icons { font-size: 15px; line-height: initial; margin-right: -4px; vertical-align: sub;}
.hash-tags .hash_tag:hover {color:#fff; background:#111; border:1px solid #fff;}

@media (max-width: 1000px) {
.comment-member-list {left:4px; transform:translateY(-50%);}
.pagination {right:4px; transform:translateY(-50%);}
.avocado-ss-list {grid-template-columns:1fr !important;}
}