/**
 * 메인페이지 버전4 전용 스타일
 * 2026-02-03: v2 기반으로 생성
 */

/* ========================================
   1. 전체 너비 히어로 슬라이더
   2026-02-03: 높이 500px 고정, 이미지 비율 유지 (가로 잘림 허용)
   ======================================== */

/* 2026-02-25: 히어로 — object-fit: cover 기반 반응형 */
.hero-fullwidth-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 500px;
}

.hero-fullwidth-section .heroSwiper {
    width: 100%;
    height: 100%;
}

.hero-fullwidth-section .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-fullwidth-section .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-fullwidth-section .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

/* 히어로 텍스트 오버레이 - 2026-02-03: 어두운 효과 제거 */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: none;
    z-index: 10;
}

/* 2026-02-03: 디자인 시스템 클래스(text-display, text-h2) 그대로 사용 */
.hero-text {
    text-align: center;
    /* 이미지 위에서 가독성을 위한 그림자만 추가 */
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.hero-text .text-h2 {
    margin-bottom: 8px;
}

.hero-text .text-display {
    margin-bottom: 8px;
}

/* 히어로 슬라이더 컨트롤 */
.hero-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-controls button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333;
    transition: color 0.2s;
}

.hero-controls button:hover {
    color: var(--accent-blue, #065c71);
}

.hero-controls .counter {
    font-size: 14px;
    color: #333;
    min-width: 50px;
    text-align: center;
}

/* 2026-02-03: v4 도트 인디케이터 스타일 - 검색창 겹침 고려하여 위치 조정 */
.heroSwiper .hero-pagination {
    position: absolute;
    bottom: 70px !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
    z-index: 10;
}

.heroSwiper .hero-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 4px;
}

.heroSwiper .hero-pagination .swiper-pagination-bullet-active {
    background: #fff;
    width: 24px;
    border-radius: 5px;
}

/* ========================================
   2026-02-03: v4 히어로 텍스트 오버레이
   - container-wrapper 기반 레이아웃으로 변경 (사이트 너비 1400px 기준 여백 적용)
   ======================================== */
.hero-overlay-v4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

/* 내부 컨테이너 - max-width: 1400px 적용 (layout.css의 container-wrapper 상속) */
.hero-overlay-v4 .container-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 텍스트 박스 기본 스타일 (text-shadow는 인라인으로 적용) */
.hero-text-v4 {
    width: 100%;
}

/* 정렬 옵션 - hero-text-v4에 직접 적용 */
.hero-text-v4.hero-align-left {
    text-align: left;
}

.hero-text-v4.hero-align-center {
    text-align: center;
}

.hero-text-v4.hero-align-right {
    text-align: right;
}

/* 2026-02-03: 수직 정렬 - container-wrapper에 적용 */
/* 여백은 hero-text-v4의 padding으로 상하좌우 공통 적용 */
.hero-overlay-v4 .container-wrapper.hero-valign-top {
    align-items: flex-start;
}

.hero-overlay-v4 .container-wrapper.hero-valign-center {
    align-items: center;
}

.hero-overlay-v4 .container-wrapper.hero-valign-bottom {
    align-items: flex-end;
}

/* 타이틀 - 반응형 폰트 */
.hero-title-v4 {
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
}

/* 설명 - 반응형 폰트 */
.hero-desc-v4 {
    font-size: clamp(14px, 2.5vw, 24px);
    font-weight: 400;
    line-height: 1.5;
}

/* 2026-02-04: 슬라이드별 텍스트 전환 효과 */
.hero-text-v4.hero-text-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.hero-text-v4.hero-text-slide.active {
    opacity: 1;
    visibility: visible;
}

/* 슬라이드 텍스트 정렬 보정 */
.hero-text-v4.hero-text-slide.hero-align-left {
    align-items: flex-start;
}

.hero-text-v4.hero-text-slide.hero-align-center {
    align-items: center;
}

.hero-text-v4.hero-text-slide.hero-align-right {
    align-items: flex-end;
}

/* container-wrapper 내부에서 슬라이드 텍스트 위치 */
.hero-overlay-v4 .container-wrapper {
    position: relative;
}

