/* PandaGames article-detail styles — loaded only on single posts */

/* Easy Table of Contents — PandaGames article navigation */
#ez-toc-container {
  width: 100% !important;
  box-sizing: border-box;
  margin: 28px 0 34px !important;
  padding: 18px 20px 19px !important;
  background: #f7fbfe !important;
  border: 1px solid #cfe0ec !important;
  border-left: 5px solid var(--pg-blue) !important;
  border-radius: 16px !important;
  box-shadow: 0 7px 22px rgba(23,105,170,.05) !important;
}

#ez-toc-container .ez-toc-title-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  margin: 0 0 12px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid #d8e6ef;
}

#ez-toc-container .ez-toc-title {
  margin: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

#ez-toc-container .ez-toc-title::after {
  content: "この記事の目次";
  color: var(--pg-ink);
  font-size: 16px;
  font-weight: 900;
}

#ez-toc-container .ez-toc-title::before {
  content: "CONTENTS";
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-right: 9px;
  padding: 0 8px;
  color: #fff;
  background: var(--pg-blue);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  vertical-align: 2px;
}

#ez-toc-container .ez-toc-title-toggle a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  color: var(--pg-blue-dark) !important;
  background: #fff !important;
  border: 1px solid #c9dce9 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#ez-toc-container nav > ul,
#ez-toc-container nav ul {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

/* H1 is the article title, so keep it out of the visible TOC and promote its children. */
#ez-toc-container .ez-toc-list-level-1 > .ez-toc-heading-level-1 > a {
  display: none !important;
}

#ez-toc-container .ez-toc-list-level-1 > .ez-toc-heading-level-1 > .ez-toc-list-level-2 {
  margin: 0 !important;
  padding: 0 !important;
}

#ez-toc-container .ez-toc-heading-level-2 {
  margin: 0 !important;
  border-top: 1px solid #e2ebf1;
}

#ez-toc-container .ez-toc-heading-level-2:first-child {
  border-top: 0;
}

#ez-toc-container .ez-toc-heading-level-2 > a {
  position: relative;
  display: block !important;
  padding: 9px 25px 9px 17px !important;
  color: #294b62 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 800 !important;
}

#ez-toc-container .ez-toc-heading-level-2 > a::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 17px;
  width: 6px;
  height: 6px;
  background: var(--pg-blue);
  border-radius: 50%;
}

#ez-toc-container .ez-toc-heading-level-2 > a::after {
  content: "›";
  position: absolute;
  right: 4px;
  top: 8px;
  color: #8ba2b2;
  font-size: 19px;
  font-weight: 700;
}

#ez-toc-container .ez-toc-list-level-3 {
  margin: -2px 0 7px 17px !important;
  padding: 0 0 0 12px !important;
  border-left: 2px solid #d7e6ef;
}

#ez-toc-container .ez-toc-heading-level-3 > a {
  display: block !important;
  padding: 5px 6px !important;
  color: #60798a !important;
  text-decoration: none !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
}

#ez-toc-container a:hover,
#ez-toc-container a:focus-visible {
  color: var(--pg-blue) !important;
  text-decoration: underline !important;
}

@media (max-width: 767px) {
  #ez-toc-container {
    margin: 24px 0 30px !important;
    padding: 15px 14px 16px !important;
    border-radius: 14px !important;
  }

  #ez-toc-container .ez-toc-title::after {
    font-size: 15px;
  }

  #ez-toc-container .ez-toc-heading-level-2 > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 13px !important;
  }
}

/* PandaGames article tables — all single posts, including legacy articles */
.cps-post-main table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--pg-ink);
  background: #fff;
  border: 1px solid #d7e4ee;
  border-radius: 14px;
  overflow: hidden;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.cps-post-main table th,
.cps-post-main table td {
  padding: 12px 14px !important;
  border: 0 !important;
  border-right: 1px solid #dce7ef !important;
  border-bottom: 1px solid #dce7ef !important;
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}

.cps-post-main table tr > *:last-child {
  border-right: 0 !important;
}

.cps-post-main table tr:last-child > * {
  border-bottom: 0 !important;
}

.cps-post-main table th {
  color: #173c57 !important;
  background: #edf6fc !important;
  font-weight: 900 !important;
}

.cps-post-main table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.cps-post-main div:has(> table) {
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #9abbd2 #edf4f8;
}

.cps-post-main div:has(> table)::-webkit-scrollbar,
.cps-post-main table:has(tr > :nth-child(3))::-webkit-scrollbar {
  height: 7px;
}

.cps-post-main div:has(> table)::-webkit-scrollbar-track,
.cps-post-main table:has(tr > :nth-child(3))::-webkit-scrollbar-track {
  background: #edf4f8;
  border-radius: 999px;
}

