/* =====================================================================
 * editor.css — エディタ chrome（操作UI自体）のスタイル
 *
 * 設計方針（モダンSaaS / Linear・Vercel・Notion 系の質感）:
 *  - 中立グレー基調 + 上品な単一アクセント(slate-blue)。べた塗りインディゴは廃止
 *  - 8pxベースの余白スケール、控えめな角丸、3段の影階層、薄いborder
 *  - system-ui タイポ階層（見出し/ラベル/補助）。字間・行間を製品グレードに
 *  - アイコンは index.html 側のインラインSVG線アイコン（stroke currentColor）
 *  - マイクロインタラクションは控えめ。prefers-reduced-motion 尊重
 *
 * 出力サイトのトークン(--rsk-*)とは分離し、エディタ専用トークン(--ed-*)で統一。
 * editor.js が参照する id / class / data-* は一切変更していない（class追加のみ）。
 * ===================================================================== */

:root{
  /* ---- 中立パレット（neutral / slate 系） ---- */
  --ed-bg:#f4f5f7;             /* アプリ背景（やや冷たいグレー） */
  --ed-canvas-bg:#eceef1;      /* canvasまわりの地（紙を浮かせる） */
  --ed-surface:#ffffff;        /* パネル・カード面 */
  --ed-surface-2:#f8f9fb;      /* くぼみ・サブ面 */

  --ed-ink:#1a1d23;            /* 主テキスト */
  --ed-ink-soft:#565b66;       /* 副テキスト */
  --ed-ink-faint:#8b909b;      /* 補助・プレースホルダ */

  --ed-line:#e6e8ec;           /* 標準border */
  --ed-line-strong:#d6d9df;    /* ホバー時のborder */
  --ed-line-soft:#eef0f3;      /* 区切りの薄線 */

  /* 上品な単一アクセント（slate-blue。彩度を抑えた青） */
  --ed-brand:#4f5bd5;
  --ed-brand-ink:#3f49b8;
  --ed-brand-strong:#363fa0;
  --ed-brand-bg:#f1f2fc;       /* 薄いアクセント面 */
  --ed-brand-bg-2:#e7e9fa;     /* ホバー時のアクセント面 */
  --ed-brand-line:#cfd3f3;     /* アクセントの線 */
  --ed-ring:rgba(79,91,213,.30);/* フォーカスリング */

  --ed-danger:#d8443a;
  --ed-danger-ink:#b3362e;
  --ed-danger-bg:#fdf1f0;
  --ed-danger-line:#f1c4c0;
  --ed-ok:#1f9d57;

  /* ---- 影の階層（柔らかく低彩度に） ---- */
  --ed-shadow-xs:0 1px 1px rgba(18,22,31,.04);
  --ed-shadow-sm:0 1px 2px rgba(18,22,31,.06),0 1px 3px rgba(18,22,31,.05);
  --ed-shadow-md:0 6px 16px -6px rgba(18,22,31,.18),0 2px 6px -2px rgba(18,22,31,.10);
  --ed-shadow-lg:0 24px 56px -16px rgba(18,22,31,.34),0 8px 20px -10px rgba(18,22,31,.20);

  /* ---- 角丸 ---- */
  --ed-radius:12px;
  --ed-radius-sm:8px;
  --ed-radius-xs:6px;
  --ed-radius-pill:999px;

  /* ---- モーション ---- */
  --ed-ease:cubic-bezier(.2,.7,.3,1);
  --ed-t-fast:.12s;
  --ed-t:.18s;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color:var(--ed-ink);background:var(--ed-bg);
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
  -webkit-user-select:none;user-select:none;
  font-size:14px;line-height:1.5;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font-family:inherit;}

/* インラインSVGアイコンの共通挙動 */
svg{display:block;}
.ic,.ico,.pal-add-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ic svg,.pal-add-ico svg{width:1em;height:1em;}
.ic{font-size:16px;line-height:0;color:currentColor;}

/* ============ トップバー ============ */
header.app-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:0 14px;height:52px;background:var(--ed-surface);
  border-bottom:1px solid var(--ed-line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--ed-ink);}
