/* ============================================================
   Visual refresh v2 — logged-in dashboard (/check/upload) and the
   admin console suite (admin*.html). Scoped to body.workspace-
   body-v2 so signin pages are untouched for now.

   Most shared components (.panel, focus rings, consent-required)
   already read the --ink-0/--line/--panel/--sun/etc. custom
   properties, so remapping those tokens re-themes them for free.
   Components with hardcoded literal colors (buttons, chip, hero,
   the kpi/chart/history card family) get explicit overrides below.

   /check/result (#result-panel) uses the same v2 workspace tokens as other
   panels; selfcheck ok/warn/ng semantic colors stay on their own rules.
   ============================================================ */
body.workspace-body-v2 {
    --ink-0: var(--v2-ink);
    --ink-1: var(--v2-muted);
    --line: var(--v2-line);
    --panel: var(--v2-panel);
    --sun: var(--v2-accent);
    --teal: var(--v2-positive);
    --gold: var(--v2-accent);
    --shadow: 0 8px 24px rgba(20, 23, 42, 0.08);
    background: var(--v2-paper);
    color: var(--v2-ink);
    /* 子要素 (.workspace-main の margin-top 等) の上マージンが body を突き抜けて相殺されると、
       body (min-height: 100vh) ごと押し下げられ、内容が短くてもその分だけ縦スクロールが出る。
       flow-root で相殺を止め、マージンを body の内側に収める（見た目の位置は変わらない）。 */
    display: flow-root;
}

body.workspace-body-v2 .backdrop,
body.workspace-body-v2 .grain {
    display: none;
}

body.workspace-body-v2 .workspace-topbar,
body.workspace-body-v2 .app-bar-inner {
    background: var(--v2-surface);
    border-color: var(--v2-line);
    box-shadow: none;
}

body.workspace-body-v2 .workspace-topbar h2 {
    font-family: "Zen Kaku Gothic New", sans-serif;
}

/* 共通メニュー（#app-sidebar）: /check・/profile・管理画面とも角丸なし（スマホ幅の縦並びも含む） */
body.workspace-body-v2 .workspace-sidebar {
    background: var(--v2-panel);
    border-color: var(--v2-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.workspace-body-v2 .sidebar-link {
    color: var(--v2-muted);
    border-color: transparent;
    background: transparent;
}

body.workspace-body-v2 .sidebar-link:hover {
    color: var(--v2-ink);
    background: var(--v2-surface);
    border-color: var(--v2-line);
}

body.workspace-body-v2 .sidebar-link.active {
    color: #fff;
    background: var(--v2-ink);
    border-color: var(--v2-ink);
}

/* 未実装の機能（準備中）: 押せない見た目にして「準備中」を右に添える */
body.workspace-body-v2 .sidebar-link.is-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #a3a6ad;
    cursor: default;
}

body.workspace-body-v2 .sidebar-link.is-disabled:hover {
    color: #a3a6ad;
    background: transparent;
    border-color: transparent;
}

.sidebar-soon {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--v2-panel, #f5f5f6);
    color: var(--v2-muted, #6e727a);
    font-size: 10px;
    font-weight: 700;
}

/* Utility nav items (e.g. お知らせ) sit just above sign-out, set apart
   from the main workflow nav by a divider — matches the v24 dashboard's
   side-foot treatment. */
/* 別タブで開くメニュー項目（管理画面の「ユーザー画面」など）: 文言の右に外部リンクのアイコン */
.sidebar-link-external {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.new-tab-icon {
    flex: none;
    width: 13px;
    height: 13px;
    font-size: 12px;
    line-height: 1;
}

body.workspace-body-v2 .sidebar-nav-foot {
    padding-top: 14px;
    border-top: 1px solid var(--v2-line);
}

body.workspace-body-v2 .session-badge {
    border-color: var(--v2-line);
    background: var(--v2-surface);
    color: var(--v2-muted);
}

body.workspace-body-v2 .session-badge strong {
    color: var(--v2-ink);
}

/* /check/upload dashboard only: ログアウトは他のメニュー項目と同じ、ボタンの
   見た目を持たないテキストリンクにする(管理コンソール側は従来どおり)。 */
body.workspace-body-v2:not(.admin-console-v2) #signout-btn,
body.workspace-body-v2:not(.admin-console-v2) .sidebar-service-switch {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--v2-muted);
    font-weight: 400;
    padding: 9px 10px;
    border-radius: var(--v2-r-md);
}

/* ログアウトの直上の、もう一方のサービスへのリンク（common-ui.js）。ログアウトと同じ見た目 */
body.workspace-body-v2:not(.admin-console-v2) .sidebar-service-switch {
    font: inherit;
    font-weight: 400;
    text-decoration: none;
}

body.workspace-body-v2:not(.admin-console-v2) #signout-btn:hover,
body.workspace-body-v2:not(.admin-console-v2) .sidebar-service-switch:hover {
    color: var(--v2-ink);
    background: var(--v2-surface);
}

/* サイドバー最下部(画面左下)の CTA「求人を見る・CAに相談する」。
   CTA があるサイドバーだけ flex 縦並びにし、margin-top:auto で最下部へ押し下げる。
   狭幅(サイドバーが static になる)では単にサイドバーの末尾に並ぶ。 */
body.workspace-body-v2 .workspace-sidebar.has-sidebar-cta {
    display: flex;
    flex-direction: column;
}

body.workspace-body-v2 .sidebar-cta {
    margin-top: auto;
    display: block;
    padding: 12px 10px;
    border-radius: var(--v2-r-md);
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.workspace-body-v2 .sidebar-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(224, 96, 42, 0.3);
}

body.workspace-body-v2 .sidebar-cta:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

/* ユーザー画面のサイドバー: 最上部にサービス名、メニュー本体(.sidebar-body)はその下。
   PC幅では本体が残りの高さを占め、CTA(margin-top:auto)は引き続き最下部に来る。 */
body.workspace-body-v2 .workspace-sidebar.has-sidebar-brand {
    display: flex;
    flex-direction: column;
}

body.workspace-body-v2 .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 12px 10px;
    border-bottom: 1px solid var(--v2-line);
}

body.workspace-body-v2 .sidebar-brand {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
    letter-spacing: 0.02em;
}

body.workspace-body-v2 .sidebar-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* 「メニュー」開閉ボタンはスマホ幅(サイドバーが上部に積まれる 768px 以下)でだけ出す。 */
body.workspace-body-v2 .sidebar-menu-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

body.workspace-body-v2 .sidebar-menu-toggle:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

body.workspace-body-v2 .sidebar-menu-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 16px;
    height: 12px;
}

