/* ============================================================
   晴れ風 ネット予約「ご予約の帳面」（2026-09-21 新設／09-22 デザインレビュー2本を反映）
   ・index.html 本体とは別ファイル。色と書体は本体の :root 変数（--washi / --sumi / --kin / --shu …）をそのまま使う
   ・意匠＝写真の暗がりの上に「和紙の帳面」を一冊ひらく
   ・🔑 貫く一本のルール：墨＝いま選んでいるもの ／ 朱＝進む一手（1画面に1つ＝足元の「次へ」だけ）／ 金＝罫と補助
     → 見出しの罫・道しるべ・必須の札・同意のチェックに朱を使わない。朱が増えるほど「量販の予約フォーム」に見える
   ・白いカードを置かない（札・コース行・入力欄は和紙の地のまま。選んだ物だけ、うっすら白む）
   ・押せない状態は薄めない：色で「消す」のでなく、灰の字＋細罫＋（満席などの）言葉で伝える（WCAG AA 4.5:1）
   ・<dialog> は margin:auto 必須（本体の *{margin:0} が中央寄せを打ち消す）
   ============================================================ */

body.yk-open { overflow: hidden; }

.yk:not([open]) { display: none; }
.yk {
  margin: auto;
  padding: 0;
  border: 0;
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: min(900px, calc(100vh - 32px));
  max-height: min(900px, calc(100dvh - 32px));
  color: var(--ink, #29231f);
  background: var(--washi, #f7f1e7);
  background-image: var(--noise-washi, none);
  background-size: 1180px auto, 743px auto;
  border-radius: 3px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,90,0.5);
  overflow: hidden;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.8;
}
.yk::backdrop { background: rgba(8,6,4,0.72); backdrop-filter: blur(3px); } /* 背後の写真を灰の靄にしない（木札の深みを残す） */
.yk[open] { display: flex; flex-direction: column; animation: ykOpen 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.yk[open]::backdrop { animation: ykVeil 0.5s ease both; }
@keyframes ykOpen { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ykVeil { from { opacity: 0; } to { opacity: 1; } }

/* 帳面の二重罫：外＝濃い金の細罫／内＝ごく薄い罫 */
.yk::before, .yk::after { content: ""; position: absolute; pointer-events: none; z-index: 2; }
.yk::before { inset: 10px; border: 1px solid rgba(122,97,40,0.45); }
.yk::after { inset: 14px; border: 1px solid rgba(122,97,40,0.16); }

/* ── 見出し ── */
.yk-head {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: clamp(20px, 2.8vh, 32px) 38px 16px;
}
.yk-mark {
  width: 46px;
  aspect-ratio: 400 / 473;
  background: var(--sumi, #0d0b09);
  -webkit-mask: url("images/toc_yoyaku.png") center / contain no-repeat;
  mask: url("images/toc_yoyaku.png") center / contain no-repeat;
}
.yk-eyebrow { display: block; font-size: 11px; letter-spacing: 0.32em; color: var(--kin-deep, #7a6128); font-weight: 700; }
.yk-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--sumi, #0d0b09);
  font-feature-settings: "palt" 1;
}
.yk-title small { display: block; margin-top: 2px; font-family: "Noto Sans JP", sans-serif; font-size: 11.5px; font-weight: 400; letter-spacing: 0.12em; color: var(--muted, #6f6358); }
.yk-close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(122,97,40,0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--ink, #29231f);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.yk-close:hover { background: var(--sumi, #0d0b09); color: var(--washi, #f7f1e7); }

/* ── 道しるべ（壱・弐・参・結）。現在地は墨。漢数字の横に必ず言葉を添える ── */
.yk-steps {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0 38px;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid rgba(122,97,40,0.3);
}
.yk-steps li {
  display: flex; align-items: center; gap: 9px;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--muted, #6f6358);
  white-space: nowrap;
}
.yk-steps li + li::before { content: ""; width: clamp(12px, 3.4vw, 38px); height: 1px; margin: 0 12px; background: rgba(122,97,40,0.35); }
.yk-steps i {
  width: 27px; height: 27px; flex: none;
  display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
  font-style: normal; font-size: 13px; letter-spacing: 0; line-height: 1;
}
.yk-steps li.is-done { color: var(--kin-deep, #7a6128); }
.yk-steps li.is-now { color: var(--sumi, #0d0b09); font-weight: 700; }
.yk-steps li.is-now i { background: var(--sumi, #0d0b09); border-color: var(--sumi, #0d0b09); color: var(--washi, #f7f1e7); }
.yk[data-mode="done"] .yk-steps, .yk[data-mode="cancel"] .yk-steps { display: none; }

/* ── 本文 ── */
.yk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(16px, 2.6vh, 26px) 38px 8px; }
.yk-body::after { content: ""; display: block; position: sticky; bottom: -8px; height: 22px; margin-top: -22px; pointer-events: none; background: linear-gradient(to top, var(--washi, #f7f1e7), rgba(247,241,231,0)); }
.yk-pane[hidden] { display: none; }
.yk-pane { animation: ykPane 0.45s ease both; padding-bottom: 18px; } /* 最後の行が下端のぼかしにかからないように */
@keyframes ykPane { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.yk-h {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 10px;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 16px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--sumi, #0d0b09);
}
.yk-h::before { content: ""; width: 3px; height: 1.05em; background: var(--kin, #c9a85a); transform: translateY(2px); flex: none; }
.yk-h small { font-family: "Noto Sans JP", sans-serif; font-size: 12.5px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted, #6f6358); }
.yk-block + .yk-block { margin-top: clamp(16px, 2.6vh, 28px); }

/* 人数 */
.yk-party { display: inline-flex; align-items: center; gap: 4px; }
.yk-party button {
  width: 48px; height: 48px; border: 1px solid rgba(122,97,40,0.5); border-radius: 50%;
  background: transparent; color: var(--sumi, #0d0b09); font-size: 20px; line-height: 1; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.yk-party button:hover:not(:disabled) { background: var(--sumi, #0d0b09); color: var(--washi, #f7f1e7); }
.yk-party button:disabled { color: var(--muted, #6f6358); border-color: rgba(122,97,40,0.22); cursor: default; }
.yk-party output {
  min-width: 96px; text-align: center;
  font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 30px; letter-spacing: 0.04em; color: var(--sumi, #0d0b09);
}
.yk-party output small { font-size: 14px; margin-left: 4px; letter-spacing: 0.1em; }
.yk-hint { margin-top: 8px; font-size: 13px; color: var(--muted, #6f6358); }
/* 席の注記：主張しすぎず「但し書き」に見せる（朱は使わない・金の細罫）。R1デザインレビュー🟡11 */
.yk-seat-note { margin-top: 14px; padding-left: 10px; border-left: 2px solid rgba(122,97,40,0.4); font-size: 12.5px; line-height: 1.75; }
/* 電話番号のリンクは深い金（朱にすると、暦の画面で「次へ」より電話番号の方が朱く、視線が進む一手から逸れる） */
.yk-hint a, .yk-tel a, .yk-alert a, .yk-foot-note a { color: var(--kin-deep, #7a6128); text-decoration: underline; text-underline-offset: 3px; }

/* 暦＝金の細罫で升目を組む（無罫だとただのWebカレンダーに見える） */
.yk-legend { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted, #6f6358); }
.yk-legend b { font-weight: 700; color: var(--kin-deep, #7a6128); margin-right: 4px; }
.yk-legend b.few { color: var(--shu, #ad3b2f); }
.yk-cal-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 6px; }
.yk-cal-nav strong { min-width: 8.5em; text-align: center; font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 19px; font-weight: 700; letter-spacing: 0.16em; color: var(--sumi, #0d0b09); }
.yk-cal-nav button {
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--sumi, #0d0b09); font-size: 22px; cursor: pointer; border-radius: 50%;
  transition: background 0.3s ease;
}
.yk-cal-nav button:hover:not(:disabled) { background: rgba(122,97,40,0.14); }
.yk-cal-nav button:disabled { color: var(--muted, #6f6358); opacity: 0.75; cursor: default; }
.yk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(122,97,40,0.3); border-bottom-width: 0; }
.yk-cal .wd { padding: 5px 0; text-align: center; font-size: 12px; letter-spacing: 0.1em; color: var(--muted, #6f6358); border-bottom: 1px solid rgba(122,97,40,0.3); }
.yk-cal .wd:first-child { color: #9c4a3d; }
.yk-cal .wd:nth-child(7) { color: #56707d; }
.yk-day {
  position: relative;
  height: clamp(42px, 5.6vh, 54px); /* 縦横比で決めるとPCで1マス90pxになり、ノートPCの高さに月が入らない */
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  padding: 4px 0 3px;
  border: 0; border-radius: 0;
  box-shadow: inset 0 -1px 0 rgba(122,97,40,0.24), inset -1px 0 0 rgba(122,97,40,0.22);
  background: transparent; color: var(--sumi, #0d0b09);
  font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.yk-day em { font-style: normal; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1; color: var(--kin-deep, #7a6128); }
.yk-day[data-s="few"] em { color: var(--shu, #ad3b2f); font-weight: 700; }
.yk-day[data-s="tel"] em { font-size: 13.5px; color: var(--kin-deep, #7a6128); }
/* 日曜・土曜の数字にも色（見出し行だけだと週のリズムが読めない） */
/* 選択中の日は除く（除かないと、土日を選んだ時に色分けが白文字に勝って、墨地の上で数字が読めなくなる） */
.yk-cal > .yk-day:nth-child(7n+1):not(:disabled):not([aria-pressed="true"]) { color: #9c4a3d; }
.yk-cal > .yk-day:nth-child(7n):not(:disabled):not([aria-pressed="true"]) { color: #56707d; }
.yk-day:hover:not(:disabled) { background: rgba(201,168,90,0.18); }
/* 押せない日：薄めずに灰の字で（旧 rgba(.3) は 1.85:1 で読めなかった） */
.yk-day:disabled { cursor: default; color: var(--muted, #6f6358); }
.yk-day:disabled em { color: var(--muted, #6f6358); font-weight: 400; }
.yk-day:disabled[data-s="closed"] { background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(41,35,31,0.05) 5px 6px); }
.yk-day.is-blank { visibility: hidden; }
.yk-day.is-today::after { content: ""; position: absolute; top: 5px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--kin, #c9a85a); }
/* :hover より後ろ・より強く＝選んだ直後はマウスが乗ったままなので、ホバーの薄茶に負けると白文字が読めなくなる */
.yk-cal > .yk-day[aria-pressed="true"], .yk-cal > .yk-day[aria-pressed="true"]:hover:not(:disabled) { background: var(--sumi, #0d0b09); color: var(--washi, #f7f1e7); box-shadow: none; }
.yk-day[aria-pressed="true"] em { color: var(--kin-2, #e7cc81); }
.yk-cal.is-loading .yk-day { animation: ykPulse 1.2s ease-in-out infinite; pointer-events: none; }
.yk-cal.is-loading .yk-day em { visibility: hidden; }
@keyframes ykPulse { 50% { background: rgba(201,168,90,0.14); } }

/* 時間（札は和紙の地のまま。選んだ札だけ墨で塗る。席の選択は撤去済み） */
/* 時間を選ぶと席・お料理まで自動で送るので、「何日の何時か」が画面から消えないよう上に貼り付ける */
.yk-when { position: sticky; top: calc(-1 * clamp(16px, 2.6vh, 26px)); z-index: 3; margin: calc(-1 * clamp(16px, 2.6vh, 26px)) -38px 18px; padding: 12px 38px 10px; border-bottom: 1px solid rgba(122,97,40,0.3); background: var(--washi, #f7f1e7); font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.1em; color: var(--sumi, #0d0b09); }
.yk-period { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.yk-period + .yk-period { margin-top: 12px; }
.yk-period > span { padding-top: 11px; font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 15px; color: var(--kin-deep, #7a6128); letter-spacing: 0.1em; }
.yk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 15分刻みで時間の札が倍になった分＝折り返し待ちにせず格子で（レビュー2026-09-29・R1🟡8で最小幅を調整） */
.yk-time-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.yk-time-chips .yk-chip { min-width: 0; min-height: 44px; padding: 6px 0; font-size: 15.5px; }
.yk-chip {
  min-width: 78px; min-height: 48px; padding: 7px 14px;
  border: 1px solid rgba(122,97,40,0.55); border-radius: 3px;
  background: transparent; color: var(--sumi, #0d0b09);
  font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.06em; line-height: 1.35;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.yk-chip:hover:not(:disabled) { border-color: var(--sumi, #0d0b09); background: rgba(255,255,255,0.45); }
/* 選んだ札はホバー中も墨地のまま＝:hover を含めて指定しないと白地に白文字で読めなくなる（R1デザインレビュー🔴2） */
.yk-chip[aria-pressed="true"],
.yk-chip[aria-pressed="true"]:hover:not(:disabled) { background: var(--sumi, #0d0b09); border-color: var(--sumi, #0d0b09); color: var(--washi, #f7f1e7); }
@media (hover: none) { .yk-chip:hover:not(:disabled) { background: transparent; border-color: rgba(122,97,40,0.55); } }
.yk-chip small { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 11px; letter-spacing: 0.04em; }
/* 満席の札：薄めず、灰の字＋朱の打ち消し線＋「満席」の言葉（色だけに頼らない） */
.yk-chip:disabled { cursor: default; color: var(--muted, #6f6358); border-color: rgba(122,97,40,0.3); text-decoration: line-through; text-decoration-color: var(--shu, #ad3b2f); }
/* 打ち消し線は時刻・席名にだけ。「満席」「空きなし」の言葉は読めるように線を外す（親の線は inline-block の子には伝わらない） */
.yk-chip:disabled small { display: inline-block; width: 100%; text-decoration: none; }

/* 待つ間の骨組み（時間の札・お料理の行の形だけ先に出す。暦の骨組み .is-loading と同じ淡い金の明滅） */
.yk-chip.is-skel { display: inline-block; pointer-events: none; border-color: rgba(122,97,40,0.22); color: transparent; animation: ykPulse 1.2s ease-in-out infinite; }
.yk-period.is-skel > span { color: rgba(122,97,40,0.5); }
.yk-course.is-skel { pointer-events: none; animation: ykPulse 1.2s ease-in-out infinite; }
.yk-course.is-skel i { width: 18px; height: 18px; border: 1px solid rgba(41,35,31,0.25); border-radius: 50%; }
.yk-course.is-skel b, .yk-course.is-skel .price { display: block; height: 0.9em; border-radius: 2px; background: rgba(122,97,40,0.12); }
.yk-course.is-skel b { width: 42%; }
.yk-course.is-skel .price { width: 5em; }

/* コース（行も和紙のまま。選んだ行だけ、うっすら白む） */
.yk-courses { display: grid; gap: 0; border-top: 1px solid rgba(122,97,40,0.28); } /* 枠付きの行を8つ積むと量販の予約フォームに見える → 品書きの罫 */
.yk-course {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 12px; align-items: center;
  padding: 14px 8px; border: 0; border-bottom: 1px solid rgba(122,97,40,0.28); border-radius: 0; background: transparent;
  cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease;
}
.yk-course:hover { background: rgba(255,255,255,0.3); }
.yk-course input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid rgba(41,35,31,0.6); border-radius: 50%; background: transparent; display: grid; place-items: center; }
.yk-course input:checked { border-color: var(--sumi, #0d0b09); }
.yk-course input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sumi, #0d0b09); }
.yk-course:has(input:checked) { border-bottom-color: var(--sumi, #0d0b09); background: rgba(255,255,255,0.5); box-shadow: inset 3px 0 0 var(--sumi, #0d0b09); }
.yk-course b { font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--sumi, #0d0b09); line-height: 1.5; font-feature-settings: "palt" 1; }
.yk-course .price { font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 17px; color: var(--sumi, #0d0b09); white-space: nowrap; }
.yk-course .price small { font-family: "Noto Sans JP", sans-serif; font-size: 10.5px; margin-left: 3px; color: var(--muted, #6f6358); }
.yk-course .desc { grid-column: 2 / -1; font-size: 12.5px; line-height: 1.6; color: var(--muted, #6f6358); }
.yk-course.is-off { cursor: default; }
.yk-course.is-off b, .yk-course.is-off .price { color: #5f544a; }
.yk-course.is-off .desc { color: var(--muted, #6f6358); }   /* 赤字の説明が縦に何本も並ぶと朱1点の規則が崩れる（R1デザインレビュー🟢13）＝灰字＋タグに */
.yk-off-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid rgba(122,97,40,0.4); border-radius: 2px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted, #6f6358); }
.yk-course-stay { font-family: "Noto Sans JP", sans-serif; color: var(--kin-deep, #7a6128); }
/* コース写真（2026-09-29・R1デザインレビュー🟠3＝128×96/SP112×84に拡大）＝品書きの罫はそのまま、行の左に添える。areaで組むので有無で崩れない */
.yk-course.has-img { grid-template-columns: 22px 128px 1fr auto; gap: 4px 16px; padding: 14px 8px; align-items: start; grid-template-areas: "radio photo name price" "radio photo desc desc"; }
.yk-course.has-img input { grid-area: radio; align-self: center; }
.yk-course.has-img .yk-course-photo { grid-area: photo; }
.yk-course.has-img b { grid-area: name; align-self: end; padding-top: 10px; }
.yk-course.has-img .price { grid-area: price; align-self: end; padding-top: 10px; }
.yk-course.has-img .desc { grid-area: desc; align-self: start; }
.yk-course-photo { width: 128px; height: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(122,97,40,0.35), 0 6px 14px -8px rgba(41,35,31,0.45); }
.yk-course.has-img:not(.is-off):hover .yk-course-photo { filter: saturate(1.08) brightness(1.03); }
.yk-course.is-off .yk-course-photo { filter: grayscale(0.6); opacity: 0.6; }
/* 写真つき／写真なしの行で名前の左端をそろえる（PCのみ＝スマホは幅が無いので詰めたまま） */
/* R2デザインレビュー🟠A：隙間を写真つきの行と同じ16pxに（名前の左端が8pxずれていた）＋丸ボタンを2段の縦の真ん中へ＋行の高さを揃える
   （写真つきの行＝写真96＋上下14＋罫1＝125px。border-box） */
@media (min-width: 641px) {
  .yk-course:not(.has-img):not(.is-skel) { grid-template-columns: 22px 128px 1fr auto; gap: 4px 16px; min-height: 96px; align-content: center; }   /* R3デザインレビュー🟡1：写真行（125px）より一回り低く＝空白の間延びを詰める */
  .yk-course:not(.has-img):not(.is-skel) input { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .yk-course:not(.has-img):not(.is-skel) b { grid-column: 3; grid-row: 1; }
  .yk-course:not(.has-img):not(.is-skel) .desc { grid-column: 3 / -1; grid-row: 2; }
  .yk-course:not(.has-img):not(.is-skel) .price { grid-column: 4; grid-row: 1; }
  /* 時間の格子：9列（昼の9枚が1段・夜は9＋4。13:30／20:00 だけ1枚落ちる段をなくす・R2デザインレビュー🟡E） */
  .yk-time-chips { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 7px; }
}
/* 言葉の途中で折らない（R2デザインレビュー🟠C）：名前は【】の中で折らず、reserve.js が】の後ろに入れた <wbr> で折る。
   それでも入りきらない時だけ、はみ出さないよう どこでも折る */
.yk-course b, .yk-sum-course-name { word-break: keep-all; overflow-wrap: anywhere; }
.yk-course-stay, .yk-nowrap { white-space: nowrap; }
/* 時間を選んだ時の送り先（席の注記）：上に貼り付く日時の帯の下に出す（R2デザインレビュー🟡D） */
.yk-seat-note { scroll-margin-top: 64px; }

/* 入力＝記帳の罫（箱にしない。下の罫1本に書き込む） */
.yk-field + .yk-field { margin-top: 20px; }
.yk-field label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--sumi, #0d0b09); }
.yk-field label small { font-weight: 400; letter-spacing: 0.02em; font-size: 12.5px; color: var(--muted, #6f6358); }
.yk-field label .req { font-size: 10.5px; font-weight: 500; padding: 0 7px; border: 1px solid rgba(122,97,40,0.55); border-radius: 2px; background: transparent; color: var(--kin-deep, #7a6128); letter-spacing: 0.12em; }
.yk-field input, .yk-field textarea {
  width: 100%; margin-top: 6px; padding: 7px 10px 8px; line-height: 1.5;
  /* 下罫1本だけだと「どこに書くのか」が分からない（1pxの薄い線が55pxの空白の下端に1本）→ 2pxの罫＋うっすらした地で「書く帯」を出す */
  border: 0; border-bottom: 2px solid rgba(122,97,40,0.85); border-radius: 0;
  background: linear-gradient(to top, rgba(122,97,40,0.08), rgba(122,97,40,0)); color: var(--sumi, #0d0b09);
  font: inherit; font-size: 17px; /* 16px未満だとiPhoneが勝手に拡大する */
  letter-spacing: 0.04em;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.yk-field textarea { min-height: 84px; resize: vertical; line-height: 1.7; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(122,97,40,0.55); border-bottom-width: 2px; background: rgba(253,250,245,0.7); border-radius: 2px; }
.yk-field input:focus, .yk-field textarea:focus { outline: none; border-color: var(--sumi, #0d0b09); background: rgba(255,255,255,0.55); }
.yk-field textarea:focus { box-shadow: 0 0 0 1px var(--sumi, #0d0b09); }
.yk-field.is-bad input { border-bottom-color: var(--shu, #ad3b2f); }   /* 朱は細い罫1本だけ（3欄並ぶと太い赤線が3本になり、朱が多すぎる） */
.yk-field .err { display: none; margin-top: 9px; font-size: 13px; color: #7d2a20; }
.yk-field.is-bad .err { display: block; }
.yk-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.yk-privacy { margin-top: 24px; padding: 14px 0; max-width: 46em; border-top: 1px solid rgba(122,97,40,0.3); border-bottom: 1px solid rgba(122,97,40,0.3); font-size: 13px; line-height: 1.85; color: var(--ink, #29231f); }
.yk-privacy strong { font-weight: 500; }
.yk-privacy a { color: var(--kin-deep, #7a6128); text-decoration: underline; text-underline-offset: 3px; }
.yk-agree { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--sumi, #0d0b09); cursor: pointer; }
.yk-agree input { width: 24px; height: 24px; margin: 0; accent-color: var(--sumi, #0d0b09); flex: none; }

/* 確認・完了 */
.yk-sum { width: 100%; border-collapse: collapse; }
.yk-sum th, .yk-sum td { padding: 12px 4px; border-bottom: 1px solid rgba(122,97,40,0.28); text-align: left; vertical-align: top; font-size: 15px; }
.yk-sum th { width: 6.5em; font-weight: 400; font-size: 13px; letter-spacing: 0.14em; color: var(--kin-deep, #7a6128); white-space: nowrap; padding-top: 14px; }
.yk-sum td { font-family: "Shippori Mincho", "Noto Serif JP", serif; letter-spacing: 0.05em; color: var(--sumi, #0d0b09); word-break: break-word; font-feature-settings: "palt" 1; }
.yk-sum td.big { font-size: 19px; }
.yk-sum td.big small { margin-top: 2px; }
.yk-sum td small { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted, #6f6358); }
/* 確認画面のコース写真（小・横並び）＝本体の img{display:block;width:100%} に負けて改行されていたので td 側で flex に（R1デザインレビュー🟡7） */
/* R2デザインレビュー🟠B：td を flex にすると表のセルでなくなり th と高さが揃わない（罫に段差）→ td はセルのまま、中の入れ物を flex に */
.yk-sum td.yk-sum-course { display: table-cell; }
.yk-sum-course-in { display: flex; align-items: center; gap: 12px; }
.yk-sum-course-name { min-width: 0; }
.yk-sum-sub { display: block; }   /* 「（お飲み物などの追加は別です）」を1行に独立させる */
.yk-sum-course-img { display: block; flex: none; width: 72px; height: 54px; margin: 0; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(122,97,40,0.35); }
.yk-stay-hint:empty { display: none; }
.yk-done { text-align: center; padding: 30px 0 8px; }
/* 落款：紙に押した印に見せる（角丸と色の影はアプリのアイコンに見える） */
.yk-seal { width: 74px; height: 74px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 2px; background: var(--shu, #ad3b2f); color: var(--washi, #f7f1e7); font-family: "Shippori Mincho", serif; font-size: 34px; transform: rotate(-4deg); mix-blend-mode: multiply; opacity: 0.94; box-shadow: inset 0 0 0 2px rgba(247,241,231,0.22); background-image: var(--noise-washi, none); background-blend-mode: multiply; animation: ykSeal 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both; }
@keyframes ykSeal { from { opacity: 0; transform: rotate(-16deg) scale(1.7); } to { opacity: 0.94; transform: rotate(-4deg) scale(1); } }
.yk-done h3 { font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 24px; font-weight: 700; letter-spacing: 0.2em; color: var(--sumi, #0d0b09); }
.yk-done p { margin-top: 10px; font-size: 14px; color: var(--ink, #29231f); }
.yk-done .yk-no { display: inline-block; margin: 2px 0 4px; padding: 2px 14px; border: 1px solid rgba(122,97,40,0.5); font-family: "Shippori Mincho", serif; font-size: 20px; letter-spacing: 0.12em; color: var(--sumi, #0d0b09); }
.yk-done .yk-sum { margin-top: 22px; text-align: left; border-top: 1px solid rgba(122,97,40,0.28); }
.yk-done .yk-done-link { margin-top: 14px; font-size: 13.5px; color: var(--ink, #29231f); }
/* リンクに見えるボタン。<a href="#…"> にしない＝本体の慣性スクロールが # 付きリンクのクリックを横取りしてエラーになるため */
.yk-linkbtn { min-height: 44px; padding: 8px 6px; border: 0; background: none; color: var(--kin-deep, #7a6128); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* お知らせ（エラー・案内） */
.yk-alert { display: none; margin: 12px 38px 0; padding: 11px 16px; border-left: 3px solid var(--shu, #ad3b2f); background: rgba(255,255,255,0.5); color: #7d2a20; font-size: 14.5px; line-height: 1.7; }
.yk-alert.is-on { display: block; }
.yk-alert button { margin: 6px 0 0 10px; min-height: 44px; padding: 10px 16px; border: 1px solid #7d2a20; border-radius: 3px; background: transparent; color: #7d2a20; font: inherit; font-size: 13.5px; cursor: pointer; }

/* ── 足元（戻る／次へ）。朱はここだけ。和紙に影は落とさない ── */
.yk-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 38px clamp(20px, 3vh, 30px); border-top: 1px solid rgba(122,97,40,0.22); margin-top: 8px; }
.yk-foot-note { flex: 1 0 100%; order: -1; margin: 0 0 2px; font-size: 13px; color: var(--muted, #6f6358); text-align: right; }
.yk-foot-note:empty { display: none; }
.yk-foot { flex-wrap: wrap; }
.yk-tel { margin-right: auto; font-size: 12.5px; line-height: 1.6; color: var(--muted, #6f6358); }
.yk-tel a { display: inline-block; padding: 12px 8px; margin: -10px 0 -10px -8px; line-height: 1.5; font-family: "Shippori Mincho", serif; font-size: 16px; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; }
.yk-btn {
  min-height: 50px; padding: 12px 26px;
  border: 1px solid rgba(122,97,40,0.6); border-radius: 3px;
  background: transparent; color: var(--sumi, #0d0b09);
  font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 15px; font-weight: 700; letter-spacing: 0.18em;
  cursor: pointer; white-space: nowrap;
  transition: background 0.38s ease, color 0.38s ease, border-color 0.38s ease;
}
.yk-btn:hover:not(:disabled) { background: rgba(255,255,255,0.5); border-color: var(--sumi, #0d0b09); }
.yk-btn[hidden] { display: none; }
.yk-btn-go { background: var(--shu, #ad3b2f); border-color: var(--shu, #ad3b2f); color: var(--washi, #f7f1e7); }
.yk-btn-go:hover:not(:disabled) { background: #962f25; border-color: #962f25; }
/* 「やめる／戻る」は従＝罫を薄く（押せない「次へ」より濃いと主従が逆に見える） */
.yk-foot .yk-btn:not(.yk-btn-go) { border-color: rgba(122,97,40,0.4); }
/* 完了の「閉じる」は進む一手ではない＝朱にしない（落款の朱と競わせない） */
.yk[data-mode="done"] .yk-btn-go { background: transparent; border-color: rgba(122,97,40,0.6); color: var(--sumi, #0d0b09); }
.yk[data-mode="done"] .yk-btn-go:hover:not(:disabled) { background: rgba(255,255,255,0.5); border-color: var(--sumi, #0d0b09); }
/* 押せない「次へ」：薄めると文字が消える（旧 1.80:1）。透明地＋灰の字＋細罫で「まだ押せない」を伝える */
.yk-btn:disabled { background: transparent; border-color: rgba(122,97,40,0.35); color: var(--muted, #6f6358); cursor: default; }
/* 取り消しは静かに：朱で塗らない（直前まで「次へ」だった位置なので、誤って押しにくくする） */
.yk[data-mode="cancel"] .yk-btn-go { background: transparent; border-color: var(--shu, #ad3b2f); color: #8f2f25; }
.yk[data-mode="cancel"] .yk-btn-go:hover:not(:disabled) { background: rgba(173,59,47,0.08); }
.yk-btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.yk-btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid rgba(122,97,40,0.35); border-top-color: var(--sumi, #0d0b09); border-radius: 50%; animation: ykSpin 0.8s linear infinite; }
@keyframes ykSpin { to { transform: rotate(360deg); } }

.yk :focus-visible { outline: 2px solid var(--kin-deep, #7a6128); outline-offset: 2px; }

/* ── 背の低い画面（ノートPC 1366×768 など）：月がひと目で入るように詰める ── */
@media (min-width: 641px) and (max-height: 820px) {
  .yk { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .yk-head { padding-top: 16px; padding-bottom: 10px; }
  .yk-steps { padding-bottom: 10px; }
  .yk-body { padding-top: 12px; }
  .yk-h { margin-bottom: 6px; }
  .yk-block + .yk-block { margin-top: 12px; }
  .yk-party button { width: 40px; height: 40px; }
  .yk-party output { font-size: 26px; }
  .yk-hint { margin-top: 4px; }
  .yk-legend { margin-bottom: 2px; }
  .yk-cal-nav { margin-bottom: 0; }
  .yk-cal-nav button { width: 38px; height: 38px; }
  .yk-day { height: 38px; font-size: 16px; padding: 2px 0; }
  .yk-day em { font-size: 12.5px; }
  .yk-foot { padding-top: 10px; padding-bottom: 16px; margin-top: 4px; }
  .yk-btn { min-height: 46px; }
}

/* ── スマホ：画面いっぱいの帳面 ── */
@media (max-width: 640px) {
  /* margin は上寄せ：キーボードで高さを縮めた時、中央寄せだと頭が切れて足元は隠れたままになる */
  .yk { width: 100vw; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; margin: 0 auto auto; }
  .yk::before { inset: 5px; } .yk::after { inset: 8px; }
  .yk-head { padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 8px; gap: 12px; }
  .yk-mark { width: 34px; }
  /* 道しるべは全部の段の言葉を出す（漢数字だけでは伝わらない） */
  .yk-steps { margin: 0 20px; padding-bottom: 10px; }
  .yk-steps { justify-content: space-between; }
  .yk-steps li { gap: min(4px, 1vw); font-size: min(11px, 2.85vw); letter-spacing: -0.02em; }   /* 360・375pxの幅でも4つの言葉が収まる */
  .yk-steps i { width: min(21px, 5.4vw); height: min(21px, 5.4vw); font-size: min(11px, 2.85vw); }
  .yk-steps li + li::before { width: 5px; margin: 0 3px 0 0; }   /* 4つの言葉を390pxの幅に収める（線は短い印だけ） */
  .yk-body { padding: 16px 20px 8px; }
  .yk-when { top: -16px; margin: -16px -20px 14px; padding: 10px 20px 8px; font-size: 15px; }
  .yk-block + .yk-block { margin-top: 20px; }
  .yk-alert { margin: 10px 20px 0; }
  .yk-day { height: 48px; font-size: 16px; }
  /* 時間の帯：見出し（昼／夜）を上に出して全幅を使い、5列に詰める＝8段(444px)→5段(約25%減)。R1デザインレビュー🟠5 */
  .yk-period { grid-template-columns: 1fr; gap: 6px; }
  .yk-period > span { padding-top: 0; font-size: 13.5px; letter-spacing: 0.2em; border-bottom: 1px solid rgba(122,97,40,0.22); padding-bottom: 4px; }
  .yk-times .yk-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .yk-time-chips .yk-chip { min-height: 44px; padding: 6px 0; font-size: 15px; letter-spacing: 0.02em; }
  .yk-chip { min-width: 0; padding: 7px 4px; }
  .yk-seat-note { margin-top: 14px; margin-bottom: 4px; }
  .yk-course { grid-template-columns: 22px 1fr; }
  .yk-course .price { grid-column: 2; }
  .yk-course.has-img { grid-template-columns: 22px 112px 1fr; grid-template-areas: "radio photo name" "radio photo price" "radio photo desc"; }
  .yk-course.has-img b { align-self: start; padding-top: 0; font-size: 14.5px; }
  .yk-course.has-img .price { align-self: start; padding-top: 0; }
  .yk-course-photo { width: 112px; height: 84px; }
  .yk-course-stay { display: block; }   /* SP は「ご滞在の目安」を説明文と行を分けて1行に（R2デザインレビュー🟠C） */
  /* 【日本酒40種飲み放題付き】は1行に約192px要る＝写真の横（約180px・375pxの機種では約165px）には入らない。
     → SP は名前を品書きの見出しとして写真の上に全幅で置き、写真の右に値段・説明を並べる（【】の中で折れない・R2デザインレビュー🟠C） */
  .yk-course.has-img { grid-template-areas: "radio name name" "radio photo price" "radio photo desc"; grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 6px; }
  .yk-course.has-img b { padding-top: 0; }
  /* お席のみの行も丸ボタンを縦の真ん中へ（写真つきの行と揃える） */
  .yk-course:not(.has-img):not(.is-skel) input { grid-row: 1 / span 3; align-self: center; }
  /* 確認画面：写真の横では名前の幅が足りない＝写真を上、名前を下に（【】の中で折らない） */
  .yk-sum-course-in { flex-direction: column; align-items: flex-start; gap: 8px; }
  .yk-seat-note { scroll-margin-top: 52px; }
  .yk-foot { gap: 8px; padding: 8px 20px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .yk-foot-note { text-align: center; }
  .yk-tel { flex: 1 0 100%; margin: 0; order: 3; text-align: center; line-height: 1.4; font-size: 12px; }
  .yk-tel br { display: none; } /* 1行にまとめて暦に場所をゆずる */
  .yk-tel a { margin: -8px 0 -8px 2px; font-size: 15px; padding: 12px 8px; }
  .yk-btn { flex: 1 1 0; padding: 12px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .yk[open], .yk[open]::backdrop, .yk-pane, .yk-seal, .yk-cal.is-loading .yk-day, .yk-chip.is-skel, .yk-course.is-skel { animation: none; }
  .yk-btn { transition: none; }
}