.gallery-page { max-width: 1180px; padding: 24px 20px; margin: 0 auto; }
.gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.gallery-heading a { font-size: 14px; text-decoration: none; }
.gallery-heading h1 { font-size: 26px; margin: 12px 0 4px; }
.gallery-heading p { font-size: 14px; color: var(--muted); margin: 0; }
.gallery-navigation { display: flex; gap: 14px; align-items: center; flex: none; }
.gallery-navigation button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); font-size: 22px; cursor: pointer; }
.gallery-navigation button:disabled { opacity: .3; cursor: default; }
.gallery-large { position: relative; height: clamp(300px, calc(100vh - 290px), 620px); background: var(--soft); border-radius: 16px; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; }
.gallery-large > img { display: block; width: 100%; height: 100%; object-fit: contain; }
#large-number { position: absolute; left: 16px; bottom: 16px; border-radius: 8px; background: #0a2540e6; color: white; padding: 8px 14px; font-size: 18px; font-weight: 650; }
.gallery-thumbs { display: flex; gap: 10px; padding: 16px 3px 8px; overflow-x: auto; }
.gallery-thumb { position: relative; flex: 0 0 96px; height: 72px; padding: 0; border: 3px solid transparent; border-radius: 8px; background: var(--soft); overflow: hidden; cursor: pointer; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb span { position: absolute; right: 3px; bottom: 3px; font-size: 12px; line-height: 20px; min-width: 20px; border-radius: 4px; background: #0a2540e6; color: white; }
.gallery-thumb[aria-current="true"] { border-color: var(--primary); }
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media(max-width:640px) {
 .gallery-page { padding: 20px 16px; }
 .gallery-heading { flex-direction: column; align-items: flex-start; gap: 18px; }
 .gallery-navigation { width: 100%; justify-content: space-between; }
 .gallery-large { height: 330px; }
 .gallery-thumb { flex-basis: 82px; height: 62px; }
}

.gallery-navigation[hidden] { display: none; }
