/* ============================================================================
 *  FBリンク 旅パンフレット制作システム — 01-base-editor.css（自動分割）
 * ========================================================================== */

  /* ==========================================================================
   * デザイントークン
   *   近単色のインディゴ。色は「意味」だけを運びます（状態＝緑/琥珀/赤）。
   *   数値（mm・dpi・座標）は等幅で組み、印刷工具としての性格を出します。
   * ======================================================================== */
  :root{
    /* インク（文字・面） */
    --ink:#0E1524;          /* 最も濃い。見出し・重要文字 */
    --ink-2:#4A5468;        /* 本文・二次情報 */
    --ink-3:#8B93A6;        /* キャプション・補助 */
    --ink-4:#B4BAC7;        /* プレースホルダ */

    /* 面 */
    --paper:#F7F8FA;        /* アプリ背景（わずかに寒色） */
    --surface:#FFFFFF;      /* カード・パネル */
    --surface-2:#FBFBFD;    /* わずかに沈んだ面 */
    --wash:#F0F2F8;         /* 選択・ホバーの下地 */

    /* 罫（Linear系は影より罫で構造を作る） */
    --line:#E4E7EE;
    --line-2:#EFF1F5;
    --line-strong:#D4D9E3;

    /* ブランド（FBリンクのネイビーを基点に、操作色を1段明るく） */
    --brand:#1E2B72;
    --brand-2:#3D4FC4;      /* hover / focus / 選択 */
    --brand-wash:#EDF0FB;
    --brand-ink:#152056;

    /* 意味を持つ色（装飾には使わない） */
    --ok:#2F7D5B;   --ok-wash:#E6F2EC;
    --warn:#A66A1F; --warn-wash:#FBF0E1;
    --danger:#B4302B; --danger-wash:#FBECEB;

    /* 影は極小。構造は罫で作る */
    --sh-1:0 1px 2px rgba(14,21,36,.04);
    --sh-2:0 4px 16px rgba(14,21,36,.08);
    --sh-3:0 16px 48px rgba(14,21,36,.14);

    /* 角丸：やや控えめ（丸すぎると玩具っぽくなる） */
    --r-1:6px; --r-2:8px; --r-3:12px;

    /* 書体 */
    --ui:'IBM Plex Sans JP','Zen Kaku Gothic New',sans-serif;   /* 画面のUI */
    --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;         /* 数値・寸法 */
    --body:'IBM Plex Sans JP','Zen Kaku Gothic New',sans-serif;

    /* 互換（旧クラス名が参照している変数） */
    --brand-deep:var(--brand-ink);
    --peri:#8C97D9;
    --brand-soft:var(--brand-wash);
    --bg:var(--paper);
    --panel:var(--surface);
    --sub:var(--ink-3);
    --sel:var(--brand-2);
    --util:var(--mono);

    --A4W:794px;--A4H:1123px;
    --rail:232px;           /* 左レールの幅 */
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);overflow:hidden;}
  .topbar{display:flex;align-items:center;gap:14px;height:54px;background:var(--brand);color:#fff;padding:0 18px;flex:none;z-index:100;}
  .topbar .logo{display:flex;align-items:center;gap:9px;font-family:var(--util);font-size:13.5px;font-weight:600;}
  .topbar .logo img{height:20px;}
  .topbar .spacer{margin-left:auto;}
  .topbar .tbtn{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-family:var(--util);font-size:12px;padding:7px 12px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
  .topbar .tbtn:hover{background:rgba(255,255,255,.14);}
  .topbar .tbtn:disabled{opacity:.4;cursor:default;}
  .topbar .tbtn.primary{background:#fff;color:var(--brand);border-color:#fff;font-weight:700;}
  .workspace{display:flex;height:calc(100vh - 54px);position:relative;}
  .stage{flex:1;overflow:auto;position:relative;background:var(--bg);}
  .stage.panning{cursor:grabbing;}
  .stage.panready{cursor:grab;}
  /* 作業台。ページの外にはみ出す効果（発光・影・枠線）を
     スクロールコンテナに切られずに描けるよう、panner をページより一回り大きくし、
     scaler をその内側にオフセットして置く（余白＝SPILL）。 */
  .panner{position:relative;margin:auto;}
  .scaler{transform-origin:top left;position:absolute;top:0;left:0;}
  /* キャンバスは切り落とさない（effects が途中で切れて壊れて見えるのを防ぐ）。
     代わりに「トリムガード」で仕上がり線の外を暗くし、
     “ここから先は裁ち落とされる” ことを正直に見せる（InDesign 等と同じ考え方）。 */
  .canvas{position:relative;background:#fff;box-shadow:0 2px 18px rgba(20,28,60,.10);overflow:visible;}
  /* 仕上がり線（トリム）。ページの外に出た効果（発光・影・枠線）は
     そのまま作業台に描かれる（Canva などと同じ）。印刷では切られるが、
     編集中は見えていないと作りようがないため。 */
  .trim-guard{
    position:absolute; inset:0; pointer-events:none; z-index:9997;
    outline:1px solid rgba(14,21,36,.22);
    outline-offset:0;
  }
  .canvas.tri{width:var(--A4H);height:var(--A4W);}
  .canvas.single{width:var(--A4W);height:var(--A4H);}
  .canvas.single.land{width:var(--A4H);height:var(--A4W);}
  #pdfStage{position:fixed;left:-99999px;top:0;background:#fff;}
  #pdfStage .canvas{box-shadow:none;}
  .stage-foot{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:10px;align-items:center;pointer-events:none;}
  .stage-foot .lbl{background:rgba(27,32,51,.8);color:#fff;font-family:var(--util);font-size:11px;padding:6px 13px;border-radius:999px;pointer-events:auto;}
  .zoomctl{display:flex;gap:4px;pointer-events:auto;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;}
  .zoomctl button{border:none;background:transparent;width:26px;height:24px;border-radius:999px;cursor:pointer;color:var(--sub);font-family:var(--util);font-size:13px;}
  .zoomctl button:hover{background:var(--brand-soft);color:var(--brand);}
  .zoomctl .zval{font-family:var(--util);font-size:11px;color:var(--sub);align-self:center;padding:0 4px;min-width:38px;text-align:center;}
  .fold-guide{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(30,43,114,.28);pointer-events:none;z-index:99998;}

  .blk{position:absolute;}
  body.editing .blk{cursor:move;}
  .blk.sel{outline:2px solid var(--sel);outline-offset:1px;}
  body.editing .blk:hover{outline:1.5px solid rgba(43,124,255,.45);outline-offset:1px;}
  .blk .handle{position:absolute;width:12px;height:12px;background:#fff;border:1.5px solid var(--sel);border-radius:50%;right:-6px;bottom:-6px;cursor:nwse-resize;display:none;z-index:99999;}
  .blk.sel .handle{display:block;}
  .blk.bg{cursor:move;}
  .blk.bg.sel .handle{display:block;}

  .side{width:310px;flex:none;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;}
  .side-body{flex:1;overflow-y:auto;padding:16px;}
  .pageseg{display:flex;background:var(--brand-soft);border-radius:9px;padding:3px;margin-bottom:10px;}
  .pageseg button{flex:1;border:none;background:transparent;color:var(--brand);font-family:var(--util);font-size:12px;padding:7px 0;border-radius:7px;cursor:pointer;}
  .pageseg button.on{background:var(--brand);color:#fff;font-weight:700;}
  .subpage{display:flex;gap:6px;margin-bottom:14px;}
  .subpage button{flex:1;border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 0;font-family:var(--util);font-size:11.5px;color:var(--sub);cursor:pointer;}
  .subpage button.on{background:var(--brand);color:#fff;border-color:var(--brand);}
  .sec-h{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;color:var(--sub);text-transform:uppercase;margin:2px 0 9px;display:flex;align-items:center;gap:8px;}
  .sec-h .ln{flex:1;height:1px;background:var(--line);}
  .add-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px;}
  .add-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 6px;cursor:pointer;text-align:center;font-size:11.5px;color:var(--ink);}
  .add-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
  .add-btn .ic{font-family:var(--util);font-size:16px;display:block;margin-bottom:3px;color:var(--brand);}
  .divider{height:1px;background:var(--line);margin:16px 0;}

  .editor-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
  .editor-head .badge{background:var(--brand);color:#fff;border-radius:6px;padding:3px 9px;font-family:var(--util);font-size:11px;}
  .editor-head .nm{font-size:12.5px;color:var(--sub);}
  .field{margin-bottom:12px;}
  .field label{display:block;font-size:11px;color:var(--sub);margin-bottom:5px;font-family:var(--util);}
  .field textarea,.field input[type=text],.field input[type=number],.field select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px;font-family:var(--body);font-size:13px;color:var(--ink);background:#fff;}
  .field textarea{resize:vertical;min-height:80px;line-height:1.6;}
  .field textarea:focus,.field input:focus,.field select:focus{outline:2px solid var(--peri);}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .seg-inline{display:flex;gap:6px;}
  .seg-inline button{flex:1;border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 0;font-family:var(--util);font-size:12px;cursor:pointer;color:var(--sub);}
  .seg-inline button.on{background:var(--brand);color:#fff;border-color:var(--brand);}
  .swatches{display:flex;flex-wrap:wrap;gap:7px;}
  .swatch{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent;}
  .swatch.on{border-color:var(--ink);}
  .pbtn{width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px;font-family:var(--util);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:8px;}
  .pbtn:hover{border-color:var(--brand);color:var(--brand);}
  .pbtn.danger:hover{border-color:#C0392B;color:#C0392B;}
  .empty-hint{color:var(--sub);font-size:12.5px;line-height:1.9;text-align:center;padding:30px 12px;background:var(--brand-soft);border-radius:10px;}
  .layer-mini{display:flex;gap:8px;margin-top:4px;}
  .layer-mini button{flex:1;}

  @media print{
    @page{size:A4 landscape;margin:0;}
    body.print-single @page{size:A4 portrait;}
    body.print-single-land @page{size:A4 landscape;}
    html,body{overflow:visible;background:#fff;height:auto;}
    .topbar,.side,.stage-foot,.fold-guide{display:none!important;}
    .workspace{display:block;height:auto;}
    .stage{overflow:visible;display:block;}
    .scaler{transform:none!important;}
    .canvas{box-shadow:none!important;margin:0;page-break-after:always;print-color-adjust:exact;-webkit-print-color-adjust:exact;}
    .blk.sel{outline:none!important;}.blk .handle{display:none!important;}
  }