/* 페이지 전체를 감싸는 최상위 컨테이너 */
    .about-page-container {
        max-width: 1653px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 24px;
    }

    /* 최상단 이미지 배너 (Full-width) */
    .about-top-banner {
        width: 100%;
        height: 450px; /* 배너 높이 지정 */
        background-image: url('https://i.imgur.com/uN1F1sH.jpg'); /* 원본과 유사한 임시 이미지 적용 */
        background-size: cover;
        background-position: center;
        margin-bottom: 120px; /* 배너와 아래 콘텐츠 사이의 간격 */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    /* 배너 안의 텍스트를 감싸는 컨테이너 */
    .about-top-banner .banner-text-wrapper {
        /* 중앙 정렬을 위해 별도 속성 불필요 */
    }
    /* 상단 메인 텍스트 스타일 수정 */
    .about-top-banner .banner-text {
        font-size: 28px; /* 폰트 크기 증가 */
        font-weight: 500; /* 폰트 굵기 증가 */
        color: #555;
        line-height: 1.6; /* 줄 간격 조정 */
        margin: 0;
    }
    /* 상단 서브 텍스트 스타일 추가 */
    .about-top-banner .banner-subtext {
        font-size: 15px;
        color: #777;
        margin-top: 15px; /* 메인 텍스트와의 간격 */
    }


    /* "창비는" 소개 섹션 */
    .about-intro-section {
        max-width: 860px; /* 이미지에 보이는 텍스트 영역의 너비에 맞춤 */
        margin: 0 auto 120px auto; /* 중앙 정렬 및 아래쪽 여백 */
    }
    .about-intro-section .intro-title {
        font-size: 28px; /* 이미지 기준 폰트 크기 */
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 35px;
    }
    .about-intro-section .intro-text {
        font-size: 16px;
        color: #555;
        line-height: 1.85;
        text-align: justify;
        margin-bottom: 1.85em;
    }
    .about-intro-section .intro-text:last-of-type {
        margin-bottom: 0;
    }

    /* 공통 섹션 레이아웃 (연혁, 사진 역사) */
    .about-content-section {
        display: flex;
        border-top: 1px solid #f0f0f0; /* 섹션 상단 구분선 */
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .about-content-section:last-of-type {
        padding-bottom: 0;
    }

    /* 섹션 - 좌측 컬럼 (제목, 서브메뉴) */
    .section-left {
        width: 280px; /* 좌측 컬럼 너비 고정 */
        flex-shrink: 0;
        margin-right: 80px; /* 좌우 컬럼 사이 간격 */
    }
    .section-left .section-title {
        font-size: 28px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.4;
        margin-bottom: 40px;
    }

    /* 좌측 서브메뉴(탭) 스타일 */
    .section-submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        border-top: none; /* 기존 상단 라인 제거 */
    }
    .section-submenu li {
        font-size: 16px;
        font-weight: 500;
        color: #495057; /* 비활성 탭 텍스트 색상 */
        background-color: #f1f3f5; /* 비활성 탭 배경 색상 */
        padding: 12px 20px;
        border-bottom: none; /* 기존 하단 라인 제거 */
        cursor: pointer;
        border-radius: 8px; /* 둥근 모서리 */
        margin-bottom: 12px; /* 탭 간격 */
        text-align: center;
        transition: background-color 0.2s, color 0.2s;
    }
    .section-submenu li:last-child {
        margin-bottom: 0;
    }
    .section-submenu li.active {
        color: #fff; /* 활성 탭 텍스트 색상 */
        background-color: #343a40; /* 활성 탭 배경 색상 */
        font-weight: 700;
    }

    /* 섹션 - 우측 컬럼 (콘텐츠) */
    .section-right {
        flex-grow: 1; /* 남은 공간을 모두 차지 */
        padding-top: 10px; /* 제목과 높이 미세 조정 */
    }
    
    /* 탭 콘텐츠 스타일 */
    .tab-pane {
        display: none; /* 탭 콘텐츠는 기본적으로 숨김 */
    }
    .tab-pane.active {
        display: block; /* active 클래스가 붙은 콘텐츠만 보임 */
    }

    /* 우측 콘텐츠 블록 (연도별, 사진별) */
    .content-block {
        margin-bottom: 80px;
    }
    .content-block:last-child {
        margin-bottom: 0;
    }
    .content-block .content-year,
    .content-block .content-date {
        font-size: 24px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 25px;
    }
    .content-block .content-description {
        font-size: 16px;
        color: #555;
        line-height: 1.85;
    }
    .content-block .content-photo {
        max-width: 100%;
        height: auto;
    }

    /* 반응형 스타일 (화면 너비 1024px 이하) */
    @media (max-width: 1024px) {
        .about-top-banner {
            height: 30vh;
            min-height: 250px;
            margin-bottom: 80px;
        }
        .about-intro-section {
            margin-bottom: 80px;
        }
        .about-content-section {
            flex-direction: column;
            padding-top: 60px;
            padding-bottom: 60px;
        }
        .section-left {
            width: 100%;
            margin-right: 0;
            margin-bottom: 40px;
        }
        .section-left .section-title {
            margin-bottom: 20px;
        }
        .section-submenu {
            display: none; /* 모바일에서는 여전히 숨김 처리 */
        }
        .section-right {
            padding-top: 0;
        }
        .tab-pane {
            display: block; /* 모바일에서는 모든 콘텐츠 표시 */
        }
    }



    /* 매거진 페이지 커스텀 스타일 */
    .magazine-container {
        max-width: 1653px; /* 너비 수정 */
        margin-left: auto;
        margin-right: auto;
        padding: 48px 24px; /* 좌우 패딩 추가 */
    }

    .magazine-section {
        text-align: center;
        padding-bottom: 64px;
    }

    .magazine-section.bordered {
        border-top: 1px solid #e5e7eb;
    }

    .magazine-image {
        width: 224px; /* 이미지 크기 조정 */
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        margin-bottom: 32px;
    }

    .magazine-subtitle {
        font-size: 16px; /* 폰트 크기 수정 */
        color: #6b7280;
        margin-bottom: 8px;
    }

    .magazine-title {
        font-size: 42px; /* 폰트 크기 수정 */
        font-weight: 700;
        margin-bottom: 24px; /* 마진 조정 */
        letter-spacing: -0.05em;
    }

    .magazine-paragraph {
        max-width: 964px; /* 문단 너비 조정 */
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        color: #4b5563;
        font-size: 18px; /* 폰트 크기 수정 */
        line-height: 1.8;
        margin-bottom: 32px;
    }
    
    .magazine-button-group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .btn-primary {
        display: inline-block;
        background-color: #111827;
        color: #ffffff;
        padding: 14px 28px; /* 버튼 크기 조정 */
        font-size: 16px; /* 폰트 크기 수정 */
        font-weight: 500;
        text-decoration: none;
        border-radius: 10px;
    }
    .btn-primary:hover {
        background-color: #374151;
    }

    .like-button {
        color: #6b7280;
        font-size: 16px; /* 폰트 크기 수정 */
        background: none;
        border: none;
        cursor: pointer;
    }
    .like-button:hover {
        color: #111827;
    }
    .like-button svg {
        display: inline-block;
        height: 22px; /* 아이콘 크기 조정 */
        width: 22px;
        margin-top: -4px;
        vertical-align: middle;
    }

    .book-list-title {
        font-size: 22px; /* 폰트 크기 수정 */
        font-weight: 600;
        margin-bottom: 32px; /* 마진 조정 */
        text-align: left;
    }

    .book-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px 32px; /* 간격 조정 */
    }
    
    .book-item a {
        text-decoration: none;
        color: inherit;
    }
    .book-item a:hover .book-title {
        color: #3b82f6;
    }
    .book-item img {
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        margin-bottom: 16px; /* 마진 조정 */
        margin-left: auto;
        margin-right: auto;
        transition: box-shadow 0.3s ease-in-out;
    }
    .book-item a:hover img {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }
    .book-title {
        font-size: 16px; /* 폰트 크기 수정 */
        transition: color 0.3s ease-in-out;
    }

    /* 반응형 스타일 */
    @media (min-width: 640px) {
        .book-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (min-width: 1024px) { /* lg 브레이크포인트 */
        .book-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
    }

/* ▼▼▼ 계간지 최신 목록 스타일 시작 ▼▼▼ */
.latest-magazine-section {
    padding-top: 64px;
    margin-top: 64px;
    border-top: 1px solid #e5e7eb;
}

.latest-magazine-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
}

