castad/o2o-castad-frontend
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 최소 폰트 크기를 14px 로 통일하고 하단 탭바 높이 상향

Browse Source
This commit is contained in:
김성경 2026-08-12 17:26:05 +09:00
parent 1f6921c587
commit fde7c8f6e1
13 changed files with 250 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/Dashboard/ContentCalendarContent.tsx
View File

@ -402,7 +402,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
{summary.completed > 0 && ( {summary.completed > 0 && (
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#1ba64f', flexShrink: 0 }} /> <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#1ba64f', flexShrink: 0 }} />
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 11, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}> <span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 12, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
{t('contentCalendar.completedCount', { count: summary.completed })} {t('contentCalendar.completedCount', { count: summary.completed })}
</span> </span>
</div> </div>
@ -410,7 +410,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
{summary.scheduled > 0 && ( {summary.scheduled > 0 && (
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#2563eb', flexShrink: 0 }} /> <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#2563eb', flexShrink: 0 }} />
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 11, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}> <span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 12, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
{t('contentCalendar.scheduledCount', { count: summary.scheduled })} {t('contentCalendar.scheduledCount', { count: summary.scheduled })}
</span> </span>
</div> </div>
@ -418,7 +418,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
{summary.failed > 0 && ( {summary.failed > 0 && (
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#e15252', flexShrink: 0 }} /> <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#e15252', flexShrink: 0 }} />
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 11, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}> <span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 12, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
{t('contentCalendar.failedCount', { count: summary.failed })} {t('contentCalendar.failedCount', { count: summary.failed })}
</span> </span>
</div> </div>
@ -541,13 +541,13 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
backgroundColor: statusColor(item.status as UploadStatus), flexShrink: 0, backgroundColor: statusColor(item.status as UploadStatus), flexShrink: 0,
}} /> }} />
<span style={{ <span style={{
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 13, fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 14,
color: statusColor(item.status as UploadStatus), lineHeight: 1, color: statusColor(item.status as UploadStatus), lineHeight: 1,
}}> }}>
{t(statusLabelKey(item.status as UploadStatus))} {t(statusLabelKey(item.status as UploadStatus))}
</span> </span>
<span style={{ <span style={{
fontFamily: 'Pretendard, sans-serif', fontWeight: 400, fontSize: 13, fontFamily: 'Pretendard, sans-serif', fontWeight: 400, fontSize: 14,
color: '#9bcacc', lineHeight: 1, marginLeft: 'auto', color: '#9bcacc', lineHeight: 1, marginLeft: 'auto',
}}> }}>
{formatTime(item)} {formatTime(item)}
@ -595,7 +595,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
style={{ style={{
height: 30, padding: '0 12px', borderRadius: 8, height: 30, padding: '0 12px', borderRadius: 8,
border: '1px solid #379599', backgroundColor: 'transparent', 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', color: '#9bcacc', cursor: 'pointer',
}} }}
> >
@ -608,7 +608,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
style={{ style={{
height: 30, padding: '0 12px', borderRadius: 8, height: 30, padding: '0 12px', borderRadius: 8,
border: 'none', backgroundColor: '#a65eff', border: 'none', backgroundColor: '#a65eff',
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 13, fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 14,
color: '#ffffff', cursor: 'pointer', color: '#ffffff', cursor: 'pointer',
}} }}
> >
@ -703,17 +703,19 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
return ( return (
<div style={{ <div style={{
display: 'flex', flexDirection: 'column', alignItems: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center',
paddingTop: 24, paddingBottom: 20, width: '100%', paddingTop: embedded ? 0 : 24, paddingBottom: 20, width: '100%',
boxSizing: 'border-box', position: 'relative', boxSizing: 'border-box', position: 'relative',
}}> }}>
<div style={{ width: '100%', paddingBottom: 24, paddingLeft: 20, paddingRight: 20, boxSizing: 'border-box' }}> {!embedded && (
<p style={{ <div style={{ width: '100%', paddingBottom: 24, paddingLeft: 20, paddingRight: 20, boxSizing: 'border-box' }}>
fontFamily: 'Pretendard, sans-serif', fontWeight: 700, fontSize: 30, <p style={{
color: '#ffffff', letterSpacing: '-0.18px', lineHeight: 1.3, margin: 0, fontFamily: 'Pretendard, sans-serif', fontWeight: 700, fontSize: 30,
}}> color: '#ffffff', letterSpacing: '-0.18px', lineHeight: 1.3, margin: 0,
{t('contentCalendar.title')} }}>
</p> {t('contentCalendar.title')}
</div> </p>
</div>
)}
<div style={{ <div style={{
display: 'flex', flexDirection: 'column', gap: 16, display: 'flex', flexDirection: 'column', gap: 16,

8
src/pages/Dashboard/DashboardContent.tsx
View File

@ -740,7 +740,7 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
borderRadius: '8px', borderRadius: '8px',
color: 'rgba(255,255,255,0.85)', color: 'rgba(255,255,255,0.85)',
padding: '5px 10px', padding: '5px 10px',
fontSize: '13px', fontSize: '14px',
cursor: 'pointer', cursor: 'pointer',
minWidth: '160px', minWidth: '160px',
}} }}
@ -788,7 +788,7 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
display: 'flex', alignItems: 'center', gap: '8px', display: 'flex', alignItems: 'center', gap: '8px',
padding: '8px 12px', padding: '8px 12px',
cursor: 'pointer', cursor: 'pointer',
fontSize: '13px', fontSize: '14px',
background: acc.id === selectedAccountId ? 'rgba(255,255,255,0.08)' : 'transparent', background: acc.id === selectedAccountId ? 'rgba(255,255,255,0.08)' : 'transparent',
color: 'rgba(255,255,255,0.85)', color: 'rgba(255,255,255,0.85)',
}} }}
@ -940,8 +940,8 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
onClick={() => setShowMockData(prev => !prev)} onClick={() => setShowMockData(prev => !prev)}
style={{ style={{
position: 'fixed', position: 'fixed',
bottom: '24px', top: '10px',
right: '24px', right: '5px',
zIndex: 9999, zIndex: 9999,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',

9
src/styles/base-components.css
View File

@ -921,8 +921,8 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px; gap: 6px;
font-size: 11px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
background: none; background: none;
@ -930,6 +930,11 @@
cursor: pointer; cursor: pointer;
} }
.bottom-nav-item svg {
width: 24px;
height: 24px;
}
.bottom-nav-item.active { .bottom-nav-item.active {
color: var(--color-mint); color: var(--color-mint);
} }

12
src/styles/business-settings.css
View File

@ -64,7 +64,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.settings-title { .settings-title {
font-size: 1.5rem; font-size: 24px;
} }
} }
@ -76,7 +76,7 @@
.settings-description { .settings-description {
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
font-size: 9px; font-size: 10px;
font-weight: 300; font-weight: 300;
line-height: 1.625; line-height: 1.625;
opacity: 0.8; opacity: 0.8;
@ -124,7 +124,7 @@
.settings-card-title { .settings-card-title {
color: var(--color-mint); color: var(--color-mint);
font-size: 9px; font-size: 10px;
font-weight: 700; font-weight: 700;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
letter-spacing: 0.1em; letter-spacing: 0.1em;
@ -234,7 +234,7 @@
.social-item-connect { .social-item-connect {
color: var(--color-mint); color: var(--color-mint);
font-size: 9px; font-size: 10px;
font-weight: 700; font-weight: 700;
background: none; background: none;
border: none; border: none;
@ -321,7 +321,7 @@
} }
.footer-link { .footer-link {
font-size: 13px; font-size: 14px;
color: #379599; color: #379599;
text-decoration: none; text-decoration: none;
opacity: 0.8; opacity: 0.8;
@ -333,7 +333,7 @@
} }
.footer-link-divider { .footer-link-divider {
font-size: 13px; font-size: 14px;
color: #379599; color: #379599;
opacity: 0.5; opacity: 0.5;
} }

87
src/styles/contents-social.css
View File

@ -28,7 +28,7 @@
border: 1px solid rgba(155, 202, 204, 0.3); border: 1px solid rgba(155, 202, 204, 0.3);
background: transparent; background: transparent;
color: #9BCACC; color: #9BCACC;
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap; white-space: nowrap;
@ -54,7 +54,7 @@
} }
.ado2-contents-count { .ado2-contents-count {
font-size: 17px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: #9BCACC; color: #9BCACC;
} }
@ -281,7 +281,7 @@
border: none; border: none;
border-bottom: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05);
color: var(--color-text-white); color: var(--color-text-white);
font-size: 15px; font-size: 16px;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
} }
@ -321,7 +321,7 @@
border: 1px solid rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05); background: rgba(255,255,255,0.05);
color: var(--color-text-white); color: var(--color-text-white);
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
@ -453,7 +453,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #9BCACC; color: #9BCACC;
white-space: nowrap; white-space: nowrap;
@ -963,7 +963,7 @@
background: #1A8F93; background: #1A8F93;
border: none; border: none;
color: #fff; color: #fff;
font-size: 11px; font-size: 12px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -979,7 +979,7 @@
border-radius: 8px; border-radius: 8px;
padding: 8px 12px; padding: 8px 12px;
color: #fff; color: #fff;
font-size: 13px; font-size: 14px;
outline: none; outline: none;
} }
@ -993,7 +993,7 @@
/* 댓글 닉네임 */ /* 댓글 닉네임 */
.video-detail-comment-nickname { .video-detail-comment-nickname {
font-size: 13px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #9BCACC; color: #9BCACC;
display: block; display: block;
@ -1009,7 +1009,7 @@
} }
.video-detail-comments-title { .video-detail-comments-title {
font-size: 17px; font-size: 18px;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
} }
@ -1463,31 +1463,31 @@
background-color: rgba(148, 251, 224, 0.15); background-color: rgba(148, 251, 224, 0.15);
color: #94FBE0; color: #94FBE0;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.875rem; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.social-connect-title { .social-connect-title {
font-size: 1.5rem; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.social-connect-message { .social-connect-message {
font-size: 1rem; font-size: 16px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.social-connect-detail { .social-connect-detail {
font-size: 0.875rem; font-size: 14px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.social-connect-countdown { .social-connect-countdown {
font-size: 0.875rem; font-size: 14px;
color: #94FBE0; color: #94FBE0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -1502,7 +1502,7 @@
width: 100%; width: 100%;
padding: 0.875rem 1.5rem; padding: 0.875rem 1.5rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -1590,7 +1590,7 @@
} }
.myinfo-title { .myinfo-title {
font-size: 1.75rem; font-size: 28px;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #FFFFFF;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -1599,7 +1599,6 @@
/* 탭 네비게이션 */ /* 탭 네비게이션 */
.myinfo-tabs { .myinfo-tabs {
display: flex; display: flex;
gap: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -1609,7 +1608,7 @@
background: none; background: none;
border: none; border: none;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem; font-size: 16px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -1648,7 +1647,7 @@
} }
.myinfo-section-title { .myinfo-section-title {
font-size: 0.875rem; font-size: 14px;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
text-transform: uppercase; text-transform: uppercase;
@ -1657,7 +1656,7 @@
.myinfo-placeholder { .myinfo-placeholder {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem; font-size: 14px;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
@ -1683,20 +1682,20 @@
.myinfo-credits-label { .myinfo-credits-label {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-size: 0.95rem; font-size: 16px;
} }
.myinfo-credits-value { .myinfo-credits-value {
color: #a6ffea; color: #a6ffea;
font-size: 1.4rem; font-size: 22px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.myinfo-credits-desc { .myinfo-credits-desc {
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
font-size: 0.85rem; font-size: 14px;
margin-right: 5px; margin-right: 5px;
flex: 1; flex: 1;
} }
@ -1707,7 +1706,7 @@
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: #002224; color: #002224;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@ -1745,7 +1744,7 @@
.myinfo-popup-title { .myinfo-popup-title {
color: #fff; color: #fff;
font-size: 1.05rem; font-size: 16px;
font-weight: 700; font-weight: 700;
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
align-self: flex-start; align-self: flex-start;
@ -1753,7 +1752,7 @@
.myinfo-popup-message { .myinfo-popup-message {
color: #fff; color: #fff;
font-size: 1.1rem; font-size: 18px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -1768,7 +1767,7 @@
.myinfo-popup-label { .myinfo-popup-label {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem; font-size: 14px;
} }
.myinfo-popup-counter { .myinfo-popup-counter {
@ -1784,7 +1783,7 @@
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border: none; border: none;
color: #fff; color: #fff;
font-size: 1.25rem; font-size: 20px;
width: 48px; width: 48px;
min-width: 48px; min-width: 48px;
height: 44px; height: 44px;
@ -1802,7 +1801,7 @@
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px; border-radius: 8px;
color: #fff; color: #fff;
font-size: 0.95rem; font-size: 16px;
padding: 0.6rem 0.875rem; padding: 0.6rem 0.875rem;
outline: none; outline: none;
width: 100%; width: 100%;
@ -1834,7 +1833,7 @@
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px; border-radius: 8px;
color: #fff; color: #fff;
font-size: 0.9rem; font-size: 14px;
padding: 0.6rem 0.875rem; padding: 0.6rem 0.875rem;
outline: none; outline: none;
resize: none; resize: none;
@ -1861,7 +1860,7 @@
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px; border-radius: 8px;
padding: 0.6rem 1.25rem; padding: 0.6rem 1.25rem;
font-size: 0.9rem; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
} }
@ -1876,7 +1875,7 @@
border: none; border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.6rem 1.5rem; padding: 0.6rem 1.5rem;
font-size: 0.9rem; font-size: 14px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
@ -1900,14 +1899,14 @@
} }
.myinfo-business-empty-title { .myinfo-business-empty-title {
font-size: 1.1rem; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.myinfo-business-empty-desc { .myinfo-business-empty-desc {
font-size: 0.85rem; font-size: 14px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
@ -1925,7 +1924,7 @@
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px; border-radius: 8px;
color: #FFFFFF; color: #FFFFFF;
font-size: 0.9rem; font-size: 14px;
} }
.myinfo-business-input::placeholder { .myinfo-business-input::placeholder {
@ -1943,7 +1942,7 @@
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: #002224; color: #002224;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@ -1971,7 +1970,7 @@
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px; border-radius: 8px;
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -2054,13 +2053,13 @@
} }
.myinfo-connected-channel { .myinfo-connected-channel {
font-size: 0.9rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
} }
.myinfo-connected-platform { .myinfo-connected-platform {
font-size: 0.7rem; font-size: 12px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -2076,7 +2075,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
font-size: 0.75rem; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #a6ffea; color: #a6ffea;
} }
@ -2087,7 +2086,7 @@
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px; border-radius: 6px;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem; font-size: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@ -2099,7 +2098,7 @@
} }
.myinfo-loading { .myinfo-loading {
font-size: 0.85rem; font-size: 14px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
text-align: center; text-align: center;
padding: 0.5rem; padding: 0.5rem;
@ -2113,7 +2112,7 @@
} }
.myinfo-title { .myinfo-title {
font-size: 1.5rem; font-size: 24px;
} }
.myinfo-tabs { .myinfo-tabs {
@ -2129,7 +2128,7 @@
.myinfo-tab { .myinfo-tab {
white-space: nowrap; white-space: nowrap;
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
font-size: 0.8rem; font-size: 14px;
} }
.myinfo-business-input-row { .myinfo-business-input-row {

8
src/styles/dashboard.css
View File

@ -232,7 +232,7 @@
color: var(--color-bg-dark); color: var(--color-bg-dark);
padding: 0.125rem 0.5rem; padding: 0.125rem 0.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 9px; font-size: 10px;
font-weight: 700; font-weight: 700;
box-shadow: 0 20px 25px -5px rgba(166, 255, 234, 0.2); box-shadow: 0 20px 25px -5px rgba(166, 255, 234, 0.2);
} }
@ -269,7 +269,7 @@
.chart-xaxis { .chart-xaxis {
margin-top: 0.75rem; margin-top: 0.75rem;
padding: 0 1rem; padding: 0 1rem;
font-size: 9px; font-size: 10px;
padding-top: 0.75rem; padding-top: 0.75rem;
} }
} }
@ -601,7 +601,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
font-size: 9px; font-size: 10px;
font-weight: 500; font-weight: 500;
} }
@ -699,7 +699,7 @@
@media (min-width: 640px) { @media (min-width: 640px) {
.yoy-chart-xaxis { .yoy-chart-xaxis {
font-size: 9px; font-size: 10px;
margin-top: 0.75rem; margin-top: 0.75rem;
} }
} }

66
src/styles/generation-flow.css
View File

@ -4,7 +4,7 @@
/* Completion Page Title */ /* Completion Page Title */
.completion-title { .completion-title {
font-size: 1.75rem; font-size: 28px;
font-weight: 600; font-weight: 600;
color: #E5F1F2; color: #E5F1F2;
line-height: 1.19; line-height: 1.19;
@ -16,7 +16,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.completion-title { .completion-title {
font-size: 2.5rem; font-size: 40px;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
@ -185,7 +185,7 @@
} }
.video-overlay-title { .video-overlay-title {
font-size: 1.25rem; font-size: 20px;
font-weight: 800; font-weight: 800;
color: #FFFFFF; color: #FFFFFF;
line-height: 1.3; line-height: 1.3;
@ -196,7 +196,7 @@
} }
.video-overlay-logo { .video-overlay-logo {
font-size: 0.375rem; font-size: 6px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
line-height: 1.3; line-height: 1.3;
@ -225,7 +225,7 @@
} }
.ai-optimization-title { .ai-optimization-title {
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #94FBE0; color: #94FBE0;
line-height: 1.19; line-height: 1.19;
@ -264,7 +264,7 @@
} }
.ai-tag-text { .ai-tag-text {
font-size: 0.875rem; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #E5F1F2; color: #E5F1F2;
line-height: 1.19; line-height: 1.19;
@ -336,7 +336,7 @@
} }
.completion-social-name { .completion-social-name {
font-size: 0.875rem; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
line-height: 1.19; line-height: 1.19;
@ -344,7 +344,7 @@
} }
.completion-social-email { .completion-social-email {
font-size: 0.75rem; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #94FBE0; color: #94FBE0;
line-height: 1.19; line-height: 1.19;
@ -359,7 +359,7 @@
} }
.completion-social-channel { .completion-social-channel {
font-size: 0.75rem; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #94FBE0; color: #94FBE0;
line-height: 1.19; line-height: 1.19;
@ -377,14 +377,14 @@
} }
.completion-social-channel-name { .completion-social-channel-name {
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
line-height: 1.2; line-height: 1.2;
} }
.completion-social-platform { .completion-social-platform {
font-size: 0.7rem; font-size: 12px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
line-height: 1.2; line-height: 1.2;
@ -405,7 +405,7 @@
/* Social Card Status */ /* Social Card Status */
.completion-social-status { .completion-social-status {
font-size: 0.75rem; font-size: 12px;
font-weight: 500; font-weight: 500;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 9999px; border-radius: 9999px;
@ -438,7 +438,7 @@
} }
.completion-social-disconnect { .completion-social-disconnect {
font-size: 0.75rem; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #f87171; color: #f87171;
background: transparent; background: transparent;
@ -461,7 +461,7 @@
border: none; border: none;
border-radius: var(--radius-full); border-radius: var(--radius-full);
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all var(--transition-normal); transition: all var(--transition-normal);
@ -486,7 +486,7 @@
border: 1px solid #AE72F9; border: 1px solid #AE72F9;
border-radius: var(--radius-full); border-radius: var(--radius-full);
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all var(--transition-normal); transition: all var(--transition-normal);
@ -531,7 +531,7 @@
gap: 4px; gap: 4px;
background-color: #462E64; background-color: #462E64;
color: #CFABFB; color: #CFABFB;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
padding: 0 1.25rem 0 0.5rem; padding: 0 1.25rem 0 0.5rem;
height: 36px; height: 36px;
@ -1262,7 +1262,7 @@
.report-content { .report-content {
color: #CEE5E6; color: #CEE5E6;
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
letter-spacing: -0.006em; letter-spacing: -0.006em;
@ -1270,7 +1270,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.report-content { .report-content {
font-size: 17px; font-size: 18px;
line-height: 1.45; line-height: 1.45;
} }
} }
@ -1385,7 +1385,7 @@
.selling-point-content p { .selling-point-content p {
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #CEE5E6; color: #CEE5E6;
letter-spacing: -0.006em; letter-spacing: -0.006em;
@ -1395,7 +1395,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.selling-point-content p { .selling-point-content p {
font-size: 17px; font-size: 18px;
line-height: 1; line-height: 1;
} }
} }
@ -1419,7 +1419,7 @@
background-color: #034A4D; background-color: #034A4D;
border-radius: 999px; border-radius: 999px;
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #CEE5E6; color: #CEE5E6;
letter-spacing: -0.006em; letter-spacing: -0.006em;
@ -1428,7 +1428,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.feature-tag { .feature-tag {
font-size: 17px; font-size: 18px;
} }
} }
@ -1665,7 +1665,7 @@
} }
.bi-usp-category { .bi-usp-category {
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #6AB0B3; color: #6AB0B3;
text-transform: uppercase; text-transform: uppercase;
@ -1678,7 +1678,7 @@
} }
.bi-usp-description { .bi-usp-description {
font-size: 15px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
line-height: 1.5; line-height: 1.5;
@ -1694,7 +1694,7 @@
} }
.bi-usp-english-category { .bi-usp-english-category {
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #6AB0B3; color: #6AB0B3;
text-transform: uppercase; text-transform: uppercase;
@ -1749,7 +1749,7 @@
} }
.bi-chart-sublabel { .bi-chart-sublabel {
font-size: 13px; font-size: 14px;
fill: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5);
font-weight: 500; font-weight: 500;
} }
@ -1885,7 +1885,7 @@
} }
.bi2-subtitle { .bi2-subtitle {
font-size: 21px; font-size: 22px;
font-weight: 400; font-weight: 400;
color: #E5F1F2; color: #E5F1F2;
letter-spacing: -0.006em; letter-spacing: -0.006em;
@ -2357,7 +2357,7 @@
color: var(--Color-white, #FFF); color: var(--Color-white, #FFF);
text-align: center; text-align: center;
font-family: Pretendard; font-family: Pretendard;
font-size: 45px; font-size: 46px;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
line-height: normal; line-height: normal;
@ -2432,7 +2432,7 @@
border: none; border: none;
background: none; background: none;
font-family: inherit; font-family: inherit;
font-size: 13.5px; font-size: 14px;
font-weight: 600; font-weight: 600;
letter-spacing: -0.006em; letter-spacing: -0.006em;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
@ -2491,7 +2491,7 @@
border: 1px dashed var(--color-border-white-10); border: 1px dashed var(--color-border-white-10);
border-radius: 16px; border-radius: 16px;
text-align: center; text-align: center;
font-size: 13px; font-size: 14px;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
} }
@ -2801,12 +2801,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
@media (max-width: 1100px) {
.wizard-stepper {
margin: 50px auto 0;
}
}
/* 노드 셀: 노드 너비와 동일한 2rem 고정. 라벨은 이 밖으로 넘침 */ /* 노드 셀: 노드 너비와 동일한 2rem 고정. 라벨은 이 밖으로 넘침 */
.wizard-step { .wizard-step {
flex: none; flex: none;

22
src/styles/landing.css
View File

@ -384,7 +384,7 @@
width: 100%; width: 100%;
gap: 12px; gap: 12px;
color: var(--color-text-gray-300); color: var(--color-text-gray-300);
font-size: 13px; font-size: 14px;
} }
.hero-divider::before, .hero-divider::before,
@ -581,7 +581,7 @@
} }
.welcome-title { .welcome-title {
font-size: 1.5rem; font-size: 24px;
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #E5F1F2; color: #E5F1F2;
@ -591,13 +591,13 @@
@media (min-width: 640px) { @media (min-width: 640px) {
.welcome-title { .welcome-title {
font-size: 2rem; font-size: 32px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.welcome-title { .welcome-title {
font-size: 2.5rem; font-size: 40px;
} }
} }
@ -617,7 +617,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.welcome-subtitle { .welcome-subtitle {
font-size: 1.5rem; font-size: 24px;
} }
} }
@ -833,7 +833,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.25rem; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #9BCACC; color: #9BCACC;
letter-spacing: -0.006em; letter-spacing: -0.006em;
@ -850,7 +850,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.feature-title { .feature-title {
font-size: 1.5rem; font-size: 24px;
} }
} }
@ -1425,18 +1425,18 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.login-title { .login-title {
font-size: 3rem; font-size: 48px;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.login-title { .login-title {
font-size: 3.75rem; font-size: 60px;
} }
} }
.login-subtitle { .login-subtitle {
font-size: 9px; font-size: 10px;
font-weight: 300; font-weight: 300;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
opacity: 0.8; opacity: 0.8;
@ -1509,7 +1509,7 @@
} }
.loading-title { .loading-title {
font-size: 2rem; font-size: 32px;
font-weight: 700; font-weight: 700;
letter-spacing: -0.006em; letter-spacing: -0.006em;
line-height: 1.19; line-height: 1.19;

54
src/styles/modals-overlays.css
View File

@ -138,7 +138,7 @@
background: rgba(166, 130, 255, 0.15); background: rgba(166, 130, 255, 0.15);
border: 1px solid rgba(166, 130, 255, 0.3); border: 1px solid rgba(166, 130, 255, 0.3);
border-radius: 6px; border-radius: 6px;
font-size: 0.75rem; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #a682ff; color: #a682ff;
} }
@ -153,7 +153,7 @@
border: 1px dashed rgba(255, 255, 255, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2);
border-radius: 6px; border-radius: 6px;
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
font-size: 1rem; font-size: 16px;
cursor: pointer; cursor: pointer;
} */ } */
@ -281,7 +281,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
font-size: 0.7rem; font-size: 12px;
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
} }
@ -290,11 +290,11 @@
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem; font-size: 14px;
} }
.social-posting-no-accounts-hint { .social-posting-no-accounts-hint {
font-size: 0.75rem; font-size: 12px;
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
margin-top: 0.25rem; margin-top: 0.25rem;
} }
@ -355,7 +355,7 @@
} }
.mini-calendar-title { .mini-calendar-title {
font-size: 0.85rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
@ -364,7 +364,7 @@
background: none; background: none;
border: none; border: none;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-size: 1.2rem; font-size: 20px;
cursor: pointer; cursor: pointer;
padding: 2px 8px; padding: 2px 8px;
border-radius: 6px; border-radius: 6px;
@ -385,7 +385,7 @@
.mini-calendar-day-label { .mini-calendar-day-label {
text-align: center; text-align: center;
font-size: 0.72rem; font-size: 12px;
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
padding: 4px 0; padding: 4px 0;
} }
@ -394,7 +394,7 @@
background: none; background: none;
border: none; border: none;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
font-size: 0.78rem; font-size: 12px;
cursor: pointer; cursor: pointer;
padding: 5px 2px; padding: 5px 2px;
border-radius: 6px; border-radius: 6px;
@ -435,7 +435,7 @@
} }
.schedule-time-label { .schedule-time-label {
font-size: 0.8rem; font-size: 12px;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-weight: 500; font-weight: 500;
} }
@ -451,7 +451,7 @@
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px; border-radius: 8px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem; font-size: 14px;
padding: 8px 10px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -468,7 +468,7 @@
} }
.schedule-datetime-preview { .schedule-datetime-preview {
font-size: 0.8rem; font-size: 12px;
color: #a65eff; color: #a65eff;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
@ -485,7 +485,7 @@
} }
.social-posting-footer-note { .social-posting-footer-note {
font-size: 0.75rem; font-size: 12px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
margin: 0; margin: 0;
} }
@ -503,7 +503,7 @@
.social-posting-btn { .social-posting-btn {
padding: 0.625rem 1.25rem; padding: 0.625rem 1.25rem;
border-radius: 8px; border-radius: 8px;
font-size: 0.875rem; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@ -619,7 +619,7 @@
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px; border-radius: 8px;
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -683,7 +683,7 @@
background: transparent; background: transparent;
border: none; border: none;
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -744,7 +744,7 @@
} }
.upload-progress-title { .upload-progress-title {
font-size: 1.125rem; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
margin: 0; margin: 0;
@ -835,7 +835,7 @@
/* Status Text */ /* Status Text */
.upload-progress-status { .upload-progress-status {
font-size: 1.25rem; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
margin: 0; margin: 0;
@ -879,7 +879,7 @@
display: block; display: block;
text-align: center; text-align: center;
margin-top: 0.5rem; margin-top: 0.5rem;
font-size: 0.875rem; font-size: 14px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
@ -905,13 +905,13 @@
} }
.upload-progress-label { .upload-progress-label {
font-size: 0.8125rem; font-size: 14px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
flex-shrink: 0; flex-shrink: 0;
} }
.upload-progress-value { .upload-progress-value {
font-size: 0.875rem; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
text-align: right; text-align: right;
word-break: break-word; word-break: break-word;
@ -928,7 +928,7 @@
.upload-progress-error p { .upload-progress-error p {
margin: 0; margin: 0;
font-size: 0.875rem; font-size: 14px;
color: #f87171; color: #f87171;
text-align: center; text-align: center;
} }
@ -941,7 +941,7 @@
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
background: #f87171; background: #f87171;
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
border-radius: 8px; border-radius: 8px;
@ -968,7 +968,7 @@
} }
.upload-progress-calendar-link { .upload-progress-calendar-link {
font-size: 0.8rem; font-size: 12px;
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
@ -982,7 +982,7 @@
.upload-progress-btn { .upload-progress-btn {
padding: 0.75rem 2rem; padding: 0.75rem 2rem;
border-radius: 8px; border-radius: 8px;
font-size: 0.875rem; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@ -1001,7 +1001,7 @@
.upload-progress-note { .upload-progress-note {
margin: 0; margin: 0;
font-size: 0.8125rem; font-size: 14px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
text-align: center; text-align: center;
} }
@ -1068,7 +1068,7 @@
} }
.manual-modal-subtitle { .manual-modal-subtitle {
font-size: 15px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: rgba(155, 202, 204, 0.7); color: rgba(155, 202, 204, 0.7);
padding: 15px 20px 0; padding: 15px 20px 0;

39
src/styles/ssulbox-castad.css
View File

@ -121,13 +121,13 @@
.ssul-scn__name { .ssul-scn__name {
position: relative; position: relative;
font-size: 13.5px; font-size: 14px;
font-weight: 700; font-weight: 700;
} }
.ssul-scn__desc { .ssul-scn__desc {
position: relative; position: relative;
font-size: 11px; font-size: 12px;
line-height: 1.4; line-height: 1.4;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
} }
@ -170,7 +170,7 @@
background: var(--color-bg-card-inner); background: var(--color-bg-card-inner);
color: var(--color-text-white); color: var(--color-text-white);
font-family: inherit; font-family: inherit;
font-size: 13px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: opacity var(--transition-normal); transition: opacity var(--transition-normal);
@ -224,12 +224,12 @@
} }
.ssul-places b { .ssul-places b {
font-size: 13px; font-size: 14px;
font-weight: 700; font-weight: 700;
} }
.ssul-places span { .ssul-places span {
font-size: 11.5px; font-size: 12px;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
} }
@ -254,12 +254,12 @@
} }
.ssul-picked__body b { .ssul-picked__body b {
font-size: 13px; font-size: 14px;
font-weight: 700; font-weight: 700;
} }
.ssul-picked__body span { .ssul-picked__body span {
font-size: 11.5px; font-size: 12px;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
} }
@ -318,7 +318,7 @@
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 10px 4px; padding: 10px 4px;
font-size: 12.5px; font-size: 12px;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
} }
@ -331,7 +331,7 @@
} }
.ssul-create__coin { .ssul-create__coin {
font-size: 13px; font-size: 14px;
line-height: 1; line-height: 1;
} }
@ -346,7 +346,7 @@
background: linear-gradient(90deg, #ff8a5c, var(--color-ssul-accent)); background: linear-gradient(90deg, #ff8a5c, var(--color-ssul-accent));
color: #1a1200; color: #1a1200;
font-family: inherit; font-family: inherit;
font-size: 15px; font-size: 16px;
font-weight: 800; font-weight: 800;
cursor: pointer; cursor: pointer;
transition: filter var(--transition-normal), box-shadow var(--transition-normal); transition: filter var(--transition-normal), box-shadow var(--transition-normal);
@ -381,18 +381,18 @@
margin: auto; margin: auto;
padding: 48px 20px; padding: 48px 20px;
text-align: center; text-align: center;
gap: 10px;
color: var(--color-text-white); color: var(--color-text-white);
} }
.ssul-making__scenario { .ssul-making__scenario {
font-size: 13px; font-size: 20px;
font-weight: 700; font-weight: 700;
margin-bottom: 14px;
} }
.ssul-making__title { .ssul-making__title {
margin: 0 0 24px; margin: 0 0 24px;
font-size: 19px; font-size: 24px;
font-weight: 700; font-weight: 700;
letter-spacing: -0.015em; letter-spacing: -0.015em;
} }
@ -408,8 +408,8 @@
.ssul-making__spinner { .ssul-making__spinner {
position: relative; position: relative;
flex: none; flex: none;
width: 104px; width: 150px;
height: 104px; height: 150px;
margin: 4px 0 26px; margin: 4px 0 26px;
} }
@ -439,6 +439,7 @@
width: 100%; width: 100%;
height: 6px; height: 6px;
border-radius: 999px; border-radius: 999px;
margin-top: 20px;
background: var(--color-bg-card-inner); background: var(--color-bg-card-inner);
overflow: hidden; overflow: hidden;
} }
@ -455,7 +456,7 @@
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
font-size: 12.5px; font-size: 16px;
color: var(--color-text-gray-300); color: var(--color-text-gray-300);
} }
@ -466,14 +467,14 @@
.ssul-making__desc { .ssul-making__desc {
margin: 22px 0 0; margin: 22px 0 0;
font-size: 12.5px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
color: var(--color-text-gray-400); color: var(--color-text-gray-400);
} }
.ssul-making__refund { .ssul-making__refund {
margin: 8px 0 0; margin: 8px 0 0;
font-size: 12.5px; font-size: 14px;
color: var(--color-mint); color: var(--color-mint);
} }
@ -485,7 +486,7 @@
background: var(--color-bg-card); background: var(--color-bg-card);
color: var(--color-text-white); color: var(--color-text-white);
font-family: inherit; font-family: inherit;
font-size: 13.5px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: border-color var(--transition-normal); transition: border-color var(--transition-normal);

