/* =========================================
   Equipment List — Mobile-first, Cleaned
   ========================================= */

/* ---------- CSS Variables ---------- */
:root{
  --equip-gap: 16px;
  --equip-radius: 14px;
  --equip-shadow: 0 10px 22px rgba(0,0,0,.06);
  --equip-border: #e5e7eb;
  --equip-ink: #111827;
  --equip-muted: #6b7280;
  --equip-brand: #0b63ce;
  --equip-soft: #f7f8fa;
  --equip-bg: #fff;

  /* 상태 배지 색 (status & legacy class 동시 호환) */
  --status-published: #ef4444; /* red   */
  --status-sold:      #9ca3af; /* gray  */
  --status-draft:     #3b82f6; /* blue  */
  --status-archived:  #111827; /* dark  */
}

/* ---------- Page Title ---------- */
main{ margin: 40px auto; }
.equip-title{
  margin: 0 0 14px;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--equip-ink);
}

/* =========================================
   Search (모바일 한 줄 → PC 좌우 배치)
   ========================================= */
.equip-search{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 50px;
  padding: 10px;
  border: 1px solid #e1e5ea;
  border-radius: 12px;
  background: #fff;
}
.equip-search__bar{
  display: flex;
  align-items: center;
  gap: 10px;
}
.equip-search__q{
  flex: 1 1 auto;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
  color: #000;
}
.equip-search__buttons{
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn{
  display: inline-block;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  color: #222;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .02s ease;
}
.btn--search{
  background: var(--equip-brand);
  border-color: var(--equip-brand);
  color: #fff;
}
.btn--reset{
  background: #f5f6f8;
  border-color: #e1e5ea;
}

/* 상세(접이식) */
.equip-adv{
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #e1e5ea;
  border-radius: 10px;
  background: var(--equip-soft);
}
summary.adv-summary-btn{
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--equip-brand);
  border-radius: 8px;
  background: var(--equip-brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
summary.adv-summary-btn::-webkit-details-marker{ display: none; }
details[open] > summary.adv-summary-btn{ background: #094c9d; border-color: #094c9d; }

.equip-search__row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.equip-search input[type="search"],
.equip-search input[type="text"],
.equip-search input[type="number"],
.equip-search select{
  flex: 1 1 160px;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
  color: #000;
}

/* 접이식 패널 애니메이션 */
#advFilters{
  --adv-ease: cubic-bezier(.2,.7,.2,1);
  --adv-open-dur: .55s;
  --adv-close-dur: .45s;
  --adv-fade-dur: .35s;
}
#advFilters .adv-panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height var(--adv-close-dur) var(--adv-ease),
    opacity   var(--adv-fade-dur)   var(--adv-ease),
    transform var(--adv-fade-dur)   var(--adv-ease);
  will-change: max-height, opacity, transform;
}
#advFilters[open] .adv-panel{
  max-height: 1400px;
  opacity: 1;
  transform: none;
  transition:
    max-height var(--adv-open-dur) var(--adv-ease),
    opacity   var(--adv-fade-dur)  var(--adv-ease),
    transform var(--adv-fade-dur)  var(--adv-ease);
}
@media (prefers-reduced-motion: reduce){
  #advFilters .adv-panel{ transition: none; }
}

/* =========================================
   Grid (모바일 1 → 태블릿 2 → PC 3~4)
   ========================================= */
.cards{
  display: grid;
  gap: var(--equip-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .cards{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px){
  .cards{ grid-template-columns: repeat(4, 1fr); }
}
/* listings 전용 갭 보정(겹치지 않게 보수적 적용) */
.cards.cards--equip{ gap: 50px 25px; }

/* =========================================
   Card
   ========================================= */
.card{
  position: relative;
  min-width: 220px;
  margin: 0;
  border: 1px solid var(--equip-border);
  border-radius: var(--equip-radius);
  background: var(--equip-bg);
  overflow: hidden;
  will-change: transform;
  transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--equip-shadow);
  border-color: #dfe3e8;
}
.card.card--equip{
  position: relative;
  max-height: 450px;
  padding-bottom: 44px; /* 가격 바닥 고정 영역 */
  background: #fff;
}
.card__link{ display: block; color: inherit; text-decoration: none; }

/* 미디어 */
.card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f9fafb;
}
.equipment-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.equipment-thumb.noimg{
  object-fit: contain;
  background: #f3f4f6;
  opacity: .85;
  padding: 50px;
}
.equipment-thumb.hasimg{ object-fit: cover; opacity: 1; }

