/* OGP画像メーカー ツール固有スタイル（スコープ: #app-ogpmaker） */

#app-ogpmaker .lead-custom { max-width: 640px; }

/* ---------- ドロップゾーン ---------- */
#app-ogpmaker .ogpm-drop {
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  border-color: var(--bs-border-color);
}
#app-ogpmaker .ogpm-drop:hover,
#app-ogpmaker .ogpm-drop.is-hot {
  border-color: var(--bs-primary);
  background-color: rgba(124, 90, 195, .08);
}
#app-ogpmaker .border-dashed { border-style: dashed !important; }

/* ---------- レイアウトテンプレート選択 ---------- */
#app-ogpmaker .ogpm-tpls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
#app-ogpmaker .ogpm-tpl {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .5rem .25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .72rem;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
#app-ogpmaker .ogpm-tpl:hover { border-color: var(--bs-primary); }
#app-ogpmaker .ogpm-tpl.is-on {
  border-color: var(--bs-primary);
  background: rgba(124, 90, 195, .12);
  font-weight: 700;
}
/* テンプレのミニ図（1.9:1 の箱に要素を置く） */
#app-ogpmaker .ogpm-tplbox {
  position: relative;
  width: 100%; aspect-ratio: 19 / 10;
  border-radius: .25rem;
  background: linear-gradient(135deg, #cfc6de, #b9aed0);
  overflow: hidden;
}
#app-ogpmaker .ogpm-tplbox i { position: absolute; background: #4b3f66; display: block; }
#app-ogpmaker .t-bar { height: 16%; border-radius: 1px; }
#app-ogpmaker .t-bar.b-l { left: 12%; bottom: 18%; width: 55%; }
#app-ogpmaker .t-bar.b-c { left: 22%; top: 42%; width: 56%; }
#app-ogpmaker .t-bar.b-t { left: 12%; top: 18%; width: 55%; }
#app-ogpmaker .t-card { left: 10%; bottom: 12%; width: 62%; height: 46%; border-radius: 3px; background: rgba(255,255,255,.92); }
#app-ogpmaker .t-band { left: 0; bottom: 0; width: 100%; height: 38%; background: rgba(255,255,255,.92); }
#app-ogpmaker .t-split { left: 0; top: 0; width: 46%; height: 100%; background: rgba(255,255,255,.92); }

/* ---------- アイコン ---------- */
/* フォント読込用のダミー（display:none だとフォントが要求されないので画面外へ逃がす） */
.ogpm-fontpreload {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ステージ上のアイコン（Canvas で描いた PNG を img として置く） */
#app-ogpmaker .ogpm-icon { position: absolute; display: none; }
#app-ogpmaker .ogpm-icon-inline { display: none; }

/* 置き方の選択 */
#app-ogpmaker .ogpm-iconpos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
#app-ogpmaker .ogpm-pos {
  padding: .35rem .2rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .45rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .72rem;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
#app-ogpmaker .ogpm-pos:hover { border-color: var(--bs-primary); }
#app-ogpmaker .ogpm-pos.is-on {
  border-color: var(--bs-primary);
  background: rgba(124, 90, 195, .12);
  font-weight: 700;
}

/* アイコン一覧 */
#app-ogpmaker .ogpm-icongrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: .35rem;
  max-height: 220px;
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-body-bg);
}
#app-ogpmaker .ogpm-iconbtn {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  font-size: 1.2rem; line-height: 1;
  border: 1px solid transparent;
  border-radius: .4rem;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
}
#app-ogpmaker .ogpm-iconbtn:hover { border-color: var(--bs-primary); background: rgba(124, 90, 195, .1); }
#app-ogpmaker .ogpm-iconbtn.is-on { border-color: var(--bs-primary); background: rgba(124, 90, 195, .18); }
/* Material Symbols はリガチャ（合字）で字形になるので liga を有効にする */
#app-ogpmaker .ogpm-iconbtn .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal;
  font-size: 1.35rem; line-height: 1;
  letter-spacing: normal; text-transform: none;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* 色プリセット */
#app-ogpmaker .ogpm-swatches { display: flex; flex-wrap: wrap; gap: .3rem; }
#app-ogpmaker .ogpm-swatch {
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  cursor: pointer;
  padding: 0;
}
#app-ogpmaker .ogpm-swatch.is-on { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
#app-ogpmaker .form-control-color.w-100 { width: 100% !important; }

/* ---------- マッハーツール専用プリセット（オーナー限定） ---------- */
#app-ogpmaker .ogpm-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
#app-ogpmaker .ogpm-preset {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
#app-ogpmaker .ogpm-preset:hover { border-color: var(--bs-primary); }
#app-ogpmaker .ogpm-preset.is-on {
  border-color: var(--bs-primary);
  background: rgba(124, 90, 195, .12);
}
#app-ogpmaker .ogpm-preset-thumb {
  width: 100%; aspect-ratio: 19 / 10;
  border-radius: .25rem;
  background-size: cover;
  background-position: center;
}
#app-ogpmaker .ogpm-preset-name { font-size: .74rem; font-weight: 700; line-height: 1.3; }
#app-ogpmaker .ogpm-preset-hint { font-size: .68rem; color: var(--bs-secondary-color); line-height: 1.3; }

