.modular-main{ padding:0; margin:0; }

/* 공통 섹션 패딩(필요 시만 오버라이드) */
.modular-main .content-section{ padding:4rem 1rem; }

/* 2. Hero 섹션 — video hero */
.modular-main .video-hero{
  position: relative;
  width: 100%;
  min-height: 100svh;     /* 모바일 주소창 안전 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.modular-main .video-hero > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;         /* inline 여백 방지 */
  z-index: 0;
}
.modular-main .video-hero .overlay{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;            /* 히어로는 항상 화이트(전역 규칙과 중복 허용) */
  padding: 0 2rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}
/* 텍스트 사이즈/두께는 typography.css가 담당 */
.modular-main .video-hero h2{ margin-bottom: 1rem; }

/* 모바일 */
@media (max-width: 768px){
  .modular-main .video-hero{ min-height: 60svh; }
}

/* 3. 소개 섹션 — 공용 bg-dim 사용 */
.modular-intro{
  /* 텍스트 색 변수(전역 규칙에서 참고 가능) */
  --text-on-image:#fff;
  --text-strong:#fff;

  background-image:url('../../img/bg/modular-intro-bg.webp');
  background-size:cover;
  background-position:center;
  text-align:center;
  margin-top:75px;
  /* 🔄 기존 ::before/hover 오버레이는 제거 — 공용 .bg-dim가 담당 */
}

/* ⬇️ 공용 bg-dim 변수 설정(색/강도) + 텍스트 화이트 고정 */
.modular-main .modular-intro.bg-dim{
  --dim-rgb: 16,102,84;  /* 인덱스와 유사한 녹색 톤 디밍 (원하면 0,0,0) */
  --dim: .45;            /* 기본 어둡기 */
  --dim-hover: .15;      /* hover 시 어둡기(작을수록 더 밝아짐) */
  color:#fff;
}
.modular-main .modular-intro.bg-dim h1,
.modular-main .modular-intro.bg-dim h2,
.modular-main .modular-intro.bg-dim p,
.modular-main .modular-intro.bg-dim .typewriter{
  color:#fff;
}

/* ⌨️ 타이핑: 레이아웃만 유지(폰트는 전역 규칙) */
.modular-main .typewriter{
  /* font-family 제거 → 전역에서 통일 */
  white-space:normal; overflow:visible;
  margin:0 auto; max-width:800px;
}

/* 4. 베네핏 섹션 */
.modular-benefits{ max-width:900px; margin:0 auto; padding:2rem 1rem; }
.modular-benefits h2{
  color:var(--color-accent);
  margin:1.5rem 0 2rem; text-align:center;
}
.benefit-list-left{ list-style:none; padding:0; margin:0; }
.benefit-list-left li{
  text-align:left; line-height:1.7; margin-bottom:.5rem;
  display:flex; align-items:baseline;
}
.benefit-list-left li span{
  font-weight:600; color:var(--color-accent);
  margin-right:.5rem; min-width:180px;
}

/* 5. 기술 구성 섹션 */
.modular-tech-structure{ max-width:1400px; margin:0 auto; padding:2rem 1rem; }
.section-title-center{
  color:var(--color-accent); text-align:left; margin:2rem 0;
}
.tech-grid{ display:flex; flex-wrap:wrap; gap:2.5rem; align-items:flex-start; }
.tech-image-box{ flex:1 1 500px; position:relative; }
.tech-image-box img.tech-image{
  width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.tech-image-box svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.tech-image-box svg circle{ filter:drop-shadow(0 0 10px yellow); opacity:.9; }
.tech-text-box{ flex:1 1 400px; }
.tech-feature-list{ list-style:none; padding:0; margin:0; text-align:left; }
.tech-feature-list li{ line-height:1.7; margin-bottom:1rem; }
.tech-feature-list li strong{ color:var(--color-primary); }

/* 6. 모듈 타입 섹션 */
.modular-types h2{ color:var(--color-accent); text-align:center; }

/* 카드 컨테이너 */
.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;
}
.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; 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;       /* 왼쪽 정렬(필요하면 center로) */

  text-align:left;
  transition:opacity .3s ease;
}
.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: center bottom;
  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; }

