/* 花はな Study Manager - Main Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

:root {
  --primary-color: #FF6B9D;
  --secondary-color: #FFA8C5;
  --text-dark: #333;
  --text-light: #666;
  --border-color: #ddd;
  --bg-white: #fff;
  --bg-gray: #f5f5f5;
}

/* ログイン画面 */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-box {
  background: var(--bg-white);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-title {
  font-size: 28px;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-dark);
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* select プルダウン共通スタイル（form-input と同等サイズ） */
.form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-color, #ddd);
  border-radius: 8px;
  font-size: 15px;
  color: var(--text-dark, #333);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: auto;
}

.form-select:focus {
  outline: none;
  border-color: var(--primary-color, #5c6bc0);
  box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.15);
}

/* パスワード表示切替ウィジェット */
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-input {
  flex: 1;
  padding-right: 46px; /* ボタン幅分の余白 */
}

.pw-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0;
  transition: background 0.2s;
  /* タップしやすいようにmin-size確保 */
  min-width: 38px;
  min-height: 38px;
}

.pw-toggle-btn:hover,
.pw-toggle-btn:focus {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

.pw-eye {
  font-size: 18px;
  line-height: 1;
  display: block;
  user-select: none;
}

/* readonly入力欄：編集不可であることを視覚的に示す */
.form-input[readonly] {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
  border-color: #ddd;
}

.form-input[readonly]:focus {
  border-color: #ddd;
  outline: none;
}

.btn {
  width: 100%;
  padding: 14px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn:hover {
  background: #FF5088;
}

.btn-secondary {
  background: var(--secondary-color);
}

.btn-secondary:hover {
  background: #FF92B5;
}

.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

/* ダッシュボードレイアウト */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

/* サイドバー（共通） */
.sidebar {
  width: 280px;          /* 先生用デフォルト幅（PC） */
  background: var(--bg-white);
  border-right: 1px solid var(--border-color);
  position: fixed;
  height: 100vh;                          /* fallback for old browsers */
  height: 100dvh;                         /* iOS Safari: アドレスバーを除いた実高さ */
  overflow-y: auto;
  overscroll-behavior-y: contain;         /* サイドバー内スクロールをbodyに漏らさない */
  -webkit-overflow-scrolling: touch;      /* iOS Safari: 慣性スクロールを有効化 */
  z-index: 150;
  transition: transform 0.3s;
}

/* 生徒・保護者用サイドバー: 元の幅に戻す */
.sidebar--narrow {
  width: 220px;
}

/* モバイルではデフォルトで非表示 */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.mobile-visible {
    transform: translateX(0);
  }

  /* スマホ時: 先生サイドバー（.sidebar--narrowでないもの）を少し狭くする */
  .sidebar:not(.sidebar--narrow) {
    width: 220px;
  }
}

/* PC幅では常に表示 */
@media (min-width: 769px) {
  .sidebar {
    transform: translateX(0);
  }
}

.sidebar-header {
  padding: 20px;
  background: var(--primary-color);
  color: white;
}

/* モバイル時：ハンバーガーボタン（top:15px, 約50px高）と重ならないよう padding-top を確保 */
@media (max-width: 768px) {
  .sidebar-header {
    padding-top: 72px;
  }
}

.sidebar-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
}

.sidebar-user {
  font-size: 16px;
  opacity: 0.9;
  /* 長い名前が折り返してもボタンと干渉しないよう word-break 設定 */
  word-break: break-all;
}

.sidebar-menu {
  list-style: none;
  padding: 10px 0;
}

.menu-item {
  padding: 15px 20px;
  color: var(--text-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--bg-gray);
}

.menu-item.active {
  background: var(--bg-gray);
  color: var(--primary-color);
  font-weight: bold;
  border-right: 3px solid var(--primary-color);
}

.menu-icon {
  margin-right: 12px;
  font-size: 18px;
}

/* メインコンテンツ（先生用デフォルト） */
/* PC: margin-left をサイドバー幅（280px）に合わせて調整（従来310px→280px、30px分コンテンツ幅が広がる） */
.main-content {
  flex: 1;
  margin-left: 280px;
  padding: 18px 20px;
  min-height: 100vh;
}

/* 生徒・保護者用: サイドバー幅に合わせた余白 */
.main-content--narrow {
  margin-left: 220px;
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    padding-top: 70px;
  }
  .main-content--narrow {
    margin-left: 0;
  }
}

.page-header {
  background: var(--bg-white);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .page-header {
    padding: 15px;
  }
}

.page-title {
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.page-description {
  color: var(--text-light);
  font-size: 14px;
}

/* カード */
.card {
  background: var(--bg-white);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.card-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--text-dark);
  font-weight: bold;
}

/* テーブル */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table th {
  background: var(--bg-gray);
  font-weight: bold;
  color: var(--text-dark);
}

.table tr:hover {
  background: var(--bg-gray);
}

/* モバイルメニュートグル */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  z-index: 160;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
}

@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none;
  }
}

/* グリッドレイアウト */
.grid {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* バッジ */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.badge-primary {
  background: var(--secondary-color);
  color: var(--primary-color);
}

.badge-success {
  background: #c8e6c9;
  color: #2e7d32;
}

/* 小テストバッジ（コントラスト向上） */
.badge-mini-test {
  background: #1565c0;
  color: #ffffff;
}

/* モーダル */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: var(--bg-white);
  padding: 30px;
  border-radius: 15px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

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

.modal-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-dark);
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-light);
}

/* 空状態テキスト */
.empty-state {
  color: var(--text-light);
  font-size: 14px;
  padding: 8px 0;
}

/* 授業ログカード */
.lesson-log-card {
  border-left: 4px solid var(--primary-color);
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.log-date-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.log-date {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
}

.log-class-label {
  font-size: 15px;
  color: var(--primary-color);
  font-weight: bold;
  background: #fff0f6;
  padding: 2px 10px;
  border-radius: 20px;
}

.log-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-field {
  display: flex;
  gap: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}

.log-field-label {
  color: var(--text-light);
  min-width: 120px;
  flex-shrink: 0;
}

.log-field-value {
  color: var(--text-dark);
  flex: 1;
}

.log-teacher-note .log-field-label {
  color: #e57373;
}

/* ログカード アクションボタン群 */
.log-action-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* 編集ボタン（小） */
.btn-edit-sm {
  background: #fff;
  color: #1565c0;
  border: 1px solid #1565c0;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-edit-sm:hover {
  background: #1565c0;
  color: #fff;
}

/* 削除ボタン（小） */
.btn-danger-sm {
  background: #fff;
  color: #e53935;
  border: 1px solid #e53935;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-danger-sm:hover {
  background: #e53935;
  color: #fff;
}

/* textarea の form-input */
textarea.form-input {
  resize: vertical;
  min-height: 72px;
  line-height: 1.6;
}

/* 準備中ページ */
.coming-soon-card {
  text-align: center;
  padding: 60px 20px;
}

.coming-soon-inner {
  max-width: 400px;
  margin: 0 auto;
}

.coming-soon-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.coming-soon-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.coming-soon-text {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.coming-soon-sub {
  font-size: 13px;
  color: #aaa;
}

/* ダッシュボード用授業ログカード（コンパクト版） */
.dash-log-card {
  border-left: 3px solid var(--primary-color);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fafafa;
  border-radius: 8px;
}

.dash-log-card:last-child {
  margin-bottom: 0;
}

.dash-log-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.dash-log-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-log-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}

.dash-log-label {
  color: var(--text-light);
  min-width: 72px;
  flex-shrink: 0;
  font-size: 12px;
}

.dash-log-value {
  color: var(--text-dark);
  flex: 1;
}

/* ダッシュボードカードのフッター導線 */
.card-footer-link {
  display: block;
  text-align: right;
  font-size: 13px;
  color: var(--primary-color);
  text-decoration: none;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.card-footer-link:hover {
  text-decoration: underline;
}

/* ========== 授業枠マスタ カード ========== */
.cm-card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.cm-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.cm-card--inactive {
  opacity: 0.6;
  background: #f8f8f8;
}

.cm-card-left {
  width: 5px;
  min-height: 72px;
  background: var(--primary-color);
  flex-shrink: 0;
}

.cm-card--inactive .cm-card-left {
  background: #bdbdbd;
}

.cm-card-body {
  flex: 1;
  padding: 14px 16px;
  min-width: 0;
}

.cm-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.cm-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cm-detail-item {
  font-size: 13px;
  color: var(--text-light);
}

.cm-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.cm-badge-active {
  background: #e8f5e9;
  color: #2e7d32;
}

.cm-badge-inactive {
  background: #f5f5f5;
  color: #757575;
}

.cm-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  flex-shrink: 0;
}

/* 停止/再開ボタン */
.btn-toggle-sm {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-toggle-deactivate {
  background: #fff;
  color: #757575;
  border: 1px solid #bdbdbd;
}

.btn-toggle-deactivate:hover {
  background: #757575;
  color: #fff;
}

.btn-toggle-activate {
  background: #fff;
  color: #2e7d32;
  border: 1px solid #2e7d32;
}

.btn-toggle-activate:hover {
  background: #2e7d32;
  color: #fff;
}

/* トースト通知 */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  width: auto;
  max-width: 320px;
  min-width: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.toast-success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.toast-success::before {
  content: '✓';
  font-weight: bold;
  color: #43a047;
  flex-shrink: 0;
}

.toast-error {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

.toast-error::before {
  content: '✕';
  font-weight: bold;
  color: #e53935;
  flex-shrink: 0;
}

/* ========== 宿題セクション（先生・生徒・保護者共通） ========== */
.hw-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
}

.hw-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.hw-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.btn-add-hw {
  padding: 4px 12px;
  font-size: 13px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn-add-hw:hover {
  opacity: 0.85;
}

.hw-empty {
  font-size: 13px;
  color: var(--text-light);
  padding: 4px 0 8px;
}

/* 宿題カード */
.hw-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.hw-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.hw-card-left {
  width: 4px;
  background: #5C6BC0;  /* 📘 indigo */
  flex-shrink: 0;
}

.hw-card-body {
  flex: 1;
  padding: 10px 14px;
  min-width: 0;
}

.hw-content {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 4px;
}

.hw-due-date {
  display: inline-block;
  font-size: 12px;
  color: #E65100;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 6px;
}

/* 宿題カード アクションボタン */
.hw-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  flex-shrink: 0;
  justify-content: center;
}

/* 画像追加ボタン（小） */
.btn-img-add-sm {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: #5C6BC0;
  border: 1px solid #5C6BC0;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.btn-img-add-sm:hover {
  background: #5C6BC0;
  color: #fff;
}

/* 宿題画像グリッド */
.hw-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.hw-image-wrap {
  position: relative;
  display: inline-block;
}

.hw-image-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  display: block;
}

.hw-img-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e53935;
  color: #fff;
  border: none;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: background 0.2s;
}

.hw-img-delete-btn:hover {
  background: #b71c1c;
}

/* 宿題セクション（生徒・保護者 読み取り専用） */
.hw-section-readonly {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
}

.hw-section-readonly .hw-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
  margin-bottom: 10px;
}

.hw-card-readonly {
  display: flex;
  align-items: stretch;
  background: #f9f9ff;
  border: 1px solid #c5cae9;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.hw-card-readonly .hw-card-left {
  background: #5C6BC0;
}

.hw-card-readonly .hw-card-body {
  padding: 10px 14px;
  flex: 1;
  min-width: 0;
}

/* ========== ダッシュボード 宿題表示（コンパクト） ========== */
.dash-hw-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}

/* 固定ラベル「📘 宿題」 */
.dash-hw-label {
  font-size: 13px;
  font-weight: 700;
  color: #3949AB;
  margin-bottom: 5px;
  display: block;
}

.dash-hw-row {
  font-size: 12px;
  color: var(--text-dark);
  margin-bottom: 4px;
  line-height: 1.5;
  word-break: break-word;
  padding-left: 4px;
}

.dash-hw-content {
  display: block;
  word-break: break-word;
}

.dash-hw-due {
  display: block;
  color: #E65100;
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}

.dash-hw-more {
  font-size: 11px;
  color: var(--text-light);
  margin: 2px 0 0;
  padding-left: 4px;
}

/* ========== 宿題提出チェック（先生用） ========== */
.hc-section {
  margin: 0 0 10px 4px;
  padding: 8px 12px;
  background: #f3f4ff;
  border-left: 3px solid #7986CB;
  border-radius: 0 6px 6px 0;
}

.hc-loading,
.hc-error,
.hc-empty {
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
  padding: 2px 0;
}

.hc-error { color: #c62828; }

.hc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 30px;
}

.hc-row:last-child { margin-bottom: 0; }

.hc-student-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  min-width: 80px;
  flex-shrink: 0;
}

.hc-btn-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* 提出チェックボタン共通 */
.hc-status-btn {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid #e0e0e0;
  background: #fafafa;
  color: #9e9e9e;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.hc-status-btn:hover {
  border-color: #bdbdbd;
  color: #616161;
  background: #f5f5f5;
}

.hc-status-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 未提出（選択中）: 赤系 — 明確に「まだ出していない」 */
.hc-btn-pending.hc-active {
  background: #c62828;
  color: #fff;
  border-color: #b71c1c;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(198,40,40,0.35);
}

/* 提出済み（選択中）: 緑系 — 完了 */
.hc-btn-submitted.hc-active {
  background: #2e7d32;
  color: #fff;
  border-color: #1b5e20;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(46,125,50,0.35);
}

/* 居残り提出（選択中）: オレンジ系 — 要注意 */
.hc-btn-late.hc-active {
  background: #e65100;
  color: #fff;
  border-color: #bf360c;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(230,81,0,0.35);
}

/* ========== 提出状況バッジ（生徒・保護者 読み取り専用） ========== */
.sl-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.sl-status-pending {
  background: #f5f5f5;
  color: #757575;
  border: 1px solid #e0e0e0;
}

