/**
 * FluxShop 렌탈 예약 — 커뮤니티 화면(중고 매물 · 제휴캠핑장 · 주차 서비스 · 내 매물 탭)
 *
 * 원본: 클라이언트 시안 campingncar-main.html 의 #used(매물 검색 + 중고 판매) · #camps(제휴 캠핑장) <style>.
 * 클래스명·값은 시안 그대로이고, 사이트·테마와 충돌하지 않도록 시안 규칙은 모두 .fxrent-community 래퍼 아래로만 스코프했다.
 * (:root 변수 → .fxrent-community, body → .fxrent-community, 헤더·푸터·퀵버튼 등 사이트 공통부는 테마 몫이라 이식하지 않음)
 *
 * 시안에 없어 이 파일에서 더한 것(파일 끝 "7. 시안에 없는 화면" 이후): 제휴캠핑장 목록 그리드(.camp-grid), 카드 전체 링크(.camp__link),
 *  중고 상세 연락처 블록·승인 상태 배너(.fxrent-used-*), 주차 안내(.fxrent-parking), 내 매물 탭(.fxrent-used-my__*).
 * 시안 값이 접근성 대비를 못 지키는 곳은 값을 바꾸지 않았다(보고서 참조).
 */
/* ===================
   1. CSS Variables
   =================== */
.fxrent-community {
  --ink: #15191C;
  --ink-2: #3E464C;
  --muted: #687177;
  --line: #E4E7E8;
  --line-2: #EEF0F1;
  --bg: #FFFFFF;
  --bg-2: #F5F6F6;
  --brand: #0F5C6B;          /* 캠핑엔카 로고 딥 틸 */
  --brand-deep: #0A4552;
  --brand-soft: #E6F0F2;
  --brand-line: #BFD6DB;
  --sale: #D2432D;           /* 할인가 전용 */
  --sale-soft: #FCEBE7;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .22s;

  --gutter: 24px;
  --section-gap: 96px;
}

/* ===================
   2. Reset & Base
   =================== */
