/* Subpage redesign (2026-11-07) — applies below the page header on every page except home.
   Scope: body.rd (set by redesign-2611.js; ?classic turns it off) and .rd-body (content blocks).
   1 tokens · 2 type & line breaks · 3 sections · 4 stages (images) · 5 cards & icons · 6 numbers & steps
   7 comparisons · 8 tables · 9 charts & documents · 10 buttons · 11 page specifics · 12 mobile */

/* ============ 1. Tokens ============ */
body.rd {
  --rd-ink: #13293d;
  --rd-text: #3c5366;
  --rd-body: #5b7183;
  --rd-muted: #8a9cab;
  --rd-line: #e2e8ee;
  --rd-line-strong: #cfd9e2;
  --rd-panel: #f3f6f9;
  --rd-band: #f7f9fb;
  --rd-stage: linear-gradient(180deg, #f5f8fa 0%, #edf2f6 100%);
  --rd-brand: #1667b7;
  --rd-brand-deep: #0d4c8f;
  --rd-brand-tint: #eaf2fa;
  --rd-brand-soft: #d6e6f5;
  --rd-r-sm: 12px;
  --rd-r: 20px;
  --rd-r-lg: 24px;
  --rd-h2: clamp(26px, 2.5vw, 34px);
  --rd-h3: clamp(19px, 1.6vw, 22px);
  --rd-h4: 17px;
  --rd-lead: 17px;
  --rd-text-size: 15.5px;
  --rd-section: clamp(72px, 8vw, 120px);
  --rd-gap: clamp(48px, 5.5vw, 88px);
}

/* ============ 2. Type and line breaks ============ */
body.rd .rd-body :is(h1, h2, h3, h4, h5, p, li, dt, dd, th, td, figcaption, blockquote, cite, strong, b, span, a, small, label, summary) {
  word-break: keep-all;
  overflow-wrap: break-word;
}
body.rd .rd-body :is(h2, h3, h4, h5, strong) { text-wrap: balance; }
body.rd .rd-body :is(p, li, dd, figcaption, blockquote p, summary) { text-wrap: pretty; }

body.rd .rd-body h2:not(:where(.x-h3look)) {
  color: var(--rd-ink);
  font-size: var(--rd-h2) !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  letter-spacing: -.03em;
}
body.rd .rd-body h3:not(:where(.x-h4look)), body.rd .rd-body h2:where(.x-h3look) {
  color: var(--rd-ink);
  font-size: var(--rd-h3) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -.02em;
}
body.rd .rd-body h4, body.rd .rd-body h3:where(.x-h4look) { color: var(--rd-ink); font-size: var(--rd-h4) !important; font-weight: 700 !important; line-height: 1.5; }
body.rd .rd-body p { color: var(--rd-body); }
body.rd .rd-body .wf-kicker,
body.rd .rd-body .hfe-kicker {
  color: var(--rd-brand) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.5;
}
/* Section lead: the paragraph that follows a section title. */
body.rd .rd-body :is(.wf-section-head, .r3-split-copy, .wf-sheet-copy, .wf-story-head, .wf-wave-copy, .hfe-subheading, .r3-section-head) > p:not(.wf-kicker),
body.rd .rd-body :is(.wf-section-head, .r3-section-head) p:not(.wf-kicker) {
  color: var(--rd-body);
  font-size: var(--rd-lead) !important;
  line-height: 1.75 !important;
}
/* Card titles are one step below section titles. */
body.rd .rd-body :is(article, .r3-case-card, .hfe-card, .wf-wave-part, .wf-wave-step, .wf-wave-cycle-step) :is(h2, h3):not(:where(.x-h4look, .x-h3look)) {
  font-size: clamp(18px, 1.4vw, 20px) !important;
  line-height: 1.45 !important;
}

/* ============ 3. Sections: white pages, soft bands for evidence ============ */
body.rd #app > .rd-body:is(section, div) { background-color: #fff; }
body.rd #app > .rd-body:is(.is-soft, .hl-research-section, .cr-guide-transfer),
body.rd #app > .rd-body .wf-content.is-soft { background: var(--rd-band) !important; }
body.rd .rd-body .r3-split + .r3-split { margin-top: var(--rd-gap); }
body.rd .rd-body .r3-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
body.rd .rd-body .r3-split.rd-split-solo { grid-template-columns: minmax(0, 1fr); }
body.rd .rd-body .r3-split.rd-split-solo > * { max-width: 760px; }

/* ============ 4. Stages: every picture sits on the same surface ============ */
body.rd .rd-body .rd-stage {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--rd-r) !important;
  background: var(--rd-stage) !important;
  box-shadow: none !important;
}
body.rd .rd-body .rd-stage > figcaption,
body.rd .rd-body .rd-stage figcaption {
  padding: 12px 18px 16px;
  margin: 0;
  color: var(--rd-body);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  background: transparent;
}
/* Site photos: same crop ratio and the same light grade so they read as one set. */
body.rd .rd-body img.rd-img-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04) brightness(1.02);
}
/* Products and devices: cut-outs centred on the stage with air around them. */
body.rd .rd-body .rd-stage-product { display: grid; place-items: center; }
body.rd .rd-body img.rd-img-product {
  display: block;
  width: 100%;
  object-fit: contain !important;
  padding: clamp(16px, 2.4vw, 32px);
  mix-blend-mode: multiply;
}
/* Microscope pictures stay neutral and sharp, framed like specimens. */
body.rd .rd-body img.rd-img-micro { display: block; width: 100%; object-fit: cover; filter: grayscale(.1) contrast(1.04); }
body.rd .rd-body .rd-stage-micro { padding: 0 !important; }
/* Charts and diagrams: white sheet with an inner margin. */
body.rd .rd-body .rd-stage-figure { background: #fff !important; box-shadow: inset 0 0 0 1px var(--rd-line) !important; }
body.rd .rd-body img.rd-img-figure { display: block; width: 100%; object-fit: contain !important; padding: clamp(12px, 2vw, 24px); }
body.rd .rd-body img.rd-img-motion { display: block; width: 100%; object-fit: cover; }
/* The large opening photos of systems and cases keep their crop, on the same radius. */
body.rd .rd-body .r3-main-photo { border-radius: var(--rd-r-lg) !important; }

/* ============ 5. Cards and icons ============ */
body.rd .rd-body :is(
  .wf-wave-metrics > article, .wf-wave-certs > article, .hm-wave-benefits > article, .wf-story-compare > article,
  .wf-wave-part, .wf-wave-step, .wf-wave-cycle-step, .hfe-card, .r3-case-card, .r3-material-families > *,
  .r3-locations > article, .wf-core-values-grid > *, .wf-company-facility-grid article, .wf-company-milestone-grid article,
  .wf-field-metrics > *, .cr-aeration-grid > *, .hm-material, .wf-wave-compare-card, .wf-wave-note, .r3-family-intro aside,
  aside.cr-oem-strengths, .wf-wave-quote, .hfe-document, details.hfm-reading-note, .cr-case-reserved
) {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-r) !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--rd-text);
}
body.rd .rd-body :is(.is-soft, .hl-research-section, .cr-guide-transfer) :is(.wf-wave-metrics > article, .hm-wave-benefits > article, .wf-wave-certs > article, .hfe-card) { border-color: transparent !important; }

