/* =========================================================
   deracloud-article.css
   投稿（single.php）専用の本文スタイル（スコープ：.deracloud-article）
   Soft Accent: #B6DEDB (RGB 182,222,219)
========================================================= */

/* -----------------------------
   1) Design tokens (scoped)
----------------------------- */
.deracloud-article{
  --da-bg: #FFFFEB;
  --da-text: #1d1c1b;
  --da-accent: #14544e;
  --da-soft: #B6DEDB;
  --da-soft-10: rgba(182,222,219,0.10);
  --da-soft-12: rgba(182,222,219,0.12);
  --da-soft-18: rgba(182,222,219,0.18);
  --da-soft-20: rgba(182,222,219,0.20);
  --da-soft-25: rgba(182,222,219,0.25);
  --da-soft-35: rgba(182,222,219,0.35);
  --da-soft-55: rgba(182,222,219,0.55);
  --da-soft-85: rgba(182,222,219,0.85);
  --da-soft-90: rgba(182,222,219,0.90);
  --da-radius: 10px;

  background-color: var(--da-bg) !important;
  color: var(--da-text) !important;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Noto Sans",sans-serif;
  line-height: 1.8;
  padding: 24px 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.deracloud-article *{ box-sizing: border-box; }

/* 可能性の高いテーマ側の干渉（line-height:0 等）を相殺 */
.deracloud-article figure,
.deracloud-article .wp-caption{
  line-height: 1.6 !important;
}

/* -----------------------------
   2) Typography & inline
----------------------------- */
.deracloud-article p{ margin: 0 0 1.2em; }

.deracloud-article strong{
  font-weight: 650;
  color: var(--da-accent) !important; /* ← strongが黒になる問題の対策 */
}

.deracloud-article em{ font-style: italic; }
.deracloud-article small{ font-size: 0.92em; color: rgba(29,28,27,0.82); }
.deracloud-article mark{
  background: var(--da-soft-35);
  padding: 0.05em 0.25em;
  border-radius: 6px;
}
.deracloud-article sup,
.deracloud-article sub{ font-size: 0.75em; }
.deracloud-article u{ text-underline-offset: 3px; }
.deracloud-article s,
.deracloud-article del{ color: rgba(29,28,27,0.72); }
.deracloud-article abbr[title]{ cursor: help; text-decoration: underline dotted; }

.deracloud-article a{
  color: var(--da-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.deracloud-article a:hover{ text-decoration-thickness: 2px; }
.deracloud-article a:focus-visible{
  outline: 2px solid var(--da-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -----------------------------
   3) Headings
----------------------------- */
.deracloud-article h2{
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--da-accent);
  border-bottom: 2px solid var(--da-soft);
  padding-bottom: 10px;
  line-height: 1.35;
}
.deracloud-article h3{
  font-size: 1.55rem;
  font-weight: 700;
  margin: 32px 0 14px;
  color: var(--da-accent);
  line-height: 1.35;
  border-bottom: 1px solid rgba(20,84,78,0.25);
  padding-bottom: 8px;
}
.deracloud-article h4{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 22px 0 10px;
  color: var(--da-accent);
  line-height: 1.4;
}
.deracloud-article h5{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--da-accent);
  line-height: 1.4;
}

/* -----------------------------
   4) Lists / definition list
----------------------------- */
.deracloud-article ul,
.deracloud-article ol{
  margin: 0 0 1.2em 1.2em;
  padding-left: 1em;
}
.deracloud-article li{ margin: 0 0 0.45em; }
.deracloud-article li > p{ margin: 0.35em 0; }

.deracloud-article dl{ margin: 0 0 1.2em; }
.deracloud-article dt{
  font-weight: 700;
  color: var(--da-accent);
  margin: 0.75em 0 0.25em;
}
.deracloud-article dd{
  margin: 0 0 0.75em 1em;
  padding-left: 0.75em;
  border-left: 2px solid var(--da-soft-85);
}

/* -----------------------------
   5) Horizontal rule
----------------------------- */
.deracloud-article hr{
  border: none;
  border-top: 1px solid rgba(20,84,78,0.25);
  margin: 26px 0;
}

/* -----------------------------
   6) Summary / TOC
----------------------------- */
.deracloud-article .bridge-summary{
  margin: 18px 0 22px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--da-soft-90);
  border-radius: var(--da-radius);
}
.deracloud-article .bridge-summary p{ margin: 0; }

.deracloud-article .toc{
  background: #ffffff;
  border: 1px solid var(--da-soft-90);
  border-radius: var(--da-radius);
  padding: 14px 16px;
  margin: 16px 0 22px;
}
.deracloud-article .toc-title{
  font-weight: 800;
  text-align: center;
  margin: 0 0 10px;
  color: var(--da-accent);
}
.deracloud-article .toc ul{ list-style: none; margin: 0; padding: 0; }
.deracloud-article .toc li{ margin: 6px 0; }
.deracloud-article .toc a{ color: var(--da-text); text-decoration: none; }
.deracloud-article .toc a:hover{ text-decoration: underline; color: var(--da-accent); }

/* -----------------------------
   7) Media (images, captions)
----------------------------- */
.deracloud-article img{
  max-width: 100% !important;
  height: auto !important; /* ←「潰れて見える」対策の要所 */
}

.deracloud-article figure{
  margin: 0 0 1.2em;
  text-align: center;
  clear: both;
}
.deracloud-article figure img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--da-radius);
  border: 1px solid rgba(20,84,78,0.12);
}
.deracloud-article figcaption{
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(29,28,27,0.82);
}

