/* Refinement layer (loaded last, after redesign.css). Fewer boxes: open whitespace, hairline rules, serif headings and
   quiet text controls; images carry the pages. Covers the "내 공간" drawer, the home YouTube section, the gallery
   filters/masonry wall/lightbox, and softens lists, calendar shell, games, empty states and paging.
   Decorative motion stops for prefers-reduced-motion and for the site switch (body.motion-paused). */

/* ---------- shared: text controls instead of pills */
.text-button,.file-label.text-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--brand-ink);font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;text-decoration:underline 1px;text-decoration-color:transparent;text-underline-offset:5px;cursor:pointer;transition:color .2s,text-decoration-color .25s}
.text-button:hover,.file-label.text-button:hover{background:none;color:var(--ink);text-decoration-color:currentColor}
.text-button:active{transform:none}
.text-button .icon{width:14px;height:14px}

/* ---------- header: the account link is a label, not a button */
.header-me{gap:8px;min-height:44px;padding:0 2px 0 8px;border:0;border-radius:0;background:none;font-size:13px;font-weight:500;color:var(--ink-2)}
.header-me:hover,.header-me[aria-current=page]{background:none;border:0;color:var(--ink)}
.header-me .icon{width:20px;height:20px}
.header-me span{max-width:9em;overflow:hidden;text-overflow:ellipsis;text-decoration:underline 1px transparent;text-underline-offset:7px;transition:text-decoration-color .25s}
.header-me:hover span,.header-me[aria-current=page] span{text-decoration-color:var(--brand-ink)}
.header-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2)}
/* light/dark: one round button left of "내 공간". It shows the mode it switches to; the icon follows html[data-theme],
   which the first-paint script sets, so it is right before any script runs. */
.header-tools{flex:none;display:flex;align-items:center;gap:6px}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink-2);transition:background .2s,color .2s,border-color .2s}
.theme-toggle:hover{background:var(--mist);border-color:var(--line-2);color:var(--ink)}
.theme-toggle:active{transform:none}
.theme-toggle:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
.theme-toggle .icon{width:19px;height:19px}
:root[data-theme=dark] .theme-toggle .icon-moon,:root:not([data-theme=dark]) .theme-toggle .icon-sun{display:none}
@media(forced-colors:active){.theme-toggle{border-color:ButtonText}}

/* ---------- "내 공간" drawer: a right-hand sheet over the dimmed page */
html.drawer-open{overflow:hidden}
#drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100vw);max-width:100vw;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--paper);color:var(--ink);box-shadow:-24px 0 64px -36px #18243a80;overflow:hidden;animation:none}
#drawer[open]{display:flex}
#drawer::backdrop{background:#18243a47;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer-sheet{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.drawer-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 10px 24px;border-bottom:var(--rule)}
.drawer-head h2{margin:0;font-family:var(--serif-ko);font-size:20px;font-weight:400;letter-spacing:-.01em}
.drawer-head h2:focus{outline:0}
.drawer-head h2:focus-visible{outline:2px solid var(--brand-ink);outline-offset:4px}
.drawer-close{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2)}
.drawer-close:hover{background:var(--mist);color:var(--ink)}
.drawer-close .icon{width:18px;height:18px}
.drawer-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 24px 40px;scrollbar-width:thin}
.drawer-body h3{margin:0}
/* account: no hero panel, no card — a short line, the form, then folds */
#drawer .account-panel{display:block;margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
#drawer .account-intro{position:static;display:flex!important;align-items:center;gap:14px;padding:20px 0 4px!important;background:none;color:var(--ink-2);overflow:visible}
#drawer .account-intro p{display:block!important;margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
#drawer .account-intro .account-mark{position:static;flex:none;width:40px;height:40px;--wing-a:#c3b6ea;--wing-b:#89a4c9;color:var(--brand-ink)}
#drawer .account-content{padding:14px 0 18px!important}
#drawer .account-panel form{padding:0!important}
#drawer .account-wait{margin:8px 0;color:var(--muted);font-size:13px}
#drawer .auth-tabs{gap:22px;margin-bottom:18px}
#drawer .auth-tabs button{min-height:44px;padding:0;font-family:var(--serif-ko);font-size:16px;font-weight:400}
#drawer .auth-tabs button.active{border-bottom-width:1px;border-bottom-color:var(--ink);font-weight:400}
/* login/register: 12px rhythm; the last field sits 16px above the button. An empty feedback line is only visually
   hidden (its role="alert" region stays in place), so it neither adds a row nor needs a negative offset. */
