/* 「落語YouTubeチャンネル一覧」（hanashi-youtube）。噺家・今日の寄席と同じ配色・書体（緞帳の赤・生成り・墨色・金）。
   スマホを先に作り、広い画面で2〜4列にする。千社札（二重の枠の札）と番付の遊びを、見出し・印・順位に使う。 */

.hn-yt {
  --hn-ink: #1a1815;
  --hn-body: #2c2820;
  --hn-muted: #6a6560;
  --hn-faint: #8a8078;
  --hn-line: #e8e4de;
  --hn-line-strong: #c0b8b0;
  --hn-paper: #f8f5ef;
  --hn-kinari: #f6f0e4;
  --hn-gold: #b8983a;
  --hn-red: #b52929;
  --hn-red-deep: #8e1f1f;
  --hn-blue: #2a6aad;
  --hn-link: #2271b1;
  --hn-serif: "游明朝", "YuMincho", "游明朝体", "Yu Mincho", Georgia, serif;

  width: 92vw;
  max-width: 1080px;
  margin: 13vw auto 4vw;
  color: var(--hn-body);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .03em;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 740px) {
  .hn-yt { margin-top: calc((100vw / 6) + 4vw); margin-bottom: 14vw; font-size: 14px; }
}
.hn-yt *, .hn-yt *::before, .hn-yt *::after { box-sizing: border-box; }
.hn-yt a { color: var(--hn-link); }
.hn-yt ul, .hn-yt ol { list-style: none; margin: 0; padding: 0; }
.hn-yt li { margin: 0; }
.hn-yt img { max-width: 100%; height: auto; border: 0; }
.hn-yt [hidden] { display: none !important; }

/* ── パンくず・見出し ─────────────────────────────────────────────── */
.hn-yt-crumbs { font-size: 12px; color: var(--hn-faint); margin-bottom: 18px; }
.hn-yt-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.hn-yt-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--hn-line-strong); }
.hn-yt-crumbs a { color: var(--hn-faint); }
.hn-yt-crumbs a:hover { color: var(--hn-ink); }

.hn-yt-head { margin-bottom: 20px; }
.hn-yt-head__badges { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.hn-yt-head__badges span {
  font-size: 11px; letter-spacing: .1em; color: var(--hn-faint);
  border: 1px solid var(--hn-line-strong); padding: 2px 10px; border-radius: 2px;
}
.hn-yt-head__title {
  margin: 0; padding: 0; border: 0;
  font-family: var(--hn-serif);
  font-size: clamp(21px, 6.2vw, 40px);   /* 「落語YouTubeチャンネル一覧」が、スマホ（320〜430px）で1行に収まる大きさ（以前は clamp(26px, 5vw, 40px) で、375px で「覧」だけが2行目に残った） */
  font-weight: 500; color: var(--hn-ink); line-height: 1.35; letter-spacing: .06em;
}
.hn-yt-head__title small {
  display: block; margin-top: 6px;
  font-family: inherit; font-size: clamp(12px, 1.7vw, 14px); font-weight: 400; color: var(--hn-faint); letter-spacing: .1em;
}
.hn-yt-head__lead { margin: 12px 0 0; color: var(--hn-muted); font-size: 13px; line-height: 1.9; }

/* ページ内の移動（横スクロールのチップ） */
.hn-yt-jump {
  display: flex; gap: 8px; margin: 14px 0 0; padding: 2px 0 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hn-yt-jump::-webkit-scrollbar { display: none; }
@media (max-width: 740px) { .hn-yt-jump { margin-left: -4vw; margin-right: -4vw; padding-left: 4vw; padding-right: 4vw; } }
.hn-yt-jump a {
  flex: 0 0 auto; padding: 6px 14px; border: 1px solid var(--hn-line-strong); border-radius: 999px;
  background: #fff; color: var(--hn-body); font-size: 12px; letter-spacing: .06em; text-decoration: none; white-space: nowrap;
}
.hn-yt-jump a:hover { border-color: var(--hn-gold); background: var(--hn-paper); }

/* ── 千社札（二重の枠の札）・公式バッジ・共通のボタン ───────────────────── */
.hn-yt-senja {
  display: inline-block; margin-right: 10px; padding: 1px 9px;
  border: 1px solid var(--hn-red); color: var(--hn-red); background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hn-red);
  font-family: var(--hn-serif); font-size: 12px; font-weight: 600; letter-spacing: .24em; line-height: 1.7; vertical-align: middle;
}
.hn-yt-senja--gold { color: var(--hn-gold); background: transparent; border-color: var(--hn-gold); box-shadow: 0 0 0 2px var(--hn-ink), 0 0 0 3px var(--hn-gold); margin-right: 14px; }

.hn-yt-sep { margin: 0 .35em; color: var(--hn-line-strong); }
.hn-yt-badge {
  display: inline-block; margin-right: 8px; padding: 0 7px;
  border: 1px solid var(--hn-gold); border-radius: 2px; color: #8a6d14; background: #fbf6e6;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.7; vertical-align: 1px;
}
.hn-yt-hero .hn-yt-badge { margin: 0 0 0 8px; color: var(--hn-gold); background: transparent; }

.hn-yt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--hn-line-strong); border-radius: 3px; background: #fff; color: var(--hn-ink);
  font-family: inherit; font-size: 13px; letter-spacing: .06em; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.hn-yt a.hn-yt-btn { color: var(--hn-ink); }
