/* ============================================================
   スキルマップ デザインシステム
   Admindek 系の意匠 × OKLCH のチントニュートラル。
   ブランド色相 ≒ 264（藍寄りの青）。純白/純黒は使わず全neutralを微チント。
   ============================================================ */
:root {
    /* ブランド */
    --accent: oklch(0.585 0.176 264);
    --accent-600: oklch(0.515 0.182 264);
    --accent-soft: oklch(0.585 0.176 264 / 0.10);
    --accent-ring: oklch(0.585 0.176 264 / 0.30);

    /* チントニュートラル（青み264をごく薄く） */
    --bg: oklch(0.973 0.006 264);
    --card: oklch(0.996 0.0018 264);
    --text: oklch(0.305 0.026 264);
    --text-muted: oklch(0.565 0.024 264);
    --border: oklch(0.918 0.009 264);
    --border-soft: oklch(0.948 0.006 264);
    --hover-row: oklch(0.972 0.008 264);

    /* サイドバー（深い藍） */
    --sidebar-bg: oklch(0.305 0.056 266);
    --sidebar-bg-2: oklch(0.258 0.052 268);
    --sidebar-text: oklch(0.79 0.028 264);
    --sidebar-text-dim: oklch(0.605 0.030 264);
    --sidebar-active: var(--accent);

    /* ステータス */
    --green: oklch(0.625 0.135 158);
    --orange: oklch(0.715 0.150 65);
    --sky: oklch(0.685 0.115 233);
    --red: oklch(0.605 0.190 25);
    --amber: oklch(0.720 0.140 80);
    --purple: oklch(0.555 0.180 292);
    --slate: oklch(0.620 0.028 264);

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px oklch(0.30 0.06 264 / 0.05), 0 1px 3px oklch(0.30 0.06 264 / 0.045);
    --shadow-md: 0 12px 28px -12px oklch(0.30 0.08 264 / 0.20), 0 3px 8px oklch(0.30 0.08 264 / 0.05);
    --shadow-lg: 0 22px 50px -18px oklch(0.30 0.09 264 / 0.30);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sidebar-w: 256px;
    --topbar-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* 評価操作後は #assessment-{id} へ戻る。この復帰だけはアニメーションさせない
   （smooth だとページ先頭から該当行まで縦にスクロールする様子が見えてしまう）。 */
html:has(tr[id^="assessment-"]:target) { scroll-behavior: auto; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* 数値は等幅で桁を揃える */
.table td, .table th, .stat__value, .stat__sub, .unit-row__num, .progress + span, .kpi__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ===== ページ遷移（View Transitions API・MPA） =====
   非対応ブラウザ（Firefox等）は @view-transition を無視＝従来通り即時遷移で劣化なし。
   .sidebar / .topbar は固定保持。コンテンツだけがふわっと入れ替わる。 */
@view-transition { navigation: auto; }

.content { view-transition-name: vt-content; }

::view-transition-old(root)   { animation: vt-fade-out .20s var(--ease) both; }
::view-transition-new(root)   { animation: vt-fade-in  .32s var(--ease) both; }
::view-transition-old(vt-content) { animation: vt-fade-out .18s var(--ease) both; }
::view-transition-new(vt-content) { animation: vt-rise-in  .34s var(--ease) both; }

@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-rise-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* サイドバー・トップバーは遷移中もチラつかせず固定保持（root のフェード対象から切り離す）。 */
.sidebar { view-transition-name: vt-sidebar; }
.topbar  { view-transition-name: vt-topbar; }
::view-transition-group(vt-sidebar),
::view-transition-group(vt-topbar),
::view-transition-old(vt-sidebar),
::view-transition-new(vt-sidebar),
::view-transition-old(vt-topbar),
::view-transition-new(vt-topbar) { animation: none; }

/* ===== レイアウト ===== */
.app { min-height: 100vh; }

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(184deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 30;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: oklch(0.5 0.04 264 / 0.5) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: oklch(0.5 0.04 264 / 0.45); border-radius: 99px; }

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 22px 22px 18px;
    color: oklch(0.99 0.004 264);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .01em;
}
.sidebar__brand .logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
    padding: 3px;
    box-shadow: 0 6px 16px -4px oklch(0.585 0.176 264 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.25);
}

.sidebar__section {
    padding: 18px 22px 7px;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sidebar-text-dim);
}

/* サイドバー・アコーディオン（カテゴリ開閉） */
.sidebar__cat > summary.sidebar__section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 18px 8px;
    margin: 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
    color: oklch(0.92 0.01 264);
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: 8px;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.sidebar__cat > summary.sidebar__section::-webkit-details-marker { display: none; }
.sidebar__cat > summary.sidebar__section::marker { content: ""; }
.sidebar__cat > summary.sidebar__section:hover {
    color: #fff;
    background: oklch(1 0 0 / 0.05);
}
.sidebar__chev {
    width: 16px; height: 16px; flex: 0 0 16px;
    opacity: .75;
    transition: transform .22s var(--ease);
}
.sidebar__cat[open] > summary .sidebar__chev { transform: rotate(180deg); }

.nav { list-style: none; margin: 0; padding: 0 12px; }
.nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--sidebar-text);
    font-size: 13.5px;
    font-weight: 500;
    margin: 3px 0;
    position: relative;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav__item::before {
    content: "";
    position: absolute;
    left: -4px; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 20px;
    border-radius: 0 99px 99px 0;
    background: oklch(0.99 0.004 264);
    transition: transform .22s var(--ease);
}
.nav__item:hover { background: oklch(1 0 0 / 0.07); color: oklch(0.99 0.004 264); }
.nav__item:not(.is-active):hover { transform: translateX(2px); }
.nav__item:active { transform: translateX(1px) scale(.985); }
.nav__item.is-active {
    background: linear-gradient(135deg, oklch(0.62 0.17 263), oklch(0.54 0.18 266));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 18px -8px oklch(0.585 0.176 264 / 0.75);
}
.nav__item.is-active::before { transform: translateY(-50%) scaleY(1); }
.nav__item svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; transition: transform .22s var(--ease); }
.nav__item:hover svg { transform: scale(1.08); }
/* 端末在庫（カテゴリ外の独立トップレベル項目）。濃紺背景で沈まないよう既定色を明るく・やや大きめに。is-active/hover は詳細度が高く従来の色が優先される。 */
.nav__item--top { color: oklch(0.94 0.012 264); font-size: 14px; font-weight: 600; }

