.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; margin: 26px 0; }
.gallery-scroll-status { min-height: 1.5em; }
.gallery-pagination { min-height: 44px; }
.gallery-pagination [aria-disabled="true"] { opacity: .65; }
.gallery-grid.is-masonry { grid-template-columns: repeat(var(--gallery-wide-columns, 4), minmax(0, 1fr)); grid-auto-rows: 1px; grid-auto-flow: dense; row-gap: 0; }
.gallery-card { display: block; width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gallery-card:hover { border-color: #785671; }
.gallery-card-image { display: block; background: #211829; }
.gallery-card-image img { display: block; width: 100%; height: auto; }
.gallery-card-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px; }
.gallery-card-caption { min-width: 0; }
.gallery-card-copy h2 { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.gallery-card-copy h2 a:hover { color: var(--pink-bright); }
.gallery-card-copy p { color: var(--muted); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.gallery-likes { flex-shrink: 0; }
.gallery-likes form { margin: 0; }
.gallery-like-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 5px 7px; border: 0; border-radius: 8px; background: transparent; color: #c6b2c9; cursor: pointer; white-space: nowrap; }
.gallery-like-button:hover, .gallery-like-button[aria-pressed="true"] { color: var(--pink-bright); background: #382337; }
.gallery-like-heart { font-size: 26px; line-height: 1; }
.gallery-like-count { font-size: 13px; font-variant-numeric: tabular-nums; }
.gallery-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 32px; margin: 26px 0; }
.gallery-full { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #211829; display: grid; place-items: center; }
.gallery-full img { width: auto; height: auto; max-height: 78vh; object-fit: contain; }
.gallery-information h1 { font-size: 30px; margin: 10px 0 22px; overflow-wrap: anywhere; }
.gallery-information .report-link { display: block; margin-top: 20px; }
.gallery-file-details { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 22px 0; }
.gallery-file-details dt { color: var(--muted); font-size: 13px; }
.gallery-file-details dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.gallery-related { margin: 40px 0 24px; }
.gallery-related > p { margin-top: 10px; }
.gallery-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.gallery-related-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.gallery-related-card a { display: block; height: 100%; }
.gallery-related-card a:hover { color: var(--pink-bright); }
.gallery-related-thumbnail { aspect-ratio: 4 / 3; padding: 10px; background: #211829; }
.gallery-related-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.gallery-related-card h3 { padding: 14px; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.gallery-dialog-status { color: var(--muted); margin-top: 20px; }
.gallery-dialog { width: min(1040px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #624267; border-radius: 16px; background: #17121c; color: var(--text); box-shadow: 0 24px 100px #0009; }
.gallery-dialog::backdrop { background: #07040cd9; backdrop-filter: blur(5px); }
.gallery-dialog[open] { display: flex; flex-direction: column; }
.gallery-dialog-toolbar { display: flex; justify-content: flex-end; padding: 9px 12px; }
.gallery-dialog-close { min-height: 40px; padding: 7px 14px; border-radius: 8px; background: #2c2033; color: var(--text); cursor: pointer; }
.gallery-dialog-close:hover { background: #49314e; }
.gallery-modal-image { display: flex; justify-content: center; padding: 0 18px; }
.gallery-modal-image img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 220px); object-fit: contain; }
.gallery-modal-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.gallery-modal-caption h2 { font-size: 20px; overflow-wrap: anywhere; }
.gallery-modal-caption p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.gallery-modal-description { padding: 0 24px 24px; }
.gallery-modal-description p { color: var(--muted); overflow-wrap: anywhere; margin-bottom: 12px; }
html:has(.gallery-dialog[open]) { overflow: hidden; }
@media (max-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid.is-masonry { grid-template-columns: repeat(var(--gallery-medium-columns, 3), minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gallery-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gallery-grid.is-masonry { grid-template-columns: repeat(var(--gallery-small-columns, 2), minmax(0, 1fr)); row-gap: 0; }
  .gallery-detail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gallery-information h1 { font-size: 27px; }
}
@media (max-width: 580px) {
  .gallery-card-copy { padding: 10px; gap: 5px; flex-wrap: wrap; }
  .gallery-card-copy h2 { font-size: 14px; }
  .gallery-like-button { min-width: 40px; min-height: 40px; padding: 3px 5px; }
  .gallery-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .gallery-modal-image { padding: 0 10px; }
  .gallery-modal-caption { padding: 16px; gap: 12px; }
  .gallery-modal-caption h2 { font-size: 18px; }
  .gallery-modal-description { padding: 0 16px 20px; }
}