/* ============================================================
   product-card.css — dodon 상품 카드 (_card.php와 짝)
   ------------------------------------------------------------
   · 목업 best/prod 카드 기반 (이미지+이름+가격, 심플)
   · 그리드(.dp-grid)에 카드(.dp-card) N개 나열
   · 색은 상단 변수로 (테마색 바뀌면 여기만)
   ============================================================ */
:root{
  --dp-ink:#243247;          /* 기본 글자 */
  --dp-muted:#61707A;        /* 흐린 글자(옵션 등) */
  --dp-line:#E5E8E5;         /* 카드 테두리 */
  --dp-price:#243247;        /* 정상가 색 */
  --dp-sale:#E5484D;         /* 할인가/할인배지(빨강) */
  --dp-quote:#23695A;        /* 가격문의(초록) */
  --dp-accent:#2F8F7B;       /* hover 포인트 */
}
/* ── 목록 페이지 공통 레이아웃 (카테고리/검색 공용) ── */
.dp-wrap{ padding:32px 0 56px; }
.dp-container{
  width:min(1180px, calc(100% - 40px));   /* 🔥 폭 제한 + 가운데 정렬 */
  margin:0 auto;
}
.dp-title{ font-size:22px; font-weight:900; margin:0 0 20px; color:var(--dp-ink); } 

/* ── 그리드: 카드 나열 (기본 4열) ── */
.dp-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));   /* 🔥 4 → 5 한줄에 보이는 상품수*/
  gap:13px;   /* 🔥 상품카드 간격*/
}

/* ── 카드 1개 ── */
.dp-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:14px;
  border:1px solid var(--dp-line);
  background:#fff;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dp-card:hover{
  transform:translateY(-2px);
  border-color:var(--dp-accent);
  box-shadow:0 14px 28px rgba(36,50,71,.08);
}

/* ── 배지 (할인율 / 품절): 카드 좌상단 ── */
.dp-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:2px 7px; font-size:11px; font-weight:900; color:#fff;
}
.dp-badge-sale{ background:var(--dp-sale); }        /* 할인 빨강 */
.dp-badge-soldout{ background:#9aa4ac; }            /* 품절 회색 */

/* ── 이미지 영역 ── */
.dp-thumb{
  height:170px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:#F7F8F6; overflow:hidden;
}
.dp-thumb img{
  max-width:100%; max-height:100%; object-fit:contain;
  transition:transform .18s ease;
}
.dp-card:hover .dp-thumb img{ transform:scale(1.05); }
.dp-noimg{ color:#c2c9c2; font-size:12px; font-weight:700; }  /* 이미지 로드 실패 대체 */

/* ── 상품명 (2줄까지, 넘치면 …) ── */
.dp-name{
  font-weight:800; font-size:14px; color:var(--dp-ink); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.8em;   /* 이름 1줄/2줄이어도 카드 높이 일정하게 */
}
.dp-code{ color:var(--dp-muted); font-weight:700; font-size:12px; }  /* label_code */

/* ── 리스트 옵션 (규격 등, 작은 회색 텍스트) ── */
.dp-opts{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.dp-opt{ font-size:12px; color:var(--dp-muted); line-height:1.3; }

/* ── 가격 영역 (하단 고정, 위 구분선) ── */
.dp-price{
  margin-top:auto; padding-top:10px; text-align:right;
  border-top:1px solid #F0F1EF;
}
.dp-price-origin{
  display:block; font-size:11px; color:#9aa4ac;
  text-decoration:line-through; line-height:1.3;   /* 할인 시 정가 취소선 */
}
.dp-price-now{
  display:block; font-size:17px; font-weight:900; color:var(--dp-price); line-height:1.3;
}
.dp-price-now.dp-sale{ color:var(--dp-sale); }     /* 할인가 빨강 */
.dp-price-now.dp-quote{ color:var(--dp-quote); }   /* 가격문의 초록 */
.dp-price-now.dp-muted{ color:#9aa4ac; }           /* 품절/견적문의 회색 */

/* ── 반응형 ── */
@media (max-width:1100px){ .dp-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:760px){  .dp-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; } }
@media (max-width:460px){  .dp-grid{ grid-template-columns:1fr; } }


/* ── 검색 결과 헤더 (search/result.php) ── */
.dp-search-head{ margin-bottom:24px; }
.dp-title{ font-size:22px; font-weight:900; color:var(--dp-ink); margin:0 0 6px; }
.dp-keyword{ color:var(--dp-accent); }                    /* 검색어 강조(초록) */
.dp-count{ margin:0; font-size:14px; color:var(--dp-muted); }
.dp-count strong{ color:var(--dp-ink); }

/* ── 검색 결과 없음 ── */
.dp-empty{
  padding:60px 20px; text-align:center;
  border:1px solid var(--dp-line); background:#fff;
}
.dp-empty p{ margin:0 0 6px; font-size:16px; color:var(--dp-ink); }
.dp-empty-sub{ font-size:14px; color:var(--dp-muted) !important; }


/* ── 페이징 (_pagination.php, 상품목록/검색/게시판 공용) ── */
.dp-paging{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin-top:40px; flex-wrap:wrap;
}
.dp-page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px;
  border:1px solid var(--dp-line); background:#fff;
  font-size:14px; font-weight:700; color:var(--dp-ink);
  transition:background .15s, border-color .15s, color .15s;
}
.dp-page:hover{ border-color:var(--dp-accent); color:var(--dp-accent); }

/* 현재 페이지: 초록 채움 */
.dp-page.is-current{
  background:var(--dp-accent); border-color:var(--dp-accent); color:#fff; cursor:default;
}

/* 처음/이전/다음/마지막 화살표: 살짝 흐리게 */
.dp-page-edge{ color:var(--dp-muted); font-weight:900; }

/* 비활성(첫/끝 페이지의 이전/처음 등): 회색, 클릭 불가 */
.dp-page.is-disabled{
  color:#c8cec8; background:#f7f8f6; cursor:default; pointer-events:none;
}