@charset "UTF-8";
/* ============================================================
   themes/erp/style/card.css
   상품 카드 + 그리드
   ------------------------------------------------------------
   목록 / 검색결과 / 상세 관련상품 / 메인 — 전부 이 하나를 쓴다.
   → _card.php 파셜 하나로 재사용

   로드: 컨트롤러의 additionalCss 에 'card.css'
   의존: base.css (토큰)
   ============================================================ */


/* ============================================================
   1. 그리드
   칸 사이 1px 선을 border 가 아니라 gap+배경으로 만든다.
   border 로 그리면 셀끼리 겹쳐서 두께가 2px 로 보이는 자리가 생김.
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-soft);      /* 이게 칸 사이 선으로 보임 */
  border:1px solid var(--line-soft);
}

/* 목록 페이지에서 도구줄 바로 아래 붙일 때 위 선 중복 제거 */
.grid.is-attached{ border-top:0; }


/* ============================================================
   2. 카드
   ============================================================ */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  padding:17px;
  transition:background .18s ease;
}
.card:hover{ background:#fff; }

/* 카드 전체가 링크. a 로 감싸도 flex 가 깨지지 않게 */
.card > a{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}

/* 품절 — 흐리게. 클릭은 되게 둔다(상세에서 재입고 문의)
   배지는 흐림에서 제외 — 품절 표시 자체가 흐려지면 본말전도 */
.card.is-soldout .card-fig img,
.card.is-soldout .card-name{ opacity:.55; }


/* ============================================================
   3. 이미지
   왼쪽 세로 띠가 카테고리 색.
   --band 는 조상(body.cat-N 또는 .card.cat-N)에서 내려온다.
   ============================================================ */
.card-fig{
  position:relative;
  aspect-ratio:4/3;
  margin-bottom:13px;
  background:var(--band-lt);
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.card-fig img{
  width:100%;
  height:100%;
  object-fit:contain;              /* 상품 사진은 잘리면 안 되므로 contain */
  padding:8px 8px 8px 14px;        /* 왼쪽은 색띠 폭만큼 더 */
}
/* 색띠 */
.card-fig::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:7px;
  background:var(--band);
}
/* 이미지 없을 때 문구 */
.card-fig .noimg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-faint);
}


/* ============================================================
   4. 배지 (할인율 / 품절)
   이미지 위 왼쪽 상단. 색띠를 피해서 살짝 안쪽에.
   ============================================================ */
.card-badge{
  position:absolute;
  top:0;
  left:7px;                        /* 색띠 폭만큼 밀어냄 */
  z-index:2;
  padding:5px 11px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
}
/* 할인 — 카테고리 색 (그 분류 색띠와 같은 색) */
.card-badge.sale{ background:var(--band); }

/* ============================================================
   5. 글자
   ============================================================ */

/* 상품코드 (label_code) — 코드로 찾는 사람이 많아 맨 위에 */
.card-code{
  margin-bottom:5px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--ink-faint);
  min-height:1em;                  /* 코드 없는 상품과 줄이 안 어긋나게 */
}

.card-name{
  margin:0 0 6px;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.01em;

  /* 2줄까지만. 넘치면 … */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 규격·단위 — list_options 값들을 한 줄에 이어 붙인다.
   값마다 줄을 나누면 카드 높이가 상품마다 들쭉날쭉해져서
   그리드 정렬이 깨진다. 넘치면 자동 줄바꿈. */
.card-spec{
  margin:0 0 13px;
  font-size:12.5px;
  font-weight:400;              /* 300 → 400. 너무 흐려서 안 읽혔음 */
  line-height:1.6;
  color:var(--ink-soft);        /* faint → soft. 한 단계 진하게 */
}
.card-spec span{ display:inline; }

/* 값 사이 가운데점. 첫 값 앞에는 안 붙음 */
.card-spec span + span::before{
  content:"·";
  margin:0 6px;
  color:var(--shelf-dark);      /* 구분자는 글자보다 연하게 — 값이 먼저 읽히게 */
}


/* ============================================================
   6. 가격
   ============================================================ */
.card-foot{
  margin-top:auto;                 /* 카드 높이가 달라도 가격은 바닥에 정렬 */
  padding-top:11px;
  border-top:1px solid var(--line-soft);
  text-align:right;
}

/* 할인 전 정가 (취소선) */
.price-origin{
  display:block;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--ink-faint);
  text-decoration:line-through;
  line-height:1.4;
}

.price{
  font-family:var(--f-mono);
  font-size:16px;
  font-weight:900;
  font-variant-numeric:tabular-nums;   /* 숫자 폭 고정 → 세로로 자리 맞음 */
  line-height:1.4;
}
.price small{
  font-size:11px;
  font-weight:400;
  color:var(--ink-faint);
  margin-left:1px;
}
/* 할인 적용가 */
.price.is-sale{ color:var(--warn); }

/* 가격 대신 문구가 나오는 경우 (품절/가격문의/견적문의)
   숫자가 아니므로 mono 를 쓰지 않는다 */
.price.ask{
  font-family:var(--f-body);
  font-size:16px;
  font-weight:500;
  color:var(--accent);
}

.price.soldout{
  font-family:var(--f-body);
  font-size:16px;
  font-weight:500;
  color:var(--warn);
}


/* ============================================================
   7. 반응형
   ============================================================ */
@media (max-width:980px){
  .grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .card{ padding:13px; }
  .card-name{ font-size:13.5px; }
  .price{ font-size:15px; }
}