:root {
  --jh-primary: #2c6e49;
  --jh-primary-dark: #1e4d33;
  --jh-bg: #f6f7f5;
  --jh-border: #dde2dc;
  --jh-danger: #c0392b;
  --jh-warn: #b8860b;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--jh-bg); color: #222; }
a { color: var(--jh-primary-dark); }
.jh-header { background: var(--jh-primary); color: #fff; padding: 0.6em 1em; }
.jh-header-inner { display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.jh-brand { font-weight: bold; font-size: 1.1em; }
.jh-nav { display: flex; gap: 0.6em; flex: 1; flex-wrap: wrap; }
.jh-nav a {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 0.45em 1em;
  font-size: 0.92em;
  transition: background 0.15s;
}
.jh-nav a:hover { background: rgba(255, 255, 255, 0.32); text-decoration: none; }
.jh-user { opacity: 0.9; }
.jh-logout {
  color: #fff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  padding: 0.45em 1em;
  font-size: 0.92em;
  transition: background 0.15s;
}
.jh-logout:hover { background: rgba(0, 0, 0, 0.32); text-decoration: none; }
.jh-main { max-width: 1100px; margin: 1.5em auto; padding: 0 1em 3em; }
.jh-footer { text-align: center; color: #888; padding: 2em 0; font-size: 0.85em; }
h1 { font-size: 1.4em; border-bottom: 2px solid var(--jh-border); padding-bottom: 0.3em; }
h2 { font-size: 1.15em; margin-top: 1.6em; }
table { border-collapse: collapse; width: 100%; background: #fff; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
th, td { border: 1px solid var(--jh-border); padding: 0.5em 0.7em; text-align: left; font-size: 0.95em; }
th { background: #eef2ec; }
.jh-card { background: #fff; border: 1px solid var(--jh-border); border-radius: 6px; padding: 1.2em; margin-bottom: 1.2em; }
.jh-btn { display: inline-block; background: var(--jh-primary); color: #fff; border: none; padding: 0.55em 1.2em; border-radius: 4px; cursor: pointer; font-size: 0.95em; text-decoration: none; margin: 0.25em 0.4em 0.25em 0; }
.jh-btn:hover { background: var(--jh-primary-dark); }
.jh-btn-danger { background: var(--jh-danger); }
.jh-btn-sub { background: #888; }
.jh-btn:disabled { background: #ccc; cursor: not-allowed; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=email], select, textarea {
  padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; width: 100%; max-width: 360px; min-width: 0;
}
/* テーブル内の狭い数値・短文入力欄も、スマホで打鍵した文字が見える最低限の幅を確保する */
td input[type=number] { min-width: 90px; }
td input[type=text] { min-width: 110px; }
label { display: block; margin: 0.6em 0 0.2em; font-weight: bold; font-size: 0.92em; }
.jh-flash { padding: 0.8em 1em; border-radius: 4px; margin-bottom: 1em; }
.jh-flash-ok { background: #e3f3e6; color: #1e4d33; border: 1px solid #b6dcbf; }
.jh-flash-error { background: #fbe7e5; color: var(--jh-danger); border: 1px solid #f1b8b1; }
.jh-badge { display: inline-block; padding: 0.15em 0.6em; border-radius: 10px; font-size: 0.82em; }
.jh-badge-draft { background: #eee; color: #666; }
.jh-badge-submitted { background: #fff4d6; color: var(--jh-warn); }
.jh-badge-reviewed { background: #dcebff; color: #2255aa; }
.jh-badge-returned { background: #fbe7e5; color: var(--jh-danger); }
.jh-badge-published { background: #e3f3e6; color: var(--jh-primary-dark); }
.jh-badge-leave { background: #efe3fb; color: #6b3fa0; }
.jh-note { color: #666; font-size: 0.88em; }
.jh-confidential { background: #fff8e1; border: 1px dashed #d8a11c; padding: 0.6em 1em; font-size: 0.9em; color: #7a5300; border-radius: 4px; margin: 0.8em 0; }
.jh-question-row { padding: 0.6em 0; border-bottom: 1px solid #eee; }
.jh-question-cat { background: #f0f4ee; font-weight: bold; padding: 0.5em 0.8em; margin-top: 1em; }
.jh-login-box { max-width: 380px; margin: 4em auto; background: #fff; padding: 2em; border-radius: 8px; border: 1px solid var(--jh-border); }
.jh-score-box { position: sticky; top: 0.5em; z-index: 5; background: #eef6f0; border: 2px solid var(--jh-primary); font-size: 1.1em; }
#jh-live-score, #jh-live-rank { font-weight: bold; color: var(--jh-primary-dark); font-size: 1.2em; }
.jh-warn-box { background: #fff4d6; border: 1px solid #e0c469; padding: 0.8em 1em; font-size: 0.88em; border-radius: 4px; margin-top: 1em; }
.jh-self-answer { margin: 0.3em 0; font-size: 0.92em; }
.jh-badge-self-yes { background: #dcebff; color: #2255aa; font-weight: bold; }
.jh-badge-self-no { background: #eee; color: #666; font-weight: bold; }
.jh-eval-label { display: block; font-size: 0.85em; color: #666; margin-top: 0.4em; }
.jh-question-row.jh-diff { border-left: 4px solid var(--jh-warn); padding-left: 0.6em; background: #fffdf5; }
.jh-question-row.jh-missing { border-left: 4px solid var(--jh-danger); padding-left: 0.6em; background: #fdf1f0; }
.jh-missing-label { color: var(--jh-danger); font-weight: bold; font-size: 0.85em; }
.jh-accordion { background: #fff; border: 1px solid var(--jh-border); border-radius: 6px; margin-bottom: 1.2em; }
.jh-accordion > summary { padding: 1.2em; cursor: pointer; font-weight: bold; list-style: none; }
.jh-accordion > summary::-webkit-details-marker { display: none; }
.jh-accordion > summary::before { content: "▶ "; font-size: 0.85em; }
.jh-accordion[open] > summary::before { content: "▼ "; }
.jh-accordion[open] > summary { border-bottom: 1px solid var(--jh-border); }
.jh-accordion > .jh-accordion-body { padding: 0 1.2em 1.2em; }