@charset "utf-8";
/* 반드시 들어가야 하는 스타일 시작 */

[data-ke-type] {
    all: unset !important; /* 카카오 에디터에서 멋대로 붙이는 모든 스타일을 무시하도록 설정 */
}


/* 라이트 모드 (기본) 변수 */
:root {
    --sidebar-width: 250px; /* 원하는 사이드바 너비로 설정 */
    --background-color: #232323;
    --text-color: #A5A5A5;
    --border-color: #EAEAEA;
    --secondary-text: #666666;
    --hover-color: #990099;
    --selected-color: #EAEAEA;
    --link-color: #0055FF;
    --title-color: #A5A5A5;
    --article-background: #232323;
    --input-background: #DEDEDE;
    --category-text: #C0C0C0;
    --calendar-day: #CCCCCC;
    --calendar-today: #CCCCCC;
    --quote-color: #C0C0C0;
    --codeblock-background: #2D2D2D; /* 코드 블록 배경 */
    --highlight-background: #444444; /* 강조 배경 */
    --highlight-border: #D4D4D4;
    --accent-color: #C98500;
    --dark-mode-button-color: rgba(234,234,234, 0.5);
    --dark-mode-button-text-color:rgba(102,102,102, 1);
}

/* 시스템 다크모드 설정 감지 */
@media (prefers-color-scheme: dark) {
    :root {
    --background-color: #121212; /* 깊은 어두운 배경 */
    --text-color: #B3B3B3; /* 살짝 어두운 텍스트 */
    --border-color: #3A3A3A; /* 은은한 경계선 */
    --secondary-text: #888888; /* 보조 텍스트 */
    --hover-color: #BB86FC; /* 다크 모드에 어울리는 강조 색 */
    --selected-color: #2A2A2A; /* 선택된 요소 배경 */
    --link-color: #BB86FC; /* 다크 모드에 맞춘 링크 색 */
    --title-color: #D1D1D1; /* 제목 색상 */
    --article-background: #1C1C1C; /* 문서 배경색 */
    --input-background: #333333; /* 입력창 배경색 */
    --category-text: #A0A0A0; /* 카테고리 텍스트 */
    --calendar-day: #777777; /* 캘린더 평일 색 */
    --calendar-today: #BB86FC; /* 캘린더 오늘 색 */
    --quote-color: #909090; /* 인용문 색상 */
    --codeblock-background: #2D2D2D; /* 코드 블록 배경 */
    --highlight-background: #444444; /* 강조 배경 */
    --highlight-border: #BB86FC; /* 강조 경계 */
    --accent-color: #FFB300; /* 다크 모드용 포인트 색 */
    --dark-mode-button-color: rgba(34, 34, 34, 0.8); /* 다크 모드 버튼 배경 */
    --dark-mode-button-text-color: rgba(189, 189, 189, 1); /* 다크 모드 버튼 텍스트 */
    }
}


/* data-theme 속성을 이용한 다크모드 */
[data-theme="light"] {
    --background-color: #232323;
    --text-color: #A5A5A5;
    --border-color: #EAEAEA;
    --secondary-text: #666666;
    --hover-color: #990099;
    --selected-color: #EAEAEA;
    --link-color: #0055FF;
    --title-color: #A5A5A5;
    --article-background: #232323;
    --input-background: #DEDEDE;
    --category-text: #C0C0C0;
    --calendar-day: #CCCCCC;
    --calendar-today: #CCCCCC;
    --quote-color: #C0C0C0;
    --codeblock-background: #2D2D2D; /* 코드 블록 배경 */
    --highlight-background: #444444; /* 강조 배경 */
    --highlight-border: #D4D4D4;
    --accent-color: #C98500;
    --dark-mode-button-color: rgba(234,234,234, 0.5);
    --dark-mode-button-text-color:rgba(102,102,102, 1);
}

