/* ============================================================
   진로취업디렉토리북 - "전자책 앱" 테마 v2 추가분 (index-v5.html 전용)
   참고 사이트(프드프류 지식 커머스)의 톤앤매너에서 구조만 차용:
   - 검색창에 예시어가 타이핑되었다 지워지는 오토타이핑 플레이스홀더
   - 아이콘 한 벌로 된 빠른 분류 이동 줄(quicknav)
   - 히어로 우측 스포트라이트가 자동으로 넘어가는 미니 캐러셀
   - 책장 카드에 배지 + 찜(heart) 토글
   style.css + style-app.css 위에 얹혀서 보강만 하는 파일.
============================================================ */

/* ---------- 아이콘 퀵네비 (분류 바로가기) ---------- */
.quicknav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 20px;
}
.quicknav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 84px;
  text-decoration: none;
}
.quicknav-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.quicknav-icon svg { width: 26px; height: 26px; }
.quicknav-item:hover .quicknav-icon { transform: translateY(-4px) scale(1.04); filter: brightness(0.96); }
.quicknav-label { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.3; white-space: nowrap; }

/* 밀리의 서재 아이콘 줄 참고: 항목마다 다른 파스텔 원형 배경(재밌고 컬러풀한 느낌) */
.quicknav-item:nth-child(1) .quicknav-icon { background: #e3f2fd; color: #1976d2; }
.quicknav-item:nth-child(2) .quicknav-icon { background: #fce4ec; color: #d81b60; }
.quicknav-item:nth-child(3) .quicknav-icon { background: #f3e5f5; color: #8e24aa; }
.quicknav-item:nth-child(4) .quicknav-icon { background: #e8f5e9; color: #43a047; }
.quicknav-item:nth-child(5) .quicknav-icon { background: #fff3e0; color: #fb8c00; }

/* ---------- 검색창 오토타이핑 캐럿 느낌 ---------- */
.search-box input::placeholder { transition: opacity 0.1s ease; }
.search-box.typing input {
  caret-color: transparent;
}

@media (max-width: 560px) {
  .quicknav-item { min-width: 72px; }
  .quicknav-icon { width: 56px; height: 56px; }
}