/* 新業務システム。手書きの CSS 1 枚（CSP のため style 属性・data: 画像は使わない） */

:root {
    --ink: #1f2933;
    --muted: #5b6573;
    --line: #e2e8f0;
    --bg: #f5f7fa;
    --surface: #fff;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --head: #1e293b;
    --danger: #b42318;
    --danger-line: #f3b8b2;
    --danger-bg: #fef3f2;
    --warn: #b54708;
    --warn-bg: #fff4e5;
    --radius: 8px;
}

/* ===== 土台 ===== */
*, *::before, *::after { box-sizing: border-box; }
/* hidden 属性は、display を指定した要素でも隠す（ブラウザの既定の規則は作者の CSS に負ける。編集欄のプレビューの切り替えで使う） */
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    overflow-wrap: anywhere;
}
main { max-width: 72rem; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.4; }
h1 { font-size: 1.4rem; margin: .25rem 0 .75rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
mark { background: #fde68a; color: inherit; padding: 0 .1em; }
.muted { color: var(--muted); font-size: .9rem; }
.key { color: var(--muted); font-weight: normal; font-size: .85em; margin-left: .5rem; }
.error-message { color: #b42318; }

/* ===== 部品 ===== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.button, .button-plain {
    display: inline-block;
    font: inherit;
    font-size: .9rem;
    line-height: 1.5;
    padding: .35rem .9rem;
    border-radius: 6px;
    border: 1px solid var(--accent);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.button { background: var(--accent); color: #fff; }
.button:hover { background: var(--accent-dark); text-decoration: none; }
.button-plain { background: var(--surface); color: var(--ink); border-color: #cbd5e1; }
.button-plain:hover { background: var(--bg); text-decoration: none; }
.field {
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: .3rem .5rem;
    max-width: 100%;
}
/* 入力欄の高さをそろえる（今は日付の欄だけ高い） */
.field:not(textarea) { height: 2.25rem; padding-top: 0; padding-bottom: 0; }
.button-sm { font-size: .8rem; padding: .15rem .6rem; }
/* 一覧の中の「削除」「外す」は赤い縁の小さなボタン。確認の画面の「削除」は赤いボタン（.button-danger） */
.button-danger-line { display: inline-flex; align-items: center; font: inherit; font-size: .8rem; line-height: 1.5; color: var(--danger); background: var(--surface); border: 1px solid var(--danger-line); border-radius: 6px; padding: .15rem .6rem; white-space: nowrap; cursor: pointer; text-decoration: none; }
.button-danger-line:hover { background: var(--danger-bg); text-decoration: none; }
/* 数の丸いラベル（添付・コメントの見出しなど） */
.count { font-size: .72rem; font-weight: 600; color: #475569; background: #e9eef5; border-radius: 999px; padding: 0 .5rem; }
/* 枠の中の空のときの文 */
.empty { color: var(--muted); text-align: center; padding: 1.75rem 1rem; margin: 0; }
.pill {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
    padding: 0 .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pill-open { background: #fdecec; color: #b42318; }
.pill-doing { background: #e6efff; color: #1d4ed8; }
.pill-done { background: #e3f6ee; color: #067647; }
.pill-closed, .pill-other { background: #eef1f4; color: #5b6573; }
.tag {
    display: inline-block;
    font-size: .75rem;
    line-height: 1.6;
    padding: 0 .4rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--muted);
    background: var(--surface);
    white-space: nowrap;
}
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
    text-align: left;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    background: #f8fafc;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #f1f5ff; }

/* スマホだけ開閉する部分（チェックボックスと CSS。640px 以上では常に開く） */
.toggle-input, .toggle-label { display: none; }

/* ===== ヘッダー ===== */
.site-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    min-height: 48px;
    padding: 0 1.25rem;
    background: var(--head);
    color: #e2e8f0;
}
.site-header a { color: #cbd5e1; font-size: .88rem; }
.site-header a:hover { color: #fff; }
.site-header .brand { font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: #fff; text-decoration: none; }
.ext::after { content: "↗"; font-size: .8em; margin-left: .15em; opacity: .7; }
.site-menu { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.site-menu form { margin: 0; }
.site-menu .me { display: inline-flex; align-items: center; gap: .45rem; color: #e2e8f0; font-size: .88rem; }
.site-header .avatar { background: #475569; color: #fff; }
.site-logout { font: inherit; font-size: .8rem; color: #cbd5e1; background: none; border: 1px solid #475569; border-radius: 6px; padding: .1rem .6rem; cursor: pointer; }
.site-logout:hover { color: #fff; border-color: #94a3b8; }
/* スマホだけのメニューの開閉（チェックボックスと CSS。PC では出さず、メニューを横に並べる） */
.site-menu-toggle, .site-menu-button, .site-menu .sp { display: none; }
/* 検索ボックス（PC）。スマホの幅では検索アイコン（検索の画面へのリンク）にする */
.site-search { margin: 0 0 0 auto; flex: 0 1 18rem; min-width: 0; }
.site-search .field { width: 100%; height: 2rem; font-size: .85rem; color: #fff; background: #334155; border-color: #475569; }
.site-search .field::placeholder { color: #94a3b8; }
.site-search ~ .site-menu { margin-left: 0; }
.site-search-link { display: none; }

/* ===== 見出し・パンくず・タブ・白い帯 ===== */
.crumbs { font-size: .8rem; color: var(--muted); margin: .25rem 0; }
.crumbs a { color: var(--muted); }
.crumbs .sep { margin: 0 .35em; }
.page-title { margin: .1rem 0 .6rem; }
.tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: nowrap;
}
.tabs a { padding: .4rem .8rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
/* プロジェクトの中・システム管理の画面の頭。main の外の全幅（中は main と同じ幅） */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.page-head-in { max-width: 72rem; margin: 0 auto; padding: .7rem 1.25rem 0; }
.page-head .crumbs { margin: 0; }
.page-head-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: .15rem 0 .35rem; font-size: 1.35rem; }
.page-head-title .key { margin-left: 0; }
.page-head .tabs { border-bottom: 0; margin-bottom: 0; gap: .25rem; }
.page-head .tabs a { padding: .45rem .85rem; font-size: .9rem; margin-bottom: 0; }
.page-head + main { padding-top: 1.25rem; }
.mail-count { margin: 0 0 .3rem; font-size: .8rem; color: var(--muted); }
.mail-count.is-bad { color: var(--danger); font-weight: 700; }

/* ===== ページ送り ===== */
.pager { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 1.25rem 0; font-size: .9rem; }
.pager a, .pager-off { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: .2rem .8rem; }
.pager-off { color: #94a3b8; }
.pager-now { color: var(--ink); font-weight: 600; padding: 0 .4rem; }

/* ===== ログイン・エラー ===== */
.center-card { max-width: 28rem; margin: 3rem auto; padding: 1.5rem 1.75rem; text-align: center; }
.center-card h1 { font-size: 1.2rem; }
.error-code { font-size: 2.5rem; font-weight: 700; color: var(--muted); margin: 0; }

/* ===== 課題の追加: テンプレートのリンク ===== */
.template-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; font-size: .85rem; color: var(--muted); margin: 0 0 .8rem; }
.template-links a { font-size: .8rem; border: 1px solid #c7d7fe; background: #eef4ff; border-radius: 999px; padding: .05rem .7rem; }
.template-links a:hover { text-decoration: none; background: #e0eaff; }

/* ===== 課題の一覧 ===== */
.list-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin-bottom: .75rem; }
.list-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .6rem; flex: 1; min-width: 0; }
.list-filters label { display: flex; flex-direction: column; gap: .1rem; font-size: .72rem; color: var(--muted); }
.list-filters .field { min-width: 8.5rem; }
.list-filters .filter-q .field { width: 14rem; }
.filters-more summary { cursor: pointer; color: var(--muted); font-size: .8rem; padding: .45rem 0; }
.filters-more-body { display: flex; flex-wrap: wrap; gap: .6rem .75rem; margin-top: .5rem; }
.clear { white-space: nowrap; font-size: .85rem; padding: .45rem 0; }
.list-bar .list-add { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.table-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 1rem; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); background: #fbfcfe; }
.who { display: inline-flex; align-items: center; gap: .4rem; }
.table-wrap { overflow-x: auto; }
.issue-table .col-key { white-space: nowrap; }
.issue-table .col-key a { color: var(--muted); }
.issue-table .col-summary { min-width: 14rem; }
.issue-table td { vertical-align: middle; }
.issue-table .col-summary a { color: var(--ink); font-weight: 600; }
.issue-table .col-meta { white-space: nowrap; color: #3e4752; }
.issue-table .col-time { color: var(--muted); font-size: .82rem; }

/* ===== 詳細（課題・Wiki・ドキュメント） ===== */
.issue-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; margin-bottom: 1rem; }
.issue-head-main { flex: 1; min-width: 0; }
.issue-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.issue-key { color: var(--muted); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.issue-title { font-size: 1.35rem; margin: .2rem 0 .25rem; }
.issue-by { font-size: .8rem; color: var(--muted); margin: 0; }
.issue-head-act { display: flex; gap: .5rem; align-items: center; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; grid-template-areas: "main side"; gap: 1rem; align-items: start; }
.detail-main { grid-area: main; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.detail-side { grid-area: side; min-width: 0; }
.section { padding: 1rem 1.15rem; }
.section + .section { border-top: 1px solid var(--line); }
.section-title { font-size: .85rem; color: var(--muted); margin: 0 0 .6rem; }
.props-card { padding: .2rem 0; }
.props-card dl { margin: 0; padding: .6rem 1rem; display: flex; flex-direction: column; gap: .45rem; font-size: .9rem; }
.props-card dl + dl { border-top: 1px solid var(--line); }
.props-card dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.props-card dt { color: var(--muted); font-size: .78rem; }
.props-card dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.props-card .props-main dd { font-weight: 600; }
.child-row { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; padding: .15rem 0; }
.child-row span { flex: 1; min-width: 0; }
.comments { padding: 1rem 0 0; }
.comments .section-title { padding: 0 1.15rem; }
.comment { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; padding: .85rem 1.15rem; border-top: 1px solid var(--line); }
.avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: #cbd5e1; color: #334155; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avatar-sm { width: 1.5rem; height: 1.5rem; font-size: .68rem; line-height: 1; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
.comment-meta b { color: var(--ink); font-size: .88rem; }
.comment-meta .comment-fix { margin-left: auto; }
.changes { list-style: none; margin: .1rem 0 .4rem; padding: .3rem .7rem; background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; font-size: .8rem; color: #3e4752; }
.changes li { padding: .1rem 0; }
.comment-form { padding: 1rem 1.15rem; border-top: 1px solid var(--line); }
.comment-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .75rem; padding-top: .25rem; }
.comment-foot label { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; color: var(--muted); }
.comment-foot .button { margin-left: auto; }
.comment-none { color: var(--muted); padding: 0 1.15rem 1rem; margin: 0; }
.comment-notify { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.notify { margin: .25rem 0 .6rem; font-size: .85rem; }
.notify summary { cursor: pointer; color: var(--muted); font-size: .8rem; padding: .2rem 0; }
.notify-note { color: var(--muted); font-size: .75rem; margin: .2rem 0 .4rem; }
.notify-list { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }

/* ===== 期限の色・ホーム ===== */
.due-over { color: var(--danger); font-weight: 600; }
.due-today { color: var(--warn); font-weight: 600; }
.flag { display: inline-block; font-size: .68rem; font-weight: 700; line-height: 1.5; padding: 0 .4rem; border-radius: 4px; margin-left: .3rem; vertical-align: .1em; }
.flag-over { background: var(--danger-bg); color: var(--danger); }
.flag-today { background: var(--warn-bg); color: var(--warn); }
.sec-head { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 .5rem; }
.sec-head h2 { margin: 0; font-size: 1rem; }
.home { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
.home .sec-head:first-child { margin-top: .25rem; }
.mine { list-style: none; margin: 0; padding: 0; }
.mine li { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border-top: 1px solid var(--line); }
.mine li:first-child { border-top: 0; }
.mine li:hover { background: #f8faff; }
.mine-body { flex: 1; min-width: 0; }
.mine-top { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; font-size: .8rem; color: var(--muted); }
.mine-sum { display: block; color: var(--ink); font-weight: 600; margin-top: .05rem; }
.mine-due { flex: none; text-align: right; font-size: .85rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mine-due small { display: block; font-size: .7rem; }
.mine-due.due-over { color: var(--danger); }
.mine-due.due-today { color: var(--warn); }
.project-list { list-style: none; margin: 0; padding: .3rem 0; }
.project-list li { display: flex; align-items: center; gap: .5rem; padding: .4rem 1rem; }
.project-list li:hover { background: #f8faff; }
.project-list a { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; font-size: .9rem; }
.project-key { display: block; color: var(--muted); font-weight: 400; font-size: .75rem; }
.archived { margin-top: .6rem; font-size: .85rem; }
.archived summary { cursor: pointer; color: var(--muted); padding: .2rem .25rem; }
.archived .project-list { margin-top: .4rem; }
.archived .project-list a { color: var(--muted); }

/* ===== 通知・チェック欄 ===== */
.flash { padding: .6rem 1rem; border: 1px solid var(--line); border-left: 4px solid #12b76a; background: var(--surface); border-radius: var(--radius); }
.flash.error-message { border-left-color: var(--danger); background: var(--danger-bg); }
.check { display: flex; align-items: center; gap: .45rem; }
/* ===== スマホ ===== */
@media (max-width: 639px) {
    .home { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .mine li { padding: .6rem .8rem; }
    main { padding: .75rem .9rem 2rem; }
    .site-header { padding: 0 .9rem; }
    .site-links, .site-menu .me { display: none; }
    .site-menu-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
    .site-menu-button { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; cursor: pointer; color: #e2e8f0; }
    .site-menu-button::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
    .site-menu-toggle:focus-visible + .site-menu-button { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
    .site-menu { display: none; position: absolute; right: .5rem; top: calc(100% + 4px); z-index: 5; flex-direction: column; align-items: stretch; gap: 0; min-width: 12rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); padding: .35rem; }
    .site-menu-toggle:checked ~ .site-menu { display: flex; }
    .site-menu a, .site-menu .site-logout { display: block; color: var(--ink); font-size: .88rem; padding: .45rem .6rem; border: 0; border-radius: 6px; text-align: left; width: 100%; }
    .site-menu a:hover { color: var(--ink); background: var(--bg); }
    .site-menu .sp { display: block; }
    .site-menu .site-menu-name { font-size: .75rem; color: var(--muted); padding: .3rem .6rem .1rem; }
    .site-search { display: none; }
    .site-search-link { display: inline-flex; margin-left: auto; padding: .3rem; }
    .site-search-link .ico { width: 20px; height: 20px; }
    .site-search-link ~ .site-menu-button { margin-left: 0; }
    .site-menu form { border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .25rem; }
    .page-head-in { padding: .55rem .9rem 0; }
    .page-head-title { font-size: 1.15rem; }
    .page-head + main { padding-top: .9rem; }
    h1 { font-size: 1.2rem; }
    .toggle-label {
        display: flex;
        align-items: baseline;
        gap: .35em;
        cursor: pointer;
        color: var(--accent);
        padding: .5rem .75rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    .toggle-label::before { content: "▸"; }
    .toggle-input:checked + .toggle-label::before { content: "▾"; }
    .toggle-label .muted { margin-left: auto; }
    .toggle-input { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
    .toggle-input:focus-visible + .toggle-label { outline: 2px solid var(--accent); outline-offset: 2px; }
    .toggle-input:not(:checked) ~ .toggle-body { display: none; }

    .list-bar { flex-direction: column; align-items: stretch; }
    .list-bar .list-add { margin-left: 0; justify-content: center; }
    .list-filters { display: grid; grid-template-columns: 1fr 1fr; margin-top: .5rem; }
    .list-filters .field { min-width: 0; width: 100%; }
    .list-filters .filter-sort, .list-filters .button-plain, .list-filters .filters-more, .list-filters .filter-q { grid-column: 1 / -1; }
    .list-filters .filter-q .field { width: 100%; }
    .filters-more-body label { min-width: 0; flex: 1 1 9rem; }
    .issue-table thead { display: none; }
    .issue-table, .issue-table tbody { display: block; }
    .issue-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
    .issue-table tr:last-child { border-bottom: none; }
    .issue-table td { display: block; padding: 0; border: none; background: none; }
    .table.issue-table tbody tr:hover td { background: none; }
    .issue-table .col-key { order: 1; flex: 1; font-size: .8rem; }
    .issue-table .col-status { order: 2; }
    .issue-table .col-summary { order: 3; flex-basis: 100%; min-width: 0; }
    .issue-table .col-meta { order: 4; font-size: .8rem; color: var(--muted); white-space: normal; }
    .issue-table .col-meta::before { content: attr(data-label) " "; }
    .issue-table .col-meta:empty { display: none; }
    .issue-table .col-time { order: 5; font-size: .8rem; }
    .issue-table .empty { flex-basis: 100%; }

    .detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; }
    .issue-title { font-size: 1.15rem; }
    .issue-head-act { width: 100%; }
    .props-card { margin-top: .5rem; }
    .props-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; padding: .6rem .9rem; }
    .props-card dl > div { display: block; min-width: 0; }
    .comment-foot label { flex: 1 1 8rem; }
    .comment-foot .button { width: 100%; text-align: center; margin-left: 0; }
    .section { padding: .85rem .9rem; }
    .comment { padding: .75rem .9rem; }
}

/* ===== フォームの部品（新業務システム） ===== */
.form { display: flex; flex-direction: column; gap: .75rem; max-width: 48rem; }
/* コメント欄は区切り線を右端まで引く（中の欄は .form-row の幅のまま。.comment-form の規則は .form より前にあるので、ここで書く） */
.form.comment-form { max-width: none; }
.card.form { padding: .9rem 1rem; }
.form-row { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); width: 100%; max-width: 40rem; }
textarea.field { min-height: 8rem; resize: vertical; font: inherit; }
/* 本文の編集欄（editor.js が組み立てる。モックの 1-B）。.form-row の小さく薄い文字を受け継がない */
.editor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.editor-seg { display: inline-flex; background: #e9eef5; border-radius: 8px; padding: 3px; }
.editor-seg button { font: inherit; font-size: .8rem; color: var(--muted); background: none; border: 0; border-radius: 6px; padding: .2rem .8rem; cursor: pointer; }
.editor-seg [aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .15); }
.editor { border: 1px solid #cbd5e1; border-radius: 8px; background: var(--surface); overflow: hidden; }
.editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.editor-tools { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem; border-bottom: 1px solid var(--line); }
.editor-group { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.editor-group > * + * { border-left: 1px solid #cbd5e1; }
.editor-group button, .editor-group select { font: inherit; color: #334155; background: var(--surface); border: 0; height: 30px; cursor: pointer; }
.editor-group button { display: inline-flex; align-items: center; justify-content: center; width: 32px; font-size: .95rem; }
.editor-group select { font-size: .8rem; padding: 0 .3rem; }
.editor-group button:hover { background: #f1f5f9; }
.editor > textarea.field { display: block; width: 100%; min-height: 9rem; border: 0; border-radius: 0; outline: 0; padding: .65rem .8rem; }
/* プレビュー。保存した後の本文（body の文字）と同じ大きさと色にする */
.editor-preview { font-size: 15px; color: var(--ink); padding: .65rem .8rem; min-height: 9rem; overflow-x: auto; }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: currentColor; stroke: none; }
.ico text { fill: currentColor; stroke: none; font: 700 7.4px system-ui, sans-serif; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.button-danger { background: #b42318; border-color: #b42318; color: #fff; }
.error-list { margin: 0 0 .75rem; padding: .6rem 1rem .6rem 2rem; border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); }
.field-narrow { width: 6rem; }
.table td:first-child { white-space: nowrap; }

/* ===== 課題（新業務システム） ===== */
.issue-form { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; align-items: start; }
.issue-form-main { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .9rem; }
.issue-form-side { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.issue-form-main .form-row, .issue-form-side .form-row { max-width: none; }
.issue-form-side .field { width: 100%; }
.issue-form-side .field-narrow { width: 6rem; }
.issue-form-foot { grid-column: 1 / -1; }
.input-prefix { display: flex; align-items: center; gap: .3rem; color: var(--ink); }
/* --text は本文の色（引用の中は薄い色）。チェックリストの済んでいない項目を元の色に戻すのに使う */
.markdown { overflow-wrap: anywhere; --text: var(--ink); }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: 1.2em 0 .5em; }
.markdown h1 { font-size: 1.3rem; }
.markdown h2 { font-size: 1.15rem; }
.markdown h3, .markdown h4 { font-size: 1rem; }
.markdown ul, .markdown ol { padding-left: 1.6rem; }
.markdown blockquote { margin: .75rem 0; padding: .1rem .9rem; border-left: 3px solid #cbd5e1; --text: var(--muted); color: var(--text); }
.markdown code { background: #f1f5f9; border-radius: 4px; padding: .05rem .3rem; font-size: .9em; }
.markdown pre { background: #f1f5f9; border-radius: var(--radius); padding: .7rem .9rem; overflow-x: auto; }
.markdown pre code { background: none; padding: 0; }
.markdown table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: .35rem .6rem; }
.markdown th { background: #f8fafc; }
.markdown img { max-width: 100%; height: auto; }
/* チェックリスト（モックの「直した後」）: 「・」を出さず、チェック欄をはっきり描き、済んだ項目は薄く。
   詰まったリストの <li><input> と、空行で区切ったリストの <li><p><input> の両方。li は flex にしない（太字などの前後に間が空き、入れ子が右に並ぶ）。
   チェック欄は「・」のあった所へ左に寄せる（li を寄せると、入れ子のリストが親の文の下まで下がらない） */
.markdown li:has(> input[type=checkbox]:first-child, > p:first-child > input[type=checkbox]:first-child) { list-style: none; }
.markdown li:has(> input:checked:first-child, > p:first-child > input:checked:first-child) { color: var(--muted); }
/* 済んでいない項目は、済んだ項目の中の入れ子でも元の色（li の色は子の項目に受け継がれる） */
.markdown li:has(> input:not(:checked):first-child, > p:first-child > input:not(:checked):first-child) { color: var(--text); }
/* :has() の使えないブラウザでは今の表示（「・」とチェック欄）のまま（チェック欄だけを左へ寄せると「・」に重なる） */
@supports selector(:has(*)) {
  .markdown input[type=checkbox] { appearance: none; position: relative; width: 1rem; height: 1rem; margin: 0 .2rem 0 -1.35rem; vertical-align: -.15rem; border: 1.5px solid #94a3b8; border-radius: 4px; background: var(--surface); }
  .markdown input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
  .markdown input[type=checkbox]:checked::after { content: ""; position: absolute; left: .27rem; top: .08rem; width: .28rem; height: .55rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
}

/* ===== 添付ファイル（モックの 2-B・3-A） ===== */
.attach-note { color: #b42318; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 種類のラベル */
.kind { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 6px; font-size: .62rem; font-weight: 800; line-height: 1; letter-spacing: .03em; }
.k-pdf { background: #fdecec; color: #b42318; }
.k-image { background: #ddf3f0; color: #0f766e; }
.k-sheet { background: #e3f6ee; color: #067647; }
.k-doc { background: #e6efff; color: #1d4ed8; }
.k-slide { background: #fff1e6; color: #c2410c; }
.k-zip { background: #fef7e0; color: #a16207; }
.k-other { background: #eef1f4; color: #5b6573; }
/* ファイルの欄: 追加する場所は点線の帯 1 本。選んだものは帯の下に小さなラベル */
.attach-add { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .8rem; width: 100%; font: inherit; text-align: left; color: var(--ink); background: #f8fafc; border: 1.5px dashed #b6c2d2; border-radius: 8px; padding: .5rem .8rem; cursor: pointer; }
.attach-add:hover { background: #f1f5f9; border-color: #94a3b8; }
.attach-add.over { background: #eef4ff; border-color: var(--accent); color: var(--accent-dark); }
.attach-lead { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; }
.attach-hint { color: var(--muted); font-weight: 400; font-size: .8rem; }
.attach-add .attach-limit { color: var(--muted); font-size: .75rem; }
.attach-add.over .attach-limit { color: var(--accent-dark); }
.attach-add.over .attach-hint { display: none; }
.attach-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.attach-chips:empty { display: none; }
.attach-chips li { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .15rem .25rem; font-size: .8rem; color: var(--ink); }
.attach-chips .kind { width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: .45rem; }
.attach-chips .nm { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chips .sz { color: var(--muted); white-space: nowrap; }
.attach-chips .x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 999px; background: none; color: #64748b; cursor: pointer; }
.attach-chips .x .ico { width: 12px; height: 12px; }
.attach-chips li.bad { border-color: #f3b8b2; background: #fef3f2; color: #b42318; }
.attach-chips li.bad .sz { color: #b42318; }
.attach-stop { margin: 0; color: #b42318; font-size: .8rem; }
/* 添付の一覧: 1 つを 1 行（種類のラベル・名前・2 行目に大きさなど・右に「削除」） */
.attach-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.attach-list { list-style: none; margin: 0; padding: 0; }
.attach-list li { display: flex; align-items: center; gap: .75rem; padding: .55rem .2rem; border-top: 1px solid var(--line); }
.attach-list li:first-child { border-top: 0; }
.attach-body { flex: 1; min-width: 0; }
.attach-name { display: block; font-weight: 600; line-height: 1.45; }
.attach-meta { display: block; color: var(--muted); font-size: .78rem; }
.attach-del { flex: none; font-size: .78rem; color: #b42318; background: var(--surface); border: 1px solid #f3b8b2; border-radius: 6px; padding: .15rem .6rem; white-space: nowrap; }
.attach-del:hover { background: #fef3f2; text-decoration: none; }
/* コメントの中は、薄い枠で囲んだ同じ形 */
.attachments.in-comment { margin-top: .45rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 .6rem; background: #fbfcfe; }
.in-comment .attach-list li { padding: .4rem .1rem; }
.in-comment .kind { width: 1.9rem; height: 1.9rem; font-size: .55rem; border-radius: 5px; }
/* ===== 設定・システム管理の表（モックの 6-A・6 の共通） ===== */
.settings { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.settings-body { min-width: 0; }
.side-nav { display: flex; flex-direction: column; gap: .1rem; }
.side-nav a { color: #475569; padding: .4rem .75rem; border-radius: 6px; font-size: .9rem; }
.side-nav a:hover { background: #e9eef5; text-decoration: none; }
.side-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--line); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; padding: .85rem 1rem .6rem; }
.card-head h2 { margin: 0; font-size: 1rem; }
.card-head p { margin: 0; font-size: .8rem; color: var(--muted); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--line); background: #fbfcfe; border-radius: 0 0 var(--radius) var(--radius); }
.edit-table td { vertical-align: middle; }
.edit-table td:first-child { width: 45%; }
.edit-table td:first-child .field { width: 100%; }
.edit-table .row-act { text-align: right; white-space: nowrap; }
.edit-table .row-act > * + * { margin-left: .35rem; }
/* テンプレートの「あり」はモックの緑の小さなラベル */
.row-act .tag { font-size: .65rem; font-weight: 700; color: #067647; background: #e3f6ee; border-color: transparent; border-radius: 999px; padding: 0 .4rem; }
.add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .6rem; padding: .85rem 1rem; margin-top: .9rem; }
.add-row h3 { width: 100%; margin: 0; font-size: .85rem; }
.add-row label { display: flex; flex-direction: column; gap: .1rem; font-size: .72rem; color: var(--muted); flex: 0 1 16rem; min-width: 0; }
.add-row .field { width: 100%; }
.users-table td { vertical-align: middle; }
.users-table .is-off td { color: var(--muted); }
/* 名前は折り返す（.table td:first-child の nowrap より強く） */
.users-table td.u-name { white-space: normal; overflow-wrap: anywhere; }
.pill-admin { background: #ede9fe; color: #5b21b6; }
.pill-off { background: #eef1f4; color: #5b6573; }
.sec-head .list-add { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }

/* ===== Wiki ===== */
.wiki-tree { list-style: none; margin: 0; padding: 0; }
.wiki-tree .wiki-tree { padding-left: 1.25rem; border-left: 1px solid var(--line); margin: .15rem 0 .15rem .35rem; }
.wiki-tree li { padding: .2rem 0; overflow-wrap: anywhere; }
.wiki-dir { font-weight: 600; color: var(--muted); }
.wiki-meta { font-size: .75rem; color: var(--muted); margin-left: .4rem; }
/* 課題の追加・編集と同じく、本文の幅いっぱいに使う */
.wiki-form, .wiki-form .form-row { max-width: none; }
.wiki-latest { margin: 0 0 .75rem; }
.wiki-version-by { font-size: .8rem; color: var(--muted); margin: 0 0 .75rem; }
.wiki-source { margin-top: 1rem; }
.wiki-source .section-title { display: block; }
.wiki-source .field { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }

/* ===== 検索（閲覧システムの検索の画面と同じ形） ===== */
.search-form { display: flex; flex-wrap: wrap; gap: .5rem; padding: .9rem 1rem; margin-bottom: .75rem; }
.search-form .search-q { flex: 1 1 16rem; min-width: 0; }
.search-form select { flex: 0 1 auto; min-width: 0; }
.count-line { color: var(--muted); font-size: .85rem; margin: .5rem .1rem; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.result { padding: .75rem 1rem; }
.result-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.result-head .muted { font-size: .8rem; }
.result-date { margin-left: auto; }
.result-title { display: block; font-weight: 600; margin: .2rem 0; }
.snippet { color: #3e4752; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 639px) {
    .attach-hint { display: none; }
    .attach-chips .nm { max-width: 9.5rem; }
    .attach-list li { align-items: flex-start; }
    .editor-group button { width: 36px; }
    .editor-group button, .editor-group select { height: 36px; }
    .issue-form { grid-template-columns: minmax(0, 1fr); }
    .issue-form-main, .issue-form-side { padding: .85rem .9rem; }
    .settings { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .side-nav { flex-direction: row; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--line); gap: 0; }
    .side-nav a { border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .side-nav a[aria-current="page"] { box-shadow: none; background: none; border-bottom-color: var(--accent); }
    .edit-table thead { display: none; }
    .edit-table, .edit-table tbody { display: block; }
    .edit-table tr { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: .4rem .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
    .edit-table td { display: block; padding: 0; border: 0; }
    .edit-table td:first-child { width: auto; }
    .edit-table .row-act { grid-column: 1 / -1; text-align: left; }
    .users-table thead { display: none; }
    .users-table, .users-table tbody { display: block; }
    .users-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
    .users-table td { display: block; padding: 0; border: 0; white-space: normal; }
    .users-table .u-name { flex-basis: 100%; }
    .users-table .u-mail { flex-basis: 100%; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
    .users-table .u-last { font-size: .78rem; color: var(--muted); }
    .users-table .u-last:not(:empty)::before { content: "最終ログイン "; }
    .users-table .u-count { font-size: .78rem; color: var(--muted); }
    .users-table .u-count::before { content: "メンバー "; }
    .users-table .u-act { margin-left: auto; }
    .add-row label { flex: 1 1 100%; }
    /* 過去の版: 1 行目に版と日時、2 行目に名前、3 行目に更新者 */
    .wiki-versions thead { display: none; }
    .wiki-versions, .wiki-versions tbody { display: block; }
    .wiki-versions tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
    .wiki-versions tr:last-child { border-bottom: none; }
    .wiki-versions td { display: block; padding: 0; border: 0; }
    .wiki-versions .v-time { margin-left: auto; font-size: .78rem; color: var(--muted); }
    .wiki-versions .v-name { order: 1; flex-basis: 100%; overflow-wrap: anywhere; }
    .wiki-versions .v-user { order: 2; font-size: .78rem; color: var(--muted); }
}