좌우 2표(항목·기준 2열씩)

한 부품의 본문이 표 2개(합계 8~10행)일 때 좌우로 나란히 놓는 구성. 표마다 제목 1줄 + 항목·내용 2열. 왼쪽 4~5행, 오른쪽 3~5행. 내용은 2~3줄(약 55자)까지. 오른쪽 표를 결론 쪽(측정, 판정)으로 두고 제목만 강조색. 값 바꾸는 법: 표 제목(.dk-lb)과 행 문구 교체. 왼쪽 제목은 class="dk-lb mu"(회색), 결론 쪽 표 제목만 class="dk-lb"(강조색). 행 수가 달라도 카드 높이는 같게 맞춰짐. 합계 10행을 넘기지 않음. 표 아래에 주의 문장이 필요하면 </table> 뒤에 <p class="wn">문장</p> 추가(표마다 1줄).

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 두 표를 같은 높이 카드로 나란히 두는 구성은 IR 자료의 2단 요약표 참고.

<div class="dk dk-twin">
<div class="dk-card"><p class="dk-lb mu">운영 기준</p><table>
<colgroup><col style="width:104px"><col></colgroup>
<tbody>
<tr><td class="k">타깃</td><td>TV 기기는 가구 단위, OTT는 로그인 계정 기반 연령·성별·지역·관심 장르</td></tr>
<tr><td class="k">응용 타깃</td><td>주거 지역과 TV 기기 사양을 소비 수준의 간접 지표로 활용</td></tr>
<tr><td class="k">소재</td><td>가로 16:9, 여유 있는 장면 구성과 완결된 이야기. 빠른 컷과 큰 자막 위주의 숏폼 방식 지양</td></tr>
<tr><td class="k">소리</td><td>거실 스피커 청취 전제. 음향 품질 별도 점검</td></tr>
<tr><td class="k">검수</td><td>편집용 모니터가 아니라 실제 TV 화면으로 확인</td></tr>
</tbody></table></div>
<div class="dk-card"><p class="dk-lb">성과 측정</p><table>
<colgroup><col style="width:104px"><col></colgroup>
<tbody>
<tr><td class="k">시청 품질</td><td>완시청률, 완시청당 비용</td></tr>
<tr><td class="k">지연 효과</td><td>송출 시간대와 브랜드 검색어 검색량 변화 대조</td></tr>
<tr><td class="k">직접 반응</td><td>화면의 QR과 전용 코드로 이벤트 페이지 유입 집계</td></tr>
<tr><td class="k">인식 변화</td><td>노출 집단과 미노출 집단 비교 조사(광고 회상, 인지, 호감, 구매 의향)</td></tr>
</tbody></table></div>
</div>

.dk-twin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.dk-twin table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-twin th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-twin td{font-size:var(--f-body);color:var(--ink2);padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-twin tbody tr:last-child td{border-bottom:0}
.dk-twin td.k{font-weight:700;color:var(--ink)}
.dk-twin td.v{font-weight:500;color:var(--ink)}
.dk-twin td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-twin tr.hot td{background:var(--acw)}
.dk-twin tr.hot td.k{color:var(--ac)}
.dk-twin .dk-card{padding:20px 24px 12px}
.dk-twin .dk-card{padding:20px 24px 10px;display:flex;flex-direction:column}
.dk-twin .dk-lb{margin:0;padding:0 0 10px;border-bottom:1px solid var(--line2);font-size:var(--f-sm)}
.dk-twin table{flex:1}
.dk-twin td{padding-left:0;padding-right:0;vertical-align:top;line-height:1.38}
.dk-twin td.k{padding-right:12px}
.dk-twin .wn{margin:0;padding:10px 0 8px;border-top:1px solid var(--line2);font-size:var(--f-sm);color:var(--ink2)}
.dk-twin .wn::before{content:"주의";font-size:var(--f-cap);font-weight:700;color:var(--mu);margin-right:10px}