Now · Next · Later 3단 일정

날짜를 못 박기 어려운 계획을 확신 수준에 따라 지금, 다음, 나중으로 나눠 보여줄 때. 운영 우선순위, 과제 목록. 열 3개 고정, 열마다 항목 2~4개. 값 바꾸는 법: .col 3개가 Now, Next, Later. .h 의 span=기간, .c=확신 수준 설명, li=과제(굵은 제목 + 한 줄). 강조는 Now 열 하나(class="hot").

ProdPad Now-Next-Later 로드맵 해설(https://www.prodpad.com/glossary/now-next-later-roadmap/): 날짜 대신 확신 수준으로 3단 구분. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-nnl">
  <div class="col hot"><div class="h"><b>Now</b><span>이번 달</span></div><p class="c">확정, 진행 중</p><ul><li><b>전환 추적 정비</b>구매, 장바구니 이벤트 재설정</li><li><b>검색 캠페인 재편</b>의도별 검색어 묶음 9개</li><li><b>소재 묶음 교체</b>메시지 3종 동시 비교</li></ul></div>
  <div class="col"><div class="h"><b>Next</b><span>1~2개월 뒤</span></div><p class="c">방향 확정, 세부 조율</p><ul><li><b>쇼핑검색 확대</b>상품 묶음 기준 재정리</li><li><b>리타기팅 구간 분리</b>방문 후 3일, 7일, 14일</li><li><b>후기 콘텐츠 연동</b>구매 후기 소재화</li></ul></div>
  <div class="col"><div class="h"><b>Later</b><span>분기 이후</span></div><p class="c">검토 중, 성과 보고 결정</p><ul><li><b>영상 매체 시험</b>인지 지표 기준선 확보 뒤</li><li><b>멤버십 연계</b>재구매 주기 자료 축적 뒤</li><li><b>신규 매체 검토</b>예산 여유 확인 뒤</li></ul></div>
</div>

.dk-nnl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.dk-nnl .h{display:flex;align-items:baseline;gap:12px;padding-top:16px;border-top:2px solid var(--line2)}
.dk-nnl .h b{font-size:var(--f-h);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink2)}
.dk-nnl .h span{font-size:var(--f-sm);color:var(--mu)}
.dk-nnl .c{margin:4px 0 14px;font-size:var(--f-sm);color:var(--mu)}
.dk-nnl ul{list-style:none;margin:0;padding:0}
.dk-nnl li{padding:13px 0;border-top:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dk-nnl li b{display:block;font-size:var(--f-md);font-weight:600}
.dk-nnl .hot .h{border-top-color:var(--ac)}
.dk-nnl .hot .h b{color:var(--ac)}
.dk-nnl .col:not(.hot) li b{color:var(--ink2)}