.sidebar__user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin: 8px 12px;
    border-radius: 12px;
    background: oklch(1 0 0 / 0.05);
}
.sidebar__user .avatar { background: linear-gradient(135deg, oklch(0.66 0.16 262), oklch(0.55 0.18 266)); }
.sidebar__user .meta { line-height: 1.25; min-width: 0; }
.sidebar__user .meta b { color: oklch(0.98 0.004 264); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__user .meta span { color: var(--sidebar-text-dim); font-size: 11px; }

/* ===== メイン ===== */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    background: oklch(0.996 0.0018 264 / 0.85);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 20;
}
/* ハンバーガー（狭幅時のみ表示。広幅では display:none） */
.topbar__burger {
    display: none;
    appearance: none; -webkit-appearance: none;
    border: 1px solid var(--border-soft);
    background: var(--card);
    color: var(--text-muted);
    width: 40px; height: 40px;
    border-radius: 10px;
    align-items: center; justify-content: center;
    cursor: pointer; flex: 0 0 auto;
    transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.topbar__burger:hover { color: var(--accent); border-color: var(--accent-ring); }
.topbar__burger svg { width: 20px; height: 20px; }

.topbar__search {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text-muted);
    flex: 1;
    max-width: 360px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.topbar__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.topbar__search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; color: var(--text); }

/* 機能検索の候補ドロップダウン */
.topbar__search { position: relative; }
.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px oklch(0 0 0 / 0.12);
    z-index: 50;
    max-height: 360px;
    overflow-y: auto;
}
.search-results__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text);
}
.search-results__item:hover,
.search-results__item.is-active { background: var(--accent-ring, oklch(0.95 0.03 264)); }
.search-results__label { font-size: 13px; font-weight: 600; }
.search-results__group {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 1px 7px;
    flex: 0 0 auto;
}
.topbar__spacer { flex: 1; }
.topbar__icons { display: flex; align-items: center; gap: 14px; color: var(--text-muted); }
.topbar__icons svg { width: 20px; height: 20px; transition: color .2s var(--ease); }
.topbar__icons svg:hover { color: var(--accent); cursor: pointer; }

.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    flex: 0 0 36px;
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2);
}

/* ユニット別アバター色（事務=青／CS=緑／派遣=橙／インターン=紫） */
.avatar--clerk    { background: oklch(0.62 0.13 250); }
.avatar--cs       { background: oklch(0.65 0.15 160); }
.avatar--dispatch { background: oklch(0.64 0.15 50); }
.avatar--intern   { background: oklch(0.62 0.10 300); }

.content { padding: 26px 28px; flex: 1; }

/* ===== ドロワー用オーバーレイ（狭幅時のみ機能。広幅では常に非表示） ===== */
.drawer-overlay {
    position: fixed; inset: 0;
    background: oklch(0.20 0.04 264 / 0.5);
    z-index: 25;
    opacity: 0;
    transition: opacity .25s var(--ease);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.drawer-overlay[hidden] { display: none; }

/* ===== レスポンシブ: サイドバーのドロワー化 =====
   1024px以下では固定サイドバーを画面外へ退避（オフキャンバス）。
   ハンバーガーで .drawer-open を付与するとスライドインし、オーバーレイが背後を覆う。 */
@media (max-width: 1024px) {
    .topbar__burger { display: inline-flex; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .28s var(--ease);
        box-shadow: none;
    }
    .drawer-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    .drawer-open .drawer-overlay { opacity: 1; }

    /* メインは全幅（固定サイドバー分のマージンを解除） */
    .main { margin-left: 0; }

    /* トップバー左右パディングを詰めて検索欄を確保 */
    .topbar { padding: 0 16px; gap: 12px; }
    .content { padding: 22px 18px; }
}

.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 21px; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
.breadcrumb { color: var(--text-muted); font-size: 12.5px; }
.breadcrumb a { transition: color .15s var(--ease); }
.breadcrumb a:hover { color: var(--accent); }

/* ===== グリッド ===== */
.grid { display: grid; gap: 20px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } }

/* ===== 統計カード ===== */
.stat {
    border-radius: var(--radius);
    padding: 20px 22px;
    color: #fff;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    min-height: 122px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 100% 0%, oklch(1 0 0 / 0.22), transparent 60%);
    pointer-events: none;
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat--blue { background: linear-gradient(135deg, oklch(0.645 0.155 263), oklch(0.545 0.180 267)); }
.stat--green { background: linear-gradient(135deg, oklch(0.685 0.130 160), oklch(0.580 0.140 163)); }
.stat--orange { background: linear-gradient(135deg, oklch(0.765 0.135 72), oklch(0.680 0.150 58)); }
.stat--sky { background: linear-gradient(135deg, oklch(0.720 0.108 235), oklch(0.620 0.128 240)); }
.stat__label { font-size: 13px; opacity: .94; font-weight: 500; }
.stat__value { font-size: 31px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.02em; }
.stat__sub { font-size: 12px; opacity: .9; }
.stat__spark { position: absolute; right: 14px; bottom: 12px; width: 110px; height: 46px; opacity: .9; }

/* ===== カード ===== */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-soft);
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border); }
.card__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.card__head h2 { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: -.005em; }
.card__body { padding: 20px; }
.card__body--tight { padding: 8px 8px; }

/* ===== テーブル ===== */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 12px 14px; text-align: left; }
.table thead th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.table tbody tr { border-bottom: 1px solid var(--border-soft); transition: background .15s var(--ease); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover-row); }