/* data-theme 속성을 이용한 다크모드 */
[data-theme="dark"] {
    --background-color: #121212; /* 깊은 어두운 배경 */
    --text-color: #B3B3B3; /* 살짝 어두운 텍스트 */
    --border-color: #3A3A3A; /* 은은한 경계선 */
    --secondary-text: #888888; /* 보조 텍스트 */
    --hover-color: #BB86FC; /* 다크 모드에 어울리는 강조 색 */
    --selected-color: #2A2A2A; /* 선택된 요소 배경 */
    --link-color: #BB86FC; /* 다크 모드에 맞춘 링크 색 */
    --title-color: #D1D1D1; /* 제목 색상 */
    --article-background: #1C1C1C; /* 문서 배경색 */
    --input-background: #333333; /* 입력창 배경색 */
    --category-text: #A0A0A0; /* 카테고리 텍스트 */
    --calendar-day: #777777; /* 캘린더 평일 색 */
    --calendar-today: #BB86FC; /* 캘린더 오늘 색 */
    --quote-color: #909090; /* 인용문 색상 */
    --codeblock-background: #2D2D2D; /* 코드 블록 배경 */
    --highlight-background: #444444; /* 강조 배경 */
    --highlight-border: #BB86FC; /* 강조 경계 */
    --accent-color: #FFB300; /* 다크 모드용 포인트 색 */
    --dark-mode-button-color: rgba(34, 34, 34, 0.8); /* 다크 모드 버튼 배경 */
    --dark-mode-button-text-color: rgba(189, 189, 189, 1); /* 다크 모드 버튼 텍스트 */
}




/* hljs 스타일이 있는 pre > code 내부 기본 색상 및 그림자 설정 */
pre > code.hljs {
    background-color: var(--codeblock-background);
    color: unset; /* 기본 스타일 유지 */
    text-shadow: unset; /* 그림자 스타일 초기화 */
    border: 1px solid var(--highlight-border);
}



/* 다크 모드 시 텍스트 가독성 향상 */
[data-theme="dark"] .article {
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.3);
}

/* 하이라이트된 코드 블록 스타일 */
[data-theme="dark"] pre > code {
    background-color: var(--codeblock-background);
    color: unset; /* 기본 스타일 유지 */
    text-shadow: unset; /* 그림자 스타일 초기화 */
    border: 1px solid var(--highlight-border);
}


/* 테마 전환 애니메이션 */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    color: var(--text-color);
}


/* 2. 본문 공통 */
/* 기존 body 스타일 수정 */
body {
    font-family: 본명조, 'Nanum Myeongjo', serif;
    font-size: 17px;
    line-height: 1.5;
    background-image: none;
    background-position: center top;
    background-repeat: repeat-x;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 0;
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* 링크 스타일 수정 */
a:link, a:visited { 
    color: var(--link-color); 
    text-decoration: none;
}
a:hover { 
    color: var(--hover-color); 
    text-decoration: underline;
}
a:active { 
    color: var(--link-color); 
    text-decoration: none;
}

img { border: 0; }

/* 3.페이징 - 현재 페이지 */
.selected { font-weight: bold; color: var(--text-color); }
.no-more-prev { background: url(./images/icon_left_page.gif) left 1px no-repeat !important; padding-left: 6px; color: var(--secondary-text); }
.no-more-next { background: url(./images/icon_right_page.gif) right 1px no-repeat !important; padding-right: 6px; color: var(--secondary-text); }

/* 4.카테고리 - 이미지 버튼 */
.ib { cursor: pointer; }

/* 5.입력 텍스트 */
.text { border: 1px solid var(--border-color); }

/* 6.트리 테이블 */
.branch2 { }

/* 7. 트리 셀 */
.branch3 { cursor: pointer; height: 10px; }

/* 8.달력 */

/* 월 표시 */
.cal_month { 
   font-family: Noto Sans Demilight, san-serif; 
   font-size: 17px; 
   color: #ff000a; 
   width: 170px; 
   padding: 10px 0; 
   margin: 5px auto; 
   font-weight: bold;
}
.cal_month a:link, .cal_month a:visited, .cal_month a:hover { 
   color: #ff000a; 
   font-weight: bold;
}

/* 달력 요일 표시 */
.cal_week1 { 
   font-family: Noto Sans Demilight; 
   font-size: 17px; 
   height: 18px; 
   color: var(--secondary-text); 
   font-weight: normal; 
}

/* 달력 일요일 표시 */
.cal_week2 { 
   font-family: Noto Sans Demilight; 
   font-size: 17px; 
   height: 18px; 
   color: #ff000a; 
   font-weight: normal; 
}

.cal_day { 
   font-family: Noto Sans Demilight; 
   font-size: 17px; 
   color: var(--text-color); 
   text-align: center; 
   height: 18px; 
}

/* 달력 지난 달 날짜 표시 */
.cal_day1 { 
   color: var(--secondary-text); 
}

/* 달력 다음 달 날짜 표시 */
.cal_day2 { 
   color: var(--secondary-text); 
}

/* 달력 이번 달 날짜 표시 */
.cal_day3 { 
   color: var(--text-color);
}

/* 달력 오늘 날짜 표시 */
.cal_day4 { 
   background-color: var(--border-color); 
   color: var(--text-color); 
}

/* 달력 글쓴 날 링크 스타일 */
.cal_click a:link, 
.cal_click a:visited, 
.cal_click a:hover { 
   color: var(--text-color); 
   text-decoration: none; 
}

/* 16. 이미지 아래 캡션 스타일 */
.cap1 { 
   color: var(--secondary-text); 
   text-align: center; 
}

/* 16. 키워드 스타일 */
.key1 { 
   cursor: pointer; 
   border-bottom: 1px dotted var(--border-color); 
}

/* 16. 카테고리 옆 개수 스타일 */
.c_cnt { 
   font-size: 17px; 
   color: var(--secondary-text); 
}

/* 17. 최신글 옆 개수 스타일 */
.ps_cnt { 
   font-size: 17px; 
   color: var(--secondary-text); 
}

/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */

/*Custom 탭간격 시작*/
code {
   tab-size: 3;
}
/*Custom 탭간격 끝*/

#container { 
   /*@post-width:295=width:;*/ 
   width: 1300px; /*@*/ 
   margin: 0 auto; 
}

