diff --git a/src/styles/common.css b/src/styles/common.css
index b7e72b6..d417e74 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -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; }
+