/* 明示的な横スクロールラッパ（個別Viewで必要時に使用） */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== バッジ ===== */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.badge--passed { background: oklch(0.625 0.135 158 / 0.14); color: oklch(0.48 0.13 158); }
.badge--in_progress { background: var(--accent-soft); color: var(--accent-600); }
.badge--not_started { background: oklch(0.62 0.02 264 / 0.13); color: var(--text-muted); }
.badge--mentor { background: oklch(0.555 0.18 292 / 0.14); color: oklch(0.5 0.18 292); }
.badge--high { background: oklch(0.605 0.19 25 / 0.13); color: oklch(0.52 0.19 25); }
.badge--standard { background: oklch(0.72 0.14 80 / 0.18); color: oklch(0.52 0.12 70); }
.badge--low { background: oklch(0.62 0.02 264 / 0.13); color: var(--text-muted); }
.badge--count { background: var(--accent-soft); color: var(--accent-600); }
.badge--observation { background: oklch(0.62 0.16 350 / 0.13); color: oklch(0.52 0.17 350); }
.badge--test { background: oklch(0.65 0.15 160 / 0.13); color: oklch(0.5 0.14 160); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ===== プログレス ===== */
.progress { background: oklch(0.62 0.02 264 / 0.14); border-radius: 999px; height: 8px; overflow: hidden; min-width: 90px; }
.progress__bar { height: 100%; border-radius: 999px; background: var(--accent); transition: width .5s var(--ease); }

/* ===== ボタン ===== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    background: oklch(0.62 0.02 264 / 0.10); color: var(--text);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), filter .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px var(--accent-ring); }
.btn--primary:hover { background: var(--accent-600); box-shadow: 0 8px 18px -8px var(--accent-ring); }
.btn--success { background: var(--green); color: #fff; }
.btn--danger { background: var(--red); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 5px 10px; font-size: 11.5px; }

.inline-form { display: inline-flex; gap: 6px; align-items: center; }

/* 講義登録：30分単位の時刻セレクト（分は 00 / 30 のみ） */
.time-slot { display: flex; align-items: center; gap: 4px; width: 100%; }
.time-slot__part { flex: 1; min-width: 0; padding-right: 28px; }
.time-slot__sep { flex: none; color: var(--text-muted); font-weight: 600; }

/* 日付＋時刻を同一セル内で横並び（1on1実施日時など） */
.datetime-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
}
.field .datetime-slot__date {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.datetime-slot .time-slot {
    flex: 0 0 auto;
    width: auto;
}
.datetime-slot .time-slot__part {
    flex: 0 0 4.25rem;
    width: 4.25rem;
}

/* 7-4 CS QAスコアカード（スタッフ詳細・評価行） */
.scorecard-form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 6px; }
.scorecard-form__grid { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.scorecard-form__item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.scorecard-form__label { flex: 1; min-width: 0; }
.scorecard-form__input { width: 44px; padding: 2px 5px; border: 1px solid var(--border, #d7dee8); border-radius: 6px; font-size: 12px; }
.input, select.input { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--card); outline: none; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* セレクト共通：開閉カーソル＋枠線/リングの滑らかな遷移（インラインstyleのselectも対象） */
select { cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
/* .input セレクトは matrix-domain と同じカスタム矢印に昇格（重なり防止に右paddingを確保） */
select.input {
    appearance: none; -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23647089' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
select.input:hover { border-color: var(--accent-ring); }

/* ===== 区分別オーバービュー ===== */
.unit-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.unit-row:last-child { border-bottom: 0; }
.unit-row__name { width: 96px; font-weight: 600; }
.unit-row__bar { flex: 1; display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: oklch(0.62 0.02 264 / 0.13); }
.unit-row__bar span { display: block; height: 100%; transition: width .5s var(--ease); }
.seg--passed { background: var(--green); }
.seg--in_progress { background: var(--accent); }
.seg--not_started { background: oklch(0.82 0.012 264); }
.unit-row__num { width: 120px; text-align: right; color: var(--text-muted); font-size: 12px; }

/* ===== 凡例 ===== */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

.muted { color: var(--text-muted); }
.empty { text-align: center; color: var(--text-muted); padding: 36px 16px; }
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: 8px; }
.section-gap { margin-top: 20px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ===== タブ ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 20px; }
.tab { padding: 13px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade-in .35s var(--ease); }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== ログイン ===== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: linear-gradient(160deg, oklch(0.305 0.056 266), oklch(0.52 0.18 264)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; }
.auth-side .sidebar__brand { justify-content: center; }
.auth-side::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 80% 10%, oklch(1 0 0 / 0.14), transparent 60%); pointer-events: none; }
.auth-side h2 { font-size: 28px; margin: 0 0 12px; letter-spacing: -.01em; position: relative; }
.auth-side p { opacity: .88; max-width: 360px; position: relative; }
.auth-main { display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 360px; }
.auth-card h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.01em; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; outline: none; background: var(--card); color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.auth-error { background: oklch(0.605 0.19 25 / 0.12); color: oklch(0.52 0.19 25); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; }
.field--check { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.field--check input { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.field--check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: 3px; }
.field--check label { margin: 0; font-weight: 500; font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; }
.btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
@media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ===== 講義ロードマップ ===== */
.roadmap-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.roadmap-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.roadmap-stat__val { font-size: 22px; font-weight: 700; color: var(--accent); }
.roadmap-stat__lbl { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.roadmap-overall { margin-bottom: 24px; }
.roadmap-overall__bar { height: 10px; background: oklch(0.62 0.02 264 / 0.14); border-radius: 999px; overflow: hidden; }
.roadmap-overall__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 999px; transition: width .5s var(--ease); }
.roadmap-timeline { position: relative; padding-left: 28px; }
.roadmap-timeline::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.roadmap-item { position: relative; margin-bottom: 20px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.roadmap-item::before { content: ''; position: absolute; left: -22px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); box-shadow: 0 0 0 2px var(--accent-ring); }
.roadmap-item.is-complete::before { background: var(--green); box-shadow: 0 0 0 2px oklch(0.62 0.16 155 / 0.3); }
.roadmap-item__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.roadmap-item__title { font-weight: 600; font-size: 14px; }
.roadmap-item__date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.roadmap-steps { display: flex; align-items: center; gap: 0; margin-top: 10px; }
.roadmap-step { flex: 1; text-align: center; position: relative; }
.roadmap-step__dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 6px; background: oklch(0.62 0.02 264 / 0.14); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-muted); }
.roadmap-step.is-done .roadmap-step__dot { background: var(--green); border-color: var(--green); color: #fff; }
.roadmap-step.is-current .roadmap-step__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.roadmap-step__lbl { font-size: 10.5px; color: var(--text-muted); }
.roadmap-step__date { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.roadmap-step__line { position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: -1; }
.roadmap-step.is-done + .roadmap-step .roadmap-step__line,
.roadmap-step.is-done .roadmap-step__line { background: var(--green); }
@media (max-width: 768px) { .roadmap-summary { grid-template-columns: repeat(2, 1fr); } }

/* ===== 講義カレンダー（日ビュー） ===== */
.tcal {
    display: grid;
    grid-template-columns: 56px repeat(var(--tcal-cols), minmax(120px, 1fr));
    grid-auto-rows: 22px;
    min-width: calc(56px + var(--tcal-cols) * 120px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tcal__corner { grid-row: 1; grid-column: 1; background: var(--card); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.tcal__col-head { grid-row: 1; background: var(--card); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px 10px; font-size: 12.5px; font-weight: 600; text-align: center; }
.tcal__allday-label { grid-row: 2; grid-column: 1; background: var(--card); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 10.5px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.tcal__allday-cell { grid-row: 2; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-height: 26px; }
.tcal__timeaxis { grid-column: 1; display: grid; grid-template-rows: subgrid; border-right: 1px solid var(--border); }
.tcal__time-label { font-size: 10px; color: var(--text-muted); text-align: right; padding-right: 6px; padding-top: 1px; }
.tcal__grid-col { position: relative; display: grid; grid-template-rows: subgrid; border-right: 1px solid var(--border); }
.tcal__slot { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; border-bottom: 1px solid var(--border); cursor: pointer; }
.tcal__slot:hover { background: var(--hover-row); }
.tcal-event {
    grid-column: 1 / -1;
    margin: 1px 3px;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    overflow: hidden;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    pointer-events: none;
}
.tcal-event--done { background: color-mix(in oklch, var(--green) 14%, transparent); border-left-color: var(--green); }
.tcal-event__time { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.tcal-event__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcal-event__sub { font-size: 10px; color: var(--text-muted); }

/* ============================================================
   業務対応マトリクス（担当表）
   ============================================================ */
.matrix-tabs { display: flex; gap: 4px; padding: 2px; margin-bottom: 16px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); width: fit-content; }
.matrix-tab {
    padding: 7px 18px; border: 0; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-muted); border-radius: 7px;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.matrix-tab:hover { color: var(--text); }
.matrix-tab.is-active { background: var(--card); color: var(--accent-600); box-shadow: var(--shadow); }

.matrix-panel { display: none; }
.matrix-panel.is-active { display: block; }

.matrix-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.matrix-toolbar__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.matrix-domain {
    padding: 6px 30px 6px 11px; font-size: 13px; color: var(--text); font-weight: 600;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23647089' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
}
.matrix-domain:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.matrix-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.matrix-legend span { display: inline-flex; align-items: center; gap: 6px; }

.matrix-wrap { display: none; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.matrix-wrap.is-active { display: block; }

.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.matrix th, .matrix td { padding: 12px 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); white-space: nowrap; }
.matrix tbody tr:last-child td { border-bottom: 0; }

/* ヘッダー（濃紺） */
.matrix thead th { background: oklch(0.345 0.052 264); color: oklch(0.96 0.01 264); font-weight: 600; font-size: 12px; letter-spacing: .02em; border-bottom: 0; border-right-color: oklch(0.42 0.05 264); position: sticky; top: 0; z-index: 3; }
.matrix th.matrix__skill { width: 112px; min-width: 112px; max-width: 112px; vertical-align: middle; padding: 12px 10px; white-space: normal; word-break: break-word; line-height: 1.42; font-size: 12.5px; font-weight: 600; }
.matrix__skill span { display: block; }

/* 左の固定列群 */
.matrix__staff { text-align: left; font-weight: 700; color: var(--text); background: var(--card); position: sticky; left: 0; z-index: 2; min-width: 132px; padding-left: 14px; box-shadow: 6px 0 10px -7px oklch(0.30 0.06 264 / 0.18); }
.matrix thead .matrix__staff { z-index: 4; color: oklch(0.96 0.01 264); background: oklch(0.345 0.052 264); }
.matrix__role { color: var(--text-muted); background: oklch(0.965 0.009 250); font-size: 12px; min-width: 76px; }
.matrix__count { background: oklch(0.965 0.009 250); color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 92px; }
.matrix__count b { color: var(--accent-600); font-size: 15px; }
.matrix thead .matrix__role, .matrix thead .matrix__count { background: oklch(0.345 0.052 264); color: oklch(0.96 0.01 264); }

/* 行の交互チント＆ホバー */
.matrix tbody tr:nth-child(even) td { background: oklch(0.978 0.007 255); }
.matrix tbody tr:nth-child(even) .matrix__staff { background: oklch(0.978 0.007 255); }
.matrix tbody tr:hover td { background: var(--hover-row); }
.matrix tbody tr:hover .matrix__staff { background: var(--hover-row); }

/* 対応可否セル */
.matrix__cell { transition: background .15s var(--ease); }
.matrix__cell.is-ok { background: oklch(0.625 0.135 158 / 0.14); }
.matrix tbody tr:nth-child(even) .matrix__cell.is-ok { background: oklch(0.625 0.135 158 / 0.18); }
.matrix__cell.is-wip { background: oklch(0.720 0.140 80 / 0.13); }
.matrix tbody tr:nth-child(even) .matrix__cell.is-wip { background: oklch(0.720 0.140 80 / 0.16); }

/* マーク：対応可=塗り緑ディスク／育成中=アンバー中抜き／未対応=淡いドット */
.mark { display: inline-block; width: 15px; height: 15px; border-radius: 999px; box-sizing: border-box; vertical-align: middle; }
.mark--ok { background: var(--green); border: 0; box-shadow: 0 0 0 3px oklch(0.625 0.135 158 / 0.18); }
.mark--wip { background: transparent; border: 2.5px solid var(--amber); width: 13px; height: 13px; }
.mark--none { background: oklch(0.86 0.012 264); border: 0; width: 8px; height: 8px; }

.matrix-note { margin: 12px 2px 0; font-size: 11.5px; color: var(--text-muted); }

/* ===== 配置判断：カテゴリー開閉アコーディオン ===== */
.deploy-acc { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); margin-bottom: 8px; overflow: hidden; }
.deploy-acc__head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 14px; border: 0; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: var(--text); text-align: left;
    transition: background .15s var(--ease);
}
.deploy-acc__head:hover { background: var(--hover-row); }
.deploy-acc__head:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-ring); }
.deploy-acc__chevron { display: inline-flex; color: var(--text-muted); transition: transform .2s var(--ease); }
.deploy-acc.is-open .deploy-acc__chevron { transform: rotate(90deg); }
.deploy-acc__title { flex: 1; min-width: 0; }
.deploy-acc__meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.deploy-acc__count { font-size: 11.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* grid-template-rows 0fr→1fr で高さを滑らかに（高さ計算なし＝カクつかない） */
.deploy-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--ease); }
.deploy-acc.is-open .deploy-acc__body { grid-template-rows: 1fr; }
.deploy-acc__inner { overflow: hidden; min-height: 0; }
.deploy-acc__inner .table { margin: 0; border-top: 1px solid var(--border-soft); }
@media (prefers-reduced-motion: reduce) {
    .deploy-acc__body { transition: none; }
    .deploy-acc__chevron { transition: none; }
}

/* ===== マニュアル管理 ===== */
.manual-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.manual-list__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.manual-list__item:hover { border-color: var(--accent-ring); box-shadow: var(--shadow); }
.manual-list__icon { font-size: 18px; line-height: 1; }
.manual-list__body { flex: 1; min-width: 0; }
.manual-list__title { font-weight: 600; font-size: 13.5px; word-break: break-all; }
.manual-list__title:hover { color: var(--accent); text-decoration: underline; }

.manual-upload { display: flex; flex-direction: column; gap: 12px; border-top: 1px dashed var(--border); padding-top: 14px; }
.manual-drop__zone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed var(--border); border-radius: 12px; text-align: center; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.manual-drop__zone:hover { border-color: var(--accent-ring); background: var(--accent-soft); }
.manual-drop__zone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.manual-drop__icon { font-size: 22px; color: var(--accent); }
.manual-drop__text { font-size: 13px; }
.manual-drop__text u { color: var(--accent); }
.manual-drop__hint { font-size: 11px; color: var(--text-muted); }
.manual-drop__file { font-size: 12px; margin-top: 4px; }
.manual-drop__submit { margin-top: 10px; align-self: flex-start; }
.manual-urlform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.manual-urlform .input { flex: 1; min-width: 160px; }

.training-manuals { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.training-manuals__link { font-size: 11px; color: var(--accent); white-space: nowrap; }
.training-manuals__link:hover { text-decoration: underline; }

/* ===== 折りたたみセクション ===== */
.collapsible > .card__head { cursor: pointer; user-select: none; transition: background .15s var(--ease); }
.collapsible > .card__head:hover { background: var(--accent-soft); }
.collapsible__toggle { display: inline-flex; align-items: center; gap: 10px; }
.collapsible__chevron { width: 16px; height: 16px; color: var(--text-muted); transition: transform .2s var(--ease); flex-shrink: 0; }
.collapsible.is-open > .card__head .collapsible__chevron { transform: rotate(90deg); }
.collapsible > .collapse-body { display: none; }
.collapsible.is-open > .collapse-body { display: block; animation: fade-in .25s var(--ease); }
/* 復帰先の行を含むセクションは、JS(localStorage復元)を待たずに描画前から開く。
   閉じたままだと行が display:none でブラウザ標準のアンカー移動が効かず、
   ページ先頭を描画したあとに JS でスクロールする＝縦移動が見えてしまう。
   後から is-open が付いてもフェードし直さないよう animation も止める。 */
.collapsible:has(:target) > .collapse-body { display: block; animation: none; }
/* 固定ヘッダ(.topbar)の下に隠れないようアンカー位置を下げる */
tr[id^="assessment-"] { scroll-margin-top: calc(var(--topbar-h) + 24px); }

/* ===== マニュアル管理：ツールバー＋アコーディオン ===== */
.manual-toolbar { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 12px 16px; }
.manual-coverage { display: flex; align-items: baseline; gap: 14px; font-size: 12px; color: var(--text-muted); }
.manual-coverage__total { font-weight: 700; color: var(--text); font-size: 13px; }
.manual-coverage__stat b { font-size: 15px; color: var(--text); font-weight: 700; margin-right: 2px; }
.manual-coverage__stat--warn b { color: var(--orange); }
.manual-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.manual-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.manual-chip:hover { border-color: var(--accent); color: var(--accent); }
.manual-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.manual-search { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.acc { display: flex; flex-direction: column; gap: 4px; }
.acc__layer { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); padding: 16px 4px 4px; }
.acc__layer:first-child { padding-top: 4px; }

/* カテゴリ（領域）アコーディオン */
.acc-cat { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.acc-cat[open] { border-color: var(--border); }
.acc-cat__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; list-style: none; transition: background .15s var(--ease); }
.acc-cat__head::-webkit-details-marker { display: none; }
.acc-cat__head:hover { background: var(--hover-row); }
.acc-cat__name { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-cat__meta { flex: none; }
.acc-cat__cov { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.acc-cat__cov.is-done { background: oklch(0.625 0.135 158 / 0.14); color: oklch(0.48 0.13 158); }
.acc-cat__cov.is-partial { background: oklch(0.72 0.14 80 / 0.18); color: oklch(0.52 0.12 70); }
.acc-cat__body { padding: 4px 8px 10px; border-top: 1px solid var(--border-soft); }

.acc-chev { width: 15px; height: 15px; flex: none; color: var(--text-muted); transition: transform .18s var(--ease); }
details[open] > summary > .acc-chev { transform: rotate(90deg); }

/* スキル（タスク）アコーディオン */
.acc-skill { border-radius: 8px; }
.acc-skill + .acc-skill { margin-top: 2px; }
.acc-skill[open] { background: var(--accent-soft); }
.acc-skill__head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; user-select: none; list-style: none; border-radius: 8px; font-size: 13px; color: var(--text); transition: background .15s var(--ease); }
.acc-skill__head::-webkit-details-marker { display: none; }
.acc-skill__head:hover { background: var(--hover-row); }
.acc-skill[open] > .acc-skill__head { color: var(--accent-600); font-weight: 600; }
.acc-skill__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-skill__count { flex: none; min-width: 22px; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-600); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.acc-skill[open] > .acc-skill__head .acc-skill__count { background: var(--card); }
.acc-skill__count--empty { background: transparent; color: var(--text-muted); font-weight: 600; }
.acc-skill__body { padding: 4px 10px 12px 34px; }
.acc-skill__body .manual-list { margin-bottom: 10px; }
.acc-skill__body .empty { text-align: left; }

/* 共有アップロードフォーム（JSで開いたスキルへ移動） */
.manual-upload--shared { margin-top: 12px; border: 1px solid var(--accent-ring); border-radius: var(--radius-sm); padding: 14px; background: var(--card); box-shadow: var(--shadow-md); }
.manual-upload__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }

/* トースト（左ストライプ通知の置換） */
.toast { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; font-weight: 600; }
.toast--success { background: oklch(0.625 0.135 158 / 0.10); border-color: oklch(0.625 0.135 158 / 0.30); color: oklch(0.46 0.12 158); }

@media (max-width: 860px) {
    .manual-search { margin-left: 0; }
    .acc-skill__body { padding-left: 18px; }
}

/* ===== 開閉カテゴリ（マイスキル 領域別） ===== */
.skill-cat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.skill-cat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .18s var(--ease);
}
.skill-cat__head::-webkit-details-marker { display: none; }
.skill-cat__head:hover { background: var(--hover-row); }
.skill-cat__chevron {
    width: 18px; height: 18px; flex: 0 0 18px;
    color: var(--text-muted);
    transition: transform .22s var(--ease);
}
.skill-cat[open] .skill-cat__chevron { transform: rotate(90deg); }
.skill-cat__title { font-weight: 600; font-size: 14.5px; }
.skill-cat__count {
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 1px 9px;
}
.skill-cat__spacer { flex: 1 1 auto; }
.skill-cat__bar {
    width: 120px; height: 6px;
    border-radius: 99px;
    background: var(--border);
    overflow: hidden;
    flex: 0 0 auto;
}
.skill-cat__bar > span {
    display: block; height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-600));
}
.skill-cat__ratio { font-size: 12px; color: var(--text-muted); min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.skill-cat__body { border-top: 1px solid var(--border-soft); }
.skill-cat[open] .skill-cat__body { animation: vt-rise-in .26s var(--ease) both; }

@media (max-width: 860px) {
    .skill-cat__bar { display: none; }
    .skill-cat__spacer { flex: 1 1 auto; }
}

/* モーション抑制の尊重 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    /* View Transitions の疑似要素は * に含まれないため明示的に無効化（遷移を即時化） */
    ::view-transition-old(root), ::view-transition-new(root),
    ::view-transition-old(vt-content), ::view-transition-new(vt-content) { animation: none !important; }
}