#drawer #auth-form{position:relative;gap:12px}
.form-feedback:empty{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#drawer .account-content form>button.primary{width:100%;min-height:48px;margin-top:4px;border-radius:999px}
#drawer .profile-summary{grid-template-columns:56px minmax(0,1fr);gap:14px;padding-top:18px}
#drawer .profile-avatar{width:56px;height:56px;box-shadow:0 0 0 1px var(--line-2)}
#drawer .profile-meta b{font-family:var(--serif-ko);font-size:19px;font-weight:400}
#drawer .profile-actions{display:flex;justify-content:flex-start;gap:22px;margin-top:6px}
#drawer .profile-actions>button{min-height:44px;padding:0;border:0;border-radius:0;background:none;color:var(--brand-ink);font-size:13px;font-weight:600}
#drawer .profile-actions>button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
#drawer .profile-actions>[aria-expanded=true]{background:none;color:var(--ink)}
#drawer #profile-form{margin-top:12px;padding-top:16px}
#drawer .profile-top>img{width:64px;height:64px;border-width:0;box-shadow:0 0 0 1px var(--line-2)}
#drawer .profile-top .file-label{min-height:40px;padding:0;border:0;background:none;color:var(--brand-ink);font-size:13px;font-weight:600}
#drawer .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
#drawer .actions>button:not(.primary){min-height:44px;padding:0;border:0;background:none;color:var(--brand-ink);font-weight:600}
/* folds and rows share one hairline rhythm */
.drawer-fold{border-top:var(--rule)}
.drawer-fold>summary{display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:0 12px;min-height:56px;padding:8px 0;cursor:pointer;list-style:none}
.drawer-fold>summary::-webkit-details-marker{display:none}
.drawer-fold>summary>span{font-family:var(--serif-ko);font-size:16px}
.drawer-fold>summary>small{grid-column:1;font-size:12px;color:var(--muted)}
.drawer-fold>summary::after{content:'';grid-column:2;grid-row:1/3;width:9px;height:9px;justify-self:center;border-right:1.5px solid var(--brand-ink);border-bottom:1.5px solid var(--brand-ink);transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.drawer-fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
#drawer .connection-panel{margin:0;padding:0;border:0;border-top:var(--rule);border-radius:0;background:none}
#drawer .connection-row{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:12px 0;border-top:var(--rule)}
#drawer .connection-row>div{flex:1;min-width:0}
#drawer .connection-row h3{margin:0 0 2px;font-size:14px;font-weight:600}
#drawer .connection-row p{margin:0;font-size:12px;line-height:1.6}
#drawer .connection-row>a{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--brand-ink);font-size:12px;font-weight:600}
#drawer .connection-row>a:hover{background:none;color:var(--ink)}
#drawer .connection-row>a .icon{width:12px;height:12px}
#drawer .soop-form{max-width:none;margin:4px 0 14px;padding:0;background:none}
#drawer [data-soop-remove]{min-height:44px;margin:0 0 12px;padding:0;border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}
.drawer-admin:empty{display:none}
.drawer-row,.drawer-links a{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:0 12px;min-height:56px;padding:8px 0;color:var(--ink);transition:color .2s}
.drawer-row{border-top:var(--rule)}
.drawer-row>span,.drawer-links a>span{font-family:var(--serif-ko);font-size:16px}
.drawer-row>small,.drawer-links a>small{grid-column:1;font-size:12px;color:var(--muted)}
.drawer-row>.icon,.drawer-links a>.icon{grid-column:2;grid-row:1/3;width:16px;height:16px;color:var(--brand-ink);transition:transform .25s var(--ease)}
.drawer-row:hover,.drawer-links a:hover{color:var(--brand-ink)}
.drawer-row:hover>.icon,.drawer-links a:hover>.icon{transform:translateX(2px)}
.drawer-setting{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:12px 0;border-top:var(--rule)}
.drawer-setting h3{font-family:var(--serif-ko);font-size:16px;font-weight:400}
.drawer-setting p{margin:2px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.drawer-setting .setting-status{grid-column:1/-1;margin:4px 0 0}
.drawer-links{margin:0;padding:0;list-style:none;border-top:var(--rule);border-bottom:var(--rule)}
.drawer-links li+li a{border-top:var(--rule)}
@media(prefers-reduced-motion:no-preference){
 body:not(.motion-paused) #drawer[open]{animation:drawer-in .34s var(--ease)}
 body:not(.motion-paused) #drawer[open]::backdrop{animation:veil-in .3s ease-out}
}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes veil-in{from{opacity:0}to{opacity:1}}

/* ---------- home: recent YouTube uploads, image-led like the replay reel */
.yt{margin-top:clamp(64px,8vw,112px)}
.yt>.index-head{align-items:baseline}
.yt-checked{margin:0;font-size:11px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.yt-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 18px;font-family:var(--serif-ko);font-size:15px;line-height:1.6;color:var(--ink-2)}
.yt-channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px)}
.yt-channel{min-width:0}
.yt-channel-name{margin:0 0 14px;padding-top:12px;border-top:1px solid var(--ink)}
.yt-channel-name a{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;color:var(--ink)}
.yt-channel-name a>span:first-child{font-family:var(--serif-ko);font-size:19px;font-weight:400;letter-spacing:-.01em}
.yt-channel-name small{font-size:12px;font-weight:500;color:var(--muted)}
.yt-channel-name .icon{width:13px;height:13px;align-self:center;color:var(--brand-ink)}
.yt-channel-name a:hover>span:first-child{color:var(--brand-ink)}
.yt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin:0;padding:0;list-style:none}
.yt-item{min-width:0}
.yt-item.is-lead{grid-column:1/-1}
.yt-item a{display:grid;gap:10px;color:var(--ink)}
.yt-item a:focus-visible{outline-offset:5px;border-radius:4px}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--mist-2)}
.yt-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.yt-item a:hover .yt-thumb img{transform:scale(1.035)}
.yt-kind{position:absolute;left:8px;bottom:8px;padding:2px 7px;border-radius:3px;background:#18243ad1;color:#fff;font-size:10px;font-weight:600;letter-spacing:.06em}
.yt-text{display:grid;gap:4px;min-width:0}
.yt-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:500;line-height:1.55;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere;transition:color .2s}
.yt-item.is-lead .yt-title{font-family:var(--serif-ko);font-size:18px;font-weight:400;letter-spacing:-.01em}
.yt-item a:hover .yt-title{color:var(--brand-ink)}
.yt-text time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.yt-empty{margin:0;font-size:13px;color:var(--muted)}
.folio-colophon>span{color:var(--line-2)}
@media(max-width:820px){.yt-channels{grid-template-columns:minmax(0,1fr);gap:40px}}
@media(max-width:360px){.yt-list{gap:16px 10px}.yt-title{font-size:13px}}

