/*
 * DC池田屋 公開デモ — IKEDA FIELD v3
 * 正式ロゴ色を起点に、三事業と二共通部門を読み分けられる公開デモへ整える。
 */

:root {
  color-scheme: light;
  --paper: #f8f4ec;
  --paper-strong: #fffdf8;
  --paper-deep: #eee6da;
  --ink: #2d241f;
  --ink-soft: #655b53;
  --soil: #7b4a28;
  --soil-deep: #2f241f;
  --water: #3aafb8;
  --water-deep: #216970;
  --harvest: #c9a052;
  --harvest-deep: #8d681f;
  --passion: #c0272d;
  --night: var(--paper);
  --night-soft: var(--paper-strong);
  --panel: var(--paper-strong);
  --panel-strong: var(--paper-deep);
  --line: rgba(123, 74, 40, .20);
  --line-strong: rgba(123, 74, 40, .42);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --teal: var(--water-deep);
  --teal-soft: var(--water);
  --gold: var(--harvest-deep);
  --red: var(--passion);
  --shadow: 0 24px 70px rgba(71, 45, 29, .16);
}

body {
  color: var(--ink);
  background: var(--paper);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex="0"]:focus-visible {
  outline-color: var(--water);
}

.skip-link {
  color: var(--paper-strong);
  background: var(--water-deep);
}

.site-header {
  min-height: 82px;
  background: rgba(248, 244, 236, .96);
  border-bottom-color: rgba(123, 74, 40, .26);
  box-shadow: 0 8px 28px rgba(71, 45, 29, .06);
}

