@charset "UTF-8";

/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button {
  margin: 0;
  padding: 0;
  outline: none;
}

fieldset, img {
  border: 0 none;
}

dl, ul, ol, menu, li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

input, select, textarea, button {
  vertical-align: middle;
}

input::-ms-clear {
  display: none;
}

button {
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
}

/* --- Bookshelf Theme: Base Styles --- */
body {
  background-image: url('./images/OLB.png'); /* 전체 배경 이미지 */
  background-size: cover; /* 배경 이미지 크기 조정 */
  background-position: center center; /* 배경 이미지 중앙 정렬 */
  background-repeat: no-repeat; /* 배경 이미지 반복 안함 */
  background-attachment: fixed; /* 배경 이미지 고정 (스크롤시 움직이지 않음) */
  font-family: Pretendard-Regular, sans-serif; /* 기본 폰트 유지 */
  color: #E0E0E0; /* 기본 텍스트 색상을 밝은 회색으로 변경 */
  line-height: 1.6; /* 가독성을 위한 줄간격 조정 */
}

body, th, td, input, select, textarea, button {
  font-size: 14px; /* 기본 폰트 크기 유지 */
  color: #E0E0E0; /* 밝은 회색으로 변경 */
}

/* 링크 색상 변경 */
a {
  color: #81D4FA; /* 밝은 하늘색 계열로 변경 */
  text-decoration: none;
}

a:active, a:hover {
  text-decoration: underline;
  color: #B3E5FC; /* 호버 시 더 밝은 하늘색 */
}

a:active {
  background-color: transparent;
}
/* --- End of Bookshelf Theme: Base Styles --- */


address, caption, cite, code, dfn, em, var {
  font-style: normal;
  font-weight: normal;
}

#tistorytoolbarid {
  display: none;
}

/* global */
#dkIndex {
  overflow: hidden;
  position: absolute;
  left: -9999px;
  width: 0;
  height: 1px;
  margin: 0;
  padding: 0;
}

/* 스킵네비게이션 */
.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0px;
  line-height: 0;
  text-indent: -9999px;
}

/* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

/* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.show {
  display: block;
}

.hide {
  display: none;
}

.emph_t {
  color: #A5D6A7; /* 밝은 녹색 계열로 변경 */
}

.cont_skin {
  margin-top: 80px;
  /* 배경이 어두우므로 콘텐츠 영역 배경을 약간 투명한 어두운 색으로 할 수 있음 (선택사항) */
  /* background-color: rgba(0, 0, 0, 0.3); */
  /* padding: 20px; */ /* 콘텐츠 영역 패딩 (선택사항) */
}

.article_skin {
  width: 820px;
  margin: 0 auto;
}

.txt_bar {
  display: inline-block;
  width: 1px;
  height: 9px;
  margin: 0 5px;
  background-color: #757575; /* 구분선 색상 약간 밝게 수정 */
}

.img_profile {
  float: left;
  margin-right: 16px;
  border-radius: 50px;
}

.ico_focused { /* 접근성: 포커스 시 테두리 */
  outline: 1px dotted #FFF;
  outline-offset: -1px; /* 안쪽으로 테두리 (겹침 방지) */
}
*:focus-visible { /* 최신 브라우저 focus 스타일 */
    outline: 2px solid #81D4FA; /* 밝은 하늘색 테두리 */
    outline-offset: 1px;
}


/* 공통이미지 */
.ico_skin {
  display: inline-block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  background: url("images/ico_skin.gif") 0 0 no-repeat; /* 아이콘 이미지는 그대로 사용, 필요시 수정 */
  text-indent: -9999px;
}

/* 헤더 */
.wrap_skin {
  position: relative;
}

.area_head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000; /* 다른 요소들보다 위에 오도록 z-index 조정 */
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #444; /* 테두리 색상 어둡게 */
  background-color: rgba(30, 30, 30, 0.85); /* 헤더 배경 어둡고 약간 투명하게 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 그림자 추가 */
}

.area_head:after {
  display: block;
  visibility: hidden;
  height: 0;
  font-size: 0;
  clear: both;
  content: '';
}

.area_head .area_profile {
  position: relative;
  float: left;
  padding: 15px 0 0 30px;
}

.area_head .area_profile .link_profile {
  float: left;
}

.area_head .area_profile .info_profile {
  float: left;
  max-width: 270px;
  position: relative; /* .list_name 포지셔닝 기준 */
}

.area_head .btn_name {
  margin-top: 5px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #E0E0E0; /* 버튼 텍스트 색상 밝게 */
}

.area_head .ico_name { /* 이름 옆 화살표 아이콘 */
  width: 10px;
  height: 6px;
  margin: 7px 0 0 6px;
  vertical-align: top;
  background-position: 0 0; /* 기본 화살표 (아래 방향) */
}

.area_head .txt_condition {
  width: 100%;
  font-size: 12px;
  color: #BDBDBD; /* 밝은 회색으로 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.area_head .list_name { /* 프로필 드롭다운 메뉴 */
  display: none;
  position: absolute;
  top: 30px; /* .btn_name 아래로 위치 조정 */
  left: 0; /* .info_profile 기준으로 왼쪽 정렬 */
  width: 112px;
  padding-top: 13px;
  padding-bottom: 2px;
  border: 1px solid #555; /* 테두리 색상 어둡게 */
  border-radius: 2px;
  background-color: #2C2C2C; /* 드롭다운 메뉴 배경 어둡게 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  z-index: 1001; /* 헤더보다 위에 오도록 */
}

/* JS에서 .info_profile에 .on 클래스 토글 시 적용될 스타일 */
.area_head .info_profile.on .list_name {
  display: block;
}

.area_head .info_profile.on .ico_name {
  background-position: 0 -632px; /* 위쪽 화살표 아이콘 (펼쳐졌을 때) */
}

.area_head .link_name {
  display: block;
  padding-left: 15px;
  margin-bottom: 7px;
  text-decoration: none;
  color: #C5CAE9; /* 링크 색상 밝게 */
}

.area_head .link_name:hover {
  text-decoration: underline;
  color: #9FA8DA; /* 호버 색상 밝게 */
}

.area_head .box_division {
  padding-top: 13px;
  border-top: 1px solid #444; /* 구분선 색상 어둡게 */
  margin-top: 9px;
}
/* --- Header Menu & Navigation --- */
.area_head .btn_menu { /* 모바일용 메뉴 버튼 (햄버거) */
  display: none; /* 기본 숨김, 반응형에서 표시 */
  position: absolute;
  top: 20px; /* 헤더 높이 고려하여 수직 중앙 정렬 */
  right: 20px;
  width: 40px;
  height: 40px;
  /* 아이콘 스타일링은 .ico_menu 에서 */
}

