/* =====================================================================
   style.css — プレースホルダー画像生成 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 幅・高さ、色ペアの2カラム配置 */
.pi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sg-space-3, 12px) 16px;
}
@media (max-width: 480px) {
  .pi-grid {
    grid-template-columns: 1fr;
  }
}

/* プリセットボタン群 */
.pi-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sg-space-1, 4px);
}

/* カラーピッカー + HEX 入力 */
.pi-color {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pi-color input[type="color"] {
  flex: 0 0 auto;
  width: 44px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: var(--sg-radius, 8px);
  background: var(--sg-card, #fff);
  cursor: pointer;
}
.pi-hex {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* モード（チェックボックス）ラベル */
.sg-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.pi-fontsize {
  margin-top: var(--sg-space-3, 12px);
}

/* プレビュー: 市松模様の下地で透過は無いことを示しつつ画像を中央表示 */
.pi-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sg-space-3, 12px);
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: var(--sg-radius, 8px);
  background-color: #f4f6fb;
  background-image:
    linear-gradient(45deg, #e7ebf3 25%, transparent 25%),
    linear-gradient(-45deg, #e7ebf3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e7ebf3 75%),
    linear-gradient(-45deg, transparent 75%, #e7ebf3 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  overflow: auto;
}
.pi-preview canvas {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--sg-border, #e5e7eb);
  background: #fff;
}

/* アクションボタン群 */
.pi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sg-space-3, 12px);
}

/* SVGコード表示 */
.pi-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  word-break: normal;
}