/* ==========================================================================
   ポップリデザイン — 試験機能
   Labs のポップリデザインがONの場合のみ読み込まれる。
   html.pop-redesign が付与されたときにTailwind/shadcnクラスを上書きする。
   デザインソース: mock-pop-redesign.html (パステル × ステッカー × キャンディ)

   セレクタ規約:
   - Tailwindトークンはクラスセレクタ完全一致 (.bg-primary) を基本とする。
     属性部分一致 ([class*=...]) は data-variant や hover: 等への誤爆が
     起きやすいため、`/` や `[]` を含みクラスセレクタで書けない場合のみ使う
   - 属性セレクタの値はクォート内なのでエスケープ不要 ([class*="bg-white/95"])。
     `\\` を書くとリテラルのバックスラッシュ照合になり一致しなくなる
   - Tailwindで表現できない手書きコントロールには、コンポーネント側に
     .pop-segment 等のフック用クラスを付与して対応する (通常デザインでは無効)
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
html.pop-redesign {
  --pop-pink: #e78499;
  --pop-pink-hover: #d06b82;
  --pop-pink-light: #f5c4ce;
  --pop-pink-pale: #fdeef1;
  --pop-blue: #85b8d4;
  --pop-blue-hover: #6da3c4;
  --pop-blue-pale: #e0eef6;
  --pop-orange: #f0a882;
  --pop-orange-pale: #fdf0e8;
  --pop-purple: #b8a8e0;
  --pop-purple-pale: #f3effa;
  --pop-green: #8fc4aa;
  --pop-green-pale: #ecf6f1;
  --pop-yellow: #f0cc82;
  --pop-yellow-pale: #fdf7e8;
  --pop-red: #e05d6f;
  --pop-red-pale: #f6c2c9;
  --pop-ink: #3d3535;
  --pop-radius-sm: 10px;
  --pop-radius: 18px;
  --pop-radius-lg: 26px;
  --pop-shadow-card: 5px 5px 0 var(--pop-pink-light);
  --pop-shadow-card-hover: 8px 8px 0 var(--pop-pink-light);
  --pop-shadow-sticker: 2px 2px 0 rgba(61, 53, 53, 0.18);
}

/* ==========================================================================
   prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.pop-redesign * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   背景 — body (ドットパターン)
   ========================================================================== */
