:root { color-scheme: dark; --bg:#111522; --panel:#1b2030; --text:#f7f0e6; --muted:#b9bac8; --gold:#f0c68d; --line:#383d50; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 90% 0%,#493140 0,transparent 46%),var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,"Malgun Gothic",sans-serif; }
body.modal-open { overflow:hidden; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { color:inherit; }
:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.wrap { width:min(1320px,90%); margin-inline:auto; }
.intro { padding:64px 0 36px; position:relative; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--gold); font-size:.875rem; letter-spacing:.12em; }
h1 { margin:20px 0; font-family:Georgia,"Batang",serif; font-size:clamp(2.7rem,6vw,5.2rem); font-weight:500; line-height:1.2; letter-spacing:-.045em; }
h1 em { color:var(--gold); font-style:normal; }
.subtitle { color:var(--muted); margin:0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-top:28px; }
h2 { font-size:1.25rem; }
#count { color:var(--muted); font-size:.875rem; }
.toolbar { display:flex; gap:16px; margin:8px 0 28px; }
.toolbar label { display:grid; gap:8px; font-size:.875rem; color:var(--muted); }
.search { flex:1; }
input,select { width:100%; min-height:48px; padding:10px 14px; background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text); }
input::placeholder { color:#a5a7b7; }
.grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px 20px; }
.card { display:block; width:100%; padding:0; text-align:left; background:transparent; border:0; cursor:pointer; transition:transform .2s; min-width:0; }
.card:hover { transform:translateY(-5px); }
.art { aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--panel); transition:box-shadow .2s; }
.card:hover .art { box-shadow:0 12px 30px #0006; }
.art img { width:100%; height:100%; object-fit:cover; display:block; }
.card-title { display:block; margin-top:12px; font-size:1rem; font-weight:650; overflow-wrap:anywhere; }
.card-author { display:block; color:var(--muted); font-size:.875rem; margin-top:4px; overflow-wrap:anywhere; }
.placeholder { height:100%; min-height:160px; display:grid; place-content:center; text-align:center; gap:10px; padding:20px; color:var(--muted); background:linear-gradient(145deg,#343047,#202939); }
.placeholder strong { color:var(--gold); font:normal 3rem Georgia,serif; }
.placeholder span { font-size:.875rem; }
.empty { padding:64px 16px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:10px; }
footer { padding:52px 0 28px; color:var(--muted); font-size:.875rem; }
dialog { width:min(800px,92vw); max-height:90dvh; padding:0; border:1px solid #696071; border-radius:16px; background:var(--panel); color:var(--text); overflow:auto; }
dialog::backdrop { background:#080b16d9; backdrop-filter:blur(6px); }
.modal-inner { display:grid; grid-template-columns:1fr 1.1fr; position:relative; }
.close { position:absolute; top:12px; right:12px; z-index:1; width:44px; height:44px; border:1px solid #ffffff50; border-radius:50%; background:#121625eb; font-size:1.8rem; cursor:pointer; }
.modal-art { min-height:320px; background:#111522; display:grid; place-items:center; }
.modal-art img { width:100%; max-height:75dvh; object-fit:contain; display:block; }
.modal-art .placeholder { width:100%; }
.modal-info { padding:64px 28px 32px; align-self:center; min-width:0; }
#modal-title { font-size:1.6rem; line-height:1.4; margin:12px 0; overflow-wrap:anywhere; }
#modal-author { color:var(--muted); overflow-wrap:anywhere; }
.links { display:grid; gap:12px; margin-top:28px; }
.link { display:block; padding:14px 12px; min-height:50px; border:1px solid #858293; border-radius:8px; text-align:center; text-decoration:none; color:var(--text); font-weight:650; }
.primary { background:var(--gold); color:#201b26; border-color:var(--gold); }
.link:hover { filter:brightness(1.12); }
.link[aria-disabled="true"] { opacity:.45; cursor:default; }
.hint { font-size:.875rem; color:var(--muted); margin-top:20px; }
[hidden] { display:none !important; }
@media(min-width:760px) { .subtitle { position:absolute; right:0; bottom:44px; text-align:right; } }
@media(max-width:1100px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:850px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  .intro { padding-top:36px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
  .toolbar { gap:10px; }
  .toolbar select { max-width:145px; }
  .modal-inner { grid-template-columns:1fr; }
  .modal-art { min-height:180px; }
  .modal-art img { max-height:38dvh; }
  .modal-info { padding:22px; }
  .modal-info .eyebrow { margin-top:0; }
}
@media(max-width:350px) { .grid { grid-template-columns:1fr; } .toolbar { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }