.notice-box {
    background-color: #f9f9f9;
    border-left: 6px solid var(--primary-color, #5c6bc0);
    padding: 16px;
    margin: 20px auto;
    max-width: 900px;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .notice-box ol {
    padding-left: 20px;
  }
  

.illust-table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
  }
  
  table#illustTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
  }
  
  table#illustTable th,
  table#illustTable td {
    border: 1px solid #ccc;
    padding: 8px 10px;
    text-align: left;
  }
  
  table#illustTable th {
    background-color: var(--primary-color, #f0f0f0);
    font-weight: bold;
  }
  
  body.dark-mode table#illustTable th {
    background-color: #333;
    color: #fff;
  }
  
  body.dark-mode table#illustTable td {
    background-color: #222;
    color: #ddd;
  }

  .filter-button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  
  .filter-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background-color: var(--primary-color, #ccc);
    color: #000;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .filter-btn:hover {
    background-color: #999;
  }
  
  .filter-btn.active {
    background-color: #333;
    color: #fff;
  }

  .filter-button-group {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
  }
  
  
  .search-container {
    margin-bottom: 1rem;
  }
  
  #searchInput {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #aaa;
    border-radius: 6px;
    font-size: 14px;
  }

  /* 정렬 가능한 컬럼 스타일 */
th.sortable {
    cursor: pointer;
    user-select: none;
  }
  
  /* 정렬 아이콘 스타일 */
  #sortIcon {
    font-size: 0.8em;
    margin-left: 5px;
    vertical-align: middle;
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 6px;
  }
  
  .pagination button {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    color: #000; /* 선택 안된 페이지 번호 색상 → 검정 */
    font-size: 14px;
    border-radius: 4px;
  }
  
  .pagination button.active {
    background-color: #333;
    color: white;
    font-weight: bold;
  }
  
  .pagination button:hover {
    background-color: #eee;
  }
  
  @media (max-width: 768px) {
    #illustTable th, #illustTable td {
      font-size: 0.8rem;
      padding: 6px;
    }
    .filter-wrapper {
      flex-direction: column;
      align-items: center;
    }
  }

  .home-icon {
    width: 110px; /* 이미지 크기 조정 */
    height: 110px; /* 이미지 크기 조정 */
    margin-left: 10px;
}

/* =========================
   [추가] 세련된 UI 오버레이 스타일
   - 기존 CSS는 건드리지 않고 우선순위로만 덮어쓰기
   - 색상은 기존 변수(var) 사용 + 안전한 폴백
   ========================= */

