:root {
  /* Colors */
  --primary-color: #2C2C2C;
  --secondary-color: #666;
  --accent-color: #0077cc;
  --border-color: #E1E1E1;
  --bg-color: #F9FAFB;
  --text-color: #333;
  --light-gray: #f5f5f5;
  --dark-gray: #444;
  
  /* Layout */
  --max-width: 1260px;
  --sidebar-width: 264px;
  --gap: 40px;
  --border-radius: 20px;
  --small-radius: 8px;
  
  /* Typography */
  --font-size-base: 16px;
  --font-size-large: 20px;
  --font-size-small: 14px;
  --line-height: 1.5;
}

/* RESET */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

html {
  scroll-behavior: smooth;
  word-break: keep-all;
  overflow-x: hidden;
  letter-spacing: -0.6px;
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

body {
  width: 100%;
  overflow-x: hidden;
  line-height: var(--line-height);
}

body.menu_open {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul, dl, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

ol::after, ul::after, dl::after, li::after {
  content: "";
  display: table;
  clear: both;
}

blockquote, q {
  quotes: none;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th, td {
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: inherit;
  z-index: 1;
}

input, select, textarea, button {
  border: 0;
  box-sizing: border-box;
  font: inherit;
}

input[type="checkbox"],
input[type="radio"],
select,
button {
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
}

::selection {
  background: #105fd5;
  color: #ffe600;
}

@keyframes bounce-fix {
  0%, 100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-10px); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.text-hide {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#tt-body-index, #tt-body-page, #tt-body-category {
  padding: 0 !important;
}

/* HEADER */
.header_wrap {
  width: 100%;
  font-size: 17px;
  font-weight: 400;
  color: var(--secondary-color);
  position: relative;
}

.header_wrap .menu_wrap {
  display: flex;
  width: 100%;
  max-width: var(--max-width);
  min-height: 90px;
  border-bottom: 1px solid var(--border-color);
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  flex-wrap: wrap;
  column-gap: 30px;
}

/* MENU COMMON */
.menu_box,
.menu_wrap .menu_box_category {
  display: flex;
  height: 100%;
}

.menu_box ul,
.menu_wrap .menu_box_category .tt_category,
.menu_box_category .category_list {
  display: flex;
  align-items: stretch;
  position: relative;
  height: 100%;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.menu_box ul::before,
.menu_box_category .category_list::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 200vw;
  height: 0;
  background-color: #fff;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 0;
}

.menu_box ul > li,
.menu_box_category .category_list > li {
  width: max-content;
  position: relative;
  flex-shrink: 0;
  z-index: 200;
}

.menu_box ul > li > a,
.menu_box_category .category_list > li > a {
  display: flex;
  align-items: center;
  margin: 0 25px;
  font-weight: 700;
  position: relative;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  z-index: 300;
}

.menu_box_category .category_list:hover::before {
  height: 370px;
  opacity: 1;
}

.menu_box ul > li:hover > a,
.menu_box_category .category_list > li:hover > a {
  color: #000;
  text-decoration: underline;
  text-underline-position: under;
  border-radius: 6px;
}

.menu_wrap .menu_box_category .link_tit,
.menu_wrap .menu_box_category .c_cnt {
  display: none;
}

/* 상단 메뉴 서브 카테고리 */
.menu_box_category .sub_category_list {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  transition: all 0.35s ease;
  visibility: hidden;
  pointer-events: none;
  z-index: 700;
}

/* 상단 메뉴 서브 메뉴 활성화 */
.menu_box_category .category_list:hover .sub_category_list {
  height: auto;
  padding: 10px 0 30px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  color: #444;
  z-index: 800;
}

/* 상단 메뉴 서브 메뉴 항목 */
.menu_box_category .sub_category_list > li {
  text-align: center;
  font-size: 16px;
  z-index: 900;
}

/* 상단 메뉴 서브 메뉴 항목 */
.menu_box_category .sub_category_list > li > a {
  padding: 10px 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  z-index: 1000;
}

/* 1단계 메뉴 텍스트 말줄임 */
.menu_box_category .category_list > li > a.link_item {
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 서브 메뉴 호버 */
.menu_box_category .sub_category_list > li > a:hover {
  text-underline-position: under;
  text-decoration: underline;
}

/* 상단메뉴 서치 버튼 */
.search_form .search_btn,
.search_form .search_reset {
  width: 40px;
  height: 40px;
  display: flex;
  color: #666;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  padding: 0;
  margin: 0;
}

.search_form .search_btn i,
.search_form .search_reset i {
  font-size: 22px;
}

.search_form .search_btn i:hover,
.search_form .search_reset i:hover {
  animation: fa-beat 0.8s infinite;
}

/* 서치 버튼 */
.search_input:focus {
  outline: none;
}


/* 햄버거 버튼 (기본 숨김, 모바일과 태블릿만 보임) */
.header_menu {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-35%);
  width: 40px;
  height: 45px;
  cursor: pointer;
  display: none;
  z-index: 400;
}

/* 햄버거 버튼 줄 3개 */
.header_menu .line {
  width: 100%;
  height: 5px;
  background-color: #fff;
  border-radius: 2px;
  margin: 4px 0;
}

/* ------------------------- */
/* ------------------------- */
/* 검색 모달 영역 */
/* ------------------------- */
/* ------------------------- */

.search_wrap {
  margin-top: 30px;
  background-color: transparent;
  position: relative;
}

/* PC 검색창 */
.search_wrap.pc_only {
  display: block;
}

/* mobile 검색창 */
.header_wrap .search_wrap.mobile_only{
  display: none;
  padding: 0px 10px;
  max-height: none;
  background-color: #fff;
  z-index: 1000;
  position: relative;
}

/* 검색 레이어 전체 영역 */
.search_wrap_page .search {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 50px 10px;
  background-color: #fff;
}

.search_form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 5px 30px;
  border-radius: 100px;
  background-color: #F7F7F7;
}

.search_form input {
  width: calc(100% - 60px);
  padding: 10px;
  color: #333;
  background-color: transparent;
  font-size: 18px;
  font-weight: 500;
}

.search_form input::placeholder {
  color: #666;
}

/* ------------------------- */
/* ------------------------- */
/* 검색 결과 페이지 */
/* ------------------------- */
/* ------------------------- */
/* 검색 레이어 전체 영역 */
.search_wrap_page {
  width: 100%;}

/* 검색 레이어 전체 영역 */
.search_wrap_page h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  margin-top: 80px;
}

.info_box .top_info {
  margin-bottom: 6px;
  color: #666;
  font-size: 15px;
}

.top_info span:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #E1E1E1;
  margin: 0 8px;
}

