/* =========================================================
   style.css（整頓版：誰にでも分かるコメント付き）
   ---------------------------------------------------------
   ✅ HTMLは変更しない前提
   ✅ 既存の見た目（設定値）は変えない（値はそのまま）
   ✅ “並び替え”は「読みやすい順」に整理
   ✅ 上書きが必要なもの（スマホ用や !important）は後ろに配置
   ========================================================= */


/* =========================================================
   1) ブラウザ差を吸収する「共通リセット」
   （Chrome/Edge/Safari等で初期値が違う部分だけ揃える）
   ========================================================= */

/* 全要素：padding/border を含めて幅計算（崩れ防止） */
* {
  box-sizing: border-box; /* 余白込みで幅を計算する */
}

/* 文字サイズが勝手に拡大/縮小されるのを防ぐ（スマホ対策） */
html {
  -webkit-text-size-adjust: 100%; /* iPhone/iPad系の自動調整を抑制 */
  -ms-text-size-adjust: 100%;     /* 古いMicrosoft系ブラウザ対策 */
}

/* ページ全体の基本設定 */
body {
  font-family: "Helvetica Neue", Arial, sans-serif; /* 基本フォント */
  background-color: #f0f2f5;                        /* ページ背景色 */
  color: #333;                                       /* 基本文字色 */
  margin: 0;                                         /* 外側余白を消す */
  padding: 20px;                                     /* 画面端の余白（PC基準） */
}

/* 入力欄・ボタンなどのフォントが勝手に変わらないようにする */
button,
input,
select,
textarea {
  font: inherit;   /* body のフォントを引き継ぐ */
  color: inherit;  /* body の文字色を引き継ぐ */
}

/* ボタンのブラウザ標準の見た目差を減らす（Edge/Chrome差対策） */
button {
  appearance: none;         /* 標準装飾を消す（対応ブラウザ） */
  -webkit-appearance: none; /* WebKit系の互換 */
}

/* flex の中で input 等がはみ出す現象を防ぐ（Edgeで起きやすい） */
input,
select,
button,
textarea {
  min-width: 0; /* これが無いと幅が縮まず、横にはみ出すことがある */
}

/* 長い文字列（URL等）がはみ出さないように折り返す */
th,
td,
.admin-list li span {
  overflow-wrap: anywhere; /* 可能なら強制的に折り返す */
  word-wrap: break-word;   /* 古い互換用 */
}


/* =========================================================
   2) 全体レイアウト（白いカード）
   ========================================================= */

.container {
  max-width: 800px;                            /* カードの最大幅 */
  margin: 0 auto;                              /* 左右中央寄せ */
  background-color: #ffffff;                   /* 背景を白に */
  padding: 30px;                               /* 内側の余白 */
  border-radius: 8px;                          /* 角丸 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    /* 影 */
}

/* ページタイトル */
h1 {
  text-align: center;   /* 中央揃え */
  color: #2c3e50;       /* タイトル文字色 */
  margin-bottom: 25px;  /* 下の余白 */
  font-size: 24px;      /* タイトル文字サイズ */
}


/* =========================================================
   3) 便利クラス（表示/非表示など）
   ========================================================= */

.hidden {
  display: none !important; /* JSで見せたり隠したりするためのクラス */
}

/* ✅ 欠勤（お休み）表示：少し薄くする（任意） */
.staff-absent {
  opacity: 0.5;
}

/* ✅ 除外表示：少し色を変える（任意） */
.staff-excluded {
  opacity: 0.8;
  border: 1px dashed #00bcd4;
}


/* =========================================================
   4) タブメニュー（シャッフル画面 / 管理画面）
   ========================================================= */

.tab-menu {
  display: flex;                 /* 横並び */
  justify-content: center;       /* 中央寄せ */
  margin-bottom: 20px;           /* 下の余白 */
  border-bottom: 2px solid #eee; /* 下線 */
  flex-wrap: wrap;               /* 画面が狭い時は折り返す */
  gap: 6px;                      /* ボタン同士の間隔 */
}

.tab-btn {
  padding: 10px 20px;                /* ボタン内余白 */
  background: none;                  /* 背景なし */
  border: none;                      /* 枠線なし */
  font-size: 16px;                   /* 文字サイズ */
  font-weight: bold;                 /* 太字 */
  color: #7f8c8d;                    /* 通常時の文字色 */
  cursor: pointer;                   /* マウスカーソルを指に */
  border-bottom: 3px solid transparent; /* アクティブ時下線のスペース確保 */
}

