.gallery-page { --gallery-ink: #244c61; background: #fff; color: var(--gallery-ink); }
.gallery-nav { height: 76px; padding: 0 max(24px, calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5efee; background:rgba(255,255,255,.96); }
.gallery-brand { display:flex; align-items:center; gap:11px; color:var(--navy-900); font-size:1.12rem; font-weight:800; }
.gallery-brand img { border-radius:50%; }
.gallery-nav nav { display:flex; align-items:center; gap:26px; font-weight:700; }
.gallery-nav nav>a:first-child { color:var(--navy-700); }
.gallery-hero { overflow:hidden; position:relative; background:linear-gradient(130deg,#eef9f7 0%,#f8fbff 65%,#fff 100%); border-bottom:1px solid var(--line); }
.gallery-hero::after { content:""; position:absolute; width:390px; height:390px; right:5%; top:-210px; border-radius:50%; border:1px solid rgba(0,139,131,.12); box-shadow:0 0 0 35px rgba(0,139,131,.035),0 0 0 75px rgba(0,139,131,.025); pointer-events:none; }
.gallery-hero__inner { position:relative; z-index:1; width:min(100% - 48px,920px); margin:auto; padding:38px 0 48px; }
.back-link { display:inline-block; margin-bottom:28px; color:var(--teal-600); font-size:.9rem; font-weight:700; }
.gallery-hero h1 { max-width:760px; margin:17px 0 12px; font-size:clamp(2.15rem,5vw,3.75rem); letter-spacing:-.045em; }
.gallery-hero p { max-width:650px; font-size:1.02rem; }
.gallery-count { margin-top:23px; color:#557787; font-size:.9rem; }
.gallery-count strong { color:var(--teal-600); font-size:1.1rem; }
.gallery-content { padding-top:38px; padding-bottom:70px; }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:23px; }
.filter-list { display:flex; flex-wrap:wrap; gap:9px; }
.filter-chip { padding:9px 16px; border:1px solid #d5e7e5; border-radius:999px; color:#31657b; background:#fff; font-weight:700; font-size:.88rem; }
.filter-chip:hover,.filter-chip.is-active { background:#eaf7f5; color:#006d68; border-color:#a8d9d1; }
.filter-status { color:#718c98; font-size:.82rem; }
.gallery-grid-page { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.gallery-card { min-width:0; overflow:hidden; border:1px solid #e4efed; border-radius:16px; background:#fff; box-shadow:0 7px 22px -19px rgba(12,56,75,.42); }
.gallery-card[hidden] { display:none; }
.media-frame { position:relative; display:block; overflow:hidden; background:#edf6f5; }
.media-frame img { display:block; width:100%; height:auto; transition:transform .35s ease; }
.media-frame:hover img { transform:scale(1.025); }
.media-frame video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#17374a; }
.expand-hint { position:absolute; right:10px; bottom:10px; padding:6px 9px; border-radius:999px; background:rgba(8,41,54,.78); color:#fff; opacity:0; font-size:.72rem; font-weight:700; transition:opacity .2s; }
.media-frame:hover .expand-hint,.media-frame:focus-visible .expand-hint { opacity:1; }
.card-caption { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:13px 14px 15px; color:#234d61; font-size:.86rem; font-weight:700; }
.card-caption span { flex:none; color:#668794; font-size:.7rem; font-weight:700; white-space:nowrap; }
.gallery-end { padding:44px 0; background:#eff8f6; border-top:1px solid var(--line); }
.gallery-end .container { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.gallery-end h2 { margin-top:10px; font-size:clamp(1.45rem,3vw,2rem); }
.gallery-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px max(24px,calc((100vw - 1180px)/2)); color:#668794; font-size:.82rem; }
.gallery-footer a { color:var(--navy-900); font-weight:800; }
@media(max-width:850px) { .gallery-grid-page { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media(max-width:560px) {
 .gallery-nav { height:66px; padding-inline:17px; }
 .gallery-nav nav { gap:14px; font-size:.83rem; }
 .gallery-nav .btn { padding:9px 12px; font-size:.78rem; }
 .gallery-brand { font-size:1rem; }
 .gallery-brand img { width:36px; height:36px; }
 .gallery-hero__inner { width:calc(100% - 36px); padding:24px 0 34px; }
 .back-link { margin-bottom:21px; }
 .gallery-hero p { font-size:.94rem; }
 .gallery-content { padding:27px 18px 48px; }
 .gallery-toolbar { display:block; }
 .filter-list { gap:7px; }
 .filter-chip { padding:8px 12px; font-size:.8rem; }
 .filter-status { margin-top:12px; }
 .gallery-grid-page { grid-template-columns:1fr; gap:14px; }
 .card-caption { font-size:.83rem; }
 .gallery-end .container { align-items:flex-start; flex-direction:column; }
 .gallery-end .btn { width:100%; }
 .gallery-footer { padding-inline:18px; }
}
@media(prefers-reduced-motion:reduce) { .media-frame img { transition:none; } }