/* 基本スタイル */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5; /* 淡いグレー */
      font-size: 16px;
      color: #333;
      box-sizing: border-box;
    }

    /* ヘッダーのスタイル */
    header {
      background-color: #4A90E2; /* 落ち着いたブルー系 */
      color: #ffffff;
      padding: 15px 20px;
      text-align: center;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    header h1 {
      margin: 0;
      font-size: 1.8em;
      color: #ffffff;
    }

    /* フッターのスタイル */
    footer {
      background-color: #4A90E2; 
      color: #ffffff; 
      text-align: center;
      padding: 10px 20px;
      position: fixed;
      width: 100%;
      bottom: 0;
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
      font-size: 0.9em;
    }

    /* コンテナ */
    .container {
      padding: 100px 20px 60px;
      max-width: 1200px; 
      margin: auto;
      position: relative;
    }

    /* 見出し */
    h1, h2 {
      text-align: center;
      color: #333;
      margin: 20px 0;
    }

    /* ラベル */
    label {
      font-size: 16px;
      color: #555;
      display: block;
      margin-top: 10px;
    }

    /* 入力フィールド */
    input[type="text"], input[type="password"], textarea, select {
      width: 100%;
      padding: 12px;
      margin: 8px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      box-sizing: border-box;
    }

    /* ボタン */
button {
  padding: 12px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  /* margin-top: 10px; を削除 */
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  vertical-align: middle; /* 追加 */
}
    button:hover {
      opacity: 0.9;
    }

    button:disabled {
      background-color: #d3d3d3;
      cursor: not-allowed;
    }

    /* ボタンのカラー */
    .submit {
      background-color: #4A90E2;
    }

    .grading-button, .login-button, .bulk-grading, .export-excel, .grading-support-button {
      background-color: #4A90E2;
    }

    .top-page-button.student {
      background-color: #007bff;
    }

    .top-page-button.teacher {
      background-color: #28a745;
    }

/* リセットボタン用 */
.reset-all {
  background-color: #dc3545;  /* 基本の背景色 */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

/* キャンセルボタン用 */
.cancel-button {
  background-color: #17a2b8;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

/* ログアウトボタン用 */
.logout {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.logout:hover {
  background-color: #6c757d;
}


    .edit, .change-login-id-button, .change-password-button {
      background-color: #5cb85c;
    }

    .delete {
      background-color: #d9534f;
    }

    .result {
      background-color: #5bc0de;
      color: #fff;
    }

    /* トップページのボタン */
    #top-page button {
      margin: 10px 0;
      width: 100%;
      color: #fff;
    }

    /* テーブルスタイル */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ddd;
      word-wrap: break-word;
      font-size: 14px;
    }

    th {
      background-color: #f9f9f9;
      color: #333;
    }

    tr:nth-child(even) {
      background-color: #fefefe;
    }

    tr:hover {
      background-color: #f1f1f1;
    }

    /* メッセージスタイル */
    #message, #studentLoginMessage, #teacherLoginMessage {
      color: red;
      text-align: center;
    }

    /* サーバからの結果メッセージ表示用 */
    #studentMessage {
      display: none; /* 初期は非表示 */
    }

    /* 結果メッセージ用のボックス */
    .result-box {
      background-color: #eef;
      border: 1px solid #ccd;
      padding: 10px;
      border-radius: 4px;
      margin-top: 20px;
      font-size: 1em;
      color: #333;
      word-wrap: break-word;
    }

    /* ダウンロードリンク */
    .download-link {
      color: #4A90E2;
      cursor: pointer;
      text-decoration: underline;
    }

    /* レスポンシブ対応 */
    @media screen and (max-width: 768px) {
      h1, h2 {
        font-size: 1.2em;
      }
      input[type="text"], input[type="password"], textarea, select, button {
        font-size: 14px;
        padding: 10px;
      }
      table, th, td {
        font-size: 12px;
      }
    }

    /* 採点セクション */
    #rating-section {
      display: none;
      margin-top: 20px;
      padding: 20px;
      background-color: #e6f7ff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    /* Submit Rating ボタンのスタイル */
#submit-rating-button {
  background-color: #4A90E2; /* 背景色 */
  color: #ffffff; /* テキストカラー */
  padding: 12px; /* パディング */
  border: none; /* ボーダーを削除 */
  border-radius: 4px; /* 角を丸く */
  font-size: 16px; /* フォントサイズ */
  cursor: pointer; /* マウスカーソルをポインタに */
  width: 100%; /* 幅を100%に */
  box-sizing: border-box; /* ボックスサイズを設定 */
  transition: background-color 0.3s ease; /* 背景色の変化をスムーズに */
}

#submit-rating-button:hover {
  background-color: #357ABD; /* ホバー時の背景色（少し濃いブルー） */
}

#submit-rating-button:disabled {
  background-color: #d3d3d3; /* 無効時の背景色 */
  cursor: not-allowed; /* 無効時のカーソル */
}


    /* 生徒用の注意書きスタイル（ボックスを無くして小さくイタリック体） */
    .student-instructions {
      color: #666;
      font-size: 0.9em;
      font-style: italic;
      margin-top: 10px;
      line-height: 1.5;
    }

    /* 先生用ページなどで使用するノートクラス(元々のまま) */
    .note {
      color: #555;
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 5px;
      margin-top: 10px;
      background-color: #fff;
    }

    /* ログアウトボタンのスタイル */
    .logout-container {
      position: fixed;
      top: 70px;
      right: 20px;
      z-index: 1001;
      display: none;
    }

    .logout-top {
      background-color: #6c757d; 
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-size: 14px;
    }

    .logout-top:hover {
      background-color: #5a6268; 
    }

    /* ローディングオーバーレイ */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none; 
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    .loader {
      border: 8px solid #f3f3f3; 
      border-top: 8px solid #4A90E2;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
      margin-bottom: 10px; 
      margin: 0 auto;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loading-message {
      color: #fff;
      font-size: 1.2em;
      text-align: center;
      margin-top: 10px;
    }

.announcement-box {
  background-color: #fff;       /* 淡い背景に */
  border-left: 5px solid #4A90E2;  /* 左線をヘッダーと同じ青色に */
  padding: 10px;
  margin: 10px;
  font-size: 14px;
  color: #333;
  font-weight: normal; 
}

.announcement-box h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;                /* 見出しの文字色をダークグレー */
  border-bottom: 2px solid #4A90E2; /* 下線を青色に */
  padding-bottom: 5px;
}

