/* デザイントークンは docs/specs/00_design_handoff.md / .claude/rules/design.md を正とする */
:root {
  --mp-bg: #fff6e9;
  --mp-ink: #221c33;
  --mp-pink: #ff5fa2;
  --mp-indigo: #5a4bff;
  --mp-yellow: #ffc93c;
  --mp-lavender: #eae7ff;
  --mp-hero-pink: #ffe9f3;
  --mp-muted-1: #7a6f96;
  --mp-muted-2: #5c5378;
  --mp-muted-3: #a99fc0;

  --mp-series-zenzero: #ff8c26;
  --mp-series-nte: #5a4bff;
  --mp-series-dorifuro2: #ff5fa2;
  --mp-series-bluearchive: #2fa0e8;
  --mp-series-honkai-star-rail: #8f5ce0;
  --mp-series-vroid: #2ed3a5;
  --mp-series-hololive: #e0a319;
  --mp-series-other: #7a6f96;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, input { font-family: inherit; font-size: inherit; color: inherit; }

/* 横はみ出し防止はビューポート側で行う。.mp-page など内側の要素に overflow-x を
   付けるとその要素がスクロールコンテナ化し、ヘッダー/フィルタバーの position: sticky が
   ビューポートのスクロールに追従しなくなる（固定されずそのまま流れてしまう） */
html { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(34, 28, 51, .3) transparent; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(34, 28, 51, .3); border-radius: 999px; border: 2px solid var(--mp-bg); }
html::-webkit-scrollbar-thumb:hover { background: rgba(34, 28, 51, .5); }

body {
  background: var(--mp-bg);
  color: var(--mp-ink);
  font-family: 'Zen Maru Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* モーダル表示中に背後の一覧がスクロールしないようロックする（modal.js が付与）。
   ビューポートのスクロールは html 要素の overflow で決まるため html 側に付ける
   （body に付けても html に overflow-x 指定がある構成では伝播せず効かない） */
html.mp-scroll-lock { overflow-y: hidden; }

a { color: var(--mp-indigo); text-decoration: none; }
a:hover { color: var(--mp-pink); text-decoration: underline; }
input::placeholder { color: var(--mp-muted-3); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-9px) rotate(6deg); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(-6px) rotate(10deg); } 50% { transform: translateY(4px) rotate(-6deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes springIn { 0% { opacity: 0; transform: scale(.85); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }

/* ---------- ページ全体 ---------- */
.mp-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- ヘッダー ---------- */
.mp-header { background: #fff; border-bottom: 3px solid var(--mp-ink); position: sticky; top: 0; z-index: 20; }
.mp-header__inner { max-width: 1120px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-header__brand { display: flex; align-items: center; gap: 10px; }
.mp-logo {
  width: 36px; height: 36px; border-radius: 12px; background: var(--mp-yellow);
  border: 2.5px solid var(--mp-ink); display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 3px 3px 0 var(--mp-ink); animation: floaty 5s ease-in-out infinite;
}
.mp-header__title { font-weight: 900; font-size: 18px; letter-spacing: .02em; }
.mp-header__nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mp-nav-link {
  font-size: 12.5px; font-weight: 900; padding: 7px 13px; border-radius: 999px;
  background: #fff; color: var(--mp-ink); text-decoration: none; border: 2px solid var(--mp-ink);
  box-shadow: 2.5px 2.5px 0 var(--mp-ink); transition: transform .12s, box-shadow .12s;
}
.mp-nav-link:hover { transform: translate(-2px, -2px); box-shadow: 4.5px 4.5px 0 var(--mp-ink); text-decoration: none; color: var(--mp-indigo); }

/* モバイル用SNSリンク開閉ボタン（デスクトップでは非表示） */
.mp-nav-toggle {
  display: none; width: 36px; height: 36px; border-radius: 999px; flex: none;
  border: 2.5px solid var(--mp-ink); background: #fff; color: var(--mp-ink);
  font-size: 16px; font-weight: 900; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 2.5px 2.5px 0 var(--mp-ink); transition: transform .12s, box-shadow .12s;
}
.mp-nav-toggle:hover { transform: translate(-2px, -2px); box-shadow: 4.5px 4.5px 0 var(--mp-ink); }
.mp-nav-toggle[aria-expanded="true"] { background: var(--mp-yellow); }

/* SNSリンクのピルを横並びで置く幅が無い画面では、タイトル行右端の「@」ボタンに集約し、
   タップでヘッダー下に縦並びのドロップダウンとして開閉する */
@media (max-width: 640px) {
  .mp-nav-toggle { display: flex; margin-left: auto; }
  .mp-header__nav {
    display: none; position: absolute; top: calc(100% + 8px); right: 20px;
    flex-direction: column; align-items: stretch; gap: 7px;
    background: #fff; border: 2.5px solid var(--mp-ink); border-radius: 14px;
    padding: 10px; box-shadow: 4px 4px 0 var(--mp-ink);
  }
  .mp-header__nav.is-open { display: flex; }
  .mp-nav-link { text-align: center; }
}

/* ---------- プロフィールヒーロー ---------- */
.mp-hero {
  background: linear-gradient(160deg, var(--mp-hero-pink) 0%, var(--mp-bg) 55%, var(--mp-lavender) 100%);
  border-bottom: 3px solid var(--mp-ink); position: relative;
}
.mp-hero__deco { position: absolute; pointer-events: none; }
.mp-hero__deco--1 { top: 14px; right: 4%; font-size: 30px; color: #ffb02e; animation: floaty 4s ease-in-out infinite; opacity: .85; }
.mp-hero__deco--2 { bottom: 4px; right: 3%; font-size: 13px; color: var(--mp-pink); animation: floaty2 5s ease-in-out infinite; opacity: .55; z-index: 0; }
.mp-hero__deco--3 { top: 8px; left: 2%; font-size: 14px; color: var(--mp-indigo); animation: floaty2 6s ease-in-out infinite; opacity: .8; }
.mp-hero__inner {
  max-width: 1120px; margin: 0 auto; padding: 38px 20px 34px; display: flex; gap: 22px;
  align-items: center; flex-wrap: wrap; animation: fadeUp .4s ease both; position: relative; z-index: 1;
}
.mp-hero__avatar {
  width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--mp-ink);
  box-shadow: 4px 4px 0 var(--mp-ink); overflow: hidden; flex: none; background: #fff; transition: transform .2s;
}
.mp-hero__avatar:hover { transform: rotate(-6deg) scale(1.05); }
.mp-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-hero__body { flex: 1; min-width: 260px; }
.mp-hero__name { font-size: 28px; font-weight: 900; letter-spacing: .02em; }
.mp-hero__handle { font-size: 13px; font-weight: 700; color: var(--mp-muted-1); margin-left: 8px; }
.mp-hero__tagline { margin-top: 6px; font-size: 14.5px; color: var(--mp-ink); font-weight: 700; }
.mp-hero__bio { margin-top: 8px; font-size: 13.5px; line-height: 1.8; color: var(--mp-muted-2); max-width: 640px; text-wrap: pretty; }

/* 幅が足りずアバターとテキストが上下に分離してしまう画面幅では、
   折り返さずPCと同じ横並びレイアウトを維持する（テキスト側の行数が増えるだけにする） */
@media (max-width: 480px) {
  .mp-hero__inner { flex-wrap: nowrap; }
  .mp-hero__body { min-width: 0; }
}

/* ---------- メイン / フィルタバー ---------- */
.mp-main { max-width: 1120px; margin: 0 auto; padding: 26px 20px 60px; width: 100%; flex: 1; }

/* フィルタバー+件数はスクロール中もヘッダー直下に固定し、ナビゲーションとして常時使えるようにする。
   top はヘッダーの実測高に追従（モバイル幅でナビが折り返し高さが変わるため、app.js が --mp-header-h を設定）。
   背景は .mp-main の左右パディング分まで負マージンで広げる — 中央列だけ塗ると、固定中に
   左右の隙間からスクロール中のカードの枠が覗いて見えてしまう。
   上側も同様に .mp-main の padding-top 26px 分を負マージンで取り込む — こうしないと
   固定中に検索バーがヘッダー境界線に密着してしまう（初期表示の見た目は変わらない） */
.mp-controls {
  position: sticky; top: var(--mp-header-h, 65px); z-index: 10;
  background: var(--mp-bg); padding: 26px 20px 10px; margin: -26px -20px 6px;
}

.mp-filterbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.mp-search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.mp-search {
  width: 100%; padding: 10px 34px 10px 15px; border-radius: 14px;
  border: 2.5px solid var(--mp-ink); background: #fff; font-size: 13.5px; outline: none;
  box-shadow: 3px 3px 0 rgba(34, 28, 51, .18);
}
.mp-search__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 999px; border: none; background: transparent;
  color: var(--mp-muted-1); font-size: 12px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.mp-search__clear:hover { background: var(--mp-lavender); color: var(--mp-indigo); }
.mp-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.mp-chip {
  padding: 8px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 900; cursor: pointer;
  border: 2px solid var(--mp-ink); background: #fff; color: var(--mp-ink);
  box-shadow: 2.5px 2.5px 0 var(--mp-ink); transition: transform .12s, box-shadow .12s;
}
.mp-chip:hover { transform: translate(-2px, -2px); box-shadow: 4.5px 4.5px 0 var(--mp-ink); }
.mp-chip.is-active { background: var(--mp-yellow); }

.mp-sorts { margin-left: auto; display: flex; gap: 7px; }
.mp-sort {
  padding: 8px 13px; border-radius: 12px; font-size: 12px; font-weight: 900; cursor: pointer;
  border: 2px solid var(--mp-ink); background: #fff; color: var(--mp-muted-1);
  box-shadow: 2.5px 2.5px 0 var(--mp-ink); transition: transform .12s;
}
.mp-sort:hover { transform: translate(-1px, -1px); }
.mp-sort.is-active { background: var(--mp-lavender); color: var(--mp-indigo); }

.mp-count { font-size: 12.5px; color: var(--mp-muted-1); font-weight: 700; }

/* モバイルは検索欄のみ固定する。チップ・並び替え・件数まで固定すると
   ヘッダーと合わせて画面の4割超が固定UIで埋まってしまうため、通常フローで流す。
   display: contents で入れ子を外し、検索欄が .mp-main 全体を基準に stick できるようにする */
@media (max-width: 640px) {
  .mp-controls, .mp-filterbar { display: contents; }
  .mp-search-wrap {
    position: sticky; top: var(--mp-header-h, 110px); z-index: 10;
    max-width: none; margin: 0 -20px; padding: 10px 20px;
    background: var(--mp-bg);
  }
  .mp-search__clear { right: 26px; }
  .mp-chips { margin-top: 12px; }
  .mp-sorts { margin-top: 10px; justify-content: flex-end; }
  .mp-count { margin-top: 14px; margin-bottom: 16px; }
}

/* ---------- ショートレール ---------- */
.mp-shorts { margin-bottom: 26px; }
.mp-shorts__heading { font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mp-pill-heading {
  display: inline-flex; align-items: center; gap: 6px; border: 0; font-weight: 900;
  font-size: 13px; background: var(--mp-ink); color: var(--mp-yellow); padding: 4px 11px; border-radius: 999px;
}
.mp-pill-heading__icon { width: 9px; height: 9px; flex: none; }

/* モバイルではショートレールをデフォルト折りたたみ、ピル自体が開閉トグルになる
   （開閉状態のクラス付与とトグルの有効/無効は app.js が画面幅に応じて制御） */
.mp-pill-heading__chev { display: none; width: 9px; height: 9px; flex: none; transition: transform .15s; }
.mp-shorts--collapsed .mp-pill-heading__chev { transform: rotate(-90deg); }
.mp-shorts--collapsed .mp-rail-wrap { display: none; }
@media (max-width: 640px) {
  .mp-pill-heading { cursor: pointer; }
  .mp-pill-heading__chev { display: block; }
}

.mp-rail-wrap { position: relative; }
.mp-rail { display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 14px; scrollbar-width: none; }
.mp-rail::-webkit-scrollbar { display: none; }

.mp-rail-card {
  flex: none; width: 158px; background: #fff; border: 2.5px solid var(--mp-ink); border-radius: 16px;
  overflow: hidden; cursor: pointer; box-shadow: 4px 4px 0 rgba(34, 28, 51, .22);
  transition: transform .15s, box-shadow .15s;
}
.mp-rail-card:hover { transform: translateY(-4px); box-shadow: 6px 8px 0 rgba(34, 28, 51, .25); }
.mp-rail-card__thumb {
  position: relative; aspect-ratio: 9 / 16; background: linear-gradient(135deg, var(--mp-indigo), var(--mp-pink));
  border-bottom: 2.5px solid var(--mp-ink);
}
.mp-rail-card__thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mp-rail-card__badge {
  position: absolute; top: 7px; left: 7px; font-size: 10px; font-weight: 900; padding: 3px 8px;
  border-radius: 999px; color: #fff; border: 2px solid var(--mp-ink);
}
.mp-rail-card__body { padding: 9px 11px 11px; }
.mp-rail-card__title { font-size: 12px; font-weight: 900; line-height: 1.45; text-wrap: pretty; }
.mp-rail-card__chara { font-size: 10.5px; font-weight: 700; color: var(--mp-muted-1); line-height: 1.4; margin-top: 2px; }
.mp-rail-card__date { margin-top: 5px; font-size: 10.5px; color: var(--mp-muted-3); font-weight: 700; }

.mp-rail__fade {
  position: absolute; top: 0; right: -4px; bottom: 14px; width: 56px; pointer-events: none;
  background: linear-gradient(to left, var(--mp-bg) 8%, rgba(255, 246, 233, 0));
  opacity: 0; transition: opacity .3s;
}
.mp-rail__scrollbar { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 5px; pointer-events: none; }
.mp-rail__thumb {
  position: absolute; top: 0; height: 5px; border-radius: 999px; background: rgba(34, 28, 51, .35);
  opacity: 0; transition: opacity .35s;
}

/* ---------- 動画カードグリッド ---------- */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.mp-card {
  background: #fff; border: 2.5px solid var(--mp-ink); border-radius: 18px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; animation: fadeUp .35s ease;
  box-shadow: 4px 4px 0 rgba(34, 28, 51, .22); transition: transform .15s, box-shadow .15s;
  transform: rotate(var(--tilt, 0deg));
}
.mp-card:hover { transform: translateY(-5px) rotate(0deg) scale(1.02); box-shadow: 7px 9px 0 rgba(34, 28, 51, .25); }
.mp-card__thumb {
  position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--mp-indigo), var(--mp-pink));
  border-bottom: 2.5px solid var(--mp-ink);
}
.mp-card__thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mp-card__thumb-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .9); font-size: 32px;
}
.mp-card__badge {
  position: absolute; top: 9px; left: 9px; font-size: 11px; font-weight: 900; padding: 4px 10px;
  border-radius: 999px; color: #fff; border: 2px solid var(--mp-ink); box-shadow: 2px 2px 0 rgba(34, 28, 51, .3);
}
.mp-card__body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mp-card__title { font-size: 14.5px; font-weight: 900; line-height: 1.5; text-wrap: pretty; }
.mp-card__chara { font-size: 11.5px; font-weight: 700; color: var(--mp-muted-1); line-height: 1.4; }
.mp-card__footer {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--mp-muted-3); font-weight: 700;
}
.mp-play-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 900; letter-spacing: .04em;
  color: var(--mp-pink); background: var(--mp-hero-pink); border: 1.5px solid var(--mp-pink);
  padding: 3px 9px; border-radius: 999px;
}
.mp-play-badge__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px;
  border-radius: 50%; background: var(--mp-pink); color: #fff; flex: none;
}
.mp-play-badge__icon svg { width: 7px; height: 7px; margin-left: 1px; }

