/* =========================================
   MODULAR TYPES — CARD COMPONENT (통합본)
   - 전면/후면 이미지 하단 정렬 통일
   - PC: hover / Mobile: tap(open/close)
   - 카드별 미세조정: --card-object-y 변수
   ========================================= */

/* 카드 컨테이너 */
.modular-types .card-container{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  justify-content:center;
  max-width:1200px;
  padding:40px 20px;
  margin:0 auto;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

/* 카드 박스 (배경 흰색 + 녹색 테두리) */
.modular-types .card{
  position:relative;
  flex:0 0 360px;
  min-width:280px;
  max-width:360px;
  height:320px;
  border-radius:16px;
  overflow:hidden;

  background:#fff;                                  /* 흰색 배경 */
  border:1.5px solid var(--color-primary);          /* 녹색 테두리 */

  box-shadow:0 6px 16px rgba(0,0,0,.08);
  scroll-snap-align:start;
  transition:flex .3s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  /* ▼ 전면/후면 이미지 세로 정렬 공통 변수 (기본: 하단 100%) */
  --card-object-y: 100%;
}
.modular-types .card:hover{
  flex:0 0 380px;
  border-color: color-mix(in oklab, var(--color-primary) 85%, white);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

/* 카드 헤더(라벨) — 텍스트 녹색 */
.modular-types .card-header,
.modular-types .card-header *{
  color: var(--color-primary) !important;
}
.modular-types .card-header{
  padding:1rem 1rem .5rem;
  font-weight:600;
}

/* 카드 이미지(전면) */
.modular-types .card-image{
  width:100%;
  height:100%;
  transition:opacity .3s ease;
}
.modular-types .card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position: 50% var(--card-object-y); /* ← 변수로 통일 */
  display:block;
  transition:opacity .3s ease;
}

/* 카드 오버레이(후면) — 상단 정렬 + 파란 텍스트 */
.modular-types .card .card-overlay{
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  z-index:1;
  padding: 1rem 1.25rem 1.25rem;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;   /* 텍스트 블록은 상단 정렬 */
  align-items:flex-start;
  text-align:left;

  transition:opacity .3s ease;
}

/* PC hover 전환(이미지 감춤 / 오버레이 표시) — 모바일은 미디어쿼리에서 처리 */
.modular-types .card:hover .card-image img{ opacity:0; }
.modular-types .card:hover .card-overlay{
  opacity:1;
  pointer-events:auto;
}

/* 오버레이 아이콘(후면 이미지, 흐림) — 전면과 같은 하단 정렬 */
.modular-types .card-overlay .overlay-icon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position: 50% var(--card-object-y); /* ← 변수로 통일 */
  transform:translate(0,0);
  opacity:.4;
  z-index:0;
  pointer-events:none;
}

/* 오버레이 텍스트 — 블루 */
.modular-types .card-overlay h3,
.modular-types .card-overlay p{
  color:#2563eb !important;
  text-shadow:none;
  z-index:1;
}
.modular-types .card-overlay h3{ margin:.25rem 0 .5rem; }
.modular-types .card-overlay p{  margin:0 0 1rem; }

/* ===========================
   카드별 미세조정 유틸(선택)
   ex) <article class="card align-95">
   =========================== */
.modular-types .card.align-95{ --card-object-y:95%; }
.modular-types .card.align-90{ --card-object-y:90%; }
.modular-types .card.align-85{ --card-object-y:85%; }

/* =========================================
   [PC] hover 가능한 환경: 기존 hover 동작 유지
   ========================================= */
@media (hover: hover) and (pointer: fine){
  .modular-types .card:hover .card-image img{ opacity:0; }
  .modular-types .card:hover .card-overlay{ opacity:1; pointer-events:auto; }
}

/* =========================================
   [MOBILE] hover 없음 → 탭으로 열기/닫기
   ========================================= */
@media (hover: none), (pointer: coarse){
  /* 기본: 닫힘 */
  .modular-types .card .card-overlay{
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease;
  }
  /* 열림 상태 */
  .modular-types .card.is-open .card-overlay{
    opacity:1;
    pointer-events:auto;
  }
  /* 열림 상태에서 전면 이미지 페이드 */
  .modular-types .card.is-open .card-image img{ opacity:0; }

  /* 유저 힌트: "탭하여 자세히 보기" */
  .modular-types .card::after{
    content:"내용 보기";
    position:absolute;
    right:.75rem;
    bottom:.6rem;
    padding:.28rem .5rem;
    font-size:.75rem;
    line-height:1;
    color:#1f2937;
    background:#fff;
    border:1px solid rgba(0,0,0,.15);
    border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    opacity:.9;
    pointer-events:none;
  }
  /* 열렸을 때 힌트 숨김 */
  .modular-types .card.is-open::after{ display:none; }
}