/* ましろ文具店の見た目（本体サイト mashiro-bungu.jp に合わせる）
 * 予約フォームの共通の見た目の上に重ねて読み込む。
 * ほかの案件では、このファイルを差し替える（無ければ共通の見た目のまま）。
 *   文字   : Zen Maru Gothic・こげ茶 #50473f
 *   背景   : 生成り #fbf9f4 ＋ 26px の方眼
 *   色     : ピンク #c2727a ／ ゴールド #bda169 ／ 淡いピンク #ecb0ad
 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

:root {
  --c: #c2727a;
  --ink: #50473f;
  --sub: #8c8478;
  --line: rgba(120, 108, 94, .16);
  --bg: #fbf9f4;
  --card: rgba(255, 255, 255, .78);
  --gold: #bda169;
}

body {
  font-family: 'Zen Maru Gothic', "Hiragino Maru Gothic ProN", sans-serif;
  color: var(--ink);
  background-color: #fbf9f4;
  background-image:
    linear-gradient(rgba(120, 108, 94, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 108, 94, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  letter-spacing: .02em;
}

/* カード：HPのカードと同じ（半透明の白・細い枠・やわらかい影） */
.card {
  background: var(--card);
  border: 1px solid rgba(120, 108, 94, .14);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(80, 60, 50, .07);
}

/* ── お客様の予約ページ ── */
h1 { color: #c2727a; font-weight: 900; letter-spacing: .04em; }
.site { color: #bda169; font-weight: 700; }
.step { color: #c77f86; }
.slot { background: rgba(255, 255, 255, .85); border-color: rgba(120, 108, 94, .18); }
.slot.sel { background: #fdf3f2; border-color: #c2727a; }
.slot .st { color: #c77f86; }
.slot .d .lb { color: #c77f86; }
.req { background: #c77f86; }
.btn { box-shadow: 0 3px 0 rgba(160, 90, 98, .25); }
.btn.ghost { box-shadow: none; }
.done .code { color: #c2727a; }
.msg { background: #fdf0ee; border-color: #ecb0ad; }

/* ── 管理画面 ── */
header.top {
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid rgba(120, 108, 94, .14);
  backdrop-filter: blur(4px);
}
#siteName { color: #c2727a; font-weight: 900; letter-spacing: .04em; }
.btn.plain, .btn.sub { background: rgba(255, 255, 255, .9); }
.tabs a { background: rgba(255, 255, 255, .85); border-color: rgba(120, 108, 94, .16); }
.hint { background: #fbf6ec; border-color: #e7d0aa; color: #6b6155; }
.fq { background: rgba(253, 251, 247, .9); }
th { color: #a89c8c; }

/* 印刷（名簿・PDF）は白い紙に */
@media print {
  body { background: #fff !important; background-image: none !important; }
  .card { box-shadow: none; }
}