#header {
   float: left;
   /*@post-width:215=width:;*/ 
   width: 1215px; /*@*/
   height: /*@title-height=*/ 131px /*@*/;
   border-bottom: 2px solid var(--border-color);
   margin: 0 0 12px 40px; 
   display: inline;
   /*@title-background-image=background-image:*/ 
   background-image: none /*@*/;
   /*@title-background-image-position=background-position:*/ 
   background-position: right top /*@*/;
   /*@title-background-image-repeat=background-repeat:*/ 
   background-repeat: repeat /*@*/;
   /*@title-background-color=background-color:*/ 
   background-color: var(--background-color) /*@*/;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--title-color);
}

#header h1 {
   float: left;
   width: /*@post-width:-223=*/ 777px /*@*/;
   margin-top: 48px;
   margin-left: 15px;
   display: inline;
   /*@title-font-size=font-size:*/ 
   font-size: 36px /*@*/;
   /*@title-font-family=font-family:*/ 
   font-family: Noto Sans Demilight /*@*/;
   /*@title-color=color:*/ 
   color: #ff000a /*@*/;
   font-weight: bold;
}

#header h1 a {
   text-align: center;
   /*@title-font-size=font-size:*/ 
   font-size: 36px /*@*/;
   /*@title-font-family=font-family:*/ 
   font-family: Noto Sans Demilight /*@*/;
   /*@title-color=color:*/ 
   color: var(--title-color) /*@*/;
   display: block;
}

#header h1 span { 
   float: left; 
   font-size: 17px; 
   font-weight: normal; 
   color: var(--text-color); 
}

table {
    background-color: var(--article-background);
    border: 1px solid var(--border-color);
}

input, textarea, select {
    background-color: var(--input-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

button, input[type="submit"], input[type="button"] {
    background-color: var(--accent-color);
    color: var(--background-color);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: var(--hover-color);
}

#searchBox { 
    float: right; 
    margin-top: 98px; 
    margin-right: 15px; 
    display: inline;
}

/* 검색창 스타일 */
#searchBox input.search_keyword { 
    border: 1px solid var(--border-color); 
    background-color: var(--input-background); 
    color: var(--text-color);
    float: left; 
    margin-right: 4px; 
    padding: 5px;
    width: 200px;
    border-radius: 4px;
}

#searchBox input.search_keyword:hover {
    border-color: var(--accent-color);
}

#searchBox input.button:hover {
    background-color: var(--border-color);
}

/* 검색 버튼 스타일 */
#searchBox input.button {
    background: url(./images/btn_search.gif) no-repeat center center; 
    width: 32px; 
    height: 32px;  
    text-indent: -1000em;
    cursor: pointer; 
    float: left; 
    /* background-color: var(--input-background); */
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* 다크 모드에서 검색 버튼 아이콘 색상 변경 (필요한 경우) */
/* [data-theme="dark"] #searchBox input.button {
    background: url(./images/btn_search_dark.gif) no-repeat center center;
} */


/* sidebar */
#sidebar { 
    clear: both; 
    float: left; 
    width: 250px; 
    margin-left: 20px; 
    display: inline; 
    padding-bottom: 30px; 
}


#sidebar ul { 
    padding: 0; 
    list-style: none; 
    margin: 10px;
}

#blogImage { 
    display: flex;
    justify-content: center;
    margin-bottom: 5px; 
    
}

#blogImage img { 
    width: 190px; 
}

