@charset "utf-8";
/* ==========================================================================
   rb.search — 검색 화면

   목업 mockup/css/search.css 를 그대로 옮긴 것이다.
   처음에는 이식 스크립트(port_search_css.py)로 만들었지만 그 스크립트는 남아
   있지 않다. 지금은 이 파일을 직접 고친다.

   바뀐 것은 이름뿐이다.
     .inner   -> .bf-inner        테마 공용 컨테이너
     .btn     -> .bf-btn          그누보드 .btn 과 충돌
     헤더 계열 -> .bf-*           테마 헤더가 bf- 접두를 쓴다
     Montserrat -> var(--font-en) 토큰 경유 (지금 값은 Pretendard)

   .ico 는 그대로 둔다 — 검색 화면 마크업이 목업과 같은 class="ico" 를 쓴다.
   ========================================================================== */

/* ==========================================================================
   1. 검색 전용 헤더 — GNB 대신 검색창을 전면에
   ========================================================================== */
.bf-search-header .bf-header-main .bf-inner { height: 92px; gap: 34px; }
.bf-search-header .bf-header-search { max-width: 760px; }
.bf-search-header .bf-search-box {
  height: 58px;
  border-width: 2px;
  border-color: var(--sky-b3);
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(62,159,222,.12);
}
.bf-search-header .bf-rank-roll-btn { height: 54px; }
.bf-search-header .bf-search-input { height: 54px; font-size: 16.5px; font-weight: 500; }
.bf-search-header .bf-search-submit { width: 48px; height: 48px; }
.bf-search-header .bf-search-submit .ico { width: 23px; height: 23px; }
.bf-search-header .bf-search-keyword { margin-top: 8px; }

/* ==========================================================================
   2. 검색 탭
   ========================================================================== */
.sch-tab {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.sch-tab .bf-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.sch-tab ul { display: flex; }
.sch-tab li a {
  position: relative;
  display: flex; align-items: center;
  height: 50px; padding: 0 20px;
  font-size: 16px; font-weight: 500; color: var(--ink-500);
  transition: color .2s;
}
.sch-tab li a::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--sky-500);
  transform: scaleX(0); transition: transform .25s;
}
.sch-tab li a:hover { color: var(--sky-t2); }
.sch-tab li.on a { color: var(--sky-t3); font-weight: 700; }
.sch-tab li.on a::after { transform: scaleX(1); }

.sch-tab-opt { display: flex; align-items: center; gap: 7px; flex: none; }
.sch-opt {
  height: 30px; padding: 0 12px;
  border-radius: var(--r-full);
  font-size: 13.5px; color: var(--ink-500);
  transition: all .18s;
}
.sch-opt:hover { background: var(--sky-50); color: var(--sky-t2); }
.sch-opt.on { background: var(--sky-100); color: var(--sky-t3); font-weight: 600; }
.sch-opt-sep { width: 1px; height: 14px; background: var(--ink-200); }
.sch-tab-opt select {
  height: 30px; padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13px; color: var(--ink-600);
  cursor: pointer;
}

/* ==========================================================================
   3. 검색 레이아웃
   ========================================================================== */
.sch-page { background: var(--bg); }
.sch-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 30px;
  padding-top: 24px; padding-bottom: 60px;
  align-items: start;
}
.sch-main { min-width: 0; }
.sch-side { display: flex; flex-direction: column; gap: 16px; }

/* 검색어 하이라이트 — 포털 결과의 핵심 */
.sch-main b,
.scd-desc b { color: var(--sky-t3); font-weight: 700; }
.scp-snip b, .scf-desc b, .scq-desc b { color: var(--sky-t2); }

/* ==========================================================================
   4. 결과 요약 · 연관 검색어
   ========================================================================== */
.sch-sum {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 2px 14px;
}
.sch-sum p { font-size: 14.5px; color: var(--ink-500); }
.sch-sum p b { color: var(--ink-900); font-weight: 700; }
.sch-sum-save {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 13px; color: var(--ink-500);
  transition: all .2s;
}
.sch-sum-save:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.sch-sum-save.on { background: var(--sky-50); border-color: var(--sky-b3); color: var(--sky-t3); }
.sch-sum-save.on .ico { fill: currentColor; }
.sch-sum-save .ico { width: 14px; height: 14px; }

.sch-related {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.sr-label {
  flex: none; padding-top: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-500);
}
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-chips a {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 13px;
  border-radius: var(--r-full);
  background: var(--sky-50);
  border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-600);
  transition: all .18s;
}
.sr-chips a:hover { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }

/* ==========================================================================
   4-2. 브랜드 검색 — 등록 브랜드가 직접 꾸미는 영역
   ========================================================================== */
.sch-brand {
  border-color: var(--sky-b1);
  box-shadow: var(--sh-sm);
  padding: 0 0 20px;
}
.bd-head {
  display: flex; align-items: center; gap: 9px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.bd-logo {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--sky-400), var(--sky-600));
  color: #fff;
}
.bd-logo .ico { width: 18px; height: 18px; }
.bd-name { font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: var(--ink-900); }
.bd-sub { font-size: 15px; color: var(--ink-500); }
.bd-ad {
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--line-soft); color: var(--ink-400);
  font-size: 11px; font-weight: 600;
}

.bd-notice {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 22px 0; padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--sky-50);
  transition: background .18s;
}
.bd-notice:hover { background: var(--sky-100); }
.bd-notice-ico {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sky-500); color: #fff;
}
.bd-notice-ico .ico { width: 14px; height: 14px; }
/* :not() 으로 아이콘을 빼지 않으면 .bd-notice > span (0,1,1) 이
   .bd-notice-ico (0,1,0) 를 이겨 아이콘이 가로로 늘어난다 */
.bd-notice > span:not(.bd-notice-ico) {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; font-weight: 500; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-arw { flex: none; width: 15px; height: 15px; color: var(--ink-300); }

.bd-main {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
  margin: 16px 22px 0;
}
.bd-visual {
  display: block; aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sky-100);
}
.bd-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
/* 다크 — 사진은 그대로 두되 아주 살짝만 눌러 준다(목업 theme.css 2절) */
:root[data-theme="dark"] .bd-visual img { filter: brightness(.92); }
.bd-visual:hover img { transform: scale(1.05); }
.bd-txt { padding-top: 4px; }
.bd-txt strong {
  display: block;
  font-size: 21px; font-weight: 700; letter-spacing: -.6px; color: var(--ink-900);
}
.bd-txt p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--ink-600); }
.bd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.bd-chips a {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 15px;
  border-radius: var(--r-full);
  border: 1px solid var(--sky-b1);
  background: var(--surface);
  font-size: 13.5px; font-weight: 500; color: var(--sky-t3);
  transition: all .18s;
}
.bd-chips a:hover { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }

.bd-products {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 22px 0;
}
.bd-products a { display: block; }
.bp-th {
  display: block; aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden; background: var(--plate);
  transition: border-color .2s;
}
.bp-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 다크 — 흰 배경 제품 사진을 밝은 판(--plate) 위에 곱셈 합성해 경계를 지운다.
   isolation 은 합성을 판 안으로 가둔다(목업 theme.css 2절). 아래 썸네일들도 같다 */
