/* Home (1-column) */
.home-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; }
.title{ margin:0 0 12px; font-size:22px; }
.search-bar form{ display:flex; gap:8px; }
.search-bar input[type=text], .search-bar input[type=url]{ 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; }
.hint{ margin-top:8px; color:#666; font-size:12px; }
.list{ display:flex; flex-direction:column; gap:10px; list-style:none; padding:0; margin:0; }
.item{ display:flex; align-items:center; gap:10px; }
.fav{ width:20px; height:20px; border-radius:4px; object-fit:cover; }
.domain{ text-decoration:none; color:#111; font-weight:600; }
.meta{ color:#666; font-size:12px; }
.more{ margin-top:8px; text-align:right; }
.more a{ font-size:13px; color:#555; text-decoration:none; }
.reviews .reviews-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.reviews .review{ display:flex; align-items:flex-start; gap:8px; }
.reviews .review .comment{ margin-left:28px; color:#333; }
.muted{ color:#777; }
@media (max-width:560px){
  .home-col{ padding:12px; }
  .search-bar button{ padding:0 12px; }
}

/* Dark theme overrides -------------------------------------------------- */
/* html[data-theme="dark"] 기준 – app.js에서 root.dataset.theme 바꾸는 구조랑 맞춰줌 */

:root[data-theme="dark"] body {
  background: #020617;          /* 전체 배경 어둡게 */
  color: #e5e7eb;
}

:root[data-theme="dark"] .home-col {
  /* 패딩/레이아웃은 그대로, 글자색만 전역 color를 따르게 */
}

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

/* 타이틀 / 링크 / 보조 텍스트 */
:root[data-theme="dark"] .title {
  color: #f9fafb;
}

:root[data-theme="dark"] .domain {
  color: #e5e7eb;
}

:root[data-theme="dark"] .meta,
:root[data-theme="dark"] .hint,
:root[data-theme="dark"] .muted {
  color: #9ca3af;
}

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

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

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

/* 버튼은 조금 튀게 – 맘에 안 들면 기존 #111 그대로 써도 됨 */
:root[data-theme="dark"] .search-bar button {
  background: #519fea;
  color: #0b1120;
}

/* 리뷰 텍스트 */
:root[data-theme="dark"] .reviews .review .comment {
  color: #e5e7eb;
}