/* =========================================================
   SCF_2040_3 — Step Flow (5열 지그재그, order + nth-child)
   ========================================================= */
.SCF_2040_3 { width:100%; float:left; }
.SCF_2040_3 .sub_stit{
  width:100%; float:left;
  font-size:calc(var(--tit-mds-size) * 1.2);
  color:#000; font-weight:900;
  margin-bottom:clamp(10px, 2.344vw, 30px);
}
.SCF_2040_3 .sub_stit2{
  width:100%; float:left;
  color:#222; font-size:var(--tit-mds-size); font-weight:600;
  line-height:100%; letter-spacing:-1px;
  margin-bottom:clamp(10px, 1.563vw, 20px);
}

/* ================= PC (>=768px) — 5열 지그재그 ================= */
@media (min-width:768px){
  .SCF_2040_3 { --arr-size:55px; --arr-off:55px; }

  .SCCF_2040_3 .step_box,
  .SCF_2040_3 .step_box{
    width:calc(100% - 40px);
    float:left;
    display:grid;
    grid-template-columns:repeat(5,1fr);   /* ✅ 5칸 */
    grid-auto-rows:1fr;
    grid-gap:40px;
  }

  .SCF_2040_3 .step_box>.step_inbox{
    position:relative;
    width:100%; float:left;
    border:1px dashed #b2b2b2; border-radius:15px;
    padding:20px 25px 15px; background:#f7f7f7; 
  }

  /* 기본: 화살표 숨김 (필요한 칸만 표시) */
  .SCF_2040_3 .step_box>.step_inbox:before{
    content:"";
    display:none; pointer-events:none;
    position:absolute; z-index:3;
    width:var(--arr-size); height:var(--arr-size);
    border-radius:50%;  background-color: #fff; color:#333; font-size:25px;
    margin-top:calc(-1 * var(--arr-size) / 2);  box-shadow:3px 3px 30px rgba(0,0,0,0.05); margin-right: 7px;
   
  }

  /* ── 홀수행(1,3,5,…) 진행: →  ──
     5칸×2행 = 10개가 한 사이클(1~10, 11~20, …)
     → 사이클 내 1~4번째(=1,2,3,4 / 11,12,13,14 / …) */
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+1):before,
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+2):before,
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+3):before,
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+4):before{
    display:grid; place-items:center;
    content:"\ebb5";               /* → (unicons-line) */
    font-family:unicons-line, system-ui, sans-serif;
    top:50%; right:calc(-1 * var(--arr-off)); margin-left: 7px; border: 1px solid rgba(204,204,204,0.15);
  }

  /* ── 짝수행(2,4,6,…) 진행: ←  ──
     → 사이클 내 6~9번째(=6,7,8,9 / 16,17,18,19 / …) */
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+6):before,
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+7):before,
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+8):before,
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10n+9):before{
    display:grid; place-items:center;
    content:"\ebb4";               /* ← */
    font-family:unicons-line, system-ui, sans-serif;
    top:50%; left:calc(-1 * var(--arr-off));margin-left: 7px; border: 1px solid rgba(204,204,204,0.15); 
  }

  /* ── 행 경계: 5, 10, 15, 20 … 은 ↓ ── */
  .SCF_2040_3 .step_box>.step_inbox:nth-child(5n):before{
    display:grid; place-items:center;
    content:"\ebb5";               /* → 를 회전해서 ↓ */
    font-family:unicons-line, system-ui, sans-serif;
    transform:rotate(90deg);
    left:50%; bottom:calc(-1 * var(--arr-off)); top:auto;
    margin-left:calc(-1 * var(--arr-size) / 2);bottom: -47px;  border: 1px solid rgba(204,204,204,0.15)
  }

  /* 마지막 카드 화살표 숨김(최우선) */
  .SCF_2040_3 .step_box>.step_inbox:last-child:before{ display:none !important; }

  /* --------- 시각 순서 보정: order 매핑 (1~20) ---------
     Row1:  1  2  3  4  5
     Row2: 10  9  8  7  6
     Row3: 11 12 13 14 15
     Row4: 20 19 18 17 16
     (더 늘리면 같은 패턴 반복) */
  /* Row1 */
  .SCF_2040_3 .step_box>.step_inbox:nth-child(1)  { order: 1; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(2)  { order: 2; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(3)  { order: 3; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(4)  { order: 4; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(5)  { order: 5; }

  /* Row2 (역순) */
  .SCF_2040_3 .step_box>.step_inbox:nth-child(6)  { order: 10; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(7)  { order: 9; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(8)  { order: 8; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(9)  { order: 7; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(10) { order: 6; }

  /* Row3 */
  .SCF_2040_3 .step_box>.step_inbox:nth-child(11) { order: 11; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(12) { order: 12; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(13) { order: 13; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(14) { order: 14; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(15) { order: 15; }

  /* Row4 (역순) */
  .SCF_2040_3 .step_box>.step_inbox:nth-child(16) { order: 20; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(17) { order: 19; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(18) { order: 18; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(19) { order: 17; }
  .SCF_2040_3 .step_box>.step_inbox:nth-child(20) { order: 16; }
}

/* ================= Tablet fine-tune (768~1280) ================= */
@media (max-width:1280px) and (min-width:768px){
  /* 필요하면 gap/패딩만 보정
  .SCF_2040_3 .step_box{ grid-gap:32px; }
  .SCF_2040_3 .step_box>.step_inbox{ padding:18px 20px 14px; }
  */
}

/* ================= Mobile (<=767px) ================= */
@media (max-width:767px){
  .SCF_2040_3 .step_box{
    width:100%; float:left;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    border-radius:15px;
    padding:10px 10px 0 0 !important;
    margin-bottom:10px;
    grid-gap:10px;
    box-shadow:none !important; border:none;
  }
  .SCF_2040_3 .step_box>.step_inbox{
    width:100%; float:left;
    border:1px dashed #b2b2b2; border-radius:15px;
    padding:10px 25px 15px; position:relative; height:auto;
  }
  .SCF_2040_3 .step_box>.step_inbox:before{
    content:"\ebb5"; font-family:unicons-line;
    position:absolute; right:-20px; top:50%;
    width:35px; height:35px; margin-top:-15px;
    border-radius:100%; background:#fff; color:#333; font-size:25px;
    display:grid; place-items:center; padding-bottom:2px; border: 1px solid rgba(204,204,204,0.15);  box-shadow:3px 3px 30px rgba(0,0,0,0.1);
    z-index:99; margin-right: -5px
  }
  .SCF_2040_3 .step_box>.step_inbox:last-child:before{ display:none; }
}

/* ================= Mobile XS (<=400px) ================= */
@media (max-width:400px){
  .SCF_2040_3 .step_box{
    grid-template-columns:repeat(2, 1fr);
    border-radius:15px;
    padding:clamp(10px, 1.953vw, 25px) 10px;
    margin-bottom:10px;
  }
}

/* ===== 공통 내부 엘리먼트 ===== */
.SCF_2040_3 .step_box>.step_inbox .step_um{
  width:40px; aspect-ratio:1/1; float:left;
  font-size:calc(var(--tx-sm-size) * 0.9); color:#fff;
  border-radius:10px; background:var(--primary); font-weight:800;
  line-height:100%; letter-spacing:-1px;
  display:flex; justify-content:center; align-items:center;
  margin-bottom:20px;
}
.SCF_2040_3 .step_box>.step_inbox .step_tt{
  width:100%; float:left;
  font-size:clamp(14px, 1.563vw, 20px);
  color:#222; font-weight:700; line-height:130%; letter-spacing:-1px;
}
.SCF_2040_3 .wg_btn{
  width:auto; float:left; padding:10px 20px; border-radius:6px;
  background:#333; color:#fff; font-size:calc(var(--tx-sm-size) * 0.9);
  margin-top:10px;
}
.SCF_2040_3 .wg_btn:hover{ background:var(--primary); }