/* バナー・SNS画像サイズ早見表 固有のCSS（接頭辞 bs-） */

/* ---------- 一覧 ---------- */
.bs-filters { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr); }
.bs-howto { margin: 0 0 12px; }

.bs-group { margin: 0 0 16px; }
.bs-group__title { font-size: .9375rem; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-group__toggle { margin-left: auto; }

.bs-table td, .bs-table th { vertical-align: middle; }
.bs-table .bs-col-check { width: 2.5em; text-align: center; padding-left: 6px; padding-right: 6px; }
.bs-table .bs-col-size { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-table .bs-col-status { white-space: nowrap; }
.bs-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tk-accent); margin: 0; vertical-align: middle; }
.bs-table tr.is-current td { background: var(--tk-accent-soft); }

.bs-pick {
  font: inherit; font-size: .875rem; text-align: left; color: var(--tk-accent); background: none; border: 0;
  padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.bs-pick:hover { color: var(--tk-accent-hover); }
.bs-ratio { display: block; font-size: .75rem; color: var(--tk-text-muted); }
.bs-safe-mark { display: inline-block; font-size: .6875rem; margin-left: 4px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--tk-border-strong); color: var(--tk-text-muted); text-decoration: none; }

/* 状態のバッジ（要確認 / 確認済み / 目安） */
.bs-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.bs-badge--unconfirmed { background: var(--tk-warning-soft); color: var(--tk-warning); }
.bs-badge--confirmed { background: var(--tk-success-soft); color: var(--tk-success); }
.bs-badge--guide { background: var(--tk-surface-2); color: var(--tk-text-muted); border: 1px solid var(--tk-border); }

/* ---------- プレビュー ---------- */
.bs-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; }
.bs-selected__cat { font-size: .75rem; color: var(--tk-text-muted); width: 100%; }
.bs-selected__size { font-variant-numeric: tabular-nums; color: var(--tk-text-muted); }

.bs-preview {
  display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 12px;
  border-radius: var(--tk-radius-sm); background: var(--tk-surface-2);
  /* 透明背景が分かるように市松模様にする（CSS変数のみで描く） */
  background-image:
    linear-gradient(45deg, var(--tk-border) 25%, transparent 25%),
    linear-gradient(-45deg, var(--tk-border) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--tk-border) 75%),
    linear-gradient(-45deg, transparent 75%, var(--tk-border) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.bs-preview svg { display: block; max-width: none; box-shadow: var(--tk-shadow); }

/* プレビューのSVG内の色（画面表示はすべてCSS変数） */
.bs-pv-bg { fill: var(--tk-surface); }
.bs-pv-bg--gray { fill: var(--tk-surface-2); }
.bs-pv-bg--transparent { fill: transparent; }
.bs-pv-label { fill: var(--tk-text-muted); font-family: var(--tk-font); }
.bs-pv-safe { fill: none; stroke: var(--tk-accent); stroke-width: 2; stroke-dasharray: 6 4; }
.bs-pv-hidden { fill: var(--tk-danger-soft); fill-opacity: .85; stroke: var(--tk-danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
.bs-pv-hidden-label { fill: var(--tk-danger); font-family: var(--tk-font); font-weight: 700; }
.bs-pv-margin { fill: none; stroke: var(--tk-warning); stroke-width: 1.5; stroke-dasharray: 3 3; }
.bs-pv-center { stroke: var(--tk-border-strong); stroke-width: 1; }

.bs-legend { list-style: none; padding: 0; margin: 8px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; color: var(--tk-text-muted); }
.bs-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bs-legend__swatch { display: inline-block; width: 18px; height: 0; border-top: 2px dashed currentColor; }
.bs-legend__swatch--safe { color: var(--tk-accent); }
.bs-legend__swatch--hidden { height: 10px; border: 1px dashed var(--tk-danger); background: var(--tk-danger-soft); }
.bs-legend__swatch--margin { color: var(--tk-warning); }
.bs-legend__swatch--center { color: var(--tk-border-strong); border-top-style: solid; border-top-width: 1px; }

/* ---------- 設定 ---------- */
fieldset.bs-options { margin-top: 16px; }
/* 1つずつの保存と、まとめて保存（ZIP）を押し間違えないよう、区切り線と余白で離す */
.bs-single-actions { margin-top: 16px; align-items: center; }
.bs-actions-label { width: 100%; font-size: .8125rem; font-weight: 700; color: var(--tk-text-muted); }
/* （共通CSSの fieldset.tk-fieldset より優先させるため、要素名も付ける） */
fieldset.bs-batch { margin-top: 40px; background: var(--tk-surface-2); }

/* 公式の仕様ページ */
.bs-spec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--tk-border); }
.bs-spec__title { font-size: .9375rem; margin: 0 0 4px; }
.bs-spec__list { margin: 8px 0; }
.bs-sel-spec { margin: 6px 0 0; }
.bs-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.bs-radios .tk-check { margin: 0; }
.bs-num { max-width: 7em; }
.bs-guide-note { margin: 4px 0 0; }

@media (min-width: 768px) {
  .bs-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bs-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* 右側のパネルが画面より高い場合は、パネルの中でスクロールできるようにする */
@media (min-width: 768px) {
  .bs-layout > .tk-sticky { max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* SPでは表の余白を詰めて、用途の名前を読みやすくする（PCでは共通CSSの余白に戻す） */
.bs-table th, .bs-table td { padding: 8px 6px; }
.bs-table .bs-col-size { font-size: .8125rem; }
@media (min-width: 768px) {
  .bs-table th, .bs-table td { padding: 8px 10px; }
  .bs-table .bs-col-size { font-size: inherit; }
}