*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: var(--grvn-paper);
  --panel: var(--grvn-card);
  --panel-soft: var(--grvn-paper);
  --line: var(--grvn-line);
  --line-strong: var(--grvn-line-2);
  --text: var(--grvn-ink);
  --muted: var(--grvn-mute);
  --navy: var(--grvn-navy);
  --navy-soft: var(--grvn-navy-2);
  --blue: var(--grvn-info);
  --blue-hover: var(--grvn-info-2);
  --blue-soft: var(--grvn-info-soft);
  --green: var(--grvn-green);
  --green-soft: var(--grvn-green-soft);
  --red: var(--grvn-bad);
  --red-soft: var(--grvn-bad-soft);
  --amber: var(--grvn-warn);
  --amber-soft: var(--grvn-warn-soft);
  --shadow-sm: var(--grvn-shadow-sm);
  --shadow-md: var(--grvn-shadow-md);
  /* サイドバー用（GRVN共通ヘッダーの濃紺と被らない明るい配色。アクセントはGRVNグリーンに合わせる） */
  --sidebar-bg: var(--grvn-paper);
  --sidebar-accent: var(--grvn-green);
  --sidebar-accent-hover: var(--grvn-green-2);
  --sidebar-accent-soft: var(--grvn-green-soft);
}

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: var(--grvn-font);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { touch-action: manipulation; }
.hidden { display: none !important; }

.app {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  min-width: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--text);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
}