/* 2026-02-03: 모바일에서 숨김 (640px = 진짜 모바일) */
@media (max-width: 640px) {
    /* 전체 오버레이 숨김 (기존 호환성 유지) */
    .hero-overlay-v4.hide-mobile {
        display: none;
    }
    /* 2026-02-03: 타이틀/설명 개별 숨김 */
    .hero-title-v4.hide-mobile,
    .hero-desc-v4.hide-mobile {
        display: none;
    }
}

/* ========================================
   2. 전체 검색 창 섹션
   ======================================== */

/* 2026-02-26: 검색폼 높이(60px)의 절반만 히어로에 겹치도록 위치 조정 */
.search-section-v4 {
    background: transparent;
    padding: 0;
    margin-top: -30px;
    position: relative;
    z-index: 10;
}

/* 2026-02-03: 검색 섹션 배경을 1300px에 맞춤 */
/* 2026-02-26: 섹션 배경 제거 — 검색폼 테두리로 대체 */
.search-section-v4 .container-wrapper {
    background: transparent;
    margin-bottom: 48px;
}

.search-form-v4 {
    /* 2026-02-03: 퀵버튼 실제 너비와 동일 */
    max-width: 825px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border: 2px solid #1a5a7a;
    border-radius: 24px;
    overflow: hidden;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-form-v4:focus-within {
    border-color: var(--accent-blue, #065c71);
    box-shadow: 0 0 0 3px rgba(6, 92, 113, 0.1);
}

.search-form-v4 input {
    flex: 1;
    height: 60px;
    padding: 0 24px;
    font-size: 1.125rem;
    border: none;
    outline: none;
    background: transparent;
}

.search-form-v4 input::placeholder {
    color: #9ca3af;
}

.search-form-v4 button {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.search-form-v4 button:hover {
    background: #f3f4f6;
}

.search-form-v4 button img {
    width: 28px;
    height: 28px;
}

/* ========================================
   3. 퀵박스 가로 배치 섹션
   ======================================== */

/* ========================================
   3. PC/모바일 표시 전환
   2026-02-03: PC는 퀵버튼 6개, 모바일은 퀵박스
   ======================================== */
.pc-only {
    display: block;
}
.mobile-only {
    display: none;
}

@media (max-width: 1024px) {
    .pc-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}

/* ========================================
   3-1. PC 전용: 퀵버튼 6개 가로 배치 (네이버 스타일)
   2026-02-03: 미니멀 아이콘 + 텍스트 스타일
   ======================================== */
.quick-buttons-v4 {
    padding: 0;
    background: transparent;
}

/* 2026-02-26: container-wrapper는 좌우 패딩만 담당, 배경은 row에 적용 */
.quick-buttons-v4 .container-wrapper {
    margin-bottom: 48px;
}

.quick-buttons-row {
    background: #E7F1FA;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
}

.quick-btn-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 12px;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
}

.quick-btn-v4:hover {
    background: #CEE5F7;
}

.quick-btn-icon {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 2026-02-03: 배경 제거 */
}

/* 2026-02-26: 아이콘 테마 색상(#1a5a7a) 적용 */
.quick-btn-icon img {
    width: 60px;
    height: 60px;
    filter: invert(27%) sepia(50%) saturate(800%) hue-rotate(165deg) brightness(90%) contrast(90%);
}

/* 2026-02-26: SVG의 fill/stroke 모두 currentColor 사용 — color로 통일 제어 */
.quick-btn-icon svg {
    width: 60px;
    height: 60px;
    color: #1a5a7a;
    stroke-width: 1.5;
}

.quick-btn-label {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    text-align: center;
    white-space: nowrap;
}

/* ========================================
   3-2. 모바일 전용: 기존 퀵박스
   ======================================== */
.quickbox-section-v4 {
    padding: 40px 0;
}

.quickbox-section-v4 .container-wrapper {
    max-width: 100%;
}

/* 2026-02-03: 그리드에서 한 줄 가로 배치로 변경 */
.quickbox-grid {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.quickbox-grid .qucik_box {
    /* 2026-02-03: components.css의 width: calc(100%/2 - 15px) 오버라이드 */
    width: auto !important;
    flex: 1;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    height: auto;
}

.quickbox-grid .quickbox-header {
    margin-bottom: 16px;
}

.quickbox-grid .quickbox-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.quickbox-grid .quickbox-header p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.quickbox-grid .quickbox-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 퀵박스 색상 - v1 (components.css)과 동일 */
/* 2026-02-03: 색상 수정 - v1과 동일하게 */
.quickbox-grid .green_box_color {
    background: linear-gradient(135deg, #3eb8a8, #1a7a7a);
}

.quickbox-grid .blue_box_color {
    background: linear-gradient(135deg, #3e95b8, #1a5a7a);
}

/* 롤오버 효과는 components.css의 [class*="item_qu"] 스타일 사용 */

/* ========================================
   4. 반응형 스타일
   ======================================== */

/* 태블릿 (641px ~ 1024px) */
@media (max-width: 1024px) {
    /* 2026-02-25: 태블릿 히어로 높이 */
    .hero-fullwidth-section {
        height: 400px;
    }

    .hero-text .text-line-main {
        font-size: 2.5rem;
    }

    .hero-text .text-line-top,
    .hero-text .text-line-bottom {
        font-size: 1rem;
    }

    /* 2026-02-26: 태블릿/모바일 — 검색창 히어로 아래 간격 */
    .search-section-v4 {
        margin-top: 0;
        padding-top: 24px;
    }

    .search-section-v4 .container-wrapper {
        margin-bottom: 24px;
    }

    /* 2026-02-26: 태블릿/모바일 — 퀵버튼 섹션 좌우 여백 + 박스 유지 */
    .quick-buttons-v4 .container-wrapper {
        margin-bottom: 24px;
    }

    .quick-buttons-row {
        padding: 20px 16px;
    }

    .search-form-v4 {
        width: 100%;
    }

    .search-form-v4 input {
        height: 50px;
        font-size: 1rem;
    }

    .search-form-v4 button {
        width: 60px;
        height: 50px;
    }

    /* 2026-02-26: 태블릿 — 퀵버튼 3열, 세로 배치 (아이콘 위 + 라벨 아래) */
    .quick-buttons-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        max-width: none;
    }

    .quick-btn-v4 {
        flex-direction: column;
        gap: 4px;
        padding: 4px 12px;
        border-radius: 8px;
    }

    .quick-btn-icon {
        width: 48px;
        height: 48px;
    }

    .quick-btn-icon img,
    .quick-btn-icon svg {
        width: 36px;
        height: 36px;
    }

    .quick-btn-label {
        font-size: 0.9375rem;
        white-space: normal;
    }
}

/* 모바일 (~ 640px) */
@media (max-width: 640px) {
    /* 2026-02-03: v2와 동일 */
    .hero-fullwidth-section {
        height: 300px;
    }

    .hero-text .text-line-main {
        font-size: 1.75rem;
    }

    .hero-text .text-line-top,
    .hero-text .text-line-bottom {
        font-size: 0.875rem;
    }

    .hero-controls {
        bottom: 20px;
        padding: 6px 12px;
        gap: 8px;
    }

    .hero-controls button {
        width: 28px;
        height: 28px;
    }

    .hero-controls .counter {
        font-size: 12px;
    }

    /* 2026-02-26: 모바일 — 검색창 히어로 아래 간격 */
    .search-section-v4 {
        padding-top: 16px;
    }

    .search-section-v4 .container-wrapper {
        margin-bottom: 16px;
    }

    .search-form-v4 {
        max-width: none;
        width: 100%;
    }

    .search-form-v4 input {
        height: 48px;
        padding: 0 16px;
        font-size: 0.9375rem;
    }

    .search-form-v4 button {
        width: 56px;
        height: 48px;
    }

    .search-form-v4 button img {
        width: 24px;
        height: 24px;
    }

    /* 2026-02-26: 모바일 — 퀵버튼 2열, 세로 배치 (아이콘 위 + 라벨 아래) */
    .quick-buttons-v4 .container-wrapper {
        margin-bottom: 16px;
    }

    .quick-buttons-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 16px 12px;
    }

    .quick-btn-v4 {
        gap: 4px;
        padding: 4px 12px;
    }

    .quick-btn-icon {
        width: 40px;
        height: 40px;
    }

    .quick-btn-icon img,
    .quick-btn-icon svg {
        width: 28px;
        height: 28px;
    }

    .quick-btn-label {
        font-size: 0.875rem;
    }

    .quickbox-grid .qucik_box {
        min-height: auto;
        padding: 20px;
    }

    .quickbox-grid .quickbox-header h3 {
        font-size: 1.125rem;
    }
}

/* ========================================
   4-1. 게시판 박스 2개 (50:50)
   2026-02-03: v4 전용
   ======================================== */
.board-boxes-v4 {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

/* 2026-02-04: 상단/하단 행 모두 48px 하단 여백 */
.board-boxes-v4.board-row-top {
    margin-bottom: 48px;
}

.board-boxes-v4.board-row-bottom {
    margin-bottom: 48px;
}

/* ========================================
   학술대회 일정 (롤링 슬라이더)
   2026-02-04: 박스 스타일 + 하단 네비게이션
   ======================================== */
/* 학술대회 박스 스타일 - 배경색 #4BA59D, 라운드 없음 */
.conference-box {
    background: #447DC0;
    padding: 20px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

/* 2026-02-04: 배경 장식 SVG - 캘린더 아이콘 */
.conference-box::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -20px;
    width: 160px;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

/* 학술대회 헤더/텍스트 - 흰색 */
.conference-box .board-box-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom-color: rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.conference-box .board-box-header h3 {
    color: #fff;
}

.conference-box .board-box-header .more-link {
    color: rgba(255, 255, 255, 0.7);
}

.conference-box .board-box-header .more-link:hover {
    color: #fff;
}

.conference-box .board-box-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    z-index: 1;
}

.conference-slider {
    position: relative;
    display: flex;
    align-items: center;
}

.conferenceSwiper {
    width: 100%;
}

/* 2026-02-04: 학술대회 슬라이드 수직 중앙 정렬 */
.conferenceSwiper .swiper-slide {
    display: flex;
    align-items: center;
}

.conference-item {
    padding: 0;
    width: 100%;
}

.conf-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* 2026-02-04: 행 단위 레이아웃 - 레이블 + 값 */
.conf-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conf-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

.conf-label {
    flex-shrink: 0;
    width: 40px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

.conf-value {
    flex: 1;
    min-width: 0;
}

/* 2026-02-04: 자세히 버튼 */
.conf-btn-wrap {
    margin-top: 16px;
}

.conf-btn {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.conf-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
}

/* 2026-02-04: 하단 숫자 인디케이터 */
.conference-nav-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.conf-pagination {
    display: flex;
    gap: 8px;
}

.conf-pagination .swiper-pagination-bullet {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s;
}

.conf-pagination .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.3);
}

.conf-pagination .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 0.9);
    color: #4BA59D;
}

/* ========================================
   게시판 다른 스킨 (board-skin-alt)
   2026-02-04: 상단 우측 게시판 - 배경색 #223FA8, 라운드 없음
   ======================================== */
.board-skin-alt {
    background: #03367D;
    padding: 20px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

/* 2026-02-04: 배경 장식 SVG - 문서 아이콘 */
.board-skin-alt::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -20px;
    width: 160px;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.board-skin-alt .board-box-header {
    border-bottom-color: rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.board-skin-alt .board-box-content {
    position: relative;
    z-index: 1;
}

.board-skin-alt .board-box-header h3,
.board-skin-alt .board-tabs .tab-btn.active {
    color: #fff;
}

.board-skin-alt .board-tabs .tab-btn {
    color: rgba(255, 255, 255, 0.5);
}

.board-skin-alt .board-tabs .tab-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.board-skin-alt .board-box-header .more-link {
    color: rgba(255, 255, 255, 0.7);
}

.board-skin-alt .board-box-header .more-link:hover {
    color: #fff;
}

.board-skin-alt .board-box-content li.down_noti {
    padding: 8px 0;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.board-skin-alt .board-box-content li.down_noti:last-child {
    border-bottom: none;
}

.board-skin-alt .board-box-content .sub_txt strong {
    font-size: 1rem;
    color: #fff;
}

.board-skin-alt .board-box-content li.down_noti a:hover .sub_txt strong {
    color: #a0cfff;
}

.board-skin-alt .board-box-content .date {
    color: rgba(255, 255, 255, 0.6);
}

.board-skin-alt .board-box-content .board-state {
    color: rgba(255, 255, 255, 0.6);
}

.board-box-v4 {
    flex: 0 0 calc(50% - 12px);
    min-width: 0;
}

/* 2026-02-03: 게시판 헤더 - 제목 + 더보기, 하단 강조색 라인 */
.board-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px 0;
    border-bottom: 2px solid #1a5a7a;
    margin-bottom: 8px;
}

.board-box-header h3 {
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

/* 2026-02-04: 더보기 링크 - 화살표만 표시 */
.board-box-header .more-link {
    font-size: 1.25rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1;
}

.board-box-header .more-link:hover {
    color: #1a5a7a;
}

.board-box-content {
    padding: 0;
}

.board-box-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.board-box-content li {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.board-box-content li:last-child {
    border-bottom: none;
}

.board-box-content li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.board-box-content li a:hover {
    color: #1a5a7a;
}

.board-box-content .board-state {
    color: #9ca3af;
    text-align: center;
    padding: 20px 0;
}

/* 2026-02-03: v4 게시글 목록 스타일 */
.board-box-content li.down_noti {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.board-box-content li.down_noti:last-child {
    border-bottom: none;
}

.board-box-content li.down_noti a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #333;
}

.board-box-content li.down_noti a:hover .sub_txt strong {
    color: #1a5a7a;
}

/* 제목 - 기본 폰트 크기, 일반 두께 */
.board-box-content .sub_txt {
    flex: 1;
    min-width: 0;
    order: 1;
}

.board-box-content .sub_txt strong {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.board-box-content .sub_txt p {
    display: none;
}

/* 날짜 - 제목과 동일한 크기, 우측 배치 */
.board-box-content .date {
    flex-shrink: 0;
    font-size: 1rem;
    color: #9ca3af;
    order: 2;
}

/* ========================================
   4-2. 발간물 섹션 (전체 너비, 4개 가로 배치)
   2026-02-03: v4 전용
   ======================================== */
/* 2026-02-03: 배경 전체 너비 */
.publications-v4 {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-bottom: 48px;
    background: #EEEDE9;
}

/* 2026-02-25: justify-content → flex-start + gap으로 변경 (2개일 때 좌측 정렬) */
.publications-box-v4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 48px 20px;
}

.pub-item-v4 {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* 2026-02-04: 책 높이 240px, 비율 2:3 기준 너비 160px */
.pub-cover-v4 {
    width: 160px;
    height: 240px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 2026-02-04: 내용 영역 */
.pub-info-v4 {
    width: 160px;
    flex-shrink: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
}

.pub-title-v4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.pub-subtitle-v4 {
    font-size: 1rem;
    color: #6b7280;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* 2026-02-05: 버튼 컨테이너 (최대 3개 가로 배치) */
.pub-buttons-v4 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 각 책마다 버튼 */
.pub-btn-v4 {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #1a5a7a;
    color: #1a5a7a;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    flex: 1;
    min-width: 80px;
}

.pub-btn-v4:hover {
    background: #1a5a7a;
    color: #fff;
}

/* 반응형 - 태블릿 */
@media (max-width: 1024px) {
    .board-boxes-v4 {
        flex-direction: column;
        gap: 16px;
    }

    /* 2026-02-26: 태블릿 글자 크기 축소 */
    .board-box-header h3 {
        font-size: 1.25rem;
    }

    .conf-title {
        font-size: 1rem;
    }

    .conf-row {
        font-size: 0.9375rem;
    }

    /* 2026-02-26: 게시판 글 제목/날짜 축소 (일반 + board-skin-alt 포함) */
    .board-box-content .sub_txt strong,
    .board-skin-alt .board-box-content .sub_txt strong {
        font-size: 1rem;
    }

    .board-box-content .date,
    .board-skin-alt .board-box-content .date {
        font-size: 0.875rem;
    }

    .publications-box-v4 {
        gap: 32px;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 640px) {
    /* 2026-02-26: 모바일 글자 크기 추가 축소 */
    .board-box-header h3 {
        font-size: 1.125rem;
    }

    .conf-title {
        font-size: 0.9375rem;
    }

    .conf-row {
        font-size: 0.875rem;
    }

    /* 2026-02-26: 게시판 글 제목/날짜 추가 축소 (일반 + board-skin-alt 포함) */
    .board-box-content .sub_txt strong,
    .board-skin-alt .board-box-content .sub_txt strong {
        font-size: 0.9375rem;
    }

    .board-box-content .date,
    .board-skin-alt .board-box-content .date {
        font-size: 0.8125rem;
    }

    /* 2026-02-25: 모바일 발간물 — 세로 배치 + 유동 너비 */
    .publications-box-v4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 32px 16px;
    }

    .pub-item-v4 {
        gap: 16px;
        width: 100%;
    }

    .pub-cover-v4 {
        width: 120px;
        height: 180px;
    }

    .pub-info-v4 {
        width: auto;
        flex: 1;
        min-height: auto;
    }
}

/* ========================================
   5. 버전4 전용 레이아웃 조정
   ======================================== */

/* ========================================
   4-3. 배너 그리드 (롤링배너 대체)
   2026-02-03: v4 전용
   ======================================== */
.banner-grid-v4 {
    padding: 48px 0;
    margin-bottom: 48px;
}

.banner-grid-box {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.banner-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s;
}

.banner-grid-item:hover {
    border-color: #1a5a7a;
}

.banner-grid-item img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

/* 반응형 - 태블릿 */
@media (max-width: 1024px) {
    .banner-grid-box {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 반응형 - 모바일 */
@media (max-width: 640px) {
    .banner-grid-box {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .banner-grid-item {
        padding: 12px;
    }

    .banner-grid-item img {
        max-height: 40px;
    }
}

/* 2026-02-03: v4 최대 너비 1300px */
body.main-v4 .container-wrapper,
body.main-v4 #header .inner,
body.main-v4 .gnb,
body.main-v4 .gnb > ul {
    max-width: 1300px;
}

/* 버전4에서 헤더 아래 패딩 제거 (히어로가 바로 시작) */
body.main-v4 .contents {
    padding-top: 0 !important;
}

/* 히어로 섹션은 헤더 뒤로 들어가지 않도록 */
body.main-v4 #wrap {
    overflow-x: hidden;
}

/* 반응형: 데스크톱에서 히어로는 헤더 높이만큼 마진 */
@media (min-width: 1025px) {
    body.main-v4 .hero-fullwidth-section {
        margin-top: 0;
    }
}

/* 반응형: 모바일에서는 헤더가 relative이므로 마진 불필요 */
@media (max-width: 1024px) {
    body.main-v4 .hero-fullwidth-section {
        margin-top: 0;
    }
}

/* ========================================
   6. 게시판 탭 스타일
   2026-02-04: 여러 게시판 탭 지원
   ======================================== */
.board-box-header.board-tabs {
    padding: 0 0 12px 0;
    border-bottom: 2px solid #1a5a7a;
    margin-bottom: 8px;
}

.board-tabs .tab-buttons {
    display: flex;
    gap: 16px;
}

/* 2026-02-04: 탭 버튼 - 밑줄 없이 글자색으로만 구분, 24px, 두께 통일 */
.board-tabs .tab-btn {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s;
}

.board-tabs .tab-btn:hover {
    color: #6b7280;
}

.board-tabs .tab-btn.active {
    color: #333;
    font-weight: 600;
}

/* 2026-02-04: 탭 버튼 안의 h3 - 버튼 스타일과 통일 */
.board-tabs .tab-btn h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: inherit;
}

/* 탭 패널 */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}