/* ==========================================================================
   [핵심] 풀 페이지 스크롤 (Scroll Snap) 설정
   ========================================================================== */

/* 1. 기본 설정: 윈도우 스크롤바 숨기기 (깔끔하게) */
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden; /* 바깥 스크롤바 제거 */
}

/* 2. 전체 래퍼: 스크롤 영역 */
.full-page-wrapper {
    width: 100%;
    height: 100vh; /* 화면 전체 높이 */
    
    overflow-y: scroll; /* 세로 스크롤 허용 */
    
    /* [마법의 코드] 스크롤이 섹션 단위로 딱딱 붙게 함 */
    scroll-snap-type: y mandatory; 
    scroll-behavior: smooth; /* 부드럽게 이동 */
}

/* 3. 각 섹션 공통 스타일 */
.fp-section {
    width: 100%;
    height: 100vh; /* 무조건 화면 높이만큼 꽉 차게 */
    
    /* 스크롤 시 이 섹션의 시작 부분에 맞춤 */
    scroll-snap-align: start; 
    
    position: relative;
    overflow: hidden; /* 내용 넘침 방지 */
}

/* (예시용) 섹션 내부 컨텐츠 정렬 */
.fp-section .content-box {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center;
}


/*test2 css 시작 ( 전일봉 )*/
/* ==========================================================================
   메인 비주얼 전체 레이아웃 (기존 유지)
   ========================================================================== */
.test2-full-visual-area {
    position: relative; width: 100%; 
    aspect-ratio: 1920 / 950; /* 비율 고정 유지 */
    min-height: 700px;        /* 최소 높이 유지 */
    overflow: hidden; 
    background-color: #222;
}

.test2-slider-wrap {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}

/* 어두운 그라데이션 (기존 유지) */
.test2-slider-wrap::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

/* ==========================================================================
   [수정] 슬라이드 아이템 (배경색 + PNG 이미지)
   ========================================================================== */
.test2-slide-item {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    
    /* 1. 이미지 반복 방지 */
    background-repeat: no-repeat;

    /* 2. 이미지 위치 */
    /* cover를 쓸 때는 보통 'center center'가 가장 안정적입니다. 
       만약 하단이 중요하면 'center bottom'을 유지하셔도 됩니다. */
    background-position: center center; 

    /* 3. 이미지 크기 설정 (★핵심 수정) */
    /* contain: 다 보여주기 위해 여백이 생김 */
    /* cover:   비율 유지하며 빈틈없이 꽉 채움 (넘치는 부분은 잘림) */
    background-size: cover; 
}
/* ==========================================================================
   [오른쪽] 매거진 배너
   ========================================================================== */
