/* =========================================
   Equip List — Cards + Paging (Mobile-first)
   ========================================= */
:root{
  --equip-gap: 14px;
  --equip-radius: 14px;
  --equip-shadow: 0 10px 22px rgba(0,0,0,.06);
  --equip-border: #e8e8ea;
  --equip-ink: #222;
  --equip-muted: #667085;
  --equip-brand: #0b63ce;
  --equip-soft: #f7f7f9;
  --equip-bg: #fff;

  --status-published: #1565d8;
  --status-sold:   #e11d48;
  --status-draft:#f59e0b;
  --status-archived:#000;
}
main{margin:50px auto;}
/* Title */
.equip-title{
  margin: 6px 0 14px;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--equip-ink);
}
summary.adv-summary-btn{
  display:inline-block !important; padding:5px 14px !important;
  background:#0b63ce !important; color:#fff !important; border:1px solid #0b63ce !important; border-radius:8px !important;
  cursor:pointer !important; user-select:none !important; font-weight:600 !important;
}
details[open] > summary.adv-summary-btn{ background:#094c9d !important; border-color:#094c9d !important; }
summary.adv-summary-btn::-webkit-details-marker{ display:none !important; }

/* ============ Grid ============ */
.cards{
  display:grid;
  gap: 25px;
  padding:0;
  margin:0;
  list-style:none;
  grid-template-columns: repeat(4, 1fr);
}

@media(max-width:768px){
    .cards{
  display:grid;
  gap: 10px;
  padding:0;
  margin:0;
  list-style:none;
  grid-template-columns: repeat(1, 1fr);
}

}

/* ============ Card ============ */
.card{
  background: var(--equip-bg);
  border: 1px solid var(--equip-border);
  border-radius: var(--equip-radius);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
  will-change: transform; 
  min-width:220px;
  }
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--equip-shadow);
  border-color: #dfe3e8;
}
.card--equip .card__link{
	text-decoration:none;
	color:#999;
}

/* Media (4:3) */
.card__media{
  position:relative;
  background: var(--equip-soft);
  width:100%;
  height:180px;
}
.card__media img{
  display:block; width:100%;
  height:100%;
  object-fit: cover; object-position: center;
}

/* 상태 배지 (옵션) */
.badge{
  position:absolute; left:0px; top:0px;
  font-size: 12px; line-height: 1.2;
  padding: 6px 10px; border-radius: 0 0 15px 0;
  background:#f00;
  color:#fff; font-weight:700;
  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); }

/* Body */
.card__body{ padding:10px; }
.card__title{
  display:-webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow:hidden;text-overflow: ellipsis;white-space:nowrap;
  font-size: 15px; line-height: 1.45; color: var(--equip-ink);
}
.card__meta{

}
.meta__item{
	font-size:13px;
}
.meta__brand b{ font-weight: 700; }

/* Price */
.card__price{
  align-self:end;
  display:block;
  text-align:right;
  color: var(--equip-brand);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;
}

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

/* Tap-friendly hover on touch */
@media (hover: hover){
  .card__link:hover .card__title{ text-decoration: underline; text-underline-offset: 3px; }
}

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

/* 작은 기기에서 페이지 터치 영역 확장 */
@media (max-width: 520px){
  .paging--equip .page{ min-width: 40px; height: 40px; line-height: 38px; }
}

/* =========================
   Misc — 접근성 & 프린트
   ========================= */
.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; }
}

