/* 着せかえ: ハート（Rouge・Blanc 共通。2026-10-22）
 * 新しい作る画面（ui/style.css）の上に重ねる。姉妹のメーカー2つのトップの絵（ハートのロゴ）から、丸みのあるやさしい形にハートの飾り。
 * 形は2つで共通、色だけメーカーで変える（html の data-maker。page.php が付ける）:
 *   Rouge … ローズ（トップのワインレッドの地・ピンクのボタン）
 *   Blanc … 白と銀に少し青み（トップの青みがかった灰色の地・灰色のハート）
 * キャラの後ろ（.stage）には模様を置かない（完成の画像は透過で紛らわしいため。DRESSUP と同じ決まり）。
 * 使い方: メーカーの create/index.php の $ui['theme'] = 'heart'（ローカルでは ?theme=heart で試せる） */
:root {
  --heart: #b8395f;        /* 主の色（ボタン・選んだしるし） */
  --heart-2: #9b2c4f;      /* 主の色の上で触ったとき */
  --heart-ink: #a12a52;    /* 文字にするときの主の色（白の上で 6.3:1） */
  --heart-pale: 251, 225, 233; /* 地の淡いハート（r, g, b） */
  --ink: #3b2630;
  --sub: #8a6d79;
  --line: rgba(120, 40, 70, .12);
  --tile: #fbf1f4;
  --glass: rgba(255, 255, 255, .92);
  --glass-line: rgba(120, 40, 70, .12);
  --accent: #e0577f;
  --accent-2: #ff8fae;
  --accent-mid: #ef7396;
  --accent-soft: #fde8ee;
  --accent-rgb: 224, 87, 127; /* --accent の r, g, b（style.css の半透明のアクセント） */
  --shadow-sm: 0 6px 18px -10px rgba(120, 30, 60, .45);
  --shadow-lg: 0 26px 56px -30px rgba(120, 30, 60, .42);
  --scroll-thumb: rgba(184, 57, 95, .38);
  --scroll-thumb-hover: var(--heart);
  /* ハートの形（Material の favorite と同じ形。色は mask で付ける） */
  --heart-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}
html[data-maker="blanc"] {
  --heart: #4d5c6b;
  --heart-2: #3b4855;
  --heart-ink: #3f4d5c;
  --heart-pale: 226, 233, 241;
  --ink: #26303a;
  --sub: #6f7b87;
  --line: rgba(40, 60, 80, .12);
  --tile: #f1f4f7;
  --glass-line: rgba(40, 60, 80, .12);
  --accent: #5f8fc4;
  --accent-2: #93b6dd;
  --accent-mid: #79a2d0;
  --accent-soft: #e8f0f8;
  --accent-rgb: 95, 143, 196;
  --shadow-sm: 0 6px 18px -10px rgba(30, 50, 80, .4);
  --shadow-lg: 0 26px 56px -30px rgba(30, 50, 80, .38);
  --scroll-thumb: rgba(77, 92, 107, .38);
}

