/* ===========================================================================
   TPH My Page — CSS（Mana Flow リデザイン / App Dashboard）
   ⚠️ --mp-* は tph-core/assets/css/tph-design-tokens.css の --tph-* のエイリアス
   （2026-07-13 一元化）。色の変更はトークンファイル側で行うこと。
   =========================================================================== */

/* ページ背景のタパ紋様テクスチャは body.tph-tapa-bg::before（テーマ custom.css）に
   汎用化して移動（2026-07-14）。対象ページは tph-core.php の body_class フィルタで管理 */

.tph-mp-wrap {
  --mp-teal:var(--tph-teal); --mp-teal-light:var(--tph-teal-light);
  --mp-coral:var(--tph-coral); --mp-coral-dark:var(--tph-coral-dark);
  --mp-amber:var(--tph-amber);
  --mp-sand:var(--tph-sand); --mp-sand-dark:var(--tph-sand-dark);
  --mp-wood:var(--tph-wood); --mp-wood-dark:var(--tph-wood-dark);
  --mp-white:var(--tph-white); --mp-navy:var(--tph-navy);
  --mp-text:var(--tph-text); --mp-muted:var(--tph-text-muted);
  --mp-shadow-sm:var(--tph-shadow-sm);
  --mp-shadow-md:var(--tph-shadow-md);
  --mp-trans:var(--tph-transition);

  max-width: 800px;
  margin: 0 auto;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--mp-text);
}

/* ── ヒーロー挨拶カード（App Dashboard） ──────────────────────────────────── */
.tph-mp-hero {
  position: relative;
  /* overflow: visible — アバターがカード上端に半分かぶって飛び出すため (2026-07-18) */
  display: flex;
  flex-direction: column;   /* 縦積み・中央寄せレイアウト (2026-07-18) */
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0 1.6rem 1.5rem;
  border-radius: var(--tph-radius-md);
  margin-top: 2rem;         /* 飛び出したアバターとヘッダーが重ならない余白 */
  margin-bottom: 1.5rem;
  /* 2026-07-19: 茶色写真背景は他カードと比べ濃すぎたため廃止。
     他カードと同じ額縁スタイル（クリーム地＋木色の縁）に揃え、
     旧背景のタパ柄を参照した「三角の連続模様バンド」を上下に配置（::before/::after） */
  background: linear-gradient(180deg, #FAF6EE 0%, #F5ECD9 100%);
  border: 2px solid var(--mp-wood);
  color: var(--mp-text);
  box-shadow: var(--mp-shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.5);
  cursor: pointer;                  /* クリックでプランへ */
}
/* タパ柄の三角連続模様バンド（SVGパターンのrepeat-xなので幅に依存せずレスポンシブ） */
.tph-mp-hero::before,
.tph-mp-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='8'><path d='M0 0 L7 8 L14 0 Z' fill='%236E4A2F'/><path d='M14 0 L21 8 L28 0 Z' fill='%23C4883A'/></svg>");
  background-repeat: repeat-x;
  background-size: 28px 8px;
}
.tph-mp-hero::before {
  top: 0;
  border-radius: calc(var(--tph-radius-md) - 2px) calc(var(--tph-radius-md) - 2px) 0 0;
}
.tph-mp-hero::after {
  bottom: 0;
  transform: scaleY(-1);   /* 下側は上向き三角に反転 */
  border-radius: calc(var(--tph-radius-md) - 2px) calc(var(--tph-radius-md) - 2px) 0 0;
}
.tph-mp-hero:focus-visible { outline: 2px solid var(--mp-amber); outline-offset: 2px; }
/* 「プラン確認・変更 ›」= チップの下に通常フローで表示（名前と重ならない） */
.tph-mp-hero__cta {
  display: block;            /* チップの下の行に独立表示 */
  margin-top: 0.55rem;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--mp-muted);   /* 明るい背景用（2026-07-19） */
}
.tph-mp-hero > * { position: relative; z-index: 1; }