#blogDesc { 
    padding-left: 30px;
    padding-right: 30px;
    font-size: 17px; 
    color: var(--text-color); 
    /* padding: 5px 0 10px 0;  */
    border-bottom: 1px solid var(--border-color);
}

#blogMenu { 
    margin: 0; 
    padding: 0; 
}

#blogMenu ul { 
    list-style: none; 
}

#blogMenu li {
    border-bottom: 1px solid var(--border-color);
}

#blogMenu li a {
    list-style: none;
    text-decoration: none;
    display: block;
    color: var(--text-color);
    letter-spacing: -1px;
    font-family: Noto Sans Demilight;
    font-size: 20px;
    text-align: center;
    padding: 10px 0 15px 0;
    transition: color 0.3s;
}

#blogMenu li a:hover {
    color: #ff000a;
}

/* category */
#category { 
    border: 3px solid var(--border-color); 
    margin-top: 10px;
    background-color: var(--background-color);
}

#category #treeComponent { 
    padding: 10px; 
    font-family: '본명조', 'Nanum Myeongjo', serif;
    background-color: var(--background-color);
}


#category #treeComponent table {
    width: 100%;
    background-color: var(--background-color) !important; /* 원하는 배경색으로 변경 */
    box-sizing: border-box;
}

#category #treeComponent td {
    background-color: var(--background-color) !important; /* 원하는 배경색으로 변경 */
    box-sizing: border-box;
}

/* 상위 메뉴 스타일 */
#category #treeComponent td.branch3 {
    /*font-weight: bold; */         /* 상위 메뉴는 굵은 글자 */
    background-color: var(--background-color);     /* 상위 메뉴 배경색 */
    color: var(--text-color); /* 글자 색을 회색으로 지정 */
    margin-bottom: 5px;         /* 메뉴 사이 간격 */
}

/* 하위 메뉴 스타일 */
#category #treeComponent div[id^="category_"][id$="_children"] td.branch3 {
    padding-left: 10px;
    font-weight: normal;            /* 하위 메뉴는 일반 글자 */
    background-color: var(--background-color);          /* 하위 메뉴 배경색 */
    color: var(--text-color); /* 글자 색을 회색으로 지정 */
    margin-bottom: 3px;             /* 메뉴 사이 간격 */
}

/* 게시물 개수 표시 색상이 Chrome에서 강제로 변경되지 않도록 강제 설정  */
#category #treeComponent table[id^="category_"] td.branch3 div[id^="text_"] span.c_cnt {
    color: var(--text-color); /* 글자 색을 회색으로 지정 */
}


#category #categoryWrapTd { 
    padding: 10px; 
    font-family: '본명조', 'Nanum Myeongjo', serif;
    background-color: var(--background-color);
}
#category h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 20px;
    text-align: center; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

/* wrapAbContent의 배경색과 텍스트 색상 */
#category .wrapAbContent {
    padding: 0 10px 10px 10px;
    font-size: 16px;
    color: var(--text-color) !important;
    text-decoration: none;
    display: block;
    background-color: var(--background-color) !important;
}

#category .wrapAbContent a:hover {
  background-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* !important 는 플러그인에서 변경 못하도록 방어함 */
/* 카테고리 내 각 항목의 배경색과 텍스트 색상 */
#category ul li {
    background-color: var(--background-color); /* 다크모드 시 배경색 수정 */
    color: var(--text-color) !important; /* 텍스트 색상 */
}

/* hover 시 스타일 추가 */
#category ul li:hover {
    background-color: var(--border-color); /* hover 시 배경색 */
}

/* 카테고리 메뉴 스타일 */
#category .category-item {
    color: var(--text-color);
    background-color: var(--background-color);
    padding: 5px 10px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px;
}

#category .category-item:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}

/* tag cloud */
#tagbox { 
    border: 1px solid var(--border-color); 
    margin-top: 12px;
    background-color: var(--background-color);
}

#tagbox ul {
    text-align: justify; 
    margin: 10px;
}

#tagbox li { 
    display: inline; 
    line-height: 1.8; 
    margin-right: 3px; 
}

#tagbox li .cloud1 { 
    font-weight: bold; 
    font-size: 17px; 
    color: var(--text-color); 
    letter-spacing: -1px; 
}

#tagbox li .cloud2 { 
    font-size: 17px; 
    color: var(--text-color); 
}

#tagbox li .cloud3 { 
    font-size: 17px; 
    color: var(--secondary-text); 
}

#tagbox li .cloud4 { 
    font-size: 17px; 
    color: var(--secondary-text); 
}

