@charset "UTF-8";
/* ================================================================
   article.css — 記事本文
   すべて .wa-article の中だけに効く。Cocoon には依存しない。
   記事HTMLにはクラスとHTMLだけを書き、スタイルはすべてここに置く。
   1. 素の要素（見出し・段落・リスト・表・引用・リンク）
   2. 強調（wa-em / wa-em-teal）
   3. パーツ（balloon / info / quote / stamps / cta / refs）
   ================================================================ */

.wa-article {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 2;
  color: var(--text-body);
  overflow-wrap: anywhere;
}

/* 1. 素の要素 */
.wa-article p {
  margin: 0 0 1.8em;
  letter-spacing: 0.03em;
  text-wrap: pretty; /* 最後の行に1〜2文字だけ残るのを防ぐ */
}

.wa-article h2 {
  margin: 96px 0 40px;
  padding: 0.65em 1em 0.65em 1.3em;
  font-size: clamp(22px, 3vw, 29px);
  font-weight: 800;
  line-height: 1.42;
  font-feature-settings: 'palt'; /* 句読点・かっこの余白を詰める */
  word-break: auto-phrase;       /* 文節の切れ目で改行する（Chrome / Edge） */
  color: var(--text-strong);
  background: var(--glow-blue-a12);
  border: none;
  border-left: 3px solid var(--glow-teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: inset 3px 0 0 var(--glow-teal);
}
.wa-article > h2:first-child { margin-top: 0; }

.wa-article h3 {
  margin: 56px 0 24px;
  padding: 0 0 10px;
  font-size: clamp(18px, 3.4vw, 21px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--text-primary);
  background: none;
  border: none;
  border-bottom: 1px solid var(--card-border);
}
.wa-article h3::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 12px 3px 2px;
  border-radius: 50%;
  background: var(--glow-teal);
  box-shadow: 0 0 10px var(--glow-teal);
}

.wa-article strong { color: var(--text-primary); font-weight: 800; }

.wa-article a {
  color: var(--glow-blue);
  text-decoration: underline;
  text-decoration-color: var(--glow-blue-a30);
  text-underline-offset: 4px;
}
.wa-article a:hover { color: var(--glow-teal); text-decoration-color: var(--glow-teal); }

.wa-article ul,
.wa-article ol {
  margin: 0 0 1.8em;
  padding-left: 1.6em;
}
.wa-article li { margin-bottom: 0.5em; }
.wa-article li::marker { color: var(--glow-teal); font-weight: 700; }

.wa-article hr {
  margin: 80px auto;
  width: 60px;
  height: 3px;
  border: none;
  background: linear-gradient(90deg, var(--glow-teal), transparent);
}

.wa-article blockquote {
  margin: 48px 0;
  padding: 24px 30px;
  color: var(--text-muted);
  background: var(--glow-teal-a08);
  border: none;
  border-left: 3px solid var(--glow-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wa-article blockquote p:last-child { margin-bottom: 0; }
.wa-article blockquote::before,
.wa-article blockquote::after { content: none; } /* Cocoon の引用符アイコンを消す */

.wa-article .wa-table {
  margin: 48px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--glow-blue-a30) transparent;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--ocean-1);
}
/* 表はセル内で改行しない。はみ出す分は .wa-table の横スクロールで見せる */
.wa-article table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}
.wa-article th,
.wa-article td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  border: none;
  border-bottom: 1px solid var(--card-border);
}
.wa-article th {
  color: var(--glow-blue);
  font-weight: 800;
  background: var(--glow-blue-a12);
}
.wa-article tr:last-child td { border-bottom: none; }
.wa-article tr:nth-child(even) td { background: rgba(10, 38, 71, 0.35); }

.wa-article code {
  padding: 2px 6px;
  font-size: 0.9em;
  color: var(--glow-soft);
  background: var(--glow-blue-a12);
  border-radius: 4px;
}

/* 2. 強調（1セクションに2〜3か所まで） */
.wa-article .wa-em {
  color: var(--glow-blue);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.20);
}
.wa-article .wa-em-teal {
  color: var(--glow-teal);
  font-weight: 800;
}

/* 3. パーツ */

