body {
  margin: 0;
  background: #f4f7fb;
  color: #14213d;
  font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.rules-page {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
}

.rules-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #d7e0ec;
  padding-bottom: 24px;
}

.rules-header span {
  color: #17633a;
  font-size: 13px;
  font-weight: 800;
}

.rules-header h1 {
  margin: 8px 0 10px;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: 0;
}

.rules-header p,
.rules-footer {
  color: #66758d;
}

.rules-document {
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #fff;
  padding: 32px clamp(20px, 5vw, 52px);
  line-height: 1.78;
}

.rules-document h2 {
  margin: 44px 0 16px;
  border-bottom: 2px solid #1f6f47;
  padding-bottom: 10px;
  font-size: 23px;
}

.rules-document h2:first-child { margin-top: 0; }
.rules-document h3 { margin: 30px 0 10px; font-size: 18px; }
.rules-document p { margin: 8px 0; }
.rules-document ul,
.rules-document ol { margin: 8px 0 16px; padding-left: 26px; }
.rules-document li { margin: 4px 0; }
.rules-document hr { margin: 32px 0; border: 0; border-top: 1px solid #e0e7f0; }
.rules-footer { margin-top: 18px; text-align: center; font-size: 13px; }

@media (max-width: 640px) {
  .rules-page { width: calc(100% - 20px); padding: 24px 0 48px; }
  .rules-document { padding: 22px 16px; font-size: 14px; }
  .rules-document h2 { font-size: 20px; }
}