/*
 * print-atelier.css ― 「印刷アトリエ」白基調テーマ + Canva風レイアウト。
 *   method-draw.compiled.css の後に読み込み、ダーク(#2f2f2c)配色を白基調へ上書きする。
 *   段階1: 全クロームの白化 + 上部バー(#pa_topbar)用の土台(エディタを56px下げる)。
 *   ※ Method Draw のツールアイコンは「明色ボタン上の暗色パス」なので、コンテナを白くしても消えない。
 * repo保管: mdpe/methoddraw-ext/print-atelier.css
 */
:root {
  --pa-bg: #eef0f4;          /* キャンバス背景(版面の外) */
  --pa-surface: #ffffff;     /* バー・パネル面 */
  --pa-surface-2: #f6f7f9;   /* 微グレー面(ボタン地) */
  --pa-border: #e6e8ec;
  --pa-border-2: #eef0f3;
  --pa-text: #1f2533;
  --pa-text-sub: #79828f;
  --pa-accent: #2563eb;
  --pa-accent-hover: #1d4ed8;
  --pa-accent-soft: #eaf1fe;
  --pa-danger: #e0483d;
  --pa-radius: 10px;
  --pa-topbar-h: 56px;
  --pa-font: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Segoe UI', sans-serif;
}

html, body { background: var(--pa-bg) !important; }
body { font-family: var(--pa-font) !important; }

/* ── エディタ全体を上部バーの下へ。#svg_editor を絶対配置にすると、中の
      絶対配置の子(workarea/tools_*)が一括で下にシフトする(個別オフセット不要)。 ── */
#svg_editor {
  position: absolute !important;
  top: var(--pa-topbar-h) !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: var(--pa-bg) !important;
}

/* 旧メニューバーは上部バーに置換するため非表示(項目はDOM上に残しkebabから発火) */
#menu_bar { display: none !important; }

/* ── ワークエリア(キャンバス) ── */
#workarea { background: var(--pa-bg) !important; }
#workarea.wireframe { background: var(--pa-bg) !important; }
#svgcanvas { background: var(--pa-bg) !important; }
#canvasBackground > rect:first-child { /* 版面の白 */ }

/* ── 左ツールレール ── */
#tools_left {
  background: var(--pa-surface) !important;
  border-right: 1px solid var(--pa-border) !important;
  z-index: 5 !important;
}
#tools_left .tool_button,
#tools_left .tool_button.loaded { background: var(--pa-surface) !important; border-radius: 8px; }
#tools_left .tool_button:hover,
#tools_left .tool_button.loaded:hover { background: var(--pa-accent-soft) !important; }
#tools_left .tool_button:after,
#tools_left .tool_button_current:after { border-color: transparent !important; }
#tools_left .tool_button_current,
#tools_left .tool_button_current.loaded { background: var(--pa-accent-soft) !important; box-shadow: inset 0 0 0 2px var(--pa-accent); }
#tools_left #color_tools { margin-top: 6px; }

/* ── 右プロパティパネル(= 既存 #tools_top) ── */
#tools_top {
  background: var(--pa-surface) !important;
  border-left: 1px solid var(--pa-border) !important;
  overflow-y: auto !important; overflow-x: visible;
  width: 260px !important;          /* 右パネル拡幅(Gemini Must) */
  padding: 0 0 56px 0 !important;   /* 親paddingは0。内側パネルで左右対称に */
  color: var(--pa-text) !important;
  z-index: 50 !important;           /* ルーラーがパネル上端(タブ)に被るのを防ぐ */
}
#tools_top h4 { color: var(--pa-text) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .02em; }
#tools_top .context_panel,
#tools_top label,
#tools_top span,
#tools_top .icon_label,
#tools_top div { color: var(--pa-text) !important; }
#tools_top .icon_label,
#tools_top label span { color: var(--pa-text-sub) !important; }
#tools_top input[type=text],
#tools_top input:not([type]),
#tools_top select,
#tools_top textarea {
  background: var(--pa-surface) !important;
  color: var(--pa-text) !important;
  border: 1px solid var(--pa-border) !important;
  border-radius: 7px !important;
}
#tools_top input:focus, #tools_top select:focus { border-color: var(--pa-accent) !important; outline: none !important; }
/* ── 2列レイアウトは CSS Grid(Gemini Must)。font-size:0/inline-flex は廃止。
      パネル自身に display:grid を当てるが、MD の .hide()(インライン display:none)を
      尊重するため属性ガードで none を最優先に戻す(全パネル同時表示の事故を防ぐ)。 ── */
#tools_top .context_panel {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 9px;
  align-items: end; padding: 16px !important; box-sizing: border-box;
}
#tools_top .context_panel[style*="display: none"],
#tools_top .context_panel[style*="display:none"] { display: none !important; }
/* 各フィールド(label)= ラベル下/入力上の縦積み。幅は Grid が決める */
#tools_top .context_panel > label,
#tools_top .context_panel label.draginput,
#tools_top .context_panel .draginput {
  display: flex !important; flex-direction: column-reverse !important;
  align-items: stretch !important; float: none !important;
  width: 100% !important; min-width: 0; height: auto !important; margin: 0 !important;
  border: 0 !important; background: transparent !important; position: relative;
}
#tools_top .context_panel input[type=text],
#tools_top .context_panel input:not([type]),
#tools_top .context_panel input.mdpe-mm-input {
  width: 100% !important; min-width: 0; box-sizing: border-box !important;
  font-size: 13px !important; text-align: left !important;
  padding: 7px 9px !important; height: auto !important; margin: 0 !important;
}
/* mm入力(キャンバス寸法)は通常の数値フィールド見た目に。type=number のスピナーは隠す */
#tools_top .context_panel input.mdpe-mm-input { color: var(--pa-text, #1d2330) !important; font-weight: 600; -moz-appearance: textfield; }
#tools_top .context_panel input.mdpe-mm-input::-webkit-outer-spin-button,
#tools_top .context_panel input.mdpe-mm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#tools_top .context_panel .icon_label,
#tools_top .context_panel > label > span,
#tools_top .context_panel .draginput > span {
  position: static !important; display: block !important;
  font-size: 10px !important; letter-spacing: .04em; font-weight: 600;
  color: var(--pa-text-sub) !important; margin: 0 0 4px 2px !important;
  width: auto !important; height: auto !important; text-indent: 0 !important;
}
#tools_top .context_panel select { width: 100% !important; padding: 7px 9px !important; font-size: 13px !important; height: auto !important; -webkit-appearance: none; appearance: none; }
#tools_top .context_panel .draginput .caret { position: absolute; right: 10px; bottom: 14px; }
#tools_top .context_panel #resolution_label,
#tools_top .context_panel #seg_type_label,
#tools_top .context_panel #stroke_style_label { display: none !important; }
/* 1行ぶち抜きにするのは「見出し/フォント選択/整列/ドロップダウン/色ブロック」だけ。
   ※実行時に draginput.js が X/Y/幅/高さの <label> にも class=draginput を付与するため、
     `.draginput` を一律フル幅にすると数値フィールドまで1列化してしまう(:has で選別)。 */
