/* カフェ向けアプリ: 配色・形・余白はデザイン方針(docs/cafe-app-design-guide.md)に従う。
   色は変数だけで定義し、直書きしない（先方の希望で1か所から差し替えられるように） */
:root {
  --bg: #FFF7ED;
  --fg: #431407;
  --pri: #CC4A0C;
  --pri-fg: #FFFFFF;
  --card: #FFFFFF;
  --bd: #FED7AA;
  --hd: #FFEDD5;
  --mut: #7C4A2D;
  --acc: #FDBA74;
  --danger: #B91C1C;
  --danger-bg: #FECACA;
  --ok: #166534;
  --ok-bg: #DCFCE7;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --radius: 12px;
  --nav-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}
h1, h2 { margin: 0; font-weight: 500; line-height: 1.4; }
h2 { font-size: 18px; margin-bottom: var(--sp-3); }
a { color: var(--pri); }
.icon { flex: none; }
.muted { color: var(--mut); font-size: 14px; }

/* ---- 部品 ---- */
.card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
label { display: block; margin: var(--sp-3) 0 var(--sp-1); font-weight: 500; font-size: 14px; color: var(--mut); }
input, select {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--fg);
  font: inherit;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--pri); border-radius: var(--radius);
  background: var(--pri); color: var(--pri-fg);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.btn-sub { background: var(--card); color: var(--pri); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--fg); outline-offset: 2px;
}
.notice {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); padding: var(--sp-3);
  border-radius: var(--radius); font-weight: 500;
}
.notice-error { background: var(--danger-bg); color: var(--danger); }
.notice-ok { background: var(--ok-bg); color: var(--ok); }
.badge {
  display: inline-block; padding: 0 var(--sp-3);
  border-radius: 999px; background: var(--acc); color: var(--fg);
  font-size: 14px; font-weight: 500;
}

/* ---- ログイン ---- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}
.login-card { width: 100%; max-width: 400px; margin: 0; }
.login-card h1 { font-size: 22px; margin-bottom: var(--sp-2); }

/* ---- 全体の枠 ---- */
.app { min-height: 100vh; }
.main { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  position: sticky; top: 0; z-index: 10;
  min-height: 56px; padding: var(--sp-2) var(--sp-4);
  padding-top: calc(var(--sp-2) + env(safe-area-inset-top));
  background: var(--pri); color: var(--pri-fg);
}
.topbar-title { font-size: 18px; }
.topbar-back {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--pri-fg); border-radius: 999px;
  color: var(--pri-fg); text-decoration: none; font-size: 14px; font-weight: 500;
}
.content {
  flex: 1; width: 100%; max-width: 1280px; margin: 0 auto;
  padding: var(--sp-4);
  padding-bottom: calc(var(--nav-h) + var(--sp-6) + env(safe-area-inset-bottom));
}
.lead { margin: 0 0 var(--sp-4); }

/* ---- 下部ナビ（スマホ） ---- */
.sidebar { display: none; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; background: var(--card); border-top: 1px solid var(--bd);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-link {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--nav-h); color: var(--mut); text-decoration: none; font-size: 12px;
}
.nav-link.is-active { color: var(--pri); font-weight: 500; }

/* ---- 入口 ---- */
.entrance-cards { display: grid; gap: var(--sp-4); }
.entrance-card {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-4);
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius);
  color: var(--fg); text-decoration: none;
}
.entrance-card .icon { width: 32px; height: 32px; color: var(--pri); }
.entrance-title { font-size: 20px; font-weight: 500; }
.entrance-sub { color: var(--mut); font-size: 14px; }
.link-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.link-list a { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }

/* ---- ユーザー管理 ---- */
.user-list { list-style: none; margin: 0; padding: 0; }
.user-item { padding: var(--sp-4) 0; border-top: 1px solid var(--bd); }
.user-item:first-child { border-top: 0; padding-top: 0; }
.user-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.inline-form .btn { margin-top: var(--sp-2); }


/* ---- 追加部品 ---- */
textarea {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bd); border-radius: var(--radius);
  background: var(--card); color: var(--fg); font: inherit; resize: vertical;
}
textarea:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.btn-danger { background: var(--card); color: var(--danger); border-color: var(--danger); }
.btn-icon { min-width: 44px; padding: var(--sp-2); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.row-actions { display: flex; gap: var(--sp-2); }
.back-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; }
.badge .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-due { background: var(--hd); color: var(--fg); }
.flash { align-items: center; }
.flash-text { flex: 1; }
.flash form { margin: 0; }
.flash-undo {
  min-height: 44px; padding: 0 var(--sp-3); border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-weight: 500; cursor: pointer;
}

