kakaotalk-chat-analyzer 0.10.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +1 -0
  2. package/dist/src/report-charts.d.ts +1 -1
  3. package/dist/src/report-charts.js +26 -2
  4. package/dist/src/report-charts.js.map +1 -1
  5. package/dist/src/report-styles.d.ts +1 -1
  6. package/dist/src/report-styles.js +313 -6
  7. package/dist/src/report-styles.js.map +1 -1
  8. package/dist/src/report-ux.d.ts +1 -1
  9. package/dist/src/report-ux.js +49 -7
  10. package/dist/src/report-ux.js.map +1 -1
  11. package/dist/src/version.d.ts +2 -2
  12. package/dist/src/version.js +1 -1
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -116,6 +116,7 @@ npm run bench:stream -- 100000
116
116
 
117
117
  | 버전 | 요약 |
118
118
  |------|------|
119
+ | **0.11.0** | 반응형 6레이어(모바일~4K)·컨테이너 쿼리·ECharts ResizeObserver·스크롤 리빌 |
119
120
  | **0.10.2** | CSS 복구: `.deck-nav` pill 네비·명시 라이트/다크 팔레트(대비)·테마 버튼 동기화 |
120
121
  | **0.10.1** | Pretendard 서브셋 CDN·`--kca-font-sans` 순환 참조 수정·카드 radius 토큰 |
121
122
  | **0.10.0** | 리포트 CSS **Open Props** 토큰·6레이어 번들(`report-styles.ts`)·시맨틱 컬러 리워크 |
