.news-wrap{
    margin:30px auto;
    font-family:Arial;
}

.news-search{
    display:flex;
    gap:8px;
    background:#f8f9fc;
    padding:10px;
    border-radius:8px;
    margin-bottom:20px;
}

.news-search input{
    flex:1;
    padding:10px;
    border:1px solid #d2d2d2;
    border-radius:8px;
}

.news-search input:focus,select:focus{
  outline:none;
  border-color:#7950f2;
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}


.news-search button{
    padding:10px 14px;
    background:#6c5ce7;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.news-categories{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.news-categories a{
    padding:8px 14px;
	border-radius:8px;
    background:#f1f3f8;
    text-decoration:none;
    color:#555;
}

.news-categories a.active{
    background:#6c5ce7;
    color:#fff;
}

.news-list{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:15px;
}

.news-item{
    background:#fff;
    border:1px solid #d2d2d2;
    border-radius:8px;
    padding:15px;
    transition: all 0.25s ease;
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	 display:flex;
    flex-direction:column;
    min-height:160px;
}

.news-item:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    z-index:2;
}

.news-item:active{
    transform: translateY(-2px) scale(0.99);
    transition:0.1s;
}


.news-title{
    font-size:15px;
    font-weight:700;
    margin-bottom:10px;
    line-height:1.5;
}

.news-title a{
    color:#111;
    text-decoration:none;
}

.news-desc{
    font-size:13px;
    color:#666;
    margin-bottom:12px;
    line-height:1.5;
}

.news-meta{
 margin-top:auto;
    font-size:11px;
    color:#999;
    display:flex;
    justify-content:space-between;
}

.news-thumb-img{
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:10px;
}

/* =========================
   뉴스 액션바
========================= */