/* Classic editor */
.deracloud-article .alignleft{ float: left; max-width: 46%; margin: 0 14px 10px 0; }
.deracloud-article .alignright{ float: right; max-width: 46%; margin: 0 0 10px 14px; }
.deracloud-article .aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.deracloud-article .wp-caption{ max-width: 100%; margin: 0 0 1.2em; text-align: center; }
.deracloud-article .wp-caption .wp-caption-text{
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(29,28,27,0.82);
}
.deracloud-article .clearfix{ clear: both; }

/* -----------------------------
   8) Quote
----------------------------- */
.deracloud-article blockquote{
  margin: 18px 0 22px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--da-soft-90);
  border-radius: var(--da-radius);
}
.deracloud-article blockquote p{ margin: 0 0 0.8em; }
.deracloud-article blockquote p:last-child{ margin-bottom: 0; }
.deracloud-article blockquote cite{
  display: block;
  font-style: normal;
  font-size: 0.92rem;
  color: rgba(29,28,27,0.75);
}

/* -----------------------------
   9) Code
----------------------------- */
.deracloud-article code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono","Noto Sans Mono","Courier New",monospace;
  font-size: 0.95em;
  background: var(--da-soft-25);
  border: 1px solid var(--da-soft-55);
  padding: 0.12em 0.35em;
  border-radius: 6px;
}
.deracloud-article pre{
  margin: 16px 0 22px;
  padding: 14px 16px;
  background: #0f1a18;
  color: #f2f5f4;
  border-radius: var(--da-radius);
  overflow: auto;
  border: 1px solid rgba(20,84,78,0.25);
}
.deracloud-article pre code{
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: 0.92em;
  white-space: pre;
}
.deracloud-article kbd{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace;
  font-size: 0.9em;
  background: #ffffff;
  border: 1px solid rgba(20,84,78,0.35);
  border-bottom-width: 3px;
  padding: 0.08em 0.4em;
  border-radius: 6px;
}

/* -----------------------------
   10) Tables
----------------------------- */
.deracloud-article .table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0 22px;
  border-radius: var(--da-radius);
}
.deracloud-article table{
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: #ffffff;
  border: 1px solid rgba(20,84,78,0.18);
  border-radius: var(--da-radius);
  overflow: hidden;
}
.deracloud-article caption{
  caption-side: top;
  text-align: left;
  font-weight: 800;
  color: var(--da-accent);
  padding: 12px 12px 8px;
}
.deracloud-article th,
.deracloud-article td{
  border-top: 1px solid rgba(20,84,78,0.12);
  padding: 10px 12px;
  vertical-align: top;
}
.deracloud-article thead th{
  background: var(--da-accent);
  color: #ffffff;
  font-weight: 800;
  border-top: none;
}
.deracloud-article tbody tr:nth-child(even){
  background: var(--da-soft-12);
}
.deracloud-article tfoot td{
  background: rgba(20,84,78,0.06);
  font-size: 0.92rem;
  color: rgba(29,28,27,0.85);
}
.deracloud-article .is-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------
   11) Callouts
----------------------------- */
.deracloud-article .callout{
  margin: 16px 0 22px;
  padding: 14px 16px;
  border-radius: var(--da-radius);
  background: #ffffff;
  border: 1px solid rgba(20,84,78,0.18);
}
.deracloud-article .callout-title{
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--da-accent);
}
.deracloud-article .callout p{ margin: 0 0 0.8em; }
.deracloud-article .callout p:last-child{ margin-bottom: 0; }

