:root {
            --primary-color: #2563eb;
            --header-bg: #ffffff;
            --body-bg: #f3f4f6;
            --text-dark: #1f2937;
            --text-light: #6b7280;
            --border-color: #d1d5db;
            --header-border-color: #4b5563;
            --evaluated-button-bg: #10b981;
            --danger-color: #dc2626;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 6px;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            white-space: nowrap;
        }
        .btn:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        .btn-primary:hover { opacity: 0.9; }
        .btn-secondary {
            background-color: white;
            color: var(--text-dark);
            border-color: var(--border-color);
        }
        .btn-secondary:hover { background-color: #f9fafb; }
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
            border-color: var(--danger-color);
        }
        .btn-danger:hover { opacity: 0.9; }
        .btn-icon {
            padding: 8px;
            border-radius: 9999px;
            background-color: transparent;
            color: var(--text-light);
            border: none;
        }
       .btn-icon:hover {
            background-color: #e5e7eb;
            color: var(--text-dark);
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            background-color: var(--body-bg);
            color: var(--text-dark);
            font-size: 14px;
        }
       .app-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .app-header {
            background-color: var(--header-bg);
            padding: 0 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 10;
            height: 64px;
            flex-shrink: 0;
        }
       .app-header h1 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-dark);
            margin: 0;
            white-space: nowrap;
        }
        .header-nav {
            display: flex;
            gap: 8px;
        }
       .nav-button {
            padding: 8px 16px;
            font-size: 0.875rem;
            font-weight: 500;
            border: none;
            border-radius: 6px;
            background-color: transparent;
            color: var(--text-dark);
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
            white-space: nowrap;
        }
        .nav-button:hover { background-color: #eef2ff; }
         .nav-button.active {
            background-color: var(--primary-color);
            color: white;
        }
       .main-content {
            flex-grow: 1;
            display: flex;
            padding: 24px;
            box-sizing: border-box;
            overflow: hidden;
            min-width: 1050px;
            min-height: 0;
        }
        #settings-view .content-card {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        /* ▼▼▼ 追加：タブレット向け超軽量化設定 ▼▼▼ */
        /* 1. 全体のアニメーションと影を無効化 */
        * {
            box-shadow: none !important;
            transition: none !important;
            backdrop-filter: none !important; /* すりガラス効果無効 */
        }

        /* 2. 座席の描画コスト削減 */
        .seat {
            border-style: solid; /* dashed(点線)は描画コストが高いので実線に */
            border-width: 1px;
            transform: translateZ(0); /* GPUアクセラレーションを強制 */
            will-change: transform;   /* ブラウザに変化を予告 */
        }

        /* 3. ドラッグ中のゴースト（分身）を簡素化 */
        .student-ghost {
            opacity: 0.7 !important;
            background-color: #dbeafe !important;
            border: 2px solid var(--primary-color) !important;
            /* 複雑な装飾を排除 */
        }
        
        /* 4. 座席表コンテナの再描画抑制 */
        #seating-chart-grid {
            /* contain: strict; ← これが原因で高さが0になっていました */
            contain: layout paint; /* 安全な設定に変更 */
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
        .view {
            display: none;
            width: 100%;
            height: 100%;
        }
       .view.active { display: flex; }
        #settings-view.view.active {
            display: flex;
            flex-direction: column;
        }
        .settings-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 24px;
        }
        .tab-button {
            padding: 10px 20px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-size: 1rem;
            color: #6b7280;
            border-bottom: 2px solid transparent;
        }
       .tab-button:hover { color: var(--text-dark); }
        .tab-button.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 600;
        }
        .tab-content { display: none; }
        .tab-content.active {
            display: block;
            flex-grow: 1;
            overflow-y: auto;
            min-height: 0;
        }
        .form-section { margin-bottom: 32px; }
        .form-section h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin: 0 0 16px 0;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
        }
        .form-group { margin-bottom: 16px; }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            box-sizing: border-box;
            max-width: 400px;
        }
        .form-textarea {
            min-height: 100px;
            resize: vertical;
        }
        .form-radio-group label { margin-right: 16px; }
        .grid-2-col {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .form-button {
            padding: 10px 20px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            background-color: #fff;
            font-weight: 500;
        }
        .form-button-primary {
            background-color: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }
        .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-radius: 4px;
        }
        .list-item:nth-child(odd) { background-color: #f9fafb; }
        .list-item:hover {
            background-color: #eef2ff;
            cursor: pointer;
        }
        .delete-button { color: var(--danger-color); }
        #lesson-view {
            flex-direction: column;
            gap: 16px;
        }
        .date-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: #fff;
            padding: 12px;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            flex-shrink: 0;
        }
        .icon-button {
            border: none;
            background: none;
            padding: 8px;
            border-radius: 9999px;
            cursor: pointer;
            line-height: 1;
        }
        .icon-button:hover { background-color: #e5e7eb; }
        .lesson-view-main {
            display: flex;
            gap: 16px;
            flex-grow: 1;
            min-height: 0;
        }
        .schedule-container {
            flex-grow: 1;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            padding: 16px;
            display: flex;
            flex-direction: column;
        }
        .schedule-table {
            width: 100%;
            height: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            text-align: center;
            font-size: 0.875em;
        }
        .schedule-table th, .schedule-table td {
            border: 1px solid var(--border-color);
            vertical-align: top;
            word-break: keep-all;
        }
        .schedule-table thead th {
            font-weight: 600;
            padding: 8px 4px;
        }
        .schedule-table tbody th {
            background-color: #f9fafb;
            font-weight: 600;
            vertical-align: middle;
            padding: 4px;
        }
        /* 修正：授業記録画面（#lesson-view）でのみ、高さを固定比率にする */
        #lesson-view .schedule-table tbody tr { height: 12.5%; }
        
        .schedule-table td {
            cursor: pointer;
            transition: background-color 0.2s;
            padding: 0;
            position: relative;
        }
      .schedule-table td:hover { background-color: #eff6ff; }
        .lesson-cell-split {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
        }
        .lesson-cell-top {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            padding: 2px 4px;
            overflow: hidden;
            min-height: 0;
            font-size: 0.9em;
        }
        .lesson-cell-bottom {
            flex: 2;
            text-align: left;
            padding: 4px;
            overflow-y: auto;
            min-height: 0;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .lesson-info-class { font-weight: bold; }
        .lesson-info-subject {
            color: var(--text-light);
            margin-left: 4px;
        }
        /* 追加：基本時間割（設定画面）の入力欄が潰れないようにする */
        #master-schedule-table td {
            height: auto;
            min-height: 140px; /* 修正：高さを十分に確保 */
            padding: 12px 8px;
            vertical-align: top;
            box-sizing: border-box; /* 修正：パディングを含めたサイズ計算に */
        }

        /* ▼▼▼ 基本時間割：タブレット操作改善（ズーム防止・タップ領域拡大） ▼▼▼ */
        .master-class-select,
        .master-subject-select {
            font-size: 16px !important; /* iOS Safariの自動ズームを防止 */
            height: 44px;               /* Appleが推奨する最小タップターゲット */
            padding: 8px 12px !important;
            margin: 6px 0 !important;   /* 上下のセレクトボックスが近すぎないように余白を確保 */
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: #fff;
            -webkit-appearance: none;   /* デフォルトのスタイルをリセット */
            appearance: none;
        }

        /* 基本時間割：保存ボタンの底部固定（Sticky）用コンテナ */
        .schedule-sticky-footer {
            position: sticky;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9); /* 少し透ける白 */
            backdrop-filter: blur(8px);                 /* すりガラス効果 */
            -webkit-backdrop-filter: blur(8px);
            padding: 16px 24px;
            border-top: 1px solid var(--border-color);
            text-align: right;
            z-index: 100;                               /* テーブルの上に表示 */
            margin-top: 24px;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.05);   /* 境界をわかりやすく */
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */

        .lesson-cell-full {
            position: absolute;
            inset: 0;
            padding: 4px;
            overflow-y: auto;
            text-align: left;
            white-space: pre-wrap;
            word-break: break-word;
            box-sizing: border-box;
        }
        /* ▼▼▼ フェーズ3追加: 固定時間割プレビュー用スタイル ▼▼▼ */
        .master-preview {
            background-color: #f9fafb; /* 薄いグレー */
            color: var(--text-light);
        }
        .master-preview .lesson-cell-top {
            border-bottom: 1px dashed var(--border-color); /* 実線ではなく点線に */
        }
        .master-preview .lesson-info-class,
        .master-preview .lesson-info-subject {
            opacity: 0.7; /* 少し薄く表示 */
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
        
        .two-pane-view { gap: 16px; }
        .left-pane {
            width: 300px;
            flex-shrink: 0;
            max-width: 300px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            padding: 16px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            max-height: 100%;
        }
        #settings-view .content-card {
            overflow: hidden;
        }
        .left-pane h2 {
            font-size: 1.125rem;
            font-weight: 600;
            margin: 0 0 16px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }
        #inspection-view.view.active { justify-content: flex-start; }
        #inspection-table-container, #seating-chart-view .right-pane { min-height: 0; }
        #analysis-results-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .analysis-chart-container {
            width: 100%;
            max-height: 350px;
        }
        .analysis-table-container {
            flex-grow: 1;
            overflow-y: auto;
        }
        .analysis-results-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875em;
        }
        .analysis-results-table th, .analysis-results-table td {
            border: 1px solid var(--border-color);
            padding: 8px;
            text-align: left;
        }
        .analysis-results-table th { background-color: #f9fafb; }
        .top-view-columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            flex-grow: 1;
        }
        .top-view-column {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            padding: 16px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .top-view-column h3 {
            margin: 0 0 16px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--primary-color);
            font-size: 1.1rem;
            font-weight: 600;
        }
        .top-view-column .column-content {
            overflow-y: auto;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .top-lesson-item, .top-task-item, .top-file-item {
            padding: 8px;
            border-radius: 4px;
            background-color: #f9fafb;
            font-size: 0.9em;
        }
        .top-file-item {
            cursor: pointer;
            color: var(--primary-color);
            font-weight: 500;
        }
        .top-file-item:hover { text-decoration: underline; }
        .top-task-item .duty-name {
            font-size: 0.8em;
            color: var(--text-light);
            font-weight: 500;
        }
        .left-pane-list {
             list-style: none;
             padding: 0;
             margin: 0;
             overflow-y: auto;
             flex-grow: 1;
        }
        .left-pane-list li {
            padding: 12px 8px;
            cursor: pointer;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .left-pane-list li:hover { background-color: #f3f4f6; }
       .left-pane-list li.active {
            background-color: #dbeafe;
            color: var(--primary-color);
            font-weight: 600;
        }
        .right-pane {
            flex-grow: 1;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            padding: 16px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }
        .right-pane-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .right-pane-header h2 {
            margin: 0;
            font-size: 1.25rem;
        }
        #add-folder-form {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
        }
        #file-search-form {
            display: grid;
            grid-template-columns: 1fr auto auto auto;
            gap: 8px;
            margin-bottom: 16px;
            flex-shrink: 0;
        }
        #file-search-form .form-input { max-width: none; }
        #file-list-container {
            flex-grow: 1;
            overflow-y: auto;
        }
        #duty-task-list {
            flex-grow: 1;
            overflow-y: auto;
        }
        .duty-task-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            border-radius: 4px;
        }
         .duty-task-item:nth-child(odd) { background-color: #f9fafb; }
        .duty-task-item.completed span {
            text-decoration: line-through;
            color: var(--text-light);
        }
        .duty-task-item span { flex-grow: 1; }
        .duty-task-item .deadline {
            font-size: 0.8em;
            color: var(--text-light);
            margin-left: 8px;
        }
       #add-duty-task-form {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            max-width: 400px;
        }
        #student-ledger-modal-body .ledger-profile {
            display: flex;
            align-items: center;
            gap: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 24px;
        }
        #student-ledger-modal-body .ledger-photo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            background-color: #e5e7eb;
            border: 3px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        #student-ledger-modal-body .ledger-info h2 {
            margin: 0 0 8px 0;
            font-size: 1.75rem;
        }
        #student-ledger-modal-body .ledger-info p {
            margin: 4px 0;
            color: var(--text-light);
        }
        #student-ledger-modal-body .ledger-section { margin-bottom: 32px; }
        #student-ledger-modal-body .ledger-section h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 16px;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 8px;
        }
        #student-ledger-modal-body .ledger-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875em;
        }
        #student-ledger-modal-body .ledger-table th,
        #student-ledger-modal-body .ledger-table td {
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            text-align: left;
            vertical-align: top;
        }
        #student-ledger-modal-body .ledger-table th {
            background-color: #f9fafb;
            font-weight: 600;
        }
        .roster-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875em;
        }
        .roster-table th, .roster-table td {
            border: 1px solid var(--border-color);
            padding: 8px;
            text-align: left;
            min-width: 120px;
        }
        .roster-table th {
            background-color: #f9fafb;
            position: sticky;
            top: 0;
            z-index: 2;
        }
        .roster-table .student-name-col {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: #f9fafb;
            font-weight: 600;
            width: 150px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .roster-table .student-name-col:hover { background-color: #eef2ff; }
       .roster-table td input {
            width: 100%;
            border: none;
            background-color: transparent;
            padding: 4px;
            box-sizing: border-box;
        }
        .roster-table td input:focus {
            outline: 1px solid var(--primary-color);
            background-color: #eff6ff;
        }
        #note-view { gap: 16px; }
        .note-main {
            flex-grow: 1;
            background-color: #e5e7eb;
            padding: 24px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
         .note-paper {
            width: 794px;
            max-width: 100%;
            height: 1123px;
            padding: 96px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            box-sizing: border-box;
            flex-shrink: 0;
        }
        .note-sidebar {
            width: 25%;
            max-width: 250px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
            max-height: 100%;
        }
        .note-sidebar h2 {
            font-size: 1.125rem;
            font-weight: 600;
            margin: 0 0 8px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
            text-align: center;
        }
        .sidebar-button {
            width: 100%;
            text-align: left;
        }
        .note-block {
            position: relative;
            page-break-inside: avoid;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px;
            margin-bottom: 16px;
        }
        .note-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 0.8em;
            color: var(--text-light);
        }
        .note-tags .tag {
            background-color: #e5e7eb;
            color: #4b5563;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 0.9em;
            margin-right: 4px;
        }
        .ql-editor {
            font-size: 16px;
            line-height: 1.6;
            height: auto;
        }
        #note-pagination {
            margin-top: 16px;
            text-align: center;
        }
        #note-page-info {
            margin: 0 16px;
            font-weight: 500;
        }
        .page-sizer {
            position: absolute;
            visibility: hidden;
            top: -9999px;
            left: -9999px;
            width: 794px;
            padding: 96px;
            box-sizing: border-box;
        }
        .modal {
            position: fixed;
            inset: 0;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        .modal.is-open {
            opacity: 1;
            pointer-events: auto;
        }
        .modal-content {
            background: white;
            border-radius: 8px;
            width: 90%;
            display: flex;
            flex-direction: column;
            max-height: 85vh;
        }
        #handwriting-modal .modal-content { width: auto; }
        #lesson-modal .modal-content { max-width: 800px; }
        #evaluation-modal .modal-content { max-width: 500px; }
        #note-modal .modal-content { max-width: 700px; }
        #student-ledger-modal .modal-content { max-width: 800px; }
        .modal-header {
            padding: 16px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header h3 {
            margin: 0;
            font-size: 1.25rem;
        }
        .modal-body {
            padding: 24px;
            overflow-y: auto;
        }
        .modal-footer {
            padding: 16px 24px;
            background-color: #f9fafb;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        #lesson-modal-body-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        #modal-student-evaluation-list {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            height: 300px;
            overflow-y: auto;
            padding: 8px;
        }
        .student-evaluation-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
        }
        .student-evaluation-item:nth-child(odd) { background-color: #f9fafb; }
        .evaluation-button {
            font-size: 0.8em;
            padding: 4px 8px;
        }
        .evaluation-button.evaluated {
            background-color: var(--evaluated-button-bg);
            color: white;
            border-color: var(--evaluated-button-bg);
        }
        #evaluation-list .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-radius: 4px;
        }
        #evaluation-list .list-item:nth-child(odd) { background-color: #f9fafb; }
        #student-list-container {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            min-height: 150px;
            padding: 8px;
        }
        #quill-editor { height: 250px; }
        #note-tags-container .tag-checkbox { margin-right: 12px; }
        @media print {
            body, .app-container {
                background-color: #fff !important;
                padding: 0;
                margin: 0;
             }
        .app-header, .note-sidebar, .sidebar-toggle-button, .view:not(#note-view), .pagination-controls, .note-actions, #page-sizer {
            display: none !important;
        }
        .main-content {
            padding: 0 !important;
            overflow: visible !important;
        }
            #note-view {
                display: block !important;
                height: auto !important;
            }
            .note-main {
                width: 100%;
                box-shadow: none;
                border: none;
                padding: 0;
                overflow: visible !important;
                background-color: transparent !important;
    }
    .note-paper {
        box-shadow: none;
        border: none;
        width: 100%;
        padding: 0;
        height: auto;
        min-height: 0;
    }
        .note-block { page-break-inside: avoid; }
        .note-tags {
            display: none;
        }
        }
       .inspection-table {
            border-collapse: collapse;
            font-size: 0.8em;
            table-layout: fixed;
        }
        .inspection-table th, .inspection-table td {
            border: 1px solid var(--border-color);
            padding: 4px;
            text-align: center;
        }
        .inspection-table thead th {
            position: sticky;
            top: 0;
            background-color: #f9fafb;
            z-index: 2;
        }
        .inspection-table .item-name-col {
            position: sticky;
            left: 0;
            background-color: #f9fafb;
            z-index: 1;
            font-weight: 600;
            width: 150px;
            text-align: left;
            padding-left: 8px;
        }
        .inspection-table td { min-width: 80px; }
        .inspection-table select {
            width: 100%;
            border: none;
            background-color: transparent;
        }
        .inspection-table textarea {
            width: 100%;
            height: 40px;
            border: 1px solid #eee;
            border-radius: 4px;
            resize: vertical;
            font-size: 0.9em;
            padding: 2px;
           box-sizing: border-box;
        }
        .student-draggable {
            padding: 8px 12px;
            background-color: #f9fafb;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: grab;
            text-align: center;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 8px;
        }
        .student-draggable:last-child {
            margin-bottom: 0;
        }
        .student-draggable:active { cursor: grabbing; }
        .student-draggable.dragging {
            opacity: 0.5;
            background-color: #eef2ff;
        }
        #seating-chart-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
            width: 90%;
            margin: 0 auto;
        }
        .seat {
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px;
            transition: background-color 0.2s, border-color 0.2s;
            overflow: hidden;
            box-sizing: border-box;
            
            /* ▼▼▼ 修正：コンテナクエリによるサイズ調整を有効化 ▼▼▼ */
            contain: layout paint; 
            container-type: size;
            background-color: #fff;
            position: relative; /* バッジ配置のために必要 */
        }
