/* ============================================================
   static/product-card.css — facet 상품 카드 단일 스타일
   ------------------------------------------------------------
   shared/product_card.html(facet_card 매크로) 전용.
   모든 클래스를 mx-* 로 격리 → age/disease에 남아 있는 기존 로컬
   .product-card / .badge / .detail-coverage-* CSS와 충돌하지 않는다.
   색상·반경은 colors.css의 --c-* / --radius-* 토큰만 참조하고,
   토큰이 없는 페이지 대비 리터럴 폴백을 둔다("자체 완결" 원칙).

   로드: 각 페이지 <head>에 colors.css(=fonts_head 경유) 뒤로
     <link rel="stylesheet" href="/static/product-card.css">
   (인라인 <style> 뒤에 링크를 두면 .product-detail-panel 등 공유 클래스에서
    이 파일이 우선한다 — 순서 무관하게 값은 동일하지만 습관적으로 뒤에 배치 권장.)
   ============================================================ */

/* ── 카드 컨테이너 ── */
.mx-pcard{
  background: var(--c-white, #ffffff);
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: var(--radius-lg, 18px);
  padding: 18px;
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mx-pcard:hover{
  border-color: var(--c-navy-soft, #3b82f6);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card, 0 2px 14px rgba(15,23,42,.06));
}
/* 1위 하이라이트 — 테두리 강조만(다크 그라디언트 '당선' 연출은 규제상 배제) */
.mx-pcard.is-best{
  border-color: var(--c-navy-mid, #1d4ed8);
  box-shadow: 0 0 0 1px var(--c-navy-mid, #1d4ed8) inset;
}

/* ── 헤더 (좌: 식별정보 / 우: 가격) ── */
.mx-pcard-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mx-pcard-id{ min-width:0; }
.mx-pcard-insurer{ font-size:.78rem; color: var(--c-slate, #64748b); font-weight:700; }
.mx-pcard-name{ font-size:1rem; font-weight:800; letter-spacing:-.3px; color: var(--c-text-hi, #0f172a); margin-top:2px; line-height:1.35; }

.mx-pcard-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mx-badge{
  font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:999px;
  border:1px solid var(--c-line, #e2e8f0); color: var(--c-slate, #64748b);
  white-space:nowrap;
}
.mx-badge-best{ background: var(--c-surface-tint, #eff6ff); border-color: var(--c-navy-mid, #1d4ed8); color: var(--c-navy-mid, #1d4ed8); cursor:help; }
.mx-badge-cheap{ background: var(--c-ok-soft, #f0fdf4); border-color: rgba(22,163,74,.4); color: var(--c-ok, #16a34a); }
.mx-badge-wide{ background:#f5f3ff; border-color: rgba(109,40,217,.35); color:#6d28d9; }
.mx-badge-nonrenew{ background: var(--c-ok-soft, #f0fdf4); border-color: rgba(34,197,94,.4); color: var(--c-ok, #16a34a); }

.mx-pcard-price{ text-align:right; flex-shrink:0; }
.mx-pcard-price-amt{ font-size:1.25rem; font-weight:900; letter-spacing:-.5px; color: var(--c-text-hi, #0f172a); }
.mx-pcard-price-unit{ font-size:.72rem; color: var(--c-slate, #64748b); margin-left:2px; }
.mx-price-idx{ display:block; font-size:.72rem; font-weight:700; margin-top:2px; }
.mx-price-good{ color: var(--c-ok, #16a34a); }
.mx-price-high{ color: var(--c-danger, #dc2626); }

/* ── 주요 담보 (top3) ── */
.mx-pcard-covlabel{ font-size:.74rem; color: var(--c-slate, #64748b); font-weight:700; margin:14px 0 6px; }
.mx-pcard-covlist{ display:flex; flex-direction:column; gap:6px; }
.mx-pcard-covitem{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:.82rem; }
.mx-pcard-covname{ color: var(--c-text, #334155); flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mx-pcard-covamt{ color: var(--c-text-hi, #0f172a); font-weight:700; flex:0 1 auto; max-width:58%; text-align:right; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 갱신형 경고 ── */
.mx-pcard-warn{
  margin-top:12px; padding:8px 10px; border-radius: var(--radius-sm, 6px);
  background: var(--c-warn-soft, #fffbeb); border:1px solid rgba(217,119,6,.25);
  color: var(--c-warn, #d97706); font-size:.76rem; font-weight:600;
}

/* ── 이런 분이라면 (target_customer) ── */
.mx-pcard-persona{ margin-top:12px; padding:9px 11px; border-radius:var(--radius-sm, 6px);
  background:var(--c-surface-tint, #eff6ff); border:1px solid var(--c-line, #e2e8f0);
  display:flex; gap:8px; align-items:baseline; }
.mx-pcard-persona-label{ font-size:.68rem; font-weight:800; color:var(--c-navy-mid, #1d4ed8); white-space:nowrap; flex-shrink:0; }
.mx-pcard-persona-text{ font-size:.78rem; color:var(--c-text, #334155); line-height:1.5; word-break:keep-all; min-width:0; }

/* ── 푸터 액션 ── */
.mx-pcard-footer{ display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--c-line, #e2e8f0); }
.mx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius: var(--radius-sm, 6px);
  font-weight:700; font-size:.86rem; cursor:pointer; text-decoration:none;
  border:1px solid transparent; transition: background .12s, border-color .12s;
}
.mx-btn-primary{ flex:1; background: var(--c-navy-mid, #1d4ed8); color: var(--c-on-accent, #fff); }
.mx-btn-primary:hover{ background: var(--c-navy-deep, #0f172a); }
.mx-btn-ghost{ background:transparent; border-color: var(--c-line, #e2e8f0); color: var(--c-slate, #64748b); }
.mx-btn-ghost:hover{ border-color: var(--c-navy-soft, #3b82f6); color: var(--c-navy-mid, #1d4ed8); }

/* ── 상세 패널 (product-detail.js가 .show 토글) ── */
.product-detail-panel{ display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--c-line, #e2e8f0); }
.product-detail-panel.show{ display:block; }

.mx-detail-aiwarn{
  background: rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25);
  border-radius: var(--radius-sm, 6px); padding:6px 10px; margin-bottom:10px;
  font-size:.66rem; color: var(--c-warn, #d97706);
}
.mx-detail-list{ display:flex; flex-direction:column; gap:10px; }
.mx-detail-item{ border:1px solid var(--c-line, #e2e8f0); border-radius: var(--radius-sm, 6px); padding:10px 12px; }
.mx-detail-head{ display:flex; justify-content:space-between; gap:10px; }
.mx-detail-name{ font-weight:700; font-size:.84rem; color: var(--c-text-hi, #0f172a); }
.mx-detail-amt{ font-weight:700; font-size:.84rem; color: var(--c-navy-mid, #1d4ed8); white-space:nowrap; }
.mx-detail-condition{ font-size:.76rem; color: var(--c-text, #334155); margin-top:4px; line-height:1.5; }
.mx-detail-noncov{ font-size:.74rem; color: var(--c-danger, #dc2626); margin-top:4px; }
.mx-detail-empty{ padding:16px; text-align:center; color: var(--c-slate, #64748b); font-size:.82rem; }

/* ── 그리드 (호출부 공용) ── */
.mx-product-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
@media (max-width:640px){ .mx-product-grid{ grid-template-columns:1fr; } }