/* main.css - 메인페이지 전용 스타일 */
:root {
  --primary-color: #2196F3;
  --secondary-color: #1976D2;
  --background-color: #f5f5f5;
  --card-background: #ffffff;
  --text-color: #333333;
  --border-radius: 12px;
  --spacing: 1rem;
  --shadow: 0 4px 6px rgba(0,0,0,0.1);
  --transition: all 0.3s ease;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  font-family: 'Pretendard', sans-serif;
}

/* =====================================================
   1. 헤더 전용 스타일 (수정된 부분)
   ===================================================== */
   .main-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;                         /* 고정 height 대신 padding으로 충분한 여백 확보 */
    background-color: var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* height: 80px;  기존 고정 높이 삭제 */
  }
  
  /* 헤더 내부 컨텐츠 래퍼: 로고, 추천 링크, 로그인 버튼을 좌우로 배치 */
  .main-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
  }
  
  /* 왼쪽 그룹: 로고와 추천 링크 묶음 */
  .left-group {
    display: flex;
    align-items: center;
    gap: 2rem; /* 로고와 추천 링크 그룹 사이 간격 */
  }
  
  /* 네비게이션 로고(a.nav-logo) */
  .nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  
  /* 홈 아이콘 이미지 크기 조정 */
  .home-icon {
    object-fit: contain;
  }
  
  /* =================
     추천 링크 그룹 (변경 없음)
     ================= */
  .recommend-links {
    display: flex;
    gap: 1rem; /* 링크들 사이 간격 */
  }
  
  .recommend-link {
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: var(--transition);
  }
  .recommend-link:hover {
    text-decoration: underline;
  }
  .recommend-link .tooltip {
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 4px 8px;
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: opacity 0.3s;
    pointer-events: none;
    font-size: 0.85rem;
    z-index: 1000;
  }
  .recommend-link:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
  
  /* ==========================
     우측 네비게이션 메뉴(.site-nav)
     ========================== */
  .site-nav {
    display: flex;
    align-items: center;
    gap: 1rem; /* 로그인/회원가입 링크 사이 간격 */
  }
  
  .site-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
  }
  
  .site-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }
  
  /* 로그인 링크 아이콘 크기 및 간격 */
  .login-link i {
    font-size: 1.1rem;       /* 아이콘 크기 */
    margin-right: 6px;       /* 아이콘과 텍스트 사이 간격 */
    vertical-align: middle;  /* 텍스트와 수직 정렬 */
    color: #ffffff;          /* 아이콘 색상 */
  }
  
  /* 로그인/회원가입 링크 텍스트 스타일 */
  .login-link {
    display: inline-flex;    /* 아이콘＋텍스트를 한 줄에 나란히 */
    align-items: center;     /* 수직 중앙 정렬 */
    color: #ffffff;          /* 흰색 텍스트 */
    text-decoration: none;
    font-size: 1rem;
    padding: 6px 10px;       /* 클릭 영역 확보 */
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }
  
  .login-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }


/* =====================================================
   2. 메인 컨테이너 및 기본 레이아웃
   ===================================================== */
