:root{
  --border:#ddd;
  --control-h:42px;
  --chip-bg:#f5f7fb;
  --chip-bd:#e6eaf6;
  --chip-tx:#3b4b83;
}

/* 공통 css의 기본 마진 무효화 */
.search-row > input,
.search-row > button,
.search-row > .outline.search-btn,
.search-row > .search-input { margin: 0 !important; }



/* 검색 바 */
.search-row{
  display:flex; gap:8px; align-items:center;
}
.search-row .search-input{
  flex:1; height:var(--control-h); padding:0 12px; font-size:15px;
  border:1px solid var(--border); border-radius:8px; line-height:normal; box-sizing:border-box;
}
.search-row .search-btn{
    width:auto !important;
  height:var(--control-h); padding:0 16px; font-size:15px;
}

/* 필터 바 */
.brand-filters{
  margin-top:12px; padding:10px; border:1px solid #eee; border-radius:12px; background:#fff;
}
.brand-filters .row{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:6px 0; }
.brand-filters .lab{ font-weight:700; color:#374151; margin-right:6px; }
.brand-filters .chk{ display:inline-flex; gap:6px; align-items:center; }
.brand-filters .seg{ display:inline-flex; gap:6px; align-items:center; padding:4px 10px; border:1px solid #eee; border-radius:999px; background:#fafafa; }
.brand-filters select{ height:34px; padding:0 10px; border-radius:8px; border:1px solid #ddd; background:#fff; }

/* 결과 리스트 */
.results-grid{ margin-top:14px; }
.results-list{ display:flex; flex-direction:column; gap:10px; }
.result-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:#fff; border-radius:14px; border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.05); cursor:pointer; transition:.12s ease;
  text-align:left;
}
.result-row:hover{ transform: translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.08); }
.thumb{ width:56px; height:56px; border-radius:10px; background:#f3f4f6; overflow:hidden; display:grid; place-items:center; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.body{ flex:1 1 auto; min-width:0; }
.title{ font-size:15px; font-weight:700; color:#111; line-height:1.3; }
.meta{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; font-size:12px; color:#6b7280; }
.meta-sub{ color:#8a8f98; }
.right{ display:flex; gap:6px; align-items:center; }

.chip{
  padding:2px 8px; border-radius:999px; background:var(--chip-bg);
  color:var(--chip-tx); border:1px solid var(--chip-bd); font-size:12px;
}
.chip.danger{ background:#fff3f3; color:#ab1f1f; border-color:#ffdedd; }
.chip.good{ background:#eaf7ee; color:#1a7f41; border-color:#d9efdf; }

.loading,.empty,.error{ padding:12px; color:#6b7280; }
.error{ color:#b91c1c; }

/* 페이저 */
.pager{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:14px; }
.pager .btn{
  padding:8px 14px; border:1px solid #ddd; background:#fff; border-radius:8px; cursor:pointer;
}
.is-hidden{ display:none !important; }

/* 디테일 패널 (오버레이) */
.brand-detail{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  display: grid; place-items: center;
  padding: 16px;
  z-index: 1000;
}
.bd-body{
  width: min(920px, 96vw);
  max-height: 86vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding: 16px 16px 20px;
}
.btn-close{
  position:absolute; right: max(2vw,14px); top: max(10px,14px);
  width:36px; height:36px; border-radius:50%;
  border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-size:20px;
}

.bd-head{ margin-bottom:8px; }
.bd-title{ font-size:20px; font-weight:800; }
.bd-sub{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.bd-logo{ height:28px; object-fit:contain; }
.tone{ width:16px; height:16px; display:inline-block; border-radius:4px; border:1px solid rgba(0,0,0,.08); }

.bd-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

.section{ margin-top:14px; }
.sec-title{ font-weight:800; margin-bottom:8px; }

.info-table{ border:1px solid #eef1f5; border-radius:12px; overflow:hidden; background:#fff; }
.info-row{ display:flex; gap:0; border-top:1px solid #eef1f5; }
.info-row:first-child{ border-top:0; }
.info-row .k{ flex:0 0 140px; font-weight:700; color:#374151; background:#fafafa; padding:10px 12px; }
.info-row .v{ flex:1 1 auto; padding:10px 12px; color:#111827; }

.recall-list{ display:flex; flex-direction:column; gap:10px; }
.recall-row{ border:1px solid #eef1f5; border-radius:12px; padding:10px 12px; background:#fff; }
.r-head{ display:flex; gap:10px; align-items:center; }
.r-date{ font-weight:700; color:#374151; }
.r-link{ margin-left:auto; font-size:12px; }
.r-reason{ margin-top:4px; }
.r-countries{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.r-details{ margin-top:6px; color:#4b5563; }

/* ===== [추가] 세그먼트(대상 라디오) 활성 시각화 ===== */
.brand-filters .seg.on{
  background:#fff !important;
  border-color:#e5e7eb !important;
  box-shadow:0 1px 3px rgba(0,0,0,.08) !important;
}

/* ===== [보강] 결과행(button)에 전역 버튼 스타일이 덮이지 않도록 ===== */
.results-list .result-row{
  width:auto !important;            /* 전역 100% 폭 방지 */
  margin:0 !important;              /* 전역 마진 초기화 */
  text-align:left !important;       /* 가운데 정렬 강제 제거 */
  border:none !important;           /* 전역 버튼 보더 제거 */
  background:#fff !important;       /* 일관 배경 */
}
.results-list .result-row:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(64,108,180,.18) !important;
}

/* 우측 화살표 표시(UX용) */
.results-list .result-row::after{
  content:"›";
  font-size:20px;
  color:#c0c4cc;
  margin-left:8px;
}

/* ===== [선택] 자동완성 드롭다운(이미 쓰고 있으면 유지) ===== */
#autocompleteListContainer { position: relative; }
.autocomplete-list{
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border:1px solid #ccc;
  max-height:200px; overflow-y:auto; z-index:1000;
  list-style:none; margin:0; padding:0;
}
.autocomplete-item{ padding:6px 10px; cursor:pointer; }
.autocomplete-item:hover{ background:#f5f7ff; }

/* ===== 필터: width 자동 강제 ===== */
.brand-filters select,
.brand-filters .seg,
.brand-filters .chk,
.brand-filters .lab {
  width: auto !important;   /* 공통 CSS의 100% 폭 오버라이드 */
}

/* ===== 카테고리 바(스크롤 행) ===== */
#catBarLarge, #catBarSmall{
  display:flex;
  gap:8px;
  padding:8px 0 2px;
  overflow-x:auto;
  flex-wrap:nowrap;               /* 한 줄 고정 */
  -ms-overflow-style:none;        /* IE/Edge */
  scrollbar-width:none;           /* Firefox */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#catBarLarge:active, #catBarSmall:active { cursor: grabbing; }
#catBarLarge::-webkit-scrollbar, #catBarSmall::-webkit-scrollbar { display:none; }

/* ===== 카테고리 칩(요청한 디자인 그대로) ===== */
#catBarLarge .cat-chip, #catBarSmall .cat-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 8px 14px !important;
  border-radius: 999px;
  border: 1px solid #e6eaf6;
  background: #f5f7fb;
  color: #3b4b83;
  white-space: nowrap;
  flex: 0 0 auto !important;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
#catBarLarge .cat-chip:hover, #catBarSmall .cat-chip:hover { transform: translateY(-1px); }
#catBarLarge .cat-chip.active, #catBarSmall .cat-chip.active {
  background:#3b4b83; color:#fff; border-color:#3b4b83;
}

/* (옵션) “전체” 칩은 톤 약하게 */
#catBarLarge .cat-chip.all, #catBarSmall .cat-chip.all {
  background:#f9fafb; color:#374151;
}

/* 활성 칩: 어떤 전역 버튼/링크 스타일보다 우선 적용 */
#catBarLarge .cat-chip.active,
#catBarSmall .cat-chip.active,
#catBarLarge .cat-chip.active:hover,
#catBarSmall .cat-chip.active:hover,
#catBarLarge .cat-chip.active:focus,
#catBarSmall .cat-chip.active:focus {
  background:#3b4b83 !important;
  border-color:#3b4b83 !important;
  color:#fff !important;
}

/* 칩 안에 a, span 등 자식 색도 강제 상속 */
#catBarLarge .cat-chip.active *,
#catBarSmall .cat-chip.active * {
  color: inherit !important;
}

/* 혹시 전역 .btn/.outline 가 덮어쓰면… */
#catBarLarge .cat-chip.active.btn,
#catBarSmall .cat-chip.active.btn,
#catBarLarge .cat-chip.active.outline,
#catBarSmall .cat-chip.active.outline {
  background:#3b4b83 !important;
  border-color:#3b4b83 !important;
  color:#fff !important;
}