package/dist/src/report-charts.d.ts CHANGED
@@ -47,4 +47,4 @@ export interface ChartPayload {
47
47
  export declare function serializeChartPayload(data: ReportData): string;
48
48
  export declare function buildChartPayload(data: ReportData): ChartPayload;
49
49
  export declare function renderChartDeck(data: ReportData): string;
50
- export declare const CHARTS_INIT_SCRIPT = "\n (function () {\n function run() {\n var dataEl = document.getElementById(\"kca-chart-data\");\n if (!dataEl) return;\n if (typeof echarts === \"undefined\") return;\n var data;\n try { data = JSON.parse(dataEl.textContent || \"{}\"); } catch (e) { return; }\n\n var dark = document.documentElement.getAttribute(\"data-theme\") === \"dark\" ||\n (!document.documentElement.getAttribute(\"data-theme\") &&\n window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches);\n var text = dark ? \"#e9eef5\" : \"#141a1f\";\n var muted = dark ? \"#8b98a8\" : \"#5c6670\";\n var accent = dark ? \"#3ee8c5\" : \"#0f6b5c\";\n var accent2 = dark ? \"#818cf8\" : \"#4f46e5\";\n\n function baseOpt() {\n return {\n textStyle: { color: text, fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\" },\n tooltip: { trigger: \"axis\", backgroundColor: dark ? \"#1c2128\" : \"#fff\", borderColor: \"transparent\" },\n };\n }\n\n var charts = [];\n function resizeAll() {\n charts.forEach(function (c) {\n try { c.resize(); } catch (e) {}\n });\n }\n function init(id, opt) {\n var el = document.getElementById(id);\n if (!el) return null;\n try {\n var chart = echarts.init(el, null, { renderer: \"canvas\" });\n chart.setOption(opt);\n charts.push(chart);\n return chart;\n } catch (err) {\n console.error(\"[kca-chart]\", id, err);\n el.setAttribute(\"data-chart-failed\", \"1\");\n el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC0C8\uB85C\uACE0\uCE68\uD558\uAC70\uB098 \uB124\uD2B8\uC6CC\uD06C(CDN)\uB97C \uD655\uC778\uD574 \uC8FC\uC138\uC694.</p>';\n return null;\n }\n }\n\n if (data.hourly && document.getElementById(\"chart-hours\")) {\n init(\"chart-hours\", Object.assign(baseOpt(), {\n grid: { left: 36, right: 12, top: 24, bottom: 28 },\n xAxis: { type: \"category\", data: data.hourly.map(function (_, h) { return h + \"\uC2DC\"; }), axisLabel: { color: muted, fontSize: 10 } },\n yAxis: { type: \"value\", axisLabel: { color: muted }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n series: [{\n type: \"bar\",\n data: data.hourly,\n itemStyle: {\n borderRadius: [4, 4, 0, 0],\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: accent },\n { offset: 1, color: accent2 },\n ]),\n },\n }],\n }));\n }\n\n if (data.weekdays && document.getElementById(\"chart-weekday\")) {\n init(\"chart-weekday\", Object.assign(baseOpt(), {\n grid: { left: 48, right: 12, top: 24, bottom: 28 },\n xAxis: { type: \"value\", axisLabel: { color: muted } },\n yAxis: { type: \"category\", data: data.weekdays.map(function (w) { return w.label; }), axisLabel: { color: muted } },\n series: [{ type: \"bar\", data: data.weekdays.map(function (w) { return w.count; }), itemStyle: { color: accent, borderRadius: [0, 6, 6, 0] } }],\n }));\n }\n\n if (data.monthly && document.getElementById(\"chart-monthly\")) {\n init(\"chart-monthly\", Object.assign(baseOpt(), {\n grid: { left: 40, right: 12, top: 20, bottom: 36 },\n xAxis: { type: \"category\", data: data.monthly.map(function (m) { return m.label; }), axisLabel: { color: muted, fontSize: 10, rotate: 35 } },\n yAxis: { type: \"value\", axisLabel: { color: muted }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n series: [{ type: \"line\", smooth: true, data: data.monthly.map(function (m) { return m.count; }), areaStyle: { opacity: 0.12 }, lineStyle: { width: 2, color: accent2 }, itemStyle: { color: accent2 } }],\n }));\n }\n\n if (data.daily && document.getElementById(\"chart-daily-heat\")) {\n var heat = data.daily.map(function (d) { return [d.date, d.count]; });\n var burst = {};\n (data.burstDates || []).forEach(function (d) { burst[d] = true; });\n init(\"chart-daily-heat\", Object.assign(baseOpt(), {\n tooltip: { position: \"top\" },\n visualMap: { min: 0, max: Math.max.apply(null, data.daily.map(function (d) { return d.count; })), calculable: true, orient: \"horizontal\", left: \"center\", bottom: 0, textStyle: { color: muted }, inRange: { color: dark ? [\"#161b22\", \"#0e4429\", \"#006d32\", \"#26a641\", \"#39d353\"] : [\"#ebedf0\", \"#9be9a8\", \"#40c463\", \"#30a14e\", \"#216e39\"] } },\n calendar: { top: 36, left: 40, right: 20, cellSize: [\"auto\", 14], range: data.daily.length ? [data.daily[0].date, data.daily[data.daily.length - 1].date] : undefined, itemStyle: { borderWidth: 0.5, borderColor: dark ? \"#30363d\" : \"#fff\" }, dayLabel: { color: muted, fontSize: 10 }, monthLabel: { color: muted } },\n series: [{ type: \"heatmap\", coordinateSystem: \"calendar\", data: heat }],\n }));\n }\n\n if (data.keywords && document.getElementById(\"chart-kw-bar\")) {\n var topBar = data.keywords.slice(0, 80);\n init(\"chart-kw-bar\", Object.assign(baseOpt(), {\n grid: { left: 96, right: 16, top: 12, bottom: 12 },\n xAxis: { type: \"value\", axisLabel: { color: muted } },\n yAxis: { type: \"category\", data: topBar.map(function (k) { return k.label; }).reverse(), axisLabel: { color: text, fontSize: 11 } },\n series: [{ type: \"bar\", data: topBar.map(function (k) { return k.count; }).reverse(), itemStyle: { color: accent2, borderRadius: [0, 4, 4, 0] } }],\n }));\n }\n\n if (data.keywords && document.getElementById(\"chart-kw-cloud\")) {\n var cloud = data.keywords.slice(0, 100).map(function (k) {\n return { name: k.label, value: k.count };\n });\n init(\"chart-kw-cloud\", {\n textStyle: baseOpt().textStyle,\n tooltip: { show: true },\n series: [{\n type: \"wordCloud\",\n shape: \"circle\",\n gridSize: 6,\n sizeRange: [12, 56],\n rotationRange: [-45, 45],\n textStyle: {\n fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\",\n color: function () {\n var palette = dark ? [\"#3ee8c5\", \"#818cf8\", \"#fbbf24\", \"#fb923c\", \"#f472b6\"] : [\"#0f6b5c\", \"#4f46e5\", \"#b8860b\", \"#c45c2a\", \"#be185d\"];\n return palette[Math.floor(Math.random() * palette.length)];\n },\n },\n data: cloud,\n }],\n });\n }\n\n if (data.participants && document.getElementById(\"chart-participants\")) {\n var p = data.participants.slice(0, 16);\n init(\"chart-participants\", Object.assign(baseOpt(), {\n tooltip: { trigger: \"item\" },\n series: [{\n type: \"pie\",\n radius: [\"42%\", \"70%\"],\n data: p.map(function (x) { return { name: x.alias, value: x.messages }; }),\n label: { color: text, fontSize: 10 },\n itemStyle: { borderRadius: 4, borderColor: dark ? \"#0d1117\" : \"#fff\", borderWidth: 2 },\n }],\n }));\n }\n\n if (data.topics && data.topics.length && document.getElementById(\"chart-topics\")) {\n var topics = data.topics.slice(0, 8);\n init(\"chart-topics\", Object.assign(baseOpt(), {\n grid: { left: 120, right: 24, top: 16, bottom: 24 },\n xAxis: { type: \"value\", axisLabel: { color: muted, formatter: \"{value}%\" } },\n yAxis: {\n type: \"category\",\n data: topics.map(function (t) { return t.title; }).reverse(),\n axisLabel: { color: text, fontSize: 11 },\n },\n series: [{\n type: \"bar\",\n data: topics.map(function (t) { return t.messagePercent; }).reverse(),\n itemStyle: {\n borderRadius: [0, 6, 6, 0],\n color: function (p) { return p.dataIndex % 2 === 0 ? accent : accent2; },\n },\n }],\n }));\n }\n\n if (data.domains && document.getElementById(\"chart-domains\")) {\n init(\"chart-domains\", Object.assign(baseOpt(), {\n tooltip: { trigger: \"item\" },\n series: [{\n type: \"treemap\",\n data: data.domains.map(function (d) { return { name: d.label, value: d.count }; }),\n label: { color: text, fontSize: 11 },\n itemStyle: { borderColor: dark ? \"#0d1117\" : \"#fff\", gapWidth: 2 },\n }],\n }));\n }\n requestAnimationFrame(resizeAll);\n setTimeout(resizeAll, 150);\n window.addEventListener(\"resize\", resizeAll);\n window.addEventListener(\"load\", resizeAll);\n }\n if (typeof echarts !== \"undefined\") {\n run();\n } else {\n window.addEventListener(\"load\", function () {\n var tries = 0;\n (function wait() {\n if (typeof echarts !== \"undefined\") { run(); return; }\n if (++tries > 120) {\n document.querySelectorAll(\".chart-box\").forEach(function (el) {\n if (!el.querySelector(\"canvas\")) {\n el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">ECharts CDN\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.</p>';\n }\n });\n return;\n }\n setTimeout(wait, 50);\n })();\n });\n }\n })();\n";
50
+ export declare const CHARTS_INIT_SCRIPT = "\n (function () {\n function run() {\n var dataEl = document.getElementById(\"kca-chart-data\");\n if (!dataEl) return;\n if (typeof echarts === \"undefined\") return;\n var data;\n try { data = JSON.parse(dataEl.textContent || \"{}\"); } catch (e) { return; }\n\n var dark = document.documentElement.getAttribute(\"data-theme\") === \"dark\" ||\n (!document.documentElement.getAttribute(\"data-theme\") &&\n window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches);\n var text = dark ? \"#e9eef5\" : \"#141a1f\";\n var muted = dark ? \"#8b98a8\" : \"#5c6670\";\n var accent = dark ? \"#3ee8c5\" : \"#0f6b5c\";\n var accent2 = dark ? \"#818cf8\" : \"#4f46e5\";\n\n function baseOpt() {\n return {\n textStyle: { color: text, fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\" },\n tooltip: { trigger: \"axis\", backgroundColor: dark ? \"#1c2128\" : \"#fff\", borderColor: \"transparent\" },\n };\n }\n\n var charts = [];\n function resizeAll() {\n charts.forEach(function (c) {\n try { c.resize(); } catch (e) {}\n });\n }\n function layout(el) {\n var w = (el && el.clientWidth) || 400;\n if (w < 380) return { left: 28, right: 8, top: 14, bottom: 42, fs: 9, rot: 38 };\n if (w < 640) return { left: 40, right: 10, top: 18, bottom: 32, fs: 10, rot: 24 };\n return { left: 48, right: 14, top: 22, bottom: 28, fs: 11, rot: 0 };\n }\n function init(id, opt) {\n var el = document.getElementById(id);\n if (!el) return null;\n try {\n var chart = echarts.init(el, null, { renderer: \"canvas\" });\n chart.setOption(opt);\n charts.push(chart);\n if (typeof ResizeObserver !== \"undefined\") {\n var ro = new ResizeObserver(function () {\n requestAnimationFrame(function () {\n try { chart.resize(); } catch (e) {}\n });\n });\n ro.observe(el);\n }\n return chart;\n } catch (err) {\n console.error(\"[kca-chart]\", id, err);\n el.setAttribute(\"data-chart-failed\", \"1\");\n el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC0C8\uB85C\uACE0\uCE68\uD558\uAC70\uB098 \uB124\uD2B8\uC6CC\uD06C(CDN)\uB97C \uD655\uC778\uD574 \uC8FC\uC138\uC694.</p>';\n return null;\n }\n }\n var mqWide = window.matchMedia && window.matchMedia(\"(min-width: 900px)\");\n if (mqWide && mqWide.addEventListener) {\n mqWide.addEventListener(\"change\", function () { setTimeout(resizeAll, 80); });\n } else if (mqWide && mqWide.addListener) {\n mqWide.addListener(function () { setTimeout(resizeAll, 80); });\n }\n var themeObs = new MutationObserver(function () { setTimeout(resizeAll, 60); });\n themeObs.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-theme\"] });\n\n if (data.hourly && document.getElementById(\"chart-hours\")) {\n var hoursEl = document.getElementById(\"chart-hours\");\n var hg = layout(hoursEl);\n init(\"chart-hours\", Object.assign(baseOpt(), {\n grid: { left: hg.left, right: hg.right, top: hg.top, bottom: hg.bottom },\n xAxis: { type: \"category\", data: data.hourly.map(function (_, h) { return h + \"\uC2DC\"; }), axisLabel: { color: muted, fontSize: hg.fs, rotate: hg.rot } },\n yAxis: { type: \"value\", axisLabel: { color: muted }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n series: [{\n type: \"bar\",\n data: data.hourly,\n itemStyle: {\n borderRadius: [4, 4, 0, 0],\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: accent },\n { offset: 1, color: accent2 },\n ]),\n },\n }],\n }));\n }\n\n if (data.weekdays && document.getElementById(\"chart-weekday\")) {\n init(\"chart-weekday\", Object.assign(baseOpt(), {\n grid: { left: 48, right: 12, top: 24, bottom: 28 },\n xAxis: { type: \"value\", axisLabel: { color: muted } },\n yAxis: { type: \"category\", data: data.weekdays.map(function (w) { return w.label; }), axisLabel: { color: muted } },\n series: [{ type: \"bar\", data: data.weekdays.map(function (w) { return w.count; }), itemStyle: { color: accent, borderRadius: [0, 6, 6, 0] } }],\n }));\n }\n\n if (data.monthly && document.getElementById(\"chart-monthly\")) {\n init(\"chart-monthly\", Object.assign(baseOpt(), {\n grid: { left: 40, right: 12, top: 20, bottom: 36 },\n xAxis: { type: \"category\", data: data.monthly.map(function (m) { return m.label; }), axisLabel: { color: muted, fontSize: 10, rotate: 35 } },\n yAxis: { type: \"value\", axisLabel: { color: muted }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n series: [{ type: \"line\", smooth: true, data: data.monthly.map(function (m) { return m.count; }), areaStyle: { opacity: 0.12 }, lineStyle: { width: 2, color: accent2 }, itemStyle: { color: accent2 } }],\n }));\n }\n\n if (data.daily && document.getElementById(\"chart-daily-heat\")) {\n var heat = data.daily.map(function (d) { return [d.date, d.count]; });\n var burst = {};\n (data.burstDates || []).forEach(function (d) { burst[d] = true; });\n init(\"chart-daily-heat\", Object.assign(baseOpt(), {\n tooltip: { position: \"top\" },\n visualMap: { min: 0, max: Math.max.apply(null, data.daily.map(function (d) { return d.count; })), calculable: true, orient: \"horizontal\", left: \"center\", bottom: 0, textStyle: { color: muted }, inRange: { color: dark ? [\"#161b22\", \"#0e4429\", \"#006d32\", \"#26a641\", \"#39d353\"] : [\"#ebedf0\", \"#9be9a8\", \"#40c463\", \"#30a14e\", \"#216e39\"] } },\n calendar: { top: 36, left: 40, right: 20, cellSize: [\"auto\", 14], range: data.daily.length ? [data.daily[0].date, data.daily[data.daily.length - 1].date] : undefined, itemStyle: { borderWidth: 0.5, borderColor: dark ? \"#30363d\" : \"#fff\" }, dayLabel: { color: muted, fontSize: 10 }, monthLabel: { color: muted } },\n series: [{ type: \"heatmap\", coordinateSystem: \"calendar\", data: heat }],\n }));\n }\n\n if (data.keywords && document.getElementById(\"chart-kw-bar\")) {\n var topBar = data.keywords.slice(0, 80);\n init(\"chart-kw-bar\", Object.assign(baseOpt(), {\n grid: { left: 96, right: 16, top: 12, bottom: 12 },\n xAxis: { type: \"value\", axisLabel: { color: muted } },\n yAxis: { type: \"category\", data: topBar.map(function (k) { return k.label; }).reverse(), axisLabel: { color: text, fontSize: 11 } },\n series: [{ type: \"bar\", data: topBar.map(function (k) { return k.count; }).reverse(), itemStyle: { color: accent2, borderRadius: [0, 4, 4, 0] } }],\n }));\n }\n\n if (data.keywords && document.getElementById(\"chart-kw-cloud\")) {\n var cloud = data.keywords.slice(0, 100).map(function (k) {\n return { name: k.label, value: k.count };\n });\n init(\"chart-kw-cloud\", {\n textStyle: baseOpt().textStyle,\n tooltip: { show: true },\n series: [{\n type: \"wordCloud\",\n shape: \"circle\",\n gridSize: 6,\n sizeRange: [12, 56],\n rotationRange: [-45, 45],\n textStyle: {\n fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\",\n color: function () {\n var palette = dark ? [\"#3ee8c5\", \"#818cf8\", \"#fbbf24\", \"#fb923c\", \"#f472b6\"] : [\"#0f6b5c\", \"#4f46e5\", \"#b8860b\", \"#c45c2a\", \"#be185d\"];\n return palette[Math.floor(Math.random() * palette.length)];\n },\n },\n data: cloud,\n }],\n });\n }\n\n if (data.participants && document.getElementById(\"chart-participants\")) {\n var p = data.participants.slice(0, 16);\n init(\"chart-participants\", Object.assign(baseOpt(), {\n tooltip: { trigger: \"item\" },\n series: [{\n type: \"pie\",\n radius: [\"42%\", \"70%\"],\n data: p.map(function (x) { return { name: x.alias, value: x.messages }; }),\n label: { color: text, fontSize: 10 },\n itemStyle: { borderRadius: 4, borderColor: dark ? \"#0d1117\" : \"#fff\", borderWidth: 2 },\n }],\n }));\n }\n\n if (data.topics && data.topics.length && document.getElementById(\"chart-topics\")) {\n var topics = data.topics.slice(0, 8);\n init(\"chart-topics\", Object.assign(baseOpt(), {\n grid: { left: 120, right: 24, top: 16, bottom: 24 },\n xAxis: { type: \"value\", axisLabel: { color: muted, formatter: \"{value}%\" } },\n yAxis: {\n type: \"category\",\n data: topics.map(function (t) { return t.title; }).reverse(),\n axisLabel: { color: text, fontSize: 11 },\n },\n series: [{\n type: \"bar\",\n data: topics.map(function (t) { return t.messagePercent; }).reverse(),\n itemStyle: {\n borderRadius: [0, 6, 6, 0],\n color: function (p) { return p.dataIndex % 2 === 0 ? accent : accent2; },\n },\n }],\n }));\n }\n\n if (data.domains && document.getElementById(\"chart-domains\")) {\n init(\"chart-domains\", Object.assign(baseOpt(), {\n tooltip: { trigger: \"item\" },\n series: [{\n type: \"treemap\",\n data: data.domains.map(function (d) { return { name: d.label, value: d.count }; }),\n label: { color: text, fontSize: 11 },\n itemStyle: { borderColor: dark ? \"#0d1117\" : \"#fff\", gapWidth: 2 },\n }],\n }));\n }\n requestAnimationFrame(resizeAll);\n setTimeout(resizeAll, 150);\n window.addEventListener(\"resize\", resizeAll);\n window.addEventListener(\"load\", resizeAll);\n }\n if (typeof echarts !== \"undefined\") {\n run();\n } else {\n window.addEventListener(\"load\", function () {\n var tries = 0;\n (function wait() {\n if (typeof echarts !== \"undefined\") { run(); return; }\n if (++tries > 120) {\n document.querySelectorAll(\".chart-box\").forEach(function (el) {\n if (!el.querySelector(\"canvas\")) {\n el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">ECharts CDN\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.</p>';\n }\n });\n return;\n }\n setTimeout(wait, 50);\n })();\n });\n }\n })();\n";
package/dist/src/report-charts.js CHANGED
@@ -136,6 +136,12 @@ export const CHARTS_INIT_SCRIPT = `
136
136
  try { c.resize(); } catch (e) {}
137
137
  });
138
138
  }
139
+ function layout(el) {
140
+ var w = (el && el.clientWidth) || 400;
141
+ if (w < 380) return { left: 28, right: 8, top: 14, bottom: 42, fs: 9, rot: 38 };
142
+ if (w < 640) return { left: 40, right: 10, top: 18, bottom: 32, fs: 10, rot: 24 };
143
+ return { left: 48, right: 14, top: 22, bottom: 28, fs: 11, rot: 0 };
144
+ }
139
145
  function init(id, opt) {
140
146
  var el = document.getElementById(id);
141
147
  if (!el) return null;
@@ -143,6 +149,14 @@ export const CHARTS_INIT_SCRIPT = `
143
149
  var chart = echarts.init(el, null, { renderer: "canvas" });
144
150
  chart.setOption(opt);
145
151
  charts.push(chart);
152
+ if (typeof ResizeObserver !== "undefined") {
153
+ var ro = new ResizeObserver(function () {
154
+ requestAnimationFrame(function () {
155
+ try { chart.resize(); } catch (e) {}
156
+ });
157
+ });
158
+ ro.observe(el);
159
+ }
146
160
  return chart;
147
161
  } catch (err) {
148
162
  console.error("[kca-chart]", id, err);
@@ -151,11 +165,21 @@ export const CHARTS_INIT_SCRIPT = `
151
165
  return null;
152
166
  }
153
167
  }
168
+ var mqWide = window.matchMedia && window.matchMedia("(min-width: 900px)");
169
+ if (mqWide && mqWide.addEventListener) {
170
+ mqWide.addEventListener("change", function () { setTimeout(resizeAll, 80); });
171
+ } else if (mqWide && mqWide.addListener) {
172
+ mqWide.addListener(function () { setTimeout(resizeAll, 80); });
173
+ }
174
+ var themeObs = new MutationObserver(function () { setTimeout(resizeAll, 60); });
175
+ themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
154
176
 
155
177
  if (data.hourly && document.getElementById("chart-hours")) {
178
+ var hoursEl = document.getElementById("chart-hours");
179
+ var hg = layout(hoursEl);
156
180
  init("chart-hours", Object.assign(baseOpt(), {
157
- grid: { left: 36, right: 12, top: 24, bottom: 28 },
158
- xAxis: { type: "category", data: data.hourly.map(function (_, h) { return h + "시"; }), axisLabel: { color: muted, fontSize: 10 } },
181
+ grid: { left: hg.left, right: hg.right, top: hg.top, bottom: hg.bottom },
182
+ xAxis: { type: "category", data: data.hourly.map(function (_, h) { return h + "시"; }), axisLabel: { color: muted, fontSize: hg.fs, rotate: hg.rot } },
159
183
  yAxis: { type: "value", axisLabel: { color: muted }, splitLine: { lineStyle: { color: dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)" } } },
160
184
  series: [{
161
185
  type: "bar",
package/dist/src/report-charts.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"report-charts.js","sourceRoot":"","sources":["../../src/report-charts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,kEAAkE;AAClE,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AAEjC,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG;;;CAG7B,CAAC;AAkBF,MAAM,UAAU,qBAAqB,CAAC,IAAgB;IACpD,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC3C,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;SACxB,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;SAC7B,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAgB;IAChD,OAAO;QACL,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QACrE,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;QAClC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,QAAQ,EAAE,CAAC,CAAC,QAAQ;YACpB,YAAY,EAAE,CAAC,CAAC,YAAY;SAC7B,CAAC,CAAC;QACH,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa;aACpC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;aACvB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;aACpC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAClD,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7C,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM;QAC3C,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,cAAc,EAAE,CAAC,CAAC,cAAc;YAChC,IAAI,EAAE,CAAC,CAAC,IAAI;SACb,CAAC,CAAC;KACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAgB;IAC9C,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;IAChC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IACtC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACvF,MAAM,UAAU,GACd,UAAU,GAAG,CAAC;QACZ,CAAC,CAAC;;;;eAIO;QACT,CAAC,CAAC,EAAE,CAAC;IAET,OAAO;;yEAEgE,YAAY,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BtE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;mEACkB,YAAY,CAAC,EAAE,CAAC;;QAE3E,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;+BAIV,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;;;;;;;;MAQ/D,UAAU;;IAEZ,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kEAAkE,EAAE,CAAC;AAChG,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAyC;IACnE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK;SACf,GAAG,CACF,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CACV,+BAA+B,CAAC,GAAG,CAAC,YAAY,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CACrI;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,6JAA6J,IAAI,wBAAwB,CAAC;AACnM,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyMjC,CAAC"}
1
+ {"version":3,"file":"report-charts.js","sourceRoot":"","sources":["../../src/report-charts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,kEAAkE;AAClE,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AAEjC,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG;;;CAG7B,CAAC;AAkBF,MAAM,UAAU,qBAAqB,CAAC,IAAgB;IACpD,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC3C,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;SACxB,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;SAC7B,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAgB;IAChD,OAAO;QACL,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QACrE,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;QAClC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,QAAQ,EAAE,CAAC,CAAC,QAAQ;YACpB,YAAY,EAAE,CAAC,CAAC,YAAY;SAC7B,CAAC,CAAC;QACH,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa;aACpC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;aACvB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;aACpC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAClD,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7C,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM;QAC3C,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,cAAc,EAAE,CAAC,CAAC,cAAc;YAChC,IAAI,EAAE,CAAC,CAAC,IAAI;SACb,CAAC,CAAC;KACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAgB;IAC9C,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;IAChC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IACtC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACvF,MAAM,UAAU,GACd,UAAU,GAAG,CAAC;QACZ,CAAC,CAAC;;;;eAIO;QACT,CAAC,CAAC,EAAE,CAAC;IAET,OAAO;;yEAEgE,YAAY,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BtE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;mEACkB,YAAY,CAAC,EAAE,CAAC;;QAE3E,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;+BAIV,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;;;;;;;;MAQ/D,UAAU;;IAEZ,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kEAAkE,EAAE,CAAC;AAChG,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAyC;IACnE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK;SACf,GAAG,CACF,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CACV,+BAA+B,CAAC,GAAG,CAAC,YAAY,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CACrI;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,6JAA6J,IAAI,wBAAwB,CAAC;AACnM,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiOjC,CAAC"}
package/dist/src/report-styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /** Generated by scripts/bundle-report-css.mjs — do not edit by hand */
2
- export declare const REPORT_STYLES = "/* open-props \u2014 https://open-props.style/ (MIT) */\n:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-2:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-3:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-4:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-5:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}\n\n/* 00-kca-tokens.css */\n/* kca \uC2DC\uB9E8\uD2F1 \uD1A0\uD070 \u2014 Open Props(\uADF8\uB77C\uB370\uC774\uC158\u00B7radius\u00B7shadow) + \uBA85\uC2DC \uD314\uB808\uD2B8(\uB300\uBE44) */\n:root {\n color-scheme: light dark;\n --bg: #f4f1ea;\n --bg2: #e8e2d6;\n --ink: #141a1f;\n --muted: #5c6670;\n --line: #d4cdc2;\n --panel: #fffcf7;\n --panel-solid: #fffcf7;\n --accent: #0f6b5c;\n --accent2: #5b4fc7;\n --warm: #c45c2a;\n --gold: #b8860b;\n --shadow: var(--shadow-4, 0 18px 50px rgba(20, 26, 31, 0.08));\n --bar-bg: #e5dfd4;\n --glow: color-mix(in oklab, var(--teal-5, #0f6b5c) 18%, transparent);\n --glass: rgba(255, 252, 247, 0.82);\n --glass-border: rgba(20, 26, 31, 0.1);\n --accent-grad: var(--gradient-21, linear-gradient(125deg, var(--accent), var(--accent2)));\n --radius-card: var(--radius-3, 14px);\n --radius-pill: var(--radius-round, 999px);\n --kca-font-sans: \"Pretendard Variable\", Pretendard, \"Apple SD Gothic Neo\", \"Malgun Gothic\", var(--font-sans, system-ui, sans-serif);\n --ease-out: var(--ease-out-3, cubic-bezier(0.22, 1, 0.36, 1));\n font-family: var(--kca-font-sans);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n --bg: #070a0e;\n --bg2: #0e1218;\n --ink: #e9eef5;\n --muted: #8b98a8;\n --line: rgba(255, 255, 255, 0.12);\n --panel: #161b22;\n --panel-solid: #161b22;\n --accent: #3ee8c5;\n --accent2: #a78bfa;\n --warm: #ff9f43;\n --gold: #fbbf24;\n --shadow: var(--shadow-4, 0 28px 90px rgba(0, 0, 0, 0.55));\n --bar-bg: rgba(255, 255, 255, 0.08);\n --glow: color-mix(in oklab, var(--teal-4, #3ee8c5) 20%, transparent);\n --glass: rgba(22, 27, 34, 0.88);\n --glass-border: rgba(255, 255, 255, 0.1);\n --accent-grad: var(--gradient-27, linear-gradient(125deg, var(--accent), var(--accent2)));\n }\n}\n\n:root[data-theme=\"dark\"] {\n --bg: #070a0e;\n --bg2: #0e1218;\n --ink: #e9eef5;\n --muted: #8b98a8;\n --line: rgba(255, 255, 255, 0.12);\n --panel: #161b22;\n --panel-solid: #161b22;\n --accent: #3ee8c5;\n --accent2: #a78bfa;\n --warm: #ff9f43;\n --gold: #fbbf24;\n --shadow: 0 28px 90px rgba(0, 0, 0, 0.55);\n --bar-bg: rgba(255, 255, 255, 0.08);\n --glow: color-mix(in oklab, #3ee8c5 20%, transparent);\n --glass: rgba(22, 27, 34, 0.88);\n --glass-border: rgba(255, 255, 255, 0.1);\n --accent-grad: linear-gradient(125deg, var(--accent), var(--accent2));\n}\n\n:root[data-theme=\"light\"] {\n --bg: #f4f1ea;\n --bg2: #e8e2d6;\n --ink: #141a1f;\n --muted: #5c6670;\n --line: #d4cdc2;\n --panel: #fffcf7;\n --panel-solid: #fffcf7;\n --accent: #0f6b5c;\n --accent2: #5b4fc7;\n --warm: #c45c2a;\n --gold: #b8860b;\n --shadow: 0 18px 50px rgba(20, 26, 31, 0.08);\n --bar-bg: #e5dfd4;\n --glow: color-mix(in oklab, #0f6b5c 18%, transparent);\n --glass: rgba(255, 252, 247, 0.82);\n --glass-border: rgba(20, 26, 31, 0.1);\n --accent-grad: linear-gradient(125deg, var(--accent), var(--accent2));\n}\n\n\n/* 01-kca-base.css */\n/* kca \uB9AC\uC14B\u00B7\uD0C0\uC774\uD3EC\u00B7\uBAA8\uC158 */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n overflow-x: clip;\n max-width: 100%;\n}\n\nbody {\n margin: 0;\n overflow-x: clip;\n max-width: 100%;\n background:\n radial-gradient(1200px 600px at 8% -12%, var(--glow), transparent 58%),\n radial-gradient(900px 480px at 96% 0%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 48%),\n linear-gradient(180deg, var(--bg), var(--bg2));\n color: var(--ink);\n font-family: var(--kca-font-sans);\n font-size: var(--font-size-1);\n line-height: var(--font-lineheight-3);\n transition:\n background 0.28s var(--ease-out),\n color 0.2s var(--ease-out);\n}\n\n.skip-link {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.skip-link:focus {\n position: fixed;\n left: var(--size-3);\n top: var(--size-3);\n width: auto;\n height: auto;\n margin: 0;\n clip: auto;\n z-index: 10000;\n padding: var(--size-2) var(--size-3);\n border-radius: var(--radius-2);\n background: var(--accent);\n color: var(--gray-0);\n font-weight: var(--font-weight-8);\n font-size: var(--font-size-0);\n box-shadow: var(--shadow-3);\n}\n\nmain {\n width: min(var(--size-content-3, 72rem), calc(100% - var(--size-4)));\n margin: 0 auto;\n padding: var(--size-6) 0 var(--size-8);\n overflow-x: clip;\n max-width: 100%;\n}\n\nh1 {\n margin: 0;\n font-size: clamp(var(--font-size-5), 4.2vw, var(--font-size-8));\n line-height: var(--font-lineheight-00);\n letter-spacing: var(--font-letterspacing-0);\n font-weight: var(--font-weight-8);\n}\n\nh2 {\n margin: 0 0 var(--size-2);\n font-size: var(--font-size-3);\n font-weight: var(--font-weight-7);\n letter-spacing: var(--font-letterspacing-0);\n}\n\na {\n color: var(--accent);\n}\n\n@keyframes kca-fade-up {\n from {\n opacity: 0;\n transform: translateY(var(--size-3));\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes kca-ring-in {\n from {\n transform: scale(0.92);\n opacity: 0.75;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.anim-enter {\n animation: kca-fade-up 0.52s var(--ease-out) forwards;\n opacity: 0;\n animation-delay: var(--enter-delay, 0s);\n}\n\n.rh-wrap.anim-ring {\n animation: kca-ring-in 0.65s var(--ease-out) forwards;\n}\n\n.anim-enter:target {\n opacity: 1 !important;\n transform: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n .anim-enter,\n .rh-wrap.anim-ring {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n}\n\n\n/* 02-kca-components.css */\n .card {\n background: var(--panel);\n border: 1px solid var(--line);\n border-radius: var(--radius-card);\n padding: 18px 20px;\n box-shadow: var(--shadow);\n transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.2s ease;\n }\n .card:hover {\n border-color: var(--accent);\n box-shadow: 0 22px 56px rgba(20, 26, 31, 0.11);\n transform: translateY(-2px);\n }\n :root[data-theme=\"dark\"] .card:hover {\n box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);\n }\n .fact-hero-strip {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin: 0 0 14px;\n }\n @media (max-width: 560px) { .fact-hero-strip { grid-template-columns: 1fr; } }\n .fact-hero-cell {\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: linear-gradient(145deg, rgba(15, 107, 92, 0.08), transparent);\n }\n .fact-hero-cell b {\n display: block;\n font-size: 11px;\n font-weight: 750;\n color: var(--muted);\n margin-bottom: 4px;\n letter-spacing: 0.02em;\n }\n .fact-hero-cell span {\n font-size: clamp(22px, 4vw, 28px);\n font-weight: 900;\n letter-spacing: -0.03em;\n font-variant-numeric: tabular-nums;\n color: var(--ink);\n }\n .glossary {\n margin-top: 18px;\n padding: 14px 16px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n font-size: 13px;\n line-height: 1.55;\n color: var(--muted);\n }\n .glossary > summary {\n cursor: pointer;\n font-weight: 800;\n color: var(--ink);\n list-style: none;\n }\n .glossary > summary::-webkit-details-marker { display: none; }\n .glossary dl { margin: 12px 0 0; display: grid; gap: 10px; }\n .glossary dt { font-weight: 750; color: var(--ink); font-size: 12px; }\n .glossary dd { margin: 2px 0 0; padding: 0; font-size: 12px; }\n .chart-stack { display: flex; flex-direction: column; gap: 14px; }\n\n.toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n margin-bottom: 18px;\n padding: 10px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n box-shadow: var(--shadow);\n }\n.toolbar-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 4px; }\n .theme-btn {\n font: inherit;\n font-size: 12px;\n font-weight: 650;\n padding: 7px 12px;\n border-radius: 999px;\n border: 1px solid var(--line);\n background: transparent;\n color: var(--ink);\n cursor: pointer;\n }\n .theme-btn:hover { border-color: var(--accent); color: var(--accent); }\n .hero { display: grid; gap: 20px; grid-template-columns: 1.35fr 1fr; align-items: stretch; padding-bottom: 28px; }\n h1 { margin: 0; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }\n .room-title {\n margin: 10px 0 0;\n font-size: clamp(18px, 2.8vw, 26px);\n line-height: 1.25;\n font-weight: 750;\n letter-spacing: -0.02em;\n color: var(--accent);\n word-break: break-word;\n }\n .sub { margin: 12px 0 0; color: var(--muted); line-height: 1.65; font-size: 15px; max-width: 52ch; }\n .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }\n .badge { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }\n .side-card { display: flex; flex-direction: column; gap: 10px; justify-content: center; }\n .side-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }\n .side-card strong { color: var(--ink); }\n h2 { margin: 0 0 12px; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }\n .grid { display: grid; gap: 14px; }\n .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .three { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }\n .highlights li { padding: 12px 14px; border-radius: 10px; background: linear-gradient(120deg, rgba(15,107,92,0.08), rgba(196,92,42,0.06)); border: 1px solid rgba(15,107,92,0.15); font-size: 14px; line-height: 1.55; }\n .highlights strong { color: var(--accent); font-weight: 750; }\n .bars { display: grid; gap: 8px; }\n .bar-row { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 2.2fr) 52px; gap: 10px; align-items: center; min-height: 22px; }\n .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }\n .bar-track { height: 9px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; }\n .bar-fill {\n display: block;\n height: 100%;\n min-width: 2px;\n background: linear-gradient(90deg, var(--accent), #1a9d87);\n border-radius: inherit;\n }\n .bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }\n .chart-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }\n .chart-hint strong { color: var(--ink); font-weight: 700; }\n .calendar {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));\n gap: 5px;\n width: 100%;\n box-sizing: border-box;\n }\n .day {\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n min-width: 0;\n aspect-ratio: 1;\n padding: 4px 2px;\n font-weight: 650;\n border: 1px solid var(--line);\n }\n .day-k { font-size: 9px; line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; }\n .day-n { font-size: 11px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }\n .day-burst { box-shadow: inset 0 0 0 2px #e85d04; position: relative; }\n .pace-ribbon {\n display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;\n margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;\n background: linear-gradient(120deg, rgba(232,93,4,0.1), rgba(15,107,92,0.08));\n border: 1px solid rgba(232,93,4,0.22);\n }\n .pace-ribbon strong { font-size: 15px; font-weight: 800; }\n .pace-ribbon span { font-size: 13px; color: var(--muted); line-height: 1.45; }\n .arc-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }\n .arc-chip {\n flex: 1 1 140px; min-width: 120px; padding: 10px 12px; border-radius: 10px;\n background: var(--panel); border: 1px solid var(--line);\n }\n .arc-chip b { display: block; font-size: 18px; font-weight: 850; color: var(--accent); }\n .arc-chip small { font-size: 11px; color: var(--muted); }\n .pulse-mini { margin-top: 12px; }\n .pulse-mini h4 { margin: 0 0 6px; font-size: 12px; font-weight: 750; color: var(--muted); }\n .pulse-row { display: flex; align-items: flex-end; gap: 3px; height: 52px; overflow-x: auto; padding-bottom: 4px; }\n .pulse-bar {\n flex: 0 0 10px; min-height: 4px; border-radius: 3px 3px 1px 1px;\n background: linear-gradient(180deg, #ea580c 55%, #0f6b5c 100%);\n opacity: 0.85;\n }\n .hours-wrap { display: flex; flex-direction: column; gap: 8px; }\n .hours-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n @media (max-width: 560px) { .hours-split { grid-template-columns: 1fr; } }\n .hours-half { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n .hours-band {\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.04em;\n padding: 4px 8px;\n border-radius: 6px;\n text-align: center;\n }\n .hours-band-am { color: #0c4a6e; background: rgba(8, 145, 178, 0.14); }\n .hours-band-pm { color: #9a3412; background: rgba(234, 88, 12, 0.14); }\n :root[data-theme=\"dark\"] .hours-band-am { color: #7dd3fc; background: rgba(8, 145, 178, 0.22); }\n :root[data-theme=\"dark\"] .hours-band-pm { color: #fdba74; background: rgba(234, 88, 12, 0.2); }\n .hours-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; height: 120px; }\n .hour {\n min-width: 0;\n width: 100%;\n align-self: end;\n border-radius: 4px 4px 0 0;\n }\n .hour-am { background: linear-gradient(180deg, #22d3ee, #0891b2); }\n .hour-pm { background: linear-gradient(180deg, #fb923c, #ea580c); }\n .hours-labels {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: 2px;\n font-size: 9px;\n line-height: 1.15;\n color: var(--muted);\n text-align: center;\n font-variant-numeric: tabular-nums;\n }\n .hours-labels span { min-width: 0; }\n .table { width: 100%; border-collapse: collapse; font-size: 13px; }\n .table-rank { width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; table-layout: fixed; }\n .table-rank thead th {\n color: var(--muted);\n font-weight: 700;\n font-size: 11px;\n padding: 10px 8px;\n background: var(--bar-bg);\n border-bottom: 2px solid var(--line);\n }\n .table-rank tbody tr { border-bottom: 1px solid var(--line); }\n .table-rank tbody tr:last-child { border-bottom: none; }\n .table-rank tbody tr:nth-child(even) { background: rgba(15, 107, 92, 0.04); }\n :root[data-theme=\"dark\"] .table-rank tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }\n .table-rank td { padding: 10px 8px; }\n .table-rank td:first-child { font-weight: 700; color: var(--ink); }\n .table th, .table td { text-align: left; border-bottom: 1px solid var(--line); padding: 9px 6px; }\n .table th { color: var(--muted); font-weight: 650; font-size: 11px; text-transform: none; }\n .table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n .kw-note {\n margin: 0 0 10px;\n padding: 10px 12px;\n border-radius: 8px;\n border: 1px solid var(--line);\n background: rgba(15, 107, 92, 0.06);\n font-size: 12px;\n line-height: 1.55;\n color: var(--muted);\n }\n .topic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 12px;\n margin-top: 12px;\n }\n .topic-card {\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 12px 14px;\n background: var(--bar-bg);\n }\n .topic-card header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n font-size: 14px;\n }\n .topic-badge {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n padding: 2px 7px;\n border-radius: 999px;\n }\n .topic-badge.theme { background: rgba(15, 107, 92, 0.15); color: var(--accent); }\n .topic-badge.period { background: rgba(196, 92, 42, 0.15); color: var(--warm); }\n .topic-pct { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }\n .topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n .topic-chip {\n font-size: 12px;\n padding: 4px 9px;\n border-radius: 999px;\n border: 1px solid var(--line);\n background: rgba(255, 255, 255, 0.5);\n color: var(--ink);\n }\n :root[data-theme=\"dark\"] .topic-chip { background: rgba(255, 255, 255, 0.06); }\n .self-serve {\n margin-top: 14px;\n border: 1px dashed rgba(15, 107, 92, 0.38);\n border-radius: 12px;\n padding: 16px 18px;\n background: linear-gradient(135deg, rgba(15, 107, 92, 0.06), rgba(196, 92, 42, 0.04));\n font-size: 13px;\n line-height: 1.6;\n color: var(--muted);\n }\n .self-serve h2 { margin: 0 0 10px; font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.02em; }\n .self-serve p { margin: 0 0 8px; }\n .self-serve ol { margin: 0 0 10px; padding-left: 1.25rem; }\n .self-serve li { margin: 4px 0; }\n .self-serve code { font-size: 11.5px; background: var(--bar-bg); padding: 1px 5px; border-radius: 4px; color: var(--ink); }\n .self-serve .cmd {\n margin: 10px 0 12px;\n padding: 11px 13px;\n border-radius: 8px;\n background: var(--bar-bg);\n border: 1px solid var(--line);\n font-family: ui-monospace, \"Cascadia Code\", \"Consolas\", monospace;\n font-size: 12px;\n line-height: 1.45;\n color: var(--ink);\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n word-break: break-word;\n max-width: 100%;\n }\n .self-serve .links { margin: 10px 0 0; font-size: 12px; }\n .self-serve .links a { font-weight: 650; }\n .insight-hero { position: relative; overflow: hidden; }\n .insight-hero::before {\n content: \"\";\n position: absolute;\n inset: -40% 40% auto -20%;\n height: 120%;\n background: radial-gradient(closest-side, var(--glow), transparent 70%);\n pointer-events: none;\n }\n .insight-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }\n .insight-lede { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 62ch; }\n .insight-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin-top: 18px;\n position: relative;\n z-index: 1;\n }\n @media (min-width: 1080px) {\n .insight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n }\n @media (max-width: 720px) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n .ins-metric {\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: linear-gradient(145deg, rgba(255,255,255,0.04), transparent);\n }\n .ins-m-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }\n .ins-m-val { font-size: 22px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }\n .ins-m-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }\n .insight-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; position: relative; z-index: 1; }\n @media (max-width: 900px) { .insight-split { grid-template-columns: 1fr; } }\n .insight-sub { margin: 0 0 6px; font-size: 14px; font-weight: 750; color: var(--ink); }\n .daypart-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }\n .dp-seg { min-width: 2px; height: 100%; transition: opacity 0.2s; }\n .dp-seg:hover { opacity: 0.85; }\n .daypart-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; color: var(--muted); }\n .daypart-legend li { display: flex; align-items: center; gap: 6px; }\n .daypart-legend i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }\n .rh-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }\n .rh-ring {\n width: 108px;\n height: 108px;\n border-radius: 50%;\n background: conic-gradient(from -90deg, var(--accent) calc(var(--p) * 1%), var(--bar-bg) 0);\n display: grid;\n place-items: center;\n box-shadow: 0 0 0 1px var(--line) inset;\n }\n .rh-ring span {\n width: 74px;\n height: 74px;\n border-radius: 50%;\n background: var(--panel);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\n border: 1px solid var(--line);\n }\n .rh-cap {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n font-size: 11px;\n color: var(--muted);\n font-weight: 700;\n }\n .rh-cap span { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -0.04em; }\n .rh-cap small { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 1px; }\n .sc-plot {\n position: relative;\n width: 100%;\n max-width: 100%;\n margin-top: 4px;\n padding: 32px 8px 36px 8px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background-color: var(--panel);\n background-image:\n linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),\n linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);\n background-size: 25% 25%;\n overflow: hidden;\n }\n @media (min-width: 560px) {\n .sc-plot {\n aspect-ratio: 5 / 4;\n min-height: 240px;\n max-height: 380px;\n padding: 28px 12px 40px 12px;\n }\n }\n .sc-grid-label {\n position: absolute;\n font-size: 10px;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.02em;\n pointer-events: none;\n line-height: 1.2;\n }\n .sc-lbl-top { left: 50%; top: 6px; transform: translateX(-50%); }\n .sc-lbl-bottom { left: 50%; bottom: 8px; transform: translateX(-50%); }\n .sc-lbl-left { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }\n .sc-lbl-right { right: 6px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }\n .sc-quadrant {\n position: absolute;\n font-size: 9px;\n font-weight: 650;\n color: color-mix(in srgb, var(--muted) 75%, transparent);\n pointer-events: none;\n }\n .sc-q-tl { left: 12%; top: 14%; }\n .sc-q-tr { right: 10%; top: 14%; }\n .sc-q-bl { left: 12%; bottom: 18%; }\n .sc-q-br { right: 10%; bottom: 18%; }\n .bubble-node {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: 0;\n max-width: 100%;\n z-index: 1;\n }\n @media (min-width: 560px) {\n .bubble-node {\n position: absolute;\n transform: translate(-50%, -50%) scale(var(--bubble-scale, 1));\n max-width: min(34%, 140px);\n }\n }\n .bubble-shape {\n flex-shrink: 0;\n width: 10px;\n height: 10px;\n margin-top: 12px;\n background: hsl(var(--bubble-hue, 168) 62% 42%);\n border-radius: 0 0 0 3px;\n clip-path: polygon(0 0, 100% 50%, 0 100%);\n }\n @media (min-width: 560px) {\n .bubble-shape {\n position: absolute;\n inset: 0;\n width: auto;\n height: auto;\n margin: 0;\n clip-path: none;\n border-radius: 14px 14px 14px 4px;\n background: hsl(var(--bubble-hue, 168) 48% 94%);\n border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n opacity: 0.98;\n z-index: 0;\n }\n :root[data-theme=\"dark\"] .bubble-shape {\n background: hsl(var(--bubble-hue, 168) 35% 22%);\n border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n }\n }\n .bubble-content {\n flex: 1;\n min-width: 0;\n padding: 8px 11px;\n border-radius: 14px;\n border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n background: hsl(var(--bubble-hue, 168) 48% 96%);\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n }\n :root[data-theme=\"dark\"] .bubble-content {\n background: hsl(var(--bubble-hue, 168) 35% 20%);\n border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n }\n @media (min-width: 560px) {\n .bubble-content {\n position: relative;\n z-index: 1;\n text-align: center;\n border: none;\n background: transparent;\n box-shadow: none;\n padding: 6px 8px;\n }\n }\n .bubble-content strong {\n display: block;\n font-size: 11px;\n font-weight: 800;\n color: var(--ink);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .bubble-content .bubble-pct {\n display: block;\n font-size: 15px;\n font-weight: 900;\n letter-spacing: -0.03em;\n color: hsl(var(--bubble-hue, 168) 55% 32%);\n font-variant-numeric: tabular-nums;\n }\n :root[data-theme=\"dark\"] .bubble-content .bubble-pct {\n color: hsl(var(--bubble-hue, 168) 70% 72%);\n }\n .bubble-content small {\n display: block;\n margin-top: 2px;\n font-size: 9px;\n color: var(--muted);\n font-weight: 650;\n }\n .sc-plot-list {\n display: grid;\n gap: 10px;\n }\n @media (min-width: 560px) {\n .sc-plot-list { display: block; position: absolute; inset: 0; }\n .sc-plot-list .bubble-node { margin: 0; }\n }\n .fact-card { margin-bottom: 14px; padding: 14px 16px; }\n .fact-card h2 { margin: 0 0 6px; font-size: 15px; }\n .fact-hint { margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.45; }\n .fact-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));\n gap: 5px 7px;\n }\n .fact-cell {\n padding: 5px 7px;\n border-radius: 8px;\n border: 1px solid var(--line);\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent);\n min-height: 42px;\n }\n .fact-cell b {\n display: block;\n color: var(--muted);\n font-size: 9px;\n font-weight: 750;\n letter-spacing: 0.03em;\n line-height: 1.15;\n margin-bottom: 2px;\n }\n .fact-cell span {\n font-weight: 850;\n font-size: 12.5px;\n font-variant-numeric: tabular-nums;\n letter-spacing: -0.02em;\n }\n footer { margin-top: 28px; color: var(--muted); font-size: 11px; line-height: 1.5; }\n @media (max-width: 900px) {\n .hero, .two, .three { grid-template-columns: 1fr; }\n }\n\n\n/* 03-kca-story.css */\n#s-wrapped, #s-personas, #s-chapters, #s-calendar { scroll-margin-top: 76px; }\n .story-headline {\n margin: 0 0 14px;\n font-size: clamp(17px, 2.5vw, 21px);\n line-height: 1.55;\n font-weight: 650;\n color: var(--ink);\n max-width: 48ch;\n }\n .wrapped-section { margin-bottom: 20px; }\n .wrapped-section h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }\n .wrapped-lede { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }\n .wrapped-deck {\n display: grid;\n gap: 12px;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));\n padding: 0;\n }\n .wrapped-card {\n border-radius: 18px;\n border: 1px solid var(--line);\n padding: 22px 20px;\n min-height: 200px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n background: linear-gradient(155deg, rgba(15, 107, 92, 0.14), rgba(196, 92, 42, 0.08));\n box-shadow: var(--shadow);\n position: relative;\n overflow: hidden;\n }\n .wrapped-card::before {\n content: attr(data-emoji);\n position: absolute;\n top: 12px;\n right: 14px;\n font-size: 2.4rem;\n opacity: 0.35;\n line-height: 1;\n }\n .wrapped-card-kicker {\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--muted);\n margin: 0 0 6px;\n }\n .wrapped-card-stat {\n margin: 0;\n font-size: clamp(32px, 6vw, 44px);\n font-weight: 900;\n letter-spacing: -0.04em;\n line-height: 1.05;\n color: var(--ink);\n word-break: break-word;\n }\n .wrapped-card-sub {\n margin: 10px 0 0;\n font-size: 13px;\n line-height: 1.5;\n color: var(--muted);\n }\n .persona-grid {\n display: grid;\n gap: 10px;\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n }\n .persona-chip {\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n }\n .persona-chip strong {\n display: block;\n font-size: 14px;\n color: var(--ink);\n margin-bottom: 4px;\n }\n .persona-chip em {\n display: block;\n font-style: normal;\n font-size: 12px;\n font-weight: 800;\n color: var(--accent);\n margin-bottom: 4px;\n }\n .persona-chip span { font-size: 11px; color: var(--muted); line-height: 1.4; }\n .chapter-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }\n .chapter-item {\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: 10px 14px;\n align-items: center;\n padding: 14px 16px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n }\n @media (max-width: 560px) {\n .chapter-item { grid-template-columns: auto 1fr; }\n .chapter-item .chapter-stat { grid-column: 1 / -1; text-align: left; }\n }\n .chapter-badge {\n font-size: 12px;\n font-weight: 900;\n color: var(--accent);\n min-width: 2.5rem;\n }\n .chapter-meta { font-size: 13px; line-height: 1.45; color: var(--ink); }\n .chapter-meta small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }\n .chapter-stat { text-align: right; font-size: 13px; font-weight: 750; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n /* GitHub contribution graph (\uC794\uB514) */\n :root {\n --gh-cell-size: 11px;\n --gh-cell-gap: 3px;\n --gh-cell-0: #ebedf0;\n --gh-cell-1: #9be9a8;\n --gh-cell-2: #40c463;\n --gh-cell-3: #30a14e;\n --gh-cell-4: #216e39;\n }\n @media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n --gh-cell-0: #161b22;\n --gh-cell-1: #0e4429;\n --gh-cell-2: #006d32;\n --gh-cell-3: #26a641;\n --gh-cell-4: #39d353;\n }\n }\n :root[data-theme=\"dark\"] {\n --gh-cell-0: #161b22;\n --gh-cell-1: #0e4429;\n --gh-cell-2: #006d32;\n --gh-cell-3: #26a641;\n --gh-cell-4: #39d353;\n }\n :root[data-theme=\"light\"] {\n --gh-cell-0: #ebedf0;\n --gh-cell-1: #9be9a8;\n --gh-cell-2: #40c463;\n --gh-cell-3: #30a14e;\n --gh-cell-4: #216e39;\n }\n .gh-contrib {\n position: relative;\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 16px 18px 14px;\n background: var(--panel);\n }\n .gh-cal-tooltip {\n position: absolute;\n z-index: 20;\n transform: translate(-50%, -100%);\n padding: 6px 10px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 650;\n line-height: 1.35;\n white-space: nowrap;\n color: #fff;\n background: #24292f;\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.12s ease;\n }\n .gh-contrib.gh-tip-on .gh-cal-tooltip { opacity: 1; }\n :root[data-theme=\"dark\"] .gh-cal-tooltip {\n background: #f0f6fc;\n color: #0d1117;\n }\n @media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) .gh-cal-tooltip {\n background: #f0f6fc;\n color: #0d1117;\n }\n }\n .gh-contrib-summary {\n margin: 0 0 12px;\n font-size: 14px;\n line-height: 1.4;\n color: var(--muted);\n }\n .gh-contrib-summary strong {\n font-weight: 600;\n color: var(--ink);\n font-variant-numeric: tabular-nums;\n }\n .gh-contrib-span {\n display: block;\n margin-top: 4px;\n font-size: 11px;\n color: var(--muted);\n }\n .gh-cal-scroll {\n overflow-x: auto;\n overflow-y: hidden;\n max-width: 100%;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 2px;\n }\n .gh-cal-graph {\n display: grid;\n grid-template-areas:\n \". months\"\n \"days weeks\";\n grid-template-columns: max-content max-content;\n column-gap: 8px;\n row-gap: 4px;\n width: max-content;\n min-width: min(100%, max-content);\n }\n .gh-cal-days {\n grid-area: days;\n display: grid;\n grid-template-rows: repeat(7, var(--gh-cell-size));\n gap: var(--gh-cell-gap);\n align-items: center;\n font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n font-size: 9px;\n line-height: 1;\n color: var(--muted);\n padding-right: 2px;\n }\n .gh-cal-days span {\n height: var(--gh-cell-size);\n display: flex;\n align-items: center;\n }\n .gh-cal-days span:empty { visibility: hidden; }\n .gh-cal-months {\n grid-area: months;\n display: grid;\n grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n gap: var(--gh-cell-gap);\n height: 14px;\n align-items: end;\n font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n font-size: 9px;\n line-height: 1;\n color: var(--muted);\n }\n .gh-cal-month {\n grid-column: span 1;\n white-space: nowrap;\n overflow: visible;\n }\n .gh-cal-weeks {\n grid-area: weeks;\n display: grid;\n grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n grid-template-rows: repeat(7, var(--gh-cell-size));\n gap: var(--gh-cell-gap);\n grid-auto-flow: column;\n }\n .gh-cal-cell {\n width: var(--gh-cell-size);\n height: var(--gh-cell-size);\n border-radius: 2px;\n background: var(--gh-cell-0);\n display: block;\n padding: 0;\n margin: 0;\n appearance: none;\n font: inherit;\n cursor: default;\n transition: transform 0.1s ease, box-shadow 0.1s ease, outline 0.1s ease;\n }\n .gh-cal-cell[data-date] {\n cursor: pointer;\n }\n .gh-cal-cell[data-date]:hover,\n .gh-cal-cell[data-date]:focus-visible {\n transform: scale(1.45);\n z-index: 5;\n position: relative;\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel) 80%, transparent);\n }\n .gh-cal-cell[data-level=\"1\"] { background: var(--gh-cell-1); }\n .gh-cal-cell[data-level=\"2\"] { background: var(--gh-cell-2); }\n .gh-cal-cell[data-level=\"3\"] { background: var(--gh-cell-3); }\n .gh-cal-cell[data-level=\"4\"] { background: var(--gh-cell-4); }\n .gh-cal-cell[data-level=\"0\"] { background: var(--gh-cell-0); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }\n .gh-cal-cell--pad {\n pointer-events: none;\n border: none;\n }\n .gh-cal-legend {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 4px;\n margin-top: 12px;\n font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n font-size: 11px;\n color: var(--muted);\n }\n .gh-cal-legend-scale {\n display: inline-flex;\n gap: var(--gh-cell-gap);\n align-items: center;\n margin: 0 2px;\n }\n .gh-cal-legend-scale i {\n width: var(--gh-cell-size);\n height: var(--gh-cell-size);\n border-radius: 2px;\n display: block;\n font-style: normal;\n background: var(--gh-cell-0);\n }\n .gh-cal-legend-scale i[data-level=\"1\"] { background: var(--gh-cell-1); }\n .gh-cal-legend-scale i[data-level=\"2\"] { background: var(--gh-cell-2); }\n .gh-cal-legend-scale i[data-level=\"3\"] { background: var(--gh-cell-3); }\n .gh-cal-legend-scale i[data-level=\"4\"] { background: var(--gh-cell-4); }\n\n\n/* 04-kca-charts.css */\n.viz-hero {\n margin: 0 0 18px;\n padding: 20px 22px;\n border-radius: 20px;\n border: 1px solid var(--glass-border);\n background: var(--glass);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n box-shadow: var(--shadow);\n }\n .viz-hero h2 {\n margin: 0 0 6px;\n font-size: 22px;\n font-weight: 850;\n letter-spacing: -0.03em;\n background: var(--accent-grad);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n .viz-hero p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }\n .viz-grid {\n display: grid;\n gap: 14px;\n grid-template-columns: repeat(12, 1fr);\n }\n .viz-card {\n grid-column: span 12;\n border-radius: 18px;\n border: 1px solid var(--glass-border);\n background: var(--glass);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n padding: 16px 16px 12px;\n box-shadow: var(--shadow);\n }\n @media (min-width: 900px) {\n .viz-card.span-6 { grid-column: span 6; }\n .viz-card.span-8 { grid-column: span 8; }\n .viz-card.span-4 { grid-column: span 4; }\n }\n .viz-card h3 {\n margin: 0 0 4px;\n font-size: 15px;\n font-weight: 800;\n letter-spacing: -0.02em;\n }\n .viz-card .viz-hint {\n margin: 0 0 10px;\n font-size: 11px;\n color: var(--muted);\n line-height: 1.45;\n }\n .chart-box {\n width: 100%;\n min-height: 280px;\n height: min(42vh, 360px);\n }\n .chart-box.tall { height: min(52vh, 440px); min-height: 320px; }\n .chart-box.compact { height: 240px; min-height: 220px; }\n .kw-table-wrap {\n max-height: 520px;\n overflow: auto;\n border: 1px solid var(--line);\n border-radius: 12px;\n }\n .kw-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n }\n .kw-table thead th {\n position: sticky;\n top: 0;\n z-index: 1;\n background: var(--panel-solid);\n text-align: left;\n padding: 8px 10px;\n font-size: 11px;\n color: var(--muted);\n border-bottom: 1px solid var(--line);\n }\n .kw-table td {\n padding: 7px 10px;\n border-bottom: 1px solid var(--line);\n }\n .kw-table tbody tr:nth-child(even) { background: rgba(94, 234, 212, 0.04); }\n .kw-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }\n .kw-rank { color: var(--muted); width: 2.5rem; }\n\n\n/* 05-kca-ux.css */\n/* \uC139\uC158 \uB124\uBE44 \u2014 \uB9AC\uD329\uD130 \uC2DC \uC0AD\uC81C\uB410\uB358 \uAE30\uBCF8 \uADDC\uCE59 \uBCF5\uAD6C */\n.deck-nav {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 10px;\n margin-bottom: 0;\n padding: 10px 12px;\n border-radius: 0;\n border: none;\n background: transparent;\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n box-shadow: none;\n}\n\n.deck-nav-h {\n font-size: 11px;\n font-weight: 800;\n color: var(--muted);\n margin-right: 4px;\n letter-spacing: 0.04em;\n flex: 0 0 auto;\n}\n\n.deck-nav a {\n font-size: 12px;\n font-weight: 700;\n padding: 6px 11px;\n border-radius: var(--radius-pill);\n border: 1px solid var(--line);\n background: var(--panel-solid);\n color: var(--ink);\n text-decoration: none;\n transition:\n transform 0.18s var(--ease-out),\n border-color 0.18s var(--ease-out),\n background 0.18s var(--ease-out);\n}\n\n.deck-nav a:hover {\n border-color: var(--accent);\n background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));\n color: var(--accent);\n transform: translateY(-1px);\n}\n\n.kca-topbar {\n position: sticky;\n top: 0;\n z-index: 40;\n margin-bottom: 16px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background: var(--glass);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);\n overflow: hidden;\n }\n .kca-progress {\n height: 3px;\n background: var(--line);\n }\n .kca-progress-fill {\n display: block;\n height: 100%;\n width: 0%;\n background: var(--accent-grad);\n transition: width 0.12s ease-out;\n }\n .kca-topbar .toolbar {\n margin: 0;\n border: none;\n border-radius: 0;\n box-shadow: none;\n border-bottom: 1px solid var(--line);\n }\n .deck-nav-shell > summary {\n display: none;\n cursor: pointer;\n padding: 10px 14px;\n font-size: 13px;\n font-weight: 800;\n color: var(--ink);\n list-style: none;\n border-bottom: 1px solid var(--line);\n }\n .deck-nav-shell > summary::-webkit-details-marker { display: none; }\n .deck-nav-shell > summary::after {\n content: \"\u25BE\";\n float: right;\n color: var(--muted);\n font-size: 11px;\n }\n .deck-nav-shell:not([open]) > summary::after { content: \"\u25B8\"; }\n .deck-nav-shell .deck-nav {\n margin: 0;\n border: none;\n border-radius: 0;\n box-shadow: none;\n position: static;\n }\n .deck-nav a.is-active {\n border-color: var(--accent);\n background: color-mix(in srgb, var(--accent) 14%, transparent);\n color: var(--accent);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);\n }\n .theme-btn.is-active {\n border-color: var(--accent);\n background: color-mix(in srgb, var(--accent) 12%, transparent);\n color: var(--accent);\n font-weight: 800;\n }\n .hero-jumps {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 14px;\n }\n .hero-jump {\n font-size: 12px;\n font-weight: 750;\n padding: 7px 12px;\n border-radius: 999px;\n border: 1px solid var(--line);\n background: var(--panel);\n color: var(--ink);\n text-decoration: none;\n transition: border-color 0.15s ease, transform 0.15s ease;\n }\n .hero-jump:hover {\n border-color: var(--accent);\n transform: translateY(-1px);\n }\n .hero-jump strong { color: var(--accent); font-weight: 850; }\n .kca-back-top {\n position: fixed;\n right: max(16px, env(safe-area-inset-right));\n bottom: max(16px, env(safe-area-inset-bottom));\n z-index: 50;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--line);\n background: var(--panel-solid);\n color: var(--accent);\n font-size: 18px;\n font-weight: 900;\n cursor: pointer;\n box-shadow: var(--shadow);\n transition: opacity 0.2s ease, transform 0.2s ease;\n }\n .kca-back-top:not([hidden]):hover { transform: translateY(-2px); border-color: var(--accent); }\n .kca-back-top[hidden] { display: none; }\n .kw-css-fold {\n margin-bottom: 14px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background: var(--panel);\n overflow: hidden;\n }\n .kw-css-fold > summary {\n cursor: pointer;\n padding: 12px 16px;\n font-size: 13px;\n font-weight: 800;\n color: var(--ink);\n list-style: none;\n }\n .kw-css-fold > summary::-webkit-details-marker { display: none; }\n .kw-css-fold > summary small {\n display: block;\n margin-top: 4px;\n font-size: 11px;\n font-weight: 500;\n color: var(--muted);\n }\n .kw-css-fold .kw-css-body { padding: 0 16px 16px; }\n @media (max-width: 720px) {\n .deck-nav-shell > summary { display: block; }\n .deck-nav-shell:not([open]) .deck-nav { display: none; }\n .deck-nav-shell .deck-nav {\n max-height: min(42vh, 280px);\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n main { width: min(1200px, calc(100% - 20px)); padding: 20px 0 48px; }\n }\n @media (hover: none) {\n .card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }\n }\n #s-wrapped, #s-personas, #s-chapters, #s-calendar, #s-facts, #s-story, #s-hl, #s-ai, #s-topics, #s-viz, #s-charts, #s-help {\n scroll-margin-top: 118px;\n }\n\n";
2
+ export declare const REPORT_STYLES = "/* open-props \u2014 https://open-props.style/ (MIT) */\n:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-2:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-3:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-4:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-5:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}\n\n/* 00-kca-tokens.css */\n/* kca \uC2DC\uB9E8\uD2F1 \uD1A0\uD070 \u2014 Open Props(\uADF8\uB77C\uB370\uC774\uC158\u00B7radius\u00B7shadow) + \uBA85\uC2DC \uD314\uB808\uD2B8(\uB300\uBE44) */\n:root {\n color-scheme: light dark;\n --bg: #f4f1ea;\n --bg2: #e8e2d6;\n --ink: #141a1f;\n --muted: #5c6670;\n --line: #d4cdc2;\n --panel: #fffcf7;\n --panel-solid: #fffcf7;\n --accent: #0f6b5c;\n --accent2: #5b4fc7;\n --warm: #c45c2a;\n --gold: #b8860b;\n --shadow: var(--shadow-4, 0 18px 50px rgba(20, 26, 31, 0.08));\n --bar-bg: #e5dfd4;\n --glow: color-mix(in oklab, var(--teal-5, #0f6b5c) 18%, transparent);\n --glass: rgba(255, 252, 247, 0.82);\n --glass-border: rgba(20, 26, 31, 0.1);\n --accent-grad: var(--gradient-21, linear-gradient(125deg, var(--accent), var(--accent2)));\n --radius-card: var(--radius-3, 14px);\n --radius-pill: var(--radius-round, 999px);\n --kca-font-sans: \"Pretendard Variable\", Pretendard, \"Apple SD Gothic Neo\", \"Malgun Gothic\", var(--font-sans, system-ui, sans-serif);\n --ease-out: var(--ease-out-3, cubic-bezier(0.22, 1, 0.36, 1));\n font-family: var(--kca-font-sans);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n --bg: #070a0e;\n --bg2: #0e1218;\n --ink: #e9eef5;\n --muted: #8b98a8;\n --line: rgba(255, 255, 255, 0.12);\n --panel: #161b22;\n --panel-solid: #161b22;\n --accent: #3ee8c5;\n --accent2: #a78bfa;\n --warm: #ff9f43;\n --gold: #fbbf24;\n --shadow: var(--shadow-4, 0 28px 90px rgba(0, 0, 0, 0.55));\n --bar-bg: rgba(255, 255, 255, 0.08);\n --glow: color-mix(in oklab, var(--teal-4, #3ee8c5) 20%, transparent);\n --glass: rgba(22, 27, 34, 0.88);\n --glass-border: rgba(255, 255, 255, 0.1);\n --accent-grad: var(--gradient-27, linear-gradient(125deg, var(--accent), var(--accent2)));\n }\n}\n\n:root[data-theme=\"dark\"] {\n --bg: #070a0e;\n --bg2: #0e1218;\n --ink: #e9eef5;\n --muted: #8b98a8;\n --line: rgba(255, 255, 255, 0.12);\n --panel: #161b22;\n --panel-solid: #161b22;\n --accent: #3ee8c5;\n --accent2: #a78bfa;\n --warm: #ff9f43;\n --gold: #fbbf24;\n --shadow: 0 28px 90px rgba(0, 0, 0, 0.55);\n --bar-bg: rgba(255, 255, 255, 0.08);\n --glow: color-mix(in oklab, #3ee8c5 20%, transparent);\n --glass: rgba(22, 27, 34, 0.88);\n --glass-border: rgba(255, 255, 255, 0.1);\n --accent-grad: linear-gradient(125deg, var(--accent), var(--accent2));\n}\n\n:root[data-theme=\"light\"] {\n --bg: #f4f1ea;\n --bg2: #e8e2d6;\n --ink: #141a1f;\n --muted: #5c6670;\n --line: #d4cdc2;\n --panel: #fffcf7;\n --panel-solid: #fffcf7;\n --accent: #0f6b5c;\n --accent2: #5b4fc7;\n --warm: #c45c2a;\n --gold: #b8860b;\n --shadow: 0 18px 50px rgba(20, 26, 31, 0.08);\n --bar-bg: #e5dfd4;\n --glow: color-mix(in oklab, #0f6b5c 18%, transparent);\n --glass: rgba(255, 252, 247, 0.82);\n --glass-border: rgba(20, 26, 31, 0.1);\n --accent-grad: linear-gradient(125deg, var(--accent), var(--accent2));\n}\n\n\n/* 01-kca-base.css */\n/* kca \uB9AC\uC14B\u00B7\uD0C0\uC774\uD3EC\u00B7\uBAA8\uC158 */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n overflow-x: clip;\n max-width: 100%;\n}\n\nbody {\n margin: 0;\n overflow-x: clip;\n max-width: 100%;\n background:\n radial-gradient(1200px 600px at 8% -12%, var(--glow), transparent 58%),\n radial-gradient(900px 480px at 96% 0%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 48%),\n linear-gradient(180deg, var(--bg), var(--bg2));\n color: var(--ink);\n font-family: var(--kca-font-sans);\n font-size: var(--font-size-1);\n line-height: var(--font-lineheight-3);\n transition:\n background 0.28s var(--ease-out),\n color 0.2s var(--ease-out);\n}\n\n.skip-link {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.skip-link:focus {\n position: fixed;\n left: var(--size-3);\n top: var(--size-3);\n width: auto;\n height: auto;\n margin: 0;\n clip: auto;\n z-index: 10000;\n padding: var(--size-2) var(--size-3);\n border-radius: var(--radius-2);\n background: var(--accent);\n color: var(--gray-0);\n font-weight: var(--font-weight-8);\n font-size: var(--font-size-0);\n box-shadow: var(--shadow-3);\n}\n\nmain {\n margin: 0 auto;\n overflow-x: clip;\n max-width: 100%;\n}\n\nh1 {\n margin: 0;\n font-size: clamp(var(--font-size-5), 4.2vw, var(--font-size-8));\n line-height: var(--font-lineheight-00);\n letter-spacing: var(--font-letterspacing-0);\n font-weight: var(--font-weight-8);\n}\n\nh2 {\n margin: 0 0 var(--size-2);\n font-size: var(--font-size-3);\n font-weight: var(--font-weight-7);\n letter-spacing: var(--font-letterspacing-0);\n}\n\na {\n color: var(--accent);\n}\n\n@keyframes kca-fade-up {\n from {\n opacity: 0;\n transform: translateY(var(--size-3));\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes kca-ring-in {\n from {\n transform: scale(0.92);\n opacity: 0.75;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.anim-enter {\n animation: kca-fade-up 0.52s var(--ease-out) forwards;\n opacity: 0;\n animation-delay: var(--enter-delay, 0s);\n}\n\n.rh-wrap.anim-ring {\n animation: kca-ring-in 0.65s var(--ease-out) forwards;\n}\n\n.anim-enter:target {\n opacity: 1 !important;\n transform: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n .anim-enter,\n .rh-wrap.anim-ring {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n}\n\n\n/* 02-kca-components.css */\n .card {\n background: var(--panel);\n border: 1px solid var(--line);\n border-radius: var(--radius-card);\n padding: 18px 20px;\n box-shadow: var(--shadow);\n transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.2s ease;\n }\n .card:hover {\n border-color: var(--accent);\n box-shadow: 0 22px 56px rgba(20, 26, 31, 0.11);\n transform: translateY(-2px);\n }\n :root[data-theme=\"dark\"] .card:hover {\n box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);\n }\n .fact-hero-strip {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin: 0 0 14px;\n }\n @media (max-width: 560px) { .fact-hero-strip { grid-template-columns: 1fr; } }\n .fact-hero-cell {\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: linear-gradient(145deg, rgba(15, 107, 92, 0.08), transparent);\n }\n .fact-hero-cell b {\n display: block;\n font-size: 11px;\n font-weight: 750;\n color: var(--muted);\n margin-bottom: 4px;\n letter-spacing: 0.02em;\n }\n .fact-hero-cell span {\n font-size: clamp(22px, 4vw, 28px);\n font-weight: 900;\n letter-spacing: -0.03em;\n font-variant-numeric: tabular-nums;\n color: var(--ink);\n }\n .glossary {\n margin-top: 18px;\n padding: 14px 16px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n font-size: 13px;\n line-height: 1.55;\n color: var(--muted);\n }\n .glossary > summary {\n cursor: pointer;\n font-weight: 800;\n color: var(--ink);\n list-style: none;\n }\n .glossary > summary::-webkit-details-marker { display: none; }\n .glossary dl { margin: 12px 0 0; display: grid; gap: 10px; }\n .glossary dt { font-weight: 750; color: var(--ink); font-size: 12px; }\n .glossary dd { margin: 2px 0 0; padding: 0; font-size: 12px; }\n .chart-stack { display: flex; flex-direction: column; gap: 14px; }\n\n.toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n margin-bottom: 18px;\n padding: 10px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n box-shadow: var(--shadow);\n }\n.toolbar-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 4px; }\n .theme-btn {\n font: inherit;\n font-size: 12px;\n font-weight: 650;\n padding: 7px 12px;\n border-radius: 999px;\n border: 1px solid var(--line);\n background: transparent;\n color: var(--ink);\n cursor: pointer;\n }\n .theme-btn:hover { border-color: var(--accent); color: var(--accent); }\n .hero { display: grid; gap: 20px; grid-template-columns: 1.35fr 1fr; align-items: stretch; padding-bottom: 28px; }\n h1 { margin: 0; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }\n .room-title {\n margin: 10px 0 0;\n font-size: clamp(18px, 2.8vw, 26px);\n line-height: 1.25;\n font-weight: 750;\n letter-spacing: -0.02em;\n color: var(--accent);\n word-break: break-word;\n }\n .sub { margin: 12px 0 0; color: var(--muted); line-height: 1.65; font-size: 15px; max-width: 52ch; }\n .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }\n .badge { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }\n .side-card { display: flex; flex-direction: column; gap: 10px; justify-content: center; }\n .side-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }\n .side-card strong { color: var(--ink); }\n h2 { margin: 0 0 12px; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }\n .grid { display: grid; gap: 14px; }\n .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .three { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }\n .highlights li { padding: 12px 14px; border-radius: 10px; background: linear-gradient(120deg, rgba(15,107,92,0.08), rgba(196,92,42,0.06)); border: 1px solid rgba(15,107,92,0.15); font-size: 14px; line-height: 1.55; }\n .highlights strong { color: var(--accent); font-weight: 750; }\n .bars { display: grid; gap: 8px; }\n .bar-row { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 2.2fr) 52px; gap: 10px; align-items: center; min-height: 22px; }\n .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }\n .bar-track { height: 9px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; }\n .bar-fill {\n display: block;\n height: 100%;\n min-width: 2px;\n background: linear-gradient(90deg, var(--accent), #1a9d87);\n border-radius: inherit;\n }\n .bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }\n .chart-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }\n .chart-hint strong { color: var(--ink); font-weight: 700; }\n .calendar {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));\n gap: 5px;\n width: 100%;\n box-sizing: border-box;\n }\n .day {\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n min-width: 0;\n aspect-ratio: 1;\n padding: 4px 2px;\n font-weight: 650;\n border: 1px solid var(--line);\n }\n .day-k { font-size: 9px; line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; }\n .day-n { font-size: 11px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }\n .day-burst { box-shadow: inset 0 0 0 2px #e85d04; position: relative; }\n .pace-ribbon {\n display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;\n margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;\n background: linear-gradient(120deg, rgba(232,93,4,0.1), rgba(15,107,92,0.08));\n border: 1px solid rgba(232,93,4,0.22);\n }\n .pace-ribbon strong { font-size: 15px; font-weight: 800; }\n .pace-ribbon span { font-size: 13px; color: var(--muted); line-height: 1.45; }\n .arc-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }\n .arc-chip {\n flex: 1 1 140px; min-width: 120px; padding: 10px 12px; border-radius: 10px;\n background: var(--panel); border: 1px solid var(--line);\n }\n .arc-chip b { display: block; font-size: 18px; font-weight: 850; color: var(--accent); }\n .arc-chip small { font-size: 11px; color: var(--muted); }\n .pulse-mini { margin-top: 12px; }\n .pulse-mini h4 { margin: 0 0 6px; font-size: 12px; font-weight: 750; color: var(--muted); }\n .pulse-row { display: flex; align-items: flex-end; gap: 3px; height: 52px; overflow-x: auto; padding-bottom: 4px; }\n .pulse-bar {\n flex: 0 0 10px; min-height: 4px; border-radius: 3px 3px 1px 1px;\n background: linear-gradient(180deg, #ea580c 55%, #0f6b5c 100%);\n opacity: 0.85;\n }\n .hours-wrap { display: flex; flex-direction: column; gap: 8px; }\n .hours-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n @media (max-width: 560px) { .hours-split { grid-template-columns: 1fr; } }\n .hours-half { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n .hours-band {\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.04em;\n padding: 4px 8px;\n border-radius: 6px;\n text-align: center;\n }\n .hours-band-am { color: #0c4a6e; background: rgba(8, 145, 178, 0.14); }\n .hours-band-pm { color: #9a3412; background: rgba(234, 88, 12, 0.14); }\n :root[data-theme=\"dark\"] .hours-band-am { color: #7dd3fc; background: rgba(8, 145, 178, 0.22); }\n :root[data-theme=\"dark\"] .hours-band-pm { color: #fdba74; background: rgba(234, 88, 12, 0.2); }\n .hours-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; height: 120px; }\n .hour {\n min-width: 0;\n width: 100%;\n align-self: end;\n border-radius: 4px 4px 0 0;\n }\n .hour-am { background: linear-gradient(180deg, #22d3ee, #0891b2); }\n .hour-pm { background: linear-gradient(180deg, #fb923c, #ea580c); }\n .hours-labels {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: 2px;\n font-size: 9px;\n line-height: 1.15;\n color: var(--muted);\n text-align: center;\n font-variant-numeric: tabular-nums;\n }\n .hours-labels span { min-width: 0; }\n .table { width: 100%; border-collapse: collapse; font-size: 13px; }\n .table-rank { width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; table-layout: fixed; }\n .table-rank thead th {\n color: var(--muted);\n font-weight: 700;\n font-size: 11px;\n padding: 10px 8px;\n background: var(--bar-bg);\n border-bottom: 2px solid var(--line);\n }\n .table-rank tbody tr { border-bottom: 1px solid var(--line); }\n .table-rank tbody tr:last-child { border-bottom: none; }\n .table-rank tbody tr:nth-child(even) { background: rgba(15, 107, 92, 0.04); }\n :root[data-theme=\"dark\"] .table-rank tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }\n .table-rank td { padding: 10px 8px; }\n .table-rank td:first-child { font-weight: 700; color: var(--ink); }\n .table th, .table td { text-align: left; border-bottom: 1px solid var(--line); padding: 9px 6px; }\n .table th { color: var(--muted); font-weight: 650; font-size: 11px; text-transform: none; }\n .table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n .kw-note {\n margin: 0 0 10px;\n padding: 10px 12px;\n border-radius: 8px;\n border: 1px solid var(--line);\n background: rgba(15, 107, 92, 0.06);\n font-size: 12px;\n line-height: 1.55;\n color: var(--muted);\n }\n .topic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 12px;\n margin-top: 12px;\n }\n .topic-card {\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 12px 14px;\n background: var(--bar-bg);\n }\n .topic-card header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n font-size: 14px;\n }\n .topic-badge {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n padding: 2px 7px;\n border-radius: 999px;\n }\n .topic-badge.theme { background: rgba(15, 107, 92, 0.15); color: var(--accent); }\n .topic-badge.period { background: rgba(196, 92, 42, 0.15); color: var(--warm); }\n .topic-pct { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }\n .topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n .topic-chip {\n font-size: 12px;\n padding: 4px 9px;\n border-radius: 999px;\n border: 1px solid var(--line);\n background: rgba(255, 255, 255, 0.5);\n color: var(--ink);\n }\n :root[data-theme=\"dark\"] .topic-chip { background: rgba(255, 255, 255, 0.06); }\n .self-serve {\n margin-top: 14px;\n border: 1px dashed rgba(15, 107, 92, 0.38);\n border-radius: 12px;\n padding: 16px 18px;\n background: linear-gradient(135deg, rgba(15, 107, 92, 0.06), rgba(196, 92, 42, 0.04));\n font-size: 13px;\n line-height: 1.6;\n color: var(--muted);\n }\n .self-serve h2 { margin: 0 0 10px; font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.02em; }\n .self-serve p { margin: 0 0 8px; }\n .self-serve ol { margin: 0 0 10px; padding-left: 1.25rem; }\n .self-serve li { margin: 4px 0; }\n .self-serve code { font-size: 11.5px; background: var(--bar-bg); padding: 1px 5px; border-radius: 4px; color: var(--ink); }\n .self-serve .cmd {\n margin: 10px 0 12px;\n padding: 11px 13px;\n border-radius: 8px;\n background: var(--bar-bg);\n border: 1px solid var(--line);\n font-family: ui-monospace, \"Cascadia Code\", \"Consolas\", monospace;\n font-size: 12px;\n line-height: 1.45;\n color: var(--ink);\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n word-break: break-word;\n max-width: 100%;\n }\n .self-serve .links { margin: 10px 0 0; font-size: 12px; }\n .self-serve .links a { font-weight: 650; }\n .insight-hero { position: relative; overflow: hidden; }\n .insight-hero::before {\n content: \"\";\n position: absolute;\n inset: -40% 40% auto -20%;\n height: 120%;\n background: radial-gradient(closest-side, var(--glow), transparent 70%);\n pointer-events: none;\n }\n .insight-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }\n .insight-lede { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 62ch; }\n .insight-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin-top: 18px;\n position: relative;\n z-index: 1;\n }\n @media (min-width: 1080px) {\n .insight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n }\n @media (max-width: 720px) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n .ins-metric {\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: linear-gradient(145deg, rgba(255,255,255,0.04), transparent);\n }\n .ins-m-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }\n .ins-m-val { font-size: 22px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }\n .ins-m-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }\n .insight-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; position: relative; z-index: 1; }\n @media (max-width: 900px) { .insight-split { grid-template-columns: 1fr; } }\n .insight-sub { margin: 0 0 6px; font-size: 14px; font-weight: 750; color: var(--ink); }\n .daypart-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }\n .dp-seg { min-width: 2px; height: 100%; transition: opacity 0.2s; }\n .dp-seg:hover { opacity: 0.85; }\n .daypart-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; color: var(--muted); }\n .daypart-legend li { display: flex; align-items: center; gap: 6px; }\n .daypart-legend i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }\n .rh-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }\n .rh-ring {\n width: 108px;\n height: 108px;\n border-radius: 50%;\n background: conic-gradient(from -90deg, var(--accent) calc(var(--p) * 1%), var(--bar-bg) 0);\n display: grid;\n place-items: center;\n box-shadow: 0 0 0 1px var(--line) inset;\n }\n .rh-ring span {\n width: 74px;\n height: 74px;\n border-radius: 50%;\n background: var(--panel);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\n border: 1px solid var(--line);\n }\n .rh-cap {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n font-size: 11px;\n color: var(--muted);\n font-weight: 700;\n }\n .rh-cap span { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -0.04em; }\n .rh-cap small { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 1px; }\n .sc-plot {\n position: relative;\n width: 100%;\n max-width: 100%;\n margin-top: 4px;\n padding: 32px 8px 36px 8px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background-color: var(--panel);\n background-image:\n linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),\n linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);\n background-size: 25% 25%;\n overflow: hidden;\n }\n @media (min-width: 560px) {\n .sc-plot {\n aspect-ratio: 5 / 4;\n min-height: 240px;\n max-height: 380px;\n padding: 28px 12px 40px 12px;\n }\n }\n .sc-grid-label {\n position: absolute;\n font-size: 10px;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.02em;\n pointer-events: none;\n line-height: 1.2;\n }\n .sc-lbl-top { left: 50%; top: 6px; transform: translateX(-50%); }\n .sc-lbl-bottom { left: 50%; bottom: 8px; transform: translateX(-50%); }\n .sc-lbl-left { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }\n .sc-lbl-right { right: 6px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }\n .sc-quadrant {\n position: absolute;\n font-size: 9px;\n font-weight: 650;\n color: color-mix(in srgb, var(--muted) 75%, transparent);\n pointer-events: none;\n }\n .sc-q-tl { left: 12%; top: 14%; }\n .sc-q-tr { right: 10%; top: 14%; }\n .sc-q-bl { left: 12%; bottom: 18%; }\n .sc-q-br { right: 10%; bottom: 18%; }\n .bubble-node {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: 0;\n max-width: 100%;\n z-index: 1;\n }\n @media (min-width: 560px) {\n .bubble-node {\n position: absolute;\n transform: translate(-50%, -50%) scale(var(--bubble-scale, 1));\n max-width: min(34%, 140px);\n }\n }\n .bubble-shape {\n flex-shrink: 0;\n width: 10px;\n height: 10px;\n margin-top: 12px;\n background: hsl(var(--bubble-hue, 168) 62% 42%);\n border-radius: 0 0 0 3px;\n clip-path: polygon(0 0, 100% 50%, 0 100%);\n }\n @media (min-width: 560px) {\n .bubble-shape {\n position: absolute;\n inset: 0;\n width: auto;\n height: auto;\n margin: 0;\n clip-path: none;\n border-radius: 14px 14px 14px 4px;\n background: hsl(var(--bubble-hue, 168) 48% 94%);\n border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n opacity: 0.98;\n z-index: 0;\n }\n :root[data-theme=\"dark\"] .bubble-shape {\n background: hsl(var(--bubble-hue, 168) 35% 22%);\n border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n }\n }\n .bubble-content {\n flex: 1;\n min-width: 0;\n padding: 8px 11px;\n border-radius: 14px;\n border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n background: hsl(var(--bubble-hue, 168) 48% 96%);\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n }\n :root[data-theme=\"dark\"] .bubble-content {\n background: hsl(var(--bubble-hue, 168) 35% 20%);\n border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n }\n @media (min-width: 560px) {\n .bubble-content {\n position: relative;\n z-index: 1;\n text-align: center;\n border: none;\n background: transparent;\n box-shadow: none;\n padding: 6px 8px;\n }\n }\n .bubble-content strong {\n display: block;\n font-size: 11px;\n font-weight: 800;\n color: var(--ink);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .bubble-content .bubble-pct {\n display: block;\n font-size: 15px;\n font-weight: 900;\n letter-spacing: -0.03em;\n color: hsl(var(--bubble-hue, 168) 55% 32%);\n font-variant-numeric: tabular-nums;\n }\n :root[data-theme=\"dark\"] .bubble-content .bubble-pct {\n color: hsl(var(--bubble-hue, 168) 70% 72%);\n }\n .bubble-content small {\n display: block;\n margin-top: 2px;\n font-size: 9px;\n color: var(--muted);\n font-weight: 650;\n }\n .sc-plot-list {\n display: grid;\n gap: 10px;\n }\n @media (min-width: 560px) {\n .sc-plot-list { display: block; position: absolute; inset: 0; }\n .sc-plot-list .bubble-node { margin: 0; }\n }\n .fact-card { margin-bottom: 14px; padding: 14px 16px; }\n .fact-card h2 { margin: 0 0 6px; font-size: 15px; }\n .fact-hint { margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.45; }\n .fact-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));\n gap: 5px 7px;\n }\n .fact-cell {\n padding: 5px 7px;\n border-radius: 8px;\n border: 1px solid var(--line);\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent);\n min-height: 42px;\n }\n .fact-cell b {\n display: block;\n color: var(--muted);\n font-size: 9px;\n font-weight: 750;\n letter-spacing: 0.03em;\n line-height: 1.15;\n margin-bottom: 2px;\n }\n .fact-cell span {\n font-weight: 850;\n font-size: 12.5px;\n font-variant-numeric: tabular-nums;\n letter-spacing: -0.02em;\n }\n footer { margin-top: 28px; color: var(--muted); font-size: 11px; line-height: 1.5; }\n @media (max-width: 900px) {\n .hero, .two, .three { grid-template-columns: 1fr; }\n }\n\n\n/* 03-kca-story.css */\n#s-wrapped, #s-personas, #s-chapters, #s-calendar { scroll-margin-top: 76px; }\n .story-headline {\n margin: 0 0 14px;\n font-size: clamp(17px, 2.5vw, 21px);\n line-height: 1.55;\n font-weight: 650;\n color: var(--ink);\n max-width: 48ch;\n }\n .wrapped-section { margin-bottom: 20px; }\n .wrapped-section h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }\n .wrapped-lede { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }\n .wrapped-deck {\n display: grid;\n gap: 12px;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));\n padding: 0;\n }\n .wrapped-card {\n border-radius: 18px;\n border: 1px solid var(--line);\n padding: 22px 20px;\n min-height: 200px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n background: linear-gradient(155deg, rgba(15, 107, 92, 0.14), rgba(196, 92, 42, 0.08));\n box-shadow: var(--shadow);\n position: relative;\n overflow: hidden;\n }\n .wrapped-card::before {\n content: attr(data-emoji);\n position: absolute;\n top: 12px;\n right: 14px;\n font-size: 2.4rem;\n opacity: 0.35;\n line-height: 1;\n }\n .wrapped-card-kicker {\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--muted);\n margin: 0 0 6px;\n }\n .wrapped-card-stat {\n margin: 0;\n font-size: clamp(32px, 6vw, 44px);\n font-weight: 900;\n letter-spacing: -0.04em;\n line-height: 1.05;\n color: var(--ink);\n word-break: break-word;\n }\n .wrapped-card-sub {\n margin: 10px 0 0;\n font-size: 13px;\n line-height: 1.5;\n color: var(--muted);\n }\n .persona-grid {\n display: grid;\n gap: 10px;\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n }\n .persona-chip {\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n }\n .persona-chip strong {\n display: block;\n font-size: 14px;\n color: var(--ink);\n margin-bottom: 4px;\n }\n .persona-chip em {\n display: block;\n font-style: normal;\n font-size: 12px;\n font-weight: 800;\n color: var(--accent);\n margin-bottom: 4px;\n }\n .persona-chip span { font-size: 11px; color: var(--muted); line-height: 1.4; }\n .chapter-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }\n .chapter-item {\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: 10px 14px;\n align-items: center;\n padding: 14px 16px;\n border-radius: 12px;\n border: 1px solid var(--line);\n background: var(--panel);\n }\n @media (max-width: 560px) {\n .chapter-item { grid-template-columns: auto 1fr; }\n .chapter-item .chapter-stat { grid-column: 1 / -1; text-align: left; }\n }\n .chapter-badge {\n font-size: 12px;\n font-weight: 900;\n color: var(--accent);\n min-width: 2.5rem;\n }\n .chapter-meta { font-size: 13px; line-height: 1.45; color: var(--ink); }\n .chapter-meta small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }\n .chapter-stat { text-align: right; font-size: 13px; font-weight: 750; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n /* GitHub contribution graph (\uC794\uB514) */\n :root {\n --gh-cell-size: 11px;\n --gh-cell-gap: 3px;\n --gh-cell-0: #ebedf0;\n --gh-cell-1: #9be9a8;\n --gh-cell-2: #40c463;\n --gh-cell-3: #30a14e;\n --gh-cell-4: #216e39;\n }\n @media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n --gh-cell-0: #161b22;\n --gh-cell-1: #0e4429;\n --gh-cell-2: #006d32;\n --gh-cell-3: #26a641;\n --gh-cell-4: #39d353;\n }\n }\n :root[data-theme=\"dark\"] {\n --gh-cell-0: #161b22;\n --gh-cell-1: #0e4429;\n --gh-cell-2: #006d32;\n --gh-cell-3: #26a641;\n --gh-cell-4: #39d353;\n }\n :root[data-theme=\"light\"] {\n --gh-cell-0: #ebedf0;\n --gh-cell-1: #9be9a8;\n --gh-cell-2: #40c463;\n --gh-cell-3: #30a14e;\n --gh-cell-4: #216e39;\n }\n .gh-contrib {\n position: relative;\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 16px 18px 14px;\n background: var(--panel);\n }\n .gh-cal-tooltip {\n position: absolute;\n z-index: 20;\n transform: translate(-50%, -100%);\n padding: 6px 10px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 650;\n line-height: 1.35;\n white-space: nowrap;\n color: #fff;\n background: #24292f;\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.12s ease;\n }\n .gh-contrib.gh-tip-on .gh-cal-tooltip { opacity: 1; }\n :root[data-theme=\"dark\"] .gh-cal-tooltip {\n background: #f0f6fc;\n color: #0d1117;\n }\n @media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) .gh-cal-tooltip {\n background: #f0f6fc;\n color: #0d1117;\n }\n }\n .gh-contrib-summary {\n margin: 0 0 12px;\n font-size: 14px;\n line-height: 1.4;\n color: var(--muted);\n }\n .gh-contrib-summary strong {\n font-weight: 600;\n color: var(--ink);\n font-variant-numeric: tabular-nums;\n }\n .gh-contrib-span {\n display: block;\n margin-top: 4px;\n font-size: 11px;\n color: var(--muted);\n }\n .gh-cal-scroll {\n overflow-x: auto;\n overflow-y: hidden;\n max-width: 100%;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 2px;\n }\n .gh-cal-graph {\n display: grid;\n grid-template-areas:\n \". months\"\n \"days weeks\";\n grid-template-columns: max-content max-content;\n column-gap: 8px;\n row-gap: 4px;\n width: max-content;\n min-width: min(100%, max-content);\n }\n .gh-cal-days {\n grid-area: days;\n display: grid;\n grid-template-rows: repeat(7, var(--gh-cell-size));\n gap: var(--gh-cell-gap);\n align-items: center;\n font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n font-size: 9px;\n line-height: 1;\n color: var(--muted);\n padding-right: 2px;\n }\n .gh-cal-days span {\n height: var(--gh-cell-size);\n display: flex;\n align-items: center;\n }\n .gh-cal-days span:empty { visibility: hidden; }\n .gh-cal-months {\n grid-area: months;\n display: grid;\n grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n gap: var(--gh-cell-gap);\n height: 14px;\n align-items: end;\n font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n font-size: 9px;\n line-height: 1;\n color: var(--muted);\n }\n .gh-cal-month {\n grid-column: span 1;\n white-space: nowrap;\n overflow: visible;\n }\n .gh-cal-weeks {\n grid-area: weeks;\n display: grid;\n grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n grid-template-rows: repeat(7, var(--gh-cell-size));\n gap: var(--gh-cell-gap);\n grid-auto-flow: column;\n }\n .gh-cal-cell {\n width: var(--gh-cell-size);\n height: var(--gh-cell-size);\n border-radius: 2px;\n background: var(--gh-cell-0);\n display: block;\n padding: 0;\n margin: 0;\n appearance: none;\n font: inherit;\n cursor: default;\n transition: transform 0.1s ease, box-shadow 0.1s ease, outline 0.1s ease;\n }\n .gh-cal-cell[data-date] {\n cursor: pointer;\n }\n .gh-cal-cell[data-date]:hover,\n .gh-cal-cell[data-date]:focus-visible {\n transform: scale(1.45);\n z-index: 5;\n position: relative;\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel) 80%, transparent);\n }\n .gh-cal-cell[data-level=\"1\"] { background: var(--gh-cell-1); }\n .gh-cal-cell[data-level=\"2\"] { background: var(--gh-cell-2); }\n .gh-cal-cell[data-level=\"3\"] { background: var(--gh-cell-3); }\n .gh-cal-cell[data-level=\"4\"] { background: var(--gh-cell-4); }\n .gh-cal-cell[data-level=\"0\"] { background: var(--gh-cell-0); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }\n .gh-cal-cell--pad {\n pointer-events: none;\n border: none;\n }\n .gh-cal-legend {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 4px;\n margin-top: 12px;\n font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n font-size: 11px;\n color: var(--muted);\n }\n .gh-cal-legend-scale {\n display: inline-flex;\n gap: var(--gh-cell-gap);\n align-items: center;\n margin: 0 2px;\n }\n .gh-cal-legend-scale i {\n width: var(--gh-cell-size);\n height: var(--gh-cell-size);\n border-radius: 2px;\n display: block;\n font-style: normal;\n background: var(--gh-cell-0);\n }\n .gh-cal-legend-scale i[data-level=\"1\"] { background: var(--gh-cell-1); }\n .gh-cal-legend-scale i[data-level=\"2\"] { background: var(--gh-cell-2); }\n .gh-cal-legend-scale i[data-level=\"3\"] { background: var(--gh-cell-3); }\n .gh-cal-legend-scale i[data-level=\"4\"] { background: var(--gh-cell-4); }\n\n\n/* 04-kca-charts.css */\n.viz-hero {\n margin: 0 0 18px;\n padding: 20px 22px;\n border-radius: 20px;\n border: 1px solid var(--glass-border);\n background: var(--glass);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n box-shadow: var(--shadow);\n }\n .viz-hero h2 {\n margin: 0 0 6px;\n font-size: 22px;\n font-weight: 850;\n letter-spacing: -0.03em;\n background: var(--accent-grad);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n .viz-hero p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }\n .viz-grid {\n display: grid;\n gap: 14px;\n grid-template-columns: repeat(12, 1fr);\n }\n .viz-card {\n grid-column: span 12;\n container-type: inline-size;\n container-name: kca-viz;\n border-radius: 18px;\n border: 1px solid var(--glass-border);\n background: var(--glass);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n padding: 16px 16px 12px;\n box-shadow: var(--shadow);\n }\n @media (min-width: 900px) {\n .viz-card.span-6 { grid-column: span 6; }\n .viz-card.span-8 { grid-column: span 8; }\n .viz-card.span-4 { grid-column: span 4; }\n }\n .viz-card h3 {\n margin: 0 0 4px;\n font-size: 15px;\n font-weight: 800;\n letter-spacing: -0.02em;\n }\n .viz-card .viz-hint {\n margin: 0 0 10px;\n font-size: 11px;\n color: var(--muted);\n line-height: 1.45;\n }\n .chart-box {\n width: 100%;\n min-height: 280px;\n height: min(42vh, 360px);\n }\n .chart-box.tall { height: min(52vh, 440px); min-height: 320px; }\n .chart-box.compact { height: 240px; min-height: 220px; }\n .kw-table-wrap {\n max-height: 520px;\n overflow: auto;\n border: 1px solid var(--line);\n border-radius: 12px;\n }\n .kw-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n }\n .kw-table thead th {\n position: sticky;\n top: 0;\n z-index: 1;\n background: var(--panel-solid);\n text-align: left;\n padding: 8px 10px;\n font-size: 11px;\n color: var(--muted);\n border-bottom: 1px solid var(--line);\n }\n .kw-table td {\n padding: 7px 10px;\n border-bottom: 1px solid var(--line);\n }\n .kw-table tbody tr:nth-child(even) { background: rgba(94, 234, 212, 0.04); }\n .kw-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }\n .kw-rank { color: var(--muted); width: 2.5rem; }\n\n\n/* 05-kca-ux.css */\n/* \uC139\uC158 \uB124\uBE44 \u2014 \uB9AC\uD329\uD130 \uC2DC \uC0AD\uC81C\uB410\uB358 \uAE30\uBCF8 \uADDC\uCE59 \uBCF5\uAD6C */\n.deck-nav {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 10px;\n margin-bottom: 0;\n padding: 10px 12px;\n border-radius: 0;\n border: none;\n background: transparent;\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n box-shadow: none;\n}\n\n.deck-nav-h {\n font-size: 11px;\n font-weight: 800;\n color: var(--muted);\n margin-right: 4px;\n letter-spacing: 0.04em;\n flex: 0 0 auto;\n}\n\n.deck-nav a {\n font-size: 12px;\n font-weight: 700;\n padding: 6px 11px;\n border-radius: var(--radius-pill);\n border: 1px solid var(--line);\n background: var(--panel-solid);\n color: var(--ink);\n text-decoration: none;\n transition:\n transform 0.18s var(--ease-out),\n border-color 0.18s var(--ease-out),\n background 0.18s var(--ease-out);\n}\n\n.deck-nav a:hover {\n border-color: var(--accent);\n background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));\n color: var(--accent);\n transform: translateY(-1px);\n}\n\n.kca-topbar {\n position: sticky;\n top: 0;\n z-index: 40;\n margin-bottom: 16px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background: var(--glass);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);\n overflow: hidden;\n }\n .kca-progress {\n height: 3px;\n background: var(--line);\n }\n .kca-progress-fill {\n display: block;\n height: 100%;\n width: 0%;\n background: var(--accent-grad);\n transition: width 0.12s ease-out;\n }\n .kca-topbar .toolbar {\n margin: 0;\n border: none;\n border-radius: 0;\n box-shadow: none;\n border-bottom: 1px solid var(--line);\n }\n .deck-nav-shell > summary {\n display: none;\n cursor: pointer;\n padding: 10px 14px;\n font-size: 13px;\n font-weight: 800;\n color: var(--ink);\n list-style: none;\n border-bottom: 1px solid var(--line);\n }\n .deck-nav-shell > summary::-webkit-details-marker { display: none; }\n .deck-nav-shell > summary::after {\n content: \"\u25BE\";\n float: right;\n color: var(--muted);\n font-size: 11px;\n }\n .deck-nav-shell:not([open]) > summary::after { content: \"\u25B8\"; }\n .deck-nav-shell .deck-nav {\n margin: 0;\n border: none;\n border-radius: 0;\n box-shadow: none;\n position: static;\n }\n .deck-nav a.is-active {\n border-color: var(--accent);\n background: color-mix(in srgb, var(--accent) 14%, transparent);\n color: var(--accent);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);\n }\n .theme-btn.is-active {\n border-color: var(--accent);\n background: color-mix(in srgb, var(--accent) 12%, transparent);\n color: var(--accent);\n font-weight: 800;\n }\n .hero-jumps {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 14px;\n }\n .hero-jump {\n font-size: 12px;\n font-weight: 750;\n padding: 7px 12px;\n border-radius: 999px;\n border: 1px solid var(--line);\n background: var(--panel);\n color: var(--ink);\n text-decoration: none;\n transition: border-color 0.15s ease, transform 0.15s ease;\n }\n .hero-jump:hover {\n border-color: var(--accent);\n transform: translateY(-1px);\n }\n .hero-jump strong { color: var(--accent); font-weight: 850; }\n .kca-back-top {\n position: fixed;\n right: max(16px, env(safe-area-inset-right));\n bottom: max(16px, env(safe-area-inset-bottom));\n z-index: 50;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--line);\n background: var(--panel-solid);\n color: var(--accent);\n font-size: 18px;\n font-weight: 900;\n cursor: pointer;\n box-shadow: var(--shadow);\n transition: opacity 0.2s ease, transform 0.2s ease;\n }\n .kca-back-top:not([hidden]):hover { transform: translateY(-2px); border-color: var(--accent); }\n .kca-back-top[hidden] { display: none; }\n .kw-css-fold {\n margin-bottom: 14px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background: var(--panel);\n overflow: hidden;\n }\n .kw-css-fold > summary {\n cursor: pointer;\n padding: 12px 16px;\n font-size: 13px;\n font-weight: 800;\n color: var(--ink);\n list-style: none;\n }\n .kw-css-fold > summary::-webkit-details-marker { display: none; }\n .kw-css-fold > summary small {\n display: block;\n margin-top: 4px;\n font-size: 11px;\n font-weight: 500;\n color: var(--muted);\n }\n .kw-css-fold .kw-css-body { padding: 0 16px 16px; }\n @media (max-width: 720px) {\n .deck-nav-shell > summary { display: block; }\n .deck-nav-shell:not([open]) .deck-nav { display: none; }\n .deck-nav-shell .deck-nav {\n max-height: min(42vh, 280px);\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n main { width: min(1200px, calc(100% - 20px)); padding: 20px 0 48px; }\n }\n @media (hover: none) {\n .card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }\n }\n /* scroll-margin: 06-kca-responsive.css --kca-topbar-offset */\n\n\n/* 06-kca-responsive.css */\n/* kca \uBC18\uC751\uD615 \u2014 \uBAA8\uBC14\uC77C \u00B7 \uD0DC\uBE14\uB9BF \u00B7 \uB370\uC2A4\uD06C\uD1B1 \u00B7 4K + \uCEE8\uD14C\uC774\uB108 \uCFFC\uB9AC */\n:root {\n --kca-content-max: 72rem;\n --kca-gutter: clamp(12px, 2.8vw, 28px);\n --kca-topbar-offset: 112px;\n --kca-section-gap: clamp(14px, 2vw, 22px);\n}\n\n@media (min-width: 600px) {\n :root {\n --kca-topbar-offset: 104px;\n }\n}\n\n@media (min-width: 1024px) {\n :root {\n --kca-content-max: 80rem;\n --kca-topbar-offset: 92px;\n }\n}\n\n@media (min-width: 1440px) {\n :root {\n --kca-content-max: 84rem;\n }\n}\n\n@media (min-width: 1920px) {\n :root {\n --kca-content-max: 92rem;\n --kca-gutter: clamp(20px, 2vw, 40px);\n --kca-section-gap: 24px;\n }\n}\n\n@media (min-width: 2560px) {\n :root {\n --kca-content-max: 100rem;\n }\n}\n\nmain {\n width: min(var(--kca-content-max), calc(100% - var(--kca-gutter) * 2));\n padding-block: clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px);\n}\n\n#s-story,\n#s-wrapped,\n#s-personas,\n#s-chapters,\n#s-calendar,\n#s-facts,\n#s-hl,\n#s-ai,\n#s-topics,\n#s-viz,\n#s-charts,\n#s-help {\n scroll-margin-top: var(--kca-topbar-offset);\n}\n\n.report-section {\n content-visibility: auto;\n contain-intrinsic-size: auto 520px;\n}\n\n.kca-topbar,\n#s-story,\n#s-wrapped {\n content-visibility: visible;\n}\n\n/* \u2500\u2500 \uCEE8\uD14C\uC774\uB108 \uCFFC\uB9AC: \uCC28\uD2B8 \uCE74\uB4DC \u2500\u2500 */\n.viz-card {\n container-type: inline-size;\n container-name: kca-viz;\n}\n\n@container kca-viz (max-width: 22rem) {\n .chart-box {\n height: min(36vh, 260px);\n min-height: 200px;\n }\n .chart-box.tall {\n height: min(42vh, 300px);\n min-height: 220px;\n }\n .viz-card h3 {\n font-size: 14px;\n }\n}\n\n@container kca-viz (min-width: 22rem) {\n .chart-box.compact {\n height: min(32vh, 280px);\n }\n}\n\n/* \u2500\u2500 \uBAA8\uBC14\uC77C (\u2264599px) \u2500\u2500 */\n@media (max-width: 599px) {\n .hero {\n grid-template-columns: 1fr;\n gap: 16px;\n padding-bottom: 20px;\n }\n\n .hero-jumps {\n flex-direction: column;\n align-items: stretch;\n }\n\n .hero-jump {\n text-align: center;\n justify-content: center;\n }\n\n .badge-row {\n gap: 6px;\n }\n\n .badge {\n font-size: 11px;\n padding: 5px 8px;\n }\n\n .fact-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 6px;\n }\n\n .fact-cell b {\n font-size: 8px;\n }\n\n .fact-cell span {\n font-size: 11px;\n }\n\n .wrapped-deck {\n grid-template-columns: 1fr;\n }\n\n .wrapped-card {\n min-height: 168px;\n padding: 18px 16px;\n }\n\n .wrapped-card-stat {\n font-size: clamp(28px, 10vw, 36px);\n }\n\n .chart-box {\n height: 240px;\n min-height: 200px;\n }\n\n .chart-box.tall {\n height: min(44vh, 300px);\n min-height: 220px;\n }\n\n .viz-hero {\n padding: 16px;\n }\n\n .viz-hero h2 {\n font-size: 18px;\n }\n\n .bar-row {\n grid-template-columns: minmax(56px, 0.9fr) minmax(0, 2fr) 44px;\n gap: 6px;\n }\n\n .deck-nav a {\n font-size: 11px;\n padding: 5px 9px;\n }\n\n .deck-nav-h {\n width: 100%;\n margin-bottom: 2px;\n }\n}\n\n/* \u2500\u2500 \uD0DC\uBE14\uB9BF (600\u20131023px) \u2500\u2500 */\n@media (min-width: 600px) and (max-width: 1023px) {\n .hero {\n grid-template-columns: 1fr;\n }\n\n .wrapped-deck {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .fact-grid {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .insight-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .two {\n grid-template-columns: 1fr;\n }\n\n .three {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .chart-box {\n height: min(40vh, 320px);\n }\n}\n\n/* \u2500\u2500 \uB370\uC2A4\uD06C\uD1B1 (1024\u20131919px) \u2500\u2500 */\n@media (min-width: 1024px) {\n .hero {\n grid-template-columns: 1.35fr 1fr;\n }\n\n .wrapped-deck {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n\n .fact-grid {\n grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));\n }\n}\n\n/* \u2500\u2500 4K / \uC6B8\uD2B8\uB77C\uC640\uC774\uB4DC (\u22651920px) \u2500\u2500 */\n@media (min-width: 1920px) {\n h1 {\n font-size: clamp(2.25rem, 1.6vw + 1rem, 3.25rem);\n }\n\n .room-title {\n font-size: clamp(1.25rem, 0.8vw + 0.75rem, 1.75rem);\n }\n\n .story-headline {\n font-size: clamp(1.1rem, 0.5vw + 0.85rem, 1.35rem);\n max-width: 56ch;\n }\n\n .viz-grid {\n gap: 18px;\n }\n\n .viz-card {\n padding: 18px 20px 14px;\n }\n\n .wrapped-deck {\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n gap: 16px;\n }\n\n .wrapped-card-stat {\n font-size: clamp(36px, 3vw, 48px);\n }\n\n .card {\n padding: 20px 24px;\n }\n\n .deck-nav a {\n font-size: 13px;\n padding: 7px 13px;\n }\n}\n\n/* \uC2A4\uD06C\uB864 \uC9C4\uC785 \uBAA8\uC158 (\uC811\uADFC\uC131: reduced-motion \uC2DC UX \uC2A4\uD06C\uB9BD\uD2B8\uAC00 \uBE44\uD65C\uC131) */\n@media (prefers-reduced-motion: no-preference) {\n .kca-reveal {\n opacity: 0;\n transform: translateY(14px);\n transition:\n opacity 0.55s var(--ease-out),\n transform 0.55s var(--ease-out);\n transition-delay: var(--reveal-delay, 0ms);\n }\n\n .kca-reveal.is-inview {\n opacity: 1;\n transform: none;\n }\n}\n\n/* \uD130\uCE58 \uD0C0\uAE43 */\n@media (hover: none) and (pointer: coarse) {\n .theme-btn,\n .deck-nav a,\n .hero-jump {\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .gh-cal-cell {\n min-width: 44px;\n min-height: 44px;\n }\n}\n\n";
package/dist/src/report-styles.js CHANGED
@@ -155,9 +155,7 @@ body {
155
155
  }
156
156
 
157
157
  main {
158
- width: min(var(--size-content-3, 72rem), calc(100% - var(--size-4)));
159
158
  margin: 0 auto;
160
- padding: var(--size-6) 0 var(--size-8);
161
159
  overflow-x: clip;
162
160
  max-width: 100%;
163
161
  }
@@ -819,7 +817,7 @@ a {
819
817
  .wrapped-deck {
820
818
  display: grid;
821
819
  gap: 12px;
822
- grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
820
+ grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
823
821
  padding: 0;
824
822
  }
825
823
  .wrapped-card {
@@ -1157,6 +1155,8 @@ a {
1157
1155
  }
1158
1156
  .viz-card {
1159
1157
  grid-column: span 12;
1158
+ container-type: inline-size;
1159
+ container-name: kca-viz;
1160
1160
  border-radius: 18px;
1161
1161
  border: 1px solid var(--glass-border);
1162
1162
  background: var(--glass);
@@ -1414,9 +1414,316 @@ a {
1414
1414
  @media (hover: none) {
1415
1415
  .card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }
1416
1416
  }
1417
- #s-wrapped, #s-personas, #s-chapters, #s-calendar, #s-facts, #s-story, #s-hl, #s-ai, #s-topics, #s-viz, #s-charts, #s-help {
1418
- scroll-margin-top: 118px;
1419
- }
1417
+ /* scroll-margin: 06-kca-responsive.css --kca-topbar-offset */
1418
+
1419
+
1420
+ /* 06-kca-responsive.css */
1421
+ /* kca 반응형 — 모바일 · 태블릿 · 데스크톱 · 4K + 컨테이너 쿼리 */
1422
+ :root {
1423
+ --kca-content-max: 72rem;
1424
+ --kca-gutter: clamp(12px, 2.8vw, 28px);
1425
+ --kca-topbar-offset: 112px;
1426
+ --kca-section-gap: clamp(14px, 2vw, 22px);
1427
+ }
1428
+
1429
+ @media (min-width: 600px) {
1430
+ :root {
1431
+ --kca-topbar-offset: 104px;
1432
+ }
1433
+ }
1434
+
1435
+ @media (min-width: 1024px) {
1436
+ :root {
1437
+ --kca-content-max: 80rem;
1438
+ --kca-topbar-offset: 92px;
1439
+ }
1440
+ }
1441
+
1442
+ @media (min-width: 1440px) {
1443
+ :root {
1444
+ --kca-content-max: 84rem;
1445
+ }
1446
+ }
1447
+
1448
+ @media (min-width: 1920px) {
1449
+ :root {
1450
+ --kca-content-max: 92rem;
1451
+ --kca-gutter: clamp(20px, 2vw, 40px);
1452
+ --kca-section-gap: 24px;
1453
+ }
1454
+ }
1455
+
1456
+ @media (min-width: 2560px) {
1457
+ :root {
1458
+ --kca-content-max: 100rem;
1459
+ }
1460
+ }
1461
+
1462
+ main {
1463
+ width: min(var(--kca-content-max), calc(100% - var(--kca-gutter) * 2));
1464
+ padding-block: clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px);
1465
+ }
1466
+
1467
+ #s-story,
1468
+ #s-wrapped,
1469
+ #s-personas,
1470
+ #s-chapters,
1471
+ #s-calendar,
1472
+ #s-facts,
1473
+ #s-hl,
1474
+ #s-ai,
1475
+ #s-topics,
1476
+ #s-viz,
1477
+ #s-charts,
1478
+ #s-help {
1479
+ scroll-margin-top: var(--kca-topbar-offset);
1480
+ }
1481
+
1482
+ .report-section {
1483
+ content-visibility: auto;
1484
+ contain-intrinsic-size: auto 520px;
1485
+ }
1486
+
1487
+ .kca-topbar,
1488
+ #s-story,
1489
+ #s-wrapped {
1490
+ content-visibility: visible;
1491
+ }
1492
+
1493
+ /* ── 컨테이너 쿼리: 차트 카드 ── */
1494
+ .viz-card {
1495
+ container-type: inline-size;
1496
+ container-name: kca-viz;
1497
+ }
1498
+
1499
+ @container kca-viz (max-width: 22rem) {
1500
+ .chart-box {
1501
+ height: min(36vh, 260px);
1502
+ min-height: 200px;
1503
+ }
1504
+ .chart-box.tall {
1505
+ height: min(42vh, 300px);
1506
+ min-height: 220px;
1507
+ }
1508
+ .viz-card h3 {
1509
+ font-size: 14px;
1510
+ }
1511
+ }
1512
+
1513
+ @container kca-viz (min-width: 22rem) {
1514
+ .chart-box.compact {
1515
+ height: min(32vh, 280px);
1516
+ }
1517
+ }
1518
+
1519
+ /* ── 모바일 (≤599px) ── */
1520
+ @media (max-width: 599px) {
1521
+ .hero {
1522
+ grid-template-columns: 1fr;
1523
+ gap: 16px;
1524
+ padding-bottom: 20px;
1525
+ }
1526
+
1527
+ .hero-jumps {
1528
+ flex-direction: column;
1529
+ align-items: stretch;
1530
+ }
1531
+
1532
+ .hero-jump {
1533
+ text-align: center;
1534
+ justify-content: center;
1535
+ }
1536
+
1537
+ .badge-row {
1538
+ gap: 6px;
1539
+ }
1540
+
1541
+ .badge {
1542
+ font-size: 11px;
1543
+ padding: 5px 8px;
1544
+ }
1545
+
1546
+ .fact-grid {
1547
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1548
+ gap: 6px;
1549
+ }
1550
+
1551
+ .fact-cell b {
1552
+ font-size: 8px;
1553
+ }
1554
+
1555
+ .fact-cell span {
1556
+ font-size: 11px;
1557
+ }
1558
+
1559
+ .wrapped-deck {
1560
+ grid-template-columns: 1fr;
1561
+ }
1562
+
1563
+ .wrapped-card {
1564
+ min-height: 168px;
1565
+ padding: 18px 16px;
1566
+ }
1567
+
1568
+ .wrapped-card-stat {
1569
+ font-size: clamp(28px, 10vw, 36px);
1570
+ }
1571
+
1572
+ .chart-box {
1573
+ height: 240px;
1574
+ min-height: 200px;
1575
+ }
1576
+
1577
+ .chart-box.tall {
1578
+ height: min(44vh, 300px);
1579
+ min-height: 220px;
1580
+ }
1581
+
1582
+ .viz-hero {
1583
+ padding: 16px;
1584
+ }
1585
+
1586
+ .viz-hero h2 {
1587
+ font-size: 18px;
1588
+ }
1589
+
1590
+ .bar-row {
1591
+ grid-template-columns: minmax(56px, 0.9fr) minmax(0, 2fr) 44px;
1592
+ gap: 6px;
1593
+ }
1594
+
1595
+ .deck-nav a {
1596
+ font-size: 11px;
1597
+ padding: 5px 9px;
1598
+ }
1599
+
1600
+ .deck-nav-h {
1601
+ width: 100%;
1602
+ margin-bottom: 2px;
1603
+ }
1604
+ }
1605
+
1606
+ /* ── 태블릿 (600–1023px) ── */
1607
+ @media (min-width: 600px) and (max-width: 1023px) {
1608
+ .hero {
1609
+ grid-template-columns: 1fr;
1610
+ }
1611
+
1612
+ .wrapped-deck {
1613
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1614
+ }
1615
+
1616
+ .fact-grid {
1617
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1618
+ }
1619
+
1620
+ .insight-grid {
1621
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1622
+ }
1623
+
1624
+ .two {
1625
+ grid-template-columns: 1fr;
1626
+ }
1627
+
1628
+ .three {
1629
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1630
+ }
1631
+
1632
+ .chart-box {
1633
+ height: min(40vh, 320px);
1634
+ }
1635
+ }
1636
+
1637
+ /* ── 데스크톱 (1024–1919px) ── */
1638
+ @media (min-width: 1024px) {
1639
+ .hero {
1640
+ grid-template-columns: 1.35fr 1fr;
1641
+ }
1642
+
1643
+ .wrapped-deck {
1644
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
1645
+ }
1646
+
1647
+ .fact-grid {
1648
+ grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
1649
+ }
1650
+ }
1651
+
1652
+ /* ── 4K / 울트라와이드 (≥1920px) ── */
1653
+ @media (min-width: 1920px) {
1654
+ h1 {
1655
+ font-size: clamp(2.25rem, 1.6vw + 1rem, 3.25rem);
1656
+ }
1657
+
1658
+ .room-title {
1659
+ font-size: clamp(1.25rem, 0.8vw + 0.75rem, 1.75rem);
1660
+ }
1661
+
1662
+ .story-headline {
1663
+ font-size: clamp(1.1rem, 0.5vw + 0.85rem, 1.35rem);
1664
+ max-width: 56ch;
1665
+ }
1666
+
1667
+ .viz-grid {
1668
+ gap: 18px;
1669
+ }
1670
+
1671
+ .viz-card {
1672
+ padding: 18px 20px 14px;
1673
+ }
1674
+
1675
+ .wrapped-deck {
1676
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
1677
+ gap: 16px;
1678
+ }
1679
+
1680
+ .wrapped-card-stat {
1681
+ font-size: clamp(36px, 3vw, 48px);
1682
+ }
1683
+
1684
+ .card {
1685
+ padding: 20px 24px;
1686
+ }
1687
+
1688
+ .deck-nav a {
1689
+ font-size: 13px;
1690
+ padding: 7px 13px;
1691
+ }
1692
+ }
1693
+
1694
+ /* 스크롤 진입 모션 (접근성: reduced-motion 시 UX 스크립트가 비활성) */
1695
+ @media (prefers-reduced-motion: no-preference) {
1696
+ .kca-reveal {
1697
+ opacity: 0;
1698
+ transform: translateY(14px);
1699
+ transition:
1700
+ opacity 0.55s var(--ease-out),
1701
+ transform 0.55s var(--ease-out);
1702
+ transition-delay: var(--reveal-delay, 0ms);
1703
+ }
1704
+
1705
+ .kca-reveal.is-inview {
1706
+ opacity: 1;
1707
+ transform: none;
1708
+ }
1709
+ }
1710
+
1711
+ /* 터치 타깃 */
1712
+ @media (hover: none) and (pointer: coarse) {
1713
+ .theme-btn,
1714
+ .deck-nav a,
1715
+ .hero-jump {
1716
+ min-height: 44px;
1717
+ display: inline-flex;
1718
+ align-items: center;
1719
+ justify-content: center;
1720
+ }
1721
+
1722
+ .gh-cal-cell {
1723
+ min-width: 44px;
1724
+ min-height: 44px;
1725
+ }
1726
+ }
1420
1727
 
1421
1728
  `;
1422
1729
  //# sourceMappingURL=report-styles.js.map
package/dist/src/report-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"report-styles.js","sourceRoot":"","sources":["../../src/report-styles.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA24C5B,CAAC"}
1
+ {"version":3,"file":"report-styles.js","sourceRoot":"","sources":["../../src/report-styles.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8rD5B,CAAC"}
package/dist/src/report-ux.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { ReportData } from "./types.js";
2
2
  /** 리포트 HTML용 UX 레이어 (진행률·스크롤 스파이·모바일 네비·맨 위로) */
3
3
  /** @deprecated styles live in src/report/css — bundled via report-styles.ts */
4
- export declare const REPORT_UX_SCRIPT = "\n (function () {\n var fill = document.querySelector(\".kca-progress-fill\");\n var backTop = document.querySelector(\".kca-back-top\");\n var navLinks = document.querySelectorAll(\".deck-nav a[data-kca-jump]\");\n var sections = [];\n navLinks.forEach(function (a) {\n var id = a.getAttribute(\"data-kca-jump\");\n var el = id && document.getElementById(id);\n if (el) sections.push({ el: el, link: a });\n });\n function onScroll() {\n var st = window.scrollY || document.documentElement.scrollTop;\n var max = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);\n if (fill) fill.style.width = Math.min(100, (st / max) * 100) + \"%\";\n if (backTop) backTop.hidden = st < 480;\n if (!sections.length) return;\n var probe = st + 150;\n var current = sections[0];\n for (var i = 0; i < sections.length; i += 1) {\n if (sections[i].el.offsetTop <= probe) current = sections[i];\n }\n sections.forEach(function (s) {\n var on = s === current;\n s.link.classList.toggle(\"is-active\", on);\n if (on) s.link.setAttribute(\"aria-current\", \"location\");\n else s.link.removeAttribute(\"aria-current\");\n });\n }\n window.addEventListener(\"scroll\", onScroll, { passive: true });\n onScroll();\n if (backTop) {\n backTop.addEventListener(\"click\", function () {\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n });\n }\n function syncThemeButtons() {\n var mode = document.documentElement.getAttribute(\"data-theme\") || \"system\";\n document.querySelectorAll(\".theme-btn\").forEach(function (btn) {\n var v = btn.getAttribute(\"data-theme-set\") || \"system\";\n btn.classList.toggle(\"is-active\", v === mode);\n btn.setAttribute(\"aria-pressed\", v === mode ? \"true\" : \"false\");\n });\n }\n var obs = new MutationObserver(syncThemeButtons);\n obs.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-theme\"] });\n syncThemeButtons();\n })();\n";
4
+ export declare const REPORT_UX_SCRIPT = "\n (function () {\n var fill = document.querySelector(\".kca-progress-fill\");\n var backTop = document.querySelector(\".kca-back-top\");\n var topbar = document.querySelector(\".kca-topbar\");\n var navLinks = document.querySelectorAll(\".deck-nav a[data-kca-jump], .hero-jump[data-kca-jump]\");\n var sections = [];\n navLinks.forEach(function (a) {\n var id = a.getAttribute(\"data-kca-jump\");\n if (!id) return;\n var el = document.getElementById(id);\n if (!el) return;\n if (sections.some(function (s) { return s.el === el; })) return;\n sections.push({ el: el, link: a });\n });\n function topbarOffset() {\n return topbar ? topbar.getBoundingClientRect().height + 10 : 112;\n }\n function onScroll() {\n var st = window.scrollY || document.documentElement.scrollTop;\n var max = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);\n if (fill) fill.style.width = Math.min(100, (st / max) * 100) + \"%\";\n if (backTop) backTop.hidden = st < 480;\n if (!sections.length) return;\n var probe = st + topbarOffset();\n var current = sections[0];\n for (var i = 0; i < sections.length; i += 1) {\n if (sections[i].el.offsetTop <= probe) current = sections[i];\n }\n sections.forEach(function (s) {\n var on = s === current;\n s.link.classList.toggle(\"is-active\", on);\n if (on) s.link.setAttribute(\"aria-current\", \"location\");\n else s.link.removeAttribute(\"aria-current\");\n });\n }\n window.addEventListener(\"scroll\", onScroll, { passive: true });\n window.addEventListener(\"resize\", onScroll, { passive: true });\n onScroll();\n if (backTop) {\n backTop.addEventListener(\"click\", function () {\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n });\n }\n var shell = document.querySelector(\".deck-nav-shell\");\n if (shell) {\n shell.addEventListener(\"toggle\", function () {\n setTimeout(function () {\n onScroll();\n window.dispatchEvent(new Event(\"resize\"));\n }, 60);\n });\n }\n var reduce = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n if (!reduce && typeof IntersectionObserver !== \"undefined\") {\n var reveal = new IntersectionObserver(\n function (entries) {\n entries.forEach(function (en) {\n if (en.isIntersecting) {\n en.target.classList.add(\"is-inview\");\n reveal.unobserve(en.target);\n }\n });\n },\n { rootMargin: \"0px 0px -5% 0px\", threshold: 0.05 },\n );\n var ri = 0;\n document.querySelectorAll(\".card, .wrapped-card, .viz-card, .fact-card\").forEach(function (el) {\n el.classList.add(\"kca-reveal\");\n el.style.setProperty(\"--reveal-delay\", Math.min(ri * 35, 280) + \"ms\");\n ri += 1;\n reveal.observe(el);\n });\n }\n function syncThemeButtons() {\n var mode = document.documentElement.getAttribute(\"data-theme\") || \"system\";\n document.querySelectorAll(\".theme-btn\").forEach(function (btn) {\n var v = btn.getAttribute(\"data-theme-set\") || \"system\";\n var on = mode === \"system\" ? v === \"system\" : v === mode;\n btn.classList.toggle(\"is-active\", on);\n btn.setAttribute(\"aria-pressed\", on ? \"true\" : \"false\");\n });\n }\n var obs = new MutationObserver(function () {\n syncThemeButtons();\n setTimeout(function () { window.dispatchEvent(new Event(\"resize\")); }, 40);\n });\n obs.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-theme\"] });\n syncThemeButtons();\n })();\n";
5
5
  export declare function renderHeroQuickJumps(): string;
6
6
  export declare function renderTopChrome(_data: ReportData, sectionNavHtml: string): string;
7
7
  export declare function topicNavLink(data: ReportData): string;
package/dist/src/report-ux.js CHANGED
@@ -4,20 +4,27 @@ export const REPORT_UX_SCRIPT = `
4
4
  (function () {
5
5
  var fill = document.querySelector(".kca-progress-fill");
6
6
  var backTop = document.querySelector(".kca-back-top");
7
- var navLinks = document.querySelectorAll(".deck-nav a[data-kca-jump]");
7
+ var topbar = document.querySelector(".kca-topbar");
8
+ var navLinks = document.querySelectorAll(".deck-nav a[data-kca-jump], .hero-jump[data-kca-jump]");
8
9
  var sections = [];
9
10
  navLinks.forEach(function (a) {
10
11
  var id = a.getAttribute("data-kca-jump");
11
- var el = id && document.getElementById(id);
12
- if (el) sections.push({ el: el, link: a });
12
+ if (!id) return;
13
+ var el = document.getElementById(id);
14
+ if (!el) return;
15
+ if (sections.some(function (s) { return s.el === el; })) return;
16
+ sections.push({ el: el, link: a });
13
17
  });
18
+ function topbarOffset() {
19
+ return topbar ? topbar.getBoundingClientRect().height + 10 : 112;
20
+ }
14
21
  function onScroll() {
15
22
  var st = window.scrollY || document.documentElement.scrollTop;
16
23
  var max = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
17
24
  if (fill) fill.style.width = Math.min(100, (st / max) * 100) + "%";
18
25
  if (backTop) backTop.hidden = st < 480;
19
26
  if (!sections.length) return;
20
- var probe = st + 150;
27
+ var probe = st + topbarOffset();
21
28
  var current = sections[0];
22
29
  for (var i = 0; i < sections.length; i += 1) {
23
30
  if (sections[i].el.offsetTop <= probe) current = sections[i];
@@ -30,21 +37,56 @@ export const REPORT_UX_SCRIPT = `
30
37
  });
