@charset "utf-8";

/* 핵심 브랜딩 컬러 및 폰트 시스템 설정 */
:root { 
    --deep-ink: #102a45; /* 아서시오 먹청색 */
    --book-text: #2c3e50; /* 가독성을 높이는 부드러운 먹색 */
}

/* 기본 공통 해제 및 초기화 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "돋움", Dotum, sans-serif;
    font-size: 14px;
    line-height: 1.85;
    color: var(--book-text);
    margin: 0;
    padding: 0;
    background-color: #f4f6f9;
}
a { color: var(--book-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 2단 메인 프레임 레이아웃 배치 */
#container {
    width: 1000px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
#wrapBody {
    display: flex; 
    width: 1000px;
    background-color: #ffffff;
}

/* 상단 헤더 영역 (먹청색 격조 확장) */
#header {
    width: 1000px;
    height: 110px;
    position: relative;
    background-color: var(--deep-ink); /* 배경을 아서시오 먹청색으로 선포 */
    border-bottom: 1px solid #143557;
}
.wrapBlogTitle { padding-top: 35px; text-align: center; }

/* 타이틀 텍스트를 순백색으로 반전 */
.wrapBlogTitle h1 a {
    color: #ffffff !important; /* 글씨를 흰색으로 강제 고정 */
    font-family: "바탕", Batang, serif;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: -1px;
}
.user_date { position: absolute; left: 20px; bottom: 15px; color: #94a3b8; font-size: 11px; font-family: sans-serif; }
#counter { position: absolute; right: 20px; bottom: 15px; font-size: 11px; font-family: sans-serif; }
#counter ul { list-style: none; margin:0; padding:0; display: flex; }
#counter ul li { margin-left: 15px; color: #94a3b8; }

/* 왼쪽 통합 사이드바 (상단 헤더와 자연스럽게 면 결합) */
#sidebar {
    width: 240px;
    background-color: var(--deep-ink); 
    padding: 25px 15px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;
    border-top: 1px solid #143557;
}

/* 대표 이미지 고정 */
#blogImage {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto 15px auto !important;
    overflow: hidden !important;
    border-radius: 4px;
}
#blogImage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.blogIntro { text-align: center; margin-bottom: 25px; color: #94a3b8; }
#userID { font-weight: bold; color: #f1f5f9; margin-bottom: 5px; }
#blogDesc { font-size: 12px; line-height: 1.4; padding: 0 10px; }

/* 🛠️ [사이드바 혁신] 내부 서브 모듈 리스트 조밀도 타이포그래피 정돈 */
.sb-module { margin-bottom: 22px; border-bottom: 1px solid #1e3a5f; padding-bottom: 15px; }
.sb-module h3 { color: #f1f5f9; font-size: 11px; text-transform: uppercase; margin: 0 0 8px 0; letter-spacing: 1px; font-weight: bold; }
.sb-module ul { list-style:none; margin:0; padding:0; }

/* 최근글, 최근댓글 항목 간 여백축소 및 가독성 압축 */
.sb-module ul li { 
    padding: 3px 0 !important; /* 위아래 패딩을 5px에서 3px로 축소 */
    font-size: 11.5px !important; /* 폰트를 살짝 압축하여 주석 느낌 부여 */
    line-height: 1.4 !important; /* 줄간격을 조밀하게 조정 */
    border-bottom: 1px dotted #152e4d; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.sb-module ul li:last-child { border-bottom: none; }
.sb-module a { color: #94a3b8; }
.sb-module a:hover { color: #f1f5f9; }

/* 🛠️ [티스토리 전용 코딩] 카테고리 트리 메뉴 간격 및 링크 라인 조밀화 */
.sb-module .link_item, .sb-module .link_sub_item { 
    padding: 2px 0 !important; 
    display: block; 
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}
.sb-module .category_list li { border-bottom: none !important; padding: 0 !important; }
.sb-module .category_list ul ul { padding-left: 10px !important; margin-top: 2px; }
.sb-module .c_cnt { font-size: 10px; color: #38bdf8; font-family: sans-serif; }

/* 검색 박스 */
#searchBox .cnt { display: flex; background: #1e3a5f; border-radius: 4px; padding: 3px; }
#searchBox input[type="text"] { background: none; border: none; color: #fff; width: 140px; padding: 4px; font-size: 11px; }
#searchBox .submit { background: #2c4a6f; border: none; color: #fff; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; }

/* 태그 구름 (편집장님 의견대로 기존 가독성 유지) */
#tagbox ul { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 0; }
#tagbox ul li { display: inline-block; padding: 0; margin: 0; border: none; }
#tagbox ul li a { 
    display: inline-block; 
    padding: 3px 7px; 
    border-radius: 3px; 
    background-color: #1e3a5f; 
    font-size: 11px !important; 
    color: #94a3b8 !important; 
}
#tagbox ul li a:hover { background-color: #38bdf8; color: var(--deep-ink) !important; font-weight: bold; text-decoration: none; }
#tagbox ul li a.cloud1 { color: #f1f5f9 !important; font-weight: bold; }
#tagbox ul li a.cloud2 { color: #cbd5e1 !important; }

/* 🛠️ 달력 모듈 조밀화 매커니즘 */
.cal_month { text-align: center; margin-bottom: 6px; font-weight: bold; color: #fff !important; }
.cal_month a { color: #38bdf8 !important; margin: 0 5px; }
#txtMonth { color: #fff !important; font-size: 13px; }
.tt-calendar { width: 100%; color: #94a3b8; font-size: 11px; text-align: center; }
.tt-calendar th { color: #38bdf8; font-weight: normal; padding-bottom: 3px; }
.tt-calendar td { padding: 1px 0 !important; } /* 달력 날짜 칸들의 상하 여백 압축 */
.cal_day4 { background: #38bdf8; color: var(--deep-ink) !important; font-weight: bold; border-radius: 2px; } 

/* 2단: 우측 본문 영역 */
#content {
    width: 760px;
    background-color: #ffffff;
    padding: 0 50px 50px 50px; 
    box-sizing: border-box;
}
.wrapContentTop { border-bottom: 1px solid #f1f5f9; padding: 15px 0; margin-bottom: 30px; }
#blogMenu ul { list-style: none; margin: 0; padding: 0; display: flex; }
#blogMenu li { margin-right: 20px; font-weight: bold; }
#blogMenu li a { color: var(--deep-ink); }

/* 본문 아티클 정렬 */
.entry { margin-bottom: 5px; }
.wrapEntryHead { font-size: 12px; color: #64748b; margin-bottom: 15px; }
.wrapEntryHead .category a { color: #38bdf8; font-weight: bold; }
.titleWrap h2 { margin: 0 0 30px 0; font-size: 26px; font-family: "바탕", Batang, serif; font-weight: bold; line-height: 1.4; }
.titleWrap h2 a { color: var(--deep-ink); }

/* 본문 인쇄물 스타일 적용 */
.article { 
    font-size: 16px; 
    line-height: 1.95; 
    color: #2c3e50; 
    text-align: justify; 
    text-justify: inter-character;
} 

/* 에디터 자동 개행 시스템 들여쓰기 가이드 */
.article p, .entry-content p, .entry-content div { 
    text-indent: 1.6em !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    word-break: break-all; 
}

/* 벽면에 딱 붙는 문단 규칙 */
.entry-content h1 + p, .entry-content h2 + p, .entry-content h3 + p, .entry-content h4 + p,
.entry-content .tt_article_useless_p_margin + p,
.entry-content blockquote + p,
.article p:first-child,
.entry-content p:first-child,
.entry-content [data-ke-size] p:first-child {
    text-indent: 0px !important;
}

/* 특수 오브젝트 정렬 해제 */
.entry-content img, .entry-content figure, .entry-content table, .entry-content blockquote, .entry-content pre, .article p:empty, .entry-content p:empty {
    text-indent: 0px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}
.entry-content p:empty br, .entry-content p[data-ke-size] br:only-child {
    margin-right: 0px !important;
}

.author { text-align: right; color: #94a3b8; font-size: 11px; margin-top: 40px; }

/* 하단 푸터 */
#footer {
    width: 1000px;
    background-color: #0f172a;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #1e293b;
}
#copyright, #copyright a { color: #64748b; font-size: 11px; }

/* 공지사항 상자 디자인 정교화 */
.notice-entry {
    background-color: #f8fafc !important; 
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid #102a45 !important; 
    padding: 20px !important;
    margin-bottom: 40px !important;
    border-radius: 4px !important;
}
.notice-badge {
    background-color: #102a45 !important; 
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
}

/* 공지사항 제목 글자 잘림 방지 및 줄바꿈 아키텍처 연동 */
.notice-entry h3 {
    margin: 0 !important; 
    font-size: 15px !important; 
    line-height: 1.5 !important;
    white-space: normal !important;     
    overflow: visible !important;       
    text-overflow: clip !important;     
    word-break: break-all !important;   
}
.notice-entry h3 a { color: #102a45 !important; font-weight: bold !important; text-decoration: none !important; }
.notice-entry h3 a:hover { text-decoration: underline !important; }

/* 댓글 영역 렌더링 스펙 */
.comment-area { margin-top: 50px; padding-top: 30px; border-top: 1px dashed #cbd5e1; }
.comment-area h3 { font-size: 14px; color: var(--deep-ink); margin-bottom: 20px; font-weight: bold; }
.comment-area ul { list-style: none; padding: 0; margin: 0; }
.comment-area li { padding: 15px 0; border-bottom: 1px solid #f1f5f9; }
.comment-area .name { font-weight: bold; color: var(--deep-ink); margin-right: 10px; }
.comment-area .date { font-size: 11px; color: #94a3b8; }
.comment-area p { margin: 8px 0 0 0; font-size: 13px; color: #334155; text-indent: 0 !important; }
.comment-form { margin-top: 30px; }
.comment-form textarea { width: 100%; height: 80px; border: 1px solid #cbd5e1; padding: 10px; box-sizing: border-box; border-radius: 4px; resize: none; }