:root{
  --ground:#f6f4f3; --surface:#ffffff; --surface-2:#efecea; --line:#ddd7d4; --line-soft:#e9e4e1;
  --ink:#1d1a1b; --ink-2:#5d5557; --ink-3:#8d8386;
  --enji:#8f172a; --enji-soft:#f3e3e5; --enji-line:#d9a5ad; --on-accent:#ffffff;
  --pick:#0f5f56; --pick-soft:#dff0ec;
  --warn:#8a5a06; --warn-soft:#f6e9d2;
  --t-chusen:#8a5a06; --t-chusen-bg:#f7ecd9;
  --t-jimu:#3c5570;  --t-jimu-bg:#e3eaf1;
  --t-senko:#5c3b78; --t-senko-bg:#ece4f4;
  --t-senchaku:#0f5f56; --t-senchaku-bg:#dff0ec;
  --t-hon:#5d5557;   --t-hon-bg:#e9e4e1;
  --shadow:0 1px 2px rgba(29,26,27,.06),0 8px 24px -16px rgba(29,26,27,.3);
  --r:7px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#151314; --surface:#1e1b1c; --surface-2:#272324; --line:#3a3435; --line-soft:#2e2a2b;
  --ink:#ece7e6; --ink-2:#a99f9f; --ink-3:#7c7373;
  --enji:#e0798a; --enji-soft:#3a2126; --enji-line:#6b3b44; --on-accent:#1a1213;
  --pick:#63c6b5; --pick-soft:#12312d;
  --warn:#e0ab5a; --warn-soft:#3a2e18;
  --t-chusen:#e0ab5a; --t-chusen-bg:#3a2e18;
  --t-jimu:#93b3d4;  --t-jimu-bg:#1f2a36;
  --t-senko:#bb9ede; --t-senko-bg:#2b2136;
  --t-senchaku:#63c6b5; --t-senchaku-bg:#12312d;
  --t-hon:#a99f9f;   --t-hon-bg:#2e2a2b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --ground:#151314; --surface:#1e1b1c; --surface-2:#272324; --line:#3a3435; --line-soft:#2e2a2b;
  --ink:#ece7e6; --ink-2:#a99f9f; --ink-3:#7c7373;
  --enji:#e0798a; --enji-soft:#3a2126; --enji-line:#6b3b44; --on-accent:#1a1213;
  --pick:#63c6b5; --pick-soft:#12312d;
  --warn:#e0ab5a; --warn-soft:#3a2e18;
  --t-chusen:#e0ab5a; --t-chusen-bg:#3a2e18;
  --t-jimu:#93b3d4;  --t-jimu-bg:#1f2a36;
  --t-senko:#bb9ede; --t-senko-bg:#2b2136;
  --t-senchaku:#63c6b5; --t-senchaku-bg:#12312d;
  --t-hon:#a99f9f;   --t-hon-bg:#2e2a2b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Shippori Mincho",serif; font-weight:600; text-wrap:balance; margin:0}
[hidden]{display:none!important}

/* ---- setup ---- */
.setup{position:fixed; inset:0; background:var(--ground); overflow-y:auto; z-index:80;
  display:flex; align-items:flex-start; justify-content:center; padding:36px 20px 60px}
.setup-card{width:100%; max-width:640px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.setup-head{padding:24px 26px 18px; border-bottom:1px solid var(--line-soft)}
.setup-head h1{font-size:24px}
.setup-head p{margin:6px 0 0; font-size:13px; color:var(--ink-2)}
.setup-body{padding:6px 26px 4px; display:flex; flex-direction:column}
.fld{padding:15px 0; border-bottom:1px solid var(--line-soft)}
.fld:last-child{border-bottom:0}
.fld>.q{font-size:13px; font-weight:700; display:block; margin-bottom:8px}
.fld>.q em{font-style:normal; font-weight:400; font-size:11.5px; color:var(--ink-3); margin-left:7px}
.opts{display:flex; flex-wrap:wrap; gap:7px}
.opt{font:inherit; font-size:13px; padding:6px 13px; border:1px solid var(--line); border-radius:99px;
  background:var(--ground); color:var(--ink-2); cursor:pointer}
.opt[aria-pressed="true"]{background:var(--enji); border-color:var(--enji); color:var(--on-accent); font-weight:700}
.opt:focus-visible{outline:2px solid var(--enji); outline-offset:2px}
.numin{font:inherit; font-family:"IBM Plex Mono",monospace; font-size:14px; width:96px; padding:6px 9px;
  border:1px solid var(--line); border-radius:5px; background:var(--ground); color:var(--ink)}
.setup-foot{padding:16px 26px 22px; display:flex; align-items:center; gap:14px; border-top:1px solid var(--line-soft)}
.setup-note{font-size:11.5px; color:var(--ink-3); flex:1}

/* ---- shell ---- */
.wrap{max-width:1240px; margin:0 auto; padding:0 20px 72px}
header.top{border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:30}
.top-in{max-width:1240px; margin:0 auto; padding:13px 20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.brand{display:flex; flex-direction:column; gap:1px; margin-right:auto; min-width:0}
.brand h1{font-size:19px; letter-spacing:.02em}
.brand .sub{font-size:11px; color:var(--ink-3); letter-spacing:.04em}
.ctrl{display:flex; align-items:center; gap:7px}
.ctrl>.lab{font-size:10.5px; letter-spacing:.12em; color:var(--ink-3)}
.seg{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.seg button{font:inherit; font-size:13px; padding:5px 13px; border:0; background:transparent;
  color:var(--ink-2); cursor:pointer; border-right:1px solid var(--line-soft)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--enji); color:var(--on-accent); font-weight:700}
.seg button:focus-visible{outline:2px solid var(--enji); outline-offset:-2px}
.btn{font:inherit; font-size:12.5px; font-weight:700; padding:7px 15px; cursor:pointer;
  border:1px solid var(--ink); border-radius:5px; background:var(--ink); color:var(--ground)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.sm{padding:5px 12px; font-size:12px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--enji); outline-offset:2px}

/* ---- summary strip ---- */
.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:22px 0 26px}
.stat{background:var(--surface); padding:11px 14px}
.stat.accent{background:var(--enji-soft)}
.stat .k{font-size:10.5px; letter-spacing:.1em; color:var(--ink-3)}
.stat .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:23px; font-weight:600; line-height:1.25}
.stat .v small{font-size:11px; font-weight:400; color:var(--ink-3); margin-left:3px}
.stat .v.over{color:var(--enji)}

/* ---- grid ---- */
.panels{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:26px; align-items:start}
@media (max-width:980px){.panels{grid-template-columns:1fr}}
.sec-h{display:flex; align-items:baseline; gap:10px; margin:0 0 10px; flex-wrap:wrap}
.sec-h h2{font-size:16px}
.sec-h .hint{font-size:11.5px; color:var(--ink-3)}
table.tt{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
table.tt th,table.tt td{border:1px solid var(--line-soft); padding:0; vertical-align:top}
table.tt thead th{background:var(--surface-2); font-size:12px; font-weight:700; padding:7px 0;
  letter-spacing:.1em; color:var(--ink-2)}
table.tt tbody th{width:38px; background:var(--surface-2); font-family:"IBM Plex Mono",monospace;
  font-size:15px; font-weight:600; color:var(--ink-2)}
.cell{width:100%; min-height:76px; border:0; background:transparent; font:inherit; color:inherit;
  text-align:left; padding:6px 7px; cursor:pointer; display:block; position:relative}
.cell:hover{background:var(--surface-2)}
.cell:focus-visible{outline:2px solid var(--enji); outline-offset:-2px}
.cell[data-sel="1"]{background:var(--pick-soft)}
.cell[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--enji)}
.cell .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; display:flex; flex-wrap:wrap; gap:0 5px; line-height:1.5}
.cell .n .req{color:var(--enji); font-weight:600; white-space:nowrap}
.cell .empty{font-size:11px; color:var(--ink-3)}
.cell .picked{font-size:12.5px; font-weight:700; line-height:1.4; color:var(--pick); margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.cell .picked .cd{display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  font-weight:400; color:var(--ink-3)}
@media (max-width:640px){
  .cell{min-height:60px; padding:5px 4px}
  .cell .n{font-size:10.5px; gap:0 4px}
  .cell .n .unit{display:none}
  .cell .picked{font-size:11.5px; -webkit-line-clamp:2}
  table.tt tbody th{width:26px; font-size:13px}
  .strip{grid-template-columns:repeat(2,1fr)}
}
.legend{margin-top:9px; font-size:11px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:4px 12px}

/* ---- side panel ---- */
.side{position:sticky; top:76px; max-height:calc(100vh - 96px); display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
@media (max-width:980px){.side{position:static; max-height:none}}
.side-h{padding:13px 15px 11px; border-bottom:1px solid var(--line-soft)}
.side-h h2{font-size:16px}
.side-h .meta{font-size:11.5px; color:var(--ink-3); margin-top:1px}
.filters{padding:10px 15px; border-bottom:1px solid var(--line-soft); display:flex; flex-direction:column; gap:8px}
.filters input[type=search],.filters select{font:inherit; font-size:13px; width:100%; padding:6px 9px;
  border:1px solid var(--line); border-radius:5px; background:var(--ground); color:var(--ink)}
.filters .row{display:flex; gap:8px}
.check{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:6px; cursor:pointer}
.list{overflow-y:auto; padding:6px 0 4px; flex:1}
.item{padding:9px 15px; border-bottom:1px solid var(--line-soft); display:flex; gap:10px; align-items:flex-start}
.item:last-child{border-bottom:0}
.item.on{background:var(--pick-soft)}
.item.req{box-shadow:inset 3px 0 0 var(--enji)}
.item .body{min-width:0; flex:1}
.item .t{font-size:13.5px; font-weight:700; line-height:1.45}
.item .r2{font-size:11.5px; color:var(--ink-2); margin-top:1px; display:flex; flex-wrap:wrap; gap:4px 9px}
.item .r3{margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.item .note{font-size:11px; color:var(--warn); background:var(--warn-soft); border-radius:4px;
  padding:4px 7px; margin-top:6px; line-height:1.55}
.item .ov{font-size:11px; color:var(--ink-3); margin-top:5px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tag{font-size:10.5px; letter-spacing:.04em; padding:1.5px 6px; border-radius:3px; font-weight:700; white-space:nowrap}
.tag.chusen{color:var(--t-chusen); background:var(--t-chusen-bg)}
.tag.jimu{color:var(--t-jimu); background:var(--t-jimu-bg)}
.tag.senko{color:var(--t-senko); background:var(--t-senko-bg)}
.tag.senchaku{color:var(--t-senchaku); background:var(--t-senchaku-bg)}
.tag.hon{color:var(--t-hon); background:var(--t-hon-bg)}
.tag.field{color:var(--enji); background:var(--enji-soft)}
.tag.mine{color:var(--on-accent); background:var(--enji)}
.tag.other{color:var(--ink-3); background:var(--surface-2)}
.code{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
a.syl{font-size:11.5px; color:var(--enji); text-decoration:none; border-bottom:1px solid var(--enji-line)}
a.syl:hover{border-bottom-color:var(--enji)}
.pickbtn{flex:0 0 auto; font:inherit; font-size:11.5px; font-weight:700; padding:4px 10px; cursor:pointer;
  border:1px solid var(--line); border-radius:5px; background:var(--ground); color:var(--ink-2)}
.pickbtn:hover{border-color:var(--enji); color:var(--enji)}
.item.on .pickbtn{background:var(--pick); border-color:var(--pick); color:var(--surface)}
.empty-state{padding:26px 16px; text-align:center; color:var(--ink-3); font-size:12.5px}

/* ---- report ---- */
section.report{margin-top:34px; border-top:2px solid var(--ink); padding-top:20px}
.report-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin-bottom:4px}
.report-head h2{font-size:19px}
.report-head p{margin:0; font-size:12px; color:var(--ink-2); flex:1 1 260px}
.slots{columns:270px; column-gap:28px; margin-top:16px}
.slot{break-inside:avoid; margin:0 0 18px}
.slot h3{font-size:13.5px; display:flex; align-items:baseline; gap:8px; padding-bottom:4px;
  border-bottom:1px solid var(--enji-line)}
.slot h3 .cnt{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  font-weight:400; margin-left:auto}
.slot ul{list-style:none; margin:6px 0 0; padding:0}
.slot li{font-size:12.5px; line-height:1.65; padding:1px 0; display:flex; gap:6px}
.slot li .dot{color:var(--enji-line); flex:0 0 auto}
.slot li.req .dot{color:var(--enji)}
.slot li.req>span:last-child{font-weight:700}
.slot li .x{font-size:10.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.caution{margin-top:26px; border:1px solid var(--warn); background:var(--warn-soft);
  border-radius:var(--r); padding:13px 15px}
.caution h3{font-size:13.5px; color:var(--warn); font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700}
.caution p{margin:5px 0 0; font-size:12px; color:var(--ink-2)}
.caution ul{margin:8px 0 0; padding-left:18px; font-size:12px; color:var(--ink-2)}
footer{margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---- 修得済み科目 ---- */
.setup-card.wide{max-width:820px}
.cr-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:13px 26px; border-bottom:1px solid var(--line-soft)}
.cr-tools input[type=search]{font:inherit; font-size:13px; flex:1 1 200px; padding:6px 10px;
  border:1px solid var(--line); border-radius:5px; background:var(--ground); color:var(--ink)}
.cr-sum{font-size:12px; color:var(--ink-2); font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; margin-left:auto}
.cr-paste{padding:14px 26px; border-bottom:1px solid var(--line-soft); background:var(--surface-2)}
.cr-paste p{margin:0 0 8px; font-size:12px; color:var(--ink-2)}
.cr-paste textarea{font:inherit; font-size:12.5px; width:100%; padding:8px 10px; resize:vertical;
  border:1px solid var(--line); border-radius:5px; background:var(--ground); color:var(--ink)}
.cr-paste-foot{display:flex; gap:9px; align-items:center; margin-top:9px}
.cr-paste-foot>span{font-size:12px; color:var(--ink-2); margin-right:auto}
.cr-list{max-height:52vh; overflow-y:auto; padding:4px 0}
.cr-group{padding:10px 26px 4px}
.cr-group>h3{font-size:12px; letter-spacing:.08em; color:var(--ink-3);
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700}
.cr-row{display:flex; align-items:center; gap:10px; padding:5px 26px; border-bottom:1px solid var(--line-soft)}
.cr-row:hover{background:var(--surface-2)}
.cr-row label{display:flex; align-items:center; gap:8px; flex:1; min-width:0; cursor:pointer; font-size:13px}
.cr-row .cd{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.cr-row.done label{color:var(--ink-3); text-decoration:line-through}
.cr-row .dup{font-size:10.5px; color:var(--t-senchaku); background:var(--t-senchaku-bg);
  padding:1px 6px; border-radius:3px; white-space:nowrap}
.retake{font:inherit; font-size:11px; font-weight:700; padding:3px 9px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); border-radius:99px; background:var(--ground); color:var(--ink-3)}
.retake[aria-pressed="true"]{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}

/* 取れない科目 */
.item.blocked{opacity:.5}
.item.blocked .t{text-decoration:line-through}
.tag.block{color:var(--on-accent); background:var(--ink-3)}
.tag.retake{color:var(--warn); background:var(--warn-soft); border:0; padding:1.5px 6px;
  border-radius:3px; font-weight:700; font-size:10.5px; cursor:default}

/* 候補パネルの分野見出し */
.grp h3{font-family:"Zen Kaku Gothic New",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--enji); background:var(--enji-soft);
  padding:5px 15px; display:flex; align-items:baseline; gap:8px;
  position:sticky; top:0; z-index:2}
.grp h3 span{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  font-weight:400; letter-spacing:0; color:var(--ink-2); font-variant-numeric:tabular-nums}

.opt-grp{display:flex; align-items:baseline; gap:10px; margin-bottom:7px; flex-wrap:wrap}
.opt-grp>span{font-size:11px; color:var(--ink-3); flex:0 0 122px}
.opt-grp .opts{flex:1}
.opt.sm{padding:4px 11px; font-family:"IBM Plex Mono",monospace; font-size:12px}
.fld-note{margin:0; font-size:12px; color:var(--ink-3)}

/* 保存できないときの案内 */
.savebar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px;
  padding:11px 15px; border:1px solid var(--warn); background:var(--warn-soft);
  border-radius:var(--r); font-size:12.5px; color:var(--ink)}
.savebar span{flex:1 1 300px; line-height:1.65}
.savebar b{color:var(--warn)}

/* ---- スクショ置き場 ---- */
.cr-shots{padding:14px 26px; border-bottom:1px solid var(--line-soft); background:var(--surface-2)}
.cr-shots p{margin:0 0 10px; font-size:12px; color:var(--ink-2); line-height:1.7}
.cr-shots p b{color:var(--warn)}
.drop{display:flex; align-items:center; justify-content:center; min-height:72px; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:var(--r); background:var(--ground);
  font-size:12.5px; color:var(--ink-3); text-align:center; padding:12px}
.drop.over{border-color:var(--enji); color:var(--enji); background:var(--enji-soft)}
.shots{display:flex; flex-wrap:wrap; gap:9px; margin-top:10px}
.shot{position:relative; width:118px; border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:var(--surface)}
.shot img{display:block; width:100%; height:80px; object-fit:cover; cursor:zoom-in}
.shot button{position:absolute; top:3px; right:3px; width:20px; height:20px; line-height:1; padding:0;
  border:0; border-radius:50%; background:rgba(0,0,0,.62); color:#fff; cursor:pointer; font-size:13px}
.shot.big{width:100%}
.shot.big img{height:auto; max-height:60vh; object-fit:contain; cursor:zoom-out}

/* ---- 取り込みの確認表 ---- */
.review{margin-top:12px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); max-height:300px; overflow-y:auto}
.review table{width:100%; border-collapse:collapse; font-size:12.5px}
.review th,.review td{border-bottom:1px solid var(--line-soft); padding:5px 9px; text-align:left}
.review th{background:var(--surface-2); font-size:11px; color:var(--ink-3); position:sticky; top:0}
.review td.g{font-family:"IBM Plex Mono",monospace; font-weight:600}
.review td.g[data-f="1"]{color:var(--warn)}
.review tr.off{opacity:.4}
.review .miss{color:var(--ink-3); font-size:11.5px}

/* ---- 成績の傾向 ---- */
.trend{padding:14px 26px; border-top:1px solid var(--line-soft)}
.trend h3{font-family:"Zen Kaku Gothic New",sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; margin-bottom:8px}
.trend .bars{display:flex; flex-direction:column; gap:7px}
.trend .bar{display:flex; align-items:center; gap:10px; font-size:12px}
.trend .bar>.k{flex:0 0 82px; color:var(--ink-2)}
.trend .bar>.t{flex:1; height:9px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.trend .bar>.t i{display:block; height:100%; background:var(--enji); border-radius:99px}
.trend .bar>.v{flex:0 0 96px; text-align:right; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.trend .none{font-size:12px; color:var(--ink-3)}
.trend .tea{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px}
.trend .tea span{font-size:11.5px; padding:2px 8px; border-radius:99px;
  background:var(--surface-2); color:var(--ink-2)}

/* 相性の目印 */
.item .aff{font-size:11px; margin-top:5px; padding:3px 7px; border-radius:4px; line-height:1.6}
.item .aff.up{color:var(--pick); background:var(--pick-soft)}
.item .aff.down{color:var(--warn); background:var(--warn-soft)}
.item .aff span{color:var(--ink-2); margin-left:6px}