@charset "UTF-8";

/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Description: Cocoon子テーマ（katsulog ダークリデザイン）
Author: katsuya
Author URI: https://www.katsulog.tech/
Template: cocoon-master
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =====================================================================
   katsulog ダークリデザイン — Cocoon子テーマ style.css
   実DOM調査（https://www.katsulog.tech/ / /qr-send-chrome-extension-intro/）で
   確認済みの実クラス名に対して上書きしている。
   Cocoon本体（親テーマ）は編集していない前提。
   AdSense自動広告の挿入要素は非表示にしていない。
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. デザイントークン（CSS変数）
   --------------------------------------------------------------------- */
:root{
  /* 背景 */
  --c-bg: #0a0d13;
  --c-bg-footer: #080b10;
  --c-surface: #0e131d;
  --c-surface-2: #111826;
  --c-input: #10151f;
  --c-chip: #141a26;

  /* ボーダー */
  --c-border: #1a2130;
  --c-border-2: #232a38;
  --c-border-hover: #2f3a4e;
  --c-border-hover-2: #3a475e;

  /* テキスト */
  --c-text: #e6e9ef;
  --c-heading: #eef1f6;
  --c-heading-strong: #ffffff;
  --c-muted: #8b93a7;
  --c-muted-2: #5b6479;
  --c-muted-3: #4a5468;

  /* リンク */
  --c-link: #6cb6ff;
  --c-link-hover: #9fd0ff;

  /* アクセント（Ruby赤） */
  --c-accent: #c3123f;
  --c-accent-dark: #7a0f2b;
  --c-accent-soft: #e6b3c2;
  --c-accent-grad: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));

  --c-selection: rgba(108,182,255,0.28);

  /* タイポ */
  --f-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 寸法 */
  --radius-card: 16px;
  --radius-input: 10px;
  --radius-sm: 7px;
  --container-max: 1160px;
  --header-h: 66px;
}

/* ---------------------------------------------------------------------
   1. 全体 / リセット寄りの上書き
   --------------------------------------------------------------------- */
html{
  scrollbar-color: var(--c-border-2) var(--c-bg);
}
body{
  background: var(--c-bg) !important;
  color: var(--c-text);
  font-family: var(--f-sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
body, .body{
  background: var(--c-bg);
}
a{
  color: var(--c-link);
  transition: color .15s;
}
a:hover{
  color: var(--c-link-hover);
}
::selection{
  background: var(--c-selection);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--c-border-2); border-radius:6px; }
::-webkit-scrollbar-track{ background: var(--c-bg); }

#container, .container{
  background: var(--c-bg);
}

/* 見出し全般のベース色 */
.article h2, .article h3, .article h4, .article h5, .article h6,
.sidebar h2, .sidebar h3, .widget h2, .widget h3{
  color: var(--c-heading-strong) !important;
}

@keyframes katsulogFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   2. ヘッダー（#header-container / .header / #navi）
   --------------------------------------------------------------------- */
#header-container{
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,13,19,0.82) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  box-shadow: none !important;
}
#header-container-in{
  max-width: var(--container-max);
  margin: 0 auto;
}
.header{
  background: transparent !important;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
}
.header-in{
  display: flex;
  align-items: center;
  padding: 12px 28px;
}
.header .tagline{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-muted-2) !important;
  border: 1px solid var(--c-border-2);
  padding: 2px 8px;
  border-radius: 5px;
  margin-left: 10px;
  order: 3;
}
.logo.logo-header.logo-text{
  margin: 0;
}
.header .site-name-text-link{
  display: flex;
  align-items: center;
  gap: 11px;
}
.header .site-name-text{
  color: var(--c-heading-strong) !important;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
}
/* ロゴの赤グラデ角丸ボックス（k） */
.header .site-name-text-link::before{
  content: "k";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--c-accent-grad);
  color: #fff;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(195,18,63,0.35);
  flex-shrink: 0;
}

/* グローバルナビ */
#navi{
  background: transparent !important;
}
#navi .navi-in{
  max-width: var(--container-max);
  margin: 0 auto;
}
#navi .navi-in .menu-item > a{
  color: #c3cad9 !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent !important;
}
#navi .navi-in .menu-item > a:hover{
  background: var(--c-chip) !important;
  color: #fff !important;
}
/* お問い合わせ（グローバルメニュー最後の項目）を白ボタン風に */
#navi .navi-in .menu-top > .menu-item:last-child > a{
  margin-left: 6px;
  color: var(--c-bg) !important;
  background: var(--c-heading) !important;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
}
#navi .navi-in .menu-top > .menu-item:last-child > a:hover{
  background: #fff !important;
}

