djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update styles in SASS files for improved responsiveness and consistency

Browse Source
This commit is contained in:
Rinjae
2026-01-07 16:26:29 +09:00
parent 868fb9a85d
commit f493518a8e
7 changed files with 200 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+7
View File
@@ -14,6 +14,13 @@
- Spring Security (커스텀 인증) - Spring Security (커스텀 인증)
- JPA/Hibernate 5.6.15 with Envers (감사 추적) - JPA/Hibernate 5.6.15 with Envers (감사 추적)
- MapStruct (DTO 매핑), Lombok (보일러플레이트 제거) - MapStruct (DTO 매핑), Lombok (보일러플레이트 제거)
- SASS/SCSS (CSS 전처리기) - 스타일 수정 시 반드시 SASS 파일 수정
**CSS/SASS 가이드:**
- CSS 파일(`src/main/resources/static/css/main.css`)은 SASS에서 컴파일된 결과물
- 스타일 수정 시 반드시 SASS 파일(`src/main/resources/static/sass/`)을 수정해야 함
- CSS 파일 직접 수정 금지 - SASS 파일 수정 후 컴파일 필요
- SASS 컴파일: `sass src/main/resources/static/sass/main.scss src/main/resources/static/css/main.css`
## Git 브랜치 전략 ## Git 브랜치 전략
src/main/resources/static/css/main.css
+96 -92
View File
@@ -1627,7 +1627,7 @@ hr {
} }
.footer-right .footer-contact { .footer-right .footer-contact {
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 30px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #1F2937; color: #1F2937;
margin: 0; margin: 0;
@@ -1635,7 +1635,7 @@ hr {
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.footer-right .footer-contact { .footer-right .footer-contact {
font-size: 24px; font-size: 16px;
} }
} }
@@ -2629,15 +2629,15 @@ hr {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 6px;
height: 60px; height: 40px;
padding: 10px 24px; padding: 8px 16px;
background-color: #3ba4ed; background-color: #3ba4ed;
color: #FFFFFF; color: #FFFFFF;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
font-size: 18px; font-size: 14px;
font-weight: 700; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
@@ -2646,8 +2646,8 @@ hr {
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.btn-upload { .btn-upload {
font-size: 16px; font-size: 13px;
height: 50px; height: 36px;
} }
} }
@@ -10787,11 +10787,11 @@ select.form-control {
.register-progress { .register-progress {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 40px; margin-bottom: 24px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.register-progress { .register-progress {
margin-bottom: 30px; margin-bottom: 20px;
padding: 0; padding: 0;
} }
} }
@@ -10799,11 +10799,11 @@ select.form-control {
.progress-steps { .progress-steps {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 50px; gap: 30px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.progress-steps { .progress-steps {
gap: 16px; gap: 12px;
align-items: center; align-items: center;
} }
} }
@@ -10850,8 +10850,8 @@ select.form-control {
} }
} }
.progress-step-item .step-icon { .progress-step-item .step-icon {
width: 62px; width: 50px;
height: 62px; height: 50px;
border-radius: 50%; border-radius: 50%;
background-color: #e6e6e6; background-color: #e6e6e6;
display: flex; display: flex;
@@ -10861,18 +10861,18 @@ select.form-control {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.progress-step-item .step-icon { .progress-step-item .step-icon {
width: 44px; width: 40px;
height: 44px; height: 40px;
} }
} }
.progress-step-item .step-icon .step-icon-img { .progress-step-item .step-icon .step-icon-img {
width: 36px; width: 28px;
height: 36px; height: 28px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.progress-step-item .step-icon .step-icon-img { .progress-step-item .step-icon .step-icon-img {
width: 24px; width: 22px;
height: 24px; height: 22px;
} }
} }
.progress-step-item.active .step-icon { .progress-step-item.active .step-icon {
@@ -10902,11 +10902,11 @@ select.form-control {
} }
.register-form-container { .register-form-container {
padding: 50px 45px; padding: 30px 30px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.register-form-container { .register-form-container {
padding: 30px 20px; padding: 20px 16px;
} }
} }
.register-form-container.with-sidebar { .register-form-container.with-sidebar {
@@ -10975,21 +10975,21 @@ select.form-control {
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: 12px; border-radius: 12px;
padding: 50px 40px; padding: 24px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 26px; gap: 16px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.icon-upload-box { .icon-upload-box {
padding: 30px 20px; padding: 20px 16px;
} }
} }
.icon-preview-area { .icon-preview-area {
width: 100px; width: 80px;
height: 100px; height: 80px;
position: relative; position: relative;
} }
.icon-preview-area img { .icon-preview-area img {
@@ -11033,19 +11033,19 @@ select.form-control {
text-align: center; text-align: center;
} }
.icon-upload-info .upload-title { .icon-upload-info .upload-title {
font-size: 16px; font-size: 14px;
font-weight: 700; font-weight: 600;
color: #515961; color: #515961;
margin: 0 0 11px; margin: 0 0 8px;
} }
.icon-upload-info .upload-hint { .icon-upload-info .upload-hint {
font-size: 14px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #515961; color: #515961;
margin: 0; margin: 0;
} }
.icon-upload-info .upload-hint strong { .icon-upload-info .upload-hint strong {
font-weight: 700; font-weight: 600;
} }
.ip-input-row { .ip-input-row {
@@ -11077,14 +11077,15 @@ select.form-control {
} }
.btn-add-ip { .btn-add-ip {
width: 158px; width: auto;
height: 60px; height: 40px;
padding: 0 16px;
background-color: #3ba4ed; background-color: #3ba4ed;
color: #FFFFFF; color: #FFFFFF;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
font-size: 20px; font-size: 14px;
font-weight: 700; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
flex-shrink: 0; flex-shrink: 0;
@@ -11094,18 +11095,18 @@ select.form-control {
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.btn-add-ip { .btn-add-ip {
width: 100%; width: auto;
font-size: 16px; font-size: 14px;
height: 50px; height: 38px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.btn-add-ip { .btn-add-ip {
width: 89px; width: auto;
height: 40px; height: 36px;
font-size: 12px; font-size: 13px;
border-radius: 8px; border-radius: 8px;
padding: 0; padding: 0 12px;
} }
} }
@@ -12765,37 +12766,38 @@ input[type=checkbox]:checked + .custom-checkbox {
.app-info-card { .app-info-card {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 32px; gap: 20px;
padding: 0; padding: 0;
padding-top: 27px; padding-top: 20px;
margin-bottom: 64px; margin-bottom: 30px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.app-info-card { .app-info-card {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 24px 0; padding: 16px 0;
gap: 24px; gap: 16px;
} }
} }
.app-info-icon { .app-info-icon {
flex-shrink: 0; flex-shrink: 0;
width: 160px; width: 100px;
height: 160px; height: 100px;
border-radius: 16px; border-radius: 12px;
overflow: hidden; overflow: hidden;
background: #F8FAFC; background: #F8FAFC;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 87px; margin-left: 40px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.app-info-icon { .app-info-icon {
width: 120px; width: 80px;
height: 120px; height: 80px;
margin-left: 0;
} }
} }
.app-info-icon .app-icon-image { .app-info-icon .app-icon-image {
@@ -12814,14 +12816,14 @@ input[type=checkbox]:checked + .custom-checkbox {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 8px;
} }
.app-status-badge { .app-status-badge {
display: inline-block; display: inline-block;
padding: 4px 24px; padding: 3px 12px;
border-radius: 50px; border-radius: 50px;
font-size: 14px; font-size: 12px;
font-weight: 600; font-weight: 600;
width: fit-content; width: fit-content;
} }
@@ -12843,46 +12845,46 @@ input[type=checkbox]:checked + .custom-checkbox {
} }
.app-info-name { .app-info-name {
font-size: 24px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #1A1A2E; color: #1A1A2E;
margin: 0; margin: 0;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.app-info-name { .app-info-name {
font-size: 20px; font-size: 16px;
} }
} }
.app-info-description { .app-info-description {
font-size: 18px; font-size: 14px;
color: #515151; color: #515151;
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.app-info-description { .app-info-description {
font-size: 16px; font-size: 13px;
} }
} }
.apikey-info-section { .apikey-info-section {
background: #F6F9FB; background: #F6F9FB;
border-radius: 12px; border-radius: 12px;
padding: 48px 40px; padding: 24px 30px;
margin-bottom: 40px; margin-bottom: 30px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.apikey-info-section { .apikey-info-section {
padding: 24px; padding: 20px;
} }
} }
.info-row { .info-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 32px; gap: 20px;
margin-bottom: 32px; margin-bottom: 16px;
} }
.info-row:last-child { .info-row:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -12892,6 +12894,7 @@ input[type=checkbox]:checked + .custom-checkbox {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
margin-bottom: 12px;
} }
} }
@@ -12910,20 +12913,20 @@ input[type=checkbox]:checked + .custom-checkbox {
.info-label { .info-label {
flex-shrink: 0; flex-shrink: 0;
width: 140px; width: 140px;
font-size: 20px; font-size: 15px;
font-weight: 700; font-weight: 600;
color: #212529; color: #212529;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.info-label { .info-label {
width: 100%; width: 100%;
font-size: 16px; font-size: 14px;
} }
} }
.info-value { .info-value {
flex: 1; flex: 1;
font-size: 16px; font-size: 14px;
color: #1A1A2E; color: #1A1A2E;
word-break: break-word; word-break: break-word;
} }
@@ -12937,19 +12940,20 @@ input[type=checkbox]:checked + .custom-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 60px; height: 40px;
padding: 0 24px; padding: 0 16px;
background: #DDDDDD; background: #F8FAFC;
border-radius: 12px; border: 1px solid #E2E8F0;
font-size: 20px; border-radius: 8px;
color: #515151; font-size: 14px;
color: #1A1A2E;
text-align: center; text-align: center;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.info-value-box { .info-value-box {
height: 50px; height: 36px;
font-size: 16px; font-size: 14px;
padding: 0 16px; padding: 0 12px;
} }
} }
.info-value-box.with-copy { .info-value-box.with-copy {
@@ -12958,7 +12962,7 @@ input[type=checkbox]:checked + .custom-checkbox {
.info-row-with-action .info-value { .info-row-with-action .info-value {
display: flex; display: flex;
gap: 16px; gap: 12px;
align-items: center; align-items: center;
} }
@@ -12967,14 +12971,14 @@ input[type=checkbox]:checked + .custom-checkbox {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
height: 60px; height: 40px;
width: 158px; width: auto;
padding: 0 24px; padding: 0 16px;
background: #A4D6EA; background: #A4D6EA;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
font-size: 20px; font-size: 14px;
font-weight: 700; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -12985,9 +12989,9 @@ input[type=checkbox]:checked + .custom-checkbox {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.btn-copy-action { .btn-copy-action {
height: 50px; height: 36px;
font-size: 16px; font-size: 13px;
padding: 0 16px; padding: 0 12px;
} }
} }
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/components/_buttons.scss
+8 -8
View File
@@ -548,15 +548,15 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 6px;
height: 60px; height: 40px;
padding: 10px 24px; padding: 8px 16px;
background-color: #3ba4ed; background-color: #3ba4ed;
color: $white; color: $white;
border: none; border: none;
border-radius: $border-radius-lg; border-radius: $border-radius-md;
font-size: 18px; font-size: 14px;
font-weight: $font-weight-bold; font-weight: $font-weight-semibold;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
@@ -565,7 +565,7 @@
} }
@include respond-to('md') { @include respond-to('md') {
font-size: 16px; font-size: 13px;
height: 50px; height: 36px;
} }
} }
src/main/resources/static/sass/layout/_footer.scss
+2 -2
View File
@@ -127,14 +127,14 @@
.footer-contact { .footer-contact {
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 30px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #1F2937; color: #1F2937;
margin: 0; margin: 0;
line-height: 1.2; line-height: 1.2;
@include respond-to('md') { @include respond-to('md') {
font-size: 24px; font-size: 16px;
} }
} }
} }
src/main/resources/static/sass/pages/_apikey-detail.scss
+49 -46
View File
@@ -276,35 +276,36 @@
.app-info-card { .app-info-card {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: $spacing-xl; gap: 20px;
padding: 0; padding: 0;
padding-top: 27px; padding-top: 20px;
margin-bottom: $spacing-4xl; margin-bottom: 30px;
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: $spacing-lg 0; padding: $spacing-md 0;
gap: $spacing-lg; gap: $spacing-md;
} }
} }
.app-info-icon { .app-info-icon {
flex-shrink: 0; flex-shrink: 0;
width: 160px; width: 100px;
height: 160px; height: 100px;
border-radius: $border-radius-xl; border-radius: $border-radius-lg;
overflow: hidden; overflow: hidden;
background: $gray-bg; background: $gray-bg;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 87px; margin-left: 40px;
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
width: 120px; width: 80px;
height: 120px; height: 80px;
margin-left: 0;
} }
.app-icon-image { .app-icon-image {
@@ -325,14 +326,14 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-md; gap: $spacing-sm;
} }
.app-status-badge { .app-status-badge {
display: inline-block; display: inline-block;
padding: $spacing-xs $spacing-lg; padding: 3px 12px;
border-radius: $border-radius-full; border-radius: $border-radius-full;
font-size: $font-size-sm; font-size: 12px;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
width: fit-content; width: fit-content;
@@ -358,24 +359,24 @@
} }
.app-info-name { .app-info-name {
font-size: 24px; font-size: 18px;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
color: $text-dark; color: $text-dark;
margin: 0; margin: 0;
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
font-size: 20px; font-size: 16px;
} }
} }
.app-info-description { .app-info-description {
font-size: 18px; font-size: 14px;
color: #515151; color: #515151;
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
font-size: $font-size-base; font-size: 13px;
} }
} }
@@ -388,19 +389,19 @@
.apikey-info-section { .apikey-info-section {
background: #F6F9FB; background: #F6F9FB;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
padding: $spacing-3xl $spacing-2xl; padding: 24px 30px;
margin-bottom: $spacing-2xl; margin-bottom: 30px;
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
padding: $spacing-lg; padding: 20px;
} }
} }
.info-row { .info-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-xl; gap: 20px;
margin-bottom: $spacing-xl; margin-bottom: 16px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -410,6 +411,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: $spacing-sm; gap: $spacing-sm;
margin-bottom: 12px;
} }
} }
@@ -428,19 +430,19 @@
.info-label { .info-label {
flex-shrink: 0; flex-shrink: 0;
width: 140px; width: 140px;
font-size: 20px; font-size: 15px;
font-weight: $font-weight-bold; font-weight: $font-weight-semibold;
color: #212529; color: #212529;
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
width: 100%; width: 100%;
font-size: $font-size-base; font-size: 14px;
} }
} }
.info-value { .info-value {
flex: 1; flex: 1;
font-size: $font-size-base; font-size: 14px;
color: $text-dark; color: $text-dark;
word-break: break-word; word-break: break-word;
@@ -454,18 +456,19 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 60px; height: 40px;
padding: 0 $spacing-lg; padding: 0 16px;
background: #DDDDDD; background: $gray-bg;
border-radius: $border-radius-lg; border: 1px solid $border-gray;
font-size: 20px; border-radius: $border-radius-md;
color: #515151; font-size: 14px;
color: $text-dark;
text-align: center; text-align: center;
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
height: 50px; height: 36px;
font-size: $font-size-base; font-size: 14px;
padding: 0 $spacing-md; padding: 0 12px;
} }
&.with-copy { &.with-copy {
@@ -477,7 +480,7 @@
.info-row-with-action { .info-row-with-action {
.info-value { .info-value {
display: flex; display: flex;
gap: $spacing-md; gap: 12px;
align-items: center; align-items: center;
} }
} }
@@ -487,14 +490,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: $spacing-xs; gap: $spacing-xs;
height: 60px; height: 40px;
width: 158px; width: auto;
padding: 0 $spacing-lg; padding: 0 16px;
background: #A4D6EA; background: #A4D6EA;
border: none; border: none;
border-radius: $border-radius-lg; border-radius: $border-radius-md;
font-size: 20px; font-size: 14px;
font-weight: $font-weight-bold; font-weight: $font-weight-semibold;
color: $white; color: $white;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -505,9 +508,9 @@
} }
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
height: 50px; height: 36px;
font-size: $font-size-base; font-size: 13px;
padding: 0 $spacing-md; padding: 0 12px;
} }
} }
src/main/resources/static/sass/pages/_apikey-register.scss
+37 -36
View File
@@ -72,11 +72,11 @@
.register-progress { .register-progress {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 40px; margin-bottom: 24px;
// Figma 모바일 (1290-4164): 스텝 영역 조정 // Figma 모바일 (1290-4164): 스텝 영역 조정
@include respond-to('sm') { @include respond-to('sm') {
margin-bottom: 30px; margin-bottom: 20px;
padding: 0; padding: 0;
} }
} }
@@ -84,11 +84,11 @@
.progress-steps { .progress-steps {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 50px; gap: 30px;
// Figma 모바일: gap 16px, 점선과 아이콘 사이 간격 // Figma 모바일: gap 16px, 점선과 아이콘 사이 간격
@include respond-to('sm') { @include respond-to('sm') {
gap: 16px; gap: 12px;
align-items: center; align-items: center;
} }
} }
@@ -140,8 +140,8 @@
} }
.step-icon { .step-icon {
width: 62px; width: 50px;
height: 62px; height: 50px;
border-radius: $border-radius-circle; border-radius: $border-radius-circle;
background-color: #e6e6e6; background-color: #e6e6e6;
display: flex; display: flex;
@@ -151,18 +151,18 @@
// Figma 모바일 (1290-4234): 24px 아이콘 + 10px 패딩 = 44px 원 // Figma 모바일 (1290-4234): 24px 아이콘 + 10px 패딩 = 44px 원
@include respond-to('sm') { @include respond-to('sm') {
width: 44px; width: 40px;
height: 44px; height: 40px;
} }
.step-icon-img { .step-icon-img {
width: 36px; width: 28px;
height: 36px; height: 28px;
// Figma 모바일: 24px 아이콘 // Figma 모바일: 24px 아이콘
@include respond-to('sm') { @include respond-to('sm') {
width: 24px; width: 22px;
height: 24px; height: 22px;
} }
} }
} }
@@ -199,10 +199,10 @@
// Form Container (Step 1) - extends common // Form Container (Step 1) - extends common
.register-form-container { .register-form-container {
@extend .common-section-box; @extend .common-section-box;
padding: 50px 45px; padding: 30px 30px;
@include respond-to('md') { @include respond-to('md') {
padding: 30px 20px; padding: 20px 16px;
} }
// With Sidebar variant (Step 2) // With Sidebar variant (Step 2)
@@ -283,20 +283,20 @@
background-color: $white; background-color: $white;
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
padding: 50px 40px; padding: 24px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 26px; gap: 16px;
@include respond-to('md') { @include respond-to('md') {
padding: 30px 20px; padding: 20px 16px;
} }
} }
.icon-preview-area { .icon-preview-area {
width: 100px; width: 80px;
height: 100px; height: 80px;
position: relative; position: relative;
img { img {
@@ -342,20 +342,20 @@
text-align: center; text-align: center;
.upload-title { .upload-title {
font-size: 16px; font-size: 14px;
font-weight: $font-weight-bold; font-weight: $font-weight-semibold;
color: #515961; color: #515961;
margin: 0 0 11px; margin: 0 0 8px;
} }
.upload-hint { .upload-hint {
font-size: 14px; font-size: 13px;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: #515961; color: #515961;
margin: 0; margin: 0;
strong { strong {
font-weight: $font-weight-bold; font-weight: $font-weight-semibold;
} }
} }
} }
@@ -393,14 +393,15 @@
} }
.btn-add-ip { .btn-add-ip {
width: 158px; width: auto;
height: 60px; height: 40px;
padding: 0 16px;
background-color: #3ba4ed; background-color: #3ba4ed;
color: $white; color: $white;
border: none; border: none;
border-radius: $border-radius-lg; border-radius: $border-radius-md;
font-size: 20px; font-size: 14px;
font-weight: $font-weight-bold; font-weight: $font-weight-semibold;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
flex-shrink: 0; flex-shrink: 0;
@@ -410,18 +411,18 @@
} }
@include respond-to('md') { @include respond-to('md') {
width: 100%; width: auto;
font-size: 16px; font-size: 14px;
height: 50px; height: 38px;
} }
// Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold
@include respond-to('sm') { @include respond-to('sm') {
width: 89px; width: auto;
height: 40px; height: 36px;
font-size: 12px; font-size: 13px;
border-radius: 8px; border-radius: 8px;
padding: 0; padding: 0 12px;
} }
} }