/* アバター: センターでカード上端に半分かぶせる・小さめ (2026-07-18) */
.tph-mp-hero__avatar { margin-top: -28px; }
.tph-mp-hero__avatar .tph-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--mp-white, #FAF6EE);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  display: block;
}
.tph-mp-hero__name {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: clamp(1.3rem, 5.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: #2a1500;   /* 明るい背景用（2026-07-19 背景変更に追従） */
  /* 長い名前でも改行させない（収まらない分は…） */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tph-mp-hero__san { font-size: 1rem; opacity: 0.8; margin-left: 0.25rem; }
.tph-mp-hero__chip {
  display: inline-block;
  margin-top: 0.65rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
}
/* 明るい背景用に反転（2026-07-19）: 契約中=ティール塗り / 未契約=サンド枠付き */
.tph-mp-hero__chip.is-active   { background: var(--mp-teal); color: #fff; font-weight: 600; }
.tph-mp-hero__chip.is-inactive { background: #F2E8D0; color: #3a2410; border: 1px solid var(--mp-sand-dark); }
/* 契約プランチップ＝プランへの導線ボタン。ホバーで反応（カード自体は動かさない） */
.tph-mp-hero__chip {
  transition: transform var(--mp-trans), box-shadow var(--mp-trans), filter var(--mp-trans);
}
.tph-mp-hero:hover .tph-mp-hero__chip,
.tph-mp-hero__chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* ── ダッシュボード：数字タイル ───────────────────────────────────────────── */
.tph-mp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.tph-mp-stat {
  background: linear-gradient(180deg, #FAF6EE 0%, #F5ECD9 100%);
  border: 1.5px solid var(--mp-wood);
  border-radius: 12px;
  padding: 1rem 0.8rem;
  text-align: center;
  box-shadow: var(--mp-shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.55);
}
.tph-mp-stat__num {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--mp-teal);
}
.tph-mp-stat__num.is-small { font-size: 1.15rem; font-weight: 500; }
.tph-mp-stat__label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mp-muted); margin-top: 0.35rem;
}

/* ── ダッシュボード：機能カードグリッド（スマホ2列 / PC3列） ──────────────── */
.tph-mp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.tph-mp-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem;
  padding: 1.5rem 0.8rem;
  /* 木の額縁風：暖色の地色＋木色の縁＋内側ハイライト */
  background: linear-gradient(180deg, #FAF6EE 0%, #F5ECD9 100%);
  border: 2px solid var(--mp-wood);
  border-radius: var(--tph-radius-md);
  box-shadow: var(--mp-shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.5);
  cursor: pointer;
  text-decoration: none;
  color: var(--mp-text);
  text-align: center;
  font-family: inherit;
  transition: transform var(--mp-trans), box-shadow var(--mp-trans), border-color var(--mp-trans);
}
.tph-mp-card:hover {
  transform: translateY(-3px);
  border-color: var(--mp-wood-dark);
  box-shadow: var(--mp-shadow-md), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.tph-mp-card__ico { font-size: 1.8rem; line-height: 1; display: inline-block; transition: transform var(--mp-trans); }

/* 差し替えSVGアイコン（assets/icons/ui/*.svg があれば PHP が inline 出力する）
   currentColor で描かれたSVGにティールが当たり、ホバー変化も追従する */
.tph-mp-card__ico--svg { color: var(--mp-teal); }
.tph-mp-card__ico--svg svg { width: 1em; height: 1em; display: block; }

/* ── 各カードのアクセント付きホバー（ブランドカラー） ─────────────────────── */
.tph-mp-card:hover .tph-mp-card__ico { transform: scale(1.14); }
.tph-mp-card__arrow { transition: transform var(--mp-trans); }
.tph-mp-card--wide:hover .tph-mp-card__arrow { transform: translateX(4px); color: var(--mp-text); }

.tph-mp-card--bookings:hover { border-color: var(--mp-teal); }
.tph-mp-card--bookings:hover .tph-mp-card__title { color: var(--mp-teal); }

.tph-mp-card--recap:hover { border-color: var(--mp-coral); }
.tph-mp-card--recap:hover .tph-mp-card__title { color: var(--mp-coral); }

.tph-mp-card--videos:hover { border-color: var(--mp-amber); }
.tph-mp-card--videos:hover .tph-mp-card__title { color: var(--mp-amber); }

.tph-mp-card--pehe:hover { border-color: var(--mp-amber); }
.tph-mp-card--pehe:hover .tph-mp-card__title { color: var(--mp-coral-dark); }

.tph-mp-card--profile:hover { border-color: var(--mp-teal-light); }
.tph-mp-card--profile:hover .tph-mp-card__title { color: var(--mp-teal-light); }
.tph-mp-card__title { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 1rem; color: var(--mp-text); }
.tph-mp-card__sub { font-size: 0.74rem; color: var(--mp-muted); letter-spacing: 0.02em; }

/* ── 全幅カード（横長・予約/Pehe/設定） ──────────────────────────────────── */
.tph-mp-card--wide {
  grid-column: 1 / -1;          /* 2列ぶち抜き */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
}
.tph-mp-card--wide .tph-mp-card__ico { font-size: 1.6rem; }
.tph-mp-card__body { display: flex; flex-direction: column; gap: 0.15rem; }
.tph-mp-card__arrow { margin-left: auto; color: var(--mp-muted); font-size: 1.3rem; line-height: 1; }
.tph-mp-card--slim { padding: 0.95rem 1.4rem; }
.tph-mp-card--slim .tph-mp-card__ico { font-size: 1.3rem; }
.tph-mp-card--slim .tph-mp-card__title { font-size: 0.95rem; }

/* Pehe カード：トエレのイラストを右の余白に */
.tph-mp-card--pehe { overflow: hidden; }
.tph-mp-card--pehe .tph-toere {
  margin-left: auto;
  color: var(--mp-amber);
  flex-shrink: 0;
  width: 110px;
  opacity: 0.9;
}
.tph-mp-card--pehe .tph-toere svg { display: block; width: 100%; height: auto; }
@media (max-width: 380px) {
  .tph-mp-card--pehe .tph-toere { width: 78px; }
}

/* ── 詳細パネルの「ホームに戻る」 ─────────────────────────────────────────── */
.tph-mp-back {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: none; cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem; letter-spacing: 0.05em;
  color: var(--mp-teal);
  padding: 0.3rem 0; margin-bottom: 1rem;
  transition: color var(--mp-trans);
}
.tph-mp-back:hover { color: var(--mp-coral); }

/* ── 上部タブナビ（PC） ───────────────────────────────────────────────────── */
.tph-mp-tabs {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--mp-sand-dark);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tph-tab-btn {
  padding: 0.7rem 1.1rem;
  border: none;
  background: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mp-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--mp-trans), border-color var(--mp-trans);
  white-space: nowrap;
}
.tph-tab-btn.is-active { color: var(--mp-teal); border-bottom-color: var(--mp-teal); }
.tph-tab-btn:hover { color: var(--mp-teal); }
.tph-tab-link { text-decoration: none; display: inline-flex; align-items: center; }

/* ── 下部タブバー（モバイルのみ・デフォルト非表示） ───────────────────────── */
.tph-mp-bottomnav { display: none; }

/* ── タブパネル ───────────────────────────────────────────────────────────── */
.tph-tab-panel { display: none; }
.tph-tab-panel.is-active { display: block; }

/* ── プランカード ─────────────────────────────────────────────────────────── */
.tph-plan-status-card {
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--mp-sand-dark);
  background: var(--mp-white);
  box-shadow: var(--mp-shadow-sm);
}
.tph-plan-status-card.is-active {
  background: linear-gradient(135deg, #ffffff, #FAF6EE);
  border-color: rgba(10,61,92,0.2);
  border-left: 4px solid var(--mp-teal);
}
.tph-plan-status-card.is-inactive { background: #fbfaf7; }

.tph-plan-status-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mp-teal);
  margin-bottom: 0.4rem;
}
.is-inactive .tph-plan-status-label { color: var(--mp-muted); }

.tph-plan-name-big {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mp-text);
}
.tph-plan-addon { font-size: 0.9rem; color: var(--mp-teal-light); font-weight: 600; margin-top: 0.3rem; }
.tph-plan-billing { font-size: 0.8rem; color: var(--mp-muted); margin-top: 0.5rem; }