/* 地: 白から淡い色へ。隅に大きなハートを薄く（キャラの後ろには来ない位置） */
body {
  background:
    radial-gradient(760px 520px at 6% -6%, rgba(var(--heart-pale), .9) 0%, transparent 62%),
    radial-gradient(700px 560px at 100% 104%, rgba(var(--heart-pale), .85) 0%, transparent 60%),
    linear-gradient(#fff, #fdfbfc);
}
html[data-maker="blanc"] body { background-color: #fbfcfd; }
body::before {
  content: ""; position: fixed; left: -70px; bottom: -60px; width: 300px; height: 300px; z-index: -1; pointer-events: none;
  background: rgba(var(--heart-pale), .9);
  -webkit-mask: var(--heart-shape) center / contain no-repeat; mask: var(--heart-shape) center / contain no-repeat;
  transform: rotate(-14deg);
}

/* ---- 浮いているボタン: 白に細い線 ---- */
.glass, .brand, .pad { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* 完成: 主の色に、角に白い小さなハート */
.cta {
  position: relative;
  background: linear-gradient(135deg, var(--heart), var(--accent));
  box-shadow: 0 10px 22px -12px var(--heart);
}
.cta::after {
  content: ""; position: absolute; top: 7px; right: 10px; width: 9px; height: 9px; pointer-events: none; background: #fff; opacity: .9;
  -webkit-mask: var(--heart-shape) center / contain no-repeat; mask: var(--heart-shape) center / contain no-repeat;
}
.cta:hover { filter: none; background: linear-gradient(135deg, var(--heart-2), var(--heart)); }
.tool.on, .ptn-swap.on { background: linear-gradient(135deg, var(--heart), var(--accent)); }
.first-terms a, .slots p.slots-msg, .rnd h3 .lock-n, .tour-step, .name-chip:hover { color: var(--heart-ink); }

/* ---- キャラの箱: 白のまま（模様は置かない）、丸みを大きく ---- */
.stage { border-radius: 28px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.view-btn { background: var(--heart); }
.history, .rail { border-color: var(--line); box-shadow: var(--shadow-sm); }

/* ---- パーツのパネル ---- */
.panel { border-radius: 26px; border-color: var(--line); box-shadow: var(--shadow-lg); }
.cat { color: rgba(59, 38, 48, .62); }
html[data-maker="blanc"] .cat { color: rgba(38, 48, 58, .62); }
html[data-maker] .cat.sel { color: #fff; } /* 選んだカテゴリの文字は白（上の Blanc の文字の色より強く） */
.cat-ind { background: linear-gradient(135deg, var(--heart), var(--accent)); box-shadow: 0 10px 20px -12px var(--heart); }
.cat-name { color: var(--heart-ink); letter-spacing: .04em; }
.part { border-radius: 18px; background: var(--tile); }
.part:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.part.sel { background: #fff; }
.part.sel::before { box-shadow: inset 0 0 0 2.5px var(--heart); }
/* 選んだしるしはハート（チェックの丸の代わり） */
.part.sel::after {
  width: 18px; height: 18px; border-radius: 0; box-shadow: none; background: var(--accent);
  -webkit-mask: var(--heart-shape) center / contain no-repeat; mask: var(--heart-shape) center / contain no-repeat;
}

/* ---- ダイアログ ---- */
.sheet { box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.pill { background: var(--tile); }

/* ---- 完成画面: 題字は主の色、下に小さなハート ---- */
.finish { background: rgba(59, 38, 48, .32); }
html[data-maker="blanc"] .finish { background: rgba(38, 48, 58, .32); }
.finish-head h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--heart-ink); letter-spacing: .1em; }
.fa { border-radius: 18px; }
.fa-main { background: linear-gradient(135deg, var(--heart), var(--accent)); box-shadow: 0 12px 24px -14px var(--heart); }
.fa-main:hover { filter: none; background: linear-gradient(135deg, var(--heart-2), var(--heart)); }

/* ---- 読み込み中の画面・はじめての人の同意の画面: 淡い地にハートとメーカー名 ---- */
html #boot { background: radial-gradient(560px 420px at 50% 42%, rgba(var(--heart-pale), 1) 0%, transparent 70%), #fff; color: var(--ink); }
html #boot .boot-name, .first-maker { font-size: 20px; font-weight: 800; letter-spacing: .32em; padding-left: .32em; color: var(--heart-ink); }
html #boot .boot-name::before, .first-maker::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 8px; background: var(--accent);
  -webkit-mask: var(--heart-shape) center / contain no-repeat; mask: var(--heart-shape) center / contain no-repeat;
}
html #boot .boot-rule.wait { background: rgba(var(--heart-pale), 1); }
html #boot .boot-rule.wait::before { background: linear-gradient(to right, transparent, var(--accent), transparent); }
html.first-visit #first { background: radial-gradient(640px 480px at 50% 40%, rgba(var(--heart-pale), 1) 0%, transparent 70%), #fff; }

/* スマホ: 影は控えめに */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .stage { border-radius: 24px; }
  .panel { border-radius: 24px 24px 0 0; }
  .cta::after { top: 6px; right: 8px; width: 8px; height: 8px; }
  body::before { display: none; } /* スマホはキャラとパネルの間からのぞくので出さない */
}