/* BASIC css start */
/* ============================================================================
 * 상품 검색 결과 화면 — shopsearch.css — 인클리어
 * ----------------------------------------------------------------------------
 * 메이크샵 [중앙 디자인 > 상품 관련 > 상품 검색 결과 화면] 의 CSS 탭에 넣는다.
 *
 * 카드 자체(.nv-pcard / .nv-pn / .nv-price-row)는 공용 novels.css 가 담당한다.
 * 여기 있는 건 이 페이지에만 있는 것 — 페이지 머리말, 재검색 폼, 정렬, 페이저,
 * 그리고 메이크샵이 찍어내는 입력칸을 우리 모양으로 눌러주는 규칙이다.
 *
 * ⚠ 입력칸은 치환코드(input_keyword 등)가 만들어 클래스를 바꿀 수 없다.
 *   후손 선택자로 잡고, Tailwind 빌드본이 유틸리티에 !important 를 다는 것처럼
 *   메이크샵 기본 CSS 도 강하게 걸려 있어 !important 가 필요하다.
 * ========================================================================== */

/* ── 페이지 머리말 ────────────────────────────────────────────────── */
#nvSch .nv-sch-head { margin-bottom: 20px; }
#nvSch .nv-sch-eyebrow {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: var(--color-brand-blue);
}
#nvSch .nv-sch-title {
  margin: 6px 0 0; font-size: 24px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.02em; color: var(--color-text-main);
}
/* 제목 안 검색어 — shopsearch.js 가 입력칸 value 를 읽어 넣는다 */
#nvSch .nv-sch-kw { color: var(--color-brand-blue); }

/* ── 재검색 폼 ────────────────────────────────────────────────────── */
#nvSch .nv-sch-form { margin-bottom: 26px; }

/* 키워드 줄 — 아이콘 + 입력칸 + 버튼을 한 덩어리로 */
#nvSch .nv-sch-bar {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; height: 54px; padding: 0 7px 0 16px;
  border: 1px solid var(--color-line-base); border-radius: 14px;
  background: var(--color-card-bg);
  transition: border-color .16s ease, box-shadow .16s ease;
}
#nvSch .nv-sch-bar:focus-within {
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), .12);
}
#nvSch .nv-sch-ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  color: var(--color-text-muted); transition: color .16s ease;
}
#nvSch .nv-sch-bar:focus-within .nv-sch-ico { color: var(--color-brand-blue); }

#nvSch .nv-sch-bar input {
  flex: 1 1 auto; min-width: 0;
  width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  outline: none !important;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  color: var(--color-text-main);
}
#nvSch .nv-sch-bar input::placeholder { color: var(--color-text-muted); font-weight: 400; }

#nvSch .nv-sch-go {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  height: 40px; padding: 0 20px; border-radius: 10px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  transition: filter .16s ease, transform .12s ease;
}
#nvSch .nv-sch-go:hover  { filter: brightness(1.1); }
#nvSch .nv-sch-go:active { transform: translateY(1px); }

/* 상세 검색 — 평소엔 접어둔다 */
#nvSch .nv-sch-adv { margin-top: 12px; max-width: 560px; }
#nvSch .nv-sch-adv > summary {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--color-text-sub);
  transition: color .16s ease;
}
#nvSch .nv-sch-adv > summary::-webkit-details-marker { display: none; }
#nvSch .nv-sch-adv > summary::after {
  content: "▾"; font-size: 11px; transition: transform .18s ease;
}
#nvSch .nv-sch-adv[open] > summary::after { transform: rotate(180deg); }
#nvSch .nv-sch-adv > summary:hover { color: var(--color-brand-blue); }

