@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
@font-face {
	font-family: 'Noto Sans';
	src: url(./images/NotoSansKR-Regular.woff) format('woff'),
		url(./images/NotoSansKR-Regular.woff2) format('woff2');
	font-style: normal;
	font-weight: normal;
}

* {padding:0; margin:0; font-family: 'Mulish', 'Noto Sans'; font-size:11.5px; color:#555; list-style: none; text-decoration:none; box-sizing:border-box; word-break:break-all; cursor:default; line-height:15px; letter-spacing:0px;}
input, textarea, ::placeholder{border-radius: 0; border:0; background:none; outline: none; -webkit-appearance: none; color:#555;}
img{vertical-align: bottom;}
a, a:link, a:visited, a:active{color: #555; text-decoration: none;}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {width:0px; height:0px;}
html{overflow-x: hidden;}
.clear{clear: both;}

img.emoji { width: 12px; vertical-align:middle; padding:1px 0;}
.top{position:fixed; right:8px; bottom:5px; padding:10px;}





/*========== layout ==========*/
#container{position:relative; width:800px; height:480px; margin:150px auto; padding:20px; background:#fff;}
#side{float: left; position:relative; width:30%; height:100%; background:/*url(./images/grid.png);*/ #eeeeee33; padding:10px; padding-top: 20px;}
#content{float: right; width:70%; height:100%; overflow-y:auto; padding:20px;  border-left:0 !important;}

.profile{display:block; width:170px; height:200px; overflow:hidden; margin:0 auto 20px; background:#fff; }
.profile .title{float: left; width:25px; height:100%; padding:10px 5px; writing-mode:vertical-lr; transform:rotate(180deg); font-weight:bold; letter-spacing:0.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.profile .img{float: right; width:calc(100% - 25px); height:100%;}

.line{width:50px; height:0; margin:0 auto 20px;}

.icon{width:100px; height:auto; margin:0 auto 20px; background:#fff; font-size:0;}
.icon a{display: inline-block; width:calc(100% / 4); padding:5px 0; text-align:center; font-size:10.5px;}
.icon a > i{line-height:15px;}

.cate{width:200px; height:auto; margin:0 auto; background:#fff; text-align:center; font-size:0;}
.cate a{display: inline-block; width:calc(100% / 3); padding:5px; font-size:10px;}

.toggle{display: none; width:200px; margin:20px auto 0; background:#fff; padding:5px;}

.ppc{position:absolute; bottom:20px; left:50%; transform:translate(-50%,0);}
.ppc a{padding:5px;}

.pmb {position:relative; margin-top:20px; width:100%;}
.pmb .left{float:left;}
.pmb .right{float: right;}



/*========== list ==========*/
.list_w:after{display: block; clear: both; content: '';}


#list_g .list_c{float: left; width:calc((100% - 10px) / 2); margin:0 10px 10px 0;}
#list_g .list_c:nth-child(2n){margin-right:0;}
#list_g .thumb_i{width:100%;}
#list_g .thumb_i img{width:100%;}
#list_g .list_t{display: none;}

#list_n .thumb_i{display: none;}
#list_n .list_c:not(:last-child){margin-bottom:14.3px;}
#list_n .list_t span{display: inline-block; width:100%;}
#list_n .list_t .date{float: right; width:90px; padding:10px; text-align:center;}
#list_n .list_t .title{float: left; width:calc(100% - 90px); padding:10px; font-weight:bold;}

#list_a .thumb_i{display: none;}
#list_a .list_c{float:left; width:calc((100% - 10px) / 2); margin:0 10px 10px 0;}
#list_a .list_c:nth-child(2n){margin-right:0;}
#list_a .list_t .title{padding:14.5px 10px; text-align:center; font-weight:bold;}
#list_a .list_t .date{padding:14.5px 10px; text-align:center;}



/*========== article ==========*/
.entry .article .title_wrap{padding-bottom:15px; margin-bottom:15px;}
.entry .article .title_wrap .title{float:left; font-weight:bold;}
.entry .article .title_wrap .date{float: right;}
.entry .article .ny{
    padding: 0 15px 15px 15px !important; /* 위 0, 우 15px, 아래 15px, 좌 15px 여백 */
    margin-bottom: 15px; 
    text-align:justify;
}

.entry .article .ny p > a{color:#59f; font-weight:bold;}
.entry .article .ny p > a{color:#59f; font-weight:bold;}
.entry .article iframe{width:100%; border:0 !important;}
.tag_trail, .action_trail{display: inline-block;}
.tag_trail{margin-left:2px;}
.tag_trail a{color:#59f; font-weight:bold;}
.tag_trail a:before{content:'#';}

.absent_post{font-size:10.5px !important; padding-top:0 !important; background:none !important;}

/*image*/
figure{margin:0;}
figure.imageblock.alignCenter{margin-bottom:10px; text-align:initial; }

/* 티스토리 이미지 그리드(여러 장 묶음) 처리 */
figure.imagegridblock{margin:0;}

/* 이미지가 몇 장이든 본문 너비에 맞춰 꽉 차게 정렬 */
figure.imagegridblock .image-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px; /* 이미지 사이의 여백 */
}

/* [핵심] 1장~2장일 때는 꽉 채우고, 3장 이상일 때는 3등분으로 제한 */
figure.imagegridblock .image-container > span {
    margin: 0 !important; 
    flex: 1 1 calc((100% - 10px) / 3) !important; /* 3장이 기본 베이스 */
    max-width: calc((100% - 10px) / 3) !important; /* 최대 3장까지만 한 줄에 허용 */
}

/* 만약 올린 이미지가 총 1장 또는 2장밖에 없다면 max-width를 해제해서 꽉 채움 */
figure.imagegridblock .image-container[data-image-count="1"] > span,
figure.imagegridblock .image-container:has(> span:nth-child(1):last-child) > span {
    max-width: 100% !important;
}
figure.imagegridblock .image-container[data-image-count="2"] > span,
figure.imagegridblock .image-container:has(> span:nth-child(2):last-child) > span {
    max-width: calc((100% - 5px) / 2) !important;
}

/* 이미지 찌그러짐 방지 및 정비율 확대 */
figure.imagegridblock .image-container > span img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/*moreless*/
div[data-ke-type='moreLess'] .btn-toggle-moreless{color:#555; font-size:10.5px; line-height:15px; font-family:'Noto Sans'; font-weight:bold; cursor:default;}
div[data-ke-type='moreLess'] .btn-toggle-moreless:before{content:"\f07b"; font-family:"Font Awesome 5 Free"; font-weight:bold; font-size:10px; margin-right:3px;}/*folder icon*/
div[data-ke-type='moreLess'].open .moreless-content{margin:5px 0; padding:5px;}/*content area*/

.btn_more, .btn_less{height:auto; margin:0; font-size:10.5px; color:#555; text-align:initial; font-weight:bold;}
.moreless_content .btn_less:last-child{display: none;}
.btn_less:before, .btn_more:before{content:"\f07b"; font-family:"Font Awesome 5 Free"; font-weight:bold; font-size:10px; margin-right:3px; padding:0; line-height:15px; vertical-align:initial;}/*folder icon*/
.moreless_content {display:block; width:100%; padding:5px !important; margin:5px 0 !important;}/*content area*/

/*download button*/
figure.fileblock{margin:0; width:auto; height:auto; border:0; border-radius:0;}
figure.fileblock a{height:auto;}
figure.fileblock a::after{display: none;}
figure.fileblock .name{max-width:100%; height:auto; font-weight:bold;}

span.imageblock > a{font-weight:bold;}
span.imageblock > a > img{display: none;}

/*video - 16:9 Optimization*/
figure[data-ke-type="video"]{position: relative; width: 100%;	padding-bottom: 56.25%;}
figure[data-ke-type="video"] iframe{position: absolute; left:0; width: 100%; height: 100%;}
.youtube{position:relative; width:100%; padding-bottom:100%;}
.youtube iframe{position:absolute; width:100%; height:100%; border:0 !important;}

/*line*/
hr[data-ke-style='style5']{margin:10px 0; height:auto; background:none; background-size:auto; cursor:default !important;}

/*postbtn*/
.container_postbtn{margin-top:15px;}
.container_postbtn, .container_postbtn .postbtn_ccl, .container_postbtn .btn_post{height:auto !important; padding:0 !important;}
.container_postbtn .postbtn_like{padding: 0 !important; border-radius:0 !important; border:0 !important;}
.container_postbtn .btn_post .txt_like, .container_postbtn .wrap_btn_etc{display: none !important; }
.container_postbtn .btn_post .ico_like{margin:1px 0 0 !important;}
.container_postbtn .postbtn_like .wrap_btn{padding-right:5px;}
.container_postbtn .postbtn_like + .btn_menu_toolbar {display: none;}






/*========== protect ==========*/
.protect{position:relative; width:100%; height:100%;}
.article_p{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:150px;}
.article_p .pwinput{display: inline-block; padding:10px 5px; text-align:center; font-weight:bold;}




/*========== notice ==========*/
.n_entry{padding:10px;}
.n_entry:not(:last-child){margin-bottom:20px;}
.n_entry .title_wrap{margin-bottom:10px; font-weight:bold;}
.n_entry .article{text-align:justify;}
.n_entry .container_postbtn{display: none;}





/*========== comment ==========*/
.comment_o{display: none; margin-top:10px;}
.comment_list{margin-top:30px;}
.comment .rp_wrap{padding:15px;}
.comment #rrp{padding-left:10px; margin-top:10px;}
.comment .name{display:inline-block; font-weight:bold;}
.comment .desc{margin-top:2px; text-align:justify;}
.comment .redel{float: right; padding:5px;}
.comment .redel a{font-size:10px;}

.comment textarea{width:100%; height:50px; padding:10px; resize:none; background:#eeeeee55; margin-bottom:10px;}
.comment .wb{border-top:0 !important;}
.comment .input{float:left; width:45%; font-size:0;}
.comment .input input{display: inline-block; width:calc(50% - 5px); font-size:10.5px; line-height:25px; text-align:center; padding:0 5px; background:#eeeeee55;}
.comment .input input:first-child{margin-right:10px;}
.comment .cksd{float: right; width:30%; font-size:0; text-align:center;}
.comment .check{display:inline-block; width:50%;}
.comment .check input[type="checkbox"]{display: none;}
.comment .check input[type="checkbox"]+label:before{display: inline-block; content: "public"; color:#555; font-size:10.5px; line-height:25px;}
.comment .check input[type="checkbox"]:checked+label:before{content: "secret";  color:#59f; font-weight:bold;}
.comment .submit{display: inline-block; width:50%;}
.comment .submit input[type="submit"]{font-size:10.5px; color:#555; font-weight:bold; background:#00000000; line-height:25px;}





/*========== cover ==========*/
.cover_wrap .c_item:not(:last-child){margin-bottom:10px;}
.cover_wrap .title_wrap{display: none;}

.cover_notice .n-img{width:100%; padding:10px;}
.cover_notice .n-img img{max-width:100%;}
.cover_notice .txt{padding:10px;}

.cover_list .link{display: block;}
.cover_list .link:not(:last-child){margin-bottom:10px;}
.cover_list .list_t .title{float: left; width:calc(100% - 90px); padding:10px; font-weight:bold;}
.cover_list .list_t .date{float: right; width:90px; padding:10px; text-align:center;}

.cover_gallery{margin-bottom:0 !important;}
.cover_gallery .in::after{display: block;  clear: both;  content: '';}
.cover_gallery .list_c{float: left; position: relative; width:calc((100% - 10px) / 2); margin:0 10px 10px 0;}
.cover_gallery .list_c:nth-child(2n){margin-right:0;}
.cover_gallery .thumb_i img{width: 100%;}
.cover_gallery .list_t{display: none; padding:10px; font-weight:bold; text-align:center;}





/*=====copyright=====*/
.yunicorn a{position:fixed; left: 13px; bottom: 10px; font-family:'Noto Sans'; font-size: 10px; font-weight:bold; letter-spacing:1px;} /* 수정 및 삭제 금지 */
/*=====copyright=====*/



@media (max-width:767px){
	#container{margin:8%; width:84%; height:auto;}
	#side{float: none; width:100%; height:auto; border-bottom:0 !important;}
	#content{float: none; width:100%; height:auto;}
	.comment .input{width:50%;}
}

content, 
#content :not(.list_t):not(.control) {
    font-size: 12px !important;       /* 본문 글자 크기 (원하는 크기로 변경 가능) */
    line-height: 1.5 !important;    /* 문장과 문장 사이 줄 간격 (1.7배) */
}

/* 티스토리 에디터로 작성한 문단(엔터 쳤을 때) 사이의 여백 추가 */
#content p {
    margin-bottom: 12px !important;  /* 문단 아래에 약간의 공백을 주어 답답함을 해소 */
}

#content, 
#content p, 
#content ul, 
#content ol, 
#content li {
    font-size: 14px !important;       /* 원하는 본문 글자 크기 */
    line-height: 1.7 !important;      /* 문장 줄 간격 (1.7배) */
}

/* 2. 티스토리 에디터 리스트(말머리글) 문간 및 여백 정밀 설정 */
#content ul, 
#content ol {
    margin-top: 8px !important;
    margin-bottom: 12px !important;   /* 리스트 전체 묶음 아래에 여백 추가 */
    padding-left: 20px !important;    /* 말머리 기호(•)가 들어갈 왼쪽 여백 */
}

#content li {
    margin-bottom: 6px !important;    /* 말머리글 한 줄 한 줄 사이의 간격 (문간) */
    list-style-type: disc !important; /* 말머리 기호(•) 모양 강제 유지 */
}

/* 3. 일반 문단(엔터쳤을 때) 사이의 여백 */
#content p {
    margin-bottom: 12px !important;
}