.area_head .btn_menu .ico_menu { /* 모바일 메뉴 아이콘 */
  width: 20px; /* 아이콘 크기 */
  height: 14px; /* 아이콘 높이 (선 3개 기준) */
  background-position: 0 -550px; /* 스프라이트 이미지 위치 확인 필요 */
  /* 필요시 SVG 또는 Font Icon으로 대체 고려 */
}


.dimmed_layer { /* 모바일/팝업 등 뒷 배경 어둡게 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 500; /* 메뉴보다는 낮고, 본문보다는 높게 */
  background-color: rgba(0,0,0,0.7);
}

.btn_close { /* 모바일 메뉴 닫기 버튼 */
  display: none; /* 기본 숨김, 모바일 메뉴 활성 시 표시 */
  position: fixed; /* 화면 기준으로 위치 고정 */
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 1010; /* 메뉴 위에 오도록 */
  /* 아이콘 스타일링은 .ico_close 에서 */
}
.btn_close .ico_close { /* 닫기 아이콘 (X) */
  width: 16px;
  height: 16px;
  background-position: 0 -570px; /* 스프라이트 이미지 위치 확인 필요 */
}


.area_menu { /* 검색, 카테고리 등 오른쪽 상단 메뉴 영역 */
  position: fixed; /* 헤더와 함께 고정 */
  right: 15px;
  top: 21px; /* 헤더 높이 고려한 위치 */
  z-index: 1002; /* 헤더 내부 다른 요소들보다 약간 높게 */
}

.area_menu .area_search { /* 검색창 영역 */
  display: inline-block;
  position: relative; /* .frm_search 포지셔닝 기준 */
  margin: 0 2px;
  border: 1px solid #555;
  border-radius: 3px;
  vertical-align: top;
  background-color: rgba(50,50,50,0.7);
  transition: width 0.3s ease; /* 너비 변경 애니메이션 */
  width: 42px; /* 기본 너비 (아이콘만 보일 때) */
  height: 38px; /* 버튼 높이와 동일하게 */
  overflow: hidden; /* 확장될 때 내용 숨김 처리 */
}

.area_menu .area_search.on { /* 검색창 활성화 시 */
  width: 255px; /* 확장된 너비 (아이콘 + 입력창) */
  border: 1px solid #888;
}

.area_menu .btn_search { /* 검색 아이콘 버튼 */
  display: inline-block;
  width: 40px;
  height: 36px;
  vertical-align: top;
}

.area_menu .area_search.on .btn_search {
  /* display: none; */ /* 활성화 시 버튼은 계속 보이도록 하거나, 필요시 숨김 */
}

.area_menu .ico_search { /* 검색 돋보기 아이콘 */
  width: 16px;
  height: 16px;
  margin-top: 10px; /* 버튼 내 수직 정렬 */
  background-position: 0 -25px;
}

.area_menu .frm_search { /* 검색 폼 */
  display: inline-block; /* .btn_search 옆으로 배치 */
  /* position: absolute; */ /* 필요에 따라 포지셔닝 */
  /* top: 0; */
  /* left: 40px; */ /* 버튼 너비만큼 이동 */
  overflow: hidden;
  width: calc(100% - 42px); /* 아이콘 버튼 너비 제외한 나머지 */
  height: 36px;
  vertical-align: top;
  opacity: 0; /* 기본 숨김 */
  transition: opacity 0.3s ease;
}

.area_menu .area_search.on .frm_search {
  opacity: 1; /* 활성화 시 표시 */
}

.area_menu .lab_search { /* "블로그 내 검색" 레이블 아이콘 */
  float: left; /* 사용 안함, 스크린리더 용으로 숨김 */
  display: none !important;
}

.area_menu .tf_search { /* 검색 입력 필드 */
  float: left;
  width: calc(100% - 20px); /* 내부 패딩 고려 */
  margin: 0;
  padding: 9px 10px;
  height: 36px;
  box-sizing: border-box;
  border: 0 none;
  vertical-align: top;
  color: #E0E0E0;
  background-color: transparent;
}
.area_menu .tf_search::placeholder {
  color: #9E9E9E;
}


.area_menu .area_navi { /* 카테고리 네비게이션 영역 */
  display: inline-block;
  position: relative; /* .list_cate 포지셔닝 기준 */
  margin: 0 2px 0 3px;
}

.area_menu .btn_cate { /* CATEGORY 버튼 */
  width: 160px;
  height: 38px;
  border: 1px solid #A5D6A7;
  border-radius: 3px;
  font-weight: bold;
  font-size: 12px;
  line-height: 36px; /* border 두께 고려 */
  color: #A5D6A7;
  padding: 0 1px 0 5px;
  background-color: rgba(40,40,40,0.7);
  box-sizing: border-box;
}
.area_menu .btn_cate:hover {
  background-color: rgba(60,60,60,0.8);
  color: #C8E6C9;
}

.area_menu .ico_cate { /* 카테고리 버튼 옆 화살표 아이콘 */
  width: 10px;
  height: 6px;
  margin: -2px 0 0 5px; /* 위치 미세조정 */
  background-position: 0 -50px; /* 기본 아래 화살표 */
  vertical-align: middle;
  transition: transform 0.2s ease-in-out; /* 회전 애니메이션 */
}

.area_menu .list_cate { /* 카테고리 드롭다운 목록 */
  display: none;
  position: absolute;
  top: 37px; /* 버튼 바로 아래 */
  left: 0;
  width: 158px; /* 버튼 너비와 거의 동일하게 */
  padding: 18px 0 10px;
  border: 1px solid #A5D6A7;
  border-top: none;
  border-radius: 0 0 3px 3px;
  background-color: #2C2C2C;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4);
  z-index: 10; /* 다른 요소 위에 오도록 */
}

.area_menu .area_navi.on .list_cate { /* JS에서 .area_navi에 .on 클래스 토글 시 */
  display: block;
}

.area_menu .area_navi.on .ico_cate {
  /* background-position: 0 -658px; */ /* 위쪽 화살표 아이콘 (스프라이트 위치 확인 필요) */
  transform: rotate(180deg); /* CSS 회전으로 변경 */
}

