/* avatar の見た目を調整 */
.author__avatar img {
  width: 80px;   /* お好みで 64–96px */
  height: 80px;
  border-radius: 16px; /* 0 で角丸なし / 16pxでやわらかい角 */
}

/* 名前の前に「管理人：」を付ける（表示だけ変える） */
.author__name::before {
  content: "管理人：";
  font-weight: 600;
  margin-right: .25em;
}

/* Admin note callout */
.admin-note{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0;
  background: rgba(0,0,0,.03);
}

.admin-note__label{
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 8px;
  opacity: .85;
}

.admin-note p{
  margin: 0;
}

.img-credit{
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
  opacity: 0.75;
}

.post-featured{
  margin: 0 0 18px;
}
.post-featured img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* ===== Home (Recent Posts) teaser: force bigger ===== */

/* teaser枠そのものを広げる */
.layout--home .archive__item-teaser{
  width: 320px !important;      /* ここを 280〜420 で好みに調整 */
  max-width: 320px !important;
  margin-right: 16px !important;
}

/* 画像を枠いっぱいに表示 */
.layout--home .archive__item-teaser img{
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  border-radius: 12px !important;
}

/* 2列グリッドが窮屈なら、1列にして画像を大きく見せる */
.layout--home .entries-grid .grid__item{
  width: 100% !important;
}
/* Home: teaser image should never be cropped */
.layout--home .archive__item-teaser{
  overflow: visible !important;     /* 切り捨てを無効化 */
  height: auto !important;
  max-height: none !important;
}

.layout--home .archive__item-teaser img{
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;   /* 重要：切らずに収める */
}

/* Home: each post item becomes a 2-column row (left image / right text) */
.layout--home .archive__item{
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

/* left column (image) */
.layout--home .archive__item-teaser{
  flex: 0 0 320px !important;   /* 画像の横幅。280〜420で調整 */
  max-width: 320px !important;
  margin: 0 !important;
}

.layout--home .archive__item-teaser img{
  width: 100% !important;
  display: block !important;
  border-radius: 12px !important;
}

/* right column (text) */
.layout--home .archive__item-title,
.layout--home .archive__item-excerpt,
.layout--home .page__meta{
  flex: 1 1 auto !important;
}

/* small screens: stack vertically */
@media (max-width: 900px){
  .layout--home .archive__item{
    flex-direction: column !important;
  }
  .layout--home .archive__item-teaser{
    max-width: 520px !important;
  }
}


/* ===========================
   Mermaid（共通） ※ここから整理版
   =========================== */

/* 図の枠 */
.mermaid-scroll{
  /* もう横スクロール不要なら hidden */
  overflow-x: hidden !important;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

/* Mermaid本体（表示幅を2/3程度にして中央寄せ） */
.mermaid-scroll .mermaid{
  min-width: 0 !important;        /* ← 重要：固定min-widthは完全解除 */
  width: 100% !important;         /* 親にフィット */
  max-width: 66% !important;      /* 見た目を 2/3 に */
  margin: 0 auto !important;      /* 中央寄せ */
}

/* SVGは親にフィットさせる（空白やはみ出しを防ぐ） */
.mermaid-scroll svg{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* ===========================
   Mermaid（フォントサイズ）
   - text と foreignObject の両方に適用
   =========================== */

/* SVG text（※位置計算に関わるので text-anchor は触らない） */
.mermaid-scroll .mermaid text{
  font-size: 14px !important;   /* 14〜16で調整 */
}

/* v10系の foreignObject(div) ラベルにも確実に効かせる */
.mermaid-scroll .mermaid .nodeLabel,
.mermaid-scroll .mermaid .edgeLabel,
.mermaid-scroll .mermaid foreignObject,
.mermaid-scroll .mermaid foreignObject *{
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-align: left !important;

  /* 長文があるときのはみ出し対策 */
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* タイトル等（少しだけ大きく） */
.mermaid-scroll .mermaid .title text,
.mermaid-scroll .mermaid .title,
.mermaid-scroll .mermaid .title *{
  font-size: 16px !important;
  font-weight: 600;
}

/* ノード枠の線を少しだけ見やすく */
.mermaid-scroll .mermaid .node rect,
.mermaid-scroll .mermaid .node polygon{
  stroke-width: 1.2px;
}

/* ★重要：この2つはズレの原因なので削除（=入れない）
   .mermaid-scroll .mermaid .node text { text-anchor: start !important; }
   .mermaid-scroll .mermaid .node text { dominant-baseline: central; }
*/

/* Column (notice) text slightly larger */
.notice--info {
  font-size: calc(1em + 2pt);
}


.page-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.35rem 0 .9rem;
}

.badge{
  display:inline-block;
  padding:.18rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  line-height:1.6;
  border:1px solid rgba(0,0,0,.10);
  background:#f5f7f7;
}

.badge--stage{ background:#eef6ff; }
.badge--org{ background:#eefaf2; }


/* 管理人コメントパネル */
.admin-comment-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 1.5rem 0;
  padding: 16px 18px;
  border: 1px solid #d8d8d8;
  border-radius: 16px;
  background: #fafafa;
}

.admin-comment-icon {
  flex: 0 0 64px;
}

.admin-comment-icon img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

.admin-comment-body {
  flex: 1;
  min-width: 0;
}

.admin-comment-label {
  margin: 0 0 0.45rem 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  letter-spacing: 0.02em;
}

.admin-comment-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.8;
  color: #333;
}

@media (max-width: 600px) {
  .admin-comment-box {
    gap: 12px;
    padding: 14px;
  }

  .admin-comment-icon {
    flex-basis: 52px;
  }

  .admin-comment-icon img {
    width: 52px;
    height: 52px;
  }

  .admin-comment-label {
    font-size: 0.92rem;
  }

  .admin-comment-text {
    font-size: 0.92rem;
    line-height: 1.75;
  }
}