/* ==========================================================================
           common.css (전체 스타일)
           ========================================================================== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; color: #333; line-height: 1.6; background-color: #f8f9fa; -webkit-font-smoothing: antialiased; }
        a { text-decoration: none; color: inherit; cursor: pointer; }
        a:hover { text-decoration: underline; }
        ul, ol, li { list-style: none; }
        img { max-width: 100%; height: auto; display: block; background-color: #e5e5e5; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; }
        input[type="text"] { font-family: inherit; outline: none; }

        /* Layout */
        .container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
        .content-wrapper { display: flex; gap: 40px; padding: 40px 0; }
        .main-content { flex: 1; min-width: 0; } 
        .aside.view-sidebar { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }

        /* 메인페이지(is-main-page) 활성화 시 우측 사이드바 숨김 처리 */
        body.is-main-page .aside.view-sidebar { display: none !important; }

        /* Header */
        .site-header { background: #ffffff; padding: 10px 0; text-align: center; border-bottom: 1px solid #e2e4e8; }
        .site-logo { display: block; font-size: 36px; font-weight: 900; color: #1A237E; letter-spacing: -1px; text-transform: uppercase; }
        .site-logo img { height: 80px; background-color: transparent; margin: auto;}
        .site-logo span { color: #E53935; }
        .site-description { display: none; font-size: 11px; color: #64748b; margin-top: 5px; }

        /* GNB */
        .main-nav { background: #ffffff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .nav-list { display: flex; justify-content: center; gap: 30px; padding: 0 20px; max-width: 1080px; margin: 0 auto; overflow-x: auto; white-space: nowrap; }
        .nav-list::-webkit-scrollbar { display: none; }
        .nav-list li a { display: block; padding: 16px 0; font-size: 16px; font-weight: 600; transition: color 0.2s; }
        .nav-list li a:hover { color: #8b00c3; text-decoration: none; }

        /* SPA Utilities */
        .page-section { display: none; }
        .page-section.active { display: block; animation: fadeIn 0.4s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* ==========================================================================
           main.html (메인페이지 전용 레이아웃)
           ========================================================================== */
           
        /* 1. 최상단 메인 슬라이더 (3개 롤링) */
        .hero-slider-wrap { position: relative; width: 100%; height: 450px; border-radius: 8px; overflow: hidden; margin-bottom: 50px; background: #000; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .hero-slides { position: relative; width: 100%; height: 100%; }
        .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease-in-out; display: flex; align-items: flex-end; z-index: 1; }
        .hero-slide.active { opacity: 1; z-index: 2; }
        .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
        .hero-slide-content { position: relative; z-index: 3; padding: 50px 40px 40px; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); width: 100%; color: #fff; }
        .hero-slide-title { font-size: 32px; font-weight: bold; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .hero-slide-desc { font-size: 16px; color: #cbd5e1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 800px; }
        
        .slider-controls { position: absolute; bottom: 40px; right: 40px; z-index: 10; display: flex; align-items: center; gap: 15px; }
        .slider-dots { display: flex; gap: 8px; }
        .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: 0.3s; }
        .dot.active { background: #fff; transform: scale(1.2); }
        .slider-arrow { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: 0.2s; }
        .slider-arrow:hover { background: #fff; color: #000; }

        /* 공통 섹션 헤더 */
        .main-section-header { border-bottom: 2px solid #0f172a; padding-bottom: 10px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: flex-end; }
        .main-section-header h2 { font-size: 24px; font-weight: 900; color: #0f172a; display: flex; align-items: center; gap: 8px; }
        .main-section-header .more-btn { font-size: 14px; color: #64748b; font-weight: 600; display: flex; align-items: center; gap: 4px; }
        .main-section-header .more-btn:hover { color: #1A237E; text-decoration: none; }

        /* 2. Today's 컷뉴스 (4단 배열) */
        .todays-cut { margin-bottom: 50px; }
        .cut-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .cut-item { display: flex; flex-direction: column; cursor: pointer; }
        .cut-item:hover .cut-title { color: #1A237E; text-decoration: underline; }
        .cut-thumb-wrap { position: relative; margin-bottom: 25px; border-radius: 6px; }
        .cut-thumb-wrap img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e4e8; }
        .cut-tag { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #cbd5e1; padding: 4px 15px; border-radius: 20px; font-size: 13px; font-weight: bold; color: #1e293b; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .cut-title { font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; color: #334155; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 5px; }

        /* 3. 연예 / 스포츠 (2단 섹션) */
        .ent-sports-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 50px; }
        .es-card { cursor: pointer; }
        .es-card:hover h3 { text-decoration: underline; color: #1A237E; }
        .es-card img { width: 100%; height: 260px; object-fit: cover; border-radius: 6px; margin-bottom: 15px; border: 1px solid #e2e4e8; }
        .es-card h3 { font-size: 20px; font-weight: bold; margin-bottom: 8px; line-height: 1.3; }
        .es-card p { font-size: 14px; color: #64748b; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

        /* 4. 하단 복합 리스트 (좌측 기사목록, 우측 사이드위젯) */
        .complex-news-section { display: grid; grid-template-columns: 2.2fr 1fr; gap: 40px; margin-bottom: 40px; }
        
        /* 좌측 (하이라이트 박스 + 리스트) */
        .cn-highlight {    display: block; background: #f8fafc; border: 1px solid #e2e4e8; padding: 25px; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
        .cn-highlight:hover { background: #f1f5f9; }
        .cn-highlight h3 { font-size: 22px; font-weight: bold; color: #0f172a; margin-bottom: 10px; line-height: 1.3; letter-spacing: -0.5px; }
        .cn-highlight p { font-size: 15px; color: #475569; }
        
        .cn-list { display: flex; flex-direction: column; }
        .cn-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #e2e4e8; cursor: pointer; }
        .cn-item:last-child { border-bottom: none; }
        .cn-item:hover h4 { color: #1A237E; text-decoration: underline; }
        .cn-item img { width: 160px; height: 110px; object-fit: cover; border-radius: 4px; border: 1px solid #e2e4e8; flex-shrink: 0; }
        .cn-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
        .cn-info h4 { font-size: 18px; font-weight: bold; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .cn-info p { font-size: 14px; color: #64748b; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .cn-meta { font-size: 12px; color: #94a3b8; }

        /* 우측 (연재/오피니언 위젯) */
        .side-widget { margin-bottom: 40px; }
        .side-widget-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0f172a; padding-bottom: 8px; margin-bottom: 15px; }
        .side-widget-header h3 { font-size: 16px; font-weight: bold; position: relative; padding-left: 10px; }
        .side-widget-header h3::before { content: ''; position: absolute; left: 0; top: 45%; transform: translateY(-50%); width: 4px; height: 14px; background: #E53935; }
        .side-widget-header a { font-size: 12px; color: #64748b; }

        .widget-list li { border-bottom: 1px solid #e2e4e8; padding: 12px 0; }
        .widget-list li:last-child { border-bottom: none; }
        .widget-list a { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: #1e293b; }
        .widget-list a:hover { color: #1A237E; text-decoration: underline; }
        .widget-list span { display: block; font-size: 12px; color: #94a3b8; font-weight: normal; margin-top: 5px; }

        .opinion-list li { border-bottom: 1px solid #e2e4e8; padding: 15px 0; }
        .opinion-list li:last-child { border-bottom: none; }
        .opinion-link { display: flex; gap: 15px; align-items: center; }
        .opinion-link:hover .op-title { color: #1A237E; text-decoration: underline; }
        .opinion-link img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; border: 1px solid #e2e4e8; }
        .op-info { flex: 1; }
        .op-title { font-size: 14px; font-weight: bold; line-height: 1.4; color: #1e293b; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .op-author { font-size: 12px; color: #64748b; }


        /* ==========================================================================
           list.html & view.html (서브페이지 공통 및 전용)
           ========================================================================== */
        
        .search-board { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #fff; border: 1px solid #e2e4e8; border-radius: 4px; margin-bottom: 30px; }
        .search-result-text { font-size: 16px; font-weight: bold; }
        .search-result-text span { color: #E53935; }
        .search-form { display: flex; }
        .search-input { width: 250px; padding: 10px 15px; border: 1px solid #cbd5e1; border-radius: 4px 0 0 4px; font-size: 14px; }
        .search-input:focus { border-color: #1A237E; }
        .search-btn { padding: 10px 20px; background: #1A237E; color: #fff; border-radius: 0 4px 4px 0; font-weight: bold; font-size: 14px; }
        
        .article-list-container { display: flex; flex-direction: column; gap: 20px; }
        .article-list-item { display: flex; gap: 20px; background: #fff; padding: 20px; border: 1px solid #e2e4e8; border-radius: 4px; cursor: pointer; transition: box-shadow 0.2s; }
        .article-list-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
        .article-list-thumb { width: 200px; height: 130px; flex-shrink: 0; overflow: hidden; border-radius: 4px; }
        .article-list-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
        .article-list-item:hover .article-list-thumb img { transform: scale(1.05); }
        .article-list-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .article-list-title { font-size: 20px; font-weight: bold; color: #0f172a; margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .article-list-desc { font-size: 15px; color: #64748b; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .article-list-meta { font-size: 13px; color: #94a3b8; margin-top: 10px; }

        .pagination { display: flex; justify-content: center; gap: 5px; margin-top: 40px; }
        .page-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #fff; border: 1px solid #e2e4e8; border-radius: 4px; font-size: 14px; font-weight: 600; }
        .page-link:hover { border-color: #1A237E; color: #1A237E; }
        .page-link.active { background: #1A237E; color: #fff; border-color: #1A237E; }

        /* View.html */
        .article-view-container { background-color: #fff; padding: 40px; border: 1px solid #e2e4e8; border-radius: 4px; }
        .article-view-header { border-bottom: 2px solid #0f172a; padding-bottom: 20px; margin-bottom: 30px; }
        .article-view-title { font-size: 32px; font-weight: 900; line-height: 1.4; color: #0f172a; margin-bottom: 15px; }
        .article-view-meta { display: flex; justify-content: space-between; font-size: 14px; color: #64748b; }
        .article-view-body { font-size: 17px; line-height: 1.8; color: #333; }
        .article-view-body img { margin: 30px auto; max-width: 100%; height: auto; border-radius: 4px; }
        .article-view-body p { margin-bottom: 0; }
        .article-tools { display: flex; justify-content: flex-end; gap: 10px; margin: 20px auto; padding: 20px 0; border-top: 1px solid #e2e4e8; }
        .tool-btn { padding: 8px 15px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; font-weight: 600; color: #475569; }
        
        .ad_text_pic_B { margin-top: 40px; background: #f8fafc; border: 1px solid #e2e4e8; padding: 25px; border-radius: 4px; }
        .ad_text_pic_B h4 { font-size: 18px; margin-bottom: 15px; color: #0f172a; }
        .ad_text_pic_B ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
        .ad_text_pic_B li a { display: flex; gap: 15px; background: #fff; padding: 10px; border: 1px solid #e2e4e8; border-radius: 4px; }
        .ad_text_pic_B .thumb { width: 80px; height: 60px; flex-shrink: 0; }
        .ad_text_pic_B .thumb img { width: 100%; height: 100%; object-fit: cover; }
        .ad_text_pic_B .info { flex: 1; display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 1.4; }

        /* 우측 사이드바 (list, view 전용) */
        .section_09 { background: #fff; border: 1px solid #e2e4e8; padding: 20px; border-radius: 4px; margin-bottom: 20px; }
        .section_09 h3 { font-size: 18px; font-weight: bold; border-bottom: 2px solid #0f172a; padding-bottom: 10px; margin-bottom: 15px; }
        .section_09 ul { display: flex; flex-direction: column; gap: 15px; }
        .section_09 a { display: flex; gap: 12px; }
        .section_09 .thumb img { width: 80px; height: 60px; object-fit: cover; border-radius: 2px; }
        .section_09 .tit { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
        .section_09 .press { font-size: 12px; color: #94a3b8; }
        .ad-banner { width: 100%; background: #161B2E; display: flex; align-items: center; justify-content: center; position: relative; padding: 40px 20px; border-radius: 4px; text-align: center; }
        .ad-label { font-size: 10px; color: #64748b; font-weight: bold; display: block; margin-bottom: 4px; }
        .ad-text { color: #94a3b8; font-size: 15px; }
        .ad-badge { position: absolute; top: 5px; right: 5px; font-size: 10px; background: rgba(0,0,0,0.1); color: #cecdcd; padding: 2px 6px; }


        .section_04 .txt_age { color: #9c27b0 !important; }

        [class*=ad_text] h4 em{color:#9c27b0 !important; }
        [class*=ad_text] h4 .ico_arrow{border-right:2px solid #9c27b0!important;  border-bottom:2px solid #9c27b0!important; }
        .ad_text_D li a:before{border:1px solid #9c27b0 !important;border-top:0 !important;border-right:0 !important;}

        [class*=section_] h3 {
            padding-bottom: 10px !important; 
            padding-left: 15px !important; 
            margin: 0 0 15px; 
            margin-bottom:15px !important; 
            border-bottom: 2px solid #0f172a;
        }

        [class*=section_] h3::before { content: ''; position: absolute; left: 0; top: 30%; transform: translateY(-50%); width: 4px; height: 14px; background: #E53935; }

        
        @media all and (max-width:640px){
            
            [class*=ad_text] h4 { margin: auto !important;}
            /* ad_text_pic_A */
            .ad_text_pic_A ul{padding:0 !important;}
            
                /* ad_text_D */
            .ad_text_D ul { padding: 0 !important;}
                }
    

        /* ==========================================================================
           Footer & Modal
           ========================================================================== */
        .site-footer { background: #1e293b; color: #94a3b8; padding: 50px 0 40px; margin-top: 60px; font-size: 14px; }
        .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; border-bottom: 1px solid #334155; padding-bottom: 30px; }
        .footer-nav a { color: #f8fafc; font-weight: 600; }
        .footer-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 30px; line-height: 1.8; text-align: center; max-width: 900px; margin: 0 auto; }
        .footer-info-item strong { color: #cbd5e1; font-weight: normal; margin-right: 5px; }
        .footer-copyright { text-align: center; margin-top: 30px; font-size: 13px; color: #64748b; }

        .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
        .modal-overlay.active { display: flex; }
        .modal-container { background: #ffffff; width: 100%; max-width: 800px; max-height: 90vh; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
        .modal-header { padding: 20px 25px; border-bottom: 1px solid #e2e4e8; display: flex; justify-content: space-between; align-items: center; background: #f8fafc; }
        .modal-header h2 { font-size: 20px; font-weight: bold; }
        .modal-body { padding: 25px; overflow-y: auto; flex: 1; }
        .tab-nav { display: flex; border-bottom: 2px solid #e2e4e8; margin-bottom: 25px; }
        .tab-btn { padding: 10px 20px; font-size: 15px; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; }
        .tab-btn.active { color: #1A237E; border-bottom-color: #1A237E; }
        .tab-content { display: none; color: #334155; line-height: 1.7; }
        .tab-content.active { display: block; }

        /* Responsive */
        @media (max-width: 900px) {
            .content-wrapper { flex-direction: column; padding: 20px; }
            .aside.view-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
            .aside.view-sidebar > * { flex: 1; min-width: 300px; }
            .complex-news-section { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .cut-grid { grid-template-columns: repeat(2, 1fr); }
            .ent-sports-section { grid-template-columns: 1fr; }
            .cn-item { flex-direction: column; }
            .cn-item img { width: 100%; height: 200px; }
            .article-list-item { flex-direction: column; }
            .article-list-thumb { width: 100%; height: 200px; }
            .hero-slider-wrap { height: 350px; }
            .hero-slide-title { font-size: 22px; }
            .nav-list { display: flex; justify-content: flex-start; gap: 15px; }
        
        }
        @media (max-width: 480px) {
            .site-logo img { height: 60px; }
            .cut-grid { grid-template-columns: 1fr; }
            .content-wrapper { padding: 10px; }
            .search-board { flex-direction: column; }
            .article-view-container {  padding: 30px;}
            .article-view-title { font-size: 24px;}
            .article-view-body { font-size: 16px; line-height: 1.6; }
            .footer-info { gap: 5px 20px; line-height: 1.6; text-align: center; margin: 0 auto; }
        }

/* 기본 광고 배너 */
.ad-banner { width: 100%; background-color: #161B2E; /*border: 1px solid #1e293b;*/  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; margin: 2rem 0; padding:0; border-radius: 0;  }
@media (min-width: 768px) { .ad-banner {  } }
.ad-bg { position: absolute; inset: 0; background: linear-gradient(to right, rgba(30,58,138,0.1), transparent, rgba(30,58,138,0.1)); opacity: 0.5; }
.ad-content { position: relative; z-index: 10; text-align: center; }
.ad-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; display: block; margin-bottom: 0.25rem; }
.ad-text { color: #94a3b8; font-weight: 500; }
@media (min-width: 768px) { .ad-text { font-size: 1.125rem; } }
.ad-badge {position: absolute;top: 3px;right: 3px;font-weight: bold;margin: auto;display: flex;align-items: center;font-size: 10px;background: rgba(0, 0, 0, 0.1);color: #cecdcd;padding: 2px 6px;border-radius: 3px;}

/* 우측 광고배너 */
.banner_ad{position:absolute;top:2px; right:2px; width: auto !important; height: 16px; z-index:1;cursor:pointer}