body.workspace-body-v2 .sidebar-menu-toggle-icon span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 開いている間はアイコンを × にする。 */
body.workspace-body-v2 .sidebar-menu-toggle[aria-expanded="true"] .sidebar-menu-toggle-icon span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

body.workspace-body-v2 .sidebar-menu-toggle[aria-expanded="true"] .sidebar-menu-toggle-icon span:nth-child(2) {
    opacity: 0;
}

body.workspace-body-v2 .sidebar-menu-toggle[aria-expanded="true"] .sidebar-menu-toggle-icon span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 768px) {
    body.workspace-body-v2 .sidebar-menu-toggle {
        display: inline-flex;
    }

    body.workspace-body-v2 .workspace-sidebar.has-sidebar-toggle:not(.is-menu-open) .sidebar-body {
        display: none;
    }

    body.workspace-body-v2 .workspace-sidebar.has-sidebar-toggle:not(.is-menu-open) .sidebar-head {
        padding-bottom: 2px;
        border-bottom: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.workspace-body-v2 .sidebar-menu-toggle-icon span {
        transition: none;
    }
}

body.workspace-body-v2 .chip {
    border-color: var(--v2-accent-soft);
    color: var(--v2-accent);
    background: var(--v2-accent-soft);
}

body.workspace-body-v2 .panel-head h1,
body.workspace-body-v2 .panel-head h2 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

/* 管理画面: 見出しの横に説明文が並ぶとき、見出し（「新規投稿」など）が縮んで折り返さないようにする */
body.admin-console-v2 .panel-head > h1,
body.admin-console-v2 .panel-head > h2 {
    flex-shrink: 0;
}

body.workspace-body-v2 .panel-head code {
    color: var(--v2-accent);
}

body.workspace-body-v2 .btn-primary {
    background: var(--v2-accent);
    box-shadow: none;
    border-radius: var(--v2-r-md);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.workspace-body-v2 .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(224, 96, 42, 0.3);
}

body.workspace-body-v2 .btn-secondary {
    border-color: var(--v2-line);
    background: var(--v2-surface);
    color: var(--v2-ink);
    border-radius: var(--v2-r-md);
}

body.workspace-body-v2 .consent-block {
    border-color: var(--v2-line);
    background: var(--v2-panel);
}

body.workspace-body-v2 .consent-copy {
    color: var(--v2-muted);
}

body.workspace-body-v2 .mode-btn.active {
    background: var(--v2-ink);
    color: #fff;
}

/* Admin console: panels read as white bordered "panel-block" cards rather
   than filled gray, matching the reviewed admin redesign. Scoped to
   .admin-console-v2 only — the logged-in user dashboard keeps the flat
   gray-zoned layout from the top-page mockup. */
body.admin-console-v2 .panel {
    background: var(--v2-surface);
    border-color: var(--v2-line);
    box-shadow: none;
    backdrop-filter: none;
    border-radius: var(--v2-r-lg);
}

body.admin-console-v2 .mode-btn.active {
    background: var(--v2-accent);
    color: #fff;
}

/* 提出サマリーのKPIタイル(compact-kpi-grid)は、白いpanel-blockの中で
   淡いグレーの"stat-tile"として塗り分ける(刷新案どおり)。評価結果側の
   通常kpi-grid(kpi-card)は白のままなので、compact-kpi-grid配下だけに
   スコープする。 */
body.admin-console-v2 .compact-kpi-grid .kpi-card {
    background: var(--v2-panel);
    border-color: var(--v2-line);
}

/* 月次提出数などの内訳リストは、刷新案では枠なしのプレーンなリストとして
   panel-block内に直接並ぶ(history-boxの罫線カードにしない)。 */
body.admin-console-v2 .analytics-list-grid .history-box {
    border: none;
    background: transparent;
    padding: 0;
    min-height: auto;
}

/* 提出サマリーの集計ステータスは、刷新案では色つきピルではなく
   「●＋控えめなテキスト」のstatus-chip表現。IDスコープで this one だけ変更。 */
body.admin-console-v2 #analytics-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--v2-muted);
    padding: 0;
    margin-top: 14px;
}

body.admin-console-v2 #analytics-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-muted);
    flex: none;
}

body.admin-console-v2 .clean-list {
    list-style: none;
    padding-left: 0;
    color: var(--v2-muted);
}

body.admin-console-v2 .clean-list li {
    border-left: 2px solid var(--v2-line);
    padding-left: 8px;
}

/* 評価結果まわりの残りのカード群(kpi-card/viz-grid/axis-card/advice-box/
   ai-summary-box/feedback-box/history-box)も、「管理者ダッシュボード刷新案」
   に合わせて白背景+細枠線+シャープな角丸に統一する。マークアップ・表示項目は
   一切変更せず、配色のみ置き換える。 */
body.admin-console-v2 .kpi-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
}

body.admin-console-v2 .kpi-label {
    color: var(--v2-muted);
}

