/* ============================================================
   sec-products — 제품 구성 (도면 ADX / 프리미엄)
   전 규칙 #sec-products 하위로 스코프. tokens.css 변수 사용.
   ============================================================ */

#sec-products .prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: stretch;
}

/* 카드별 신호색 (로컬 변수) */
#sec-products .prod-card--basic   { --pc-c: var(--c-violet); --pc-vivid: var(--c-violet-vivid); --pc-soft: var(--c-violet-soft); --pc-glow: var(--c-violet-glow); }
#sec-products .prod-card--premium { --pc-c: var(--c-indigo); --pc-vivid: var(--c-indigo-vivid); --pc-soft: var(--c-indigo-soft); --pc-glow: var(--c-indigo-glow); }

/* ---- 카드 (글라스 패널) ---- */
#sec-products .prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 2.6vw, var(--space-7));
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pc-c);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* 상단 은은한 오로라 워시 */
#sec-products .prod-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: radial-gradient(120% 80% at 15% 0%, var(--pc-soft), transparent 70%);
  opacity: .7;
  pointer-events: none;
}
#sec-products .prod-card:hover,
#sec-products .prod-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--pc-c) 45%, var(--line));
}

/* 프리미엄: 3색 시그니처 상단선 + 강조 */
#sec-products .prod-card--premium {
  border-top: 3px solid transparent;
  border-image: var(--grad-tri) 1;
  box-shadow: var(--shadow);
}
#sec-products .prod-card--premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-tri);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .5;
  pointer-events: none;
}

/* ---- 리본(확장형 표식) ---- */
#sec-products .prod-card__ribbon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--grad-tri);
  box-shadow: 0 8px 18px -8px var(--c-indigo-glow);
}

/* ---- 헤드(아이콘 + 태그 + 타이틀) ---- */
#sec-products .prod-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
#sec-products .prod-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--pc-soft);
  color: var(--pc-c);
  font-size: 1.8rem;
}
#sec-products .prod-card__icon i { line-height: 1; }
#sec-products .prod-card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pc-c);
}
#sec-products .prod-card__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: var(--lh-tight);
  margin-top: 2px;
}

/* ---- 본문 ---- */
#sec-products .prod-card__lead {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-body);
  word-break: keep-all;
  margin-top: var(--space-2);
}
#sec-products .prod-card__desc {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  word-break: keep-all;
}

/* ---- 특징 목록 ---- */
#sec-products .prod-card__list {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}
#sec-products .prod-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  word-break: keep-all;
}
#sec-products .prod-card__list li::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--pc-soft);
  color: var(--pc-c);
  font-size: .72rem;
  font-weight: 900;
  margin-top: 1px;
}

/* ---- 반응형 ---- */
@media (max-width: 720px) {
  #sec-products .prod-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---- 모션 축소 존중 ---- */
@media (prefers-reduced-motion: reduce) {
  #sec-products .prod-card { transition: none; }
  #sec-products .prod-card:hover,
  #sec-products .prod-card:focus-within { transform: none; }
}