#tagbox li .cloud5 { 
    font-size: 17px; 
    color: var(--text-color); 
}

#tagbox h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 17px; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

/* notice */
#notice { 
    border: 1px solid var(--border-color); 
    margin-top: 10px;
    background-color: var(--background-color);
}

#notice ul { 
    padding: 0; 
    list-style: none; 
    margin: 10px;
}

#notice li { 
    list-style: none; 
    line-height: 1.4; 
}

#notice li a{ 
    /* width: fit-content; 콘텐츠 너비에 맞춤 */
    /* margin: 0 auto; */
    text-align: center;
    list-style: none; 
    line-height: 1.4; 
}
#notice h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 17px; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

/* recentPost */
#recentPost { 
    border: 1px solid var(--border-color); 
    margin-top: 10px;
    background-color: var(--background-color);
}

#recentPost ul { 
    padding: 0; 
    list-style: none; 
    margin: 10px;
}

#recentPost li { 
    list-style: none; 
    line-height: 1.4; 
}

#recentPost h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 12px; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

/* recentComment */
#recentComment { 
    width: 190px; 
    border: 1px solid var(--border-color); 
    margin-top: 10px; 
    overflow: hidden;
    background-color: var(--background-color);
}


#recentComment li { 
    list-style: none; 
    line-height: 1.4; 
}

#recentComment h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 12px; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

#recentComment li .name { 
    color: var(--secondary-text); 
}

#recentComment li .date { 
    color: var(--secondary-text); 
}

/* recentTrackback */
#recentTrackback { 
    border: 1px solid var(--border-color); 
    margin-top: 10px;
    background-color: var(--background-color);
}

#recentTrackback ul { 
    padding: 0; 
    list-style: none; 
    margin: 10px;
}

#recentTrackback li { 
    list-style: none; 
    line-height: 1.4; 
}

#recentTrackback h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 17px; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

#recentTrackback li .name { 
    color: var(--secondary-text); 
}

#recentTrackback li .date { 
    color: var(--secondary-text); 
}


/* archive */
#archive { 
    border: 1px solid var(--border-color); 
    margin-top: 10px;
    background-color: var(--background-color);
}

#archive ul { 
    padding: 0; 
    list-style: none; 
    margin: 10px;
}

#archive li { 
    list-style: none; 
    line-height: 1.4; 
}

#archive h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 17px; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

/* calendar */
#calendar { 
    border: 1px solid var(--border-color); 
    margin-top: 10px;
    background-color: var(--background-color);
}

#calendar .tt-calendar { 
    width: 170px; 
}

#calendar .wrapAbContent { 
    padding: 0 10px 10px 10px; 
}

/* Links */
#link { 
    border: 1px solid var(--border-color); 
    margin-top: 10px;
    background-color: var(--background-color);
}

#link ul { 
    padding: 0; 
    list-style: none; 
    margin: 10px;
}

#link li { 
    list-style: none; 
    line-height: 1.4; 
}

#link h3 { 
    width: 170px; 
    padding: 5px 0; 
    margin: 5px auto; 
    font-family: Noto Sans Demilight; 
    font-size: 17px; 
    font-weight: normal; 
    color: var(--secondary-text); 
    border-bottom: 1px solid var(--border-color);
}

/* Counter */
#counter { 
    width: 190px; 
    height: 31px; 
    border-bottom: 1px solid var(--border-color); 
    font-family: Noto Sans Demilight; 
    font-size: 17px; 
    color: var(--secondary-text);
}

#counter li { 
    display: inline; 
    margin-right: 7px; 
}

/* RSS */
#btnRSS { 
    width: 190px; 
    border-bottom: 1px solid var(--border-color); 
}

#btnRSS img {
    margin-left: 6px;
}

/* content */
#content { 
    float: right; 
    width: /*@post-width=*/ 1000px /*@*/; 
    margin: 0x; 
    padding-bottom: 56px; 
    display: inline; 
}


/* ***** style.css의 content영역 스타일 ***** */
#content .nonEntry { }

#content .nonEntry h3 {
    /*@post-title-font-size=font-size:*/ 
    font-size: 32px /*@*/;
    /*@post-title-font-family=font-family:*/ 
    font-family: Noto Sans Demilight /*@*/;
    /*@post-title-color=color:*/ 
    color: var(--text-color) /*@*/;
    margin: 0; 
    padding: 10px 0;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 14px;
}

#content .entry { 
    width: /*@post-width=*/ 1000px /*@*/; 
    margin: 0; 
    padding: 0 0 15px 0; 
    overflow: hidden; 
}

