반폭 · 요일×시간대 소형 히트맵

요일과 시간대별 반응(클릭, 문의, 구매)이 어디에 몰리는지 절반 칸에. 요일 7열 × 시간대 4~6행. 농도 5단(무채색) + 최고 구간 한 칸만 강조색. 칸에 숫자를 적지 않고 농도로만 표시. 값 바꾸는 법: 칸마다 rect 의 class 로 농도를 정한다: f-s(가장 낮음), f-g1, f-g2, f-g3, f-g4(높음) 다섯 단계. 값의 범위를 5등분해 단계를 매긴다. 가장 높은 한 칸만 class="f-a". 칸 x = 62 + (요일 순번 − 1) × 48, y = 24 + (시간대 순번 − 1) × 37(행 5개 기준. 4행이면 간격 46·칸 높이 43, 6행이면 간격 31·칸 높이 28). 왼쪽 시간대 이름과 범례의 최고 구간 문구 교체.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Correlation·Distribution 분류(heatmap)와 광고 관리 도구의 요일·시간대 성과 화면 구성을 참고. 직접 제작.

<div class="dk dkh dkh-g-heat"><div class="dk-card"><p class="dk-lb">요일·시간대별 문의 접수 분포 · 최근 8주</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 206" preserveAspectRatio="xMidYMid meet" role="img">
<text x="84.5" y="14" text-anchor="middle" class="k">월</text><text x="132.5" y="14" text-anchor="middle" class="k">화</text><text x="180.5" y="14" text-anchor="middle" class="k">수</text><text x="228.5" y="14" text-anchor="middle" class="k">목</text><text x="276.5" y="14" text-anchor="middle" class="k">금</text><text x="324.5" y="14" text-anchor="middle" class="k">토</text><text x="372.5" y="14" text-anchor="middle" class="k">일</text>
<text x="54" y="46" text-anchor="end">06~10시</text><rect x="62" y="24" width="45" height="34" rx="4" class="f-g1"/><rect x="110" y="24" width="45" height="34" rx="4" class="f-g1"/><rect x="158" y="24" width="45" height="34" rx="4" class="f-g1"/><rect x="206" y="24" width="45" height="34" rx="4" class="f-g1"/><rect x="254" y="24" width="45" height="34" rx="4" class="f-g1"/><rect x="302" y="24" width="45" height="34" rx="4" class="f-s"/><rect x="350" y="24" width="45" height="34" rx="4" class="f-s"/>
<text x="54" y="83" text-anchor="end">10~14시</text><rect x="62" y="61" width="45" height="34" rx="4" class="f-g2"/><rect x="110" y="61" width="45" height="34" rx="4" class="f-g2"/><rect x="158" y="61" width="45" height="34" rx="4" class="f-g2"/><rect x="206" y="61" width="45" height="34" rx="4" class="f-g2"/><rect x="254" y="61" width="45" height="34" rx="4" class="f-g2"/><rect x="302" y="61" width="45" height="34" rx="4" class="f-g1"/><rect x="350" y="61" width="45" height="34" rx="4" class="f-g1"/>
<text x="54" y="120" text-anchor="end">14~18시</text><rect x="62" y="98" width="45" height="34" rx="4" class="f-g1"/><rect x="110" y="98" width="45" height="34" rx="4" class="f-g2"/><rect x="158" y="98" width="45" height="34" rx="4" class="f-g2"/><rect x="206" y="98" width="45" height="34" rx="4" class="f-g2"/><rect x="254" y="98" width="45" height="34" rx="4" class="f-g2"/><rect x="302" y="98" width="45" height="34" rx="4" class="f-g2"/><rect x="350" y="98" width="45" height="34" rx="4" class="f-g2"/>
<text x="54" y="157" text-anchor="end">18~22시</text><rect x="62" y="135" width="45" height="34" rx="4" class="f-g3"/><rect x="110" y="135" width="45" height="34" rx="4" class="f-g3"/><rect x="158" y="135" width="45" height="34" rx="4" class="f-g4"/><rect x="206" y="135" width="45" height="34" rx="4" class="f-g3"/><rect x="254" y="135" width="45" height="34" rx="4" class="f-g3"/><rect x="302" y="135" width="45" height="34" rx="4" class="f-g3"/><rect x="350" y="135" width="45" height="34" rx="4" class="f-g4"/>
<text x="54" y="194" text-anchor="end">22~02시</text><rect x="62" y="172" width="45" height="34" rx="4" class="f-g3"/><rect x="110" y="172" width="45" height="34" rx="4" class="f-g4"/><rect x="158" y="172" width="45" height="34" rx="4" class="f-a"/><rect x="206" y="172" width="45" height="34" rx="4" class="f-g4"/><rect x="254" y="172" width="45" height="34" rx="4" class="f-g3"/><rect x="302" y="172" width="45" height="34" rx="4" class="f-g2"/><rect x="350" y="172" width="45" height="34" rx="4" class="f-g3"/>

</svg></div>
<p class="lg"><span>낮음<i class="c-s"></i><i class="c-g1"></i><i class="c-g2"></i><i class="c-g3"></i><i class="c-g4"></i>높음</span><span><i class="c-a"></i>최고 구간 · 수요일 22~02시</span></p>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-heat .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-heat .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-heat .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-heat .cv{flex:1;min-height:0;position:relative}
.dkh-g-heat .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-heat svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-heat svg .k{fill:var(--ink2)}
.dkh-g-heat svg .v{fill:var(--ink);font-weight:600}
.dkh-g-heat svg .va{fill:var(--ac);font-weight:700}
.dkh-g-heat svg .on{fill:var(--card);font-weight:600}
.dkh-g-heat svg .t14{font-size:14px}
.dkh-g-heat svg .f-a{fill:var(--ac)}
.dkh-g-heat svg .f-w{fill:var(--acw)}
.dkh-g-heat svg .f-s{fill:var(--soft)}
.dkh-g-heat svg .f-c{fill:var(--card)}
.dkh-g-heat svg .f-g1{fill:var(--g1)}
.dkh-g-heat svg .f-g2{fill:var(--g2)}
.dkh-g-heat svg .f-g3{fill:var(--g3)}
.dkh-g-heat svg .f-g4{fill:var(--g4)}
.dkh-g-heat svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-heat svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dkh-g-heat .lg{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--f-cap);color:var(--ink2);margin:8px 0 0}
.dkh-g-heat .lg span{display:flex;align-items:center;gap:6px}
.dkh-g-heat .lg i{display:block;width:10px;height:10px;border-radius:2px}
.dkh-g-heat .lg .c-a{background:var(--ac)}
.dkh-g-heat .lg .c-s{background:var(--soft)}
.dkh-g-heat .lg .c-g1{background:var(--g1)}
.dkh-g-heat .lg .c-g2{background:var(--g2)}
.dkh-g-heat .lg .c-g3{background:var(--g3)}
.dkh-g-heat .lg .c-g4{background:var(--g4)}
.dkh-g-heat .lg span{gap:4px}
.dkh-g-heat .lg i{width:12px;height:12px}