/* 配信スケジュール画像メーカー — 記事内埋め込み用。すべて .sm-app 配下・sm- 接頭辞で、テーマのCSSと混ざらないようにしている */
.sm-app, .sm-app * { box-sizing: border-box; }
.sm-app { margin: 1.5em 0; font-size: 14px; line-height: 1.5; color: #2b2a28; }
.sm-app .sm-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .sm-app.sm-wide .sm-grid { grid-template-columns: 340px 1fr; align-items: start; } }

.sm-app .sm-panel { background: #fff; border: 1px solid #e3e0da; border-radius: 12px; padding: 14px; margin: 0; }
.sm-app .sm-panel h4 { font-size: 14px; margin: 0 0 10px; padding: 0; border: 0; background: none; color: #6d6b66; font-weight: 500; }
.sm-app label.sm-label { display: block; font-size: 12px; color: #6d6b66; margin: 8px 0 3px; font-weight: normal; }
.sm-app input[type=text], .sm-app input[type=date] {
  width: 100%; padding: 7px 9px; border: 1px solid #e3e0da; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: #2b2a28; margin: 0; box-shadow: none; height: auto;
}
.sm-app input[type=checkbox] { margin: 0; width: auto; height: auto; }
.sm-app .sm-row { display: flex; gap: 8px; }
.sm-app .sm-row > * { flex: 1; min-width: 0; }

.sm-app .sm-days { display: grid; grid-template-columns: auto 1fr 1.6fr auto; gap: 6px; align-items: center; margin-top: 8px; }
.sm-app .sm-days .sm-h { font-size: 11px; color: #6d6b66; }
.sm-app .sm-days .sm-d { font-size: 13px; font-weight: 700; white-space: nowrap; }
.sm-app .sm-days input[type=text] { padding: 6px 8px; font-size: 13px; }
.sm-app .sm-days label.sm-off { font-size: 11px; color: #6d6b66; display: flex; align-items: center; gap: 3px; white-space: nowrap; margin: 0; font-weight: normal; }

.sm-app .sm-sizes, .sm-app .sm-series { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sm-app .sm-series button.sm-on { background: #d4537e; color: #fff; border-color: #d4537e; }
.sm-app .sm-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; margin-top: 4px; max-height: 190px; overflow-y: auto; padding: 2px; }
.sm-app button.sm-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; background: #f6f4f0; cursor: pointer; overflow: hidden; line-height: 0; margin: 0; box-shadow: none; }
.sm-app button.sm-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sm-app button.sm-thumb .sm-thumb-sw { display: block; width: 100%; aspect-ratio: 16 / 9; }
.sm-app button.sm-thumb .sm-thumb-label { display: block; font-size: 11px; line-height: 1.3; padding: 3px 4px; color: #2b2a28; text-align: center; }
.sm-app button.sm-thumb.sm-on { border-color: #d4537e; }
.sm-app .sm-serieslink { font-size: 12px; color: #6d6b66; margin: 6px 0 0; }
.sm-app .sm-serieslink a { color: #d4537e; }
.sm-app button.sm-btn {
  padding: 6px 10px; font-size: 12px; border: 1px solid #e3e0da; background: #fff; color: #2b2a28; border-radius: 8px; cursor: pointer; font-family: inherit; line-height: 1.4; box-shadow: none; text-shadow: none; margin: 0;
}
.sm-app button.sm-btn:hover { background: #f6f4f0; }
.sm-app .sm-sizes button.sm-on { background: #d4537e; color: #fff; border-color: #d4537e; }

.sm-app .sm-file { font-size: 12px; margin-top: 4px; }
.sm-app .sm-chara { margin-top: 6px; }
.sm-app .sm-slider { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sm-app .sm-slider-label { font-size: 12px; color: #6d6b66; width: 4.5em; flex: none; }
.sm-app .sm-slider input[type=range] { flex: 1; margin: 0; width: auto; height: auto; }
.sm-app .sm-chk { font-size: 13px; display: flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: normal; }

.sm-app .sm-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sm-app .sm-preview canvas { display: block; max-width: 100%; height: auto; max-height: 80vh; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.12); background: #fff; }
.sm-app .sm-cap { font-size: 12px; color: #6d6b66; margin: 0; }
.sm-app .sm-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.sm-app .sm-actions button.sm-btn { padding: 10px 16px; font-size: 14px; }
.sm-app .sm-actions button.sm-primary { background: #d4537e; color: #fff; border-color: #d4537e; font-weight: 700; }
.sm-app .sm-actions button.sm-primary:hover { background: #c2446e; }
.sm-app .sm-note { font-size: 12px; color: #6d6b66; margin: 0; text-align: center; }
.sm-app .sm-cta { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fbf1f4; font-size: 13px; line-height: 1.6; }
.sm-app .sm-cta a { color: #d4537e; font-weight: 700; }

.sm-app .sm-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #2b2a28; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 9999;
}
.sm-app .sm-toast.sm-show { opacity: 1; }