Add Settings Popup

src/app/components/popup/popup.scss

@@ -0,0 +1,78 @@
+:host {
+  display: block;
+}
+
+.popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100; /* .popup-outlet 내부에서의 상대적 순서 */
+}
+
+.popup-container {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 0 40px oklch(0 0 0 / 15%);
+  min-width: 40px;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  animation: popup-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+  border: oklch(0 0 0 / 20%) 2px solid;
+  gap: 15px;
+}
+
+@keyframes popup-enter {
+  from {
+    transform: scale(0.95) translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 12px;
+  height: 40px;
+  border-bottom: 1px solid oklch(0 0 0 / 5%);
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .header-right {
+    .close-btn {
+      background: none;
+      border: none;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 50%;
+      color: oklch(0.4 0 0);
+      transition: background-color 0.2s, color 0.2s;
+
+      &:hover {
+        background-color: oklch(0 0 0 / 5%);
+        color: oklch(0 0 0);
+      }
+    }
+  }
+}
+
+.popup-body {
+  padding: 0 12px;
+  overflow-y: visible;
+  flex-grow: 1;
+}