/* ---------------------------------------------------------------------
   3. アピール（qr-send バナー） #appeal
   トップのヒーロー直下バナーは Cocoon の「アピール」機能をそのまま使う。
   --------------------------------------------------------------------- */
#appeal.appeal{
  background: transparent !important;
  border-bottom: 1px solid #131a27;
  padding: 0;
}
#appeal .appeal-in{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px;
}
#appeal .appeal-content{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  background: linear-gradient(120deg, #14060c, #1a0a12 55%, #0e131d);
  border: 1px solid rgba(195,18,63,0.35);
  border-radius: 18px;
  padding: 22px 26px;
  transition: border-color .18s;
}
#appeal .appeal-content:hover{
  border-color: rgba(195,18,63,0.6);
}
/* QRっぽい市松模様の装飾ブロック */
#appeal .appeal-content::before{
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  width: 74px;
  height: 74px;
  border-radius: 14px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--c-bg) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c-bg) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c-bg) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c-bg) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
#appeal .appeal-title{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 18px;
  color: #fff !important;
}
#appeal .appeal-title::after{
  content: "MY PROJECT";
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--c-accent-soft);
  border: 1px solid rgba(195,18,63,0.5);
  padding: 2px 8px;
  border-radius: 999px;
}
#appeal .appeal-message{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
#appeal .appeal-message p{
  margin: 0;
  font-size: 14.5px;
  color: #c9cfdb;
  line-height: 1.7;
}
#appeal .appeal-button{
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-bg) !important;
  background: #fff !important;
  padding: 11px 20px;
  border-radius: 10px;
  border: none !important;
}
#appeal .appeal-button:hover{
  background: #f0f0f0 !important;
}

/* ---------------------------------------------------------------------
   4. コンテンツ全体レイアウト（#content / .main / .sidebar）
   --------------------------------------------------------------------- */
#content{
  background: transparent;
}
#content-in{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 44px;
  align-items: start;
}
.main{
  min-width: 0;
  width: auto;
  padding: 40px 0 72px;
}
.sidebar{
  width: auto;
  padding: 40px 0 0;
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* サイドバー ウィジェット共通カード化 */
.sidebar .widget,
.sidebar aside.widget{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 22px;
  margin: 0 0 22px;
}
.sidebar .widget:last-child{ margin-bottom: 0; }
.sidebar .widget h2,
.sidebar .widget h3,
.sidebar .widget-title{
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-muted-2) !important;
  font-family: var(--f-mono);
  text-transform: uppercase;
}

/* --- qr-send カード（カスタムHTMLウィジェット） ---
   custom-html-widgets.md のマークアップに対応するクラス */
.sidebar .qrsend-card,
.qrsend-card{
  display: block;
  background: linear-gradient(150deg, #1a0a12, #0e131d 70%);
  border: 1px solid rgba(195,18,63,0.35);
  border-radius: var(--radius-card);
  padding: 22px;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color .18s;
}
.qrsend-card:hover{
  border-color: rgba(195,18,63,0.6);
}
.qrsend-card__head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.qrsend-card__qr{
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--c-bg) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c-bg) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c-bg) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c-bg) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  flex-shrink: 0;
}
.qrsend-card__name{
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.qrsend-card__tag{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-accent-soft);
}
.qrsend-card__desc{
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.75;
}
.qrsend-card__btn{
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-bg);
  background: #fff;
  padding: 9px;
  border-radius: 9px;
}
.qrsend-card__btn:hover{
  background: #f0f0f0;
}
/* コンパクト版（記事詳細サイドなど） */
.qrsend-card--compact{ padding: 20px; }
.qrsend-card--compact .qrsend-card__eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-accent-soft);
  margin-bottom: 6px;
}
.qrsend-card--compact .qrsend-card__name{ display:block; margin-bottom:8px; }
.qrsend-card--compact .qrsend-card__desc{ font-size: 12.5px; }

/* ---------------------------------------------------------------------
   5. 記事一覧カード（トップ / カテゴリ / タグ一覧） .entry-card-wrap
   --------------------------------------------------------------------- */
