/* equipment.css */
/* -----------------------------------------------------------
   공통 레이아웃 / 유틸
----------------------------------------------------------- */
main{max-width:100%;}
:root{
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --pri:#2563eb; --pri-ink:#fff; --bg:#f9fafb;
}
.container{max-width:1200px;margin:30px auto;padding:0 16px;}
.equip-header{display:flex;justify-content:space-between;align-items:center;margin:10px 0 16px;}
.equip-title{font-size:22px;font-weight:800;color:var(--ink);margin:0;}
.small{white-space:nowrap}

/* 테이블 */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;}
.table th,.table td{padding:8px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.table th{background:#f3f4f6;text-align:left;color:#374151;white-space:nowrap;}
.table tr:hover td{background:#fafafa;}
.price{font-weight:800;text-align:right;}
.empty{padding:28px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--bg);color:var(--muted);}

/* 폼 */
.form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px 14px;}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font-weight:700;color:#374151;}
.form-row input,.form-row select,.form-row textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;background:#fff;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:#9bb3ff;box-shadow:0 0 0 3px rgba(20,52,123,.08);}
.form-row select{
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:#111827;background:#fff no-repeat right 12px center/14px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
}
.form-row select:focus{border-color:#9bb3ff;box-shadow:0 0 0 3px rgba(20,52,123,.08);}
.actions,.form_save{display:inline-block;}
.dz:focus{outline:2px solid #93c5fd}

/* 카드/배지/기타 */
.card{margin:20px 0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card .content-bg{padding:10px;border:1px solid #ccc;background:#eee;border-radius:20px;}
.card h3{margin:10px 0 20px;}
.card__head{padding:14px 16px;border-bottom:1px solid #e5e7eb;font-weight:600}
.card__body{padding:14px 16px}
.card__body .table td{height:70px;}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#eef}
.badge-primary{position:absolute;top:6px;left:6px;background:#2563eb;color:#fff;font-size:11px;padding:2px 6px;border-radius:999px}
.badge.published{background:#d1fae5;color:#065f46}
.badge.sold{background:#fee2e2;color:#991b1b}
.badge.draft{background:#fef9c3;color:#92400e}
.badge.archived{background:#e5e7eb;color:#374151}
.badge--blue{background:blue !important;color:#fff;}
.badge--red{background:red !important;color:#fff;}
.badge--gray{background:gray !important;color:#fff;}
.badge--dark{background:black !important;color:#fff;}
.muted{color:var(--muted);padding:10px;font-size:14px;margin-bottom:15px;}
.grid label{display:inline-block;margin:10px 5px;}

/* 지도 모달 (간단 버전) */
.map-modal{position:fixed;inset:0;display:none;z-index:3000;}
.map-modal[aria-hidden="false"]{display:block;}
.map-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.map-modal__dialog{position:relative;z-index:1;width:min(720px,92vw);margin:8vh auto;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.2);}
.map-modal__header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #eee;}
.map-modal__close{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;}
.map-modal__body{padding:14px;}
#gmap{width:100%;height:360px;border-radius:10px;}
#map-addr{margin-top:8px;color:#666;}


.btn{padding:5px 8px !important;}


/* 상세 페이지 타이틀 */
h2.page-title{margin:0;padding:30px 10px 10px;border-bottom:1px solid #ccc;margin-bottom:40px;word-break:keep-all;word-wrap:break-word;}

/* 고급필터 토글 (listings) */
#advFilters > summary::-webkit-details-marker{display:none !important;}
#advFilters > summary{cursor:pointer;user-select:none;}
#advFilters .when-open{display:none !important;}
#advFilters .when-closed{display:inline !important;}
#advFilters[open] .when-open{display:inline !important;}
#advFilters[open] .when-closed{display:none !important;}
#advFilters .adv-panel{
  overflow:hidden !important;max-height:0 !important;opacity:0 !important;transform:translateY(-4px) !important;
  transition:max-height .35s ease,opacity .25s ease,transform .25s ease !important;will-change:max-height,opacity,transform;
}
#advFilters[open] .adv-panel{max-height:1200px !important;opacity:1 !important;transform:none !important;}
@media (prefers-reduced-motion:reduce){#advFilters .adv-panel{transition:none !important;}}

/* 반응형(공통) */
@media (max-width:1024px){
	.list-10 table.table td.actions{
		text-align:left;
	}
	.card__body{
		overflow:hidden;
		overflow-x:auto;
	}
	.list-10 table.table th,
	.list-10 table.table td,
	.list-10 table.table td span{
		white-space:nowrap;
	}
}
@media (max-width:768px){
  .form-grid{grid-template-columns:1fr;}
  .equip-header{flex-direction:column;gap:10px;align-items:flex-start;}
  .main.is-sub{padding:0 !important;}
  .container{max-width:768px;margin:0 auto;padding:0;}
  h2.page-title{margin-bottom:10px;}
}

/* -----------------------------------------------------------
   장비 상세(뷰) 영역 — 중복 제거 후 '단일 정의'
   - PC: 좌우 70/30
   - Mobile: 상하
   - 메인/썸네일 slick 정렬 및 화살표
----------------------------------------------------------- */
.equip-head .equip-view{
  display:flex;flex-direction:column;gap:20px;min-height:200px;
}
@media (min-width:992px){
  .equip-head .equip-view{flex-direction:row;align-items:flex-start;min-height:500px;}
  .equip-view__media{flex:0 0 70%;max-width:70%;}
  .equip-view__info{flex:0 0 30%;max-width:30%;}
}

/* 메인 슬라이더 */
.equip-view__media{overflow:hidden;}
.equip-gallery-main{height:480px;}
.equip-gallery-main .slide{
  position:relative;height:100%;display:flex;align-items:center;justify-content:center;
  background:#f6f7f8;border-radius:10px;border:1px solid #eee;overflow:hidden;
}
.equip-gallery-main .slide img,
.equip-gallery-main img{
  width:100%;height:100%;object-fit:contain;object-position:center center;display:block;
}
.equip-view__media > .slick-list{height:480px;overflow:hidden;}
@media (max-width:1199.98px){.equip-gallery-main{height:440px;}}
@media (max-width:767.98px){.equip-gallery-main{height:250px;}.equip-gallery-main .slide{border-radius:0;}}

/* 썸네일 */
.equip-gallery-thumbs{margin-top:10px;display:block;}
.equip-gallery-thumbs .thumb{
  display:flex;align-items:center;justify-content:center;height:84px;padding:4px;cursor:pointer;border-radius:8px;background:#fff;overflow:hidden;
}
.equip-gallery-thumbs .thumb img{
  width:100%;height:100%;object-fit:cover;border-radius:6px;opacity:.75;transition:opacity .2s ease,box-shadow .2s ease;user-select:none;-webkit-user-drag:none;
}
.equip-gallery-thumbs .slick-current .thumb img,
.equip-gallery-thumbs .thumb:hover img{opacity:1;box-shadow:0 0 0 2px rgba(0,0,0,.08) inset;}
.equip-gallery-thumbs .thumb.is-active{outline:2px solid #0b7;}
.equip-gallery-thumbs .slick-current{outline:2px solid #0b7;}

/* Slick 화살표 (통일) */
.slick-prev,.slick-next{
  position:absolute;top:50%;transform:translateY(-50%);display:block;width:30px;height:30px;padding:0;font-size:0;line-height:0;
  cursor:pointer;color:#000;border:none;outline:none;background:transparent;z-index:99;
}
.slick-prev{left:10px;} .slick-next{right:10px;}
.slick-prev:before,.slick-next:before{font-size:30px;color:#000}

/* 메인/썸네일 개별 화살표 크기 조정 */
.equip-gallery-main .slick-prev,.equip-gallery-main .slick-next{z-index:3;width:40px;height:40px;}
.equip-gallery-main .slick-prev{left:10px;} .equip-gallery-main .slick-next{right:10px;}
.equip-gallery-thumbs .slick-prev,.equip-gallery-thumbs .slick-next{z-index:2;width:28px;height:28px;}
.equip-gallery-thumbs .slick-prev{left:-6px;} .equip-gallery-thumbs .slick-next{right:-6px;}

/* 메타/설명/액션 */
.equip-meta{width:100%;border-collapse:collapse;margin:0 0 16px;}
.equip-meta th,.equip-meta td{padding:8px 10px;border-bottom:1px dashed #eee;text-align:left;}
.equip-meta th{width:120px;font-weight:700;color:#333;background:#fafafa;}
.equip-desc{margin:0;padding:0;}
.equip-desc h3{margin:20px 5px 5px;font-size:18px;text-transform:uppercase;}
.detail-info{white-space:normal;word-break:keep-all;word-wrap:break-word;padding:10px;border:1px solid #eee;border-radius:10px;min-height:150px;}
.equip-actions{display:flex;gap:10px;margin-top:30px;justify-content:flex-end;}
/* 메인 갤러리: 가로 꽉, 세로 초과 크롭 */
.equip-view__media .equip-gallery-main .slide {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0b0c;
  /* 보기 좋은 기본 비율(3:2). 원하는 비율로 조정 가능 */
  aspect-ratio: 3 / 2;
}
.equip-view__media .equip-gallery-main .slide img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* ← 세로 초과 크롭 */
  object-position: center;
  transition: transform .3s ease;
}
.equip-view__media .equip-gallery-main .slide:hover img{ transform: scale(1.01); }

/* 썸네일 바 */
.equip-gallery-thumbs{ margin-top: 10px; }
.equip-gallery-thumbs .thumb{ padding: 3px; }
.equip-gallery-thumbs .thumb img{
  display: block; width: 100%;
  aspect-ratio: 4/3; object-fit: cover;
  border-radius: 10px; border: 2px solid transparent;
  transition: border-color .2s ease, transform .2s ease;
}
.equip-gallery-thumbs .slick-current img{ border-color: #2563eb; }
.equip-gallery-thumbs .thumb:hover img{ transform: translateY(-2px); }

/* Slick 화살표 살짝 다듬기 */
.equip-gallery-main .slick-prev, .equip-gallery-main .slick-next{
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.35);
}
.equip-gallery-main .slick-prev:before, .equip-gallery-main .slick-next:before{ color:#fff; }
/* =======================
 * Mobile-first refresh (≤768px)
 * 최신 트렌드: 넉넉한 여백, 카드 반경↑, 섀도우 소프트, 큰 타이포/터치타겟, 고대비 배지
 * 기존 스타일 위에 오버라이드용
 * ======================= */
@media (max-width: 768px){

  :root{
    --m-pad: 14px;
    --m-gap: 12px;
    --m-radius: 16px;
    --m-shadow: 0 6px 20px rgba(0,0,0,.06);
    --m-ink: #0b1220;
    --m-muted: #6b7280;
    --m-line: #eef1f5;
    --m-chip: #f3f4f6;
    --m-chip-ink: #374151;
  }

  /* 레이아웃/타이포 */
  .sub-layout{ padding: 8px var(--m-pad) 24px; }
  .equip-title{
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 800;
    color: var(--m-ink);
    margin: 10px 0 14px;
    letter-spacing: -0.2px;
  }

  /* 카드 리스트: 1열, 간격 넉넉하게 */
  .cards.cards--equip{
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--m-gap) + 4px);
    margin: 0; padding: 0;
    list-style: none;
  }

  /* 카드 본체 */
  .card.card--equip{
    border: 0;
    border-radius: var(--m-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--m-shadow);
    transform: translateZ(0); /* 스크롤 잔상 줄임 */
  }

  /* 링크 전체 클릭, 탭 하이라이트 */
  .card--equip .card__link{
    display: block;
    -webkit-tap-highlight-color: rgba(37,99,235,.15);
  }

  /* 미디어: 안정된 썸네일 비율 + cover, 로딩시 배경 */
  .card__media{
    position: relative;
    background: #f6f7f8;
  }
  .card__media .equipment-thumb{
    width: 100%;
    aspect-ratio: 4 / 3;               /* 모바일 카드 표준 비율 */
    object-fit: cover;                  /* 가득 채우되 과감히 크롭 */
    display: block;
    transition: transform .25s ease;
    -webkit-user-drag: none;
  }
  .card__media .equipment-thumb.noimg{ object-fit: contain; background:#fafafa; }

  /* 상태 배지: 또렷한 대비, 살짝 크게 */
  .badge.badge--status{
	position: absolute;
	left: 0px;
	top: 0;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 0 0 10px 0;
	backdrop-filter: saturate(1.2);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  }

  /* 본문: 제목 크게, 메타는 칩 형태로 간결화 */
  .card__body{
    padding: 12px var(--m-pad) 8px;
  }
  .card__title{
    display: -webkit-box;
    -webkit-line-clamp: 2;             /* 2줄 말줄임 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(16px, 3.8vw, 18px);
    line-height: 1.3;
    margin-bottom: 8px;
    color: var(--m-ink);
  }
  .card__meta{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .card__meta b{ font-weight: 700; color: var(--m-muted); }
  .card__meta .chip,
  .card__meta .meta__item{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--m-chip);
    color: var(--m-chip-ink);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
  }
  /* 줄바꿈 <br> 제거 효과: 모바일에서는 칩 나열이 더 자연스러움 */
  .card__meta br{ display: none; }

  /* 가격 바: 카드 하단 분리 표시 (접근성/가독성 ↑) */
  .card__price{
    display: flex; align-items: center; justify-content: end;
    padding: 12px var(--m-pad);
    border-top: 1px solid var(--m-line);
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
  }
  .card__price .price-text{ font-weight: 700; color: #2563eb; }
  .card__price .price-usd{
    font-weight: 800;
    font-size: clamp(16px, 4.2vw, 20px);
    letter-spacing: -.2px;
    color: #0f172a;
  }
  .card__price .price-inquiry{
    padding: 6px 10px;
    border-radius: 10px;
    background: #eef2ff;
    color: #1e40af;
    font-weight: 700;
    font-size: 13px;
  }

  /* 페이징: 큰 터치 타깃 + 스티키 간격 고려 */
  .paging.paging--equip{
    display: flex; gap: 8px; justify-content: center; align-items: center;
    padding: 16px var(--m-pad) calc(16px + env(safe-area-inset-bottom));
    position: relative;
  }
  .paging .page{
    min-width: 40px; height: 40px; line-height: 40px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--m-line);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    font-weight: 700;
  }
  .paging .page.is-active{
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
  }

  /* 접속성/모션 선호 */
  @media (prefers-reduced-motion: reduce){
    .card__media .equipment-thumb{ transition: none; }
  }

  /* 다크 모드 대응(선택): 시스템 선호 따르기 */
  @media (prefers-color-scheme: dark){
    .card.card--equip{ background: #0e1116; box-shadow: none; border: 1px solid #202531; }
    .sub-layout{ background: #0b0e13; }
    .equip-title{ color: #e5e7eb; }
    .card__media{ background: #151922; }
    .card__title{ color: #e8ebf1; }
    .card__meta .meta__item, .card__meta .chip{ background: #1a2030; color: #cfd6e4; }
    .card__price{ background: linear-gradient(180deg, #0e1116 0%, #0b0e13 100%); border-top-color: #202531; }
    .paging .page{ background: #0e1116; border-color: #202531; color: #e5e7eb; }
    .paging .page.is-active{ background:#3b82f6; border-color:#3b82f6; }
  }

  /* iOS 하단 제스처 영역 여백 */
  body{ padding-bottom: env(safe-area-inset-bottom); }
}

/* 작은 휴대폰(≤360px)에서 제목/칩 과밀 방지 */
@media (max-width: 360px){
  .card__title{ -webkit-line-clamp: 2; font-size: 16px; }
  .card__meta .meta__item, .card__meta .chip{ padding: 5px 8px; font-size: 11px; }
  .card__price .price-usd{ font-size: 16px; }
}