#nvSch .nv-sch-adv-body {
  margin-top: 12px; padding: 16px 18px;
  border: 1px solid var(--color-line-soft); border-radius: 12px;
  background: var(--color-section-soft);
  display: flex; flex-direction: column; gap: 12px;
}
#nvSch .nv-sch-field { display: flex; align-items: center; gap: 12px; }
#nvSch .nv-sch-label {
  flex: 0 0 66px; font-size: 13px; font-weight: 600;
  color: var(--color-text-sub);
}
#nvSch .nv-sch-range { display: flex; align-items: center; gap: 8px; }
#nvSch .nv-sch-range em { font-style: normal; color: var(--color-text-muted); }

/* 상세 검색 안의 입력칸들 — 메이크샵 기본 테두리를 우리 것으로 교체 */
#nvSch .nv-sch-adv-body input,
#nvSch .nv-sch-adv-body select {
  height: 38px !important; padding: 0 11px !important; margin: 0 !important;
  border: 1px solid var(--color-line-base) !important; border-radius: 9px !important;
  background: var(--color-card-bg) !important; box-shadow: none !important;
  font-size: 13.5px; color: var(--color-text-main);
}
#nvSch .nv-sch-adv-body input:focus,
#nvSch .nv-sch-adv-body select:focus {
  outline: none !important;
  border-color: var(--color-brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), .12) !important;
}
#nvSch .nv-sch-adv-body .nv-sch-field > input { flex: 1 1 auto; min-width: 0; }
#nvSch .nv-sch-range input { width: 116px !important; }

/* ── 결과 수 + 정렬 ───────────────────────────────────────────────── */
#nvSch .nv-sch-info {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
#nvSch .nv-sch-count {
  margin: 0; font-size: 13px; color: var(--color-text-sub);
}
#nvSch .nv-sch-count strong { font-weight: 700; color: var(--color-text-main); }
#nvSch .nv-sch-sort {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--color-line-base);
}
#nvSch .nv-sch-sort a {
  color: var(--color-text-sub); text-decoration: none;
  transition: color .16s ease;
}
#nvSch .nv-sch-sort a:hover { color: var(--color-brand-blue); }

/* ── 페이지네이션 ─────────────────────────────────────────────────── */
#nvSch .nv-sch-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 44px;
}
#nvSch .nv-sch-pager a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 8px;
  font-size: 13px; color: var(--color-text-sub); text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
#nvSch .nv-sch-pager a:hover { color: var(--color-brand-blue); }
#nvSch .nv-sch-pager a.is-now {
  background: var(--color-brand-blue);
  color: var(--color-text-inverse); font-weight: 700;
}

/* ── 결과 없음 ────────────────────────────────────────────────────── */
#nvSch .nv-sch-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 76px 20px 84px; text-align: center;
}
#nvSch .nv-sch-empty svg {
  width: 44px; height: 44px; margin-bottom: 4px;
  color: var(--color-line-base);
}
#nvSch .nv-sch-empty b {
  font-size: 17px; font-weight: 700; color: var(--color-text-main);
}
#nvSch .nv-sch-empty span {
  font-size: 13.5px; color: var(--color-text-sub); word-break: keep-all;
}
#nvSch .nv-sch-empty-go {
  margin-top: 8px; display: inline-flex; align-items: center;
  height: 44px; padding: 0 24px; border-radius: 999px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  transition: filter .16s ease;
}
#nvSch .nv-sch-empty-go:hover { filter: brightness(1.1); }

/* ── 모바일 ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #nvSch .nv-sch-title { font-size: 21px; }
  #nvSch .nv-sch-bar   { height: 48px; padding-left: 13px; gap: 10px; }
  #nvSch .nv-sch-bar input { font-size: 15px; }
  #nvSch .nv-sch-go    { height: 36px; padding: 0 15px; font-size: 13px; }
  #nvSch .nv-sch-field { flex-direction: column; align-items: stretch; gap: 6px; }
  #nvSch .nv-sch-label { flex: none; }
  #nvSch .nv-sch-range input { width: 100% !important; }
  #nvSch .nv-sch-empty { padding: 56px 16px 64px; }
}

/* BASIC css end */