/* ═══════════════════════════════════════════════════════════════
   yeobak-story.css — story.php 인라인 <style>에서 분리 (2026-08-29)

   [적용 방법 — 2026-08-29 변경]
   assets/css/yeobak-story.css 로 올리기만 하면 됩니다.
   story.php가 theme-3 링크 "아래"에서 이 파일을 직접 링크하도록 바꿨습니다
   (수동 병합 단계가 누락되면 칩·배너 스타일이 통째로 풀리는 사고가 실제로 발생).
   theme-3.min.css에 병합(cat >>)을 이미 하셨다면 그대로 둬도 됩니다 —
   이 파일이 뒤에 로드되며 최신 규칙으로 덮어쓰므로 충돌·부작용 없습니다.

   ⚠ A 방식은 이 스타일이 전 페이지에 로드됩니다. 클래스가 스토리 전용
     (.region-pill, .theme-pill, .story-* 등)이라 충돌은 없지만,
     다른 페이지의 같은 클래스 요소에도 적용된다는 점만 인지하세요.
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
     필터 2줄 분리 (유형 / 테마) + 개수 뱃지

     기존엔 관광지·맛집·숙박·축제(= 유형, 상호배타)와
     힐링·역사(= 테마, 유형과 직교)가 한 줄 단일선택으로 섞여 있어
     "관광지 + 힐링" 같은 교집합을 고를 수 없었다.
     층위를 2줄로 분리하고 AND로 조합되게 바꾼다.
  ══════════════════════════════════════════════════════════ */
  .filter-stack{ display:flex; flex-direction:column; gap:8px; }
  .filter-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .filter-line-label{
    flex:0 0 auto; font-size:12px; font-weight:700; color:#7a8a7a;
    letter-spacing:.02em; min-width:30px;
  }

  /* 칩 안의 개수 뱃지 — "눌러보기 전엔 0건인지 모른다" 문제 해결 */
  .cat-pill .pill-count,
  .region-pill .pill-count,
  .theme-pill .pill-count{
    display:inline-block; margin-left:5px; font-size:11px;
    font-weight:600; opacity:.65; font-variant-numeric:tabular-nums;
  }

  /* 결과 0건 조합은 아예 못 누르게 (헛클릭 → 빈 화면 방지) */
  .cat-pill.is-empty,
  .region-pill.is-empty,
  .theme-pill.is-empty{
    opacity:.35; cursor:not-allowed; pointer-events:none;
    text-decoration:line-through; text-decoration-thickness:1px;
  }

  /* 지역·테마 칩 — 유형 칩(.cat-pill)과 동일한 룩으로 통일 (2026-08-29 요청 반영)
     기존엔 점선 테두리로 "가볍게" 구분했으나, 세 줄이 같은 필터라는 인지가 우선. */
  .region-pill,
  .theme-pill{
    padding:7px 16px; border-radius:999px; cursor:pointer;
    border:1px solid #dbe4dd; background:#fff; color:#33413a;
    font-size:13px; font-weight:500; line-height:1.4;
    transition:background .18s, color .18s, border-color .18s;
  }
  .region-pill:hover,
  .theme-pill:hover{ background:#eef4ef; border-color:#c8d6cc; }
  .region-pill.active,
  .theme-pill.active{
    background:#1F3D2B; border-color:#1F3D2B; color:#fff; font-weight:600;
  }
  .region-pill.active .pill-count,
  .theme-pill.active .pill-count{ opacity:.85; }

  /* 마켓 바로가기 칩 — 필터가 아니라 "이동"임을 점선 테두리로 살짝 구분 */
  .cat-pill-link{ border-style:dashed !important; }
  .cat-pill-link:hover{ background:#eaf4ee; }

  @media (max-width: 575.98px){
    .filter-line-label{ min-width:100%; margin-bottom:-2px; }
  }

  /* 카드 "여행계획 담기" 버튼 — 담김 상태 시각 강조 (양방향 sync 대응) */
  .card-planner-btn{
    transition: color 0.18s, background 0.18s, border 0.18s, padding 0.18s;
  }
  .card-planner-btn.is-added{
    color: #fff;
    background: #1a3a2a;
    border: 1.5px solid #1a3a2a;
    border-radius: 14px;
    padding: 4px 11px 3px;
    font-weight: 600;
  }
  .card-planner-btn.is-added:hover{
    background: #122a1e;
    border-color: #122a1e;
    color: #fff;
  }

  /* "이번주 추천" 섹션(#featuredSection) 높이 축소
     — theme-3_min.css 확인 결과, 아래 두 가지가 실제 높이를 부풀리는 원인이었음:
       1) .featured-img-inner img 에 높이 제한이 없어 원본 비율 그대로 노출
       2) .featured-body 가 모바일(<=767px) min-height:200px,
          태블릿(768~1199px) min-height:250px 로 "내용과 무관하게" 강제 확보됨
       + 태블릿 구간은 .featured-desc(4줄, line-height 1.85)가 그대로 노출됨
         (모바일은 이미 테마에서 display:none 처리돼 있어 손대지 않음)
     이미지 높이 고정 + min-height 축소 + 태블릿 설명 2줄 클램프로
     기존 대비 약 50% 수준으로 줄임. #featuredSection으로 detail이 높아
     !important 없이도 테마 CSS보다 우선 적용됨. */
  @media (max-width: 1199.98px) {
    #featuredSection { padding-bottom: 24px; }
    #featuredSection .featured-img-wrap { padding-right: 0; margin-bottom: 0; }
    #featuredSection .featured-img-inner img {
      height: 150px;
      object-fit: cover;
    }
    #featuredSection .featured-badge { top: 10px; left: 10px; }
    #featuredSection .featured-body {
      min-height: 0;
      padding: 14px 0 0;
    }
    #featuredSection .featured-region { margin-bottom: 2px; }
    #featuredSection .featured-title { margin-bottom: 6px; }
    #featuredSection .featured-footer {
      margin-top: 8px;
      padding-top: 8px;
      margin-bottom: 20px;
    }
  }

  /* 태블릿(768~1199px)에서만: 데스크톱 이미지 높이/설명 노출 폭 별도 조정 */
  @media (min-width: 768px) and (max-width: 1199.98px) {
    #featuredSection .featured-img-inner img { height: 210px; }
    #featuredSection .featured-desc {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.5;
    }
  }

  /* 데스크톱(1200px 이상): 이미지가 좌우 배치라 스크롤 문제는 없었지만,
     .featured-img-inner img에 높이 제한이 전혀 없어(width:100%만 지정) 원본
     사진 비율 그대로 컬럼 폭만큼 늘어나 섹션이 불필요하게 커지는 문제가 있었음.
     이미지 높이 고정 + 본문 패딩 축소로 여기서도 절반 가까이 줄임. */
  @media (min-width: 1200px) {
    #featuredSection .featured-img-inner img { height: 260px; object-fit: cover; }
    #featuredSection .featured-body { padding: 1.25rem 1.75rem; }
    #featuredSection .featured-title { margin-bottom: 0.5rem; }
    #featuredSection .featured-desc {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 0.75rem;
      padding-bottom: 0.75rem;
    }
    #featuredSection .featured-footer { margin-top: 0.75rem; padding-top: 0.75rem; }
  }

  /* 히어로 지역 카드 6개 삭제로 콘텐츠 높이가 줄어든 것 보정 (planner.php와 동일 조치).
     테마 CSS(.hero-item, .hero-caption2)가 min-height:unset !important /
     max-height:55vh !important 로 콘텐츠만큼만 높이를 잡게 되어 있어서, 카드가
     없어진 만큼 히어로가 낮아짐. 991px 이하는 테마가 별도로 min-height:unset을
     다시 강제하는 반응형 규칙이 있어 건드리지 않고, 992px 이상에만 적용. */
  @media (min-width: 992px) {
    .hero-item, .hero-caption2 {
      min-height: 55vh !important;
    }
  }