/* ---- Todo ---- */
.tabs {
  display: flex; gap: var(--sp-2); overflow-x: auto; margin: 0 calc(var(--sp-4) * -1) var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-1); scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--bd); border-radius: 999px; background: var(--card);
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.tab.is-active { background: var(--pri); border-color: var(--pri); color: var(--pri-fg); font-weight: 500; }
.tab-count { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .85; margin-left: var(--sp-1); }
.tab-tools { margin: 0 0 var(--sp-3); text-align: right; font-size: 14px; }
.todo-columns { display: grid; gap: var(--sp-4); }
.column-title { font-size: 16px; margin-bottom: var(--sp-2); }
.column-title a { color: var(--fg); text-decoration: none; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.todo-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius);
}
.todo-item form { margin: 0; }
.check {
  flex: none; width: 44px; height: 44px; margin: -4px 0 -4px -4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--pri-fg);
}
.check::before {
  content: ''; position: absolute; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--pri); background: var(--card);
}
.check { position: relative; }
.check .icon { position: relative; width: 22px; height: 22px; stroke-width: 2.4; }
.check.is-checked::before { background: var(--pri); }
.todo-body { flex: 1; min-width: 0; color: var(--fg); text-decoration: none; display: block; }
.todo-title { display: block; font-weight: 500; overflow-wrap: anywhere; }
.is-done .todo-title { text-decoration: line-through; color: var(--mut); font-weight: 400; }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: 14px; }
.todo-memo { display: block; margin-top: var(--sp-1); color: var(--mut); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { margin: 0; padding: var(--sp-4); border: 1px dashed var(--bd); border-radius: var(--radius); color: var(--mut); }
.done-box { margin-top: var(--sp-6); }
.done-box summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--mut); font-weight: 500; }
.done-box .todo-list { margin-top: var(--sp-2); }
.fab {
  position: fixed; right: var(--sp-4); z-index: 9;
  bottom: calc(var(--nav-h) + var(--sp-4) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-4) 0 var(--sp-3);
  border-radius: 999px; background: var(--pri); color: var(--pri-fg);
  text-decoration: none; font-weight: 500; border: 2px solid var(--card);
}


/* ---- ホーム画面への追加の案内 ---- */
.steps { margin: 0; padding-left: var(--sp-6); }
.steps li { margin-bottom: var(--sp-2); }
[hidden] { display: none !important; }

/* ---- 通知の設定 ---- */
.push-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.push-actions .btn { margin-top: 0; }
.push-prefs { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--bd); }
.push-prefs h3 { margin: 0 0 var(--sp-2); font-size: 16px; font-weight: 500; }
.check-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; margin: 0; color: var(--fg); font-size: 16px; font-weight: 400; }
.check-row input { width: 24px; min-height: 24px; height: 24px; flex: none; accent-color: var(--pri); }


