:root{
  --bg:#dbe5f0; --text:#1a1a1a; --muted:#6a6a6a;
  --card:#fff; --border:#e2e5ee; --accent:#6b6fcf;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1114; --text:#e6e6e6; --muted:#a6a6a6; --card:#14171c; --border:#2a2e35; --accent:#8aa2ff; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  text-rendering:optimizeLegibility;
}

/* ヘッダー */
.site-header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border)}
.site-nav{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:16px;align-items:center}
.site-logo,.site-nav-link{color:inherit;text-decoration:none}
.site-nav-spacer{flex:1}

.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 64px}

/* タグタブ */
.tabs{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.tab{
  appearance:none;border:none;background:transparent;color:var(--text);opacity:.8;cursor:pointer;
  padding:8px 12px;border-radius:9999px;transition:.15s
}
.tab[aria-selected="true"]{background:var(--accent);color:#fff;opacity:1}

/* 本棚グリッド ##################################################################*/
/* 1冊の幅*/
:root { --book-w: 79px; --book-h-std: 280px;}

.shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  padding: 16px 1px 1px 1px;
  margin-bottom: 2em;

  /* 棚の奥の色 */
  background: #807163;  /* 暗めの茶色 */

  /* 外枠（明るい木の枠） */
  border: 16px ridge #b9afa4;   /* 枠色：明るい木色 */
  border-radius: 1px;

  /* 内側の影で“奥行き”を出す */
  box-shadow: inset 0 8px 12px rgba(0,0,0,0.3),
              inset 0 -6px 8px rgba(0,0,0,0.25);

  /* 繰り返しグラデーションで横線を入れる */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--book-h-std) + 40px), /* 本＋上下余白分 */
      rgba(0,0,0,0.3) calc(var(--book-h-std) + 32px),
      rgba(0,0,0,0.3) calc(var(--book-h-std) + 34px) /* 線の太さ */
    );
}

/* 本全体 ###################################################################*/

/* 高さ */
.size-tall  .cover { height: 300px; }
.size-std   .cover { height: var(--book-h-std); }
.size-short .cover { height: 260px; }

.book{
  width: var(--book-w);
  margin: 20px 0 0 0; 
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cover{
  width: var(--book-w);
  height: var(--book-h-std);
  border-radius: 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上:タイトル、下:日付 */
  align-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
  border: 1px solid #0000007e;
}
/* タイトル */
.book-title {
  margin-top: 20px;
  writing-mode: vertical-rl;
}
/* 日付（小さめフォント） */
.book-date {
  writing-mode: horizontal-tb;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 6px;
  border-top: white solid 1px;
}

/* 世界ごとの色設定 */
.world-draconis .cover { background: #5c2525; }
.world-kurokura .cover { background: #2c2c2c; }
.world-ryukoto .cover  { background: #664b6e; }
.world-anday .cover    { background: #855081; }
.world-mm .cover  { background: #444772; }
.world-siryou .cover  { background: #6d6430; }
.world-dimension .cover  { background: #e6e6e6; color: white;}

/* 空表示 */
.empty{color:var(--muted);text-align:center;margin:24px 0}

/* スマホ微調整 */
@media (max-width: 520px){
  :root { --book-w: 96px; --book-h: 240px; }
}