/* ==========================================================================
   スコーレ 教務システム 画面スタイル
   --------------------------------------------------------------------------
   配色・文字・角丸・影は「Tailwind CSS v4 日本の学校システム向けテーマ実装ガイド」の
   @theme の値をCSS変数に置き換えたもの。変数名もガイドに合わせてあるため、
   将来 Tailwind へ移す場合は @theme にそのまま移せる。
   使い方と判断の理由は docs/05_デザイン指針.md を参照。

   構成
     1. デザイントークン
     2. 土台
     3. 画面の骨組み（ヘッダー・左メニュー・タブ・本文）
     4. ページ見出し・カード
     5. 表
     6. フォーム
     7. ボタン
     8. バッジ
     9. アラート
    10. ログイン画面
    11. 補助クラス
    12. 画面幅ごとの調整・印刷
   ========================================================================== */


/* 1. デザイントークン ===================================================== */

:root {
    /* プライマリ：落ち着いた青。操作・リンク・現在地に使う */
    --color-primary-50:  #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af; /* ガイドのバッジ文字色から補った値 */
    --color-primary-900: #1e3a8a;

    /* セカンダリ：深い緑。完了・出席に使う */
    --color-secondary-50:  #ecfdf5;
    --color-secondary-100: #d1fae5;
    --color-secondary-500: #10b981;
    --color-secondary-600: #059669;
    --color-secondary-700: #047857;
    --color-secondary-800: #065f46; /* ガイドのバッジ文字色から補った値 */

    /* 注意喚起：要確認に使う */
    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7; /* ガイドのバッジ背景色から補った値 */
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-800: #92400e; /* ガイドのバッジ文字色から補った値 */

    /* 危険：エラー・削除・欠席に使う */
    --color-danger-50:  #fef2f2;
    --color-danger-100: #fee2e2; /* ガイドのバッジ背景色から補った値 */
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c; /* ガイドのボタンhover色から補った値 */
    --color-danger-800: #991b1b; /* ガイドのバッジ文字色から補った値 */

    /* ニュートラル：色に意味を持たせない部分はすべてこれ */
    --color-neutral-50:  #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-500: #737373;
    --color-neutral-700: #404040;
    --color-neutral-900: #171717;

    /* 画面全体（ガイドの :root の値） */
    --color-brand:      #1e3a5f; /* ガイドの見出し帯の濃紺。ヘッダーに使う */
    --color-bg:         #f8f9fa;
    --color-surface:    #ffffff;
    --color-text:       #1a1a2e;
    --color-text-muted: #5a6570; /* 白地で5.9:1。補足文・表見出しに使う */
    --color-border:     var(--color-neutral-200);

    /* 文字：Google Fontsは読み込まず、端末にある書体を順に使う（指針 2.3） */
    --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;

    --line-height-tight:   1.25;
    --line-height-snug:    1.5;  /* 表・入力欄用。ガイドにない値（行を詰めて一覧性を上げる） */
    --line-height-normal:  1.75;
    --line-height-relaxed: 1.9;

    /* 余白 */
    --spacing-1:  0.25rem;
    --spacing-2:  0.5rem;
    --spacing-3:  0.75rem;
    --spacing-4:  1rem;
    --spacing-5:  1.25rem;
    --spacing-6:  1.5rem;
    --spacing-8:  2rem;
    --spacing-10: 2.5rem;

    /* 角丸：学校のシステムでは控えめに（ガイド7章） */
    --radius-sm:   0.25rem;
    --radius-md:   0.375rem;
    --radius-lg:   0.5rem;
    --radius-xl:   0.75rem;
    --radius-full: 999px;

    /* 影：業務システムでは控えめに（ガイド7章） */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    /* 骨組みの寸法 */
    --header-height:  3.5rem;
    --sidebar-width:  14rem;
    --control-height: 2.5rem;   /* 入力欄とボタンの高さをそろえる */
    --page-padding-x: var(--spacing-8);
    --focus-ring: 0 0 0 3px var(--color-primary-200);
}


/* 2. 土台 ================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4, p, ul, ol, dl {
    margin: 0;
}

a {
    color: var(--color-primary-700);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-primary-900);
}

/* キーボード操作時の現在位置を必ず見えるようにする */
:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

[x-cloak] {
    display: none !important;
}


/* 3. 画面の骨組み ========================================================= */

/* ヘッダー（上）・左メニュー（左）・本文（右）の3区画 */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas:
        "header header"
        "side   main";
    min-height: 100vh;
}

/* メニューを出さない画面（ログイン前のエラー等） */
.app--no-nav {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "main";
}

/* ---- ヘッダー ---- */

.app-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    padding: 0 var(--spacing-5);
    background: var(--color-brand);
    color: #fff;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    color: #fff;
    text-decoration: none;
}

.brand:hover {
    color: #fff;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--color-brand);
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: 1;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: var(--line-height-tight);
}

.brand-name {
    font-weight: 700;
    font-size: var(--font-size-base);
}

.brand-school {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.8);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-left: auto;
    font-size: var(--font-size-sm);
}

.user-name {
    font-weight: 700;
}

.user-menu a,
.user-menu .btn-link {
    color: rgba(255, 255, 255, 0.9);
}

.user-menu a:hover,
.user-menu .btn-link:hover {
    color: #fff;
}

.user-menu form {
    display: contents;
}

/* ---- 左メニュー（大項目） ---- */

.side-nav {
    grid-area: side;
    position: sticky;
    top: var(--header-height);
    align-self: start;
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: var(--spacing-4) var(--spacing-3);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

.side-nav-group + .side-nav-group {
    margin-top: var(--spacing-5);
}

.side-nav-label {
    padding: 0 var(--spacing-3) var(--spacing-1);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
}

.side-nav-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: var(--control-height);
    padding: 0 var(--spacing-3);
    border-radius: var(--radius-md);
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    line-height: var(--line-height-tight);
}

a.side-nav-item:hover {
    background: var(--color-neutral-100);
    color: var(--color-text);
}

/* 現在地：色面＋左の縦線＋太字の3つで示す */
.side-nav-item.is-active {
    background: var(--color-primary-50);
    color: var(--color-primary-800);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--color-primary-600);
}

.side-nav-item.is-disabled {
    color: var(--color-neutral-500);
    cursor: default;
}

/* 親の業務の直下に字下げして出す項目（出席管理）：左の縦線でつながりを示す */
.side-nav-item--child {
    margin-left: var(--spacing-4);
    padding-left: var(--spacing-3);
    border-left: 2px solid var(--color-neutral-200);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    min-height: 2.25rem;
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.side-nav-item--child.is-active {
    border-left-color: var(--color-primary-600);
    box-shadow: none;
}

.side-nav-meta {
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-muted);
}

/* ---- 本文 ---- */

.app-main {
    grid-area: main;
    min-width: 0;
}

/* 大項目の名前と小項目のタブ */
.module-bar {
    padding: var(--spacing-4) var(--page-padding-x) 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.module-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
}

.tabs {
    display: flex;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
    overflow-x: auto;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4) calc(var(--spacing-3) - 3px);
    border-bottom: 3px solid transparent;
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

a.tab:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-neutral-300);
}

