:root { --surface:#0d0d0d; --panel:#141414; --panel-high:#1a1a1a; --text:#ddd; --muted:#999; --dim:#555; --primary:#cc2929; --line:rgba(255,255,255,.1); --ease:cubic-bezier(.2,0,0,1); }
* { box-sizing:border-box; } body { margin:0; background:var(--surface); color:var(--text); font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
.discography-page { min-height:100vh; padding-bottom:80px; }.page-header { padding:40px 60px 12px; }.back-nav { display:inline-block; margin-bottom:12px; color:var(--dim); text-decoration:none; font-size:13px; letter-spacing:.5px; transition:color .2s var(--ease); }.back-nav:hover { color:var(--primary); }.page-header h1 { margin:0; font:700 32px "Cinzel",serif; color:var(--primary); letter-spacing:6px; }.page-header p { margin:5px 0 0; color:#666; font-size:13px; letter-spacing:1px; }
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:14px 60px 22px; }.filter-group { display:flex; gap:18px; flex-wrap:wrap; }.main-tag { border:0; padding:0; background:none; color:#666; cursor:pointer; font:13px "Space Grotesk","Noto Sans SC",sans-serif; transition:color .25s var(--ease); }.main-tag .diamond { color:#333; font-size:10px; margin-right:6px; }.main-tag:hover { color:#aaa; }.main-tag.active { color:#fff; }.main-tag.active .diamond { color:var(--primary); }.search-box { display:flex; align-items:center; max-width:330px; min-width:200px; flex:1; padding:8px 15px; border:1px solid rgba(255,255,255,.06); border-radius:999px; background:var(--panel); transition:border-color .2s var(--ease); }.search-box:focus-within { border-color:var(--primary); box-shadow:0 0 0 2px rgba(204,41,41,.12); }.search-icon { color:#666; margin-right:8px; }.search-box input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--text); font:13px inherit; }.result-count { margin-left:auto; color:var(--dim); font-size:12px; }
.archive { padding:0 60px 60px; max-width:1500px; margin:auto; }.year-section + .year-section { margin-top:48px; }.year-divider { display:flex; align-items:center; gap:16px; margin-bottom:22px; color:var(--primary); font:700 22px "Cinzel",serif; letter-spacing:4px; }.year-divider::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,rgba(204,41,41,.45),transparent); }.release-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:28px; }.release-card { border:0; padding:0; background:none; color:inherit; text-align:left; cursor:pointer; min-width:0; }.release-cover { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:var(--panel); box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease); }.release-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 35%); pointer-events:none; }.release-cover img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .5s var(--ease),filter .5s var(--ease); filter:grayscale(25%) contrast(1.05); }.release-card:hover .release-cover { transform:translateY(-5px); border-color:rgba(255,77,77,.55); box-shadow:0 0 42px rgba(204,41,41,.14),0 14px 30px rgba(0,0,0,.45); }.release-card:hover img { transform:scale(1.04); filter:grayscale(0) contrast(1.05); }.cover-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:#666; text-align:center; font:12px "Space Grotesk",sans-serif; letter-spacing:1px; background:radial-gradient(circle at 50% 35%,#281416,#111); }.release-info { padding:15px 2px 0; }.release-date { color:var(--primary); font:600 11px "Space Grotesk",sans-serif; letter-spacing:1.5px; }.release-info h2 { margin:7px 0 3px; font:700 17px/1.35 "Cinzel","Noto Sans SC",serif; }.release-info p { margin:0; color:var(--muted); font-size:12px; }.release-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }.release-tags span { border:1px solid var(--line); padding:3px 7px; color:#777; font:10px "Space Grotesk",sans-serif; letter-spacing:.5px; }.no-results,.empty-detail { padding:60px; color:var(--muted); text-align:center; }

