body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f5f5;
}
h1{ font-size: 20px; margin:0 0 12px; text-align:center; }
.wrap{ max-width: var(--max); margin: 0 auto; }

.wrap {
  max-width: 720px;
  margin: 20px auto;
  padding: 16px;
}

.topbar {
  padding: 12px 16px;
}

.back-btn {
  text-decoration: none;
  font-size: 14px;
  color: #1976d2;
}

.back-btn:hover {
  text-decoration: underline;
}

fieldset {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
  background: #fff;
}

textarea {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  resize: vertical;
  box-sizing: border-box;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
}

.result-table th,
.result-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.grade-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

/* 学年別カラー */
.grade-1 { background: #ffffff; color: #000; border: 1px solid #ccc; } /* 白 */
.grade-2 { background: #e53935; color: #fff; }  /* 赤 */
.grade-3 { background: #fdd835; color: #000; }  /* 黄 */
.grade-4 { background: #43a047; color: #fff; }  /* 緑 */
.grade-5 { background: #1e88e5; color: #fff; }  /* 青 */
.grade-6 { background: #000000; color: #fff; }  /* 黒 */
.grade-7 { background: #8e24aa; color: #fff; }  /* 中学以降 */

.grade-other {
  background: #eeeeee; /* 明るいグレー */
  color: #424242;       /* 濃いめグレー */
  border: 1px solid #bdbdbd;
}

.muted {
  font-size: 13px;
  color: #888;
  margin-top: 6px;
}