/* 盤面図を見出しの下に広く出す。一覧の 40px サムネは変えない。
   面の色はインディー型の変数のまま。文字色は白背景部品に継承させない。 */
body.parabox-site .profile {
  display: block;
  background: var(--pi-panel);
  border-color: var(--pi-line);
}
body.parabox-site .profile .portrait {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 1px solid var(--pi-line);
  box-shadow: 6px 6px 0 #0b0a08;
  margin: 0 0 12px;
}
body.parabox-site .profile-name,
body.parabox-site .profile-name small {
  color: var(--pi-paper);
}
body.parabox-site .profile-name small {
  color: var(--pi-muted);
}

/* サイドは出さないが HTML は残る。白地のまま紙色を継承すると検査が落ちる。 */
body.parabox-site .side-box {
  background: var(--pi-panel);
  border-color: var(--pi-line);
}
body.parabox-site .side .cat-name {
  background: var(--pi-bg);
  color: var(--pi-paper);
  border-left-color: var(--pi-green);
}
body.parabox-site .side-menu li {
  border-bottom-color: var(--pi-line);
}
body.parabox-site .side-menu a {
  color: var(--pi-paper);
}
/* 広告ラベルは #666 固定。暗い地ではコントラスト比を確保する。 */
body.parabox-site .ad-label {
  color: var(--pi-muted);
}

/* 白いカードに紙色のリンクが乗らないようにする。共通の .p-card は白。 */
body.parabox-site a.p-card,
body.parabox-site a.p-card:hover {
  background: var(--pi-panel);
  color: var(--pi-paper);
  border: 1px solid var(--pi-line);
  text-decoration: none;
  box-shadow: 4px 4px 0 #080705;
}
body.parabox-site a.p-card small {
  color: var(--pi-muted);
}
body.parabox-site a.p-card.is-primary {
  border-color: #8a7040;
  border-left: 4px solid #e04890;
}
body.parabox-site a.p-card:hover {
  border-color: #e6c36a;
  background: #24211a;
}
body.parabox-site .c-faq h3,
body.parabox-site .c-faq p,
body.parabox-site ol.steps > li {
  color: var(--pi-paper);
}
body.parabox-site .c-next a {
  background: var(--pi-panel);
  color: var(--pi-paper);
  border-color: var(--pi-line);
  text-decoration: none;
}
body.parabox-site .c-next a small {
  color: var(--pi-muted);
}
body.parabox-site .c-next a:hover {
  border-color: #e6c36a;
}

/* 目次の外枠は、実在するリンクの幅まで。空の列は作らない。 */
body.parabox-site .toc-grid {
  width: fit-content;
  max-width: 100%;
}
body.parabox-site .toc-grid ul {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  max-width: 100%;
}
body.parabox-site .toc-grid li {
  flex: 0 0 auto;
  min-width: 7.2rem;
  max-width: 11rem;
}
@media (min-width: 700px) {
  body.parabox-site .toc-grid ul {
    grid-template-columns: none;
  }
}
body.parabox-site .c-toc {
  width: auto;
  max-width: 100%;
  table-layout: auto;
}

/* 本文の太字は黄色のマーカー背景を消して暗色背景上で高いコントラストを保つ */
body.parabox-site .prose strong,
body.parabox-site strong {
  background: none;
  color: #fff6dc;
  border-bottom: 2px solid rgba(230, 195, 106, 0.55);
}