좌우 2표(3열 × 3행씩)

본문이 3열짜리 작은 표 2개(각 2~3행)일 때 좌우로 나란히 놓는 구성. 표마다 제목 + 머리줄 + 2~3행. 칸 문구는 2~3줄(약 35자)까지, 표 아래 주의 문장 1줄. 상황별 방식표와 기술 요건표, 플랫폼표와 유형표처럼 성격이 다른 두 표에 사용. 값 바꾸는 법: 표 제목, 머리줄, 행 문구 교체. 주가 되는 표 제목만 class="dk-lb"(강조색), 다른 쪽은 "dk-lb mu". 각 표 2~3행. 열 폭은 표마다 colgroup 에서 따로 조정. 표 아래 주의 문장(p.wn)은 표마다 1줄, 필요 없으면 삭제.

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작.

<div class="dk dk-twin3">
<div class="dk-card"><p class="dk-lb">상황별 연결 방식</p><table>
<colgroup><col style="width:120px"><col style="width:140px"><col></colgroup>
<thead><tr><th>상황</th><th>방식</th><th>동작</th></tr></thead>
<tbody>
<tr><td class="k">앱 설치됨</td><td class="v">딥링크</td><td>앱 실행 후 상품 상세 화면으로 이동</td></tr>
<tr><td class="k">앱 미설치</td><td class="v">디퍼드 딥링크</td><td>스토어, 설치, 첫 실행을 거친 뒤 원래 보려던 화면으로 이동</td></tr>
<tr><td class="k">앱 안 브라우저</td><td class="v">측정 솔루션의 통합 링크</td><td>환경을 판별해 경로 분기. 필요 시 외부 브라우저로 유도</td></tr>
</tbody></table><p class="wn">메신저·SNS 앱 안 브라우저에서는 딥링크가 작동하지 않을 수 있음</p></div>
<div class="dk-card"><p class="dk-lb mu">기기별 구현 요건</p><table>
<colgroup><col style="width:130px"><col style="width:110px"><col></colgroup>
<thead><tr><th>기술 표준</th><th>기기</th><th>요건</th></tr></thead>
<tbody>
<tr><td class="k">유니버설 링크</td><td class="v">iOS</td><td>도메인에 검증 파일 등록</td></tr>
<tr><td class="k">앱 링크</td><td class="v">안드로이드</td><td>도메인에 검증 파일 등록</td></tr>
<tr><td class="k">주소 스킴</td><td class="v">공통</td><td>검증 없음. 미설치 시 오류, 디퍼드 미지원</td></tr>
</tbody></table><p class="wn">두 표준은 서로 호환되지 않아 둘 다 구현</p></div>
</div>

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