/* ヘルプページ（styles.css の上に重ねる） */
.help-hero { padding: 72px 0 24px; background: linear-gradient(180deg, var(--accent-soft), var(--bg)); }
.help-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-family: var(--font); font-weight: 900; }
.help-body { padding: 24px 0 100px; }
.help-body > h2 { margin-top: 1.2em; font-size: 1.6rem; }
.help-body .small { font-size: .88rem; color: var(--muted); }

.callout { padding: 16px 20px; border-radius: 16px; font-size: .95rem; margin: 18px 0; }
.callout.tip { background: var(--accent-soft); border: 1px solid rgba(58, 175, 220, .35); }
.callout.warn { background: #fff4e8; border: 1px solid rgba(236, 111, 0, .35); }
.callout.warn::before { content: "⚠ "; color: var(--cta); font-weight: 700; }

.compare { margin: 20px 0 12px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); }
.compare-row { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr; gap: 12px; padding: 14px 20px; font-size: .92rem; }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-row.head { background: #f1f8fa; font-size: .8rem; font-weight: 700; color: var(--muted); }
a.compare-row:hover { background: var(--accent-soft); }

.guide { margin-top: 56px; padding: 36px 36px 28px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); scroll-margin-top: 84px; }
.guide h2 { display: flex; align-items: center; gap: 14px; font-size: 1.45rem; font-family: var(--font); font-weight: 900; }
.guide h3 { margin-top: 1.6em; font-size: 1.05rem; font-family: var(--font); }
.guide-icon {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.2rem; color: var(--accent-deep); background: var(--accent-soft);
}
.guide code { font-size: .88em; padding: .1em .4em; border-radius: 6px; background: #eef5f7; }

.numbered { counter-reset: step; list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.numbered li { counter-increment: step; position: relative; padding-left: 40px; font-size: .97rem; }
.numbered li::before {
  content: counter(step); position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .8rem var(--font-display); color: #fff; background: var(--accent-deep);
}

.ext-link {
  display: flex; justify-content: space-between; align-items: center; margin: 18px 0; padding: 14px 20px;
  border-radius: 14px; border: 1.5px solid rgba(58, 175, 220, .5); color: var(--accent-deep); font-weight: 700;
}
.ext-link:hover { background: var(--accent-soft); }

.setup-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.setup-grid .phone.small { width: 220px; }

.trouble { margin: 16px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.trouble > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.trouble dt { font-weight: 700; }
.trouble dd { margin: 0; color: var(--muted); font-size: .94rem; }

@media (max-width: 640px) {
  .guide { padding: 26px 20px 20px; }
  .compare-row { grid-template-columns: 1fr; gap: 2px; }
  .compare-row.head { display: none; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-grid .phone.small { margin-inline: auto; }
  .trouble > div { grid-template-columns: 1fr; gap: 4px; }
}