.test2-overlay-mag-wrap { position: absolute; top: 50%; right: 15%; transform: translateY(-50%); z-index: 20; width: 500px; max-width: 90%; }
.test2-mag-banner-box { display: flex; align-items: center; justify-content: flex-end; gap: 30px; }
.mag-left-group { text-align: right; flex: 1; }
.test2-mag-content { margin-bottom: 20px; }
.mag-badge { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: #ff6600; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.mag-vol { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.9); margin-bottom: 5px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.mag-subject { font-size: 32px; font-weight: 800; color: #fff; line-height: 1.2; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.8); word-break: keep-all; }
.btn-mag-floating { display: inline-block; padding: 10px 25px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(5px); color: #fff; text-decoration: none; border-radius: 30px; font-weight: 700; font-size: 14px; transition: all 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.btn-mag-floating:hover { background: #ff6600; border-color: #ff6600; }
.test2-mini-book-obj { width: 200px; height: 280px; position: relative; flex-shrink: 0; }
.real-book-flat { width: 100%; height: 100%; position: relative; transform: rotateY(0deg); transition: transform 0.3s ease; box-shadow: 10px 10px 30px rgba(0,0,0,0.5); }
.test2-mag-banner-box:hover .real-book-flat { transform: scale(1.03); }
.real-book-flat .front { position: absolute; top:0; left:0; width:100%; height:100%; background-color: #ddd; background-size: cover; background-position: center; border-radius: 2px 5px 5px 2px; }
.test2-mini-book-obj .shadow-flat { position: absolute; bottom: -15px; left: 5%; width: 90%; height: 10px; background: radial-gradient(rgba(0,0,0,0.5), transparent 70%); }

/* ==========================================================================
   [수정] 하단 퀵 메뉴 바 (황색 라인 애니메이션)
   ========================================================================== */
.test2-bottom-nav-wrap {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 50;
    background: none; /* 배경 투명 */
    border: none;     /* 테두리 없음 */
}

.test2-bnav-inner {
    max-width: 1400px; margin: 0 auto; display: flex;
}

.test2-bnav-item {
    flex: 1; display: flex; align-items: center; justify-content: center;
    height: 70px;
    text-decoration: none; position: relative;
    border: none;
}

/* [핵심] 상단 황색 막대 (평소엔 0, 호버시 늘어남) */
.test2-bnav-item::before {
    content: '';
    position: absolute; top: 0; left: 50%; 
    transform: translateX(-50%); /* 가운데 정렬 */
    width: 0; /* 처음엔 안보임 */
    height: 4px; /* 막대 두께 */
    
    /* [변경] 색상을 흰색(#fff) -> 황색(#ff6600)으로 변경 */
    background: #ff6600; 
    
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* 촥 늘어나는 효과 */
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.6); /* 오렌지빛 발광 효과 */
}

/* 호버 시 막대 꽉 차게 늘어남 */
.test2-bnav-item:hover::before {
    width: 100%;
}

/* 텍스트 스타일 */
.test2-bnav-item .txt {
    color: rgba(255, 255, 255, 0.9); /* 평소엔 흰색 */
    font-size: 16px; font-weight: 500;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9); /* 그림자 필수 */
    transition: all 0.3s;
}

/* 호버 시 텍스트도 황색으로 */
.test2-bnav-item:hover .txt {
    color: #ff6600; /* 황색 변경 */
    font-weight: 800;
}

/* 모바일 반응형 */
@media (max-width: 900px) {
    .test2-bnav-inner { flex-wrap: wrap; }
    .test2-bnav-item { flex: 0 0 33.33%; height: 60px; }
    /* 모바일에서도 터치하면 황색 라인 나옴 */
}

/* ==========================================================================
   [NEW] 스크롤 유도 아이콘 (Scroll Indicator)
   ========================================================================== */
/* ==========================================================================
   [수정] 스크롤 유도 아이콘 (마우스 + 텍스트)
   ========================================================================== */
.scroll-indicator {
    position: absolute;
    bottom: 80px; /* 하단 메뉴바 위에 위치 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 마우스와 글자 사이 간격 */
    opacity: 0.9;
    cursor: default; /* 텍스트 드래그 방지 느낌 */
}

/* 마우스 몸체 */
.scroll-indicator .mouse {
    width: 24px;
    height: 38px;
    border: 2px solid #fff;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* 마우스 휠 (움직이는 점) */
.scroll-indicator .wheel {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    animation: scrollWheel 2s infinite;
}

/* [NEW] 스크롤 텍스트 */
.scroll-indicator .scroll-text {
    color: #fff;
    font-size: 11px;       /* 작고 심플하게 */
    font-weight: 600;      /* 적당히 굵게 */
    letter-spacing: 2px;   /* 자간을 넓혀서 고급스럽게 */
    text-transform: uppercase; /* 무조건 대문자로 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* 배경 묻힘 방지 */
    animation: txtBob 2s infinite; /* 글자도 살짝 움직임 */
}


/* --- 애니메이션 --- */

/* 휠 굴러가는 효과 */
@keyframes scrollWheel {
    0% { top: 6px; opacity: 1; }
    100% { top: 20px; opacity: 0; }
}

/* 텍스트가 살짝 위아래로 움직이는 효과 (선택사항) */
@keyframes txtBob {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(3px); opacity: 1; }
}

/* 모바일 조정 */
@media (max-width: 900px) {
    .scroll-indicator { bottom: 70px; transform: translateX(-50%) scale(0.9); }
}

/* ==========================================================================
   (기존 CSS 유지) 아래는 아까 만든 배너/메뉴바 스타일 그대로 둡니다.
   ========================================================================== */
/* ... (이전 답변의 배너 및 하단 메뉴바 CSS 코드는 그대로 사용하시면 됩니다) ... */

/* 단, 하단 메뉴바 위치 안전장치 */
.test2-bottom-nav-wrap {
    position: absolute; bottom: 0; 
    /* 풀 페이지 모드에서는 바닥에 딱 붙어도 안전합니다 */
}









/* ==========================================================================
   [섹션 2] 컴팩트 레이아웃 (높이 압축 + 텍스트 제거)
   ========================================================================== */
.section-2 { 
    background-color: #f4f6f9;
    display: flex; align-items: center; justify-content: center;
    /* [중요] 내용이 길어지면 자동으로 늘어나게 설정 (잘림 방지) */
    height: auto !important; 
    min-height: 100vh; 
    padding: 40px 0; /* 위아래 여백 */
}

.sec2-container { 
    width: 100%; max-width: 1200px; 
    /* 컨테이너 패딩 축소 */
    padding: 0 20px; 
    margin: 0 auto; box-sizing: border-box;
}

.sec2-top-header { text-align: center; margin-bottom: 0; position: relative; z-index: 2; }
.sub-badge { font-size: 13px; color: #ff6600; font-weight: 800; background: rgba(255,102,0,0.1); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 5px; }
.sec2-top-header h2 { font-size: 32px; color: #222; margin: 0 0 5px 0; letter-spacing: -1px; line-height: 1.2; }
.sec2-top-header strong { color: #ff6600; font-family: 'Montserrat', sans-serif; }
.sec2-top-header p { font-size: 14px; color: #666; margin: 0; padding-bottom: 15px; }


/* 통합 박스 (여백 다이어트) */
.sec2-white-box {
    width: 100%; background-color: #fff; border-radius: 20px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); border: 1px solid #e5e5e5;
    
    /* [중요] 높이 자동 + 내용 넘침 방지 */
    height: auto; 
    overflow: visible;
    
    margin-top: 0; 
    /* 내부 패딩 축소 */
    padding: 20px 25px 30px 25px; 
    box-sizing: border-box; 
    display: flex; flex-direction: column;
}


/* -------------------------------------------------------------------
   [NEW] 1. 상단 퀵 링크 바 (버튼 일체형 디자인)
   ------------------------------------------------------------------- */
.quick-link-bar {
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; /* 높이 통일 */
    padding: 10px 0 20px 0; /* 상하 여백 */
    gap: 12px; /* 버튼 사이 간격 */
}

.ql-item {
    flex: 1; /* 6개 버튼 균등 분할 */
    
    /* [핵심] 버튼 박스 스타일 */
    background: #f8f9fa; 
    border: 1px solid #ebEFF5;
    border-radius: 15px; /* 약간 둥근 사각형 */
    
    /* 내부 정렬 (가로 배치) */
    display: flex; 
    flex-direction: row; /* 아이콘-글자 가로 나열 */
    align-items: center; 
    justify-content: center;
    
    padding: 18px 5px; /* 버튼 크기 키움 */
    text-decoration: none; 
    transition: all 0.3s ease;
    
    /* 그림자 살짝 주어 버튼 느낌 강조 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* 마우스 올렸을 때 */
.ql-item:hover { 
    background: #fff; /* 배경 밝게 */
    border-color: #ff6600; /* 테두리 주황색 */
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.15); /* 주황색 그림자 */
}

/* 아이콘 스타일 */
.ql-icon {
    /* 기존 박스 스타일 제거 -> 텍스트 옆 아이콘으로 변경 */
    width: auto; height: auto; 
    background: none; border: none; border-radius: 0;
    margin-bottom: 0; margin-right: 10px; /* 글자와 간격 */
    
    font-size: 26px; /* 아이콘 크기 */
    color: #888; 
    display: flex; align-items: center;
    transition: 0.3s;
}

.ql-item:hover .ql-icon { 
    color: #ff6600; /* 호버 시 아이콘 주황색 */
    background: none; 
    transform: scale(1.1); /* 살짝 커짐 */
}

/* 텍스트 스타일 */
.ql-item span { 
    font-size: 15px; 
    font-weight: 700; 
    color: #444;
    letter-spacing: -0.5px; 
    word-break: keep-all; /* 단어 중간에 끊기지 않게 */
    line-height: 1.2;
    transition: 0.3s;
}

.ql-item:hover span {
    color: #222; /* 호버 시 글자 진하게 */
}


/* [반응형] 화면이 좁아질 때 */
@media (max-width: 1024px) {
    .quick-link-bar { flex-wrap: wrap; }
    .ql-item { 
        min-width: 30%; /* 3개씩 줄바꿈 */
        padding: 15px;
    } 
}

@media (max-width: 767px) {
    .ql-item { 
        min-width: 48%; /* 2개씩 줄바꿈 */
        flex-direction: column; /* 모바일에선 다시 위아래 배치로 변경 (공간 부족) */
        gap: 5px;
    }
    .ql-icon { margin-right: 0; margin-bottom: 5px; }
}


/* -------------------------------------------------------------------
   2. 메인 대시보드
   ------------------------------------------------------------------- */
.sec2-dashboard-wrap { 
    display: flex; gap: 25px; align-items: stretch; 
}

/* [좌측] 포커스 캠페인 */
.dash-left { 
    flex: 0.28; display: flex; flex-direction: column; min-width: 0; 
}
.focus-banner {
    flex: 1; background: #333; border-radius: 12px; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; 
    padding: 25px; box-sizing: border-box; text-decoration: none; transition: 0.3s;
    
    /* [높이 맞춤] 우측 그리드 높이(약 460px)와 비슷하게 */
    min-height: 460px; 
}
.fb-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.6; transition: 0.3s; }
.focus-banner:hover .fb-bg-layer { transform: scale(1.05); opacity: 0.5; }
.fb-txt { position: relative; z-index: 2; color: #fff; }
.fb-badge { background: #ff6600; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 10px; }
.fb-txt h3 { font-size: 24px; line-height: 1.3; margin: 0 0 10px 0; font-weight: 700; word-break: keep-all; }
.fb-txt p { font-size: 14px; opacity: 0.8; margin: 0; }


/* [우측] 탭 + 컨텐츠 */
.dash-right { 
    flex: 0.72; display: flex; flex-direction: column; position: relative; min-width: 0;
}

/* 탭 네비게이션 (여백 축소) */
.sec2-clean-nav { 
    display: flex; width: 100%; background: #fff; 
    border-bottom: 1px solid #eee; margin-bottom: 15px; 
}
.clean-tab-btn {
    flex: 1; background: none; border: none; outline: none; 
    /* 탭 높이 축소 */
    padding: 12px 0; 
    font-size: 16px; font-weight: 600; color: #999; cursor: pointer; text-align: center; position: relative; transition: color 0.2s;
}
.clean-tab-btn.active { color: #ff6600; font-weight: 800; }
.clean-tab-btn.active::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #ff6600; }

/* 2x2 그리드 (카드 높이 축소) */
.media-quarter-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; 
    gap: 15px; flex: 1; margin-bottom: 15px;
}
.quarter-card {
    background: #fff; border: 1px solid #eee; border-radius: 12px;
    overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
    transition: 0.3s; 
    /* 카드 높이 220px로 축소 (2개 합치면 455px 정도) */
    min-height: 220px; 
}
.quarter-card:hover { border-color: #ff6600; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }

/* 썸네일 높이 축소 */
.qc-thumb { width: 100%; height: 130px; background-size: cover; background-position: center; position: relative; flex-shrink: 0; }
.y-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 32px; text-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: 0.3s; }
.quarter-card:hover .y-icon { color: #ff0000; transform: translate(-50%, -50%) scale(1.1); }

/* 정보 영역 */
.qc-info { padding: 12px 15px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.qc-badge { display: inline-block; font-size: 10px; font-weight: 800; color: #fff; padding: 2px 6px; border-radius: 3px; margin-bottom: 5px; width: fit-content; }
.qc-badge.photo { background: #007bff; } .qc-badge.magazine { background: #28a745; } .qc-badge.youtube { background: #ff0000; }
.qc-info h4 { font-size: 15px; font-weight: 600; color: #222; margin: 0 0 5px 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qc-date { font-size: 11px; color: #aaa; margin-top: auto; }


/* 공지사항 (높이 맞춤) */
.notice-list-wrap { 
    flex: 1; background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 10px 15px; margin-bottom: 15px; 
    /* 2x2 그리드 높이와 비슷하게 맞춤 */
    min-height: 455px; 
    display: flex; flex-direction: column; 
}
.nr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; }
.nr-list li { border-bottom: 1px solid #f0f0f0; }
.nr-list li:last-child { border-bottom: none; }
.nr-list li a { display: flex; align-items: center; padding: 18px 5px; text-decoration: none; color: #444; transition: 0.2s; }
.nr-list li a:hover { background-color: #f9f9f9; border-radius: 8px; color: #222; }
.nr-list .cate { font-size: 11px; color: #fff; font-weight: 600; padding: 3px 6px; border-radius: 4px; margin-right: 10px; min-width: 36px; text-align: center; }
.nr-list .cate.notice { background: #333; }
.nr-list .subj { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 15px; }
.nr-list .date { font-size: 12px; color: #bbb; font-family: 'Montserrat', sans-serif; }
.no-data { flex: 1; display: flex; align-items: center; justify-content: center; color: #999; border-bottom: none !important; }

.panel-more-btn { display: block; width: 100%; text-align: center; padding: 8px; background: #f9f9f9; border-radius: 6px; color: #666; text-decoration: none; font-size: 12px; font-weight: 600; transition: 0.2s; margin-top: auto; }
.panel-more-btn:hover { background: #eee; color: #333; }

/* 패널 공통 */
.right-panel { display: none; height: 100%; flex-direction: column; animation: fadeIn 0.4s; }
.right-panel.active { display: flex; }

/* 반응형 */
@media (max-width: 1024px) {
    .sec2-dashboard-wrap { flex-direction: column; }
    .dash-left { width: 100%; min-height: 200px; margin-bottom: 20px; flex: none; }
    .focus-banner { min-height: 200px; }
    .dash-right { width: 100%; }
    .quick-link-bar { flex-wrap: wrap; gap: 15px; }
}
@media (max-width: 767px) {
    .media-quarter-grid { grid-template-columns: 1fr; }
}







/* ==========================================================================
   [섹션 3] 강렬한 오렌지 배경 + 화이트 카드 UI
   ========================================================================== */
.section-3 {
    /* [변경] 배경을 브랜드 컬러(주황색)로 변경 */
    background-color: #ff6600; 
    
    display: flex; align-items: center; justify-content: center;
}

.sec3-container {
    width: 100%; max-width: 1200px; padding: 70px 20px; box-sizing: border-box;
    display: flex; flex-direction: column; height: 100%; justify-content: center;
}

/* 1. 헤드라인 (주황 배경 위라 흰색으로 변경) */
.sec3-header { text-align: center; margin-bottom: 50px; }

.sec3-header .sub-tit { 
    font-size: 14px; font-weight: 800; letter-spacing: 2px; 
    display: block; margin-bottom: 15px; 
    
    /* [변경] 기존 주황색 -> 흰색 (투명도 조절로 은은하게) */
    color: rgba(255, 255, 255, 0.8); 
}

.sec3-header h2 { 
    font-size: 40px; margin: 0 0 15px 0; letter-spacing: -1px;
    
    /* [변경] 기존 검정 -> 완전한 흰색 */
    color: #fff; 
}

.sec3-header p { 
    font-size: 18px; margin: 0; word-break: keep-all; 
    
    /* [변경] 기존 회색 -> 흰색 (살짝 투명하게) */
    color: rgba(255, 255, 255, 0.9); 
}


/* 2. 텍스트 탭 네비게이션 (흰색 톤으로 변경) */
.sec3-text-nav-wrap {
    margin-bottom: 30px;
    
    /* [변경] 하단 라인을 흰색 반투명으로 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
}

.sec3-text-nav {
    display: flex; justify-content: center; flex-wrap: wrap;
    padding-bottom: 20px;
}

.txt-tab-btn {
    background: none; border: none; cursor: pointer;
    font-size: 16px; font-weight: 500;
    padding: 0 25px; position: relative;
    transition: all 0.2s ease;

    /* [변경] 기본 텍스트 색상을 흰색(반투명)으로 */
    color: rgba(255, 255, 255, 0.6); 
}

/* 구분선 (|) 색상 조정 */
.txt-tab-btn::after {
    content: '|'; position: absolute; right: 0; top: 52%; transform: translateY(-50%);
    
    /* [변경] 구분선도 흰색 계열로 */
    color: rgba(255, 255, 255, 0.4); 
    font-weight: 400; font-size: 12px;
}
.txt-tab-btn:last-child::after { content: none; }

/* 활성화 & 호버 상태 */
.txt-tab-btn.active { 
    /* [변경] 활성화 시 완전한 흰색 + 굵게 */
    color: #fff; 
    font-weight: 800; 
    transform: scale(1.05);
    text-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 살짝 그림자 추가 */
}

.txt-tab-btn:hover { 
    /* [변경] 호버 시 흰색 */
    color: #fff; 
}


/* 3. 탭 컨텐츠 영역 (흰색 카드 유지) */
/* 카드가 흰색이므로, 내부의 글자는 기존의 검정/주황을 유지해야 가독성이 좋습니다. */
.sec3-tab-view {
    flex: 1; 
    background: #fff; 
    border-radius: 20px;
    
    /* [변경] 배경이 진해졌으므로 그림자를 더 부드럽게 조정 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); 
    
    overflow: hidden; margin-bottom: 40px;
    position: relative;
    min-height: 400px;
}

/* --- 내부 컨텐츠 패널 (기존 레이아웃 유지) --- */
.biz-content-panel {
    display: none; width: 100%; height: 100%;
    justify-content: center; align-items: center;
    box-sizing: border-box; 
}
.biz-content-panel.active { display: flex; animation: fadeIn 0.3s ease-out; }
.biz-content-panel a { display: block; width: 100%; height: auto; text-align: center; }
.biz-content-panel img { max-width: 100%; max-height: 100%; height: auto; display: block; margin: 0 auto; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 좌측 정보 (흰색 배경 위이므로 검정 글씨 유지) */
.biz-info { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.biz-info h3 { font-size: 34px; color: #222; margin: 0 0 15px 0; letter-spacing: -1px; }

/* [유지] 카드 내부는 흰색 배경이므로 주황색 포인트가 아주 잘 어울립니다. */
.biz-info .summary { font-size: 18px; color: #ff6600; font-weight: 700; margin: 0 0 25px 0; }
.biz-info .desc { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 30px; word-break: keep-all; }

.biz-check { list-style: none; margin: 0; padding: 0; }
.biz-check li { padding-left: 24px; margin-bottom: 10px; font-size: 16px; color: #444; position: relative; }
.biz-check li::before { content: '✔'; position: absolute; left: 0; top: 1px; color: #ff6600; font-weight: bold; font-size: 14px; }

/* 우측 이미지 */
.biz-img { width: 50%; background-size: cover; background-position: center; }


/* 4. 하단 쇼핑몰 배너 */
.sec3-mall-banner {
    /* [변경] 오렌지 배경 위에서 돋보이도록 아주 짙은 차콜색 유지 */
    background: #222; 
    border-radius: 12px; padding: 30px 50px;
    display: flex; align-items: center; justify-content: space-between;
    color: #fff; 
    
    /* 그림자 강도 조절 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); 
    transform: translateY(0); transition: transform 0.3s;
}
.sec3-mall-banner:hover { transform: translateY(-5px); }

/* 배너 내부 스타일 */
.mall-txt .m-tag { 
    background: #ff6600; /* 배너 내부 태그는 주황색 유지 (검정 배경이라 잘 보임) */
    font-size: 12px; padding: 4px 8px; border-radius: 4px; font-weight: 700; margin-right: 12px; vertical-align: middle; 
}
.mall-txt h3 { display: inline-block; font-size: 24px; font-weight: 800; margin: 0; vertical-align: middle; letter-spacing: -0.5px; }
.mall-txt p { margin: 10px 0 0 0; font-size: 16px; color: #ccc; }
.mall-txt strong { color: #fff; text-decoration: underline; text-decoration-color: #ff6600; }

.mall-go-btn {
    background: #fff; color: #222; text-decoration: none;
    padding: 12px 30px; border-radius: 30px; font-weight: 800; font-size: 15px;
    transition: all 0.3s;
}
.mall-go-btn:hover { 
    /* 버튼 호버 시 반전 */
    background: #ff6600; color: #fff; box-shadow: 0 5px 15px rgba(255,102,0,0.6); 
}

/* 애니메이션 */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

/* 모바일 반응형 */
@media (max-width: 1024px) {
    .sec3-text-nav { justify-content: flex-start; overflow-x: auto; white-space: nowrap; padding-bottom: 10px; }
    .txt-tab-btn { padding: 0 15px; font-size: 14px; }
    .biz-content-panel.active { flex-direction: column; }
    .biz-img { width: 100%; height: 220px; order: -1; }
    .biz-info { padding: 30px 20px; }
    .sec3-mall-banner { flex-direction: column; text-align: center; gap: 20px; padding: 30px 20px; }
}



/* =========================================
   Section 4: 전국 맛집 지도 (최종 통합본)
   ========================================= */

/* 1. 섹션 기본 설정 */
.section-4 { background-color: #f4f6f9; }
.sec4-container { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }

/* 2. 헤더 스타일 */
.sec4-header { text-align: center; margin-bottom: 50px; }
.sec4-header .sub-tit {
    display: block; font-size: 14px; font-weight: 700; color: #ff6600;
    letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase;
}
.sec4-header h2 { font-size: 36px; font-weight: 700; color: #333; margin: 0 0 20px 0; line-height: 1.2; }
.sec4-header h2 strong { color: #ff6600; }
.sec4-header p { color: #666; font-size: 18px; font-weight: 400; margin: 0; }

/* 3. 컨텐츠 박스 (지도 + 리스트) */
.sec4-content-wrap {
    display: flex; width: 100%; max-width: 1200px; height: 700px;
    margin: 0 auto; background: #fff; border-radius: 20px;
    border: 1px solid #e5e5e5; box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* -----------------------------------------
   [좌측] 지도 영역
   ----------------------------------------- */
.map-area {
    flex: 1; position: relative; background: #fff; border-right: none;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    overflow: hidden;
}

/* 구분선 (가운데 | 모양) */
.map-area::after {
    content: ''; position: absolute; right: 0; top: 50px; bottom: 50px;
    width: 1px; background-color: #e5e5e5;
}

/* 지도 박스 */
#koreamap_box {
    width: 500px; height: 640px; position: relative;
    margin: 0 auto !important; margin-left: auto !important;
}
#koreamap_box svg { width: 100%; height: 100%; }

/* [지도 색상 설정] - 확정하신 부분 */
.land {
    fill: #d0d0d0;        /* 기본: 연한 회색 */
    fill-opacity: 1; stroke: #ffffff; stroke-opacity: 1; stroke-width: 1px;
    cursor: pointer; transition: fill 0.3s;
}

/* 마우스 호버: 진한 회색 (#a0a0a0) */
.land:hover { fill: #a0a0a0; }

/* 클릭 활성화: 보라색 (#9b59b6) */
.active, .land.active {
    fill: #9b59b6 !important; 
    stroke: #9b59b6;
}

/* [툴팁 스타일] */
.tooltip {
    position: absolute; background: #fc4e30;
    padding: 8px 15px; border-radius: 5px;
    color: #fff; font-size: 13px; font-weight: 600; text-align: center;
    display: none; pointer-events: none; z-index: 100; white-space: nowrap;
}
.tooltip:after {
    display: block; content: ''; position: absolute; bottom: -6px; left: 50%;
    transform: translateX(-50%); width: 0; height: 0;
    border-top: 8px solid #fc4e30; border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.tooltip.show { display: block; }

/* 툴팁 좌표 */
.t-seoul { left:135px; top:110px; } .t-inchon { left:75px; top:120px; } .t-kyungki { left:130px; top:70px; } .t-kangwon { left:320px; top:80px; }
.t-chungnam { left:80px; top:220px; } .t-sejong { left:155px; top:200px; } .t-daejeon { left:185px; top:250px; } .t-chungbuk { left:230px; top:180px; }
.t-gyeongbuk { left:330px; top:220px; } .t-daegu { left:310px; top:310px; } .t-ulsan { left:380px; top:340px; } .t-busan { left:350px; top:380px; }
.t-gyeongnam { left:250px; top:350px; } .t-jeonbuk { left:130px; top:310px; } .t-kwangju { left:105px; top:380px; } .t-jeonnam { left:80px; top:420px; }
.t-jeju { left:110px; top:560px; }


/* -----------------------------------------
   [우측] 리스트 영역 (사진 제거 버전)
   ----------------------------------------- */
.list-area {
    flex: 1; background: #fff; padding: 30px; overflow-y: auto;
}
.list-area::-webkit-scrollbar { width: 8px; }
.list-area::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
.list-area::-webkit-scrollbar-track { background-color: transparent; }

.restaurant-list { list-style: none; padding: 0; margin: 0; }

.rest-item {
    display: none; /* JS 제어 */
    padding: 25px 0;
    border-bottom: 1px solid #eee;
    animation: fadeIn 0.4s ease;
}
.rest-item.show { display: block; } /* flex -> block으로 변경 */
.rest-item:last-child { border: none; margin: 0; }

/* 텍스트 정보 스타일 */
.rest-info { width: 100%; text-align: left; }

.rest-info h4 { font-size: 20px; margin: 5px 0 8px; color: #222; font-weight: 700; }

.rest-info .badge { 
    font-size: 13px; color: #ff6600; font-weight: 700; 
    display: inline-block; margin-bottom: 5px; 
    background: #fff0e6; padding: 2px 6px; border-radius: 4px; 
}

/* 주소 스타일 (NEW) */
.rest-info .address {
    font-size: 14px; color: #888; margin-bottom: 12px; display: flex; align-items: center;
}
.rest-info .address::before {
    content: ''; display: inline-block; width: 4px; height: 4px;
    background: #ccc; border-radius: 50%; margin-right: 6px; vertical-align: middle;
}

.rest-info .desc { 
    font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 15px; word-break: keep-all; 
}

.view-btn { 
    font-size: 14px; color: #333; font-weight: 600; text-decoration: none; 
    display: inline-block; border: 1px solid #ddd; padding: 6px 15px; 
    border-radius: 20px; transition: all 0.3s; 
}
.view-btn:hover { background: #333; color: #fff; border-color: #333; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* =========================================
   Section 5: 싱그러운 연두색 테마 (Green Theme)
   ========================================= */

/* 1. 최상위 부모: 연두색 배경 적용 */
.section-5 { 
    height: 100vh; 
    
    /* [변경] 배경을 싱그러운 연두색으로 */
    background-color: #7cb342; 
    
    overflow: hidden; 
}

/* 2. 컨테이너 */
.sec5-container { 
    width: 100%; max-width: 1200px; margin: 0 auto; 
    padding: 30px 20px; 
    height: 100%; 
    box-sizing: border-box; 
    display: flex; flex-direction: column;
}

/* 3. 헤더 (흰색 텍스트로 변경) */
.sec5-header { 
    text-align: center; margin-bottom: 20px; flex-shrink: 0; 
}

.sec5-header .sub-tit { 
    display: block; font-size: 14px; font-weight: 800; letter-spacing: 2px; margin-bottom: 5px; 
    
    /* [변경] 기존 오렌지 -> 흰색 (반투명) */
    color: rgba(255, 255, 255, 0.8); 
}

.sec5-header h2 { 
    font-size: 32px; font-weight: 700; margin: 0; 
    
    /* [변경] 검정 -> 흰색 */
    color: #fff; 
}

.sec5-header h2 strong { 
    /* [변경] 오렌지 -> 옅은 노란색 (연두색 배경 위 강조) */
    color: #fdd835; 
}

.sec5-header p { 
    font-size: 16px; margin-top: 5px; 
    
    /* [변경] 회색 -> 흰색 (반투명) */
    color: rgba(255, 255, 255, 0.9); 
}

/* 4. 컨텐츠 박스 (흰색 박스 유지 - 카드 효과) */
.sec5-content-wrap {
    display: flex; width: 100%; 
    flex: 1; min-height: 0; 
    background: #fff; border-radius: 20px;
    
    /* 테두리 없애거나 연하게 (배경이 진해서 테두리 불필요) */
    border: none;
    
    /* 그림자 조금 더 진하게 */
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    overflow: hidden; 
    box-sizing: border-box; 
}

/* -----------------------------------------
   [좌측] 달력 영역
   ----------------------------------------- */
.calendar-area {
    flex: 3; 
    padding: 30px; 
    height: 100%; 
    box-sizing: border-box; 
    display: flex; flex-direction: column; 
    border-right: 1px solid #eee;
}

/* 네비게이션 */
.cal-nav { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; flex-shrink: 0; }
.current-month { font-size: 24px; font-weight: 700; margin: 0 20px; color: #333; }
.nav-btn { 
    background: none; border: 1px solid #ddd; border-radius: 50%; 
    width: 32px; height: 32px; cursor: pointer; color: #666; font-size: 16px; transition: all 0.2s; 
}

/* [변경] 버튼 호버 시 녹색 */
.nav-btn:hover { background: #7cb342; color: #fff; border-color: #7cb342; }

.cal-weekdays { 
    display: grid; grid-template-columns: repeat(7, 1fr); 
    text-align: center; padding-bottom: 10px; flex-shrink: 0; 
}
.cal-weekdays span { font-weight: 600; color: #888; font-size: 14px; }
.cal-weekdays span:first-child { color: #e74c3c; } /* 일요일 빨강 유지 */

/* ★ 달력 그리드 */
.cal-grid {
    display: grid; 
    grid-template-columns: repeat(7, 1fr);
    gap: 1px; background: #e5e5e5; border: 1px solid #e5e5e5;
    flex: 1; 
    height: auto; 
    margin-bottom: 20px; 
    overflow: hidden; 
}

/* 날짜 셀 */
.day-cell { background: #fff; padding: 5px; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.day-cell:not(.empty) { cursor: pointer; }
.day-cell:not(.empty):hover { background-color: #f1f8e9; } /* [변경] 호버 시 연한 녹색 */
.day-cell.empty { cursor: default; background: #fff; }

/* [변경] 오늘 날짜: 아주 연한 녹색 배경 */
.day-cell.today { background-color: #f1f8e9; } 

/* [변경] 선택된 날짜: 진한 녹색 테두리 */
.day-cell.active { 
    background-color: #fff; 
    border: 2px solid #558b2f; /* 진한 녹색 */
    z-index: 10; 
}

.day-num { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: #333; }

/* [변경] 선택된 날짜 숫자 색상 */
.day-cell.active .day-num { color: #558b2f; }
.day-cell:nth-child(7n+1) .day-num { color: #e74c3c; }

/* 이벤트 바 */
.evt-bar { width: 100%; font-size: 11px; padding: 2px 4px; margin-bottom: 2px; border-radius: 2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.evt-more { font-size: 10px; color: #888; margin-top: 1px; padding-left: 2px; }

/* [변경] 태그 색상 조금 더 선명하게 */
.evt-tax { background-color: #e53935; opacity: 0.9; } /* 빨강 */
.evt-edu { background-color: #1e88e5; opacity: 0.9; } /* 파랑 */
.evt-support { background-color: #fbc02d; opacity: 0.9; color: #333; } /* 노랑 */

/* [우측] 리스트 영역 */
.detail-area {
    flex: 1; padding: 20px; 
    /* [변경] 배경을 아주 연한 회색/녹색 틴트로 */
    background-color: #f9fbe7; 
    display: flex; flex-direction: column; height: 100%;
    box-sizing: border-box; 
}

.detail-header { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #558b2f; flex-shrink: 0; } /* [변경] 라인 녹색 */
.selected-date-text { display: block; font-size: 18px; font-weight: 700; color: #333; margin-bottom: 3px; }
.event-count { font-size: 12px; color: #666; }

.detail-list-wrap { flex: 1; overflow-y: auto; min-height: 0; padding-right: 5px; }
.detail-list-wrap::-webkit-scrollbar { width: 4px; }
.detail-list-wrap::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.schedule-list { list-style: none; padding: 0; margin: 0; }
.sch-item { 
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; 
    padding: 12px; margin-bottom: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: transform 0.2s; 
}
.sch-item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

.sch-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 3px; color: #fff; margin-bottom: 4px; }
.sch-item h4 { margin: 0 0 4px; font-size: 14px; color: #333; line-height: 1.3; font-weight: 700; }
.sch-item p { margin: 0; font-size: 12px; color: #666; line-height: 1.4; }

.tag-tax { background-color: #e53935; }
.tag-edu { background-color: #1e88e5; }
.tag-support { background-color: #fbc02d; color:#333; }

.empty-msg { text-align: center; color: #aaa; margin-top: 60px; font-size: 13px; line-height: 1.6; }
.empty-icon { font-size: 24px; margin-bottom: 5px; display: block; }








/* ==========================================================================
   [Section 6] 월간 음식과 사람 (수정판)
   ========================================================================== */
.section-6 { 
    background-color: #f4f6f9; 
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; height: auto;
}
.sec6-container { 
    width: 100%; max-width: 1200px; 
    padding: 80px 20px; margin: 0 auto; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
}
/* 헤더 */
.sec6-header { text-align: center; margin-bottom: 40px; }
.sec6-header .sub-badge { font-size: 13px; color: #ff6600; font-weight: 800; background: rgba(255,102,0,0.1); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 8px; }
.sec6-header h2 { font-size: 36px; color: #222; margin: 0 0 10px 0; letter-spacing: -1px; line-height: 1.2; }
.sec6-header h2 strong { color: #ff6600; font-family: 'Montserrat', sans-serif; }
.sec6-header p { font-size: 16px; color: #666; margin: 0; }

/* 흰색 박스 */
.sec6-white-box {
    width: 100%; background-color: #fff; border-radius: 20px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); border: 1px solid #e5e5e5;
    overflow: hidden; padding: 50px; box-sizing: border-box;
}
.sec6-content-wrap { display: flex; gap: 60px; align-items: center; }

/* -----------------------------------------
   [좌측] 3D 책자 목업 (예쁘게 꾸미기)
   ----------------------------------------- */
.sec6-left { flex: 0.4; display: flex; justify-content: center; align-items: center; perspective: 1000px; }

.magazine-mockup {
    width: 300px; height: 400px;
    position: relative;
    transform: rotateY(-20deg) rotateX(5deg); /* 살짝 비틀어서 입체감 */
    transform-style: preserve-3d;
    box-shadow: 20px 20px 30px rgba(0,0,0,0.2);
    transition: 0.5s;
}
.magazine-mockup:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }

.magazine-mockup img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 2px 5px 5px 2px;
}
/* 책 두께 효과 */
.magazine-mockup::before {
    content: ''; position: absolute; top: 3px; left: -12px; width: 12px; height: 98%;
    background: #bbb; transform: rotateY(-90deg) translateX(-6px);
}
.magazine-mockup::after {
    content: ''; position: absolute; bottom: -6px; left: 3px; width: 100%; height: 6px;
    background: #fff; transform: rotateX(-90deg) translateY(3px);
}


/* -----------------------------------------
   [우측] 정보 영역
   ----------------------------------------- */
.sec6-right { flex: 0.6; display: flex; flex-direction: column; }

/* 1. 소개글 */
.book-intro { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 25px; }
.book-intro h3 { font-size: 28px; font-weight: 300; color: #222; margin: 0 0 20px 0; line-height: 1.3; }
.book-intro h3 strong { font-weight: 700; color: #ff6600; }
.book-intro .desc { font-size: 16px; line-height: 1.7; color: #555; margin: 0 0 20px 0; word-break: keep-all; }
.book-intro .desc b { color: #222; font-weight: 600; background: #fff8e1; }

/* [수정] 광고 텍스트 링크 스타일 */
.ad-link-row { 
    display: flex; align-items: center; gap: 8px; 
    font-size: 14px; background: #f9f9f9; padding: 10px 15px; 
    border-radius: 8px; width: fit-content; 
}
.ad-label { color: #888; font-weight: 600; }
.ad-text-link { 
    color: #555; text-decoration: none; font-weight: 700; border-bottom: 1px solid #999; 
    transition: 0.2s; 
}
.ad-text-link:hover { color: #ff6600; border-color: #ff6600; }

/* 2. 발행 정보 그리드 */
.book-spec-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; margin-bottom: 40px;
}
.spec-item { display: flex; flex-direction: column; }
.spec-item.full { grid-column: span 2; }
.spec-item .label { font-size: 13px; color: #888; margin-bottom: 5px; font-weight: 600; }
.spec-item .value { font-size: 15px; color: #333; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #f0f0f0; }

/* [NEW] 3. 버튼 그룹 (당월호/과월호) */
.magazine-btn-wrap { display: flex; gap: 15px; }

.mag-btn {
    flex: 1; /* 반반 차지 */
    display: inline-flex; justify-content: center; align-items: center; gap: 8px;
    padding: 15px 0; border-radius: 10px;
    font-size: 16px; font-weight: 700; text-decoration: none;
    transition: 0.3s;
}

/* 당월호 (강조) */
.mag-btn.primary {
    background: #ff6600; color: #fff; border: 1px solid #ff6600;
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.2);
}
.mag-btn.primary:hover { background: #e55c00; transform: translateY(-2px); }

/* 과월호 (보조) */
.mag-btn.secondary {
    background: #fff; color: #555; border: 1px solid #ddd;
}
.mag-btn.secondary:hover { background: #f9f9f9; border-color: #aaa; color: #222; transform: translateY(-2px); }


/* 반응형 */
@media (max-width: 1024px) {
    .sec6-content-wrap { flex-direction: column; text-align: center; }
    .sec6-left { margin-bottom: 40px; }
    .magazine-mockup { transform: rotateY(0) rotateX(0); } /* 모바일에선 정면 */
    .book-intro h3 { font-size: 24px; }
    .ad-link-row { margin: 0 auto; }
    .book-spec-grid { text-align: left; }
}
@media (max-width: 767px) {
    .sec6-white-box { padding: 30px 20px; }
    .magazine-btn-wrap { flex-direction: column; } /* 버튼 위아래로 */
}






/* ==========================================================================
   [Section 7] 성공 창업 로드맵
   ========================================================================== */
.section-7 { 
    background-color: #f4f6f9; 
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; height: auto;
}
.sec7-container { 
    width: 100%; max-width: 1200px; 
    padding: 80px 20px; margin: 0 auto; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
}

/* 헤더 */
.sec7-header { text-align: center; margin-bottom: 60px; }
.sec7-header .sub-badge { font-size: 13px; color: #ff6600; font-weight: 800; background: rgba(255,102,0,0.1); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 8px; }
.sec7-header h2 { font-size: 38px; color: #222; margin: 0 0 10px 0; letter-spacing: -1px; line-height: 1.2; }
.sec7-header h2 strong { color: #ff6600; font-family: 'Montserrat', sans-serif; }
.sec7-header p { font-size: 16px; color: #666; margin: 0; }

/* 콘텐츠 박스 (좌우 배치) */
.sec7-content-box {
    display: flex; gap: 60px; align-items: stretch;
}


/* -----------------------------------------
   [좌측] 미디어 영역 (50%)
   ----------------------------------------- */
.sec7-media { flex: 1; display: flex; flex-direction: column; }

.media-frame {
    width: 100%; height: 100%; min-height: 400px;
    border-radius: 20px; overflow: hidden; position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* 썸네일 */
.media-thumb {
    width: 100%; height: 100%; 
    background-color: #333; /* 이미지 없을 때 대비 */
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    position: relative; transition: 0.3s;
}
/* 이미지 어둡게 처리 (텍스트 잘 보이게) */
.media-thumb::before { content:''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); transition: 0.3s; }
.media-frame:hover .media-thumb::before { background: rgba(0,0,0,0.5); }
.media-frame:hover .media-thumb { transform: scale(1.05); }

/* 플레이 버튼 */
.play-btn {
    width: 80px; height: 80px; border-radius: 50%; 
    background: rgba(255,255,255,0.9); color: #ff6600;
    font-size: 30px; border: none; cursor: pointer; position: relative; z-index: 2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
    display: flex; align-items: center; justify-content: center; padding-left: 5px;
    transition: 0.3s;
}
.media-frame:hover .play-btn { background: #ff6600; color: #fff; transform: scale(1.1); }

/* 캡션 정보 */
.media-caption {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 30px; box-sizing: border-box; z-index: 3;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.media-caption .tag { font-size: 12px; font-weight: 700; color: #fff; background: #ff6600; padding: 3px 8px; border-radius: 3px; margin-bottom: 10px; display: inline-block; }
.media-caption h3 { font-size: 24px; color: #fff; margin: 0; line-height: 1.3; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }


/* -----------------------------------------
   [우측] 프로세스 리스트 (50%)
   ----------------------------------------- */
.sec7-process { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.process-list { list-style: none; padding: 0; margin: 0 0 40px 0; }

.process-list li {
    display: flex; align-items: center; 
    padding: 25px; border: 1px solid #eee; border-radius: 15px; margin-bottom: 15px;
    background: #f9f9f9; transition: 0.3s;
}
/* 호버 시 강조 효과 */
.process-list li:hover { 
    border-color: #ff6600; background: #fff; 
    box-shadow: 0 10px 20px rgba(255,102,0,0.08); 
    transform: translateX(5px);
}

.step-badge {
    font-size: 12px; font-weight: 800; color: #ff6600; background: #fff0e6;
    padding: 6px 10px; border-radius: 5px; margin-right: 20px; white-space: nowrap;
}
.step-info { flex: 1; }
.step-info h4 { font-size: 17px; margin: 0 0 5px 0; color: #222; font-weight: 700; }
.step-info p { font-size: 14px; margin: 0; color: #666; }

/* 중앙회 역할 강조 뱃지 */
.kfia-role {
    font-size: 13px; font-weight: 700; color: #28a745; 
    background: #e8f5e9; padding: 6px 12px; border-radius: 30px; white-space: nowrap;
    display: flex; align-items: center; gap: 5px; margin-left: 10px;
}
.kfia-role i { font-size: 16px; }


/* 하단 액션 버튼 */
.sec7-actions { display: flex; gap: 15px; }

.action-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 15px; transition: 0.3s;
}
.action-btn.download { background: #555; color: #fff; }
.action-btn.download:hover { background: #333; transform: translateY(-2px); }

.action-btn.contact { background: #ff6600; color: #fff; box-shadow: 0 5px 15px rgba(255,102,0,0.2); }
.action-btn.contact:hover { background: #e65c00; transform: translateY(-2px); }


/* 반응형 */
@media (max-width: 1024px) {
    .sec7-content-box { flex-direction: column; gap: 30px; }
    .media-frame { min-height: 300px; }
}
@media (max-width: 767px) {
    .process-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
    .kfia-role { margin-left: 0; margin-top: 5px; width: 100%; justify-content: center; }
    .step-badge { margin-bottom: 5px; }
    .sec7-actions { flex-direction: column; }
}











/*test3 css*/

/* ==========================================================================
   1. 메인 비주얼 영역 (높이 460px 유지) - test3 prefix applied
   ========================================================================== */
.test3-main-visual-area { 
    width: 100%; 
    max-width: 1440px; 
    margin: 0 auto; 
    padding: 0; 
    box-sizing: border-box; 
}

.test3-main-layout-split { 
    display: flex; 
    justify-content: space-between; 
    gap: 20px; 
    height: 460px; 
    width: 100%; 
    margin-top: 20px; 
}

/* [왼쪽] 이미지 슬라이더 (유지) */
.test3-left-slider-zone { 
    flex: 1; 
    height: 100%; 
    border-radius: 0px; 
    overflow: hidden; 
    position: relative; 
    background-color: #eee; 
    border: 1px solid rgba(0,0,0,0.1); 
    box-sizing: border-box; 
}

.test3-left-slider-zone::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), inset 0 0 30px rgba(0,0,0,0.03); 
    z-index: 5; 
    pointer-events: none; 
}

.test3-slider-wrap { 
    width: 100%; 
    height: 100%; 
    position: relative; 
}

.test3-slide-img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center; 
    opacity: 0; 
    transform: scale(1); 
    z-index: 1; 
    transition: opacity 2.0s ease-in-out, transform 0s linear 2.0s; 
}

.test3-slide-img.active { 
    opacity: 1; 
    z-index: 2; 
    animation: test3ZoomEffect 15s linear forwards; 
}

@keyframes test3ZoomEffect { 
    0% { transform: scale(1); } 
    100% { transform: scale(1.15); } 
}


/* ==========================================================================
   [New Layout] 매거진 섹션 - 버튼 상단 이동 & 공간 확보
   ========================================================================== */
.test3-right-book-zone { 
    width: 460px; 
    height: 100%; 
    flex-shrink: 0; 
}

.test3-pm-card-box {
    width: 100%; 
    height: 100%;
    background: #fff; 
    border: 1px solid #e0e0e0; 
    box-sizing: border-box;
    padding: 20px; /* ★ 패딩을 20px로 조금 더 줄여서 공간 확보 */
    display: flex; 
    flex-direction: column; 
    transition: all 0.3s ease;
}

.test3-pm-card-box:hover { 
    border-color: #222; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    transform: translateY(-3px); 
}

/* 3. 헤더 (버튼 포함) */
.test3-pm-header {
    display: flex; 
    justify-content: space-between; /* 양쪽 끝 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    border-bottom: 2px solid #222;
    padding-bottom: 10px; 
    margin-bottom: 15px;
    flex-shrink: 0;
}

.test3-header-left { 
    display: flex; 
    flex-direction: column; 
}

.test3-pm-main-title { 
    font-size: 20px; 
    font-weight: 900; 
    color: #111; 
    margin: 0; 
    line-height: 1; 
    letter-spacing: -0.5px; 
}

.test3-pm-sub-title { 
    font-size: 10px; 
    font-weight: 700; 
    color: #999; 
    margin-top: 3px; 
    letter-spacing: 0.5px; 
}

/* ★ 헤더 내 미니 버튼 그룹 */
.test3-header-btn-group { 
    display: flex; 
    gap: 6px; 
}

.test3-pm-mini-btn {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    height: 32px; /* 버튼 높이를 작게 */
    padding: 0 12px;
    font-size: 12px; 
    font-weight: 700; 
    text-decoration: none;
    border: 1px solid #222; 
    border-radius: 2px;
    transition: all 0.2s; 
    white-space: nowrap;
}

.test3-pm-mini-btn.black { 
    background: #222; 
    color: #fff; 
}

.test3-pm-mini-btn.black:hover { 
    background: #800080; 
    border-color: #800080; 
}

.test3-pm-mini-btn.white { 
    background: #fff; 
    color: #222; 
    border-color: #ddd; 
}

.test3-pm-mini-btn.white:hover { 
    background: #f9f9f9; 
    border-color: #222; 
}

/* 4. 본문 레이아웃 (세로 배치) */
.test3-pm-body-flex { 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
    gap: 0; 
}

/* 책 표지 */
.test3-pm-book-area { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 5px 0 15px 0; 
}

.test3-pm-book-shadow-box {
    width: 170px; 
    height: 215px; /* 사이즈 유지 */
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1), 0 16px 32px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 2px; 
    overflow: hidden;
}

.test3-pm-book-shadow-box::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 6px; 
    height: 100%; 
    background: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 50%, rgba(255,255,255,0.1) 100%); 
    z-index: 2; 
}

.test3-pm-card-box:hover .test3-pm-book-shadow-box { 
    transform: translateY(-8px) rotateY(-5deg); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
}

.test3-pm-book-img { 
    width: 100%; 
    height: 100%; 
    background-color: #f8f8f8; 
    background-size: 100% 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
    border: 1px solid rgba(0,0,0,0.08); 
    box-sizing: border-box; 
}

.test3-pm-book-img.no-img { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #ccc; 
    font-weight: 800; 
    background: linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%); 
}

/* [하단] 텍스트 정보 (공간 넉넉해짐) */
.test3-pm-info-area { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    text-align: center; 
}

.test3-pm-top-group { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.test3-pm-date { 
    font-family: 'Roboto', sans-serif; 
    font-size: 13px; 
    color: #888; 
    font-weight: 600; 
    margin-bottom: 6px; 
    letter-spacing: 1px; 
}

.test3-pm-subject { 
    font-size: 17px; 
    font-weight: 800; 
    color: #111; 
    line-height: 1.4; 
    margin: 0 0 10px 0; 
    word-break: keep-all; 
}

/* 뱃지 */
.test3-pm-badge-row { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    margin-bottom: 10px; 
}

.test3-pm-badge { 
    background: #800080; 
    color: #fff; 
    font-size: 9px; 
    font-weight: 800; 
    padding: 3px 8px; 
    border-radius: 2px; 
}

.test3-pm-badge-text { 
    font-size: 12px; 
    font-weight: 700; 
    color: #444; 
}

/* 설명글 */
.test3-pm-desc { 
    font-size: 12px; 
    color: #666; 
    line-height: 1.6; 
    margin: 0; 
    /* 3줄까지 표시 가능하도록 넉넉하게 */
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    word-break: keep-all; 
}

/* 모바일 반응형 */
@media (max-width: 900px) {
    .test3-main-layout-split { flex-direction: column; height: auto; }
    .test3-left-slider-zone { height: 300px; }
    .test3-right-book-zone { width: 100%; height: auto; }
    .test3-pm-card-box { padding: 25px; }
    .test3-pm-book-shadow-box { width: 120px; height: 170px; }
}


/* ==========================================================================
   2. [Test3] 바로가기 (Shortcut) 섹션 - 높이 축소 버전 (80px)
   ========================================================================== */

.test3-shortcut_section {
    width: 100%;
    background-color: #fff;
    /* 기존 유지: 상단 패딩 10px, 하단 0 */
    padding: 10px 0 0 0;
}

.test3-shortcut_inner {
    width: 100%; 
    max-width: 1440px; 
    margin: 0 auto;
    background-color: #f4f6f8; 
    border: 1px solid #e0e0e0; 
    border-radius: 0px;
    display: flex; 
    overflow: hidden;
    /* [수정 1] 전체 높이 80px */
    height: 80px;
}

.test3-shortcut_item {
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    /* [수정 2] 좌우 패딩 25px */
    padding: 0 25px;
    text-decoration: none; 
    position: relative; 
    transition: all 0.3s ease;
}

/* 호버 효과 */
.test3-shortcut_item:hover {
    background-color: #800080; 
    transform: translateY(-3px); /* 3px 부양 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    z-index: 10;
}

/* 호버 시 텍스트 색상 변경 (White) */
.test3-shortcut_item:hover .test3-sc_text_group h3,
.test3-shortcut_item:hover .test3-sc_text_group p { 
    color: #fff !important; 
}

/* 호버 시 아이콘 효과 */
.test3-shortcut_item:hover .test3-sc_icon { 
    color: #fff; 
    opacity: 1; 
    transform: scale(1.1); 
}

/* 아이템 사이 구분선 */
.test3-shortcut_item::after {
    content: ''; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%);
    width: 1px; 
    height: 40%; 
    background-color: #d0d0d0; 
    transition: opacity 0.2s;
}

/* 호버 시 구분선 사라짐 */
.test3-shortcut_item:hover::after { 
    opacity: 0; 
}
.test3-shortcut_item:last-child::after { 
    display: none; 
}

/* 텍스트 & 아이콘 스타일 */
.test3-sc_text_group h3 {
    /* [수정 3] 폰트 16px, 마진 2px */
    font-size: 16px;
    font-weight: 800; 
    color: #222; 
    margin: 0 0 2px 0; 
    transition: color 0.3s;
}

.test3-sc_text_group p {
    /* [수정 4] 폰트 14px, 줄간격 1.25 */
    font-size: 14px; 
    color: #666; 
    line-height: 1.25; 
    margin: 0; 
    transition: color 0.3s;
}

.test3-sc_icon {
    /* [수정 5] 아이콘 크기 28px */
    font-size: 28px;
    color: #800080; 
    opacity: 1; 
    transition: all 0.3s;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .test3-shortcut_inner { 
        flex-direction: column; 
        height: auto; 
    }
    .test3-shortcut_item {
        padding: 20px;
        border-bottom: 1px solid #ddd;
    }
    .test3-shortcut_item::after { 
        display: none; 
    }
    .test3-shortcut_item:last-child { 
        border-bottom: none; 
    }
    
    /* 모바일에서는 호버 효과 제거 또는 조정 */
    .test3-shortcut_item:hover { 
        transform: none; 
        background-color: #f0f0f0; 
    }
    .test3-shortcut_item:hover .test3-sc_text_group h3 { 
        color: #800080 !important; 
    }
    .test3-shortcut_item:hover .test3-sc_text_group p { 
        color: #666 !important; 
    }
    .test3-shortcut_item:hover .test3-sc_icon { 
        color: #800080; 
    }
}


/* ==========================================================================
   [test3] 섹션 2: 4분할 그리드 (높이 확대 버전)
   ========================================================================== */
.test3-section-2 { 
    background-color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.test3-sec2-container { 
    width: 100%; 
    max-width: 1300px; 
    padding: 60px 30px; 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    height: 100%;
}

/* 메인 타이틀 */
.test3-sec2-main-title { 
    text-align: center; 
    margin-bottom: 50px; 
}
.test3-sec2-main-title h2 { 
    font-size: 42px; 
    color: #222; 
    margin: 0 0 10px 0; 
    font-weight: 800; 
}
.test3-sec2-main-title p { 
    font-size: 18px; 
    color: #666; 
    margin: 0; 
}

/* 4분할 그리드 레이아웃 (높이 760px) */
.test3-sec2-quad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 좌우 1:1 */
    grid-template-rows: 1fr 1fr;    /* 상하 1:1 */
    gap: 30px;                      /* 간격 */
    height: 760px;                  /* 높이 */
}

/* 공통 박스 스타일 */
.test3-quad-box {
    display: flex; 
    flex-direction: column;
    background: #fff; 
    position: relative;
    overflow: hidden;
}

/* 헤더 스타일 */
.test3-q-head {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 20px; 
    border-bottom: 2px solid #222; 
    padding-bottom: 15px;
}
.test3-q-head h3 { 
    font-size: 22px; 
    font-weight: 800; 
    color: #222; 
    margin: 0; 
}
.test3-q-more { 
    font-size: 24px; 
    color: #ccc; 
    text-decoration: none; 
    line-height: 1; 
    transition: 0.3s; 
}
.test3-q-more:hover { 
    color: #ff6600; 
}


/* 1. [좌측 상단] 공지사항 리스트 */
.test3-notice-box { grid-column: 1 / 2; grid-row: 1 / 2; }

.test3-q-notice-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    overflow-y: auto; 
}

.test3-q-notice-list li {
    padding: 18px 0; 
    border-bottom: 1px solid #f0f0f0;
}
.test3-q-notice-list li:last-child { border-bottom: none; }

.test3-q-notice-list li a {
    text-decoration: none; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.test3-t {
    font-size: 16px; 
    color: #444; 
    width: 75%;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    transition: 0.3s;
}
.test3-d { 
    font-size: 14px; 
    color: #bbb; 
}

.test3-q-notice-list li a:hover .test3-t { 
    color: #ff6600; 
    text-decoration: underline; 
}


/* 2,3,4. 그리드 위치 지정 */
.test3-photo-box { grid-column: 2 / 3; grid-row: 1 / 2; }
.test3-hwabo-box { grid-column: 1 / 2; grid-row: 2 / 3; }
.test3-youtube-box { grid-column: 2 / 3; grid-row: 2 / 3; }


/* 슬라이더 관련 */
.test3-slider-window { 
    flex: 1; 
    position: relative; 
    overflow: hidden; 
    border-radius: 12px; 
}
.test3-slider-track { 
    display: flex; 
    height: 100%; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}
.test3-slide-single { 
    min-width: 100%; 
    height: 100%; 
}

/* 비주얼 카드 */
.test3-visual-card {
    display: block; 
    width: 100%; 
    height: 100%;
    background-size: cover; 
    background-position: center; 
    position: relative;
    text-decoration: none;
}
.test3-visual-card::after {
    content: ''; 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85));
}
.test3-visual-card:hover .test3-v-overlay { 
    transform: translateY(-5px); 
}

/* 오버레이 텍스트 */
.test3-v-overlay {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 30px; 
    box-sizing: border-box; 
    z-index: 2; 
    color: #fff; 
    transition: transform 0.3s;
}
.test3-tit {
    font-size: 22px; 
    font-weight: 700; 
    margin: 0; 
    line-height: 1.4;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

/* 뱃지 스타일 */
.test3-badge { 
    display: inline-block; 
    font-size: 11px; 
    font-weight: 800; 
    padding: 4px 8px; 
    border-radius: 4px; 
    margin-bottom: 10px; 
    color: #fff; 
}
.test3-badge.photo { background: #007bff; }
.test3-badge.hwabo { background: #28a745; }
.test3-badge.yt { background: #ff0000; }

/* 슬라이드 버튼 */
.test3-s-btn {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    width: 44px; 
    height: 44px; 
    background: rgba(0,0,0,0.4); 
    color: #fff; 
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%; 
    font-size: 24px; 
    cursor: pointer; 
    z-index: 10;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding-bottom: 4px; 
    transition: 0.3s;
}
.test3-s-btn:hover { 
    background: #ff6600; 
    border-color: #ff6600; 
}
.test3-s-btn.prev { left: 15px; }
.test3-s-btn.next { right: 15px; }

.test3-no-data { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #999; 
    background: #f9f9f9; 
    height: 100%; 
}

/* 모바일 반응형 */
@media (max-width: 900px) {
    .test3-sec2-container { 
        height: auto; 
        padding: 60px 20px; 
    }
    .test3-sec2-quad-grid {
        display: flex; 
        flex-direction: column;
        height: auto; 
        gap: 50px; 
    }
    .test3-quad-box { height: 350px; }
    .test3-notice-box { height: auto; min-height: 300px; }
}

/*종료*/