.category-field { padding:80px 0; background:#fff; }
.category-field .section-tag { display:flex; width:fit-content; max-width:100%; justify-content:center; margin:0 auto 32px; color:#06b6d4; font-weight:400; line-height:1.6; text-align:center; }
.category-field .section-tag::before { flex-shrink:0; }
.category-field-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),440px)); gap:24px; justify-content:center; }
.category-field-thumb { display:block; position:relative; overflow:hidden; padding:8px; background:#fff; border:1px solid #dce4ee; border-radius:16px; box-shadow:0 5px 18px #17365d0a; cursor:zoom-in; transition:border-color .2s,box-shadow .2s; }
.category-field-thumb:hover { border-color:var(--field-accent,#1765b3); box-shadow:0 8px 22px #17365d1c; }
.category-field-thumb:focus-visible,.category-field-close:focus-visible { outline:3px solid #f59e0b; outline-offset:4px; }
.category-field-thumb img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; border-radius:10px; background:#fff; }
.category-field-expand { position:absolute; inset-inline-end:17px; bottom:17px; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:#fff; background:var(--field-accent,#1765b3); box-shadow:0 3px 10px #0003; pointer-events:none; }
.category-field-dialog { width:min(1560px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1px solid #ffffff30; border-radius:16px; background:#101c30; color:#fff; box-shadow:0 20px 100px #0006; }
.category-field-dialog::backdrop { background:#061225d9; backdrop-filter:blur(4px); }
.category-field-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 16px 10px 24px; }
.category-field-dialog-bar h2 { margin:0; color:#fff; font-family:var(--font-display,sans-serif); font-size:18px; line-height:1.4; }
.category-field-close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid #ffffff40; border-radius:10px; color:#fff; background:#ffffff12; cursor:pointer; }
.category-field-close:hover { background:#ffffff28; }
.category-field-full { display:flex; align-items:center; justify-content:center; padding:0 12px 12px; overflow:auto; }
.category-field-full img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 112px); object-fit:contain; background:#fff; }
html.category-field-open { overflow:hidden; }
@media(max-width:600px) {
  .category-field { padding:56px 0; }
  .category-field-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .category-field-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:12px; }
  .category-field-dialog-bar { padding:8px 10px 8px 14px; gap:10px; }
  .category-field-dialog-bar h2 { font-size:16px; }
  .category-field-full { padding:0 6px 6px; }
}
@media(prefers-reduced-motion:reduce) { .category-field-thumb { transition:none; } }