/* =================================================
   0. Theme / Design Tokens
   ================================================= */
:root{
  /* ---- Color ---- */
  --bg: #f6f7fb;
  --panel: #ffffff;
  --border: #e6e9ef;

  --ink: #111827;
  --muted: #6b7280;

  --primary: #0b4f82;
  --danger: #ef4444;

  /* ---- Shadow ---- */
  --shadow-panel: 0 16px 34px rgba(0,0,0,0.10);
  --shadow-zoom:  0 10px 24px rgba(0,0,0,.12);

  /* ---- Radius ---- */
  --radius-8: 10px;
  --radius-10: 10px;
  --radius-12: 10px;
  --radius-14: 16px;
  --radius-16: 16px;
  --radius-round: 999px;

  /* ---- Font ---- */
  --font: "Segoe UI", "Noto Sans JP", sans-serif;

  /* ---- Stage padding ---- */
  --stage-pad-x: 0px;

  /* ---- Raw sizing tokens（現状維持） ---- */
  --px-0: 0px;
  --px-1: 1px;
  --px-2: 2px;
  --px-3: 2px;
  --px-4: 2px;
  --px-5: 2px;
  --px-8: 8px;
  --px-10: 10px;
  --px-12: 12px;
  --px-13: 13px;
  --px-14: 14px;
  --px-15: 15px;
  --px-16: 16px;
  --px-18: 18px;
  --px-20: 20px;
  --px-22: 22px;
  --px-24: 24px;
  --px-26: 26px;
  --px-28: 28px;
  --px-30: 30px;
  --px-34: 34px;
  --px-40: 40px;
  --px-42: 42px;
  --px-44: 44px;
  --px-48: 48px;
  --px-54: 54px;
  --px-70: 70px;
  --px-74: 74px;
  --px-80: 80px;
  --px-100: 100px;
  --px-130: 130px;
  --px-140: 140px;
  --px-160: 160px;
  --px-180: 180px;
  --px-200: 200px;
  --px-220: 220px;
  --px-240: 240px;
  --px-260: 260px;
  --px-320: 320px;
  --px-360: 360px;
  --px-380: 380px;
  --px-400: 400px;
  --px-420: 420px;
  --px-520: 520px;

  /* ---- Select font（未定義事故の保険） ---- */
  --select-font: var(--px-16);
  --select-font-lg: var(--px-18);

  /* ---- Motion ---- */
  --dur-150: 0.15s;
  --dur-020: 0.02s;

  /* 必要なら調整（メニューバー高さに合わせる） */
  --ft-ui-z: 50;
  --ft-ui-pad: 12px;
  --ft-toolbar-top: 72px;      /* ←上の固定位置（メニューバー分） */
  --ft-toolbar-w: 168px;       /* ←PC時の幅 */
  --ft-toolbar-gap: 10px;

  /* ズームパネルの分（ステージの余白確保用。必要なら調整） */
  --ft-zoompanel-w: 76px;
}

/* =================================================
   1. Base / Reset
   ================================================= */
html, body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  user-select:none;
}
input, textarea, select, button{
  user-select:text;
}
svg text{
  user-select:none;
}

/* =================================================
   2. App Layout（上：MenuBar / 下：Stage）
   ================================================= */
#app{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
  font-size:var(--px-16);
  font-family:var(--font);
}
.workspace{
  flex:1;
  position:relative;
  min-height:0;
}
.stage-container{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--bg);
  padding:0 var(--stage-pad-x);
}

/* =================================================
   Stage Scroll（スクロールバー無し + つかんで移動前提）
   - overflow は stage.js が持つ（scrollLeft/Top を JS が動かす）
   - スクロールバーは常に非表示
   - JS側で .is-panning を付けたら grabbing にする
   ================================================= */
.ft-stage-scroll{
  -ms-overflow-style:none; /* old MS */
  scrollbar-width:none;    /* Firefox */
  overscroll-behavior:none;
  touch-action:none;       /* つかんで移動（JS pan）優先 */
}
.ft-stage-scroll::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

/* マウス環境だけカーソルを出す（タッチ端末では意味がない） */
@media (hover:hover) and (pointer:fine){
  .ft-stage-scroll{ cursor: grab; }
  .ft-stage-scroll.is-panning{ cursor: grabbing; }
}

/* =================================================
   3. MenuBar（タイトル・メニュー）
   ================================================= */
.menubar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--px-15) 5%;
  background:var(--panel);
  border-bottom:var(--px-1) solid var(--border);
  font-family:var(--font);
}

.menubar-title{
  font-size:var(--px-26);
  font-weight:700;
  color:var(--ink);
}
.menubar-title-link{
  display:inline-flex;
  align-items:center;
  color:inherit;
  text-decoration:none;
}
.menubar-title-link:hover{
  opacity:.9;
}
.menubar-title-sub{
  margin-top:var(--px-2);
  font-size:var(--px-13);
  color:var(--muted);
}

.menubar-actions{
  display:flex;
  gap:var(--px-10);
}
.menubar-btn{
  display:flex;
  align-items:center;
  height:var(--px-42);
  padding:0 var(--px-14);
  background:var(--panel);
  border:var(--px-1) solid #d9dee8;
  border-radius:var(--radius-10);
  color:#374151;
  font-size:var(--px-14);
  cursor:pointer;
  transition:
    background var(--dur-150),
    border-color var(--dur-150),
    transform var(--dur-020);
}
.menubar-btn:hover{
  background:#f8fafc;
  border-color:#94a3b8;
}
.menubar-btn:active{
  transform:translateY(var(--px-1));
}
.menubar-btn.danger{
  color:var(--danger);
  border-color:var(--danger);
}
.menubar-btn.danger:hover{
  background:#fff1f2;
}

/* =================================================
   4. Floating ToolPanel / Toolbar
   ================================================= */
.toolpanel{
  position:fixed;
  right:var(--px-40);
  top:var(--px-160);
  width:var(--px-100);
  background:var(--panel);
  border:var(--px-1) solid #e3e8f1;
  border-radius:var(--radius-12);
  box-shadow:var(--shadow-panel);
  z-index:1200;
}

.toolpanel-handle{
  height:var(--px-30);
  background:var(--primary);
  border-radius:var(--radius-10) var(--radius-10) 0 0;
  cursor:grab;
}
.toolpanel.dragging .toolpanel-handle{
  cursor:grabbing;
}

.toolbar{
  display:flex;
  flex-direction:column;
  gap:var(--px-8);
  padding:var(--px-2) 0 var(--px-20);
  font-family:var(--font);
}

.toolbar-btn{
  width:100%;
  height:var(--px-74);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--px-8);
  background:none;
  border:none;
  color:#999;
  cursor:pointer;
  transition:background var(--dur-150), transform var(--dur-020);
}
.toolbar-btn:hover{
  background:#f1f5f9;
}
.toolbar-btn:active{
  transform:translateY(var(--px-1));
}
.toolbar-btn.active{
  background:#86c9ff;
  box-shadow:inset 0 0 0 var(--px-1) rgba(11,79,130,.25);
  color:#111;
}

.toolbar-icon{
  width:var(--px-28);
  height:var(--px-28);
  stroke:#999;
  stroke-width:2;
}
.toolbar-btn.active .toolbar-icon{
  stroke:#000;
}
.toolbar-text{
  font-size:var(--px-14);
  font-weight:700;
}

/* =================================================
   5. Modal Common
   ================================================= */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
}

.modal{
  width:80%;
  max-width:540px;
  background:#fff;
  border-radius:var(--radius-12);
  padding:var(--px-20);
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  color:#333;
}

.modal-title{
  font-size:var(--select-font-lg);
  font-weight:700;
  margin-bottom:var(--px-18);
  padding-bottom:var(--px-18);
  border-bottom:var(--px-1) solid #e8ecf5;
}

/* =========================
   Node Modal (Lucide list)
========================= */
.node-list{
  display:flex;
  flex-direction:column;
  gap:var(--px-16);
  padding:var(--px-16);
}

.node-list-btn{
  width:100%;
  min-height:var(--px-74);
  display:flex;
  align-items:center;
  gap:var(--px-16);
  padding:var(--px-16);
  border-radius:var(--radius-10);
  border:var(--px-1) solid rgba(0,0,0,.08);
  background:#f5f6f8;
  cursor:pointer;
  user-select:none;
  font-size:16px;
}

.node-list-btn:hover{ background:#eef1f5; }
.node-list-btn:active{ transform:translateY(var(--px-1)); }

.node-list-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.node-ico{
  width:1.1em;
  height:1.1em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* 削除だけ少し危険色（スクショに寄せたいならこの2行を消してもOK） */
.node-list-btn.is-danger{ color:#b42318; }
.node-list-btn.is-danger .node-ico{ color:#b42318; }

/* =================================================
   6. Relation Modal
   ================================================= */

/* これが無いと、wrapが縮尺に追随しない（JSは --rel-scale だけ更新するため） */
/* wrapが縮尺に追随 */
.relation-canvas-wrap{
  --rel-scale: 1;
  --rel-w: 420px;
  --rel-h: 600px;
  width:  calc(var(--rel-w) * var(--rel-scale));
  height: calc(var(--rel-h) * var(--rel-scale));
  overflow: hidden;
  margin: 0 auto;
}

/* 中身は等倍で作って transform で縮小 */
.relation-canvas{
  width:  var(--rel-w);
  height: var(--rel-h);
  transform: scale(var(--rel-scale));
  transform-origin: top left;
  contain: layout paint;
}




/* 接続線 */
.relation-lines{
  position:absolute;
  inset:0;
  z-index:0;
}
.relation-lines line{
  stroke:#ddd;
  stroke-width:2;
}

/* グループ箱 */
.rel-box{
  position:absolute;
  z-index:1;
  background:#fff;
  border:var(--px-2) solid #ddd;
  border-radius:var(--radius-10);
  display:grid;
  gap:var(--px-5);
  justify-items:center;
  align-items:center;
}

/* 丸ボタン */
.rel-chip{
  width:var(--px-54);
  height:var(--px-54);
  border-radius:var(--radius-round);
  border:0;
  background:#dfdfdf;
  font-size:var(--select-font);
  cursor:pointer;
}

.rel-chip:hover{ filter:brightness(.96); }
.rel-chip:active{ transform:translateY(var(--px-1)); }

/* 左右配置 */
.rel-parents{ left:var(--px-20); top:0px; width:var(--px-160); height:70px; grid-template-columns:repeat(2,1fr); }
.rel-self{ left:var(--px-20); top:100px; width:var(--px-160); height:70px; grid-template-columns:repeat(2,1fr); }
.rel-children{ left:var(--px-20); top:200px; width:var(--px-160); height:200px; grid-template-columns:repeat(2,1fr); }
.rel-grand{ left:var(--px-20); top:430px; width:var(--px-160); height:70px; grid-template-columns:repeat(2,1fr); }
.rel-siblings{ left:var(--px-220); top:100px; width:var(--px-160); height:140px; grid-template-columns:repeat(2,1fr); }
.rel-nephew{ left:var(--px-220); top:270px; width:var(--px-160); height:70px; grid-template-columns:repeat(2,1fr); }
.rel-other{ left:var(--px-220); top:360px; width:var(--px-160); height:140px; grid-template-columns:repeat(2,1fr); }

/* =================================================
   7. Color Modal
   ================================================= */
.color-row{
  display:flex;
  gap:var(--px-16);
}
.color-item{
  width:60px;
  height:60px;
  border-radius:50%;
  border:var(--px-2) solid #e0e0e0;
  cursor:pointer;
}
.color-item:hover{
  transform:scale(1.08);
  border-color:#999;
}

/* =================================================
   8. Age Modal
   ================================================= */
.age-list{
  height:min(var(--px-420),60vh);
  overflow-y:auto;
  border:var(--px-1) solid #eee;
}
.age-item{
  padding:var(--px-16);
  font-size:var(--select-font);
  border-bottom:var(--px-1) solid #f2f2f2;
  cursor:pointer;
}
.age-item:hover{ background:#f0f7f7; }

/* =================================================
   9. Detail Modal
   ================================================= */
.detail-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin:0 auto;
}

.detail-row{
  display:grid;
  grid-template-columns:var(--px-80) 1fr;
  gap:10px;
  align-items: center;
}

.detail-field input,
.detail-field select{
  width: 50%;
  border: var(--px-1) solid #d6dbe6;
  border-radius: var(--radius-12);
  padding: var(--px-16);
  font-size: var(--px-16);
  outline: none;
}

.age-inline{
  display:flex;
  align-items:center;
  gap:var(--px-10);
}

.detail-deceased{
  display:flex;
  align-items:center;
  gap:var(--px-2);
  white-space:nowrap;
  user-select:none;
}

.birth-selects{ display: flex; gap: 8px; }
.birth-selects select{ width: auto; min-width: 90px; }

.detail-footer{
  padding-top: var(--px-18);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--px-12);
}

.detail-hide-area{ justify-self: start; }
.detail-footer-spacer{ justify-self: end; }

.detail-ok{
  justify-self: center;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: var(--px-16);
  padding: var(--px-14) var(--px-24);
  border-radius: var(--radius-12);
  cursor: pointer;
  min-width: var(--px-200);
}
.detail-ok:hover{ filter: brightness(0.98); }
.detail-ok:active{ transform: translateY(var(--px-1)); }

/* =================================================
   10. Zoom Panel（常に表示・安全領域対応）
   ================================================= */

/* 重要：
   - position:fixed は維持
   - safe-area を考慮して top/right を決める
   - z-index は modal-overlay(9999) より下にしてモーダルを邪魔しない
   - transform は JS（zoomPanelManager）側でクリアされる方針なので使わない
*/
.zoom-panel{
  position: fixed;

  /* safe-area 対応（iPhoneノッチ等） */
  top: calc(env(safe-area-inset-top, 0px) + 120px);
  right: calc(env(safe-area-inset-right, 0px) + var(--px-14));

  width: var(--px-74);
  background: #fff;
  border-radius: var(--radius-16);
  padding: var(--px-14) var(--px-10);
  box-shadow: var(--shadow-zoom);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--px-8);

  /* ★モーダルより下、ステージより上 */
  z-index: 1500;

  user-select: none;
  touch-action: manipulation;
}

.zoom-btn{
  width: var(--px-54);
  height: var(--px-54);
  border-radius: var(--radius-14);
  border: var(--px-1) solid #e6e8ee;
  background: #fff;
  cursor: pointer;

  display: grid;
  place-items: center;

  /* タップ感 */
  transition: background var(--dur-150), transform var(--dur-020);
}
.zoom-btn:hover{ background: #f6f8fb; }
.zoom-btn:active{ transform: translateY(var(--px-1)); }

/* 中央ボタン（中心/100%）の中身 */
.zoom-reset-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.zoom-percent{
  font-size: 12px;
  font-weight: 800;
  color: #111827;
}

/* lucide svg のサイズ統一（iタグから生成されるsvg想定） */
.zoom-panel svg{
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

/* ===== モバイル：上が詰まる端末の保険 ===== */
@media (max-width: 468px){
  .zoom-panel{
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    width: 66px;
    padding: 10px 8px;
  }
  .zoom-btn{
    width: 48px;
    height: 48px;
  }
  .zoom-panel svg{
    width: 20px;
    height: 20px;
  }
}

/* =================================================
   Mobile Modal UX Improvement
   ================================================= */
@media (max-width: 468px){
  /* ノードは小さめに */
  .ft-node{
    transform: scale(0.35);
  }

  /* モーダルは下寄せ */
  .modal-overlay{
    align-items: flex-end;
  }

  .modal{
    width: 80%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
  }
}