/* ============================================
   level guide: yt-level-badge must be "inline"
   - prevent badge from jumping to top-left
============================================ */
.level-guide .yt-level-badge{
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  display: inline-flex;
  align-items: center;
  gap: 2px;

  /* guide内では普通のバッジとして見せたい */
  padding: 6px 10px;
  border-radius: 999px;
}

/* 念のため：rowの中で綺麗に並ぶ */
.level-guide__row{
  align-items: flex-start; /* テキストが複数行になっても綺麗 */
}
/* =========================================
   level_badge.css
   - Difficulty badge (A1/A2/B1/B2/C1)
   - Place: thumbnail top-left, ABOVE subtitle badge
========================================= */

/* 使い回し用のCSS変数（必要なら上書きOK） */
:root{
  --lv-gap: 61px;
  --lv-pad-y: 4px;
  --lv-pad-x: 8px;
  --lv-radius: 999px;
  --lv-font: 12px;
  --lv-font-2: 11px;
  --lv-shadow: 0 6px 18px rgba(0,0,0,.28);
  --lv-border: 1px solid rgba(255,255,255,.18);

  /* サムネ左上の基準位置 */
  --lv-top: 10px;
  --lv-left: 10px;

  /* subtitleバッジより上に出すための最低z */
  --lv-z: 6;
}

/* -----------------------------------------
   1) バッジの配置コンテナ
   - サムネの中(thumb)を relative にして、このコンテナを absolute で置く
----------------------------------------- */

/* サムネ側（どのカードでも）: relative になっていない場合の保険 */
.story-card-thumb,
.yt-thumb,
.thumb{
  position: relative;
}

/* バッジを縦に積む（上：level / 下：subtitle） */
.thumb-badges{
  position: absolute;
  top: var(--lv-top);
  left: var(--lv-left);
  display: flex;
  flex-direction: column;
  gap: var(--lv-gap);
  z-index: var(--lv-z);
  pointer-events: none; /* クリックを邪魔しない */
}

/* -----------------------------------------
   2) レベルバッジ本体
----------------------------------------- */
.level-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: var(--lv-pad-y) var(--lv-pad-x);
  border-radius: var(--lv-radius);

  font-weight: 800;
  font-size: var(--lv-font);
  line-height: 1;

  color: #fff;
  background: rgba(0,0,0,.55); /* Fallback */
  border: var(--lv-border);
  box-shadow: var(--lv-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  letter-spacing: .02em;
  white-space: nowrap;
}

/* 2行表示したい時（任意） */
.level-badge--stack{
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 12px;
}
.level-badge__main{
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
}
.level-badge__sub{
  font-size: var(--lv-font-2);
  font-weight: 700;
  opacity: .92;
  line-height: 1.1;
}

