/* ==========================================================================
   集計・レポート作成システム
   画面の主役は「表」。表が読みやすいことを最優先に、周辺は静かにする。
   ========================================================================== */

:root {
  --paper: #f4f7f7;
  --panel: #ffffff;
  --ink: #1b2432;
  --ink-2: #4a5567;
  --muted: #78839a;
  --line: #dfe4ec;
  --line-2: #eef1f6;
  --primary: #0e9788;
  --primary-soft: #e6f7f4;
  --ok: #0f8f6b;
  --ok-soft: #e8f7f1;
  --warn: #b3731a;
  --warn-soft: #fdf4e5;
  --danger: #c0453f;
  --danger-soft: #fdf0ef;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(20, 32, 56, 0.06);
  /* 選択中の色を強調表示に使う。テーマ切替で上書きされる */
  --accent-grad: linear-gradient(180deg, #3ad3bd 0%, #0e9788 100%);
  --gnav-grad: linear-gradient(180deg, #34cdb7 0%, #0f9e8d 55%, #0b8478 100%);
  --jp: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "Segoe UI", sans-serif;
  --num: "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--jp);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.4; }

/* ---------------------------------------------------------------- 骨格 */

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

.rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.rail .brand { padding: 0 8px 18px; }
.rail .brand b { display: block; font-size: 14px; letter-spacing: .01em; }
.rail .brand span { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }

.rail-label { font-size: 10px; color: var(--muted); padding: 14px 8px 6px; }
.rail nav { display: grid; gap: 2px; }
.rail nav button {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px;
  width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--ink-2); padding: 9px 9px; border-radius: 8px; font-size: 12.5px;
}
.rail nav button:hover { background: var(--line-2); }
.rail nav button[aria-current="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.rail nav button .step-no {
  font-family: var(--num); font-size: 10px; color: var(--muted);
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 6px;
  display: grid; place-items: center;
}
.rail nav button[aria-current="true"] .step-no { border-color: #c2d0fb; color: var(--primary); background: #fff; }
.rail nav button.done .step-no { background: var(--ok-soft); border-color: #c9e9dd; color: var(--ok); }
.rail nav button:disabled { opacity: .42; cursor: not-allowed; }

.rail-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line-2); font-size: 10.5px; color: var(--muted); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 11px 22px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 40;
}
.topbar .ds-name { font-weight: 700; font-size: 13.5px; }
.topbar .ds-meta { font-size: 11px; color: var(--muted); }
.topbar .spacer { flex: 1; }

.view { padding: 22px; max-width: 1360px; width: 100%; margin: 0 auto; }
.view > header { margin-bottom: 16px; }
.view > header h1 { font-size: 20px; }
.view > header p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; max-width: 68ch; }

/* ---------------------------------------------------------------- 部品 */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 14px; }
.panel > h2 {
  font-size: 13px; padding: 13px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.panel > h2 .sub { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.panel > h2 .spacer { flex: 1; }
.panel .body { padding: 16px; }
.panel .body.tight { padding: 10px 12px; }

.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.grid-side { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; align-items: start; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

.btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--ink);
}
.btn:hover { border-color: #bcc7db; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: #274ecf; }
.btn.soft { background: var(--primary-soft); border-color: #d5e0ff; color: var(--primary); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.danger { color: var(--danger); border-color: #f0d3d1; background: var(--danger-soft); }
.btn.sm { padding: 4px 8px; font-size: 11px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

label.field { display: block; margin-bottom: 11px; }
label.field > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
input[type=text], input[type=number], select, textarea {
  width: 100%; border: 1px solid #d3dae5; border-radius: 8px; padding: 7px 9px;
  background: #fff; font-size: 12.5px; outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: #a8bcf7; box-shadow: 0 0 0 3px rgba(47,91,234,.09); }
textarea { resize: vertical; min-height: 90px; line-height: 1.85; }
input[type=file] { font-size: 12px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--line); background: #f4f6fa; color: var(--muted);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.chip.ok { background: var(--ok-soft); border-color: #c9e9dd; color: var(--ok); }
.chip.blue { background: var(--primary-soft); border-color: #d5e0ff; color: var(--primary); }
.chip.warn { background: var(--warn-soft); border-color: #f3e0bf; color: var(--warn); }
.chip.red { background: var(--danger-soft); border-color: #f0d3d1; color: var(--danger); }

.note {
  border: 1px solid #d9e3f8; background: #f7faff; border-radius: 9px;
  padding: 10px 12px; font-size: 12px; color: var(--ink-2); line-height: 1.75;
}
.note.warn { background: var(--warn-soft); border-color: #f0dcba; }
.note.danger { background: var(--danger-soft); border-color: #f0d3d1; }

.empty {
  border: 1px dashed #c9d2e0; border-radius: var(--radius); padding: 44px 24px;
  text-align: center; color: var(--muted); background: #fbfcfe;
}
.empty b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }

/* ---------------------------------------------------------------- 表 */

.table-wrap { overflow: auto; max-height: 62vh; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
table.data th, table.data td { padding: 6px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.data thead th {
  position: sticky; top: 0; z-index: 2; background: #f3f6fb; color: var(--ink-2);
  font-weight: 700; text-align: right; border-bottom: 1px solid var(--line);
}
table.data thead th:first-child, table.data tbody th { text-align: left; }
table.data tbody th {
  position: sticky; left: 0; background: #fff; font-weight: 500;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--line-2);
}
table.data td { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
table.data tr.pct td { color: var(--ink); font-weight: 600; }
table.data tr.n td { color: var(--muted); font-size: 11px; }
table.data tr.base th, table.data tr.base td { background: #fafbfe; font-weight: 700; color: var(--ink-2); }
table.data tr:hover th, table.data tr:hover td { background: #f8fbff; }
table.data td .sig { color: var(--primary); font-size: 10px; margin-left: 4px; font-family: var(--num); }
table.data td.hi { background: #eef3ff; }

/* ---------------------------------------------------------------- 取込 */

.dropzone {
  border: 2px dashed #c4cee0; border-radius: var(--radius); padding: 34px;
  text-align: center; background: #fbfcfe; transition: border-color .15s, background .15s;
}
.dropzone.over { border-color: var(--primary); background: #f4f8ff; }
.dropzone b { display: block; font-size: 14px; margin-bottom: 5px; }
.dropzone p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }

.plan-row { display: grid; grid-template-columns: 150px 1fr 110px 90px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.plan-row:last-child { border-bottom: 0; }
.plan-row .code { font-family: var(--num); font-size: 11.5px; font-weight: 700; }
.plan-row input[type=text] { padding: 5px 8px; font-size: 12px; }
.plan-row select { padding: 5px 7px; font-size: 11.5px; }

/* ---------------------------------------------------------------- 一覧 */

.card-list { display: grid; gap: 9px; }
.card {
  border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 12px 14px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center;
}
.card b { font-size: 13px; }
.card .meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.card.selectable { cursor: pointer; }
.card.selectable:hover { border-color: #b6c5ee; background: #fbfcff; }
.card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,91,234,.08); }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 9px; }
.pick {
  border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 11px 12px;
  text-align: left; display: block; width: 100%;
}
.pick:hover { border-color: #b6c5ee; background: #fbfcff; }
.pick.active { border-color: var(--primary); background: var(--primary-soft); }
.pick b { display: block; font-size: 12.5px; line-height: 1.5; }
.pick small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }

/* ---------------------------------------------------------------- グラフ */

.chart-shell { display: grid; grid-template-columns: minmax(0,1fr) 268px; gap: 14px; align-items: start; }
.chart-stage { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 16px; overflow: auto; }
.chart-stage canvas { display: block; max-width: 100%; }
.cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; }
.cand { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 9px; text-align: left; }
.cand:hover { border-color: #b6c5ee; }
.cand.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,91,234,.08); }
.cand canvas { width: 100%; height: auto; display: block; border-radius: 6px; background: #fff; }
.cand .cap { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.cand .cap b { font-size: 11.5px; }
.cand .cap small { color: var(--muted); font-size: 10.5px; }

.control { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.control .full { grid-column: 1 / -1; }
.swatches { display: flex; gap: 4px; }
.swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }

/* ---------------------------------------------------------------- 自由回答 */

.fa-list { display: grid; gap: 6px; max-height: 460px; overflow: auto; padding-right: 4px; }
.fa-item { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.fa-item.locked { border-color: #c9e9dd; background: #fbfefd; }
.fa-item p { margin: 0; font-size: 12px; line-height: 1.65; }
.fa-item select { padding: 5px 7px; font-size: 11.5px; }
.fa-item .hits { font-size: 10.5px; color: var(--ok); margin-top: 2px; }

.cat-row { display: grid; grid-template-columns: 150px minmax(0,1fr) 34px; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.cat-row:last-child { border-bottom: 0; }

.kw-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.kw { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 9px; font-size: 11px; color: var(--ink-2); }
.kw:hover { border-color: var(--primary); color: var(--primary); }

/* ---------------------------------------------------------------- レポート */

.report-editor { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; align-items: start; }
.report-out {
  border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 14px 16px;
  font-size: 13px; line-height: 2; white-space: pre-wrap; min-height: 120px;
}
mark.num-issue { background: var(--danger-soft); color: var(--danger); border-bottom: 2px solid var(--danger); border-radius: 3px; padding: 0 2px; font-weight: 700; }
mark.num-issue.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.issue-list { display: grid; gap: 7px; }
.issue { border: 1px solid #f0d3d1; background: var(--danger-soft); border-radius: 8px; padding: 9px 10px; font-size: 11.5px; line-height: 1.65; }
.issue.warn { border-color: #f0dcba; background: var(--warn-soft); }
.issue b { font-family: var(--num); }

/* ---------------------------------------------------------------- その他 */

.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  background: #1c2534; color: #fff; padding: 10px 14px; border-radius: 9px;
  font-size: 12px; opacity: 0; transform: translateY(8px); transition: .18s; pointer-events: none;
  max-width: 380px; line-height: 1.6;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { background: var(--danger); }

.modal-back { position: fixed; inset: 0; background: rgba(20,28,44,.42); display: grid; place-items: center; z-index: 150; padding: 20px; }
.modal { background: #fff; border-radius: 13px; width: min(720px, 100%); max-height: 86vh; overflow: auto; box-shadow: 0 24px 60px rgba(16,24,40,.24); }
.modal h3 { padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.modal .body { padding: 18px; }
.modal .foot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

.scroll-x { overflow-x: auto; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.mono { font-family: var(--num); font-variant-numeric: tabular-nums; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }

*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail nav { grid-template-columns: repeat(3, 1fr); display: grid; }
  .grid-side, .chart-shell, .report-editor, .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .view { padding: 14px; }
  .plan-row { grid-template-columns: 1fr 1fr; }
  .fa-item { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   グローバルナビ（マニュアルの画面構成に合わせた横並び）

   Analysis は上部に横帯のナビがあり、
   「アイテム処理 / 集計・レポート / データ作成」でグループ分けされている。
   操作担当者が迷わないよう、同じ並びと同じ区切りにしている。
   -------------------------------------------------------------------------- */

.gnav { position: sticky; top: 0; z-index: 60; background: var(--panel); border-bottom: 1px solid var(--line); }

.gnav-title {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line-2); background: #fbfcfc;
}
.gnav-title .spacer { flex: 1; }
.gnav-title select { width: auto; min-width: 210px; padding: 4px 8px; font-size: 11.5px; }

.gnav-groups { display: flex; padding: 0 8px; gap: 2px; }
.gnav-group { flex: 0 0 auto; text-align: center; font-size: 10px; color: var(--muted); padding: 4px 0 2px; }
.gnav-group b { font-weight: 700; display: block; border-bottom: 1px solid var(--line); padding-bottom: 2px; }

.gnav-bar { display: flex; padding: 0 8px 0; gap: 2px; background: var(--gnav-grad); }
.gnav-bar button {
  flex: 0 0 auto; border: 0; background: transparent; color: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 700; padding: 9px 15px; display: flex; align-items: center; gap: 6px;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.gnav-bar button:hover { background: rgba(255,255,255,.14); }
.gnav-bar button[aria-current="true"] { background: #fff; color: var(--primary); border-bottom-color: #fff; }
.gnav-bar button:disabled { opacity: .45; cursor: not-allowed; }
.gnav-bar button .ic { font-size: 13px; line-height: 1; }
.gnav-bar .sep { width: 1px; background: rgba(255,255,255,.32); margin: 7px 5px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   STEP / OPTION パネル（マニュアル 4.x・5.x の画面構成）
   -------------------------------------------------------------------------- */

.step {
  border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 8px; overflow: hidden;
}
.step > summary {
  list-style: none; cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; gap: 9px; background: #f7faf9; border-bottom: 1px solid transparent;
}
.step > summary::-webkit-details-marker { display: none; }
.step[open] > summary { border-bottom-color: var(--line); }
.step > summary::after { content: '＋'; margin-left: auto; color: var(--muted); font-size: 13px; }
.step[open] > summary::after { content: '−'; }
.step .tag {
  background: var(--primary); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 700;
}
.step .tag.opt { background: var(--muted); }
.step .step-body { padding: 14px; }
.step summary .hint { font-weight: 400; color: var(--muted); font-size: 11px; }

.exec-bar {
  position: sticky; bottom: 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  padding: 10px 14px; display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  margin: 14px -22px -22px; backdrop-filter: blur(4px);
}
.exec-bar .info { margin-right: auto; font-size: 11.5px; color: var(--muted); }

/* 実行対象アイテムの on/off 一覧（4.2） */
.itemsel { border: 1px solid var(--line); border-radius: 8px; max-height: 300px; overflow: auto; background: #fff; }
.itemsel .r {
  display: grid; grid-template-columns: 44px 1fr 90px 78px; gap: 8px; align-items: center;
  padding: 5px 10px; border-bottom: 1px solid var(--line-2); font-size: 12px;
}
.itemsel .r:last-child { border-bottom: 0; }
.itemsel .r:hover { background: #f7fbfa; }
.itemsel .r.off { opacity: .42; }
.itemsel .on-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; }
.itemsel .on-badge.on { background: var(--ok-soft); color: var(--ok); }
.itemsel .on-badge.off { background: #eef0f3; color: var(--muted); }

/* 絞り込み条件（4.4） */
.cond-row { display: grid; grid-template-columns: 74px 1fr 82px 1fr 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.cond-row select, .cond-row input { padding: 5px 7px; font-size: 11.5px; }
.expr-preview {
  font-family: var(--num); font-size: 11.5px; background: #f5f8f8; border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; color: var(--ink-2); word-break: break-all;
}
.expr-preview.bad { background: var(--danger-soft); border-color: #f0d3d1; color: var(--danger); }

/* 集計表のランキング・マーキング（5.2） */
table.data td .rank { font-size: 9.5px; color: var(--warn); margin-left: 3px; font-weight: 700; }
table.data td.mk2 { background: #d9efe9; }
table.data td.mk1 { background: #ecf7f4; }
table.data td.mkm1 { background: #fdf1f0; }
table.data td.mkm2 { background: #fbe3e1; }

textarea.script {
  font-family: Consolas, "Courier New", monospace; font-size: 12px; min-height: 240px;
  white-space: pre; tab-size: 12; line-height: 1.6;
}

.result-block { margin-bottom: 16px; }
.result-block h3 { font-size: 12.5px; margin-bottom: 6px; color: var(--ink-2); }

/* 配色：標準（ブルー）に切り替えたとき */
body[data-theme="standard"] {
  --primary: #2f5bea;
  --primary-soft: #eef3ff;
  --paper: #f5f7fa;
  --gnav-grad: linear-gradient(180deg, #4a72ee 0%, #2f5bea 55%, #2649c9 100%);
  --accent-grad: linear-gradient(180deg, #4a72ee 0%, #2f5bea 100%);
}

@media (max-width: 900px) {
  .gnav-groups { display: none; }
  .gnav-bar { overflow-x: auto; }
  .itemsel .r { grid-template-columns: 40px 1fr 70px; }
  .itemsel .r > :nth-child(4) { display: none; }
  .cond-row { grid-template-columns: 1fr 1fr; }
}