/*
 * ご予約・マイメニュー（LIFF）
 * 2026-09-13: 店名を小文字のまま表示（uppercase解除）／行間と改行を見直し
 */

:root {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #3d3530;
  background: #f7f2ec;
  line-height: 1.6;
}

* { box-sizing: border-box; }
body { margin: 0; }

.hero {
  padding: calc(28px + env(safe-area-inset-top)) 22px 24px;
  background: linear-gradient(145deg, #fffaf6, #eadfd5);
  border-bottom: 1px solid #e0d1c5;
}
.hero h1 {
  margin: 2px 0 6px;
  font-family: serif;
  font-size: 27px;
  letter-spacing: .04em;
}
.hero p { margin: 0; color: #76675d; }
.hero .lead { font-size: 14px; line-height: 1.8; }
.hero .note { margin-top: 8px; font-size: 12px; line-height: 1.75; color: #9b8578; }
.eyebrow { font-size: 12px; letter-spacing: .06em; color: #9b725f; margin: 0; }

main { max-width: 640px; margin: auto; padding: 20px 16px 44px; }

.notice {
  background: #fff;
  border: 1px solid #eadfd8;
  border-radius: 14px;
  padding: 15px;
  line-height: 1.8;
}
.notice:empty { display: none; }

.cards { display: grid; gap: 16px; }
.card {
  background: #fff;
  border: 1px solid #e6d9cf;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 7px 24px #5d463b12;
}
.cardHead { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.card h2 { font-family: serif; font-size: 21px; margin: 0; }

.badge {
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eee7df;
  font-size: 12px;
}
.badge.confirmed { background: #e4f1e8; color: #28613c; }
.badge.coordinating { background: #fff1cf; color: #795800; }
.badge.cancelled { background: #eee; color: #666; }

.facts { display: grid; grid-template-columns: 88px 1fr; margin: 16px 0; }
.facts dt,
.facts dd {
  padding: 7px 0;
  border-bottom: 1px solid #f0e8e2;
  margin: 0;
  overflow-wrap: anywhere;
}
.facts dt { color: #8b796c; font-size: 13px; }
.facts dd { line-height: 1.75; }

.options { padding: 0; list-style: none; }
.options li { margin: 8px 0; line-height: 1.75; overflow-wrap: anywhere; }
.options small { display: block; color: #8b796c; }
.fee { background: #faf5ef; padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.8; }

.cancel {
  width: 100%;
  margin-top: 13px;
  border: 1px solid #ba756d;
  background: #fff;
  color: #8f423b;
  border-radius: 12px;
  padding: 12px;
  font-weight: 700;
  font-size: 15px;
}
.cancel:disabled { border-color: #ddd; color: #999; }

dialog {
  width: min(92%, 520px);
  border: 0;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 18px 60px #291d1870;
}
dialog::backdrop { background: #2b211c99; }
dialog form { padding: 24px; }
.close { float: right; border: 0; background: none; font-size: 28px; color: #766; }
.summary { background: #faf5ef; border-radius: 12px; padding: 13px; margin: 14px 0; line-height: 1.8; }
label { font-weight: 700; }
select {
  width: 100%;
  margin: 6px 0 14px;
  padding: 12px;
  border: 1px solid #cdbdb1;
  border-radius: 10px;
  background: white;
  font-size: 16px;
}
.check { display: flex; gap: 9px; align-items: flex-start; font-weight: 500; margin: 14px 0; }
.danger {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 13px;
  background: #914b44;
  color: white;
  font-weight: 700;
  font-size: 15px;
}
.danger:disabled { opacity: .5; }
.error { color: #a02727; }

.empty { text-align: center; padding: 34px 20px; background: white; border-radius: 18px; }
.empty h2 { margin: 0 0 14px; font-family: serif; font-size: 19px; }
.empty p {
  margin: 10px auto 0;
  max-width: 21em;
  font-size: 13.5px;
  line-height: 1.95;
  color: #6d6058;
  text-align: start;
  text-wrap: pretty;
}

footer {
  padding: 20px 18px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  color: #7d6c61;
  font-size: 13px;
  line-height: 1.8;
}

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { display: flex; flex-direction: column; }
  .cancel { margin-top: auto; }
}