/* ══════════════════════════════════════════════════════════════
   接骨院WEB予約システム フロントスタイル
   ・すべて .szy-wrap 配下にスコープし、テーマCSSと干渉させない
   ・配色は data-szy-theme="ai|rose|green|mono" で切替（CSS変数）
   ・独自の色にしたい場合は .szy-wrap に style="--szy-ai:#xxx" 等で上書き可
   ══════════════════════════════════════════════════════════════ */

/* ── テーマ変数 ────────────────────────────────
   既定（ai）＝ v2_7 と同じ和モダン藍。 */
.szy-wrap{
  --szy-ai:#1B3A5C; --szy-ai-deep:#122740; --szy-ai-mist:#E8EEF4;
  --szy-kinari:#FAF7F0; --szy-sumi:#2A2620; --szy-sumi-60:#6E675C;
  --szy-shu:#C4472E; --szy-shu-soft:#F3E3DE; --szy-midori:#3F7A5E;
  --szy-line:#DDD6C8; --szy-r:3px;
  --szy-sat:#3A6EA5;
}
/* rose：ローズピンク＋ネイビー（やちよ系の明るい配色） */
.szy-wrap[data-szy-theme="rose"]{
  --szy-ai:#B84A6B; --szy-ai-deep:#8A3350; --szy-ai-mist:#F7E8EE;
  --szy-kinari:#FDF8F9; --szy-shu:#E0A030; --szy-shu-soft:#FBF0DA;
  --szy-midori:#4C8C7A; --szy-line:#E7D8DD;
}
/* green：フォレストグリーン＋ウォームオレンジ */
.szy-wrap[data-szy-theme="green"]{
  --szy-ai:#2E6B4F; --szy-ai-deep:#1E4A36; --szy-ai-mist:#E4EFE8;
  --szy-kinari:#F8FAF7; --szy-shu:#D9772E; --szy-shu-soft:#F7E6D6;
  --szy-midori:#3F7A5E; --szy-line:#D5DED4;
}
/* mono：モノトーン（どんなサイトにも馴染む無彩色） */
.szy-wrap[data-szy-theme="mono"]{
  --szy-ai:#33373B; --szy-ai-deep:#1C1F22; --szy-ai-mist:#ECEDEE;
  --szy-kinari:#FBFBFB; --szy-shu:#9A6A3A; --szy-shu-soft:#F0E7DB;
  --szy-midori:#4A6B5A; --szy-line:#DCDCDC;
}

/* ── ベース ── */
.szy-wrap *{box-sizing:border-box;margin:0;padding:0}
.szy-wrap{
  background:var(--szy-kinari);color:var(--szy-sumi);
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1.7;font-size:15px;
  border:1px solid var(--szy-line);border-radius:var(--szy-r);
  padding:24px 22px 96px;position:relative;overflow:hidden;
}
.szy-app{max-width:820px;margin:0 auto}