86
src/styles/ssulbox.css
View File

@ -110,18 +110,18 @@
.ssul-scope .card .meta {position:absolute;left:9px;right:9px;bottom:8px;z-index:2} .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; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
text-shadow:0 1px 3px rgba(0,0,0,.5);} 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 .card .sub svg {width:12px;height:12px;fill:currentColor}
.ssul-scope .badge {position:absolute;top:8px;left:8px;z-index:2; .ssul-scope .badge {position:absolute;top:8px;left:8px;z-index:2;
display:inline-flex;align-items:center;gap:4px; display:inline-flex;align-items:center;gap:4px;
padding:3px 8px;border-radius:999px; 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);} background:rgba(0,0,0,.32);backdrop-filter:blur(3px);}
.ssul-scope .badge i {width:7px;height:7px;border-radius:50%;display:inline-block} .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 .chips::-webkit-scrollbar {display:none}
.ssul-scope .chip {flex:0 0 auto;padding:7px 13px;border-radius:999px;background:var(--surface-2); .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)} .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 .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)} .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 {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)} .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 {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)} 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 {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} .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 {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-h button {color:var(--muted);font-size:22px;line-height:1;padding:4px}
.ssul-scope .sheet-body {overflow-y:auto;padding:16px} .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)} .ssul-scope .step-label b {color:var(--fg)}
@ -265,9 +265,9 @@
.ssul-scope .scn .tx {flex:1} .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} .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 {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} .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 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 .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 .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)} 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} .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)}} @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} .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 {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} .ssul-scope .vrail svg {width:29px;height:29px;fill:#fff}
@ -361,14 +361,14 @@
padding-bottom:calc(56px + env(safe-area-inset-bottom)); padding-bottom:calc(56px + env(safe-area-inset-bottom));
background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)} 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} display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ssul-scope .vbottom .vbadge {margin-bottom:10px} .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} background:rgba(255,255,255,.12);padding:5px 10px;border-radius:8px}
@media (min-width:860px) { @media (min-width:860px) {
@ -401,7 +401,7 @@
.ssul-scope .cmts-list {flex:1;overflow-y:auto;padding:6px 16px} .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)} .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 .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)} .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 .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 .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} .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 {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 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 .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} .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 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} .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-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)} .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-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)} .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; .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; 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} transition:opacity .2s,transform .2s}
.ssul-scope .toast.on {opacity:1;transform:translate(-50%,0)} .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; .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} display:flex;align-items:center;gap:6px;cursor:pointer}
.ssul-scope .job-badge.err {background:#b3261e} .ssul-scope .job-badge.err {background:#b3261e}
@ -554,18 +554,18 @@
.ssul-scope .prod:disabled {opacity:.55} .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-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-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 .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} .ssul-scope :focus-visible {outline:2px solid var(--samgukji);outline-offset:2px}

