/* Playback18 使い方ガイド専用スタイル(dark.css + blog.css のトークン/クラスを前提に上乗せ) */

.guide-main { max-width: 800px; }

/* ===== 一覧(/guide/) ===== */
.guide-category { margin-bottom: 52px; }
.guide-category-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.guide-category-head h2 { font-size: 24px; margin-bottom: 0; }
.guide-category-head .count { font: 600 12px var(--kicker); letter-spacing: .12em; color: var(--weak); }
.guide-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .guide-card-grid { grid-template-columns: 1fr; } }
.guide-card { display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease; }
.guide-card:hover { border-color: var(--accent-border); }
.guide-card .icon { color: var(--accent); }
.guide-card .guide-card-title { font-family: var(--heading); font-weight: 700; font-size: 16.5px;
  line-height: 1.6; color: var(--text); }
.guide-card .guide-card-desc { font-size: 13px; line-height: 1.9; color: var(--body-soft); }
.guide-card .draft-badge { align-self: flex-start; font: 600 10.5px var(--kicker);
  letter-spacing: .12em; color: var(--bg); background: var(--weak);
  border-radius: 4px; padding: 2px 8px; }

/* ===== 記事 ===== */
.guide-updated { font: 600 12px var(--kicker); letter-spacing: .12em; color: var(--weak); }

/* 結論の先出しボックス */
.guide-conclusion { background: var(--card-grad); border: 1px solid var(--accent-border-soft);
  border-radius: var(--radius); padding: 22px 24px; margin: 28px 0 40px; }
.guide-conclusion .label { font: 600 11px var(--kicker); letter-spacing: .25em;
  color: var(--accent); margin-bottom: 8px; text-transform: uppercase; }
.guide-conclusion p { font-size: 15px; line-height: 2; color: var(--text); margin: 0; }
.guide-conclusion p + p { margin-top: .4em; }

/* 手順 */
.guide-steps { list-style: none; margin: 0 0 48px; padding: 0;
  counter-reset: guide-step; }
.guide-step { counter-increment: guide-step; position: relative;
  padding: 0 0 32px 56px; }
.guide-step:not(:last-child)::after { content: ''; position: absolute;
  left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--line); }
.guide-step::before { content: counter(guide-step); position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--accent-border);
  color: var(--accent); font: 700 16px var(--kicker); }
.guide-step h3 { font-family: var(--heading); font-weight: 700; font-size: 17.5px;
  color: var(--text); line-height: 1.6; padding-top: 6px; margin-bottom: 10px; }
.guide-step .step-text { font-size: 14.5px; line-height: 2.05; color: var(--body); }
.guide-step img { border-radius: var(--radius); margin-top: 14px; }

/* 写真プレースホルダ(お盆実地で撮影して差し替える枠) */
.photo-placeholder { margin-top: 14px; border: 1.5px dashed rgba(255, 255, 255, .18);
  border-radius: var(--radius); padding: 26px 18px; text-align: center;
  color: var(--weak); font-size: 12.5px; line-height: 1.8; background: rgba(255, 255, 255, .02); }
.photo-placeholder .ph-label { display: block; font: 600 10.5px var(--kicker);
  letter-spacing: .2em; color: var(--weak); margin-bottom: 4px; }

/* FAQ */
.guide-faq { margin-bottom: 48px; }
.guide-faq details { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 0 20px; margin-bottom: 10px; }
.guide-faq details[open] { border-color: var(--accent-border-soft); }
.guide-faq summary { cursor: pointer; list-style: none; position: relative;
  font-weight: 700; font-size: 14.5px; color: var(--text);
  line-height: 1.7; padding: 16px 28px 16px 0; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; position: absolute; right: 2px; top: 14px;
  color: var(--accent); font-size: 18px; font-weight: 400; }
.guide-faq details[open] summary::after { content: '−'; }
.guide-faq .faq-a { font-size: 13.5px; line-height: 2; color: var(--body);
  padding: 0 0 18px; }

/* 実例・失敗例(お盆後流し込みの空枠)を含む本文 */
.guide-body:empty { display: none; }

/* 関連ガイド */
.guide-related { margin-bottom: 40px; }
.guide-related h2 { font-size: 20px; }
.guide-related ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.guide-related a { display: block; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; font-size: 13.5px; color: var(--body);
  transition: border-color .15s ease; }
.guide-related a:hover { border-color: var(--accent-border); color: var(--text); }

/* 控えめなPB18導線(売り込み臭を出さない1行) */
.guide-cta { border-top: 1px solid var(--line); padding-top: 24px;
  font-size: 13.5px; line-height: 2; color: var(--body-soft); }
.guide-cta a { text-decoration: underline; text-underline-offset: 3px; }