/* ===== ENHANCED: Slide Embed (16:9) ===== */
.o-slide-embed {
  max-width: 760px;
  margin: 60px auto;
  position: relative;
}

.o-slide-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-100, #F3F5F8);
  border: 1px solid var(--gray-200, #E2E6ED);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.o-slide-embed__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Placeholder state (before actual image is set) */
.o-slide-embed__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: linear-gradient(135deg, #f0f4fa 0%, #e8edf5 100%);
}

.o-slide-embed__placeholder-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent, #1A56DB);
  display: flex;
  align-items: center;
  justify-content: center;
}

.o-slide-embed__placeholder-icon svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.o-slide-embed__placeholder-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1A1A2E);
  line-height: 1.5;
}

.o-slide-embed__placeholder-desc {
  font-size: 12px;
  color: var(--text-light, #6B7A90);
  line-height: 1.8;
  max-width: 480px;
}

.o-slide-embed__placeholder-tag {
  display: inline-block;
  background: rgba(26, 86, 219, 0.1);
  color: var(--accent, #1A56DB);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.o-slide-embed__caption {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.o-slide-embed__caption-num {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #1A56DB);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.o-slide-embed__caption-text {
  font-size: 12px;
  color: var(--text-light, #6B7A90);
  line-height: 1.6;
}

/* ===== ENHANCED: Chart Container ===== */
.o-chart-container {
  max-width: 760px;
  margin: 60px auto;
  padding: 40px;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--gray-200, #E2E6ED);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.o-chart-container__header {
  margin-bottom: 32px;
}

.o-chart-container__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #1A56DB);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.o-chart-container__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #1A1A2E);
  line-height: 1.5;
}

.o-chart-container__subtitle {
  font-size: 12px;
  color: var(--text-light, #6B7A90);
  margin-top: 8px;
}

.o-chart-container__canvas {
  position: relative;
  width: 100%;
  /* height set per chart type */
}

.o-chart-container__canvas canvas {
  width: 100% !important;
}

.o-chart-container__source {
  margin-top: 16px;
  font-size: 10px;
  color: var(--gray-500, #6B7A90);
  text-align: right;
}

/* Chart full-width variant */
.o-chart-container--wide {
  max-width: 1100px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
  .o-slide-embed {
    margin: 40px auto;
  }

  .o-slide-embed__placeholder-title {
    font-size: 13px;
  }

  .o-slide-embed__placeholder-desc {
    font-size: 11px;
  }

  .o-chart-container {
    margin: 40px auto;
    padding: 24px 20px;
  }

  .o-chart-container__title {
    font-size: 16px;
  }
}