.main-container {
  max-width: 1280px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.menu-item {
  position: relative;
  background-color: var(--primary-color);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: var(--transition);
}
.menu-item:hover {
  filter: brightness(90%);
}

/* 메뉴 툴팁 */
.menu-item .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: -32px; /* 메뉴 박스 바로 아래 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1000;
}
.menu-item:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* ── quick-search 래퍼: 가운데 정렬 & flex 배치 ── */
.quick-search {
  position: relative;
  display: flex;
  align-items: stretch;
  max-width: 400px;       /* 최대 넓이 */
  margin: 0 auto;         /* 가운데 정렬 */
  font-family: 'Noto Sans KR', sans-serif;
}

/* 빠른 정령 검색 헤더 */
.quick-search-section h2 {
  display: flex;
  align-items: center;
  justify-content: center; /* 이 줄 추가 */
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

/* 아이콘과 텍스트 간격 */
.quick-search-section h2::before {
  display: inline-block;
  margin-right: 8px;
  font-size: 1.5rem;
  color:#333;
}

/* ── 입력창 스타일 ── */
.quick-search input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ccc;
  margin-right: 0.5rem;
  border-radius: 6px 0 0 6px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.quick-search input:focus {
  border-color: white;
}

/* ── 검색 버튼 스타일 ── */
.quick-search button {
  flex: 0 0 auto;           /* 크기 고정 */
  padding: 0 20px;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 1rem;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.quick-search button:hover {
  background-color: #1864ab;
  border-color: #1864ab;
}

/* ── quick-search 버튼 간격 조정 ── */
.quick-search button + button {
  margin-left: 0.45rem; /* 첫 번째 버튼 다음 버튼에만 좌측 여백 추가 */
}

/* 모바일(≤768px)에서 버튼 위쪽 여백 추가 */
@media screen and (max-width: 768px) {
  .quick-search button + button {
    margin-left: 5px;
  }
}

/* 초소형 모바일(≤576px)에서 버튼 위쪽 여백 추가 */
@media screen and (max-width: 576px) {
  .quick-search button + button {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* ── 자동완성 드롭다운 컨테이너 ── */
.keyword-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;              /* input+button 래퍼 폭 기준 */
  max-height: 240px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  z-index: 1000;
}
/* 기본 상태에서 숨기기 */
.keyword-suggestions {
  display: none;    /* 반드시 여기서 숨김 */
}
/* 보여줄 때만 block */
.keyword-suggestions.show {
  display: block;
}

/* ── 개별 키워드 항목 ── */
.keyword-suggestions .keyword-item {
  padding: 8px 16px;
  font-size: 0.95rem;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
/* ── 호버 & 키보드 선택 강조 ── */
.keyword-suggestions .keyword-item:hover,
.keyword-suggestions .keyword-item.highlighted {
  background-color: #e7f5ff;
  color: #1c7ed6;
  font-weight: 500;
}

/* =====================================================
   실시간·주간 랭킹 공통 스타일 (덮어쓰기)
   ===================================================== */
   .live-ranking-section,
   .ranking-section {
     max-width: 100%;
   }
   
   /* 그리드: 최소 120px 칸, 자동으로 채우기 */
   .live-ranking-section #liveRankingList,
   .ranking-section        #rankingList {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 0.8rem;
     padding: 0;
     margin: 1rem auto;
     list-style: none;
   }
   
   /* 카드(li) 스타일 */
   .live-ranking-section #liveRankingList li,
   .ranking-section        #rankingList li {
     background-color: #fff;
     border-radius: 12px;
     padding: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 0.9rem;
     line-height: 1.2;
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     border: 1px solid #eee;
     white-space: normal;
     word-break: keep-all;
   }
   
   /* 1) 순위 */
   .live-ranking-section #liveRankingList li > div:nth-child(1),
   .ranking-section        #rankingList li > div:nth-child(1) {
     color: var(--primary-color);
     font-weight: bold;
     margin-bottom: 0.25rem;
   }
   
   /* 2) 이미지 */
   .live-ranking-section #liveRankingList li > img,
   .ranking-section        #rankingList li > img {
     width: 48px;
     height: 48px;
     object-fit: contain;
     margin-bottom: 0.3rem;
     border-radius: 4px;
   }
   
   /* 3) 이름 */
   .live-ranking-section #liveRankingList li > div:nth-child(3),
   .ranking-section        #rankingList li > div:nth-child(3) {
     font-size: 0.85rem;
     color: #333;
     text-align: center;
     margin-bottom: 0.25rem;
   }
   
   /* 4) 횟수 */
   .live-ranking-section #liveRankingList li > div:nth-child(4),
   .ranking-section        #rankingList li > div:nth-child(4) {
     font-size: 0.8rem;
     color: #666;
   }
   
   /* ────────────────────────────────────────────
      반응형: 모바일(≤576px)에서 칸 최소 80px, 패딩·폰트 축소
   ──────────────────────────────────────────── */
   @media (max-width: 576px) {
     .live-ranking-section #liveRankingList,
     .ranking-section        #rankingList {
       grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
       gap: 0.4rem;
     }
     .live-ranking-section #liveRankingList li,
     .ranking-section        #rankingList li {
       padding: 0.4rem;
       font-size: 0.8rem;
     }
     .live-ranking-section #liveRankingList li > img,
     .ranking-section        #rankingList li > img {
       width: 36px;
       height: 36px;
       margin-bottom: 0.2rem;
     }
   }
   

/* ────────────────────────────────────────────
   랭킹 섹션 전체 너비 & 카드 자동 높이 조정
──────────────────────────────────────────── */
.ranking-section,
.live-ranking-section {
  max-width: 100%;   /* 컨테이너를 화면 가득 채우도록 */
}

/* ────────────────────────────────────────────
   그리드: 최소 120px 셀, 자동 채우기
──────────────────────────────────────────── */
#rankingList,
#liveRankingList {
  /* 기존 repeat(auto-fill, minmax(…)) 대신 아래로 덮어쓰기 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.8rem;
}

/* ────────────────────────────────────────────
   카드 높이 auto & 내부 여백 최소화
──────────────────────────────────────────── */
#rankingList li,
#liveRankingList li {
  height: auto !important;
  padding: 0.6rem;
}

/* ────────────────────────────────────────────
   모바일(≤576px): 최소 90px 셀로 축소
──────────────────────────────────────────── */
@media (max-width: 576px) {
  #rankingList,
  #liveRankingList {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.4rem;
  }
  #rankingList li,
  #liveRankingList li {
    padding: 0.4rem;
  }
}



/* =====================================================
   4. (수정) 패치 노트 섹션 - 카드 형태로 묶어서 출력
   ===================================================== */

