/* 검색 결과를 한 줄에 여러 카드로 나열하기 */
    .search-results {
    justify-content: center;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 24px;
      padding: 0;
      box-sizing: border-box;
    }

    
  .search-results .result-item,
  .search-results .article-card,
  .search-results .topic-card,
  .search-results .youtube-card {
      flex: 0 0 clamp(210px, 20vw, 240px);
      max-width: clamp(210px, 20vw, 240px);
      margin: 2px;
    }

.detail-panel.active ~ .container .search-results .result-item {
  padding: 2px;
  max-width: clamp(180px, 18vw, 220px);
}
.detail-panel.active ~ .container .search-results  {
justify-content: flex-start;
}
.detail-panel {
  width: 37.5%;
}
/* ── 필터 바 전체 레이아웃 ─────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

/* ── 공통: Select 기본 스타일 리셋 및 폰트 적용 ── */
.filter-bar select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-color);
  cursor: pointer;
}

/* ── 섹터/기간 드롭다운 공통 스타일 ───────────── */

#filter-period {
  padding: 6px 32px 6px 12px; /* 여유 공간 확보 */
  /* border: 1px solid var(--border-color); */
  border-radius: 4px;
  /* background-color: var(--light-gray); */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3csvg%20width%3d%2210%22%20height%3d%227%22%20viewBox%3d%220%200%2010%207%22%20xmlns%3d%22http://www.w3.org/2000/svg%22%3e%3cpath%20d%3d%22M0%200l5%207%205-7z%22%20fill%3d%22%23666%22/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 7px;
  transition: border-color 0.2s, background-color 0.2s;
  border : none;
}

/* ── 호버/포커스 시 강조 효과 ───────────────────── */
#filter-sector:hover,
#filter-period:hover,
#filter-sector:focus,
#filter-period:focus {
  border-color: var(--primary-color);
  background-color: #ffffff;
  outline: none;
}


   /* ── 섹터 체크박스 그룹 ── */
  .filter-sector label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.95rem;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 4px;
      transition: background-color 0.2s;
    }
    .filter-sector label:hover {
      background-color: var(--light-gray);
    }
    .filter-sector input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }


    .filter-sector input[type="checkbox"] {
  /* 체크박스 내부 체크 색상(엑센트 컬러)을 변수값으로 설정 */
  accent-color: var(--primary-color);

  /* (선택) 기본 크기를 약간 키워서 잘 보이도록 조정 */
  width: 18px;
  height: 18px;
}
@media (max-width: 768px) {
    .search-results .result-item,
    .search-results .article-card,
    .search-results .topic-card,
    .search-results .youtube-card {
      max-width: 45%;
      scroll-snap-align: start; /* 다음 카드가 왼쪽에 슬쩍 보여요 */    
      box-sizing: border-box;
      padding: 2px;
      margin: 0;
      width: 100vw;
      cursor: pointer; /* 클릭 가능하게 */
    }
.search-results .skeleton-box {
      max-width: 45%;
      box-sizing: border-box;
      padding: 2px;
      margin: 0;
      width: 100vw;
}

  .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 4px;
}
  .filter-sector label {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 12px;
      cursor: pointer;
      padding: 3px 6px;
      border-radius: 4px;
      transition: background-color 0.2s;
    }
    #filter-period {
      font-size: 12px;
    }
}