/* ── 残回数タイル ─────────────────────────────────────────────────────────── */
.tph-remaining-cards { display: flex; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.tph-remaining-card {
  background: var(--mp-white);
  border: 1px solid var(--mp-sand-dark);
  border-top: 3px solid var(--mp-teal);
  border-radius: 12px;
  padding: 1.1rem 1.6rem;
  text-align: center;
  min-width: 110px;
  box-shadow: var(--mp-shadow-sm);
}
.tph-remaining-card.tph-choreo { border-top-color: var(--mp-coral); }
.tph-remaining-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--mp-teal);
}
.tph-remaining-card.tph-choreo .tph-remaining-num { color: var(--mp-coral); }
.tph-remaining-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-muted);
  margin-top: 0.4rem;
}

/* ── 回数券 ───────────────────────────────────────────────────────────────── */
.tph-ticket-list { margin-bottom: 1.2rem; }
.tph-ticket-list h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mp-muted);
  margin-bottom: 0.5rem;
}
.tph-ticket-card {
  /* 2026-07-19: 1行目「○回券 残n回」/ 2行目「有効期限」の2行構成に
     （1行詰め込みだと狭い画面で有効期限が変な位置で折れていた） */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  background: var(--mp-sand);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}
.tph-ticket-type { font-weight: 700; color: var(--mp-text); }
.tph-ticket-remaining { color: var(--mp-coral); font-weight: 700; }
/* 有効期限は必ず2行目に（flex-basis 100%で改行） */
.tph-ticket-expire { color: var(--mp-muted); flex-basis: 100%; font-size: 0.78rem; }

