v4.0.0: 덱 UX·i18n·썸네일 저장 개선 및 413 수정

즐겨찾기·홀드 미리보기·페이지 도움말·3개국어 번역을 추가하고, 덱 저장 시 썸네일을 1200px로 통일하며 Nginx/API 업로드 제한을 상향했다.

Co-authored-by: Cursor <cursoragent@cursor.com>

style/profile.css

@@ -15,19 +15,16 @@
     margin-bottom: 1.5rem;
 }
 
+.profile-header .page-title-row {
+    margin-bottom: 0;
+}
+
 .profile-header h1 {
-    margin: 0 0 0.5rem;
     font-size: 1.75rem;
     font-weight: 900;
     letter-spacing: -0.02em;
 }
 
-.profile-header p {
-    margin: 0;
-    font-size: 0.875rem;
-    color: #64748b;
-}
-
 .profile-card {
     background: #fff;
     border: 1px solid #e2e8f0;
@@ -163,12 +160,32 @@
 }
 
 .profile-section-title {
-    margin: 0 0 0.375rem;
-    font-size: 0.9375rem;
+    margin: 0;
+    font-size: 1rem;
     font-weight: 800;
     color: #0f172a;
 }
 
+.profile-section-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.profile-section-head .profile-section-title {
+    flex: 1;
+    min-width: 0;
+}
+
+.profile-settings-panel {
+    margin-bottom: 0.5rem;
+    padding: 0.25rem 1rem;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 1rem;
+}
+
 .profile-section-desc {
     margin: 0 0 1rem;
     font-size: 0.8125rem;
@@ -180,35 +197,64 @@
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
-    padding: 0.75rem 0;
+    padding: 0.875rem 0;
 }
 
 .profile-toggle-row + .profile-toggle-row {
-    border-top: 1px solid #f1f5f9;
+    border-top: 1px solid #e2e8f0;
+}
+
+.profile-toggle-text {
+    flex: 1;
+    min-width: 0;
+    cursor: pointer;
 }
 
 .profile-toggle-label {
+    display: block;
     font-size: 0.875rem;
-    font-weight: 600;
-    color: #334155;
+    font-weight: 700;
+    color: #0f172a;
 }
 
 .profile-toggle-hint {
+    display: block;
+    font-size: 0.75rem;
+    color: #64748b;
+    margin-top: 0.2rem;
+    line-height: 1.4;
+}
+
+.profile-toggle-wrap {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.profile-toggle-state {
+    min-width: 1.75rem;
     font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-align: right;
     color: #94a3b8;
-    margin-top: 0.125rem;
+}
+
+.profile-toggle-state.is-on {
+    color: #2563eb;
 }
 
 .profile-toggle {
     position: relative;
     flex-shrink: 0;
     display: inline-flex;
-    width: 2.75rem;
-    height: 1.5rem;
+    width: 3rem;
+    height: 1.625rem;
     align-items: center;
     border: none;
     border-radius: 9999px;
-    background: #e2e8f0;
+    background: #cbd5e1;
     cursor: pointer;
     transition: background 0.2s;
     padding: 0;
@@ -218,19 +264,37 @@
     background: #2563eb;
 }
 
+.profile-toggle:focus-visible {
+    outline: 2px solid #93c5fd;
+    outline-offset: 2px;
+}
+
 .profile-toggle-circle {
     display: inline-block;
-    width: 1rem;
-    height: 1rem;
+    width: 1.25rem;
+    height: 1.25rem;
     border-radius: 9999px;
     background: #fff;
-    transform: translateX(0.25rem);
+    transform: translateX(0.2rem);
     transition: transform 0.2s;
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
+    pointer-events: none;
 }
 
 .profile-toggle-circle.is-on {
-    transform: translateX(1.5rem);
+    transform: translateX(1.55rem);
+}
+
+.profile-prefs-notice {
+    margin: 0.5rem 0 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #059669;
+    min-height: 1.125rem;
+}
+
+.profile-prefs-notice:empty {
+    display: none;
 }
 
 .profile-btn-outline {