.brand .logo{
  width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--ed-brand),var(--ed-brand-strong));color:#fff;
  box-shadow:var(--ed-shadow-sm),inset 0 1px 0 rgba(255,255,255,.18);
}
.brand .logo svg{width:16px;height:16px;}
.app-bar .sep{width:1px;height:22px;background:var(--ed-line);margin:0 2px;}
.app-bar .tpl-wrap{display:flex;align-items:center;gap:8px;}
.app-bar .tpl-label{font-size:12px;color:var(--ed-ink-faint);font-weight:600;letter-spacing:.01em;}
.app-bar select{
  font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--ed-line);border-radius:var(--ed-radius-sm);
  padding:6px 28px 6px 10px;background:var(--ed-surface);color:var(--ed-ink);cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b909b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;-webkit-appearance:none;appearance:none;
  transition:border-color var(--ed-t-fast),box-shadow var(--ed-t-fast);
}
.app-bar select:hover{border-color:var(--ed-line-strong);}
.app-bar select:focus{outline:none;border-color:var(--ed-brand);box-shadow:0 0 0 3px var(--ed-ring);}
.app-bar .spacer{flex:1;}

/* ボタン汎用 */
.btn{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.005em;
  border:1px solid var(--ed-line);background:var(--ed-surface);color:var(--ed-ink);
  border-radius:var(--ed-radius-sm);padding:7px 12px;display:inline-flex;align-items:center;gap:6px;
  box-shadow:var(--ed-shadow-xs);
  transition:background var(--ed-t-fast),border-color var(--ed-t-fast),box-shadow var(--ed-t-fast),
             color var(--ed-t-fast),transform var(--ed-t-fast),opacity var(--ed-t-fast);
}
.btn:hover{background:var(--ed-surface-2);border-color:var(--ed-line-strong);}
.btn:active{transform:translateY(1px);box-shadow:none;}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ed-ring);}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;}
.btn[disabled]:hover{background:var(--ed-surface);border-color:var(--ed-line);}
.btn .ic{font-size:16px;margin:0 -1px;color:var(--ed-ink-soft);}
.btn-primary{
  background:var(--ed-brand);border-color:transparent;color:#fff;
  box-shadow:var(--ed-shadow-sm),inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary .ic{color:rgba(255,255,255,.92);}
.btn-primary:hover{background:var(--ed-brand-ink);border-color:transparent;}
.btn-primary:active{background:var(--ed-brand-strong);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ed-ink-soft);box-shadow:none;}
.btn-ghost .ic{color:var(--ed-ink-faint);}
.btn-ghost:hover{background:var(--ed-surface-2);border-color:transparent;color:var(--ed-ink);}
.btn-ghost:hover .ic{color:var(--ed-ink-soft);}
.file-btn{cursor:pointer;}

/* ============ 本体3ペイン ============ */
main.layout{flex:1 1 auto;display:flex;min-height:0;}

