/* ============================================================
   Solar Market DB — base.css
   各ショートコードの共通基盤 (variables / reset / utility)
   ============================================================ */

.smdb-app,
.smdb-side {
  --smdb-color-primary: #2563eb;
  --smdb-color-primary-dark: #1d4ed8;
  --smdb-color-primary-soft: #e0ecff;
  --smdb-color-accent: #f59e0b;
  --smdb-color-danger: #ef4444;
  --smdb-color-success: #10b981;
  --smdb-color-text: #1f2937;
  --smdb-color-text-sub: #6b7280;
  --smdb-color-text-mute: #9ca3af;
  --smdb-color-border: #e5e7eb;
  --smdb-color-border-soft: #f1f5f9;
  --smdb-color-bg: #ffffff;
  --smdb-color-bg-soft: #f8fafc;
  --smdb-color-bg-tint: #fef9f5;

  --smdb-radius-sm: 6px;
  --smdb-radius-md: 12px;
  --smdb-radius-lg: 16px;

  --smdb-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --smdb-shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --smdb-shadow-lg: 0 8px 24px rgba(0,0,0,.08);

  --smdb-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;

  --smdb-fs-xs: 11px;
  --smdb-fs-sm: 12px;
  --smdb-fs-base: 14px;
  --smdb-fs-md: 15px;
  --smdb-fs-lg: 16px;
  --smdb-fs-xl: 20px;
  --smdb-fs-2xl: 22px;

  font-family: var(--smdb-font);
  font-size: var(--smdb-fs-md);
  color: var(--smdb-color-text);
  line-height: 1.6;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* テーマの .entry-content 内でも横はみ出しを防ぐ */
.entry-content .smdb-app,
.entry-content .smdb-side,
.wp-block-post-content .smdb-app,
main .smdb-app {
  max-width: 100%;
}

/* テーマの見出し・段落スタイルを打ち消す */
.smdb-app p,
.smdb-side p,
.smdb-app strong,
.smdb-side strong,
.smdb-app dl,
.smdb-side dl,
.smdb-app dt,
.smdb-side dt,
.smdb-app dd,
.smdb-side dd {
  font-family: inherit;
  color: inherit;
  line-height: inherit;
}

.smdb-app p,
.smdb-side p {
  margin: 0;
}

.smdb-app strong,
.smdb-side strong {
  font-weight: 700;
}

/* h タグは使わない。見出しは .smdb-heading で統一 */
.smdb-heading {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--smdb-font);
  font-weight: 700;
  line-height: 1.4;
  color: var(--smdb-color-text);
  letter-spacing: 0;
  text-transform: none;
  background: none;
  border: none;
}

.smdb-heading--page {
  font-size: var(--smdb-fs-2xl);
}

.smdb-heading--section {
  font-size: var(--smdb-fs-lg);
}

.smdb-heading--block {
  font-size: var(--smdb-fs-base);
}

.smdb-app *,
.smdb-app *::before,
.smdb-app *::after,
.smdb-side *,
.smdb-side *::before,
.smdb-side *::after {
  box-sizing: border-box;
}

.smdb-app img,
.smdb-side img {
  max-width: 100%;
  height: auto;
}

.smdb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.smdb-text-sub { color: var(--smdb-color-text-sub); font-size: 12px; }

/* ----- Buttons ----- */
.smdb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--smdb-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 48px;
  white-space: nowrap;
}
.smdb-btn--primary {
  background: var(--smdb-color-primary);
  color: #fff;
}
.smdb-btn--primary:hover { background: var(--smdb-color-primary-dark); }
.smdb-btn--ghost {
  background: #fff;
  color: var(--smdb-color-primary);
  border-color: var(--smdb-color-primary);
}
.smdb-btn--ghost:hover { background: var(--smdb-color-primary-soft); }
.smdb-btn--lg { padding: 14px 28px; font-size: 16px; min-height: 56px; }
.smdb-btn__count { margin-left: 4px; font-weight: 500; opacity: 0.9; }
.smdb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Form base ----- */
.smdb-field { display: grid; gap: 6px; }
.smdb-field__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--smdb-fs-sm);
  font-weight: 600;
  color: var(--smdb-color-text);
}
.smdb-field__icon { color: var(--smdb-color-primary); }
.smdb-field__help { font-size: 12px; color: var(--smdb-color-text-sub); }
.smdb-field__error {
  display: block;
  font-size: 12px;
  color: var(--smdb-color-danger);
  font-style: normal;
}
.smdb-required {
  display: inline;
  margin-left: 4px;
  padding: 0;
  font-size: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--smdb-color-danger);
  background: none;
  border-radius: 0;
}

.smdb-select,
.smdb-input,
.smdb-textarea {
  font-family: inherit;
  font-size: 16px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--smdb-color-border);
  border-radius: var(--smdb-radius-sm);
  color: var(--smdb-color-text);
  min-height: 48px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.smdb-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.smdb-select:focus,
.smdb-input:focus,
.smdb-textarea:focus {
  outline: none;
  border-color: var(--smdb-color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.smdb-input-suffix {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.smdb-input-suffix span {
  font-size: 14px;
  color: var(--smdb-color-text-sub);
}

/* ----- Badge / Chip / Stars ----- */
.smdb-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
}
.smdb-badge--new { background: var(--smdb-color-danger); }

.smdb-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--smdb-color-text-sub);
  background: var(--smdb-color-bg-soft);
  border-radius: 999px;
}
.smdb-chip--star { color: var(--smdb-color-accent); }

.smdb-stars { color: var(--smdb-color-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ----- Skeleton ----- */
.smdb-skeleton-row {
  height: 60px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e5e7eb 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  border-radius: var(--smdb-radius-sm);
  margin-bottom: 8px;
  animation: smdb-shimmer 1.5s infinite;
}
@keyframes smdb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----- Toast ----- */
.smdb-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: rgba(31, 41, 55, .95);
  color: #fff;
  border-radius: var(--smdb-radius-md);
  font-size: 14px;
  z-index: 99999;
  box-shadow: var(--smdb-shadow-lg);
}
.smdb-toast.is-error { background: var(--smdb-color-danger); }

/* ----- Delta ----- */
.smdb-delta { font-size: 12px; color: var(--smdb-color-text-sub); }
.smdb-delta.is-up { color: var(--smdb-color-danger); }
.smdb-delta.is-down { color: var(--smdb-color-success); }