.area_menu .link_cate, /* 카테고리 목록의 링크 (1단계) */
.area_navi .list_cate ul li a { /* 카테고리 목록의 링크 (모든 단계) */
  display: block;
  padding: 0 17px; /* 좌우 패딩 */
  margin-bottom: 0; /* li에서 간격 제어 */
  line-height: 2.2; /* 줄간격으로 높이 확보 */
  font-size: 12px;
  color: #D1C4E9;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.area_navi .list_cate ul li {
  /* line-height: 18px; */ /* a 태그에서 line-height로 제어 */
  margin-bottom: 1px; /* 항목 간 구분 */
}

.area_navi .list_cate ul li.selected>a, /* 선택된 카테고리 */
.area_navi .list_cate ul li a:hover {
  text-decoration: none; /* 밑줄 제거하고 배경색으로 강조 */
  color: #B39DDB;
  background-color: rgba(255,255,255,0.1);
}

.area_navi .list_cate .c_cnt, .area_navi .list_cate img { /* 카테고리 글 수, 아이콘 */
  font-size: 0.9em;
  margin-left: 5px;
  color: #9E9E9E;
  /* display: none; */ /* 필요에 따라 다시 표시 */
}

/* 하위 카테고리 스타일 */
.area_navi .list_cate ul li ul {
  padding-left: 15px; /* 들여쓰기 */
  margin-top: 5px;
  margin-bottom: 5px;
}
.area_navi .list_cate ul li ul li a {
  color: #BDBDBD; /* 약간 더 어둡게 */
}
.area_navi .list_cate ul li ul li a:hover {
  color: #ADA5C4;
  background-color: rgba(255,255,255,0.08);
}

.area_navi .list_cate ul li ul li ul {
  padding-left: 15px; /* 추가 들여쓰기 */
}
.area_navi .list_cate ul li ul li ul li a {
  color: #9E9E9E; /* 더 어둡게 */
}
.area_navi .list_cate ul li ul li ul li a:hover {
  color: #9990B0;
  background-color: rgba(255,255,255,0.06);
}
.area_navi .list_cate ul li ul li ul li a::before {
  /* content: '· '; */ /* 티스토리 기본 스타일과 충돌날 수 있으므로 제거 또는 다른 방식으로 */
  /* color: #9E9E9E; */
}

.area_navi .list_cate .menu_profile { /* 카테고리 내 방명록 등 링크 */
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #444;
  /* display: none; */ /* 모바일용 프로필 메뉴는 일단 숨김 - 필요시 반응형에서 표시 */
}
.area_navi .list_cate .menu_profile li a {
    font-weight: bold;
}

/* 현재 카테고리명 표시 영역 (페이지 중앙 상단) */
.area_list .tit_category {
  position: fixed; /* 스크롤해도 고정 */
  top: 0px; /* 헤더 바로 아래 또는 헤더 위에 살짝 걸치도록 */
  left: 50%;
  transform: translateX(-50%); /* 정확한 중앙 정렬 */
  width: auto; /* 내용에 맞게 */
  max-width: 50%; /* 너무 길어지지 않도록 */
  padding: 0 20px;
  line-height: 80px; /* 헤더 높이와 맞춤 */
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  z-index: 5; /* 헤더보다는 낮게, 콘텐츠보다는 높게 */
}

.tit_category .link_category { /* 카테고리 제목 텍스트 */
  font-size: 20px;
  font-weight: bold;
  color: #FFCC80;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.tit_category .link_category:hover {
  text-decoration: none;
  color: #FFE0B2;
}
/* --- Main Content Area --- */
#dkContent { /* #cMain을 감싸는 전체 콘텐츠 영역 */
  /* margin-top: 80px; 이미 적용됨 */
}

#cMain { /* 실제 게시글, 목록 등이 들어가는 주 영역 */
  padding-top: 20px; /* 상단 여백 추가 */
  padding-bottom: 40px; /* 하단 여백 추가 */
}


/* --- Article List (게시글 목록 - 책장 형태로 바뀔 부분) --- */
/* 이 부분은 양피지/IMG.png 배경이 적용되지 않습니다. 기존 스타일 유지. */
.list_content { /* 각 게시글 아이템 */
  padding: 20px 0;
  border-bottom: 1px solid #444;
  color: #E0E0E0;
  overflow: hidden;
}

.list_content::after {
  content: '';
  clear: both;
  display: block;
}

.list_content .thumbnail_post {
  display: none;
}

