.j4fRules { container-type: inline-size; max-width: 960px; margin: 0 auto; color: #263443; background: #fcfaf5; font: 1rem/1.65 system-ui, sans-serif; overflow-wrap: anywhere; }
.j4fRules *, .j4fRules *::before, .j4fRules *::after { box-sizing: border-box; }
.j4fRulesHero { padding: 28px 24px; color: #fff9e8; background: radial-gradient(ellipse at top right, #597d88, transparent), #203e50; border-bottom: 4px solid #d7b979; }
.j4fRulesHero h1 { margin: 0; font-size: 2.5rem; letter-spacing: -.04em; color: inherit; text-align: left; }
.j4fRulesHero p { margin: 4px 0; font-size: .88rem; }
.j4fRulesBody { padding: 8px 24px 24px; }
.j4fRules section { padding: 16px 0; border-bottom: 1px solid #ded9cc; }
.j4fRules section:last-child { border: 0; }
.j4fRules h2 { color: #23485b; font-size: 1.3rem; line-height: 1.3; margin: 0 0 14px; }
.j4fRules p { margin: 10px 0; }
.j4fRules ul { padding-left: 1.3em; }
.j4fRules li { margin: 10px 0; }
.j4fRules strong { color: #183d50; }
.j4fRules img { display: inline-block; max-width: 100%; height: auto; border-radius: 5px; vertical-align: middle; }
.j4fRules table { width: 100%; border-collapse: collapse; table-layout: auto; font: inherit; }
.j4fRules td { padding: 8px; vertical-align: top; border: 0; background: transparent; }
.j4fExamples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.j4fExamples figure { margin: 0; padding: 12px; border: 1px solid #ded9cc; background: #fff; border-radius: 10px; text-align: center; }
.j4fExamples figcaption { font-size: .88rem; line-height: 1.5; margin-top: 10px; text-align: left; }
@container (max-width: 520px) { .j4fRulesHero { padding: 20px 16px; } .j4fRulesBody { padding: 8px 16px 20px; } .j4fExamples { grid-template-columns: minmax(0, 1fr); } .j4fRules table, .j4fRules tbody, .j4fRules tr, .j4fRules td { display: block; width: 100%; } .j4fRules td { padding: 4px 0; } .j4fRules h2 { font-size: 1.15rem; } }
@media (max-width: 520px) { .j4fExamples { grid-template-columns: minmax(0, 1fr); } }