/* キーワードハブ（/reels, /reels/{slug}）。本文はすべて SSR。ページ固有 JS は
   ハブのタイル自動再生（reels-hub.js）だけで、無くても中身は成立する。 */
main.reels {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 56px;
}
.reels-crumb {
  font-family: var(--kr-font-mono);
  font-size: 0.68rem;
  letter-spacing: var(--kr-tracking-mono);
  text-transform: uppercase;
  color: var(--kr-ink-dim);
  margin-bottom: 12px;
}
.reels-crumb a { color: var(--kr-ink-dim); text-decoration: none; }
.reels-crumb a:hover { text-decoration: underline; }
.reels-title {
  font-size: 1.9rem;
  line-height: 1.4;
  letter-spacing: var(--kr-tracking-title);
  margin-bottom: 6px;
}
.reels-count {
  font-family: var(--kr-font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--kr-tracking-mono);
  text-transform: uppercase;
  color: var(--kr-ink-dim);
  margin-bottom: 18px;
}
.reels-lead {
  color: var(--kr-ink-dim);
  line-height: 1.75;
  font-size: 0.94rem;
  margin-bottom: 26px;
  max-width: 640px;
}

/* マスコットのコメント: 画像 → ラベル → 吹き出し */
.reels-note { margin-bottom: 26px; }
.reels-note__mascot { line-height: 0; margin: 0 0 4px -4px; }
.reels-note__mascot img { display: block; width: 88px; height: auto; }
.reels-note__label {
  font-family: var(--kr-font-mono);
  font-size: 0.68rem;
  letter-spacing: var(--kr-tracking-mono);
  text-transform: uppercase;
  color: var(--kr-ink-dim);
  margin-bottom: 8px;
}
/* ラベルの名前だけ /about のマスコット紹介へ。ラベル行に同居するので
   フォント・tracking・色は .reels-note__label から継承させ、下線だけ足す。 */
.reels-note__name-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.reels-note__name-link:hover { color: var(--kr-accent); }
.reels-note__bubble {
  position: relative;
  background: var(--kr-surface);
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-lg);
  box-shadow: var(--kr-shadow-card);
  padding: 18px 20px;
}
.reels-note__bubble::before,
.reels-note__bubble::after {
  content: ""; position: absolute; left: 26px;
  width: 0; height: 0; border-style: solid;
}
.reels-note__bubble::before {
  top: -10px; border-width: 0 9px 10px 9px;
  border-color: transparent transparent var(--kr-hair) transparent;
}
.reels-note__bubble::after {
  top: -8.5px; border-width: 0 8px 9px 8px;
  border-color: transparent transparent var(--kr-surface) transparent;
}
.reels-note__bubble p { line-height: 1.8; font-size: 0.94rem; }
.reels-note__bubble p + p { margin-top: 10px; }

.reels-sec {
  font-family: var(--kr-font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--kr-tracking-mono);
  text-transform: uppercase;
  color: var(--kr-ink-dim);
  margin: 0 0 12px;
}

/* リール一覧。スマホは 1 列（画面幅いっぱいに 1 本）、600px 以上は動画を
   左に小さく置いて右にテキスト、900px 以上はそれを 2 列に並べる。
   どの幅でもスクロールで 1 本だけ自動再生する（reels-hub.js）。 */
.reels-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reels-tile {
  background: var(--kr-surface);
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-md);
  box-shadow: var(--kr-shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
/* サムネ（SSR の実体）の上に自動再生用の <video> を重ねる。再生が始まるまで
   video は透明なので、JS 無し / 自動再生が拒否された環境ではサムネのまま。 */
.reels-tile__frame {
  position: relative;
  display: block;
}
.reels-tile__thumb {
  aspect-ratio: 9 / 16;
  background: var(--kr-surface-2);
  display: block;
  width: 100%;
  object-fit: cover;
}
.reels-tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .2s;
  /* タップ / クリックはタイル全体のリンクに通す（動画を掴ませない）。 */
  pointer-events: none;
}
.reels-tile.is-playing .reels-tile__video { opacity: 1; }
/* 「これは動画」の合図。再生中は消す。 */
.reels-tile__play {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  /* index.css の `.search-hit__loop` と同じ載せ方（サムネの上の小さな帯）。 */
  background: rgba(16,18,21,.55);
  color: var(--kr-accent-ink);
  pointer-events: none;
  transition: opacity .2s;
}
.reels-tile__play .material-symbols-outlined { font-size: 16px; }
.reels-tile.is-playing .reels-tile__play { opacity: 0; }
.reels-tile__cap {
  display: block;
  padding: 11px 12px 13px;
  font-size: 0.86rem;
  line-height: 1.45;
}
.reels-tile__name {
  display: block;
  font-weight: 700;
  letter-spacing: var(--kr-tracking-title);
}
/* 下帯（投稿者のひとこと）。長い note でカードが伸びないよう行数で止める。 */
.reels-tile__note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin-top: 6px;
  color: var(--kr-ink-dim);
  line-height: 1.6;
}
.reels-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.reels-tile__sub {
  /* `<span>` のままだと年月が見出しに食い込む（実ブラウザで確認） */
  display: block;
  font-family: var(--kr-font-mono);
  font-size: 0.64rem;
  letter-spacing: var(--kr-tracking-mono);
  text-transform: uppercase;
  color: var(--kr-ink-dim);
}
/* 遷移先の一言。primary CTA（登録）と競らないよう dim のテキストのままにする。 */
.reels-tile__more {
  display: none;
  align-items: center;
  gap: 2px;
  flex: none;
  font-size: 0.82rem;
  color: var(--kr-ink-dim);
}
.reels-tile__more .material-symbols-outlined { font-size: 18px; }
.reels-tile:hover .reels-tile__more { color: var(--kr-accent); }

