/* ジョブタス鹿屋 利用者ページ
   - スマホ優先。文字は大きめ、ボタンは指で押しやすい大きさ（高さ 48px 以上）
   - 色だけに頼らず、文字でも状態がわかるようにする */

:root {
    --bg: #f5f7f6;
    --surface: #ffffff;
    --text: #1d2624;
    --muted: #5b6764;
    --line: #d7dfdc;
    --brand: #1f6f5c;
    --brand-dark: #16503f;
    --brand-soft: #e3f1ec;
    --accent: #c2410c;
    --accent-soft: #fdeee6;
    --danger: #b42318;
    --danger-soft: #fdecea;
    --ok: #18794e;
    --ok-soft: #e6f4ec;
    --warn-soft: #fff6d6;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
    --on-brand: #ffffff;        /* 濃い色の上の文字 */
    --staff: #2b3a55;
    --input-line: #aab6b2;
    --th-bg: #f0f3f2;
    --gray-soft: #eceff0;
    --info-soft: #dbeafe;
    --info-line: #a9c7f2;
    --furikae-soft: #e2efda;
    --furikae-line: #9cc68a;
    --ok-line: #b7dfc8;
    --danger-line: #f3c3bd;
    --warn-text: #8a5a00;
    --tabbar-h: 64px;
    --gutter: 16px;
    color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    padding-bottom: 84px; /* 下のメニューの分 */
}
body.staff { font-size: 16px; padding-bottom: 24px; }

a { color: var(--brand-dark); }
h1 { font-size: 1.45rem; margin: .4rem 0 1rem; line-height: 1.4; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
p { margin: .4rem 0 .8rem; }
.muted { color: var(--muted); font-size: .9em; }
.small { font-size: .85em; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- ヘッダー ---- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px;
    background: var(--brand); color: var(--on-brand);
}
.staffbar { background: var(--staff); }
.brand { color: var(--on-brand); font-weight: 700; text-decoration: none; font-size: 1rem; }
.who { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 1px solid rgba(255,255,255,.6); color: var(--on-brand); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: .85rem; cursor: pointer; }

.container { max-width: 640px; margin: 0 auto; padding: 16px; }
.container.wide { max-width: 1200px; }

/* ---- 下のタブメニュー（利用者） ---- */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 64px; text-decoration: none; color: var(--muted); font-size: .72rem; line-height: 1.2;
}
.tabbar a .ico { font-size: 1.4rem; line-height: 1.3; }
.tabbar a.active { color: var(--brand); font-weight: 700; background: var(--brand-soft); }

/* ---- 職員メニュー ---- */
.staffnav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.staffnav a { padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--text); }
.staffnav a.active { background: var(--staff); color: var(--on-brand); }