body.admin-console-v2 .kpi-value {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .chart-card,
body.admin-console-v2 .meta-card,
body.admin-console-v2 .advice-box,
body.admin-console-v2 .ai-summary-box,
body.admin-console-v2 .feedback-box,
body.admin-console-v2 .axis-card,
body.admin-console-v2 .history-box {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
}

body.admin-console-v2 .chart-card h3,
body.admin-console-v2 .meta-card h3,
body.admin-console-v2 .advice-box h3,
body.admin-console-v2 .ai-summary-box h3,
body.admin-console-v2 .feedback-box h3,
body.admin-console-v2 .history-box h3,
body.admin-console-v2 .history-box h2 {
    color: var(--v2-ink);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
}

body.admin-console-v2 .meta-card h4,
body.admin-console-v2 .advice-box h4,
body.admin-console-v2 .ai-summary-box h4 {
    color: var(--v2-muted);
    font-weight: 700;
}

body.admin-console-v2 .axis-top h4 {
    color: var(--v2-ink);
}

body.admin-console-v2 .ai-summary-text {
    color: var(--v2-ink);
}

body.admin-console-v2 .ai-summary-grid {
    color: var(--v2-muted);
}

body.admin-console-v2 .ai-summary-grid strong {
    color: var(--v2-ink);
    font-family: "Zen Kaku Gothic New", sans-serif;
}

body.admin-console-v2 .json-preview {
    border: 1px solid var(--v2-line);
    background: var(--v2-panel);
    color: var(--v2-muted);
    border-radius: var(--v2-r-md);
}

body.admin-console-v2 .sep {
    border-top: 1px solid var(--v2-line);
}

body.admin-console-v2 .viz-grid {
    grid-template-columns: 260px 1fr;
}

body.admin-console-v2 .chart-card,
body.admin-console-v2 .meta-card,
body.admin-console-v2 .axis-card {
    padding: 16px;
}

body.admin-console-v2 .two-col {
    gap: 20px;
}

/* Logged-in dashboard (/check/upload): the base .panel still carries the old
   warm-cream box-shadow/backdrop-blur/large-radius look. v24 draws content
   groups flat, separated only by a thin border line — no floating-card
   shadow. Admin console keeps its own white panel-block treatment. */
body.workspace-body-v2:not(.admin-console-v2) .panel {
    border-color: var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-panel);
    box-shadow: none;
    backdrop-filter: none;
}

/* Portfolio upload dropzone (/check/upload), matching the v24 mock: a dashed
   drop target that doubles as a <label for="portfolio-file">, so clicking
   or dropping a file anywhere on it opens/fills the (visually hidden)
   native file input — no separate "choose file" button needed. */
body.workspace-body-v2 .dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 22px;
    border: 1.5px dashed var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
    cursor: pointer;
}

body.workspace-body-v2 .dropzone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--v2-ink);
    border-radius: var(--v2-r-sm);
    padding: 5px 7px;
}

body.workspace-body-v2 .dropzone-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v2-ink);
}

body.workspace-body-v2 .dropzone-constraint {
    font-size: 11.5px;
    color: var(--v2-muted);
}

/* :not(.hidden) が必要: このクラスの display:flex は詳細度で .hidden{display:none}
   に勝ってしまい、[hidden]属性でのJSトグルが効かなくなるため。 */
body.workspace-body-v2 .dropzone-empty-state:not(.hidden) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* ファイル添付後は、ドロップゾーンの案内文言の代わりに「添付済み」表示+
   除去ボタンに切り替える(縦積みではなく横並びで、右端に×ボタン)。 */
body.workspace-body-v2 .dropzone-attached-state:not(.hidden) {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: default;
}

body.workspace-body-v2 .dropzone-attached-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

body.workspace-body-v2 .dropzone-attached-text strong {
    font-size: 13.5px;
    color: var(--v2-ink);
}

