/**
 * ねいろクレイ コンポーネント
 * すべての立体感は tokens.css のクレイレシピ経由。個別の box-shadow 直書き禁止。
 */

/* ============ ヘッダー ============ */
.site-header {
  position: sticky;
  top: var(--space-3);
  z-index: var(--z-header);
  width: min(100% - var(--space-5) * 2, 1080px);
  margin: var(--space-3) auto 0;
  padding: var(--space-2) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface-clay);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
}

.site-branding a {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/**
 * [hidden] を効かせ直す(パケットP2-e)。
 *
 * 【なぜ要るのか】ブラウザ既定の `[hidden] { display: none }` は
 * **UA起源で詳細度0**なので、こちらが `display: inline-flex` などを
 * 書いた時点で負ける。`el.hidden = true` としても消えない、という形で
 * 出る ── 実際に「ホーム画面に追加」ボタンが、押しても何も起きない
 * 状態で Firefox に出ていた(あの環境では出す条件を満たしていないのに、
 * hidden が効かず残っていた)。読み込み中の表示でも同じことを踏んでいる。
 *
 * ここは display を指定しているクラスのうち、hidden も使うものだけを
 * 名指しで戻す。**全称セレクタで !important を撒かない** ── .site-nav は
 * 「モバイルでは hidden、デスクトップでは display:flex で見せる」という
 * 作りに依存していて(すぐ下のコメント)、一律に消すと壊れる。
 */
.clay-btn[hidden],
.play-btn[hidden],
.chip[hidden] {
  display: none;
}

/* [hidden]属性はサーバー側でモバイルドロワーの初期閉状態として付与している
   (header.php参照)。デスクトップではこのdisplay:flex指定がUAの[hidden]既定値
   (display:none)をカスケード順(UA起源 < author起源)で確実に上書きするため、
   デスクトップの見た目は従来どおり保たれる。モバイル時のみ下記@media内で
   明示的にdisplay:noneへ戻す(ドロワー化)。 */
.site-nav {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ============ ハンバーガーナビ(モバイル表示改善パケットC3) ============ */
/* デスクトップではトグルボタンを隠し、.site-navは従来どおり横並びのまま。 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--ink);
}

/* 開いている間は×に変化(transformはUI操作の直接応答であり、グラブ/チルトの
   罠(keyframesでのtransform)とは別物。ここはtransitionのみでkeyframesは使わない)。 */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-toggle__bar {
  transition: transform var(--dur-base) var(--ease-soft), opacity var(--dur-base) var(--ease-soft);
}

@media (max-width: 640px) {
  .site-header {
    width: min(100% - var(--space-3) * 2, 1080px);
    padding: var(--space-1) var(--space-3);
    gap: var(--space-2);
  }

  .site-branding a {
    font-size: var(--text-base);
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* ドロワー化: ヘッダー直下に縦積みシートとして展開する。 */
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-clay);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-clay);
  }

  .site-nav:not([hidden]) {
    display: flex;
  }

  .site-nav .clay-btn {
    width: 100%;
  }

  /* ペアカードの狭幅調整はファイル末尾の「狭幅のペアカード」ブロックへ移した。
   * ここに置くと .clay-card / .pair-orb / .song-disc の基本ルール(後方に定義)
   * と詳細度が同じで、ソース順により基本ルールが勝ってしまい無効化されるため。 */
}

/* ============ クレイカード ============ */
.clay-card {
  background: var(--surface-clay);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
  padding: var(--space-5);
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-soft);
}

.clay-card--hoverable:hover {
  transform: translateY(-3px) rotate(-0.2deg);
  box-shadow: var(--shadow-clay-hover);
}

/* ============ ボタン ============ */
.clay-btn {
  --btn-bg: var(--surface-clay);
  --btn-ink: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65em 1.4em;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-quick) var(--ease-spring),
    box-shadow var(--dur-quick) var(--ease-soft),
    background-color var(--dur-quick) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}

.clay-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-clay-hover);
}

.clay-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--shadow-clay-pressed);
}

.clay-btn--primary {
  --btn-bg: linear-gradient(145deg, var(--clay-orange) 0%, var(--clay-orange-deep) 100%);
  --btn-ink: #fff;
}

.clay-btn--agree {
  --btn-bg: linear-gradient(145deg, var(--clay-pink) 0%, var(--clay-pink-deep) 100%);
  --btn-ink: #fff;
}

.clay-btn--hmm {
  --btn-bg: linear-gradient(145deg, var(--clay-sky) 0%, var(--clay-sky-deep) 100%);
  --btn-ink: #fff;
}

.clay-btn--ghost {
  --btn-bg: transparent;
  box-shadow: none;
  border: 2px solid var(--ink-faint);
}

.clay-btn--ghost:hover {
  border-color: var(--action);
  box-shadow: none;
}

.clay-btn--lg {
  font-size: var(--text-lg);
  padding: 0.8em 1.8em;
}

/* 投票ボタンのカウント粒 */
.clay-btn .vote-count {
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  padding: 0 0.6em;
  font-size: var(--text-sm);
}

/* ============ チップ(理由タグ) ============ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2em 0.9em;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-deep);
  border-radius: var(--radius-pill);
  box-shadow: var(--clay-highlight), 2px 3px 6px rgba(214, 166, 122, 0.14);
}

.chip--melody { background: color-mix(in srgb, var(--clay-pink) 45%, white); }
.chip--rhythm { background: color-mix(in srgb, var(--clay-orange) 45%, white); }
.chip--mood   { background: color-mix(in srgb, var(--clay-sky) 45%, white); }
.chip--vocal  { background: color-mix(in srgb, var(--clay-mint) 45%, white); }

/* ============ ティアバッジ ============ */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3em 1em;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
  background: var(--surface-clay);
}

.tier-badge__dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
}

.tier-badge--listener .tier-badge__dot { background: var(--clay-sky); }
.tier-badge--digger .tier-badge__dot { background: var(--clay-mint-deep); }
.tier-badge--curator .tier-badge__dot { background: var(--clay-orange-deep); }
.tier-badge--connoisseur .tier-badge__dot {
  background: linear-gradient(145deg, var(--clay-yellow-deep), var(--clay-pink-deep));
}

/* ============ 入力(検索) ============ */
.clay-input {
  width: 100%;
  padding: 0.85em 1.4em;
  font-family: inherit;
  font-size: var(--text-lg);
  color: var(--ink);
  background: var(--surface);
  border: none;
  border-radius: var(--radius-pill);
  /* 入力は「凹み」: カードの逆レシピ */
  box-shadow:
    inset 3px 4px 8px rgba(214, 182, 150, 0.25),
    inset -2px -2px 6px rgba(255, 255, 255, 0.9);
}

.clay-input::placeholder {
  color: var(--ink-faint);
}

/* ============ 共鳴フィールド(v3: ペアの中核ビジュアル) ============ */
/* 粘土グラブの前提: 画像のネイティブドラッグとテキスト選択を無効化
   (これが無いとポインタジェスチャが乗っ取られて掴めない) */
.pair-card img {
  -webkit-user-drag: none;
  user-select: none;
}

.pair-card.is-grabbed,
.pair-card.is-grabbed * {
  user-select: none;
}

/* 2曲のオーブが物理弦(canvas)で結ばれる。弦の振動はniteru-physics.jsが描画 */
.pair-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.pair-orb {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 132px;
  text-align: center;
  transition: transform var(--dur-slow) var(--ease-spring);
}

/* 曲ディスク: 曲名から決定的に色相が決まるレコード盤。
   アバター画像は「人の顔」に見えて誤解を招いたため置換(UXレビュー2026-07-09) */
.song-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.22), transparent 48%),
    repeating-radial-gradient(circle, transparent 0 3px, rgb(255 255 255 / 0.06) 3px 4px),
    radial-gradient(circle, hsl(var(--disc-hue, 210) 26% 30%), hsl(var(--disc-hue, 210) 32% 17%));
  box-shadow: var(--shadow-clay);
}

/* レコードのセンターラベル: 曲名の頭文字 */
.song-disc__label {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--disc-hue, 210) 72% 84%);
  color: hsl(var(--disc-hue, 210) 48% 28%);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.5);
}

/* センターホール */
.song-disc__label::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--disc-hue, 210) 30% 20%);
  opacity: 0.35;
}

.pair-orb figcaption {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pair-orb__title {
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pair-orb__artist {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ホバーで2曲が引き寄せ合う(共鳴の可視化) */
.pair-card:hover .pair-orb:first-of-type { transform: translateX(7px); }
.pair-card:hover .pair-orb:last-of-type { transform: translateX(-7px); }

/* 投票直後: 2曲が同じ鼓動で脈打つ */
.pair-card.is-resonating .song-disc {
  animation: orb-heartbeat 900ms var(--ease-spring);
}

.pair-string {
  width: 100%;
  height: 72px;
  min-width: 0;
}

/* 人の声としての集計表現 */
.pair-voice {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
}

.pair-voice__resonance {
  color: var(--clay-pink-deep);
  font-weight: 700;
  font-size: var(--text-sm);
}

/* 共鳴度の追い申告スロット(投票後にJSが展開) */
.pair-card__resonance-slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.resonance-slot__ask {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.resonance-slot__thanks {
  margin: 0;
  font-weight: 700;
  color: var(--clay-pink-deep);
}

/* 物理で漂う雫(deco-floatのCSSアニメ版と排他。data-physics付きはJS駆動) */
.deco-drop {
  position: absolute;
  z-index: var(--z-deco);
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
  will-change: transform;
}

/* ============ 類似ペアカード ============ */
.pair-card {
  display: grid;
  gap: var(--space-4);
}

.pair-card__songs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.pair-card__song {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.pair-card__song img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  box-shadow: var(--clay-drop);
  flex-shrink: 0;
}

.pair-card__song-title {
  font-weight: 700;
  font-size: var(--text-base);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pair-card__song-artist {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pair-card__tilde {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--clay-pink-deep);
}

.pair-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pair-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pair-card__meta {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 0;
}

/* 投票UX状態遷移パケット(C3): 投票の遷移マイクロコピー。空のときは
 * レイアウトへ影響を与えない(高さ0)。 */
.pair-card__vote-status {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  min-height: 0;
}

.pair-card__vote-status:empty {
  display: none;
}

/* ============ 曲単位の試聴ミニリンク(UXレビュー2026-07-09) ============ */
.listen-mini {
  display: inline-flex;
  justify-content: center;
  gap: var(--space-2);
}

.listen-mini__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: transform var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-soft);
}

.listen-mini__btn:hover,
.listen-mini__btn:focus-visible {
  transform: translateY(-2px) scale(1.1);
  box-shadow: var(--shadow-clay-hover);
}

.listen-mini__btn:active {
  transform: translateY(0) scale(0.96);
  box-shadow: var(--shadow-clay-pressed);
}

.listen-note {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin: 0;
}

/* ============ 広告スロット(パケットB3) ============ */
/* CLS対策: 広告ユニット・プレースホルダ・サポーター誘導カードのいずれが
   出力されても高さの跳ねが起きないよう最小高さを予約する(実ユニットの
   実寸は可変だが、既定サイズに近い値で近似する)。keyframesでのtransformは
   使わない(オーケストレーター厳守事項)ため、フェードのみで導入する。 */
.ad-slot {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
}

.ad-slot__disclosure {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin: 0;
}

/* ステマ規制のアフィリエイト表示(パケットA4)。1ページに1回、
   実際のリンクの近くに出す。目立たせすぎず、確実に読める大きさで。 */
.affiliate-notice {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}

.affiliate-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ad-slot--upsell {
  background: var(--paper-deep, #f7f0e6);
  border-radius: var(--radius-lg, 16px);
}

.ad-slot__upsell-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ============ 共鳴メーター ============ */
/* 5本の音波バー。表示専用(.resonance-meter)と入力用(.resonance-input)で共用 */
.resonance-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}

.resonance-meter__bar {
  width: 9px;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  box-shadow: inset 1px 1px 3px rgba(214, 182, 150, 0.3);
  transform-origin: bottom;
}

/* 音波らしい高低差 */
.resonance-meter__bar:nth-child(1) { height: 38%; }
.resonance-meter__bar:nth-child(2) { height: 58%; }
.resonance-meter__bar:nth-child(3) { height: 76%; }
.resonance-meter__bar:nth-child(4) { height: 90%; }
.resonance-meter__bar:nth-child(5) { height: 100%; }

.resonance-meter__bar.is-on {
  background: linear-gradient(180deg, var(--clay-pink) 0%, var(--clay-orange-deep) 100%);
  box-shadow: var(--clay-highlight), 2px 3px 6px rgba(236, 138, 166, 0.35);
}

.resonance-meter__bar.is-preview {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--clay-pink) 55%, white) 0%,
    color-mix(in srgb, var(--clay-orange-deep) 55%, white) 100%);
}