.news-action-bar{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.news-action-btn{
    flex:1;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#f3f4f6;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    transition:.2s;
}

.news-action-btn:hover{
    background:#e5e7eb;
}

.news-action-btn:active{
    transform:scale(0.97);
}


.news-like-btn.active{
    background:#ffebee;
    color:#e53935;
    border:1px solid #ffcdd2;
}

section.content.dark .news-like-btn.active{
    background:#3a1f24;
    color:#ff8a80;
    border-color:#5a2d35;
}


/* 다크모드 */
section.content.dark .news-action-btn{
    background:#2a2a2a;
    color:#ddd;
    border:1px solid #333;
}

section.content.dark .news-action-btn:hover{
    background:#333;
}

@media(max-width:1200px){
    .news-list{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media(max-width:768px){
    .news-list{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:480px){
    .news-list{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .news-list{
        grid-template-columns:1fr;
        gap:12px;
		 overflow-x:auto;
    }

    .news-item{
        padding:14px;
        border-radius:8px;
        min-height:auto;
    }

    .news-title{
        font-size:15px;
        line-height:1.4;
    }

    .news-desc{
        font-size:13px;
        line-height:1.5;
    }

    .news-meta{
        font-size:11px;
        flex-wrap:wrap;
        gap:6px;
    }
}


@media(max-width:768px){

    .news-item{
        box-shadow:0 6px 18px rgba(0,0,0,0.08);
        transition:0.2s;
    }

    .news-item:active{
        transform:scale(0.98);
    }
}


/* 다크모드 CSS */
.news-wrap{
    margin:0px auto;
    font-family:Arial;
    transition:0.2s;
}

/* =========================
   🌙 DARK MODE (content 기준)
========================= */
section.content.dark{
    background:#121212;
    color:#eaeaea;
}


* 링크 */
section.content.dark a{
    color:#fff;
}

/* 검색창 */
section.content.dark .news-search{
    background:#1e1e1e;
}

section.content.dark .news-search input{
    background:#2a2a2a;
    color:#fff;
    border-color:#444;
}

section.content.dark .news-search button{
    background:#444;
}

/* 카드 */
section.content.dark .news-item{
    background:#1e1e1e;
    border-color:#333;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}


section.content.dark .news-item:hover{

    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

section.content.dark .news-title a{
    color:#fff !important;
    text-decoration:none;
}



section.content.dark .news-title a:hover{
    color:#ddd !important;
    text-decoration:underline;
}

/* 설명 */
section.content.dark .news-desc{
    color:#aaa;
}

/* 메타 */
section.content.dark .news-meta{
    color:#888;
}

/* 실시간검색 */
.news-search{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.keyword-top-wrap{
    margin-left:0;
    flex-shrink:0;
}

.keyword-live{
    min-width:220px;
    height:42px;
}



@media(max-width:768px){

    .news-search{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
    }

    /* 실시간 검색 전체폭 */
    .keyword-top-wrap{
        width:100%;
        order:1;
        margin-left:0;
    }

    .keyword-live{
        width:100%;
        min-width:100%;
        box-sizing:border-box;
    }

    /* 검색창 한줄 */
    .news-search input{
        flex:1;
        min-width:0;
        order:2;
    }

    .news-search button[type="submit"]{
        order:3;
        white-space:nowrap;
    }

    #themeToggle{
        order:4;
        width:44px;
        flex-shrink:0;
    }
}



/* 실시간 */
.keyword-top-wrap{
    position:relative;
    margin-left:auto;
}

/* 한줄 */
.keyword-live{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border-radius:8px;
    padding:8px 14px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    min-width:260px;
}

.live-label{
    font-size:13px;
    font-weight:700;
    color:#6c5ce7;
}

/* 보이는 영역 */
.live-keyword-view{
    height:25px;
    overflow:hidden;
    flex:1;
    position:relative;
}

/* 움직이는 트랙 */
.live-keyword-track{
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

/* 롤링 항목 */
.live-keyword-track a{

    display:flex;
    align-items:center;
    gap:8px;
    height:25px;
    text-decoration:none;
    color:#333;
    font-size:13px;
}

/* 순위 */
.rank{
    color:#6c5ce7;
    font-weight:700;
}

.keyword-toggle{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:8px;
    background:#f3f4f6;
    color:#555;
    cursor:pointer;
    transition:all .2s ease;
    font-size:12px;
    font-weight:700;
}

.keyword-toggle:hover{
    background:#e5e7eb;
    color:#111;
}

.keyword-toggle:active{
    transform:scale(0.95);
}

/* 다크모드 */
section.content.dark .keyword-toggle{
    background:#2a2a2a;
    color:#ccc;
    border:1px solid #3a3a3a;
}

section.content.dark .keyword-toggle:hover{
    background:#353535;
    color:#fff;
}

/* 펼침 */
.keyword-top-box{
    position:absolute;
    top:48px;
    right:0;
    width:260px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    overflow:hidden;
    display:none;
    z-index:1000;
}

.keyword-top-wrap.active .keyword-top-box{
    display:block;
}

/* 리스트 */
.keyword-top-box a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    border-bottom:1px solid #f1f1f1;
    text-decoration:none;
    color:#333;
    transition:0.2s;
}

.keyword-top-box a:hover{
    background:#f8f9fc;
}

.kw{
    flex:1;
}

.cnt{
    font-size:12px;
    color:#999;
}


/* =========================
   🌙 실시간 검색어 다크모드
========================= */

section.content.dark .keyword-live{
    background:#1e1e1e;
    border:1px solid #333;
    box-shadow:none;
}

section.content.dark .live-label{
    color:#9d8cff;
}

section.content.dark .live-keyword-track a{
    color:#eaeaea;
}

section.content.dark .rank{
    color:#9d8cff;
}

section.content.dark .keyword-toggle{
    color:#aaa;
}

/* 펼침 박스 */
section.content.dark .keyword-top-box{
    background:#1e1e1e;
    border:1px solid #333;
    box-shadow:0 10px 30px rgba(0,0,0,0.45);
}

section.content.dark .keyword-top-box a{
    color:#ddd;
    border-bottom:1px solid #2c2c2c;
}

section.content.dark .keyword-top-box a:hover{
    background:#252525;
}

section.content.dark .keyword-top-box .cnt{
    color:#888;
}



.popular-news{
    background:#fff;
    border-radius:8px;
    padding:18px;
    margin-bottom:0px;
	border:1px solid #d2d2d2;
    box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.popular-news > *:last-child{
    border-bottom:none !important;
}

.popular-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:15px;
}

.popular-news a{
    display:flex;
    gap:10px;
    padding:10px;
    border:1px solid #f1f1f1;
    text-decoration:none;
	border-radius:8px;
    color:#333;
	transition:0.2s;
}

.popular-news a:hover{
    transform:translateY(-4px);
}

.popular-news a:last-child{

}

.popular-news .rank{
    color:#6c5ce7;
    font-weight:700;
    width:22px;
}

.popular-news .txt{
    flex:1;
    font-size:13px;
    line-height:1.4;
}

.popular-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.popular-meta{
    display:flex;
    gap:10px;
    font-size:11px;
    color:#999;
}

.popular-meta .press{
    color:#6c5ce7;
    font-weight:600;
}

.popular-meta .date{
    color:#999;
}

.popular-meta .hit{
    margin-left:auto;
    color:#aaa;
}

.news-thumb img{
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:10px;
}

/* 인기뉴스 썸네일 */
.popular-thumb{
    width:90px;
    height:70px;
    flex-shrink:0;
    border-radius:8px;
    overflow:hidden;
    background:#f3f4f6;
}

.popular-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* 인기뉴스 정렬 */
.popular-news a{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

/* 모바일 */
@media(max-width:768px){

.popular-grid{
        grid-template-columns:1fr;
    }


    .popular-thumb{
        width:80px;
        height:62px;
        border-radius:8px;
    }
}


/* 언론사별 뉴스 */

.popular-press-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.popular-press-tabs a{
    padding:7px 12px;
    border-radius:50px;
    background:#f3f4f6;
    color:#555;
    text-decoration:none;
    font-size:13px;
    transition:.2s;
}

.popular-press-tabs a:hover{
    background:#e5e7eb;
}

.popular-press-tabs a.active{
    background:#6c5ce7;
    color:#fff;
}

/* 다크모드 */
section.content.dark .popular-press-tabs a{
    background:#2a2a2a;
    color:#ccc;
}

section.content.dark .popular-press-tabs a.active{
    background:#6c5ce7;
    color:#fff;
}

/* =========================
   🌙 다크모드 - 인기뉴스
========================= */

section.content.dark .popular-news{

    background:#1e1e1e;

    border:1px solid #333;

    box-shadow:none;
}

section.content.dark .popular-title{

    color:#fff;
}

section.content.dark .popular-news a{
    border:1px solid #2c2c2c;
	border-radius:18px;
    color:#ddd;
}

section.content.dark .popular-news a:hover{

    background:#252525;
}

section.content.dark .popular-news .txt{

    color:#ddd;
}

section.content.dark .popular-news .rank{

    color:#8b7cff;
}
section.content.dark .popular-meta{

    color:#777;
}

section.content.dark .popular-meta .press{

    color:#9d8cff;
}

section.content.dark .popular-meta .date,
section.content.dark .popular-meta .hit{

    color:#888;
}


.card-body {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius:8px;
    margin-bottom: 20px;
    color: #374151;
    font-size: 14px;
    line-height: 1.7;
}

.keyword-title {
    margin-top: 10px;
    margin-bottom: 20px;
    color: #212529;
    font-size: 25px; /* 기본 PC 글자 크기 */
}

.keyword-number-box {
    display: inline-block;
    background-color: #000; /* 네이버 색상 */
    color: #fff;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    font-size: 30px;
    vertical-align: middle;
}

/* 모바일용 조정 (화면 768px 이하) */
@media (max-width: 768px) {

   .keyword-title {
        font-size: 20px; /* 모바일에서 글자 작게 */
    }
    .keyword-number-box {
        font-size: 20px; /* 모바일에서 줄인 크기 */
           padding: 6px 10px;   /* 모바일에서 높이 줄임 */
    }
    .keyword-text {
        font-size: 20px; /* 모바일에서 줄인 크기 */
    }
}

/* =========================
   DARK MODE BASE FIX
========================= */
section.content.dark {
    background: #121212;
    color: #eaeaea;
}

/* 링크 */
section.content.dark a {
    color: #eaeaea;
}

/* 카드 */
section.content.dark .card-body {
    background: #1e1e1e;
    border: 1px solid #333;
    color: #eaeaea;
}

/* 제목 */
section.content.dark .keyword-title {
    color: #f1f1f1;
}

/* 번호 박스 (강조 유지 + 밝게) */
section.content.dark .keyword-number-box {
    background-color: #6c5ce7;
    color: #fff;
}

/* =========================
   NEWS CARD (핵심)
========================= */
section.content.dark .news-item {
    background: #1e1e1e;
    border: 1px solid #2f2f2f;
    color: #eaeaea;

    /* 다크에서 살짝 떠보이게 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

section.content.dark .news-title a {
    color: #ffffff !important;
}

section.content.dark .news-desc {
    color: #b5b5b5;
}

/* meta 고정 느낌 유지 */
section.content.dark .news-meta {
    color: #888;
}

/* =========================
   INPUT / SEARCH
========================= */
section.content.dark .news-search {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
}

section.content.dark .news-search input {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
}

section.content.dark .news-search button {
    background: #6c5ce7;
    color: #fff;
}

/* =========================
   CATEGORY BUTTONS
========================= */
section.content.dark .news-categories a {
    background: #2a2a2a;
    color: #ccc;
}

section.content.dark .news-categories a.active {
    background: #6c5ce7;
    color: #fff;
}

/* hover */
section.content.dark .news-item:hover {
    transform: translateY(-3px);
    transition: 0.2s;
}

/* =========================
로딩 팝업
========================= */

.news-loading-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(5px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
}

.news-loading-box{
    width:320px;
    padding:35px 30px;
    border-radius:28px;
    background:#fff;
    text-align:center;
    box-shadow:
    0 15px 50px rgba(0,0,0,0.25);
    animation:loadingPopupShow .25s ease;
}

.news-loading-spinner{
    width:65px;
    height:65px;
    margin:0 auto 25px;
    border-radius:50%;
    border:6px solid #eee;
    border-top:6px solid #7c4dff;
    animation:loadingSpin .8s linear infinite;
}

.news-loading-title{
    font-size:22px;
    font-weight:700;
    color:#222;

    margin-bottom:10px;
}

.news-loading-desc{
    font-size:14px;
    color:#777;
    margin-bottom:20px;
    transition:.2s;
}

.loading-progress{
    width:100%;
    height:10px;
    background:#eee;
    border-radius:999px;
    overflow:hidden;
}

.loading-progress-bar{
    width:40%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #7c4dff,
        #b388ff
    );

    animation:loadingBar 1.2s linear infinite;
}

/* 애니메이션 */

@keyframes loadingSpin{
    to{
        transform:rotate(360deg);
    }
}

@keyframes loadingBar{
    0%{
        transform:translateX(-120%);
    }
    100%{
        transform:translateX(320%);
    }
}

@keyframes loadingPopupShow{
    from{
        opacity:0;
        transform:scale(.9);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}


/* =========================
   인기뉴스 + 댓글뉴스 레이아웃
========================= */

.popular-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:18px;
    margin-bottom:25px;
}

.popular-layout.no-comment-news{
    grid-template-columns:1fr 1fr !important;
}

/* =========================
   공통 박스
========================= */

.popular-news,
.comment-news{
    background:#fff;
    border:1px solid #dcdfe6;
    border-radius:8px;
    padding:18px;
    box-shadow:0 4px 18px rgba(0,0,0,0.05);
}

/* =========================
   타이틀
========================= */

.popular-title{
    font-size:20px;
    font-weight:800;
    margin-bottom:16px;
    color:#111827;
}

/* =========================
   TOP 뉴스 그리드
========================= */

.popular-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.popular-grid a{
    display:flex;
    gap:12px;
    padding:10px;
    border-radius:8px;
    border:1px solid #eef0f4;
    background:#fff;
    text-decoration:none;
    transition:.2s;
}

.popular-grid a:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* 썸네일 */

.popular-thumb{
    width:90px;
    height:70px;
    border-radius:8px;
    overflow:hidden;
    flex-shrink:0;
    background:#f3f4f6;
}

.popular-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* 텍스트 */

.popular-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.popular-info .txt{
    font-size:14px;
    line-height:1.45;
    font-weight:700;
    color:#111827;
}

.popular-meta{
    display:flex;
    gap:10px;
    font-size:11px;
    color:#9ca3af;
}

.popular-meta .press{
    color:#6c5ce7;
    font-weight:700;
}


/* =========================
   댓글 많은 뉴스
========================= */

.comment-news-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.comment-news-item{
    display:flex;
    gap:12px;
    padding:10px;
    border-radius:8px;
    border:1px solid #eef0f4;
    text-decoration:none;
    transition:.2s;
    background:#fff;
}

.comment-news-item:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.comment-thumb{
    width:82px;
    height:62px;
    border-radius:8px;
    overflow:hidden;
    flex-shrink:0;
}

.comment-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.comment-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.comment-title{
    font-size:13px;
    line-height:1.45;
    font-weight:700;
    color:#111827;
}

.comment-meta{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    color:#9ca3af;
}

/* 언론사 */

.comment-meta .press{
    color:#6c5ce7;
    font-weight:700;
}

/* 날짜 */

.comment-meta .date{
    color:#8b949e;
}

/* 댓글수 */

.comment-meta .count{
    margin-left:auto;
    color:#8b949e;
    font-weight:600;
}


/* =========================
   댓글 펼침
========================= */

.comment-news-box{
    display:none;
    margin-top:10px;
    padding:14px;
    border-radius:8px;
    background:#f8f9fc;
    border:1px solid #eef0f4;
}

/* 로딩 */
.comment-loading{
    text-align:center;
    color:#777;
    font-size:13px;
}

/* 다크모드 */

section.content.dark .comment-news-box{
    background:#1b1f26;
    border:1px solid #2e3440;
}


/* 다크모드 */
section.content.dark .comment-meta .press{
    color:#9d8cff;
}

section.content.dark .comment-meta .date,
section.content.dark .comment-meta .count{
    color:#7f8896;
}
/* =========================
   다크모드
========================= */

section.content.dark .popular-news,
section.content.dark .comment-news{
    background:#1e1e1e;
    border:1px solid #2f2f2f;
}

section.content.dark .popular-title{
    color:#f3f4f6;
}

section.content.dark .popular-grid a,
section.content.dark .comment-news-item{
    background:#232323;
    border:1px solid #333;
}

section.content.dark .popular-info .txt,
section.content.dark .comment-title{
    color:#f3f4f6;
}

section.content.dark .popular-meta,
section.content.dark .comment-meta{
    color:#8b949e;
}

section.content.dark .popular-thumb{
    background:#2d2d2d;
}

/* =========================
   모바일
========================= */

@media(max-width:1100px){
    .popular-layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .popular-grid{
        grid-template-columns:1fr;
    }

    .popular-thumb{
        width:80px;
        height:62px;
    }
}


.side-banner {
    margin: 15px 0;
}

.side-banner a {
    display: block;
    position: relative;
    width: 100%;
    height: 200px; /* 세로 크게 */
    border-radius:8px;
    overflow: hidden;
    background: #ededed; /* 배경 (이미지 없을 때 대비) */
}

/* 전체 영역 */
.banner-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;  /* 가로 가운데 */
    align-items: center;      /* 세로 가운데 */
}

/* 광고 라벨 (좌측 상단 유지) */
.banner-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 8px;
}

/* 중앙 텍스트 */
.banner-text {
    text-align: center;
    color: #000;
}

.banner-text strong {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 살짝 어두운 오버레이 */
.side-banner a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

/* =========================
   전체영역
========================= */

.youtube-news-wrap{
    width:100%;
    margin:20px 0 40px 0;
}

/* =========================
   타이틀
========================= */

.youtube-news-title{
    font-size:20px;
    font-weight:800;
    margin-bottom:20px;
}

/* =========================
   탭 메뉴
========================= */

.youtube-tab-wrap{
    display:flex;
    gap:1px;
    overflow-x:auto;
    margin-bottom:20px;
}

.youtube-tab{
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:50px;
    background:#f3f4f6;
    color:#111;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    transition:0.2s;
}

.youtube-tab.active{
    background:
    linear-gradient(135deg,#ff0033,#c4002f);
    color:#fff;
}

/* =========================
   로고
========================= */

.youtube-tab-logo{

    width:22px;
    height:22px;
    border-radius:50%;
    object-fit:cover;
}

/* =========================
   영상 리스트
========================= */

.youtube-grid{
    display:grid;
    grid-template-columns:
    repeat(5,minmax(0,1fr));
    gap:18px;
}

/* =========================
   카드
========================= */

.youtube-card{
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:
    0 2px 12px rgba(0,0,0,0.08);
    transition:0.2s;
	border: 1px solid #d2d2d2;
	padding: 15px 15px 0 15px;
}

.youtube-card:hover{
    transform:translateY(-4px);
}

/* =========================
   썸네일
========================= */

.youtube-thumb{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
	  border-radius:8px;
}

/* =========================
   정보
========================= */

.youtube-info{
    padding:14px;
}

/* =========================
   제목
========================= */

.youtube-video-title{
    font-size:15px;
    font-weight:700;
    line-height:1.5;
    height:49px;
    overflow:hidden;
    color:#111;
}

/* =========================
   메타
========================= */

.youtube-meta{
	font-size:11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
}

.youtube-meta-title{
	font-size:11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
}

/* =========================
   날짜
========================= */

.youtube-date{
    font-size:11px;
    color:#999;
}


/* =========================
   🌙 유튜브 뉴스 다크모드
========================= */

/* 전체 박스 */
section.content.dark .youtube-news-wrap{

}

/* 타이틀 */
section.content.dark .youtube-news-title{
    color:#fff;
}

/* =========================
   탭 메뉴
========================= */

section.content.dark .youtube-tab{
    background:#2a2a2a;
    color:#d1d5db;
    border:1px solid #3a3a3a;
}

section.content.dark .youtube-tab:hover{
    background:#323232;
    color:#fff;
}

section.content.dark .youtube-tab.active{

    background:
    linear-gradient(135deg,#ff0033,#c4002f);
    color:#fff;
    border-color:transparent;
}

/* =========================
   카드
========================= */

section.content.dark .youtube-card{
    background:#232323;
    border:1px solid #333;
    box-shadow:
    0 4px 14px rgba(0,0,0,0.35);
}

section.content.dark .youtube-card:hover{
    box-shadow:
    0 10px 28px rgba(0,0,0,0.45);
}

/* =========================
   제목
========================= */

section.content.dark .youtube-video-title{
    color:#f3f4f6;
}

/* =========================
   메타
========================= */

section.content.dark .youtube-meta{
    color:#999;
}

section.content.dark .youtube-date{
    color:#888;
}

/* =========================
   스크롤바
========================= */

section.content.dark .youtube-tab-wrap::-webkit-scrollbar{
    height:6px;
}

section.content.dark .youtube-tab-wrap::-webkit-scrollbar-thumb{
    background:#444;
    border-radius:8px;
}

section.content.dark .youtube-tab-wrap::-webkit-scrollbar-track{
    background:#1e1e1e;
}


/* =========================
   반응형
========================= */

@media(max-width:1200px){
    .youtube-grid{

        grid-template-columns:
        repeat(3,minmax(0,1fr));
    }

}

@media(max-width:768px){
    .youtube-grid{

        grid-template-columns:
        repeat(2,minmax(0,1fr));
    }

}

@media(max-width:480px){

    .youtube-grid{

        grid-template-columns:
        repeat(1,minmax(0,1fr));
    }

}


/* =========================
  날씨 슬라이더
========================= */
.weather-slider{
    position:relative;
    width:100%;
    height:110px;
    overflow:hidden;
}

/* =========================
   카드
========================= */
.weather-card{
    position:absolute;

    left:0;
    top:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
    border-radius:8px;
    opacity:0;
    transform:translateX(30px);
    animation:
    weatherSlide 32s infinite;
}

/* =========================
   애니메이션
========================= */
@keyframes weatherSlide{

    0%{
        opacity:0;
        transform:translateX(30px);
    }

    5%{
        opacity:1;
        transform:translateX(0);
    }

    20%{
        opacity:1;
        transform:translateX(0);
    }

    25%{
        opacity:0;
        transform:translateX(-30px);
    }

    100%{
        opacity:0;
    }
}

/* =========================
   날씨 배경
========================= */
.weather-card.clear{
    background:#4facfe;
    color:#fff;
}

.weather-card.cloud{
    background:#6b7280;
    color:#fff;
}

.weather-card.rain{
    background:#1e293b;
    color:#fff;
}

.weather-card.snow{
    background:#f5f7ff;
    color:#333;
}

/* =========================
   LEFT
========================= */
.weather-city{
    font-size:14px;
    opacity:.9;
}

.weather-temp-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:6px;
}

.weather-icon{
    font-size:28px;
}

.weather-temp{
    font-size:38px;
    font-weight:800;
}

/* =========================
   RIGHT
========================= */
.weather-right{
    text-align:right;
}

.weather-desc{
    font-size:15px;
    font-weight:700;
}

.weather-meta{
    margin-top:5px;
    font-size:12px;
    opacity:.8;
}



/* =========================
  로그링 팝업
========================= */
.login-alert-wrap{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.login-alert-box{
    width:100%;
    max-width:330px;
    background:#fff;
    border-radius:28px;
    padding:28px 22px;
    text-align:center;
    animation:popupShow .18s ease;
}

.login-alert-icon{
    font-size:42px;
    margin-bottom:14px;
}

.login-alert-text{
    font-size:15px;
    color:#333;
    line-height:1.5;
}

.login-alert-btns{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.login-move-btn,
.login-close-btn{
    flex:1;
    height:48px;
    border:0;
    border-radius:10px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

/* 로그인 */
.login-move-btn{
    background:linear-gradient(135deg,#6a5cff,#8f6bff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

/* 닫기 */
.login-close-btn{
    background:#f1f3f8;
    color:#555;
}

a:link, a:visited {
    color: #333;
    text-decoration: none;
}

@keyframes popupShow{

    from{
        transform:scale(.9);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}




/* =========================
  수정 팝업
========================= */

.news-admin-bar{
    margin-top:10px;
}

.news-admin-edit-btn{
    border:none;
    background:#6c5ce7;
    color:#fff;
    height:32px;
    padding:0px 14px;
	 margin-top:10px;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
}

.news-edit-box{
    margin-top:10px;
    padding:12px;
    border:1px solid #ececff;
    border-radius:6px;
    background:#fafaff;
    display:flex;
    gap:8px;
}

.news-category-select{
    flex:1;
    height:36px;
    border:1px solid #ddd;
    border-radius:6px;
    padding:0 10px;
}

.news-category-save-btn{
    border:none;
    background:#111827;
    color:#fff;
    padding:0 16px;
    border-radius:8px;
    cursor:pointer;
}


.category-alert-popup{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.35);
    z-index:99999;
}

.category-alert-box{
    width:280px;
    background:#fff;
    border-radius:10px;
    padding:30px 20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    animation:popupFade .2s ease;
}

.category-alert-icon{
    font-size:42px;
    margin-bottom:30px;
}

.category-alert-text{
    font-size:16px;
    font-weight:600;
    color:#222;
}

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


/* =========================
   다크모드 - 관리자 수정 영역 (정상 버전)
========================= */

section.content.dark .news-admin-edit-btn{
    background:#7c6cff;
    color:#fff;
}

section.content.dark .news-admin-edit-btn:hover{
    background:#6a5af9;
}

section.content.dark .news-edit-box{
    background:#1f2430;
    border:1px solid #343b4d;
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
}

section.content.dark .news-category-select{
    background:#2a3142;
    border:1px solid #434c63;
    color:#fff;
}

section.content.dark .news-category-select option{
    background:#2a3142;
    color:#fff;
}

section.content.dark .news-category-save-btn{
    background:#7c6cff;
    color:#fff;
}

section.content.dark .news-category-save-btn:hover{
    background:#6a5af9;
}


/* =========================
  삭제 팝업
========================= */

.news-admin-btn-group{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.news-admin-edit-btn,
.news-admin-delete-btn{
    flex:1;              /* 핵심: 50% */
     border:none;
    background:#6c5ce7;
    color:#fff;
    height:32px;
    padding:0px 14px;
	 margin-top:10px;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
}

/* 수정 버튼 */
.news-admin-edit-btn{
    background:#6c5ce7;
    color:#fff;
}

/* 삭제 버튼 */
.news-admin-delete-btn{
    background:#ef4444;
    color:#fff;
}

.dark-mode .news-admin-edit-btn{
    background:#7c6cff;
}

.dark-mode .news-admin-delete-btn{
    background:#ff5c5c;
}