body.workspace-body-v2 .dropzone-attached-text span {
    font-size: 11.5px;
    color: var(--v2-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.workspace-body-v2 #file-source-row,
body.workspace-body-v2 #evaluate-form,
body.workspace-body-v2 #user-evaluation-panel,
body.workspace-body-v2 .workspace-shell,
body.workspace-body-v2 .workspace-main.layout {
    min-width: 0;
    max-width: 100%;
}

/* main 直下のパネル(グリッド項目)が中身の最小幅で画面より広がらないようにする。 */
body.workspace-body-v2 .workspace-main.layout > * {
    min-width: 0;
}

body.workspace-body-v2 .dropzone {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 375px) {
    body.workspace-body-v2 .dropzone-attached-text span {
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }
}

body.workspace-body-v2 .dropzone-remove {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--v2-muted);
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer !important;
}

body.workspace-body-v2 .dropzone-remove:hover {
    background: var(--v2-panel);
    color: var(--v2-ink);
}

/* status.ok は基本色(緑)を使わず、他の状態と同じモノトーン基調に揃える。 */
body.workspace-body-v2 .status.idle {
    background: var(--v2-panel);
    color: var(--v2-muted);
}

body.workspace-body-v2 .status.ok {
    background: var(--v2-panel);
    color: var(--v2-ink);
}

body.workspace-body-v2 .status.warn {
    background: var(--v2-accent-soft);
    color: var(--v2-accent);
}

body.workspace-body-v2 .status.err {
    background: var(--v2-panel);
    color: var(--v2-negative);
}

/* 診断中オーバーレイ(evaluation-form.js が生成)を v2 配色に揃える:
   インク系の薄い幕 + 白カード + 細枠線、スピナー/進捗バーだけアクセント色。 */
body.workspace-body-v2 .eval-busy-overlay:not(.eval-busy-overlay--dialog) {
    background: rgba(20, 23, 42, 0.28);
}

body.workspace-body-v2 .eval-busy-box {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
    box-shadow: 0 12px 32px rgba(20, 23, 42, 0.12);
    padding: 20px 22px;
    gap: 14px;
}

body.workspace-body-v2 .eval-busy-spinner {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    border-width: 2.5px;
    border-color: var(--v2-accent-soft);
    border-top-color: var(--v2-accent);
}

body.workspace-body-v2 .eval-busy-text {
    color: var(--v2-ink);
    font-weight: 700;
}

body.workspace-body-v2 .eval-busy-progress-track {
    height: 6px;
    background: var(--v2-panel);
}

body.workspace-body-v2 .eval-busy-progress-fill {
    background: var(--v2-accent);
}

body.workspace-body-v2 .eval-busy-progress-label {
    color: var(--v2-muted);
    font-weight: 500;
}

body.workspace-body-v2 .eval-busy-overlay--dialog {
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

body.workspace-body-v2 .eval-check-start-dialog {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
    box-shadow: 0 12px 32px rgba(20, 23, 42, 0.12);
}

body.workspace-body-v2 .eval-check-start-close {
    color: var(--v2-ink);
}

body.workspace-body-v2 .eval-check-start-close:hover,
body.workspace-body-v2 .eval-check-start-close:focus-visible {
    background: var(--v2-accent-soft);
    color: var(--v2-accent);
}

body.workspace-body-v2 .eval-check-start-title {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    color: var(--v2-ink);
}

body.workspace-body-v2 .eval-check-start-body {
    color: var(--v2-muted);
}

body.workspace-body-v2 input,
body.workspace-body-v2 select,
body.workspace-body-v2 textarea {
    border-color: var(--v2-line);
    background: var(--v2-surface);
    color: var(--v2-ink);
    border-radius: var(--v2-r-md);
}

body.workspace-body-v2 input:focus,
body.workspace-body-v2 select:focus,
body.workspace-body-v2 textarea:focus {
    border-color: var(--v2-accent);
    box-shadow: 0 0 0 3px var(--v2-accent-soft);
}

body.workspace-body-v2 .kpi-card,
body.workspace-body-v2 .chart-card,
body.workspace-body-v2 .meta-card,
body.workspace-body-v2 .advice-box,
body.workspace-body-v2 .ai-summary-box,
body.workspace-body-v2 .feedback-box,
body.workspace-body-v2 .growth-box,
body.workspace-body-v2 .growth-detail-box,
body.workspace-body-v2 .trend-card,
body.workspace-body-v2 .history-item,
body.workspace-body-v2 .history-box,
body.workspace-body-v2 .growth-stat,
body.workspace-body-v2 .axis-card {
    border-color: var(--v2-line);
    background: var(--v2-surface);
}

body.workspace-body-v2 .kpi-value,
body.workspace-body-v2 .axis-score {
    color: var(--v2-ink);
}

body.workspace-body-v2 .history-item strong {
    color: var(--v2-ink);
}

/* /check/news の一覧行と同じ考え方: マウスオーバーで枠線・背景を一段濃くして操作対象だと伝える。 */
body.workspace-body-v2 .history-item:hover {
    border-color: var(--v2-ink);
    background: var(--v2-panel);
}

/* 管理コンソールの評価結果スコアは刷新案どおりアクセントカラーで強調する
   (上のジェネリックルールと同じ詳細度のため、後勝ちさせるためにここに置く)。 */
body.admin-console-v2 .kpi-value,
body.admin-console-v2 .axis-score {
    color: var(--v2-accent);
}

/* チェック結果(#result-panel)は他 workspace 画面と同じ v2 配色。
   問題なし/要確認/要改善のセマンティックカラー(緑・黄・赤)だけは維持し、それ以外は
   共通 .panel 等に任せる(ここでは上書きしない)。 */

/* /check/upload「ポートフォリオ管理から選ぶ」: ドロップ欄との間に「または」の区切り線。
   ファイル一覧のカードは profile-app.css の .pe-file-* をそのまま使う（/profile/edit と同じ見た目）。 */
body.workspace-body-v2 .gallery-pick-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-muted);
}

body.workspace-body-v2 .gallery-pick-or::before,
body.workspace-body-v2 .gallery-pick-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--v2-line);
}

body.workspace-body-v2 .gallery-pick-status {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v2-muted);
}

body.workspace-body-v2 .gallery-pick-status:empty {
    display: none;
}

body.workspace-body-v2 .gallery-pick-status[data-kind="warn"] {
    color: #8a5a00;
}

body.workspace-body-v2 .gallery-pick-unavailable {
    color: var(--v2-muted);
}

/* /check/result「管理URL:<ギャラリー詳細のURL>」（見出し右・履歴の各行）。長いURLは途中で折り返す。 */
body.workspace-body-v2 .result-manage-link {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.workspace-body-v2 .result-page-notice-link-wrap {
    margin: 6px 0 14px;
}

body.workspace-body-v2 .result-page-notice-open-btn {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 12px;
    cursor: pointer;
}

body.workspace-body-v2 .result-page-notice-open-btn:hover {
    background: var(--v2-panel);
}

body.workspace-body-v2 .result-page-notice-open-btn:focus-visible,
body.workspace-body-v2 .page-format-notice-close-btn:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

body.workspace-body-v2 .page-format-notice-modal[hidden] {
    display: none;
}

body.workspace-body-v2 .page-format-notice-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

body.workspace-body-v2 .page-format-notice-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 23, 42, 0.46);
}

body.workspace-body-v2 .page-format-notice-dialog {
    position: relative;
    width: min(680px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    margin: 14px auto;
    overflow: auto;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
    box-shadow: 0 18px 48px rgba(20, 23, 42, 0.2);
    padding: 18px 18px 14px;
}

body.workspace-body-v2 .page-format-notice-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

body.workspace-body-v2 .page-format-notice-head h2 {
    margin: 0;
    font-size: 20px;
}

body.workspace-body-v2 .page-format-notice-close-btn {
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    background: var(--v2-surface);
    color: var(--v2-ink);
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

body.workspace-body-v2 .page-format-notice-item {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    background: var(--v2-panel);
}

body.workspace-body-v2 .page-format-notice-item p {
    margin: 0;
    line-height: 1.8;
}

body.workspace-body-v2 .page-format-notice-pages {
    margin-top: 6px !important;
    font-size: 13px;
    color: var(--v2-muted);
}

/* 見出し右の情報が長くなっても「チェック結果」の見出しは折り返さない（右側が縮んで折り返す） */
body.workspace-body-v2 #result-panel > .panel-head h1 {
    flex: none;
}

body.workspace-body-v2 #result-panel > .panel-head .result-head-meta {
    flex: 1 1 auto;
    min-width: 0;
}