.list_content .link_post {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.list_content .link_post:hover .tit_post {
  text-decoration: underline;
  color: #FFD54F;
}

.list_content .tit_post {
  display: block;
  font-weight: normal;
  font-size: 22px;
  line-height: 1.4;
  color: #FFF59D; /* 목록 제목은 밝게 유지 */
  margin-bottom: 8px;
}

.list_content .txt_post {
  overflow: hidden;
  max-height: 56px;
  margin-top: 1px;
  font-size: 14px;
  line-height: 1.6;
  color: #BDBDBD; /* 목록 요약 텍스트 밝게 유지 */
  vertical-align: top;
  word-break: break-all;
}

.list_content .detail_info {
  margin-top: 12px;
  font-size: 12px;
  color: #9E9E9E; /* 목록 정보 텍스트 밝게 유지 */
}

.list_content .detail_info .link_cate {
  font-size: 12px;
  text-decoration: none;
  color: #FFCC80; /* 목록 카테고리 링크 밝게 유지 */
}
.list_content .detail_info .link_cate:hover {
  color: #FFE0B2;
  text-decoration: underline;
}


/* --- Single Article View (개별 글 보기 화면) --- */
.skin_view .area_title { /* 제목 영역은 IMG.png 배경 미적용, 기존 밝은 텍스트 유지 */
  margin-bottom: 20px;
  padding: 40px 0 30px;
  border-bottom: 1px solid #444;
  text-align: center;
}

.skin_view .area_title a {
  text-decoration: none;
}

.skin_view .tit_category a {
  font-weight: bold;
  color: #FFCC80;
  font-size: 1em;
}
.skin_view .tit_category a:hover {
  color: #FFE0B2;
  text-decoration: underline;
}

.skin_view .tit_post { /* 글 제목 */
  margin-top: 10px;
  font-size: 36px;
  font-weight: bold;
  color: #FFFDE7 !important; /* 제목 색상 밝게 유지 */
  line-height: 1.3;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.skin_view .tit_post a {
  color: inherit !important;
}
.skin_view .tit_post a:hover {
  color: #FFF !important;
  text-decoration: none;
}

.skin_view .txt_detail { /* 작성자, 날짜 등 상세 정보 */
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: #BDBDBD !important; /* 밝게 유지 */
}
.skin_view .txt_detail span {
    color: inherit !important;
}
.skin_view .txt_detail .txt_bar {
  margin: 0 7px 0 5px;
  background-color: #757575;
}
.skin_view .txt_detail .my_edit { display: none; }
.skin_view .my_post .my_edit { display: inline-block; }
.skin_view .link_detail { font-size: 12px; color: #90A4AE; margin-left: 5px; }
.skin_view .link_detail:hover { text-decoration: underline; color: #B0BEC5; }

/* --- Article Content Body (IMG.png 배경 적용 및 텍스트 색상 밝게) --- */
.skin_view .area_view,
#article-view,
.contents_style { /* 티스토리 에디터 div class */
  padding: 40px 50px; /* 내부 여백 */
  font-size: 16px;
  color: #E0E0E0 !important; /* ★★★ 어두운 IMG.png 배경에 맞춰 기본 글자색을 밝은 회색으로 ★★★ */
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;

  background-image: url('./images/IMG.png');
  background-repeat: repeat-y;   /* 이미지 세로 반복. IMG.png 특성에 맞게 no-repeat, cover 등으로 변경 가능 */
  background-size: 100% auto;    /* 가로 100% 채우고 세로 자동. cover, contain 등으로 변경 가능 */
  background-position: top center; /* 배경 이미지 위치 */
  background-attachment: scroll;   /* 스크롤 따라 같이 움직임 */

  border: 1px solid rgba(255,255,255,0.1); /* 매우 연한 테두리 (어두운 배경에 어울리게) */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);   /* 약간의 그림자 */
  margin: 0 auto 20px auto;
  max-width: 820px;
  box-sizing: border-box;
  border-radius: 3px; /* 약간의 둥근 모서리 */
}

/* 본문 내 모든 하위 요소들은 배경색 투명하게, 글자색은 부모로부터 상속 */
.skin_view .area_view *,
#article-view *,
.contents_style * { /* .contents_style 내부 모든 요소 */
    background-color: transparent !important; /* 하위 요소 배경색 강제 투명 */
    color: inherit !important; /* ★★★ 부모의 밝은 글자색 강제 상속 ★★★ */
}

/* 본문 내 링크 색상도 밝게 (기존 스타일 활용 또는 IMG.png에 맞춰 조정) */
.skin_view .area_view a,
#article-view a,
.contents_style a {
  color: #81D4FA !important; /* 밝은 하늘색 계열 */
  text-decoration: underline !important;
}
.skin_view .area_view a:hover,
#article-view a:hover,
.contents_style a:hover {
  color: #B3E5FC !important; /* 더 밝은 하늘색 */
}

/* 본문 내 제목 태그들 색상 (기존 밝은 색상 유지 또는 IMG.png에 맞춰 강조) */
.skin_view .area_view h1, .skin_view .area_view h2,
.skin_view .area_view h3, .skin_view .area_view h4,
.skin_view .area_view h5, .skin_view .area_view h6,
#article-view h1, #article-view h2, #article-view h3, #article-view h4,
#article-view h1[data-ke-size], #article-view h2[data-ke-size],
#article-view h3[data-ke-size], #article-view h4[data-ke-size],
.contents_style h1, .contents_style h2, .contents_style h3, .contents_style h4 {
  line-height: 1.3;
  margin: 1.8em auto 1em;
  color: #FFF59D !important; /* 밝은 노란색 계열 유지 */
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 어두운 배경에 밝은 글씨를 위한 그림자 */
}
/* 각 heading 별 font-size !important는 이전과 동일하게 유지 */
.skin_view .area_view h1, #article-view h1, #article-view h1[data-ke-size], .contents_style h1 { font-size: 2em !important; }
.skin_view .area_view h2, #article-view h2, #article-view h2[data-ke-size], .contents_style h2 { font-size: 1.75em !important; }
.skin_view .area_view h3, #article-view h3, #article-view h3[data-ke-size], .contents_style h3 { font-size: 1.5em !important; }
.skin_view .area_view h4, #article-view h4, #article-view h4[data-ke-size], .contents_style h4 { font-size: 1.25em !important; }
/* h5, h6은 이전 CSS에서 color:inherit을 따르도록 되어있으므로 별도 지정 불필요할 수 있음. 필요시 추가 */


/* 목록 아이템 (li)의 불릿/숫자 색상은 li의 color를 따름. li는 위에서 color:inherit 처리됨 */
.skin_view .area_view ul li, .skin_view .area_view ol li,
#article-view ul li, #article-view ol li, .contents_style ul li, .contents_style ol li {
  margin-left: 20px;
  margin-bottom: 0.5em;
}

/* 인용문 스타일 조정 (어두운 배경에 맞게) */
.skin_view .area_view blockquote,
#article-view blockquote, .contents_style blockquote {
  padding: 15px 20px;
  margin: 0 auto 1.5em;
  border-left: 4px solid #78909C; /* 인용문 테두리 색상 */
  background-color: rgba(0,0,0,0.2) !important; /* IMG 배경 위에 살짝 더 어두운 반투명 레이어 */
  /* color는 inherit으로 처리되어 밝은 글자색 적용됨 */
}
#article-view blockquote[data-ke-style='style1'] { /* 티스토리 기본 인용 스타일 */
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 15px 15px !important;
  /* 아이콘이 어두우면 밝게 필터링 시도 또는 다른 아이콘으로 교체 고려 */
  /* filter: invert(1) hue-rotate(180deg) brightness(1.5); */
  background-color: rgba(0,0,0,0.2) !important;
  padding-left: 50px !important; border-left: none !important;
}
/* 기타 인용 스타일은 필요에 따라 추가 조정 */

