고객 목소리 인용 카드

후기·설문·상담 기록에서 뽑은 고객의 말을 근거로 제시할 때. 큰 인용 1개 + 작은 인용 2개. 원문을 고치지 않고 싣고, 출처(채널·작성자 유형·시점)를 반드시 표기. 값 바꾸는 법: 인용문(.t)은 원문 그대로, 큰 카드는 3줄 이내·작은 카드는 2줄 이내. 출처(.s)는 채널 아이콘 + 채널명(굵게) + 작성자 유형·시점. 실명·계정명은 싣지 않음. 강조색은 큰 카드의 인용 부호 한 곳. 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

infoDiagram Flat Infographics Template(https://www.infodiagram.com/diagrams/infographics-template-ppt-presentation-flat). 인용 부호 아이콘, 큰 인용 한 개와 보조 인용의 크기 차등, 출처를 선 아래에 따로 두는 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-quote">
  <div class="dk-card q big"><svg class="ic qm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></svg><p class="t">검색하면 광고 글만 잔뜩 나와서, 결국 지도 앱에서 최근 후기 순으로 다시 찾아봤어요.</p><p class="s"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg><span><b>지도 앱 방문자 리뷰</b>30대 직장인 · 2026년 8월</span></p></div>
  <div class="rt">
    <div class="dk-card q"><svg class="ic qm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></svg><p class="t">가격은 비슷한데 사진이 실제랑 달랐다는 후기를 보고 다른 곳으로 갔습니다.</p><p class="s"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/><path d="M7 11h10"/><path d="M7 15h6"/><path d="M7 7h8"/></svg><span><b>지역 커뮤니티 게시글</b>40대 주부 · 2026년 7월</span></p></div>
    <div class="dk-card q"><svg class="ic qm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></svg><p class="t">예약 버튼이 어디 있는지 몰라서 그냥 전화했어요.</p><p class="s"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z"/><path d="M21 16v2a4 4 0 0 1-4 4h-5"/></svg><span><b>매장 상담 기록</b>50대 첫 방문 고객 · 2026년 9월</span></p></div>
  </div>
</div>

.dk-quote{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:stretch}
.dk-quote .rt{display:flex;flex-direction:column;gap:20px}
.dk-quote .q{padding:24px 28px;display:flex;flex-direction:column}
.dk-quote .rt .q{flex:1}
.dk-quote .qm{width:24px;height:24px;color:var(--g2)}
.dk-quote .t{margin:10px 0 16px;font-size:var(--f-md);font-weight:500;color:var(--ink);line-height:1.5;flex:1}
.dk-quote .s{margin:0;display:flex;align-items:center;gap:10px;font-size:var(--f-cap);color:var(--mu);padding-top:14px;border-top:1px solid var(--line)}
.dk-quote .s .ic{width:20px;height:20px;flex:none;color:var(--g3)}
.dk-quote .s b{font-size:var(--f-sm);margin-right:8px}
.dk-quote .big{padding:36px 40px 30px}
.dk-quote .big .qm{width:44px;height:44px;color:var(--ac)}
.dk-quote .big .t{font-size:28px;font-weight:700;line-height:1.42;letter-spacing:-.02em;margin:18px 0 24px}