/* 予約フォーム（プラグイン「KIRA Web予約」の [kira_yoyaku]）の見た目をテーマに合わせる
 * プラグインの form.css の後に読み込んで上書きする。欄の順番・名前・選択肢はプラグインのまま（テーマでは変えない） */

.kira-yoyaku {
	--ky-accent: var(--accent);
	--ky-line: var(--line-hair);
	--ky-sub: var(--text-muted);
	max-width: 760px; font-size: 16px; line-height: 1.8; color: var(--text-body); font-family: var(--font-sans);
}

/* 本日・明日はお電話で（Web予約の邪魔にならないよう、上に細い1行で。10/22 拓哉さん）
 * 色は試作どおり：墨色の帯＋生成りの文字＋差し色の電話ボタン（10/23 拓哉さん） */
.kira-yoyaku .ky-tel-note {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
	background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius-sm);
	padding: 12px 16px; margin: 0 0 clamp(20px, 3vw, 28px); font-size: 13.5px; line-height: 1.7;
}
.kira-yoyaku .ky-tel-note br { display: none; }
/* 文は「、」の後で折り返す（スマホで「お問い合／わせ」と言葉の途中で切れていた。10/26 拓哉さん）。
 * ページ全体の text-wrap: pretty は Safari で折り返しの位置が変わるので、ここでは使わない */
.kira-yoyaku .ky-tel-note { word-break: keep-all; overflow-wrap: anywhere; text-wrap: wrap; }
/* 2店の電話（押すと電話がかかる。計測プラグインが数える） */
.kira-yoyaku a.ky-tel {
	display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 36px; padding: 0 14px;
	background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-pill); text-decoration: none;
	font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; transition: background var(--dur-fast);
}
.kira-yoyaku a.ky-tel::before {
	content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kira-yoyaku a.ky-tel:hover { background: var(--accent-hover); color: var(--text-on-accent); }
/* 2つの電話ボタンの長さをそろえる（10/23 拓哉さん）。スマホは横いっぱいで縦に並べる */
/* 0.2.9 から電話が3つ（渚店・南松本店・BLESS HAIR）。パソコンは同じ幅で1行に並べる */
.kira-yoyaku a.ky-tel { justify-content: center; flex: 1 1 190px; order: 1; }
/* 文のあとで改行し、電話のボタンを次の行に並べる（文は文字だけで部品が無いので、改行用の見えない部品を差し込む） */
.kira-yoyaku .ky-tel-note::after { content: ""; flex-basis: 100%; height: 0; order: 0; }
/* 幅の狭い画面（タブレット縦・スマホ）は横いっぱいで縦に並べる */
@media (max-width: 860px) {
	.kira-yoyaku a.ky-tel { flex: 1 1 100%; }
	/* 縦に並ぶと、中央寄せでは文字の長さで電話のマークの位置が行ごとにずれる（10/24 拓哉さん「不ぞろい」）。
	 * 一番長い「BLESS HAIR 080-2123-8060」（約190px）が真ん中に来る位置から3つとも書き始め、マークと店名の頭をそろえる */
	.kira-yoyaku a.ky-tel { justify-content: flex-start; padding-left: max(14px, calc(50% - 98px)); }
	/* 10/25 拓哉さん：店名の列と番号の列をそれぞれそろえる（2列ぞろえ）。店名と番号は main.js で分けている */
	.kira-yoyaku a.ky-tel:has(.ky-tel__no) { padding-left: max(14px, calc(50% - 104px)); }
	/* 店名は均等割り付け（一番長い「BLESS HAIR」の幅にそろえ、両端をそろえる。10/25 拓哉さん） */
	.kira-yoyaku a.ky-tel .ky-tel__name { display: inline-block; width: 6em; margin-right: 1.2em; text-align: justify; text-align-last: justify; }
	.kira-yoyaku a.ky-tel .ky-tel__no { font-variant-numeric: tabular-nums; }
}

/* フォーム全体を1枚のカードに */
.kira-yoyaku .ky-form {
	background: var(--surface-card); border: 1px solid var(--line-hair); border-radius: var(--radius-md);
	padding: clamp(4px, 2vw, 16px) clamp(16px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px); counter-reset: kyf;
}
.kira-yoyaku .ky-field { margin: 0; padding: 26px 0; border-bottom: 1px solid var(--line-hair); }
/* fieldset の欄名（legend）は枠の上の線に乗るため、上の余白は legend 側に持たせる（ほかの欄と同じ間隔にする） */
.kira-yoyaku fieldset.ky-field { padding-top: 0; }
.kira-yoyaku fieldset.ky-field > legend { padding-top: 26px; }
/* 欄名に番号を付ける（「ほかの時間でも大丈夫」のチェック .ky-check は欄名ではないので外す） */
.kira-yoyaku .ky-field > label:not(.ky-check), .kira-yoyaku .ky-field > legend {
	font-weight: 500; font-size: 15px; letter-spacing: .06em; color: var(--text-strong); margin-bottom: 12px; float: none; width: 100%;
	counter-increment: kyf;
}
.kira-yoyaku .ky-field > label:not(.ky-check)::before, .kira-yoyaku .ky-field > legend::before {
	content: counter(kyf, decimal-leading-zero); font-family: var(--font-serif-en); font-size: 15px; color: var(--accent); margin-right: 10px;
}
.kira-yoyaku .ky-req { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-xs); font-weight: 500; letter-spacing: .1em; padding: 1px 7px; }
.kira-yoyaku .ky-opt { border-radius: var(--radius-xs); letter-spacing: .1em; }
.kira-yoyaku .ky-help { font-size: 13.5px; line-height: 1.8; color: var(--text-body); margin-bottom: 14px; }
.kira-yoyaku input[type=text], .kira-yoyaku input[type=tel], .kira-yoyaku input[type=email], .kira-yoyaku textarea {
	min-height: 52px; padding: 12px 16px; border: 1px solid var(--line-hair); border-radius: var(--radius-sm); background: var(--white);
	color: var(--text-strong); font-family: var(--font-sans); transition: border-color var(--dur-fast);
}
.kira-yoyaku input:focus, .kira-yoyaku textarea:focus { outline: none; border-color: var(--line-strong); box-shadow: var(--focus-ring); }

