@charset "UTF-8";

/* ==================================================
   公開記事 + Gutenberg 共通
   記事本文の色はこのファイルで一元管理する
================================================== */

:root {
  /* ライトモード：現在の子テーマの値を維持 */
  --article-h1-size: 20pt;
  --article-heading-h2-bg: #393e4c;
  --article-heading-h2-text: #ffffff;
  --article-heading-h2-border: #d4d9ec;
  --article-heading-h3-bg: #eef1f6;
  --article-heading-h3-text: #222222;
  --article-heading-h3-border: #696969;
  --article-heading-h4-border: #696969;
  --article-special-list-border: #ffa200;
  --article-special-list-text: #0055b2;
  --article-code-bg: #d9dde3;
  --article-code-text: #222222;
  --article-code-border: #b8bec7;
  --article-code-button-bg: #c6cbd3;
  --article-code-button-hover-bg: #b9bec7;
  --article-code-button-border: #a8aeb8;

  /* ダークモード：公開記事とGutenbergで共用 */
  --article-dark-bg: #181a1b;
  --article-dark-text: #e6e6e6;
  --article-dark-text-strong: #f2f2f2;
  --article-link-color: #8ab4f8;
  --article-heading-bg: #393e4c;
  --article-heading-border: #6f7688;
  --article-heading-h3-dark-bg: #202225;
  --article-heading-h3-dark-border: #9a9a9a;
  --article-list-marker: #cfd3d8;
  --article-special-list-dark-bg: #202225;
  --article-special-list-dark-border: #d99000;
  --article-special-list-dark-text: #9fc5ff;
  --article-code-dark-bg: #202329;
  --article-code-dark-text: #e8e8e8;
  --article-code-dark-border: #444954;
  --article-code-button-dark-bg: #353941;
  --article-code-button-dark-hover-bg: #414650;
  --article-code-button-dark-border: #505662;
  --article-table-bg: #1f2226;
  --article-table-head-bg: #393e4c;
  --article-table-cell-bg: #25282d;
  --article-table-even-bg: #2b2e33;
  --article-table-border: #4a4f58;
  --article-table-head-border: #565c68;
  --article-quote-bg: #2c291f;
  --article-quote-text: #f3f0e8;
  --article-quote-border: #6f6240;
  --article-quote-accent: #d9b84a;
}

/* ==================================================
   見出し
================================================== */

.article h1,
.editor-styles-wrapper h1 {
  padding: 0.2em;
  font-size: var(--article-h1-size);
  border: none;
}

.article h2,
.editor-styles-wrapper h2 {
  padding: 0.5em;
  color: var(--article-heading-h2-text);
  background: var(--article-heading-h2-bg);
  border: none;
  border-bottom: solid 3px var(--article-heading-h2-border);
  border-radius: 0.2em;
}

.article h3,
.editor-styles-wrapper h3 {
  display: inline-block;
  width: auto;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  padding: 0.3em 0.7em;
  color: var(--article-heading-h3-text);
  font-size: 20px;
  background: var(--article-heading-h3-bg);
  border: none;
  border-left: solid 5px var(--article-heading-h3-border);
  border-radius: 0.1em;
}

.article h4,
.editor-styles-wrapper h4 {
  padding: 5px 10px;
  font-size: 20px;
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: solid 10px var(--article-heading-h4-border);
}

.article h5,
.article h6,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  padding: 0;
  border-bottom: none;
}

/* ==================================================
   記事内の特殊な箇条書き
================================================== */

.article ul.main-body-list-disc,
.entry-content ul.main-body-list-disc,
.editor-styles-wrapper ul.main-body-list-disc {
  padding: 0.5em 1em 0.5em 2.3em;
  border: solid 2px var(--article-special-list-border);
  border-radius: 5px;
}

.article ul.main-body-list-disc li,
.entry-content ul.main-body-list-disc li,
.editor-styles-wrapper ul.main-body-list-disc li {
  padding: 0.5em 0;
  color: var(--article-special-list-text);
  line-height: 1.5;
}

/* ==================================================
   div形式の番号付きリスト
================================================== */

.entry-content .ol,
.article .ol,
.editor-styles-wrapper .ol {
  margin: 1.2em 0 1.4em !important;
  padding-left: 1.4em !important;
}

.entry-content .ol .li,
.article .ol .li,
.editor-styles-wrapper .ol .li {
  margin: 0 0 0.45em !important;
  padding: 0 !important;
}

.entry-content .ol .li > div,
.article .ol .li > div,
.editor-styles-wrapper .ol .li > div {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.65 !important;
}

/* ==================================================
   コードブロック
================================================== */

.code-block-wrap,
.editor-styles-wrapper .code-block-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 1.5em 0 !important;
  overflow-x: clip !important;
  contain: inline-size;
  box-sizing: border-box !important;
}