.tab.is-active {
    color: var(--color-primary-800);
    font-weight: 700;
    border-bottom-color: var(--color-primary-600);
}

.tab.is-disabled {
    color: var(--color-neutral-500);
    cursor: default;
}

.page {
    max-width: 80rem;
    padding: var(--spacing-6) var(--page-padding-x) var(--spacing-10);
}

.page > * + * {
    margin-top: var(--spacing-6);
}


/* 4. ページ見出し・カード ================================================= */

/* どの画面も「見出し（左）＋主な操作（右）」で始める */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-6);
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

.page-description {
    margin-top: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    max-width: 48rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3) var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

.card-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.card-body {
    padding: var(--spacing-5) var(--spacing-6);
}

/* 入力項目の少ないフォーム用。横に間延びさせない */
.card--narrow {
    max-width: 36rem;
}

/* 表をカードの端まで広げる */
.card-body--flush {
    padding: 0;
}

.card-footer {
    padding: var(--spacing-3) var(--spacing-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-neutral-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-6);
}

/* データがないときの案内。何をすればよいかを必ず添える */
.empty-state {
    padding: var(--spacing-10) var(--spacing-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.empty-state-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
}

.empty-state > * + * {
    margin-top: var(--spacing-2);
}

.empty-state .btn {
    margin-top: var(--spacing-4);
}


/* 5. 表 =================================================================== */

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

.table th,
.table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.table thead th {
    background: var(--color-neutral-50);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.table tbody tr:last-child > td,
.table tbody:last-child tr:last-child > td {
    border-bottom: none;
}

.table tbody tr:hover > td {
    background: var(--color-neutral-50);
}

/* 数値は右揃え＋等幅数字で桁をそろえる */
.table .col-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table .col-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table .col-status {
    width: 1%;
    white-space: nowrap;
}

/* 操作は右端の列にまとめる */
.table .col-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.table .col-actions > * + * {
    margin-left: var(--spacing-2);
}

/* 「編集」⇔「閉じる」の切り替えで列幅が揺れないよう、幅をそろえる */
.table .col-actions .btn-sm {
    min-width: 4rem;
}

.cell-sub {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* 表の中で開く編集欄 */
.table .edit-row > td,
.table .edit-row:hover > td {
    background: var(--color-primary-50);
    padding: var(--spacing-5) var(--spacing-6);
}


/* 6. フォーム ============================================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--spacing-5) var(--spacing-6);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-width: 0;
}

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

/* ラベルは入力欄の上に置く */
.field-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

.field-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-snug);
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
}

.textarea {
    resize: vertical;
    min-height: 5rem;
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--color-neutral-500);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--color-primary-600);
    box-shadow: var(--focus-ring);
}

/* 内容の長さに合わせた幅 */
.input--xs {
    width: 6rem;
}

.input--year {
    width: 8rem;
}

/* 表の中で人の名前を入れる欄（面談者など） */
.input--person {
    min-width: 9rem;
}

/* 表の中で短い文を入れる欄（備考など） */
.input--note {
    min-width: 14rem;
}

/* 表の中の備考の文（狭い列で1文字ずつ折り返さないよう幅を確保する） */
.cell-note {
    min-width: 10rem;
}

/* 見出しが長い列（評価項目名など）は、見出しだけ折り返して列幅を抑える */
.table thead th.th-wrap {
    white-space: normal;
    min-width: 3.5rem;
}

/* 送信ボタンは入力欄の下・左寄せ */
.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
}

/* 取り返しのつかない操作は右端に離して置く */
.form-actions-danger {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* 絞り込み（カード見出しの中で横に並べる） */
.filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.filter-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.filter .select {
    width: auto;
    min-width: 9rem;
}


/* 7. ボタン =============================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-height: var(--control-height);
    padding: 0 var(--spacing-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-sm {
    min-height: 2rem;
    padding: 0 var(--spacing-3);
    font-size: var(--font-size-xs);
}

/* 主な操作（1画面に1つを目安にする） */
.btn-primary {
    background: var(--color-primary-600);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-primary-700);
    color: #fff;
}

/* 承認・完了の操作。ガイドの600は白文字が3.8:1で不足するため700を使う */
.btn-secondary {
    background: var(--color-secondary-700);
    color: #fff;
}

.btn-secondary:hover {
    background: var(--color-secondary-800);
    color: #fff;
}

/* 補助の操作（キャンセル・更新など） */
.btn-outline {
    background: var(--color-surface);
    border-color: var(--color-neutral-300);
    color: var(--color-neutral-700);
}

.btn-outline:hover {
    background: var(--color-neutral-100);
    color: var(--color-text);
}

.btn-danger {
    background: var(--color-danger-600);
    color: #fff;
}

.btn-danger:hover {
    background: var(--color-danger-700);
    color: #fff;
}

/* 一覧の中の削除。赤で塗ると画面が騒がしくなるため枠線にとどめる */
.btn-danger-outline {
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-danger-600) 45%, #fff);
    color: var(--color-danger-700);
}

.btn-danger-outline:hover {
    background: var(--color-danger-50);
    border-color: var(--color-danger-600);
    color: var(--color-danger-800);
}

/* 文字だけのボタン（表の「編集」など） */
.btn-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary-700);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.btn-link:hover {
    color: var(--color-primary-900);
}

.btn:focus-visible,
.btn-link:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}


/* 8. バッジ =============================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: var(--line-height-snug);
    white-space: nowrap;
}

.badge-blue  { background: var(--color-primary-100);   color: var(--color-primary-800); }
.badge-green { background: var(--color-secondary-100); color: var(--color-secondary-800); }
.badge-amber { background: var(--color-warning-100);   color: var(--color-warning-800); }
.badge-red   { background: var(--color-danger-100);    color: var(--color-danger-800); }
.badge-gray  { background: var(--color-neutral-100);   color: var(--color-neutral-700); }

/* 必須項目の印 */
.badge-required {
    padding: 0 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-danger-600);
    color: #fff;
    font-size: 0.6875rem;
}

/* ヘッダー（濃紺）の上に置くバッジ */
.badge-on-dark {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 丸数字（体験授業の希望番号） */
.circled {
    display: inline-block;
    min-width: 1.5em;
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}


/* 9. アラート ============================================================= */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-left: 4px solid;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.alert strong {
    flex-shrink: 0;
}

.alert-info    { background: var(--color-primary-50);   border-color: var(--color-primary-600); }
.alert-success { background: var(--color-secondary-50); border-color: var(--color-secondary-600); }
.alert-warning { background: var(--color-warning-50);   border-color: var(--color-warning-600); }
.alert-danger  { background: var(--color-danger-50);    border-color: var(--color-danger-600); }

.alert-info strong    { color: var(--color-primary-800); }
.alert-success strong { color: var(--color-secondary-800); }
.alert-warning strong { color: var(--color-warning-800); }
.alert-danger strong  { color: var(--color-danger-800); }

.alerts > * + * {
    margin-top: var(--spacing-2);
}


/* 10. ログイン画面 ======================================================== */

.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-6) var(--spacing-4);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.auth-header {
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--color-brand);
    color: #fff;
}

.auth-body {
    padding: var(--spacing-6);
}

.auth-body > * + * {
    margin-top: var(--spacing-5);
}

