@charset "utf-8";
/* =====================================================================
   BABY SCENE STUDIO · main.css  (메인/랜딩 전용)
   히어로(배경 전체 이미지) / 컨셉 미리보기 / 특징 3컬럼
   ===================================================================== */

/* ---------- HERO : 최대 1200 중앙정렬, 뒷배경 이미지 영역 ---------- */
/* main_top.jpg(1448×1086, 4:3) 비율로 높이 자동 → 최대폭 1200일 때 높이 900 */
/* 이미지(위) → 텍스트(아래) 스택 구조 : 배경 원본을 전혀 건드리지 않음 */
.hero{
  overflow:hidden; background:var(--cream);
  max-width:1200px; margin:0 auto;
  display:block;
}

/* 배경 롤링 이미지 블록 (텍스트 위) */
/* touch-action:pan-y → 세로 스크롤은 브라우저, 가로 스와이프는 JS가 처리 */
.hero-bg{
  position:relative; width:100%; aspect-ratio:1448 / 800; overflow:hidden;
  touch-action:pan-y; cursor:grab;
}
.hero-bg:active{cursor:grabbing;}
.hero-bg .ph-label{font-size:15px; color:#b3a892;}

/* 배경 롤링(크로스페이드) */
.hero-roll{position:absolute; inset:0; overflow:hidden;}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease;}
.hero-slide.is-active{opacity:1;}