.tab-btn:hover {
  color: #3498db; /* ホバーで青く */
}

.tab-btn.active {
  color: #3498db;                 /* 選択中は青 */
  border-bottom: 3px solid #3498db; /* 選択中の下線 */
}


/* =========================================================
   5) メイン画面（対象メンバー・ボタン・結果テーブル）
   ========================================================= */

/* 「対象メンバー」などの見出し */
.member-area h3 {
  border-bottom: 2px solid #eee; /* 下線 */
  padding-bottom: 5px;           /* 下の余白 */
  color: #555;                   /* 文字色 */
}

/* メンバー一覧（タイル表示） */
#displayMemberList {
  list-style: none; /* ・を消す */
  padding: 0;       /* 内側余白なし */
  margin: 0 0 20px 0; /* 下に余白 */

  display: grid; /* グリッドで整列 */
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* 自動折返し */
  gap: 10px; /* タイルの間隔 */
}

/* grid が使えない環境向けの保険 */
@supports not (display: grid) {
  #displayMemberList {
    display: flex;        /* 横並び */
    flex-wrap: wrap;      /* 折り返し */
    gap: 10px;            /* 間隔 */
  }
  #displayMemberList li {
    flex: 0 0 80px;       /* 80px固定のタイルに近い見た目 */
  }
}

/* メンバー1人分のタイル */
#displayMemberList li {
  background-color: #eef2f7; /* タイル背景 */
  padding: 8px;              /* 内側余白 */
  text-align: center;        /* 中央揃え */
  border-radius: 4px;        /* 角丸 */
  font-size: 14px;           /* 文字サイズ */
  color: #444;               /* 文字色 */
}

/* 「シャッフルして決定」ボタン */
#shuffleBtn {
  display: block;            /* 横幅100%で使うためブロック化 */
  width: 100%;               /* 横幅いっぱい */
  padding: 15px;             /* 押しやすい余白 */
  background-color: #3498db; /* ボタン背景（青） */
  color: white;              /* 文字色（白） */
  border: none;              /* 枠線なし */
  border-radius: 5px;        /* 角丸 */
  font-size: 18px;           /* 文字サイズ */
  font-weight: bold;         /* 太字 */
  cursor: pointer;           /* 指カーソル */
}

#shuffleBtn:hover {
  background-color: #2980b9; /* ホバーで濃い青 */
}

/* ✅ 次のページに移動ボタン（TOPページ用） */
.btn-next {
  width: 100%;               /* 横幅いっぱい */
  display: block;            /* ブロック表示 */
  margin-top: 10px;          /* 上に少し余白 */
  padding: 12px;             /* 押しやすい余白 */
  background-color: #f39c12; /* オレンジ系（目立つ） */
  color: #fff;               /* 文字色（白） */
  border: none;              /* 枠線なし */
  border-radius: 5px;        /* 角丸 */
  font-size: 16px;           /* 文字サイズ */
  font-weight: bold;         /* 太字 */
  cursor: pointer;           /* 指カーソル */
}

.btn-next:hover {
  background-color: #d68910; /* ホバーで少し濃いオレンジ */
}

.btn-next:disabled {
  opacity: 0.5;              /* 押せない時は薄く */
  cursor: not-allowed;       /* 押せないカーソル */
}

/* 共有/ダウンロードボタン群（横並び） */
.export-buttons {
  display: flex;   /* 横並び */
  gap: 10px;       /* 間隔 */
  margin: 10px 0;  /* 上下余白 */
  flex-wrap: wrap; /* 画面が狭いと折り返し */
}

/* gap が使えない環境向けの保険 */
@supports not (gap: 10px) {
  .export-buttons > * {
    margin-right: 10px;  /* 横間隔の代替 */
    margin-bottom: 10px; /* 縦間隔の代替 */
  }
  .export-buttons > *:last-child {
    margin-right: 0; /* 最後だけ右余白を消す */
  }
}

