/* =========================================================
   price.css - 料金表メーカー専用

   画面の骨格（操作バー・パネル・2カラム）は doc-tool.css を使っています。
   ※ doc-tool.css は書類系ツール用の名前ですが、レイアウト部分は
     どのツールでも共通です。いずれ tool.css へ改名予定です。
   ========================================================= */

/* ---------- プランの入力欄 ---------- */
.plans {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.plan__head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}

.plan__head .field--grow {
  flex: 1;
  min-width: 0;
}

/* ---------- オプションの入力欄 ---------- */
.options {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 34px;
  gap: var(--s-3);
  align-items: end;
}

/* ---------- 小さいトグル ---------- */
.switch--sm .switch__label {
  font-size: var(--t-sm);
  color: var(--c-ink-2);
}

/* ---------- 色の候補 ---------- */
.input--color {
  padding: 4px;
  cursor: pointer;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(15, 17, 21, .12);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}

.swatch:hover {
  transform: scale(1.08);
}

/* ---------- プレビュー ----------
   canvas の中身がそのまま保存される画像です。
   画面上では幅に合わせて縮小表示します。 */
.price-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  /* 背景が白いテーマでも境界が分かるように */
  background: var(--c-surface-2);
}

.price-canvas__meta {
  margin-top: var(--s-2);
  color: var(--c-muted);
  font-size: var(--t-xs);
  text-align: right;
}

/* ---------- 文字色の行 ---------- */
.color-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.color-row .input--color {
  width: 96px;
  flex: 0 0 auto;
}

/* ---------- アイコン ---------- */
.icon-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.icon-preview {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  /* 透過画像でも輪郭が分かるように市松模様を敷く */
  background-image:
    linear-gradient(45deg, var(--c-surface-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c-surface-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c-surface-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c-surface-2) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}