html.pop-redesign body {
  background-color: #fffdfd;
  background-image: radial-gradient(var(--pop-pink-pale) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

html.pop-redesign .bg-slate-50,
html.pop-redesign .bg-gray-50 {
  background-color: transparent;
}

/* ==========================================================================
   スクロールバー
   ========================================================================== */
html.pop-redesign {
  scrollbar-color: var(--pop-pink-light) transparent;
}

html.pop-redesign ::-webkit-scrollbar-thumb {
  background: var(--pop-pink-light);
  border-radius: 3px;
}

html.pop-redesign ::-webkit-scrollbar-thumb:hover {
  background: var(--pop-pink);
}

/* ==========================================================================
   サイドバー
   ========================================================================== */
html.pop-redesign aside[class*="bg-white"][class*="border-r"] {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 0 var(--pop-radius-lg) var(--pop-radius-lg) 0;
  box-shadow: 5px 5px 0 var(--pop-pink-light) !important;
}

/* ナビアイテム active — キャンディピル
   (メインサイドバー / 設定ナビ共通: 選択中リンクは bg-[#e78499]/10 を持つ) */
html.pop-redesign aside a[class*="bg-[#e78499]/10"],
html.pop-redesign nav a[class*="bg-[#e78499]/10"] {
  background: var(--pop-pink) !important;
  color: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
}

html.pop-redesign aside a[class*="bg-[#e78499]/10"] *,
html.pop-redesign nav a[class*="bg-[#e78499]/10"] * {
  color: #fff !important;
}

/* ナビアイテム hover — アウトラインスティッカー
   (メインサイドバー / 設定ナビ等、グレーホバー hover:bg-slate-100 を持つナビリンク共通)
   ホバー時に縁取りが出てもガタつかないよう、常時透明の2pxボーダーを敷いておく */
html.pop-redesign aside a[class*="transition-all"],
html.pop-redesign nav a[class*="hover:bg-slate-100"] {
  border: 2px solid transparent;
  /* デフォルトの rounded-r-full (左直角) から transition-all で丸まる動きが
     見えてしまうため、通常時から全周ピルにしておく */
  border-radius: 9999px !important;
}

/* 選択中 (bg-[#e78499]/10) はキャンディピルの見た目を維持するため除外 */
html.pop-redesign aside a[class*="transition-all"]:not([class*="bg-[#e78499]/10"]):hover,
html.pop-redesign nav a[class*="hover:bg-slate-100"]:hover {
  background: var(--pop-pink-pale) !important;
  border-color: var(--pop-ink) !important;
  border-radius: 9999px !important;
  color: var(--pop-ink) !important;
  transform: translateX(3px);
}

/* デフォルトデザインの hover:pl-6 (にゅっと伸びる動き) は translateX と重複するため抑止 */
html.pop-redesign aside a[class*="hover:pl-6"]:hover {
  padding-left: 1rem !important;
}

/* アップロードボタン — キャンディボタン */
html.pop-redesign aside button[class*="rounded-full"][class*="font-bold"] {
  background: var(--pop-pink) !important;
  border: 2px solid var(--pop-ink) !important;
  box-shadow: 0 4px 0 var(--pop-ink) !important;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms !important;
}

html.pop-redesign aside button[class*="rounded-full"][class*="font-bold"]:hover {
  background: var(--pop-pink-hover) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--pop-ink) !important;
}

/* ==========================================================================
   ダッシュボードヘッダー
   ========================================================================== */
html.pop-redesign header[class*="bg-white/95"],
html.pop-redesign div[class*="sticky"][class*="bg-white/95"][class*="shadow-sm"] {
  background: rgba(255, 253, 253, 0.96) !important;
  border-bottom: 2px solid var(--pop-ink) !important;
  box-shadow: 0 3px 0 var(--pop-pink-light) !important;
}

/* ==========================================================================
   モバイルタブバー
   ========================================================================== */
html.pop-redesign nav[class*="bg-white/95"][class*="border-t"] {
  background: rgba(255, 253, 253, 0.96) !important;
  border-top: 2px solid var(--pop-ink) !important;
  box-shadow: 0 -3px 0 var(--pop-pink-light) !important;
}

/* ==========================================================================
   カード (shadcn/ui Card / SettingsCard) — ステッカー風ポップカード
   ========================================================================== */
html.pop-redesign .rounded-2xl.bg-white.shadow-sm,
html.pop-redesign div[class*="rounded-2xl"][class*="bg-white"][class*="shadow-sm"],
html.pop-redesign a[class*="rounded-2xl"][class*="bg-white"][class*="shadow-sm"],
html.pop-redesign button[class*="rounded-2xl"][class*="bg-white"][class*="shadow-sm"] {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: var(--pop-shadow-card) !important;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out !important;
}

html.pop-redesign .rounded-2xl.bg-white.shadow-sm:hover,
html.pop-redesign div[class*="rounded-2xl"][class*="bg-white"][class*="shadow-sm"]:hover,
html.pop-redesign a[class*="rounded-2xl"][class*="bg-white"][class*="shadow-sm"]:hover,
html.pop-redesign button[class*="rounded-2xl"][class*="bg-white"][class*="shadow-sm"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--pop-shadow-card-hover) !important;
}

/* 設定ページのカード */
html.pop-redesign .animate-fade-in-up[class*="bg-white"][class*="shadow-sm"] {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: var(--pop-shadow-card) !important;
}

/* Labs設定などのアイテムカード (公開アルバムカード等の a タグも対象) */
html.pop-redesign div[class*="rounded-xl"][class*="bg-white"][class*="border-slate-200"],
html.pop-redesign a[class*="rounded-xl"][class*="bg-white"][class*="border-slate-200"] {
  border: 2px solid var(--pop-ink) !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 0 var(--pop-blue-pale) !important;
}

/* ==========================================================================
   ダイアログ / モーダル (shadcn/ui Dialog + 手書きモーダル)
   ========================================================================== */
/* オーバーレイ (shadcn Dialog/AlertDialog/Sheet・手書きモーダル共通)
   全画面オーバーレイに限定する。ライトボックス内の情報バー等の
   bg-black/40 ガラス要素 (hover:bg-black/60 持ち) には干渉しない */
html.pop-redesign .fixed.inset-0.bg-black\/40 {
  background-color: rgba(61, 53, 53, 0.45) !important;
}

