/* ============================================================
   Research catalog — light gallery + certificate quick look
   (ported from catalog-lab option C; built on tokens.css)
   ============================================================ */
.catalog-page .hv { display: block; }
.catalog-page .hv canvas, .ql .hv canvas { display: block; width: 100%; height: 100%; }
.tb-count .t-data { color: inherit; font-weight: 600; }
.cat-noscript { display: grid; gap: 8px; padding: 24px 0; }
.gl-ruo { border-top: 1px solid var(--ax-line); background: var(--ax-bg-raised); padding: 28px 0; }
.gl-ruo .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.gl-ruo p { margin: 0; max-width: 680px; font-size: 13px; color: var(--ax-fg-muted); }
.gl-ruo p a { color: var(--ax-fg); font-weight: 600; }
.gl-ruo .gl-ask { flex: none; font: 600 13px var(--font-body); color: var(--ax-fg); text-decoration: none; border: 1px solid var(--ax-line-strong); border-radius: 10px; padding: 10px 14px; background: var(--ax-bg); }
.gl-ruo .gl-ask:hover { border-color: var(--ax-fg); }
/* ---------- toolbar (shared) ---------- */
.tb { display: grid; gap: 14px; }
.tb-series { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-series button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; font: 600 12.5px var(--font-body); cursor: pointer; border: 1px solid; transition: background .2s, border-color .2s, color .2s; }
.tb-series button i { width: 7px; height: 7px; border-radius: 50%; background: var(--cat); }
.tb-series button .t-data { font-size: 10.5px; opacity: .6; }
.tb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tb-search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid; }
.tb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 var(--text-sm) var(--font-body); color: inherit; }
.tb-search:focus-within { border-color: var(--ax-fg) !important; box-shadow: 0 0 0 3px rgba(13,15,14,.08); }
.tb-search input:focus, .tb-search input:focus-visible { outline: none; box-shadow: none; }
.tb-seg { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid; }
.tb-seg button { border: 0; background: none; height: 32px; padding: 0 12px; border-radius: 7px; font: 600 12px var(--font-body); cursor: pointer; color: inherit; opacity: .6; white-space: nowrap; }
.tb-seg button[aria-pressed="true"] { opacity: 1; }
.tb-sort { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); }
.tb-sort select { font: 600 12.5px var(--font-body); height: 40px; border-radius: 10px; padding: 0 32px 0 12px; border: 1px solid; appearance: none; color: inherit; background: transparent linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 17px) 52% / 5px 5px no-repeat, linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 12px) 52% / 5px 5px no-repeat; cursor: pointer; }
.tb-count { margin: 18px 0 20px; font-size: var(--text-xs); }

