/* 運用安定化用の最終スタイル。既存テーマ内の古い定義による上書きを防止する。 */
.talent-modal,
.talent-modal.active {
  display: block;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
}

.talent-modal .modal-image {
  width: 100%;
  min-height: 0;
  height: 96px;
}

.talent-modal .modal-content {
  min-width: 0;
}

.notify-button.is-notification-active,
.ep-notify.is-notification-active {
  background: #fff0f6;
  border: 1px solid #e9a4c3;
  color: #a43770;
}

@media (max-width: 640px) {
  .talent-modal,
  .talent-modal.active {
    display: block;
    width: min(480px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .talent-modal .modal-image {
    min-height: 0;
    height: 44px;
  }
}

/* 既存テーマの後方!important指定に対する最終上書き。 */
body.light-preview .talent-modal,
body.light-preview .talent-modal.active {
  display: block !important;
  width: min(480px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow: auto !important;
}

body.light-preview .talent-modal .modal-image {
  width: 100% !important;
  height: 96px !important;
  min-height: 0 !important;
  max-height: 96px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

body.light-preview .talent-modal .modal-content {
  min-width: 0 !important;
}

@media (max-width: 640px) {
  body.light-preview .talent-modal,
  body.light-preview .talent-modal.active {
    display: block !important;
    width: min(480px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  body.light-preview .talent-modal .modal-image {
    width: 100% !important;
    height: 44px !important;
    min-height: 0 !important;
    max-height: 44px !important;
    aspect-ratio: auto !important;
  }
}