.important-notice[hidden] {
  display:
    none;
}

.important-notice-dialog {
  width:
    min(
      calc(100% - 28px),
      520px
    );

  max-height:
    calc(100dvh - 40px);

  padding:
    0;

  border:
    0;

  border-radius:
    18px;

  background:
    transparent;

  color:
    #29252a;

  box-shadow:
    0 24px 64px
    rgba(31, 10, 16, 0.28);
}

.important-notice-dialog::backdrop {
  background:
    rgba(24, 9, 14, 0.58);

  backdrop-filter:
    blur(3px);
}

.important-notice-dialog-card {
  overflow:
    hidden;

  border:
    1px solid
    rgba(112, 17, 43, 0.14);

  border-radius:
    18px;

  background:
    #ffffff;
}

.important-notice-dialog-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    18px 18px 15px;

  border-bottom:
    1px solid
    #eee4e7;

  background:
    linear-gradient(
      145deg,
      #fffafb,
      #f8eff2
    );
}

.important-notice-dialog-header > div {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.important-notice-dialog-header h2 {
  margin:
    0;

  color:
    #45101f;

  font-size:
    18px;

  line-height:
    1.4;
}

.important-notice-dialog-badge {
  flex:
    none;

  padding:
    4px 7px;

  border-radius:
    6px;

  background:
    #d51724;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    900;
}

.important-notice-dialog-close {
  display:
    grid;

  place-items:
    center;

  flex:
    none;

  width:
    36px;

  height:
    36px;

  padding:
    0;

  border:
    1px solid
    #dfcdd2;

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #70112b;

  font-size:
    24px;

  line-height:
    1;

  cursor:
    pointer;
}

.important-notice-dialog-close:focus-visible {
  outline:
    3px solid
    rgba(112, 17, 43, 0.2);

  outline-offset:
    2px;
}

.important-notice-dialog-detail {
  overflow-y:
    auto;

  max-height:
    min(
      58dvh,
      520px
    );

  padding:
    20px;

  color:
    #3c3538;

  font-size:
    14px;

  line-height:
    1.85;

  overflow-wrap:
    anywhere;

  white-space:
    pre-wrap;
}

@media screen and (max-width: 480px) {
  .important-notice-dialog {
    width:
      calc(100% - 20px);

    max-height:
      calc(100dvh - 20px);
  }

  .important-notice-dialog-header {
    padding:
      15px;
  }

  .important-notice-dialog-header h2 {
    font-size:
      16px;
  }

  .important-notice-dialog-detail {
    padding:
      17px;

    font-size:
      13px;
  }
}