/* 共有/Excel/PDF/HTML/リセット/戻る の共通ボタンスタイル */
.btn-share,
.btn-excel,
.btn-pdf,
.btn-html,
.btn-reset,
.btn-back {
  flex: 1;             /* できるだけ均等に伸びる */
  padding: 12px;       /* 内側余白 */
  color: white;        /* 文字色 */
  border: none;        /* 枠線なし */
  border-radius: 5px;  /* 角丸 */
  font-size: 14px;     /* 文字サイズ */
  font-weight: bold;   /* 太字 */
  cursor: pointer;     /* 指カーソル */
  white-space: nowrap; /* 文字は基本1行（ボタンが縦に伸びるの防止） */
  min-width: 140px;    /* 小さくなりすぎ防止 */
  line-height: 1.2;    /* Edgeで縦に膨らむ差を抑える */
}

/* 固定された時のメッセージ */
.lock-msg {
  text-align: center;        /* 中央揃え */
  font-weight: bold;         /* 太字 */
  color: #27ae60;            /* 緑 */
  margin-bottom: 10px;       /* 下余白 */
}

/* 個別ボタン色（値は元のまま） */
.btn-share {
  background-color: #27ae60; /* 緑 */
  width: 100%;               /* 横幅いっぱい */
  display: block;            /* ブロック表示 */
  margin-bottom: 10px;       /* 下余白 */
  font-size: 16px;           /* 少し大きめ */
}

.btn-excel {
  background-color: #217346; /* Excelっぽい緑 */
}

.btn-excel:hover {
  background-color: #1a5c38; /* ホバーで濃く */
}

.btn-pdf {
  background-color: #c0392b; /* 赤 */
}

.btn-pdf:hover {
  background-color: #a93226; /* ホバーで濃く */
}

.btn-html {
  background-color: #8e44ad; /* 紫 */
}

.btn-html:hover {
  background-color: #71368a; /* ホバーで濃く */
}

.btn-reset {
  background-color: #95a5a6; /* グレー */
  width: 100%;               /* 横幅いっぱい */
  margin-top: 10px;          /* 上余白 */
}

.btn-back {
  background-color: #3498db; /* 青 */
  width: 100%;               /* 横幅いっぱい */
  margin-top: 10px;          /* 上余白 */
  display: block;            /* ブロック表示 */
}


/* =========================================================
   6) 結果テーブル（掃除箇所 / 担当者）
   ========================================================= */

table {
  width: 100%;               /* 横幅いっぱい */
  border-collapse: collapse; /* 枠線を重ねる */
  margin-top: 20px;          /* 上余白 */
  table-layout: fixed;       /* 列幅が暴れないように固定 */
}

th,
td {
  border: 1px solid #ddd; /* 枠線 */
  padding: 12px;          /* 内側余白 */
}

th {
  background-color: #34495e; /* 見出し背景（濃い） */
  color: white;              /* 見出し文字（白） */
  width: 40%;                /* 左列の幅 */
  text-align: center;        /* 中央揃え */
}

td {
  text-align: left;        /* 左揃え */
  vertical-align: middle;  /* 縦中央 */
  overflow: visible;       /* 中のボタン等が見切れないようにする */
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行だけ背景色 */
}


/* =========================================================
   7) マニュアルリンク（「マニュアル」ボタン）
   ========================================================= */

.manual-link {
  display: inline-flex;                 /* ボタンっぽい並び */
  align-items: center;                  /* 縦位置中央 */
  justify-content: center;              /* 横位置中央 */

  padding: 6px 10px;                    /* 押せる余白 */
  min-height: 28px;                     /* 小さすぎ防止 */
  min-width: 70px;                      /* 小さすぎ防止 */

  font-size: 12px;                      /* 表内で邪魔にならない */
  font-weight: bold;                    /* 太字 */
  color: #ffffff;                       /* 文字色 */
  background-color: #3498db;            /* 背景（青） */
  border-radius: 6px;                   /* 角丸 */
  text-decoration: none;                /* 下線を消す */

  white-space: nowrap;                  /* ボタン内で改行しない */
  flex: none;                           /* 勝手に伸縮しない */
  margin-left: 8px;                     /* テキストとの間隔 */
}

.manual-link:hover {
  background-color: #2980b9; /* ホバーで濃い青 */
}

.manual-link:focus {
  outline: 2px solid rgba(52, 152, 219, 0.5); /* フォーカス時に枠 */
  outline-offset: 2px;                         /* 枠を少し外に */
}