/* ---- 左: パレット ---- */
aside.palette{
  flex:0 0 218px;background:var(--ed-surface);border-right:1px solid var(--ed-line);
  overflow-y:auto;padding:16px 14px 24px;
}
.palette h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ed-ink-faint);
  margin:0 0 9px;font-weight:700;
}
.palette-group{margin-bottom:22px;}
.palette-group:last-child{margin-bottom:0;}
.pal-item{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--ed-line);border-radius:var(--ed-radius-sm);background:var(--ed-surface);
  padding:9px 11px;margin-bottom:6px;cursor:grab;font-size:13px;font-weight:500;color:var(--ed-ink);
  touch-action:none;box-shadow:var(--ed-shadow-xs);
  transition:border-color var(--ed-t-fast),background var(--ed-t-fast),box-shadow var(--ed-t-fast),transform var(--ed-t-fast);
}
.pal-item:hover{border-color:var(--ed-line-strong);background:var(--ed-surface);box-shadow:var(--ed-shadow-sm);transform:translateY(-1px);}
.pal-item:hover .ico{background:var(--ed-brand-bg-2);color:var(--ed-brand-ink);border-color:var(--ed-brand-line);}
.pal-item:active{cursor:grabbing;transform:translateY(0);box-shadow:var(--ed-shadow-xs);}
.pal-item.rsk-pal-dragging{opacity:.4;}
.pal-item .ico{
  width:28px;height:28px;flex:0 0 28px;
  background:var(--ed-surface-2);color:var(--ed-ink-soft);border:1px solid var(--ed-line);border-radius:var(--ed-radius-xs);
  transition:background var(--ed-t-fast),color var(--ed-t-fast),border-color var(--ed-t-fast);
}
.pal-item .ico svg{width:18px;height:18px;}
.pal-label{flex:1;min-width:0;}
.pal-add-row{
  width:100%;border:1px dashed var(--ed-brand-line);background:var(--ed-brand-bg);color:var(--ed-brand-ink);
  border-radius:var(--ed-radius-sm);padding:9px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  margin-bottom:6px;display:flex;align-items:center;gap:9px;
  transition:background var(--ed-t-fast),border-color var(--ed-t-fast),color var(--ed-t-fast);
}
.pal-add-row:last-child{margin-bottom:0;}
.pal-add-row:hover{background:var(--ed-brand-bg-2);border-color:var(--ed-brand);color:var(--ed-brand-strong);}
.pal-add-row:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ed-ring);}
.pal-add-ico{width:18px;height:18px;flex:0 0 18px;color:var(--ed-brand-ink);}

/* ---- 中央: canvas ---- */
section.canvas-wrap{
  flex:1 1 auto;overflow-y:auto;padding:30px;position:relative;background:var(--ed-canvas-bg);
}
.canvas{
  max-width:var(--rsk-maxw,1040px);margin:0 auto;background:var(--ed-surface);
  border-radius:14px;box-shadow:var(--ed-shadow-md);min-height:340px;padding:16px;
  border:1px solid rgba(18,22,31,.04);
  transition:max-width var(--ed-t) var(--ed-ease);
}
.canvas.canvas-mobile{max-width:390px;}

/* 行 */
.ed-row{
  position:relative;border:1.5px dashed transparent;border-radius:12px;
  margin:8px 0;padding:32px 8px 10px;display:flex;gap:10px;align-items:stretch;
  transition:border-color var(--ed-t-fast),background var(--ed-t-fast);
}
.ed-row:hover{border-color:var(--ed-line-strong);background:var(--ed-surface-2);}
.ed-row.rsk-row-dragging{opacity:.4;}
.ed-row.rsk-row-drop-before{box-shadow:0 -3px 0 var(--ed-brand);}
.ed-row.rsk-row-drop-after{box-shadow:0 3px 0 var(--ed-brand);}
.row-bar{
  position:absolute;top:6px;left:10px;right:10px;display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--ed-ink-soft);z-index:3;opacity:0;
  transition:opacity var(--ed-t-fast);
}
.ed-row:hover .row-bar,.ed-row:focus-within .row-bar{opacity:1;}
.row-grip{cursor:grab;font-size:14px;padding:0 4px;color:var(--ed-ink-faint);line-height:1;}
.row-grip:hover{color:var(--ed-brand);}
.row-bar .row-label{font-weight:600;color:var(--ed-ink-faint);letter-spacing:.01em;}
.row-bar button{
  font:inherit;font-size:11px;font-weight:600;cursor:pointer;
  border:1px solid var(--ed-line);background:var(--ed-surface);color:var(--ed-ink-soft);
  border-radius:var(--ed-radius-xs);padding:3px 9px;box-shadow:var(--ed-shadow-xs);
  transition:background var(--ed-t-fast),border-color var(--ed-t-fast),color var(--ed-t-fast);
}
.row-bar button:hover{background:var(--ed-surface-2);border-color:var(--ed-line-strong);color:var(--ed-ink);}
.row-bar button.del:hover{background:var(--ed-danger-bg);border-color:var(--ed-danger-line);color:var(--ed-danger);}
.row-bar select{
  font:inherit;font-size:11px;border:1px solid var(--ed-line);border-radius:var(--ed-radius-xs);
  padding:3px 6px;color:var(--ed-ink-soft);background:var(--ed-surface);cursor:pointer;box-shadow:var(--ed-shadow-xs);
}
.row-bar select:focus{outline:none;border-color:var(--ed-brand);box-shadow:0 0 0 2px var(--ed-ring);}
.row-bar .row-bar-spacer{flex:1;}

