/* video gallery - self-contained, no webfonts, no CDN. */
select.lang { position: absolute; top: .8rem; right: .8rem; font: inherit; font-size: .85rem;
              padding: .25rem .5rem; border-radius: 8px; border: 1px solid var(--line);
              background: var(--panel); color: var(--ink); }
header { position: relative; }
.tr { color: var(--muted); }
.share { margin: .6rem 0 1rem; }
.share button { font: inherit; font-size: .9rem; padding: .4rem .8rem; border-radius: 8px;
                border: 1px solid var(--line); background: var(--panel); color: var(--ink);
                cursor: pointer; }
.share button:hover { border-color: var(--accent); }
.share code { display: inline-block; margin-left: .5rem; font-size: .8rem; color: var(--muted);
              word-break: break-all; }
.share .copied { margin-left: .5rem; color: var(--accent); font-size: .85rem; }
.share small { color: var(--muted); }
.card em.tr { display: block; font-style: normal; font-size: .85rem; }
h2.tr { font-size: 1rem; margin: 1.2rem 0 .3rem; }
:root {
  color-scheme: light dark;
  --bg: #f6f5f3; --panel: #fff; --ink: #1b1a19; --muted: #6d6a66;
  --line: #e2ded8; --accent: #3b7ddd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115; --panel: #171a21; --ink: #e6e8ee; --muted: #9aa3b2;
    --line: #2a2f3a; --accent: #6ea8fe;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo",
        "Noto Sans KR", sans-serif;
}
header, main, footer { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
header { padding-top: 3rem; padding-bottom: 1.5rem; }
h1 { margin: 0 0 .3rem; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -.02em; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
header p { margin: 0; color: var(--muted); }
.back a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.back a:hover { color: var(--accent); }
.grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.card .open { display: block; text-decoration: none; color: inherit; margin-bottom: .7rem; }
.card .open:hover strong { color: var(--accent); }
.card strong { display: block; font-size: 1rem; margin-bottom: .15rem; }
.card small { color: var(--muted); font-size: .8rem; }
video { width: 100%; max-height: 80vh; border-radius: 10px; background: #000; display: block; }
.card video { max-height: 24rem; }
.empty { color: var(--muted); }
.video main { padding-bottom: 2rem; }
.video pre {
  white-space: pre-wrap; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.1rem 1.25rem; margin-top: .6rem;
  font-family: inherit; line-height: 1.8;
}
.desc { margin: .9rem 0 0; }
.desc em.tr { display: block; font-style: normal; }
.dl { margin: .8rem 0 0; }
.dl a { color: var(--accent); }
footer { padding: 2.5rem 1.25rem 3rem; color: var(--muted); font-size: .85rem; }
footer p { margin: .2rem 0; }
.copyright { font-size: .78rem; opacity: .85; line-height: 1.5; }
.by { font-size: .85rem; color: var(--ink); }
.by strong { font-weight: 600; }
.sites { margin-top: .6rem; font-size: .8rem; }
.sites a { color: var(--accent); }
.admin { margin-top: .5rem; font-size: .75rem; opacity: .6; }
.admin a { color: var(--muted); }
.admin a:hover { color: var(--accent); }
.manage { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem;
          padding: .5rem .8rem; border: 1px dashed var(--line); border-radius: 10px; font-size: .85rem; }
.manage button { font: inherit; padding: .3rem .7rem; border-radius: 8px; border: 1px solid var(--line);
                 background: var(--panel); color: inherit; cursor: pointer; margin-right: .4rem; }
.manage button:disabled { opacity: .45; cursor: default; }
.manage #mg-del:not(:disabled) { border-color: #c44; color: #e88; }
.manage #mg-msg { color: var(--muted); }
.card { position: relative; }
.card .pick { position: absolute; top: .7rem; right: .7rem; width: 1.2rem; height: 1.2rem; z-index: 2; }
body.managing .card:has(.pick:checked) { outline: 2px solid #c44; }