/* Wonder Hantei 共通スタイル（WonderWall標準: Meiryo UI） */
:root{
  --bg:#faf7fa;
  --surface:#ffffff;
  --surface2:#fdf3fd;
  --head:#f4c2f4;
  --head-text:#4a2249;
  --accent:#b0479c;
  --score-bg:#fff2a8;
  --score-text:#5c4a00;
  --text:#2b222b;
  --muted:#7a6d7a;
  --line:#e6d5e6;
  --ok:#1a7f37;
  --ok-bg:#e2f5e6;
  --good:#0b6bcb;
  --good-bg:#e3effb;
  --warn:#b26a00;
  --warn-bg:#fdf0d5;
  --bad:#c0392b;
  --bad-bg:#fbe4e1;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Meiryo UI","Meiryo","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:14px;
  line-height:1.55;
}
a{color:var(--accent)}

/* ヘッダーバー */
.topbar{
  background:var(--head);color:var(--head-text);
  padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.topbar .brand{font-weight:bold;font-size:16px;letter-spacing:.03em}
.topbar .brand small{font-weight:normal;font-size:11px;margin-left:6px;opacity:.8}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{
  color:var(--head-text);text-decoration:none;font-size:13px;font-weight:bold;
  padding:5px 10px;border-radius:6px;
}
.topbar nav a:hover{background:rgba(255,255,255,.45)}
.topbar nav a[aria-current="page"]{background:var(--surface);color:var(--accent)}
.topbar .spacer{flex:1}
.topbar .user{font-size:12px}
.topbar .logout{
  font-family:inherit;font-size:12px;border:1px solid var(--head-text);border-radius:6px;
  background:transparent;color:var(--head-text);padding:4px 10px;cursor:pointer;
}

.wrap{max-width:1080px;margin:0 auto;padding-block:20px 60px;padding-inline:16px;display:flex;flex-direction:column;gap:16px}
h1{font-size:19px;margin:0}
h2{font-size:15px;margin:0 0 8px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.card-head{background:var(--head);color:var(--head-text);font-weight:bold;padding:8px 14px;font-size:13px;letter-spacing:.04em}
.card-body{padding:12px 14px}

/* フォーム */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 14px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12px;color:var(--muted);font-weight:bold}
.field label .req{color:var(--bad);margin-left:2px}
input[type=text],input[type=password],input[type=date],input[type=datetime-local],select{
  border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);
  padding:8px 10px;font-size:14px;font-family:inherit;
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

.btn{
  font-family:inherit;font-size:14px;font-weight:bold;border-radius:7px;cursor:pointer;
  padding:9px 16px;border:1px solid var(--line);background:var(--surface);color:var(--text);
}
.btn:hover{border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-sm{font-size:12px;padding:5px 10px}
.btn-danger{color:var(--bad);border-color:var(--bad)}

.msg{font-size:13px}
.msg[data-kind="err"]{color:var(--bad)}
.msg[data-kind="ok"]{color:var(--ok)}

/* 表 */
table.list{width:100%;border-collapse:collapse;font-size:13px}
table.list th{
  background:var(--head);color:var(--head-text);text-align:left;padding:7px 9px;
  font-size:12px;white-space:nowrap;
}
table.list td{border-bottom:1px solid var(--line);padding:7px 9px;vertical-align:middle}
table.list tr:hover td{background:var(--surface2)}
.table-scroll{overflow-x:auto}
.judge-pill{font-weight:bold;border-radius:999px;padding:2px 10px;font-size:12px;white-space:nowrap}
.judge-pill[data-j="pass"]{background:var(--ok-bg);color:var(--ok)}
.judge-pill[data-j="fail"]{background:var(--bad-bg);color:var(--bad)}
.judge-pill[data-j="wip"]{background:var(--surface2);color:var(--muted)}

/* 採点画面 */
.rule-row{display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--line)}
.rule-row:first-child{border-top:none}
.rule-row dt{background:var(--surface2);padding:8px 10px;font-weight:bold;font-size:12px;display:flex;align-items:center}
.rule-row dd{margin:0;padding:8px 12px;white-space:pre-line;font-size:13px}
dl.rules{margin:0}

.cat{border:1px solid var(--line);border-radius:8px;background:var(--surface);margin-bottom:16px}
.cat-head{background:var(--head);color:var(--head-text);font-weight:bold;padding:7px 14px;font-size:13px;border-radius:8px 8px 0 0;letter-spacing:.06em}
.item{border-top:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.item:first-of-type{border-top:none}
.item-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.item-no{background:var(--surface2);border:1px solid var(--line);color:var(--accent);font-weight:bold;border-radius:5px;padding:1px 8px;font-size:12px;white-space:nowrap}
.item-title{font-weight:bold;font-size:14px;flex:1;min-width:200px}
.item-max{font-size:12px;color:var(--muted);white-space:nowrap}
.must{background:var(--bad-bg);color:var(--bad);font-size:11px;font-weight:bold;border-radius:5px;padding:1px 7px;white-space:nowrap}
.item-score{font-size:13px;font-weight:bold;background:var(--score-bg);color:var(--score-text);border-radius:5px;padding:1px 9px;white-space:nowrap}
.item-score[data-empty="1"]{background:var(--surface2);color:var(--muted);font-weight:normal}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.opt{
  text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--text);padding:9px 11px;cursor:pointer;font-family:inherit;font-size:12px;line-height:1.5;
  display:flex;flex-direction:column;gap:5px;
}
.opt:hover{border-color:var(--accent)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt .opt-top{display:flex;align-items:center;gap:8px;font-size:13px}
.opt .sym{font-weight:bold;font-size:16px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.opt .pts{font-weight:bold}
.opt .glabel{color:var(--muted);font-size:11px}
.opt .crit{color:var(--muted);white-space:pre-line}
.opt[data-g="◎"] .sym{color:var(--good);background:var(--good-bg)}
.opt[data-g="○"] .sym{color:var(--ok);background:var(--ok-bg)}
.opt[data-g="△"] .sym{color:var(--warn);background:var(--warn-bg)}
.opt[data-g="×"] .sym{color:var(--bad);background:var(--bad-bg)}
.opt[aria-pressed="true"]{border:2px solid var(--accent);background:var(--surface2);padding:8px 10px}
.opt[aria-pressed="true"] .crit{color:var(--text)}
.legend{font-size:11px;color:var(--muted)}

.footer{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:var(--surface);border-top:2px solid var(--head);padding:10px 16px;
}
.footer-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.total{font-size:15px}
.total b{font-size:24px;font-variant-numeric:tabular-nums}
.judge{font-weight:bold;border-radius:999px;padding:4px 14px;font-size:14px;white-space:nowrap}
.judge[data-j="pass"]{background:var(--ok-bg);color:var(--ok)}
.judge[data-j="fail"]{background:var(--bad-bg);color:var(--bad)}
.judge[data-j="wip"]{background:var(--surface2);color:var(--muted)}
.spacer{flex:1}

/* ログイン画面 */
.login-box{max-width:380px;margin:8vh auto 0;display:flex;flex-direction:column;gap:16px;padding-inline:16px}
.login-title{text-align:center}
.login-title .logo{font-size:22px;font-weight:bold;color:var(--accent)}
.login-title .sub{font-size:12px;color:var(--muted)}

@media (max-width:480px){
  .rule-row{grid-template-columns:1fr}
}