/* Shared rhythm for ordinary information sections only.
   Hero, pinned/sticky scenes, card geometry, typography and copy stay with source.
   The existing Mathflat responsive scale is the reference for this spacing layer. */
:is(#wf-main-3, #wf-main-4, #wf-main-6-2, #wf-main-6-3, #wf-main-reviews, #wf-main-7, #wf-main-8)[data-ax-ds="mathflat"] {
  --ax-layout-unit: 1px;
  --ax-layout-section: calc(200 * var(--ax-layout-unit));
  --ax-layout-heading-gap: calc(80 * var(--ax-layout-unit));
  --ax-layout-description-gap: calc(16 * var(--ax-layout-unit));
  --ax-layout-wide: calc(1600 * var(--ax-layout-unit));
  --ax-layout-gutter: 0px;
}
@media (max-width: 1900px) {
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2, #wf-main-6-3, #wf-main-reviews, #wf-main-7, #wf-main-8)[data-ax-ds="mathflat"] {
    --ax-layout-unit: .0526vw;
  }
}
@media (max-width: 1680px) {
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2, #wf-main-6-3, #wf-main-reviews, #wf-main-7, #wf-main-8)[data-ax-ds="mathflat"] {
    --ax-layout-section: calc(180 * var(--ax-layout-unit));
  }
}
@media (max-width: 1480px) {
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2, #wf-main-6-3, #wf-main-reviews, #wf-main-7, #wf-main-8)[data-ax-ds="mathflat"] {
    --ax-layout-unit: .06756756756756757vw;
    --ax-layout-section: calc(160 * var(--ax-layout-unit));
    --ax-layout-wide: 100%;
    --ax-layout-gutter: calc(60 * var(--ax-layout-unit));
  }
}
@media (max-width: 1200px) {
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2, #wf-main-6-3, #wf-main-reviews, #wf-main-7, #wf-main-8)[data-ax-ds="mathflat"] {
    --ax-layout-unit: .0833333333333333vw;
    --ax-layout-section: calc(140 * var(--ax-layout-unit));
    --ax-layout-heading-gap: calc(70 * var(--ax-layout-unit));
    --ax-layout-gutter: calc(40 * var(--ax-layout-unit));
  }
}
@media (max-width: 860px) {
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2, #wf-main-6-3, #wf-main-reviews, #wf-main-7, #wf-main-8)[data-ax-ds="mathflat"] {
    --ax-layout-unit: .13020833333333335vw;
    --ax-layout-section: calc(120 * var(--ax-layout-unit));
    --ax-layout-heading-gap: calc(60 * var(--ax-layout-unit));
    --ax-layout-gutter: calc(30 * var(--ax-layout-unit));
  }
}
@media (max-width: 540px) {
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2, #wf-main-6-3, #wf-main-reviews, #wf-main-7, #wf-main-8)[data-ax-ds="mathflat"] {
    --ax-layout-unit: .2564102564102564vw;
    --ax-layout-section: calc(100 * var(--ax-layout-unit));
    --ax-layout-heading-gap: calc(40 * var(--ax-layout-unit));
    --ax-layout-gutter: calc(21 * var(--ax-layout-unit));
  }
}

:is(#wf-main-3, #wf-main-4, #wf-main-6-2) .main-section,
#wf-main-6-3 .article__section,
#wf-main-reviews .article__section {
  padding-block: var(--ax-layout-section);
}
/* USP-2 and USP-3 share a white surface: one interval at their boundary. */
#wf-main-6-2 .main-section { padding-bottom: 0; }
/* 후기와 교육 진행은 같은 배경을 공유하므로 경계에 섹션 간격을 한 번만 둔다. */
#wf-main-reviews .article__section { padding-bottom: 0; }
:is(#wf-main-3, #wf-main-4, #wf-main-6-2) .main-section__head,
#wf-main-6-3 .article__section-head {
  margin-bottom: var(--ax-layout-heading-gap);
}
#wf-main-4 .main-section__desc,
#wf-main-6-3 .article__section-desc {
  margin-top: var(--ax-layout-description-gap);
}

/* Align the process heading and grid to the established wide content rail. */
#wf-main-7 .process-section {
  /* Optical clearance keeps the last card's shadow away from the FAQ surface. */
  padding-block: var(--ax-layout-section) var(--ax-layout-heading-gap);
  padding-inline: max(var(--ax-layout-gutter), calc((100% - var(--ax-layout-wide)) / 2));
}
#wf-main-7 .process-heading { margin-bottom: var(--ax-layout-heading-gap); }

/* FAQ remains a deliberately narrower reading column, on the same rhythm. */
#wf-main-8 .WobloQuestions_section___Pb_A {
  padding-block: var(--ax-layout-section);
  padding-inline: max(16px, var(--ax-layout-gutter));
}
#wf-main-8 .WobloQuestions_header__4ONh9 { margin-bottom: var(--ax-layout-heading-gap); }
#wf-main-8 .WobloQuestions_title__WPOeU { margin-bottom: var(--ax-layout-description-gap); }

/* Mobile review chrome must not cover the actual site. Desktop stays unchanged. */
@media (max-width: 700px) {
  .wf-label,
  .review-tools,
  .map-launcher,
  .section-folio,
  .arin-site-header .arin-map {
    display: none !important;
  }
}