/* ==========================================================================
File: public/styles/components-cards.css
Purpose:
  카드 레이아웃 정책(열 수/반응형)과 3D 플립 메커니즘을 정의한다.
Primary Responsibility:
  카드 컨테이너, 카드 3D 상태 클래스, 모바일 단일카드 표시 규칙을 제공한다.
Design Intent:
  - Policy/Mechanism 분리:
    - Policy: JS가 계산한 열 수(`--policy-columns`, `--card-min`)
    - Mechanism: CSS grid/transform 렌더링
  - 정책 스크립트가 없을 때도 동일한 브레이크포인트로 동작하도록 fallback을 둔다.
  - 모바일에서 카드 1장만 표시해 기존 PUSH UX 감성을 유지한다.
Non-Goals:
  - 카드 내부 타이포/색상 톤은 app.css에서 담당한다.
Dependencies:
  - core.css 토큰(--gap-*, --radius-2, --card-height 등)
Constraints & Assumptions:
  - 카드 루트는 `.card-node`, 내부 3D 래퍼는 `.card-3d`를 사용한다.
  - 플립 상태 클래스는 `.is-flipped`를 사용한다.
  - 모바일 활성 카드 클래스는 `.is-mobile-active`를 사용한다.
Extension Points:
  - 브레이크포인트 추가/수정, 카드 높이 정책 조정, 모바일 전환 애니메이션 조정.
========================================================================== */

.card-display-area{
  flex: 1;
  min-height: 0;
  display: grid;
  align-items: stretch;
  gap: var(--gap-2);
  grid-template-columns: 1fr;
}

/* Fallback layout policy when JS policy has not been applied yet. */
@media (min-width: 700px){
  .card-display-area{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px){
  .card-display-area{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px){
  .card-display-area{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px){
  .card-display-area{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Preferred layout policy once JS policy engine is ready. */
.card-display-area[data-policy-ready="on"]{
  grid-template-columns: repeat(var(--policy-columns, 1), minmax(var(--card-min, 240px), 1fr));
}

.card-node{
  position: relative;
  min-width: 0;
  height: var(--card-height);
  perspective: 1000px;
  cursor: pointer;
}

.card-3d{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s ease-in-out;
}

.card-node.is-flipped .card-3d{
  transform: rotateY(180deg);
}

.side{
  position: absolute;
  inset: 0;
  min-width: 0;
  border-radius: var(--radius-2);
  padding: clamp(14px, 1.4vw, 24px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.front{
  transform: rotateY(0deg);
}

.back{
  transform: rotateY(180deg);
}

.scroll-v{
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-right: 0;
}

/* Mobile single-card policy (existing PUSH UX). */
@media (max-width: 768px){
  .card-display-area{
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 72vh;
  }

  .card-node{
    position: absolute;
    width: min(90vw, 340px);
    height: clamp(480px, 78vh, 620px);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92) translateY(24px);
    transition: opacity 0.3s ease, transform 0.35s ease;
  }

  .card-node.is-mobile-active{
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  .card-3d{
    transition: none;
  }

  .card-node{
    transition: none;
  }
}