/* あおば製菓 工場見学予約システム — 静的モック
   値はデザインガイドライン（Aoba / Tokens）と Figma「プロトタイプ（見学予約）」に合わせている */

@import url("../fonts/noto-sans-jp.css");

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-symbols-rounded.woff2") format("woff2");
}

/* ---------- トークン ---------- */
:root {
  --primary: #1f5c4a;
  --on-primary: #ffffff;
  --primary-container: #e4f0eb;
  --on-primary-container: #123a2f;
  --accent: #b4531a;
  --accent-container: #fbeadf;
  --on-accent-container: #7a3410;
  --background: #fbf9f6;
  --surface: #ffffff;
  --surface-variant: #f3f1ed;
  --outline: #7a817e;
  --outline-variant: #e2e8f0;
  --on-surface: #1d2321;
  --on-surface-variant: #4d5652;
  --warning: #8a4b00;
  --warning-container: #fff0d4;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --disabled: #8e9592;
  --disabled-container: #eceeed;

  --radius: 24px;
  --radius-button: 20px;
  --radius-full: 999px;
  --elevation-card: 4px 4px 30px rgba(0, 0, 0, 0.07);
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td { padding: 0; text-align: left; font-weight: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ---------- アイコン（Material Symbols Rounded） ---------- */
.ms {
  flex: none;
  display: inline-block;
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  width: 1em;
  height: 1em;
  overflow: hidden;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.ms-12 { font-size: 12px; } .ms-14 { font-size: 14px; } .ms-16 { font-size: 16px; }
.ms-18 { font-size: 18px; } .ms-24 { font-size: 24px; } .ms-28 { font-size: 28px; }
.ms-40 { font-size: 40px; }
.icon-primary { color: var(--primary); }
.icon-error { color: var(--error); }

/* ---------- 文字 ---------- */
.title { font-size: 28px; font-weight: 700; line-height: 1.4; }
.admin .title { font-size: 24px; }
.lead { font-size: 14px; color: var(--on-surface-variant); }
.card-title { font-size: 18px; font-weight: 500; line-height: 1.4; }
.card-title--lg { font-size: 20px; }
.card-title--sm { font-size: 16px; }
.text-14 { font-size: 14px; }
.note { font-size: 12px; color: var(--on-surface-variant); }
.muted { color: var(--on-surface-variant); }
.medium { font-weight: 500; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.required { font-size: 12px; font-weight: 500; color: var(--accent); }
.optional { font-size: 12px; font-weight: 400; color: var(--on-surface-variant); }

/* ---------- 並べ方 ---------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row--top { align-items: flex-start; }
.row--end { align-items: flex-end; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 0; min-width: 0; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* ---------- ロゴ ---------- */
.logo { width: 120px; height: 40px; }
.logo--lg { width: 150px; height: 50px; }

/* ---------- ボタン ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
/* 見た目は 40px のまま、タップ領域を上下に広げて 48px にする */
.btn::after { content: ""; position: absolute; inset: -5px -1px; }
.btn--lg { height: 48px; }
.btn--lg::after { inset: -1px; }
.btn--block { width: 100%; }
.btn--grow { flex: 1 1 0; min-width: 0; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--accent { background: var(--accent); color: var(--on-primary); }
.btn--danger { background: var(--error); color: var(--on-primary); }
.btn--secondary { background: var(--surface); border-color: var(--outline-variant); color: var(--primary); }
.btn--danger-outline { background: var(--surface); border-color: var(--error); color: var(--error); }
.btn--disabled, .btn:disabled {
  background: var(--disabled-container); color: var(--disabled); cursor: not-allowed;
}

/* 文字リンク */
.link { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.text-link {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--primary); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.text-link--gap-4 { gap: 4px; }
.tap-48 { min-height: 48px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-full); color: var(--on-surface-variant);
}
.icon-btn--48 { width: 48px; height: 48px; }
.icon-btn--primary { color: var(--primary); }

/* ---------- カード・案内 ---------- */
.card {
  display: flex; flex-direction: column;
  padding: 28px 24px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--elevation-card);
}
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-head--pb { padding-bottom: 8px; }

.callout {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 16px;
  background: var(--surface-variant);
  border-radius: var(--radius);
  font-size: 14px; line-height: 1.6;
}
.callout--tight { padding: 12px; line-height: 1.5; }
.callout > .ms { color: var(--on-surface-variant); }
.callout--error { background: var(--error-container); color: var(--on-error-container); }
.callout--error > .ms { color: inherit; }
.callout__title { font-weight: 500; line-height: 1.5; }

.inset-box { padding: 16px; background: var(--background); border-radius: var(--radius); }
.inset-box--variant { background: var(--surface-variant); }

.selected-slot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--radius);
  line-height: 1.5;
}
.selected-slot > .ms { color: var(--primary); }
.selected-slot__label { font-size: 12px; }
.selected-slot__value { font-size: 16px; font-weight: 500; }

.hero-icon {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: var(--primary-container); color: var(--primary);
}
.hero-icon--neutral { background: var(--surface-variant); color: var(--on-surface-variant); }

.icon-circle {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--primary-container); color: var(--primary);
}
.icon-circle--56 { width: 56px; height: 56px; }
.icon-circle--neutral { background: var(--surface-variant); color: var(--on-surface-variant); }
.icon-circle--off { background: var(--disabled-container); color: var(--on-surface-variant); }
.num-circle {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--primary-container); color: var(--primary);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.num-circle--neutral {
  background: var(--surface-variant); color: var(--on-surface-variant);
  font-size: 12px; font-weight: 500;
}

/* ---------- 項目と値の行 ---------- */
.meta { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--outline-variant); font-size: 14px; line-height: 1.5; }
.meta:last-child { border-bottom: 0; }
.meta dt { flex: none; width: var(--meta-w, 96px); color: var(--on-surface-variant); }
.meta dd { flex: 1 1 0; min-width: 0; font-weight: 500; }
.meta-list--tight .meta { padding: 10px 0; }

