From 2cdecd918ebfbd5c644c8e1beb7fe0badc99be35 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 14:30:07 +0900
Subject: [PATCH] style(responsive): standardize Subscription, MusicStudio,
 BlogMarketing breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Subscription.css: 1100px → 1024px; merge 900px into 768px block
- MusicStudio.css: 960px → 1024px; both 640px blocks → 480px
- BlogMarketing.css: 640px → 480px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/blog-marketing/BlogMarketing.css | 2 +-
 src/pages/music/MusicStudio.css            | 6 +++---
 src/pages/subscription/Subscription.css    | 7 ++-----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/pages/blog-marketing/BlogMarketing.css b/src/pages/blog-marketing/BlogMarketing.css
index 0c2d97e..e597b18 100644
--- a/src/pages/blog-marketing/BlogMarketing.css
+++ b/src/pages/blog-marketing/BlogMarketing.css
@@ -125,7 +125,7 @@
 .bm-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,.25); font-size: 0.85rem; }
 
 /* ── 모바일 ───────────────────────────────────────────────────────────────── */
-@media (max-width: 640px) {
+@media (max-width: 480px) {
   .bm { padding: 16px 10px 60px; }
   .bm-header h1 { font-size: 1.2rem; }
   .bm-status { display: none; }
diff --git a/src/pages/music/MusicStudio.css b/src/pages/music/MusicStudio.css
index 1f2f59a..dfc1c51 100644
--- a/src/pages/music/MusicStudio.css
+++ b/src/pages/music/MusicStudio.css
@@ -317,7 +317,7 @@
     align-items: start;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1024px) {
     .ms-layout {
         grid-template-columns: 1fr;
     }
@@ -487,7 +487,7 @@
     gap: 8px;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 480px) {
     .ms-genre-grid {
         grid-template-columns: repeat(2, 1fr);
     }
@@ -1696,7 +1696,7 @@
 /* ═══════════════════════════════════════════════════
    MOBILE
 ═══════════════════════════════════════════════════ */
-@media (max-width: 640px) {
+@media (max-width: 480px) {
     .ms-header__title {
         font-size: clamp(44px, 14vw, 70px);
     }
diff --git a/src/pages/subscription/Subscription.css b/src/pages/subscription/Subscription.css
index ac9cce7..66fc202 100644
--- a/src/pages/subscription/Subscription.css
+++ b/src/pages/subscription/Subscription.css
@@ -1139,19 +1139,16 @@
 
 /* ── 반응형 ───────────────────────────────────────────────────────────── */
 
-@media (max-width: 1100px) {
+@media (max-width: 1024px) {
     .sub-list-layout { grid-template-columns: 1fr 360px; }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 768px) {
     .sub-list-layout { grid-template-columns: 1fr; }
     .sub-detail-panel { position: static; }
     .sub-profile-card { grid-template-columns: 1fr; }
     .sub-profile-card__right { flex-direction: column; align-items: flex-start; }
     .sub-profile-score__breakdown { min-width: 0; width: 100%; }
-}
-
-@media (max-width: 768px) {
     .sub-header { grid-template-columns: 1fr; }
     .sub-stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); }
     .sub-stat-item { border-right: none; border-bottom: 1px solid var(--line); }