/* =====================================================================
 * simple-dt.css — simpleDT用スタイル（自己完結）
 * 色・フォントは .sdt-popup 上のCSS変数で上書きできます。
 * 入力欄には .sdt-input を付与してください（横幅はJS側が自動設定）。
 * ===================================================================== */
.sdt-input{
  font-family:monospace;
  font-size:15px;color:#1c2430;
  padding:3px 6px;border:1px solid #d9dee6;border-radius:8px;background:#fff;
  background-color: #e6e7ee;
  box-shadow: inset 2px 2px 5px #b8b9be,inset -3px -3px 7px #fff;
}
.sdt-input:focus{outline:2px solid #0f6f66;outline-offset:1px;border-color:#0f6f66}
/* 最大化を適用するタッチ端末でJSが付与: 入力欄はカレンダーを開くトリガー専用
   （readonly化と併せて、キャレットや選択ハンドルの表示を抑止） */
.sdt-input-static{
  caret-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  cursor:pointer;
}

.sdt-popup{
  --sdt-ink:#1c2430;
  --sdt-sub:#5b6675;
  --sdt-line:#d9dee6;
  --sdt-hover:#eef1f5;
  --sdt-accent:#0f6f66;
  --sdt-accent-ink:#ffffff;
  --sdt-disabled:#c6ccd4;
  --sdt-out:#aab3bf;
  --sdt-sun:#b3423a;
  --sdt-sat:#2b5aa6;
  --sdt-font:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",
             "Noto Sans JP",Meiryo,system-ui,sans-serif;

  position:absolute;z-index:1000;display:none;
  background:#fff;border:1px solid var(--sdt-line);border-radius:10px;
  box-shadow:0 10px 30px rgba(20,30,45,.16);padding:12px;width:302px;
  font-family:var(--sdt-font);font-size:14px;color:var(--sdt-ink);user-select:none;
  touch-action:manipulation;   /* タッチ端末でのダブルタップズーム抑止 */
}
.sdt-popup.sdt-open{display:block}

.sdt-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sdt-head select,.sdt-time select{
  font:inherit;padding:4px 6px;border:1px solid var(--sdt-line);border-radius:6px;
  background:#fff;color:inherit;
}
.sdt-head select:focus-visible,.sdt-time select:focus-visible,
.sdt-nav:focus-visible,.sdt-day:focus-visible,.sdt-ok:focus-visible{
  outline:2px solid var(--sdt-accent);outline-offset:1px;
}
.sdt-unit{font-size:12.5px;color:var(--sdt-sub)}
.sdt-nav{
  border:none;background:none;font-size:18px;line-height:1;padding:4px 8px;
  border-radius:6px;cursor:pointer;color:var(--sdt-sub);
}
.sdt-nav:hover{background:var(--sdt-hover)}
.sdt-spacer{flex:1}

.sdt-cal{border-collapse:collapse;width:100%;table-layout:fixed}
.sdt-cal th{font-size:11.5px;font-weight:600;color:var(--sdt-sub);padding:4px 0;text-align:center}
.sdt-cal th.sdt-sun{color:var(--sdt-sun)}
.sdt-cal th.sdt-sat{color:var(--sdt-sat)}
.sdt-cal td{padding:1px;text-align:center}
.sdt-day{
  width:100%;border:none;background:none;font:inherit;font-size:13px;color:inherit;
  padding:5px 0;margin:0;border-radius:6px;cursor:pointer;
}
.sdt-day:hover{background:var(--sdt-hover)}
.sdt-day.sdt-out{color:var(--sdt-out)}
.sdt-day.sdt-today{box-shadow:inset 0 0 0 1px var(--sdt-accent)}
.sdt-day.sdt-selected{background:var(--sdt-accent);color:var(--sdt-accent-ink)}
.sdt-day:disabled{color:var(--sdt-disabled);cursor:not-allowed;background:none;box-shadow:none}

.sdt-time{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  border-top:1px solid var(--sdt-line);margin-top:4px;padding-top:5px;
}
/* 時刻の選択肢が少ない場合のラジオボタン表示 */
.sdt-hradios{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap}
.sdt-radio{
  display:inline-flex;align-items:center;gap:4px;font-size:13px;
  padding:3px 3px;margin:0;border-radius:6px;cursor:pointer;
}
.sdt-radio:hover{background:var(--sdt-hover)}
.sdt-radio input{accent-color:var(--sdt-accent);margin:0;cursor:pointer}
.sdt-radio.sdt-disabled{color:var(--sdt-disabled);cursor:not-allowed}
.sdt-radio.sdt-disabled:hover{background:none}
.sdt-radio input:disabled{cursor:not-allowed}
.sdt-ok{
  font:inherit;font-size:13px;padding:5px 14px;border:none;border-radius:6px;
  background:var(--sdt-accent);color:var(--sdt-accent-ink);cursor:pointer;
}
.sdt-ok:hover{filter:brightness(1.08)}

/* =====================================================================
 * スマートフォン向け最大化表示
 * タッチ主体の端末では、JSが .sdt-mobile を付与して画面中央に固定表示し、
 * transform: scale() で「縦横いずれかが画面幅いっぱい」になる倍率へ
 * 等倍拡大します（縦横比は維持。倍率はJSが算出）。
 * ===================================================================== */
.sdt-popup.sdt-mobile{
  position:fixed;top:50%;left:50%;
  transform-origin:center center;
  /* transform(translate + scale)はJS側で設定 */
}
.sdt-backdrop{
  position:fixed;inset:0;z-index:999;display:none;
  background:rgba(20,30,45,.35);
  touch-action:none;   /* 背面ページのスクロール操作を抑止 */
}
.sdt-backdrop.sdt-open{display:block}