반폭 · 고객 발언 인용과 해석

인터뷰, 후기, 설문 주관식에서 뽑은 발언 하나와 그 해석, 반영 방향을 놓을 때. 발언 36자 이내, 해석과 반영 각 36자 이내. 값 바꾸는 법: .q .s=발언(강조 구절 하나를 em 으로), .q .w=발언자와 표본. .kv 하나가 해석 또는 반영 한 줄(.k 이름표, 다음 span 문구). .kv 는 1~2개.

직접 제작. 사용자 조사 보고서의 발언 인용(verbatim)과 시사점 병기 방식 참고. 큰 따옴표 장식 없이 문장 자체를 키움.

<div class="dk dkh dkh-t-quote"><div class="dk-card"><p class="dk-lb">구매자 인터뷰 발언</p><div class="q"><p class="s">“성분은 다 비슷해 보여서, 결국 <em>후기 많은 쪽</em>으로 골랐어요”</p><p class="w">30대 구매자 심층 인터뷰 · 8명 중 5명 유사 응답</p></div>
<div class="kv"><span class="k">해석</span><span>제품 차별점보다 후기 수량이 최종 선택 기준으로 작용</span></div>
<div class="kv"><span class="k">반영</span><span>상세 페이지 상단에 후기 수와 평점 배치, 후기 소재 광고 병행</span></div></div></div>

.dkh-t-quote .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-quote .dk-lb{margin:0 0 10px}
.dkh-t-quote .q{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2px 0 14px}
.dkh-t-quote .q .s{margin:0;font-size:var(--f-md);font-weight:600;line-height:1.5;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.dkh-t-quote .q .s em{font-style:normal;color:var(--ac)}
.dkh-t-quote .q .w{margin:8px 0 0;font-size:var(--f-cap);color:var(--mu)}
.dkh-t-quote .kv{flex:none;display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dkh-t-quote .kv .k{font-weight:600;color:var(--ink);white-space:nowrap}