body .entry-content .code-block-wrap pre.wp-block-code,
body .code-block-wrap pre.wp-block-code,
.editor-styles-wrapper pre.wp-block-code {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: 400px !important;
  margin: 0 !important;
  padding: 52px 18px 18px !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  color: var(--article-code-text) !important;
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  background: var(--article-code-bg) !important;
  border: 1px solid var(--article-code-border) !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior-x: none !important;
}

body .entry-content .code-block-wrap pre.wp-block-code code,
body .code-block-wrap pre.wp-block-code code,
.editor-styles-wrapper pre.wp-block-code code {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body .entry-content .code-block-wrap pre.wp-block-code *,
body .code-block-wrap pre.wp-block-code *,
.editor-styles-wrapper pre.wp-block-code * {
  max-width: 100% !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
}

body .entry-content .code-block-wrap pre.wp-block-code.code-expanded,
body .code-block-wrap pre.wp-block-code.code-expanded,
.editor-styles-wrapper pre.wp-block-code.code-expanded {
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.code-action-button {
  position: absolute !important;
  top: 10px !important;
  z-index: 10 !important;
  padding: 6px 12px !important;
  color: var(--article-code-text) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  background: var(--article-code-button-bg) !important;
  border: 1px solid var(--article-code-button-border) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}

.code-expand-button {
  right: 78px !important;
}

.code-copy-button {
  right: 10px !important;
}

.code-action-button:hover {
  background: var(--article-code-button-hover-bg) !important;
}

@media screen and (max-width: 768px) {
  .code-block-wrap,
  .editor-styles-wrapper .code-block-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  body .entry-content .code-block-wrap pre.wp-block-code,
  body .code-block-wrap pre.wp-block-code,
  .editor-styles-wrapper pre.wp-block-code {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 320px !important;
    padding: 52px 12px 14px !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    font-size: 12px !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  body .entry-content .code-block-wrap pre.wp-block-code.code-expanded,
  body .code-block-wrap pre.wp-block-code.code-expanded,
  .editor-styles-wrapper pre.wp-block-code.code-expanded {
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .code-action-button {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .code-expand-button {
    right: 68px !important;
  }

  .code-copy-button {
    right: 8px !important;
  }
}

/* ==================================================
   記事本文のダークモード
================================================== */

@media (prefers-color-scheme: dark) {
  .article,
  .entry-content,
  .editor-styles-wrapper {
    color: var(--article-dark-text) !important;
  }

  .article p,
  .article li,
  .article dt,
  .article dd,
  .entry-content p,
  .entry-content li,
  .entry-content dt,
  .entry-content dd,
  .editor-styles-wrapper p,
  .editor-styles-wrapper li,
  .editor-styles-wrapper dt,
  .editor-styles-wrapper dd {
    color: var(--article-dark-text);
  }

  .article a:not(.lkc-link),
  .entry-content a:not(.lkc-link),
  .editor-styles-wrapper a {
    color: var(--article-link-color);
  }

  .article strong,
  .article b,
  .entry-content strong,
  .entry-content b,
  .editor-styles-wrapper strong,
  .editor-styles-wrapper b {
    color: inherit;
  }

  .article h1,
  .editor-styles-wrapper h1 {
    color: var(--article-dark-text-strong) !important;
  }

  .article h2,
  .editor-styles-wrapper h2 {
    color: var(--article-heading-h2-text) !important;
    background: var(--article-heading-bg) !important;
    border-bottom-color: var(--article-heading-border) !important;
  }

  .article h3,
  .editor-styles-wrapper h3 {
    color: #eeeeee !important;
    background: var(--article-heading-h3-dark-bg) !important;
    border-left-color: var(--article-heading-h3-dark-border) !important;
  }

  .article h4,
  .editor-styles-wrapper h4 {
    color: #eeeeee !important;
    border-left-color: var(--article-heading-h3-dark-border) !important;
  }

  .article h5,
  .article h6,
  .editor-styles-wrapper h5,
  .editor-styles-wrapper h6 {
    color: #eeeeee !important;
  }

  .article ul.main-body-list-disc,
  .entry-content ul.main-body-list-disc,
  .editor-styles-wrapper ul.main-body-list-disc {
    background-color: var(--article-special-list-dark-bg) !important;
    border-color: var(--article-special-list-dark-border) !important;
  }

  .article ul.main-body-list-disc li,
  .entry-content ul.main-body-list-disc li,
  .editor-styles-wrapper ul.main-body-list-disc li {
    color: var(--article-special-list-dark-text) !important;
  }

  .article ol,
  .article ol li,
  .article ol li p,
  .entry-content ol,
  .entry-content ol li,
  .entry-content ol li p,
  .editor-styles-wrapper ol,
  .editor-styles-wrapper ol li,
  .editor-styles-wrapper ol li p,
  .entry-content .ol,
  .entry-content .ol .li,
  .entry-content .ol .li > div,
  .article .ol,
  .article .ol .li,
  .article .ol .li > div,
  .editor-styles-wrapper .ol,
  .editor-styles-wrapper .ol .li,
  .editor-styles-wrapper .ol .li > div {
    color: var(--article-dark-text) !important;
  }

  .article ol li::marker,
  .entry-content ol li::marker,
  .editor-styles-wrapper ol li::marker {
    color: var(--article-list-marker) !important;
  }

  body .entry-content .code-block-wrap pre.wp-block-code,
  body .code-block-wrap pre.wp-block-code,
  .editor-styles-wrapper pre.wp-block-code {
    color: var(--article-code-dark-text) !important;
    background: var(--article-code-dark-bg) !important;
    border-color: var(--article-code-dark-border) !important;
  }

  .code-action-button {
    color: #eeeeee !important;
    background: var(--article-code-button-dark-bg) !important;
    border-color: var(--article-code-button-dark-border) !important;
  }

  .code-action-button:hover {
    background: var(--article-code-button-dark-hover-bg) !important;
  }

  .article table,
  .entry-content table,
  .wp-block-table table,
  .editor-styles-wrapper table {
    color: var(--article-dark-text) !important;
    background: var(--article-table-bg) !important;
    border-color: var(--article-table-border) !important;
  }

  .article table th,
  .entry-content table th,
  .wp-block-table th,
  .editor-styles-wrapper table th {
    color: #ffffff !important;
    background: var(--article-table-head-bg) !important;
    border-color: var(--article-table-head-border) !important;
  }

  .article table td,
  .article table td p,
  .article table td span,
  .entry-content table td,
  .entry-content table td p,
  .entry-content table td span,
  .wp-block-table td,
  .wp-block-table td p,
  .wp-block-table td span,
  .editor-styles-wrapper table td,
  .editor-styles-wrapper table td p,
  .editor-styles-wrapper table td span {
    color: var(--article-dark-text) !important;
    border-color: var(--article-table-border) !important;
  }

  .article table td,
  .entry-content table td,
  .wp-block-table td,
  .editor-styles-wrapper table td {
    background: var(--article-table-cell-bg) !important;
  }

  .article table tbody tr:nth-child(even) td,
  .entry-content table tbody tr:nth-child(even) td,
  .wp-block-table tbody tr:nth-child(even) td,
  .editor-styles-wrapper table tbody tr:nth-child(even) td {
    background: var(--article-table-even-bg) !important;
  }

  .article .wp-block-quote,
  .article blockquote,
  .entry-content .wp-block-quote,
  .entry-content blockquote,
  .editor-styles-wrapper .wp-block-quote,
  .editor-styles-wrapper blockquote {
    color: var(--article-quote-text) !important;
    background: var(--article-quote-bg) !important;
    border: 1px solid var(--article-quote-border) !important;
    border-left: 5px solid var(--article-quote-accent) !important;
    box-shadow: 0 0 0 1px rgba(255, 215, 90, 0.04) !important;
  }

  .article .wp-block-quote p,
  .article blockquote p,
  .entry-content .wp-block-quote p,
  .entry-content blockquote p,
  .editor-styles-wrapper .wp-block-quote p,
  .editor-styles-wrapper blockquote p {
    color: var(--article-quote-text) !important;
  }

  .article .wp-block-quote::before,
  .article .wp-block-quote::after,
  .article blockquote::before,
  .article blockquote::after,
  .entry-content .wp-block-quote::before,
  .entry-content .wp-block-quote::after,
  .entry-content blockquote::before,
  .entry-content blockquote::after,
  .editor-styles-wrapper .wp-block-quote::before,
  .editor-styles-wrapper .wp-block-quote::after,
  .editor-styles-wrapper blockquote::before,
  .editor-styles-wrapper blockquote::after {
    color: var(--article-quote-accent) !important;
  }

  /* Cocoonの記事内ボックスは背景・枠を親テーマに任せ、文字色だけ揃える。 */
  .article .information-box,
  .article .question-box,
  .article .alert-box,
  .article .memo-box,
  .article .comment-box,
  .article .ok-box,
  .article .ng-box,
  .article .good-box,
  .article .bad-box,
  .entry-content .information-box,
  .entry-content .question-box,
  .entry-content .alert-box,
  .entry-content .memo-box,
  .entry-content .comment-box,
  .entry-content .ok-box,
  .entry-content .ng-box,
  .entry-content .good-box,
  .entry-content .bad-box,
  .editor-styles-wrapper .information-box,
  .editor-styles-wrapper .question-box,
  .editor-styles-wrapper .alert-box,
  .editor-styles-wrapper .memo-box,
  .editor-styles-wrapper .comment-box,
  .editor-styles-wrapper .ok-box,
  .editor-styles-wrapper .ng-box,
  .editor-styles-wrapper .good-box,
  .editor-styles-wrapper .bad-box {
    color: var(--article-dark-text) !important;
  }
}