#tools_top .context_panel h4,
#tools_top .context_panel #tool_font_family,
#tools_top .context_panel #align_tools,
#tools_top .context_panel .draginput:has(select),
#tools_top .context_panel .draginput:has(.color_block) { grid-column: 1 / -1; width: 100% !important; }
/* 整列アイコンは Method Draw 標準のまま(元に戻す)。独自グリッド化はしない。 */
/* フォント選択: 暗いグラデのカスタムプレビュー(#preview_font::after)を隠し、配線済みの
   ネイティブ<select>を「▽付き(OS標準の menulist 矢印)」のクリーンな dropdown として表示。
   (#font_family_dropdown の change → #font_family → setFontFamily と連動している) */
/* フォント行を CSS Grid で確定配置: 1行目=ラベル、2行目=[select ▽][B][i]。
   B/i は MD 元来の float/絶対配置でドロップダウン右に飛び出していたので grid セルへ固定。
   非表示の preview_font/caret/font_family は display:none でグリッドから除外。 */
#tools_top .context_panel #tool_font_family {
  display: grid !important;
  grid-template-columns: 1fr 36px 36px;
  grid-template-areas: "lbl lbl lbl" "sel bold ital";
  gap: 4px 6px; align-items: center;
}
#tool_font_family > span { grid-area: lbl; width: auto !important; margin: 0 0 0 2px !important; }
#tool_font_family #preview_font,
#tool_font_family > .caret,
#tool_font_family #font_family { display: none !important; }
#tool_font_family #font_family_dropdown {
  grid-area: sel; display: block !important; opacity: 1 !important; position: static !important;
  width: 100% !important; min-width: 0; box-sizing: border-box;
  height: auto !important; margin: 0 !important; padding: 8px 10px !important; font-size: 13px !important;
  border: 1px solid var(--pa-border) !important; border-radius: 7px !important;
  background: var(--pa-surface) !important; color: var(--pa-text) !important;
  -webkit-appearance: menulist !important; appearance: menulist !important;   /* OS標準の ▽ を表示 */
}
#tool_font_family #tool_bold { grid-area: bold; }
#tool_font_family #tool_italic { grid-area: ital; }
#tool_font_family .tool_button {
  position: static !important; float: none !important;
  width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--pa-border) !important; border-radius: 7px !important;
  background: var(--pa-surface-2) !important; color: var(--pa-text) !important;
}
#tool_font_family .tool_button:hover { background: var(--pa-accent-soft) !important; color: var(--pa-accent) !important; }
/* 隠しテキスト入力は元の画面外維持(レイアウトに乗せない) */
#text_panel #text { position: absolute !important; left: -8683px !important; width: 1px !important; }
/* 色ブロック/フォントプレビュー */
#tools_top .color_block, #tools_top #color_canvas_tools { border-radius: 7px !important; overflow: hidden; }
#preview_font { background: var(--pa-surface-2) !important; color: var(--pa-text) !important; border: 1px solid var(--pa-border) !important; border-radius: 7px !important; padding: 6px 9px !important; }
#tools_top .tool_button { background: var(--pa-surface-2) !important; color: var(--pa-text) !important; border: 1px solid var(--pa-border) !important; border-radius: 7px !important; font-size: 13px !important; }
#tools_top .tool_button:hover { background: var(--pa-accent-soft) !important; }
/* B / i (太字・斜体) */
#tool_bold, #tool_italic { color: var(--pa-text) !important; }

/* ── 下部バー(ズーム + パレット) ── */
#tools_bottom {
  background: var(--pa-surface) !important;
  border-top: 1px solid var(--pa-border) !important;
  left: 76px !important;
}
/* レール幅ぶんキャンバスを右へ(76px)。右は拡幅した右パネル(260px)に合わせる。下端は新ズームバー(44px) */
#workarea { left: 76px !important; right: 260px !important; bottom: 44px !important; }
#tools_bottom input[type=text],
#tools_bottom select { background: var(--pa-surface) !important; color: var(--pa-text) !important; border: 1px solid var(--pa-border) !important; border-radius: 6px !important; }
#tools_bottom .zoom_tool, #tools_bottom .icon_label { color: var(--pa-text-sub) !important; }

/* ── ルーラー ── */
#rulers > div, #rulers #ruler_corner { background: var(--pa-surface) !important; }
#rulers { color: var(--pa-text-sub) !important; }

/* ── 文脈ラベル(左上の小さな帯) ── */
#cur_context_panel { background: var(--pa-surface) !important; color: var(--pa-text-sub) !important; opacity: 1 !important; border: 1px solid var(--pa-border); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
#cur_context_panel a { color: var(--pa-accent) !important; }

/* ── caret(ドロップダウン三角)の視認 ── */
.caret { border-top-color: var(--pa-text-sub) !important; }

/* ── 共通: 角丸・選択ハンドル等の色味は維持 ── */
button, input[type=submit] { font-family: var(--pa-font); }

/* ===================================================================
   上部バー #pa_topbar(ext-shell.js が中身を生成)
   =================================================================== */
#pa_topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--pa-topbar-h);
  background: var(--pa-surface);
  border-bottom: 1px solid var(--pa-border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; z-index: 100000;
  font-family: var(--pa-font); color: var(--pa-text);
}
#pa_topbar .pa-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--pa-accent), #6f9bff);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; flex: none; box-shadow: 0 2px 6px rgba(37,99,235,.35);
}
#pa_topbar .pa-title { font-weight: 800; font-size: 16px; letter-spacing: .02em; white-space: nowrap; }
#pa_topbar .pa-spacer { flex: 1 1 auto; }
#pa_topbar .pa-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }

/* 中央サイズドロップダウン(ext-print が中身を入れる) */
#pa_slot_size .pa-size-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pa-surface); border: 1px solid var(--pa-border);
  border-radius: 9px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--pa-text);
}
#pa_slot_size .pa-size-pill:hover { border-color: var(--pa-accent); }
#pa_slot_size select { font: inherit; color: var(--pa-text); }

