/* ============================================================
   아산 숲속어린이집 — style.css
   모바일 퍼스트 / 30대 학부모 타겟 / 따뜻하고 둥근 자연친화 톤
   ============================================================ */

:root{
  --color-bg:        #FFFBF2;
  --color-bg-alt:     #F3F0E4;
  --color-green:      #6E8F5C;
  --color-green-dark: #4F6B41;
  --color-green-light:#E9F1E1;
  --color-coral:      #F0864F;
  --color-coral-dark: #D96F3B;
  --color-text:       #3D362B;
  --color-text-soft:  #6E6455;
  --color-white:      #FFFFFF;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 8px 24px rgba(93,74,45,0.10);
  --shadow-btn:  0 6px 16px rgba(217,111,59,0.35);
  --floating-cta-height: 68px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:'Gowun Dodum', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  font-size:16px;
  line-height:1.65;
  /* 모바일 한글 줄바꿈 핵심 처리: 어절 단위로만 줄바꿈되도록 강제 */
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Gaegu', 'Gowun Dodum', sans-serif;
  font-weight:700;
  color:var(--color-green-dark);
  margin:0 0 .6em;
  word-break:keep-all;
  line-height:1.45;
}

p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--color-green); color:#fff; padding:.6em 1em; z-index:200;
}
.skip-link:focus{ left:8px; top:8px; }

/* ============ 레이아웃 유틸 ============ */
.container{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:0 20px;
}
.container--narrow{ max-width:680px; }

.section{ padding:64px 0; }
.section--alt{ background:var(--color-bg-alt); }
.section--contact{ background:var(--color-green-light); }

.eyebrow{
  text-align:center;
  color:var(--color-coral-dark);
  font-weight:700;
  letter-spacing:.03em;
  font-size:.9rem;
  margin-bottom:.5em;
}

.section__title{
  font-size:clamp(1.5rem, 5.4vw, 2.1rem);
  text-align:left;
}
.section__title--center{ text-align:center; }

.section__body{
  font-size:1.05rem;
  color:var(--color-text-soft);
  line-height:1.75;
}

/* ============ 상단 바 ============ */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:rgba(255,251,242,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(110,143,92,.15);
}
.top-bar__inner{
  max-width:1080px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.top-bar__logo{
  font-family:'Gaegu', sans-serif;
  color:var(--color-green-dark);
  font-size:1.05rem;
  white-space:nowrap;
}
.top-bar__tel{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--color-coral);
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
  white-space:nowrap;
  box-shadow:var(--shadow-btn);
}
.tel-number{ white-space:nowrap; }

