/* 案A「白い調髪室」焼き込み版 — 理容の清潔 (白衣・タイル・消毒液)
   色: 白 #fff / タイル灰 #eef1f3 / 近黒 #17191c / 理容紺 #234a6b / サインポール赤 #a63c46 (警告のみ)
   文法: 角丸0・影なし・hairline #d8dee3。signature = ヘッダー下のサインポール斜め縞
   ※ 色・形の最終調整はデモ後に詰める (2026-08-31 本人裁定「一旦Aで」) */
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* display:flex 等のクラス指定に hidden 属性が負けないように */
body {
  margin: 0; background: #eef1f3; color: #17191c;
  font-family: system-ui, -apple-system, "Hiragino Sans", sans-serif;
  font-size: 16px; line-height: 1.6;
}
.site-head { background: #fff; position: relative; padding: 14px 16px 18px; }
.site-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(-45deg,
    #234a6b 0 12px, #fff 12px 24px, #a63c46 24px 36px, #fff 36px 48px);
}
.site-head h1 { margin: 0; font-size: 22px; letter-spacing: .04em; }
.site-sub { margin: 2px 0 0; color: #5a6672; font-size: 13px; }
.demo-tag { font-size: 13px; border: 1px solid #b9c4cd; color: #5a6672; padding: 1px 6px; vertical-align: middle; font-weight: 400; }

.page { max-width: 560px; margin: 0 auto; padding: 12px 12px 48px; }
.page.wide { max-width: 720px; }

.step { background: #fff; border: 1px solid #d8dee3; padding: 14px; margin-top: 12px; }
.step h2 { margin: 0 0 10px; font-size: 16px; border-bottom: 1px solid #d8dee3; padding-bottom: 8px; letter-spacing: .03em; }
.step-no { display: inline-block; width: 22px; height: 22px; text-align: center; line-height: 22px;
  background: #234a6b; color: #fff; border-radius: 50%; font-size: 13px; margin-right: 4px; }
.opt { font-weight: normal; font-size: 13px; color: #5a6672; }
.hint { color: #5a6672; font-size: 13px; margin: 6px 0; }
.hint.small { font-size: 13px; }
.err { color: #7c2b33; background: #f7e9ea; border: 1px solid #a63c46; padding: 8px 10px; font-size: 13px; }
.notice { color: #7c2b33; background: #fbf5f0; border: 1px solid #e0cdb9; padding: 8px 10px; font-size: 13px; margin: 10px 0 0; }

label { display: block; margin: 10px 0; font-size: 13px; font-weight: 600; }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  font-size: 16px; font-weight: 400; border: 1px solid #b9c4cd; background: #fff;
}
input:focus, select:focus { outline: 2px solid #234a6b; outline-offset: -1px; }
input.invalid { border-color: #a63c46; }
input.invalid:focus { outline-color: #a63c46; }
.field-err { display: block; font-weight: 400; color: #a63c46; font-size: 13px; margin-top: 4px; }
button { font: inherit; cursor: pointer; }

a.hub-link { text-decoration: none; color: inherit; margin-top: 12px; }
.back-link { font-size: 13px; color: #234a6b; text-decoration: none; font-weight: 600; }

.choice-list { display: grid; gap: 8px; }
.choice { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 12px; border: 1px solid #b9c4cd; background: #fff; text-align: left; }
.choice.on { border: 1px solid #234a6b; background: #234a6b; color: #fff; }
.choice-name { font-weight: 600; }
.choice-desc { display: block; font-weight: 400; font-size: 13px; color: #5a6672; margin-top: 2px; }
.choice.on .choice-desc { color: #cfdbe6; }
.choice-meta { color: #5a6672; font-size: 13px; white-space: nowrap; text-align: right; }
.choice.on .choice-meta { color: #cfdbe6; }
.tag { display: inline-block; font-size: 13px; font-weight: 700; color: #a63c46; border: 1px solid #a63c46; padding: 0 6px; margin-left: 4px; }
.choice.on .tag { color: #f0c9cd; border-color: #f0c9cd; }

.chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.chip { flex: 0 0 auto; min-width: 64px; padding: 8px 10px; border: 1px solid #b9c4cd; background: #fff; text-align: center; }
.chip.on { border: 1px solid #234a6b; background: #234a6b; color: #fff; }
.chip:disabled { color: #6f6f6f; }
.chip-dow { display: block; font-size: 13px; color: #5a6672; }
.chip.on .chip-dow { color: #cfdbe6; }
.chip-dow.sun { color: #a63c46; } .chip-dow.sat { color: #234a6b; }
.chip.on .chip-dow.sun { color: #f0c9cd; }
.chip.on .chip-dow.sat { color: #cfdbe6; }

.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot { padding: 10px 0; border: 1px solid #b9c4cd; background: #fff; }
.slot.on { border: 1px solid #234a6b; background: #234a6b; color: #fff; }
.slot:disabled { color: #93a1ac; text-decoration: line-through; }

.primary { display: block; width: 100%; margin-top: 14px; padding: 14px;
  background: #234a6b; color: #fff; border: none; font-size: 16px; }
.primary:disabled { background: #5f707e; }
.ghost { padding: 8px 12px; background: #fff; border: 1px solid #b9c4cd; }

.total-box .total-row { display: flex; justify-content: space-between; font-size: 13px; color: #5a6672; padding: 2px 0; }
.total-box .total-sum { font-size: 16px; color: #17191c; font-weight: 700; border-top: 1px solid #d8dee3; margin-top: 6px; padding-top: 8px; }
.dup-box { background: #fbf5f0; border: 1px solid #e0cdb9; padding: 10px 12px; margin-top: 12px; font-size: 13px; }
.dup-box p { margin: 0 0 8px; }

.done-box h2 { font-size: 22px; }
.detail { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0; }
.detail dt { color: #5a6672; font-size: 13px; }
.detail dd { margin: 0; }

/* ── 店側ボード ── */
.board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.date-nav { display: flex; align-items: center; gap: 6px; }
.board-head .primary { width: auto; margin: 0; padding: 10px 14px; }
.filter-row { margin-top: 12px; }

.res-row { display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border: 1px solid #d8dee3; padding: 10px 12px; margin-top: 8px; }
.res-row.st-cancelled, .res-row.st-noshow { background: #e6eaee; color: #7a8794; }
.res-time { font-size: 22px; font-weight: 700; min-width: 64px; color: #234a6b; font-variant-numeric: tabular-nums; }
.res-row.st-cancelled .res-time, .res-row.st-noshow .res-time { color: #7a8794; }
.res-end { display: block; font-size: 13px; font-weight: 400; color: #6f6f6f; }
.res-main { flex: 1; }
.res-name { font-size: 16px; font-weight: 600; }
.res-phone { font-weight: 400; color: #5a6672; font-size: 13px; margin-left: 4px; }
.res-meta { color: #5a6672; font-size: 13px; }
.store-tag { display: inline-block; font-size: 13px; border: 1px solid #b9c4cd; color: #45525f; padding: 0 5px; margin-right: 2px; }
.res-side { text-align: right; }
.status { font-size: 13px; border: 1px solid #b9c4cd; color: #45525f; padding: 1px 6px; }
.res-actions { margin-top: 6px; display: flex; gap: 4px; justify-content: flex-end; }
.res-actions button { font-size: 13px; padding: 4px 8px; border: 1px solid #b9c4cd; background: #fff; }
.res-actions .danger { background: #a63c46; color: #fff; border-color: #a63c46; }

/* 狭幅ではアクション類を下段へ回し、名前+バッジの幅を確保する */
@media (max-width: 560px) {
  .res-row { flex-wrap: wrap; }
  .res-main { flex: 1 1 0; min-width: 0; }
  .res-side { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
  .res-actions { margin-top: 0; }
  .badge { white-space: nowrap; }
}

.badge { display: inline-block; font-size: 13px; font-weight: 700; padding: 1px 8px; margin-left: 6px;
  background: #a63c46; color: #fff; }
.badge.cancel { background: #fff; color: #234a6b; border: 1px solid #234a6b; }
.repeat-ok { color: #23604b; border: 1px solid #23604b; padding: 0 5px; font-size: 13px; }

.cust-card { border: 1px solid #d8dee3; background: #f7f9fa; padding: 10px 12px; margin-top: 8px; }
.cust-head { font-weight: 600; }
.cust-note { font-size: 13px; color: #5a6672; }
.hist { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.hist li { padding: 3px 0; border-top: 1px dashed #e3e8ec; }
.hist li.st-noshow { font-weight: 700; color: #a63c46; }

dialog { border: 1px solid #234a6b; padding: 0; width: min(92vw, 480px); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.modal-box { padding: 16px; margin: 0; }
.modal-box h2 { margin: 0 0 8px; font-size: 22px; }
.row2 { display: flex; gap: 8px; }
.row2 > * { flex: 1; }
.row2 .primary, .row2 .ghost { margin-top: 14px; }