/* 코드 블록 스타일 조정 (어두운 IMG.png 배경 위에 어울리도록) */
.skin_view .area_view pre,
#article-view pre, .contents_style pre {
  background-color: #263238 !important; /* 코드블럭 자체 배경 (기존 어두운 배경 유지) */
  margin: 1.5em auto;
  padding: 1em;
  border: 1px solid #455A64 !important;
  border-radius: 4px;
  color: #ECEFF1 !important; /* 코드 블록 내 기본 텍스트 (밝게) */
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 14px !important;
  line-height: 1.5;
  overflow-x: auto;
}
/* Syntax Highlighting 색상은 어두운 배경에 밝은 글씨 테마(예: Monokai) 유지 */
.hljs-comment, .hljs-quote { color: #75715e !important; }
.hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-deletion { color: #f92672 !important; }
.hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params, .hljs-meta, .hljs-link { color: #ae81ff !important; }
.hljs-attribute { color: #a6e22e !important; }
.hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #e6db74 !important; }
.hljs-title, .hljs-section { color: #a6e22e !important; }
.hljs-keyword, .hljs-selector-tag { color: #f92672 !important; }
.hljs-emphasis { font-style: italic !important; }
.hljs-strong { font-weight: bold !important; }


/* 표 스타일 조정 (어두운 배경에 맞게) */
#article-view table, .contents_style table {
  border: 1px solid #666 !important; /* 테이블 테두리 */
}
#article-view table th, #article-view table td,
.contents_style table th, .contents_style table td {
  border: 1px solid #555 !important; /* 셀 테두리 */
  padding: 8px 10px;
  text-align: left;
  /* color는 inherit으로 처리되어 밝은 글자색 적용됨 */
}
#article-view table th, .contents_style table th {
    background-color: rgba(70,70,70,0.5) !important; /* 헤더 배경 */
    color: #FFF59D !important; /* 헤더 텍스트 밝게 */
    font-weight: bold;
}

/* 기타 티스토리 에디터 요소들 (더보기, 파일첨부 등) 색상 */
#article-view div[data-ke-type='moreLess'], .contents_style div[data-ke-type='moreLess'] {
  background-color: rgba(50, 50, 50, 0.5) !important;
  border: 1px dashed #666 !important;
  /* color는 inherit으로 처리 */
}
#article-view div[data-ke-type='moreLess'] .btn-toggle-moreless,
.contents_style div[data-ke-type='moreLess'] .btn-toggle-moreless {
  color: #90CAF9 !important; /* '더보기' 버튼 링크 색상 */
}

#article-view figure.fileblock, .contents_style figure.fileblock {
  border: solid 1px rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(60,60,60,0.7) !important;
  /* 내부 a, span 등은 color:inherit으로 처리 */
}
/* (이하 다른 에디터 요소 스타일은 필요시 추가) */
/* --- CSS (style.css) - 4/4 시작 --- */

/* --- Article Footer (Tags, etc.) --- */
/* 이 스타일은 body.tt-body-article_view (개별 글 보기)에만 적용되어야 하므로, */
/* 이전 3번 CSS 파트에 이미 body.tt-body-article_view 로 한정하여 포함되어 있어야 합니다. */
/* 여기서는 목록 페이지에 영향이 없도록 비워둡니다. */


/* --- Comments Area (개별 글 보기 페이지) --- */
/* 이 스타일도 body.tt-body-article_view (개별 글 보기)에만 적용되어야 하므로, */
/* 이전 3번 CSS 파트에 이미 body.tt-body-article_view 로 한정하여 포함되어 있어야 합니다. */
/* 여기서는 목록 페이지에 영향이 없도록 비워둡니다. */


/* --- Bookshelf Theme: Article List as Books (목록 페이지에만 적용) --- */

/* 책장 역할을 할 컨테이너 */
body.tt-body-index #cMain,
body.tt-body-category #cMain,
body.tt-body-tag #cMain,
body.tt-body-search #cMain {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 30px 20px !important;
    padding: 30px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    writing-mode: horizontal-tb !important;
}
body.tt-body-index #cMain *,
body.tt-body-category #cMain *,
body.tt-body-tag #cMain *,
body.tt-body-search #cMain * {
    writing-mode: inherit !important;
}

/* 각 게시글을 감싸는 article_skin 요소 - flex 아이템 */
body.tt-body-index #cMain > div.article_skin,
body.tt-body-category #cMain > div.article_skin,
body.tt-body-tag #cMain > div.article_skin,
body.tt-body-search #cMain > div.article_skin {
    flex: 0 0 70px !important; /* 책 폭 (예: 70px) */
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 280px !important; /* 책 높이 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
    clear: none !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* 개별 책 아이템 (.list_content) */
.list_content {
    width: 100%;
    height: 100%;
    background-color: #3E2723;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid #2E1F1A;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.4);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    overflow: hidden;
    writing-mode: horizontal-tb !important;
    padding: 15px 5px;
}

.list_content:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 12px rgba(0,0,0,0.5);
}

.list_content .link_post {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.list_content strong.tit_post {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFFDE7 !important;
    line-height: 1.3;
    text-align: center;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: block !important;
    margin: 0 !important;
    max-height: 4.0em;
    overflow: hidden;
    transform: none !important;
}

.list_content .txt_post,
.list_content .detail_info,
.list_content .thumbnail_post {
    display: none !important;
}
.list_content::after { display: none !important; }


/* --- Paging (목록 페이지에만 적용, 중앙 정렬 및 스타일 수정) --- */
body.tt-body-index .area_paging, body.tt-body-index .area_paging_simple,
body.tt-body-category .area_paging, body.tt-body-category .area_paging_simple,
body.tt-body-tag .area_paging, body.tt-body-tag .area_paging_simple,
body.tt-body-search .area_paging, body.tt-body-search .area_paging_simple {
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 40px 0 60px 0 !important;
    padding: 0 !important;
    text-align: center !important; /* .inner_paging 을 중앙 정렬하기 위함 */
    clear: both !important;
    writing-mode: horizontal-tb !important;
}

.area_paging .inner_paging {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important; /* ★★★ 너비를 auto 또는 내용에 맞게 수정 (100% 대신) ★★★ */
  /* 이렇게 하면 .area_paging 의 text-align:center 에 의해 중앙 정렬 시도 */
  /* 또는 부모에게 text-align을 제거하고, .inner_paging에 margin: 0 auto; 를 직접 줄 수도 있습니다. */
  /* display: inline-flex; /* 부모의 text-align:center를 활용하는 다른 방법 */
  padding: 0;
  margin: 0 auto; /* ★★★ .inner_paging 자체를 중앙 정렬 (width:auto 또는 fit-content와 함께 사용) ★★★ */
}

.area_paging .ico_skin,
.area_paging .link_page {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 3px !important;
  vertical-align: middle; /* 추가 */
}

.area_paging .ico_skin {
  width: 24px;
  height: 24px; /* ★★★ 높이를 24px로 명확히 (스프라이트 이미지 크기에 맞게) ★★★ */
  line-height: 24px; /* 아이콘 수직 중앙 정렬을 위해 */
  opacity: 0.8;
  background-color: transparent !important; /* ★★★ 아이콘 배경 투명하게 ★★★ */
  border: none !important; /* ★★★ 아이콘 테두리 제거 ★★★ */
  border-radius: 0 !important; /* ★★★ 아이콘 원형 모서리 제거 ★★★ */
  text-indent: -9999px; /* 글자 숨김 (이미 아이콘 스프라이트에 있음) */
}
.area_paging .ico_skin:hover {
    opacity: 1;
}

.area_paging .link_prev {
  margin-right: 10px !important;
  background-position: 0 -100px !important; /* 이전 버튼 아이콘 위치 */
}
.area_paging .link_next {
  margin-left: 10px !important;
  background-position: 0 -150px !important; /* 다음 버튼 아이콘 위치 */
}
.area_paging .no-more-prev { background-position: 0 -75px !important; opacity: 0.4; cursor: default; }
.area_paging .no-more-next { background-position: 0 -125px !important; opacity: 0.4; cursor: default; }

.area_paging .link_page span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  color: #CFD8DC !important; /* ★★★ 페이지 번호 기본 글자색 (밝은 청회색) ★★★ */
  border-radius: 3px;
  text-decoration: none !important;
  transition: background-color 0.2s, color 0.2s;
  box-sizing: border-box;
  background-color: transparent !important; /* ★★★ span 배경 투명하게 ★★★ */
}
.area_paging .link_page span:hover {
  background-color: rgba(207,216,220,0.15) !important;
  color: #FFF !important;
  text-decoration: none !important;
}
.area_paging .link_page span.selected {
  background-color: #FFCC80 !important;
  color: #424242 !important; /* 현재 페이지 숫자색 */
  font-weight: bold !important;
}