/* ── アクション ───────────────────────────────────────────────────────────── */
.tph-plan-actions { display: flex; flex-direction: column; gap: 0.6rem; max-width: 340px; }

/* ── ボタン ───────────────────────────────────────────────────────────────── */
.tph-btn {
  display: block;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background var(--mp-trans), transform var(--mp-trans), box-shadow var(--mp-trans);
}
.tph-btn-primary { background: var(--mp-teal); color: #fff; }
.tph-btn-primary:hover { background: var(--mp-teal-light); transform: translateY(-2px); box-shadow: var(--mp-shadow-md); }
.tph-btn-outline { background: transparent; color: var(--mp-teal); border: 1px solid var(--mp-teal); }
.tph-btn-outline:hover { background: rgba(10,61,92,0.06); }
.tph-btn-coral { background: var(--mp-coral); color: #fff; }
.tph-btn-coral:hover { background: var(--mp-coral-dark); transform: translateY(-2px); box-shadow: var(--mp-shadow-md); }

/* ── 決済完了バナー（?tph_checkout=success 2026-07-20）──────────────────── */
.tph-mp-paid-banner {
  background: #eaf6ef;
  border: 2px solid var(--mp-teal);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin: 1rem 0 1.4rem;
  text-align: center;
}
.tph-mp-paid-banner__title {
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 0.4rem;
  color: var(--mp-teal);
}
.tph-mp-paid-banner p { margin: 0 0 0.6rem; font-size: 0.9rem; }
.tph-mp-paid-banner .tph-btn { margin-top: 0.2rem; }

/* ── プロフィールフォーム ─────────────────────────────────────────────────── */
.tph-profile-section { display: flex; flex-direction: column; gap: 1.2rem; }
.tph-profile-card {
  background: var(--mp-white);
  border: 1px solid var(--mp-sand-dark);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--mp-shadow-sm);
}
.tph-profile-card h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--mp-text);
}
.tph-form-row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
/* ⚠️ wpautopがテンプレートの改行位置に<br>を挿入し、flex内で高さ23pxの
   幽霊アイテムになってラベル〜入力欄が37px空いていた（2026-07-19 対策） */
