diff --git a/src/pages/blog/Blog.css b/src/pages/blog/Blog.css index 3346f08..119cd59 100644 --- a/src/pages/blog/Blog.css +++ b/src/pages/blog/Blog.css @@ -451,9 +451,8 @@ color: var(--muted); } -@media (max-width: 900px) { - .blog-header, - .blog-grid { +@media (max-width: 768px) { + .blog-header { grid-template-columns: 1fr; } @@ -469,6 +468,7 @@ .blog-list { display: none; + gap: 10px; } .blog-list.is-visible { @@ -498,22 +498,18 @@ .blog-article { width: 100%; + padding: 18px; } -} -@media (max-width: 768px) { .blog-header h1 { font-size: clamp(24px, 6vw, 32px); } .blog-grid { + grid-template-columns: 1fr; gap: 18px; } - .blog-list { - gap: 10px; - } - .blog-list__item-btn { padding: 14px; } @@ -526,10 +522,6 @@ font-size: 12px; } - .blog-article { - padding: 18px; - } - .blog-article__body h1 { font-size: 24px; } diff --git a/src/pages/home/Home.css b/src/pages/home/Home.css index 0a2d6ac..40e1c5c 100644 --- a/src/pages/home/Home.css +++ b/src/pages/home/Home.css @@ -727,7 +727,7 @@ /* ── Responsive ──────────────────────────────────────────────────────── */ -@media (max-width: 960px) { +@media (max-width: 1024px) { .home-hero { grid-template-columns: 1fr; } diff --git a/src/pages/lotto/Lotto.css b/src/pages/lotto/Lotto.css index a4d957f..940e225 100644 --- a/src/pages/lotto/Lotto.css +++ b/src/pages/lotto/Lotto.css @@ -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; } diff --git a/src/pages/travel/Travel.css b/src/pages/travel/Travel.css index 18c8bd4..3c7dacb 100644 --- a/src/pages/travel/Travel.css +++ b/src/pages/travel/Travel.css @@ -193,6 +193,10 @@ } @media (max-width: 768px) { + .tv-header { + grid-template-columns: 1fr; + } + .tv-map { height: 300px; } @@ -346,7 +350,7 @@ } } -@media (max-width: 640px) { +@media (max-width: 480px) { .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; @@ -966,13 +970,7 @@ /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ -@media (max-width: 900px) { - .tv-header { - grid-template-columns: 1fr; - } -} - -@media (max-width: 640px) { +@media (max-width: 480px) { .travel { gap: 28px; }