#searchList { 
    text-indent: 50px;  
}

#searchList ol,
#searchRplist ol { 
    list-style: none;  
    padding: 5px 0;  
    margin: 0;
}

#searchList li,
#searchRplist li { 
    border-bottom: 1px solid var(--border-color);  
    padding: 6px 0;
    margin: 0;
    margin-top: 10px;  /* 각 항목의 위쪽 간격 설정 */
    margin-bottom: 10px;  /* 각 항목의 아래쪽 간격 설정 */
    font-size: 18px; 

}


#searchList li a{
    color: var(--title-color);

}

#searchList .date,
#searchRplist .date { 
    display: none;/* 모든 게시물의 날짜를 숨김 */
    color: var(--secondary-text); 
    margin-right: 10px; 
}

#searchList .cnt { 
    color: var(--secondary-text); 
}

#searchRplist .name { 
    color: var(--secondary-text);  
    padding-left: 8px;
}

#localog .spot { 
    background: url(./images/iconIndentArrow_local.gif) 5px 0 no-repeat;  
    padding-left: 20px;  
    margin-top: 5px;
}

#localog .info { 
    background: url(./images/iconIndentArrow_localinfo.gif) 5px 3px no-repeat;  
    padding-left: 15px;  
    margin-top: 2px;
}

#localog { 
    color: var(--secondary-text);
}

#localog a:link { 
    color: var(--link-color);
}

#localog a:visited { 
    color: var(--link-color);
}

#localog a:hover { 
    color: var(--link-color);  
    text-decoration: none;
}

#taglog ul { 
    padding: 5px; 
    margin: 0; 
    text-align: justify;
}

#taglog li { 
    display: inline;
}

#taglog a:hover { 
    background-color: var(--border-color);  
    color: var(--text-color);
}

#taglog li .cloud1 { 
    font-size: 17px; 
    color: #fc010a; 
    letter-spacing: -1px; 
}

#taglog li .cloud2 { 
    font-size: 17px; 
    color: var(--text-color); 
}

#taglog li .cloud3 { 
    font-size: 17px; 
    color: var(--secondary-text); 
}

#taglog li .cloud4 { 
    font-size: 17px; 
    color: var(--secondary-text); 
}

#taglog li .cloud5 { 
    font-size: 17px; 
    color: var(--secondary-text); 
}

#guestbook p { 
    padding: 2px 0; 
    margin: 0;
}

/* 방명록 & 댓글 관련 스타일 */

#guestWrite {
    padding: 10px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

#guestWrite input {
    width: 150px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background-color: var(--input-background);
}

#guestWrite textarea {
    width: /*@post-width:-53=*/ 947px /*@*/;
    overflow: hidden;
    padding: 5px;
    font-size: 17px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background-color: var(--input-background);
}

#guestWrite .homepage {
    width: 300px;
}

#guestWrite .submit {
    background: url(./images/btn_comment.gif) no-repeat;
    width: 150px;
    height: 23px;
    overflow: hidden;
    display: block;
    text-indent: -1000em;
    border: 0;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 10px;
}

#guestList {
    padding: 10px 0 0 0;
    color: var(--text-color);
}

#guestList ol,
#guestList ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#guestList li p {
    border-top: 1px solid var(--border-color);
    margin-top: 5px;
    padding-top: 5px;
}

#guestList ol li {
    border: 5px solid var(--border-color);
    padding: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

#guestList li ul li {
    margin-left: 20px;
    background: url("images/iconIndentArrow_local.gif") no-repeat 10px 10px;
    padding-left: 25px;
    border: none;
    width: /*@post-width:-102=*/ 898px /*@*/;
    overflow: hidden;
}

#guestList li .name,
#guestList li .name a {
    color: var(--text-color);
}

#guestList li .date {
    font-family: Noto Sans Demilight;
    font-size: 17px;
    color: var(--secondary-text);
}

#guestList .control a span {
    font-size: 17px;
    color: var(--secondary-text);
}

/* entry */
.entryNotice h2,
.entryProtected h2,
.entry h2 {
    /*@post-title-font-size=font-size:*/
    font-size: 32px /*@*/;
    /*@post-title-font-family=font-family:*/
    font-family: Noto Sans Demilight /*@*/;
    /*@post-title-color=color:*/
    color: var(--text-color) /*@*/;
    border-bottom: 1px solid var(--border-color);
}