/* ═══ 필터 바 v2 — 가로 3열 그룹 + 접기 + 결과 요약 (목업 반영 2026-08-29) ═══
   전체 칩은 숨긴다(선택 해제 = 활성 칩 재클릭, JS 블록 12).
   데스크톱(≥992px)에서만 가로 3열, 모바일은 기존 세로 스택 유지. */
/* ── 데스크톱(≥992px): 1행 [유형 | 테마 | (우측) 전체 N 결과 | 정렬]
   지역 칩 줄은 제거 — 카드 영역의 "전체 지역" 드롭다운이 지역 축 전담 (중복 정리).
   검색바는 좌측 col-3에 나란히 → 바 전체가 딱 1행. ── */
@media (min-width: 992px){
  .cat-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 24px; }
  .filter-stack{ display:contents; }
  .filter-line{ flex:0 1 auto; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
  .filter-line .cat-pills{ display:flex; flex-wrap:wrap; gap:8px; }
  /* 요약(상태)과 정렬을 우측에 붙은 짝으로 — 요약이 auto 마진으로 밀고,
     정렬은 음수 마진으로 그룹 간격(24px)을 상쇄해 10px 간격으로 붙는다 */
  .fb-summary{ margin-left:auto; align-self:center; }
  /* 결과·정렬을 다음 줄로 내리는 강제 줄바꿈 (검색바 확장에 따른 배치, 2026-08-29) */
  .fb-break{ flex-basis:100%; height:0; }
  .cat-row .sort-select{
    flex:0 0 auto; align-self:center; margin-left:-14px;
    /* theme-3 원본 규칙이 폭을 크게 잡아(예: width:100%) 셀렉트가 통째로
       다음 줄로 밀리던 원인 — 내용 크기만큼만 차지하게 강제 */
    width:auto; min-width:0; max-width:150px;
  }
}

