/* ─── Mypage 独立 page (v=60) ────────────────────────────────────────
 * dashboard.css の .mypage-* / .dash-* class を流用しつつ、
 * page-level layout (hero / sticky tabs / wide container) を override。
 */

.mypage-main {
  max-width: var(--t-page-max-tool, 1100px);
  margin: 0 auto;
  padding: 1.5rem 1.2rem 4rem;
  position: relative;
  z-index: 1;
}

.mypage-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6rem 1rem;
  color: var(--t-muted, rgba(255,255,255,0.6));
}

/* ─── hero ─────────────────────────────────────────────────────── */
.mypage-hero {
  margin-bottom: 1.5rem;
}
.mypage-back {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--t-muted, rgba(255,255,255,0.6));
  text-decoration: none;
  padding: 0.3rem 0;
  margin-bottom: 0.4rem;
  transition: color 0.12s;
}
.mypage-back:hover {
  color: var(--t-accent, var(--t-accent));
}
.mypage-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.mypage-title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--t-fg, #e8eaf2);
  display: flex; align-items: center; gap: 0.4em;
}
.mypage-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* ─── domain segmented tabs (v=64) ───────────────────────────────
 * 「マイ<domain>」 廃止し、 1 page で全ドメイン切替。 タイトル下に horizontal pills。
 */