/* ---------- notices: an editorial list, not a card grid */
main[data-view=notices] [data-results]{display:block!important}
main .notice-row,main[data-view=notices] .notice-row,main[data-view=notices] [data-results]>.notice-row:first-child{min-height:0;margin:0;padding:22px 0;border:0;border-top:var(--rule);border-radius:0;background:none;box-shadow:none;transform:none}
main .notice-row+.notice-row{margin-top:0}
main .notice-row:hover{transform:none;box-shadow:none;background:none}
main[data-view=notices] [data-results]>.notice-row:first-child{border-top:1px solid var(--ink)}
main[data-view=notices] .notice-row>div{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:28px;height:auto}
main[data-view=notices] .notice-row>div>*{grid-column:2}
main[data-view=notices] .notice-row .letter-number,main[data-view=notices] [data-results]>.notice-row:first-child .letter-number{grid-column:1;grid-row:1/4;margin:0;font-size:26px;line-height:1.1}
main[data-view=notices] .notice-row h3{margin:0 0 6px;padding:0;font-size:19px;transition:color .2s}
main[data-view=notices] [data-results]>.notice-row:first-child h3{font-size:clamp(22px,2.4vw,28px)}
main[data-view=notices] .notice-row:hover h3{color:var(--brand-ink)}
main[data-view=notices] .notice-row .source-links{margin-top:6px;padding:0}
main[data-view=notices] .notice-row>.notice-arrow{display:none}
main[data-view=notices] .pagination{border-top:var(--rule);padding-top:18px}
main .notice-row .source-links,.letter-head .source-links{gap:2px 18px}
main .notice-row .source-links a,.letter-head .source-links a{min-height:36px;padding:0;border:0;border-radius:0;background:none;color:var(--brand-ink);font-size:12px;font-weight:600}
main .notice-row .source-links a:hover,.letter-head .source-links a:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ---------- songbook: an open tracklist on rules */
main .song-row,main [data-results]>.song-row:first-child,main .song-row:not(:has(+ .song-row)),main [data-results]>.song-row:first-child:not(:has(+ .song-row)){border:0;border-bottom:var(--rule);border-radius:0;background:none;box-shadow:none}
main [data-results]>.song-row:first-child{border-top:1px solid var(--ink)}
main .song-row{padding-left:4px;padding-right:4px}
main .song-row:hover,main .song-row:focus-within{background:linear-gradient(90deg,var(--wash),transparent 72%);box-shadow:none}
main .song-row h3{font-family:var(--serif-ko);font-size:17px;font-weight:400;letter-spacing:-.01em}
main .song-row .controls>button{border-color:transparent;background:none}
main .song-row .controls>button:hover{border-color:transparent;background:var(--mist)}
main .song-row .controls>button[data-selected-play],main .playlist-row .controls>button[data-play]{border-color:var(--ink);background:none;color:var(--ink)}
main .song-row .controls>button[data-selected-play]:hover,main .playlist-row .controls>button[data-play]:hover{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
main .song-row .controls>.heart[aria-pressed=true]{border-color:transparent;background:none;color:var(--rose)}
main .date-picker summary{border-color:transparent;border-bottom-color:var(--line-2);border-radius:0;background:none}
main .date-picker summary:hover{border-color:transparent;border-bottom-color:var(--ink);background:none}
main .date-picker[open] summary{border-color:transparent;border-bottom-color:var(--brand-ink);background:none;box-shadow:none}

/* ---------- empty states and paging: words, not panels */
main .empty{padding:56px 16px;border:0;border-top:var(--rule);border-radius:0;background:none}
main .empty .symbol{width:auto;height:auto;margin-bottom:10px;background:none;font-family:var(--serif-en);font-size:34px}
main .pagination{justify-content:space-between;padding-top:16px}
main .pagination button,main [data-more-media]{min-height:44px;padding:0;border:0;border-radius:0;background:none;color:var(--brand-ink);text-decoration:underline 1px transparent;text-underline-offset:5px}
main .pagination button:hover,main [data-more-media]:hover{background:none;border:0;color:var(--ink);text-decoration-color:currentColor}

/* ---------- diary: keep the calendar, lose the slab around it */
.diary-book{border:0;border-top:1px solid var(--ink);border-radius:0;background:none;box-shadow:none;overflow:visible}
.diary-book .calendar-head{padding:18px 0;background:none;border-bottom:var(--rule)}
.diary-book .calendar,.diary-book .day-label,.diary-book .diary-day{background:transparent}
.diary-book .diary-day.other,.diary-book .diary-day.other:hover{background:transparent;opacity:.45}
.diary-book .diary-day:hover{background:var(--hover-cell)}
.month-stepper,.week-navigation{border:0;background:none;padding:0}
.month-stepper>button:hover:not(:disabled),.week-navigation>button:hover:not(:disabled){background:var(--mist);box-shadow:none}
.week-navigation [data-diary-today]{border-left:var(--rule);border-radius:0}
.calendar-tools [data-add],.calendar-tools .motion-toggle,.calendar-tools .motion-toggle[aria-pressed=true]{border:0;border-radius:0;background:none;color:var(--brand-ink);font-family:inherit;font-size:13px;font-weight:600;padding:0 4px}
.calendar-tools [data-add]:hover,.calendar-tools .motion-toggle:hover{background:none;color:var(--ink)}
.day-detail-button{border:0;border-top:var(--rule);border-radius:0;background:none;color:var(--brand-ink)}
.day-detail-button:hover{background:none;color:var(--ink)}
.diary-note{padding:14px 0}
#manage-editors{border:0;background:none;color:var(--brand-ink);padding:0}

/* ---------- games: one list of titles, no call-to-action slabs */
.game-list{display:block;border-top:1px solid var(--ink)}
.game-card,.game-card.is-live,.game-card.is-soon{border:0;border-bottom:var(--rule);border-radius:0;background:none;color:var(--ink);transform:none}
.game-card>a,.game-card.is-soon{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 24px;min-height:0;height:auto;padding:22px 2px}
.game-card .eyebrow,.game-card h2,.game-card p{grid-column:1}
.game-card h2{margin:0;font-size:clamp(22px,2.4vw,28px);transition:color .2s}
.game-card.is-live .eyebrow{color:var(--brand-ink)}
.game-card.is-live p,.game-card p{color:var(--muted)}
.game-card.is-live:hover{transform:none}
.game-card.is-live:hover h2{color:var(--brand-ink)}
.game-cta{grid-column:2;grid-row:1/4;margin:0;color:var(--brand-ink)}
.game-card.is-soon h2{color:var(--muted)}

/* ---------- lightbox */
.lightbox-source{min-height:44px;padding:0;border:0;border-radius:0;color:var(--brand-ink);text-decoration:underline 1px transparent;text-underline-offset:5px}
.lightbox-source:hover{background:none;color:var(--ink);text-decoration-color:currentColor}
.lightbox-nav>button{border-color:var(--line)}
@media(prefers-reduced-motion:no-preference){
 body:not(.motion-paused) #dialog.gallery-dialog[open]{animation:lightbox-in .3s var(--ease)}
 body:not(.motion-paused) .lightbox-stage>img,body:not(.motion-paused) .lightbox-stage>video{animation:stage-in .42s var(--ease)}
}
@keyframes lightbox-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes stage-in{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:none}}