/* 모바일 페이징 (스타일 일관성 및 중앙 정렬 확인) */
.area_paging_simple {display: none;}

.area_paging_simple .inner_paging {
    display: flex !important; /* Flexbox 사용 */
    justify-content: center !important; /* 중앙 정렬 */
    align-items: center !important;
    width: 100%; /* 전체 너비 사용 */
}
.area_paging_simple .link_prev,
.area_paging_simple .link_next {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 5px !important;
    color: #CFD8DC !important; /* ★★★ 모바일 버튼 글자색 ★★★ */
    padding: 8px 15px !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    background-color: #333 !important;
}
/* --- Sidebar (wrap_etc) --- */
.wrap_etc { 
    writing-mode: horizontal-tb !important; 
    padding: 40px 0 !important; 
    border-top: 1px solid #444 !important; 
}
.wrap_etc * { 
    writing-mode: inherit !important; 
    /* color: inherit !important; /* 개별 요소에서 색상 지정하므로 주석 처리 또는 삭제 */
}
.wrap_etc .inner_aside { 
    overflow: hidden; 
    width: 820px; 
    margin: 0 auto; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px;
}
.wrap_etc .box_aside { 
    width: calc(25% - 15px); 
    min-height: 135px; 
    color: #BDBDBD; /* 박스 기본 글자색 */ 
    background-color: rgba(20,20,20,0.3); 
    padding: 15px; 
    border-radius: 4px; 
    box-sizing: border-box;
}
.wrap_etc .box_aside strong { /* "공지사항", "최근 글" 등 박스 제목 */
    color: #E0E0E0 !important; /* 밝은 회색 */
    font-size: 1.1em; 
    display: block; 
    margin-bottom: 10px; 
    border-bottom: 1px solid #555; 
    padding-bottom: 8px;
}

/* "최근에 올라온 글", "최근에 달린 댓글" 목록 스타일 */
.wrap_etc .list_board { padding-top: 0; }
.wrap_etc .list_board li { margin-bottom: 8px; line-height: 1.4; }
.wrap_etc .list_board li:last-child { margin-bottom: 0; }

.wrap_etc .link_board { /* "최근 글/댓글"의 각 링크 */
  display: block;
  overflow: hidden;
  font-size: 12px;
  color: #CCCCCC !important; /* ★★★ 연한 회색으로 변경 ★★★ */
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none !important;
}
.wrap_etc .link_board:hover {
  color: #E0E0E0 !important; /* ★★★ 호버 시 밝은 회색으로 변경 ★★★ */
  text-decoration: underline !important;
}