/* ===== ユーザーメニュー（アバター/サイドバーから開くドロップダウン） ===== */
.usermenu { position: relative; }
.usermenu--sidebar { margin-top: auto; }
.usermenu__trigger {
    appearance: none; -webkit-appearance: none;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; color: inherit; padding: 0;
    display: flex; align-items: center; gap: 8px;
}
/* サイドバーのトリガーは従来の .sidebar__user の見た目を踏襲しつつ全幅 */
.usermenu--sidebar .usermenu__trigger { width: 100%; text-align: left; }
.usermenu--sidebar .usermenu__trigger.sidebar__user { margin: 8px 12px; transition: background .2s var(--ease); }
.usermenu--sidebar .usermenu__trigger.sidebar__user:hover { background: oklch(1 0 0 / 0.09); }
.usermenu__caret { width: 16px; height: 16px; margin-left: auto; flex: 0 0 16px; color: var(--sidebar-text-dim); }
.usermenu--topbar .usermenu__trigger { border-radius: 50%; }
.usermenu--topbar .usermenu__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.usermenu__pop {
    position: absolute; z-index: 60; min-width: 236px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 6px;
    box-shadow: var(--shadow-lg);
    animation: vt-rise-in .16s var(--ease) both;
}
.usermenu__pop[hidden] { display: none; }
.usermenu--topbar .usermenu__pop { top: calc(100% + 8px); right: 0; }
.usermenu--sidebar .usermenu__pop { bottom: calc(100% + 8px); left: 12px; right: 12px; }