/* =====================================================
   기존에 올려주신 CSS 블록 (절대 삭제 금지)
   ===================================================== */
   .patch-section {
    margin-top: 2rem;
    padding: 1.5rem;
    text-align: center;
  }
  
  /* "최근 패치 요약" 섹션 제목 */
  .patch-section h2 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
  }
  
  /* 패치 카드 목록(ul) */
  #patchList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
  }
  
  /* 각 패치 카드(li) */
  .patch-card {
    background-color: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 1rem 1.2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .patch-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }
  
  /* 카드 상단: 날짜·제목 묶음 */
  .patch-card .patch-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  
  /* 날짜 */
  .patch-card .patch-date {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--secondary-color);
  }
  
  /* 제목 */
  .patch-card .patch-title {
    font-size: 1rem;
    font-weight: 600;
    color: #222222;
  }
  
  /* 상세 내역(ul) */
  .patch-card .patch-details {
    margin: 0;
    padding-left: 1.2rem; /* 리스트 들여쓰기: 기본 ● 불릿 */
    list-style: disc;     /* 기본 ● 불릿 모양 */
    font-size: 0.92rem;
    color: #444444;
  }
  
  /* 상세 내역 개별 항목 */
  .patch-card .patch-details li {
    margin-bottom: 0.4rem;
    line-height: 1.4;
  }
  
  /* 아래 세 줄은 기존 코드에도 이미 존재하는 부분 */
  .patch-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .patch-details {
    margin-left: 1rem;
  }
  
  .patch-details li {
    margin-bottom: 0.25rem;
    line-height: 1.4;
  }
  
  /* 오류 메시지(li.patch-error) */
  .patch-error {
    color: #e74c3c;
    font-size: 0.95rem;
    text-align: center;
    padding: 1rem;
  }

/* =====================================================
   6. 반응형 스타일 (모바일 · 태블릿 · 데스크탑)
   ===================================================== */

/* ─────────────────────────────────────────────────────
   반응형: 모바일 (≤576px)
───────────────────────────────────────────────────── */
@media screen and (max-width: 576px) {
  /* 본문 여백 줄이기 */
  .main-container {
    padding: 0 1rem;
  }

  /* 메뉴 1열 */
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-item {
    padding: 1rem;
    font-size: 0.95rem;
  }
  .menu-item i {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
  }

  /* 빠른 검색: full width + 버튼 아래 배치 */
  .quick-search {
    flex-direction: column;
    max-width: 100%;
  }
  .quick-search input,
  .quick-search button {
    width: 100%;
    border-radius: 6px;
  }
  .quick-search button {
    margin-top: 0.5rem;
    border-radius: 6px;
    height: 35px;
  }

  /* 랭킹 섹션 타이틀 축소 */
  .ranking-section h2,
  .live-ranking-section h2 {
    font-size: 1.1rem;
  }

  /* 그리드: 최소 70px짜리 칸 */
  #rankingList,
  #liveRankingList {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.4rem;
  }
  #rankingList li,
  #liveRankingList li {
    height: 70px;
    padding: 0.4rem;
    font-size: 0.8rem;
  }

  /* 패치 노트 리스트 한 열로 */
  #patchList {
    flex-direction: column;
  }

  /* APK 다운로드 버튼 반응형 */
  .apk-download-btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* 헤더: 모바일일 때 요소 세로 배치 */
  .main-header .header-content {
    flex-direction: column;
    justify-content: center;
    height: auto;                  /* 고정 height 삭제, 콘텐츠 높이에 맞춰 자동 확장 */
    padding: 1rem;
    gap: 0.75rem;
  }
  .left-group {
    flex-direction: column;
    gap: 1rem;
  }

  /* 사이트 네비게이션을 가운데 정렬하고 링크 간격 감소 */
  .site-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;        /* 모바일에서 링크 간격을 조금 줄임 */
  }
  .site-nav a {
    font-size: 0.9rem;  /* 글자 크기 소폭 축소 */
    padding: 4px 8px;   /* 패딩 조정 */
  }
  .home-icon{
    width: 100px;
    height: 100px;
  }
}

/* ─────────────────────────────────────────────────────
   반응형: 태블릿 (577px ~ 992px)
───────────────────────────────────────────────────── */
@media screen and (min-width: 577px) and (max-width: 992px) {
  .main-container {
    padding: 0 1.5rem;
  }

  /* 메뉴 2열 유지하되 간격 적당히 */
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* 랭킹: 최소 100px 칸, 중간 크기 */
  #rankingList,
  #liveRankingList {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.6rem;
  }
  #rankingList li,
  #liveRankingList li {
    height: 80px;
    padding: 0.6rem;
    font-size: 0.9rem;
  }

  /* 패치 노트 리스트 두 열으로 */
  #patchList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* APK 다운로드 버튼 크기 조정 */
  .apk-download-btn {
    font-size: 0.95rem;
    padding: 0.7rem 1.4rem;
  }
}

