:root {
    --bg-paper: #fff;
	/* --bg-paper: #fdfbf7; */
    --font-head: 'Playfair Display', 'Noto Serif KR', serif;
    --border-thick: 0.4rem solid var(--gray-900);
    --border-thin: 0.1rem solid #ddd;
}

body {
    background-color: var(--bg-paper);
    color: var(--gray-900);
}

.unit a {
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

a:hover {
    background-color: #f0e9e0; /* 기존 bg-paper(#fdfbf7)보다 살짝 어두운 톤 */
    color: #000; /* 가독성 상승 */
}

.unit img {
    filter: contrast(1.05);
}

/* 폰트 유틸리티 확장 */
.font-serif {
    font-family: var(--font-head);
}

/* 헤더 로고  */
.brand-logo {
    font-size: clamp(3.2rem, 6vw, 6.4rem);
    letter-spacing: -0.1rem;
    line-height: 1;
}

/* 네비게이션 */
.nav-wrap {
    position: sticky;
    top: 0;
    background: var(--bg-paper);
    z-index: 1000;
}

nav {
    border-top: var(--border-thick);
    border-bottom: 0.1rem solid var(--black);
}

.nav-list {
    display: flex;
    justify-content: space-between;
    min-width: 800px;
}

.nav-list li a {
    display: block;       /* 가로 영역을 가득 채움 */
    padding: 10px 15px;   /* 위아래 10px, 좌우 15px 만큼 클릭 영역 확장 */
    text-decoration: none; /* 밑줄 제거 (선택사항) */
}

/* 가로 스크롤 숨김 처리 */
.scroll-hide {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scroll-hide::-webkit-scrollbar {
    display: none;
}

/* 뉴스 그리드 시스템 (2:1:1 비율) */
.news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    border-bottom: var(--border-thick);
}

/* 기본 설정 (가운데 2번째 컬럼은 이 값이 적용됨) */
.news-col {
    padding: 3rem 2.4rem;
}

/* 첫 번째 컬럼: 왼쪽 여백 제거 */
.news-col:first-child {
    padding-left: 0;
}

/* 마지막(세 번째) 컬럼: 오른쪽 여백 제거 */
.news-col:last-child {
    padding-right: 0;
}

/* 패딩 약간 축소 */
.news-border-right {
    border-right: 0.1rem solid #e0e0e0;
}

/* 장식 요소 */
.news-tag {
    border: 0.1rem solid var(--red);
    /* red 변수 활용 */
    padding: 0.2rem 0.6rem;
    display: inline-block;
    text-transform: uppercase;
}

.hr-bold {
    border-bottom: var(--border-thick);
    width: 100%;
}

.hr-thin {
    border-bottom: var(--border-thin);
    width: 100%;
}

/* 다단 편집 */
.multi-cols {
    column-count: 2;
    column-gap: 3rem;
}

/* 뷰티/투데이 리스트 아이템 */
.list-item {
    display: flex;
    gap: 1.5rem;
    border-bottom: 0.1rem solid #eee;
}

.list-item:last-child {
    border-bottom: none;
}

/* 1. 썸네일 박스 (이제 a태그가 이 역할을 함) */
a.list-thumb {
    display: block; /* a태그는 인라인이므로 블록으로 변경 필수 */
    width: 12rem; /* 너비 고정 */
    flex-shrink: 0; /* 찌그러짐 방지 */
    position: relative; /* 자식(img)의 기준점 */
    overflow: hidden; /* 넘치는 이미지 자르기 */
    background-color: #f0f0f0;
}

/* 2. 실제 이미지 */
a.list-thumb img {
    position: absolute; /* 부모(a태그) 영역에 절대적으로 맞춤 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important; /* 강제로 꽉 채움 */
    object-fit: cover; /* 비율 유지하며 자르기 */
    transition: transform 0.3s; /* (선택) 마우스 올렸을 때 효과용 */
}

/* (선택) 마우스 올렸을 때 이미지 살짝 확대 효과 */
a.list-thumb:hover img {
    transform: scale(1.05);
}

/* 다크 피처 */
.dark-section {
    background-color: #111;
    color: #fff;
}

.btn-white {
    border: 0.1rem solid #fff;
    padding: 1.2rem 3rem;
    color: #fff;
    display: inline-block;
    transition: 0.3s;
}

.btn-white:hover {
    background: #fff;
    color: #000;
}

.dimmed {
    filter: grayscale(100%);
    opacity: 0.8;
}

/* BIFF 스타일 (Light Version) - 우선순위 수정됨 */

/* 1. 이미지 흑백 효과 (우선순위 높임: .unit 추가) */
.unit .grayscale-img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* 호환성 추가 */
    transition: filter 0.3s ease, transform 0.3s ease;
    display: block;
    width: 100%;
}

/* 마우스 올리면 컬러 복구 + 살짝 확대 */
.unit .biff-card:hover .grayscale-img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    transform: scale(1.03);
}

/* 2. 날짜 배지 */
.date-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #e50914;
    color: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 1.1rem;
    font-weight: 700;
    z-index: 10;
    line-height: 1;
}

/* 3. 유틸리티 */
.relative {
    position: relative;
}

.no-img {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 30px;
	 background-color: #f0f0f0;
}


/* 유튜브 반응형 래퍼 (16:9 비율 고정) */
.video-wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    background-color: #000; /* 영상 로딩 전 검은 배경 */
    border: 1px solid #333; /* 테두리 포인트 */
}

.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hover-red:hover {
    color: #e50914 !important;
    transition: color 0.2s ease;
}

.image-box.overflow-hidden {
    overflow: hidden;
}

/* 옵션 2: 클래식 푸터 전용 스타일 */
.footer-divider {
    border-top: 0.4rem solid var(--black);
    /* 두꺼운 윗선 */
    border-bottom: 0.1rem solid var(--black);
    /* 얇은 아랫선 */
    padding: 0.4rem 0 0.2rem;
    margin-bottom: 4rem;
    /* mt-40 대체 */
}

.footer-head-line {
    border-bottom: 0.2rem solid var(--black);
    display: inline-block;
    padding-bottom: 0.5rem;
}

/* 그리드 2칸 차지 (PC에서만 적용, 모바일은 자동 해제) */
.col-span-2 {
    grid-column: span 1;
}

@media (min-width: 768px) {
    .col-span-2 {
        grid-column: span 2;
    }
}

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

    .news-col:nth-child(3) {
        grid-column: span 2;
        border-top: 0.1rem solid #eee;
        border-right: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .list-item {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .top-bar-content {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

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

    .news-border-right {
        border-right: none;
        border-bottom: 0.1rem solid #eee;
    }

    .news-col {
        padding: 3rem 0;
    }

    .news-col:nth-child(3) {
        grid-column: span 1;
        display: block;
    }

    .list-item {
        border-bottom: 0.1rem solid #eee;
    }

    .multi-cols {
        column-count: 1;
    }

    .footer-info-col {
        grid-column: span 1;
    }
}