/* 吹き出し：ホエール坊やのひと言（各セクションの終わりに1つ） */
.wa-article .wa-balloon {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 48px 0;
  padding: 22px 26px;
  background: var(--glow-blue-a12);
  border: 1px solid var(--glow-blue-a20);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.wa-article .wa-balloon-icon {
  flex-shrink: 0;
  font-size: 28px;
  line-height: 1.2;
}
.wa-article .wa-balloon-body {
  color: var(--text-primary);
  font-weight: 500;
}
.wa-article .wa-balloon-body p:last-child { margin-bottom: 0; }

/* 補足ボックス */
.wa-article .wa-infobox {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 48px 0;
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-muted);
  background: rgba(38, 208, 206, 0.06);
  border: 1px solid var(--glow-teal-a20);
  border-radius: var(--radius-md);
}
.wa-article .wa-infobox-icon { flex-shrink: 0; font-size: 22px; line-height: 1.4; }
.wa-article .wa-infobox-title {
  display: block;
  margin-bottom: 6px;
  color: var(--glow-teal);
  font-weight: 800;
}
.wa-article .wa-infobox-body p:last-child { margin-bottom: 0; }
.wa-article .wa-infobox-body strong { color: var(--glow-teal); }

/* 引用（出典つき） */
.wa-article .wa-quote {
  margin: 48px 0;
  padding: 24px 30px;
  background: var(--glow-teal-a08);
  border-left: 3px solid var(--glow-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wa-article .wa-quote-text {
  color: var(--text-primary);
  font-size: 16px;
  font-style: italic;
  line-height: 1.9;
}
.wa-article .wa-quote-text p:last-child { margin-bottom: 0; }
.wa-article .wa-quote-attr {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: right;
  color: var(--text-dim);
}

/* お告げスタンプ（まとめ用。4個以上で使う） */
.wa-article .wa-stamps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 48px 0;
  padding: 0;
  list-style: none;
}
.wa-article .wa-stamps li {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 18px 20px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--glow-blue);
  background: var(--ocean-1);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  transition: transform 0.3s var(--ease-float), background 0.3s var(--ease-float);
}
.wa-article .wa-stamps li::marker { content: none; }
.wa-article .wa-stamps li:hover { transform: translateY(-3px); background: var(--glow-blue-a12); }
.wa-article .wa-stamp-emoji { font-size: 22px; }
@media (max-width: 560px) {
  .wa-article .wa-stamps { grid-template-columns: 1fr; }
}

/* CTA：記事の最後の「次の一歩」 */
.wa-article .wa-cta {
  position: relative;
  overflow: hidden;
  margin: 96px 0 48px;
  padding: 56px 24px;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.wa-article .wa-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--glow-teal), var(--glow-blue), transparent);
}
.wa-article .wa-cta-eyebrow {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--glow-teal);
}
.wa-article .wa-cta-title {
  margin: 0 0 20px;
  font-size: clamp(19px, 3.6vw, 24px);
  font-weight: 800;
  line-height: 1.6;
  font-feature-settings: 'palt';
  word-break: auto-phrase;
  color: var(--text-strong);
}
.wa-article .wa-cta-body {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 15px;
  color: var(--text-muted);
}
.wa-article .wa-cta-body p:last-child { margin-bottom: 0; }
.wa-article .wa-cta-btn {
  display: inline-block;
  padding: 15px 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--glow-blue);
  text-decoration: none;
  background: linear-gradient(135deg, var(--glow-blue-a12), var(--glow-teal-a08));
  border: 1px solid var(--glow-blue-a30);
  border-radius: 50px;
  transition: transform 0.3s var(--ease-float), box-shadow 0.3s var(--ease-float);
}
.wa-article .wa-cta-btn:hover {
  color: var(--glow-soft);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(79, 195, 247, 0.22);
}
.wa-article .wa-cta-note {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

/* 参考文献 */
.wa-article .wa-refs {
  margin: 64px 0 0;
  padding: 24px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
  border-top: 1px solid var(--card-border);
}
.wa-article .wa-refs-title {
  margin: 0 0 12px;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  background: none;
  border: none;
}
.wa-article .wa-refs-title::before { content: none; }
/* 1件ずつカードにする。上から「誰が（種類・年のタグ＋名前）→ 概要 → 書誌情報」 */
.wa-article .wa-refs ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wa-ref;
}
.wa-article .wa-refs li.wa-ref {
  counter-increment: wa-ref;
  position: relative;
  margin: 0 0 14px;
  padding: 16px 18px 14px 58px;
  background: var(--glow-blue-a12);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-float);
}
/* 番号は本文の [^n] と同じ丸い数字 */
.wa-article .wa-refs li.wa-ref::before {
  content: counter(wa-ref);
  position: absolute;
  left: 18px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-serif), var(--font-round);
  font-size: 13px;
  line-height: 1;
  color: var(--glow-blue);
  border: 1px solid var(--glow-blue-a30);
  border-radius: var(--radius-pill);
}
.wa-article .wa-refs li.wa-ref:target { border-color: var(--glow-blue-a30); box-shadow: var(--shadow-glow-sm); }
.wa-article .wa-ref-who,
.wa-cite-pop .wa-ref-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 2px 0 6px;
}
.wa-ref-tag {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.6;
  color: var(--glow-teal);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
}
.wa-ref-name { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.wa-article .wa-ref-sum,
.wa-cite-pop .wa-ref-sum { margin: 0 0 8px; font-size: 14px; line-height: 1.85; color: var(--text-body); }
.wa-article .wa-ref-cite,
.wa-cite-pop .wa-ref-cite { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--text-dim); }
.wa-ref-cite a { color: var(--text-dim); }
.wa-ref-cite a:hover { color: var(--glow-blue); }