/* 右側アクション群 */
#pa_topbar .pa-iconbtn {
  width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent;
  color: var(--pa-text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 17px; line-height: 1;
}
#pa_topbar .pa-iconbtn:hover { background: var(--pa-surface-2); }
#pa_topbar .pa-iconbtn.disabled { opacity: .35; pointer-events: none; }
/* undo/redo は SVG 化(ext-shell)。ボタンは display:flex なので flex:none を付けないと
   SVG が主軸(横)方向に flex-shrink で幅0へ潰れて見えなくなる(2026-07-14 実測)。 */
#pa_topbar .pa-iconbtn svg { width: 20px; height: 20px; display: block; flex: none; }

/* スマホ(タッチ)では回転グリップを無効化する。
   名刺等を指で回転させる需要はほぼ無く、角を誤タッチして要素が回転→選択枠が斜めになり
   カード外へハンドルが飛び出す「謎の斜め線」の主因になっていた。透明グリップの当たり判定ごと消す。
   デスクトップ(pointer:fine)では従来どおり回転可能。 */
@media (pointer: coarse) {
  #selectorGrip_rotate_nw, #selectorGrip_rotate_ne,
  #selectorGrip_rotate_se, #selectorGrip_rotate_sw { display: none !important; pointer-events: none !important; }
}
#pa_topbar .pa-save { display: inline-flex; align-items: center; gap: 6px; color: var(--pa-text-sub); font-size: 12px; white-space: nowrap; }
#pa_topbar .pa-divider { width: 1px; height: 24px; background: var(--pa-border); margin: 0 2px; }

#pa_topbar .pa-pdfbtn {
  background: var(--pa-accent); color: #fff; border: 0; border-radius: 9px;
  padding: 9px 16px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
#pa_topbar .pa-pdfbtn:hover { background: var(--pa-accent-hover); }
#pa_topbar .pa-pdfbtn:disabled { opacity: .6; cursor: default; }

/* kebab メニュー */
#pa_kebab_menu {
  position: fixed; top: calc(var(--pa-topbar-h) - 4px); right: 10px; z-index: 100001;
  background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 6px; min-width: 200px; display: none;
}
#pa_kebab_menu .pa-mi { padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--pa-text); display: flex; justify-content: space-between; gap: 16px; }
#pa_kebab_menu .pa-mi:hover { background: var(--pa-accent-soft); }
#pa_kebab_menu .pa-mi .sc { color: var(--pa-text-sub); font-size: 11px; }
#pa_kebab_menu .pa-sep { height: 1px; background: var(--pa-border); margin: 5px 4px; }

/* ===================================================================
   左カテゴリレール #pa_rail + フライアウト #pa_flyout
   =================================================================== */
#pa_rail {
  position: fixed; left: 0; top: var(--pa-topbar-h); bottom: 0; width: 76px;
  background: var(--pa-surface); border-right: 1px solid var(--pa-border);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 8px 0; z-index: 99992; font-family: var(--pa-font);
}
.pa-rail-top, .pa-rail-bot { width: 100%; }
.pa-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; box-sizing: border-box; margin: 1px 0; padding: 8px 2px;
  border: 0; background: transparent;
  border-radius: 11px; cursor: pointer; color: var(--pa-text-sub); font-family: inherit;
  text-align: center;
}
.pa-rail-btn:hover { background: var(--pa-surface-2); color: var(--pa-text); }
.pa-rail-btn.active { background: var(--pa-accent-soft); color: var(--pa-accent); }
.pa-rail-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 24px; }
.pa-rail-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0; white-space: nowrap; line-height: 1.2; }

#pa_flyout {
  position: fixed; left: 76px; top: var(--pa-topbar-h); bottom: 0; width: 0;
  background: var(--pa-surface); border-right: 1px solid var(--pa-border);
  box-shadow: 6px 0 22px rgba(20,30,50,.06); z-index: 99991; overflow: hidden;
  transition: width .15s ease; font-family: var(--pa-font); color: var(--pa-text);
}
#pa_flyout.open { width: 256px; }
/* フライアウトを開いたら作業領域を右へ寄せ、キャンバスが隠れないようにする(レール76+フライアウト256=332)。
   ext-dock が body.pa-fly-open をトグル + methodDraw.updateCanvas で再センタリング。 */
body.pa-fly-open #workarea { left: 332px !important; }
.pa-fly-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 10px; }
.pa-fly-title { font-size: 15px; font-weight: 800; white-space: nowrap; }
.pa-fly-close { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--pa-text-sub); width: 28px; height: 28px; border-radius: 7px; }
.pa-fly-close:hover { background: var(--pa-surface-2); color: var(--pa-text); }
.pa-fly-body { padding: 2px 16px 18px; overflow-y: auto; height: calc(100% - 56px); width: 256px; box-sizing: border-box; }
.pa-sec { margin-bottom: 16px; }
.pa-sec-ttl { font-size: 10px; letter-spacing: .08em; font-weight: 700; color: var(--pa-text-sub); margin: 0 0 8px; border-bottom: 1px solid var(--pa-border-2); padding-bottom: 5px; }
.pa-bigbtn { width: 100%; padding: 11px; background: var(--pa-accent); color: #fff; border: 0; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; margin-bottom: 6px; font-family: inherit; }
.pa-bigbtn svg, .pa-gridbtn svg { flex: none; }   /* flex内でアイコンが0幅に潰れるのを防ぐ */
.pa-bigbtn:hover { background: var(--pa-accent-hover); }
.pa-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pa-gridbtn { padding: 11px 6px; background: var(--pa-surface-2); border: 1px solid var(--pa-border); border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--pa-text); font-family: inherit; }
.pa-gridbtn:hover { background: var(--pa-accent-soft); border-color: var(--pa-accent); color: var(--pa-accent); }
.pa-hint { font-size: 11px; color: var(--pa-text-sub); margin-top: 9px; line-height: 1.55; }
/* デザインテンプレ サムネ ※ext-templates.js */
.pa-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-tpl { height: 78px; padding: 5px; border: 1px solid var(--pa-border); border-radius: 8px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pa-tpl:hover { border-color: var(--pa-accent); box-shadow: 0 0 0 2px var(--pa-accent-soft); }
.pa-tpl img { max-width: 100%; max-height: 100%; display: block; pointer-events: none; }
/* フライアウト内のフォーム要素(各拡張の入力) */
#pa_flyout input, #pa_flyout select, #pa_flyout textarea {
  background: var(--pa-surface) !important; color: var(--pa-text) !important;
  border: 1px solid var(--pa-border) !important; border-radius: 7px !important;
}
/* ロック中の要素: クリック透過(エディタのみ。class はSVGに残るが pointer-events はCSS由来=書出しSVGに出ない=印刷影響なし) */
#svgcontent .mdpe-locked { pointer-events: none !important; }

