/* Popular (1-column) */
.popular-col{ max-width:960px; margin:0 auto; padding:16px; }
.section{ background:#fff; border:1px solid #eee; border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.search-bar form{ display:flex; gap:8px; }
.search-bar input[type=text]{ flex:1; height:44px; padding:0 12px; border:1px solid #ddd; border-radius:8px; font-size:16px; }
.search-bar button{ height:44px; padding:0 16px; border-radius:8px; border:0; background:#111; color:#fff; font-weight:600; cursor:pointer; }
.list{ list-style:none; padding:0; margin:0; }
.row{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid #f3f3f3; }
.row:first-child{ border-top:0; }
.fav{ width:20px; height:20px; border-radius:4px; object-fit:cover; }
.domain{ text-decoration:none; color:#111; font-weight:600; }
.desc{ color:#666; font-size:12px; margin-left:auto; }
.pager{ display:flex; justify-content:center; gap:8px; margin:16px 0; }
.pager a,.pager span{ padding:6px 10px; border:1px solid #ddd; border-radius:6px; text-decoration:none; color:#444; }
.pager .active{ background:#111; color:#fff; border-color:#111; }
@media (max-width:560px){
  .popular-col{ padding:12px; }
  .desc{ display:none; }
}

.desc.loading{ color:#aaa; }
/* dead domain */
.row.dead .domain{ color:#9a9a9a; text-decoration: line-through; }
.row.dead .desc{ color:#9a9a9a; }
.row.dead .fav{ filter: grayscale(100%); opacity:.6; }
/* Dark theme overrides for Popular page ---------------------------------- */
/* app.js에서 document.documentElement.dataset.theme = 'dark' 쓰고 있으니까
   :root[data-theme="dark"] 기준으로 오버라이드 */

:root[data-theme="dark"] body {
  background: #020617;
  color: #e5e7eb;
}

:root[data-theme="dark"] .popular-col {
  /* 레이아웃은 그대로, 컬러만 전역 color 사용 */
}

:root[data-theme="dark"] .section {
  background: #020617;
  border-color: #1f2933;
}

/* 리스트 행 · 구분선 */
:root[data-theme="dark"] .row {
  border-top-color: #111827;
}

/* 도메인 링크 / 보조 텍스트 */
:root[data-theme="dark"] .domain {
  color: #e5e7eb;
}

:root[data-theme="dark"] .desc {
  color: #9ca3af;
}

/* 검색 인풋 / 버튼 */
:root[data-theme="dark"] .search-bar input[type=text] {
  background: #020617;
  border-color: #374151;
  color: #e5e7eb;
}

:root[data-theme="dark"] .search-bar input[type=text]::placeholder {
  color: #6b7280;
}

:root[data-theme="dark"] .search-bar button {
  background: #519fea;
  color: #0b1120;
}

/* 페이지네이션 */
:root[data-theme="dark"] .pager a,
:root[data-theme="dark"] .pager span {
  border-color: #4b5563;
  color: #e5e7eb;
  background: transparent;
}

:root[data-theme="dark"] .pager .active {
  background: #f97316;
  border-color: #f97316;
  color: #0b1120;
}

/* 로딩 텍스트 */
:root[data-theme="dark"] .desc.loading {
  color: #4b5563;
}

/* 죽은 도메인 표시 (조금 더 흐리게) */
:root[data-theme="dark"] .row.dead .domain {
  color: #6b7280;
}

:root[data-theme="dark"] .row.dead .desc {
  color: #6b7280;
}

:root[data-theme="dark"] .row.dead .fav {
  filter: grayscale(100%);
  opacity: .5;
}