두 줄 단계 7(4 + 3, 끝에 기준 칸)

단계가 7개인 절차를 4개 + 3개 두 줄로 놓고 마지막 칸에 기준 숫자를 적는 도식. 7행 표로 돌려 쓰던 공동구매 운영 단계, 입점 절차, 영상 제작 단계에 사용. 단계 7개 고정(6개는 D-도식-두줄단계6, 8개는 D-도식-두줄단계8), 단계마다 시점 1줄 + 할 일 3줄(약 45자). 강조 단계 1개. 값 바꾸는 법: 단계마다 이름(h3), 시점(em), 할 일(p) 교체. 강조 단계 하나에 class="hot". 마지막 점선 칸(li.note)은 기준 숫자 1~2개, 필요 없으면 삭제. 줄 사이 화살표는 5번째 칸 앞에서 자동으로 빠짐.

단계가 많을 때 두 줄로 접어 놓는 구성은 SlideModel 의 process flow 템플릿 묶음 https://slidemodel.com/templates/tag/process-flow/ 과 McKinsey 공개 보고서의 다단계 절차 장 구성 참고. 마지막 칸을 기준 숫자로 쓰는 처리와 코드는 직접 제작.

<div class="dk dk-step7">
<ol>
<li><div class="h"><span class="n num">01</span><h3>셀러 선별</h3><em>준비</em></div><p>채널 정체성, 댓글 응대 빈도, 과거 공구 이력 확인. 후보 압축 후 조건 협상</p></li>
<li><div class="h"><span class="n num">02</span><h3>조건 합의</h3><em>준비</em></div><p>판매 연동 수익 배분, 최소 보장 여부, 정산 주기, 금지 표현 명시</p></li>
<li><div class="h"><span class="n num">03</span><h3>샘플과 교육</h3><em>오픈 1~2주 전</em></div><p>정품과 같은 구성 발송, 특장점·자주 묻는 질문·금지 표현 가이드 전달</p></li>
<li><div class="h"><span class="n num">04</span><h3>예열</h3><em>오픈 1주 전부터</em></div><p>판매 문구 없이 사용 장면 위주 노출, 임박 시 일정 고지</p></li>
<li class="hot"><div class="h"><span class="n num">05</span><h3>오픈 당일</h3><em>당일</em></div><p>업로드 시각 맞춤, 주문 수량 점검, 품절 임박 공유, 결제 문의 전담자 지정</p></li>
<li><div class="h"><span class="n num">06</span><h3>마감</h3><em>종료 직전</em></div><p>마감 시각 고지. 한정 표현은 사실에 근거</p></li>
<li><div class="h"><span class="n num">07</span><h3>배송과 정산</h3><em>종료 후</em></div><p>운송장 공유, 주문 교차 검증, 반품 반영 후 셀러별 매출 확정</p></li>
<li class="note"><p class="dk-lb mu">기준</p><p><b>3~5명</b>최종 셀러 후보</p><p><b>1~2시간</b>당일 주문 점검 주기</p></li>
</ol>
</div>

.dk-step7 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px}
.dk-step7 li{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px 20px;min-height:176px}
.dk-step7 li+li:not(:nth-child(5))::before{content:"";position:absolute;left:-17px;top:50%;width:7px;height:7px;border-top:1.5px solid var(--g3);border-right:1.5px solid var(--g3);transform:translateY(-50%) rotate(45deg)}
.dk-step7 .h{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.dk-step7 .n{font-size:var(--f-lg);font-weight:700;color:var(--g2);line-height:1.3}
.dk-step7 h3{margin:0;font-size:var(--f-md);font-weight:700;line-height:1.3}
.dk-step7 em{grid-column:2;font-style:normal;font-size:var(--f-cap);color:var(--mu)}
.dk-step7 li p{margin:0;font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dk-step7 .hot{background:var(--acw);box-shadow:none}
.dk-step7 .hot .n,.dk-step7 .hot h3{color:var(--ac)}
.dk-step7 .hot .h{border-bottom-color:var(--acm)}
.dk-step7 .note{background:none;box-shadow:none;border:1px dashed var(--line2);display:flex;flex-direction:column;justify-content:center;gap:10px}
.dk-step7 .note::before{display:none}
.dk-step7 .note p{font-size:var(--f-sm);color:var(--ink2)}
.dk-step7 .note p b{display:block;font-size:var(--f-xl);font-weight:700;line-height:1.2;color:var(--ink)}