/* ---------- バッジ ---------- */
.badge, .pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.badge { height: 24px; padding: 0 10px 0 8px; }
.pill { padding: 0 8px; }
.is-ok { background: var(--primary-container); color: var(--primary); }
.is-warn { background: var(--warning-container); color: var(--warning); }
.is-off { background: var(--disabled-container); color: var(--on-surface-variant); }
.is-neutral { background: var(--surface-variant); color: var(--on-surface-variant); }
.is-neutral-strong { background: var(--surface-variant); color: var(--on-surface); }
.is-error { background: var(--error-container); color: var(--on-error-container); }
.is-count { background: var(--accent); color: var(--on-primary); font-weight: 700; }

/* ---------- 入力 ---------- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.label-row { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.input-wrap { position: relative; display: block; }
.input-wrap > .ms { position: absolute; top: 14px; right: 16px; color: var(--on-surface-variant); pointer-events: none; }
.input-wrap > button.ms { pointer-events: auto; }
.input, .textarea {
  display: block; width: 100%;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  font-size: 16px; line-height: 1.5;
  color: var(--on-surface);
  appearance: none;
}
.input { height: 48px; padding: 0 16px; }
.input--icon { padding-right: 44px; }
.textarea { padding: 12px 16px; resize: none; }
.textarea--14 { font-size: 14px; }
.input::placeholder, .textarea::placeholder { color: var(--on-surface-variant); opacity: 1; }
.input:focus, .textarea:focus, .is-focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.input.is-error { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.helper { font-size: 12px; color: var(--on-surface-variant); }
.helper--error { display: flex; align-items: flex-start; gap: 4px; color: var(--error); }
.helper--error .ms { margin-top: 1px; }

/* チェックボックス（角丸 6px） */
.checkbox { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 14px; cursor: pointer; }
.checkbox input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.checkbox__box {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border: 1.5px solid var(--outline); border-radius: 6px;
  background: var(--surface); color: transparent;
}
.checkbox input:checked + .checkbox__box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 行全体が押せるラジオ */
.radio-row {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius);
  font-size: 16px; cursor: pointer;
}
.radio-row input, .radio-inline input, .slot input, .segmented input { position: absolute; opacity: 0; pointer-events: none; }
.radio-row .ms, .radio-inline .ms { color: var(--outline); }
.radio-row .on, .radio-inline .on, .slot .on { display: none; }
.radio-row:has(input:checked) { background: var(--primary-container); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 500; }
.radio-row:has(input:checked) .on, .radio-inline:has(input:checked) .on { display: inline-block; color: var(--primary); }
.radio-row:has(input:checked) .off, .radio-inline:has(input:checked) .off { display: none; }
.radio-row:has(input:focus-visible), .radio-inline:has(input:focus-visible), .slot:has(input:focus-visible), .segmented label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.radio-inline { display: inline-flex; align-items: center; gap: 8px; height: 48px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.radio-inline:has(input:checked) { font-weight: 500; }

/* 切り替え（台数・ステータス） */
.segmented { display: flex; border: 1px solid var(--outline); border-radius: var(--radius); overflow: hidden; }
.segmented label {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 48px; padding: 0 16px;
  background: var(--surface); font-weight: 500; white-space: nowrap; cursor: pointer;
}
.segmented label + label { border-left: 1px solid var(--outline); }
.segmented--fill label { flex: 1 1 0; font-size: 16px; }
.segmented--fill label + label { border-left: 0; }
.segmented--14 label { font-size: 14px; }
.segmented .ms { display: none; }
.segmented label:has(input:checked) { background: var(--primary); color: var(--on-primary); }
.segmented label:has(input:checked) .ms { display: inline-block; }

/* 人数の −／＋ */
.stepper-num { display: inline-flex; align-items: center; align-self: flex-start; border: 1px solid var(--outline); border-radius: var(--radius); }
.stepper-num button { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--primary); }
.stepper-num button:disabled { color: var(--disabled); cursor: not-allowed; }
.stepper-num output {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 48px;
  border-left: 1px solid var(--outline-variant); border-right: 1px solid var(--outline-variant);
  font-weight: 500;
}

