/**********************************************************
 * single-feature.css  (Refactored / DRY)
 * 目的：重複削減・保守性向上・既存UI/挙動の完全維持
 **********************************************************/

/* ========= 共通トークン ========= */
:root{
  --font-body: 'Noto Sans JP', sans-serif;

  /* アクセント */
  --accent: #e0b354;

  /* Chat（左/右） */
  --chat-left-bg:   #f7f7fb;
  --chat-left-bd:   #e7e7ef;
  --chat-right-bg:  #eef6ff;
  --chat-right-bd:  #d7e9ff;

  /* ブランドカラー */
  --brand-fb:   #1877F2;
  --brand-x:    #000000;
  --brand-line: #06C755;

  /* 共通レイアウト */
  --wrap-max: 800px;
  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-s: 0 1px 0 rgba(0,0,0,.03);
  --shadow-m: 0 4px 10px rgba(0,0,0,0.15);
}

/* ========= ベース ========= */
body{
  font-family:var(--font-body);
  background:#fff; color:#222; line-height:1.8; padding:0; margin:0;
}

/* Header */
.site-logo{ max-height:48px; height:auto; width:auto; display:block; }

/* ========= レイアウト ========= */
.post-wrapper{
  max-width:var(--wrap-max);
  margin:0 auto; padding:32px 16px;
}
.post-thumbnail img{ width:100%; height:auto; border-radius:var(--radius-m); }

