style(responsive): standardize breakpoints for Home, Lotto, Travel, Blog

- Home.css: 960px → 1024px
- Lotto.css: merge 900px into 768px block; both 640px blocks → 480px
- Travel.css: merge 900px into 768px block; both 640px blocks → 480px
- Blog.css: merge 900px into 768px block (preserving all styles)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-23 14:29:34 +09:00
parent 75d1558508
commit 1e60524cfc
4 changed files with 44 additions and 59 deletions

View File

@@ -1074,41 +1074,7 @@
/* ── 반응형 ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.lotto-header {
grid-template-columns: 1fr;
}
.lotto-history__item {
grid-template-columns: 1fr;
}
.lotto-analysis__row {
grid-template-columns: 1fr;
gap: 16px;
}
.lotto-pick {
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 8px;
}
.lotto-report-top {
grid-template-columns: 1fr;
}
.lotto-purchase-list__head,
.lotto-purchase-row {
grid-template-columns: 56px 90px 90px minmax(0, 1fr) 100px;
}
.lotto-purchase-list__head span:nth-child(4),
.lotto-purchase-row span:nth-child(4) {
display: none;
}
}
@media (max-width: 640px) {
@media (max-width: 480px) {
.lotto-purchase-stats {
flex-direction: column;
}
@@ -1157,6 +1123,34 @@
}
@media (max-width: 768px) {
.lotto-header {
grid-template-columns: 1fr;
}
.lotto-analysis__row {
grid-template-columns: 1fr;
gap: 16px;
}
.lotto-pick {
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 8px;
}
.lotto-report-top {
grid-template-columns: 1fr;
}
.lotto-purchase-list__head,
.lotto-purchase-row {
grid-template-columns: 56px 90px 90px minmax(0, 1fr) 100px;
}
.lotto-purchase-list__head span:nth-child(4),
.lotto-purchase-row span:nth-child(4) {
display: none;
}
.lotto-header h1 {
font-size: clamp(24px, 6vw, 32px);
}
@@ -1191,6 +1185,7 @@
}
.lotto-history__item {
grid-template-columns: 1fr;
padding: 14px;
gap: 12px;
}
@@ -1459,7 +1454,7 @@
flex-shrink: 0;
}
@media (max-width: 640px) {
@media (max-width: 480px) {
.lotto-combined__method {
flex-direction: column;
align-items: flex-start;
@@ -1514,7 +1509,7 @@
.lotto-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.lotto-tabs button { padding: 8px 16px; background: transparent; border: none; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; }
.lotto-tabs button.active { color: #e2e8f0; border-bottom-color: #818cf8; }
.lotto-tab-body { padding-top: 8px; }
.lotto-tab-body { padding-top: 8px; display: grid; gap: 24px; }
@media (max-width: 768px) {
.lotto-tabs { overflow-x: auto; }
.lotto-tabs button { white-space: nowrap; }