/*
cast.css 054 キャストのマイページ（cast.html）専用。内勤・管理者・ドライバーの styles.css は読まない（軽く・混ざらない）
- スマートフォン縦画面が主。PC・タブレットでは幅 480px に収めて中央に置く（横に広げない）
- 色：淡いローズ × アイボリー（053 の画面見本どおり）。文字は大きめ・角は丸く・影は薄く
- 下の固定ナビ（5 つ）＋ iPhone のホームバー分の余白（safe-area）
*/
:root {
--rose: #e9a7b8; --rose-d: #c4637f; --rose-dd: #9d4660; --rose-l: #fbe9ee; --rose-ll: #fdf3f6; --ivory: #fffaf7; --ink: #4b3b41; --mute: #9a858c; --line: #f1dde3;
--ok: #4f9a66; --ok-l: #e8f5ec; --ng: #d6455a; --ng-l: #fdeaed; --gold: #c9961f; --gold-l: #fff3df; --pink: #ffd6e0; --pink-d: #e0728f; --gray-l: #f0ecee;
--nav-h: 64px; --radius: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #f4eef0; color: var(--ink); font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", sans-serif; font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.cm { min-height: 100%; background: var(--ivory); display: flex; flex-direction: column; position: relative; }
@media (min-width: 600px) {
body { background: linear-gradient(160deg, #f6e4ea, #f1ecef 60%, #e9e4e8); }
.cm { max-width: 480px; margin: 0 auto; min-height: 100vh; box-shadow: 0 0 40px rgba(120, 60, 80, .15); }
.cm-nav { max-width: 480px; left: 0; right: 0; margin: 0 auto; } /* 10/16：transform ではなく左右 0＋auto margin で中央に（固定要素でも確実に中央・画像化のときもずれない） */
}
.cm-main { flex: 1; padding: 0 14px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.cm-main.no-nav { padding-bottom: 32px; }
.cm-loading { padding: 60px 20px; text-align: center; color: var(--mute); }
.cm-spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--rose-d); border-radius: 50%; margin: 0 auto 12px; animation: cm-spin 1s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
/* ---------- ヘッダー（ローズ） ---------- */
.cm-top { background: linear-gradient(135deg, #f6cdd8, #efb6c6); padding: calc(18px + env(safe-area-inset-top)) 16px 14px; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; margin: 0 -14px 12px; color: #5b3340; }
.cm-top .store { font-size: 12px; color: #7a4f5c; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }
.cm-top .store .env { background: rgba(255,255,255,.6); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.cm-top .name { font-size: 20px; font-weight: 600; margin-top: 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-top .name small { font-weight: 400; font-size: 13px; color: #7a4f5c; }
.cm-top .title { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cm-top .title small { font-weight: 400; font-size: 12px; color: #7a4f5c; }
.cm-top .back { background: rgba(255,255,255,.55); border: 0; border-radius: 999px; padding: 4px 12px 4px 8px; font-size: 13px; color: #5b3340; }
.cm-stats { display: flex; gap: 8px; margin-top: 12px; }
.cm-stat { flex: 1; background: rgba(255,255,255,.72); border-radius: 14px; padding: 8px 6px; text-align: center; }
.cm-stat .l { font-size: 11px; color: #7a4f5c; white-space: nowrap; }
.cm-stat .v { font-size: 20px; font-weight: 600; color: #5b3340; margin-top: 1px; line-height: 1.2; white-space: nowrap; }
.cm-stat .v small { font-size: 11px; font-weight: 400; margin-left: 1px; }
.cm-stat .v.ng { color: var(--ng); }
.cm-call { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; width: 100%; background: #fff; color: var(--rose-dd); border: 0; border-radius: 999px; padding: 10px 14px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 12px rgba(120, 50, 70, .15); }
.cm-call:active { transform: translateY(1px); }
/* 063：お店への連絡（電話・メール。管理者「マイページ」設定で入れた分だけ）。ホームの上部・予約の詳細・シフトのシート（お休み希望の案内）で使う */
.cm-contact { display: flex; gap: 8px; margin-top: 12px; }
.cm-contact .cm-call { margin-top: 0; flex: 1; min-width: 0; padding: 10px 8px; font-size: 14px; white-space: nowrap; }
.cm-offnote { background: var(--rose-l); border: 1px solid #f3cfd9; border-radius: 12px; padding: 10px 8px; font-size: 13px; line-height: 1.5; color: #7a4f5c; text-align: center; }
/* 10/18 13:26 指示「2 行になっていて見た目が悪いので 1 行に」：25 文字の案内を折り返さず、画面幅に合わせて文字を少し小さくする（390px → 約 12.9px・375px → 約 12.4px・320px → 10.5px。PC 幅は 13.5px） */
.cm-offnote b { display: block; color: var(--rose-dd); font-size: clamp(10.5px, 3.3vw, 13.5px); white-space: nowrap; letter-spacing: -0.01em; }
.cm-offnote .cm-contact { margin-top: 8px; }
.cm-offnote .cm-call { box-shadow: none; border: 1px solid #e6c3cd; font-size: 13.5px; }
/* ---------- 共通の部品 ---------- */
.cm-sec { font-size: 13px; font-weight: 600; color: var(--rose-d); margin: 14px 2px 6px; display: flex; align-items: center; gap: 6px; }
.cm-sec .sp { flex: 1; }
.cm-sec a, .cm-sec button.lnk { font-weight: 400; color: var(--mute); font-size: 12px; background: none; border: 0; padding: 0; }
.cm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(196, 99, 127, .06); }
.cm-card.tap { display: block; width: 100%; text-align: left; }
.cm-card.tap:active { background: var(--rose-ll); }
.cm-empty { color: var(--mute); text-align: center; padding: 18px 10px; font-size: 13.5px; }
.cm-legend { font-size: 11px; color: var(--mute); margin: 6px 2px 0; line-height: 1.45; }
.cm-note { background: #fffdf5; border: 1px solid #f1e4bf; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin: 8px 0; }
.cm-note .nh { font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; }
.cm-note .nh .sp { flex: 1; }
.cm-note .nh button { background: none; border: 0; color: var(--mute); font-size: 12px; padding: 0; }
.cm-note textarea { width: 100%; min-height: 96px; border: 1px solid #ead9a8; border-radius: 10px; padding: 8px 10px; background: #fff; resize: vertical; font-size: 15px; }
.cm-note .cnt { font-size: 11px; color: var(--mute); text-align: right; }
.cm-note .body { white-space: pre-wrap; word-break: break-word; }
.cm-note .body.empty { color: var(--mute); }
.cm-tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; line-height: 1.6; }
.cm-tag.ok { background: var(--ok-l); color: var(--ok); }
.cm-tag.ng { background: var(--ng-l); color: var(--ng); }
.cm-tag.hon { background: var(--gold-l); color: #9a6b1e; }
.cm-tag.pink { background: var(--pink); color: #9d4660; }
.cm-tag.gray { background: var(--gray-l); color: var(--mute); }
.cm-tag.blue { background: #e7f0fb; color: #3b6aa0; }
.cm-tag.free { background: #eef6ee; color: #4f9a66; }
.cm-tag.paid { background: #fff3df; color: #9a6b1e; }
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 16px; font-size: 14px; }
.cm-btn.primary { background: var(--rose-d); border-color: var(--rose-d); color: #fff; font-weight: 600; box-shadow: 0 6px 14px rgba(196, 99, 127, .3); }
.cm-btn.big { width: 100%; padding: 14px; font-size: 17px; margin: 12px 0 6px; }
.cm-btn.ghost { background: transparent; border-color: #e6cdd5; color: var(--rose-dd); }
.cm-btn.danger { border-color: #f0c0c7; color: var(--ng); background: #fff; }
.cm-btn:disabled { opacity: .55; pointer-events: none; }
.cm-btn:active { transform: translateY(1px); }
.cm-row { display: flex; gap: 8px; align-items: center; }
.cm-row .sp { flex: 1; }
.cm-field { margin: 10px 0; }
.cm-field label { display: block; font-size: 12.5px; color: var(--mute); margin-bottom: 4px; }
.cm-field input, .cm-field select, .cm-field textarea { width: 100%; border: 1px solid #e6cdd5; border-radius: 12px; padding: 11px 12px; background: #fff; font-size: 17px; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus { outline: 2px solid var(--rose); border-color: var(--rose); }
.cm-field .cm-hint { display: block; font-size: 11px; color: var(--mute); margin-top: 4px; line-height: 1.4; } /* 062：一言はボードのメモ欄に 👩 で出る */
.cm-msg { border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin: 10px 0; line-height: 1.5; }
.cm-msg.err { background: var(--ng-l); color: #9b2d3d; }
.cm-msg.info { background: var(--rose-l); color: #7a4f5c; }
.cm-msg.ok { background: var(--ok-l); color: #2f6b41; }
.cm-foot { text-align: center; color: var(--mute); font-size: 11px; padding: 18px 0 6px; line-height: 1.6; }
.cm-foot a, .cm-foot button { color: var(--mute); background: none; border: 0; padding: 0; font-size: 11px; text-decoration: underline; }
.cm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ccc; vertical-align: middle; margin-right: 4px; }
.cm-dot.on { background: var(--ok); } .cm-dot.wait { background: var(--gold); } .cm-dot.off { background: var(--ng); }
/* ---------- 予約の行（ホーム・予約） ---------- */
.cm-res { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(196, 99, 127, .06); color: var(--ink); }
.cm-res:active { background: var(--rose-ll); }
.cm-res.unacked { border-color: #f3b3bf; background: #fff6f8; }
.cm-res.cancelled { opacity: .6; }
.cm-res.cancelled .t, .cm-res.cancelled .m { text-decoration: line-through; }
.cm-res .t { font-size: 18px; font-weight: 600; min-width: 52px; line-height: 1.2; }
.cm-res .t small { display: block; font-size: 11px; font-weight: 400; color: var(--mute); }
.cm-res .m { flex: 1; font-size: 13.5px; line-height: 1.45; min-width: 0; }
.cm-res .m small { color: var(--mute); display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-res .r { text-align: right; font-size: 13px; white-space: nowrap; }
.cm-res .r b { display: block; font-size: 15px; }
.cm-daysum { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 8px; font-size: 13px; color: var(--mute); }
.cm-daysum b { color: var(--ink); font-size: 16px; }
/* ---------- 未確認の通知（ホーム上部） ---------- */
.cm-notices { margin-top: 10px; }
.cm-ntc { background: #fff; border-left: 5px solid var(--rose-d); border-radius: 14px; box-shadow: 0 6px 18px rgba(90, 40, 60, .14); padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.cm-ntc.cancelled { border-left-color: var(--mute); }
.cm-ntc .h { font-size: 12px; font-weight: 600; color: var(--rose-d); }
.cm-ntc.cancelled .h { color: var(--mute); }
.cm-ntc .b { font-size: 14px; margin-top: 2px; line-height: 1.4; }
.cm-ntc .b small { color: var(--mute); font-size: 12px; }
.cm-ntc .m { flex: 1; min-width: 0; }
.cm-ntc .cm-btn { padding: 7px 14px; font-size: 13px; flex: none; }
/* ---------- 浮かぶ通知（他の画面で届いたとき） ---------- */
.cm-pop-root { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding: calc(10px + env(safe-area-inset-top)) 12px 0; pointer-events: none; }
@media (min-width: 600px) { .cm-pop-root { max-width: 480px; left: 0; right: 0; margin: 0 auto; } }
.cm-pop { pointer-events: auto; background: #fff; border-left: 5px solid var(--rose-d); border-radius: 14px; box-shadow: 0 10px 26px rgba(90, 40, 60, .25); padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; animation: cm-in .25s ease-out; }
@keyframes cm-in { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-pop .m { flex: 1; min-width: 0; }
.cm-pop .h { font-size: 12px; font-weight: 600; color: var(--rose-d); }
.cm-pop .b { font-size: 14px; margin-top: 2px; }
.cm-pop .x { background: none; border: 0; color: var(--mute); font-size: 18px; padding: 0 2px; }
/* ---------- 下のトースト ---------- */
.cm-toast-root { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 14px; }
.cm-toast { pointer-events: auto; background: #4b3b41; color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; box-shadow: 0 6px 18px rgba(0,0,0,.2); max-width: 100%; text-align: center; animation: cm-in .2s ease-out; }
.cm-toast.err { background: var(--ng); }
.cm-toast.ok { background: var(--ok); }
/* ---------- シフト（14 日の並び） ---------- */
.cm-shiftgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; } /* 054 のホームの 15 日の枠（061 でホームはカレンダーに。cm-day と共に未使用・互換のため残す） */
.cm-day { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px 2px 4px; text-align: center; font-size: 11px; color: var(--mute); line-height: 1.25; min-height: 60px; }
.cm-day b { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
.cm-day.on { background: var(--rose-l); border-color: #f1c3cf; }
.cm-day.on b { color: var(--rose-d); }
.cm-day.today { outline: 2px solid var(--rose-d); outline-offset: -2px; }
.cm-day .tm { font-size: 10.5px; color: var(--rose-d); white-space: nowrap; }
.cm-day.req { background: var(--pink); border-color: #f0a9bd; }
.cm-day.pend { background: var(--pink); border: 1.5px dashed var(--pink-d); }
.cm-day .pre { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 2px; }
.cm-day .sun { color: var(--ng); } .cm-day .sat { color: #3b6aa0; }
.cm-shiftrow { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; text-align: left; width: 100%; }
.cm-shiftrow:active { background: var(--rose-ll); }
.cm-shiftrow.req { background: var(--pink); border-color: #f0a9bd; }
.cm-shiftrow.pend { background: var(--pink); border: 1.5px dashed var(--pink-d); }
.cm-shiftrow .d { min-width: 72px; font-weight: 600; line-height: 1.2; }
.cm-shiftrow .d small { display: block; font-weight: 400; font-size: 11px; color: var(--mute); }
.cm-shiftrow .tm { flex: 1; font-size: 15px; }
.cm-shiftrow .tm small { display: block; font-size: 11.5px; color: var(--mute); }
.cm-shiftrow .st { text-align: right; font-size: 12px; white-space: nowrap; }
/* ---------- 報酬 ---------- */
.cm-seg { display: flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 10px 0; }
.cm-seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 7px 4px; font-size: 13px; color: var(--mute); }
.cm-seg button.on { background: var(--rose-d); color: #fff; font-weight: 600; }
.cm-pnav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.cm-pnav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 16px; }
.cm-pnav .lbl { min-width: 140px; text-align: center; font-size: 17px; font-weight: 600; }
.cm-big { text-align: center; padding: 6px 0 4px; }
.cm-big .v { font-size: 30px; font-weight: 700; color: var(--rose-dd); line-height: 1.1; }
.cm-big .l { font-size: 12px; color: var(--mute); margin-top: 4px; }
.cm-bd { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13.5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cm-bd div { display: flex; justify-content: space-between; }
.cm-bd .k { color: var(--mute); }
.cm-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.cm-tbl th { font-weight: 400; color: var(--mute); font-size: 11.5px; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.cm-tbl td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cm-tbl td.n, .cm-tbl th.n { text-align: right; white-space: nowrap; }
.cm-tbl tr.tap { cursor: pointer; }
.cm-tbl tr.tap:active td { background: var(--rose-ll); }
.cm-tbl tr.zero td { color: var(--mute); }
/* ---------- 詳細 ---------- */
.cm-dl { display: grid; grid-template-columns: 76px 1fr; gap: 7px 10px; font-size: 14.5px; align-items: baseline; }
.cm-dl .k { color: var(--mute); font-size: 12.5px; }
.cm-dl .v b { font-weight: 600; }
.cm-dl .v small { color: var(--mute); font-size: 12px; }
.cm-dl .v .sub { display: block; font-size: 12.5px; color: var(--mute); }
.cm-ackd { text-align: center; color: var(--ok); font-weight: 600; margin: 12px 0 4px; font-size: 15px; }
.cm-center { text-align: center; }
/* ---------- 顧客メモ一覧 ---------- */
.cm-search { display: flex; gap: 6px; margin: 8px 0 10px; }
.cm-search input { flex: 1; border: 1px solid #e6cdd5; border-radius: 999px; padding: 9px 14px; font-size: 16px; background: #fff; }
.cm-cust { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; width: 100%; text-align: left; }
.cm-cust:active { background: var(--rose-ll); }
.cm-cust .nm { font-weight: 600; font-size: 15px; }
.cm-cust .nm small { font-weight: 400; color: var(--mute); font-size: 12px; margin-left: 6px; }
.cm-cust .ex { font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-cust .m { flex: 1; min-width: 0; }
.cm-cust .ic { color: var(--gold); font-size: 16px; }
/* ---------- シート（下から） ---------- */
.cm-sheet-wrap { position: fixed; inset: 0; z-index: 70; background: rgba(60, 30, 40, .35); display: flex; align-items: flex-end; justify-content: center; }
.cm-sheet { background: var(--ivory); width: 100%; max-width: 480px; border-top-left-radius: 22px; border-top-right-radius: 22px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; animation: cm-up .25s ease-out; }
@keyframes cm-up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.cm-sheet h3 { margin: 0 0 4px; font-size: 17px; color: var(--rose-dd); }
.cm-sheet .sub { color: var(--mute); font-size: 12.5px; margin-bottom: 8px; }
.cm-sheet .two { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.cm-sheet .two .tilde { text-align: center; color: var(--mute); }
.cm-sheet .acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* ---------- 下のナビ ---------- */
.cm-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); display: flex; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.cm-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; color: var(--mute); position: relative; }
.cm-nav a .ic { font-size: 21px; line-height: 1; }
.cm-nav a.on { color: var(--rose-d); font-weight: 600; }
.cm-nav a .badge { position: absolute; top: 8px; left: calc(50% + 6px); background: var(--ng); color: #fff; font-size: 10px; border-radius: 999px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 4px; font-weight: 600; }
/* ---------- 登録（門） ---------- */
.cm-gate { padding: calc(40px + env(safe-area-inset-top)) 22px 40px; text-align: center; }
.cm-gate .logo { font-size: 13px; letter-spacing: .2em; color: var(--rose-d); font-weight: 600; }
.cm-gate h1 { font-size: 22px; margin: 6px 0 4px; color: #5b3340; font-weight: 600; }
.cm-gate .lead { color: var(--mute); font-size: 13.5px; margin-bottom: 18px; line-height: 1.6; }
.cm-gate .cm-field { text-align: left; }
.cm-gate .cm-field input { text-align: center; font-size: 22px; letter-spacing: .06em; padding: 12px; }
.cm-gate .stores { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cm-gate .ring { width: 64px; height: 64px; border-radius: 50%; margin: 10px auto 16px; border: 4px solid var(--rose-l); border-top-color: var(--rose-d); animation: cm-spin 1.2s linear infinite; }
.cm-gate .mark { font-size: 44px; margin: 6px 0 10px; }
.cm-gate .small { font-size: 12px; color: var(--mute); margin-top: 16px; line-height: 1.6; }
/* ---------- 061（10/18）：ホームのカレンダー（見るだけ・日曜始まり）／未送信の知らせ ---------- */
.cm-sec .hint { font-weight: 400; color: var(--mute); font-size: 11.5px; }
.cm-cal { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 6px; }
.cm-calnav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0 6px; }
.cm-calnav button { border: 1px solid var(--line); background: #fff; color: var(--rose-d); }
.cm-calnav button[data-cal="-1"], .cm-calnav button[data-cal="1"] { width: 34px; height: 34px; border-radius: 50%; font-size: 17px; }
.cm-calnav .lbl { min-width: 120px; border-radius: 999px; padding: 4px 12px; font-size: 15px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cm-calnav .lbl small { font-weight: 400; font-size: 10.5px; color: var(--rose-d); }
.cm-calhead { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10.5px; color: var(--mute); text-align: center; margin-bottom: 3px; }
.cm-calhead .sat { color: #3b6aa0; } .cm-calhead .sun { color: var(--ng); }
.cm-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cm-cd { min-height: 50px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 1px 2px; text-align: center; font-size: 10px; color: var(--mute); line-height: 1.2; background: #fff; position: relative; display: block; width: 100%; }
.cm-cd:active { background: var(--rose-ll); }
.cm-cd b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.cm-cd b.sun { color: var(--ng); } .cm-cd b.sat { color: #3b6aa0; }
.cm-cd.past { background: #faf7f8; } .cm-cd.past b { color: #b8a7ad; }
.cm-cd.on { background: var(--rose-l); border-color: #f1c3cf; } .cm-cd.on b { color: var(--rose-d); }
.cm-cd.req { background: var(--pink); border-color: #f0a9bd; }
.cm-cd.pend { background: var(--pink); border: 1.5px dashed var(--pink-d); }
.cm-cd.today { outline: 2px solid var(--rose-d); outline-offset: -2px; }
.cm-cd.draft { box-shadow: inset 0 0 0 2px #e7c35a; }
.cm-cd.blank { border: 0; background: transparent; min-height: 0; }
.cm-cd .tm { font-size: 9.5px; color: var(--rose-d); white-space: nowrap; overflow: hidden; }
.cm-cd.past .tm { color: #c99aa8; }
.cm-cd .pre { display: inline-block; font-size: 9px; color: #8a6a12; background: var(--gold-l); border-radius: 999px; padding: 0 4px; margin-top: 1px; line-height: 1.3; }
.cm-cd .pre::before { content: "●"; color: var(--gold); font-size: 7px; margin-right: 2px; vertical-align: 1px; }
.cm-remind { display: flex; align-items: center; gap: 8px; background: #fff6d6; border: 1px solid #efd9a0; border-radius: 12px; padding: 8px 12px; margin: 10px 0 0; font-size: 13px; color: #6b5210; }
.cm-remind .sp { flex: 1; } .cm-remind b { color: #a2721a; font-size: 12.5px; white-space: nowrap; }
/* ---------- 061：シフト登録（下書き・まとめ送信） ---------- */
.cm-tag.draft { background: #fff6d6; color: #8a6a12; border: 1px solid #efd9a0; }
.cm-shiftrow.draft { background: #fff6d6; border-color: #efd9a0; }
.cm-shiftrow .dash { color: var(--mute); }
.cm-sheet .sub b.draft { color: #8a6a12; font-weight: 600; }
.cm-sheet label small { font-weight: 400; color: #a2721a; font-size: 11px; }
.cm-sendbar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 39; max-width: 480px; margin: 0 auto; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(120, 60, 80, .12); padding: 10px 14px; display: flex; gap: 8px; align-items: center; }
.cm-sendbar .n { font-size: 11.5px; color: var(--mute); line-height: 1.3; width: 64px; flex: none; } .cm-sendbar .n b { color: var(--ink); font-size: 13px; }
.cm-sendbar .cm-btn.primary { flex: 1; padding: 11px 8px; font-size: 14.5px; }
.cm-sendbar .cm-btn.ghost { padding: 11px 12px; font-size: 13px; flex: none; }
.cm-main.has-bar { padding-bottom: calc(var(--nav-h) + 100px + env(safe-area-inset-bottom)); }
.cm-nav a .badge.draft { background: #d9a520; }
/* ---------- 061：「シフトを登録しました」の知らせ（OK を押すまで残る） ---------- */
.cm-result-wrap { position: fixed; inset: 0; z-index: 65; background: rgba(60, 30, 40, .4); display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
.cm-result { background: #fff; width: 100%; max-width: 420px; border-radius: 18px; padding: 16px 16px 12px; box-shadow: 0 16px 40px rgba(60, 20, 40, .3); max-height: 86vh; overflow: auto; animation: cm-up .25s ease-out; }
.cm-result h3 { margin: 0; font-size: 17px; color: var(--ok); } .cm-result h3.ng { color: var(--ng); }
.cm-result .sub { margin: 2px 0 10px; font-size: 12px; color: var(--mute); }
.cm-result .cm-btn.big { margin: 14px 0 2px; }
.cm-rlist { display: flex; flex-direction: column; gap: 6px; }
.cm-rl { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 6px; font-size: 14px; }
.cm-rl:first-child { border-top: 0; padding-top: 0; }
.cm-rl .d { min-width: 76px; font-weight: 600; line-height: 1.3; } .cm-rl .m { flex: 1; line-height: 1.35; } .cm-rl .m small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 1px; }
.cm-rl.declined .d, .cm-rl.declined .m { color: var(--ng); } .cm-rl.declined .m small { color: #b05060; }
/* ---------- 066：iPhone・iPad「先にホーム画面に追加」の案内（門の画面・ホームのおすすめ・設定のシート） ---------- */
.cm-gate.cm-a2hs .mark { font-size: 40px; margin: 2px 0 4px; }
.cm-gate.cm-a2hs h2 { font-size: 17px; margin: 0 0 8px; color: var(--rose-dd); font-weight: 600; }
.cm-gate.cm-a2hs .lead { margin-bottom: 12px; }
.cm-steps { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.cm-steps li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.55; }
.cm-steps .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--rose-d); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.cm-steps .t { flex: 1; min-width: 0; }
.cm-steps small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 4px; line-height: 1.5; }
.cm-ic { width: 22px; height: 22px; fill: none; stroke: #2a7bd6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -6px; margin: 0 1px; } /* iPhone の青いボタン風 */
.cm-appicon { width: 26px; height: 26px; border-radius: 7px; vertical-align: -8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); margin: 0 1px; }
.cm-btn.sm { padding: 3px 10px; font-size: 12px; vertical-align: middle; }
.cm-a2hs-box { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; font-size: 14px; }
.cm-a2hs-box .warn { margin: 0 0 10px; line-height: 1.55; }
.cm-a2hs-box .cm-btn.big { margin: 4px 0; }
.cm-a2hs-box .alt { font-size: 12px; color: var(--mute); line-height: 1.7; margin-top: 8px; }
button.lnk { background: none; border: 0; padding: 0; color: var(--rose-dd); text-decoration: underline; font-size: inherit; line-height: inherit; }
.cm-a2hs-bar { display: flex; align-items: center; gap: 6px; background: #eef5ff; border: 1px solid #cfe0f7; border-radius: 12px; padding: 8px 10px; margin: 10px 0 0; font-size: 12.5px; color: #244b7a; }
.cm-a2hs-bar .t { flex: 1; line-height: 1.4; }
.cm-a2hs-bar button { background: #fff; border: 1px solid #bcd3f0; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #244b7a; white-space: nowrap; }
.cm-a2hs-bar button.x { border: 0; background: none; font-size: 14px; padding: 2px 4px; color: #6a86a8; }
.cm-sheet .cm-steps, .cm-sheet .cm-a2hs-box { margin-top: 6px; }
/* 067：登録画面の「Android の場合」の箱・Android の LINE／アプリの中「ブラウザ（Chrome）で開いてください」 */
.cm-gate .cm-andnote { margin: 14px 0 0; }
.cm-a2hs-box .h { font-weight: 600; color: var(--rose-dd); font-size: 14px; margin: 0 0 6px; }
.cm-a2hs-box ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.cm-a2hs-box li + li { margin-top: 5px; }
.cm-a2hs-box li small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; line-height: 1.5; }
.cm-a2hs-box .note { font-size: 12px; color: var(--mute); line-height: 1.6; margin: 8px 0 0; }
/* ---------- 072（10/19）：スタッフからの連絡（ホーム「今日の予約」の一覧の直前のカード・過去の連絡・浮かぶポップ）。予約の通知（ローズ）・未送信の下書き（黄）と見分けるため青系 ---------- */
.cm-msgs { margin-top: 10px; }
.cm-smsg { background: #eff6ff; border: 1px solid #bfdbfe; border-left: 5px solid #2563eb; border-radius: 14px; box-shadow: 0 6px 18px rgba(30, 64, 175, .12); padding: 10px 12px; margin-bottom: 8px; }
.cm-smsg .h { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: #1d4ed8; }
.cm-smsg .h small { margin-left: auto; font-weight: 400; color: var(--mute); font-size: 11.5px; white-space: nowrap; }
.cm-smsg .b { font-size: 15px; line-height: 1.55; margin-top: 4px; overflow-wrap: anywhere; color: var(--ink); }
.cm-smsg .f { display: flex; justify-content: flex-end; align-items: center; margin-top: 6px; }
.cm-smsg .f small { color: var(--mute); font-size: 11.5px; }
.cm-smsg .f .cm-btn.sm { padding: 5px 14px; font-size: 13px; }
.cm-smsg.closed { background: #fff; border-color: var(--line); border-left-color: #cbd5e1; box-shadow: none; }
.cm-smsg.closed .h { color: var(--mute); }
.cm-smsg.closing { opacity: .5; pointer-events: none; }
.cm-smsg.flash { animation: cmMsgFlash 1.2s ease-out 1; }
@keyframes cmMsgFlash { 0% { box-shadow: 0 0 0 4px #93c5fd; } 100% { box-shadow: 0 6px 18px rgba(30, 64, 175, .12); } }
.cm-pop.msg { border-left-color: #2563eb; }
.cm-pop.msg .h { color: #1d4ed8; }
.cm-pop.msg .h small { margin-left: 6px; font-weight: 400; color: var(--mute); }
.cm-pop.msg .b { overflow-wrap: anywhere; }
/* ---------- 056（073・10/19）：携帯の通知（Web Push）。ホームの「受け取る」カード（a2hs の青い帯と同じ形・ローズ系）と設定の状態表示 ---------- */
.cm-push { display: flex; align-items: center; gap: 8px; background: #fff4f7; border: 1px solid #f0c9d6; border-radius: 12px; padding: 8px 10px; margin: 10px 0 0; font-size: 12.5px; color: #7a4f5c; }
.cm-push .t { flex: 1; line-height: 1.45; }
.cm-push .t b { display: block; font-size: 13.5px; color: var(--rose-dd); margin-bottom: 1px; }
.cm-push .cm-btn.sm { padding: 6px 12px; font-size: 13px; white-space: nowrap; flex: none; }
.cm-push .x { border: 0; background: none; font-size: 14px; padding: 2px 4px; color: #b08793; flex: none; }
.cm-push.denied { background: #f6f6f6; border-color: #e3e3e3; color: #666; }
.cm-pushst { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cm-pushst .cm-dot { flex: none; margin-top: 7px; }
.cm-pushacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.cm-pushacts .cm-btn { flex: 1 1 auto; min-width: 0; }
#cmPushSet .cm-legend { margin-top: 6px; }