/* 7. CTA 섹션 */
.modular-cta{
  width:100%; background:#fff; text-align:center;
  padding:2rem 1rem 3rem; display:flex; flex-direction:column; align-items:center;
}
.modular-cta p{ margin-bottom:1rem; }
.modular-cta strong{ font-weight:700; color:var(--color-accent); margin-top:.5rem; display:block; }
.modular-cta .cta.primary{
  margin-top:1rem; padding:.8rem 1.6rem;
  background:var(--color-accent); color:#fff; font-weight:600; border-radius:6px; text-decoration:none;
  transition:background-color .3s ease, color .3s ease, border .3s ease;
}
.modular-cta .cta.primary:hover{ background:#fff; color:var(--color-accent); border:1px solid var(--color-accent); }

/* ===== Mobile ===== */
@media screen and (max-width:768px){
  .modular-main .content-section{ padding:2rem 1rem; }

  /* Hero */
  .modular-main .image-hero{
    min-height:60svh; flex-direction:column; justify-content:center; padding:1rem;
  }

  /* Intro */
  .modular-intro{ padding:2.5rem 1rem; margin-top:40px; }
  .typewriter{ white-space:normal; max-width:100%; margin-top:1rem; }

  /* Benefit */
  .benefit-list-left li{
    flex-direction:column; line-height:1.5; margin-bottom:.4rem;
  }
  .benefit-list-left li span{ min-width:auto; margin-bottom:.25rem; }

  /* Tech */
  .tech-grid{ flex-wrap:wrap; gap:.5rem; }
  .tech-image-box{ margin-bottom:.5rem; }
  .tech-text-box{ padding:0; margin-bottom:.5rem; }
  .section-title-center{ text-align:center; margin-bottom:1rem; }
  .tech-feature-list{ padding:0; margin:0; }
  .tech-detail{ margin:.2rem 0 .3rem; }

  /* Cards */
  .card-container{ flex-direction:column; flex-wrap:wrap; gap:20px; padding:1.5rem 1rem; overflow-x:visible; }
  .modular-types .card{ width:100%; max-width:100%; height:auto; }

  /* CTA */
  .modular-cta .cta.primary{ padding:.6rem 1.2rem; }
}

/* === 모바일 전용: 모듈러 카드 여백/높이 재정렬 (front/back 공통) === */
@media (max-width: 768px), (hover: none), (pointer: coarse){

  /* 카드 자체: 고정/최소 높이 해제 */
  .modular-main .modular-types .card{
    height: auto !important;
    min-height: unset !important;
  }

  /* 전면 헤더(제목) — 여백 최소화 + 한 줄 처리 */
  .modular-main .modular-types .card-header{
    padding: .5rem .9rem .35rem !important;
    min-height: auto !important;
    flex: 0 0 auto;
  }
  .modular-main .modular-types .card-header h3{
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 1;
  }

  /* 이미지 영역 — 높이 자동, 비율만 유지 */
  .modular-main .modular-types .card-image{
    height: auto !important;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
  }
  .modular-main .modular-types .card-image img{
    width: 100%; height: 100%;
    object-fit: cover;  /* 필요시 contain으로 되돌려도 OK */
  }

  /* 후면(오버레이) — 패딩 축소 + 2줄 말줄임 */
  .modular-main .modular-types .card .card-overlay{
    padding: .7rem 1rem !important;
    min-height: unset !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .modular-main .modular-types .card .card-overlay h3{
    font-size: .95rem; line-height: 1.3; margin: .2rem 0 .4rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
  }
  .modular-main .modular-types .card .card-overlay p{
    font-size: .9rem; line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
  }
}