.usermenu__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.usermenu__id { min-width: 0; line-height: 1.3; }
.usermenu__id b { display: block; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__id span { font-size: 11px; color: var(--text-muted); }

.usermenu__theme { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px; margin: 4px; }
.usermenu__theme-btn {
    flex: 1; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
    border-radius: 7px; padding: 7px 0; color: var(--text-muted);
    display: grid; place-items: center;
    transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.usermenu__theme-btn svg { width: 18px; height: 18px; }
.usermenu__theme-btn:hover { color: var(--text); }
.usermenu__theme-btn.is-active { background: var(--card); color: var(--accent); box-shadow: var(--shadow); }

.usermenu__form { margin: 0; }
.usermenu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; text-align: left; color: var(--text);
    padding: 9px 10px; border-radius: 8px;
}
.usermenu__item svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 18px; }
.usermenu__item:hover { background: var(--hover-row); }
.usermenu__item--danger { color: var(--red); }
.usermenu__item--danger svg { color: var(--red); }

/* ===== ダークテーマ（CSS変数の上書き。html[data-theme="dark"]） ===== */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: oklch(0.205 0.018 264);
    --card: oklch(0.262 0.020 264);
    --text: oklch(0.928 0.012 264);
    --text-muted: oklch(0.705 0.020 264);
    --border: oklch(0.360 0.020 264);
    --border-soft: oklch(0.318 0.018 264);
    --hover-row: oklch(0.305 0.022 264);
    --accent-soft: oklch(0.585 0.176 264 / 0.20);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.40), 0 1px 3px oklch(0 0 0 / 0.35);
    --shadow-md: 0 12px 28px -12px oklch(0 0 0 / 0.55), 0 3px 8px oklch(0 0 0 / 0.40);
    --shadow-lg: 0 22px 50px -18px oklch(0 0 0 / 0.65);
}
/* 変数で吸収できないハードコード面のダーク調整 */
html[data-theme="dark"] .topbar { background: oklch(0.235 0.020 264 / 0.85); }
html[data-theme="dark"] .matrix__role,
html[data-theme="dark"] .matrix__count { background: oklch(0.285 0.020 264); }
html[data-theme="dark"] .matrix tbody tr:nth-child(even) td,
html[data-theme="dark"] .matrix tbody tr:nth-child(even) .matrix__staff { background: oklch(0.242 0.020 264); }

