/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap'); */

/* Paperlogy Font */
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-1Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-2ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-3Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-4Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-5Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-6SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-7Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-8ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-9Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* 기본 리셋 및 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Paperlogy', sans-serif !important; /* 모든 요소에 Paperlogy 강제 적용 */
}

body {
    color: #2c3e50;
    background-color: #f8f9fa;
    line-height: 1.6;
    font-weight: 400;
}

/* 헤더 스타일 - 어두운 배경 */
header {
    background: linear-gradient(to bottom, #2d0505, #410908); /* 세로 그라데이션 적용 */
    color: white; /* 기본 글자색 흰색 */
    padding: 0.5rem 1rem; /* 위아래 패딩 줄임 */
    position: sticky; /* 스크롤 시 고정 */
    top: 0; /* 상단에 고정 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 그림자 약간 조정 */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 1rem auto 0 auto; /* 상단 마진만 유지하고 sticky와 겹치지 않게 변경 */
    border-radius: 8px; /* 약간 각진 모서리 */
    border: none; /* 테두리 제거 */
}

/* Sticky 헤더로 인한 body 상단 패딩 (선택 사항) */
/*
body {
    padding-top: 50px; /* 줄어든 헤더 높이에 맞춰 조정 필요 (예시 값) */
/*}
*/

/* 가수 상세 페이지 헤더 너비 조정 */
.singer-page-body header {
    max-width: 800px;
}

.header-logo {
    height: 40px; /* 로고 크기 증가 */
    margin-right: 15px; /* 간격 증가 */
    filter: brightness(0) invert(1); /* 로고 흰색으로 필터 적용 */
    flex-shrink: 0;
}

header h1 {
    font-weight: 700; /* Bold로 변경 */
    font-size: 2.4rem; /* 크기 증가 */
    letter-spacing: 1px; /* 간격 약간 넓힘 */
    margin: 0;
    color: white; /* 제목 글자색 흰색 */
}

/* 헤더 제목 글자별 색상 활성화 및 변경 */
header h1 span {
    display: inline-block; /* 개별 스타일 적용 및 효과 위해 */
    transition: transform 0.2s ease; /* 호버 효과 추가 */
    /* -webkit-text-stroke: 0.5px black; 외곽선 제거 */
    /* text-stroke: 0.5px black; 외곽선 제거 */
    /* paint-order: stroke fill; 외곽선 제거 */
}
header h1 span:hover {
    transform: scale(1.15) translateY(-3px); /* 호버 효과 강화 */
}

header h1 .char-1 { color: #E74C3C; } /* 빨강 계열 */
header h1 .char-2 { color: #3498DB; } /* 파랑 계열 */
header h1 .char-3 { color: #F1C40F; } /* 노랑 계열 */
header h1 .char-4 { color: #2ECC71; } /* 초록 계열 */
header h1 .char-5 { color: #9B59B6; } /* 보라 계열 */
header h1 .char-6 { color: #E67E22; } /* 주황 계열 */
header h1 .char-7 { color: #1ABC9C; } /* 청록 계열 */

/* 헤더 링크 기본 스타일 제거 */
.header-link {
    text-decoration: none;
    display: flex; /* 로고/제목 정렬 위해 */
    align-items: center;
}

.header-logo-link {
    /* 기존 로고 위치 유지를 위해 추가 스타일 불필요 */
}

.header-title-link {
    /* 기존 제목 스타일 유지를 위해 추가 스타일 불필요 */
}

/* 상세 페이지 뒤로가기 버튼 (어두운 배경에 맞게 수정) */
header a.back-button { /* 클래스 추가 가정 또는 더 구체적인 선택자 필요 */
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: white; /* 흰색 글자 */
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500; /* 약간 굵게 */
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15); /* 약간 투명한 흰색 배경 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 약간 밝은 테두리 */
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: none; /* 그림자 제거 */
}

header a.back-button:hover { /* 클래스 추가 가정 */
    background-color: rgba(255, 255, 255, 0.25); /* 호버 시 배경 약간 더 밝게 */
    border-color: rgba(255, 255, 255, 0.5);
    color: white; /* 호버 시 글자색 유지 */
    transform: translateY(-50%) scale(1.05);
    box-shadow: none;
}

header a.back-button:before { /* 클래스 추가 가정 */
    content: "←";
    margin-right: 6px; /* 아이콘 간격 약간 조정 */
    font-size: 1rem;
}

/* 히어로 섹션 - 배경 이미지 및 오버레이 */
.hero {
    background: #E0E1DD; /* 이미지 로드 실패 시 기본 배경색 */
    background-image: url('images/banner.webp'); /* 배경 이미지 .webp로 변경 */
    background-size: cover; /* 이미지 크기 조정 */
    background-position: center; /* 이미지 중앙 정렬 */
    background-repeat: no-repeat;
    color: #ffffff; /* 텍스트 색상 흰색으로 변경 */
    padding: 6rem 1.5rem; /* 패딩 조정 (이미지 보이도록) */
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: 0.5rem auto 0.5rem auto; /* 하단 마진 더 줄임 */
    border-radius: 8px;
    z-index: 1; /* 내용을 오버레이 위로 올리기 위해 추가 */
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 오버레이 */
    z-index: 1; /* 이미지와 내용 사이 */
}

.hero > * {
    position: relative;
    z-index: 2; /* 내용을 오버레이 위로 */
}

.hero h2 {
    font-size: 2.5rem; /* 크기 조정 */
    font-weight: 700; /* Bold */
    margin-bottom: 2.5rem; /* 간격 조정 */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 텍스트 그림자 추가 */
}

.search-container {
    max-width: 550px; /* 너비 조정 */
    margin: 0 auto;
    position: relative;
    display: flex; /* Flexbox 사용 */
    align-items: stretch; /* 높이를 같게 */
}

.hero input[type="text"] {
    flex-grow: 1; /* 남은 공간 모두 차지 */
    padding: 0.9rem 1.5rem;
    border: 1px solid #ced4da;
    border-right: none; /* 오른쪽 테두리 제거 */
    border-radius: 0; /* 각지게 */
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    outline: none;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    min-height: 44px; /* 버튼과 높이 맞추기 위한 최소 높이 */
}

.hero input[type="text"]:focus {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    border-color: #8a9aaa;
    background-color: white;
    z-index: 1; /* 포커스 시 버튼 위로 올라오도록 */
    position: relative; /* z-index 적용 위해 */
}

.hero button {
    /* position: absolute; 제거 */
    /* top: 50%; 제거 */
    /* right: 6px; 제거 */
    /* transform: translateY(-50%); 제거 */
    background: #410908; /* 요청된 배경색 */
    color: white; /* 흰색 글자색 */
    border: 1px solid white; /* 흰색 테두리 */
    border-left: none; /* 왼쪽 테두리 제거 유지 */
    border-radius: 0; /* 각지게 */
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 900; /* Black (더 두껍게) */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
    flex-shrink: 0;
    outline: none;
}

.hero button:hover {
    background: #5a2928; /* 호버 시 약간 밝은 색 */
    color: white; /* 호버 시 흰색 글자색 유지 */
    border-color: white; /* 호버 시 흰색 테두리 유지 */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    z-index: 1;
    position: relative;
}

.hero button:active {
    background: #734948; /* 클릭 시 더 밝은 색 */
    color: white; /* 클릭 시 흰색 글자색 유지 */
    border-color: white; /* 클릭 시 흰색 테두리 유지 */
    transform: scale(0.98); /* 클릭 효과 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 카드 섹션 */
.card-section {
    padding: 0.5rem 0 4rem 0; /* 상단 패딩 더 줄임 */
    background-color: #f8f9fa;
    max-width: 1200px; /* 최대 너비 설정 */
    margin: 0 auto; /* 중앙 정렬 */
}

.card-section h2 {
    text-align: center;
    font-size: 1.8rem; /* 크기 조정 */
    font-weight: 600; /* SemiBold */
    color: #1B263B; /* 네이비 */
    margin-bottom: 2.5rem; /* 간격 조정 */
    position: relative;
    padding: 0 1.5rem; /* 제목 좌우 여백 추가 (히어로 섹션과 동일하게) */
}

.card-section h2:after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: #BFA181; /* 골드/브론즈 액센트 */
    margin: 0.8rem auto 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.8rem;
    margin-top: 2rem;
    padding: 0 1.5rem; /* 내부 좌우 패딩 조정 (히어로 섹션과 동일하게) */
}

.card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    overflow: visible; /* Allow hover scale */
    text-align: left;
    display: flex;
    flex-direction: row; /* 가로 배치 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: flex-start; /* 왼쪽 정렬 */
    height: auto; /* 높이 자동 조정 */
    border: 1px solid #5a2928; /* 요청된 테두리 색상 */
}

.card:hover {
    transform: translateY(-5px) scale(1.02); /* 스케일 약간 줄임 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 5; /* 호버 시 다른 카드 위로 올라오도록 */
    background: linear-gradient(to bottom, #5a2928, #734948); /* 호버 시 그라데이션 배경 적용 */
}

.card-title {
    font-size: 1.1rem; /* 크기 조정 */
    font-weight: 600;
    margin-bottom: 0; /* 하단 마진 제거 */
    margin-left: 1rem; /* 이미지와의 간격 */
    color: #1B263B;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.card:hover .card-title {
    transform: none; /* 호버 시 이름 크기 변경 제거 */
    color: white; /* 호버 시 글씨색 흰색으로 변경 */
}

/* 카드 이미지 스타일 */
.card-image {
    width: 50px; /* 크기 축소 */
    height: 50px; /* 크기 축소 */
    border-radius: 50%;
    background: linear-gradient(135deg, #415A77, #1B263B);
    margin: 0; /* 마진 제거 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(27, 38, 59, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* 크기 줄어들지 않도록 */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.card-image span {
    color: white;
    font-size: 1.5rem; /* 이미지 크기에 맞게 조정 */
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card:hover .card-image {
    transform: scale(1.1); /* 호버 시 이미지 크기 변경 유지 */
    box-shadow: 0 5px 12px rgba(27, 38, 59, 0.25);
}

.card:hover .card-image img {
    transform: scale(1.1);
}

.card:hover .card-image::after {
    opacity: 1;
}

.card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* 가수 상세 페이지 */
.song-list {
    padding: 0 2rem 4rem 2rem; /* 상단 패딩 제거, 광고 마진으로 간격 조절 */
    background-color: #f8f9fa;
}

.song-container {
    max-width: 800px;
    margin: 0 auto; /* 상단 마진 제거 (광고 마진으로 처리) */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #E0E1DD;
}

.song-list ul {
    list-style-type: none;
    counter-reset: song-counter;
}

.song-list li {
    border-bottom: 1px solid #f1f1f1;
    position: relative;
}

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

.song-list li a {
    display: block;
    padding: 1rem 1.5rem 1rem 3.5rem; /* 패딩 조정 */
    text-decoration: none;
    color: #2c3e50;
    font-size: 1.2rem; /* 크기 조정 */
    transition: all 0.3s ease;
    position: relative;
    font-weight: 700; /* Bold */
}

.song-list li a:before {
    counter-increment: song-counter;
    content: counter(song-counter);
    position: absolute;
    left: 1.2rem;
    width: 24px;
    height: 24px;
    background-color: #e0e1dd;
    color: #415A77;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600; /* SemiBold */
    transition: all 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
}

.song-list li a:hover {
    background-color: #e0e1dd;
    color: #1B263B;
    font-weight: 700; /* Hover: Bold 유지 */
}

.song-list li a:hover:before {
    background-color: #415A77;
    color: white;
    transform: translateY(-50%) scale(1.1); /* 세로 정렬 유지하며 크기 변경 */
    left: 1.2rem; /* 호버 시 위치 고정 (패딩 변경 없으므로) */
}

/* 반응형 레이아웃 */
/* (기존 반응형 규칙들은 유지하면서, 필요 시 내부 값들 조정) */

@media (max-width: 1250px) {
    header a {
        /* 스타일 유지 */
    }
}

@media (max-width: 1200px) {
    header, .hero {
        margin-left: 1rem;
        margin-right: 1rem;
        max-width: calc(100% - 2rem);
    }
    /* 카드 섹션 반응형 너비 및 마진 추가 */
    .card-section {
        margin-left: 1rem;
        margin-right: 1rem;
        max-width: calc(100% - 2rem);
    }
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1.5rem;
        padding: 0 1rem; /* 반응형에서는 그리드 패딩 약간 줄임 */
    }
    .card-section h2 {
        padding: 0 1rem; /* 반응형 제목 패딩 */
    }
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1.2rem;
        padding: 0 0.5rem; /* 반응형 그리드 패딩 추가 조정 */
    }
    .card-section h2 {
        padding: 0 0.5rem; /* 반응형 제목 패딩 */
    }
    .hero h2 {
        font-size: 1.8rem;
    }
    .card {
        padding: 1.2rem 0.8rem;
    }
    .card-title {
        font-size: 1.2rem; /* 모바일 크기 조정 */
    }
}

@media (max-width: 700px) {
    .search-container {
        /* 스타일 유지 */
    }
    .hero input[type="text"] {
        padding: 0.8rem 3.5rem 0.8rem 1.2rem; /* 패딩은 유지하거나 약간 조정 */
        font-size: 16px; /* 폰트 크기를 16px로 수정 */
    }
    .hero button {
        padding: 0 1rem; /* 폰트 크기 변경에 따른 버튼 패딩 조정 */
        font-size: 14px; /* 버튼 폰트 크기 조정 (16px 보다 작아도 됨) */
        /* right: 5px; 버튼 위치 조정 제거 (flex 레이아웃으로 변경됨) */
    }
    .song-list {
        padding: 1rem 1.5rem 3rem 1.5rem;
    }
    .song-list li a {
        font-size: 1.1rem; /* 모바일 크기 조정 */
        padding: 0.9rem 1rem 0.9rem 3rem;
    }
    .song-list li a:before {
        left: 1rem;
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
    }
    .song-list li a:hover {
        /* padding-left: 3.5rem; 기본 상태 패딩 유지 */
    }
    .song-list li a:hover:before {
        left: 1rem; /* 호버 시 위치 고정 */
    }
    .header-logo {
        height: 32px; /* 모바일 로고 크기 증가 */
        margin-right: 12px; /* 모바일 간격 증가 */
    }
    header h1 {
        font-size: 1.8rem; /* 모바일 제목 크기 증가 */
    }
    header a {
        left: 0.8rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 500px) {
    .card-grid {
        padding: 0 0.2rem; /* 모바일 그리드 패딩 */
    }
    .card-section h2 {
        padding: 0 0.2rem; /* 모바일 제목 패딩 */
    }
    .card-grid {
        grid-template-columns: 1fr; /* 모바일에서는 한 줄에 하나씩 */
        gap: 0.8rem;
    }
    header h1 {
        font-size: 1.5rem; /* 작은 모바일 제목 크기 증가 */
    }
    .header-logo {
        height: 28px; /* 작은 모바일 로고 크기 증가 */
        margin-right: 10px; /* 작은 모바일 간격 증가 */
    }
    header a {
        left: 0.6rem;
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
    }
    .hero {
        padding: 2.5rem 1rem;
    }
    .hero h2 {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }
    .hero h2 .mobile-break {
        display: block; /* 모바일에서 줄바꿈 */
        margin-top: 0.5rem; /* 줄바꿈 간격 추가 */
    }
    /* 검색창 너비 조정 및 중앙 정렬 추가 */
    .search-container {
        width: 85%; /* 너비 줄임 */
        margin: 0 auto; /* 중앙 정렬 */
        flex-direction: column; /* 버튼을 아래로 배치 */
        gap: 8px; /* 검색창과 버튼 사이 간격 */
    }
    .hero input[type="text"] {
        padding: 0.8rem 1rem;
        font-size: 16px;
        border-right: 1px solid #ced4da; /* 오른쪽 테두리 추가 */
        width: 100%; /* 전체 너비 사용 */
        border-radius: 4px; /* 모서리 둥글게 */
    }
    .hero button {
        padding: 0.8rem 1rem;
        font-size: 14px;
        width: 100%; /* 전체 너비 사용 */
        border-left: 1px solid white; /* 왼쪽 테두리 추가 */
        border-radius: 4px; /* 모서리 둥글게 */
    }
    .card-section, .song-list {
        padding: 0.5rem 1rem 3rem 1rem; /* 상단 패딩 더 줄임 */
    }
    .card-section h2, .song-list h2 {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }
    .card {
        padding: 0.8rem 1rem;
    }
    .card-image {
        width: 40px;
        height: 40px;
        margin-right: 0.8rem; /* 이미지와 제목 사이 간격 추가 */
    }
    .card-image span {
        font-size: 1.2rem;
    }
    .card-title {
        font-size: 1rem;
        margin-left: 0; /* 기존 마진 제거 */
        flex-grow: 1; /* 남은 공간 차지 */
        text-align: center; /* 텍스트 가운데 정렬 */
    }
    .song-list li a {
        font-size: 1.0rem; /* 작은 모바일 크기 조정 */
        padding: 0.9rem 0.8rem 0.9rem 2.6rem;
        display: flex;
        align-items: center;
        min-height: 40px;
    }
    .song-list li a:before {
        left: 0.8rem;
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .song-list li a:hover {
        /* padding-left: 3.0rem; 기본 상태 패딩 유지 */
        background-color: #e9e9e9; /* 모바일에서는 미묘한 배경색 변경으로 피드백 */
    }
    .song-list li a:hover:before {
        left: 0.8rem; /* 호버 시 위치 고정 */
        /* transform: translateY(-50%) scale(1.1); 기본 hover 스타일 상속 */
    }
}

/* 색상 변형 클래스 */
.color-blue .card-image,
.color-blue.card-image {
    background: linear-gradient(135deg, #415A77, #1B263B);
}

.color-purple .card-image,
.color-purple.card-image {
    background: linear-gradient(135deg, #8E44AD, #5B2C6F);
}

.color-teal .card-image,
.color-teal.card-image {
    background: linear-gradient(135deg, #16A085, #0E6655);
}

.color-pink .card-image,
.color-pink.card-image {
    background: linear-gradient(135deg, #E84393, #B83280);
}

.color-orange .card-image,
.color-orange.card-image {
    background: linear-gradient(135deg, #E67E22, #BA4A00);
}

/* 애드센스 광고 컨테이너 스타일 */
.ad-container-top {
    margin: 1.5rem auto; /* 상하 마진 추가 및 좌우 자동 마진으로 중앙 정렬 */
    max-width: 800px; /* 헤더와 유사한 최대 너비 (선택 사항) */
    text-align: center; /* 내부 요소 가운데 정렬 (필요 시) */
}

/* 인피드 광고 컨테이너 기본 스타일 (모바일) */
.ad-container-infeed {
    width: 100%; /* 그리드 너비에 맞춤 */
    margin: 1rem 0; /* 위아래 여백 */
    /* 필요한 경우 추가 스타일 */
}

/* 데스크탑 화면 (예: 701px 이상)에서는 광고 숨김 */
@media (min-width: 701px) {
    .ad-container-infeed {
        display: none;
    }
}

/* 인피드 광고 스크립트 태그 자체를 숨기지는 않음 */
.ad-container-infeed ins.adsbygoogle {
    display: block; /* 인피드 광고는 block 요소여야 함 */
}