/* ユーティリティ：目次・ブログカード・装飾ボックス・テーブル・パンくず・サイトマップ */
/* ===== 目次 ===== */
.toc-box {
  background: var(--cream3);
  border: 1px solid var(--cream2);
  border-left: 4px solid var(--g2);
  padding: 24px 28px;
  margin: 40px 0;
  border-radius: 2px;
}
.toc-title {
  font-family: 'Noto Serif JP', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .08em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-title::before {
  content: '≡';
  color: var(--g2);
  font-size: 1.1rem;
}
.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}
.toc-list li {
  counter-increment: toc-counter;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .85rem;
  line-height: 1.6;
}
.toc-list li::before {
  content: counter(toc-counter) '.';
  color: var(--g2);
  font-family: 'Oswald', sans-serif;
  font-size: .8rem;
  flex-shrink: 0;
}
.toc-list li a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.toc-list li a:hover {
  color: var(--g2);
  border-bottom-color: var(--g2);
}
.toc-list li.toc-h3 {
  padding-left: 20px;
  font-size: .8rem;
}
.toc-list li.toc-h3::before {
  content: '–';
  color: var(--muted);
}

/* ===== ブログカード ===== */
.blogcard {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--cream3);
  border: 1px solid var(--cream2);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  margin: 32px 0;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.blogcard:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.blogcard-internal { border-left: 4px solid var(--g2); }
