/* All presentation is contained in the middle column. Shared layout stays unchanged. */
.gl-wrap { --gl-paper:#f7f8fa; --gl-surface:#fff; --gl-ink:#1b2433; --gl-muted:#5b6576; --gl-line:#e2e6ec; --gl-indigo:#23406b; --gl-indigo-soft:#e8eef7; --gl-shu:#15803d; width:100%; min-width:0; box-sizing:border-box; padding:0 20px; background:var(--gl-paper); color:var(--gl-ink); font:400 16px/1.6 "Be Vietnam Pro",system-ui,sans-serif; color-scheme:light; }
.gl-wrap *, .gl-wrap *::before, .gl-wrap *::after { box-sizing:border-box; }
.gl-wrap [hidden] { display:none !important; }
.gl-wrap a { color:var(--gl-indigo); }
.gl-wrap :focus-visible { outline:3px solid var(--gl-shu); outline-offset:2px; border-radius:4px; }
.gl-wrap .breadcrumb { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:20px 0 0; list-style:none; font-size:14px; color:var(--gl-muted); }
.gl-wrap .breadcrumb-item + .breadcrumb-item::before { content:'/'; margin-right:6px; }
.gl-wrap .breadcrumb a { color:var(--gl-muted); text-decoration:none; }
.gl-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:24px 0 20px; flex-wrap:wrap; }
.gl-head h1 { margin:0; font-size:clamp(28px,3vw,40px); line-height:1.3; }
.gl-head h1 > span { font-family:"Noto Serif JP","Yu Mincho",serif; font-weight:900; color:var(--gl-shu); margin-right:10px; }
.gl-sub { margin:6px 0 0; color:var(--gl-muted); }
.gl-levels { display:flex; gap:6px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.gl-levels a { display:grid; place-items:center; min-width:44px; height:40px; padding:0 12px; border-radius:8px; border:1px solid var(--gl-line); background:var(--gl-surface); color:var(--gl-ink); text-decoration:none; font-weight:600; }
.gl-levels a:hover { border-color:var(--gl-indigo); }
.gl-levels a[aria-current] { background:var(--gl-shu); border-color:var(--gl-shu); color:#fff; }
.gl-tools { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:16px 0; border-top:1px solid var(--gl-line); border-bottom:1px solid var(--gl-line); }
.gl-search { display:flex; gap:8px; flex:1 1 340px; min-width:0; margin:0; }
.gl-search-field { display:block; flex:1; min-width:0; position:relative; margin:0; }
.gl-search-field svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gl-muted); }
.gl-search input { width:100%; height:44px; padding:0 12px 0 38px; font:inherit; font-size:14px; color:var(--gl-ink); background:var(--gl-surface); border:1px solid var(--gl-line); border-radius:10px; }
.gl-search button, .gl-toggle { font:500 14px "Be Vietnam Pro",system-ui,sans-serif; cursor:pointer; min-height:44px; border:1px solid var(--gl-line); background:var(--gl-surface); color:var(--gl-ink); border-radius:10px; padding:0 14px; }
.gl-toggle[aria-pressed="true"] { background:var(--gl-indigo); border-color:var(--gl-indigo); color:var(--gl-surface); }
.gl-list { list-style:none; margin:8px 0 0; padding:0; }
.gl-item { border-bottom:1px solid var(--gl-line); }
.gl-wrap .gl-row { display:grid; grid-template-columns:36px minmax(0, .85fr) minmax(0, 1.5fr) 16px; gap:16px; align-items:start; padding:20px 8px; color:inherit; text-decoration:none; border-radius:10px; }
.gl-row:hover { background:var(--gl-surface); }
.gl-row:hover .gl-pattern { color:var(--gl-shu); }
.gl-num { font-size:14px; font-weight:600; color:var(--gl-muted); padding-top:8px; font-variant-numeric:tabular-nums; }
.gl-pattern-wrap, .gl-meaning-wrap { min-width:0; overflow-wrap:anywhere; }
.gl-pattern { font:700 24px/1.5 "Noto Serif JP","Yu Mincho",serif; display:block; }
.gl-romaji { font-size:13px; color:var(--gl-muted); }
.gl-meaning { font-weight:600; font-size:16.5px; display:block; padding-top:4px; }
.gl-description { font-size:14px; color:var(--gl-muted); display:block; margin-top:4px; max-width:60ch; }
.gl-go { color:var(--gl-muted); padding-top:8px; }
.gl-quiz .gl-meaning-wrap { filter:blur(6px); }
.gl-quiz .gl-row:hover .gl-meaning-wrap, .gl-quiz .gl-row:focus .gl-meaning-wrap { filter:none; }
.gl-empty { padding:40px 0; text-align:center; color:var(--gl-muted); }
.gl-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:28px 0 40px; }
.gl-count { color:var(--gl-muted); font-size:14px; margin:0; }
.gl-pages { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.gl-pages a, .gl-pages span { display:grid; place-items:center; min-width:40px; height:44px; padding:0 10px; border-radius:10px; border:1px solid var(--gl-line); background:var(--gl-surface); color:var(--gl-ink); text-decoration:none; font-weight:600; }
.gl-pages [aria-current] { background:var(--gl-indigo); border-color:var(--gl-indigo); color:var(--gl-surface); }
.gl-pages [aria-disabled] { opacity:.45; }
@media (max-width:640px) {
 .gl-wrap { padding:0 14px; }
 .gl-head { align-items:flex-start; flex-direction:column; }
 .gl-wrap .gl-row { grid-template-columns:28px minmax(0,1fr); gap:4px 10px; padding:16px 4px; }
 .gl-num { grid-row:span 2; padding-top:6px; }
 .gl-meaning-wrap { grid-column:2; }
 .gl-go { display:none; }
 .gl-pattern { font-size:22px; }
 .gl-foot { flex-direction:column-reverse; align-items:flex-start; }
 .gl-search button { padding:0 10px; }
}
@media (prefers-color-scheme:dark) {
 .gl-wrap { --gl-paper:#11161f; --gl-surface:#18202c; --gl-ink:#e8ecf2; --gl-muted:#a6b1c2; --gl-line:#2a3444; --gl-indigo:#abc6ee; --gl-indigo-soft:#1f2c42; --gl-shu:#86efac; color-scheme:dark; }
}