@charset "UTF-8";

/* Webフォント
   IBM Plex Sans JP : 和文（JUUVOと同一書体）
   Geist Mono       : 日付・ラベル・数値

   本来は functions.php で wp_enqueue_style するのが望ましいが、
   テーマエディタからのPHP保存がセキュリティ設定（ループバック遮断）で
   ロールバックされるため、暫定的に @import で読み込んでいる。
   FTP等でfunctions.phpを直接編集できるようになったら移行する。 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* ══════════════════════════════════════════════════════════════
   Lingoff Design System v1
   JUUVO（juuvo.app）のモノクローム設計を継承し、
   言語カテゴリごとに対応アプリのアクセントカラーを割り当てる。

   色の定義は「2. 言語アクセント」の1ブロックのみ。
   それ以降のスタイルはすべて var(--lg-accent) 経由で参照する。
   ══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   1. トークン
   ────────────────────────────────────────────── */
:root {
  /* 地と文字（JUUVO: 黒の不透明度で階層をつくる） */
  --lg-bg:           #FFFFFF;
  --lg-surface:      #FAFAFA;
  --lg-ink:          #000000;
  --lg-ink-soft:     rgba(0, 0, 0, 0.72);
  --lg-ink-muted:    rgba(0, 0, 0, 0.48);
  --lg-ink-faint:    rgba(0, 0, 0, 0.34);
  --lg-border:       rgba(0, 0, 0, 0.08);
  --lg-border-strong:rgba(0, 0, 0, 0.16);

  /* 既定アクセント（アプリ未対応の言語・トップページ等） */
  --lg-accent:       #1A1A1A;
  --lg-accent-wash:  rgba(0, 0, 0, 0.04);
  --lg-accent-line:  rgba(0, 0, 0, 0.14);

  /* 書体 */
  --lg-font-jp:   'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont,
                  'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --lg-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* 形 */
  --lg-radius:    14px;
  --lg-radius-sm: 8px;
  --lg-ease:      cubic-bezier(0.22, 1, 0.36, 1);
}


/* ──────────────────────────────────────────────
   2. 言語アクセント ← 色を書くのはここだけ
   ────────────────────────────────────────────── */

/* 韓国語 — TOPIK韓国語単語帳8000 */
body.categoryid-4,
body.category-korean,
.entry-card.category-korean-post,
.related-entry-card.category-korean-post {
  --lg-accent:      #0047FF;
  --lg-accent-wash: rgba(0, 71, 255, 0.06);
  --lg-accent-line: rgba(0, 71, 255, 0.22);
}

/* 中国語 — HSK中国語単語帳11092 */
body.categoryid-5,
body.category-chinese,
.entry-card.category-chinese-post,
.related-entry-card.category-chinese-post {
  --lg-accent:      #BC1F1F;
  --lg-accent-wash: rgba(188, 31, 31, 0.06);
  --lg-accent-line: rgba(188, 31, 31, 0.22);
}

/* フランス語 — 仏検フランス語単語帳9000 */
body.categoryid-12,
body.category-french,
.entry-card.category-french-post,
.related-entry-card.category-french-post {
  --lg-accent:      #003772;
  --lg-accent-wash: rgba(0, 55, 114, 0.06);
  --lg-accent-line: rgba(0, 55, 114, 0.22);
}

