@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');/* 카테고리 일본어 폰트 */
@font-face {
    font-family: 'Cafe24NyangiBlack';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/Cafe24Nyangi-B-v1.0.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
} /* 카테고리 영어 폰트 */

#menubar_wrapper,
.container_postbtn,
.another_category
{ display: none !important; }

* {     
    box-sizing: border-box;
}

html,
.container { height: 100%; }
body { margin: 0; font-family: '굴림'; font-size: 11px; background-color: var(--color-bg); background-image: var(--image-bg); overflow-y: scroll; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } 
a, a:link, a:visited, a:hover, a:active, a:focus {
    color: inherit !important;
    text-decoration: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* 기본설정 */
::-webkit-scrollbar {width:16px;height:16px;background:#c0c0c0;display:none;}
::-webkit-scrollbar-track{ background-color: #e7e7e7;
}
::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
::-webkit-scrollbar-thumb:hover{background-color:#cfcfcf;}
::-webkit-scrollbar-button{width:16px;height:16px;background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;}
::-webkit-scrollbar-corner{background:#dfdfdf;}
::-webkit-scrollbar-button:vertical:single-button{
    width: 16px;
    height: 16px;
    display: block;
    padding: 0;
    margin: 0;
    background-color: #dfdfdf;
    background-repeat: no-repeat;
    box-shadow:
        inset -1px -1px #0a0a0a,
        inset 1px 1px #fff,
        inset -2px -2px grey,
        inset 2px 2px #dfdfdf;
}
::-webkit-scrollbar-button:vertical:single-button:decrement{
    background-image:
        linear-gradient(135deg, transparent 50%, #000 50%),
        linear-gradient(-135deg, transparent 50%, #000 50%);	
    background-size: 4px 4px, 4px 4px;
    background-position: 4px 6px, 7px 6px; /* 16x16 기준 중앙 */
}
::-webkit-scrollbar-button:vertical:single-button:increment{
    background-image:
        linear-gradient(45deg, transparent 50%, #000 50%),
        linear-gradient(-45deg, transparent 50%, #000 50%);
    background-size: 4px 4px, 4px 4px;
    background-position: 4px 6px, 7px 6px; /* 16x16 기준 중앙 */
}

/* 접은글 */
div[data-ke-type='moreLess'] .btn-toggle-moreless, 
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless { font-size: inherit; }
div[data-ke-type="moreLess"] .btn-toggle-moreless::before { content: '+ '; }
div[data-ke-type="moreLess"].open .btn-toggle-moreless::before { content: '- '; }
.moreless-content { border: 1px solid black; padding: 14px; }

blockquote, blockquote p { font-size: inherit !important; line-height: inherit !important; border: 1px solid black; padding: 14px; margin: 14px 0; }
.paging { text-align: center; }
.paging > a { padding: 3px;}

.container   { width: 600px; background: none; border-radius: 8px; box-shadow: none; overflow:hidden; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; min-height: 100vh;  }
.content-wrap { padding: 15px 0; overflow-y: visible; }
body::-webkit-scrollbar { display: block !important; }
#copyright { position: fixed; bottom: 10px; right: 10px; font-size: 10px; }

.title-top { color: white; background: #3366FF; padding: 6px 9px; }
.article-border { border: 4px solid #3366FF; border-top: 0; }
.button-retro { background: #e8e8e8; border: none; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; box-sizing: border-box; color: transparent; padding: 4px 12px; text-shadow: 0 0 #222; }
.button-retro:active { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; text-shadow: 1px 1px #222; }
.input-retro { background-color: white; width: 100%; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; margin: 0; resize: none; border: none; font-family: '굴림' !important; font-size: 11px; }
.input-retro:focus { outline: none; }
.article-padding { padding: 8px 13px; line-height: 1.5; } 

/* 헤더 */
.header #header-title,
.header #header-content { background-color: var(--color-cnt-bg); border-right: 2px solid rgba(0, 0, 0, 0); position: relative; }
.header #header-title { display: inline-block; border-radius: 0 10px 0 0; border-right: 2px solidblack; padding: 5px 10px 5px 0; }
.header #header-blog-title { margin-left: 110px; }
.header #header-content { height: 120px; display: flex; width: 100%; align-items: center; }
.header #header-logo { position: absolute; bottom: 5px; width: 100px; }
.header #header-logo img { width: 100%; }

#header-img { flex: 7; background-color: #f0f0f0; width: 100%; height: 100%; overflow: hidden; display: flex; }
#header-img a { width: 100%; display: flex; }
#header-img img { width: 100%; object-fit: cover; object-position: center; }    
#header-profile { flex: 3; background-color: var(--color-prof-bg); height: 100%; padding: 10px; font-size: 11px; display: flex; flex-direction: column; justify-content: flex-end; }

.sidebar { width: 160px; min-height: 100%; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; background-color: var(--color-cnt-bg);  }
.mobile-sidebar { display: none; }
.sidebar-menu { font-family: 'Cafe24NyangiBlack';}
.sidebar-menu ul { list-style: none; padding: 0; width: 100%; margin: 0; }
.category { font-size: 15px; }
.category-header { font-size: 11px; padding: 10px 13px; padding-top: 30px; font-family: '굴림'; border-radius: 13px; background-color: var(--color-category-header-bg); background-image: var(--image-category-header-bg); background-size: cover; background-position: center;
 }
.link_tit, .c_cnt { display: none; }
ul.category_list > li { display: block; color: white; }
ul.category_list a.link_item { display: inline-block; padding: 8px 12px; text-shadow: 1px 1px 0 #8f8f8f, 2px 2px 0 #313131; }
ul.sub_category_list li { padding: 4px 8px; margin-left: 10px; text-shadow: 1px 1px 0 #8f8f8f, 2px 2px 0 #313131; }
.main-content { background-color: var(--color-cnt-bg); min-width: 0; overflow: hidden; display: flex; min-height: 800px; align-items: stretch; border: 2px solid; border-color: transparent rgba(0, 0, 0, 0) black transparent; }
.thumbnail,
span#category { display: none; }
.contents_style iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 100%; }

/* 배너 */
.banner { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.banner-img { width: 100%; aspect-ratio: 5 / 1; display: flex; overflow: hidden; }
.banner-img img { width: 100%; object-fit: cover; object-position: center; }

/* 캘린더 */
.calendar { width: 100%; max-width: 240px; background: rgb(255, 255, 255); font-family: 'Gulim', sans-serif; padding: 4px; user-select: none;margin-top: auto; }
.cal-header { background: #E2F0D9; display: flex; justify-content: space-between; align-items: center; padding: 4px; border-bottom:1px solid #ccc; font-weight: bold; font-size: 13px; }
.cal-header button { background: #E2F0D9; border: 1px solid #777; cursor: pointer; font-size: 10px; padding: 1px 4px; }
.cal-table { width: 100%; border-collapse: collapse; margin-top: 4px; table-layout: fixed; }
.cal-table th, .cal-table td { border: 2px solid #FFCCFF; width: calc(100% / 7); height: 35px; text-align: center; vertical-align: top;   font-size: 11px; padding-top: 2px; }
.cal-table th { background: #f0f0f0; height: 20px; }
.sun { color: #FF4D4D; }
.sat { color: #4D4DFF; }
.is-today { background-color: #FFCCFF !important; font-weight: bold; }
.day-num { display: block; }
.day-sub { font-size: 8px; color: #999; transform: scale(0.8); display: block; margin-top: -2px; }

/* 빈글 */
.empty p { margin: 0; }

/* 커버 */
.homecover { width: 100%; }

/* 커버 - 글 */
.homecover { width: 100%; }
.homecover section.section-cover { width: 100% !important; margin: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.cover-article .cover-title { padding: 6px 9px; }
.cover-article #article { gap: 10px; }
.cover-article .element { border: 4px solid #3366FF; border-top: 0; padding: 0; }
.cover-article .cover-content { background-color: #F9F9C3; padding: 10px 13px; /* flex: 1; display: flex; flex-direction: column; */ }
.cover-article .cover-content img { max-width: 100%; }

/* 커버 - 목록 */
.cover-type { background-color: #F9F9C3; display: flex; flex-direction: column; width: 100%; }
.cover-type .cover-title { background-color: rgb(241, 241, 183); padding: 4px 7px; }
body:has(.homecover) .inline { display: none !important; }
.cover-type .element { padding: 0; }
.cover-type .cover-content { padding: 10px 12px; max-width: 100%; }

/* 커버 - 갤러리 */
.cover-gallery a.gallery { overflow: hidden; } 
.cover-gallery a.gallery .thumbnail { background-color: #65B2FF; width: 100%; aspect-ratio:1 / 1; min-width: 0; min-height: 0; display: block; position: relative; overflow: hidden; margin: 0; padding: 0; }
.cover-gallery .cover-content { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } 
.cover-gallery .cover-thumbnail { position: relative; width: 100%; aspect-ratio: 1 / 1; background-color: #65B2FF; overflow: hidden; }
.cover-gallery .cover-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;  } 
.cover-gallery a.gallery .listcontent { margin: 5px 0; } 
.cover-gallery a.gallery #title,
.cover-gallery a.gallery #category,
.cover-gallery a.gallery #summary { display: none; }


/* 본문 */
.content { width: 100%; height: auto; padding: 14px; min-width: 0; margin: 0; position: static; top: auto; left: auto; transform: none; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.inline { overflow: visible; background-color: #F9F9C3; display: flex; flex-direction: column; flex: 1; padding: 8px 16px; }
.article { height: auto; overflow: visible; display: flex; flex-direction: column; flex: 1; }
.article > .title p { margin: 0; }
.note .title { margin: 10px 0; }

.note { width: 100%; height: auto; overflow-y: visible; }
.note .tt_article_useless_p_margin { background-color: #F9F9C3; flex: 1; }
.note p { margin: 0; }

/* 관련글 */
ul.list_related { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 5px 0; padding: 0; } 
.date_related { opacity: 0.6; }

/* 비밀글 */
.password .passwordform { padding: 10px 0; }
.password .protected-form input { width: auto; padding: 4px 6px; }
.password .protected-form input:focus { outline: none; }
.password .protected-form button { background: #e8e8e8; border: none; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; box-sizing: border-box; color: transparent; padding: 4px 12px;text-shadow: 0 0 #222; }
.password .protected-form button:active { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset2px 2px grey; text-shadow: 1px 1px #222; }
.article:has(.password) { flex: none; }

.listcontent #category,
.listcontent #summary { display: none; }

/* 리스트형 */
a.list #date { display: none; }
.element a.list { display: block; }
p.categoryname { display: block; padding: 5px 0; margin: 0; }
p.listcontent { margin: 0; padding: 6px 0; }

/* 갤러리형 */
a.gallery { overflow: hidden; ; } 
a.gallery .thumbnail { background-color: #65B2FF; width: 100%; aspect-ratio:1 / 1; min-width: 0; min-height: 0; display: block; position: relative; overflow: hidden; margin: 0; padding: 0; }
.gallery .element { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } 
.gallery .thumbnail img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;  } 
a.gallery .listcontent { margin: 5px 0; } 
a.gallery #title,
a.gallery #category,
a.gallery #summary { display: none; }

/* 댓글 */
.tt_box_namecard,
.tistoryProfileLayerTrigger { display: none; }
.rp-content { margin-top: 15px; }
.rp-input { width: 100%; margin-top: 8px; }
.rp-input:focus { outline: none; }
.secretWrap { display: flex; align-items: center; }
.rp-guest { width: auto; padding: 3px 5px; }
.rp-guest:focus { outline: none; }
.comment-content { display: flex; gap: 10px; }
.comment-content input[type="submit"] { background-color: transparent; border: none; margin-left: auto; }
.comment-content input[type="submit"]:focus { outline: none; }
.commentWrite textarea { padding: 12px; height: 60px; }

.rp_general, 
.rp_admin, 
.rp_secret { display: flex; flex-direction: column; gap: 8px; }
.comment-list { padding: 5px; }
.comment-list ul { padding: 0; list-style: none;}
.comment-list .name { padding: 5px 0; }
.comment-list .date a  { display: none; }
.comment-list .control { display: flex; gap: 5px; color: gray; }

.re-rp { padding: 10px 25px; }


/* 방명록 */
.guestinput { padding: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.guestinput textarea { padding: 12px;}
.guestinfo { display: flex; gap: 10px; align-items: center; }
.guestinfo input { width: 140px; font-family: '굴림'; padding: 4px 6px; }
#guestbutton { margin-left: auto; background-color: transparent; border: none; }

.guest_general, 
.guest_admin { display: flex; flex-direction: column; gap: 8px; }
.guestlist { padding: 10px; }
.guestlist ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 25px; }
.guestlist .name { padding: 5px 0; }
.guestlist .date a  { display: none; }
.guestlist .control { display: flex; gap: 5px; color: gray; }
p.guestdesc { margin: 0; }

.guestreplylist { padding: 10px 25px; }
.guestreplylist ul { list-style: none; padding: 0; }

.searchList.gallery .thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; background: none; margin: 0; padding: 0; }
.searchList.gallery .thumbnail:has(img[src]:not([src=""])) { background: none !important; }
.searchList.gallery .thumbnail img[src=""],
.searchList.gallery .thumbnail img:not([src]) { display: none; }



/* 모바일 */
@media screen and (max-width: 900px) {
    html, body { height: auto;}
    body { max-height: none; }
    ::-webkit-scrollbar { display: none !important; }
    .container { width: auto; min-height: 100vh; flex-direction: row; justify-content: flex-start; border-radius: 0; overflow: scroll; }
    .content { padding: 8px 9px; }
    .content-wrap { display: flex; flex-direction: column; min-height: 100vh; overflow: scroll; padding: 0; width: 100%; }
    .main-content { flex: 1; min-height: 0; align-items: stretch; }

    .sidebar { width: 25%; }

    .commentWrite { display: grid; grid-template-columns: 48px 1fr; column-gap: 8px; row-gap: 8px; align-items: center; }
    .commentWrite textarea, .commentWrite .comment-content { grid-column: 1 / -1; }
    .commentWrite span { white-space: nowrap; }
    .commentWrite input[type="text"], .commentWrite input[type="password"] { width: 140px; min-width: 0; }

    .guestinfo { display: grid; grid-template-columns: 48px 1fr; column-gap: 8px; row-gap: 8px; align-items: center; }
    .guestinfo label { white-space: nowrap; }
    .guestinfo input { min-width: 0; }
}