/* 列 */
.ed-col{
  position:relative;border:1.5px dashed var(--ed-line);border-radius:10px;
  min-height:80px;padding:10px;background:var(--ed-surface-2);
  display:flex;flex-direction:column;gap:8px;min-width:0;
  transition:border-color var(--ed-t-fast),background var(--ed-t-fast);
}
.ed-col.rsk-col-over{border-color:var(--ed-brand);background:var(--ed-brand-bg);}
.col-empty{
  color:var(--ed-ink-faint);font-size:12px;text-align:center;padding:18px 6px;line-height:1.6;
  border:1px dashed var(--ed-line);border-radius:8px;pointer-events:none;background:var(--ed-surface);
}
.col-resizer{
  flex:0 0 10px;align-self:stretch;cursor:col-resize;border-radius:6px;background:transparent;position:relative;
}
.col-resizer::after{content:"";position:absolute;inset:34% 3px;border-radius:4px;background:var(--ed-line-strong);transition:background var(--ed-t-fast);}
.col-resizer:hover::after{background:var(--ed-brand);}

/* ブロック */
.ed-block{
  position:relative;border:1.5px solid transparent;border-radius:9px;
  padding:8px;cursor:grab;touch-action:none;
  transition:border-color var(--ed-t-fast),background var(--ed-t-fast),box-shadow var(--ed-t-fast);
}
.ed-block:hover{border-color:var(--ed-brand-line);background:var(--ed-brand-bg);}
.ed-block:active{cursor:grabbing;}
.ed-block.rsk-block-dragging{opacity:.4;}
.ed-block.rsk-block-drop-before{box-shadow:0 -3px 0 var(--ed-brand);}
.ed-block.rsk-block-drop-after{box-shadow:0 3px 0 var(--ed-brand);}
.ed-block.rsk-selected{border-color:var(--ed-brand);background:var(--ed-brand-bg);box-shadow:0 0 0 3px var(--ed-ring);}
.block-tools{
  position:absolute;top:-13px;right:8px;display:none;gap:4px;z-index:4;
}
.ed-block:hover .block-tools,.ed-block.rsk-selected .block-tools{display:flex;}
.block-tools button{
  font:inherit;font-size:11px;line-height:1;cursor:pointer;font-weight:600;
  border:1px solid var(--ed-line);background:var(--ed-surface);color:var(--ed-ink-soft);border-radius:var(--ed-radius-xs);
  padding:4px 8px;box-shadow:var(--ed-shadow-sm);
  transition:background var(--ed-t-fast),border-color var(--ed-t-fast),color var(--ed-t-fast);
}
.block-tools button:hover{background:var(--ed-surface-2);border-color:var(--ed-line-strong);color:var(--ed-ink);}
.block-tools button.del:hover{background:var(--ed-danger-bg);border-color:var(--ed-danger-line);color:var(--ed-danger);}
.block-type-tag{
  position:absolute;top:-10px;left:8px;font-size:9.5px;font-weight:600;letter-spacing:.03em;
  background:var(--ed-ink);color:#fff;border-radius:5px;padding:2px 7px;display:none;z-index:4;
  box-shadow:var(--ed-shadow-sm);
}
.ed-block:hover .block-type-tag,.ed-block.rsk-selected .block-type-tag{display:inline-block;}
.ed-block.rsk-selected .block-type-tag{background:var(--ed-brand);}