/* 原型式横向档案条目 */
.year-section { display:grid; grid-template-columns:104px minmax(0,1fr); gap:28px; position:relative; }.year-section + .year-section { margin-top:44px; }.year-divider { display:block; position:relative; margin:0; color:var(--primary); font:700 27px/1 "Cinzel",serif; letter-spacing:3px; }.year-divider::after { content:""; position:absolute; left:12px; top:46px; bottom:-44px; width:1px; height:auto; background:linear-gradient(var(--primary),var(--line),transparent); }
.release-grid { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:14px; }
.release-row { position:relative; display:grid; grid-template-columns:184px minmax(0,1fr) 210px; min-width:0; max-width:100%; min-height:184px; width:100%; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:0; background:linear-gradient(120deg,var(--panel-high),#0b0b0b 72%); color:inherit; text-align:left; white-space:normal; cursor:pointer; transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease); }
.release-row.is-coming-soon { border-color:rgba(204,41,41,.3); background:linear-gradient(120deg,#1d1214,#0b0b0b 72%); }
.release-row.is-coming-soon:hover,.release-row.is-coming-soon:focus-visible { border-color:rgba(255,93,93,.78); box-shadow:0 0 0 1px rgba(204,41,41,.18),0 14px 34px rgba(116,18,18,.2); }
.release-row:focus-visible { outline:2px solid rgba(255,110,110,.9); outline-offset:3px; }
.coming-ribbon { position:absolute; top:17px; right:-48px; z-index:10; width:190px; padding:7px 0 6px; transform:rotate(31deg); background:linear-gradient(90deg,#8f1d27,#d94343 48%,#8f1d27); box-shadow:0 4px 12px rgba(0,0,0,.42); color:#fff; text-align:center; font:700 10px/1 "Space Grotesk",sans-serif; letter-spacing:1.8px; pointer-events:none; }
.release-row::after { content:""; position:absolute; right:-64px; bottom:-88px; width:170px; height:170px; border:1px solid rgba(204,41,41,.12); transform:rotate(45deg); pointer-events:none; }
.release-row:hover { transform:translateX(4px); border-color:rgba(255,77,77,.46); background:linear-gradient(120deg,#1b1415,#0b0b0b 74%); }
.release-row.is-release-today { border-color:rgba(201,166,79,.68); background:linear-gradient(120deg,rgba(48,38,20,.58),#0b0b0b 74%); box-shadow:0 0 0 1px rgba(201,166,79,.1),0 10px 28px rgba(112,83,20,.1); }
.release-row.is-release-today:hover,.release-row.is-release-today:focus-visible { border-color:rgba(231,196,104,.95); background:linear-gradient(120deg,rgba(62,47,21,.72),#0b0b0b 74%); box-shadow:0 0 0 1px rgba(231,196,104,.22),0 14px 36px rgba(112,83,20,.2); }
.today-ribbon { background:linear-gradient(90deg,#9b7930,#d7b65f 48%,#9b7930); color:#17130a; text-shadow:none; }
.row-cover { position:relative; min-height:184px; overflow:hidden; background:linear-gradient(145deg,#191416,#0d0d0d); }
.cover-stack-card { position:absolute; left:17px; top:21px; z-index:calc(5 - var(--i)); width:137px; aspect-ratio:1; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#111; box-shadow:8px 10px 22px rgba(0,0,0,.52); transform:translate(calc(var(--i) * 9px),calc(var(--i) * -3px)) rotate(calc((var(--i) - 1) * 1.1deg)); transition:transform .3s var(--ease); }
.release-row:hover .cover-stack-card { transform:translate(calc(var(--i) * 12px),calc(var(--i) * -4px)) rotate(calc((var(--i) - 1) * 1.7deg)); }
.cover-stack-card img { width:100%; height:100%; object-fit:contain; background:#0d0d0d; }
.cover-count { position:absolute; right:8px; bottom:8px; z-index:8; padding:5px 7px; border-left:1px solid var(--primary); background:rgba(8,8,8,.88); color:#aaa; font:8px "Space Grotesk",sans-serif; letter-spacing:1px; }
.row-main { min-width:0; padding:23px 28px; overflow:hidden; }.row-type { color:var(--primary); font:10px "Space Grotesk",sans-serif; letter-spacing:2px; }.row-main h2 { margin:17px 0 7px; overflow-wrap:anywhere; font:700 clamp(22px,2.7vw,34px)/1.08 "Cinzel","Noto Serif JP",serif; }.row-main p { margin:0 0 8px; overflow-wrap:anywhere; color:var(--muted); font-size:12px; }.row-date { color:var(--muted); font:12px "Space Grotesk",sans-serif; letter-spacing:1.5px; }
.row-aside { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; padding:23px 24px; border-left:1px solid var(--line); }.catalog { color:var(--dim); font:10px/1.5 "Space Grotesk",sans-serif; letter-spacing:1px; }.chart-rank { color:var(--text); font:500 31px "Cinzel",serif; }.chart-rank small { display:block; margin-bottom:7px; color:var(--dim); font:9px "Space Grotesk",sans-serif; letter-spacing:1px; }.chart-summary { display:block; white-space:nowrap; }.chart-sales.is-no-data { font-size:20px; }.open-mark { align-self:flex-end; color:var(--primary); font:12px "Space Grotesk",sans-serif; }
.row-aside > * { position:relative; z-index:1; }
.row-aside::before { content:""; position:absolute; top:50%; right:8%; width:150px; height:150px; transform:translate(18%,-50%) scale(.82); border-radius:50%; opacity:0; pointer-events:none; background:repeating-conic-gradient(from 0deg,transparent 0deg 8deg,rgba(222,183,83,.28) 8.5deg 9.5deg,transparent 10deg 18deg); -webkit-mask:radial-gradient(circle,transparent 0 14%,#000 15% 18%,transparent 19% 34%,#000 35% 37%,transparent 38% 100%); mask:radial-gradient(circle,transparent 0 14%,#000 15% 18%,transparent 19% 34%,#000 35% 37%,transparent 38% 100%); transition:opacity .3s var(--ease),transform .3s var(--ease); }
.is-release-today .row-aside::before { opacity:.24; transform:translate(18%,-50%) scale(1); }
.is-release-today:hover .row-aside::before,.is-release-today:focus-visible .row-aside::before { opacity:.42; transform:translate(18%,-50%) scale(1.04); }
.today-prompt { position:absolute!important; right:18px; bottom:52px; z-index:2!important; display:flex; flex-direction:column; gap:4px; max-width:175px; padding:9px 10px; border:1px solid rgba(218,181,88,.8); background:rgba(193,151,48,.94); box-shadow:0 8px 20px rgba(0,0,0,.38); opacity:0; transform:translateY(7px); transition:opacity .22s var(--ease),transform .22s var(--ease); pointer-events:none; }
.today-prompt strong { color:#211a0b; font:700 10px/1 "Space Grotesk",sans-serif; letter-spacing:1.2px; }.today-prompt span { color:#fff6d6; font:600 11px/1.45 "Space Grotesk",sans-serif; letter-spacing:.5px; }.is-release-today:hover .today-prompt,.is-release-today:focus-visible .today-prompt { opacity:1; transform:translateY(0); }
.coming-prompt { position:absolute; right:18px; bottom:52px; z-index:2; display:flex; flex-direction:column; gap:4px; max-width:175px; padding:9px 10px; border:1px solid rgba(255,93,93,.48); background:rgba(38,10,13,.94); box-shadow:0 8px 20px rgba(0,0,0,.38); opacity:0; transform:translateY(7px); transition:opacity .22s var(--ease),transform .22s var(--ease); pointer-events:none; }
.coming-prompt strong { color:#ff8585; font:700 10px/1 "Space Grotesk",sans-serif; letter-spacing:1.2px; }.coming-prompt span { color:#e5b6b6; font-size:11px; line-height:1.45; }.release-row.is-coming-soon:hover .coming-prompt,.release-row.is-coming-soon:focus-visible .coming-prompt { opacity:1; transform:translateY(0); }.release-row.is-coming-soon:hover .row-date { color:#ff8585; }
@media (max-width:900px) { .release-row { grid-template-columns:145px 1fr; }.row-cover { min-height:184px; }.cover-stack-card { left:13px; width:105px; top:28px; }.row-aside { grid-column:2; padding:12px 22px; border-left:0; border-top:1px solid var(--line); flex-direction:row; align-items:center; }.chart-rank { font-size:21px; } }
@media (max-width:768px) { .page-header { padding:32px 20px 12px; }.toolbar { padding:12px 20px 20px; }.archive { padding:0 20px 45px; }.result-count { margin-left:0; } }
@media (max-width:560px) { .page-header h1 { font-size:27px; letter-spacing:4px; }.filter-group { gap:14px; }.search-box { max-width:none; flex-basis:100%; }.year-section { grid-template-columns:minmax(0,1fr); min-width:0; gap:15px; }.year-divider::after { display:none; }.release-row { grid-template-columns:110px calc(100vw - 150px); width:calc(100vw - 40px); min-height:158px; }.row-cover { min-height:158px; }.cover-stack-card { left:9px; top:30px; width:78px; }.row-main { width:auto; max-width:none; padding:18px; }.row-main h2,.row-main p { max-width:100%; white-space:normal; word-break:break-all; }.row-main h2 { margin-top:12px; font-size:20px; }.row-aside { grid-column:1/-1; min-width:0; width:calc(100vw - 40px); }.catalog { display:none; } }