@charset "utf-8";

/* --- 기본 스타일 리셋 --- */
* {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.5;
    font-family: dotum, sans-serif;
    box-sizing: border-box; /* 레이아웃 계산을 쉽게 하기 위해 추가 */
}

body {
    background-color: /*@background-color*/ #2A2A2A /*@*/;
    font-size: 12px;
}
a { color: #878787; text-decoration: none; }
a:hover { text-decoration: underline; }
hr { display: none; }
input { vertical-align: middle; }
li { list-style-type: none; }


/* =================================================================== */
/* ## 새로운 반응형 레이아웃 ## */
/* =================================================================== */

/* --- 1. PC/데스크탑 레이아웃 (1024px 이상) --- */
#header {
    width: 100%;
    max-width: 1400px; /* 최대 너비 */
    margin: 0 auto;
    text-align: center;
}
#container {
    display: flex;
    max-width: 1400px; /* 최대 너비 */
    margin: 0 auto;
    padding: 0 15px;
}
#footer {
    clear: both;
    margin-top: 20px;
    padding: 13px 0 30px 0;
    text-align: center;
    border-top: 1px solid #8C5015;
}

/* --- 각 영역 너비와 순서 --- */
#sidebarA {
    flex: 0 0 180px; /* 너비 180px 고정 */
    order: 1;
    padding-right: 25px;
}
#content {
    flex: 1 1 auto; /* 남는 공간 모두 차지 */
    order: 2;
    min-width: 0; /* flex 아이템이 줄어들 수 있도록 설정 */
}
#sidebarB {
    flex: 0 0 180px; /* 너비 180px 고정 */
    order: 3;
    padding-left: 25px;
}

/* --- 2. 모바일/태블릿 레이아웃 (1024px 이하) --- */
@media screen and (max-width: 1024px) {
    #container {
        flex-direction: column;
    }
    #sidebarA, #content, #sidebarB {
        order: 0; /* 순서 초기화 */
        flex-basis: 100%;
        padding: 0 10px;
    }
    #sidebarA, #sidebarB {
        margin-top: 40px;
    }
}
/* =================================================================== */


/* --- 기존 디자인 스타일 (레이아웃 제외) --- */

/* 헤더 & 메뉴 */
#header h1 {
    height: /*@title-height*/ 54px /*@*/;
    padding-top: 26px;
    overflow: hidden;
}
#header h1 a {
    color: /*@title-color*/ #EE7600 /*@*/;
    font-weight: normal;
    font-size: /*@title-font-size*/ 30px /*@*/;
    font-family: /*@title-font-family*/ tahoma, dotum /*@*/;
}
#blogMenu { width: 486px; height: 12px; margin: 20px auto; }
#blogMenu li { display: inline; float: left; margin-right: 7px; padding-right: 14px; background: url(images/tab_bar.gif) no-repeat right 1px; color: #6D6E6F; font-size: 11px; line-height: 12px; }
#blogMenu li.last { background: none; margin-right: 0px; padding-right: 0px; }
#blogMenu li a { float: left; display: block; height: 12px; background-repeat: no-repeat; text-indent: -5000px; overflow: hidden; vertical-align: middle; }
#blogMenu .tab_home a { width: 47px; background-image: url(images/tab_home.png); }
#blogMenu .tab_tag a { width: 38px; background-image: url(images/tab_tag.png); }
#blogMenu .tab_media a { width: 51px; background-image: url(images/tab_media.png); }
#blogMenu .tab_location a { width: 69px; background-image: url(images/tab_location.png); }
#blogMenu .tab_guestbook a { width: 51px; background-image: url(images/tab_guestbook.png); }
#blogMenu .tab_admin a { width: 52px; background-image: url(images/tab_admin.png); }
#blogMenu .tab_write a { width: 52px; background-image: url(images/tab_write.png); }
body#tt-body-page #blogMenu .tab_home a { background-image: url(images/tab_home_on.png); }
body#tt-body-tag #blogMenu .tab_tag a { background-image: url(images/tab_tag_on.png); }
body#tt-body-media #blogMenu .tab_media a { background-image: url(images/tab_media_on.png); }
body#tt-body-location #blogMenu .tab_location a { background-image: url(images/tab_location_on.png); }
body#tt-body-guestbook #blogMenu .tab_guestbook a { background-image: url(images/tab_guestbook_on.png); }