.resonance-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.resonance-row__value {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--clay-pink-deep);
}

.resonance-row__label {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

/* 入力用: 触れる場所だと分かる佇まい */
.resonance-input {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow:
    inset 3px 4px 8px rgba(214, 182, 150, 0.22),
    inset -2px -2px 6px rgba(255, 255, 255, 0.9);
  height: 46px;
}

.resonance-input .resonance-meter__bar {
  width: 14px;
  transition: background var(--dur-quick) var(--ease-soft), transform var(--dur-quick) var(--ease-spring);
}

.resonance-input .resonance-meter__bar:hover {
  transform: scaleY(1.08);
}

.resonance-input:focus-visible {
  outline: 3px solid var(--clay-orange-deep);
  outline-offset: 3px;
}

.resonance-input__label {
  min-width: 4em;
  font-weight: 700;
  color: var(--clay-pink-deep);
  font-size: var(--text-sm);
}

/* 投票済みボタン: 静かな確定感 */
.clay-btn.is-voted {
  box-shadow: var(--shadow-clay-pressed);
  filter: saturate(1.15);
}

/* ============ あなたの耳(ティア進捗ウィジェット) ============ */
/* ヘッダー内ではコンパクトなピルとして振る舞い、ホバーで進捗が見える */
.ear-badge {
  position: relative;
  padding: 0.3em 1em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  cursor: help;
}

.ear-badge__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ear-badge__icon { font-size: 1em; }

.ear-badge__progress {
  width: 64px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  box-shadow: inset 1px 1px 3px rgba(214, 182, 150, 0.3);
  overflow: hidden;
}

.ear-badge__progress-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--clay-mint) 0%, var(--clay-orange-deep) 100%);
  transition: width var(--dur-slow) var(--ease-spring);
}

.ear-badge__go {
  display: none;
}

.ear-badge__hint,
.ear-badge__note {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: max-content;
  max-width: 260px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--surface-clay);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay);
  z-index: var(--z-toast);
}

.ear-badge:hover .ear-badge__hint,
.ear-badge:focus-within .ear-badge__hint {
  display: block;
  animation: rise-in var(--dur-quick) var(--ease-soft);
}

/* ============ 通知ベル ============ */
/* パーツはclay-cardクラスを持つが、ヘッダー内ではカード意匠を打ち消して
   コンパクトなベル+ドロップダウンとして振る舞わせる */
.niteru-notif {
  position: relative;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.niteru-notif__toggle {
  position: relative;
  padding: 0.5em 0.8em;
}

.niteru-notif__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.5em;
  padding: 0 0.35em;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, var(--clay-pink) 0%, var(--clay-pink-deep) 100%);
  border-radius: var(--radius-pill);
  box-shadow: var(--clay-drop);
  animation: pop var(--dur-base) var(--ease-spring);
}

.niteru-notif__panel {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  width: min(320px, 86vw);
  padding: var(--space-4);
  background: var(--surface-clay);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-hover);
  animation: rise-in var(--dur-base) var(--ease-spring);
  z-index: var(--z-toast);
}

.niteru-notif__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.niteru-notif__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
  max-height: 320px;
  overflow-y: auto;
}

.niteru-notif__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.niteru-notif__item.is-unread {
  font-weight: 700;
  background: color-mix(in srgb, var(--clay-yellow) 30%, white);
}

/* 行き先のある通知(コメント等)はリンクになる。項目全体を当たり判定に
   したいので、a を行全体へ広げてから負のマージンで元のpaddingを打ち消す
   (li側のpaddingを消すと、リンクでない通知の見た目が変わってしまう)。 */
.niteru-notif__link {
  display: block;
  margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.niteru-notif__link:hover,
.niteru-notif__link:focus-visible {
  background: color-mix(in srgb, var(--clay-blue) 22%, transparent);
  text-decoration: underline;
}

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

.niteru-notif__empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* ============ 検索サジェスト(discover) ============ */
/* display:grid が hidden属性のUAスタイル(display:none)に勝ってしまい
   常時表示になるバグの修正: hidden時は必ず消す */
.search-suggest[hidden] {
  display: none;
}

.search-suggest {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: var(--z-header);
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  text-align: left;
  background: var(--surface-clay);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-hover);
  display: grid;
  gap: 2px;
}

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-quick) var(--ease-soft), transform var(--dur-quick) var(--ease-spring);
}

.search-suggest__item:hover,
.search-suggest__item.is-active {
  background: color-mix(in srgb, var(--clay-yellow) 35%, white);
  transform: translateX(3px);
}

.search-suggest__kind {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--clay-orange-deep);
  background: color-mix(in srgb, var(--clay-orange) 30%, white);
  border-radius: var(--radius-pill);
  padding: 0 0.7em;
}

.search-suggest__label {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 同名異曲の根治パケットL1: 曲名サジェスト行の副次表示(アーティスト名+年)。
   post-page(.niteru-suggestion)・discoverページ(.search-suggest__item)の
   両方のサジェストから共通利用する(小さく淡い表示で同名異曲を見分けやすくする)。 */
.suggest__title {
  font-weight: 700;
  margin-right: var(--space-2);
}

.suggest__meta {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

/* パケットM2-1: 曲の候補は「このサイトに既にあるもの」と
   「MusicBrainzから来たもの」が混ざる。既にあるものだけに印を付ける。

   MusicBrainz側に印を付けない(=無印を既定にする)のは、そちらが多数派で、
   全部に印が付くと印の意味が消えるため。伝えたいのは「これは誰かが既に
   投稿した曲で、選べば同じ曲としてつながる」の一点。
   同じ曲を別々に登録すると集計が割れるので、ここは見せる価値がある。 */
.suggest__badge {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.suggest__badge--here {
  background: var(--paper-deep);
  color: var(--ink-soft);
}

.search-suggest__go {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease-soft);
}

.search-suggest__item:hover .search-suggest__go,
.search-suggest__item.is-active .search-suggest__go {
  opacity: 1;
}

.search-suggest__empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* 気分チップ+🎲(検索の種) */
.search-seeds {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.search-seeds .chip {
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform var(--dur-quick) var(--ease-spring);
}

.search-seeds .chip:hover {
  transform: translateY(-2px) rotate(-1.5deg);
}

/* ============ 浮遊デコレーション ============ */
.deco-float {
  position: absolute;
  z-index: var(--z-deco);
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

/* ============ セクション ============ */
.section {
  position: relative;
  padding-block: var(--space-7);
}

.section__title {
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============ フッター ============ */
.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  background: var(--paper-deep);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* ============ 原曲バッジ(S2契約の意匠仕上げ) ============ */
.origin-badge {
  display: inline-block;
  justify-self: center;
  padding: 1px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--clay-yellow), var(--clay-yellow-deep));
  color: color-mix(in srgb, var(--clay-yellow-deep) 35%, var(--ink));
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.6), 1px 2px 4px rgba(214, 166, 122, 0.25);
}

/* ============ マイページ/公開プロフィール(共有基盤S3のデザイン層) ============ */

/* --- 名前とID: クレイのネームプレート --- */
.me-header,
.profile-header {
  text-align: center;
}

.me-header__display-name,
.profile-header__display-name {
  font-size: var(--text-hero);
  margin-bottom: var(--space-2);
}

.profile-header__plan-badge {
  margin-left: var(--space-2);
  font-size: 0.7em;
  vertical-align: middle;
}

.me-header__handle,
.profile-header__handle {
  display: inline-block;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.profile-header__tier,
.profile-header__agree {
  color: var(--ink-soft);
  margin-block: var(--space-2);
}

/* --- 「IDを設定」フォーム --- */
[data-handle-form] {
  display: grid;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
  text-align: left;
}

[data-handle-form] p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

[data-handle-input] {
  letter-spacing: 0.06em;
}

[data-handle-result] {
  font-weight: 700;
  color: var(--clay-pink-deep);
}

/* --- ティア進捗: 育つ耳のゲージ --- */
.me-tier {
  text-align: center;
}

.me-tier__label {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 6px 20px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--clay-pink), var(--clay-orange));
  color: color-mix(in srgb, var(--clay-pink-deep) 40%, var(--ink));
  font-weight: 800;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-clay);
}

.me-tier__progress {
  height: 18px;
  max-width: 560px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
  box-shadow: inset 2px 3px 6px rgba(133, 119, 99, 0.25);
  overflow: hidden;
}

.me-tier__progress-bar {
  display: block;
  height: 100%;
  min-width: 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--clay-pink-deep), var(--clay-orange-deep), var(--clay-pink-deep));
  background-size: 200% 100%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--clay-pink-deep) 45%, transparent);
  transition: width 800ms var(--ease-spring);
}

.me-tier__hint {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* --- バッジ棚: 集める楽しさ(達成は輝き、未達成は粘土のまま) --- */
.badge-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.badge-card {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  transition: translate var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-soft);
}

.badge-card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-clay-hover);
}

.badge-card__emoji {
  font-size: 34px;
  line-height: 1.2;
  filter: drop-shadow(0 3px 4px rgba(214, 166, 122, 0.35));
}

.badge-card__name {
  font-weight: 800;
  font-size: var(--text-sm);
}

.badge-card__description {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  line-height: 1.5;
}

.badge-card__progress {
  margin-top: var(--space-1);
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
  color: var(--ink-soft);
}

.badge-card--achieved .badge-card__progress {
  background: color-mix(in srgb, var(--clay-green) 35%, transparent);
  color: var(--clay-green-deep);
}

/* 未達成: まだ固まっていない粘土(進捗は見える=ゴール勾配) */
.badge-card--locked {
  opacity: 0.82;
}