/* light variant */
.tb-light .tb-series button { background: var(--ax-bg-raised); border-color: var(--ax-line-strong); color: var(--ax-fg-body); }
.tb-light .tb-series button:hover { border-color: var(--ax-fg); }
.tb-light .tb-series button[aria-pressed="true"] { background: var(--ax-fg); border-color: var(--ax-fg); color: var(--ax-bg); }
.tb-light .tb-series button[aria-pressed="true"] i { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.tb-light .tb-search, .tb-light .tb-seg, .tb-light .tb-sort select { background-color: var(--ax-bg-raised); border-color: var(--ax-line-strong); color: var(--ax-fg); }
.tb-light .tb-search svg { color: var(--ax-fg-muted); }
.tb-light .tb-seg button[aria-pressed="true"] { background: var(--ax-bg-sunken); box-shadow: 0 0 0 1px var(--ax-line); }
.tb-light .tb-sort span, .tb-count-light { color: var(--ax-fg-muted); }
.none { padding: 56px 24px; text-align: center; border-radius: 14px; border: 1px dashed; }
.none p { margin: 0 0 14px; }
.none-btn { height: 38px; padding: 0 16px; border-radius: 10px; font: 600 13px var(--font-body); cursor: pointer; border: 1px solid; background: none; color: inherit; }
.none-light { border-color: var(--ax-line-strong); color: var(--ax-fg-muted); }

/* ---------- C · Light gallery ---------- */
.gl { padding: calc(64px + 48px) 0 80px; }
.gl-head { max-width: 960px; margin-bottom: 28px; }
.gl-head h1 { font-size: var(--text-3xl); line-height: 1.1; margin: 8px 0 8px; }
.gl-lede { margin: 0; color: var(--ax-fg-muted); font-size: var(--text-sm); }
.gl-bar { position: sticky; top: 64px; z-index: 5; padding: 14px 0; background: color-mix(in srgb, var(--ax-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ax-line); }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
.gl-card { display: grid; grid-template-rows: auto 1fr auto; border-radius: 16px; border: 1px solid var(--ax-line); background: var(--ax-bg-raised); overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out); }
.gl-card:hover { border-color: var(--ax-line-strong); box-shadow: 0 14px 34px -18px rgba(13,15,14,.25); transform: translateY(-2px); }
.gl-stage { all: unset; cursor: pointer; position: relative; display: block; height: 236px; background: radial-gradient(55% 55% at 50% 50%, color-mix(in srgb, var(--cat) 15%, transparent), transparent 75%), linear-gradient(rgba(13,15,14,.035) 1px, transparent 1px) 0 0 / 100% 24px, var(--ax-bg-sunken); }
.gl-stage:focus-visible { outline: 2px solid var(--ax-fg); outline-offset: -2px; }
.gl-stage .hv { position: absolute; left: 50%; top: 55%; width: 118%; height: 118%; transform: translate(-50%,-50%) scale(.84); transition: transform .5s cubic-bezier(.2,1.25,.35,1); }
.gl-card:hover .gl-stage .hv { transform: translate(-50%,-50%) scale(.93); }
.gl-chip { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ax-bg-raised); border: 1px solid var(--ax-line); font: 600 11px var(--font-body); color: var(--ax-fg-body); }
.gl-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--cat); }
.gl-st { position: absolute; top: 12px; right: 12px; z-index: 1; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--ax-bg-raised); border: 1px solid var(--ax-line); font: 600 9.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ax-success); }
.gl-st.mto { color: var(--ax-warning); } .gl-st.off { color: var(--ax-fg-faint); }
.gl-peek { position: absolute; left: 50%; bottom: 12px; z-index: 1; transform: translate(-50%, 6px); opacity: 0; padding: 6px 12px; border-radius: 999px; background: var(--ax-fg); color: var(--ax-bg); font: 600 11.5px var(--font-body); transition: opacity .2s, transform .2s; }
.gl-card:hover .gl-peek, .gl-stage:focus-visible .gl-peek { opacity: 1; transform: translate(-50%, 0); }
.gl-body { padding: 16px 18px 6px; }
.gl-body h3 { font-size: var(--text-lg); } .gl-body h3 a { text-decoration: none; }
.gl-body > p { margin: 2px 0 14px; font-size: 12.5px; color: var(--ax-fg-muted); }
.gl-specs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-block: 1px solid var(--ax-line); }
.gl-specs div { padding: 9px 10px 9px 0; min-width: 0; } .gl-specs div:nth-child(2) { padding-left: 12px; border-left: 1px solid var(--ax-line); }
.gl-specs div:nth-child(3) { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--ax-line); padding: 7px 0; }
.gl-specs div:nth-child(3) dd { margin: 0; color: var(--ax-fg-body); font-weight: 500; }
.gl-specs dt { font: 600 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-fg-faint); }
.gl-specs dd { margin: 2px 0 0; font-size: 11px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ax-fg); font-weight: 600; white-space: nowrap; }
.gl-docs { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0 8px; }
.gl-docs span { font: 600 10px var(--font-mono); padding: 3px 7px; border-radius: 5px; background: var(--ax-bg-sunken); color: var(--ax-fg-muted); }
.gl-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 16px; }
.gl-foot button { border: 0; background: none; padding: 0; font: 600 12.5px var(--font-body); color: var(--ax-fg-muted); cursor: pointer; }
.gl-foot button:hover { color: var(--ax-fg); }
.gl-foot a { font: 600 12.5px var(--font-body); color: var(--ax-fg); text-decoration: none; }

