/* =================================
  Common Subpage Styles
  ================================= */

/* Subpage Banner */
.sub-banner {
   height: 450px;
   color: #333; /* 텍스트 색상 변경 */
   text-align: center;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 1; /* 투명도 제거 */
}

.sub-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* 오버레이 제거 */
    z-index: 2;
}

.sub-banner .container {
   position: relative;
   z-index: 3;
}

.sub-banner .sub-category {
   font-size: 1.1rem;
   font-weight: 500;
   margin-bottom: 10px;
   color: #333; /* 텍스트 색상 변경 */
}
.sub-banner .sub-title {
   font-size: 2.8rem;
   font-weight: 700;
   color: #333; /* 텍스트 색상 변경 */
}
.sub-banner .sub-author {
   font-size: 1.1rem;
   margin-top: 15px;
   color: #333; /* 텍스트 색상 변경 */
}

/* Subpage Content */
.sub-content {
   padding: 100px 0;
   background-color: #fff; 
}
.content-container {
   max-width: 1000px;
   margin-left: auto; /* 좌우 마진을 auto로 설정하여 가운데 정렬 */
   margin-right: auto; /* 좌우 마진을 auto로 설정하여 가운데 정렬 */
   padding: 0 20px;
}
.sub-content p {
   font-size: 1.1rem;
   line-height: 1.8;
   margin-bottom: 30px;
   color: #555;
   word-break: keep-all;
}
.sub-content figure {
   margin: 60px 0;
}
.sub-content figcaption {
   text-align: center;
   margin-top: 15px;
   font-size: 0.9rem;
   color: #888;
}

/* Post Navigation (Style Updated) */
.post-nav {
   border-top: 1px solid #eee;
   padding: 25px 0;
   background-color: #fff;
}
.post-nav .container {
   max-width: 1000px;
   display: flex;
   justify-content: space-between;
   align-items: center; 
}
.post-nav .nav-item {
   padding: 10px 20px;
   border: 1px solid #ddd;
   border-radius: 5px; /* 이전 호 스타일 적용 */
   font-weight: 600;
   color: #333;
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.post-nav .nav-item:hover {
   background-color: var(--main-color);
   border-color: var(--main-color);
   color: #fff;
}
.post-nav .prev::before { content: '‹ '; } /* 이전 호 스타일 적용 */
.post-nav .next::after { content: ' ›'; } /* 이전 호 스타일 적용 */

.post-nav .nav-item.home {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px; /* 이전 호 스타일 적용 */
    width: auto;
    height: auto;
    border-radius: 5px; /* 이전 호 스타일 적용 */
}

.home-icon {
    width: 20px; /* 이전 호 스타일 적용 */
    height: 20px; /* 이전 호 스타일 적용 */
}

.home-icon path {
    fill: #333;
    transition: fill 0.3s ease;
}

.post-nav .nav-item.home:hover .home-icon path {
    fill: #FFF;
}