style: rebase 중 누락된 디자인 추가

src/pages/MyCombinationPage/MyCombinationPage.css

@@ -7,6 +7,8 @@
 }
 
 .sidebar {
+  position: sticky;
+  top: 2rem;
   flex: 1;
   max-width: 300px;
   padding: 1.5rem;
@@ -195,16 +197,17 @@
   align-items: center;
   padding: 1.5rem;
   border-radius: 12px;
-  background-color: var(--background-white);
+  background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%);
   box-shadow: var(--shadow-sm);
   transition: all 0.3s ease;
-  border: 1px solid transparent;
+  border: 1px solid rgba(var(--primary-rgb), 0.08);
 }
 
 .part-item:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
-  border-color: var(--primary-light);
+  background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%);
+  border-color: rgba(var(--primary-rgb), 0.15);
 }
 
 .part-image {
@@ -261,6 +264,7 @@
   }
 
   .sidebar {
+    position: static;
     max-width: 100%;
   }
 
@@ -274,3 +278,151 @@
     margin-right: 1rem;
   }
 }
+
+.pc-item-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.edit-button,
+.delete-button {
+  padding: 4px 12px;
+  font-size: 13px;
+  background-color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.edit-button:hover,
+.delete-button:hover {
+  background-color: var(--primary-color);
+  box-shadow: 0 0 0 3px var(--primary-light);
+  transform: translateY(-1px);
+}
+
+.edit-button:disabled,
+.delete-button:disabled {
+  background-color: var(--primary-light);
+  border-color: var(--primary-light);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.part-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(135deg, var(--background-white) 0%, var(--primary-light) 100%);
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid rgba(var(--primary-rgb), 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 배경에 부드러운 장식 효과 추가 */
+.part-list-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
+  transform: translate(30%, -30%);
+}
+
+.part-list-header h2 {
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  position: relative; /* 텍스트를 장식 위에 표시 */
+}
+
+.share-button {
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark, #0056b3) 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 버튼에 빛나는 효과 추가 */
+.share-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    120deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: 0.5s;
+}
+
+.share-button:hover {
+  background: linear-gradient(135deg, var(--primary-dark, #0056b3) 0%, var(--primary-color) 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3);
+}
+
+.share-button:hover::before {
+  left: 100%;
+}
+
+.share-button:active {
+  transform: translateY(0);
+}
+
+/* 부품 아이템 카드도 파스텔톤으로 개선 */
+.part-item {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%);
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(var(--primary-rgb), 0.08);
+}
+
+.part-item:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%);
+  border-color: rgba(var(--primary-rgb), 0.15);
+}
+
+/* 모바일 대응 */
+@media (max-width: 768px) {
+  .part-list-header {
+    padding: 1.2rem;
+  }
+
+  .part-list-header h2 {
+    font-size: 1.5rem;
+  }
+
+  .share-button {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+  }
+}