/* シコ速 — 記事ページ / ピンク基調
 *
 * publisher が注入する部品CSS（サイト内ナビ・コメント欄・画像・
 * 姉妹サイト等）は <style> でページ後方に置かれるため、同じセレクタだと
 * 後勝ちでこちらが打ち消される。衝突するものは "body " を前置して
 * 詳細度で勝たせている（!important はあとで上書きできなくなるので使わない）。
 */
:root{
  --rose:#e8467c; --rose-deep:#b91d55; --rose-soft:#ffd9e6; --rose-pale:#fff4f8;
  --ink:#3b2b33; --muted:#9b8590; --line:#f3c9da; --card:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Hiragino Sans","Meiryo",system-ui,sans-serif;
  background:
    radial-gradient(1100px 520px at 50% -180px,#ffe3ee 0,rgba(255,227,238,0) 70%),
    linear-gradient(180deg,#fff7fa 0,#fdeef4 100%);
  background-attachment:fixed;
  color:var(--ink);font-size:14px;line-height:1.8;
}
a{color:var(--rose-deep)}

/* --- ヘッダー --- */
.thread-header{
  position:relative;overflow:hidden;padding:20px 16px 22px;color:#fff;
  background:linear-gradient(135deg,#ff7fae 0%,var(--rose) 48%,#a8175a 100%);
  box-shadow:0 6px 22px rgba(184,29,85,.24);
}
.thread-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 150px at 12% -30%,rgba(255,255,255,.4),transparent 70%);
}
.thread-header a{
  position:relative;color:#ffe6f0;font-size:.82rem;text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.5);
}
.thread-header a:hover{color:#fff}
.thread-header h1{
  position:relative;margin-top:10px;font-size:clamp(1.05rem,3.6vw,1.45rem);
  font-weight:800;line-height:1.55;letter-spacing:.01em;
  text-shadow:0 2px 10px rgba(120,10,55,.35);
}

/* --- サイト内ナビ（部品CSSと衝突するので body を前置） --- */
body .site-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  padding:9px 12px;margin:0 auto;max-width:900px;
  background:rgba(255,255,255,.86);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
body .site-nav a{
  flex:0 1 auto;min-width:0;padding:5px 14px;
  border:1px solid var(--line);border-radius:999px;
  font-size:.82rem;font-weight:700;text-align:center;text-decoration:none;
  color:var(--rose-deep);background:var(--rose-pale);opacity:1;
}
body .site-nav a:hover,
body .site-nav a.is-current{
  background:var(--rose);border-color:var(--rose);color:#fff;opacity:1;
}

/* --- 本文 --- */
.thread-body{max-width:820px;margin:18px auto;padding:0 12px}
.post-container{
  position:relative;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--rose);
  border-radius:10px;margin-bottom:10px;padding:12px 16px;
  box-shadow:0 3px 12px rgba(184,29,85,.07);
}
.post-container:hover{box-shadow:0 5px 18px rgba(184,29,85,.13)}
.id-line{font-size:.76rem;color:var(--muted);margin-bottom:5px}
.user-name{color:var(--rose);font-weight:700}
.post-content{font-size:.95rem;white-space:pre-wrap;word-break:break-word}
.anker{color:var(--rose-deep);text-decoration:none;border-bottom:1px dotted currentColor}
.anker:hover{background:var(--rose-soft)}

/* `>>N` の飛び先が追従ナビの下に潜らないようにする。
   sticky なナビがあると、アンカーはレスをページ最上部へ送るので、
   ナビがちょうどそのレスを覆ってしまう。ジャンプ自体はしているのに
   「リンクが効いていない」ように見える（2026-09-06、ユーザー指摘）。
   ナビの高さぶん余白を取る。狭い画面ではナビが2段に折り返すので厚くする。 */
html{scroll-behavior:smooth}
.post-container{scroll-margin-top:64px}
/* 飛んだ先を一瞬光らせる。どのレスに来たのかが分かるように */
.post-container:target{
  border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-soft);
  animation:ankerflash 1.4s ease-out 1;
}
@keyframes ankerflash{
  from{background:var(--rose-pale)}
  to{background:var(--card)}
}

/* 画像はレスの中（本文の <p> の中にも入るので span + display:block）。
   部品CSS の .gravure-image と衝突するので .post-container を前置する。 */
.post-container .gravure-image{display:block;margin:10px 0 2px;text-align:center}
.post-container .gravure-image img{
  max-width:100%;max-height:70vh;height:auto;
  border-radius:8px;background:var(--rose-pale);
  border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(184,29,85,.16);
}

/* --- 前後の記事 --- */
.thread-nav{display:flex;align-items:stretch;gap:10px;padding:16px 12px;max-width:820px;margin:0 auto}
.nav-card{
  display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;
  padding:12px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);text-decoration:none;
  box-shadow:0 2px 8px rgba(184,29,85,.07);
}
.nav-card:hover:not(.nav-disabled){background:var(--rose-pale);border-color:var(--rose)}
.nav-disabled{opacity:.28;pointer-events:none}
.nav-direction{font-size:.72rem;color:var(--rose);font-weight:700;margin-bottom:4px}
.nav-title{font-size:.88rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-index{flex:0 0 92px;align-items:center;text-align:center}
.nav-index .nav-direction{font-size:.85rem;margin-bottom:0}
.nav-next{text-align:right}

/* --- 関連記事 --- */
.related-articles{
  max-width:820px;margin:14px auto;padding:14px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 3px 12px rgba(184,29,85,.07);
}
.related-label{
  font-size:1rem;font-weight:800;color:var(--rose-deep);
  border-left:5px solid var(--rose);padding-left:9px;margin-bottom:10px;
}
.related-list{list-style:none}
.related-list li{border-bottom:1px dashed var(--line)}
.related-list li:last-child{border-bottom:none}
.related-list li a{
  display:block;padding:10px 4px;color:var(--rose-deep);
  text-decoration:none;font-size:.9rem;line-height:1.65;
}
.related-list li a:hover{background:var(--rose-pale)}

.thread-footer{text-align:center;padding:14px 24px 28px;color:var(--muted);font-size:.8rem}
.thread-copyright{color:var(--muted)}
.contact-link{color:var(--rose-deep)}

/* --- 注入部品の配色合わせ（body 前置で詳細度を上げる） --- */
body .comments-section,body .sister-sites{border-color:var(--line);border-radius:12px}
body .comments-label{color:var(--rose-deep)}
body .vote-btn,body .reply-btn{border-color:var(--line);color:var(--rose-deep)}
body .push-banner{background:linear-gradient(135deg,#ff8fb8,var(--rose));color:#fff}

@media (max-width:600px){
  .post-container{scroll-margin-top:100px}   /* ナビが2段に折り返すぶん */
  .thread-body{margin:12px auto;padding:0 8px}
  .post-container{padding:10px 12px;border-radius:8px}
  .thread-nav{padding:12px 8px;gap:6px}
  .nav-card{padding:10px}
  .nav-index{flex:0 0 74px}
  body .site-nav a{padding:5px 10px;font-size:.78rem}
}