.badge-card--locked .badge-card__emoji {
  filter: grayscale(0.85) opacity(0.55);
}

/* --- 招待コード: チケット風 --- */
.me-invites ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.me-invites__code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 2px dashed color-mix(in srgb, var(--clay-orange-deep) 55%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.me-invites__code code {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.me-invites__code--used {
  opacity: 0.5;
  border-style: solid;
}

.me-invites__code--used code {
  text-decoration: line-through;
}

/* ============ シェア先モーダル(share.js契約 [data-share-fallback]) ============ */
.share-fallback {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(92vw, 420px);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-clay);
  /* 2つ目のshadowが画面全体の暗幕を兼ねる(擬似backdrop) */
  box-shadow: var(--shadow-clay-hover), 0 0 0 100vmax rgba(77, 68, 57, 0.38);
  display: grid;
  gap: var(--space-4);
  text-align: center;
}

.share-fallback[hidden] {
  display: none;
}

.share-fallback__title {
  margin: 0;
  font-weight: 800;
  font-size: var(--text-lg);
}

.share-fallback__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.share-fallback__option {
  display: grid;
  place-items: center;
  padding: 14px 8px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-clay);
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink);
  transition: translate var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-soft);
}

.share-fallback__option:hover,
.share-fallback__option:focus-visible {
  translate: 0 -2px;
  box-shadow: var(--shadow-clay-hover);
}

.share-fallback__option--copy {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--clay-pink), var(--clay-orange));
}

/**
 * 端末のシェアシートを開く(パケットR3)。
 *
 * 【いちばん上に、横いっぱいで】行き先を1つずつ選びたい人と、
 * 端末に入れているアプリへ渡したい人の**両方**がいる。後者にとっては
 * これが唯一の入口なので、探させない位置に置く。
 * 対応していない端末では share.js がそもそも作らない
 * (押しても何も起きないボタンを出さない)。
 */
.share-fallback__option--native {
  grid-column: 1 / -1;
  order: -1;
  gap: var(--space-2);
  grid-auto-flow: column;
  background: var(--paper-deep);
}

.share-fallback__close {
  justify-self: center;
}

/* ============ 投稿成功の祝福(submit-form.js契約 --ok) ============ */
.niteru-submit-result--ok {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: linear-gradient(150deg, #fffefa, color-mix(in srgb, var(--clay-pink) 28%, #fffefa));
  box-shadow: var(--shadow-clay);
  font-weight: 700;
}

.niteru-submit-result--ok [data-share] {
  margin-top: var(--space-3);
}

/* ============ サインアップ「招待状を開ける」(A2デザイン層) ============ */

/* 進捗: 3つの合印が糸でつながる */
.signup-progress {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: flex;
  gap: var(--space-2);
}

.signup-progress li {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--ink-soft) 8%, transparent);
  transition: background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), translate var(--dur-base) var(--ease-spring);
}

.signup-progress li.is-current {
  color: color-mix(in srgb, var(--clay-pink-deep) 55%, var(--ink));
  background: linear-gradient(135deg, var(--clay-pink), var(--clay-orange));
  box-shadow: var(--shadow-clay);
  translate: 0 -2px;
}

.signup-progress li.is-done {
  color: var(--clay-green-deep);
  background: color-mix(in srgb, var(--clay-green) 30%, transparent);
}

.signup-progress li.is-done::after {
  content: ' ✓';
}

/* 検証ステータス(招待コード・ユーザーID共通) */
[data-invite-status],
[data-handle-status] {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

[data-invite-status].is-ok,
[data-handle-status].is-ok {
  color: var(--clay-green-deep);
}

[data-invite-status].is-error,
[data-handle-status].is-error {
  color: color-mix(in srgb, var(--clay-pink-deep) 75%, var(--ink));
}

/* パスワードの合鍵メーター: 共鳴弦が張っていくゲージ */
[data-password-meter] {
  position: relative;
  margin-top: var(--space-2);
  min-height: 22px;
  padding-left: 116px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 22px;
}

[data-password-meter]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 104px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
  box-shadow: inset 1px 2px 3px rgba(133, 119, 99, 0.25);
}

[data-password-meter]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  height: 8px;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--clay-pink-deep), var(--clay-orange-deep));
  transition: width var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-soft);
}

[data-password-meter][data-score="1"]::after { width: 26px; background: var(--clay-pink-deep); }
[data-password-meter][data-score="2"]::after { width: 52px; }
[data-password-meter][data-score="3"]::after { width: 78px; }
[data-password-meter][data-score="4"]::after { width: 104px; background: linear-gradient(90deg, var(--clay-green-deep), var(--clay-green)); }

/* URLプレビュー: 自分の場所ができる予感 */
[data-handle-url-preview] {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 1px 2px 4px rgba(214, 182, 150, 0.22);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--clay-pink-deep) 60%, var(--ink));
}

[data-signup-error] {
  margin: var(--space-3) 0 0;
  font-weight: 700;
  color: color-mix(in srgb, var(--clay-pink-deep) 75%, var(--ink));
}

/* ============ ペア詳細ページ(B2デザイン層) ============ */

/* 理由の内訳: チップ+票数がリズムよく並ぶ */
.pair-page__reasons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.pair-page__reasons-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
}

.pair-page__reasons-count {
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--clay-pink-deep);
  white-space: nowrap;
}

/* 発見者のメモ: ふきだし */
.pair-page__comment {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #fffefa, color-mix(in srgb, var(--clay-yellow) 22%, #fffefa));
  box-shadow: var(--shadow-clay);
}

.pair-page__comment-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.pair-page__comment-body {
  margin: 0;
  line-height: 1.8;
}

/* カード内の要約コメント */
.pair-card__comment {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--clay-yellow) 16%, transparent);
}

/* 曲の深掘りリンク */
.pair-page__songs-nav a {
  display: inline-block;
  margin: 0 var(--space-2) var(--space-2) 0;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink);
  transition: translate var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-soft);
}

.pair-page__songs-nav a:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow-clay-hover);
}

/* ============ 公開プロフィールのショーケース化(B2デザイン層) ============ */
/* accent_hue設定時は --profile-hue で全アクセントが持ち主の色になる
   (未設定は 25 = ねいろクレイの橙に自然フォールバック) */

.profile-bio {
  max-width: 560px;
  margin: var(--space-4) auto;
  line-height: 1.9;
  color: var(--ink);
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.profile-links__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: hsl(var(--profile-hue, 25) 65% 92%);
  box-shadow: var(--shadow-clay);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-sm);
  color: hsl(var(--profile-hue, 25) 45% 32%);
  transition: translate var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-soft);
}

.profile-links__item:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow-clay-hover);
}

.profile-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block: var(--space-4);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* 持ち主の色がにじむヘッダー */
.profile-page {
  /* ヘッダーの光彩(::before)は左右に -10% はみ出して"にじむ"のが狙いだが、
   * そのぶんページ全体が横スクロールしていた(狭幅で実測10px)。にじみは
   * 残したまま端で切る。overflow-x: clip は縦のはみ出し(重ねたディスク等)を
   * 巻き込まないのでこの用途に正しい。 */
  overflow-x: clip;
}

.profile-page .profile-header {
  position: relative;
}

.profile-page .profile-header::before {
  content: '';
  position: absolute;
  inset: -40px -10% auto;
  height: 220px;
  z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, hsl(var(--profile-hue, 25) 75% 88% / 0.65), transparent 75%);
  filter: blur(24px);
  pointer-events: none;
}

.profile-page .profile-header__handle {
  background: hsl(var(--profile-hue, 25) 60% 93%);
  color: hsl(var(--profile-hue, 25) 45% 32%);
}

/* いちばんの自信作: 金の額縁スポットライト */
.profile-pinned > .pair-card {
  position: relative;
  border: none;
}

.profile-pinned > .pair-card::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: calc(var(--radius-lg) + 4px);
  background: linear-gradient(135deg, var(--clay-yellow-deep), var(--clay-pink), hsl(var(--profile-hue, 25) 70% 70%), var(--clay-yellow-deep));
  background-size: 300% 300%;
}

/* ============ /me/settings/ テーマカラー編集(D3バグ修正) ============ */
/* rangeの下地に色相帯グラデーションを敷き、hueだけでも「今どのあたりの色を
   選んでいるか」が一目でわかるようにする(意匠仕上げはF4だが、選択操作が
   直感的である最小限の構造としてここで用意する)。 */
.profile-hue-range {
  width: 100%;
  height: 14px;
  border-radius: var(--radius-pill);
  appearance: none;
  background: linear-gradient(
    to right,
    hsl(0 70% 80%),
    hsl(60 70% 80%),
    hsl(120 70% 80%),
    hsl(180 70% 80%),
    hsl(240 70% 80%),
    hsl(300 70% 80%),
    hsl(360 70% 80%)
  );
}

/* つまみ自体はtransformを使わないよう、標準サイズのままにする
  (このプロジェクトはkeyframesでのtransform使用を禁じているが、これは
  アニメーションではなくthumbの静的な見た目調整なので抵触しない)。 */
.profile-hue-range::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-clay);
  cursor: pointer;
}

.profile-hue-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-clay);
  cursor: pointer;
}

/* テーマカラーのプレビュー: 実際にプロフィールで使う配色式
   (.profile-page .profile-header__handle)と一致させ、「プレビュー詐欺」を
   なくす(D3バグ修正の核心)。JSがbackground/colorをインラインで反映する。 */
.profile-accent-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  padding: 8px 20px;
  min-width: 120px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
  font-weight: 700;
  font-size: var(--text-sm);
}

.profile-accent-preview::before {
  content: 'プレビュー';
}

.settings-locked-feature {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-clay);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* ============ 公開プロフィールのカバー帯・称号(D3構造) ============ */
.profile-cover {
  width: 100%;
  height: 160px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-clay);
}

/* cover_image_url未設定時のフォールバック: 色相グラデーションの帯 */
.profile-cover--fallback {
  background-image: linear-gradient(
    120deg,
    hsl(var(--profile-hue, 25) 75% 88%),
    hsl(calc(var(--profile-hue, 25) + 40) 70% 80%)
  );
}

.profile-title {
  margin: var(--space-2) 0;
  font-weight: 700;
  font-size: var(--text-md);
  color: hsl(var(--profile-hue, 25) 45% 32%);
}

/* ============ F4デザイン層 ============ */

/* ---- ヘッダー(PC): ナビの密度を軽く、ピルの呼吸を保つ ---- */
.site-nav > .clay-btn {
  padding: 0.45em 1.05em;
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  /* ドロワーの触り心地: ゆとりのあるタップ領域+一枚のクレイシートに */
  .site-nav {
    padding: var(--space-4);
    gap: var(--space-2);
  }

  .site-nav > .clay-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75em;
    font-size: var(--text-base);
  }

  /* 耳バッジ・通知ベルの行も中央に整える(F3のTODO解消)。
     【重要】ear-badge/notification-bellはインライン<script>を含むため、
     script/style/templateを必ず除外する(:not(.clay-btn)だけだと<script>に
     display:flexが当たり、JSコードが画面に文字として表示される事故になる —
     2026-07-13に本番で実際に起きた回帰)。 */
  .site-nav > :not(.clay-btn, script, style, template) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--space-1) 0;
  }
}

