.info-main { padding: 76px 0 100px; }
.info-hero { max-width: 780px; margin-bottom: 54px; }
.info-hero h1 { font-size: clamp(44px, 6vw, 70px); }
.info-hero > p { max-width: 680px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.draft-notice { margin-top: 24px; padding: 14px 16px; border: 1px solid rgba(255, 197, 92, .28); border-radius: 8px; color: #d9c291; background: rgba(255, 179, 41, .055); font-size: 13px; line-height: 1.55; }
.info-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 56px; align-items: start; }
.info-toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 22, 18, .72); }
.info-toc strong { margin-bottom: 8px; color: #dbe4dc; font: 600 13px var(--font-display); }
.info-toc a { padding: 7px 8px; border-radius: 5px; color: #89958c; font-size: 12px; }
.info-toc a:hover { color: var(--accent); background: rgba(141, 253, 79, .055); }
.info-content { display: grid; gap: 20px; }
.info-card { padding: 28px; border: 1px solid var(--line); border-radius: 11px; background: rgba(16, 22, 18, .68); scroll-margin-top: 24px; }
.info-card h2 { max-width: none; margin-bottom: 14px; font-size: 25px; letter-spacing: -1px; text-align: left; }
.info-card h3 { margin: 24px 0 8px; font: 600 16px var(--font-display); }
.info-card p, .info-card li { color: #9aa69d; font-size: 14px; line-height: 1.72; }
.info-card p { margin: 0 0 12px; }
.info-card p:last-child { margin-bottom: 0; }
.info-card ul, .info-card ol { margin: 12px 0 0; padding-left: 20px; }
.info-card li + li { margin-top: 8px; }
.info-card strong { color: #e1e8e2; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.method-grid div { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .018); }
.method-grid span { display: block; margin-bottom: 7px; color: var(--accent); font: 700 10px var(--font-display); letter-spacing: 1px; text-transform: uppercase; }
.method-grid p { font-size: 12px; line-height: 1.55; }

@media (max-width: 800px) {
  .info-layout { grid-template-columns: 1fr; gap: 24px; }
  .info-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .info-toc strong { width: 100%; }
}

@media (max-width: 620px) {
  .info-main { padding: 54px 0 72px; }
  .info-hero { margin-bottom: 36px; }
  .info-card { padding: 21px; }
  .method-grid { grid-template-columns: 1fr; }
}