.equip-search{display:flex;flex-direction:column;gap:8px;margin:10px 0 16px;border-radius:12px;background:#fff}
.equip-search__row{display:flex;flex-wrap:wrap;gap:8px}
.equip-search input[type="search"],
.equip-search input[type="text"],
.equip-search input[type="number"],

.btn--search{background:#0b63ce;color:#fff;border:1px solid #0b63ce}
.btn--reset{background:#f5f6f8;border:1px solid #e1e5ea}
@media (max-width:520px){ .equip-search__row{gap:6px} }
/* ▣ 최상단 키워드 한줄 */
.equip-search__top{
  display:flex; gap:8px; align-items:center;
  margin:10px 0 6px;
}

/* ▣ 상세(접이식) */
.equip-adv{ margin-top:6px;padding: 10px; border: 1px solid #ccc;background:#efefef; }
.equip-adv > summary{
  cursor:pointer; user-select:none;
  font-weight:700; color:#222; padding:6px 10px;
  list-style:none;display:inline-block;border:1px solid #ccc;
}
.equip-adv > summary::-webkit-details-marker{ display:none; }
.equip-adv[open] > summary{ color:#0b63ce; }
.equip-search__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.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; border:1px solid #dfe3e8; border-radius:10px; font-size:14px;background-color:#fff;color:#000;
}
.btn--search{background:#0b63ce;color:#fff;border:1px solid #0b63ce}
.btn--reset{background:#f5f6f8;border:1px solid #e1e5ea}
@media (max-width:520px){
	main{margin:0px auto;}
  .equip-search__top{ gap:6px }
  .equip-search__q{ min-height:40px; }
  .equip-search__row{ gap:6px }
}
.bottom_button{
	margin:10px auto 0;justify-content:center;
}

/* 기본 숨김 */
.equip-adv summary .label-close,
.equip-adv summary .label-open { display:none; }

/* 열려있을 때(open): "닫기" 보이기 */
.equip-adv[open] summary .label-open { display:inline; }

/* 닫혀있을 때: "열기" 보이기 */
.equip-adv:not([open]) summary .label-close { display:inline; }

/* summary 스타일 버튼처럼 */
.equip-adv > summary {
  display:inline-block;
  padding:8px 14px;
  background:#0b63ce;
  color:#fff;
  border-radius:8px;
  border:1px solid #0b63ce;
  font-size:14px;
  font-weight:100;
  cursor:pointer;
  user-select:none;
}
.equip-adv[open] > summary {
  background:#094c9d;
  border-color:#094c9d;
  color:#fff;
}
.equip-adv > summary::-webkit-details-marker { display:none; }
.equip-search__header{
  display:flex;
  align-items:center;
  gap:12px;          /* summary와 검색창 사이 여백 */
  margin:10px 0;
}

/* summary 버튼 스타일 */
.equip-search__header summary {
  display:inline-block;
  padding:8px 14px;
  background:#0b63ce;
  color:#fff;
  border-radius:8px;
  border:1px solid #0b63ce;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}
.equip-search__header summary::-webkit-details-marker { display:none; }
.equip-adv[open] ~ .equip-search__header summary {
  background:#094c9d;
  border-color:#094c9d;
}
/* ▣ 상단 바: PC 한 줄, 모바일은 버튼이 아래로 */
.equip-search__bar{
  display:flex; align-items:center; gap:10px;
  margin:10px 0 12px;
}
.equip-search__q{
  flex:1 1 auto; min-height:42px; padding:10px 12px;
  border:1px solid #dfe3e8; border-radius:10px; font-size:15px;
}
.equip-search__buttons{
  display:flex; gap:8px; align-items:center;
}
.btn{ display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid #ccc; background:#fff; color:#222; text-decoration:none; cursor:pointer;}
.btn--search{ background:#0b63ce; color:#fff; border-color:#0b63ce; }
.btn--reset{ background:#f5f6f8; border-color:#e1e5ea; }
.btn--adv{ background:#0b63ce; color:#fff; border-color:#0b63ce; }

/* 상세(접이식)는 하단에 */
.equip-adv{
  margin-top:8px; padding:10px;
  border:1px solid #e1e5ea; border-radius:10px; background:#f7f8fa;
}

/* 모바일(≤768px): 검색창 위, 버튼들 아래 */
@media (max-width: 768px){
	.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-adv > summary::-webkit-details-marker{ display:none; }
	.equip-adv[open] > summary{ color:#0b63ce; }
	.equip-search__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}

	.equip-search input[type="search"],
	.equip-search input[type="text"],
	.equip-search input[type="number"],
	.equip-search select{
		flex:1 1 25px !important;
	}

/* (선택) 아주 작은 화면에서 버튼 2행으로 자동 줄바꿈 */
@media (max-width: 380px){
  .equip-search__buttons{ flex-wrap:wrap; }
  .card__price{font-size:13px;}
}
/* summary 기본 화살표 제거 + 버튼 스타일 */
.equip-adv > summary { cursor:pointer; user-select:none; }
.equip-adv > summary::-webkit-details-marker { display:none; }

/* 라벨 토글 */
.equip-adv .when-open { display:none; }
.equip-adv[open] .when-open { display:inline; }
.equip-adv[open] .when-closed { display:none; }

/* 기본 커스텀 속도/이징 변수 (원하면 숫자만 바꿔도 됨) */
#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 !important;
  max-height:0 !important;
  opacity:0 !important;
  transform: translateY(-4px) !important;

  /* 닫힐 때는 close 시간 사용 (현재 상태 기준으로 적용됨) */
  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)
  !important;
  will-change: max-height, opacity, transform;
}

/* 열렸을 때 — open 쪽 시간을 재정의하여 더 천천히 */
#advFilters[open] .adv-panel{
  max-height: 1400px !important; /* 내용이 많은 경우 더 크게 */
  opacity:1 !important;
  transform:none !important;

  /* 열릴 때는 open 시간 사용 */
  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)
  !important;
}

/* 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce){
  #advFilters .adv-panel{ transition:none !important; }
}