@charset "utf-8";
/* =====================================================================
   BABY SCENE STUDIO · faq.css  (자주 묻는 질문 · 아코디언)
   ===================================================================== */
.faq{ max-width:860px; margin:0 auto; padding:60px 24px 100px; }

.faq-head{ text-align:center; margin-bottom:44px; }
.faq-eyebrow{ display:inline-block; font-size:13px; letter-spacing:3px; color:#2f9e6e; font-weight:800; }
.faq-title{ font-size:32px; font-weight:800; color:#22262e; margin:12px 0 10px; letter-spacing:-.5px; }
.faq-sub{ color:#8a909a; font-size:15px; }

.faq-list{ list-style:none; margin:0; padding:0; border-top:1px solid #ECECEC; }
.faq-item{ border-bottom:1px solid #ECECEC; }

.faq-q{ width:100%; display:flex; align-items:center; gap:14px; background:none; border:0; padding:22px 6px; cursor:pointer; text-align:left; font-family:inherit; }
.faq-qmark{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#EAF6F0; color:#2f9e6e; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.faq-qtext{ flex:1; font-size:17px; font-weight:700; color:#22262e; transition:color .2s; }
.faq-q:hover .faq-qtext{ color:#2f9e6e; }
.faq-item.is-open .faq-qtext{ color:#2f9e6e; }

/* +/- 토글 인디케이터 (CSS) */
.faq-toggle{ flex:0 0 auto; position:relative; width:18px; height:18px; }
.faq-toggle::before, .faq-toggle::after{ content:""; position:absolute; background:#aab0b8; border-radius:2px; transition:transform .25s, opacity .25s, background .2s; }
.faq-toggle::before{ left:0; top:8px; width:18px; height:2px; }
.faq-toggle::after{ left:8px; top:0; width:2px; height:18px; }
.faq-item.is-open .faq-toggle::before{ background:#2f9e6e; }
.faq-item.is-open .faq-toggle::after{ transform:rotate(90deg); opacity:0; }

/* 답변 (펼침) */
.faq-a{ max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .25s ease; }
.faq-item.is-open .faq-a{ max-height:500px; opacity:1; }
.faq-a p{ margin:0; padding:2px 6px 26px 42px; color:#5a6068; font-size:15px; line-height:1.8; }
.faq-a p b{ color:#22262e; font-weight:700; }

@media (max-width:560px){
  .faq{ padding:40px 16px 70px; }
  .faq-title{ font-size:26px; }
  .faq-q{ padding:18px 2px; gap:11px; }
  .faq-qtext{ font-size:15px; }
  .faq-qmark{ width:25px; height:25px; font-size:13px; }
  .faq-a p{ padding:2px 2px 22px 36px; font-size:14px; }
}