.deracloud-article .callout.note{
  border-color: var(--da-soft-90);
  box-shadow: 0 0 0 3px var(--da-soft-20) inset;
}
.deracloud-article .callout.warn{
  border-color: rgba(210,77,87,0.55);
  box-shadow: 0 0 0 3px rgba(210,77,87,0.10) inset;
}
.deracloud-article .callout.tip{
  border-color: rgba(20,84,78,0.28);
  box-shadow: 0 0 0 3px rgba(20,84,78,0.08) inset;
}

/* -----------------------------
   12) FAQ (details/summary)
----------------------------- */
.deracloud-article .faq-section{
  margin: 18px 0 22px;
  padding-top: 4px;
}
.deracloud-article .faq-item{
  margin: 0 0 10px;
  border: 1px solid rgba(20,84,78,0.18);
  border-radius: var(--da-radius);
  background: #ffffff;
  overflow: hidden;
}
.deracloud-article .faq-question{
  font-weight: 800;
  color: var(--da-accent);
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.deracloud-article .faq-question::-webkit-details-marker{ display:none; }
.deracloud-article .faq-question::after{
  content: '+';
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 1.3rem;
  color: rgba(29,28,27,0.55);
  transition: transform .15s;
}
.deracloud-article .faq-item[open] > .faq-question::after{ transform: rotate(45deg); }
.deracloud-article .faq-answer{ padding: 0 14px 14px; color: rgba(29,28,27,0.92); }
.deracloud-article .faq-answer p:last-child{ margin-bottom: 0; }

/* -----------------------------
   13) Internal link / CTA
----------------------------- */
.deracloud-article .internal-link-box{
  margin: 16px 0 22px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--da-soft-90);
  border-radius: var(--da-radius);
}
.deracloud-article .internal-link-title{
  font-weight: 900;
  text-align: center;
  margin: 0 0 10px;
  color: var(--da-accent);
}
.deracloud-article .internal-link-button{
  text-align: center;
  margin: 10px 0 0;
}
.deracloud-article .internal-link-button a{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--da-accent);
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
}
.deracloud-article .internal-link-button a:hover{
  filter: brightness(1.05);
  text-decoration: none;
}

.deracloud-article .cta-section{
  margin: 18px 0 22px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(20,84,78,0.18);
  border-radius: var(--da-radius);
}
.deracloud-article .cta-section p{ margin: 0 0 0.9em; }
.deracloud-article .cta-section p:last-child{ margin-bottom: 0; }
.deracloud-article .cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.deracloud-article .cta-button{
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--da-radius);
  background: var(--da-accent);
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(20,84,78,0.2);
}
.deracloud-article .cta-button:hover{
  text-decoration: none;
  filter: brightness(1.05);
}
.deracloud-article .cta-button.ghost{
  background: #ffffff;
  color: var(--da-accent);
  border: 1px solid rgba(20,84,78,0.35);
}

/* -----------------------------
   14) Embeds
----------------------------- */
.deracloud-article .embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 16px 0 22px;
  border-radius: var(--da-radius);
  overflow: hidden;
  border: 1px solid rgba(20,84,78,0.18);
  background: #ffffff;
}
.deracloud-article .embed iframe{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* -----------------------------
   15) Footer note / disclosure
----------------------------- */
.deracloud-article .article-scope-note{
  margin-top: 26px;
  padding: 16px;
  border-radius: var(--da-radius);
  background: #ffffff;
  border: 1px solid rgba(20,84,78,0.18);
  font-size: 0.95rem;
}
.deracloud-article .article-scope-note h4{
  margin: 0 0 10px;
  color: var(--da-accent);
  border: none;
  padding: 0;
}
.deracloud-article .article-scope-note ol{ margin: 0 0 0 1.2em; }
.deracloud-article .article-scope-note li{ margin: 0 0 0.5em; }

.deracloud-article .article-author-disclosure{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,84,78,0.18);
  font-size: 0.9rem;
  color: rgba(29,28,27,0.78);
  text-align: center;
}

/* -----------------------------
   16) Responsive tweaks
----------------------------- */
@media (min-width:768px){
  .deracloud-article{ padding: 32px 24px; }
  .deracloud-article h2{ font-size: 2.1rem; }
  .deracloud-article h3{ font-size: 1.65rem; }
  .deracloud-article .alignleft,
  .deracloud-article .alignright{ max-width: 42%; }
}

@media (max-width:480px){
  .deracloud-article .alignleft,
  .deracloud-article .alignright{
    float: none;
    max-width: 100%;
    margin: 0 0 12px 0;
  }
}