.post_title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.post_cont {
  font-size: 16px;
  color: #666;
  font-weight: 400;
}


/* ------------------------- */
/* ------------------------- */
/* 푸터 영역 */
/* ------------------------- */
/* ------------------------- */
/* 푸터 전체 영역 */
.footer_wrap {
  width: 100%;
  padding: 30px 10px;
  background-color: #F9FAFB;
}

.footer_box {
  display: flex;
  max-width: 1260px;
  margin: 0 auto;
  align-items: center;
}

.footer_box span {
  font-size: 16px;
  font-weight: 600;
  color: #666;
}

.footer_box span.copy {
  margin-left: auto;
}

/* ------------------------- */
/* ------------------------- */
/* 메인 비주얼 배너 */
/* ------------------------- */
/* ------------------------- */
/* 메인 상단 배너 영역 */
.header_banner {
  display: flex;
  flex-direction: column;     /* 세로 방향 배치 */
  justify-content: center;   /* 수평 가운데 정렬 */
  align-items: center;       /* 수직 가운데 정렬 */
  position: relative;
  width: 100%;
  max-width: 1260px;
  height: 340px;
  margin: auto;
  border-radius: 20px;
  background-repeat: no-repeat;               /* 반복 방지 */
  background-position: center top;            /* 중앙 상단 정렬 */
  background-size: cover;                     /* 요소 크기에 맞춰 이미지 확대/축소 */
}

.header_title {
  font-size: 1.32em;
  color: white;
}

/* 한 줄 말줄임 처리 */
.ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 두 줄 말줄임 처리 */
.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 다섯줄 말줄임 처리 */
.ellipsis-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 본문과 사이드바 전체 래퍼 */
#content_wrap {
  display: flex;
  width: 100%;
  max-width: 1260px;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 auto;
  padding-top: 50px;
  gap: 40px; 
}

/* 본문과 사이드바 배치 */
#content {
  flex: 1;
  order: 2;
}

/* ------------------- */
/* 사이드바 공통 */
/* ------------------- */
.sidebar_wrap {
  order: 1; 
  color: #333;
}

/* 사이드바 내부 요소 (PC는 1열) */
.sidebar_element {
  column-count: 1;
  column-gap: 20px;
  width: 264px;
}

.sidebar_wrap .sidebar_box {
  display: inline-block;
  width: 100%;
  padding: 20px;
  margin-bottom: 20px; /* 세로 간격 */
  border: 1px solid #E1E1E1;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  break-inside: avoid;
}

/* 모든 타이틀 공통 스타일 */
.sidebar_box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 18px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

/* ------------------- */
/* 프로필 */
/* ------------------- */
.sidebar_profile .profile_img {
  width: 108px;
  height: 108px;
  margin: 22px auto 15px;
  /*border-radius: 50%;*/
  background-color: #D9D9D9;
  overflow: hidden;
}
.sidebar_profile .profile_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar_profile .profile_name {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.sidebar_profile .profile_description {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #686868;
  margin: 5px 0px 15px 0px;
  letter-spacing: -0.6px;
}

/* ------------------- */
/* 카테고리 */
/* ------------------- */
/* 사이드바 카테고리 공통 스타일 */
.sidebar_category_list .category_list,
.sidebar_category_fold .category_list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sidebar_category_list .tt_category .link_tit,
.sidebar_category_fold .tt_category .link_tit {
  display: none;
}

.sidebar_category_list .category_list > li > a,
.sidebar_category_fold .category_list > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 400;
  transition: all 0.2s ease;
}

.sidebar_category_list .category_list > li:hover > a,
.sidebar_category_fold .category_list > li:hover > a {
  text-decoration: underline;
  font-weight: bold;
  color: #2C2C2C;
}

.sidebar_category_list .category_list span,
.sidebar_category_fold .category_list span{
  margin-left: 5px;
}

/* 하위 카테고리 */
/* 사이드바 서브 카테고리 */
.sidebar_category_list .sub_category_list,
.sidebar_category_fold .sub_category_list {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  margin: 10px 0;
  gap: 6px;
}

.sidebar_category_list .sub_category_list > li > a,
.sidebar_category_fold .sub_category_list > li > a {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  height: 28px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  transition: background-color 0.2s ease;
}

