style: disable global text selection to prevent accidental UI dragging
This commit is contained in:
@@ -1,59 +1,43 @@
|
||||
:root {
|
||||
/* --- System Colors --- */
|
||||
--color-red: #F21D0D;
|
||||
--color-pink: #E8175E;
|
||||
--color-magenta: #B92ED1;
|
||||
--color-purple: #6D3DC2;
|
||||
--color-navy: #4255bd;
|
||||
--color-blue: #0D8DF2;
|
||||
--color-cyan: #03AEFC;
|
||||
--color-green: #4DB251;
|
||||
--color-yellow: #FFBF00;
|
||||
--color-orange: #FF9800;
|
||||
--color-dahong: #FF3D00;
|
||||
--color-brown: #A0705F;
|
||||
--color-iron: #7F7F7F;
|
||||
--color-steel: #688897;
|
||||
/* --- Vercel Stark Palette --- */
|
||||
--primary: #171717;
|
||||
--on-primary: #ffffff;
|
||||
--body: #4d4d4d;
|
||||
--mute: #888888;
|
||||
--hairline: #ebebeb;
|
||||
--hairline-strong: #a1a1a1;
|
||||
--canvas: #ffffff;
|
||||
--canvas-soft: #fafafa;
|
||||
--canvas-soft-2: #f5f5f5;
|
||||
|
||||
/* --- Brand Accents --- */
|
||||
--color-blue: #0070f3;
|
||||
--color-cyan: #50e3c2;
|
||||
--color-pink: #ff0080;
|
||||
--color-violet: #7928ca;
|
||||
--color-orange: #f5a623;
|
||||
|
||||
/* --- Primary Brand Levels --- */
|
||||
--primary-lv-0: #E9EEED;
|
||||
--primary-lv-1: #D2DCDB;
|
||||
--primary-lv-2: #A5B9B6;
|
||||
--primary-lv-3: #789792;
|
||||
--primary-lv-4: #4B746D;
|
||||
--primary-lv-5: #35635C;
|
||||
--primary-lv-6: #1E5149;
|
||||
--primary-lv-7: #1B443D;
|
||||
--primary-lv-8: #193833;
|
||||
--primary-lv-9: #162A27;
|
||||
|
||||
/* --- Semantic Colors --- */
|
||||
--primary-color: var(--primary-lv-6);
|
||||
--primary-hover: var(--primary-lv-5);
|
||||
--primary-light: var(--primary-lv-0);
|
||||
|
||||
--edit-mode-color: var(--color-dahong);
|
||||
--edit-mode-light: rgba(255, 61, 0, 0.1);
|
||||
--edit-mode-focus: rgba(255, 61, 0, 0.3);
|
||||
--edit-mode-dark: #cc3100;
|
||||
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border-color: #E5E7EB;
|
||||
--bg-color: #F9FAFB;
|
||||
--bg-light: #FAFAFA;
|
||||
/* --- Semantic Alignment --- */
|
||||
--primary-color: var(--primary);
|
||||
--primary-hover: #000000;
|
||||
--primary-light: var(--canvas-soft-2);
|
||||
--text-main: var(--primary);
|
||||
--text-muted: var(--body);
|
||||
--border-color: var(--hairline);
|
||||
--bg-color: var(--canvas-soft);
|
||||
--bg-light: var(--canvas-soft-2);
|
||||
--white: #FFFFFF;
|
||||
--danger: var(--color-red);
|
||||
--success: var(--color-green);
|
||||
--header-height: 101px;
|
||||
--danger: #ee0000;
|
||||
--success: #0070f3;
|
||||
--header-height: 64px;
|
||||
|
||||
/* --- Global Typography Scale --- */
|
||||
/* --- Global Typography Scale (Strict 16px Base) --- */
|
||||
--fs-xs: 12px;
|
||||
--fs-sm: 14px;
|
||||
--fs-base: 16px;
|
||||
--fs-md: 19px;
|
||||
--fs-lg: 23px;
|
||||
--fs-xl: 29px;
|
||||
--fs-md: 20px;
|
||||
--fs-lg: 32px;
|
||||
--fs-xl: 48px;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -63,15 +47,31 @@
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h1, h2, h3, .stat-value {
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard Variable', Pretendard, sans-serif;
|
||||
font-family: 'Inter', 'Geist', 'Pretendard Variable', -apple-system, sans-serif;
|
||||
color: var(--text-main);
|
||||
background-color: var(--bg-color);
|
||||
line-height: 1.5;
|
||||
font-size: var(--fs-base);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden; /* 강제 스크롤 제거 */
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
@@ -84,58 +84,47 @@ body {
|
||||
|
||||
/* --- Header --- */
|
||||
.main-header {
|
||||
background-color: var(--white);
|
||||
background-color: var(--canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
z-index: 100;
|
||||
height: var(--header-height);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-top-row {
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.header-bottom-row {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
background-color: var(--bg-light);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.brand { display: flex; align-items: center; gap: 0.75rem; }
|
||||
.main-logo { height: 34px; width: auto; }
|
||||
.brand h1 { font-size: 1.47rem; font-weight: 900; color: var(--text-main); white-space: nowrap; }
|
||||
.brand h1 .sub-title { font-size: 1.13rem; color: var(--primary-color); font-weight: 700; margin-left: 0.25rem; }
|
||||
.main-logo { height: 26px; width: auto; }
|
||||
.brand h1 { font-size: 1.1rem; font-weight: 600; color: var(--text-main); }
|
||||
|
||||
.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 2.5rem; overflow: hidden; }
|
||||
.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
|
||||
.nav-group-items { display: flex; align-items: center; gap: 0.25rem; height: 100%; }
|
||||
.gnb-trigger { font-size: 17px; font-weight: 800; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; border-bottom: 3px solid transparent; }
|
||||
.gnb-trigger:hover { color: var(--text-main); }
|
||||
.gnb-trigger.active { color: var(--primary-color); font-weight: 900; border-bottom-color: var(--primary-color); background-color: var(--primary-lv-0); }
|
||||
.integrated-nav { flex: 1; display: flex; align-items: center; margin-left: 2rem; gap: 0.5rem; }
|
||||
.gnb-trigger {
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
padding: 0.4rem 0.75rem;
|
||||
cursor: pointer;
|
||||
border-radius: 9999px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.gnb-trigger:hover { color: var(--text-main); background: var(--canvas-soft-2); }
|
||||
.gnb-trigger.active { color: var(--text-main); font-weight: 600; background: var(--canvas-soft-2); }
|
||||
|
||||
/* --- Layout Content --- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 0; /* 모든 뷰에서 공간 꽉 채우기 */
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.view-container {
|
||||
@@ -144,96 +133,289 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- View Toggle (Minimal Line-based) --- */
|
||||
.view-toggle-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* --- View Toggle (Vercel Tab Style) --- */
|
||||
.view-toggle {
|
||||
display: inline-flex;
|
||||
background: #f1f5f9;
|
||||
padding: 0.25rem;
|
||||
border: 1px solid var(--border-color);
|
||||
gap: 0.25rem;
|
||||
background: var(--canvas-soft-2);
|
||||
padding: 0.2rem;
|
||||
border: 1px solid var(--hairline);
|
||||
gap: 0.1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0.4rem 1rem;
|
||||
padding: 0.35rem 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
transition: all 0.1s;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.toggle-btn:hover { color: var(--text-main); }
|
||||
.toggle-btn.active {
|
||||
background: var(--white);
|
||||
color: var(--primary-color);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
background: var(--canvas);
|
||||
color: var(--text-main);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
.main-footer {
|
||||
height: 28px;
|
||||
background-color: var(--white);
|
||||
border-top: 1px solid var(--border-color);
|
||||
/* --- Role Toggle Switch --- */
|
||||
.role-toggle-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 1.5rem;
|
||||
flex-shrink: 0;
|
||||
gap: 0.75rem;
|
||||
background: var(--canvas-soft-2);
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid var(--hairline);
|
||||
}
|
||||
|
||||
.main-footer p {
|
||||
.role-label {
|
||||
font-size: var(--fs-xs);
|
||||
color: #777777;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
color: var(--mute);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* --- Utility Styles --- */
|
||||
.role-label.active {
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.role-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.role-toggle input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.role-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--hairline-strong);
|
||||
transition: .4s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.role-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
input:checked + .role-slider {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
input:checked + .role-slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* --- Utility Styles (The Standard) --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0 1rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
gap: 0.4rem;
|
||||
padding: 0 1.25rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
height: 34px;
|
||||
height: 36px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-primary { background-color: var(--primary-color); color: var(--white); }
|
||||
.btn-primary:hover { background-color: var(--primary-hover); }
|
||||
.btn-primary { background-color: var(--primary); color: var(--on-primary); }
|
||||
.btn-primary:hover { background-color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
|
||||
.btn-outline { background-color: var(--white); color: var(--text-muted); border: 1px solid var(--border-color); }
|
||||
.btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); }
|
||||
.btn-outline { background-color: var(--canvas); color: var(--text-main); border: 1px solid var(--hairline); }
|
||||
.btn-outline:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
|
||||
|
||||
.btn-sm { height: 28px; padding: 0 0.75rem; font-size: var(--fs-xs); }
|
||||
.btn-sm { height: 30px; padding: 0 1rem; font-size: var(--fs-xs); }
|
||||
.btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
|
||||
|
||||
.badge { padding: 2px 8px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
|
||||
.badge-primary { background-color: var(--primary-color); color: white; }
|
||||
/* --- Form Elements --- */
|
||||
.form-select-sm {
|
||||
height: 32px;
|
||||
padding: 0 0.5rem;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 6px;
|
||||
font-size: var(--fs-xs);
|
||||
outline: none;
|
||||
background-color: var(--canvas);
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* PC 성능 등급 뱃지 컬러 스타일 */
|
||||
.badge.b-purple { background-color: #EDE9FE; color: #7C3AED; border: 1px solid #DDD6FE; }
|
||||
.badge.b-primary { background-color: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }
|
||||
.badge.b-green { background-color: #D1FAE5; color: #047857; border: 1px solid #A7F3D0; }
|
||||
.badge.b-yellow { background-color: #FEF3C7; color: #D97706; border: 1px solid #FDE68A; }
|
||||
.form-select-sm:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.sidebar-title { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--primary-color); }
|
||||
.empty-state { padding: 3rem 1rem; color: var(--text-muted); text-align: center; font-size: var(--fs-base); }
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-primary { background-color: var(--primary); color: var(--on-primary); }
|
||||
|
||||
/* --- Form Elements Extra --- */
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-icon input {
|
||||
padding-left: 2.5rem !important;
|
||||
}
|
||||
|
||||
.input-with-icon i,
|
||||
.input-with-icon .icon-sm {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--mute);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.autocomplete-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
background: var(--canvas);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
|
||||
z-index: 1100;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.autocomplete-item {
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.autocomplete-item:hover {
|
||||
background: var(--canvas-soft-2);
|
||||
}
|
||||
|
||||
.autocomplete-item-empty {
|
||||
padding: 1rem;
|
||||
color: var(--mute);
|
||||
font-size: var(--fs-xs);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.suggestion-name {
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.suggestion-meta {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--mute);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* --- Summary & Selection Cards --- */
|
||||
.summary-info-card {
|
||||
padding: 1.25rem;
|
||||
background: var(--canvas-soft);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.user-pc-selection-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.user-pc-item {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: var(--canvas);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.user-pc-item:hover {
|
||||
border-color: var(--hairline-strong);
|
||||
background: var(--canvas-soft);
|
||||
}
|
||||
|
||||
.user-pc-item.selected {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.pc-item-code {
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.pc-item-meta {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--mute);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.empty-list-message {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--mute);
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Global Utilities --- */
|
||||
.hidden { display: none !important; }
|
||||
.clickable { cursor: pointer; transition: opacity 0.2s; }
|
||||
.clickable:hover { opacity: 0.8; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user