/* 이미지 아래 컨트롤 : 좌우 화살표 + 도트 (클릭/스와이프로 이미지 전환) */
.hero-ctrl{display:flex; align-items:center; justify-content:center; gap:14px; padding:18px 16px 0;}
.hero-nav{width:34px; height:34px; padding:0; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:17px; color:var(--ink); line-height:1; display:flex; align-items:center; justify-content:center;}
.hero-nav:hover{border-color:var(--ink);}
.hero-dots{display:flex; align-items:center; justify-content:center; gap:9px;}
.hero-dot{width:9px; height:9px; padding:0; border:0; border-radius:999px; background:#d6cdbe; cursor:pointer; transition:width .2s ease, background .2s ease;}
.hero-dot:hover{background:#bcae97;}
.hero-dot.on{width:26px; background:var(--ink);}

/* 텍스트 : 이미지 아래, 밝은 배경 위 (어두운 글자·중앙정렬) */
.hero-inner{
  padding:46px 24px 54px;
  display:flex; justify-content:center; text-align:center;
}
.hero-text{ max-width:640px; }
.hero-text h1{
  font-size:46px; font-weight:800; line-height:1.2; color:var(--ink); letter-spacing:-1px;
}
.hero-lead{margin-top:20px; font-size:20px; font-weight:600; color:#2f2f2f; line-height:1.45;}
.hero-desc{margin-top:18px; font-size:15px; color:#000; line-height:1.75;}
.hero-btns{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
/* 버튼 라벨(두 단어) : 데스크톱은 한 줄 — 단어 사이 여백만 */
.hero-btns .btn{gap:.32em;}

/* ---------- 컨셉 미리보기 : 최대 1200 중앙정렬 ---------- */
.concept-preview{max-width:1200px; margin:0 auto; padding:0px 24px 78px 24px;}
.sec-title{
  text-align:center; font-size:27px; font-weight:800; color:var(--ink); letter-spacing:-.5px;
  position:relative; padding-bottom:10px;
}
.sec-title::after{content:""; display:block; width:34px; height:2px; background:#cdbfa8; margin:14px auto 0;}
.concept-grid{
  max-width:1152px; margin:30px auto 0;   /* 1200 - 좌우 패딩(24×2) = 본문 폭 정렬 */
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 30px;
}
.concept-card{display:flex; flex-direction:column; text-decoration:none; color:inherit;}
.concept-card img,
.concept-card .ph-concept{
  width:100%; aspect-ratio:4/4; object-fit:cover; display:block;
  border-radius:10px; background:#f3eee6;   /* 이미지 없을 때 보이는 영역색 */
  transition:opacity .18s ease;
}
.concept-card:hover img{opacity:.9;}
.concept-card figcaption{text-align:center; margin-top:14px; font-size:16px; font-weight:600; color:#333;}

/* ---------- 특징 3컬럼 : 최대 1200 중앙정렬 (아이콘 = 이미지 영역) ---------- */
.features{background:var(--beige); max-width:1200px; margin:0px auto 60px;}
.features-inner{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-top:56px; padding-bottom:56px;
}
.feature{text-align:center; padding:6px 30px; position:relative;}
.feature + .feature::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:#e2d8c8;}
/* 아이콘 이미지가 들어갈 영역 */
.feature-ico{
  width:54px; height:54px; border-radius:12px; margin:0 auto 16px;
}
.feature-ico .ph-label{font-size:10px;}
.feature h3{font-size:18px; font-weight:700; color:var(--ink); margin-bottom:10px;}
.feature p{font-size:14px; color:#7c7468; line-height:1.7;}

/* ---------- 비포/애프터 슬라이더 (원본 → AI 변환) ---------- */
.ba-sec{max-width:1200px; margin:0 auto; padding:50px 24px 54px;}
/* 슬라이드 비활성 : touch-action:none 제거 → 모바일 세로 스크롤 정상 */
.ba{position:relative; max-width:760px; margin:34px auto 0; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; background:#e9e6e0; box-shadow:0 14px 44px rgba(0,0,0,.09);}
.ba img{display:block;}
/* 원본·AI 둘 다 전체 크기 고정 → before는 clip-path로 오른쪽만 잘라 보여줌(안 움직임) */
.ba-after, .ba-before{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.ba-before{z-index:2; clip-path:inset(0 50% 0 0); will-change:clip-path;}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); z-index:4; box-shadow:0 0 6px rgba(0,0,0,.28);}
.ba-handle::after{content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; color:var(--ink); font-size:15px; font-weight:700; letter-spacing:2px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.3);}
.ba-tag{position:absolute; top:14px; z-index:5; font-size:11px; font-weight:800; letter-spacing:.5px; color:#fff; padding:5px 12px; border-radius:999px;}
.ba-tag.l{left:14px; background:rgba(29,29,29,.55);}
.ba-tag.r{right:14px; background:var(--ink);}
.ba-ctrl{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px;}
.ba-nav{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:18px; color:var(--ink); display:flex; align-items:center; justify-content:center;}
.ba-nav:hover{border-color:var(--ink);}
.ba-dots{display:flex; gap:8px;}
.ba-dot{width:8px; height:8px; border-radius:50%; border:0; background:#d9d2c7; cursor:pointer; padding:0;}
.ba-dot.on{background:var(--ink); width:22px; border-radius:999px;}

/* =====================================================================
   반응형 (메인)
   ===================================================================== */
@media (max-width:1024px){
  .hero-text h1{font-size:44px;}
}

@media (max-width:768px){
  /* 히어로: 사진(위) → 텍스트(아래) 레이아웃 (안개 효과는 불필요) */
  .hero{overflow:visible; aspect-ratio:auto; display:block;}
  /* 이미지 블록도 main_top.jpg 비율(4:3)로 → 폭에 맞춰 높이 자동 */
  .hero-bg{position:relative; inset:auto; width:100%; height:auto; aspect-ratio:1448 / 1200;}
  .hero-inner{
    min-height:0; padding:24px 20px 30px;
    text-align:center; justify-content:center;
  }
  .hero-text{max-width:100%; padding:0; background:none;}  /* 배경 위라 흰 패널 불필요 */
  .hero-bg::after{display:none;}                          /* 텍스트가 사진 아래라 스크림 불필요 */
  .hero-text h1{font-size:29px; line-height:1.25; color:var(--ink);}
  .hero-lead{font-size:16px; margin-top:12px; color:#2f2f2f;}
  .hero-desc{font-size:13.5px; line-height:1.6; margin-top:12px; color:#000;}
  .hero-text h1, .hero-lead, .hero-desc{text-shadow:none;}
  .hero-btns{justify-content:center; margin-top:20px; flex-wrap:nowrap; gap:10px;}
  /* 모바일: 버튼 텍스트 2줄 + 좌우로 나란히 (패딩 축소해 한 줄에 배치) */
  .hero-btns .btn{flex:1 1 0; flex-direction:column; gap:1px; line-height:1.25; padding:12px 14px;}
  .hero-ctrl{padding:14px 16px 0;}

  .ba-sec{padding:40px 16px 20px;}
  .ba{margin-top:24px;}
  .concept-preview{padding:0px 18px 52px 18px;}
  .sec-title{font-size:23px;}
  .concept-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;}

  .features-inner{grid-template-columns:repeat(2,1fr); gap:36px 8px; padding:40px 16px;}
  .feature{padding:0 8px;}
  .feature + .feature::before{display:none;}
  .feature + .feature{border-top:0; padding-top:0;}
}

@media (max-width:430px){
  .hero-inner{padding:20px 18px 26px;}
  .hero-text h1{font-size:25px;}
  .hero-lead{font-size:15px; margin-top:10px;}
  .hero-desc{font-size:13px; margin-top:10px;}
  .hero-btns{margin-top:18px;}   /* 세로 스택 해제 : 좁은 폭에서도 좌우 나란히 유지 */
  .hero-btns .btn{padding-left:10px; padding-right:10px; font-size:15px;}
  .concept-grid{gap:14px;}
}