#announcement-text {
  white-space: pre-wrap;      /* 改行を反映 */
  font-size: 14px;
  color: #333;
}

/* ========= ここからモーダルのスタイル追加 ========== */
    .modal-overlay {
      display: none; /* 初期は非表示 */
      position: fixed;
      z-index: 3000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto; /* 必要に応じてスクロール */
      background-color: rgba(0,0,0,0.5); /* 黒半透明 */
      align-items: center;
      justify-content: center;
    }

    .modal-content {
      background-color: #fff;
      margin: 15% auto; /* 画面中央寄せ用 */
      padding: 20px;
      border-radius: 5px;
      max-width: 400px; /* モーダルの最大幅 */
      position: relative;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      /* スマホ対応のため 90% などにしてもよい */
      width: 90%;
    }

    .modal-header {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      text-align: center;
    }

    .modal-close {
      background-color: #6c757d;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      float: right;
      margin-top: -5px;
    }

    .modal-close:hover {
      opacity: 0.9;
    }

/*採点基準チェッカー*/
.check {
  background-color: #FF9900;
  color: #000000;
  text-shadow: none;
  padding: 12px 24px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.check:hover,
.check:focus {
  opacity: 0.9;
}

/* エクセルエクスポートボタン */
.excel-export-btn {
  background: #2b6cb0;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: opacity .3s;
}
.excel-export-btn:disabled { opacity: .4; cursor: default; }

.excel-status {
  margin-left: 12px;
  font-size: 13px;
  color: #555;
}

/* 解答ソースボタン */
.src-btn {
  margin-left: 4px;
  padding: 4px 10px;
  border: 1px solid #999;
  background: #f0f0f0;   /* 薄いグレー */
  color: #333;           /* ダークテキスト */
  cursor: pointer;
  transition: background .2s, color .2s;
}
.src-btn:hover {
  background: #e0e0e0;
}
.src-btn.active {
  background: #2b6cb0;
  color: #fff;
  border-color: #2b6cb0;
}

/* PDFコンテナ */
.pdf-container-a4 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 141.4%; /* A4の縦横比 (297 / 210 * 100) */
  margin-bottom: 10px;
  display: none; /* 初期状態は非表示 */
}

.pdf-container-a4 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* テーブルの横スクロール用コンテナ */
.table-container {
  overflow-x: auto;
  margin-top: 20px;
}

/* 「もっと見る」機能用のスタイル */
.toggle-link {
  color: #4A90E2;
  cursor: pointer;
  text-decoration: underline;
  display: block; /* リンクをブロック要素にして改行 */
  margin-top: 5px; /* 上のテキストとの間に余白を設ける */
  font-size: 12px;
}

/* ボタン内ローディングスピナー */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3); /* 少し薄い白 */
  border-radius: 50%;
  border-top-color: #fff; /* 上だけ濃い白 */
  animation: spin 1s ease-in-out infinite;
  vertical-align: middle; /* テキストと高さを合わせる */
  margin-left: 8px; /* テキストとの間に余白 */
}

/* 操作列のボタンを囲むコンテナ */
.action-cell-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px; /* ボタン間の隙間 */
}

/* 横並びボタン用のコンテナ */
.button-group {
  display: flex;
  justify-content: space-between;
  gap: 4%;
}
.button-group button {
  width: 48%;
}

/* ========= 採点基準追加セクションの改善 ========== */
.add-prompt-section {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  margin-top: 40px; /* 上のテーブルとの間隔を確保 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  overflow: auto;
}

.add-prompt-section:focus-within {
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.2);
  border-color: #4A90E2;
}

.add-prompt-section h3 {
  margin-top: 0;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #4A90E2;
  color: #333;
  font-size: 1.4em;
  text-align: left; /* 左揃えに変更 */
}

.add-prompt-section label {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  margin-top: 20px; /* 各ラベルの上の余白 */
}

.add-prompt-section textarea,
.add-prompt-section select,
.add-prompt-section input[type="file"] {
  margin-top: 8px;
}

/* 「矛盾・曖昧さをチェック」ボタン */
.add-prompt-section .check {
  margin-top: 10px;
  width: auto; /* 幅を自動調整 */
  padding: 10px 20px;
  float: right; /* 右寄せにする */
}

/* 採点基準チェック結果のフロート解除と表示調整 */
#promptCheckResult {
  clear: both;         /* ← これが肝心 */
  margin-top: 15px;
  max-height: 320px;   /* 長文対策（任意） */
  overflow: auto;      /* 長文スクロール（任意） */
}

