.shiftcal-app, .shiftcal-wall { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif; }
/*
 * Desktop: keep original sticky header.
 * Mobile: month nav + legend should scroll away; only the bulk input area is pinned.
 */
.shiftcal-header { position: sticky; top:0; z-index:20; background:#f4fbff; border:1px solid #d8e8f5; padding:10px 10px 8px; }

@media (max-width: 768px){
  .shiftcal-app{ --shiftcal-header-h: 240px; }
  /* Do NOT pin the whole header on mobile */
  .shiftcal-header{ position: static; top:auto; z-index:auto; }
  /* Pin only the bulk input box ("曜日まとめて入力") */
  .shiftcal-bulk{ position: sticky; top: 64px; z-index: 25; background:#ffffff; }
  /* Give the pinned bulk box a subtle separation */
  .shiftcal-bulk{ box-shadow: 0 8px 18px rgba(0,0,0,0.06); }

  /* Make the pinned bulk area compact on mobile */
  .shiftcal-bulk{ padding: 10px; }
  .shiftcal-bulk .bulk-title{ font-size: 16px; margin-bottom: 8px; }
  .shiftcal-bulk-row{ gap: 8px; }
  .shiftcal-bulk .shiftcal-pill{ padding: 10px 12px; }

  /* Advanced fields are hidden by default on mobile */
  .shiftcal-bulk .bulk-advanced{ display:none; }
  .shiftcal-bulk.is-advanced .bulk-advanced{ display:block; }
  .shiftcal-bulk .bulk-advanced-toggle{ padding: 10px 12px; border-radius: 999px; border: 1px solid #cfe0ee; background:#fff; font-weight: 800; }
}
.shiftcal-month-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.shiftcal-title { font-size:20px; font-weight:800; }
.shiftcal-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; background:#fff; border:1px solid #cfe0ee; border-radius:10px; text-decoration:none; color:#0b3a5c; font-weight:700; }
.shiftcal-btn:active { transform: translateY(1px); }
.shiftcal-legend-inline { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:14px; }
.lg { padding:6px 10px; border-radius:999px; border:1px solid #d0d0d0; background:#fff; font-weight:700; }
.lg-g { background: #e8ffe8; }
.lg-b { background: #e8f2ff; }
.lg-y { background: #fff9dc; }
.lg-r { background: #ffe8e8; }
.lg-gray { background: #f1f1f1; }

.shiftcal-list { padding-bottom: 92px; }
.shiftcal-day-card { background:#fff; border:1px solid #e2e2e2; border-radius:14px; margin:12px 0; padding:10px; box-shadow: 0 1px 0 rgba(0,0,0,0.03); scroll-margin-top: var(--shiftcal-header-h, 140px); }
.shiftcal-day-top { display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; }
.shiftcal-day-label { font-size:18px; font-weight:800; }
.shiftcal-badge { padding:6px 10px; border-radius:999px; font-weight:800; font-size:13px; border:1px solid #ddd; background:#f7f7f7; }
.badge-empty { background:#fff3f3; border-color:#f0c8c8; }
.badge-draft { background:#fff9dc; border-color:#e9db9c; }
.badge-submitted { background:#e8f2ff; border-color:#b9d4ff; }
.badge-approved { background:#e8ffe8; border-color:#bfe8bf; }
.badge-rejected { background:#ffe8e8; border-color:#f0bcbc; }

.shiftcal-toggle { padding:10px 12px; border-radius:12px; border:1px solid #cfe0ee; background:#fff; font-weight:800; }
.shiftcal-day-body { margin-top:10px; border-top:1px dashed #e5e5e5; padding-top:10px; }
.shiftcal-choices { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.shiftcal-choice { min-height:48px; font-size:18px; font-weight:900; border-radius:14px; border:2px solid #ddd; background:#fff; }
.shiftcal-choice[data-availability="in"]{ background:#e8f2ff; border-color:#bcd6ff; }
.shiftcal-choice[data-availability="out"]{ background:#ffe8f1; border-color:#ffbfd6; }
.shiftcal-choice[data-availability="conditional"]{ background:#e8f2ff; border-color:#bcd6ff; }

.shiftcal-choice.is-active { border-color:#0b3a5c; box-shadow: 0 0 0 3px rgba(11,58,92,0.15); }
.shiftcal-row { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.shiftcal-row label { font-weight:800; }
.shiftcal-slot, .shiftcal-custom, .shiftcal-note { font-size:16px; padding:12px 12px; border-radius:12px; border:1px solid #d5d5d5; }
.shiftcal-actions { display:flex; gap:10px; margin-top:12px; }
.shiftcal-btn-primary, .shiftcal-btn-secondary { flex:1; min-height:48px; border-radius:14px; font-weight:900; border:1px solid #cfe0ee; }
.shiftcal-btn-primary { background:#0b3a5c; color:#fff; }
.shiftcal-btn-secondary { background:#fff; color:#0b3a5c; }

.shiftcal-footer { position:fixed; left:0; right:0; bottom:0; z-index:50; background:#f6f6f6; border-top:1px solid #ddd; display:flex; gap:10px; padding:10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.shiftcal-footer-btn { flex:1; min-height:56px; border-radius:16px; font-size:16px; font-weight:900; border:1px solid #cfcfcf; background:#fff; }
.shiftcal-footer-btn.primary { background:#ff8a00; color:#fff; border-color:#ff8a00; }

.shiftcal-grid { width:100%; border-collapse:collapse; margin-top:14px; background:#fff; table-layout: fixed; }
.shiftcal-grid th, .shiftcal-grid td { border:1px solid #d9d9d9; padding:10px; vertical-align:top; min-width:88px; }
.shiftcal-grid thead th { background:#eaf3ff !important; font-weight:900; text-align:center; color:#0b3a5c !important; }
.shiftcal-grid .wk { width:46px; text-align:center; background:#f1f1f1; font-weight:900; }
.shiftcal-grid td.out { background:#fafafa; }
.shiftcal-grid td.cell { height:86px; }
.shiftcal-grid td.cell .d { font-weight:700; font-size:17px; margin-bottom:6px; color:#1A2B5A; line-height:1.2; display:flex; align-items:center; gap:4px; }
.shiftcal-grid td.cell.dow-0 .d { color:#c44b4b; }
.shiftcal-grid td.cell.dow-6 .d { color:#4a6fb5; }
.shiftcal-grid td.cell.holiday .d { color:#c44b4b; }
.shiftcal-grid td.cell .s { font-weight:900; font-size:13px; }

.shiftcal-grid td.empty { background:#fff; }
.shiftcal-grid td.off { background:#f1f1f1; }
.shiftcal-grid td.free { background:#fff9dc; }
.shiftcal-grid td.slot1 { background:#e8ffe8; }
.shiftcal-grid td.slot2 { background:#e8f2ff; }

.shiftcal-note { color:#666; margin-top:10px; font-size:13px; }


@media (max-width: 600px) {
  /* 壁掛けビュー：無理に収縮せず、最小列幅を確保して横スクロール可能に */
  .shiftcal-view-wall {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .shiftcal-view-wall .shiftcal-grid {
    width: auto !important;
    min-width: 100%;
    table-layout: auto !important;
  }
  .shiftcal-view-wall .shiftcal-grid th,
  .shiftcal-view-wall .shiftcal-grid td {
    min-width: 72px !important;
    padding: 5px 3px;
  }
  .shiftcal-view-wall .shiftcal-grid thead th { font-size: 12px; }
  .shiftcal-view-wall .shiftcal-grid td.cell { height: 78px; }
  .shiftcal-view-wall .shiftcal-grid td.cell .d { font-size: 15px; font-weight: 700; color: #1A2B5A; }
  .shiftcal-view-wall .shiftcal-grid td.cell .p { font-size: 12px !important; padding: 3px 5px !important; border-radius: 2px !important; }
  .shiftcal-view-wall .shiftcal-grid .wk {
    min-width: 26px !important;
    width: 26px;
    font-size: 12px;
    position: sticky;
    left: 0;
    background: #f1f1f1;
    z-index: 2;
  }

  /* 縦表示は従来通り（幅100%のまま） */
}

/* 表示切替タブ（壁掛け/縦表示） */
.shiftcal-view-toggle { display:flex; gap:10px; margin-top:10px; }
.shiftcal-tab { flex:1; min-height:44px; border-radius:14px; font-weight:900; border:2px solid #cfe0ee; background:#fff; color:#0b3a5c; }
.shiftcal-tab.is-active { background:#0b3a5c; color:#fff; border-color:#0b3a5c; }

/* 縦表示（壁掛けビューの代替） */
.shiftcal-vlist { padding: 10px 0 0; display:flex; flex-direction:column; gap:10px; }
.shiftcal-vday { background:#fff; border:1px solid #e2e2e2; border-radius:14px; padding:10px; }
.shiftcal-vday.dow-0 { background:#fdf0f0; } /* 日：淡赤 */
.shiftcal-vday.dow-6 { background:#eff5fb; } /* 土：淡青 */
.shiftcal-vday.holiday { background:#fdf0f0; } /* 祝：淡赤（日曜と同じ） */
.shiftcal-vday-head { display:flex; align-items:center; justify-content:space-between; }
.shiftcal-vday-date { font-size:17px; font-weight:900; color:#1A2B5A; }
.shiftcal-vday.dow-0 .shiftcal-vday-date { color:#c44b4b; }
.shiftcal-vday.dow-6 .shiftcal-vday-date { color:#4a6fb5; }
.shiftcal-vday.holiday .shiftcal-vday-date { color:#c44b4b; }
.shiftcal-vday-body { margin-top:8px; display:flex; flex-direction:column; gap:6px; }

.shiftcal-closed{padding:10px;border-radius:12px;background:#f6f6f6;color:#666;font-weight:800;}

/* 曜日まとめて入力 */
.shiftcal-bulk { background:#ffffff; border:1px solid #dbe8f2; border-radius:16px; padding:12px; margin:10px 0 14px; }
.shiftcal-bulk-title { font-weight:900; font-size:16px; margin-bottom:8px; }
.shiftcal-bulk-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.shiftcal-bulk-weekdays { display:flex; gap:6px; flex-wrap:wrap; }
.shiftcal-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid #cfe0ee; border-radius:999px; font-weight:800; background:#fff; }
.shiftcal-pill { min-height:44px; padding:8px 12px; border-radius:14px; border:2px solid #cfe0ee; background:#fff; font-weight:900; }
.shiftcal-pill.bulk-avail[data-avail="in"]{ background:#e8f2ff; border-color:#bcd6ff; }
.shiftcal-pill.bulk-avail[data-avail="out"]{ background:#ffe8f1; border-color:#ffbfd6; }

.shiftcal-pill.is-active { background:#0b3a5c; color:#fff; border-color:#0b3a5c; }
.shiftcal-check { font-weight:800; }
.shiftcal-btn-primary { background:#0b3a5c; color:#fff; border-color:#0b3a5c; }

.p-meta{ font-size:11px; font-weight:800; opacity:0.9; margin-left:4px; }

/* 壁掛け：時間帯アイコン＆ステータス */
.sc-ico{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.sc-ico-a{ background:#7bdc9a; }      /* 11:00-17:00 */
.sc-ico-b{ background:#79b7ff; }      /* 14:30-20:30 */
.sc-ico-free{ background:#f5b26b; }   /* Free */
.sc-ico-off{ background:#c7c7c7; }    /* 休み */
.sc-ico-c{ background:#b9a0ff; }      /* その他 */
.sc-ico-none{ background:transparent; border:1px solid #cfe0ee; }
.sc-st{ display:inline-block; margin-left:4px; font-size:10px; font-weight:900; padding:1px 5px; border-radius:999px; background:#eef4fb; }


/* 壁掛けビュー：土日祝の背景を縦表示と合わせる */
.shiftcal-wall .shiftcal-grid td.cell.dow-0{ background:#fdf0f0; } /* 日：淡赤 */
.shiftcal-wall .shiftcal-grid td.cell.dow-6{ background:#eff5fb; } /* 土：淡青 */
.shiftcal-wall .shiftcal-grid td.cell.holiday{ background:#fdf0f0; } /* 祝：淡赤（日曜と同じ） */

/* Footer button colors */
#shiftcal-save-all{ background:#e8ffe8; border-color:#b7f7b7; }
.shiftcal-jump-empty{ background:#ffe8f1; border-color:#ffbfd6; }


/* --- View toggle (wall / vertical list) --- */
.shiftcal-view{display:none;}
.shiftcal-view.is-active{display:block;}

/* --- Mobile: prevent SWELL fixed header/footer from covering ShiftCal controls --- */
@media (max-width: 768px){
  .shiftcal-wall{padding-bottom: calc(140px + env(safe-area-inset-bottom));}
}

/* ===== Legend filter buttons ===== */
.lg.sc-legend-filter {
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s, background-color 0.12s, color 0.12s;
}
.lg.sc-legend-filter:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.lg.sc-legend-filter.is-active {
  box-shadow: 0 0 0 3px var(--sc-btn-hl, #0b3a5c), 0 4px 12px rgba(0,0,0,0.18);
  transform: translateY(-2px) scale(1.06);
  font-weight: 900;
  background-color: var(--sc-btn-hl, #0b3a5c) !important;
  color: #fff !important;
  border-color: var(--sc-btn-hl, #0b3a5c) !important;
}

/* ===== Filter count badge ===== */
.sc-filter-count {
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  background: #0b3a5c;
  color: #fff;
  margin-top: 6px;
  width: fit-content;
}

/* ===== 壁掛けビュー：ステータスバッジ（申/承/下/戻） ===== */
.sc-st-badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  margin-right: 4px;
  vertical-align: middle;
}
.sc-st-submitted { background: #3b82f6; }
.sc-st-approved  { background: #22c55e; }
.sc-st-draft     { background: #eab308; color: #333; }
.sc-st-rejected  { background: #ef4444; }

/* ===== 壁掛けビュー：フィルターボタン ===== */
.sc-wall-filter {
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.12s, color 0.12s;
}
.sc-wall-filter:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.sc-wall-filter.is-active {
  box-shadow: 0 0 0 3px var(--sc-btn-hl, #0b3a5c), 0 4px 12px rgba(0,0,0,0.18);
  transform: translateY(-2px) scale(1.06);
  font-weight: 900;
  background-color: var(--sc-btn-hl, #0b3a5c) !important;
  color: #fff !important;
  border-color: var(--sc-btn-hl, #0b3a5c) !important;
}

/* 壁掛けビュー：占い師名の背景色分け */
.shiftcal-wall .p {
  transition: opacity 0.18s, transform 0.18s;
}

/* ===== 壁掛け：ステータスフィルターボタン ===== */
.sc-wall-status-filter {
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.12s, color 0.12s;
}
.sc-wall-status-filter:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.sc-wall-status-filter.is-active {
  box-shadow: 0 0 0 3px var(--sc-btn-hl, #0b3a5c), 0 4px 12px rgba(0,0,0,0.18);
  transform: translateY(-2px) scale(1.06);
  font-weight: 900;
  background-color: var(--sc-btn-hl, #0b3a5c) !important;
  color: #fff !important;
  border-color: var(--sc-btn-hl, #0b3a5c) !important;
}

/* ===== Day card highlight / dim ===== */
.shiftcal-day-card {
  transition: opacity 0.18s, box-shadow 0.18s;
  --sc-hl-color: #0b3a5c;
}
.shiftcal-day-card.sc-dimmed {
  opacity: 0.18;
  pointer-events: none;
}
.shiftcal-day-card.sc-highlighted {
  box-shadow: 0 0 0 2.5px var(--sc-hl-color), 0 4px 18px rgba(0,0,0,0.10);
  position: relative;
  z-index: 1;
}

/* ===== 休みの表示（壁掛け・縦表示共通） ===== */
/* 休み: 背景なし、名前を斜体＋濃いブルー */
.shiftcal-wall .p.p-off .sc-name,
.shiftcal-view-list .p.p-off .sc-name {
  color: #1e3d8c;
  font-style: italic;
  font-weight: 700;
}
.shiftcal-wall .p.p-off,
.shiftcal-view-list .p.p-off {
  background: transparent !important;
}

/* ===== 休/不バッジ（availability用グレー） ===== */
.sc-st-badge.sc-st-offout {
  background: #9e9e9e;
  color: #fff;
}

/* ===== 名前クリックで時間帯選択（全バッジ） ===== */
.shiftcal-wall .p .sc-name,
.shiftcal-view-list .p .sc-name {
  cursor: pointer;
  transition: text-decoration 0.1s;
}
.shiftcal-wall .p .sc-name:hover,
.shiftcal-view-list .p .sc-name:hover {
  text-decoration: underline;
}

/* ===== 時間帯プルダウン（インライン表示） ===== */
.sc-slot-picker {
  display: inline-block;
  vertical-align: middle;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #1A2B5A;
  border-radius: 4px;
  background: #fff;
  margin-left: 4px;
  max-width: 120px;
}

/* ===== 公開後変更：個人の休み表記（2026-04-23追加） ===== */
/* 休みに変更された占い師：取消線＋「（休み）」薄赤字 */
.shiftcal-wall .p.sc-pub-off .sc-name,
.shiftcal-view-list .p.sc-pub-off .sc-name {
  text-decoration: line-through;
  text-decoration-color: #333;
  text-decoration-thickness: 1.5px;
  color: #222;
}
.sc-pub-tag {
  color: #e57373;
  font-weight: bold;
  font-size: 11px;
  margin-left: 0;
  margin-top: 2px;
  padding: 0;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  line-height: 1.2;
}

/* ===== 公開後変更：個人注釈（2026-04-23追加） ===== */
/* 〜16:00、初登場！ などの補足 */
.sc-pub-note {
  color: #c62828;
  font-weight: bold;
  font-size: 11px;
  margin-left: 0;
  margin-top: 2px;
  padding: 0;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  line-height: 1.2;
}

/* ===== 臨時出勤マーク（2026-04-30追加） ===== */
/* 「臨」バッジ：占い師名の右に表示。承/戻バッジと視認性を揃える */
.sc-emergency-badge {
  display: inline-block;
  background: #bbdefb;
  color: #0d47a1;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  padding: 0 5px;
  min-width: 18px;
  height: 18px;
  text-align: center;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
}
/* 臨時出勤時の占い師名：色は黒のまま、点線アンダーラインを付与 */
.shiftcal-wall .p .sc-name.sc-name-emergency,
.shiftcal-view-list .p .sc-name.sc-name-emergency {
  border-bottom: 2px dotted #1565c0;
  padding-bottom: 1px;
}
/* メニュー内の臨時バッジ（インライン用に少し調整） */
.sc-pub-menu .sc-pub-menu-item .sc-emergency-badge {
  margin-left: 0;
}

/* ===== 補欠表示（2026-04-30追加） ===== */
/* 補欠バッジ：⏳N（紫・色覚対応） */
.sc-st-badge.sc-st-waitlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  width: auto;
  height: 20px;
  padding: 0 5px;
  background: #8e24aa;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 20px;
  border-radius: 3px;
  white-space: nowrap;
  box-sizing: border-box;
}
/* 補欠の占い師名：少し薄めに（待機状態を示す） */
.shiftcal-wall .p .sc-name.sc-name-waitlist,
.shiftcal-view-list .p .sc-name.sc-name-waitlist {
  color: #555;
}
/* rejected ステータスのデフォルト戻バッジは既存のまま（GMが手動rejectしたものは availability=off/out のため表示されない） */

/* ===== 定員拡大日（2026-04-30追加） ===== */
/* 「定員拡大」バッジ：日付横に表示 */
.sc-expand-badge {
  display: inline-block;
  background: #ff9800;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.sc-expand-badge.sc-expand-badge-off {
  background: #757575;
}
/* GMメニュー：4名出勤にする/解除 のスタイル */
.sc-pub-plus-menu .sc-pub-plus-item.sc-pub-plus-expand {
  color: #e65100;
  font-weight: 500;
  background: #fff8e1;
}
.sc-pub-plus-menu .sc-pub-plus-item.sc-pub-plus-expand:hover {
  background: #ffecb3;
}
/* メニュー内の拡大バッジ */
.sc-pub-plus-menu .sc-pub-plus-item .sc-expand-badge {
  margin-left: 0;
  margin-right: 6px;
}

/* 占い師名は改行禁止（PC・スマホ共通） */
.shiftcal-wall .p .sc-name,
.shiftcal-view-list .p .sc-name {
  white-space: nowrap !important;
}

/* 名前の文字数に応じた自動縮小（JSで.sc-name-long等のクラスが付与される）
   PC壁掛けではセル幅が広いので縮小不要。スマホ縦・スマホ横向きで発動させる
   - max-width: 767px → スマホ縦
   - landscape + max-height: 500px → スマホ横向き（iPhone 16 Pro Max横=956×440等）
*/
@media (max-width: 767px),
       (orientation: landscape) and (max-height: 500px) {
  .shiftcal-wall .p .sc-name.sc-name-long,
  .shiftcal-view-list .p .sc-name.sc-name-long {
    font-size: 11px !important;
    letter-spacing: -0.3px !important;
  }
  .shiftcal-wall .p .sc-name.sc-name-vlong,
  .shiftcal-view-list .p .sc-name.sc-name-vlong {
    font-size: 10px !important;
    letter-spacing: -0.5px !important;
  }
  .shiftcal-wall .p .sc-name.sc-name-xlong,
  .shiftcal-view-list .p .sc-name.sc-name-xlong {
    font-size: 9px !important;
    letter-spacing: -0.5px !important;
  }
}



/* ===== 公開後変更：日全体の注意事項バナー（2026-04-23追加） ===== */
.sc-day-notice {
  padding: 7px 10px;
  margin: 2px 0 6px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  line-height: 1.4;
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
}
/* 壁掛けビューのバナー：セル幅に必ず収める */
.shiftcal-wall .shiftcal-grid td.cell .sc-day-notice {
  max-width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 6px 9px;
}
/* スマホでは少し縮める */
@media (max-width: 767px),
       (orientation: landscape) and (max-height: 500px) {
  .shiftcal-wall .shiftcal-grid td.cell .sc-day-notice {
    font-size: 12px;
    padding: 5px 7px;
  }
}
.sc-day-notice.c-blue   { background: #e3f2fd; border-left: 4px solid #1976d2; color: #0d47a1; }
.sc-day-notice.c-red    { background: #ffebee; border-left: 4px solid #d32f2f; color: #b71c1c; }
.sc-day-notice.c-yellow { background: #fff8e1; border-left: 4px solid #f9a825; color: #8a6500; }
.sc-day-notice.c-green  { background: #e8f5e9; border-left: 4px solid #43a047; color: #1b5e20; }
.sc-day-notice.c-purple { background: #f3e5f5; border-left: 4px solid #8e24aa; color: #4a148c; }
.sc-day-notice.c-gray   { background: #f5f5f5; border-left: 4px solid #9e9e9e; color: #424242; }

/* 縦表示のバナーは全幅で */
.shiftcal-vday .sc-day-notice {
  display: block;
  margin-bottom: 6px;
}

/* ===== 公開後変更：編集UI（2026-04-23追加） ===== */

/* 個人メニュー */
.sc-pub-menu {
  position: absolute;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 6px;
  min-width: 180px;
  z-index: 9999;
}
.sc-pub-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  color: #222;
}
.sc-pub-menu-item:hover {
  background: #eaf3fa;
}
.sc-pub-menu-cancel {
  border-top: 1px solid #e0e0e0;
  margin-top: 4px;
  color: #888;
}

/* モーダル共通 */
.sc-pub-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sc-pub-modal-inner {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.sc-pub-modal-title {
  font-size: 16px;
  font-weight: 900;
  color: #0b3a5c;
  margin-bottom: 6px;
}
.sc-pub-modal-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}
.sc-pub-note-input,
.sc-pub-notice-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-sizing: border-box;
}
.sc-pub-modal-counter {
  text-align: right;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
.sc-pub-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.sc-pub-modal-actions button {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #cfe0ee;
  background: #fff;
  color: #0b3a5c;
}
.sc-pub-modal-save,
.sc-pub-notice-save {
  background: #0b3a5c !important;
  color: #fff !important;
  border-color: #0b3a5c !important;
}
.sc-pub-notice-delete {
  background: #e57373 !important;
  color: #fff !important;
  border-color: #c62828 !important;
  margin-right: auto;
}

/* 色ピッカー */
.sc-pub-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.sc-pub-color-picker label {
  cursor: pointer;
  display: inline-block;
}
.sc-pub-color-picker input[type="radio"] {
  display: none;
}
.sc-pub-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.sc-pub-chip.c-auto   { background: #fff; color: #1A2B5A; border-color: #1A2B5A !important; }
.sc-pub-chip.c-blue   { background: #e3f2fd; color: #0d47a1; }
.sc-pub-chip.c-red    { background: #ffebee; color: #b71c1c; }
.sc-pub-chip.c-yellow { background: #fffde7; color: #795548; }
.sc-pub-chip.c-green  { background: #e8f5e9; color: #1b5e20; }
.sc-pub-chip.c-purple { background: #f3e5f5; color: #4a148c; }
.sc-pub-chip.c-gray   { background: #f5f5f5; color: #424242; }
.sc-pub-color-picker input[type="radio"]:checked + .sc-pub-chip {
  border-color: #0b3a5c;
  box-shadow: 0 0 0 2px rgba(11,58,92,0.15);
}

/* 注釈モーダルのプレビュー */
.sc-pub-note-preview-text {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 4px;
  background: #fff;
  border-left: 3px solid #ccc;
  font-weight: 700;
}
.sc-pub-note-preview-text.note-red    { color: #c44b4b; border-left-color: #c44b4b; }
.sc-pub-note-preview-text.note-blue   { color: #0d47a1; border-left-color: #0d47a1; }
.sc-pub-note-preview-text.note-yellow { color: #b8860b; border-left-color: #b8860b; }
.sc-pub-note-preview-text.note-green  { color: #2e7d32; border-left-color: #2e7d32; }
.sc-pub-note-preview-text.note-purple { color: #6a1b9a; border-left-color: #6a1b9a; }
.sc-pub-note-preview-text.note-gray   { color: #666; border-left-color: #666; }

/* 編集権限者向け：日付番号と日付見出しにホバー */
.sc-pub-edit-panel[data-can-edit="1"] ~ * .shiftcal-grid td.cell .d,
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-grid td.cell .d,
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-vday-date {
  cursor: pointer;
}
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-grid td.cell .d:hover,
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-vday-date:hover {
  background: rgba(11,58,92,0.08);
  border-radius: 4px;
}

/* ==============================================================
 * プレビューHTML準拠のタグデザイン（2026-04-23追加・優先度強化）
 * ============================================================== */

/* 共通：占い師タグ（左ボーダー+白背景方式） */
.shiftcal-wall .shiftcal-grid td.cell .p,
.shiftcal-wall .shiftcal-vday-body .p {
  display: block;
  padding: 5px 7px !important;
  margin: 3px 0 !important;
  border-radius: 2px !important;
  font-size: 14px;
  color: #222 !important;
  line-height: 1.3;
  font-style: normal !important;
  font-weight: normal !important;
  background: #fff;
  border: none;
  border-left: 3px solid transparent;
}

/* 時間帯別カラー（slot1=午前部赤・slot2=午後フル濃紺・slot3=午後ショート明緑） */
.shiftcal-wall .shiftcal-grid td.cell .p.p-slot1,
.shiftcal-wall .shiftcal-vday-body .p.p-slot1 {
  background: #ffebee !important;
  border-left: 3px solid #d32f2f !important;
}
.shiftcal-wall .shiftcal-grid td.cell .p.p-slot2,
.shiftcal-wall .shiftcal-vday-body .p.p-slot2 {
  background: #fff !important;
  border-left: 4px solid #0d47a1 !important;
  padding-left: 6px !important;
}
.shiftcal-wall .shiftcal-grid td.cell .p.p-slot3,
.shiftcal-wall .shiftcal-vday-body .p.p-slot3 {
  background: #e8f5e9 !important;
  border-left: 3px solid #43a047 !important;
}
.shiftcal-wall .shiftcal-grid td.cell .p.p-slot4,
.shiftcal-wall .shiftcal-vday-body .p.p-slot4 {
  background: #e8fff9 !important;
  border-left: 3px solid #00897b !important;
}
.shiftcal-wall .shiftcal-grid td.cell .p.p-slot5,
.shiftcal-wall .shiftcal-vday-body .p.p-slot5 {
  background: #fff3e0 !important;
  border-left: 3px solid #f57c00 !important;
}
.shiftcal-wall .shiftcal-grid td.cell .p.p-free,
.shiftcal-wall .shiftcal-vday-body .p.p-free {
  background: #fff !important;
  border-left: 3px solid #c9a800 !important;
}
.shiftcal-wall .shiftcal-grid td.cell .p.p-off,
.shiftcal-wall .shiftcal-vday-body .p.p-off {
  background: #fff !important;
  border-left: 3px solid #999 !important;
}
.shiftcal-wall .shiftcal-grid td.cell .p.p-unavail,
.shiftcal-wall .shiftcal-vday-body .p.p-unavail {
  background: #fff !important;
  border-left: 3px solid #aaa !important;
}

/* 占い師名：斜体を打ち消し */
.shiftcal-wall .p .sc-name,
.shiftcal-view-list .p .sc-name,
.shiftcal-wall .p.p-off .sc-name,
.shiftcal-view-list .p.p-off .sc-name {
  font-style: normal !important;
  font-weight: normal !important;
  color: #222 !important;
}

/* 休み表記（公開後変更）：取消線＋赤字「（休み）」 */
.shiftcal-wall .p.sc-pub-off .sc-name,
.shiftcal-view-list .p.sc-pub-off .sc-name {
  text-decoration: line-through !important;
  text-decoration-color: #333 !important;
  text-decoration-thickness: 1.5px !important;
  color: #222 !important;
  font-style: normal !important;
}

/* 縦表示：行全体の土日祝色 */
.shiftcal-vlist .shiftcal-vday.dow-0,
.shiftcal-vlist .shiftcal-vday.holiday {
  background: #fdf0f0 !important;
}
.shiftcal-vlist .shiftcal-vday.dow-6 {
  background: #eff5fb !important;
}

/* 日付番号をクリッカブルに見せる（編集権限時のみ） */
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-grid td.cell .d,
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-vday-date {
  cursor: pointer;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
}
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-grid td.cell .d:hover,
.shiftcal-wall:has(.sc-pub-edit-panel[data-can-edit="1"]) .shiftcal-vday-date:hover {
  background: rgba(11,58,92,0.08);
}

/* ===== 時間帯タップ注意テキスト（2026-04-23追加） ===== */
.sc-sort-hint {
  display: inline-block;
  border: 2px solid #ff4081;
  color: #e91e63;
  font-weight: bold;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 8px;
  background: #fff;
  margin-left: 6px;
  white-space: nowrap;
}

/* ===== 日付番号の＋ボタン（編集権限者のみ・2026-04-23追加） ===== */
.shiftcal-wall .shiftcal-grid td.cell .d {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 6px;
  color: #333;
}
.sc-day-num {
  display: inline-block;
}
.sc-add-notice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #0b3a5c;
  border-radius: 50%;
  background: #fff;
  color: #0b3a5c;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, transform 0.1s;
}
.sc-add-notice-btn:hover {
  background: #0b3a5c;
  color: #fff;
  transform: scale(1.1);
}
.sc-add-notice-btn-v {
  margin-left: 8px;
}
.shiftcal-vday-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== ＋メニュー（2026-04-23追加） ===== */
.sc-pub-plus-menu {
  position: absolute;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 6px;
  min-width: 180px;
  z-index: 9999;
}
.sc-pub-plus-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  color: #222;
}
.sc-pub-plus-item:hover {
  background: #eaf3fa;
}

/* ===== 占い師追加モーダル内のセレクト ===== */
.sc-pub-addmem-row {
  margin: 12px 0;
}
.sc-pub-addmem-row label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: #333;
}
.sc-pub-addmem-row select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  margin-top: 6px;
  background: #fff;
  box-sizing: border-box;
}
.sc-pub-addmem-save {
  background: #0b3a5c !important;
  color: #fff !important;
  border-color: #0b3a5c !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #0b3a5c;
}


/* ================================================================
 * ShiftCal UI修正 v2（2026-04-23）
 * 1. 月切り替えボタン「◀ 3月」「6月 ▶」の改行禁止
 * 2. タイトル「2026年X月（壁掛けビュー）」の改行位置修正
 * 3. スマホ横向き時のSWELL固定ヘッダー・フッター縮小
 *    - SWELLヘッダー: header#header.l-header
 * ================================================================ */

/* -------- 問題2：月切り替えボタン改行禁止 -------- */
.shiftcal-month-nav .shiftcal-btn,
.shiftcal-header .shiftcal-btn {
  white-space: nowrap !important;
}

/* -------- 問題3：タイトルを別行にして中央配置 -------- */
.shiftcal-title-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 6px 0 10px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid rgba(216,232,245,0.6) !important;
}
.shiftcal-title {
  word-break: keep-all !important;
  line-height: 1.35 !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
.shiftcal-title-main,
.shiftcal-title-sub {
  display: inline;
}
/* 月ナビ行：左右均等配置 */
.shiftcal-month-nav {
  justify-content: space-between !important;
  align-items: center !important;
}
.shiftcal-user-name {
  flex: 1 !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #555 !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* スマホ：「（壁掛けビュー）」を次の行に改行 */
@media (max-width: 640px) {
  .shiftcal-title-row {
    padding: 4px 0 8px !important;
  }
  .shiftcal-title {
    font-size: 16px !important;
    padding: 0 4px !important;
    text-align: center !important;
  }
  .shiftcal-title-main {
    display: block !important;
    font-size: 16px !important;
  }
  .shiftcal-title-sub {
    display: block !important;
    font-size: 13px !important;
    color: #666 !important;
  }
  .shiftcal-user-name {
    font-size: 11px !important;
    padding: 0 4px !important;
  }
  /* 月ボタン：「3月」「5月」が縦に改行されないように強化 */
  .shiftcal-month-nav {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .shiftcal-month-nav .shiftcal-btn,
  .shiftcal-header .shiftcal-btn {
    font-size: 14px !important;
    padding: 8px 10px !important;
    min-width: 64px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
}

/* -------- 問題2：縦表示の時間帯バッジ（.sc-ico）は不要なので非表示 -------- */
.shiftcal-view-list .p .sc-ico {
  display: none !important;
}

/* -------- 問題4：スマホ横向き時のヘッダー・フッター縮小 -------- */
@media (max-width: 932px) and (orientation: landscape) {
  /* SWELL上部固定ヘッダー */
  html body header#header.l-header {
    min-height: 40px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html body header#header.l-header .l-header__body,
  html body header#header.l-header .l-header__inner {
    min-height: 40px !important;
    padding: 2px 8px !important;
  }
  /* サイトロゴ縮小 */
  html body header#header .c-siteLogo,
  html body header#header .c-siteLogo__img,
  html body header#header img {
    max-height: 32px !important;
    width: auto !important;
  }
  /* グローバルナビ文字縮小 */
  html body header#header .c-gnav a,
  html body header#header nav a {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 6px !important;
  }
  /* ハンバーガー・検索アイコン縮小 */
  html body header#header .c-iconBtn,
  html body header#header .c-iconBtn__icon {
    font-size: 16px !important;
    width: 32px !important;
    height: 32px !important;
  }
  /* SWELLお知らせバー非表示 */
  html body .p-newsBar,
  html body .c-postTimeline {
    display: none !important;
  }
  /* 下部スマホ固定メニュー縮小 */
  html body .sp-fix-menu,
  html body .p-spMenu,
  html body .l-fixBtnMenu,
  html body [class*="l-fix"][class*="Menu"] {
    min-height: 40px !important;
    height: 40px !important;
  }
  html body .sp-fix-menu a,
  html body .p-spMenu a,
  html body .l-fixBtnMenu a,
  html body [class*="l-fix"][class*="Menu"] a {
    font-size: 10px !important;
    padding: 2px 4px !important;
    line-height: 1.1 !important;
  }
  html body [class*="l-fix"] i,
  html body [class*="l-fix"] .icon {
    font-size: 14px !important;
  }
  /* ShiftCalフッター縮小 */
  .shiftcal-footer {
    bottom: 40px !important;
    padding: 4px 8px !important;
  }
  /* ページ本体の上下パディング縮小 */
  html body .l-mainContent,
  html body .l-content {
    padding-top: 4px !important;
  }
}

/* 高さが狭い端末の追加対策 */
@media (max-height: 480px) {
  html body header#header.l-header {
    min-height: 40px !important;
  }
  html body .p-newsBar {
    display: none !important;
  }
}

/* ==============================================================
 * 2026-04-25 追加：個別注記の色分け・当日ハイライト
 * ============================================================== */

/* 個別注記（published_note）の色分け */
.sc-pub-note.note-red    { color: #c44b4b !important; }
.sc-pub-note.note-blue   { color: #0d47a1 !important; }
.sc-pub-note.note-yellow { color: #b8860b !important; }
.sc-pub-note.note-green  { color: #2e7d32 !important; }
.sc-pub-note.note-purple { color: #6a1b9a !important; }
.sc-pub-note.note-gray   { color: #666 !important; }

/* 当日ハイライト：壁掛けビュー */
.shiftcal-wall .shiftcal-grid td.cell.sc-today {
  box-shadow: inset 0 0 0 3px #ff9800;
  background: #fffde7 !important;
}
/* 土日祝の背景色を上書き（当日が優先） */
.shiftcal-wall .shiftcal-grid td.cell.sc-today.dow-0,
.shiftcal-wall .shiftcal-grid td.cell.sc-today.dow-6,
.shiftcal-wall .shiftcal-grid td.cell.sc-today.holiday {
  background: #fffde7 !important;
}

/* 当日ハイライト：縦表示 */
.shiftcal-vday.sc-today {
  box-shadow: inset 0 0 0 3px #ff9800;
  background: #fffde7 !important;
}
.shiftcal-vday.sc-today.dow-0,
.shiftcal-vday.sc-today.dow-6,
.shiftcal-vday.sc-today.holiday {
  background: #fffde7 !important;
}

/* 「本日」バッジ */
.sc-today-badge {
  display: inline-block;
  background: #ff9800;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  vertical-align: middle;
  line-height: 1.4;
}
/* スマホ壁掛けでは「本日」バッジを少し小さめに */
@media (max-width: 768px) {
  .shiftcal-view-wall .sc-today-badge {
    font-size: 9px;
    padding: 1px 5px;
    margin-left: 3px;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
}

/* 壁掛けビュー凡例ボタンの統一スタイル微調整 */
.shiftcal-wall .lg.sc-wall-filter {
  padding: 5px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ==============================================================
 * 2026-04-25 追加：固定ヘッダーコンパクト化
 * ============================================================== */

/* タイトル：年月のみ・サブテキスト削除 */
.shiftcal-header .shiftcal-title-row {
  text-align: center;
  margin-bottom: 6px;
}
.shiftcal-header .shiftcal-title {
  font-weight: 700;
  font-size: 14px;
  color: #1A2B5A;
}
.shiftcal-header .shiftcal-title-main {
  font-weight: 700;
}

/* 月ナビ：1段に集約 */
.shiftcal-header .shiftcal-month-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.shiftcal-header .shiftcal-btn-mini {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  color: #1A2B5A;
  text-decoration: none;
  cursor: pointer;
}
.shiftcal-header .shiftcal-btn-mini:hover {
  background: #f0f7ff;
}

/* 1ボタン化したビュー切替 */
.shiftcal-view-toggle-btn {
  padding: 5px 16px;
  background: #1A2B5A;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  margin: 0 auto;
  flex-shrink: 0;
}
.shiftcal-view-toggle-btn:hover {
  background: #2a3d6f;
}

/* ログインユーザー名表示 */
.shiftcal-header .shiftcal-user-name-row {
  text-align: center;
  font-size: 10px;
  color: #888;
  margin-bottom: 6px;
}

/* 凡例：左右コンパクト・間隔広め */
.shiftcal-header .shiftcal-legend-inline.wall-legend {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 0 4px;
}
.shiftcal-header .shiftcal-legend-inline.wall-legend .lg.sc-wall-filter {
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
/* 4pxボーダーのボタン（午後フル）はpadding-leftを1px減らして見た目統一 */
.shiftcal-header .shiftcal-legend-inline.wall-legend .lg.sc-wall-filter[style*="border-left: 4px"],
.shiftcal-header .shiftcal-legend-inline.wall-legend .lg.sc-wall-filter[style*="border-left:4px"] {
  padding-left: 9px !important;
}

/* スマホ：さらにコンパクト */
@media (max-width: 768px) {
  .shiftcal-header { padding: 8px !important; }
  .shiftcal-header .shiftcal-title { font-size: 13px; }
  .shiftcal-header .shiftcal-month-nav-row { margin-bottom: 8px; }
  .shiftcal-header .shiftcal-legend-inline.wall-legend { gap: 8px; }
  .shiftcal-header .shiftcal-legend-inline.wall-legend .lg.sc-wall-filter {
    font-size: 11.5px !important;
    padding: 3px 7px !important;
  }
  .shiftcal-header .shiftcal-legend-inline.wall-legend .lg.sc-wall-filter[style*="border-left: 4px"],
  .shiftcal-header .shiftcal-legend-inline.wall-legend .lg.sc-wall-filter[style*="border-left:4px"] {
    padding-left: 6px !important;
  }
  .shiftcal-view-toggle-btn { padding: 5px 12px; font-size: 11px; }
}

/* 旧UIの非表示（残っている場合の保険） */
.shiftcal-header .sc-sort-hint { display: none !important; }
.shiftcal-view-toggle[role="tablist"] { display: none !important; }

/* ============================================================
   スマホ用スクロールヒント（壁掛けビュー専用）
   時間帯バッジ行の直下、曜日ヘッダーの直上に表示
   2026-04-26 追加
   ============================================================ */

/* デフォルト（PC）では非表示 */
.shiftcal-wall .sc-scroll-hint {
  display: none;
}

/* スマホ + 壁掛けビューがアクティブな時のみ表示 */
@media (max-width: 767px) {
  .shiftcal-wall .shiftcal-view-wall.is-active .sc-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 6px 0 4px;
    background: #f0f4fa;
    border-radius: 4px;
    font-size: 11px;
    color: #6b7c9e;
    font-weight: 500;
    letter-spacing: 0.05em;
    user-select: none;
  }

  .shiftcal-wall .sc-scroll-hint-arrow {
    color: #4a5f9a;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
  }

  .shiftcal-wall .sc-scroll-hint-text {
    line-height: 1;
  }
}

/* ============================================================
   下部ヘッダー（カレンダー末尾の月ナビ・表示切替・時間帯バッジ）
   2026-04-28 追加
   ============================================================ */

.shiftcal-wall .shiftcal-header-bottom {
  margin-top: 12px;
  padding: 10px 8px 6px;
  border-top: 1px solid #e0e0e0;
  background: #fafbfc;
  border-radius: 0 0 6px 6px;
}

.shiftcal-wall .shiftcal-header-bottom .shiftcal-month-nav-row {
  margin-bottom: 8px;
}

/* スマホでは少し詰める */
@media (max-width: 767px) {
  .shiftcal-wall .shiftcal-header-bottom {
    padding: 8px 6px 4px;
    margin-top: 10px;
  }
}

/* =====================================================
   占い師フィルタ（壁掛けビュー専用・ログイン時のみ表示）
   状態はlocalStorageに保存。一般公開には影響しない。
   既存の時間帯/ステータスフィルタとAND条件で動作する。
   ===================================================== */

.sc-mfilter-panel {
  margin-top: 8px;
  padding: 8px 10px;
  background: #faf7fc;
  border: 1px solid #c9b3d6;
  border-radius: 6px;
  font-size: 13px;
}

.sc-mfilter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.sc-mfilter-title {
  font-weight: 700;
  color: #5B2C6F;
  font-size: 13px;
}

.sc-mfilter-status {
  font-size: 11px;
  color: #777;
  flex: 1;
  min-width: 100px;
}

.sc-mfilter-actions {
  display: flex;
  gap: 4px;
}

.sc-mfilter-btn {
  background: #5B2C6F;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.sc-mfilter-btn.sc-mfilter-none {
  background: #888;
}
.sc-mfilter-btn:hover {
  opacity: 0.85;
}

.sc-mfilter-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 2px 10px;
}

.sc-mfilter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  line-height: 1.4;
}
.sc-mfilter-item:hover {
  background: #f0e8f5;
}

.sc-mfilter-item input.sc-mfilter-cb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #5B2C6F;
  margin: 0;
  flex-shrink: 0;
}

.sc-mfilter-item.is-checked .sc-mfilter-name {
  color: #5B2C6F;
  font-weight: 700;
}

/* スマホでは2〜3列に詰める */
@media (max-width: 767px) {
  .sc-mfilter-list {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  .sc-mfilter-item {
    font-size: 12px;
  }
}

/* ===== セルへの適用：占い師フィルタによるフェード ===== */
/* 既存の時間帯フィルタ／ステータスフィルタと AND 条件で動作する。
   .sc-mfilter-dim が付くと薄くフェード。
   既存フィルタの opacity 直接書き換えとは別のクラスで管理し、
   JS側で統合的に opacity を計算して css() で当てる。 */
.shiftcal-view-wall .p.sc-mfilter-dim {
  opacity: 0.22 !important;
  filter: grayscale(0.4);
  transition: opacity 0.18s, filter 0.18s;
}

.shiftcal-view-wall .p.sc-mfilter-hl {
  box-shadow: 0 0 0 1.5px rgba(91, 44, 111, 0.45);
  transition: box-shadow 0.18s;
}