/* ============ canvas 上のブロック見た目（出力CSSの簡易版・編集向け） ============ */
.blk{font-family:var(--rsk-font-base);color:var(--rsk-color-fg);white-space:pre-wrap;}
.blk-heading{font-family:var(--rsk-font-heading);font-weight:800;line-height:1.25;margin:2px 0;}
.blk-h1{font-size:30px;}.blk-h2{font-size:24px;}.blk-h3{font-size:19px;}
.blk-subheading{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--rsk-color-primary);margin:2px 0;}
.blk-paragraph{font-size:15px;line-height:1.7;color:var(--rsk-color-muted);margin:2px 0;}
.blk-list{margin:2px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--rsk-color-fg);}
.blk-list li{position:relative;padding-left:24px;}
.blk-list-check li::before{content:"\2713";position:absolute;left:0;color:var(--rsk-color-primary);font-weight:800;}
.blk-list-bullet li::before{content:"\2022";position:absolute;left:6px;color:var(--rsk-color-primary);font-weight:800;}
.blk-list-number{counter-reset:edli;}
.blk-list-number li{counter-increment:edli;}
.blk-list-number li::before{content:counter(edli)".";position:absolute;left:0;color:var(--rsk-color-primary);font-weight:800;}
.blk-quote{margin:2px 0;padding:14px 16px;background:var(--rsk-color-accent);border-radius:var(--rsk-radius);border-left:4px solid var(--rsk-color-primary);}
.blk-quote blockquote{margin:0;font-size:15px;line-height:1.7;color:var(--rsk-color-fg);font-weight:500;}
.blk-quote .quote-meta{margin-top:8px;display:flex;flex-direction:column;}
.blk-quote .quote-name{font-weight:800;font-size:13px;}
.blk-quote .quote-role{font-size:11px;color:var(--rsk-color-muted);}
.blk-button-wrap{display:flex;margin:2px 0;}
.blk-button{display:inline-flex;align-items:center;justify-content:center;background:var(--rsk-color-primary);color:var(--rsk-color-primary-fg);font-weight:700;font-size:14px;text-decoration:none;border-radius:999px;padding:10px 22px;}
.blk-button-outline{background:transparent;color:var(--rsk-color-primary);border:2px solid var(--rsk-color-primary);}
.blk-image{margin:2px 0;}
.blk-image .img-frame{display:block;width:100%;overflow:hidden;border-radius:var(--rsk-radius);background:var(--rsk-color-accent);}
.blk-image img{width:100%;height:100%;object-fit:cover;display:block;}
.blk-image .img-ph{display:flex;align-items:center;justify-content:center;color:var(--rsk-color-muted);font-size:13px;border:1px dashed var(--rsk-color-border);}
.blk-image .img-cap{margin-top:6px;font-size:12px;color:var(--rsk-color-muted);}
.blk-stat-card{background:var(--rsk-color-bg);border:1px solid var(--rsk-color-border);border-radius:var(--rsk-radius);padding:16px;text-align:center;box-shadow:var(--ed-shadow-sm);}
.blk-stat-card .stat-value{font-size:34px;font-weight:800;color:var(--rsk-color-primary);line-height:1;}
.blk-stat-card .stat-value .unit{font-size:.45em;margin-left:3px;}
.blk-stat-card .stat-label{font-size:13px;color:var(--rsk-color-fg);font-weight:600;margin-top:6px;}
.blk-stat-card .stat-note{font-size:10px;color:var(--rsk-color-muted);margin-top:4px;}
.blk-divider hr{border:none;border-top:1px solid var(--rsk-color-border);margin:8px 0;}
.blk-spacer{border-radius:6px;}
.canvas .blk-spacer{background:repeating-linear-gradient(45deg,var(--ed-surface-2),var(--ed-surface-2) 6px,var(--ed-line-soft) 6px,var(--ed-line-soft) 12px);
  display:flex;align-items:center;justify-content:center;color:var(--ed-ink-faint);font-size:11px;}

