Add frequency codes to metric drawer

app.js

@@ -96,6 +96,17 @@ const targetLabel = (token) => {
 	const match = key.match(/^after(\d+)([wmqhy])$/);
 	return match ? `${match[1]}${match[2].toUpperCase()}` : "—";
 };
+const freqCode = (frequency) => {
+	const map = {
+		"Annual": "Y",
+		"Business-daily": "BD",
+		"Daily": "D",
+		"Monthly": "M",
+		"Quarterly": "Q",
+		"Weekly": "W"
+	};
+	return map[frequency] || frequency || "";
+};
 const horizonOrder = (value) => {
 	const key = String(value || "").toLowerCase();
 	const match = key.match(/(?:pct|after|h)(\d+)([wmqhy])$/);
@@ -563,8 +574,8 @@ function showMetricDetail(model, tier, unit) {
 	const label = rows[0]?.unit_label || unit;
 	const k = geometricMean(rows.map((r) => r.rank));
 	let html = `<p class="detail-k">${TIER_SHORT[tier]} · ${label} K = <b>${fmt(k)}</b> · ${rows.length.toLocaleString()} cells</p>`;
-	html += `<div class="period-card"><h3>Description for Type and Target</h3><div class="period-help"><span><b>W</b> Week</span><span><b>M</b> Month</span><span><b>Q</b> Quarter</span><span><b>H</b> Half-year</span><span><b>Y</b> Year</span></div></div>`;
-	html += `<table><thead><tr><th>Metrics</th><th>Type</th><th>Target</th><th class="num">Value</th><th class="num">Rank</th></tr></thead><tbody>`;
+	html += `<div class="period-card"><h3>Description for Date Codes</h3><div class="period-help"><span><b>D</b> Day</span><span><b>W</b> Week</span><span><b>M</b> Month</span><span><b>Q</b> Quarter</span><span><b>H</b> Half-year</span><span><b>Y</b> Year</span><span><b>B</b> Business</span><span><b>BD</b> Business-day</span></div></div>`;
+	html += `<table><thead><tr><th>Freq</th><th>Metrics</th><th>Type</th><th>Target</th><th class="num">Value</th><th class="num">Rank</th></tr></thead><tbody>`;
 	for (const row of rows) {
 		const parts = parseMetricParts(row.metric);
 		const direction = metricDirection(row.metric);
@@ -575,7 +586,7 @@ function showMetricDetail(model, tier, unit) {
 				&& candidate.series_id === row.series_id
 				&& candidate.metric === row.metric;
 		}).length;
-		html += `<tr><td title="${row.metric}">${parts.name} <span class="dir-arrow ${direction > 0 ? "up" : "down"}">${direction > 0 ? "↑" : "↓"}</span></td><td>${parts.type}</td><td>${parts.target}</td><td class="num">${fmtValue(row.value)}</td><td class="num">${rankText(row.rank, total)}</td></tr>`;
+		html += `<tr><td title="${row.frequency}">${freqCode(row.frequency)}</td><td title="${row.metric}">${parts.name} <span class="dir-arrow ${direction > 0 ? "up" : "down"}">${direction > 0 ? "↑" : "↓"}</span></td><td>${parts.type}</td><td>${parts.target}</td><td class="num">${fmtValue(row.value)}</td><td class="num">${rankText(row.rank, total)}</td></tr>`;
 	}
 	html += `</tbody></table><p class="note">↑는 클수록 좋음, ↓는 작을수록 좋음입니다. Rank는 같은 tier · Detail Category · Frequency · metric 비교 단위의 등수/전체개수입니다.</p>`;
 	$("detail2-title").textContent = `${label} · ${TIER_SHORT[tier]}`;

style.css

@@ -449,7 +449,7 @@ table.smap td.ov, table.smap th.ov { font-weight: 700; }
 }
 .period-help {
 	display: grid;
-	grid-template-columns: repeat(5, minmax(0, 1fr));
+	grid-template-columns: repeat(4, minmax(0, 1fr));
 	gap: 6px;
 	margin: 0;
 }