/* スイッチ */
.switch { position: relative; flex: none; width: 52px; height: 32px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { display: block; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--outline); transition: background .15s; }
.switch__track::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px;
  border-radius: var(--radius-full); background: var(--surface); transition: transform .15s;
}
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 曜日の丸いトグル */
.weekday-toggle { display: flex; gap: 6px; }
.weekday-toggle label {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--outline); border-radius: var(--radius-full);
  background: var(--surface); font-size: 14px; font-weight: 500; cursor: pointer;
}
.weekday-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-toggle label:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.weekday-toggle label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
  background: var(--surface-variant); border-radius: var(--radius-full); font-size: 12px; white-space: nowrap;
}
.chip button { display: flex; color: var(--on-surface-variant); }

/* ==========================================================
   見学者向け（スマートフォン 390px 基準）
   ========================================================== */
.visitor .app {
  display: flex; flex-direction: column;
  width: 100%; max-width: 430px; min-height: 100vh; min-height: 100dvh;
  margin: 0 auto;
  background: var(--background);
}
@media (min-width: 600px) {
  .visitor { background: var(--surface-variant); }
  .visitor .app { box-shadow: 0 0 0 1px var(--outline-variant); }
}
.v-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; flex: none;
  height: 56px; padding: 0 20px;
  background: var(--surface); border-bottom: 1px solid var(--outline-variant);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__divider { width: 1px; height: 24px; background: var(--outline-variant); }
.brand__name { font-size: 14px; font-weight: 500; color: var(--primary); white-space: nowrap; }
.signout { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 48px; font-size: 14px; color: var(--on-surface-variant); white-space: nowrap; }

.steps { display: flex; flex: none; padding: 12px 20px; background: var(--surface); }
.step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; }
.step__dot {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid var(--outline); border-radius: 12px;
  background: var(--surface); font-size: 12px; font-weight: 500; line-height: 1;
}
.step.is-done, .step.is-current { color: var(--primary); }
.step.is-done .step__dot, .step.is-current .step__dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.step.is-current { font-weight: 500; }
.step.is-current .step__dot { font-weight: 700; }

.screen { flex: 1 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 24px 20px 32px; }
.screen--hero { padding-top: 40px; }
.screen--done { padding-top: 32px; padding-bottom: 109px; }

.action-bar {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 12px 20px 24px;
  background: var(--surface); border-top: 1px solid var(--outline-variant);
}
.action-bar--stack { flex-direction: column; align-items: stretch; gap: 8px; }
.action-bar__slot { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.action-bar__slot .ms { color: var(--accent); }

/* カレンダー */
.calendar { padding: 24px 4px; gap: 8px; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 24px; }
.today-btn {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 40px; border: 1px solid var(--outline-variant); border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: var(--primary);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 8px; }
.cal-weekday { display: flex; align-items: center; justify-content: center; height: 24px; font-size: 12px; color: var(--on-surface-variant); }
.day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 60px; font-size: 12px; line-height: 1.5; white-space: nowrap;
  color: var(--disabled);
}
.day__num {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 18px;
  font-size: 16px; line-height: 1;
}
.day--open { color: var(--primary); font-weight: 500; cursor: pointer; }
.day--open .day__num { border: 1.5px solid var(--primary); color: var(--primary); }
.day--few .day__label { color: var(--warning); }
.day--full { color: var(--on-surface-variant); font-weight: 500; }
.day--full .day__num { background: url("../img/slash.svg") center / 36px 36px no-repeat; font-weight: 400; }
.day--private .ms { color: var(--on-surface-variant); }
.day--open[aria-pressed="true"] { color: var(--accent); }
.day--open[aria-pressed="true"] .day__num { background: var(--accent); border-color: var(--accent); color: var(--on-primary); font-weight: 700; }
.day--open[aria-pressed="true"] .day__label { color: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 0; }