.auth-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.auth-footnote {
    margin-top: var(--spacing-4);
    max-width: 26rem;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.stack > * + * {
    margin-top: var(--spacing-5);
}

.btn-block {
    width: 100%;
}


/* 10b. 申込一覧・申込編集（タスク#4） ===================================== */

/* ---- 絞り込み ---- */

.filter-form > * + * {
    margin-top: var(--spacing-5);
}

/* 検索欄は横幅いっぱいに大きく置く（一番よく使うため） */
.search-row {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.input--search {
    flex: 1 1 20rem;
}

.form-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--spacing-4) var(--spacing-5);
}

.field--wide {
    grid-column: span 2;
}

/* チェックボックスの並び。縦に積むと場所を取るため、横1行にまとめる */
.field--checks {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-5);
}

.field--checks > .field-label {
    min-width: 4rem;
}

/* 希望（第1／第2）を1つの列に2行で出す */
.cell-wishes .wish-line {
    display: block;
}

.cell-wishes .wish-line + .wish-line {
    margin-top: 2px;
}

/* 意向（個別相談・寮見学）をバッジで並べる。幅を取りすぎないよう折り返しを許す */
.cell-intents {
    min-width: 4.5rem;
}

.cell-intents .badge {
    margin: 1px 2px 1px 0;
}

/* 中学校名は長いので折り返すが、1文字ずつ細かく折れないよう最低幅を取る */
.cell-school {
    min-width: 7.5rem;
}

/* 氏名・開催回などの短い値は途中で折り返さない */
.cell-nowrap {
    white-space: nowrap;
}

/* チェックボックス・ラジオボタンと文字の組 */
.check,
.radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    cursor: pointer;
}

.check input,
.radio input,
.checkbox {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.125rem 0 0;
    accent-color: var(--color-primary-600);
    flex-shrink: 0;
    cursor: pointer;
}

/* 当日受付：タブレットで指で押しやすい大きさ */
.checkbox--large {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-5);
    min-height: var(--control-height);
    align-items: center;
}

/* 開催回の複数選択（開くとチェックボックスの一覧が出る） */
.dropdown {
    position: relative;
}

.dropdown > summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.dropdown > summary::-webkit-details-marker {
    display: none;
}

.dropdown > summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--color-text-muted);
}

.dropdown-panel {
    position: absolute;
    z-index: 10;
    top: calc(100% + var(--spacing-1));
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: max(100%, 20rem);
    max-height: 20rem;
    overflow-y: auto;
    padding: var(--spacing-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* ---- 一覧の表 ---- */

.text-strong {
    color: var(--color-text);
    font-weight: 700;
}

/* 列の多い一覧は余白を詰める（1366px幅で横スクロールを出さないため） */
.table--dense th,
.table--dense td {
    padding: var(--spacing-2) var(--spacing-3);
}

.table .col-check,
.table .col-toggle {
    width: 1%;
    padding-right: 0;
}

.table .col-flag {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

.sort-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sort-link:hover {
    color: var(--color-primary-800);
    text-decoration: underline;
}

th[aria-sort="ascending"] .sort-link,
th[aria-sort="descending"] .sort-link {
    color: var(--color-primary-800);
}

/* 行を開くボタン */
.toggle {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
}

.toggle:hover {
    background: var(--color-neutral-100);
    color: var(--color-text);
}

/* 削除済みの行（管理者が「削除済みも表示」を選んだとき） */
tbody.is-deleted td {
    color: var(--color-text-muted);
    background: var(--color-neutral-50);
}

/* 行を開いたときの詳細 */
.table .detail-row > td,
.table .detail-row:hover > td {
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-primary-50);
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    gap: var(--spacing-6);
}

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-1) var(--spacing-4);
    font-size: var(--font-size-sm);
}

.detail-list dt,
.detail-title {
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.detail-list dd {
    margin: 0;
}

.detail-title {
    margin-bottom: var(--spacing-2);
}

.table--inner {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.table--inner th,
.table--inner td {
    padding: var(--spacing-2) var(--spacing-3);
}

/* 当日受付モード：文字と行を大きくする */
.table--reception {
    font-size: var(--font-size-base);
}

.table--reception td {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}

.reception-name {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    cursor: pointer;
}

/* ---- 出欠の一括更新 ---- */

.bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
}

.bulk-bar.is-active {
    background: var(--color-primary-50);
    box-shadow: inset 0 0 0 1px var(--color-primary-200);
}

.bulk-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bulk-bar.is-active .bulk-count {
    color: var(--color-primary-800);
    font-weight: 700;
}

/* 当日受付では画面の下に固定し、スクロールしてもすぐ押せるようにする */
.bulk-bar--sticky {
    position: sticky;
    bottom: var(--spacing-3);
    z-index: 5;
    margin: var(--spacing-3) var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    box-shadow: var(--shadow-lg);
    background: var(--color-surface);
}

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

/* ---- ページ送り ---- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.pagination-link,
.pagination-current {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--spacing-2);
    border-radius: var(--radius-md);
    text-decoration: none;
}

.pagination-link:hover {
    background: var(--color-neutral-100);
}

.pagination-current {
    background: var(--color-primary-600);
    color: #fff;
    font-weight: 700;
}

.pagination-gap {
    padding: 0 var(--spacing-1);
    color: var(--color-text-muted);
}

/* ---- 申込編集 ---- */

.page-title-sub {
    margin-left: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.form-sections {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.form-sections > * + * {
    margin-top: var(--spacing-5);
}

/* 入力エラー */
.field-error {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-danger-700);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--color-danger-600);
    background: var(--color-danger-50);
}

.error-list {
    margin-top: var(--spacing-1);
    padding-left: var(--spacing-5);
}

.error-list a {
    color: var(--color-danger-800);
}

/* オン・オフの切り替え（個別相談・寮見学） */
.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: var(--control-height);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch-track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--color-neutral-300);
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease;
}

.switch input:checked + .switch-track {
    background: var(--color-primary-600);
}

.switch input:checked + .switch-track::after {
    transform: translateX(1.25rem);
}

.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

/* 保護者のカード */
.guardian-list > * + * {
    margin-top: var(--spacing-4);
}

.guardian-card {
    margin: 0;
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-50);
    min-width: 0;
}

.guardian-title {
    padding: 0 var(--spacing-2);
    font-weight: 700;
}

.guardian-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

/* 保存ボタンの帯。長いフォームでもすぐ押せるよう画面下に固定する */
.form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: var(--spacing-5) calc(var(--page-padding-x) * -1) 0;
    padding: var(--spacing-3) var(--page-padding-x);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.12);
}

/* 変更履歴 */
.change-list {
    list-style: none;
    padding: 0;
    font-size: var(--font-size-sm);
}

.change-list li + li {
    margin-top: var(--spacing-1);
}

.change-label {
    display: inline-block;
    min-width: 8rem;
    margin-right: var(--spacing-2);
    font-weight: 700;
    color: var(--color-text-muted);
}


/* 11. 補助クラス ========================================================== */