/* ===== 育成ロードマップ 横並び分岐マップ（フェーズ＝カラム・達成ゲート） ===== */
.rm-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.rm-col {
    flex: 0 0 300px;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* カラム間の「→」コネクタ（達成で次フェーズへ進む流れ） */
.rm-col:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -16px;
    top: 24px;
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 700;
    z-index: 1;
}
.rm-col.is-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring), var(--shadow);
}
.rm-col.is-locked { opacity: 0.82; }
.rm-col__head { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.rm-col__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.rm-col__meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.rm-col__gate { font-size: 12px; font-weight: 600; }
.rm-col__gate.is-open { color: var(--green); }
.rm-col__gate.is-closed { color: var(--text-muted); }
.rm-col__bar { height: 5px; border-radius: 999px; background: var(--border-soft); overflow: hidden; margin-top: 8px; }
.rm-col__bar > span { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .4s var(--ease); }
.rm-col__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* 目標カード（達成/未達成/進行中/未着手で色分け） */
.goal-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--slate);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 10px 12px;
}
.goal-card--achieved   { border-left-color: var(--green); background: color-mix(in oklch, var(--green) 8%, var(--card)); }
.goal-card--missed     { border-left-color: var(--red);   background: color-mix(in oklch, var(--red) 8%, var(--card)); }
.goal-card--inprogress { border-left-color: var(--amber); background: color-mix(in oklch, var(--amber) 10%, var(--card)); }
.goal-card--notstarted { border-left-color: var(--slate); }
.goal-card__body { font-size: 13px; color: var(--text); line-height: 1.5; }
.goal-card__timing { color: var(--text-muted); font-size: 12px; }
.goal-card__suggest { margin-top: 6px; font-size: 11px; color: var(--green); }
.goal-card__form { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* スキル連携チップ（マスタ管理スキルとの紐付け＋本人の合格状況） */
.goal-skill {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-muted); background: var(--bg);
}
.goal-skill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slate); flex: 0 0 7px; }
.goal-skill--passed { color: var(--green); border-color: color-mix(in oklch, var(--green) 35%, var(--border)); }
.goal-skill--passed .goal-skill__dot { background: var(--green); }
.goal-skill--unpassed .goal-skill__dot { background: var(--amber); }

