@import "tailwindcss";

/* ============================================================
   Clauder Navi — デザイントークン (Tailwind v4 @theme 構文)
   既存 media_site/assets/style.css のブランドカラー完全一致
   ============================================================ */

@theme inline {
  /* ---- フォント (mybest 仕様完全コピー) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "BIZ UDPGothic", arial, helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ---- ブランドカラー (2026-05-04 可士和さん設計、コーラル系) ---- */
  /* Anthropic 公式 #d97757 より清潔な距離感のコーラル。Claude を扱うメディアとして
     完全同化せず、隣に立つ位置づけ(可士和さん指針)。 */
  --color-brand:        #1a1a1a;        /* 主黒 (本文) */
  --color-fg:           #1a1a1a;
  --color-fg-soft:      #4a4a4a;
  --color-muted:        #8a8a8a;
  --color-subtle:       #b3b3b3;

  --color-bg:           #faf9f5;        /* ベージュ寄りの紙白(Anthropic Light 系) */
  --color-bg-card:      #ffffff;
  --color-bg-alt:       #f5f3ed;
  --color-bg-sidebar:   #f9f7f1;

  --color-border:       #e8e0d8;        /* コーラル系に調整 */
  --color-border-soft:  #f0ece8;

  --color-accent:       #e8714a;        /* メインアクセント = コーラル */
  --color-accent-soft:  #fdf0ea;
  --color-accent-dark:  #c45a36;
  --color-accent-light: #f5c4af;        /* バッジ背景・サブ強調 */
  --color-accent-muted: #fdf0ea;        /* セクション背景・ハイライト行 */

  /* ---- 「あお」サブカラー (会長個人色、会長コラム/編集部/リンクで使用) ---- */
  /* 2026-05-04 体制転換: 「あお」はメイン UI から外し、人(著者)に紐付ける */
  --color-ao:           #0ea5e9;        /* リンク色・会長コラム/about のアクセント */
  --color-ao-soft:      #e0f2fe;
  --color-ao-dark:      #0284c7;

  /* ---- カテゴリカラー ---- */
  --color-cat-pro:      #f59e0b;
  --color-cat-code:     #8b5cf6;
  --color-cat-skills:   #10b981;
  --color-cat-api:      #ef4444;
  --color-cat-compare:  #ec4899;
  --color-cat-news:     #3b82f6;

  /* ---- スペーシング / ボーダー半径 ---- */
  --radius:             8px;
  --radius-lg:          12px;

  /* ---- シャドウ ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(15,23,42,.06);

  /* ---- レイアウト ---- */
  --sidebar-w:  240px;
  --max-w:      1200px;
}

/* ============================================================
   ベーススタイル
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: #313131;
  background: var(--color-bg);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  word-wrap: break-word;
  text-rendering: optimizeLegibility;
  /* overflow-x: hidden は position:sticky を壊すため使わない */
  overflow-x: clip;
}
html { overflow-x: clip; }
img, svg, video, canvas, iframe, table { max-width: 100%; }

a {
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color .15s;
}
a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   .prose — Markdown レンダリング用スタイル
   記事・レッスンページの本文コンテナ
   ============================================================ */
.prose {
  color: #313131;
  line-height: 1.7;
  max-width: 100%;
  font-size: 14px;
}
/* 会長指示(2026-04-27): PC は cn-ai-heading と同等のシンプル、モバイルは 16:9 サムネ風 */
.prose h2 {
  font-family: var(--font-heading), "Hiragino Sans", "ヒラギノ角ゴ ProN",
    "Yu Gothic", "游ゴシック", "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 60px 0 1em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: #232a36;
  line-height: 1.45;
  letter-spacing: 0.02em;
  font-feature-settings: 'palt' 1;
  scroll-margin-top: 130px;
  text-align: left;
  text-wrap: balance;
  word-break: auto-phrase;
}
@media (max-width: 768px) {
  /* モバイル: 16:9 サイトカラー(コーラル)塗り + 上下 5px に細い横線 + SVG 配置文字
     2026-05-05 会長指示で 黒塗り → サイトカラーに統一(ブランド整合) */
  .prose h2 {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #ffffff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 56px;
    margin-bottom: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.04em;
    font-size: 22px;
    font-weight: 900;
    /* SVG 未挿入の fallback として h2 自体は flex 中央寄せ */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .prose h2::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.5) 18%,
      rgba(255, 255, 255, 0.5) 82%,
      transparent 100%
    );
    z-index: 1;
  }
  .prose h2::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.5) 18%,
      rgba(255, 255, 255, 0.5) 82%,
      transparent 100%
    );
    z-index: 1;
  }
  .prose h2 .cn-h2-svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.cn-unconfirmed-note {
  display: block;
  font-size: 11px;
  color: #b8860b;
  background: #fdf7e8;
  border-left: 2px solid #d4a017;
  padding: 6px 10px;
  margin: 12px 0 4px;
  border-radius: 0 3px 3px 0;
  line-height: 1.5;
}
/* FAQ Q&A 中の最重要キーフレーズに青マーカー(2026-04-27 会長指示) */
.cn-faq-marker,
.prose .cn-faq-marker {
  background: linear-gradient(transparent 55%, #b6e2ff 55%, #b6e2ff 95%, transparent 95%);
  font-weight: 700;
  padding: 0 2px;
  color: #1d3a5c;
}

/* ============================================================
   記事フッタ — 評価ウィジェット + 免責文言(2026-04-27 会長指示)
   ============================================================ */
.cn-article-footer {
  margin: 64px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cn-rating-block {
  background: #f4f8ff;
  border: 1px solid #d6e4ff;
  border-radius: 8px;
  padding: 22px 24px;
  text-align: center;
}
.cn-rating-q {
  font-size: 15px;
  font-weight: 700;
  color: #232a36;
  margin-bottom: 14px;
}
.cn-rating-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cn-rating-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 22px;
  border: 1px solid #c8d4e8;
  background: #fff;
  color: #2c3a52;
  cursor: pointer;
  transition: all .15s;
}
.cn-rating-btn:hover:not(:disabled) {
  background: #2c3a52;
  color: #fff;
  border-color: #2c3a52;
  transform: translateY(-1px);
}
.cn-rating-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cn-rating-good:hover:not(:disabled) {
  background: #1d8a4e;
  border-color: #1d8a4e;
}
.cn-rating-bad:hover:not(:disabled) {
  background: #b03030;
  border-color: #b03030;
}
.cn-rating-thanks {
  font-size: 13px;
  color: #2c3a52;
  padding: 6px 0;
}
.cn-disclaimer {
  font-size: 12px;
  line-height: 1.7;
  color: #666;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 6px;
  padding: 14px 18px;
}
.cn-disclaimer strong { color: #2c3a52; }
.cn-disclaimer a { color: #2563eb; }

/* 雑誌画像の改善依頼ボタン(2026-04-27 会長指示) */
.cn-spread-feedback-btn {
  display: inline-block;
  font-size: 11px;
  color: #888;
  background: transparent;
  border: 1px solid #d6d6d6;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  margin: 6px 0 0;
  transition: all .15s;
}
.cn-spread-feedback-btn:hover {
  color: #b03030;
  border-color: #b03030;
  background: #fff5f5;
}

/* ============================================================
   cn-ai-heading: AIチャット要約 / AI雑誌要約 見出し(div、h2 同等デザイン)
   会長指示(2026-04-27): 導入文の下に AIチャット要約(Claude)+ AI雑誌要約(ChatGPT)
   ============================================================ */
/* 会長指示(2026-05-12 v3): cn-ai-heading + cn-summary を「枠内タイトル」型 1 カードへ統合。
   目次(summary + list)と同じ構造に見える 1 枠化:
   - 上半分(cn-ai-heading): タイトル「この記事の要約」
   - 区切り線(border-bottom)
   - 下半分(cn-summary): 本文
   両者は同じ背景・border で接合される */
.cn-ai-heading {
  font-size: 18px;
  font-weight: 600;
  margin: 36px 0 0;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-left: 3px solid #e8694d;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 6px 6px 0 0;
  padding: 10px 16px;
  color: #1f1f1f;
  line-height: 1.5;
  font-feature-settings: 'palt' 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cn-ai-heading::before {
  content: "✦";
  color: #e8694d;
  font-size: 13px;
  margin-right: 2px;
}
.cn-ai-heading .cn-powered-by {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.cn-ai-heading + .cn-summary,
.cn-ai-heading + .cn-section-spreads {
  margin-top: 0;
}

/* ============================================================
   cn-summary: AI 要約ボックス(~200 字 prose) — cn-ai-heading と接合
   ============================================================ */
.cn-summary {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-left: 3px solid #e8694d;
  border-radius: 0 0 6px 6px;
  padding: 12px 16px 14px;
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.75;
  color: #2c2c2c;
  box-shadow: none;
}
.cn-summary p {
  margin: 0 0 .5em;
}
.cn-summary p:last-child {
  margin-bottom: 0;
}
.cn-summary strong,
.prose .cn-summary strong {
  background: linear-gradient(transparent 58%, #fff1a8 58%, #fff1a8 94%, transparent 94%);
  font-weight: 700;
  padding: 0 2px;
  color: #1f1f1f;
}
.cn-summary + .cn-mobile-toc,
.prose-intro + .cn-mobile-toc {
  margin-top: 8px;
}

/* ============================================================
   cn-section-spreads: 雑誌の見開きページ風 H2 章解説画像を
   AI雑誌要約(ChatGPT)の下に連続表示(2026-04-27 会長指示)
   サイズは hero(prose img)と完全に揃える
   ============================================================ */
.cn-section-spreads {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0; /* inline-block whitespace を除去 */
  line-height: 0;
}
.cn-section-spreads img,
.prose .cn-section-spreads img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  /* 会長指示(2026-04-29): 画像と画像の間に 2px の隙間 */
  margin: 0 0 2px !important;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cn-section-spreads img:last-child,
.prose .cn-section-spreads img:last-child {
  margin-bottom: 0 !important;
}
.cn-section-spreads-note {
  display: block;
  font-size: 11px;
  color: #888;
  margin: 6px 0 2em;
  text-align: right;
  line-height: 1.5;
}

/* ============================================================
   AI画像による記事要約 ポップアップ(2026-04-27 会長指示)
   クリック → モーダル拡大 → 横スクロールで複数画像確認
   ============================================================ */
.cn-section-spreads img {
  cursor: zoom-in;
  transition: opacity .15s;
}
.cn-section-spreads img:hover {
  opacity: .85;
}
/* 案内オーバーレイ + モバイル グレーアウトは廃止(2026-04-28 会長指示) */
.cn-spread-mobile-hint { display: none !important; }
.cn-spread-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  overflow: hidden;
  animation: cn-spread-modal-in .15s ease-out;
}
@keyframes cn-spread-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cn-spread-modal-track {
  display: flex;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.4) transparent;
  -webkit-overflow-scrolling: touch;
}
.cn-spread-modal-track::-webkit-scrollbar {
  height: 6px;
}
.cn-spread-modal-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.4);
  border-radius: 3px;
}
/* 会長指示(2026-04-29 改): モバイル=左半分・右半分の見開き UX、PC=全画像 fit-to-screen */
.cn-spread-modal-half {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  background: #0a0e16;
}
/* モバイル: 左半分 / 右半分(従来 UX、ドラッグ・ズーム無し、CSS で位置決め) */
.cn-spread-modal-half-left img,
.cn-spread-modal-half-right img {
  position: absolute;
  width: 200vw;
  height: auto;
  max-width: none;
  max-height: none;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.cn-spread-modal-half-left img { left: 0; }
.cn-spread-modal-half-right img { right: 0; }
/* PC: 全画像 fit-to-screen、ドラッグ・ホイールズームは React transform 経由 */
.cn-spread-modal-half-full {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cn-spread-modal-half-full img {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  user-select: none;
  pointer-events: auto;
  -webkit-user-drag: none;
}
.cn-spread-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10000;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.cn-spread-modal-close:hover {
  background: rgba(255,255,255,0.22);
}
/* 会長指示(2026-04-29): PC のみ 前/次ページボタン(モバイルは非表示、現状 UX 維持) */
.cn-spread-modal-prev,
.cn-spread-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, transform .12s;
  user-select: none;
  padding: 0;
}
.cn-spread-modal-prev:hover,
.cn-spread-modal-next:hover {
  background: rgba(255,255,255,0.28);
}
.cn-spread-modal-prev:active,
.cn-spread-modal-next:active {
  transform: translateY(-50%) scale(0.95);
}
.cn-spread-modal-prev { left: 24px; }
.cn-spread-modal-next { right: 24px; }
@media (max-width: 767px) {
  .cn-spread-modal-prev,
  .cn-spread-modal-next { display: none; }
}
.cn-spread-modal-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  letter-spacing: .04em;
  pointer-events: none;
}
.prose h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 2.5em 0 .75em;  /* 章内の節区切り: 上 2.5em で本のセクション感 */
  color: #313131;
  line-height: 1.5;
  font-feature-settings: 'palt' 1;
  scroll-margin-top: 130px;
}
.prose h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 1.25em 0 .4em;
  color: #313131;
}
.prose p {
  font-size: 14px;
  margin: 1em 0;
  line-height: 1.7;
}
.prose ul, .prose ol {
  margin: .5rem 0 1.1rem;
  padding-left: 1.5rem;
}
.prose li {
  margin-bottom: .35rem;
}
.prose strong {
  font-weight: 700;
  color: var(--color-fg);
}
.prose a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--color-accent); }
/* テーブルラッパー: 横スクロール時のみ overflow、デフォルトは親幅いっぱい */
.prose .table-scroll, .prose > div[align] { width: 100%; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: .75em 0 1em;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0;
}
.prose th {
  background: #f7f7f7;
  color: #313131;
  font-weight: 700;
  padding: .45rem .65rem;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: left;
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 768px) {
  /* 会長指示(2026-04-27): モバイルテーブルは wrapper(.cn-table-scroll)で full-bleed + 横スクロール */
  .prose th, .prose td {
    padding: 10px 14px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}
/* ============================================================
   .cn-table-scroll: テーブル横スクロール wrapper(2026-04-27 会長指示)
   wrapper を full-bleed にして、内側の table はコンテンツに応じて伸縮
   ============================================================ */
.cn-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: .75em 0 1em;
}
.cn-table-scroll > table {
  margin: 0;
  width: 100%;
  min-width: 100%;
  table-layout: auto;
}
@media (max-width: 768px) {
  .cn-table-scroll {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .cn-table-scroll > table {
    width: max-content;
    min-width: 100%;
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 12px;
  }
}
.prose th:last-child, .prose td:last-child { border-right: none; }
.prose td {
  padding: .45rem .65rem;
  border-top: 1px solid var(--color-border-soft);
  border-right: 1px solid var(--color-border-soft);
  vertical-align: top;
  color: #313131;
}
.prose tr:nth-child(even) td { background: #fafafa; }
.prose tr:hover td { background: #f0f0f0; }
.prose code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: #f3f6f8;
  padding: .15em .4em;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  color: #d63a55;
}
.prose pre {
  background: #2d333b;
  color: #adbac7;
  padding: .75rem 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: .75em 0;
  font-size: 13px;
  line-height: 1.6;
}
.prose pre code {
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.prose blockquote {
  border-left: 4px solid var(--color-accent);
  margin: 1rem 0;
  padding: .5rem 1rem;
  background: var(--color-accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--color-fg-soft);
}
.prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* ============================================================
   記事ヘッダー (Qiita 風)
   ============================================================ */
.article-body {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: none;
  border-right: none;
  border-radius: 0;
  /* 2026-05-12 会長指示: パンくず上の隙間縮小のため上 padding を縮める(.9rem 横幅は維持) */
  padding: .5rem .9rem 1rem;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.article-body * { min-width: 0; }

/* Tailwind v4 preflight が p / ul / ol / h2 / h3 / blockquote の margin を 0 にするので、
   記事本文では行間・段落間を明示的に復元(2026-05-02 会長指摘) */
:where(.article-body:not(.home-body)) p {
  margin: 0 0 1.1em;
  line-height: 1.85;
}
:where(.article-body:not(.home-body)) p:last-child { margin-bottom: 0; }
:where(.article-body:not(.home-body)) ul,
:where(.article-body:not(.home-body)) ol {
  margin: 0 0 1.1em 1.6em;
  line-height: 1.85;
}
:where(.article-body:not(.home-body)) ul { list-style: disc; }
:where(.article-body:not(.home-body)) ol { list-style: decimal; }
:where(.article-body:not(.home-body)) li { margin: 0.25em 0; }
:where(.article-body:not(.home-body)) li > p { margin: 0.25em 0; }
:where(.article-body:not(.home-body)) h2 {
  margin: 2em 0 0.8em;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.4em;
}
:where(.article-body:not(.home-body)) h3 {
  margin: 1.6em 0 0.6em;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #1e293b;
}
:where(.article-body:not(.home-body)) h4 {
  margin: 1.2em 0 0.5em;
  font-size: 1rem;
  font-weight: 700;
}
:where(.article-body:not(.home-body)) blockquote {
  margin: 1em 0;
  padding: 0.6em 1em;
  border-left: 4px solid #e8714a;
  background: #f0f9ff;
  color: #075985;
}
:where(.article-body:not(.home-body)) table {
  margin: 1em 0;
}
:where(.article-body:not(.home-body)) hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
:where(.article-body:not(.home-body)) pre {
  margin: 1em 0;
}
@media (min-width: 768px) {
  .article-body {
    border: 1px solid var(--color-border);
    border-radius: 4px;  /* mybest 仕様: 4px のみ */
    padding: 1.5rem 2rem 2rem;
  }
}

/* hero 画像: 上余白なし、padding 突き抜けて edge-to-edge、角丸なし */
.article-hero {
  margin: -1rem -.9rem 1rem;
  position: relative;
}
.article-hero img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (min-width: 768px) {
  .article-hero {
    margin: -1.5rem -2rem 1.25rem;
  }
  .article-hero img {
    border-radius: 0;
  }
}
.article-body .prose { max-width: 100%; }
.article-body .prose pre { max-width: 100%; }
.article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.article-category {
  display: inline-block;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  letter-spacing: .06em;
}
.article-title {
  /* PC: 30px / モバイル: 20px (mybest 仕様完全コピー) */
  font-size: 30px;
  font-weight: bold;
  line-height: 125%;
  letter-spacing: .04em;
  margin: .67em 0;
  color: #313131;
  overflow-wrap: break-word;
  word-break: break-word;
  font-feature-settings: 'palt' 1;
}
@media (max-width: 767px) {
  .article-title {
    font-size: 20px;
  }
}
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .82rem;
  color: var(--color-muted);
  margin: 0;
}
.article-meta-sep { color: var(--color-subtle); }
.article-meta-author { font-weight: 600; }

/* ============================================================
   レスポンシブレイアウト: サイドバー + メインのグリッドラッパー
   モバイルファースト: 初期は1カラム、md(768px)以上で2カラム
   ============================================================ */
.layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  padding-top: 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .layout-grid {
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: 2.5rem;
    padding-top: 2rem;
  }
}

/* ============================================================
   サイドバー: モバイルでは折りたたみ非表示
   ============================================================ */
.sidebar-hidden-mobile {
  display: none;
}

@media (min-width: 768px) {
  .sidebar-hidden-mobile {
    display: block;
  }
}

/* ============================================================
   グローバルナビ (Qiita 風: ロゴ上行 + ナビ下行 横スクロール)
   ============================================================ */
.cn-header {
  /* 2026-05-12 会長指示: グローバルメニュー下に視認できる細い下線(背景と同化していたので濃化) */
  border-bottom: 1px solid #d4c8ba;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.cn-header-row {
  max-width: var(--max-w);
  margin: 0 auto;
  /* 2026-05-12 会長指示: パディング縮小でスマートに */
  padding: .3rem .9rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.cn-logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  text-decoration: none;
}
.cn-logo:hover { text-decoration: none; }
.cn-logo-text {
  line-height: 1;
}

/* ロゴ同行のユーティリティナビ(右寄せ、2026-04-30 会長指示) */
.cn-utility-nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-left: auto; /* 右寄せ: ロゴと auth ボタンの間で右に寄せる */
}
.cn-utility-link {
  color: #555;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color .12s;
}
.cn-utility-link:hover { color: #313131; text-decoration: none; }
.cn-utility-link.is-active { color: #313131; font-weight: 700; }

/* ハンバーガー(モバイルのみ) */
.cn-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .35rem;
  color: #313131;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .cn-utility-desktop { display: none; }
  .cn-hamburger { display: flex; }
}

/* モバイル ドロワー */
.cn-mobile-drawer {
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: .5rem 1rem;
  display: flex;
  flex-direction: column;
}
.cn-mobile-drawer-link {
  padding: .85rem .25rem;
  font-size: 14px;
  font-weight: 600;
  color: #313131;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-soft);
}
.cn-mobile-drawer-link:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .cn-mobile-drawer { display: none !important; }
}

/* 下行: カテゴリナビ(左) + セカンダリナビ(右)を横並び */
.cn-second-row {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0 1rem;
  border-top: 1px solid var(--color-border-soft);
}
.cn-category-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  /* 2026-05-12 会長指示: パディング縮小でスマートに */
  padding: .15rem 0 .3rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.cn-category-nav::-webkit-scrollbar { display: none; }
.cn-secondary-nav {
  flex: 0 0 auto;
  display: none; /* mobile では非表示(ハンバーガーから辿る) */
  gap: 1rem;
  align-items: center;
  padding: .15rem 0 .3rem;
  white-space: nowrap;
}
.cn-secondary-link {
  color: #555;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .12s;
  padding: .2rem 0;
  position: relative;
}
.cn-secondary-link:hover { color: #313131; text-decoration: none; }
.cn-secondary-link.is-active {
  color: #313131;
  font-weight: 700;
}
.cn-secondary-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -.55rem;
  height: 2px;
  background: var(--color-accent);
}
@media (min-width: 768px) {
  .cn-secondary-nav { display: flex; }
}
.cn-cat-link {
  color: #555;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color .12s;
  padding: .2rem 0;
  position: relative;
  flex-shrink: 0;
}
.cn-cat-link:hover { color: #313131; text-decoration: none; }
.cn-cat-link.is-active {
  color: #313131;
  font-weight: 700;
}
.cn-cat-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -.55rem;
  height: 2px;
  background: var(--color-accent);
}
/* 2 段目カテゴリナビの区切り線(その他 と AI イベント の間 等)
   会長指示 2026-05-05 */
.cn-cat-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #cbd5e1;
  flex-shrink: 0;
  align-self: center;
  margin: 0 .25rem;
}