/* 1週間の表 */
/* 表は枠の中で縦に動かす。週の切り替えと日付の行は枠の上に残す */
.kira-yoyaku .ky-week-nav { gap: 8px; margin: 0; height: 56px; padding: 0 8px; position: sticky; top: 0; left: 0; z-index: 3; background: var(--surface-card); border-bottom: 1px solid var(--line-hair); }
.kira-yoyaku .ky-grid thead th { top: 56px; }
.kira-yoyaku .ky-nav {
	height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent;
	font-family: var(--font-sans); font-size: 13px; letter-spacing: .06em; color: var(--text-strong);
}
.kira-yoyaku .ky-nav:hover:not(:disabled) { background: var(--bg-sunken); }
.kira-yoyaku .ky-range { font-family: var(--font-serif-jp); font-weight: 500; font-size: 15px; letter-spacing: .06em; color: var(--text-strong); }
/* スマホで「前の週・10/25〜10/31・次の週」が2行に折れないように */
.kira-yoyaku .ky-nav, .kira-yoyaku .ky-range { white-space: nowrap; }
@media (max-width: 480px) {
	.kira-yoyaku .ky-nav { padding: 0 12px; font-size: 12.5px; letter-spacing: .02em; }
	.kira-yoyaku .ky-range { font-size: 14px; letter-spacing: .02em; }
	/* 幅の狭いスマホ（360px）で「次の週」がはみ出さないように、ボタンの左右の余白を詰める */
	.kira-yoyaku .ky-week-nav { gap: 4px; padding: 0 6px; }
	.kira-yoyaku .ky-nav { padding: 0 9px; }
	@media (max-width: 359px) {
		.kira-yoyaku .ky-nav { padding: 0 7px; font-size: 11.5px; letter-spacing: 0; }
		.kira-yoyaku .ky-range { font-size: 12.5px; letter-spacing: 0; }
	}
	/* スマホは列が細いので、日付が隣とくっつかない大きさに */
	.kira-yoyaku table.ky-grid thead th { font-size: 11px; }
}
/* パソコンも一度に多く見られるように、窓を 468→560px（画面の高さの72%まで）・枠を 44→36px に（約8枠→約13枠。10/24 拓哉さん） */
/* 表の端まで動かしたら、続けてページ全体が動くようにする（overscroll-behavior: contain だとスマホで表の上から抜け出せなかった。10/26 拓哉さん） */
.kira-yoyaku .ky-week { max-height: min(560px, 72vh); overflow: auto; border: 1px solid var(--line-hair); border-radius: var(--radius-sm); }
/* 本文の表の指定（main.css の .entry-content th, td＝上下12pxの余白・左寄せ）がかかって枠が縦長・日付が左寄りになるので外す（10/23 拓哉さん指摘） */
.kira-yoyaku table.ky-grid th, .kira-yoyaku table.ky-grid td { padding: 0; text-align: center; vertical-align: middle; border: 1px solid var(--line-hair); }
.kira-yoyaku table.ky-grid thead th { background: var(--bg-sunken); color: var(--text-strong); font-weight: 500; font-size: 13px; padding: 8px 0; letter-spacing: 0; }
.kira-yoyaku .ky-grid thead th span { color: var(--text-muted); }
.kira-yoyaku .ky-grid .ky-sun, .kira-yoyaku .ky-grid .ky-sun span { color: var(--accent); }
.kira-yoyaku .ky-grid .ky-sat, .kira-yoyaku .ky-grid .ky-sat span { color: #4E6A8A; }
.kira-yoyaku .ky-time { background: var(--bg-sunken); color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.kira-yoyaku .ky-cell { height: 36px; background: var(--surface-card); font-family: var(--font-sans); font-weight: 500; transition: background var(--dur-fast) var(--ease-calm); }
.kira-yoyaku .ky-cell:hover:not(:disabled) { background: var(--accent-soft); }
.kira-yoyaku .ky-cell:disabled { background: var(--bg-sunken); }
.kira-yoyaku .ky-cell.is-picked { background: var(--accent); color: var(--text-on-accent); }
/* 選んだ枠にマウスが乗ったままでも、薄いピンク（上の :hover）にしない（10/24 拓哉さん「一瞬朱色になってピンクになる」） */
.kira-yoyaku .ky-cell.is-picked:hover:not(:disabled):not([aria-label$="第2希望"]) { background: var(--accent-hover); }
/* 第2希望も、マウスが乗ったままで薄いピンクや朱色にしない（下の第2希望の色のまま） */
.kira-yoyaku .ky-cell.is-picked[aria-label$="第2希望"]:hover:not(:disabled) { background: var(--accent-tint); }
/* スマホは枠を低くし、表の窓を少し縦に広げて、一度に見える時間を増やす（44px で約8枠 → 34px で約13枠。10/23 拓哉さん案・実機で確認する）
 * 34px は押す所の目安（WCAG 2.2 の 24px 以上）を満たす */
@media (max-width: 480px) {
	.kira-yoyaku .ky-cell { height: 34px; }
	.kira-yoyaku .ky-week { max-height: min(560px, 66vh); }
}
/* 第2希望は色を少し変える（試作どおり：薄い差し色＋差し色の縁取り。10/23 拓哉さん）。プラグインが枠に付ける読み上げ用の名前で見分ける */
.kira-yoyaku .ky-cell.is-picked[aria-label$="第2希望"] { background: var(--accent-tint); color: var(--accent-hover); box-shadow: inset 0 0 0 1.5px var(--accent); }
.kira-yoyaku .ky-picked { margin-top: 12px; font-weight: 500; color: var(--text-strong); font-size: 14px; }
/* 表の下の「第1希望：…」「第2希望：…」の頭に、表と同じ色の丸を付ける */
.kira-yoyaku .ky-picked span:not(.ky-none) { display: inline-flex; align-items: center; gap: 8px; }
.kira-yoyaku .ky-picked span:not(.ky-none)::before {
	content: "1"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent); color: var(--text-on-accent); font-size: 12px; box-sizing: border-box;
}
.kira-yoyaku .ky-picked span:not(.ky-none):nth-child(2)::before { content: "2"; background: var(--accent-tint); color: var(--accent-hover); border: 1px solid var(--accent); }
/* 選んだ日なら、ほかの時間でも大丈夫（0.2.4〜） */
/* プラグインの「.ky-field > label＝太字の欄名」がこのチェックにもかかるので、ふつうの文字に戻す */
.kira-yoyaku .ky-check { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; min-height: 44px; font-size: 14px; font-weight: 400; color: var(--text-body); letter-spacing: .04em; }
.kira-yoyaku .ky-check input { flex: none; accent-color: var(--accent); }

/* メニュー・店舗のチップ */
.kira-yoyaku .ky-group { margin-bottom: 18px; }
.kira-yoyaku .ky-group-name { font-family: var(--font-serif-jp); font-size: 14px; letter-spacing: .08em; color: var(--text-body); margin-bottom: 10px; }
.kira-yoyaku .ky-chip span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-hair); border-radius: var(--radius-pill);
	background: var(--surface-card); color: var(--text-body); font-size: 14px; letter-spacing: .04em; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.kira-yoyaku .ky-chip:hover span { border-color: var(--line-strong); }