/* ---- 招待状封筒(登録導線。ホバーで開封、手紙の♪が顔を出す) ---- */
.invite-envelope {
  /* CTAボタンと同じ行に並ばないよう、独立した行として中央に置く
     (inline-flexだと隣のCTAとベースラインが揃わず崩れる — 2026-07-13修正) */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) auto 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-soft);
}

.invite-envelope:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-clay-hover);
}

/* 封筒は4枚の重なりでできている。閉じている絵が成立するには
   **前面パネル(::after)が要る** — これが無いと、フラップの三角形から
   はみ出した手紙の白がそのまま見えてしまう(2026-08-05 修正。
   元は「背景・フラップ・手紙」の3枚しか無く、手紙を隠す面が無かった)。

     背景(この要素)  … 封筒の内側。いちばん奥
     __letter  z:1    … 手紙。閉じているあいだは前面パネルの裏
     ::after   z:2    … 前面パネル。手紙の上端と同じ高さから下を覆う
     __flap    z:3    … 開くフラップ
     __seal    z:4    … 封蝋 */
.invite-envelope__art {
  position: relative;
  width: 64px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 8px;
  /* 内側なので前面より暗い。開いたときに「奥がある」ことが分かる */
  background: linear-gradient(160deg, color-mix(in srgb, var(--clay-pink-deep) 70%, #6d4350), var(--clay-pink-deep));
  box-shadow: var(--clay-drop);
  perspective: 220px;
}

.invite-envelope__art::after {
  content: '';
  position: absolute;
  /* 14px = 手紙の上端(height 46 - bottom 5 - letter 27)。
     ここを揃えないと閉じたときに手紙がのぞく */
  inset: 14px 0 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(160deg, var(--clay-pink), color-mix(in srgb, var(--clay-pink-deep) 65%, var(--clay-pink)));
  z-index: 2;
}

.invite-envelope__flap {
  position: absolute;
  inset: 0 0 auto;
  height: 26px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, var(--clay-pink-deep), var(--clay-pink));
  border-radius: 8px 8px 0 0;
  transform-origin: top center;
  /* 閉じるときは「手紙が戻ってからフラップが降りる」。
     開くときの遅延はホバー側で0に上書きする */
  transition: rotate 460ms var(--ease-spring) 170ms, filter var(--dur-base) var(--ease-soft) 170ms;
  z-index: 3;
}

.invite-envelope:hover .invite-envelope__flap,
.invite-envelope:focus-visible .invite-envelope__flap {
  /* transformではなくrotateプロパティを使う(このリポジトリの規約)。
     205deg にしているのは**手前ではなく奥へ倒すため**。155degだと
     鏡像の角度は同じでも紙が視点側(+z)へ来るので、perspectiveで拡大され、
     封筒より大きな三角が手前にせり出して不自然になる。205degなら
     同じ高さのまま奥(-z)へ倒れ、少し小さく見えて「開いて後ろへ垂れた」
     形になる。 */
  rotate: x 205deg;
  /* 裏返った紙は光が回り込まない。少し落とすと厚みが出る */
  filter: brightness(0.9);
  transition-delay: 0ms;
}

.invite-envelope__letter {
  position: absolute;
  left: 50%;
  bottom: 5px;
  translate: -50% 0;
  width: 32px;
  height: 27px;
  display: grid;
  /* ♪ を上端に寄せる。中央だと、顔を出す高さ(15px)より下に来てしまい、
     開いても前面パネルの裏に隠れたままになる */
  place-items: start center;
  padding-top: 2px;
  background: #fffefa;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  color: var(--clay-pink-deep);
  box-shadow: 0 1px 3px rgb(77 68 57 / 0.18);
  transition: translate 420ms var(--ease-spring);
  z-index: 1;
}

/* フラップが開いたあとに顔を出す。15px = 封筒の口から♪がちょうど読める高さ
   (上げすぎると封筒から抜け落ちたように見える) */
.invite-envelope:hover .invite-envelope__letter,
.invite-envelope:focus-visible .invite-envelope__letter {
  translate: -50% -15px;
  transition-delay: 150ms;
}

.invite-envelope__seal {
  position: absolute;
  left: 50%;
  top: 20px; /* フラップの先端(高さ26px)に封蝋が重なる位置 */
  translate: -50% 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clay-yellow-deep);
  color: #fff;
  font-size: 9px;
  box-shadow: 0 1px 2px rgb(77 68 57 / 0.3);
  z-index: 4;
  /* 封蝋は最後に戻る(フラップが閉じきってから押し直される) */
  transition: opacity var(--dur-base) var(--ease-soft) 330ms, scale var(--dur-base) var(--ease-spring) 330ms;
}

.invite-envelope:hover .invite-envelope__seal,
.invite-envelope:focus-visible .invite-envelope__seal {
  opacity: 0;
  scale: 0.4;
  transition-delay: 0ms;
}

.invite-envelope__text {
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.6;
  font-weight: 700;
}

.invite-envelope__text strong {
  color: var(--clay-pink-deep);
}

.invite-envelope__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

/* ---- ログイン画面「おかえりなさい」 ---- */
.login-page .section {
  max-width: 480px;
  margin-inline: auto;
}

.login-page .clay-card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  overflow: hidden;
}

/* カード上端に共鳴のグラデーション糸 */
.login-page .clay-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--clay-pink-deep), var(--clay-orange-deep), var(--clay-yellow-deep));
}

.login-page label {
  font-weight: 700;
  font-size: var(--text-sm);
}

[data-login-error] {
  margin: 0;
  font-weight: 700;
  color: color-mix(in srgb, var(--clay-pink-deep) 75%, var(--ink));
}

.login-page__signup-cta {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--clay-yellow) 24%, transparent);
  text-align: center;
  font-size: var(--text-sm);
}

/* ============ プロフィール v2(カバー・称号・tone対応) ============ */
/* tone: 0=淡い(既定) 1=鮮やか。彩度・明度に反映して「持ち主の色の濃さ」まで
   自己表現にする(D3のアンロック項目) */
.profile-page {
  --_p-sat: calc(60% + var(--profile-tone, 0) * 24%);
  --_p-bgl: calc(93% - var(--profile-tone, 0) * 7%);
  --_p-inkl: calc(32% - var(--profile-tone, 0) * 6%);
}

.profile-page .profile-header__handle,
.profile-page .profile-links__item {
  background: hsl(var(--profile-hue, 25) var(--_p-sat) var(--_p-bgl));
  color: hsl(var(--profile-hue, 25) 45% var(--_p-inkl));
}

/* カバー帯: 画像 or 持ち主色のグラデーション。下端をページ地に溶かして
   名前がその上に「浮かぶ」 */
.profile-cover {
  position: relative;
  height: 150px;
  border-radius: var(--radius-xl);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-clay);
  margin-bottom: calc(-1 * var(--space-6));
}

.profile-cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 75%;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent, var(--paper));
}

.profile-cover--fallback {
  background: linear-gradient(120deg,
    hsl(var(--profile-hue, 25) var(--_p-sat) 84%),
    hsl(calc(var(--profile-hue, 25) + 45) var(--_p-sat) 90%),
    hsl(var(--profile-hue, 25) var(--_p-sat) 93%));
}

.profile-page .profile-header__display-name {
  position: relative;
}

/* 称号: 持ち主色の小さな勲章 */
.profile-title {
  display: inline-block;
  margin: var(--space-1) 0;
  padding: 3px 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, hsl(var(--profile-hue, 25) 70% 86%), var(--clay-yellow));
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  color: hsl(var(--profile-hue, 25) 45% 30%);
  box-shadow: var(--shadow-clay);
}

/* ============ /support/ コモンズ先行型デザイン(F5) ============ */
.support-hero {
  text-align: center;
}

.support-hero__title {
  font-size: var(--text-hero);
  line-height: 1.35;
  margin-bottom: var(--space-4);
}

.support-hero__lead {
  max-width: 640px;
  margin: 0 auto;
  color: var(--ink-soft);
  line-height: 1.9;
}

/* 3つの約束 */
.commons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.commons-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  text-align: center;
}

.commons-card__emoji {
  font-size: 32px;
  line-height: 1.4;
  display: block;
}

.commons-card h3 {
  margin: var(--space-2) 0;
  font-size: var(--text-base);
}

.commons-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.8;
}

/* プランカード */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  transition: translate var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-soft);
}

.plan-card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-clay-hover);
}

.plan-card--featured {
  background: linear-gradient(165deg, #fffefa, color-mix(in srgb, var(--clay-pink) 22%, #fffefa));
  outline: 3px solid color-mix(in srgb, var(--clay-pink-deep) 55%, transparent);
  outline-offset: -3px;
}

.plan-card__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  padding: 3px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--clay-pink-deep), var(--clay-orange-deep));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: var(--clay-drop);
  white-space: nowrap;
}

.plan-card__badge {
  font-size: 34px;
  line-height: 1.3;
  filter: drop-shadow(0 3px 4px rgba(214, 166, 122, 0.35));
}

.plan-card__name {
  margin: 0;
  font-size: var(--text-lg);
}

/* 目安金額(パケットA4)。名前とうたい文句の間に置く。 */
.plan-card__price {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.plan-card__tagline {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  font-weight: 700;
}

.plan-card__perks {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  align-content: start;
}

.plan-card__perks li::before {
  content: '♪ ';
  color: var(--clay-pink-deep);
  font-weight: 800;
}

.support-page__parity-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-align: center;
}

/* 支援のながれ */
.support-steps {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  max-width: 560px;
}

.support-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  font-size: var(--text-sm);
}

.support-step__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clay-pink), var(--clay-orange));
  color: color-mix(in srgb, var(--clay-pink-deep) 50%, var(--ink));
  font-weight: 800;
}

.support-page__service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* FAQ(details/summaryのクレイアコーディオン) */
.support-faq {
  display: grid;
  gap: var(--space-3);
}

.support-faq__item {
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  padding: var(--space-4) var(--space-5);
}

.support-faq__item summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.support-faq__item summary::-webkit-details-marker {
  display: none;
}

.support-faq__item summary::before {
  content: '♪';
  color: var(--clay-pink-deep);
  margin-right: var(--space-2);
  display: inline-block;
  transition: rotate var(--dur-base) var(--ease-spring);
}

.support-faq__item[open] summary::before {
  rotate: 90deg;
}

.support-faq__item p {
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ============ お気に入り(G1)の意匠 ============ */
/* ⭐ボタン: 押すと金色に灯る */
.pair-card__fav {
  --btn-bg: var(--surface-clay);
}

.pair-card__fav.is-faved,
.pair-card__fav[data-fav-state="1"] {
  --btn-bg: linear-gradient(145deg, var(--clay-yellow) 0%, var(--clay-yellow-deep) 100%);
  --btn-ink: color-mix(in srgb, var(--clay-yellow-deep) 40%, var(--ink));
}

/* リスト選択ミニポップ */
[data-fav-picker] {
  position: absolute;
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay-hover);
  min-width: 180px;
}

[data-fav-picker] button {
  border: none;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: left;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  box-shadow: var(--clay-drop);
}

