/* =========================================================
   home.css — 홈(작품 목록) 페이지 전용 스타일
   ========================================================= */

.site-sticky-top {
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

/* 헤더도 아래 필터바/작품 목록과 같은 폭(1200px)으로 맞추고 가운데로
   모아서, 화면이 넓을 때 위쪽도 똑같이 좌우 여백이 생기게 한다. */
.site-sticky-top .site-header {
  max-width: 1200px;
  margin: 0 auto;
}

/* 검색바 — 헤더의 로고 옆에서 남는 공간을 채우되, 오른쪽 끝 삼선 버튼이
   들어갈 자리만큼은 자연스럽게 줄어든다(flex-shrink). 높이는 로고/스위치/
   삼선 버튼과 같은 42px로 맞춘다. */
.header-left .search-bar {
  flex: 1 1 auto;
  max-width: none;
  width: auto;
  height: 42px;
}

/* 검색창 옆 소설/웹툰 전환 스위치 — 뒤에 깔린 금색 thumb이 실제 스위치
   레버처럼 옆으로 슥 미끄러지듯 움직인다(탄성 있는 이징으로 딸깍 넘어가는
   느낌을 준다). 버튼 2개는 항상 폭이 똑같아서 thumb도 정확히 50%씩 움직인다.
   높이는 검색창·로고·삼선 버튼과 같은 42px로 맞춘다. */
.content-mode-switch {
  position: relative;
  display: flex;
  flex-shrink: 0;
  height: 42px;
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.content-mode-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px var(--shadow-color);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}

.content-mode-switch.mode-webtoon .content-mode-thumb {
  transform: translateX(100%);
}

.content-mode-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-mode-option.active {
  color: var(--text-on-accent);
}

.content-mode-switch:active .content-mode-thumb {
  transform: scale(0.96);
}

.content-mode-switch.mode-webtoon:active .content-mode-thumb {
  transform: translateX(100%) scale(0.96);
}

/* 삼선 버튼(데스크톱/모바일 공통) 기본 스타일은 css/common.css에 있음.
   #accountDropdown(계정 드롭다운) 자체 스타일은 아래에 있다 — 이 버튼과
   드롭다운은 index.html에만 있다. */

/* ---------- 정렬/필터바: 원작·IF 드롭다운 + 인기순위 드롭다운 + 카테고리 ---------- */
.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px calc(var(--page-padding) + 24px);
  position: relative;
}

/* 원작스토리/IF스토리, 인기순위 드롭다운 — 토글 누르면 아래로 목록이 펼쳐지는
   단일선택 드롭다운(카테고리처럼 다중선택 칩이 아니라 그냥 세로 목록). */
.filter-dropdown {
  position: relative;
}

.filter-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.filter-dropdown-toggle svg {
  transition: transform 0.15s ease;
}

.filter-dropdown-toggle.open svg {
  transform: rotate(180deg);
}

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px var(--shadow-color);
  padding: 6px;
  min-width: 150px;
  z-index: 15;
}

.filter-dropdown-option {
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.filter-dropdown-option:hover {
  background: var(--bg-soft);
}

.filter-dropdown-option.active {
  color: var(--accent);
  font-weight: 800;
}

/* 계정 드롭다운/사이드바 관련 스타일은 모든 페이지에서 공통으로 쓰여서
   css/common.css로 옮겼다(.account-dropdown, .account-panel, .panel-*,
   .sidebar-logo, 데스크톱 좌측 사이드바 미디어쿼리 전부 거기 있음). */

.author-filter-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 16px auto 8px;
  padding: 0 calc(var(--page-padding) + 24px);
  font-size: 13px;
  color: var(--text-secondary);
}

.author-filter-badge strong {
  color: var(--text-primary);
  font-weight: 800;
}

.author-filter-badge button {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11px;
}

/* ---------- 작품 목록(그리드형 — 한 줄에 5개씩) ----------
   favorites.html(관심작품)도 이 클래스를 그대로 쓰기 때문에 건드리지
   않는다. 홈 화면은 아래 .novel-list-grid로 따로 쓴다. */
.novel-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px calc(var(--page-padding) + 24px) 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 16px;
}

/* ---------- 홈 화면 전용 작품 목록 — 순위 구분 없이 전부 한 줄에 6개씩
   똑같은 크기로 보여준다(예전엔 1~4위/5~10위/11위부터를 카드 크기까지
   다르게 나눴는데, 그냥 전부 균일하게 나오도록 단순화했다). ---------- */
.novel-list-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px calc(var(--page-padding) + 24px) 40px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 16px;
}

/* "불러오는 중...", "아직 등록된 작품이 없습니다." 안내문 — grid 첫 칸에
   끼어서 한 줄로 좁게 줄바꿈되지 않도록 전체 칸을 차지하게 하고,
   작품 영역 기준으로 중앙 정렬 + 한 줄 유지한다. */