.kira-yoyaku .ky-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
/* 前に並ぶメニューと「ほかのメニューを見る」の間をあける（BLESS HAIR を選んだときにくっついていた。10/23 拓哉さん指摘） */
.kira-yoyaku [data-ky-menus] > .ky-chips { margin-bottom: 16px; }
/* ほかのメニューを見る（0.2.4〜）：チップと同じ丸い形に */
.kira-yoyaku .ky-more summary {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
	color: var(--text-strong); font-size: 14px; letter-spacing: .04em;
}
.kira-yoyaku .ky-more summary:hover { background: var(--bg-sunken); }

/* 送信 */
.kira-yoyaku .ky-privacy { margin-top: 26px; font-size: 13px; line-height: 1.9; }
.kira-yoyaku .ky-privacy a { color: var(--accent); }
.kira-yoyaku .ky-error { color: var(--danger); font-weight: 500; font-size: 14px; }
/* 「選べるのは2つまでです」（0.2.11〜。表のすぐ下に出て、画面は動かない）。下のエラーと同じ色・太さにそろえる。空のときはプラグインが隠す */
.kira-yoyaku .ky-limit { color: var(--danger); font-weight: 500; font-size: 14px; margin: 8px 0 0; }
/* 文が出たとき、ブラウザが下の部品の位置を保とうとして画面をずらし、表が 33px（スマホ 59px）上へ動いていた（スクロールの固定）。
 * 予約フォームの中ではこの働きを切り、表を止めたままにする（10/24 実測） */
