added post modal for feed on map

src/styles/modal.css

@@ -274,6 +274,10 @@
     align-items: flex-end;
   }
 
+  .f-modal-bg:has(.f-post-detail-modal) {
+    align-items: center;
+  }
+
   .f-modal-bg.auth-modal-bg {
     align-items: center;
   }
@@ -391,4 +395,63 @@
 
 .f-modal-sm {
   width: 420px;
+}
+
+.f-post-detail-modal {
+  width: 480px;
+  max-width: 95vw;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 24px;
+}
+.f-post-detail-modal .f-card {
+  border: none;
+  border-radius: 24px;
+  box-shadow: none;
+}
+.f-post-detail-modal .f-card-head {
+  border-radius: 24px 24px 0 0;
+}
+.f-post-detail-modal .f-card-head {
+  padding: 10px 14px;
+}
+.f-post-detail-modal .f-card-img {
+  max-height: none;
+  overflow: visible;
+}
+.f-post-detail-modal .f-card-img img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+.f-post-detail-modal .f-card-caption {
+  padding: 8px 14px;
+}
+.f-post-detail-modal .f-card-foot {
+  padding: 8px 14px;
+}
+.f-post-detail-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10;
+}
+.f-post-detail-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+}
+.f-post-detail-error {
+  color: var(--err);
+  font-size: 0.9rem;
+}
+@media (max-width: 600px) {
+  .f-modal.f-post-detail-modal {
+    width: 67%;
+    max-height: 100vh;
+    border-radius: 24px;
+    padding: 0;
+    margin: auto;
+  }
 }