/* 時間帯カード */
.slot {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: var(--surface); border: 2px solid transparent; border-radius: var(--radius);
  box-shadow: var(--elevation-card);
  white-space: nowrap; cursor: pointer;
}
.slot > .ms { color: var(--outline); }
.slot__time { font-size: 18px; font-weight: 500; line-height: 1.4; }
.slot__rest { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--on-surface-variant); }
.slot:has(input:checked) { background: var(--accent-container); border-color: var(--accent); }
.slot:has(input:checked) .on { display: inline-block; color: var(--accent); }
.slot:has(input:checked) .off { display: none; }
.slot--full { background: var(--disabled-container); box-shadow: none; color: var(--on-surface-variant); cursor: not-allowed; }
.slot--full > .ms { color: var(--disabled); }

.companion-head { display: flex; align-items: center; justify-content: space-between; font-weight: 500; }
.delete-link { display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 72px; height: 48px; color: var(--error); font-size: 14px; font-weight: 500; }

.resv-no { font-size: 24px; font-weight: 500; line-height: 1.4; white-space: nowrap; }

/* ==========================================================
   管理者向け（PC 1280px 基準）
   ========================================================== */
.admin { min-width: 1280px; }
.admin-shell { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar { flex: none; width: 240px; background: var(--surface); border-right: 1px solid var(--outline-variant); }
.sidebar__inner {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 4px;
  height: 100vh; padding: 20px 12px;
}
.sidebar__brand { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 20px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; flex: none;
  height: 48px; padding: 0 12px; border-radius: var(--radius);
  font-size: 14px;
}
.nav-item .ms { color: var(--on-surface-variant); }
.nav-item > span:nth-child(2) { flex: 1 1 0; min-width: 0; }
.nav-item[aria-current="page"] { background: var(--primary-container); color: var(--on-primary-container); font-weight: 500; }
.nav-item[aria-current="page"] .ms { color: var(--primary); }
.nav-item:not([aria-current]):hover { background: var(--surface-variant); }
.sidebar__spacer { flex: 1 1 0; }
.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--outline-variant); line-height: 1.5; white-space: nowrap; }

.main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 32px 32px 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; }
.breadcrumb a { color: var(--primary); font-weight: 500; }
.columns { display: flex; align-items: flex-start; gap: 24px; }

.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px; }
.login-card { width: 440px; padding: 40px; gap: 24px; }
.otp { display: flex; align-items: center; justify-content: center; gap: 8px; }
.otp input {
  width: 48px; height: 56px; padding: 0; text-align: center;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius);
  font-size: 24px; font-weight: 500; line-height: 1;
}
.otp input:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.otp span { font-size: 20px; color: var(--on-surface-variant); }

/* KPI */
.kpi { flex: 1 1 0; min-width: 0; gap: 8px; }
.kpi__label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-surface-variant); white-space: nowrap; }
.kpi__value { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.kpi__value strong { font-size: 32px; font-weight: 500; line-height: 1.3; }
.kpi__value span { font-size: 14px; color: var(--on-surface-variant); }

/* 表（白いカードの中） */
.table-card { padding: 0; overflow: hidden; }
.table-card__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 16px; white-space: nowrap; }
.table-card__foot { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 28px; border-top: 1px solid var(--outline-variant); }
.table { table-layout: fixed; font-size: 14px; line-height: 1.5; }
.table th { height: 40px; background: var(--surface-variant); font-size: 12px; font-weight: 500; color: var(--on-surface-variant); white-space: nowrap; }
.table thead tr { border-top: 1px solid var(--outline-variant); }
.table--flush thead tr { border-top: 0; }
.table td { height: 64px; padding-right: var(--table-gap, 16px); vertical-align: middle; }
.table th { padding-right: var(--table-gap, 16px); }
.table tbody tr { border-top: 1px solid var(--outline-variant); }
.table th:first-child, .table td:first-child { padding-left: var(--table-px, 28px); }
.table th:last-child, .table td:last-child { padding-right: var(--table-px, 28px); }
.table--56 td { height: 56px; }
.table--44 td, .table--44 th { height: 44px; }
.table .sub { display: block; font-size: 12px; color: var(--on-surface-variant); }
.table .name { display: block; font-weight: 500; }
.table tr.is-muted td, .table tr.is-muted .name, .table td.is-muted { color: var(--on-surface-variant); }
.table tr.is-error { background: none; color: inherit; }
.table tr.is-error td { background: var(--error-container); }
.table tr.is-selected td { background: var(--primary-container); }
.table tr.group th {
  height: 40px; padding-left: 20px; background: var(--background);
  font-size: 14px; color: var(--on-surface);
}
.group__inner { display: flex; align-items: center; gap: 12px; }
.group__inner .ms { color: var(--primary); }
.cell-error { display: inline-flex; align-items: center; gap: 4px; color: var(--error); font-size: 12px; font-weight: 500; white-space: nowrap; }
.table-box { border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; }