#list.list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.entry-card-wrap.a-wrap{
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.entry-card-wrap .entry-card,
.entry-card-wrap article.entry-card{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px;
  padding: 14px;
  margin: 0;
  transition: border-color .18s, transform .18s, background .18s;
}
.entry-card-wrap:hover .entry-card{
  border-color: var(--c-border-hover) !important;
  background: var(--c-surface-2) !important;
  transform: translateY(-2px);
}
.entry-card-thumb.card-thumb{
  position: relative;
  float: none;
  width: auto;
  margin: 0;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg,#151b27,#151b27 9px,#111722 9px,#111722 18px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-card-thumb-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Cocoonのプレースホルダー画像自体は隠して縞背景を見せる */
.entry-card-thumb-image.no-image{
  opacity: 0;
}
.entry-card-thumb:has(.entry-card-thumb-image.no-image)::after{
  content: "thumbnail";
  position: absolute;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-muted-3);
  letter-spacing: 0.05em;
}
.entry-card-content.card-content{
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.entry-card-meta.card-meta{
  order: -1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-muted-2) !important;
  margin: 0 0 8px;
}
.entry-card-meta .post-date,
.entry-card-meta .entry-date{
  color: var(--c-muted-2) !important;
}
.entry-card-meta .fa-clock-o{ margin-right: 4px; }
.entry-card-title.card-title{
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--c-heading) !important;
}
.entry-card-wrap:hover .entry-card-title{
  color: #fff !important;
}
.entry-card-snippet.card-snippet{
  margin: 0 0 12px;
  color: var(--c-muted) !important;
  font-size: 14px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* カテゴリバッジ（サムネイル左上）とカテゴリラベル全般を赤グラデ統一 */
.cat-label,
.entry-category,
.cat-link{
  background: var(--c-accent-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
}
.entry-card-thumb .cat-label{
  position: absolute;
  top: 9px;
  left: 9px;
  background: rgba(10,13,19,0.72) !important;
  border: 1px solid #2a3345 !important;
  color: var(--c-heading) !important;
}
.entry-card-categorys{
  margin-top: auto;
}
.tag-link{
  font-family: var(--f-mono);
  font-size: 11px;
  color: #7f8aa0 !important;
  background: var(--c-chip) !important;
  border: 1px solid #202838 !important;
  border-radius: 6px;
  padding: 3px 9px;
}
.tag-link:hover{
  border-color: var(--c-border-hover-2) !important;
  color: var(--c-heading) !important;
}

/* ページネーション */
.pagination, .pager-links{
  margin-top: 28px;
}
.pagination .page-numbers,
.pager-links a, .pager-links span{
  background: var(--c-chip) !important;
  border: 1px solid var(--c-border-2) !important;
  color: var(--c-muted) !important;
}
.pagination .page-numbers.current,
.pagination .current{
  background: var(--c-accent-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.pagination a:hover,
.pagination-next-link:hover{
  background: var(--c-chip) !important;
  border-color: var(--c-border-hover) !important;
}
.key-btn{
  background: rgba(195,18,63,0.08) !important;
  border: 1px solid rgba(195,18,63,0.4) !important;
  color: var(--c-heading) !important;
}

/* 検索フォーム（ヘッダー・サイドバー・検索ページ共通） */
.search-box.input-box{
  position: relative;
}
.search-edit{
  width: 100%;
  background: var(--c-input) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: 12px;
  padding: 14px 16px 14px 42px;
  color: var(--c-text) !important;
  font-family: var(--f-sans);
  font-size: 15px;
}
.search-edit:focus{
  border-color: var(--c-border-hover-2) !important;
  outline: none;
}
.search-submit{
  background: transparent !important;
  color: var(--c-muted-2) !important;
  border: none !important;
}

/* タグクラウド（サイドバー Tags） */
.tagcloud{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tagcloud a{
  font-family: var(--f-mono) !important;
  font-size: 12px !important;
  color: var(--c-muted) !important;
  background: var(--c-chip) !important;
  border: 1px solid #202838 !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
}
.tagcloud a:hover{
  border-color: var(--c-border-hover-2) !important;
  color: var(--c-heading) !important;
}

/* 人気記事ウィジェット（Cocoon標準） */
.popular-entry-cards .ranking-item,
.ranking-item{
  border-color: var(--c-border) !important;
  background: transparent !important;
}
.ranking-item .ranking-item-number,
.ranking-item .ranking-num{
  color: var(--c-accent) !important;
  font-family: var(--f-mono);
  font-weight: 700;
}
.ranking-item a{
  color: #c3cad9;
}
.ranking-item a:hover{
  color: #fff;
}

/* 汎用ウィジェット（カテゴリー/最近の記事/アーカイブ等）のリンク */
.widget_categories a, .widget_archive a, .widget_recent_entries a,
.widget_pages a, .widget_meta a, .widget_rss a, .widget_nav_menu a{
  color: #c3cad9 !important;
}
.widget_categories a:hover, .widget_archive a:hover, .widget_recent_entries a:hover,
.widget_pages a:hover, .widget_meta a:hover, .widget_rss a:hover, .widget_nav_menu a:hover{
  color: #fff !important;
  background: transparent !important;
}

/* 空状態（検索結果なし等はCocoon標準文言のブロックを流用） */
.no-post, .search-no-results{
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--c-border-2);
  border-radius: 14px;
  color: var(--c-muted-2);
}

/* ---------------------------------------------------------------------
   6. 記事詳細 .article / .entry-content
   --------------------------------------------------------------------- */
.article{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  animation: katsulogFadeUp .4s ease;
}
.article-header.entry-header{
  margin-bottom: 26px;
}
.article .entry-title{
  margin: 0 0 18px;
  font-size: 33px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: -0.005em;
  color: var(--c-heading-strong) !important;
}
.article .date-tags,
.article .post-date{
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--c-muted-2) !important;
}
.eye-catch-wrap{
  margin-bottom: 34px;
}
.eye-catch-wrap .eye-catch{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.eye-catch-wrap .eye-catch img{
  border-radius: 16px;
}

/* 目次（Cocoon標準 #toc） */
.article .toc{
  background: var(--c-surface);
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-card);
  padding: 4px 22px;
  margin: 0 0 32px;
}
.article .toc .toc-title{
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-muted-2);
  text-transform: uppercase;
}
.article .toc .toc-list a{
  color: #c3cad9;
  font-size: 13.5px;
}
.article .toc .toc-list a:hover{
  color: #fff;
}
.article .toc .toc-list li::marker{
  color: var(--c-muted-3);
}

/* 見出し（H2左に赤ボーダー） */
.article h2{
  margin: 40px 0 16px;
  font-size: 23px;
  font-weight: 700;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--c-accent) !important;
  background: transparent !important;
}
.article h3{
  margin: 32px 0 14px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--c-border-2) !important;
  padding-bottom: 8px;
}
.article h4, .article h5, .article h6{
  color: var(--c-heading) !important;
}
.article p{
  color: #c9cfdb;
  font-size: 16px;
  line-height: 2;
}
.article .entry-content > p:first-of-type{
  font-size: 17px;
  color: var(--c-text);
}
.article ul, .article ol{
  color: #c9cfdb;
}
.article li{
  margin-bottom: 10px;
}
.article a{
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-color: rgba(108,182,255,0.35);
}
.article a:hover{
  color: var(--c-link-hover);
}

