주식 실 계좌 정보 가져오기 추가

src/pages/stock/Stock.css

@@ -623,4 +623,170 @@
     .stock-holdings__metric strong {
         font-size: 14px;
     }
+}
+
+/* ── Portfolio ────────────────────────────────────────────────────── */
+
+.pf-section {
+    position: relative;
+}
+
+.pf-broker-section {
+    transition: border-color 0.3s ease, background 0.3s ease;
+}
+
+.pf-add-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 10px;
+    padding: 16px;
+    border: 1px dashed var(--line);
+    border-radius: 16px;
+    background: rgba(0, 0, 0, 0.15);
+    animation: pf-slide-in 0.25s ease;
+}
+
+@keyframes pf-slide-in {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.pf-add-form label {
+    display: grid;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.pf-add-form input {
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    padding: 10px 12px;
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--text);
+    outline: none;
+    transition: border-color 0.2s ease;
+}
+
+.pf-add-form input:focus {
+    border-color: var(--accent);
+}
+
+.pf-total-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 10px;
+}
+
+.pf-total-summary__card {
+    border: 1px solid var(--line);
+    border-radius: 14px;
+    padding: 12px;
+    display: grid;
+    gap: 6px;
+    background: rgba(0, 0, 0, 0.2);
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.pf-total-summary__card strong {
+    font-size: 16px;
+    color: var(--text);
+}
+
+.pf-item {
+    grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 0.55fr)) auto;
+}
+
+.pf-item-actions {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.pf-item-actions .button {
+    padding: 4px 8px;
+    min-height: 0;
+    font-size: 14px;
+    line-height: 1;
+}
+
+.pf-btn-danger {
+    color: #f3a7a7 !important;
+    border-color: rgba(243, 167, 167, 0.5) !important;
+}
+
+.pf-null-price {
+    color: var(--muted) !important;
+    font-size: 12px !important;
+    opacity: 0.7;
+    font-style: italic;
+}
+
+.pf-edit-row {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 12px;
+    align-items: end;
+}
+
+.pf-edit-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 10px;
+}
+
+.pf-edit-fields label {
+    display: grid;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.pf-edit-fields input {
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    padding: 10px 12px;
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--text);
+    outline: none;
+}
+
+.pf-edit-actions {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+@media (max-width: 768px) {
+    .pf-item {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .pf-add-form {
+        grid-template-columns: 1fr;
+    }
+
+    .pf-edit-row {
+        grid-template-columns: 1fr;
+    }
+
+    .pf-total-summary {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 520px) {
+    .pf-total-summary {
+        grid-template-columns: 1fr;
+    }
 }