/* ---- 在庫 ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.badge-soon { background: var(--acc); color: var(--fg); }
.low-summary { margin-bottom: var(--sp-3); }
.stock-filter { margin-bottom: var(--sp-3); }
.stock-filter label { margin-top: 0; }
.filter-row { display: flex; gap: var(--sp-2); }
.filter-row .btn { margin-top: 0; flex: none; }
.filter-more { margin-top: var(--sp-2); }
.filter-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--mut); font-weight: 500; }
.tab-tools { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.tab-tools a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; }
.tab-tools .icon { width: 18px; height: 18px; }
.stock-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.stock-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius);
}
.stock-card.is-low { border-color: var(--danger); }
.stock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--fg); text-decoration: none; }
.stock-name { font-weight: 500; overflow-wrap: anywhere; }
.stock-sub { font-size: 14px; }
.stock-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.stock-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bd); margin-bottom: var(--sp-1); }
.stepper { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.stepper form { margin: 0; }
.qty-btn {
  width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pri); border-radius: 999px; background: var(--card); color: var(--pri); cursor: pointer;
}
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-num { min-width: 48px; text-align: center; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qty-num small { font-size: 12px; color: var(--mut); font-weight: 400; margin-left: 2px; }
.stock-table { display: none; }
.stock-detail h2 { margin-bottom: var(--sp-1); }
.stock-photo { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--sp-3); }
.stock-qty-large { display: flex; justify-content: center; margin: var(--sp-3) 0; }
.stock-qty-large .qty-num { font-size: 32px; min-width: 96px; }
.facts { margin: 0 0 var(--sp-3); }
.facts div { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--bd); }
.facts dt { flex: none; width: 8em; color: var(--mut); font-size: 14px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; }
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) 0; border-top: 1px solid var(--bd); }
.history li:first-child { border-top: 0; }
.history-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.history .is-minus { color: var(--danger); }
.stocktake-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.stocktake-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius); }
.stocktake-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.stocktake-name .muted { font-size: 14px; }
.stocktake-input { width: 112px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }


/* ---- 予約 ---- */
.resv-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.resv-bar .view-toggle { margin-bottom: 0; }
.resv-bar .seg { min-width: 64px; }
.resv-add { margin-top: 0; }
.resv-date { font-size: 18px; }
.week-strip { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); margin: 0 0 var(--sp-3); padding: 0; }
.strip-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; padding: var(--sp-2) 0;
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius); color: var(--fg); text-decoration: none;
}
.strip-wd { font-size: 12px; color: var(--mut); }
.strip-num { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.strip-count { display: inline-flex; align-items: center; gap: 2px; min-width: 24px; justify-content: center; padding: 0 var(--sp-1); border-radius: 999px; background: var(--acc); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.strip-count.is-conflict { background: var(--danger-bg); color: var(--danger); }
.strip-count .icon { width: 12px; height: 12px; }
.strip-day.is-today { box-shadow: inset 0 0 0 2px var(--fg); }
.strip-day.is-selected { background: var(--pri); border-color: var(--pri); color: var(--pri-fg); }
.strip-day.is-selected .strip-wd { color: var(--pri-fg); }
.resv-filter { margin-bottom: var(--sp-3); }
.resv-filter label { margin-top: 0; }
.resv-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.resv-card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius); }
.resv-card.is-conflict { border: 2px solid var(--danger); }
.resv-card.is-cancelled { opacity: .65; }
.resv-card.is-cancelled .resv-main strong { text-decoration: line-through; }
.resv-link { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3); color: var(--fg); text-decoration: none; }
.resv-time { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resv-main { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.resv-link .stock-badges { grid-column: 2; }
.resv-day { margin-bottom: var(--sp-3); }
.resv-day h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: 16px; font-weight: 500; }
.resv-day h3 a { color: var(--fg); }
.rgrid-scroll { display: none; }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.overlap-warning ul { margin: var(--sp-1) 0; padding-left: var(--sp-4); font-weight: 400; }
.overlap-warning a { color: inherit; }

/* ---- リスト／カレンダーの切り替え ---- */
.view-toggle {
  display: inline-flex; margin-bottom: var(--sp-3); padding: var(--sp-1);
  border: 1px solid var(--bd); border-radius: 999px; background: var(--card);
}
.seg {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 104px; padding: 0 var(--sp-4);
  border-radius: 999px; color: var(--fg); text-decoration: none;
}
.seg.is-active { background: var(--pri); color: var(--pri-fg); font-weight: 500; }

/* ---- カレンダー ---- */
.cal-layout { display: grid; gap: var(--sp-4); }
.cal-nav { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cal-nav .btn { margin-top: 0; }
.cal-month { flex: 1; margin: 0; text-align: center; font-size: 20px; }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--card);
  border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; }
.cal-grid th { padding: var(--sp-2) 0; background: var(--hd); font-weight: 500; font-size: 14px; color: var(--mut); }
.cal-cell { height: 64px; padding: 0; vertical-align: top; border-top: 1px solid var(--bd); border-left: 1px solid var(--bd); }
.cal-cell:first-child { border-left: 0; }
.cal-cell a, .cal-cell > .cal-day { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: var(--sp-1); color: var(--fg); text-decoration: none; }
.cal-cell.is-out { background: var(--bg); color: var(--mut); }
.cal-cell.is-out > .cal-day { opacity: .5; }
.cal-day { font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.6; min-width: 28px; text-align: center; border-radius: 999px; }
.cal-cell.is-today .cal-day { background: var(--fg); color: var(--bg); font-weight: 500; }
.cal-cell.is-selected { background: var(--hd); box-shadow: inset 0 0 0 2px var(--pri); }
.cal-count, .cal-done {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--sp-2);
  border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.cal-count { background: var(--acc); color: var(--fg); }
.cal-count.is-overdue { background: var(--danger-bg); color: var(--danger); }
.cal-done { color: var(--mut); }
.cal-count .icon, .cal-done .icon { width: 14px; height: 14px; }
.cal-titles { display: none; }
.cal-nodue { margin: var(--sp-3) 0 0; }
.cal-panel { padding: var(--sp-4); background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius); }
.cal-panel h2 { font-size: 18px; }
.cal-panel .btn { margin: 0 0 var(--sp-3); }
.cal-panel .todo-list { margin-top: var(--sp-3); }

