@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');


* {padding:0; margin:0; font-family: 'Open Sans'; font-size:11px; color:#000; letter-spacing:0; list-style: none; text-decoration:none; box-sizing:border-box; word-break:break-all; cursor:default; line-height:16px;}
input, textarea, ::placeholder{border-radius: 0; border:0; background:none; outline: none; -webkit-appearance: none; color:#000;}
img{vertical-align: bottom;}
.clear{clear: both;}
a, a:link, a:visited, a:active{color: #000; text-decoration: none;}
html{overflow-x: hidden;}
::-webkit-scrollbar {width:15px; background:#eee;}
::-webkit-scrollbar-thumb {width:15px; background:#ddd;}
.youtube{position:relative; width:100%; padding-bottom:56.25%;}
.youtube iframe{position:absolute; width:100%; height:100%;}

.feather {
  width: 11px;
  height: 11px;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

#container{position:relative; width: 600px; margin: 180px auto 50px; background:#fff; border:1px solid #666; box-shadow:0px 0px 7px #00000077;}
#content{height: 480px; padding:10px; overflow-y:scroll;}
#top{position:relative; width:100%; border-bottom:0 !important; height:30px; padding:8px; z-index:100;}
#top .title{float: left; display: inline-block;}
#top .button{float: right; display: inline-block;}
#top .button .feather{margin-left:10px; }

#top img{width:15px; vertical-align:middle; margin-right:3px; margin-top:-2px;}
#tool{padding:0 8px 3px; border-bottom:1px solid #bbb;}
#tool{position:relative;}
#tool .bt{margin-right:10px;}
.file, .cate, .menu, .view, .ptoggle{display: inline-block;}
.box{display:none; position:absolute; width:100px; border: 1px solid #ddd; border-top:0; background:#eee; padding-left:20px; top:calc(100% + 1px); box-shadow:2px 2px 3px #00000077; z-index:100;}
.fbox li, .cbox li, .mbox li, .category_list > li{padding:5px 0; border-bottom:1px solid #ddd;}
.fbox li:last-child, .mbox li:last-child, .category_list li:last-child{border-bottom:0;}
.fbox{margin-left:-8px; border-left:0; z-index:101;}
.cbox{z-index:102;}
.mbox{z-index:103;}
.vbox{padding:0; z-index:104;}
.vbox .imgwrap{padding:5px;}
.vbox img{width:100%;}
.cbox .tt_category .link_tit{display: none;}
.sub_category_list{display: none; margin-left:3px;}
.sub_category_list > li:before{content:'-';}



#pop{display:none; position:absolute; top:50%; left:50%; width:250px; transform:translate(-50%, -50%); border:1px solid #666; background:#fff; box-shadow:0px 0px 7px #00000077; z-index:99999;}
#pop .top{background:#fff; padding:8px;}
#pop .title{float: left; display: inline-block;}
#pop .button{float: right; display: inline-block;}
#pop .button .feather{line-height: inherit;}
#pop .background{padding:8px; background:#eee;}
#pop .form{float: left; display: inline-block; width:75%;}
#pop .submit{float: right; display: inline-block; width:23%;}
#pop .form input{width:65%; padding:3px; background:#fff; border:1px solid #aaa;}
#pop .submit input{width:100%; padding:3px 0; background:#ddd; border:1px solid #aaa;}
#pop img {
    width: 100%; /* 줄어든 팝업 창에 맞춰서 */
    height: auto;
    display: block;
}

#pop .talk{text-align:center; margin-top:8px;}




.paging{padding-top:15px;}



.list_w:after{display: block; clear: both; content: '';}
#list_n .sum, #list_g .sum, #list_a .sum{display: none;}

#list_n .list_c .thumb_i{display: none;}
#list_n .list_c {padding:15px 0px;}
#list_n .list_c:first-child{padding-top:0;}
#list_n .list_c:last-child{padding-bottom:0;}
#list_n .list_c .list_t .title{float:left;}
#list_n .list_c .list_t .date{float: right;}

#list_g .list_c{float: left; width:calc(94% / 4); margin:0 2% 2% 0;}
#list_g .list_c:nth-child(4n){margin-right:0;}
#list_g .list_c .thumb_i{width: 100%; height: auto; }
#list_g .list_c .thumb_i img{width: 100%; height: auto;}
#list_g .list_c .list_t{margin-top:5px; text-align:center;}
#list_g .list_c .list_t .title{width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#list_g .list_c .list_t .date{font-size:10px; color:#666;}

#list_a .list_c{float: left; position:relative; width:calc(98% / 2); margin:0 2% 2% 0;}
#list_a .list_c:nth-child(2n){margin-right:0;}
#list_a .list_c .thumb_i{float:left; width:35%;}
#list_a .list_c .thumb_i img{width:100%;}
#list_a .list_c .list_t{position:absolute; width:62%; top:50%; left:38%; transform:translate(0, -50%);}
#list_a .list_c .list_t .date{display:none;}

#list_b .thumb_i, #list_b .title{display: none;}
#list_b .list_c{margin-bottom:20px;}
#list_b .list_c:last-child{margin-bottom:0;}
#list_b .list_c .list_t .date{margin-bottom:10px;}



.entry .title_wrap{display: inline-block; margin-bottom:10px; }
.entry .article iframe{width:100%;}
.entry .article{margin-bottom:5px;}
.entry .detail .admin{float: right;}

div[data-ke-type='moreLess'] .btn-toggle-moreless, .btn_more{height: 0 !important; margin: 0 !important; color: #000 !important; font-size: 11px !important; line-height: 18px !important; font-family: 'Open Sans' !important;  cursor: default !important;}
.btn_less{padding:0; margin:0; color:#000;}
div[data-ke-type='moreLess'] .btn-toggle-moreless::before, .btn_less::before, .btn_more::before {content: "+"; display: inline-block; padding-right: 5px; line-height: 18px; vertical-align: initial;}
div[data-ke-type='moreLess'].open .moreless-content, .moreless_content{border-radius:8px; padding:5px; margin-top:5px;}

figure.imageblock.alignCenter {
    margin-bottom: 0;
}

figure.imagegridblock {
    margin: 10px 0;
    display: flex !important;
    gap: 5px !important;
}


figure.imagegridblock .image-container {
    flex: 1 !important;
}

figure.imagegridblock img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 단일 이미지도 크기 제한 */
.article img {
    max-width: 100% !important;
    height: auto !important;
}

blockquote[data-ke-style='normal'], blockquote[data-ke-style='box']{font-size:11px; background:none; padding:8px; margin:5px 0; color:#000; line-height:18px; border:1px solid #bbb;}

figure.fileblock{display: inline-block; margin:5px 0; width:auto; height: auto; border-radius:none; border:none;}
figure.fileblock .image, figure.fileblock a::after, figure.fileblock .size{display: none;}
figure.fileblock a{display: inline-block; height:auto;}
figure.fileblock .desc{position: inherit; left:0; right:0;}
figure.fileblock .filename{color:#555; font-size:11px; height:auto; margin:0;}
figure.fileblock .name{max-width:none; height:auto; font-weight:bold; font-family: 'Open Sans';}
figure.fileblock .name:before{content:'+'; margin-right:5px;}
span.imageblock > a > img{display: none;}
span.imageblock > a:before{content:'+';}




.protect{text-align:center; height:370px;}
.article_p{display: inline-block;	margin: 150px auto 0;}
.article_p input{display: inline-block; padding:3px; background:#fff; border: 1px solid #aaa;}
.article_p .pwinput{width:100px; margin:0 3px;}
.article_p .submit{background:#ddd;}




.taglog{border-radius:10px; }
.taglog a{display: inline-block; padding:5px;}




.n_entry{margin-bottom:15px; border-radius:10px; }
.n_entry .title_wrap{display: inline-block; margin-bottom:10px;}
.n_entry .article{margin:0;}




.comment_o{display: none; margin-top:15px;}
.comment_list{margin-top:20px;}
.comment .rp_wrap{margin-bottom:15px;}
.comment .rrp{margin-top:10px; margin-left:20px;}
.comment .redel{float: right;}
.comment .redel a{color:#666;}

.comment textarea {	width:100%; height:70px; margin:auto; margin-bottom:10px; padding:5px; border:1px solid #bbb; background:rgba(255,255,255,0); resize:none;}
.comment .input{float: left; width:50%;}
.comment .input input{width:40%; line-height:25px; padding:0 5px; margin-right:5px; text-align:center; border:1px solid #bbb; background:rgba(255,255,255,0);}
.comment .cksd{float: right;}
.comment .check{display:inline-block;	margin-right:5px;}
.comment .check input[type="checkbox"]{display: none;}
.comment .check input[type="checkbox"]+label:before{display: inline-block;	content: '공개'; width:40px; line-height:25px; text-align:center; border:1px solid #bbb; background:#eee;}
.comment .check input[type="checkbox"]:checked+label:before{content: '비밀';}
.comment .submit{display: inline-block; }
.comment .submit input {width:40px;	line-height:25px; color:#000; border:1px solid #bbb; background:#eee; }




.cover_wrap .title_wrap{display: inline-block; margin-bottom:10px;}

.cover_notice .item_wrap{margin-bottom:15px; border-radius:10px;}
.cover_notice .n-img img{max-width: 100%;}

.cover_gallery{margin-bottom:10px; border-radius:10px;}
.cover_gallery .in::after{display: block;  clear: both;  content: '';}
.cover_gallery .thumb{float: left;  position: relative;	width:calc(94% / 4); margin:0 2% 2% 0;}
.cover_gallery .thumb:nth-child(4n){margin:0 0 2% 0;}
.cover_gallery .thumb_i{width: 100%; height: auto;}
.cover_gallery .thumb_i img{display: block; position: relative; width: 100%; }



/*=====copyright=====*/
.yunicorn{position:fixed; left: 13px; bottom: 10px; font-family:'Verdana' !important; font-size: 10px;}
/*=====copyright=====*/



@media (max-width:767px){
	#container{width:90%; margin: 5%;}
	#content{height:auto; max-height:calc((100% - 50px) - 15%);}  /* auto로 복구 */
	
	/* iframe만 모바일에서 줄이기 */
	.article iframe, iframe{
		max-width:100% !important;  /* 박스 넘어가지 않게 */
		width:280px !important;
		height:158px !important;
	}
	
	#list_g .list_c{width:calc(98% / 2); margin-bottom:4%;}
	.cover_gallery .thumb{width:calc(98% / 2);}
	#list_g .list_c:nth-child(2n), .cover_gallery .thumb:nth-child(2n){margin-right:0;}
	#list_a .list_c{width:100%; margin:0; margin-bottom:3%;}
}


/*공감버튼*/
.container_postbtn {display: none !important;}

/* 프로필카드 영역 숨김 */
div[data-tistory-react-app="Namecard"] {
	display: none;
}


.mm-bgm {
    position: fixed !important;
    bottom: px !important;  /* 원하는 높이로 조정 */
    right: 5px !important;
    z-index: 99999 !important;  /* 더 높은 우선순위 */
    border: none !important;
    border-radius: 8px !important;
    width: 280px !important;
    height: 200px !important;
    transform: none !important;  /* 다른 변형 무시 */
}

/* 더 구체적으로 지정 */
iframe.mm-bgm {
    bottom: -25px !important;
        right: 12px !important;
}

/* 스크롤바 숨기기 */
::-webkit-scrollbar {
    width: 0px !important;
    background: transparent !important;
}

html, body {
    overflow-x: hidden !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

.mm-bgm iframe {
    bottom: 20px !important;
}

/* 페이징 버튼만 특별 처리 */
.paging a {
    cursor: pointer !important;
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* 모바일에서만 터치 영역 확장 (흔들림 방지) */
@media (max-width: 767px) {
    .paging a {
        padding: 12px !important;
        margin: -10px !important; /* padding보다 살짝 작게 */
    }
    
    /* 페이징 전체 영역 고정 */
    .paging {
        position: relative !important;
        overflow: hidden !important;
    }
}



@media (max-width: 768px) {
    body {
        background-image: url('https://tistory1.daumcdn.net/tistory/7448331/skin/images/KakaoTalk_20250821_114422315_02.jpg') !important;
        background-size: 410px auto !important;
        background-position: center bottom 50px !important;
    }
}

@media (max-width: 768px) {
    #container {
        position: relative !important;
        top: 60px !important; /* 아래로 50px 이동 */
    }
    

  /* 방문자수 위로 올리기 */
    .visitor-widget {
        display: block !important;
        top: 25px !important; /* 더 위쪽으로 */
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 12px !important;
        z-index: 9999 !important;
    }
}
body {
    background-image: 
        url('https://tistory1.daumcdn.net/tistory/7448331/skin/images/59f7a49cd150a50ba51fab63319a1b4b.jpg'),
        url('https://tistory1.daumcdn.net/tistory/7448331/skin/images/KakaoTalk_20250821_100134679.jpg');
  
    background-position: 
        left 150px top 50px,
        right bottom;

    background-repeat: no-repeat, no-repeat;
    background-size: 
        330px auto,
        700px auto;

   background-attachment: fixed, fixed;
}




/* 이미지 관련 모든 간격 제거 - 엔터로 직접 조정 가능하게 */
.article figure.imageblock,
.article figure.imagegridblock,
.article img,
.article span.imageblock {
    margin: 0 !important;
    padding: 0 !important;
}

/* 이미지 직후 요소 간격도 제거 */
.article figure.imageblock + *,
.article figure.imagegridblock + *,
.article img + *,
.article span.imageblock + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 가운데 정렬된 이미지만 가운데 배치 */
figure.imageblock.alignCenter,
figure.imagegridblock.alignCenter {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* 사이드 배너 박스 */
#side-banner {
    position: fixed;
    bottom: 220px;
    left: calc(50% - 650px);
    width: 200px;
    background: #fff;
    border: 1px solid #666;
    box-shadow: 0px 0px 7px #00000077;
    z-index: 100;
}

#side-banner .banner-top {
    background: #fff;
    padding: 8px;
    border-bottom: 1px solid #bbb;
}

#side-banner .title {
    float: left;
    font-size: 11px;
}

#side-banner .button {
    float: right;
}

#side-banner .button .feather {
    width: 11px;
    height: 11px;
    margin-left: 10px;
}

#side-banner .banner-content {
    padding: 10px;
    text-align: center;
}

#side-banner .banner-content img {
    width: 165px;
    height: auto;
    display: block;
    margin: 0 auto 5px auto;
}

#side-banner .banner-content p {
    font-size: 11px;
    line-height: 16px;
    margin: 5px 0;
    text-align: center;
}

#side-banner .banner-content a {
    display: block;
    text-decoration: none;
}

/* 모바일에서 숨기기 */
@media (max-width: 1024px) {
    #side-banner {
        display: none;
    }
}