.photo-wall-stage {position: relative; min-height: calc(100vh - 148px)}
.photo-wall-grid {display: block; min-height: calc(100vh - 148px); columns: 4; column-gap: 12px}
.photo-wall-tile {position: relative; display: inline-block; width: 100%; min-width: 0; margin: 0 0 12px; overflow: hidden; break-inside: avoid; padding: 0; border: 1px solid #e1d3c3; border-radius: 15px; background: #f4ece2; box-shadow: 0 8px 22px rgba(73,44,25,.12); cursor: pointer; text-align: left; vertical-align: top}
.photo-wall-tile img {display: block; width: 100%; height: auto; max-height: none; object-fit: contain; background: #f4ece2; transition: filter .25s ease}
.photo-wall-tile:hover img {filter: saturate(1.06) contrast(1.02)}
.photo-wall-tile:focus-visible {outline: 3px solid #c69a57; outline-offset: 3px}
.photo-wall-tile > span {position: absolute; inset: auto 0 0; padding: 11px 14px; color: #fff; background: rgba(36,33,31,.84); backdrop-filter: blur(7px)}
.photo-wall-tile strong,.photo-wall-tile small {display: block}.photo-wall-tile small {margin-top: 4px; opacity: .82}
.photo-upload-trigger {position: fixed; right: 30px; bottom: 28px; z-index: 8; width: 58px; height: 58px; border: 0; border-radius: 50%; color: #fff; background: #7d2e20; box-shadow: 0 14px 32px rgba(58,20,14,.34); cursor: pointer; font-size: 34px; font-weight: 300; line-height: 1}
.photo-upload-trigger:hover {transform: translateY(-2px); background: #943a29}.photo-upload-trigger:focus-visible {outline: 3px solid #d8ad6f; outline-offset: 3px}
.photo-upload-dialog,.photo-view-dialog {max-width: none; padding: 0; border: 0; border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.35)}
.photo-upload-dialog {width: min(720px,calc(100vw - 32px)); color: #10243e; background: #fff}.photo-upload-dialog::backdrop,.photo-view-dialog::backdrop {background: rgba(4,12,21,.7); backdrop-filter: blur(5px)}
.photo-upload-head {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #e4e9ef}.photo-upload-head h2 {margin: 0; font-size: 22px}.photo-upload-close {border: 0; color: #526275; background: transparent; cursor: pointer; font-size: 28px}
.photo-upload-form {display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1.4fr) auto; gap: 12px; align-items: end; padding: 20px}.photo-upload-form .photo-file {grid-column: 1/-1}.photo-upload-form label {display: grid; gap: 6px; color: #46566a; font-size: 13px}.photo-upload-form input,.photo-upload-form textarea {box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid #cfd7e1; border-radius: 10px; font: inherit}.photo-upload-form textarea {min-height: 42px; resize: vertical}
.photo-view-dialog {width: min(1040px,calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; color: #fff; background: #0c1826}.photo-view-visual {height: min(58vh,600px); min-height: 280px}.photo-view-visual img {display: block; width: 100%; height: 100%; object-fit: contain; background: #0c1826}.photo-view-footer {display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 15px 18px; border-top: 1px solid rgba(255,255,255,.12)}.photo-view-footer strong,.photo-view-footer small {display: block}.photo-view-footer small {margin-top: 4px; color: #aeb9c7}.photo-view-close {padding: 8px 15px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; background: transparent; cursor: pointer}
.photo-comments {padding: 0 18px 18px}.photo-comments h3 {margin: 6px 0 12px}.photo-comment-list {display: grid; gap: 9px; margin-bottom: 12px}.photo-comment {padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08)}.photo-comment header {display: flex; justify-content: space-between; gap: 12px; color: #d7e1eb; font-size: 12px}.photo-comment p {margin: 6px 0 0; color: #fff; white-space: pre-wrap}.photo-comment-empty {color: #aeb9c7}.photo-comment-form {display: flex; gap: 9px}.photo-comment-form textarea {min-height: 42px; max-height: 120px; flex: 1; padding: 10px; resize: vertical; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #fff; background: #172638; font: inherit}.photo-comment-form button {align-self: stretch}
@media(max-width:900px) {.photo-wall-grid {columns: 2; column-gap: 9px}.photo-wall-tile {margin-bottom: 9px}.photo-upload-form {grid-template-columns: 1fr 1fr}.photo-upload-form button {grid-column: 1/-1}.photo-upload-trigger {right: 22px; bottom: 90px}}
@media(max-width:560px) {.photo-wall-grid {columns: 2; column-gap: 8px}.photo-wall-tile {margin-bottom: 8px; border-radius: 11px}.photo-wall-tile > span {padding: 9px 10px}.photo-wall-tile strong {font-size: 12px}.photo-wall-tile small {font-size: 9px}.photo-upload-form {grid-template-columns: 1fr}.photo-comment-form {flex-direction: column}.photo-view-visual {height: 48vh}.photo-upload-trigger {right: 18px; bottom: 86px; width: 54px; height: 54px}}
@media(prefers-reduced-motion:reduce) {.photo-wall-tile img {transition: none}}