/* トースト */
.pa-flash { position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%) translateY(8px); background: #1f2533; color: #fff; padding: 9px 18px; border-radius: 20px; font-size: 12.5px; z-index: 100002; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.pa-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================================================================
   右パネル タブ + スタイル(色)  ※ext-rightpanel.js
   =================================================================== */
.pa-tabs { display: flex; margin: 0 0 10px; border-bottom: 1px solid var(--pa-border); }
.pa-tab { flex: 1; padding: 13px 0; border: 0; background: transparent; font-weight: 700; font-size: 13px; color: var(--pa-text-sub); cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--pa-font); }
.pa-tab.active { color: var(--pa-accent); border-bottom-color: var(--pa-accent); }
.pa-empty { font-size: 12px; color: var(--pa-text-sub); line-height: 1.6; padding: 10px 14px; }
#pa_style_panel { padding: 0 16px 16px; }
#pa_style_panel h4 { color: var(--pa-text) !important; font-weight: 700 !important; font-size: 12px !important; margin: 0 0 10px !important; }
.pa-strow { margin-bottom: 11px; }
.pa-stlbl { display: block; font-size: 10px; letter-spacing: .04em; font-weight: 600; color: var(--pa-text-sub); margin: 0 0 4px 2px; }
.pa-color { display: flex; align-items: center; gap: 5px; }
.pa-cpick { width: 32px; height: 32px; padding: 0 !important; border: 1px solid var(--pa-border) !important; border-radius: 7px !important; background: #fff !important; cursor: pointer; flex: none; }
.pa-hex { flex: 1 1 auto; min-width: 0; font-size: 12px !important; padding: 7px 6px !important; text-transform: uppercase; text-align: center; }
.pa-none { flex: none; white-space: nowrap; border: 1px solid var(--pa-border); background: var(--pa-surface-2); color: var(--pa-text-sub); border-radius: 7px; padding: 7px 9px; font-size: 11px; cursor: pointer; font-family: var(--pa-font); }
.pa-none:hover { background: var(--pa-accent-soft); color: var(--pa-accent); }
/* タブによる表示制御 */
#tools_top.pa-tab-page .context_panel { display: none !important; }
#tools_top.pa-tab-page #canvas_panel { display: grid !important; }
#tools_top.pa-tab-obj #canvas_panel { display: none !important; }

/* ===================================================================
   キャンバス上部 浮遊ツールバー #pa_canvasbar  ※ext-canvasbar.js
   =================================================================== */
#pa_canvasbar {
  position: fixed; top: calc(var(--pa-topbar-h) + 10px);
  left: calc(76px + (100vw - 76px - 260px) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; z-index: 99980;
  background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 11px;
  padding: 5px 7px; box-shadow: 0 4px 16px rgba(20,30,50,.10);
}
.pa-cb-btn { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; color: var(--pa-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pa-cb-btn:hover { background: var(--pa-accent-soft); color: var(--pa-accent); }
.pa-cb-btn.pa-cb-on { background: var(--pa-accent-soft); color: var(--pa-accent); }   /* トグルON(スマートガイド吸着) */
.pa-cb-btn svg { flex: none; width: 19px !important; height: 19px !important; }
.pa-cb-sep { width: 1px; height: 22px; background: var(--pa-border); margin: 0 4px; }
#pa_canvasbar .pa-cb-grp { display: flex; align-items: center; gap: 2px; }   /* 整列・分布グループ(2+選択時のみ表示・JSでdisplay切替) */
.pa-cb-grip { display: flex; align-items: center; justify-content: center; width: 22px; height: 34px; color: var(--pa-text-sub); cursor: grab; border-radius: 6px; }
.pa-cb-grip:hover { background: var(--pa-surface-2); color: var(--pa-text); }
#pa_canvasbar.dragging { cursor: grabbing; box-shadow: 0 8px 26px rgba(20,30,50,.20); }
#pa_canvasbar.dragging .pa-cb-grip { cursor: grabbing; }
/* レールアイコンも念のため固定 */
.pa-rail-ico svg { flex: none; width: 22px !important; height: 22px !important; }

/* ===================================================================
   下部ズームバー #pa_bottom  ※ext-zoombar.js
   =================================================================== */
#pa_bottom {
  position: fixed; left: 76px; right: 260px; bottom: 0; height: 44px;
  background: var(--pa-surface); border-top: 1px solid var(--pa-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 18px; z-index: 99980; font-family: var(--pa-font);
}
.pa-zbtn { border: 1px solid var(--pa-border); background: var(--pa-surface); color: var(--pa-text); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; font-family: var(--pa-font); }
.pa-zbtn:hover { background: var(--pa-accent-soft); border-color: var(--pa-accent); color: var(--pa-accent); }
.pa-fit { width: auto; padding: 0 12px; font-size: 12px; font-weight: 600; margin-right: 4px; }
.pa-zrange { width: 160px; accent-color: var(--pa-accent); cursor: pointer; }
.pa-zpct { font-size: 12px; color: var(--pa-text-sub); width: 42px; text-align: right; }
/* レール幅に合わせて下バー左端を調整済(left:76) */

/* ===================================================================
   テキスト編集を左「テキスト」フライアウトへ集約(2026-06-07)
   入力ボックス/フォント/サイズ/太字斜体/字間/縦書き/縁取り を左に一本化。
   =================================================================== */
#tools_top #text_panel { display: none !important; }   /* 右のテキストパネルは隠す(左へ集約)。#tools_top .context_panel(grid!important 0,1,1)に勝つため id2個 0,2,0 で指定。隠し#textはbody退避済 */

/* テキスト整形コントロール: 全幅・白テーマ・整然(旧ダーク背景#3f3f3cの透明化＋幅潰れ修正) */
#pa_flyout #tool_font_family, #pa_flyout #tool_font_size, #pa_flyout #mdpe_ls_field {
  background: transparent !important; color: var(--pa-text) !important; box-shadow: none !important;
  width: 100% !important; box-sizing: border-box !important; float: none !important; padding: 0 !important; margin: 9px 0 !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
}
/* フォント: 1行目=ラベル / 2行目=[ドロップダウン全幅][B][i] */
#pa_flyout #tool_font_family { display: grid !important; grid-template-columns: 1fr 36px 36px; gap: 6px; align-items: center; }
#pa_flyout #tool_font_family > span:first-child { grid-column: 1 / -1; font-size: 11px; color: var(--pa-text-sub); margin: 0; }
#pa_flyout #preview_font, #pa_flyout #tool_font_family .caret { display: none !important; }
#pa_flyout #font_family_dropdown { grid-column: 1; width: 100% !important; min-width: 0; box-sizing: border-box; appearance: menulist; -webkit-appearance: menulist; padding: 7px 8px; border: 1px solid var(--pa-border); border-radius: 7px; background: #fff; color: var(--pa-text); font-size: 13px; }
#pa_flyout #tool_font_family #tool_bold { grid-column: 2; }
#pa_flyout #tool_font_family #tool_italic { grid-column: 3; }
#pa_flyout #tool_font_family #tool_bold, #pa_flyout #tool_font_family #tool_italic {
  width: 100% !important; height: 34px !important; min-width: 0 !important; margin: 0 !important;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--pa-border); border-radius: 7px; background: #fff; cursor: pointer; font-weight: 700; color: var(--pa-text);
}
#pa_flyout #tool_font_family #tool_bold.active, #pa_flyout #tool_font_family #tool_italic.active { background: var(--pa-accent-soft); border-color: var(--pa-accent); color: var(--pa-accent); }
/* サイズ・字間: ラベル(左)＋入力。全幅の独立行 */
/* サイズ・字間=スライダー(2026-06-07 user要望)。数値の #tool_font_size は隠す */
#pa_flyout #tool_font_size { display: none !important; }
#pa_flyout #mdpe_fs_field, #pa_flyout #mdpe_ls_field { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; width: 100% !important; box-sizing: border-box; margin: 10px 0 !important; }
#pa_flyout #mdpe_fs_field .icon_label, #pa_flyout #mdpe_ls_field .icon_label { order: -1; font-size: 12px; color: var(--pa-text-sub); min-width: 44px; }
#pa_flyout #mdpe_fontsize, #pa_flyout #mdpe_letterspacing { flex: 1; min-width: 0; width: auto !important; appearance: auto; -webkit-appearance: auto; accent-color: var(--pa-accent); height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer; }
#pa_flyout .mdpe-slider-val { min-width: 32px; text-align: right; font-size: 12px; color: var(--pa-text); font-variant-numeric: tabular-nums; }

