/* SCS評価基準 分類別ビュー */
:root {
  --ink: #1b2433;
  --muted: #5d6b7e;
  --line: #d9e1ea;
  --canvas: #f4f6f9;
  --surface: #ffffff;
  --navy: #1b4f78;
  --navy-dark: #123854;
  --navy-soft: #e7f0f7;
  --cyan: #16a6b6;
  --cat-bg: #fff4e8;
  --cat-line: #f0c08f;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo UI", "Meiryo", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
h1, p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #1b6fd1; outline-offset: 2px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.cv-header { padding: 14px 24px; background: var(--navy-dark); color: #fff; }
.cv-header h1 { font-size: 1.25rem; }
.cv-source { font-size: 0.82rem; opacity: 0.8; overflow-wrap: anywhere; }

.cv-main { max-width: 1200px; margin: 0 auto; padding: 16px 24px 48px; }

/* 切り替え */
.cv-controls {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-end;
  padding: 12px 16px; margin: 0 -16px;
  background: var(--canvas); border-bottom: 1px solid var(--line);
}
.cv-group { display: flex; flex-direction: column; gap: 4px; }
.cv-group-search { flex: 1 1 260px; }
.cv-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.cv-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 4px 12px; line-height: 1.3;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
}
.cv-group-cat { flex: 1 1 100%; order: 3; }
.cv-seg-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.cv-catbtn {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: center;
  padding: 6px 10px; text-align: left; line-height: 1.35;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
}
.cv-catbtn:hover { border-color: var(--navy); }
.cv-catbtn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cv-catbtn.is-empty { opacity: 0.55; }
.cv-catbtn-mark { grid-row: 1 / 3; font-size: 1.35rem; font-weight: 700; }
.cv-catbtn-name { font-size: 0.85rem; font-weight: 700; }
.cv-catbtn-count { font-size: 0.72rem; opacity: 0.85; }
.cv-btn:hover { border-color: var(--navy); }
.cv-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cv-btn.is-empty { opacity: 0.55; }
.cv-btn-main { font-size: 1.1rem; font-weight: 700; }
.cv-btn-sub { font-size: 0.72rem; opacity: 0.85; }
#q { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

.cv-summary { margin: 16px 0 10px; font-weight: 700; color: var(--navy-dark); }
.cv-empty { padding: 24px; background: var(--surface); border-radius: var(--radius); color: var(--muted); }

/* カード */
.cv-list { display: flex; flex-direction: column; gap: 14px; }
.cv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.cv-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.cv-no { font-weight: 800; font-size: 1.05rem; color: var(--navy-dark); }
.cv-mark { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 6px; background: var(--cyan); color: #04323a; font-weight: 800; }

.cv-field { min-width: 0; }
.cv-field-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.cv-field-body.is-blank { color: var(--muted); }
.cv-criterion .cv-field-body { font-weight: 600; }

/* 評価基準のカード(上)と【アセスメントシート】のカード(下)を1組にして並べる */
.cv-set { display: flex; flex-direction: column; gap: 6px; }
.cv-sheet { background: #f7fafd; border-color: #c9d9e8; }
.cv-sheet-title { margin: 0; font-size: 0.98rem; color: var(--navy-dark); }
.cv-no-sub { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.cv-evi { margin-top: 10px; padding: 10px 12px; background: var(--cat-bg); border: 1px solid var(--cat-line); border-radius: 8px; }
.cv-evi-qual { display: inline-block; margin: 2px 0 4px; padding: 0 8px; font-size: 0.8rem; font-weight: 700; color: #8a4b08; background: #ffe2c2; border-radius: 6px; }

.cv-item { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.cv-card-head + .cv-item { margin-top: 0; padding-top: 0; border-top: none; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.cv-rowref { font-size: 0.75rem; color: var(--muted); text-align: right; }

/* 解説ボタンとポップアップ */
.cv-note-btn {
  margin-left: auto; padding: 4px 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--navy); border-radius: 999px; background: var(--navy-soft); color: var(--navy-dark);
}
.cv-note-btn:hover { background: var(--navy); color: #fff; }
.cv-dlg {
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: none; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); color: var(--ink);
}
.cv-dlg[open] { display: flex; flex-direction: column; }
.cv-dlg::backdrop { background: rgba(18, 56, 84, 0.45); }
.cv-dlg-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--navy-dark); color: #fff; }
.cv-dlg-title { margin: 0; font-size: 1rem; }
.cv-dlg-close { margin-left: auto; padding: 4px 14px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.cv-dlg-close:hover { background: rgba(255, 255, 255, 0.15); }
.cv-dlg-body { padding: 16px 18px 20px; overflow-y: auto; }
.cv-dlg-criterion { margin-bottom: 12px; padding: 8px 12px; background: var(--navy-soft); border-radius: 8px; font-weight: 600; }
.cv-dlg-note + .cv-dlg-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .cv-header { padding: 12px 16px; }
  .cv-main { padding: 12px 16px 40px; }
  .cv-controls { margin: 0 -16px; padding: 10px 16px; position: static; }
  .cv-grid { grid-template-columns: 1fr; }
}