/* =====================================================================
   NYXARIA JOURNAL — Article Styles  v2.0
   Animal × Fashion × Culture / 記事本文専用スコープCSS
   ---------------------------------------------------------------------
   v2.0 の変更点
   1) SWELL に詳細度で勝つ。
      SWELL は `.post_content h2` 等（詳細度 0-1-1）で本文を塗る。
      旧 v1.1 の `.nyx-article h2` も 0-1-1 で同点のため、
      読み込み順によっては SWELL が勝ち、紺ベタ＋ボルドー文字になっていた。
      → セレクタを `.nyx-article.nyx-article h2`（0-2-1）に上げて確実に勝つ。
      → !important は使わない（保守不能になるため）。
   2) ブランド外の色（ボルドー等）が SWELL から漏れないよう、
      文字色・背景色・境界色をすべて明示的に指定する。
   3) 配色トークンを1箇所に集約。TOPページに合わせるときは
      下の :root ブロックの hex を差し替えるだけでよい。

   配色 — TOPページの実CSS（plugin/assets/css/nyxaria-journal.css の :root）から採取。
   推測ではなく実測値。変えるときも向こうの :root を見てから変える。

     --nyx-ink    #151315  本文・見出し（TOPの --ink と同値）
     --nyx-struct #151315  構造色（表ヘッダー地／罫／CTA地）
     --nyx-accent #e3ff00  ライムグリーン。TOPでは --paper（地の色）。
                           記事では **塗り専用**（文字色・細線に使わない）

   ボルドー（ワイン）と紺は使わない。
   TOP側の :root は --wine / --wine-deep / --indigo を
   すべて #151315 に潰してある。つまりあの3色は意図的に排除済み。
   記事側も同じ扱いにし、構造色は紺ではなく ink に寄せる。

   ※ #e3ff00 は白背景ではコントラスト不足。文字・細線には使わない。
     使ってよいのは「上に黒文字を乗せる塗り面」のみ。

   使い方：SWELL子テーマに1回だけ読み込む（記事HTMLに埋め込まない）。
   記事は <div class="nyx-article">…</div> でラップ、本文はH2始まり。
   ===================================================================== */