/* ---- PC（幅1024px以上）: 左サイドバー ---- */
@media (min-width: 1024px) {
  .app { display: flex; }
  .sidebar {
    display: flex; flex-direction: column; flex: none; width: 200px; min-height: 100vh;
    padding: var(--sp-4) var(--sp-3);
    background: var(--pri); color: var(--pri-fg);
    position: sticky; top: 0; align-self: flex-start; height: 100vh;
  }
  .sidebar-brand { font-weight: 500; font-size: 18px; padding: 0 var(--sp-3) var(--sp-4); }
  .sidebar-group { margin-top: var(--sp-4); padding: 0 var(--sp-3); font-size: 14px; opacity: .9; }
  .side-link {
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: 44px; padding: 0 var(--sp-3); margin-top: var(--sp-1);
    border-radius: var(--radius); color: var(--pri-fg); text-decoration: none;
  }
  .side-link:hover { background: rgba(255, 255, 255, .15); }
  .side-link.is-active { background: rgba(255, 255, 255, .25); font-weight: 500; }
  .side-link:focus-visible { outline-color: var(--pri-fg); }
  .main { flex: 1; min-width: 0; }
  .bottom-nav, .topbar-back { display: none; }
  .content { padding-bottom: var(--sp-6); }
  .entrance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { margin: 0 0 var(--sp-3); padding: 0 0 var(--sp-1); flex-wrap: wrap; }
  .todo-columns.is-multi { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .fab { bottom: var(--sp-6); right: var(--sp-6); }
  .stock-cards { display: none; }
  .stock-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; }
  .stock-table th, .stock-table td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: middle; border-top: 1px solid var(--bd); }
  .stock-table thead th { background: var(--hd); border-top: 0; font-weight: 500; font-size: 14px; color: var(--mut); }
  .stock-table thead a { color: inherit; }
  .stock-table tbody th { font-weight: 500; }
  .stock-table tr.is-low td, .stock-table tr.is-low th { background: #FFF1F1; }
  .stock-name-cell { display: table-cell; }
  .stock-name-cell .stock-thumb { width: 40px; height: 40px; margin: 0 var(--sp-2) 0 0; vertical-align: middle; }
  .stock-table .stock-badges { margin: 0; }
  .resv-list-wrap { display: none; }
  .week-strip { max-width: 560px; }
  .rgrid-scroll { display: block; overflow-x: auto; background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius); }
  .rgrid { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(150px, 1fr)); min-width: min-content; }
  .rgrid-corner, .rgrid-colhead { position: sticky; top: 0; z-index: 2; background: var(--hd); border-bottom: 1px solid var(--bd); }
  .rgrid-colhead { padding: var(--sp-2); text-align: center; font-weight: 500; border-left: 1px solid var(--bd); }
  .rgrid-colhead a { color: var(--fg); }
  .rgrid-colhead.is-today { background: var(--acc); }
  .rgrid-times { display: flex; flex-direction: column; }
  .rgrid-time { height: 64px; padding: 2px var(--sp-2); font-size: 12px; color: var(--mut); text-align: right; font-variant-numeric: tabular-nums; }
  .rgrid-col {
    position: relative; height: calc(var(--hours) * 64px); border-left: 1px solid var(--bd);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, var(--bd) 63px, var(--bd) 64px);
  }
  .rgrid-col.is-today { background-color: #FFFAF3; }
  .rblock {
    position: absolute; box-sizing: border-box; overflow: hidden; padding: 2px var(--sp-2);
    background: var(--acc); border: 1px solid var(--pri); border-radius: 8px; color: var(--fg); text-decoration: none;
    font-size: 12px; line-height: 1.4; display: flex; flex-direction: column;
  }
  .rblock:hover { background: #FCA85A; }
  .rblock-time { font-weight: 500; font-variant-numeric: tabular-nums; }
  .rblock-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rblock-sub { color: var(--mut); }
  .rblock-flag { align-self: flex-start; padding: 0 var(--sp-2); border-radius: 999px; background: var(--card); font-weight: 500; }
  .rblock-flag.is-danger { background: var(--danger-bg); color: var(--danger); display: inline-flex; align-items: center; gap: 2px; }
  .rblock-flag .icon { width: 12px; height: 12px; }
  .rblock.is-conflict { background: var(--danger-bg); border: 2px solid var(--danger); }
  .rblock.is-cancelled { background: var(--hd); border-style: dashed; color: var(--mut); text-decoration: line-through; }
  .rblock.is-cancelled .rblock-flag { text-decoration: none; }
  .cal-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .cal-cell { height: 120px; }
  .cal-cell a { align-items: stretch; padding: var(--sp-2); }
  .cal-cell a .cal-day { align-self: flex-start; }
  .cal-titles { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-1); min-width: 0; }
  .cal-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--sp-2);
    border-radius: 6px; background: var(--acc); color: var(--fg); font-size: 12px; line-height: 1.6; }
  .cal-title.is-done { background: var(--hd); color: var(--mut); text-decoration: line-through; }
  .cal-more { font-size: 12px; color: var(--mut); padding: 0 var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}