/*
 * routes/profile.css — mypage.html / user.html でしか当たらない CSS（style.css から
 * scripts/split-route-css.js で機械分割・2026-09-07・07-static F4 第2段）。
 *
 * このバンドルのルールは**初期描画に要る**ので、読み込みは素の <link rel=stylesheet>（同期）。
 * ここのスタイルは直接このファイルを編集する（style.css に書くと test/route-css-split.test.js が赤にする）。
 * 編集したら node scripts/split-route-css.js --bump で <link> の ?v=（内容ハッシュ）を揃える。
 * どのルールがここに来るか / どのページが link するかの判定は scripts/route-css-config.js。
 *
 * ⚠️ このファイルのセレクタには、必ずプロフィール2ページにしか出てこないトークン（.pf-* 等）を含めること。
 *   .mypage-header-title のように settings.html / follows.html でも使うクラスだけのセレクタを書くと、
 *   route-css-split テストが「このバンドルの担当外で当たる」として赤にする。共有クラスを上書きしたいときは
 *   .pf-page（mypage.html / user.html の .mypage-view にだけ付けたクラス）で囲う。
 * ⚠️ キーフレーム定義は書かない（テストが落ちる）。入場・波・バネの動きは js/modules/profile-view.js の
 *   Web Animations API。ここは静止状態と transition（押した時の沈み・色の切替）だけを持つ。
 */

/* ============================================================
   プロフィール刷新（2026-09-24・founder 承認の見本 pages.html §③）
   自分用（/mypage）と他人用（/@ID）を同じ見た目に。白いカード・柔らかい影・細い線。
   赤（--red）は「いま押すもの」1つだけ（他人: フォロー／自分: ＋つくる）。
   ============================================================ */

.mypage-view.pf-page {
  /* 見本の色（pages.html :root）。既存の --gray-* より一段青みの無彩色で、白いカードが浮いて見える */
  --pf-ink: #16161A;
  --pf-ink2: #55555E;
  --pf-ink3: #8C8C96;
  --pf-line: rgba(22, 22, 26, 0.08);
  --pf-bg: #F6F6F8;
  --pf-sh1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.05);
  --pf-sh2: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
  --pf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 旧: 白→gray-50 のグラデ＋上端の赤いにじみ。赤は「押すもの」だけにするので背景からは外す */
  background: var(--pf-bg);
}

/* PC: 中央の読みやすい幅。ヘッダーだけは横いっぱい（戻る/設定ボタンを画面の端に置く） */
.pf-page > :not(.mypage-header) {
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ---------- ヘッダー ----------
   旧: タイトルが gray-400・13px で「誰のページか」が読めなかった（不具合）。インクの色・太字に。
   スクロールしても残るよう sticky。背景は半透明＋ぼかし（下の作品が透けて流れる） */
.pf-page .mypage-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 246, 248, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.pf-page .mypage-header-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--pf-ink);
  letter-spacing: 0;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-page .mypage-back-btn {
  border: 0;
  color: var(--pf-ink);
  box-shadow: 0 0 0 1px var(--pf-line), var(--pf-sh1);
}

/* 歯車（自分のときだけ。profile.js が headerRight と差し替える / mypage.html は静的） */
.pf-page .mypage-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--pf-ink);
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s ease, transform 0.15s var(--pf-ease);
  text-decoration: none;
}

.pf-page .mypage-settings-btn:active {
  transform: scale(0.92) rotate(30deg);
}

@media (hover: hover) {
  .pf-page .mypage-settings-btn:hover {
    background: rgba(22, 22, 26, 0.05);
  }
}

/* ---------- ヒーロー（アバター・名前・@ID・数字） ---------- */
.pf-page .pf-hero {
  background: transparent;
  padding: 6px 16px 0;
  /* 旧 slideUp（CSS アニメ）は外す: 入場は profile-view.js が部品ごとに時間差で行う */
  animation: none;
}