/* 本文の [^n]：丸い数字。押す（PC は触れる）と、その場に出典の箱（popover）が開く */
.wa-article .wa-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  margin: 0 0.2em;
  padding: 0 0.4em;
  vertical-align: 0.45em;
  font-family: var(--font-serif), var(--font-round);
  font-size: 11px;
  line-height: 1;
  color: var(--glow-blue);
  background: var(--glow-blue-a12);
  border: 1px solid var(--glow-blue-a30);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-float);
}
.wa-article .wa-cite:hover,
.wa-article .wa-cite:focus-visible {
  background: var(--glow-blue-a20);
  color: var(--text-strong);
  box-shadow: var(--shadow-glow-sm);
  outline: none;
}
/* 出典の箱。数字の下に付け、下に余白がなければ上に開く（CSS のアンカー配置） */
.wa-cite-pop {
  inset: auto;
  margin: 8px 0 0;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  background: var(--ocean-1);
  border: 1px solid var(--glow-blue-a30);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card), var(--shadow-glow-md);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  transition:
    opacity var(--dur-fast) var(--ease-float),
    scale   var(--dur-fast) var(--ease-float),
    overlay var(--dur-fast) allow-discrete,
    display var(--dur-fast) allow-discrete;
}
.wa-cite-pop:not(:popover-open) { opacity: 0; }
@starting-style {
  .wa-cite-pop:popover-open { opacity: 0; scale: 0.97; }
}
.wa-cite-pop-no {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--glow-teal);
}
.wa-cite-pop p { margin: 0 0 8px; }
.wa-cite-pop .wa-ref-sum { font-size: 13px; line-height: 1.75; }
.wa-cite-pop-link { font-size: 12px; color: var(--glow-blue); }
/* アンカー配置に対応していないブラウザでは、画面の下にシートのように出す */
@supports not (position-area: bottom) {
  .wa-cite-pop {
    inset: auto 16px 16px 16px;
    width: auto;
    max-width: none;
    margin: 0;
  }
}

/* スマホ */
@media (max-width: 560px) {
  .wa-article { font-size: 16px; }
  .wa-article h2 { margin-top: 72px; }
  .wa-article .wa-balloon,
  .wa-article .wa-infobox { padding: 18px 20px; }
  .wa-article .wa-cta { padding: 44px 18px; }
  /* 参考文献: 番号を上に置き、左の余白を詰める */
  .wa-article .wa-refs li.wa-ref { padding: 14px 16px 12px; }
  .wa-article .wa-refs li.wa-ref::before { left: 16px; top: 14px; }
  .wa-article .wa-refs li.wa-ref > :first-child { min-height: 26px; padding-left: 36px; }
}