/* ==========================================================================
   [핵심] 풀 페이지 스크롤 (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-color: #dcd0ff; /* 연보라색 (원하는 코드로 변경) */

    /* 2. 이미지 반복 방지 */
    background-repeat: no-repeat;

    /* 3. 이미지 위치 (중앙 하단 등 원하는 위치로) */
    background-position: center bottom; 

    /* 4. 이미지 크기 설정 (중요!) */
    /* contain: PNG 이미지가 잘리지 않고 전체가 다 나옵니다. (여백은 연보라색이 채움)
       cover:   여백 없이 꽉 채우지만 이미지가 잘릴 수 있습니다.
    */
    background-size: contain; 
}

/* ==========================================================================
   [오른쪽] 매거진 배너
   ========================================================================== */
.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: #fff;
    display: flex; align-items: center; justify-content: center;
}

.sec2-container {
    width: 100%; max-width: 1300px; padding: 0 30px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    gap: 60px; /* 상단과 하단 사이 간격 */
    height: 100%;
}

/* --------------------------------------------------------
   [상단] 좌우 분할 레이아웃
   -------------------------------------------------------- */
.sec2-top-split {
    display: flex; justify-content: space-between; align-items: flex-end; /* 바닥 라인 맞춤 */
    border-bottom: 1px solid #eee; /* 구분선 */
    padding-bottom: 40px;
}

/* 1. 좌측 타이틀 */
.sec2-tit-group { flex: 1; }
.sec2-tit-group .sub-txt {
    font-size: 14px; font-weight: 700; color: #ff6600; letter-spacing: 1px; display: block; margin-bottom: 10px;
}
.sec2-tit-group h2 {
    font-size: 44px; color: #222; font-weight: 300; line-height: 1.3; margin: 0;
    word-break: keep-all;
}
/* 숫자 강조 */
.highlight-num {
    font-size: 58px; font-weight: 900; color: #222;
    position: relative;
}
.highlight-num::after { /* 형광펜 효과 */
    content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 15px;
    background: rgba(255, 102, 0, 0.2); z-index: -1;
}

/* 2. 우측 아이콘 배너 */
.sec2-icon-banners {
    display: flex; gap: 40px;
}
.banner-circle {
    text-decoration: none; display: flex; flex-direction: column; align-items: center;
    group: hover; transition: transform 0.3s;
}
.banner-circle:hover { transform: translateY(-10px); }

.circle-box {
    width: 90px; height: 90px;
    background: #f9f9f9; border: 1px solid #eee; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 15px; transition: all 0.3s;
}
.circle-box .icon { font-size: 40px; }

/* 호버 시 아이콘 스타일 변경 */
.banner-circle:hover .circle-box {
    background: #ff6600; border-color: #ff6600; box-shadow: 0 10px 20px rgba(255,102,0,0.3);
}
.banner-circle:hover .icon { filter: brightness(0) invert(1); /* 아이콘 흰색으로 */ }