/* 取得前（is-pending）: 名前の仮の棒と空の丸だけ。「0 フォロワー」や押せないボタンのような
   仮の値は見せない（見えた後に入場アニメで消えて出直す二度出しになるため）。
   visibility にしているのは、高さを確保して取得後に何も跳ねないようにするため */
.pf-hero.is-pending .pf-handle-row,
.pf-hero.is-pending .pf-stats,
.pf-hero.is-pending .mypage-social-links,
.pf-hero.is-pending .pf-actions,
.pf-hero.is-pending .mypage-level {
  visibility: hidden;
}

.pf-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pf-avatar {
  position: relative;
  flex: none;
  /* ポップインは回転を含むので、中心から */
  transform-origin: 50% 50%;
}

/* Lv の輪。--xp-pct（0-100）＝自分のレベル内進捗。JS（profile-view.js fillRing）が 0 → 値へ満たす。
   0 のとき（他人・未取得・XP OFF）は薄い灰色の輪だけ＝「他人は輪なし or 薄い輪＋Lvチップ」の裁定。
   style.css の 3 層（0 のときブランドの赤グラデ一周）は上書きする: 赤は押すものだけにするため。 */
.pf-page .mypage-avatar-ring {
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(var(--red) calc(var(--xp-pct, 0) * 1%), #E4E4E9 0);
}

/* 頭文字の丸（画像が無い人）。色は user id から（navigation.js と同じ式・同じグラデ＝サイドバーと同じ色） */
.pf-page .mypage-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #E9E9EE;
  /* 輪とアバターの間の細い隙間（背景色の縁）。輪が「アバターの周りを回る」ように見える */
  box-shadow: 0 0 0 3px var(--pf-bg);
  color: rgba(255, 255, 255, 0.96);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pf-page .mypage-avatar[data-initial] {
  background-image: linear-gradient(135deg, hsl(var(--dc-avatar-hue, 0), 65%, 78%), hsl(calc(var(--dc-avatar-hue, 0) + 50), 70%, 66%));
}

.pf-page .mypage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像の blur-in（profile-view.js setupBlurIn が読み込み完了まで付ける）。画像だけ filter を動かしてよい */
.pf-page .mypage-avatar img,
.pf-tile img {
  transition: filter 0.5s var(--pf-ease), transform 0.6s var(--pf-ease), opacity 0.4s ease;
}

.pf-page img.pf-img-loading {
  filter: blur(12px);
  transform: scale(1.08);
  opacity: 0.6;
}

/* Lv チップ: アバターの下端に重ねる（見本）。自分では /xp へのリンク（style.css の › が付く） */
.pf-page .pf-avatar .mypage-level {
  position: absolute;
  left: 50%;
  bottom: -8px;
  z-index: 1;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--pf-ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  box-shadow: 0 0 0 1px var(--pf-line), var(--pf-sh1);
  transform: translateX(-50%);
  transition: transform 0.25s var(--pf-spring);
}

.pf-page .pf-avatar a.mypage-level:active {
  transform: translateX(-50%) scale(0.92);
}

@media (hover: hover) {
  .pf-page .pf-avatar a.mypage-level:hover {
    transform: translateX(-50%) scale(1.06);
    text-decoration: none;
  }
}

.pf-id {
  flex: 1;
  min-width: 0;
}

.pf-page .mypage-name {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--pf-ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 取得前の仮の棒（「-」や空白で高さが跳ねない） */
.pf-page .mypage-name:empty::before {
  content: '';
  display: block;
  width: 9em;
  max-width: 70%;
  height: 20px;
  border-radius: 6px;
  background: #E9E9EE;
}

.pf-handle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 2px;
}

.pf-handle {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-ink3);
  overflow-wrap: anywhere;
}

.pf-handle:empty {
  display: none;
}

/* 「フォローされています」: @ID の横に小さく。色は無彩色（赤は押すものだけ） */
.pf-page .pf-follows-you {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ECECF0;
  color: var(--pf-ink2);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}