body.rd .rd-body .rd-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--rd-brand-tint);
  color: var(--rd-brand);
  flex: 0 0 auto;
}
body.rd .rd-body .rd-icon svg { width: 24px; height: 24px; }
body.rd .rd-body .rd-has-icon { position: relative; }
/* Replaced decorations: old watermark icons and picture icons give way to the shared set. */
body.rd .rd-body .hm-wave-benefits article > svg,
body.rd .rd-body .hm-wave-benefits .hm-benefit-icon,
body.rd .rd-body .hm-wave-benefits article > img,
body.rd .rd-body .wf-core-values-card-head img { display: none !important; }

/* Stat cards: number first, label above it, note below. */
body.rd .rd-body .wf-wave-metrics > article strong,
body.rd .rd-body .wf-wave-certs > article strong,
body.rd .rd-body .wf-field-metrics strong {
  display: block;
  margin: 6px 0 8px;
  color: var(--rd-ink) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 750 !important;
  letter-spacing: -.02em;
  line-height: 1.25;
}
body.rd .rd-body .wf-wave-certs > article strong { font-size: 19px !important; }
body.rd .rd-body :is(.wf-wave-metrics, .wf-wave-certs) > article > p:not(.wf-kicker) { color: var(--rd-body) !important; font-size: 14px !important; font-weight: 500 !important; }