/* =========================================================
   8) 管理画面（ログイン画面）
   ========================================================= */

#adminLoginPanel {
  display: flex;             /* 中央寄せのためflex */
  justify-content: center;   /* 横方向中央 */
  padding: 20px 0;           /* 上下余白 */
}

.login-box {
  width: 100%;                                   /* 幅100% */
  max-width: 400px;                              /* 最大幅400px */
  padding: 25px;                                 /* 内側余白 */
  border: 1px solid #ddd;                        /* 枠線 */
  background-color: #fafafa;                     /* 背景 */
  border-radius: 8px;                            /* 角丸 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);        /* 影 */
  line-height: 1.4;                              /* 行間 */
}

.login-box h3 {
  text-align: center; /* 中央 */
  margin-top: 0;      /* 上余白なし */
}

.checkbox-row {
  display: flex;        /* 横並び */
  align-items: center;  /* 縦中央 */
  gap: 5px;             /* 間隔 */
  margin-top: 5px;      /* 上余白 */
}

.btn-login {
  display: block;            /* 横幅100%にするため */
  width: 100%;               /* 横幅いっぱい */
  padding: 12px;             /* 押しやすい余白 */
  background-color: #2c3e50; /* 濃い色 */
  color: white;              /* 文字白 */
  border: none;              /* 枠線なし */
  border-radius: 5px;        /* 角丸 */
  font-size: 16px;           /* 文字サイズ */
  font-weight: bold;         /* 太字 */
  cursor: pointer;           /* 指カーソル */
  margin-top: 20px;          /* 上余白 */
}

.error-msg {
  color: #e74c3c;        /* 赤 */
  font-size: 14px;       /* サイズ */
  text-align: center;    /* 中央 */
  min-height: 20px;      /* 1行分の高さを確保（ガタつき防止） */
  margin: 10px 0 0 0;    /* 上だけ余白 */
}


/* =========================================================
   9) 管理画面（ログイン後の各セクション）
   ========================================================= */

.admin-section {
  background: #f9f9f9;   /* セクション背景 */
  padding: 15px;         /* 内側余白 */
  border-radius: 8px;    /* 角丸 */
  margin-bottom: 20px;   /* 下余白 */
  border: 1px solid #eee;/* 枠線 */
}

.admin-section h3 {
  margin-top: 0;             /* 上余白なし */
  font-size: 16px;           /* 見出しサイズ */
  border-bottom: 1px solid #ddd; /* 下線 */
  padding-bottom: 5px;       /* 下余白 */
}

/* PCで横並びにする入力行 */
.input-group,
.row {
  display: flex; /* 横並び */
  gap: 10px;     /* 間隔 */
}

/* 縦並びにしたい入力グループ */
.input-group-column {
  display: flex;          /* flex */
  flex-direction: column; /* 縦並び */
  gap: 10px;              /* 間隔 */
  margin-bottom: 10px;    /* 下余白 */
}

/* 入力欄の共通スタイル */
input[type="text"],
input[type="password"],
input[type="number"],
select {
  padding: 8px;            /* 入力欄の余白 */
  border: 1px solid #ccc;  /* 枠線 */
  border-radius: 4px;      /* 角丸 */
  flex: 1;                 /* 横に広がる */
  line-height: 1.2;        /* 行間（ブラウザ差対策） */
}

/* 追加ボタン */
.btn-add {
  background-color: #3498db; /* 青 */
  color: white;              /* 文字白 */
  border: none;              /* 枠線なし */
  padding: 8px 15px;         /* 余白 */
  border-radius: 4px;        /* 角丸 */
  cursor: pointer;           /* 指 */
  font-weight: bold;         /* 太字 */
}

/* 管理画面のリスト（担当者/場所/除外など） */
.admin-list {
  list-style: none;      /* ・を消す */
  padding: 0;            /* 余白なし */
  margin: 0;             /* 余白なし */
  max-height: 200px;     /* 高さ制限（スクロール） */
  overflow-y: auto;      /* 縦スクロール */
  background: white;     /* 背景 */
  border: 1px solid #eee;/* 枠線 */
  border-radius: 4px;    /* 角丸 */
}