/* カテゴリラベル単体（トップページなど混在一覧で個別に色をもたせる） */
.cat-label-4  { --lg-accent: #0047FF; --lg-accent-wash: rgba(0,71,255,0.06);  --lg-accent-line: rgba(0,71,255,0.22); }
.cat-label-5  { --lg-accent: #BC1F1F; --lg-accent-wash: rgba(188,31,31,0.06); --lg-accent-line: rgba(188,31,31,0.22); }
.cat-label-12 { --lg-accent: #003772; --lg-accent-wash: rgba(0,55,114,0.06);  --lg-accent-line: rgba(0,55,114,0.22); }


/* ──────────────────────────────────────────────
   3. ベース書体
   ────────────────────────────────────────────── */
body {
  font-family: var(--lg-font-jp);
  color: var(--lg-ink-soft);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 見出しは字間を詰めて締める */
.article h1,
.article h2,
.article h3,
.article h4,
.entry-card-title,
.archive-title {
  font-family: var(--lg-font-jp);
  color: var(--lg-ink);
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* 日付・数値・ラベルはモノスペース */
.post-date,
.post-update,
.entry-date,
.cat-label,
.entry-category {
  font-family: var(--lg-font-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}


/* ──────────────────────────────────────────────
   4. 記事タイトル・メタ
   ────────────────────────────────────────────── */
.article .entry-title {
  font-size: 2em;
  line-height: 1.45;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
  margin-bottom: 0.7em;
}

.article .date-tags {
  font-size: 0.72em;
  color: var(--lg-ink-faint);
  letter-spacing: 0.04em;
}

.article .date-tags .fa {
  color: var(--lg-ink-faint);
}


/* ──────────────────────────────────────────────
   5. 本文
   ────────────────────────────────────────────── */
.article .entry-content {
  line-height: 1.9;
  color: var(--lg-ink-soft);
}

.article .entry-content p {
  margin-bottom: 1.6em;
}

/* h2 — 左罫をアクセント色に。SILKの下線指定を打ち消す */
.article .entry-content h2 {
  margin: 2.6em 0 1em;
  padding: 0.1em 0 0.1em 16px;
  font-size: 1.42em;
  line-height: 1.5;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--lg-accent);
  border-radius: 0;
  transition: border-color 0.3s var(--lg-ease);
}

.article .entry-content h3 {
  margin: 2.2em 0 0.8em;
  padding: 0 0 0.4em;
  font-size: 1.18em;
  line-height: 1.6;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lg-border);
  border-radius: 0;
}

.article .entry-content h4 {
  margin: 1.8em 0 0.7em;
  font-size: 1.05em;
  background: transparent;
  border: 0;
  padding: 0;
}

/* 本文リンク */
.article .entry-content a:not(.a-wrap):not(.btn) {
  color: var(--lg-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--lg-accent-line);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--lg-ease);
}
.article .entry-content a:not(.a-wrap):not(.btn):hover {
  border-bottom-color: var(--lg-accent);
}

/* リスト */
.article .entry-content ul li,
.article .entry-content ol li {
  margin-bottom: 0.5em;
  line-height: 1.85;
}

/* 表 */
.article .entry-content table {
  font-size: 0.92em;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.article .entry-content table th {
  background: var(--lg-surface);
  color: var(--lg-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-color: var(--lg-border);
}
.article .entry-content table td {
  border-color: var(--lg-border);
  color: var(--lg-ink-soft);
}

/* 区切り線 */
.article .entry-content hr.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--lg-border);
  margin: 2.8em 0;
}


/* ──────────────────────────────────────────────
   6. CTAブロック（引用として出力されるアプリ紹介）
   ────────────────────────────────────────────── */
.article .entry-content blockquote {
  margin: 2.4em 0;
  padding: 24px 26px;
  background: var(--lg-accent-wash);
  border: 1px solid var(--lg-accent-line);
  border-radius: var(--lg-radius);
  opacity: 1;
  transition: border-color 0.3s var(--lg-ease), background 0.3s var(--lg-ease);
}

/* SILKの装飾（引用符・斜体）を消す */
.article .entry-content blockquote::before,
.article .entry-content blockquote::after,
.article .entry-content blockquote p:first-of-type::before {
  content: none;
}

.article .entry-content blockquote p {
  margin-bottom: 0.7em;
  font-size: 0.94em;
  line-height: 1.85;
  color: var(--lg-ink-soft);
}
.article .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* 1行目（アプリ名）を見出しとして扱う */
.article .entry-content blockquote p:first-child {
  font-size: 1em;
  font-weight: 600;
  color: var(--lg-ink);
  letter-spacing: -0.01em;
}

/* App Storeリンクをボタン然とさせる */
.article .entry-content blockquote a {
  display: inline-block;
  margin-top: 0.3em;
  font-family: var(--lg-font-mono);
  font-size: 0.86em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--lg-accent);
  border-bottom: 1px solid var(--lg-accent-line);
  text-decoration: none;
}
.article .entry-content blockquote a:hover {
  border-bottom-color: var(--lg-accent);
}


/* ──────────────────────────────────────────────
   7. カテゴリラベル
   ────────────────────────────────────────────── */
.cat-label,
.eye-catch .cat-label,
.entry-category {
  background: var(--lg-accent-wash);
  color: var(--lg-accent);
  border: 1px solid var(--lg-accent-line);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}


/* ──────────────────────────────────────────────
   8. カテゴリページ（アーカイブ）
   ────────────────────────────────────────────── */
.archive-title {
  font-size: 1.9em;
  line-height: 1.3;
  letter-spacing: -0.035em;
  padding: 0 0 20px;
  margin-bottom: 28px;
  border: 0;
  border-bottom: 2px solid var(--lg-accent);
  background: transparent;
  transition: border-color 0.3s var(--lg-ease);
}

/* フォルダアイコンは使わない */
.archive-title .fa-folder-open {
  display: none;
}

/* 対応アプリ名を副題として添える（テンプレート編集なしで実現） */
body.category-korean  .archive-title::after { content: "TOPIK韓国語単語帳8000"; }
body.category-chinese .archive-title::after { content: "HSK中国語単語帳11092"; }
body.category-french  .archive-title::after { content: "仏検フランス語単語帳9000"; }

body.category-korean  .archive-title::after,
body.category-chinese .archive-title::after,
body.category-french  .archive-title::after {
  display: block;
  margin-top: 10px;
  font-family: var(--lg-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lg-accent);
}


/* ──────────────────────────────────────────────
   9. 記事カード（一覧・関連記事）
   ────────────────────────────────────────────── */
.entry-card-wrap,
.related-entry-card-wrap {
  border-radius: var(--lg-radius);
  border-color: var(--lg-border);
  transition: background 0.25s var(--lg-ease), border-color 0.25s var(--lg-ease);
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  background: var(--lg-accent-wash);
  border-color: var(--lg-accent-line);
}

.entry-card-title,
.related-entry-card-title {
  font-size: 1.02em;
  line-height: 1.6;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--lg-ink);
}

.entry-card-snippet {
  color: var(--lg-ink-muted);
  font-size: 0.86em;
  line-height: 1.75;
}

.entry-card-meta .post-date,
.related-entry-card-meta .post-date {
  color: var(--lg-ink-faint);
  font-size: 0.76em;
  letter-spacing: 0.04em;
}


/* ──────────────────────────────────────────────
   10. 関連記事（本文末尾に手動で追加しているリンク群）
   ────────────────────────────────────────────── */
.article .entry-content h2 + ul {
  margin: 0.4em 0 1.6em;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lg-border);
}

