/* =========================================================
   黒板テーマ 共通スタイル
   ========================================================= */

:root {
    --board: #2f5d50;          /* 黒板グリーン */
    --board-dark: #234a3f;
    --wood: #d9bf8c;           /* 黒板の木枠 */
    --wood-dark: #b99a63;
    --cream: #faf7f0;          /* 背景のクリーム色 */
    --chalk-white: #f4f1ea;
    --chalk-yellow: #f5d76e;
    --chalk-pink: #f4a7b9;
    --chalk-blue: #9cc9e8;
    --chalk-green: #a8d5a2;
    --chalk-orange: #f6b98a;
    --text: #23302c;
    --muted: #6b756f;
}

body {
    background-color: var(--cream);
    color: var(--text);
    font-family: "Noto Sans JP", system-ui, sans-serif;
}

.chalk-font {
    font-family: "Yomogi", "Noto Sans JP", cursive;
}

/* ---------- ボタン ---------- */
.btn-board {
    background-color: var(--board);
    border-color: var(--board);
    color: #fff;
}
.btn-board:hover,
.btn-board:focus {
    background-color: var(--board-dark);
    border-color: var(--board-dark);
    color: #fff;
}
.btn-outline-chalk {
    border: 2px solid var(--chalk-yellow);
    color: #6b5a12;
    background: #fff;
}
.btn-outline-chalk:hover {
    background: #fff8dc;
    color: #6b5a12;
}
.btn-outline-board {
    border: 1.5px solid var(--board);
    color: var(--board);
    background: #fff;
    border-radius: 8px;
}
.btn-outline-board:hover,
.btn-outline-board:focus {
    background: var(--board);
    color: #fff;
}
.link-board {
    color: var(--board);
}

/* ---------- 黒板（ログイン左側・ヘッダー） ---------- */
.blackboard {
    position: relative;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.07), transparent 60%),
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--board);
    border: 14px solid var(--wood);
    box-shadow: inset 0 0 40px rgba(0,0,0,.35);
    color: var(--chalk-white);
}
.chalk-tray {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    background: linear-gradient(var(--wood), var(--wood-dark));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12%;
}
.chalk {
    display: inline-block;
    width: 56px;
    height: 10px;
    border-radius: 5px;
}
.chalk.white  { background: var(--chalk-white); }
.chalk.yellow { background: var(--chalk-yellow); }
.chalk.pink   { background: var(--chalk-pink); }
.chalk.blue   { background: var(--chalk-blue); }
.eraser {
    margin-left: auto;
    width: 90px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(#4a4a4a 50%, #e9e2d3 50%);
}
.doodle {
    position: absolute;
    color: rgba(255,255,255,.18);
    font-family: "Yomogi", cursive;
}

/* ---------- ログイン画面 ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
}
.login-board {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 40px 80px;
}
.login-board .title {
    font-size: clamp(1.8rem, 3vw, 3rem);
    letter-spacing: .12em;
    white-space: nowrap;
}
.login-board .tagline {
    color: var(--chalk-yellow);
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    letter-spacing: .1em;
    margin-top: 1.2rem;
}
.login-board .sub {
    color: rgba(244,241,234,.85);
    letter-spacing: .08em;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(244,241,234,.35);
}
.login-form-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 40px 24px;
}
.login-form {
    width: 100%;
    max-width: 440px;
}
.login-form .form-control {
    padding: .75rem 1rem;
}

/* スマホ・タブレット縦：黒板を上の短いヘッダーに */
@media (max-width: 991.98px) {
    .login-wrap {
        flex-direction: column;
    }
    .login-board {
        flex: 0 0 auto;
        padding: 28px 16px 56px;
        border-width: 8px;
    }
    .login-board .sub,
    .login-board .doodle {
        display: none;
    }
    .login-board .title {
        font-size: 1.6rem;
    }
    .login-board .tagline {
        font-size: 1rem;
        margin-top: .5rem;
    }
    .chalk-tray {
        height: 26px;
    }
    .chalk {
        width: 36px;
        height: 8px;
    }
    .eraser {
        width: 60px;
        height: 14px;
    }
    .login-form-side {
        flex: 1 0 auto;
        align-items: flex-start;
        padding-top: 32px;
    }
}

/* ---------- 教員画面：ヘッダー・サイドバー ---------- */
.app-header {
    background: var(--board);
    border-bottom: 6px solid var(--wood);
    color: var(--chalk-white);
}
.app-header .brand {
    color: var(--chalk-white);
    text-decoration: none;
    font-size: 1.6rem;
    letter-spacing: .08em;
}
.app-header .brand,
.app-header .btn {
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .app-header .brand {
        font-size: 1.05rem;
    }
}
.logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: var(--chalk-yellow);
    font-weight: bold;
}

