반폭 · 주의 사항 카드

수치를 읽을 때의 주의, 집행 위험, 제약을 먼저 한 문장으로 밝히고 상황별 대응을 2~3개 붙일 때. 주의 문장 24자 이내, 상황 9자 이내, 대응 24자 이내. 값 바꾸는 법: .top=주의 문장 한 줄. .r 하나가 상황(.t)과 대응(.d) 한 쌍. 2~3개.

직접 제작. 리서치 보고서의 해석 유의 사항(caveat) 상자 방식 참고. 경고색이나 아이콘 없이 옅은 강조 바탕 한 줄로 구분.

<div class="dk dkh dkh-t-caution"><div class="dk-card"><p class="dk-lb">수치 해석 주의 사항</p><div class="top">측정 환경이 바뀌면 전후 수치 직접 비교 불가</div>
<div class="ls">
<div class="r"><span class="t">측정 태그 교체</span><span class="d">교체 전후 2주 병행 측정으로 차이 확인</span></div>
<div class="r"><span class="t">동의 방식 변경</span><span class="d">변경일 기록, 전후 구간 분리 보고</span></div>
<div class="r"><span class="t">집계 기준일 차이</span><span class="d">클릭일 기준과 전환일 기준 중 하나로 통일</span></div>
</div></div></div>

.dkh-t-caution .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-caution .dk-lb{margin:0 0 10px}
.dkh-t-caution .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-caution .top{flex:none;background:var(--acw);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:6px;font-size:var(--f-body);font-weight:600;line-height:1.45;color:var(--ink)}
.dkh-t-caution .r{flex:1;display:grid;grid-template-columns:124px 1fr;column-gap:14px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.5}
.dkh-t-caution .r:first-child{border-top:0}
.dkh-t-caution .t{font-weight:600}
.dkh-t-caution .d{color:var(--ink2)}