html.pop-redesign [role="dialog"][class*="bg-white"],
html.pop-redesign div[class*="bg-white"][class*="rounded-2xl"][class*="shadow-lg"] {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius-lg) !important;
  box-shadow: 6px 6px 0 var(--pop-pink-light) !important;
}

/* ボトムシート (詳細モーダルのモバイル情報パネル・プロフィールポップアップ等) */
html.pop-redesign div.rounded-t-2xl.bg-white {
  border: 2px solid var(--pop-ink) !important;
  border-bottom: none !important;
  border-radius: var(--pop-radius-lg) var(--pop-radius-lg) 0 0 !important;
}

/* コンテキストメニュー・FAB展開メニュー (Radix外の浮遊メニュー) */
html.pop-redesign div.bg-white.rounded-lg.shadow-xl,
html.pop-redesign div.bg-white.rounded-2xl.shadow-xl {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--pop-blue-pale) !important;
}

/* ==========================================================================
   公開ページヘッダー (公開プロフィール / ギャラリー)
   ========================================================================== */
html.pop-redesign header.bg-white.border-b {
  background: rgba(255, 253, 253, 0.96) !important;
  border-bottom: 2px solid var(--pop-ink) !important;
  box-shadow: 0 3px 0 var(--pop-pink-light) !important;
}

/* ==========================================================================
   セグメントコントロール (タブ切替・公開設定トグル等)
   グレー枠 (bg-slate-100/bg-gray-100 + p-1/p-0.5) のiOS風コントロール。
   角丸トークンは rounded-lg / rounded-[10px] 等まちまちなので条件にしない
   ========================================================================== */
html.pop-redesign div.bg-slate-100.p-1,
html.pop-redesign div.bg-slate-100.p-0\.5,
html.pop-redesign div.bg-gray-100.p-1,
html.pop-redesign div.bg-gray-100.p-0\.5 {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
}

html.pop-redesign div.bg-slate-100.p-1 > button,
html.pop-redesign div.bg-slate-100.p-0\.5 > button,
html.pop-redesign div.bg-gray-100.p-1 > button,
html.pop-redesign div.bg-gray-100.p-0\.5 > button {
  border-radius: 9999px !important;
}