[data-fav-picker] button:hover {
  background: color-mix(in srgb, var(--clay-yellow) 30%, var(--surface));
}

/* マイページのお気に入りリスト */
.me-favorites__limit {
  display: inline-block;
  padding: 2px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--clay-yellow) 30%, transparent);
  font-weight: 800;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--clay-yellow-deep) 45%, var(--ink));
}

.me-favorites__list {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
}

.me-favorites__list > h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.me-favorites__list > h3 small {
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.me-favorites__list > p .clay-btn {
  padding: 0.35em 0.9em;
  font-size: var(--text-xs);
}

/* 公開プロフィールのお気に入り棚 */
.profile-favorites__list {
  margin-top: var(--space-4);
}

.profile-favorites__list > h3 {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 4px 18px;
  border-radius: var(--radius-pill);
  background: hsl(var(--profile-hue, 25) var(--_p-sat, 60%) var(--_p-bgl, 93%));
  color: hsl(var(--profile-hue, 25) 45% var(--_p-inkl, 32%));
  font-size: var(--text-sm);
  font-weight: 800;
}

/* ============ F6: 投票状態の視覚化 ============ */
/* 選択中: 濃く・少し大きく・チェック付き。もう一方: 淡く退く。
   未投票時(data-my-vote="0")は両方とも従来の等価な見た目 */
.pair-card__actions .clay-btn.is-current {
  outline: 3px solid rgb(255 255 255 / 0.75);
  outline-offset: -5px;
  scale: 1.04;
  filter: saturate(1.15);
}

.pair-card__actions .clay-btn.is-current::before {
  content: '✓ ';
  font-weight: 800;
}

/* 投票済みで選ばれていない側: そっと退く(押せば「変更」できることは
   ホバーで戻る明度で伝える) */
.pair-card__actions[data-my-vote="1"] [data-vote="-1"]:not(.is-current),
.pair-card__actions[data-my-vote="-1"] [data-vote="1"]:not(.is-current) {
  opacity: 0.45;
  filter: saturate(0.4);
}

.pair-card__actions[data-my-vote="1"] [data-vote="-1"]:not(.is-current):hover,
.pair-card__actions[data-my-vote="-1"] [data-vote="1"]:not(.is-current):hover {
  opacity: 1;
  filter: saturate(1);
}

/* マイクロコピーの行 */
.pair-card__vote-status {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--clay-pink-deep);
  min-height: 1.2em;
}

/* ============ F6: ヘッダーの耳バッジ(ただのテキスト感を解消) ============ */
.site-nav .ear-badge {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--surface-clay), color-mix(in srgb, var(--clay-yellow) 25%, #fffefa));
  box-shadow: var(--shadow-clay);
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  min-width: 132px;
  transition: translate var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-soft);
}

.site-nav .ear-badge:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow-clay-hover);
}

.site-nav .ear-badge__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: var(--text-xs);
}

.site-nav .ear-badge__progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
  overflow: hidden;
}

.site-nav .ear-badge__progress-bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--clay-pink-deep), var(--clay-orange-deep));
  transition: width 600ms var(--ease-spring);
}

/* ヘッダー内ではヒントと注釈は隠す(ツールチップ=title属性に委ねる。
   ドロワー(モバイル)では表示スペースがあるため出す) */
.site-nav .ear-badge__hint,
.site-nav .ear-badge__note {
  display: none;
}

@media (max-width: 640px) {
  .site-nav .ear-badge {
    width: 100%;
    min-width: 0;
  }

  /* ドロワーでは耳の進み具合を「バッジの中の一行」として出す。
   * 【バグ修正】F6ではdisplayだけを上書きしていたため、基本ルールの
   * position:absolute(=ホバー時のツールチップ用)が残ったままになり、
   * ヒントがバッジの外へ浮いて通知ベルを覆い隠していた。浮かせずに
   * カードの中へ流し込む。 */
  .site-nav .ear-badge__hint {
    display: block;
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }

  /* ドロワーの他の項目は全て言葉なので、耳バッジにも行き先を書く */
  .site-nav .ear-badge__go {
    display: block;
    margin-top: var(--space-1);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--clay-orange-deep, var(--ink-soft));
  }
}

/* ============ F6: 公開プロフィール「一枚のレコード」再設計 ============ */

/* カバー: 背が高く、没入感のある舞台に */
.profile-page .profile-cover {
  height: 210px;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
}

/* 支援者のカバー: 金のオーラがゆっくり巡る縁 + 封蝋(返礼の可視化) */
.profile-cover--supporter {
  outline: 4px solid transparent;
  box-shadow:
    var(--shadow-clay),
    0 0 0 4px color-mix(in srgb, var(--clay-yellow-deep) 55%, transparent),
    0 0 26px color-mix(in srgb, var(--clay-yellow) 60%, transparent);
}

.profile-cover__seal {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffefa, var(--clay-yellow));
  box-shadow: var(--shadow-clay);
  font-size: 20px;
  z-index: 2;
}

/* 持ち主の大きなレコード盤: カバーの下端に重なる「顔」 */
.profile-disc {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  margin: -58px auto var(--space-3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.22), transparent 48%),
    repeating-radial-gradient(circle, transparent 0 4px, rgb(255 255 255 / 0.06) 4px 5px),
    radial-gradient(circle, hsl(var(--profile-hue, 25) 26% 30%), hsl(var(--profile-hue, 25) 32% 17%));
  box-shadow: var(--shadow-clay-hover), 0 0 0 6px var(--paper);
}

.profile-disc__label {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: hsl(var(--profile-hue, 25) var(--_p-sat, 60%) 84%);
  color: hsl(var(--profile-hue, 25) 48% 28%);
  font-weight: 800;
  font-size: 24px;
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.5);
}

.profile-disc__label::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--profile-hue, 25) 30% 20%);
  opacity: 0.35;
}

/* 統計: 数字が主役のクレイカウンター3枚 */
.profile-page .profile-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
}

.profile-stat {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 128px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
}

.profile-stat__value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: hsl(var(--profile-hue, 25) 45% var(--_p-inkl, 32%));
  line-height: 1.2;
}

.profile-stat__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
}

/* ============ F7: 発見のオーラ(カバー画像URLの後継特典) ============ */
/* --aura-1..6 = 持ち主が発見した曲たちのレコード盤色相(テンプレートが供給)。
   発見が増えるほど色が増える=活動と連動した、世界にひとつのカバー。 */
/* .profile-page .profile-cover の overflow:visible(盤の重なり用)より
   詳細度を上げてクリップする(回転オーラのはみ出し防止 — 2026-07-17実測修正) */
.profile-page .profile-cover--aura,
.profile-cover--aura {
  overflow: hidden;
  background: linear-gradient(120deg,
    hsl(var(--aura-5, 25) 70% 88%),
    hsl(var(--aura-6, 45) 70% 86%));
}

/* 回るオーラ本体(::afterは既存の下端フェードが使用中のため::beforeで) */
.profile-cover--aura::before {
  content: '';
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg,
    hsl(var(--aura-1, 25) 82% 76% / 0.62),
    hsl(var(--aura-2, 90) 82% 78% / 0.55),
    hsl(var(--aura-3, 160) 80% 76% / 0.6),
    hsl(var(--aura-4, 220) 80% 78% / 0.55),
    hsl(var(--aura-5, 280) 80% 77% / 0.58),
    hsl(var(--aura-6, 340) 82% 77% / 0.55),
    hsl(var(--aura-1, 25) 82% 76% / 0.62));
  filter: blur(32px);
  pointer-events: none;
}

/* 創設メンバー: オーラに金の光条が混ざる(はじまりの証) */
.profile-cover--founding.profile-cover--aura::before {
  background: conic-gradient(from 0deg,
    hsl(var(--aura-1, 25) 82% 76% / 0.62),
    hsl(48 94% 72% / 0.65),
    hsl(var(--aura-3, 160) 80% 76% / 0.6),
    hsl(var(--aura-5, 280) 80% 77% / 0.58),
    hsl(48 94% 72% / 0.65),
    hsl(var(--aura-1, 25) 82% 76% / 0.62));
}

/* 「✦ 発見のオーラ」の小さな刻印 */
.profile-cover__aura-hint {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 2;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: rgb(255 254 250 / 0.75);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}

/* ============ F7: お気に入り管理・アカウント・審査中の意匠(J1構造に被せる) ============ */

/* --- トグルスイッチ(公開/非公開): 粘土の玉が転がる --- */
.niteru-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

.niteru-switch__track {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-soft) 22%, transparent);
  box-shadow: inset 2px 3px 5px rgba(133, 119, 99, 0.3);
  transition: background var(--dur-base) var(--ease-soft);
  flex-shrink: 0;
}

.niteru-switch[aria-checked="true"] .niteru-switch__track {
  background: linear-gradient(90deg, var(--clay-green), var(--clay-green-deep));
  box-shadow: inset 1px 2px 4px rgba(60, 110, 70, 0.35);
}

.niteru-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffefa, #f2e8d8);
  box-shadow: var(--clay-drop);
  transition: translate var(--dur-base) var(--ease-spring);
}

.niteru-switch[aria-checked="true"] .niteru-switch__thumb {
  translate: 24px 0;
}

/* --- 危険ボタン(削除・退会): 深呼吸してから押す色 --- */
.clay-btn--danger {
  --btn-bg: transparent;
  --btn-ink: color-mix(in srgb, var(--clay-pink-deep) 80%, var(--ink));
  box-shadow: none;
  border: 2px solid color-mix(in srgb, var(--clay-pink-deep) 55%, transparent);
}

.clay-btn--danger:hover {
  --btn-bg: linear-gradient(145deg, var(--clay-pink), var(--clay-pink-deep));
  --btn-ink: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-clay);
}

/* --- アイコンだけの小さなボタン(✏など) --- */
.clay-btn--icon {
  padding: 0.35em 0.6em;
  font-size: var(--text-sm);
}

/* --- リストブロックと2段階削除確認カード --- */
.me-favorites__list-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.me-favorites__list-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-2);
}

.me-favorites__list-confirm {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #fffefa, color-mix(in srgb, var(--clay-pink) 22%, #fffefa));
  border: 2px solid color-mix(in srgb, var(--clay-pink-deep) 40%, transparent);
  box-shadow: var(--shadow-clay);
  display: grid;
  gap: var(--space-3);
}

/* --- 操作結果の一言ステータス(公開されました🌍 等) --- */
[data-fav-status] {
  display: inline-block;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--clay-green) 28%, transparent);
  color: var(--clay-green-deep);
  font-weight: 800;
  font-size: var(--text-sm);
}

/* --- 新規作成カード: その場に生える --- */
[data-fav-create-card] {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  display: grid;
  gap: var(--space-3);
}

/* --- 審査中バナー(本人にだけ見える発見) --- */
.pair-page__under-review-banner {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #fffefa, color-mix(in srgb, var(--clay-yellow) 30%, #fffefa));
  border: 2px dashed color-mix(in srgb, var(--clay-yellow-deep) 60%, transparent);
  font-weight: 700;
  line-height: 1.8;
}

.pair-page__under-review-banner::before {
  content: '🌱 ';
}