/* ── ステップ ── */
.szy-steps{display:flex;margin:0 0 24px;border:1px solid var(--szy-line);border-radius:var(--szy-r);overflow:hidden;background:#fff}
.szy-step{flex:1;text-align:center;padding:11px 4px;font-size:11px;letter-spacing:.06em;color:var(--szy-sumi-60);transition:.25s}
.szy-step .n{font-family:"Roboto Mono",monospace;display:block;font-size:15px;font-weight:500;margin-bottom:1px}
.szy-step+.szy-step{border-left:1px solid var(--szy-line)}
.szy-step.on{background:var(--szy-ai);color:#fff}
.szy-step.done{background:var(--szy-ai-mist);color:var(--szy-ai)}
.szy-step[role="button"]{cursor:pointer}
.szy-step[role="button"]:hover{background:var(--szy-ai);color:#fff}
.szy-step[role="button"]:focus-visible{outline:2px solid var(--szy-ai);outline-offset:-2px}

/* 下部の戻る/次へバー（.szy-bar）は position:sticky で常に画面下部に
   浮いた状態になるため、各ステップの末尾コンテンツがバーの裏に隠れない
   よう、パネル側にバーの高さ分の余白を確保しておく。 */
.szy-panel{display:none;animation:szy-fade .35s ease;padding-bottom:110px}
.szy-panel.on{display:block}
@keyframes szy-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.szy-h2{font-family:"Shippori Mincho",serif;font-size:19px;font-weight:700;letter-spacing:.04em;margin-bottom:4px;color:var(--szy-ai-deep)}
.szy-lead{font-size:13px;color:var(--szy-sumi-60);margin-bottom:18px}

/* ── 受診区分 ── */
.szy-kubun{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px}
.szy-kubun label{cursor:pointer}
.szy-kubun input{position:absolute;opacity:0;pointer-events:none}
.szy-kubun .card{background:#fff;border:1px solid var(--szy-line);border-radius:var(--szy-r);padding:14px 12px;text-align:center;transition:.2s;height:100%}
.szy-kubun .card .t{font-family:"Shippori Mincho",serif;font-weight:700;font-size:14px;margin-bottom:4px}
.szy-kubun .card .d{font-size:11px;color:var(--szy-sumi-60);line-height:1.5}
.szy-kubun input:checked + .card{border-color:var(--szy-ai);background:var(--szy-ai-mist);box-shadow:inset 0 0 0 1px var(--szy-ai)}
.szy-kubun input:focus-visible + .card{outline:2px solid var(--szy-shu);outline-offset:2px}
.szy-kubun .card:hover{border-color:var(--szy-ai)}

/* ── メニュー ── */
.szy-menu{display:flex;flex-direction:column;gap:8px}
.szy-menu label{cursor:pointer;position:relative}
.szy-menu input{position:absolute;opacity:0;pointer-events:none}
.szy-menu .row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--szy-line);border-radius:var(--szy-r);padding:13px 15px;transition:.2s}
.szy-menu .row:hover{border-color:var(--szy-ai)}
.szy-menu input:checked + .row{border-color:var(--szy-ai);background:var(--szy-ai-mist);box-shadow:inset 0 0 0 1px var(--szy-ai)}
.szy-menu input:focus-visible + .row{outline:2px solid var(--szy-shu);outline-offset:2px}
.szy-menu .nm{font-weight:500;flex:1;font-size:14px}
.szy-menu .nm span{display:block;font-size:11px;color:var(--szy-sumi-60);font-weight:400}
.szy-menu .min{font-family:"Roboto Mono",monospace;font-size:12px;color:var(--szy-ai);background:var(--szy-ai-mist);padding:3px 8px;border-radius:var(--szy-r);white-space:nowrap}
.szy-menu input:checked + .row .min{background:var(--szy-ai);color:#fff}
.szy-menu .fee{font-family:"Roboto Mono",monospace;font-size:12px;color:var(--szy-sumi-60);min-width:66px;text-align:right}
.szy-empty{background:#fff;border:1px dashed var(--szy-line);border-radius:var(--szy-r);padding:26px;text-align:center;font-size:13px;color:var(--szy-sumi-60)}

/* ── カレンダー ── */
.szy-calnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.szy-calnav .m{font-family:"Shippori Mincho",serif;font-size:16px;font-weight:700;color:var(--szy-ai-deep)}
.szy-navbtn{background:#fff;border:1px solid var(--szy-line);border-radius:var(--szy-r);padding:6px 13px;cursor:pointer;font-size:12px;font-family:inherit;color:var(--szy-ai);transition:.2s}
.szy-navbtn:hover:not(:disabled){background:var(--szy-ai);color:#fff;border-color:var(--szy-ai)}
.szy-navbtn:disabled{opacity:.3;cursor:not-allowed}
.szy-grid{background:#fff;border:1px solid var(--szy-line);border-radius:var(--szy-r);overflow-x:auto}
.szy-wrap table{border-collapse:collapse;width:100%;min-width:560px;table-layout:fixed}
.szy-wrap th,.szy-wrap td{border:1px solid var(--szy-line);text-align:center;padding:0}
.szy-wrap thead th:first-child{width:66px}
.szy-wrap thead th{background:var(--szy-ai-mist);font-size:11px;font-weight:500;color:var(--szy-ai-deep);padding:9px 2px;letter-spacing:.04em}
.szy-wrap thead th .dd{font-family:"Roboto Mono",monospace;font-size:15px;font-weight:500;display:block;color:var(--szy-sumi)}
.szy-wrap thead th.sun .dd{color:var(--szy-shu)}
.szy-wrap thead th.sat .dd{color:var(--szy-sat)}
.szy-wrap tbody th{background:var(--szy-ai-mist);font-family:"Roboto Mono",monospace;font-size:11px;font-weight:500;color:var(--szy-ai-deep);padding:0 8px;width:66px;white-space:nowrap}
.szy-slot{width:100%;min-height:42px;border:0;background:transparent;cursor:pointer;font-family:"Roboto Mono",monospace;font-size:15px;transition:.15s;display:block;color:var(--szy-midori)}
.szy-slot:hover:not(:disabled){background:var(--szy-midori);color:#fff}
.szy-slot:disabled{cursor:not-allowed;color:var(--szy-line);font-size:13px}
.szy-slot.sel{background:var(--szy-shu);color:#fff;box-shadow:inset 0 0 0 2px var(--szy-ai-deep)}
.szy-slot:focus-visible{outline:2px solid var(--szy-shu);outline-offset:-2px}
.szy-wrap td.closed{background:repeating-linear-gradient(-45deg,#F5F2EA,#F5F2EA 4px,#EDE8DC 4px,#EDE8DC 8px)}
.szy-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:11px;color:var(--szy-sumi-60)}

/* ══ スマホ用カレンダー（日付アコーディオン＋時間ボタン） ══ */
.szy-cal-mobile{display:none}
.szy-mday{border:1px solid var(--szy-line);border-radius:var(--szy-r);margin-bottom:8px;overflow:hidden;background:#fff}
.szy-mday.closed{opacity:.55}
.szy-mday-head{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;background:#fff;border:0;cursor:pointer;font-family:inherit;text-align:left;transition:.15s}
.szy-mday-head:hover:not([disabled]){background:var(--szy-ai-mist)}
.szy-mday-head[disabled]{cursor:not-allowed}
.szy-mday-date{display:flex;align-items:baseline;gap:4px;min-width:74px}
.szy-mday-date b{font-family:"Roboto Mono",monospace;font-size:22px;font-weight:500;color:var(--szy-sumi)}
.szy-mday-date span{font-size:13px;color:var(--szy-sumi-60)}
.szy-mday-date span.sun{color:var(--szy-shu)}
.szy-mday-date span.sat{color:var(--szy-sat)}
.szy-mday-status{flex:1;font-size:13px;color:var(--szy-midori);font-weight:500}
.szy-mday.closed .szy-mday-status{color:var(--szy-sumi-60)}
.szy-mday-arrow{font-size:14px;color:var(--szy-ai);transition:transform .25s}
.szy-mday.open .szy-mday-arrow{transform:rotate(180deg)}
.szy-mslots{display:none;grid-template-columns:1fr 1fr;gap:8px;padding:4px 14px 16px}
.szy-mday.open .szy-mslots{display:grid}
.szy-mslot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1.5px solid var(--szy-line);border-radius:var(--szy-r);background:#fff;cursor:pointer;font-family:inherit;transition:.15s}
.szy-mslot .tm{font-family:"Roboto Mono",monospace;font-size:17px;color:var(--szy-sumi)}
.szy-mslot .st{font-size:11px;color:var(--szy-midori)}
.szy-mslot.few .st{color:var(--szy-shu)}
.szy-mslot.ok{border-color:#CFE0D4}
.szy-mslot:active:not(:disabled){transform:scale(.97)}
.szy-mslot.sel{border-color:var(--szy-shu);background:var(--szy-shu-soft);box-shadow:inset 0 0 0 1px var(--szy-shu)}
.szy-mslot.sel .tm{color:var(--szy-ai-deep);font-weight:500}
.szy-mslot.full{opacity:.4;cursor:not-allowed}
.szy-mslot.full .st{color:var(--szy-sumi-60)}
.szy-mempty{grid-column:1/-1;text-align:center;padding:14px;font-size:12px;color:var(--szy-sumi-60)}
.szy-legend i{font-style:normal;font-family:"Roboto Mono",monospace;font-size:14px;margin-right:4px}
.szy-legend i.ok{color:var(--szy-midori)}
.szy-legend i.no{color:var(--szy-line)}
.szy-cap{margin-top:16px;background:#fff;border:1px solid var(--szy-line);border-left:3px solid var(--szy-ai);border-radius:var(--szy-r);padding:20px 22px}
.szy-cap h3{font-size:13px;font-weight:700;color:var(--szy-ai-deep);margin-bottom:16px;letter-spacing:.06em}
.szy-capbars{display:flex;flex-direction:column;gap:16px}
.szy-capbar{display:flex;align-items:center;gap:12px;font-size:12px}
.szy-capbar .lb{width:90px;color:var(--szy-sumi-60);flex-shrink:0}
.szy-capbar .track{flex:1;height:12px;background:var(--szy-ai-mist);border-radius:99px;overflow:hidden}
.szy-capbar .fill{height:100%;background:var(--szy-ai);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.szy-capbar .fill.warn{background:var(--szy-shu)}
.szy-capbar .v{font-family:"Roboto Mono",monospace;width:44px;text-align:right;flex-shrink:0}

/* ── フォーム ── */
.szy-form{display:flex;flex-direction:column;gap:15px}
.szy-fg label{display:block;font-size:12px;font-weight:500;margin-bottom:5px;color:var(--szy-ai-deep)}
.szy-fg label .req{color:var(--szy-shu);font-size:10px;margin-left:5px}
.szy-fg input,.szy-fg textarea,.szy-fg select{width:100%;padding:11px 13px;border:1px solid var(--szy-line);border-radius:var(--szy-r);font-family:inherit;font-size:14px;background:#fff;transition:.2s;color:var(--szy-sumi)}
.szy-fg input:focus,.szy-fg textarea:focus,.szy-fg select:focus{outline:0;border-color:var(--szy-ai);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.szy-fg textarea{resize:vertical;min-height:180px;line-height:1.8}
.szy-fg .hint{font-size:11px;color:var(--szy-sumi-60);margin-top:4px}
.szy-two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.szy-fg .err{color:var(--szy-shu);font-size:11px;margin-top:4px;display:none}
.szy-fg.bad input,.szy-fg.bad textarea{border-color:var(--szy-shu);background:var(--szy-shu-soft)}
.szy-fg.bad .err{display:block}
/* ハニーポット：画面外へ完全に隠す（表示されないがDOMには存在） */
.szy-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
#szy-jibai{display:none;background:var(--szy-shu-soft);border:1px solid #E5C4BA;border-radius:var(--szy-r);padding:15px;gap:14px;flex-direction:column}
#szy-jibai.on{display:flex}
#szy-jibai .szy-note{font-size:11px;color:#8C3421;line-height:1.6}

/* ── 確認・完了 ── */
.szy-conf{background:#fff;border:1px solid var(--szy-line);border-radius:var(--szy-r);overflow:hidden}
.szy-conf dl{display:grid;grid-template-columns:104px 1fr;font-size:14px}
.szy-conf dt{background:var(--szy-ai-mist);padding:12px 14px;font-size:11px;font-weight:500;color:var(--szy-ai-deep);border-bottom:1px solid var(--szy-line);display:flex;align-items:center}
.szy-conf dd{padding:12px 14px;border-bottom:1px solid var(--szy-line);word-break:break-word}
.szy-conf dd .big{font-family:"Shippori Mincho",serif;font-size:17px;font-weight:700;color:var(--szy-ai-deep)}
.szy-conf dl>*:nth-last-child(-n+2){border-bottom:0}
.szy-attn{background:var(--szy-ai-mist);border-radius:var(--szy-r);padding:14px 16px;margin-top:16px;font-size:12px;color:var(--szy-ai-deep);line-height:1.8}
.szy-attn strong{display:block;margin-bottom:5px}

/* ── プライバシー同意（確認画面で目立たせる） ── */
.szy-consent-box{margin-top:16px;padding:14px 16px;background:var(--szy-ai-mist);border:1px solid var(--szy-line);border-radius:var(--szy-r)}
.szy-consent-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--szy-ai-deep)}
.szy-consent-head strong{font-size:13px}
.szy-consent-head span{display:inline-block;padding:2px 9px;background:var(--szy-ai);border-radius:99px;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.szy-consent-label{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;background:#fff;border:1px solid var(--szy-line);border-radius:var(--szy-r);font-size:14px;font-weight:500;line-height:1.7;cursor:pointer}
.szy-consent-label:hover{background:var(--szy-ai-mist)}
.szy-consent-label input{width:22px;height:22px;min-width:22px;margin:1px 0 0;accent-color:var(--szy-ai);cursor:pointer}
.szy-consent-label a{color:var(--szy-ai);text-decoration:underline;text-underline-offset:3px}
.szy-consent-label input:focus-visible{outline:3px solid rgba(27,58,92,.28);outline-offset:2px}
.szy-consent-box small{display:block;margin-top:8px;color:var(--szy-sumi-60);font-size:11px}
.szy-consent-box.bad{animation:szy-consent-alert .35s ease both;border-color:var(--szy-shu);background:var(--szy-shu-soft)}
.szy-consent-box.bad .szy-consent-label{border-color:var(--szy-shu)}
@keyframes szy-consent-alert{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.szy-done-box{background:#fff;border:1px solid var(--szy-line);border-top:3px solid var(--szy-midori);border-radius:var(--szy-r);padding:40px 26px;text-align:center}
.szy-done-box .seal{width:78px;height:78px;border-radius:50%;border:2px solid var(--szy-shu);color:var(--szy-shu);display:grid;place-items:center;margin:0 auto 20px;font-family:"Shippori Mincho",serif;font-size:24px;font-weight:700;animation:szy-seal .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes szy-seal{from{transform:scale(.5) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.szy-done-box .sub{font-size:12px;color:var(--szy-sumi-60)}
.szy-rsv-no{font-family:"Roboto Mono",monospace;font-size:20px;color:var(--szy-ai);letter-spacing:.1em;margin:18px 0 6px}

/* ── フッターバー ── */
.szy-bar{position:sticky;bottom:0;left:0;right:0;margin:26px -22px -96px;background:rgba(250,247,240,.94);backdrop-filter:blur(8px);border-top:1px solid var(--szy-line);padding:12px 20px;z-index:5;display:flex;gap:10px;align-items:center}
.szy-sum{flex:1;font-size:11px;color:var(--szy-sumi-60);line-height:1.5;min-width:0}
.szy-sum b{display:block;color:var(--szy-ai-deep);font-size:13px;font-family:"Shippori Mincho",serif}
.szy-bar-btns{display:flex;gap:8px}
.szy-btn{border:0;border-radius:var(--szy-r);padding:13px 26px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;letter-spacing:.04em;white-space:nowrap}
.szy-btn-p{background:var(--szy-ai);color:#fff}
.szy-btn-p:hover:not(:disabled){background:var(--szy-ai-deep)}
.szy-btn-p:disabled{background:var(--szy-line);color:#fff;cursor:not-allowed}
.szy-btn-back{background:transparent;color:var(--szy-sumi-60);border:1px solid var(--szy-line)}
.szy-btn-back:hover{border-color:var(--szy-ai);color:var(--szy-ai)}
.szy-btn-go{background:var(--szy-shu);color:#fff}
.szy-btn-go:hover{filter:brightness(.9)}
.szy-btn:focus-visible{outline:2px solid var(--szy-shu);outline-offset:2px}

/* ── トースト ── */
.szy-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,14px);background:var(--szy-ai-deep);color:#fff;padding:11px 22px;border-radius:var(--szy-r);font-size:13px;z-index:60;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.szy-toast.on{opacity:1;transform:translate(-50%,0)}

/* ── レスポンシブ ── */
@media(max-width:640px){
  .szy-kubun{grid-template-columns:1fr}
  .szy-kubun .card{display:flex;align-items:center;gap:10px;text-align:left;padding:12px}
  .szy-kubun .card .t{margin-bottom:0;white-space:nowrap}
  .szy-two{grid-template-columns:1fr}
  .szy-step{font-size:0;padding:9px 2px}
  .szy-step .n{font-size:13px;margin-bottom:0}
  .szy-sum{display:none}
  .szy-bar-btns{flex:1}
  .szy-bar-btns .szy-btn{flex:1}
  /* カレンダー：横テーブルを隠しスマホ版に切替 */
  .szy-grid{background:transparent;border:0;overflow:visible}
  #szy-cal{display:none !important}
  .szy-cal-mobile{display:block !important}
  .szy-legend{display:none} /* スマホ版はボタンに文字表示するので凡例不要 */
  .szy-consent-box{padding:14px}
  .szy-consent-label{font-size:13px}
}

/* ── 動きを抑える設定を尊重 ── */
@media(prefers-reduced-motion:reduce){
  .szy-panel,.szy-done-box .seal,.szy-capbar .fill,.szy-toast{animation:none;transition:none}
}