/* シリーズ色（既知シリーズのみ。未知シリーズは --other にフォールバック） */
.mp-badge--zenzero { background: var(--mp-series-zenzero); }
.mp-badge--nte { background: var(--mp-series-nte); }
.mp-badge--dorifuro2 { background: var(--mp-series-dorifuro2); }
.mp-badge--bluearchive { background: var(--mp-series-bluearchive); }
.mp-badge--honkai-star-rail { background: var(--mp-series-honkai-star-rail); }
.mp-badge--vroid { background: var(--mp-series-vroid); }
.mp-badge--hololive { background: var(--mp-series-hololive); }
.mp-badge--other { background: var(--mp-series-other); }

/* ---------- 無限スクロール / 空状態 ---------- */
.mp-sentinel { display: flex; justify-content: center; padding: 28px 0 6px; }
.mp-sentinel[hidden] { display: none; }
.mp-spinner { font-size: 22px; color: #ffb02e; animation: spin 1.6s linear infinite; display: inline-block; }
.mp-empty { text-align: center; padding: 60px 0; color: var(--mp-muted-3); font-size: 14px; font-weight: 700; }

/* ---------- 動画詳細モーダル ---------- */
.mp-modal-overlay {
  position: fixed; inset: 0; background: rgba(46, 32, 80, .5); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.mp-modal-overlay[hidden] { display: none; }

/* スクロールはダーク背景のプレイヤー部を含めず白背景の本文だけに限定する。
   プレイヤーまで一緒にスクロールさせると、スクロールバーの確保幅（ガター）が
   ダークなプレイヤー右横に白い縦筋として見えて角丸デザインとズレるため。
   外枠の overflow:hidden がスクロールバーごと角丸にクリップする */
.mp-modal {
  background: #fff; border: 3px solid var(--mp-ink); border-radius: 22px;
  width: 100%; max-height: 90vh; overflow: hidden;
  box-shadow: 8px 10px 0 rgba(34, 28, 51, .35);
  display: flex; flex-direction: column;
}
.mp-modal.is-opening { animation: springIn .28s cubic-bezier(.34, 1.56, .64, 1) both; }
.mp-modal__scroll {
  min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(34, 28, 51, .3) transparent;
}
.mp-modal__scroll::-webkit-scrollbar { width: 8px; }
.mp-modal__scroll::-webkit-scrollbar-track { background: transparent; }
.mp-modal__scroll::-webkit-scrollbar-thumb {
  background: rgba(34, 28, 51, .3); border-radius: 6px; border: 2px solid #fff;
  min-height: 48px;
}
.mp-modal__scroll::-webkit-scrollbar-thumb:hover { background: rgba(34, 28, 51, .5); }

.mp-modal__player { position: relative; background: var(--mp-ink); border-radius: 19px 19px 0 0; overflow: hidden; flex-shrink: 0; }

.mp-modal__tabs { display: flex; align-items: center; gap: 0; border-bottom: 2px solid #3d3556; }
.mp-modal__tabs--empty { min-height: 39px; }
.mp-modal__tab {
  padding: 11px 18px; font-size: 12.5px; font-weight: 900; cursor: pointer;
  border: none; border-bottom: 3px solid transparent; background: transparent; color: #8d84a8;
}
.mp-modal__tab.is-active { border-bottom-color: var(--mp-yellow); color: #fff; }

.mp-modal__frame { max-height: 62vh; margin: 0 auto; }
.mp-modal__frame iframe { width: 100%; height: 100%; border: none; display: block; }

.mp-modal__noembed { position: relative; max-height: 62vh; }
.mp-modal__noembed-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.mp-modal__noembed-msg {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: #fff;
}
.mp-modal__noembed-star { font-size: 28px; animation: floaty 4s ease-in-out infinite; }
.mp-modal__noembed-title { font-size: 13px; font-weight: 900; }
.mp-modal__noembed-sub { font-size: 11.5px; opacity: .75; }

.mp-modal__close {
  margin: 4px 8px 4px auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--mp-ink); background: var(--mp-yellow); color: var(--mp-ink);
  font-size: 15px; font-weight: 900; cursor: pointer; line-height: 1;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); transition: transform .15s;
}
.mp-modal__close:hover { transform: rotate(90deg); }

.mp-modal__body { padding: 20px 24px 24px; }
.mp-modal__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-modal__badge {
  font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 999px;
  color: #fff; border: 2px solid var(--mp-ink);
}
.mp-modal__date { font-size: 12px; color: var(--mp-muted-3); font-weight: 700; }

.mp-modal__title { margin-top: 10px; font-size: 21px; font-weight: 900; line-height: 1.4; text-wrap: pretty; }
.mp-modal__chara { color: var(--mp-muted-1); font-weight: 700; }

.mp-modal__links { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }
.mp-modal__link {
  font-size: 12.5px; font-weight: 900; padding: 9px 15px; border-radius: 12px;
  text-decoration: none; color: var(--mp-ink); border: 2px solid var(--mp-ink);
  box-shadow: 3px 3px 0 var(--mp-ink); transition: transform .12s, box-shadow .12s;
}
.mp-modal__link:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--mp-ink); text-decoration: none; color: var(--mp-ink); }
.mp-modal__link--nico { background: #ffe3c2; }
.mp-modal__link--yt { background: #ffd6d6; }
.mp-modal__link--note { background: #cdeedd; }
.mp-modal__link--tree { background: var(--mp-lavender); }

/* ボタン下のハードシャドウ(3px)分も見込み、直後のタグ群と詰まって見えないよう余白を広めに取る */
.mp-modal__tree-link { margin-top: 12px; margin-bottom: 22px; }

.mp-modal__panel { border: 2px solid var(--mp-ink); border-radius: 16px; padding: 14px 16px; }
.mp-modal__panel--credits { margin-top: 18px; background: var(--mp-bg); }
.mp-modal__panel--effects { margin-top: 12px; background: var(--mp-lavender); }
.mp-modal__panel-heading { font-size: 12px; font-weight: 900; letter-spacing: .05em; margin-bottom: 8px; }
.mp-modal__panel--credits .mp-modal__panel-heading { color: var(--mp-pink); }
.mp-modal__panel--effects .mp-modal__panel-heading { color: var(--mp-indigo); }

.mp-modal__credit-list { display: flex; flex-direction: column; gap: 5px; }
.mp-modal__credit-list li { font-size: 12.5px; line-height: 1.7; color: #463d5e; font-weight: 500; }

.mp-modal__chip-list { display: flex; gap: 7px; flex-wrap: wrap; }
.mp-modal__chip {
  font-size: 11.5px; color: var(--mp-ink); background: #fff; border: 2px solid var(--mp-ink);
  padding: 4px 11px; border-radius: 999px; font-weight: 700;
}

.mp-modal__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 15px; }
.mp-modal__tag {
  font-size: 11px; color: var(--mp-muted-1); background: var(--mp-bg); border: 1.5px solid #d9cfc0;
  padding: 4px 10px; border-radius: 999px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}
.mp-modal__tag:hover {
  background: var(--mp-lavender); color: var(--mp-indigo); border-color: var(--mp-indigo);
  transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--mp-indigo);
}

/* ---------- フッター ---------- */
.mp-footer { border-top: 3px solid var(--mp-ink); background: #fff; }
.mp-footer__inner {
  max-width: 1120px; margin: 0 auto; padding: 20px; font-size: 12px; color: var(--mp-muted-1);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-weight: 700;
}
.mp-footer__note { margin-left: auto; }