/* 도트 전시관: pictures on a wall */
.gl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gl-tabs { display: flex; gap: 4px; margin: 4px 0 12px; }
.gl-tabs button { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.gl-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.gl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.gl-card { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.gl-card:hover { border-color: var(--accent); }
.gl-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-card b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-card small { font-size: 12px; color: var(--muted); }
/* a simple wooden frame around each picture */
.gl-frame { display: block; padding: 6px; border-radius: 4px; background: #6b4a2a; box-shadow: inset 0 0 0 2px #8a6238, inset 0 0 0 4px #4d331b; }
.gl-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; background: #fff; }
.gl-view .gl-frame { max-width: 420px; margin: 0 auto; }
.gl-meta { margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.gl-note { margin: 0 0 8px; font-size: 14px; white-space: pre-wrap; }