/* ⚠️ 不具合の修正（2026-09-24）: 旧 .mypage-relationship-meta { display: inline-flex } が UA の
   [hidden] { display: none } に勝ち、フォロー関係が無いときも「薄い赤の空ピル」がボタンの下に残っていた
   （.mypage-level[hidden] と同じ罠）。作者スタイルの display を使う要素は [hidden] を必ず明示する。 */
.pf-page .mypage-relationship-meta[hidden] {
  display: none;
}

/* 数字の1行: 作品・フォロワー・フォロー中（プレイ数・いいね数は出さない） */
.pf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 8px;
}

.pf-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--pf-ink2);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.pf-stat-num {
  font-size: 15px;
  font-weight: 900;
  color: var(--pf-ink);
  /* カウントアップ中に桁幅が揺れない */
  font-variant-numeric: tabular-nums;
}

.pf-stat--link {
  cursor: pointer;
  border-radius: 6px;
  transition: transform 0.15s var(--pf-ease);
}

.pf-stat--link:active {
  transform: scale(0.94);
}

.pf-stat--link:focus-visible {
  outline: 2px solid var(--pf-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .pf-stat--link:hover .pf-stat-label {
    color: var(--pf-ink);
    text-decoration: underline;
  }
}

/* 儀式ゲートの1行ヒント（自分だけ・xp.hint.*）。Lv チップはアバターに重ねたので、ヒントはヒーローの下に1行 */
.mypage-level-hint {
  display: block;
  margin-top: 14px;
  color: var(--gray-600);
  font-size: 0.75rem;
  line-height: 1.4;
}

.mypage-level-hint[hidden] {
  display: none;
}

.pf-page .mypage-level-hint {
  color: var(--pf-ink2);
}

/* ---------- 自己紹介・SNS リンク（機能は維持・見た目だけ） ---------- */
.pf-page .mypage-bio-container {
  margin-top: 12px;
}

.pf-page .mypage-bio {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--pf-ink2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* 長い自己紹介は3行で畳む（profile-view.js setupBioExpand が is-clamped を付けたときだけ） */
.pf-page .mypage-bio-container.is-clamped .mypage-bio:not(.expanded) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pf-page .bio-more-btn {
  margin: 2px 0 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pf-ink);
  cursor: pointer;
}

.pf-page .mypage-social-links {
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.pf-page .mypage-social-link {
  width: 34px;
  height: 34px;
  border: 0;
  background: #fff;
  color: var(--pf-ink);
  font-size: 13px;
  box-shadow: 0 0 0 1px var(--pf-line), var(--pf-sh1);
  transition: transform 0.18s var(--pf-spring), box-shadow 0.2s ease;
}

.pf-page .mypage-social-link.mypage-social-custom {
  width: auto;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.pf-page .mypage-social-link:active {
  transform: scale(0.92);
}

@media (hover: hover) {
  .pf-page .mypage-social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--pf-line), var(--pf-sh2);
  }
}

/* ---------- ボタン（自分: 編集＋共有 / 他人: 赤いフォロー＋共有） ---------- */
.pf-page .pf-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.pf-btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 押した時は即座に沈む（:active）。状態が変わる時の色は 0.25s でふわっと */
  transition: transform 0.16s var(--pf-ease), background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.pf-btn:active {
  transform: scale(0.96);
}

.pf-btn:focus-visible {
  outline: 2px solid var(--pf-ink);
  outline-offset: 2px;
}

.pf-btn--grow {
  flex: 1;
  min-width: 0;
}

.pf-btn--pri {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 59, 48, 0.28);
}

.pf-btn--sec {
  background: #fff;
  color: var(--pf-ink);
  box-shadow: 0 0 0 1px var(--pf-line), var(--pf-sh1);
}

/* 申請中は「待ち」の色（文字を一段薄く）。旧・茶色の塗りは他のボタンの言葉づかいから浮いていた */
.pf-btn.requested {
  color: var(--pf-ink2);
}

