/* 名詞資料庫 — template-parts/glossary-panel.php */
.sp-gl {
	--sp-bg: #131722; --sp-card: #1c2030; --sp-line: #2f354b; --sp-grid: #272d42;
	--sp-text: #e6e8ee; --sp-mute: #848e9c; --sp-accent: #f0443a;
	background: var(--sp-bg); color: var(--sp-text); border-radius: 12px; padding: 20px; box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
}
.sp-gl *, .sp-gl *::before, .sp-gl *::after { box-sizing: border-box; }
.sp-gl .sp-gl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-gl h2 { margin: 0; color: #fff; font-size: 20px; }
.sp-gl .sp-gl-count { color: var(--sp-mute); font-size: 14px; font-weight: 400; margin-left: 6px; }
.sp-gl .sp-gl-desc { margin: 4px 0 0; color: var(--sp-mute); font-size: 13px; }
.sp-gl .sp-gl-q { background: var(--sp-card); color: var(--sp-text); border: 1px solid var(--sp-line); border-radius: 6px;
	padding: 8px 12px; font-size: 14px; width: 280px; max-width: 100%; height: auto; box-shadow: none; }
.sp-gl .sp-gl-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sp-gl .sp-gl-cats button { background: var(--sp-card); color: var(--sp-mute); border: 1px solid var(--sp-line); border-radius: 16px;
	padding: 5px 12px; font-size: 13px; cursor: pointer; }
.sp-gl .sp-gl-cats button.on { background: var(--sp-accent); border-color: var(--sp-accent); color: #fff; }
.sp-gl .sp-gl-cats button small { opacity: .75; margin-left: 4px; }
.sp-gl .sp-gl-sec { margin-bottom: 22px; }
.sp-gl .sp-gl-sec h3 { margin: 0 0 10px; font-size: 15px; color: var(--sp-mute); border-bottom: 1px solid var(--sp-line); padding-bottom: 6px; }
.sp-gl .sp-gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sp-gl .sp-gl-item { background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 8px; padding: 12px 14px; scroll-margin-top: 90px; }
.sp-gl .sp-gl-item.flash { border-color: var(--sp-accent); box-shadow: 0 0 0 2px rgba(240, 68, 58, .35); }
.sp-gl .sp-gl-item h4 { margin: 0; font-size: 16px; color: #fff; }
.sp-gl .sp-gl-item .en { display: block; color: var(--sp-mute); font-size: 12px; margin: 2px 0 6px; }
.sp-gl .sp-gl-item p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--sp-text); }
.sp-gl .sp-gl-rel { margin-top: 8px; font-size: 12px; color: var(--sp-mute); }
.sp-gl .sp-gl-rel a { color: #8ab4ff; text-decoration: none; margin-right: 8px; }
.sp-gl .sp-gl-rel a:hover { text-decoration: underline; }
.sp-gl mark { background: rgba(240, 68, 58, .35); color: #fff; padding: 0 1px; border-radius: 2px; }
.sp-gl .sp-gl-empty { color: var(--sp-mute); }
@media (max-width: 700px) { .sp-gl { padding: 12px; } .sp-gl .sp-gl-grid { grid-template-columns: 1fr; } }