/* ── 모바일(<992px): 결과·정렬을 최하단 한 줄로 (2026-08-29 요청)
   정렬 셀렉트가 칩 옆을 차지하면 칩 줄 폭이 줄어 줄바꿈만 늘어난다.
   칩 그룹 3줄이 전폭을 쓰고, 마지막 줄에 [전체 N 결과 | 추천순]이 나란히 선다. */
@media (max-width: 991.98px){
  .cat-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .filter-stack{ display:contents; }
  .filter-line{ flex-basis:100%; min-width:0; }
  .filter-line .cat-pills{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; }
  .fb-summary{ order:9; flex:1 1 auto; text-align:center; margin:2px 0 0; }
  .cat-row .sort-select{ order:10; flex:0 0 auto; align-self:center; width:auto; min-width:0; max-width:150px; }
}

/* 칩 "자체"는 절대 줄바꿈·수축하지 않는다 (모바일 포함 공통) */
.cat-pills .cat-pill,
.cat-pills .region-pill,
.cat-pills .theme-pill{ white-space:nowrap; flex:0 0 auto; }
.filter-line-label.fb-head{
  background:none; border:0; padding:0; cursor:pointer; min-width:0;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:#33413a;
}
.fb-caret{ display:inline-block; font-size:11px; line-height:1; transition:transform .18s; transform:translateY(2px); }
.filter-line.fb-collapsed .fb-caret{ transform:translateY(2px) rotate(180deg); }
.filter-line.fb-collapsed .cat-pills{ display:none; }

/* "전체" 칩 숨김 — 로직은 그대로 살아 있고(기본 활성·프로그램 클릭용) 화면에서만 뺀다 */
.cat-pills [data-region="all"],
.cat-pills [data-cat="all"],
.cat-pills [data-theme="all"]{ display:none; }

/* 결과 요약 — "버튼"이 아니라 상태 표시 (2026-08-29 축소 요청).
   평소엔 담백한 텍스트 배지(클릭 대상 아님, cursor:default),
   필터가 걸렸을 때만 옅은 초기화 칩(× 포함, 클릭 가능)으로 변한다. */
.fb-summary{
  flex:0 0 auto; padding:6px 10px; border-radius:8px; border:0;
  background:transparent; color:#33413a; font-weight:700; font-size:13px;
  cursor:default; white-space:nowrap; transition:background .18s, color .18s;
}
.fb-summary.fb-active{ background:#eef4ef; color:#1F3D2B; cursor:pointer; }
.fb-summary.fb-active:hover{ background:#e2ede4; }
.fb-summary.fb-active::after{ content:" ×"; opacity:.75; }
@media (max-width: 991.98px){
  .fb-summary{ margin:6px 0 2px; }
}