@charset "utf-8";
/* =====================================================================
   BABY SCENE STUDIO · process.css  (제작 흐름 · 타임라인)
   ===================================================================== */
.process{ max-width:1200px; margin:0 auto; padding:60px 24px 90px; }

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

/* 단계 그리드 */
.pc-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.pc-step{ position:relative; background:#fff; border:1px solid #ECECEC; border-radius:16px; padding:46px 22px 26px; text-align:center; transition:transform .2s, box-shadow .2s, border-color .2s; }
.pc-step:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.08); border-color:#dfe3e8; }

/* 번호 배지 (카드 상단에 걸침) */
.pc-num{ position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; background:#2f9e6e; color:#fff; font-size:19px; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 8px 18px rgba(47,158,110,.32); }

/* 배지끼리 잇는 연결선 (칸 사이) */
.pc-step:not(:last-child)::after{ content:""; position:absolute; top:2px; right:-28px; width:28px; height:2px; background:#CFE7DA; z-index:1; }

.pc-label{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.5px; color:#c0c5cd; }
.pc-name{ font-size:19px; font-weight:800; color:#22262e; margin:8px 0 12px; letter-spacing:-.3px; }
.pc-desc{ font-size:14px; color:#6b7280; line-height:1.75; margin:0; }
.pc-desc b{ color:#2f9e6e; font-weight:700; }

.pc-foot{ text-align:center; margin-top:44px; font-size:13.5px; color:#aab0b8; }

/* ===== 반응형 ===== */
@media (max-width:900px){
  .pc-steps{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .pc-step:not(:last-child)::after{ display:none; }
}
@media (max-width:560px){
  .process{ padding:40px 16px 70px; }
  .pc-head{ margin-bottom:52px; }
  .pc-title{ font-size:26px; }
  .pc-steps{ grid-template-columns:1fr; gap:40px; }
  .pc-step{ padding:42px 20px 24px; }
}