.sidebar_category_list .sub_category_list > li > a::before,
.sidebar_category_fold .sub_category_list > li > a::before {
  content: "•";
  margin-right: 8px;
  color: #000;
}

.sidebar_category_list .sub_category_list > li > a:hover,
.sidebar_category_fold .sub_category_list > li > a:hover {
  background-color: #f5f5f5;
  color: #000;
  font-weight: 500;
  transform: translateX(2px);
}

/* 접기/펼치기 */
.sidebar_category_fold .category_list > li > a {
  position: relative;
  padding-right: 20px; /* 오른쪽 공간 확보 */
  background: none; /* 기존 배경 제거 */
}
.sidebar_category_fold .category_list > li > a::after {
  content: "\f107"; /* fa-angle-down의 Unicode */
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900; /* solid 아이콘은 900 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.sidebar_category_fold .category_list > li > a:hover::after {
  animation: bounce-fix 0.5s;
}

.sidebar_category_fold .sub_category_list {
  display: none;
  transition: max-height 0.3s ease;
}
.sidebar_category_fold .sub_category_list.open {
  display: flex;
}

/* ------------------- */
/* 사이드바 포스트 공통 스타일 */
/* ------------------- */
.sidebar_recent_post ul,
.sidebar_popular_post ul,
.sidebar_recent_comment ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar_recent_comment i {
  margin-right: 5px;
}

.sidebar_recent_post .post_link,
.sidebar_popular_post .post_link,
.sidebar_recent_comment .post_link {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* 포스트 링크 호버 효과 */
.sidebar_recent_post .post_link:hover,
.sidebar_popular_post .post_link:hover,
.sidebar_recent_comment .post_link:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: #fafafa;
}

.sidebar_recent_post .post_link:hover .info_box .meta .cnt i.fa-regular,
.sidebar_popular_post .post_link:hover .info_box .meta .cnt i.fa-regular,
.sidebar_recent_comment .post_link:hover .info_box .meta .cnt i.fa-regular {
  animation: fa-bounce 1s;
}

/* 썸네일 공통 스타일 */
.sidebar_recent_post .thumb_box,
.sidebar_popular_post .thumb_box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background-image: url('./images/no_image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar_recent_post .thumb_box img,
.sidebar_popular_post .thumb_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 정보 박스 공통 스타일 */
.sidebar_recent_post .info_box,
.sidebar_popular_post .info_box,
.sidebar_recent_comment .info_box {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar_recent_post .info_box .title,
.sidebar_popular_post .info_box .title,
.sidebar_recent_comment .info_box .title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

.sidebar_recent_post .info_box .meta,
.sidebar_popular_post .info_box .meta,
.sidebar_recent_comment .info_box .meta {
  gap: 10px;
  font-size: 13px;
  color: #666;
}

/* ------------------- */
/* 공지사항 */
/* ------------------- */
.sidebar_notice ul {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 리스트 간격 살짝 줄임 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar_notice ul li {
  position: relative;
}

.sidebar_notice ul li a {
  display: block;
  width: 100%;
  padding: 10px 12px 10px 10px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  transition: all 0.25s ease;
}

/* 호버 효과 */
.sidebar_notice ul li a:hover {
  background-color: #fafafa;
  transform: translateX(4px);
}
.sidebar_notice a i {
  transition: color 0.3s ease, transform 0.3s ease;
}
.sidebar_notice a:hover i {
  color: red;
  animation: fa-beat 1s infinite;
}

/* ------------------- */
/* 태그 클라우드 */
/* ------------------- */
.sidebar_tagbox ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar_tagbox ul li a {
  text-decoration: none;
  color: #444;
  transition: transform 0.2s ease, color 0.2s ease;
  line-height: 1.6;
  display: inline-block;
  position: relative;
}

.sidebar_tagbox ul li a::before {
  content: "#";
  margin-right: 2px;
  color: #444;
}

/* 크기와 각도 랜덤 부여 (n번째마다) */
.sidebar_tagbox ul li:nth-child(5n) a {
  font-size: 13px;
  transform: rotate(-5deg);
}
.sidebar_tagbox ul li:nth-child(5n+1) a {
  font-size: 16px;
  transform: rotate(3deg);
}
.sidebar_tagbox ul li:nth-child(5n+2) a {
  font-size: 14px;
  transform: rotate(-8deg);
}
.sidebar_tagbox ul li:nth-child(5n+3) a {
  font-size: 18px;
  transform: rotate(5deg);
}
.sidebar_tagbox ul li:nth-child(5n+4) a {
  font-size: 15px;
  transform: rotate(-3deg);
}

/* 호버 시 회전은 유지, 색상만 강조 */
.sidebar_tagbox ul li a:hover {
  color: #000;
  font-weight: bold;
  transform: scale(1.05) rotate(var(--angle, 0deg));
}

/* ------------------- */
/* 링크 & 관리자 */
/* ------------------- */
.sidebar_links ul,
.sidebar_admin ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar_links .list a,
.sidebar_admin .admin-list a {
  display: block;
  padding: 10px 14px;
  background-color: #F7F7F7;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  font-size: 15px;
  color: #555;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease;
}
.sidebar_links .list a:hover,
.sidebar_admin .admin-list a:hover {
  background-color: #333;
  color: #fff;
  border-color: #333;
  transform: translateY(-2px);
}

.sidebar_admin .admin-list a:hover i.fa-gear {
  animation: spin 1s linear infinite;
}

.sidebar_admin .admin-list a:hover i.fa-pen-to-square {
  animation: fa-beat 0.7s infinite;
}

/* ------------------- */
/* 커스텀 버튼 */
/* ------------------- */
.sidebar_think {
  position: relative;
  overflow: hidden;
  height: 60px;
  padding: 16px 20px;
  background-color: #F4F4F4;
  background-repeat: no-repeat;
  background-position: right 25px bottom;
}


.sidebar_think a {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1; 
  position: relative;
  z-index: 2;
}

/* 브런치 */
.sidebar_think.brunch {
  background-image: url('./images/think_img.png');
  background-size: 60px;
}

/* T 스킨 */
.sidebar_think.skin {
  background-image: url('./images/think_tistory.png');
  background-size: 60px;
  background-position: 94% 50%;
}

/* 네이버 */
.sidebar_think.naver {
  background-image: url('./images/think_naver.png');
  background-size: 75px;
  background-position: 96% 50%;
}

/* 전자책 */
.sidebar_think.book {
  background-image: url('./images/think_books.png');
  background-size: 70px;
  background-position: 96% 10%;
}

.sidebar_think:hover {
  background-color: #222;
  color: #fff;
  filter: brightness(1.1) contrast(1); /* 배경 이미지 밝게 */
  background-blend-mode: unset;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.4s ease;
}

/* 텍스트 내부 a 태그 효과 */
.sidebar_think:hover a {
  color: #fff;
  transform: translateX(4px);
  transition: transform 0.3s ease, color 0.3s ease;
}

.sidebar_think::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1), rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  transform: skewX(-25deg);
  pointer-events: none;
  transition: left 0.75s ease-in-out;
  z-index: 1;
}

.sidebar_think:hover::before {
  left: 130%;
}

/* ------------------- */
/* 보관함 */
/* ------------------- */
.sidebar_archives ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar_archives .list a {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 15px;
  color: #555;
  text-decoration: none;
  transition: all 0.25s ease;
}
.sidebar_archives .list a:hover {
  background-color: #f5f5f5;
  transform: translateX(4px);
}
.sidebar_archives .archives-count {
  font-size: 14px;
  color: #666;
}

/* ------------------- */
/* 캘린더 */
/* ------------------- */
.sidebar_calendar .cal_month {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 19px;
}
.sidebar_calendar .cal_month .calendar_btn {
  width: 28px;
  height: 28px;
  background: transparent no-repeat center / auto;
}
.sidebar_calendar .calendar_table {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  border-collapse: collapse;
}
.sidebar_calendar th,
.sidebar_calendar td {
  width: 24px;
  height: 24px;
}
.sidebar_calendar .cal_week2,
.sidebar_calendar .cal_day_sunday {
  color: #D32F2F;
  font-weight: bold;
}
.sidebar_calendar .cal_day3 .cal_click {
  color: #2C2C2C;
  font-weight: 500;
  position: relative;
}
.sidebar_calendar .cal_day3 .cal_click::before {
  content: '';
  width: 24px;
  height: 24px;
  border: 2px solid #2C2C2C;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.sidebar_calendar .cal_day4 {
  color: #fff;
  position: relative;
}
.sidebar_calendar .cal_day4::before {
  content: '';
  width: 24px;
  height: 24px;
  background-color: #2C2C2C;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* ------------------- */
/* 방문자 수 */
/* ------------------- */
.sidebar_count .count_item {
  display: flex;
  align-items: center;
}

.sidebar_count .count_value {
  margin-left: 5px;
  font-weight: 500;
}

.sidebar_count .count_item-total {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 5px;
}

.sidebar_count .count_item-total .count_value {
  font-size: 30px;
  font-weight: bold;
  margin-left: 0;
}

/* 페이지네이션 영역 */
.pagination_wrap {
  width: 100%;
  margin: 40px 0px 60px 0px;
}

/* 페이지네이션 영역 */
.pagination_wrap > ul {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* 페이지네이션 영역 */
.pagination_wrap > ul > li {
  flex: 0 1 auto;}

/* 페이지네이션 영역 */
.pagination_wrap > ul > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}

/* 페이지네이션 영역 */
.pagination_wrap > ul > li > a.current {
  background-color: #333;
  color: #fff;
  font-weight: bold;
  margin: 0px 5px;
}

/* 페이지네이션 영역 */
.pagination_wrap .p_btn {
  width: 30px;
  height: 30px;
  padding: 15px;
  border-radius: 50%;
  background-color: transparent;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}

/* 페이지네이션 영역 - hover 시 shake 애니메이션 */
.pagination_wrap a.p_btn:hover i.fa-chevron-left,
.pagination_wrap a.p_btn:hover i.fa-chevron-right {
  animation: fa-shake 1.5s;
}

/* href 자체가 없는 a 태그 */
.pagination_wrap a.p_btn:not([href]) {
  color: lightgray;
  cursor: default;
  pointer-events: none; /* 클릭 방지 */
}

/* ------------------------- */
/* ------------------------- */
/* 메인 콘텐츠 영역 */
/* ------------------------- */
/* ------------------------- */
#content {
  width: calc(100% - 264px + 80px);
  max-width: 100%;
  color: #333;
}

h2.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid #9A9A9A;
}

h2.title .more {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  color: #444;
  margin-left: auto;
  position: relative;
}

h2.title .more i {
  font-size: 25px;
  margin-left: 8px;
  display: inline-block;
  line-height: 1;
}

h2.title .more:hover {
  animation: fa-bounce 1s infinite;
}

h2.title .control_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  color: #444;
  margin-left: auto;
}