.entryNotice h2 a,
.entryProtected h2 a,
.entry h2 a {
    /*@post-title-font-size=font-size:*/
    font-size: 32px /*@*/;
    /*@post-title-font-family=font-family:*/
    font-family: Noto Sans Demilight /*@*/;
    /*@post-title-color=color:*/
    color: var(--text-color) /*@*/;
}

.titleWrap {
    width: /*@post-width=*/ 1000px /*@*/;
    overflow: hidden;
    color: var(--title-color);
}

.titleWrap h2 {
    margin: 0;
    padding: 10px 0;
    margin-bottom: 14px;
}

.titleWrap a {
    font-size: 17px;
}

.titleWrap h2 a:link,
.titleWrap h2 a:visited,
.titleWrap h2 a:hover,
.titleWrap h2 a:active {
    text-decoration: none;
}


/* style.css 파일의 보호된 글과 본문 영역 스타일*/

.entryProtected {
    color: var(--text-color);
}

.entryProtected p.text {
    padding: 15px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
}

.entryProtected input {
    width: 200px;
    border: 1px solid var(--border-color);
    background-color: var(--input-background);
    color: var(--text-color);
}

.entryProtected .submit {
    background: url(images/btn_ok.gif) 0 50% no-repeat;
    width: 50px;
    height: 23px;
    overflow: hidden;
    display: inline;
    text-indent: -1000em;
    border: 0;
    cursor: pointer;
    margin-top: 13px;
}

/* 기본 폰트 본명조로 변경 */
.article {
    width: /*@post-width:-68=*/ 932px /*@*/;
    font-size: /*@post-body-font-size=*/ 18px /*@*/;
    font-family: '본명조', 'Nanum Myeongjo', serif;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow: hidden;
    padding: 40px 0;
    margin-left: 34px;
    font-weight: 400;
    line-height: 1.6;
    transition: color 0.3s, background-color 0.3s;
}

@media (prefers-color-scheme: dark) {
    .article {
        text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.3);
    }
}

.article a:link {
    color: var(--link-color);
    text-decoration: none;
}

.article a:visited {
    color: var(--link-color);
    text-decoration: none;
}

.article a:hover {
    color: var(--link-color);
    text-decoration: underline;
}

.article a:active {
    color: var(--link-color);
    text-decoration: none;
}

.article dt {
    text-decoration: underline;
}

.article dd {
    margin-left: 20px;
    padding-bottom: 10px;
}

.article blockquote {
    background: url(./images/iconBlockquote.gif) top left no-repeat;
    padding-left: 25px;
    margin: 10px 20px;
    color: var(--text-color);
}

.author {
    text-align: right;
    color: var(--secondary-text);
    padding: 20px 20px;
}

.author .text {
    font: 90% Verdana, Arial, Helvetica, sans-serif;
}

.tagTrail {
    padding: 8px 5px 5px 30px;
    background: url(./images/iconTag.gif) center left no-repeat;
    clear: both;
    color: var(--text-color);
}

.tagText {
    display: none;
}

#articleBtmWrap {
    width: /*@post-width:-68=*/ 932px /*@*/;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    padding: 7px 0 5px 0;
    font-family: Noto Sans Demilight;
    font-size: 17px;
    color: var(--text-color);
    margin: 0 auto;
}


/* style.css 파일의 댓글과 트랙백 영역 */
.actionTrail {
    width: /*@post-width:-98=*/ 902px /*@*/;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    margin: 0 15px;
    padding-bottom: 5px;
    color: var(--text-color);
}

.actionTrail .cnt {
    color: #ff000a;
    font-weight: bold;
}

.actionTrail a {
    color: var(--text-color);
}

.actionTrail a:hover {
    text-decoration: none;
}

.trackback {
    width: /*@post-width:-98=*/ 902px /*@*/;
    overflow: hidden;
    margin: 0 15px;
}

.trackback a {
    color: var(--text-color);
    text-decoration: none;
}

.trackback h3 {
    font-size: 17px;
    margin: 0;
    padding: 8px 0;
    font-weight: normal;
    border-bottom: 1px solid var(--border-color);
}

.trackback h4 {
    font-family: Noto Sans Demilight;
    font-size: 17px;
    font-weight: normal;
    margin: 0;
}

.trackback ol {
    margin: 0;
    padding: 0;
}

.trackback li,
.trackback .name,
.trackback p {
    font-family: Noto Sans Demilight;
    font-size: 17px;
}

.trackback li {
    border-bottom: 1px solid var(--border-color);
    padding: 5px 0;
}

.trackback .date {
    color: var(--secondary-text);
}

.trackback .control a {
    color: var(--secondary-text);
}