.pf-btn:disabled {
  cursor: default;
  opacity: 0.75;
}

.pf-btn-label {
  display: inline-block;
}

/* ---------- タブ（作品／ゲストブック／保存） ---------- */
.pf-tabs {
  position: relative;
  display: flex;
  gap: 22px;
  margin-top: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--pf-line);
}

.pf-tab {
  appearance: none;
  border: 0;
  background: none;
  margin: 0;
  padding: 10px 0 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--pf-ink3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

.pf-tab.is-active {
  color: var(--pf-ink);
}

.pf-tab[hidden] {
  display: none;
}

.pf-tab:focus-visible {
  outline: 2px solid var(--pf-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 滑る下線。幅 100px の棒を translateX + scaleX で動かす（width を動かすと毎フレームのレイアウトが走る）。
   バネ（--pf-spring）で少し行き過ぎて戻る。初期配置だけ is-instant で滑らせない */
.pf-tab-ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--pf-ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.45s var(--pf-spring);
  pointer-events: none;
}

.pf-tab-ink.is-instant {
  transition: none;
}

/* ---------- パネルと作品グリッド ---------- */
.pf-panel {
  padding: 10px 10px 16px;
}

.pf-panel[hidden] {
  display: none;
}

/* 3列（スマホ）。PC は 4 列 → 5 列。旧・幅200px の横カルーセル（端が縮んで透ける）を置き換え */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.pf-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 14;
  border-radius: 12px;
  overflow: hidden;
  background: #E9E9EE;
  box-shadow: var(--pf-sh1);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--pf-ease), box-shadow 0.25s ease;
  /* 波入場の scale が角丸の外にはみ出さないよう、合成レイヤーで切る */
  isolation: isolate;
}

.pf-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-tile img.img-error {
  opacity: 0;
}

/* タイトルが読めるよう、画像の下 45% に黒のグラデ */
.pf-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.58));
  pointer-events: none;
}

.pf-tile-title {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  z-index: 1;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pf-tile:active {
  transform: scale(0.96);
}

.pf-tile:focus-visible {
  outline: 2px solid var(--pf-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .pf-tile:hover {
    box-shadow: var(--pf-sh2);
  }

  .pf-tile:hover img {
    transform: scale(1.05);
  }
}

/* 「＋つくる」1マス（自分のときだけ先頭）。赤は「いま押すもの」＝自分のページではこれが主役 */
.pf-tile--make {
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--red);
  box-shadow: inset 0 0 0 1.5px rgba(255, 59, 48, 0.32), var(--pf-sh1);
}

.pf-tile--make::after {
  display: none;
}

.pf-make-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pf-make-plus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 59, 48, 0.1);
  transition: transform 0.35s var(--pf-spring), background-color 0.2s ease;
}

.pf-make-label {
  font-size: 12px;
  font-weight: 900;
}

.pf-tile--make:active .pf-make-plus {
  transform: rotate(90deg) scale(0.9);
}

@media (hover: hover) {
  .pf-tile--make:hover .pf-make-plus {
    transform: rotate(90deg) scale(1.08);
    background: rgba(255, 59, 48, 0.16);
  }
}

/* 読み込み中の仮タイル。光（.pf-skel-shine）は profile-view.js が WAAPI で横切らせる */
.pf-tile--skel {
  background: #ECECF0;
  box-shadow: none;
}

.pf-tile--skel::after {
  display: none;
}

.pf-skel-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.7) 50%, transparent 80%);
  transform: translateX(-100%);
}

.pf-sentinel {
  height: 1px;
}

/* 空状態。グリッドの横幅いっぱい＝旧版の「まだゲームがありません」が1列幅に押し込まれて
   変な位置で改行していた不具合の修正（2026-09-24） */
.pf-empty {
  grid-column: 1 / -1;
  padding: 44px 16px;
  text-align: center;
}