/* ============ 6. Numbers and steps: one badge everywhere ============ */
body.rd .rd-body :is(.hfm-path-number, .hm-benefit-number, .wf-wave-part > span:first-child, .wf-wave-step > span:first-child, .r3-filtration-steps li > span:first-child, .rd-num) {
  display: inline-grid !important;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--rd-ink) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  opacity: 1 !important;
  -webkit-text-stroke: 0 !important;
}
body.rd .rd-body .hm-benefit-number { position: static !important; margin-bottom: 14px; }
/* Process lists on systems and application pages: full-width rows like a spec sheet. */
body.rd .rd-body .r3-process-list,
body.rd .rd-body ol.r3-process { gap: 12px; }

/* ============ 7. Comparisons: two cards on one soft panel, ours marked in brand blue ============ */
body.rd .rd-body :is(.wf-story-compare, .wf-wave-compare, .hm-comparison, .wf-mechanism-compare, .cr-aeration-grid) {
  gap: clamp(14px, 1.6vw, 20px) !important;
  padding: clamp(14px, 1.6vw, 20px);
  border-radius: var(--rd-r-lg);
  background: var(--rd-panel);
}
body.rd .rd-body :is(.wf-story-compare, .wf-wave-compare, .hm-comparison, .wf-mechanism-compare, .cr-aeration-grid) > * { border-color: transparent !important; }
body.rd .rd-body :is(article.is-dark, .wf-wave-compare-card.is-dark, .hm-material.is-hifilm, .wf-wave-quote.is-dark) {
  background: #fff !important;
  color: var(--rd-text) !important;
  box-shadow: inset 0 0 0 2px var(--rd-brand) !important;
}
body.rd .rd-body :is(article.is-dark, .wf-wave-compare-card.is-dark, .hm-material.is-hifilm, .wf-wave-quote.is-dark) :is(h3, h4, p, strong, li, span, cite, b) { color: inherit; }
body.rd .rd-body :is(article.is-dark, .wf-wave-compare-card.is-dark, .hm-material.is-hifilm, .wf-wave-quote.is-dark) :is(h3, h4, strong) { color: var(--rd-ink) !important; }
body.rd .rd-body :is(article.is-dark, .wf-wave-compare-card.is-dark, .wf-wave-quote.is-dark) .wf-kicker { color: var(--rd-brand) !important; }

/* ============ 8. Tables: full row, quiet lines, tinted head ============ */
body.rd .rd-body .rd-table {
  width: 100%;
  max-width: none;
  margin-top: clamp(24px, 3vw, 36px);
  overflow-x: auto;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-r) !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.rd .rd-body .rd-table table { width: 100%; min-width: 640px; border-collapse: collapse; }
body.rd .rd-body .rd-table :is(th, td) {
  padding: 15px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rd-line) !important;
  color: var(--rd-text);
  font-size: 14.5px !important;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}
body.rd .rd-body .rd-table thead th {
  background: var(--rd-brand-tint) !important;
  color: var(--rd-ink) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}
body.rd .rd-body .rd-table tbody tr:last-child :is(th, td) { border-bottom: 0 !important; }
body.rd .rd-body .rd-table tbody :is(th, td):first-child { color: var(--rd-ink); font-weight: 700; }
body.rd .rd-body .rd-table td :is(small, span) { white-space: nowrap; }

/* ============ 9. Charts, documents, quotes, notes ============ */
body.rd .rd-body .hfe-document { overflow: hidden; }
body.rd .rd-body .hfe-document img { background: var(--rd-panel); object-fit: contain !important; padding: 14px; }
body.rd .rd-body .wf-wave-quote { background: var(--rd-panel) !important; border-color: transparent !important; }
body.rd .rd-body .wf-wave-quote::before { content: "“"; display: block; height: 28px; color: var(--rd-brand); font: 700 44px/1 Georgia, serif; }
body.rd .rd-body details.hfm-reading-note { padding: 0; }
body.rd .rd-body details.hfm-reading-note summary { padding: 18px 22px; color: var(--rd-ink); font-weight: 600; }
body.rd .rd-body .hl-energy-preview { border-radius: var(--rd-r) !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--rd-line) !important; }
body.rd .rd-body .hl-energy-row div > span,
body.rd .rd-body .hl-energy-row i { border-radius: 6px; }
body.rd .rd-body .hfv-film,
body.rd .rd-body .hfv-integrated,
body.rd .rd-body .hfv-viewer-gate,
body.rd .rd-body .hl-guide-player { border-radius: var(--rd-r) !important; }
body.rd .rd-body .hfv-film { border: 0 !important; box-shadow: none !important; }