/* 2 段目ナビの SNS 分析 dropdown(クリックで開閉、1 段目と同パターン)
   会長指示 2026-05-05 */
.cn-cat-group { position: relative; display: inline-flex; align-items: center; }
.cn-cat-trigger {
  background: transparent;
  border: none;
  padding: .2rem 0;
  font: inherit;
  color: #555;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.cn-cat-trigger:hover { color: #313131; }
.cn-cat-trigger.is-active,
.cn-cat-trigger.is-open { color: #313131; font-weight: 700; }
.cn-cat-submenu {
  /* 親 .cn-category-nav が overflow-y: hidden のためクリップされる。
     position は JSX 側で fixed として inline 指定し、top/left は trigger
     の getBoundingClientRect から計算する(viewport 端で clamp 済み)。 */
  min-width: 220px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cn-cat-submenu-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.cn-cat-submenu-item:hover { background: #f1f5f9; color: #c45a36; }
.cn-cat-submenu-item.is-active { background: #fdf0ea; color: #075985; font-weight: 600; }

/* 旧 mobile table 横スクロールルール撤廃(2026-04-27 会長指示 4 回目)。
   モバイルテーブルは full-bleed + table-layout: fixed + word-break で対応(line 578 付近) */

/* 管理画面: 自動実行ダッシュボード */
.admin-auto-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 14px;
}
.admin-auto-table th, .admin-auto-table td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
  text-align: left;
}
.admin-auto-table th {
  background: #f6f7f8;
  font-weight: 600;
}
.auto-file {
  color: #888;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.auto-badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.auto-ok      { background: #ecfdf5; color: #065f46; }
.auto-fail    { background: #fef2f2; color: #991b1b; }
.auto-running { background: #eff6ff; color: #1e3a8a; }
.auto-pending { background: #fffbeb; color: #854d0e; }
.auto-skip    { background: #f1f5f9; color: #475569; }
.auto-none    { background: #f1f5f9; color: #94a3b8; }

.admin-run-btn {
  background: #e8714a;
  color: #fff;
  border: 0;
  padding: .35rem .7rem;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.admin-run-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.admin-run-btn:hover:not(:disabled) { background: #c45a36; }
.admin-log-link {
  font-size: 12px;
  color: #e8714a;
  text-decoration: underline;
}
.admin-refresh-btn {
  background: transparent;
  border: 1px solid var(--color-border-soft);
  padding: .25rem .65rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.admin-refresh-btn:hover { background: #f6f7f8; }
.admin-error { color: #991b1b; background: #fef2f2; padding: .5rem; border-radius: 6px; }
.admin-meta { color: #888; font-size: 12px; margin-top: 1.5rem; }
.cn-admin-nav-link {
  font-size: 14px;
  color: #e8714a;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.cn-admin-nav-link:hover {
  text-decoration: underline;
  background: #f0f9ff;
}

/* ============================================================
   prose コードブロック: モバイルでの横スクロール
   ============================================================ */
.prose pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* モバイルでのフォントサイズを小さく */
  font-size: .8rem;
}

@media (min-width: 768px) {
  .prose pre {
    font-size: .875rem;
  }
}

/* ============================================================
   画像: mybest 風 — 枠付き + 中央寄せ + キャプション対応
   ============================================================ */
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.prose figure {
  margin: 1.75rem 0;
  text-align: center;
}
.prose figure > img {
  margin: 0 auto;
}
.prose figure > figcaption,
.prose img + em {
  display: block;
  text-align: center;
  font-size: .82rem;
  color: var(--color-muted);
  margin: .5rem auto 0;
  font-style: normal;
  max-width: 80%;
  line-height: 1.5;
}
/* 画像直後の段落でキャプション風 italic を擬似 figcaption に */
.prose img + p > em:only-child {
  display: block;
  text-align: center;
  font-size: .82rem;
  color: var(--color-muted);
  font-style: normal;
}

/* ============================================================
   モバイルタイポグラフィ調整 (記事 body padding のみ調整、フォントは PC と同サイズ)
   ============================================================ */
@media (max-width: 767px) {
  /* article-body padding を詰める(画面端まで余白少なめに) */
  .article-body {
    padding: 1rem .9rem;
  }
}

/* ============================================================
   ヒーローボタン: モバイルでは縦並び全幅、デスクトップで横並び
   ============================================================ */
.hero-btn-group {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1rem;
}

@media (min-width: 480px) {
  .hero-btn-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.hero-btn-primary {
  display: block;
  text-align: center;
  background: var(--color-accent);
  color: #fff;
  padding: .875rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-btn-secondary {
  display: block;
  text-align: center;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: .875rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 480px) {
  .hero-btn-primary,
  .hero-btn-secondary {
    display: inline-flex;
  }
}

/* ============================================================
   レッスンナビ (前後): モバイルでのテキスト折り返し
   ============================================================ */
.lesson-nav {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 480px) {
  .lesson-nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

.lesson-nav-link {
  display: block;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--color-fg);
  min-height: 44px;
}

.lesson-nav-link-next {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

@media (min-width: 480px) {
  .lesson-nav-link {
    max-width: 45%;
  }
  .lesson-nav-link-next {
    text-align: right;
    margin-left: auto;
  }
}

/* ============================================================
   .prose 装飾強化: 見出し / リスト / 黄色マーカー / アウトライン
   会長指示(2026-04-25): 装飾なく寂しいデザインを 改善
   ============================================================ */

/* 見出し: 縦バー削除(会長指示) */
.prose h2::before { display: none; }
.prose h3 {
  padding-left: 0;
  color: #313131;
}
.prose h3::before { display: none; }

/* リスト: position:absolute で行頭アイコンを配置(flex は callout 内の list-style を壊すため不可) */
.prose ul,
.prose ol {
  list-style: none;
  margin: .75em 0;
  padding: .35rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
.prose ul > li,
.prose ol > li {
  position: relative;
  padding: .4rem 0 .4rem 1.85rem;
  border-bottom: 1px dashed var(--color-border-soft);
  margin: 0;
  line-height: 1.7;
  font-size: 14px;
}
.prose ul > li:last-child,
.prose ol > li:last-child {
  border-bottom: none;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: .25rem;
  /* 1 行目のテキスト中心に icon 中心を合わせる: padding-top + (line-height - icon-height)/2 */
  top: calc(.4rem + (1.7em - 1.1em) / 2);
  width: 1.1rem;
  height: 1.1rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / 100%;
}
.prose ol {
  counter-reset: prose-ol;
}
.prose ol > li {
  counter-increment: prose-ol;
  padding-left: 2.1rem;
}
.prose ol > li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  top: calc(.4rem + (1.7em - 1.35em) / 2);
  width: 1.35rem;
  height: 1.35rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 入れ子リスト: 枠なし、控えめなドット/番号 */
.prose ul ul, .prose ul ol,
.prose ol ul, .prose ol ol {
  margin: .35rem 0 .35rem 0;
  padding: 0 0 0 .25rem;
  border: none;
  background: none;
  box-shadow: none;
}
.prose ul ul > li, .prose ul ol > li,
.prose ol ul > li, .prose ol ol > li {
  padding: .25rem 0 .25rem 1.4rem;
  border-bottom: none;
  font-size: .95em;
}
.prose ul ul > li::before {
  background: none;
  width: 6px;
  height: 6px;
  background-color: var(--color-fg-soft);
  border-radius: 50%;
  top: 1rem;
  left: .25rem;
}
.prose ol ol > li::before,
.prose ul ol > li::before {
  width: 1.1rem;
  height: 1.1rem;
  font-size: .65rem;
  top: .5rem;
}

/* コールアウト / ボックス内のリストは枠リセット */
.cn-callout ul, .cn-callout ol,
.cn-box ul:not(.cn-list), .cn-box ol:not(.cn-list):not(.cn-steps),
.cn-author ul, .cn-author ol,
.cn-faq ul, .cn-faq ol {
  border: none;
  background: none;
  box-shadow: none;
  margin: .5rem 0;
  padding: 0 0 0 1.25rem;
  list-style: disc;
}
.cn-callout ul > li, .cn-callout ol > li,
.cn-box ul:not(.cn-list) > li, .cn-box ol:not(.cn-list):not(.cn-steps) > li,
.cn-author ul > li, .cn-author ol > li,
.cn-faq ul > li, .cn-faq ol > li {
  padding: .15rem 0;
  border-bottom: none;
  position: static;
}
.cn-callout ul > li::before, .cn-callout ol > li::before,
.cn-box ul:not(.cn-list) > li::before, .cn-box ol:not(.cn-list):not(.cn-steps) > li::before,
.cn-author ul > li::before, .cn-author ol > li::before,
.cn-faq ul > li::before, .cn-faq ol > li::before {
  display: none;
}
.cn-callout ol, .cn-box ol:not(.cn-list):not(.cn-steps), .cn-faq ol {
  list-style: decimal;
}

/* 強調: 太字のみ(会長指示: 黄色マーカー不要) */
.prose strong {
  background: none;
  padding: 0;
  font-weight: 700;
  color: #313131;
}
/* 出典リンク: 黒下線(会長指示: シンプルに、本文の流れを乱さない) */
.prose a.cn-src-link {
  color: #313131;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 400;
}
.prose a.cn-src-link:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
/* キーマーカー: h2 内最重要 strong に薄水色マーカー */
.prose strong.cn-mark-key {
  background: linear-gradient(transparent 60%, #cdeefd 60%);
  padding: 0 .15em;
  font-weight: 700;
}
.prose mark {
  background: #cdeefd;
  color: #313131;
  padding: 0 .25em;
  border-radius: 0;
}

/* 段落間の余白拡張 */
.prose p {
  margin: 0 0 1.25rem;
}

/* 引用: 強調バー + 左バックグラウンド */
.prose blockquote {
  position: relative;
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
  padding: .75rem 1rem .75rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: normal;
  color: var(--color-fg);
}

/* セクションごとの薄いアウトライン枠 */
.prose h2 + p,
.prose h2 + ul,
.prose h2 + ol,
.prose h2 + table {
  margin-top: 1rem;
}

/* 要約セクション: 特別装飾(2026-04-27 会長指示で margin-top 削除、全 H2 を 60px 上余白で統一) */

/* ============================================================
   /musk/ 副社長コラムページ
   ============================================================ */
.musk-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.musk-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.musk-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
.musk-avatar-sm {
  width: 36px;
  height: 36px;
  font-size: .9rem;
  box-shadow: none;
}

.musk-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0;
}
.musk-handle {
  font-size: .85rem;
  color: var(--color-muted);
  margin: 0;
}
.musk-bio-line {
  font-size: .8rem;
  color: var(--color-muted);
  margin: .25rem 0 0;
}

.musk-bio-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--color-fg-soft);
  margin-bottom: 1.5rem;
}

.musk-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.musk-post {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color .15s, box-shadow .15s;
}
.musk-post:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.musk-post-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.musk-post-name {
  font-weight: 700;
  color: var(--color-fg);
}
.musk-post-handle {
  margin-left: .5rem;
  font-size: .8rem;
  color: var(--color-muted);
}
.musk-post-time {
  margin-left: .5rem;
  font-size: .8rem;
  color: var(--color-muted);
}

.musk-post-title-link {
  text-decoration: none;
}
.musk-post-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 .5rem;
  line-height: 1.5;
}
.musk-post-title-link:hover .musk-post-title {
  color: var(--color-accent-dark);
}

.musk-post-body {
  font-size: .92rem;
  color: var(--color-fg);
}
.musk-post-body code {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: .1em .3em;
  border-radius: 3px;
  font-size: .85em;
}
.musk-post-body pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: .9rem 1rem;
  border-radius: var(--radius);
  font-size: .8rem;
  overflow-x: auto;
}

.musk-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}
.musk-tag {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
}

.musk-post-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid var(--color-border-soft);
  padding-top: .75rem;
  margin-top: .75rem;
  font-size: .8rem;
  color: var(--color-muted);
}

.musk-back-nav {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  text-align: center;
  font-size: .8rem;
}
.musk-back-link {
  color: var(--color-accent-dark);
}

/* ============================================================
   Main コンテナ
   ============================================================ */
.cn-main {
  flex: 1;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  overflow-x: clip;
}
@media (max-width: 767px) {
  .cn-main { padding: 0; }
}

/* ============================================================
   関連記事 (mybest 風 — サムネイル付きカード)
   ============================================================ */
.cn-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.cn-related-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-brand);
  margin: 0 0 1.25rem 0;
  position: relative;
  padding-left: .85rem;
}
.cn-related-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}
.cn-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 640px) {
  .cn-related-grid { grid-template-columns: 1fr 1fr; }
}
.cn-related-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.cn-related-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.cn-related-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
  border-radius: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.cn-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.cn-related-body {
  padding: .65rem .85rem .85rem;
}
.cn-related-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.cn-related-cat {
  align-self: flex-start;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 3px;
  letter-spacing: .04em;
}
.cn-related-title {
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-brand);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-related-card:hover .cn-related-title { color: var(--color-accent-dark); }
.cn-related-date {
  margin: auto 0 0;
  font-size: .7rem;
  color: var(--color-muted);
}

/* ============================================================
   Home (トップページ)
   ============================================================ */
.home-body { padding-top: 1.5rem; }
.home-hero { margin-bottom: 2.25rem; }
.home-hero-title {
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: var(--color-brand);
  line-height: 1.35;
  margin: 0 0 .85rem 0;
  letter-spacing: -.005em;
}
.home-hero-lead {
  color: var(--color-fg-soft);
  font-size: 1rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.7;
}
.home-articles { margin-top: 2rem; }
.home-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  position: relative;
  padding-left: .85rem;
  margin: 0 0 1.25rem 0;
  color: var(--color-brand);
}
.home-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}
.home-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 480px) {
  .home-article-grid { grid-template-columns: 1fr 1fr; }
}
.home-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.home-card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}
.home-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.home-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
.home-card:hover .home-card-thumb img {
  transform: scale(1.04);
}
.home-card-body {
  padding: 1rem 1.1rem 1.1rem;
}
.home-card-cat {
  display: inline-block;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 3px;
  margin-bottom: .65rem;
  letter-spacing: .04em;
}
.home-card-title {
  margin: 0 0 .5rem 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-brand);
}
.home-card:hover .home-card-title { color: var(--color-accent-dark); }
.home-card-desc {
  margin: 0 0 .65rem 0;
  font-size: .85rem;
  color: var(--color-fg-soft);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-card-date {
  margin: 0;
  font-size: .73rem;
  color: var(--color-muted);
}

/* レッスン行(サムネイル付き) */
.lesson-row {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.lesson-row:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.lesson-row-thumb {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
  overflow: hidden;
}
.lesson-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
.lesson-row-num {
  position: absolute;
  left: .4rem;
  top: .4rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 4px;
  padding: .15rem .45rem;
  font-size: .7rem;
  font-weight: 700;
}
.lesson-row-body {
  flex: 1;
  min-width: 0;
  padding: .75rem 1rem .75rem 0;
}
.lesson-row-title {
  margin: 0 0 .3rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-brand);
}
.lesson-row-desc {
  margin: 0 0 .35rem;
  font-size: .82rem;
  color: var(--color-fg-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-row-meta {
  margin: 0;
  font-size: .72rem;
  color: var(--color-muted);
}
@media (max-width: 480px) {
  .lesson-row-thumb { width: 100px; }
}

/* ============================================================
   Article ページラッパー(パンくずを 2 カラム上の全幅で表示)
   ============================================================ */
.article-page-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 767px) {
  .article-page-wrap { padding: 0; }
}

/* ============================================================
   Breadcrumb (パンくずリスト) — mybest 風 横スクロール + 全幅
   ============================================================ */
.cn-breadcrumb {
  /* 2026-05-12 会長指示: パンくず上の隙間を最小化してスマートに */
  margin: 0 0 4px;
  padding: 0;
  font-size: 12px;
  /* 横スクロール: モバイルで長いパンくずも 1 行で表示 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.cn-breadcrumb::-webkit-scrollbar { display: none; }

.cn-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex; /* 横スクロール対応のため inline-flex + nowrap */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.cn-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.cn-breadcrumb-item::before { display: none; }
.cn-breadcrumb-item a {
  color: var(--color-muted);
  text-decoration: none;
}
.cn-breadcrumb-item a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
.cn-breadcrumb-item span[aria-current="page"] {
  color: var(--color-fg-soft);
  font-weight: 600;
}
.cn-breadcrumb-sep {
  margin: 0 .55rem;
  color: var(--color-subtle);
  user-select: none;
  font-size: .75rem;
}

/* 記事タグ表示(mybest 風: タイトル直下、フラット) */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 12px;
}
.article-tag {
  background: #f7f7f7;
  color: #555;
  border: none;
  border-radius: 0;
  padding: 4px 8px;
  font-size: 12px;
  text-decoration: none;
  font-weight: 500;
}
.article-tag:hover {
  background: #e6ebf0;
  color: #313131;
  text-decoration: none;
}

/* 記事ヘッダのいいね + 日付 (mybest 風) */
.article-header-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #888;
}
.article-likes {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-weight: 600;
  margin-bottom: 6px;
}
.article-likes svg { color: #ef4444; }
.article-dates {
  margin: 0;
  color: #888;
  font-size: 12px;
}
.article-dates-sep { margin: 0 .2em; }

/* タグクラウド */
.cn-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.5rem 0;
}
.cn-tag-cloud-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .35rem .85rem;
  text-decoration: none;
  color: var(--color-fg-soft);
  font-size: .85rem;
  transition: all .12s;
}
.cn-tag-cloud-item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  text-decoration: none;
  background: var(--color-accent-soft);
}
.cn-tag-cloud-label { font-weight: 600; }
.cn-tag-cloud-count {
  background: var(--color-bg-alt);
  border-radius: 999px;
  padding: 0 .55rem;
  font-size: .72rem;
  color: var(--color-muted);
}

/* category badge を Link にする際の text-decoration 抑制 */
a.article-category {
  text-decoration: none;
}
a.article-category:hover {
  text-decoration: none;
  opacity: .85;
}

/* ============================================================
   PromoBar (グローバルナビ下の宣伝バー)
   ============================================================ */
.cn-promo {
  background: linear-gradient(90deg, #fdf0ea 0%, #f0f9ff 100%);
  border-bottom: 1px solid var(--color-border);
  font-size: .8rem;
}
.cn-promo-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: .3rem 1rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--color-brand);
  min-height: 32px;
}
.cn-promo-tag {
  background: var(--color-accent-dark);
  color: #fff;
  font-weight: 700;
  font-size: .65rem;
  padding: .1rem .4rem;
  border-radius: 3px;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.cn-promo-text {
  color: var(--color-fg);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cn-promo-text a {
  color: var(--color-accent-dark);
  font-weight: 600;
  margin-left: .3rem;
}
.cn-promo-close {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 3px;
  line-height: 0;
}
.cn-promo-close:hover {
  background: rgba(0,0,0,.06);
  color: var(--color-fg);
}
@media (max-width: 640px) {
  .cn-promo { font-size: .72rem; }
}

/* ============================================================
   article-layout: メイン + 右サイドバー(TOC + 筆者) Qiita 風
   ============================================================ */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .article-layout {
    gap: 1.5rem;
  }
}
/* 会長指示(2026-04-27): PC は右サイドバー復活 + 開閉トグル、モバイルはインライン目次 */
.article-sidebar { display: none; align-self: start; }
@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
    transition: grid-template-columns .2s ease;
  }
  .article-layout.cn-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) 0;
    gap: 0;
  }
  .article-sidebar {
    display: block;
    min-width: 0;
    position: sticky;
    top: 130px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .article-sidebar::-webkit-scrollbar { width: 4px; }
  .article-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
  }
  .article-layout.cn-sidebar-collapsed .article-sidebar { display: none; }
}
.article-sidebar-sticky {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* サイドバー開閉トグル デザイン(2026-04-27 会長指示で再設計) */
/* (1) 開いている時: TOC ヘッダ「目次」横の小さい × アイコン */
.cn-toc-close {
  display: none;
}
@media (min-width: 1024px) {
  .cn-toc-title { position: relative; padding-right: 28px; }
  .cn-toc-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: transparent;
    color: #888;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
  }
  .cn-toc-close:hover {
    background: #f0f0f0;
    color: #333;
    border-color: #d8d8d8;
  }
}

