/* ═══════════════════════════════════════════════════════════
   PROBLEM STACK — problem-stack.css
   "왜 선택할까 / 구조 분석" 6카드 → 3×2 그리드 (텍스트 + 투명 아이콘)
   · index 전용, problem.css 뒤 로드(override). 검정 금지·다폰 톤(연노랑 카드).
   · 등장 모션: 딜링(deal.js) — 중앙 더미에서 자기 칸으로 한 장씩 펼쳐짐.
     스크롤 하이재킹/핀 고정 없음(IntersectionObserver stagger). 반복재생.
   · 기존 problem.css 의 다크/그리드/초기숨김 규칙을 명시 override.
═══════════════════════════════════════════════════════════ */

/* 구조 분석 네비 앵커 보정(sticky 헤더) */
#problem {
  scroll-margin-top: 80px;
}

/* ── 3×2 그리드 복원 (1 2 3 / 4 5 6) ── */
.problem .problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

/* 바깥 카드 = 3D 무대(원근) + 딜링 transform 컨테이너 (시각 스타일은 inner 로 이동) */
.problem .problem__card {
  perspective: 1000px;
  background: transparent; /* problem.css 다크 배경 무력화 */
  border: 0;
  padding: 0;
  overflow: visible; /* 3D 팝(translateZ) 잘리지 않게 */
  grid-template-areas: none;
  /* 기존 problem.css 초기 숨김 무력화 → JS 없으면 즉시 3×2 그리드로 보임.
     (딜링 초기상태는 .problem__grid.js-deal 게이트로만 적용) */
  opacity: 1;
  transform: none;
}
.problem .problem__card::before {
  content: none; /* 기존 하단 구분선 제거 */
}

/* 실제 보이는 카드 = inner — 평소 입체 그림자 + hover 시 3D 틸트.
   딜링(바깥 카드 transform)과 독립된 transform/transition → 충돌 없음 */
.problem .problem__card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-bg-tint, #fff8e6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07); /* 평소 입체감 */
  transform-style: preserve-3d;
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease,
    background 0.3s ease;
}
/* hover(PC) — 원근 틸트 + 살짝 팝 + 그림자 깊게 */
@media (hover: hover) {
  .problem .problem__card:hover .problem__card-inner {
    transform: rotateX(6deg) rotateY(-6deg) translateZ(22px);
    box-shadow: 0 30px 56px rgba(0, 0, 0, 0.2);
    background: #fff4d6;
  }
}
/* 모션 줄이기 — 틸트 정지(정적 카드) */
@media (prefers-reduced-motion: reduce) {
  .problem .problem__card-inner {
    transition: none;
  }
  .problem .problem__card:hover .problem__card-inner {
    transform: none;
  }
}

/* ── 아이콘 (배경 제거된 투명 PNG) — 카드 상단 ── */
.problem__visual {
  order: -1;
  flex-shrink: 0;
  width: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.problem__visual-img {
  width: 100%;
  max-width: 76px;
  height: auto;
  object-fit: contain;
}

/* ── 텍스트 ── */
.problem__text {
  width: 100%;
  min-width: 0;
}
.problem__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold, #f0c000); /* 골드 원 (6카드 통일) */
  color: #1a1a1a; /* 골드 배경 대비 — 진한 글씨로 가독성 확보 */
  font-family: var(--font-en, sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 14px;
}
.problem__title {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 900;
  line-height: 1.35;
  color: var(--color-text, #1a1a1a);
  margin: 0 0 12px;
  word-break: keep-all;
}
.problem__title em {
  font-style: normal;
  color: var(--color-point-red, #e23b34); /* 빨강 강조 키워드(기존 유지) */
}
.problem__desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text-sub, #555);
  margin: 0 0 18px;
  word-break: keep-all;
}

/* ── 체크리스트 (빨강 체크 = 인라인 SVG data-URI, 이모지 아님) ── */
.problem__check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.problem__check li {
  position: relative;
  padding-left: 28px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text, #1a1a1a);
  word-break: keep-all;
}
.problem__check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23e23b34'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ══════════════════════════════════════════════════════════
   딜링 모션 — 한 더미에서 자기 칸으로 펼쳐짐 (deal.js 제어)
   · --deal-x / --deal-y / --deal-rot : JS가 카드별 더미 오프셋 주입
   · --deal-delay : 카드별 stagger(0.12s 간격) 주입
   · 게이트(.js-deal / .rise-mode)는 JS 동작 시에만 → 비-JS는 3×2 그리드 그대로
══════════════════════════════════════════════════════════ */

/* [데스크톱] 초기 = 중앙 더미(거의 같은 자리에 포갬 + 살짝 회전). transition 없음 → 즉시 더미 */
.problem .problem__grid.js-deal .problem__card {
  transform: translate(var(--deal-x, 0), var(--deal-y, 0))
    rotate(var(--deal-rot, 0deg)) scale(0.92);
  transition: none;
  will-change: transform;
}
/* 펼쳐짐 = 자기 칸으로 안착(translate 0, rotate 0), ease-out, stagger 딜레이 */
.problem .problem__grid.js-deal.is-dealt .problem__card {
  transform: none;
  transition: transform 0.72s cubic-bezier(0.16, 0.84, 0.44, 1)
    var(--deal-delay, 0s);
}

/* [모바일] 더미 대신 카드별 순차 등장(rise) — 겹침 혼란 방지 */
.problem .problem__grid.rise-mode .problem__card {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: none;
  will-change: transform, opacity;
}
.problem .problem__grid.rise-mode.is-dealt .problem__card {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease var(--deal-delay, 0s),
    transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) var(--deal-delay, 0s);
}

/* 모션 줄이기 설정 존중 — 모션 없이 즉시 3×2 그리드 표시 */
@media (prefers-reduced-motion: reduce) {
  .problem .problem__grid.js-deal .problem__card,
  .problem .problem__grid.rise-mode .problem__card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   반응형
══════════════════════════════════════════════════════════ */

/* 태블릿: 3 → 2열 */
@media (max-width: 900px) {
  .problem .problem__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* 모바일: 2 → 1열 */
@media (max-width: 640px) {
  .problem .problem__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    gap: 14px;
  }
  .problem .problem__card-inner {
    padding: 24px 22px;
  }
  .problem__visual {
    width: 68px;
  }
  .problem__visual-img {
    max-width: 68px;
  }
}