.pagination { display: flex; align-items: center; gap: 4px; }
.pagination > * {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500;
}
.pagination .ms { color: var(--primary); }
.pagination [aria-current="page"] { background: var(--primary); color: var(--on-primary); }

/* 通知 */
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--outline-variant); }
.notice:last-child { padding-bottom: 28px; }
.notice__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.notice__top { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-surface-variant); }
.notice__top .kind { font-weight: 500; }
.notice__top .kind--new { color: var(--primary); }
.notice .text-link { padding-top: 4px; align-self: flex-start; }

/* 予約枠カレンダー（管理） */
.slot-cal { flex: 1 1 0; min-width: 0; padding: 20px 16px; gap: 12px; }
.slot-cal__head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.slot-cal .today-btn { height: 32px; border-radius: var(--radius-full); font-size: 12px; }
.slot-cal .cal-weekday { height: 20px; align-items: flex-start; }
.slot-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--outline-variant); }
.slot-day { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 112px; padding: 6px 4px 8px; font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.slot-day.is-closed { color: var(--disabled); }
.slot-day.is-closed small { font-size: 12px; font-weight: 400; }
.slot-chip {
  display: flex; align-items: center; gap: 2px; width: 100%; height: 22px; padding: 0 6px;
  border: 2px solid transparent; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 500; line-height: 1.4; text-align: left;
}
.slot-chip[aria-pressed="true"] { background: var(--accent-container); border-color: var(--accent); color: var(--on-accent-container); }

.edit-panel { flex: none; width: 320px; gap: 16px; }
.form-card { width: 640px; gap: 24px; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 24px; border-top: 1px solid var(--outline-variant); }

.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  height: 200px; background: var(--background);
  border: 1.5px dashed var(--outline); border-radius: var(--radius);
}

/* 変更内容 */
.diff { border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; }
.diff__row { display: flex; align-items: stretch; }
.diff__row + .diff__row { border-top: 1px solid var(--outline-variant); }
.diff__key { flex: none; width: 96px; padding: 10px 12px; background: var(--surface-variant); font-size: 12px; color: var(--on-surface-variant); }
.diff__val { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; font-size: 13px; }
.diff__val > div { display: flex; align-items: center; gap: 6px; }
.diff__val del { color: var(--on-surface-variant); }
.diff__val ins { font-weight: 500; text-decoration: none; }

/* ダイアログ */
.dialog {
  width: 480px; max-width: calc(100vw - 32px); padding: 32px;
  border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--on-surface);
  box-shadow: var(--elevation-card);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.dialog[open] { display: flex; flex-direction: column; gap: 20px; }

/* ==========================================================
   画面一覧（モックの案内ページ）
   ========================================================== */
.index { max-width: 960px; margin: 0 auto; padding: 48px 32px 64px; display: flex; flex-direction: column; gap: 32px; }
.index-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.index-item { padding: 20px 24px; gap: 4px; }
.index-item:hover { outline: 2px solid var(--primary); }
.index-item__id { font-size: 12px; font-weight: 500; color: var(--primary); }
.index-item__name { font-weight: 500; }
@media (max-width: 599px) { .index { padding: 32px 20px 48px; } }

/* 画面一覧への FAB */
.fab-index { position: fixed; bottom: 20px; right: 20px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.fab-index:hover { transform: scale(1.1); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.index-page .fab-index { display: none; }