31
38
  }
32
39
  window.addEventListener("scroll", onScroll, { passive: true });
40
+ window.addEventListener("resize", onScroll, { passive: true });
33
41
  onScroll();
34
42
  if (backTop) {
35
43
  backTop.addEventListener("click", function () {
36
44
  window.scrollTo({ top: 0, behavior: "smooth" });
37
45
  });
38
46
  }
47
+ var shell = document.querySelector(".deck-nav-shell");
48
+ if (shell) {
49
+ shell.addEventListener("toggle", function () {
50
+ setTimeout(function () {
51
+ onScroll();
52
+ window.dispatchEvent(new Event("resize"));
53
+ }, 60);
54
+ });
55
+ }
56
+ var reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
57
+ if (!reduce && typeof IntersectionObserver !== "undefined") {
58
+ var reveal = new IntersectionObserver(
59
+ function (entries) {
60
+ entries.forEach(function (en) {
61
+ if (en.isIntersecting) {
62
+ en.target.classList.add("is-inview");
63
+ reveal.unobserve(en.target);
64
+ }
65
+ });
66
+ },
67
+ { rootMargin: "0px 0px -5% 0px", threshold: 0.05 },
68
+ );
69
+ var ri = 0;
70
+ document.querySelectorAll(".card, .wrapped-card, .viz-card, .fact-card").forEach(function (el) {
71
+ el.classList.add("kca-reveal");
72
+ el.style.setProperty("--reveal-delay", Math.min(ri * 35, 280) + "ms");
73
+ ri += 1;
74
+ reveal.observe(el);
75
+ });
76
+ }
39
77
  function syncThemeButtons() {
40
78
  var mode = document.documentElement.getAttribute("data-theme") || "system";
41
79
  document.querySelectorAll(".theme-btn").forEach(function (btn) {
42
80
  var v = btn.getAttribute("data-theme-set") || "system";
43
- btn.classList.toggle("is-active", v === mode);
44
- btn.setAttribute("aria-pressed", v === mode ? "true" : "false");
81
+ var on = mode === "system" ? v === "system" : v === mode;
82
+ btn.classList.toggle("is-active", on);
83
+ btn.setAttribute("aria-pressed", on ? "true" : "false");
45
84
  });
46
85
  }