/* 상태 배지 (두 체계 동시 지원) */
.badge{
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  border-radius: 0 0 15px 0;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.badge--status.badge--published{ background: var(--status-published); }
.badge--status.badge--sold{      background: var(--status-sold); }
.badge--status.badge--draft{     background: var(--status-draft); }
.badge--status.badge--archived{  background: var(--status-archived); }
/* legacy 색상 클래스 호환 */
.badge--status.badge--red{   background: var(--status-published); }
.badge--status.badge--gray{  background: var(--status-sold); }
.badge--status.badge--blue{  background: var(--status-draft); }
.badge--status.badge--dark{  background: var(--status-archived); }

/* 본문 */
.card__body{
  min-height: 182px;
  padding: 12px 14px;
}
.card__title{
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--equip-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__meta{
  font-size: 13px;
  line-height: 1.6;
  color: var(--equip-muted);
}
.meta__item{ display: inline-block; margin-right: 6px; }
.meta__brand b{ font-weight: 700; }
.chip{
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
}

/* 가격 (카드 하단 고정) */
.card__price{
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 280px;
  padding: 0 10px;
  margin: 10px 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  text-align: right;
  color: var(--equip-brand);
}
.price-text{ color: #111827; }
.price-usd{ color: #0f766e; }
.price-inquiry{ color: #6b7280; }

/* 빈 상태 */
.card-empty{
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--equip-muted);
  border: 1px dashed var(--equip-border);
  border-radius: var(--equip-radius);
  background: #fbfbfd;
  text-align: center;
}

/* 접근성/프린트 */
@media (hover:hover){
  .card__link:hover .card__title{
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.card__link:focus-visible{
  outline: 3px solid rgba(11,99,206,.35);
  outline-offset: 3px;
  border-radius: 10px;
}
@media print{
  .cards{ grid-template-columns: repeat(2, 1fr) !important; }
  .card{ box-shadow: none !important; }
  .paging{ display: none !important; }
}

/* =========================================
   Pagination
   ========================================= */
.paging{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.paging--equip .page{
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 34px;
  padding: 0 12px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--equip-ink);
  background: #fff;
  border: 1px solid var(--equip-border);
  border-radius: 10px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .02s ease;
}
.paging--equip .page:hover{
  background: #f6f8fb;
  border-color: #dfe3e8;
}
.paging--equip .page.is-active{
  font-weight: 800;
  color: #fff;
  background: #0b7;
  border-color: #0b7;
}
@media (max-width: 520px){
  .paging--equip .page{
    min-width: 40px;
    height: 40px;
    line-height: 38px;
  }
}

/* =========================================
   Responsive refinements
   ========================================= */
@media (max-width: 768px){
  main{ margin: 0 auto; }

  .equip-search__bar{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .equip-search__buttons{
    width: 100%;
    gap: 8px;
  }
  .equip-search__buttons .btn{
    flex: 1 1 auto;
    text-align: center;
  }
  .equip-search input[type="search"],
  .equip-search input[type="text"],
  .equip-search input[type="number"],
  .equip-search select{
    flex: 1 1 25px !important;
  }
}
@media (max-width: 520px){
  .equip-search__q{ min-height: 40px; }
  .card__price{ font-size: 13px; }
}
@media (max-width: 380px){
  .equip-search__buttons{ flex-wrap: wrap; }
}

/* =========================================
   (선택) noimg 오버레이 라벨 — 필요 시 사용
   ========================================= */
/*
.card__media{ display:grid; place-items:center; }
.equipment-thumb.noimg + .noimg-label,
.card__media .noimg-label{
  position:absolute; right:8px; bottom:8px;
  padding:4px 8px;
  font-size:12px; font-weight:700;
  color:#fff; background:rgba(0,0,0,.55);
  border-radius:6px; pointer-events:none;
}
*/
.year_min_max{width:45% !important; cursor:pointer;}
/* 버튼 & 칩 */
.filters__actions{
  display:flex;
  gap:8px;
  align-items:flex-end;
  justify-content:center;
}


.btn{
	padding:12px 15px !important;
}
.srp{margin-top:30px;}
.brp__hero {
    width: 100%;
    height: 300px;
    background: url('/assets/img/equipment_list_main.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    border-radius: 0;
}

.brp__hero-inner {
    max-width: 900px;
    width: 100%;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.brp__hero-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
}

.brp__hero-desc {
    font-size: 17px;
    font-weight: 300;
    margin: 0;
}

/* ===== 모바일 최적화 ===== */
@media (max-width: 768px) {
    .brp__hero {
        width: 100vw;
        margin-left: calc(-1 * (100vw - 100%)/2); /* 중앙 정렬 보정 */
        margin-right: calc(-1 * (100vw - 100%)/2);
        height: 120px;
        padding: 10px 15px;
    }

    .brp__hero-title {
        font-size: 15px;
        margin-bottom: 6px;
    }
    .brp__hero-desc {
        font-size: 11px;
    }
}
.main.is-sub{
	padding-top:0 !important;
	padding-bottom:50px !important;
}