/* ==========================================================================
   02 文章索引 —— 同人志的目次页：年份像书脊，列表像目录。
   页面特有样式，只作用于本页。
   ========================================================================== */

/* 页头：留白、标题字号、统计条几何一律由 v2.css 的 .room-head / .stat-box 提供，本页不再覆盖 */

/* ---------- 筛选工具条 ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;
  padding:9px 12px;border:3px solid var(--ink);background:var(--paper-2);box-shadow:var(--hard-sm)}
.tabs{display:flex;flex-wrap:wrap;gap:7px}
.tab{display:inline-flex;align-items:baseline;border:2px solid var(--ink);background:var(--paper);
  padding:5px 12px 4px;font-size:13px;font-weight:900;letter-spacing:.02em;
  transition:background .14s var(--ease),box-shadow .14s var(--ease),transform .14s var(--ease)}
.tab:hover{background:var(--pink-wash);transform:translate(-1px,-1px)}
.tab.is-on{background:var(--pink);box-shadow:3px 3px 0 var(--shade);transform:none}
.toolbar-count{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-62);white-space:nowrap}
.toolbar-count b{font-family:var(--disp);font-size:20px;line-height:1;letter-spacing:0;color:var(--pink-deep);margin:0 3px}
.toolbar-count .slash{color:var(--ink-62);margin:0 3px}

/* ---------- 左侧年份 / 右侧目次 ---------- */
.contents{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding-top:32px;align-items:start}
.years{position:sticky;top:calc(var(--topbar-h) + 18px)}
.y-halo{position:absolute;left:-40px;top:44px;width:200px;height:200px;z-index:0;pointer-events:none;
  border-radius:50%;background:var(--pink);opacity:.26;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 50%, transparent) 1.1px,transparent 1.3px);background-size:5px 5px}
.y-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.y-head .mono{font-size:10px;letter-spacing:.1em}
.year{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
  border:3px solid var(--ink);background:var(--paper);box-shadow:var(--hard-sm);
  padding:11px 13px 9px;margin-bottom:9px;text-align:left;cursor:pointer;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s var(--ease)}
.year .yy{font-family:var(--disp);font-size:29px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.year .yc{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-62)}
.year:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shade)}
.year.is-on{background:var(--pink);transform:rotate(-1.2deg)}
.year.is-on .yc{color:var(--on-pink)}
[data-theme="dark"] .year.is-on .yy{color:var(--on-pink)}
.y-note{position:relative;z-index:1;margin-top:12px;font-size:13px;line-height:1.8;color:var(--ink-62);max-width:21ch}
.years .narration{position:relative;z-index:1;margin-top:20px;transform:rotate(.5deg)}
.years .narration p{font-size:13px}

/* ---------- 目次列表 ---------- */
.list-head{display:flex;align-items:center;gap:14px;padding-bottom:12px}
.list-rule{flex:1;height:3px;background:var(--ink)}
.list-head .mono{font-size:10px;letter-spacing:.1em;white-space:nowrap}
.rows{border-top:0}
.rows .r[hidden]{display:none}
.rows .r{grid-template-columns:58px minmax(0,1fr) auto;align-items:start;padding:18px 8px}
.rows .r .no{font-size:28px;line-height:.95;padding-top:2px}
.rows .r .body{display:flex;flex-direction:column;gap:7px;min-width:0}
.rows .r .t{font-size:20px;line-height:1.5}
.rows .r .rtags{display:flex;gap:6px;flex-wrap:wrap}
.rows .r .rtags .tag{font-size:10px;padding:2px 7px 1px;background:var(--paper)}
.rows .r .m{font-size:10px;line-height:1.9;padding-top:4px;text-align:right;color:var(--ink-62)}

/* 本期主打 */
.rows .r.is-feat{position:relative;margin:8px 0 18px;padding:20px 20px 18px;background:var(--pink-wash);
  border:3px solid var(--ink);box-shadow:var(--hard);transform:rotate(-.35deg);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.rows .r.is-feat:hover{background:var(--pink-soft);transform:rotate(-.35deg) translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--shade);padding-left:20px}
.rows .r.is-feat .no{font-size:36px;color:var(--pink-deep);padding-top:0}
.rows .r.is-feat .t{font-size:26px;line-height:1.4;letter-spacing:-.02em}
.rows .r.is-feat .d{font-size:14px;line-height:1.85;color:var(--ink-80);margin-top:0}
.rows .r.is-feat .feat-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rows .r.is-feat .feat-label .mono{font-size:10px;letter-spacing:.14em;color:var(--pink-deep)}
.rows .r.is-feat .rtags .tag{background:var(--paper)}

/* 筛选无结果 */
.empty{display:none;border:3px solid var(--ink);background:var(--paper);box-shadow:var(--hard-sm);
  padding:22px 20px;margin-top:8px;align-items:center;gap:18px;flex-wrap:wrap}
.empty.is-on{display:flex}
.empty p{font-size:14px;color:var(--ink-62)}
.empty p b{color:var(--pink-deep)}

/* 列表底 */
.list-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px}
.list-foot .mono{font-size:10px;letter-spacing:.1em}
.list-foot .btn{height:46px}
.list-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.list-links .arrow-link{white-space:nowrap}
.foot .colophon{color:color-mix(in srgb, var(--paper) 55%, transparent)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .room-head{padding-top:calc(var(--topbar-h) + 26px)}
  .room-stats{justify-content:flex-start}
  .toolbar{flex-wrap:wrap}
  .contents{grid-template-columns:1fr;gap:24px;padding-top:26px}
  .years{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:start}
  .years .y-head{grid-column:1/-1;margin-bottom:2px}
  .year{margin-bottom:0}
  .years .y-note{grid-column:1/-1;max-width:none;margin-top:2px}
  .years .narration,.years .y-issue,.y-halo{display:none}
}
@media (max-width:760px){
  .topmeta > span{display:none}
  .topmeta{gap:0;font-size:10px}
  .page-sticker{font-size:10px;padding:4px 6px;letter-spacing:.1em}
  .room-head{padding-top:calc(var(--topbar-h) + 14px);padding-bottom:22px}
  .room-head h1{font-size:34px}
  .room-stats{gap:6px}
  .room-stats .stat-box{min-width:0;padding:7px 9px}
  .room-stats .stat-box .k{font-size:10px;letter-spacing:.08em}
  .room-stats .stat-box .v{font-size:18px}
  .toolbar{margin-top:16px;padding:8px;flex-direction:column;align-items:flex-start;gap:10px}
  .tabs{gap:6px}
  .tab{font-size:12px;padding:4px 8px 3px}
  .contents{padding-top:18px;gap:18px}
  .years{grid-template-columns:repeat(3,1fr);gap:6px}
  .year{padding:8px 9px 7px;border-width:2px;box-shadow:2px 2px 0 var(--shade)}
  .year .yy{font-size:21px}
  .year .yc{font-size:10px}
  .list-head{gap:10px}
  .rows .r{padding:15px 4px}
  .rows .r .no{font-size:22px}
  .rows .r .t{font-size:17px}
  .rows .r .m{text-align:left}
  .rows .r.is-feat{padding:14px 12px 13px;margin:6px 0 14px}
  .rows .r.is-feat .t{font-size:21px}
  .rows .r.is-feat .d{font-size:13px}
  .rows .r.is-feat .no{font-size:26px}
  .list-foot{gap:12px}
}