.sidebar {
    background: #fff;
    border-right: 1px solid #e7e1d3;
}
@media (min-width: 768px) {
    .sidebar {
        min-height: calc(100vh - 66px);
    }
}
.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: var(--text);
    text-decoration: none;
    border-left: 5px solid transparent;
}
.side-link:hover {
    background: #f4f0e6;
}
.side-link.active {
    background: #eef4f1;
    border-left-color: var(--board);
    font-weight: bold;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 機能ごとのチョーク色 */
.c-home     { background: var(--board); }
.c-time     { background: var(--chalk-blue); }
.c-sub      { background: var(--chalk-yellow); }
.c-submit   { background: var(--chalk-pink); }
.c-quiz     { background: var(--chalk-green); }
.c-attend   { background: var(--chalk-orange); }
.c-student  { background: #c9b6e4; }
.c-class    { background: #8fd3c7; }
.c-teacher  { background: #e8c39e; }

.content {
    padding: 28px;
}
@media (max-width: 575.98px) {
    .content {
        padding: 18px 14px;
    }
}

/* ---------- カード ---------- */
.note-card {
    background: #fff;
    border: 1px solid #e7e1d3;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.summary-card {
    border-top: 6px solid;
}
.summary-card .number {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.1;
}
.bt-time   { border-top-color: var(--chalk-blue); }
.bt-sub    { border-top-color: var(--chalk-yellow); }
.bt-submit { border-top-color: var(--chalk-pink); }
.bt-quiz   { border-top-color: var(--chalk-green); }

/* ノートの罫線 */
.ruled {
    background-image: repeating-linear-gradient(
        #fff 0, #fff 39px, #eef2f5 39px, #eef2f5 40px
    );
}

/* ---------- 時間割 ---------- */
.tt th,
.tt td {
    text-align: center;
    vertical-align: middle;
}
.tt td {
    height: 64px;
    min-width: 96px;
}
.tt .free {
    color: #b0b6b2;
}
.tt .cell-sub {
    background: #fff6d6;
}
.tt .cell-event {
    background: #eceae4;
    color: var(--muted);
}
.badge-sub {
    background: var(--chalk-yellow);
    color: #4d3f05;
}

/* ---------- 生徒用テスト ---------- */
.test-body {
    background:
        repeating-linear-gradient(#fdfcf8 0, #fdfcf8 43px, #dfe8f0 43px, #dfe8f0 44px);
    min-height: 100vh;
}
.test-header {
    background: var(--board);
    border-bottom: 8px solid var(--wood);
    color: var(--chalk-white);
}
.test-card {
    max-width: 760px;
    margin: 0 auto;
}
.code-input {
    font-size: 2.4rem;
    letter-spacing: .5em;
    text-align: center;
}
.name-btn {
    font-size: 1.15rem;
    padding: 14px 10px;
}

/* 回答ボタン（ラジオボタンを大きなボタンに見せる） */
.answer-option input {
    display: none;
}
.answer-option label {
    display: block;
    cursor: pointer;
    border: 3px solid #d7dcd9;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    font-size: 1.4rem;
    text-align: center;
    transition: .1s;
}
.answer-option input:checked + label {
    border-color: var(--board);
    background: #d4e8de;
    font-weight: bold;
    box-shadow: 0 0 0 3px rgba(47,93,80,.2);
}
.maru-label {
    font-size: 3.2rem !important;
    line-height: 1;
}

/* 消しゴム風のクリアボタン */
.btn-eraser {
    background: linear-gradient(90deg, #4f8fd8 0 28%, #fff 28% 100%);
    border: 2px solid #c9ced3;
    border-radius: 8px;
    padding: 10px 22px 10px 52px;
    color: var(--text);
}
.btn-eraser:hover {
    background: linear-gradient(90deg, #3f7fc8 0 28%, #f6f6f6 28% 100%);
}

/* 鉛筆風の提出ボタン */
.btn-pencil {
    position: relative;
    background: var(--chalk-yellow);
    border: none;
    color: #4d3f05;
    font-weight: bold;
    padding: 12px 40px 12px 28px;
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}
.btn-pencil:hover {
    background: #efc94f;
    color: #4d3f05;
}

.progress-dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    margin: 0 3px;
}
.progress-dots span.on {
    background: var(--chalk-yellow);
}

/* ---------- 切り替えタブ（マイ時間割／クラス時間割） ---------- */
.seg-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #ece5d6;
    border-radius: 12px;
}
.seg-tabs a {
    padding: 8px 20px;
    border-radius: 9px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.seg-tabs a:hover {
    color: var(--board);
    background: rgba(255,255,255,.6);
}
.seg-tabs a.active {
    background: var(--board);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* ---------- 生徒登録 ---------- */
.form-card {
    max-width: 720px;
}
.req {
    display: inline-block;
    font-size: .72rem;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 4px;
    background: #fbe3e7;
    color: #b4233c;
    vertical-align: middle;
}
.fixed-value {
    background: #f3efe5;
    border: 1px solid #e2dccd;
    border-radius: .375rem;
    padding: .6rem .9rem;
    font-weight: bold;
}
.seg-tabs .disabled {
    padding: 8px 20px;
    color: #a9aea9;
    cursor: not-allowed;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .seg-tabs {
        display: flex;
        max-width: 100%;
    }
    .seg-tabs a,
    .seg-tabs .disabled {
        flex: 1 1 0;
        text-align: center;
        white-space: normal;
        padding: 8px 10px;
    }
}

/* ---------- 入力 → 確認 → 完了 のステップ表示 ---------- */
.steps {
    display: flex;
    gap: 8px;
    max-width: 720px;
    margin-bottom: 1.25rem;
    padding: 0;
    list-style: none;
}
.steps li {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    border-bottom: 4px solid #e2dccd;
    color: #a9aea9;
    font-size: .9rem;
}
.steps li.done {
    border-bottom-color: #9fbfb3;
    color: var(--muted);
}
.steps li.current {
    border-bottom-color: var(--board);
    color: var(--board);
    font-weight: bold;
}
.confirm-table th {
    width: 32%;
    color: var(--muted);
    font-weight: normal;
    background: #faf7f0;
}

/* ---------- 管理者画面 ---------- */
.admin-header {
    background: #24302c;            /* 教員画面より濃い色で区別 */
    border-bottom: 6px solid var(--wood);
    color: var(--chalk-white);
}
.admin-badge {
    background: var(--chalk-yellow);
    color: #4d3f05;
    font-size: .75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    vertical-align: middle;
}
.admin-sidebar .side-link.active {
    border-left-color: #24302c;
    background: #eceee9;
}
.bt-class   { border-top-color: #8fd3c7; }
.bt-teacher { border-top-color: #e8c39e; }
.bt-student { border-top-color: #c9b6e4; }

/* ---------- 小テスト（教員側） ---------- */
.badge-open   { background: #d4ecdc; color: #1f6b3a; }
.badge-closed { background: #e6e3dc; color: #5c605d; }
.badge-draft  { background: #fff1c2; color: #6b5a12; }
.question-card {
    border: 1px solid #e2dccd;
    border-left: 5px solid var(--chalk-green);
    border-radius: 12px;
    background: #fff;
}
.code-board {
    border-width: 10px;
    border-radius: 6px;
    text-align: center;
    padding: 22px 16px 46px;
}
.code-board .code {
    font-size: clamp(2.6rem, 6vw, 4rem);
    letter-spacing: .35em;
    font-family: "Yomogi", "Noto Sans JP", monospace;
    color: var(--chalk-white);
}
.mark-o { color: #d33a4a; font-weight: bold; }
.mark-x { color: #3d6fb5; font-weight: bold; }
.rate-bar { height: 12px; }

/* チェック・ラジオの色を黒板グリーンに（Bootstrapの青を使わない） */
.form-check-input:checked {
    background-color: var(--board);
    border-color: var(--board);
}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: #7fa89a;
    box-shadow: 0 0 0 .2rem rgba(47,93,80,.18);
}

/* サイドバーの見出し（学校管理など） */
.side-section {
    margin: 14px 18px 4px;
    padding-top: 10px;
    border-top: 1px solid #e7e1d3;
    font-size: .78rem;
    font-weight: bold;
    color: var(--muted);
    letter-spacing: .08em;
}

/* ---------- テスト作成 ---------- */
.badge-ready { background: #dfeaf7; color: #2c5a8a; }
.badge-mode  { background: #f3efe5; color: var(--muted); font-weight: normal; border: 1px solid #e2dccd; }
.subject-badge { background: var(--board); color: #fff; }

/* 教科の選択カード */
.subject-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.subject-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    border: 2px solid #e2dccd;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.subject-card .subject-name { font-size: 1.15rem; font-weight: bold; }
.subject-card .subject-soon { font-size: .72rem; color: #a9aea9; margin-top: 2px; }
.subject-card:hover { border-color: #9fbfb3; }
.btn-check:checked + .subject-card {
    border-color: var(--board);
    background: #eef4f1;
    color: var(--board);
    box-shadow: inset 0 0 0 1px var(--board);
}
.btn-check:disabled + .subject-card {
    background: #f6f4ef;
    color: #b5b8b4;
    cursor: not-allowed;
}
@media (max-width: 575.98px) {
    .subject-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 出し方の選択カード */
.mode-card {
    display: block;
    padding: 14px 16px;
    border: 2px solid #e2dccd;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.mode-card:hover { border-color: #9fbfb3; }
.btn-check:checked + .mode-card {
    border-color: var(--board);
    background: #eef4f1;
    box-shadow: inset 0 0 0 1px var(--board);
}

/* 問題入力 */
.format-note {
    background: #fff;
    border: 1px dashed #c9c1ae;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .92rem;
}
.qt-listening, .qt-fill { border-left-color: var(--chalk-blue, #9cc7e8); }
.qt-reading, .qt-written { border-left-color: var(--chalk-pink, #f1a7b5); }
.qt-calc { border-left-color: var(--chalk-yellow); }
.sub-q {
    border-top: 1px dashed #e2dccd;
    padding: 14px 0 6px;
}
.math-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.math-bar .btn { min-width: 40px; font-family: "Times New Roman", serif; }
.figure-drop {
    border: 2px dashed #c9c1ae;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    background: #faf7f0;
}
.summary-sticky { position: sticky; top: 16px; }
.total-pt { font-size: 2rem; font-weight: bold; color: var(--board); line-height: 1; }

/* プレビュー（印刷イメージ） */
.paper-wrap {
    background: #e9e4d8;
    border-radius: 12px;
    padding: 24px;
}
.paper {
    background: #fff;
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 44px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
    color: #222;
    font-size: .95rem;
}
.paper-title { text-align: center; font-size: 1.2rem; font-weight: bold;
               font-family: "Noto Sans JP", sans-serif; }
.paper-sub { text-align: center; font-size: .85rem; margin: 4px 0 14px; }
.paper-name { width: 100%; border: 1.5px solid #555; margin-bottom: 14px; }
.paper-name td { padding: 12px 8px; border-left: 1px solid #555; }
.paper-name td:first-child { border-left: none; }
.paper-name td:nth-child(3) { border-left: none; }
.paper-name .score-l { border-left: 1.5px solid #555; }
.paper-sec { margin-bottom: 14px; }
.paper-sec-title { font-weight: bold; font-family: "Noto Sans JP", sans-serif; margin: 10px 0 6px; }
.paper-sec-title small { font-weight: normal; font-size: .8rem; }
.paper-q { padding-left: 2.4em; text-indent: -2.4em; margin: 6px 0 4px; line-height: 1.8; }
.paper-choices { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-left: 2.4em; margin-bottom: 6px; }
.paper-box { border: 1px solid #666; padding: 8px 12px; margin-bottom: 8px; line-height: 1.8; }
.paper-fig { text-align: center; color: #888; padding: 28px 12px; }
.paper-ans { width: 100%; border-collapse: collapse; }
.paper-ans th, .paper-ans td { border: 1px solid #555; padding: 10px 8px; height: 44px; }
.paper-ans tr.tall td, .paper-ans tr.tall th { height: 88px; }
.paper-ans th { width: 9%; text-align: center; background: #f2f2f2; font-weight: normal; }
.paper-ans td.pt { width: 12%; text-align: center; font-size: .8rem; }
.paper-ans .key { color: #c62d3c; font-weight: bold; font-family: "Noto Sans JP", sans-serif; }
.paper-foot { font-size: .8rem; margin-top: 12px; }
@media (max-width: 575.98px) {
    .paper-wrap { padding: 8px; }
    .paper { padding: 20px 16px; font-size: .85rem; }
}

/* ---------- 補欠・出欠・提出物 ---------- */
.badge-att { background: #fde3cf; color: #8a4a17; }
.task-box {
    background: #faf7f0;
    border: 1px solid #e2dccd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .92rem;
}
.att-count { display: flex; flex-wrap: wrap; gap: 8px; }
.att-pill {
    display: flex; align-items: baseline; gap: 10px;
    background: #fff; border: 1px solid #e2dccd; border-radius: 10px;
    padding: 8px 16px; min-width: 110px;
}
.att-pill span { color: var(--muted); font-size: .85rem; }
.att-pill b { font-size: 1.5rem; }
.att-pill.st-1 { border-top: 4px solid var(--chalk-green); }
.att-pill.st-2 { border-top: 4px solid var(--chalk-pink); }
.att-pill.st-3 { border-top: 4px solid var(--chalk-yellow); }
.att-pill.st-4 { border-top: 4px solid var(--chalk-orange); }
.att-row-alert td { background: #fff6f6; }
/* 出欠ボタン：選んだ状態の色を分ける */
.att-btns .btn { min-width: 52px; }
.att-btns .btn-check:checked + .s2 { background: #c84a5c; border-color: #c84a5c; color: #fff; }
.att-btns .btn-check:checked + .s3 { background: #d9a520; border-color: #d9a520; color: #fff; }
.att-btns .btn-check:checked + .s4 { background: #d97d3a; border-color: #d97d3a; color: #fff; }
.soon-card { border-style: dashed; background: #faf7f0; }
.btn-check:checked + .btn-outline-board { background: var(--board); border-color: var(--board); color: #fff; }

/* ---------- 生徒用テスト（テスト作成の問題を表示） ---------- */
.sec-label { font-size: 1.05rem; }
.q-formula { font-family: "Times New Roman", "Noto Serif JP", serif; letter-spacing: .03em; }
.answer-input { font-size: 1.4rem; border-width: 2px; }
.passage {
    background: #fdfcf8; border: 1px solid #d7dcd9; border-radius: 10px;
    padding: 16px 18px; font-size: 1.15rem; line-height: 1.9;
}
.figure-ph {
    border: 2px dashed #c9c1ae; border-radius: 10px; background: #faf7f0;
    color: #8a8f8b; text-align: center; padding: 40px 12px;
}
.play-btn { padding: 16px; font-size: 1.3rem; }
.answer-chip {
    display: flex; justify-content: space-between; align-items: center;
    border: 2px solid #d4e8de; background: #f2f8f5; border-radius: 10px;
    padding: 10px 12px; color: var(--text); text-decoration: none; font-size: .95rem;
}
.answer-chip b { color: var(--board); }
.answer-chip.blank { border-color: #f1b7c1; background: #fff4f6; }
.answer-chip.blank b { color: #c84a5c; }
.card-invalid { border: 1.5px solid #dc3545 !important; }
.group-invalid .input-group-text:first-child { border-color: #dc3545; background: #fdecee; }
.empty-state {
    border: 2px dashed #c9c1ae; border-radius: 12px; background: #fff;
    padding: 28px 16px; text-align: center;
}
.empty-state.empty-invalid { border-color: #dc3545; background: #fff6f6; }