h2.title .control_box button {
  width: 30px;
  height: 30px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
}

h2.title .control_box button i {
  font-size: 25px;
  color: #444;
  transition: transform 0.3s ease, color 0.3s ease;
}

h2.title .control_box button.disabled {
  opacity: 0.3;
  pointer-events: none;
}


/* ------------------------- */
/* 비밀 글 */
/* ------------------------- */
.content_lock {
  max-width: 400px;
  margin: 40px auto;
  text-align: center;
}

.lock_message p {
  font-size: 15px;
  color: #444;
  margin-bottom: 16px;
}

.password_form .form_row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.input_password {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 200px;
  box-sizing: border-box;
}

.input_password:focus {
  outline: none;
  border-color: #999;
}

.unlock_button {
  padding: 8px 12px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.unlock_button:hover {
  background-color: #ddd;
}

.unlock_button i {
  margin-right: 5px;
  font-size: 16px;
  color: #333;
}

/* ------------------------- */
/* 포스팅 글 */
/* ------------------------- */
/* 제목 전체 박스 */
.content_title_article {
  position: relative;
  padding: 30px 20px 20px;
  margin-bottom: 25px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* 페이지 제목 전체 박스 */
.page_title_article {
  background: white;
}

/* 윗줄 카테고리 박스 스타일 */
.article_category {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #2C2C2C;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  z-index: 2;
  line-height: 1;
}

/* 제목 */
.content_title_article h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.4;
  word-break: keep-all;
  color: #333;
  letter-spacing: -0.3px;
}

/* 메타 정보 */
.article_information ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding-top: 12px;
  margin: 0;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #666;
  list-style: none;
}

