diff --git a/src/pages/Dashboard/ContentCalendarContent.tsx b/src/pages/Dashboard/ContentCalendarContent.tsx index 93a1046..3e61fd5 100644 --- a/src/pages/Dashboard/ContentCalendarContent.tsx +++ b/src/pages/Dashboard/ContentCalendarContent.tsx @@ -402,7 +402,7 @@ const ContentCalendarContent: React.FC = ({ onNavig {summary.completed > 0 && (
- + {t('contentCalendar.completedCount', { count: summary.completed })}
@@ -410,7 +410,7 @@ const ContentCalendarContent: React.FC = ({ onNavig {summary.scheduled > 0 && (
- + {t('contentCalendar.scheduledCount', { count: summary.scheduled })}
@@ -418,7 +418,7 @@ const ContentCalendarContent: React.FC = ({ onNavig {summary.failed > 0 && (
- + {t('contentCalendar.failedCount', { count: summary.failed })}
@@ -541,13 +541,13 @@ const ContentCalendarContent: React.FC = ({ onNavig backgroundColor: statusColor(item.status as UploadStatus), flexShrink: 0, }} /> {t(statusLabelKey(item.status as UploadStatus))} {formatTime(item)} @@ -595,7 +595,7 @@ const ContentCalendarContent: React.FC = ({ onNavig style={{ height: 30, padding: '0 12px', borderRadius: 8, border: '1px solid #379599', backgroundColor: 'transparent', - fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 13, + fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 14, color: '#9bcacc', cursor: 'pointer', }} > @@ -608,7 +608,7 @@ const ContentCalendarContent: React.FC = ({ onNavig style={{ height: 30, padding: '0 12px', borderRadius: 8, border: 'none', backgroundColor: '#a65eff', - fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 13, + fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 14, color: '#ffffff', cursor: 'pointer', }} > @@ -703,17 +703,19 @@ const ContentCalendarContent: React.FC = ({ onNavig return (
-
-

- {t('contentCalendar.title')} -

-
+ {!embedded && ( +
+

+ {t('contentCalendar.title')} +

+
+ )}
= ({ onNavigate }) => { borderRadius: '8px', color: 'rgba(255,255,255,0.85)', padding: '5px 10px', - fontSize: '13px', + fontSize: '14px', cursor: 'pointer', minWidth: '160px', }} @@ -788,7 +788,7 @@ const DashboardContent: React.FC = ({ onNavigate }) => { display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 12px', cursor: 'pointer', - fontSize: '13px', + fontSize: '14px', background: acc.id === selectedAccountId ? 'rgba(255,255,255,0.08)' : 'transparent', color: 'rgba(255,255,255,0.85)', }} @@ -940,8 +940,8 @@ const DashboardContent: React.FC = ({ onNavigate }) => { onClick={() => setShowMockData(prev => !prev)} style={{ position: 'fixed', - bottom: '24px', - right: '24px', + top: '10px', + right: '5px', zIndex: 9999, display: 'flex', alignItems: 'center', diff --git a/src/styles/base-components.css b/src/styles/base-components.css index 2de187f..0d84026 100644 --- a/src/styles/base-components.css +++ b/src/styles/base-components.css @@ -921,8 +921,8 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 4px; - font-size: 11px; + gap: 6px; + font-size: 12px; font-weight: 700; color: var(--color-text-gray-400); background: none; @@ -930,6 +930,11 @@ cursor: pointer; } +.bottom-nav-item svg { + width: 24px; + height: 24px; +} + .bottom-nav-item.active { color: var(--color-mint); } diff --git a/src/styles/business-settings.css b/src/styles/business-settings.css index c904f50..4e96b8a 100644 --- a/src/styles/business-settings.css +++ b/src/styles/business-settings.css @@ -64,7 +64,7 @@ @media (min-width: 768px) { .settings-title { - font-size: 1.5rem; + font-size: 24px; } } @@ -76,7 +76,7 @@ .settings-description { color: var(--color-text-gray-400); - font-size: 9px; + font-size: 10px; font-weight: 300; line-height: 1.625; opacity: 0.8; @@ -124,7 +124,7 @@ .settings-card-title { color: var(--color-mint); - font-size: 9px; + font-size: 10px; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: 0.1em; @@ -234,7 +234,7 @@ .social-item-connect { color: var(--color-mint); - font-size: 9px; + font-size: 10px; font-weight: 700; background: none; border: none; @@ -321,7 +321,7 @@ } .footer-link { - font-size: 13px; + font-size: 14px; color: #379599; text-decoration: none; opacity: 0.8; @@ -333,7 +333,7 @@ } .footer-link-divider { - font-size: 13px; + font-size: 14px; color: #379599; opacity: 0.5; } diff --git a/src/styles/contents-social.css b/src/styles/contents-social.css index 5ec60f0..55f6d99 100644 --- a/src/styles/contents-social.css +++ b/src/styles/contents-social.css @@ -28,7 +28,7 @@ border: 1px solid rgba(155, 202, 204, 0.3); background: transparent; color: #9BCACC; - font-size: 13px; + font-size: 14px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; @@ -54,7 +54,7 @@ } .ado2-contents-count { - font-size: 17px; + font-size: 18px; font-weight: 500; color: #9BCACC; } @@ -281,7 +281,7 @@ border: none; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--color-text-white); - font-size: 15px; + font-size: 16px; cursor: pointer; text-align: left; } @@ -321,7 +321,7 @@ border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: var(--color-text-white); - font-size: 13px; + font-size: 14px; cursor: pointer; white-space: nowrap; } @@ -453,7 +453,7 @@ align-items: center; justify-content: center; gap: 10px; - font-size: 15px; + font-size: 16px; font-weight: 500; color: #9BCACC; white-space: nowrap; @@ -963,7 +963,7 @@ background: #1A8F93; border: none; color: #fff; - font-size: 11px; + font-size: 12px; cursor: pointer; display: flex; align-items: center; @@ -979,7 +979,7 @@ border-radius: 8px; padding: 8px 12px; color: #fff; - font-size: 13px; + font-size: 14px; outline: none; } @@ -993,7 +993,7 @@ /* 댓글 닉네임 */ .video-detail-comment-nickname { - font-size: 13px; + font-size: 14px; font-weight: 600; color: #9BCACC; display: block; @@ -1009,7 +1009,7 @@ } .video-detail-comments-title { - font-size: 17px; + font-size: 18px; font-weight: 600; margin: 0; } @@ -1463,31 +1463,31 @@ background-color: rgba(148, 251, 224, 0.15); color: #94FBE0; border-radius: 9999px; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; } .social-connect-title { - font-size: 1.5rem; + font-size: 24px; font-weight: 600; color: #FFFFFF; margin-bottom: 0.75rem; } .social-connect-message { - font-size: 1rem; + font-size: 16px; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.5rem; } .social-connect-detail { - font-size: 0.875rem; + font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.5rem; } .social-connect-countdown { - font-size: 0.875rem; + font-size: 14px; color: #94FBE0; margin-bottom: 1rem; } @@ -1502,7 +1502,7 @@ width: 100%; padding: 0.875rem 1.5rem; border-radius: 9999px; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -1590,7 +1590,7 @@ } .myinfo-title { - font-size: 1.75rem; + font-size: 28px; font-weight: 700; color: #FFFFFF; margin-bottom: 1.5rem; @@ -1599,7 +1599,6 @@ /* 탭 네비게이션 */ .myinfo-tabs { display: flex; - gap: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 2rem; } @@ -1609,7 +1608,7 @@ background: none; border: none; color: rgba(255, 255, 255, 0.5); - font-size: 0.9rem; + font-size: 16px; font-weight: 500; cursor: pointer; position: relative; @@ -1648,7 +1647,7 @@ } .myinfo-section-title { - font-size: 0.875rem; + font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; @@ -1657,7 +1656,7 @@ .myinfo-placeholder { color: rgba(255, 255, 255, 0.5); - font-size: 0.9rem; + font-size: 14px; padding: 2rem; text-align: center; background: rgba(255, 255, 255, 0.03); @@ -1683,20 +1682,20 @@ .myinfo-credits-label { color: rgba(255, 255, 255, 0.6); - font-size: 0.95rem; + font-size: 16px; } .myinfo-credits-value { color: #a6ffea; - font-size: 1.4rem; + font-size: 22px; font-weight: 700; letter-spacing: 0.02em; } .myinfo-credits-desc { color: rgba(255, 255, 255, 0.4); - font-size: 0.85rem; + font-size: 14px; margin-right: 5px; flex: 1; } @@ -1707,7 +1706,7 @@ border: none; border-radius: 8px; color: #002224; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; @@ -1745,7 +1744,7 @@ .myinfo-popup-title { color: #fff; - font-size: 1.05rem; + font-size: 16px; font-weight: 700; margin: 0 0 0.5rem; align-self: flex-start; @@ -1753,7 +1752,7 @@ .myinfo-popup-message { color: #fff; - font-size: 1.1rem; + font-size: 18px; font-weight: 600; text-align: center; margin: 0; @@ -1768,7 +1767,7 @@ .myinfo-popup-label { color: rgba(255, 255, 255, 0.6); - font-size: 0.85rem; + font-size: 14px; } .myinfo-popup-counter { @@ -1784,7 +1783,7 @@ background: rgba(255, 255, 255, 0.08); border: none; color: #fff; - font-size: 1.25rem; + font-size: 20px; width: 48px; min-width: 48px; height: 44px; @@ -1802,7 +1801,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #fff; - font-size: 0.95rem; + font-size: 16px; padding: 0.6rem 0.875rem; outline: none; width: 100%; @@ -1834,7 +1833,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #fff; - font-size: 0.9rem; + font-size: 14px; padding: 0.6rem 0.875rem; outline: none; resize: none; @@ -1861,7 +1860,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 0.6rem 1.25rem; - font-size: 0.9rem; + font-size: 14px; cursor: pointer; transition: background 0.2s; } @@ -1876,7 +1875,7 @@ border: none; border-radius: 8px; padding: 0.6rem 1.5rem; - font-size: 0.9rem; + font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; @@ -1900,14 +1899,14 @@ } .myinfo-business-empty-title { - font-size: 1.1rem; + font-size: 18px; font-weight: 600; color: #FFFFFF; margin-bottom: 0.5rem; } .myinfo-business-empty-desc { - font-size: 0.85rem; + font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.25rem; } @@ -1925,7 +1924,7 @@ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #FFFFFF; - font-size: 0.9rem; + font-size: 14px; } .myinfo-business-input::placeholder { @@ -1943,7 +1942,7 @@ border: none; border-radius: 8px; color: #002224; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; @@ -1971,7 +1970,7 @@ border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; @@ -2054,13 +2053,13 @@ } .myinfo-connected-channel { - font-size: 0.9rem; + font-size: 14px; font-weight: 600; color: #FFFFFF; } .myinfo-connected-platform { - font-size: 0.7rem; + font-size: 12px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; @@ -2076,7 +2075,7 @@ display: flex; align-items: center; gap: 0.375rem; - font-size: 0.75rem; + font-size: 12px; font-weight: 500; color: #a6ffea; } @@ -2087,7 +2086,7 @@ border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; color: rgba(255, 255, 255, 0.6); - font-size: 0.75rem; + font-size: 12px; cursor: pointer; transition: all 0.2s ease; } @@ -2099,7 +2098,7 @@ } .myinfo-loading { - font-size: 0.85rem; + font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center; padding: 0.5rem; @@ -2113,7 +2112,7 @@ } .myinfo-title { - font-size: 1.5rem; + font-size: 24px; } .myinfo-tabs { @@ -2129,7 +2128,7 @@ .myinfo-tab { white-space: nowrap; padding: 0.625rem 0.75rem; - font-size: 0.8rem; + font-size: 14px; } .myinfo-business-input-row { diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css index 28cbe4f..2b090c8 100644 --- a/src/styles/dashboard.css +++ b/src/styles/dashboard.css @@ -232,7 +232,7 @@ color: var(--color-bg-dark); padding: 0.125rem 0.5rem; border-radius: var(--radius-md); - font-size: 9px; + font-size: 10px; font-weight: 700; box-shadow: 0 20px 25px -5px rgba(166, 255, 234, 0.2); } @@ -269,7 +269,7 @@ .chart-xaxis { margin-top: 0.75rem; padding: 0 1rem; - font-size: 9px; + font-size: 10px; padding-top: 0.75rem; } } @@ -601,7 +601,7 @@ display: flex; align-items: center; gap: 0.25rem; - font-size: 9px; + font-size: 10px; font-weight: 500; } @@ -699,7 +699,7 @@ @media (min-width: 640px) { .yoy-chart-xaxis { - font-size: 9px; + font-size: 10px; margin-top: 0.75rem; } } diff --git a/src/styles/generation-flow.css b/src/styles/generation-flow.css index cc8bbdf..ef8fcbc 100644 --- a/src/styles/generation-flow.css +++ b/src/styles/generation-flow.css @@ -4,7 +4,7 @@ /* Completion Page Title */ .completion-title { - font-size: 1.75rem; + font-size: 28px; font-weight: 600; color: #E5F1F2; line-height: 1.19; @@ -16,7 +16,7 @@ @media (min-width: 768px) { .completion-title { - font-size: 2.5rem; + font-size: 40px; margin-bottom: 2rem; } } @@ -185,7 +185,7 @@ } .video-overlay-title { - font-size: 1.25rem; + font-size: 20px; font-weight: 800; color: #FFFFFF; line-height: 1.3; @@ -196,7 +196,7 @@ } .video-overlay-logo { - font-size: 0.375rem; + font-size: 6px; font-weight: 400; color: rgba(255, 255, 255, 0.6); line-height: 1.3; @@ -225,7 +225,7 @@ } .ai-optimization-title { - font-size: 0.875rem; + font-size: 14px; font-weight: 600; color: #94FBE0; line-height: 1.19; @@ -264,7 +264,7 @@ } .ai-tag-text { - font-size: 0.875rem; + font-size: 14px; font-weight: 400; color: #E5F1F2; line-height: 1.19; @@ -336,7 +336,7 @@ } .completion-social-name { - font-size: 0.875rem; + font-size: 14px; font-weight: 400; color: #FFFFFF; line-height: 1.19; @@ -344,7 +344,7 @@ } .completion-social-email { - font-size: 0.75rem; + font-size: 12px; font-weight: 400; color: #94FBE0; line-height: 1.19; @@ -359,7 +359,7 @@ } .completion-social-channel { - font-size: 0.75rem; + font-size: 12px; font-weight: 400; color: #94FBE0; line-height: 1.19; @@ -377,14 +377,14 @@ } .completion-social-channel-name { - font-size: 0.875rem; + font-size: 14px; font-weight: 600; color: #FFFFFF; line-height: 1.2; } .completion-social-platform { - font-size: 0.7rem; + font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.5); line-height: 1.2; @@ -405,7 +405,7 @@ /* Social Card Status */ .completion-social-status { - font-size: 0.75rem; + font-size: 12px; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 9999px; @@ -438,7 +438,7 @@ } .completion-social-disconnect { - font-size: 0.75rem; + font-size: 12px; font-weight: 500; color: #f87171; background: transparent; @@ -461,7 +461,7 @@ border: none; border-radius: var(--radius-full); color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition-normal); @@ -486,7 +486,7 @@ border: 1px solid #AE72F9; border-radius: var(--radius-full); color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition-normal); @@ -531,7 +531,7 @@ gap: 4px; background-color: #462E64; color: #CFABFB; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; padding: 0 1.25rem 0 0.5rem; height: 36px; @@ -1262,7 +1262,7 @@ .report-content { color: #CEE5E6; font-family: 'Pretendard', sans-serif; - font-size: 15px; + font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.006em; @@ -1270,7 +1270,7 @@ @media (min-width: 768px) { .report-content { - font-size: 17px; + font-size: 18px; line-height: 1.45; } } @@ -1385,7 +1385,7 @@ .selling-point-content p { font-family: 'Pretendard', sans-serif; - font-size: 15px; + font-size: 16px; font-weight: 500; color: #CEE5E6; letter-spacing: -0.006em; @@ -1395,7 +1395,7 @@ @media (min-width: 768px) { .selling-point-content p { - font-size: 17px; + font-size: 18px; line-height: 1; } } @@ -1419,7 +1419,7 @@ background-color: #034A4D; border-radius: 999px; font-family: 'Pretendard', sans-serif; - font-size: 15px; + font-size: 16px; font-weight: 500; color: #CEE5E6; letter-spacing: -0.006em; @@ -1428,7 +1428,7 @@ @media (min-width: 768px) { .feature-tag { - font-size: 17px; + font-size: 18px; } } @@ -1665,7 +1665,7 @@ } .bi-usp-category { - font-size: 13px; + font-size: 14px; font-weight: 500; color: #6AB0B3; text-transform: uppercase; @@ -1678,7 +1678,7 @@ } .bi-usp-description { - font-size: 15px; + font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.7); line-height: 1.5; @@ -1694,7 +1694,7 @@ } .bi-usp-english-category { - font-size: 13px; + font-size: 14px; font-weight: 500; color: #6AB0B3; text-transform: uppercase; @@ -1749,7 +1749,7 @@ } .bi-chart-sublabel { - font-size: 13px; + font-size: 14px; fill: rgba(255, 255, 255, 0.5); font-weight: 500; } @@ -1885,7 +1885,7 @@ } .bi2-subtitle { - font-size: 21px; + font-size: 22px; font-weight: 400; color: #E5F1F2; letter-spacing: -0.006em; @@ -2357,7 +2357,7 @@ color: var(--Color-white, #FFF); text-align: center; font-family: Pretendard; - font-size: 45px; + font-size: 46px; font-style: normal; font-weight: 600; line-height: normal; @@ -2432,7 +2432,7 @@ border: none; background: none; font-family: inherit; - font-size: 13.5px; + font-size: 14px; font-weight: 600; letter-spacing: -0.006em; color: var(--color-text-gray-400); @@ -2491,7 +2491,7 @@ border: 1px dashed var(--color-border-white-10); border-radius: 16px; text-align: center; - font-size: 13px; + font-size: 14px; color: var(--color-text-gray-400); } @@ -2801,12 +2801,6 @@ box-sizing: border-box; } -@media (max-width: 1100px) { - .wizard-stepper { - margin: 50px auto 0; - } -} - /* 노드 셀: 노드 너비와 동일한 2rem 고정. 라벨은 이 밖으로 넘침 */ .wizard-step { flex: none; diff --git a/src/styles/landing.css b/src/styles/landing.css index 62d3b01..910ee65 100644 --- a/src/styles/landing.css +++ b/src/styles/landing.css @@ -384,7 +384,7 @@ width: 100%; gap: 12px; color: var(--color-text-gray-300); - font-size: 13px; + font-size: 14px; } .hero-divider::before, @@ -581,7 +581,7 @@ } .welcome-title { - font-size: 1.5rem; + font-size: 24px; font-weight: 600; margin-bottom: 1rem; color: #E5F1F2; @@ -591,13 +591,13 @@ @media (min-width: 640px) { .welcome-title { - font-size: 2rem; + font-size: 32px; } } @media (min-width: 768px) { .welcome-title { - font-size: 2.5rem; + font-size: 40px; } } @@ -617,7 +617,7 @@ @media (min-width: 768px) { .welcome-subtitle { - font-size: 1.5rem; + font-size: 24px; } } @@ -833,7 +833,7 @@ display: flex; align-items: center; justify-content: center; - font-size: 1.25rem; + font-size: 20px; font-weight: 600; color: #9BCACC; letter-spacing: -0.006em; @@ -850,7 +850,7 @@ @media (min-width: 768px) { .feature-title { - font-size: 1.5rem; + font-size: 24px; } } @@ -1425,18 +1425,18 @@ @media (min-width: 768px) { .login-title { - font-size: 3rem; + font-size: 48px; } } @media (min-width: 1024px) { .login-title { - font-size: 3.75rem; + font-size: 60px; } } .login-subtitle { - font-size: 9px; + font-size: 10px; font-weight: 300; margin-bottom: 1.5rem; opacity: 0.8; @@ -1509,7 +1509,7 @@ } .loading-title { - font-size: 2rem; + font-size: 32px; font-weight: 700; letter-spacing: -0.006em; line-height: 1.19; diff --git a/src/styles/modals-overlays.css b/src/styles/modals-overlays.css index 10b70ab..25ea320 100644 --- a/src/styles/modals-overlays.css +++ b/src/styles/modals-overlays.css @@ -138,7 +138,7 @@ background: rgba(166, 130, 255, 0.15); border: 1px solid rgba(166, 130, 255, 0.3); border-radius: 6px; - font-size: 0.75rem; + font-size: 12px; font-weight: 500; color: #a682ff; } @@ -153,7 +153,7 @@ border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 6px; color: rgba(255, 255, 255, 0.4); - font-size: 1rem; + font-size: 16px; cursor: pointer; } */ @@ -281,7 +281,7 @@ position: absolute; right: 0; top: 0; - font-size: 0.7rem; + font-size: 12px; color: rgba(255, 255, 255, 0.4); } @@ -290,11 +290,11 @@ padding: 1rem; text-align: center; color: rgba(255, 255, 255, 0.5); - font-size: 0.85rem; + font-size: 14px; } .social-posting-no-accounts-hint { - font-size: 0.75rem; + font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 0.25rem; } @@ -355,7 +355,7 @@ } .mini-calendar-title { - font-size: 0.85rem; + font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.9); } @@ -364,7 +364,7 @@ background: none; border: none; color: rgba(255, 255, 255, 0.6); - font-size: 1.2rem; + font-size: 20px; cursor: pointer; padding: 2px 8px; border-radius: 6px; @@ -385,7 +385,7 @@ .mini-calendar-day-label { text-align: center; - font-size: 0.72rem; + font-size: 12px; color: rgba(255, 255, 255, 0.4); padding: 4px 0; } @@ -394,7 +394,7 @@ background: none; border: none; color: rgba(255, 255, 255, 0.85); - font-size: 0.78rem; + font-size: 12px; cursor: pointer; padding: 5px 2px; border-radius: 6px; @@ -435,7 +435,7 @@ } .schedule-time-label { - font-size: 0.8rem; + font-size: 12px; color: rgba(255, 255, 255, 0.6); font-weight: 500; } @@ -451,7 +451,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: rgba(255, 255, 255, 0.9); - font-size: 0.85rem; + font-size: 14px; padding: 8px 10px; cursor: pointer; outline: none; @@ -468,7 +468,7 @@ } .schedule-datetime-preview { - font-size: 0.8rem; + font-size: 12px; color: #a65eff; font-weight: 600; margin: 0; @@ -485,7 +485,7 @@ } .social-posting-footer-note { - font-size: 0.75rem; + font-size: 12px; color: rgba(255, 255, 255, 0.5); margin: 0; } @@ -503,7 +503,7 @@ .social-posting-btn { padding: 0.625rem 1.25rem; border-radius: 8px; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; @@ -619,7 +619,7 @@ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-family: 'Pretendard', sans-serif; cursor: pointer; display: flex; @@ -683,7 +683,7 @@ background: transparent; border: none; color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-family: 'Pretendard', sans-serif; cursor: pointer; display: flex; @@ -744,7 +744,7 @@ } .upload-progress-title { - font-size: 1.125rem; + font-size: 18px; font-weight: 600; color: #FFFFFF; margin: 0; @@ -835,7 +835,7 @@ /* Status Text */ .upload-progress-status { - font-size: 1.25rem; + font-size: 20px; font-weight: 600; color: #FFFFFF; margin: 0; @@ -879,7 +879,7 @@ display: block; text-align: center; margin-top: 0.5rem; - font-size: 0.875rem; + font-size: 14px; color: rgba(255, 255, 255, 0.7); } @@ -905,13 +905,13 @@ } .upload-progress-label { - font-size: 0.8125rem; + font-size: 14px; color: rgba(255, 255, 255, 0.5); flex-shrink: 0; } .upload-progress-value { - font-size: 0.875rem; + font-size: 14px; color: #FFFFFF; text-align: right; word-break: break-word; @@ -928,7 +928,7 @@ .upload-progress-error p { margin: 0; - font-size: 0.875rem; + font-size: 14px; color: #f87171; text-align: center; } @@ -941,7 +941,7 @@ padding: 0.75rem 1.5rem; background: #f87171; color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 8px; @@ -968,7 +968,7 @@ } .upload-progress-calendar-link { - font-size: 0.8rem; + font-size: 12px; color: rgba(255, 255, 255, 0.45); cursor: pointer; text-decoration: underline; @@ -982,7 +982,7 @@ .upload-progress-btn { padding: 0.75rem 2rem; border-radius: 8px; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; @@ -1001,7 +1001,7 @@ .upload-progress-note { margin: 0; - font-size: 0.8125rem; + font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center; } @@ -1068,7 +1068,7 @@ } .manual-modal-subtitle { - font-size: 15px; + font-size: 16px; font-weight: 400; color: rgba(155, 202, 204, 0.7); padding: 15px 20px 0; diff --git a/src/styles/ssulbox-castad.css b/src/styles/ssulbox-castad.css index 3c840f9..7423f29 100644 --- a/src/styles/ssulbox-castad.css +++ b/src/styles/ssulbox-castad.css @@ -121,13 +121,13 @@ .ssul-scn__name { position: relative; - font-size: 13.5px; + font-size: 14px; font-weight: 700; } .ssul-scn__desc { position: relative; - font-size: 11px; + font-size: 12px; line-height: 1.4; color: var(--color-text-gray-400); } @@ -170,7 +170,7 @@ background: var(--color-bg-card-inner); color: var(--color-text-white); font-family: inherit; - font-size: 13px; + font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity var(--transition-normal); @@ -224,12 +224,12 @@ } .ssul-places b { - font-size: 13px; + font-size: 14px; font-weight: 700; } .ssul-places span { - font-size: 11.5px; + font-size: 12px; color: var(--color-text-gray-400); } @@ -254,12 +254,12 @@ } .ssul-picked__body b { - font-size: 13px; + font-size: 14px; font-weight: 700; } .ssul-picked__body span { - font-size: 11.5px; + font-size: 12px; color: var(--color-text-gray-400); } @@ -318,7 +318,7 @@ justify-content: space-between; width: 100%; padding: 10px 4px; - font-size: 12.5px; + font-size: 12px; color: var(--color-text-gray-400); } @@ -331,7 +331,7 @@ } .ssul-create__coin { - font-size: 13px; + font-size: 14px; line-height: 1; } @@ -346,7 +346,7 @@ background: linear-gradient(90deg, #ff8a5c, var(--color-ssul-accent)); color: #1a1200; font-family: inherit; - font-size: 15px; + font-size: 16px; font-weight: 800; cursor: pointer; transition: filter var(--transition-normal), box-shadow var(--transition-normal); @@ -381,18 +381,18 @@ margin: auto; padding: 48px 20px; text-align: center; + gap: 10px; color: var(--color-text-white); } .ssul-making__scenario { - font-size: 13px; + font-size: 20px; font-weight: 700; - margin-bottom: 14px; } .ssul-making__title { margin: 0 0 24px; - font-size: 19px; + font-size: 24px; font-weight: 700; letter-spacing: -0.015em; } @@ -408,8 +408,8 @@ .ssul-making__spinner { position: relative; flex: none; - width: 104px; - height: 104px; + width: 150px; + height: 150px; margin: 4px 0 26px; } @@ -439,6 +439,7 @@ width: 100%; height: 6px; border-radius: 999px; + margin-top: 20px; background: var(--color-bg-card-inner); overflow: hidden; } @@ -455,7 +456,7 @@ justify-content: space-between; width: 100%; margin-top: 10px; - font-size: 12.5px; + font-size: 16px; color: var(--color-text-gray-300); } @@ -466,14 +467,14 @@ .ssul-making__desc { margin: 22px 0 0; - font-size: 12.5px; + font-size: 14px; line-height: 1.6; color: var(--color-text-gray-400); } .ssul-making__refund { margin: 8px 0 0; - font-size: 12.5px; + font-size: 14px; color: var(--color-mint); } @@ -485,7 +486,7 @@ background: var(--color-bg-card); color: var(--color-text-white); font-family: inherit; - font-size: 13.5px; + font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color var(--transition-normal); diff --git a/src/styles/ssulbox.css b/src/styles/ssulbox.css index ac77171..5509c1d 100644 --- a/src/styles/ssulbox.css +++ b/src/styles/ssulbox.css @@ -110,18 +110,18 @@ .ssul-scope .card .meta {position:absolute;left:9px;right:9px;bottom:8px;z-index:2} -.ssul-scope .card .title {color:#fff;font-size:12.5px;font-weight:700;line-height:1.28; +.ssul-scope .card .title {color:#fff;font-size:12px;font-weight:700;line-height:1.28; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; text-shadow:0 1px 3px rgba(0,0,0,.5);} -.ssul-scope .card .sub {display:flex;align-items:center;gap:4px;margin-top:5px;color:rgba(255,255,255,.9);font-size:11px;font-variant-numeric:tabular-nums} +.ssul-scope .card .sub {display:flex;align-items:center;gap:4px;margin-top:5px;color:rgba(255,255,255,.9);font-size:12px;font-variant-numeric:tabular-nums} .ssul-scope .card .sub svg {width:12px;height:12px;fill:currentColor} .ssul-scope .badge {position:absolute;top:8px;left:8px;z-index:2; display:inline-flex;align-items:center;gap:4px; padding:3px 8px;border-radius:999px; - font-size:10.5px;font-weight:700;color:#fff; + font-size:10px;font-weight:700;color:#fff; background:rgba(0,0,0,.32);backdrop-filter:blur(3px);} .ssul-scope .badge i {width:7px;height:7px;border-radius:50%;display:inline-block} @@ -152,7 +152,7 @@ .ssul-scope .chips::-webkit-scrollbar {display:none} .ssul-scope .chip {flex:0 0 auto;padding:7px 13px;border-radius:999px;background:var(--surface-2); - font-size:13px;font-weight:600;color:var(--muted);border:1px solid transparent;transition:.15s} + font-size:14px;font-weight:600;color:var(--muted);border:1px solid transparent;transition:.15s} .ssul-scope .chip[aria-pressed="true"] {background:var(--fg);color:var(--bg)} @@ -179,7 +179,7 @@ .ssul-scope .bio .name {font-weight:700;font-size:14px} -.ssul-scope .bio .bio-txt {font-size:13px;color:var(--fg);margin-top:3px;line-height:1.45;white-space:pre-wrap} +.ssul-scope .bio .bio-txt {font-size:14px;color:var(--fg);margin-top:3px;line-height:1.45;white-space:pre-wrap} .ssul-scope .bio .bio-txt.muted {color:var(--faint)} @@ -187,7 +187,7 @@ .ssul-scope .pe-av-btns {display:flex;gap:8px} -.ssul-scope .pe-av-btns button {font-size:13px;font-weight:700;color:var(--samgukji);padding:6px 12px;border-radius:9px;background:var(--surface-2)} +.ssul-scope .pe-av-btns button {font-size:14px;font-weight:700;color:var(--samgukji);padding:6px 12px;border-radius:9px;background:var(--surface-2)} .ssul-scope .pe-av-btns button.rm {color:var(--muted)} @@ -202,18 +202,18 @@ .ssul-scope .token-card .tk-left {display:flex;flex-direction:column;gap:1px;min-width:0} -.ssul-scope .token-card .tk-left span {font-size:11.5px;color:var(--muted);font-weight:600} +.ssul-scope .token-card .tk-left span {font-size:12px;color:var(--muted);font-weight:600} -.ssul-scope .token-card .tk-left b {font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15} +.ssul-scope .token-card .tk-left b {font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15} -.ssul-scope .token-card .tk-left em {font-size:11px;color:var(--muted);font-style:normal;margin-top:2px} +.ssul-scope .token-card .tk-left em {font-size:12px;color:var(--muted);font-style:normal;margin-top:2px} -.ssul-scope .token-card .tk-btn {flex:0 0 auto;padding:11px 20px;border-radius:11px;color:#fff;font-weight:800;font-size:13px; +.ssul-scope .token-card .tk-btn {flex:0 0 auto;padding:11px 20px;border-radius:11px;color:#fff;font-weight:800;font-size:14px; background:var(--ig);box-shadow:0 4px 12px rgba(220,39,67,.28)} .ssul-scope .pf-actions {display:flex;gap:8px;margin:12px 0 4px} -.ssul-scope .pf-actions button {flex:1;padding:8px;border-radius:9px;background:var(--surface-2);font-size:13px;font-weight:700} +.ssul-scope .pf-actions button {flex:1;padding:8px;border-radius:9px;background:var(--surface-2);font-size:14px;font-weight:700} .ssul-scope .pf-tabs {display:flex;border-top:1px solid var(--border);margin-top:12px} @@ -241,13 +241,13 @@ .ssul-scope .sheet-h {display:flex;align-items:center;justify-content:space-between;padding:6px 16px 10px;border-bottom:1px solid var(--border)} -.ssul-scope .sheet-h h3 {font-size:17px;font-weight:800} +.ssul-scope .sheet-h h3 {font-size:18px;font-weight:800} .ssul-scope .sheet-h button {color:var(--muted);font-size:22px;line-height:1;padding:4px} .ssul-scope .sheet-body {overflow-y:auto;padding:16px} -.ssul-scope .step-label {font-size:13px;font-weight:700;color:var(--muted);margin:2px 2px 10px} +.ssul-scope .step-label {font-size:14px;font-weight:700;color:var(--muted);margin:2px 2px 10px} .ssul-scope .step-label b {color:var(--fg)} @@ -265,9 +265,9 @@ .ssul-scope .scn .tx {flex:1} -.ssul-scope .scn .tx .t {font-weight:800;font-size:15px} +.ssul-scope .scn .tx .t {font-weight:800;font-size:16px} -.ssul-scope .scn .tx .d {font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4} +.ssul-scope .scn .tx .d {font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4} .ssul-scope .scn .ck {width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex:0 0 auto;display:grid;place-items:center} @@ -277,7 +277,7 @@ .ssul-scope .field {margin-top:20px} -.ssul-scope .field > label {display:block;font-size:13px;font-weight:700;margin-bottom:8px} +.ssul-scope .field > label {display:block;font-size:14px;font-weight:700;margin-bottom:8px} .ssul-scope .input {display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:12px;padding:12px 14px;border:1.5px solid transparent} @@ -285,15 +285,15 @@ .ssul-scope .input svg {width:17px;height:17px;color:var(--muted);flex:0 0 auto} -.ssul-scope .input input {flex:1;background:none;border:none;outline:none;color:var(--fg);font-size:15px} +.ssul-scope .input input {flex:1;background:none;border:none;outline:none;color:var(--fg);font-size:16px} .ssul-scope .input input::placeholder {color:var(--faint)} -.ssul-scope .hint {font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5;padding:0 2px} +.ssul-scope .hint {font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5;padding:0 2px} .ssul-scope .sheet-foot {padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)} -.ssul-scope .cta {width:100%;padding:15px;border-radius:14px;font-size:15px;font-weight:800;color:#fff;background:var(--ig); +.ssul-scope .cta {width:100%;padding:15px;border-radius:14px;font-size:16px;font-weight:800;color:#fff;background:var(--ig); transition:.15s;box-shadow:0 6px 18px rgba(220,39,67,.32)} .ssul-scope .cta:disabled {background:var(--surface-2);color:var(--faint);box-shadow:none;cursor:not-allowed} @@ -302,9 +302,9 @@ @keyframes sp{to{transform:rotate(360deg)}} -.ssul-scope .making h4 {font-size:17px;font-weight:800} +.ssul-scope .making h4 {font-size:18px;font-weight:800} -.ssul-scope .making p {font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6} +.ssul-scope .making p {font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6} .ssul-scope .making .prog {margin-top:22px;display:flex;align-items:center;gap:12px} @@ -353,7 +353,7 @@ .ssul-scope .vrail {position:absolute;right:10px;bottom:120px;z-index:3;display:flex;flex-direction:column;gap:20px;align-items:center} -.ssul-scope .vrail button {color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums} +.ssul-scope .vrail button {color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums} .ssul-scope .vrail svg {width:29px;height:29px;fill:#fff} @@ -361,14 +361,14 @@ padding-bottom:calc(56px + env(safe-area-inset-bottom)); background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)} -.ssul-scope .vbottom .vt {color:#fff;font-weight:800;font-size:17px;line-height:1.3} +.ssul-scope .vbottom .vt {color:#fff;font-weight:800;font-size:18px;line-height:1.3} -.ssul-scope .vbottom .vn {color:rgba(255,255,255,.86);font-size:13px;margin-top:8px;line-height:1.5; +.ssul-scope .vbottom .vn {color:rgba(255,255,255,.86);font-size:14px;margin-top:8px;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ssul-scope .vbottom .vbadge {margin-bottom:10px} -.ssul-scope .note-pill {display:inline-block;margin-top:12px;font-size:11px;color:rgba(255,255,255,.7); +.ssul-scope .note-pill {display:inline-block;margin-top:12px;font-size:12px;color:rgba(255,255,255,.7); background:rgba(255,255,255,.12);padding:5px 10px;border-radius:8px} @media (min-width:860px) { @@ -401,7 +401,7 @@ .ssul-scope .cmts-list {flex:1;overflow-y:auto;padding:6px 16px} -.ssul-scope .cmts-empty {color:var(--muted);font-size:13px;text-align:center;padding:30px 0} +.ssul-scope .cmts-empty {color:var(--muted);font-size:14px;text-align:center;padding:30px 0} .ssul-scope .cmt {padding:9px 0;border-bottom:1px solid var(--border)} @@ -409,7 +409,7 @@ .ssul-scope .cmt .bd {font-size:14px;margin-top:2px;line-height:1.4} -.ssul-scope .cmt .del {font-size:11px;color:var(--faint);float:right} +.ssul-scope .cmt .del {font-size:12px;color:var(--faint);float:right} .ssul-scope .cmt .rep {margin:8px 0 0 16px;padding-left:10px;border-left:2px solid var(--border)} @@ -421,11 +421,11 @@ .ssul-scope .cmts-in button:disabled {color:var(--faint)} -.ssul-scope .lbl-sub {font-weight:500;color:var(--muted);font-size:11px} +.ssul-scope .lbl-sub {font-weight:500;color:var(--muted);font-size:12px} .ssul-scope .input.search {align-items:center} -.ssul-scope .srch-btn {flex:0 0 auto;padding:8px 14px;border-radius:9px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:800} +.ssul-scope .srch-btn {flex:0 0 auto;padding:8px 14px;border-radius:9px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:800} .ssul-scope .srch-btn:disabled {opacity:.4} @@ -446,15 +446,15 @@ .ssul-scope .picked .pk-body {flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} -.ssul-scope .picked .pk-body b {font-size:15px;font-weight:800;color:var(--fg)} +.ssul-scope .picked .pk-body b {font-size:16px;font-weight:800;color:var(--fg)} .ssul-scope .picked .pk-body b::before {content:"✓ ";color:#22c55e} .ssul-scope .picked .pk-body span {font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.ssul-scope .pk-change {flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--muted);padding:6px 10px;border-radius:8px;background:var(--surface-2)} +.ssul-scope .pk-change {flex:0 0 auto;font-size:12px;font-weight:800;color:var(--muted);padding:6px 10px;border-radius:8px;background:var(--surface-2)} -.ssul-scope .place-loading {margin:10px 2px 0;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)} +.ssul-scope .place-loading {margin:10px 2px 0;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)} .ssul-scope .spin.sm {width:16px;height:16px;border-width:2px;margin:0} @@ -468,7 +468,7 @@ .ssul-scope .sns-h span {font-size:14px;font-weight:800} -.ssul-scope .sns-h em {font-style:normal;font-size:11.5px;color:var(--muted)} +.ssul-scope .sns-h em {font-style:normal;font-size:12px;color:var(--muted)} .ssul-scope .sns-row {display:flex;align-items:center;gap:11px;padding:11px 16px} @@ -482,9 +482,9 @@ .ssul-scope .sns-dot {width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block} -.ssul-scope .sns-soon {font-style:normal;font-size:10.5px;font-weight:800;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:10px} +.ssul-scope .sns-soon {font-style:normal;font-size:10px;font-weight:800;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:10px} -.ssul-scope .sns-btn {padding:7px 15px;border-radius:20px;font-size:13px;font-weight:800;background:var(--fg);color:var(--bg)} +.ssul-scope .sns-btn {padding:7px 15px;border-radius:20px;font-size:14px;font-weight:800;background:var(--fg);color:var(--bg)} .ssul-scope .sns-btn.on {background:var(--surface-2);color:var(--muted)} @@ -500,9 +500,9 @@ .ssul-scope .share-row+.share-row {border-top:1px solid var(--border)} -.ssul-scope .share-name {flex:1;text-align:left;font-size:15px;font-weight:700;color:var(--fg)} +.ssul-scope .share-name {flex:1;text-align:left;font-size:16px;font-weight:700;color:var(--fg)} -.ssul-scope .share-state {font-size:12.5px;font-weight:800;color:var(--samgukji)} +.ssul-scope .share-state {font-size:12px;font-weight:800;color:var(--samgukji)} .ssul-scope .share-row:disabled .share-state {color:var(--faint)} @@ -524,7 +524,7 @@ .ssul-scope .toast {position:fixed;left:50%;bottom:86px;z-index:60;transform:translate(-50%,14px);opacity:0;pointer-events:none; max-width:min(88vw,420px);padding:12px 18px;border-radius:14px;background:rgba(20,18,16,.94);color:#fff; - font-size:13.5px;font-weight:600;line-height:1.45;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.4); + font-size:14px;font-weight:600;line-height:1.45;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.4); transition:opacity .2s,transform .2s} .ssul-scope .toast.on {opacity:1;transform:translate(-50%,0)} @@ -534,7 +534,7 @@ } .ssul-scope .job-badge {position:fixed;right:14px;bottom:86px;z-index:55;padding:11px 16px;border-radius:999px; - background:rgba(20,18,16,.94);color:#fff;font-size:13px;font-weight:700;box-shadow:0 10px 34px rgba(0,0,0,.4); + background:rgba(20,18,16,.94);color:#fff;font-size:14px;font-weight:700;box-shadow:0 10px 34px rgba(0,0,0,.4); display:flex;align-items:center;gap:6px;cursor:pointer} .ssul-scope .job-badge.err {background:#b3261e} @@ -554,18 +554,18 @@ .ssul-scope .prod:disabled {opacity:.55} -.ssul-scope .prod-tag {position:absolute;top:-9px;left:14px;background:var(--samgukji);color:#fff;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:10px} +.ssul-scope .prod-tag {position:absolute;top:-9px;left:14px;background:var(--samgukji);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px} -.ssul-scope .prod-cr {grid-area:cr;font-size:15px;color:var(--muted);font-weight:600} +.ssul-scope .prod-cr {grid-area:cr;font-size:16px;color:var(--muted);font-weight:600} .ssul-scope .prod-cr b {font-size:22px;color:var(--fg);font-weight:800;margin-right:3px} -.ssul-scope .prod-bonus {grid-area:bonus;font-size:11.5px;color:var(--samgukji);font-weight:700} +.ssul-scope .prod-bonus {grid-area:bonus;font-size:12px;color:var(--samgukji);font-weight:700} .ssul-scope .prod-name {grid-area:name;font-size:12px;color:var(--faint)} .ssul-scope .prod-price {grid-area:price;font-size:16px;font-weight:800;color:var(--fg);white-space:nowrap} -.ssul-scope .tb-login {background:var(--samgukji);color:#fff;font-size:13px;font-weight:800;padding:8px 15px;border-radius:20px} +.ssul-scope .tb-login {background:var(--samgukji);color:#fff;font-size:14px;font-weight:800;padding:8px 15px;border-radius:20px} .ssul-scope :focus-visible {outline:2px solid var(--samgukji);outline-offset:2px} diff --git a/src/styles/studio-assets.css b/src/styles/studio-assets.css index a548c68..ddc920a 100644 --- a/src/styles/studio-assets.css +++ b/src/styles/studio-assets.css @@ -80,7 +80,7 @@ } .progress-text { - font-size: 0.8125rem; + font-size: 14px; font-weight: 600; color: var(--color-text-white); } @@ -92,14 +92,14 @@ } .progress-current { - font-size: 0.8125rem; + font-size: 14px; font-weight: 600; color: var(--color-text-white); } .progress-divider, .progress-total { - font-size: 0.8125rem; + font-size: 14px; font-weight: 400; color: #379599; } @@ -122,7 +122,7 @@ /* Sound Studio Title */ .sound-studio-title { - font-size: 2rem; + font-size: 32px; font-weight: 700; color: #ffffff; text-align: center; @@ -192,7 +192,7 @@ /* Column Title */ .column-title { - font-size: 1.125rem; + font-size: 18px; font-weight: 600; color: var(--color-mint); line-height: 1.19; @@ -337,7 +337,7 @@ } .language-flag { - font-size: 1.25rem; + font-size: 20px; line-height: 1.19; letter-spacing: -0.006em; } @@ -415,7 +415,7 @@ } .language-dropdown-item .language-flag { - font-size: 1.25rem; + font-size: 20px; } .language-dropdown-item .language-name { @@ -642,7 +642,7 @@ .charge-credits-link { display: block; margin-top: 6px; - font-size: 13px; + font-size: 14px; color: #AE72F9; text-decoration: underline; cursor: pointer; @@ -795,7 +795,7 @@ } .column-title { - font-size: 1.25rem; + font-size: 20px; } .lyrics-display { @@ -857,7 +857,7 @@ .asset-upload-error-title { margin: 0; color: #94FBE0; - font-size: 1.25rem; + font-size: 20px; font-weight: 700; line-height: 1.3; } @@ -865,7 +865,7 @@ .asset-upload-error-message { margin: 0.75rem 0 1.5rem; color: #E5F1F2; - font-size: 0.9375rem; + font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; @@ -879,7 +879,7 @@ background: #94FBE0; border: 0; border-radius: 999px; - font-size: 0.9375rem; + font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color 0.2s, transform 0.2s; @@ -931,7 +931,7 @@ gap: 4px; background-color: #462E64; color: #CFABFB; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; padding: 0 1.25rem 0 0.5rem; height: 36px; @@ -1010,7 +1010,7 @@ /* Asset Title */ .asset-title { - font-size: 2rem; + font-size: 32px; font-weight: 700; color: #E5F1F2; padding: 0 0 1.5rem; @@ -1090,7 +1090,7 @@ } .asset-section-subtitle { - font-size: 0.875rem; + font-size: 14px; font-weight: 400; color: #6AB0B3; line-height: 1.19; @@ -1098,7 +1098,7 @@ } .asset-section-count { - font-size: 0.875rem; + font-size: 14px; font-weight: 600; color: #9BCACC; line-height: 1.19; @@ -1113,7 +1113,7 @@ /* Asset Section Title */ .asset-section-title { - font-size: 1.5rem; + font-size: 24px; font-weight: 600; color: #94FBE0; line-height: 1.19; @@ -1128,7 +1128,7 @@ gap: 4px; background-color: #94FBE0; color: #000; - font-size: 0.75rem; + font-size: 12px; font-weight: 600; padding: 0 10px; height: 24px; @@ -1177,7 +1177,7 @@ padding: 0.625rem 1rem; background-color: #002224; color: #9BCACC; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; border: 1px solid #379599; border-radius: 8px; @@ -1229,7 +1229,7 @@ .asset-image-placeholder-name { width: 100%; - font-size: 0.6875rem; + font-size: 12px; line-height: 1.2; color: #9BCACC; overflow: hidden; @@ -1243,7 +1243,7 @@ left: 8px; background-color: #EFE3FE; color: #AE72F9; - font-size: 0.75rem; + font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; @@ -1308,7 +1308,7 @@ } .asset-upload-text { - font-size: 0.875rem; + font-size: 14px; font-weight: 600; color: #9BCACC; text-align: center; @@ -1352,7 +1352,7 @@ cursor: pointer; transition: border-color 0.2s, background-color 0.2s; color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; line-height: 1.19; letter-spacing: -0.006em; @@ -1374,7 +1374,7 @@ } .asset-ratio-subtitle { - font-size: 0.875rem; + font-size: 14px; font-weight: 400; color: #9BCACC; } @@ -1409,7 +1409,7 @@ .asset-next-button { background-color: #AE72F9; color: #FFFFFF; - font-size: 0.875rem; + font-size: 14px; font-weight: 600; padding: 10px 40px; border: none; @@ -1432,7 +1432,7 @@ /* Responsive Styles */ @media (max-width: 639px) { .asset-title { - font-size: 1.5rem; + font-size: 24px; padding-bottom: 1rem; } @@ -1447,7 +1447,7 @@ @media (min-width: 640px) and (max-width: 767px) { .asset-title { - font-size: 1.75rem; + font-size: 28px; padding-bottom: 1.25rem; } @@ -1459,7 +1459,7 @@ /* Height-based responsive adjustments */ @media (max-height: 700px) { .asset-title { - font-size: 1.75rem; + font-size: 28px; padding-bottom: 0.75rem; } diff --git a/src/styles/tokens.css b/src/styles/tokens.css index e45773b..e08d6ad 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -8,7 +8,7 @@ :root { /* 모바일 하단 탭바 높이 (safe-area 포함). 탭바 자신과, 탭바에 가리면 안 되는 fixed 요소(캘린더 바텀시트 등)가 공유한다 */ - --bottom-nav-height: calc(64px + env(safe-area-inset-bottom)); + --bottom-nav-height: calc(72px + env(safe-area-inset-bottom)); /* Primary Colors */ --color-mint: #a6ffea; @@ -64,14 +64,14 @@ --radius-full: 9999px; /* Font Sizes */ - --text-xs: 0.75rem; - --text-sm: 0.875rem; - --text-base: 1rem; - --text-lg: 1.125rem; - --text-xl: 1.25rem; - --text-2xl: 1.5rem; - --text-3xl: 1.875rem; - --text-4xl: 2.25rem; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 20px; + --text-2xl: 24px; + --text-3xl: 30px; + --text-4xl: 36px; /* Transitions */ --transition-fast: 150ms;