/* 作品区的独立扩展，沿用原页面配色。 */
.works-poster { display:block; width:100%; padding:0; cursor:zoom-in; background:#fff; }
.works-poster:focus-visible { outline:3px solid var(--seal-red); outline-offset:5px; }
.derivative-gallery { max-width:1280px; margin:5rem auto 0; padding-top:2.7rem;
  border-top:1px solid rgba(47,59,47,.16); }
.gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.gallery-heading h3 { color:var(--tea-deep); font-size:1.45rem; letter-spacing:.22em; }
.gallery-heading p { font-size:.85rem; color:var(--mist); letter-spacing:.1em; margin-top:.35rem; }
.gallery-count { color:var(--seal-red); font-size:.85rem; letter-spacing:.12em; white-space:nowrap; }
.gallery-window { overflow:hidden; padding:24px 8px 28px; margin:0 -8px; touch-action:pan-y; }
.gallery-track { --gallery-gap:24px; display:flex; gap:var(--gallery-gap); will-change:transform; }
.gallery-card { flex:0 0 calc((100% - 3 * var(--gallery-gap)) / 4); min-width:0;
  border:0; padding:0; background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:zoom-in; }
.gallery-art { display:block; aspect-ratio:9/16; padding:9px; border:1px solid rgba(47,59,47,.13);
  background:#fffdf6; border-radius:5px; box-shadow:0 8px 24px rgba(47,59,47,.09);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; }
.gallery-art img { display:block; width:100%; height:100%; object-fit:contain; background:#f5f1e5; }
.gallery-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:100%; border:1px solid rgba(91,138,107,.2); color:var(--tea-deep);
  background:radial-gradient(ellipse at 20% 85%,rgba(91,138,107,.12),transparent 65%),#f3f0e5; }
.gallery-placeholder b { font-weight:400; font-size:3.2rem; opacity:.35; letter-spacing:.12em; }
.gallery-placeholder span { font-size:.85rem; letter-spacing:.2em; margin-top:.7rem; }
.gallery-placeholder small { font-size:.75rem; color:var(--mist); margin-top:.4rem; letter-spacing:.08em; }
.gallery-card-title { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:.9rem; letter-spacing:.1em; padding:.9rem .1rem 0; }
.gallery-card-title small { font-size:.72rem; color:var(--mist); }
.gallery-card:focus-visible { outline:none; }
.gallery-card:focus-visible .gallery-art { outline:2px solid var(--seal-red); outline-offset:4px; }
@media (hover:hover) and (pointer:fine) {
  .gallery-card:hover .gallery-art { transform:translateY(-7px) scale(1.025);
    box-shadow:0 16px 30px rgba(47,59,47,.17); border-color:var(--tea-green); }
}
.gallery-controls { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:.3rem; }
.gallery-arrow,.gallery-pause,.artwork-close,.artwork-nav { display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:6px; background:transparent; border:1px solid rgba(47,59,47,.24);
  border-radius:50%; color:var(--tea-deep); font:inherit; cursor:pointer; touch-action:manipulation; }
.gallery-arrow { font-size:1.5rem; }
.gallery-arrow:hover,.gallery-pause:hover { background:rgba(91,138,107,.09); }
.gallery-dots { display:flex; align-items:center; gap:2px; }
.gallery-dot { width:32px; height:44px; display:flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent; cursor:pointer; }
.gallery-dot::after { content:''; width:7px; height:7px; border-radius:50%; background:rgba(55,88,74,.27);
  transition:width .25s ease,background .25s ease; }
.gallery-dot[aria-current=true]::after { width:23px; border-radius:8px; background:var(--tea-deep); }
.gallery-pause { font-size:.8rem; margin-left:.25rem; }
.artwork-dialog { width:min(1100px,94vw); max-height:94dvh; margin:auto; padding:0; overflow:visible;
  background:var(--cream); color:var(--ink); border:1px solid rgba(47,59,47,.2); border-radius:10px;
  box-shadow:0 24px 90px rgba(0,0,0,.28); }
.artwork-dialog::backdrop { background:rgba(19,31,25,.78); backdrop-filter:blur(5px); }
.artwork-inner { padding:1rem; }
.artwork-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.artwork-top h3 { padding-left:.35rem; font-size:1rem; letter-spacing:.13em; }
.artwork-close { flex-shrink:0; font-size:1.6rem; background:var(--cream); }
.artwork-stage { display:flex; align-items:center; justify-content:center; min-height:180px; }
.artwork-stage img { display:block; width:auto; max-width:100%; max-height:calc(90dvh - 150px); object-fit:contain; }
.artwork-stage [hidden],.artwork-nav-wrap[hidden] { display:none; }
.artwork-empty { width:min(420px,75vw); height:min(570px,65dvh); }
.artwork-nav-wrap { display:flex; align-items:center; justify-content:center; gap:1.3rem; margin-top:.8rem; font-size:.85rem; }
@media (max-width:900px) {
  .gallery-track { --gallery-gap:20px; }
  .gallery-card { flex-basis:calc((100% - var(--gallery-gap)) / 2); }
}
@media (max-width:600px) {
  .derivative-gallery { margin-top:3.5rem; padding-top:2rem; }
  .gallery-heading h3 { font-size:1.2rem; }
  .gallery-heading p { font-size:.75rem; letter-spacing:.04em; }
  .gallery-card { flex-basis:100%; }
  .gallery-window { max-width:350px; margin-inline:auto; }
  .gallery-controls { gap:.6rem; }
  .gallery-art { padding:8px; }
  .artwork-inner { padding:.7rem; }
  .artwork-top h3 { font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  .gallery-track,.gallery-art,.gallery-dot::after { transition:none!important; }
  .gallery-card:hover .gallery-art { transform:none; }
}