.text-muted {
    color: var(--color-text-muted);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.nowrap {
    white-space: nowrap;
}

.inline-form {
    display: inline;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.error-detail {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-neutral-100);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    overflow-x: auto;
}


/* 11b. 入試・願書（Ph2）のモック画面 ====================================== */

/* モックであることを全画面の上部で知らせる帯 */
.mock-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px dashed var(--color-warning-600);
    border-radius: var(--radius-md);
    background: var(--color-warning-50);
    color: var(--color-warning-800);
    font-size: var(--font-size-sm);
}

/* 「保存されません」の通知（画面右下） */
.mock-toast {
    position: fixed;
    right: var(--spacing-6);
    bottom: var(--spacing-6);
    z-index: 50;
    max-width: 24rem;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    background: var(--color-neutral-900);
    color: #fff;
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
}

/* 選択肢のまとまり（fieldset）も通常の項目と同じ見た目にする */
fieldset.field {
    margin: 0;
    padding: 0;
    border: 0;
}

fieldset.field > legend {
    margin-bottom: var(--spacing-2);
    padding: 0;
}

/* 件数のまとめ（入力状況ごと） */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.stat {
    display: block;
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
}

.stat:hover {
    border-color: var(--color-primary-500);
}

.stat.is-active {
    border-color: var(--color-primary-600);
    box-shadow: inset 0 0 0 1px var(--color-primary-600);
}

.stat-label {
    display: block;
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.stat-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

/* 提出書類の有無（一覧の小さな印） */
.doc-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-1);
}

.doc {
    padding: 0 0.375rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    color: var(--color-neutral-500);
    white-space: nowrap;
}

.doc.is-present {
    border-color: var(--color-secondary-600);
    background: var(--color-secondary-50);
    color: var(--color-secondary-800);
}