/* ============ 10. Buttons ============ */
body.rd .rd-body :is(a.wf-primary, button.wf-primary) {
  border-radius: 999px !important;
  background: var(--rd-brand) !important;
  border-color: var(--rd-brand) !important;
  color: #fff !important;
  font-weight: 700;
}
body.rd .rd-body :is(a.wf-secondary, button.wf-secondary, .wf-stage-link) {
  border: 1px solid var(--rd-line-strong) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--rd-ink) !important;
  font-weight: 600;
}
body.rd .rd-body :is(a.wf-secondary, .wf-stage-link):hover { border-color: var(--rd-brand) !important; color: var(--rd-brand) !important; }

/* ============ 12. Mobile ============ */
@media (max-width: 900px) {
  body.rd .rd-body .r3-split { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}
@media (max-width: 600px) {
  body.rd .rd-body .rd-icon { width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; }
  body.rd .rd-body .rd-icon svg { width: 21px; height: 21px; }
  body.rd .rd-body .rd-table :is(th, td) { padding: 12px 14px !important; font-size: 13.5px !important; }
}

/* A table column that left its split sits below the text at full width. */
body.rd .rd-body .rd-below { width: 100%; margin-top: clamp(24px, 3vw, 36px); }
body.rd .rd-body .rd-below .rd-table { margin-top: 16px; }

/* Paired material cards (Cleanfil-S): ours tinted, the reference grey, pictures edge to edge. */
body.rd .rd-body .hm-material { overflow: hidden; }
body.rd .rd-body .hm-material > header { padding: 16px 20px !important; background: var(--rd-panel) !important; }
body.rd .rd-body .hm-material.is-hifilm > header { background: var(--rd-brand-tint) !important; }
body.rd .rd-body .hm-material > header h4 { margin: 0 0 4px; }
body.rd .rd-body .hm-material > header p { margin: 0; font-size: 13.5px; }
body.rd .rd-body .hm-material .hm-photo { margin: 14px; border-radius: 14px !important; }
body.rd .rd-body .hfv-source-grid > * { border: 0 !important; border-radius: var(--rd-r) !important; background: var(--rd-panel) !important; overflow: hidden; }
body.rd .rd-body .hm-chart-panel { border: 0 !important; border-radius: var(--rd-r) !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--rd-line) !important; }
body.rd .rd-body .r3-family-intro aside h3 { margin-top: 0; }

/* Bullet lists in content: one check mark in the brand tint instead of mixed dots and dashes. */
body.rd .rd-body :is(.r3-split, .wf-sheet-copy, .wf-wave-copy, article, aside, .r3-family-intro, .hfe-card) ul:not([class]) {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0 !important;
  list-style: none !important;
}
body.rd .rd-body :is(.r3-split, .wf-sheet-copy, .wf-wave-copy, article, aside, .r3-family-intro, .hfe-card) ul:not([class]) > li {
  position: relative;
  padding: 0 0 0 30px !important;
  margin: 0;
  color: var(--rd-text);
  font-size: var(--rd-text-size);
  line-height: 1.65;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}
body.rd .rd-body :is(.r3-split, .wf-sheet-copy, .wf-wave-copy, article, aside, .r3-family-intro, .hfe-card) ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rd-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231667b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10.2 2.6 2.6L14.2 7.4'/%3E%3C/svg%3E") center/20px no-repeat;
}
body.rd .rd-body :is(.r3-split, .wf-sheet-copy, .wf-wave-copy, article, aside, .r3-family-intro, .hfe-card) ul:not([class]) > li::marker { content: none; }