/* 選択中 (bg-white) はピンクキャンディに */
html.pop-redesign div.bg-slate-100.p-1 > button.bg-white,
html.pop-redesign div.bg-slate-100.p-0\.5 > button.bg-white,
html.pop-redesign div.bg-gray-100.p-1 > button.bg-white,
html.pop-redesign div.bg-gray-100.p-0\.5 > button.bg-white {
  background: var(--pop-pink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ==========================================================================
   料金プラン — 選択中カード (モックの「いちばん人気」カード風)
   ========================================================================== */
html.pop-redesign div[class*="rounded-2xl"][class*="bg-white"][class*="shadow-xl"][class*="border-[#e78499]"] {
  border: 3px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: 7px 7px 0 var(--pop-pink-light) !important;
}

/* ==========================================================================
   選択サークル (写真・アルバムの選択チェック) / 手書きミニトグル
   ========================================================================== */
html.pop-redesign div.w-6.h-6.rounded-full.border-2 {
  border-color: var(--pop-ink) !important;
}

/* 詳細モーダルのNSFW等の手書きミニトグル (span製) */
html.pop-redesign span.w-9.h-5.rounded-full {
  border: 1.5px solid var(--pop-ink);
  box-sizing: border-box;
}

/* ==========================================================================
   リレーカードの状態色 (自分の番=rose / 選択中=blue) — ink縁取りを維持
   ========================================================================== */
html.pop-redesign div[class*="rounded-2xl"][class*="bg-rose-50"],
html.pop-redesign div[class*="rounded-2xl"][class*="bg-blue-50"] {
  border: 2px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: 4px 4px 0 var(--pop-pink-light) !important;
}

/* ==========================================================================
   ボタン — Primary (キャンディボタン)
   クラストークン完全一致で指定する。属性部分一致 ([class*=...]) だと
   data-[state=checked]:bg-primary (Switch) や hover:bg-[#e78499] に誤爆する。
   ProfileSettings の手書きトグルはON時にトークン bg-primary を持つため
   [role="switch"] を除外する。
   ========================================================================== */
html.pop-redesign button.bg-primary:not([role="switch"]),
html.pop-redesign a.bg-primary,
html.pop-redesign button.bg-\[\#e78499\],
html.pop-redesign a.bg-\[\#e78499\] {
  background: var(--pop-pink) !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 0 var(--pop-ink) !important;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms !important;
}

html.pop-redesign button.bg-primary:not([role="switch"]):hover,
html.pop-redesign a.bg-primary:hover,
html.pop-redesign button.bg-\[\#e78499\]:hover,
html.pop-redesign a.bg-\[\#e78499\]:hover {
  background: var(--pop-pink-hover) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--pop-ink) !important;
}

html.pop-redesign button.bg-primary:not([role="switch"]):active,
html.pop-redesign button.bg-\[\#e78499\]:active {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 var(--pop-ink) !important;
}

/* ==========================================================================
   ボタン — Outline / Ghost (白キャンディボタン)
   shadcn Button outline は border-input bg-background。
   asChild でリンクとして描画される場合があるため a タグも対象。
   bg-transparent 側は Select トリガー ([role="combobox"]) を除外する
   ========================================================================== */
html.pop-redesign button.border-input.bg-background,
html.pop-redesign a.border-input.bg-background,
html.pop-redesign a.border-input.bg-transparent,
html.pop-redesign button.border-input.bg-transparent:not([role="combobox"]) {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms !important;
}

html.pop-redesign button.border-input.bg-background:hover,
html.pop-redesign a.border-input.bg-background:hover,
html.pop-redesign a.border-input.bg-transparent:hover,
html.pop-redesign button.border-input.bg-transparent:not([role="combobox"]):hover {
  background: var(--pop-pink-pale) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--pop-ink) !important;
}

/* ==========================================================================
   ボタン — グレー系 (bg-slate-100/bg-gray-100) → 白キャンディボタン
   ソートバー・料金ページ・モーダルのキャンセル等
   ========================================================================== */
html.pop-redesign button.bg-slate-100,
html.pop-redesign a.bg-slate-100,
html.pop-redesign button.bg-slate-200,
html.pop-redesign a.bg-slate-200,
html.pop-redesign button.bg-gray-100,
html.pop-redesign a.bg-gray-100 {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  color: var(--pop-ink) !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms !important;
}

html.pop-redesign button.bg-slate-100:hover,
html.pop-redesign a.bg-slate-100:hover,
html.pop-redesign button.bg-slate-200:hover,
html.pop-redesign a.bg-slate-200:hover,
html.pop-redesign button.bg-gray-100:hover,
html.pop-redesign a.bg-gray-100:hover {
  background: var(--pop-pink-pale) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--pop-ink) !important;
}

/* ==========================================================================
   ボタン — 白地 + border-slate-200 (詳細パネル・設定・公開ページの汎用ボタン)
   元の角丸を活かしつつステッカー風の縁取りと影を付ける
   ========================================================================== */
html.pop-redesign button.border-slate-200,
html.pop-redesign a.border-slate-200 {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  box-shadow: var(--pop-shadow-sticker) !important;
}

html.pop-redesign button.border-slate-200:hover,
html.pop-redesign a.border-slate-200:hover {
  background: var(--pop-pink-pale) !important;
}

/* ピンク枠付き (選択中テーマ・プラン変更リンク等) はピンク縁取りを維持 */
html.pop-redesign button.border-\[\#e78499\],
html.pop-redesign a.border-\[\#e78499\] {
  border: 2px solid var(--pop-pink) !important;
  box-shadow: var(--pop-shadow-sticker) !important;
}

/* 危険操作 (解約等) は赤縁取りを維持 */
html.pop-redesign button.border-red-200 {
  border: 2px solid var(--pop-red) !important;
  box-shadow: var(--pop-shadow-sticker) !important;
}

/* ==========================================================================
   ボタン — ダーク (Xログイン等) / インディゴ (アルバムツールバー等)
   ========================================================================== */
html.pop-redesign button.bg-slate-800 {
  border: 2px solid var(--pop-ink) !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out !important;
}

html.pop-redesign button.bg-slate-800:hover {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--pop-ink) !important;
}

html.pop-redesign button.bg-indigo-600,
html.pop-redesign a.bg-indigo-600 {
  background: var(--pop-blue) !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms !important;
}

html.pop-redesign button.bg-indigo-600:hover,
html.pop-redesign a.bg-indigo-600:hover {
  background: var(--pop-blue-hover) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--pop-ink) !important;
}