.b-tit { font-size: 16px; font-weight: 700; color: #444; transition: color 0.3s; }
.banner-circle:hover .b-tit { color: #ff6600; }




/* ==========================================================================
   [섹션 2] 중앙회 NOW (타이틀 밀착 + 섹션 규격 통일)
   ========================================================================== */
.section-2 { background-color: #f4f6f9; }

.sec2-container { 
    /* 섹션 4와 동일한 규격 적용 */
    width: 100%; max-width: 1200px; 
    margin: 0 auto; 
    padding: 60px 20px; /* 섹션 4와 통일 */
    box-sizing: border-box; 
    
    display: flex; flex-direction: column; justify-content: center; height: 100%;
}


/* -------------------------------------------------------------------
   1. 상단 타이틀 영역 (여백 완전 제거)
   ------------------------------------------------------------------- */
.sec2-top-header { 
    text-align: center; 
    /* ★ 핵심: 타이틀과 박스 사이 마진을 0으로 설정하여 완전 밀착 */
    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: 8px; 
}
.sec2-top-header h2 { 
    font-size: 38px; 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: 16px; color: #666; margin: 0; 
    /* 텍스트 아래로 약간의 여유만 주고 박스와 붙임 */
    padding-bottom: 20px; 
}


/* -------------------------------------------------------------------
   2. 통합 흰색 박스 (탭 + 컨텐츠)
   ------------------------------------------------------------------- */
.sec2-white-box {
    width: 100%; 
    background-color: #fff; 
    border-radius: 20px; 
    /* 그림자를 주어 타이틀과 구분감 형성 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
    border: 1px solid #e5e5e5;
    overflow: hidden; 
    display: flex; flex-direction: column;
    
    /* 상단 마진 없음 (타이틀과 붙음) */
    margin-top: 0;
    
    /* 세로 사이즈 넉넉하게 유지 */
    min-height: 720px; 
}


/* -------------------------------------------------------------------
   3. 탭 네비게이션 (회색줄 제거 & 짧은 포인트)
   ------------------------------------------------------------------- */
.sec2-clean-nav {
    display: flex; width: 100%;
    background: #fff;
    padding-top: 15px; 
    
    /* 하단 회색줄 제거 */
    border-bottom: none; 
}

.clean-tab-btn {
    flex: 1; 
    background: none; border: none; outline: none;
    padding: 20px 0; 
    
    font-size: 20px; font-weight: 500; color: #999;
    cursor: pointer; text-align: center; position: relative;
    transition: color 0.2s;
}

/* 탭 사이 구분선 (|) */
.clean-tab-btn::after {
    content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 16px; background: #ddd;
}
.clean-tab-btn:last-child::after { display: none; }

/* 활성화 상태 */
.clean-tab-btn.active {
    color: #ff6600; 
    font-weight: 800;
}

/* [포인트] 짧은 주황색 바 (중앙 정렬) */
.clean-tab-btn.active::before {
    content: ''; 
    position: absolute; 
    bottom: 12px; 
    left: 50%; 
    transform: translateX(-50%); 
    
    width: 30px; /* 짧게 끊음 */
    height: 3px; 
    background: #ff6600; 
    border-radius: 2px;
}
.clean-tab-btn:hover { color: #555; }


/* -------------------------------------------------------------------
   4. 컨텐츠 뷰포트
   ------------------------------------------------------------------- */
.sec2-content-view {
    flex: 1; 
    padding: 10px 40px 40px 40px; 
    box-sizing: border-box;
}

/* 패널 애니메이션 */
.main-panel { display: none; height: 100%; animation: fadeIn 0.4s; }
.main-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* =========================================================
   [내부 컨텐츠 스타일: 기존 유지]
   ========================================================= */

/* 1. 중앙회 소식 (대시보드) */
.sec2-dashboard-wrap { display: flex; gap: 30px; height: 100%; }

.dash-left {
    flex: 0.35; background: #fcfcfc; border-radius: 15px; border: 1px dashed #ddd;
    display: flex; align-items: center; justify-content: center;
}
.placeholder-box { text-align: center; }
.placeholder-box h3 { font-size: 26px; color: #ccc; margin-bottom: 10px; line-height: 1.2; }
.w-tag { background: #eee; color: #999; padding: 4px 10px; border-radius: 20px; font-size: 11px; }

.dash-right { flex: 0.65; display: flex; flex-direction: column; }

/* 서브 탭 (우측 정렬) */
.mini-text-nav { 
    display: flex; justify-content: flex-end; gap: 0; 
    margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid #222; 
}
.txt-sub-btn {
    background: none; border: none; font-size: 16px; color: #888; font-weight: 500;
    cursor: pointer; padding: 0 15px; position: relative; transition: 0.2s;
}
.txt-sub-btn::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #ddd; }
.txt-sub-btn:last-child { padding-right: 0; }
.txt-sub-btn:last-child::after { display: none; }
.txt-sub-btn.active { color: #ff6600; font-weight: 800; }

.mini-tab-viewport { flex: 1; overflow: hidden; position: relative; }
.mt-panel { display: none; height: 100%; flex-direction: column; }
.mt-panel.active { display: flex; }

/* 리스트 & 그리드 */
.mini-notice-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; }
.mini-notice-list li { border-bottom: 1px solid #f5f5f5; padding: 16px 0; }
.mini-notice-list li a { display: flex; align-items: center; text-decoration: none; color: #444; }
.mini-notice-list li a:hover .subj { text-decoration: underline; color: #ff6600; }
.cate { font-size: 11px; color: #fff; padding: 2px 6px; border-radius: 3px; margin-right: 8px; min-width: 34px; text-align: center; }
.cate.notice { background: #333; } .cate.info { background: #007bff; } .cate.news { background: #28a745; } .cate.event { background: #ff6600; }
.subj { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; margin-right: 10px; }
.date { font-size: 13px; color: #bbb; }

.media-full-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; flex: 1; }
.media-card-mini { background-size: cover; background-position: center; border-radius: 12px; position: relative; display: block; border: 1px solid #eee; text-decoration: none; }
.media-card-mini:hover { border-color: #ff6600; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.badge-mini { position: absolute; top: 12px; left: 12px; background: #007bff; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.badge-mini.youtube { background: #ff0000; } .badge-mini.magazine { background: #28a745; }
.txt-layer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: #fff; border-radius: 0 0 12px 12px; }
.txt-layer p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; }

.panel-more-btn { margin-top: 20px; display: block; text-align: center; padding: 12px; background: #f9f9f9; border-radius: 8px; color: #666; text-decoration: none; font-size: 14px; transition: 0.2s; font-weight: 600; }
.panel-more-btn:hover { background: #eee; color: #333; }
.no-data-mini { display: flex; align-items: center; justify-content: center; background: #f9f9f9; color: #aaa; border-radius: 8px; grid-column: 1 / -1; height: 100%; }


/* 2. 교육 & 매거진 레이아웃 */
.edu-layout { display: flex; gap: 30px; height: 100%; }
.edu-card { flex: 1; background: #fff; border: 1px solid #eee; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.edu-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: #ff6600; }
.edu-icon { width: 90px; height: 90px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 25px; color: #555; }
.edu-card.new-biz .edu-icon { color: #28a745; background: #e8f5e9; } .edu-card.old-biz .edu-icon { color: #007bff; background: #e3f2fd; }
.edu-txt h4 { font-size: 24px; margin: 0 0 10px 0; color: #222; }
.edu-txt p { color: #666; font-size: 16px; line-height: 1.6; margin-bottom: 25px; text-align: center; }
.go-link { background: #333; color: #fff; padding: 10px 25px; border-radius: 20px; font-size: 15px; }
.edu-sub-grid { width: 200px; display: flex; flex-direction: column; gap: 15px; }
.edu-sub-item { flex: 1; background: #f8f9fa; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #555; border: 1px solid #eee; transition: 0.3s; }
.edu-sub-item:hover { background: #ff6600; color: #fff; border-color: #ff6600; }
.edu-sub-item span { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .edu-sub-item i { font-size: 24px; }

.magazine-layout { display: flex; gap: 40px; height: 100%; align-items: stretch; }
.mag-cover-section { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 15px; }
.cover-img-box { width: 100%; flex: 1; background: #ddd; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); }
.cover-img-box img { width: 100%; height: 100%; object-fit: cover; }
.mag-badge { position: absolute; top: 0; left: 0; background: #ff6600; color: #fff; padding: 8px 12px; font-weight: 800; font-size: 14px; border-bottom-right-radius: 10px; }
.cover-btn-group { display: flex; gap: 10px; height: 45px; }
.mag-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 5px; font-weight: 700; font-size: 14px; }
.mag-btn.view { background: #333; color: #fff; } .mag-btn.list { border: 1px solid #ccc; color: #555; background: #fff; }
.mag-btn:hover { opacity: 0.8; }

.mag-info-section { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mag-intro-head { margin-bottom: 25px; border-bottom: 2px solid #222; padding-bottom: 20px; }
.mag-intro-head h3 { font-size: 28px; color: #222; margin: 0 0 10px 0; letter-spacing: -1px; }
.mag-intro-head strong { color: #ff6600; }
.sub-txt { font-size: 16px; font-weight: 700; color: #555; margin: 0 0 15px 0; }
.desc-txt { font-size: 15px; color: #666; line-height: 1.6; margin: 0; }
.mag-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: #f9f9f9; padding: 20px; border-radius: 10px; margin-bottom: 25px; }
.md-item { display: flex; align-items: center; }
.md-item .lbl { width: 70px; font-size: 14px; font-weight: 700; color: #222; position: relative; }
.md-item .lbl::after { content: '·'; position: absolute; right: 10px; color: #ccc; }
.md-item .val { font-size: 14px; color: #555; }
.mag-contact-area { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 20px; }
.contact-info { display: flex; flex-direction: column; gap: 5px; }
.ci-row { font-size: 15px; color: #444; }
.ci-row i { color: #ff6600; margin-right: 5px; width: 20px; text-align: center; }
.ci-row strong { margin-right: 8px; font-weight: 600; }
.ad-apply-btn { background: #ff6600; color: #fff; text-decoration: none; padding: 12px 25px; border-radius: 30px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: 0.3s; box-shadow: 0 5px 10px rgba(255,102,0,0.2); }
.ad-apply-btn:hover { background: #e65c00; transform: translateY(-2px); }


/* ==========================================================================
   [반응형] Tablet & Mobile (1024px 이하)
   ========================================================================== */
@media (max-width: 1024px) {
    
    /* 1. 전체 컨테이너 및 박스 높이 유동적으로 변경 */
    .sec2-container { padding: 40px 20px; }
    
    .sec2-white-box {
        min-height: auto; /* 고정 높이 해제 */
        height: auto;
    }
    
    .sec2-content-view {
        padding: 30px 20px; /* 내부 패딩 축소 */
    }

    /* 2. 메인 탭 네비게이션 (폰트 사이즈 조절) */
    .clean-tab-btn {
        font-size: 16px; /* 글자 크기 축소 */
        padding: 15px 0;
    }
    .clean-tab-btn::after { height: 12px; } /* 구분선 크기 조절 */


    /* ---------------------------------------------------------
       [레이아웃 변경] 가로 배치(Flex Row) -> 세로 배치(Column)
       --------------------------------------------------------- */
    
    /* 탭 1 (중앙회 소식) */
    .sec2-dashboard-wrap { flex-direction: column; gap: 30px; }
    
    .dash-left {
        width: 100%; flex: none;
        height: 200px; /* 모바일에서는 배너 높이 고정 */
        margin-bottom: 10px;
    }
    
    .dash-right { width: 100%; flex: none; }
    
    /* 탭 2 (교육) */
    .edu-layout { flex-direction: column; gap: 20px; }
    .edu-sub-grid { width: 100%; flex-direction: row; gap: 10px; } /* 서브 메뉴는 가로로 나열 */
    
    /* 탭 3 (매거진) */
    .magazine-layout { flex-direction: column; gap: 30px; align-items: center; }
    .mag-cover-section { width: 100%; max-width: 300px; } /* 표지 중앙 정렬 */
    .mag-info-section { width: 100%; text-align: center; } /* 텍스트 중앙 정렬 */
    
    /* 매거진 내부 요소 모바일 최적화 */
    .mag-intro-head h3 { font-size: 24px; }
    .mag-detail-grid { text-align: left; } /* 상세 정보는 좌측 정렬 유지 */
    .mag-contact-area { flex-direction: column; gap: 15px; text-align: center; }
    .contact-info { align-items: center; }
}


/* ==========================================================================
   [반응형] Mobile (767px 이하)
   ========================================================================== */
@media (max-width: 767px) {

    /* 타이틀 크기 조절 */
    .sec2-top-header h2 { font-size: 28px; }
    .sec2-top-header p { font-size: 14px; padding-bottom: 15px; }

    /* 메인 탭 버튼 더 작게 */
    .clean-tab-btn { font-size: 14px; padding: 12px 0; }
    .clean-tab-btn.active::before { width: 20px; bottom: 8px; } /* 포인트 바 조절 */

    /* 서브 탭 (보도사진/유튜브/공지사항) */
    .mini-text-nav { justify-content: center; /* 중앙 정렬 */ }
    .txt-sub-btn { font-size: 14px; padding: 0 10px; }

    /* 교육 탭 서브 그리드 (3단 -> 1단 or 2단) */
    .edu-sub-grid { flex-direction: column; }
    
    /* 매거진 상세 정보 그리드 (2열 -> 1열) */
    .mag-detail-grid { grid-template-columns: 1fr; }
    
    /* 미디어 그리드 (2열 유지하되 간격 좁힘) */
    .media-full-grid { gap: 10px; }
}





/* ==========================================================================
   [섹션 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; }



/*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; }
}

/*종료*/