/* ボード：フェーズ別ミニ進捗（横並びインジケータ） */
.rm-mini { display: inline-flex; gap: 4px; align-items: center; }
.rm-mini__seg { width: 22px; height: 7px; border-radius: 999px; background: var(--border); }
.rm-mini__seg.is-open { background: var(--green); }
.rm-mini__seg.is-partial { background: var(--amber); }
.rm-mini__seg.is-current { box-shadow: 0 0 0 2px var(--accent-ring); }

/* 連携サマリ帯（show 上部） */
.rm-summary { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; }
.rm-summary b { color: var(--text); }

/* 目標カード：紐付け講義の3段階ミニバー */
.goal-train { margin-top: 6px; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.goal-train__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-soft); border: 1px solid var(--border); }
.goal-train__dot.is-on { background: var(--green); border-color: var(--green); }
.goal-train__label { margin-left: 4px; }

/* 目標カード：講義一覧・更新履歴の折りたたみ */
.goal-detail { margin-top: 8px; font-size: 12px; }
.goal-detail summary { cursor: pointer; color: var(--text-muted); font-size: 12px; }
.goal-detail__sec { margin-top: 4px; }
.goal-log { display: flex; gap: 6px; padding: 3px 0; border-top: 1px dashed var(--border-soft); line-height: 1.5; }
.goal-log__date { color: var(--text-muted); white-space: nowrap; }
.goal-log__tag { color: var(--accent); text-decoration: none; }

@media (max-width: 640px) {
    .rm-col { flex-basis: 82vw; }
}

/* ============================================================
   共通レスポンシブ（全画面向け・段階2）
   骨格のドロワー化(≤1024px)は上部で対応済み。ここではコンテンツ密度・
   横溢れ・タッチ操作性を全画面共通で整える。
   ============================================================ */