/* インラインstyleのピンクグラデーションボタン (AI候補確定等) */
html.pop-redesign button[style*="linear-gradient"] {
  border: 2px solid var(--pop-ink) !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
}

/* ==========================================================================
   ボタン — 機能色 (赤=破壊的 / オレンジ=注意 / バイオレット=CTA)
   背景の意味色は維持し、キャンディ形状 (ink縁取り + 押し込み影) を付ける
   ========================================================================== */
html.pop-redesign button.bg-red-600,
html.pop-redesign button.bg-red-500,
html.pop-redesign button.bg-orange-400,
html.pop-redesign a.bg-violet-500 {
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms !important;
}

html.pop-redesign button.bg-red-600:hover,
html.pop-redesign button.bg-red-500:hover,
html.pop-redesign button.bg-orange-400:hover,
html.pop-redesign a.bg-violet-500:hover {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--pop-ink) !important;
}

/* 淡色の機能ボタン (bg-red-100 等) はチップ同様 ink縁取りのみ */
html.pop-redesign button.bg-red-100 {
  border: 1.5px solid var(--pop-ink) !important;
}

/* ==========================================================================
   ボタン — 色付きアウトライン (amber/red/pink/dashed 等)
   枠線の意味色は維持し、太さ統一 + ステッカー影を付ける
   ========================================================================== */