.brand { color: var(--ink); }
.brand small { color: #75675e; }
.brand-orbit {
  width: 46px;
  height: 52px;
  border: 0;
  border-radius: 0;
  background: url("assets/ikeda-tsugumichi-logo.svg") center / contain no-repeat;
}
.brand-orbit::before,
.brand-orbit::after,
.brand-orbit i { display: none; }

.sample-badge {
  color: var(--soil);
  background: rgba(201, 160, 82, .11);
  border-color: rgba(141, 104, 31, .36);
}

.button-primary {
  color: #fffdf8;
  background: var(--water-deep);
  border-color: var(--water-deep);
}
.button-primary:hover { background: #18575d; }
.button-outline {
  color: var(--soil-deep);
  background: rgba(255, 253, 248, .42);
  border-color: rgba(123, 74, 40, .48);
}
.button-outline:hover {
  color: var(--water-deep);
  border-color: var(--water-deep);
  background: var(--paper-strong);
}
.button-quiet { color: #655b53; }
.button-quiet:hover {
  color: var(--soil-deep);
  background: rgba(123, 74, 40, .08);
}

.hero { min-height: calc(100vh - 82px); }
.eyebrow { color: var(--water-deep); }
h1, h2, h3 { color: var(--soil-deep); }
.hero-lead,
.section-heading > p { color: #655b53; }
.demo-note { color: #6c6058; }
.demo-note span { color: var(--passion); }

.hero-facts { border-top-color: rgba(123, 74, 40, .48); }
.hero-facts > div { border-bottom-color: rgba(123, 74, 40, .22); }
.hero-facts dt { color: var(--water-deep); }
.hero-facts > div:nth-child(2) dt { color: var(--soil); }
.hero-facts > div:nth-child(3) dt { color: var(--harvest-deep); }
.hero-facts span { color: #70645c; }

.system-explainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1.08fr);
  align-items: stretch;
  gap: 10px;
  margin: 0 0 18px;
}
.system-explainer article {
  min-width: 0;
  padding: 15px 16px;
  background: rgba(255, 253, 248, .72);
  border: 1px solid rgba(123, 74, 40, .20);
}
.system-explainer article:nth-of-type(2) { border-top: 2px solid #9b815e; }
.system-explainer article:nth-of-type(3) { border-top: 2px solid #a5674c; }
.system-explainer .explainer-result { background: rgba(58, 175, 184, .09); border-color: rgba(33, 105, 112, .34); }
.system-explainer > i { align-self: center; color: #9c8b7e; font: 500 18px/1 var(--serif); text-align: center; }
.system-explainer span { display: block; color: var(--water-deep); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.system-explainer strong { display: block; margin-top: 5px; color: var(--soil-deep); font: 600 15px/1.45 var(--serif); }
.system-explainer p { margin: 5px 0 0; color: #6a5e56; font-size: 9px; line-height: 1.65; }

.demo-frame {
  background: #25302f;
  border-color: rgba(123, 74, 40, .56);
  box-shadow: 0 28px 78px rgba(71, 45, 29, .18);
}
.demo-toolbar {
  flex-wrap: wrap;
  background: #2e3836;
  border-bottom-color: rgba(248, 244, 236, .18);
}
.search-control { color: #ddd1c6; }
.search-control input { color: #fffdf8; }
.search-control input::placeholder { color: #c4b6aa; }
.toolbar-group { border-color: rgba(248, 244, 236, .28); }
.toolbar-group button {
  color: #f0e8df;
  border-right-color: rgba(248, 244, 236, .20);
}
.toolbar-group button:hover {
  color: #fffdf8;
  background: rgba(58, 175, 184, .22);
}
.toolbar-group .view-mode { min-width: 88px; }
.toolbar-group .view-mode.is-active {
  color: #1e2928;
  background: #f2e8d9;
  box-shadow: inset 0 -2px 0 var(--water);
}

.graph-column { background: #25302f; }
.graph-viewport {
  scrollbar-color: rgba(58, 175, 184, .62) transparent;
  background:
    radial-gradient(circle at 50% 40%, rgba(58, 175, 184, .12), transparent 34%),
    linear-gradient(rgba(248, 244, 236, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 244, 236, .08) 1px, transparent 1px),
    #25302f;
  background-size: auto, 50px 50px, 50px 50px, auto;
}
.graph-status span { color: #d9cec4; }
.graph-status strong { color: #fffdf8; }
.status-dot {
  background: var(--water);
  box-shadow: 0 0 8px rgba(58, 175, 184, .72);
}

.edge { background: rgba(248, 244, 236, .54); }
.edge.edge-tool {
  opacity: .82;
  background: repeating-linear-gradient(90deg, rgba(58, 175, 184, .72) 0 4px, transparent 4px 10px);
}
.edge.edge-automation {
  opacity: .78;
  background: repeating-linear-gradient(90deg, rgba(192, 39, 45, .80) 0 5px, transparent 5px 10px);
}
.edge.edge-return { background: rgba(201, 160, 82, .78); }
.edge.edge-handoff {
  background: repeating-linear-gradient(90deg, rgba(202, 162, 107, .76) 0 5px, transparent 5px 10px);
}
.edge.is-dim { opacity: .32; }
.edge.is-preview { z-index: 2; height: 2px; opacity: 1; background: #79cbd1; }
.edge.is-collapsed { opacity: 0 !important; }
.edge.is-active,
.edge.is-flow {
  background: var(--water);
  filter: drop-shadow(0 0 5px rgba(58, 175, 184, .72));
}
.edge.edge-return.is-active,
.edge.edge-return.is-flow {
  background: var(--harvest);
  filter: drop-shadow(0 0 5px rgba(201, 160, 82, .70));
}

.node {
  color: #fffdf8;
  background: #3b4b48;
  border-color: rgba(248, 244, 236, .72);
  box-shadow: 0 0 0 4px rgba(23, 31, 30, .48);
}
.node .node-number {
  color: #7fd2d8;
  font-size: 9px;
}
.node .node-label {
  font-size: 11px;
  line-height: 1.38;
}
.node .node-sub {
  color: #e4d9cf;
  font-size: 8px;
  line-height: 1.38;
}
.node:hover,
.node:focus-visible {
  border-color: #9ee1e5;
  background: #2d6669;
  box-shadow: 0 0 0 6px rgba(58, 175, 184, .16), 0 0 18px rgba(58, 175, 184, .22);
}
.node.is-selected,
.node.is-tour {
  border-color: var(--harvest);
  background: #534938;
  box-shadow: 0 0 0 5px rgba(201, 160, 82, .18), 0 0 18px rgba(201, 160, 82, .20);
}
.node.is-dim { opacity: .58; }
.node.is-preview { border-color: #9ee1e5; box-shadow: 0 0 0 5px rgba(58, 175, 184, .14); }
.node.is-collapsed {
  opacity: 0 !important;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.72) !important;
}
.node.is-search-match {
  border-color: var(--water);
  box-shadow: 0 0 0 7px rgba(58, 175, 184, .22), 0 0 18px rgba(58, 175, 184, .30);
}
.node-type-central {
  background: #23676c;
  border-color: #85d5da;
  box-shadow: 0 0 0 8px rgba(58, 175, 184, .18);
}
.node-type-manager { background: #335d5f; border-color: rgba(113, 201, 207, .88); }
.node-type-worker { background: #354b49; }
.node-group-growth { background: #5a503e; border-color: #d0b578; }
.node-group-backoffice { background: #60483d; border-color: #cf9578; }
.node-type-worker.node-group-growth { background: #4d493e; }
.node-type-worker.node-group-backoffice { background: #55443d; }
.node-type-tool { background: #46504d; border-color: rgba(248, 244, 236, .76); }
.node-type-automation { background: #772f32; border-color: #e26d72; }
.node-type-output {
  background: #715924;
  border-color: #e1c675;
  box-shadow: 0 0 0 6px rgba(201, 160, 82, .18);
}
.node-type-output .node-number,
.node-type-request .node-number { color: #f0d486; }
.node-type-request { background: #5c4030; border-color: #d2a85b; }

.graph-hint {
  color: #f3ece5;
  background: rgba(47, 36, 31, .90);
  border: 1px solid rgba(248, 244, 236, .16);
}

.detail-panel {
  color: var(--ink);
  background: var(--paper-strong);
  border-left-color: rgba(123, 74, 40, .28);
}
.detail-type { color: var(--water-deep); }
.detail-number { color: var(--harvest-deep); }
.detail-panel h3 { color: var(--soil-deep); }
.detail-role { color: #655b53; }
.detail-block { border-top-color: rgba(123, 74, 40, .22); }
.detail-block h4 { color: var(--water-deep); }
.detail-block p,
.detail-block li { color: #4f4640; }
.detail-block li::before { background: var(--water); }
.detail-facts {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.detail-facts > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid rgba(123, 74, 40, .18);
}
.detail-facts span { color: var(--water-deep); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.detail-facts p { margin: 0; color: #4f4640; font-size: 10px; line-height: 1.7; }
.detail-change {
  background: rgba(58, 175, 184, .10);
  border-left-color: var(--water-deep);
}
.detail-change span { color: var(--water-deep); }
.detail-change p { color: var(--soil-deep); }

.value-grid { border-top-color: rgba(123, 74, 40, .42); }
.value-grid article,
.value-grid article + article { border-color: rgba(123, 74, 40, .20); }
.value-grid span { color: var(--water-deep); }
.value-grid article:nth-child(2) span { color: var(--soil); }
.value-grid article:nth-child(3) span { color: var(--harvest-deep); }
.value-grid p { color: #655b53; }

.build-section {
  color: var(--ink);
  background: var(--paper-deep);
  border-top: 1px solid rgba(123, 74, 40, .20);
}
.build-intro .eyebrow { color: var(--water-deep); }
.build-intro h2 { color: var(--soil-deep); }
.build-intro > p:last-child,
.build-steps p,
.build-footer p { color: #665b53; }
.build-steps,
.build-steps li,
.build-footer { border-color: rgba(123, 74, 40, .24); }
.build-steps li > span { color: var(--harvest-deep); }
.build-section .button-outline { color: var(--soil-deep); border-color: rgba(123, 74, 40, .50); }
.build-section .button-outline:hover { color: var(--water-deep); border-color: var(--water-deep); }

.site-footer strong { color: var(--soil-deep); }
.site-footer span { color: #6b6058; }

.tour-card {
  color: var(--ink);
  background: rgba(255, 253, 248, .98);
  border-color: rgba(123, 74, 40, .36);
  box-shadow: 0 24px 70px rgba(71, 45, 29, .24);
}
.tour-progress { border-color: rgba(123, 74, 40, .22); }
.tour-progress > span { color: var(--harvest-deep); }
.tour-progress i { background: rgba(123, 74, 40, .18); }
.tour-progress i.is-on { background: var(--water); }
.tour-copy > p:first-child { color: var(--water-deep); }
.tour-copy h2 { color: var(--soil-deep); }
.tour-copy > p:last-child { color: #655b53; }

@media (max-width: 900px) {
  .system-explainer { grid-template-columns: 1fr 1fr; }
  .system-explainer > i { display: none; }
  .detail-panel { border-top-color: rgba(123, 74, 40, .28); }
}

@media (max-width: 620px) {
  .site-header { min-height: 68px; }
  .brand-orbit { width: 38px; height: 44px; }
  .hero { min-height: auto; }
  .system-explainer { grid-template-columns: 1fr; }
  .system-explainer article { padding: 13px 14px; }
  .demo-toolbar { align-items: stretch; }
  .search-control { flex: 1 1 100%; width: 100%; }
  .toolbar-group { flex: 1; }
  .toolbar-group button { flex: 1; }
  .toolbar-group .view-mode { min-width: 0; }
  .detail-facts > div { grid-template-columns: 76px minmax(0, 1fr); }
  .tour-progress { border-bottom-color: rgba(123, 74, 40, .22); }
}

@media print {
  body { color: #111; background: white; }
}