.trackback p {
    margin: 2px 0 0 0;
    padding: 0;
}

.comment {
    width: /*@post-width:-98=*/ 902px /*@*/;
    overflow: hidden;
    margin-left: 15px;
}

.comment p {
    margin: 3px 0 0 0;
    padding: 0;
}

.comment h3 {
    display: none;
}

.comment ol,
.comment ul {
    padding: 0;
    margin: 0;
}

.comment ol li {
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color);
}

.comment li ul li {
    padding: 5px 10px 5px 35px;
    background: url("images/iconReComment.gif") no-repeat 12px 6px;
    border: none;
}

.comment .date {
    color: var(--secondary-text);
}

.comment .name {
    color: var(--text-color);
}

.comment .name a {
    color: var(--text-color);
}

.commentWrite {
    overflow: hidden;
    background-color: var(--background-color);
}

.commentWrite input {
    width: 150px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background-color: var(--input-background);
    font-family: Noto Sans Demilight;
    font-size: 17px;
}

.commentWrite textarea {
    width: /*@post-width:-110=*/ 890px /*@*/;
    overflow: hidden;
    padding: 5px;
    margin: 5px 0 0 0;
    font-family: Noto Sans Demilight;
    font-size: 17px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background-color: var(--input-background);
}
  
 .commentWrite .homepage {
    width: 300px;
}

.commentWrite .submit {
    background: url(./images/btn_comment.gif) no-repeat;
    width: 150px;
    height: 23px;
    overflow: hidden;
    display: block;
    text-indent: -1000em;
    border: 0;
    cursor: pointer;
    margin: 10px auto;
}

.commentWrite .secretWrap {
    clear: both;
    float: right;
    position: relative;
    top: 0px;
    left: -10px;
    margin-bottom: 5px;
    color: var(--text-color);
}

.commentWrite .checkbox {
    border: none;
    padding: 0;
    margin: 0;
    width: 25px;
}

/* 페이징 */
#paging {
    padding-top: 10px;
    text-align: center;
    font-size: 0.95em;
}

#paging .numbox {
    border-left: 1px solid var(--border-color);
    padding-left: 6px;
    margin-left: 6px;
    font: 0.95em verdana;
}

#paging .num {
    border-right: 1px solid var(--border-color);
    padding-right: 8px;
    margin-right: 5px;
}

#paging #prevPage {
    background: url(./images/icon_left_page.gif) left 1px no-repeat;
    padding-left: 12px;
}

#paging #nextPage {
    background: url(./images/icon_right_page.gif) right 1px no-repeat;
    padding-right: 12px;
}

#paging span .selected {
    color: #ff000a;
}

/* footer */
#footer {
    clear: both;
    width: 950px;
    margin: 0 40px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

#footer .adTistory {
    float: left;
}

#footer .copyright {
    float: right;
    font-family: Noto Sans Demilight, san-serif;
    font-size: 17px;
    text-align: right;
    padding: 0;
    margin: 0;
}

#footer .copyright p,
#footer .copyright p a {
    color: var(--secondary-text);
}

#footer .copyright .tistory,
#footer .copyright .tistory a {
    color: var(--secondary-text);
}

#footer .adTistory .logoTistory {
    background: url(./images/logo2.png) no-repeat;
    width: 105px;
    height: 34px;
    text-indent: -100em;
    display: block;
    overflow: hidden;
    background-color: transparent;
}

* html #footer .adTistory .logoTistory {
    background-image: none;
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//tistory1.daumcdn.net/tistory/0/tisStudioBlack/images/logo2.png', sizingMethod='crop');
}

/* 다크 모드 토글 버튼 스타일 */
.theme-toggle {
    background-color: var(--dark-mode-button-color);
    color: var(--dark-mode-button-text-color);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
    transition: all 0.3s ease;
    font-family: 'Noto Sans Demilight', sans-serif;
    font-size: 14px;
    width: 100%;
    max-width: 200px;
}

.theme-toggle:hover {
    background-color: var(--border-color);
}

.theme-toggle:active {
    transform: scale(0.98);
}

.theme-toggle-wrapper {
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-toggle-wrapper {
    position: fixed;  /* 화면에 고정 */
    top: 10px;        /* 화면 상단에서 10px 간격 */
    left: 10px;       /* 화면 좌측에서 10px 간격 */
    z-index: 1000;    /* 다른 요소들보다 우선 표시되도록 높은 z-index 설정 */
    text-align: center;
    padding: 10px;
    /* border-bottom: 1px solid var(--border-color); */
    margin-bottom: 10px;
}