shared-dg05-dodari/kt-event-marketing
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing.git synced 2026-01-21 22:46:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

07-14번 화면 파란색을 따뜻한 붉은 계열로 통일

Browse Source 
- 인라인 CSS 변수 수정 (#0066FF → #FF6B6B)
- 배경 그라디언트를 붉은 톤으로 변경 (#F8F9FF → #FFF5F5)
- 모든 화면의 색상 통일감 확보

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
doyeon 2025-10-21 10:11:42 +09:00
parent 2833a596ab
commit 8c07bcc0d8
8 changed files with 49 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
design/uiux/prototype/07-AI참여방법설계.html
View File

@ -18,14 +18,14 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-hover: #C71820; --color-primary-hover: #C71820;
--color-primary-light: #FF4D52; --color-primary-light: #FF4D52;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-hover: #004DBF; --color-secondary-hover: #FF5252;
--color-secondary-light: #4D94FF; --color-secondary-light: #FF8787;
--color-success: #00C853; --color-success: #00C853;
--color-warning: #FFA000; --color-warning: #FFA000;
--color-error: #D32F2F; --color-error: #D32F2F;
--color-info: #0288D1; --color-info: #FF9800;
--color-gray-50: #F8F9FA; --color-gray-50: #F8F9FA;
--color-gray-100: #F1F3F5; --color-gray-100: #F1F3F5;
@ -82,7 +82,7 @@
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
color: var(--color-gray-900); color: var(--color-gray-900);
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
min-height: 100vh; min-height: 100vh;
@ -186,13 +186,13 @@
.method-card--selected { .method-card--selected {
border-color: var(--color-secondary); border-color: var(--color-secondary);
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
box-shadow: var(--shadow-l); box-shadow: var(--shadow-l);
} }
.method-card--recommended { .method-card--recommended {
border-color: var(--color-secondary); border-color: var(--color-secondary);
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
} }
.method-card__badge { .method-card__badge {
@ -360,7 +360,7 @@
.custom-method__input:focus { .custom-method__input:focus {
outline: none; outline: none;
border-color: var(--color-secondary); border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
} }
.custom-method__hint { .custom-method__hint {

16
design/uiux/prototype/08-AI홍보문구생성.html
View File

@ -11,9 +11,9 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-dark: #C41E24; --color-primary-dark: #C41E24;
--color-primary-light: #FFE9EA; --color-primary-light: #FFE9EA;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-dark: #0052CC; --color-secondary-dark: #FF5252;
--color-secondary-light: #E0EFFF; --color-secondary-light: #FFE9E9;
--color-success: #00C853; --color-success: #00C853;
--color-success-light: #E8F5E9; --color-success-light: #E8F5E9;
--color-error: #FF3B30; --color-error: #FF3B30;
@ -99,7 +99,7 @@
/* Layout */ /* Layout */
.copy-container { .copy-container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
} }
@ -149,7 +149,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 4px solid rgba(0, 102, 255, 0.1); border: 4px solid rgba(255, 107, 107, 0.1);
border-radius: 50%; border-radius: 50%;
border-top-color: var(--color-secondary); border-top-color: var(--color-secondary);
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@ -277,13 +277,13 @@
.copy-card--selected { .copy-card--selected {
border-color: var(--color-secondary); border-color: var(--color-secondary);
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }
.copy-card--recommended { .copy-card--recommended {
border-color: var(--color-secondary); border-color: var(--color-secondary);
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
} }
.copy-card__badge { .copy-card__badge {
@ -474,7 +474,7 @@
.form-group__textarea:focus { .form-group__textarea:focus {
outline: none; outline: none;
border-color: var(--color-secondary); border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
} }
.edit-modal__actions { .edit-modal__actions {

10
design/uiux/prototype/09-AI이미지생성.html
View File

@ -11,9 +11,9 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-dark: #B71C1C; --color-primary-dark: #B71C1C;
--color-primary-light: #FFEBEE; --color-primary-light: #FFEBEE;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-dark: #0052CC; --color-secondary-dark: #FF5252;
--color-secondary-light: #E3F2FD; --color-secondary-light: #FFE9E9;
--color-success: #4CAF50; --color-success: #4CAF50;
--color-success-light: #E8F5E9; --color-success-light: #E8F5E9;
--color-warning: #FF9800; --color-warning: #FF9800;
@ -137,7 +137,7 @@
/* Layout */ /* Layout */
.image-container { .image-container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
} }
@ -248,7 +248,7 @@
.image-item { .image-item {
position: relative; position: relative;
aspect-ratio: 1; aspect-ratio: 1;
background: linear-gradient(135deg, #E0E7FF 0%, #F0F7FF 100%); background: linear-gradient(135deg, #FFE9E9 0%, #FFF5F5 100%);
border-radius: var(--radius-l); border-radius: var(--radius-l);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;

8
design/uiux/prototype/10-AI영상제작.html
View File

@ -11,9 +11,9 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-dark: #B71C1C; --color-primary-dark: #B71C1C;
--color-primary-light: #FFEBEE; --color-primary-light: #FFEBEE;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-dark: #0052CC; --color-secondary-dark: #FF5252;
--color-secondary-light: #E3F2FD; --color-secondary-light: #FFE9E9;
--color-success: #4CAF50; --color-success: #4CAF50;
--color-success-light: #E8F5E9; --color-success-light: #E8F5E9;
--color-warning: #FF9800; --color-warning: #FF9800;
@ -137,7 +137,7 @@
/* Layout */ /* Layout */
.video-container { .video-container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
} }

14
design/uiux/prototype/11-SNS콘텐츠생성.html
View File

@ -11,9 +11,9 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-dark: #B71C1C; --color-primary-dark: #B71C1C;
--color-primary-light: #FFEBEE; --color-primary-light: #FFEBEE;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-dark: #0052CC; --color-secondary-dark: #FF5252;
--color-secondary-light: #E3F2FD; --color-secondary-light: #FFE9E9;
--color-success: #4CAF50; --color-success: #4CAF50;
--color-success-light: #E8F5E9; --color-success-light: #E8F5E9;
--color-warning: #FF9800; --color-warning: #FF9800;
@ -137,7 +137,7 @@
/* Layout */ /* Layout */
.sns-container { .sns-container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
} }
@ -230,7 +230,7 @@
.platform-card__header { .platform-card__header {
padding: var(--spacing-m); padding: var(--spacing-m);
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -297,7 +297,7 @@
.post-preview__header { .post-preview__header {
padding: var(--spacing-s); padding: var(--spacing-s);
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-s); gap: var(--spacing-s);
@ -324,7 +324,7 @@
.post-preview__image { .post-preview__image {
width: 100%; width: 100%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
background: linear-gradient(135deg, #E0E7FF 0%, #F0F7FF 100%); background: linear-gradient(135deg, #FFE9E9 0%, #FFF5F5 100%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

10
design/uiux/prototype/12-QR포스터생성.html
View File

@ -11,9 +11,9 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-dark: #B71C1C; --color-primary-dark: #B71C1C;
--color-primary-light: #FFEBEE; --color-primary-light: #FFEBEE;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-dark: #0052CC; --color-secondary-dark: #FF5252;
--color-secondary-light: #E3F2FD; --color-secondary-light: #FFE9E9;
--color-success: #4CAF50; --color-success: #4CAF50;
--color-success-light: #E8F5E9; --color-success-light: #E8F5E9;
--color-warning: #FF9800; --color-warning: #FF9800;
@ -137,7 +137,7 @@
/* Layout */ /* Layout */
.qr-container { .qr-container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
} }
@ -242,7 +242,7 @@
/* Info Card */ /* Info Card */
.info-card { .info-card {
background: linear-gradient(135deg, #E3F2FD 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFE9E9 0%, #FFFFFF 100%);
border-left: 4px solid var(--color-secondary); border-left: 4px solid var(--color-secondary);
padding: var(--spacing-m); padding: var(--spacing-m);
border-radius: var(--radius-m); border-radius: var(--radius-m);

8
design/uiux/prototype/13-콘텐츠편집.html
View File

@ -11,9 +11,9 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-dark: #B71C1C; --color-primary-dark: #B71C1C;
--color-primary-light: #FFEBEE; --color-primary-light: #FFEBEE;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-dark: #0052CC; --color-secondary-dark: #FF5252;
--color-secondary-light: #E3F2FD; --color-secondary-light: #FFE9E9;
--color-success: #4CAF50; --color-success: #4CAF50;
--color-success-light: #E8F5E9; --color-success-light: #E8F5E9;
--color-warning: #FF9800; --color-warning: #FF9800;
@ -141,7 +141,7 @@
/* Layout */ /* Layout */
.edit-container { .edit-container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
} }

16
design/uiux/prototype/14-콘텐츠최종승인.html
View File

@ -11,9 +11,9 @@
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-dark: #B71C1C; --color-primary-dark: #B71C1C;
--color-primary-light: #FFEBEE; --color-primary-light: #FFEBEE;
--color-secondary: #0066FF; --color-secondary: #FF6B6B;
--color-secondary-dark: #0052CC; --color-secondary-dark: #FF5252;
--color-secondary-light: #E3F2FD; --color-secondary-light: #FFE9E9;
--color-success: #4CAF50; --color-success: #4CAF50;
--color-success-light: #E8F5E9; --color-success-light: #E8F5E9;
--color-warning: #FF9800; --color-warning: #FF9800;
@ -137,7 +137,7 @@
/* Layout */ /* Layout */
.approval-container { .approval-container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
} }
@ -230,7 +230,7 @@
.content-card__header { .content-card__header {
padding: var(--spacing-m); padding: var(--spacing-m);
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -284,7 +284,7 @@
.image-item { .image-item {
aspect-ratio: 1; aspect-ratio: 1;
background: linear-gradient(135deg, #E0E7FF 0%, #F0F7FF 100%); background: linear-gradient(135deg, #FFE9E9 0%, #FFF5F5 100%);
border-radius: var(--radius-m); border-radius: var(--radius-m);
display: flex; display: flex;
align-items: center; align-items: center;
@ -301,7 +301,7 @@
.sns-item { .sns-item {
padding: var(--spacing-s); padding: var(--spacing-s);
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
border-radius: var(--radius-m); border-radius: var(--radius-m);
display: flex; display: flex;
align-items: center; align-items: center;
@ -343,7 +343,7 @@
/* Poster Preview */ /* Poster Preview */
.poster-preview { .poster-preview {
aspect-ratio: 3 / 4; aspect-ratio: 3 / 4;
background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%); background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
border-radius: var(--radius-m); border-radius: var(--radius-m);
padding: var(--spacing-l); padding: var(--spacing-l);
display: flex; display: flex;