.post-title{ font-size:28px; font-weight:700; margin:24px 0 12px; }
.post-meta{ font-size:14px; color:#666; margin-bottom:24px; }

/* ========= 目次 ========= */
.post-toc{
  background:#fff; border:1px solid #ddd; padding:20px; border-radius:var(--radius-m);
  margin:32px 0; font-size:15px; position:relative;
}
.post-toc h2{
  font-size:18px; margin-bottom:16px; display:flex; align-items:center; font-weight:700;
}
.post-toc h2 i{ margin-right:8px; color:#666; }
.post-toc ul{
  list-style:none; padding-left:0; margin:0; max-height:280px; overflow:hidden; transition:max-height .3s ease;
}
.post-toc ul.expanded{ max-height:1000px; }
.post-toc li{ margin-bottom:6px; }
.post-toc li a{ text-decoration:none; color:#222; display:block; padding-left:4px; }
.post-toc li[data-level="2"] a{ font-weight:700; font-size:15px; }
.post-toc li[data-level="3"] a{ font-size:14px; padding-left:16px; color:#444; }
.toc-toggle{
  display:block; margin:12px auto 0; background:#f5f5f5; border:1px solid #ccc;
  padding:6px 12px; border-radius:4px; font-size:14px; cursor:pointer;
}
.toc-divider{ border:none; border-top:1px solid #e0e0e0; margin:12px 0 16px; }

/* ========= 本文スコープ（post/entry 両対応） ========= */
.content-scope,
:where(.post-content,.entry-content){ margin-top:24px; }

/* H2 */
:where(.post-content,.entry-content) h2{
  margin-top:40px; border-left:4px solid var(--accent); padding-left:12px;
  scroll-margin-top: calc(var(--header-h, 0px) + 8px);
}

/* H3（下線装飾） */
:where(.post-content,.entry-content) h3{
  margin-top:32px; position:relative; padding-bottom:8px; font-weight:700; font-size:18px; color:#333;
  scroll-margin-top: calc(var(--header-h, 0px) + 8px);
}
:where(.post-content,.entry-content) h3::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent);
}

/* Code / Table */
:where(.post-content,.entry-content) pre{
  background:#111; color:#eee; padding:16px; border-radius:6px; overflow-x:auto;
}
:where(.post-content,.entry-content) table{
  width:100%; border-collapse:collapse; margin-top:24px;
}
:where(.post-content,.entry-content) th,
:where(.post-content,.entry-content) td{
  border:1px solid #ccc; padding:8px;
}

/* ========= シェア ========= */
.post-share{
  margin-top:48px; background:#f0f0f0; padding:24px; border-radius:var(--radius-m); text-align:center;
}
.post-share p{ margin-top:0; }
.post-share a{ margin:0 12px; text-decoration:none; color:#fff; font-weight:700; }

/* Share buttons */
.share-buttons{
  display:flex; justify-content:center; gap:16px; margin:20px 0 0; padding:0; list-style:none;
}
.share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; font-size:20px; color:#fff; border:none;
  transition:opacity .3s ease;
}
.share-btn:hover{ opacity:.8; }
.share-btn.facebook{ background:var(--brand-fb); }
.share-btn.x{ background:var(--brand-x); }
.share-btn.line{ background:var(--brand-line); }

/* SR only */
.sr-only{
  position:absolute; clip:rect(1px,1px,1px,1px); height:1px; width:1px; overflow:hidden;
}

/* ========= 外部リンクモーダル ========= */
.modal{
  display:none; position:fixed; z-index:9999; inset:0; width:100%; height:100%;
  background:rgba(0,0,0,.5); align-items:center; justify-content:center; animation:fadeIn .3s ease;
}
.modal.show{ display:flex; }
.modal-content{
  background:#fff; padding:24px; border-radius:var(--radius-m); max-width:90%; width:320px; text-align:center;
  box-shadow:var(--shadow-m); animation:slideUp .3s ease;
}
.modal-buttons{ margin-top:20px; display:flex; justify-content:space-between; gap:16px; }
.modal-buttons button{
  flex:1; padding:10px; border:none; border-radius:4px; font-size:15px; cursor:pointer;
}
#modal-cancel{ background:#eee; color:#333; }
#modal-confirm{ background:#007BFF; color:#fff; }
@keyframes fadeIn{ from{background:rgba(0,0,0,0);} to{background:rgba(0,0,0,.5);} }
@keyframes slideUp{ from{transform:translateY(40px); opacity:0;} to{transform:translateY(0); opacity:1;} }

/* ========= タクソノミー ========= */
.post-taxonomy{
  margin:32px 0 24px; font-size:.875rem; display:flex; gap:12px; flex-wrap:wrap;
}
.post-taxonomy i{ margin-right:4px; color:#888; }
.post-cats a, .post-tags a{ color:#007acc; text-decoration:none; margin-right:6px; }
.post-cats a:hover, .post-tags a:hover{ text-decoration:underline; }

/* ========= ページネーション ========= */
.post-pagination{
  display:flex; justify-content:space-between; align-items:center; gap:24px; margin:60px 0;
}
.pagination-link{
  flex:1; display:flex; align-items:center; gap:16px; text-decoration:none; color:#222; font-size:.9rem; line-height:1.4;
  transition:opacity .25s ease;
}
.pagination-link:hover{ opacity:.8; }
.arrow-bar{
  width:28px; height:64px; background:#0A1238; display:flex; align-items:center; justify-content:center;
}
.arrow-bar i{ color:#fff; font-size:18px; }
.next-post{ justify-content:flex-end; }
.next-post .arrow-bar{ order:2; }

/* ========= 関連記事 ========= */
.related-posts{ margin:60px 0; }
.related-posts h2{ font-size:1.2rem; margin:0 0 16px; }
.related-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px;
}
.related-item{
  background:#fff; border:1px solid #e0e0e0; border-radius:4px; overflow:hidden; transition:transform .2s;
}
.related-item:hover{ transform:translateY(-4px); }
.related-item img{ width:100%; height:auto; display:block; }
.related-item time{ display:block; font-size:.75rem; color:#777; margin:8px 12px 0; }
.related-item h3{ font-size:.9rem; font-weight:600; margin:4px 12px 12px; line-height:1.4; color:#222; }

/* ========= Explain Card ========= */
.explain-block{
  margin:20px 0; border:1px solid #e6e6e6; border-radius:12px; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.03); overflow:hidden;
}
.explain-title{
  margin:0; padding:10px 14px; font-size:15px; font-weight:700; border-bottom:1px solid #eee;
}
/* 種別色 */
.explain-block.is-note .explain-title{ background:#f7f9ff; color:#234; }
.explain-block.is-tip  .explain-title{ background:#f4fff7; color:#1c3; }
.explain-block.is-warn .explain-title{ background:#fff7f7; color:#c22; }
.explain-body{ padding:12px 14px; }
.explain-body p{ margin:0 0 10px; }
.explain-body p:last-child{ margin-bottom:0; }

/* H3 下線は explain-title から除外 */
:where(.post-content,.entry-content) .explain-title::after{ content:none !important; }

/* ========= Chat UI（MUショートコード整合） ========= */
/* 行（左寄せが基本） */
:where(.post-content,.entry-content) .chat-row{
  display:flex; align-items:flex-start; gap:10px; margin:14px 0; justify-content:flex-start;
}
/* 右は「bubble → avatar」で出力される前提で row + 右寄せ */
:where(.post-content,.entry-content) .chat-row.is-right{
  flex-direction:row; justify-content:flex-end;
}

/* アバター＋名前（縦積み） */
:where(.post-content,.entry-content) .chat-avatar-wrap{
  display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 48px;
}
:where(.post-content,.entry-content) .chat-avatar{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.06); background:#e9eef3;
}
:where(.post-content,.entry-content) .chat-avatar.placeholder{ background:#e9eef3; }
:where(.post-content,.entry-content) .chat-name{
  font-size:11px; line-height:1.2; color:#666; text-align:center; max-width:6em; word-break:break-word;
}

/* 吹き出し */
:where(.post-content,.entry-content) .chat-bubble{
  max-width:78%; background:var(--chat-left-bg); border:1px solid var(--chat-left-bd);
  border-radius:14px; padding:10px 12px; position:relative; box-shadow:var(--shadow-s);
}
:where(.post-content,.entry-content) .chat-row.is-right .chat-bubble{
  background:var(--chat-right-bg); border-color:var(--chat-right-bd);
}

/* 三角（縁→中身） */
:where(.post-content,.entry-content) .chat-row.is-left .chat-bubble::before,
:where(.post-content,.entry-content) .chat-row.is-right .chat-bubble::before{
  content:''; position:absolute; top:12px; width:0; height:0; border:8px solid transparent;
}
:where(.post-content,.entry-content) .chat-row.is-left .chat-bubble::before{
  left:-16px;  border-right-color:var(--chat-left-bd);
}
:where(.post-content,.entry-content) .chat-row.is-right .chat-bubble::before{
  right:-16px; border-left-color:var(--chat-right-bd);
}
:where(.post-content,.entry-content) .chat-row.is-left .chat-bubble::after,
:where(.post-content,.entry-content) .chat-row.is-right .chat-bubble::after{
  content:''; position:absolute; top:12px; width:0; height:0; border:7px solid transparent;
}
:where(.post-content,.entry-content) .chat-row.is-left .chat-bubble::after{
  left:-14px;  border-right-color:var(--chat-left-bg);
}
:where(.post-content,.entry-content) .chat-row.is-right .chat-bubble::after{
  right:-14px; border-left-color:var(--chat-right-bg);
}

/* テキスト間隔・メタ非表示 */
:where(.post-content,.entry-content) .chat-text p{ margin:0 0 8px; }
:where(.post-content,.entry-content) .chat-text p:last-child{ margin-bottom:0; }
:where(.post-content,.entry-content) .chat-meta{ display:none; }

/* ========= レスポンシブ ========= */
@media (max-width:768px){
  .post-wrapper{ padding:24px 12px; }
  .post-title{ font-size:22px; }
  .post-toc h2{ font-size:16px; }
  :where(.post-content,.entry-content) .chat-bubble{ max-width:86%; }

  .post-pagination{ flex-direction:column; gap:20px; align-items:stretch; }
  .prev-post{ justify-content:flex-start; align-self:flex-start; text-align:left; }
  .next-post{ justify-content:flex-end; align-self:flex-end; text-align:right; }

  .related-grid{ grid-template-columns:1fr 1fr; gap:16px; }
}