/* 相関図。版画の輪郭線とベタ塗り、硬いズレ影で構成する。 */

.kmz-graph {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  border: 2.5px solid var(--ink);
  background: var(--card);
  box-shadow: var(--sh);
}
@media (max-width: 56rem) {
  .kmz-graph { grid-template-columns: minmax(0, 1fr); }
}

.kmz-graph-scroll { overflow-x: auto; padding: 1rem .6rem .2rem; }
.kmz-graph-svg { display: block; width: 100%; min-width: 46rem; height: auto; }
.kmz-graph-svg.is-compact { min-width: 100%; }

/* ── 線 ────────────────────────────────── */
.kmz-lk {
  fill: none;
  stroke: var(--rule);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke .14s, opacity .14s, stroke-width .14s;
}
.kmz-lk[data-kind="sibling"] { stroke-dasharray: 2 7; }
.kmz-lk[data-kind="enemy"],
.kmz-lk[data-kind="yield"]   { stroke-dasharray: 11 5; }
.kmz-lk[data-kind="serve"],
.kmz-lk[data-kind="guide"]   { stroke-dasharray: 4 6; opacity: .7; }
.kmz-lk[data-variant="1"]    { stroke: var(--gr); stroke-dasharray: 5 5; }
.kmz-lk.is-hot  { stroke: var(--jp) !important; stroke-width: 4.5 !important; opacity: 1 !important; }
.kmz-lk.is-dull { opacity: .16; }

/* ── 札 ────────────────────────────────── */
.kmz-nd { cursor: pointer; text-decoration: none; }
.kmz-nd-plate { stroke: var(--ink); stroke-width: 2.5; }
.kmz-nd-sel   { fill: none; stroke: var(--jp); stroke-width: 2.5; opacity: 0; }
.kmz-nd.is-on .kmz-nd-sel { opacity: 1; }
.kmz-nd.is-dull { opacity: .3; }
.kmz-nd-cap {
  font-size: 11px; font-weight: 800; text-anchor: middle;
  fill: var(--ink-mid); pointer-events: none;
}
.kmz-nd.is-on .kmz-nd-cap { fill: var(--jp); }
.kmz-nd-tier {
  font-size: 8px; font-weight: 800; text-anchor: middle;
  fill: var(--card); pointer-events: none; letter-spacing: .04em;
}
.kmz-ico * {
  stroke: var(--ink); stroke-width: 2.3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.kmz-ico .fl { fill: var(--ink); stroke: none; }
.kmz-nd .kmz-ico * { stroke: #FFFDF7; }
.kmz-nd .kmz-ico .fl { fill: #FFFDF7; stroke: none; }

/* ── 凡例 ──────────────────────────────── */
.kmz-graph-legend {
  display: flex; flex-wrap: wrap; gap: .8rem 1.3rem;
  padding: .7rem 1.1rem 1.1rem;
  font-size: .7rem; font-weight: 700; color: var(--ink-dim);
}
.kmz-graph-legend span { display: flex; align-items: center; gap: .45rem; }
.kmz-graph-legend i { width: 1.6rem; height: 0; flex: none; border-top: 3px solid var(--rule); }
.kmz-graph-legend .l-sib   { border-top-style: dotted; }
.kmz-graph-legend .l-enemy { border-top-style: dashed; }
.kmz-graph-legend .l-var   { border-top: 3px dashed var(--gr); }

/* ── 選んだ神の欄 ──────────────────────── */
.kmz-graph-side {
  border-left: 2.5px solid var(--ink);
  padding: 1.2rem 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
  align-content: start;
}
@media (max-width: 56rem) {
  .kmz-graph-side { border-left: 0; border-top: 2.5px solid var(--ink); }
}
.kmz-side-face {
  width: 3.1rem; height: 3.1rem; flex: none;
  border: 2.5px solid var(--ink); box-shadow: var(--sh-in);
  display: grid; place-items: center;
}
.kmz-side-face .kmz-ico { width: 64%; height: 64%; }
.kmz-side-name {
  font-size: 1.1rem; font-weight: 800; margin: 0;
  line-height: 1.25; letter-spacing: -.02em;
}
.kmz-side-name a { text-decoration: none; }
.kmz-side-name a { text-decoration: none; }
.kmz-side-latin {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  color: var(--ink-dim); margin: -.5rem 0 0;
}
.kmz-side-chips { display: flex; flex-wrap: wrap; gap: .22rem; }
.kmz-side-chips span {
  font-size: .6rem; font-weight: 800; padding: .05rem .35rem;
  border: 1.5px solid var(--ink); color: #FFFDF7;
}
.kmz-side-chips .ghost { background: transparent; color: var(--ink-mid); }
.kmz-side-sum { font-size: .78rem; line-height: 1.7; color: var(--ink-mid); margin: 0; }

.kmz-rels {
  list-style: none; margin: 0; padding: .7rem 0 0;
  border-top: 2.5px solid var(--ink);
  display: flex; flex-direction: column; gap: .4rem;
}
.kmz-rels li { display: grid; grid-template-columns: 4.4rem minmax(0,1fr); gap: .45rem; align-items: baseline; }
.kmz-rel-kind {
  font-size: .58rem; font-weight: 800; padding: .06rem .25rem;
  border: 1.5px solid var(--ink); text-align: center; color: #FFFDF7;
  background: var(--ink-mid);
}
.kmz-rel-kind[data-kind="parent"]  { background: var(--no); }
.kmz-rel-kind[data-kind="descend"] { background: var(--no); }
.kmz-rel-kind[data-kind="sibling"] { background: var(--eg); }
.kmz-rel-kind[data-kind="spouse"]  { background: var(--ce); }
.kmz-rel-kind[data-kind="enemy"]   { background: var(--jp); }
.kmz-rel-kind[data-kind="yield"]   { background: var(--jp); }
.kmz-rel-kind.is-variant           { background: var(--gr); color: #16150E; }
.kmz-rel-who { font-size: .78rem; font-weight: 800; }
.kmz-rel-src {
  display: block; font-size: .6rem; font-weight: 700;
  color: var(--ink-dim); letter-spacing: .02em;
}
.kmz-rel-note {
  display: block; font-size: .62rem; font-weight: 700; line-height: 1.6;
  color: var(--ink-mid); border-left: 3px solid var(--gr);
  padding-left: .4rem; margin-top: .2rem;
}