html.pop-redesign button.border-amber-300,
html.pop-redesign button.border-red-300,
html.pop-redesign button.border-\[\#f5c4ce\],
html.pop-redesign button.border-slate-300,
html.pop-redesign button.border-red-500\/20 {
  border-width: 2px !important;
  box-shadow: var(--pop-shadow-sticker) !important;
}

/* ==========================================================================
   ボタン — 写真/暗所オーバーレイ上の白ボタン・浮遊ボタン
   ========================================================================== */
/* ヘッダー画像の編集/削除等、写真上の半透明白ボタン */
html.pop-redesign button.bg-white\/90.backdrop-blur-sm {
  border: 1.5px solid var(--pop-ink) !important;
}

/* ライトボックス内の白ボタン (ダウンロード等) */
html.pop-redesign button.bg-white.text-slate-800 {
  border: 2px solid var(--pop-ink) !important;
  box-shadow: 0 3px 0 var(--pop-ink) !important;
}

/* 浮遊する小型ダーク×ボタン */
html.pop-redesign button.bg-slate-700.rounded-full {
  border: 1.5px solid var(--pop-ink) !important;
}

/* 未ログインCTAバナー (画面下部ドック) — モバイルタブバーと同じ意匠 */
html.pop-redesign button.bg-white\/95.border-t {
  background: rgba(255, 253, 253, 0.96) !important;
  border-top: 2px solid var(--pop-ink) !important;
  box-shadow: 0 -3px 0 var(--pop-pink-light) !important;
}

/* ピンク淡色の案内リンクカード (削除案内等) */
html.pop-redesign a.bg-\[\#fdeef1\] {
  border: 1.5px solid var(--pop-ink) !important;
}

/* ==========================================================================
   ホバー統一 — グレーホバーのボタン/リンクをピンクに
   (ヘッダーアイコン・通知行・FABメニュー・各種ゴーストボタン)
   ========================================================================== */
html.pop-redesign button[class*="hover:bg-slate-50"]:hover,
html.pop-redesign button[class*="hover:bg-slate-100"]:hover,
html.pop-redesign button[class*="hover:bg-slate-200"]:hover,
html.pop-redesign a[class*="hover:bg-slate-50"]:hover,
html.pop-redesign a[class*="hover:bg-slate-100"]:hover,
html.pop-redesign a[class*="hover:bg-slate-200"]:hover {
  background-color: var(--pop-pink-pale) !important;
}

/* ==========================================================================
   セグメントボタン (.pop-segment フック)
   ProfileSettings のデフォルト表示タブ等、手書きの選択式ボタン。
   通常デザインでは未定義クラスのため影響しない
   ========================================================================== */
html.pop-redesign .pop-segment {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  color: var(--pop-ink) !important;
  font-weight: 700 !important;
  box-shadow: var(--pop-shadow-sticker) !important;
  transition: background 150ms, color 150ms !important;
}

html.pop-redesign .pop-segment:hover {
  background: var(--pop-pink-pale) !important;
}

html.pop-redesign .pop-segment.pop-segment-on {
  background: var(--pop-pink) !important;
  color: #fff !important;
}

html.pop-redesign .pop-segment.pop-segment-on:hover {
  background: var(--pop-pink-hover) !important;
}

/* ==========================================================================
   トグル (Radix Switch / 手書き role="switch") — モックの .toggle 風
   ========================================================================== */
html.pop-redesign button[role="switch"] {
  border-color: var(--pop-ink) !important;
}

html.pop-redesign button[role="switch"] > span {
  background: #fff !important;
  border: 1.5px solid var(--pop-ink);
  box-shadow: none !important;
  box-sizing: border-box;
}

/* ==========================================================================
   チェックボックス / ラジオ (Radix) — ink縁取り
   ========================================================================== */
html.pop-redesign button[role="checkbox"] {
  border: 1.5px solid var(--pop-ink) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

html.pop-redesign button[role="radio"] {
  border: 1.5px solid var(--pop-ink) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   バッジ — ステッカー風
   ========================================================================== */
html.pop-redesign span.rounded-md.text-xs.font-semibold,
html.pop-redesign span.rounded-full.text-xs.font-bold,
html.pop-redesign span.rounded-full.text-xs.font-semibold {
  border: 1.5px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
  box-shadow: var(--pop-shadow-sticker);
}

/* 写真上のオーバーレイバッジ (AIステータス・枚数・公開状態等の backdrop-blur 付き) */
html.pop-redesign .rounded-full.backdrop-blur-sm {
  border: 1.5px solid var(--pop-ink) !important;
}

/* VIDEO / センシティブ等の極小バッジ */
html.pop-redesign span.rounded.bg-red-500,
html.pop-redesign span.rounded.bg-orange-500 {
  border: 1px solid var(--pop-ink) !important;
  border-radius: 9999px !important;
}

/* タグ色のグラデーション/インラインstyle背景チップ (ライブラリ・公開ページのフィルタ) */
html.pop-redesign .rounded-full.text-white[style*="background"] {
  border: 1.5px solid var(--pop-ink) !important;
  box-shadow: var(--pop-shadow-sticker) !important;
}

/* ==========================================================================
   タグチップ (作品・キャラ名等のパステルチップ) — モックの .chip 風 ink縁取り
   bg-{color}-100 + rounded-full の組み合わせをチップとみなす。
   slate/gray はスケルトンや無彩色の円にも使われるため対象外
   ========================================================================== */
html.pop-redesign .rounded-full.bg-purple-100,
html.pop-redesign .rounded-full.bg-blue-100,
html.pop-redesign .rounded-full.bg-sky-100,
html.pop-redesign .rounded-full.bg-indigo-100,
html.pop-redesign .rounded-full.bg-pink-100,
html.pop-redesign .rounded-full.bg-rose-100,
html.pop-redesign .rounded-full.bg-green-100,
html.pop-redesign .rounded-full.bg-emerald-100,
html.pop-redesign .rounded-full.bg-teal-100,
html.pop-redesign .rounded-full.bg-amber-100,
html.pop-redesign .rounded-full.bg-yellow-100,
html.pop-redesign .rounded-full.bg-orange-100,
html.pop-redesign .rounded-full.bg-red-100,
html.pop-redesign .rounded-full.bg-\[\#fdeef1\],
html.pop-redesign .rounded-full.bg-\[\#f0ecf9\],
html.pop-redesign .rounded-full.bg-\[\#e78499\]\/10,
html.pop-redesign .rounded-full.bg-primary\/5,
html.pop-redesign span.rounded-full.bg-slate-200\/60,
html.pop-redesign span.rounded-full.bg-\[\#e78499\] {
  border: 1.5px solid var(--pop-ink) !important;
}

/* ==========================================================================
   インプット / テキストエリア / セレクト
   ========================================================================== */
html.pop-redesign input.border-input,
html.pop-redesign textarea.border-input,
html.pop-redesign select.border-input,
html.pop-redesign input.border-slate-200,
html.pop-redesign textarea.border-slate-200,
html.pop-redesign select.border-slate-200,
html.pop-redesign input.border-slate-300,
html.pop-redesign button[role="combobox"] {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color 150ms, box-shadow 150ms !important;
}

html.pop-redesign input.border-input:focus,
html.pop-redesign textarea.border-input:focus,
html.pop-redesign input.border-slate-200:focus,
html.pop-redesign textarea.border-slate-200:focus,
html.pop-redesign input.border-slate-300:focus,
html.pop-redesign button[role="combobox"]:focus {
  border-color: var(--pop-pink) !important;
  box-shadow: 3px 3px 0 var(--pop-pink-light) !important;
  outline: none !important;
}

/* 検索バー等、元デザインがピル型 (rounded-full) のインプットはピルを維持 */
html.pop-redesign input.border-input.rounded-full,
html.pop-redesign input.border-slate-200.rounded-full {
  border-radius: 9999px !important;
}

/* ネイティブチェックボックス (利用規約同意等) */
html.pop-redesign input[type="checkbox"] {
  accent-color: var(--pop-pink);
}

/* ==========================================================================
   進捗バー (ストレージ・AI使用量) — キャンディストライプ
   shadcn Progress のトラック (overflow-hidden rounded-full bg-primary/20) に
   限定する。bg-primary/20 単体だと写真選択オーバーレイ等に誤爆する。
   ========================================================================== */
html.pop-redesign div.overflow-hidden.rounded-full.bg-primary\/20,
html.pop-redesign div.overflow-hidden.rounded-full.bg-\[\#e78499\]\/20 {
  background: #fff !important;
  border: 1.5px solid var(--pop-ink) !important;
}

html.pop-redesign div.overflow-hidden.rounded-full.bg-primary\/20 > div,
html.pop-redesign div.overflow-hidden.rounded-full.bg-\[\#e78499\]\/20 > div {
  background: repeating-linear-gradient(
    45deg,
    var(--pop-pink),
    var(--pop-pink) 8px,
    var(--pop-pink-light) 8px,
    var(--pop-pink-light) 16px
  ) !important;
  border-radius: 9999px !important;
}

/* 警告色 (容量80%超/超過時の [&>div]:bg-yellow-500 等) はストライプ色を変えて残す。
   特殊文字を含むトークンのためクラスエスケープではなく属性部分一致で書く */
html.pop-redesign div.overflow-hidden.rounded-full[class*="[&>div]:bg-yellow-500"] > div,
html.pop-redesign div.overflow-hidden.rounded-full[class*="[&>div]:bg-amber-500"] > div {
  background: repeating-linear-gradient(
    45deg,
    var(--pop-yellow),
    var(--pop-yellow) 8px,
    var(--pop-yellow-pale) 8px,
    var(--pop-yellow-pale) 16px
  ) !important;
}

html.pop-redesign div.overflow-hidden.rounded-full[class*="[&>div]:bg-red-600"] > div,
html.pop-redesign div.overflow-hidden.rounded-full[class*="[&>div]:bg-destructive"] > div {
  background: repeating-linear-gradient(
    45deg,
    var(--pop-red),
    var(--pop-red) 8px,
    var(--pop-red-pale) 8px,
    var(--pop-red-pale) 16px
  ) !important;
}

/* AI使用量メーター (手書き: bg-slate-200/60 トラック + 色付きバー) */
html.pop-redesign div.overflow-hidden.rounded-full.bg-slate-200\/60 {
  background: #fff !important;
  border: 1.5px solid var(--pop-ink) !important;
  box-shadow: none !important;
}

html.pop-redesign div.overflow-hidden.rounded-full.bg-slate-200\/60 > div.bg-green-500 {
  background: repeating-linear-gradient(
    45deg,
    var(--pop-green),
    var(--pop-green) 8px,
    var(--pop-green-pale) 8px,
    var(--pop-green-pale) 16px
  ) !important;
}

html.pop-redesign div.overflow-hidden.rounded-full.bg-slate-200\/60 > div.bg-yellow-500 {
  background: repeating-linear-gradient(
    45deg,
    var(--pop-yellow),
    var(--pop-yellow) 8px,
    var(--pop-yellow-pale) 8px,
    var(--pop-yellow-pale) 16px
  ) !important;
}

html.pop-redesign div.overflow-hidden.rounded-full.bg-slate-200\/60 > div.bg-red-600 {
  background: repeating-linear-gradient(
    45deg,
    var(--pop-red),
    var(--pop-red) 8px,
    var(--pop-red-pale) 8px,
    var(--pop-red-pale) 16px
  ) !important;
}

/* ==========================================================================
   ドロップダウン / セレクト / ポップオーバー
   ツールチップ (bg-primary トークンを持つ) は除外。白塗りすると
   text-primary-foreground (白文字) が見えなくなる
   ========================================================================== */
html.pop-redesign [data-radix-popper-content-wrapper] > div:not(.bg-primary),
html.pop-redesign div[class*="bg-white"][class*="rounded-md"][class*="shadow-md"] {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--pop-blue-pale) !important;
}

/* ツールチップ — ピンク背景のままink縁取りだけ加える */
html.pop-redesign [data-radix-popper-content-wrapper] > div.bg-primary {
  border: 1.5px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius-sm) !important;
  box-shadow: var(--pop-shadow-sticker) !important;
}

/* ==========================================================================
   トースト (sonner)
   ========================================================================== */
html.pop-redesign [data-sonner-toast] {
  background: #fff !important;
  border: 2px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: 4px 4px 0 var(--pop-pink-light) !important;
}

/* ==========================================================================
   写真カード — ステッカー風 + 傾きホバー
   ========================================================================== */
html.pop-redesign div[class*="rounded-2xl"][class*="overflow-hidden"][class*="cursor-pointer"] {
  border: 2px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: 4px 4px 0 var(--pop-pink-light) !important;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out !important;
}

html.pop-redesign div[class*="rounded-2xl"][class*="overflow-hidden"][class*="cursor-pointer"]:nth-child(3n) {
  box-shadow: 4px 4px 0 var(--pop-blue-pale) !important;
}

html.pop-redesign div[class*="rounded-2xl"][class*="overflow-hidden"][class*="cursor-pointer"]:nth-child(3n + 1) {
  box-shadow: 4px 4px 0 var(--pop-orange-pale) !important;
}

html.pop-redesign div[class*="rounded-2xl"][class*="overflow-hidden"][class*="cursor-pointer"]:hover {
  transform: translate(-2px, -3px) rotate(-0.6deg) !important;
  box-shadow: 7px 8px 0 var(--pop-pink-light) !important;
}

/* 選択中の写真カード (MediaGrid: shadow-pink-200 を持つ) — ピンク枠を維持する */
html.pop-redesign div[class*="rounded-2xl"][class*="overflow-hidden"][class*="cursor-pointer"][class*="shadow-pink-200"] {
  border-color: var(--pop-pink) !important;
  box-shadow: 0 0 0 3px var(--pop-pink-light), 4px 4px 0 var(--pop-pink-light) !important;
}

/* ピックアップ (ピン留め) タイル — 写真カードと同じステッカー風に揃える。
   タイルは bg-slate-100 を持つ <button> (PublicProfileView) のため、上部の
   「グレー系ボタン → 白キャンディ(ピル)」ルール (button.bg-slate-100) に誤爆し、
   border-radius:9999px で縦長楕円になっていた。写真カード (div[...cursor-pointer])
   とは要素型が異なり上記ルールに乗らないので、ここで明示的に揃える。
   属性セレクタ3つ + button でキャンディルールより詳細度が高く、!important 同士でも上書きされる。 */
html.pop-redesign button[class*="aspect-"][class*="rounded-2xl"][class*="overflow-hidden"] {
  border: 2px solid var(--pop-ink) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: 4px 4px 0 var(--pop-pink-light) !important;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out !important;
}

html.pop-redesign button[class*="aspect-"][class*="rounded-2xl"][class*="overflow-hidden"]:hover {
  transform: translate(-2px, -3px) rotate(-0.6deg) !important;
  box-shadow: 7px 8px 0 var(--pop-pink-light) !important;
}

/* ==========================================================================
   区切り線 — 点線ピンク
   ========================================================================== */
html.pop-redesign .border-slate-100,
html.pop-redesign .border-slate-200 {
  border-color: var(--pop-pink-light);
}

html.pop-redesign .divide-slate-100 > :not(:first-child),
html.pop-redesign .divide-slate-200 > :not(:first-child) {
  border-color: var(--pop-pink-light);
  border-top-style: dashed;
}

/* シャドウ汎用 (.shadow-sm/md/lg) の一括上書きは行わない。
   Switch のつまみ・小さなドット等にもベタ落ち影が付き表示が崩れるため、
   影の差し替えはカード等の個別セレクタ側でのみ行う。 */