/* ── キーボードショートカット一覧(ext-shortcuts.js) ── */
#mdpe_sc_overlay { position: fixed; inset: 0; background: rgba(20,28,42,.45); display: flex; align-items: center; justify-content: center; z-index: 100000; }
.mdpe-sc-modal { background: #fff; border-radius: 14px; max-width: 760px; width: calc(100% - 48px); max-height: 80vh; overflow: auto; box-shadow: 0 20px 60px rgba(20,30,50,.35); padding: 20px 22px; }
.mdpe-sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 16px; }
.mdpe-sc-close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #79828f; border-radius: 8px; width: 32px; height: 32px; }
.mdpe-sc-close:hover { background: var(--pa-surface-2, #eef1f5); }
.mdpe-sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.mdpe-sc-grid h4 { margin: 10px 0 6px; font-size: 12px; color: var(--pa-accent, #2563eb); letter-spacing: .04em; }
.mdpe-sc-grid dl { margin: 0; }
.mdpe-sc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.mdpe-sc-row dt { display: flex; gap: 4px; flex: none; }
.mdpe-sc-row dd { margin: 0; color: #48505c; text-align: right; }
#mdpe_sc_overlay kbd { display: inline-block; min-width: 18px; text-align: center; padding: 2px 6px; border: 1px solid #d7dce3; border-bottom-width: 2px; border-radius: 6px; background: #f7f9fc; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #2b3240; }
.mdpe-sc-foot { margin-top: 14px; color: #9aa2ad; font-size: 12px; text-align: right; }
#mdpe_sc_btn { position: fixed; left: 86px; bottom: 56px; z-index: 99985; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pa-border, #e6e8ec); background: var(--pa-surface, #fff); color: var(--pa-text-sub, #79828f); font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(20,30,50,.10); }
#mdpe_sc_btn:hover { color: var(--pa-accent, #2563eb); border-color: var(--pa-accent, #2563eb); }
@media (max-width: 640px) { .mdpe-sc-grid { grid-template-columns: 1fr; } }

/* ── ロック一覧パネル(ext-lock.js 個別解除UX) ── */
#mdpe_lock_panel { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 99990; display: none; background: #fff; border: 1px solid var(--pa-border, #e6e8ec); border-radius: 12px; box-shadow: 0 12px 40px rgba(20,30,50,.22); min-width: 300px; max-width: 440px; max-height: 64vh; overflow: auto; padding: 12px 14px; }
.mdpe-lock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.mdpe-lock-x { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #79828f; width: 28px; height: 28px; border-radius: 8px; }
.mdpe-lock-x:hover { background: var(--pa-surface-2, #eef1f5); }
.mdpe-lock-empty { color: #9aa2ad; font-size: 13px; padding: 10px 2px; text-align: center; }
.mdpe-lock-list { display: flex; flex-direction: column; gap: 4px; }
.mdpe-lock-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; }
.mdpe-lock-row:hover { background: var(--pa-surface-2, #f3f5f8); }
.mdpe-lock-lab { flex: 1; font-size: 13px; color: #2b3240; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdpe-lock-here, .mdpe-lock-un, .mdpe-lock-all { border: 1px solid var(--pa-border, #e6e8ec); background: #fff; border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: #48505c; flex: none; }
.mdpe-lock-here:hover { border-color: var(--pa-accent, #2563eb); color: var(--pa-accent, #2563eb); }
.mdpe-lock-un:hover, .mdpe-lock-all:hover { border-color: #e5006d; color: #e5006d; }
.mdpe-lock-foot { margin-top: 10px; text-align: right; }
.mdpe-lock-all { padding: 5px 14px; }
.mdpe-locate { animation: mdpeLocate .4s ease-in-out 3; }
@keyframes mdpeLocate { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

/* ── ガイド線(ext-guides.js): 定規からドラッグ ── */
#ruler_x { cursor: ns-resize; }
#ruler_y { cursor: ew-resize; }
#mdpe_guides { pointer-events: none; }

/* ── テンプレ カテゴリ別表示(ext-templates.js Phase1) ── */
.pa-tpl-cat { font-size: 11px; font-weight: 700; color: var(--pa-text-sub); margin: 12px 2px 6px; letter-spacing: .04em; }
.pa-tpl-host .pa-tpl-grid { margin-bottom: 2px; }
.pa-tpl { overflow: hidden; }
.pa-tpl img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 写真リフレームパネル(ext-frame.js) ── */
#mdpe_reframe { position: fixed; right: 272px; bottom: 56px; z-index: 99985; width: 220px; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 12px; box-shadow: 0 8px 26px rgba(20,30,50,.16); padding: 12px 14px; }
.mdpe-rf-ttl { font-size: 12px; font-weight: 700; color: var(--pa-text); margin-bottom: 6px; }
#mdpe_reframe label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--pa-text-sub); margin: 8px 0; }
#mdpe_reframe input[type=range] { flex: 1; accent-color: var(--pa-accent); }

/* ── 画像解像度チェック チップ(ext-dpicheck.js) ── */
#mdpe_dpichip { position: fixed; left: calc(76px + (100vw - 76px - 260px) / 2); transform: translateX(-50%); bottom: 56px; z-index: 99975; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(20,30,50,.14); border: 1px solid; }
#mdpe_dpichip.warn { background: #fdecec; border-color: #f3b8b4; color: #9d2b22; }
#mdpe_dpichip.notice { background: #fff8e6; border-color: #ecd9a0; color: #8a6d1a; }
#mdpe_dpichip button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
#mdpe_dpichip button:hover { background: rgba(255,255,255,.6); }
/* シール入稿規約ガード(ハーフカット余白)チップ。dpiチップの上に重ねて並べる */
#mdpe_sgchip { position: fixed; left: calc(76px + (100vw - 76px - 260px) / 2); transform: translateX(-50%); bottom: 96px; z-index: 99976; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(20,30,50,.14); border: 1px solid; background: #fdecec; border-color: #f3b8b4; color: #9d2b22; }
#mdpe_sgchip button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
#mdpe_sgchip button:hover { background: rgba(255,255,255,.6); }

/* ── 整列(#align_tools)を白基調テーマに統一(他の36pxボタンと同形) ── */
#tools_top #align_tools .draginput_cell {
  width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--pa-surface-2) !important; border: 1px solid var(--pa-border) !important; border-radius: 7px !important;
  cursor: pointer; box-sizing: border-box;
}
#tools_top #align_tools .draginput_cell:hover { background: var(--pa-accent-soft) !important; border-color: var(--pa-accent) !important; }
#tools_top #align_tools .draginput_cell .svg_icon { width: 22px !important; height: 22px !important; }
#tools_top #align_tools #position_opts { display: flex !important; gap: 6px; flex-wrap: wrap; width: 100% !important; height: auto !important; background: transparent !important; border: 0 !important; }
#tools_top #align_tools label { width: 100%; }

/* ── 整列セルを両パネル(単一#align_tools/複数#multiselected_panel)で統一＋線画アイコン色(ext-alignicons.js) ── */
#tools_top #align_tools .draginput_cell,
#tools_top #multiselected_panel .align_buttons .draginput_cell {
  width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--pa-surface-2) !important; border: 1px solid var(--pa-border) !important; border-radius: 7px !important;
  cursor: pointer; box-sizing: border-box; color: var(--pa-text);
}
#tools_top #align_tools .draginput_cell:hover,
#tools_top #multiselected_panel .align_buttons .draginput_cell:hover { background: var(--pa-accent-soft) !important; border-color: var(--pa-accent) !important; color: var(--pa-accent); }
#tools_top #multiselected_panel .align_buttons .col { display: flex !important; gap: 6px; flex-wrap: wrap; width: 100% !important; height: auto !important; background: transparent !important; border: 0 !important; }

/* ── 整列セル: ボタン風(枠/白地)を廃し、上部浮遊バーと同じ「素の線画」に(2026-06-11 user)。後勝ちで上書き ── */
#tools_top #align_tools .draginput_cell,
#tools_top #multiselected_panel .align_buttons .draginput_cell {
  background: transparent !important; border: 0 !important;
  width: 34px !important; height: 34px !important; border-radius: 8px !important;
  color: var(--pa-text);
}
#tools_top #align_tools .draginput_cell:hover,
#tools_top #multiselected_panel .align_buttons .draginput_cell:hover { background: var(--pa-accent-soft) !important; border: 0 !important; color: var(--pa-accent); }
/* 「オブジェクトに整列/ページに整列」セレクトの文字切れ解消(全幅化)・謎見出し「.」を非表示 */
#tools_top #multiselected_panel #tool_align_relative { display: block !important; width: 100% !important; margin: 0 0 8px !important; position: static !important; }
#tools_top #multiselected_panel #align_relative_to { width: 100% !important; box-sizing: border-box !important; height: auto !important; padding: 7px 9px !important; font-size: 13px !important; }
#tools_top #multiselected_panel .align_buttons > h4 { display: none !important; }
/* MD由来の outline(暗枠)と ::after(角ノッチ)を除去=完全に素の線画へ */
#tools_top #align_tools .draginput_cell,
#tools_top #multiselected_panel .align_buttons .draginput_cell { outline: none !important; }
#tools_top #align_tools .draginput_cell::after,
#tools_top #multiselected_panel .align_buttons .draginput_cell::after,
#tools_top #align_tools .draginput_cell::before,
#tools_top #multiselected_panel .align_buttons .draginput_cell::before { display: none !important; content: none !important; }

/* ── マルチページ ページ列(ext-pages.js) ── 下部バーの上に配置 */
#pa_pages { position: fixed; bottom: 52px; left: calc(76px + (100vw - 76px - 260px) / 2); transform: translateX(-50%); z-index: 99978; display: none; align-items: flex-end; gap: 8px; max-width: calc(100vw - 360px); overflow-x: auto; padding: 8px 10px; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 11px; box-shadow: 0 4px 16px rgba(20,30,50,.10); }
.pa-page-grip { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0 4px; cursor: move; color: var(--pa-text-sub); font-size: 15px; line-height: 1; user-select: none; touch-action: none; border-radius: 6px; }
.pa-page-grip:hover { color: var(--pa-accent); background: var(--pa-accent-soft); }
.pa-page { position: relative; cursor: pointer; flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pa-page-th { width: 56px; min-height: 30px; background: #fff; border: 1.5px solid var(--pa-border); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pa-page.active .pa-page-th { border-color: var(--pa-accent); box-shadow: 0 0 0 2px var(--pa-accent-soft); }
.pa-page-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pa-page-nm { font-size: 10px; color: var(--pa-text-sub); }
.pa-page.active .pa-page-nm { color: var(--pa-accent); font-weight: 700; }
.pa-page-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--pa-text-sub); color: #fff; font-size: 10px; line-height: 1; cursor: pointer; display: none; padding: 0; }
.pa-page:hover .pa-page-x { display: block; }
.pa-page-x:hover { background: var(--pa-danger, #e0483d); }
.pa-page-add { flex: none; width: 32px; height: 32px; align-self: center; border: 1px dashed var(--pa-border); background: var(--pa-surface-2); color: var(--pa-text-sub); border-radius: 8px; font-size: 15px; cursor: pointer; }
.pa-page-add:hover { color: var(--pa-accent); border-color: var(--pa-accent); }

/* ── ページ並べ替え矢印(ext-pages move) ── サムネ下端にhoverで表示 */
.pa-page-mv { position: absolute; left: 0; right: 0; bottom: 18px; display: none; justify-content: space-between; padding: 0 1px; pointer-events: none; }
.pa-page:hover .pa-page-mv { display: flex; }
.pa-page-arrow { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(31,37,51,.78); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.pa-page-arrow:hover:not(:disabled) { background: var(--pa-accent); }
.pa-page-arrow:disabled { opacity: 0; cursor: default; }

/* ── ブランドキット(ext-brand.js) ── */
.pa-brand { display: flex; flex-direction: column; gap: 8px; }
.pa-brand > label { display: flex; flex-direction: column; gap: 3px; }
.pa-brand > label span { font-size: 10px; font-weight: 600; color: var(--pa-text-sub); margin-left: 2px; }
.pa-brand > label input { padding: 7px 9px; font-size: 13px; border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface); color: var(--pa-text); }
.pa-brand > label input:focus { border-color: var(--pa-accent); outline: none; }
.pa-brand-logo { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; margin-top: 2px; }
.pa-brand-logoprev { height: 44px; border: 1px dashed var(--pa-border); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--pa-text-sub); overflow: hidden; background: #fff; }
.pa-brand-logoprev img { max-width: 100%; max-height: 100%; }
.pa-brand-btn2 { padding: 7px 10px; font-size: 12px; border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface-2); color: var(--pa-text); cursor: pointer; }
.pa-brand-btn2:hover { border-color: var(--pa-accent); color: var(--pa-accent); }
.pa-brand-apply { margin-top: 4px; padding: 9px 10px; font-size: 13px; font-weight: 700; border: 0; border-radius: 8px; background: var(--pa-accent); color: #fff; cursor: pointer; }
.pa-brand-apply:hover { background: var(--pa-accent-hover); }

/* ── マイテンプレート(ext-mytpl.js) ── */
.pa-mytpl-save { width: 100%; padding: 9px 10px; font-size: 12.5px; font-weight: 700; border: 1px dashed var(--pa-accent); border-radius: 8px; background: var(--pa-accent-soft); color: var(--pa-accent); cursor: pointer; margin-bottom: 8px; }
.pa-mytpl-save:hover { background: var(--pa-accent); color: #fff; }
.pa-mytpl-host { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-mytpl-item { position: relative; display: flex; flex-direction: column; gap: 3px; }
.pa-mytpl-th { width: 100%; min-height: 46px; background: #fff; border: 1.5px solid var(--pa-border); border-radius: 7px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pa-mytpl-th:hover { border-color: var(--pa-accent); }
.pa-mytpl-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pa-mytpl-nm { font-size: 10px; color: var(--pa-text-sub); line-height: 1.3; word-break: break-all; }
.pa-mytpl-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--pa-text-sub); color: #fff; font-size: 10px; line-height: 1; cursor: pointer; display: none; padding: 0; }
.pa-mytpl-item:hover .pa-mytpl-x { display: block; }
.pa-mytpl-x:hover { background: var(--pa-danger, #e0483d); }

/* ── AI背景除去(ext-bgremove.js) ── */
.pa-bgr-feather { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pa-bgr-feather span { font-size: 10px; font-weight: 600; color: var(--pa-text-sub); margin-left: 2px; }
.pa-bgr-feather input[type=range] { width: 100%; accent-color: var(--pa-accent); }

/* ── 枠の形ボタン(ext-frame insertFrameShape) ── */
.pa-frameshapes { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pa-frameshapes > span { font-size: 10px; font-weight: 600; color: var(--pa-text-sub); }
.pa-frameshape { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface); color: var(--pa-text); cursor: pointer; padding: 0; }
.pa-frameshape:hover { border-color: var(--pa-accent); color: var(--pa-accent); }

/* ── ブランドキット拡張(色/フォント/画像) ── */
.pa-brand-colors > span, .pa-brand-fontrow > span, .pa-brand-imgs > span { display: block; font-size: 10px; font-weight: 600; color: var(--pa-text-sub); margin: 4px 0 4px 2px; }
.pa-brand-colorrow { display: flex; gap: 8px; }
.pa-brand-colorcell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pa-brand-swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--pa-border); cursor: pointer; padding: 0; }
.pa-brand-swatch.empty { background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0/10px 10px; cursor: default; }
.pa-brand-swatch:not(.empty):hover { box-shadow: 0 0 0 2px var(--pa-accent-soft); border-color: var(--pa-accent); }
.pa-brand-colorpick { width: 30px; height: 18px; padding: 0; border: 1px solid var(--pa-border); border-radius: 4px; background: none; cursor: pointer; }
.pa-brand-fontrow { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.pa-brand-fontrow select { padding: 7px 9px; font-size: 12.5px; border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface); color: var(--pa-text); min-width: 0; }
.pa-brand-imggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pa-brand-imgcell { position: relative; }
.pa-brand-imgbtn { width: 100%; height: 44px; border: 1px solid var(--pa-border); border-radius: 7px; background: #fff; cursor: pointer; padding: 2px; overflow: hidden; }
.pa-brand-imgbtn img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pa-brand-imgbtn:hover { border-color: var(--pa-accent); }
.pa-brand-imgadd { height: 44px; border: 1px dashed var(--pa-border); border-radius: 7px; background: var(--pa-surface-2); color: var(--pa-text-sub); font-size: 16px; cursor: pointer; }
.pa-brand-imgadd:hover { color: var(--pa-accent); border-color: var(--pa-accent); }

/* ── 線の太さ(pa_style_panel内・ext-rightpanel) ── */
.pa-swbox { display: flex; align-items: center; gap: 6px; }
.pa-swinput { width: 76px; padding: 7px 9px; font-size: 13px; border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface); color: var(--pa-text); }
.pa-swinput:focus { border-color: var(--pa-accent); outline: none; }
.pa-swunit { font-size: 11px; color: var(--pa-text-sub); }

/* ── カット線(ext-sticker) ── */
.pa-cutrow { display: flex; gap: 6px; margin-top: 6px; }
.pa-cutbtn { flex: 1; padding: 8px 6px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface); cursor: pointer; }
.pa-cut-m { color: #e6007e; border-color: #f4b6d6; } .pa-cut-m:hover { background: #e6007e; color: #fff; }
.pa-cut-c { color: #0089c7; border-color: #aadcf2; } .pa-cut-c:hover { background: #00a0e9; color: #fff; }
.pa-cut-x { width: 100%; margin-top: 6px; padding: 6px; font-size: 11px; color: var(--pa-text-sub); border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface-2); cursor: pointer; }
.pa-cut-x:hover { color: var(--pa-danger); }

/* ── シール入稿出力ボタン(ext-sticker A-3) ── */
.pa-sticker-out { width: 100%; margin-top: 10px; padding: 10px; font-size: 13px; font-weight: 700; border: 0; border-radius: 8px; background: var(--pa-accent); color: #fff; cursor: pointer; }
.pa-sticker-out:hover { background: var(--pa-accent-hover); }
.pa-sticker-out:disabled { opacity: .6; cursor: default; }

/* ── ダイカット輪郭(ext-diecut) ── */
.pa-diecut-slider { display: block; margin-top: 8px; }
.pa-diecut-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--pa-text-sub); margin-bottom: 2px; }
.pa-diecut-head strong { color: var(--pa-accent); }
.pa-diecut-slider input[type=range] { width: 100%; accent-color: var(--pa-accent); }
.pa-diecut-btn { margin-top: 10px; }

/* ── シールかんたん作成ウィザード(ext-stickerwizard) ── */
.pa-wizard { border: 1px solid var(--pa-accent-soft); border-radius: 10px; padding: 10px !important; background: linear-gradient(180deg, #f7faff, #fff); }
.pa-wizard-up { width: 100%; margin: 6px 0 2px; }
.pa-wizard-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.pa-wizard-shape { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; font-size: 10.5px; border: 1px solid var(--pa-border); border-radius: 8px; background: var(--pa-surface); color: var(--pa-text); cursor: pointer; }
.pa-wizard-shape span { font-size: 16px; line-height: 1; }
.pa-wizard-shape.active { border-color: var(--pa-accent); background: var(--pa-accent-soft); color: var(--pa-accent); font-weight: 700; }
.pa-wizard-go { margin-top: 8px; }
.pa-wizard-status { min-height: 14px; }

/* ── ウィザード: モチーフ切り分けチェック ── */
.pa-wizard-multi { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--pa-text); cursor: pointer; }
.pa-wizard-multi input { accent-color: var(--pa-accent); }

/* ── シート選択(面付け) ── */
.pa-sheetrow { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; margin-top: 8px; }
.pa-sheetrow > span { font-size: 10px; font-weight: 600; color: var(--pa-text-sub); }
.pa-sheetrow select { padding: 6px 8px; font-size: 12px; border: 1px solid var(--pa-border); border-radius: 7px; background: var(--pa-surface); color: var(--pa-text); }

/* ── ハーフカット微調整ボタン ── */
.pa-cut-adj { width: 100%; margin-top: 8px; border-color: #00a0e9 !important; color: #0077b3; }
.pa-cut-adj:hover { background: #e7f6fd; }

.pa-tpl{width:100%;min-width:0;box-sizing:border-box;aspect-ratio:auto !important;} /* fix 20260711b: height:78px + inline aspect-ratio overflowed grid column -> neighbor overlap */

/* ── シールのプレビュー背景(ext-stickerbg.js) 2026-07-14 ── */
.pa-sbg-sws { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 9px 0 4px; }
.pa-sbg-sw { position: relative; height: 30px; border: 1px solid var(--pa-border-2); border-radius: 7px; cursor: pointer; padding: 0; overflow: hidden; transition: transform .08s, box-shadow .1s; }
.pa-sbg-sw:hover { transform: translateY(-1px); }
.pa-sbg-sw.sel { border-color: var(--pa-accent); box-shadow: 0 0 0 2px var(--pa-accent); }
.pa-sbg-none { background: #fff; display: flex; align-items: center; justify-content: center; }
.pa-sbg-none span { font-size: 10px; color: var(--pa-text-sub); font-weight: 700; }
.pa-sbg-dot i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; }

/* ── 輪郭を手直し(ext-cutedit.js) 2026-07-15 ── */
.pa-cutedit-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0 2px; }
.pa-cutedit-btn { padding: 9px 8px; font-size: 12.5px; font-weight: 700; border-radius: 8px; cursor: pointer; border: 1px solid; background: #fff; transition: background .1s; }
.pa-cutedit-btn.add { color: #0a7bbf; border-color: #9fd4f2; }
.pa-cutedit-btn.add:hover { background: #eaf6fd; }
.pa-cutedit-btn.sub { color: #c2186f; border-color: #f2a8cf; }
.pa-cutedit-btn.sub:hover { background: #fdeaf4; }

/* ── カット線手直し: 対象線トグル(ext-cutedit.js) 2026-07-15 ── */
.pa-cutedit-target { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.pa-cutedit-tglab { font-size: 11.5px; color: var(--pa-text-sub); font-weight: 700; }
.pa-cutedit-tgbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #5b636e; border: 1px solid var(--pa-border-2); background: #fff; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.pa-cutedit-tgbtn i { width: 13px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
.pa-cutedit-tgbtn.sel { border-color: #0a7bbf; color: #0a7bbf; background: #eaf6fd; }

/* ── 3D仕上がりプレビュー(ext-sticker3d) ── */
.mdpe3d-overlay{position:fixed;inset:0;z-index:100000;background:rgba(18,20,32,0.62);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;}
.mdpe3d-panel{width:min(920px,96vw);height:min(80vh,720px);background:#20223a;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;}
.mdpe3d-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#eef1f8;font-size:14px;border-bottom:1px solid rgba(255,255,255,.08);}
.mdpe3d-top b{font-weight:700;}
.mdpe3d-x{background:none;border:0;color:#c7cbe0;font-size:22px;line-height:1;cursor:pointer;padding:0 4px;}
.mdpe3d-x:hover{color:#fff;}
.mdpe3d-stage{flex:1;min-height:0;background:radial-gradient(120% 120% at 50% 30%, #3a3f66 0%, #24273f 55%, #1a1c2e 100%);cursor:grab;touch-action:none;}
.mdpe3d-stage:active{cursor:grabbing;}
.mdpe3d-stage canvas{display:block;width:100%;height:100%;}
.mdpe3d-hint{padding:9px 16px 2px;color:#aab0cc;font-size:11.5px;line-height:1.5;}
.mdpe3d-status{padding:2px 16px 12px;color:#cfd4ec !important;min-height:14px;}

/* ── シールUI: タッチ端末のタップ性向上(coarse pointer)。デスクトップ(マウス)には不適用 20260715 ── */
@media (pointer: coarse) {
  .pa-wizard-shape { min-height: 54px; padding: 9px 2px; }
  .pa-wizard-go, .pa-brand-apply, .pa-brand-btn2, .pa-wizard-up, .pa-wizard-touchup { min-height: 46px; }
  .pa-wizard-multitoggle button, .pa-wizard-bgtoggle button, .pa-cutedit-btn, .pa-cutedit-tgbtn { min-height: 44px; }
  .pa-sbg-sw { height: 40px; }
  .pa-diecut-slider input[type="range"] { height: 30px; }
}