/* (2) 閉じている時: 画面右端の極細タブ(目次アイコン+縦書き目次) */
.cn-sidebar-tab {
  display: none;
}
@media (min-width: 1024px) {
  .cn-sidebar-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    background: #ffffff;
    color: #555;
    border: 1px solid var(--color-border);
    border-right: none;
    padding: 10px 6px 12px;
    border-radius: 4px 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    cursor: pointer;
    box-shadow: -1px 0 4px rgba(0, 0, 0, 0.04);
    transition: background .15s, color .15s, padding-right .15s, box-shadow .15s;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  .cn-sidebar-tab svg {
    writing-mode: horizontal-tb;
  }
  .cn-sidebar-tab:hover {
    background: #f7faff;
    color: #2c3a52;
    padding-right: 9px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
  }
  .cn-sidebar-tab-label {
    writing-mode: vertical-rl;
  }
}

/* ============================================================
   TOC (目次)
   ============================================================ */
.cn-toc {
  background: #f7f7f7;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 40px;  /* 会長指示(2026-04-27): 目次の上 40px */
}
/* 会長指示(2026-04-29): AI画像ヘッダ直下のインライン目次は PC/モバイル両方で表示。
   サイドバーは PC で別途並走表示(冗長許容、目次到達性を優先)
   data-empty="true" は hydration 前の空 nav なので非表示にする */
.cn-mobile-toc {
  margin: 0 0 1em;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.cn-mobile-toc[data-empty="true"] {
  display: none;
}
/* 会長指示(2026-05-12 v2): 添付画像基準 — タイトル 18px + ▼オレンジ、
   項目間に水平区切り線、padding 広め、「すべて表示」ボタン付き */
.cn-mobile-toc {
  background: #f7f7f7;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 4px 16px 14px;
  margin: 0 0 1.25em;
}
.cn-mobile-toc-summary {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
  padding: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  border-bottom: 1px solid #e0e0e0;
}
.cn-mobile-toc-summary::-webkit-details-marker { display: none; }
.cn-mobile-toc-summary::before {
  content: "▼";
  font-size: 13px;
  color: #e8694d;
  transition: transform .15s;
  display: inline-block;
}
.cn-mobile-toc:not([open]) > .cn-mobile-toc-summary::before {
  transform: rotate(-90deg);
}
.cn-mobile-toc-icon { display: none; }
.cn-mobile-toc-label { font-size: 18px; font-weight: 600; }
.cn-mobile-toc-count { display: none; }
.cn-mobile-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: none;
  background: none !important;
  box-shadow: none !important;
}
.cn-mobile-toc-list > li {
  border: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
  padding: 7px 0 7px 4px !important;
  position: relative;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.35;
  display: block !important;
  align-items: initial !important;
  gap: 0 !important;
}
.cn-mobile-toc-list > li::before { display: none !important; }
.cn-mobile-toc-list > li > a {
  color: #1f1f1f;
  text-decoration: none;
  display: block;
}
.cn-mobile-toc-list > li > a:hover {
  color: var(--color-accent-dark);
}
/* H3 はインデント(class 名は cn-toc-h3 — blade テンプレート参照、2026-05-12 修正) */
.cn-mobile-toc-list > li.cn-toc-h3 {
  padding: 6px 0 6px 1.6rem !important;
  font-size: 14px;
}
.cn-mobile-toc-list > li.cn-toc-h3 > a {
  color: #555;
}
/* 最終行の区切り線は背景カード端に重ねるため非表示 */
.cn-mobile-toc-list > li:last-of-type {
  border-bottom: none !important;
}
/* 折りたたみ機能: 6 個目以降を hidden、show-all で展開 */
.cn-mobile-toc:not(.cn-mobile-toc--expanded) .cn-mobile-toc-list > li.cn-mobile-toc-hidden {
  display: none !important;
}
.cn-mobile-toc-show-all {
  display: inline-block;
  margin: 12px 0 4px;
  padding: 6px 16px;
  font-size: 13px;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background .12s, border-color .12s;
}
.cn-mobile-toc-show-all:hover {
  background: #f8f8f8;
  border-color: #b8b8b8;
}
.cn-mobile-toc--expanded .cn-mobile-toc-show-all { display: none; }
.cn-toc-title {
  font-size: 12px;  /* 会長指示: 目次タイトル 12px */
  font-weight: 700;
  color: #888;
  letter-spacing: .08em;
  margin: 4px 0 6px;
  text-transform: uppercase;
}
.cn-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--color-border);
}
.cn-toc-item { line-height: 1.4; }
.cn-toc-item a {
  display: block;
  padding: .25rem .55rem;
  font-size: 12px;
  color: #555;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color .12s, border-color .12s;
}
.cn-toc-item a:hover {
  color: var(--color-accent-dark);
  text-decoration: none;
}
.cn-toc-item.is-active a {
  color: var(--color-accent-dark);
  border-left-color: var(--color-accent);
  font-weight: 600;
}
.cn-toc-item.is-active-section > a {
  color: var(--color-brand);
  font-weight: 700;
}
.cn-toc-l3 a {
  padding-left: 1.5rem;
  font-size: .78rem;
  color: var(--color-muted);
}
.cn-toc-l3.is-active a {
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* ============================================================
   AuthorCard (筆者情報)
   ============================================================ */
.cn-author {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.cn-author-compact {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  margin-top: 1rem;
  background: var(--color-bg-alt);
}
.cn-author-full {
  padding: 1.25rem;
  margin-top: 2.5rem;
}
.cn-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cn-author-avatar-lg { width: 56px; height: 56px; }
.cn-author-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .75rem;
}
.cn-author-text { min-width: 0; }
.cn-author-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-brand);
}
.cn-author-handle {
  font-size: .78rem;
  color: var(--color-muted);
}
.cn-author-bio-line {
  font-size: .78rem;
  color: var(--color-muted);
}
.cn-author-bio {
  font-size: .88rem;
  color: var(--color-fg-soft);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.cn-author-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.cn-author-link {
  font-size: .78rem;
  color: var(--color-accent-dark);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .25rem .65rem;
  text-decoration: none;
}
.cn-author-link:hover {
  background: var(--color-accent-soft);
  text-decoration: none;
}

/* ============================================================
   LikeButton (♡ いいね)
   ============================================================ */
.cn-like-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
  padding: 1.25rem;
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}
.cn-like-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.1rem;
  border: 2px solid #f87171;
  border-radius: 999px;
  background: #fff;
  color: #ef4444;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 700;
  transition: all .15s;
}
.cn-like-btn:hover {
  background: #fef2f2;
  transform: scale(1.04);
}
.cn-like-btn.is-liked {
  background: #ef4444;
  color: #fff;
}
.cn-like-count { font-variant-numeric: tabular-nums; }
.cn-like-help {
  font-size: .82rem;
  color: var(--color-muted);
}