.article_information ul li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 아이콘 공통 */
.article_information i {
  font-size: 14px;
  color: #aaa;
}

/* 관리자 버튼 */
.article_information .admin {
  position: relative;
}

/* 관리자 버튼 */
.article_information .admin i {
  font-size: 14px;
  color: #aaa;
}

/* 톱니바퀴 아이콘 버튼 */
.admin_button {
  z-index: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.admin_button:hover {
  font-weight: bold;
}

.admin_button:hover i.fa-gear {
  animation: fa-spin 1s infinite linear;
}

/* 드롭다운 메뉴 */
.admin_menu {
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  z-index: 10;
  min-width: 160px;
  font-size: 14px;
}

/* 목록 전체 */
.admin_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0px;
  flex-direction: column; /* 세로 정렬 */
}

/* 항목 하나씩 */
.admin_menu ul li {
  width: 100%;
  padding: 0; /* 패딩은 a에 적용 */
  gap: 0px;
  border: 1px solid #ddd;;
  display: block;
}

/* 클릭 영역 a 태그 */
.admin_menu li a {
  display: block;
  width: 100%;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
  transition: background-color 0.2s ease;
}

.admin_menu li a:hover {
  background-color: #f0f0f0;
}

/* ------------------------- */
/* 포스팅 내부 요소 */
/* ------------------------- */

/* 본문 텍스트 */
.content_article {
  margin-top: 30px;
  min-width: 0;
  font-size: 17px;
  line-height: 1.7;
  word-break: keep-word;
}

/* 이미지 */
.content_article img {
  max-width: 100%;
  height: auto;
  margin: 20px 0px;
  border-radius: 8px;
}

/* 제목 계층 구조 */
.content_article h2 {
  margin: 20px 0px;
}

.content_article h3 {
  margin: 17px 0px;
}

.content_article h4 {
  margin: 15px 0px;
}

.content_article h5 {
  margin: 12px 0px;
}

#tt-body-page h2[data-ke-size], 
#tt-body-page h3[data-ke-size], 
#tt-body-page h4[data-ke-size] {
  font-weight: bold;
}

.content_article h2 span,
.content_article h3 span,
.content_article h4 span,
.content_article h5 span {
  display: inline-block;
  border-radius: 8px;
  padding: 5px;
}

/* a 태그 링크 */
.content_article a {
  position: relative;
  color: #0077cc;
  text-decoration: none;
  font-weight: 500;
}

.content_article a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #0077cc;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.content_article a:hover::after {
  transform: scaleX(1);
}

/* 단락 */
.content_article p {
  margin: 0 0 16px;
}

/* 리스트 */
.content_article ol,
.content_article ul {
  padding-left: 24px;
  margin: 24px;
}
.content_article ol li,
.content_article ul li {
  margin-bottom: 5px;
}

/* 강조 설명 (결과 블록 등) */
.content_article .highlight-box {
  background-color: #fff8dc;
  border-left: 4px solid #f1c40f;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

/* 수평선 스타일 */
.content_article hr {
  border: 1px dashed #ccc;
  margin: 40px 0px;
}

/* 이미지 스타일 */
.content_article figure {
  margin: 20px 0px !important;
}

/* 테이블 스타일 */
.txc-table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  text-align: left;
  border: 1px solid #ddd;
  background-color: #fff;
  display: block;
  overflow-x: auto; /* 반응형 스크롤 */
  white-space: nowrap; /* 줄바꿈 방지 */
}

.txc-table th,
.txc-table td {
  border: 1px solid #ddd;
  padding: 12px 14px;
}