.kira-yoyaku { overflow-anchor: none; }
/* 店舗を選ぶまでの案内（0.2.12〜）：「まず店舗をお選びください。」・店舗のボタンの枠をテーマの差し色に。下の欄のうっすら（.ky-wait）はプラグインの .35 のまま */
.kira-yoyaku .ky-salon-hint { color: var(--accent); font-weight: 500; font-size: 14px; margin: 0 0 10px; }
.kira-yoyaku.ky-need-salon .ky-form > .ky-field:first-child .ky-chip span { border-color: var(--accent); }
.kira-yoyaku .ky-submit {
	height: 60px; padding: 0 36px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent);
	font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: .1em; transition: background var(--dur-fast);
}
.kira-yoyaku .ky-submit:hover:not(:disabled) { background: var(--accent-hover); }

/* 送信後 */
.kira-yoyaku .ky-done { background: var(--surface-card); border: 1px solid var(--line-hair); border-radius: var(--radius-md); padding: clamp(24px, 4vw, 40px); }
.kira-yoyaku .ky-done-title { font-family: var(--font-serif-jp); font-weight: 500; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .06em; color: var(--text-strong); margin-bottom: 12px; }
.kira-yoyaku .ky-grid th, .kira-yoyaku .ky-grid td { line-height: 1.3; }