/*==============================================================================
  スタッフ選択ページ スタイル（レディース）
  対象: select_stylist.html / select_colorlist.html / select_eyelist.html /
        select_nailist.html / select_therapist.html
  ファイル: common/css/select_staff.css

  構成:
    1. 日付タブ — タイムラインスタイルの日付絞り込みバー
    2. カレンダー入力エリア — datepicker トリガー
    3. スタッフカードグリッド — auto-fill グリッド + カード本体
    4. カード内要素 — 写真・名前・ランク・備考・アクションボタン
    5. 戻るボタン
    6. レスポンシブ（タブレット / PC）

  依存:
    - common/css/tokens.css（--ka-orange, --ka-line, --ka-line-warm,
        --ka-ink, --ka-subtext, --ka-muted, --ka-radius-pill,
        --ka-weekday-sun/sat, --reservation-content-width）
    - system/js/select_stylist.js（スタッフ一覧の DOM 生成）
    - jquery-ui.css（datepicker）

  ⚠️ 変更時の注意:
    mens/common/css/select_staff.css に対応ファイルあり。
    レイアウト・構造の変更は両ファイルに適用すること。

  ladies 固有 vs mens 固有:
    ladies 固有 → ウォームブラウン系の色（枠・影・ボタン: rgba(164,128,117,..),
                  #daycond 背景 rgba(164,128,117,0.08) 等）
                  staff-body の gradient → #faf7f4
    mens   固有 → スチールブルー系の色（枠・影: rgba(99,129,131,..),
                  #daycond 背景 rgba(100,130,150,0.08) 等）
                  staff-body の gradient → #f6f8fa
    共通        → グリッドレイアウト・日付タブ構造・カードの flex 構造・datepicker
==============================================================================*/


/* ─── ページ背景（ladies 固有: ウォームベージュグラデーション） ─────────────── */
#reserve.stylist,
#reserve.colorlist,
#reserve.nailist,
#reserve.eyelist,
#reserve.therapist,
#reserve.nichiji {
  background:
    radial-gradient(
      circle at top,
      rgba(212, 169, 120, 0.08),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #f5f1eb 0%,
      #f0ebe3 100%
    );
}

/* ─── 日付タブ ─────────────────────────────────────────────────────────────── */

/* スタッフ選択ページの確認事項は非表示（将来利用想定のためソースは残置） */
#reserve:not(.nichiji) .shopNotice {
  display: none !important;
}

.date-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.date-tabs::-webkit-scrollbar {
  display: none;
}

/* ─── 日付エリア外枠: ボックスを消してタイムライン化 ──────────────────────── */

#reserve:not(.nichiji) #select_day > .d-flex {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--ka-line) !important;
}

#reserve:not(.nichiji) #btnIniArea {
  border-right: 1px solid var(--ka-line) !important;
  padding: 0 8px 0 0 !important;
}

#reserve:not(.nichiji) #dateScrollArea {
  gap: 0 !important;
  padding: 0 0 0 8px !important;
}

/* ─── 日付ボタン: タイムラインラベルスタイル ────────────────────────────── */

#reserve:not(.nichiji) #select_day button.btn-outline-kakimoto {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ka-ink-soft) !important;
  font-weight: 500 !important;
  font-size: clamp(12px, 0.9vw, 16px) !important;
  padding: 8px 8px 6px !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: color var(--ka-transition), border-color var(--ka-transition) !important;
}

#reserve:not(.nichiji) #select_day button.btn-outline-kakimoto:hover {
  color: var(--ka-ink) !important;
  border-bottom-color: var(--ka-line-strong) !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#reserve:not(.nichiji) #select_day button.btn-outline-kakimoto.active {
  color: var(--ka-ink) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--ka-orange) !important;
  background: transparent !important;
}

/* 「日付指定なし」 */
#reserve:not(.nichiji) #btnIniDayBtn {
  font-size: clamp(11px, 0.8vw, 14px) !important;
  color: var(--ka-subtext) !important;
  text-align: center !important;
}

#reserve:not(.nichiji) #btnIniDayBtn.active {
  color: var(--ka-ink) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--ka-orange) !important;
}

/* 土曜（inline color:blue を上書き） */
#reserve:not(.nichiji) #select_day button span[style*="color:blue"] {
  color: var(--ka-weekday-sat) !important;
}

/* 日曜・祝日（inline color:red を上書き） */
#reserve:not(.nichiji) #select_day button span[style*="color:red"] {
  color: var(--ka-weekday-sun) !important;
}


/* ─── 日付選択エリア ────────────────────────────────────────────────────── */

