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

@@ -451,9 +451,8 @@
color: var(--muted); color: var(--muted);
} }
@media (max-width: 900px) { @media (max-width: 768px) {
.blog-header, .blog-header {
.blog-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -469,6 +468,7 @@
.blog-list { .blog-list {
display: none; display: none;
gap: 10px;
} }
.blog-list.is-visible { .blog-list.is-visible {
@@ -498,22 +498,18 @@
.blog-article { .blog-article {
width: 100%; width: 100%;
padding: 18px;
} }
}
@media (max-width: 768px) {
.blog-header h1 { .blog-header h1 {
font-size: clamp(24px, 6vw, 32px); font-size: clamp(24px, 6vw, 32px);
} }
.blog-grid { .blog-grid {
grid-template-columns: 1fr;
gap: 18px; gap: 18px;
} }
.blog-list {
gap: 10px;
}
.blog-list__item-btn { .blog-list__item-btn {
padding: 14px; padding: 14px;
} }
@@ -526,10 +522,6 @@
font-size: 12px; font-size: 12px;
} }
.blog-article {
padding: 18px;
}
.blog-article__body h1 { .blog-article__body h1 {
font-size: 24px; font-size: 24px;
} }

View File

@@ -727,7 +727,7 @@
/* ── Responsive ──────────────────────────────────────────────────────── */ /* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 960px) { @media (max-width: 1024px) {
.home-hero { .home-hero {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }

View File

@@ -1074,41 +1074,7 @@
/* ── 반응형 ─────────────────────────────────────────────────────────────── */ /* ── 반응형 ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) { @media (max-width: 480px) {
.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) {
.lotto-purchase-stats { .lotto-purchase-stats {
flex-direction: column; flex-direction: column;
} }
@@ -1157,6 +1123,34 @@
} }
@media (max-width: 768px) { @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 { .lotto-header h1 {
font-size: clamp(24px, 6vw, 32px); font-size: clamp(24px, 6vw, 32px);
} }
@@ -1191,6 +1185,7 @@
} }
.lotto-history__item { .lotto-history__item {
grid-template-columns: 1fr;
padding: 14px; padding: 14px;
gap: 12px; gap: 12px;
} }
@@ -1459,7 +1454,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
@media (max-width: 640px) { @media (max-width: 480px) {
.lotto-combined__method { .lotto-combined__method {
flex-direction: column; flex-direction: column;
align-items: flex-start; 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 { 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 { 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-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) { @media (max-width: 768px) {
.lotto-tabs { overflow-x: auto; } .lotto-tabs { overflow-x: auto; }
.lotto-tabs button { white-space: nowrap; } .lotto-tabs button { white-space: nowrap; }

View File

@@ -193,6 +193,10 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.tv-header {
grid-template-columns: 1fr;
}
.tv-map { .tv-map {
height: 300px; height: 300px;
} }
@@ -346,7 +350,7 @@
} }
} }
@media (max-width: 640px) { @media (max-width: 480px) {
.photo-mosaic { .photo-mosaic {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px; grid-auto-rows: 180px;
@@ -966,13 +970,7 @@
/* ═══════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════
RESPONSIVE RESPONSIVE
═══════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════ */
@media (max-width: 900px) { @media (max-width: 480px) {
.tv-header {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.travel { .travel {
gap: 28px; gap: 28px;
} }