/* ---- タブレット/スマホ共通（≤1024px） ---- */
@media (max-width: 1024px) {
    /* テーブルは横スクロールで溢れを吸収（カード本体をスクロールコンテナ化）。
       個別Viewを触らず全テーブルに横スクロールを効かせる。 */
    .card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: max-content; }

    /* grid/flexアイテムは初期 min-width:auto のため内容(テーブル)で押し広がる。
       0に落として親の overflow-x:auto を有効化し、documentレベルの横溢れを断つ。 */
    .grid > *, .card { min-width: 0; }

    /* トップバー検索欄は上限を撤廃して可変に */
    .topbar__search { max-width: none; }

    /* 3カラム系のグリッドを1カラムに寄せる（1100pxの既存指定を補完） */
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* ---- スマホ（≤640px） ---- */
@media (max-width: 640px) {
    /* 見出し・余白の圧縮 */
    .content { padding: 18px 14px; }
    .page-head { margin-bottom: 16px; }
    .page-head h1 { font-size: 18px; }

    /* 4カラム統計カードも1カラムへ（1100pxで2カラム→640で1カラム） */
    .grid--4 { grid-template-columns: 1fr; }

    /* カードの内側パディングを詰める */
    .card__head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
    .card__body { padding: 16px; }

    /* タッチターゲット確保：主要ボタンの最小高44px */
    .btn { min-height: 40px; padding: 9px 14px; }
    .btn--sm { min-height: 34px; }
    .btn-block { min-height: 46px; }

    /* フォーム入力はズーム抑止のため16px（iOS Safariの自動ズーム対策） */
    .field input, .field select, .field textarea,
    .input, input[type="text"], input[type="password"],
    input[type="date"], input[type="datetime-local"], select, textarea {
        font-size: 16px;
    }

    /* トップバー：ハンバーガー＋検索＋アイコンを1行に収める */
    .topbar { padding: 0 12px; gap: 10px; }
    .topbar__icons { gap: 10px; }

    /* ユーザーメニューのポップは画面幅に収める */
    .usermenu--topbar .usermenu__pop { right: -8px; min-width: min(236px, 88vw); }

    /* 統計カードの数値サイズを少し抑える */
    .stat { padding: 16px 18px; }
}

/* ===== システム設定ページ：タブ + アコーディオン + 検索 + sticky保存 ===== */
/* カテゴリ切替はセグメンテッドコントロール。.tab の下線型ベースを上書きし、button既定装飾を打ち消す */
.settings-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: 20px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
.settings-tabs .tab {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.settings-tabs .tab:hover { color: var(--text); background: var(--card); }
.settings-tabs .tab.is-active {
    color: var(--accent);
    background: var(--card);
    border-color: var(--border-soft);
    box-shadow: var(--shadow);
}
.settings-tabs .tab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.settings-hide { display: none !important; }
.settings-savebar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 4px; margin-top: 8px;
    background: var(--card); border-top: 1px solid var(--border);
}

/* ===== スタッフ詳細：一括合格承認のチェックボックス列・操作行のフォーカス表示 ===== */
.assess-name { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.assess-name > div { min-width: 0; }
.assess-check { width: 15px; height: 15px; flex: 0 0 15px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; }
.assess-name__spacer { width: 15px; flex: 0 0 15px; }
.table thead .assess-name { align-items: center; }
.table thead .assess-check { margin: 0; }
/* 操作直後にリダイレクトで戻ってきた行を一時的に強調する（#assessment-{id}） */
.assess-row--focus > td { background: var(--accent-soft); }
.assess-row--focus > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================================
   スタッフ個別設定（システム設定）2ペインUI
   左=区分アコーディオンでスタッフ選択 / 右=その1人の機能をON/OFF
   色は既存トークンのみを使うためダークテーマは自動で追従する。
   ============================================================ */
.sfx { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .sfx { grid-template-columns: 1fr; } }

.sfx__pane {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
}
.sfx__filters { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-bottom: 1px solid var(--border-soft); }
.sfx__row { display: flex; gap: 6px; }
.sfx__row .input { flex: 1; min-width: 0; }
.sfx__check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.sfx__list { max-height: 560px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; }
.sfx__empty { padding: 14px 10px; font-size: 12px; color: var(--text-muted); }

/* 区分アコーディオン */
.sfx-group__head {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 7px 10px; margin-top: 2px;
    border: 0; border-radius: var(--radius-sm);
    background: var(--hover-row); color: var(--text);
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em;
    cursor: pointer; text-align: left;
}
.sfx-group__head:hover { background: var(--accent-soft); }
.sfx-group__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sfx-group__caret { width: 10px; height: 10px; flex: none; transition: transform .18s var(--ease); }
.sfx-group__head[aria-expanded="false"] .sfx-group__caret { transform: rotate(-90deg); }
.sfx-group__name { flex: 1; }
.sfx-group__n { font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sfx-group__body { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 8px; }
.sfx-group__head[aria-expanded="false"] + .sfx-group__body { display: none; }

/* スタッフ行 */
.sfx-row {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 9px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text);
    font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.sfx-row:hover { background: var(--hover-row); }
.sfx-row.is-active { background: var(--accent-soft); color: var(--accent-600); font-weight: 700; }
.sfx-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfx-row__meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* 右ペイン */
.sfx__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.sfx__head h3 { margin: 0; font-size: 15px; }
.sfx__head-meta { font-size: 12px; color: var(--text-muted); }
.sfx__spacer { flex: 1; }
.sfx__section { padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.sfx-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border-soft); }
.sfx-item:first-of-type { border-top: 0; }
.sfx-item__main { flex: 1; min-width: 0; }
.sfx-item__label { font-size: 13px; font-weight: 600; }
.sfx-item__help { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.sfx-item__state { flex: none; align-self: center; }
.sfx-item__ctl { flex: none; align-self: center; }

/* トグル */
.tgl { display: inline-flex; position: relative; width: 38px; height: 22px; flex: none; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tgl span {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--border); transition: background .18s var(--ease);
}
.tgl span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
    transition: transform .18s var(--ease);
}
.tgl input:checked + span { background: var(--accent); }
.tgl input:checked + span::after { transform: translateX(16px); }
.tgl input:disabled { cursor: not-allowed; }
.tgl input:disabled + span { opacity: .45; }
.tgl input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 状態バッジ（既定／個別に付与／個別に除外／固定） */
.badge--muted { background: var(--hover-row); color: var(--text-muted); }
.badge--amber { background: oklch(0.720 0.140 80 / 0.18); color: oklch(0.56 0.14 70); }
html[data-theme="dark"] .badge--amber { color: oklch(0.80 0.13 82); }