/* Guide page */

.g-wrap { max-width: 1240px; margin: 0 auto; padding: 24px 20px 10px; display: grid; grid-template-columns: 200px 1fr; gap: 40px; }
.g-toc { position: sticky; top: 72px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.g-toc-title { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px 10px; }
.g-toc a { color: var(--text-2); padding: 5px 10px; border-radius: 7px; border-left: 2px solid transparent; }
.g-toc a:hover { background: var(--surface-2); color: var(--text-1); text-decoration: none; }
.g-toc a.on { color: var(--text-1); border-left-color: var(--accent); background: var(--surface-1); }

.g-main { min-width: 0; max-width: 820px; }
.g-main section { padding-bottom: 18px; scroll-margin-top: 70px; }
.g-main section + section { border-top: 1px solid var(--border); padding-top: 26px; }
.g-main h1 { font-size: 30px; line-height: 1.2; margin: 4px 0 10px; letter-spacing: -0.015em; }
.g-main h2 { font-size: 22px; margin: 0 0 12px; letter-spacing: -0.01em; }
.g-main h3 { font-size: 16px; margin: 24px 0 8px; scroll-margin-top: 70px; }
.g-main p, .g-main li, .g-main dd { color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.g-main b { color: var(--text-1); }
.g-main code, .g-main kbd { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--text-1); }
.g-main kbd { border-bottom-width: 2px; }
.g-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0; }
.g-lede { font-size: 16.5px !important; line-height: 1.6 !important; }

.g-warn { margin: 16px 0; padding: 12px 15px; border-radius: 6px; border: 1px solid rgba(255, 138, 61, 0.55); background: rgba(255, 138, 61, 0.09); color: #ffe3cf; font-size: 14px; line-height: 1.55; }
.g-warn b { color: #fff; }
.g-note { font-size: 13px !important; color: var(--text-3) !important; }
.g-tip { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-dim); border-radius: 0 10px 10px 0; }

.g-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0; }
.g-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.g-card:hover { border-color: var(--border-2); text-decoration: none; }
.g-card b { font-size: 15px; }

.g-steps, .g-list { padding-left: 22px; }
.g-steps li, .g-list li { margin: 4px 0; }
.g-list .g-list { margin: 4px 0; }

.g-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13.5px; }
.g-table th, .g-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.g-table thead th { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.g-defs th { width: 130px; color: var(--text-1); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

.g-code { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; color: var(--text-1); margin: 10px 0; }
.g-code .kw { font-weight: 800; }
.g-code .alt { color: #c9bcff; }

.g-verdicts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.g-v { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--border); }
.g-v p { margin: 6px 0 0; font-size: 14px; }
.g-v-ico { display: grid; place-items: center; height: 44px; }
.g-ring { position: relative; width: 24px; height: 24px; border-radius: 50%; border: var(--w, 2.4px) solid var(--c); }
.g-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--vfr); border: 1.5px solid #0b0d10; }
.g-glow { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--c) 55%, transparent); }

.g-fig { margin: 14px 0 16px; }
.g-fig svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.g-fig figcaption { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }

.g-sc { margin: 14px 0; padding: 16px 18px; border-radius: 8px; background: var(--surface-1); border: 1px solid var(--border); scroll-margin-top: 70px; }
.g-sc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-sc-head h3 { margin: 0; }
.g-sc p { margin: 10px 0 0; }
.g-sc .trend { font-size: 11px; padding: 2px 8px; border-radius: 5px; background: rgba(255, 138, 61, 0.12); border: 1px solid rgba(255, 138, 61, 0.45); }

.g-gloss { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; margin: 8px 0; }
.g-gloss dt { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--text-1); padding-top: 2px; }
.g-gloss dd { margin: 0; font-size: 14px; }

.g-faq { border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); margin: 8px 0; }
.g-faq summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 14px; }
.g-faq p { margin: 0; padding: 0 14px 12px; }
.g-end { margin: 24px 0 8px; padding: 14px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; }

@media (max-width: 900px) {
  .g-wrap { grid-template-columns: 1fr; gap: 0; }
  .g-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
  .g-toc-title { display: none; }
  .g-toc a { border-left: 0; background: var(--surface-1); border: 1px solid var(--border); }
  .g-cards { grid-template-columns: 1fr; }
  .g-gloss { grid-template-columns: 1fr; }
  .g-gloss dd { margin-bottom: 8px; }
}