.guide-contents{border-block:1px solid var(--line);padding:24px 0;margin-bottom:36px}
.guide-contents ol{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;margin-bottom:0}
.guide-contents a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.guide-contents a:hover{color:var(--green)}
.rule-example{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;margin:32px 0}
.rule-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:20px}
.rule-side{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.rule-flow p{font-size:15px;margin-bottom:8px}
.rule-arrow{color:var(--green);font-size:28px;padding-top:30px}
.rule-example figcaption{border-top:1px solid var(--line);padding-top:16px;margin-top:16px;font-size:13px;color:var(--muted)}
.article .rule-steps{list-style:none;counter-reset:steps;margin:24px 0}
.rule-steps li{counter-increment:steps;position:relative;padding:0 0 16px 52px}
.rule-steps li::before{content:counter(steps);position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;background:var(--forest);color:var(--card);border-radius:50%;font-size:14px}
.article .rule-steps h3{margin:0 0 8px;font-size:19px}
.rule-table-wrap{margin:28px 0;overflow-x:auto}
.rule-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
.rule-table caption{text-align:left;font-size:20px;font-weight:700;margin-bottom:16px;color:var(--ink)}
.rule-table th,.rule-table td{padding:16px;border-bottom:1px solid var(--line);vertical-align:top}
.rule-table thead{background:var(--mint)}
.rule-table tbody th{font-weight:600}
.rules-faq details{border-top:1px solid var(--line);padding:20px 0}
.rules-faq details:last-child{border-bottom:1px solid var(--line)}
.rules-faq summary{cursor:pointer;font-weight:650;line-height:1.5;padding-right:12px}
.rules-faq summary:focus-visible{outline:3px solid var(--green);outline-offset:5px}
.rules-faq details p{margin:16px 0 0}
@media(max-width:600px){
  .guide-contents ol{grid-template-columns:1fr}
  .rule-example{padding:22px}
  .rule-flow{grid-template-columns:1fr;gap:12px}
  .rule-arrow{padding:0;transform:rotate(90deg);width:28px;line-height:1}
  .rule-table th,.rule-table td{padding:12px 8px;font-size:12px;overflow-wrap:anywhere}
}