/* --- アカウントページ: 真剣なトーン(装飾控えめ・余白広め) --- */
.account-page .clay-card {
  display: grid;
  gap: var(--space-4);
}

.account-page .section {
  max-width: 560px;
  margin-inline: auto;
}

/* 退会セクション: 楽しさを消し、静かな赤の縁取りで重さを伝える */
.account-page .account-page__danger,
.account-page [data-delete-account-section] {
  border: 2px solid color-mix(in srgb, var(--clay-pink-deep) 45%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: #fffefa;
}

/* ============ F8: 回遊導線の意匠(K1のリンク構造に被せる) ============
 * K1はSEO/クローラビリティのためにカード内へ多数の<a>を追加した。素のままだと
 * ブラウザ既定の青+下線が「ねいろクレイ」の世界を壊すため、リンクである手触り
 * (触れると反応する)は残しつつ、粘土の質感に馴染ませる。
 * keyframesではtransformを使わない鉄則に従い、動きはtranslateプロパティで持つ。
 */

/* --- カード内の曲名・アーティスト名: ディスクの下の"名札"が触れると応える --- */
.pair-orb__title,
.pair-orb__artist {
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-soft),
    text-shadow var(--dur-quick) var(--ease-soft);
}

a.pair-orb__title {
  color: var(--ink);
}

a.pair-orb__artist {
  color: var(--ink-soft);
}

a.pair-orb__title:hover,
a.pair-orb__title:focus-visible {
  color: var(--clay-pink-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--clay-pink-deep) 45%, transparent);
}

a.pair-orb__artist:hover,
a.pair-orb__artist:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
}

/* --- 理由チップ: 押せる粘土の粒(同じ理由の発見一覧へ) --- */
a.chip {
  text-decoration: none;
  transition: box-shadow var(--dur-quick) var(--ease-soft),
    translate var(--dur-quick) var(--ease-spring);
}

a.chip:hover,
a.chip:focus-visible {
  translate: 0 -2px;
  box-shadow: var(--clay-highlight), 3px 5px 10px rgba(214, 166, 122, 0.22);
}

a.chip:active {
  translate: 0 0;
  box-shadow: var(--clay-highlight), 1px 2px 4px rgba(214, 166, 122, 0.18);
}

/* --- 「この発見を見る →」: カードから詳細へ渡る橋。矢印が先に歩き出す --- */
.pair-card__permalink {
  margin: var(--space-3) 0 0;
  text-align: right;
}

.pair-card__permalink a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15em 0.2em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-quick) var(--ease-soft),
    border-color var(--dur-quick) var(--ease-soft);
}

.pair-card__permalink a::after {
  content: '→';
  transition: translate var(--dur-base) var(--ease-spring);
}

.pair-card__permalink a:hover,
.pair-card__permalink a:focus-visible {
  color: var(--clay-pink-deep);
  border-bottom-color: color-mix(in srgb, var(--clay-pink-deep) 40%, transparent);
}

.pair-card__permalink a:hover::after,
.pair-card__permalink a:focus-visible::after {
  translate: 4px 0;
}

/* --- パンくず: 歩いてきた道の小さな足あと --- */
.breadcrumbs {
  margin-bottom: var(--space-3);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: '›';
  color: var(--ink-faint);
  font-weight: 700;
}

.breadcrumbs__link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-quick) var(--ease-soft),
    border-color var(--dur-quick) var(--ease-soft);
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink-faint);
}

.breadcrumbs__current {
  color: var(--ink);
  font-weight: 600;
}

/* --- ページ送り: 次の一歩を誘う --- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---- 継ぎ足し読み込み(パケットU1-d) ---- */

/* 読み込み中は押せない見た目にして、二度押しを防ぐ */
.pager__next.is-loading {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* 最後まで読んだときの合図。ボタンの席をそのまま引き継ぐので、
   一覧の下が急に空白になって「壊れた?」と思われない */
.pager__end {
  margin: 0;
  padding: 0.3em 1em;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* 読み上げ専用。見た目には出さないが、DOMからは消さない */
.pager__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pager__current {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: 0.3em 1em;
  background: var(--paper-deep);
  border-radius: var(--radius-pill);
  box-shadow: var(--clay-highlight);
}

.pager__next {
  order: 3;
}

/* --- カードそのものがリンクのとき: 中の文字は本文色のまま(青下線を出さない) ---
 * アーティストページの曲一覧・ランキングの表彰台など、<a class="clay-card"> と
 * してカード全体を押せるようにしている箇所が既定リンク色に染まるのを防ぐ。
 * 触れたときはカードが持ち上がる既存のホバーで応えるので、下線は不要。 */
a.clay-card {
  color: inherit;
  text-decoration: none;
}

a.clay-card:focus-visible {
  outline: 2px solid var(--clay-pink-deep);
  outline-offset: 3px;
}

/* --- アーティストページの曲一覧: ディスクが並ぶ棚 --- */
.artist-page__song {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.artist-page__song .song-disc {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.artist-page__song-title {
  font-weight: 600;
  line-height: 1.35;
}


/* ============ F9: マイページ(/me/)を「自分の作業場」として立て直す ============
 * 名前の下にテキストリンクが3つ縦に並ぶだけの貧相なヘッダーだったので、
 * 会員証(IDカード)に組み替える。いちばん見せたい「公開プロフィール」への
 * 導線を主役に置き、設定系はその隣に控えさせる。
 */

.me-id-card {
  /* .me-header は中央寄せ(公開プロフィールと共通)だが、会員証の中は
   * 左揃えで読ませたいので、このカードの中だけ流れを戻す。 */
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'disc body'
    'actions actions';
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5);
}

.me-id-card__disc {
  grid-area: disc;
  /* .profile-disc はカバーに重ねる前提の負マージンを持つので、ここでは解除する */
  width: 84px;
  height: 84px;
  margin: 0;
  box-shadow: var(--shadow-clay), 0 0 0 5px var(--paper);
}

.me-id-card__disc .profile-disc__label {
  width: 40px;
  height: 40px;
  font-size: 19px;
}

.me-id-card__body {
  grid-area: body;
  display: grid;
  /* 既存の .me-header__handle は inline-block のピルなので、grid の既定
   * (stretch)のままだと横いっぱいに伸びて帯になってしまう。 */
  justify-items: start;
  gap: 2px;
  min-width: 0;
}

.me-id-card .me-header__display-name {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.me-id-card .me-header__handle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  font-family: var(--font-mono, inherit);
}

.me-id-card__tier {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.me-id-card__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* 「公開プロフィールを見る」は自分の見せ場へ渡る扉。矢印がそっと先へ出る。 */
.me-id-card__view::after {
  content: '→';
  margin-left: var(--space-1);
  transition: translate var(--dur-base) var(--ease-spring);
}

.me-id-card__view:hover::after,
.me-id-card__view:focus-visible::after {
  translate: 4px 0;
}

/* --- ID未設定のときの案内(URLの見本を添えて、決める気にさせる) --- */
.me-handle-form {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.me-handle-form__lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.me-handle-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.me-handle-form__prefix {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

.me-handle-form__row .clay-input {
  flex: 1 1 12ch;
  min-width: 12ch;
}

/* --- 数字が主役の手応え(公開プロフィールと同じ言語で揃える) --- */
.me-stats {
  margin-block: 0 var(--space-5);
  justify-content: flex-start;
}

.me-tier__card {
  display: grid;
  /* .me-tier__label も inline-block のピル。伸ばさず左に置く。 */
  justify-items: start;
  gap: var(--space-2);
  text-align: left;
}

.me-tier__card .section__title {
  margin: 0;
}

.me-tier__card .me-tier__label {
  margin: 0;
}

/* カードの中では進捗バーは中央寄せせず、幅いっぱいに伸ばす */
.me-tier__card .me-tier__progress {
  justify-self: stretch;
  max-width: none;
  margin-inline: 0;
}

.me-tier__card .me-tier__hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* 進捗が数%でも「始まっている」ことが伝わる最小の芽を残す */
.me-tier__card .me-tier__progress-bar {
  min-width: 18px;
}

/* ============ F9: お気に入りリストの操作を1本のバーに集約する ============
 * 名前・公開設定・件数・削除が縦にばらけていて「今どういう状態か」「どこを
 * 触ると変わるのか」が読めなかった。左に中身、右に操作、と役割で分ける。
 */

.me-favorites__list {
  margin-bottom: var(--space-6);
}

.me-favorites__list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  margin-bottom: var(--space-4);
}

.me-favorites__list-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.me-favorites__list-icon {
  font-size: var(--text-lg);
}

.me-favorites__list-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.me-favorites__list-meta {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: 0.1em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
}

.me-favorites__list-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.me-favorites__visibility {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-decoration: none;
}

.me-favorites__visibility-label {
  font-weight: 700;
}

/* 鍵つきの公開状態: 無料会員には「変えられない」ことと、変える道を同時に示す */
.me-favorites__visibility--locked {
  padding: 0.2em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  box-shadow: var(--clay-highlight);
  transition: box-shadow var(--dur-quick) var(--ease-soft),
    translate var(--dur-quick) var(--ease-spring);
}

.me-favorites__visibility--locked:hover,
.me-favorites__visibility--locked:focus-visible {
  translate: 0 -2px;
  box-shadow: var(--clay-highlight), 3px 5px 10px rgba(214, 166, 122, 0.22);
}

.me-favorites__list-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.me-favorites__list-empty {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.me-favorites__inline-star {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.6em;
  margin-inline: 2px;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  box-shadow: var(--clay-highlight);
  font-weight: 700;
}

/* 削除は絵文字アイコンだと環境によって豆腐になり、しかも意味も伝わらない。
 * 言葉で書き、赤は控えめに(押す前に一度考えてほしいが、脅かしたくはない)。 */
.me-favorites__delete {
  padding: 0.25em 1em;
  font-size: var(--text-sm);
}

/* 名前のインライン編集中(me-favorites.jsが差し込むwrapper)も横一列に保つ */
[data-fav-list-rename-wrapper] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

[data-fav-list-rename-wrapper] .clay-input {
  width: 16ch;
}


/* ============ F9: 発見の星座(公開プロフィールの主役) ============
 * その人の発見が「かたち」になって漂う一枚の星図。粘土の器の上に置かれた
 * 星空、というつもりで、器(stage)は淡い凹み、中身(canvas)は自由に泳がせる。
 */

.profile-constellation__lead {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.profile-constellation__hint {
  display: inline-block;
  padding: 0.1em 0.8em;
  margin-left: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  box-shadow: var(--clay-highlight);
  font-weight: 700;
}

.profile-constellation__stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(var(--profile-hue, 25) 46% 95%), transparent 62%),
    var(--surface-clay);
  box-shadow: var(--clay-highlight), inset 3px 5px 12px rgba(133, 119, 99, 0.16);
}

/* 星がまたたく紙の質感(canvasの下に敷く。動かないので負荷ゼロ) */
.profile-constellation__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 26%, rgb(255 255 255 / 0.9), transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(1.5px 1.5px at 44% 72%, rgb(255 255 255 / 0.75), transparent),
    radial-gradient(1.5px 1.5px at 86% 62%, rgb(255 255 255 / 0.6), transparent),
    radial-gradient(1.5px 1.5px at 28% 88%, rgb(255 255 255 / 0.65), transparent);
  pointer-events: none;
}

.profile-constellation__canvas {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 460px);
  touch-action: none; /* 粒をドラッグするときにページがスクロールしないように */
}

/* テキスト索引: 星図に触れない人・読み上げ・クローラのための到達経路。
 * 目立たせすぎず、しかし隠さない(見えない導線はSEOでも回遊でも損)。 */
.profile-constellation__index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}

.profile-constellation__index a {
  display: inline-block;
  padding: 0.2em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-soft),
    translate var(--dur-quick) var(--ease-spring);
}

.profile-constellation__index a:hover,
.profile-constellation__index a:focus-visible {
  color: var(--ink);
  translate: 0 -2px;
}


/* ============ M1: 広告とアフィリエイト導線を「自然に」置く ============
 * 見出しの上にバナーを貼るのではなく、読んでいるカードの列と同じリズムの中に
 * 1枚だけ混ぜる。広告であることは隠さない(隠すと信頼を損なうし規約違反)が、
 * 記事本体より一段静かなトーンにして、押しのけないようにする。
 */

/* 列の一員として並ぶが、発見カードより一段静か。紙にそっと敷いた凹みにして、
 * 「本文ではないが隠してもいない」ことが一目で分かるようにする。 */
.ad-in-feed {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--paper-deep) 55%, transparent);
  box-shadow: inset 2px 3px 8px rgba(133, 119, 99, 0.1);
}