.fxrent-community *, .fxrent-community *::before, .fxrent-community *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fxrent-community {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  max-width: 100%;
}
.fxrent-community img { max-width: 100%; display: block; }
.fxrent-community a { color: inherit; text-decoration: none; }
.fxrent-community button, .fxrent-community input, .fxrent-community select { font: inherit; color: inherit; }
.fxrent-community button { cursor: pointer; background: none; border: 0; }
.fxrent-community ul, .fxrent-community ol { list-style: none; }
.fxrent-community h1, .fxrent-community h2, .fxrent-community h3, .fxrent-community h4 { line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.fxrent-community p { text-wrap: pretty; }
.fxrent-community .num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fxrent-community [hidden] { display: none !important; }
.fxrent-community .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fxrent-community :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.fxrent-community .icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===================
   3. Layout
   =================== */
.fxrent-community .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.fxrent-community .section-head__title { font-size: 32px; font-weight: 700; }
.fxrent-community .section-head__desc { margin-top: 8px; color: var(--muted); font-size: 16px; }
.fxrent-community .block-title { font-size: 28px; font-weight: 700; margin-bottom: 20px; }
.fxrent-community .list-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 56px 0 24px; }
.fxrent-community .list-head .block-title { margin: 0; }
.fxrent-community .list-head__side { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ===================
   4. Components
   =================== */
/* Buttons */
.fxrent-community .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r); font-size: 16px; font-weight: 600; white-space: nowrap; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--ease); }
.fxrent-community .btn:active { transform: scale(.98); }
.fxrent-community .btn:disabled, .fxrent-community .btn:disabled:hover { background: var(--line); border-color: var(--line); color: var(--muted); cursor: default; transform: none; }
.fxrent-community .btn--primary { background: var(--brand); color: #fff; }
.fxrent-community .btn--primary:hover { background: var(--brand-deep); }
.fxrent-community .btn--line { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.fxrent-community .btn--line:hover { border-color: var(--ink); }
.fxrent-community .btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 10px; }

.fxrent-community .icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.fxrent-community .icon-btn:hover { border-color: var(--ink); }
.fxrent-community .icon-btn:disabled { opacity: .35; cursor: default; border-color: var(--line); }

/* Tags */
.fxrent-community .tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.fxrent-community .tag--brand { background: var(--brand-soft); color: var(--brand-deep); }
.fxrent-community .tag--sale { background: var(--sale-soft); color: var(--sale); }
.fxrent-community .tag--dark { background: rgba(21, 25, 28, .78); color: #fff; backdrop-filter: blur(6px); }

/* Select (pill) */
.fxrent-community .select { position: relative; display: inline-flex; }
.fxrent-community .select select { appearance: none; -webkit-appearance: none; height: 44px; padding: 0 38px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.fxrent-community .select select:hover { border-color: var(--ink-2); }
.fxrent-community .select.is-active select { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.fxrent-community .select::after { content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* -------- Partner campgrounds -------- */
.fxrent-community .camp-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px * 3) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.fxrent-community .camp-track::-webkit-scrollbar { display: none; }
.fxrent-community .camp { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.fxrent-community .camp__media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--line); }
.fxrent-community .camp__media img { width: 100%; height: 100%; object-fit: cover; }
.fxrent-community .camp__media .tag { position: absolute; left: 12px; top: 12px; }
.fxrent-community .camp__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.fxrent-community .camp__name { font-size: 17px; font-weight: 700; }
.fxrent-community .camp__desc { font-size: 14px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fxrent-community .camp__perk { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-deep); }
.fxrent-community .camp__perk span { font-size: 12px; font-weight: 600; opacity: .8; }
.fxrent-community .camp__perk strong { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.fxrent-community .camp__perk .icon { width: 17px; height: 17px; }
.fxrent-community .camp__tel { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.fxrent-community .camp__tel:hover { color: var(--brand); }
.fxrent-community .camp__tel .icon { width: 16px; height: 16px; }

/* -------- Rent search + list (개수 표기) -------- */
.fxrent-community .filterbar__count { font-size: 15px; color: var(--muted); }
.fxrent-community .filterbar__count strong { color: var(--ink); font-weight: 700; }

.fxrent-community .grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 20px; }
.fxrent-community .grid-cards--3 { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.fxrent-community .car { position: relative; display: flex; flex-direction: column; gap: 12px; }
.fxrent-community .car[hidden] { display: none; }
.fxrent-community .car__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.fxrent-community .car__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.fxrent-community .car:hover .car__media img { transform: scale(1.04); }
.fxrent-community .car__badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.fxrent-community .car__body { display: flex; flex-direction: column; gap: 4px; }
.fxrent-community .car__region { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.fxrent-community .car__region .icon { width: 14px; height: 14px; }
.fxrent-community .car__name { font-size: 17px; font-weight: 700; }
.fxrent-community .car__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.fxrent-community .car__link:focus-visible { outline: none; }
.fxrent-community .car__link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 4px; }
.fxrent-community .used__price { margin-top: 6px; font-size: 18px; font-weight: 700; }

/* Empty state */
.fxrent-community .empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 56px 24px; border: 1px dashed #CBD1D3; border-radius: var(--r-lg); }
.fxrent-community .empty[hidden] { display: none; }
.fxrent-community .empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--muted); }
.fxrent-community .empty__icon .icon { width: 26px; height: 26px; }
.fxrent-community .empty h3 { font-size: 19px; font-weight: 700; }
.fxrent-community .empty p { color: var(--muted); font-size: 15px; }
.fxrent-community .empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* -------- Used listings -------- */
.fxrent-community .search-panel { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 12px; align-items: end; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); }
.fxrent-community .search-panel label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fxrent-community .search-panel .select, .fxrent-community .search-panel .select select { width: 100%; }
.fxrent-community .search-panel .select select { border-radius: 10px; }
.fxrent-community .search-panel .btn { min-height: 44px; }
.fxrent-community .used__meta { font-size: 14px; color: var(--ink-2); }

/* ===================
   5. Sections (페이지별)
   — 시안의 #used · #camps 는 홈 페이지의 섹션(.section 96px 간격)이라, 게시판 페이지에서는 페이지 본문 영역 안에 들어가므로
     .section 규칙은 옮기지 않았다. 홈에 같은 섹션을 얹는 화면은 그쪽 스타일(front.css 등)을 쓴다.
   =================== */

/* ===================
   6. Responsive
   =================== */
@media (max-width: 1024px) {
  .fxrent-community { --section-gap: 72px; }
  .fxrent-community .section-head__title { font-size: 28px; }
  .fxrent-community .camp-track { grid-auto-columns: calc((100% - 16px * 2) / 2.6); }
  .fxrent-community .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .fxrent-community .search-panel { grid-template-columns: repeat(3, 1fr); }
  .fxrent-community .search-panel .btn { grid-column: span 3; }
}
@media (max-width: 768px) {
  .fxrent-community { --section-gap: 64px; --gutter: 16px; }
  .fxrent-community .section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .fxrent-community .section-head__title { font-size: 24px; }
  .fxrent-community .section-head__desc { font-size: 15px; }
  .fxrent-community .camp-track { grid-auto-columns: 72%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .fxrent-community .camp-nav { display: none; }
  .fxrent-community .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .fxrent-community .search-panel { grid-template-columns: 1fr 1fr; padding: 16px; }
  .fxrent-community .search-panel .btn { grid-column: span 2; }
}
@media (max-width: 480px) {
  .fxrent-community .grid-cards { grid-template-columns: 1fr; gap: 28px; }
  .fxrent-community .grid-cards--used { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .fxrent-community .grid-cards--used .car__name { font-size: 15px; }
  .fxrent-community .grid-cards--used .used__meta { font-size: 13px; }
  .fxrent-community .grid-cards--used .used__price { font-size: 16px; }
  .fxrent-community .grid-cards--used .car__media { border-radius: var(--r); }
  .fxrent-community .grid-cards--used .tag { height: 22px; font-size: 12px; padding: 0 8px; }
  .fxrent-community .search-panel { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fxrent-community *, .fxrent-community *::before, .fxrent-community *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .fxrent-community .camp-track { scroll-behavior: auto; }
}

/* ===================
   7. 시안에 없는 화면 (이 플러그인이 더한 것 — 시안의 변수·크기·간격 체계를 그대로 따른다)
   =================== */

/* 제휴캠핑장 목록(/camps/) — 시안의 가로 슬라이드(.camp-track) 카드를 목록 페이지에서는 그리드로 펼친다 */
.fxrent-community .camp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fxrent-community .camp-grid .camp { position: relative; border: 1px solid var(--line); }
.fxrent-community .camp__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.fxrent-community .camp__link:focus-visible { outline: none; }
.fxrent-community .camp__link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; }
.fxrent-community .camp__tel { position: relative; z-index: 2; }
.fxrent-community .camp__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); }
.fxrent-community .community-pager { margin-top: 40px; }
.fxrent-community .community-head { margin-bottom: 24px; }
.fxrent-community .community-foot { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 1024px) {
  .fxrent-community .camp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .fxrent-community .camp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .fxrent-community .camp-grid { grid-template-columns: 1fr; }
}

/* 중고 상세 — 판매자 연락처 블록 */
.fxrent-community .fxrent-used-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 24px 0; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); }
.fxrent-community .fxrent-used-contact__title { font-size: 17px; font-weight: 700; }
.fxrent-community .fxrent-used-contact__note { font-size: 14px; color: var(--ink-2); }
.fxrent-community .fxrent-used-contact__note a { font-weight: 600; color: var(--brand); text-decoration: underline; }