.brand {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.create-form {
  display: grid;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.test-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.test-selector legend {
  width: 100%;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 800;
}

.test-selector label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #344258;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.test-selector input { width: 15px; min-height: 15px; margin: 0; accent-color: var(--blue); }
.compact-selector input { accent-color: var(--sidebar-accent); }
.test-selector small { color: var(--muted); font-size: 9px; }
.compact-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.compact-selector label { min-height: 31px; padding: 6px 8px; border-color: var(--line); color: var(--text); background: #fff; }
.compact-selector label:has(input:checked) { border-color: var(--sidebar-accent); color: var(--sidebar-accent-hover); background: var(--sidebar-accent-soft); }
.compact-selector legend { color: var(--text); }
.compact-selector small { color: var(--muted); }

label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}

input, select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  color: var(--text);
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input::placeholder { color: #94a0b1; }

input:focus, select:focus {
  outline: none;
  border-color: #4a79b8;
  box-shadow: 0 0 0 3px rgba(36, 93, 168, 0.14);
}

.btn, .icon-btn {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  color: #27354a;
  background: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.btn:hover, .icon-btn:hover {
  border-color: #94a3b7;
  background: #f8fafc;
}

.btn:active, .icon-btn:active { transform: translateY(1px); }
.btn svg, .icon-btn svg { width: 16px; height: 16px; }

.btn.primary {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.btn.primary:hover {
  border-color: var(--blue-hover);
  background: var(--blue-hover);
}

.icon-btn { width: 40px; padding: 0; }
.icon-btn.danger { color: var(--red); background: var(--red-soft); border-color: #edc1bd; }
.secondary-action { color: var(--blue); background: var(--blue-soft); border-color: #c7d8ef; }

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.sidebar-head-actions { display: flex; align-items: center; gap: 6px; }
.sidebar-head-actions .icon-btn { color: var(--muted); background: #fff; border-color: var(--line); }
.sidebar-head-actions .icon-btn:hover { background: var(--panel-soft); }
.sidebar-head-actions .icon-btn.is-archived { color: var(--amber); border-color: #e8c27e; background: var(--amber-soft); }

/* サイドバー下部の「アーカイブ一覧」を開くリンク（面接一覧の下に置く） */
.archive-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  padding: 9px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}

.archive-link:hover { border-color: var(--sidebar-accent); background: var(--sidebar-accent-soft); color: var(--sidebar-accent-hover); }
.archive-link svg { width: 14px; height: 14px; }

.interview-list {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.interview-empty { margin: 0; padding: 10px 2px; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* アーカイブ一覧（オーバーレイ内） */
.archive-list { display: grid; gap: 10px; }

.archive-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.archive-card-copy { min-width: 0; display: grid; gap: 3px; }
.archive-card-copy strong { font-size: 14px; }
.archive-card-copy span { color: var(--muted); font-size: 12px; font-weight: 700; }
.archive-card .btn { flex: 0 0 auto; }
.archive-empty { margin: 0; padding: 24px 4px; color: var(--muted); text-align: center; }

/* サイドバーは明るい背景なので、面接カードは白地でわずかに浮かせる。
   選択中は青枠と影で区別する（以前は選択中だけ白で、他は暗くて読めなかった）。 */
.interview-item {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #cdd6e2;
  border-radius: 9px;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.interview-item:hover { border-color: #9db3d0; background: #f6f9fd; }

/* 選択中は一目で分かるように、青い面＋左の太バー＋外周リングで強調する */
.interview-item.active {
  position: relative;
  padding-left: 20px;
  border-color: var(--blue);
  color: var(--text);
  background: var(--blue-soft);
  box-shadow: 0 0 0 3px rgba(36, 93, 168, 0.45), 0 10px 22px rgba(5, 15, 30, 0.3);
}

.interview-item.active::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--blue);
}

.interview-item.active strong { color: var(--blue-hover); }
.interview-item.active span { color: #4b6180; }

.interview-item strong,
.interview-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interview-item strong { margin-bottom: 4px; font-size: 13px; }
.interview-item span { color: var(--muted); font-size: 11px; }

.main {
  min-width: 0;
  padding: 24px clamp(18px, 2vw, 32px) 30px;
}

.topbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.topbar > div:first-child { min-width: 0; }

.eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

h2 {
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 22px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-meta {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.active-meta label { display: flex; align-items: center; gap: 8px; }
.active-meta select { min-height: 32px; width: 140px; padding-block: 4px; }

.sender-display { display: grid; gap: 3px; font-size: 12px; }
.sender-display span { color: var(--muted); font-weight: 700; }

.account-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 800;
}

.actions {
  max-width: min(650px, 48vw);
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}

.actions .btn { flex: 0 0 auto; min-height: 37px; padding-inline: 11px; font-size: 12px; }

.sync-status {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.empty {
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 30px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  background: var(--panel);
  text-align: center;
}

.status-banner {
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid #c9d9f0;
  border-radius: 9px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 13px;
  font-weight: 700;
}

.status-banner.error { color: var(--red); background: var(--red-soft); border-color: #edb8b3; }
.workspace { display: grid; gap: 15px; }

.test-settings-panel {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(420px, 1.3fr);
  align-items: center;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.test-settings-panel h3 { margin: 2px 0 3px; font-size: 15px; }
.test-settings-panel p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.active-test-selector { justify-content: flex-end; }
.active-test-selector label:has(input:checked) { color: var(--blue); border-color: #9db9df; background: var(--blue-soft); }
.active-test-selector label.readonly { cursor: default; }

.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px;
}

.summary-strip > div {
  position: relative;
  overflow: hidden;
  padding: 15px 17px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.summary-strip > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #7895bb;
}

.metric-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.summary-strip strong { font-size: 25px; line-height: 1.1; }

.pin-guide {
  padding: 17px 18px;
  border: 1px solid #ccd8e8;
  border-radius: 11px;
  background: #f8fbff;
}

.pin-guide-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.pin-guide-head h3 { margin: 0; font-size: 15px; }
.pin-guide-head span { color: var(--blue); font-size: 11px; font-weight: 800; white-space: nowrap; }

.pin-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px;
}

.pin-guide-grid > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.55;
}

.pin-guide-grid > div > span { min-width: 0; display: grid; gap: 1px; }
.pin-guide-grid small { color: var(--muted, #5f6e82); font-size: 11px; font-weight: 500; line-height: 1.5; }

.pin-symbol { flex: 0 0 27px; text-align: center; font-size: 19px; line-height: 1.25; }
.pin-symbol.grade-3 { color: var(--green); }
.pin-symbol.grade-2 { color: var(--blue); }
.pin-symbol.grade-1 { color: var(--amber); }
.pin-symbol.grade-0 { color: var(--red); }

.pin-ranking-rule {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid #dbe4f1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.pin-formula-title { margin: 0 0 8px; font-size: 12px; font-weight: 800; }

.pin-formula {
  display: grid;
  gap: 7px;
  margin-bottom: 9px;
}

.pin-formula > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid #dbe4f1;
  border-radius: 8px;
  background: var(--panel-soft);
}

.pin-formula-label {
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.pin-formula-body { min-width: 0; display: grid; gap: 2px; }
.pin-formula-body b { font-size: 12px; }
.pin-formula-body small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }

.pin-formula-note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}

.pin-formula-note:last-child { margin-bottom: 0; }

.candidate-tools {
  display: grid;
  grid-template-columns: auto minmax(400px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.candidate-tools-copy { min-width: 150px; }
.candidate-tools-copy h3 { margin: 0; font-size: 13px; }
.candidate-tools-copy p { margin: 3px 0 0; color: var(--muted); font-size: 10px; white-space: nowrap; }

.inline-form {
  display: grid;
  grid-template-columns: 120px minmax(145px, 0.8fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.inline-form input { min-width: 0; }

.table-shell {
  max-height: calc(100vh - 260px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  min-width: 1960px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 49px;
  color: #344258;
  background: #eef2f6;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

tbody tr:hover td { background: #f9fbfd; }
tbody tr:last-child td { border-bottom: 0; }
td:nth-child(4), th:nth-child(4), td:nth-child(5) { text-align: left; }

th:nth-child(1), td:nth-child(1) { width: 78px; }
th:nth-child(2), td:nth-child(2) { width: 64px; }
th:nth-child(3), td:nth-child(3) { width: 96px; }
th:nth-child(4), td:nth-child(4) { width: 250px; }
th:nth-child(5), td:nth-child(5) { width: 310px; }
th:nth-child(6), td:nth-child(6) { width: 88px; }
th:nth-child(7), td:nth-child(7) { width: 112px; }
th:nth-child(8), td:nth-child(8) { width: 126px; }
th:nth-child(9), td:nth-child(9) { width: 118px; }
th:nth-child(10), td:nth-child(10),
th:nth-child(12), td:nth-child(12) { width: 154px; }
th:nth-child(11), td:nth-child(11),
th:nth-child(13), td:nth-child(13) { width: 94px; }
th:nth-child(14), td:nth-child(14) { width: 106px; }
th:nth-child(15), td:nth-child(15) { width: 132px; }
th:nth-child(16), td:nth-child(16) { width: 52px; }

#score-table .candidate-delete-col,
#score-table .candidate-delete-cell {
  width: 64px;
  min-width: 64px;
  padding-inline: 8px;
  text-align: center;
}

#score-table .kraepelin-col { width: 310px; }
#score-table .subject-score-col { width: 118px; }
#score-table .pin-grade-col { width: 154px; }
#score-table .pin-time-col { width: 94px; }
#score-table .pin-rank-col { width: 106px; }
#score-table .behavior-col { width: 230px; }
#score-table .subject-rank-col { width: 132px; }

#score-table .candidate-delete-cell .remove-candidate {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--red);
  border-color: #edc1bd;
  background: var(--red-soft);
  box-shadow: none;
}

#score-table .candidate-delete-cell .remove-candidate:hover {
  border-color: #d69089;
  background: #f9d9d6;
}

#score-table .candidate-delete-cell .remove-candidate svg {
  flex: 0 0 auto;
}

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
}

td.sticky-col, tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 1px 0 0 var(--line);
}

tbody tr:hover td:first-child { background: #f9fbfd; }

.photo-cell { min-width: 0; }
.candidate-photo {
  display: block;
  width: 54px;
  height: 64px;
  margin: 0 auto 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
  background: #fff;
}

.photo-empty { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.photo-upload {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #c7d8ef;
  border-radius: 6px;
  color: var(--blue);
  background: var(--blue-soft);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.photo-upload input { display: none; }

.kraepelin-cell { min-width: 0; text-align: left; }
.kraepelin-cell .status-pill { margin-bottom: 3px; }
.kraepelin-link-slot { justify-content: flex-start; margin-top: 6px; }
.mini { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.comment-text { margin-top: 5px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.score-cell {
  min-width: 0;
  min-height: 90px;
  display: grid;
  grid-template-rows: 40px 28px 16px;
  align-content: start;
  gap: 3px;
}
.score-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.3;
  text-align: center;
}
.score-link-slot {
  min-height: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.score-input.done-input { border-color: #82c4ab; background: #f4fbf8; }
.score-input.missing-input { border-color: #e8c27e; background: #fffaf0; }

.pin-entry-cell { width: 100%; }
.pin-grade-select { min-width: 0; padding-inline: 9px 26px; font-size: 11px; font-weight: 800; }
.pin-grade-select.grade-3 { border-color: var(--green); background: var(--green-soft); }
.pin-grade-select.grade-2 { border-color: var(--blue); background: var(--blue-soft); }
.pin-grade-select.grade-1 { border-color: #c9913f; background: var(--amber-soft); }
.pin-grade-select.grade-0 { border-color: var(--red); background: var(--red-soft); }
.pin-time-input { width: 100%; text-align: right; }
.pin-time-input:disabled { color: var(--muted); background: #eef1f5; }

.rank-list {
  min-width: 118px;
  display: grid;
  gap: 3px;
  text-align: left;
  font-size: 10px;
  line-height: 1.35;
}
.rank-list span { display: flex; justify-content: space-between; gap: 7px; white-space: nowrap; }
.rank-list b { font-weight: 700; }
.mini-link { display: inline-flex; color: var(--blue); font-size: 10px; font-weight: 800; line-height: 1.3; text-decoration: none; }
td input { min-height: 34px; padding: 5px 7px; }
#score-table .candidate-name-input,
#score-table .score-input,
#score-table .pin-grade-select {
  display: block;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
}
.score-entry-table-cell {
  padding-top: 14px;
  vertical-align: top;
}
.cell-number { width: 100%; }
.cell-name {
  min-width: 168px;
  vertical-align: top;
}
.candidate-name-stack {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.candidate-name-input {
  width: 100%;
  min-width: 0;
}
.candidate-name-latin {
  font-family: var(--grvn-font);
  text-transform: uppercase;
}

.rank {
  min-width: 35px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--blue);
  background: var(--blue-soft);
  font-weight: 900;
}
.rank.top { color: var(--green); background: var(--green-soft); }

.status-pill {
  min-width: 76px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.link-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid #c7d8ef;
  border-radius: 6px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.ok { color: var(--green); background: var(--green-soft); }
.missing { color: var(--amber); background: var(--amber-soft); }
.danger-text { color: var(--red); font-weight: 800; }
.th-sub { color: var(--muted); font-size: 9px; }
.manual-entry-badge {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid #d8b06b;
  border-radius: 999px;
  color: #7a4b05;
  background: #fff4dd;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.35;
  vertical-align: 1px;
  white-space: nowrap;
}
.print-report { display: none; }

.link-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: auto;
  padding: 24px;
  background: rgba(15, 27, 45, 0.68);
  backdrop-filter: blur(3px);
}

.link-sheet-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 15, 30, 0.3);
}

.link-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.link-sheet-head h1 { margin: 4px 0 0; font-size: 22px; }
.link-sheet-description {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.link-sheet-actions { display: flex; gap: 8px; justify-content: flex-end; }
.link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.link-card { overflow: hidden; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; break-inside: avoid; }
.link-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.link-candidate { min-height: 68px; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 10px; }
.link-photo { width: 58px; height: 64px; border: 1px solid var(--line); border-radius: 6px; object-fit: cover; background: #f8fafc; }
.empty-photo::before { content: "写真"; width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.link-no { color: var(--blue); font-size: 12px; font-weight: 900; }
.link-candidate h2 { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.35; }
.candidate-ticket-label {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #c9d9f0;
  border-radius: 999px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.link-card-guide {
  margin: 9px 0 11px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #4f6075;
  background: #f2f5f9;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
}
.qr-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.qr-box { display: grid; justify-items: center; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); }
.qr-step { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; }
.qr-step span { width: 21px; height: 21px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); font-size: 10px; }
.qr-box img { width: 150px; height: 150px; }
.qr-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qr-action {
  min-height: 31px;
  border: 1px solid #c8d3df;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px;
  color: #344258;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.qr-action:hover { border-color: #94a3b7; background: #f8fafc; }
.qr-action.copied { color: var(--green); border-color: #9bcab8; background: var(--green-soft); }
.qr-action svg { width: 13px; height: 13px; }
.link-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.link-card-footer > span { color: var(--muted); font-size: 9.5px; font-weight: 700; }
.link-card-footer .btn { min-height: 32px; padding: 6px 9px; font-size: 10px; }

.behavior-cell { min-width: 150px; }
.behavior-cell .status-pill { margin-bottom: 7px; }
.behavior-detail-btn { min-height: 31px; padding: 5px 9px; font-size: 10px; }
.behavior-tendency-brief { max-width: 230px; margin: 5px 0 8px; color: #394a61; font-size: 10.5px; font-weight: 700; line-height: 1.5; }

.behavior-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--text);
  background: transparent;
  box-shadow: 0 24px 70px rgba(5, 15, 30, .3);
}
.behavior-dialog::backdrop { background: rgba(12, 23, 39, .62); }
.behavior-dialog-card { overflow: hidden; border-radius: 14px; background: #fff; }
.behavior-dialog-card > header { display: flex; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.behavior-dialog-card h2 { margin: 3px 0 0; font-size: 20px; }
.behavior-dialog-body { max-height: calc(100vh - 150px); overflow: auto; display: grid; gap: 10px; padding: 18px 22px 24px; }
.behavior-tendency-summary { padding: 14px 16px; border: 1px solid #b9cce6; border-radius: 9px; background: var(--blue-soft); }
.behavior-tendency-summary > strong { color: var(--blue); font-size: 12px; }
.behavior-tendency-summary p { margin: 5px 0 7px; font-size: 14px; font-weight: 800; line-height: 1.6; }
.behavior-tendency-summary small { color: var(--muted); font-size: 10px; font-weight: 700; }
.behavior-answer { padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); }
.behavior-answer h3 { margin: 0 0 6px; color: var(--blue); font-size: 12px; }
.behavior-answer p { margin: 3px 0; font-size: 12px; line-height: 1.55; }
.behavior-answer .analysis { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: #46566b; }

.print-behavior-section { margin-top: 12px; break-before: page; }
.print-behavior-section h2 { margin: 0 0 8px; font-size: 16px; }
.print-behavior-note { margin: 0 0 10px; color: #526177; font-size: 10px; }
.print-behavior-grid { display: grid; gap: 8px; }
.print-behavior-card { padding: 9px 11px; border: 1px solid #cfd7e2; border-radius: 6px; break-inside: avoid; }
.print-behavior-card h3 { margin: 0 0 5px; font-size: 12.5px; }
.print-behavior-card p { margin: 2px 0; font-size: 10.5px; line-height: 1.5; }
/* A4横だと1行が100文字を超えて読みづらいので、本文の行長を抑える */
.print-behavior-card .print-behavior-summary,
.print-behavior-card .pb-item { max-width: 195mm; }
.print-behavior-card .print-behavior-summary { margin: 5px 0 8px; padding: 6px 9px; border-left: 3px solid #245da8; background: #eef4fc; font-size: 11px; line-height: 1.55; }
.print-behavior-card .pb-item { margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid #e6eaf1; break-inside: avoid; }
.print-behavior-card .pb-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.print-behavior-card .pb-q { font-size: 10.5px; font-weight: 700; color: #1c2a40; }
.print-behavior-card .pb-choice { font-size: 10.5px; color: #14532d; }
.print-behavior-card .pb-choice strong { color: #14532d; }
.print-behavior-card .pb-analysis { font-size: 9.5px; color: #5d6b7c; }

@media (max-width: 1180px) {
  .app { grid-template-columns: 270px minmax(0, 1fr); }
  .topbar { grid-template-columns: 1fr; }
  .actions { max-width: 100%; }
  .candidate-tools { grid-template-columns: 1fr auto; }
  .candidate-tools-copy { grid-column: 1 / -1; }
  .candidate-tools-copy p { white-space: normal; }
}

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; padding: 20px; }
  .main { padding: 16px; }
  .topbar { padding: 15px; }
  h2 { font-size: 19px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-settings-panel { grid-template-columns: 1fr; }
  .active-test-selector { justify-content: flex-start; }
  .pin-guide-head { display: grid; }
  .pin-guide-head span { white-space: normal; }
  .pin-guide-grid { grid-template-columns: 1fr; }
  .candidate-tools { grid-template-columns: 1fr; gap: 10px; }
  .candidate-tools-copy { grid-column: auto; }
  .inline-form { grid-template-columns: 1fr; }
  .link-grid, .qr-pair { grid-template-columns: 1fr; }
  .link-sheet { padding: 12px; }
  .link-sheet-head { flex-direction: column; }
}

@media print {
  /* A4横。Safariは "A4 landscape" キーワードを解釈しないことがあるため実寸で指定する */
  @page { size: 297mm 210mm; margin: 10mm; }

  body {
    color: #162033;
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .app, .link-sheet, .auth-screen, .behavior-dialog { display: none; }
  .print-report {
    display: block;
    font-family: var(--grvn-font);
    /* 日本語は既定だとどこでも改行するため「判断」が「判／断」のように割れる。
       keep-all で句読点・記号でのみ改行し、それでも収まらない時だけ分割を許す。 */
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* テスト説明書はA4縦。結果表（A4横）とは別ページ設定にする */
  @page guide { size: 210mm 297mm; margin: 12mm; }
  .print-guide { display: none; }
  body.printing-guide .print-report { display: none; }
  body.printing-guide .print-guide { display: block; page: guide; }

  body.printing-guide .print-guide-lead {
    margin: 0 0 8px;
    color: #40506a;
    font-size: 10px;
    line-height: 1.6;
  }

  body.printing-guide .print-guide-grid { display: grid; gap: 7px; }

  body.printing-guide .print-guide-card {
    padding: 9px 11px;
    border: 1px solid #cfd7e2;
    border-left: 3px solid #245da8;
    border-radius: 5px;
    background: #fdfdfe;
    break-inside: avoid;
  }

  /* 番号は見出し（h2）の行に揃える。centerだと見出しと副題の中間に来てずれる */
  body.printing-guide .print-guide-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin-bottom: 5px;
  }

  body.printing-guide .print-guide-no {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #243b5a;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
  }

  body.printing-guide .print-guide-card h2 { margin: 0; font-size: 13px; line-height: 1.3; }
  body.printing-guide .print-guide-sub { margin: 1px 0 0; color: #5f6e82; font-size: 9.5px; font-weight: 700; }
  body.printing-guide .print-guide-card p { margin: 3px 0; font-size: 10px; line-height: 1.6; }
  body.printing-guide .print-guide-measure b {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #eaf1fb;
    color: #245da8;
    font-size: 9px;
  }
  body.printing-guide .print-guide-note { color: #5f6e82; font-size: 9px; }

  body.printing-links .print-report { display: none; }
  body.printing-links .link-sheet {
    display: block !important;
    position: static;
    inset: auto;
    overflow: visible;
    padding: 0;
    background: #fff;
  }
  body.printing-links .link-sheet-inner { width: 100%; margin: 0; padding: 0; box-shadow: none; }
  body.printing-links .link-sheet-head { display: none; }
  /* 全員分の印刷は 1人 = 1ページ に収める */
  body.printing-links .link-grid { display: block; }
  body.printing-links .link-card {
    display: block;
    width: 100%;
    min-height: 178mm;
    margin: 0;
    padding: 8mm 10mm;
    border: none;
    border-radius: 0;
    break-inside: avoid;
    break-after: page;
    page-break-after: always;
  }
  body.printing-links .link-card:last-child { break-after: auto; page-break-after: auto; }
  body.printing-links .link-card-head { align-items: center; }
  /* 写真を拡大するときは、写真列の幅も必ず同じだけ広げる（狭いままだと氏名に重なる） */
  body.printing-links .link-candidate { grid-template-columns: 30mm minmax(0, 1fr); gap: 6mm; }
  body.printing-links .link-photo { width: 30mm; height: 34mm; }
  body.printing-links .link-no { font-size: 12px; }
  body.printing-links .link-card-head h2 { font-size: 21px; }
  body.printing-links .candidate-ticket-label { font-size: 11px; }
  body.printing-links .link-card-guide { margin: 6mm 0; padding: 4mm; font-size: 11px; }
  body.printing-links .qr-pair {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6mm;
    margin-top: 4mm;
  }
  body.printing-links .qr-box { padding: 4mm; gap: 4mm; }
  body.printing-links .qr-step { font-size: 12px; }
  body.printing-links .qr-box img { width: 44mm; height: 44mm; }
  body.printing-links .qr-actions, body.printing-links .link-card-footer { display: none; }
  body.printing-single-link .link-grid { display: block; }
  body.printing-single-link .link-card { display: none; }
  body.printing-single-link .link-card.print-target {
    width: 172mm;
    min-height: 112mm;
    display: block;
    margin: 8mm auto 0;
    padding: 12mm;
    border: 1px solid #bdc7d4;
  }
  body.printing-single-link .link-card-guide { margin: 5mm 0; padding: 3mm; font-size: 10px; }
  body.printing-single-link .qr-pair { gap: 8mm; }
  body.printing-single-link .qr-box { padding: 5mm; }
  body.printing-single-link .qr-box img { width: 42mm; height: 42mm; }

  .print-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1d3555;
  }

  .print-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .print-brand > img {
    flex: 0 0 auto;
    width: 58px;
    height: auto;
  }

  .print-title-block { min-width: 0; }

  .print-label {
    margin-bottom: 2px;
    color: #5c6c80;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
  }

  .print-header h1 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: 0.04em; }
  .print-pin-legend {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    margin-bottom: 8px;
    border: 1px solid #bcc6d2;
    border-radius: 3px;
    color: #5f6e82;
    font-size: 8.5px;
    line-height: 1.3;
  }
  .print-pin-legend b {
    display: grid;
    gap: 1px;
    padding: 4px 7px;
    border-right: 1px solid #d2d9e1;
    color: #243b5a;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
  }
  .print-pin-legend b > i {
    color: #7c8899;
    font-size: 7px;
    font-style: normal;
    font-weight: 500;
  }
  .print-pin-legend span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 7px;
    border-right: 1px solid #d2d9e1;
    white-space: normal;
  }
  .print-pin-legend span:last-child { border-right: 0; }
  .print-pin-legend strong {
    color: #243b5a;
    font-size: 11px;
  }
  .print-pin-legend em {
    display: grid;
    gap: 1px;
    min-width: 0;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
  }
  .print-pin-legend em > i {
    color: #7c8899;
    font-size: 8px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
  }
  .print-document-meta { display: grid; justify-items: end; gap: 3px; color: #566579; font-size: 8px; }
  .print-document-meta span { padding: 2px 7px; border: 1px solid #aab4c1; border-radius: 999px; font-weight: 700; }
  .print-document-meta strong { font-size: 8px; }

  /* 「様」を付けるのは受入企業のみ。送り出し機関（AKANE等）は敬称なしでそのまま */
  .print-overview {
    display: grid;
    grid-template-columns: 0.9fr 1.8fr 1.3fr 0.7fr;
    margin-bottom: 8px;
    border: 1px solid #bcc6d2;
    border-radius: 3px;
  }

  .print-overview > div {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-right: 1px solid #d2d9e1;
  }
  .print-overview > div:last-child { border-right: 0; }
  .print-overview span { color: #657489; font-size: 7.5px; font-weight: 700; white-space: nowrap; }
  .print-overview strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

  .print-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .print-col-rank { width: 8.5%; }
  .print-col-candidate { width: 17%; }
  .print-col-kraepelin { width: 13.5%; }
  .print-col-score { width: 7%; }
  .print-col-pin { width: 12.5%; }
  .print-col-subject-rank { width: 11%; }
  .print-col-note { width: 16.5%; }

  .print-table th,
  .print-table td {
    position: static;
    padding: 5px 4px;
    border: 1px solid #c3ccd7;
    color: #182234;
    font-size: 10.5px;
    line-height: 1.35;
    text-align: center;
    vertical-align: middle;
  }

  .print-table th {
    height: auto;
    color: #fff;
    background: #243b5a;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .print-table tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .print-table tbody tr:nth-child(even) td { background: #f5f7fa; }
  .print-rank strong { font-size: 16.5px; font-weight: 800; white-space: nowrap; }
  /* 得点行は「（4/5科目）」付きで列幅を超えることがある。はみ出して罫線に重なるので折り返す */
  .print-rank span { display: block; margin-top: 2px; color: #4a5a70; font-size: 9.5px; font-weight: 700; white-space: normal; line-height: 1.3; overflow-wrap: break-word; }
  .print-rank .print-reference-note { color: #8a5a00; font-size: 8.5px; white-space: normal; }

  .print-candidate {
    text-align: left !important;
  }

  .print-candidate-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }

  /* 用紙が縦のまま印刷されて列幅が足りない場合でも、氏名が写真側へはみ出さないようにする */
  .print-candidate-copy { min-width: 0; overflow: hidden; }
  .print-candidate-no { display: block; margin-bottom: 1px; color: #52647c; font-size: 8.5px; font-weight: 700; white-space: nowrap; }
  .print-candidate strong {
    display: block;
    font-size: 10.5px;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  /* ラテン名は2段目に小さく。長いので語単位で折り返す */
  .print-candidate-latin {
    display: block;
    margin-top: 1px;
    color: #55637a;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
  }
  .print-photo { width: 36px; height: 44px; border: 1px solid #c1cad5; border-radius: 2px; object-fit: cover; background: #fff; }
  .print-photo-empty { display: grid; place-items: center; color: #8995a5; background: #f1f3f6; font-size: 5.5px; }

  .print-kraepelin { text-align: left !important; }
  .print-kraepelin strong { display: block; margin-bottom: 2px; font-size: 12.5px; }
  .print-kraepelin span { display: block; color: #5d6b7c; font-size: 9.5px; line-height: 1.3; }
  /* 100点の内訳（作業45／正確35／安定20）を根拠として併記する */
  .print-kraepelin-breakdown {
    display: flex !important;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    color: #40506a !important;
    font-size: 8.5px !important;
    font-weight: 700;
    line-height: 1.45;
  }
  .print-kraepelin-breakdown:first-of-type { margin-top: 2px; }
  .print-kraepelin-breakdown:last-of-type { margin-bottom: 3px; }
  .print-kraepelin-breakdown b { font-weight: 700; }
  .print-kraepelin-breakdown em { font-style: normal; white-space: nowrap; }
  .print-kraepelin-breakdown i { color: #8a97a8; font-style: normal; font-size: 7.5px; }
  .print-score strong { font-size: 13.5px; }
  .print-score span { color: #637084; font-size: 9px; white-space: nowrap; }
  .print-pin { text-align: left !important; }
  .print-pin span { display: block; font-size: 9px; white-space: nowrap; }
  .print-pin span + span { margin-top: 3px; }
  .print-subject-rank { text-align: left !important; }
  .print-subject-rank span {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: 9px;
    line-height: 1.4;
    white-space: nowrap;
  }
  .print-subject-rank b { font-weight: 400; }
  .print-note {
    text-align: left !important;
    overflow-wrap: anywhere;
    white-space: pre-line;
  }

  .print-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    color: #69778a;
    font-size: 6.5px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .print-footer span:last-child { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.reference-note { color: var(--amber); font-weight: 800; }