.musk-post-detail {
  padding: 1.5rem 1.5rem 1.75rem;
}
.musk-post-detail-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-fg);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.musk-post-tags-detail {
  border-top: 1px solid var(--color-border-soft);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* ============================================================
   ボックス装飾システム(SWELL 風 デザイン)
   会長指示(2026-04-25): 枠を多用してグルーピング、見やすく改善
   ============================================================ */

/* --- 共通: callout 基本骨格 --- */
.cn-box {
  position: relative;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  line-height: 1.75;
}
.cn-box > :first-child { margin-top: 0; }
.cn-box > :last-child { margin-bottom: 0; }

/* --- 1. シンプル枠 --- */
.cn-box-line { border: 2px solid var(--color-border); }
.cn-box-dashed { border: 2px dashed var(--color-subtle); background: var(--color-bg-alt); }
.cn-box-soft { background: var(--color-bg-alt); border: 1px solid var(--color-border); }
.cn-box-stripe {
  background: repeating-linear-gradient(135deg, var(--color-bg-alt) 0 8px, #fff 8px 16px);
  border: 1px solid var(--color-border);
}

/* --- 2. アクセント枠(左バー) --- */
.cn-box-accent {
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent);
  background: var(--color-accent-soft);
}
.cn-box-accent-warn {
  border: 1px solid #fde68a;
  border-left: 5px solid #f59e0b;
  background: #fef9c3;
}
.cn-box-accent-danger {
  border: 1px solid #fecaca;
  border-left: 5px solid #ef4444;
  background: #fef2f2;
}
.cn-box-accent-good {
  border: 1px solid #bbf7d0;
  border-left: 5px solid #10b981;
  background: #ecfdf5;
}

/* --- 3. ラベル付き枠(mybest 風 flat: 薄グレー bg + radius 4px) --- */
.cn-box-titled {
  position: relative;
  margin: 1.25em 0;
  background: #f7f7f7;
  border: none;
  border-radius: 4px;
  padding: 12px;
}
.cn-box-titled > .cn-box-title {
  position: static;
  display: block;
  background: transparent;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 14px;
  font-weight: 700;
  color: #313131;
  letter-spacing: 0;
}

/* --- 4. コールアウト (mybest 仕様: bg #f7f7f7 / radius 4px / padding 12px / アイコンなし) --- */
.cn-callout {
  position: relative;
  margin: 1.25em 0;
  padding: 12px;
  background: #f7f7f7;
  border: none;
  border-radius: 4px;
  line-height: 1.7;
  font-size: 14px;
  color: #313131;
}
.cn-callout > :first-child { margin-top: 0; }
.cn-callout > :last-child { margin-bottom: 0; }
/* アイコン全廃止(会長指示: ビックリマーク等不要) */
.cn-callout::before { display: none; }
.cn-callout-warn { background: #fefbe9; }
.cn-callout-danger { background: #fef5f5; }
.cn-callout-good { background: #f3faf5; }

/* --- 5. ステップ番号付きボックス --- */
.cn-steps {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  counter-reset: cn-step;
}
.cn-steps > li {
  counter-increment: cn-step;
  position: relative;
  padding: 1rem 1.25rem 1rem 3.5rem;
  margin: 0 0 .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.cn-steps > li::before {
  content: counter(cn-step);
  position: absolute;
  left: .9rem;
  top: 1rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.cn-step-title {
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 .25rem;
}

/* --- 6. FAQ アコーディオン風 --- */
.cn-faq {
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cn-faq > details {
  border-bottom: 1px solid var(--color-border);
}
.cn-faq > details:last-child { border-bottom: none; }
.cn-faq summary {
  padding: 1rem 1.25rem;
  font-weight: 700;
  background: var(--color-bg-alt);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 3rem;
}
.cn-faq summary::-webkit-details-marker { display: none; }
.cn-faq summary::before {
  content: "Q";
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #a855f7;
  color: #fff;
  font-weight: 800;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cn-faq summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--color-muted);
}
.cn-faq details[open] summary::after { content: "−"; }
.cn-faq details > *:not(summary) {
  padding: 1rem 1.25rem;
  background: #fff;
  position: relative;
}

/* --- 7. 比較表(2カラム) --- */
.cn-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 640px) {
  .cn-compare { grid-template-columns: 1fr 1fr; }
}
.cn-compare > div {
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
}
.cn-compare-good {
  border-color: #10b981;
  background: #ecfdf5;
}
.cn-compare-good > h4::before {
  content: "✓ ";
  color: #10b981;
}
.cn-compare-bad {
  border-color: #ef4444;
  background: #fef2f2;
}
.cn-compare-bad > h4::before {
  content: "× ";
  color: #ef4444;
}
.cn-compare h4 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
}

/* --- 8. ハイライト KPI / 数字バッジ --- */
.cn-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 1.5rem 0;
}
@media (min-width: 640px) { .cn-kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.cn-kpi {
  padding: 1rem .75rem;
  background: #f6f8fa;
  border: none;
  border-radius: 4px;
  text-align: center;
}
.cn-kpi-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-accent-dark);
  display: block;
  line-height: 1.2;
}
.cn-kpi-label {
  font-size: .75rem;
  color: var(--color-muted);
  margin-top: .25rem;
}

/* --- 9. 吹き出し --- */
.cn-speech {
  position: relative;
  margin: 1.5rem 0 1.5rem 4rem;
  padding: .9rem 1.1rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cn-speech::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--color-bg-alt) transparent transparent;
}
.cn-speech-icon {
  position: absolute;
  left: -3.5rem;
  top: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 11. SWELL 風リストボックス(枠付き + 点線区切り) --- */
.cn-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.cn-list > li {
  position: relative;
  padding: .55rem 0 .55rem 1.85rem;
  border-bottom: 1px dashed var(--color-border);
  font-size: .95rem;
  color: var(--color-fg);
}
.cn-list > li:last-child { border-bottom: none; }
.cn-list > li::before {
  position: absolute;
  left: 0;
  top: .65rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  line-height: 1;
}

/* チェック型(良い・推奨) */
.cn-list-check { border-color: var(--color-accent); }
.cn-list-check > li::before {
  content: "";
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / 18px 18px;
}

/* バツ型(NG・非推奨) */
.cn-list-bad {
  border: 1px solid #ef4444;
  background: #fff;
  position: relative;
}
.cn-list-bad::before {
  content: "×";
  position: absolute;
  top: -.85rem;
  left: 1rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cn-list-bad > li::before {
  content: "×";
  color: #ef4444;
  font-size: 1rem;
  top: .5rem;
}
.cn-list-bad > li {
  border-bottom: 1px dashed #fecaca;
  color: var(--color-fg);
}
.cn-list-bad > li:last-child { border-bottom: none; }

/* 番号型(ステップ) */
.cn-list-num {
  counter-reset: cn-num;
}
.cn-list-num > li {
  counter-increment: cn-num;
  padding-left: 2.25rem;
}
.cn-list-num > li::before {
  content: counter(cn-num);
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: .8rem;
  top: .55rem;
}

/* --- 10. インフォグラフィック共通: SVG ラッパー (レスポンシブ) --- */
.cn-infographic {
  margin: 1.5rem 0;
  padding: 1.25rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, #fff 100%);
  overflow: hidden;
}
.cn-infographic > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
}
/* SVG 内テキストはモバイルでも読めるように相対サイズ + フォント family 継承 */
.cn-infographic svg text {
  font-family: var(--font-sans);
}
@media (max-width: 640px) {
  .cn-infographic > svg {
    /* viewBox 比率維持で全幅表示。横にはみ出さない */
    width: 100%;
    height: auto;
  }
}
.cn-infographic-caption {
  text-align: center;
  font-size: .8rem;
  color: var(--color-muted);
  margin-top: .5rem;
}

/* ============================================================
   /youtube/ 動画まとめページ
   ============================================================ */
.yt-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.yt-breadcrumb {
  font-size: .8rem;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}
.yt-breadcrumb a {
  color: var(--color-accent-dark);
}
.yt-sep { margin: 0 .5rem; color: var(--color-subtle); }

.yt-page-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.25rem;
}
.yt-page-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-fg);
  margin: 0 0 .5rem;
  line-height: 1.4;
}
.yt-page-title-sub {
  margin-left: .5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
}
.yt-page-lead {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--color-fg-soft);
  margin: 0 0 .5rem;
}
.yt-page-meta {
  font-size: .75rem;
  color: var(--color-muted);
  margin: 0;
}

.yt-grid-wrap { margin: 0; }

.yt-search-row { margin-bottom: 1rem; }
.yt-search-input {
  width: 100%;
  padding: .65rem .9rem;
  font-size: .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-fg);
  outline: none;
}
.yt-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}

.yt-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.yt-control {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8rem;
}
.yt-control-label {
  color: var(--color-muted);
  font-weight: 600;
}
.yt-select {
  padding: .4rem .65rem;
  font-size: .85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-fg);
  cursor: pointer;
}

.yt-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}
.yt-cat-btn {
  padding: .35rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-fg-soft);
  cursor: pointer;
  transition: all .15s;
}
.yt-cat-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.yt-cat-btn.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.yt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.25rem;
}
.yt-tag-btn {
  padding: .15rem .55rem;
  font-size: .72rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-muted);
  cursor: pointer;
  transition: all .15s;
}
.yt-tag-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.yt-tag-btn.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-color: var(--color-accent);
}

.yt-count {
  font-size: .78rem;
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.yt-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--color-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.yt-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .yt-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .yt-list { grid-template-columns: 1fr 1fr 1fr; }
}

.yt-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.yt-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.yt-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
  overflow: hidden;
}
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s;
}
.yt-card:hover .yt-thumb img { transform: scale(1.04); }

.yt-thumb-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-subtle);
}

.yt-badge {
  position: absolute;
  top: .5rem;
  padding: .15rem .4rem;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .02em;
}
.yt-badge-featured {
  left: .5rem;
  background: #f59e0b;
  color: #1f2937;
}
.yt-badge-lang {
  right: .5rem;
  background: rgba(15, 23, 42, .85);
  color: #fff;
  font-weight: 600;
}

.yt-meta { padding: .85rem 1rem 1rem; }
.yt-card-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 .4rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-card:hover .yt-card-title { color: var(--color-accent-dark); }
.yt-card-date {
  font-size: .75rem;
  color: var(--color-muted);
  margin: 0 0 .4rem;
}

.yt-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .25rem;
}
.yt-card-tag {
  background: var(--color-bg-alt);
  color: var(--color-fg-soft);
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.yt-related {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}
.yt-related-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 .75rem;
}
.yt-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .yt-related-list { grid-template-columns: 1fr 1fr; }
}
.yt-related-link {
  display: block;
  padding: .65rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--color-accent-dark);
  background: var(--color-bg-alt);
  transition: border-color .15s, background .15s;
}
.yt-related-link:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.yt-back-nav {
  margin-top: 2rem;
  text-align: center;
  font-size: .8rem;
}
.yt-back-link { color: var(--color-accent-dark); }

/* ============================================================
   /youtube/ 上部フィルタレイアウト(2026-04-30 改: サイドバー廃止して元の位置に戻す)
   ============================================================ */
.yt-side-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-fg);
  margin-bottom: .25rem;
}
.yt-advanced-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  padding: .85rem;
  margin-bottom: .75rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: .5rem;
}
@media (min-width: 768px) {
  .yt-advanced-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .yt-advanced-row { grid-template-columns: repeat(4, 1fr); }
}
.yt-advanced-block {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
/* ページネーション(2026-04-30 会長指示: 100/page) */
.yt-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 1rem 0;
  justify-content: center;
}
.yt-page-btn {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-fg);
  padding: .35rem .75rem;
  font-size: .82rem;
  cursor: pointer;
  border-radius: .25rem;
  min-width: 2.4em;
}
.yt-page-btn:hover { background: var(--color-bg-alt); }
.yt-page-btn.is-active {
  background: #e8714a;
  color: #fff;
  border-color: #e8714a;
}
.yt-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.yt-page-gap {
  padding: .35rem .25rem;
  color: var(--color-muted);
  font-size: .82rem;
}
.yt-tags-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  max-height: 240px;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--color-border-soft, var(--color-border));
  border-radius: .375rem;
}
.yt-badge-short {
  top: .4rem !important;
  left: .4rem !important;
  bottom: auto !important;
  right: auto !important;
  background: rgba(239,68,68,0.92) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 3px 7px !important;
}
/* YouTube 風: 右下に黒バッジで動画長表示 */
.yt-badge-duration {
  top: auto !important;
  bottom: .4rem !important;
  right: .4rem !important;
  left: auto !important;
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: .75rem !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  letter-spacing: 0 !important;
}
.yt-thumb-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.yt-card-title-link {
  text-decoration: none;
  color: inherit;
}
.yt-card-title-link:hover .yt-card-title { text-decoration: underline; }
.yt-card-channel-link:hover { text-decoration: underline !important; }

/* 上部: 検索 + カード/横長切替トグル(2026-04-30 会長指示) */
.yt-top-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .75rem;
}
.yt-view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: .375rem;
  overflow: hidden;
  flex-shrink: 0;
}
.yt-view-btn {
  border: none;
  background: var(--color-bg);
  padding: .45rem .75rem;
  font-size: .85rem;
  cursor: pointer;
  color: var(--color-fg);
}
.yt-view-btn.is-active {
  background: #e8714a;
  color: #fff;
}
.yt-view-btn + .yt-view-btn { border-left: 1px solid var(--color-border); }

/* 横長表示(yt-list-list)— /categories/claude/ の SmartNews 風レイアウトに合わせる
   会長指示(2026-04-30): 既存情報は削除せず、レイアウト・デザインのみ揃える */
.yt-list.yt-list-list {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ececec;
}
.yt-list.yt-list-list > li {
  border-bottom: 1px solid #ececec;
  list-style: none;
}
.yt-list.yt-list-list .yt-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 16px 4px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  transition: background .12s;
}
.yt-list.yt-list-list .yt-card:hover {
  background: #f7faff;
}
.yt-list.yt-list-list .yt-meta {
  flex: 1;
  min-width: 0;
  order: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.yt-list.yt-list-list .yt-thumb-wrap {
  order: 2;
  width: 200px;
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yt-list.yt-list-list .yt-thumb-link { display: block; width: 100%; }
.yt-list.yt-list-list .yt-thumb {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 16/9;
  background: #f0f0f0;
  position: relative;
}
.yt-list.yt-list-list .yt-thumb-wrap .yt-card-stats {
  font-size: .72rem;
  color: var(--color-muted);
  margin: 0;
  padding: 0 2px;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .4em;
  flex-wrap: wrap;
}
.yt-card-stats-main { flex: 1 1 auto; min-width: 0; }
.yt-card-likerate {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-accent-dark);
  font-size: .92em;
  white-space: nowrap;
}
.yt-list.yt-list-list .yt-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #232a36;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .yt-list.yt-list-list .yt-thumb-wrap { width: 130px; }
  .yt-list.yt-list-list .yt-card-title { font-size: 14px; line-height: 1.4; }
  .yt-list.yt-list-list .yt-card { padding: 12px 2px; gap: 10px; }
  .yt-list.yt-list-list .yt-thumb-wrap .yt-card-stats {
    font-size: .66rem;
    line-height: 1.3;
    flex-wrap: wrap;
  }
  .yt-list.yt-list-list .yt-card-channel-link span {
    font-size: .72rem;
  }
  .yt-list.yt-list-list .yt-card-original {
    font-size: .68rem !important;
    line-height: 1.4;
  }
  .yt-list.yt-list-list .yt-card-date {
    font-size: .66rem;
    gap: .35em;
  }
  .yt-card-cat { padding: 1px 6px; font-size: .6rem; }
}

/* ============================================================
   /youtube/ サイドバー + クリック可能カテゴリバッジ + スマートピル
   会長指示(2026-04-30): 記事カテゴリーページ風サイドバー
   ============================================================ */
.yt-page { max-width: 1240px; }
.yt-layout { margin: 0; }

.yt-sidebar { display: none; align-self: start; }
@media (min-width: 1024px) {
  .yt-sidebar { display: block; min-width: 0; position: sticky; top: 130px; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; }
  .yt-sidebar::-webkit-scrollbar { width: 4px; }
  .yt-sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
}
.yt-sidebar-sticky { display: flex; flex-direction: column; gap: 1rem; }
.yt-side-block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px 14px 16px;
}
.yt-side-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.yt-side-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

/* スマートピル: 詳細フィルタ / リセット */
.yt-pill-btn {
  padding: .42rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-fg-soft);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  align-self: flex-end;
}
.yt-pill-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  background: #f0f9ff;
}

/* スマート長方形: カード/横長 トグル */
.yt-controls-row .yt-view-toggle {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  align-self: flex-end;
  background: #fff;
}
.yt-controls-row .yt-view-btn {
  padding: .45rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  background: #fff;
  color: var(--color-fg-soft);
}
.yt-controls-row .yt-view-btn.is-active {
  background: var(--color-accent);
  color: #fff;
}

/* カード内クリック可能カテゴリバッジ */
.yt-card-cat {
  display: inline-block;
  padding: 2px 9px;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.yt-card-cat:hover { opacity: .85; }

.yt-card-date {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  flex-wrap: wrap;
  gap: .5em;
  font-size: .74rem;
  margin: 4px 0 0 !important;
  color: var(--color-muted);
}
.yt-card-pub { font-size: .74rem; color: var(--color-muted); }
.yt-card-upd { font-size: .68rem; opacity: .75; margin-left: .35em; }

/* カード表示時 サムネ + 直下スタッツを wrap、その下に meta */
.yt-list.yt-list-card .yt-card { display: flex; flex-direction: column; }
.yt-list.yt-list-card .yt-thumb-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  order: 1;
}
.yt-list.yt-list-card .yt-thumb-wrap .yt-card-stats {
  font-size: .76rem;
  color: var(--color-muted);
  margin: 4px 0 2px;
  padding: 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5em;
  flex-wrap: wrap;
}
.yt-list.yt-list-card .yt-meta { order: 2; }

/* ============================================================
   /roadmap/ ロードマップ公開ページ(2026-04-27 制定)
   ============================================================ */
