각주와 출처 줄 양식

본문의 숫자나 주장에 각주 번호를 달고 장 아래에 주, 출처, 기준을 적는 양식. 본문 항목 3~4개, 각주 2~3개, 출처 1~2줄. 값 바꾸는 법: 본문 숫자 뒤에 sup 로 번호를 달고, 아래 .nt 의 "주" 줄에 같은 번호로 풀이. "출처"는 자료 이름과 시점, "기준"은 조사 범위. 다른 조각 아래에 붙일 때는 .nt 블록과 해당 CSS 만 가져감. 강조색은 각주 번호에만.

통계 보고서와 증권사 리포트의 표 아래 표기 순서(주, 출처, 기준 시점)와 본문 위첨자 번호. 컨설팅 장표 규칙 해설(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-tnote">
  <ul>
    <li><b>검색량 지수 138</b><p>1년 전을 100으로 본 관련 검색량<sup>1)</sup></p></li>
    <li><b>후기 확인 비율 10명 중 6명</b><p>구매 전에 후기 글을 먼저 찾아본 고객<sup>2)</sup></p></li>
    <li><b>첫 화면 자사 점유 3칸</b><p>브랜드 검색 결과 첫 화면 10칸 기준<sup>3)</sup></p></li>
  </ul>
  <div class="nt">
    <p><span>주</span>1) 브랜드명과 대표 제품명 2개를 합산한 값. 2) 최근 3개월 구매 고객 대상, 응답 312명. 3) 광고 칸과 일반 결과 칸을 모두 포함</p>
    <p><span>출처</span>포털 검색어 추이 자료(2026년 9월 조회), 자사 고객 설문(2026년 8월), 대행사 직접 조사(2026년 9월 3주)</p>
    <p><span>기준</span>모바일 검색, 수도권, 평일 오후 시간대</p>
  </div>
</div>

.dk-tnote ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.dk-tnote li{display:grid;grid-template-columns:380px minmax(0,1fr);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.dk-tnote li b{font-size:var(--f-lg);font-weight:700}
.dk-tnote li p{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-tnote sup{margin-left:3px;font-size:var(--f-cap);font-weight:600;color:var(--ac);vertical-align:super;line-height:0}
.dk-tnote .nt{margin-top:30px;padding-top:14px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:6px}
.dk-tnote .nt p{margin:0;display:grid;grid-template-columns:56px minmax(0,1fr);font-size:var(--f-cap);color:var(--mu);line-height:1.6}
.dk-tnote .nt span{font-weight:600;color:var(--ink2)}