/* MACARON の色と書体。サイト全体の色はここだけで決める（青は使わない）。
   土台はビターチョコ、主役はラズベリーピンク、差し色にピスタチオとマカロンの水色を少しだけ。
   きまり: ぼやっと光らせない。立体感は「ふちの濃い色・ベタの面・丸み・ぼかしの無い短い影」で出す。
   --mc-fill は白文字を乗せる塗り用（白との比 4.95:1）。--mc-accent はチョコの面に載せる文字・線用。 */
:root {
  /* チョコ（暗い側） */
  --mc-bg: #2B1712;         /* 土台 */
  --mc-bg-deep: #1E0F0B;    /* いちばん濃い所（フッター・入力欄のくぼみ） */
  --mc-surface: #3A2019;    /* 土台の明るい側・カード */
  --mc-surface-2: #4A2A20;  /* 面 */
  --mc-line: #633A2D;       /* 線・カードの下のふち */
  --mc-wine: #3A2019;
  --mc-wine-2: #4A2A20;
  /* ラズベリー（主役） */
  --mc-fill: #D81B60;       /* 塗り */
  --mc-fill-top: #EE4A8C;   /* ぷっくりの上側 */
  --mc-fill-deep: #A80F47;  /* 下のふち */
  --mc-fill-hover: #E22A70;
  --mc-fill-rgb: 216, 27, 96;
  --mc-accent: #FF6FA5;     /* チョコの上の文字・線（比 6.5:1） */
  --mc-accent-soft: #FFB3CF;
  --mc-accent-rgb: 255, 111, 165;
  /* 白い面（ほんのりピンク） */
  --mc-tint: #FFF3F7;
  --mc-tint-2: #FFDCE9;     /* 白い面の上の帯・吹き出し */
  --mc-tint-line: #F5B8CF;  /* 白い面の上の線 */
  --mc-tint-edge: #D79AB1;  /* 白いボタン・キーの下のふち */
  --mc-tint-ink: #2B1712;   /* 白い面の上の文字 */
  --mc-tint-ink-soft: #7A4A3A;
  /* 文字 */
  --mc-milk: #FFF6F1;
  --mc-milk-dim: #E3C9BE;
  --mc-milk-mute: #C4A598;
  /* 差し色（少しだけ） */
  --mc-sky: #9AD9D2;
  --mc-lime: #CFE04A;       /* ピスタチオ */
  --mc-choco: #6B3A2A;      /* マカロンのクリーム */
  /* 書体: 見出し・ボタンは丸ゴシックの極太、本文は読みやすい丸ゴシック */
  --mc-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", ui-rounded, sans-serif;
  --mc-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* 長い文章（規約など）は読みやすさ優先で角ゴシック */
  --mc-read: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}
::selection { background: rgba(var(--mc-fill-rgb), .55); color: #fff; }
/* キーボードで選んだ時の枠（ブラウザ既定の青は使わない） */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--mc-lime); outline-offset: 3px; }

/* ── どのページでも使う部品 ── */

/* マカロンの絵（<svg><use href="#mc-mac"></svg>）の塗り分け。色は親の color で決める */
.mc-mac-shell, .mc-mac-foot { fill: currentColor; }
.mc-mac-shade { fill: rgba(60, 20, 10, .09); }
.mc-mac-cream { fill: var(--mc-choco); }
.mc-mac-shine { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 4; stroke-linecap: round; }

/* ラズベリーの帯の上から、チョコがとろりと垂れる飾り（帯の最初の子に置く） */
.mc-drip {
  display: block; position: absolute; left: 50%; top: -1px; width: 200vw; height: 64px; margin-left: -100vw; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='64' viewBox='0 0 360 64'%3E%3Cpath fill='%232B1712' d='M0 0V16H27Q37 16 37 24V37A13 13 0 0 0 63 37V24Q63 16 73 16H110Q120 16 120 24V26A10 10 0 0 0 140 26V24Q140 16 150 16H190Q200 16 200 24V47A15 15 0 0 0 230 47V24Q230 16 240 16H279Q289 16 289 24V31A11 11 0 0 0 311 31V24Q311 16 321 16H360V0Z'/%3E%3C/svg%3E") repeat-x center top / 360px 64px;
}
/* 帯の上のつぶ（スプリンクル）。ほんの少し */
.mc-sprinkle { position: absolute; width: 20px; height: 7px; border-radius: 4px; pointer-events: none; }