/* アンビシャス suite プロトタイプ スタイル
   保護者(index)=スマホ375px基準・目的別に画面分割。職員(staff)=今日中心のカード＋月まとめ。
   注: iOS WebKit の白画面対策として、スクロール容器に min-height:100vh + 大きな box-shadow を重ねない。 */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: #222b3a; background: #eef1f6; -webkit-text-size-adjust: 100%; line-height: 1.5;
}
button, input, select { font-family: inherit; }
.hidden { display: none !important; }

:root {
  --line: #06c755; --line-d: #05a548; --ink: #222b3a; --mut: #6b7688;
  --bd: #e3e7ef; --bg-soft: #f6f8fc; --blue: #2f6df0; --red: #e2483d;
}

/* ============================================================
   保護者アプリ
   ============================================================ */
.parent-app { max-width: 480px; margin: 0 auto; background: #fff; min-height: 100vh; }
.view { display: block; }

/* ---- ログイン ---- */
#loginView { padding: 0 22px 40px; }
.login-hero { padding: 56px 0 28px; text-align: center; }
.login-logo { display: inline-block; font-weight: 800; color: var(--line-d); font-size: 15px;
  letter-spacing: .04em; border: 2px solid var(--line); border-radius: 999px; padding: 5px 16px; }
.login-hero h1 { font-size: 22px; margin: 22px 0 6px; }
.login-sub { color: var(--mut); font-size: 14px; margin: 0; }
.guardian-list { display: flex; flex-direction: column; gap: 12px; }
.guardian-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--bd); border-radius: 14px;
  padding: 18px 18px; cursor: pointer; }
.guardian-btn:active { background: var(--bg-soft); }
.gb-name { font-size: 17px; font-weight: 700; }
.gb-kids { font-size: 12px; color: var(--mut); }