.admin-list li {
  display: flex;                  /* 文字とボタンを横並び */
  justify-content: space-between; /* 左：文字 / 右：ボタン */
  align-items: center;            /* 縦中央 */
  padding: 8px 10px;              /* 余白 */
  border-bottom: 1px solid #f0f0f0; /* 区切り線 */
  font-size: 14px;                /* 文字サイズ */
}

/* 削除ボタン */
.btn-del {
  background-color: #e74c3c; /* 赤 */
  color: white;              /* 文字白 */
  border: none;              /* 枠線なし */
  border-radius: 4px;        /* 角丸 */
  padding: 4px 8px;          /* 余白 */
  font-size: 12px;           /* 小さめ */
  cursor: pointer;           /* 指 */
  margin-left: 10px;         /* 左に間隔 */
}

/* 注意文 */
.admin-note {
  font-size: 12px;      /* 小さめ */
  color: #e67e22;       /* オレンジ */
  background: #fff3e0;  /* 薄オレンジ背景 */
  padding: 8px;         /* 余白 */
  border-radius: 4px;   /* 角丸 */
  margin-bottom: 15px;  /* 下余白 */
}


/* =========================================================
   10) 管理画面（HTMLにあるID/クラスの補完スタイル）
   ========================================================= */

/* ユーザー管理：入力行（横並び＋折り返し） */
.user-input-row {
  display: flex;       /* 横並び */
  gap: 10px;           /* 間隔 */
  align-items: center; /* 縦中央 */
  flex-wrap: wrap;     /* 狭い時は折り返し */
}

/* 掃除箇所：入力行（横並び＋折り返し） */
.location-input-row {
  display: flex;       /* 横並び */
  gap: 10px;           /* 間隔 */
  align-items: center; /* 縦中央 */
  flex-wrap: wrap;     /* 狭い時は折り返し */
  margin-bottom: 10px; /* 下余白 */
}

/* 「必要人数:」の並び */
.capacity-group {
  display: flex;        /* 横並び */
  align-items: center;  /* 縦中央 */
  gap: 5px;             /* 間隔 */
  white-space: nowrap;  /* ラベルが折れないようにする */
}

/* 必要人数入力（PC想定：小さく固定） */
#newLocCap {
  width: 60px;     /* 幅固定 */
  min-width: 60px; /* 最小幅固定 */
  flex: none;      /* 伸縮しない */
}

/* URL入力欄：次の行に回して100% */
#newLocUrl {
  width: 100%;        /* 横幅いっぱい */
  flex-basis: 100%;   /* 必ず次の行で幅100% */
  margin-top: 5px;    /* 上余白 */
}

/* ✅ 掃除箇所一覧の [Link有] を青系で表示（script.js の url-status 用） */
.url-status {
  color: #1e6bd6;   /* 青系 */
  font-weight: bold;/* 強調 */
}


/* =========================================================
   11) 「スマホで全体が拡大して見える」対策（横はみ出し防止）
   ========================================================= */

html,
body {
  width: 100%;        /* 画面幅に合わせる */
  overflow-x: hidden; /* 横スクロールを出さない（はみ出し対策） */
}

.container {
  width: 100%; /* 常に親幅に追従（block要素の挙動と同等だが明示） */
}