/* コードブロック */
.article pre{
  background: #0d1220 !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px;
  padding: 20px;
  overflow: auto;
}
.article pre code{
  font-family: var(--f-mono);
  font-size: 13.5px;
  line-height: 1.8;
  background: transparent !important;
  color: var(--c-text);
}
/* インラインコード */
.article code,
.article :not(pre) > code{
  font-family: var(--f-mono);
  font-size: 14px;
  background: var(--c-chip) !important;
  border: 1px solid #202838 !important;
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--c-accent-soft) !important;
}
.article pre code, .article pre code *{
  border: none !important;
  padding: 0;
}

/* 引用 */
.article blockquote{
  background: rgba(195,18,63,0.06) !important;
  border: 1px solid rgba(195,18,63,0.25) !important;
  border-left: 1px solid rgba(195,18,63,0.25) !important;
  border-radius: 12px;
  padding: 16px 20px;
  color: #d9b3c0 !important;
  font-size: 14.5px;
}
.article blockquote::before, .article blockquote::after{
  color: rgba(195,18,63,0.5) !important;
}

/* テーブル */
.article table{
  border-color: var(--c-border-2) !important;
}
.article table th{
  background: rgba(195,18,63,0.08) !important;
  border-color: var(--c-border-2) !important;
  color: var(--c-heading) !important;
}
.article table td{
  border-color: var(--c-border-2) !important;
  color: #c9cfdb;
}
.article table tr:nth-of-type(2n+1){
  background: rgba(195,18,63,0.03) !important;
}