:root[data-theme="dark"] .bp-th { isolation: isolate; }
:root[data-theme="dark"] .bp-th img { mix-blend-mode: var(--plate-blend); }
.bd-products a:hover .bp-th { border-color: var(--sky-b3); }
.bp-cap {
  display: block; margin-top: 7px;
  text-align: center;
  font-size: 12.5px; color: var(--ink-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-products a:hover .bp-cap { color: var(--sky-t3); }

/* ==========================================================================
   4-3. 사이트 바로가기 — 등록한 웹사이트를 결과 상단에
   ========================================================================== */
.sch-site { border-color: var(--sky-b1); }
.sc-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: var(--ink-300);
  transition: color .18s;
}
.sc-info:hover { color: var(--sky-t1); }
.sc-info .ico { width: 13px; height: 13px; }

.st-list li {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 16px 0;
}
.st-list li + li { border-top: 1px solid var(--line-soft); }
.st-list li:first-child { padding-top: 2px; }
.st-body { flex: 1 1 auto; min-width: 0; }
.st-from {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 13px;
}
.st-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--font-en);
  font-size: 9.5px; font-weight: 700; color: #fff;
}
.st-rpi { background: #C93B5D; }
.st-mkt { background: var(--sky-600); }
.st-odr { background: #2168AE; }
.st-from b { font-weight: 600; color: var(--ink-800); }
.st-url { color: var(--ink-400); }
.st-ad, .st-reg {
  display: inline-flex; align-items: center;
  height: 19px; padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 600;
}
.st-ad { background: var(--line-soft); color: var(--ink-400); }
.st-reg { background: var(--sky-100); color: var(--sky-t3); }

.st-tit {
  display: block; margin-top: 8px;
  font-size: 17.5px; font-weight: 600; line-height: 1.42; color: var(--sky-t3);
}
.st-tit:hover { text-decoration: underline; }
.st-desc {
  margin-top: 6px;
  font-size: 14px; line-height: 1.65; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.st-promo {
  display: flex; align-items: center; gap: 9px;
  margin-top: 11px; padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .2s, background .2s;
}
.st-promo:hover { border-color: var(--sky-b2); background: var(--sky-50); }
.st-promo-ico {
  flex: none;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: var(--r-xs);
  background: #FFF0EE; color: var(--point);
  font-size: 11px; font-weight: 700;
}
:root[data-theme="dark"] .st-promo-ico { background: #3B221F; }
.st-promo > span {
  flex: 1 1 auto; min-width: 0;
  font-size: 13.5px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-promo .ico { flex: none; width: 14px; height: 14px; color: var(--ink-300); }

.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.st-chips a {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px; color: var(--ink-600);
  transition: all .18s;
}
.st-chips a:hover { border-color: var(--sky-b2); color: var(--sky-t2); background: var(--sky-50); }

.st-thumb {
  flex: none; width: 116px; height: 116px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden; background: var(--plate);
  transition: border-color .2s;
}
.st-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .st-thumb { isolation: isolate; }
:root[data-theme="dark"] .st-thumb img { mix-blend-mode: var(--plate-blend); }
.st-list li:hover .st-thumb { border-color: var(--sky-b1); }

/* ==========================================================================
   5. 컬렉션 공통
   ========================================================================== */
.sch-sec {
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.sc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.sc-tit {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 18px; font-weight: 700; color: var(--ink-900);
}
.sc-count {
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700; color: var(--sky-t1);
}
.sc-more {
  display: inline-flex; align-items: center; gap: 3px;
  flex: none;
  font-size: 13px; color: var(--ink-400);
  transition: color .2s;
}
.sc-more .ico { width: 13px; height: 13px; stroke-width: 2.4; transition: transform .2s; }
.sc-more:hover { color: var(--sky-t2); }
.sc-more:hover .ico { transform: translateX(3px); }
.sc-body { padding: 18px 22px 22px; }

/* 보드DB 컬렉션은 시선이 먼저 가도록 강조 */
.sch-sec-board { border-color: var(--sky-b1); box-shadow: var(--sh-sm); }
.sch-sec-board .sc-head { background: linear-gradient(90deg, var(--sky-50), var(--surface)); }

/* ==========================================================================
   6-1. 보드DB
   ========================================================================== */
.scb-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.scb-list a { display: block; }
.scb-thumb {
  display: block; aspect-ratio: 640 / 448;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden; background: var(--plate);
  transition: border-color .2s, transform .25s;
}
.scb-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .scb-thumb { isolation: isolate; }
:root[data-theme="dark"] .scb-thumb img { mix-blend-mode: var(--plate-blend); }
.scb-list a:hover .scb-thumb { border-color: var(--sky-b2); transform: translateY(-3px); }
.scb-name {
  display: block; margin-top: 10px;
  font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink-900);
}
.scb-list a:hover .scb-name { color: var(--sky-t3); }
.scb-spec {
  display: block; margin-top: 4px;
  font-size: 12.5px; color: var(--ink-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scb-bot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.scb-bot > b { font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.scb-bot > b i { margin-left: 1px; font-size: 12px; font-weight: 500; color: var(--ink-500); }
.scb-score {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-600);
}
.scb-score .ico { width: 13px; height: 13px; fill: var(--amber); stroke: var(--amber); }

/* ==========================================================================
   6-2. 자료실
   ========================================================================== */
.scf-list li + li { margin-top: 4px; }
.scf-list a {
  display: flex; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  transition: background .18s;
}
.scf-list a:hover { background: var(--sky-50); }
.scf-ico {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--sky-400), var(--sky-600));
  color: #fff;
}
.scf-ico .ico { width: 19px; height: 19px; stroke-width: 2.2; }
.scf-body { flex: 1 1 auto; min-width: 0; }
.scf-body > strong {
  display: block;
  font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink-900);
}
.scf-list a:hover .scf-body > strong { color: var(--sky-t3); text-decoration: underline; }
.scf-desc {
  display: block; margin-top: 5px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-500);
}
.scf-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 7px;
  font-family: var(--font-en);
  font-size: 12px; color: var(--ink-400);
}

/* ==========================================================================
   6-3. 이미지
   ========================================================================== */
.sci-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sci-list a { display: block; }
.sci-list img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s, transform .25s;
}
.sci-list a:hover img { border-color: var(--sky-b3); transform: translateY(-3px); }
.sci-cap {
  display: block; margin-top: 6px;
  font-size: 12px; line-height: 1.45; color: var(--ink-400);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sci-list a:hover .sci-cap { color: var(--sky-t2); }

/* ==========================================================================
   6-4. 커뮤니티
   ========================================================================== */
.scp-list li {
  display: flex; gap: 16px;
  padding: 16px 0;
}
.scp-list li + li { border-top: 1px solid var(--line-soft); }
.scp-list li:first-child { padding-top: 2px; }
.scp-thumb {
  flex: none; width: 108px; height: 76px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden; background: var(--plate);
}
.scp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .scp-thumb { isolation: isolate; }
:root[data-theme="dark"] .scp-thumb img { mix-blend-mode: var(--plate-blend); }
.scp-body { flex: 1 1 auto; min-width: 0; }
.scp-from {
  display: inline-flex; align-items: center;
  height: 21px; padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 11.5px; font-weight: 600;
}
.scp-tit {
  display: block; margin-top: 7px;
  font-size: 17px; font-weight: 600; line-height: 1.42; color: var(--ink-900);
}
.scp-tit:hover { color: var(--sky-t3); text-decoration: underline; }
.scp-snip {
  margin-top: 6px;
  font-size: 14px; line-height: 1.65; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.scp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 9px;
  font-size: 12.5px; color: var(--ink-400);
}
.scp-meta em { color: var(--ink-500); font-weight: 500; }
.scp-meta i { display: inline-flex; align-items: center; gap: 3px; }
.scp-meta .ico { width: 13px; height: 13px; }

/* ==========================================================================
   6-5. 콘텐츠샵
   ========================================================================== */
.scs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.scs-list a { display: block; }
.scs-thumb {
  display: block; aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden; background: var(--plate);
  transition: border-color .2s, transform .25s;
}
.scs-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .scs-thumb { isolation: isolate; }
:root[data-theme="dark"] .scs-thumb img { mix-blend-mode: var(--plate-blend); }
.scs-list a:hover .scs-thumb { border-color: var(--sky-b2); transform: translateY(-3px); }
.scs-cate { display: block; margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--sky-t1); }
.scs-name {
  display: block; margin-top: 3px;
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scs-list a:hover .scs-name { color: var(--sky-t3); }
.scs-price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.scs-price .was { font-size: 12px; color: var(--ink-300); text-decoration: line-through; }
.scs-price b { font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.scs-price small { margin-left: 1px; font-size: 11.5px; font-weight: 500; color: var(--ink-500); }

/* ==========================================================================
   6-6. 지원센터
   ========================================================================== */
.scq-list li + li { border-top: 1px solid var(--line-soft); }
.scq-list a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 10px;
  border-radius: var(--r-sm);
  transition: background .18s;
}
.scq-list a:hover { background: var(--sky-50); }
.scq-tag {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 23px; padding: 0 8px; margin-top: 2px;
  border-radius: var(--r-xs);
  background: var(--sky-600); color: #fff;
  font-size: 11.5px; font-weight: 700;
}
.scq-body { flex: 1 1 auto; min-width: 0; }
.scq-body > strong {
  display: block;
  font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink-900);
}
.scq-list a:hover .scq-body > strong { color: var(--sky-t3); }
.scq-desc {
  display: block; margin-top: 4px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-500);
}
.scq-date {
  flex: none; margin-top: 3px;
  font-family: var(--font-en);
  font-size: 12px; color: var(--ink-400);
}