/* =========================================================
   12) レスポンシブ（768px以下：タブレット・スマホ）
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 画面端の余白を少し減らす */
  body {
    padding: 12px; /* PC(20px) → スマホ(12px) */
  }

  /* コンテナの余白を少し減らす */
  .container {
    padding: 15px;       /* PC(30px) → スマホ(15px) */
    border-radius: 10px; /* 少し丸みを自然に */
  }

  /* タイトルが大きすぎないように調整 */
  h1 {
    font-size: 28px;     /* スマホで見やすいサイズ */
    line-height: 1.2;    /* 行間 */
    margin-bottom: 16px; /* 下余白 */
    word-break: keep-all;/* 日本語の不自然な分割を防ぐ */
  }

  /* タブ：間隔とサイズ調整 */
  .tab-menu {
    gap: 8px;            /* 間隔を少し広めに */
    margin-bottom: 14px; /* 余白を少し減らす */
  }

  .tab-btn {
    flex: 1;             /* 2つを均等幅に */
    min-width: 0;        /* min-widthで大きくならないように */
    text-align: center;  /* 中央 */
    font-size: 14px;     /* 文字サイズを少し小さく */
    padding: 10px 12px;  /* 余白を少し縮める */
    white-space: normal; /* 長い場合は折り返しOK */
    line-height: 1.2;    /* 2行でも読みやすく */
  }

  /* 見出し */
  .member-area h3 {
    font-size: 18px; /* 少し控えめに */
    margin-top: 6px; /* 上余白 */
  }

  /* メンバータイル：スマホで見やすい最小幅 */
  #displayMemberList {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); /* 少し大きめに */
    gap: 10px; /* 間隔 */
  }

  #displayMemberList li {
    font-size: 14px;   /* 文字 */
    padding: 10px 8px; /* 余白 */
  }

  /* メインボタン：文字を少し控えめに */
  #shuffleBtn {
    font-size: 16px; /* 18px → 16px */
    padding: 14px;   /* 押しやすさ維持 */
  }

  /* 次のページボタンもスマホで少し調整 */
  .btn-next {
    font-size: 15px; /* 少し控えめ */
    padding: 13px;   /* 押しやすい */
  }

  /* 共有ボタン群：縦並び */
  .export-buttons {
    flex-direction: column; /* 縦並び */
    width: 100%;            /* 横幅100% */
  }

  .export-buttons button {
    width: 100%;   /* 横幅100% */
    min-width: 0;  /* min-widthの影響を切る */
  }

  /* 表：余白と文字を少し小さく */
  table {
    font-size: 14px; /* 全体文字 */
  }

  th,
  td {
    padding: 10px; /* 余白を少し減らす */
  }

  /* マニュアルボタン：狭い画面では次の行に落として見切れ防止 */
  .manual-link {
    display: inline-block; /* レイアウトを安定 */
    margin-left: 0;        /* 左余白なし */
    margin-top: 6px;       /* 上余白 */
  }

  /* 管理画面：入力フォームを縦並びにする */
  .input-group,
  .row,
  .user-input-row,
  .location-input-row {
    flex-direction: column; /* 縦並び */
    align-items: stretch;   /* 横幅いっぱい */
  }

  /* 入力欄・ボタンを100%にして見切れ防止 */
  .input-group input,
  .input-group button,
  .row select,
  .row button,
  .user-input-row input,
  .user-input-row button,
  .location-input-row input,
  .location-input-row button {
    width: 100%;     /* 横幅100% */
    max-width: none; /* 最大幅制限なし */
    flex: none;      /* 伸縮しない */
  }

  /* ★必要人数だけは横並びのまま（見やすい） */
  .capacity-group {
    flex-direction: row;        /* 横並び */
    justify-content: flex-start;/* 左寄せ */
    width: 100%;                /* 横幅100% */
  }

  /* 必要人数入力：スマホでは押しやすく少し広め */
  #newLocCap {
    width: 90px;      /* 幅 */
    min-width: 90px;  /* 最小幅 */
    flex: none;       /* 伸縮しない */
    margin-left: 10px;/* ラベルとの間隔 */
  }

  /* URLは必ず次の行で100% */
  #newLocUrl {
    width: 100%;      /* 横幅100% */
    flex-basis: 100%; /* 次の行へ */
    margin-top: 0;    /* 余白調整 */
  }

  /* 管理リスト：スマホは縦並びの方が見やすい */
  .admin-list li {
    flex-direction: column; /* 縦並び */
    align-items: stretch;   /* 横幅いっぱい */
    gap: 8px;               /* 間隔 */
  }

  .admin-list li span {
    width: 100%; /* テキストを横幅いっぱい */
  }

  /* 削除ボタン：スマホでは押しやすく */
  .btn-del {
    width: 100%;     /* 横幅100% */
    margin-left: 0;  /* 左余白なし */
    padding: 10px;   /* 大きめ */
    font-size: 14px; /* 読みやすく */
  }

  /* ログアウト/初期化ボタン：スマホで押しやすく */
  #logoutBtn,
  #resetAllDataBtn {
    width: 100%;     /* 横幅100% */
    padding: 12px;   /* 余白 */
    font-size: 14px; /* サイズ */
  }

  /* 管理見出しを少し控えめに */
  .admin-section h3 {
    font-size: 15px; /* 見出しサイズ */
  }

  /* 入力時のズーム対策（iPhone系） */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select {
    font-size: 16px; /* 16px以上で自動ズームしにくい */
  }

  /* ボタン全体の文字サイズ（巨大感を抑える） */
  button {
    font-size: 15px;
  }

  /* ログイン画面：横幅を画面いっぱいに近づける */
  .login-box {
    width: 100%;     /* 横幅100% */
    max-width: 100%; /* 最大幅制限を外す */
    padding: 18px;   /* 余白調整 */
  }

  .login-box label {
    font-size: 14px; /* ラベル読みやすく */
  }

  /* HTMLに style="display:flex..." がある行をスマホで縦並びに */
  #adminConfigPanel > div[style*="display:flex"] {
    flex-direction: column; /* 縦並び */
    align-items: stretch;   /* 横幅いっぱい */
    gap: 10px;              /* 間隔 */
  }
}


