/* === choose.css (step 1: scaffold only) === */
:root {
  --bg: #0c0c0c;
  --fg: #fafaf8;
  --max-width: 1200px;
  --space: 20px;
  --panel-bg: #111;
  --panel-stroke: #2a2a2a;
  --radius-lg: 16px;
  --radius-sm: 10px;
  --gap: 20px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --thumb-aspect: 21/9;
  --thumb-focus-y: 30%;
  /* 50% が中央。30%でさらに上側を残す */
}

/* Utility: visually hidden heading for a11y */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.choices-section {
  margin-top: 10px;
}

.choice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px; /* カード間の余白を小さめに調整 */
}

@media (min-width: 1200px) {
  .choice-list {
    gap: 16px;
  }
}

.choice-card {
  --card-bg: #f2f2f2;
  background: var(--card-bg);
  border: 1px solid var(--panel-stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  height: auto; /* fix: allow card to grow with its content */
}

.choice-card {
  backdrop-filter: blur(2px);

  border-color: #bfbfbf;
  /* やや明るい灰色 */
  transition: border-color 200ms ease;
}


.choice-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 34%);
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

/* テキストブロックの余白をさらに詰める */
.choice-text {
  padding: 12px 20px; /* 高さを圧縮 */
  gap: 3px;
  min-width: 0; /* fix: allow text column to shrink within grid to avoid overflow */
}

/* タイトル文字を少し小さく */
.choice-title {
  font-size: clamp(15px, 2.4vw, 28px);
  /* 現在: 22px〜34px */
  line-height: 1.1;
  margin: 0 0 4px;   /* タイトル下の余白を控えめに */
}

/* リード文をよりコンパクトに */
.choice-lead {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(15px, 1.4vw, 18px);
  /* 現在: 16px〜20px */
  line-height: 1.4;
  margin: 0;         /* 余白ゼロで詰める */
  
}

/* responsive image that crops gracefully */
.choice-thumb {
  position: relative;
  min-height: 140px;
  background: var(--card-bg);
  overflow: hidden; /* ensure media is clipped within the card */
}

/* サムネイルをさらに横長にトリミング */
.choice-thumb {
  aspect-ratio: 3 / 1;   /* より横長にして高さを抑える */
  min-height: 88px;      /* 最小高さをさらに縮める */
}

.choice-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--thumb-focus-y);
  display: block;
}

/* neutral fallback only when there is no image */
.choice-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.choice-thumb:has(.choice-img)::before {
  content: none;
}

/* overlay gradient from card background to transparent, covering the thumbnail */
.choice-thumb::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  /* 1pxより多めにかぶせるが、視覚的バランスは維持 */
  right: 0;
  z-index: 1;
  /* 非線形フェードを復活（ease-out曲線を模倣） */
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--card-bg) 100%, white 10%) 0%,
      color-mix(in srgb, var(--card-bg) 96%, transparent) 5%,
      color-mix(in srgb, var(--card-bg) 85%, transparent) 12%,
      color-mix(in srgb, var(--card-bg) 65%, transparent) 22%,
      color-mix(in srgb, var(--card-bg) 35%, transparent) 34%,
      color-mix(in srgb, var(--card-bg) 15%, transparent) 46%,
      rgba(242, 242, 242, 0) 56%);
  pointer-events: none;
}

/* Hover focus states (basic, safe) */
.choice-link:focus,
.choice-link:hover {
  outline: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
}

/* Container width alignment with the site (inherit global max width) */
.container {
  max-width: var(--max-width) !important;
  margin: 0 auto;
  padding-inline: var(--space);
}

/* ===== 年度タブエリア ===== */
.year-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 5px;
  margin: 8px 0 30px;
  margin-left: auto;
  margin-right: auto;
}

.year-tab {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1;
  padding: 8px 1px;
  /* 厚みのあるピル形 */
  border: 2px solid #0c0c0c;
  border-radius: 14px;
  /* 角丸 */
  background: #f7f7f5;
  /* 明るい面 */
  color: #0c0c0c;
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  width: 100%;
  text-align: center;
  /* 中央揃え */
}

.year-tab:hover {
  background: #efefed;
  /* ほんの少しだけ明るさ変化 */
}

