/* =========================
   ARTICLE BLOCKS - unified listbox
   対象: templates/post.php の
   .p-listbox / .p-listbox__label / .p-list / .p-list__item
========================= */

/* 全体の基準色（必要なら上書き） */
:root{
  --lb-border: rgba(16,24,40,.16);
  --lb-text: #101828;
  --lb-muted: rgba(16,24,40,.72);
  --lb-radius: 12px;
  --lb-gap: 1.15rem;
}

/* ボックス：背景は主張しない */
.p-bodywrap .p-listbox{
  margin: var(--lb-gap) 0 calc(var(--lb-gap) + .1rem);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  overflow: hidden; /* ラベル帯の角を揃える */
  background: transparent;
}

/* ラベル帯（添付の見た目） */
.p-bodywrap .p-listbox__label{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .7rem;
  font-weight: 800;
  font-size: .92rem;
  line-height: 1.1;
  color: #fff;
  background: #334155; /* デフォルト（note/中立） */
  border-bottom-right-radius: 10px;
  margin: 0; /* 余計なズレ防止 */
}

/* 中身の余白 */
.p-bodywrap .p-list{
  margin: .75rem 1rem 1rem;
  padding: 0;
  list-style: none;
}

/* リスト項目（行間と視線誘導） */
.p-bodywrap .p-list__item{
  position: relative;
  padding: .4rem 0 .4rem 1.6rem;
  color: var(--lb-text);
  line-height: 1.7;
  border-top: 1px dashed rgba(16,24,40,.12);
}
.p-bodywrap .p-list__item:first-child{
  border-top: 0;
}

/* 先頭マーカー（デフォルト） */
.p-bodywrap .p-list__item::before{
  content: "•";
  position: absolute;
  left: .3rem;
  top: .1rem;
  font-weight: 900;
  color: rgba(16,24,40,.55);
}

/* =========================
   VARIANTS（差別化はボーダー/ラベル色だけ）
========================= */

/* check：青 */
.p-bodywrap .p-listbox--check{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 1px rgba(37,99,235,.12) inset;
}
.p-bodywrap .p-listbox--check .p-listbox__label{
  background: #2563eb;
}
.p-bodywrap .p-listbox--check .p-list__item::before{
  content: "✓";
  color: #2563eb;
  top: .05rem;
}

/* warn：オレンジ */
.p-bodywrap .p-listbox--warn{
  border-color: rgba(245,158,11,.6);
  box-shadow: 0 0 0 1px rgba(245,158,11,.14) inset;
}
.p-bodywrap .p-listbox--warn .p-listbox__label{
  background: #f59e0b;
}
.p-bodywrap .p-listbox--warn .p-list__item::before{
  content: "!";
  color: #f59e0b;
  top: .05rem;
}

/* note：グレー（情報） */
.p-bodywrap .p-listbox--note{
  border-color: rgba(148,163,184,.75);
  box-shadow: 0 0 0 1px rgba(148,163,184,.18) inset;
}
.p-bodywrap .p-listbox--note .p-listbox__label{
  background: #64748b;
}

/* summary：濃い青（結論） */
.p-bodywrap .p-listbox--summary{
  border-color: rgba(30,64,175,.65);
  box-shadow: 0 0 0 1px rgba(30,64,175,.14) inset;
}
.p-bodywrap .p-listbox--summary .p-listbox__label{
  background: #1e40af;
}
.p-bodywrap .p-listbox--summary .p-list__item::before{
  content: "✓";
  color: #1e40af;
  top: .05rem;
}

/* ordered 対応（ordered:true の ol を使う場合） */
.p-bodywrap ol.p-list{
  counter-reset: li;
}
.p-bodywrap ol.p-list .p-list__item{
  padding-left: 2.0rem;
}
.p-bodywrap ol.p-list .p-list__item::before{
  content: counter(li) ".";
  counter-increment: li;
  left: .15rem;
  top: .18rem;
  font-weight: 900;
  color: rgba(16,24,40,.55);
}

/* モバイル微調整 */
@media (max-width: 768px){
  .p-bodywrap .p-list{
    margin: .7rem .9rem .9rem;
  }
  .p-bodywrap .p-list__item{
    padding-left: 1.5rem;
  }
}


/* =========================
   ARTICLE BLOCKS - unified listbox
   対象: templates/post.php の
   .p-listbox / .p-listbox__label / .p-list / .p-list__item
========================= */

/* 全体の基準色（必要なら上書き） */
:root{
  --lb-border: rgba(16,24,40,.16);
  --lb-text: #101828;
  --lb-muted: rgba(16,24,40,.72);
  --lb-radius: 12px;
  --lb-gap: 1.15rem;
}