/* ============ 右: インスペクタ ============ */
aside.inspector{
  flex:0 0 288px;background:var(--ed-surface);border-left:1px solid var(--ed-line);
  overflow-y:auto;padding:0;
}
.insp-head{
  padding:16px 16px 13px;border-bottom:1px solid var(--ed-line-soft);
  position:sticky;top:0;background:var(--ed-surface);z-index:2;
}
.insp-head h2{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ed-ink-faint);margin:0;font-weight:700;}
.insp-head .insp-kind{margin-top:8px;font-size:15px;font-weight:700;color:var(--ed-ink);display:flex;align-items:center;gap:9px;letter-spacing:-.01em;}
.insp-head .insp-kind .ico{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:var(--ed-brand-bg);color:var(--ed-brand-ink);border:1px solid var(--ed-brand-line);
  border-radius:var(--ed-radius-xs);font-size:13px;font-weight:700;
}
.insp-body{padding:16px;}
.insp-empty{color:var(--ed-ink-faint);font-size:13px;line-height:1.75;padding:28px 18px;text-align:center;}
.insp-empty .big{font-size:30px;display:block;margin-bottom:10px;opacity:.45;}
.insp-section-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ed-ink-faint);
  font-weight:700;margin:20px 0 11px;padding-top:16px;border-top:1px solid var(--ed-line-soft);
}
.insp-section-title:first-child{border-top:none;padding-top:0;margin-top:0;}
.insp-field{margin-bottom:14px;}
.insp-field>label{display:block;font-size:11.5px;font-weight:600;color:var(--ed-ink-soft);margin-bottom:6px;letter-spacing:.005em;}
.insp-field input,.insp-field textarea,.insp-field select{
  width:100%;font:inherit;font-size:13px;border:1px solid var(--ed-line);border-radius:var(--ed-radius-sm);padding:8px 10px;
  background:var(--ed-surface);color:var(--ed-ink);-webkit-user-select:text;user-select:text;
  transition:border-color var(--ed-t-fast),box-shadow var(--ed-t-fast),background var(--ed-t-fast);
}
.insp-field input::placeholder,.insp-field textarea::placeholder{color:var(--ed-ink-faint);}
.insp-field input:hover,.insp-field textarea:hover,.insp-field select:hover{border-color:var(--ed-line-strong);}
.insp-field textarea{min-height:84px;resize:vertical;line-height:1.6;}
.insp-field select{
  cursor:pointer;padding-right:30px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b909b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
}
.insp-field input:focus,.insp-field textarea:focus,.insp-field select:focus{
  outline:none;border-color:var(--ed-brand);box-shadow:0 0 0 3px var(--ed-ring);background:var(--ed-surface);
}
/* セグメント（align など） */
.insp-seg{display:flex;gap:3px;border:1px solid var(--ed-line);border-radius:var(--ed-radius-sm);padding:3px;background:var(--ed-surface-2);}
.insp-seg button{
  flex:1;font:inherit;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;
  color:var(--ed-ink-soft);border-radius:var(--ed-radius-xs);padding:6px 4px;
  transition:background var(--ed-t-fast),color var(--ed-t-fast),box-shadow var(--ed-t-fast);
}
.insp-seg button:hover{color:var(--ed-ink);}
.insp-seg button.active{background:var(--ed-surface);color:var(--ed-brand-ink);box-shadow:var(--ed-shadow-sm);}
.insp-seg button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ed-ring);}
/* 色入力 */
.insp-color{display:flex;align-items:center;gap:8px;}
.insp-color input[type=color]{width:38px;height:36px;flex:0 0 38px;padding:3px;cursor:pointer;border-radius:var(--ed-radius-sm);border:1px solid var(--ed-line);background:var(--ed-surface);}
.insp-color input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
.insp-color input[type=color]::-webkit-color-swatch{border:none;border-radius:5px;}
.insp-color input[type=text]{flex:1;}
.insp-color .insp-color-clear{flex:0 0 auto;font-size:11.5px;font-weight:600;border:1px solid var(--ed-line);background:var(--ed-surface);border-radius:var(--ed-radius-xs);padding:7px 9px;cursor:pointer;color:var(--ed-ink-soft);box-shadow:var(--ed-shadow-xs);transition:background var(--ed-t-fast),border-color var(--ed-t-fast),color var(--ed-t-fast);}
.insp-color .insp-color-clear:hover{background:var(--ed-surface-2);border-color:var(--ed-line-strong);color:var(--ed-ink);}
/* リスト項目編集 */
.insp-list-row{display:flex;gap:6px;margin-bottom:6px;}
.insp-list-row input{flex:1;}
.insp-list-row button{flex:0 0 auto;border:1px solid var(--ed-line);background:var(--ed-surface);border-radius:var(--ed-radius-xs);width:34px;cursor:pointer;color:var(--ed-ink-faint);font-weight:600;font-size:15px;transition:background var(--ed-t-fast),border-color var(--ed-t-fast),color var(--ed-t-fast);}
.insp-list-row button:hover{background:var(--ed-danger-bg);border-color:var(--ed-danger-line);color:var(--ed-danger);}
.insp-list-add{width:100%;border:1px dashed var(--ed-brand-line);background:var(--ed-brand-bg);color:var(--ed-brand-ink);border-radius:var(--ed-radius-sm);padding:8px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--ed-t-fast),border-color var(--ed-t-fast);}
.insp-list-add:hover{background:var(--ed-brand-bg-2);border-color:var(--ed-brand);}