.check-result-banner {
  position: sticky; top: 80px; z-index: 900;
  display: none; padding: 10px 14px; border-radius: 6px; border: 1px solid;
  margin: 14px 0;
}
.check-result-banner.success { background:#e6ffed; border-color:#b7e1cd; color:#2b6447; }
.check-result-banner.warning { background:#fffbe6; border-color:#ffe58f; color:#8a6d3b; }
.check-result-banner.error   { background:#fff1f0; border-color:#ffccc7; color:#a8071a; }

/* 「採点基準を追加」ボタン */
#addPromptButton {
  margin-top: 30px; /* 他の要素との間隔を大きく取る */
  width: 100%;
  padding: 15px;
  font-size: 1.2em;
  font-weight: bold;
}

/* ファイルアイコンのスタイル */
.file-icon {
  font-size: 24px; /* アイコンのサイズ */
  text-decoration: none;
  color: #555;
  display: inline-block;
  transition: transform 0.2s;
}

.file-icon:hover {
  transform: scale(1.2);
}

/* 編集モードのファイル入力エリア */
.edit-file-section {
  margin-top: 15px;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
}

.edit-file-section label {
  font-size: 14px;
  font-weight: bold;
  display: block;
}

.edit-file-section .current-file {
  font-size: 12px;
  color: #333;
  margin: 5px 0;
  word-break: break-all; /* 長いURLがはみ出ないように */
}

.edit-file-section .file-help-text {
  font-size: 11px;
  color: #555;
  margin-top: 5px;
}

/* プロンプトテーブル、5行でテキストを省略し、「...」を表示するスタイル */
.truncated-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap; /* 改行を維持しつつ、自動で折り返す */
}

/* 編集フォームのグリッドレイアウト */
.edit-form-grid {
  display: grid;
  grid-template-columns: 100px 1fr; /* ラベル列と入力列 */
  gap: 10px 15px; /* 行間と列間の隙間 */
  align-items: center; /* 要素を上下中央揃えに */
}

/* 編集フォーム内のテキストエリアのスタイル */
.edit-form-textarea {
  box-sizing: border-box; /* paddingを含めて幅を計算 */
  width: 100%; /* 親要素の幅いっぱいに広がる */
  max-width: 100%; /* これで親要素からはみ出さなくなる */
  vertical-align: top;
}

/* 問題文と採点基準のテキストエリアの初期高さを指定 */
.edit-form-textarea.question,
.edit-form-textarea.criteria {
  min-height: 300px; /* 初期高さを200pxに設定 */
  resize: vertical; /* 縦方向のみリサイズ可能にする */
}

/* ========= モーダルのスタイル ========== */
.modal-overlay {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* 半透明の黒い背景 */
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 24px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5em;
}

/* public/admin-style.css の末尾に追記 */

/* ========= 新しいクラス詳細レイアウト ========== */
.class-details-grid {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左ペイン200px, 右ペインは残り全部 */
  gap: 20px;
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
}

.class-nav-pane .nav-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.class-nav-pane .nav-item {
  padding: 12px 15px;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 5px;
  transition: background-color 0.2s ease-in-out;
  font-weight: 500;
  color: #333;
}

.class-nav-pane .nav-item:hover {
  background-color: #f0f4f8;
}

.class-nav-pane .nav-item.active {
  background-color: #4A90E2;
  color: #ffffff;
  font-weight: bold;
}

.class-content-pane .tab-content {
  display: none; /* 初期状態では非表示 */
}

.class-content-pane .tab-content.active {
  display: block; /* .activeクラスがついたタブのみ表示 */
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.content-header h3 {
  margin: 0;
}

/* ========= 新しい授業登録モーダル ========== */
.modal-content.large {
  max-width: 800px; /* モーダルの幅を広げる */
}

.modal-body {
  max-height: 60vh; /* 高さを画面の60%までに制限 */
  overflow-y: auto;   /* 内容が多ければスクロールさせる */
  padding: 10px;
}

.modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end; /* ボタンを右寄せに */
  gap: 10px;
}

.modal-footer button {
  width: auto;
  padding: 10px 20px;
}

.checkbox-list {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  margin-top: 8px;
  margin-bottom: 20px;
  max-height: 200px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

.checkbox-list label {
  display: block;
  margin-bottom: 8px;
  font-weight: normal;
  cursor: pointer;
}

.checkbox-list input[type="checkbox"] {
  margin-right: 10px;
}

/* ========= 授業一覧テーブルの行スタイル ========== */
#subjectTable tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

#subjectTable tbody tr:hover {
    background-color: #f0f4f8; /* ホバー時に背景色を変更 */
}

/* ========= 授業詳細ヘッダーのボタンスタイル ========== */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.content-header h3 {
  margin: 0;
  /* タイトルが長くなることを想定して、ボタンにスペースを譲る */
  flex-grow: 1; 
  text-align: center;
}

.button-group-right {
  display: flex;
  gap: 10px; /* ボタン間の隙間 */
}

.button-group-right button {
  width: auto;
  padding: 8px 16px;
}

/* ========= 教員管理セクション ========== */
.teacher-management-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* 1 : 1.5 の比率で分割 */
  gap: 30px;
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
}

.teacher-register-form h4, .teacher-list h4 {
  margin-top: 0;
  font-size: 1.2em;
  color: #333;
}

.teacher-list .table-container {
  max-height: 400px; /* 高さを制限してスクロール可能に */
  overflow-y: auto;
}

/* =================================== */
/* モーダルウィンドウ用のスタイル       */
/* =================================== */

.modal-container {
  display: none; /* 初期状態では非表示 */
  position: fixed; /* 画面に固定 */
  z-index: 1000; /* 他の要素より手前に表示 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 内容が多い場合にスクロール */
  background-color: rgba(0,0,0,0.5); /* 半透明の黒い背景 */

  /* Flexboxを使って内容を中央揃えにする */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px 30px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px; /* 横幅の最大値を設定 */
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  position: relative;
}

.modal-close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
}