#select_day .date-btn-wrap {
  border: 1px solid var(--ka-line-neutral);
  border-radius: var(--ka-radius-card);
  overflow: hidden;
  background: var(--ka-bg-white);
  box-shadow: var(--ka-shadow-card);
}

#btnIniArea {
  padding: 6px;
  border-right: 1px solid var(--ka-line-neutral);
}

#btnIniDayBtn {
  font-size: 11px;
  height: 40px;
  line-height: 1.3;
}

#dateScrollArea {
  overflow-x: auto;
  flex: 1;
  padding: 6px 4px;
  gap: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[id^="btnDay"][id$="Btn"] {
  font-size: 11px;
  height: 40px;
}
/* ─── カレンダー入力エリア ─────────────────────────────────────────────────── */

.calendar-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ka-bg-white);
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-radius-pill);
  box-shadow: 0 2px 8px rgba(51,45,40,0.06);
  cursor: pointer;
  transition: box-shadow var(--ka-transition), border-color var(--ka-transition);
}

.calendar-input-container:hover {
  box-shadow: 0 6px 20px rgba(51,45,40,0.10);
}

/* スタッフ選択ページ: カレンダー入力をミニマルに */
#reserve:not(.nichiji) .calendar-input-container {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 2px;
  gap: 6px;
  border-bottom: 1px solid var(--ka-line);
}

#reserve:not(.nichiji) .calendar-input-container:hover {
  box-shadow: none;
  border-bottom-color: var(--ka-line-strong);
}

.calendar-input-container .ui-datepicker-trigger {
  height: 20px;
  width: auto;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}

#datepicker {
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  font-size: clamp(14px, 1.0vw, 18px);
  color: var(--ka-subtext);
  width: 170px;
  font-family: var(--font-ka);
}


/* ─── datepicker オーバーレイ・中央表示 ────────────────────────────────────── */

#datepicker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.ui-datepicker { z-index: 1001 !important; }


/* ─── 日付選択ヘッダー ─────────────────────────────────────────────────────── */

.staff-date-header {
  /* 左:「日程から探す」／中央:「カレンダーで選ぶ」／右:空き の3カラム。
     autoの中央列を justify-self:center で中央寄せする。 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 8px 6px;
  margin-bottom: 0;
}

.staff-date-title {
  grid-column: 1;
  justify-self: start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ka-subtext);
}

.staff-cal-link {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ka-subtext);
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}

/* テキスト左のカレンダーアイコン（currentColor で文字色に追従） */
.staff-cal-link::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 7v10H5V9h14z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 7v10H5V9h14z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.staff-cal-link:hover {
  color: var(--ka-orange);
}

.staff-cal-hidden-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ─── 日付フィルターエリア ─────────────────────────────────────────────────── */

#select_day {
  margin-top: 4px;
  margin-bottom: 12px;
}


/* ─── 日付条件テキスト ─────────────────────────────────────────────────────── */

#daycond .daycond-date {
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 700;
  color: var(--ka-ink);
  letter-spacing: 0.02em;
}

#daycond {
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
  color: var(--ka-ink);
  text-align: center;
  font-family: var(--font-ka);
  padding: 6px 16px;
}





/* ─── スタッフカードグリッド（共通） ───────────────────────────────────────── */

#reserve:not(.nichiji) .selectWrap .selectInner .inner {
  text-align: center;
  padding: 4px 4px 16px;
}

.staff-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;
  row-gap: 20px;
}

/* カード本体 */
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) {
  display: flex;
  flex-direction: column;
  width: calc(33.333% - 4px);
  background-color: #fff;
  border: 1px solid var(--ka-line-warm);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

/* カード: 写真 */
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .photo    { margin: 0 !important; }

:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}

/* カード: テキスト共通 */
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) p { color: var(--ka-ink); }

/* カード: ボディ（写真以外のコンテンツ） */
.staff-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 10px 12px;
  background: linear-gradient(to bottom, #ffffff 0%, #faf7f4 100%);
}

/* カード: スタッフ名 */
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .name {
  margin: 0 0 2px !important;
  text-align: left;
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 700;
  color: var(--ka-ink);
  letter-spacing: 0.03em;
}

:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .name .kana {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: normal;
  color: var(--ka-subtext);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* カード: ランク表示（★マーク） */
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .staff-rank {
  margin: 0 0 2px !important;
  font-size: clamp(10px, 0.75vw, 13px);
  text-align: left;
  color: var(--ka-orange) !important;
}
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .staff-rank * {
  color: var(--ka-orange) !important;
}

/* カード: 備考テキスト（出勤日・説明文等） */
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .lank {
  margin: 6px 0 2px !important;
  font-size: clamp(10px, 0.75vw, 13px);
  text-align: left;
  color: var(--ka-ink-soft);
  line-height: 1.6;
}

/* カード: ランク・名前エリアのクリック領域 */
.staff-info-link {
  display: block;
  flex: 1;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* カード: セパレーター（リンク行の上） */
.staff-divider {
  border: none;
  border-top: 1px solid rgba(164, 128, 117, 0.2);
  margin: 8px 0 0;
}

/* カード: プロフィール / 空き日リンクエリア */
.staff-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin-top: auto;
  padding-top: 2px;
  padding-bottom: 10px;
}

/* カード: テキストリンク */
.staff-action-link {
  flex: 1;
  text-align: center;
  font-size: clamp(9px, 0.65vw, 11px);
  color: var(--ka-ink-soft);
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;
  background: none;
  border: none;
  transition: color 0.15s;
}

.staff-action-link::after {
  content: " →";
}

.staff-action-link:hover {
  color: var(--ka-orange);
}

/* カード: プロフィールチップ */
.staff-action-link--profile {
  flex: none;
  border: 1px solid var(--ka-line-strong);
  border-radius: var(--ka-radius-pill);
  padding: clamp(3px, 0.3vw, 5px) clamp(8px, 0.8vw, 13px);
  background: transparent;
  font-size: clamp(10px, 1.1vw, 14px);
}
.staff-action-link--profile::after {
  content: none;
}
.staff-action-link--profile:hover {
  border-color: var(--ka-orange);
  color: var(--ka-orange);
  background: var(--ka-orange-soft);
}

/* カード: カレンダーアイコン丸チップ */
.staff-action-link--cal {
  flex: none;
  margin-left: auto;
  border: 1px solid var(--ka-line-strong);
  border-radius: 50%;
  width: clamp(28px, 2.5vw, 36px);
  height: clamp(28px, 2.5vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-action-link--cal:hover {
  border-color: var(--ka-orange);
  color: var(--ka-orange);
  background: var(--ka-orange-soft);
}
.staff-action-link--cal::after {
  content: none;
}
.staff-action-link--cal::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

/* カード: テキストリンク間のセパレーター */
.staff-action-sep {
  color: rgba(164, 128, 117, 0.35);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

/* カード: 選択するボタン — .ka-btn.ka-btn-primary を使用、カード幅に合わせて全幅 */
.staff-select-btn {
  margin: 10px 0 0 !important;
  padding: 0 !important;
}

.staff-select-btn .ka-btn {
  display: block;
  width: 100%;
  min-width: auto;
  padding: 10px 6px;
  border-radius: var(--ka-radius-pill);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  line-height: 1.35;
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 600;
}

/* カード: ホバー時に浮き上がる */
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo):hover {
  background-color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo):hover p       { color: #000; }
:is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo):hover .more a { color: #ed9d98; }


/* ─── カラー2名体制 説明ボックス ─────────────────────────────────────────── */

/* カラー2名体制バナー — 未選択時（シンプル表示） */
.color-flow-note {
  background: #fdf5ee;
  border: 1px solid rgba(164, 128, 117, 0.18);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 4px 0 4px;
}

.color-flow-note__team-title {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ka-ink);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.color-flow-note__team-desc {
  font-size: 12px;
  color: var(--ka-subtext);
  margin: 0;
  line-height: 1.6;
}

/* カラー2名体制バナー — スタッフ選択済み時（2カラムレイアウト） */
.color-flow-note--selected {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 14px;
}

.color-flow-note__staff-col {
  flex-shrink: 0;
}

.color-flow-note__selected-label {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ka-orange);
  font-weight: 600;
  margin-bottom: 6px;
}

.flow-note-staff {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-note-staff__img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}

.flow-note-staff__img--noimg {
  background: #e0d6cc;
}

.flow-note-staff__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.flow-note-staff__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ka-ink);
  letter-spacing: 0.02em;
}

.flow-note-staff__kana {
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  color: var(--ka-subtext);
  letter-spacing: 0.08em;
}

.flow-note-staff__rank {
  font-size: 11px;
  color: var(--ka-orange);
  margin-top: 2px;
}

.color-flow-note__brand {
  flex: 1;
  border-left: 1px solid rgba(164, 128, 117, 0.22);
  padding-left: 14px;
  margin-left: 14px;
}


/* ─── 戻るボタン ───────────────────────────────────────────────────────────── */

#reserve:not(.nichiji) .fluid.selectWrap .btn_pre {
  margin: 1.5em auto;
  width: 100%;
  text-align: center;
}