/* ---- 初回紐付け / 案内 ---- */
#linkView, #noticeView, #bootView { padding: 0 22px 40px; }
.link-box { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.link-box input { width: 100%; box-sizing: border-box; font-size: 18px; text-align: center;
  letter-spacing: .12em; padding: 16px 14px; border: 1.5px solid var(--bd); border-radius: 14px; }
.link-btn { width: 100%; background: var(--line); color: #fff; font-weight: 700; font-size: 16px;
  border: none; border-radius: 14px; padding: 16px; cursor: pointer; }
.link-btn:active { background: var(--line-d); }
.link-msg { min-height: 20px; color: #c0392b; font-size: 13px; text-align: center; }

/* ---- 職員: LINE招待発行 ---- */
.invite-box { margin: 10px 0 4px; }
.invite-btn { background: #fff; border: 1.5px solid var(--line); color: var(--line-d);
  font-weight: 700; font-size: 13px; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.invite-btn:active { background: var(--bg-soft); }
.invite-result { margin-top: 10px; background: var(--bg-soft); border: 1px solid var(--bd);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.7; word-break: break-all; }
.invite-result .ir-code b { font-size: 16px; letter-spacing: .08em; }
.invite-result .ir-note { color: var(--mut); font-size: 12px; margin-top: 6px; }

/* ---- ホームヘッダ ---- */
.p-header { background: var(--line); color: #fff; padding: 14px 18px 16px;
  position: sticky; top: 0; z-index: 5; }
.p-header-row { display: flex; align-items: center; justify-content: space-between; }
.p-brand { font-size: 13px; font-weight: 700; opacity: .95; letter-spacing: .03em; }
.p-switch { background: rgba(255,255,255,.22); color: #fff; border: none; padding: 6px 14px;
  border-radius: 999px; font-size: 12px; cursor: pointer; }
.p-guardian { font-size: 18px; font-weight: 700; margin-top: 8px; }

/* ---- ホーム本体 ---- */
.p-body { padding: 16px 18px 40px; }
.child-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.child-tab { background: var(--bg-soft); border: 1.5px solid transparent; border-radius: 999px;
  padding: 8px 18px; font-size: 14px; cursor: pointer; color: #445; }
.child-tab.active { background: #eafaf0; border-color: var(--line); color: var(--line-d); font-weight: 700; }

.cta-apply { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--line); color: #fff; border: none; border-radius: 14px; padding: 18px;
  font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(6,199,85,.28); }
.cta-apply:active { background: var(--line-d); }
.cta-plus { font-size: 20px; line-height: 1; }

.home-h { font-size: 15px; color: var(--mut); margin: 26px 0 10px; font-weight: 700; }

/* ---- 申込み一覧アイテム（ホーム） ---- */
.mine-list { display: flex; flex-direction: column; gap: 8px; }
.mine-list.past { margin-top: 8px; }
.mine-item { border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; background: #fff; }
.mi-main { display: flex; align-items: center; gap: 10px; }
.mi-date { font-size: 16px; font-weight: 700; }
.mi-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.mi-badge.applied { background: #eafaf0; color: var(--line-d); }
.mi-badge.done { background: #e6eef9; color: #1f4fa8; }
.mi-badge.absent { background: #fdecec; color: #b02a26; }
.mi-sougei { font-size: 13px; color: #4a5567; margin-top: 6px; }
.mi-edit { margin-top: 10px; width: 100%; background: #fff; border: 1.5px solid var(--line);
  color: var(--line-d); border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.mi-edit:active { background: #eafaf0; }
.empty-card { border: 1.5px dashed var(--bd); border-radius: 12px; padding: 24px 16px; text-align: center;
  color: var(--mut); font-size: 14px; background: var(--bg-soft); }
.past-toggle { margin-top: 18px; width: 100%; background: none; border: none; color: var(--mut);
  font-size: 13px; padding: 8px; cursor: pointer; }

/* ---- 申込み/変更シート ---- */
.sheet { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
.sheet-header { background: #fff; border-bottom: 1px solid var(--bd); padding: 14px 16px 12px;
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
.sheet-close { grid-column: 1; background: var(--bg-soft); border: none; width: 34px; height: 34px;
  border-radius: 999px; font-size: 20px; line-height: 1; color: #445; cursor: pointer; }
.sheet-title { grid-column: 2; text-align: center; font-size: 16px; font-weight: 700; }
.sheet-child { grid-column: 2; text-align: center; font-size: 12px; color: var(--mut); grid-row: 2; }
.sheet-body { flex: 1; padding: 14px 16px 96px; }

/* 月コントロール */
.month-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 12px; }
.month-ctl button { background: var(--bg-soft); border: none; width: 40px; height: 40px; border-radius: 10px;
  font-size: 15px; cursor: pointer; }
#pMonthLabel, #mLabel { font-size: 16px; font-weight: 700; min-width: 120px; text-align: center; }

/* カレンダー */
.p-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.p-cal .h { text-align: center; font-size: 12px; color: var(--mut); padding: 4px 0; font-weight: 700; }
.p-cal .h.sun { color: #d9534f; } .p-cal .h.sat { color: #3a7bd5; }
.p-cal .cell { min-height: 46px; border-radius: 10px; border: 1px solid var(--bd); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 14px; cursor: pointer; position: relative; }
.p-cal .cell.empty { background: transparent; border: none; cursor: default; }
.p-cal .cell.disabled { background: #f4f5f8; color: #bcc3cf; cursor: not-allowed; }
.p-cal .cell.applied { background: #eafaf0; border-color: #a8e0c1; color: var(--line-d); cursor: default; }
.p-cal .cell.selected { background: var(--line); border-color: var(--line); color: #fff; font-weight: 700; }
.p-cal .cell.today { box-shadow: inset 0 0 0 2px #ffb84d; }
.p-cal .cell .dn { line-height: 1; }
.p-cal .cell .mk { font-size: 9px; line-height: 1; }
.p-cal .cell.applied .mk { color: var(--line-d); }
.p-cal .cell.selected .mk.sel { color: #eafaf0; }
.p-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 2px; font-size: 11px; color: var(--mut); }
.p-legend span { display: inline-flex; align-items: center; gap: 5px; }
.p-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; border: 1px solid var(--bd); }
.p-legend i.lg-sel { background: var(--line); border-color: var(--line); }
.p-legend i.lg-app { background: #eafaf0; border-color: #a8e0c1; }
.p-legend i.lg-past { background: #f4f5f8; }

/* 曜日まとめ（畳んでおく＝主動線を邪魔しない） */
.wd-fold { border: 1px solid var(--bd); border-radius: 12px; margin: 6px 0 14px; background: var(--bg-soft); }
.wd-fold summary { padding: 12px 14px; font-size: 13px; color: #445; cursor: pointer; list-style: none; }
.wd-fold summary::-webkit-details-marker { display: none; }
.wd-fold summary::before { content: "＋ "; color: var(--mut); }
.wd-fold[open] summary::before { content: "− "; }
.wd-row { display: flex; gap: 5px; padding: 0 14px; }
.wd-chip { flex: 1; text-align: center; padding: 9px 0; border-radius: 8px; background: #fff;
  border: 1px solid var(--bd); font-size: 13px; cursor: pointer; user-select: none; }
.wd-chip.on { background: var(--line); color: #fff; border-color: var(--line); font-weight: 700; }
.wd-apply { margin: 10px 14px 14px; width: calc(100% - 28px); background: #445; color: #fff; border: none;
  padding: 10px; border-radius: 8px; font-size: 13px; cursor: pointer; }

/* 送迎カード */
.sougei-card { border: 1px solid var(--bd); border-radius: 12px; padding: 14px; margin-top: 4px; }
.sougei-head { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.sougei-toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 8px 0; cursor: pointer; }
.sougei-toggle input { width: 20px; height: 20px; }
/* 場所/時間は縦積み。iOSのtype=time実寸が広く、固定2カラムだと375px幅で時間欄が右端に見切れるため。 */
.sougei-fields { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 10px 30px; }
.sougei-fields.off { display: none; }
.sougei-fields label { font-size: 12px; color: var(--mut); display: flex; flex-direction: column; gap: 4px; }
.sougei-fields input { width: 100%; min-width: 0; padding: 10px; font-size: 15px; border: 1px solid #cdd4e0; border-radius: 8px; }
.sougei-fields input[type="time"] { max-width: 180px; }

/* 送信バー（シート下部固定） */
.submit-bar { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--bd); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 12px; align-items: center; z-index: 10; }
.submit-bar .count { font-size: 13px; color: #445; flex: 1; }
.submit-bar button { background: var(--line); color: #fff; border: none; padding: 14px 18px; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.submit-bar button:disabled { background: #c3cad6; }

/* 変更シート: 取消リンク */
.edit-cancel-link { margin-top: 22px; width: 100%; background: none; border: none; color: var(--red);
  font-size: 14px; padding: 12px; cursor: pointer; text-decoration: underline; }
.edit-cancel-link.armed { background: #fdecec; border-radius: 10px; text-decoration: none; font-weight: 700; }

/* トースト */
.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: #222b3a; color: #fff;
  padding: 12px 18px; border-radius: 999px; font-size: 13px; z-index: 60; max-width: 90%; text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.24); }

/* ---- 保護者画面だけ文字を大きく（.parent-app 配下に限定・職員PC画面は不変） ----
   幅広い年齢の保護者がスマホ片手で短時間操作する前提。入力値は16px以上＝iOSのフォーカス自動ズーム（画面が飛ぶ）を防ぐ。 */
.parent-app { font-size: 16px; }
.parent-app input, .parent-app select, .parent-app textarea, .parent-app button { font-size: 16px; }
.parent-app .sougei-head { font-size: 16px; }
.parent-app .sougei-toggle { font-size: 17px; }
.parent-app .sougei-fields label { font-size: 14px; }
.parent-app .sougei-fields input { font-size: 16px; }
.parent-app .submit-bar .count { font-size: 15px; }
.parent-app .submit-bar button { font-size: 17px; }
.parent-app .mi-date { font-size: 17px; }
.parent-app .mi-sougei { font-size: 15px; }
.parent-app .mi-edit { font-size: 15px; }
.parent-app .home-h { font-size: 16px; }
.parent-app .wd-fold summary { font-size: 15px; }
.parent-app .sheet-title { font-size: 17px; }
.parent-app .p-cal .cell { font-size: 15px; }
.parent-app .edit-cancel-link { font-size: 15px; }

/* ============================================================
   職員画面
   ============================================================ */
.staff-wrap { max-width: 1000px; margin: 0 auto; padding-bottom: 40px; }
.s-header { background: #263450; color: #fff; padding: 12px 20px; display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.s-title { font-size: 17px; font-weight: 800; letter-spacing: .03em; }
.s-nav { display: flex; gap: 6px; }
.s-tab { background: transparent; color: #b9c4da; border: none; padding: 8px 18px; border-radius: 999px;
  cursor: pointer; font-size: 15px; }
.s-tab.active { background: #fff; color: #263450; font-weight: 700; }
.s-actor { margin-left: auto; font-size: 13px; color: #cdd6e6; }
.s-actor select { padding: 6px 8px; font-size: 13px; border-radius: 8px; border: none; }

.s-main { padding: 20px; }
.s-panel { display: none; }
.s-panel.active { display: block; }
h2 { font-size: 19px; margin: 0 0 6px; }
.s-lead { color: var(--mut); font-size: 13px; margin: 0 0 16px; }

/* 今日: 日ナビ */
.day-ctl { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.day-ctl button { background: #fff; border: 1px solid var(--bd); width: 40px; height: 40px; border-radius: 10px;
  font-size: 15px; cursor: pointer; }
.day-label { font-size: 20px; font-weight: 800; }
.day-today { width: auto !important; padding: 0 14px; background: var(--blue) !important; color: #fff !important;
  border: none !important; font-size: 13px !important; }

/* 今日: サマリ */
.today-stats { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.stat { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 8px 16px; font-size: 13px; color: #445; }
.stat b { font-size: 20px; color: var(--ink); margin-right: 3px; }
.stat.abs b { color: var(--red); }

/* 今日: カード一覧 */
.today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.t-card { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 14px 16px; position: relative; }
.t-card.is-absent { background: #fbf2f2; border-color: #f0cfcd; }
.tc-top { display: flex; align-items: center; gap: 8px; }
.tc-name { font-size: 17px; font-weight: 700; flex: 1; }
.tc-st { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.tc-st.st-att { background: #e6f6ee; color: #14804a; }
.tc-st.st-plan { background: #fff2d6; color: #8a6100; }
.tc-st.st-abs { background: #fde2e0; color: #b02a26; }
.card-menu-btn { background: var(--bg-soft); border: none; width: 30px; height: 30px; border-radius: 8px;
  font-size: 16px; cursor: pointer; color: #556; line-height: 1; }
.tc-type { font-size: 12px; color: var(--mut); margin: 6px 0 10px; }
.src-tag { background: #e7ecf6; color: #3a4a6b; font-size: 10px; padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
.tc-sougei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
.tc-sougei .sl { display: block; font-size: 10px; color: var(--mut); margin-bottom: 2px; }
.tc-sougei .none { color: #b7bfcd; }
.card-menu { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bd); gap: 8px; flex-wrap: wrap; }
.card-menu.open { display: flex; }
.card-menu button { flex: 1; min-width: 120px; background: #fff; border: 1px solid #e0a6a3; color: #b02a26;
  border-radius: 8px; padding: 9px; font-size: 13px; cursor: pointer; }
.card-menu button[data-st="planned"] { border-color: #9ec6a6; color: #1c6b3c; }
.empty-card { border: 1.5px dashed var(--bd); border-radius: 12px; padding: 30px; text-align: center;
  color: var(--mut); background: #fff; grid-column: 1 / -1; }

/* 代理入力：保護者の申込みシートと“構造ごと”同じ。中央寄せ・最大幅は保護者シートと同一(480px)。横に広げない。
   保護者選択〜カレンダー〜送迎〜送信バーまでを1枚の白カードにまとめる（＝1つの申込みという意味の単位を1枚で見せる）。 */
.req { color: var(--red); }
/* 職員はPC/タブレット。保護者(スマホ480px)より広い640pxにして、セル＝タップ領域も比例して育てる。 */
.proxy-sheet { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--bd);
  border-radius: 16px; padding: 16px; overflow: hidden; }
.proxy-sheet .p-cal { gap: 6px; }
.proxy-sheet .p-cal .cell { min-height: 62px; font-size: 16px; }
/* 保護者/児童選択はカードを分けず、上部セクション＋区切り線で1枚の中に置く */
.proxy-who { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--bd); }
.proxy-who label { font-size: 12px; color: #445; font-weight: 700; display: flex; flex-direction: column; gap: 5px; }
.proxy-who select { padding: 11px; font-size: 15px; border: 1px solid #cdd4e0; border-radius: 8px; background: #fff; }
.legend-note { color: var(--mut); font-size: 11px; }
/* 送信バーは同カード内の“フッター”として、上区切り線付き・カード下端に密着（左右いっぱい） */
.submit-bar.proxy-bar { position: static; max-width: none; margin: 16px -16px -16px; border: none;
  border-top: 1px solid var(--bd); border-radius: 0 0 16px 16px; padding: 14px 16px; }

/* 月まとめ */
.bill-total { display: flex; align-items: baseline; justify-content: space-between; background: #263450; color: #fff;
  border-radius: 14px; padding: 18px 22px; margin-bottom: 18px; }
.bt-label { font-size: 14px; opacity: .9; }
.bt-amt { font-size: 30px; font-weight: 800; }
.s-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 10px; overflow: hidden; }
.s-table th, .s-table td { border-bottom: 1px solid var(--bd); padding: 11px 14px; text-align: left; }
.s-table th { background: #f0f3f9; font-size: 12px; color: #445; }
.s-table .num { text-align: right; }
.empty-cell { text-align: center; color: var(--mut); padding: 26px; }
.rec-fold { margin-top: 16px; }
.rec-fold summary { cursor: pointer; font-size: 13px; color: var(--blue); padding: 8px 0; }
.rec-fold .s-table { margin-top: 10px; }
.summary { font-weight: 700; margin-top: 10px; font-size: 14px; }
.rate-note { margin-top: 14px; font-size: 11px; color: var(--mut); }

.staff-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #222b3a; color: #fff;
  padding: 12px 18px; border-radius: 10px; font-size: 13px; z-index: 60; box-shadow: 0 6px 18px rgba(0,0,0,.24); }