/* ---------- quick look (certificate) ---------- */
.ql { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.ql-scrim { position: absolute; inset: 0; background: rgba(6,10,16,.62); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s; }
.ql-box { position: relative; width: min(960px, 100%); max-height: calc(100dvh - 48px); overflow: auto; display: grid; grid-template-columns: 380px minmax(0,1fr); border-radius: 18px; background: var(--ax-bg-raised); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .22s, transform .3s var(--ease-out); }
.ql.open .ql-scrim, .ql.open .ql-box { opacity: 1; } .ql.open .ql-box { transform: none; }
.ql-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ax-line-strong); background: var(--ax-bg-raised); color: var(--ax-fg); display: grid; place-items: center; cursor: pointer; }
.ql-plate { --tick: rgba(255,255,255,.3); position: relative; min-height: 460px; background: radial-gradient(60% 50% at 50% 46%, color-mix(in srgb, var(--cat) 30%, transparent), transparent 75%), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 100% 24px, var(--ax-night); outline: 0; }
.ql-plate > i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--tick); z-index: 1; }
.ql-plate .c1 { top: 18px; left: 18px; border-top-width: 1px; border-left-width: 1px; } .ql-plate .c2 { top: 18px; right: 18px; border-top-width: 1px; border-right-width: 1px; }
.ql-plate .c3 { bottom: 52px; left: 18px; border-bottom-width: 1px; border-left-width: 1px; } .ql-plate .c4 { bottom: 52px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }
.ql-plate:focus-visible { --tick: var(--cat-bright); }
.ql-vial { position: absolute; inset: 24px 24px 56px; cursor: grab; }
.ql-plate-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.08); font: 600 10px var(--font-mono); letter-spacing: .12em; color: rgba(255,255,255,.45); }
.ql-plate-cap .t-data { color: rgba(255,255,255,.7); letter-spacing: .04em; }
.ql-cert { padding: 28px 30px 26px; }
.ql-top { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.ql-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ax-success); }
.ql-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ql-st.mto { color: var(--ax-warning); } .ql-st.off { color: var(--ax-fg-faint); }
.ql-cert h2 { font-size: var(--text-2xl); margin-top: 12px; }
.ql-sub { margin: 2px 0 18px; color: var(--ax-fg-muted); font-size: var(--text-sm); }
.ql-table { width: 100%; border-collapse: collapse; font-size: 13px; border-top: 1px solid var(--ax-line); }
.ql-table th { text-align: left; font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ax-fg-muted); width: 92px; }
.ql-table th, .ql-table td { padding: 9px 0; border-bottom: 1px solid var(--ax-line); }
.ql-table td { padding-left: 10px; color: var(--ax-fg-body); }
.ql-table td.t-data { color: var(--ax-fg); font-weight: 600; white-space: nowrap; }
.ql-table td:last-child { text-align: right; }
.ql-pass { font: 700 10px var(--font-mono); letter-spacing: .08em; color: var(--ax-success); background: var(--ax-success-bg); padding: 3px 7px; border-radius: 5px; }
.ql-sep { color: var(--ax-fg-faint); } .nw { white-space: nowrap; }
.ql-meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin: 16px 0; }
.ql-meta span { display: block; font: 600 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-fg-faint); }
.ql-meta b { display: block; margin-top: 3px; font-size: 12px; color: var(--ax-fg); }
.ql-docs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 14px 0; border-top: 1px dashed var(--ax-line-strong); }
.ql-docs-l { font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-fg-faint); margin-right: 4px; }
.ql-docs span:not(.ql-docs-l) { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--ax-bg-sunken); color: var(--ax-fg-body); }
.ql-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ql-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 10px; font: 600 13.5px var(--font-body); text-decoration: none; }
.ql-btn-light { background: var(--ax-fg); color: var(--ax-bg); } .ql-btn-light:hover { background: var(--n-800); }
.ql-btn-ghost { border: 1px solid var(--ax-line-strong); color: var(--ax-fg); } .ql-btn-ghost:hover { border-color: var(--ax-fg); }
.ql-fine { margin: 12px 0 0; font-size: 11.5px; color: var(--ax-fg-faint); }


/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .ql-box { grid-template-columns: 1fr; }
  .ql-plate { min-height: 300px; }
}
@media (max-width: 640px) {
  .gl { padding-top: calc(64px + 32px); }
  .gl-bar { position: static; padding-top: 4px; backdrop-filter: none; background: none; }
  .tb-series { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--sp-md) * -1); padding-inline: var(--sp-md); }
  .tb-series::-webkit-scrollbar { display: none; }
  .tb-series button { flex: none; }
  .tb-seg { flex: 1; } .tb-seg button { flex: 1; padding: 0 6px; }
  .gl-grid { grid-template-columns: 1fr; }
  .ql { padding: 0; align-items: end; } .ql-box { max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .ql-cert { padding: 22px 20px 24px; } .ql-meta { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .gl-card, .gl-stage .hv, .ql-box, .ql-scrim { transition: none !important; } }