/* ボックス：背景は主張しない */
.p-bodywrap .p-listbox{
  margin: var(--lb-gap) 0 calc(var(--lb-gap) + .1rem);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  overflow: hidden; /* ラベル帯の角を揃える */
  background: transparent;
}

/* ラベル帯（添付の見た目） */
.p-bodywrap .p-listbox__label{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .7rem;
  font-weight: 800;
  font-size: .92rem;
  line-height: 1.1;
  color: #fff;
  background: #334155; /* デフォルト（note/中立） */
  border-bottom-right-radius: 10px;
  margin: 0; /* 余計なズレ防止 */
}

/* 中身の余白 */
.p-bodywrap .p-list{
  margin: .75rem 1rem 1rem;
  padding: 0;
  list-style: none;
}

/* リスト項目（行間と視線誘導） */
.p-bodywrap .p-list__item{
  position: relative;
  padding: .4rem 0 .4rem 1.6rem;
  color: var(--lb-text);
  line-height: 1.7;
  border-top: 1px dashed rgba(16,24,40,.12);
}
.p-bodywrap .p-list__item:first-child{
  border-top: 0;
}

/* 先頭マーカー（デフォルト） */
.p-bodywrap .p-list__item::before{
  content: "•";
  position: absolute;
  left: .3rem;
  top: .1rem;
  font-weight: 900;
  color: rgba(16,24,40,.55);
}

/* =========================
   VARIANTS（差別化はボーダー/ラベル色だけ）
========================= */

/* check：青 */
.p-bodywrap .p-listbox--check{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 1px rgba(37,99,235,.12) inset;
}
.p-bodywrap .p-listbox--check .p-listbox__label{
  background: #2563eb;
}
.p-bodywrap .p-listbox--check .p-list__item::before{
  content: "✓";
  color: #2563eb;
  top: .05rem;
}

/* warn：オレンジ */
.p-bodywrap .p-listbox--warn{
  border-color: rgba(245,158,11,.6);
  box-shadow: 0 0 0 1px rgba(245,158,11,.14) inset;
}
.p-bodywrap .p-listbox--warn .p-listbox__label{
  background: #f59e0b;
}
.p-bodywrap .p-listbox--warn .p-list__item::before{
  content: "!";
  color: #f59e0b;
  top: .05rem;
}

/* note：グレー（情報） */
.p-bodywrap .p-listbox--note{
  border-color: rgba(148,163,184,.75);
  box-shadow: 0 0 0 1px rgba(148,163,184,.18) inset;
}
.p-bodywrap .p-listbox--note .p-listbox__label{
  background: #64748b;
}

/* summary：濃い青（結論） */
.p-bodywrap .p-listbox--summary{
  border-color: rgba(30,64,175,.65);
  box-shadow: 0 0 0 1px rgba(30,64,175,.14) inset;
}
.p-bodywrap .p-listbox--summary .p-listbox__label{
  background: #1e40af;
}
.p-bodywrap .p-listbox--summary .p-list__item::before{
  content: "✓";
  color: #1e40af;
  top: .05rem;
}

/* ordered 対応（ordered:true の ol を使う場合） */
.p-bodywrap ol.p-list{
  counter-reset: li;
}
.p-bodywrap ol.p-list .p-list__item{
  padding-left: 2.0rem;
}
.p-bodywrap ol.p-list .p-list__item::before{
  content: counter(li) ".";
  counter-increment: li;
  left: .15rem;
  top: .18rem;
  font-weight: 900;
  color: rgba(16,24,40,.55);
}

/* モバイル微調整 */
@media (max-width: 768px){
  .p-bodywrap .p-list{
    margin: .7rem .9rem .9rem;
  }
  .p-bodywrap .p-list__item{
    padding-left: 1.5rem;
  }
}















/* =========================
  404 Page
========================= */

.p-404 {
  background: var(--bg);
}

.p-404__code {
  font-size: clamp(56px, 10vw, 88px);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
}

.p-404__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.p-404__lead {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
}

/* スマホで押しやすく */
.p-404__actions .btn {
  min-width: 200px;
}









/* =========================
  Related posts（記事末尾）
========================= */
.p-related__title{
  font-weight: 800;
  color: var(--text);
  font-size: 1.05rem;
}

.p-related__card{
  border: 1px solid var(--border);
}

.p-related__cardTitle{
  font-weight: 800;
  color: var(--text);
  line-height: 1.45;
}

.p-related__cardDesc{
  line-height: 1.75;
}