/* 下線は付けない（リンクだと分かるようアクセント色にし、マウスオーバーで少し濃くする） */
/* 「ポートフォリオ管理で開く」: 文字は黒（2026-09-30〜。以前はオレンジ）。押せることはカーソルを重ねたときの下線で示す */
body.workspace-body-v2 .check-manage-url {
    color: var(--v2-ink);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

body.workspace-body-v2 .check-manage-url:hover {
    color: var(--v2-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.workspace-body-v2 .check-manage-url:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

@media print {
    body.workspace-body-v2 #result-manage-upload-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body.workspace-body-v2 .workspace-topbar {
        left: 16px;
    }
}


/* ---------- サムネイル: カーソルを重ねると少し拡大、押すとポップアップで全体を表示（common-ui.js の openImageLightbox） ---------- */
/* /check/result のページ画像（正方形のマス）と、/profile/gallery の表紙・ページ一覧 */
/* 外枠（大きさ・線）は変えず、枠の中の画像だけを少し拡大する（枠の外にははみ出さない） */
body.workspace-body-v2 .portfolio-thumbnail-img,
body.workspace-body-v2 .pg-cover-image,
body.workspace-body-v2 .pg-page-img {
    transition: transform 0.2s ease;
}

body.workspace-body-v2 .portfolio-thumbnail:hover .portfolio-thumbnail-img,
body.workspace-body-v2 .portfolio-thumbnail.is-zoomable:focus-visible .portfolio-thumbnail-img,
body.workspace-body-v2 .pg-cover:hover .pg-cover-image,
body.workspace-body-v2 .pg-page-image:hover .pg-page-img,
body.workspace-body-v2 .pg-cover-image.is-zoomable:focus-visible,
body.workspace-body-v2 .pg-page-img.is-zoomable:focus-visible {
    transform: scale(1.05);
}

body.workspace-body-v2 .is-zoomable {
    cursor: zoom-in;
}

body.workspace-body-v2 .is-zoomable:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.workspace-body-v2 .portfolio-thumbnail-img,
    body.workspace-body-v2 .pg-cover-image,
    body.workspace-body-v2 .pg-page-img {
        transition: none;
    }
}

/* ポップアップ（画面いっぱい・画像は見切れないよう収める） */
html.thumb-lightbox-open {
    overflow: hidden;
}

.thumb-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}

.thumb-lightbox::backdrop {
    background: rgba(12, 14, 24, 0.86);
}

.thumb-lightbox[open] {
    display: block;
}

.thumb-lightbox-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 48px 72px 28px;
    box-sizing: border-box;
    background: rgba(12, 14, 24, 0.86);
}

.thumb-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    cursor: default;
}

.thumb-lightbox-caption {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.thumb-lightbox-close,
.thumb-lightbox-nav {
    position: absolute;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
}

.thumb-lightbox-close {
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 1;
}

.thumb-lightbox-nav {
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    font-size: 30px;
    line-height: 1;
}

.thumb-lightbox-prev {
    left: 14px;
}

.thumb-lightbox-next {
    right: 14px;
}

.thumb-lightbox-close:hover,
.thumb-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.26);
}

.thumb-lightbox-close:focus-visible,
.thumb-lightbox-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .thumb-lightbox-frame {
        padding: 56px 12px 20px;
    }

    .thumb-lightbox-nav {
        top: auto;
        bottom: 16px;
        margin-top: 0;
    }
}

/* ---- 管理画面「データ出力」・「お問い合わせ管理」の絞り込みと表 ---- */
body.admin-console-v2 .export-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.admin-console-v2 .export-range input {
    flex: 1 1 0;
    min-width: 0;
}

body.admin-console-v2 .export-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

body.admin-console-v2 .export-filters .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.admin-console-v2 .export-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
}

body.admin-console-v2 .export-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

body.admin-console-v2 .export-table th,
body.admin-console-v2 .export-table td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--v2-line);
    white-space: nowrap;
}

body.admin-console-v2 .export-table th {
    background: var(--v2-panel);
    font-weight: 700;
    color: var(--v2-muted);
    position: sticky;
    top: 0;
}

body.admin-console-v2 .export-table tbody tr:last-child td {
    border-bottom: 0;
}

body.admin-console-v2 .export-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* データ出力: イベントログ・アンケート回答（admin-event-export.js） */
body.admin-console-v2 .event-export-result {
    margin-top: 8px;
}

body.admin-console-v2 .event-export-total {
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .event-export-h {
    margin: 20px 0 0;
    font-size: 14px;
    font-weight: 700;
}

body.admin-console-v2 .event-export-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 12px 0 0;
}

body.admin-console-v2 .event-export-summary div {
    padding: 10px 12px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
}

body.admin-console-v2 .event-export-summary dt {
    font-size: 12px;
    color: var(--v2-muted);
}

body.admin-console-v2 .event-export-summary dd {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 自由記述は折り返す（ほかの列は1行） */
body.admin-console-v2 #export-surveys .export-table td:last-child {
    min-width: 240px;
    white-space: normal;
}

body.admin-console-v2 .export-table .mono,
body.admin-console-v2 .export-table small.mono {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 11.5px;
    color: var(--v2-muted);
}

body.admin-console-v2 .export-panel-head,
body.admin-console-v2 .panel-head-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body.admin-console-v2 .export-filters > .full {
    grid-column: 1 / -1;
}

body.admin-console-v2 .export-table td.wrap {
    white-space: normal;
    word-break: break-all;
    min-width: 12em;
}

/* 観点別の要確認・要改善ランキング: 観点の名前・領域・コラム、割合の横棒（要改善＝赤・要確認＝黄） */
body.admin-console-v2 .crank-table td {
    vertical-align: middle;
}