.modal-close-button:hover,
.modal-close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-actions {
  text-align: right;
  margin-top: 20px;
}

/* =================================== */
/* 採点基準チェック結果表示用のスタイル */
/* =================================== */

.result-box {
  padding: 15px;
  margin-top: 20px;
  border-radius: 5px;
  border: 1px solid #ddd;
  white-space: pre-wrap; /* 改行やスペースをそのまま表示 */
  line-height: 1.6;
}

/* 状態別のスタイル */
.result-box.loading {
  background-color: #e9e9e9;
  border-color: #ccc;
  color: #333;
}
.result-box.success {
  background-color: #e6ffed;
  border-color: #b7e1cd;
  color: #2b6447;
}
.result-box.warning {
  background-color: #fffbe6;
  border-color: #ffe58f;
  color: #8a6d3b;
}
.result-box.error {
  background-color: #fff1f0;
  border-color: #ffccc7;
  color: #a8071a;
}

/* style.css に追記 */

/* =================================== */
/* 矛盾チェックボタンのスタイル          */
/* =================================== */
.textarea-container {
  position: relative; /* ボタンを配置する基準点 */
}

.check-prompt-icon-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto; /* 幅を自動調整 */
  padding: 8px 12px;
  background-color: #FF9900;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.check-prompt-icon-btn:hover {
  opacity: 0.9;
}


/* =================================== */
/* モーダルウィンドウ用のスタイル       */
/* =================================== */

.modal-container {
  display: none; /* 初期状態では非表示 */
  position: fixed; /* 画面に固定 */
  z-index: 1000; /* 他の要素より手前に表示 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 内容が多い場合にスクロール */
  background-color: rgba(0,0,0,0.5); /* 半透明の黒い背景 */
  
  /* Flexboxを使って内容を中央揃えにする */
  display: flex; /* これを有効にするために初期値を none => flex に変更する */
  justify-content: center;
  align-items: center;
}

/* モーダルが表示されていないときは非表示に戻す */
.modal-container:not(.is-open) {
    display: none;
}


.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px 30px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px; /* 横幅の最大値を設定 */
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  position: relative;
}

.modal-close-button {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
}

.modal-close-button:hover,
.modal-close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.5em;
  color: #333;
  border-bottom: 2px solid #4A90E2;
  padding-bottom: 10px;
}

.modal-actions {
  text-align: right;
  margin-top: 20px;
}

.modal-actions button {
    width: auto;
    padding: 10px 20px;
}

/* タブボタンを囲むコンテナ */
.tab-navigation {
  display: flex;
  border-bottom: 2px solid #ccc;
  margin-top: 30px;
  margin-bottom: 20px;
}

/* タブボタンの基本スタイル */
.tab-button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 1.1em;
  color: #555;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* 下線を親要素の線に重ねる */
  width: auto; /* 幅を自動調整 */
}

/* アクティブな（選択中の）タブボタンのスタイル */
.tab-button.active {
  color: #4A90E2;
  font-weight: bold;
  border-bottom-color: #4A90E2;
}

/* ホバー時のスタイル */
.tab-button:not(.active):hover {
  background-color: #f5f5f5;
}

/* タブの中身を囲むコンテナ */
.tab-content {
  display: none; /* 初期状態では非表示 */
}

/* アクティブなタブの中身だけ表示 */
.tab-content.active {
  display: block;
}

/* --- ヘッダーの修正 --- */
header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  
  /* ▼▼▼ 背景色を水色に戻しました ▼▼▼ */
  background-color:  #4A90E2; 
  /* ▲▲▲ ここまで ▲▲▲ */

  padding: 10px 20px;
  border-bottom: 1px solid #dee2e6;
  box-sizing: border-box; 
}

header h1 {
  grid-column: 2; /* Gridレイアウトの中央に配置 */
  margin: 0;
  font-size: 24px;
}

.header-actions {
  grid-column: 3; /* Gridレイアウトの右側に配置 */
  justify-self: end; /* 右端に寄せる */
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 2; 
}

#usageCountDisplay {
  font-size: 16px;
  font-weight: bold;
}

.logout-top {
  margin: 0; /* 元のスタイルを上書き */
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px; /* アイコンサイズ */
  color: #333;
  padding: 5px;
}

.icon-button:hover {
  color: #007bff;
}


/* --- 3ペインUIのためのスタイル --- */
.filter-panes {
  display: flex;
  gap: 10px;
  width: 100%; /* ←←← 「45%」から「100%」に変更 */
  flex-shrink: 0;
  margin-top: 20px;    /* ←←← 上のボタンとの余白として追加 */
  margin-bottom: 20px; /* ←←← 下のタブとの余白として追加 */
}


.pane {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  height: 400px; /* 高さを固定 */
  display: flex;
  flex-direction: column;
}

.pane-header {
  padding: 10px;
  font-weight: bold;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.pane-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: auto; /* 内容が多い場合にスクロール */
}

.pane-list li {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #555;
}

.pane-list li:last-child {
  border-bottom: none;
}

.pane-list li:hover {
  background-color: #e9ecef;
}

.pane-list li.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

.main-content {
  flex-grow: 1;
}

/* --- 新規作成フォームの注意書き --- */
#tab-create .add-prompt-section p {
    color: #d9534f;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* =================================== */
/* UI改善のための追加スタイル            */
/* =================================== */

/* カード型セクションの基本スタイル */
.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* セクションタイトルのスタイル */
.section-title {
  text-align: left;
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 1.4em;
  color: #333;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #4A90E2;
  padding-bottom: 15px;
}

/* 手順番号のアイコン */
.step-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #4A90E2;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 15px;
}

/* =================================== */
/* UI改善のための追加スタイル            */
/* =================================== */

