diff --git a/src/pages/subscription/Subscription.css b/src/pages/subscription/Subscription.css index ecb042a..c095b2e 100644 --- a/src/pages/subscription/Subscription.css +++ b/src/pages/subscription/Subscription.css @@ -1179,38 +1179,74 @@ } } -/* === 신규: 자치구 5티어 + district 뱃지 ============================== */ +/* === 신규: 자치구 5티어 + district 뱃지 (다크/네온 테마) =========== */ .sub-chip--district { - background: #f3f4f6; - color: #374151; - border-color: #d1d5db; + background: rgba(255, 255, 255, 0.04); + color: var(--text-dim); + border: 1px solid var(--line); + font-family: var(--font-body); + font-size: 11px; + letter-spacing: 0.02em; } .sub-chip--tier { + font-family: var(--font-display); font-weight: 700; + font-size: 11px; + letter-spacing: 0.05em; +} +/* 페이지 accent 컬러 팔레트와 정렬: rose / orange / mint / cyan / purple */ +.sub-chip--tier-S { + background: rgba(244, 63, 94, 0.14); + color: #fda4af; + border: 1px solid rgba(244, 63, 94, 0.4); + box-shadow: 0 0 12px rgba(244, 63, 94, 0.18); +} +.sub-chip--tier-A { + background: rgba(251, 146, 60, 0.14); + color: #fdba74; + border: 1px solid rgba(251, 146, 60, 0.4); + box-shadow: 0 0 12px rgba(251, 146, 60, 0.16); +} +.sub-chip--tier-B { + background: rgba(52, 211, 153, 0.14); + color: #6ee7b7; + border: 1px solid rgba(52, 211, 153, 0.4); + box-shadow: 0 0 12px rgba(52, 211, 153, 0.16); +} +.sub-chip--tier-C { + background: rgba(56, 189, 248, 0.14); + color: #7dd3fc; + border: 1px solid rgba(56, 189, 248, 0.4); + box-shadow: 0 0 12px rgba(56, 189, 248, 0.16); +} +.sub-chip--tier-D { + background: rgba(192, 132, 252, 0.14); + color: #d8b4fe; + border: 1px solid rgba(192, 132, 252, 0.4); + box-shadow: 0 0 12px rgba(192, 132, 252, 0.16); } -.sub-chip--tier-S { background: #fee2e2; color: #dc2626; border-color: #fca5a5; } -.sub-chip--tier-A { background: #fef3c7; color: #d97706; border-color: #fcd34d; } -.sub-chip--tier-B { background: #d1fae5; color: #059669; border-color: #6ee7b7; } -.sub-chip--tier-C { background: #dbeafe; color: #2563eb; border-color: #93c5fd; } -.sub-chip--tier-D { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; } -/* === 신규: DistrictTierEditor ====================================== */ +/* === 신규: DistrictTierEditor (다크/glass + rose accent) =========== */ .dte-pool { - border: 1px dashed var(--border-soft, #e5e7eb); - border-radius: 12px; - padding: 12px; - transition: background 0.15s, border-color 0.15s; + border: 1px dashed var(--line); + border-radius: var(--radius-md); + padding: 14px 16px; + background: var(--surface-card); + transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .dte-pool--over { - background: #f0f9ff; - border-color: #38bdf8; + background: rgba(244, 63, 94, 0.06); + border-color: rgba(244, 63, 94, 0.5); + border-style: solid; + box-shadow: 0 0 24px rgba(244, 63, 94, 0.12), inset 0 0 24px rgba(244, 63, 94, 0.06); } .dte-pool__title { - margin: 0 0 8px; - font-size: 12px; - color: var(--text-muted, #6b7280); + margin: 0 0 10px; + font-family: var(--font-display); + font-size: 10px; + color: var(--accent-subscription); text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.22em; } .dte-chips { display: flex; @@ -1220,111 +1256,139 @@ .dte-chip { cursor: grab; user-select: none; + background: var(--surface-raised); + color: var(--text); + border: 1px solid var(--line); + transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); } -.dte-chip:active { cursor: grabbing; } +.dte-chip:hover { + border-color: rgba(244, 63, 94, 0.4); + background: rgba(244, 63, 94, 0.08); + transform: translateY(-1px); + box-shadow: 0 0 12px rgba(244, 63, 94, 0.18); +} +.dte-chip:active { cursor: grabbing; transform: translateY(0); } .dte-chip__remove { background: transparent; border: 0; - color: inherit; - margin-left: 4px; + color: var(--text-muted); + margin-left: 6px; padding: 0 2px; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.6; + transition: color 0.15s, opacity 0.15s; } -.dte-chip__remove:hover { opacity: 1; } +.dte-chip__remove:hover { color: var(--accent-subscription); opacity: 1; } .dte-grid { display: grid; grid-template-columns: repeat(5, 1fr); - gap: 8px; + gap: 10px; } .dte-zone { - border: 1px solid var(--border-soft, #e5e7eb); - border-radius: 12px; - padding: 8px; - min-height: 120px; - transition: background 0.15s, border-color 0.15s; + border: 1px solid var(--line); + border-radius: var(--radius-md); + padding: 10px; + min-height: 140px; + background: var(--surface-card); + transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .dte-zone--over { - background: #f0f9ff; - border-color: #38bdf8; + background: rgba(244, 63, 94, 0.06); + border-color: rgba(244, 63, 94, 0.5); + box-shadow: 0 0 24px rgba(244, 63, 94, 0.12), inset 0 0 24px rgba(244, 63, 94, 0.06); } .dte-zone__head { display: flex; - align-items: center; + align-items: baseline; justify-content: space-between; - padding: 4px 8px; - border-radius: 6px; - font-weight: 700; - margin-bottom: 8px; + padding: 6px 10px; + border-radius: var(--radius-sm); + margin-bottom: 10px; + font-family: var(--font-display); + font-size: 12px; + letter-spacing: 0.08em; } .dte-zone__weight { - font-size: 11px; + font-size: 10px; font-weight: 500; - opacity: 0.8; + opacity: 0.7; + letter-spacing: 0.04em; } .dte-zone__chips { display: flex; flex-direction: column; - gap: 4px; + gap: 5px; } /* 모바일 read-only 뷰 */ .dte-row { display: grid; - grid-template-columns: 80px 1fr; + grid-template-columns: 96px 1fr; align-items: center; gap: 12px; - padding: 8px 0; - border-bottom: 1px solid var(--border-soft, #e5e7eb); + padding: 10px 0; + border-bottom: 1px solid var(--line-subtle); } .dte-row:last-of-type { border-bottom: 0; } .dte-row__list { - color: var(--text, #1f2937); - font-size: 14px; + color: var(--text); + font-size: 13px; + font-family: var(--font-body); + line-height: 1.5; } .dte-empty { - color: var(--text-muted, #6b7280); + color: var(--text-muted); font-style: italic; + font-size: 12px; } .dte-mobile-hint { - margin: 4px 0 0; - color: var(--text-muted, #6b7280); - font-size: 13px; + margin: 8px 0 0; + padding-top: 12px; + border-top: 1px dashed var(--line-subtle); + color: var(--text-dim); + font-size: 12px; + letter-spacing: 0.02em; text-align: center; } -/* === 신규: NotificationSettings ==================================== */ +/* === 신규: NotificationSettings (다크/rose glow) =================== */ .ns-row { display: flex; align-items: center; justify-content: space-between; - gap: 12px; + gap: 16px; } .ns-row--column { flex-direction: column; align-items: stretch; + gap: 8px; } .ns-row__label { - font-weight: 600; - color: var(--text, #1f2937); + font-family: var(--font-display); + font-size: 13px; + font-weight: 500; + color: var(--text-bright); + letter-spacing: 0.02em; } .ns-toggle { display: inline-flex; align-items: center; - gap: 8px; + gap: 10px; } .sub-toggle { appearance: none; - width: 40px; - height: 22px; - background: #d1d5db; - border-radius: 11px; + -webkit-appearance: none; + width: 44px; + height: 24px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid var(--line); + border-radius: 12px; position: relative; cursor: pointer; - transition: background 0.2s; + transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); margin: 0; } .sub-toggle::before { @@ -1334,66 +1398,130 @@ left: 2px; width: 18px; height: 18px; - background: #fff; + background: var(--text-dim); border-radius: 50%; - transition: transform 0.2s; + transition: transform 0.25s var(--ease-spring), background 0.25s var(--ease-out); } .sub-toggle:checked { - background: #10b981; + background: rgba(244, 63, 94, 0.25); + border-color: rgba(244, 63, 94, 0.5); + box-shadow: 0 0 16px rgba(244, 63, 94, 0.3); } .sub-toggle:checked::before { - transform: translateX(18px); + transform: translateX(20px); + background: var(--accent-subscription); + box-shadow: 0 0 8px rgba(244, 63, 94, 0.6); } .sub-toggle__label { - font-size: 12px; + font-family: var(--font-display); + font-size: 11px; font-weight: 600; - color: var(--text-muted, #6b7280); + color: var(--text-muted); + letter-spacing: 0.12em; } +input.sub-toggle:checked + .sub-toggle__label { color: var(--accent-subscription); } + .ns-slider { + -webkit-appearance: none; + appearance: none; width: 100%; - margin: 8px 0; + height: 4px; + background: rgba(255, 255, 255, 0.06); + border-radius: 2px; + outline: none; + margin: 6px 0 4px; + cursor: pointer; +} +.ns-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 18px; + height: 18px; + background: var(--accent-subscription); + border: 2px solid var(--bg-secondary); + border-radius: 50%; + cursor: pointer; + box-shadow: 0 0 12px rgba(244, 63, 94, 0.5); + transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); +} +.ns-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 18px rgba(244, 63, 94, 0.7); } +.ns-slider::-moz-range-thumb { + width: 18px; + height: 18px; + background: var(--accent-subscription); + border: 2px solid var(--bg-secondary); + border-radius: 50%; + cursor: pointer; + box-shadow: 0 0 12px rgba(244, 63, 94, 0.5); } .ns-slider:disabled { - opacity: 0.5; + opacity: 0.4; + cursor: not-allowed; } +.ns-slider:disabled::-webkit-slider-thumb { background: var(--text-muted); box-shadow: none; } .ns-scale { display: flex; justify-content: space-between; - font-size: 11px; - color: var(--text-muted, #6b7280); + font-family: var(--font-display); + font-size: 10px; + color: var(--text-muted); + letter-spacing: 0.05em; } .ns-hint { - margin: 0; - font-size: 13px; - color: var(--text-muted, #6b7280); - line-height: 1.5; + margin: 4px 0 0; + font-size: 12px; + color: var(--text-dim); + line-height: 1.6; + padding: 10px 12px; + background: var(--surface-card); + border-radius: var(--radius-sm); + border-left: 2px solid var(--accent-subscription); } -/* === 신규: 매칭 분석 섹션 ========================================== */ +/* === 신규: 매칭 분석 섹션 (다크/glass) ============================== */ .sub-match-analysis { display: grid; - gap: 12px; - padding: 16px; - background: var(--surface-soft, #f9fafb); - border-radius: 12px; + gap: 14px; + padding: 18px 20px; + background: var(--surface-card); + border: 1px solid var(--line); + border-radius: var(--radius-md); margin-top: 16px; + position: relative; + overflow: hidden; +} +.sub-match-analysis::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + background: linear-gradient(180deg, var(--accent-subscription), transparent); + opacity: 0.6; } .sub-match-analysis__score { - font-family: var(--font-display, system-ui); - font-size: 28px; + font-family: var(--font-display); + font-size: 32px; font-weight: 700; - color: var(--accent, #3b82f6); + color: var(--accent-subscription); + letter-spacing: -0.02em; + text-shadow: 0 0 24px rgba(244, 63, 94, 0.35); } .sub-match-analysis__reasons { margin: 0; padding-left: 18px; - color: var(--text, #1f2937); - font-size: 14px; - line-height: 1.7; + color: var(--text); + font-size: 13px; + line-height: 1.8; + font-family: var(--font-body); } .sub-match-analysis__reasons li { margin: 2px 0; } +.sub-match-analysis__reasons li::marker { + color: var(--accent-subscription); +} .sub-match-analysis__elig { display: flex; flex-wrap: wrap;