body.admin-console-v2 .crank-rank {
    font-weight: 900;
}

body.admin-console-v2 .crank-name b {
    display: block;
    font-size: 13.5px;
    color: var(--v2-ink);
    white-space: normal;
}

body.admin-console-v2 .crank-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--v2-muted);
}

body.admin-console-v2 .crank-meta a {
    color: var(--v2-accent);
    font-weight: 700;
}

body.admin-console-v2 .crank-rate {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 12em;
}

body.admin-console-v2 .crank-bar {
    display: flex;
    flex: 1;
    min-width: 80px;
    height: 10px;
    border-radius: 5px;
    background: var(--v2-panel);
    overflow: hidden;
}

body.admin-console-v2 .crank-bar .is-ng {
    background: var(--v2-negative);
}

body.admin-console-v2 .crank-bar .is-warn {
    background: var(--v2-warn);
}

body.admin-console-v2 .crank-rate b {
    min-width: 3.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .crank-table tr.is-unjudged td {
    color: var(--v2-muted);
}

body.admin-console-v2 .crank-empty {
    margin: 8px 0 0;
    color: var(--v2-muted);
}

/* お問い合わせ管理 */
body.admin-console-v2 .contact-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

body.admin-console-v2 .contact-tab {
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    background: var(--v2-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--v2-ink);
    cursor: pointer;
}

body.admin-console-v2 .contact-tab.is-active {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: #fff;
}

body.admin-console-v2 .contact-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

body.admin-console-v2 .contact-pill.is-new { background: var(--v2-negative-soft); color: var(--v2-negative); }
body.admin-console-v2 .contact-pill.is-in_progress { background: var(--v2-warn-soft); color: var(--v2-warn); }
body.admin-console-v2 .contact-pill.is-done { background: var(--v2-positive-soft); color: var(--v2-positive); }
body.admin-console-v2 .contact-pill.is-closed { background: var(--v2-panel); color: var(--v2-muted); }

body.admin-console-v2 .contact-row {
    cursor: pointer;
}

body.admin-console-v2 .contact-row:hover td,
body.admin-console-v2 .contact-row:focus-visible td,
body.admin-console-v2 .contact-row.is-current td {
    background: var(--v2-panel);
}

body.admin-console-v2 .contact-row:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: -2px;
}

body.admin-console-v2 .export-table td.contact-preview {
    min-width: 16em;
    max-width: 28em;
    color: var(--v2-muted);
}

body.admin-console-v2 .contact-detail-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0 0 14px;
    font-size: 14px;
}

body.admin-console-v2 .contact-detail-meta dt {
    font-weight: 700;
    color: var(--v2-muted);
}

body.admin-console-v2 .contact-detail-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

body.admin-console-v2 .contact-detail-body {
    padding: 14px 16px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    background: var(--v2-panel);
    font-size: 14.5px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 18px;
}

body.admin-console-v2 .contact-update .actions a.btn-secondary {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Metabase を開けなかったときの案内（admin-metabase.html） */
body.admin-console-v2 .metabase-notice {
    max-width: 720px;
}

body.admin-console-v2 .metabase-notice .panel-head p {
    margin: 0;
    max-width: 40em;
    line-height: 1.8;
}

body.admin-console-v2 .metabase-notice-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--v2-muted);
}

body.admin-console-v2 .metabase-notice-body h3 {
    margin: 4px 0 8px;
    font-size: 15px;
}

body.admin-console-v2 .metabase-steps {
    margin: 0 0 14px;
    padding-left: 1.4em;
    line-height: 1.8;
}

body.admin-console-v2 .metabase-note {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--v2-muted);
}

body.admin-console-v2 .metabase-notice .actions a.btn-primary {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* データ出力: Metabase を開くリンク（ボタンの見た目） */
body.admin-console-v2 .export-metabase {
    margin: 10px 0 0;
}

body.admin-console-v2 .export-metabase a.btn-secondary {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

body.admin-console-v2 .contact-events-title {
    margin: 22px 0 8px;
    font-size: 15px;
}

body.admin-console-v2 .contact-events {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--v2-line);
}

body.admin-console-v2 .contact-events li {
    display: grid;
    grid-template-columns: 9.5em 1fr auto;
    gap: 4px 14px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--v2-line);
    font-size: 13.5px;
}

body.admin-console-v2 .contact-events time {
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .contact-events small {
    color: var(--v2-muted);
}

@media (max-width: 720px) {
    body.admin-console-v2 .contact-events li {
        grid-template-columns: 1fr;
    }
}

body.admin-console-v2 .contact-update .status:empty {
    display: none;
}

/* ---- データ出力 → 利用履歴（数字のカードと折れ線グラフ） ---- */
body.admin-console-v2 .usage-field-label {
    font-weight: 700;
}

body.admin-console-v2 .usage-units {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: var(--v2-panel);
    width: fit-content;
}

body.admin-console-v2 .usage-units label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

body.admin-console-v2 .usage-units input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.admin-console-v2 .usage-units label:has(input:checked) {
    background: var(--v2-ink);
    color: #fff;
}

body.admin-console-v2 .usage-units label:has(input:focus-visible) {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

body.admin-console-v2 .usage-range {
    margin: 18px 0 4px;
    font-size: 13px;
    color: var(--v2-muted);
}

body.admin-console-v2 .usage-section {
    margin-top: 22px;
}

body.admin-console-v2 .usage-section-title {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--v2-ink);
    font-size: 16px;
}

body.admin-console-v2 .usage-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}

body.admin-console-v2 .usage-card {
    padding: 14px 16px 12px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    min-width: 0;
}

body.admin-console-v2 .usage-card-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v2-muted);
    line-height: 1.5;
}

body.admin-console-v2 .usage-kpi {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    color: var(--v2-muted);
}

body.admin-console-v2 .usage-kpi b {
    font-size: 28px;
    font-weight: 900;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

body.admin-console-v2 .usage-kpi-pair b {
    font-size: 22px;
}

body.admin-console-v2 .usage-kpi-sep {
    margin: 0 6px;
}

body.admin-console-v2 .usage-ratio {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--v2-muted);
}