/* 願書の取込（Ph2。アップロード・取込の履歴・分割確認） */
.note-list {
    margin: var(--spacing-3) 0 0;
    padding-left: var(--spacing-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.note-list li + li {
    margin-top: var(--spacing-1);
}

.col-num {
    text-align: right;
    white-space: nowrap;
}

/* 分割した1人分（受験番号ごとのまとまり） */
.split-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: var(--spacing-5);
    padding: var(--spacing-4) var(--spacing-5);
    border-top: 1px solid var(--color-border);
}

.split-group:first-child {
    border-top: 0;
}

.split-group.is-review {
    background: var(--color-warning-50);
}

.split-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.split-group-no {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

/* ページの縮小表示（先頭のページにシールのバーコードを模した印を付ける） */
.split-pages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.split-page {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 5.5rem;
    aspect-ratio: 1 / 1.414;
    padding: var(--spacing-1);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.split-page.is-first {
    border-color: var(--color-primary-600);
    box-shadow: inset 0 0 0 1px var(--color-primary-600);
}

.split-page.is-unread {
    border-color: var(--color-danger-600);
    border-style: dashed;
}

/* 受験番号シール（バーコード）を模した印 */
.split-seal {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 2.75rem;
    height: 1.25rem;
    background: repeating-linear-gradient(90deg, var(--color-neutral-900) 0 2px, #fff 2px 4px, var(--color-neutral-900) 4px 5px, #fff 5px 8px);
}

.split-page-label {
    font-weight: 700;
    color: var(--color-neutral-700);
}

.split-page-kind {
    font-size: 0.6875rem;
}

.split-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.split-note {
    margin: 0 0 var(--spacing-3);
    font-size: var(--font-size-sm);
}

@media (max-width: 48rem) {
    .split-group {
        grid-template-columns: 1fr;
    }
}

/* 出願の書類タブの下：中学校が作る書類（調査書など）のアップロード */
.upload-card {
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.upload-card--missing {
    border-color: var(--color-warning-600);
    background: var(--color-warning-50);
}

.upload-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: 700;
}

/* 左に書類の画像、右に入力欄 */
.scan-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--spacing-6);
    align-items: start;
}

/* 画像の小さい書類（振込受領書）は、左の列を狭くする */
.scan-layout--narrow {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

/* 出願の書類タブ（入力状況のバッジ付き） */
.doc-tabs {
    flex-wrap: wrap;
    margin-bottom: var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
}

.doc-tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* 画像は縦に長いので、入力欄をスクロールしても見え続けるようにする */
.scan-viewer {
    position: sticky;
    top: var(--spacing-4);
}

.scan-pages {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.scan-page {
    position: relative;
    /* 重ねる文字の大きさを、画像の幅に対する割合（cqw）で指定するため */
    container-type: inline-size;
    border: 1px solid var(--color-neutral-300);
    background: #fff;
    overflow: hidden;
}

.scan-page img {
    display: block;
    width: 100%;
    height: auto;
}

/* 架空の記入（手書きの代わり）。座標は百分率で重ねる */
.scan-ink {
    position: absolute;
    color: #1f2f6b;
    font-family: "Klee One", "YuKyokasho", "HGP教科書体", "HG正楷書体-PRO", "Yu Mincho", serif;
    line-height: 1;
    white-space: pre;
    pointer-events: none;
}

/* 活字の記入（中学校がパソコンで作った調査書を想定） */
.scan-ink--printed {
    color: var(--color-neutral-900);
    font-family: var(--font-sans);
}

/* 鉛筆の記入（自己推薦書は鉛筆書きも可） */
.scan-ink--pencil {
    color: #4b5058;
}

/* 押印（校長印・銀行の領収印）。朱色の枠と文字で表す */
.scan-stamp {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #c8322a;
    border-radius: var(--radius-sm);
    color: #c8322a;
    font-family: "Yu Mincho", serif;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    opacity: 0.85;
    pointer-events: none;
}

.scan-stamp--round {
    border-radius: 50%;
}

/* 複数ページの書類のページ番号 */
.scan-page-label {
    margin: var(--spacing-3) 0 var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
}

/* ○囲み（受験者が付けた丸） */
.scan-circle {
    position: absolute;
    border: 2px solid #1f2f6b;
    border-radius: 50%;
    pointer-events: none;
}

/* 読取枠。選んだ項目の枠を強調する */
.scan-box {
    position: absolute;
    border: 1px dashed transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.scan-box:hover {
    border-color: var(--color-primary-500);
}

.scan-box.is-low {
    background: rgba(245, 158, 11, 0.12);
}

.scan-box.is-active {
    border: 2px solid var(--color-primary-600);
    background: rgba(37, 99, 235, 0.12);
}

/* 選んだ枠の拡大表示 */
.scan-zoom {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
}

.scan-zoom-frame {
    position: relative;
    /* 拡大した画像のうち、読取枠の部分だけを見せる */
    overflow: hidden;
    max-height: 9rem;
    margin-top: var(--spacing-2);
    border: 1px solid var(--color-neutral-200);
    background-repeat: no-repeat;
    background-color: #fff;
}

/* 取り込んだPDFの表示（docs/09 7.4）：拡大・縮小のボタンと、縦にスクロールするページの並び */
.scan-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.scan-toolbar-buttons {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.scan-zoom-value {
    min-width: 3.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 画面の高さに収め、拡大したときは縦横にスクロールする */
.scan-scroll {
    max-height: calc(100vh - 8rem);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    padding: var(--spacing-2);
}

.scan-scroll .scan-page {
    max-width: none;
    margin: 0 auto;
}

.scan-scroll .scan-page + .scan-page-label {
    margin-top: var(--spacing-4);
}

/* PDFがまだないときの枠 */
.scan-empty {
    padding: var(--spacing-6) var(--spacing-4);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
}

.scan-upload {
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
}

.scan-upload summary {
    cursor: pointer;
    color: var(--color-primary-600);
}

.scan-upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

/* 入力欄の行：見出し・出どころ・入力 */
.verify-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.verify-section {
    margin: var(--spacing-4) 0 var(--spacing-1);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
}

.verify-item {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--spacing-1) var(--spacing-3);
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.verify-item.is-active {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.verify-item.is-low .input {
    border-color: var(--color-warning-600);
    background: var(--color-warning-50);
}

.verify-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.verify-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    grid-column: 2;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 値の出どころの凡例 */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 調査書の評定表 */
.grade-table td,
.grade-table th {
    text-align: center;
}

.grade-input {
    width: 3.25rem;
    min-height: 2.25rem;
    padding: var(--spacing-1);
    text-align: center;
}

.grade-input.is-low {
    border-color: var(--color-warning-600);
    background: var(--color-warning-50);
}

.grade-input.is-invalid {
    border-color: var(--color-danger-600);
    background: var(--color-danger-50);
}

/* 照合結果のまとめ */
.check-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.check-list li {
    display: flex;
    gap: var(--spacing-2);
    align-items: baseline;
}

/* Ph1候補の一覧で、選べる行を目立たせる */
.candidate-score {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

@media (max-width: 1023px) {
    .scan-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .scan-viewer {
        position: static;
    }
}


/* 12. 画面幅ごとの調整・印刷 ============================================== */

/* タブレット幅：左メニューを上部の横並びに切り替える（当日受付で使う） */
@media (max-width: 1023px) {
    :root {
        --page-padding-x: var(--spacing-5);
    }

    .app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--header-height) auto 1fr;
        grid-template-areas:
            "header"
            "side"
            "main";
    }

    .side-nav {
        position: static;
        height: auto;
        display: flex;
        gap: var(--spacing-1);
        padding: var(--spacing-2) var(--spacing-3);
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .side-nav-group + .side-nav-group {
        margin-top: 0;
    }

    .side-nav-label {
        display: none;
    }

    .side-nav-list {
        flex-direction: row;
    }

    .side-nav-item {
        white-space: nowrap;
    }

    /* 横並びでは準備中の項目を省き、使えるものだけを見せる */
    .side-nav-item.is-disabled {
        display: none;
    }

    .grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 申込一覧の詳細は縦に並べる */
    .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* スマートフォン幅 */
@media (max-width: 639px) {
    :root {
        --page-padding-x: var(--spacing-4);
    }

    .brand-school,
    .user-menu .user-name,
    .user-menu .badge {
        display: none;
    }

    .page-header {
        flex-direction: column;
    }

    /* 2列分の項目も1列に収める */
    .field--wide {
        grid-column: 1 / -1;
    }

    .card-header,
    .card-body {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
}

/* 印刷：メニューを消し、表と本文だけを出す */
@media print {
    body {
        background: #fff;
    }

    .app {
        display: block;
    }

    .app-header,
    .side-nav,
    .module-bar,
    .page-actions,
    .col-actions,
    .col-check,
    .col-toggle,
    .form-actions,
    .bulk-bar,
    .pagination,
    .filter-form,
    .edit-row,
    .mock-banner {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border-color: var(--color-neutral-300);
    }
}

/* ==========================================================================
   全画面モック（Ph1の未実装分・Ph3・Ph4・システム管理）で足した部品
   docs/04_実装メモ.md 17章。本実装でもそのまま使う前提で、既存のトークンだけを使う
   ========================================================================== */

.text-danger {
    color: var(--color-danger-700);
}

/* 押せない件数のまとめは、マウスを乗せても枠の色を変えない */
div.stat:hover {
    border-color: var(--color-border);
}

/* 件数のまとめを button で作る場合（画面内の絞り込み） */
button.stat {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

/* ---- 履修・成績（Ph4）の年度の切り替え欄 ---- */

.year-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.year-bar-current {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-2) var(--spacing-3);
}

.year-bar-label,
.year-bar-period {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.year-bar-year {
    font-size: 1.25rem;
}

/* 表の中の学年ごとの小見出しの行 */
.table .table-group th {
    background: var(--color-neutral-50);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* 生徒の年度ごとの履歴：表示中の年度の行を強調し、科目の表は行の下に開く。年度ごとに線で区切る */
.table tr.is-selected-year > td {
    background: var(--color-primary-50);
}

.table tr.is-selected-year--head > td {
    font-weight: 700;
}

.table tbody.year-group > tr:last-child > td {
    border-bottom: 1px solid var(--color-border);
}

.table tbody.year-group > tr:first-child > td {
    border-bottom: none;
}

.year-subjects {
    margin: 0;
}

.year-subjects > summary {
    cursor: pointer;
    color: var(--color-primary-700);
    font-size: var(--font-size-sm);
}

.year-subjects[open] > summary {
    margin-bottom: var(--spacing-2);
}

@media print {
    .year-bar {
        display: none;
    }
}

/* ---- 取込プレビュー（OS-S07） ---- */

.import-teacher {
    margin-bottom: var(--spacing-3);
}

/* 展開後の申込1件。左の縦線の色で課題の重さを示す（色だけに頼らずバッジも付ける） */
.import-app {
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-secondary-600);
    border-radius: var(--radius-md);
}

.import-app + .import-app {
    margin-top: var(--spacing-4);
}

.import-app--error {
    border-left-color: var(--color-danger-600);
    background: var(--color-danger-50);
}

.import-app--review {
    border-left-color: var(--color-warning-500);
    background: var(--color-warning-50);
}

.import-app--skip {
    border-left-color: var(--color-neutral-300);
}

/* 判断・補完が済んだ申込は、背景色を外して緑の線に戻す */
.import-app.is-resolved {
    border-left-color: var(--color-secondary-600);
    background: var(--color-surface);
}

.import-app.is-skipped {
    border-left-color: var(--color-neutral-300);
    background: var(--color-neutral-100);
    opacity: 0.65;
}

.import-app-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.import-app-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--spacing-5);
    align-items: start;
}

/* 項目名（開催回・第1希望など）は折り返さない */
.import-app .table--inner th {
    white-space: nowrap;
}

.import-app-side > * + * {
    margin-top: var(--spacing-3);
}

.import-app-actions {
    display: flex;
    gap: var(--spacing-2);
}

.issue-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.issue-list li + li {
    margin-top: var(--spacing-2);
}

/* 2つの記録を左右に並べて見比べる（名寄せ候補・入試時と現在の値） */
.compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.compare-col {
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
}

/* ---- 志願者詳細の参加履歴（OS-S08） ---- */

.timeline {
    margin: 0;
    padding: 0 0 0 var(--spacing-2);
    list-style: none;
}

.timeline-item {
    position: relative;
    padding: 0 0 var(--spacing-5) var(--spacing-6);
    border-left: 2px solid var(--color-primary-200);
}

.timeline-item::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item--future {
    border-left-style: dashed;
    color: var(--color-text-muted);
}

.timeline-item--future::before {
    background: var(--color-neutral-300);
}

.timeline-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.timeline-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 700;
}

/* ---- 業務の段階（Ph3 新入生登録の流れ） ---- */

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    font-size: var(--font-size-sm);
}

.step {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.step::before {
    counter-increment: step;
    content: counter(step);
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--radius-full);
    background: var(--color-neutral-200);
    color: var(--color-neutral-700);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.step.is-done::before {
    content: "\2713";
    background: var(--color-secondary-700);
    color: #fff;
}

.step.is-current {
    border-color: var(--color-primary-600);
    color: var(--color-primary-800);
    font-weight: 700;
}

.step.is-current::before {
    background: var(--color-primary-600);
    color: #fff;
}

/* 値が変わったセル（照合・修正で入試時の値と違うもの） */
.is-changed {
    background: var(--color-warning-50);
    font-weight: 700;
}

/* ---- 時間割（Ph4） ---- */

.timetable {
    table-layout: fixed;
    min-width: 56rem;
}

.timetable th:first-child {
    width: 4.5rem;
}

.timetable td {
    vertical-align: top;
    height: 6rem;
}

.tt-course {
    display: block;
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--color-primary-200);
    border-left: 3px solid var(--color-primary-600);
    border-radius: var(--radius-sm);
    background: var(--color-primary-50);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

.tt-course + .tt-course {
    margin-top: var(--spacing-1);
}

.tt-course--elective {
    border-color: var(--color-neutral-300);
    border-left-color: var(--color-neutral-500);
    background: var(--color-surface);
}

.tt-course--conflict {
    border-color: var(--color-danger-500);
    border-left-color: var(--color-danger-600);
    background: var(--color-danger-50);
}

.tt-course-name {
    display: block;
    font-weight: 700;
}

/* ---- 横棒（履修者数・進捗） ---- */

.meter {
    position: relative;
    min-width: 8rem;
    height: 0.75rem;
    border-radius: var(--radius-full);
    background: var(--color-neutral-200);
    overflow: hidden;
}

.meter-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
}

.meter-bar--low {
    background: var(--color-warning-500);
}

.meter-bar--over {
    background: var(--color-danger-600);
}

.meter-bar--done {
    background: var(--color-secondary-700);
}

/* ---- 成績・出欠の入力表（Ph4） ---- */

.sheet-input {
    width: 4rem;
    min-height: 2.25rem;
    padding: var(--spacing-1);
    text-align: center;
}

.sheet-input.is-invalid {
    border-color: var(--color-danger-600);
    background: var(--color-danger-50);
}

tr.is-inactive td {
    background: var(--color-neutral-100);
    color: var(--color-text-muted);
}

.att-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.att-option {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem var(--spacing-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.att-option:has(input:checked) {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
    font-weight: 700;
}

/* ---- 帳票プレビュー（成績通知票）。印刷するとA4縦の1枚になる ---- */

.report-sheet {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--spacing-8);
    border: 1px solid var(--color-neutral-300);
    background: #fff;
    font-size: var(--font-size-sm);
}

.report-sheet h2 {
    text-align: center;
    font-size: var(--font-size-xl);
    letter-spacing: 0.3em;
}

.report-sheet-head {
    display: flex;
    justify-content: space-between;
    margin: var(--spacing-4) 0;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
}

.report-table th,
.report-table td {
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--color-neutral-500);
    text-align: center;
}

.report-table td:first-child,
.report-table th:first-child {
    text-align: left;
}

.report-table tfoot td {
    font-weight: 700;
    background: var(--color-neutral-100);
}

.report-sheet-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-8);
    margin-top: var(--spacing-6);
}

@media (max-width: 1023px) {
    .import-app-grid,
    .compare {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .filter-buttons,
    .import-app-actions,
    .steps {
        display: none !important;
    }

    .report-sheet {
        max-width: none;
        border: none;
        padding: 0;
    }
}

/* ==========================================================================
   教務帳票（指導要録・調査書・成績証明書・単位修得証明書）のプレビュー
   docs/10_教務帳票_分析.md。A4の書式に近い見た目にし、印刷すると1ページ＝1枚になる
   ========================================================================== */

@page {
    size: A4 portrait;
    margin: 10mm;
}

/* 帳票1ページ分。画面でもA4の幅で表示する */
.doc-page {
    width: 100%;
    max-width: 210mm;
    margin: 0 auto;
    padding: 10mm 12mm;
    border: 1px solid var(--color-neutral-300);
    background: #fff;
    color: #111;
    font-size: 0.75rem;
    line-height: 1.35;
}

.doc-page + .doc-page {
    margin-top: var(--spacing-6);
}

.doc-caption {
    font-size: 0.7rem;
    color: #333;
}

.doc-title {
    margin: var(--spacing-2) 0 var(--spacing-3);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5em;
}

.doc-subtitle {
    margin: var(--spacing-3) 0 var(--spacing-1);
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.4em;
}

.doc-number {
    text-align: right;
}

/* 帳票の表。罫線はすべて黒の細線、文字は中央揃えを基本にする */
.doc-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.doc-table th,
.doc-table td {
    padding: 1px 3px;
    border: 1px solid #222;
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    word-break: break-all;
}

.doc-table th {
    background: #f4f4f4;
}

.doc-table + .doc-table {
    margin-top: -1px;
}

.doc-table .doc-left {
    text-align: left;
}

.doc-table .doc-text {
    height: 4.5em;
    text-align: left;
    vertical-align: top;
}

.doc-table .doc-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 縦書きの見出し（教科名・「生徒」「保護者」など） */
.doc-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.1em;
}

/* 記入しない欄の斜線 */
.doc-slash {
    background: linear-gradient(to top right, transparent calc(50% - 0.5px), #222 calc(50% - 0.5px), #222 calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.doc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3mm;
    align-items: start;
}

.doc-block + .doc-block {
    margin-top: 3mm;
}

/* 証明文・学校名・校長名 */
.doc-sign {
    margin-top: 4mm;
    line-height: 1.8;
}

.doc-sign-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4);
}

/* 印の位置を示す丸 */
.doc-seal {
    display: inline-grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    margin-left: 0.5em;
    border: 1px solid #c33;
    border-radius: 50%;
    color: #c33;
    font-size: 0.85em;
}

/* 帳票の値のうち、システムが計算した値（画面でだけ色を付け、印刷では消す） */
.doc-calc {
    background: var(--color-primary-50);
}

.doc-legend {
    max-width: 210mm;
    margin: 0 auto var(--spacing-3);
}

@media print {
    .doc-page {
        max-width: none;
        padding: 0;
        border: none;
        break-after: page;
    }

    .doc-page + .doc-page {
        margin-top: 0;
    }

    .doc-calc {
        background: none;
    }

    .doc-legend {
        display: none;
    }

    /* 画面でだけ出す説明（小票の見出しや注記）は印刷しない */
    .print-hide {
        display: none !important;
    }

    /* 判定別一覧：横長の表が切れないように、はみ出しを許さず文字を小さくする */
    .judgement-list .table-wrap {
        overflow: visible;
    }

    .judgement-list .table th,
    .judgement-list .table td {
        padding: 2px 4px;
        font-size: 0.7rem;
    }

    .judgement-list .table tr {
        break-inside: avoid;
    }
}

/* ---- 総合一覧（A4横向き）・個人時間割表 ---- */

/* 列の多い帳票はA4横向きで印刷する */
@page landscape {
    size: A4 landscape;
    margin: 8mm;
}

.doc-page--landscape {
    max-width: 297mm;
    page: landscape;
}

.doc-timetable td {
    height: 4.2em;
    vertical-align: middle;
}

.doc-tt-sub {
    display: block;
    font-size: 0.85em;
    color: #444;
}

.doc-tt-empty {
    color: #999;
}

.doc-tt-fixed {
    background: #f4f4f4;
}


/* ==========================================================================
   先生向けの出欠入力（今日の授業・授業の出欠。モック）
   教室でタブレットを持って使うため、押す場所を大きく（最低44px）取る。
   色はデザイン指針2.1に合わせ、出席は色を付けず、欠席（赤）・遅刻早退（黄）・
   出停忌引（グレー）だけを目立たせる。全員が色付きになると、例外が埋もれるため。
   ========================================================================== */

/* 押しやすい大きさのボタン（保存など、画面で一番大事な操作） */
.btn-lg {
    min-height: 3rem;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
    font-size: var(--font-size-lg);
}

/* 見出しを上、中身を下に積むアラート */
.alert--stacked {
    flex-direction: column;
    gap: var(--spacing-2);
}

/* ---- 今日の授業 ---- */

.today-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.today-date {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.missing-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.missing-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-4);
}

.missing-list li + li {
    margin-top: var(--spacing-2);
}

.lesson-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 1時限＝1行。時限・授業・状態・操作の4列 */
.lesson-item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--spacing-4);
    min-height: 4.5rem;
    padding: var(--spacing-3) var(--spacing-6);
    border-left: 4px solid transparent;
}

.lesson-item + .lesson-item {
    border-top: 1px solid var(--color-border);
}

/* 授業中の時限は、左の縦線と薄い青で示す（色だけに頼らずバッジも出す） */
.lesson-item.is-now {
    border-left-color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.lesson-item.is-free {
    min-height: 3rem;
    background: var(--color-neutral-50);
}

.lesson-period {
    display: flex;
    flex-direction: column;
}

.lesson-period-no {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.lesson-period-time,
.lesson-sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.lesson-main {
    display: flex;
    flex-direction: column;
}

.lesson-course {
    font-weight: 700;
}

.lesson-state {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-1);
}

.lesson-action .btn {
    min-width: 8rem;
    min-height: 2.75rem;
}

/* ---- 授業の出欠 ---- */

/* 2つの表示を切り替えるボタン */
.segmented {
    display: inline-flex;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.segmented-btn {
    min-height: 2.75rem;
    padding: 0 var(--spacing-4);
    border: none;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

.segmented-btn + .segmented-btn {
    border-left: 1px solid var(--color-neutral-300);
}

.segmented-btn[aria-pressed="true"] {
    background: var(--color-primary-600);
    color: #fff;
    font-weight: 700;
}

.att-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

.att-summary-item strong {
    font-size: var(--font-size-lg);
    font-variant-numeric: tabular-nums;
}

.att-summary-item.tone-absent strong  { color: var(--color-danger-700); }
.att-summary-item.tone-late strong    { color: var(--color-warning-800); }
.att-summary-item.tone-present strong { color: var(--color-secondary-800); }

.att-help {
    margin-bottom: var(--spacing-4);
}

.att-grid {
    display: grid;
    gap: var(--spacing-2);
}

/* 名簿順：画面幅に合わせて列数を変える */
.att-grid--roster {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

/* 座席表：教室の列数で固定する。狭い画面では横にスクロールさせ、配置を崩さない */
.att-grid--seat {
    grid-template-columns: repeat(6, minmax(6.5rem, 1fr));
}

.att-grid-wrap.is-seat {
    overflow-x: auto;
}

.att-front {
    margin: var(--spacing-3) auto;
    max-width: 16rem;
    padding: var(--spacing-1) var(--spacing-4);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.att-seat-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
}

/* 生徒1人分のカード。全体が押せる（右上の「…」だけ別の操作） */
.att-card {
    position: relative;
    height: 100%;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.att-card-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    width: 100%;
    height: 100%;
    min-height: 5.5rem;
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* ダブルタップでの拡大を止め、続けて押しても反応させる */
}

.att-card-main:disabled {
    cursor: default;
}

.att-card-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    padding-right: 2rem; /* 「…」ボタンと重ならないように */
}

.att-card-no {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.att-card-kind {
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.att-card-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

.att-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.att-tag {
    padding: 0 var(--spacing-1);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    font-size: var(--font-size-xs);
}

.att-tag--warn {
    background: var(--color-warning-100);
    color: var(--color-warning-800);
    font-weight: 700;
}

.att-tag--over {
    background: var(--color-danger-100);
    color: var(--color-danger-800);
    font-weight: 700;
}

.att-tag--memo {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-card-more {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
}

.att-card-more:hover {
    background: var(--color-neutral-100);
}

/* 区分ごとの色。出席は色を付けない */
.att-card.tone-present .att-card-kind {
    color: var(--color-secondary-700);
}

.att-card.tone-absent {
    border-color: var(--color-danger-600);
    background: var(--color-danger-50);
    box-shadow: inset 4px 0 0 var(--color-danger-600);
}

.att-card.tone-absent .att-card-kind {
    color: var(--color-danger-700);
}

.att-card.tone-late {
    border-color: var(--color-warning-600);
    background: var(--color-warning-50);
    box-shadow: inset 4px 0 0 var(--color-warning-600);
}

.att-card.tone-late .att-card-kind {
    color: var(--color-warning-800);
}

.att-card.tone-excused {
    border-color: var(--color-neutral-500);
    background: var(--color-neutral-100);
    box-shadow: inset 4px 0 0 var(--color-neutral-500);
}

.att-card.tone-inactive {
    border-style: dashed;
    background: var(--color-neutral-100);
    color: var(--color-text-muted);
}

.att-card--empty {
    display: grid;
    place-items: center;
    min-height: 5.5rem;
    border-style: dashed;
    background: transparent;
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
}

/* 保存の帯。長い名簿でもすぐ押せるよう画面下に固定する */
.att-savebar {
    position: sticky;
    bottom: var(--spacing-3);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.att-savebar.is-dirty {
    border-color: var(--color-warning-600);
    background: var(--color-warning-50);
}

.att-savebar-text {
    font-size: var(--font-size-sm);
}

.att-savebar.is-dirty .att-savebar-text {
    color: var(--color-warning-800);
    font-weight: 700;
}

/* 「…」から開く区分とメモの選択 */
.att-dialog {
    width: min(28rem, calc(100vw - 2rem));
    margin: auto; /* 土台の余白リセットを打ち消し、画面の中央に出す */
    padding: var(--spacing-6);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.att-dialog::backdrop {
    background: rgba(23, 23, 23, 0.4);
}

.att-dialog-kinds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-2);
    margin: var(--spacing-3) 0 var(--spacing-5);
}

.att-kind-btn {
    min-height: 3rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.att-kind-btn[aria-pressed="true"] {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
    color: #fff;
}

.att-dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-5);
}

@media (max-width: 1023px) {
    .lesson-item {
        grid-template-columns: 5.5rem minmax(0, 1fr) auto;
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    /* 狭い画面では状態を授業名の下へ回す */
    .lesson-state {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        align-items: center;
    }

    .lesson-action {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 639px) {
    .att-grid--roster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-action .btn {
        min-width: 0;
    }

    .today-badge {
        align-items: flex-start;
    }
}

/* 申込の新規入力：左に入力欄、右に名寄せの候補パネル（タスク#7・設計書5.3） */
.entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: var(--spacing-6);
    align-items: start;
}

/* 入力欄をスクロールしても候補が見え続けるようにする */
.entry-aside {
    position: sticky;
    top: var(--spacing-4);
}

/* 候補1件ずつを、選べる枠として区切る */
.candidate-option {
    display: flex;
    width: 100%;
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.candidate-option:has(input:checked) {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
}

.candidate-option > span {
    display: grid;
    gap: var(--spacing-1);
}

/* 横幅が足りないと入力欄の列が詰まりすぎるので、1280px未満では候補を入力欄の下に並べる */
@media (max-width: 1279px) {
    .entry-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .entry-aside {
        position: static;
    }
}

/* 取込プレビュー（OS-S07・タスク#8）：値を補う欄・判断のボタンは横に並べ、狭いときは折り返す */
.import-app-side .inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

.import-app-side .inline-form .input,
.import-app-side .inline-form .select {
    flex: 1 1 10rem;
    min-width: 0;
}

.import-app-side .inline-form .input--sm {
    flex: 1 1 5rem;
}

/* 取込の結果・取消の要約 */
.import-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
}

/* 学籍異動の登録（Ph4モック・KM-10）：区分の選択肢は縦に並べ、選べない理由を添える */
.movement-kinds {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.movement-kinds .radio.is-disabled {
    cursor: not-allowed;
    color: var(--color-text-muted);
}

.movement-kinds .radio.is-disabled input {
    cursor: not-allowed;
}

.movement-kinds .field-hint {
    margin: 0 0 0 var(--spacing-2);
}

/* 様式テンプレートの管理（Ph2モック）：読取枠は画像の上でドラッグして動かす */
.step-list {
    margin: 0 0 var(--spacing-3);
    padding-left: var(--spacing-5);
    font-size: var(--font-size-sm);
}

.step-list li + li {
    margin-top: var(--spacing-2);
}

.scan-box--frame {
    border: 1px solid var(--color-primary-500);
    background: rgba(37, 99, 235, 0.06);
    touch-action: none;
    user-select: none;
}

.scan-box--frame.is-editable {
    cursor: move;
}

.scan-box--frame.is-active {
    z-index: 2;
}

.scan-box-label {
    position: absolute;
    left: 0;
    bottom: 100%;
    max-width: 16rem;
    padding: 0 var(--spacing-1);
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-primary-600);
    color: #fff;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
}

.scan-box--frame.is-active .scan-box-label,
.scan-box--frame:hover .scan-box-label {
    opacity: 1;
}

.scan-handle {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-primary-600);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: nwse-resize;
}

.frame-list {
    max-height: 20rem;
    overflow-y: auto;
}

.frame-list tr.is-selected {
    background: var(--color-primary-50);
}

/* 受付・出席（オープンスクール・入試の当日受付。Ph1〜Ph2のモック） */
.reception-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    align-items: center;
}

.input--xl {
    flex: 1 1 18rem;
    min-width: 0;
    height: 3.5rem;
    font-size: var(--font-size-xl);
}

.btn-lg {
    height: 3.5rem;
    padding: 0 var(--spacing-6);
    font-size: var(--font-size-lg);
}

.reception-result {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    border-left: 8px solid var(--color-neutral-400);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
}

.reception-result--ok      { border-color: var(--color-secondary-600); background: var(--color-secondary-50); }
.reception-result--already { border-color: var(--color-warning-600);   background: var(--color-warning-50); }
.reception-result--error   { border-color: var(--color-danger-600);    background: var(--color-danger-50); }
.reception-result--undo    { border-color: var(--color-primary-600);   background: var(--color-primary-50); }

.reception-result-title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.reception-result-detail {
    margin: var(--spacing-1) 0 0;
}

.reception-person {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-4);
    align-items: center;
    margin-top: var(--spacing-3);
}

.reception-person-no {
    font-weight: 700;
}

.reception-person-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.reception-guardians {
    display: inline-flex;
    gap: var(--spacing-2);
    align-items: center;
}

.reception-guardians-count {
    min-width: 2.5rem;
    text-align: center;
}

.reception-recent {
    margin-top: var(--spacing-4);
}

button.stat {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

tr.is-highlight {
    background: var(--color-primary-50);
}

/* 参加票・受験票（A4で印刷できる票） */
.ticket {
    max-width: 44rem;
    margin: 0 auto var(--spacing-5);
    padding: var(--spacing-6);
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius-lg);
    background: #fff;
}

.ticket-school {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.ticket-title {
    margin: var(--spacing-1) 0 var(--spacing-5);
    font-size: var(--font-size-xl);
}

.ticket-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem;
    gap: var(--spacing-6);
    align-items: start;
}

.ticket-no {
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.ticket-qr {
    text-align: center;
}

.ticket-qr-image {
    padding: var(--spacing-2);
    border: 1px solid var(--color-border);
    background: #fff;
}

.ticket-qr-image svg {
    display: block;
    width: 100%;
    height: auto;
}

.ticket-qr-note,
.ticket-qr-payload {
    margin: var(--spacing-1) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    word-break: break-all;
}

@media print {
    .ticket {
        border-color: #000;
    }
}

/* ---- Ph3 学級の割り振り（templates/enrollment/classes.php） ---- */

.assign {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    gap: var(--spacing-4);
    align-items: start;
}

.assign-rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--spacing-4);
    align-items: start;
}

.assign .card {
    margin: 0;
}

.assign-pool,
.assign-room {
    border: 2px dashed var(--color-border);
}

.assign-pool.is-over,
.assign-room.is-over {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.assign-room.is-full {
    border-color: var(--color-danger-500);
}

.assign-tutor {
    margin: 0;
    padding: 0 var(--spacing-4) var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.assign-list {
    display: grid;
    gap: var(--spacing-2);
    min-height: 5rem;
}

.assign-empty {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.assign-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    cursor: grab;
}

.assign-chip.is-dragging {
    opacity: 0.4;
}

.assign-chip-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-1) var(--spacing-2);
}

.assign-chip-number {
    min-width: 3.5rem;
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.assign-chip-name {
    font-weight: 600;
}

.assign-chip-side {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.select--sm {
    width: auto;
    padding-block: var(--spacing-1);
    font-size: var(--font-size-sm);
}

@media (max-width: 960px) {
    .assign {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Ph2 本実装（2026-10-20）：最終チェックの「出願を削除する」（普段は畳んでおく） ---- */
.danger-zone {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    border: 1px solid var(--color-danger-100);
    border-radius: var(--radius-md);
}

.danger-zone > summary {
    cursor: pointer;
    color: var(--color-danger-700);
    font-size: var(--font-size-sm);
}