.sl-status-submitted {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.sl-status-late {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

.sl-check-section {
  margin-top: 5px;
  margin-bottom: 4px;
}

.sl-check-row {
  font-size: 12px;
  color: var(--text-dark);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ダッシュボードの提出状況行 */
.dash-check-row {
  font-size: 11px;
  color: var(--text-dark);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* ========== お知らせ機能 ========== */

/* 対象学年バッジ */
.an-grade-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.an-grade-all    { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.an-grade-grade1 { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }
.an-grade-grade2 { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.an-grade-grade3 { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }

/* お知らせ日付 */
.an-date {
  font-size: 12px;
  color: var(--text-light);
}

/* ========== 先生用 お知らせカード ========== */
.an-card {
  margin-bottom: 16px;
}

.an-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}

.an-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.an-card-actions {
  display: flex;
  gap: 4px;
}

.an-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
  word-break: break-word;
}

.an-content-preview {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  margin-bottom: 10px;
}

/* お知らせ画像グリッド（先生側） */
.an-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.an-img-thumb-wrap {
  position: relative;
  display: inline-block;
}

.an-img-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.an-img-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.an-img-delete-btn:hover { background: #b71c1c; }

.an-img-actions { margin-top: 4px; }

/* アイコンボタン（編集/削除） */
.btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 16px;
  transition: background 0.15s;
}
.btn-icon:hover { background: #f5f5f5; }
.btn-icon-danger:hover { background: #ffebee; }

/* ========== 生徒/保護者 お知らせ一覧ページ ========== */
.an-view-card {
  margin-bottom: 16px;
}

.an-view-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.an-view-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  word-break: break-word;
}

.an-view-content {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.7;
  word-break: break-word;
  margin-bottom: 12px;
}

.an-view-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.an-view-img {
  max-width: 100%;
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* ========== ダッシュボード お知らせカード ========== */
.dash-notice-card {
  padding: 4px 0;
}

.dash-notice-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.dash-notice-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
  word-break: break-word;
}

.dash-notice-body {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.5;
  word-break: break-word;
  margin-bottom: 6px;
}

.dash-notice-more {
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 600;
  margin-top: 4px;
}

/* お知らせフォームエラー表示 */
.an-form-error {
  color: #c62828;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #ffebee;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
}

/* ========== サイドバー未読バッジ ========== */
.notice-badge {
  display: inline-block;
  margin-left: 5px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}

/* ダッシュボード用お知らせカード区切り */
.dash-notice-card + .dash-notice-card {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #eee);
}

/* ============================================================
   定期テスト管理 - 先生画面
   ============================================================ */

/* 学校グループ */
.test-school-group {
  margin-bottom: 32px;
}
.test-school-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
}

/* 年度グループ */
.test-year-group {
  margin-bottom: 20px;
}
.test-year-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 10px;
}

/* テストカードグリッド */
.test-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* テストカード */
.test-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.test-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.test-type-label {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
}
.test-sub-badge {
  font-size: 11px;
  background: #f3e5f5;
  color: #7b1fa2;
  border-radius: 10px;
  padding: 2px 8px;
}
.test-card-info {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.test-score-count {
  font-size: 12px;
  color: var(--text-light);
}
.test-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ボタン小サイズ */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  width: auto !important;
  border-radius: 6px;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}
.btn-outline:hover {
  background: var(--primary-color);
  color: #fff;
}
.btn-danger {
  background: #e53935;
  color: #fff;
  border: 1px solid #e53935;
}
.btn-danger:hover {
  background: #c62828;
}

/* スコアモーダル（横幅広め） */
.score-modal-content {
  max-width: 900px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}

/* 平均点入力フォーム */
.avg-form {}
.avg-grade-section {
  margin-bottom: 20px;
  padding: 14px;
  background: #f8f8f8;
  border-radius: 8px;
}
.avg-grade-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.avg-subjects-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.avg-subject-item .form-label {
  font-size: 12px;
}
.avg-input {
  padding: 6px 8px !important;
  font-size: 13px !important;
}

/* 成績入力テーブル */
.score-form {}
.score-grade-section {
  margin-bottom: 28px;
}
.score-grade-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.score-table-wrapper {
  overflow-x: auto;
}
.score-table {
  border-collapse: collapse;
  min-width: 900px;
  font-size: 12px;
  width: 100%;
}
.score-table th,
.score-table td {
  border: 1px solid #e0e0e0;
  padding: 4px 5px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.score-table th {
  background: #f5f5f5;
  font-weight: bold;
  font-size: 11px;
}
.score-th-name {
  min-width: 90px;
  text-align: left !important;
}
.score-td-name {
  text-align: left !important;
  font-weight: 500;
  padding-left: 8px;
}
.score-input {
  width: 54px;
  padding: 3px 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}
.score-input-rank {
  width: 46px;
}
.score-input-total {
  width: 58px;
}
.score-input-dev {
  width: 54px;
}

/* ============================================================
   定期テスト管理 - 生徒/保護者画面
   ============================================================ */

.test-year-heading {
  font-size: 17px;
  font-weight: bold;
  color: var(--text-dark);
  margin: 24px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
/* 年度見出し内の学年ラベル（中1など） */
.test-year-grade-label {
  font-size: 13px;
  font-weight: normal;
  color: #7c4dff;
  margin-left: 6px;
}
.test-year-heading-sm {
  font-size: 15px;
  margin-top: 16px;
}

/* 生徒テストカード */
.student-test-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.07);
}
.student-test-card-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
}
.student-test-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
}

/* スコア表示セクション */
.score-view-section {
  margin-bottom: 16px;
}
.score-section-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 8px;
}
.score-view-table-wrapper {
  overflow-x: auto;
}
.score-view-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  /* モバイルで絡めるよう最小幅を指定せず、overflow-x: auto でスクロール (テーブルラッパー側に設定済み) */
}
.score-view-table th,
.score-view-table td {
  border: 1px solid #e0e0e0;
  padding: 7px 8px;
  text-align: center;
  white-space: nowrap;
}
.score-view-table th {
  background: #f5f5f5;
  font-weight: bold;
  font-size: 11px;
  color: var(--text-light);
}
.score-subject-label {
  text-align: left !important;
  font-weight: 600;
  padding-left: 12px !important;
}
.score-val {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
}
.score-max {
  font-size: 11px;
  font-weight: normal;
  color: var(--text-light);
}
.score-rank {
  color: var(--primary-color);
  font-weight: bold;
}
.score-avg {
  color: var(--text-light);
  font-size: 13px;
}
.score-max-col {
  color: var(--text-light);
  font-size: 13px;
}

/* 合計行 */
.score-total-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 14px;
  background: #fff8f9;
  border: 1px solid #ffd6e4;
  border-radius: 8px;
}
.score-total-label {
  font-size: 13px;
  color: var(--text-light);
  font-weight: bold;
}
.score-total-val {
  font-size: 20px;
  font-weight: bold;
  color: var(--primary-color);
}
.score-total-rank {
  font-size: 14px;
  color: var(--primary-color);
  font-weight: bold;
}
.score-deviation {
  font-size: 14px;
  color: #1976d2;
  font-weight: bold;
}

/* 保護者 - 生徒セクション */
.parent-student-section {
  margin-bottom: 36px;
}
.parent-student-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #f5f5f5;
  border-left: 4px solid var(--primary-color);
  border-radius: 0 8px 8px 0;
}

/* ============================================================
   成績入力 行分けUI（先生画面）
   score-entry-block: 生徒1名分のブロック
   score-row-layout: 教科名・点数・順位・合計 の行グリッド
   ============================================================ */

/* 生徒1名ブロック */
.score-entry-block {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.score-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
}
.score-entry-grade {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-light);
  background: #f5f5f5;
  border-radius: 12px;
  padding: 2px 10px;
}
.score-entry-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
}

/* セクション見出し（5教科 / 副教科） */
.score-section-label {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-light);
  margin: 12px 0 6px;
}

/* 行レイアウトコンテナ */
.score-row-layout {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

/* 各行の共通スタイル */
.score-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e8e8e8;
}
.score-row:last-child {
  border-bottom: none;
}

/* 左端ラベル列（「教科」「点数」「順位」「合計」） */
.score-row-head {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-light);
  background: #f8f8f8;
  border-right: 1px solid #e0e0e0;
  padding: 6px 4px;
  writing-mode: horizontal-tb;
  text-align: center;
}

/* 各データセル */
.score-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-right: 1px solid #eeeeee;
  min-width: 0;
}
.score-cell:last-child {
  border-right: none;
}

/* ヘッダー行（教科名） */
.score-row-header {
  background: #f5f5f5;
}
.score-cell-head {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
}

/* 点数行・順位行の背景色 */
.score-row-score {
  background: #fff;
}
.score-row-rank {
  background: #fafafa;
}

/* 合計行 */
.score-row-total {
  background: #fff8f9;
}

/* 入力フィールド共通 */
.score-inp {
  width: 100%;
  max-width: 72px;
  padding: 7px 6px;
  font-size: 15px;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  text-align: center;
  background: #fff;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
}
.score-inp::-webkit-outer-spin-button,
.score-inp::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.score-inp:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255,107,157,0.15);
}

/* 点数入力（やや太字） */
.score-inp-score {
  font-weight: bold;
}

/* 順位入力 */
.score-inp-rank {
  color: #7b1fa2;
}

/* 偏差値入力 */
.score-inp-dev {
  color: #1976d2;
}

/* 合計点自動表示セル（横長） */
.score-cell-total-wide {
  flex: 2;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.score-total-auto-label {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
}
.score-total-auto-val {
  font-size: 22px;
  font-weight: bold;
  color: var(--primary-color);
  min-width: 48px;
  text-align: center;
}

/* 小ラベル（合計順位・偏差値の上） */
.score-small-label {
  font-size: 10px;
  color: var(--text-light);
  margin-bottom: 2px;
  white-space: nowrap;
}

/* 平均点入力フォーム 行レイアウト */
.avg-row-layout {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 4px;
}
.avg-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e8e8e8;
}
.avg-row:last-child {
  border-bottom: none;
}
.avg-row-head {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-light);
  background: #f8f8f8;
  border-right: 1px solid #e0e0e0;
  padding: 6px 4px;
  text-align: center;
}
.avg-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-right: 1px solid #eeeeee;
}
.avg-cell:last-child {
  border-right: none;
}
.avg-row-label {
  background: #f5f5f5;
}
.avg-cell-label {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
}
/* 平均点入力フィールド（サイズ拡大） */
.avg-input {
  width: 100%;
  max-width: 80px;
  padding: 7px 6px !important;
  font-size: 15px !important;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  text-align: center;
  -moz-appearance: textfield;
}
.avg-input::-webkit-outer-spin-button,
.avg-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.avg-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* スコアモーダルフッター */
.score-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--border-color);
  margin-top: 16px;
}

/* 副教科ブロック（列数に応じて縮小） */
.score-row-layout-sub .score-row-head {
  flex: 0 0 48px;
}

/* トースト通知（重複定義を削除 → 行788の定義を使用） */

/* ============================================================
   書類管理 (Document Management)
   ============================================================ */

/* コントロールバー */
.doc-controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* 生徒ラベル */
.doc-student-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
}

/* フォルダリスト */
.doc-folder-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* フォルダセクション */
.doc-folder-section {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* フォルダヘッダー */
.doc-folder-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8f9fa;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.doc-folder-header:hover {
  background: #f0f2f5;
}

.doc-folder-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.doc-folder-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.doc-folder-count {
  font-size: 12px;
  color: var(--text-secondary);
  background: #e9ecef;
  padding: 2px 8px;
  border-radius: 10px;
}
.doc-folder-toggle {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

/* アップロードボタン（先生用） */
.doc-upload-btn {
  margin-left: auto;
  font-size: 13px;
  padding: 5px 12px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.doc-upload-btn:hover {
  background: var(--primary-dark, #e55a8a);
}

/* フォルダボディ */
.doc-folder-body {
  padding: 8px 0;
}

/* 空状態テキスト */
.doc-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 12px 16px;
  margin: 0;
}

/* 書類アイテム */
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f2f5;
  transition: background 0.12s;
}
.doc-item:last-child {
  border-bottom: none;
}
.doc-item:hover {
  background: #fafafa;
}

.doc-item-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.doc-item-info {
  flex: 1;
  min-width: 0;
}
.doc-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-item-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* ファイル入力 */
.doc-file-input {
  padding: 6px;
}

/* 保護者用 子別セクション */
.doc-parent-section {
  margin-bottom: 24px;
}
.doc-parent-student-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
}

/* ============================================================
   モーダル（書類アップロード）
   ============================================================ */
#upload-modal .form-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 600px) {
  .doc-item {
    flex-wrap: wrap;
  }
  .doc-item-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
  }
  .doc-folder-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .doc-upload-btn {
    margin-left: 0;
    order: 10;
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   お知らせ添付ファイル - PDF 表示（先生・生徒・保護者共通）
   ============================================================ */

/* 先生用 PDF アイテム（編集画面） */
.an-pdf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.an-pdf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff8f0;
  border: 1px solid #ffd699;
  border-radius: 8px;
  flex-wrap: wrap;
}

.an-pdf-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.an-pdf-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.an-pdf-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-pdf-date {
  font-size: 11px;
  color: var(--text-secondary);
}

.an-pdf-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* 生徒・保護者用 PDF 表示（閲覧ページ） */
.an-view-pdf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.an-view-pdf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #fff8f0;
  border: 1px solid #ffd699;
  border-radius: 8px;
}

.an-view-pdf-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-view-pdf-open {
  flex-shrink: 0;
}

/* ファイル追加モーダルのプレビュー */
.an-preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.an-preview-pdf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff8f0;
  border: 1px solid #ffd699;
  border-radius: 6px;
  margin-bottom: 4px;
}

.an-preview-pdf-name {
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* レスポンシブ調整 */
@media (max-width: 600px) {
  .an-pdf-item {
    flex-wrap: wrap;
  }
  .an-pdf-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }
  .an-view-pdf-item {
    flex-wrap: wrap;
    gap: 6px;
  }
  .an-view-pdf-open {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   お知らせ画像モーダル（拡大表示）
   ============================================================ */
.an-view-img {
  cursor: pointer;
}
.an-view-img:hover {
  opacity: 0.85;
  transition: opacity 0.15s;
}

.ann-img-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.ann-img-modal.active {
  display: flex;
}

.ann-img-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  cursor: pointer;
}

.ann-img-modal-inner {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 900px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ann-img-modal-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: block;
}

.ann-img-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 2;
  flex-shrink: 0;
}
.ann-img-modal-close:hover {
  background: #f0f0f0;
}

@media (max-width: 600px) {
  .ann-img-modal-inner {
    max-width: 98vw;
  }
  .ann-img-modal-close {
    top: -10px;
    right: -4px;
  }
}

/* ============================================================
   PDF専用ビューアモーダル
   ============================================================ */

/* オーバーレイ全体 */
.ann-pdf-viewer-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;           /* 画像モーダル(2000)より前面 */
  align-items: center;
  justify-content: center;
}
.ann-pdf-viewer-modal.active {
  display: flex;
}

/* 背景暗幕 */
.ann-pdf-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

/* ビューア本体 */
.ann-pdf-viewer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 860px);
  height: min(92vh, 820px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

/* ヘッダーバー */
.ann-pdf-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f7f7f7;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  gap: 8px;
}

/* ファイル名 */
.ann-pdf-viewer-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ×閉じるボタン */
.ann-pdf-viewer-close {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  min-width: 80px;         /* スマホで押しやすいサイズ */
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: #e53935;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.ann-pdf-viewer-close:hover,
.ann-pdf-viewer-close:active {
  background: #c62828;
}

/* コンテンツエリア（loading / iframe / error を切り替え） */
.ann-pdf-viewer-body {
  flex: 1;
  position: relative;
  overflow: hidden;            /* PC: absolute配置の子要素を収めるため維持 */
  -webkit-overflow-scrolling: touch; /* iOS Safari スクロール補助 */
}

/* 読み込み中スピナー */
.ann-pdf-viewer-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fafafa;
  color: #666;
  font-size: 14px;
}

/* スピナーアニメーション */
.ann-pdf-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #e0e0e0;
  border-top-color: var(--primary-color, #FF6B9D);
  border-radius: 50%;
  animation: ann-pdf-spin 0.8s linear infinite;
}
@keyframes ann-pdf-spin {
  to { transform: rotate(360deg); }
}

/* エラー表示 */
.ann-pdf-viewer-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff3f3;
  color: #c62828;
  font-size: 14px;
  font-weight: 600;
  padding: 24px;
  text-align: center;
}