.cn-roadmap-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
.cn-roadmap-header {
  padding: 24px 0 16px;
}
.cn-roadmap-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #14202c;
}
.cn-roadmap-lead {
  font-size: 14px;
  line-height: 1.7;
  color: #313131;
  margin: 0 0 12px;
}
.cn-roadmap-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: #888;
  flex-wrap: wrap;
}
.cn-roadmap-link {
  color: #c45a36;
  text-decoration: none;
  font-weight: 600;
}
.cn-roadmap-link:hover { text-decoration: underline; }
.cn-roadmap-disclaimer {
  font-size: 11px;
  color: #888;
  margin: 8px 0 16px;
  padding: 8px 12px;
  background: #fff8e1;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
}
.cn-roadmap-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .cn-roadmap-board {
    grid-template-columns: repeat(5, 1fr);
  }
}
.cn-roadmap-column {
  background: #f7f7f7;
  border-radius: 8px;
  overflow: hidden;
}
.cn-roadmap-col-header {
  padding: 10px 12px;
  border-top: 4px solid #888;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cn-roadmap-col-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  color: #313131;
}
.cn-roadmap-col-count {
  font-size: 11px;
  color: #888;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}
.cn-roadmap-cards {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cn-roadmap-card {
  background: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 12px;
  line-height: 1.5;
}
.cn-roadmap-card-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.cn-roadmap-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #313131;
  margin-bottom: 4px;
}
.cn-roadmap-card-note {
  font-size: 11px;
  color: #666;
  line-height: 1.5;
}
.cn-roadmap-request {
  background: linear-gradient(135deg, #f4f8ff 0%, #faf5ff 100%);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}
.cn-roadmap-request h2 {
  font-size: 18px;
  margin: 0 0 8px;
}
.cn-roadmap-request p {
  font-size: 13px;
  color: #555;
  margin: 0 0 16px;
}
.cn-roadmap-request-btn {
  display: inline-block;
  background: #e8714a;
  color: #fff;
  padding: 12px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.cn-roadmap-request-btn:hover { background: #c45a36; }

/* ============================================================
   /keywords/ キーワード管理表(2026-04-27 制定)
   ============================================================ */
.cn-kw-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
.cn-kw-header { padding: 24px 0 16px; }
.cn-kw-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #14202c;
}
.cn-kw-lead {
  font-size: 14px;
  line-height: 1.7;
  color: #313131;
  margin: 0 0 12px;
}
.cn-kw-stats {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: #888;
  flex-wrap: wrap;
}
.cn-kw-stats strong { color: #e8714a; font-size: 14px; }
.cn-kw-link {
  color: #c45a36;
  text-decoration: none;
  font-weight: 600;
}
.cn-kw-link:hover { text-decoration: underline; }
.cn-kw-note {
  font-size: 11px;
  color: #888;
  margin: 8px 0 16px;
  padding: 8px 12px;
  background: #fafafa;
  border-radius: 4px;
}
.cn-kw-table-wrap {
  overflow-x: auto;
  margin-bottom: 32px;
  border: 1px solid #e6ebf0;
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}
.cn-kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1100px;
}
.cn-kw-table th, .cn-kw-table td {
  white-space: nowrap;
}
.cn-kw-table .cn-kw-article {
  white-space: normal;
  min-width: 320px;
  max-width: 440px;
}
.cn-kw-table .cn-kw-keyword {
  min-width: 200px;
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 768px) {
  .cn-kw-table-wrap::before {
    content: "← スワイプして全列を表示 →";
    display: block;
    text-align: center;
    font-size: 11px;
    color: #888;
    padding: 6px;
    background: #fafafa;
    border-bottom: 1px solid #e6ebf0;
  }
}
.cn-kw-table thead {
  background: #f7f7f7;
}
.cn-kw-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  border-bottom: 1px solid #e6ebf0;
}
.cn-kw-table th.cn-kw-vol { text-align: right; }
.cn-kw-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.cn-kw-rank {
  font-weight: 700;
  color: #888;
  width: 40px;
}
.cn-kw-keyword {
  font-weight: 600;
  color: #14202c;
  white-space: nowrap;
}
.cn-kw-vol {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cn-kw-badge {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.cn-kw-article a {
  color: #c45a36;
  text-decoration: none;
}
.cn-kw-article a:hover { text-decoration: underline; }
.cn-kw-planned-title {
  color: #888;
  font-style: italic;
  font-size: 12px;
}
.cn-kw-row-published { background: #fff; }
.cn-kw-row-planned { background: #fafafa; }
.cn-kw-req-btn {
  display: inline-block;
  background: #f0f9ff;
  color: #c45a36;
  border: 1px solid #bae6fd;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.cn-kw-req-btn:hover { background: #fdf0ea; }
.cn-kw-req-count {
  display: inline-block;
  margin-left: 4px;
  background: #f59e0b;
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 10px;
}
.cn-kw-request-section {
  background: linear-gradient(135deg, #f4f8ff 0%, #faf5ff 100%);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}
.cn-kw-request-section h2 {
  font-size: 18px;
  margin: 0 0 8px;
}
.cn-kw-request-section p {
  font-size: 13px;
  color: #555;
  margin: 0 0 16px;
}
.cn-kw-request-btn {
  display: inline-block;
  background: #e8714a;
  color: #fff;
  padding: 12px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.cn-kw-request-btn:hover { background: #c45a36; }

/* skipped status 用 装飾 */
.cn-kw-row-skipped {
  background: #fef2f2;
  opacity: 0.85;
}
.cn-kw-row-skipped .cn-kw-keyword {
  text-decoration: line-through;
  color: #888;
}
.cn-kw-skip-reason {
  font-size: 12px;
  color: #ef4444;
  font-style: italic;
}
.cn-kw-date {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cn-kw-req-btn-skipped {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.cn-kw-req-btn-skipped:hover {
  background: #fee2e2;
}

/* 本日 新規発見 KW セクション(2026-04-27 制定) */
.cn-kw-today {
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0 24px;
  position: relative;
}
.cn-kw-today-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}
.cn-kw-today-h {
  font-size: 18px;
  margin: 0 0 12px;
  color: #92400e;
}
.cn-kw-today-pick {
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 12px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.cn-kw-today-pick-label {
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.cn-kw-today-pick-kw {
  font-size: 22px;
  font-weight: 800;
  color: #14202c;
  margin-bottom: 4px;
}
.cn-kw-today-pick-meta {
  font-size: 12px;
  color: #888;
}
.cn-kw-today-list {
  margin-top: 12px;
}
.cn-kw-today-list summary {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  padding: 6px 0;
}
.cn-kw-today-list ul {
  list-style: none;
  padding: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px;
}
.cn-kw-today-list li {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 8px;
  background: #fff;
  border-radius: 4px;
}
.cn-kw-today-kw { color: #14202c; }
.cn-kw-today-vol {
  color: #888;
  font-variant-numeric: tabular-nums;
}
.cn-kw-today-more {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
}

/* ============================================================
   Auth pages(/login /signup /admin/login)
   ============================================================ */
.cn-auth-page {
  max-width: 420px;
  margin: 60px auto;
  padding: 0 20px;
}
.cn-auth-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #232a36;
  text-align: center;
}
.cn-auth-lead {
  font-size: 13px;
  color: #555;
  margin: 0 0 16px;
  line-height: 1.7;
  text-align: center;
}
.cn-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
}
.cn-auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
}
.cn-auth-form input {
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #fff;
}
.cn-auth-form input:focus {
  outline: 2px solid #6b9eff;
  border-color: #6b9eff;
}
.cn-auth-submit {
  background: #2c3a52;
  color: #fff;
  border: none;
  padding: 11px 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}
.cn-auth-submit:hover:not(:disabled) { background: #3a4a66; }
.cn-auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.cn-auth-err {
  font-size: 13px;
  color: #b03030;
  background: #fff5f5;
  border: 1px solid #f4c4c4;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
}
.cn-auth-link {
  text-align: center;
  font-size: 13px;
  color: #555;
  margin: 18px 0 0;
}
.cn-auth-link a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ============================================================
   Admin dashboard(/admin)
   ============================================================ */
.cn-admin-page {
  max-width: 1100px;
  margin: 30px auto;
  padding: 24px 20px 60px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (max-width: 720px) {
  .cn-admin-page {
    margin: 12px auto;
    padding: 16px 12px 40px;
    border-radius: 8px;
  }
}
.cn-admin-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.cn-admin-header h1 {
  font-size: 22px;
  margin: 0;
  flex: 0 1 auto;
}
@media (max-width: 767px) {
  .cn-admin-header h1 {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 80px);
  }
}
.cn-admin-user {
  font-size: 13px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
@media (max-width: 720px) {
  .cn-admin-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .cn-admin-user {
    width: 100%;
    justify-content: flex-start;
  }
}
.cn-admin-logout {
  font-size: 12px;
  background: transparent;
  border: 1px solid #d0d7de;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #555;
}
.cn-admin-logout:hover { background: #f0f0f0; }
.cn-admin-err {
  background: #fff5f5;
  border: 1px solid #f4c4c4;
  color: #b03030;
  padding: 10px 14px;
  border-radius: 4px;
  margin: 16px 0;
}

.cn-admin-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}
.cn-admin-kpi-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid #2c3a52;
  border-radius: 6px;
  padding: 14px 16px;
}
.cn-admin-kpi-label {
  font-size: 11px;
  color: #666;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cn-admin-kpi-num {
  font-size: 26px;
  font-weight: 800;
  color: #232a36;
  margin-top: 4px;
}
.cn-admin-kpi-sub {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

.cn-admin-section { margin-bottom: 36px; }
.cn-admin-section h2 {
  font-size: 16px;
  margin: 0 0 12px;
  color: #232a36;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}
.cn-admin-section h2 small {
  font-size: 11px;
  font-weight: 400;
  color: #888;
  margin-left: 8px;
}
.cn-admin-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cn-admin-queue > li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid #b03030;
  border-radius: 4px;
  padding: 12px 14px;
}
.cn-admin-queue-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.cn-admin-queue-time { color: #888; font-size: 11px; }
.cn-admin-queue-c {
  font-size: 13px;
  color: #333;
  background: #fafafa;
  padding: 8px 10px;
  border-radius: 3px;
  margin: 6px 0;
  white-space: pre-wrap;
}
.cn-admin-resolve {
  font-size: 12px;
  background: #1d8a4e;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.cn-admin-resolve:hover { background: #15703f; }

.cn-admin-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rank;
}
.cn-admin-rank > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #ececec;
  counter-increment: rank;
}
.cn-admin-rank > li::before {
  content: counter(rank, decimal) ".";
  color: #888;
  font-weight: 700;
  width: 28px;
  flex-shrink: 0;
}
.cn-admin-rank > li a {
  flex: 1;
  font-size: 13px;
  color: var(--color-accent-dark);
  text-decoration: none;
}
.cn-admin-rank > li > span {
  font-size: 13px;
  font-weight: 700;
  color: #232a36;
}

.cn-admin-export {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cn-admin-export-btn {
  font-size: 12px;
  background: #fff;
  border: 1px solid #d0d7de;
  color: #2c3a52;
  padding: 8px 14px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background .15s;
}
.cn-admin-export-btn:hover {
  background: #f4f8ff;
  border-color: #6b9eff;
}

/* ============================================================
   /me/favorites — SmartNews 風
   ============================================================ */
.cn-fav-page {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px 48px;
}
.cn-fav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.cn-fav-header h1 { font-size: 20px; margin: 0; }
.cn-fav-user {
  font-size: 13px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cn-fav-empty {
  background: #fafafa;
  border: 1px dashed #ddd;
  padding: 30px 20px;
  text-align: center;
  color: #777;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.cn-fav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cn-fav-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.cn-fav-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.cn-fav-card-link {
  display: flex;
  text-decoration: none;
  color: inherit;
  align-items: stretch;
}
.cn-fav-card-img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.cn-fav-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cn-fav-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #232a36;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-fav-card-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}
.cn-fav-card-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .cn-fav-card-img { width: 90px; height: 90px; }
  .cn-fav-card-title { font-size: 13px; }
}

/* ============================================================
   Header auth buttons(右上ログイン / 新規登録)
   ============================================================ */
.cn-auth-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.cn-auth-loading { width: 80px; }
.cn-auth-link-btn {
  font-size: 12px;
  font-weight: 600;
  color: #2c3a52;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #fff;
  letter-spacing: 0.02em;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.cn-auth-link-btn:hover {
  background: #f4f8ff;
  border-color: #6b9eff;
  color: #1d3a5c;
  text-decoration: none;
}
.cn-auth-link-btn-primary {
  background: #2c3a52;
  border-color: #2c3a52;
  color: #fff;
}
.cn-auth-link-btn-primary:hover {
  background: #3a4a66;
  border-color: #3a4a66;
  color: #fff;
}

/* ログイン中の user メニュー */
.cn-auth-loggedin { position: relative; }
.cn-auth-userbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #2c3a52;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 18px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cn-auth-userbtn:hover {
  background: #f4f8ff;
  border-color: #6b9eff;
}
.cn-auth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b9eff, #2c3a52);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.cn-auth-user-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cn-auth-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}
.cn-auth-menu-item {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: #2c3a52;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cn-auth-menu-item:hover {
  background: #f4f8ff;
  color: #1d3a5c;
  text-decoration: none;
}
.cn-auth-menu-item + .cn-auth-menu-item {
  border-top: 1px solid #ececec;
}
.cn-auth-menu-logout { color: #b03030; }
.cn-auth-menu-logout:hover { background: #fff5f5; color: #b03030; }

@media (max-width: 600px) {
  .cn-auth-link-btn { padding: 5px 8px; font-size: 11px; }
  .cn-auth-user-name { max-width: 70px; }
  .cn-auth-buttons { gap: 6px; }
}

/* ============================================================
   CategoryUnreadBar — LINE 風 カテゴリ未読
   ============================================================ */
.cn-cat-unread {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 28px 0 24px;
  overflow: hidden;
}
.cn-cat-unread-head {
  padding: 14px 18px 8px;
  border-bottom: 1px solid var(--color-border);
}
.cn-cat-unread-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
  color: #232a36;
}
.cn-cat-unread-lead {
  font-size: 11px;
  color: #888;
  margin: 0;
}
.cn-cat-unread-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cn-cat-unread-list > li {
  border-top: 1px solid #ececec;
}
.cn-cat-unread-list > li:first-child { border-top: none; }
.cn-cat-unread-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background .12s;
}
.cn-cat-unread-item:hover {
  background: #f7faff;
  text-decoration: none;
}
.cn-cat-unread-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0;
}
.cn-cat-unread-body {
  flex: 1;
  min-width: 0;
}
.cn-cat-unread-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.cn-cat-unread-name {
  font-size: 14px;
  font-weight: 700;
  color: #232a36;
}
.cn-cat-unread-meta {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
}
.cn-cat-unread-desc {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cn-cat-unread-badge {
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.4;
}
.cn-cat-unread-arrow {
  color: #bbb;
  flex-shrink: 0;
}
.cn-cat-unread-list > li:not(.is-unread) .cn-cat-unread-name { color: #888; font-weight: 500; }
.cn-cat-unread-list > li:not(.is-unread) .cn-cat-unread-avatar { opacity: 0.45; }
@media (max-width: 600px) {
  .cn-cat-unread-item { padding: 10px 14px; gap: 10px; }
  .cn-cat-unread-avatar { width: 34px; height: 34px; font-size: 13px; }
  .cn-cat-unread-name { font-size: 13px; }
  .cn-cat-unread-meta { font-size: 10px; }
  .cn-cat-unread-desc { font-size: 11px; }
}

/* ============================================================
   ArticleCardList — SmartNews list view + grid toggle
   ============================================================ */
.cn-card-toolbar {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
}
.cn-card-toolbar-spacer { flex: 1; }
.cn-card-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.cn-card-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.cn-card-toggle-btn + .cn-card-toggle-btn { border-left: 1px solid var(--color-border); }
.cn-card-toggle-btn.is-active {
  background: #2c3a52;
  color: #fff;
}
.cn-card-toggle-btn:hover:not(.is-active) {
  background: #f4f8ff;
  color: #2c3a52;
}

/* SmartNews 風 リスト
   会長指示(2026-04-28): 右 16:9 サムネ / 左 大きめ title / desc 削除 / 左下 cat・日付・未読 */
.cn-sn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ececec;
}
.cn-sn-item {
  border-bottom: 1px solid #ececec;
}
.cn-sn-link {
  display: flex;
  align-items: stretch;
  padding: 16px 4px;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.cn-sn-link:hover {
  background: #f7faff;
  text-decoration: none;
}
.cn-sn-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.cn-sn-title {
  font-size: 16px;
  font-weight: 700;
  color: #232a36;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.01em;
}
.cn-sn-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  flex-wrap: wrap;
}
.cn-sn-cat {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.cn-sn-date {
  color: #888;
  font-size: 11px;
}
.cn-sn-readstate {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9px;
  letter-spacing: 0.04em;
}
.cn-sn-readstate.is-unread {
  background: #ffeaea;
  color: #d32f2f;
}
.cn-sn-readstate.is-unread::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d32f2f;
  margin-right: 4px;
}
.cn-sn-readstate.is-read {
  background: #eef0f3;
  color: #888;
}
.cn-sn-thumb {
  width: 160px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
  align-self: flex-start;
  aspect-ratio: 16 / 9;
}
.cn-sn-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cn-sn-item.is-read .cn-sn-title { color: #777; font-weight: 500; }
.cn-sn-item.is-read .cn-sn-thumb { opacity: 0.6; }
@media (max-width: 600px) {
  .cn-sn-thumb { width: 130px; }
  .cn-sn-title { font-size: 14px; line-height: 1.4; }
  .cn-sn-link { padding: 12px 2px; gap: 10px; }
  .cn-sn-text { gap: 8px; }
}
@media (max-width: 380px) {
  .cn-sn-thumb { width: 110px; }
  .cn-sn-title { font-size: 13px; }
}

/* グリッド時の既読フェード + NEW バッジ */
.home-card.is-read .home-card-title { color: #888; }
.home-card.is-read .home-card-thumb img { opacity: 0.7; }
.home-card-newbadge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.home-card-thumb { position: relative; }

/* ============================================================
   Article 既読 トグル(記事ページ内 LikeButton 直下)
   ============================================================ */
.cn-unread-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px auto 0;
  font-size: 12px;
  color: #777;
  flex-wrap: wrap;
}
.cn-unread-toggle.is-currently-read .cn-unread-toggle-state {
  color: #999;
  font-style: italic;
}
.cn-unread-toggle-state {
  background: #eef0f3;
  color: #555;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
}
.cn-unread-toggle-btn {
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: #b88017;
  border: 1px solid #d4a017;
  padding: 4px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cn-unread-toggle-btn:hover:not(:disabled) {
  background: #d4a017;
  color: #fff;
}
.cn-unread-toggle-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   閲覧履歴ページ
   ============================================================ */
.cn-history-page {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px 48px;
}
.cn-history-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.cn-history-header h1 {
  font-size: 20px;
  margin: 0 0 6px;
}
.cn-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #555;
  flex-wrap: wrap;
}
.cn-history-clear {
  font-size: 11px;
  background: transparent;
  border: 1px solid #d6d6d6;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #888;
}
.cn-history-clear:hover {
  background: #fff5f5;
  color: #b03030;
  border-color: #b03030;
}
.cn-history-empty {
  background: #fafafa;
  border: 1px dashed #ddd;
  padding: 30px 20px;
  text-align: center;
  color: #777;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.cn-history-empty small {
  font-size: 11px;
  color: #999;
}
.cn-history-unread-btn {
  background: transparent;
  border: 1px solid #d6d6d6;
  color: #888;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
}
.cn-history-unread-btn:hover {
  background: #fff5f5;
  border-color: #d4a017;
  color: #b88017;
}

/* ヘッダ「履歴」リンク */
.cn-auth-link-history {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 600px) {
  .cn-auth-link-history svg { width: 11px; height: 11px; }
}

/* ============================================================
   Lessons index + 進捗バー(2026-04-28 会長指示)
   ============================================================ */
.cn-lessons-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.cn-lessons-hero {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.cn-lessons-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--color-fg);
  margin: 0 0 1rem;
}
.cn-lessons-lead {
  font-size: 1rem;
  color: var(--color-muted);
  max-width: 640px;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}
.cn-lessons-cta {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.cn-lessons-cta:hover { opacity: 0.9; }

.cn-lesson-progress {
  background: linear-gradient(135deg, #f4f8ff 0%, #faf5ff 100%);
  border: 1px solid #e1ecff;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0 18px;
}
.cn-lesson-progress-bar {
  width: 100%;
  height: 10px;
  background: #e6ecf5;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cn-lesson-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6b9eff 0%, #8b5cf6 100%);
  transition: width 0.4s ease;
}
.cn-lesson-progress-meta {
  font-size: 12px;
  color: #2c3a52;
  text-align: right;
}
.cn-lesson-progress-meta strong {
  font-size: 14px;
  color: #1d3a5c;
}

.cn-sn-num {
  font-size: 11px;
  font-weight: 700;
  color: #6b9eff;
  margin-right: 6px;
  letter-spacing: 0.04em;
}
.cn-sn-readstate.is-understood {
  background: #d4f5dd;
  color: #1d8a4e;
}
.cn-sn-readstate.is-understood::before {
  content: "✓";
  margin-right: 3px;
  font-weight: 800;
}
.cn-sn-item.is-understood .cn-sn-thumb { opacity: 0.85; }
.cn-sn-item.is-understood .cn-sn-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #1d8a4e;
  border-radius: 4px;
  pointer-events: none;
}
.cn-sn-item.is-understood .cn-sn-thumb { position: relative; }

.cn-badge-understood {
  background: #1d8a4e !important;
}
.home-card.is-understood .home-card-thumb {
  position: relative;
}
.home-card.is-understood .home-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #1d8a4e;
  border-radius: 4px;
  pointer-events: none;
}

.cn-lessons-breakdown {
  margin-top: 30px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 16px;
  background: #fafafa;
}
.cn-lessons-breakdown summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  padding: 4px 0;
}
.cn-lessons-level-block {
  margin-top: 10px;
}
.cn-lessons-level-block h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 6px;
}
.cn-lessons-level-block ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 12px;
  border-left: 2px solid #e0e7ee;
}
.cn-lessons-level-block li {
  padding: 3px 0;
  font-size: 12px;
}
.cn-lessons-level-block a {
  color: #555;
  text-decoration: none;
}
.cn-lessons-level-block a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ============================================================
   レッスン「理解した」ボタン
   ============================================================ */
.cn-understood-block {
  margin: 40px 0 16px;
  text-align: center;
}
.cn-understood-btn {
  background: linear-gradient(135deg, #10b981 0%, #1d8a4e 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 32px;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  transition: transform 0.12s, box-shadow 0.12s;
}
.cn-understood-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.cn-understood-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.cn-understood-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cn-understood-pill {
  display: inline-flex;
  align-items: center;
  background: #d4f5dd;
  color: #1d8a4e;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 18px;
}
.cn-understood-revert {
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: #888;
  border: 1px solid #d6d6d6;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.cn-understood-revert:hover:not(:disabled) {
  background: #fafafa;
  color: #555;
  border-color: #aaa;
}
.cn-understood-revert:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   未読に戻すタグ(2026-04-28 会長指示: タグ横に配置)
   ============================================================ */
.cn-unread-tag {
  display: inline-flex;
  align-items: center;
  background: #fff7eb;
  color: #b88017;
  border: 1px solid #e5c98a;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background .12s, color .12s, border-color .12s;
}
.cn-unread-tag:hover:not(:disabled) {
  background: #d4a017;
  color: #fff;
  border-color: #d4a017;
}
.cn-unread-tag:disabled { opacity: 0.5; cursor: not-allowed; }

/* ゲストアバター(未ログイン用) */
.cn-auth-avatar-guest {
  background: linear-gradient(135deg, #d8d8d8, #9aa6b5);
}

/* ============================================================
   Category action bar(2026-04-28 会長指示: すべて既読 + 通知 OFF)
   ============================================================ */
.cn-cat-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #f7faff;
  border: 1px solid #d6e4ff;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 14px 0 16px;
}
.cn-cat-actions-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.cn-cat-actions-unread {
  background: #ffeaea;
  color: #d32f2f;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}
.cn-cat-actions-allread {
  background: #d4f5dd;
  color: #1d8a4e;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}
.cn-cat-actions-muted {
  background: #eef0f3;
  color: #888;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
}
.cn-cat-actions-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cn-cat-action-btn {
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: #2c3a52;
  border: 1px solid #c8d4e8;
  padding: 6px 12px;
  border-radius: 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background .12s, border-color .12s, color .12s;
}
.cn-cat-action-btn:hover:not(:disabled) {
  background: #2c3a52;
  color: #fff;
  border-color: #2c3a52;
}
.cn-cat-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cn-cat-action-btn.is-muted {
  background: #fff5e8;
  color: #b88017;
  border-color: #e5c98a;
}
.cn-cat-action-btn.is-muted:hover {
  background: #d4a017;
  color: #fff;
  border-color: #d4a017;
}

/* CategoryUnreadBar — ミュート時の表示 */
.cn-cat-unread-mute-icon {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.7;
}
.cn-cat-unread-list > li.is-muted .cn-cat-unread-name { color: #999; font-weight: 500; }
.cn-cat-unread-list > li.is-muted .cn-cat-unread-avatar { opacity: 0.5; }
.cn-cat-unread-list > li.is-muted .cn-cat-unread-meta::after {
  content: " · 通知 OFF";
  color: #b88017;
}

/* ============================================================
   Admin GA4 / GSC パネル(2026-04-28 会長指示)
   ============================================================ */
.cn-admin-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 720px) {
  .cn-admin-twocol { grid-template-columns: 1fr; }
}
.cn-admin-h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #2c3a52;
}
.cn-admin-note {
  background: #fff7eb;
  border: 1px dashed #e5c98a;
  color: #b88017;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
}
.cn-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cn-admin-table th {
  background: #f5f7fa;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: #2c3a52;
  border-bottom: 1px solid #d0d7de;
  white-space: nowrap;
}
.cn-admin-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #ececec;
  color: #444;
}
.cn-admin-table td:first-child {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cn-admin-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}
.cn-admin-table a { color: var(--color-accent-dark); text-decoration: none; }
.cn-admin-table a:hover { text-decoration: underline; }

/* ============================================================
   KW 表 — 対象外マーク 列(2026-04-28 会長指示)
   ============================================================ */
.cn-kw-excluded {
  text-align: center;
  white-space: nowrap;
}
.cn-kw-excluded-mark {
  display: inline-block;
  background: #fff5e8;
  color: #b88017;
  border: 1px solid #e5c98a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9px;
}
.cn-kw-excluded-empty { color: #ccc; font-size: 11px; }
.cn-kw-row-excluded { opacity: 0.55; }
.cn-kw-row-excluded .cn-kw-keyword { color: #888; text-decoration: line-through; }

.cn-admin-note-soft {
  font-size: 12px;
  color: #999;
  background: #fafafa;
  padding: 16px;
  border-radius: 4px;
  text-align: center;
  border: 1px dashed #ddd;
  margin: 0;
}

/* ============================================================
   KW 管理表 — 管理者専用 列(2026-04-29 会長指示)
   ============================================================ */
.cn-kw-admin-badge {
  background: linear-gradient(135deg, #6b9eff, #2c3a52);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.cn-kw-admin-col {
  font-size: 11px;
  color: #444;
  white-space: nowrap;
  background: #fafbff;
}
.cn-kw-admin-path {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  color: #555;
}
.cn-kw-admin-pv {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cn-kw-admin-pv strong {
  color: #1d3a5c;
  font-weight: 700;
}
.cn-kw-admin-rank {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cn-kw-gsc-imp {
  font-size: 9px;
  color: #888;
  font-weight: 400;
}
.cn-kw-empty { color: #ccc; }
.cn-kw-cat-pill {
  display: inline-block;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.cn-kw-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.cn-kw-tag-mini {
  background: #eef0f3;
  color: #555;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}

/* ============================================================
   KW 管理表 — 左 2 列固定 + ドラッグ横スクロール + コンパクト
   会長指示(2026-04-29)
   ============================================================ */
.cn-kw-table-wrap-sticky {
  cursor: grab;
  user-select: none;
  position: relative;
}
.cn-kw-table-wrap-sticky.is-dragging {
  cursor: grabbing;
}
.cn-kw-table-wrap-sticky.is-dragging * {
  user-select: none !important;
  pointer-events: none;
}

/* テーブルをコンパクトに(行高 / 文字 / 余白すべて圧縮、列は削らない) */
.cn-kw-table-compact {
  font-size: 11px;
  min-width: 1600px;
}
.cn-kw-table-compact th {
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.cn-kw-table-compact td {
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.35;
}
.cn-kw-table-compact .cn-kw-keyword {
  min-width: 180px;
  font-size: 12px;
  white-space: normal;
}
.cn-kw-table-compact .cn-kw-article {
  min-width: 240px;
  max-width: 320px;
  white-space: normal;
}
.cn-kw-table-compact .cn-kw-rank {
  width: 36px;
  font-size: 11px;
}
.cn-kw-table-compact .cn-kw-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
}
.cn-kw-table-compact .cn-kw-excluded-mark {
  font-size: 10px;
  padding: 1px 6px;
}
.cn-kw-table-compact .cn-kw-req-btn {
  font-size: 10px;
  padding: 3px 7px;
}
.cn-kw-table-compact .cn-kw-cat-pill {
  font-size: 9px;
  padding: 1px 5px;
}

/* 左 2 列固定: 順位 (1) + キーワード (2) */
.cn-kw-table-compact thead th:nth-child(1),
.cn-kw-table-compact tbody td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  width: 36px;
  min-width: 36px;
  box-shadow: inset -1px 0 0 #f0f0f0;
}
.cn-kw-table-compact thead th:nth-child(1) { background: #f7f7f7; z-index: 4; }
.cn-kw-table-compact thead th:nth-child(2),
.cn-kw-table-compact tbody td:nth-child(2) {
  position: sticky;
  left: 36px;
  z-index: 3;
  background: #fff;
  box-shadow: inset -1px 0 0 #e6ebf0, 4px 0 6px -4px rgba(0,0,0,0.08);
}
.cn-kw-table-compact thead th:nth-child(2) { background: #f7f7f7; z-index: 4; }

/* excluded 行の固定列も透過しないように行背景を継承 */
.cn-kw-table-compact tbody tr.cn-kw-row-excluded td:nth-child(1),
.cn-kw-table-compact tbody tr.cn-kw-row-excluded td:nth-child(2) {
  background: #fafafa;
}

/* タグは改行なし横一列 */
.cn-kw-table-compact .cn-kw-admin-tags {
  max-width: 180px;
  overflow: hidden;
}
.cn-kw-table-compact .cn-kw-tag-list {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  gap: 3px;
  display: inline-flex;
}
.cn-kw-table-compact .cn-kw-tag-mini {
  font-size: 9px;
  padding: 0 4px;
  flex-shrink: 0;
}

/* 管理者列もコンパクト(URL パスは省略表示、PV/順位は数字寄せ) */
.cn-kw-table-compact .cn-kw-admin-col {
  font-size: 10px;
}
.cn-kw-table-compact .cn-kw-admin-path {
  max-width: 160px;
  font-size: 10px;
}
.cn-kw-table-compact .cn-kw-admin-pv {
  min-width: 100px;
}
.cn-kw-table-compact .cn-kw-gsc-imp {
  font-size: 8px;
}

/* モバイルではスティッキー幅を更に詰める */
@media (max-width: 600px) {
  .cn-kw-table-compact .cn-kw-keyword {
    min-width: 130px;
    font-size: 11px;
  }
  .cn-kw-table-compact thead th:nth-child(2),
  .cn-kw-table-compact tbody td:nth-child(2) {
    max-width: 140px;
  }
}

/* ============================================================
   KW 管理表 — ページネーション(2026-04-29 会長指示)
   ============================================================ */
.cn-kw-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  color: #555;
}
.cn-kw-pager-top { margin: 6px 0 8px; border-bottom: 1px solid #ececec; padding-bottom: 8px; }
.cn-kw-pager-bottom { margin-top: 8px; border-top: 1px solid #ececec; padding-top: 8px; }
.cn-kw-pager-info strong { color: #1d3a5c; font-weight: 700; }
.cn-kw-pager-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cn-kw-pager-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}
.cn-kw-pager-size select {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.cn-kw-pager-buttons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.cn-kw-pager-btn,
.cn-kw-pager-num {
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: #2c3a52;
  border: 1px solid #d0d7de;
  padding: 4px 9px;
  cursor: pointer;
  min-width: 28px;
  text-align: center;
}
.cn-kw-pager-btn { padding: 4px 10px; }
.cn-kw-pager-buttons > *:first-child { border-radius: 4px 0 0 4px; }
.cn-kw-pager-buttons > *:last-child { border-radius: 0 4px 4px 0; }
.cn-kw-pager-buttons > * + * { margin-left: -1px; }
.cn-kw-pager-btn:hover:not(:disabled),
.cn-kw-pager-num:hover:not(.is-current) {
  background: #f4f8ff;
  border-color: #6b9eff;
  color: #1d3a5c;
  z-index: 1;
  position: relative;
}
.cn-kw-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cn-kw-pager-num.is-current {
  background: #2c3a52;
  color: #fff;
  border-color: #2c3a52;
  z-index: 1;
  position: relative;
}
.cn-kw-pager-gap {
  font-size: 11px;
  color: #999;
  padding: 0 4px;
}
@media (max-width: 600px) {
  .cn-kw-pager { flex-direction: column; align-items: stretch; gap: 8px; }
  .cn-kw-pager-controls { justify-content: space-between; }
}

/* === Google API 使用状況パネル === */
.cn-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.cn-usage-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 14px 16px;
}
.cn-usage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.cn-usage-card-title {
  font-size: 0.95rem;
  line-height: 1.3;
}
.cn-usage-badge {
  display: inline-block;
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  font-weight: 600;
}
.cn-usage-tier {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.cn-usage-bar-wrap {
  background: #e5e7eb;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.cn-usage-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.cn-usage-numbers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 4px;
}
.cn-usage-guide {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 0.85rem;
}
.cn-usage-guide li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dotted #e5e7eb;
}
.cn-usage-guide li:last-child {
  border-bottom: 0;
}
.cn-usage-guide-label {
  color: var(--color-muted);
}
.cn-usage-guide-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cn-usage-note {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 8px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .cn-usage-grid { grid-template-columns: 1fr; }
}

/* === 請求アカウント カード === */
.cn-billing-card {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 16px 0;
}
.cn-billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 24px;
  margin: 8px 0;
}
.cn-billing-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  font-size: 0.85rem;
}
.cn-billing-item .cn-usage-guide-label {
  font-size: 0.75rem;
}
.cn-billing-item .cn-usage-guide-value {
  font-size: 0.9rem;
}

/* === 接続診断パネル === */
.cn-diag-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin: 16px 0;
  padding: 0;
}
.cn-diag-panel summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.cn-diag-panel[open] summary {
  border-bottom: 1px solid var(--color-border);
}
.cn-diag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.cn-diag-table th,
.cn-diag-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}
.cn-diag-table th {
  background: #f8fafc;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--color-muted);
}
.cn-diag-table tr:last-child td {
  border-bottom: 0;
}

/* /keywords/ ソート可能ヘッダ(2026-04-30 / 2026-05-01 会長指示で可視性強化) */
.cn-kw-th-sortable {
  cursor: pointer;
  user-select: none;
  text-decoration: underline dotted #94a3b8;
  text-underline-offset: 3px;
  position: relative;
  transition: background-color 0.15s ease;
}
.cn-kw-th-sortable:hover {
  background: #fdf0ea;
  text-decoration-color: #e8714a;
}
.cn-kw-th-sortable:hover::after {
  content: " ⇅";
  color: #e8714a;
  font-size: 0.85em;
  margin-left: 2px;
}


/* /youtube/ ページ 白背景カード化(2026-04-30 会長指示) */
.yt-page {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
@media (max-width: 767px) {
  .yt-page {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}


.admin-warning {
  background: #fffbeb;
  color: #854d0e;
  padding: .65rem .9rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 13px;
}
.admin-no-rerun {
  color: #94a3b8;
  font-size: 12px;
}


/* /admin/automations/ table 横スクロール対応(2026-05-01 会長指示) */
.admin-auto-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}
.admin-auto-table-wrap .admin-auto-table {
  min-width: 720px;
}
@media (max-width: 767px) {
  .admin-auto-table th,
  .admin-auto-table td {
    padding: .4rem .5rem;
    font-size: 12px;
  }
  .admin-auto-table-wrap {
    margin-left: -.9rem;
    margin-right: -.9rem;
    padding-left: .9rem;
    padding-right: .9rem;
  }
}

/* ============================================================
   Rating + Like ボタン トグル + 詳細フォーム(2026-05-01 会長指示)
   ============================================================ */
.cn-rating-btn {
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-fg);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
}
.cn-rating-btn:hover { background: #f6f7f8; }
.cn-rating-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.cn-rating-btn.cn-rating-good.is-active { background: #10b981; border-color: #10b981; }
.cn-rating-btn.cn-rating-bad.is-active  { background: #ef4444; border-color: #ef4444; }

.cn-rating-detail {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
}
.cn-rating-detail-label {
  display: block;
  font-size: 13px;
  color: var(--color-fg-soft);
  margin-bottom: .5rem;
}
.cn-rating-detail-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: .55rem .7rem;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  resize: vertical;
}
.cn-rating-detail-input:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.cn-rating-detail-actions {
  margin-top: .6rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.cn-rating-detail-submit {
  background: var(--color-accent);
  color: #fff;
  border: 0;
  padding: .45rem 1.1rem;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cn-rating-detail-submit:disabled { background: #94a3b8; cursor: not-allowed; }
.cn-rating-thanks-inline { font-size: 13px; color: #065f46; }

.cn-like-btn.is-active {
  color: #ef4444;
}
.cn-like-detail {
  margin-top: .6rem;
  padding: .8rem;
  background: #fef2f2;
  border-radius: 8px;
  flex-basis: 100%;
}
.cn-like-detail-label {
  display: block;
  font-size: 12px;
  color: var(--color-fg-soft);
  margin-bottom: .4rem;
}
.cn-like-detail-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: .45rem .6rem;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  resize: vertical;
}
.cn-like-detail-actions { margin-top: .5rem; }
.cn-like-detail-submit {
  background: #ef4444;
  color: #fff;
  border: 0;
  padding: .4rem 1rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cn-like-detail-submit:disabled { background: #94a3b8; cursor: not-allowed; }

/* kie.ai 残クレジット表示 */
.admin-kie-credit {
  background: #f0f9ff;
  padding: .65rem .9rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 14px;
}
.admin-kie-value { color: #0c4a6e; font-weight: 700; font-size: 16px; }
.admin-kie-warn  { color: #92400e; font-size: 13px; }

/* === 管理画面: スケジュール表(列=担当・行=1h)2026-05-01 会長指示 === */
.cn-sched-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cn-sched-nav-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: .9rem;
  cursor: pointer;
}
.cn-sched-nav-btn:hover:not(:disabled) {
  background: #e2e8f0;
}
.cn-sched-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.cn-sched-date-input {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: .95rem;
}
.cn-sched-summary {
  margin-left: auto;
  color: #64748b;
  font-size: .85rem;
}
.cn-sched-wrap {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow-x: auto;
  margin-bottom: 24px;
}
.cn-sched-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  font-size: .85rem;
}
.cn-sched-table th, .cn-sched-table td {
  border: 1px solid #e2e8f0;
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}
.cn-sched-th-time {
  background: #f8fafc;
  width: 64px;
  text-align: center;
  font-weight: 600;
  color: #475569;
  position: sticky;
  left: 0;
  z-index: 2;
}
.cn-sched-th-owner {
  background: #f8fafc;
  border-top-width: 3px;
  border-top-style: solid;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  text-align: center;
}
.cn-sched-td-time {
  background: #f8fafc;
  text-align: center;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  position: sticky;
  left: 0;
  z-index: 1;
}
.cn-sched-td-empty {
  text-align: center;
  color: #cbd5e1;
}
.cn-sched-td-jobs {
  padding: 2px;
}
.cn-sched-job {
  display: block;
  width: 100%;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  margin-bottom: 2px;
  cursor: pointer;
  text-align: left;
  font-size: .75rem;
  line-height: 1.2;
  transition: opacity .15s ease;
}
.cn-sched-job:hover {
  opacity: .85;
}
.cn-sched-job-mark {
  display: inline-block;
  font-weight: 700;
  margin-right: 3px;
}
.cn-sched-job-label {
  font-weight: 500;
}
.cn-sched-job-time {
  display: block;
  font-size: .7rem;
  opacity: .8;
}

/* modal */
.cn-sched-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.cn-sched-modal {
  background: #fff;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}
.cn-sched-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.cn-sched-modal-head h2 {
  margin: 0;
  font-size: 1.1rem;
}
.cn-sched-modal-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: #64748b;
  padding: 0 4px;
  line-height: 1;
}
.cn-sched-modal-body {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  font-size: .9rem;
  margin: 0;
}
.cn-sched-modal-body dt {
  color: #64748b;
  font-weight: 500;
}
.cn-sched-modal-body dd {
  margin: 0;
  word-break: break-word;
}
.cn-sched-modal-foot {
  padding: 12px 20px 20px;
  border-top: 1px solid #e2e8f0;
}
.cn-sched-status-badge {
  display: inline-block;
  color: #fff;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
}

/* === 深津さん提案(2026-05-01): 管理画面 UX 改善 === */

/* テーブル水平スクロール wrapper(audit / GSC など widr table 対応) */
.cn-admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  margin: 12px 0;
}
.cn-admin-table-wrap table {
  min-width: 600px;
  width: 100%;
}
/* dangerouslySetInnerHTML で render される markdown 内 table も自動 wrap */
.cn-admin-page article.cn-article-body {
  overflow-x: auto;
}
.cn-admin-page article.cn-article-body table {
  min-width: 600px;
  border-collapse: collapse;
  margin: 12px 0;
}

/* 未対応カード赤帯先頭固定 */
.cn-admin-kpi-card--alert {
  border-top-color: #b03030 !important;
  border-top-width: 4px !important;
  order: -1;
}
.cn-admin-kpi-card--alert .cn-admin-kpi-num {
  color: #b03030;
}

/* 管理画面ハンバーガーメニュー(モバイル) */
.cn-admin-hamburger {
  display: none;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
@media (max-width: 767px) {
  .cn-admin-user {
    display: none;
  }
  .cn-admin-user.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    margin-top: 8px;
  }
  .cn-admin-user.is-open .cn-admin-nav-link {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-align: center;
  }
  .cn-admin-user.is-open .cn-admin-logout {
    width: 100%;
    padding: 10px;
  }
  .cn-admin-hamburger {
    display: inline-block;
    margin-left: auto;
  }
}

/* === 監査レポート markdown 表示(prose プラグインなしの簡易版) === */
.cn-audit-md h1, .cn-audit-md h2, .cn-audit-md h3 {
  color: #0f172a;
  font-weight: 700;
}
.cn-audit-md h1 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.cn-audit-md h2 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid #e2e8f0; }
.cn-audit-md h3 { font-size: 1rem; margin: 1rem 0 0.5rem; color: #334155; }
.cn-audit-md p { margin: 0.6rem 0; }
.cn-audit-md ul, .cn-audit-md ol { margin: 0.6rem 0 0.6rem 1.4rem; }
.cn-audit-md ul { list-style: disc; }
.cn-audit-md ol { list-style: decimal; }
.cn-audit-md li { margin: 0.2rem 0; }
.cn-audit-md a { color: #c45a36; text-decoration: underline; }
.cn-audit-md strong { color: #0f172a; font-weight: 700; }
.cn-audit-md code {
  background: #f1f5f9; padding: 0.1rem 0.35rem; border-radius: 3px;
  font-size: 0.85em; color: #be185d;
}
.cn-audit-md table {
  border-collapse: collapse; min-width: 600px; margin: 1rem 0;
  font-size: 0.85rem;
}
.cn-audit-md th, .cn-audit-md td {
  border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left;
  vertical-align: top;
}
.cn-audit-md th { background: #f8fafc; font-weight: 600; color: #1e293b; }
.cn-audit-md hr { margin: 1.5rem 0; border: 0; border-top: 1px solid #e2e8f0; }
.cn-audit-md blockquote {
  margin: 0.75rem 0; padding: 0.5rem 1rem;
  border-left: 4px solid #c45a36; background: #f0f9ff; color: #075985;
}

/* === グローバルナビ グルーピング(2026-05-02 会長指示) === */
.cn-group-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
@media (max-width: 900px) {
  .cn-group-nav { display: none; }
}
.cn-nav-group { position: relative; }
.cn-nav-group-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background-color .15s ease, border-color .15s ease;
}
.cn-nav-group-btn:hover,
.cn-nav-group-btn.is-open {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.cn-nav-group-btn.is-active { color: #c45a36; }
.cn-nav-caret { font-size: 10px; opacity: .7; }
.cn-nav-group-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cn-nav-group-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.cn-nav-group-item:hover { background: #f1f5f9; color: #c45a36; }
.cn-nav-group-item.is-active { background: #fdf0ea; color: #075985; font-weight: 600; }

/* モバイル: アコーディオン */
.cn-mobile-group {
  border-bottom: 1px solid #e2e8f0;
}
.cn-mobile-group > summary {
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
}
.cn-mobile-group > summary::after {
  content: "▸";
  position: absolute;
  right: 16px;
  transition: transform .15s ease;
}
.cn-mobile-group[open] > summary::after { transform: rotate(90deg); }
.cn-mobile-group-links {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
}
.cn-mobile-group-links .cn-mobile-drawer-link {
  padding: 10px 16px;
  font-size: 14px;
}

/* ガイド/ニュース系ページ用 utility */
.cn-link-accent { color: #c45a36; font-weight: 600; }
.cn-event-topics {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0;
}
.cn-event-topics li {
  background: #fdf0ea; color: #075985; font-size: 13px;
  padding: 4px 10px; border-radius: 999px;
}
.cn-data-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.cn-data-table th, .cn-data-table td {
  border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left;
  vertical-align: top;
}
.cn-data-table th { background: #f8fafc; font-weight: 700; color: #1e293b; }
.cn-da-news { font-size: 14px; line-height: 1.7; }
.cn-da-news h1, .cn-da-news h2, .cn-da-news h3 {
  margin-top: 1.4em; margin-bottom: .5em; font-weight: 700;
}
.cn-da-news h2 { font-size: 1.1rem; border-bottom: 1px solid #e2e8f0; padding-bottom: .2em; }
.cn-da-news h3 { font-size: 1rem; }
.cn-da-news ul { margin: .5em 0; padding-left: 1.4em; list-style: disc; }
.cn-da-news a { color: #c45a36; text-decoration: underline; }
.cn-note-small { font-size: 12px; color: #64748b; margin-top: 2rem; }

/* === ガイドページ用 hero + lead(2026-05-02 会長指示で執筆ルール準拠化) === */
.cn-article-hero {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1rem 0 1.5rem;
  display: block;
}
.cn-article-lead {
  font-size: 1rem;
  line-height: 1.8;
  color: #1e293b;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: #f0f9ff;
  border-left: 4px solid #e8714a;
  border-radius: 0 8px 8px 0;
}

/* === デジタル庁ニュース アーカイブリスト === */
.cn-da-archive-list { list-style: none; padding: 0; margin: 1rem 0; }
.cn-da-archive-list > li {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.cn-da-archive-list > li > details > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.cn-da-archive-list > li > details > summary::-webkit-details-marker { display: none; }
.cn-da-archive-list > li > details[open] > summary {
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.cn-da-archive-hint {
  font-size: 12px;
  font-weight: 400;
  color: #64748b;
}
.cn-da-archive-list > li > details > article {
  padding: 12px 16px;
}

/* === 汎用ランディング セクションリンクカード === */
.cn-link-cards {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2rem;
  display: grid;
  gap: 12px;
}
.cn-link-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cn-link-card:hover {
  border-color: #e8714a;
  box-shadow: 0 1px 0 #f5c4af, 0 4px 12px rgba(232, 113, 74, 0.08);
}
.cn-link-card-link {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}
.cn-link-card-emoji {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.cn-link-card-body { flex: 1; min-width: 0; }
.cn-link-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
  margin-bottom: 4px;
}
.cn-link-card-desc {
  font-size: .92rem;
  color: #475569;
  margin: 0 0 6px;
  line-height: 1.6;
}
.cn-link-card-meta {
  font-size: .8rem;
  color: #64748b;
}

/* ============================================================
   /ai-events/ — Claude / AI イベントカレンダー(2026-05-02 制定)
   会長指示: リスト・カード・カレンダー 3 ビュー、connpass + 関連ソースから日次自動巡回
   注: /youtube/ は別途特殊カスタマイズ済み(同じデザインを強制しない)
   ============================================================ */
.cn-events-wrap { margin: 1.5rem 0; }

.cn-events-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.cn-events-meta { font-size: .9rem; color: var(--color-fg-soft); }
.cn-events-updated { color: var(--color-muted); font-size: .85em; margin-left: .5em; }

.cn-events-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.cn-events-toggle-btn {
  border: none;
  background: #fff;
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-fg-soft);
  cursor: pointer;
  transition: all .15s;
}
.cn-events-toggle-btn + .cn-events-toggle-btn {
  border-left: 1px solid var(--color-border);
}
.cn-events-toggle-btn:hover { background: #f0f9ff; }
.cn-events-toggle-btn.is-active {
  background: var(--color-accent);
  color: #fff;
}

/* リスト形式 — スマート + シャープ。日付列(左)+ 本文(中)+ 小サムネ(右) */
.cn-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ececec;
}
.cn-events-li {
  border-bottom: 1px solid #ececec;
  list-style: none;
}
.cn-events-link {
  display: flex;
  gap: 14px;
  padding: 14px 6px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
  align-items: flex-start;
}
.cn-events-link:hover { background: #f7faff; }

/* 日付列(左) — 会長指示(2026-05-02): nowrap で「6/18(\n木\n)」のような崩れを防止 */
.cn-events-datecol {
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.cn-events-datecol-md {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-dark);
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
}
.cn-events-datecol-time {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 連日開催: 開始〜終了 縦並び表記(会長指示 2026-05-02) */
.cn-events-datecol.is-multiday {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-color: #fdba74;
  flex: 0 0 78px;
}
.cn-events-datecol-end {
  font-size: 11px;
  color: #9a3412;
  margin-top: 2px;
  font-weight: 700;
  white-space: nowrap;
}

.cn-events-text { flex: 1; min-width: 0; }
.cn-events-title {
  font-size: 15px;
  font-weight: 700;
  color: #232a36;
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-events-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  font-size: .78rem;
  color: var(--color-muted);
  align-items: center;
}
.cn-events-scale {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
}
/* 会長指示(2026-05-02): 規模別色分け */
.cn-events-scale-sm { background: #d1fae5; color: #047857; }
.cn-events-scale-md { background: #dbeafe; color: #1d4ed8; }
.cn-events-scale-lg { background: #fae8ff; color: #86198f; }
.cn-events-scale-unknown { background: #f1f5f9; color: #475569; }

/* 規模カラー凡例 */
.cn-events-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fafbfc;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  font-size: .76rem;
  color: var(--color-fg-soft);
}

/* ソート + フィルタ コントロール(会長指示 2026-05-02) */
.cn-events-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1rem;
}
.cn-events-control {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--color-fg-soft);
}
.cn-events-control-label { font-weight: 700; }
.cn-events-select {
  padding: .4rem .65rem;
  font-size: .82rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-fg);
  cursor: pointer;
}
.cn-events-pillbtn {
  padding: .4rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-fg-soft);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.cn-events-pillbtn:hover {
  border-color: var(--color-accent);
  background: #f0f9ff;
}
.cn-events-pillbtn.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.cn-events-pillbtn.has-filter {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
.cn-events-clearbtn {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* 都道府県ピッカー */
.cn-events-prefpicker {
  margin: -.5rem 0 1rem;
  padding: 14px 14px 14px;
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.cn-events-prefpicker-hint {
  font-size: .76rem;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.cn-events-prefpicker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.cn-events-prefchip {
  padding: 4px 12px;
  font-size: .78rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-fg-soft);
  cursor: pointer;
  transition: all .12s;
}
.cn-events-prefchip:hover {
  border-color: var(--color-accent);
  background: #f0f9ff;
}
.cn-events-prefchip.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  font-weight: 700;
}
.cn-events-prefchip.is-online {
  border-style: dashed;
}
.cn-events-prefchip.is-online.is-active {
  background: #0369a1;
  border-color: #0369a1;
  border-style: solid;
}
.cn-events-legend-label { font-weight: 700; }
.cn-events-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.cn-events-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cn-events-legend-sm { background: #10b981; }
.cn-events-legend-md { background: #3b82f6; }
.cn-events-legend-lg { background: #c026d3; }
.cn-events-place {
  color: var(--color-fg-soft);
  font-size: .76rem;
}
.cn-events-place.is-online { color: #0369a1; }
.cn-events-source {
  background: #f1f5f9;
  color: #475569;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

/* 小サムネ — 連坊 80x60 でシャープに(連坊 thumb は 108x72 native) */
.cn-events-thumb {
  width: 88px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f0f0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cn-events-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}
/* サムネ画像なし fallback */
.cn-events-thumb.is-placeholder {
  background: linear-gradient(135deg, #fdf0ea 0%, #f0f9ff 100%);
  border: 1px solid #bae6fd;
}
.cn-events-thumb-fallback {
  font-size: 24px;
  opacity: .55;
}
@media (max-width: 640px) {
  .cn-events-link { gap: 10px; padding: 12px 4px; }
  .cn-events-datecol { flex: 0 0 52px; padding: 6px 2px; }
  .cn-events-datecol-md { font-size: 12px; }
  .cn-events-datecol-time { font-size: 10px; }
  .cn-events-title { font-size: 14px; line-height: 1.45; -webkit-line-clamp: 3; }
  .cn-events-thumb { width: 64px; height: 42px; }
}

/* カード形式 — header(date + thumb 横並び) + body */
.cn-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cn-events-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cn-events-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  border-color: var(--color-accent);
}
/* 規模別カードアクセント(左上 1px ボーダー) */
.cn-events-card-sm { border-top: 3px solid #10b981; }
.cn-events-card-md { border-top: 3px solid #3b82f6; }
.cn-events-card-lg { border-top: 3px solid #c026d3; }
.cn-events-card-unknown { border-top: 3px solid #94a3b8; }
.cn-events-card-header {
  display: flex;
  gap: 10px;
  padding: 12px 12px 0;
  align-items: center;
}
.cn-events-card-date {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #bae6fd;
  white-space: nowrap;
}
.cn-events-card-date-md {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent-dark);
  line-height: 1.1;
  white-space: nowrap;
  word-break: keep-all;
}
.cn-events-card-date-time {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* カード版 連日開催: 開始〜終了 縦並び(会長指示 2026-05-02) */
.cn-events-card-date.is-multiday {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-color: #fdba74;
}
.cn-events-card-date-end {
  font-size: 11px;
  color: #9a3412;
  margin-top: 3px;
  font-weight: 700;
  white-space: nowrap;
}
.cn-events-card-thumb {
  width: 96px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f0f0;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cn-events-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cn-events-card-thumb.is-placeholder {
  background: linear-gradient(135deg, #fdf0ea 0%, #f0f9ff 100%);
  border-color: #bae6fd;
}
.cn-events-card-thumb-fallback {
  font-size: 28px;
  opacity: .55;
}
.cn-events-card-body {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cn-events-card-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.5;
  color: #232a36;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-events-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-bottom: 8px;
  align-items: center;
}
.cn-events-card-source {
  font-size: .65rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}

/* カレンダー */
.cn-events-cal-wrap { margin: 0; }
.cn-events-cal-nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
  flex-wrap: wrap;
}
.cn-events-cal-month {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  flex: 1;
  text-align: center;
}
.cn-events-cal-navbtn {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-fg-soft);
  transition: all .15s;
}
.cn-events-cal-navbtn:hover {
  background: #f0f9ff;
  border-color: var(--color-accent);
}
.cn-events-cal-today {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.cn-events-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.cn-events-cal-dow {
  background: #f1f5f9;
  padding: 8px 4px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-fg-soft);
}
.cn-events-cal-dow.is-sun { color: #dc2626; }
.cn-events-cal-dow.is-sat { color: #2563eb; }
.cn-events-cal-cell {
  background: #fff;
  min-height: 100px;
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background .12s;
}
.cn-events-cal-cell.is-outside { background: #fafafa; }
.cn-events-cal-cell.is-today {
  background: #fef3c7;
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}
.cn-events-cal-cell.has-events:hover { background: #f0f9ff; }
.cn-events-cal-day {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-fg);
  margin-bottom: 2px;
}
.cn-events-cal-cell.is-outside .cn-events-cal-day { color: #cbd5e1; }
.cn-events-cal-cell.is-sun .cn-events-cal-day { color: #dc2626; }
.cn-events-cal-cell.is-sat .cn-events-cal-day { color: #2563eb; }
.cn-events-cal-evt {
  background: var(--color-accent);
  color: #fff !important;
  font-size: .68rem;
  padding: 2px 6px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.cn-events-cal-evt:hover { filter: brightness(1.15); }
/* 会長指示(2026-05-02): カレンダーのイベントチップを規模別に色分け */
.cn-events-cal-evt-sm { background: #10b981; }
.cn-events-cal-evt-md { background: #3b82f6; }
.cn-events-cal-evt-lg { background: #c026d3; }
.cn-events-cal-evt-unknown { background: #94a3b8; }
.cn-events-cal-more {
  font-size: .66rem;
  color: var(--color-muted);
  font-weight: 600;
}

@media (max-width: 640px) {
  .cn-events-cal-cell { min-height: 60px; padding: 3px; }
  .cn-events-cal-day { font-size: .72rem; }
  .cn-events-cal-evt { font-size: .58rem; padding: 1px 4px; }
  .cn-events-cal-dow { padding: 4px 2px; font-size: .72rem; }
  .cn-events-cal-month { font-size: 1rem; }
  .cn-events-cal-navbtn { padding: 4px 10px; font-size: .78rem; }
}

.cn-events-method,
.cn-events-related {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* === コラム本文の装飾解除(X 風: 黒文字 + 絵文字のみ) === */
.cn-column-plain { color: #000; font-size: 15px; line-height: 1.7; }
.cn-column-plain p { margin: 0 0 0.7em 0; color: #000; font-weight: normal; }
.cn-column-plain strong, .cn-column-plain b { font-weight: normal; color: #000; }
.cn-column-plain em, .cn-column-plain i { font-style: normal; }
.cn-column-plain h1, .cn-column-plain h2, .cn-column-plain h3, .cn-column-plain h4 {
  font-size: 15px; font-weight: normal; margin: 0 0 0.7em 0; color: #000;
}
.cn-column-plain ul, .cn-column-plain ol { padding-left: 1.5em; margin: 0 0 0.7em 0; }
.cn-column-plain li { color: #000; }
.cn-column-plain a { color: #1d9bf0; text-decoration: none; }
.cn-column-plain a:hover { text-decoration: underline; }
.cn-column-plain blockquote { border-left: none; padding-left: 0; margin: 0 0 0.7em 0; color: #000; font-style: normal; }
.cn-column-plain code { background: transparent; padding: 0; color: #000; font-family: inherit; }
.cn-column-plain pre { background: transparent; padding: 0; color: #000; }

/* ============================================
   経営者図鑑 /executives/  — Hall of Founders
   ダーク・シネマティック・テーマ(2026-05-08 刷新)
   ============================================ */
.execs-page {
  --execs-bg:        #0a0e1a;
  --execs-surface:   #0f1424;
  --execs-surface-2: #131a2e;
  --execs-elev:      #1a2241;
  --execs-border:    #1f2a44;
  --execs-border-2:  #2a3a5e;
  --execs-text:      #e8edf5;
  --execs-text-muted:#94a3b8;
  --execs-text-dim:  #64748b;
  --execs-accent:    #e8714a;
  --execs-accent-2:  #7dd3fc;

  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 5rem;
  color: var(--execs-text);
  counter-reset: execs-cat;
}
.execs-page::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232, 113, 74, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(125, 211, 252, 0.10), transparent 60%),
    linear-gradient(180deg, var(--execs-bg) 0%, #050810 100%);
  z-index: -2;
}
.execs-page::after {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.execs-page .cn-breadcrumb,
.execs-page .cn-breadcrumb-list,
.execs-page .cn-breadcrumb-item,
.execs-page .cn-breadcrumb-sep {
  color: var(--execs-text-muted);
}
.execs-page .cn-breadcrumb a {
  color: var(--execs-accent-2);
}
.execs-page .cn-breadcrumb a:hover {
  color: #bae6fd;
}
.execs-page .cn-breadcrumb [aria-current="page"] {
  color: var(--execs-text);
}

.execs-hero {
  margin: 2.5rem 0 3rem;
  text-align: left;
  position: relative;
}
.execs-hero::before {
  content: "FOUNDERS LIBRARY";
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--execs-accent);
  margin-bottom: 1.1rem;
}
.execs-hero::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--execs-accent), transparent);
  margin: -0.55rem 0 1.4rem;
}
.execs-title {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 1.5rem 0;
  background: linear-gradient(135deg, #fff 0%, #fff 35%, var(--execs-accent) 60%, #ffb38a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.execs-lead {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #cbd5e1;
  margin: 0;
  max-width: 56ch;
  font-weight: 400;
}

.execs-gate-banner {
  position: relative;
  background:
    linear-gradient(135deg, rgba(232,113,74,0.18) 0%, rgba(125,211,252,0.12) 100%),
    rgba(15, 20, 36, 0.85);
  color: var(--execs-text);
  border: 1px solid var(--execs-border-2);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin: 0 0 2.5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.execs-gate-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--execs-accent), transparent);
}
.execs-gate-banner p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #e2e8f0;
  flex: 1 1 320px;
}
.execs-gate-banner strong {
  font-weight: 700;
  color: #fff;
}
.execs-gate-actions { display: flex; gap: 0.55rem; }
.execs-btn-primary {
  background: linear-gradient(135deg, var(--execs-accent), #c95a36);
  color: #fff;
  font-weight: 700;
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 14px rgba(232, 113, 74, 0.35);
}
.execs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 113, 74, 0.5);
}
.execs-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background .12s ease, border-color .12s ease;
}
.execs-btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.32);
}

.execs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 3rem 0;
  padding: 0.85rem;
  background: rgba(15, 20, 36, 0.6);
  border: 1px solid var(--execs-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.execs-toc-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--execs-border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all .15s ease;
}
.execs-toc-item:hover {
  background: linear-gradient(135deg, rgba(232,113,74,0.95), rgba(201,90,54,0.95));
  color: #fff;
  border-color: var(--execs-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 113, 74, 0.3);
}
.execs-toc-count {
  background: rgba(255,255,255,0.06);
  color: var(--execs-text-muted);
  font-size: 0.68rem;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.execs-toc-item:hover .execs-toc-count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.execs-cat-section {
  margin: 0 0 4rem 0;
  scroll-margin-top: 80px;
  counter-increment: execs-cat;
}
.execs-cat-header {
  position: relative;
  padding: 0 0 1rem;
  margin: 0 0 1.5rem 0;
  border-bottom: 1px solid var(--execs-border);
}
.execs-cat-header::before {
  content: counter(execs-cat, decimal-leading-zero);
  position: absolute;
  top: -0.1rem;
  right: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.035);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.execs-cat-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.4rem 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.01em;
}
.execs-cat-title > [aria-hidden="true"] {
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 6px rgba(232,113,74,0.4));
}
.execs-cat-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--execs-text-muted);
  line-height: 1.7;
  max-width: 64ch;
}

.execs-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.exec-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--execs-surface-2) 0%, var(--execs-surface) 100%);
  border: 1px solid var(--execs-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px rgba(0,0,0,0.28);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  isolation: isolate;
}
.exec-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.exec-card:hover {
  transform: translateY(-3px);
  border-color: var(--execs-border-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 16px 40px rgba(0,0,0,0.45),
    0 0 0 1px rgba(232, 113, 74, 0.15);
}
.exec-card:hover::before { opacity: 1; }
.exec-card-top {
  position: relative;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(255,255,255,0.18), transparent 60%),
    var(--themeColor, #1f2937);
  overflow: hidden;
}
.exec-card-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.18) 100%),
    radial-gradient(ellipse 60% 100% at 50% 100%, rgba(0,0,0,0.4), transparent 70%);
  pointer-events: none;
}
.exec-card-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
}
.exec-avatar {
  position: relative;
  font-size: 2.4rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
  z-index: 1;
}
.exec-avatar::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
  z-index: -1;
}
.exec-card-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.exec-name {
  font-size: 1.02rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.005em;
}
.exec-name-en {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--execs-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 5px;
}
.exec-role {
  font-size: 0.76rem;
  line-height: 1.55;
  color: #a5b4cc;
  margin: 0;
}
.exec-links {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.exec-link {
  font-size: 0.72rem;
  color: var(--execs-accent-2);
  text-decoration: none;
  display: inline-block;
  padding: 0.18rem 0;
  transition: color .12s ease;
}
.exec-link:hover {
  color: #bae6fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.exec-locked {
  margin-top: auto;
  padding: 0.65rem 0.7rem;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--execs-border-2);
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--execs-text-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.5;
}
.exec-toggle {
  margin-top: auto;
  background: linear-gradient(135deg, var(--execs-accent), #c95a36);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow: 0 4px 12px rgba(232, 113, 74, 0.25);
}
.exec-toggle:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(232, 113, 74, 0.4);
}

.exec-detail {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--execs-border);
  font-size: 0.85rem;
  color: var(--execs-text);
  line-height: 1.7;
}
.exec-meta {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0.3rem 0.85rem;
  margin: 0 0 0.85rem 0;
  padding: 0.7rem 0.85rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--execs-border);
  border-radius: 8px;
  font-size: 0.78rem;
}
.exec-meta dt {
  font-weight: 700;
  color: var(--execs-text-dim);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.exec-meta dd { margin: 0; color: var(--execs-text); }
.exec-h4 {
  font-size: 0.72rem;
  font-weight: 700;
  margin: 1.2rem 0 0.5rem;
  color: var(--execs-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.exec-h4::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--execs-accent);
  border-radius: 1px;
}
.exec-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: #cbd5e1;
}
.exec-bullets li {
  margin: 0.2rem 0;
  padding-left: 1.15rem;
  position: relative;
}
.exec-bullets li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--execs-accent);
  font-weight: 700;
}
.exec-philosophy,
.exec-why {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #e2e8f0;
  background: linear-gradient(135deg, rgba(232,113,74,0.06), rgba(125,211,252,0.04));
  border: 1px solid var(--execs-border);
  border-left: 3px solid var(--execs-accent);
  padding: 0.85rem 1rem;
  border-radius: 0 8px 8px 0;
}
.exec-prompt-block {
  margin-top: 1.25rem;
  background:
    linear-gradient(180deg, rgba(125,211,252,0.06), transparent 30%),
    #050810;
  color: #e2e8f0;
  border: 1px solid var(--execs-border-2);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.15rem;
  position: relative;
  overflow: hidden;
}
.exec-prompt-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--execs-accent-2), transparent);
}
.exec-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.exec-prompt-head .exec-h4 {
  color: var(--execs-accent-2);
  margin: 0;
}
.exec-prompt-head .exec-h4::before {
  background: var(--execs-accent-2);
}
.exec-prompt-note {
  font-size: 0.74rem;
  color: var(--execs-text-muted);
  line-height: 1.6;
  margin: 0 0 0.65rem 0;
}
.exec-copy {
  background: linear-gradient(135deg, var(--execs-accent), #c95a36);
  color: #fff;
  border: none;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s ease, transform .12s ease;
  box-shadow: 0 2px 8px rgba(232, 113, 74, 0.3);
}
.exec-copy:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.exec-prompt {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.65;
  color: #cbd5e1;
  background: transparent;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--execs-border-2) transparent;
}
.exec-prompt::-webkit-scrollbar { width: 6px; }
.exec-prompt::-webkit-scrollbar-thumb { background: var(--execs-border-2); border-radius: 3px; }

/* === ポップアップ(モーダル)=== */
.exec-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: execFade .18s ease-out;
}
@keyframes execFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.exec-modal {
  background: linear-gradient(180deg, var(--execs-surface-2) 0%, var(--execs-surface) 100%);
  color: var(--execs-text);
  border: 1px solid var(--execs-border-2);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 32px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(232, 113, 74, 0.08);
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: execPop .22s ease-out;
}
@keyframes execPop {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
.exec-modal-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--themeColor, #1f2937);
}
.exec-modal-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}
.exec-modal-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
}
.exec-modal-avatar {
  font-size: 2.8rem;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  position: relative;
  z-index: 1;
}
.exec-modal-headinfo {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.exec-modal-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: -0.01em;
}
.exec-modal-title-en {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.exec-modal-role {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
}
.exec-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  z-index: 3;
  -webkit-tap-highlight-color: rgba(255,255,255,0.2);
  touch-action: manipulation;
}
.exec-modal-close:hover,
.exec-modal-close:active {
  background: rgba(232, 113, 74, 0.6);
  border-color: var(--execs-accent);
  transform: scale(1.05);
}
.exec-modal-body {
  padding: 1.4rem 1.5rem 1.8rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--execs-border-2) transparent;
}
.exec-modal-body::-webkit-scrollbar { width: 8px; }
.exec-modal-body::-webkit-scrollbar-thumb { background: var(--execs-border-2); border-radius: 4px; }
.exec-modal-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.exec-modal-links li { margin: 0; }

@media (max-width: 640px) {
  .execs-page { padding: 1.5rem 0.85rem 4rem; }
  .execs-hero { margin: 1.25rem 0 2.25rem; }
  .execs-hero::before { font-size: 0.66rem; letter-spacing: 0.2em; margin-bottom: 0.85rem; }
  .execs-hero::after { width: 48px; margin: -0.4rem 0 1.1rem; }
  .execs-title {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
    line-height: 1.18;
    margin-bottom: 1.1rem;
  }
  .execs-lead { font-size: 0.95rem; line-height: 1.9; }
  .execs-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .exec-card-top { height: 72px; }
  .exec-avatar { font-size: 1.9rem; }
  .exec-name { font-size: 0.95rem; }
  .exec-role { font-size: 0.72rem; }
  .exec-card-body { padding: 0.85rem 0.9rem 0.95rem; gap: 0.45rem; }
  .execs-cat-header::before { font-size: 1.6rem; }
  .execs-cat-title { font-size: 1.2rem; }
  .execs-gate-banner { flex-direction: column; align-items: flex-start; padding: 1.15rem; }
  .exec-modal-overlay { padding: 0; }
  .exec-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .exec-modal-title { font-size: 1.1rem; }
  .exec-modal-body { padding: 1.1rem; }
  .exec-modal-head { padding: 1.1rem 1.15rem; }
}

/* focus-visible(伊藤さん CTO レビュー指摘 / WCAG 2.4.7)*/
.execs-page :is(
  .execs-toc-item,
  .exec-card,
  .exec-toggle,
  .exec-link,
  .execs-btn-primary,
  .execs-btn-ghost,
  .exec-copy,
  .exec-modal-close
):focus-visible {
  outline: 2px solid var(--execs-accent-2);
  outline-offset: 2px;
  border-radius: 8px;
}
@media (max-width: 380px) {
  .execs-grid { grid-template-columns: 1fr; }
}

/* ===== Claude Accounts catalog page (/claude-accounts/) ===== */
.snscat-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}
.snscat-hero {
  margin: 1rem 0 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.snscat-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}
.snscat-lead {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  margin: 0 0 1rem;
}
.snscat-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.snscat-summary li {
  background: #fff;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  text-align: center;
}
.snscat-summary-count {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #e8714a;
  line-height: 1;
}
.snscat-summary-label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.25rem;
}
.snscat-note {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}
.snscat-contact-link {
  color: #e8714a;
  text-decoration: underline;
}

.snscat-toolbar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.snscat-search {
  margin-bottom: 0.75rem;
}
.snscat-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
}
.snscat-search-input:focus {
  outline: none;
  border-color: #e8714a;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.snscat-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.snscat-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.snscat-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin-right: 0.25rem;
  min-width: 6em;
}
.snscat-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.snscat-chip:hover {
  background: #fdf0ea;
  color: #0369a1;
}
.snscat-chip.is-active {
  background: #e8714a;
  color: #fff;
  border-color: #c45a36;
}
.snscat-count {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.5rem;
  text-align: right;
}
.snscat-section {
  margin-bottom: 2.5rem;
}
.snscat-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.snscat-section-count {
  background: #e8714a;
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}
.snscat-section-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 1rem;
}
.snscat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
.snscat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.snscat-card:hover {
  border-color: #e8714a;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12);
  transform: translateY(-2px);
}
.snscat-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.snscat-platform {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}
.snscat-pf-X { background: #0f172a; color: #fff; }
.snscat-pf-Threads { background: #000; color: #fff; }
.snscat-pf-LinkedIn { background: #0a66c2; color: #fff; }
.snscat-pf-YouTube { background: #ff0000; color: #fff; }
.snscat-pf-GitHub { background: #24292e; color: #fff; }
.snscat-pf-note { background: #41c9b4; color: #fff; }
.snscat-pf-Blog { background: #f59e0b; color: #fff; }
.snscat-pf-Substack { background: #ff6719; color: #fff; }
.snscat-pf-Bluesky { background: #1185fe; color: #fff; }
.snscat-pf-Mastodon { background: #6364ff; color: #fff; }
.snscat-lang { font-size: 0.95rem; }
.snscat-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
.snscat-card-handle {
  font-size: 0.78rem;
  color: #e8714a;
  margin-bottom: 0.5rem;
  font-family: ui-monospace, monospace;
}
.snscat-card-bio {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 0.75rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snscat-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid #f1f5f9;
}
.snscat-followers {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}
.snscat-card-cta {
  font-size: 0.78rem;
  color: #e8714a;
  font-weight: 700;
}
.snscat-empty {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  color: #64748b;
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .snscat-title { font-size: 1.3rem; }
  .snscat-summary { grid-template-columns: repeat(2, 1fr); }
  .snscat-filter-label { min-width: 100%; margin-bottom: 0.25rem; }
  .snscat-grid { grid-template-columns: 1fr; }
  .snscat-toolbar { position: static; }
}