/* =================================
  서브페이지 공통 스타일
  ================================= */

/* 서브페이지 배너 */
.sub-banner {
   height: 420px;
   color: #303030;
   text-align: center;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background-color: var(--banner-bg-color, #ccc);
}

/* 패럴랙스 배경 이미지 */
.banner-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%; 
    object-fit: cover;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 0.5;
}

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

.sub-banner .sub-category {
   font-size: 1.1rem;
   font-weight: 500;
   margin-bottom: 10px;
}
.sub-banner .sub-title {
   font-size: 2.8rem;
   font-weight: 700;
}
.sub-banner .sub-author {
   font-size: 1.1rem;
   margin-top: 15px;
}

/* 서브페이지 콘텐츠 */
.sub-content {
   padding: 80px 0;
   position: relative;
   z-index: 2;
   background-color: #fff; 
}
.content-container {
   max-width: 1000px;
}
.sub-content p {
   font-size: 1.1rem;
   line-height: 1.8;
   margin-bottom: 30px;
   color: #555;
   word-break: keep-all;
}
.sub-content figure {
   margin: 40px 0;
}
.sub-content figcaption {
   text-align: left;
   margin-bottom: 10px;
   font-size: 1rem;
   font-weight: 500;
   color: #333;
}

/* 하단 네비게이션 */
.post-nav {
   border-top: 1px solid #eee;
   padding: 20px 0;
   position: relative;
   z-index: 2;
   background-color: #fff;
}
.post-nav .container {
   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;
}
.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; 
}

.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;
}