.tph-profile-card br { display: none; }
.tph-form-row label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-muted);
}
.tph-input {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--mp-sand-dark);
  border-radius: var(--tph-radius-sm);
  font-size: 0.95rem;
  background: #fff;
  transition: border-color var(--mp-trans), box-shadow var(--mp-trans);
  width: 100%;
  max-width: 400px;
  /* width:100%＋content-boxだとpadding/border分カードからはみ出す（2026-07-19） */
  box-sizing: border-box;
}
.tph-profile-card .tph-btn { box-sizing: border-box; max-width: 100%; }
.tph-input:focus { border-color: var(--mp-teal); outline: none; box-shadow: 0 0 0 3px rgba(10,61,92,0.1); }
/* リマインダー受信トグル（2026-07-20）: 通常のラベル（極小・大文字化）を打ち消す */
.tph-form-row--checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mp-text);
  cursor: pointer;
}
.tph-form-row--checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--mp-teal); }

.tph-form-msg { margin-top: 0.5rem; font-size: 0.85rem; min-height: 1.2em; }
/* メッセージが空の間は場所を取らない（カード下部の無駄な余白対策 2026-07-19） */
.tph-form-msg:empty { min-height: 0; margin-top: 0; }
/* ログアウト: カード内で全幅センター表示 */
.tph-profile-card > .tph-btn-outline {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
/* マイページはスマホでの下余白を圧縮（main標準の96pxは間延び） */
@media (max-width: 600px) {
  main.wp-block-group:has(.tph-mp-hero) { padding-bottom: 2rem !important; }
}
.tph-form-msg.success { color: var(--mp-teal-light); }
.tph-form-msg.error   { color: var(--mp-coral); }

/* ── ログインプロンプト / 空状態 ──────────────────────────────────────────── */
.tph-mp-login-notice { text-align: center; padding: 3rem; color: var(--mp-muted); }
.tph-mp-empty { text-align: center; padding: 2rem; color: var(--mp-muted); }
.tph-mp-empty-sub { font-size: 0.875rem; color: var(--mp-muted); }

/* ─── 振り返り動画タブ ─────────────────────────────────────────────────────── */
.tph-recap-list { display: flex; flex-direction: column; gap: 1rem; }
.tph-recap-item {
  border: 1px solid var(--mp-sand-dark);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--mp-white);
  box-shadow: var(--mp-shadow-sm);
}
.tph-recap-item.tph-recap-urgent { border-left: 3px solid var(--mp-coral); }
.tph-recap-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.tph-recap-info { display: flex; flex-direction: column; gap: 0.25rem; }
.tph-recap-lesson { font-weight: 600; font-size: 0.95rem; color: var(--mp-text); }
.tph-recap-date { font-size: 0.8rem; color: var(--mp-muted); }
.tph-recap-countdown {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mp-amber);
  white-space: nowrap;
}
.tph-recap-urgent .tph-recap-countdown { color: var(--mp-coral); }
.tph-recap-toggle-btn { margin-top: 0.75rem; font-size: 0.8rem !important; cursor: pointer; }
.tph-recap-player { margin-top: 0.75rem; }

/* ── 追加オプションカード ─────────────────────────────────────────────────── */
.tph-addon-offer {
  background: var(--mp-white);
  border: 1px solid var(--mp-sand-dark);
  border-left: 4px solid var(--mp-coral);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--mp-shadow-sm);
}
.tph-addon-offer.tph-addon-info    { border-left-color: var(--mp-teal); }
.tph-addon-offer.tph-addon-tickets { border-left-color: var(--mp-amber); }
.tph-ticket-btns { display: flex; flex-direction: column; gap: 0.5rem; }
.tph-addon-offer-note { font-size: 0.78rem; color: var(--mp-muted); line-height: 1.5; margin-bottom: 0.8rem; }
.tph-addon-offer-note a { color: var(--mp-teal); }
.tph-addon-offer-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.tph-addon-offer-title { font-size: 0.95rem; font-weight: 700; color: var(--mp-text); }
.tph-addon-offer-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--mp-coral);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
}
.tph-addon-offer-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--mp-coral);
  margin-bottom: 0.4rem;
}
.tph-addon-offer-price small { font-family: 'Source Sans 3', sans-serif; font-size: 0.75rem; font-weight: 400; color: var(--mp-muted); }
.tph-addon-offer-desc { font-size: 0.82rem; color: var(--mp-text); line-height: 1.6; margin-bottom: 1rem; }