56
src/styles/studio-assets.css
View File

@ -80,7 +80,7 @@
} }
.progress-text { .progress-text {
font-size: 0.8125rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--color-text-white); color: var(--color-text-white);
} }
@ -92,14 +92,14 @@
} }
.progress-current { .progress-current {
font-size: 0.8125rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--color-text-white); color: var(--color-text-white);
} }
.progress-divider, .progress-divider,
.progress-total { .progress-total {
font-size: 0.8125rem; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #379599; color: #379599;
} }
@ -122,7 +122,7 @@
/* Sound Studio Title */ /* Sound Studio Title */
.sound-studio-title { .sound-studio-title {
font-size: 2rem; font-size: 32px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
@ -192,7 +192,7 @@
/* Column Title */ /* Column Title */
.column-title { .column-title {
font-size: 1.125rem; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--color-mint); color: var(--color-mint);
line-height: 1.19; line-height: 1.19;
@ -337,7 +337,7 @@
} }
.language-flag { .language-flag {
font-size: 1.25rem; font-size: 20px;
line-height: 1.19; line-height: 1.19;
letter-spacing: -0.006em; letter-spacing: -0.006em;
} }
@ -415,7 +415,7 @@
} }
.language-dropdown-item .language-flag { .language-dropdown-item .language-flag {
font-size: 1.25rem; font-size: 20px;
} }
.language-dropdown-item .language-name { .language-dropdown-item .language-name {
@ -642,7 +642,7 @@
.charge-credits-link { .charge-credits-link {
display: block; display: block;
margin-top: 6px; margin-top: 6px;
font-size: 13px; font-size: 14px;
color: #AE72F9; color: #AE72F9;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
@ -795,7 +795,7 @@
} }
.column-title { .column-title {
font-size: 1.25rem; font-size: 20px;
} }
.lyrics-display { .lyrics-display {
@ -857,7 +857,7 @@
.asset-upload-error-title { .asset-upload-error-title {
margin: 0; margin: 0;
color: #94FBE0; color: #94FBE0;
font-size: 1.25rem; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 1.3; line-height: 1.3;
} }
@ -865,7 +865,7 @@
.asset-upload-error-message { .asset-upload-error-message {
margin: 0.75rem 0 1.5rem; margin: 0.75rem 0 1.5rem;
color: #E5F1F2; color: #E5F1F2;
font-size: 0.9375rem; font-size: 16px;
line-height: 1.6; line-height: 1.6;
overflow-wrap: anywhere; overflow-wrap: anywhere;
white-space: pre-wrap; white-space: pre-wrap;
@ -879,7 +879,7 @@
background: #94FBE0; background: #94FBE0;
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
font-size: 0.9375rem; font-size: 16px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s, transform 0.2s; transition: background-color 0.2s, transform 0.2s;
@ -931,7 +931,7 @@
gap: 4px; gap: 4px;
background-color: #462E64; background-color: #462E64;
color: #CFABFB; color: #CFABFB;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
padding: 0 1.25rem 0 0.5rem; padding: 0 1.25rem 0 0.5rem;
height: 36px; height: 36px;
@ -1010,7 +1010,7 @@
/* Asset Title */ /* Asset Title */
.asset-title { .asset-title {
font-size: 2rem; font-size: 32px;
font-weight: 700; font-weight: 700;
color: #E5F1F2; color: #E5F1F2;
padding: 0 0 1.5rem; padding: 0 0 1.5rem;
@ -1090,7 +1090,7 @@
} }
.asset-section-subtitle { .asset-section-subtitle {
font-size: 0.875rem; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #6AB0B3; color: #6AB0B3;
line-height: 1.19; line-height: 1.19;
@ -1098,7 +1098,7 @@
} }
.asset-section-count { .asset-section-count {
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #9BCACC; color: #9BCACC;
line-height: 1.19; line-height: 1.19;
@ -1113,7 +1113,7 @@
/* Asset Section Title */ /* Asset Section Title */
.asset-section-title { .asset-section-title {
font-size: 1.5rem; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #94FBE0; color: #94FBE0;
line-height: 1.19; line-height: 1.19;
@ -1128,7 +1128,7 @@
gap: 4px; gap: 4px;
background-color: #94FBE0; background-color: #94FBE0;
color: #000; color: #000;
font-size: 0.75rem; font-size: 12px;
font-weight: 600; font-weight: 600;
padding: 0 10px; padding: 0 10px;
height: 24px; height: 24px;
@ -1177,7 +1177,7 @@
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
background-color: #002224; background-color: #002224;
color: #9BCACC; color: #9BCACC;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
border: 1px solid #379599; border: 1px solid #379599;
border-radius: 8px; border-radius: 8px;
@ -1229,7 +1229,7 @@
.asset-image-placeholder-name { .asset-image-placeholder-name {
width: 100%; width: 100%;
font-size: 0.6875rem; font-size: 12px;
line-height: 1.2; line-height: 1.2;
color: #9BCACC; color: #9BCACC;
overflow: hidden; overflow: hidden;
@ -1243,7 +1243,7 @@
left: 8px; left: 8px;
background-color: #EFE3FE; background-color: #EFE3FE;
color: #AE72F9; color: #AE72F9;
font-size: 0.75rem; font-size: 12px;
font-weight: 600; font-weight: 600;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
@ -1308,7 +1308,7 @@
} }
.asset-upload-text { .asset-upload-text {
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #9BCACC; color: #9BCACC;
text-align: center; text-align: center;
@ -1352,7 +1352,7 @@
cursor: pointer; cursor: pointer;
transition: border-color 0.2s, background-color 0.2s; transition: border-color 0.2s, background-color 0.2s;
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 1.19; line-height: 1.19;
letter-spacing: -0.006em; letter-spacing: -0.006em;
@ -1374,7 +1374,7 @@
} }
.asset-ratio-subtitle { .asset-ratio-subtitle {
font-size: 0.875rem; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #9BCACC; color: #9BCACC;
} }
@ -1409,7 +1409,7 @@
.asset-next-button { .asset-next-button {
background-color: #AE72F9; background-color: #AE72F9;
color: #FFFFFF; color: #FFFFFF;
font-size: 0.875rem; font-size: 14px;
font-weight: 600; font-weight: 600;
padding: 10px 40px; padding: 10px 40px;
border: none; border: none;
@ -1432,7 +1432,7 @@
/* Responsive Styles */ /* Responsive Styles */
@media (max-width: 639px) { @media (max-width: 639px) {
.asset-title { .asset-title {
font-size: 1.5rem; font-size: 24px;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1447,7 +1447,7 @@
@media (min-width: 640px) and (max-width: 767px) { @media (min-width: 640px) and (max-width: 767px) {
.asset-title { .asset-title {
font-size: 1.75rem; font-size: 28px;
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
} }
@ -1459,7 +1459,7 @@
/* Height-based responsive adjustments */ /* Height-based responsive adjustments */
@media (max-height: 700px) { @media (max-height: 700px) {
.asset-title { .asset-title {
font-size: 1.75rem; font-size: 28px;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
} }

18
src/styles/tokens.css
View File

@ -8,7 +8,7 @@
:root { :root {
/* 모바일 하단 탭바 높이 (safe-area 포함). /* 모바일 하단 탭바 높이 (safe-area 포함).
탭바 자신과, 탭바에 가리면 안 되는 fixed 요소(캘린더 바텀시트 등)가 공유한다 */ 탭바 자신과, 탭바에 가리면 안 되는 fixed 요소(캘린더 바텀시트 등)가 공유한다 */
--bottom-nav-height: calc(64px + env(safe-area-inset-bottom)); --bottom-nav-height: calc(72px + env(safe-area-inset-bottom));
/* Primary Colors */ /* Primary Colors */
--color-mint: #a6ffea; --color-mint: #a6ffea;
@ -64,14 +64,14 @@
--radius-full: 9999px; --radius-full: 9999px;
/* Font Sizes */ /* Font Sizes */
--text-xs: 0.75rem; --text-xs: 12px;
--text-sm: 0.875rem; --text-sm: 14px;
--text-base: 1rem; --text-base: 16px;
--text-lg: 1.125rem; --text-lg: 18px;
--text-xl: 1.25rem; --text-xl: 20px;
--text-2xl: 1.5rem; --text-2xl: 24px;
--text-3xl: 1.875rem; --text-3xl: 30px;
--text-4xl: 2.25rem; --text-4xl: 36px;
/* Transitions */ /* Transitions */
--transition-fast: 150ms; --transition-fast: 150ms;