/* cocotre — コンポーネント CSS (design-system.html v1.3 由来)
 * tokens.css の変数を参照。demo・webapp が共有する見た目の実体。
 * Phase 3 で Tailwind v4 ユーティリティ (shared/input.css) を必要に応じ併用する。
 */

* { box-sizing: border-box; }
html { background: var(--bg-subtle); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-main);
  background: var(--bg-subtle);
}
a { color: var(--primary-700); }

/* ---- アプリシェル ---- */
header.app {
  height: 56px; background: var(--primary-500);
  display: flex; align-items: center; padding: 0 24px;
  position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm);
}
/* ロール別ヘッダー色: 青の濃淡で「権限の重さ」を表現（濃いほど重い）。
   受検者(本人マイページ・受検)=明るい青 / 会社管理=primary(既定) / 運営=濃紺 */
header.app.app-examinee { background: var(--primary-200); }
header.app.app-operator { background: #1e293b; }
/* app-examinee は明るい背景のため、ロゴ・氏名・切替ボタンを濃色にして可読性を確保 */
.app.app-examinee .app-brand,
.app.app-examinee .app-user { color: var(--primary-900); }
.app.app-examinee .btn-switch { color: var(--primary-900); border-color: rgba(1,94,146,.45); background: rgba(255,255,255,.5); }
.app.app-examinee .btn-switch:hover { background: rgba(255,255,255,.7); }
.app-brand { color: #fff; font-weight: 700; font-size: 1.125rem; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.app-demo-tag {
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  background: var(--accent-500); color: #fff; padding: 2px 8px; border-radius: 999px;
}
.shell { display: flex; min-height: calc(100vh - 56px); width: 100%; }
.sidebar { width: 240px; flex: none; background: var(--surface); border-right: 1px solid var(--divider); padding: 12px; }
.nav-section { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--text-disabled); text-transform: uppercase; padding: 10px 12px 4px; }
.nav-divider { height: 1px; background: var(--divider); margin: 8px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 1px 0; border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; font-size: .9375rem; line-height: 1.3; }
.nav-item .ic { width: 18px; height: 18px; flex: none; color: var(--text-sub); }
.nav-item:hover { background: var(--bg-subtle); }
.nav-item.active { background: var(--primary-50); color: var(--primary-700); font-weight: 700; }
.nav-item.active .ic { color: var(--primary-600); }
.content { flex: 1; min-width: 0; padding: 24px; }

/* ---- 見出し ---- */
h2.sec { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin: 0 0 8px; padding-left: 12px; border-left: 4px solid var(--primary-500); }
p.sec-note { color: var(--text-sub); font-size: .875rem; margin: 0 0 24px; }

/* ---- カード / 統計 ---- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; margin-bottom: 24px; }
/* 決済サマリの契約情報バー（固定情報を数値KPIと分離して帯で表示） */
.contract-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: 10px; padding: 13px 18px; margin-bottom: 16px; font-size: .9375rem; }
.contract-bar-label { font-weight: 700; color: var(--primary-700); padding-right: 4px; }
.contract-bar-sep { color: var(--text-disabled); }
.stat-row { display: flex; gap: 16px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 24px; min-width: 140px; }
.stat .num { font-size: 1.75rem; font-weight: 700; color: var(--primary-700); }
.stat .lbl { font-size: .8125rem; color: var(--text-sub); }