/* タブレット〜: 動画を左に小さく置き、右にテキスト（1 列のまま）。 */
@media (min-width: 600px) {
  .reels-grid { gap: 16px; }
  .reels-tile { display: flex; align-items: stretch; gap: 14px; padding: 12px; }
  .reels-tile__frame {
    flex: 0 0 150px;
    width: 150px;
    /* テキストが長くても枠は 9:16 のまま（伸びると <video> が img から
       はみ出して下地が見える）。伸びるのはテキスト側だけにする。 */
    align-self: flex-start;
    border-radius: var(--kr-radius-sm);
    overflow: hidden;
  }
  .reels-tile__cap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2px 2px 2px 0;
  }
  /* 動画（9:16）でカードの高さが決まるので、メタ + 導線は下端に寄せる。 */
  .reels-tile__foot { margin-top: auto; padding-top: 12px; }
  .reels-tile__more { display: inline-flex; }
  .reels-tile__note { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* PC: 2 列。1 列のままだと動画の右に余白が出すぎるので、映像をもう一段
   小さくして横に 2 枚並べる。自動再生は全体で 1 本だけ（中央に近いタイル）。 */
@media (min-width: 900px) {
  .reels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .reels-tile__frame { flex-basis: 140px; width: 140px; }
  .reels-tile__note { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* ほかの技術へのチップ */
.reels-rel { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--kr-hair); }
.reels-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reels-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--kr-surface);
  border: 1px solid var(--kr-hair);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--kr-ink);
}
.reels-chip b {
  font-family: var(--kr-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--kr-ink-dim);
  font-weight: 400;
}

/* 一覧ページのカード */
.reels-list {
  display: grid;
  /* サムネ 42px + 本数を差し引くと説明文に使える幅が狭く、2 行に折り返して
     窮屈になる。1 行に収まりやすい下限にする。 */
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 12px;
}
.reels-card {
  background: var(--kr-surface);
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-md);
  box-shadow: var(--kr-shadow-card);
  padding: 10px 14px 10px 10px;
  text-decoration: none;
  color: inherit;
  display: flex; align-items: center; gap: 12px;
}
/* 代表リールのサムネ。縦長（9:16）を小さく切り出して置く。
   読み込めなくても下地が出るだけで、カードの高さは変わらない。 */
.reels-card__thumb {
  flex: 0 0 auto;
  width: 42px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--kr-radius-sm);
  background: var(--kr-surface-2);
  display: block;
}
.reels-card__body { flex: 1 1 auto; min-width: 0; }
.reels-card__name {
  display: block;
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: var(--kr-tracking-title);
}
.reels-card__desc {
  display: block;
  font-size: 0.79rem; color: var(--kr-ink-dim); margin-top: 3px; line-height: 1.5;
}
.reels-card__count {
  flex: 0 0 auto;
  font-family: var(--kr-font-mono);
  font-size: 0.68rem;
  letter-spacing: var(--kr-tracking-mono);
  color: var(--kr-ink-dim);
  white-space: nowrap;
}

/* 登録 CTA。一覧ページ（/reels）では末尾、ハブ（/reels/{slug}）ではキコの
   コメント直下（--lead）。どちらも控えめな見せ方は変えない。 */
.reels-cta {
  margin-top: 30px;
  background: var(--kr-accent);
  color: var(--kr-accent-ink);
  border-radius: var(--kr-radius-lg);
  padding: 22px 24px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 14px;
}
.reels-cta p { font-size: 0.95rem; line-height: 1.65; }
.reels-cta small { display: block; opacity: 0.72; font-size: 0.8rem; margin-top: 4px; }
.reels-cta a {
  background: var(--kr-accent-ink);
  color: var(--kr-accent);
  text-decoration: none;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--kr-radius-sm);
  white-space: nowrap;
}

/* ハブでは本文の途中（キコのコメントとリール一覧の間）に置くので、
   下側にも同じ余白を持たせる。末尾に置く一覧ページ側は素の .reels-cta のまま。
   media query が末尾で .reels-cta を再宣言するため、クラスを 2 つ連結して
   specificity を上げておく（AGENTS.md「Modifier クラスは…」）。 */
.reels-cta.reels-cta--lead { margin-bottom: 30px; }

/* display を持つ要素は [hidden] を明示的に潰す（AGENTS.md） */
.reels-cta[hidden], .reels-rel[hidden], .reels-note[hidden],
.reels-grid[hidden], .reels-list[hidden],
.reels-tile__frame[hidden], .reels-tile__play[hidden],
.reels-tile__more[hidden], .reels-tile__foot[hidden],
.reels-tile__note[hidden] { display: none !important; }

@media (max-width: 480px) {
  .reels-title { font-size: 1.5rem; }
  .reels-list { grid-template-columns: 1fr; }
  .reels-cta { padding: 18px 18px; }
}