/* 「広告」であることは必ず読める場所に置く(隠すのは信頼も規約も損なう) */
.ad-in-feed::before {
  content: '広告';
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.ad-in-feed > * {
  margin: 0;
}

.ad-in-feed .ad-slot {
  padding: 0;
  min-height: 0;
}

/* --- 「もっと聴く」パネル: 気持ちが高まった場所に置く聴く/買う導線 --- */
.listen-panel {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
}

.listen-panel__title {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  font-size: var(--text-base);
}

.listen-panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.listen-panel__note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}


/* ============ O1: 支援特典の状態(/me/) ============
 * 期限はDBにあるのにどの画面にも出ておらず、気づかないうちに切れる作りだった。
 * 「あと何日」を主役の数字にし、更新の道をその場に置く。感謝が先、督促は後。
 */

.me-plan__card {
  display: grid;
  gap: var(--space-2);
  border: 2px solid color-mix(in srgb, var(--clay-orange-deep) 30%, transparent);
}

/* 残り7日を切ったら縁の色を上げる(不安にさせない範囲で気づけるように) */
.me-plan__card--soon {
  border-color: color-mix(in srgb, var(--clay-pink-deep) 55%, transparent);
}

.me-plan__eyebrow {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.me-plan__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
}

.me-plan__term {
  margin: 0;
  font-size: var(--text-base);
  color: var(--ink-soft);
}

.me-plan__days {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--clay-orange-deep);
}

.me-plan__term--soon .me-plan__days,
.me-plan__term--soon {
  color: var(--clay-pink-deep);
}

.me-plan__until {
  font-size: var(--text-sm);
}

.me-plan__renew {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--ink-faint) 35%, transparent);
}

.me-plan__renew-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.me-plan__renew-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* --- O1: お気に入りの整理(カードごとの操作) ---
 * 整理の道具はカードの下に、本体より一段静かに置く。発見そのものより
 * 目立ってはいけないが、必要なときに迷わず見つかる位置に。 */
.me-favorites__item {
  display: grid;
  gap: var(--space-2);
}

.me-favorites__item-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.me-favorites__move {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.me-favorites__move-label {
  white-space: nowrap;
}

.me-favorites__move-select {
  padding: 0.25em 0.7em;
  font-size: var(--text-sm);
  width: auto;
  min-width: 12ch;
}

.me-favorites__item-remove {
  padding: 0.25em 1em;
  font-size: var(--text-sm);
}

.me-favorites__item-status {
  color: var(--clay-pink-deep);
}


/* ============ R1: 未ログインの人への招待「まだ鳴っていない」 ============
 * 壁ではなく舞台。押した発見の色をそのまま持ち込み、2枚の盤が寄ってきて
 * あいだに弦が生まれる。閉じれば元の場所に戻れることも明示する。
 */

.auth-invite {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 520px);
  overflow: visible;
}

.auth-invite::backdrop {
  background: rgb(77 68 57 / 0.42);
  backdrop-filter: blur(6px);
  animation: auth-invite-veil var(--dur-base) var(--ease-soft) both;
}

.auth-invite__card {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay-hover), 0 24px 60px rgb(133 119 99 / 0.28);
  text-align: center;
  animation: auth-invite-rise var(--dur-slow) var(--ease-spring) both;
}

.auth-invite__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: var(--clay-highlight);
}

/* --- 舞台: 2枚の盤と、そのあいだに生まれる弦 --- */
.auth-invite__stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.auth-invite__disc {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: var(--shadow-clay);
}

.auth-invite__disc::after {
  content: '';
  display: block;
  width: 34%;
  height: 34%;
  margin: 33%;
  border-radius: 50%;
  background: rgb(255 253 248 / 0.85);
}

.auth-invite__disc--a {
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.25), transparent 48%),
    radial-gradient(circle, hsl(var(--invite-hue-a, 340) 34% 44%), hsl(var(--invite-hue-a, 340) 38% 20%));
  animation: auth-invite-come-left var(--dur-slow) var(--ease-spring) both;
}

.auth-invite__disc--b {
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.25), transparent 48%),
    radial-gradient(circle, hsl(var(--invite-hue-b, 28) 34% 44%), hsl(var(--invite-hue-b, 28) 38% 20%));
  animation: auth-invite-come-right var(--dur-slow) var(--ease-spring) both;
}

.auth-invite__string {
  display: block;
  width: 100%;
  height: 56px;
}

.auth-invite__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.auth-invite__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  line-height: 1.35;
}

.auth-invite__lead {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.75;
}

.auth-invite__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.auth-invite__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .auth-invite__card,
  .auth-invite__disc--a,
  .auth-invite__disc--b,
  .auth-invite::backdrop {
    animation: none;
  }
}


/* ============ S1: 共鳴度の追い申告を「押したボタンの真下」へ ============
 * 従来はボタン行の末尾(シェアの先)に出ていたため、押した「わかる!」から
 * 遠く、気づかれないか、余計な手間に見えていた。押した指のすぐ下に、
 * 小さな吹き出しとして出す。答えなくてよいことも明記する。
 */
.pair-card__actions {
  position: relative;
}

.pair-card__resonance-slot--anchored {
  position: absolute;
  z-index: var(--z-content, 2);
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay-hover), 0 10px 26px rgb(133 119 99 / 0.2);
}

/* 吹き出しの小さな尖り(どのボタンの話か迷わせない) */
.pair-card__resonance-slot--anchored::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 26px;
  width: 14px;
  height: 14px;
  rotate: 45deg;
  border-radius: 3px;
  background: var(--surface-clay);
}

