/* ============================================================
   極厚かつ丼 共通スタイルシート
   ------------------------------------------------------------
   色・フォントは :root にまとめてあります。ブランドカラーや
   フォントを変えたいときは、まずここだけ触ってみてください。
   ============================================================ */

:root {
  --paper: #EDE7D8;       /* 背景：晒していない和紙のような、あたたかい米色 */
  --paper-light: #F8F4E9; /* カードなど、背景より少し明るい面 */
  --ink: #24211C;         /* 文字：墨のようなあたたかい黒 */
  --ink-soft: #5B5548;    /* 補足文字 */
  --stamp: #B5282E;       /* アクセント：はんこ（朱肉）の赤 */
  --stamp-dark: #8F1F24;
  --panko: #B9812E;       /* アクセント2：揚げたパン粉のきつね色 */
  --line: #D9CFB8;        /* 罫線・境界線 */
  --success: #3E6B4F;
  --font-display: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --radius: 2px; /* 角丸はほぼ使わない（丸文字のカードにしない） */
  --washi-texture:
    radial-gradient(circle at 18% 28%, rgba(139,115,85,0.05) 0%, transparent 45%),
    radial-gradient(circle at 82% 68%, rgba(139,115,85,0.04) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.47  0 0 0 0 0.35  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 16px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.5em;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
.muted { color: var(--ink-soft); font-size: 0.92rem; }

a { color: var(--stamp-dark); }

/* ---------- レイアウト共通 ---------- */
main, .site-header, .site-footer, .hero, .product, .howto {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- ヘッダー・ナビ ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  max-width: 640px;
  margin: 0 auto;
}
body { padding-top: 54px; }
body.dark-theme .site-header { background: #14120F; }
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
.logo span { font-size: 0.7rem; color: var(--ink-soft); font-family: var(--font-body); display: block; }

.lang-switch { display: flex; gap: 6px; flex-shrink: 0; }
.lang-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.7rem;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font-body);
}
.lang-btn.active { border-color: var(--stamp); color: var(--stamp-dark); font-weight: 700; }
body.dark-theme .lang-btn { border-color: #3A352C; color: #C9C2B0; }
body.dark-theme .lang-btn.active { border-color: #C9A24B; color: #C9A24B; }
.site-header nav a {
  margin-left: 18px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
}
.site-header nav a:hover { border-bottom-color: var(--stamp); }
.staff-link { color: var(--ink-soft) !important; }

/* ---------- ヒーロー ---------- */
.hero { padding-top: 56px; padding-bottom: 40px; text-align: left; }
.hero-eyebrow {
  font-family: var(--font-display);
  color: var(--stamp-dark);
  font-size: 1rem;
  margin-bottom: 6px;
}
.hero h1 { max-width: 11em; }
.hero-sub { max-width: 32em; color: var(--ink-soft); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.btn {
  display: inline-block;
  padding: 13px 22px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  text-align: center;
}
.btn-primary { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.btn-primary:hover { background: var(--stamp-dark); border-color: var(--stamp-dark); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: rgba(0,0,0,0.04); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.secondary { border-color: var(--line); color: var(--ink-soft); font-weight: 500; }

/* ---------- 商品カード ---------- */
.product { padding-top: 20px; padding-bottom: 36px; }
.product-card, .product-order-card, .cart-box, .inventory-box, .order-card, .login-box {
  background-color: var(--paper-light);
  background-image: var(--washi-texture);
  border: 1px solid var(--line);
  padding: 24px;
  margin-bottom: 20px;
}
.price { font-family: var(--font-display); font-size: 1.6rem; color: var(--stamp-dark); }
.price span { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft); margin-left: 8px; }
.product-features { padding-left: 1.1em; margin: 0; }
.product-features li { margin-bottom: 4px; }

/* ---------- ご注文方法 ---------- */
.howto { padding-bottom: 56px; }
.howto-grid { display: grid; gap: 18px; margin-top: 18px; }
.howto-item { border-left: 3px solid var(--panko); padding-left: 16px; }
.howto-item h3 { margin-bottom: 4px; }

/* ---------- フッター ---------- */
.site-footer {
  padding-top: 24px;
  padding-bottom: 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.staff-footer-link { margin-top: 6px; }
.staff-footer-link a { color: var(--ink-soft); }

/* ---------- 注文・予約ページ（顧客向け機能画面） ---------- */
.order-page main { padding-top: 20px; padding-bottom: 60px; }
.order-header, .staff-header {
  background: var(--ink);
  color: var(--paper-light);
  padding: 16px 20px;
  font-family: var(--font-display);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.staff-header .btn { padding: 8px 14px; font-size: 0.85rem; }

.screen { display: none; }
.screen.active { display: block; }

.option-group { margin-bottom: 18px; }
.option-label { font-weight: 700; margin-bottom: 6px; }
.option-group label { display: inline-block; margin-right: 16px; font-size: 0.95rem; }
.option-group input[type="text"],
.option-group input[type="tel"],
.option-group input[type="number"],
.option-group input[type="date"],
.option-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  margin-top: 4px;
}
#opt-qty { width: 80px; }

.remaining { font-weight: 700; color: var(--stamp-dark); }

.cart-list { list-style: none; padding: 0; margin: 0 0 12px; }
.cart-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cart-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.remove-btn {
  background: none;
  border: none;
  color: var(--stamp-dark);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
}
.cart-total { font-weight: 700; font-size: 1.1rem; margin-top: 6px; }

.error { color: var(--stamp-dark); font-weight: 700; min-height: 1.4em; }

/* ---------- スタッフ／配達員 画面 ---------- */
.staff-name { font-size: 0.9rem; }
main.staff-main, main.delivery-main { max-width: 720px; margin: 0 auto; padding: 20px; }
section.panel { margin-bottom: 32px; }
section.panel h2 {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.inventory-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inventory-row input[type="number"] {
  width: 90px;
  padding: 8px;
  border: 1px solid var(--line);
  font-size: 1rem;
}

.order-card { padding: 16px 18px; }
.order-card-header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.badge {
  background: var(--ink);
  color: var(--paper-light);
  font-size: 0.75rem;
  padding: 3px 9px;
}
.status { font-weight: 700; color: var(--stamp-dark); margin-left: auto; }
.order-items { margin-bottom: 6px; }
.order-meta { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 10px; }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.order-actions button { padding: 9px 16px; }
.empty { color: var(--ink-soft); font-style: italic; }

.customer-search { display: flex; gap: 8px; margin-bottom: 12px; }
.customer-search input { flex: 1; padding: 10px; border: 1px solid var(--line); }

#reservations-list { padding-left: 1.2em; }
#reservations-list li { margin-bottom: 6px; }

/* ---------- ログイン画面 ---------- */
.login-wrap { max-width: 380px; margin: 80px auto; padding: 0 20px; }
.login-box label { display: block; margin-bottom: 14px; font-weight: 700; font-size: 0.9rem; }
.login-box input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 400;
}

/* ---------- アクセシビリティ・レスポンシブ ---------- */
button, input, select { font-family: inherit; }
:focus-visible { outline: 2.5px solid var(--stamp); outline-offset: 2px; }

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  .hero { padding-top: 36px; }
}

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

/* ============================================================
   追加分２：商品画像／下部タブバー／予約カレンダー／ステッパー
   ============================================================ */

/* ---------- 商品カード内の画像（額縁っぽい枠の中） ---------- */
.product-image-frame {
  background-color: #fff;
  background-image: var(--washi-texture);
  border: 1px solid var(--line);
  padding: 10px;
  margin-bottom: 14px;
}
.product-image-frame img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

/* ---------- 下部タブバー（スマホ用、Threadsのような固定ナビ） ---------- */
body { padding-bottom: 74px; } /* タブバーに隠れないように余白を確保 */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--paper-light);
  border-top: 1px solid var(--line);
  z-index: 100;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 0 8px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.68rem;
}
.tabbar-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tabbar-item.active { color: var(--stamp-dark); }
.tabbar-item.active svg { stroke: var(--stamp-dark); }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabbar {
    top: 50%;
    bottom: auto;
    left: calc(50% - 396px);
    right: auto;
    transform: translateY(-50%);
    flex-direction: column;
    width: 56px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
  }
  .tabbar-item { flex: none; padding: 14px 0; }
  .tabbar-item span { display: none; }
  body.dark-theme .tabbar { border-color: #3A352C; }
}

/* ---------- 予約：カレンダー ---------- */
.calendar-box { position: relative; }
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-nav-btn {
  background: none;
  border: 1px solid var(--line);
  width: 34px; height: 34px;
  font-size: 1rem;
  cursor: pointer;
}
.cal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.calendar-weekdays, .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.calendar-box, .calendar-weekdays, .calendar-grid { min-width: 0; }
.calendar-weekdays { margin-bottom: 4px; font-size: 0.75rem; color: var(--ink-soft); text-align: center; }
.cal-cell {
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0;
}
.cal-cell.cal-blank { background: transparent; border: none; cursor: default; }
.cal-day-num { font-size: 0.85rem; }
.cal-avail { font-size: 0.72rem; color: var(--success); font-weight: 700; }
.cal-cell.cal-disabled { color: var(--line); cursor: not-allowed; }
.cal-cell.cal-disabled .cal-avail { color: var(--line); }
.cal-cell.cal-selected { background: rgba(181, 40, 46, 0.18); border-color: var(--stamp); }
.small-remaining {
  text-align: right;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ---------- ステッパー（丼・トッピングの個数選択） ---------- */
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.stepper-label { font-size: 0.95rem; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--ink);
  background: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.stepper-value { min-width: 1.4em; text-align: center; font-weight: 700; }

/* ---------- プレースホルダーページ（店舗／会員／マイページ） ---------- */
.placeholder-box { text-align: center; padding: 60px 20px; color: var(--ink-soft); }

/* ============================================================
   追加分３：黒背景テーマ（index.html と reserve.html のみに適用）
   ------------------------------------------------------------
   白いカード（.product-card, .product-order-card など）は
   このテーマの影響を受けず、そのまま白背景・濃い文字のままです。
   ============================================================ */
body.dark-theme {
  background: #14120F;
}
body.dark-theme .site-header,
body.dark-theme .site-footer,
body.dark-theme .howto-item {
  border-color: #3A352C;
}
body.dark-theme .site-header nav a,
body.dark-theme .hero-sub,
body.dark-theme .howto h2,
body.dark-theme .howto-item h3,
body.dark-theme .howto-item p,
body.dark-theme .site-footer,
body.dark-theme .muted {
  color: #C9C2B0;
}
body.dark-theme .staff-link { color: #8f887a !important; }
body.dark-theme .hero-eyebrow,
body.dark-theme .hero h1,
body.dark-theme .logo {
  color: #C9A24B;
}
body.dark-theme .site-header nav a:hover { border-bottom-color: #C9A24B; }

/* .mutedは白いカードの中でも使われるため、カードの中だけは元の濃い色に戻す
   （そうしないと白背景に薄い色の文字が乗って読みにくくなるため） */
body.dark-theme .product-card .muted,
body.dark-theme .product-order-card .muted,
body.dark-theme .cart-box .muted,
body.dark-theme .price-frame .muted,
body.dark-theme .login-box .muted,
body.dark-theme .inventory-box .muted,
body.dark-theme .order-card .muted {
  color: var(--ink-soft);
}
body.dark-theme .staff-footer-link a { color: #8f887a; }

/* ヒーロー写真（額縁の前に大きく置く1枚） */
.hero-photo { margin: 20px 0; }
.hero-photo img { display: block; width: 100%; border-radius: 2px; }

/* 額縁風の白い枠（写真の下、商品名と価格だけを入れる） */
.price-frame {
  background-color: #fff;
  background-image: var(--washi-texture);
  border: 6px double #C9A24B;
  padding: 22px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.price-frame h2 { margin-bottom: 6px; }
.price-frame .price { margin: 0; font-size: 1.8rem; }

/* ============================================================
   追加分５：注文画面の細かい調整
   ============================================================ */
.order-sublabel { font-size: 0.82rem; opacity: 0.85; margin-top: 2px; }
.price-inline { color: var(--stamp-dark); }
.product-title-price { text-align: center; }
.product-title-price .price-inline { display: block; }
.ticket-number {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--stamp-dark);
  text-align: center;
  margin: 10px 0 6px;
}
.back-warning {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 24px 18px;
  text-align: center;
  font-size: 0.72rem;
  color: #C9C2B0;
}