/* ==========================================================================
   04_list.html (게시글 목록 화면) 전용 스타일
   ========================================================================== */

/* ---------- 검색창 + 상세검색 버튼 + 정렬 버튼이 한 줄에 있는 목록 상단 툴바 ---------- */
.list-toolbar { display:flex; align-items:center; justify-content:space-between; margin-top:24px; flex-wrap:wrap; gap:12px; }

/* ---------- "상세검색 ▾" 버튼 + 클릭하면 위로 펼쳐지는 상세검색 패널 (페이징 바로 위라 아래로 펼치면 화면 밖으로 나감) ---------- */
.adv-search-toggle { position:relative; flex-shrink:0; } /* 위 패널을 이 버튼 기준으로 절대위치 배치하기 위한 기준점 */
.adv-search-toggle > button { white-space:nowrap; }
.adv-search-panel {
  display:none; position:absolute; bottom:44px; right:0; z-index:10;
  background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:16px; width:280px;
}
.adv-search-panel.open { display:block; } /* 버튼 클릭 시 JS가 open 클래스를 붙여줌 */
.adv-search-panel label { display:block; font-size:12px; color:var(--text-2); margin:10px 0 4px; }
.adv-search-panel input, .adv-search-panel select {
  width:100%; background:var(--bg-3); border:1px solid var(--border); border-radius:6px; padding:8px; color:#fff;
}

/* ---------- 최신순/좋아요순/하이라이트/조회수순 정렬 버튼 그룹 ---------- */
.sort-group { display:flex; gap:6px; }
.sort-group button { padding:8px 14px; border-radius:6px; border:1px solid var(--border); background:var(--bg-2); color:var(--text-1); font-size:13px; }
.sort-group button.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- 네비게이션 바 - 하이라이트 전용 불꽃 효과 ----------
   [이동] main 화면(main.css)은 list.css를 안 불러와서 효과가 안 보이던 문제로,
   common.css로 옮김(모든 화면이 common.css는 불러오므로 공통 적용됨).
   3개 규칙(기본/active/keyframes)을 나누지 않고 원본 그대로 이동. 아래는 이전 코드.
.category-nav ul li a.highlight {
  1. 불꽃 그라데이션 텍스트 (딥레드 -> 주황 -> 노랑)
  background: linear-gradient(180deg, #ff0000 0%, #ff6600 50%, #ffcc00 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;

  2. 기존 다른 메뉴들과 위치/크기 정렬 맞춤
  font-weight: 700 !important;
  display: inline-block;

  3. 불꽃 일렁임 네온 애니메이션
  animation: flameGlow 1.2s infinite alternate ease-in-out !important;
}

2. '하이라이트'버튼만 active 되었을 때 추천 배경색(흰색) 적용
.sort-group .highlight.active,
.sort-group button.highlight.active,
.category-nav ul li a.highlight.active {
  하이라이트 버튼 전용 배경
  background: #ffffff !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;

  다크 배경용 텍스트
  color: #ffaa00 !important;
}

불꽃 빛남 키프레임 (레이아웃 틀어짐을 방지하기 위해 크기 변형 제거)
@keyframes flameGlow {
  0% {
    filter: drop-shadow(0 0 1px rgba(255, 68, 0, 0.5));
  }
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 102, 0, 0.9))
            drop-shadow(0 0 12px rgba(255, 0, 0, 0.7));
  }
}
*/

/* ---------- 우측 상단 "✎ 글쓰기" 버튼을 감싸는 영역 (비로그인 시엔 로그인 유도 버튼으로 대체) ---------- */
.write-btn-wrap { margin-top:16px; text-align:right; }

/* ---------- 하이라이트 정렬 시 격자(그리드) 카드형 ---------- */
.highlight-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}
.highlight-card {
  display:flex;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  background:var(--bg-2);
  color:var(--text-1);
  text-decoration:none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.highlight-card:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,0.25);
}
.highlight-thumb {
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--bg-3);
  display:flex;
  align-items:center;
  justify-content:center;
}
.highlight-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.highlight-thumb-empty {
  color:var(--text-2);
  font-size:13px;
}
.highlight-content {
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.highlight-title {
  font-weight:600;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
.highlight-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--text-2);
  font-size:12px;
}
.highlight-meta span:first-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.highlight-empty {
  grid-column:1 / -1;
  text-align:center;
  padding:50px 0;
  color:var(--text-2, #888);
}

@media (max-width: 1200px) {
  .highlight-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .highlight-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .highlight-grid { grid-template-columns:repeat(1, minmax(0, 1fr)); }
}