@charset "utf-8";
/* =====================================================================
   BABY SCENE STUDIO · common.css
   전 페이지 공통 : 토큰 / 레이아웃 / 헤더 / 푸터 / 버튼 / placeholder
   ===================================================================== */

/* ---------- 디자인 토큰 ---------- */
:root{
  --ink:#1d1d1d;            /* 로고·헤딩·다크버튼 */
  --text:#3a3a3a;          /* 본문 */
  --muted:#8c8c8c;         /* 보조 텍스트 */
  --cream:#FBF7F2;         /* 히어로 배경 */
  --beige:#F3ECE3;         /* 특징 밴드 */
  --line:#ECE6DC;          /* 보더/구분선 */
  --white:#ffffff;
  --radius:8px;
  --radius-lg:16px;
  --maxw:1200px;
  --header-h:100px;
}

/* ---------- 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; color:var(--text); background:var(--white);
  font-family:"Pretendard","Pretendard Variable","Malgun Gothic","맑은 고딕",sans-serif;
  font-size:16px; line-height:1.6; word-break:keep-all; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:0; background:none;}
h1,h2,h3,p,figure{margin:0;}
ul{margin:0; padding:0; list-style:none;}

/* ---------- 공통 컨테이너 ---------- */
.header-inner,.footer-inner,.hero-inner,.features-inner{
  max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px;
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px; line-height:1; white-space:nowrap;
  padding:13px 22px; border-radius:var(--radius); transition:.18s ease;
}
.btn-lg{padding:16px 60px; font-size:16px;line-height:160%;}
.btn-pill{border-radius:999px; padding:11px 22px; font-size:15px;}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:#000;}
.btn-line{background:#fff; color:var(--ink); border:1px solid #d9d2c7;}
.btn-line:hover{border-color:var(--ink);}

/* ---------- 로고 (헤더/푸터 공용) : 이미지 영역 ---------- */
.logo,.footer-brand{display:inline-flex; align-items:center; color:var(--ink);}
.logo-ph{width:245px; height:72px; border-radius:6px;}      /* 헤더 로고 영역 (top_logo_big.png 340×100, 3.4:1) */
.footer-logo-ph{width:200px; height:59px; border-radius:6px;} /* 푸터 로고 (footer_logo_big.png 340×100, 3.4:1) */

/* =====================================================================
   헤더 / GNB
   ===================================================================== */
.promo-bar{
  background:#1f3a2e; color:#fff; text-align:center; font-size:13px; padding:8px 12px;
}
.site-header{
  position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line);
}
.header-inner{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
}
.header-nav{display:flex; align-items:center; gap:36px;}
.gnb{display:flex; align-items:center; gap:34px;}
.gnb a{
  font-size:15px; font-weight:600; letter-spacing:1px; color:#4a4a4a; padding:6px 0;
  position:relative;
}
.gnb a:hover{color:var(--ink);}
.gnb a.active{color:var(--ink);}
.gnb a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--ink);
}
.header-actions{display:flex; align-items:center; gap:10px;}

/* 햄버거 (모바일 전용) */
.nav-toggle{display:none; width:42px; height:42px; position:relative;}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--ink); border-radius:2px;
  transition:.25s ease;
}
.nav-toggle span:nth-child(1){top:14px;}
.nav-toggle span:nth-child(2){top:20px;}
.nav-toggle span:nth-child(3){top:26px;}
.nav-toggle.is-open span:nth-child(1){top:20px; transform:rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){top:20px; transform:rotate(-45deg);}

/* =====================================================================
   푸터
   ===================================================================== */
/* 시안과 동일하게: 밝은 회색 배경 / 로고(좌) · 링크(중앙) · SNS(우) */
.site-footer{background:#FAFAFA; border-top:1px solid #EDEDED; margin-top:0;}
.footer-inner{
  min-height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding-top:22px; padding-bottom:22px;
}
.footer-brand{justify-self:start;}
.footer-links{
  justify-self:center; display:flex; align-items:center; justify-content:center; gap:20px;
  font-size:14px; color:#888;
}
.footer-links a{color:#888;}
.footer-links a:hover{color:var(--ink);}
.footer-links .sep{width:1px; height:12px; background:#d6d6d6; display:inline-block;}  /* 세로 바 | */
.footer-sns{justify-self:end; display:flex; align-items:center; gap:8px;}
/* SNS : 이미지 들어갈 영역(둥근 사각형) */
.sns{width:32px; height:32px; border-radius:9px;}
.sns.imgph{border-radius:9px;}
/* 회사 정보 : 링크 아래 중앙 정렬 */
.footer-info{
  max-width:1200px; margin:0 auto; padding:14px 24px 2px;
  text-align:center; color:#9a9a9a; font-size:13px; line-height:1.95;
}
.footer-info p{margin:0;}
.footer-info .bar{color:#d8d8d8; margin:0 9px;}

/* copyright 라인 : 중앙 정렬 */
.copyright{
  text-align:center; font-size:12px; color:#aaa; letter-spacing:.3px;
  padding:14px 24px 18px; margin:0; background:#FAFAFA;
}

/* =====================================================================
   이미지 placeholder (실제 이미지 넣기 전 영역 표시)
   ===================================================================== */
.ph{
  position:relative; width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg,#f3eee6 0 12px,#efe9df 12px 24px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ph-label{
  text-align:center; color:#a99f8d; font-size:15px; font-weight:700; line-height:1.5;
}
.ph-label small{font-size:11px; font-weight:500; color:#bcb3a2;}

/* 작은 이미지 영역(로고·아이콘·SNS 등) 공통 placeholder */
.imgph{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#f1ebe2 0 9px,#ece5da 9px 18px);
  border:1px dashed #d6ccbb; border-radius:8px; overflow:hidden; color:#a99f8d;
}
.imgph .ph-label{font-size:11px; font-weight:700; line-height:1.4;}
/* 실제 이미지가 로드되면(common.js) 테두리·라벨 제거 */
.img-loaded{border:0 !important; background-image:none; color:transparent;}

/* =====================================================================
   반응형 (헤더/푸터)
   ===================================================================== */
@media (max-width:1024px){
  .gnb{gap:24px;}
  .header-nav{gap:24px;}
}

@media (max-width:768px){
  :root{--header-h:62px;}
  .header-inner{padding-left:18px; padding-right:18px;}
  .nav-toggle{display:block;}

  /* 모바일 펼침 메뉴 */
  .header-nav{
    position:absolute; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px 18px 18px; gap:6px;
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:.22s ease;
    box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  .header-nav.is-open{transform:translateY(0); opacity:1; visibility:visible;}
  .gnb{flex-direction:column; align-items:stretch; gap:0;}
  .gnb a{padding:13px 4px; border-bottom:1px solid var(--line); letter-spacing:.5px;}
  .gnb a.active::after{display:none;}
  .header-actions{padding-top:12px; gap:8px;}
  .header-actions .btn{flex:1;}

  /* 모바일 로고 : 62px 헤더에 맞춰 축소 (정확히 3.4:1 = 136×40) */
  .logo-ph{width:136px; height:40px;}

  /* 푸터 : 모바일은 1단 세로 스택 + SNS를 회사정보 아래로 */
  .site-footer{display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:24px;}
  .footer-inner{display:contents;}        /* 로고/링크/SNS 를 푸터 직속으로 풀어줌 */
  .footer-brand{order:1;}
  .footer-links{order:2;}
  .footer-info {order:3; width:100%;}
  .footer-sns  {order:4;}
  .copyright   {order:5; align-self:stretch;}
}