.article .entry-content h2 + ul > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--lg-border);
}

.article .entry-content h2 + ul > li > a {
  display: block;
  padding: 13px 2px;
  font-size: 0.92em;
  line-height: 1.6;
  color: var(--lg-ink-soft);
  border-bottom: 0;
  transition: color 0.2s var(--lg-ease), padding-left 0.2s var(--lg-ease);
}

.article .entry-content h2 + ul > li > a:hover {
  color: var(--lg-accent);
  padding-left: 8px;
  border-bottom: 0;
}


/* ──────────────────────────────────────────────
   11. Cocoon標準の関連記事見出し
   ────────────────────────────────────────────── */
.related-entry-heading {
  font-family: var(--lg-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lg-ink-faint);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lg-border);
  padding: 0 0 10px;
  margin-bottom: 20px;
}


/* ──────────────────────────────────────────────
   12. 目次
   ────────────────────────────────────────────── */
.toc {
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  padding: 20px 24px;
}
.toc-title {
  font-family: var(--lg-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lg-ink-faint);
}
.toc a {
  color: var(--lg-ink-soft);
  text-decoration: none;
}
.toc a:hover {
  color: var(--lg-accent);
}


/* ──────────────────────────────────────────────
   13. フォーカス表示（アクセシビリティ）
   ────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lg-accent);
  outline-offset: 2px;
}


/* ──────────────────────────────────────────────
   14. 動きを減らす設定への配慮
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ──────────────────────────────
   15. Cocoonキーカラー（紫 #8b5cf6）の打ち消し
   ──────────────────────────────
   キーカラーはCSS変数ではなく80箇所に直接出力される。
   Cocoon設定からの変更がWAFに阻まれるため、表示に出る箇所のみ上書きする。
   設定側で変更できたらこの節は削除してよい。 */

/* 最上部のバー → その言語のアクセント色 */
.tagline {
  background: var(--lg-accent) !important;
  transition: background 0.3s var(--lg-ease);
}

/* サイドバー見出し */
.sidebar h2,
.sidebar h3,
.sidebar .wp-block-heading {
  font-family: var(--lg-font-mono);
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left !important;
  color: var(--lg-ink-faint) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lg-border) !important;
  border-radius: 0 !important;
  padding: 0 0 10px !important;
}

/* シェアボタンの見出し */
.sns-share-message { background: var(--lg-ink) !important; }

/* トップへ戻るボタン */
.go-to-top-button { background: var(--lg-ink) !important; }

/* 目次の番号・アイコン */
.toc-list > li::before,
.toc-number,
.fa-chevron-left,
.fa-chevron-right {
  color: var(--lg-ink-faint) !important;
  background-color: transparent !important;
  border-color: var(--lg-border) !important;
}

/* ──────────────────────────────
   16. ロゴの表示サイズ
   ──────────────────────────────
   ロゴは原寸で表示されるため、Retina向けに2倍解像度の画像を
   等倍サイズで表示させる。モバイルでは段階的に縮小。 */
.site-logo-image {
  width: 600px;
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════
   レスポンシブ
   ══════════════════════════════════════════════ */

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .article .entry-title { font-size: 1.7em; }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .article .entry-content h2 { font-size: 1.28em; margin-top: 2.2em; }
  .article .entry-content h3 { font-size: 1.1em; }
  .archive-title { font-size: 1.5em; }
  .site-logo-image { width: 420px; }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .article .entry-title { font-size: 1.45em; letter-spacing: -0.025em; }
  .article .entry-content blockquote { padding: 18px 18px; }
  .article .entry-content h2 { padding-left: 12px; }
  .site-logo-image { width: 280px; }
}