/* プラン変更案内 */
.tph-plan-notice {
  background: var(--mp-sand);
  border-left: 3px solid var(--mp-teal);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 0.82rem;
  color: var(--mp-text);
  line-height: 1.6;
}
.tph-plan-notice p { margin: 0 0 0.5rem; font-weight: 600; color: var(--mp-text); }
.tph-plan-notice ul { margin: 0; padding-left: 1.2rem; }
.tph-plan-notice li { margin-bottom: 0.3rem; }
.tph-plan-notice a { color: var(--mp-teal); }

/* ── レスポンシブ：モバイル ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tph-mp-hero { padding: 0 1.3rem 1.3rem; } /* 上端はアバターがかぶるため0のまま */
  .tph-plan-actions { max-width: 100%; box-sizing: border-box; }
  .tph-plan-actions .tph-btn { width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }
  .tph-recap-header { flex-direction: column; gap: 0.5rem; }
  /* 残回数カード：2枚（Basic/振付）を等幅で横並びに（min-width:110pxのままだと折り返して縦積みになる） */
  .tph-remaining-cards { flex-wrap: nowrap; gap: 0.8rem; }
  .tph-remaining-card { flex: 1 1 0; min-width: 0; padding: 1rem 0.5rem; }
  /* 追加オプションの回数券ボタン：文言を1行に収める（縮小はclampで画面幅に追従） */
  .tph-addon-offer { padding: 1.1rem 1rem; }
  .tph-ticket-btns .tph-btn {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-size: clamp(0.6rem, 3.2vw, 0.8rem);
    padding: 0.8rem 0.4rem;
  }
}

