/* =============================================
   커서
   ============================================= */
* {
    cursor: url('https://cdn.cursors-4u.net/previews/small-grey-outline-pointer-6a97f823-32.webp') 32 32, auto;
}
 
 
/* =============================================
   폰트 정의
   ============================================= */
@font-face {
    font-family: 'IBMPlexJP';
    src: url('https://fastly.jsdelivr.net/gh/googlefonts/ibm-plex-sans-jp/fonts/otf/IBMPlexSansJP-Regular.otf') format('opentype');
    font-weight: normal;
    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FF9F, U+4E00-9FAF;
}
 
@font-face {
    font-family: 'IBMPlexJP';
    src: url('https://fastly.jsdelivr.net/gh/googlefonts/ibm-plex-sans-jp/fonts/otf/IBMPlexSansJP-Bold.otf') format('opentype');
    font-weight: 700;
    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FF9F, U+4E00-9FAF;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}
 
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}
 
 
/* =============================================
   리셋 & 기본
   ============================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'IBMPlexJP', 'S-CoreDream', sans-serif;
}
 
body {
    background: #fff;
    color: #1a1a1a;
    font-size: 13px;
    letter-spacing: -0.8px;
    -webkit-font-smoothing: antialiased;
}
 
a {
    text-decoration: none;
    color: inherit;
}
 
 
/* =============================================
   레이아웃
   ============================================= */
#container {
    display: flex;
}
 
#sidebar {
    width: 250px;
    padding: 80px 40px;
    position: fixed;
    height: 100vh;
    border-right: 1px solid #f2f2f2;
    background: #fff;
}
 
#main {
    margin-left: 250px;
    flex: 1;
    padding: 50px 60px;
    max-width: 900px;
    margin-right: auto;
    text-align: left;
}
 
 
/* =============================================
   사이드바
   ============================================= */
.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 20px;
}

 
.blog-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

 .blog-subtitle {
  font-size: 0.75rem;
  color: #aaa;
  margin-top: -40px;  /* 음수로 위로 당기기 */
  text-align: center;
}
.side-menu li {
    list-style: none;
    font-size: 0.70rem;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    color: #999;
}
 
/* 카테고리 토글 (JS 없이 체크박스로 작동) */
#cat-trigger {
    display: none;
}
 
.cat-list-inner {
    display: none;
    padding-left: 15px;
    margin-top: 10px;
}
 
#cat-trigger:checked ~ .cat-list-inner {
    display: block;
}
 
.cat-toggle-label {
    cursor: pointer;
    display: block;
    color: #999;
    margin-bottom: 10px;
}
 
/* 카테고리 내부 링크 */
.cat-list-inner ul {
    list-style: none;
    padding-left: 0;
}
 
/* 카테고리 전체 통일 */
.cat-list-inner li {
    margin-bottom: 5px;
    font-size: 0.70rem; /* side-menu li와 동일하게 */
}

.cat-list-inner > ul > li > a {
    font-size: 0.70rem;
    color: #666;
}

/* 서브 카테고리는 살짝만 작게 */
.cat-list-inner ul li ul.sub_category_list li a {
    font-size: 0.65rem;
    color: #aaa;
    font-weight: 300;
    padding: 2px 0;
    transition: all 0.2s ease-in-out;
}
/* 메인 카테고리 링크 */
.cat-list-inner > ul > li > a {
    font-size: 13px;
    color: #666;
}
 
/* 서브 카테고리 */
.cat-list-inner ul li ul.sub_category_list {
    margin-left: 5px;
    padding-left: 12px;
    border-left: 1px solid #eee;
    margin-top: 5px;
    margin-bottom: 10px;
}
 
.cat-list-inner ul li ul.sub_category_list li a {
    font-size: 10px;
    color: #aaa;
    font-weight: 300;
    padding: 2px 0;
    transition: all 0.2s ease-in-out;
}
 
.cat-list-inner ul li ul.sub_category_list li a:hover {
    color: #333;
    padding-left: 8px;
}
 
 
/* =============================================
   홈 메인 이미지
   ============================================= */
.main-visual-home {
    display: none;
    width: 100%;
    max-width: 800px;
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
}
 
.main-visual-home img {
    width: 100%;
    height: auto;
    display: block;
}
 
body#tt-body-index .main-visual-home {
    display: block;
}
 
.home-notice-text {
    margin-top: 15px;
    font-size: 10px;
    color: #666;
    text-align: center;
    letter-spacing: -0.5px;
}
 
 /* 기본적으로 숨기기 */
.main-visual-home {
  display: none;
}

/* 홈일 때만 보이기 */
body#home .main-visual-home {
  display: block;
}
/* =============================================
   페이지별 섹션 표시 제어
   ============================================= */
.section-home,
.section-list,
.section-article,
.notice-list-wrap {
    display: none;
}
 
body#tt-body-index .section-home { display: block; }
body#tt-body-notice .notice-list-wrap  { display: block; }
body#tt-body-category .section-list,
body#tt-body-archive .section-list     { display: block; }
body#tt-body-page .section-article,
body#tt-body-content .section-article,
body#tt-body-guestbook .section-article { display: block; }
body#tt-body-search .section-list      { display: block; }
 
 
/* =============================================
   글 목록
   ============================================= */