/* タグ・カテゴリ（記事下部） */
.entry-categories-tags .entry-categories a,
.entry-categories-tags .entry-tags a{
  border-radius: 999px;
}

/* 著者ボックス（Cocoon標準 .author-box。表示にはCocoon設定でのプロフィール有効化が必要） */
.author-box{
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-card);
  margin-top: 44px;
  padding-top: 26px;
}
.author-box .author-name, .author-box .author-name a{
  color: var(--c-heading-strong) !important;
  font-weight: 700;
}
.author-box .author-description{
  color: var(--c-muted) !important;
}
/* footer内の簡易著者表示（現状のCocoon既定マークアップ） */
.article-footer .footer-meta .author-info,
.article-footer .footer-meta .author-link,
.article-footer .footer-meta .author-name{
  color: var(--c-muted) !important;
}
.article-footer .footer-meta{
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--c-border);
}

/* 関連記事 */
.related-entries{
  background: transparent;
}
.related-entries .related-entry-heading{
  color: var(--c-heading-strong) !important;
}
.related-entries .related-entry-card-wrap{
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
}
.related-entries .related-entry-card-wrap:hover{
  border-color: var(--c-border-hover) !important;
}

/* 前後記事ナビ */
.pager-post-navi a.a-wrap{
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
}
.pager-post-navi a.a-wrap:hover{
  border-color: var(--c-border-hover) !important;
  background: var(--c-surface-2) !important;
}
.pager-post-navi .prev-post-title,
.pager-post-navi .next-post-title{
  color: var(--c-heading) !important;
}

/* パンくず */
#breadcrumb.breadcrumb{
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--c-muted-2);
  margin-bottom: 26px;
}
#breadcrumb .breadcrumb-caption{
  color: #c3cad9;
}
#breadcrumb .breadcrumb-home .breadcrumb-caption{
  color: var(--c-link);
}
#breadcrumb a:hover .breadcrumb-caption{
  color: var(--c-link-hover);
}

/* コメント欄 */
#comment-area, .comment-area{
  background: transparent;
}
.comment-area .comment-title{
  color: var(--c-heading-strong) !important;
}
.comment-respond, #respond{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 22px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  background: var(--c-input) !important;
  border: 1px solid var(--c-border-2) !important;
  color: var(--c-text) !important;
  border-radius: var(--radius-input);
}
.comment-form .submit{
  background: var(--c-accent-grad) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-input);
}

/* ---------------------------------------------------------------------
   7. フッター
   --------------------------------------------------------------------- */
#footer.footer{
  background: var(--c-bg-footer) !important;
  border-top: 1px solid #131a27;
}
#footer .footer-in{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 34px 28px;
}
#footer .footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
#footer .logo.logo-footer.logo-text{
  display: flex;
  align-items: center;
  gap: 10px;
}
#footer .logo.logo-footer.logo-text::before{
  content: "k";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--c-accent-grad);
  color: #fff;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12px;
}
#footer .site-name-text{
  color: var(--c-heading-strong) !important;
  font-weight: 700;
  font-size: 15px;
}
#footer .source-org.copyright{
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-muted-3) !important;
}
#footer a{
  color: var(--c-muted) !important;
}
#footer a:hover{
  color: var(--c-heading) !important;
  background: transparent !important;
}

/* モバイル固定フッターメニュー（Cocoon標準機能はそのまま活かしつつダーク化） */
.mobile-footer-menu-buttons{
  background: rgba(10,13,19,0.94) !important;
  border-top: 1px solid var(--c-border) !important;
}
.mobile-footer-menu-buttons .menu-button-in,
.mobile-footer-menu-buttons .menu-caption{
  color: var(--c-muted) !important;
}
.go-to-top-button{
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  color: var(--c-text) !important;
}

/* ---------------------------------------------------------------------
   8. レスポンシブ（〜768px）
   --------------------------------------------------------------------- */
@media (max-width: 1024px){
  #content-in{
    grid-template-columns: 1fr;
  }
  .sidebar{
    position: static;
    padding-top: 32px;
  }
}

