/* リスト項目同士の間隔 */
.post_content .swell-list-gap > li + li,
.editor-styles-wrapper .swell-list-gap > li + li {
  margin-top: 0.6em !important;
}

/* 旧note_wrapを変換したノート装飾。本文と編集画面の両方に対応。 */
.post_content .luxech-note,
.post_content .is-style-luxech-note,
.editor-styles-wrapper .luxech-note,
.editor-styles-wrapper .is-style-luxech-note,
.post_content :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring),
.editor-styles-wrapper :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) {
  position: relative;
  padding: 1.25em 1.25em 1.25em 2.75em;
  border: 1px solid #d7e0e6;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  overflow-wrap: anywhere;
}

/* 標準のカラー設定を優先。色を選んでいない場合だけ従来の色を使う。 */
.post_content :is(.luxech-note, .is-style-luxech-note, .wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring):not(.has-background),
.editor-styles-wrapper :is(.luxech-note, .is-style-luxech-note, .wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring):not(.has-background) {
  background-color: #fffdf4;
}
.post_content :is(.luxech-note, .is-style-luxech-note, .wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring):not(.has-text-color),
.editor-styles-wrapper :is(.luxech-note, .is-style-luxech-note, .wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring):not(.has-text-color) {
  color: #1f2937;
}

/* 左端の赤い縦線 */
.post_content .luxech-note::before,
.post_content .is-style-luxech-note::before,
.editor-styles-wrapper .luxech-note::before,
.editor-styles-wrapper .is-style-luxech-note::before,
.post_content :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring)::before,
.editor-styles-wrapper :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.75em;
  border-left: 2px solid #e7a7a7;
  pointer-events: none;
}

/* 複数行の文章にも罫線を敷く。段落間は1em空ける。 */
.post_content .luxech-note p,
.post_content .is-style-luxech-note p,
.editor-styles-wrapper .luxech-note p,
.editor-styles-wrapper .is-style-luxech-note p,
.post_content :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) p,
.editor-styles-wrapper :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) p {
  margin: 0 0 1em !important;
  line-height: 2 !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2em - 1px),
    #d6e1eb calc(2em - 1px),
    #d6e1eb 2em
  );
}

.post_content .luxech-note > :last-child,
.post_content .luxech-note > .wp-block-group__inner-container > :last-child,
.post_content .is-style-luxech-note > :last-child,
.post_content .is-style-luxech-note > .wp-block-group__inner-container > :last-child,
.editor-styles-wrapper .luxech-note > :last-child,
.editor-styles-wrapper .luxech-note > .wp-block-group__inner-container > :last-child,
.editor-styles-wrapper .is-style-luxech-note > :last-child,
.editor-styles-wrapper .is-style-luxech-note > .wp-block-group__inner-container > :last-child,
.post_content :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) > :last-child,
.post_content :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) > .wp-block-group__inner-container > :last-child,
.editor-styles-wrapper :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) > :last-child,
.editor-styles-wrapper :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) > .wp-block-group__inner-container > :last-child {
  margin-bottom: 0 !important;
}

/* 方眼・ドットは余白を均等にし、紙全体に模様を敷く。 */
.post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots),
.editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots) {
  padding: 1.25em;
}
.post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-grid,
.editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-grid {
  background-image: linear-gradient(#d6e1eb 1px, transparent 1px), linear-gradient(90deg, #d6e1eb 1px, transparent 1px);
  background-size: 1.5em 1.5em;
}
.post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-dots,
.editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-dots {
  background-image: radial-gradient(circle, #a8bbc9 1px, transparent 1px);
  background-size: 1.25em 1.25em;
}
.post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots)::before,
.editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots)::before {
  display: none;
}
.post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots) p,
.editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots) p {
  background-image: none;
}

/* リングノート。穴とリングをCSSで描き、本文の横罫線は維持する。 */
.post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::before,
.editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::before {
  top: 0.25em;
  bottom: 0.25em;
  left: 0.65em;
  width: 1.2em;
  border-left: 0;
  background-image: radial-gradient(ellipse 0.48em 0.25em at 50% 50%, #fafafa 52%, #9ca3af 56%, #6b7280 68%, transparent 72%);
  background-size: 1.2em 2em;
}
.post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::after,
.editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2em;
  border-left: 1px dashed #cbd5e1;
  pointer-events: none;
}

@media (max-width: 600px) {
  .post_content .luxech-note,
  .post_content .is-style-luxech-note,
  .editor-styles-wrapper .luxech-note,
  .editor-styles-wrapper .is-style-luxech-note,
  .post_content :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring),
  .editor-styles-wrapper :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring) {
    padding: 1em 1em 1em 2.25em;
  }

  .post_content .luxech-note::before,
  .post_content .is-style-luxech-note::before,
  .editor-styles-wrapper .luxech-note::before,
  .editor-styles-wrapper .is-style-luxech-note::before,
  .post_content :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring)::before,
  .editor-styles-wrapper :is(.wp-block-los-note, .is-style-los-note-grid, .is-style-los-note-dots, .is-style-los-note-ring)::before {
    left: 1.25em;
  }
  .post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots),
  .editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note):is(.is-style-los-note-grid, .is-style-los-note-dots) {
    padding: 1em;
  }
  .post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::before,
  .editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::before {
    left: 0.4em;
  }
  .post_content :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::after,
  .editor-styles-wrapper :is(.wp-block-los-note, .wp-block-group, .luxech-note).is-style-los-note-ring::after {
    left: 1.7em;
  }
}