/* =========================================================
   かんたん家系図 固有スタイル(図の表示・編集パネル・印刷・書き方ガイド)
   tokens.css → ui.css → 本ファイル → renew.css の順に読み込む。
   ★生pxを新設せずトークンを参照する。色は [data-brand="kakeizu"](renew.css)から。
   ========================================================= */

/* ---------- 図の舞台 ---------- */
.tree-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.tree-title{font-size:var(--fs-3xl);font-weight:700;color:var(--text);word-break:break-word}
.tree-meta{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-top:var(--sp-1)}
.tree-exp{color:var(--muted);font-size:var(--fs-md)}
.tree-note{color:var(--text);font-size:var(--fs-md);margin-top:var(--sp-2);max-width:var(--maxw-article)}
.tree-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.edit-hint{margin-bottom:var(--sp-2)}

.tree-stage{position:relative;background:var(--surface);border:var(--bw) solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-3);margin-bottom:var(--sp-4)}
/* ★図は横に長くなる。**この箱の中だけ**を横スクロールにして、ページ全体は伸ばさない
   （正本§6「ページ全体(body)は決して横に伸ばさない」）。 */
.tree-canvas{overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  max-height:70vh;background:var(--surface)}
/* ★SVGは width/height を持って出力される(実寸)。ここで箱に収まるよう縮めるだけにする。
   JSが動かない環境でも、小さい図が引き伸ばされたり、大きい図でページが横に伸びたりしない。 */
.tree-canvas .kz-svg{display:block;max-width:100%;height:auto}
.tree-zoom{display:flex;align-items:center;gap:var(--sp-1);justify-content:flex-end;
  margin-bottom:var(--sp-2)}

/* 図の中の人物(SVG) */
.kz-node{cursor:default}
.tree-canvas .kz-node[data-pid]{cursor:pointer}
.tree-canvas .kz-node[data-pid]:hover rect{stroke:var(--primary);stroke-width:2.6}
.tree-canvas .kz-node[data-pid]:focus-visible{outline:none}
.tree-canvas .kz-node[data-pid]:focus-visible rect{stroke:var(--primary-d);stroke-width:3.4}

/* ---------- 選択中の人物への操作 ---------- */
.person-panel{margin-bottom:var(--sp-4)}
.pp-empty{color:var(--muted);font-size:var(--fs-md)}
.pp-life{color:var(--muted);font-size:var(--fs-md);margin-top:calc(var(--sp-1) * -1)}
.pp-note{color:var(--text);font-size:var(--fs-md);margin-top:var(--sp-2);white-space:pre-wrap;word-break:break-word}
.pp-add{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.pp-add-label{font-size:var(--fs-md);font-weight:700;color:var(--muted)}
.pp-ops{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:var(--bw) solid var(--line)}
/* 消す操作は色だけで伝えない(語で「消す」と書いたうえで色を添える) */
.btn.danger-text{color:var(--warn)}

/* ---------- 作成画面・ガイドの注意書き ----------
   ご存命の方の情報を扱うことの注意。★小さな文字にしない・畳まない。
   本文と同じ大きさで、注意色の左罫を付けて“わざわざ書いてある”ことが分かる見た目にする。 */
.care-note{border-left:var(--bw-4) solid var(--amber);background:var(--amber-bg);
  border-color:var(--bd-amber);color:var(--text);margin:var(--sp-4) 0}
.care-note p{margin-bottom:var(--sp-2)}
.care-note p:last-child{margin-bottom:0}

/* トップのカードの補足文 */
.mode-sub{color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-1)}

/* ---------- 書き方ガイドの図解 ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min-sm),1fr));
  gap:var(--sp-4);margin:var(--sp-4) 0}
.guide-item{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-3)}
.guide-item svg{width:100%;height:auto;display:block;margin-bottom:var(--sp-2)}
.guide-item p{font-size:var(--fs-md);color:var(--text);margin:0}

/* ---------- 印刷 ---------- */
.print-bar{background:var(--bg-subtle);border-bottom:var(--bw) solid var(--line);
  padding:var(--sp-3) 0;margin-bottom:var(--sp-4)}
.pb-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.pb-label{font-size:var(--fs-md);font-weight:700;color:var(--muted)}
.print-sheet{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4) var(--sp-6)}
.print-title{font-size:var(--fs-3xl);font-weight:700;color:var(--text);text-align:center;
  margin-bottom:var(--sp-2)}
.print-note{text-align:center;color:var(--muted);font-size:var(--fs-md);margin-bottom:var(--sp-3);
  white-space:pre-wrap}
.print-canvas{overflow:auto}
.print-canvas .kz-svg{display:block;width:100%;height:auto}
.print-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;
  margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--muted)}
.print-foot{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-3)}

@media print{
  /* ★紙に出すのは図と凡例だけ。操作の道具は出さない */
  .no-print{display:none !important}
  body{background:#fff}
  .print-sheet{max-width:none;padding:0}
  .print-canvas{overflow:visible}
  .print-legend,.print-foot{color:#000}
}

/* ---------- モバイル ---------- */
@media (max-width:640px){
  .tree-acts{width:100%}
  .tree-acts .btn{flex:1 1 var(--col-min-sm)}
  .tree-canvas{max-height:60vh}
}