body.admin-console-v2 .usage-ratio b {
    font-size: 18px;
    color: var(--v2-positive);
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .usage-chart {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 8px;
}

body.admin-console-v2 .usage-chart .usage-grid {
    stroke: var(--v2-line);
    stroke-width: 1;
}

body.admin-console-v2 .usage-chart .usage-axis {
    font-size: 10.5px;
    fill: var(--v2-muted);
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .usage-legend {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 11.5px;
    color: var(--v2-muted);
}

body.admin-console-v2 .usage-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.admin-console-v2 .usage-legend-item i {
    width: 18px;
    border-top: 2.5px solid;
}

body.admin-console-v2 .usage-legend-item i.is-dash {
    border-top-style: dashed;
}

body.admin-console-v2 .usage-prev {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
}

/* 推移の表示/非表示: カードの右上のグラフのアイコン。押すまでグラフ・表は出さない */
body.admin-console-v2 .usage-card.has-trend {
    position: relative;
}

body.admin-console-v2 .usage-card.has-trend > .usage-card-title {
    padding-right: 40px;
}

body.admin-console-v2 .usage-trend-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

body.admin-console-v2 .usage-trend-btn:hover {
    color: var(--v2-ink);
    border-color: var(--v2-ink);
}

body.admin-console-v2 .usage-trend-btn[aria-expanded="true"] {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: #fff;
}

body.admin-console-v2 .usage-trend-btn:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.admin-console-v2 .usage-trend-btn {
        transition: none;
    }
}

body.admin-console-v2 .usage-trend-box {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--v2-line);
}

body.admin-console-v2 .usage-trend-sum {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .usage-notes {
    margin: 20px 0 0;
    padding-left: 1.2em;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--v2-muted);
}

/* ---- データ出力 → 登録者情報（内訳の横棒と推移の表） ---- */
body.admin-console-v2 .reg-badge {
    flex: none;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px dashed var(--v2-muted);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--v2-muted);
}

body.admin-console-v2 .export-check.is-disabled {
    color: var(--v2-muted);
    cursor: not-allowed;
}

body.admin-console-v2 .export-check.is-disabled input {
    cursor: not-allowed;
}

body.admin-console-v2 .export-check-note {
    display: block;
    margin: 2px 0 0 26px;
    font-size: 12px;
    color: var(--v2-muted);
}

body.admin-console-v2 .reg-attr-grid {
    align-items: start;
}

/* AIポートフォリオチェック画面分析: ステップごとの人数（横棒・人数・前のステップからの割合） */
body.admin-console-v2 .flow-steps {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

body.admin-console-v2 .flow-steps li {
    display: grid;
    grid-template-columns: minmax(12em, 16em) minmax(80px, 1fr) 4.5em minmax(14em, 17em);
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

body.admin-console-v2 .flow-step-label {
    font-weight: 700;
    color: var(--v2-ink);
}

body.admin-console-v2 .flow-step-track {
    height: 14px;
    border-radius: 7px;
    background: var(--v2-panel);
    overflow: hidden;
}

body.admin-console-v2 .flow-step-fill {
    display: block;
    height: 100%;
    background: var(--v2-accent);
}

body.admin-console-v2 .flow-steps li.is-again .flow-step-fill {
    background: var(--v2-positive);
}

body.admin-console-v2 .flow-step-count {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .flow-step-rate {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .flow-step-rate b {
    color: var(--v2-positive);
    font-size: 14px;
}

body.admin-console-v2 .flow-step-rate small {
    font-size: 11.5px;
}

@media (max-width: 760px) {
    body.admin-console-v2 .flow-steps li {
        grid-template-columns: 1fr 4.5em;
    }
    body.admin-console-v2 .flow-step-track,
    body.admin-console-v2 .flow-step-rate {
        grid-column: 1 / -1;
    }
}

body.admin-console-v2 .reg-bars {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    /* 行（li）は display: contents にして、名前の列を一番長い名前に合わせてそろえる */
    grid-template-columns: max-content minmax(48px, 1fr) max-content max-content;
    align-items: center;
    gap: 5px 10px;
    font-size: 12.5px;
}

body.admin-console-v2 .reg-bars li {
    display: contents;
}

body.admin-console-v2 .reg-bar-label {
    max-width: 13em;
    line-height: 1.4;
}

body.admin-console-v2 .reg-bar-track {
    height: 10px;
    border-radius: 999px;
    background: var(--v2-panel);
    overflow: hidden;
}

body.admin-console-v2 .reg-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--v2-accent);
}

body.admin-console-v2 .reg-bars li.is-unanswered .reg-bar-fill {
    background: var(--v2-muted);
    opacity: 0.5;
}

body.admin-console-v2 .reg-bars li.is-unanswered .reg-bar-label {
    color: var(--v2-muted);
}

body.admin-console-v2 .reg-bar-count,
body.admin-console-v2 .reg-bar-share {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .reg-bar-count {
    font-weight: 700;
}

body.admin-console-v2 .reg-bar-share {
    min-width: 3.2em;
    color: var(--v2-muted);
}

body.admin-console-v2 .reg-trend-wrap {
    overflow-x: auto;
}

body.admin-console-v2 .reg-empty {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--v2-muted);
}

body.admin-console-v2 .reg-trend-table {
    border-collapse: collapse;
    font-size: 11.5px;
    white-space: nowrap;
}

body.admin-console-v2 .reg-trend-table th,
body.admin-console-v2 .reg-trend-table td {
    padding: 4px 7px;
    border-bottom: 1px solid var(--v2-line);
    text-align: left;
}

body.admin-console-v2 .reg-trend-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.admin-console-v2 .reg-trend-table thead th {
    color: var(--v2-muted);
    font-weight: 700;
}

body.admin-console-v2 .reg-trend-table tbody th {
    position: sticky;
    left: 0;
    background: var(--v2-surface);
    font-weight: 600;
}

body.admin-console-v2 .reg-trend-table .is-zero {
    color: var(--v2-muted);
    opacity: 0.45;
}

body.admin-console-v2 .reg-trend-table .is-sum {
    font-weight: 700;
}

/* ---- 登録者分析 → 有効人材（「定義」のボタンとポップアップ） ---- */
body.admin-console-v2 .reg-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 40px;
}

body.admin-console-v2 .reg-def-btn {
    padding: 2px 10px;
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    background: var(--v2-surface);
    color: var(--v2-muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

body.admin-console-v2 .reg-def-btn:hover {
    color: var(--v2-ink);
    border-color: var(--v2-ink);
}

body.admin-console-v2 .reg-def-btn:focus-visible,
body.admin-console-v2 .reg-def-close:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

body.admin-console-v2 .reg-def-dialog {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 22px 24px 20px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    color: var(--v2-ink);
    box-shadow: 0 24px 60px rgba(20, 24, 40, 0.18);
}

body.admin-console-v2 .reg-def-dialog::backdrop {
    background: rgba(20, 24, 40, 0.4);
}

body.admin-console-v2 .reg-def-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.admin-console-v2 .reg-def-head h3 {
    margin: 0;
    font-size: 17px;
}

body.admin-console-v2 .reg-def-close {
    padding: 4px 12px;
    border: 1px solid var(--v2-line);
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-ink);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

body.admin-console-v2 .reg-def-lead {
    margin: 14px 0 6px;
    font-size: 13.5px;
    font-weight: 700;
}

body.admin-console-v2 .reg-def-conds {
    margin: 0;
    padding-left: 1.4em;
    display: grid;
    gap: 4px;
    font-size: 13px;
    line-height: 1.7;
}

body.admin-console-v2 .reg-def-table-wrap {
    margin-top: 12px;
    overflow-x: auto;
}

body.admin-console-v2 .reg-def-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.6;
}

body.admin-console-v2 .reg-def-table th,
body.admin-console-v2 .reg-def-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--v2-line);
    text-align: left;
    vertical-align: top;
}