/* =========================================================
   13) レスポンシブ（480px以下：小さいスマホ）
   ========================================================= */

@media screen and (max-width: 480px) {

  h1 {
    font-size: 22px;     /* タイトルをさらに小さく */
    margin-bottom: 12px; /* 下余白 */
  }

  .tab-btn {
    min-width: 140px;    /* 最低幅 */
    font-size: 13px;     /* 文字を少し小さく */
    padding: 10px 10px;  /* 余白を少し減らす */
  }

  #displayMemberList {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); /* 小さい端末向け */
    gap: 8px; /* 間隔 */
  }

  #shuffleBtn {
    font-size: 15px; /* さらに控えめ */
    padding: 13px;   /* 押しやすさ維持 */
  }

  .btn-next {
    font-size: 14px; /* さらに控えめ */
    padding: 12px;   /* 余白 */
  }

  th,
  td {
    padding: 10px;   /* 余白 */
    font-size: 14px; /* 文字 */
  }

  .login-box {
    padding: 16px; /* ログインの余白を少し詰める */
  }

  .admin-section h3 {
    font-size: 14px; /* 見出しを少し小さく */
  }

  /* 共有ボタン類：文字が大きすぎるのを防ぐ */
  .btn-share,
  .btn-excel,
  .btn-pdf,
  .btn-html,
  .btn-reset,
  .btn-back {
    font-size: 13px; /* 14px → 13px */
    min-width: 0;    /* はみ出し防止 */
  }

  /* 入力・ボタン：タップしやすく（iOSズーム対策含む） */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select,
  button {
    font-size: 16px; /* iOSの自動ズーム対策にもなる */
  }

  #newLocCap {
    width: 100px;     /* 押しやすく */
    min-width: 100px; /* 最小幅 */
  }
}


/* =========================================================
   14) 【重要】スマホ表示で「必要人数:」が横にはみ出す問題の最終修正
   ---------------------------------------------------------
   ✅ ここは“上書き”が必要なので、必ず最後の方に置く
   （一般ルールより後に書くことで確実に勝つ）
   ========================================================= */

@media screen and (max-width: 768px) {

  .location-input-row .capacity-group {
    width: 100%;                  /* 親幅いっぱい */
    display: flex;                /* 横並び */
    flex-direction: row;          /* 横方向 */
    align-items: center;          /* 縦中央 */
    justify-content: flex-start;  /* 左寄せ */
    gap: 8px;                     /* 間隔 */
    overflow: hidden;             /* はみ出しを抑える */
  }

  .location-input-row .capacity-group span {
    flex: 0 0 auto;       /* ラベルは縮まない */
    white-space: nowrap;  /* ラベルは1行 */
  }

  .location-input-row #newLocCap {
    width: 90px !important;       /* width:100% の上書き対策 */
    min-width: 90px !important;   /* 最小幅固定 */
    max-width: 90px !important;   /* 最大幅固定 */
    flex: 0 0 90px !important;    /* flexでも固定幅（伸縮禁止） */
    margin: 0 !important;         /* 余計なズレ防止 */
  }
}

@media screen and (max-width: 480px) {

  .location-input-row #newLocCap {
    width: 80px !important;       /* さらに小さく */
    min-width: 80px !important;   /* 最小幅 */
    max-width: 80px !important;   /* 最大幅 */
    flex: 0 0 80px !important;    /* 固定 */
  }
}