/* ---- カード ---- */
.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; margin: 0 0 14px; box-shadow: var(--shadow);
}
.card h2 { margin-top: 0; }
.card.highlight { border-color: var(--accent); background: var(--accent-soft); }
.card.link-card { display: block; text-decoration: none; color: inherit; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack > * + * { margin-top: 10px; }

/* ---- ボタン ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 10px 18px;
    border: 1px solid var(--brand); border-radius: 10px;
    background: var(--brand); color: var(--on-brand);
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--brand-dark); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #f59e0b; outline-offset: 2px;
}
.btn.secondary { background: var(--surface); color: var(--brand-dark); }
.btn.secondary:hover { background: var(--brand-soft); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.small { min-height: 36px; padding: 4px 12px; font-size: .9rem; font-weight: 600; }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.big { min-height: 96px; font-size: 1.5rem; border-radius: 16px; flex-direction: column; gap: 0; }
.btn.big small { font-size: .85rem; font-weight: 400; opacity: .9; }
.btn.in { background: var(--brand); }
.btn.out { background: var(--accent); border-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---- 入力 ---- */
label { display: block; font-weight: 700; margin: 14px 0 6px; }
label .req { color: var(--danger); font-size: .8em; margin-left: 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], select, textarea {
    width: 100%; min-height: 48px; padding: 10px 12px;
    border: 1px solid var(--input-line); border-radius: 10px; background: var(--surface);
    font: inherit; color: inherit;
}
textarea { min-height: 110px; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 10px 0; min-height: 40px; }
.check input { width: 24px; height: 24px; }
.field-error, .validation-summary-errors { color: var(--danger); font-size: .9rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.2em; }
.hint { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row > div > label { margin-top: 14px; }

/* ---- お知らせ・状態表示 ---- */
.flash { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 700; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.flash.error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--brand-soft); color: var(--brand-dark); vertical-align: middle; }
.badge.important { background: var(--danger); color: var(--on-brand); }
.badge.new { background: var(--accent); color: var(--on-brand); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.wait { background: var(--warn-soft); color: var(--warn-text); }
.badge.gray { background: var(--gray-soft); color: var(--muted); }
.count { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--danger); color: var(--on-brand); font-size: .8rem; text-align: center; }

.clock { font-size: 2.6rem; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.2; font-variant-numeric: tabular-nums; }
.date-line { text-align: center; color: var(--muted); }
.status-line { text-align: center; font-weight: 700; margin: 8px 0 14px; }

/* ---- 一覧 ---- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); padding: 12px 2px; }
.list li:last-child { border-bottom: 0; }
.list a.item { display: block; text-decoration: none; color: inherit; }
.list .title { font-weight: 700; }
.unread .title::before { content: "●"; color: var(--accent); margin-right: 6px; }

table.tbl { width: 100%; border-collapse: collapse; background: var(--surface); }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.tbl th { background: var(--th-bg); font-size: .85rem; white-space: nowrap; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.sum td { font-weight: 700; border-top: 2px solid var(--text); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.tbl-wrap .tbl th:first-child, .tbl-wrap .tbl td:first-child { padding-left: 12px; }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.big-number { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.big-number small { font-size: 1rem; font-weight: 400; margin-left: 4px; }

.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.month-nav strong { font-size: 1.1rem; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .h { text-align: center; font-size: .75rem; color: var(--muted); }
.cal a, .cal span.d { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.2; }
.cal span.d.empty { background: transparent; border: 0; }
.cal .mark { font-size: .65rem; font-weight: 700; }
.cal .done { background: var(--ok-soft); border-color: var(--ok-line); }
.cal .staffok { background: var(--info-soft); border-color: var(--info-line); }
.cal .today { outline: 2px solid var(--accent); }
.cal .future { opacity: .45; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--line); }
.legend .done { background: var(--ok-soft); }
.legend .staffok { background: var(--info-soft); }

.login-box { max-width: 420px; margin: 24px auto; }

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 12px; }
.toolbar label { margin: 0 0 4px; font-size: .85rem; }
.toolbar input, .toolbar select { min-height: 40px; padding: 6px 10px; width: auto; }

.secret { font-family: Consolas, "Courier New", monospace; font-size: 1.4rem; letter-spacing: .08em; background: var(--warn-soft); padding: 6px 12px; border-radius: 8px; display: inline-block; }

.targets { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; background: var(--surface); }
.targets .check { margin: 2px 0; min-height: 32px; }

@media (max-width: 420px) {
    .row { grid-template-columns: 1fr; }
    .grid2 { grid-template-columns: 1fr; }
    .clock { font-size: 2.2rem; }
}

@media print {
    .topbar, .tabbar, .staffnav, .actions, .no-print { display: none !important; }
    body { background: #fff; padding: 0; }
    .card { box-shadow: none; border-color: #999; }
}

.hidden { display: none !important; }

fieldset { min-width: 0; margin: 0 0 14px; }
fieldset[disabled] { opacity: .85; }

/* ヘッダーがスマホで折り返さないように */
.brand { line-height: 1.3; }
.who span { white-space: nowrap; }
button.link { white-space: nowrap; }
@media (max-width: 420px) {
    .topbar { padding: 8px 12px; }
    .brand { font-size: .9rem; }
    .who { font-size: .8rem; gap: 6px; }
}

/* 表の中の小さな入力欄 */
.tbl input[type=text] { width: 9em; min-height: 36px; padding: 4px 8px; font-size: .9rem; }
.tbl form.inline + form.inline { margin-left: 4px; }
.tbl td form { margin: 2px 0; }

/* ---- ログイン情報の配布カード（印刷用） ---- */
.print-only { display: none; }
.secret-cell { font-family: Consolas, "Courier New", monospace; letter-spacing: .05em; }
@media print {
    .print-only { display: block; }
    .no-print { display: none !important; }
    .container.wide { max-width: none; padding: 0; }
    .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .login-card {
        border: 1px dashed #666; padding: 10mm 8mm; min-height: 62mm;
        break-inside: avoid; page-break-inside: avoid; font-size: 11pt; line-height: 1.6;
    }
    .lc-title { font-size: 9pt; color: #444; }
    .lc-name { font-size: 15pt; font-weight: 700; margin: 2mm 0 3mm; }
    .login-card dl { display: grid; grid-template-columns: auto 1fr; gap: 1mm 4mm; margin: 0; }
    .login-card dt { color: #444; font-size: 9pt; align-self: center; }
    .login-card dd { margin: 0; }
    .lc-secret { font-family: Consolas, "Courier New", monospace; font-size: 15pt; letter-spacing: .08em; font-weight: 700; }
    .lc-note { margin-top: 3mm; font-size: 8.5pt; color: #333; }
}

/* ---- 選択肢（ラジオボタン）を横に並べる ---- */
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; padding: 8px 14px; min-height: 44px;
          border: 1px solid var(--input-line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.choice input { width: 20px; height: 20px; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.cal .furikae { background: var(--furikae-soft); border-color: var(--furikae-line); }
.legend .furikae { background: var(--furikae-soft); }
.small-select { width: auto; min-height: 36px; padding: 4px 8px; font-size: .9rem; }
.tbl input.small-num { width: 6.5em; min-height: 36px; padding: 4px 6px; font-size: .9rem; }

/* 書類の一覧：月ごとに「見る / PDF / Excel」 */
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* =========================================================================
   いろいろな画面・設定への対応
   ・画面の幅：小さいスマホ（〜320 / 〜360）・ふつうのスマホ・タブレット・パソコン・大きい画面
   ・スマホの横向き（高さが低い画面）
   ・iPhone のノッチ（切り欠き）や角の丸み
   ・文字を大きくする設定（ブラウザの拡大・OS の文字サイズ）
   ・ダークモード／ハイコントラスト（Windows）／動きを減らす設定
   ・指で操作する画面とマウスの画面
   ========================================================================= */

/* ---- 共通：どの幅でもはみ出さない ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
.card, .list .title, dl.kv dt, dl.kv dd { overflow-wrap: anywhere; }
.btn { text-align: center; line-height: 1.3; }
.tabbar a { padding: 4px 2px; text-align: center; overflow-wrap: anywhere; }
.topbar { flex-wrap: wrap; row-gap: 4px; }
.brand { min-width: 0; }

/* ---- 横の余白：ノッチ・角の丸みを避ける（viewport-fit=cover と組み合わせ） ---- */
.topbar {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
}
.container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
body { padding-bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
body.staff { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ---- 表：横にスクロールできることが影でわかるように・見出しを固定 ---- */
.tbl-wrap {
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    background:
        linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
        linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent) left / 10px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) right / 10px 100% no-repeat scroll;
}
.tbl-wrap table.tbl { background: transparent; }

/* ---- とても小さいスマホ（幅 360px 以下） ---- */
@media (max-width: 360px) {
    :root { --gutter: 12px; --tabbar-h: 58px; }
    body { font-size: 17px; }
    h1 { font-size: 1.3rem; }
    .card { padding: 12px; }
    .tabbar a { font-size: .66rem; min-height: var(--tabbar-h); }
    .tabbar a .ico { font-size: 1.25rem; }
    .btn { padding: 10px 14px; }
    .btn.big { min-height: 84px; font-size: 1.3rem; }
    .actions > .btn { flex: 1 1 100%; }          /* ボタンは 1 列に並べる */
    .big-number { font-size: 1.8rem; }
    .clock { font-size: 2rem; }
    .cal { gap: 2px; }
    .cal a, .cal span.d { min-height: 44px; font-size: .8rem; border-radius: 6px; }
    .cal .mark { font-size: .55rem; white-space: nowrap; letter-spacing: -.02em; }
    .doc-row { flex-direction: column; align-items: stretch; }
    .doc-actions .btn { flex: 1 1 0; }
    .month-nav .btn { padding: 4px 8px; }
}

/* ---- さらに小さい画面（幅 320px 以下・画面を 2 分割したとき など） ---- */
@media (max-width: 320px) {
    :root { --gutter: 10px; }
    body { font-size: 16px; }
    .who span { display: none; }                  /* 名前は隠して、ログアウトだけ残す */
    .tabbar a { font-size: .6rem; }
    dl.kv { grid-template-columns: 1fr; gap: 0; }
    dl.kv dd { text-align: left; margin-bottom: 6px; font-weight: 700; }
    .month-nav { flex-wrap: wrap; justify-content: center; }
    .toolbar > * { flex: 1 1 100%; }
    .toolbar input, .toolbar select { width: 100%; }
}

/* ---- ふつうのスマホ（〜599px）：職員メニューは横にスクロール ---- */
@media (max-width: 599px) {
    .staffnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .staffnav::-webkit-scrollbar { display: none; }
    .staffnav a { flex: 0 0 auto; white-space: nowrap; }
    .toolbar { align-items: stretch; }
    .toolbar .btn { flex: 1 1 auto; }
    .tbl th, .tbl td { padding: 6px 5px; font-size: .9rem; }
}

/* ---- スマホの横向き・高さが低い画面 ---- */
@media (orientation: landscape) and (max-height: 500px) {
    :root { --tabbar-h: 46px; }
    .topbar { position: static; padding-top: 6px; padding-bottom: 6px; }  /* 上のバーで画面がふさがらないように */
    .tabbar a { flex-direction: row; gap: 6px; min-height: var(--tabbar-h); font-size: .8rem; }
    .tabbar a .ico { font-size: 1.1rem; }
    .btn.big { min-height: 64px; font-size: 1.2rem; }
    .clock { font-size: 1.9rem; }
    .container { max-width: 900px; }
    .grid2, .row { grid-template-columns: 1fr 1fr; }
    .cal a, .cal span.d { min-height: 40px; }
    h1 { margin-bottom: .6rem; }
}

/* ---- タブレット（768px〜） ---- */
@media (min-width: 768px) {
    :root { --gutter: 24px; }
    .container { max-width: 760px; }
    .container.wide { max-width: 1200px; }
    .card { padding: 20px 24px; }
    .tabbar {
        left: 50%; right: auto; transform: translateX(-50%); width: min(760px, 100%);
        border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0;
        box-shadow: 0 -2px 12px rgba(0,0,0,.06); overflow: hidden;
    }
    .tabbar a { font-size: .8rem; }
    .cal a, .cal span.d { min-height: 64px; }
    .login-box { margin-top: 48px; }
    .doc-actions .btn { min-width: 84px; }
}

/* ---- パソコン（1024px〜）：利用者ページは読みやすい幅のまま中央に ---- */
@media (min-width: 1024px) {
    body:not(.staff) .container { max-width: 820px; }
    .topbar { padding-top: 12px; padding-bottom: 12px; }
    .brand { font-size: 1.1rem; }
    body.staff .container { max-width: 1280px; }
    .staffnav { padding-left: 24px; padding-right: 24px; }
}

/* ---- 大きい画面（1440px〜） ---- */
@media (min-width: 1440px) {
    body.staff .container, .container.wide { max-width: 1440px; }
}

/* ---- 文字を大きくする設定のとき（1 文字が大きい＝幅が狭いのと同じ扱い） ---- */
@media (max-width: 30em) {
    .row, .grid2 { grid-template-columns: 1fr; }
}

/* ---- 指で操作する画面：押せる大きさを確保・ホバーの色が残らないように ---- */
@media (hover: none) and (pointer: coarse) {
    .btn.small { min-height: 44px; padding: 6px 14px; }
    .staffnav a { padding: 10px 14px; }
    button.link { padding: 8px 12px; }
    .check input, .choice input { width: 26px; height: 26px; }
    .btn:hover { background: var(--brand); }
    .btn.secondary:hover { background: var(--surface); }
    .btn.danger:hover { background: var(--danger); }
    .btn.out:hover { background: var(--accent); }
    .btn:active { filter: brightness(.92); }
}
/* マウスの画面 */
@media (hover: hover) {
    .tabbar a:not(.active):hover, .staffnav a:not(.active):hover { background: var(--brand-soft); }
    .list a.item:hover .title { text-decoration: underline; }
}

/* ---- 入力欄：iPhone で入力時に画面が勝手に拡大されないよう 16px 以上に ---- */
input, select, textarea { font-size: max(16px, 1em); }

/* ---- ダークモード（スマホ・パソコンの設定が「ダーク」のとき） ---- */
@media screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1514;
        --surface: #18211f;
        --text: #e6ecea;
        --muted: #a3b0ac;
        --line: #2f3c39;
        --brand: #2f8f76;
        --brand-dark: #7fd1b9;
        --brand-soft: #1c3a32;
        --accent: #d9622a;
        --accent-soft: #3a2418;
        --danger: #d9473f;
        --danger-soft: #3a1c1a;
        --ok: #5fd39a;
        --ok-soft: #173126;
        --warn-soft: #3a3115;
        --staff: #3b4f74;
        --input-line: #4a5a56;
        --th-bg: #202b29;
        --gray-soft: #26302e;
        --info-soft: #1b2b45;
        --info-line: #34507d;
        --furikae-soft: #1f3320;
        --furikae-line: #4d7a45;
        --ok-line: #2c5b43;
        --danger-line: #6b2f2a;
        --warn-text: #f3c969;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4);
        color-scheme: dark;
    }
    .btn.secondary { border-color: var(--brand); }
    .flash.error { color: #ff9d96; }
}

/* ---- ハイコントラスト（Windows の「コントラスト テーマ」） ---- */
@media (forced-colors: active) {
    .btn, .card, .tabbar, .cal a, .cal span.d, .badge, .choice, .flash { border: 1px solid CanvasText; }
    .tabbar a.active, .staffnav a.active { outline: 3px solid Highlight; outline-offset: -3px; }
    .cal .today { outline: 3px solid Highlight; }
}
/* コントラストを強くする設定 */
@media (prefers-contrast: more) {
    :root { --muted: var(--text); --line: #6b7774; --input-line: #3d4846; }
    .btn.secondary { border-width: 2px; }
}

/* ---- 動きを減らす設定 ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- 印刷：どの画面からでも見やすく ---- */
@media print {
    body { font-size: 11pt; color: #000; }
    .container, body:not(.staff) .container { max-width: none; padding: 0; }
    .tbl-wrap { overflow: visible; border: 0; background: none; }
    .tbl { font-size: 9.5pt; }
    .tbl tr, .card, .doc-row { break-inside: avoid; }
    h1, h2 { break-after: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 表の中の状態表示は折り返さない */
.tbl .badge { white-space: nowrap; }