/* カード型セクションの基本スタイル */
.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* セクションタイトルのスタイル */
.section-title {
  text-align: left;
  margin-top: 0;
  margin-bottom: 15px; /* 説明文との余白を調整 */
  font-size: 1.4em;
  color: #333;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #4A90E2;
  padding-bottom: 15px;
}

/* セクションの説明文 */
.section-description {
  color: #666;
  font-size: 0.95em;
  margin-top: -10px;
  margin-bottom: 20px;
}


/* 手順番号のアイコン */
.step-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #4A90E2;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 15px;
}

/* --- ボタンの色の見直し --- */

/* 複製ボタン (オレンジ系) */
.duplicate-button {
  background-color: #f0ad4e;
  color: #fff;
}
.duplicate-button:hover {
  background-color: #ec971f;
}

/* 結果ボタン (既存の result クラスをそのまま使用) */
.result {
  background-color: #5bc0de;
  color: #fff;
}
.result:hover {
  background-color: #31b0d5;
}

/* --- 注意書きメッセージのスタイル見直し --- */
.info-box {
  background-color: #e7f3fe; /* 水色系の背景 */
  border: 1px solid #b3d7f3;  /* 少し濃い水色の線 */
  color: #2c5282;             /* 濃い青系の文字色 */
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.info-box i {
  margin-right: 10px;
  font-size: 1.2em;
}

/* 既存のスタイルを上書き */
#tab-create .add-prompt-section p {
    color: inherit; /* 親要素の色を継承 */
    background-color: inherit;
    border: inherit;
}

/* =================================== */
/* モダンデザインへのアップデート         */
/* =================================== */

/* 1. 基本フォントをモダンなゴシック体に */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* 2. 全ての入力フォーム（テキスト、日付、セレクトボックス）のスタイルを統一 */
input[type="text"],
input[type="password"],
input[type="datetime-local"],
textarea,
select {
  background-color: #fff;
  border: 1px solid #d1d5db; /* 少し薄いグレーの線 */
  border-radius: 6px; /* 角を少し丸く */
  padding: 12px 14px; /* パディングを調整して押しやすく */
  font-size: 16px; /* 文字サイズを統一 */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* フォームが選択された（フォーカスした）時のスタイル */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4A90E2; /* テーマカラーの青色に */
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25); /* 青色のうすい影 */
}

/* 3. ボタンに立体感とインタラクションを追加 */
button.edit,
button.duplicate-button,
button.result,
button.bulk-grading {
  border: none;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* ボタンにマウスカーソルが乗った時、少しだけ浮き上がるように見せる */
button.edit:hover,
button.duplicate-button:hover,
button.result:hover,
button.bulk-grading:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 4. タブのデザインをより分かりやすく */
.tab-navigation {
    border-bottom: 2px solid #e5e7eb; /* 境界線を少し薄く */
}

.tab-button {
    padding: 12px 24px;
    font-weight: 600; /* 少し太字に */
    color: #6b7280;   /* 非アクティブなタブの文字色 */
    transition: color 0.2s;
}

.tab-button.active {
    color: #4A90E2; /* アクティブなタブの文字色（テーマカラー） */
    border-bottom: 2px solid #4A90E2;
}

.tab-button:not(.active):hover {
    color: #374151; /* ホバーで少し濃く */
    background-color: transparent;
}

/* =================================== */
/* アイコン追加のためのスタイル          */
/* =================================== */

/* ボタン内のアイコンとテキストの隙間 */
button .fas {
  margin-right: 8px;
}

/* セクションタイトルのアイコン */
.section-icon {
  margin-right: 12px;
  color: #4A90E2;
  font-size: 1.2em;
}

/* タブ内のアイコン */
.tab-button .fas {
  margin-right: 6px;
}

/* テーブル内のアクションボタン（アイコンのみ）のスタイル */
.action-cell-buttons {
  display: flex;
  justify-content: center; /* アイコンを中央揃えに */
  gap: 8px; /* ボタン間の隙間 */
  flex-direction: row; /* 横並びに変更 */
}

.icon-action-button {
  width: 40px;   /* ボタンの幅を固定 */
  height: 40px;  /* ボタンの高さを固定 */
  padding: 0;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* 円形にする */
}

/* アイコンボタン内のアイコンの右余白をリセット */
.icon-action-button .fas {
  margin-right: 0;
}

/* =================================== */
/* 結果表示モーダルのためのスタイル      */
/* =================================== */

/* 横幅の広いモーダル用のクラス */
.modal-content.large {
  max-width: 90%; /* 画面幅の90%まで広げる */
  width: 1200px;  /* ただし最大幅は1200px */
}

/* モーダル内のテーブルコンテナ */
.modal-body .table-container {
  max-height: 65vh; /* モーダルの高さの65%を最大高さに */
  overflow-y: auto; /* 内容が多ければスクロール */
}

/* 提出ステータス表示用のチップ */
.status-chip {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  text-align: center;
}

.status-chip.submitted {
  background-color: #28a745; /* 緑色 */
}

.status-chip.not-submitted {
  background-color: #6c757d; /* グレー */
}

/* 提出画像のアイコン */
#resultsTable .fa-file-image {
  font-size: 20px;
  color: #4A90E2;
  transition: transform 0.2s;
}
#resultsTable .fa-file-image:hover {
  transform: scale(1.2);
}

/* 「もっと見る」機能のスタイルを再定義 */
.toggle-link {
  color: #4A90E2;
  cursor: pointer;
  text-decoration: underline;
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.truncated-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

/* =================================== */
/* 課題一覧カードレイアウト用のスタイル   */
/* =================================== */

.prompt-card-container {
  display: grid;
  gap: 20px; /* カード間の余白 */
}

/* ▼▼▼ 修正点 ▼▼▼ */
.prompt-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  /* paddingを削除し、子要素で管理 */
  transition: box-shadow 0.2s ease-in-out;
  overflow: hidden; /* 角丸を子要素に適用させるため */
}

