.photo-field {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0;
  padding: 13px;
  border: 1px dashed var(--gold);
  border-radius: 12px;
  background: #fffaf3;
  color: var(--brown);
  font-weight: 800;
  cursor: pointer;
}
.photo-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.remark-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.remark-head h2 { margin: 10px 0 0; }
.remark-head time, .comment time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.remark-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.remark-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.comments { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.comment { margin-top: 10px; padding: 11px 13px; border-radius: 12px; background: var(--paper); }
.comment p { margin: 0 0 5px; }
.comment-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.comment-form input { min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 11px; }
.comment-form button { border: 0; border-radius: 11px; padding: 10px 14px; background: var(--brown); color: white; font-weight: 800; }
button:disabled { opacity: .58; cursor: wait; }
@media (max-width: 650px) {
  .app-tabs { overflow-x: auto; }
  .app-tabs button { min-width: max-content; }
  .remark-head { flex-direction: column; gap: 6px; }
  .remark-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comment-form { grid-template-columns: 1fr; }
}