/* ============================================================================
 * widget-placeholders.css — SSR placeholder/empty-state styles
 *
 * SSOT for widget renderers (`packages/shared-widget-prerender/src/shared/
 * renderers/*.ts`) — replaces previous inline `style="..."` markup so operational
 * design tokens (`--ds-component-*` / `--ds-color-*`) can override visuals.
 *
 * Loaded via `service.chrome_assets_json.css` (loadOrder=50). Service-agnostic;
 * any service may register this URL.
 *
 * Cycle X4 (2026-05-19) — critical-analyst 1: SSR renderer 의 inline style 이
 * 운영 토큰을 무시 + token-driven 컨셉 위반.
 * ============================================================================ */

/* ---------- content.banner-slider ---------- */

.widget-banner-slider-ssr {
  padding: 16px 0;
}

.widget-banner-slider-ssr__heading {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ds-color-fg, #0f172a);
}

.widget-banner-slider-ssr__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.widget-banner-card {
  background: var(--ds-color-bg, #fff);
  border: 1px solid var(--ds-color-border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 260px;
}

.widget-banner-card__link {
  text-decoration: none;
  display: flex;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 260px;
}

.widget-banner-card__link .widget-banner-card {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.widget-banner-card__image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.widget-banner-card__placeholder {
  width: 100%;
  height: 120px;
  background: var(--ds-color-subtle, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-muted, #94a3b8);
  font-size: 0.8rem;
}

.widget-banner-card__body {
  padding: 10px 12px;
}

.widget-banner-card__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ds-color-fg, #1e293b);
  margin-bottom: 4px;
}

.widget-banner-card__subtitle {
  font-size: 0.75rem;
  color: var(--ds-color-muted, #64748b);
  line-height: 1.3;
}

.widget-banner-slider-ssr__legacy {
  overflow: hidden;
}

.widget-banner-slider-ssr__legacy-link {
  display: block;
}

.widget-banner-slider-ssr__legacy-img {
  width: 100%;
  height: auto;
  display: block;
}

.widget-banner-slider-ssr__empty {
  min-height: 180px;
  background: var(--ds-color-subtle, #f1f5f9);
}

/* ---------- content.file-embed ---------- */

.widget-file-embed-empty {
  padding: 24px;
  border: 1px dashed var(--ds-color-border, #ccc);
  border-radius: 6px;
  color: var(--ds-color-muted, #666);
  text-align: center;
}

.widget-file-embed-empty--error {
  border-color: var(--ds-color-danger, #c33);
  color: var(--ds-color-danger-fg, #a00);
}

.widget-file-embed-image {
  text-align: center;
}

.widget-file-embed-image__img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.widget-file-embed__iframe {
  border: 0;
  display: block;
}

.widget-file-embed__iframe--html {
  border-radius: 6px;
}

/* ---------- board.history ---------- */

.widget-board-history-empty {
  padding: 40px;
  text-align: center;
  color: var(--ds-color-muted, #888);
}