/* ---- ボタン ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: .9375rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; transition: background .15s;
  text-decoration: none;
}
.btn-primary { background: var(--primary-600); color: #fff; }
.btn-primary:hover { background: var(--primary-500); }
.btn-secondary { background: var(--surface); color: var(--primary-700); border-color: var(--primary-600); }
.btn-secondary:hover { background: var(--primary-50); }
.btn-danger { background: var(--error-500); color: #fff; cursor: pointer; }
.btn-danger:hover { filter: brightness(0.92); box-shadow: 0 1px 4px rgba(185,28,28,.35); }
.btn-ghost { background: transparent; color: var(--primary-700); }
.btn-ghost:hover { background: var(--primary-50); }
.btn-cta { background: var(--accent-500); color: #fff; }
.btn-on-dark { background: #fff; color: var(--primary-700); }
.btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.btn:disabled { background: var(--bg-muted); color: var(--text-disabled); border-color: transparent; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 12px; font-size: .875rem; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 1.125rem; min-width: 120px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- テーブル ---- */
table.ds { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .875rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
table.ds th { background: var(--primary-50); color: var(--text-main); font-weight: 500; text-align: left; padding: 12px; border-bottom: 1px solid var(--divider); }
table.ds td { padding: 0 12px; height: 48px; border-bottom: 1px solid var(--divider); }
table.ds tbody tr:nth-child(even) { background: var(--bg-subtle); }
table.ds tbody tr:hover { background: var(--primary-100); }
td.score-high { background: var(--score-hr-bg); color: var(--score-hr-tx); font-weight: 700; border-left: 3px solid var(--error-500); }
td.score-caution { background: var(--score-ca-bg); color: var(--score-ca-tx); font-weight: 700; }
/* 罫線つきテーブル(個別コメント等。セルの区切りを明示) */
table.ds.bordered th, table.ds.bordered td { border: 1px solid var(--divider); }

/* ---- バッジ (design-system.html v1.3 由来・網羅監査済みの全状態) ---- */
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.badge-normal { background: var(--primary-50); color: var(--primary-700); }
.badge-ent { background: var(--ent-bg); color: var(--ent-tx); }
.badge-exempt { background: var(--score-ca-bg); color: var(--score-ca-tx); }
.badge-suspended { background: var(--score-hr-bg); color: var(--score-hr-tx); }
.badge-reserved { background: var(--score-ca-bg); color: var(--score-ca-tx); }
.badge-active { background: var(--primary-50); color: var(--primary-700); }
.badge-done { background: var(--bg-muted); color: var(--text-sub); }
.badge-danger { background: var(--error-500); color: #fff; }
.badge-canceled { background: var(--bg-muted); color: var(--text-disabled); }
.badge-starter { background: var(--surface); color: var(--primary-700); border: 1px solid var(--primary-600); }
.badge-standard { background: #DCFCE7; color: #15803D; }
.badge-mail { background: var(--primary-50); color: var(--primary-700); }
.badge-id { background: var(--bg-muted); color: var(--text-sub); border: 1px solid var(--border); }
.badge-unnotified { background: var(--score-ca-bg); color: var(--score-ca-tx); }
.badge-taken, .badge-linked, .badge-paid { background: #D1FAE5; color: #065F46; }
.badge-nottaken { background: var(--bg-muted); color: var(--text-sub); }
.badge-guest { background: var(--surface); color: var(--text-sub); border: 1px dashed var(--text-disabled); }
.badge-payfail { background: var(--score-hr-bg); color: var(--score-hr-tx); }
.badge-ai { background: #E0F7FA; color: #006975; }
.badge-register { background: var(--primary-50); color: var(--primary-700); }

/* showcase 用の行レイアウト(部品の並べ表示) */
.btn-demo-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; }

/* ---- header user / filter (S2) ---- */
.app-spacer { flex: 1; }
.app-user { color: rgba(255,255,255,.9); font-size: .8125rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ヘッダーの切替ボタン（on-dark・ボタンと分かる見た目） */
.btn-switch { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.12); white-space: nowrap; }
.btn-switch:hover { background: rgba(255,255,255,.24); }

/* 崩れ防止: バッジ・ボタンは折り返さない */
.badge { white-space: nowrap; }
.btn { white-space: nowrap; }

/* レスポンシブ・テーブル（狭幅は横スクロール / design-system §250） */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* お知らせ／受検のお願い（design-system 未通知色 #FEF3C7 / #92400E ベース） */
.notice { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius); border: 1px solid #FCD34D; background: #FEF3C7; margin-bottom: 16px; }
.notice-icon { font-size: 1.5rem; line-height: 1; }
.notice-body { flex: 1; min-width: 200px; }
.notice-title { font-weight: 700; color: #92400E; font-size: .8125rem; margin-bottom: 4px; }
.notice-project { font-weight: 700; font-size: 1.0625rem; color: var(--text-main); }
.notice-due { color: #92400E; font-weight: 600; font-size: .875rem; margin-top: 2px; }

/* モバイル（スマホ） */
@media (max-width: 640px) {
  header.app { padding: 0 14px; }
  .app-brand { font-size: 1rem; }
  .app-user { font-size: .75rem; gap: 8px; }
  .content { padding: 16px; }
  .notice { padding: 14px; }
  .notice .btn { width: 100%; }
  /* 受検画面（B-3/B-4b）: 「はい/いいえ」を全幅2分割にしてタップしやすく */
  .cp-opt { flex: 1 1 40%; padding: 12px 16px; }
  /* 小ボタンのタップ性向上（スマホのみ） */
  .btn-sm { height: 36px; }
}

/* ---- 受検画面（B-3 / B-4b 共通・shared/js/exam.js と対）---- */
/* 旧システム users.scss / users.js.coffee の「複数問表示・順番に有効化・回答済みは見える」を移植 */
.progress { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--primary-500); transition: width .2s ease; }
.exam-page { display: none; }
.exam-page.active { display: block; }
.exam-q { text-align: center; padding: 26px 12px; border-bottom: 1px solid var(--divider); transition: opacity .3s ease; }
.exam-q:last-of-type { border-bottom: none; }
.exam-q.locked { opacity: .35; }                 /* これから回答する設問はグレーで無効 */
.exam-qnum { font-size: .8rem; color: var(--text-sub); margin: 0 0 8px; letter-spacing: .04em; }
.exam-q.current .exam-qnum { color: var(--primary-700); }
.exam-qbody { font-size: 1.2rem; font-weight: 700; color: var(--text-main); line-height: 1.6; margin: 0 0 20px; }
.cp-radio { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cp-opt { position: relative; display: inline-flex; align-items: center; gap: 8px; justify-content: center; cursor: pointer; padding: 10px 22px; min-width: 100px; border: 2px solid transparent; border-radius: 999px; font-weight: 700; color: var(--text-main); transition: .25s all ease; }
.cp-opt .dot { width: 20px; height: 20px; border: 2px solid var(--text-sub); border-radius: 50%; flex: none; transition: .2s all ease; }
.cp-opt:has(input:checked) { background: var(--primary-500); color: #fff; }
.cp-opt:has(input:checked) .dot { border-color: #fff; background: #fff; }
.cp-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.exam-q.locked .cp-opt { cursor: not-allowed; }
.btn.locked { opacity: .4; pointer-events: none; }

/* 運営の代理ログイン中バナー（通常の人事アクセスとは色で必ず区別） */
/* content の padding(24px) を打ち消して上端・左右いっぱいに敷き、タイトルとの間に余白を確保 */
.proxy-bar { position: sticky; top: 0; z-index: 60; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); margin: -24px -24px 24px; }
.proxy-bar-view { background: #047857; }   /* 閲覧専用＝グリーン（安全・読み取り専用） */
.proxy-bar-edit { background: #dc2626; }   /* 編集モード＝レッド（警告・注意） */
.proxy-bar-inner { max-width: 1200px; margin: 0 auto; padding: 9px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .875rem; }
.proxy-bar-tag { font-weight: 700; background: rgba(255,255,255,.22); padding: 2px 10px; border-radius: 999px; }
.proxy-bar-company { font-weight: 700; }
.proxy-bar-mode { font-weight: 600; }
.proxy-bar-reason { opacity: .92; }
.proxy-bar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) { .proxy-bar { margin: -16px -16px 20px; } }
/* ページ送り（戻る / 次へ・送信）。既定は横並び、狭幅スマホ（〜380px）では縦積み全幅にして
   ボタンがはみ出して横スクロールする不具合を防ぐ（次へ・送信を上に置く column-reverse）。 */
.exam-pagenav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 380px) {
  .exam-pagenav { flex-direction: column-reverse; align-items: stretch; }
  .exam-pagenav .btn { width: 100%; }
}

/* 即表示ツールチップ（ネイティブ title の表示ラグを回避） */
.info-tip { position: relative; display: inline-flex; align-items: center; cursor: help; color: var(--text-sub); }
.info-tip .tip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; font-size: .75rem; font-weight: 400; line-height: 1.5; text-align: left; padding: 8px 10px; border-radius: 6px; width: max-content; max-width: 260px; white-space: normal; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: opacity .1s ease; pointer-events: none; }
.info-tip:hover .tip-text { visibility: visible; opacity: 1; }
.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.filter-bar select {
  height: 40px; padding: 0 36px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: .875rem; font-family: var(--font-sans); color: var(--text-main);
  -webkit-appearance: none; appearance: none;
}
.card h3 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 16px; padding-left: 12px; border-left: 4px solid var(--primary-500); line-height: 1.4; }

/* ---- フォーム (design-system.html v1.3 由来) ---- */
.field { margin-bottom: 16px; max-width: 420px; }
.field.wide { max-width: 720px; }
.field label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: 4px; }
.field .req { color: var(--error-500); }
/* モーダル等のフォーム小見出し（項目名を太字・統一・縦マージン付き） */
.form-section { margin-bottom: 28px; }
.form-section:last-of-type { margin-bottom: 0; }
.section-label { display: block; font-size: .9375rem; font-weight: 700; color: var(--text-main); margin: 0 0 14px; }
.section-label .req { color: var(--error-500); font-weight: 700; }
.input { width: 100%; height: 40px; padding: 0 12px; font-size: 1rem; font-family: var(--font-sans); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-main); }
.input:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; border-color: var(--primary-500); }
.input.is-error { border-color: var(--error-500); }
textarea.input { height: auto; min-height: 88px; padding: 8px 12px; line-height: 1.5; resize: vertical; }
select.input { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.msg-error { color: var(--error-500); font-size: .875rem; margin-top: 4px; }
.radio-group { display: flex; gap: 24px; }
.radio-group label { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 400; cursor: pointer; }
a.link { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }

/* ---- 認証(公開ログイン) ---- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-subtle); padding: 24px; }
.auth-card { width: 100%; max-width: 400px; margin: 0; }
.auth-brand { text-align: center; font-weight: 700; font-size: 1.5rem; color: var(--primary-700); display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---- タブ ---- */
.tabs { display: flex; border-bottom: 1px solid var(--divider); margin: 16px 0 20px; }
.tab { flex: 1; height: 40px; background: none; border: none; border-bottom: 2px solid transparent; font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; color: var(--text-sub); cursor: pointer; }
.tab.active { color: var(--primary-700); border-bottom-color: var(--primary-500); }

/* ---- セグメンテッドコントロール(方式トグル) ---- */
.seg { display: inline-flex; background: var(--bg-muted); border-radius: 999px; padding: 3px; gap: 2px; }
.seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; height: 34px; padding: 0 16px; border-radius: 999px; font-family: var(--font-sans); font-size: .875rem; font-weight: 700; color: var(--text-sub); cursor: pointer; white-space: nowrap; text-decoration: none; }
.seg-btn.active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-sm); }

/* ---- キー・バリュー(プロフィール等。ラベルをチップ化して項目と値を見分けやすく) ---- */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; }
.kv > div { display: flex; align-items: center; gap: 12px; }
.kv .k { background: var(--primary-50); color: var(--primary-700); font-weight: 700; font-size: .8125rem; padding: 4px 12px; border-radius: var(--radius-sm); min-width: 76px; text-align: center; flex: none; }
.kv .v { font-size: .9375rem; font-weight: 500; }

/* ---- メーター(スコアバー) ---- */
.meter { height: 8px; background: var(--bg-muted); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--primary-500); border-radius: 999px; }

/* ---- モーダル(design-system §10 準拠) ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 120; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0, 0, 0, .2); width: 100%; max-width: 720px; padding: 24px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-head h3 { margin: 0; padding-left: 12px; border-left: 4px solid var(--primary-500); font-size: 1.0625rem; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-sub); }