디자인킷 · 레이아웃
본문: 왼쪽 좁은 단(핵심어)과 오른쪽 넓은 본문
D-레이아웃-본문-좁은단넓은본문
언제 쓰는가
항목 이름을 왼쪽 좁은 단에 크게, 설명을 오른쪽 넓은 단에. 운영 체계, 원칙, 용어 정의. 3~4줄. 값 바꾸는 법: 줄마다 .t(핵심어 7자 이내) .k(보조 정보) .m(본문 2줄) .o(산출물). 3~4줄. 산출물 단이 필요 없으면 .o 삭제 후 열을 232px 1fr 로.
참고
편집 디자인의 좁은 표제 단 + 넓은 본문 단(editorial slide layout), 증권사 리포트의 좌측 요약 단. 구성 방식만 참고, 코드와 문구는 직접 제작.
조각
<section class="slide lo-side-main">
<div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 04 · 운영과 보고</span></div>
<div class="hd"><p class="lb">운영과 보고</p><h1>주간 점검, 월간 조정, 분기 재설계의 3단 운영</h1><p class="lede">주기별 하는 일과 산출물</p></div>
<div class="body">
<div class="rows">
<div class="row"><div class="s"><p class="t">주간 점검</p><p class="k">매주 월요일</p></div><p class="m">매체별 전환당 비용과 소재별 클릭률 확인. 기준을 벗어난 키워드와 소재는 그 주 안에 교체</p><div class="o"><p class="k">산출물</p><p>주간 요약 1쪽</p></div></div>
<div class="row"><div class="s"><p class="t">월간 조정</p><p class="k">매월 5일</p></div><p class="m">매체 간 예산을 20% 범위에서 재배분. 재구매율과 리뷰 콘텐츠 성과를 함께 검토</p><div class="o"><p class="k">산출물</p><p>통합 리포트, 다음 달 조정안</p></div></div>
<div class="row"><div class="s"><p class="t">분기 재설계</p><p class="k">3월, 6월</p></div><p class="m">단계별 역할과 목표 지표 재검토. 성과 미달 매체는 중단 여부 결정</p><div class="o"><p class="k">산출물</p><p>분기 리뷰 회의, 수정 계획서</p></div></div>
</div>
</div>
<div class="pg">30</div>
</section>스타일
.slide.lo-side-main .rows{border-bottom:1px solid var(--line)}
.slide.lo-side-main .row{display:grid;grid-template-columns:232px 1fr 264px;gap:40px;align-items:start;padding:24px 0;border-top:1px solid var(--line)}
.slide.lo-side-main .row:first-child{border-top-color:var(--line2)}
.slide.lo-side-main p{margin:0}
.slide.lo-side-main .t{font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em}
.slide.lo-side-main .k{font-size:var(--f-cap);color:var(--mu)}
.slide.lo-side-main .m{color:var(--ink2);padding-top:5px}
.slide.lo-side-main .o{padding-top:5px}
.slide.lo-side-main .o p:last-child{font-weight:600}