/* 戻るボタン <a> — .ka-btn.ka-btn-outline を使用 */
#reserve.eyelist .fluid.selectWrap p.btn_pre a {
  background: var(--ka-bg-white);
  color: var(--ka-subtext);
  border: 1px solid var(--ka-line-strong);
  border-bottom: 1px solid var(--ka-line-strong);
  border-radius: var(--ka-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  width: auto;
  min-width: 240px;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

#reserve.eyelist .fluid.selectWrap p.btn_pre a:hover {
  border-color: var(--ka-orange);
  color: var(--ka-orange);
  opacity: 1;
  filter: none;
}


/* ─── モバイル: スタッフカードをコンパクトに（768px以下） ─────────────────── */
@media (max-width: 768px) {

  #reserve:not(.nichiji) .selectWrap .selectInner .inner {
    padding: 0 4px 8px;
  }

  /* Bootstrap mt-3/mb-1 を無効化してspacing tokenで統一 */
  .d-flex:has(#daycond) {
    margin: 0 !important;
  }

  #daycond {
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 14px !important;
  }

  .color-flow-note {
    padding: 6px 10px;
    margin: 0 0 6px;
  }

  .color-flow-note--selected {
    padding: 6px 10px;
    margin-bottom: var(--space-sm); /* 16px: 選択済みカード → 見出し */
  }

  /* MENU ページの pre_res マージン相当の間隔を stepBar 直下に確保 */
  .shopInfo {
    margin-top: 12px;
  }

  /* SELECTED スタッフ名: カード一覧の名前フォントと揃える */
  .flow-note-staff__name {
    font-size: 14px;
  }

  .staff-action-link {
    font-size: 9px;
    white-space: nowrap;
  }

  .staff-action-link--profile {
    font-size: 10px;
    padding: 2px 7px;
  }

  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .name .kana {
    font-size: 10px;
    margin-top: 0;
  }

  .staff-grid {
    row-gap: var(--space-sm); /* 16px: カード行間 */
    column-gap: 6px;
  }

  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) {
    width: calc(33.333% - 4px);
  }

  .staff-body {
    padding: 6px 8px 8px;
  }

  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .staff-rank {
    margin-bottom: 0 !important;
  }

  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .name {
    margin-bottom: 0 !important;
  }

  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .name .kana {
    margin-top: 0;
  }

  .staff-divider {
    margin: 4px 0 0;
  }

  .staff-actions {
    padding-top: 2px;
    padding-bottom: 8px;
  }

  .staff-select-btn {
    margin-top: 6px !important;
  }

  .staff-select-btn .ka-btn {
    padding: 5px 6px;
    font-size: 12px;
  }
}

/* ─── レスポンシブ（タブレット 481px 以上） ────────────────────────────────── */

@media only screen and (min-width: 481px) {


  #reserve:not(.nichiji) .fluid.selectWrap .selectInner {
    margin: 0 auto;
    border: none;
    padding: 2em 1em 1em;
  }

  #reserve:not(.nichiji) .fluid.selectWrap .selectInner .inner {
    margin: 0 auto;
    text-align: center;
  }

  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) { background-color: #fff; }

  #reserve:not(.nichiji) .fluid.selectWrap .btn_pre {
    margin: 1em auto;
  }

}


/* ─── レスポンシブ（PC 769px 以上） ────────────────────────────────────────── */

@media only screen and (min-width: 769px) {

  /* 日付エリア: PCではスクロール不要 */
  #dateScrollArea {
    overflow-x: visible !important;
    justify-content: center;
  }

  /* PC: スタッフ一覧のみコンテナ幅を超えて最大1600pxまで拡張（margin はmx-0で上書きされるためleftで位置補正） */
  #reserve:not(.nichiji) #stafflist {
    width: min(1600px, calc(100vw - 64px));
    position: relative;
    left: calc((100% - min(1600px, calc(100vw - 64px))) / 2);
  }

  /* PC: カード幅固定で自動折り返し、justify-content: center により最後の行も中央揃え */
  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) {
    width: 260px;
  }

  /* PC: 写真を縦長に */
  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) .photo img {
    height: 440px !important;
    aspect-ratio: auto;
  }

}

/* ─── 小型スマホ（390px以下）: 2列に戻す ─────────────────────────────────── */
@media (max-width: 390px) {
  :is(.stylistInfo, .colorlistInfo, .eyelistInfo, .nailistInfo, .therapistInfo) {
    width: calc(50% - 6px);
  }
}