.year-tab:hover {
  background: #efefed;
  /* 既存：少し明るく */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  /* ほんのり影 */
  transform: translateY(-1.5px);
  /* 軽く浮く */
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.year-tab:focus-visible {
  outline: 3px solid #6b7cff;
  /* キーボード操作時のフォーカス */
  outline-offset: 3px;
}

.year-tab.active {
  background: #0c0c0c;
  /* 選択時は黒地 */
  color: #fafaf8;
  /* 文字は白 */
  border-color: #0c0c0c;
  /* 枠も黒に */
}

.year-tab:not(.active) {
  transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease;
}

.year-tab:not(.active):not(:hover) {
  background-color: #f7f7f5;
  color: #0c0c0c;
  border-color: #0c0c0c;
}



/* 年ごとのパネル */
.year-panels {
  display: grid;
  gap: 40px;
}

.year-panel[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .choice-link {
    grid-template-columns: 1fr 38%;
  }
}

@media (max-width: 700px) {
  .choice-title {
    font-size: clamp(18px, 4.2vw, 24px);
  }
}

@media (max-width: 520px) {
  .choice-link {
    /* Keep 2 columns on most smartphones */
    grid-template-columns: 1fr minmax(160px, 36%);
  }

  .choice-thumb {
    min-height: 100px;
  }

  .choice-thumb::after {
    left: -4px;
    /* match desktop overlay offset */
    right: 0;
    /* ensure full overlay width */
    width: auto;
  }

  .year-tab {
    padding: 10px 12px;
  }
}

@media (max-width: 360px) {
  .choice-link {
    grid-template-columns: 1fr;
    /* fall back to single column only on very narrow screens */
  }
}

/* ===== Hover animation for thumbnail image ===== */
.choice-img {
  transition: transform 0.8s ease, opacity 0.8s ease;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.choice-link:hover .choice-img,
.choice-link:focus .choice-img {
  transform: scale(1.10);
  opacity: 0.96;
  /* 少しトーンを落として奥行き感を出す */
}

/* ===== Card hover shadow emphasis ===== */
@media (hover: hover) and (pointer: fine) {
  .choice-card {
    transition: box-shadow 240ms ease, border-color 240ms ease;
  }

  .choice-card:hover,
  .choice-card:focus-within {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.28),
      0 2px 6px rgba(0, 0, 0, 0.12);
    border-color: #d0d0d0;
    /* 枠線はやや明るく */
  }
}

.year-panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.year-panel.active {
  opacity: 1;
  transform: translateY(0);
}

.year-tab {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1;
  min-width: 100px;
}

@supports (text-wrap: balance) {
  .year-tab {
    text-wrap: balance;
  }
}

.year-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #0c0c0c;
  transition: all 300ms ease;
  transform: translateX(-50%);
}

.year-tab.active::after {
  width: 60%;
}

/* Optional focus utilities for per-card tuning */
.thumb-focus-top .choice-img {
  --thumb-focus-y: 30%;
}

.thumb-focus-center .choice-img {
  --thumb-focus-y: 50%;
}

.thumb-focus-bottom .choice-img {
  --thumb-focus-y: 70%;
}

/* == Choose page: unify content width with other pages == */
main.container {
  max-width: 1200px;
  width: min(100%, 1200px);
  margin-left: auto;
  margin-right: auto;
}


/* 撮影年のボタン群のみ幅を1000pxに制限 */
.year-tabs {
  max-width: 1050px;
  width: min(100%, 1050px);
  margin-left: auto;
  margin-right: auto;
}


/* 撮影年のボタン群のみ幅を1000pxに制限 */
.year-panels {
  max-width: 1050px;
  width: min(100%, 1050px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

/* ===== Divider image below year-tabs ===== */
.year-tabs-divider {
  display: block;
  margin: -10px auto 40px; /* 上下の余白 */
  max-width: 1000px;       /* 最大幅（好みに応じて調整） */  /* 相対幅（レイアウトに応じて自動調整） */
  height: auto;           /* 縦横比維持 */
  opacity: 0.9;           /* 少しだけ透かす */
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.year-tabs-divider:hover {
  opacity: 1;
  transform: scale(1.05); /* 軽く拡大して動きを出す */
}

/* スマホではやや小さめに */
@media (max-width: 600px) {
  .year-tabs-divider {
    max-width: 160px;
    margin: 16px auto 32px;
    opacity: 0.85;
  }
}
/* ===== Background panel around non-list elements ===== */
.background-wrap {
  background: #f7f7f5;              /* やさしい薄い背景 */
  border: 1px solid #e1e1df;         /* 薄い枠線 */
  border-radius: var(--radius-lg);   /* 角丸はサイト基準に合わせる */
  padding: 24px 20px;                /* 内側の余白 */
  box-shadow: var(--shadow);         /* 既存の影トークンを利用 */
  margin: 16px auto 60px;            /* 上下の間隔。中央寄せ */
}

/* 中の要素（年タブや区切り画像）は既存で幅制限されているので、
   ラッパー側では横幅制御はせず、左右だけ少し余裕を持たせる */
.background-wrap > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

/* モバイルではパディングを少し軽くする */
@media (max-width: 600px) {
  .background-wrap {
    padding: 16px 14px;
    margin: 12px auto 40px;
  }
}