.txc-table thead {
  background-color: #f9f9f9;
  font-weight: bold;
}

.txc-table tr:nth-child(even) {
  background-color: #fcfcfc;
}

.content_article pre {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  width: 100%; 
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  contain: inline-size;
}

/* 코드 하이라이트 */
.hljs {
  white-space: pre;
  overflow-x: auto;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  margin-bottom: 5px;
  font-size: 14px;
  border-radius: 10px;
  color: #cfd2d1;
  background-color: #282c34;
}

.hljs .line {
  counter-increment: line-idx;
  line-height: 1.5;
}
.hljs .line:hover {
  background-color: #262830;
}
.hljs .line:hover::before {
  color: #cfd2d1;
}
.hljs .line::before {
  content: counter(line-idx);
  width: 24px;
  display: inline-block;
  text-align: right;
  margin-right: 16px;
  font-size: 0.8rem;
  color: #747a7a;
}
.hljs .code-header {
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 8px;
  background-color: #434041;
  border-radius: 8px 8px 0 0;
}
.hljs .code-header .btn {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 5px;
}
.hljs .code-header .btn.red {
  background-color: #f5655b;
}
.hljs .code-header .btn.yellow {
  background-color: #f6bd3b;
}
.hljs .code-header .btn.green {
  background-color: #43c645;
}
.hljs .code-body {
  max-height: 600px;
  margin: 28px 8px 0px 8px;
  overflow: auto;
}
.hljs .code-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.hljs .code-body::-webkit-scrollbar-thumb {
  background: radial-gradient(#f6bd3b, #f5655b);
  border-radius: 4px;
}
.hljs .code-body::-webkit-scrollbar-corner {
  display: none;
}
.hljs .copy-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 0.75rem;
  padding: 6px 0;
  width: 64px;
  border-radius: 4px;
  margin-left: auto;
  transition: 0.2s background-color;
}
.hljs .copy-btn:hover {
  background-color: #555152;
}

/* blockquote 스타일 */
blockquote {
  border-left: 4px solid #ddd;
  padding: 14px 18px;
  margin: 20px 0;
  font-style: italic;
  color: #444;
  transition: all 0.3s ease;
}

/* blockquote 안의 a, p 같은 요소에 마우스를 올리면 blockquote 강조 */
blockquote[data-ke-style="style2"] a:hover,
blockquote[data-ke-style="style2"] p:hover,
blockquote[data-ke-style="style2"] span:hover {
  background-color: #ddd;
}

/* 접기/펼치기 버튼 기본 스타일 */
[data-ke-type="moreLess"] .btn-toggle-moreless {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px 8px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* ::before로 아이콘 삽입 (fa-angles-down ⇩) */
[data-ke-type="moreLess"] .btn-toggle-moreless::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f103";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
  transition: transform 0.2s ease;
}

.content_article table[data-ke-style] {
  margin: 10px 0px;
}

/* ------------------------- */
/* 본문 기타 요소 */
/* ------------------------- */
/* 카테고리의 다른 글 */
/* 카테고리 다른글 */
.another_category_color_gray{
  border: 1px solid #E1E1E1;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

div.another_category h4 {
  color: #000 !important;
  font-weight: bold;
  font-size:16px !important;
}
div.another_category h4 a {
  font-weight: bold;
  color: #000 !important;
}

.another_category table th,
.another_category table td {
  font-size: 14px !important;
  margin: 10px !important;
  white-space :nowrap !important;
  color: #333 !important;
}

.another_category th span {
  color: #333 !important;
  font-size: 14px !important;
}

.another_category a {
  color:#333 !important;
}

/* 마우스 오버 효과 */
.another_category a:hover {
  color: #2C2C2C;
  font-weight: bold;
}

.another_category th a::before {
  content: "\f15c"; /* fa-file-alt 아이콘의 유니코드 */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  margin-right: 6px;
  color: #333;
  font-size: 14px;
}

/* 선택글 색상 변경 */
.another_category th a.current {
  color: #7a583a;
  border-bottom: none !important;
}

/* 테두리 숨기기 */
.another_category th {
  border: none !important;
  transition: all 0.2s ease;
}

/* 마우스 오버 전 색상 */
.another_category table th a.current {
  color: #333 !important;
}

/* 태그 */
.article_tag {
  font-size: 14px;
  color: #666;
  margin: 20px 0px;
}

.article_tag_list a {
  display: inline-block;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.article_tag_list a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f02b";
  margin-right: 6px;
  display: inline-block;
  color: #aaa;
  transition: color 0.2s ease;
}

.article_tag_list a:hover {
  background-color: #f1f1f1;
  color: #000;
  transform: scale(1.05);
}

.article_tag_list a:hover::before {
  color: #000;
}

/* 좋아요 버튼 */
.container_postbtn {
  padding: 35px 0px 10px 0px !important;
}

/* 작성자 프로필 */
.tt_box_namecard {
  min-height: 150px !important;
  border-radius: 10px;
}

/* 관련 글 */
.related {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid #e1e1e1;
}

.related h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ------------------------- */
/* 본문 댓글, 방명록 */
/* ------------------------- */

/* 티스토리 기본 댓글 */
.tt-comment-cont,
.tt-comment-cont * {
  font-family: inherit !important;
  line-height: 1.6;
}

.tt-wrap-cmt .tt-link-user {
  font-weight: 600;
  font-size: 16px;
}

.tt-box-total::before {
  font-family: "Font Awesome 6 Free"; /* 또는 Font Awesome 5/6에 맞게 수정 */
  font-weight: 400; /* fa-regular */
  content: "\f4ad"; /* fa-comment-dots 코드 */
  margin-right: 6px;
  display: inline-block;
}

 .tt-box-textarea .tt-inner-g {
  resize: none;
  overflow: hidden;
  border-radius: 10px;
}

.tt-comment-cont {
  display: flex;
  flex-direction: column;
}

.tt-area-write {
  order: -1; /* 작성 폼을 맨 위로 */
  margin: 20px 0px;
}

.tt-area-reply {
  order: 1;
}

.tt-list-reply {
  display: flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
}

/* ------------------------- */
/* 공지사항 */
/* ------------------------- */
.list_content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  transition: box-shadow 0.2s ease;
}