.prompt-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.prompt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #f9fafb; /* ヘッダーに薄い背景色を追加 */
  border-bottom: 1px solid #e5e7eb; /* 境界線を明確に */
  padding: 16px 24px; /* 上下の余白を調整 */
  /* 以前のpaddingとmarginを削除 */
}
/* ▲▲▲ 修正点ここまで ▲▲▲ */


.prompt-title {
  font-size: 1.25em;
  margin: 0;
  color: #111827;
}

.prompt-actions {
  display: flex;
  gap: 8px;
}

/* ▼▼▼ 修正点 ▼▼▼ */
.prompt-card-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 20px 24px; /* カード本体の余白をこちらに移動 */
}
/* ▲▲▲ 修正点ここまで ▲▲▲ */


.prompt-card-info {
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 6px;
  border-right: 1px solid #e5e7eb;
}

.prompt-card-info .info-item {
  margin-bottom: 15px;
}

.prompt-card-info .info-item label {
  font-size: 0.8em;
  font-weight: bold;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px 0;
}

.prompt-card-info .info-item p {
  margin: 0;
  font-size: 0.95em;
  color: #374151;
}

.prompt-card-details .details-section {
  background-color: #f9fafb; /* 背景色を追加 */
  border: 1px solid #f3f4f6;   /* 薄い枠線を追加 */
  border-radius: 6px;           /* 角を丸くする */
  padding: 16px;                /* 内側の余白 */
  margin-bottom: 15px;
}

.prompt-card-details h5 {
  font-size: 0.9em;
  color: #111827;
  margin: 0 0 8px 0;
  /* 見出し下の線は不要になったので削除 */
  border-bottom: none;
  padding-bottom: 0;
}


.content-text {
  font-size: 0.95em;
  line-height: 1.6;
  color: #374151;
}

/* =================================== */
/* トグルスイッチのスタイル             */
/* =================================== */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #5cb85c; /* 黄緑色 */
}

input:focus + .slider {
  box-shadow: 0 0 1px #5cb85c;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* 教員管理カードの基本レイアウト */
.teacher-management-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* 左にフォーム、右にリスト */
  gap: 20px;
  align-items: start;
}

.teacher-register-form, .teacher-list {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.teacher-register-form h4, .teacher-list h4 {
  margin-top: 0;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* 教員登録フォームの横並びレイアウト用 */
.teacher-register-form .form-row {
  display: flex;
  gap: 15px; /* 項目間のスペース */
}

/* ▼▼▼ 修正箇所 ▼▼▼ */
/* form-rowとform-groupの両方に共通のスタイルを適用 */
.teacher-register-form .form-row,
.teacher-register-form .form-group {
    margin-bottom: 15px;
}

.teacher-register-form .form-group {
  flex: 1; /* form-row内の項目を均等に配置 */
  display: flex;
  flex-direction: column;
}
/* ▲▲▲ 修正箇所 ▲▲▲ */

.teacher-register-form label {
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.teacher-register-form input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; 
  font-size: 16px;
}

.teacher-list .table-container {
    max-height: 400px;
    overflow-y: auto;
}

/* サブボタン（テンプレートダウンロードなど）のスタイル */
.submit-sub {
  background-color: #6c757d; /* グレー系の色 */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.submit-sub:hover {
  background-color: #5a6268;
  transform: translateY(-1px);
}

/* ボタン内のアイコンのスタイル */
.submit-sub i {
  margin-right: 8px;
}

/* admin-style.css */

/* 管理カードの基本スタイル */
.admin-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 30px;
  transition: all 0.3s ease-in-out;
}

.admin-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.admin-card h2 {
  text-align: left;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 15px;
  border-bottom: 2px solid #4A90E2; /* 既存のテーマカラー */
  font-size: 1.4em;
  color: #333;
  display: flex;
  align-items: center;
}

.emoji-icon {
  font-size: 1.5em;
  margin-right: 12px;
}

.card-description {
  font-size: 0.95em;
  color: #666;
  margin-bottom: 20px;
}

/* CSVアップロードエリアのスタイル */
#csvUploadArea {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  margin-top: 20px;
  background-color: #f9f9f9;
  transition: background-color 0.3s, border-color 0.3s;
}

/* ドラッグオーバー時のスタイル */
#csvUploadArea.dragover {
  background-color: #eef;
  border-color: #4A90E2;
}

#csvUploadArea p {
  margin: 10px 0;
  color: #555;
}

/* ファイル選択ボタンのスタイル */
#csvSelectBtn {
  background-color: #fff;
  color: #4A90E2;
  border: 1px solid #4A90E2;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}

#csvSelectBtn:hover {
  background-color: #f0f8ff;
}

/* アップロードボタンのスタイル */
#csvUploadBtn {
  margin-top: 20px;
  width: 100%;
  padding: 15px;
  font-size: 1.2em;
}

/* 処理結果の表示エリア */
#uploadStatus p {
  padding: 12px;
  border-radius: 4px;
  margin-top: 15px;
}

.status-success {
  background-color: #e6ffed;
  border-left: 5px solid #4CAF50;
  color: #2e7d32;
}

.status-error {
  background-color: #ffebee;
  border-left: 5px solid #d9534f;
  color: #c62828;
}

/* ▼▼▼ ここからUX改善のためのスタイルを追加 ▼▼▼ */

.year-selector-container {
  margin-bottom: 20px;
}

