출처가 붙은 사실 3개

주장을 받치는 숫자 사실 3개를 출처와 함께 둘 때. 3개 고정, 숫자 1개와 단위, 설명 2줄 이내, 출처 줄 1줄(기관, 자료 이름, 시점). 값 바꾸는 법: .f 하나가 사실(.v 숫자와 small 단위, .t 설명, .s 출처 줄). 가장 중요한 하나에 class="hot". 출처 줄은 "기관이나 자료 이름, 범위, 시점" 순서로 적음.

증권사 리포트와 조사 보고서의 수치 인용 방식(숫자 바로 아래에 출처, 자료 이름, 시점을 한 줄로). 컨설팅 장표 규칙 해설(Deckary 'consulting slide standards' https://deckary.com/blog/consulting-slide-standards , 'slide types guide' https://deckary.com/blog/pillar-slide-types-guide)의 무장식·제한된 색·한 장 한 주장 원칙 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tfact">
  <div class="f hot"><p class="v">138<small>지수</small></p><p class="t">관련 검색량이 1년 전을 100으로 볼 때 138까지 증가</p><p class="s"><b>출처</b>포털 검색어 추이 자료, 최근 12개월, 2026년 9월 조회</p></div>
  <div class="f"><p class="v">6<small>명 / 10명</small></p><p class="t">구매 전에 후기 글을 먼저 찾아본다고 답한 비율</p><p class="s"><b>출처</b>자사 구매 고객 설문, 응답 312명, 2026년 8월</p></div>
  <div class="f"><p class="v">3<small>칸 / 10칸</small></p><p class="t">브랜드 검색 첫 화면에서 자사 콘텐츠가 차지한 자리</p><p class="s"><b>출처</b>대행사 직접 조사, 모바일 검색 기준, 2026년 9월 3주</p></div>
</div>

.dk-tfact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.dk-tfact .f{display:flex;flex-direction:column;padding:30px 36px 26px 0;min-height:300px}
.dk-tfact .f+.f{padding-left:36px;border-left:1px solid var(--line)}
.dk-tfact .v{margin:0;font-size:var(--f-huge);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.dk-tfact .hot .v{color:var(--ac)}
.dk-tfact .v small{margin-left:8px;font-size:var(--f-lg);font-weight:600;letter-spacing:0;color:var(--mu)}
.dk-tfact .t{margin:18px 0 0;font-size:var(--f-md);font-weight:600;color:var(--ink);line-height:1.5}
.dk-tfact .s{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--f-cap);color:var(--mu)}
.dk-tfact .s b{margin-right:8px;font-weight:600;color:var(--ink2)}