/* ============ 11. Page specifics ============ */
/* Section heads read left to right everywhere; a headline figure sits at the right end of its head. */
body.rd .rd-body .hm-energy-heading { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: flex-end !important; justify-content: space-between !important; gap: 16px 40px; text-align: left !important; }
body.rd .rd-body .hm-energy-heading h2 { flex: 1 1 420px; margin: 0 !important; min-height: 0; text-align: left !important; }
body.rd .rd-body .hm-energy-callout { flex-direction: row !important; align-items: baseline; gap: 10px; }
body.rd .rd-body .hm-energy-line,
body.rd .rd-body .hm-wave-down-arrow { display: none !important; }
body.rd .rd-body .hm-energy-percent { color: var(--rd-brand) !important; font-size: clamp(40px, 4.4vw, 56px) !important; line-height: 1 !important; }
body.rd .rd-body .hm-wave-benefits-intro { margin-top: var(--rd-gap) !important; padding: 0 !important; text-align: left !important; }
body.rd .rd-body .hm-wave-benefits-intro h2 { margin: 0 !important; text-align: left !important; }
body.rd .rd-body .hm-wave-benefits { margin-top: 28px !important; }
body.rd .rd-body .hl-energy-preview { margin-top: 32px !important; }
body.rd .rd-body .rd-has-icon .hm-benefit-number { display: none !important; }
body.rd .rd-body .cr-page-link .wf-content-inner { text-align: left; }
body.rd .rd-body .cr-page-link .wf-content-inner > * { text-align: left !important; margin-left: 0 !important; }
body.rd .rd-body .wf-story-head { align-items: end; }
/* A film shown again further down the same page is left out the second time. */
body.rd .rd-body .rd-repeat { display: none !important; }
body.rd .rd-body .wf-wave-compare-card { justify-content: flex-start !important; background-color: #fff !important; }
body.rd .rd-body .wf-wave-compare-media { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 9; margin: 18px 0 14px; border-radius: 14px; object-fit: cover; background: var(--rd-panel); }

/* Image slots: pictures added later by file name; until then a framed placeholder says what goes there. */
body.rd .rd-slot { position: relative; margin: 0; overflow: hidden; border-radius: var(--rd-r-lg); background: var(--rd-stage); aspect-ratio: var(--rd-slot-ratio, 4 / 3); }
body.rd .rd-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.rd .rd-slot .rd-slot-note { display: none; }
body.rd .rd-slot.is-empty { display: grid; place-items: center; border: 1.5px dashed var(--rd-line-strong); background: repeating-linear-gradient(135deg, #f6f8fa 0 14px, #f1f4f7 14px 28px); }
body.rd .rd-slot.is-empty img { display: none; }
body.rd .rd-slot.is-empty .rd-slot-note { display: grid; gap: 6px; justify-items: center; max-width: 80%; padding: 0; text-align: center; }
body.rd .rd-slot-note span { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--rd-brand); font-size: 12px; font-weight: 700; }
body.rd .rd-slot-note strong { color: var(--rd-ink); font-size: 15px; line-height: 1.45; }
body.rd .rd-slot-note code { color: var(--rd-muted); font: 12px/1.4 ui-monospace, Menlo, monospace; }

/* Product intro: what it is and the key facts on the left, the product picture on the right. */
body.rd .rd-body .r3-family-intro.rd-intro { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
body.rd .rd-body .r3-family-intro aside.rd-intro-facts { margin-top: 28px; padding: 22px 24px !important; border: 0 !important; border-radius: var(--rd-r) !important; background: var(--rd-panel) !important; }
body.rd .rd-body .rd-intro-facts h3 { margin: 0 0 8px !important; font-size: 17px !important; }
body.rd .rd-body .rd-intro-facts p { margin: 6px 0 0; font-size: 15px; }

/* 분리막 및 모듈: family cards with their product picture on top. */
body.rd .rd-body .r3-material-families { gap: clamp(16px, 2vw, 24px) !important; }
body.rd .rd-body .r3-material-families > a { display: flex !important; flex-direction: column; padding: 0 0 28px !important; overflow: hidden; }
body.rd .rd-body .r3-material-families > a > :not(.rd-slot) { margin-left: 28px !important; margin-right: 28px !important; }
body.rd .rd-body .r3-material-families > a > .rd-slot { margin: 0 0 24px; border-radius: 0; }
body.rd .rd-body .r3-material-families > a > span:last-child { margin-top: auto !important; padding-top: 14px; color: var(--rd-brand); font-weight: 700; }
body.rd .rd-body .r3-family-number { color: var(--rd-brand) !important; font-size: 13px !important; font-weight: 700; }
body.rd .rd-body .r3-family-number strong { margin-left: 8px; color: var(--rd-ink); }

/* Wide evidence (tables, picture sets) sits under its title at full width. */
body.rd .rd-body .r3-split.rd-stack { grid-template-columns: minmax(0, 1fr) !important; row-gap: clamp(24px, 3vw, 36px); }
body.rd .rd-body .r3-split.rd-stack > :first-child { max-width: 780px; }

/* 수처리 시스템: site photo beside each field's process. */
body.rd .rd-body .rd-field-photo { margin: 22px 0 20px; overflow: hidden; border-radius: var(--rd-r); background: var(--rd-panel); }
body.rd .rd-body .rd-field-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.86) contrast(1.04) brightness(1.02); }

/* Closing call to action */
body.rd .rd-cta { padding: 0 0 var(--rd-section) !important; background: #fff !important; }
body.rd .rd-cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 48px); border-radius: var(--rd-r-lg); background: var(--rd-brand-tint); }
body.rd .rd-cta-box h2 { margin: 6px 0 8px !important; }
body.rd .rd-cta-box p:not(.wf-kicker) { margin: 0; color: var(--rd-text); }
body.rd .rd-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.rd .rd-cta-actions a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; text-decoration: none; }
@media (max-width: 900px) { body.rd .rd-body .r3-family-intro.rd-intro { grid-template-columns: minmax(0, 1fr); } }
/* The systems consultation block uses the same closing box as product pages. */
body.rd .rd-body.cr-system-consultation { padding: clamp(56px, 6vw, 88px) 0 var(--rd-section) !important; background: #fff !important; }
body.rd .rd-body .hm-system-cta { padding: 0 !important; background: none !important; }
body.rd .rd-body .hm-system-cta .wf-section-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 48px) !important; border-radius: var(--rd-r-lg); background: var(--rd-brand-tint) !important; text-align: left !important; }
body.rd .rd-body .hm-system-cta h2 { flex: 1 1 420px; margin: 0 !important; text-align: left !important; }
body.rd .rd-body .hm-system-cta .wf-actions { justify-content: flex-start; margin: 0 !important; }
/* A single chart keeps a readable size when its section is stacked. */
body.rd .rd-body .rd-stack :is(.hm-chart-panel, .r3-permeability-chart, .hl-energy-preview) { max-width: 860px; }
/* Application pages: the site photo is a wide band, not a full-screen picture. */
body.rd #application-media .rd-stage img.rd-img-photo { aspect-ratio: 16 / 7.5; height: auto; }