/* 生徒管理全体のコンテナ */
.student-management-container {
  display: grid;
  grid-template-columns: 240px 1fr; /* 左ペインの幅を固定 */
  gap: 20px;
  min-height: 500px;
}

/* 左ペイン: クラス一覧 */
.class-list-pane {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  overflow-y: auto;
}

.class-list-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.class-list-item {
  padding: 12px 15px;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 5px;
  font-weight: 500;
  color: #374151;
  transition: background-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
}
.class-list-item i {
  margin-right: 10px;
  color: #9ca3af;
}

.class-list-item:hover {
  background-color: #e5e7eb;
}

.class-list-item.active {
  background-color: #4A90E2;
  color: white;
  font-weight: bold;
}
.class-list-item.active i {
  color: white;
}


/* 右ペイン: 詳細表示エリア */
.details-pane {
  padding: 0;
}

/* タブナビゲーション */
.tab-navigation {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 20px;
}

.tab-link {
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.1em;
  color: #6b7280;
  margin-bottom: -2px; /* ボーダーに重なるように */
  border-bottom: 2px solid transparent;
}

.tab-link.active {
  color: #4A90E2;
  border-bottom: 2px solid #4A90E2;
  font-weight: bold;
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}


/* ヘッダー部分（タイトルや検索窓） */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.content-header h3 {
  margin: 0;
  font-size: 1.3em;
  color: #1f2937;
}

.student-actions {
  display: flex;
  gap: 10px;
}

#studentSearchInput {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  min-width: 250px;
}

/* ▼▼▼ ここからテーブルのデザイン修正 ▼▼▼ */

/* 生徒一覧テーブルのレイアウト調整 */
#studentTable {
  width: 100%;
  border-collapse: collapse;
}

#studentTable th, #studentTable td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle; /* 上下中央揃え */
}

#studentTable th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #4b5563;
}

/* カラム幅の指定 */
#studentTable .col-checkbox { width: 5%; }
#studentTable .col-student-id { width: 15%; }
#studentTable .col-name { width: 20%; }
#studentTable .col-class { width: 15%; }
#studentTable .col-email { width: 35%; }
#studentTable .col-actions { width: 10%; text-align: center; }


/* アイコンボタンのデザイン修正 */
.actions-cell {
    display: flex;
    justify-content: center;
    align-items: center; /* 上下中央揃え */
    gap: 10px;
}

.icon-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%; /* 丸い形 */
  /* ▼▼▼ 変更: アイコンを確実に中央揃えするためのスタイル ▼▼▼ */
  display: grid;
  place-items: center;
  /* ▲▲▲ 変更ここまで ▲▲▲ */
  transition: all 0.2s ease;
}

.icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.icon-button i {
  color: white;
  font-size: 14px;
}

/* 編集ボタン（黄緑） */
.icon-button.edit-student {
  background-color: #84cc16; /* lime-500 */
}
.icon-button.edit-student:hover {
  background-color: #a3e635; /* lime-400 */
}

/* 削除ボタン（赤） */
.icon-button.delete-student {
  background-color: #ef4444; /* red-500 */
}
.icon-button.delete-student:hover {
  background-color: #f87171; /* red-400 */
}

/* ▲▲▲ ここまでテーブルのデザイン修正 ▲▲▲ */

/* メールアドレス入力フィールドの高さ修正 */
input[type="email"] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  height: auto; /* 高さを自動調整 */
  line-height: normal; /* 行の高さを正常に */
}

/* アイコンボタンの基本スタイル */
.icon-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.icon-button i {
  color: white;
  font-size: 14px;
}

/* 編集ボタン（黄緑） */
.icon-button.edit-student,
.icon-button.edit-teacher,
.icon-button.edit-class {
  background-color: #84cc16;
}
.icon-button.edit-student:hover,
.icon-button.edit-teacher:hover,
.icon-button.edit-class:hover {
  background-color: #a3e635;
}

/* 削除ボタン（赤） */
.icon-button.delete-student,
.icon-button.delete-teacher,
.icon-button.delete-class {
  background-color: #ef4444;
}
.icon-button.delete-student:hover,
.icon-button.delete-teacher:hover,
.icon-button.delete-class:hover {
  background-color: #f87171;
}

/* 複製ボタン（青） */
.icon-button.copy-class {
  background-color: #17a2b8;
}
.icon-button.copy-class:hover {
  background-color: #138496;
}

/* アクションセルのレイアウト */
.actions-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* モーダル関連の追加スタイル */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px 30px;
  border: 1px solid #888;
  width: 90%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  position: relative;
}

.modal-content.large {
  max-width: 800px;
}

.modal-header {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #4A90E2;
  text-align: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1em;
}