.cps-post-main div:has(> table)::-webkit-scrollbar-thumb,
.cps-post-main table:has(tr > :nth-child(3))::-webkit-scrollbar-thumb {
  background: #9abbd2;
  border-radius: 999px;
}

@media (max-width: 767px) {
  /* Two-column spec/rating tables should fit the phone instead of forcing sideways scrolling. */
  .cps-post-main table:not(:has(tr > :nth-child(3))) {
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 13px !important;
  }

  .cps-post-main table:not(:has(tr > :nth-child(3))) th {
    width: 35% !important;
  }

  .cps-post-main table:not(:has(tr > :nth-child(3))) th,
  .cps-post-main table:not(:has(tr > :nth-child(3))) td {
    padding: 10px 11px !important;
  }

  /* True comparison tables keep horizontal scroll, with the first column held in view. */
  .cps-post-main table:has(tr > :nth-child(3)) {
    display: block;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }

  .cps-post-main div:has(> table:has(tr > :nth-child(3)))::before {
    content: "横にスクロールして比較できます →";
    display: block;
    width: max-content;
    margin: 0 0 7px auto;
    color: #667b8a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
  }

  .cps-post-main table:has(tr > :nth-child(3)) tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 112px;
    box-shadow: 1px 0 0 #dce7ef;
  }

  .cps-post-main table:has(tr > :nth-child(3)) td:first-child {
    background: #f7fbfe !important;
    font-weight: 800;
  }
}

/* =========================================================
   PandaGames universal article normalization
   Legacy posts and current posts share the same visual system.
   Post content itself is not rewritten.
   ========================================================= */
.single-post {
  --pg-article-accent: #1769aa;
  --pg-article-accent-soft: #f4f9fd;
  --pg-article-accent-line: #d7e4ee;
}

.single-post.pg-article-type-ranking {
  --pg-article-accent: #c89b18;
  --pg-article-accent-soft: #fff9e8;
  --pg-article-accent-line: #eadca8;
}

.single-post.pg-article-type-comparison {
  --pg-article-accent: #2e8b57;
  --pg-article-accent-soft: #f3fbf6;
  --pg-article-accent-line: #cfe7d8;
}

.single-post.pg-article-type-guide {
  --pg-article-accent: #f39c12;
  --pg-article-accent-soft: #fff8ec;
  --pg-article-accent-line: #f0ddb8;
}

.single-post.pg-article-type-news {
  --pg-article-accent: #c0392b;
  --pg-article-accent-soft: #fff6f5;
  --pg-article-accent-line: #ecd2ce;
}