/* ─────────────────────────────────────────────────────
   반응형: 데스크탑 (>992px)
───────────────────────────────────────────────────── */
@media screen and (min-width: 993px) {
  .main-container {
    padding: 0 2rem;
  }

  /* 메뉴 4열(또는 3열) 설정 가능 */
  .menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
  }

  /* 랭킹: 넉넉한 140px 칸 */
  #rankingList,
  #liveRankingList {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
  }
  #rankingList li,
  #liveRankingList li {
    height: 100px;
    padding: 0.8rem;
    font-size: 1rem;
  }

  /* 패치 노트 리스트 세 열로 */
  #patchList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* APK 다운로드 버튼 크기 조정 */
  .apk-download-btn {
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
  }
}

/* =====================================================
   7. 공지 섹션
   ===================================================== */
.notice-section {
  margin: 1rem auto;
  background: var(--card-background);
  padding: 0.8rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  width: 90%;
  max-width: 900px;
}

.notice-section h2 {
  font-size: 1.3rem;
  margin-bottom: 6px !important;
  color : #555;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.update-date {
  font-weight: bold;
  font-size: 0.85rem;
  color: var(--primary-color);
  margin: 0.6rem 0 0.3rem;
}

.divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 0.3rem 0;
}

.notice-item {
  background: #fefefe;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  padding: 0.3rem 0.6rem;
  transition: var(--transition);
}
.notice-item:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.notice-link {
  text-decoration: none;
  color: var(--text-color);
  font-size: 0.85rem;
  line-height: 1.2;
}
.notice-link:hover {
  color: var(--primary-color);
}

.update-date .new-badge,
.update-date .recent-badge {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--secondary-color);
  color: white;
}

/* 반응형: 모바일 (≤576px) */
@media screen and (max-width: 576px) {
  .notice-section {
    width: 100%;
    padding: 0.5rem;
  }
  .notice-section h2 {
    font-size: 1.2rem;
  }
  .update-date {
    font-size: 0.8rem;
    margin: 0.4rem 0 0.2rem;
  }
  .divider {
    margin: 0.2rem 0;
  }
  .notice-item {
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.3rem;
  }
  .notice-link {
    font-size: 0.8rem;
  }
}

/* 반응형: 태블릿 (577px ~ 992px) */
@media screen and (min-width: 577px) and (max-width: 992px) {
  .notice-section {
    width: 95%;
    padding: 0.7rem;
  }
  .notice-section h2 {
    font-size: 1.3rem;
  }
  .update-date {
    font-size: 0.85rem;
  }
  .notice-item {
    padding: 0.25rem 0.5rem;
  }
  .notice-link {
    font-size: 0.85rem;
  }
}

/* 반응형: 데스크탑 (>992px) */
@media screen and (min-width: 993px) {
  .notice-section {
    width: 90%;
    max-width: 900px;
    padding: 0.8rem;
  }
  .notice-section h2 {
    font-size: 1.3rem;
  }
  .update-date {
    font-size: 0.85rem;
  }
  .notice-item {
    padding: 0.3rem 0.6rem;
  }
  .notice-link {
    font-size: 0.85rem;
  }
}

/* =====================================================
   8. YouTube 최신 영상 섹션
   ===================================================== */
.youtube-section {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0.8rem;
  background: var(--card-background);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.youtube-section h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  color: #333;
}

.youtube-section h2 i {
  margin-right: 0.5rem;
  color: #f00;
}

.youtube-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.youtube-list .video-item {
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.youtube-list .video-item:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.youtube-list .video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: #fafafa;
  cursor: pointer;
}

.youtube-list .video-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}

.youtube-list .video-frame iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

.youtube-list .video-header h3 {
  font-size: 1rem;
  margin: 0;
  line-height: 1.2;
}

.youtube-list .video-date {
  font-size: 0.8rem;
  color: #666;
}

.youtube-list .video-content {
  max-height: 0;
  padding: 0 1rem;
  background: #fff;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.youtube-list .video-content.open {
  padding: 0.5rem 1rem;
  max-height: 300px; /* iframe 높이에 맞춰 충분히 크게 */
}

/* =====================================================
   9. 공지와 영상 섹션을 함께 배치 (.notice-and-video)
   ===================================================== */
.notice-and-video {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch; /* 자식 높이를 가장 큰 영역에 맞춰 늘려줌 */
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem 0;
}

/* 기존 height:100% 삭제, flex:1 추가 */
.notice-and-video .notice-section,
.notice-and-video .youtube-section {
  flex: 1 1 400px;        /* 남은 공간을 동일 비율로 채움 */
  max-width: 600px;
  display: flex;
  flex-direction: column; /* 세로 방향으로 배치 */
}

/* 리스트 영역이 남은 높이를 채우고 스크롤되도록 */
.notice-and-video .notice-section .notice-list,
.notice-and-video .youtube-section .youtube-list {
  flex: 1;                /* 부모 높이를 채움 */
  overflow-y: auto;       /* 내용이 넘칠 때 스크롤 */
}