.pf-empty[hidden] {
  display: none;
}

.pf-empty-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--pf-ink3);
  text-wrap: balance;
}

.pf-empty-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--pf-ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--pf-line), var(--pf-sh1);
  transition: transform 0.16s var(--pf-ease);
}

.pf-empty-link:active {
  transform: scale(0.96);
}

/* 保存タブの「すべて見る」 */
.pf-saved[hidden] {
  display: none;
}

.pf-panel-head {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px 8px;
}

.pf-panel-link {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pf-ink2);
  text-decoration: none;
}

@media (hover: hover) {
  .pf-panel-link:hover {
    color: var(--pf-ink);
  }
}

/* ---------- ゲストブック（直近3件） ---------- */
.pf-gb-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--pf-sh1);
  padding: 2px 14px 0;
}

.pf-gb-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.pf-gb-row + .pf-gb-row {
  border-top: 1px solid var(--pf-line);
}

.pf-gb-emoji {
  flex: none;
  font-size: 16px;
  line-height: 1.4;
}

.pf-gb-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pf-ink2);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pf-gb-text b {
  color: var(--pf-ink);
  font-weight: 800;
}

.pf-gb-time {
  flex: none;
  font-size: 11px;
  line-height: 1.8;
  color: var(--pf-ink3);
}

.pf-gb-all {
  display: block;
  margin: 0 -14px;
  padding: 12px 0 13px;
  border-top: 1px solid var(--pf-line);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--pf-ink);
  text-decoration: none;
}

/* ---------- プラン（mypage のみ）・ログアウト ---------- */
.mypage-plan-section {
  padding: 0 var(--s-16);
  margin-top: var(--s-16);
}

.mypage-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-12) var(--s-16);
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mypage-plan-card:active {
  transform: scale(0.98);
}

.mypage-plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mypage-plan-label {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.mypage-plan-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
}

.mypage-plan-card svg {
  color: var(--gray-400);
}

.mypage-footer {
  padding: var(--s-24) var(--s-24);
  padding-bottom: var(--bottom-nav-reserved-space-comfy);
  text-align: center;
}

.mypage-logout-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-8) var(--s-16);
  transition: color 0.2s ease;
}

.mypage-logout-btn:hover {
  color: var(--gray-600);
}

/* ---------- PC ---------- */
@media (min-width: 640px) {
  .pf-page .pf-hero {
    padding: 18px 24px 0;
  }

  .pf-top {
    gap: 22px;
  }

  .pf-page .mypage-avatar {
    width: 96px;
    height: 96px;
    font-size: 38px;
  }

  .pf-page .mypage-name {
    font-size: 24px;
  }

  .pf-stat {
    font-size: 13px;
  }

  .pf-stat-num {
    font-size: 16px;
  }

  /* PC で編集/フォローが 800px に伸びると間延びするので、中身の幅＋最小幅に */
  .pf-btn--grow {
    flex: 0 1 auto;
    min-width: 200px;
  }

  .pf-tabs {
    padding: 0 24px;
  }

  .pf-panel {
    padding: 14px 16px 24px;
  }

  .pf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .pf-tile {
    border-radius: 14px;
  }

  .pf-tile-title {
    left: 10px;
    right: 10px;
    bottom: 9px;
    font-size: 13px;
  }
}

@media (min-width: 1100px) {
  .pf-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* 動きを減らす設定: CSS の transition も止める（JS の animate は profile-view.js が同じ問い合わせで止める） */
@media (prefers-reduced-motion: reduce) {
  .pf-page .pf-tab-ink,
  .pf-page .pf-btn,
  .pf-page .pf-tile,
  .pf-page .pf-tile img,
  .pf-page .mypage-avatar img,
  .pf-page .pf-make-plus,
  .pf-page .pf-stat--link {
    transition: none;
  }

  .pf-page img.pf-img-loading {
    filter: none;
    transform: none;
    opacity: 1;
  }
}