.resonance-slot__ask {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.resonance-slot__skip {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  white-space: nowrap;
}


/* ============ S1: 原曲の選択を「答えたくなる」形にする ============
 * 3つを同じラジオで並べると、考えなくて済む「わからない」が既定の逃げ道に
 * なる。A/Bは曲名と発表年を載せた押しやすいカードにし、「わからない」は
 * 消さずに一段静かな場所へ置く(選べないと詰まる人が出るため必ず残す)。
 */
.origin-picker__lead {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.origin-picker__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.origin-choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.origin-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.origin-choice__body {
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
  border: 2px solid transparent;
  transition: border-color var(--dur-quick) var(--ease-soft),
    translate var(--dur-quick) var(--ease-spring);
}

.origin-choice:hover .origin-choice__body {
  translate: 0 -2px;
}

/* 選ばれた側は縁が灯る(どちらを選んだか一目で分かる) */
.origin-choice input:checked + .origin-choice__body {
  border-color: var(--clay-orange-deep);
  box-shadow: var(--shadow-clay-hover);
}

.origin-choice input:focus-visible + .origin-choice__body {
  outline: 2px solid var(--clay-orange-deep);
  outline-offset: 3px;
}

.origin-choice__side {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
}

.origin-choice__title {
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.origin-choice__year {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* 年から推測できるときのヒント(自動選択はしない。あくまで判断材料) */
.origin-picker__hint {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--paper-deep);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.origin-choice--unknown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
}


/* ============ T1: 似てるポイントの2軸と、気分の特集面 ============ */

/* --- 投稿フォーム: 2つの問い --- */
.reason-axis + .reason-axis {
  margin-top: var(--space-5);
}

.reason-axis__req,
.reason-axis__opt {
  margin-left: var(--space-2);
  padding: 0.1em 0.7em;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  vertical-align: middle;
}

.reason-axis__req {
  background: color-mix(in srgb, var(--clay-orange) 45%, white);
  color: color-mix(in srgb, var(--clay-orange-deep) 70%, var(--ink));
}

.reason-axis__opt {
  background: var(--paper-deep);
  color: var(--ink-faint);
}

.reason-axis__lead {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.niteru-chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- 気分から探すハブ: 並んだ気分から選ぶ --- */
.mood-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.mood-card {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.mood-card__emoji {
  font-size: 2.2rem;
  line-height: 1;
}

.mood-card__label {
  font-weight: 700;
}

.mood-card__go {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  transition: translate var(--dur-base) var(--ease-spring);
}

.mood-card:hover .mood-card__go {
  translate: 3px 0;
}

/* --- 気分の特集ページ --- */
.mood-page__hero {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.mood-page__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ============ V1: フッター「音の余韻」 ============
 * ページの終わりを、切れ目ではなく余韻にする。上辺に共鳴弦が1本張られていて、
 * はじけば鳴る(物理はniteru-physics.jsが既存の canvas.pair-string として拾う)。
 * 行き先は役割ごとにまとめ、見出しを付けて読み上げでも飛べるようにする。
 */
.site-footer {
  position: relative;
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: left;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  background: var(--paper-deep);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}

/* 弦は上辺に張る。装飾なのでポインタだけ受け、キーボード順路には入れない。 */
.site-footer__string {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  cursor: pointer;
}

.site-footer__inner {
  position: relative;
  max-width: var(--container-max, 1080px);
  margin-inline: auto;
  padding-top: var(--space-5);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}

.site-footer__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

/* 触れる的は44px以上を確保する(指でもキーボードでも扱いやすく) */
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4em;
  margin-left: -0.4em;
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-soft),
    translate var(--dur-quick) var(--ease-spring);
}

.site-footer__list a:hover {
  color: var(--ink);
  translate: 3px 0;
}

.site-footer__list a:focus-visible {
  outline: 2px solid var(--clay-orange-deep);
  outline-offset: 2px;
  color: var(--ink);
}

.site-footer__base {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--ink-faint) 35%, transparent);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-weight: 800;
  color: var(--ink);
}

/* ロゴと同じイコライザ。余韻としてゆっくり呼吸する。 */
.site-footer__eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.site-footer__eq i {
  width: 4px;
  border-radius: 2px;
  background: var(--clay-pink-deep);
  animation: footer-eq 2.4s var(--ease-soft) infinite;
}

.site-footer__eq i:nth-child(1) { height: 60%; background: var(--clay-pink-deep); animation-delay: 0s; }
.site-footer__eq i:nth-child(2) { height: 100%; background: var(--clay-orange-deep); animation-delay: 0.35s; }
.site-footer__eq i:nth-child(3) { height: 45%; background: var(--clay-sky); animation-delay: 0.7s; }

.site-footer__meta {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.site-footer__meta a {
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__eq i {
    animation: none;
  }
}

/* ============ トースト(操作の返事。パケットU1-a) ============
 * マークアップは assets/js/niteru-toast.js が正本。
 *
 * 【置き場所】デスクトップは右下、モバイルは**下寄りだがボトムナビの上**。
 * 上から降ってくる通知は読んでいる場所を隠すので使わない。指の近くに出して、
 * そのまま押して消せるようにする。
 */
.niteru-toasts {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  /* 何も無いときは下の要素を触れるように */
  pointer-events: none;
}

.niteru-toast {
  --toast-tint: var(--clay-mint);
  --toast-ink: #2f6b57;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  max-width: min(92vw, 22rem);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay), 0 0 0 2px color-mix(in srgb, var(--toast-tint) 55%, transparent);
  cursor: pointer;
  pointer-events: auto;
  animation: toast-in 420ms var(--ease-spring) both;
}

.niteru-toast--undo { --toast-tint: var(--clay-sky); --toast-ink: #2c5f80; }
.niteru-toast--ng   { --toast-tint: var(--clay-orange); --toast-ink: #8a4f24; }
.niteru-toast--wow  { --toast-tint: var(--clay-yellow); --toast-ink: #7d5a17; }

/* 預かり中(パケットP1-d)。成功の緑と**はっきり違う色**にする。
   同じ色にすると、言葉で正直に書いても目が先に「済んだ」と受け取る */
.niteru-toast--pending {
  --toast-tint: var(--ink-faint);
  --toast-ink: #6b6152;
}

/* 雲がゆっくり息をする = まだ運ばれていない気配 */
.niteru-toast--pending .niteru-toast__icon {
  animation: toast-waiting 2.6s var(--ease-soft) infinite;
}

@keyframes toast-waiting {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* 届いたとき。ここで初めて上向きの色になる */
.niteru-toast--synced { --toast-tint: var(--clay-mint); --toast-ink: #2f6b57; }

.niteru-toast.is-leaving {
  animation: toast-out 260ms var(--ease-soft) both;
}

/* 「下からせり上がって、ほんの少し行き過ぎて戻る」= 粘土の重さ */
@keyframes toast-in {
  from { opacity: 0; translate: 0 18px; scale: 0.94; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes toast-out {
  to { opacity: 0; translate: 0 8px; scale: 0.97; }
}

.niteru-toast__icon {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--toast-tint) 55%, var(--surface));
  color: var(--toast-ink);
  font-weight: 800;
  font-size: var(--text-sm);
}

/* 祝いのときだけ、輪が一度だけ広がる */
.niteru-toast--wow .niteru-toast__icon {
  animation: toast-halo 900ms var(--ease-soft) 120ms;
}

@keyframes toast-halo {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--toast-tint) 90%, transparent); }
  100% { box-shadow: 0 0 0 18px transparent; }
}

.niteru-toast__body {
  min-width: 0;
}

.niteru-toast__message {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
}

.niteru-toast__detail {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* 連打したときの「×3」。数だけ増えて画面は埋まらない */
.niteru-toast__count {
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--toast-tint) 45%, var(--surface));
  color: var(--toast-ink);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.niteru-toast__count[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .niteru-toast,
  .niteru-toast.is-leaving,
  .niteru-toast--wow .niteru-toast__icon,
  .niteru-toast--pending .niteru-toast__icon {
    animation: none;
  }
}

/* ============ 現在地(ヘッダー。パケットU1-b) ============
 * デスクトップは常にナビが見えているのに「今どこか」の手がかりが無かった。
 * 色を変えるだけだと押せない要素に見えるので、**下に印を敷く**形にする。
 */
.site-nav .clay-btn.is-current {
  background: color-mix(in srgb, var(--clay-yellow) 45%, var(--surface));
  box-shadow: var(--shadow-clay-pressed);
}

.site-nav .clay-btn--primary.is-current {
  /* 投稿ボタンは元から目立っているので、沈み込みだけで現在地を示す */
  background: linear-gradient(145deg, var(--clay-orange-deep) 0%, var(--clay-orange) 100%);
  box-shadow: var(--shadow-clay-pressed);
}

/* ============ ボトムナビ(モバイル常設。パケットU1-b) ============
 * マークアップは inc/components.php の niteru_theme_bottom_nav() が正本。
 *
 * 【なぜ既定で非表示なのか】デスクトップにはヘッダーがあるので要らない。
 * 640px以下でだけ現れる(下のメディアクエリ)。
 */
.bottom-nav {
  display: none;
}

.bottom-nav__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bottom-nav__item {
  display: grid;
  justify-items: center;
  gap: 2px;
  /* 指で押せる高さ。ラベルまで含めて44pxを下回らせない */
  min-height: 44px;
  padding: var(--space-2) 2px;
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-soft),
    background var(--dur-quick) var(--ease-soft),
    scale var(--dur-quick) var(--ease-spring);
}

.bottom-nav__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.bottom-nav__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* 「タイムライン」が折り返して段差を作らないように */
  white-space: nowrap;
}

/* 現在地。色だけでなく**上に灯りが点く**ので、色覚に依らず分かる */
.bottom-nav__item.is-current {
  color: var(--action);
  background: color-mix(in srgb, var(--clay-orange) 22%, transparent);
}

.bottom-nav__item.is-current::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 30%;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--action);
  animation: bottom-nav-lamp 320ms var(--ease-spring) both;
}

.bottom-nav__item {
  position: relative;
}

@keyframes bottom-nav-lamp {
  from { opacity: 0; scale: 0.2 1; }
  to   { opacity: 1; scale: 1 1; }
}

/* 指を置いた瞬間に沈む(click を待たない) */
.bottom-nav__item.is-pressing {
  scale: 0.92;
}

/* 中央の「投稿」だけ持ち上げる。このサイトは出す場所が主役 */
.bottom-nav__item--primary {
  margin-block-start: -18px;
}

.bottom-nav__item--primary .bottom-nav__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, var(--clay-orange) 0%, var(--clay-orange-deep) 100%);
  box-shadow: var(--shadow-clay);
  color: #fff;
}

.bottom-nav__item--primary.is-current::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav,
  .bottom-nav__item,
  .bottom-nav__item.is-current::before {
    transition: none;
    animation: none;
  }
}

/* ============ ☁︎ 同期待ち(パケットP1-d/P1-f) ============
 * マークアップは assets/js/outbox.js が正本。
 *
 * トーストの上、ボトムナビの上に居座る。**消えない**のが要点で、
 * 「まだ届いていない」という事実を、本人が送るまで画面に残す。
 */
.outbox-badge {
  position: fixed;
  right: var(--space-5);
  bottom: calc(var(--space-5) + 3.4rem);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-faint) 28%, var(--surface));
  box-shadow: var(--shadow-clay);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  animation: outbox-badge-in 420ms var(--ease-spring) both;
}

.outbox-badge:hover,
.outbox-badge:focus-visible {
  background: color-mix(in srgb, var(--clay-mint) 35%, var(--surface));
}

@keyframes outbox-badge-in {
  from { opacity: 0; translate: 0 12px; scale: 0.92; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* 届いたときに上へ抜けていく音符 */
.outbox-note {
  position: fixed;
  z-index: var(--z-toast);
  font-size: 1.4rem;
  color: var(--clay-mint-deep, #79d0b8);
  pointer-events: none;
  animation: outbox-note-fly 1400ms var(--ease-soft) both;
}

@keyframes outbox-note-fly {
  0% { opacity: 0; translate: 0 0; scale: 0.6; }
  15% { opacity: 1; scale: 1; }
  100% { opacity: 0; translate: 0 -160px; scale: 1.1; rotate: 18deg; }
}

@media (prefers-reduced-motion: reduce) {
  .outbox-badge,
  .outbox-note {
    animation: none;
  }
}

/* ============ 狭幅のペアカード(必ずファイル末尾に置くこと) ============
 * .clay-card / .pair-field / .pair-orb / .song-disc の基本ルールと詳細度が
 * 同じ(0,1,0)なので、ソース順で後に来ていないと基本ルールに負けて無効化される。
 * 実際にこのブロックはファイル前方のメディアクエリ内にあって丸ごと死んでおり、
 * 狭幅でもディスク72px・オーブ132pxのままだった。その結果、2つのオーブの間に
 * 残る隙間が14pxしかなく、「はじくと鳴る」共鳴弦が触れないほど潰れていた。
 * 触れる弦の長さを最優先に、オーブとディスクを絞る。
 */
@media (max-width: 640px) {
  .clay-card {
    padding: var(--space-4);
  }

  .pair-field {
    gap: var(--space-1);
  }

  .pair-orb {
    max-width: 96px;
    gap: var(--space-1);
  }

  .song-disc {
    width: 56px;
    height: 56px;
  }

  .song-disc__label {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  /* 弦は指で触れる高さを確保する(高さが低いと弾く判定に入りづらい)。 */
  .pair-string {
    height: 64px;
  }

  /* 試聴ボタンは4つ並ぶとオーブ幅(96px)を越えてカードから溢れるので、
   * 狭幅では2つずつ折り返して収める。 */
  .listen-mini {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    max-width: 100%;
  }

  .listen-mini__btn {
    width: 30px;
    height: 30px;
  }

  .pair-card__actions {
    gap: var(--space-2);
  }

  .pair-card__actions .clay-btn {
    flex: 1 1 auto;
  }

  /* ---- ボトムナビ(パケットU1-b)。ここで初めて姿を現す ---- */
  .bottom-nav {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-header);
    padding: var(--space-1) var(--space-2);
    /* iPhoneのホームインジケータ分を足す。0でも安全な書き方 */
    padding-block-end: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    /* 下の文字が透けて読みにくくならないよう、背景をぼかして持ち上げる */
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 -6px 24px rgb(214 166 122 / 0.18);
    transition: translate var(--dur-base) var(--ease-spring);
  }

  /* 下へ読み進めているあいだは沈める(本文に画面を明け渡す) */
  .bottom-nav.is-tucked {
    translate: 0 calc(100% + 12px);
  }

  /* ボトムナビの分だけ本文の足元を空ける。
     これが無いと最後のカードやフッターがバーの下に潜る */
  body {
    padding-block-end: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* トーストはバーの上に出す。指の近く、かつ操作を塞がない位置 */
  .niteru-toasts {
    right: var(--space-3);
    left: var(--space-3);
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    justify-items: stretch;
  }

  .niteru-toast {
    max-width: none;
  }

  /* 同期待ちバッジもボトムナビの上へ(パケットP1-d) */
  .outbox-badge {
    right: var(--space-3);
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  /* バッジが出ているあいだはトーストをもう一段持ち上げて重ならせない */
  body:has(.outbox-badge) .niteru-toasts {
    bottom: calc(126px + env(safe-area-inset-bottom, 0px));
  }
}