/* 유튜브 리스트 아이템 간격 균등 분배 */
.notice-and-video .youtube-section .youtube-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 항목 간 간격 균등 분배 */
}

/* =====================================================
   10. 방문자 배지 스타일
   ===================================================== */
.visitor-badge-container {
  text-align: center;
  margin: 0.5rem 0 1rem;   /* 위아래 간격 조정 */
}

.visitor-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;             /* 아이콘 ↔ 텍스트 간격 */
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.25rem 0.75rem;/* 세로·가로 여백 */
  border-radius: 999px;    /* 완전 둥글게 */
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.visitor-badge:hover {
  filter: brightness(90%);
}

/* =====================================================
   11. Off-canvas & Bottom-sheet 컨테이너 (#giftCalcModal)
   ===================================================== */
#giftCalcModal {
  position: fixed;
  top: 0;
  right: -400px;          /* 우측 밖으로 숨김 */
  left: auto;
  width: 400px;
  height: 100%;
  background: transparent; /* 반투명 배경 제거 */
  overflow: visible;
  transition: right 0.3s ease, bottom 0.3s ease;
  z-index: 1000;
}

#giftCalcModal.open {
  right: 0;               /* 슬라이드 인 */
  display: flex;
  justify-content: center;/* 콘텐츠 중앙 정렬 */
  align-items: center;
}

/* 모바일(≤768px)에서는 Bottom-sheet */
@media (max-width: 768px) {
  #giftCalcModal {
    top: auto;
    bottom: -70vh;
    left: 0;
    right: 0;
    width: 100%;
    height: 70vh;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  }
  #giftCalcModal.open {
    bottom: 120px;
    display: block;       /* flex → block 전환 */
  }
}

/* giftCalcModal 전용 모달 박스 (컨텐츠) */
#giftCalcModal .modal-content {
  position: relative;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  margin: 1rem auto;      /* 수평 중앙 정렬 + 상단 여유 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
  box-sizing: border-box;
}

/* giftCalcModal 전용 닫기 아이콘 */
#giftCalcModal .modal-content .close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #888;
}

/* giftCalcModal 전용 타이틀 */
#giftCalcModal .modal-content h2 {
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 1.25rem;
}

/* giftCalcModal 전용 입력 라벨 */
#giftCalcModal .modal-content label {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #333;
}

/* giftCalcModal 전용 숫자 입력 필드 */
#giftCalcModal .modal-content input[type="number"] {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  box-sizing: border-box;
}

/* giftCalcModal 전용 체크박스 */
#giftCalcModal .modal-content input[type="checkbox"] {
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* giftCalcModal 전용 안내 문구 스타일 */
#giftCalcModal .gift-info {
  background: #f0f8ff;
  border-left: 4px solid var(--primary-color);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}
#giftCalcModal .gift-info p {
  margin: 0.5rem 0;
}

/* giftCalcModal 전용 결과 박스 디자인 */
#giftCalcModal .gift-result {
  background: #eef8ff;
  border: 1px solid #c3e0ff;
  border-radius: 6px;
  padding: 1rem;
  margin-top: 1.5rem;
  text-align: left;
  font-size: 0.95rem;
  color: #333;
}
#giftCalcModal .gift-result p {
  margin: 0.4rem 0;
  line-height: 1.4;
}
#giftCalcModal .gift-result p span.label {
  font-weight: bold;
  color: var(--primary-color);
}

/* ── 토글 스위치 스타일 ── */
.checkbox-container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;        /* 줄 바꿈 방지 */
  margin: 1rem 1rem;
}

/* 라벨 텍스트가 길어져도 한 줄로 유지 */
.checkbox-container .label-text {
  white-space: nowrap;
  overflow: hidden;
}

/* 숨겨진 실제 체크박스 */
.checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 스위치 트랙 */
.checkbox-container .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-right: 0.5rem;
  cursor: pointer;
}

/* 트랙 배경 */
.checkbox-container .switch .slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc;
  border-radius: 20px;
  transition: background 0.3s;
}

/* 동그란 노브 */
.checkbox-container .switch .slider:before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  top: 2px; left: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* 체크됐을 때 트랙 색상 & 노브 이동 */
.checkbox-container input:checked + .switch .slider {
  background: var(--primary-color);
}
.checkbox-container input:checked + .switch .slider:before {
  transform: translateX(20px);
}

/* 토글 옆 텍스트 */
.checkbox-container .label-text {
  font-size: 0.95rem;
  color: #333;
  user-select: none;
  cursor: pointer;
}

/* index.css 또는 main.css 맨 아래에 추가 */
.darkmode-toggle .fa-sun {
  display: none !important;
}
.darkmode-toggle .fa-moon {
  display: inline-block !important;
}