/* 방문자 수, Total 등 스타일 (글자색 확인) */
.wrap_etc .list_total dt { font-weight: bold; color: #E0E0E0 !important; font-size: 0.9em; }
.wrap_etc .list_total dd { font-weight: bold; font-size: 1.8em; color: #F5F5F5 !important; margin-top: 2px; }
.wrap_etc .list_visitor { overflow: hidden; margin-top: 10px; font-size: 12px; }
.wrap_etc .list_visitor dt { float: left; color: #BDBDBD !important; }
.wrap_etc .list_visitor dd { float: right; color: #E0E0E0 !important; font-weight: bold; }

/* "more" 링크 스타일 (글자색 확인) */
.wrap_etc .link_more { position: absolute; top: 15px; right: 15px; font-size: 11px; text-decoration: underline; color: #9E9E9E !important; /* 중간톤 회색 */ }
.wrap_etc .link_more:hover { color: #BDBDBD !important; /* 연한 회색 */ }

/* 사이드바의 "TAG" 목록 스타일 (태그 길이 정리 및 글자색 수정) */
.wrap_etc .list_tag { overflow: hidden; margin-top: 0; }
.wrap_etc .list_tag li { float: left; margin: 0 6px 6px 0; }
.wrap_etc .list_tag .link_tag {
  display: inline-block; 
  height: 24px;
  padding: 0 10px;
  margin: 0;
  border-radius: 12px;
  font-size: 11px;
  line-height: 24px;
  border: 1px solid #555;
  background-color: #424242;
  color: #CCCCCC !important; /* ★★★ 태그 기본 글자색 (연한 회색) ★★★ */
  
  max-width: 100px; /* 태그 하나의 최대 너비 (조절 가능) */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  
  text-decoration: none !important;
  vertical-align: middle;
}
.wrap_etc .list_tag .link_tag:hover { 
  border: 1px solid #80CBC4; /* 호버 시 테두리색 (민트 계열 연하게) */
  background-color: #555; 
  text-decoration: none !important; 
  color: #B2DFDB !important; /* ★★★ 태그 호버 시 글자색 (연한 민트 계열) ★★★ */
}

/* 달력 스타일 (글자색 수정) */
.tt-calendar { width: 100% !important; border-collapse: collapse; border-spacing: 0; color: #BDBDBD !important; font-size: 11px !important; }
.tt-calendar .cal_month { padding: 8px 0; font-weight: bold; text-align: center; margin-bottom: 5px; color: #E0E0E0 !important; }
.tt-calendar .cal_month a { font-weight: bold; color: #COCOCO !important; padding: 0 8px; text-decoration: none !important; }
.tt-calendar .cal_month a:hover { color: #E0E0E0 !important; }
.tt-calendar td, .tt-calendar th { height: auto; padding: 5px 0; vertical-align: middle; width: 14.28%; text-align: center; }
.tt-calendar thead th { color: #AAAAAA !important; padding-bottom: 5px; }
.tt-calendar tbody td { color: #BDBDBD !important; } /* 날짜 숫자 */
.tt-calendar tbody td.cal_day_sunday { color: #E57373 !important; }
.tt-calendar tbody td.cal_day_saturday { color: #81D4FA !important; } /* 토요일은 기존색 유지 */
.tt-calendar tbody td .cal_click { /* 글 있는 날짜 링크 */
  font-weight: bold;
  color: #FFB74D !important; /* ★★★ 글 있는 날짜 (연한 주황) ★★★ */
  text-decoration: none !important; /* 밑줄 제거 */
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px; /* 약간 둥글게 */
  background-color: transparent !important;
}
.tt-calendar tbody td .cal_click:hover {
  color: #FFA726 !important; /* 호버 시 더 진한 주황 */
  background-color: rgba(255,183,77,0.1) !important; /* 배경 살짝 */
  text-decoration: none !important;
}
.tt-calendar tbody td.cal_today .cal_click { /* 오늘 + 글 있는 날짜 */
    color: #81C783 !important; /* ★★★ 오늘 + 글 (연한 녹색) ★★★ */
}
.tt-calendar tbody td.cal_today .cal_click:hover {
    color: #66BB6A !important;
    background-color: rgba(129,199,132,0.1) !important;
}
.tt-calendar tbody td.cal_today { /* 오늘 날짜 자체 */
    background-color: rgba(129,199,132,0.15) !important; /* 오늘 날짜 배경 연하게 */
    border-radius: 3px;
    font-weight: bold;
    color: #A5D6A7 !important; /* 오늘 날짜 숫자 색상 */
}


/* 글 보관함 스타일 (글자색 수정) */
.wrap_etc .list_keep { margin-top: 0; }
.wrap_etc .list_keep li {
  overflow: hidden;
  margin-bottom: 8px;
  font-size: 12px;
  color: #BDBDBD !important; /* 글 보관함 기본 텍스트 (날짜 옆 카운트 등) */
}
.wrap_etc .link_keep { /* 글 보관함 각 링크 (날짜) */
  font-size: 12px;
  color: #CCCCCC !important; /* ★★★ 글 보관함 링크 (연한 회색) ★★★ */
  text-decoration: none !important;
}
.wrap_etc .link_keep:hover {
  color: #E0E0E0 !important; /* ★★★ 호버 시 (밝은 회색) ★★★ */
  text-decoration: underline !important;
}

/* --- Footer --- */
/* (푸터 스타일은 이전과 동일하게 유지) */
.area_foot { writing-mode: horizontal-tb !important; height: auto !important; padding: 20px 0 !important; font-size: 12px !important; line-height: 1.6 !important; text-align: center !important; background-color: rgba(10,10,10, 0.85) !important; color: #9E9E9E !important; border-top: 1px solid #333 !important; }
.area_foot * { writing-mode: inherit !important; color: inherit !important; }
.area_foot .emph_t { color: #BDBDBD !important; }


/* --- Responsive Styles --- */
@media only screen and (max-width: 820px) { /* 820px 이하 화면 (태블릿 세로, 모바일) */

  /* --- 기본 레이아웃 및 #cMain 조정 --- */
  #dkContent {
      margin-top: 50px !important;
  }
  #cMain,
  .article_skin { /* 이 선택자는 목록 페이지 등에도 영향을 줄 수 있으므로 주의 */
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 5px !important;  /* 화면 가장자리 최소 여백 */
    padding-right: 5px !important; /* 화면 가장자리 최소 여백 */
    box-sizing: border-box !important;
  }
  #cMain { /* #cMain은 body.tt-body-article_view 에서도 공통으로 적용됨 */
      padding-top: 10px !important;
      padding-bottom: 10px !important;
  }
  body.tt-body-index #cMain > div.article_skin, /* 목록 페이지의 .article_skin 은 패딩 0 */
  body.tt-body-category #cMain > div.article_skin,
  body.tt-body-tag #cMain > div.article_skin,
  body.tt-body-search #cMain > div.article_skin {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-bottom: 15px !important;
      /* (이하 목록 페이지 .article_skin 스타일) */
  }

  /* --- 목록 페이지 모바일 스타일 (일반 세로형 목록) --- */
  /* (이 부분은 이전 답변의 반응형 코드와 동일하게 유지 - 생략 가능) */
  /* body.tt-body-index .list_content, ... { ... } */


  /* --- 개별 글 보기 페이지 모바일 스타일 --- */
  body.tt-body-article_view .article_skin { /* 개별 글 보기 페이지의 .article_skin 자체에는 추가 패딩 불필요 (이미 #cMain 에서 5px 적용) */
      padding-left: 0 !important; 
      padding-right: 0 !important;
  }

  body.tt-body-article_view .skin_view .area_title {
      padding: 20px 10px !important; /* 제목 영역 내부 패딩 */
      margin-bottom: 10px !important;
  }
  body.tt-body-article_view .skin_view .area_title h3.tit_post { /* .tit_post가 h3일 경우 */
      font-size: 24px !important; /* 모바일 제목 폰트 크기 조정 (기존 18px에서 조금 키움) */
      line-height: 1.4 !important;
  }
   body.tt-body-article_view .skin_view .tit_post { /* .tit_post가 h3가 아닐 경우도 고려 */
      font-size: 24px !important; /* 모바일 제목 폰트 크기 조정 */
      line-height: 1.4 !important;
  }
  body.tt-body-article_view .skin_view .txt_detail {
      font-size: 11px !important; /* 가독성을 위해 약간 키움 */
      margin-top: 8px !important;
  }

  /* ★★★ 모바일 본문 영역 (IMG.png 배경) 좌우 내부 패딩 줄이기 ★★★ */
  body.tt-body-article_view .skin_view .area_view,
  body.tt-body-article_view #article-view,
  body.tt-body-article_view .contents_style {
      padding-left: 10px !important;  /* ★★★ 본문 내부 좌측 패딩 10px로 수정 ★★★ */
      padding-right: 10px !important; /* ★★★ 본문 내부 우측 패딩 10px로 수정 ★★★ */
      padding-top: 20px !important;
      padding-bottom: 20px !important;
      font-size: 15px !important; /* 모바일 본문 폰트 크기 약간 키움 */
      line-height: 1.75 !important;
      box-sizing: border-box !important; /* 패딩이 너비에 포함되도록 */
  }

  /* 표 (table) 가로 스크롤 적용 */
  body.tt-body-article_view .skin_view .area_view table,
  body.tt-body-article_view #article-view table,
  body.tt-body-article_view .contents_style table {
      display: block !important;
      width: 100% !important; /* 테이블이 부모 너비를 넘지 않도록 한 후 스크롤 */
      max-width: 100% !important; /* 추가 */
      overflow-x: auto !important;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      border-spacing: 0;
      border-collapse: collapse;
      margin: 1em 0 !important;
  }
  body.tt-body-article_view .skin_view .area_view th,
  body.tt-body-article_view .skin_view .area_view td,
  body.tt-body-article_view #article-view th,
  body.tt-body-article_view #article-view td,
  body.tt-body-article_view .contents_style th,
  body.tt-body-article_view .contents_style td {
      white-space: nowrap !important;
      padding: 6px 8px !important; /* 모바일 테이블 셀 패딩 조정 */
      font-size: 13px !important; /* 모바일 테이블 폰트 크기 조정 */
      line-height: 1.5 !important;
  }

  /* (이하 헤더, 메뉴, 사이드바, 페이징 등의 모바일 스타일은 이전 답변 내용 유지) */
    .area_head {
        height: 60px !important; /* 모바일 헤더 높이 줄임 */
    }
    .area_head .area_profile {
        padding: 12px 0 0 15px !important; /* 프로필 영역 패딩 조정 */
    }
    .area_head .area_profile .img_profile {
        width: 36px !important; /* 프로필 이미지 크기 조정 */
        height: 36px !important;
        margin-right: 10px !important;
    }
    .area_head .btn_name {
        margin-top: 0px !important;
        font-size: 13px !important;
    }
    .area_head .txt_condition {
        display: none !important; /* 모바일에선 상태 메시지 숨김 */
    }
    .area_head .list_name { /* 프로필 드롭다운 모바일 위치/스타일 조정 */
        top: 25px !important; 
        left: -10px !important; /* 필요시 조정 */
        width: 120px !important;
    }

    .area_menu { /* 모바일 상단 메뉴 영역 */
        top: 11px !important; /* 헤더 높이 변경에 따라 조정 */
        right: 5px !important;
    }
    .area_menu .area_search {
        height: 38px !important;
        width: 38px !important; /* 검색 아이콘만 보이도록 */
        margin: 0 1px !important;
    }
    .area_menu .area_search.on {
        width: calc(100vw - 110px) !important; /* 확장 시 너비 (카테고리 버튼 등 고려) */
        max-width: 200px !important;
    }
    .area_menu .btn_search {
        width: 36px !important;
        height: 36px !important;
    }
    .area_menu .ico_search {
        margin-top: 10px !important;
    }
    .area_menu .tf_search {
        height: 36px !important;
        padding: 8px !important;
        font-size: 13px !important;
    }
    .area_menu .btn_cate {
        width: auto !important; /* 카테고리 버튼 너비 자동 */
        padding: 0 10px !important;
        font-size: 11px !important;
        height: 38px !important;
        line-height: 36px !important;
    }
    .area_menu .list_cate { /* 카테고리 드롭다운 모바일 */
        width: 150px !important; /* 너비 고정 또는 %로 변경 */
        top: 37px !important;
        right: 0; left: auto; /* 오른쪽 기준으로 펼침 */
    }
    .area_list .tit_category { /* 모바일에서 현재 카테고리명 표시 */
        line-height: 60px !important; /* 헤더 높이 변경에 따라 조정 */
        font-size: 16px !important; /* 모바일 카테고리명 폰트 크기 */
        padding: 0 10px !important;
        max-width: calc(100% - 120px) !important; /* 좌우 메뉴 영역 고려 */
    }
    
    /* 모바일용 메뉴 버튼 표시 */
    .area_head .btn_menu {
        display: block !important;
        top: 10px !important; /* 헤더 높이(60px) - 버튼높이(40px) / 2 */
        right: 10px !important;
    }
    /* 데스크탑용 카테고리 버튼 숨김 (모바일 메뉴 버튼으로 대체 시) */
    /* 또는 상황에 따라 유지하고 스타일만 조정 */
    /* .area_menu .area_navi { display: none !important; } */
    /* .area_menu .area_search { margin-right: 50px !important; } /* 메뉴 버튼 공간 확보 */

    /* 사이드바 (wrap_etc) 모바일 스타일 */
    .wrap_etc .inner_aside {
        width: 100% !important;
        padding: 0 10px !important; /* 사이드바 좌우 여백 */
        gap: 15px !important;
    }
    .wrap_etc .box_aside {
        width: calc(50% - 7.5px) !important; /* 2열 구조 */
        padding: 12px !important;
        min-height: auto !important;
    }
    .wrap_etc .box_aside strong {
        font-size: 1em !important;
        padding-bottom: 6px !important;
        margin-bottom: 8px !important;
    }
    .wrap_etc .list_board li, .wrap_etc .list_keep li {
        font-size: 11px !important;
    }
    .wrap_etc .list_tag .link_tag {
        height: 22px !important;
        line-height: 22px !important;
        font-size: 10px !important;
        padding: 0 8px !important;
    }
    .wrap_etc .list_tag {
        /* 태그가 많을 경우를 대비해, 모든 태그를 보여주거나 일부만 보여주고 '더보기' 처리 고려 */
    }

    /* 페이징 모바일 */
    .area_paging { display: none !important; } /* 데스크탑 페이징 숨김 */
    .area_paging_simple { display: block !important; margin: 30px 0 !important; } /* 모바일 페이징 표시 */
    .area_paging_simple .inner_paging {
        /* 이미 flex, center 정렬 적용됨 */
    }
    .area_paging_simple .link_prev,
    .area_paging_simple .link_next {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-width: 1px !important;
    }
    .area_paging_simple .link_prev .txt_label, /* "이전" "다음" 텍스트 숨김 (아이콘만 표시 시) */
    .area_paging_simple .link_next .txt_label {
        /* display: none !important; */ /* 필요에 따라 텍스트 숨김 */
    }
     /* 모바일 푸터 */
    .area_foot {
        padding: 15px 0 !important;
        font-size: 11px !important;
    }

} /* --- @media (max-width: 820px) 끝 --- */
/* --- CSS (style.css) - 4/4 끝 --- */