lotto 기능에 추천 결과 통계 시각화 (분포, 합계, 홀짝)를 추가

src/pages/lotto/Lotto.css

@@ -244,6 +244,169 @@
     border: 1px solid var(--line);
 }
 
+.lotto-compare {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.lotto-metrics {
+    border: 1px solid var(--line);
+    border-radius: 16px;
+    padding: 14px;
+    background: rgba(255, 255, 255, 0.02);
+    display: grid;
+    gap: 12px;
+}
+
+.lotto-metrics__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+
+.lotto-metrics__title {
+    margin: 0;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.lotto-metrics__sum {
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.lotto-metric-cards {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+}
+
+.lotto-metric-card {
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    padding: 10px;
+    background: rgba(0, 0, 0, 0.2);
+    display: grid;
+    gap: 6px;
+}
+
+.lotto-metric-card__label {
+    margin: 0;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+}
+
+.lotto-metric-card__value {
+    margin: 0;
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.lotto-odd-even {
+    display: grid;
+    gap: 8px;
+}
+
+.lotto-odd-even__labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.lotto-odd-even__bar {
+    height: 10px;
+    border-radius: 999px;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    border: 1px solid var(--line);
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.lotto-odd-even__odd {
+    background: rgba(247, 168, 165, 0.6);
+}
+
+.lotto-odd-even__even {
+    background: rgba(151, 201, 170, 0.6);
+}
+
+.lotto-buckets {
+    display: grid;
+    gap: 8px;
+}
+
+.lotto-bucket {
+    display: grid;
+    grid-template-columns: 54px minmax(0, 1fr) 28px;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.lotto-bucket__label {
+    font-weight: 600;
+}
+
+.lotto-bucket__bar {
+    height: 8px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+    border: 1px solid var(--line);
+}
+
+.lotto-bucket__bar span {
+    display: block;
+    height: 100%;
+    background: rgba(133, 165, 216, 0.7);
+}
+
+.lotto-bucket__value {
+    text-align: right;
+    font-weight: 600;
+}
+
+.lotto-batch {
+    display: grid;
+    gap: 12px;
+    margin-top: 12px;
+}
+
+.lotto-batch__item {
+    border: 1px solid var(--line);
+    border-radius: 16px;
+    padding: 14px;
+    display: grid;
+    gap: 10px;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.lotto-batch__meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.lotto-batch__title {
+    margin: 0;
+    font-weight: 600;
+}
+
+.lotto-batch__sub {
+    margin: 4px 0 0;
+    color: var(--muted);
+    font-size: 12px;
+}
+
 .lotto-empty {
     margin: 0;
     color: var(--muted);