:root{
  /* TOPページ実CSSの :root と同値 ------------------------------- */
  --nyx-ink:      #151315;   /* TOP: --ink   */
  --nyx-accent:   #e3ff00;   /* TOP: --paper（ライムグリーン） */
  --nyx-light:    #eee9df;   /* TOP: --light */
  --nyx-silver:   #a8a5a0;   /* TOP: --silver */

  /* 構造色。TOPが --wine / --indigo を潰したのと同じく ink に寄せる */
  --nyx-struct:   #151315;
  --nyx-struct-d: #2a262a;   /* hover用に少しだけ持ち上げる（純黒は使わない） */
  --nyx-ink-2:    #33302f;   /* 本文より一段弱い文字（引用・FAQ回答など） */

  /* 記事本文まわり（白地の可読性のために保持） ------------------ */
  --nyx-line:   rgba(21, 19, 21, .22);
  --nyx-soft:   #f2f2f0;
  --nyx-soft2:  #fafafa;
  --nyx-muted:  #6b6b66;
  --nyx-serif:  "Noto Serif JP", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --nyx-sans:   -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
                "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

/* ---------------------------------------------------------------------
   旧版CSS（v1.0）が「追加CSS」に残っている場合の打ち消し。

   v1.0 はトークンを `.nyx-article { --nyx-accent: #743d52; … }` と
   記事コンテナ自身に定義していた。CSS変数は「より近い祖先の値」が勝つため、
   :root にいくら正しい値を書いても、記事の内側では旧版の値に解決される。
   詳細度でも読み込み順でもなく、継承の距離で負ける。
   だから同じ要素に、より高い詳細度（0-2-0 > 0-1-0）で上書きし直す。

   追加CSSから旧版を消せばこのブロックは不要になる。消しても害は無い。
   --------------------------------------------------------------------- */
.nyx-article.nyx-article{
  --nyx-ink:      #151315;
  --nyx-accent:   #e3ff00;
  --nyx-light:    #eee9df;
  --nyx-silver:   #a8a5a0;
  --nyx-struct:   #151315;
  --nyx-struct-d: #2a262a;
  --nyx-ink-2:    #33302f;
  --nyx-line:     rgba(21, 19, 21, .22);
  --nyx-soft:     #f2f2f0;
  --nyx-soft2:    #fafafa;
  --nyx-muted:    #6b6b66;
  /* v1.0 にあってv2で廃止したトークン。残骸が参照されても事故らせない */
  --nyx-accent2:  #151315;
}

.nyx-article{
  max-width: 720px;
  margin-inline: auto;
  color: var(--nyx-ink);
  font-family: var(--nyx-sans);
  font-size: 17px;
  line-height: 1.95;                 /* スマホ可読性優先：ゆったり行間 */
  letter-spacing: .01em;
  word-break: normal;
  overflow-wrap: anywhere;           /* 長いURL等でも折り返す */
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px){
  .nyx-article{ font-size: 18px; }
}

/* ---- 段落 ---- */
.nyx-article.nyx-article p{ margin: 0 0 1.4em; color: var(--nyx-ink); }
.nyx-article.nyx-article > *:first-child{ margin-top: 0; }

/* ---- 導入リード ---- */
.nyx-article.nyx-article .nyx-lead{
  font-size: 1.08em;
  line-height: 1.9;
  color: var(--nyx-ink);
  margin-bottom: 1.8em;
}

/* ---- リンク：黒文字＋下線。hoverでアシッドのマーカー ---- */
.nyx-article.nyx-article a{
  color: var(--nyx-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: background .18s ease;
}
.nyx-article.nyx-article a:hover{
  background: var(--nyx-accent);     /* 蛍光マーカー風。文字は黒のまま読める */
  color: var(--nyx-ink);
}

/* ---- 強調ハイライト ---- */
.nyx-article.nyx-article mark,
.nyx-article.nyx-article .nyx-mark{
  background: var(--nyx-accent);
  color: var(--nyx-ink);
  padding: .04em .18em;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- セクションラベル：アシッドのチップ＋黒文字 ---- */
.nyx-article.nyx-article .nyx-eyebrow{
  display: inline-block;
  background: var(--nyx-accent);
  color: var(--nyx-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28em .7em;
  margin-bottom: .7em;
  border-radius: 0;
}

/* =====================================================================
   見出し — SWELLの装飾を打ち消してから、自前の署名デザインを乗せる
   H2＝明朝見出し＋アシッドの蛍光マーカー（黒文字が上に乗るので読める）
   ===================================================================== */

/* SWELLが付けている擬似要素の装飾を無効化（ベタ塗り・番号・飾り罫など） */
.nyx-article.nyx-article h2::before,
.nyx-article.nyx-article h2::after,
.nyx-article.nyx-article h3::after{
  content: none;
  display: none;
}

.nyx-article.nyx-article h2{
  display: table;                    /* ハイライトを文字幅にフィット */
  font-family: var(--nyx-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.2vw, 2rem);
  line-height: 1.5;
  letter-spacing: .015em;
  color: var(--nyx-ink);             /* ← ボルドーを上書き */
  margin: 3em 0 1em;
  padding: 0 .12em;
  border: none;
  border-radius: 0;
  /* 明朝テキストの下部を貫くアシッドの蛍光マーカー */
  background: linear-gradient(transparent 58%, var(--nyx-accent) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.nyx-article.nyx-article h3{
  font-family: var(--nyx-serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.42rem);
  line-height: 1.55;
  color: var(--nyx-ink);
  background: none;
  margin: 2.6em 0 .8em;
  padding: 0 0 0 .75em;
  border: none;
  border-left: 4px solid var(--nyx-struct);   /* 構造はinkでくっきり */
}

.nyx-article.nyx-article h4{
  font-family: var(--nyx-sans);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--nyx-ink);
  background: none;
  border: none;
  margin: 2em 0 .6em;
  padding-left: 1em;
  position: relative;
}
.nyx-article.nyx-article h4::before{
  content: "";
  display: block;
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  background: var(--nyx-struct);
  transform: rotate(45deg);          /* inkの小菱形マーカー */
}

/* =====================================================================
   リスト
   ===================================================================== */
.nyx-article.nyx-article ul{ list-style: none; padding-left: 0; margin: 1.4em 0; }
.nyx-article.nyx-article ul li{
  position: relative;
  padding-left: 1.5em;
  margin: .55em 0;
  line-height: 1.85;
  color: var(--nyx-ink);
}
.nyx-article.nyx-article ul li::before{
  content: "";
  display: block;
  position: absolute;
  left: .25em; top: .78em;
  width: 7px; height: 7px;
  background: var(--nyx-struct);
  transform: rotate(45deg);
}

.nyx-article.nyx-article ol{ list-style: none; counter-reset: nyx; padding-left: 0; margin: 1.4em 0; }
.nyx-article.nyx-article ol li{
  counter-increment: nyx;
  position: relative;
  padding-left: 2.1em;
  margin: .65em 0;
  line-height: 1.85;
  color: var(--nyx-ink);
}
.nyx-article.nyx-article ol li::before{
  content: counter(nyx);
  display: block;
  position: absolute;
  left: 0; top: 0;
  min-width: 1.5em;
  font-family: var(--nyx-serif);
  font-weight: 700;
  color: var(--nyx-struct);
  background: none;
}

/* =====================================================================
   テーブル（セル）— モバイルは横スクロール
   ヘッダーはink地×白文字（コントラスト比 15:1 超）
   ===================================================================== */
.nyx-article.nyx-article .nyx-table{
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--nyx-line);
  border-radius: 10px;
}
.nyx-article.nyx-article .nyx-table table{
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.6;
  background: #fff;
}
.nyx-article.nyx-article .nyx-table th,
.nyx-article.nyx-article .nyx-table td{
  padding: .85em 1em;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--nyx-line);
  vertical-align: top;
  color: var(--nyx-ink);
}
.nyx-article.nyx-article .nyx-table thead th{
  background: var(--nyx-struct);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.nyx-article.nyx-article .nyx-table tbody tr:nth-child(even){ background: var(--nyx-soft2); }
.nyx-article.nyx-article .nyx-table tbody tr:last-child td{ border-bottom: none; }

/* =====================================================================
   画像・図版
   ===================================================================== */
.nyx-article.nyx-article figure{ margin: 2.2em 0; }
.nyx-article.nyx-article img{
  display: block;
  max-width: 100%;
  height: auto;                      /* width/height属性はHTML側に必須（CLS対策） */
  border-radius: 8px;
}
.nyx-article.nyx-article figcaption{
  margin-top: .7em;
  padding-left: .9em;
  border-left: 2px solid var(--nyx-struct);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--nyx-muted);
  text-align: left;
}

/* =====================================================================
   コールアウト（補足・ポイント）
   ===================================================================== */
.nyx-article.nyx-article .nyx-callout{
  margin: 2em 0;
  padding: 1.4em 1.5em;
  background: var(--nyx-soft);
  border: none;
  border-radius: 12px;
}
.nyx-article.nyx-article .nyx-callout__label{
  display: inline-block;
  margin-bottom: .6em;
  padding: .22em .7em;
  background: var(--nyx-accent);
  color: var(--nyx-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nyx-article.nyx-article .nyx-callout p:last-child{ margin-bottom: 0; }

/* =====================================================================
   一次情報ブロック（出典明示）
   ===================================================================== */
.nyx-article.nyx-article .nyx-source{
  margin: 1.8em 0;
  padding: .3em 0 .3em 1.2em;
  border: none;
  border-left: 3px solid var(--nyx-struct);
  background: none;
  font-size: .92rem;
  color: var(--nyx-ink-2);
}
.nyx-article.nyx-article .nyx-source__label{
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--nyx-muted);
  margin-bottom: .3em;
}

/* ---- blockquote ---- */
.nyx-article.nyx-article blockquote{
  margin: 2em 0;
  padding: .2em 0 .2em 1.3em;
  border: none;
  border-left: 3px solid var(--nyx-struct);
  background: none;
  font-family: var(--nyx-serif);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--nyx-ink-2);
}
.nyx-article.nyx-article blockquote::before,
.nyx-article.nyx-article blockquote::after{ content: none; }

/* =====================================================================
   NYXARIA PICK UP（EC送客のブランドボックス）
   ===================================================================== */
.nyx-article.nyx-article .nyx-pick{
  margin: 2.6em 0;
  padding: 1.6em 1.6em 1.4em;
  border: 1.5px solid var(--nyx-struct);
  border-radius: 14px;
  background: #fff;
}
.nyx-article.nyx-article .nyx-pick__kicker{
  display: inline-block;
  margin-bottom: .8em;
  padding: .3em .8em;
  background: var(--nyx-accent);
  color: var(--nyx-ink);
  font-family: var(--nyx-serif);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nyx-article.nyx-article .nyx-pick__name{
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--nyx-ink);
  margin: 0 0 .4em;
}
.nyx-article.nyx-article .nyx-pick p{ margin-bottom: .9em; }

/* =====================================================================
   目次
   ===================================================================== */
.nyx-article.nyx-article .nyx-toc{
  margin: 2em 0;
  padding: 1.2em 1.5em;
  background: var(--nyx-soft);
  border: none;
  border-radius: 12px;
}
.nyx-article.nyx-article .nyx-toc__title{
  font-family: var(--nyx-serif);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--nyx-ink);
  margin-bottom: .6em;
}
.nyx-article.nyx-article .nyx-toc ol{ margin: 0; }
.nyx-article.nyx-article .nyx-toc a{ text-decoration: none; }
.nyx-article.nyx-article .nyx-toc a:hover{ background: var(--nyx-accent); }

/* =====================================================================
   FAQ（details/summary＝JSなしで開閉・クロール可）
   ===================================================================== */
.nyx-article.nyx-article .nyx-faq{
  border: none;
  border-bottom: 1px solid var(--nyx-line);
  background: none;
}
.nyx-article.nyx-article .nyx-faq summary{
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.05em 2.2em 1.05em 1.6em;
  font-weight: 700;
  line-height: 1.6;
  color: var(--nyx-ink);
  background: none;
}
.nyx-article.nyx-article .nyx-faq summary::-webkit-details-marker{ display: none; }
.nyx-article.nyx-article .nyx-faq summary::before{
  content: "Q";
  display: block;
  position: absolute;
  left: 0; top: 1.05em;
  font-family: var(--nyx-serif);
  font-weight: 700;
  color: var(--nyx-struct);
  background: none;
}
.nyx-article.nyx-article .nyx-faq summary::after{
  content: "+";
  display: block;
  position: absolute;
  right: .4em; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--nyx-struct);
  background: none;
}
.nyx-article.nyx-article .nyx-faq[open] summary::after{ content: "−"; }
.nyx-article.nyx-article .nyx-faq__a{
  padding: 0 1.6em 1.2em 1.6em;
  color: var(--nyx-ink-2);
}

/* =====================================================================
   CTA ボタン — ライム地×黒文字（高コントラスト）。hoverでinkに反転
   ===================================================================== */
.nyx-article.nyx-article .nyx-cta{ text-align: center; margin: 2.6em 0; }
.nyx-article.nyx-article .nyx-cta a{
  display: inline-block;
  padding: .95em 2.2em;
  background: var(--nyx-accent);
  color: var(--nyx-ink);
  border: none;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.nyx-article.nyx-article .nyx-cta a:hover{
  background: var(--nyx-struct);
  color: var(--nyx-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(14, 58, 75, .28);
}

/* ---- 区切り ---- */
.nyx-article.nyx-article hr,
.nyx-article.nyx-article .nyx-hr{
  border: none;
  height: 1px;
  background: var(--nyx-line);
  margin: 2.6em 0;
}

/* ---- アクセシビリティ / 品質フロア ---- */
.nyx-article.nyx-article a:focus-visible,
.nyx-article.nyx-article summary:focus-visible{
  outline: 2px solid var(--nyx-struct);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce){
  .nyx-article.nyx-article *{ transition: none !important; animation: none !important; }
}