/* Only activated paragraphs receive these rules. The rest of the site is untouched. */
@media (max-width: 640px) {
  .wp-block-post-content p.kjt-enabled {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    text-align: left !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }

  /* Nested chunks inside <strong>/<a> must also be flattened. Using `>`
     here left them as large flex items and recreated the huge word gaps. */
  .wp-block-post-content p.kjt-enabled .kjt-chunk {
    display: contents !important;
  }

  .wp-block-post-content p.kjt-enabled .kjt-a11y {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .wp-block-post-content p.kjt-enabled .kjt-glyph {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .wp-block-post-content p.kjt-enabled .kjt-space {
    flex: 0 0 .27em !important;
    white-space: pre !important;
  }

  .wp-block-post-content p.kjt-enabled > .kjt-tail {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* A bold/link run must not become one giant flex item: that caused
     large holes between "한 / 것 / 은" on the published insurance post. */
  .wp-block-post-content p.kjt-enabled :is(a, strong, em, b, i) {
    display: contents !important;
  }

  /* Keep clickable and visibly underlined links after display:contents. */
  .wp-block-post-content p.kjt-enabled a .kjt-glyph {
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
}