/* デモページの体裁。ウィジェット本体のCSSは widget.js が Shadow DOM に持つ。 */
/* 白ベースに固定する。OSの設定に追従させない（管理画面と同じ理由）。 */
:root{color-scheme:light;
--bg:#f6f7f9;--surface:#fff;--line:#dfe3e8;--text:#1b2230;
--muted:#5b6472;--accent:#0a6b8a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
font:15px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
main{max-width:760px;margin:0 auto;padding:40px 22px 90px}
h1{font-size:26px;margin:0 0 8px}
h2{font-size:17px;margin:34px 0 10px;padding-bottom:7px;
border-bottom:1px solid var(--line)}
a{color:var(--accent)}
.lede{color:var(--muted);margin:0 0 16px}
pre{background:var(--surface);border:1px solid var(--line);border-radius:9px;
padding:12px 14px;overflow-x:auto;font-size:12.5px;margin:0 0 26px}
code{font-family:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace}
.note{background:var(--surface);border-left:3px solid var(--accent);
border-radius:0 8px 8px 0;padding:11px 15px;font-size:13.5px;
color:var(--muted);margin-top:26px}
ol,ul{padding-left:22px}
li{margin-bottom:4px}

/* 予約照会ページ */
dl.detail{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;
background:var(--surface);border:1px solid var(--line);border-radius:9px;
padding:16px 18px;margin:0 0 18px;font-size:14px}
dl.detail dt{color:var(--muted);font-size:13px}
dl.detail dd{margin:0;font-variant-numeric:tabular-nums}
button{padding:9px 18px;border-radius:8px;border:1px solid var(--accent);
background:var(--accent);color:#fff;font-size:14px;cursor:pointer;
font-family:inherit}
button.danger{background:#b3261e;border-color:#b3261e}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);
outline-offset:2px}
.note.ng{border-left-color:#b3261e}

/* 予約照会の日程変更（設計書 F-04 の客側） */
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.field{flex:1;min-width:150px}
.field label{display:block;font-size:13px;color:var(--muted)}
.field input{width:100%;margin-top:4px;padding:8px 10px;font-size:14px;
border:1px solid var(--line);border-radius:7px;background:var(--surface);
color:inherit;font-family:inherit}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.ghost{background:transparent;color:var(--accent)}