/* 画像挿入 */
.insp-file-btn{
  display:block;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border:1px dashed var(--ed-brand-line);background:var(--ed-brand-bg);color:var(--ed-brand-ink);
  border-radius:var(--ed-radius-sm);padding:12px;text-align:center;
  transition:background var(--ed-t-fast),border-color var(--ed-t-fast);
}
.insp-file-btn:hover{background:var(--ed-brand-bg-2);border-color:var(--ed-brand);}
.insp-file-msg{font-size:11px;line-height:1.5;margin-top:6px;color:var(--ed-ink-soft);min-height:14px;}
.insp-thumb{width:100%;border:1px solid var(--ed-line);border-radius:var(--ed-radius-sm);display:block;background:var(--ed-surface-2);object-fit:contain;max-height:170px;}
.insp-clear-btn{
  margin-top:7px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--ed-danger-line);background:var(--ed-surface);color:var(--ed-danger);border-radius:var(--ed-radius-sm);padding:8px 10px;width:100%;
  transition:background var(--ed-t-fast);
}
.insp-clear-btn:hover{background:var(--ed-danger-bg);}
.insp-meta{font-size:11px;color:var(--ed-ink-faint);margin-top:18px;border-top:1px solid var(--ed-line-soft);padding-top:12px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;}

/* 画像ドラッグオーバーレイ */
.canvas-wrap.rsk-file-over::after{
  content:"画像をドロップして挿入";position:absolute;inset:14px;border:2.5px dashed var(--ed-brand);border-radius:16px;
  background:rgba(241,242,252,.90);color:var(--ed-brand-ink);font-weight:700;font-size:17px;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:50;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}