/* ==========================================================================
   6-7. 문서
   ========================================================================== */
.scd-list li + li { margin-top: 6px; }
.scd-list a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-md);
  transition: background .18s;
}
.scd-list a:hover { background: var(--sky-50); }
.scd-url {
  display: block;
  font-size: 12.5px; color: var(--mint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scd-tit {
  display: block; margin-top: 3px;
  font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--sky-t3);
}
.scd-list a:hover .scd-tit { text-decoration: underline; }
.scd-desc {
  margin-top: 5px;
  font-size: 13.5px; line-height: 1.65; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 하단 안내 */
.sch-foot {
  margin-top: 22px; padding: 18px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--sky-b2);
  border-radius: var(--r-md);
  font-size: 14.5px; color: var(--ink-500);
}
.sch-foot a { font-weight: 700; color: var(--sky-t2); text-decoration: underline; }
.sch-foot-ad { display: block; margin-top: 6px; font-size: 13.5px; }

/* ==========================================================================
   7. 우측 지식 패널
   ========================================================================== */
.sch-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.sch-card-ad { padding: 0; border: 0; background: none; box-shadow: none; display: grid; gap: 14px; }

/* 광고 카드 — 메인 사이드 광고 위젯(bf.ad)과 같은 .ad-box 마크업이다.
   그 스타일은 위젯 폴더(rb/rb.widget/bf.ad/style.css)로 옮겨 가 위젯이 놓인
   화면에서만 실린다. 검색은 혼자서도 서야 하므로(PACKAGE.md) 필요한 만큼을
   여기 둔다. 값은 위젯과 같고, 이 카드 밖으로 새지 않게 .sch-card-ad 로 묶었다. */
.sch-card-ad .ad-box {
  position: relative;
  display: block; padding: 22px 20px;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.sch-card-ad .ad-box:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.sch-card-ad .ad-1 { background: #1F669E; color: #fff; --ov1: rgba(10,44,76,.9); --ov2: rgba(34,116,176,.72); }
/* 둘째 광고 — 통합검색설정에서 사이드 광고를 여러 개 보이게 했을 때(위젯 bf.ad 와 같은 값) */
.sch-card-ad .ad-2 { background: #2B7FB8; color: #fff; --ov1: rgba(14,60,94,.88); --ov2: rgba(58,152,200,.68); }
.sch-card-ad .ad-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.sch-card-ad .ad-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sch-card-ad .ad-box:hover .ad-bg img { transform: scale(1.06); }
.sch-card-ad .ad-box::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, var(--ov1), var(--ov2));
}
.sch-card-ad .ad-box::after {
  content: ''; position: absolute; right: -30px; bottom: -40px; z-index: 1;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.sch-card-ad .ad-label {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
  font-family: var(--font-en);
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  opacity: .7;
}
.sch-card-ad .ad-box strong {
  position: relative; z-index: 2;
  display: block; margin-top: 10px;
  font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.5px;
}
.sch-card-ad .ad-box em {
  position: relative; z-index: 2;
  display: block; margin-top: 7px;
  font-size: 12.5px; opacity: .8;
}

.sc-side-tit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 13px; margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 700; color: var(--ink-900);
}
.sc-side-time { font-size: 11.5px; font-weight: 400; color: var(--ink-400); }

/* 지식 카드 */
.sch-know { border-color: var(--sky-b1); box-shadow: var(--sh-sm); }
.sk-label {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 11.5px; font-weight: 700;
}
.sk-top { display: flex; gap: 13px; margin-top: 14px; }
.sk-thumb {
  flex: none; width: 84px; height: 62px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden; background: var(--plate);
}
.sk-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .sk-thumb { isolation: isolate; }
:root[data-theme="dark"] .sk-thumb img { mix-blend-mode: var(--plate-blend); }
.sk-txt { flex: 1 1 auto; min-width: 0; }
.sk-txt strong {
  display: block;
  font-size: 18px; font-weight: 800; letter-spacing: -.5px; color: var(--ink-900);
}
.sk-txt em { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }
.sk-score {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink-700);
}
.sk-score .ico { width: 14px; height: 14px; fill: var(--amber); stroke: var(--amber); }
.sk-score i { font-weight: 400; color: var(--ink-300); }
.sk-desc {
  margin-top: 13px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-600);
}
.sk-spec {
  margin-top: 14px; padding: 12px 14px;
  background: var(--sky-50);
  border-radius: var(--r-sm);
}
.sk-spec > div { display: flex; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.sk-spec dt { flex: none; width: 52px; color: var(--ink-400); }
.sk-spec dd { flex: 1 1 auto; min-width: 0; color: var(--ink-700); }
.sk-price {
  margin-top: 14px;
  text-align: right;
  font-size: 13px; color: var(--ink-500);
}
.sk-price b {
  margin-left: 6px;
  font-size: 22px; font-weight: 800; color: var(--point); letter-spacing: -.5px;
}
.sk-price i { font-size: 13px; color: var(--ink-600); }
.sk-btns { display: flex; gap: 6px; margin-top: 12px; }
.sk-btns .bf-btn { flex: 1 1 0; height: 40px; }

/* 함께 찾는 보드 */
.sf-list li + li { border-top: 1px solid var(--line-soft); }
.sf-list a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 4px;
  border-radius: var(--r-xs);
  transition: background .18s;
}
.sf-list a:hover { background: var(--sky-50); }
.sf-thumb {
  flex: none; width: 46px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  overflow: hidden; background: var(--plate);
}
.sf-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .sf-thumb { isolation: isolate; }
:root[data-theme="dark"] .sf-thumb img { mix-blend-mode: var(--plate-blend); }
.sf-txt { flex: 1 1 auto; min-width: 0; }
.sf-txt strong {
  display: block;
  font-size: 13.5px; font-weight: 600; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-list a:hover .sf-txt strong { color: var(--sky-t3); }
.sf-txt em { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-400); }