/* ── 유튜브 섹션 헤더 flex 레이아웃 ── */
.youtube-section-header {
  display: flex;                           /* 제목과 버튼을 같은 줄에 */
  justify-content: space-between;          /* 양끝 정렬 */
  align-items: center;                     /* 수직 가운데 정렬 */
}

/* ── LIVE 버튼 래퍼 애니메이션 ── */
.youtube-section-live-wrapper {
  animation: youtube-live-pulse 1.5s ease-in-out infinite; /* 맥박 효과 */
}

/* ── LIVE 버튼 스타일 ── */
.youtube-section-live-btn {
  background-color: #e62117;                /* YouTube 레드 */
  color: #fff;                              /* 텍스트 흰색 */
  border: none;                             /* 테두리 제거 */
  padding: 8px 8px;                        /* 버튼 여백 */
  font-size: 1rem;                          /* 폰트 크기 */
  border-radius: 4px;                       /* 둥근 모서리 */
  cursor: pointer;                          /* 클릭시 포인터 */
}

/* ── 맥박 애니메이션 정의 ── */
@keyframes youtube-live-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ── YouTube Live 전용 모달 스타일 ── */
.youtube-live-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.youtube-live-modal-overlay.open {
  display: flex;
}
.youtube-live-modal-content {
  background: #fff;
  border-radius: 8px;
  max-width: 90%;
  max-height: 80%;
  width: 800px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.youtube-live-modal-close {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}
.youtube-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}
.youtube-video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  border: none;
}

/* ─────────────────────────────────────────
   랭킹 카드: 순위·이미지·이름·횟수 표시
───────────────────────────────────────── */
/* ──────────────────────────────────────────
   주간 랭킹 카드 스타일
────────────────────────────────────────── */
.ranking-section #rankingList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: 1rem;
}
.weekly-rank-card {
  background: var(--ranking-box);
  color: var(--ranking-text);
  border: 1px solid var(--ranking-border);
  padding: 0.8rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 6px var(--ranking-shadow);
  /* height: auto; 기존 고정 높이 제거 */
}
.weekly-rank-card .rank-num { color: var(--primary-color); font-weight: bold; margin-bottom: .4rem; }
.weekly-rank-card .rank-img { width:64px; height:64px; object-fit:contain; margin-bottom:.5rem; }
.weekly-rank-card .rank-name { font-size:.9rem; margin-bottom:.3rem; }
.weekly-rank-card .rank-count { font-size:.8rem; color:#666; }

/* ──────────────────────────────────────────
   실시간 랭킹 카드 스타일
────────────────────────────────────────── */
.live-ranking-section #liveRankingList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: 1rem;
}
.live-rank-card {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.live-rank-card .rank-num { color: white; font-weight: bold; margin-bottom: .4rem; }
.live-rank-card .rank-img { width:64px; height:64px; object-fit:contain; margin-bottom:.5rem; }
.live-rank-card .rank-name { font-size:.9rem; margin-bottom:.3rem; }
.live-rank-card .rank-count { font-size:.8rem; color:rgba(255,255,255,0.8); }

/* ──────────────────────────────────────────
   공통: 모바일 축소
────────────────────────────────────────── */
@media (max-width:576px) {
  .weekly-rank-card, .live-rank-card {
    padding: .5rem;
  }
  .rank-img { width:36px; height:36px; margin-bottom:.3rem; }
  .rank-num { font-size:.75rem; margin-bottom:.3rem; }
  .rank-name { font-size:.75rem; margin-bottom:.2rem; }
  .rank-count { font-size:.7rem; }
}

/* ──────────────────────────────────────────
   실시간 검색 랭킹 오버라이드 스타일
────────────────────────────────────────── */

/* 1) 부모 섹션과 ul까지 구체적으로 지정 */
section.live-ranking-section > ul#liveRankingList {
  /* 카드 간격 최소화 */
  gap: 0.4rem !important;
}

/* 2) li 패딩 축소 */
section.live-ranking-section > ul#liveRankingList > li {
  padding: 0.3rem !important;
}

/* 3) 이미지 크기 및 간격 재조정 */
section.live-ranking-section > ul#liveRankingList > li > img {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 0.3rem !important;
}

/* ─────────────────────────────────────────────
   주간 랭킹 전용 CSS 오버라이드 (실시간과 분리)
───────────────────────────────────────────── */
section.ranking-section > ul#rankingList {
  gap: 0.8rem !important;
  padding: 0       !important;
  margin: 1rem auto!important;
}

section.ranking-section > ul#rankingList > li {
  padding:        0.2rem  !important;
  border-radius: 12px    !important;
}

section.ranking-section > ul#rankingList > li > img {
  width:  48px  !important;
  height: 48px  !important;
  margin-bottom: 0.3rem!important;
}

/* ────────────────────────────────────────────
   1) 기존 공통 블록 (삭제 금지) :contentReference[oaicite:0]{index=0}
──────────────────────────────────────────── */
.live-ranking-section,
.ranking-section {
  max-width: 100%;
}

