/* ばんだい庵 — 予約カレンダー
   参考: 扇屋（円弧で地を割る）／KUSUMUSUBI（短冊の縦書き見出し）／天のめし（円形バッジで業態を分ける） */

/* --- 節（上辺を円弧で切り、帯に見せない） --- */
.rsv{position:relative;margin-top:var(--sp-6);padding-block:var(--sp-5) var(--sp-6);background:var(--paper-2)}
.rsv::before{content:"";position:absolute;left:0;right:0;top:-56px;height:58px;
  background:var(--paper-2);border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none}
.rsv > .container{position:relative;z-index:1}

/* --- 見出し（短冊） --- */
.rsv__head{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start;margin-bottom:var(--sp-3)}
.rsv__head .vlabel{background:var(--paper);border:1px solid var(--line);padding:.9rem .5rem;align-self:start}

/* --- 凡例 --- */
.rsv__legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;
  font-size:.86rem;color:var(--ink-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:.9rem;margin-bottom:var(--sp-4)}
.rsv__legend > span:not(.rsv-badge){display:inline-flex;align-items:center;gap:.45rem}
.rsv__marks{margin-left:auto;font-family:var(--f-head);letter-spacing:.08em;color:var(--ink)}

/* --- 円形バッジ（食／打） --- */
.rsv-badge{display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;
  font-family:var(--f-head);font-size:.78rem;font-style:normal;line-height:1;flex:none;letter-spacing:0}
.rsv-badge--meal{background:var(--ink);color:var(--paper)}
.rsv-badge--soba{background:var(--shu);color:var(--paper)}

/* --- 二段組（カレンダー ＋ 申込パネル） --- */
.rsv__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}

/* --- カレンダー --- */
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.cal__bar button{background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  font-family:var(--f-body);font-size:.86rem;color:var(--ink);padding:.5em 1em;transition:background .2s,border-color .2s}
.cal__bar button:hover{background:var(--paper);border-color:var(--ink)}
#cal-title{font-family:var(--f-head);font-size:1.15rem;letter-spacing:.06em}