/* 콘텐츠 (글, 방명록 등) */
.nonEntry { background-color: #fff; }
#taglog, #localog, #guestbook { padding-bottom: 20px; }
.entry, .entryNotice, .entryProtected { margin-bottom: 20px; padding-bottom: 25px; background-color: #fff; }
.titleWrap { min-height: 102px; padding-bottom: 8px; background-color: #EE7600; }
.titleWrap .info-title { padding: 8px 20px 10px 20px; border-bottom: 1px solid #F8C899; }
.info-title, .info-title a { color: #F8C899; }
.info-title .date { font: 11px verdana; }
.info-title .category { padding-left: 9px; }
.info-title .category, .info-title .category a { font: 11px dotum; }
.titleWrap h2 { padding: 22px 20px 1px 20px; }
.titleWrap h2 a { color: /*@post-title-color*/ #fff /*@*/; font-size: /*@post-title-font-size*/ 16px /*@*/; font-family: /*@post-title-font-family*/ verdana, gulim /*@*/; }
.entrayContentsWrap, .entryNotice .article, .entryProtected .article { padding: 20px; }
.article {
    //color: /*@post-body-color*/ #9F9F9F /*@*/;
		color: #000000; /* 기존의 연한 회색(#9F9F9F)에서 진한 회색으로 변경 */;
    font-size: /*@post-body-font-size*/ 12px /*@*/;
    font-family: /*@post-body-font-family*/ dotum /*@*/;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
}
.article a { color: #000000; }
.article img { max-width: 100%; height: auto; }
.author { color: #C2C2C2; text-align: right; clear:both; }
/* 기타 포스트 관련 스타일들... */
.tagTrail { padding-top: 25px; color: #676767; font: 11px dotum; }
.actionTrail { height: 20px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; }
.actionTrail, .actionTrail a, .actionTrail a span { color: #EE7600; font: bold 12px dotum; }
#paging { margin-top: 20px; text-align: center; }


/* 사이드바 모듈 */
#sidebarA h3.stit, #sidebarB h3.stit { width: 180px; height: 35px; background-repeat: no-repeat; background-position: 0px 20px; text-indent: -5000px; overflow: hidden; }
#category h3 { background-image: url(images/stit_category.gif); }
#tagbox h3 { background-image: url(images/stit_tag.gif); }
#notice h3 { background-image: url(images/stit_notice.gif); }
#recentPost h3 { background-image: url(images/stit_recentpost.gif); }
#recentComment h3 { background-image: url(images/stit_recentcomment.gif); }
#recentTrackback h3 { background-image: url(images/stit_recenttrackback.gif); }
#link h3 { background-image: url(images/stit_link.gif); }
#archive h3 { background-image: url(images/stit_archive.gif); }
#sidebarA li, #sidebarA li a, #sidebarB li, #sidebarB li a { color: #878787; font: 11px/16px dotum; }
.bloger-wrap { width: 160px; padding: 9px; border: 1px solid #444; background-color: #000; display: inline-block;}
#blogImage { float: left; width: 78px; height: 88px; border: 1px solid #8C5015; }
.bloger-desc { float: right; width: 70px; }
#blogDesc { color: #878787; font: 11px/15px dotum; }
#userID { padding-top: 18px; background: url(images/iconBy.gif) no-repeat 0px 6px; color: #EE7600; font: 11px/15px dotum; }
#searchBox { width: 178px; height: 17px; margin: 24px 0 14px 0; border: 1px solid #444; background-color: #19191A; }
#counter { margin: 14px 0 9px 0; }
#calendar { width: 168px; padding: 6px 5px 9px 5px; border: 1px solid #8C5015; }

/* 푸터 */
#footMenu { width: 339px; height: 8px; margin: 0 auto 10px; color: #6C6C6C; }
#copyright, #copyright a { clear: both; color: #7D7D7D; font: 11px dotum; }

/* =================================================================== */
/* ## 깨진 부분 복구 코드 ## */
/* =================================================================== */

/* --- 1. '분류 전체보기' 목록 깨짐 수정 --- */
#searchList ol,
#searchRplist ol {
    border-top: 1px solid #F8C899;
}
#searchList li,
#searchRplist li {
    display: flex; /* flexbox로 아이템 정렬 */
    //justify-content: space-between; /* 양쪽 끝으로 정렬 */
		justify-content: flex-start; /* space-between 대신 flex-start로 변경하여 왼쪽 정렬 */
    padding: 4px 0 2px 0;
    border-bottom: 1px solid #F8C899;
    line-height: 1.8;
}
#searchList li a,
#searchRplist li a {
    color: #676767;
    font-size: 12px;
}
#searchList .date,
#searchRplist .date {
    flex-shrink: 0; /* 날짜가 줄어들지 않도록 설정 */
    padding-left: 20px; /* 제목과의 간격 */
    color: #676767;
}

/* --- 2. 댓글 목록 깨짐 수정 --- */
.comment {
    margin-top: 20px;
}
.commentList {
    padding: 0 10px;
}
.commentList ol, .commentList ul {
    list-style: none;
    padding: 0;
}
.commentList li {
    padding-top: 15px;
    border-top: 1px solid #eee;
    margin-top: 15px;
}
.commentList li:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
.commentList .name { font-weight: bold; color: #7A7A7A; }
.commentList .date { color: #C2C2C2; margin-left: 8px; }
.commentList .control { margin-left: 8px; }
.commentList .control a { margin-right: 5px; }
.commentList p { padding: 7px 0 8px 0; color: #9F9F9F; }
.commentList ul { margin-left: 20px; margin-top: 15px; } /* 대댓글 들여쓰기 */

/* --- 3. 댓글 쓰기 폼 스타일 수정 --- */
.commentWrite { margin-top: 30px; }
.commentWrite .info-write { padding: 5px 0; border-top: 1px solid #EE7600; border-bottom: 1px solid #EE7600; }
.commentWrite .info-write input { border: 1px solid #ccc; padding: 3px; margin-right: 10px; }
.commentWrite textarea { width: 100%; border: 1px solid #ccc; padding: 8px; margin-top: 10px; }
.commentWrite .button { text-align: right; margin-top: 10px; }
.commentWrite .submit { background: #EE7600; color: #fff; border: none; padding: 8px 15px; cursor: pointer; }