.list_content:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 썸네일 */
.list_content img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 6px;
}

/* 제목 및 요약 */
.link_post {
  text-decoration: none;
}

.tit_post {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-top: 10px;
}

.txt_post {
  font-size: 14px;
  color: #555;
  margin-top: 6px;
  line-height: 1.6;
}

/* 상세 정보 (카테고리 + 날짜) */
.detail_info {
  font-size: 13px;
  color: #666;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.link_cate {
  color: #0077cc;
  text-decoration: none;
  font-weight: 500;
}

.link_cate:hover {
  text-decoration: underline;
}

.txt_bar::before {
  content: "•";
  margin: 0 6px;
  color: #ccc;
}

/* ------------------------- */
/* 공통 스타일 */
/* ------------------------- */
.cover_common {
  margin-bottom: 50px;
}

.cover_common .top_info span:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #E1E1E1;
  margin: 0 8px;
}

.cover_common .post_title {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.cover_common .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 20px;
}

/* ------------------------- */
/* cover_type1 */
/* ------------------------- */
.cover_type1 .tab_box > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cover_type1 .tab_box > ul > li {
  width: auto;
  margin: 0 !important;
  border-radius: 20px;
  border: 1px solid #fff;
}

.cover_type1 .tab_box > ul > li > a {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 20px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.cover_type1 .tab_box > ul > li:hover {
  border: 1px solid #333;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.cover_type1 .tab_box > ul > li > a:hover i.fa-regular {
  animation: fa-bounce 1s;
}

.cover_type1 .tab_box .img_box {
  width: 100%;
  height: 210px;
  overflow: hidden;
  border: 1px solid #E1E1E1;
  border-radius: 20px;
  margin-bottom: 20px;           /* 이미지 아래 여백 */
  background-image: url('./images/no_image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cover_type1 .tab_box .info_box {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0 10px 10px 10px;
}

.cover_type1 .tab_box .post_cont {
  display: none;
}

/* ------------------------- */
/* cover_type2 & cover_type3 (탭 리스트) */
/* ------------------------- */
.tab_box {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab_box.active {
  display: block;
  opacity: 1;
}

.tab_box > ul {
  display: flex;
  flex-direction: column;
}

.tab_box > ul > li {
  flex: 0 1 auto;
  width: 100%;
}

.tab_box > ul > li:not(:last-child) {
  margin-bottom: 30px;
}

.tab_box > ul > li > a {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding: 5px;
  border-radius: 20px;
}

.tab_box .info_box {
  display: flex;
  flex-direction: column;
  width: calc(100% - 260px);
}

.tab_box .post_title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.tab_box .post_cont {
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

.tab_box .img_box {
  width: 260px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #E1E1E1;
  border-radius: 20px;
  background-image: url('./images/no_image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 아이콘 바운스 애니메이션 추가 */
.tab_box > ul > li > a:hover i.fa-regular{
  animation: fa-bounce 1s;
}

.tab_box > ul > li > a:hover .info_box span {
  font-weight: bold;
  color: #2C2C2C;
}

.tab_box .more_btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: #444;
  font-size: 20px;
  font-weight: bold;
  margin: 30px 0px;
  background-color: transparent;
}
.tab_box .more_btn i {
  margin-right: 8px;
}
.tab_box .more_btn:hover {
  animation: fa-bounce 1s infinite;
}

.cover_type2 .tab_box > ul > li > a:hover .info_box .post_title, 
.cover_type3 .tab_box > ul > li > a:hover .info_box .post_title {
  text-decoration: underline;
  text-underline-position: under;
  font-weight: bold;
  color: #2C2C2C;
}

.cover_type3 .tab_box > ul > li > a {
  flex-direction: row-reverse;
}

/* ------------------------- */
/* cover_type4 (슬라이드 캐러셀) */
/* ------------------------- */
.slide_box {
  width: 100%;
  height: 460px;
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slide_box::-webkit-scrollbar {
  display: none;
}

.slide_box > ul.cover_type4_list {
  display: inline-flex;
  width: max-content;
  height: 100%;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  position: absolute;
  left: -30px;
  top: 0;
  padding-left: 30px;
  overflow: hidden;
}

.slide_box > ul.cover_type4_list > li {
  flex: 0 0 auto;
  width: 380px;
  height: 100%;
  margin-left: 20px;
}

.slide_box > ul.cover_type4_list > li:first-child {
  margin-left: 0;
}

.slide_box > ul.cover_type4_list > li > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 20px;
  border: 1px solid #E1E1E1;
  overflow: hidden;
}

.slide_box > ul.cover_type4_list > li > a:hover {
  border: 1px solid #333;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.slide_box > ul.cover_type4_list > li > a:hover i.fa-regular {
  animation: fa-bounce 1s;
}

.cover_type4_list .img_box {
  width: 100%;
  height: 275px;
  overflow: hidden;
  background-image: url('./images/no_image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cover_type4_list .info_box {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
}


/* 탑 버튼 */
#goTopBtn {
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 999;
  width: 50px;
  height: 50px;
  background-color: transparent;
  color: #C0C0C0;
  border: none;
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  display: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

#goTopBtn:hover {
  animation: fa-beat 0.8s infinite;
}

/* ------------------------- */
/* 애드센스 광고 영역 */
/* ------------------------- */
.ads_section_top {
  margin-top: 40px;
}

.ads_section_bottom {
  margin: 20px;
}

/* 광고 영역에서는 flex를 끔 */
.ads_wrap {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
}

.ads_wrap_dual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
  justify-items: stretch;
}

.ads_item {
  width: 100%;
}

/* 광고 태그는 반드시 블록 + 100% 폭 */
.ads_item .adsbygoogle {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* PC 전용 광고 (모바일에서 숨김) */
.ad_pc_only {
  display: block;
}


@media screen and (max-width:1919px) {
  /* slide_box 캐러셀 */
.slide_box > ul.cover_type4_list {
    padding-left: 0;
    left: 0;
  }

  /* PC 검색창 숨김 */
  .search_wrap.mobile_only {
    display: none;
  }
}

/* 반응형 설정: 1420px 이하 */
/* 반응형 디자인 - 태블릿/데스크톱 */
@media screen and (max-width: 1420px) {
  .header_wrap {
    padding: 0 50px;
  }

  .header_wrap .menu_wrap {
    max-width: 100%;
  }

  .footer_wrap .footer_box {
    padding: 0 50px;
  }

  #content_wrap {
    padding: 50px;
  }
}

@media screen and (max-width: 1220px) {
  .header_wrap {
    padding: 0 20px;
  }

  #content_wrap {
    flex-direction: column;
    padding: 20px;
  }

  #content {
    order: 1;
    width: 100%;
  }

  .sidebar_wrap {
    order: 2;
    width: 100%;
  }

  .sidebar_element {
    column-count: 2;
    width: auto;
  }

  .content_title_article {
    margin: 10px 0;
  }
}

/* 태블릿 반응형 */
@media screen and (max-width: 1100px) {
  .header_wrap .header_banner {
    border-radius: 0;
    padding: 0 25px;
    max-height: 80px;
    justify-content: left;
    flex-direction: row;
  }

  .search_wrap.pc_only {
    display: none;
  }
  
  .header_wrap.menu_open .menu_wrap,
  .header_wrap.menu_open .search_wrap.mobile_only {
    display: block;
  }

  .header_wrap .search_wrap.mobile_only {
    margin-top: 15px;
  }

  .header_wrap .menu_wrap {
    display: none;
    flex-direction: column;
    position: relative;
    z-index: 1000;
    background-color: #fff;
  }

  .header_wrap .menu_wrap .menu_box,
  .header_wrap .menu_wrap .menu_box_category {
    display: block;
    width: 100%;
    padding: 20px;
    z-index: 1000;
    background-color: #fff;
  }

  .header_wrap .menu_wrap .menu_box ul,
  .header_wrap .menu_wrap .menu_box_category .category_list {
    flex-direction: column;
    width: 100%;
  }

  .header_wrap .menu_wrap .menu_box ul > li,
  .header_wrap .menu_wrap .menu_box_category .category_list > li {
    width: 100%;
    margin-bottom: 10px;
  }

  .menu_box ul::before,
  .menu_box_category .category_list::before {
    width: 0;
    height: 0;
  }

  .header_wrap .menu_wrap .menu_box_category .sub_category_list {
    display: none;
  }

  .header_menu {
    display: block;
  }

  h2 .title {
    font-size: 25px;
  }
}

/* 모바일 반응형 */
@media screen and (max-width: 700px) {
  .header_wrap, 
  .header_banner {
    padding: 0;
  }
  
  .header_wrap .menu_wrap {
    max-width: 100%;
  }

  .footer_wrap .footer_box {
    padding: 0 30px;
  }

  .sidebar_element {
    column-count: 1;
    width: auto;
  }

  h2.title {
    font-size: 25px;
  }

  .ads_item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .ad_pc_only {
    display: none;
  }

  .cover_type1 .tab_box > ul { 
    grid-template-columns: repeat(2, 1fr); 
  }
}

/* 소형 모바일 */
@media screen and (max-width: 560px) {

  .cover_type1 .tab_box > ul { 
    grid-template-columns: 1fr; 
  }
  
  .cover_common .img_box img,
  .cover_type1 .tab_box .img_box {
    height: 270px;
  }

  .cover_type2 .tab_box > ul > li > a, 
  .cover_type3 .tab_box > ul > li > a {
    flex-direction: column;
    gap: 0;
  }

  .tab_box .info_box {
    width: 100%;
    padding: 0;
    padding-right: 20px;
  }

  .tab_box .img_box {
    width: 100%;
    height: 250px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 500px) {
  .footer_wrap .footer_box {
    flex-direction: column;
  }
  
  .footer_wrap .footer_box span {
    text-align: center;
  }
  
  .footer_wrap .footer_box span.copy {
    margin-left: 0;
  }
}