.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal__dow span{text-align:center;font-family:var(--f-head);font-size:.8rem;color:var(--ink-soft);padding-block:.35rem}
.cal__dow span:first-child{color:var(--shu)}
.cal__dow span:last-child{color:#3a5c74}

.cal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__blank{display:block}
.cal__day{display:flex;flex-direction:column;gap:3px;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:.35rem .3rem .32rem;cursor:pointer;font-family:var(--f-body);text-align:left;
  transition:border-color .18s,background .18s,transform .18s}
.cal__day:hover:not(:disabled){border-color:var(--ink);transform:translateY(-2px)}
.cal__day:disabled{cursor:default;background:transparent;border-style:dashed;opacity:.55}
.cal__day.is-sel{border-color:var(--shu);box-shadow:inset 0 0 0 1px var(--shu);background:#fff}
.cal__num{font-family:var(--f-head);font-size:.98rem;line-height:1.1;letter-spacing:.02em;
  padding:0 .12rem .22rem;border-bottom:1px solid var(--line)}
.cal__day.is-sun .cal__num{color:var(--shu)}
.cal__day.is-sat .cal__num{color:#3a5c74}

/* 日付の中の「食」「打」の小枠 */
.cal__box{display:flex;align-items:center;gap:.28rem;border:1px solid var(--line);border-left-width:3px;
  border-radius:2px;padding:.16rem .24rem;background:#fff;min-height:1.35rem}
.cal__box--meal{border-left-color:var(--ink)}
.cal__box--soba{border-left-color:var(--shu)}
.cal__tag{flex:none;font-style:normal;font-family:var(--f-head);font-size:.6rem;line-height:1;
  color:var(--ink-soft);letter-spacing:0}
.cal__val{font-style:normal;font-family:var(--f-head);font-size:.88rem;line-height:1;letter-spacing:.01em}
.cal__val b{font-weight:500;font-size:.66rem;letter-spacing:-.01em}
.cal__val b + b{margin-left:.3em}

/* 空き具合を地の色でも伝える（記号だけに頼らない） */
/* 左端の墨／朱のラインは残したいので、border-color の一括指定は使わない */
.cal__box.is-ok{background:#e2eede;border-top-color:#c3d8bc;border-right-color:#c3d8bc;border-bottom-color:#c3d8bc}
.cal__box.is-ok .cal__val{color:#22502f}
.cal__box.is-few{background:#f8e9cb;border-top-color:#e4cd9f;border-right-color:#e4cd9f;border-bottom-color:#e4cd9f}
.cal__box.is-few .cal__val{color:#8a5606}
.cal__box.is-full{background:#eee5e2;border-top-color:#dbc8c2;border-right-color:#dbc8c2;border-bottom-color:#dbc8c2}
.cal__box.is-full .cal__val{color:#8d5347}
.cal__box.is-none{background:transparent;border-style:dashed;border-left-style:solid;opacity:.65}
.cal__box.is-none .cal__val{color:var(--ink-soft)}

/* --- 申込パネル --- */
.rsv__panel{background:var(--paper);border:1px solid var(--line);padding:clamp(1.1rem,2.4vw,1.6rem);
  position:sticky;top:80px}
.rsv-panel__empty{color:var(--ink-soft);font-size:.92rem}
.rsv-panel__date{font-family:var(--f-head);font-size:1.2rem;letter-spacing:.04em;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.9rem}

.rsv-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
.rsv-tab{display:flex;align-items:center;gap:.4rem;background:none;border:1px solid var(--line);border-radius:2px;
  cursor:pointer;font-family:var(--f-body);font-size:.82rem;color:var(--ink-soft);padding:.6em .5em;
  transition:border-color .2s,color .2s,background .2s}
.rsv-tab:hover{border-color:var(--ink);color:var(--ink)}
.rsv-tab.is-on{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}
.rsv-tab span{flex:1;text-align:left}
.rsv-tab__mk{font-style:normal;font-family:var(--f-head)}

.rsv-note{font-size:.86rem;color:var(--ink-soft);margin-bottom:1rem;line-height:1.9}
.rsv-note--stop{border-left:2px solid var(--line);padding-left:.9rem}

.rsv-slots{border:none;margin-bottom:1.1rem}
.rsv-slots legend{font-family:var(--f-head);font-size:.9rem;margin-bottom:.5rem}
.rsv-slot{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:2px;margin-bottom:.4rem;cursor:pointer;font-size:.9rem;transition:border-color .18s,background .18s}
.rsv-slot:hover:not(.is-full){border-color:var(--ink)}
.rsv-slot.is-full{opacity:.45;cursor:default}
.rsv-slot input{accent-color:var(--shu)}
.rsv-slot__t{font-family:var(--f-head);letter-spacing:.04em}
.rsv-slot__r{flex:1;color:var(--ink-soft);font-size:.82rem}
.rsv-slot:has(input:checked){border-color:var(--shu);background:var(--paper-2)}

.rsv-fields{display:grid;gap:.7rem;margin-bottom:1rem}
.rsv-fields label{display:grid;gap:.3rem;font-size:.86rem;color:var(--ink-soft)}
.rsv-fields input,.rsv-fields select{font-family:var(--f-body);font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:2px;padding:.6em .7em}
.rsv-fields input:focus,.rsv-fields select:focus{outline:2px solid var(--shu);outline-offset:1px}

.rsv-error{color:var(--shu);font-size:.86rem;margin-bottom:.7rem}
.rsv-submit{width:100%;margin-bottom:.7rem;cursor:pointer}

.rsv-done__h{font-family:var(--f-head);font-size:1.15rem;margin-bottom:.4rem}
.rsv-done__id{font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}
.rsv-done__id strong{font-family:var(--f-head);font-size:1.1rem;color:var(--ink);letter-spacing:.08em}
.rsv-done__dl{display:grid;grid-template-columns:4.5rem 1fr;gap:.1rem .8rem;font-size:.92rem;margin-bottom:1rem}
.rsv-done__dl dt{font-family:var(--f-head);color:var(--ink-soft);padding:.5rem 0;border-top:1px solid var(--line)}
.rsv-done__dl dd{padding:.5rem 0;border-top:1px solid var(--line)}

/* --- 予約の確認・取消 --- */
.rsv__find{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-3);
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start}
.rsv__find-h{font-family:var(--f-head);font-size:1rem;margin-bottom:.5rem}
.rsv__find-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.8rem}
.rsv__find-row input{font-family:var(--f-head);letter-spacing:.1em;font-size:.95rem;
  background:#fff;border:1px solid var(--line);border-radius:2px;padding:.6em .8em;min-width:12rem}
.rsv__find-row button{cursor:pointer}

/* --- レスポンシブ --- */
@media (max-width:900px){
  .rsv__grid{grid-template-columns:1fr}
  .rsv__panel{position:static}
}
@media (max-width:820px){
  .rsv__head{grid-template-columns:1fr}
  .rsv__head .vlabel{writing-mode:horizontal-tb;letter-spacing:.2em;justify-self:start;padding:.35rem .8rem}
  .rsv__find{grid-template-columns:1fr}
  .rsv__find .vlabel{writing-mode:horizontal-tb;letter-spacing:.2em;justify-self:start}
  .rsv__marks{margin-left:0;width:100%}
}
@media (max-width:640px){
  .cal__days{gap:3px}
  .cal__day{padding:.28rem .14rem .26rem;gap:2px}
  .cal__num{font-size:.85rem;padding-bottom:.16rem}
  .cal__box{gap:.16rem;padding:.12rem .16rem;border-left-width:2px;min-height:1.1rem}
  .cal__tag{font-size:.52rem}
  .cal__val{font-size:.74rem}
  /* 幅が足りないので、開始時間は縦に積む */
  .cal__val b{display:block;font-size:.52rem;line-height:1.25}
  .cal__val b + b{margin-left:0}
  .rsv-badge{font-size:.58rem}
}
@media (prefers-reduced-motion:reduce){
  .cal__day:hover:not(:disabled){transform:none}
}