/* 공통 테마 변수 보강 (없으면 폴백으로 사용) */
:root {
  --is-primary: var(--primary-color, #6c5ce7);       /* 보라 계열 기본 */
  --is-surface: var(--card-background, #ffffff);      /* 카드 배경 */
  --is-surface-2: rgba(99, 99, 99, 0.06);
  --is-text: var(--text-color, #222);
  --is-border: rgba(0,0,0,0.08);
  --is-radius: 12px;
  --is-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* 상단 네비 - 살짝 블러 + 스티키 */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(140%) blur(10px);  /* 글래스 효과 */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.65)
  );
  border-bottom: 1px solid var(--is-border);
}

/* 다크모드용 네비 배경 */
body.dark-mode .navbar {
  background: linear-gradient(
    to bottom,
    rgba(20,20,22,0.75),
    rgba(20,20,22,0.55)
  );
  border-bottom-color: rgba(255,255,255,0.08);
}

/* 홈 아이콘 사이즈 슬림화 (기존 110px을 비파괴적으로 덮어쓰기) */
.home-icon {
  width: 44px !important;
  height: 44px !important;
  margin-left: 8px;
  object-fit: contain;
}

/* 본문 최대폭 + 가운데 정렬 */
.main-content {
  max-width: 1100px;
  margin: 24px auto 56px auto;
  padding: 0 16px;
}

/* 카테고리 칩 스타일(가로 스크롤 가능) */
.filter-button-group {
  position: sticky;
  top: 64px;              /* 네비 바로 아래 들러붙도록 */
  z-index: 90;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: var(--is-shadow);
  overflow-x: auto;
  scrollbar-width: thin;
}
body.dark-mode .filter-button-group {
  background: linear-gradient(180deg, rgba(24,24,26,0.85), rgba(24,24,26,0.75));
}

/* 칩 */
.filter-btn {
  border-radius: 999px !important;
  border: 1px solid var(--is-border);
  background: linear-gradient(180deg, #fafafa, #f2f2f2) !important;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.filter-btn.active {
  background: linear-gradient(135deg, var(--is-primary), #8e7bff) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(108,92,231,0.45);
  border-color: transparent;
}

/* 검색창 리디자인 */
.search-container {
  max-width: 520px;
  margin: 18px auto 0 auto;
}
#searchInput {
  border-radius: 14px !important;
  border: 1px solid var(--is-border) !important;
  background: var(--is-surface);
  box-shadow: var(--is-shadow);
  padding: 14px 16px !important;
  font-size: 15px !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}
#searchInput:focus {
  outline: none;
  border-color: var(--is-primary) !important;
  box-shadow: 0 0 0 4px rgba(108,92,231,0.15);
}

/* 테이블 리파인드 */
.illust-table-wrapper {
  margin-top: 16px !important;
  background: var(--is-surface);
  border-radius: 14px;
  box-shadow: var(--is-shadow);
  overflow: hidden; /* 라운드에 맞게 */
}

/* 헤더 고정 + 스타일 업 */
#illustTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, #fbfbfe, #f4f4fb);
  color: #333;
  border-bottom: 1px solid var(--is-border);
}
body.dark-mode #illustTable thead th {
  background: linear-gradient(180deg, #1e1e22, #1a1a1e);
  color: #eaeaea;
  border-bottom-color: rgba(255,255,255,0.06);
}

/* 행 지브라 + 호버 */
#illustTable tbody tr:nth-child(odd) td {
  background: #fff;
}
#illustTable tbody tr:nth-child(even) td {
  background: #fafafe;
}
#illustTable tbody tr:hover td {
  background: #f1f1ff;
}
body.dark-mode #illustTable tbody tr:nth-child(odd) td {
  background: #1b1b1f;
}
body.dark-mode #illustTable tbody tr:nth-child(even) td {
  background: #17171b;
}
body.dark-mode #illustTable tbody tr:hover td {
  background: #20202a;
}

/* 다운로드 버튼 톤업 (a 태그를 버튼처럼) */
#illustTable td:last-child a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--is-primary), #8e7bff);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(108,92,231,0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
#illustTable td:last-child a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(108,92,231,0.45);
}

/* 정렬 아이콘 애니 */
.sortable #sortIcon {
  display: inline-block;
  transition: transform .18s ease;
}
.sortable.is-asc #sortIcon { transform: rotate(180deg); }

/* NEW 뱃지 */
.is-new-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ff6b6b, #ff9f43);
  box-shadow: 0 4px 12px rgba(255,120,80,0.35);
  animation: pulseNew 1.6s ease-in-out infinite;
}
@keyframes pulseNew {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

/* 검색 하이라이트 */
mark.is-hl {
  background: #ffeaa7;
  padding: 0 2px;
  border-radius: 4px;
}

/* 페이지네이션 톤업 */
.pagination {
  gap: 8px !important;
  padding: 16px 8px 20px;
}
.pagination button {
  border-radius: 10px !important;
  border-color: var(--is-border) !important;
  background: linear-gradient(180deg, #fff, #f9f9ff) !important;
  font-weight: 600;
}
.pagination button.active {
  background: linear-gradient(135deg, var(--is-primary), #8e7bff) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(108,92,231,0.35);
}

/* 업데이트 알림(토스트) */
#floatingNotice {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 360px;
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: 12px;
  box-shadow: var(--is-shadow);
  padding: 14px 14px 12px 14px;
}
body.dark-mode #floatingNotice {
  background: #16161a;
  border-color: rgba(255,255,255,0.08);
}
#floatingNotice button {
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid var(--is-border);
  background: #f6f6fb;
  padding: 6px 10px;
  cursor: pointer;
}

/* =========================
   v2-디자인팩 (추가/오버레이 전용)
   - 기존 규칙은 수정하지 않음
   - 한국어 주석
   ========================= */

