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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user