/* =========================================================
   Advent Cosplay — base.css（最小・堅牢ベース）
   役割：
   - デザイントークン（色 / 影 / 尺度）
   - リセット / アクセシビリティ / タイポの基本
   - 汎用レイアウトユーティリティ（container, stack, cluster 等）
   - メディアのデフォルト（img / video / svg など）
   - サイト横断で使える “ごく汎用” コンポーネント（tcard骨格）
   ※ ページ固有（HomeのHERO/NEWS/棚背景など）は各ページCSSへ
========================================================= */

/* ------------------------------
   1) Design Tokens（色・影・尺度）
------------------------------ */
:root {
  /* Palette（必要に応じて上書きOK） */
  --c-ink:        #1b2430;
  --c-ink-weak:   #5b5652;
  --c-bg:         #faf7f6;
  --c-white:      #fff;
  --c-primary:    #823327;   /* 深めのボルドー */
  --c-primary-weak:#eecebf;

  /* Shadows */
  --shadow-sm:    0 4px 12px rgba(0,0,0,.08);
  --shadow-md:    0 8px 20px rgba(0,0,0,.12);
  --shadow-lg:    0 12px 28px rgba(0,0,0,.18);

  /* Layout scale */
  --content-w:    1200px;
  --space-1:      8px;
  --space-2:      12px;
  --space-3:      16px;
  --space-4:      24px;
  --space-5:      32px;
  --space-6:      48px;
}

/* ------------------------------
   2) Reset / Base / A11y
------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { overflow-y: auto; }

body {
  margin: 0;
  padding: 0;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 画像/動画/SVG は親幅に収める */
img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* アクセシブルフォーカス */
:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--c-primary) 85%, white);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 動きに弱い環境への配慮 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 基本のリズム（見出し・本文） */
:where(h1,h2,h3,h4,h5,h6){
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}
:where(p,ul,ol,dl,blockquote,pre,table){
  margin: 0 0 var(--space-3);
}

/* ベースリンク */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 視覚的に隠す（SR向け） */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------
   3) Layout Utilities
------------------------------ */
.container { width: min(var(--content-w), 92vw); margin-inline: auto; }
.wrapper   { max-width: var(--content-w); margin: 0 auto; padding-inline: 16px; }

/* 縦積み（子要素の間に等間隔） */
.stack > * + * { margin-block-start: var(--space-4); }

/* 中央寄せ（単要素センター） */
.center { display: grid; place-items: center; }

/* 横並びクラスター（折返し対応） */
.cluster {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--space-3);
}

/* 画像や要素のはみ出し保険（必要箇所に付与） */
.overflow-clip { overflow: clip; }
.overflow-hidden { overflow: hidden; }

/* ------------------------------
   4) Buttons（軽いプリセット）
------------------------------ */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-primary-weak);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.btn:hover {
  transform: translateY(-1px);
  filter: brightness(.97);
  box-shadow: var(--shadow-md);
}

/* ------------------------------
   5) Generic Card（Trading Card骨格）
   ※ サイト横断で再利用する前提の“汎用”だけ残す
------------------------------ */
.tcard {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  background: var(--t-bg, none) center/contain no-repeat; /* 柄はページ側で注入 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.tcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  filter: saturate(1.03);
}

/* サブ要素（可変パラメータはページ側で上書き可） */
:root{
  --t-thumb-top: 16%;
  --t-thumb-left: 6%;
  --t-thumb-w: 88%;
  --t-thumb-h: 40%;
  --t-body-l: 6%;
  --t-body-r: 7%;
  --t-body-b: 12%;
}
.tcard__date {
  position: absolute;
  top: 4%; left: 6%;
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 16px);
  color: #fff;
  letter-spacing: .06em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}
.tcard__thumb {
  position: absolute;
  top: var(--t-thumb-top);
  left: var(--t-thumb-left);
  width: var(--t-thumb-w);
  height: var(--t-thumb-h);
  overflow: hidden;
  border-radius: 4px;
}
.tcard__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease, filter .35s ease;
}
.tcard:hover .tcard__img { transform: scale(1.03); filter: brightness(1.03) contrast(1.05); }

.tcard__body {
  position: absolute;
  left: var(--t-body-l);
  right: var(--t-body-r);
  bottom: var(--t-body-b);
  display: grid; row-gap: .5em;
  color: var(--c-ink);
}
.tcard__title {
  margin: 0; font-weight: 800; line-height: 1.2;
  font-size: clamp(18px, 2.4vw, 26px);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard__desc {
  margin: 0; line-height: 1.6; color: rgba(0,0,0,.85);
  font-size: clamp(13px, 1.6vw, 15px);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard__btn {
  justify-self: center;
  margin-top: .5em;
  padding: .55em 1.2em;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(12px,1.6vw,14px);
  color: #fff; background: #432445;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.tcard:hover .tcard__btn {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
  filter: brightness(1.05);
}

/* ------------------------------
   6) Shelf（構造のみ）
   ※ 背景画像や特殊装飾は各ページCSSで
------------------------------ */
.shelf {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  position: relative;
  z-index: 1;
}
.shelf__frame {
  max-width: var(--content-w);
  width: 92vw;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 60px;
  flex-wrap: wrap;
}
.shelf__books {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 60px;
  padding: 0;
  margin: 0;
}
.shelf__cell { flex: 0 0 auto; display: flex; justify-content: center; align-items: flex-end; }
.shelf__book { display: block; transition: transform .3s ease, filter .25s ease; }
.shelf__book:hover { transform: translateY(-6px) scale(1.03); filter: brightness(1.05); }

/* ------------------------------
   7) ここに “ページ共通の軽ユーティリティ” だけ追加していく
   - ページ固有ロジック（HomeのNEWS/HERO、装飾額縁、背景画像指定 等）は各CSSへ
------------------------------ */