/* iframe 本体 */
.ann-pdf-viewer-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 別タブで開くボタン（ヘッダー内） */
.ann-pdf-open-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  min-height: 36px;
  border: 1px solid #1565c0;
  border-radius: 8px;
  background: #fff;
  color: #1565c0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.ann-pdf-open-tab:hover,
.ann-pdf-open-tab:active {
  background: #e3f2fd;
  color: #0d47a1;
}

/* スマホ最適化 */
@media (max-width: 600px) {
  .ann-pdf-viewer-inner {
    width: 100vw;
    height: 100dvh;          /* dynamic viewport height */
    border-radius: 0;
  }
  .ann-pdf-viewer-header {
    padding: 8px 10px;
    gap: 6px;
  }
  .ann-pdf-viewer-title {
    font-size: 13px;
  }
  .ann-pdf-viewer-close {
    padding: 8px 12px;
    min-width: 72px;
    font-size: 13px;
  }
  /* スマホではiframeのスクロールをiframe自身で処理させる */
  .ann-pdf-viewer-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ann-pdf-viewer-iframe {
    position: relative;     /* absoluteを解除してiframe自体の高さを有効化 */
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  .ann-pdf-open-tab {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 34px;
  }
}

/* ============================================================
   テスト日程管理 & カウントダウン UI
   ============================================================ */

/* ── カウントダウンバッジ共通 ── */
.ut-countdown {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.ut-countdown-future {
  background: #fff3e0;
  color: #c62828;
  border: 2px solid #ef5350;
  text-shadow: 0 0 1px rgba(198,40,40,0.15);
}
.ut-countdown-today {
  background: #e8f5e9;
  color: #1b5e20;
  border: 2px solid #66bb6a;
}
.ut-countdown-ongoing {
  background: #e3f2fd;
  color: #0d47a1;
  border: 2px solid #42a5f5;
}
/* スマホ重点: 大きめ表示の「あと○日」ブロック */
.ut-countdown-large {
  display: block;
  font-size: 22px;
  font-weight: 800;
  padding: 6px 18px;
  margin-top: 8px;
  letter-spacing: 0.02em;
  text-align: center;
  border-radius: 10px;
}
/* large の future は背景をやや強調 */
.ut-countdown-large.ut-countdown-future {
  background: #fff8f0;
  color: #bf360c;
  border: 2px solid #ffb74d;
}
.ut-countdown-large.ut-countdown-today {
  background: #f1f8e9;
  color: #2e7d32;
  border: 2px solid #81c784;
}
.ut-countdown-large.ut-countdown-ongoing {
  background: #e8f4fd;
  color: #0d47a1;
  border: 2px solid #64b5f6;
}

/* ── 先生管理ページ: カード ── */
.ut-card {
  margin-bottom: 12px;
}
.ut-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.ut-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ut-grade-badge {
  display: inline-block;
  padding: 4px 13px;
  background: var(--primary-light, #FFE0EE);
  color: var(--primary-color, #FF6B9D);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
}
.ut-type-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #f3e5f5;
  color: #4a0072;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
}
.ut-card-actions {
  display: flex;
  gap: 6px;
}
.ut-card-school {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}
.ut-card-date {
  font-size: 16px;
  font-weight: 600;
  color: #444;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ut-card-registered {
  font-size: 11px;
  color: #bbb;
}

/* ── 先生管理ページ: モーダル内の学校チェックボックス ── */
.ut-school-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.ut-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  font-size: 14px;
  transition: background 0.15s;
  user-select: none;
}
.ut-check-label:hover {
  background: var(--primary-light, #FFE0EE);
  border-color: var(--primary-color, #FF6B9D);
}
.ut-check-label input[type="checkbox"] {
  width: auto;
  accent-color: var(--primary-color, #FF6B9D);
  margin: 0;
}

/* ── ダッシュボード: 先生向けリスト ── */
.ut-dash-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color, #f0f0f0);
}
.ut-dash-item:last-child {
  border-bottom: none;
}
.ut-dash-school {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  width: 100%;
  margin-bottom: 4px;
}
.ut-dash-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.ut-dash-grade-badge {
  display: inline-block;
  padding: 4px 13px;
  background: var(--primary-light, #FFE0EE);
  color: var(--primary-color, #FF6B9D);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
}
.ut-dash-type {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.ut-dash-date {
  font-size: 16px;
  color: #444;
  font-weight: 600;
}

/* ── ダッシュボード: 生徒・保護者向けメインカード ── */
.ut-dash-main-card {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  border: 1px solid #ffcc80;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.ut-dash-main-grade {
  font-size: 18px;
  font-weight: 700;
  color: #e65100;
  margin-bottom: 4px;
}
.ut-dash-main-date {
  font-size: 15px;
  color: #5d4037;
  margin-bottom: 6px;
}
.ut-dash-main-school {
  font-size: 11px;
  color: #a1887f;
  margin-top: 6px;
}

/* ── ダッシュボード: 生徒・保護者向けサブリスト ── */
.ut-dash-rest {
  margin-top: 8px;
}
.ut-dash-rest-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--border-color, #f0f0f0);
  font-size: 13px;
  color: var(--text-light, #666);
}
.ut-dash-rest-date {
  color: var(--text-color, #444);
}

/* ── フォームエラー ── */
.form-error {
  color: #e53935;
  font-size: 12px;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .ut-dash-main-card {
    padding: 14px 14px;
  }
  .ut-dash-main-grade {
    font-size: 17px;
  }
  /* スマホで「あと○日」をさらに目立たせる */
  .ut-countdown-large {
    font-size: 26px;
    padding: 8px 16px;
    margin-top: 10px;
  }
  /* スマホではリスト内カウントダウンをやや小さく（折り返し防止） */
  .ut-dash-item .ut-countdown {
    font-size: 13px;
    padding: 3px 9px;
  }
  .ut-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  /* スマホ: 詳細ページのカード内要素を適度に縮小（折り返し防止） */
  .ut-grade-badge {
    font-size: 14px;
    padding: 3px 10px;
  }
  .ut-type-badge {
    font-size: 14px;
    padding: 3px 9px;
  }
  .ut-card-school {
    font-size: 14px;
  }
  .ut-card-date {
    font-size: 14px;
  }
}

/* ============================================================
   チェックリスト UI
   ============================================================ */

/* ── テンプレート一覧カード ── */
.ct-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e8e0f0;
  margin-bottom: 10px;
  transition: box-shadow 0.2s;
}
.ct-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.ct-item-inactive {
  opacity: 0.5;
}
.ct-item-sort {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.ct-sort-btn {
  background: #f0e8ff;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 22px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: #7c4dff;
  transition: background 0.15s;
}
.ct-sort-btn:hover { background: #d8b4fe; }
.ct-item-body {
  flex: 1;
  min-width: 0;
}
.ct-item-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.ct-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.ct-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: #e8f5e9;
  color: #2e7d32;
}
.ct-badge-parent { background: #ede7f6; color: #6a1b9a; }  /* 保護者確認 */
.ct-badge-teacher { background: #fff3e0; color: #e65100; }  /* 先生確認 */
.ct-badge-quiz   { background: #f3e5f5; color: #7b1fa2; }   /* 小テスト */
.ct-badge-other  { background: #ede7f6; color: #6a1b9a; }   /* 旧その他→保護者確認と同色 */
.ct-badge-submit-teacher { background: #fff8e1; color: #f57f17; } /* 成果物＋先生確認 */
.ct-item-note {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}
.ct-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ct-btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  cursor: pointer;
  transition: background 0.15s;
}
.ct-btn-sm:hover { background: #ede7f6; }
.ct-btn-delete:hover { background: #ffebee; border-color: #e57373; color: #c62828; }

/* ── 生徒/保護者チェックリスト ── */
.cl-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0f0;
  padding: 16px;
  margin-bottom: 12px;
}
.cl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.cl-subject-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #fce4ec;
  color: #c2185b;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.cl-test-info {
  font-size: 13px;
  color: #666;
}
/* チェックリストアイテム: 3行レイアウト
   行1: タイトル  行2: 補足説明（あれば）  行3: ステータス + 期限 */
.cl-item-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0 7px 0;
  border-top: 1px solid #f5f0fa;
}
.cl-item-title {
  font-size: 13px;
  color: #333;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: break-word;
}
.cl-item-note {
  font-size: 11px;
  color: #888;
  font-style: italic;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
/* 行3: ステータスバッジ + 期限 横並び */
.cl-item-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cl-item-deadline-inline {
  display: inline-flex;
  align-items: center;
}
.cl-item-progress {
  font-size: 13px;
  color: #7c4dff;
  font-weight: 600;
  white-space: nowrap;
}
/* 確認方法バッジ（生徒・保護者カード 3行目の先頭） */
.cl-vt-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  background: #ede7f6;
  color: #6a1b9a;
  border: 1px solid #ce93d8;
  letter-spacing: 0.01em;
}
.cl-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
/* ステータスバッジ色（未着手=グレー / 進行中=オレンジ / 完了=グリーン） */
.cl-status-0 { background: #f0f0f0; color: #888; border: 1px solid #ddd; }
.cl-status-1 { background: #fff3e0; color: #d84315; border: 1px solid #ffcc80; }
.cl-status-2 { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.cl-verification-label {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}
.cl-note {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-top: 1px;
  line-height: 1.3;
}

/* ── 進捗カウンター（先生更新ボタン付き） ── */
.cl-progress-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cl-progress-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ce93d8;
  background: #f3e5f5;
  color: #7b1fa2;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  line-height: 1;
  padding: 0;
}
.cl-progress-btn:hover { background: #e1bee7; }
.cl-progress-count {
  font-size: 15px;
  font-weight: 700;
  color: #7b1fa2;
  min-width: 36px;
  text-align: center;
}

/* ── 先生向け進捗モーダルテーブル ── */
.cl-progress-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cl-progress-table th {
  background: #f5f0fa;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #e8e0f0;
}
.cl-progress-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0ebf8;
  vertical-align: middle;
}
.cl-progress-table tr:hover td { background: #faf5ff; }

@media (max-width: 600px) {
  .ct-item { flex-wrap: wrap; }
  .ct-item-actions { width: 100%; justify-content: flex-end; }
  .cl-progress-table { font-size: 12px; }
  .cl-progress-table th, .cl-progress-table td { padding: 6px 8px; }
}

/* ============================================================
   チェックリスト進捗管理ページ (/teacher/checklist-progress)
   cp- prefix
   ============================================================ */

/* ── /teacher/checklists の案内バナー ── */
.cp-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ede7f6 0%, #f3e5f5 100%);
  border: 1px solid #ce93d8;
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
  text-decoration: none;
  color: inherit;
}
.cp-banner:hover {
  box-shadow: 0 4px 16px rgba(124,77,255,0.18);
  transform: translateY(-1px);
}
.cp-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.cp-banner-body {
  flex: 1;
}
.cp-banner-title {
  font-size: 15px;
  font-weight: 700;
  color: #5c35cc;
  margin-bottom: 2px;
}
.cp-banner-desc {
  font-size: 12px;
  color: #7c4dff;
  line-height: 1.5;
}
.cp-banner-arrow {
  font-size: 20px;
  color: #9575cd;
  flex-shrink: 0;
}

/* ── テスト選択カード ── */
.cp-selector-card {
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0f0;
}
.cp-selector-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}
.cp-selector-icon {
  font-size: 16px;
}
.cp-test-select {
  width: 100%;
  max-width: 520px;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #d1c4e9;
  background: #fafafa;
}
.cp-test-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f3effe;
  border-radius: 8px;
  font-size: 13px;
}
.cp-meta-label {
  font-weight: 600;
  color: #5c35cc;
}
.cp-meta-dates {
  color: #888;
  font-size: 12px;
}

/* ── フィルタ行 ── */
.cp-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ede7f6;
}
.cp-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cp-filter-select {
  min-width: 140px;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid #d1c4e9;
  background: #fafafa;
}
.cp-filter-sync {
  margin-left: auto;
}
.cp-sync-btn {
  background: #26a69a;
  color: #fff;
  padding: 8px 18px;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  width: auto;
}
.cp-sync-btn:hover { background: #00897b; }
.cp-sync-btn:disabled { background: #aaa; cursor: default; }

/* ── 同期フィードバック ── */
.cp-sync-feedback {
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.cp-sync-feedback--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}
.cp-sync-feedback--error {
  background: #ffeaea;
  color: #c62828;
  border: 1px solid #ffcdd2;
}
.cp-sync-feedback--info {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #bbdefb;
}

/* ── プレースホルダー ── */
.cp-placeholder {
  padding: 60px 20px;
  text-align: center;
}
.cp-placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}
.cp-placeholder-text {
  font-size: 15px;
  color: #aaa;
}

/* ── 空のケース ── */
.cp-empty {
  padding: 48px 24px;
  text-align: center;
  background: #faf8ff;
  border-radius: 12px;
  border: 1px dashed #d1c4e9;
}

/* ── サマリーバー ── */
.cp-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0f0;
  margin-bottom: 16px;
}
.cp-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  gap: 2px;
}
.cp-summary-num {
  font-size: 22px;
  font-weight: 800;
  color: #7c4dff;
  line-height: 1;
}
.cp-summary-num.cp-summary-done {
  color: #2e7d32;
}
.cp-summary-lbl {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
}

/* ── 生徒カード ── */
.cp-student-card {
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.cp-student-card.cp-student-done {
  border-color: #a5d6a7;
  background: #f9fff9;
}
.cp-student-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f5ff;
  border-bottom: 1px solid #ede8f8;
}
.cp-student-card.cp-student-done .cp-student-header {
  background: #f1f8e9;
  border-bottom-color: #c8e6c9;
}
.cp-student-name {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-student-grade {
  display: inline-block;
  padding: 2px 8px;
  background: #ede7f6;
  color: #5c35cc;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.cp-student-card.cp-student-done .cp-student-grade {
  background: #c8e6c9;
  color: #2e7d32;
}
.cp-student-progress-summary {
  font-size: 13px;
}
.cp-prog-text {
  color: #888;
}
.cp-all-done-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

/* ── 各チェック項目の行 ── */
.cp-items {
  padding: 4px 0;
}
.cp-item-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid #f5f0fa;
}
.cp-item-row:last-child {
  border-bottom: none;
}
/* 1行目: タイトル + 期限 + 進捗コントロール */
.cp-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* タイトルラップ: 教科バッジ + タイトル文字を横並び */
.cp-item-title-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.cp-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
/* 教科バッジ（承認作業の邪魔にならない小サイズ） */
.cp-subject-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}
/* タイトルの右に並ぶ期限バッジ（インライン） */
.cp-item-deadline-inline .cl-deadline {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
}
/* 2行目: 補足説明（あるときのみ） */
.cp-item-sub {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 2px;
}
.cp-item-ver {
  font-size: 11px;
  color: #7c4dff;
  background: #ede7f6;
  padding: 1px 7px;
  border-radius: 8px;
}
.cp-item-note {
  font-size: 11px;
  color: #888;
  font-style: italic;
}
/* cp-item-info は不要になったが互換のため残す */
.cp-item-info {
  flex: 1;
  min-width: 0;
}

/* ── ドットコントロール（cp-item-top 右端） ── */
.cp-item-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;   /* タイトル・期限の右端に寄せる */
}
.cp-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ce93d8;
  background: #f3e5f5;
  color: #7b1fa2;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  line-height: 1;
  padding: 0;
  user-select: none;
}
.cp-btn:hover:not(:disabled) {
  background: #e1bee7;
  border-color: #ba68c8;
  transform: scale(1.08);
}
.cp-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}
.cp-btn-minus {
  border-color: #ef9a9a;
  background: #fff5f5;
  color: #c62828;
}
.cp-btn-minus:hover:not(:disabled) {
  background: #ffebee;
  border-color: #e57373;
}
.cp-btn-plus {
  border-color: #80cbc4;
  background: #e0f2f1;
  color: #00695c;
}
.cp-btn-plus:hover:not(:disabled) {
  background: #b2dfdb;
  border-color: #4db6ac;
}

/* ── 進捗カウント表示 ── */
.cp-progress-display {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 48px;
  justify-content: center;
}
.cp-progress-cur {
  font-size: 20px;
  font-weight: 800;
  color: #5c35cc;
  line-height: 1;
}
.cp-progress-sep {
  font-size: 15px;
  color: #bbb;
}
.cp-progress-tot {
  font-size: 14px;
  color: #999;
  font-weight: 600;
}

/* ── ステータスバッジ（進捗ページ用） ── */
.cp-status-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 48px;
  text-align: center;
}

/* ── page-description ── */
.page-description {
  font-size: 13px;
  color: #888;
  margin: 4px 0 0;
}

/* ============================================================
   レスポンシブ調整
   ============================================================ */
@media (max-width: 600px) {
  .cp-banner { flex-wrap: wrap; }
  .cp-banner-arrow { display: none; }
  .cp-summary { gap: 8px; justify-content: center; }
  .cp-summary-stat { min-width: 56px; }
  .cp-summary-num { font-size: 18px; }
  /* cp-item-row はすでに column なのでスマホでも同一構造を維持 */
  .cp-item-top { flex-wrap: wrap; gap: 6px; }
  .cp-item-ctrl { margin-left: 0; width: 100%; justify-content: flex-start; }
  .cp-test-select { max-width: 100%; }
  .cp-student-header { flex-wrap: wrap; gap: 6px; }
  .cp-btn { width: 40px; height: 40px; font-size: 20px; }
  .cp-progress-cur { font-size: 18px; }
  .cp-filter-row { flex-direction: column; align-items: stretch; }
  .cp-filter-select { min-width: 100%; }
  .cp-filter-sync { margin-left: 0; }
  .cp-sync-btn { width: 100%; }
}

/* ============================================================
   先生画面: 進捗ドットUI  (cp-dot / cp-dots-wrap)
   クリック可能なドットで「何回目まで完了か」を直感的に表示
   ============================================================ */
.cp-dots-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
/* 共通ドット */
.cp-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  flex-shrink: 0;
  padding: 0;
  outline: none;
  position: relative;
}
.cp-dot:focus-visible {
  box-shadow: 0 0 0 3px rgba(124,77,255,0.35);
}
.cp-dot:not(:disabled):hover {
  transform: scale(1.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.cp-dot:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
/* 完了済みドット（色付き） */
.cp-dot-filled {
  background: #43a047;
  box-shadow: 0 1px 4px rgba(67,160,71,0.35);
}
.cp-dot-filled::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
/* 未完了ドット（空） */
.cp-dot-empty {
  background: #fff;
  border: 2px solid #bdbdbd;
}
.cp-dot-empty:not(:disabled):hover {
  border-color: #7c4dff;
  background: #f3e5f5;
}

/* 先生画面 cp-item-row のステータス色帯（左ボーダー） */
.cp-item-row--0 { border-left: 3px solid #ccc; }
.cp-item-row--1 { border-left: 3px solid #ff9800; }
.cp-item-row--2 { border-left: 3px solid #43a047; }

/* ============================================================
   生徒・保護者画面: 読み取り専用ドット (cl-dot / cl-dots-wrap)
   ============================================================ */
.cl-dots-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* 共通ドット（読み取り専用: クリック不可） */
.cl-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
/* 完了済み: 緑 */
.cl-dot-filled {
  background: #43a047;
}
.cl-dot-filled::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}
/* 未完了: グレー輪郭 */
.cl-dot-empty {
  background: #fff;
  border: 1.5px solid #bdbdbd;
}

/* 生徒・保護者 cl-item-row のステータス色帯 */
.cl-item-row--0 {
  border-left: 3px solid #ccc;
  padding-left: 8px !important;
}
.cl-item-row--1 {
  border-left: 3px solid #ff9800;
  padding-left: 8px !important;
  background: rgba(255,152,0,0.04);
}
.cl-item-row--2 {
  border-left: 3px solid #43a047;
  padding-left: 8px !important;
  background: rgba(67,160,71,0.04);
}


/* ============================================================
   レスポンシブ: 小画面では折り返し
   ============================================================ */
@media (max-width: 600px) {
  .cp-dots-wrap { gap: 4px; }
  .cp-dot { width: 30px; height: 30px; }
  .cp-dot-filled::after { font-size: 15px; }
  .cl-item-row { padding: 6px 0; }
  .cl-item-title { font-size: 12px; }
  .cl-item-note { font-size: 10px; }
  .cl-item-footer { gap: 4px; }
  /* 一括登録補足欄・期限欄はスマホでは下に折る */
  .ct-bulk-row { flex-wrap: wrap; }
  .ct-bulk-cls-col { flex: 0 0 88px; }
  .ct-bulk-note-col { flex: 1 1 100%; }
  .ct-bulk-deadline-col { flex: 0 0 80px; }
}

/* ============================================================
   チェックリストテンプレート管理モーダル追加スタイル
   (ct-modal-wide / ct-mode-tab / ct-subject-select /
    ct-note-textarea / ct-bulk / 確認方法バッジ新値)
   ============================================================ */

/* --- チェックリスト登録/一覧: コンテンツ幅を広げる --- */
/* 先生画面の .card に対して最大幅を広げてテンプレート一覧を見やすくする */
/* ct-page-card は通常のカードと同じ横幅を維持し、自然な配置を保つ */
.ct-page-card {
  /* max-width を削除: 左寄りになる原因だった */
}

/* --- 広めモーダル --- */
/* モーダル横幅を広げる（PC で入力しやすく） */
.ct-modal-wide {
  max-width: 860px;
  width: 96%;
}

/* --- 教科プルダウン: 大きめフォント・高さ --- */
.ct-subject-select {
  font-size: 16px !important;
  padding: 10px 14px !important;
  height: auto !important;
  min-height: 46px;
  border: 1.5px solid #b39ddb;
  border-radius: 8px;
  background: #faf8ff;
  color: #333;
  cursor: pointer;
}
.ct-subject-select:focus {
  border-color: #7c4dff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(124,77,255,0.15);
}

/* --- 補足説明テキストエリア: 初期3行・縦横リサイズ可 --- */
.ct-note-textarea {
  min-height: 72px;   /* 約3行分 */
  min-width: 100%;    /* 横も広げやすいよう初期幅を最大に */
  resize: both;       /* 縦横両方リサイズ可 */
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
}

/* --- モード切替タブ --- */
.ct-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 2px solid #ede7f6;
  padding-bottom: 2px;
}
.ct-mode-tab {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: background 0.15s, color 0.15s;
}
.ct-mode-tab:hover { background: #f3effe; color: #7c4dff; }
.ct-mode-tab--active {
  background: #ede7f6;
  color: #5c35cc;
  border-bottom: 2px solid #7c4dff;
}

/* --- 一括登録フォーム --- */
.ct-bulk-header {
  display: flex;
  gap: 6px;
  padding: 4px 6px;
  background: #f3effe;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
}
.ct-bulk-col { display: flex; align-items: center; }
.ct-bulk-cls-col      { flex: 0 0 90px; min-width: 0; } /* 分類列 */
.ct-bulk-title-col    { flex: 3; min-width: 0; }
.ct-bulk-count-col    { flex: 0 0 0; overflow: hidden; padding: 0; margin: 0; display: none; }
.ct-bulk-vt-col       { flex: 2; min-width: 0; }
.ct-bulk-note-col     { flex: 3; min-width: 0; } /* 補足欄を少し広く */
.ct-bulk-deadline-col { flex: 0 0 68px; text-align: center; line-height: 1.3; } /* 期限（何日前）列 */

.ct-bulk-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.ct-bulk-input {
  font-size: 13px !important;
  padding: 6px 8px !important;
}
.ct-bulk-del-btn {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e0d0ff;
  background: #faf8ff;
  color: #c62828;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.ct-bulk-del-btn:hover { background: #ffebee; border-color: #e57373; }
.ct-bulk-add-row {
  margin-top: 6px;
  padding: 5px 14px;
  font-size: 13px;
  border: 1px dashed #b39ddb;
  border-radius: 6px;
  background: transparent;
  color: #7c4dff;
  cursor: pointer;
  transition: background 0.15s;
}
.ct-bulk-add-row:hover { background: #f3effe; }

/* --- 確認方法バッジ（新値） --- */
.ct-badge-submit-teacher { background: #e8f5e9; color: #2e7d32; }
.ct-badge-submit-quiz    { background: #e3f2fd; color: #1565c0; }

/* ============================================================
   確認方法プルダウン: 教科と同じくらいの見やすさに揃える
   ============================================================ */
#ct-classification,
.ct-bulk-cls-col select,
.ct-bulk-input.ct-bulk-cls-col,
#ct-verification-type,
.ct-bulk-vt-col select,
.ct-bulk-input.ct-bulk-vt-col {
  font-size: 14px !important;
  padding: 8px 10px !important;
  height: auto !important;
  min-height: 40px;
  border-radius: 7px;
}

/* ============================================================
   生徒/保護者: 教科セクション区切り
   ============================================================ */
.cl-subject-section {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8e0f0;
}
.cl-subject-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.cl-subject-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.cl-subject-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cl-subject-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cl-complete-count {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}

/* ダッシュボード: 「他○項目」残件表示 */
.cl-more-items {
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #7c4dff;
  background: #f3effe;
  border-radius: 20px;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   チェックリスト履歴ページ (checklist-history)
   ============================================================ */

/* 履歴カード */
.ch-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8e0f0;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ch-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0eafa;
}
.ch-test-label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.ch-date-range {
  font-size: 11px;
  color: #999;
}

/* 教科行 */
.ch-subjects {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-subject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ch-subject-left {
  flex: 0 0 auto;
}
.ch-subject-right {
  flex: 1 1 auto;
  text-align: right;
}

/* 教科バッジ */
.ch-subject-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* 完了数/合計数 */
.ch-count {
  font-size: 14px;
  font-weight: 600;
  color: #555;
}
.ch-count-complete {
  color: #2e7d32;
}

/* 先生用生徒セレクト */
.ch-student-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ch-student-selector label {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.ch-student-select {
  flex: 1 1 200px;
  min-width: 180px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}

/* 「履歴を見る」ナビゲーションリンク */
.cl-history-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #7c4dff;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #d1b3ff;
  background: #f9f5ff;
  font-weight: 600;
  transition: background 0.15s;
}
.cl-history-link:hover {
  background: #ede7ff;
  text-decoration: none;
}

@media (max-width: 600px) {
  .ch-card {
    padding: 12px;
  }
  .ch-test-label {
    font-size: 14px;
  }
  .ch-count {
    font-size: 13px;
  }
}

/* ============================================================
   チェックリスト 期限表示スタイル
   ============================================================ */

/* ── 承認期間説明ブロック（一覧ページ上部） ── */
/* ============================================================
   ⑦ チェックリストのルール説明ブロック
   ============================================================ */
.cl-rules-block {
  background: #f0f4ff;
  border: 1px solid #b3c4f0;
  border-left: 4px solid #4a6cf7;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #2d3a6b;
  line-height: 1.7;
  /* モバイルあふれ防止: 横スクロールが出ないように幅を拘束 */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  /* 日本語は語境界で自然改行、どうしても収まらない場合のみ文字間で折り返す */
  word-break: normal;
  overflow-wrap: break-word;
}
.cl-rules-title {
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
  color: #1a2e6b;
}
.cl-rules-lead {
  margin: 0 0 8px;
  /* 本文相当（見出しより小さく補足より大きい）*/
  font-size: 12.5px;
  color: #3a4a7b;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.65;
}
/* 「もっと見る」ボタン */
.cl-rules-more-btn {
  /* inline-block だとコンテナ幅を超えることがある → block + max-width で安全に */
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 4px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #4a6cf7;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: normal;      /* 長いラベルでも折り返す */
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
.cl-rules-more-btn:hover {
  background: #dde4ff;
}
/* 展開内容 */
.cl-rules-detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d0d9f5;
  word-break: normal;
  overflow-wrap: break-word;
}
.cl-rules-section-title {
  font-weight: 700;
  font-size: 13px;
  margin: 10px 0 6px;
  color: #1a2e6b;
}
.cl-rules-list {
  margin: 0 0 8px;
  /* padding-left を小さめに：狭い画面でもリスト幅を節約 */
  padding-left: 16px;
  box-sizing: border-box;
}
.cl-rules-list li {
  margin-bottom: 5px;
  font-size: 12px;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.65;
}
.cl-rules-note {
  /* 補足は本文より一段小さく、視覚的な階層を保つ */
  font-size: 11px;
  color: #7a8ab5;
  margin: 3px 0 0;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ============================================================
   ⑧ 教科別進捗ブロック
   ============================================================ */
.cl-progress-block {
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cl-progress-block-title {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin-bottom: 10px;
}
.cl-prog-total {
  font-size: 12px;
  color: #7c4dff;
  font-weight: 600;
}
.cl-prog-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cl-prog-row {
  display: grid;
  grid-template-columns: 3.5em 1fr 3.5em;
  align-items: center;
  gap: 8px;
}
.cl-prog-subject {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.cl-prog-bar-wrap {
  background: #f0f0f0;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
}
.cl-prog-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s;
}
.cl-prog-count {
  font-size: 11px;
  color: #555;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   ⑤ 教科フィルターバー（生徒・保護者詳細ページ）
   ============================================================ */
.cl-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  margin-bottom: 6px;
}
.cl-filter-btn {
  padding: 4px 12px;
  border: 1px solid #d0c4e8;
  border-radius: 20px;
  background: #fff;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cl-filter-btn:hover {
  background: #f3e5f5;
}
.cl-filter-btn--active {
  background: #7c4dff;
  color: #fff;
  border-color: #7c4dff;
}

/* ============================================================
   ⑥ 教科見出し（強調）
   ============================================================ */
.cl-subject-heading {
  padding: 8px 14px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px 6px 0 0;
}
.cl-subject-heading-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.cl-subject-card {
  border: 1px solid #e8e0f0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.cl-subject-card-body {
  padding: 0 0 4px;
}
.cl-subgroup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 10px;
  margin: 4px 8px 2px;
  border-radius: 3px;
}
/* 承認期限ヒント（復習・予習：テスト週間初日まで・テスト：前日まで） */
.cl-subgroup-hint {
  font-size: 10px;
  font-weight: 500;
  color: #888;
  background: rgba(255,255,255,0.7);
  padding: 1px 6px;
  border-radius: 8px;
  /* nowrap はモバイルでヒントが画面外にはみ出す原因になるため削除 */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.cl-subgroup-items {
  padding: 0 8px;
}

/* ============================================================
   ⑨ ダッシュボード: コンパクトアイテム
   ============================================================ */
.cl-dash-item {
  padding: 7px 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  border: 1px solid #f0ebf8;
  background: #faf8ff;
}
.cl-dash-item-header {
  font-size: 11px;
  margin-bottom: 3px;
  min-height: 0;
}
.cl-dash-item-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cl-dash-subj-badge {
  font-size: 11px !important;
  padding: 2px 7px !important;
}
.cl-dash-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  word-break: break-all;
}
.cl-dash-deadline {
  display: inline-flex;
}

/* 後方互換: cl-approval-info (旧要素が残っている場合のスタイル) */
.cl-approval-info {
  background: #f0f4ff;
  border: 1px solid #b3c4f0;
  border-left: 4px solid #4a6cf7;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #2d3a6b;
  line-height: 1.6;
}
.cl-approval-info-title {
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.cl-approval-info-list {
  margin: 0;
  padding-left: 18px;
}
.cl-approval-info-list li {
  margin-bottom: 2px;
}

/* 期限表示 共通ベース */
.cl-deadline {
  font-size: 11px;   /* 12→11: コンパクト化 */
  margin-top: 0;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* 通常: 期限まで4日以上 */
.cl-deadline-normal {
  color: #555;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}

/* 近接: 期限まで3日以内 */
.cl-deadline-soon {
  color: #e65100;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  font-weight: 700;
}

/* 当日 */
.cl-deadline-today {
  color: #bf360c;
  background: #fbe9e7;
  border: 1px solid #ff8a65;
  font-weight: 700;
}

/* 期限超過 × 未着手 (赤) */
.cl-deadline-overdue-critical {
  color: #b71c1c;
  background: #ffebee;
  border: 1px solid #ef9a9a;
  font-weight: 700;
}

/* 期限超過 × 進行中 (オレンジ) */
.cl-deadline-overdue-progress {
  color: #e65100;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  font-weight: 700;
}

/* テンプレート一覧での期限表示 */
.ct-item-deadline {
  font-size: 12px;
  color: #7c4dff;
  margin-top: 4px;
  padding: 1px 0;
}

/* ============================================================
   テスト日程 アーカイブ関連スタイル
   ============================================================ */

/* アーカイブ済みバッジ */
.ut-archived-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  background: #eee;
  border-radius: 10px;
  border: 1px solid #ddd;
  letter-spacing: 0.02em;
}

/* アーカイブ済みカード: 薄いグレー表示 */
.ut-card-archived {
  opacity: 0.65;
  background: #fafafa;
  border-left: 3px solid #ccc !important;
}
.ut-card-archived .ut-card-school,
.ut-card-archived .ut-card-date,
.ut-card-archived .ut-type-badge,
.ut-card-archived .ut-grade-badge {
  color: #aaa;
}

/* アーカイブ済みセクション区切り */
.ut-archived-section {
  margin-top: 20px;
}
.ut-archived-section-label {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

/* アーカイブ表示トグル行 */
.ut-archive-toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.ut-archive-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  user-select: none;
}
.ut-archive-toggle-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* アーカイブボタン */
.btn-icon-archive {
  font-size: 12px;
  padding: 4px 8px;
  color: #888;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-icon-archive:hover {
  background: #ececec;
  color: #555;
}

/* 元に戻すボタン */
.btn-icon-restore {
  font-size: 12px;
  padding: 4px 8px;
  color: #2e7d32;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-icon-restore:hover {
  background: #c8e6c9;
}

/* ============================================================
   通知機能 スタイル
   /student/notifications  /parent/notifications
   ============================================================ */

/* サイドバー未読バッジ */
.ntf-sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  line-height: 1;
  vertical-align: middle;
}

/* ヘッダー未読バッジ */
.ntf-unread-header-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #fff3e0;
  color: #e65100;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid #ffcc80;
}

/* 通知リスト */
#ntf-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 通知1件 */
.ntf-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
}
.ntf-item:first-child {
  border-radius: 8px 8px 0 0;
}
.ntf-item:last-child {
  border-radius: 0 0 8px 8px;
  border-bottom: none;
}
.ntf-item:only-child {
  border-radius: 8px;
  border-bottom: none;
}
.ntf-item:hover {
  background: #fafafa;
}
.ntf-item.ntf-unread {
  background: #fff8f0;
}
.ntf-item.ntf-unread:hover {
  background: #fff3e0;
}

/* 通知アイコン */
.ntf-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-top: 2px;
}
.ntf-icon-wrap.ntf-pink    { background: #fce4ec; }
.ntf-icon-wrap.ntf-blue    { background: #e3f2fd; }
.ntf-icon-wrap.ntf-green   { background: #e8f5e9; }
.ntf-icon-wrap.ntf-orange  { background: #fff3e0; }
.ntf-icon-wrap.ntf-red     { background: #ffebee; }
.ntf-icon-wrap.ntf-purple  { background: #f3e5f5; }

/* 通知コンテンツ */
.ntf-content {
  flex: 1;
  min-width: 0;
}
.ntf-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.ntf-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}
.ntf-item.ntf-unread .ntf-title {
  color: #1a1a1a;
}
.ntf-badge-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
}
.ntf-body {
  font-size: 12px;
  color: #666;
  margin: 2px 0 4px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ntf-date {
  font-size: 11px;
  color: #aaa;
}

/* 空状態 */
.ntf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  color: #bbb;
}
.ntf-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.ntf-empty-text {
  font-size: 14px;
  color: #aaa;
}

/* モバイル */
@media (max-width: 600px) {
  .ntf-item {
    padding: 12px;
    gap: 10px;
  }
  .ntf-icon-wrap {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .ntf-title {
    font-size: 13px;
  }
}

/* ============================================================
   成績グラフ共通スタイル
   ============================================================ */

/* グラフカード */
.grade-graph-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 20px;
  margin-bottom: 20px;
}
.grade-graph-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 0 0 14px;
}
.grade-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #444;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e8e8e8;
}

/* チャートコンテナ */
.grade-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.grade-chart-wrap-pie {
  max-width: 340px;
}

/* 前回比較行 */
.grade-compare-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 14px;
}
.grade-compare-prev { color: #888; }
.grade-compare-arrow { color: #bbb; }
.grade-compare-curr { color: #333; }
.grade-compare-diff {
  font-weight: 700;
  font-size: 15px;
  padding: 2px 8px;
  border-radius: 12px;
}
.grade-up   { color: #2ecc71; background: #e8f5e9; }
.grade-down { color: #e74c3c; background: #ffebee; }
.grade-same { color: #888; background: #f5f5f5; }

/* 学校平均比較テーブル */
.avg-col-subject { font-weight: 600; white-space: nowrap; }
.avg-col-score,
.avg-col-avg { color: #555; white-space: nowrap; }
.avg-col-diff {
  font-weight: 700;
  white-space: nowrap;
}
.avg-above { color: #2ecc71; }
.avg-below { color: #e74c3c; }
.avg-same  { color: #888; }

/* チェックリスト達成率 */
.cl-rate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cl-rate-row {
  display: grid;
  grid-template-columns: 3em 1fr auto;
  align-items: center;
  gap: 10px;
}
.cl-rate-subject {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.cl-rate-bar-wrap {
  background: #f0f0f0;
  border-radius: 8px;
  height: 10px;
  overflow: hidden;
}
.cl-rate-bar {
  height: 100%;
  border-radius: 8px;
  transition: width .4s;
}
.cl-rate-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.cl-rate-pct  { font-weight: 700; color: #333; min-width: 3em; }
.cl-rate-detail { color: #888; }
.cl-rate-score { color: #1a73e8; font-weight: 600; }

/* 教科分析 */
.analysis-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.analysis-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.analysis-subject {
  font-weight: 600;
  font-size: 14px;
  min-width: 3em;
}
.analysis-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.analysis-stable   { background: #e3f2fd; color: #1565c0; }
.analysis-up       { background: #e8f5e9; color: #1b5e20; }
.analysis-down     { background: #fff3e0; color: #e65100; }
.analysis-weak     { background: #ffebee; color: #c62828; }
.analysis-critical { background: #b71c1c; color: #fff; }

/* 分析基準ボックス */
.analysis-legend-box {
  margin-top: 14px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 14px;
}
.analysis-legend-title {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.analysis-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.analysis-legend-list li {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* モバイル対応 */
@media (max-width: 600px) {
  .grade-compare-row { gap: 6px; font-size: 13px; }
  .grade-compare-diff { font-size: 14px; }
  .cl-rate-row { grid-template-columns: 2.8em 1fr auto; gap: 8px; }
  .grade-graph-card { padding: 12px; }
  /* テーブルの文字を小さくして横はみ出しを抑制 */
  .score-view-table { font-size: 12px; }
  .score-view-table th, .score-view-table td { padding: 5px 5px; }
  .student-test-card { padding: 12px 10px; }
  .score-val { font-size: 14px; }
}

/* ============================================================
   学習記録 (Learning Records) スタイル
   ============================================================ */

/* タブUI */
.lr-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}
.lr-tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: -2px;
  font-weight: 500;
  transition: all 0.2s;
}
.lr-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 700;
}
.lr-tab-btn:hover { color: var(--primary-color); }

/* 必須マーク */
.req { color: #e53935; }

/* 教科チェックボックス */
.lr-subject-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.lr-subject-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f9f9f9;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  user-select: none;
}
.lr-subject-checkbox:hover { border-color: var(--primary-color); background: #fff0f6; }
.lr-subject-checkbox input { cursor: pointer; accent-color: var(--primary-color); }

/* 教科別テキストエリア */
.lr-subject-textarea-wrap {
  background: #f9f9f9;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.lr-subject-label {
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 6px;
}
.lr-subject-textarea { min-height: 70px; }

/* 画像プレビュー */
.lr-image-preview-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}
.lr-image-preview {
  max-width: 120px;
  max-height: 120px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
}
.lr-image-clear-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}
.lr-image-clear-btn:hover { background: #ffe0e0; border-color: #e53935; color: #e53935; }

/* 一括入力 - 生徒カード */
.lr-batch-student-card {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.lr-batch-student-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fafafa;
}
.lr-batch-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
}
.lr-batch-check-label input { accent-color: var(--primary-color); width: 16px; height: 16px; cursor: pointer; }
.lr-batch-grade-badge {
  background: #ffe0ef;
  color: var(--primary-color);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}
.lr-batch-monthly-info { font-size: 12px; color: var(--text-light); }
.lr-batch-student-fields { padding: 16px; background: #fff; border-top: 1px solid var(--border-color); }
.lr-batch-hint { font-size: 13px; color: var(--text-light); margin-bottom: 14px; }

/* 月次使用状況カード */
.lr-monthly-card { margin-bottom: 16px; }
.lr-monthly-usage-card { margin-top: 8px; }
.lr-monthly-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.lr-monthly-title { font-size: 15px; font-weight: 600; color: var(--text-color); }
.lr-monthly-remaining {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-color);
  background: #fff0f6;
  padding: 4px 12px;
  border-radius: 20px;
}
.lr-remaining-zero { color: #e53935 !important; background: #ffe0e0 !important; }
.lr-monthly-bar-wrap {
  height: 8px;
  background: #eee;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.lr-monthly-bar {
  height: 100%;
  background: var(--primary-color);
  border-radius: 8px;
  transition: width 0.4s ease;
}
.lr-monthly-stats { font-size: 13px; color: var(--text-light); margin-bottom: 10px; }
.lr-usage-dates-label { font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.lr-usage-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-usage-date {
  background: #f0f0f0;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  color: #555;
}
.lr-no-usage { font-size: 13px; color: var(--text-light); margin: 0; }
.empty-state-inline { font-size: 13px; color: var(--text-light); }

/* 記録カード */
.lr-record-card { margin-bottom: 14px; }
.lr-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.lr-record-date-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lr-record-date { font-size: 15px; font-weight: 700; color: var(--text-color); }
.lr-subject-count-badge {
  background: #f0e6ff;
  color: #7c3aed;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}
.lr-student-name-badge {
  background: #e3f2fd;
  color: #1565c0;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 600;
}
.lr-card-actions { display: flex; gap: 8px; }

/* 教科リスト */
.lr-subjects-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.lr-subject-item { display: flex; flex-direction: column; gap: 4px; }
.lr-subject-badge {
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}
.lr-subject-content {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.6;
  margin: 4px 0 0 6px;
  white-space: pre-wrap;
}
.lr-no-content { color: var(--text-light) !important; font-style: italic; }

/* 画像セクション */
.lr-image-section { margin-bottom: 12px; }
.lr-multi-image-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.lr-multi-thumb {
  position: relative;
  display: inline-block;
}
.lr-multi-image-preview-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.lr-record-image {
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border-color);
  display: block;
}
/* 一覧の画像削除ボタン */
.lr-img-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.lr-img-delete-btn:hover { background: #e53935; }
.lr-image-caption { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* コメントセクション */
.lr-comment-section {
  background: #f9f5ff;
  border-left: 4px solid #9c27b0;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-top: 10px;
}
.lr-comment-label { font-size: 12px; font-weight: 700; color: #7b1fa2; display: block; margin-bottom: 4px; }
.lr-comment-text { font-size: 14px; color: var(--text-color); line-height: 1.6; margin: 0; white-space: pre-wrap; }

/* ライトボックス */
.lr-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lr-lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; }
.lr-lightbox-close {
  position: absolute;
  top: -36px;
  right: 0;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lr-lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 8px; object-fit: contain; }

/* 先生ダッシュボード - 学習記録サマリ */
/* ── 演習コースログ履歴カード（基本レイアウト） ── */
.lr-dash-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  flex-wrap: wrap;
}
.lr-dash-item:last-child { border-bottom: none; }

/* カラム型レイアウト（演習コースログ用） */
.lr-dash-item--col {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* 1行目: 日付・名前・教科 */
.lr-dash-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}
/* 日付: やや大きく、読める濃さの色 */
.lr-dash-date {
  color: #666;
  font-size: 14px;
  min-width: 80px;
  white-space: nowrap;
}
/* 生徒名: 太字＋大きく（最も目立つ） */
.lr-dash-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-color);
}
/* 教科: やや強調（ピンク色） */
.lr-dash-subs {
  color: var(--primary-color, #FF6B9D);
  font-size: 13px;
  font-weight: 600;
}
/* 内容テキスト（2行まで） */
.lr-dash-content {
  font-size: 14px;
  font-weight: 500;
  color: #444;
  line-height: 1.6;
  padding-left: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

/* ════════════════════════════════════════════
   先生ダッシュボード: 授業ログ履歴 改善スタイル
   ════════════════════════════════════════════ */

/* ── グリッドコンテナ: PC横並び / スマホ縦並び ── */
.ll-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;   /* 高さが揃わなくても上揃え（空白を作らない） */
}
@media (max-width: 768px) {
  .ll-dash-grid {
    grid-template-columns: 1fr;   /* スマホ: 縦積み */
    gap: 8px;
  }
}

/* ── 1コマ分のカード ── */
.ll-dash-col {
  background: #fafafa;
  border: 1px solid #dde3ea;   /* 区切りが分かる少し濃い枠線 */
  border-radius: 8px;
  padding: 6px 10px;           /* 上下余白をさらに詰める: 8→6 */
  display: flex;
  flex-direction: column;
  gap: 3px;                    /* 各要素間の隙間: 4→3 */
  min-width: 0;                /* グリッド内で文字がはみ出さないよう */
}

/* ── ヘッダー行: 日付・授業枠名 ── */
.ll-dash-col-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid #dde3ea;
  padding-bottom: 4px;         /* 6→4 */
  margin-bottom: 0;            /* 2→0（gap で吸収） */
}

/* ── 前回やったこと / 本日やること: セクションラッパー ── */
.ll-dash-section {
  display: flex;
  flex-direction: column;
  gap: 2px;                    /* 宿題セクションの gap と揃える */
}
/* ラベル（背景ブロックの外・宿題ラベルと同構造） */
.ll-dash-section-label {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ll-dash-section-label--done { color: #c0546a; }
.ll-dash-section-label--next { color: #2d6cb5; }

/* ── 本文ブロック（背景＋左ボーダーのみ、ラベルなし） ── */
.ll-dash-block {
  border-radius: 0 4px 4px 0;  /* 宿題アイテムと同じ形状 */
  padding: 3px 8px;            /* 宿題ブロックと揃える */
  font-size: 0.84rem;
  font-weight: 600;
  color: #222;
  line-height: 1.55;           /* 宿題ブロックと揃える */
  white-space: pre-wrap;       /* 改行を保持 */
  word-break: break-all;
  width: 100%;
  box-sizing: border-box;
}
/* 前回やったこと: ピンク系 */
.ll-dash-block--done {
  background: #fff0f3;
  border-left: 3px solid #e07b8a;
  color: #333;
}
/* 本日やること: 青系 */
.ll-dash-block--next {
  background: #f0f6ff;
  border-left: 3px solid #4a90d9;
  color: #333;
}
/* 旧ラベルクラス（不使用になったが念のため残す） */
.ll-dash-block-label { display: none; }

/* ── 小テストバッジ ── */
.ll-dash-minitest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff3e0;
  border: 1px solid #ffb74d;
  color: #e65c00;
  border-radius: 6px;
  padding: 1px 7px;            /* 上下余白を詰める: 2→1 */
  font-size: 0.76rem;
  font-weight: 700;
}

/* ── 宿題セクション ── */
.ll-dash-hw-section {
  display: flex;
  flex-direction: column;
  gap: 2px;                    /* 3→2 */
}
.ll-dash-hw-label {
  font-size: 0.71rem;
  font-weight: 700;
  color: #4a7a2a;
}
/* 宿題1件ごと */
.ll-dash-hw-item {
  font-size: 0.84rem;          /* 0.82→0.84 でブロックと揃える */
  font-weight: 600;            /* 500→600 */
  color: #222;                 /* 濃くして読みやすく */
  line-height: 1.55;
  background: #f6faf0;
  border-left: 3px solid #81c784;
  padding: 3px 8px;
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
  word-break: break-all;
}
/* 宿題期限 */
.ll-dash-hw-due {
  font-size: 0.74rem;
  color: #888;
  margin-left: 5px;
  font-weight: 400;
}
/* 宿題読み込み中 */
.ll-dash-hw-loading {
  font-size: 0.74rem;
  color: #bbb;
}

/* ── 連絡事項セクション（先生ダッシュボード） ── */
.ll-dash-si-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ll-dash-si-label {
  font-size: 0.71rem;
  font-weight: 700;
  color: #b07a00;
}
.ll-dash-si-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #222;
  line-height: 1.55;
  background: #fffde7;
  border-left: 3px solid #ffd600;
  padding: 3px 8px;
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.ll-dash-si-tag {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ll-dash-si-tag--all {
  background: #e3f2fd;
  color: #1565c0;
}
.ll-dash-si-tag--personal {
  background: #fce4ec;
  color: #880e4f;
}
.ll-dash-si-content {
  flex: 1;
}

/* ── 旧クラス（後方互換） ── */
.ll-dash-field  { display: none; }  /* 旧クラスは非表示（念のため残す） */
.ll-dash-label  { font-size: 0.78rem; font-weight: 700; display: inline-block; }

/* ビュー見出し */
.lr-view-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lr-view-title { font-size: 18px; font-weight: 700; color: var(--text-color); margin: 0; }
.lr-record-count { background: #f0f0f0; border-radius: 20px; padding: 2px 12px; font-size: 13px; color: #666; }

/* btn-sm */
.btn-sm { padding: 4px 12px !important; font-size: 12px !important; width: auto !important; }
.btn-danger { background: #e53935 !important; color: #fff !important; }
.btn-danger:hover { background: #c62828 !important; }

/* toast-warning */
.toast-warning { background: #f57c00; color: #fff; }

/* レスポンシブ */
@media (max-width: 600px) {
  .lr-tabs { gap: 0; }
  .lr-tab-btn { padding: 8px 12px; font-size: 13px; }
  .lr-batch-student-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lr-record-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   演習コース ダッシュボード コンパクト表示
   ============================================================ */
.lr-dash-practice-summary {
  padding: 4px 0;
}
.lr-dash-practice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.lr-dash-course-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main, #333);
}
.lr-dash-remaining {
  font-size: 14px;
  font-weight: 500;
  color: #4caf50;
  background: #f0faf0;
  border-radius: 12px;
  padding: 2px 10px;
}
.lr-dash-remaining.lr-remaining-zero {
  color: #e53935;
  background: #fff3f3;
}
.lr-dash-dates-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
}
.lr-dash-dates-label {
  color: var(--text-light, #888);
  font-size: 12px;
  margin-right: 4px;
}
.lr-dash-usage-date {
  display: inline-block;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  color: #555;
  margin: 2px 0;
}
.lr-dash-no-dates {
  font-size: 12px;
  color: var(--text-light, #888);
  margin: 0;
}
.lr-dash-stats { color: var(--text-light, #888); }

/* ============================================================
   保護者リアクション UI
   ============================================================ */
.lr-reaction-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.lr-reaction-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light, #666);
  margin-bottom: 8px;
}
.lr-reaction-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.lr-reaction-btn {
  padding: 6px 12px;
  border: 2px solid #ccc;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.lr-reaction-btn:hover {
  border-color: var(--primary, #5c6bc0);
  background: #f0f0ff;
}
.lr-reaction-btn--selected {
  border-color: var(--primary, #5c6bc0);
  background: var(--primary, #5c6bc0);
  color: #fff;
  font-weight: 600;
}
.lr-reaction-btn:disabled {
  opacity: .6;
  cursor: default;
}
.lr-reaction-status {
  font-size: 12px;
  color: #4caf50;
  min-height: 16px;
}
.lr-reactions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.lr-reaction-badge {
  display: inline-block;
  background: #e8eaf6;
  color: #3949ab;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
}
.lr-reaction-others-label {
  font-size: 12px;
  color: var(--text-light, #888);
  margin: 8px 0 4px;
}
/* 生徒・先生向け閲覧のみ */
.lr-reaction-display {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.lr-reaction-display-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light, #666);
  display: block;
  margin-bottom: 6px;
}
/* 先生ダッシュボード: リアクション行 */
.lr-dash-reaction-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.lr-dash-reaction-item:last-child { border-bottom: none; }
.lr-dash-reaction-name {
  flex: 1;
  color: #444;
}

/* ============================================================
   チェックリスト進捗ランキング UI
   ============================================================ */
.clr-card { padding-bottom: 4px; }

/* ランキングカード内 card-title: グローバル18pxより1〜2px小さく、スマホで途中改行しない */
.clr-card .card-title {
  font-size: 16px;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .clr-card .card-title {
    font-size: 15px;
  }
}

.clr-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.clr-test-label {
  font-size: 13px;
  color: var(--text-light, #888);
  background: #f3f4f6;
  border-radius: 10px;
  padding: 2px 10px;
}
/* ============================================================
   ランキングリスト共通
   ============================================================ */
.clr-list { display: flex; flex-direction: column; gap: 8px; }
.clr-note {
  font-size: 11px;
  color: var(--text-light, #aaa);
  margin: 8px 0 0;
  text-align: right;
}

/* ============================================================
   詳細ページ ランキング行（修正6: 1位>2位>3位 サイズ差強調）
   ============================================================ */
.clr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid #eee;
  transition: box-shadow .15s;
}
/* 1位: 最大・金色・影付き */
.clr-rank-1.clr-row {
  background: linear-gradient(135deg,#fffde7,#fff8e1);
  border-color: #ffd54f;
  border-width: 2px;
  padding: 18px 16px;
  box-shadow: 0 4px 12px rgba(255,213,79,.35);
}
/* 2位: やや大・銀色 */
.clr-rank-2.clr-row {
  background: linear-gradient(135deg,#fafafa,#f0f0f0);
  border-color: #bdbdbd;
  border-width: 2px;
  padding: 14px 14px;
}
/* 3位: やや大・銅色 */
.clr-rank-3.clr-row {
  background: linear-gradient(135deg,#fbe9e7,#fff3e0);
  border-color: #ff8a65;
  border-width: 2px;
  padding: 14px 14px;
}
/* 自分の行（1〜3位は自分色を上書き） */
.clr-row--me {
  background: #e8eaf6 !important;
  border-color: var(--primary,#5c6bc0) !important;
  box-shadow: 0 0 0 2px rgba(92,107,192,.3) !important;
}

/* ランクバッジ（左側の円形エリア） */
.clr-rank-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 6px 8px;
  min-width: 52px;
  text-align: center;
}
.clr-rank-1 .clr-rank-badge { background: rgba(255,213,79,.25); min-width: 64px; }
.clr-rank-2 .clr-rank-badge { background: rgba(189,189,189,.2); min-width: 58px; }
.clr-rank-3 .clr-rank-badge { background: rgba(255,138,101,.15); min-width: 56px; }

/* メダル絵文字 */
.clr-medal-emoji {
  display: block;
  line-height: 1;
  font-size: 11px;
}
.clr-rank-1 .clr-medal-emoji { font-size: 28px; }
.clr-rank-2 .clr-medal-emoji { font-size: 22px; }
.clr-rank-3 .clr-medal-emoji { font-size: 20px; }

/* 順位数字 */
.clr-rank-num {
  display: block;
  font-weight: 900;
  font-size: 13px;
  color: #555;
  margin-top: 2px;
}
.clr-rank-1 .clr-rank-num { font-size: 20px; color: #f9a825; }
.clr-rank-2 .clr-rank-num { font-size: 17px; color: #757575; }
.clr-rank-3 .clr-rank-num { font-size: 16px; color: #bf6040; }

/* 情報エリア */
.clr-info { flex: 1; min-width: 0; }
.clr-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.clr-grade { font-size: 12px; color: var(--text-light,#888); }
.clr-name {
  font-weight: 600;
  font-size: 15px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clr-rank-1 .clr-name { font-size: 20px; font-weight: 800; color: #222; }
.clr-rank-2 .clr-name { font-size: 17px; font-weight: 700; }
.clr-rank-3 .clr-name { font-size: 16px; font-weight: 700; }
.clr-me-tag {
  font-size: 11px;
  background: var(--primary,#5c6bc0);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
}
.clr-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.clr-score { font-size: 13px; color: #555; }
.clr-pct { font-size: 13px; font-weight: 700; color: var(--primary,#5c6bc0); }
.clr-rank-1 .clr-score,
.clr-rank-1 .clr-pct { font-size: 15px; }

/* プログレスバー */
.clr-bar-wrap {
  height: 7px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}
.clr-bar {
  height: 100%;
  background: var(--primary,#5c6bc0);
  border-radius: 4px;
  transition: width .4s;
}
.clr-rank-1 .clr-bar { background: #ffd54f; height: 9px; }
.clr-rank-2 .clr-bar { background: #bdbdbd; }
.clr-rank-3 .clr-bar { background: #ff8a65; }

/* セパレーター・ラベル */
.clr-separator {
  text-align: center;
  color: #bbb;
  font-size: 18px;
  letter-spacing: 4px;
  padding: 4px 0;
}
.clr-my-label {
  font-size: 12px;
  color: var(--text-light,#888);
  margin: 0 0 4px 2px;
}

/* ============================================================
   ダッシュボード コンパクト表示
   ============================================================ */
.clr-dash-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color,#333);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.clr-dash-podium { display: flex; flex-direction: column; gap: 5px; }
.clr-dash-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #eee;
  background: #fafafa;
}
/* ダッシュボード順位別スタイル */
.clr-rank-1.clr-dash-row {
  background: linear-gradient(90deg,#fffde7,#fff8e1);
  border-color: #ffd54f;
  font-size: 15px;
  font-weight: 700;
  padding: 9px 12px;
}
.clr-rank-2.clr-dash-row {
  background: linear-gradient(90deg,#fafafa,#f0f0f0);
  border-color: #bdbdbd;
  font-size: 14px;
}
.clr-rank-3.clr-dash-row {
  background: linear-gradient(90deg,#fbe9e7,#fff3e0);
  border-color: #ff8a65;
  font-size: 14px;
}
.clr-row--me.clr-dash-row {
  background: #e8eaf6 !important;
  border-color: var(--primary,#5c6bc0) !important;
}
.clr-dash-medal { font-size: 11px; min-width: 18px; text-align: center; }
.clr-rank-1 .clr-dash-medal { font-size: 20px; }
.clr-rank-2 .clr-dash-medal { font-size: 16px; }
.clr-rank-3 .clr-dash-medal { font-size: 15px; }
.clr-dash-rank-num { font-weight: 700; min-width: 28px; }
.clr-dash-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ダッシュボード: ログアウトボタン下の safe-area 余白（iOS ホームバー対応） */
#logout-btn {
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}

.clr-dash-score { font-size: 14px; font-weight: 700; color: #444; white-space: nowrap; }

/* 生徒ダッシュボード: 自分の順位 & あと◯個で1位 */
.clr-dash-myrank {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 9px 12px;
  background: #e8eaf6;
  border: 1.5px solid var(--primary, #5c6bc0);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #283593;
}
.clr-dash-myrank-label {
  color: #5c6bc0;
  font-size: 12px;
  font-weight: 500;
}
.clr-dash-myrank-num {
  font-size: 15px;
  font-weight: 800;
  color: #1a237e;
  min-width: 30px;
}
.clr-dash-gap {
  font-size: 12px;
  color: #444;
  background: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 2px;
}
.clr-dash-gap strong {
  color: #c62828;
  font-size: 14px;
}
.clr-dash-gap--top1 {
  color: #f57f17;
  background: #fff8e1;
  font-weight: 700;
}

/* ============================================================
   生徒ダッシュボード: テスト残り日数 & ランキング残り日数
   (clr-dash-date-xxx)
   ============================================================ */
.clr-dash-date-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.clr-dash-date-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.55;
  padding: 7px 10px;
  border-radius: 8px;
  background: #f7f8fa;
  border: 1px solid #e8e9ec;
}
.clr-dash-date-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.clr-dash-date-test {
  background: #e8f4fd;
  border-color: #90caf9;
  color: #1565c0;
}
.clr-dash-date-done {
  background: #f3f9f3;
  border-color: #a5d6a7;
  color: #2e7d32;
}
.clr-dash-date-ranking {
  background: #fff8e1;
  border-color: #ffe082;
  color: #e65100;
}
.clr-dash-date-sub {
  font-size: 11px;
  color: #555;
  display: block;
}
.clr-dash-date-row strong {
  font-size: 14px;
}

/* ============================================================
   報酬ルール表示 (clr-reward-xxx)
   ============================================================ */

/* --- 詳細ページ: フルカード --- */
.clr-reward-card {
  background: #fafafa;
  border: 1px solid #e8e8e8;
}
.clr-reward-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.clr-reward-block {
  padding: 12px 14px;
  background: #f7f7f9;
  border-radius: 10px;
  border: 1px solid #ededf0;
}
.clr-reward-heading {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin: 0 0 8px;
}
.clr-reward-item {
  font-size: 14px;
  color: #333;
  margin: 0 0 2px;
}
.clr-reward-sub {
  font-size: 12px;
  color: #999;
  margin: 0;
}
.clr-reward-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  margin-bottom: 8px;
}
.clr-reward-table td {
  padding: 4px 8px 4px 0;
  vertical-align: middle;
}
.clr-reward-rank {
  font-weight: 700;
  min-width: 64px;
  white-space: nowrap;
}
.clr-reward-rank.rank1 { color: #f9a825; }
.clr-reward-rank.rank2 { color: #757575; }
.clr-reward-rank.rank3 { color: #bf6040; }
.clr-reward-caution {
  font-size: 12px;
  color: #777;
  margin: 2px 0 0;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.clr-reward-ex-note {
  font-size: 11px;
  color: #999;
  display: block;
  margin-top: 1px;
}
/* 例ブロック: 少し小さく・グレー寄り */
.clr-reward-examples {
  background: #f3f3f5;
  border-color: #e5e5ea;
}
.clr-reward-ex {
  margin-bottom: 8px;
}
.clr-reward-ex:last-child { margin-bottom: 0; }
.clr-reward-ex-title {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin: 0 0 2px;
}
.clr-reward-ex-body {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* --- ダッシュボード: 簡易バッジ --- */
.clr-reward-badge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f7f7f9;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
}
.clr-reward-badge-title {
  font-size: 12px;
  font-weight: 700;
  color: #666;
}
.clr-reward-badge-row {
  font-size: 12px;
  color: #555;
}
.clr-reward-badge-note {
  font-size: 11px;
  color: #999;
}

/* ============================================================
   ランキングページ ヘッダー / タイトル / ボタン (clr-page-xxx)
   ============================================================ */

/* ページヘッダーコンテナ */
.clr-page-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* タイトル+説明 上段 */
.clr-page-header-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ページタイトル: 1〜2pt 小さく、スマホで途中改行しない */
.clr-page-title {
  font-size: 20px !important;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  white-space: normal;
}

/* ── ダッシュボード導線ボタン共通ビジュアル ──
   ピンク枠・太字・グレー線なし */
.clr-to-checklist-btn,
.dash-nav-btn {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color, #FF6B9D);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 107, 157, 0.08);
  border: 1.5px solid rgba(255, 107, 157, 0.3);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;  /* ラベルが折り返さない */
  box-sizing: border-box;
}
.clr-to-checklist-btn:hover,
.dash-nav-btn:hover {
  background: rgba(255, 107, 157, 0.15);
  border-color: rgba(255, 107, 157, 0.5);
  text-decoration: none;
}

/* ランキングページ「チェックリストへ」: flex child として右寄せ */
.clr-to-checklist-btn {
  display: inline-block;
  align-self: flex-end;
  margin-top: 0;
}

/* ダッシュボード導線ボタン:
   flex item として margin-left:auto で確実右寄せ。
   flex-wrap で折り返した行でも右端に表示される。 */
.dash-nav-btn {
  display: inline-block;
  margin-left: auto;       /* flex item を右端へ押し出す */
  flex-shrink: 0;          /* タイトルに押しつぶされない */
  white-space: nowrap;
}

/* ============================================================
   ダッシュボード 遷移リンクボタン（ピンク背景で統一）
   card-footer-link / dash-nav-btn / btn btn-secondary の代替
   ============================================================ */
.dash-link-btn {
  display: inline-block;
  padding: 6px 16px;
  background: var(--primary-color, #FF6B9D);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(255,107,157,0.25);
  cursor: pointer;
}
.dash-link-btn:hover {
  background: #FF5088;
  box-shadow: 0 3px 8px rgba(255,80,136,0.35);
  text-decoration: none !important;
}
/* card-footer 位置（右寄せブロック） */
.dash-link-btn--footer {
  display: block;
  text-align: right;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #f0f0f0);
}
/* カードヘッダー右上の flex 子要素配置 */
.dash-link-btn--header {
  flex-shrink: 0;
  margin-left: auto;
}
@media (max-width: 600px) {
  .dash-link-btn {
    font-size: 12px;
    padding: 5px 13px;
  }
}

/* ランキングボーナス折りたたみボタン */
.clr-bonus-toggle-btn {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color, #FF6B9D);
  background: rgba(255, 107, 157, 0.06);
  border: 1.5px solid rgba(255, 107, 157, 0.25);
  border-radius: 16px;
  padding: 6px 16px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  margin-top: 4px;
}
.clr-bonus-toggle-btn:hover {
  background: rgba(255, 107, 157, 0.12);
}

/* ランキングボーナス詳細エリア */
.clr-bonus-detail {
  margin-top: 12px;
  border-top: 1px dashed #e0e0e0;
  padding-top: 12px;
}

/* ── モバイル調整 (max-width: 600px) ── */
@media (max-width: 600px) {
  .clr-page-title {
    font-size: 18px !important;
  }
  .clr-to-checklist-btn,
  .dash-nav-btn {
    font-size: 13px;
    padding: 5px 12px;
  }
  .clr-bonus-toggle-btn {
    font-size: 12px;
    padding: 5px 14px;
  }
}

/* ============================================================
   ランキンググループ管理 (rg-xxx)
   ============================================================ */
.rg-active-warning {
  background: #fff3e0;
  border: 1.5px solid #ff9800;
  border-radius: 8px;
  color: #e65100;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.rg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fafafa;
}
.rg-row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.rg-row-label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.rg-row-meta {
  font-size: 12px;
  color: #888;
}
.rg-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.rg-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  width: fit-content;
}
.rg-badge-active  { background: #e8f5e9; color: #2e7d32; }
.rg-badge-closed  { background: #f5f5f5; color: #757575; }
.rg-badge-draft   { background: #fff3e0; color: #e65100; }
.rg-btn-start  { background: #43a047; color: #fff; width: auto; padding: 7px 14px; font-size: 13px; }
.rg-btn-close  { background: #e53935; color: #fff; width: auto; padding: 7px 14px; font-size: 13px; }
.rg-btn-del    { width: auto; padding: 7px 14px; font-size: 13px; }

/* ============================================================
   宿題ライフ タブ (hwl-*)
   ============================================================ */
.hwl-fiscal-label {
  font-size: 13px;
  color: #888;
  margin: 0 0 16px 0;
}
.hwl-student-section {
  margin-bottom: 32px;
}
.hwl-student-name {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px 0;
}
/* ライフブロック */
.hwl-life-block {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff8f8;
  border: 1.5px solid #ffcdd2;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hwl-hearts {
  font-size: 26px;
  letter-spacing: 3px;
  line-height: 1;
}
.hwl-heart--full  { color: #e53935; }
.hwl-heart--empty { color: #ffcdd2; }
.hwl-life-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hwl-life-count {
  font-size: 15px;
  font-weight: 700;
  color: #c62828;
}
.hwl-life-count strong { font-size: 22px; }
.hwl-unsubmitted-count {
  font-size: 13px;
  color: #555;
}

/* 宿題カード */
.hwl-homework-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hwl-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: box-shadow 0.15s;
}
.hwl-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.hwl-card--status0        { border-left: 4px solid #e53935; } /* 未提出 */
.hwl-card--status1        { border-left: 4px solid #43a047; } /* 提出済み */
.hwl-card--status2        { border-left: 4px solid #fb8c00; } /* 居残り */
.hwl-card--statusunselected { border-left: 4px solid #bdbdbd; } /* 未選択 */

.hwl-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hwl-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.hwl-card-date {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.hwl-card-subject {
  font-size: 12px;
  background: #e3f2fd;
  color: #1565c0;
  border-radius: 8px;
  padding: 2px 8px;
  font-weight: 600;
}
.hwl-card-due {
  font-size: 12px;
  color: #757575;
}
.hwl-card-status-wrap { flex-shrink: 0; }

/* ステータスバッジ */
.hwl-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.hwl-status--unsubmitted { background: #ffebee; color: #c62828; }
.hwl-status--submitted   { background: #e8f5e9; color: #2e7d32; }
.hwl-status--late        { background: #fff3e0; color: #e65100; }
.hwl-status--unselected  { background: #f5f5f5; color: #9e9e9e; }

.hwl-card-content {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 添付画像サムネイル */
.hwl-card-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.hwl-card-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.hwl-card-thumb:hover { opacity: 0.8; }

/* 画像モーダル */
.hwl-img-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
}
.hwl-img-modal--open { display: flex; align-items: center; justify-content: center; }
.hwl-img-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.hwl-img-modal-inner {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hwl-img-modal-inner img {
  max-width: 88vw;
  max-height: 82vh;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.hwl-img-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 空・エラー・ローディング */
.hwl-loading, .hwl-empty, .hwl-error {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-size: 15px;
}
.hwl-error { color: #c62828; }

/* 宿題ライフ ルールカード・特典カード */
.hwl-rule-card,
.hwl-bonus-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.hwl-rule-card { border-left: 4px solid #1565c0; }
.hwl-bonus-card { border-left: 4px solid #f9a825; }

.hwl-rule-card-title,
.hwl-bonus-card-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #333;
}

.hwl-rule-section { margin-bottom: 8px; }
.hwl-rule-section:last-child { margin-bottom: 0; }

.hwl-rule-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #1565c0;
  margin: 0 0 3px 0;
}
.hwl-bonus-card-title + ul .hwl-rule-section-title,
.hwl-bonus-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #e65100;
  margin: 0 0 3px 0;
}

.hwl-rule-list {
  margin: 0;
  padding: 0 0 0 1.2em;
  list-style: disc;
}
.hwl-rule-list li {
  font-size: 12px;
  color: #444;
  line-height: 1.65;
  margin-bottom: 1px;
}
/* 公欠注意書き：赤系で目立たせる */
.hwl-rule-note {
  font-size: 12px;
  color: #c62828;
  background: #fff8f8;
  border-left: 3px solid #e53935;
  padding: 3px 8px;
  margin: 5px 0 0 0;
  border-radius: 0 4px 4px 0;
}

/* 折りたたみ詳細部分 */
.hwl-rule-extra { margin-top: 8px; }
.hwl-rule-extra[hidden] { display: none; }

/* もっと見るボタン */
.hwl-rule-toggle {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #1565c0;
  background: none;
  border: 1px solid #1565c0;
  border-radius: 20px;
  padding: 2px 12px;
  cursor: pointer;
  line-height: 1.6;
}
.hwl-rule-toggle:hover { background: #e3f2fd; }

/* スマホ：ルールカード・特典カードをよりコンパクトに */
@media (max-width: 600px) {
  .hwl-rule-card,
  .hwl-bonus-card {
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .hwl-rule-card-title,
  .hwl-bonus-card-title {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .hwl-rule-section { margin-bottom: 6px; }
  .hwl-rule-section-title { font-size: 11px; }
  .hwl-rule-list li {
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 0;
  }
  .hwl-rule-note { font-size: 11px; }
  .hwl-rule-toggle { font-size: 11px; padding: 2px 10px; }
}

/* ============================================================
   年間スケジュール (schedule)
   ============================================================ */

/* 注意文 */
.sc-note {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #795548;
  margin-bottom: 14px;
}

/* ツールバー（先生用） */
.sc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.sc-mode-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-mode-label { font-size: 13px; color: var(--text-light); }
.sc-mode-btn {
  padding: 5px 14px;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s;
}
.sc-mode-btn:hover { border-color: var(--primary-color); }
.sc-mode-active {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}
.sc-add-btn {
  padding: 7px 18px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  margin-left: auto;
}
.sc-add-btn:hover { opacity: .85; }

/* 凡例 */
.sc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.sc-legend-item {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: bold;
}

/* カレンダーグリッド */
.sc-grid-teacher {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.sc-grid-viewer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 700px) {
  .sc-grid-viewer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
}

/* 月カード */
.sc-month-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
}
.sc-month-title {
  background: var(--primary-color);
  color: #fff;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: bold;
}

/* 曜日ヘッダー */
.sc-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f5f5f5;
}
.sc-wlabel {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 0;
  color: var(--text-dark);
}
.sc-wlabel.sc-sat { color: #1565c0; }
.sc-wlabel.sc-sun { color: #c62828; }

/* 日付グリッド */
.sc-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid #eee;
}
.sc-cell {
  min-height: 64px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 3px 4px 4px;
  vertical-align: top;
  font-size: 12px;
  position: relative;
  transition: background .15s;
}
.sc-cell:hover { background: #fce4ec22; }
.sc-empty { background: #fafafa; }
.sc-sat .sc-day-num { color: #1565c0; }
.sc-sun .sc-day-num { color: #c62828; }
.sc-today { background: #fff8e1 !important; }
.sc-today .sc-day-num {
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-day-num {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 2px;
  line-height: 1;
}
.sc-closed {
  display: block;
  color: #c62828;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.2;
}
.sc-special {
  display: block;
  color: #2e7d32;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.2;
}
.sc-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.sc-event-chip {
  display: block;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  max-width: 100%;
}
.sc-event-chip:hover { opacity: .8; }

/* モーダル */
.sc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.sc-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.sc-modal-title {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--text-dark);
}
.sc-form-group { margin-bottom: 14px; }
.sc-label {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.sc-label .required { color: #e53935; }
.sc-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}
.sc-textarea { min-height: 70px; resize: vertical; }
.sc-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.sc-btn-danger {
  background: #e53935 !important;
  margin-left: auto;
}

/* ============================================================
   プッシュ通知設定 UI
   ============================================================ */
.push-settings-card {
  background: #fff;
  border: 1px solid #ffd6e5;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.08);
}
.push-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.push-settings-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 2px;
}
.push-settings-desc {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* トグルスイッチ */
.push-toggle-label {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}
.push-toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
}
.push-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 28px;
  transition: background 0.25s;
}
.push-toggle-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.push-toggle-label.push-toggle-on .push-toggle-slider {
  background: #FF6B9D;
}
.push-toggle-label.push-toggle-on .push-toggle-slider::before {
  transform: translateX(24px);
}
.push-toggle-label input:disabled + .push-toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ステータスメッセージ */
.push-status-msg {
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
}
.push-status-success { background: #e8f5e9; color: #2e7d32; }
.push-status-info    { background: #e3f2fd; color: #1565c0; }
.push-status-warn    { background: #fff8e1; color: #e65100; }
.push-status-error   { background: #ffebee; color: #c62828; }

.push-permission-denied {
  margin-top: 10px;
  font-size: 12px;
  color: #e65100;
  background: #fff8e1;
  padding: 8px 10px;
  border-radius: 8px;
}


/* ===== 授業ログ フィルター ===== */
#log-filter-card {
  margin-bottom: 12px;
  padding: 12px 16px;
  overflow: visible;
}

/* フィルター行：横並び → スマホで折り返し */
.log-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

/* 各フィルターアイテム */
.log-filter-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 150px;
  min-width: 130px;
}

/* リセットボタン列は幅を固定 */
.log-filter-item--btn {
  flex: 0 0 auto;
  min-width: unset;
}

/* ラベル */
.log-filter-label {
  display: block;
  font-size: 12px;
  color: var(--text-light, #666);
  margin-bottom: 5px;
  font-weight: 500;
  line-height: 1.2;
}

/* select 本体：文字が縦中央に入るように設計 */
.log-filter-select {
  width: 100%;
  height: 42px;               /* 十分な高さを確保 */
  padding: 0 10px;            /* 上下0にしてline-heightに任せる */
  line-height: 42px;          /* height と揃えて縦中央 */
  font-size: 14px;            /* 読みやすいサイズ */
  color: var(--text-dark, #333);
  background: #fff;
  border: 1.5px solid var(--border-color, #ddd);
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  appearance: auto;
  -webkit-appearance: auto;
  vertical-align: middle;
  transition: border-color 0.2s;
}

.log-filter-select:focus {
  outline: none;
  border-color: var(--primary-color, #5c6bc0);
  box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.15);
}

/* リセットボタン：selectと高さを揃える */
.log-filter-reset-btn {
  height: 42px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  background: #f5f5f5;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 42px;
  transition: background 0.2s, border-color 0.2s;
}

.log-filter-reset-btn:hover {
  background: #ececec;
  border-color: #bbb;
}

/* スマホ: 各アイテムを全幅に */
@media (max-width: 480px) {
  .log-filter-item {
    flex: 1 1 100%;
  }
  .log-filter-item--btn {
    flex: 1 1 100%;
  }
  .log-filter-reset-btn {
    width: 100%;
  }
}

/* ===== 生徒一覧: 授業枠バッジ ===== */
.student-slot-badge {
  display: inline-block;
  background: #e8eaf6;
  color: #3949ab;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 500;
  margin: 1px 2px;
  white-space: nowrap;
}

/* ===== 特別な持ち物ブロック (作成フォーム) ===== */
.special-items-block {
  border: 1.5px dashed #ffb300;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fffde7;
}
.special-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.special-items-title {
  font-size: 14px;
  font-weight: 600;
  color: #f57f17;
}
.btn-add-special-item {
  background: #fff8e1;
  color: #f57f17;
  border: 1.5px solid #ffca28;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-add-special-item:hover {
  background: #ffecb3;
}
.special-item-row {
  margin-bottom: 6px;
}
.special-item-fields {
  display: flex;
  gap: 6px;
  align-items: center;
}
.si-remove-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  flex-shrink: 0;
}
.si-remove-btn:hover { color: #e53935; }

/* ===== 特別な持ち物表示 (授業ログカード) ===== */
.si-display-block {
  border-left: 4px solid #ffca28;
  background: #fffde7;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin: 8px 0;
}
.si-display-header {
  font-size: 13px;
  font-weight: 600;
  color: #f57f17;
  margin-bottom: 6px;
}
.si-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  padding: 2px 0;
}
.si-student-tag {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.si-student-tag--all {
  background: #e8f5e9;
  color: #2e7d32;
}
.si-content-text {
  flex: 1;
}

/* ===== 特別な持ち物: 保存ボタン ===== */
.si-save-btn {
  background: none;
  border: none;
  color: #5c6bc0;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  flex-shrink: 0;
}
.si-save-btn:hover { color: #3949ab; }
.si-save-btn:disabled { opacity: 0.5; cursor: default; }

/* ===== 特別な持ち物: 生徒・保護者画面表示 ===== */
.sl-si-block {
  border-left: 4px solid #ffca28;
  background: #fffde7;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin: 8px 0 4px;
}
.sl-si-header {
  font-size: 13px;
  font-weight: 700;
  color: #f57f17;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.sl-si-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sl-si-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
}
.sl-si-tag {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.sl-si-tag--all {
  background: #e8f5e9;
  color: #2e7d32;
}
.sl-si-tag--personal {
  background: #e3f2fd;
  color: #1565c0;
}
.sl-si-content {
  flex: 1;
  line-height: 1.4;
}

/* ============================================================
   ランキンググループ作成: テスト候補 年度×種別グループ表示
   ============================================================ */
.rg-test-group {
  margin-bottom: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}
.rg-test-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f5f7fa;
  border-bottom: 1px solid #e0e0e0;
}
.rg-test-group-badge {
  font-size: 12px;
  font-weight: 700;
  color: #1565c0;
  background: #e3f2fd;
  border-radius: 4px;
  padding: 2px 8px;
}
.rg-test-group-body {
  padding: 4px 8px;
}
.rg-test-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  transition: opacity 0.15s;
}
.rg-test-label:last-child {
  border-bottom: none;
}
.rg-test-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rg-test-school {
  font-weight: 600;
  color: #333;
  font-size: 13px;
}
.rg-test-date {
  color: #888;
  font-size: 11px;
}

/* ============================================================
   書類管理: 一括アップロード
   ============================================================ */

/* 一括アップロードボタンバー */
.doc-bulk-bar {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 6px;
}
.doc-bulk-open-btn {
  background: #1565c0;
  color: #fff;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.doc-bulk-open-btn:hover {
  background: #0d47a1;
}

/* 一括モーダル: 行リスト */
.bulk-row {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fafafa;
}
.bulk-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f0f4ff;
  border-bottom: 1px solid #e0e0e0;
}
.bulk-row-num {
  font-size: 13px;
  font-weight: 700;
  color: #1565c0;
}
.bulk-row-del {
  background: none;
  border: none;
  color: #999;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.bulk-row-del:hover {
  color: #e53935;
}
.bulk-row-body {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .bulk-row-body {
    grid-template-columns: 1fr;
  }
}
.bulk-field:last-child {
  grid-column: 1 / -1;
}
.bulk-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

/* 行ステータス */
.bulk-row-status {
  font-size: 12px;
  padding: 4px 12px 8px;
  min-height: 20px;
}
.bulk-status-error     { color: #e53935; font-weight: 600; }
.bulk-status-uploading { color: #1565c0; }
.bulk-status-done      { color: #2e7d32; font-weight: 600; }

/* 行追加ボタン */
.bulk-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px dashed #bbb;
  border-radius: 8px;
  color: #666;
  font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.bulk-add-btn:hover {
  border-color: #1565c0;
  color: #1565c0;
}

/* 進捗バー */
.bulk-prog-label {
  font-size: 13px;
  margin: 0 0 6px;
  font-weight: 600;
  color: #333;
}
.bulk-prog-bar-wrap {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
.bulk-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, #42a5f5, #1565c0);
  border-radius: 4px;
  transition: width 0.25s ease;
}

/* ============================================================
   先生のTo Do ― カード・モーダル・トースト
   ============================================================ */

/* ── ダッシュボードカード内アイテム ── */
.td-card-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  color: var(--text-color, #333);
  line-height: 1.65;
}
.td-card-item:last-child { border-bottom: none; }
.td-card-dot {
  color: var(--primary-color, #FF6B9D);
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}
.td-card-text {
  flex: 1;
  font-weight: 500;
  word-break: break-all;
}

/* ── モーダルオーバーレイ ── */
.td-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 16px;
  box-sizing: border-box;
}
.td-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  overflow: hidden;
}
.td-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.td-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-color, #333);
  margin: 0;
}
.td-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1;
}
.td-modal-close:hover { background: #f0f0f0; color: #333; }
.td-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

/* ── 追加フォーム ── */
.td-add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 4px;
}
.td-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.15s;
}
.td-textarea:focus {
  outline: none;
  border-color: var(--primary-color, #FF6B9D);
}

/* ── モーダル内各アイテム ── */
.td-modal-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.td-modal-item:last-child { border-bottom: none; }

.td-modal-item-view {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.td-modal-item-text {
  flex: 1;
  font-size: 15px;
  color: var(--text-color, #333);
  line-height: 1.65;
  word-break: break-all;
}
.td-modal-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.td-btn-edit,
.td-btn-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 5px;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1;
}
.td-btn-edit:hover { background: #fff3e0; }
.td-btn-del:hover  { background: #ffebee; }
.td-btn-cancel {
  background: none;
  border: 1px solid #ccc;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: #666;
  transition: background 0.15s;
}
.td-btn-cancel:hover { background: #f0f0f0; }

.td-modal-item-edit { padding-top: 4px; }
.td-edit-textarea { margin-bottom: 6px; }
.td-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── トースト通知 ── */
.td-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #2e7d32;
  color: #fff;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
  transition: opacity 0.4s;
  white-space: nowrap;
}
.td-toast--error { background: #c62828; }

/* ── スマホ対応 ── */
@media (max-width: 600px) {
  .td-modal {
    max-height: 90vh;
  }
  .td-modal-body {
    padding: 12px 14px;
  }
  .td-modal-header {
    padding: 12px 14px 10px;
  }
  .td-card-item,
  .td-modal-item-text {
    font-size: 14px;
  }
}

/* ============================================================
   生徒一括登録モーダル (bk-*)
   ============================================================ */

/* 幅広モーダル */
.bk-modal-wide .modal-content,
.bk-modal-content {
  max-width: 1300px;
  width: 98vw;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.bk-modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  overflow-x: auto;
  flex: 1;
}

.bk-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}

/* エラーボックス */
.bk-error-box {
  background: #fff3f3;
  border: 1px solid #f5a0a0;
  border-radius: 8px;
  padding: 10px 14px;
  color: #c62828;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 12px;
}

/* テーブル全体 */
.bk-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.bk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1100px;
}

/* ヘッダー */
.bk-th {
  background: #fce4ec;
  color: #880e4f;
  font-weight: 700;
  padding: 8px 6px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid #f48fb1;
}
.bk-th-num      { width: 32px; text-align: center; }
.bk-th-name     { width: 80px; }
.bk-th-kana     { width: 90px; }
.bk-th-school   { width: 160px; }
.bk-th-grade    { width: 60px; }
.bk-th-practice { width: 44px; text-align: center; }
.bk-th-sessions { width: 70px; }
.bk-th-lid      { width: 130px; }
.bk-th-pw       { width: 130px; }
.bk-th-math     { width: 130px; }
.bk-th-eng      { width: 130px; }
.bk-th-del      { width: 36px; }
.bk-req { color: #e53935; font-weight: 700; }

/* 行 */
.bk-tr:nth-child(even) { background: #fafafa; }
.bk-tr:hover           { background: #fff5f9; }

/* セル */
.bk-td {
  padding: 6px 5px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.bk-td-num     { text-align: center; color: #999; font-size: 12px; }
.bk-td-center  { text-align: center; }
.bk-td-school  { min-width: 140px; }

/* インプット・セレクト */
.bk-input,
.bk-select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.bk-input:focus,
.bk-select:focus {
  outline: none;
  border-color: var(--primary-color, #FF6B9D);
  box-shadow: 0 0 0 2px rgba(255,107,157,0.15);
}
.bk-input[type="number"] { width: 60px; }

/* 削除ボタン */
.bk-del-btn {
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #e53935;
  cursor: pointer;
  font-size: 13px;
  padding: 3px 7px;
  line-height: 1;
  transition: background 0.15s;
}
.bk-del-btn:hover { background: #ffebee; border-color: #e57373; }

/* フッター（行追加 + 送信ボタン） */
.bk-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.bk-add-row-btn {
  background: none;
  border: 1px dashed var(--primary-color, #FF6B9D);
  border-radius: 8px;
  color: var(--primary-color, #FF6B9D);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 18px;
  transition: background 0.15s;
}
.bk-add-row-btn:hover { background: #fff0f5; }

/* 先生ダッシュボード: 演習コースログ履歴カード内 保護者リアクション件数バッジ */
.lr-dash-reaction-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  background: #fff3f7;
  border: 1px solid #f9a8c9;
  border-radius: 20px;
  color: #c2185b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.lr-dash-reaction-badge:hover {
  background: #ffe0ee;
  border-color: #e91e8c;
  text-decoration: none;
}

/* ================================================================
   連絡メモ (dashboard-memos) スタイル
   ================================================================ */

/* 先生カード: カウントバッジ */
.dm-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin-left: 6px;
  background: #FF6B9D;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
}

/* 行共通 */
.dm-row {
  padding: 10px 0;
  border-bottom: 1px solid #f0e0ea;
}
.dm-row:last-child { border-bottom: none; }

/* 行ヘッダー（バッジ・日付・アクションボタン） */
.dm-row-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

/* 本文 */
.dm-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;     /* JS側で<br>変換 + 改行保持 */
  word-break: break-word;
}

/* ピンアイコン */
.dm-pin-icon {
  font-size: 13px;
  flex-shrink: 0;
}

/* 宛先バッジ */
.dm-target-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.dm-target-badge--all      { background: #f0e6ff; color: #6c3ed6; }
.dm-target-badge--grade1   { background: #e3f0ff; color: #1565c0; }
.dm-target-badge--grade2   { background: #e8f5e9; color: #2e7d32; }
.dm-target-badge--grade3   { background: #fff8e1; color: #f57f17; }
.dm-target-badge--practice { background: #fce4ec; color: #c62828; }
.dm-target-badge--student  { background: #e0f7fa; color: #00695c; }

/* 日付（先生のみ表示） */
.dm-date {
  font-size: 11px;
  color: #aaa;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 行アクションボタン（編集・削除） */
.dm-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.dm-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.15s;
}
.dm-btn:hover { background: #f5f5f5; }
.dm-btn--delete:hover { background: #fff0f0; }

/* 件数オーバー時のヒント */
.dm-more-hint {
  font-size: 12px;
  color: #aaa;
  margin: 6px 0 0;
  text-align: right;
}

/* 一覧モーダル */
.dm-modal-content {
  max-width: 580px;
  width: 95%;
  max-height: 80vh;
  overflow-y: auto;
}

/* 全件一覧の1行 */
.dm-list-row {
  padding: 12px 0;
  border-bottom: 1px solid #f0e0ea;
}
.dm-list-row:last-child { border-bottom: none; }

/* ＋追加ボタン色 */
.dm-add-btn {
  background: #FF6B9D !important;
  color: #fff !important;
  border-color: #FF6B9D !important;
}
.dm-add-btn:hover {
  background: #e05588 !important;
  border-color: #e05588 !important;
}

/* 編集モーダル: テキストエリア */
.dm-textarea {
  width: 100%;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.6;
}

/* 生徒/保護者カード */
.dm-student-card {
  border-left: 4px solid #FF6B9D;
}
.dm-student-list { }

/* 生徒/保護者向け行 */
.dm-row--student {
  padding: 8px 0;
  border-bottom: 1px solid #f5eaf0;
}
.dm-row--student:last-child { border-bottom: none; }
.dm-row--pinned .dm-content {
  font-weight: 600;
}

/* 連絡メモモーダル用オーバーレイ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}