@media (max-width: 768px){
  #header-container-in, #appeal .appeal-in, #content-in, #footer .footer-in{
    padding-left: 16px;
    padding-right: 16px;
  }
  .header-in{
    padding: 10px 16px;
  }
  .header .tagline{
    display: none;
  }
  #appeal .appeal-content{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    text-align: left;
  }
  #appeal .appeal-content::before{
    grid-column: 1;
    grid-row: 1;
    width: 52px;
    height: 52px;
  }
  #appeal .appeal-title{ grid-column: 1; grid-row: 2; }
  #appeal .appeal-message{ grid-column: 1; grid-row: 3; }
  #appeal .appeal-button{
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin-top: 4px;
  }
  .entry-card-wrap .entry-card{
    grid-template-columns: 1fr;
  }
  .entry-card-thumb.card-thumb{
    aspect-ratio: 16/9;
  }
  .article .entry-title{
    font-size: 25px;
  }
  .article h2{
    font-size: 19px;
  }
  .qrsend-card__head{
    flex-wrap: wrap;
  }
}


/* ---------------------------------------------------------------------
   9. ホットフィックス: ヘッダーを1行レイアウトに（ロゴ左・ナビ右）
   --------------------------------------------------------------------- */
#header-container-in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  min-height: var(--header-h);
}
#header-container-in .header{
  min-height: 0;
}
.header-in{
  padding: 0;
}
.header .logo-header{
  display: flex;
  align-items: center;
  padding: 0;
  text-align: left;
}
.header .logo-header .site-name{
  font-size: 19px;
  margin: 0;
}
.header .tagline{
  margin: 0 0 0 10px;
  display: inline-block;
}
#navi{
  width: auto;
}
#navi .navi-in > ul.menu-top,
#navi .navi-in > ul{
  display: flex;
  align-items: center;
  gap: 2px;
  height: auto;
}
#navi .navi-in .menu-item{
  height: auto;
  line-height: 1.4;
}
#navi .navi-in .menu-item > a{
  height: auto;
  line-height: 1.4;
  width: auto;
}
@media (max-width: 768px){
  #header-container-in{
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    gap: 6px;
  }
}


/* ヘッダー1行化の追修正: wrapクラスの幅指定を打ち消す */
#header-container-in .header-in,
#header-container-in #navi .navi-in{
  max-width: none;
  width: auto;
  margin: 0;
}
#header-container-in .header{
  flex: 0 1 auto;
}
#header-container-in #navi{
  flex: 0 0 auto;
  margin-left: auto;
}


/* 記事下のqr-sendインラインバナー */
.qrsend-inline-banner{
  margin: 24px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--c-accent);
  background: rgba(195,18,63,0.08);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
}


/* ホットフィックス3: Cocoon本体の白背景（.main/.sidebarのコンテンツボックス）を透過 */
#main.main, .main,
#sidebar.sidebar, .sidebar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.article-header, .entry-header{
  background: transparent !important;
}


/* アピールバナーの文言を左揃えにし折返しを整える（中央揃え由来の不自然な改行対策） */
#appeal .appeal-content{
  text-align: left;
  align-content: center;
  row-gap: 4px;
}
#appeal .appeal-title{
  justify-content: flex-start;
}
#appeal .appeal-message p{
  text-align: left;
  text-wrap: pretty;
  max-width: 44em;
}


/* =====================================================
   日本語折返しの全体最適化
   ===================================================== */
/* ヘッダー: タグラインを1行チップとしてロゴの右に配置（DOMはtaglineが先） */
#header-container-in .header-in{
  display: flex;
  align-items: center;
  gap: 12px;
}
.header .logo-header{ order: 1; }
.header .tagline{
  order: 2;
  white-space: nowrap;
  margin: 0;
  padding: 3px 10px;
  line-height: 1.5;
}
@media (max-width: 1024px){
  .header .tagline{ display: none; }
}

/* 見出し・タイトル系: 行のバランスを揃え、対応ブラウザでは文節単位で折り返す */
.entry-card-title.card-title,
.article .entry-title,
.article h2, .article h3,
#appeal .appeal-title,
.related-entry-card-title,
.pager-post-navi .prev-post-title,
.pager-post-navi .next-post-title{
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 説明文・スニペット系: 折返し位置の最適化 */
#appeal .appeal-message p,
.qrsend-card__desc,
.entry-card-snippet.card-snippet,
.qrsend-inline-banner{
  text-wrap: pretty;
  word-break: auto-phrase;
}


/* ヘッダー: header-inを透過し、ロゴとタグラインを同一flex行に載せる */
#header-container-in .header{
  display: flex;
  align-items: center;
  gap: 12px;
}
#header-container-in .header-in{
  display: contents;
}