.novel-list-grid .empty-hint {
  grid-column: 1 / -1;
  text-align: center;
  white-space: nowrap;
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 14px;
}

a.novel-card,
a.novel-card:visited {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.novel-card .cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
}

.novel-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.novel-card .title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.novel-card:hover .title {
  color: var(--accent);
}

.novel-card .stats {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 900px 이하부터는 모바일 포함 끝까지 한 줄에 3개씩 유지한다(favorites.html용,
   홈 화면 작품 목록도 동일하게 3개씩). */
@media (max-width: 900px) {
  .novel-list,
  .novel-list-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 10px;
  }
}

.card-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 2px 5px;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---------- 검색창 클릭 시: 내 검색기록 + 해시태그 추천 ---------- */
.search-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.search-history-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-history-term {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-history-term:hover {
  background: var(--bg-soft);
}

.search-history-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--text-muted);
}

.search-history-remove:hover {
  background: var(--bg-soft);
  color: var(--text-secondary);
}

/* ---------- 무한 스크롤 감지용 sentinel ----------
   화면에 보이기 시작하면(js/home.js의 IntersectionObserver) 다음 묶음을
   이어서 그린다. 눈에 보일 필요는 없고 약간의 여백만 준다. */
.scroll-sentinel {
  height: 40px;
}

/* ---------- 반응형 (모바일) ---------- */
@media (max-width: 900px) {
  .novel-list {
    padding: 16px var(--page-padding) 8px;
  }

  .novel-list-grid {
    padding: 16px var(--page-padding) 24px;
  }
}

@media (max-width: 720px) {
  .filter-bar,
  .author-filter-badge {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }

  /* 좁은 화면에서는 로고/검색창/스위치/삼선 버튼이 한 줄에 다 안 들어가서
     header-left가 두 줄로 줄바꿈될 수 있다(위 .header-left flex-wrap).
     그만큼 헤더가 높아지니 드롭다운 위치도 더 아래로 내린다. */
  .account-dropdown {
    top: 140px;
  }
}

/* ---------- 데스크톱(1025px 이상, 좌측 사이드바 있음) ----------
   이 파일 맨 끝에 둔다 — 위의 .filter-bar, .novel-list 계열, .search-bar
   기본 규칙과 선택자 우선도가 똑같아서, 더 먼저 나오면 CSS 소스 순서상
   뒤에 나오는 기본 규칙에 덮여써서 적용이 안 된다(실제로 그래서 한동안
   아래 변경들이 하나도 반영 안 되고 있었다). */
@media (min-width: 1025px) {
  .site-sticky-top .site-header,
  .filter-bar,
  .novel-list,
  .novel-list-grid,
  .author-filter-badge {
    margin-left: 0;
    margin-right: 0;
  }

  /* 헤더(검색창 아래) 구분선이 1200px에서 끊기지 않고 끝까지 길게 가도록
     헤더 자체를 전체 폭으로 두고, 작품 목록도 1200px에서 안 끊기고
     사이드바 옆 남는 공간을 끝까지 채우게 한다 — 1200px로 막혀있으면
     화면이 넓을 때 카드 오른쪽으로 빈 공간이 크게 남아서 한 줄이 꽉
     안 찬 것처럼 보였다. */
  .site-sticky-top .site-header,
  .filter-bar,
  .novel-list-grid {
    max-width: none;
  }

  /* 필터바(원작스토리·전체인기)/작품 목록이 전부 같은 x축(사이드바
     세로선에서 20px, 약 0.5cm)에서 시작하도록 맞춘다. */
  .site-header,
  .filter-bar,
  .novel-list-grid,
  .author-filter-badge {
    padding-left: 20px;
  }

  /* 검색창을 화면(디스플레이) 기준 가운데에서 살짝 왼쪽으로 띄운다.
     헤더를 기준점으로 두고 검색창을 그 안에서 절대 위치로 고정한다 —
     header-left의 flex 흐름에서 빠지는 거라, 옆에 있던 소설/웹툰
     스위치도 같이 절대 위치로 바꿔서 검색창 바로 오른쪽에 붙여준다
     (검색창 중심이 50%-64px이고 폭이 760px이니, 오른쪽 끝은
     50%+316px, 거기서 16px 띄운 지점부터 스위치가 시작한다). 검색창/
     스위치가 모두 흐름 밖으로 빠지므로 헤더 높이가 찌그러지지 않게
     min-height도 원래 높이(42px 내용 + 위아래 18px)만큼 잡아준다. */
  .site-sticky-top .site-header {
    position: relative;
    min-height: 78px;
  }

  .header-left .search-bar {
    position: absolute;
    left: calc(50% - 64px);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 760px;
    max-width: calc(100% - 320px);
    flex: none;
  }

  .content-mode-switch {
    position: absolute;
    left: calc(50% + 332px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}