/* ────────────────────────────────────────────
   2) 섹션별 분리 적용 시작
──────────────────────────────────────────── */

/* ── (A) 실시간 검색 랭킹 전용 스타일 ── */
.live-ranking-section #liveRankingList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.8rem;
  padding: 0;
  margin: 1rem auto;
  list-style: none;
}
.live-ranking-section #liveRankingList li {
  /* 배경만 보라색, 글씨는 흰색 */
  background-color: var(--primary-color);
  color: white;
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: none;           /* 흰 테두리 제거 */
  white-space: normal;
  word-break: keep-all;
}
/* 순위 */
.live-ranking-section #liveRankingList li > div:nth-child(1) {
  color: #fff;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
/* 이미지 */
.live-ranking-section #liveRankingList li > img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 0.3rem;
  border-radius: 4px;
}
/* 이름 */
.live-ranking-section #liveRankingList li > div:nth-child(3) {
  font-size: 0.85rem;
  color: #fff;
  text-align: center;
  margin-bottom: 0.25rem;
}
/* 횟수 */
.live-ranking-section #liveRankingList li > div:nth-child(4) {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}

/* ────────────────────────────────────────────
   (B) 지난 주간 정령 랭킹 전용 스타일
──────────────────────────────────────────── */
.ranking-section #rankingList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.8rem;
  padding: 0;
  margin: 1rem auto;
  list-style: none;
}
.ranking-section #rankingList li {
  /* 배경은 흰색, 글씨는 기본 색상 */
  background-color: var(--card-background);
  color: var(--text-color);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 1px solid #eee;
  white-space: normal;
  word-break: keep-all;
}
/* 순위 */
.ranking-section #rankingList li > div:nth-child(1) {
  color: var(--primary-color);
  font-weight: bold;
  margin-bottom: 0.25rem;
}
/* 이미지 */
.ranking-section #rankingList li > img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 0.3rem;
  border-radius: 4px;
}
/* 이름 */
.ranking-section #rankingList li > div:nth-child(3) {
  font-size: 0.85rem;
  color: #333;
  text-align: center;
  margin-bottom: 0.25rem;
}
/* 횟수 */
.ranking-section #rankingList li > div:nth-child(4) {
  font-size: 0.8rem;
  color: #666;
}

/* ── 미디어쿼리(모바일)에도 동일하게 분리 적용 ── */
@media (max-width: 576px) {
  .live-ranking-section #liveRankingList,
  .ranking-section        #rankingList {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.4rem;
  }
  .live-ranking-section #liveRankingList li,
  .ranking-section        #rankingList li {
    padding: 0.4rem;
    font-size: 0.8rem;
  }
  .live-ranking-section #liveRankingList li > img,
  .ranking-section        #rankingList li > img {
    width: 36px;
    height: 36px;
    margin-bottom: 0.2rem;
  }
}

.live-ranking-h2{
  font-size: 1.8rem !important;
  margin-bottom: 1rem !important;
  color: white;
}

/* ────────────────────────────────────────────
   8. 출시 예정 정령 섹션 스타일 (index.css → main.css로 이동)
──────────────────────────────────────────── */
.feedback-and-upcoming-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px auto;
  max-width: 1200px;
  align-items: flex-start;
}