/* 인기 검색어 */
.sr-rank li { height: 32px; }
.sr-rank li em { width: 18px; }

/* ==========================================================================
   7-2. 탭별 결과 화면
   ========================================================================== */
/* 검색 전용 필터 — 카드 톤을 컬렉션과 맞춘다 */
.sch-filter {
  padding: 4px 22px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.sch-filter .filter-row:last-of-type { border-bottom: 0; }

/* 탭 화면은 한 컬렉션만 크게 */
.scb-list-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
.scs-list-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 16px; }
.sci-list-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sci-list-wide img { aspect-ratio: 4 / 3; }
.sci-from {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--sky-t1);
}

/* 이미지 탭은 사이드바 없이 전체 폭 */
.sch-wrap-full { grid-template-columns: minmax(0, 1fr); }

.sch-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 52px; margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 15px; font-weight: 600; color: var(--ink-600);
  transition: all .2s;
}
.sch-more-btn:hover { border-color: var(--sky-b2); color: var(--sky-t2); background: var(--sky-50); }
.sch-more-btn .ico { width: 16px; height: 16px; }

/* ==========================================================================
   8. 반응형
   ========================================================================== */
@media (max-width: 1280px) {
  .sch-wrap { grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; }
  .sci-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sci-list-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scb-list-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scs-list-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bd-main { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
  .bd-txt strong { font-size: 19px; }
  .st-thumb { width: 96px; height: 96px; }
}

@media (max-width: 1080px) {
  .sch-wrap { grid-template-columns: minmax(0, 1fr); }
  .sch-side {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; align-items: start;
  }
  .sch-know { grid-column: span 2; }
  .sch-card-ad { grid-column: span 2; }
  .scb-list, .scs-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scb-list-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scs-list-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sci-list-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* 검색 헤더 — 검색창을 로고 아랫줄로 흘려보낸다.
     absolute 로 띄우면 바로 뒤의 .sch-tab 과 같은 위치에서 겹친다. */
  .bf-search-header .bf-header-main .bf-inner {
    height: auto; min-height: 58px;
    flex-wrap: wrap; gap: 8px;
    padding-bottom: 10px;
  }
  .bf-search-header .bf-header-search {
    display: block;
    order: 10; flex: 1 1 100%;
    max-width: none;
  }
  .bf-search-header .bf-search-box { height: 46px; border-width: 1px; }
  .bf-search-header .bf-rank-roll { display: none; }
  .bf-search-header .bf-search-input { height: 42px; padding-left: 16px; font-size: 15px; }
  .bf-search-header .bf-search-submit { width: 38px; height: 38px; }
  .bf-search-header .bf-search-submit .ico { width: 19px; height: 19px; }
  .bf-search-header .bf-search-keyword { display: none; }
  .bf-search-header .bf-btn-mo-search { display: none; }

  .sch-tab { overflow-x: auto; scrollbar-width: none; }
  .sch-tab::-webkit-scrollbar { display: none; }
  .sch-tab .bf-inner { padding: 0 14px; }
  .sch-tab ul { flex-wrap: nowrap; }
  .sch-tab li a { height: 44px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
  .sch-tab li a::after { left: 14px; right: 14px; }
  .sch-tab-opt { display: none; }

  .sch-wrap { padding-top: 14px; padding-bottom: 30px; gap: 14px; }
  .sch-side { grid-template-columns: minmax(0, 1fr); }
  .sch-know, .sch-card-ad { grid-column: auto; }

  .sch-sum { flex-wrap: wrap; padding-bottom: 12px; }
  .sch-related { flex-direction: column; gap: 9px; padding: 14px 16px; }
  .sr-label { padding-top: 0; }
  .sr-chips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%; scrollbar-width: none; }
  .sr-chips::-webkit-scrollbar { display: none; }
  .sr-chips a { flex: none; }

  .sc-head { padding: 14px 16px 12px; }
  .sc-tit { font-size: 16.5px; }
  .sc-body { padding: 14px 16px 18px; }

  .scb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .scs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .sci-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sci-cap { -webkit-line-clamp: 1; }

  .scf-list a { padding: 10px; gap: 11px; }
  .scf-ico { width: 34px; height: 34px; }
  .scf-body > strong { font-size: 14.5px; }
  .scf-desc { font-size: 13px; }

  .scp-list li { gap: 12px; padding: 14px 0; }
  .scp-thumb { width: 84px; height: 60px; }
  .scp-tit { font-size: 15.5px; }
  .scp-snip { font-size: 13.5px; }

  .scq-list a { padding: 11px 6px; gap: 9px; flex-wrap: wrap; }
  .scq-date { flex: 1 1 100%; margin-top: 0; }
  .scd-tit { font-size: 15.5px; }

  .sch-foot { font-size: 13.5px; padding: 15px; }

  /* ----- 브랜드 검색 ----- */
  .bd-head { padding: 14px 16px 12px; }
  .bd-name { font-size: 17px; }
  .bd-sub { font-size: 13.5px; }
  .bd-notice { margin: 12px 16px 0; padding: 10px 13px; gap: 8px; }
  .bd-notice > span { font-size: 13.5px; }
  .bd-main { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 14px 16px 0; }
  .bd-visual { aspect-ratio: 16 / 9; }
  .bd-txt { padding-top: 0; }
  .bd-txt strong { font-size: 18px; }
  .bd-txt p { font-size: 13.5px; }
  .bd-chips a { height: 32px; padding: 0 13px; font-size: 13px; }
  .bd-products { margin: 16px 16px 0; gap: 8px; }
  .bp-cap { font-size: 11.5px; }

  /* ----- 사이트 바로가기 ----- */
  .st-list li { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
  .st-body { flex: 1 1 100%; order: 2; }
  .st-thumb { order: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .st-thumb img { object-fit: cover; }
  .st-tit { font-size: 16px; }
  .st-desc { font-size: 13.5px; }
  .st-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .st-chips::-webkit-scrollbar { display: none; }
  .st-chips a { flex: none; }

  /* ----- 탭별 결과 ----- */
  .sch-filter { padding: 2px 16px 12px; }
  .scb-list-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .scs-list-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .sci-list-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sch-more-btn { height: 46px; font-size: 14px; }
}

@media (max-width: 600px) {
  .scb-list, .scs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sci-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-top { gap: 11px; }
  .sk-thumb { width: 70px; height: 52px; }
  .sk-txt strong { font-size: 16px; }
}

/* ==========================================================================
   9. 이식 이후 보탠 것

   목업에는 없지만 실제 데이터로 돌리면 필요한 것들만 여기 둔다.
   위쪽(1~8절)은 port_search_css.py 가 목업에서 다시 만들므로 손대지 말 것.
   ========================================================================== */

/* 사진 없는 카드 — 목업은 모든 항목에 사진이 있지만 실제 글은 그렇지 않다.
   빈 네모로 두면 깨져 보여 아이콘 한 장을 대신 깐다. */
.scb-thumb.is-empty,
.scs-thumb.is-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--sky-50);
  color: var(--sky-b3);
}
.scb-thumb.is-empty .ico,
.scb-thumb.is-empty .bf-ico,
.scs-thumb.is-empty .ico,
.scs-thumb.is-empty .bf-ico { width: 34px; height: 34px; stroke-width: 1.4; }

/* 탭 옆 건수 */
.sch-tab li a i {
  margin-left: 5px;
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; color: var(--ink-400);
}
.sch-tab li.on a i { color: var(--sky-t1); }

/* 게시판 칩 옆 건수 */
.filter-chip i {
  margin-left: 5px;
  font-family: var(--font-en);
  font-size: 11.5px; font-weight: 700; opacity: .65;
}

/* 기간 select 를 감싼 폼 */
.sch-period { display: flex; align-items: center; gap: 6px; margin: 0; }

/* 결과 없음 · 검색어 없음 */
.sch-empty {
  padding: 64px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.sch-empty > .ico,
.sch-empty > .bf-ico {
  width: 42px; height: 42px;
  color: var(--sky-b3);
  stroke-width: 1.6;
}
.sch-empty strong {
  display: block; margin-top: 14px;
  font-size: 18px; font-weight: 700; color: var(--ink-900);
}
.sch-empty strong b { color: var(--sky-t2); }
.sch-empty p { margin-top: 8px; font-size: 14.5px; color: var(--ink-500); }
.sch-empty .sr-chips { justify-content: center; margin-top: 22px; }
.sch-empty .bf-btn { margin-top: 20px; }

/* --------------------------------------------------------------------------
   사이드 랭킹의 기본형.

   목업에서는 이 규칙이 헤더 쪽(style.css 3절 '인기검색어 패널')에 있고
   검색 페이지의 .sr-rank 가 그걸 물려받는다. 우리 테마 헤더는 클래스를
   .bf-rank-* 로 바꿔 썼으므로 물려받을 게 없다. 검색 화면이 혼자 서도록
   여기에 옮겨 둔다. 값은 목업과 같다.
   -------------------------------------------------------------------------- */
.rank-list { flex: 1 1 0; min-width: 0; }
.rank-list li { display: flex; align-items: center; gap: 10px; height: 34px; }
.rank-list li em {
  flex: none; width: 16px;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700; color: var(--ink-300); text-align: center;
}
.rank-list li:nth-child(-n+3) em { color: var(--sky-t1); }
.rank-list li a {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-list li a:hover { color: var(--sky-t2); text-decoration: underline; }

.st { flex: none; font-size: 11px; font-weight: 700; }
.st-up { color: var(--point); }
.st-up::before { content: '\25B2'; font-size: 7px; margin-right: 2px; }
.st-down { color: var(--sky-t1); }
.st-down::before { content: '\25BC'; font-size: 7px; margin-right: 2px; }
.st-same { color: var(--ink-300); }
.st-new { color: var(--mint); }

/* --------------------------------------------------------------------------
   상세 조건 — 목업 sub.css 11절 '검색 필터'.

   서브페이지 공통 컴포넌트라 search.css 에 없었다. 값은 목업 그대로다.
   다만 목업은 칩이 <button> 이고 우리는 <a> 다. 주소만 바꾸면 되는 조건에
   자바스크립트를 끼울 이유가 없고, 링크라야 새 탭·뒤로가기·검색엔진이
   모두 정상으로 동작한다. <a> 는 inline 이라 height 가 안 먹으므로
   inline-flex 로 세워 준다.
   -------------------------------------------------------------------------- */
.filter-box {
  padding: 6px 24px 18px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.filter-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.filter-row:last-child { border-bottom: 0; }
.filter-label {
  flex: none; width: 84px; padding-top: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink-700);
}
.filter-chips { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--sky-50);
  border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-600);
  transition: all .18s;
}
.filter-chip:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.filter-chip.on {
  background: var(--sky-500); border-color: var(--sky-500);
  color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px rgba(62,159,222,.26);
}

@media (max-width: 900px) {
  .filter-box { padding: 4px 16px 14px; }
  .filter-row { flex-direction: column; gap: 8px; padding: 12px 0; }
  .filter-label { width: auto; padding-top: 0; font-size: 13.5px; }
  .filter-chips {
    flex-wrap: nowrap; overflow-x: auto;
    /* flex 아이템 기본값 min-width:auto 를 풀어야 컨테이너 폭으로 줄어든다 */
    min-width: 0; max-width: 100%;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   페이지네이션 — 목업 sub.css 8절.

   서브페이지 공통 컴포넌트라 search.css 에 없었다. 값은 목업 그대로다.
   -------------------------------------------------------------------------- */
.paging {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 26px;
}
.paging a {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px;
  border-radius: var(--r-sm);
  font-family: var(--font-en);
  font-size: 14px; font-weight: 600; color: var(--ink-500);
  transition: all .18s;
}
.paging a:hover { background: var(--sky-50); color: var(--sky-t2); }
.pg-num { display: flex; gap: 2px; margin: 0 6px; }
.pg-num a.on {
  background: var(--sky-500); color: #fff;
  box-shadow: 0 3px 10px rgba(62,159,222,.3);
}
.pg-arw, .pg-edge {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-400);
}
.pg-edge { gap: 0; }
.pg-edge .ico:last-child { margin-left: -9px; }
.paging .ico { width: 15px; height: 15px; stroke-width: 2.2; }

@media (max-width: 600px) {
  /* 좁은 화면에서는 번호가 줄바꿈되며 세로로 길어진다 — 가로로 밀어 본다 */
  .pg-num { overflow-x: auto; scrollbar-width: none; }
  .pg-num::-webkit-scrollbar { display: none; }
  .paging a { min-width: 32px; height: 32px; font-size: 13px; }
}

/* 건수 상한 안내 — 흔한 낱말은 끝까지 세지 않고 "1,000+" 로 적는다 */
.sch-sum-note {
  margin-left: 8px;
  font-size: 12.5px; color: var(--ink-400);
}

/* 관리자에게만 보이는 측정치 */
.sch-debug {
  max-width: var(--bf-inner);
  margin: 0 auto 30px;
  text-align: right;
  font-family: var(--font-en);
  font-size: 12px; color: var(--ink-400);
}