.blogcard-external { border-left: 4px solid var(--g3); }
.blogcard-thumb {
  width: 160px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--cream2);
}
.blogcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blogcard-thumb-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  opacity: .3;
}
.blogcard-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.blogcard-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.blogcard-cat {
  font-size: .68rem;
  color: var(--cream);
  background: var(--g2);
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: .05em;
}
.blogcard-date {
  font-size: .68rem;
  color: var(--muted);
  font-family: 'Oswald', sans-serif;
  letter-spacing: .05em;
}
.blogcard-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: .03em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blogcard:hover .blogcard-title { color: var(--g2); }
.blogcard-excerpt {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.8;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blogcard-domain {
  font-size: .65rem;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: .05em;
  opacity: .7;
}

/* recommend-nav */
.recommend-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.recommend-nav .recommend-btn {
  position: static;
  transform: none;
}
.recommend-nav .recommend-dots {
  display: flex;
  gap: 8px;
  margin-top: 0;
}

/* ===== ルビ（ふりがな） ===== */
ruby { ruby-align: center; }
rt { font-size: .55em; color: var(--g2); letter-spacing: .05em; }

/* ===== デコボックス ===== */
.deco-box {
  position: relative;
  border-radius: 4px;
  border: 2px solid #ccc;
  margin: 2em 0;
  padding: 16px 20px 16px;
}
.deco-box-label {
  position: absolute;
  top: -1px;
  left: -2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  padding: 4px 14px 4px 10px;
  border-radius: 4px 0 8px 0;
  line-height: 1;
}
.deco-box-body {
  margin-top: 1.6em;
}
.deco-box-body > *:first-child { margin-top: 0; }
.deco-box-body > *:last-child  { margin-bottom: 0; }

/* 色定義 */
.deco-box.box-check     { border-color: #43A047; } .deco-box.box-check     .deco-box-label { background: #43A047; }
.deco-box.box-comment   { border-color: #1E88E5; } .deco-box.box-comment   .deco-box-label { background: #1E88E5; }
.deco-box.box-point     { border-color: #E53935; } .deco-box.box-point     .deco-box-label { background: #E53935; }
.deco-box.box-tips      { border-color: #00897B; } .deco-box.box-tips      .deco-box-label { background: #00897B; }
.deco-box.box-hint      { border-color: #8E24AA; } .deco-box.box-hint      .deco-box-label { background: #8E24AA; }
.deco-box.box-pickup    { border-color: #FB8C00; } .deco-box.box-pickup    .deco-box-label { background: #FB8C00; }
.deco-box.box-bookmark  { border-color: #F9A825; } .deco-box.box-bookmark  .deco-box-label { background: #F9A825; }
.deco-box.box-memo      { border-color: #D81B60; } .deco-box.box-memo      .deco-box-label { background: #D81B60; }
.deco-box.box-download  { border-color: #039BE5; } .deco-box.box-download  .deco-box-label { background: #039BE5; }
.deco-box.box-break     { border-color: #3949AB; } .deco-box.box-break     .deco-box-label { background: #3949AB; }
.deco-box.box-amazon    { border-color: #F57C00; } .deco-box.box-amazon    .deco-box-label { background: #F57C00; }
.deco-box.box-ok        { border-color: #00ACC1; } .deco-box.box-ok        .deco-box-label { background: #00ACC1; }
.deco-box.box-ng        { border-color: #E53935; } .deco-box.box-ng        .deco-box-label { background: #E53935; }
.deco-box.box-good      { border-color: #43A047; } .deco-box.box-good      .deco-box-label { background: #43A047; }
.deco-box.box-bad       { border-color: #757575; } .deco-box.box-bad       .deco-box-label { background: #757575; }
.deco-box.box-profile   { border-color: #6D4C41; } .deco-box.box-profile   .deco-box-label { background: #6D4C41; }

/* ===== アイコンボックス ===== */
.icon-box {
  position: relative;
  border-radius: 6px;
  border: 1.5px solid #ccc;
  margin: 2em 0;
  padding: 20px 20px 16px;
  text-align: left;
}
.icon-box-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 1.5rem;
  line-height: 1;
}
.icon-box-body > *:first-child { margin-top: 0; }
.icon-box-body > *:last-child  { margin-bottom: 0; }

/* 色定義：border・背景・アイコン色 */
.icon-box.ibox-info     { border-color: #90CAF9; background: #E3F2FD; }
.icon-box.ibox-question { border-color: #FFE082; background: #FFFDE7; }
.icon-box.ibox-warn     { border-color: #EF9A9A; background: #FFF3F3; }
.icon-box.ibox-memo     { border-color: #A5D6A7; background: #F1F8F1; }
.icon-box.ibox-comment  { border-color: #CFD8DC; background: #FAFAFA; }
.icon-box.ibox-ok       { border-color: #80DEEA; background: #F0FDFE; }
.icon-box.ibox-ng       { border-color: #EF9A9A; background: #FFF3F3; }
.icon-box.ibox-good     { border-color: #A5D6A7; background: #F1F8F1; }
.icon-box.ibox-bad      { border-color: #BCAAA4; background: #F5F0EE; }
.icon-box.ibox-check    { border-color: #A5D6A7; background: #F1F8F1; }
.icon-box.ibox-point    { border-color: #EF9A9A; background: #FFF3F3; }
.icon-box.ibox-tips     { border-color: #80CBC4; background: #F0FAFA; }

/* ===== 投稿内テーブル ===== */
.entry-content table,
.post-content table,
.single-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: .9rem;
  line-height: 1.6;
}
.entry-content table th,
.post-content table th,
.single-content table th {
  background: var(--g2);
  color: var(--cream);
  font-weight: 700;
  padding: 10px 14px;
  border: 1px solid var(--g1);
  text-align: left;
}
.entry-content table td,
.post-content table td,
.single-content table td {
  padding: 10px 14px;
  border: 1px solid var(--cream2);
  vertical-align: top;
}
.entry-content table tr:nth-child(even) td,
.post-content table tr:nth-child(even) td,
.single-content table tr:nth-child(even) td {
  background: var(--cream3);
}

/* ===== テーブル背景アイコン ===== */
.bg-icon-cell {
  position: relative;
  display: block;
}
.bg-icon-cell::before {
  content: attr(data-icon);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: .12;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}
.bg-icon-cell .bg-icon-text {
  position: relative;
  z-index: 1;
}

/* 色バリエーション */
.bg-icon-cell.bg-icon-good::before   { opacity: .15; filter: hue-rotate(100deg); }
.bg-icon-cell.bg-icon-bad::before    { opacity: .12; filter: hue-rotate(320deg); }
.bg-icon-cell.bg-icon-ok::before     { opacity: .15; color: #00ACC1; }
.bg-icon-cell.bg-icon-ng::before     { opacity: .12; color: #E53935; }
.bg-icon-cell.bg-icon-check::before  { opacity: .15; }
.bg-icon-cell.bg-icon-cross::before  { opacity: .12; }

/* ===== パンくずリスト（共通） ===== */
.breadcrumb {
  font-size: .72rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(242,234,216,.45);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  opacity: .5;
}
.breadcrumb-item a {
  color: rgba(242,234,216,.45);
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb-item a:hover { color: var(--cream); }
.breadcrumb-item.current { color: rgba(242,234,216,.75); }

/* ===== HTMLサイトマップ ===== */
.html-sitemap { padding: 8px 0; }
.sitemap-heading {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--g2);
  border-left: 3px solid var(--g2);
  padding-left: 12px;
  margin: 32px 0 12px;
}
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sitemap-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: .88rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--cream2);
  transition: background .15s, color .15s;
}
.sitemap-list li a:hover { background: var(--cream3); color: var(--g2); }
.sitemap-list li a::before { content: '›'; margin-right: 8px; color: var(--g3); }
.sitemap-date { font-size: .72rem; color: #999; margin-left: auto; padding-left: 12px; flex-shrink: 0; }