47
- var obs = new MutationObserver(syncThemeButtons);
86
+ var obs = new MutationObserver(function () {
87
+ syncThemeButtons();
88
+ setTimeout(function () { window.dispatchEvent(new Event("resize")); }, 40);
89
+ });
48
90
  obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
49
91
  syncThemeButtons();
50
92
  })();
package/dist/src/report-ux.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"report-ux.js","sourceRoot":"","sources":["../../src/report-ux.ts"],"names":[],"mappings":"AAEA,iDAAiD;AACjD,+EAA+E;AAE/E,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD/B,CAAC;AAEF,MAAM,UAAU,oBAAoB;IAClC,OAAO;;;;;SAKA,CAAC;AACV,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAAiB,EAAE,cAAsB;IACvE,OAAO;;;;;;;;;;QAUD,cAAc;;;oFAG8D,CAAC;AACrF,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAgB;IAC3C,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACxC,OAAO,uDAAuD,CAAC;AACjE,CAAC"}
1
+ {"version":3,"file":"report-ux.js","sourceRoot":"","sources":["../../src/report-ux.ts"],"names":[],"mappings":"AAEA,iDAAiD;AACjD,+EAA+E;AAE/E,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0F/B,CAAC;AAEF,MAAM,UAAU,oBAAoB;IAClC,OAAO;;;;;SAKA,CAAC;AACV,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAAiB,EAAE,cAAsB;IACvE,OAAO;;;;;;;;;;QAUD,cAAc;;;oFAG8D,CAAC;AACrF,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAgB;IAC3C,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACxC,OAAO,uDAAuD,CAAC;AACjE,CAAC"}
package/dist/src/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const VERSION = "0.10.2";
2
- export declare const USER_AGENT = "kakaotalk-chat-analyzer/0.10.2";
1
+ export declare const VERSION = "0.11.0";
2
+ export declare const USER_AGENT = "kakaotalk-chat-analyzer/0.11.0";
package/dist/src/version.js CHANGED
@@ -1,3 +1,3 @@
1
- export const VERSION = "0.10.2";
1
+ export const VERSION = "0.11.0";
2
2
  export const USER_AGENT = `kakaotalk-chat-analyzer/${VERSION}`;
3
3
  //# sourceMappingURL=version.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kakaotalk-chat-analyzer",
3
- "version": "0.10.2",
3
+ "version": "0.11.0",
4
4
  "description": "카카오톡 CSV 보내기 → 한글 리포트 → 선택적 임시 공유. npx 한 줄로 실행 가능한 CLI.",
5
5
  "type": "module",
6
6
  "homepage": "https://claudianus.github.io/kakaotalk-chat-analyzer/",