/* ---------- 追従プレビュー ---------- */
/* 高さがビューポートを超えたら内部スクロールにして、下端（書き出しボタン等）が隠れないようにする */
@media (min-width: 992px) {
  #app-ogpmaker .tool-results-sticky {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* ---------- プレビュー枠 ---------- */
#app-ogpmaker .ogpm-stage-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: .5rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
#app-ogpmaker .ogpm-stagefit { transform-origin: top left; }

/* ---------- ステージ（実寸は JS が設定） ---------- */
#app-ogpmaker #ogpm-stage {
  position: relative;
  overflow: hidden;
  background: #ded9e8;
  font-family: "Noto Sans JP", sans-serif;
}
#app-ogpmaker #ogpm-bg { position: absolute; inset: 0; }
#app-ogpmaker #ogpm-bgimg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
#app-ogpmaker #ogpm-tint,
#app-ogpmaker #ogpm-scrim-el { position: absolute; inset: 0; pointer-events: none; }

/* テキスト領域（位置・背景はテンプレに応じて JS が設定） */
#app-ogpmaker .ogpm-txt { position: absolute; display: flex; flex-direction: column; }
/* タイトル＋サブコピーの列。テキスト左配置ではアイコンの右側に並ぶ flex アイテムになる。
   flex/align-self は JS が配置ごとに設定する（既定は縦積み・幅いっぱい）。 */
#app-ogpmaker #ogpm-txtcol { display: flex; flex-direction: column; min-width: 0; align-self: stretch; }
/* align-self:stretch でテキスト領域いっぱいに広げる。
   （flexアイテムのままだと max-content 幅を取り、パネルから溢れて自動縮小も誤作動する） */
#app-ogpmaker #ogpm-ttl {
  align-self: stretch;
  font-weight: 900; line-height: 1.14; letter-spacing: .01em; margin: 0;
  white-space: pre-wrap; word-break: auto-phrase; overflow-wrap: anywhere;
}
#app-ogpmaker #ogpm-subc {
  align-self: stretch;
  font-weight: 500; opacity: .78; margin: 0; line-height: 1.4;
}
#app-ogpmaker .ogpm-accent { border-radius: 999px; }

/* ロゴ */
#app-ogpmaker .ogpm-brand { position: absolute; display: flex; align-items: center; }
#app-ogpmaker .ogpm-brand img { display: block; width: auto; }
#app-ogpmaker .ogpm-customlogo { position: absolute; display: block; width: auto; }

/* ガイド（キャプチャ非対象） */
#app-ogpmaker .ogpm-guide { position: absolute; pointer-events: none; }
#app-ogpmaker .ogpm-safe { inset: 60px; border: 1px dashed rgba(124, 90, 195, .6); }
#app-ogpmaker .ogpm-sq   { top: 0; bottom: 0; border-left: 1px dashed rgba(255, 80, 80, .7);
                           border-right: 1px dashed rgba(255, 80, 80, .7); }

/* ---------- 自由配置モード ---------- */
/* テンプレ選択のロック（自由配置中はテンプレを固定する） */
#app-ogpmaker .ogpm-tpls-locked { opacity: .45; pointer-events: none; }

/* ドラッグ中の整列ガイド線（中央・端・他要素に吸着したとき表示）。キャプチャ非対象。 */
#app-ogpmaker .ogpm-snapline { position: absolute; pointer-events: none; z-index: 20; }
#app-ogpmaker .ogpm-snapline-v { top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(255, 60, 120, .9); }
#app-ogpmaker .ogpm-snapline-h { left: 0; right: 0; height: 0; border-top: 1px solid rgba(255, 60, 120, .9); }

/* ドラッグ可能な要素（タイトル・ロゴ・アイコン）。
   touch-action:none でタッチ中のスクロールを止め、掴んで動かせるようにする。 */
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-txt,
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-brand,
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-customlogo,
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-icon {
  cursor: grab;
  touch-action: none;
}
/* 掴める範囲を示すホバー枠（書き出しはボタン起動なのでキャプチャされない） */
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-txt:hover,
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-brand:hover,
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-customlogo:hover,
#app-ogpmaker.ogpm-freeon #ogpm-stage .ogpm-icon:hover {
  outline: 2px dashed rgba(124, 90, 195, .75);
  outline-offset: 3px;
}
#app-ogpmaker.ogpm-dragging,
#app-ogpmaker.ogpm-dragging #ogpm-stage * { cursor: grabbing !important; }
/* 自由配置中はアイコンの微調整スライダー（絶対配置なので不要）を隠す */
#app-ogpmaker.ogpm-freeon #ogpm-iconoffx-row,
#app-ogpmaker.ogpm-freeon #ogpm-iconoffy-row { display: none !important; }

/* カラー入力 */
#app-ogpmaker .form-control-color { width: 3rem; height: 2.4rem; flex: 0 0 auto; }