/* ---------- gallery: the shared page head (title at the top, never pushed down by images), then filters and the wall.
   No separate cover: every image appears once, on the wall, at its own shape. */
main[data-view=gallery]>.page-title{margin-bottom:18px}

/* ---------- gallery: text filters with a drawn underline */
.gallery-filters{display:flex;flex-wrap:wrap;gap:0 24px;margin:0 0 22px}
.gallery-filters>button{position:relative;display:inline-flex;align-items:baseline;gap:3px;min-height:44px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-family:var(--serif-ko);font-size:16px;font-weight:400}
.gallery-filters>button sup{top:-.7em;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.gallery-filters>button::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.gallery-filters>button:hover{background:none;color:var(--ink)}
.gallery-filters>button:hover::after{transform:scaleX(.35)}
.gallery-filters>button[aria-pressed=true]{color:var(--ink)}
.gallery-filters>button[aria-pressed=true]::after{transform:scaleX(1)}
.gallery-filters>button:active{transform:none}
.gallery-filters>button.is-empty{opacity:.5}

/* ---------- gallery: the wall. Plain grid until mounted, then masonry positions from gallery.js.
   A tile is the work in its frame, then one caption line under it (--tile-cap = TILE_CAPTION in gallery_model.mjs):
   nothing is written over a picture, and the caption is always there (touch screens included). */
.gallery-wall{--tile-cap:38px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start;margin:0;padding:0;list-style:none}
.gallery-wall.is-masonry{display:block;position:relative}
.gallery-tile{position:relative;display:flex;flex-direction:column;min-width:0;aspect-ratio:auto;border-radius:0;overflow:visible;background:none}
.gallery-wall.is-masonry>.gallery-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
main .gallery-open{position:relative;inset:auto;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:3px;background:none;color:var(--ink);text-align:left}
.gallery-open:focus-visible{outline:3px solid var(--brand-ink);outline-offset:4px}
.tile-frame{position:relative;display:block;flex:1 1 auto;min-height:0;aspect-ratio:var(--ratio,1);overflow:hidden;border-radius:3px;background:var(--mist-2);transition:opacity .35s var(--ease),filter .35s var(--ease)}
.is-masonry .tile-frame{aspect-ratio:auto}
.tile-frame>video,.tile-frame>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery-open:hover .tile-frame>*,.gallery-open:focus-visible .tile-frame>*{transform:scale(1.03)}
.tile-caption{display:flex;flex:none;align-self:stretch;align-items:center;gap:8px;box-sizing:border-box;width:100%;max-width:100%;height:var(--tile-cap);min-width:0;padding:0 2px;overflow:hidden;font-size:13px;line-height:1.3;pointer-events:none}
.tile-no{flex:none;font-family:var(--serif-en);font-size:13px;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.tile-caption b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--serif-ko);font-size:14px;font-weight:400;color:var(--ink-2);transition:color .25s}
.tile-caption small{flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.gallery-open:hover .tile-caption b,.gallery-open:focus-visible .tile-caption b{color:var(--ink)}
/* the work under the pointer or keyboard comes forward a little; the others step back (where :has() exists) */
.gallery-wall:has(.gallery-open:hover,.gallery-open:focus-visible) .gallery-open:not(:hover):not(:focus-visible) .tile-frame{opacity:.72;filter:saturate(.8)}
/* entrance: hidden only after the observer has reported in (reveal.mjs); a focused tile always shows */
.reveal-ready>.gallery-tile:not(.is-in):not(:focus-within){opacity:0;translate:0 18px}
.reveal-ready>.gallery-tile{transition:opacity .6s ease-out var(--reveal-delay,0ms),translate .75s var(--ease) var(--reveal-delay,0ms)}
.gallery-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:32px 0 0;padding-top:12px;border-top:var(--rule);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.gallery-empty{padding:56px 0;border-top:var(--rule);font-family:var(--serif-ko);font-size:17px;color:var(--ink-2);text-align:center}
.gallery-empty p{margin:0}
@media(max-width:1000px){.gallery-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
 .gallery-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tile-caption{gap:6px;font-size:12px}
 .tile-no{font-size:12px}
 .tile-caption b{font-size:13px}
 .tile-caption small{font-size:10px}
 .gallery-filters{gap:0 18px;margin-bottom:16px}.gallery-filters>button{font-size:15px}
}

/* ---------- small screens */
@media(max-width:700px){
 main[data-view=notices] .notice-row>div{grid-template-columns:minmax(0,1fr)}
 main[data-view=notices] .notice-row .letter-number,main[data-view=notices] [data-results]>.notice-row:first-child .letter-number{grid-column:1;grid-row:auto;margin-bottom:8px;font-size:20px}
 main[data-view=notices] .notice-row>div>*{grid-column:1}
 .drawer-head{padding-left:20px}
 .drawer-body{padding:4px 20px 36px}
 .game-card>a,.game-card.is-soon{grid-template-columns:minmax(0,1fr)}
 .game-cta{grid-column:1;grid-row:auto;margin-top:6px}
}

/* ---------- motion off: the site switch stops every decorative animation and transition */
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation:none!important;transition:none!important}
body.motion-paused .gallery-open:hover .tile-frame>*,body.motion-paused .gallery-open:focus-visible .tile-frame>*,body.motion-paused .yt-item a:hover .yt-thumb img{transform:none}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .gallery-open:hover .tile-frame>*,.gallery-open:focus-visible .tile-frame>*,.yt-item a:hover .yt-thumb img{transform:none}
}