.latest-magazine-section .section-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.latest-magazine-section .section-header .more-link {
    font-size: 16px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.latest-magazine-section .section-header .more-link:hover {
    color: #111827;
}

.latest-magazine-grid {
    display: grid;
    gap: 40px 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    /* 모바일 기본: 2열 */
    grid-template-columns: repeat(2, 1fr);
}

.latest-magazine-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.latest-magazine-item .item-thumbnail {
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px; /* 썸네일에 약간의 둥근 모서리 추가 */
}

.latest-magazine-item .item-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.414; /* A4 비율과 유사하게 조정 */
    object-fit: cover;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
}

.latest-magazine-item .item-thumbnail .no-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1.414;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.latest-magazine-item a:hover .item-thumbnail img {
    transform: scale(1.05);
}

.latest-magazine-item .item-title {
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
    text-align: center;
}

.latest-magazine-grid .no-data {
    grid-column: 1 / -1; /* 그리드 전체 너비 차지 */
    text-align: center;
    padding: 60px 0;
    color: #6b7280;
    font-size: 16px;
}

/* 반응형 그리드 설정 */
@media (min-width: 768px) { /* 태블릿: 3열 */
    .latest-magazine-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) { /* 작은 데스크탑: 4열 */
    .latest-magazine-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) { /* 일반 데스크탑: 5열 */
    .latest-magazine-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
/* ▲▲▲ 계간지 최신 목록 스타일 끝 ▲▲▲ */