/* ===================================
   SeaPorch - ブログ専用スタイル（記事ページ + シンタックスハイライト）
   =================================== */

/* --- 一覧ページ --- */
.blog-index {
  padding: 80px 0 100px;
  background: var(--color-bg);
}

.blog-index__more {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 720px) {
  .blog-index .posts-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 記事ページ --- */
.article {
  padding: 80px 0 100px;
  background: var(--color-bg);
}

.article__container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.article__header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-line);
}

.article__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.article__date {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
}

.article__tag {
  background: var(--color-foam);
  color: var(--color-deep);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.article__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  color: var(--color-deep);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.article__source {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.article__source a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 本文 --- */
.article__body {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--color-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.article__body h1,
.article__body h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-deep);
  margin: 56px 0 20px;
  padding: 8px 0 8px 16px;
  border-left: 4px solid var(--color-accent);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.article__body h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-deep);
  margin: 36px 0 14px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.article__body h4 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-deep);
  margin: 28px 0 12px;
}

.article__body p {
  margin-bottom: 18px;
}

.article__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article__body a:hover {
  color: var(--color-accent-dark);
}

.article__body ul,
.article__body ol {
  margin: 0 0 20px 1.8rem;
}

.article__body li {
  margin-bottom: 6px;
  list-style: disc;
}

.article__body ol li {
  list-style: decimal;
}

.article__body blockquote {
  border-left: 4px solid var(--color-foam);
  padding: 12px 20px;
  margin: 24px 0;
  background: var(--color-bg-alt);
  color: var(--color-muted);
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

.article__body hr {
  border: 0;
  height: 1px;
  background: var(--color-line);
  margin: 40px 0;
}

.article__body img {
  border-radius: 10px;
  margin: 24px auto;
  box-shadow: var(--shadow-sm);
  display: block;
}

.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.9rem;
}

.article__body th,
.article__body td {
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  text-align: left;
}

.article__body th {
  background: var(--color-bg-alt);
  color: var(--color-deep);
  font-weight: 700;
}

.article__body tr:nth-child(even) td {
  background: rgba(244, 248, 251, 0.5);
}

/* インラインコード */
.article__body code {
  background: var(--color-bg-alt);
  color: var(--color-deep);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
}

/* QiitaのアンカーリンクSVG等の不要要素を抑止 */
.article__body .fragment {
  display: none;
}

.article__body h1 > a[href^="#"],
.article__body h2 > a[href^="#"],
.article__body h3 > a[href^="#"],
.article__body h4 > a[href^="#"] {
  display: none;
}

/* --- フッターナビ --- */
.article__footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--color-deep);
  font-weight: 700;
}

.article__back:hover {
  color: var(--color-accent);
}

.article__qiita-link {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.article__qiita-link a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ===================================
   コードブロック（Qiita rendered_body / Pygments / Rouge 互換）
   =================================== */

.article__body .code-frame {
  margin: 24px 0;
  border-radius: 10px;
  overflow: hidden;
  background: #1a2b42;
  box-shadow: var(--shadow-sm);
}

/* data-lang 属性があればコードブロック上部に言語ラベルを表示 */
.article__body .code-frame[data-lang]::before {
  content: attr(data-lang);
  display: block;
  background: rgba(255, 255, 255, 0.05);
  color: #cfe8f3;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  padding: 6px 16px;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-transform: lowercase;
}

.article__body .code-frame > .highlight,
.article__body .code-frame > pre {
  margin: 0;
}

.article__body .code-lang {
  background: rgba(255, 255, 255, 0.05);
  color: #cfe8f3;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  padding: 6px 16px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.article__body .code-frame pre,
.article__body pre {
  background: #1a2b42;
  color: #e8eef5;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  margin: 0;
}

.article__body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

.article__body :not(pre) > code {
  white-space: nowrap;
}

/* Pygments / Rouge トークン色（暗背景向け） */
.article__body .highlight .c,
.article__body .highlight .c1,
.article__body .highlight .cm,
.article__body .highlight .cs,
.article__body .highlight .cp { color: #8a9bb0; font-style: italic; } /* Comment */
.article__body .highlight .k,
.article__body .highlight .kc,
.article__body .highlight .kd,
.article__body .highlight .kn,
.article__body .highlight .kp,
.article__body .highlight .kr,
.article__body .highlight .kt { color: #ff7e9c; } /* Keyword */
.article__body .highlight .s,
.article__body .highlight .s1,
.article__body .highlight .s2,
.article__body .highlight .sb,
.article__body .highlight .sc,
.article__body .highlight .sd,
.article__body .highlight .se,
.article__body .highlight .sh,
.article__body .highlight .si,
.article__body .highlight .sr,
.article__body .highlight .ss { color: #ffd479; } /* String */
.article__body .highlight .m,
.article__body .highlight .mi,
.article__body .highlight .mf,
.article__body .highlight .mh,
.article__body .highlight .mo,
.article__body .highlight .il { color: #ffaf7a; } /* Number */
.article__body .highlight .o,
.article__body .highlight .ow { color: #7cd1f1; } /* Operator */
.article__body .highlight .n,
.article__body .highlight .nx,
.article__body .highlight .nv,
.article__body .highlight .vc,
.article__body .highlight .vg,
.article__body .highlight .vi { color: #e8eef5; } /* Name */
.article__body .highlight .nf,
.article__body .highlight .nb,
.article__body .highlight .bp { color: #82e0a1; } /* Function / Builtin */
.article__body .highlight .nc,
.article__body .highlight .ne,
.article__body .highlight .nn { color: #ffd479; } /* Class */
.article__body .highlight .nt { color: #ff7e9c; } /* HTML tag */
.article__body .highlight .na { color: #7cd1f1; } /* HTML attr */
.article__body .highlight .p { color: #cfe8f3; } /* Punctuation */
.article__body .highlight .w { color: inherit; } /* Whitespace */
.article__body .highlight .err { color: #ff7e5f; background: rgba(255,126,95,0.1); }
.article__body .highlight .gh,
.article__body .highlight .gu { color: #cfe8f3; font-weight: bold; }
.article__body .highlight .gd { color: #ff7e9c; }
.article__body .highlight .gi { color: #82e0a1; }