.hn-yt-btn:hover { border-color: var(--hn-gold); background: var(--hn-paper); }
.hn-yt-btn--solid, .hn-yt a.hn-yt-btn--solid { border-color: var(--hn-red); background: var(--hn-red); color: #fff; }
.hn-yt-btn--solid:hover { border-color: var(--hn-red-deep); background: var(--hn-red-deep); }
.hn-yt-btn--onDark, .hn-yt a.hn-yt-btn--onDark { border-color: rgba(246, 240, 228, .45); background: transparent; color: var(--hn-kinari); }
.hn-yt-btn--onDark:hover { border-color: var(--hn-gold); background: rgba(246, 240, 228, .1); }
.hn-yt-btn:focus-visible, .hn-yt-chip:focus-visible, .hn-yt-facade:focus-visible, .hn-yt-vcard__thumb:focus-visible, .hn-yt-card__thumb:focus-visible {
  outline: 3px solid #2a6aad; outline-offset: 2px;
}

/* 再生ボタン（サムネイルの上。CSS だけで描く） */
.hn-yt-playbtn {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 42px; margin: -21px 0 0 -31px;
  border-radius: 12px; background: rgba(181, 41, 41, .92); box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  transition: transform .15s, background-color .15s; pointer-events: none;
}
.hn-yt-playbtn::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -6px;
  border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff;
}
a:hover > .hn-yt-playbtn, a:focus-visible > .hn-yt-playbtn { transform: scale(1.1); background: #d02f2f; }

/* ── 今日の一席（緞帳の下の舞台） ────────────────────────────────── */
.hn-yt-hero {
  margin: 0 0 20px; background: var(--hn-ink); color: var(--hn-kinari);
  border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(26, 24, 21, .18);
}
.hn-yt-hero::before {
  content: ""; display: block; height: 11px;
  background: repeating-linear-gradient(90deg, #a32424 0 14px, #b52929 14px 28px);
  border-bottom: 2px solid var(--hn-gold);
}
.hn-yt-hero__stage { padding: 14px 14px 0; }
.hn-yt-hero__label { display: flex; align-items: center; margin: 0 0 12px; }
.hn-yt-hero__date { color: #d9d3c8; font-size: 12px; letter-spacing: .12em; }
.hn-yt-player { position: relative; background: #000; border-radius: 3px; overflow: hidden; }
.hn-yt-player::before { content: ""; display: block; padding-top: 56.25%; }
.hn-yt-facade { position: absolute; inset: 0; display: block; }
.hn-yt-facade img, .hn-yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.hn-yt-facade__t {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 2px;
  background: rgba(26, 24, 21, .78); color: #fff; font-size: 12px; letter-spacing: .1em;
}
.hn-yt-facade:hover .hn-yt-playbtn { transform: scale(1.1); background: #d02f2f; }
.hn-yt-hero__info { padding: 16px 16px 20px; }
.hn-yt-hero__title {
  margin: 0; padding: 0; border: 0; color: var(--hn-kinari);
  font-family: var(--hn-serif); font-size: clamp(22px, 4vw, 30px); font-weight: 600; line-height: 1.4; letter-spacing: .08em;
}
.hn-yt-hero__who { margin: 6px 0 0; font-family: var(--hn-serif); font-size: 17px; letter-spacing: .08em; }
.hn-yt-hero a.hn-yt-name { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); text-decoration: none; }
.hn-yt-hero a.hn-yt-name:hover { border-bottom-color: var(--hn-gold); }
.hn-yt-hero__meta { margin: 6px 0 0; color: #d9d3c8; font-size: 12px; letter-spacing: .06em; }
.hn-yt-hero__gist { margin: 12px 0 0; color: #efe9dc; font-size: 14px; line-height: 1.9; }
.hn-yt-hero__note { margin: 8px 0 0; color: #b8b0a0; font-size: 12px; line-height: 1.8; }
.hn-yt-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.hn-yt-hero .hn-yt-btn--solid, .hn-yt-hero a.hn-yt-btn--solid { border-color: var(--hn-gold); background: var(--hn-gold); color: var(--hn-ink); font-weight: 700; }
.hn-yt-hero .hn-yt-btn--solid:hover { border-color: #d3b24e; background: #d3b24e; }
.hn-yt-hero__fav { display: inline-flex; }
.hn-yt-hero__fav:empty { display: none; }
.hn-yt-hero .hn-fav-btn { color: #f0d98a; border-color: #f0d98a; }
.hn-yt-hero .hn-fav-btn:hover { background: #f0d98a; color: var(--hn-ink); }
.hn-yt-hero .hn-fav-btn.is-fav { background: var(--hn-red); border-color: var(--hn-red); color: #fff; }
@media (min-width: 900px) {
  .hn-yt-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .hn-yt-hero::before { grid-column: 1 / -1; }
  .hn-yt-hero__stage { padding: 20px 8px 20px 20px; }
  .hn-yt-hero__info { align-self: center; padding: 20px 24px 20px 16px; }
}

/* ── 会員登録のうながし ──────────────────────────────────────────── */
.hn-yt-join {
  margin: 0 0 22px; padding: 14px 16px;
  background: var(--hn-paper); border: 1px solid var(--hn-line); border-left: 4px solid var(--hn-gold); border-radius: 2px;
}
.hn-yt-join__t { margin: 0; font-family: var(--hn-serif); font-size: 16px; font-weight: 600; color: var(--hn-ink); letter-spacing: .06em; }
.hn-yt-join__heart { margin-right: 6px; color: var(--hn-red); }
.hn-yt-join__d { margin: 4px 0 0; color: var(--hn-muted); font-size: 13px; line-height: 1.8; }
.hn-yt-join__a { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

/* ── さがす・絞り込む ─────────────────────────────────────────────── */
.hn-yt-tools { margin: 0 0 26px; padding: 14px; background: var(--hn-paper); border: 1px solid var(--hn-line); border-radius: 4px; }
.hn-yt-find { display: flex; align-items: center; gap: 10px; }
.hn-yt-find__label { flex: 0 0 auto; color: var(--hn-faint); font-size: 12px; letter-spacing: .08em; }
.hn-yt-find__input {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 10px 12px;
  border: 1px solid var(--hn-line-strong); border-radius: 4px; background: #fff; color: var(--hn-ink);
  font-size: 16px; line-height: 1.4;
}
.hn-yt-find__input:focus { outline: none; border-color: var(--hn-gold); box-shadow: 0 0 0 3px rgba(184, 152, 58, .25); }
.hn-yt-chips { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; }
.hn-yt-chipgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-yt-chip {
  padding: 7px 13px; border: 1px solid var(--hn-line-strong); border-radius: 999px; background: #fff; color: var(--hn-body);
  font-family: inherit; font-size: 13px; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.hn-yt-chip:hover { border-color: var(--hn-gold); }
.hn-yt-chip[aria-pressed="true"] { border-color: var(--hn-ink); background: var(--hn-ink); color: #fff; }
@media (max-width: 740px) {
  .hn-yt-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: -14px; margin-right: -14px; padding: 2px 14px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hn-yt-chips::-webkit-scrollbar { display: none; }
  .hn-yt-chipgroup { flex: 0 0 auto; flex-wrap: nowrap; padding-right: 14px; border-right: 1px solid var(--hn-line-strong); }
  .hn-yt-chipgroup:last-child { border-right: 0; }
}
.hn-yt-count { margin: 10px 0 0; color: var(--hn-muted); font-size: 12px; letter-spacing: .06em; }
.hn-yt-clear { margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--hn-link); font-family: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }

/* ── 見出し（セクション） ─────────────────────────────────────────── */
.hn-yt-section { margin: 0 0 40px; }
/* ページ内リンクで飛んだとき、固定のヘッダー（スマホは画面幅の1/6ほど）の下に入らないように */
.hn-yt-hero, .hn-yt-section, .hn-yt-notes, .hn-yt-submit, .hn-yt-faq, .hn-yt-card { scroll-margin-top: 100px; }
@media (max-width: 740px) { .hn-yt-hero, .hn-yt-section, .hn-yt-notes, .hn-yt-submit, .hn-yt-faq, .hn-yt-card { scroll-margin-top: calc(100vw / 6 + 12px); } }
.hn-yt-h2 {
  margin: 0 0 8px; padding: 0; border: 0;
  font-family: var(--hn-serif); font-size: clamp(19px, 3vw, 24px); font-weight: 600; color: var(--hn-ink); line-height: 1.5; letter-spacing: .06em;
}
.hn-yt-h2 small { display: block; margin: 2px 0 0; font-family: inherit; font-size: 12px; font-weight: 400; color: var(--hn-faint); letter-spacing: .08em; }
@media (min-width: 741px) { .hn-yt-h2 small { display: inline; margin: 0 0 0 12px; } }
.hn-yt-section__lead { margin: 0 0 16px; color: var(--hn-muted); font-size: 12.5px; line-height: 1.9; }
.hn-yt-empty { margin: 20px 0; padding: 18px; background: var(--hn-paper); border: 1px dashed var(--hn-line-strong); color: var(--hn-muted); text-align: center; font-size: 13px; }

/* ── 高座が見られる動画（カード） ───────────────────────────────────── */
.hn-yt-grid { display: grid; }
.hn-yt-grid--wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 640px) { .hn-yt-grid--wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 980px) { .hn-yt-grid--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hn-yt-vcard { min-width: 0; }
.hn-yt-vcard[hidden], .hn-yt-card[hidden] { display: none !important; }
.hn-yt-vcard__thumb, .hn-yt-card__thumb { position: relative; display: block; overflow: hidden; background: #000; border-radius: 3px; }
.hn-yt-vcard__thumb::before, .hn-yt-card__thumb::before { content: ""; display: block; padding-top: 56.25%; }
.hn-yt-vcard__thumb img, .hn-yt-card__thumb img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s;
}
.hn-yt-vcard__thumb:hover img, .hn-yt-card__thumb:hover img { transform: scale(1.04); }
.hn-yt-dur {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 2px;
  background: rgba(26, 24, 21, .85); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .04em; line-height: 1.6;
}
.hn-yt-tags-on { position: absolute; left: 6px; top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.hn-yt-tags-on .hn-yt-tag { border: 0; background: rgba(26, 24, 21, .85); color: #fff; padding: 1px 7px; font-size: 10.5px; }
.hn-yt-tags-on .hn-yt-tag--limit { background: var(--hn-red); }
.hn-yt-vcard__title { margin: 8px 0 0; padding: 0; border: 0; font-family: var(--hn-serif); font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; }
.hn-yt-vcard__title a { color: var(--hn-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn-yt-vcard__title a:hover { color: var(--hn-red); }
.hn-yt-vcard__who { margin: 2px 0 0; font-size: 13px; line-height: 1.6; }
.hn-yt-vcard__ch { margin: 1px 0 0; color: var(--hn-faint); font-size: 11px; line-height: 1.6; }

/* 噺家の名前（リンク）。お気に入りの噺家は、hanashi-notify が is-fav を付ける */
.hn-yt a.hn-yt-name { color: var(--hn-ink); text-decoration: none; border-bottom: 1px solid var(--hn-line-strong); }
.hn-yt a.hn-yt-name:hover { color: var(--hn-red); border-bottom-color: var(--hn-red); }
.hn-yt a.hn-yt-name.is-fav, .hn-yt .hn-yt-name.is-fav { color: var(--hn-red); font-weight: 700; border-bottom-color: var(--hn-red); }
.hn-yt .hn-yt-name.is-fav::before { content: "★"; margin-right: 2px; color: var(--hn-gold); font-size: .85em; font-weight: 400; }
.hn-yt-hero a.hn-yt-name.is-fav { color: #f0d98a; border-bottom-color: #f0d98a; }

/* ── チャンネルのカード ─────────────────────────────────────────── */
.hn-yt-grid--cards { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 700px) { .hn-yt-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1000px) { .hn-yt-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hn-yt-listhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.hn-yt-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--hn-faint); font-size: 12px; }
.hn-yt-sort select {
  margin: 0; padding: 7px 30px 7px 10px; border: 1px solid var(--hn-line-strong); border-radius: 4px; color: var(--hn-ink);
  font-size: 14px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8078' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 8px;
}
.hn-yt-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--hn-line); border-radius: 4px; overflow: hidden;
}
.hn-yt-card.has-fav { border-color: var(--hn-red); box-shadow: 0 0 0 3px #fdf1ef; }
.hn-yt-card__thumb { border-radius: 0; }
.hn-yt-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.hn-yt-card.has-rank:not(.has-thumb) .hn-yt-card__head { padding-right: 74px; }

/* 番付の札 */
.hn-yt-rank {
  position: absolute; right: 10px; top: 10px; z-index: 2; padding: 1px 9px;
  border: 1px solid var(--hn-red); border-radius: 2px; background: #fff; color: var(--hn-red);
  font-family: var(--hn-serif); font-size: 12px; font-weight: 600; letter-spacing: .14em; line-height: 1.7; box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}
.hn-yt-rank--san { border-color: var(--hn-gold); color: #8a6d14; }
.hn-yt-rank--top { background: var(--hn-red); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hn-red), 0 1px 6px rgba(0, 0, 0, .3); }
.hn-yt-grid--cards.is-sort-yomi .hn-yt-rank, .hn-yt-grid--cards.is-filtered .hn-yt-rank { display: none; }
.hn-yt-grid--cards.is-sort-yomi .hn-yt-card.has-rank:not(.has-thumb) .hn-yt-card__head,
.hn-yt-grid--cards.is-filtered .hn-yt-card.has-rank:not(.has-thumb) .hn-yt-card__head { padding-right: 0; }

.hn-yt-card__head { display: flex; align-items: flex-start; gap: 12px; }
.hn-yt-seal {
  flex: 0 0 auto; writing-mode: vertical-rl; text-orientation: upright; padding: 7px 4px;
  border: 1px solid var(--hn-red); color: var(--hn-red); background: #fff; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(181, 41, 41, .4);
  font-family: var(--hn-serif); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.2;
}
.hn-yt-seal--org { border-color: var(--hn-blue); color: var(--hn-blue); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(42, 106, 173, .4); }
.hn-yt-seal--kodan { border-color: #8a6d14; color: #8a6d14; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(138, 109, 20, .4); }
.hn-yt-card__titles { min-width: 0; flex: 1; }
.hn-yt-card__name { margin: 0; padding: 0; border: 0; font-family: var(--hn-serif); font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: .04em; overflow-wrap: anywhere; }
.hn-yt-card__name a { color: var(--hn-ink); text-decoration: none; }
.hn-yt-card__name a:hover { color: var(--hn-red); text-decoration: underline; }
.hn-yt-card__sub { margin: 3px 0 0; color: var(--hn-muted); font-size: 12px; line-height: 1.8; }
.hn-yt-card__subs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 2px 0 0; }
.hn-yt-card__num { font-family: var(--hn-serif); font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--hn-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.hn-yt-card__num.is-unknown { font-size: 18px; color: var(--hn-faint); font-weight: 600; }
.hn-yt-card__unit { color: var(--hn-muted); font-size: 12px; }
.hn-yt-card__subs small { flex: 1 0 100%; margin-top: 2px; color: var(--hn-faint); font-size: 11px; line-height: 1.7; }
.hn-yt-card__content { margin: 0; font-size: 13px; line-height: 1.85; }
.hn-yt-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-yt-tag {
  display: inline-block; padding: 1px 8px; border: 1px solid var(--hn-line-strong); border-radius: 2px; background: #fff; color: var(--hn-muted);
  font-size: 11px; letter-spacing: .06em; line-height: 1.7;
}
.hn-yt-tag--full { border-color: #ecc5c0; background: #fdf1ef; color: var(--hn-red); font-weight: 700; }
.hn-yt-tag--audio { border-color: #bcd2ea; background: #eef5fc; color: var(--hn-blue); }
.hn-yt-tag--live { border-color: #e4d49a; background: #fbf6e6; color: #8a6d14; }
.hn-yt-tag--talk { background: var(--hn-paper); }
.hn-yt-tag--none { border-style: dashed; color: var(--hn-faint); }
.hn-yt-card__kouza { margin: 0; color: var(--hn-muted); font-size: 12px; line-height: 1.8; }
.hn-yt-card__note { margin: 0; padding-left: 8px; border-left: 2px solid var(--hn-gold); color: var(--hn-body); font-size: 12px; line-height: 1.8; }
.hn-yt-card__note--wait { border-left-color: var(--hn-line-strong); color: var(--hn-faint); }
.hn-yt-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.hn-yt-card__actions .hn-yt-btn { flex: 0 1 auto; }
.hn-yt .hn-yt-fav { min-height: 40px; padding: 8px 14px; font-size: 13px; line-height: 1.4; }
.hn-yt .hn-yt-fav .hn-fav-btn__icon { width: 14px; height: 14px; }

/* ほかの高座（カードの中） */
.hn-yt-card__more { margin: 4px 0 0; border-top: 1px dashed var(--hn-line-strong); padding-top: 8px; }
.hn-yt-card__more summary { cursor: pointer; color: var(--hn-link); font-size: 12.5px; letter-spacing: .04em; padding: 4px 0; }
.hn-yt-vrows { display: grid; gap: 10px; margin: 8px 0 0; }
.hn-yt-vrow__a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--hn-ink); text-decoration: none; }
.hn-yt-vrow__img { position: relative; display: block; overflow: hidden; background: #000; border-radius: 3px; }
.hn-yt-vrow__img::before { content: ""; display: block; padding-top: 56.25%; }
.hn-yt-vrow__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hn-yt-vrow__img .hn-yt-playbtn { transform: scale(.55); }
.hn-yt-vrow__t { display: block; min-width: 0; font-size: 12px; line-height: 1.6; }
.hn-yt-vrow__t b { display: block; font-family: var(--hn-serif); font-size: 14px; font-weight: 600; }
.hn-yt-vrow__t span, .hn-yt-vrow__t em { display: block; color: var(--hn-muted); font-style: normal; }
.hn-yt-vrow__t em { color: var(--hn-red); font-size: 11px; }
.hn-yt-vrow__a:hover b { color: var(--hn-red); }

/* ── 確認中の噺家・寄席 ─────────────────────────────────────────── */
.hn-yt-pending__box { border: 1px solid var(--hn-line); border-radius: 4px; background: #fff; padding: 4px 16px 12px; }
.hn-yt-pending__box summary { cursor: pointer; padding: 10px 0; color: var(--hn-link); font-size: 13px; }
.hn-yt-pending__g { margin: 16px 0 6px; padding: 0; border: 0; font-family: var(--hn-serif); font-size: 14px; font-weight: 600; color: var(--hn-ink); }
.hn-yt-pending__list { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; line-height: 1.9; }

/* ── 掲載方針・依頼・よくある質問・関連 ────────────────────────────── */
.hn-yt-notes { margin: 0 0 30px; padding: 16px 18px; background: var(--hn-paper); border-left: 3px solid var(--hn-gold); font-size: 13px; line-height: 1.95; color: var(--hn-body); }
.hn-yt-notes__title { margin: 0 0 8px; padding: 0; border: 0; font-family: var(--hn-serif); font-size: 16px; font-weight: 600; color: var(--hn-ink); }
.hn-yt-notes ul { list-style: disc; padding-left: 1.3em; }
.hn-yt-notes li { margin: 0 0 6px; }
.hn-yt-submit { margin: 0 0 40px; padding: 20px 18px; background: #fff; border: 1px solid var(--hn-line-strong); border-top: 3px solid var(--hn-red); border-radius: 2px; }
.hn-yt-submit__t { margin: 0 0 6px; padding: 0; border: 0; font-family: var(--hn-serif); font-size: 18px; font-weight: 600; color: var(--hn-ink); }
.hn-yt-submit__d { margin: 0; color: var(--hn-muted); font-size: 13px; line-height: 1.9; }
.hn-yt-submit__a { margin: 14px 0 0; }
.hn-yt-faq { margin: 0 0 40px; }
.hn-yt-faq__list { margin: 12px 0 0; }
.hn-yt-faq__item { padding: 14px 0; border-top: 1px solid var(--hn-line); }
.hn-yt-faq__item:last-child { border-bottom: 1px solid var(--hn-line); }
.hn-yt-faq__item dt { margin: 0; font-family: var(--hn-serif); font-size: 15px; font-weight: 600; color: var(--hn-ink); line-height: 1.7; }
.hn-yt-faq__item dt::before { content: "問"; display: inline-block; margin-right: 8px; color: var(--hn-red); letter-spacing: 0; }
.hn-yt-faq__item dd { margin: 6px 0 0 1.7em; color: var(--hn-body); font-size: 13.5px; line-height: 1.95; }
.hn-yt-related { margin: 0; }
.hn-yt-related__t { margin: 0 0 10px; padding: 0; border: 0; font-family: var(--hn-serif); font-size: 16px; font-weight: 600; color: var(--hn-ink); }
.hn-yt-related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 741px) { .hn-yt-related ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hn-yt-related a { display: block; height: 100%; padding: 12px 14px; background: #fff; border: 1px solid var(--hn-line); border-radius: 4px; color: var(--hn-ink); text-decoration: none; }
.hn-yt-related a:hover { border-color: var(--hn-gold); background: var(--hn-paper); }
.hn-yt-related b { display: block; font-family: var(--hn-serif); font-size: 14px; }
.hn-yt-related span { display: block; margin-top: 2px; color: var(--hn-faint); font-size: 11px; line-height: 1.6; }

/* ── プレーヤー（モーダル。動画のカードを押したとき） ─────────────────── */
html.hn-yt-lock { overflow: hidden; }
.hn-yt-modal { width: min(960px, 100vw, calc((100vh - 300px) * 1.7778)); min-width: min(100vw, 560px); max-width: none; max-height: 100vh; margin: auto; padding: 0; border: 0; background: transparent; color: var(--hn-kinari); overflow: visible; }
.hn-yt-modal::backdrop { background: rgba(26, 24, 21, .84); }
.hn-yt-modal__box { max-height: 100vh; overflow: auto; background: var(--hn-ink); border-radius: 6px; font-size: 14px; line-height: 1.75; letter-spacing: .03em; text-align: left; }
@media (min-width: 741px) { .hn-yt-modal__box { max-height: 96vh; } }
.hn-yt-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-bottom: 2px solid var(--hn-gold); background: repeating-linear-gradient(90deg, #a32424 0 14px, #b52929 14px 28px); }
.hn-yt-modal__bar .hn-yt-senja { margin: 0; background: transparent; color: #fff; border-color: #fff; box-shadow: 0 0 0 2px #a32424, 0 0 0 3px #fff; }
.hn-yt-modal__close { min-height: 38px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 3px; background: rgba(26, 24, 21, .35); color: #fff; font-family: inherit; font-size: 13px; letter-spacing: .08em; cursor: pointer; }
.hn-yt-modal__close:hover { background: rgba(26, 24, 21, .7); }
.hn-yt-modal__player { position: relative; background: #000; }
.hn-yt-modal__player::before { content: ""; display: block; padding-top: 56.25%; }
.hn-yt-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hn-yt-modal__info { padding: 14px 16px 18px; }
.hn-yt-modal__title { margin: 0; padding: 0; border: 0; color: var(--hn-kinari); font-family: var(--hn-serif); font-size: clamp(19px, 3.4vw, 24px); font-weight: 600; line-height: 1.45; letter-spacing: .06em; }
.hn-yt-modal__who { margin: 4px 0 0; font-family: var(--hn-serif); font-size: 15px; letter-spacing: .06em; }
.hn-yt-modal a.hn-yt-name { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); text-decoration: none; }
.hn-yt-modal .hn-yt-name.is-fav { color: #f0d98a; border-bottom-color: #f0d98a; }
.hn-yt-modal__meta { margin: 4px 0 0; color: #d9d3c8; font-size: 12px; }
.hn-yt-modal__gist { margin: 10px 0 0; color: #efe9dc; font-size: 13.5px; line-height: 1.9; }
.hn-yt-modal__note { margin: 6px 0 0; color: #b8b0a0; font-size: 12px; line-height: 1.8; }
.hn-yt-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.hn-yt-modal__nav { display: flex; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(246, 240, 228, .2); }
.hn-yt-modal__nav .hn-yt-btn { flex: 1; }
.hn-yt-modal .hn-yt-btn--solid, .hn-yt .hn-yt-modal a.hn-yt-btn--solid { border-color: var(--hn-gold); background: var(--hn-gold); color: var(--hn-ink); font-weight: 700; }
.hn-yt-modal .hn-yt-btn--solid:hover, .hn-yt .hn-yt-modal a.hn-yt-btn--solid:hover { border-color: #d3b24e; background: #d3b24e; }
.hn-yt-modal .hn-fav-btn { color: #f0d98a; border-color: #f0d98a; }
.hn-yt-modal .hn-fav-btn:hover { background: #f0d98a; color: var(--hn-ink); }
.hn-yt-modal .hn-fav-btn.is-fav { background: var(--hn-red); border-color: var(--hn-red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hn-yt-vcard__thumb img, .hn-yt-card__thumb img, .hn-yt-playbtn { transition: none; }
}
@media print {
  .hn-yt-hero__stage, .hn-yt-tools, .hn-yt-join, .hn-yt-modal, .hn-yt-jump { display: none; }
}