.upcoming-spirit-section h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.upcoming-spirit-section {
  flex: 1;
  max-width: 600px;
  padding: 20px;
  text-align: center;
  background-color: var(--card-background);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.upcoming-spirits {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.spirit-card {
  width: 100%;
  max-width: 250px;
  background: var(--background-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  box-sizing: border-box;
}

.spirit-card img {
  width: 130px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

.spirit-info {
  margin-top: 10px;
  text-align: left;
}

.spirit-name,
.spirit-details {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.spirit-pv-link {
  font-weight: bold;
  text-decoration: none;
}

.remaining-days {
  display: inline-block;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.85rem;
}

/* D-Day 강조 */
.remaining-days.highlight-3 {
  color: #FF8C00;
  border-color: #FFA500;
  background-color: rgba(255, 165, 0, 0.1);
}

.remaining-days.highlight-2 {
  color: #DC143C;
  border-color: #FF4500;
  background-color: rgba(255, 69, 0, 0.1);
}

.remaining-days.highlight-1 {
  color: #FF0000;
  border-color: #FF6347;
  background-color: rgba(255, 99, 71, 0.1);
}

/* 반응형 */
@media (max-width: 768px) {
  .feedback-and-upcoming-section {
    flex-direction: column;
  }
  .upcoming-spirit-section {
    max-width: 100%;
    padding: 10px;
    margin-bottom: 20px;
  }
}

/* ────────────────────────────────────────────
   출시 예정 정령: 한 줄로 길게 (풀 너비 + 좌측 정렬 + 스크롤)
──────────────────────────────────────────── */
.upcoming-spirit-section {
  /* 기존 max-width:600px 없애고, 컨테이너를 100% 넓이로 */
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
  margin-top: 1.5rem;
}

/* 기존 가로 스크롤 세팅 유지 + 중앙 정렬 */
.upcoming-spirit-section .upcoming-spirits {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 1rem;
  width: max-content;
  overflow-x: auto;
  padding-bottom: 0.5rem;

  /* ← 이 두 줄만 추가해주세요! → */
  margin: 0 auto;       /* 컨테이너 자체를 수평 중앙에 */
  /* 부모가 block-level 이므로 margin auto 로 가운데 정렬 */
}

/* 스크롤바 스타일 (선택) */
.upcoming-spirit-section .upcoming-spirits::-webkit-scrollbar {
  height: 6px;
}
.upcoming-spirit-section .upcoming-spirits::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

/* 모바일(≤768px)에서는 세로 스택 + 풀 너비 유지 */
@media screen and (max-width: 768px) {
  .upcoming-spirit-section .upcoming-spirits {
    flex-direction: column;
    width: 100%;
    margin: 0; /* 모바일에선 좌측 정렬 유지 */
  }
}

/* ────────────────────────────────────────────
   카드 너비 넓히고, 정보 줄별 정렬
──────────────────────────────────────────── */
.upcoming-spirit-section .spirit-card {
  flex: 0 0 calc((100% - 3rem) / 4); /* 기존 4분할 너비 유지 */
  max-width: 240px;                  /* 카드 최대 너비 조금 늘림 */
  padding: 1rem;
  box-sizing: border-box;
}

/* ────────────────────────────────────────────
   1) 이미지 사이즈 통일
──────────────────────────────────────────── */
.upcoming-spirit-section .spirit-card img {
  width: 100%;          /* 카드 너비에 맞춰 꽉 채우기 */
  height: 160px;        /* 고정 높이 (원하는 값으로 조절) */
  object-fit: cover;    /* 비율 유지하며 잘라내기 */
  border-radius: 8px;   /* 모서리 라운드 유지 */
}

/* ────────────────────────────────────────────
   2) 텍스트 가운데 정렬
──────────────────────────────────────────── */
.upcoming-spirit-section .spirit-info {
  text-align: center;   /* 전체 텍스트 중앙 정렬 */
}

/* p 태그 별도 마진·라인 높이 그대로 유지 */
.upcoming-spirit-section .spirit-info p {
  margin: 0.25rem 0;
  line-height: 1.4;
}

.upcoming-spirit-section .spirit-info .pv-link {
  margin-top: 0.5rem;
}

.upcoming-spirit-section .spirit-info .pv-link a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.upcoming-spirit-section .spirit-info .pv-link a:hover {
  background: darken(var(--primary-color), 10%);
}

/* ────────────────────────────────────────────
   모바일 전용: 출시 예정 정령 섹션
──────────────────────────────────────────── */
@media screen and (max-width: 576px) {
  /* 컨테이너를 그리드로 전환해서 2열 고정 */
  .upcoming-spirit-section .upcoming-spirits {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    overflow-x: visible !important;
  }

  /* 카드 너비 강제 초기화 */
  .upcoming-spirit-section .spirit-card {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
  }

  /* 이미지 높이 조절 (원하면 변경) */
  .upcoming-spirit-section .spirit-card img {
    height: 180px !important;
  }

  /* 텍스트·버튼 크기 최적화 */
  .upcoming-spirit-section .spirit-info p {
    font-size: 0.9rem !important;
    margin: 0.3rem 0 !important;
  }
  .upcoming-spirit-section .spirit-info .pv-link a {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.85rem !important;
  }
}

/* 새로운 알림용 플로팅 메시지 박스 */
.floating-alert {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #333;
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;
  font-size: 0.95rem;
  opacity: 0.9;
  
}

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(20px); }
  10%  { opacity: 0.9; transform: translateY(0); }
  90%  { opacity: 0.9; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}

.floating-alert-relative {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: nowrap;
  z-index: 99999 !important; /* ✅ 최상위로 끌어올리기 */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
  pointer-events: none;
}

.floating-alert-relative.show {
  opacity: 0.95;
  transform: translateY(0);
}

/* ────────────────────────────────────────────
   주간 랭킹: 섹션 밖으로 넘치는 카드 숨기기
───────────────────────────────────────────── */
section.ranking-section {
  /* 섹션 배경·패딩은 inline style(main.js)에서 이미 적용되므로,
     여기선 오버플로우만 제어 */
  overflow: hidden !important;
}

/* ────────────────────────────────────────────
   주간 랭킹 리스트: 좌우 마진 제거 & full width
───────────────────────────────────────────── */
section.ranking-section > ul#rankingList {
  margin: 0 !important;       /* 기존 margin:1rem auto 삭제 */
  padding: 0 !important;      /* 혹시 남아있는 패딩이 있으면 제거 */
  width: 100% !important;     /* 섹션 패딩 영역 안에서 꽉 채우기 */
}