.modal-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-footer button {
  width: auto;
  padding: 10px 20px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.form-row .form-group {
  flex: 1;
}

.help-text {
  font-size: 0.85em;
  color: #666;
  margin-top: 5px;
}

/* コンテンツヘッダーの検索ボックスとボタン配置 */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.content-header input[type="text"] {
  flex: 1;
  max-width: 400px;
}

/* 年度セレクターコンテナ */
.year-selector-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.year-selector-container label {
  margin: 0;
  font-weight: bold;
}

.year-selector-container select {
  margin: 0;
}

    /* ランチャーへの戻るボタン */
    .back-to-launcher {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background-color: #6c757d;
        color: white;
        text-decoration: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .back-to-launcher:hover {
        background-color: #5a6268;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .back-to-launcher i {
        font-size: 16px;
    }

    /* ヘッダーアクションの間隔調整 */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        .back-to-launcher span {
            display: none; /* 小画面ではアイコンのみ表示 */
        }
        
        .back-to-launcher {
            padding: 8px 12px;
        }
    }

/* ▼▼▼ ここから採点基準分割機能のCSS ▼▼▼ */

    .grading-type-selector {
        margin: 20px 0;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .radio-group {
        display: flex;
        gap: 30px;
        margin-top: 10px;
    }

    .radio-option {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .radio-option input[type="radio"] {
        margin-right: 8px;
        width: auto;
    }

    .radio-option span {
        font-size: 14px;
        color: #333;
    }

    .grading-section {
        margin-top: 20px;
    }

    .question-split-controls {
        background: #f0f8ff;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .btn-ai-split {
        margin-top: 15px;
        padding: 12px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-ai-split:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    .btn-ai-split:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .questions-container {
        background: white;
        border: 2px solid #e1e4e8;
        border-radius: 12px;
        padding: 20px;
        margin-top: 20px;
    }

    .questions-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #4A90E2;
    }

    .questions-header h4 {
        margin: 0;
        color: #2c3e50;
    }

    .total-score-display {
        background: #4A90E2;
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
    }

    .questions-list {
        max-height: 600px;
        overflow-y: auto;
        padding-right: 10px;
    }

    .question-item {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        position: relative;
    }

    .question-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .question-number {
        background: #4A90E2;
        color: white;
        padding: 4px 12px;
        border-radius: 4px;
        font-weight: 600;
    }

    .question-controls {
        display: flex;
        gap: 10px;
    }

    .btn-icon {
        background: none;
        border: none;
        color: #6c757d;
        cursor: pointer;
        font-size: 18px;
        padding: 5px;
        transition: color 0.2s;
    }

    .btn-icon:hover {
        color: #4A90E2;
    }

    .btn-icon.delete:hover {
        color: #dc3545;
    }

    .question-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .question-field {
        display: flex;
        flex-direction: column;
    }

    .question-field.full-width {
        grid-column: 1 / -1;
    }

    .question-field label {
        font-size: 12px;
        color: #6c757d;
        margin-bottom: 5px;
    }

    .question-field input,
    .question-field textarea {
        padding: 8px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 14px;
    }

    .question-field input[type="number"] {
        width: 100px;
    }

    .btn-add-question {
        width: 100%;
        margin-top: 15px;
        padding: 12px;
        background: white;
        border: 2px dashed #4A90E2;
        border-radius: 8px;
        color: #4A90E2;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-add-question:hover {
        background: #f0f8ff;
    }

    .bulk-grading-settings {
        margin-top: 20px;
        padding: 15px;
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 8px;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .checkbox-label input[type="checkbox"] {
        width: auto;
        margin-right: 10px;
    }

    .help-text {
        font-size: 12px;
        color: #6c757d;
        margin-top: 5px;
    }

    /* ローディングスピナー */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* 編集ボタンのアイコンを白にする */
.prompt-card .prompt-actions .icon-action-button.edit i.fa-edit {
    color: white !important;
}

/* ホバー時も白を維持 */
.prompt-card .prompt-actions .icon-action-button.edit:hover i.fa-edit {
    color: white !important;
}

.validation-warnings h4 { 
    color: #856404; 
    margin: 15px 0 10px; 
}
.status-badge.warning {
    background: #fff3cd;
    color: #856404;
}

/* 編集ボタンのスタイル（黄緑色） */
.icon-action-button.edit-prompt {
  background-color: #8bc34a;  /* ライトグリーン（黄緑） */
  color: white;
  border: 1px solid #7cb342;
}

.icon-action-button.edit-prompt:hover {
  background-color: #7cb342;  /* ホバー時は少し濃い緑 */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(139, 195, 74, 0.3);
}

.icon-action-button.edit-prompt:active {
  background-color: #689f38;  /* クリック時はさらに濃い緑 */
  transform: translateY(0);
}

/* 一括採点の非公開表示 */
.visibility-disabled-text {
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.visibility-disabled-text i {
  color: #999;
}

/* ステータスチップの追加スタイル */
.status-chip.graded {
  background-color: #4caf50;
  color: white;
}

.status-chip.not-graded {
  background-color: #9e9e9e;
  color: white;
}

.status-chip.needs-review {
  background-color: #ff9800;
  color: white;
}

.status-chip.error {
  background-color: #f44336;
  color: white;
}

/* 警告・情報テキスト */
.warning-text {
  color: #ff9800;
  font-size: 13px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.info-text {
  color: #2196f3;
  font-size: 14px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* バッジのスタイル調整 */
.badge.badge-bulk {
  background-color: #9c27b0;
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

/* 削除ボタンのフロート修正 */
.icon-action-button.delete {
  background-color: #f44336;
  color: white;
  border: 1px solid #d32f2f;
  transition: all 0.3s ease;
}

.icon-action-button.delete:hover {
  background-color: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.icon-action-button.delete:active {
  background-color: #b71c1c;
  transform: translateY(0);
}

/* 詳細セクションのスタイル */
.details-section {
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 10px;
}

.details-section:last-child {
  margin-bottom: 0;
}

.details-section h5 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.details-section .content-text {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* 設問リストコンパクト表示 */
.question-list-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-item-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.question-item-compact .question-title {
  color: #333;
  font-weight: 500;
}

.question-item-compact .question-points {
  color: #4A90E2;
  font-weight: 600;
  white-space: nowrap;
}

/* 折りたたみテキストのスタイル */
.truncated-content {
  position: relative;
}

.truncated-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  transition: all 0.3s ease;
}

.truncated-text.expanded {
  -webkit-line-clamp: unset !important;
  overflow: visible;
}

.toggle-link {
  display: inline-block;
  margin-top: 5px;
  color: #4A90E2;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

.toggle-link:hover {
  color: #357abd;
  text-decoration: underline;
}