:root {
  --brass: #c59b27;
  --iron: #182232;
  --iron-2: #1f2b3d;
  --parchment: #f4efe6;
  --muted: #9aa7b8;
  --line: rgba(197, 155, 39, 0.35);
  --azure: #00a8e8;
  --verdigris: #2e8b57;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(0, 168, 232, 0.12), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(197, 155, 39, 0.14), transparent 60%),
    #0d131c;
  color: var(--parchment);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap { width: min(920px, 92vw); margin: 0 auto; }
header { border-bottom: 1px solid var(--line); background: rgba(24, 34, 50, 0.6); }
.bar { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--parchment); text-decoration: none; font-weight: 800; font-size: 17px; }
.brand img { border-radius: 8px; border: 1px solid var(--line); }
.tag { margin-left: auto; font-size: 10px; letter-spacing: 0.22em; color: var(--brass); }
main { flex: 1; padding: 28px 0 40px; }
h1 { font-size: 26px; margin: 0 0 6px; }
h1 span { color: var(--brass); font-size: 18px; }
.lead { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.filters { display: flex; gap: 6px; }
.filters button {
  padding: 8px 16px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(24, 34, 50, 0.7);
  color: var(--parchment); font: inherit; font-size: 13px; font-weight: 700;
}
.filters button[aria-pressed='true'] { background: rgba(197, 155, 39, 0.2); color: var(--brass); border-color: var(--brass); }
.release {
  border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(31, 43, 61, 0.9), rgba(24, 34, 50, 0.95));
}
.release-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ver { font-size: 19px; font-weight: 800; }
.plat { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 3px; border: 1px solid currentColor; }
.plat.aos { color: var(--verdigris); }
.plat.ios { color: var(--azure); }
.when { margin-left: auto; font-size: 12px; color: var(--muted); }
.meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.meta b { color: var(--parchment); font-weight: 700; }
.notes { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: #c9d3e0; line-height: 1.7; }
.dl {
  display: inline-block; margin-top: 14px; padding: 11px 22px; border-radius: 4px;
  background: linear-gradient(180deg, #d8ae3a, #a37c1c 60%, #7d5f13);
  color: #1a1408; font-weight: 800; text-decoration: none; font-size: 14px;
  border: 1px solid #f0d27a; box-shadow: 0 3px 0 #5c4409;
}
.dl:active { transform: translateY(2px); box-shadow: 0 1px 0 #5c4409; }
.empty, .error { color: var(--muted); font-size: 14px; padding: 24px 0; }
.error { color: #d9381e; }
footer { border-top: 1px solid var(--line); padding: 16px 0; font-size: 11px; color: #5d6b7d; }