/* ============================================================
   Minder — styles
   Daily Scheduler と同じ質感（暖かいグレー ＋ 深緑の差し色）。
   ・色は「暖かいグレー1系統 ＋ 差し色1色」に統一
   ・触る場所は必ず 34px 以上（タッチ端末では 40px 以上）
   ============================================================ */

:root{
  /* 紙と地の色 */
  --paper: #ffffff;
  --bg:    #e8e6e0;
  --bg-2:  #dedbd3;

  /* 文字 */
  --ink:   #21211e;
  --ink-2: #55544e;
  --ink-3: #8a877f;
  --ink-4: #b4b1a8;

  /* 線 */
  --frame:     #26261f;
  --frame-2:   #c6c3b9;
  --rule:      #dcd9d1;
  --rule-soft: #efede7;

  /* 面 */
  --head-bg: #f5f4ef;
  --tint:    #faf9f5;
  --tint-2:  #f2f0ea;

  /* 差し色 */
  --accent:      #2c6a58;
  --accent-deep: #23543f;
  --accent-soft: #e8f0ec;
  --danger:      #a3453c;

  /* 動き */
  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* 効果 */
  --ring: 0 0 0 2px #fff, 0 0 0 3.5px rgba(44,106,88,.55);
  --shadow-1: 0 1px 2px rgba(35,33,28,.06);
  --shadow-2: 0 4px 14px -4px rgba(35,33,28,.16), 0 1px 3px rgba(35,33,28,.07);
  --shadow-3: 0 18px 44px -14px rgba(35,33,28,.30), 0 3px 10px rgba(35,33,28,.08);

  --font: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo",
          "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cap-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tb-h: 52px;
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html, body{ margin:0; padding:0; height:100%; overflow:hidden; }

body{
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0, var(--bg-2) 100%);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select, button{ font-family: inherit; color: inherit; }
:focus{ outline: none; }
button:focus-visible, select:focus-visible, input:focus-visible,
.cat-chip:focus-visible, .pal-dot:focus-visible{ outline:none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================ ツールバー ============================ */
.toolbar{
  position: fixed; left:0; right:0; top:0;
  z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  padding-top: calc(9px + env(safe-area-inset-top));
  background: rgba(236,234,228,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(35,33,28,.10);
}
.tb-group{ display:flex; align-items:center; gap:6px; min-width:0; }
.tb-spacer{ flex:1; }

.btn{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px;
  border: 1px solid #d6d3ca;
  background: #fff;
  color: var(--ink);
  font-size: 13px; font-weight: 500; line-height: 1;
  padding: 0 13px; border-radius: 9px; cursor: pointer;
  white-space: nowrap; box-shadow: var(--shadow-1);
  transition: background .14s, border-color .14s, box-shadow .14s, color .14s;
}
.btn:hover{ border-color:#b9b6ac; box-shadow: var(--shadow-2); }
.btn:active{ background: var(--tint-2); box-shadow:none; }
.btn.icon{ padding:0 10px; font-size:16px; min-width:36px; }
.btn:disabled{
  color: var(--ink-4); border-color:#e4e1d9; background:#faf9f6;
  cursor: default; box-shadow:none;
}
.btn:disabled:hover{ border-color:#e4e1d9; box-shadow:none; }
.btn.primary{ background: var(--accent); border-color: var(--accent); color:#fff; }
.btn.primary:hover{ background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.danger{ color: var(--danger); border-color:#e2cdc9; background:#fdf8f7; }
.btn.danger:hover{ border-color:#cfa9a2; }
.btn.ghosty{ border-color:transparent; background:transparent; color: var(--ink-3); box-shadow:none; }
.btn.ghosty:hover{ background: var(--tint-2); border-color:transparent; box-shadow:none; }
.btn-full{ width:100%; min-height:42px; padding:0 12px; font-size:13.5px; }

/* 確認のダイアログは、ほかのダイアログより上に出す（後ろを暗くするため） */
#askBackdrop, #conflictBackdrop{ z-index: 110; }
#askModal, #conflictModal{ z-index: 115; }

.map-pick{ max-width: min(46vw, 320px); gap:7px; font-weight:600; }
.mp-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-caret{ color: var(--ink-4); font-size:10px; flex:0 0 auto; }

.menu-wrap{ position: relative; }
.menu{
  position:absolute; right:0; top: calc(100% + 8px);
  min-width: 234px;
  background:#fff; border:1px solid #e0dcd3; border-radius:13px;
  box-shadow: var(--shadow-3); padding:6px; z-index:60;
  animation: menu-in .18s var(--ease-out);
  max-height: calc(100vh - 90px); overflow:auto;
}
@keyframes menu-in{ from{ opacity:0; transform: translateY(-6px) scale(.985);} to{ opacity:1; transform:none; } }
.menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; background:none; border:0;
  padding:10px 11px; font-size:13px; border-radius:8px; cursor:pointer; color: var(--ink);
}
.menu-item:hover{ background: var(--tint-2); }
.menu-sep{ height:1px; background:#eceae3; margin:5px 4px; }
.ver{ font-size:10.5px; color: var(--ink-4); font-family: var(--cap-font); letter-spacing:.04em; }

.saved{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color: var(--ink-3); letter-spacing:.04em;
  margin-right:2px; white-space:nowrap; transition: color .2s;
}
.saved::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--ink-4); transition: background .2s; }
.saved.busy{ color: var(--accent); }
.saved.busy::before{ background: var(--accent); }
.saved.sync::before{ background: var(--accent); }
.saved.sync{ color: var(--accent); }
.saved.sync.busy{ color: var(--ink-3); }
.saved.sync.busy::before{ background: var(--ink-4); }

/* ============================ 探す ============================ */
.findbar{
  position: fixed; z-index:39;
  top: calc(var(--tb-h) + env(safe-area-inset-top) + 8px);
  left: 50%; transform: translateX(-50%);
  display:flex; align-items:center; gap:5px;
  background:#fff; border:1px solid #e0dcd3; border-radius:12px;
  box-shadow: var(--shadow-3); padding:6px;
  width: min(420px, calc(100vw - 24px));
  animation: menu-in .18s var(--ease-out);
}
.find-input{
  flex:1; min-width:0; border:0; outline:0; font-size:14px;
  padding:8px 10px; background:none;
}
.find-count{
  font-size:11px; color: var(--ink-3); font-family: var(--cap-font);
  white-space:nowrap; padding:0 2px;
}

/* ============================ キャンバス ============================ */
.stage{
  position: fixed; inset:0;
  top: calc(var(--tb-h) + env(safe-area-inset-top));
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(35,33,28,.085) 1px, transparent 0);
  background-size: 26px 26px;
}
.stage.panning{ cursor: grabbing; }
.world{
  position:absolute; left:0; top:0;
  transform-origin: 0 0;
  will-change: transform;
}
.links{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.nodes{ position:absolute; left:0; top:0; }

/* マップが1つも無いとき */
.stage-empty{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  text-align:center; width: min(360px, calc(100vw - 40px));
}
.stage-empty .se-t{ font-size:15px; font-weight:600; color: var(--ink-2); }
.stage-empty .se-b{ font-size:12.5px; color: var(--ink-3); margin:8px 0 16px; line-height:1.8; }
.stage-empty .se-a{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ---------- ノード ---------- */
.node{
  position:absolute; left:0; top:0;
  display:flex; align-items:center;
  /* 中身に合わせた幅にする。max-content を指定しないと、
     入れ物（.nodes）の幅がゼロ扱いになって1文字ずつ折り返してしまう */
  width: max-content;
  max-width: 300px;
  border:1.5px solid #b7b4ab;
  background:#eeece6;
  border-radius: 11px;
  padding: 8px 12px;
  gap: 8px;
  font-size: 14px; font-weight: 600; line-height:1.5;
  color: var(--ink);
  box-shadow: var(--shadow-1);
  cursor: default;
  transition: box-shadow .14s, border-color .14s, background .14s;
}
.node.root{
  font-size: 17px;
  padding: 12px 18px;
  border-width: 2px;
  border-radius: 13px;
  max-width: 340px;
  box-shadow: var(--shadow-2);
}
.node.d1{ font-size: 15px; padding: 9px 14px; }
.node:hover{ box-shadow: var(--shadow-2); }
.node.sel{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(44,106,88,.65), var(--shadow-2); }
.node.hit{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(197,169,124,.95), var(--shadow-2); }
.node.sel, .node:hover{ z-index: 8; }
.node.drop{ box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent); }
/* 「この上へ」「この下へ」を示す線 */
.node.drop-before::after, .node.drop-after::after{
  content:""; position:absolute; left:-8px; right:-8px; height:4px;
  background: var(--accent); border-radius:2px;
  box-shadow: 0 0 0 2px #fff;
}
.node.drop-before::after{ top:-9px; }
.node.drop-after::after{ bottom:-9px; }
.node.dragging{ opacity:.6; z-index:10; box-shadow: var(--shadow-3); }
.node.drop, .node.drop-before, .node.drop-after{ z-index:11; }
.node.dim{ opacity:.34; }

.nd-chk{
  flex:0 0 auto; width:17px; height:17px; border-radius:5px;
  border:1.5px solid #a9a69d; background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; line-height:1;
}
.nd-chk.on{ background: var(--accent); border-color: var(--accent); }
.nd-chk.on::before{ content:"✓"; }
.node.done .nd-text{ color: var(--ink-3); text-decoration: line-through; }

.nd-text{
  min-width: 1em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  outline: none;
}
.nd-text:empty::before{ content:"（空）"; color: var(--ink-4); font-weight:500; }
.node.editing{
  background:#fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-2);
  touch-action: auto; z-index: 9;
}
.node.editing .nd-text{ cursor:text; user-select:text; -webkit-user-select:text; }

/* 画面を動かすときに文字が選ばれてしまわないように */
.stage{ user-select:none; -webkit-user-select:none; }
.node.editing, .node.editing *{ user-select:text; -webkit-user-select:text; }

.nd-marks{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.nd-mark{ font-size:11px; color: var(--ink-3); line-height:1; }
.nd-mark.link{ color: var(--accent); }

/* 子を足すボタン（選択中／ホバー時だけ）
   ＋ は「次の子が出てくる場所」に置く。
   横に広げる枝なら外側、下に並べる枝なら下の角。 */
.nd-add{
  position:absolute;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid #cfccc3; background:#fff; color: var(--ink-2);
  font-size:15px; line-height:1; cursor:pointer; padding:0;
  display:none; align-items:center; justify-content:center;
  box-shadow: var(--shadow-1); z-index:3;
}
.node.sel .nd-add, .node:hover .nd-add{ display:inline-flex; }
.nd-add:hover{ background: var(--accent); border-color: var(--accent); color:#fff; }

.nd-add.r{ top:50%; margin-top:-13px; right:-36px; }
.nd-add.l{ top:50%; margin-top:-13px; left:-36px; }
/* 下に並べる枝は、次の子が下に出るので ＋ も下に */
.nd-add.dr{ top:auto; margin-top:0; bottom:-14px; right:-14px; }
.nd-add.dl{ top:auto; margin-top:0; bottom:-14px; left:-14px; }

/* たたんでいるときは、数字のバッジと重ならないように外へずらす */
.node.folded .nd-add.r{ right:-66px; }
.node.folded .nd-add.l{ left:-66px; }


/* ノードの「⋯」（メモ・リンク・色・並べかえ・削除） */
.nd-more{
  position:absolute; top:-12px; right:-12px;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid #cfccc3; background:#fff; color: var(--ink-2);
  font-size:14px; line-height:1; cursor:pointer; padding:0;
  display:none; align-items:center; justify-content:center;
  box-shadow: var(--shadow-1); z-index:4;
}
.node.sel .nd-more, .node:hover .nd-more{ display:inline-flex; }
.nd-more:hover{ border-color: var(--accent); color: var(--accent); }

/* たたんだ枝の目印 */
.nd-fold{
  position:absolute; top:50%; margin-top:-11px;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:99px; border:1.5px solid #cfccc3; background:#fff;
  color: var(--ink-2); font-size:11px; font-weight:700; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-1); z-index:3;
  font-family: var(--cap-font);
}
.nd-fold:hover{ border-color: var(--accent); color: var(--accent); }
.nd-fold.r{ right:-30px; }
.nd-fold.l{ left:-30px; }
.nd-fold.dr{ top:auto; margin-top:0; bottom:-11px; left:-26px; right:auto; }
.nd-fold.dl{ top:auto; margin-top:0; bottom:-11px; right:-26px; left:auto; }

/* ============================ 下の操作バー ============================ */
.actbar{
  position: fixed; left:50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 45;
  display:flex; align-items:stretch; gap:2px;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border:1px solid #e0dcd3; border-radius:14px;
  box-shadow: var(--shadow-3);
  padding:5px;
  animation: menu-in .18s var(--ease-out);
  max-width: calc(100vw - 24px);
}
.ab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:58px; min-height:46px; padding:0 8px;
  border:0; background:none; border-radius:10px; cursor:pointer; color: var(--ink);
}
.ab:hover{ background: var(--tint-2); }
.ab:active{ background: var(--tint); }
.ab-i{ font-size:15px; line-height:1; }
.ab-l{ font-size:10.5px; color: var(--ink-2); letter-spacing:.02em; }

/* ============================ 拡大縮小 ============================ */
.zoombar{
  position: fixed; right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 44;
  display:flex; gap:4px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid #e0dcd3; border-radius:12px; padding:4px;
  box-shadow: var(--shadow-2);
}
.zb{
  min-width:36px; min-height:36px; padding:0 8px;
  border:0; background:none; border-radius:9px; cursor:pointer;
  font-size:16px; line-height:1; color: var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center;
}
.zb.wide{ font-size:12px; font-weight:600; min-width:46px; }
.zb:hover{ background: var(--tint-2); color: var(--ink); }

/* ============================ ポップオーバー ============================ */
.pop-backdrop{ position:fixed; inset:0; z-index:70; }
.pop{
  position: fixed; z-index: 80;
  max-height: calc(100vh - 20px); overflow-y: auto; overscroll-behavior: contain;
  width: 300px;
  background:#fff; border:1px solid #e0dcd3; border-radius:14px;
  box-shadow: 0 24px 60px -12px rgba(35,33,28,.34), 0 4px 12px rgba(35,33,28,.10);
  padding: 14px;
  animation: menu-in .18s var(--ease-out);
}
.pop-title{ font-size:13px; font-weight:600; margin-bottom:10px; }
.pop-text{
  width:100%; border:1px solid #ddd9d0; border-radius:9px;
  padding:10px 11px; font-size:14px; outline:0;
  transition: border-color .14s, box-shadow .14s;
  background:#fff;
}
.pop-text:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pop-text.ta{ resize: vertical; line-height:1.6; }
.pop-text.note{ font-size:13px; }
.pop-text.big{ min-height:200px; font-size:13.5px; font-family: var(--cap-font); }
.pop-sep{ height:1px; background:#efece5; margin:13px -14px 11px; }
.pop-label{ display:block; font-size:10px; color: var(--ink-3); margin-bottom:6px; letter-spacing:.10em; font-weight:600; }
.pop-label.sp{ margin-top:12px; }
.pop-actions{ display:flex; justify-content:space-between; gap:8px; margin-top:14px; }
.move-row{ display:flex; flex-wrap:wrap; gap:6px; }
.move-row .btn{ flex:1 1 calc(50% - 3px); min-width:0; font-size:12px; padding:0 6px; }

.url-list{ display:flex; flex-direction:column; gap:6px; }
.url-row{ display:flex; align-items:center; gap:5px; }
.pop-url{ flex:1; min-width:0; font-size:12.5px; }
.url-open{
  flex:0 0 auto; min-height:30px; padding:0 11px;
  border:1px solid #d6d3ca; background:#fff; color: var(--accent);
  border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
}
.url-open:hover:not(:disabled){ background: var(--accent-soft); border-color:#b6ccc3; }
.url-open:disabled{ color: var(--ink-4); cursor:default; opacity:.55; }
.url-row .del{
  border:0; background:none; color: var(--ink-4); font-size:15px; cursor:pointer;
  width:28px; height:28px; border-radius:7px; flex:0 0 auto; line-height:1;
}
.url-row .del:hover{ background: var(--tint-2); color: var(--danger); }
.url-add{ margin-top:6px; }
.lnk{
  border:0; background:none; color: var(--accent); font-size:12px; cursor:pointer;
  padding:5px 3px; text-decoration:underline; text-underline-offset:2px;
}
.lnk:hover{ color: var(--accent-deep); }
.memo-chk{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color: var(--ink-2); cursor:pointer; }
.memo-chk input{ width:17px; height:17px; }

/* ---- カテゴリー ---- */
.cat-row{ display:flex; flex-wrap:wrap; gap:6px; }
.cat-chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:30px; padding:0 11px; font-size:12px; line-height:1;
  border:1px solid #ddd9d0; border-radius:99px;
  background:#fbfaf7; color: var(--ink-2); cursor:pointer; max-width:100%;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.cat-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-chip i{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.cat-chip:hover{ background:#fff; border-color:#bcb9b0; }
.cat-chip.sel{ border-color: var(--ink-2); background:#fff; box-shadow: inset 0 0 0 1px var(--ink-2); }

.cat-list{ display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow:auto; margin-bottom:14px; }
.cat-item{ display:flex; align-items:center; gap:9px; }
.cat-item .sw{ width:24px; height:24px; border-radius:50%; cursor:pointer; flex:0 0 auto; border:1px solid rgba(0,0,0,.14); }
.cat-item .sw:hover{ transform: scale(1.06); box-shadow: var(--shadow-1); }
.cat-item input{ flex:1; min-width:0; padding:8px 10px; font-size:13px; border:1px solid #ddd9d0; border-radius:9px; outline:0; background:#fff; }
.cat-item input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cat-item .del{ border:0; background:none; color: var(--ink-4); font-size:15px; cursor:pointer; width:30px; height:30px; border-radius:8px; flex:0 0 auto; }
.cat-item .del:hover{ background: var(--tint-2); color: var(--danger); }
.cat-pal{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 9px; margin:-2px 0 2px 33px;
  background: var(--tint); border:1px solid #eae7e0; border-radius:10px;
}
.pal-dot{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:1px solid rgba(0,0,0,.14); padding:0; transition: transform .14s; }
.pal-dot:hover{ transform: scale(1.08); }
.pal-dot.sel{ box-shadow: 0 0 0 2px var(--tint), 0 0 0 3.5px var(--ink-2); }
.pal-free{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color: var(--ink-3); cursor:pointer; }
.pal-free input[type="color"]{ width:26px; height:26px; padding:0; border:1px solid #ddd9d0; border-radius:7px; background:none; cursor:pointer; }

/* ============================ ダイアログ ============================ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(30,30,28,.32); z-index:90;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: fade-in .2s var(--ease-out);
}
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  position:fixed; z-index:95; left:50%; top:50%; transform:translate(-50%,-50%);
  width: min(330px, calc(100vw - 32px));
  background:#fff; border-radius:16px; padding:20px;
  box-shadow: 0 30px 70px -14px rgba(35,33,28,.42), 0 4px 14px rgba(35,33,28,.10);
  animation: modal-in .26s var(--ease-out);
  max-height: calc(100vh - 40px); overflow:auto; overscroll-behavior: contain;
}
@keyframes modal-in{ from{ opacity:0; transform: translate(-50%,-46%) scale(.96);} to{ opacity:1; transform: translate(-50%,-50%) scale(1); } }
.modal.wide{ width: min(430px, calc(100vw - 32px)); }
.modal-title{ font-size:15px; font-weight:600; letter-spacing:.01em; }
.modal-body{ font-size:13px; color: var(--ink-2); margin:7px 0 15px; line-height:1.6; }
.modal-actions{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.modal-actions.row{ flex-direction:row; }
.modal-actions.row .btn{ flex:1; }

/* ---- マップ一覧 / ゴミ箱 ---- */
.seg{
  display:flex; gap:2px; padding:3px; margin-top:12px;
  border:1px solid rgba(35,33,28,.10); border-radius:11px;
  background:#e6e4dd; box-shadow: inset 0 1px 2px rgba(35,33,28,.06);
}
.seg-b{
  flex:1; min-height:32px; border:0; background:none; border-radius:9px;
  font-size:12.5px; font-weight:500; color: var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition: background .14s, color .14s, box-shadow .14s;
}
.seg-b:hover{ color: var(--ink); }
.seg-b.sel{ background:#fff; color: var(--ink); font-weight:600; box-shadow: var(--shadow-1); }
.seg-n{
  min-width:17px; height:17px; padding:0 5px; border-radius:99px;
  background: var(--ink-4); color:#fff; font-size:10px; line-height:17px;
  font-family: var(--cap-font);
}
.seg-b.sel .seg-n{ background: var(--accent); }

.map-list{ display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow:auto; }
.map-list .empty{
  padding:26px 10px; text-align:center; color: var(--ink-3); font-size:12.5px; line-height:1.8;
}
.map-item.trashed{ cursor:default; background:#fbfaf7; }
.map-item.trashed:hover{ background:#fbfaf7; border-color:#e6e3db; }
.map-item .mi-restore{ flex:0 0 auto; min-height:32px; font-size:12px; padding:0 11px; }
.mi-days{ color: var(--danger); }
.map-item{
  display:flex; align-items:center; gap:10px;
  border:1px solid #e6e3db; border-radius:11px; background:#fbfaf7;
  padding:10px 10px 10px 13px; cursor:pointer;
  transition: background .14s, border-color .14s;
}
.map-item:hover{ background:#fff; border-color:#cfccc3; }
.map-item.cur{ border-color: var(--accent); background: var(--accent-soft); }
.map-item .mi-main{ flex:1; min-width:0; }
.map-item .mi-name{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-item .mi-sub{ font-size:11px; color: var(--ink-3); margin-top:3px; font-family: var(--cap-font); }
.map-item .mi-btn{
  flex:0 0 auto; border:0; background:none; color: var(--ink-3);
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:15px;
}
.map-item .mi-btn:hover{ background: var(--tint-2); color: var(--ink); }
.map-item.edit{ flex-wrap:wrap; background:#fff; border-color: var(--accent); cursor:default; }
.map-item .mi-input{
  flex:1; min-width:0; padding:8px 10px; font-size:13.5px;
  border:1px solid #ddd9d0; border-radius:9px; outline:0; background:#fff;
}
.map-item .mi-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.map-item .mi-acts{ display:flex; gap:6px; width:100%; }
.map-item .mi-acts .btn{ flex:1; font-size:12px; padding:0 6px; min-height:32px; }

/* ---- 使い方 ---- */
.help-body{ font-size:13px; color: var(--ink-2); line-height:1.85; margin-top:6px; }
.help-body h4{ font-size:11px; letter-spacing:.10em; color: var(--ink-3); margin:14px 0 4px; }
.help-body h4:first-child{ margin-top:2px; }
.help-body ul{ margin:0; padding-left:1.15em; }
.help-body b{ color: var(--ink); }

/* ---- 同期 ---- */
.sync-note{ font-size:11.5px; color: var(--ink-3); line-height:1.7; margin-top:10px; }
.sync-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color: var(--ink-2); padding:6px 0; border-bottom:1px solid #f0eee8; }
.sync-row b{ color: var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sync-auto{ margin-top:12px; }

/* ============================ トースト ============================ */
.toast{
  position: fixed; left:50%;
  bottom: calc(82px + env(safe-area-inset-bottom));   /* 下の操作バーに重ならない高さ */
  transform: translateX(-50%);
  background: rgba(30,30,28,.94); color:#fff;
  font-size:13px; padding:11px 18px; border-radius:99px; z-index:100;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
  animation: pop-in .26s var(--ease-out);
  max-width: calc(100vw - 40px); text-align:center;
}
@keyframes pop-in{ from{ opacity:0; transform: translate(-50%, 14px) scale(.96);} to{ opacity:1; transform: translate(-50%,0) scale(1); } }

/* ============================ タッチ端末 ============================ */
@media (pointer: coarse){
  .btn{ min-height:40px; }
  .btn.icon{ min-width:42px; }
  .nd-add{ width:32px; height:32px; font-size:17px; }
  .nd-add.r{ margin-top:-16px; right:-42px; }
  .nd-add.l{ margin-top:-16px; left:-42px; }
  .nd-add.dr{ bottom:-16px; right:-16px; }
  .nd-add.dl{ bottom:-16px; left:-16px; }
  .node.folded .nd-add.r{ right:-74px; }
  .node.folded .nd-add.l{ left:-74px; }

  .nd-more{ width:32px; height:32px; top:-15px; right:-15px; font-size:16px; }
  .nd-fold{ min-width:26px; height:26px; margin-top:-13px; }
  .node{ padding:10px 13px; }
  .nd-chk{ width:20px; height:20px; }
  /* ホバーが無いので、選んでいるノードだけ ＋ と ⋯ を出す */
  .node:hover .nd-add, .node:hover .nd-more{ display:none; }
  .node.sel .nd-add, .node.sel .nd-more{ display:inline-flex; }
}

@media (max-width: 560px){
  /* ↶ ↷ ⌕ を出すぶん、名前と「保存済み」を詰める */
  .map-pick{ max-width: 28vw; }
  .toolbar{ gap:5px; padding-left:10px; padding-right:10px; }
  .btn.icon{ padding:0 7px; min-width:34px; }
  .saved{ font-size:0; gap:0; margin-right:0; }   /* 丸い印だけ残す */
  .saved::before{ width:7px; height:7px; }
  .ab{ min-width:52px; }
  .ab-l{ font-size:10px; }
  .zoombar{ bottom: calc(78px + env(safe-area-inset-bottom)); }
  .toast{ bottom: calc(136px + env(safe-area-inset-bottom)); }   /* 拡大縮小のボタンより上に */
  /* 画面が狭いときは、ノードの詳細を画面いっぱいに近づける（右がはみ出さないように） */
  .pop{ width: calc(100vw - 24px); }
}

/* ============================ 印刷 ============================ */
@media print{
  @page{ size: A4 landscape; margin: 10mm; }
  html, body{ overflow: visible; height:auto; background:#fff; }
  .no-print, .toolbar, .actbar, .zoombar, .findbar, .toast{ display:none !important; }
  .stage{
    position: static; inset:auto; overflow: visible;
    background-image:none; width:auto; height:auto;
  }
  .world{ position: relative; }
  .node{ box-shadow:none !important; }
  .nd-add{ display:none !important; }
}

/* ============================ レイアウトの選択 ============================ */
.lay-list{ display:flex; flex-direction:column; gap:7px; max-height:56vh; overflow:auto; }
.lay-item{
  display:flex; align-items:center; gap:12px; text-align:left;
  border:1px solid #e6e3db; border-radius:12px; background:#fbfaf7;
  padding:9px 12px 9px 9px; cursor:pointer; color: var(--ink);
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.lay-item:hover{ background:#fff; border-color:#cfccc3; box-shadow: var(--shadow-1); }
.lay-item.sel{ border-color: var(--accent); background: var(--accent-soft); }
.lay-fig{
  flex:0 0 auto; width:64px; height:44px;
  background:#fff; border:1px solid #eae7e0; border-radius:8px;
}
.lay-item.sel .lay-fig{ border-color:#bcd3ca; }
.lay-fig rect{ fill:#e4e1d9; }
.lay-fig rect.on{ fill: var(--accent); }
.lay-fig path{ fill:none; stroke:#b7b4ab; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lay-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lay-txt b{ font-size:13px; font-weight:600; }
.lay-txt i{ font-size:11.5px; color: var(--ink-3); font-style:normal; }
.lay-note{ font-size:11.5px; color: var(--ink-3); line-height:1.7; margin-top:12px; }