@import url("/design-v12.css");

.seo-wrap { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.seo-head { background: var(--header); border-bottom: 1px solid var(--line); }
.seo-head-inner, .seo-foot-inner, .seo-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
}
.seo-head-inner, .seo-foot-inner { justify-content: space-between; padding-block: 18px; }
.seo-brand { font-size: 28px; font-weight: 850; letter-spacing: -.04em; }
.seo-brand span, .seo-kicker { color: #6094ff; }
.seo-nav { font-size: .92rem; font-weight: 650; }
.seo-switch {
  color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 30px; padding: 6px 13px;
}
.seo-breadcrumb { margin-block: 22px; color: var(--sub); font-size: .85rem; }
.seo-breadcrumb span { margin-inline: 7px; }
.seo-hero, .seo-panel, .seo-faq, .seo-related, .seo-dir-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(18px, 4vw, 38px); box-shadow: var(--shadow);
}
.seo-hero { background: radial-gradient(ellipse at top right, #4a56fa25, transparent 68%), var(--surface); }
.seo-hero h1 {
  font-size: clamp(30px, 6vw, 58px); line-height: 1.08; letter-spacing: -.045em;
  margin: 10px 0 16px; overflow-wrap: break-word;
}
.seo-kicker { font-size: .85rem; font-weight: 750; }
.seo-lead { max-width: 70ch; font-size: 1.06rem; }
.seo-lead, .seo-dir-card p { color: var(--sub); }
.seo-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  color: #fff; background: linear-gradient(120deg, #1b64eb, #6440d5); border-radius: 12px; font-weight: 700;
}
.seo-grid, .seo-directory {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 18px;
}
.seo-faq, .seo-related { margin-block: 18px; }
.seo-panel h2, .seo-faq h2, .seo-related h2, .seo-dir-card h2 { line-height: 1.2; margin-top: 0; }
.seo-faq details { padding-block: 12px; border-top: 1px solid var(--line); }
.seo-faq summary { cursor: pointer; font-weight: 650; }
.seo-related-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.seo-related a, .seo-dir-card a { text-decoration: underline; text-underline-offset: 3px; }
.seo-foot { margin-top: 36px; border-top: 1px solid var(--line); color: var(--sub); }
@media (max-width: 650px) {
  .seo-grid, .seo-directory { grid-template-columns: 1fr; }
  .seo-head-inner, .seo-nav { gap: 8px 12px; }
}