body.admin-console-v2 .reg-def-table thead th {
    color: var(--v2-muted);
    font-weight: 700;
    background: var(--v2-panel);
}

body.admin-console-v2 .reg-def-table tbody th {
    white-space: nowrap;
}

body.admin-console-v2 .reg-def-notes {
    margin: 12px 0 0;
    padding-left: 1.2em;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v2-muted);
}

body.admin-console-v2 .reg-def-table td:last-child {
    white-space: nowrap;
}

/* 登録者分析 → CV登録（準備中の枠） */
body.admin-console-v2 .reg-pending-card {
    border-style: dashed;
    background: var(--v2-panel);
}

body.admin-console-v2 .reg-pending-card .usage-kpi b {
    color: var(--v2-muted);
}

body.admin-console-v2 .reg-pending-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--v2-muted);
}

/* 登録者分析のサマリー（登録数・有効人材・CV登録）は3つ並べる */
body.admin-console-v2 .reg-summary-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* データ出力 → 有効人材一覧・CV登録一覧（列が多いので、表は横に送る） */
body.admin-console-v2 .member-table th,
body.admin-console-v2 .member-table td {
    white-space: nowrap;
}

body.admin-console-v2 .member-table td.wrap,
body.admin-console-v2 .member-table td.mono {
    white-space: nowrap;
    vertical-align: middle;
}

body.admin-console-v2 .member-table .center {
    text-align: center;
}

body.admin-console-v2 .member-table td.is-yes {
    color: var(--v2-positive);
    font-weight: 700;
}

body.admin-console-v2 .member-table td.is-no {
    color: var(--v2-muted);
}

/* 横に送っても、だれの行かが分かるように ユーザーID の列を左に留める */
body.admin-console-v2 .member-table th:first-child,
body.admin-console-v2 .member-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--v2-surface);
    box-shadow: 1px 0 0 var(--v2-line);
}

body.admin-console-v2 .member-table thead th:first-child {
    z-index: 2;
    top: 0;
    background: var(--v2-panel);
}

/* 「AIポートフォリオチェック」「ポートフォリオ管理」の見出しは、admin-member-list.js で入れた改行の位置でだけ2行にする（列を細く） */
body.admin-console-v2 .member-table th.center {
    white-space: pre;
    line-height: 1.4;
}

/* 有効人材一覧・CV登録一覧: 見出しを押して並べ替え（▲▼。今の並びの向きをオレンジで） */
body.admin-console-v2 .member-table th {
    padding: 0;
}

body.admin-console-v2 .member-table .member-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    white-space: inherit;
    cursor: pointer;
}

body.admin-console-v2 .member-table th.num .member-sort {
    justify-content: flex-end;
}

body.admin-console-v2 .member-table th.center .member-sort {
    justify-content: center;
    text-align: center;
}

body.admin-console-v2 .member-table .member-sort:hover {
    color: var(--v2-ink);
}

body.admin-console-v2 .member-table .member-sort:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: -2px;
}

body.admin-console-v2 .member-table .member-sort-label {
    white-space: inherit;
}

body.admin-console-v2 .member-sort-icon {
    display: inline-flex;
    flex-direction: column;
    flex: none;
    font-size: 8px;
    line-height: 1;
    font-style: normal;
}

body.admin-console-v2 .member-sort-icon i {
    font-style: normal;
    color: var(--v2-line);
}

body.admin-console-v2 .member-table th.is-asc .member-sort-icon .is-up,
body.admin-console-v2 .member-table th.is-desc .member-sort-icon .is-down {
    color: var(--v2-accent);
}

body.admin-console-v2 .member-table th.is-sorted .member-sort {
    color: var(--v2-ink);
}

/* チェック中のダイアログを出している間は、後ろのページ画像を拡大できない見た目に（2026-10-30） */
html.is-checking .is-zoomable {
    cursor: default;
}