/* style.css — 加須市版シムシティ 共有スタイル（ダーク×ゴールド／KAIDOWALK と同系統） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0a0e14; min-height: 100vh; color: #e6edf3;
  font-family: 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  padding: 20px 14px 64px; line-height: 1.6;
}
.wrap { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.topbar { text-align: center; }
.topbar .marker { font-size: 12px; letter-spacing: .3em; color: #c9a96e; opacity: .8; }
.topbar h1 { color: #c9a96e; font-size: 1.3rem; margin-top: 6px; text-shadow: 0 0 24px rgba(201,169,110,0.4); line-height: 1.5; }
.topbar .sub { font-size: 12px; opacity: .75; margin-top: 8px; }

.card {
  background: #0e131b; border: 1px solid #232a35; border-radius: 14px; padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.card > h2 {
  color: #c9a96e; font-size: 0.98rem; letter-spacing: .1em; margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.card > h2 .num {
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
  background: #c9a96e; color: #0a0e14; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.card > .desc { font-size: 13px; opacity: .8; margin: 4px 0 14px; }

label { display: block; font-size: 13px; color: #c9d2e0; margin: 12px 0 5px; }
input[type=text], textarea, select {
  width: 100%; padding: 10px 13px; background: #161b22; border: 1px solid #30363d;
  border-radius: 8px; color: #e6edf3; font-size: 0.9rem; outline: none; font-family: inherit;
  transition: border-color .2s;
}
input:focus, textarea:focus, select:focus { border-color: #c9a96e; }
textarea { resize: vertical; min-height: 64px; }

button, .btn {
  display: inline-block; padding: 12px 22px; background: #c9a96e; border: none; border-radius: 8px;
  color: #0a0e14; font-weight: bold; cursor: pointer; font-size: 0.9rem; text-decoration: none;
  transition: filter .2s; white-space: nowrap; text-align: center;
}
button:hover, .btn:hover { filter: brightness(1.08); }
button:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; border: 1px solid #30363d; color: #c9d2e0; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ── 年次バー ───────────────────────────────── */
.yearbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.yearbar .y { font-size: 2rem; font-weight: 800; color: #c9a96e; line-height: 1; }
.yearbar .t { font-size: 12px; color: #8b94a3; }

/* ── KPIタイル（数値が主役。グラフにしない） ──────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; margin-top: 12px; }
.kpi { background: #06090f; border: 1px solid #232a35; border-radius: 10px; padding: 11px 12px; }
.kpi .k { font-size: 11px; color: #8b94a3; display: block; }
.kpi .v { font-size: 1.25rem; font-weight: 700; color: #e6edf3; line-height: 1.3; }
.kpi .v .u { font-size: 11px; color: #8b94a3; font-weight: 400; margin-left: 2px; }
.kpi .d { font-size: 11px; margin-top: 2px; color: #8b94a3; }
.kpi .d.up { color: #6fd6a0; }
.kpi .d.down { color: #e0707a; }

/* ── 街の俯瞰（3D） ─────────────────────────── */
.hero { padding: 12px; }
.scene-wrap { position: relative; }
.scene3d { width: 100%; height: 460px; border-radius: 12px; overflow: hidden; border: 1px solid #232a35;
  background: linear-gradient(#9fc0e8, #cfe0f2); cursor: grab; }
.scene3d:active { cursor: grabbing; }
.scene3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* 3Dに重ねるHUD（経済シミュレーションだと一目で分かるように） */
.hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; pointer-events: none; }
.hud-title { font-size: 12px; font-weight: bold; color: #fff; background: rgba(10,14,20,0.55);
  padding: 4px 10px; border-radius: 999px; text-shadow: 0 1px 2px #000; }
.hud-chip { font-size: 12px; color: #fff; background: rgba(10,14,20,0.55); padding: 4px 9px; border-radius: 999px; }
.hud-chip b { color: #ffe08a; margin-left: 2px; }

/* 流れの凡例（何が流れているのか分かるように） */
.flowkey { position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px;
  pointer-events: none; font-size: 11px; color: #fff; }
.flowkey span { background: rgba(10,14,20,0.55); padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; }
.flowkey .fdot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.flowkey .fdot.people { background: #2fb8e6; }
.flowkey .fdot.money { background: #ffcf4a; }

.city-canvas { width: 100%; display: block; border-radius: 12px; border: 1px solid #232a35; background: #0a0e14; }

/* ── グラフ（施策あり＝強調 / 施策なし＝文脈） ────── */
.chart-wrap { position: relative; margin-top: 12px; }
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid { stroke: #232a35; stroke-width: 1; }
.chart .axis-t { fill: #8b94a3; font-size: 10px; }
.chart .s-actual { stroke: #6fd6a0; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .s-base { stroke: #8b94a3; stroke-width: 2; fill: none; stroke-dasharray: 5 4; stroke-linecap: round; }
.chart .dot-actual { fill: #6fd6a0; stroke: #0e131b; stroke-width: 2; }
.chart .dot-base { fill: #8b94a3; stroke: #0e131b; stroke-width: 2; }
.chart .lbl { font-size: 11px; font-weight: 700; }
.chart .lbl-actual { fill: #6fd6a0; }
.chart .lbl-base { fill: #8b94a3; }
.chart .hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.chart .cross { stroke: #c9a96e; stroke-width: 1; stroke-opacity: .5; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #c9d2e0; margin-top: 10px; }
.legend .li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 16px; height: 0; border-top: 2px solid #6fd6a0; display: inline-block; }
.legend .sw.base { border-top-style: dashed; border-top-color: #8b94a3; }

.tip {
  position: absolute; pointer-events: none; display: none; z-index: 5;
  background: rgba(6,9,15,0.96); border: 1px solid #30363d; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: #e6edf3; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.tip .ty { color: #c9a96e; font-weight: 700; display: block; margin-bottom: 3px; }
.tip .tr { display: flex; justify-content: space-between; gap: 14px; }
.tip .tr .tk { color: #8b94a3; }

table.data { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
table.data th, table.data td { border-bottom: 1px solid #232a35; padding: 6px 8px; text-align: right; }
table.data th { color: #8b94a3; font-weight: 600; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data td.gain { color: #6fd6a0; }
table.data td.loss { color: #e0707a; }

/* ── 3択カード ─────────────────────────────── */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.opt {
  background: #06090f; border: 1px solid #30363d; border-radius: 12px; padding: 14px;
  cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 8px;
}
.opt:hover { border-color: #c9a96e; transform: translateY(-2px); }
.opt.on { border-color: #c9a96e; box-shadow: 0 0 0 1px #c9a96e inset; }
.opt .head { display: flex; align-items: center; gap: 8px; }
.opt .key {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; background: #c9a96e; color: #0a0e14;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.opt .kind { font-size: 11px; color: #c9a96e; letter-spacing: .08em; }
.badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; margin-left: auto;
  background: #161b22; border: 1px solid #30363d; color: #8b94a3; }
.badge.ai { border-color: #6fd6a0; color: #6fd6a0; }
.opt .title { font-size: 0.92rem; font-weight: 700; color: #e6edf3; line-height: 1.5; }
.opt .note { font-size: 12px; color: #8b94a3; }
.opt .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.opt .fact { font-size: 11px; background: #161b22; border: 1px solid #30363d; border-radius: 999px; padding: 3px 9px; color: #c9d2e0; }
.opt .fact b { color: #c9a96e; }

/* ── ヒアリング一覧 ─────────────────────────── */
.hlist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hitem {
  background: #06090f; border: 1px solid #232a35; border-radius: 10px; padding: 11px 13px;
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer; transition: border-color .15s;
  /* <button> で使うことがあるので、ボタン既定の色・書体・寄せを打ち消す */
  width: 100%; text-align: left; color: inherit; font: inherit;
}
.hitem:hover { border-color: #c9a96e; }
.hitem.on { border-color: #c9a96e; box-shadow: 0 0 0 1px #c9a96e inset; }
.hitem.solved { opacity: .45; }
.hitem .tag { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: #161b22; border: 1px solid #30363d; color: #c9a96e; flex: 0 0 auto; }
.hitem > div { flex: 1; min-width: 0; }
.hitem .txt { font-size: 13px; color: #e6edf3; }
.hitem .meta { font-size: 11px; color: #8b94a3; margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid #30363d; background: #161b22;
  color: #c9d2e0; cursor: pointer; font-size: 0.85rem; transition: all .15s;
}
.chip.on { background: #c9a96e; color: #0a0e14; border-color: #c9a96e; font-weight: bold; }

.notice { font-size: 12.5px; padding: 10px 13px; border-radius: 8px; margin-top: 8px; }
.notice.ok { background: rgba(55,183,121,0.12); border: 1px solid rgba(55,183,121,0.4); color: #6fd6a0; }
.notice.info { background: rgba(95,140,220,0.12); border: 1px solid rgba(95,140,220,0.4); color: #9fb6e6; }
.notice.warn { background: rgba(224,112,122,0.12); border: 1px solid rgba(224,112,122,0.4); color: #e0707a; }

.denied { text-align: center; padding: 32px 18px; }
.denied .lock { font-size: 42px; }
.denied h2 { color: #e0707a; margin: 12px 0 8px; }
.denied p { font-size: 13px; opacity: .8; }

.muted { font-size: 11px; opacity: .55; }
pre.json { background: #06090f; border: 1px solid #232a35; border-radius: 8px; padding: 14px;
  font-size: 12px; color: #b9c4d4; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto; }