/* -----------------------------------------
   3) レベル別カラー（確定）
   - data-level="B1" などで切替
----------------------------------------- */
.level-badge[data-level="A1"]{ background: #2ECC71; }
.level-badge[data-level="A2"]{ background: #27AE60; }
.level-badge[data-level="B1"]{ background: #3498DB; }
.level-badge[data-level="B2"]{ background: #2C3E90; }
.level-badge[data-level="C1"]{ background: #E74C3C; }

/* もし将来増えた時の保険 */
.level-badge[data-level="C2"]{ background: #B0120A; }
.level-badge[data-level="UNK"]{ background: rgba(0,0,0,.55); }

/* -----------------------------------------
   4) subtitleバッジが既存で z-index 高い場合の保険
   - subtitle側にもコンテナの下段として入れる想定
----------------------------------------- */
.subtitle-badge,
.lang-badge,
.sub-badge{
  /* 既存が absolute の場合でも thumb-badges 内ならOK。
     thumb-badges外にある場合は、これで“下”に回りやすくする。 */
  z-index: calc(var(--lv-z) - 1);
}

/* -----------------------------------------
   5) 小さいサムネ対応（スマホ）
----------------------------------------- */
@media (max-width: 520px){
  :root{
    --lv-top: 8px;
    --lv-left: 8px;
    --lv-font: 11px;
    --lv-pad-y: 3px;
    --lv-pad-x: 7px;
    --lv-gap: 5px;
  }
}
/* サムネの基準 */
.story-card-thumb-wrapper{
  position: relative;
}

/* 左上バッジを縦積み */
.thumb-badges{
  position: absolute;
  top: 10px;
  left: 10px;

  display: flex;
  flex-direction: column;
  gap: 6px;          /* ← これが「重なり防止」 */

  z-index: 6;
  pointer-events: none;
}

/* subtitle が absolute の場合の保険 */
.thumb-badges .story-card-subtitle-badge{
  position: static; /* ← 親のflexに従わせる */
}
/* =========================================
   Side card (right column) level badge
========================================= */

.yt-thumb-wrapper{
  position: relative;
}

.yt-level-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 6;

  display: inline-flex;
  align-items: center;

  padding: 3px 8px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 12px;
  line-height: 1;

  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  white-space: nowrap;
}

/* レベル別カラー（story-cardと同じ） */
.yt-level-badge[data-level="A1"]{ background: #2ECC71; }
.yt-level-badge[data-level="A2"]{ background: #27AE60; }
.yt-level-badge[data-level="B1"]{ background: #3498DB; }
.yt-level-badge[data-level="B2"]{ background: #2C3E90; }
.yt-level-badge[data-level="C1"]{ background: #E74C3C; }
/* =========================================
   side_story_card: badge stack
========================================= */
.thumb-badges--side{
  top: 8px;
  left: 8px;
  gap: 6px;
  z-index: 8;
}
/* 右カラムのレベルバッジは小さめ */
.thumb-badges--side .yt-level-badge{
  position: static;  /* 親のflexで縦積み */
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 3px 8px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 10px;
  line-height: 1;

  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  white-space: nowrap;
}
/* 右カラムのsubtitleも “縦積み” に従わせる */
.thumb-badges--side .yt-thumb-subs{
  position: static; /* ← これが重なり解消の本丸 */
}

/* 色（トップと同じ） */
.thumb-badges--side .yt-level-badge[data-level="A1"]{ background: #2ECC71; }
.thumb-badges--side .yt-level-badge[data-level="A2"]{ background: #27AE60; }
.thumb-badges--side .yt-level-badge[data-level="B1"]{ background: #3498DB; }
.thumb-badges--side .yt-level-badge[data-level="B2"]{ background: #2C3E90; }
.thumb-badges--side .yt-level-badge[data-level="C1"]{ background: #E74C3C; }

/* subtitle CC icon size adjustment */
.story-card-subtitle-badge img{
  width: 14px;      /* ← 少し小さめ */
  height: 14px;
  flex: 0 0 auto;

  margin-right: 4px;  /* JP・EN との間隔 */
  opacity: .95;
}
.story-card-subtitle-badge{
  display: inline-flex;
  align-items: center;
}
/* right column (side story) subtitle CC icon */
.yt-thumb-subs img{
  width: 12px;      /* ← トップより少し小さめが◎ */
  height: 12px;
  flex: 0 0 auto;

  margin-right: 4px;
  opacity: .95;
}
.yt-thumb-subs{
  display: inline-flex;
  align-items: center;
}
/* =========================================
   history: badges stack fix
   - subtitle badge must follow flex stack
========================================= */
.history-page .yt-thumb-wrapper{
  position: relative;
}

.history-page .thumb-badges{
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 8;
  pointer-events: none;
}

/* ★本丸：subtitleをabsoluteから外して縦積みに従わせる */
.history-page .thumb-badges .yt-thumb-subs{
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* CCアイコンも履歴は小さめ */
.history-page .yt-thumb-subs img{
  width: 12px;
  height: 12px;
}
/* ===== story detail: level badge (ensure visible) ===== */
.story-description .yt-level-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1;

 /* background: #111;
  color: #fff; */
  /* border: 1px solid rgba(0,0,0,.12); */
}
/* ============================================
   story_detail: level badge inside description
   - prevent badge from jumping to top-left (8,8)
============================================ */
.story-description{
  position: relative;
}

/* 左カラムの概要内のバッジは “absolute化” を無効化する */
.story-description .yt-level-badge{
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
}
/* ヘッダーの重なり順は維持しつつ、本文はちゃんと上に来るように */
.story-detail-content{
  position: relative;
  z-index: 1;
}
.story-info-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.yt-level-badge--detail{
  position: static !important;
  box-shadow: none !important;
}
/* ============================================
   Story detail: Level badge color (match cards)
============================================ */

/* まず detail の黒ベタを無効化（色は data-level で決める） */
.yt-level-badge--detail{
  background: unset !important;
  color: unset !important;
  /* border-color: unset !important; */
  box-shadow: none !important;
}

/* レベルごとの “カードと同じ色” */
.yt-level-badge--detail[data-level="A1"]{
  background: #2ECC71;
  color: #fff;
}
.yt-level-badge--detail[data-level="A2"]{
  background: #27AE60;
  color: #fff;
}
.yt-level-badge--detail[data-level="B1"]{
  background: #3498DB;
  color: #fff;
}
.yt-level-badge--detail[data-level="B2"]{
  background: #2C3E90;
  color: #fff;
}
.yt-level-badge--detail[data-level="C1"]{
  background: #E74C3C;
  color: #fff;
}
/* ============================================
   Story detail: meta alignment & size
============================================ */

.story-info-row{
  display: flex;
  align-items: center;  /* ← 高さの中央揃え */
  gap: 14px;
}

.story-description .yt-level-badge--detail[data-level="B2"]{
  background:#2C3E90 !important;
  color:#fff !important;
}
/* ============================================
   story_detail: Level badge (detail)
   - use per-level color like cards
============================================ */

.story-info-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}


.story-info-meta span{
  display: inline-flex;
  align-items: center;
}

/* 詳細ページのバッジは absolute を完全に無効化して “普通のバッジ” にする */
.story-description .yt-level-badge--detail{
  position: static !important;
  inset: auto !important;
  transform: none !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  color: #fff;
  /* border: 1px solid rgba(0,0,0,.12); */
  box-shadow: none !important;   /* ← シャドー削除 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 色（カードと同じ） */
.story-description .yt-level-badge--detail[data-level="A1"]{ background:#2ECC71 !important; }
.story-description .yt-level-badge--detail[data-level="A2"]{ background:#27AE60 !important; }
.story-description .yt-level-badge--detail[data-level="B1"]{ background:#3498DB !important; }
.story-description .yt-level-badge--detail[data-level="B2"]{ background:#2C3E90 !important; }
.story-description .yt-level-badge--detail[data-level="C1"]{ background:#E74C3C !important; }
/* ============================================
   story_detail: FINAL (force)
   - text must be white, border none
============================================ */

.story-description .yt-level-badge.yt-level-badge--detail{
  color: #fff !important;     /* ← 文字を絶対白に */
  border: 0 !important;       /* ← 枠ゼロ（念のため） */
  box-shadow: none !important;
}

/* レベル色（カードと同じ） */
.story-description .yt-level-badge.yt-level-badge--detail[data-level="A1"]{ background:#2ECC71 !important; }
.story-description .yt-level-badge.yt-level-badge--detail[data-level="A2"]{ background:#27AE60 !important; }
.story-description .yt-level-badge.yt-level-badge--detail[data-level="B1"]{ background:#3498DB !important; }
.story-description .yt-level-badge.yt-level-badge--detail[data-level="B2"]{ background:#2C3E90 !important; }
.story-description .yt-level-badge.yt-level-badge--detail[data-level="C1"]{ background:#E74C3C !important; }

/* メタ：もう少し大きく、中央揃え */
.story-description .story-info-row{
  display: flex;
  align-items: center;
  gap: 14px;
}

.story-description .story-info-meta{
  font-size: 14px;            /* ← 14→16 */
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.65);
}
/* ============================================
   level guide list (story detail)
============================================ */

.level-guide{
  margin-top: 14px;
  padding-top: 10px;
  margin-bottom: 30px;
}

.level-guide__title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(0,0,0,.85);
}

.level-guide__list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-guide__row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.level-guide__badge{
  flex: 0 0 auto;
}

.level-guide__text{
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.05;
  color: rgba(0,0,0,.82);
}