/* ============ 버튼 ============ */
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  padding:16px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:1.05rem;
  text-align:center;
  border:none;
  cursor:pointer;
  word-break:keep-all;
}
.btn--primary{
  background:var(--color-coral);
  color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn--primary:active{ transform:translateY(1px); }
.btn--lg{ padding:18px 30px; font-size:1.1rem; }
.btn--block{ width:100%; }
.btn__sub{
  font-size:.85rem;
  font-weight:500;
  opacity:.9;
  white-space:nowrap;
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.hero__bg{
  position:absolute; inset:0;
  z-index:0;
  border-radius:0;
}
/* .photo-slot 규칙(같은 specificity, 파일 순서상 뒤에 위치)이 hero__bg의
   position:absolute를 덮어써 좌우로 갈라지는 버그가 있었음 → 결합 셀렉터로 강제 고정 */
.hero__bg.photo-slot{
  position:absolute; inset:0;
  width:100%; height:100%;
  aspect-ratio:auto;
  border-radius:0;
}
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
}
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(63,88,45,.15) 0%, rgba(35,45,25,.55) 70%, rgba(25,32,18,.78) 100%);
}
.hero__content{
  position:relative; z-index:2;
  width:100%;
  padding:32px 20px 48px;
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
.chip-row{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  margin-bottom:18px;
}
.chip{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(4px);
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  word-break:keep-all;
}
.hero__title{
  color:#fff;
  font-size:clamp(1.7rem, 7.2vw, 2.8rem);
  margin-bottom:.5em;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero__subtitle{
  color:#fff;
  font-size:clamp(1rem, 3.6vw, 1.25rem);
  font-family:'Gowun Dodum', sans-serif;
  margin-bottom:28px;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.hero__content .btn{ margin:0 auto; }

/* ============ 이미지 플레이스홀더 (사진 준비중) ============ */
.photo-slot{
  position:relative;
  width:100%;
  aspect-ratio: var(--ratio, 4/3);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(135deg,#FDF3E4,#E9F1E1);
}
.photo-slot__label{
  position:absolute; inset:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4em;
  text-align:center;
  padding:1em;
  font-size:.82rem;
  color:#8A9A7E;
  border:2px dashed #C9D6BF;
  border-radius:calc(var(--radius-lg) - 6px);
  line-height:1.5;
  word-break:keep-all;
}
.photo-slot__label small{ opacity:.75; font-size:.78em; }
.photo-slot img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
}
.hero__bg .photo-slot__label{ color:#eef; }

/* ============ 카드 그리드 (핵심 차별화) ============ */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:28px;
}
.value-card{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  box-shadow:var(--shadow-soft);
  text-align:center;
}
.value-card__icon{
  font-size:2.4rem;
  margin-bottom:12px;
}
.value-card h3{ font-size:1.15rem; margin-bottom:.5em; }
.value-card p{
  color:var(--color-text-soft);
  font-size:.96rem;
  line-height:1.7;
}

/* ============ 영상 섹션 ============ */
.video-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  margin-top:24px;
  background:#000;
}
.video-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* ============ 원장님 스토리 ============ */
.director-card{
  margin-top:24px;
  background:var(--color-white);
  border-radius:var(--radius-lg);
  padding:32px 24px;
  box-shadow:var(--shadow-soft);
  text-align:center;
}
.director-card__photo{
  width:120px;
  margin:0 auto 16px;
  border-radius:50%;
}
.director-card__photo.photo-slot{ border-radius:50%; }
.director-card__photo .photo-slot__label{ border-radius:50%; inset:2px; font-size:.62rem; padding:.4em; }
.director-card__name{
  font-family:'Gaegu', sans-serif;
  color:var(--color-green-dark);
  font-size:1.05rem;
  margin-bottom:16px;
}
.director-card__letter{
  text-align:left;
  color:var(--color-text-soft);
  font-size:.98rem;
  line-height:1.8;
}

/* ============ 프로그램(4계절) ============ */
.program__subtitle{
  font-size:1.15rem;
  margin-top:36px;
  margin-bottom:4px;
  text-align:center;
}
.card-grid--3, .card-grid--4{ grid-template-columns:1fr; }
.program-card{ margin:0; }
.program-card figcaption{
  margin-top:10px;
  font-size:.92rem;
  color:var(--color-text-soft);
  line-height:1.6;
}
.program-card figcaption strong{
  display:block;
  color:var(--color-green-dark);
  font-family:'Gaegu', sans-serif;
  font-size:1rem;
  margin-bottom:2px;
}

/* ============ 후기 ============ */
.review-scroller{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:28px 4px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.review-scroller::-webkit-scrollbar{ height:6px; }
.review-scroller::-webkit-scrollbar-thumb{ background:#D9CFB8; border-radius:99px; }

.review-card{
  scroll-snap-align:center;
  flex:0 0 85%;
  max-width:340px;
  margin:0;
  background:var(--color-white);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  box-shadow:var(--shadow-soft);
}
.review-card p{
  font-size:.96rem;
  line-height:1.75;
  color:var(--color-text);
  margin-bottom:14px;
}
.review-card cite{
  display:block;
  font-style:normal;
  color:var(--color-coral-dark);
  font-weight:700;
  font-size:.86rem;
}

/* ============ FAQ ============ */
.faq-list{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--color-white);
  border-radius:var(--radius-md);
  padding:6px 20px;
  box-shadow:var(--shadow-soft);
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 0;
  font-weight:700;
  color:var(--color-green-dark);
  font-size:1rem;
  position:relative;
  padding-right:28px;
  word-break:keep-all;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute; right:0; top:14px;
  font-size:1.3rem;
  color:var(--color-coral);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{
  color:var(--color-text-soft);
  font-size:.95rem;
  line-height:1.75;
  padding-bottom:18px;
}

/* ============ 최종 문의 CTA ============ */
.contact-cta{
  margin-top:28px;
}

.org-info{
  margin-top:32px;
  text-align:center;
  color:var(--color-text-soft);
  font-size:.94rem;
  line-height:1.8;
}
.org-info a{ color:var(--color-coral-dark); font-weight:700; }
.org-info__map{
  display:inline-block;
  margin-top:10px;
  color:var(--color-green-dark);
  font-weight:700;
  text-decoration:underline;
}

/* ============ 푸터 ============ */
.footer{
  text-align:center;
  padding:24px 16px calc(24px + var(--floating-cta-height));
  color:var(--color-text-soft);
  font-size:.8rem;
  background:var(--color-bg);
}

/* ============ 모바일 하단 고정 CTA ============ */
.floating-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:150;
  display:none;
  height:var(--floating-cta-height);
  padding:env(safe-area-inset-bottom, 0) 0 0;
  box-shadow:0 -6px 20px rgba(0,0,0,.12);
}
.floating-cta__btn{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  height:var(--floating-cta-height);
  font-weight:700;
  font-size:.98rem;
  white-space:nowrap;
}
.floating-cta__btn--call{
  background:var(--color-coral);
  color:#fff;
}

@media (max-width:767px){
  .floating-cta{ display:flex; }
}

/* ============ 데스크톱 향상 ============ */
@media (min-width:768px){
  .section{ padding:96px 0; }
  .hero{ min-height:92vh; }
  .card-grid--3{ grid-template-columns:repeat(3,1fr); }
  .card-grid--4{ grid-template-columns:repeat(4,1fr); }
  .card-grid:not(.card-grid--3):not(.card-grid--4){ grid-template-columns:repeat(3,1fr); }
  .director-card{ padding:44px 56px; }
  .top-bar__logo{ font-size:1.2rem; }
}

@media (min-width:1024px){
  .hero__content{ max-width:760px; }
}

/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}