/* 資格タイパ電卓 共通スタイル（一覧・マイページ・管理者画面で共有） */
:root {
  --bg: #eef0ea;
  --surface: #fbfaf6;
  --surface-raised: #ffffff;
  --ink: #1c2430;
  --ink-soft: #52606f;
  --ink-faint: #8b93a0;
  --indigo: #1f3a5f;
  --indigo-soft: #3d5a80;
  --indigo-wash: #e2e7ed;
  --vermillion: #b8402a;
  --vermillion-wash: #f4e3dd;
  --line: #d3d2c4;
  --line-strong: #b7b6a6;
  --focus: #3d5a80;
  --good: #3f7d4f;
  --good-wash: #e2ede3;
  --warn: #97711f;
  --warn-wash: #f1e7d2;
  --cat0-fg: #2f7d74; --cat0-bg: #e0efec;
  --cat1-fg: #6a4a8f; --cat1-bg: #ece3f2;
  --cat2-fg: #8a5a3a; --cat2-bg: #f1e6dc;
  --cat3-fg: #55618f; --cat3-bg: #e3e5f2;
  --cat4-fg: #6b7a3a; --cat4-bg: #eaeedb;
  --cat5-fg: #9a4a6a; --cat5-bg: #f3e1e9;
  --cat6-fg: #8a7226; --cat6-bg: #f2ecd4;
  --cat7-fg: #2a6a8a; --cat7-bg: #ddeaf1;
  --cat8-fg: #3f5a6a; --cat8-bg: #e2eaee;
  --cat9-fg: #7a2a6a; --cat9-bg: #efdcec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181d; --surface: #1b2129; --surface-raised: #212932;
    --ink: #e7e5dc; --ink-soft: #aab0ba; --ink-faint: #767f8a;
    --indigo: #8fabc9; --indigo-soft: #6c8caf; --indigo-wash: #263140;
    --vermillion: #e2694f; --vermillion-wash: #3a2723;
    --line: #2c333c; --line-strong: #3b434e; --focus: #8fabc9;
    --good: #7fbf8f; --good-wash: #1f2e23; --warn: #d1ab5c; --warn-wash: #332a17;
    --cat0-fg: #7fc9bf; --cat0-bg: #1c2e2b;
    --cat1-fg: #c3a8e0; --cat1-bg: #2a2233;
    --cat2-fg: #d6a679; --cat2-bg: #332721;
    --cat3-fg: #a9b2e6; --cat3-bg: #232640;
    --cat4-fg: #b9c98a; --cat4-bg: #262b1c;
    --cat5-fg: #dd9bb9; --cat5-bg: #33212a;
    --cat6-fg: #d4c273; --cat6-bg: #2f2a17;
    --cat7-fg: #7ab8d6; --cat7-bg: #182a33;
    --cat8-fg: #8fb3c4; --cat8-bg: #1e2830;
    --cat9-fg: #cf7ac4; --cat9-bg: #2e1c2c;
  }
}
:root[data-theme="dark"] {
  --bg: #14181d; --surface: #1b2129; --surface-raised: #212932;
  --ink: #e7e5dc; --ink-soft: #aab0ba; --ink-faint: #767f8a;
  --indigo: #8fabc9; --indigo-soft: #6c8caf; --indigo-wash: #263140;
  --vermillion: #e2694f; --vermillion-wash: #3a2723;
  --line: #2c333c; --line-strong: #3b434e; --focus: #8fabc9;
  --good: #7fbf8f; --good-wash: #1f2e23; --warn: #d1ab5c; --warn-wash: #332a17;
  --cat0-fg: #7fc9bf; --cat0-bg: #1c2e2b;
  --cat1-fg: #c3a8e0; --cat1-bg: #2a2233;
  --cat2-fg: #d6a679; --cat2-bg: #332721;
  --cat3-fg: #a9b2e6; --cat3-bg: #232640;
  --cat4-fg: #b9c98a; --cat4-bg: #262b1c;
  --cat5-fg: #dd9bb9; --cat5-bg: #33212a;
  --cat6-fg: #d4c273; --cat6-bg: #2f2a17;
  --cat7-fg: #7ab8d6; --cat7-bg: #182a33;
  --cat8-fg: #8fb3c4; --cat8-bg: #1e2830;
  --cat9-fg: #cf7ac4; --cat9-bg: #2e1c2c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; }
.page { max-width: 1040px; margin: 0 auto; padding: 56px 24px 96px; }

.top-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
.top-nav a { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-faint); text-decoration: none; padding: 6px 12px; border: 1px solid transparent; }
.top-nav a:hover { color: var(--indigo); }
.top-nav a[aria-current="page"] { color: var(--indigo); background: var(--indigo-wash); border-color: var(--indigo-wash); }

