/*
 * 크루 찾기(crew-find.php) 전용 스타일 — design.css 뒤에 싣는다.
 * 원본: web/design/crew-find.html 의 <style>. 시안을 고치면 이 파일도 같이 옮길 것.
 */
    /* ── 크루 찾기 전용 ───────────────────────────────────────────── */
    .page-head { padding: calc(var(--header-h) + 40px) 0 24px; }
    .page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .page-head h1 { font-size: 40px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
    .page-head p { color: var(--text-2); margin-top: 8px; }

    /* 조건 바 — 마라톤 일정과 같은 고정 방식. 폰에서는 3줄이라 화면을 너무 가려 고정을 푼다 (아래 768) */
    .filter-bar {
      position: sticky; top: var(--header-h); z-index: 40;
      background: rgba(24, 24, 26, 0.94); border-bottom: 1px solid var(--border);
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      padding-block: 14px;
    }
    .filter-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .filter-row + .filter-row { margin-top: 10px; }
    .filter-label { flex-shrink: 0; min-width: 40px; font-size: 13px; font-weight: 600; color: var(--text-3); }
    .filter-row .chip-row { min-width: 0; }

    .search-box { position: relative; flex: 1; min-width: 0; }
    .search-box i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-size: 18px; color: var(--text-2); pointer-events: none; }
    .search-box .input { height: 44px; padding-left: 42px; }
    .filter-row .select { width: 180px; height: 44px; flex-shrink: 0; }

    .result-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-height: 38px; }
    .result-bar strong { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
    .result-bar b { color: var(--primary); }

    /* 본문 2단 — 왼쪽 결과, 오른쪽 '직접 만들기·초대 코드' 안내 */
    .find-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; padding-top: 28px; }
    .find-layout > * { min-width: 0; }

    .crew-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .crew-grid > * { min-width: 0; }

    /* 크루 카드 — 카드 전체가 크루 소개로 가고, 가입 버튼만 따로 눌린다 (이름 링크를 카드 전체로 늘림) */
    .ccard { position: relative; display: flex; flex-direction: column; gap: 12px; transition: background-color .15s; }
    .ccard:hover { background: var(--surface-2); }
    .ccard:has(.ccard-link:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
    .ccard-link:focus-visible { outline: none; }
    .ccard-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
    .ccard-top { display: flex; align-items: center; gap: 12px; }
    .ccard-logo { flex-shrink: 0; width: 52px; height: 52px; font-size: 20px; }
    .ccard-title { flex: 1; min-width: 0; }
    .ccard h2 { font-size: 17px; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ccard-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: 13px; color: var(--text-2); }
    .ccard-meta span { display: inline-flex; align-items: center; gap: 3px; }
    .ccard-meta i { font-size: 14px; }
    .ccard-badges { display: flex; flex-wrap: wrap; gap: 6px; }
    .ccard-desc {
      font-size: 14px; line-height: 1.6; color: var(--text-2);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      min-height: calc(1.6em * 2);   /* 소개가 한 줄이어도 카드 높이가 들쭉날쭉하지 않게 */
      overflow-wrap: anywhere;
    }
    .ccard-week { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
    .ccard-week > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
    .ccard-week b { color: var(--text); font-variant-numeric: tabular-nums; }
    .ccard-foot {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
    }
    .ccard-foot small { font-size: 13px; color: var(--text-3); }
    .ccard-foot .btn, .ccard-foot .badge { position: relative; z-index: 1; }   /* 늘린 이름 링크 위로 */

    /* 오른쪽 안내 */
    .find-aside { display: grid; gap: 16px; }
    .side-card { display: grid; gap: 10px; padding: 24px; }
    .side-card.is-create { background: radial-gradient(360px circle at 100% 0%, rgba(198,255,52,.16), transparent 60%), var(--surface); }
    .side-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--primary); font-size: 22px; }
    .side-card h2 { font-size: 18px; font-weight: 800; line-height: 1.4; }
    .side-card p { font-size: 14px; color: var(--text-2); }
    .side-card .btn { width: 100%; }
    .side-card .more { justify-self: start; font-size: 14px; }
    .join-steps { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
    .join-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
    .join-steps li > i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--text); font-size: 16px; }
    .join-steps strong { display: block; font-size: 14px; }
    .join-steps span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.5; }
    .side-note { font-size: 13px; color: var(--text-3); }

    /* 지역별 크루 (SEO 내부 링크) — 마라톤 일정의 지역 그리드와 같은 모양 */
    .region-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .region-grid a { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 14px 16px; min-width: 0; }
    .region-grid strong { font-size: 15px; }
    .region-grid small { font-size: 13px; color: var(--primary); font-weight: 700; white-space: nowrap; }
    .region-grid .is-zero small { color: var(--text-3); font-weight: 600; }

    @media (max-width: 1024px) {
      .find-layout { grid-template-columns: minmax(0, 1fr); }
      .find-aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
      .region-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 768px) {
      .page-head { padding-top: calc(var(--header-h) + 28px); }
      .page-head h1 { font-size: 30px; }
      .filter-bar { position: static; }
      .filter-row { flex-wrap: wrap; }
      .search-box { flex-basis: 100%; }
      .filter-row .select { width: auto; flex: 1; min-width: 0; }
      .filter-label { display: none; }
      .region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .crew-grid { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 480px) {
      .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .side-card { padding: 20px; }
      .find-aside { grid-template-columns: minmax(0, 1fr); }
    }

/* ── PHP 이관 추가분 ─────────────────────────────────────────────── */
/* 크루 로고 이미지는 이니셜 위에 덮는다 — 이미지가 깨지면(onerror 로 제거) 이니셜이 남는다 */
.ccard-logo { position: relative; overflow: hidden; }
.ccard-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ccard-desc.is-empty { color: var(--text-3); }
/* 긴 크루 이름 — 링크 자체가 말줄임을 맡아야 링크 상자가 카드 밖으로 뻗지 않는다 */
.ccard h2 .ccard-link { display: block; overflow: hidden; text-overflow: ellipsis; }

/* JS 없이 동작하도록 검색은 제출 버튼, 정렬·시군구는 링크로 둔다 (시안은 즉시 걸러지는 버튼) */
.search-btn { height: 44px; flex-shrink: 0; }
.seg-links a {
  white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px; border-radius: 19px;
  font-size: 14px; font-weight: 600; color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.seg-links a:hover { color: var(--text); }
.seg-links a[aria-current] { background: var(--area); color: var(--on-area); }

/* 페이지 번호 */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 28px; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--text-2); background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.pager a:hover { color: var(--text); background: var(--surface-2); }
.pager a[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.pager .is-disabled { opacity: .4; }
.pager .gap { background: transparent; min-width: 20px; padding: 0; }
.pager i { font-size: 20px; }

/* 크루가 몇 개 없을 때 목록 아래 안내 */
.sparse-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-2); font-size: 14px; color: var(--text-2); }
.sparse-note i { font-size: 18px; color: var(--primary); }

.regions { padding-top: 72px; }
.region-grid .is-current { box-shadow: inset 0 0 0 1px var(--primary); }