/* 회사소개 · 사업 계보: four equal cards, picture on the shared stage. */
body.rd .rd-body .wf-history-strip { gap: clamp(14px, 1.6vw, 20px) !important; }
body.rd .rd-body .wf-history-strip article { overflow: hidden; border: 1px solid var(--rd-line) !important; border-radius: var(--rd-r) !important; background: #fff !important; box-shadow: none !important; transform: none !important; }
body.rd .rd-body .wf-history-strip article img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; background: var(--rd-panel); }
body.rd .rd-body .wf-history-strip article > div { padding: 18px 20px 22px !important; }
body.rd .rd-body .wf-history-strip article span { color: var(--rd-brand) !important; font-size: 22px !important; font-weight: 750 !important; }

/* 회사소개 · 연혁: one column read top to bottom, year on the left, a line joining the years. */
body.rd .rd-body .wf-company-milestone-grid { position: relative; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; max-width: 880px; }
body.rd .rd-body .wf-company-milestone-grid::before { content: ""; position: absolute; left: 95px; top: 12px; bottom: 12px; width: 1px; background: var(--rd-line-strong); }
body.rd .rd-body .wf-company-milestone-grid article { position: relative; display: grid !important; grid-template-columns: 80px minmax(0, 1fr) !important; gap: 0 32px !important; align-items: baseline; min-height: 0 !important; padding: 16px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
body.rd .rd-body .wf-company-milestone-grid article::before { content: ""; position: absolute; left: 91px; top: 25px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--rd-brand); }
body.rd .rd-body .wf-company-milestone-grid article span { color: var(--rd-brand) !important; font-size: 18px !important; font-weight: 750 !important; font-variant-numeric: tabular-nums; }
body.rd .rd-body .wf-company-milestone-grid article p { margin: 0 !important; color: var(--rd-ink) !important; font-size: 16px !important; font-weight: 600; }
@media (max-width: 600px) {
  body.rd .rd-body .wf-company-milestone-grid::before { left: 67px; }
  body.rd .rd-body .wf-company-milestone-grid article { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 0 26px !important; }
  body.rd .rd-body .wf-company-milestone-grid article::before { left: 63px; }
}
/* 적용 사례 cards: capacity and year are facts, not features — no check marks. */
body.rd .rd-body .r3-case-card ul:not([class]) { gap: 4px; margin-top: 4px; }
body.rd .rd-body .r3-case-card ul:not([class]) > li { padding-left: 0 !important; color: var(--rd-body); font-size: 14.5px; }
body.rd .rd-body .r3-case-card ul:not([class]) > li::before { content: none; }
body.rd .rd-body .r3-case-card ul:not([class]) > li:first-child { color: var(--rd-ink); font-size: 16px; font-weight: 700; }
body.rd .rd-body .rd-field-photo a { display: block; }
body.rd .rd-body .rd-field-photo img { transition: transform .5s ease; }
body.rd .rd-body .rd-field-photo a:hover img { transform: scale(1.03); }