/* 서브 툴바 (검색 아래, 우측 정렬) */
.sub-toolbar{
  max-width: 1100px;
  margin: 8px auto 4px auto;
  padding: 0 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* 서브 툴바 - 고스트 버튼 */
.sub-toolbar .ghost-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: linear-gradient(180deg,#fff,#f7f7fb);
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
.sub-toolbar .ghost-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
body.dark-mode .sub-toolbar .ghost-btn{
  background: linear-gradient(180deg,#1d1d21,#16161a);
  border-color: rgba(255,255,255,.08);
}

/* 정렬 상태 텍스트 */
.sub-toolbar .sort-state{
  font-size: 0.92rem;
  opacity: .8;
}

/* 보기 밀도: 컴팩트 */
body.density-compact #illustTable th,
body.density-compact #illustTable td{
  padding: 6px 8px !important; /* 행 높이를 낮춰서 정보 밀도 상승 */
  font-size: 0.92rem;
}

/* 필터 칩 바: 가로 스크롤 가장자리 그라데이션(좌/우 안내) */
.filter-button-group{
  position: sticky;  /* 기존 구조 유지 + 상단 고정 */
  z-index: 90;
  overflow-x: auto;
  scrollbar-width: thin;
  border-radius: 999px;
}
.filter-button-group.is-scrollable{ position: sticky; }
.filter-button-group.is-scrollable::before,
.filter-button-group.is-scrollable::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:28px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.filter-button-group.is-scrollable::before{
  left:0;
  background: linear-gradient(90deg, rgba(0,0,0,.06), transparent);
}
.filter-button-group.is-scrollable::after{
  right:0;
  background: linear-gradient(-90deg, rgba(0,0,0,.06), transparent);
}
.filter-button-group.is-left-shadow::before{ opacity:1; }
.filter-button-group.is-right-shadow::after{ opacity:1; }
body.dark-mode .filter-button-group.is-scrollable::before{
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent);
}
body.dark-mode .filter-button-group.is-scrollable::after{
  background: linear-gradient(-90deg, rgba(255,255,255,.08), transparent);
}

/* 다운로드 버튼 툴팁용 title 보강은 JS에서 주입, 여기서는 마감만 정리 */
#illustTable td:last-child a{
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .1px;
}

/* 검색/필터 결과 없음(Empty State) */
#illustTable .empty-state td{
  padding: 28px 8px !important;
}
.empty-state-msg{
  text-align: center;
  color: #777;
  font-size: .95rem;
}
body.dark-mode .empty-state-msg{ color: #aaa; }

/* =========================================================
   [추가] 네비게이션/드롭다운 안정화 + 호버 디자인 개선
   - 기존 스타일은 그대로 두고, 오버레이로만 덮어쓰기
   ========================================================= */

/* 색 변수(폴백) */
:root{
  --nav-bg: rgba(255,255,255,0.88);
  --nav-fg: #1f2330;
  --nav-border: rgba(0,0,0,.08);
  --nav-hover-bg: rgba(0,0,0,.05);
  --dd-bg: #fff;
  --dd-fg: #1f2330;
  --dd-border: rgba(0,0,0,.10);
}
body.dark-mode{
  --nav-bg: rgba(22,22,26,0.82);
  --nav-fg: #e7e9ef;
  --nav-border: rgba(255,255,255,.08);
  --nav-hover-bg: rgba(255,255,255,.10);
  --dd-bg: #16171c;
  --dd-fg: #e7e9ef;
  --dd-border: rgba(255,255,255,.10);
}

/* 네비 배경/높이/정렬 보정 */
.navbar{
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: saturate(140%) blur(8px);
}
.navbar .nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-height: 60px;
  padding: 6px 14px;
}

/* 메뉴 리스트 정렬 */
.navbar .nav-menu{
  display:flex;
  align-items:center;
  gap: 6px;
  list-style:none;
  margin:0;
  padding:0;
}

/* 상위 메뉴 버튼(텍스트/링크 공통) */
.navbar .nav-item{ position:relative; }
.navbar .nav-item > a,
.navbar .nav-item > span,
.navbar .login-menu-item{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--nav-fg) !important;
  text-decoration: none;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