.list-top-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}
 
.list-thumb {
    width: 80px;
    height: 80px;
    min-width: 80px;
    background: #eee;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
 
.list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.list-title-box {
    display: flex;
    flex-direction: column;
}
 
.category-name {
    font-size: 1.6rem;
    font-weight: 300;
    margin: 0 0 5px 0;
    color: #1a1a1a;
    line-height: 1.2;
}
 
.list-total {
    font-size: 0.9rem;
    color: #888;
    font-weight: 300;
}
 
/* 글 목록 리스트 */
.post-ul {
    counter-reset: post-counter;
    border-top: 1px solid #f5f5f5;
    list-style: none;
}
 
.post-ul li {
    counter-increment: post-counter;
}
 
.post-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
    border-bottom: 1px solid #f5f5f5;
}
 
.post-sharp {
    width: 15px;
    font-size: 0.8rem;
    text-align: center;
    color: #333;
    font-weight: 700;
}
 
.post-sharp::before {
    content: counter(post-counter);
}
 
.post-circle {
    width: 32px;
    height: 32px;
    background: #222;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
 
.post-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.post-title {
    font-size: 0.95rem;
    font-weight: 500;
    flex: 1;
    color: #111;
}
 
.post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #ccc;
}
 
.post-date {
    font-size: 0.75rem;
    width: 80px;
}
 
/* 검색 결과 없음 */
.search-empty {
    text-align: center;
    padding: 80px 0;
    color: #999;
    font-size: 1rem;
    line-height: 1.6;
}
 
 
/* =============================================
   페이지네이션
   ============================================= */
.pagination-final {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    gap: 12px;
}
 
.pagination-final > *,
.pagination-final a,
.pagination-final b,
.pagination-final strong,
.pagination-final span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #666;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
}
 
.pagination-final .selected,
.pagination-final b,
.pagination-final strong {
    background-color: #000;
    color: #fff;
}
 
.pagination-final a:hover {
    background-color: #333;
    color: #fff;
}
 
 
/* =============================================
   글 본문 / 방명록 공통 박스
   ============================================= */
.black-header-box {
    background: #1a1a1a;
    padding: 20px 30px;
    border-radius: 20px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 800px;
}
 
.black-header-box h1 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
}
 
.gray-content-box {
    width: 100%;
    max-width: 800px;
    background: #f9f9f9;
    padding: 40px;
    border-radius: 30px;
    min-height: 500px;
    line-height: 1.7;
    font-size: 0.95rem;
    color: #333;
}
 
/* 굵은 폰트가 필요한 요소 */
.blog-title a,
.category-name,
.post-title,
.post-sharp,
.black-header-box h1 {
    font-weight: 600;
}
 
 
/* =============================================
   방명록
   ============================================= */
.guest-write-box {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
}
 
.guest-write-box textarea {
    width: 100%;
    height: 100px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #eee;
    margin: 10px 0;
    resize: none;
    font-family: inherit;
}
 
.guest-submit button {
    background: #1a1a1a;
    color: #fff;
    padding: 10px 25px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}
 
.guest-history-area ul {
    list-style: none;
    margin-top: 30px;
}
 
.guest-history-area li {
    padding: 25px 0;
    border-bottom: 1px solid #f2f2f2;
}
 
.guest-history-area .name {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
    display: block;
    margin-bottom: 8px;
}
 
.guest-history-area .date {
    font-size: 0.85rem;
    color: #aaa;
}
 
.guest-history-area p {
    line-height: 1.6;
    color: #555;
    font-size: 1rem;
}
 
 
/* =============================================
   보호글
   ============================================= */
.protected_form {
    padding: 100px 20px;
    text-align: center;
}
 
.protected_form p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 25px;
}
 
.protected-input-form {
    display: flex;
    justify-content: center;
    gap: 10px;
}
 
.protected-input-form input,
.protected_form input[type="password"] {
    width: 200px;
    padding: 12px 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    outline: none;
    transition: 0.2s;
}
 
.protected-input-form input:focus,
.protected_form input[type="password"]:focus {
    border-color: #1a1a1a;
}
 
.protected-input-form button,
.protected_form button,
.protected_form input[type="submit"] {
    padding: 12px 25px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}
 
.protected-input-form button:hover,
.protected_form button:hover,
.protected_form input[type="submit"]:hover {
    background: #444;
}
 
 
/* =============================================
   검색창
   ============================================= */
.search-box {
    display: none;
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    gap: 10px;
}
 
body#tt-body-index .search-box {
    display: flex;
}
 
.search-box input,
.list-search-box input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    font-size: 0.85rem;
    outline: none;
    transition: 0.2s;
}
 
.search-box input:focus,
.list-search-box input:focus {
    border-color: #1a1a1a;
    background-color: #fafafa;
}
 
.search-box button,
.list-search-box button {
    padding: 0 25px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}
 
.search-box button:hover,
.list-search-box button:hover {
    background: #333;
}
 
.list-search-box {
    width: 100%;
    max-width: 800px;
    margin-top: -10px;
    margin-bottom: 30px;
    display: flex;
    gap: 8px;
}