/* Legacy theme title -> same title-card language used by current articles. */
.single-post.pg-legacy-article.pg-has-content-h1 .cps-post-header {
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.single-post.pg-legacy-article.pg-has-content-h1 .cps-post-header::before {
  display: none !important;
}

.single-post.pg-legacy-article:not(.pg-has-content-h1) .cps-post-header {
  position: relative;
  margin: 0 0 30px !important;
  padding: 22px 24px 23px !important;
  background: linear-gradient(135deg,#fff 0%,var(--pg-article-accent-soft) 100%) !important;
  border: 1px solid var(--pg-article-accent-line) !important;
  border-left: 8px solid var(--pg-article-accent) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 22px rgba(32,32,32,.06) !important;
}

.single-post.pg-legacy-article .cps-post-header::before,
.single-post.pg-legacy-article .pg-article-content > h1::before {
  content: "PandaGames 記事";
  display: table;
  margin: 0 0 12px;
  padding: 6px 11px;
  color: #fff;
  background: var(--pg-article-accent);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .03em;
}

.single-post.pg-article-type-review.pg-legacy-article .cps-post-header::before,
.single-post.pg-article-type-review.pg-legacy-article .pg-article-content > h1::before { content: "PandaGames レビュー"; }
.single-post.pg-article-type-ranking.pg-legacy-article .cps-post-header::before,
.single-post.pg-article-type-ranking.pg-legacy-article .pg-article-content > h1::before { content: "PandaGames ランキング"; }
.single-post.pg-article-type-comparison.pg-legacy-article .cps-post-header::before,
.single-post.pg-article-type-comparison.pg-legacy-article .pg-article-content > h1::before { content: "PandaGames 比較"; }
.single-post.pg-article-type-guide.pg-legacy-article .cps-post-header::before,
.single-post.pg-article-type-guide.pg-legacy-article .pg-article-content > h1::before { content: "PandaGames 攻略・ガイド"; }
.single-post.pg-article-type-news.pg-legacy-article .cps-post-header::before,
.single-post.pg-article-type-news.pg-legacy-article .pg-article-content > h1::before { content: "PandaGames ニュース"; }

.single-post.pg-legacy-article .cps-post-header .cps-post-title {
  margin: 0 !important;
  padding: 0 !important;
  color: #202020 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: clamp(25px,4.4vw,34px) !important;
  line-height: 1.5 !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
}

.single-post.pg-legacy-article .cps-post-header .cps-post-cat a {
  background: var(--pg-article-accent) !important;
  border-color: var(--pg-article-accent) !important;
  color: #fff !important;
}

/* Standalone H1 inside older post content. */
.single-post.pg-legacy-article .pg-article-content > h1 {
  margin: 0 0 30px !important;
  padding: 22px 24px 24px !important;
  color: #202020 !important;
  background: linear-gradient(135deg,#fff 0%,var(--pg-article-accent-soft) 100%) !important;
  border: 1px solid var(--pg-article-accent-line) !important;
  border-left: 8px solid var(--pg-article-accent) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 22px rgba(32,32,32,.06) !important;
  font-size: clamp(25px,4.4vw,34px) !important;
  line-height: 1.5 !important;
  font-weight: 900 !important;
}

/* Current title cards inherit the article-type accent without changing their text/content. */
.single-post #article-body > div:first-child:has(> h1) {
  background: linear-gradient(135deg,#fff 0%,var(--pg-article-accent-soft) 100%) !important;
  border-color: var(--pg-article-accent-line) !important;
  border-left-color: var(--pg-article-accent) !important;
  box-shadow: 0 8px 22px rgba(32,32,32,.06) !important;
}

.single-post #article-body > div:first-child:has(> h1) > div:first-child {
  background: var(--pg-article-accent) !important;
  color: #fff !important;
}

/* Heading hierarchy: one visual grammar across every article. */
.single-post .pg-article-content h2 {
  margin: 44px 0 18px !important;
  padding: 10px 14px 11px !important;
  color: #202020 !important;
  background: #fff !important;
  border: 0 !important;
  border-left: 7px solid var(--pg-article-accent) !important;
  border-bottom: 2px solid var(--pg-article-accent-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 26px !important;
  line-height: 1.55 !important;
  font-weight: 900 !important;
}

.single-post .pg-article-content h3 {
  margin: 30px 0 13px !important;
  padding: 0 0 8px !important;
  color: #202020 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pg-article-accent-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 21px !important;
  line-height: 1.6 !important;
  font-weight: 900 !important;
}

.single-post .pg-article-content h3 > span[style*="color"] {
  color: var(--pg-article-accent) !important;
}

.single-post .pg-article-content h4 {
  margin: 24px 0 10px !important;
  padding: 0 0 0 11px !important;
  color: #263c4c !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid var(--pg-article-accent) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 900 !important;
}

.single-post .pg-article-content > p,
.single-post .pg-article-content > article > p,
.single-post .pg-article-content #article-body > p {
  color: #2b2b2b !important;
  font-size: 16px !important;
  line-height: 2 !important;
}

.single-post .pg-article-content > ul,
.single-post .pg-article-content > ol,
.single-post .pg-article-content #article-body > ul,
.single-post .pg-article-content #article-body > ol {
  margin: 18px 0 24px !important;
  padding-left: 1.45em !important;
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.9;
}

.single-post .pg-article-content li + li {
  margin-top: 5px;
}

.single-post .pg-article-content p > a:not([class]),
.single-post .pg-article-content li > a:not([class]) {
  color: var(--pg-article-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Images / captions: standardize old inline decoration without changing the images. */
.single-post .pg-article-content figure {
  margin: 24px 0 30px !important;
  text-align: center !important;
}

.single-post .pg-article-content figure img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid #e3e3e3 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.single-post .pg-article-content figcaption,
.single-post .pg-article-content .wp-caption-text {
  margin: 8px 0 0 !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

.single-post .pg-article-content blockquote {
  margin: 24px 0 !important;
  padding: 17px 19px !important;
  color: #415563 !important;
  background: var(--pg-article-accent-soft) !important;
  border: 0 !important;
  border-left: 5px solid var(--pg-article-accent) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Common inline cards generated by older PandaGames article templates. */
.single-post .pg-article-content div[style*="#f7f7f7"][style*="border-left"] {
  background: #f7f7f7 !important;
  border-color: #d7d7d7 !important;
  border-left: 7px solid #202020 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.single-post .pg-article-content div[style*="#f3fbf6"] {
  background: #f3fbf6 !important;
  border-color: #cfe7d8 !important;
  border-left-color: #2e8b57 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.single-post .pg-article-content div[style*="#fff6f6"],
.single-post .pg-article-content div[style*="#fff3f3"] {
  background: #fff6f6 !important;
  border-color: #efd5d5 !important;
  border-left-color: #c83d3d !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.single-post .pg-article-content div[style*="#f8fbff"]:not(:has(h1)),
.single-post .pg-article-content div[style*="#f4f9fd"]:not(:has(h1)) {
  background: #f8fbff !important;
  border-color: #d7e4ee !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.035) !important;
}

/* FAQ-like legacy cards using PandaGames' standard border. */
.single-post .pg-article-content #article-body > div[style*="#d7e4ee"][style*="border-radius"]:not(:has(table)):not(:has(h1)) {
  background: #fff !important;
  border: 1px solid #d7e4ee !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* CTA buttons follow the article-type accent. */
.single-post .pg-article-content a[style*="display:block"][style*="background"],
.single-post .pg-article-content a[style*="display: block"][style*="background"] {
  background: var(--pg-article-accent) !important;
  color: #fff !important;
  border-color: var(--pg-article-accent) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* Download guidance remains the shared yellow conversion component. */
.single-post .pg-article-content p[style*="#fff2a8"] {
  margin: 28px 0 10px !important;
  padding: 10px 12px !important;
  color: #202020 !important;
  background: #fff2a8 !important;
  border-radius: 8px !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* AppReach: one consistent app-install card across old and new reviews. */
.single-post .pg-article-content #appreach-box {
  box-sizing: border-box;
  display: flow-root;
  width: 100%;
  margin: 0 auto 30px !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid #d7e4ee !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 16px rgba(32,32,32,.04) !important;
}

.single-post .pg-article-content #appreach-image {
  border: 0 !important;
  border-radius: 18% !important;
  box-shadow: none !important;
}

.single-post .pg-article-content #appreach-appname {
  color: #202020 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 900 !important;
}

.single-post .pg-article-content .appreach-links img {
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .single-post.pg-legacy-article .cps-post-header,
  .single-post.pg-legacy-article .pg-article-content > h1 {
    margin-bottom: 24px !important;
    padding: 18px 16px 20px !important;
    border-left-width: 6px !important;
    border-radius: 17px !important;
  }

  .single-post.pg-legacy-article .cps-post-header .cps-post-title,
  .single-post.pg-legacy-article .pg-article-content > h1 {
    font-size: clamp(24px,7vw,30px) !important;
  }

  .single-post .pg-article-content h2 {
    margin-top: 38px !important;
    padding: 9px 11px 10px !important;
    border-left-width: 6px !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
  }

  .single-post .pg-article-content h3 {
    margin-top: 27px !important;
    font-size: 19px !important;
  }

  .single-post .pg-article-content h4 {
    font-size: 17px !important;
  }

  .single-post .pg-article-content figure {
    margin: 20px 0 26px !important;
  }

  .single-post .pg-article-content #appreach-box {
    padding: 10px !important;
  }

  .single-post .pg-article-content #appreach-image {
    max-width: 84px !important;
  }

  .single-post .pg-article-content .appreach-links {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* If a legacy post already owns its H1, keep the theme meta header compact and let the content H1 be the title card. */
.single-post.pg-legacy-article.pg-has-content-h1 .cps-post-header {
  margin-bottom: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.single-post.pg-legacy-article.pg-has-content-h1 .cps-post-header::before {
  display: none !important;
}

/* Article-type accent also reaches navigation and comparison surfaces. */
.single-post #ez-toc-container {
  background: var(--pg-article-accent-soft) !important;
  border-color: var(--pg-article-accent-line) !important;
  border-left-color: var(--pg-article-accent) !important;
}

.single-post #ez-toc-container .ez-toc-title::before,
.single-post #ez-toc-container .ez-toc-heading-level-2 > a::before {
  background: var(--pg-article-accent) !important;
}

.single-post #ez-toc-container a:hover,
.single-post #ez-toc-container a:focus-visible {
  color: var(--pg-article-accent) !important;
}

.single-post .cps-post-main table {
  border-color: var(--pg-article-accent-line) !important;
}

.single-post .cps-post-main table th,
.single-post .cps-post-main table td {
  border-color: var(--pg-article-accent-line) !important;
}

.single-post .cps-post-main table th {
  color: #263c4c !important;
  background: var(--pg-article-accent-soft) !important;
}

/* One marker treatment across legacy templates. */
.single-post .pg-article-content .marker,
.single-post .pg-article-content .marker2,
.single-post .pg-article-content span[style*="#fff2a8"] {
  color: inherit !important;
  background: linear-gradient(transparent 60%,#fff2a8 60%) !important;
  font-weight: 800;
}