/* 호버 시: 배경만 살짝 + 텍스트는 포인트 컬러 */
.navbar .nav-item > a:hover,
.navbar .nav-item > span:hover,
.navbar .login-menu-item:hover{
  background: var(--nav-hover-bg);
  color: var(--primary-color) !important;
}

/* 드롭다운 기본: 감춤(깜빡임 방지용 opacity/visibility/transform) */
.navbar .dropdown .dropdown-content{
  position:absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  margin:0;
  padding: 8px;
  list-style:none;
  background: var(--dd-bg) !important;
  color: var(--dd-fg);
  border: 1px solid var(--dd-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s step-end;
  z-index: 200;
  pointer-events: none; /* 감춤 상태에서 포인터 차단 */
}

/* 상·하 메뉴 사이 ‘갭’ 제거(호버 이동 시 끊김 방지) */
.navbar .dropdown::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:10px;              /* 상단-드롭다운 사이 완충지대 */
}

/* 드롭다운 보이기 조건: 상위 hover + focus-within 모두 허용 */
.navbar .dropdown:hover .dropdown-content,
.navbar .dropdown:focus-within .dropdown-content{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-timing-function: ease-out;
}

/* 드롭다운 항목 스타일 */
.navbar .dropdown .dropdown-content li{ margin: 2px 0; }
.navbar .dropdown .dropdown-content a{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--dd-fg) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, transform .08s ease;
}
.navbar .dropdown .dropdown-content a:hover{
  background: rgba( var(--primary-color-r,92), var(--primary-color-g,107), var(--primary-color-b,192), .12 );
  color: var(--primary-color) !important;
}

/* 로그인/다크토글 버튼 톤 맞춤 */
#darkModeToggle{
  border: 1px solid var(--nav-border);
  background: transparent;
  color: var(--nav-fg);
  border-radius: 10px;
  padding: 6px 10px;
}
#darkModeToggle:hover{
  background: var(--nav-hover-bg);
  color: var(--primary-color);
}

/* 홈 아이콘은 슬림 유지(기존 110px 선언을 안전하게 덮어쓰기) */
.home-icon{ width:44px !important; height:44px !important; object-fit:contain; }

/* 접근성: 키보드 포커스 가시성 */
.navbar .nav-item > a:focus-visible,
.navbar .nav-item > span:focus-visible,
.navbar .dropdown .dropdown-content a:focus-visible,
#darkModeToggle:focus-visible{
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
  border-radius: 10px;
}

/* =========================================================
   [추가] 전체 톤 화이트 아웃 방지 · 대비/레이어 강화 오버레이
   - 배경에 은은한 틴트/그라데이션, 섹션(카드) 대비 강화,
     표(헤더/지브라/호버) 가독성 업, 메뉴 그림자 보강
   - 기존 규칙은 건드리지 않고 덮어쓰기만 함
   ========================================================= */