.seat.over {
            background-color: #dbeafe;
            border-color: var(--primary-color);
        }
        /* ▼▼▼ 非表示の座席用のスタイルを追加 ▼▼▼ */
        .seat.hidden {
            visibility: hidden;
            pointer-events: none;
        }
        /* 追加：表示/非表示切替モード時は、隠れている座席を薄く表示してクリック可能にする */
        .mode-hide .seat.hidden {
            visibility: visible !important;
            pointer-events: auto !important;
            opacity: 0.3 !important;
            background-color: #d1d5db !important;
            border: 2px dashed #9ca3af !important;
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
      .seat .student-draggable {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column; /* 氏名とふりがなを縦に並べる */
            padding: 0; /* 座席の中ではpaddingをなくす */
            border: none; /* 座席の中ではborderをなくす */
            background-color: transparent; /* 座席の中では背景色をなくす */
        }
        /* ★ここがポイント：コンテナ幅(cqw)に合わせてフォントサイズ可変 */
        .student-draggable .student-name {
            font-weight: 600;
            white-space: nowrap;
            width: 100%;
            text-align: center;
            line-height: 1.1;
            /* ▼▼▼ 修正：より枠内に収まりやすいサイズ計算に変更 ▼▼▼ */
            font-size: clamp(10px, 18cqw, 24px);
        }
        .student-draggable .student-furigana {
            width: 100%;
            text-align: center;
            color: var(--text-light);
            white-space: nowrap;
            /* ▼▼▼ 修正：名前とのバランスを考慮して縮小 ▼▼▼ */
            font-size: clamp(8px, 10cqw, 12px);
        }
        
        /* 座席表の写真表示用スタイル（背景として全面に表示） */
        .student-draggable .student-photo-in-seat {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit; /* 座席の角丸に合わせる */
            object-fit: cover;
            margin-bottom: 0;
            display: none; /* デフォルトは非表示 */
            pointer-events: none; /* 画像へのドラッグやクリック干渉を防ぐ */
            z-index: 0;
            opacity: 0.4; /* テキストを読みやすくするため少し透過させる */
        }
        /* トグルON時に写真を表示 */
        .mode-show-photo .student-draggable .student-photo-in-seat {
            display: block;
        }
        /* 写真表示時は座席内の要素を下端に揃える */
        .mode-show-photo .seat .student-draggable {
            justify-content: flex-end !important;
            padding-bottom: 4px !important;
        }
        /* テキストやボタンを写真の上に配置するための設定 */
        .student-draggable .student-name,
        .student-draggable .student-furigana,
        .student-draggable .student-info-btn {
            position: relative;
            z-index: 1;
        }
        /* 写真表示時はテキストに白フチをつけて視認性を高める */
        .mode-show-photo .student-draggable .student-name,
        .mode-show-photo .student-draggable .student-furigana {
            font-weight: bold;
            text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 0 0 5px #fff;
        }

       /* ▼▼▼ ここから追加 ▼▼▼ */
        #day-header-0 { color: var(--danger-color); } /* 日曜日を赤に */
        #day-header-6 { color: #1d4ed8; } /* 土曜日を青に */
        /* ▲▲▲ ここまで追加 ▲▲▲ */

        /* ▼▼▼ ここから追加 ▼▼▼ */
        #note-view { flex-direction: row-reverse; } /* ノート画面の左右を入れ替え */
        /* ▲▲▲ ここまで追加 ▲▲▲ */

        /* ▼▼▼ ここから追加 ▼▼▼ */
        #handwriting-canvas {
            display: block;
            width: 100%;
            height: 100%;
            background-color: white;
        }
        /* ▲▲▲ ここまで追加 ▲▲▲ */

        /* ▼▼▼ ここから追加 ▼▼▼ */
        /* ノート内の画像が紙の幅を超えないようにする */
        .ql-editor img {
            max-width: 100%;
            height: auto;
        }
        /* ▲▲▲ ここまで追加 ▲▲▲ */

        /* ▼▼▼ ここから座席表用のCSSを追加 ▼▼▼ */
        #unseated-student-list {
            overflow-y: auto; /* スクロールを有効に */
            flex-grow: 1;
            min-height: 0;
        }
        #seating-chart-grid {
            grid-template-columns: repeat(6, 1fr); /* 6列のグリッドレイアウト */
            width: 100%; /* 幅をコンテナに合わせる */
        }
       .seat {
            padding: 4px; /* 固定値のpaddingに変更 */
        }
        .seat .student-draggable {
            flex-direction: column; /* 氏名とふりがなを縦に並べる */
        }
       .student-draggable .student-name {
            font-weight: 600;
            white-space: nowrap; /* この行を追加 */
            overflow: hidden;    /* この行を追加 */
        }
     
       .student-draggable .student-furigana {
            font-size: 0.7em;
            color: var(--text-light);
            white-space: nowrap;
            overflow: hidden;
        }
        /* ▲▲▲ ここまで追加 ▲▲▲ */

        /* ▼▼▼ このブロックをここに追加 ▼▼▼ */
        .analysis-top-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }
        .analysis-summary-container, .analysis-chart-container-wrapper, .analysis-details-container {
            background-color: #fff;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
         }
        /* ▲▲▲ 追加はここまで ▲▲▲ */

        /* ▼▼▼ このブロックをここに追加 ▼▼▼ */
        #drawing-canvas {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none; /* 通常時は下のテキストを触れるように */
        }
        #drawing-canvas.active {
            pointer-events: auto; /* 手書きモードのときだけ描画できるように */
            cursor: crosshair;
        }
       #note-editor-toolbar button.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        /* ▲▲▲ 追加はここまで ▲▲▲ */

        /* ▼▼▼ ここからサイドバー開閉機能のために追加 ▼▼▼ */
        .sidebar-toggle-button {
            margin-right: 12px;
            flex-shrink: 0;
        }

        /* サイドバーが隠されたときのスタイル */
        .view.sidebar-hidden .left-pane,
        .view.sidebar-hidden .note-sidebar {
            display: none !important;
        }
        
        /* ノート画面のトグルボタンは特別な配置にする */
        #note-view .note-main {
            position: relative; /* ボタンを配置する基準 */
        }
        #note-view .sidebar-toggle-button {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(2px);
            border: 1px solid var(--border-color);
        }
        .student-ghost {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            opacity: 0.8;
            pointer-events: none; /* ゴースト要素が他の要素のイベントを妨害しないようにする */
            background-color: #dbeafe;
            border: 1px solid var(--primary-color);
        }
        /* ▲▲▲ ここまで追加 ▲▲▲ */
       /* ▼▼▼ 【不具合修正】このブロックをCSSの末尾に「新たに追加」してください ▼▼▼ */
        /* 1. ノート編集モーダル内のエディタ幅を表示時と完全に一致させる */
        #note-modal #editor-container {
            width: 602px; /* 794px - (padding 96px * 2) */
            box-sizing: border-box;
        }
        /* 2. 表示用のラッパー要素のスタイルを定義 */
         .note-drawing-wrapper {
            position: relative;
            height: 450px; /* モーダルのエディタの高さと一致させる */
        }
        .note-drawing-wrapper .note-content {
            height: 100%;
            box-sizing: border-box; /* paddingを高さに含める */
        }
        /* ▲▲▲ 修正ここまで ▲▲▲ */

        /* ▼▼▼ 【最終修正】このブロックを追加してください ▼▼▼ */
        /* 表示されたノート内の段落が持つ上部の余白を削除する */
        .note-drawing-wrapper .ql-editor p {
            margin-top: 0;
        }
        /* ▲▲▲ 追加はここまで ▲▲▲ */
        /* ▼▼▼ 注釈機能のためにこのブロックを追加 ▼▼▼ */
        #annotation-canvas {
            position: absolute;
            display: none; /* 通常は非表示 */
            z-index: 20;
            cursor: crosshair;
            touch-action: none;
        }
        /* ▲▲▲ 追加はここまで ▲▲▲ */

        /* ▼▼▼ 注釈ツールボタンのレイアウト調整 ▼▼▼ */
        #annotation-controls .btn {
            flex: 1;
            padding: 8px 4px;
            font-size: 0.8rem;
        }
        /* ▲▲▲ 追加はここまで ▲▲▲ */

        /* ▲▲▲ 注釈ツールの選択状態を示すスタイルを追加 ▼▼▼ */
        #annotation-controls .btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        /* ▲▲▲ 追加はここまで ▲▲▲ */

        /* ▼▼▼ 印刷時の余白設定を追加 ▼▼▼ */
        @page {
            margin: 15mm;
        }
        /* ▲▲▲ 追加はここまで ▲▲▲ */

        /* ▼▼▼ 指名計画用のハイライト表示 ▼▼▼ */
        .seat.highlighted {
            background-color: #fef9c3; /* ハイライト色 (薄い黄色) */
            border-color: #fde047;     /* ハイライト時のボーダー色 */
            border-style: solid;
        }
        .seat.highlighted .student-draggable {
            background-color: transparent; /* 生徒要素自体の背景は透明のままにする */
        }
        /* ▲▲▲ 追加はここまで ▲▲▲ */
    /* ▼▼▼ ステップ2：新しい評価モーダルUI用CSS ▼▼▼ */
        .evaluation-row {
            display: grid;
            grid-template-columns: 1fr auto; /* 観点名 | 評価ボタン */
            gap: 12px;
            padding: 12px 8px;
            border-bottom: 1px solid var(--border-color);
            align-items: center;
        }
        .evaluation-row:last-child {
            border-bottom: none;
        }
        .evaluation-row-header {
            font-weight: 600;
            font-size: 1rem;
        }
        .evaluation-rating-buttons {
            display: flex;
            gap: 4px;
        }
        .evaluation-rating-button {
            padding: 8px 12px;
            font-size: 0.9em;
            min-width: 40px;
            border: 1px solid var(--border-color);
            background-color: #fff;
            cursor: pointer;
            border-radius: 4px;
        }
        .evaluation-rating-button:hover {
            background-color: #f9fafb;
        }
        .evaluation-rating-button.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            font-weight: 600;
        }
        /* 評価「/」用の特別なスタイル */
        .evaluation-rating-button.rating-slash.active {
            background-color: var(--text-light);
            color: white;
            border-color: var(--text-light);
        }
        .evaluation-comment-input {
            grid-column: 1 / -1; /* 2列をまたぐ */
            width: 100%;
            box-sizing: border-box;
            margin-top: 4px;
        }

        /* ▼▼▼ Step 1: クラウド同期・アーカイブ設定用CSS ▼▼▼ */
        .cloud-sync-section {
            background-color: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 24px;
        }
        .cloud-sync-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .cloud-sync-header h3 {
            margin: 0;
            color: #1e40af;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.1rem;
            border-bottom: none;
        }
        .sync-status {
            font-size: 0.85em;
            color: #60a5fa;
            background-color: #fff;
            padding: 2px 8px;
            border-radius: 12px;
            border: 1px solid #bfdbfe;
        }
        .sync-controls {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }
        .archive-section {
            border-top: 1px solid var(--border-color);
            padding-top: 24px;
        }
        .archive-controls {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */

        /* ▼▼▼ 追加: リサイズハンドルと座席表用CSS ▼▼▼ */
        #seating-sidebar-resizer {
            height: 10px;
            background-color: #e5e7eb;
            border-top: 1px solid #d1d5db;
            border-bottom: 1px solid #d1d5db;
            cursor: row-resize;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }
        #seating-sidebar-resizer:hover, #seating-sidebar-resizer.resizing {
            background-color: var(--primary-color);
        }
        #seating-sidebar-resizer::after {
            content: "";
            width: 40px;
            height: 4px;
            background-color: #9ca3af;
            border-radius: 2px;
        }
        #seating-sidebar-resizer:hover::after {
            background-color: white;
        }
        #seating-chart-grid {
            display: grid;
            gap: 12px;
            /* widthはHTML側で900pxを指定済み */
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */

        /* ▼▼▼ Step 1: フローティングパレット用CSS ▼▼▼ */
        #seat-placement-palette {
            position: fixed;
            top: 100px;
            right: 24px;
            width: 280px;
            max-height: calc(100vh - 150px);
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            z-index: 2000;
            display: none; /* JSで制御するため初期は非表示 */
            flex-direction: column;
        }
        #seat-placement-palette.visible {
            display: flex;
        }
        .palette-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            background-color: #f9fafb;
            border-radius: 8px 8px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* ▼▼▼ 追加: ドラッグ可能を示すスタイル ▼▼▼ */
            cursor: move;
            user-select: none; /* テキスト選択防止 */
            touch-action: none; /* スマホでのスクロール防止 */
            /* ▲▲▲ 追加ここまで ▲▲▲ */
        }
        .palette-header h3 {
            margin: 0;
            font-size: 1rem;
            color: var(--text-dark);
        }
        .palette-body {
            flex-grow: 1;
            overflow-y: auto;
            padding: 8px;
        }
        .palette-student-item {
            padding: 10px 12px;
            margin-bottom: 4px;
            border: 1px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background-color 0.2s;
        }
        .palette-student-item:hover {
            background-color: #f3f4f6;
        }
        .palette-student-item.selected {
            background-color: #eff6ff;
            border-color: var(--primary-color);
            color: var(--primary-color);
            font-weight: 600;
        }
        .palette-student-item.placed {
            opacity: 0.6;
            background-color: #f9fafb;
            color: var(--text-light);
        }
        .palette-student-item.placed::after {
            content: "済";
            font-size: 0.8em;
            background-color: #e5e7eb;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        /* 既存のドラッグ用生徒リストを非表示にする */
        #unseated-student-list {
            display: none !important;
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */

        /* ▼▼▼ 追加：整理モード＆アクションメニュー用CSS ▼▼▼ */
        .context-menu {
            position: fixed;
            top: 50%; left: 50%; transform: translate(-50%, -50%);
            background-color: white; border: 1px solid var(--border-color);
            border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            z-index: 2000; width: 280px; overflow: hidden;
        }
        .menu-overlay {
            position: fixed; inset: 0; background-color: rgba(0,0,0,0.2);
            z-index: 1999; display: none;
        }
        .menu-overlay.visible { display: block; }
        .context-menu-item {
            padding: 16px 24px; cursor: pointer; font-size: 1.1rem; font-weight: 500;
            display: flex; align-items: center; gap: 12px; color: var(--text-dark);
            border-bottom: 1px solid #f3f4f6;
        }
        .context-menu-item:last-child { border-bottom: none; }
        .context-menu-item:active { background-color: #e5e7eb; }
        .context-menu-item.danger { color: var(--danger-color); }
        .context-menu-item.disabled {
            color: var(--text-light); pointer-events: none; opacity: 0.4; background-color: #f9fafb;
        }
        /* 整理モードON時のスタイル */
        .mode-organizing .schedule-table { border: 2px solid var(--primary-color); }
        .mode-organizing .schedule-table th { background-color: #eff6ff; }
        #toggle-edit-mode-btn.active {
            background-color: var(--primary-color); color: white; border-color: var(--primary-color);
        }
        .cut-source {
            opacity: 0.4; background-color: #f3f4f6;
            border: 2px dashed var(--primary-color) !important; position: relative;
        }
        .cut-source::after {
            content: "移動元"; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%); color: var(--primary-color);
            font-weight: bold; font-size: 0.8rem; pointer-events: none;
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */

        /* ▼▼▼ ステップ3：CSS修正 ▼▼▼ */
        /* 指名モード時は、生徒要素のドラッグカーソルを無効化（ポインターに変更） */
        .mode-nomination .seat .student-draggable {
            cursor: pointer;
        }
        /* 指名モード時は、空の座席のカーソルをデフォルトに変更 */
        .mode-nomination .seat {
            cursor: default;
        }
        /* 指名モード時は、ハイライト可能な座席（生徒がいる座席）はポインターにする */
        /* ▼▼▼ 修正：:has() を廃止し、JSで付与するクラスで判定して高速化 ▼▼▼ */
        .mode-nomination .seat.has-student {
            cursor: pointer;
        }

        /* ▼▼▼ ステップ1：座席表拡張用CSS ▼▼▼ */
        /* 出席状態のスタイル */
        .seat.status-absent {
            background-color: #fee2e2; /* 薄い赤 */
            border-color: #ef4444;
        }
        .seat.status-late {
            background-color: #fef3c7; /* 薄い黄色 */
            border-color: #f59e0b;
        }
        .seat.status-absent .student-draggable,
        .seat.status-late .student-draggable {
            opacity: 0.8;
        }

        /* 評価バッジ */
        .seat-evaluation-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 24px;
            height: 24px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            font-size: 0.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
            z-index: 5;
        }

        /* 簡易評価ポップアップ */
        .seat-evaluation-popup {
            position: absolute;
            bottom: 100%; /* 座席の上に表示 */
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 8px;
            display: flex;
            gap: 4px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 20;
            margin-bottom: 8px;
            white-space: nowrap;
        }
        /* 吹き出しの三角 */
        .seat-evaluation-popup::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -6px;
            border-width: 6px;
            border-style: solid;
            border-color: white transparent transparent transparent;
        }
        .seat-popup-btn {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background-color: #f9fafb;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .seat-popup-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        /* モード別のカーソル制御 */
        /* ▼▼▼ Step 3 修正: 配置モードもポインターカーソルにする ▼▼▼ */
        .mode-placement .seat, .mode-attendance .seat, .mode-evaluation .seat {
            cursor: pointer;
        }
        /* ▲▲▲ 修正ここまで ▲▲▲ */
        
        /* ▼▼▼ ステップ2：トップページ用追加CSS ▼▼▼ */
        #top-today-schedule .list-item:hover {
            background-color: #eef2ff !important;
        }
        .top-task-clickable:hover {
            background-color: #eef2ff !important;
        }

        /* ▼▼▼ ステップ4：生徒台帳拡張用CSS ▼▼▼ */
        .ledger-note-item {
            padding: 8px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .ledger-note-item:last-child {
            border-bottom: none;
        }
        .ledger-note-item:hover {
            background-color: #eef2ff;
        }
        .ledger-note-date {
            font-size: 0.85em;
            color: var(--text-light);
            margin-bottom: 2px;
        }
        .ledger-note-content {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-dark);
        }
        
        /* ▼▼▼ 座席表 凡例用CSS ▼▼▼ */
        .seating-legend {
            display: flex;
            gap: 16px;
            margin-top: 12px;
            padding: 8px;
            background-color: #fff;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.9em;
            justify-content: center;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .legend-box {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 2px solid transparent;
        }
        .legend-box.absent {
            background-color: #fee2e2; /* 欠席の背景色 */
            border-color: #ef4444;     /* 欠席の枠線色 */
        }
        .legend-box.late {
            background-color: #fef3c7; /* 遅刻の背景色 */
            border-color: #f59e0b;     /* 遅刻の枠線色 */
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
     /* ▼▼▼ 座席表 左サイドバー修正用CSS ▼▼▼ */
        /* サイドバー全体のスクロールを無効化し、Flexboxで制御 */
        #seating-chart-view .left-pane {
            display: flex;
            flex-direction: column;
            overflow: hidden !important; /* 全体のスクロールを止める */
        }

        /* 上部の設定エリア */
        .sidebar-controls-wrapper {
            flex-shrink: 0; /* 設定エリアは縮めない */
            overflow-y: auto; /* 設定項目が多すぎる場合のみスクロール */
            max-height: 50vh; /* 画面の半分以上は占有しない */
            padding-bottom: 16px;
            margin-bottom: 16px;
        }

        /* 下部の生徒リストエリア */
        #unseated-student-list {
            flex-grow: 1; /* 残りの高さを全て使う */
            overflow-y: auto; /* リスト内だけでスクロール */
            min-height: 150px; /* 最低限の高さを確保 */
            
            /* HTMLタグから削除したスタイルをここに適用 */
            border-top: 1px solid var(--border-color);
            padding-top: 16px;
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
      /* ▼▼▼ 追加：タブレット・スマホ対応レスポンシブCSS ▼▼▼ */
        @media screen and (max-width: 1024px) {
            /* 全体の横幅制限を解除し、縦並びに変更 */
            .main-content {
                min-width: 100%;
                flex-direction: column;
                padding: 12px;
                overflow-y: auto;
            }

            /* 2カラム画面を縦積みに */
            .two-pane-view {
                flex-direction: column;
                gap: 16px;
            }

            /* 左サイドバーの高さを固定しスクロール可能に */
            .left-pane, 
            #seating-chart-view .left-pane {
                width: 100%;
                max-width: 100%;
                height: 300px;
                flex-shrink: 0;
                margin-bottom: 16px;
            }

            /* ノート画面はサイドバーを下に配置 */
            #note-view {
                flex-direction: column-reverse;
            }
            .note-sidebar {
                width: 100%;
                max-width: 100%;
                height: auto;
                max-height: 300px;
            }
            
            /* ヘッダーナビゲーションを横スクロール可能に */
            .header-nav {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 4px;
            }

            /* 縦持ち時はリサイズハンドルを非表示 */
            #seating-sidebar-resizer {
                display: none;
            }
        }

        /* ▼▼▼ 追加：生徒カード内の情報ボタン(i) ▼▼▼ */
        .student-info-btn {
            /* 修正: デフォルト(写真非表示)は名前の下に配置するため通常フローにする */
            position: relative;
            margin-top: 2px;
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid var(--primary-color);
            border-radius: 50%;
            color: var(--primary-color);
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 5;
            font-weight: bold;
            pointer-events: auto;
        }

        /* 追加：未配置リストにいる時は、従来通り生徒カードの右上に絶対配置 */
        #unseated-student-list .student-info-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            margin-top: 0;
        }

        /* 追加：写真表示モードの時のみ、座席枠の右上に絶対配置して名前の配置干渉を防ぐ */
        .mode-show-photo .seat .student-info-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            margin-top: 0;
        }

    /* ボタン配置の基準位置設定 */
    .student-draggable {
        position: relative; 
    }
    /* ▼▼▼ 追加: 座席内の場合は基準位置を「座席(.seat)」に変更し、レイアウト干渉を防ぐ ▼▼▼ */
    .seat .student-draggable {
        position: static; 
    }
    /* ▲▲▲ 追加ここまで ▲▲▲ */
    
    /* ボタン配置の基準位置設定 */
    .student-draggable {
        position: relative; 
    }
    /* ▼▼▼ 追加: 座席内の場合は基準位置を「座席(.seat)」に変更し、レイアウト干渉を防ぐ ▼▼▼ */
    .seat .student-draggable {
        position: static; 
    }
    /* ▲▲▲ 追加ここまで ▲▲▲ */

    /* ▼▼▼ 追加：モード切替時のカーソル制御（タブレット高速化用） ▼▼▼ */
        /* 親要素(seating-chart-grid-container)のクラスに応じてカーソルを変更 */
        .mode-placement .student-draggable { cursor: grab; }
        .mode-placement .student-draggable:active { cursor: grabbing; }
        
        .mode-nomination .seat,
        .mode-attendance .seat,
        .mode-evaluation .seat { cursor: pointer; }
        
        .mode-nomination .student-draggable,
        .mode-attendance .student-draggable,
        .mode-evaluation .student-draggable { pointer-events: none; } /* 生徒の下にある座席のクリック判定を優先 */
        /* ▲▲▲ 追加ここまで ▲▲▲ */
       /* ▼▼▼ 追加：同期中ローディングオーバーレイ ▼▼▼ */
        .loading-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .loading-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }
        /* ▼▼▼ 修正：パスワード入力モーダルをローディング画面より手前に表示する ▼▼▼ */
        #sync-password-modal {
            z-index: 2001; /* loading-overlay (1000) より大きくする */
        }
        /* ▲▲▲ 修正ここまで ▲▲▲ */
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
/* ▼▼▼ 追加：アプリロック画面用CSS ▼▼▼ */
        #app-lock-overlay {
            position: fixed;
            inset: 0;
            background-color: #1f2937;
            z-index: 10000; /* 最前面 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            transition: opacity 0.3s;
        }
        #app-lock-overlay.hidden {
            display: none;
            opacity: 0;
            pointer-events: none;
        }
        .lock-container {
            text-align: center;
            background-color: #374151;
            padding: 3rem;
            border-radius: 1rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            max-width: 90%;
            width: 400px;
        }
        .passcode-input {
            font-size: 2.5rem;
            text-align: center;
            letter-spacing: 0.5rem;
            padding: 0.5rem;
            width: 100%;
            margin: 1.5rem 0;
            border-radius: 0.5rem;
            border: 2px solid #4b5563;
            background-color: #111827;
            color: white;
            box-sizing: border-box;
        }
        .passcode-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
       /* ▼▼▼ 追加：比較表示モーダル用CSS ▼▼▼ */
        /* 比較モーダル全体のレイアウト */
        #compare-container {
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: hidden;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            grid-auto-rows: minmax(600px, auto);
            gap: 16px;
            padding: 16px;
            background-color: #f3f4f6;
        }
        .compare-item {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 500px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .compare-header {
            padding: 10px 12px;
            background-color: #f9fafb;
            border-bottom: 1px solid var(--border-color);
            font-weight: 600;
            font-size: 0.9em;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        /* PDF表示エリア（スクロール可能にする） */
        .compare-body {
            flex-grow: 1;
            position: relative;
            overflow-y: auto;        /* 縦スクロールを有効化 */
            background-color: #525659; /* PDFビューアらしい暗めの背景色 */
            display: block;          /* Flexbox解除 */
            height: 100%;
            min-height: 0;
            padding: 16px;
            box-sizing: border-box;
        }
        /* PDFキャンバスと画像のスタイル */
        .compare-body canvas,
        .compare-body img {
            width: 100% !important;
            height: auto !important;
            display: block;
            margin-bottom: 16px;     /* ページ間の余白 */
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            background-color: white;
            object-fit: contain;
        }
        .compare-body canvas:last-child,
        .compare-body img:last-child {
            margin-bottom: 0;
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
        /* ▼▼▼ 追加：更新通知トースト用CSS ▼▼▼ */
        #update-toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #1f2937;
            color: white;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 9999;
            display: none;
            align-items: center;
            gap: 12px;
            max-width: 350px;
            border-left: 4px solid var(--primary-color);
        }
        #update-toast.show {
            display: flex;
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from { transform: translateY(100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        /* ▲▲▲ 追加ここまで ▲▲▲ */
        /* ▼▼▼ 座席表の視点切替（スクロール反転対策版） ▼▼▼ */
/* コンテナをフレックスボックス化し、要素の「表示順」と「回転」を個別に制御 */
#seating-chart-grid-container {
    display: flex;
    flex-direction: column;
}

#seating-chart-grid, .desk-label {
    flex-shrink: 0;
}

/* 通常時の並び順 */
#seating-chart-grid { order: 1; }
.desk-label { order: 2; }

/* 反転時の設定 */
#seating-chart-grid-container.flipped {
    transform: none; /* コンテナ自体の回転を解除（スクロール正常化） */
}

/* 座席の枠組み（グリッド）だけを下に移動して180度回転 */
#seating-chart-grid-container.flipped #seating-chart-grid {
    order: 2;
    transform: rotate(180deg);
    transition: transform 0.4s ease;
}

/* 教卓を上に移動し、下側に余白を作る */
#seating-chart-grid-container.flipped .desk-label {
    order: 1;
    transform: none; /* 教卓の回転は不要 */
    margin: 0 auto 24px auto !important; 
}

/* 生徒カードと評価バッジの文字向きを正位置に戻す */
#seating-chart-grid-container.flipped .student-draggable,
#seating-chart-grid-container.flipped .seat-evaluation-badge {
    transform: rotate(180deg);
}
/* ▲▲▲ ここまで ▲▲▲ */