/* ============ トースト（保存/プレビューのフィードバック） ============ */
.toast-host{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{
  background:var(--ed-ink);color:#fff;font-size:13px;font-weight:500;border-radius:var(--ed-radius-sm);padding:11px 16px;
  box-shadow:var(--ed-shadow-lg);opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity var(--ed-t) var(--ed-ease),transform var(--ed-t) var(--ed-ease);display:flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.08);
}
.toast.show{opacity:1;transform:translateY(0) scale(1);}
.toast.ok::before{content:"\2713";color:#4ade80;font-weight:800;}
.toast.err{background:var(--ed-danger-ink);}

/* ============ プレビュー オーバーレイ ============ */
.preview-overlay{position:fixed;inset:0;background:rgba(16,20,28,.55);z-index:100;display:none;flex-direction:column;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.preview-overlay.open{display:flex;}
.preview-top{flex:0 0 auto;background:var(--ed-surface);border-bottom:1px solid var(--ed-line);display:flex;align-items:center;gap:12px;padding:0 16px;height:52px;}
.preview-top strong{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px;letter-spacing:-.01em;}
.preview-top strong .ic{color:var(--ed-ink-soft);}
.preview-top .spacer{flex:1;}
.preview-top .vp{display:inline-flex;border:1px solid var(--ed-line);border-radius:var(--ed-radius-sm);padding:3px;background:var(--ed-surface-2);gap:3px;}
.preview-top .vp button{font:inherit;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--ed-ink-soft);border-radius:var(--ed-radius-xs);padding:6px 11px;display:inline-flex;align-items:center;gap:6px;transition:background var(--ed-t-fast),color var(--ed-t-fast),box-shadow var(--ed-t-fast);}
.preview-top .vp button .ic{font-size:15px;color:currentColor;}
.preview-top .vp button:hover{color:var(--ed-ink);}
.preview-top .vp button.active{background:var(--ed-surface);color:var(--ed-brand-ink);box-shadow:var(--ed-shadow-sm);}
.preview-frame-wrap{flex:1 1 auto;overflow:auto;background:var(--ed-canvas-bg);padding:26px;display:flex;justify-content:center;}
#previewFrame{border:none;background:#fff;width:100%;max-width:var(--rsk-maxw,1040px);height:100%;box-shadow:var(--ed-shadow-lg);transition:max-width var(--ed-t) var(--ed-ease);border-radius:10px;}
#previewFrame.vp-mobile{max-width:375px;}

/* ============ JSON モーダル ============ */
.json-modal{position:fixed;inset:0;background:rgba(16,20,28,.55);z-index:110;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:20px;}
.json-modal.open{display:flex;}
.json-box{background:var(--ed-surface);border-radius:var(--ed-radius);width:min(720px,92vw);max-height:84vh;display:flex;flex-direction:column;padding:22px;box-shadow:var(--ed-shadow-lg);border:1px solid var(--ed-line);}
.json-box h3{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:-.01em;}
.json-box textarea{flex:1;min-height:340px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;border:1px solid var(--ed-line);border-radius:var(--ed-radius-sm);padding:13px;-webkit-user-select:text;user-select:text;line-height:1.6;background:var(--ed-surface-2);color:var(--ed-ink);}
.json-box textarea:focus{outline:none;border-color:var(--ed-brand);box-shadow:0 0 0 3px var(--ed-ring);background:var(--ed-surface);}
.json-box .json-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.json-err{font-size:12px;margin-top:8px;min-height:16px;color:var(--ed-danger);font-weight:500;}

/* ============ ドラッグゴースト ============ */
.drag-ghost{
  position:fixed;z-index:200;pointer-events:none;opacity:.97;
  background:var(--ed-brand);color:#fff;font-size:12.5px;font-weight:600;
  border-radius:var(--ed-radius-sm);padding:8px 13px;box-shadow:var(--ed-shadow-lg);
  transform:translate(-50%,-130%);white-space:nowrap;display:flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.12);
}

/* ============ スクロールバー（控えめに） ============ */
aside.palette::-webkit-scrollbar,aside.inspector::-webkit-scrollbar,
section.canvas-wrap::-webkit-scrollbar,.preview-frame-wrap::-webkit-scrollbar,
.json-box textarea::-webkit-scrollbar{width:11px;height:11px;}
aside.palette::-webkit-scrollbar-thumb,aside.inspector::-webkit-scrollbar-thumb,
section.canvas-wrap::-webkit-scrollbar-thumb,.preview-frame-wrap::-webkit-scrollbar-thumb,
.json-box textarea::-webkit-scrollbar-thumb{background:rgba(18,22,31,.16);border-radius:99px;border:3px solid transparent;background-clip:padding-box;}
aside.palette::-webkit-scrollbar-thumb:hover,aside.inspector::-webkit-scrollbar-thumb:hover,
section.canvas-wrap::-webkit-scrollbar-thumb:hover,.preview-frame-wrap::-webkit-scrollbar-thumb:hover,
.json-box textarea::-webkit-scrollbar-thumb:hover{background:rgba(18,22,31,.28);border:3px solid transparent;background-clip:padding-box;}

/* ============ reduced-motion 対応 ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .canvas,#previewFrame{transition:none !important;}
  .pal-item:hover{transform:none;}
}