/* ---------- 1) 페이지 배경: 은은한 틴트 + 라디얼 하이라이트 ---------- */
html, body{
  background: linear-gradient(180deg, #f6f8fc 0%, #f8faff 40%, #f7faf9 100%) !important;
}
body::before{
  /* 한국어: 좌상단 보라 틴트, 우하단 코럴 틴트로 화이트아웃 방지 */
  content:"";
  position: fixed;
  inset: -20% -10% -20% -10%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(700px 500px at 8% 0%, rgba(108,92,231,.09), transparent 60%),
    radial-gradient(800px 550px at 95% 100%, rgba(255,170,115,.08), transparent 60%);
}
body.dark-mode{
  background: linear-gradient(180deg, #0f1014 0%, #111217 100%) !important;
}
body.dark-mode::before{
  background:
    radial-gradient(700px 500px at 8% 0%, rgba(108,92,231,.14), transparent 60%),
    radial-gradient(800px 550px at 95% 100%, rgba(255,170,115,.12), transparent 60%);
}

/* ---------- 2) 상단 네비: 레이어 구분(그림자) 강화 ---------- */
.navbar{
  box-shadow: 0 8px 22px rgba(16,16,20,.06);
}
body.dark-mode .navbar{
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* ---------- 3) 메인 컨테이너/카드 대비 강화 ---------- */
.main-content{
  /* 한국어: 가운데 폭과 여백 유지하면서 바닥과 구분 */
  max-width: 1100px;
  margin: 28px auto 64px auto;
  padding: 0 16px;
}

/* 테이블 카드 래퍼: 배경/보더/그림자 톤 업 */
.illust-table-wrapper{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
body.dark-mode .illust-table-wrapper{
  background: #16171b;
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}

/* 검색 박스 대비 + 포커스 링 */
.search-container{
  max-width: 560px;
  margin-top: 14px;
}
#searchInput{
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
#searchInput:focus{
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 5px rgba(108,92,231,.15);
}
body.dark-mode #searchInput{
  background:#1b1c21;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
}

/* 필터 칩 바를 살짝 띄워 레이어 구분 */
.filter-button-group{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
body.dark-mode .filter-button-group{
  background: rgba(22,23,28,.65);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

/* ---------- 4) 표 가독성: 헤더/지브라/호버 톤 보정 ---------- */
#illustTable thead th{
  background: linear-gradient(180deg, #f7f7fe, #f2f2fb);
  color: #222;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
body.dark-mode #illustTable thead th{
  background: linear-gradient(180deg, #1c1d22, #17181d);
  color:#e9e9f1;
  border-bottom-color: rgba(255,255,255,.08);
}

/* 지브라 라인: 화이트아웃 방지를 위한 옅은 틴트 */
#illustTable tbody tr:nth-child(odd) td{ background: #ffffff; }
#illustTable tbody tr:nth-child(even) td{ background: #f9f9ff; }
#illustTable tbody tr:hover td{ background: #f1f1ff; }
body.dark-mode #illustTable tbody tr:nth-child(odd) td{ background:#17181d; }
body.dark-mode #illustTable tbody tr:nth-child(even) td{ background:#14151a; }
body.dark-mode #illustTable tbody tr:hover td{ background:#1e1f26; }

/* NEW 배지 대비(배경이 밝아져도 또렷하게) */
.is-new-badge{
  box-shadow: 0 6px 16px rgba(255,120,80,.35);
}

/* ---------- 5) 다운로드 버튼/페이지네이션 버튼 대비 정리 ---------- */
#illustTable td:last-child a{
  /* 한국어: 버튼이 표의 하이라이트 포인트가 되도록 그림자/두께 보강 */
  box-shadow: 0 8px 22px rgba(108,92,231,.38);
}
.pagination{
  gap: 8px !important;
  padding: 18px 10px 24px;
}
.pagination button{
  background: linear-gradient(180deg,#fff,#f7f7ff) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.pagination button.active{
  background: linear-gradient(135deg, var(--primary-color), #8e7bff) !important;
  color:#fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(108,92,231,.38);
}
body.dark-mode .pagination button{
  background: linear-gradient(180deg,#1b1c21,#17181d) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

/* ---------- 6) 안내 박스(있다면) 톤 업: 흰 배경 위 구분감 확보 ---------- */
/* 페이지마다 클래스명이 다를 수 있어서 범용 선택자 사용 */
.notice, .announcement, .guide, .info-box{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-left: 4px solid var(--primary-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;
}
body.dark-mode .notice, body.dark-mode .announcement,
body.dark-mode .guide, body.dark-mode .info-box{
  background:#17181d !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* ---------- 7) 메뉴/드롭다운과 배경의 시각적 분리 유지(살짝 더) ---------- */
.navbar{
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
body.dark-mode .navbar{
  background: rgba(22,22,26,.82) !important;
  border-bottom-color: rgba(255,255,255,.08);
}

/* =========================================================
   세이프 라이트 배경팩 (모니터 편차 최소화용)
   - 흰 배경/반투명/그라데이션 의존 ↓
   - 중립 회색 고정 배경 + 불투명 서피스 + 일관 쉐도우
   - 기존 코드/기능은 수정하지 않음 (오버레이만)
   ========================================================= */

/* 1) 중립 배경/서피스 토큰 */
:root{
  --safe-bg: #F3F5F8;               /* 모니터 편차가 적은 연회색 */
  --safe-surface: #FFFFFF;          /* 카드/메뉴 표면(라이트) */
  --safe-surface-dark: #171A20;     /* 카드/메뉴 표면(다크) */
  --safe-border: rgba(0,0,0,.08);
  --safe-shadow: 0 10px 28px rgba(0,0,0,.10);
  --header-surface: #EFF2F6;        /* 테이블 헤더용 고정 색상 */
}
body.dark-mode{
  --safe-bg: #0F1116;
  --safe-surface: #16181F;
  --safe-surface-dark: #16181F;
  --safe-border: rgba(255,255,255,.08);
  --safe-shadow: 0 16px 44px rgba(0,0,0,.55);
  --header-surface: #1B1E26;
}

/* 2) 페이지 배경을 고정 톤으로(그라데이션/효과 제거) */
html, body{
  background: var(--safe-bg) !important;
}
body::before{
  /* 이전에 추가된 라디얼/그리드/이미지 오버레이가 있었다면 끔 */
  content: none !important;
}

/* 3) 유리/반투명 제거 → 불투명 서피스로 통일 */
.navbar{
  background: var(--safe-surface) !important;
  border-bottom: 1px solid var(--safe-border) !important;
  backdrop-filter: none !important;
  box-shadow: var(--safe-shadow) !important;
}
.filter-button-group{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  backdrop-filter: none !important;
  box-shadow: var(--safe-shadow) !important;
}
body.dark-mode .navbar,
body.dark-mode .filter-button-group{
  background: var(--safe-surface-dark) !important;
}

/* 4) 검색창/카드(표 영역)도 동일 톤으로 고정 */
.search-container #searchInput{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  box-shadow: var(--safe-shadow) !important;
}
.illust-table-wrapper{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  box-shadow: var(--safe-shadow) !important;
}
body.dark-mode .search-container #searchInput,
body.dark-mode .illust-table-wrapper{
  background: var(--safe-surface-dark) !important;
}

/* 5) 테이블 가독성: 헤더/지브라를 ‘고정 색’으로 */
#illustTable thead th{
  background: var(--header-surface) !important;
  color: inherit;
  border-bottom: 1px solid var(--safe-border) !important;
}
#illustTable tbody tr:nth-child(odd) td{ background: #FFFFFF !important; }
#illustTable tbody tr:nth-child(even) td{ background: #F7F8FB !important; }
#illustTable tbody tr:hover td{ background: #EEF1F7 !important; }
body.dark-mode #illustTable tbody tr:nth-child(odd) td{ background: #181B22 !important; }
body.dark-mode #illustTable tbody tr:nth-child(even) td{ background: #151820 !important; }
body.dark-mode #illustTable tbody tr:hover td{ background: #1C2030 !important; }

/* 6) 메뉴/드롭다운 hover는 색상만, 배경은 고정(깜빡임 방지) */
.navbar .nav-item > a,
.navbar .nav-item > span,
.navbar .login-menu-item{
  color: inherit !important;
  background: transparent !important;
}
.navbar .nav-item > a:hover,
.navbar .nav-item > span:hover,
.navbar .login-menu-item:hover{
  color: var(--primary-color) !important;
  background: rgba(0,0,0,.05) !important;
}
body.dark-mode .navbar .nav-item > a:hover,
body.dark-mode .navbar .nav-item > span:hover,
body.dark-mode .navbar .login-menu-item:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 7) 드롭다운도 불투명 고정 */
.navbar .dropdown .dropdown-content{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  box-shadow: var(--safe-shadow) !important;
  opacity: 1;
}
body.dark-mode .navbar .dropdown .dropdown-content{
  background: var(--safe-surface-dark) !important;
}

/* 8) 버튼/페이지네이션도 고정 톤 (그라데이션 최소화) */
#illustTable td:last-child a{
  background: var(--primary-color) !important;
  color: #fff !important;
  box-shadow: var(--safe-shadow) !important;
}
.pagination button{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  box-shadow: var(--safe-shadow) !important;
}
.pagination button.active{
  background: var(--primary-color) !important;
  color:#fff !important;
  border-color: transparent !important;
}
/* =========================================================
   [추가] 컬러/톤 완전 통일 + 첨부 이미지 영역 일관화 오버레이
   - 모니터 편차를 줄이는 안전 라이트 톤 + 프라이머리 일원화
   - notice/첨부 이미지/버튼/칩/페이지네이션 색상과 마감 통일
   ========================================================= */

/* 0) 팔레트(여기만 바꾸면 전체가 같이 바뀜) */
:root{
  --primary-color: #5D5FEF;        /* 메인 포인트(인디고-바이올렛) */
  --primary-2: #7C3AED;            /* 보조 포인트(그라데이션 끝값) */

  --safe-bg: #F3F5F8;               /* 배경: 모니터 편차 적은 회색 */
  --safe-surface: #FFFFFF;          /* 카드/메뉴 표면 */
  --safe-surface-dark: #171A20;     /* 다크 표면 */
  --safe-border: rgba(0,0,0,.08);
  --safe-border-dark: rgba(255,255,255,.08);
  --safe-shadow: 0 10px 28px rgba(0,0,0,.10);
  --safe-shadow-dark: 0 16px 44px rgba(0,0,0,.55);

  --header-surface: #EFF2F6;       /* 테이블 헤더 고정색 */
  --header-surface-dark: #1B1E26;
}
body.dark-mode{
  --safe-bg: #0F1116;
  --safe-surface: #16181F;
  --safe-surface-dark: #16181F;
  --safe-border: var(--safe-border-dark);
  --safe-shadow: var(--safe-shadow-dark);
  --header-surface: var(--header-surface-dark);
}

/* 1) 배경/카드 톤 고정(모니터마다 흰색편차 ↓) */
html, body{ background: var(--safe-bg) !important; }
body::before{ content:none !important; } /* 이전 그라데이션/라디얼 제거 */

/* 2) 상단 네비/칩 바도 같은 표면으로 */
.navbar,
.filter-button-group{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  box-shadow: var(--safe-shadow) !important;
  backdrop-filter: none !important;
}
body.dark-mode .navbar,
body.dark-mode .filter-button-group{
  background: var(--safe-surface-dark) !important;
}

/* 3) 공지/안내 박스(스크린샷 영역) 색/링크/아이콘 통일 */
.notice, .notice-box, .announcement, .info-box, .guide{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  border-left: 4px solid var(--primary-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--safe-shadow) !important;
  color: inherit !important;
}
body.dark-mode .notice, body.dark-mode .notice-box,
body.dark-mode .announcement, body.dark-mode .info-box, body.dark-mode .guide{
  background: var(--safe-surface-dark) !important;
}
.notice a, .notice-box a, .announcement a, .info-box a, .guide a{
  color: var(--primary-color) !important;
  text-decoration: underline;
}
.notice b, .notice strong, .notice .title,
.notice .highlight{ color: var(--primary-color) !important; }

/* 4) “첨부한 이미지” 영역 통일(여러 케이스 커버) */
.attach, .attachments, .attached, .attachment,
.image-box, .image-card, .image-gallery, .preview-box{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--safe-shadow) !important;
  padding: 10px;
}
.notice img, .announcement img, .info-box img, .guide img,
.attach img, .attachments img, .attached img, .attachment img,
.image-box img, .image-card img, .image-gallery img, .preview-box img,
img[class*="thumb"], img[class*="preview"]{
  background: var(--safe-surface) !important;     /* 투명 PNG 대비 */
  border: 1px solid var(--safe-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  padding: 6px;                                   /* 여백 통일 */
}
body.dark-mode .attach img, body.dark-mode .attachments img,
body.dark-mode .attached img, body.dark-mode .attachment img,
body.dark-mode .image-box img, body.dark-mode .image-card img,
body.dark-mode .image-gallery img, body.dark-mode .preview-box img,
body.dark-mode img[class*="thumb"], body.dark-mode img[class*="preview"]{
  background: var(--safe-surface-dark) !important;
  border-color: var(--safe-border) !important;
  box-shadow: var(--safe-shadow-dark) !important;
}

/* 5) 검색/테이블 카드/헤더 고정 */
.search-container #searchInput{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  box-shadow: var(--safe-shadow) !important;
  border-radius: 14px !important;
}
.illust-table-wrapper{
  background: var(--safe-surface) !important;
  border: 1px solid var(--safe-border) !important;
  box-shadow: var(--safe-shadow) !important;
  border-radius: 14px !important;
}
#illustTable thead th{
  background: var(--header-surface) !important;
  border-bottom: 1px solid var(--safe-border) !important;
}
#illustTable tbody tr:nth-child(odd) td{ background:#FFFFFF !important; }
#illustTable tbody tr:nth-child(even) td{ background:#F7F8FB !important; }
#illustTable tbody tr:hover td{ background:#EEF1F7 !important; }
body.dark-mode #illustTable tbody tr:nth-child(odd) td{ background:#181B22 !important; }
body.dark-mode #illustTable tbody tr:nth-child(even) td{ background:#151820 !important; }
body.dark-mode #illustTable tbody tr:hover td{ background:#1C2030 !important; }

/* 6) 프라이머리 톤 일괄 적용(칩/버튼/페이지네이션/배지) */
.filter-btn.active,
.pagination button.active,
#illustTable td:last-child a{
  background: linear-gradient(135deg, var(--primary-color), var(--primary-2)) !important;
  color:#fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(93,95,239,.35);
}
.filter-btn:hover{ border-color: var(--primary-color) !important; }
.is-new-badge{
  background: linear-gradient(135deg, #FF6B6B, #FF9F43) !important;
  color:#fff; box-shadow: 0 8px 20px rgba(255,120,80,.32);
}

/* 7) 메뉴 호버는 배경 고정 + 글자만 포인트(깜빡임 방지) */
.navbar .nav-item > a,
.navbar .nav-item > span,
.navbar .login-menu-item{
  color: inherit !important; background: transparent !important;
}
.navbar .nav-item > a:hover,
.navbar .nav-item > span:hover,
.navbar .login-menu-item:hover{
  color: var(--primary-color) !important;
  background: rgba(0,0,0,.05) !important;
}
body.dark-mode .navbar .nav-item > a:hover,
body.dark-mode .navbar .nav-item > span:hover,
body.dark-mode .navbar .login-menu-item:hover{
  background: rgba(255,255,255,.08) !important;
}

/* ============================================
   [추가] 메뉴 글자색 라이트=검정, 다크=밝은색
   - 기존 규칙은 건드리지 않고 가장 아래에서 덮어쓰기
   - 호버/드롭다운까지 모두 일괄 적용
   ============================================ */

/* 변수 기반 컬러도 함께 고정(라이트용) */
:root{
  --nav-fg: #000000;  /* 상단 메뉴 텍스트 */
  --dd-fg:  #000000;  /* 드롭다운 항목 텍스트 */
}

/* 라이트 모드: 메뉴/드롭다운 글자 = 검정, 호버도 검정 유지 */
body:not(.dark-mode) .navbar .nav-item > a,
body:not(.dark-mode) .navbar .nav-item > span,
body:not(.dark-mode) .navbar .login-menu-item,
body:not(.dark-mode) .navbar .dropdown .dropdown-content a{
  color: #000 !important;
}
body:not(.dark-mode) .navbar .nav-item > a:hover,
body:not(.dark-mode) .navbar .nav-item > span:hover,
body:not(.dark-mode) .navbar .login-menu-item:hover,
body:not(.dark-mode) .navbar .dropdown .dropdown-content a:hover{
  color: #000 !important;               /* 글자색 검정 고정 */
  background: rgba(0,0,0,.06) !important; /* 배경만 살짝 */
}

/* 다크 모드: 가독성 유지(밝은 텍스트) */
body.dark-mode .navbar .nav-item > a,
body.dark-mode .navbar .nav-item > span,
body.dark-mode .navbar .login-menu-item,
body.dark-mode .navbar .dropdown .dropdown-content a{
  color: #e7e9ef !important;
}
body.dark-mode .navbar .nav-item > a:hover,
body.dark-mode .navbar .nav-item > span:hover,
body.dark-mode .navbar .login-menu-item:hover,
body.dark-mode .navbar .dropdown .dropdown-content a:hover{
  color: #e7e9ef !important;
  background: rgba(255,255,255,.08) !important;
}