.mypage-segments {
  display: flex;
  gap: 0.4rem;
  margin-top: 1rem;
  align-items: center;
}
.mypage-seg {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  /* 🔴 44px 床は**常時** (batch 1 C-3) — 詳細は file 末尾の裁定メモ。 */
  min-height: var(--t-tap-min, 44px);
  background: var(--t-bg-elev);
  border: 1px solid color-mix(in srgb, var(--t-fg) 14%, transparent);
  color: var(--t-fg, #e8eaf2);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.mypage-seg:hover {
  background: color-mix(in srgb, var(--t-fg) 11%, transparent);
  border-color: color-mix(in srgb, var(--t-fg) 26%, transparent);
}
.mypage-seg:active { transform: scale(0.97); }
.mypage-seg.is-on {
  background: color-mix(in srgb, var(--t-accent) 24%, transparent);
  border-color: var(--t-accent, var(--t-accent));
  color: var(--t-fg, #fff);
  box-shadow: 0 0 0 1px var(--t-accent) inset, 0 2px 12px rgba(0,0,0,0.18);
}
/* ⚠ **opacity を重ねない** — 実効色は `color × opacity` なので muted × 0.7 で
   dark 3.48 / light 2.68 まで落ちる (文字の下限 4.5:1 割れ)。「空」であることは
   muted token だけで足りる (通常段は `--t-fg` = 明確に別色。実効 dark 5.99 / light 4.61)。 */
.mypage-seg.is-empty:not(.is-on) {
  color: var(--t-muted, rgba(255,255,255,0.55));
}
.mypage-seg-icon {
  font-size: 1.05em;
  line-height: 1;
}
.mypage-seg-label {
  letter-spacing: 0.01em;
}
.mypage-seg-count {
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7em;
  padding: 0.08em 0.6em;
  /* v=65: hardcode rgba(255,255,255,...) は light theme で消える → token 経由で両対応 */
  background: color-mix(in srgb, var(--t-fg) 14%, transparent);
  border-radius: 999px;
  color: var(--t-fg, #e8eaf2);
  min-width: 1.4em;
  text-align: center;
  font-weight: 600;
}
.mypage-seg.is-on .mypage-seg-count {
  background: color-mix(in srgb, var(--t-fg) 28%, transparent);
  color: var(--t-fg, #fff);
}
/* share button + dropdown */
.mypage-share-wrap {
  position: relative;
}
.mypage-share-btn {
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-fg) 18%, transparent);
  color: var(--t-fg, #e8eaf2);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  /* 🔴 44px 床は**常時** (batch 1 C-3)。⚠ `display` は変えない — icon と label の間は
     `{' '}` の空白文字なので、flex 化すると空白が畳まれて詰まる。 */
  min-height: var(--t-tap-min, 44px);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mypage-share-btn:hover {
  background: color-mix(in srgb, var(--t-fg) 12%, transparent);
  border-color: color-mix(in srgb, var(--t-fg) 28%, transparent);
}
.mypage-share-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;
  background: var(--t-surface); /* 浮遊 menu は不透明面必須 — --t-bg-elev は dark で rgba 透過 (v=100 dev panel と同 incident) */
  border: 1px solid color-mix(in srgb, var(--t-fg) 12%, transparent);
  border-radius: 10px;
  padding: 0.4rem;
  display: none;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.mypage-share-menu.visible {
  display: flex; flex-direction: column;
  gap: 0.2rem;
}
.mypage-share-item {
  background: transparent;
  border: none;
  color: var(--t-fg, #e8eaf2);
  font-family: inherit;
  font-size: 0.78rem;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.mypage-share-item:hover {
  background: color-mix(in srgb, var(--t-fg) 10%, transparent);
}

/* ─── sticky tabs ──────────────────────────────────────────────── */
.mypage-tabs {
  position: sticky;
  top: 0;
  background: var(--t-bg, #0d1020);
  z-index: 10;
  padding: 0.5rem 0;
  margin-bottom: 1.2rem;
  display: flex;
  gap: 1.1rem;
  /* ⚠ `flex-wrap: wrap` は置かない — `components/chip-scroll.css` の `nowrap` と**同詳細度**
     なので、残すと勝敗が `<link>` の順で決まる (utility の契約 = 面側から消す)。 */
  border-bottom: 1px solid color-mix(in srgb, var(--t-fg) 10%, transparent);
}
/* 🔴 **下線型テキストタブ** (owner 裁定 2026-09-19 = 板 案 C のタブ帯)。
   🗄️ 旧: pill (地 + 枠 + 角丸 999px + 選択時 accent 塗り)。カバー主体の grid の上では
     pill が帯として重く、作品より先に目に入っていた。
   ⚠ **44px 床は割らない** (batch 1 C-3 / batch 3 裁定 1-① 「一次動作は常時 44」) —
     地と枠を外しても `min-height` と縦 padding は据え置く。
   ⚠ **選択を色だけに依存させない** (`CSS_COLOR_RULES`) — 下線 + 文字色の 2 要素で示す。 */
.mypage-tab {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0;
  /* 🔴 44px 床は**常時** (batch 1 C-3) — 詳細は file 末尾の裁定メモ。 */
  min-height: var(--t-tap-min, 44px);
  background: none;
  border: 0;
  color: var(--t-fg-soft, var(--t-muted));
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color 0.12s, box-shadow 0.12s;
}
.mypage-tab:hover {
  color: var(--t-fg, #e8eaf2);
}
/* 選択 = 下線 (`inset` の box-shadow) + 文字色。⚠ `border-bottom` は使わない —
   帯自身の `border-bottom` と二重になり、非選択タブとの高さ差が出る。 */
.mypage-tab.is-on {
  color: var(--t-fg, #fff);
  box-shadow: inset 0 -2px 0 0 var(--t-fg);
}
/* 件数は下線型では地を持たない (pill の中の pill にしない) — 文字色だけで差をつける。 */
.mypage-tab-count {
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72em;
  padding: 0 0 0 0.1em;
  background: none;
  color: var(--t-fg-soft, var(--t-muted));
  font-weight: 600;
}
.mypage-tab.is-on .mypage-tab-count {
  color: var(--t-fg, #fff);
}

/* ─── 既読タブの除外 filter (WEB-MYLIST-POLISH-2) ─────────────────
 * 絞り込みは**副次操作**なので 44px ではなく副次の床 `--t-tap-sub` (32px) を敷き、
 * 隣り合う 2 つの間隔は裁定とセットの `--t-sp-2` (8px) 以上を確保する
 * (batch 3 裁定 1-① の逐語 = 32 は行間 8 を確保するのとセット)。
 * 共有 checkbox 部品は repo に無い (form.css にも定義なし) ため page-local で置く。
 * 文法は同種の絞り込みである `.tl-fav-toggle` (tier-board.css) に合わせる。 */
.mypage-read-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-sp-2, 8px) var(--t-sp-4, 16px);
  margin-bottom: 0.6rem;
}
.mypage-read-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--t-tap-sub, 32px);
  font-size: 0.78rem;
  color: var(--t-fg-soft, var(--t-muted));
  cursor: pointer;
}
.mypage-read-filter input {
  /* 既定の checkbox を使う (独自の描き直しをしない)。theme の ink に追従させる。 */
  accent-color: var(--t-fg);
  margin: 0;
}

/* ─── 一覧の作品名検索 (WEB-COVER-DELIVERY-ART47-5 ⑤) ──────────────
 * 一覧面にも所在検索を持たせる (owner 裁定 2026-09-21 §6-2b) ための 1 行。
 * ⚠ 既読タブの除外 filter とは**別行**に置く (出す条件も対象タブも違う)。
 * 文法は同種の絞り込み入力 `.tl-search` (components/tier-board.css) に合わせ、
 * background / color / border を明示する (CSS_COLOR_RULES)。 */
.mypage-list-search {
  display: flex;
  margin-bottom: 0.8rem;
}
.mypage-list-search-input {
  flex: 1;
  min-width: 8em;
  max-width: 22rem;
  min-height: var(--t-tap-sub, 32px);
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid var(--t-border, rgba(255,255,255,0.08));
  color: var(--t-fg, #e8eaf2);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-family: inherit;
  font-size: 0.8rem;
}
.mypage-list-search-input::placeholder {
  color: var(--t-fg-soft, var(--t-muted));
}
.mypage-list-search-input:focus {
  outline: none;
  border-color: var(--t-accent);
}

/* ─── content area ─────────────────────────────────────────────── */
.mypage-content {
  min-height: 240px;
}
.mypage-list-summary {
  font-size: 0.78rem;
  color: var(--t-muted, rgba(255,255,255,0.6));
  margin-bottom: 0.8rem;
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
}
.mypage-rec-desc {
  font-size: 0.78rem;
  color: var(--t-muted, rgba(255,255,255,0.6));
  margin-bottom: 1rem;
}

/* mypage-item / mypage-grid は dashboard.css の class を流用 */

.dash-rec-dot {
  background: var(--t-accent, var(--t-accent));
}

@media (max-width: 640px) {
  .mypage-main { padding: 1rem 0.75rem 3rem; }
  /* 🗄️ 旧: `.mypage-title-row` を縦並びにし、共有を右下へ (`align-self: flex-end`)。題名の下で
     共有ボタンだけが 1 行を占めていた — 題名は短い (「マイリスト」) ので、640 以下でも
     desktop の規則 (題名の右に並べる) のまま (WEB-MYPAGE-FIXES)。 */
  .mypage-tab { font-size: 0.75rem; padding: 0.4rem 0.7rem; }
  .mypage-tabs { gap: 0.3rem; padding: 0.4rem 0; }
  .mypage-segments { gap: 0.3rem; margin-top: 0.8rem; }
  .mypage-seg { font-size: 0.78rem; padding: 0.4rem 0.7rem; }
  .mypage-seg-label { display: inline; }
}

/* ─── mypage-detail modal (lightweight) ──────────────────────── */
.mpd-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.mpd-dialog {
  background: var(--t-surface); /* modal 本体は不透明面必須 — --t-bg-elev は dark で rgba 透過し背後が透ける */
  border: 1px solid color-mix(in srgb, var(--t-fg) 12%, transparent);
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.mpd-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  /* 🔴 44px 床は**常時** (batch 1 C-3)。旧 32x32 固定 → modal を閉じるのは一次動作。
     ⚠ 円形 (`border-radius: 50%`) と中央寄せはそのまま。 */
  width: var(--t-tap-min, 44px); height: var(--t-tap-min, 44px);
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-fg) 15%, transparent);
  color: var(--t-fg, #e8eaf2);
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.mpd-close:hover {
  background: color-mix(in srgb, var(--t-fg) 12%, transparent);
}
.mpd-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  /* ⚠ `.mpd-close` が 32 → 44 (C-3) になった分の逃げ。閉じるボタンは `.mpd-dialog` の
     `right: 0.8rem` に絶対配置なので、content 端からの食い込みは 0.8rem + 44px - 1.5rem
     (dialog の左右 padding) ≒ 33px。タイトルがボタンの下に潜らないよう 2rem → 2.75rem。 */
  padding-right: 2.75rem;
}
/* カバー統一 PR-2: 実体は components/work-cover.css (.work-cover--l)。ここは配置のみ */
.mpd-cover {
  flex-shrink: 0;
}
.mpd-header-text {
  flex: 1; min-width: 0;
}
.mpd-title {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--t-fg, #e8eaf2);
  line-height: 1.25;
}
.mpd-sub {
  font-size: 0.82rem;
  color: var(--t-muted, rgba(255,255,255,0.6));
}
.mpd-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.mpd-action {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  /* 🔴 44px 床は**常時** (batch 1 C-3) — modal のリスト操作 (お気に入り / 既読 …) は
     この面の一次動作。⚠ `display` は変えない (icon と label の間が `{' '}` の空白文字)。 */
  min-height: var(--t-tap-min, 44px);
  background: var(--t-bg-elev);
  border: 1px solid color-mix(in srgb, var(--t-fg) 15%, transparent);
  color: var(--t-fg, #e8eaf2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.mpd-action:hover {
  background: color-mix(in srgb, var(--t-fg) 12%, transparent);
}
.mpd-action:active { transform: scale(0.97); }
.mpd-action.is-on {
  background: color-mix(in srgb, var(--t-accent) 24%, transparent);
  border-color: var(--t-accent, var(--t-accent));
  color: var(--t-fg, #fff);
  box-shadow: 0 0 0 1px var(--t-accent) inset;
}
/* v=74: Not my taste は赤系で他 toggle と視覚区別 */
.mpd-action-dislike.is-on {
  background: color-mix(in srgb, var(--t-negative) 26%, transparent);
  border-color: color-mix(in srgb, var(--t-negative) 70%, transparent);
  box-shadow: 0 0 0 1px rgba(248,113,113,0.4) inset;
}
/* 作品ページ導線の文言は語の境界だけで折る (modal.css の .modal-workpage-label と同じ理由)。
   .btn は nowrap なので label だけ normal へ戻す — 戻さないと 360 以下で dialog からはみ出し矢印が切れる */
.mpd-workpage-label { text-align: center; white-space: normal; }
.mpd-workpage-label > span { display: inline-block; }
.mpd-workpage-label > span + span { margin-inline-start: 0.3em; }
:lang(ja) .mpd-workpage-label > span + span,
:lang(zh) .mpd-workpage-label > span + span { margin-inline-start: 0; }
.mpd-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin-bottom: 1.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--t-bg-elev);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--t-fg) 8%, transparent);
}
.mpd-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-size: 0.78rem;
}
.mpd-meta-key {
  color: var(--t-muted, rgba(255,255,255,0.5));
  font-size: 0.72rem;
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.03em;
}
.mpd-meta-val {
  color: var(--t-fg, #e8eaf2);
}
.mpd-section-title {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--t-fg, #e8eaf2);
}
.mpd-scores {
  margin-bottom: 1.2rem;
}
.mpd-genres {
  margin-bottom: 0.5rem;
}
.mpd-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.mpd-chip {
  font-size: 0.74rem;
  padding: 0.25rem 0.65rem;
  background: color-mix(in srgb, var(--t-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 25%, transparent);
  color: var(--t-fg, #e8eaf2);
  border-radius: 999px;
}
@media (max-width: 480px) {
  .mpd-meta { grid-template-columns: 1fr; }
  .mpd-cover { width: 60px; } /* 高さは work-cover の 2:3 が決める */
  .mpd-title { font-size: 1.1rem; }
}

/* ── v=93 (Phase P2.5): Not my taste tab — dislike 集計 panel ─────── */
.mypage-dislike-insight {
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.mpd-insight-title {
  font-size: 0.95rem; font-weight: 700;
  margin: 0 0 0.7rem;
  color: var(--t-fg);
}
.mpd-insight-row {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.4rem 0;
}
.mpd-insight-key {
  width: 4em; flex-shrink: 0;
  font-size: 0.78rem; color: var(--t-muted);
  font-weight: 600; padding-top: 0.25rem;
}
.mpd-insight-chips {
  flex: 1;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
/* .dash-tag は dashboard.css の既存 component を流用 */

/* 🔴 タップ目標 — **常時 44px 床** (batch 1 共通是正 C-3 / batch 3 裁定 1-①)。
   元は 2026-08-30 mobile view 精査 (batch 4 / I-7) が `@media (max-width: 767px)` の中だけに
   置いた床だった。`/mypage/` 実測 360x780: `.mypage-tab` 68x33 x6 / `.mypage-seg` 116x33 x9 /
   `.mypage-share-btn` 86x34 / `.mypage-open-map` 335x28 / `.mpd-close` 32x32 固定。
   ⇒ C-3 で **media 内の床を撤去し、各 class の base 規則へ移した** (この節に規則は残さない)。
   裁定 (batch 3 裁定 1-①) = **44px の床は一次動作だけ・副次は 32 (`--t-tap-sub`)**。
   この面で 44 を当てるのは:
     `.mypage-seg` (ドメイン切替) / `.mypage-tab` (タブ切替) / `.mypage-share-btn` (共有) /
     `.mpd-close` (modal を閉じる) / `.mpd-action` (modal のリスト操作) — いずれも一次動作。
   ⚠ `padding` は触らない (行の詰まり方を保つ)。
   🗄️ `.mypage-open-map` (3D マップへ) と本文リンク「taste プロファイルを見る →」は
     **2026-09-19 (owner 指示) に撤去**したので、この表から外した。`.mypage-tab` は同時に
     pill から下線型へ変えたが、**床と縦 padding は据え置き**なので 44 は保たれる。
   ⚠ この file は `/me/` `/discover/` も `<link>` する。`.mypage-*` 系の markup を持つのは
     `/mypage/` だけだが、`.mpd-*` を持つ `WorkDetailModal` は `/me/` `/discover/` も直接
     import するので、`.mpd-close` / `.mpd-action` の 44 化は**意図的に両面へ波及する**。 */