header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--line-strong); margin-bottom: 40px; }
header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--vermillion) 0 64px, transparent 64px); }
.header-main { display: flex; align-items: flex-start; gap: 24px; min-width: 0; }
.kicker { display: block; font-size: 11.5px; letter-spacing: 0.22em; color: var(--ink-faint); font-weight: 700; margin-bottom: 10px; }
.seal { flex: none; position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--vermillion); color: var(--vermillion); display: flex; align-items: center; justify-content: center; font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 24px; letter-spacing: 0.04em; transform: rotate(-4deg); margin-top: 6px; box-shadow: 0 0 0 3px var(--vermillion-wash), inset 0 0 0 1px var(--vermillion-wash); }
.seal::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--vermillion); border-radius: 50%; opacity: 0.55; }
h1 { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: clamp(28px, 4vw, 37px); letter-spacing: 0.02em; margin: 0 0 10px; text-wrap: balance; }
header p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; max-width: 60ch; }
section { margin-bottom: 44px; }
.section-label { font-size: 12px; letter-spacing: 0.14em; color: var(--indigo-soft); font-weight: 700; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.section-label::before { content: ""; width: 3px; height: 12px; background: var(--vermillion); flex: none; }

/* アカウント表示（ヘッダー右側） */
.account-widget { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.account-widget .avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); object-fit: cover; }
.account-widget .account-name { font-size: 12.5px; color: var(--ink-soft); max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-widget .account-menu { display: flex; align-items: center; gap: 6px; }
.google-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
.google-btn:hover { border-color: var(--indigo-soft); background: var(--indigo-wash); }

.investigate-box { display: flex; flex-wrap: wrap; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--indigo); padding: 22px 24px; box-shadow: 0 1px 0 var(--line); }
.investigate-box input[type="text"] { flex: 1 1 320px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-family: inherit; font-size: 15px; padding: 12px 14px; transition: border-color 0.15s ease; }
.investigate-box input[type="text"]:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.investigate-result { margin-top: 14px; }
.result-card { border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.result-card.found { border-left: 3px solid var(--good); }
.result-card.notfound { border-left: 3px solid var(--warn); }
.result-card.error { border-left: 3px solid var(--vermillion); }
.result-card strong { color: var(--ink); }
.manual-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.manual-form input { border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-family: inherit; font-size: 13px; padding: 7px 9px; flex: 1 1 120px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-top-color: var(--indigo); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.controls { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: 20px 22px; margin-bottom: 4px; }
.years-control { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.years-control label { font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; }
.years-control input[type="range"] { flex: 1; accent-color: var(--indigo); min-width: 100px; }
.years-value { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--indigo); min-width: 3.5em; text-align: right; }
.sort-toggle { display: flex; gap: 0; border: 1px solid var(--line-strong); }
.sort-toggle button { border: none; background: var(--surface); color: var(--ink-soft); font-family: inherit; font-size: 13px; padding: 8px 14px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.sort-toggle button + button { border-left: 1px solid var(--line-strong); }
.sort-toggle button[aria-pressed="true"] { background: var(--indigo); color: var(--surface-raised); }
.btn { border: 1px solid var(--indigo); background: var(--indigo); color: var(--surface-raised); font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; padding: 11px 22px; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, transform 0.1s ease; }
.btn:hover { background: var(--indigo-soft); border-color: var(--indigo-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-small { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 12px; padding: 3px 9px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.btn-small:hover { border-color: var(--indigo); color: var(--indigo); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 14px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-family: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.filter-chip:hover { border-color: var(--indigo-soft); color: var(--indigo); }
.filter-chip[aria-pressed="true"] { background: var(--indigo); color: var(--surface-raised); border-color: var(--indigo); }
.list-search { flex: 1 1 200px; max-width: 260px; }
.list-search input { width: 100%; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-family: inherit; font-size: 13px; padding: 7px 10px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
thead th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-faint); text-transform: uppercase; padding: 13px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
thead th.num, td.num { text-align: right; }
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-raised); }
tbody tr.rank-1 { background: var(--vermillion-wash); }
tbody tr.rank-1:hover td { background: var(--vermillion-wash); }
tbody tr.flash-highlight { background: var(--indigo-wash); }
@media (prefers-reduced-motion: no-preference) { tbody tr { transition: background-color 1.2s ease; } tbody tr:hover { transition: background-color 0.1s ease; } }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 10px; }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 50%; margin-top: 4px; }
.rank-1 .rank-badge { color: var(--vermillion-wash); background: var(--vermillion); border-color: var(--vermillion); }
.rank-2 .rank-badge, .rank-3 .rank-badge { color: var(--indigo); border-color: var(--indigo-soft); }
.name-text { font-weight: 700; }
.manual-tag { font-size: 10.5px; color: var(--ink-faint); border: 1px solid var(--line-strong); padding: 1px 6px; margin-left: 6px; letter-spacing: 0.04em; white-space: nowrap; display: inline-block; }
.meta-line { margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.6; }
.badge { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.badge-confidence-high { color: var(--good); background: var(--good-wash); }
.badge-confidence-medium { color: var(--warn); background: var(--warn-wash); }
.badge-confidence-low, .badge-confidence-none { color: var(--ink-faint); background: var(--indigo-wash); }
.cat-chip { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.meta-line a { color: var(--indigo-soft); }
.meta-line .link-btn { background: none; border: none; color: var(--indigo-soft); text-decoration: underline; cursor: pointer; font-family: inherit; font-size: 11.5px; padding: 0; }
.override-form { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.override-form input { width: 6em; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-family: inherit; font-size: 12px; padding: 3px 6px; }
details.row-details { border: none; background: none; margin-top: 5px; }
.row-details summary { padding: 0; border: none; font-size: 11px; font-weight: 400; color: var(--indigo-soft); cursor: pointer; }
.row-details summary::after { content: none; }
.row-details .details-body { margin-top: 5px; padding-left: 2px; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; }
.row-details .details-body a { color: var(--indigo-soft); }

.chart { display: flex; flex-direction: column; gap: 11px; background: var(--surface); border: 1px solid var(--line); padding: 22px 24px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 90px; align-items: center; gap: 12px; }
.bar-name { font-size: 13.5px; color: var(--ink-soft); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row.top .bar-name { color: var(--ink); font-weight: 700; }
.bar-track { background: var(--indigo-wash); height: 16px; border-radius: 3px; position: relative; overflow: hidden; }
.bar-fill { height: 100%; background: var(--indigo-soft); border-radius: 3px; }
.bar-row.top .bar-fill { background: var(--vermillion); }
.bar-value { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bar-row.top .bar-value { color: var(--vermillion); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .bar-fill { transition: width 0.4s ease; } }

footer { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint); line-height: 1.8; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--ink-faint); font-size: 14px; }

/* マイページ・管理者画面向けの汎用カード・簡易テーブル */
.card { background: var(--surface); border: 1px solid var(--line); padding: 22px 24px; }
.card + .card { margin-top: 16px; }
.table-scroll { overflow-x: auto; }
.simple-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.simple-table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-faint); text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.simple-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
.simple-table tr:last-child td { border-bottom: none; }
.role-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.03em; }
.role-tag.admin { color: var(--vermillion); background: var(--vermillion-wash); }
.role-tag.user { color: var(--ink-faint); background: var(--indigo-wash); }
.signin-prompt { text-align: center; padding: 56px 24px; color: var(--ink-soft); }
.signin-prompt p { margin: 0 0 18px; font-size: 14px; line-height: 1.8; }