/* 주차 서비스 안내 */
.fxrent-community .fxrent-parking { padding-block: 8px; }
.fxrent-community .fxrent-parking__title { font-size: 32px; font-weight: 700; margin-bottom: 20px; }
.fxrent-community .fxrent-parking__body { font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.fxrent-community .fxrent-parking__body p + p { margin-top: 12px; }
.fxrent-community .fxrent-parking__body img { height: auto; border-radius: var(--r-lg); margin-block: 16px; }
.fxrent-community .fxrent-parking__admin { margin-top: 32px; }
@media (max-width: 768px) {
  .fxrent-community .fxrent-parking__title { font-size: 24px; }
}

/* 승인 상태 배너 · 글쓰기 안내 — FluxBoard 상세·글쓰기 화면 안에 들어가므로 .fxrent-community 밖에서도 보이게 접두사로만 스코프 */
.fxrent-used-banner { margin: 16px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid #E4E7E8; background: #F5F6F6; color: #15191C; font-size: 15px; line-height: 1.6; }
.fxrent-used-banner strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.fxrent-used-banner p { margin: 0; }
.fxrent-used-banner--pending { border-color: #BFD6DB; background: #E6F0F2; color: #0A4552; }
.fxrent-used-banner--rejected { border-color: #F0C4BB; background: #FCEBE7; color: #8A2A1B; }
.fxrent-used-banner--notice { border-color: #BFD6DB; background: #E6F0F2; color: #0A4552; }
.fxrent-used-banner__reason { margin-top: 6px; font-weight: 600; }


/* 공용 리셋(.fxrent-community *)이 테마 .container 의 폭·좌우 거터를 지우지 않게 다시 잡는다 */
.fxrent-community .container { width: 100%; max-width: calc(var(--container, 1200px) + var(--gutter, 24px) * 2); margin: 0 auto; padding-inline: var(--gutter, 24px); box-sizing: border-box; }