/* ── ウェルカムモーダル（初回ログイン時のみ・2026-07-14） ─────────────────── */
.tph-mp-welcome {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  transition: opacity 0.25s ease;
}
.tph-mp-welcome.is-closing { opacity: 0; pointer-events: none; }
.tph-mp-welcome__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 42, 0.55);
  backdrop-filter: blur(2px);
}
.tph-mp-welcome__card {
  position: relative;
  background: var(--tph-white, #FAF6EE);
  border-radius: var(--tph-radius-md, 12px);
  box-shadow: var(--tph-shadow-lg, 0 16px 40px rgba(10,61,92,0.1));
  max-width: 420px;
  width: 100%;
  padding: 2rem 1.8rem 1.6rem;
  animation: tphWelcomeIn 0.3s ease;
}
@keyframes tphWelcomeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tph-mp-welcome__card { animation: none; }
  .tph-mp-welcome { transition: none; }
}
.tph-mp-welcome__greeting {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tph-coral, #C8503A);
  margin: 0 0 0.3rem;
  text-align: center;
}
.tph-mp-welcome__title {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--tph-text, #1a2a3a);
  text-align: center;
  margin: 0 0 1.4rem;
}
.tph-mp-welcome__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tph-mp-welcome__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tph-text, #1a2a3a);
}
.tph-mp-welcome__list li b { font-size: 0.92rem; }
.tph-mp-welcome__list .tph-mp-card__ico { font-size: 1.55rem; flex-shrink: 0; margin-top: 0.1rem; }
.tph-mp-welcome__list .tph-mp-card__ico--svg { color: var(--tph-teal, #0A3D5C); }
.tph-mp-welcome__start { width: 100%; }

/* モーダル表示中はPWAインストールバナーを出さない（閉じたら出られる） */
body.tph-welcome-open #tph-pwa-banner { display: none !important; }

/* ── 管理画面（wp-admin） ─────────────────────────────────────────────────── */
.tph-admin-wrap .tph-admin-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.tph-status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.tph-status-active   { background: #e8f5e9; color: #2e7d32; }
.tph-status-inactive { background: #f5f5f5; color: #888; }
.tph-adjust-inline { display: flex; align-items: center; gap: 1rem; padding: 0.8rem; background: #f9f6f0; border-radius: 8px; }

/* ── 認証系画面の共通ロゴ（login/join/reset・wp-loginと統一・2026-07-17） ── */
.tph-auth-logo {
  text-align: center;
  margin: 0 0 16px;
}
.tph-auth-logo a {
  position: relative;
  display: inline-block;
  border-radius: 50%;
}
.tph-auth-logo img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 4px 16px rgba(10, 61, 92, 0.15);
  display: block;
}

/* 表示時アニメ: 雫が泉に落ちて弾み、波紋が広がる（Te Puna=泉・1回のみ） */
.tph-auth-logo img {
  animation: tphLogoDrop 0.8s ease-out both;
}
.tph-auth-logo a::before,
.tph-auth-logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(10, 61, 92, 0.4);
  opacity: 0;
  pointer-events: none;
  animation: tphLogoRipple 1.1s ease-out 0.4s;
}
.tph-auth-logo a::after {
  border-color: rgba(200, 169, 110, 0.55);
  animation-delay: 0.62s;
}
@keyframes tphLogoDrop {
  0%   { opacity: 0; transform: translateY(-32px) scale(1); }
  45%  { opacity: 1; transform: translateY(0) scale(1.06, 0.92); }
  62%  { transform: translateY(-9px) scale(0.97, 1.04); }
  78%  { transform: translateY(0) scale(1.02, 0.98); }
  90%  { transform: translateY(-2px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes tphLogoRipple {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}
@media (prefers-reduced-motion: reduce) {
  .tph-auth-logo img,
  .tph-auth-logo a::before,
  .tph-auth-logo a::after { animation: none; opacity: 1; }
  .tph-auth-logo a::before,
  .tph-auth-logo a::after { opacity: 0; }
}

/* ── 会員登録フォーム ───────────────────────────────────────────────────────
   ⚠️ 寸法は wp-login.php（tph-core の login_enqueue_scripts）と統一すること。
   カード400px / 角丸16px / padding 48px 40px / 入力欄 12px 14px・角丸8px・#faf8f6 /
   行間10px / ボタン padding 14px・ゴールド #c8a96e                              */
.tph-register-wrap { max-width: 400px; margin: 16px auto 0; }
.tph-register-card {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .tph-register-card { padding: 32px 24px; }
}
.tph-register-title {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  color: #1a2a3a;
  margin: 0 0 6px;
}
.tph-register-subtitle { font-size: 0.85rem; color: #6b5744; text-align: center; margin: 0 0 20px; line-height: 1.7; }
/* 行間・ラベル・入力欄は wp-login.php と同一（10px / 0.85rem / 12px 14px） */
.tph-register-wrap .tph-form-row { margin-bottom: 10px; }
.tph-register-wrap .tph-form-row label {
  display: block;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #6b5744;
  margin-bottom: 4px;
}
.tph-required { color: #C8503A; margin-left: 3px; }
.tph-register-wrap .tph-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d9ccc3;
  border-radius: 8px;
  background: #faf8f6;
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.tph-register-wrap .tph-input:focus {
  outline: none;
  border-color: #c8a96e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200,169,110,0.18);
}
/* 送信ボタン（wp-login のゴールドボタンと同一・文字は改行させず自動縮小） */
.tph-btn-full {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 14px 10px;
  background: #c8a96e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: clamp(0.85rem, 3.8vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}
.tph-btn-full:hover { background: #b8944a; }
.tph-register-login-link { text-align: center; font-size: 0.875rem; color: #6b5744; margin-top: 14px; }
.tph-register-login-link a { color: #6b5744; text-decoration: none; }
.tph-register-login-link a:hover { color: #c8a96e; text-decoration: underline; }
.tph-form-msg.is-error   { color: #C8503A; font-size: 0.85rem; margin: 0.5rem 0; }
.tph-form-msg.is-success { color: #1e6b4a; font-size: 0.85rem; margin: 0.5rem 0; }