/* New subpage design (2026-11-07, "X"). Brand colours kept: blue #176db5, navy #001d3a, sky #f0f8fe.
   Header: body.rd .x-pagehead (all subpages). Templates: body.rd.x-page .x-sec (pages rebuilt so far). */

body.rd {
  --x-blue: #176db5; /* header dropdown blue (2026-11-07), softer than the earlier #008fe6 */
  --x-blue-text: #176db5;
  --x-navy: #001d3a;
  --x-sky: #f0f8fe;
  --x-sky-2: #e3f2fc;
  --x-ink: #0e1d2b;
  --x-text: #3f5163;
  --x-muted: #7b8c9b;
  --x-line: #e2e9ef;
  --x-line-2: #cfdbe5;
  --x-wrap: min(1280px, calc(100% - 80px));
  --x-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23008fe6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.8 10.3 2.7 2.7 5.7-5.8'/%3E%3C/svg%3E");
}
body.rd .x-wrap { width: var(--x-wrap); margin-inline: auto; }
body.rd :is(.x-pagehead, .x-sec) :is(h1, h2, h3, p, li, blockquote, figcaption, td, th, span, strong, a, summary) { word-break: keep-all; overflow-wrap: break-word; }
body.rd :is(.x-pagehead, .x-sec) :is(h1, h2, h3, .x-stat-value, .x-cert-code) { text-wrap: balance; }
body.rd :is(.x-pagehead, .x-sec) :is(p, li, blockquote) { text-wrap: pretty; }

/* ================= Page header ================= */
body.rd .hfp-page-header.x-pagehead { display: block; margin: 0; padding: 0; background: #fff !important; border: 0; box-shadow: none; }
body.rd .x-pagehead-inner { padding: clamp(56px, 7vw, 96px) 0 0; }
body.rd .x-pagehead-top { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
body.rd .x-tagline { margin: 0; color: var(--x-blue-text); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
body.rd .x-path { display: flex !important; align-items: center; gap: 4px; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; }
body.rd .x-path .hfp-home { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0 !important; color: var(--x-muted) !important; background: none !important; }
body.rd .x-path .hfp-home svg { width: 17px; height: 17px; }
body.rd .x-path .hfp-path-select { position: relative; min-width: 0 !important; height: auto !important; border: 0 !important; background: none !important; }
body.rd .x-path .hfp-path-select::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px 4px; border-radius: 50%; background: var(--x-line-2); vertical-align: middle; }
body.rd .x-path .hfp-path-select summary { display: inline-flex !important; align-items: center; gap: 6px; min-height: 32px !important; padding: 0 2px !important; border: 0 !important; background: none !important; color: var(--x-muted) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; }
body.rd .x-path .hfp-path-select:last-of-type summary { color: var(--x-ink) !important; font-weight: 600 !important; }
body.rd .x-path .hfp-path-select summary span { color: inherit !important; font-size: 12px; transform: translateY(-1px); }
body.rd .x-path .hfp-path-options { right: 0; left: auto !important; top: calc(100% + 8px) !important; min-width: 220px; padding: 8px !important; border: 1px solid var(--x-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 16px 40px #001d3a1f !important; }
body.rd .x-path .hfp-path-options a { padding: 10px 12px !important; border-radius: 9px; color: var(--x-text) !important; font-size: 14px !important; }
body.rd .x-path .hfp-path-options a:hover, body.rd .x-path .hfp-path-options a[aria-current] { background: var(--x-sky) !important; color: var(--x-blue-text) !important; }
body.rd .x-path .hfp-path-leaf { color: var(--x-ink); font-size: 14px; }
body.rd .x-title { margin: 14px 0 0; color: var(--x-ink); font-size: clamp(36px, 4.4vw, 60px); font-weight: 700; line-height: 1.2; letter-spacing: -.04em; }
body.rd .x-pagelead { max-width: 760px; margin: 20px 0 0; color: var(--x-text); font-size: 18px; line-height: 1.75; }
body.rd .x-pagehead-inner > :last-child:not(.x-tabs) { margin-bottom: clamp(48px, 6vw, 80px); }
body.rd .x-tabs { display: flex !important; gap: clamp(24px, 3vw, 44px) !important; margin: clamp(40px, 5vw, 64px) 0 0 !important; padding: 0 !important; border-bottom: 1px solid var(--x-line); overflow-x: auto; scrollbar-width: none; }
body.rd .x-tabs::-webkit-scrollbar { display: none; }
body.rd .x-tabs a { position: relative; display: flex !important; align-items: center; min-height: 60px !important; padding: 0 !important; color: var(--x-muted) !important; font-size: 16px !important; font-weight: 600 !important; white-space: nowrap; text-decoration: none; }
body.rd .x-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--x-ink) !important; transform: scaleX(0); transition: transform .2s; }
body.rd .x-tabs a:hover, body.rd .x-tabs a.is-active { color: var(--x-ink) !important; }
body.rd .x-tabs a.is-active::after, body.rd .x-tabs a:hover::after { transform: scaleX(1); }
/* Filter rows that sit under the header (device page field links). */
body.rd .x-pagehead + .wf-context-nav { padding: 28px 0 clamp(48px, 5vw, 72px) !important; background: #fff !important; border: 0 !important; }

/* ================= Sections ================= */
body.rd.x-page .x-sec { padding: clamp(88px, 10vw, 150px) 0; background: #fff; color: var(--x-text); }
body.rd.x-page .x-sec--sky { background: var(--x-sky); }
body.rd.x-page .x-sec--navy { padding: clamp(64px, 7vw, 104px) 0; background: var(--x-navy); color: #fff; }
body.rd.x-page .x-sec + .x-sec--white:not(:has(.x-head)) { padding-top: 0; }
body.rd.x-page .x-head { margin-bottom: clamp(40px, 5vw, 64px); }
body.rd.x-page .x-head--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px 64px; align-items: end; }
body.rd.x-page .x-eyebrow { margin: 0 0 14px; color: var(--x-blue-text); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
body.rd.x-page .x-h2 { margin: 0; color: var(--x-ink); font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.32; letter-spacing: -.035em; }
body.rd.x-page .x-h3 { margin: 0; color: var(--x-ink); font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; }
body.rd.x-page .x-lead { margin: 0; color: var(--x-text); font-size: 17.5px; line-height: 1.8; }
body.rd.x-page .x-body { margin: 14px 0 0; color: var(--x-text); font-size: 16.5px; line-height: 1.75; }
body.rd.x-page .x-body strong, body.rd.x-page .x-lead strong { color: var(--x-ink); }
body.rd.x-page .x-subhead { margin: clamp(64px, 7vw, 96px) 0 28px; color: var(--x-ink); font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
body.rd.x-page .x-sec .rd-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 0 0 24px; border-radius: 18px; background: linear-gradient(150deg, #f3f9fe 0%, #dcedfb 100%); box-shadow: inset 0 0 0 1px #d4e8f8, 0 6px 16px -8px #176db566; color: var(--x-blue); }
body.rd.x-page .x-sec .rd-icon svg { width: 28px; height: 28px; }
body.rd.x-page .x-sec--sky .rd-icon { background: linear-gradient(150deg, #ffffff 0%, #eaf5fd 100%); }

/* Tags */
body.rd.x-page .x-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
body.rd.x-page .x-tags li { padding: 8px 15px; border: 1px solid var(--x-line-2); border-radius: 999px; background: #fff; color: var(--x-text); font-size: 14px; font-weight: 600; }

/* Checks and links */
body.rd.x-page .x-checks { display: grid; gap: 12px; margin: 24px 0 0 !important; padding: 0 !important; list-style: none !important; }
body.rd.x-page .x-checks li { position: relative; margin: 0 !important; padding: 0 0 0 32px !important; border: 0 !important; background: none !important; color: var(--x-text) !important; font-size: 15.5px !important; line-height: 1.65 !important; list-style: none !important; }
body.rd.x-page .x-checks li::before { content: "" !important; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--x-sky) var(--x-check) center/22px no-repeat !important; }
body.rd.x-page .x-checks li::marker { content: none; }
body.rd.x-page .x-link { display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; margin: 28px 0 0 !important; padding: 13px 22px !important; border: 1px solid var(--x-line-2) !important; border-radius: 999px !important; background: #fff !important; color: var(--x-ink) !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none; cursor: pointer; transition: border-color .2s, color .2s; }
body.rd.x-page .x-link::after { content: "→"; font-weight: 500; }
body.rd.x-page .x-link:hover { border-color: var(--x-blue) !important; color: var(--x-blue-text) !important; }
body.rd.x-page .x-button { display: inline-flex !important; align-items: center; gap: 10px; padding: 17px 30px !important; border: 0 !important; border-radius: 999px !important; background: var(--x-blue) !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; text-decoration: none; white-space: nowrap; transition: background .2s; }
body.rd.x-page .x-button:hover { background: #12599a !important; }

/* ================= Guide (핵심 기술 구성) ================= */
body.rd.x-page .x-guide .hl-guide-player { display: grid !important; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr) !important; gap: 24px !important; align-items: stretch; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.rd.x-page .x-guide .hl-guide-scenes { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-rows: 1fr; gap: 12px !important; align-content: stretch; width: auto !important; }
body.rd.x-page .x-guide .hl-guide-scenes > button > span:last-child { display: block !important; min-width: 0; writing-mode: horizontal-tb !important; }
body.rd.x-page .x-guide .hl-guide-scenes > button { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; gap: 16px !important; align-items: start; min-height: 0 !important; padding: 26px 24px !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: none !important; color: var(--x-ink) !important; text-align: left; transition: background .2s, color .2s; }
body.rd.x-page .x-guide .hl-guide-scenes > button[aria-pressed="true"] { background: var(--x-navy) !important; }
body.rd.x-page .x-guide .hl-guide-scenes .hfm-path-number { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--x-sky) !important; color: var(--x-blue-text) !important; font-size: 14px !important; font-weight: 700 !important; }
body.rd.x-page .x-guide .hl-guide-scenes > button[aria-pressed="true"] .hfm-path-number { background: var(--x-blue) !important; color: #fff !important; }
body.rd.x-page .x-guide .hl-guide-scenes small { display: block; color: var(--x-muted) !important; font-size: 13px !important; font-weight: 600; }
body.rd.x-page .x-guide .hl-guide-scenes strong { display: block; margin: 6px 0 8px; color: var(--x-ink) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em; }
body.rd.x-page .x-guide .hl-guide-scenes .hm-guide-detail { display: block; color: var(--x-text) !important; font-size: 14.5px !important; line-height: 1.6 !important; }
body.rd.x-page .x-guide .hl-guide-scenes > button[aria-pressed="true"] :is(strong, .hm-guide-detail) { color: #fff !important; }
body.rd.x-page .x-guide .hl-guide-scenes > button[aria-pressed="true"] small { color: #8fc9f0 !important; }
body.rd.x-page .x-guide :is(.hl-guide-film, .hfv-film, .hfv-screen) { height: 100%; border: 0 !important; border-radius: 24px !important; overflow: hidden; box-shadow: none !important; }

/* ================= Film (기술 원리) ================= */
body.rd.x-page .x-film .hfv-film { margin: 0 !important; padding: clamp(20px, 2.6vw, 36px) !important; border: 0 !important; border-radius: 28px !important; background: var(--x-sky) !important; box-shadow: none !important; }
body.rd.x-page .x-film .hfv-film-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 20px !important; }
body.rd.x-page .x-film .hfv-eyebrow { padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--x-blue-text) !important; font-size: 13px !important; font-weight: 700; }
body.rd.x-page .x-film .hfv-eyebrow span { color: var(--x-muted); font-weight: 600; }
body.rd.x-page .x-film .hfv-film-heading :is(h2, h3) { margin: 0 !important; color: var(--x-ink) !important; font-size: 20px !important; font-weight: 700 !important; }
body.rd.x-page .x-film .hfv-screen { border-radius: 20px !important; overflow: hidden; }
body.rd.x-page .x-film .hfv-chapters { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin: 16px 0 0 !important; }
body.rd.x-page .x-film .hfv-chapters button { display: grid !important; gap: 4px; padding: 16px 18px !important; border: 0 !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; color: var(--x-ink) !important; font-size: 15px !important; font-weight: 600 !important; text-align: left; }
body.rd.x-page .x-film .hfv-chapters button span { color: var(--x-blue-text) !important; font-size: 12.5px !important; font-weight: 700 !important; }
body.rd.x-page .x-film .hfv-chapters button[aria-pressed="true"] { background: var(--x-navy) !important; color: #fff !important; }
body.rd.x-page .x-film .hfv-chapters button[aria-pressed="true"] span { color: #8fc9f0 !important; }
body.rd.x-page .x-film .hfv-legend { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 16px 2px 0 !important; color: var(--x-muted) !important; font-size: 13px !important; }
body.rd.x-page .x-film .hfv-motion-preference button { padding: 6px 12px !important; border: 1px solid var(--x-line-2) !important; border-radius: 999px !important; background: #fff !important; color: var(--x-text) !important; font-size: 13px !important; }
body.rd.x-page .x-film :is(.hfv-transcript, .hfv-archive) { margin: 16px 2px 0 !important; border: 0 !important; background: none !important; }
body.rd.x-page .x-film :is(.hfv-transcript, .hfv-archive) summary { display: inline-flex; align-items: center; gap: 8px; color: var(--x-text) !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; list-style: none; }
body.rd.x-page .x-film :is(.hfv-transcript, .hfv-archive) summary::-webkit-details-marker { display: none; }
body.rd.x-page .x-film :is(.hfv-transcript, .hfv-archive) summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--x-blue-text); font-weight: 700; }
body.rd.x-page .x-film :is(.hfv-transcript, .hfv-archive)[open] summary::before { content: "–"; }
body.rd.x-page .x-film .hfv-archive { padding: 0 clamp(20px, 2.6vw, 36px); }
body.rd.x-page .x-film .hfv-archive img { margin-top: 14px; border-radius: 16px; }

/* What “무폭기” means */
body.rd.x-page .x-define { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 48px; margin-top: 24px; padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--x-line); border-radius: 28px; background: #fff; }
body.rd.x-page .x-define-q { margin: 0; color: var(--x-ink); font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; }
body.rd.x-page .x-define-a { margin: 0; color: var(--x-text); font-size: 16.5px; line-height: 1.8; }
body.rd.x-page .x-define-a strong { color: var(--x-blue-text); font-weight: 700; }

/* ================= Stats on navy ================= */
body.rd.x-page .x-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.rd.x-page .x-stat { padding: 4px clamp(20px, 3vw, 48px); border-left: 1px solid #ffffff24; }
body.rd.x-page .x-stat:first-child { padding-left: 0; border-left: 0; }
body.rd.x-page .x-stat-label { margin: 0 0 14px; color: #8fc9f0; font-size: 15px; font-weight: 700; }
body.rd.x-page .x-stat-value { margin: 0; color: #fff; font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
body.rd.x-page .x-stat-value span { margin-left: 8px; color: #cfe6f7; font-size: 18px; font-weight: 600; letter-spacing: 0; }
body.rd.x-page .x-stat-note { margin: 14px 0 0; color: #ffffffa6; font-size: 14.5px; line-height: 1.6; }

/* ================= Feature rows ================= */
body.rd.x-page .x-features { border-top: 1px solid var(--x-line); }
body.rd.x-page .x-feature { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 64px); align-items: start; padding: clamp(44px, 5vw, 72px) 0; border-bottom: 1px solid var(--x-line); }
body.rd.x-page .x-feature-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--x-navy); color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.rd.x-page .x-feature-label { margin: 0 0 12px; color: var(--x-blue-text); font-size: 15px; font-weight: 700; }
body.rd.x-page .x-feature-copy .x-h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.38; }
body.rd.x-page .x-feature-media { margin: 0; overflow: hidden; border-radius: 24px; background: var(--x-sky); }
body.rd.x-page .x-feature-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body.rd.x-page .x-feature-media :is(figcaption, .hfv-small-note) { margin: 0 !important; padding: 14px 20px 0; color: var(--x-muted) !important; font-size: 13px !important; line-height: 1.55; background: none !important; }
body.rd.x-page .x-feature-media figcaption { padding-bottom: 18px; }
body.rd.x-page .x-feature-media button { margin: 14px 20px 0 !important; padding: 8px 14px !important; border: 1px solid var(--x-line-2) !important; border-radius: 999px !important; background: #fff !important; color: var(--x-text) !important; font-size: 13px !important; font-weight: 600 !important; }

/* ================= Versus ================= */
body.rd.x-page .x-versus { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body.rd.x-page .x-versus-col { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: 28px; background: #fff; }
body.rd.x-page .x-versus-col.is-ours { box-shadow: inset 0 0 0 2px var(--x-blue); }
body.rd.x-page .x-versus-tag { align-self: flex-start; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; background: #eef2f5; color: var(--x-text); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
body.rd.x-page .x-versus-col.is-ours .x-versus-tag { background: var(--x-blue); color: #fff; }
body.rd.x-page .x-versus-media { margin: 24px 0 4px; overflow: hidden; border-radius: 18px; background: var(--x-sky); }
body.rd.x-page .x-versus-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
body.rd.x-page .x-versus-vs { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 60px; height: 60px; border: 6px solid var(--x-sky); border-radius: 50%; background: var(--x-navy); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .04em; transform: translate(-50%, -50%); }

/* ================= Evidence and effects ================= */
body.rd.x-page .x-evidence { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 56px; align-items: center; }
body.rd.x-page .x-evidence-value { margin: 0; color: var(--x-blue); font-size: clamp(64px, 7vw, 104px); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
body.rd.x-page .x-evidence-caption { margin: 16px 0 0; color: var(--x-muted); font-size: 15px; font-weight: 600; }
body.rd.x-page .x-evidence-chart .hl-energy-preview { margin: 0 !important; padding: clamp(24px, 3vw, 40px) !important; border: 0 !important; border-radius: 28px !important; background: var(--x-sky) !important; box-shadow: none !important; }
body.rd.x-page .x-effects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--x-line); }
body.rd.x-page .x-effect { padding: 40px clamp(20px, 3vw, 40px) 8px; border-left: 1px solid var(--x-line); }
body.rd.x-page .x-effect:first-child { padding-left: 0; border-left: 0; }
body.rd.x-page .x-effect-label { margin: 0 0 10px; color: var(--x-muted); font-size: 15px; font-weight: 600; }
body.rd.x-page .x-effect-value { margin: 0; color: var(--x-ink); font-size: clamp(22px, 2vw, 26px); font-weight: 700; line-height: 1.42; letter-spacing: -.025em; }
body.rd.x-page .x-effect-value br { display: none; }
body.rd.x-page .x-effect-value strong { display: block; color: var(--x-blue-text); font-weight: 700; }

/* ================= Trust ================= */
body.rd.x-page .x-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body.rd.x-page .x-quote { margin: 0; padding: clamp(32px, 3.4vw, 48px); border-radius: 28px; background: #fff; }
body.rd.x-page .x-quote blockquote { margin: 0; color: var(--x-ink); font-size: 18px; line-height: 1.8; }
body.rd.x-page .x-quote blockquote::before { content: "“"; display: block; height: 40px; color: var(--x-blue); font: 700 64px/1 Georgia, serif; }
body.rd.x-page .x-quote blockquote strong { color: var(--x-blue-text); }
body.rd.x-page .x-quote figcaption { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--x-line); color: var(--x-muted); font-size: 14px; }
body.rd.x-page .x-quote figcaption i { font-style: normal; color: var(--x-text); font-weight: 600; }
body.rd.x-page .x-certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.rd.x-page .x-cert { padding: 30px 28px; border-radius: 24px; background: #fff; }
body.rd.x-page .x-cert-label { margin: 0; color: var(--x-muted); font-size: 14px; font-weight: 600; }
body.rd.x-page .x-cert-code { margin: 8px 0 6px; color: var(--x-ink); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
body.rd.x-page .x-cert-note { margin: 0; color: var(--x-text); font-size: 14px; line-height: 1.55; }
body.rd.x-page .x-docs { margin-top: clamp(64px, 7vw, 96px) !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.rd.x-page .x-docs .hfe-subheading { margin-bottom: 28px !important; }
body.rd.x-page .x-docs .hfe-subheading :is(h3, h4) { margin: 0 0 8px !important; color: var(--x-ink) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.025em; }
body.rd.x-page .x-docs .hfe-subheading p { margin: 0 !important; color: var(--x-text) !important; font-size: 16px !important; }
body.rd.x-page .x-docs .hfe-document-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
body.rd.x-page .x-docs .hfe-document { overflow: hidden; border: 0 !important; border-radius: 24px !important; background: #fff !important; box-shadow: none !important; }
body.rd.x-page .x-docs .hfe-document img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; padding: 24px; object-fit: contain !important; background: #e9f4fc; }
body.rd.x-page .x-docs .hfe-document :is(p, span, strong, small) { color: var(--x-text) !important; }
body.rd.x-page .x-docs .hfe-document a { color: inherit; text-decoration: none; }

/* ================= Table and notes ================= */
body.rd.x-page .x-table { overflow-x: auto; border: 1px solid var(--x-line) !important; border-radius: 24px !important; background: #fff !important; box-shadow: none !important; }
body.rd.x-page .x-table table { width: 100%; min-width: 640px; border-collapse: collapse; }
body.rd.x-page .x-table :is(th, td) { padding: 20px 24px !important; border: 0 !important; border-bottom: 1px solid var(--x-line) !important; background: none !important; color: var(--x-text) !important; font-size: 15.5px !important; line-height: 1.55; text-align: left; vertical-align: middle; }
body.rd.x-page .x-table thead th { background: var(--x-navy) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; }
body.rd.x-page .x-table tbody tr:last-child :is(th, td) { border-bottom: 0 !important; }
body.rd.x-page .x-table tbody :is(th, td):first-child { color: var(--x-ink) !important; font-weight: 700 !important; }
body.rd.x-page .x-footnote { margin: 16px 4px 0 !important; color: var(--x-muted) !important; font-size: 14px !important; }
body.rd.x-page .x-note { margin-top: 24px !important; padding: 0 !important; border: 1px solid var(--x-line) !important; border-radius: 18px !important; background: #fff !important; }
body.rd.x-page .x-note summary { padding: 18px 24px !important; color: var(--x-ink) !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer; }
body.rd.x-page .x-note > div { padding: 0 24px 20px !important; }
body.rd.x-page .x-note p { color: var(--x-text) !important; font-size: 14.5px !important; line-height: 1.7; }

/* ================= Next page ================= */
body.rd.x-page .x-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding: clamp(40px, 5vw, 72px); border-radius: 32px; background: var(--x-navy); }
body.rd.x-page .x-next > div { flex: 1 1 480px; }
body.rd.x-page .x-next .x-eyebrow { color: #8fc9f0; }
body.rd.x-page .x-next .x-h2 { color: #fff; font-size: clamp(26px, 2.6vw, 36px); }
body.rd.x-page .x-next .x-lead { margin-top: 12px; color: #ffffffb3; }

/* ================= Responsive ================= */
@media (max-width: 1080px) {
  body.rd { --x-wrap: calc(100% - 48px); }
  body.rd.x-page .x-head--split { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-guide .hl-guide-player { grid-template-columns: minmax(0, 1fr) !important; }
  body.rd.x-page .x-feature { grid-template-columns: 56px minmax(0, 1fr); row-gap: 28px; }
  body.rd.x-page .x-feature-media { grid-column: 2; }
  body.rd.x-page .x-evidence { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.rd.x-page .x-define { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.rd { --x-wrap: calc(100% - 40px); }
  body.rd .x-pagehead-top { flex-direction: column; align-items: flex-start; }
  body.rd .x-path { margin-left: -8px !important; }
  body.rd .x-tabs a { min-height: 52px !important; font-size: 15px !important; }
  body.rd.x-page .x-film .hfv-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.rd.x-page .x-stats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.rd.x-page .x-stat { padding: 28px 0 0; border-left: 0; border-top: 1px solid #ffffff24; }
  body.rd.x-page .x-stat:first-child { padding-top: 0; border-top: 0; }
  body.rd.x-page .x-feature { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-feature-media { grid-column: auto; }
  body.rd.x-page .x-versus { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-versus-vs { display: none; }
  body.rd.x-page .x-effects { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-effect { padding: 28px 0 0; border-left: 0; }
  body.rd.x-page .x-effect + .x-effect { margin-top: 28px; border-top: 1px solid var(--x-line); }
  body.rd.x-page .x-quotes { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-certs { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-docs .hfe-document-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.rd.x-page .x-next { padding: 32px 24px; }
}

/* Field links under the header: outline pills, left aligned. */
body.rd .x-pagehead + .wf-context-nav .wf-content-inner { width: var(--x-wrap) !important; max-width: none !important; padding: 0 !important; }
body.rd .x-pagehead + .wf-context-nav .wf-treatment-links { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; gap: 8px !important; }
body.rd .x-pagehead + .wf-context-nav .wf-treatment-links a { display: inline-flex !important; align-items: center; justify-content: center; height: 40px !important; min-height: 40px !important; padding: 0 18px !important; line-height: 1 !important; white-space: nowrap; border: 1px solid var(--x-line-2) !important; border-radius: 999px !important; background: #fff !important; color: var(--x-text) !important; font-size: 14px !important; font-weight: 600 !important; }
body.rd .x-pagehead + .wf-context-nav .wf-treatment-links a:hover { border-color: var(--x-blue) !important; color: var(--x-blue-text) !important; }
body.rd.x-page .x-sec { scroll-margin-top: 72px; }
body.rd.x-page .x-table tbody tr:nth-child(even) :is(th, td) { background: #f8fbfd !important; }

/* ================= Product template (BioPuri) ================= */
body.rd.x-page .x-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; }
body.rd.x-page .x-overview-sub { margin: 18px 0 0; color: var(--x-ink); font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.5; letter-spacing: -.02em; }
body.rd.x-page .x-overview .x-body { margin-top: 18px; font-size: 17px; }
body.rd .x-slot { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; background: linear-gradient(180deg, #f6fafd 0%, #e8f2fa 100%); }
body.rd .x-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.rd .x-slot figcaption { display: none; }
body.rd .x-slot.is-empty { display: grid; place-items: center; border: 1.5px dashed #b9d3e8; background: repeating-linear-gradient(135deg, #f5f9fc 0 16px, #eef5fb 16px 32px); }
body.rd .x-slot.is-empty img { display: none; }
body.rd .x-slot.is-empty figcaption { display: grid; gap: 8px; justify-items: center; max-width: 82%; text-align: center; }
body.rd .x-slot figcaption span { padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--x-blue-text); font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 12px -6px #001d3a33; }
body.rd .x-slot figcaption strong { color: var(--x-ink); font-size: 16px; font-weight: 700; line-height: 1.45; }
body.rd .x-slot figcaption code { color: var(--x-muted); font: 12.5px/1.4 ui-monospace, Menlo, monospace; }
body.rd.x-page .x-rows { display: grid; gap: 12px; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
body.rd.x-page .x-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px 32px; border: 1px solid var(--x-line); border-radius: 22px; background: #fff; }
body.rd.x-page .x-row-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--x-navy); color: #fff; font-size: 14px; font-weight: 700; }
body.rd.x-page .x-row h3 { margin: 0; color: var(--x-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
body.rd.x-page .x-row p { margin: 6px 0 0; color: var(--x-text); font-size: 15.5px; line-height: 1.65; }

/* Catalog: filter + table */
body.rd.x-page .x-catalog .r3-filter-bar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.rd.x-page .x-catalog .r3-filter-bar button { min-height: 42px !important; padding: 0 20px !important; border: 1px solid var(--x-line-2) !important; border-radius: 999px !important; background: #fff !important; color: var(--x-text) !important; font-size: 14.5px !important; font-weight: 600 !important; }
body.rd.x-page .x-catalog .r3-filter-bar button.is-active { border-color: var(--x-navy) !important; background: var(--x-navy) !important; color: #fff !important; }
body.rd.x-page .x-catalog .r3-filter-bar span { margin-left: auto; color: var(--x-muted) !important; font-size: 14px !important; }
body.rd.x-page .x-catalog .wf-note { margin: 16px 4px 0 !important; color: var(--x-muted) !important; font-size: 13.5px !important; }
body.rd.x-page .x-table td a, body.rd.x-page .x-table td small { color: var(--x-blue-text) !important; font-size: 12.5px !important; font-weight: 600; }

/* Diagram stage */
body.rd.x-page .x-diagram .r3-filtration { margin: 0 !important; padding: clamp(24px, 3vw, 44px) !important; border: 1px solid var(--x-line) !important; border-radius: 32px !important; background: #fff !important; box-shadow: none !important; }
body.rd.x-page .x-diagram .r3-filtration-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
body.rd.x-page .x-diagram .r3-filtration-head .wf-kicker { width: 100%; margin: 0 !important; color: var(--x-blue-text) !important; font-size: 14px !important; }
body.rd.x-page .x-diagram .r3-filtration-head h3 { margin: 0 !important; color: var(--x-ink) !important; font-size: 22px !important; font-weight: 700 !important; }
body.rd.x-page .x-diagram .r3-mode-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--x-sky); }
body.rd.x-page .x-diagram .r3-mode-tabs button { min-height: 38px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: none !important; color: var(--x-text) !important; font-size: 14px !important; font-weight: 600 !important; }
body.rd.x-page .x-diagram .r3-mode-tabs button.is-active { background: var(--x-navy) !important; color: #fff !important; }
body.rd.x-page .x-diagram .x-replaced { display: none !important; }
body.rd.x-page .x-diagram .x-slot { aspect-ratio: 16 / 8; }
body.rd.x-page .x-diagram .r3-filtration-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 20px 0 0 !important; padding: 0 !important; }
body.rd.x-page .x-diagram .r3-filtration-steps li { list-style: none; }
body.rd.x-page .x-diagram .r3-filtration-steps button { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 60px !important; padding: 0 20px !important; border: 0 !important; border-radius: 16px !important; background: var(--x-sky) !important; color: var(--x-ink) !important; font-size: 15.5px !important; font-weight: 600 !important; text-align: left; }
body.rd.x-page .x-diagram .r3-filtration-steps button small { color: var(--x-blue-text) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; vertical-align: baseline; position: static !important; top: auto !important; }
body.rd.x-page .x-diagram .r3-filtration-steps :is(button[aria-pressed="true"], button.is-active, li.is-active button) { background: var(--x-navy) !important; color: #fff !important; }
body.rd.x-page .x-diagram .r3-filtration-steps :is(button[aria-pressed="true"], button.is-active, li.is-active button) small { color: #8fc9f0 !important; }
body.rd.x-page .x-diagram .r3-filtration-caption { margin: 18px 0 0 !important; color: var(--x-ink) !important; font-size: 16px !important; font-weight: 500; }
body.rd.x-page .x-diagram .wf-note { margin: 8px 0 0 !important; color: var(--x-muted) !important; font-size: 13.5px !important; }

/* Performance blocks */
body.rd.x-page .x-perf { padding: clamp(36px, 4vw, 56px); border-radius: 32px; background: #fff; }
body.rd.x-page .x-perf + .x-perf { margin-top: 24px; }
body.rd.x-page .x-perf-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 48px; align-items: start; margin-bottom: clamp(28px, 3vw, 40px); }
body.rd.x-page .x-perf-head .x-body { margin: 0; }
body.rd.x-page .x-sem { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.rd.x-page .x-sem .hfe-sem-rows { display: grid !important; gap: 20px !important; }
body.rd.x-page .x-sem .hfe-sem-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; align-items: center; padding: 0 !important; border: 0 !important; background: none !important; }
body.rd.x-page .x-sem .hfe-sem-row + .hfe-sem-row { padding-top: 20px !important; border-top: 1px solid var(--x-line) !important; }
body.rd.x-page .x-sem .hfe-sem-label { grid-column: 1 / -1 !important; display: flex; align-items: baseline; gap: 10px; }
body.rd.x-page .x-sem .hfe-sem-label { color: var(--x-ink) !important; font-size: 18px !important; font-weight: 700 !important; }
body.rd.x-page .x-sem .hfe-sem-label :is(small, span) { display: block; margin-top: 4px; color: var(--x-muted) !important; font-size: 13px !important; font-weight: 600 !important; }
body.rd.x-page .x-sem .hfe-photo { position: relative; margin: 0 !important; overflow: hidden; border: 0 !important; border-radius: 16px !important; background: #0d1823 !important; }
body.rd.x-page .x-sem .hfe-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body.rd.x-page .x-sem .hfe-photo figcaption { position: absolute; left: 10px; bottom: 10px; margin: 0 !important; padding: 4px 10px !important; border-radius: 999px; background: #ffffffe6 !important; color: var(--x-ink) !important; font-size: 12.5px !important; font-weight: 700; }
body.rd.x-page .x-sem .hfe-source { margin: 16px 0 0 !important; color: var(--x-muted) !important; font-size: 13.5px !important; }
body.rd.x-page .x-perf-data { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
body.rd.x-page .x-chart { margin: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: 24px; background: var(--x-sky); }
body.rd.x-page .x-perf-data .x-table { align-self: center; }
body.rd.x-page .x-perf-data .x-table table { min-width: 0; }
body.rd.x-page .x-chart--cfp { padding: clamp(20px, 3vw, 40px); }
body.rd.x-page .x-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 16px; color: var(--x-text); font-size: 14px; font-weight: 600; }
body.rd.x-page .x-chart-legend span::before { content: ""; display: inline-block; width: 22px; height: 4px; margin-right: 8px; border-radius: 2px; vertical-align: middle; }
body.rd.x-page .x-chart-legend .is-diff::before { background: var(--x-blue); }
body.rd.x-page .x-chart-legend .is-cum::before { background: var(--x-navy); }
body.rd.x-page .x-chart-legend .x-chart-src { margin-left: auto; color: var(--x-muted); font-weight: 500; }
body.rd.x-page .x-chart-legend .x-chart-src::before { content: none; }
body.rd.x-page .x-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
body.rd.x-page .x-chart-svg .g { stroke: #d7e6f2; stroke-width: 1; stroke-dasharray: 3 5; }
body.rd.x-page .x-chart-svg .a { stroke: #9fb6c8; stroke-width: 1; }
body.rd.x-page .x-chart-svg .t { fill: var(--x-muted); font-size: 13px; font-weight: 500; }
body.rd.x-page .x-chart-svg .ax { fill: var(--x-text); font-size: 13.5px; font-weight: 600; }
body.rd.x-page .x-chart-svg .d { fill: none; stroke: var(--x-blue); stroke-width: 3; stroke-linejoin: round; }
body.rd.x-page .x-chart-svg .c { fill: none; stroke: var(--x-navy); stroke-width: 2.5; stroke-linejoin: round; }
body.rd.x-page .x-chart-svg .p { fill: #fff; stroke: var(--x-blue); stroke-width: 3; }
body.rd.x-page .x-chart-svg .lb { fill: var(--x-navy); }
body.rd.x-page .x-chart-svg .lt { fill: #fff; font-size: 13px; font-weight: 700; }
body.rd.x-page .x-original { margin-top: 18px; }
body.rd.x-page .x-original summary { display: inline-flex; align-items: center; gap: 8px; color: var(--x-text); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
body.rd.x-page .x-original summary::-webkit-details-marker { display: none; }
body.rd.x-page .x-original summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--x-blue-text); font-weight: 700; }
body.rd.x-page .x-original[open] summary::before { content: "–"; }
body.rd.x-page .x-original figure { margin: 16px 0 0 !important; padding: 16px !important; border-radius: 18px !important; background: #fff !important; }
body.rd.x-page .x-original img { border-radius: 10px; }

/* Supply types */
body.rd.x-page .x-supply { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body.rd.x-page .x-supply-card { margin: 0; overflow: hidden; border-radius: 28px; background: var(--x-sky); }
body.rd.x-page .x-supply-card { background: radial-gradient(ellipse 70% 55% at 50% 58%, #ffffff 0%, var(--x-sky) 72%) !important; }
body.rd.x-page .x-supply-card img { display: block; width: 100%; aspect-ratio: 4 / 3; padding: clamp(36px, 5vw, 72px); object-fit: contain; filter: drop-shadow(0 26px 22px rgba(0, 29, 58, .16)) drop-shadow(0 4px 6px rgba(0, 29, 58, .08)); }
body.rd.x-page .x-supply-card figcaption { padding: 0 32px 28px; color: var(--x-ink); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

/* Consultation box with two actions */
body.rd.x-page .x-next-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.rd.x-page .x-button--ghost { background: transparent !important; box-shadow: inset 0 0 0 1px #ffffff59; }
body.rd.x-page .x-button--ghost:hover { background: #ffffff14 !important; }

@media (max-width: 1080px) {
  body.rd.x-page .x-overview { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-perf-head { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-perf-data { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.rd.x-page .x-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; }
  body.rd.x-page .x-diagram .r3-filtration-steps { grid-template-columns: minmax(0, 1fr) !important; }
  body.rd.x-page .x-diagram .x-slot { aspect-ratio: 4 / 3; }
  body.rd.x-page .x-supply { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-perf { padding: 24px 20px; }
}
@media (max-width: 720px) {
  body.rd .x-path { display: none !important; }
  body.rd.x-page .x-perf-data .x-table table { min-width: 460px; }
  body.rd.x-page .x-chart--cfp { overflow-x: auto; }
  body.rd.x-page .x-chart--cfp .x-chart-svg { min-width: 640px; }
  body.rd.x-page .x-chart-legend .x-chart-src { width: 100%; margin-left: 0; }
}
/* Short notes and captions break into even lines so no word is left alone. */
body.rd :is(.x-pagehead, .x-sec) :is(.x-stat-note, .x-cert-note, .x-effect-label, .x-evidence-caption, .x-feature-label, .x-row p, .x-pagelead, .x-lead, figcaption, .x-footnote) { text-wrap: balance; }
body.rd.x-page .x-film .hfv-film-heading { padding: 0 !important; }
body.rd.x-page .x-film .hfv-film-heading > * { margin: 0 !important; }
body.rd.x-page .x-film .hfv-eyebrow { display: inline-flex !important; align-items: center; gap: 8px; line-height: 1.2 !important; }

/* Cards side by side share their inner rows, so titles, pictures and notes start on the same lines. */
@supports (grid-template-rows: subgrid) {
  body.rd.x-page .x-versus { grid-template-rows: repeat(4, auto); }
  body.rd.x-page .x-versus-col { display: grid !important; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  body.rd.x-page .x-versus-col > .x-versus-tag { justify-self: start; align-self: start; }
  body.rd.x-page .x-stats { grid-template-rows: repeat(3, auto); }
  body.rd.x-page .x-stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  body.rd.x-page .x-effects { grid-template-rows: repeat(3, auto); }
  body.rd.x-page .x-effect { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  body.rd.x-page .x-effect > .rd-icon { justify-self: start; }
  body.rd.x-page .x-certs { grid-template-rows: repeat(4, auto); }
  body.rd.x-page .x-cert { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  body.rd.x-page .x-cert > .rd-icon { justify-self: start; }
  body.rd.x-page .x-quotes { grid-template-rows: repeat(2, auto); }
  body.rd.x-page .x-quote { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  body.rd.x-page .x-quote figcaption { align-self: end; }
}
@media (max-width: 720px) {
  body.rd.x-page :is(.x-versus-col, .x-stat, .x-effect, .x-cert, .x-quote) { grid-row: auto !important; grid-template-rows: none !important; }
}
/* Highlighted words in titles keep their brand colour. */
body.rd.x-page :is(.x-h2, .x-subhead, .x-h3) :is([class*="accent"], em) { color: var(--x-blue-text); font-style: normal; }
/* Certificate cards: picture edge to edge, text on one 24px inset. */
body.rd.x-page .x-docs .hfe-document a { display: flex !important; flex-direction: column; height: 100%; padding: 0 0 26px !important; }
body.rd.x-page .x-docs .hfe-document img { margin: 0 0 22px !important; border-radius: 0 !important; }
body.rd.x-page .x-docs .hfe-document :is(.hfe-document-kind, h4, h3, .hfe-open, p) { margin-left: 0 !important; margin-right: 0 !important; padding: 0 26px !important; }
body.rd.x-page .x-docs .hfe-document .hfe-document-kind { color: var(--x-muted) !important; font-size: 13px !important; font-weight: 600 !important; }
body.rd.x-page .x-docs .hfe-document :is(:is(h3, h4), h3) { margin: 6px 0 14px !important; color: var(--x-ink) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.02em; }
body.rd.x-page .x-docs .hfe-document .hfe-open { margin-top: auto !important; color: var(--x-blue-text) !important; font-size: 14px !important; font-weight: 600 !important; }

/* ================= Side bar (client request: a vertical side bar on desktop) ================= */
@media (min-width: 1200px) {
  body.rd .r3-side-nav {
    right: 24px !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
    display: flex !important; flex-direction: column; gap: 2px;
    width: 196px !important; max-width: none; max-height: calc(100vh - 200px); overflow-y: auto; scrollbar-width: none;
    padding: 20px 16px !important;
    border: 1px solid #e3ebf2 !important; border-radius: 22px !important;
    background: #ffffffeb !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -22px #001d3a59 !important;
  }
  body.rd .r3-side-nav::-webkit-scrollbar { display: none; }
  /* Rail through the dot centres: nav border 1 + padding 16 + dot centre 9 = 26px. */
  body.rd .r3-side-nav::before { content: ""; position: absolute; left: 24px; top: 34px; bottom: 34px; width: 2px; border-radius: 1px; background: #e6eef5; }
  body.rd .r3-side-nav button {
    position: relative; display: block !important; width: 100%;
    padding: 8px 2px 8px 28px !important; border: 0 !important; border-radius: 10px; background: none !important;
    color: #7b8c9b !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.45 !important;
    text-align: left; white-space: normal; word-break: keep-all; transition: color .2s;
  }
  body.rd .r3-side-nav button::before {
    content: ""; position: absolute; left: 4px; top: calc(8px + .725em); width: 10px; height: 10px; border-radius: 50%;
    background: #fff; box-shadow: inset 0 0 0 2px #c7d6e3; transform: translateY(-50%); transition: background .2s, box-shadow .2s;
  }
  body.rd .r3-side-nav button:hover { color: #0e1d2b !important; }
  body.rd .r3-side-nav button:hover::before { box-shadow: inset 0 0 0 2px #176db5; }
  body.rd .r3-side-nav button.is-active { color: #0e1d2b !important; font-weight: 700 !important; }
  body.rd .r3-side-nav button.is-active::before { background: #176db5; box-shadow: 0 0 0 4px #176db52e; }
  body.rd .r3-side-nav button:focus-visible { outline: 2px solid #176db5; outline-offset: 1px; }
}
/* Where the margin is narrower than the side bar, the content narrows so nothing sits under it. */
@media (min-width: 1200px) and (max-width: 1719px) {
  body.rd:has(.r3-side-nav) { --x-wrap: min(1280px, calc(100% - 2 * 196px)); }
  body.rd .r3-side-nav { width: 156px !important; right: 18px !important; padding: 18px 12px !important; }
  body.rd .r3-side-nav::before { left: 20px; }
  body.rd .r3-side-nav button { padding-left: 26px !important; font-size: 13px !important; }
}
/* Tablet and phone: the same list moves to a bar under the site header. */
@media (max-width: 1199px) {
  body.rd .r3-side-nav {
    display: flex !important; flex-direction: row; gap: 4px;
    left: 0 !important; right: 0 !important; top: var(--x-header-h, 72px) !important; bottom: auto !important; transform: none !important;
    width: auto !important; max-width: none !important; padding: 8px 16px !important; overflow-x: auto; scrollbar-width: none;
    border: 0 !important; border-bottom: 1px solid #e3ebf2 !important; border-radius: 0 !important;
    background: #ffffffeb !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 24px -20px #001d3a66 !important;
  }
  body.rd .r3-side-nav::-webkit-scrollbar { display: none; }
  body.rd .r3-side-nav::before { content: none; }
  body.rd .r3-side-nav button, body.rd .r3-side-nav [data-r3-scroll].is-active {
    display: inline-flex !important; align-items: center; flex: 0 0 auto;
    height: 36px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important;
    background: none !important; color: #5d7083 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap;
  }
  body.rd .r3-side-nav button.is-active { background: #001d3a !important; color: #fff !important; }
}
/* The last line inside a picture frame always has room below it. */
body.rd.x-page .x-feature-media > figcaption,
body.rd.x-page .x-feature-media > :last-child:not(img) { padding-bottom: 20px !important; }

/* ================= Cover band (original banner picture, light text) ================= */
body.rd .x-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #001d3a url('./assets/ai-20260914/subpage-blue-current.webp') center 52% / cover no-repeat;
}
body.rd .x-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 29, 58, .86) 0%, rgba(0, 29, 58, .62) 48%, rgba(0, 29, 58, .28) 100%), linear-gradient(0deg, rgba(0, 29, 58, .35), rgba(0, 29, 58, 0) 45%);
}
body.rd .x-cover .x-pagehead-inner { padding: clamp(64px, 7vw, 104px) 0 clamp(64px, 7vw, 100px); }
body.rd .x-cover .x-pagehead-inner > :last-child { margin-bottom: 0; }
body.rd .x-cover .x-tagline { color: #8fd0ff; }
body.rd .x-cover .x-title { color: #fff; text-shadow: 0 2px 24px rgba(0, 20, 40, .25); }
body.rd .x-cover .x-pagelead { color: rgba(255, 255, 255, .84); }
body.rd .x-cover .x-path .hfp-home { color: rgba(255, 255, 255, .7) !important; }
body.rd .x-cover .x-path .hfp-path-select::before { background: rgba(255, 255, 255, .45); }
body.rd .x-cover .x-path .hfp-path-select summary { color: rgba(255, 255, 255, .72) !important; }
body.rd .x-cover .x-path .hfp-path-select:last-of-type summary,
body.rd .x-cover .x-path .hfp-path-leaf { color: #fff !important; }
body.rd .x-cover .x-path .hfp-home:hover,
body.rd .x-cover .x-path .hfp-path-select summary:hover { color: #fff !important; }
body.rd .x-pagehead-tabs .x-tabs { margin-top: 0 !important; }
body.rd .x-pagehead-tabs:empty { display: none; }
/* Certificates sit on white; a hairline separates the picture from its text. */
body.rd.x-page .x-docs .hfe-document img { background: #fff !important; border-bottom: 1px solid var(--x-line) !important; }
body.rd.x-page .x-docs .hfe-document a { align-items: center; text-align: center; }
body.rd.x-page .x-docs .hfe-document img { align-self: stretch; }
/* The "모션 줄이기" toggle is removed from the film controls. */
body.rd .hfv-motion-preference, body.rd.x-page .x-film .hfv-motion-preference { display: none !important; }

/* Film: scene list on the left, the film on the right. */
body.rd.x-page .x-film-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; align-items: stretch; }
body.rd.x-page .x-film-body .hfv-chapters { display: flex !important; flex-direction: column; gap: 8px !important; margin: 0 !important; }
body.rd.x-page .x-film-body .hfv-chapters button { flex: 1 1 0; display: grid !important; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-content: center; padding: 18px 20px !important; text-align: left; }
body.rd.x-page .x-film-body .hfv-chapters button > span { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
body.rd.x-page .x-film-body .hfv-chapters button .x-chapter-desc { grid-column: 2; color: var(--x-text); font-size: 13.5px; font-style: normal; font-weight: 400; line-height: 1.55; }
body.rd.x-page .x-film-body .hfv-chapters button[aria-pressed="true"] .x-chapter-desc { color: rgba(255, 255, 255, .78); }
body.rd.x-page .x-film-body .hfv-screen { height: 100%; min-height: 0; }
body.rd.x-page .x-film-body .hfv-screen video { height: 100%; object-fit: cover; }
body.rd.x-page .x-film .x-merged { display: none !important; }
body.rd.x-page .x-film-note { margin: 14px 2px 0; color: var(--x-muted); font-size: 13.5px; }
@media (max-width: 1080px) {
  body.rd.x-page .x-film-body { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-film-body .hfv-screen { order: -1; height: auto; }
  body.rd.x-page .x-film-body .hfv-chapters { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) { body.rd.x-page .x-film-body .hfv-chapters { grid-template-columns: minmax(0, 1fr) !important; } }
/* "기존 WAVE 구동 자료 보기" is removed. */
body.rd.x-page .x-film .hfv-archive { display: none !important; }
/* Film scenes: back under the film in one row of four; each keeps its title and description. */
body.rd.x-page .x-film-body { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
body.rd.x-page .x-film-body .hfv-screen { order: -1; height: auto; }
body.rd.x-page .x-film-body .hfv-screen video { height: auto; }
body.rd.x-page .x-film-body .hfv-chapters { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
body.rd.x-page .x-film-body .hfv-chapters button { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto; row-gap: 6px; align-content: start !important; padding: 18px 20px 20px !important; }
body.rd.x-page .x-film-body .hfv-chapters button > span { grid-row: auto !important; padding-top: 0; }
body.rd.x-page .x-film-body .hfv-chapters button .x-chapter-desc { grid-column: auto; margin-top: 2px; }
@media (max-width: 1080px) { body.rd.x-page .x-film-body .hfv-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { body.rd.x-page .x-film-body .hfv-chapters { grid-template-columns: minmax(0, 1fr) !important; } }
/* The film's closing note ("수평 왕복운동의 원리 개념 영상입니다…") is removed. */
body.rd.x-page .x-film-note { display: none !important; }
/* Codes and figures never split across lines; sizes follow the width instead. */
body.rd.x-page .x-stat-value { font-size: clamp(26px, 2.5vw, 48px) !important; white-space: nowrap; }
body.rd.x-page .x-cert-code { white-space: nowrap; font-size: clamp(17px, 1.4vw, 21px) !important; }
@media (max-width: 1300px) { body.rd.x-page .x-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { body.rd.x-page .x-certs { grid-template-columns: minmax(0, 1fr); } }
/* Icon tiles: flat navy with a white icon. */
body.rd.x-page .x-sec .rd-icon,
body.rd.x-page .x-sec--sky .rd-icon { background: var(--x-navy) !important; box-shadow: none !important; color: #fff !important; }
body.rd .rd-body .rd-icon { background: var(--x-navy) !important; box-shadow: none !important; color: #fff !important; }

/* Filtration steps: number and title on one line, the description under the title. */
body.rd.x-page .x-diagram .r3-filtration-steps button { display: grid !important; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; column-gap: 10px; row-gap: 8px; height: 100%; min-height: 0 !important; padding: 20px 22px !important; }
body.rd.x-page .x-diagram .r3-filtration-steps li { display: flex; }
body.rd.x-page .x-diagram .r3-filtration-steps .x-step-num { grid-column: 1; grid-row: 1; font-size: 14px !important; line-height: 1.4 !important; }
body.rd.x-page .x-diagram .r3-filtration-steps .x-step-title { grid-column: 2; grid-row: 1; color: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; }
body.rd.x-page .x-diagram .r3-filtration-steps .x-step-desc { grid-column: 2; grid-row: 2; color: var(--x-text); font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.6; text-wrap: pretty; }
body.rd.x-page .x-diagram .r3-filtration-steps :is(button[aria-pressed="true"], button.is-active) .x-step-desc { color: rgba(255, 255, 255, .8); }
body.rd.x-page .x-diagram .x-merged { display: none !important; }
/* "30초" after "3D로 이해하기" is removed (with its divider). */
body.rd.x-page .hfv-eyebrow > span { display: none !important; }
/* Icon tiles: brand blue to home navy. */
body.rd.x-page .x-sec .rd-icon,
body.rd.x-page .x-sec--sky .rd-icon,
body.rd .rd-body .rd-icon { background: linear-gradient(145deg, #176db5 0%, #001d3a 100%) !important; }
/* Drive motion: no play button and no note. */
body.rd.x-page .x-feature-media :is(.hfv-source-motion-toggle, .hfv-small-note) { display: none !important; }
/* Guide film fills its frame top to bottom; the sides may crop. */
body.rd.x-page .x-guide .hfv-screen { aspect-ratio: auto !important; height: 100% !important; min-height: 100%; }
body.rd.x-page .x-guide .hfv-screen > video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; }
@media (max-width: 1080px) { body.rd.x-page .x-guide .hfv-screen { aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0; } }
/* Picture captions sit on the picture: dark gradient at the bottom, white text — same as the film captions. */
body.rd.x-page .x-feature-media { position: relative; }
body.rd.x-page .x-feature .x-feature-media > figcaption.x-cap, body.rd.x-page .x-features .x-feature-media > figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 !important;
  padding: 44px 24px 18px !important;
  background: linear-gradient(rgba(12, 32, 48, 0), rgba(12, 32, 48, .64) 40%, rgba(12, 32, 48, .78)) !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 500;
  line-height: 1.6 !important;
  text-align: center;
}
/* Overlay captions stay small: a short gradient band at the very bottom. */
body.rd.x-page .x-features .x-feature-media > figcaption {
  padding: 22px 18px 10px !important;
  background: linear-gradient(rgba(12, 32, 48, 0), rgba(12, 32, 48, .7) 70%) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

/* Permeability: redrawn chart and the table at the same height. */
body.rd.x-page .x-perf-data { align-items: stretch !important; }
body.rd.x-page .x-chart--perm { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px) 20px; }
body.rd.x-page .x-perm-svg .s { stroke: #001d3a; stroke-width: 2; stroke-dasharray: 5 4; }
body.rd.x-page .x-perm-svg .e { stroke: #001d3a; stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
body.rd.x-page .x-perm-svg .v { fill: var(--x-ink); font-size: 18px; font-weight: 700; }
body.rd.x-page .x-perm-svg .n { fill: var(--x-text); font-size: 14px; font-weight: 600; }
body.rd.x-page .x-chart-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 10px; color: var(--x-text); font-size: 13px; font-weight: 600; }
body.rd.x-page .x-chart-key span::before { content: ""; display: inline-block; margin-right: 8px; vertical-align: middle; }
body.rd.x-page .x-chart-key .is-bar::before { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(#176db5, #0a5a9e); }
body.rd.x-page .x-chart-key .is-spec::before { width: 20px; height: 0; border-top: 2px dashed #001d3a; }
body.rd.x-page .x-perf-data > .x-table { align-self: stretch !important; display: flex; }
body.rd.x-page .x-perf-data > .x-table table { height: 100%; }
/* Measurement points on the CFP lines, as on the instrument plot. */
body.rd.x-page .x-chart-svg .dd { fill: var(--x-blue); stroke: #fff; stroke-width: 1; }
body.rd.x-page .x-chart-svg .cd { fill: var(--x-navy); stroke: #fff; stroke-width: 1; }
/* Legend marks show the line with its point, like the chart. */
body.rd.x-page .x-chart-legend :is(.is-diff, .is-cum)::before { height: 10px !important; border-radius: 0 !important; }
body.rd.x-page .x-chart-legend .is-diff::before { background: radial-gradient(circle, var(--x-blue) 0 3.4px, transparent 3.8px), linear-gradient(var(--x-blue), var(--x-blue)) center / 100% 3px no-repeat !important; }
body.rd.x-page .x-chart-legend .is-cum::before { background: radial-gradient(circle, var(--x-navy) 0 3px, transparent 3.4px), linear-gradient(var(--x-navy), var(--x-navy)) center / 100% 2.5px no-repeat !important; }

/* ================= Auto-converted pages ================= */
body.rd.x-page #app > .x-sec--white { background: #fff !important; }
body.rd.x-page #app > .x-sec--sky { background: var(--x-sky) !important; }
body.rd.x-page #app > .x-sec--navy { background: var(--x-navy) !important; }
body.rd.x-page .x-sec .x-head .x-h2 { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.32 !important; letter-spacing: -.035em; }
body.rd.x-page .x-sec .x-head .x-lead { font-size: 17.5px !important; line-height: 1.8 !important; color: var(--x-text) !important; }
body.rd.x-page .x-sec .x-head .x-eyebrow { color: var(--x-blue-text) !important; font-size: 15px !important; letter-spacing: -.01em !important; }
body.rd.x-page .x-head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
body.rd.x-page .x-head-actions :is(a.wf-secondary, a.wf-primary) { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px !important; border-radius: 999px !important; font-size: 15px !important; }
body.rd.x-page .x-head-actions a.wf-secondary { border: 1px solid var(--x-line-2) !important; background: #fff !important; color: var(--x-ink) !important; }
body.rd.x-page .x-head-actions a.wf-secondary::after { content: "→"; }
body.rd.x-page .x-auto-body > * + * { margin-top: clamp(32px, 4vw, 56px); }
body.rd.x-page .x-auto-body > .r3-split-detail { margin-top: 0; }
/* Split-type blocks with a single visual: text beside it is already in the head, so the visual gets the width. */
body.rd.x-page .x-auto-body :is(article, .r3-case-card, .hfe-card, .wf-wave-part, .wf-wave-step, .wf-wave-cycle-step, .wf-company-facility-grid article, .r3-locations > article, .wf-core-values-grid > *) { border-radius: 24px !important; }
body.rd.x-page .x-sec--sky .x-auto-body :is(article, .r3-case-card, .hfe-card, .wf-wave-part, .wf-wave-step, .wf-wave-cycle-step, .r3-locations > article, .wf-core-values-grid > *, .rd-table, details.hfm-reading-note) { border-color: transparent !important; }
body.rd.x-page .x-auto-body .rd-table thead th,
body.rd.x-page .x-auto-body .wf-table-wrap thead th { background: var(--x-navy) !important; color: #fff !important; }
body.rd.x-page .x-auto-body .rd-table { border-radius: 24px !important; }
body.rd.x-page .x-auto-body .rd-num,
body.rd.x-page .x-auto-body :is(.hfm-path-number, .wf-wave-part > span:first-child, .wf-wave-step > span:first-child, .r3-filtration-steps li > span:first-child) { background: var(--x-navy) !important; }
/* Process lists (systems and application pages): numbered rows like the feature list. */
body.rd.x-page .x-auto-body .r3-process-detail ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
body.rd.x-page .x-auto-body .r3-process-detail li { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 0 20px !important; align-items: start; padding: 22px 0 !important; border: 0 !important; border-bottom: 1px solid var(--x-line) !important; background: none !important; }
body.rd.x-page .x-auto-body .r3-process-detail li > span { display: grid !important; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--x-navy) !important; color: #fff !important; font-size: 14px !important; font-weight: 700; }
body.rd.x-page .x-auto-body .r3-process-detail li h3 { margin: 6px 0 6px !important; font-size: 18px !important; }
body.rd.x-page .x-auto-body .r3-process-detail li p { margin: 0 !important; color: var(--x-text) !important; font-size: 15.5px !important; line-height: 1.65; }
body.rd.x-page .x-auto-body figure > video { width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: cover; }
/* Redrawn graphs inside cards */
body.rd.x-page .x-redrawn { margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
body.rd.x-page .x-chart--inline { padding: 18px 16px 10px; border-radius: 18px; background: var(--x-sky); }
body.rd.x-page .x-sec--sky .x-chart--inline { background: #f7fbfe; }
body.rd.x-page .x-redrawn > figcaption { padding: 10px 2px 0 !important; color: var(--x-muted) !important; font-size: 13px !important; text-align: left !important; background: none !important; }
body.rd.x-page .x-redrawn .x-original { margin-top: 8px; }
body.rd.x-page .x-redrawn .x-original img { max-width: 100%; margin-top: 10px; border-radius: 10px; background: #fff; }
@media (min-width: 900px) { body.rd.x-page .x-auto-body .hfe-two { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } }
/* Field data charts */
body.rd.x-page .x-trend-svg .l-tmp { fill: none; stroke: #176db5; stroke-width: 2.6; stroke-linejoin: round; }
body.rd.x-page .x-trend-svg .l-tmp-dot { fill: #176db5; stroke: #fff; stroke-width: 1; }
body.rd.x-page .x-trend-svg .l-flux { fill: none; stroke: #001d3a; stroke-width: 2.2; }
body.rd.x-page .x-trend-svg .l-temp { fill: none; stroke: #36b3a8; stroke-width: 2; }
body.rd.x-page .x-trend-svg .l-sed { fill: none; stroke: #a9b9c6; stroke-width: 1.8; }
body.rd.x-page .x-trend-svg .b-mlss { fill: #b9dcf4; }
body.rd.x-page .x-chart-legend :is(.k-tmp, .k-flux, .k-temp, .k-sed, .k-mlss)::before { height: 4px; }
body.rd.x-page .x-chart-legend .k-tmp::before { background: #176db5; }
body.rd.x-page .x-chart-legend .k-flux::before { background: #001d3a; }
body.rd.x-page .x-chart-legend .k-temp::before { background: #36b3a8; }
body.rd.x-page .x-chart-legend .k-sed::before { background: #a9b9c6; }
body.rd.x-page .x-chart-legend .k-mlss::before { width: 12px !important; height: 12px !important; border-radius: 2px; background: #b9dcf4; }
body.rd.x-page .x-chart--inline .x-chart-legend { margin-bottom: 8px; font-size: 12.5px; gap: 6px 16px; }
/* Check lists sit on the page, not on a tinted strip without padding. */
body.rd.x-page .x-auto-body .wf-sheet-copy ul { background: none !important; border-radius: 0 !important; }
/* 수처리 시스템 fields: site photo on the left, the process on the right. */
body.rd.x-page .x-auto-body:has(> header .rd-field-photo) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; }
body.rd.x-page .x-auto-body:has(> header .rd-field-photo) > * { margin-top: 0 !important; }
body.rd.x-page .x-auto-body > header:has(.rd-field-photo) { margin: 0; }
body.rd.x-page .x-auto-body .rd-field-photo { margin: 0 !important; border-radius: 24px !important; }
body.rd.x-page .x-auto-body .rd-field-photo img { aspect-ratio: 4 / 3; }
body.rd.x-page .x-auto-body:has(> header .rd-field-photo) .r3-process-detail ol { border-top: 0; }
body.rd.x-page .x-auto-body:has(> header .rd-field-photo) .r3-process-detail li:first-child { padding-top: 0 !important; }
@media (max-width: 900px) { body.rd.x-page .x-auto-body:has(> header .rd-field-photo) { grid-template-columns: minmax(0, 1fr); } }
/* 고객 문의: the e-mail address as a contact pill above the form. */
body.rd.x-page .x-auto-body a[href^="mailto:"] { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 12px 20px; border: 1px solid var(--x-line-2); border-radius: 999px; background: #fff; color: var(--x-ink) !important; font-size: 16px !important; font-weight: 700; text-decoration: none; }
body.rd.x-page .x-auto-body a[href^="mailto:"]::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 6.8 8.5 6.4 8.5-6.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 6.8 8.5 6.4 8.5-6.4'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--x-blue); }
body.rd.x-page .x-chart-legend { align-items: center; }
body.rd.x-page .x-chart-legend > span { display: inline-flex; align-items: center; white-space: nowrap; }

/* One rhythm: every section has the same top and bottom space; nothing inside adds to it. */
body.rd.x-page #app > .x-sec:not(.x-sec--navy) { padding-top: clamp(88px, 10vw, 150px) !important; padding-bottom: clamp(88px, 10vw, 150px) !important; }
body.rd.x-page #app > .x-sec:has(.x-next) { padding-top: 0 !important; }
body.rd.x-page .x-sec > .x-wrap > :first-child { margin-top: 0 !important; }
body.rd.x-page .x-sec > .x-wrap > :last-child,
body.rd.x-page .x-sec > .x-wrap > :last-child > :last-child,
body.rd.x-page .x-sec > .x-wrap > :last-child > :last-child > :last-child { margin-bottom: 0 !important; }
body.rd.x-page .x-sec > .x-wrap > .x-auto-body:last-child { padding-bottom: 0 !important; }
body.rd.x-page .x-auto-more { margin-top: clamp(56px, 6vw, 88px); }
/* Margins of the last elements stay inside the section, so the bottom space is exactly the section padding. */
body.rd.x-page .x-sec > .x-wrap { display: flow-root; }
body.rd.x-page .x-sec > .x-wrap > :last-child :last-child { margin-bottom: 0 !important; }

/* Cleanfil-S 보강막: structure → microstructure */
body.rd.x-page .x-struct .x-subhead:first-child { margin-top: 8px !important; }
body.rd.x-page .x-schematic { margin: 0; padding: clamp(28px, 4vw, 56px) 24px 24px; border-radius: 28px; background: #fff; text-align: center; }
body.rd.x-page .x-schematic-img { position: relative; display: inline-block; }
body.rd.x-page .x-schematic-img button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
body.rd.x-page .x-schematic-img img { display: block; width: auto !important; height: clamp(300px, 34vw, 440px) !important; padding: 0 !important; object-fit: contain !important; filter: drop-shadow(0 22px 20px rgba(0, 29, 58, .14)); mix-blend-mode: normal !important; }
body.rd.x-page .x-schematic-img button span,
body.rd.x-page .x-sem-shot button span { display: none !important; }
body.rd.x-page .x-callout { position: absolute; top: var(--y); display: inline-flex; align-items: center; gap: 0; transform: translateY(-50%); color: var(--x-ink); font-size: 15px; font-weight: 700; white-space: nowrap; }
body.rd.x-page .x-callout i { display: block; width: clamp(56px, 7vw, 110px); height: 0; border-top: 1.5px solid var(--x-navy); position: relative; }
body.rd.x-page .x-callout i::after { content: ""; position: absolute; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--x-blue); box-shadow: 0 0 0 3px #fff; }
body.rd.x-page .x-callout--right { left: 72%; }
body.rd.x-page .x-callout--right i { margin-right: 10px; }
body.rd.x-page .x-callout--right i::after { left: -4px; }
body.rd.x-page .x-callout--left { right: 72%; flex-direction: row-reverse; }
body.rd.x-page .x-callout--left i { margin-left: 10px; }
body.rd.x-page .x-callout--left i::after { right: -4px; }
body.rd.x-page .x-schematic figcaption { margin-top: 22px; color: var(--x-muted); font-size: 14px; }
body.rd.x-page .x-sem-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body.rd.x-page .x-sem-shot { margin: 0; overflow: hidden; border-radius: 24px; background: #fff; }
body.rd.x-page .x-sem-shot button { display: block; width: 100%; padding: 0; border: 0; background: #0d1823; cursor: zoom-in; }
body.rd.x-page .x-sem-shot img { display: block; width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; padding: 0 !important; filter: none !important; }
body.rd.x-page .x-sem-shot figcaption { display: flex; align-items: center; gap: 10px; padding: 16px 20px; color: var(--x-ink); font-size: 16px; font-weight: 700; }
body.rd.x-page .x-sem-shot figcaption span { padding: 4px 10px; border-radius: 999px; background: var(--x-sky); color: var(--x-blue-text); font-size: 12.5px; font-weight: 700; }
@media (max-width: 720px) {
  body.rd.x-page .x-sem-pair { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-callout { font-size: 13px; }
  body.rd.x-page .x-callout i { width: 36px; }
}

/* Key properties (고유량 · 고강도 · 편의성): one white card each, in a row. */
body.rd.x-page .x-sec .r3-prose-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important; margin: 0 0 clamp(48px, 5vw, 72px) !important; padding: 0 !important; list-style: none !important; }
body.rd.x-page .x-sec .r3-prose-list > li { display: flex !important; flex-direction: column; gap: 10px; margin: 0 !important; padding: clamp(24px, 2.6vw, 34px) !important; border: 1px solid var(--x-line) !important; border-radius: 24px !important; background: #fff !important; color: var(--x-text) !important; font-size: 15.5px !important; line-height: 1.7 !important; list-style: none !important; }
body.rd.x-page .x-sec--sky .r3-prose-list > li { border-color: transparent !important; }
body.rd.x-page .x-sec .r3-prose-list > li::before,
body.rd.x-page .x-sec .r3-prose-list > li::marker { content: none !important; display: none !important; }
body.rd.x-page .x-sec .r3-prose-list > li > strong { display: block; color: var(--x-ink) !important; font-size: 20px !important; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 900px) { body.rd.x-page .x-sec .r3-prose-list { grid-template-columns: minmax(0, 1fr); } }

/* 2611 feedback: white stages, blue titles, Hifilm header, even SEM pair, 4-up documents */
body.rd.x-page .x-sec .r3-prose-list > li > strong { color: var(--x-blue) !important; }
body.rd.x-page :is(.rd-stage-product, .rd-stage-micro, .x-schematic) { background: #fff !important; background-image: none !important; }
body.rd.x-page .hfv-source-grid figure { background: #fff !important; }
body.rd.x-page .hm-material.is-hifilm > header { background: var(--x-blue) !important; }
body.rd.x-page .hm-material.is-hifilm > header :is(h3, h4, p, span, strong) { color: #fff !important; }
body.rd.x-page .hm-interface-comparison .hm-photo img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; object-position: center bottom !important; }
body.rd.x-page .x-sec .hfe-document-grid:not(.hfe-document-three) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
body.rd.x-page .x-sec .hfe-document { display: flex !important; flex-direction: column; align-items: center; text-align: center !important; }
body.rd.x-page .x-sec .hfe-document > a { align-items: center; text-align: center !important; }
body.rd.x-page .x-sec .hfe-document img { align-self: stretch; background: #fff !important; }
@media (max-width: 1100px) { body.rd.x-page .x-sec .hfe-document-grid:not(.hfe-document-three) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { body.rd.x-page .x-sec .hfe-document-grid:not(.hfe-document-three) { grid-template-columns: minmax(0, 1fr) !important; } }
/* Documents fill their card edge to edge (no inner frame or padding). */
body.rd.x-page :is(.x-sec, .x-docs) .hfe-document img { width: 100% !important; height: auto !important; aspect-ratio: auto !important; margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--x-line) !important; border-radius: 0 !important; object-fit: cover !important; box-shadow: none !important; }
body.rd.x-page :is(.x-sec, .x-docs) .hfe-document { padding: 0 0 26px !important; }
body.rd.x-page :is(.x-sec, .x-docs) .hfe-document > a { padding: 0 !important; width: 100%; }
/* Films moved into the shared film frame: white frame on sky sections. */
body.rd.x-page .x-sec--sky .x-film .hfv-film { background: #fff !important; }
/* Head links sit under the title so the two head columns stay level. */
body.rd.x-page .x-head > div:first-child > .x-head-actions { margin-top: 28px; }
body.rd.x-page .x-auto-body .x-film:not(:last-child) { margin-bottom: clamp(56px, 6vw, 88px) !important; }
/* Long leads sit under the title. */
body.rd.x-page .x-head.x-head--stack { display: block !important; }
body.rd.x-page .x-head.x-head--stack > div + div,
body.rd.x-page .x-head.x-head--stack > .x-lead { max-width: 760px; margin-top: 24px !important; }
body.rd.x-page .x-head.x-head--stack .x-lead { margin-top: 0; }
/* Redrawn chart cards: description, then the original-graph toggle at the bottom. */
body.rd.x-page .hfe-card > details.x-original { margin-top: auto !important; padding-top: 16px; }
/* Dense tables: every column fits without sideways scrolling. */
body.rd.x-page .x-table--dense table { table-layout: auto; min-width: 0 !important; width: 100% !important; }
body.rd.x-page .x-table--dense :is(th, td) { padding: 14px 10px !important; font-size: 13.5px !important; white-space: nowrap; }
body.rd.x-page .x-table--dense :is(th, td):first-child { padding-left: 20px !important; white-space: normal; }
/* Document blocks: the line under the subheading repeats the section lead. */
body.rd.x-page .x-auto-body :is(.hfe-cleanfil-tests, .hfe-material-proofs) .hfe-subheading p { display: none !important; }
body.rd.x-page .x-sec :is(.wf-note, .x-footnote) + :is(.wf-note, .x-footnote) { margin-top: 4px !important; }
/* Heads with a link: eyebrow on top, then title | lead side by side (tops level), the link under the title. */
@media (min-width: 1081px) {
  body.rd.x-page .x-head--split:has(> div:first-child > .x-head-actions):not(.x-head--stack) { grid-template-areas: "e ." "t l" "a l"; grid-template-rows: auto auto 1fr; align-items: start; row-gap: 0; }
  body.rd.x-page .x-head--split:has(> div:first-child > .x-head-actions):not(.x-head--stack) > div:first-child { display: contents; }
  body.rd.x-page .x-head--split:has(> div:first-child > .x-head-actions):not(.x-head--stack) .x-eyebrow { grid-area: e; }
  body.rd.x-page .x-head--split:has(> div:first-child > .x-head-actions):not(.x-head--stack) .x-h2 { grid-area: t; }
  body.rd.x-page .x-head--split:has(> div:first-child > .x-head-actions):not(.x-head--stack) .x-head-actions { grid-area: a; }
  body.rd.x-page .x-head--split:has(> div:first-child > .x-head-actions):not(.x-head--stack) > :last-child { grid-area: l; padding-top: 6px; }
}
/* Inner wrappers inside a section use the full content width (no second inset). */
body.rd.x-page .x-auto-body .wf-content-inner { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Film chapter buttons: as many columns as fit at a readable width. */
body.rd.x-page .x-film-body .hfv-chapters { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
body.rd.x-page .x-film-body .hfv-chapters button .x-chapter-desc { text-wrap: pretty; }
/* Chapters: four across when there is room, otherwise two by two (never a lone card on a row). */
body.rd.x-page .x-film-body { container-type: inline-size; }
body.rd.x-page .x-film-body .hfv-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@container (max-width: 900px) { body.rd.x-page .x-film-body .hfv-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@container (max-width: 460px) { body.rd.x-page .x-film-body .hfv-chapters { grid-template-columns: minmax(0, 1fr) !important; } }
body.rd.x-page .x-replaced { display: none !important; }
body.rd.x-page .x-slot-holder { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
body.rd.x-page .x-slot-holder > .x-slot { aspect-ratio: 4 / 3; max-width: 880px; margin: 0 auto; }
/* Process steps without a picture: four cards in a row instead of long empty rows. */
body.rd.x-page .x-auto-body .r3-process-detail:not(:has(img)) > ol { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.rd.x-page .x-auto-body .r3-process-detail:not(:has(img)) > ol > li { display: flex !important; flex-direction: column; gap: 18px; margin: 0 !important; padding: clamp(24px, 2.4vw, 32px) !important; border: 1px solid var(--x-line) !important; border-radius: 24px !important; background: #fff !important; }
body.rd.x-page .x-sec--sky .x-auto-body .r3-process-detail:not(:has(img)) > ol > li { border-color: transparent !important; }
body.rd.x-page .x-auto-body .r3-process-detail:not(:has(img)) > ol > li > div { display: grid; gap: 8px; }
@media (max-width: 1080px) { body.rd.x-page .x-auto-body .r3-process-detail:not(:has(img)) > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.rd.x-page .x-auto-body .r3-process-detail:not(:has(img)) > ol { grid-template-columns: minmax(0, 1fr); } }
body.rd.x-page .x-slot-holder > .x-slot { aspect-ratio: 16 / 9 !important; max-width: none !important; width: 100%; }
/* A 3D slot that sits beside another picture fills its card. */
body.rd.x-page :has(> figure + figure) > .x-slot-holder { display: flex !important; flex-direction: column; height: 100%; }
body.rd.x-page :has(> figure + figure) > .x-slot-holder > .x-slot { flex: 1 1 auto; aspect-ratio: auto !important; min-height: 320px; margin: 0 !important; }
/* Case cards: four across, compact, the site name and capacity carry the card. */
body.rd.x-page .x-auto-body .r3-case-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
body.rd.x-page .x-auto-body .r3-case-card { padding: 22px 22px 20px !important; border-radius: 20px !important; }
body.rd.x-page .x-auto-body .r3-case-card > div { display: flex; flex-direction: column; height: 100%; }
body.rd.x-page .x-auto-body .r3-case-card .wf-kicker { margin: 0 0 10px !important; font-size: 12.5px !important; }
body.rd.x-page .x-auto-body .r3-case-card h2 { margin: 0 0 12px !important; color: var(--x-ink) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -.02em; }
body.rd.x-page .x-auto-body .r3-case-card ul { margin: 0 0 16px !important; padding: 0 !important; list-style: none; display: grid; gap: 4px; }
body.rd.x-page .x-auto-body .r3-case-card li { margin: 0 !important; padding: 0 !important; color: var(--x-muted) !important; font-size: 13.5px !important; line-height: 1.5 !important; }
body.rd.x-page .x-auto-body .r3-case-card li::before { content: none !important; }
body.rd.x-page .x-auto-body .r3-case-card li:first-child { color: var(--x-blue-text) !important; font-size: 16px !important; font-weight: 700 !important; }
body.rd.x-page .x-auto-body .r3-case-card .wf-tag-row { margin-top: auto !important; }
@media (max-width: 1100px) { body.rd.x-page .x-auto-body .r3-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 800px) { body.rd.x-page .x-auto-body .r3-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { body.rd.x-page .x-auto-body .r3-case-grid { grid-template-columns: minmax(0, 1fr) !important; } }
body.rd.x-page .x-auto-body .r3-case-grid { grid-auto-rows: auto !important; }
body.rd.x-page .x-auto-body > header:has(.r3-mail) { margin: 0 0 32px !important; }
/* Locations: the two plants side by side. */
body.rd.x-page .x-auto-body .r3-locations { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
body.rd.x-page .x-auto-body .r3-locations > article { margin: 0 !important; }
@media (max-width: 760px) { body.rd.x-page .x-auto-body .r3-locations { grid-template-columns: minmax(0, 1fr) !important; } }
/* Step cards: the action button sits on the card's bottom line. */
body.rd.x-page .x-auto-body :is(.wf-wave-cycle-step, .wf-wave-part, .wf-wave-step) { display: flex !important; flex-direction: column; }
body.rd.x-page .x-auto-body :is(.wf-wave-cycle-step, .wf-wave-part, .wf-wave-step) > :is(button, a):last-child { margin-top: auto !important; align-self: flex-start; }
/* Collapsible reading notes: same toggle style as "원본 그래프 보기". */
body.rd.x-page .x-auto-body details.hfm-reading-note > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; color: var(--x-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
body.rd.x-page .x-auto-body details.hfm-reading-note > summary::-webkit-details-marker { display: none; }
body.rd.x-page .x-auto-body details.hfm-reading-note > summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--x-sky); color: var(--x-blue-text); font-weight: 700; }
body.rd.x-page .x-auto-body details.hfm-reading-note[open] > summary::before { content: "–"; }
body.rd.x-page .x-sec .x-auto-body article.wf-wave-cycle-step { flex-direction: column !important; }
body.rd.x-page .x-sec .x-auto-body article.wf-wave-cycle-step > button.hfv-cycle-step-button { margin-top: auto !important; }
body.rd.x-page .x-sec .x-auto-body article.wf-wave-cycle-step > p { margin-bottom: 18px !important; }
/* "왜 하이필엠인가": the four links of the chain run left to right across the full width. */
body.rd.x-page .x-auto-body .wf-wave-foundation { grid-template-columns: minmax(0, 1fr) !important; }
body.rd.x-page .x-auto-body .wf-foundation-diagram { width: 100%; justify-items: center; }
body.rd.x-page .x-auto-body .wf-diagram-flow { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px !important; width: 100%; }
body.rd.x-page .x-auto-body .wf-diagram-flow > div { position: relative; justify-content: center; text-align: center; }
body.rd.x-page .x-auto-body .wf-diagram-flow > div:not(:last-child)::after { content: "→" !important; position: absolute !important; right: -30px; top: 50%; transform: translateY(-50%); color: var(--x-blue-text); }
@media (max-width: 900px) {
  body.rd.x-page .x-auto-body .wf-diagram-flow { grid-template-columns: minmax(0, 1fr); gap: 28px !important; }
  body.rd.x-page .x-auto-body .wf-diagram-flow > div:not(:last-child)::after { content: "↓" !important; right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); }
}
body.rd.x-page .x-auto-body .wf-foundation-diagram { gap: 28px !important; padding: clamp(28px, 3.4vw, 44px) !important; min-height: 0 !important; height: auto !important; align-content: center !important; }
body.rd.x-page .x-auto-body .wf-diagram-flow > div { word-break: keep-all; padding-left: 14px !important; padding-right: 14px !important; }
/* Aeration vs WAVE cards: kicker, title, picture and list share rows across both cards. */
@media (min-width: 761px) {
  body.rd.x-page .x-auto-body .wf-wave-compare { grid-template-rows: repeat(4, auto); }
  body.rd.x-page .x-auto-body .wf-wave-compare-card { display: grid !important; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  body.rd.x-page .x-auto-body .wf-wave-compare-card > h3 { align-self: start; }
}
/* Every collapsible inside a section uses the same "+" toggle. */
body.rd.x-page .x-auto-body details:not(.x-original):not(.hfv-transcript):not(.x-merged) > summary { display: inline-flex !important; align-items: center; gap: 8px; list-style: none; color: var(--x-ink) !important; font-size: 14.5px !important; font-weight: 600 !important; cursor: pointer; }
body.rd.x-page .x-auto-body details:not(.x-original):not(.hfv-transcript):not(.x-merged) > summary::-webkit-details-marker { display: none; }
body.rd.x-page .x-auto-body details:not(.x-original):not(.hfv-transcript):not(.x-merged) > summary::before { content: "+" !important; display: grid !important; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--x-sky); color: var(--x-blue-text); font-weight: 700; transform: none !important; border: 0 !important; }
body.rd.x-page .x-auto-body details[open]:not(.x-original):not(.hfv-transcript):not(.x-merged) > summary::before { content: "–" !important; }
body.rd.x-page .x-sec--sky .x-auto-body details:not(.x-original) > summary::before { background: #fff; }
body.rd.x-page .x-sec .x-redrawn .x-chart-legend { min-height: 48px; align-content: flex-start; }
/* Hifilm comparison card: outline in the same main blue as its header. */
body.rd.x-page .hm-material.is-hifilm { border-color: var(--x-blue) !important; box-shadow: inset 0 0 0 1px var(--x-blue) !important; }
/* Hifilm vs other comparisons: no grey frame behind the two cards. */
body.rd.x-page .hm-comparison { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
/* Reinforced membrane schematic sits straight on the section, no white box. */
body.rd.x-page .x-schematic { padding: 8px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; background-image: none !important; box-shadow: none !important; }
/* Reinforced membrane: schematic on the left, the three strengths stacked on the right. */
@media (min-width: 901px) {
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct):has(> header > .r3-prose-list) { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct) > .r3-split-detail { order: 1; margin: 0 !important; }
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct) > header { order: 2; margin: 0 !important; }
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct) .r3-prose-list { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; margin: 0 !important; }
}
@media (max-width: 900px) {
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct) { display: flex !important; flex-direction: column; gap: 32px; }
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct) > .r3-split-detail { order: 1; }
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct) > header { order: 2; margin: 0 !important; }
  body.rd.x-page .x-auto-body:has(> .r3-split-detail > .x-struct) .r3-prose-list { margin: 0 !important; }
}
/* Competitor card: a clearly grey header and a grey outline, distinct from the sky section. */
body.rd.x-page .hm-material:not(.is-hifilm) { border: 1px solid #c3ccd5 !important; box-shadow: inset 0 0 0 1px #c3ccd5 !important; }
body.rd.x-page .hm-material:not(.is-hifilm) > header { background: #e3e8ed !important; }
body.rd.x-page .x-sec .hm-comparison > .hm-material:not(.is-hifilm) { border-color: #c3ccd5 !important; }
/* One even stroke on every side (border only; the inset shadow doubled it where children did not cover it). */
body.rd.x-page .x-sec .hm-comparison > .hm-material { box-shadow: none !important; overflow: hidden; }
body.rd.x-page .x-sec .hm-comparison > .hm-material.is-hifilm { border: 2px solid var(--x-blue) !important; }
body.rd.x-page .x-sec .hm-comparison > .hm-material:not(.is-hifilm) { border: 2px solid #c3ccd5 !important; }
/* Thin stroke on white boxes over sky backgrounds (drawn as an inner outline so it stays even on every side). */
body.rd.x-page .x-stroke { outline: 1px solid #e2e8ee !important; outline-offset: -1px; }
/* Peel strength badge: the label fits inside its circle. */
body.rd.x-page .hm-percent-badge text { font-size: 21px !important; }
/* Header menu: bracketed product names on their own line. */
.wf-menu-link-group a .wf-menu-paren { display: block; }
/* A stroked option button that is active (navy) shows no light line. */
body.rd.x-page .x-stroke:is([aria-pressed="true"], .is-active) { outline-color: transparent !important; }
/* Footer site map (2026-11-07): bold column titles, links under a thin blue rule, larger type and even spacing. */
.wf-sitemap-section.wf-sitemap-compact { padding: clamp(48px, 5vw, 72px) 0 !important; background: #f5f8fb !important; }
.wf-sitemap-compact .wf-sitemap-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 40px 28px !important; align-items: start; }
.wf-sitemap-compact .wf-sitemap-card { padding: 0 !important; }
.wf-sitemap-compact .wf-sitemap-card .wf-menu-title { margin: 0 0 20px !important; }
.wf-sitemap-compact .wf-sitemap-card .wf-menu-title a { padding: 0 !important; color: #14263a !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -.01em; }
.wf-sitemap-compact .wf-sitemap-card > .wf-menu-link-group:first-of-type { margin-top: 0; }
.wf-sitemap-compact .wf-sitemap-card > .wf-menu-link-group { padding-left: 16px; border-left: 2px solid #176db5; }
.wf-sitemap-compact .wf-sitemap-card > .wf-menu-link-group > a { padding: 6px 0 !important; color: #3f5163 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: .01em; }
.wf-sitemap-compact .wf-sitemap-card > .wf-menu-link-group:first-of-type > a { padding-top: 0 !important; }
.wf-sitemap-compact .wf-sitemap-card > .wf-menu-link-group:last-of-type > a { padding-bottom: 0 !important; }
.wf-sitemap-compact .wf-sitemap-card > .wf-menu-link-group > a:hover { color: #176db5 !important; text-decoration: none !important; }
.wf-sitemap-compact .wf-sitemap-card .wf-menu-paren { display: block; }
@media (max-width: 1200px) { .wf-sitemap-compact .wf-sitemap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .wf-sitemap-compact .wf-sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; } }
/* The page body and sections take focus only programmatically (after a page change), so they draw no focus ring. */
main#app:focus, main#app:focus-visible, #app [tabindex="-1"]:focus, #app [tabindex="-1"]:focus-visible { outline: none !important; }
body.x-footer-in .r3-side-nav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .2s, visibility .2s; }
.wf-sitemap-compact .wf-sitemap-card .wf-menu-title a { color: #176db5 !important; }
/* Leftover bright blues from the older stylesheets follow the header blue too. */
body.rd.x-page .x-auto-body .wf-wave-cycle-step > span:first-child { color: var(--x-blue-text) !important; }
body.rd.x-page .x-auto-body .wf-mbr-viewer-link { color: var(--x-blue-text) !important; }
/* House icon for 홈 in the header and site map. */
.wf-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wf-home-icon { display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: -3px; }
.wf-sitemap-compact .wf-sitemap-card .wf-menu-title a .wf-home-icon { width: 20px; height: 20px; }
/* On navy (navy sections, active navy buttons and cards) the blue stays the bright #48aaff (same as the home page highlight). */
body.rd.x-page :is(.x-sec--navy, [aria-pressed="true"], .is-active, .is-dark) { --x-blue: #48aaff; --x-blue-text: #48aaff; }
body.rd.x-page :is([aria-pressed="true"], .is-active, .is-dark) .hfm-path-number { background: #008fe6 !important; }
/* Number circles: the figure sits on the circle's centre line (no top padding, tight line box). */
body.rd.x-page .hfm-path-number { padding: 0 !important; line-height: 1 !important; place-items: center !important; }
body.rd.x-page .r3-process-detail li > span:first-child { display: grid !important; place-items: center !important; padding: 0 !important; line-height: 1 !important; }
/* MBR 3D popup */
html.x-modal-open, html.x-modal-open body { overflow: hidden; }
.x-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); background: rgba(0, 29, 58, .62); backdrop-filter: blur(2px); }
.x-modal-panel { display: flex; flex-direction: column; width: min(1360px, 100%); height: min(860px, 100%); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(0, 29, 58, .35); }
.x-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 16px 28px; border-bottom: 1px solid #e2e8ee; }
.x-modal-head h2 { margin: 0 0 4px; color: #14263a; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.x-modal-head p { margin: 0; color: #5f7183; font-size: 13.5px; }
.x-modal-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #e2e8ee; border-radius: 50%; background: #fff; color: #14263a; font-size: 16px; line-height: 1; cursor: pointer; }
.x-modal-close:hover { background: #f0f8fe; }
.x-modal-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; }
@media (max-width: 700px) { .x-modal { padding: 0; } .x-modal-panel { width: 100%; height: 100%; border-radius: 0; } .x-modal-head { padding: 14px 14px 12px 18px; } .x-modal-head p { display: none; } }
/* The section around the viewer card: no duplicate "넓은 화면으로 보기" link or how-to line (the popup has them). */
body.rd.x-page .wf-mbr-viewer :is(.wf-mbr-viewer-link, .wf-mbr-viewer-help) { display: none !important; }
body.rd.x-page .hfv-viewer-gate img { cursor: zoom-in; }
/* 수처리 시스템 application fields: sticky copy on the left, image cards scrolling on the right. */
body.rd.x-page .x-fields { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
body.rd.x-page .x-fields-copy { position: sticky; top: calc(var(--x-header-h, 82px) + 48px); }
body.rd.x-page .x-fields-copy .x-h2 { margin: 0 0 22px; }
body.rd.x-page .x-fields-copy .x-lead { margin: 0; max-width: 420px; }
body.rd.x-page .x-fields-list { display: grid; gap: clamp(56px, 6vw, 88px); }
body.rd.x-page .x-field { margin: 0; }
body.rd.x-page .x-field-media { margin: 0 0 26px !important; overflow: hidden; border-radius: 24px; background: #fff; aspect-ratio: 16 / 10; }
body.rd.x-page .x-field-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.rd.x-page .x-field-media.x-slot { aspect-ratio: 16 / 10; }
body.rd.x-page .x-field-title { margin: 0 0 10px; color: var(--x-ink); font-size: clamp(22px, 2vw, 26px); font-weight: 700; letter-spacing: -.025em; }
body.rd.x-page .x-field-desc { margin: 0 0 16px; color: var(--x-text); font-size: 16px; line-height: 1.7; }
body.rd.x-page .x-field-link { display: inline-flex; align-items: center; gap: 6px; color: var(--x-blue-text); font-size: 15px; font-weight: 600; text-decoration: none; }
body.rd.x-page .x-field-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  body.rd.x-page .x-fields { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  body.rd.x-page .x-fields-copy { position: static; }
}
body.rd.x-page .x-field { scroll-margin-top: calc(var(--x-header-h, 82px) + 40px); }
body.rd.x-page .x-field-media.x-slot.is-empty img { display: none !important; }
/* Case cards (redesign 2026-11-07): one padding, product tag top-right, a rule above the figures. */
body.rd.x-page .x-auto-body .r3-case-card { padding: 0 !important; border-radius: 18px !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
body.rd.x-page .x-auto-body .r3-case-card:hover { border-color: var(--x-blue) !important; box-shadow: 0 10px 28px -18px rgba(0, 29, 58, .35) !important; transform: translateY(-2px); }
body.rd.x-page .x-auto-body .r3-case-card > div { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; align-items: start; column-gap: 10px; height: 100%; padding: 20px 20px 18px !important; }
body.rd.x-page .x-auto-body .r3-case-card .wf-kicker { grid-column: 1; grid-row: 1; align-self: center; margin: 0 !important; color: var(--x-muted) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0; }
body.rd.x-page .x-auto-body .r3-case-card .wf-tag-row { grid-column: 2; grid-row: 1; margin: 0 !important; justify-self: end; }
body.rd.x-page .x-auto-body .r3-case-card .wf-tag { padding: 3px 9px !important; border: 0 !important; border-radius: 999px !important; background: #eef5fc !important; color: var(--x-blue-text) !important; font-size: 11.5px !important; font-weight: 700 !important; }
body.rd.x-page .x-auto-body .r3-case-card h2 { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 16px !important; font-size: 17px !important; line-height: 1.4 !important; }
body.rd.x-page .x-auto-body .r3-case-card ul { grid-column: 1 / -1; grid-row: 3; align-self: end; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px !important; margin: 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--x-line); }
body.rd.x-page .x-auto-body .r3-case-card li:first-child { grid-column: 1; color: var(--x-blue-text) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em; }
body.rd.x-page .x-auto-body .r3-case-card li:nth-child(2) { grid-column: 2; color: var(--x-muted) !important; font-size: 13px !important; text-align: right; }
body.rd.x-page .x-auto-body .r3-case-card li:nth-child(n+3) { grid-column: 1 / -1; color: var(--x-muted) !important; font-size: 12.5px !important; }
/* Non-standard case cards: figures stacked; several tags (or a long label) move to their own row. */
body.rd.x-page .x-auto-body .r3-case-card:not(.x-case-std) ul { grid-template-columns: minmax(0, 1fr) !important; }
body.rd.x-page .x-auto-body .r3-case-card:not(.x-case-std) li { grid-column: 1 !important; text-align: left !important; }
body.rd.x-page .x-auto-body .r3-case-card:not(.x-case-std) li:nth-child(2) { color: var(--x-text) !important; font-size: 13.5px !important; }
body.rd.x-page .x-auto-body .r3-case-card.x-case-tags > div { grid-template-rows: auto auto 1fr auto; }
body.rd.x-page .x-auto-body .r3-case-card.x-case-tags .wf-kicker { grid-column: 1 / -1; }
body.rd.x-page .x-auto-body .r3-case-card.x-case-tags .wf-tag-row { grid-column: 1 / -1; grid-row: 4; justify-self: start; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px !important; }
/* 적용 사례 cards: light sky fill on the white section; the product badge turns white to stay visible. */
body.rd.x-page .x-auto-body .r3-case-card { background: var(--x-sky) !important; border-color: transparent !important; outline: none !important; }
body.rd.x-page .x-auto-body .r3-case-card:hover { border-color: var(--x-blue) !important; }
body.rd.x-page .x-auto-body .r3-case-card .wf-tag { background: #fff !important; }
body.rd.x-page .x-auto-body .r3-case-card ul { border-top-color: #d6e4f0 !important; }
/* Case cards, one structure for all: label · title (two-line slot) · rule · figures · tags on the bottom line. */
body.rd.x-page .x-auto-body .r3-case-card > div { display: flex !important; flex-direction: column; align-items: stretch; height: 100%; }
body.rd.x-page .x-auto-body .r3-case-card .wf-kicker { order: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.rd.x-page .x-auto-body .r3-case-card h2 { order: 2; min-height: calc(17px * 1.4 * 2); margin: 10px 0 14px !important; }
body.rd.x-page .x-auto-body .r3-case-card ul { order: 3; align-self: stretch; }
body.rd.x-page .x-auto-body .r3-case-card .wf-tag-row { order: 4; display: flex !important; flex-wrap: wrap; gap: 6px; justify-self: auto; align-self: flex-start; margin: auto 0 0 !important; padding-top: 16px; }
body.rd.x-page .x-auto-body .r3-case-card li:nth-child(n+3), body.rd.x-page .x-auto-body .r3-case-card:not(.x-case-std) li:nth-child(n+2) { font-size: 13px !important; line-height: 1.55 !important; }
body.rd.x-page .x-auto-body .r3-case-card, body.rd.x-page .x-auto-body .r3-case-card * { text-align: left !important; }
body.rd.x-page .x-auto-body .r3-case-card.x-case-std ul > li:nth-child(2) { text-align: right !important; }
body.rd.x-page .x-auto-body .r3-case-card .wf-kicker { display: block !important; align-self: stretch !important; }
/* Everything in a case card reads from the left: the year sits under the capacity like every other detail. */
body.rd.x-page .x-auto-body .r3-case-card ul { grid-template-columns: minmax(0, 1fr) !important; }
body.rd.x-page .x-auto-body .r3-case-card ul > li, body.rd.x-page .x-auto-body .r3-case-card.x-case-std ul > li:nth-child(2) { grid-column: 1 !important; text-align: left !important; }
body.rd.x-page .x-auto-body .r3-case-card ul > li:nth-child(n+2) { color: var(--x-muted) !important; font-size: 13px !important; }
body.rd.x-page .x-auto-body .r3-case-card.x-case-tags .wf-tag-row { margin-top: auto !important; }
/* The tab row under each page cover is removed on every page (the side bar covers in-page navigation). */
body.rd .hfp-page-header .x-pagehead-tabs { display: none !important; }
/* Overview strengths: icon cards side by side. */
body.rd.x-page .x-strengths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
body.rd.x-page .x-strength { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: clamp(24px, 2.4vw, 32px); border: 1px solid var(--x-line); border-radius: 24px; background: #fff; }
body.rd.x-page .x-sec--sky .x-strength { border-color: transparent; }
body.rd.x-page .x-strength::before, body.rd.x-page .x-strength::marker { content: none !important; }
body.rd.x-page .x-strength .rd-icon { margin: 0 !important; }
body.rd.x-page .x-strength p { margin: 0; color: var(--x-ink); font-size: 17px; font-weight: 600; line-height: 1.55; letter-spacing: -.02em; text-wrap: pretty; }
@media (max-width: 900px) { body.rd.x-page .x-strengths { grid-template-columns: minmax(0, 1fr); } }
/* Space between a redrawn chart and the description under it. */
body.rd.x-page .hfe-card > figure.x-redrawn { margin-bottom: 22px !important; }
/* Footer site map on white, with a thin rule above so it stays apart from a white last section. */
.wf-sitemap-section.wf-sitemap-compact { background: #fff !important; border-top: 1px solid #e2e8ee !important; }
/* White boxes on a white section take the light sky fill; their grey outline goes (the fill carries the shape). Emphasis rings stay. */
body.rd.x-page .x-onwhite { background-color: var(--x-sky) !important; }
body.rd.x-page .x-onwhite:not(.is-hifilm):not(.is-ours):not(.hm-material) { border-color: transparent !important; }
/* Product photos with a white backdrop blend into the sky fill. */
body.rd.x-page .x-onwhite :is(.rd-stage-product, .r3-cassette-photos figure, .r3-product-photo-grid figure) img,
body.rd.x-page :is(.rd-stage-product, .r3-cassette-photos figure, .r3-product-photo-grid figure).x-onwhite img { mix-blend-mode: multiply; }

/* 분리막 및 모듈 product cards (redesign 2026-11-07). */
body.rd.x-page .r3-material-families { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; }
body.rd.x-page .r3-material-families > a { display: flex !important; flex-direction: column; overflow: hidden; padding: 0 !important; border: 0 !important; border-radius: 24px !important; background: var(--x-sky) !important; color: inherit; text-decoration: none; box-shadow: none !important; transition: transform .25s, box-shadow .25s; }
body.rd.x-page .r3-material-families > a:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 29, 58, .35) !important; }
body.rd.x-page .r3-material-families > a > figure { margin: 0 !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid #dbe8f3 !important; }
body.rd.x-page .r3-material-families > a > figure img { transition: transform .4s; }
body.rd.x-page .r3-material-families > a:hover > figure img { transform: scale(1.03); }
body.rd.x-page .r3-material-families .r3-family-number { display: flex !important; align-items: center; gap: 8px; margin: 28px 28px 0 !important; padding: 0 !important; color: var(--x-blue-text) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .04em; }
body.rd.x-page .r3-material-families .r3-family-number strong { color: var(--x-muted) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0; }
body.rd.x-page .r3-material-families .r3-family-number strong::before { content: "·"; margin-right: 8px; color: #b5c6d6; }
body.rd.x-page .r3-material-families h2 { margin: 10px 28px 12px !important; color: var(--x-ink) !important; font-size: clamp(22px, 1.9vw, 26px) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.025em; }
body.rd.x-page .r3-material-families p { margin: 0 28px !important; min-height: calc(15.5px * 1.7 * 2); color: var(--x-text) !important; font-size: 15.5px !important; line-height: 1.7 !important; }
body.rd.x-page .r3-material-families > a > span { display: flex !important; align-items: center; justify-content: space-between; margin: auto 28px 0 !important; padding: 18px 0 24px !important; border-top: 1px solid #dbe8f3; color: var(--x-blue-text) !important; font-size: 15px !important; font-weight: 600 !important; }
body.rd.x-page .r3-material-families p + span { margin-top: 24px !important; }
@media (max-width: 900px) { body.rd.x-page .r3-material-families { grid-template-columns: minmax(0, 1fr) !important; } }
/* Stronger than the per-component white fills. */
body.rd.x-page .x-sec .x-onwhite.x-onwhite.x-onwhite { background-color: var(--x-sky) !important; background-image: none !important; }
body.rd.x-page .x-sec .x-onwhite.x-onwhite.x-onwhite:not(.is-hifilm):not(.is-ours):not(.hm-material) { border-color: transparent !important; }
/* One "WAVE 작동 영상 보기" link above the parts cards. */
body.rd.x-page .x-parts-action { display: flex; justify-content: flex-end; margin: 0 0 20px; }
body.rd.x-page .x-parts-action .x-parts-link { display: inline-flex !important; align-items: center; gap: 8px; min-height: 46px; margin: 0 !important; padding: 0 22px !important; border: 1px solid var(--x-line-2) !important; border-radius: 999px !important; background: #fff !important; color: var(--x-ink) !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none; }
body.rd.x-page .x-parts-action .x-parts-link:hover { border-color: var(--x-blue) !important; color: var(--x-blue-text) !important; }
/* Notes (hfv-note): plain text on the page background, no tinted box or side bar. */
body.rd.x-page .x-sec .hfv-note { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--x-muted) !important; font-size: 14px !important; }
/* WAVE 5-step mechanism (open): problems | Hifilm's answer. */
body.rd.x-page .x-mech { margin: clamp(56px, 6vw, 88px) 0 0; }
body.rd.x-page .x-mech .x-eyebrow { margin: 0 0 12px; }
body.rd.x-page .x-mech-title { margin: 0 0 14px; color: var(--x-ink); font-size: clamp(24px, 2.3vw, 30px); font-weight: 700; line-height: 1.35; letter-spacing: -.03em; }
body.rd.x-page .x-mech-lead { margin: 0 0 36px; max-width: 760px; color: var(--x-text); font-size: 16.5px; line-height: 1.75; }
body.rd.x-page .x-mech-grid { display: grid; grid-template-columns: minmax(0, var(--p)) minmax(0, var(--s)); gap: 28px; }
body.rd.x-page .x-mech-grid { grid-template-columns: calc((100% - 28px) * 3 / 5) 1fr; }
body.rd.x-page .x-mech-label { margin: 0 0 14px; padding-top: 12px; border-top: 2px solid #c3ccd5; color: var(--x-muted); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
body.rd.x-page .x-mech-group.is-solution .x-mech-label { border-top-color: var(--x-blue); color: var(--x-blue-text); }
body.rd.x-page .x-mech-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
body.rd.x-page .x-mech-step { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px 22px 26px; border-radius: 20px; background: var(--x-sky); }
body.rd.x-page .x-mech-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--x-navy); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
body.rd.x-page .x-mech-step h4 { margin: 4px 0 0; min-height: calc(18px * 1.4 * 2); color: var(--x-ink); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
body.rd.x-page .x-mech-step p { margin: 0; color: var(--x-text); font-size: 14.5px; line-height: 1.7; }
body.rd.x-page .x-mech-group.is-solution .x-mech-step { background: var(--x-navy); }
body.rd.x-page .x-mech-group.is-solution .x-mech-num { background: #008fe6; }
body.rd.x-page .x-mech-group.is-solution .x-mech-step h4 { color: #fff; }
body.rd.x-page .x-mech-group.is-solution .x-mech-step p { color: rgba(255, 255, 255, .78); }
@media (max-width: 1100px) {
  body.rd.x-page .x-mech-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  body.rd.x-page .x-mech-row { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-mech-step h4 { min-height: 0; }
}
body.rd.x-page .x-half-film { display: block; width: 100%; height: auto; aspect-ratio: 720 / 820; object-fit: cover; background: #eef1f4; }
/* Mechanism cards: white on sky sections; both groups end on the same line. */
body.rd.x-page .x-sec--sky .x-mech-group:not(.is-solution) .x-mech-step { background: #fff; outline: 1px solid #e2e8ee; outline-offset: -1px; }
body.rd.x-page .x-mech-grid { align-items: stretch; }
body.rd.x-page .x-mech-group { display: flex; flex-direction: column; }
body.rd.x-page .x-mech-row { flex: 1 1 auto; }
/* 찾아오시는 길: plant photo across the top of each card. */
body.rd.x-page .r3-locations > article { overflow: hidden; padding-top: 0 !important; }
body.rd.x-page .r3-locations .x-loc-photo { margin: 0 calc(-1 * var(--x-loc-pad, 28px)) 24px !important; aspect-ratio: 16 / 9; overflow: hidden; }
body.rd.x-page .r3-locations .x-loc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.rd.x-page .r3-locations > article > .rd-icon { display: none !important; }
body.rd.x-page .r3-locations .x-loc-photo, body.rd.x-page .r3-locations .x-loc-photo img { border-radius: 0 !important; }
/* A sky box on a sky background turns white with a thin stroke (active navy options keep their navy). */
body.rd.x-page .x-sec .x-onsky.x-onsky:not([aria-pressed="true"]):not(.is-active) { background-color: #fff !important; background-image: none !important; outline: 1px solid #e2e8ee; outline-offset: -1px; }
/* WAVE 3D motions in place of the 2D drawings. */
body.rd.x-page .x-wave-motion { position: relative; width: 100%; height: clamp(300px, 34vw, 460px); }
body.rd.x-page .x-wave-motion--wheel { height: clamp(260px, 28vw, 380px); }
body.rd.x-page .x-wave-motion canvas { display: block; width: 100% !important; height: 100% !important; }
body.rd.x-page .hfv-cycle .wf-wave-cycle-step.is-current { outline: 2px solid var(--x-blue) !important; outline-offset: -2px; }
body.rd.x-page .hfv-cycle .hfv-cycle-step-button[aria-pressed="true"] { background: var(--x-navy) !important; color: #fff !important; border-color: var(--x-navy) !important; }
@media (max-width: 700px) { body.rd.x-page .x-wave-motion { height: 260px; } body.rd.x-page .x-wave-motion--wheel { height: 220px; } }
/* 왕복 1주기 step cards: the card is the control; the active step turns navy like the other 3D step selectors. */
body.rd.x-page .x-step-card { cursor: pointer; transition: background-color .2s, color .2s; }
body.rd.x-page .x-step-card:focus-visible { outline: 2px solid var(--x-blue) !important; outline-offset: 2px; }
body.rd.x-page .hfv-cycle .wf-wave-cycle-step.is-current, body.rd.x-page .x-sec .x-step-card.is-current { outline: none !important; background: var(--x-navy) !important; }
body.rd.x-page .x-sec .x-step-card.is-current :is(h3, h4) { color: #fff !important; }
body.rd.x-page .x-sec .x-step-card.is-current p { color: rgba(255, 255, 255, .78) !important; }
body.rd.x-page .x-sec .x-step-card.is-current > span:first-child { color: #48aaff !important; }
body.rd.x-page .x-sec .x-step-card > .hfv-cycle-step-button[hidden] { display: none !important; }
body.rd.x-page .x-sec .x-step-card.is-current.is-current.is-current.is-current { background-color: var(--x-navy) !important; background-image: none !important; outline: none !important; }
/* WAVE 현장 운전 지표 cards: label pill, large figure, a rule, then the condition line (no icon). */
body.rd.x-page .wf-field-metrics > article { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; padding: clamp(26px, 2.6vw, 36px) !important; }
body.rd.x-page .wf-field-metrics > article > .rd-icon { display: none !important; }
body.rd.x-page .wf-field-metrics > article .wf-kicker { display: inline-flex !important; align-items: center; margin: 0 0 18px !important; padding: 5px 12px !important; border-radius: 999px; background: #fff; color: var(--x-blue-text) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .02em; }
body.rd.x-page .wf-field-metrics > article .wf-kicker::before { content: none !important; }
body.rd.x-page .wf-field-metrics > article strong { display: flex; align-items: baseline; gap: 8px; margin: 0 !important; color: var(--x-ink) !important; font-size: clamp(30px, 3vw, 40px) !important; font-weight: 800 !important; line-height: 1.15; letter-spacing: -.03em; }
body.rd.x-page .wf-field-metrics > article strong small { color: var(--x-muted) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0; }
body.rd.x-page .wf-field-metrics > article > p:not(.wf-kicker) { align-self: stretch; margin: 20px 0 0 !important; padding-top: 16px !important; border-top: 1px solid #d6e4f0; color: var(--x-text) !important; font-size: 15px !important; line-height: 1.6; }
/* Filtration 3D motion in place of the image slot. */
body.rd.x-page .x-filtration-motion { position: relative; width: 100%; height: clamp(300px, 32vw, 440px); border-radius: 20px; background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%); overflow: hidden; }
body.rd.x-page .x-filtration-motion canvas { display: block; width: 100% !important; height: 100% !important; }
@media (max-width: 700px) { body.rd.x-page .x-filtration-motion { height: 260px; } }
/* Product hero images: transparent PNGs shown whole. */
body.rd.x-page :is(.x-slot, .rd-slot):not(.is-empty) img { object-fit: contain !important; }
/* AI reconstruction note under 사업 계보. */
body.rd.x-page .x-ai-note { margin: 18px 0 0; color: var(--x-muted); font-size: 13px; }
/* 주요 연혁 in two columns (2020 onward on the right). */
body.rd.x-page .wf-company-milestone-grid.x-ms-two { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(32px, 5vw, 80px) !important; align-items: start; }
@media (max-width: 760px) {
  body.rd.x-page .wf-company-milestone-grid.x-ms-two { grid-template-columns: minmax(0, 1fr) !important; }
  body.rd.x-page .wf-company-milestone-grid.x-ms-two > * { grid-column: 1 !important; grid-row: auto !important; }
}
/* Timeline: dot on the same line as year and text; each column draws its own connecting line. */
body.rd.x-page .wf-company-milestone-grid.x-ms-two { row-gap: 0 !important; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two::before { content: none !important; display: none !important; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two > article { align-items: center !important; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two > article > :is(span, p) { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two > article::before { top: 50% !important; bottom: auto !important; transform: translateY(-50%); z-index: 1; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two > article::after { content: "" !important; position: absolute !important; left: 95px; top: 0; bottom: 0; width: 1px; background: #cfd9e2; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two > article.x-ms-first::after { top: 50%; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two > article.x-ms-last::after { bottom: 50%; }
body.rd.x-page .wf-company-milestone-grid.x-ms-two > article > :is(span, p) { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.5 !important; }
/* 회사소개 핵심 가치 cards: icon, larger title, text, blue key line (no number, no rule). */
body.rd.x-page .wf-core-values-grid > article { display: flex !important; flex-direction: column; align-items: flex-start; }
body.rd.x-page .wf-core-values-grid > article .wf-core-values-card-head { display: none !important; }
body.rd.x-page .wf-core-values-grid > article > .rd-icon { margin: 0 0 28px !important; }
body.rd.x-page .wf-core-values-grid > article h3 { margin: 0 0 14px !important; color: var(--x-ink) !important; font-size: clamp(22px, 1.9vw, 26px) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.025em; }
body.rd.x-page .wf-core-values-grid > article p { margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--x-text) !important; font-size: 16px !important; line-height: 1.75 !important; }
body.rd.x-page .wf-core-values-grid > article p::after, body.rd.x-page .wf-core-values-grid > article strong::before { content: none !important; display: none !important; }
body.rd.x-page .wf-core-values-grid > article strong { margin: auto 0 0 !important; padding: 20px 0 0 !important; border: 0 !important; color: var(--x-blue-text) !important; font-size: 16px !important; font-weight: 700 !important; }
/* 회사소개 사업 계보 (2026-11-07): navy cards in a staggered row, text on top, glowing 3D picture fading in at the bottom. */
body.rd.x-page .wf-history-strip { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; align-items: start !important; }
body.rd.x-page .wf-history-strip > article:nth-child(even) { margin-top: 56px !important; }
body.rd.x-page .x-sec .wf-history-strip > article.x-onwhite.x-onwhite.x-onwhite.x-onwhite, body.rd.x-page .x-sec .wf-history-strip > article { display: flex !important; flex-direction: column; overflow: hidden; min-height: 440px; padding: 0 !important; border: 0 !important; border-radius: 28px !important; outline: none !important; box-shadow: 0 24px 48px -28px rgba(0, 29, 58, .55) !important; background: radial-gradient(120% 70% at 50% 100%, rgba(0, 143, 230, .28) 0%, rgba(0, 143, 230, 0) 60%), linear-gradient(170deg, #0b2f57 0%, #001d3a 55%, #00142a 100%) !important; }
body.rd.x-page .wf-history-strip > article > div { order: 1; padding: 32px 30px 0 !important; }
body.rd.x-page .wf-history-strip > article > div > span { display: block; margin: 0 0 10px !important; color: #48aaff !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .08em; }
body.rd.x-page .wf-history-strip > article > div > .wf-kicker { margin: 0 !important; padding: 0 0 18px !important; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff !important; font-size: clamp(22px, 1.9vw, 27px) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -.02em; text-transform: none; }
body.rd.x-page .wf-history-strip > article > div > .wf-kicker::before { content: none !important; }
body.rd.x-page .wf-history-strip > article > div > p:not(.wf-kicker) { margin: 18px 0 0 !important; color: rgba(255, 255, 255, .78) !important; font-size: 15.5px !important; line-height: 1.65 !important; }
body.rd.x-page .wf-history-strip > article > img { order: 2; display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; margin-top: auto !important; object-fit: cover !important; border-radius: 0 !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%); mask-image: linear-gradient(to bottom, transparent 0%, #000 38%); }
@media (max-width: 1100px) { body.rd.x-page .wf-history-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { body.rd.x-page .wf-history-strip { grid-template-columns: minmax(0, 1fr) !important; } body.rd.x-page .wf-history-strip > article:nth-child(even) { margin-top: 0 !important; } }
/* 분리막 및 모듈 cards: room above the rule before "제품군 보기". */
body.rd.x-page .r3-material-families > a > p { margin-bottom: 28px !important; }

/* Home: wide background pictures behind the story sections (structure and copy unchanged). */
.hl-home .xh-has-bg { position: relative; isolation: isolate; overflow: hidden; }
.hl-home .xh-has-bg > :not(.xh-bg) { position: relative; z-index: 1; }
.hl-home .xh-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hl-home .xh-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-home .xh-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 29, 58, .92) 0%, rgba(0, 29, 58, .55) 45%, rgba(0, 29, 58, .88) 100%); }
/* Stand-in pictures (light renders) read as a faint texture on navy until the GPT backgrounds arrive. */
.hl-home .xh-bg.is-fallback img { opacity: .2; filter: grayscale(1) contrast(1.15); mix-blend-mode: screen; }
.hl-home .xh-bg.is-fallback::after { background: radial-gradient(80% 70% at 50% 45%, rgba(0, 29, 58, .35) 0%, rgba(0, 29, 58, .9) 100%); }

/* Active menu underline: thicker, sits on the header's bottom edge */
body .wf-header .wf-nav-item > a.is-active::before { bottom: -1px !important; height: 4px !important; border-radius: 0 !important; background: #176db5 !important; }
body .wf-header .wf-nav-item > a.is-active { border-bottom-color: transparent !important; }

/* Pilot-study note: plain text with the left bar, no fill */
body.rd.x-page .hfe-boundary { background: transparent !important; padding: 4px 0 4px 18px !important; }

/* Field-data disclaimer: readable size */
body.rd.x-page .wf-wave-footnote { font-size: 15px !important; line-height: 1.6 !important; color: #3f5163 !important; font-weight: 500 !important; padding-top: 18px !important; }

/* WAVE field videos: same grid edge and card rules as the other sections */
body.rd.x-page .hfm-field-evidence { margin: 0 !important; width: 100% !important; padding: 0 !important; }
body.rd.x-page .hfm-field-evidence .hfm-evidence-head { display: block !important; margin: 0 0 28px !important; padding: 0 !important; }
body.rd.x-page .hfm-field-evidence .hfm-label { margin: 0 0 10px !important; color: #176db5 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
body.rd.x-page .hfm-field-evidence .hfm-evidence-head h3 { margin: 0 !important; color: #001d3a !important; font-size: clamp(22px, 2vw, 28px) !important; font-weight: 700 !important; line-height: 1.35 !important; }
body.rd.x-page .hfm-field-evidence .hfm-evidence-badge { display: none !important; }
body.rd.x-page .hfm-field-evidence .hfm-field-video-grid { gap: 24px !important; margin: 0 !important; }
body.rd.x-page .hfm-field-evidence .hfm-field-video-grid > figure { margin: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 24px !important; background: #f0f8fe !important; box-shadow: none !important; }
body.rd.x-page .hfm-field-evidence .hfm-field-video-grid > figure video,
body.rd.x-page .hfm-field-evidence .hfm-field-video-grid > figure img { border-radius: 0 !important; }
body.rd.x-page .hfm-field-evidence .hfm-field-video-grid > figure figcaption { padding: 26px 28px 28px !important; }
body.rd.x-page .hfm-field-evidence .hfm-reading-note { margin-top: 24px !important; border-radius: 24px !important; }

/* Reuse-process 3D: full content width, no grey frame, image fills its box */
body.rd.x-page .r3-reuse-visual { max-width: none !important; width: 100% !important; margin: 0 !important; border-radius: 24px !important; background: none !important; }
body.rd.x-page .r3-reuse-visual > .x-slot { aspect-ratio: 16 / 9 !important; max-width: none !important; width: 100% !important; margin: 0 !important; border-radius: 24px !important; background: #eef6fc !important; }
body.rd.x-page .r3-reuse-visual > .x-slot img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; padding: 0 !important; }

/* Brochure download form */
.r3-dialog .r3-dialog-lead { margin: -4px 0 20px; color: #3f5163; font-size: 15px; line-height: 1.6; }
.r3-inquiry-form .r3-consent { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; color: #3f5163; font-size: 14px; font-weight: 500; line-height: 1.55; }
.r3-inquiry-form .r3-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #176db5; }

/* Reuse-process 3D now has a white background: show it whole on white */
body.rd.x-page .x-field-media.x-slot:not(.is-empty) { background: #fff !important; }
body.rd.x-page .x-field-media.x-slot:not(.is-empty) img { object-fit: contain !important; }
body.rd.x-page .r3-reuse-visual > .x-slot { background: #fff !important; }

/* Milestones: grid and its top rule fill the container */
body.rd.x-page .wf-company-milestone-grid.x-ms-two { max-width: none !important; width: 100% !important; }

/* Plant cards (company + contact): larger plant names */
body.rd.x-page .wf-company-facility-grid > article h3,
body.rd.x-page .r3-locations > * > h3 { font-size: clamp(22px, 1.9vw, 26px) !important; line-height: 1.35 !important; }

/* ================= Navy accent points (2026-11-07) ================= */
/* 1. Closing banner with a glowing object on the right */
body.rd.x-page .x-cta-sec { padding-top: 0 !important; }
body.rd.x-page .x-next.x-next--glow { position: relative; overflow: hidden; isolation: isolate; min-height: 340px; padding-right: clamp(40px, 38%, 480px) !important; background: radial-gradient(70% 120% at 85% 110%, #0b4f8f 0%, #001d3a 62%) !important; }
body.rd.x-page .x-next--glow > div:not(.x-next-glow) { position: relative; z-index: 1; }
body.rd.x-page .x-next--glow .x-next-actions { flex: 1 1 100% !important; }
body.rd.x-page .x-next-glow { position: absolute !important; right: 0; bottom: 0; z-index: 0; width: 46%; height: 100%; flex: none !important; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
body.rd.x-page .x-next-glow img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
body.rd.x-page .x-next .x-eyebrow { color: #48aaff !important; }
body.rd.x-page .x-next .x-button--ghost { border-color: #ffffff59 !important; color: #fff !important; background: transparent !important; }
@media (max-width: 900px) {
  body.rd.x-page .x-next.x-next--glow { padding-right: clamp(24px, 6vw, 40px) !important; padding-bottom: 220px !important; }
  body.rd.x-page .x-next-glow { width: 100%; height: 240px; top: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
}

/* 2. ODM/OEM strengths: navy cards */
body.rd.x-page .x-strengths.x-navy .x-strength { position: relative; overflow: hidden; border: 0 !important; background: linear-gradient(180deg, #0b2f57 0%, #001d3a 60%, #00142a 100%) !important; }
body.rd.x-page .x-strengths.x-navy .x-strength p { color: #fff !important; position: relative; z-index: 1; }
body.rd.x-page .x-strengths.x-navy .x-strength p :is(strong, b) { color: #48aaff !important; }
body.rd.x-page .x-strengths.x-navy .rd-icon { position: relative; z-index: 1; color: #48aaff !important; background: #48aaff1f !important; }
body.rd.x-page .x-strengths.x-navy .rd-icon svg { color: #48aaff !important; }
body.rd.x-page .x-strength-img { margin: 8px calc(-1 * clamp(24px, 2.4vw, 32px)) calc(-1 * clamp(24px, 2.4vw, 32px)); aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); }
body.rd.x-page .x-strength-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 4·6. Navy key-number strip (cases, company) */
body.rd.x-page .x-navy-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 clamp(32px, 4vw, 48px); padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 44px); border-radius: 28px; background: radial-gradient(60% 140% at 100% 100%, #0b4f8f 0%, #001d3a 60%); }
body.rd.x-page .x-navy-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(32px, 4vw, 48px) 0 0; }
body.rd.x-page .x-navy-stats > div { display: grid; gap: 8px; padding: 4px clamp(16px, 2vw, 28px); border-left: 1px solid #ffffff24; }
body.rd.x-page .x-navy-stats > div:first-child { border-left: 0; padding-left: 0; }
body.rd.x-page .x-navy-stats strong { color: #fff; font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
body.rd.x-page .x-navy-stats strong small { margin-left: 4px; color: #48aaff; font-size: .45em; font-weight: 700; letter-spacing: 0; }
body.rd.x-page .x-navy-stats span { color: #ffffffb8; font-size: 15px; font-weight: 500; }
@media (max-width: 760px) {
  body.rd.x-page .x-navy-stats, body.rd.x-page .x-navy-stats--three { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  body.rd.x-page .x-navy-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* 5. Cleanfil-S 고유량·고강도·편의성: navy cards */
body.rd.x-page .r3-prose-list.x-navy > li { border: 0 !important; box-shadow: none !important; background: linear-gradient(135deg, #0b2f57 0%, #001d3a 70%) !important; color: #ffffffc2 !important; }
body.rd.x-page .r3-prose-list.x-navy > li strong { color: #48aaff !important; }

/* WAVE energy evidence cards: light, one clear reading order
   (study label → title → key number → chart/condition → notes → details) */
body.rd.x-page .hfe-energy .hfe-two { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch !important; }
body.rd.x-page .hfe-energy .hfe-card { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: clamp(28px, 3vw, 40px) !important; border: 0 !important; border-radius: 24px !important; box-shadow: none !important; background: #f0f8fe !important; color: #3f5163 !important; }
body.rd.x-page .hfe-energy .hfe-card > .rd-icon { display: none !important; }
body.rd.x-page .hfe-energy .hfe-card-top { display: contents !important; }
body.rd.x-page .hfe-energy .hfe-tag { order: 1; align-self: flex-start; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: none !important; color: #176db5 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
body.rd.x-page .hfe-energy .hfe-card > :is(h3, h4) { order: 2; margin: 0 0 24px !important; color: #001d3a !important; font-size: clamp(19px, 1.6vw, 22px) !important; font-weight: 700 !important; line-height: 1.45 !important; }
body.rd.x-page .hfe-energy .hfe-number { order: 3; display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 0 28px !important; padding: 0 0 28px !important; border-bottom: 1px solid #d3e3ef !important; color: #176db5 !important; font-size: clamp(40px, 4vw, 54px) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.03em !important; }
body.rd.x-page .hfe-energy .hfe-number small { display: block !important; margin: 0 !important; color: #3f5163 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0 !important; }
body.rd.x-page .hfe-energy .hfe-card > :not(.rd-icon, .hfe-card-top, h4) { order: 4; }
body.rd.x-page .hfe-energy .hfe-chart { width: 100% !important; height: auto !important; margin: 0 0 20px !important; padding: 20px 16px 8px !important; border-radius: 16px; background: #fff; }
body.rd.x-page .hfe-energy .hfe-chart .hfe-gridline { stroke: #e3ecf3 !important; }
body.rd.x-page .hfe-energy .hfe-chart :is(.hfe-tick, .hfe-svg-unit) { fill: #6a7f90 !important; }
body.rd.x-page .hfe-energy .hfe-chart .hfe-series-label { fill: #23384a !important; }
body.rd.x-page .hfe-energy .hfe-chart .hfe-bar-muted { fill: #b5c6d4 !important; }
body.rd.x-page .hfe-energy .hfe-chart .hfe-bar { fill: #176db5 !important; }
body.rd.x-page .hfe-energy .hfe-chart .hfe-bar-value { fill: #001d3a !important; }
body.rd.x-page .hfe-energy .hfe-study-condition { display: grid !important; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 16px; margin: 0 0 20px !important; padding: 20px 24px !important; border: 0 !important; border-radius: 16px !important; background: #fff !important; }
body.rd.x-page .hfe-energy .hfe-study-condition > span { color: #5b7183 !important; font-size: 14px !important; font-weight: 600 !important; }
body.rd.x-page .hfe-energy .hfe-study-condition > strong { color: #001d3a !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; }
body.rd.x-page .hfe-energy .hfe-study-condition > strong small { margin-left: 4px; color: #3f5163 !important; font-size: 15px !important; font-weight: 600 !important; }
body.rd.x-page .hfe-energy .hfe-study-condition > p { grid-column: 1 / -1; margin: 4px 0 0 !important; color: #3f5163 !important; font-size: 15.5px !important; line-height: 1.6 !important; }
body.rd.x-page .hfe-energy .hfe-card > p:not(.hfe-source) { margin: 0 0 20px !important; color: #3f5163 !important; font-size: 16px !important; line-height: 1.7 !important; }
body.rd.x-page .hfe-energy .hfe-card > .hfe-source { margin: auto 0 0 !important; padding-top: 4px; color: #5b7183 !important; font-size: 14px !important; line-height: 1.65 !important; }
body.rd.x-page .hfe-energy .hfe-card .hfe-source a { color: #176db5 !important; font-weight: 600; }
body.rd.x-page .hfe-energy .hfe-details { margin: 20px 0 0 !important; padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid #d3e3ef !important; background: none !important; }
body.rd.x-page .hfe-energy .hfe-details > summary { color: #23384a !important; font-size: 15px !important; font-weight: 600 !important; }
body.rd.x-page .hfe-energy .hfe-details[open] .hfe-table-scroll { margin-top: 14px; padding: 8px 12px; border-radius: 14px; background: #fff; }
@media (max-width: 900px) { body.rd.x-page .hfe-energy .hfe-two { grid-template-columns: minmax(0, 1fr) !important; } }

/* Trend charts: no rule between chart and caption */
body.rd.x-page .wf-trend-grid figure > figcaption { border-top: 0 !important; padding-top: 14px !important; }

/* '세정 효율' note: readable card */
body.rd.x-page .wf-wave-guard.is-info { margin: 32px 0 0 !important; padding: clamp(28px, 3vw, 40px) clamp(28px, 3.4vw, 48px) !important; border: 0 !important; border-radius: 24px !important; background: #f0f8fe !important; box-shadow: none !important; }
body.rd.x-page .wf-wave-guard.is-info .wf-kicker { margin: 0 0 16px !important; color: #001d3a !important; font-size: clamp(19px, 1.6vw, 22px) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
body.rd.x-page .wf-wave-guard.is-info p:not(.wf-kicker) { max-width: 920px; margin: 0 !important; color: #23384a !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.8 !important; text-wrap: pretty; }
body.rd.x-page .wf-wave-guard.is-info p:not(.wf-kicker) + p { margin-top: 6px !important; }
body.rd.x-page .wf-wave-guard.is-info strong { color: #176db5 !important; font-weight: 700 !important; }

/* Closing banner: lift the glowing object, fade its lower edge into the banner */
body.rd.x-page .x-next-glow { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 68%, transparent 92%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 68%, transparent 92%); mask-composite: intersect; }
body.rd.x-page .x-next-glow img { object-position: 50% 100% !important; transform: translateY(-16%); }
@media (max-width: 900px) {
  body.rd.x-page .x-next-glow { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 80%, transparent 100%); }
  body.rd.x-page .x-next-glow img { transform: translateY(-8%); }
}

/* Brochure list: Korean field name before the product name, blue button for the action */
body.rd .r3-brochures button { align-items: center !important; padding: 24px 0 !important; }
body.rd .r3-brochures strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: #001d3a; font-size: 24px; }
body.rd .r3-brochures strong small { color: #3f5163; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
body.rd .r3-brochures .r3-brochure-action { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 168px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #176db5; color: #fff !important; font-size: 15px !important; font-weight: 700; transition: background .18s ease; }
body.rd .r3-brochures button:hover .r3-brochure-action, body.rd .r3-brochures button:focus-visible .r3-brochure-action { background: #0f5a98; }
@media (max-width: 640px) {
  body.rd .r3-brochures button { flex-direction: column; align-items: flex-start !important; gap: 14px; }
  body.rd .r3-brochures strong { flex-direction: column; gap: 4px; font-size: 22px; }
}

/* 사업 계보 cards: lift the glowing objects off the card bottom, fade both edges into the card */
body.rd.x-page .wf-history-strip > article > img { margin-bottom: 40px !important; object-position: 50% 70% !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 80%, transparent 100%) !important; mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 80%, transparent 100%) !important; }

/* Closing banner: bright blue (home highlight #48aaff) on navy */
body.rd.x-page .x-next .x-button:not(.x-button--ghost) { background: #48aaff !important; color: #001d3a !important; }
body.rd.x-page .x-next .x-button:not(.x-button--ghost):hover { background: #6dbcff !important; }

/* Home intro statement: lighter emphasis */
.cr-company-intro p strong, .hl-home .cr-company-intro strong { font-weight: 700 !important; }

/* English mode */
.x-ai-translation { margin: 18px auto 0; padding: 0 16px; max-width: 1200px; color: #ffffff99; font-size: 13px; text-align: center; }
body.x-lang-en .wf-nav-item > a { white-space: normal !important; text-align: center; line-height: 1.25 !important; }

/* Closing banner right after a sky section: keep the same gap as other sections (2026-11-08) */
body.rd.x-page #app > .x-sec--sky + .x-sec:has(.x-next) { padding-top: 88px !important; }
@media (max-width: 760px) { body.rd.x-page #app > .x-sec--sky + .x-sec:has(.x-next) { padding-top: 56px !important; } }

/* Comparison cards (SEM etc.): photo sits straight on the card, caption without its own box (2026-11-08) */
body.rd.x-page .hm-comparison > .hm-material { padding-bottom: 0 !important; }
body.rd.x-page .hm-comparison > .hm-material > .hm-photo { margin: 20px 20px 0 !important; padding: 0 !important; background: transparent !important; outline: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
body.rd.x-page .hm-comparison > .hm-material > .hm-photo > a { display: block; border-radius: 12px !important; overflow: hidden; }
body.rd.x-page .hm-comparison > .hm-material > .hm-photo > figcaption { padding: 12px 2px 20px !important; margin: 0 !important; background: transparent !important; border: 0 !important; }

/* Process step cards: more room between the number badge and the title (2026-11-08) */
body.rd.x-page .x-auto-body .r3-process-detail:not(:has(img)) > ol > li { row-gap: 18px !important; }

/* Projects filter bar: above the field photo, larger and easier to read (2026-11-08) */
body.rd.x-page .r3-case-fields { display: flex !important; flex-wrap: wrap; gap: 10px !important; margin: 0 0 28px !important; padding: 0 !important; }
body.rd.x-page .r3-case-fields a { display: inline-flex !important; align-items: center; min-height: 46px; padding: 0 22px !important; border: 1px solid #d3dee8 !important; border-radius: 999px !important; background: #fff !important; color: #13293d !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
body.rd.x-page .r3-case-fields a:hover { border-color: #176db5 !important; color: #176db5 !important; }
body.rd.x-page .r3-case-fields a.is-active { border-color: #176db5 !important; background: #176db5 !important; color: #fff !important; }
body.rd.x-page .r3-case-fields a:focus-visible { outline: 2px solid #176db5; outline-offset: 2px; }
body.rd.x-page .r3-case-fields + .r3-case-main { margin-top: 0 !important; }
body.rd.x-page .r3-case-main + .r3-case-count { margin-top: 28px !important; }
@media (max-width: 760px) {
  body.rd.x-page .r3-case-fields { flex-wrap: nowrap; overflow-x: auto; gap: 8px !important; margin: 0 -16px 20px !important; padding: 0 16px 4px !important; scrollbar-width: none; }
  body.rd.x-page .r3-case-fields::-webkit-scrollbar { display: none; }
  body.rd.x-page .r3-case-fields a { flex: none; min-height: 42px; padding: 0 18px !important; font-size: 15px !important; }
}
/* Projects: the filter bar starts closer to the page header */
body.rd.x-page #app > #cases-overview.x-sec { padding-top: 48px !important; }
@media (max-width: 760px) { body.rd.x-page #app > #cases-overview.x-sec { padding-top: 32px !important; } }

/* Company key numbers v2: icon chips, large counting numbers, layered navy glow (2026-11-08) */
body.rd.x-page .x-navy-stats.x-stats-v2 { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 60px); border-radius: 28px; background: radial-gradient(55% 130% at 100% 100%, rgba(23, 109, 181, .62) 0%, rgba(23, 109, 181, 0) 62%), radial-gradient(42% 90% at 0% 0%, rgba(72, 170, 255, .16) 0%, rgba(72, 170, 255, 0) 60%), linear-gradient(135deg, #062a52 0%, #001d3a 55%, #00162d 100%); box-shadow: 0 28px 60px -34px rgba(0, 29, 58, .6); }
body.rd.x-page .x-stats-v2::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 45%, transparent 90%); mask-image: linear-gradient(100deg, transparent 0%, #000 45%, transparent 90%); }
body.rd.x-page .x-stats-v2::after { content: ""; position: absolute; inset: 0 8% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(72, 170, 255, .7), transparent); }
body.rd.x-page .x-stats-v2 > .x-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px clamp(20px, 3vw, 44px); border-left: 1px solid rgba(255, 255, 255, .14); }
body.rd.x-page .x-stats-v2 > .x-stat:first-child { padding-left: 0; border-left: 0; }
body.rd.x-page .x-stats-v2 .x-stat-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 14px; background: rgba(72, 170, 255, .12); box-shadow: inset 0 0 0 1px rgba(72, 170, 255, .3); color: #48aaff; font-style: normal; }
body.rd.x-page .x-stats-v2 .x-stat-icon svg { width: 24px; height: 24px; }
body.rd.x-page .x-stats-v2 .x-stat-num { display: flex; align-items: baseline; gap: 6px; margin: 0; color: #fff; font-size: clamp(52px, 5.4vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
body.rd.x-page .x-stats-v2 .x-stat-num b { font-weight: inherit; }
body.rd.x-page .x-stats-v2 .x-stat-num small { margin: 0; color: #48aaff; font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -.01em; }
body.rd.x-page .x-stats-v2 .x-stat-label { margin-top: 14px; color: rgba(255, 255, 255, .8) !important; font-size: 16px !important; font-weight: 500; line-height: 1.5; }
body.rd.x-page .x-stats-v2.x-anim > .x-stat { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
body.rd.x-page .x-stats-v2.x-anim.is-in > .x-stat { opacity: 1; transform: none; }
body.rd.x-page .x-stats-v2.x-anim.is-in > .x-stat:nth-child(2) { transition-delay: .14s; }
body.rd.x-page .x-stats-v2.x-anim.is-in > .x-stat:nth-child(3) { transition-delay: .28s; }
@media (max-width: 760px) {
  body.rd.x-page .x-navy-stats.x-stats-v2 { grid-template-columns: 1fr; padding: 8px 24px; border-radius: 22px; }
  body.rd.x-page .x-stats-v2 > .x-stat, body.rd.x-page .x-stats-v2 > .x-stat:first-child { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  body.rd.x-page .x-stats-v2 > .x-stat:first-child { border-top: 0; }
  body.rd.x-page .x-stats-v2 .x-stat-icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  body.rd.x-page .x-stats-v2 .x-stat-num { font-size: 44px; }
  body.rd.x-page .x-stats-v2 .x-stat-label { margin-top: 6px; font-size: 15px !important; }
}

/* Core values: regular-weight description, blue key line sits below it with a clear gap (2026-11-08) */
body.rd.x-page .wf-core-values-grid > article p { font-weight: 400 !important; }
body.rd.x-page .wf-core-values-grid > article strong { position: static !important; inset: auto !important; display: block !important; margin: auto 0 0 !important; padding: 20px 0 0 !important; }

/* Business lineage cards: rise in one after another (2026-11-08) */
@keyframes x-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes x-rise-img { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
body.rd.x-page .x-reveal:not(.is-in) > * { opacity: 0; }
body.rd.x-page .x-reveal.is-in > * { animation: x-rise .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--x-i, 0) * .18s); }
body.rd.x-page .x-reveal.is-in > * > img { animation: x-rise-img 1.2s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--x-i, 0) * .18s + .25s); }

/* ================= Mobile menu redesign (≤1080px, 2026-11-08) ================= */
@keyframes x-mnav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes x-mnav-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1080px) {
  /* Menu button: round icon button, hamburger ↔ close */
  body .wf-header .wf-menu-button { position: relative; display: inline-grid !important; place-items: center; width: 46px !important; min-width: 0 !important; height: 46px !important; padding: 0 !important; border: 1px solid #d3dee8 !important; border-radius: 50% !important; background: #fff linear-gradient(#13293d, #13293d) center / 18px 2px no-repeat !important; color: transparent !important; font-size: 0 !important; line-height: 0; box-shadow: none !important; transition: background-color .2s, border-color .2s; }
  body .wf-header .wf-menu-button::before, body .wf-header .wf-menu-button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: #13293d; transition: transform .25s ease; }
  body .wf-header .wf-menu-button::before { transform: translateY(-6px); }
  body .wf-header .wf-menu-button::after { transform: translateY(6px); }
  body .wf-header .wf-menu-button[aria-expanded="true"] { border-color: #176db5 !important; background: #176db5 !important; }
  body .wf-header .wf-menu-button[aria-expanded="true"]::before { background: #fff; transform: rotate(45deg); }
  body .wf-header .wf-menu-button[aria-expanded="true"]::after { background: #fff; transform: rotate(-45deg); }
  body .wf-header .wf-menu-button:focus-visible { outline: 2px solid #176db5; outline-offset: 2px; }

  /* Panel: full height under the header, scrolls on its own */
  body .wf-header .wf-nav.is-open { position: fixed !important; inset: var(--x-header-h, 70px) 0 auto !important; z-index: 1000; display: flex !important; flex-direction: column; gap: 0 !important; max-height: none !important; height: calc(100dvh - var(--x-header-h, 70px)) !important; margin: 0 !important; padding: 8px 20px calc(28px + env(safe-area-inset-bottom)) !important; overflow-y: auto !important; overscroll-behavior: contain; border: 0 !important; border-top: 1px solid #e6edf3 !important; background: #fff !important; box-shadow: none !important; backdrop-filter: none !important; animation: x-mnav-in .22s ease both; }
  body:has(.wf-nav.is-open) { overflow: hidden !important; }
  body:has(.wf-nav.is-open)::after { content: none !important; }
  body .wf-header .wf-nav.is-open > .wf-nav-dropdown { display: none !important; }

  /* Section rows */
  body .wf-header .wf-nav.is-open > .wf-nav-item { position: relative; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid #e6edf3 !important; }
  body .wf-header .wf-nav.is-open > .wf-nav-item > a { position: relative; display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 62px !important; height: auto !important; margin: 0 !important; padding: 0 56px 0 4px !important; border: 0 !important; background: none !important; color: #13293d !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.3; text-align: left; justify-content: flex-start; }
  body .wf-header .wf-nav.is-open > .wf-nav-item > a::before, body .wf-header .wf-nav.is-open > .wf-nav-item > a::after { content: none !important; display: none !important; }
  body .wf-header .wf-nav.is-open > .wf-nav-item > a.is-active { color: #176db5 !important; }
  body .wf-header .wf-nav.is-open > .wf-nav-item > a .wf-home-icon { width: 20px; height: 20px; color: inherit; }
  body .wf-header .wf-nav.is-open > .wf-nav-item > a .wf-sr-only { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; }
  body .wf-header .wf-nav.is-open > .wf-nav-item > a .wf-menu-paren { display: none; }

  /* Open/close arrow on the right of each row */
  body .wf-header .wf-nav.is-open .wf-mobile-submenu { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu > summary { position: absolute; top: 0; right: -6px; display: grid; place-items: center; width: 56px; height: 62px; margin: 0 !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu > summary::-webkit-details-marker { display: none; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu > summary::marker { content: ""; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu > summary::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #f0f8fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176db5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .25s ease, background-color .2s; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu[open] > summary::after { transform: rotate(180deg); background-color: #e1f0fc; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu > summary:focus-visible { outline: 0; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu > summary:focus-visible::after { box-shadow: 0 0 0 2px #176db5; }
  body .wf-header .wf-nav.is-open > .wf-nav-item.x-mnav-single .wf-mobile-submenu { display: none !important; }

  /* Sub-links: soft sky box under the open row */
  body .wf-header .wf-nav.is-open .wf-mobile-submenu[open] { margin: 0 0 16px !important; padding: 6px !important; border-radius: 16px !important; background: #f0f8fe !important; animation: x-mnav-fade .2s ease both; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu .wf-menu-link-group { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu a { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 48px; margin: 0 !important; padding: 10px 40px 10px 14px !important; border: 0 !important; border-radius: 12px !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a8ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat !important; color: #2c4255 !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.4; text-align: left; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu a .wf-menu-paren { color: #7b8f9f; font-size: 13px; font-weight: 500; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu a:active { background-color: #fff !important; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu a.x-mnav-here { background-color: #fff !important; color: #176db5 !important; font-weight: 700 !important; box-shadow: 0 1px 0 #dde8f1; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu a.x-mnav-here .wf-menu-paren { color: #176db5; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu .wf-menu-children { display: none !important; }

  /* Bottom contact shortcuts */
  body .wf-header .wf-nav .x-mnav-foot { display: none; }
  body .wf-header .wf-nav.is-open .x-mnav-foot { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 28px; }
  body .wf-header .wf-nav.is-open .x-mnav-cta { display: flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 12px !important; border: 1px solid #176db5 !important; border-radius: 999px !important; background: #176db5 !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; }
  body .wf-header .wf-nav.is-open .x-mnav-cta--line { background: #fff !important; color: #176db5 !important; }
  body .wf-header .wf-nav.is-open .x-mnav-mail { grid-column: 1 / -1; display: block !important; min-height: 0 !important; padding: 6px 0 0 !important; border: 0 !important; background: none !important; color: #5b7183 !important; font-size: 14px !important; font-weight: 500 !important; text-align: center; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  body .wf-header .wf-nav.is-open, body .wf-header .wf-nav.is-open .wf-mobile-submenu[open] { animation: none; }
}
/* Mobile header: language switch sits right next to the menu button */
@media (max-width: 1080px) {
  body .wf-header .wf-navrow { display: flex !important; align-items: center; gap: 8px !important; }
  body .wf-header .wf-navrow > .wf-brand { margin-right: auto !important; min-width: 0; }
  body .wf-header .wf-navrow > .wf-lang-switch { position: static !important; inset: auto !important; transform: none !important; order: 1; flex: none; margin: 0 !important; }
  body .wf-header .wf-navrow > .wf-menu-button { order: 2; flex: none; margin: 0 !important; }
  body .wf-header .wf-navrow > .wf-nav:not(.is-open) { display: none !important; }
}
/* Mobile: minimum readable size for captions, case card labels and footer */
@media (max-width: 760px) {
  body .wf-header .wf-navrow > .wf-lang-switch { height: 46px; box-sizing: border-box; }
  body.rd.x-page #app figcaption, body.rd.x-page #app .hfv-caption { font-size: 13px !important; line-height: 1.55 !important; }
  body.rd.x-page .r3-case-card .wf-kicker { font-size: 13px !important; }
  body.rd.x-page .r3-case-card .wf-tag { font-size: 12.5px !important; }
  body .wf-footer-company { font-size: 13px !important; }
}
@media (max-width: 1080px) { body .wf-header .wf-nav.is-open > .wf-nav-item > a.x-mnav-current { color: #176db5 !important; } }
/* Mobile menu: current page = blue box, white text and arrow */
@media (max-width: 1080px) {
  body .wf-header .wf-nav.is-open .wf-mobile-submenu a.x-mnav-here { background: #176db5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat !important; color: #fff !important; font-weight: 700 !important; box-shadow: none !important; }
  body .wf-header .wf-nav.is-open .wf-mobile-submenu a.x-mnav-here .wf-menu-paren { color: rgba(255, 255, 255, .82) !important; }
}
/* Comparison card photos: the frame follows the photo height (no empty band under it) */
body.rd.x-page .hm-comparison > .hm-material > .hm-photo > a { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; }
body.rd.x-page .hm-comparison > .hm-material > .hm-photo > a > img { display: block; width: 100% !important; }

/* ================= Mobile polish (2026-11-08) ================= */
@media (max-width: 760px) {
  /* Floating buttons: small round icons so they cover less of the page */
  body .r3-quick-actions { right: 12px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; gap: 8px !important; }
  body .r3-quick-actions a, body .r3-quick-actions button { width: 46px !important; height: 46px !important; border-radius: 50% !important; box-shadow: 0 6px 18px rgba(0, 29, 58, .16) !important; }
  body .r3-quick-actions a > span, body .r3-quick-actions button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body .r3-quick-actions svg { width: 20px !important; height: 20px !important; }

}

/* Home sitemap: home item = home icon + 사업영역 (PC + mobile); the dropdown applies to phones only */
body .wf-sitemap-compact .x-sm-toggle { display: none; }
body .wf-sitemap-compact .x-sm.x-sm-single > .wf-menu-link-group, body .wf-sitemap-compact .x-sm.x-sm-single > .x-sm-toggle { display: none !important; }
body .wf-sitemap-compact .x-sm.x-sm-single > .wf-menu-title a { display: inline-flex; align-items: center; gap: 8px; }
body .wf-sitemap-compact .wf-sitemap-card.x-sm.x-sm-single > .wf-menu-title a .wf-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
@media (max-width: 760px) {
  body .wf-sitemap-compact .wf-sitemap-grid { display: block !important; border-top: 1px solid #e6edf3; }
  body .wf-sitemap-compact .wf-sitemap-card.x-sm { position: relative; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid #e6edf3 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  body .wf-sitemap-compact .wf-sitemap-card.x-sm > .wf-menu-title { display: flex; align-items: center; min-height: 60px; margin: 0 !important; padding: 0 56px 0 4px !important; border: 0 !important; font-size: 17px !important; }
  body .wf-sitemap-compact .wf-sitemap-card.x-sm > .wf-menu-title::before, body .wf-sitemap-compact .wf-sitemap-card.x-sm > .wf-menu-title::after { content: none !important; }
  body .wf-sitemap-compact .wf-sitemap-card.x-sm > .wf-menu-title a { display: inline-flex; align-items: center; gap: 8px; color: #13293d !important; font-weight: 700 !important; }
  body .wf-sitemap-compact .wf-sitemap-card.x-sm > .wf-menu-title a .wf-home-icon { width: 20px; height: 20px; }
  body .wf-sitemap-compact .wf-sitemap-card.x-sm > .wf-menu-title a .wf-sr-only { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; }
  body .wf-sitemap-compact .x-sm-toggle { position: absolute; top: 0; right: -6px; display: grid; place-items: center; width: 56px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  body .wf-sitemap-compact .x-sm-toggle::after { content: ""; width: 34px; height: 34px; border-radius: 50%; background: #f0f8fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176db5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .25s ease; }
  body .wf-sitemap-compact .x-sm.is-open .x-sm-toggle::after { transform: rotate(180deg); background-color: #e1f0fc; }
  body .wf-sitemap-compact .x-sm-toggle:focus-visible { outline: 0; }
  body .wf-sitemap-compact .x-sm-toggle:focus-visible::after { box-shadow: 0 0 0 2px #176db5; }
  body .wf-sitemap-compact .x-sm > .wf-menu-link-group { display: none !important; }
  body .wf-sitemap-compact .x-sm.is-open > .wf-menu-link-group { display: block !important; margin: 0 !important; padding: 0 6px !important; border: 0 !important; border-radius: 0 !important; background: #f0f8fe !important; }
  body .wf-sitemap-compact .x-sm.is-open > .wf-menu-link-group:first-of-type { padding-top: 6px !important; border-radius: 14px 14px 0 0 !important; }
  body .wf-sitemap-compact .x-sm.is-open > .wf-menu-link-group:last-of-type { margin-bottom: 16px !important; padding-bottom: 6px !important; border-radius: 0 0 14px 14px !important; }
  body .wf-sitemap-compact .x-sm.is-open > .wf-menu-link-group:first-of-type:last-of-type { border-radius: 14px !important; }
  body .wf-sitemap-compact .x-sm > .wf-menu-link-group > a { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; column-gap: 6px; min-height: 46px; margin: 0 !important; padding: 10px 40px 10px 14px !important; border: 0 !important; border-radius: 10px !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a8ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat !important; color: #2c4255 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.4; }
  body .wf-sitemap-compact .x-sm > .wf-menu-link-group > a::before { content: none !important; }
  body .wf-sitemap-compact .x-sm > .wf-menu-link-group > a:active { background-color: #fff !important; }
  body .wf-sitemap-compact .x-sm .wf-menu-paren { color: #7b8f9f; font-size: 13px; }
  body .wf-sitemap-compact .x-sm .wf-menu-children { display: none !important; }
  body .wf-sitemap-compact .x-sm > .wf-menu-link-group > a:hover { background-color: #fff !important; color: #176db5 !important; }
}
/* Header home item: phones show home icon + 사업영역; desktop keeps the icon only */
body .wf-header .x-mnav-home { display: none; }
@media (max-width: 1080px) {
  body .wf-header .wf-nav.is-open > .wf-nav-item > a .x-mnav-home { display: inline; }
  body .wf-header .wf-nav.is-open > .wf-nav-item > a:has(.x-mnav-home) .wf-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
}

body .r3-inquiry-form [data-inquiry-status] { display: grid; gap: 12px; color: #3c5366; font-size: 15px; line-height: 1.6; }
body .r3-inquiry-form [data-inquiry-status]:empty { display: none; }
/* Mobile-menu contact shortcuts never show in the desktop header */
body .wf-header .x-mnav-foot { display: none !important; }
@media (max-width: 1080px) { body .wf-header .wf-nav.is-open > .x-mnav-foot { display: grid !important; } }
/* Very narrow phones (≤400px): the logo shrinks so logo, language switch and menu button always fit on one row */
@media (max-width: 400px) {
  body .wf-header .wf-navrow { gap: 6px !important; padding-left: 14px !important; padding-right: 14px !important; }
  body .wf-header .wf-navrow > .wf-brand { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
  body .wf-header .wf-navrow > .wf-brand .wf-brand-logo { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 54px; object-fit: contain; object-position: left center; }
  body .wf-header .wf-navrow > .wf-lang-switch { height: 42px !important; padding: 3px !important; }
  body .wf-header .wf-navrow > .wf-menu-button { width: 42px !important; height: 42px !important; }
}

/* 폭기형 막유지관리 장치: 3D render with numbered markers + three-step explanation (2026-11-08) */
body.rd.x-page .cr-aeration-grid.x-aer-replaced { display: none !important; }
body.rd.x-page .x-aer { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
body.rd.x-page .x-aer-visual { position: relative; margin: 0; padding: clamp(16px, 2vw, 28px); border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px #e2e8ee; }
body.rd.x-page .x-aer-visual img { display: block; width: 100%; height: auto; }
body.rd.x-page .x-aer-pin { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid #fff; border-radius: 50%; background: #176db5; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; box-shadow: 0 6px 16px rgba(0, 29, 58, .28); }
body.rd.x-page .x-aer-pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(23, 109, 181, .35); animation: x-aer-pulse 2.4s ease-out infinite; }
@keyframes x-aer-pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
body.rd.x-page .x-aer-kicker { margin: 0 0 18px; color: #176db5; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
body.rd.x-page .x-aer-steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.rd.x-page .x-aer-steps > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 0 0 28px; }
body.rd.x-page .x-aer-steps > li:last-child { padding-bottom: 0; }
body.rd.x-page .x-aer-steps > li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px; width: 2px; background: linear-gradient(#176db5, rgba(23, 109, 181, .15)); }
body.rd.x-page .x-aer-steps > li > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #176db5; color: #fff; font-size: 16px; font-weight: 800; }
body.rd.x-page .x-aer-steps strong { display: block; margin: 7px 0 6px; color: #13293d; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.02em; }
body.rd.x-page .x-aer-steps p { margin: 0; color: #3c5366; font-size: 16px; line-height: 1.7; }
@media (max-width: 900px) {
  body.rd.x-page .x-aer { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .x-aer-pin { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 13px; border-width: 2px; }
  body.rd.x-page .x-aer-steps > li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
  body.rd.x-page .x-aer-steps > li > b { width: 34px; height: 34px; font-size: 14px; }
  body.rd.x-page .x-aer-steps > li:not(:last-child)::before { left: 16px; top: 38px; }
  body.rd.x-page .x-aer-steps strong { margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) { body.rd.x-page .x-aer-pin::after { animation: none; opacity: .6; } }
body.rd.x-page .x-aer-visual, body.rd.x-page .x-sec .x-aer-visual.x-onwhite { background: #fff !important; border: 0 !important; box-shadow: inset 0 0 0 1px #e2e8ee !important; outline: 0 !important; }
body.rd.x-page .x-aer-canvas { position: relative; }
body.rd.x-page .x-sec .x-aer > figure.x-aer-visual, body.rd.x-page .x-sec .x-aer > figure.x-aer-visual.rd-stage.x-onwhite { background: #fff !important; background-image: none !important; }
body.rd.x-page .x-sec .x-aer .x-aer-canvas > img, body.rd.x-page .x-sec .x-aer .x-aer-canvas > img.rd-img { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; max-height: none !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; }
/* 폭기형 작동 원리 section: lead text sits on the same baseline as the title's last line */
body.rd.x-page .x-sec:has(.x-aer) .x-head--split { align-items: last baseline; }

/* ================= WAVE 작동 원리와 효과: tidier layout (2026-11-08) ================= */
/* A. 장치 구성 cards: one clear line, the technical note smaller and lighter, no divider */
body.rd.x-page #wave-composition .wf-wave-parts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
body.rd.x-page #wave-composition .wf-wave-part { gap: 0 !important; padding: 28px 28px 30px !important; }
body.rd.x-page #wave-composition .wf-wave-part > span:first-child { margin: 0 0 18px !important; }
body.rd.x-page #wave-composition .wf-wave-part h3 { margin: 0 0 10px !important; font-size: clamp(19px, 1.5vw, 21px) !important; line-height: 1.35 !important; }
body.rd.x-page #wave-composition .wf-wave-part-easy { margin: 0 !important; padding: 0 !important; border: 0 !important; color: #13293d !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.6 !important; }
body.rd.x-page #wave-composition .wf-wave-part-tech { margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; color: #5b7183 !important; font-size: 14.5px !important; line-height: 1.65 !important; }
body.rd.x-page #wave-composition .wf-wave-part-tech::before, body.rd.x-page #wave-composition .wf-wave-part-easy::after { content: none !important; display: none !important; }

/* B. 구동휠: picture on the left, title / text / comparison table on the right */
@media (min-width: 1081px) {
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(32px, 3.6vw, 56px); align-items: start; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > :is(.x-parts-action, .wf-wave-parts) { grid-column: 1 / -1; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .x-parts-action { grid-row: 1; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-parts { grid-row: 2; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .hfv-wheel { grid-column: 1; grid-row: 3 / span 4; margin: clamp(64px, 6vw, 88px) 0 0 !important; align-self: stretch; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > :is(.wf-wave-subhead, .wf-wave-subtext, .wf-table-wrap, .hfv-note) { grid-column: 2; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subhead { grid-row: 3; margin: clamp(64px, 6vw, 88px) 0 12px !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subtext { grid-row: 4; margin: 0 0 24px !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-table-wrap { grid-row: 5; margin: 0 !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .hfv-note { grid-row: 6; margin: 12px 0 0 !important; }
}

/* C. 5단계 메커니즘: problems on one row, HIFIL-M's answer on a second row, with a flow arrow between */
body.rd.x-page #wave-cleaning .x-mech-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
body.rd.x-page #wave-cleaning .x-mech-group.is-solution { position: relative; margin-top: 56px; }
body.rd.x-page #wave-cleaning .x-mech-group.is-solution::before { content: ""; position: absolute; left: 50%; top: -44px; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: #176db5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 6px 16px rgba(23, 109, 181, .3); }
body.rd.x-page #wave-cleaning .x-mech-row { gap: 16px !important; }
body.rd.x-page #wave-cleaning .x-mech-step { padding: 28px 28px 30px !important; gap: 14px !important; }
body.rd.x-page #wave-cleaning .x-mech-step h4 { min-height: 0 !important; font-size: clamp(18px, 1.45vw, 20px) !important; }
body.rd.x-page #wave-cleaning .x-mech-step p { font-size: 15.5px !important; line-height: 1.75 !important; }
body.rd.x-page #wave-cleaning .x-mech-group.is-solution .x-mech-step { padding: 32px 34px 34px !important; }
body.rd.x-page #wave-cleaning .x-mech-group.is-solution .x-mech-num { background: #48aaff !important; color: #001d3a !important; }
body.rd.x-page #wave-cleaning .x-mech-group.is-solution .x-mech-step h4 { font-size: clamp(19px, 1.6vw, 22px) !important; }
@media (max-width: 900px) {
  body.rd.x-page #wave-cleaning .x-mech-group.is-solution { margin-top: 52px; }
  body.rd.x-page #wave-cleaning .x-mech-step, body.rd.x-page #wave-cleaning .x-mech-group.is-solution .x-mech-step { padding: 24px 22px 26px !important; }
}
@media (max-width: 1080px) and (min-width: 761px) {
  body.rd.x-page #wave-composition .wf-wave-parts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  body.rd.x-page #wave-composition .wf-wave-parts { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  body.rd.x-page #wave-composition .wf-wave-part { padding: 24px 22px 26px !important; }
}
@media (min-width: 1081px) {
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-table-wrap { overflow: visible !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-table-wrap table { min-width: 0 !important; width: 100% !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-table-wrap :is(th, td) { padding: 14px 14px !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-table-wrap :is(th, td):first-child { width: 72px; white-space: nowrap; }
}

/* 구동휠 comparison: general wheel (grey) vs HIFIL-M drive wheel (blue), labels in the middle (2026-11-08) */
body.rd.x-page .x-vs-wrap { overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
body.rd.x-page .x-vs-wrap > table.x-vs-source { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
body.rd.x-page .x-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, .38fr) minmax(0, 1fr); grid-auto-rows: auto; }
body.rd.x-page .x-vs-col { display: grid; grid-template-rows: subgrid; grid-column: auto; }
body.rd.x-page .x-vs-col.is-old { grid-column: 1; border-radius: 20px; overflow: hidden; background: #f3f5f7; box-shadow: inset 0 0 0 1px #dfe4e9; }
body.rd.x-page .x-vs-col.is-label { grid-column: 2; background: #fafbfc; }
body.rd.x-page .x-vs-col.is-new { grid-column: 3; border-radius: 20px; overflow: hidden; background: #f0f8fe; box-shadow: inset 0 0 0 1.5px #176db5; }
body.rd.x-page .x-vs-head { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 14px 16px; color: #fff; font-size: clamp(16px, 1.3vw, 19px); font-weight: 700; text-align: center; letter-spacing: -.02em; }
body.rd.x-page .x-vs-col.is-old .x-vs-head { background: #7d8792; }
body.rd.x-page .x-vs-col.is-new .x-vs-head { background: #176db5; }
body.rd.x-page .x-vs-col.is-label .x-vs-head { background: transparent; }
body.rd.x-page .x-vs-cell { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 14px 18px; border-top: 1px solid #e2e8ee; text-align: center; font-size: 16px; line-height: 1.5; word-break: keep-all; }
body.rd.x-page .x-vs-col .x-vs-cell:nth-child(2) { border-top: 0; }
body.rd.x-page .x-vs-col.is-old .x-vs-cell { color: #3c5366; }
body.rd.x-page .x-vs-col.is-label .x-vs-cell { color: #5b7183; font-size: 15px; font-weight: 600; border-top-color: #eef2f5; }
body.rd.x-page .x-vs-col.is-new .x-vs-cell { color: #0f5a99; font-weight: 700; border-top-color: #d3e6f6; }
@media (min-width: 1081px) {
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .hfv-wheel { grid-row: 3 / span 2 !important; align-self: center; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subhead { align-self: end; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-table-wrap { grid-column: 1 / -1 !important; grid-row: 5 !important; margin: 40px 0 0 !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .hfv-note { grid-column: 1 / -1 !important; grid-row: 6 !important; }
}
@media (max-width: 760px) {
  body.rd.x-page .x-vs { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  body.rd.x-page .x-vs-col.is-old, body.rd.x-page .x-vs-col.is-new { border-radius: 14px; }
  body.rd.x-page .x-vs-head { min-height: 52px; padding: 10px 8px; font-size: 14.5px; }
  body.rd.x-page .x-vs-cell { min-height: 60px; padding: 10px 8px; font-size: 14px; }
  body.rd.x-page .x-vs-col.is-label .x-vs-cell { font-size: 13px; padding: 10px 4px; }
}
/* WAVE 작동 영상 보기 button: left-aligned on every screen size */
body.rd.x-page .x-parts-action { justify-content: flex-start !important; text-align: left !important; }

/* 구동휠 (2026-11-08 rev.): title and text above, the 3D motion graphic across the full container, comparison below */
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) { display: block !important; }
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subhead { margin: clamp(64px, 6vw, 96px) 0 14px !important; font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.35 !important; }
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subtext { max-width: 860px; margin: 0 0 28px !important; color: #3c5366 !important; font-size: clamp(17px, 1.4vw, 19px) !important; line-height: 1.8 !important; }
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .hfv-wheel { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; }
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-table-wrap { margin: 32px 0 0 !important; }
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .hfv-note { margin: 12px 0 0 !important; }
@media (max-width: 760px) {
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subhead { margin-top: 56px !important; font-size: 22px !important; }
  body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subtext { font-size: 16px !important; margin-bottom: 20px !important; }
}
/* 구동휠 설명: regular weight, only the highlighted phrase bold */
body.rd.x-page #wave-wheel .wf-wave-subtext { font-weight: 400 !important; }
body.rd.x-page #wave-wheel .wf-wave-subtext strong { font-weight: 700 !important; color: #13293d !important; }
/* 구동휠 교체주기 note: centred under the comparison */
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .hfv-note { margin: 16px 0 0 !important; text-align: center !important; }
/* WAVE 작동 방식: no grey backing box behind the two video cards */
body.rd.x-page #wave-cleaning .wf-mechanism-compare { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; outline: 0 !important; }
/* Section heading accent word (e.g. 구동휠) in the main blue */
body.rd.x-page .wf-wave-subhead .x-accent { color: #176db5; }

/* Footer company information (2026-11-08): brand on the left, legal details on the right */
body .r3-footer.x-foot .wf-footer-inner { display: grid !important; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 40px 64px !important; align-items: start; }
body .r3-footer.x-foot .x-foot-brand strong { display: block; margin-bottom: 8px; font-size: 18px; }
body .r3-footer.x-foot .x-foot-brand p { margin: 0 0 18px; }
body .r3-footer.x-foot .x-foot-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid rgba(182, 230, 237, .45); border-radius: 999px; font-weight: 600; }
body .r3-footer.x-foot .x-foot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin: 0 0 22px; }
body .r3-footer.x-foot .x-foot-list > div { display: flex; gap: 12px; min-width: 0; font-size: 14px; line-height: 1.6; }
body .r3-footer.x-foot .x-foot-list > .x-foot-wide { grid-column: 1 / -1; }
body .r3-footer.x-foot .x-foot-list dt { flex: 0 0 auto; min-width: 92px; color: rgba(255, 255, 255, .55); font-weight: 500; }
body .r3-footer.x-foot .x-foot-list dd { margin: 0; color: rgba(255, 255, 255, .9); overflow-wrap: anywhere; }
body .r3-footer.x-foot .x-foot-list dd a { font-size: inherit; }
body.x-lang-en .r3-footer.x-foot .x-foot-list dt { min-width: 168px; }
body .r3-footer.x-foot .wf-footer-company { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 760px) {
  body .r3-footer.x-foot .wf-footer-inner { grid-template-columns: 1fr; gap: 28px !important; }
  body .r3-footer.x-foot .x-foot-list { grid-template-columns: 1fr; gap: 10px; }
  body .r3-footer.x-foot .x-foot-list > div { flex-direction: column; gap: 2px; }
  body .r3-footer.x-foot .x-foot-list dt, body.x-lang-en .r3-footer.x-foot .x-foot-list dt { min-width: 0; font-size: 13px; }
}
/* Static crawler text inside #app is replaced as soon as the site script runs */
.x-seo-fallback { max-width: 1100px; margin: 140px auto 80px; padding: 0 20px; color: #17384e; line-height: 1.7; }
body .r3-footer.x-foot .x-tel-en, body.x-lang-en .r3-footer.x-foot .x-tel-ko { display: none; }
body.x-lang-en .r3-footer.x-foot .x-tel-en { display: inline; }

/* WAVE 장치 구성: 3D render with numbered pins; the active part is blue on the image and in its card */
body.rd.x-page #wave-composition .x-wc { position: relative; margin: 0 0 28px !important; padding: clamp(12px, 2vw, 28px); border-radius: 24px; background: #fff !important; box-shadow: inset 0 0 0 1px #e2e8ee !important; }
body.rd.x-page #wave-composition .x-wc-canvas { position: relative; max-width: 760px; margin: 0 auto; }
body.rd.x-page #wave-composition .x-wc-canvas > img { display: block; width: 100%; height: auto; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.rd.x-page #wave-composition .x-wc-pin { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--x-navy, #0e1d2b); color: #fff; font: 800 15px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 4px 12px rgba(14, 29, 43, .28); transition: background-color .25s, transform .25s, box-shadow .25s; }
body.rd.x-page #wave-composition .x-wc-pin:hover { transform: scale(1.08); }
body.rd.x-page #wave-composition .x-wc-pin.is-active { background: #176db5; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(23, 109, 181, .25), 0 6px 16px rgba(23, 109, 181, .4); }
body.rd.x-page #wave-composition .x-wc-pin:focus-visible, body.rd.x-page #wave-composition .x-wc-card:focus-visible { outline: 3px solid #48aaff; outline-offset: 3px; }
body.rd.x-page #wave-composition .x-wc-card { cursor: pointer; box-shadow: inset 0 0 0 2px transparent !important; transition: box-shadow .25s, background-color .25s; }
body.rd.x-page #wave-composition .x-wc-card.is-active { box-shadow: inset 0 0 0 2px #176db5 !important; }
body.rd.x-page #wave-composition .x-wc-card > span:first-child { transition: background-color .25s; }
body.rd.x-page #wave-composition .x-wc-card.is-active > span:first-child { background: #176db5 !important; }
body.rd.x-page #wave-composition .x-wc-card.is-active h3 { color: #176db5 !important; }
@media (max-width: 760px) {
  body.rd.x-page #wave-composition .x-wc { margin-bottom: 20px !important; border-radius: 18px; }
  body.rd.x-page #wave-composition .x-wc-pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-width: 2px; font-size: 12px; }
  body.rd.x-page #wave-composition .x-wc-pin.is-active { box-shadow: 0 0 0 4px rgba(23, 109, 181, .25); }
}
@media (prefers-reduced-motion: reduce) { body.rd.x-page #wave-composition :is(.x-wc-pin, .x-wc-card, .x-wc-card > span:first-child) { transition: none; } }

/* 기대 효과 icons: custom duotone SVGs, no navy tile */
body.rd.x-page .x-effect > .x-fx-icon { display: block; justify-self: start; width: clamp(64px, 5.6vw, 80px); height: auto; aspect-ratio: 1; margin: 0 0 24px -4px; }
@media (max-width: 760px) { body.rd.x-page .x-effect > .x-fx-icon { width: 64px; margin-bottom: 18px; } }

/* 기대 효과 (2026-11-08 rev.): centred headline with a white→blue arrow above it, centred icons and text, no rule above the icons */
body.rd.x-page #x-effect .x-subhead { margin: 112px auto 48px !important; color: var(--x-ink) !important; font-size: clamp(26px, 2.8vw, 38px) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.03em; text-align: center !important; text-wrap: balance; }
body.rd.x-page #x-effect .x-subhead span { color: #176db5 !important; }
body.rd.x-page #x-effect .x-subhead::before { content: ""; display: block; width: 64px; height: 84px; margin: 0 auto 28px; background: linear-gradient(180deg, #fff 0%, #a9cff0 38%, #176db5 100%); clip-path: polygon(28% 0, 72% 0, 72% 56%, 100% 56%, 50% 100%, 0 56%, 28% 56%); }
body.rd.x-page #x-effect .x-effects { border-top: 0 !important; }
body.rd.x-page #x-effect .x-effect { padding: 8px clamp(20px, 3vw, 40px) 8px !important; text-align: center; }
body.rd.x-page #x-effect .x-effect > .x-fx-icon { justify-self: center; margin: 0 auto 24px; }
@media (max-width: 760px) {
  body.rd.x-page #x-effect .x-subhead { margin: 80px auto 32px !important; font-size: 24px !important; }
  body.rd.x-page #x-effect .x-subhead::before { width: 50px; height: 66px; margin-bottom: 20px; }
  body.rd.x-page #x-effect .x-effect { padding: 28px 0 0 !important; }
  body.rd.x-page #x-effect .x-effect:first-child { padding-top: 0 !important; }
}
/* 기대 효과 section heading centred */
body.rd.x-page #x-effect .x-head, body.rd.x-page #x-effect .x-head > div { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
body.rd.x-page #x-effect .x-head :is(.x-eyebrow, .x-h2) { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }

/* 기대 효과 motion: bars grow from zero, values follow; arrow → headline → three effects appear in order.
   Hidden states apply instantly; the transitions live only on the .is-in state so nothing animates while hiding. */
body.rd.x-page #x-effect .x-fxm-chart .hl-energy-row i { transform: scaleX(0); transform-origin: left center; }
body.rd.x-page #x-effect .x-fxm-chart .hl-energy-row b { opacity: 0; translate: -8px 0; }
body.rd.x-page #x-effect .x-fxm-chart.is-in .hl-energy-row i { transform: scaleX(1); transition: transform 1.2s cubic-bezier(.22, .8, .24, 1); }
body.rd.x-page #x-effect .x-fxm-chart.is-in .hl-energy-row.is-wave i { transition-delay: .35s; }
body.rd.x-page #x-effect .x-fxm-chart.is-in .hl-energy-row b { opacity: 1; translate: 0 0; transition: opacity .5s ease 1.05s, translate .5s ease 1.05s; }
body.rd.x-page #x-effect .x-fxm-chart.is-in .hl-energy-row.is-wave b { transition-delay: 1.4s; }
body.rd.x-page #x-effect .x-fxm-num { font-variant-numeric: tabular-nums; }

body.rd.x-page #x-effect .x-fxm-head::before { opacity: 0; translate: 0 -22px; }
body.rd.x-page #x-effect .x-fxm-head .x-fxm-text { display: inline-block; opacity: 0; translate: 0 18px; }
body.rd.x-page #x-effect .x-fxm-head.is-in::before { opacity: 1; translate: 0 0; transition: opacity .6s ease, translate .7s cubic-bezier(.22, .8, .24, 1); }
body.rd.x-page #x-effect .x-fxm-head.is-in .x-fxm-text { opacity: 1; translate: 0 0; transition: opacity .6s ease .35s, translate .7s cubic-bezier(.22, .8, .24, 1) .35s; }
body.rd.x-page #x-effect .x-fxm-seq > .x-effect > * { opacity: 0; translate: 0 22px; }
body.rd.x-page #x-effect .x-fxm-seq.is-in > .x-effect > * { opacity: 1; translate: 0 0; transition: opacity .6s ease, translate .7s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(.85s + var(--fxm-i, 0) * .22s); }

/* WAVE 장치 구성 (2026-11-08 rev.): image left, compact part list right, video link under the image.
   Every row keeps its title and plain description; the technical line opens only for the highlighted part. */
body.rd.x-page #wave-composition .x-wc-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px clamp(24px, 3vw, 44px); align-items: center; margin: 0 0 8px; }
body.rd.x-page #wave-composition .x-wc-layout > .x-wc { grid-column: 1; grid-row: 1; margin: 0 !important; padding: clamp(12px, 1.6vw, 24px); }
body.rd.x-page #wave-composition .x-wc-layout > .x-wc .x-wc-canvas { max-width: none; }
body.rd.x-page #wave-composition .x-wc-layout > .wf-wave-parts { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex !important; flex-direction: column; gap: 6px !important; }
body.rd.x-page #wave-composition .x-wc-layout > .x-parts-action { grid-column: 1; grid-row: 2; align-self: start; margin: 0 !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part { display: grid !important; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px !important; row-gap: 0 !important; align-items: start; padding: 14px 20px !important; border-radius: 16px !important; background: transparent !important; box-shadow: inset 0 0 0 1px transparent !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part:not(.is-active):hover { background: #f4f8fc !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active { background: #f0f7fe !important; box-shadow: inset 0 0 0 2px #176db5 !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part > span:first-child { grid-column: 1; grid-row: 1 / span 3; width: 30px !important; height: 30px !important; min-width: 0 !important; margin: 0 !important; font-size: 13px !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part > :not(span:first-child) { grid-column: 2; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part h3 { margin: 3px 0 4px !important; font-size: 17px !important; line-height: 1.35 !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part-easy { font-size: 15px !important; line-height: 1.55 !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part-tech { max-height: 0; margin: 0 !important; overflow: hidden; opacity: 0; font-size: 14px !important; line-height: 1.6 !important; transition: max-height .45s ease, opacity .35s ease, margin .45s ease; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active .wf-wave-part-tech { max-height: 8em; margin-top: 8px !important; opacity: 1; }
/* Tablet and phone: stacked, every detail visible, so nothing moves while reading */
@media (max-width: 1080px) {
  body.rd.x-page #wave-composition .x-wc-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.rd.x-page #wave-composition .x-wc-layout > .x-wc { grid-column: 1; grid-row: 1; }
  body.rd.x-page #wave-composition .x-wc-layout > .x-wc .x-wc-canvas { max-width: 640px; }
  body.rd.x-page #wave-composition .x-wc-layout > .wf-wave-parts { grid-column: 1; grid-row: 2; }
  body.rd.x-page #wave-composition .x-wc-layout > .x-parts-action { grid-column: 1; grid-row: 3; }
  body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part-tech { max-height: none; margin-top: 6px !important; opacity: 1; }
}
@media (max-width: 760px) {
  body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part { padding: 14px 14px !important; column-gap: 12px !important; }
}
@media (prefers-reduced-motion: reduce) { body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part-tech { transition: none; } }

/* 장치 구성 on the light sky tone; drive wheel is its own white section below (2026-11-08) */
body.rd.x-page #app > section#wave-composition { background: var(--x-sky) !important; }
body.rd.x-page #app > section#wave-wheel { background: #fff !important; }
body.rd.x-page #wave-wheel .wf-content-inner:has(> .hfv-wheel) > .wf-wave-subhead { margin-top: 0 !important; }
/* Rows: white boxes on sky; the active row turns solid blue with white text */
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part { background: #fff !important; box-shadow: inset 0 0 0 1px #dfe9f2 !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part:not(.is-active):hover { background: #fff !important; box-shadow: inset 0 0 0 1px #9cc7ee !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active { background: #176db5 !important; box-shadow: 0 10px 24px rgba(23, 109, 181, .22) !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active :is(h3, .wf-wave-part-easy) { color: #fff !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active .wf-wave-part-tech { color: rgba(255, 255, 255, .86) !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active > span:first-child { background: #fff !important; color: #176db5 !important; }
body.rd.x-page #wave-composition .x-wc-card:focus-visible { outline-color: #0e1d2b; }
/* WAVE 작동 영상 보기: solid blue button */
body.rd.x-page #wave-composition .x-parts-action .x-parts-link { border-color: #176db5 !important; background: #176db5 !important; color: #fff !important; }
body.rd.x-page #wave-composition .x-parts-action .x-parts-link:hover { border-color: #0f5a99 !important; background: #0f5a99 !important; color: #fff !important; }

/* Light sky = #f5f9fc everywhere; a light-sky box on white carries a thin light stroke (#dae7f0) */
body.rd.x-page .x-sec .x-skystroke { box-shadow: inset 0 0 0 1px #dae7f0 !important; }
body.rd.x-page .x-sec .x-onwhite.x-onwhite.x-onwhite:not(.is-hifilm):not(.is-ours):not(.hm-material):not(.is-active):not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px #dae7f0 !important; }
/* 장치 구성 image: transparent cut-out filling the column, no box behind it */
body.rd.x-page #wave-composition .x-wc-layout > figure.x-wc, body.rd.x-page #wave-composition .x-wc-layout > figure.x-wc.x-onwhite, body.rd.x-page #wave-composition .x-wc-layout > figure.x-wc.x-skystroke { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; }
body.rd.x-page #wave-composition .x-wc-layout > .x-wc .x-wc-canvas { width: 100%; max-width: none; }
@media (max-width: 1080px) { body.rd.x-page #wave-composition .x-wc-layout > .x-wc .x-wc-canvas { max-width: 600px; } }

/* 장치 구성 (rev.): constant list height (each open detail reserves the tallest detail's height), image pinned to the
   top of the list and the video button to its bottom, so nothing on the left moves while the highlight cycles. */
@media (min-width: 1081px) {
  body.rd.x-page #wave-composition .x-wc-layout { grid-template-rows: auto 1fr; align-items: stretch; }
  body.rd.x-page #wave-composition .x-wc-layout > .x-wc { align-self: start; }
  body.rd.x-page #wave-composition .x-wc-layout > .x-parts-action { align-self: end; }
  body.rd.x-page #wave-composition .x-wc-layout > .wf-wave-parts { align-self: start; }
  body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part-tech { max-height: none; height: 0; transition: height .4s ease, opacity .3s ease, margin .4s ease; }
  body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active .wf-wave-part-tech { max-height: none; height: var(--wc-tech-h, auto); }
}
/* 장치 구성: no video button here; image and part list centred on each other (list height is constant, so no jolt) */
body.rd.x-page #wave-composition .x-parts-action { display: none !important; }
@media (min-width: 1081px) {
  body.rd.x-page #wave-composition .x-wc-layout { grid-template-rows: auto; align-items: center; }
  body.rd.x-page #wave-composition .x-wc-layout > .x-wc { grid-row: 1; align-self: center; }
  body.rd.x-page #wave-composition .x-wc-layout > .wf-wave-parts { grid-row: 1; align-self: center; }
}
body.rd.x-page #wave-composition .x-wc-layout > .wf-wave-parts { margin: 0 !important; }
/* One identical thin stroke on every unselected part box (no extra outline from the background helpers) */
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part, body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.x-onsky, body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.x-stroke, body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.x-skystroke { border: 0 !important; outline: 0 !important; background: #fff !important; box-shadow: inset 0 0 0 1px #dae7f0 !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part:not(.is-active):hover { box-shadow: inset 0 0 0 1px #9cc7ee !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active, body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part.is-active.x-onsky { outline: 0 !important; background: #176db5 !important; box-shadow: 0 10px 24px rgba(23, 109, 181, .22) !important; }
body.rd.x-page #wave-composition .x-wc-layout .wf-wave-part:focus-visible { outline: 3px solid #48aaff !important; outline-offset: 3px; }
/* WAVE cycle STEP cards: 16px radius, same as the part boxes (24px read too round on these short cards) */
body.rd.x-page .x-auto-body .wf-wave-cycle > .wf-wave-cycle-step, body.rd.x-page .x-auto-body .wf-wave-cycle > .wf-wave-cycle-step.x-onwhite.x-onwhite.x-onwhite { border-radius: 16px !important; }
/* Section subheadings (h3) share the drive-wheel heading size: 5단계 메커니즘, 막 세정 전력, 현장 운전 영상 */
body.rd.x-page :is(.x-mech-title, .hfe-energy .hfe-heading h3, .hfm-evidence-head h3) { font-size: clamp(24px, 2.2vw, 30px) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.025em; color: var(--x-ink) !important; }
@media (max-width: 760px) { body.rd.x-page :is(.x-mech-title, .hfe-energy .hfe-heading h3, .hfm-evidence-head h3) { font-size: 22px !important; } }

/* WAVE 왕복 사이클: STEP cards as a vertical column inside the motion box (left), motion + controls on the right */
body.rd.x-page .hfv-cycle.x-cycle-split { display: grid !important; grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr); grid-template-rows: 1fr auto; gap: 14px 28px; align-items: stretch; padding: clamp(18px, 2vw, 28px) !important; }
body.rd.x-page .hfv-cycle.x-cycle-split > .wf-wave-cycle { grid-column: 1; grid-row: 1 / span 2; display: flex !important; flex-direction: column; gap: 10px !important; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; }
body.rd.x-page .hfv-cycle.x-cycle-split > .hfv-cycle-stage { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
body.rd.x-page .hfv-cycle.x-cycle-split > .hfv-cycle-tools { grid-column: 2; grid-row: 2; margin: 0 !important; }
body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle > .wf-wave-cycle-step { flex: 1 1 0; justify-content: center; min-height: 0 !important; padding: 18px 22px !important; border-radius: 16px !important; }
body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle > .wf-wave-cycle-step:not(.is-current), body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle > .wf-wave-cycle-step.x-onwhite.x-onwhite.x-onwhite:not(.is-current) { background: #fff !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 1px #dae7f0 !important; }
body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle > .wf-wave-cycle-step:not(.is-current):hover { box-shadow: inset 0 0 0 1px #9cc7ee !important; }
body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle > .wf-wave-cycle-step.is-current { outline: 0 !important; box-shadow: 0 10px 24px rgba(14, 29, 43, .18) !important; }
body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle-step > span { margin: 0 0 6px !important; }
body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle-step :is(h3, h4) { margin: 0 0 6px !important; font-size: 18px !important; }
body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle-step p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; }
@media (max-width: 900px) {
  body.rd.x-page .hfv-cycle.x-cycle-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  body.rd.x-page .hfv-cycle.x-cycle-split > .hfv-cycle-stage { grid-column: 1; grid-row: 1; }
  body.rd.x-page .hfv-cycle.x-cycle-split > .hfv-cycle-tools { grid-column: 1; grid-row: 2; }
  body.rd.x-page .hfv-cycle.x-cycle-split > .wf-wave-cycle { grid-column: 1; grid-row: 3; gap: 8px !important; }
  body.rd.x-page .x-sec .hfv-cycle.x-cycle-split .wf-wave-cycle > .wf-wave-cycle-step { flex: none; padding: 16px 18px !important; }
}

/* 여과 원리 (분리막 pages): steps stacked on the left inside the box, 3D motion on the right; inactive steps white */
body.rd.x-page .r3-filtration:has(> .x-filtration-motion) { display: grid !important; grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr); gap: 20px 28px; align-items: stretch; }
body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-head { grid-column: 1 / -1; grid-row: 1; margin: 0 !important; }
body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .x-filtration-motion { grid-column: 2; grid-row: 2; margin: 0 !important; }
body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps { grid-column: 1; grid-row: 2; display: flex !important; flex-direction: column; gap: 10px !important; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; }
body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps > li { display: flex; flex: 1 1 0; min-height: 0; margin: 0 !important; }
body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps > li > button { flex: 1; width: 100%; height: auto !important; min-height: 0 !important; align-content: center; padding: 18px 22px !important; border-radius: 16px !important; }
body.rd.x-page .x-sec .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps > li > button:not([aria-pressed="true"]) { background: #fff !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 1px #dae7f0 !important; }
body.rd.x-page .x-sec .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps > li > button:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px #9cc7ee !important; }
body.rd.x-page .x-sec .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps > li > button[aria-pressed="true"] { outline: 0 !important; box-shadow: 0 10px 24px rgba(14, 29, 43, .18) !important; }
@media (max-width: 900px) {
  body.rd.x-page .r3-filtration:has(> .x-filtration-motion) { grid-template-columns: minmax(0, 1fr); }
  body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .x-filtration-motion { grid-column: 1; grid-row: 2; }
  body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps { grid-column: 1; grid-row: 3; gap: 8px !important; }
  body.rd.x-page .r3-filtration:has(> .x-filtration-motion) > .r3-filtration-steps > li { flex: none; }
}

/* WAVE 원리 · 왜 하이필엠인가: reinforced-membrane schematic + numbered chain in one white card */
body.rd.x-page .wf-wave-foundation:has(.x-fd) { display: block !important; }
body.rd.x-page .x-fd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px #dae7f0; }
body.rd.x-page .x-fd .x-fd-visual { margin: 0 !important; padding: 0 !important; background: none !important; text-align: center; }
body.rd.x-page .x-fd .x-fd-visual .x-schematic-img img { height: clamp(260px, 30vw, 400px) !important; }
body.rd.x-page .x-fd .x-fd-visual figcaption { margin-top: 18px; color: var(--x-muted); font-size: 14px; }
body.rd.x-page .x-fd-steps { position: relative; display: grid; gap: 22px; margin: 0 0 32px; padding: 0; list-style: none; }
body.rd.x-page .x-fd-steps::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 19px; width: 2px; background: linear-gradient(180deg, #cfe2f3, #176db5); }
body.rd.x-page .x-fd-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; }
body.rd.x-page .x-fd-steps li > b { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #176db5; color: #176db5; font-size: 15px; font-weight: 800; }
body.rd.x-page .x-fd-steps li:last-child > b { background: #176db5; color: #fff; box-shadow: 0 0 0 6px rgba(23, 109, 181, .16); }
body.rd.x-page .x-fd-steps strong { display: block; margin: 7px 0 4px; color: var(--x-ink); font-size: 18px; font-weight: 700; }
body.rd.x-page .x-fd-steps p { margin: 0; color: #4b6074; font-size: 15px; line-height: 1.6; }
body.rd.x-page .x-fd-proof { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-left: 58px; padding: 0 24px; border: 0; border-radius: 999px; background: #176db5; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .2s; }
body.rd.x-page .x-fd-proof:hover { background: #0f5a99; }
body.rd.x-page .x-fd-proof:focus-visible { outline: 3px solid #48aaff; outline-offset: 3px; }
@media (max-width: 900px) {
  body.rd.x-page .x-fd { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; }
  body.rd.x-page .x-fd-proof { margin-left: 0; width: 100%; justify-content: center; }
}

/* 보강막 시험 결과 popup */
.x-modal--proof .x-proof-panel { width: min(980px, 100%); height: auto; max-height: min(92vh, 100%); }
.x-proof-body { overflow-y: auto; padding: clamp(20px, 3vw, 32px); }
.x-proof-sum { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr); gap: 24px 36px; align-items: center; padding: clamp(20px, 3vw, 28px); border-radius: 16px; background: #f0f8fe; box-shadow: inset 0 0 0 1px #dae7f0; }
.x-proof-num { margin: 0; color: #176db5; font-size: clamp(48px, 6vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.x-proof-num small { margin-left: 6px; font-size: .38em; letter-spacing: 0; }
.x-proof-num-label { margin: 10px 0 0; color: #3f5163; font-size: 14px; font-weight: 600; line-height: 1.5; }
.x-proof-lead { margin: 0 0 16px; color: #3f5163; font-size: 14.5px; line-height: 1.65; }
.x-proof-bars { display: grid; gap: 10px; }
.x-proof-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.x-proof-bar-name { margin: 0; color: #14263a; font-size: 13.5px; font-weight: 600; }
.x-proof-track { height: 14px; border-radius: 999px; background: #e2ecf5; overflow: hidden; }
.x-proof-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #9fb3c4; transform-origin: left; animation: x-proof-grow 1s cubic-bezier(.22, .8, .24, 1) both .15s; }
.x-proof-bar.is-ours .x-proof-track i { background: #176db5; }
.x-proof-bar b { color: #5f7183; font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.x-proof-bar.is-ours b { color: #176db5; }
.x-proof-unit { margin: 10px 0 0; color: #7a8a99; font-size: 12.5px; }
@keyframes x-proof-grow { from { transform: scaleX(0); } }
.x-proof-h { margin: 28px 0 12px; color: #14263a; font-size: 17px; font-weight: 700; }
.x-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.x-proof-grid figure { margin: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #dae7f0; }
.x-proof-grid :is(video, img) { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0e1d2b; }
.x-proof-grid img { background: #f0f8fe; }
.x-proof-grid figcaption { padding: 12px 14px 14px; color: #5f7183; font-size: 13px; line-height: 1.55; }
.x-proof-grid figcaption strong { display: block; margin-bottom: 2px; color: #14263a; font-size: 14px; }
.x-proof-more { display: inline-flex; gap: 6px; margin-top: 24px; color: #176db5; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.x-proof-more:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .x-proof-sum { grid-template-columns: minmax(0, 1fr); }
  .x-proof-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .x-proof-bar .x-proof-track { grid-column: 1 / -1; grid-row: 2; }
  .x-proof-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .x-proof-track i { animation: none; } }
/* 장치 구성 image at 90% of its column (pins scale with it) */
body.rd.x-page #wave-composition .x-wc-layout > .x-wc .x-wc-canvas { width: 90%; margin: 0 auto; }
@media (max-width: 1080px) { body.rd.x-page #wave-composition .x-wc-layout > .x-wc .x-wc-canvas { width: 90%; max-width: 540px; } }
/* 문제 / 하이필엠의 해결 labels: larger and centred */
body.rd.x-page .x-mech-label { padding-top: 18px !important; margin-bottom: 22px !important; font-size: clamp(18px, 1.6vw, 22px) !important; font-weight: 700 !important; letter-spacing: -.02em; text-align: center !important; }
/* 왜 하이필엠인가 schematic: callouts may extend past the image (no clipping), shorter leader lines */
body.rd.x-page .x-fd .x-fd-visual, body.rd.x-page .x-fd .x-fd-visual .x-schematic-img { overflow: visible !important; }
body.rd.x-page .x-fd .x-callout i { width: clamp(32px, 3.4vw, 56px); }
body.rd.x-page .x-fd .x-callout { font-size: 14.5px; }
/* 작동 메커니즘 heading block centred */
body.rd.x-page .x-mech > :is(.x-eyebrow, .x-mech-title, .x-mech-lead) { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
body.rd.x-page .x-mech > .x-mech-lead { max-width: 820px; }
/* Film scene buttons and legend line up with the motion screen above (no extra side padding) */
body.rd.x-page .x-film-body .hfv-chapters { padding: 16px 0 0 !important; }
body.rd.x-page .x-film .hfv-legend { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* 기술 비교 (2026-11-08 rev.): two clean cards instead of a box in a box, pill labels, even lists with icons,
   and more room before the energy evidence */
body.rd.x-page .x-sec .wf-wave-compare, body.rd.x-page .x-sec .wf-wave-compare.x-skystroke { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.rd.x-page .x-sec .wf-wave-compare > .wf-wave-compare-card { display: flex !important; flex-direction: column; padding: clamp(28px, 3vw, 40px) !important; border: 0 !important; border-radius: 20px !important; background: #f7f9fb !important; box-shadow: inset 0 0 0 1px #e2e8ee !important; }
body.rd.x-page .x-sec .wf-wave-compare > .wf-wave-compare-card.is-dark { background: #fff !important; box-shadow: inset 0 0 0 2px #176db5, 0 16px 36px -18px rgba(23, 109, 181, .35) !important; }
body.rd.x-page .x-sec .wf-wave-compare-card > .wf-kicker { align-self: flex-start; margin: 0 0 14px !important; padding: 6px 12px !important; border-radius: 999px; background: #e8edf2; color: #5f7183 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
body.rd.x-page .x-sec .wf-wave-compare-card.is-dark > .wf-kicker { background: #e3f0fb; color: #176db5 !important; }
body.rd.x-page .x-sec .wf-wave-compare-card > h3 { margin: 0 0 22px !important; color: var(--x-ink) !important; font-size: clamp(20px, 1.7vw, 23px) !important; font-weight: 700 !important; line-height: 1.4 !important; }
body.rd.x-page .x-sec .wf-wave-compare-card > img.wf-wave-compare-media { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0 0 22px !important; border: 0 !important; border-radius: 14px !important; object-fit: cover; }
body.rd.x-page .x-sec .wf-wave-compare-card > ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.rd.x-page .x-sec .wf-wave-compare-card > ul > li { position: relative; margin: 0 !important; padding: 14px 0 14px 34px !important; border: 0 !important; border-top: 1px solid #e2e8ee !important; color: #3f5163 !important; font-size: 15.5px !important; line-height: 1.55 !important; }
body.rd.x-page .x-sec .wf-wave-compare-card > ul > li:last-child { padding-bottom: 0 !important; }
body.rd.x-page .x-sec .wf-wave-compare-card > ul > li::before { content: ""; position: absolute; top: 16px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: #dfe5eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8a99' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 12px no-repeat; }
body.rd.x-page .x-sec .wf-wave-compare-card.is-dark > ul > li { color: #14263a !important; }
body.rd.x-page .x-sec .wf-wave-compare-card.is-dark > ul > li::before { background: #176db5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
body.rd.x-page .x-sec .wf-wave-compare-card > ul > li::after { content: none !important; }
/* Energy evidence: its own breathing room, roomier cards, bottoms aligned */
body.rd.x-page .x-sec .wf-wave-compare + .hfe-energy, body.rd.x-page .x-sec .wf-wave-compare ~ .hfe-energy { margin-top: clamp(88px, 8vw, 128px) !important; padding-top: 0 !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-heading { margin-bottom: 36px !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-heading p:not(.hfe-kicker) { margin-top: 12px !important; max-width: 760px; }
body.rd.x-page .x-sec .hfe-energy .hfe-two { gap: 24px !important; align-items: stretch !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-card { padding: clamp(28px, 3vw, 40px) !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-card > .hfe-source { margin-top: 18px !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-card > .hfe-details { margin-top: auto !important; padding-top: 18px !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-card > :is(.hfe-chart, .hfe-study-condition) { margin-top: 20px !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-card > p.hfe-source + .hfe-details, body.rd.x-page .x-sec .hfe-energy .hfe-card > p:not(.hfe-source) + p.hfe-source { margin-top: 16px !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-boundary { margin-top: 24px !important; }
@media (max-width: 760px) {
  body.rd.x-page .x-sec .wf-wave-compare, body.rd.x-page .x-sec .wf-wave-compare.x-skystroke { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  body.rd.x-page .x-sec .wf-wave-compare + .hfe-energy, body.rd.x-page .x-sec .wf-wave-compare ~ .hfe-energy { margin-top: 72px !important; }
}
body.rd.x-page .x-sec .wf-wave-compare > .wf-wave-compare-card.x-onwhite.x-onwhite.x-onwhite:not(.is-dark) { background: #f7f9fb !important; box-shadow: inset 0 0 0 1px #e2e8ee !important; }
body.rd.x-page .x-sec .wf-wave-compare > .wf-wave-compare-card.is-dark.x-onwhite.x-onwhite.x-onwhite, body.rd.x-page .x-sec .wf-wave-compare > .wf-wave-compare-card.is-dark.is-dark.is-dark { background: #fff !important; box-shadow: inset 0 0 0 2px #176db5, 0 16px 36px -18px rgba(23, 109, 181, .35) !important; outline: 0 !important; }
body.rd.x-page .x-sec .wf-wave-compare > .wf-wave-compare-card:not(.is-dark):not(#x-none) { background: #f7f9fb !important; box-shadow: inset 0 0 0 1px #e2e8ee !important; }
body.rd.x-page .x-sec .wf-wave-compare > .wf-wave-compare-card.is-dark:not(#x-none) { background: #fff !important; box-shadow: inset 0 0 0 2px #176db5, 0 16px 36px -18px rgba(23, 109, 181, .35) !important; outline: 0 !important; }

/* 현장 운전 사례 (2026-11-08 rev.): one card per site — figure on top, its trend chart below */
body.rd.x-page .x-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
body.rd.x-page .x-site { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 2.6vw, 36px); border-radius: 24px; background: #f0f8fe; box-shadow: inset 0 0 0 1px #dae7f0; }
body.rd.x-page .x-site > article, body.rd.x-page .x-site > article.x-onwhite.x-onwhite.x-onwhite:not(#x-none) { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.rd.x-page .x-site > article > .rd-icon { display: none !important; }
body.rd.x-page .x-site > article strong { margin: 12px 0 0 !important; }
body.rd.x-page .x-site > article > p:last-child { margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; color: #4b6074 !important; font-size: 14.5px !important; }
body.rd.x-page .x-site > figure { display: flex; flex-direction: column; flex: 1; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.rd.x-page .x-site > figure .x-chart, body.rd.x-page .x-site > figure .x-chart.x-skystroke { padding: 18px 18px 12px !important; border-radius: 16px !important; background: #fff !important; box-shadow: inset 0 0 0 1px #dae7f0 !important; }
body.rd.x-page .x-site > figure > figcaption { margin: 12px 2px 0 !important; color: #5f7183 !important; font-size: 13.5px !important; }
body.rd.x-page .x-site > figure > details { margin-top: auto !important; padding-top: 14px !important; }
body.rd.x-page #wave-field .wf-wave-guard { margin-top: 32px !important; }
body.rd.x-page #wave-field .x-site-note { margin: 28px 0 0 !important; padding: 0 !important; color: var(--x-muted) !important; font-size: 13.5px !important; }
body.rd.x-page #wave-field .x-site-note + .wf-wave-footnote { margin-top: 6px !important; padding-top: 0 !important; border-top: 0 !important; color: var(--x-muted) !important; font-size: 13.5px !important; }
body.rd.x-page #wave-field .hfm-field-evidence { margin-top: clamp(88px, 8vw, 128px) !important; }
@media (max-width: 860px) { body.rd.x-page .x-sites { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
/* site card head: pill label, large figure, short description (same look as the old metric cards) */
body.rd.x-page .x-site > article { display: flex !important; flex-direction: column; align-items: flex-start; }
body.rd.x-page .x-site > article .wf-kicker { display: inline-flex !important; align-items: center; margin: 0 0 14px !important; padding: 5px 12px !important; border-radius: 999px; background: #fff; color: var(--x-blue-text) !important; font-size: 13px !important; font-weight: 700 !important; }
body.rd.x-page .x-site > article .wf-kicker::before { content: none !important; }
body.rd.x-page .x-site > article strong { display: flex !important; align-items: baseline; gap: 8px; margin: 0 !important; color: var(--x-ink) !important; font-size: clamp(30px, 3vw, 40px) !important; font-weight: 800 !important; line-height: 1.15; letter-spacing: -.03em; }
body.rd.x-page .x-site > article strong small { color: var(--x-muted) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0; }
body.rd.x-page .x-site > article > p:not(.wf-kicker) { margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; color: #4b6074 !important; font-size: 14.5px !important; line-height: 1.6; }

/* Energy study "조건 보기" tables: fit the card (no 640px minimum), light header, wrapping cells, no empty top space */
body.rd.x-page .hfe-details .hfe-table-scroll:not(#x-none) { margin: 14px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
body.rd.x-page .hfe-details .hfe-table-scroll .wf-table-wrap:not(#x-none) { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; background: #fff !important; box-shadow: inset 0 0 0 1px #dae7f0 !important; overflow: hidden !important; }
body.rd.x-page .hfe-details .hfe-table-scroll table:not(#x-none) { width: 100% !important; min-width: 0 !important; table-layout: fixed; border-collapse: collapse !important; border: 0 !important; background: none !important; }
body.rd.x-page .hfe-details .hfe-table-scroll caption:not(#x-none) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
body.rd.x-page .hfe-details .hfe-table-scroll :is(th, td):not(#x-none) { padding: 12px 14px !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: #3f5163 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; vertical-align: top; white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; }
body.rd.x-page .hfe-details .hfe-table-scroll thead th:not(#x-none) { background: #f5f9fc !important; color: #5f7183 !important; font-size: 12.5px !important; font-weight: 700 !important; box-shadow: inset 0 -1px 0 #e2e8ee !important; }
body.rd.x-page .hfe-details .hfe-table-scroll tbody th:not(#x-none) { color: var(--x-ink) !important; font-weight: 700 !important; }
body.rd.x-page .hfe-details .hfe-table-scroll tbody tr + tr > :is(th, td):not(#x-none) { box-shadow: inset 0 1px 0 #eef2f6 !important; }
body.rd.x-page .hfe-details .hfe-table-scroll :is(th, td):first-child:not(#x-none) { width: 30%; }
/* Sky-box stroke always wins over older "box-shadow: none" component rules */
body.rd.x-page .x-sec .x-skystroke:not(#x-none) { box-shadow: inset 0 0 0 1px #dae7f0 !important; }
/* 구동휠 heading and description centred */
body.rd.x-page #wave-wheel .wf-content-inner > :is(.wf-wave-subhead, .wf-wave-subtext):not(#x-none) { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
/* 기술 비교: side-view 3D motions in equal 16:9 frames, whole model visible (contain), handoff background */
body.rd.x-page .x-sec .wf-wave-compare-card > .x-cmp-media { margin: 0 0 22px; overflow: hidden; border-radius: 14px; background: #f3f7fa; box-shadow: inset 0 0 0 1px #e2e8ee; aspect-ratio: 16 / 9; }
body.rd.x-page .x-sec .wf-wave-compare-card > .x-cmp-media video { display: block; width: 100%; height: 100%; object-fit: contain; background: #f3f7fa; }
/* taller frame: only the empty side background is trimmed, the model keeps its full height (no stretching) */
body.rd.x-page .x-sec .wf-wave-compare-card > .x-cmp-media { aspect-ratio: 4 / 3; }
body.rd.x-page .x-sec .wf-wave-compare-card > .x-cmp-media video { object-fit: cover; object-position: center; }

/* 기술 비교 stage: two tall motion frames side by side with a VS marker; explanation cards below */
body.rd.x-page .x-cmp-stage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 0 12px; }
body.rd.x-page .x-cmp-pane { position: relative; margin: 0; overflow: hidden; height: clamp(400px, 40vw, 580px); border-radius: 20px; background: #f3f7fa; }
body.rd.x-page .x-cmp-pane::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px #dae7f0; pointer-events: none; }
body.rd.x-page .x-cmp-pane--wave::after { box-shadow: inset 0 0 0 2px #176db5; }
body.rd.x-page .x-cmp-pane video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #f3f7fa; }
body.rd.x-page .x-cmp-tag { position: absolute; top: 18px; left: 18px; z-index: 3; padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(14, 29, 43, .1); color: #5f7183; font-size: 14px; font-weight: 700; }
body.rd.x-page .x-cmp-pane--wave .x-cmp-tag { background: #176db5; color: #fff; }
body.rd.x-page .x-cmp-pane figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .9); color: #3f5163; font-size: 14px; line-height: 1.5; text-align: center; }
body.rd.x-page .x-cmp-vs { position: absolute; top: 50%; left: 50%; z-index: 4; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #0e1d2b; box-shadow: 0 0 0 6px #fff; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .02em; transform: translate(-50%, -50%); }
body.rd.x-page .x-cmp-note { margin: 0 0 28px !important; color: var(--x-muted); font-size: 13px; text-align: center; }
body.rd.x-page .x-sec .wf-wave-compare.x-cmp-text > .wf-wave-compare-card { padding: clamp(24px, 2.6vw, 34px) !important; }
@media (max-width: 760px) {
  body.rd.x-page .x-cmp-stage { gap: 10px; }
  body.rd.x-page .x-cmp-pane { height: 380px; border-radius: 16px; }
  body.rd.x-page .x-cmp-tag { top: 10px; left: 10px; padding: 5px 10px; font-size: 12px; }
  body.rd.x-page .x-cmp-pane figcaption { left: 8px; right: 8px; bottom: 8px; padding: 8px; font-size: 12px; }
  body.rd.x-page .x-cmp-vs { width: 40px; height: 40px; font-size: 12px; box-shadow: 0 0 0 4px #fff; }
}
body.rd.x-page .x-cmp-pane > video:not(#x-none) { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; aspect-ratio: auto !important; }
/* captions sit under each frame (nothing covers the model); text cards size to their content */
body.rd.x-page .x-cmp-col { margin: 0; min-width: 0; }
body.rd.x-page .x-cmp-col > figcaption { margin: 12px 4px 0; color: #3f5163; font-size: 14.5px; line-height: 1.55; text-align: center; }
body.rd.x-page .x-cmp-vs { top: calc(50% - 22px); }
body.rd.x-page .x-sec .wf-wave-compare.x-cmp-text > .wf-wave-compare-card:not(#x-none) { min-height: 0 !important; height: auto !important; }
@media (max-width: 760px) { body.rd.x-page .x-cmp-col > figcaption { font-size: 12.5px; } body.rd.x-page .x-cmp-vs { top: calc(50% - 30px); } }
/* soft fade at the top and bottom of each motion frame so the cropped model edges blend into the background */
body.rd.x-page .x-cmp-pane::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(180deg, #f3f7fa 0%, rgba(243, 247, 250, 0) 13%, rgba(243, 247, 250, 0) 87%, #f3f7fa 100%); pointer-events: none; }
/* motion descriptions as subtitles inside each frame; the shared note stays alone below the stage */
body.rd.x-page .x-cmp-col { position: relative; }
body.rd.x-page .x-cmp-col > figcaption { position: absolute; left: 50%; bottom: 22px; z-index: 5; width: max-content; max-width: calc(100% - 40px); margin: 0 !important; padding: 9px 16px; border-radius: 10px; background: rgba(14, 29, 43, .74); color: #fff !important; font-size: 14.5px !important; font-weight: 500; line-height: 1.5; text-align: center; transform: translateX(-50%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.rd.x-page .x-cmp-vs { top: 50%; }
body.rd.x-page .x-cmp-note { margin-top: 18px !important; }
@media (max-width: 760px) {
  body.rd.x-page .x-cmp-col > figcaption { bottom: 10px; max-width: calc(100% - 16px); padding: 6px 9px; border-radius: 8px; font-size: 11.5px !important; }
  body.rd.x-page .x-cmp-vs { top: 50%; }
}
/* 조건 보기 tables: navy header row */
body.rd.x-page .hfe-details .hfe-table-scroll thead th:not(#x-none) { background: var(--x-navy) !important; color: #fff !important; box-shadow: none !important; }
/* stronger top/bottom background fade */
body.rd.x-page .x-cmp-pane::before { background: linear-gradient(180deg, #f3f7fa 0%, rgba(243, 247, 250, .88) 9%, rgba(243, 247, 250, 0) 24%, rgba(243, 247, 250, 0) 76%, rgba(243, 247, 250, .88) 91%, #f3f7fa 100%) !important; }
/* subtitles as a full-width dark gradient band (like the film captions), frame ring drawn above it */
body.rd.x-page .x-cmp-col > figcaption { left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; padding: 64px 24px 24px !important; border-radius: 0 0 20px 20px !important; background: linear-gradient(180deg, rgba(64, 77, 92, 0) 0%, rgba(64, 77, 92, .72) 48%, rgba(58, 70, 84, .96) 100%) !important; color: #fff !important; font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); transform: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.rd.x-page .x-cmp-pane::after { z-index: 6; }
@media (max-width: 760px) {
  body.rd.x-page .x-cmp-col > figcaption { padding: 44px 10px 12px !important; border-radius: 0 0 16px 16px !important; font-size: 12px !important; }
}

/* 문제 → 해결 sequential reveal (hidden instantly, animated only when shown) */
body.rd.x-page .x-mech-grid.x-mr :is(.x-mech-label, .x-mech-step) { opacity: 0; translate: 0 24px; }
body.rd.x-page #wave-cleaning .x-mech-grid.x-mr .x-mech-group.is-solution::before { opacity: 0; translate: 0 -10px; }
body.rd.x-page .x-mech-grid.x-mr.is-in :is(.x-mech-label, .x-mech-step) { opacity: 1; translate: 0 0; transition: opacity .55s ease, translate .65s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(var(--mr-i, 0) * .16s); }
body.rd.x-page #wave-cleaning .x-mech-grid.x-mr.is-in .x-mech-group.is-solution::before { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .6s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(var(--mr-arrow, 0) * .16s); }
/* fade: narrow but strong (solid edge, gone within ~12%) */
body.rd.x-page .x-cmp-pane::before { background: linear-gradient(180deg, #f3f7fa 0%, #f3f7fa 4%, rgba(243, 247, 250, 0) 12%, rgba(243, 247, 250, 0) 88%, #f3f7fa 96%, #f3f7fa 100%) !important; }
/* subtitle: a thin solid strip at the bottom — grey for air scouring, blue for WAVE */
body.rd.x-page .x-cmp-col > figcaption { padding: 13px 20px !important; background: #6b7a89 !important; text-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; }
body.rd.x-page .x-cmp-col:has(.x-cmp-pane--wave) > figcaption { background: #176db5 !important; }
@media (max-width: 760px) { body.rd.x-page .x-cmp-col > figcaption { padding: 8px 8px !important; font-size: 11.5px !important; } }
body.rd.x-page .x-cmp-stage > .x-cmp-vs { z-index: 20 !important; }
/* energy note: no left bar */
body.rd.x-page .hfe-boundary:not(#x-none) { padding-left: 0 !important; border-left: 0 !important; }

/* "WAVE 기술" navy band: centred, white headline, #48aaff accent, soft white lead */
body.rd.x-page #app > section.x-tech-band { background: var(--x-navy) !important; }
body.rd.x-page .x-tech-band .x-head, body.rd.x-page .x-tech-band .x-head > div { display: block !important; max-width: 900px; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
body.rd.x-page .x-tech-band .x-eyebrow { color: #48aaff !important; }
body.rd.x-page .x-tech-band .x-h2 { margin-left: auto !important; margin-right: auto !important; color: #fff !important; }
body.rd.x-page .x-tech-band .x-h2 .x-hl { color: #48aaff; }
body.rd.x-page .x-tech-band .x-lead { max-width: 760px; margin: 24px auto 0 !important; color: rgba(255, 255, 255, .78) !important; }
body.rd.x-page .x-tech-band .x-head .x-lead:not(#x-none) { color: rgba(255, 255, 255, .8) !important; }
body.rd.x-page .x-tech-band .x-head .x-h2:not(#x-none) { color: #fff !important; }
/* WAVE 기술 band: pale-white eyebrow (as on the home page), white lead, forced line break kept */
body.rd.x-page .x-tech-band .x-head .x-eyebrow:not(#x-none) { color: rgba(255, 255, 255, .62) !important; }
body.rd.x-page .x-tech-band .x-head .x-lead:not(#x-none) { color: #fff !important; }
body.rd.x-page .x-tech-band .x-h2 br { display: inline !important; }
/* energy study cards: source line + "조건 보기" anchored to the card bottom so both cards' rows line up */
body.rd.x-page .x-sec .hfe-energy .hfe-card:not(#x-none) { display: flex !important; flex-direction: column !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-card > .hfe-source:has(+ .hfe-details):not(#x-none) { margin-top: auto !important; padding-top: 18px !important; }
body.rd.x-page .x-sec .hfe-energy .hfe-card > .hfe-details:not(#x-none) { margin-top: 20px !important; }

/* Home hero typing: characters keep their space (no layout shift) and appear one by one with a blinking caret */
.hl-home .xh-type .xh-ch { position: relative; opacity: 0; }
.hl-home .xh-type .xh-ch.is-on { opacity: 1; }
.hl-home .xh-type .xh-ch.is-cur::after { content: ""; position: absolute; top: .15em; right: -.09em; width: .07em; height: .885em; background: currentColor; animation: xh-caret .9s steps(1) infinite; }
.hl-home .xh-type .xh-ch.is-cur:not(.is-end)::after { animation: none; }
.hl-home .xh-type .xh-ch.is-end::after { animation: xh-caret .9s steps(1) 5 forwards; }
@keyframes xh-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hl-home .wf-hero-stage.xh-typing :is(.wf-hero-lead, .wf-hero-pillars) { opacity: 0; translate: 0 14px; }
.hl-home .wf-hero-stage.xh-typing.xh-typed :is(.wf-hero-lead, .wf-hero-pillars) { opacity: 1; translate: 0 0; transition: opacity .7s ease, translate .8s cubic-bezier(.22, .8, .24, 1); }
.hl-home .wf-hero-stage.xh-typing.xh-typed .wf-hero-lead { transition-delay: .1s; }
.hl-home .wf-hero-stage.xh-typing.xh-typed .wf-hero-pillars { transition-delay: .35s; }
/* Home section reveal: rise in order when scrolled into view */
.hl-home .xh-rv { opacity: 0; translate: 0 28px; }
.hl-home .xh-in .xh-rv { opacity: 1; translate: 0 0; transition: opacity .7s ease, translate .8s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(var(--xh-i, 0) * .12s); }
.hl-home h1.xh-pre { visibility: hidden; }
/* hero: pillars (top buttons) and lead text are visible from the start; only the headline types */
.hl-home .wf-hero-stage.xh-typing :is(.wf-hero-lead, .wf-hero-pillars) { opacity: 1 !important; translate: none !important; transition: none !important; }

/* ---------- Home process band (2026-11-08): brand-blue band, six round icons on one timeline ---------- */
#home-process { --c: clamp(124px, 10.6vw, 156px); position: relative; overflow: hidden; padding: 112px 0 120px; background: #176db5; color: #fff; text-align: center; }
#home-process .xh-process-head .wf-kicker { margin: 0 0 24px; color: rgba(255,255,255,.72); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: .1em; }
#home-process .xh-process-head h2 { margin: 0 0 24px; color: #fff; font-size: clamp(32px, 3.25vw, 46px); font-weight: 700; line-height: 1.38; letter-spacing: -.045em; word-break: keep-all; text-wrap: balance; }
#home-process .xh-process-lead { max-width: 1040px; margin: 0 auto; color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.85; font-weight: 400; word-break: keep-all; }
#home-process .xh-steps-wrap { position: relative; margin-top: 84px; }
#home-process .xh-steps-line { position: absolute; left: 0; right: 0; top: calc(var(--c) + 46px); height: 1px; background: rgba(255,255,255,.75); transform-origin: left center; }
#home-process .xh-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; max-width: 1360px; margin: 0 auto; padding: 0 40px; list-style: none; }
#home-process .xh-step { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: 0; }
#home-process .xh-step-ico { display: grid; place-items: center; width: var(--c); aspect-ratio: 1; border-radius: 50%; background: rgba(0, 29, 58, .22); }
#home-process .xh-step-ico svg { width: 48%; height: auto; display: block; }
#home-process .xh-step-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 39px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.16); }
#home-process .xh-step-num { margin-top: 30px; color: #bfe0ff; font-size: 14px; font-weight: 700; letter-spacing: .12em; }
#home-process .xh-step h3 { margin: 8px 0 12px; color: #fff; font-size: clamp(20px, 1.6vw, 23px); font-weight: 700; line-height: 1.35; letter-spacing: -.03em; word-break: keep-all; }
#home-process .xh-step p { max-width: 230px; margin: 0; color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.65; word-break: keep-all; }

/* tablets and phones: a vertical timeline, icon left and text right */
@media (max-width: 1080px) {
  #home-process { --c: 88px; padding: 84px 0 72px; }
  #home-process .xh-steps-wrap { margin-top: 52px; }
  #home-process .xh-steps-line, #home-process .xh-step-dot { display: none; }
  #home-process .xh-steps { grid-template-columns: 1fr; gap: 0; max-width: 680px; padding: 0 24px; }
  #home-process .xh-step { position: relative; display: grid; grid-template-columns: var(--c) 1fr; grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; padding-bottom: 32px; text-align: left; }
  #home-process .xh-step:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--c) / 2); top: var(--c); bottom: 0; width: 1px; background: rgba(255,255,255,.6); transform-origin: top center; }
  #home-process .xh-step-ico { grid-row: 1 / span 3; }
  #home-process .xh-step-ico svg { width: 56%; }
  #home-process .xh-step-num { grid-column: 2; margin-top: 14px; }
  #home-process .xh-step h3 { grid-column: 2; margin: 4px 0 8px; }
  #home-process .xh-step p { grid-column: 2; max-width: none; }
}
@media (max-width: 700px) {
  #home-process { --c: 72px; padding: 65px 0 48px; }
  #home-process .xh-process-head h2 { font-size: 28px; line-height: 1.4; }
  #home-process .xh-process-lead { font-size: 16px; }
  #home-process .xh-steps { padding: 0 18px; }
  #home-process .xh-step { column-gap: 18px; padding-bottom: 26px; }
  #home-process .xh-step-num { margin-top: 8px; font-size: 13px; }
  #home-process .xh-step h3 { font-size: 20px; }
  #home-process .xh-step p { font-size: 15px; }
}

/* motion: the line draws left to right, each icon, dot and text appears in turn (hidden states carry no transition) */
#home-process.xh-pr .xh-steps-line { transform: scaleX(0); }
#home-process.xh-pr .xh-step-ico { opacity: 0; transform: scale(.82); }
#home-process.xh-pr .xh-step-dot { opacity: 0; transform: scale(0); }
#home-process.xh-pr .xh-step :is(.xh-step-num, h3, p) { opacity: 0; translate: 0 18px; }
#home-process.xh-pr .xh-step::before { transform: scaleY(0); }
#home-process.xh-pr.is-run .xh-steps-line { transform: none; transition: transform 1.5s cubic-bezier(.45, .05, .35, 1) .15s; }
#home-process.xh-pr.is-run .xh-step-ico { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.22, .8, .24, 1.15); transition-delay: calc(var(--i) * .2s); }
#home-process.xh-pr.is-run .xh-step-dot { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(.25s + var(--i) * .22s); }
#home-process.xh-pr.is-run .xh-step :is(.xh-step-num, h3, p) { opacity: 1; translate: 0 0; transition: opacity .6s ease, translate .7s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(.3s + var(--i) * .2s); }
#home-process.xh-pr.is-run .xh-step::before { transform: none; transition: transform .5s ease calc(.45s + var(--i) * .2s); }

/* Home process band on the site's light sky (2026-11-08): blue circles keep the light duotone icons */
#home-process { background: #f0f8fe; color: #0e1d2b; }
#home-process .xh-process-head .wf-kicker { color: #176db5; }
#home-process .xh-process-head h2 { color: #001d3a; }
#home-process .xh-process-lead { color: #3f5163; }
#home-process .xh-step-ico { background: #176db5; box-shadow: 0 14px 30px -18px rgba(23, 109, 181, .7); }
#home-process .xh-step-ico svg [fill="#2b8fe3"] { fill: #48aaff; }
#home-process .xh-step-ico svg [stroke="#2b8fe3"] { stroke: #48aaff; }
#home-process .xh-steps-line { background: rgba(23, 109, 181, .32); }
#home-process .xh-step-dot { background: #176db5; box-shadow: 0 0 0 6px rgba(23, 109, 181, .14); }
#home-process .xh-step-num { color: #176db5; }
#home-process .xh-step h3 { color: #001d3a; }
#home-process .xh-step p { color: #3f5163; }
@media (max-width: 1080px) { #home-process .xh-step:not(:last-child)::before { background: rgba(23, 109, 181, .3); } }

/* Home process band on the main navy (2026-11-08): white text, #48aaff accents, blue circles */
#home-process { background: #001d3a; color: #fff; }
#home-process .xh-process-head .wf-kicker { color: #d4ebff; }
#home-process .xh-process-head h2 { color: #fff; }
#home-process .xh-process-lead { color: #e6f2fc; }
#home-process .xh-step-ico { background: #176db5; box-shadow: none; }
#home-process .xh-steps-line { background: rgba(255, 255, 255, .28); }
#home-process .xh-step-dot { background: #48aaff; box-shadow: 0 0 0 6px rgba(72, 170, 255, .18); }
#home-process .xh-step-num { color: #48aaff; }
#home-process .xh-step h3 { color: #fff; }
#home-process .xh-step p { color: rgba(230, 242, 252, .86); }
@media (max-width: 1080px) { #home-process .xh-step:not(:last-child)::before { background: rgba(255, 255, 255, .26); } }

/* process icons: near-black navy circles (#000624, as the hero overlay) so the light icons read clearly on navy */
#home-process .xh-step-ico { background: #000624; }
#home-process .xh-process-head h2 .xh-process-hl { color: #48aaff; }

/* language switch: light sky track, stroke unchanged */
.wf-lang-switch:not(#x-none) { background: #f0f8fe; }
.wf-lang-switch:not(#x-none) :is(a, button):not([aria-current="true"]) { color: #176db5; }

/* Case field filter (2026-11-08): one light-sky pill track like the language switch, centered; text size unchanged */
body.rd.x-page .r3-case-fields:not(#x-none) { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto 28px !important; padding: 5px !important; gap: 2px !important; border: 1px solid #cfe0ec; border-radius: 999px; background: #f0f8fe; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
body.rd.x-page .r3-case-fields:not(#x-none)::-webkit-scrollbar { display: none; }
body.rd.x-page .r3-case-fields:not(#x-none) a { flex: none; min-height: 44px; border: 0 !important; background: transparent !important; color: #176db5 !important; }
body.rd.x-page .r3-case-fields:not(#x-none) a:not(.is-active):hover { background: #cde4f7 !important; color: #176db5 !important; }
body.rd.x-page .r3-case-fields:not(#x-none) a.is-active { background: #0e4c86 !important; color: #fff !important; }
@media (max-width: 760px) {
  body.rd.x-page .r3-case-fields:not(#x-none) { width: auto; max-width: none; margin: 0 0 20px !important; padding: 4px !important; }
  body.rd.x-page .r3-case-fields:not(#x-none) a { min-height: 40px; }
}

/* language switch: selected pill in the brand blue, same as the case filter */
.wf-lang-switch:not(#x-none) [aria-current="true"] { background: #176db5; color: #fff; }
.wf-lang-switch:not(#x-none) :is(a, button):not([aria-current="true"]):hover { background: #cde4f7; color: #176db5; }
body.rd.x-page .r3-case-fields:not(#x-none) a, .wf-lang-switch:not(#x-none) :is(a, button) { transition: background-color .2s ease, color .2s ease; }
/* PC: the filter track spans the photo width below, items spread evenly */
@media (min-width: 1081px) { body.rd.x-page .r3-case-fields:not(#x-none) { width: 100%; max-width: none; justify-content: space-between; } }
@media (min-width: 1081px) and (max-width: 1240px) { body.rd.x-page .r3-case-fields:not(#x-none) a { padding: 0 16px !important; } }

/* Heading order (2026-11-08): headings moved up a level keep their former look (default h4 spacing, no tighter tracking) */
:where(h3.x-h4look) { margin-block: 1.33em; }
body .wf-wave-cycle-step > h3.x-h4look:not(#x-none) { letter-spacing: normal; }

/* Header dropdown (2026-11-08): inside the blue column, other submenus are soft white; the current page and the
   hovered submenu are full white. In the white columns the current page reads in brand blue. */
#header-sitemap [data-nav-column].is-active .wf-menu-link-group a:not(#x-none) { color: rgba(255, 255, 255, .6); }
#header-sitemap [data-nav-column].is-active .wf-menu-link-group a:is(:hover, :focus-visible, [aria-current="page"]):not(#x-none) { color: #fff; }
#header-sitemap [data-nav-column]:not(.is-active) .wf-menu-link-group a[aria-current="page"]:not(#x-none) { color: #176db5; font-weight: 700; }

/* Header dropdown links (2026-11-08): no hover box; the underline draws from left to right under the text */
.hm-header-sitemap .wf-menu-link-group > a:not(#x-none) { width: fit-content; max-width: 100%; margin-inline: auto; text-decoration: none; background: linear-gradient(currentColor, currentColor) right calc(100% - 7px) / 0 2px no-repeat; transition: color .2s ease, opacity .2s ease, background-size .32s cubic-bezier(.4, 0, .2, 1); }
.hm-header-sitemap .wf-menu-link-group > a:is(:hover, :focus-visible):not(#x-none) { background-color: transparent; background-position: left calc(100% - 7px); background-size: 100% 2px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .hm-header-sitemap .wf-menu-link-group > a:not(#x-none) { transition: none; } }

/* Home numbered section labels (01–04): one size, the 04 · PROCESS label's */
body[data-view="home"] .hl-home :is(.cr-band-copy, .hm-wave-head, .hm-system-head, .xh-process-head) .wf-kicker:not(#x-none) { font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .1em; }

/* Home hero background video (2026-11-09): poster frame as the stage background, the looping clip over it,
   and the same left-to-right shade the image had so the headline keeps its contrast.
   Overlays use #000624, the clip's own darkest navy, at the earlier opacities: the old navy tints were lighter
   than the clip's darks and lifted them into a haze, while pure black read too dark. */
body[data-view="home"] .hl-home .wf-hero-stage:not(#x-none) { background-image: linear-gradient(90deg, rgba(0, 6, 36, .65) 0%, rgba(0, 6, 36, .4) 43%, rgba(0, 6, 36, .06) 76%), url('./assets/visual-motion/home-hero-flow-poster.webp?v=2'); background-position: center 54%; background-size: cover; background-repeat: no-repeat; }
.hl-home .wf-hero-stage > .xh-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hl-home .wf-hero-stage > .xh-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; opacity: 0; transition: opacity .6s ease; }
.hl-home .wf-hero-stage > .xh-hero-media.is-playing video, .hl-home .wf-hero-stage > .xh-hero-media.is-playing::after { opacity: 1; }
.hl-home .wf-hero-stage > .xh-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 6, 36, .65) 0%, rgba(0, 6, 36, .4) 43%, rgba(0, 6, 36, .06) 76%); opacity: 0; transition: opacity .6s ease; }
body[data-view="home"] .hl-home .wf-hero-stage:not(#x-none)::after { background: linear-gradient(0deg, rgba(0, 6, 36, .44), rgba(0, 6, 36, 0) 50%); }
@media (max-width: 700px) {
  body[data-view="home"] .hl-home .wf-hero-stage:not(#x-none) { background-image: linear-gradient(90deg, rgba(0, 6, 36, .73), rgba(0, 6, 36, .5)), url('./assets/visual-motion/home-hero-flow-poster.webp?v=2'); background-position: 62% center; }
  .hl-home .wf-hero-stage > .xh-hero-media video { object-position: 62% center; }
  .hl-home .wf-hero-stage > .xh-hero-media::after { background: linear-gradient(90deg, rgba(0, 6, 36, .73), rgba(0, 6, 36, .5)); }
}

/* Home hero (2026-11-09): the accents (pillar labels, "A2Z") run from the original mint to the navy-section blue.
   "A2Z" is one gradient across its typed letters; the pill keeps its fill on ::before so the label text can be clipped. */
body[data-view="home"] .hl-home .wf-hero-copy h1 .hm-hero-a2z:not(#x-none) { color: #48aaff; background: linear-gradient(90deg, #b7edf0 0%, #48aaff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body[data-view="home"] .hl-home .wf-hero-copy h1 .hm-hero-a2z .xh-ch.is-cur::after { background: #48aaff; }
body[data-view="home"] .hl-home .wf-hero-pillars a:not(#x-none) { position: relative; border-color: transparent; color: #48aaff; background: linear-gradient(90deg, #b7edf0 0%, #48aaff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body[data-view="home"] .hl-home .wf-hero-pillars a:not(#x-none)::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid #91c6d75c; border-radius: inherit; background: #0b4e6866; pointer-events: none; }

/* Process icons (2026-11-09): vivid blue icons. Main shapes take the navy-section blue, secondary shapes a deeper
   blue, and the small accents (drop, check, graph line, pencil) turn white so each pictogram still reads. */
#home-process .xh-step-ico svg [fill="#eaf5ff"]:not(#x-none) { fill: #48aaff; }
#home-process .xh-step-ico svg [stroke="#eaf5ff"]:not(#x-none) { stroke: #48aaff; }
#home-process .xh-step-ico svg [fill="#a9d6ff"]:not(#x-none) { fill: #1f6cc0; }
#home-process .xh-step-ico svg :is([fill="#2b8fe3"], [fill="#5fb4ff"]):not(#x-none) { fill: #f2f9ff; }
#home-process .xh-step-ico svg :is([stroke="#2b8fe3"], [stroke="#176db5"]):not(#x-none) { stroke: #f2f9ff; }
#home-process .xh-step-ico svg [stroke="#fff"]:not(#x-none) { stroke: #1f6cc0; }

/* Home 01 · MEMBRANE product cards (2026-11-09): near-black navy (#000624) at the top easing into the artwork navy, with the company-history
   artwork (BioPuri → 2002, Cleanfil-S → 2001, Cleanfil → 1996) blended into the bottom; text is light on blue.
   The artwork's top is masked out so it melts into the card gradient. Percent padding follows the card width,
   so the graphic band keeps the image's 4:3 proportion on every screen. */
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:not(#x-none) {
  position: relative; isolation: isolate; overflow: hidden; min-height: 0;
  padding: 34px 32px 72%; border: 1px solid rgba(120, 190, 255, .16); border-radius: 22px;
  background: linear-gradient(180deg, #000624 0%, #011a42 45%, #022653 100%);
  box-shadow: 0 28px 56px -34px rgba(0, 29, 58, .55);
  transition: opacity .7s ease calc(var(--xh-i, 0) * .12s), translate .8s cubic-bezier(.22, .8, .24, 1) calc(var(--xh-i, 0) * .12s),
    transform .45s cubic-bezier(.22, .8, .24, 1), box-shadow .45s ease, border-color .3s ease;
}
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:not(#x-none)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6%; z-index: -1; aspect-ratio: 4 / 3;
  background: var(--xm-art) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 86%, transparent 100%);
  transform-origin: 50% 85%; transition: transform .8s cubic-bezier(.22, .8, .24, 1);
}
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:nth-child(1) { --xm-art: url('./assets/redesign-2611/history-2002.webp?v=2'); }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:nth-child(2) { --xm-art: url('./assets/redesign-2611/history-2001.webp?v=2'); }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:nth-child(3) { --xm-art: url('./assets/redesign-2611/history-1996.webp?v=2'); }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article > span:not(#x-none) { color: #48aaff; font-size: 13px; font-weight: 650; letter-spacing: .01em; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup h3:not(#x-none) { color: #fff; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup p:not(#x-none) { color: rgba(234, 244, 255, .86); }
/* The whole card is the link: the "…보기" anchor stays for screen readers and search, its text hidden, and its
   ::after stretches over the card (the anchor itself is unpositioned, so the card is the containing block). */
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup .hfm-text-link:not(#x-none) { position: static; display: block; width: 0; height: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; border: 0; background: none; box-shadow: none; color: transparent; font-size: 0; line-height: 0; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup .hfm-text-link:not(#x-none)::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup p:not(#x-none) { margin-bottom: 0; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:not(#x-none) { cursor: pointer; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:has(.hfm-text-link:focus-visible):not(#x-none) { outline: 3px solid #48aaff; outline-offset: 4px; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup .hfm-text-link:focus-visible:not(#x-none) { outline: none; }
@media (hover: hover) and (min-width: 1081px) {
  body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:hover:not(#x-none) { transform: translateY(-6px); border-color: rgba(120, 190, 255, .34); box-shadow: 0 38px 66px -36px rgba(0, 29, 58, .62); }
  body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:hover:not(#x-none)::before { transform: scale(1.05); }
}
@media (max-width: 1080px) {
  body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:not(#x-none) { padding: 28px 26px 66%; }
}
@media (max-width: 700px) {
  body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:not(#x-none) { padding: 26px 24px 74%; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:not(#x-none), body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:not(#x-none)::before { transition: none; }
}

/* Home 01 · MEMBRANE section (2026-11-09): white background; heading text switches to navy with the main blue. */
body[data-view="home"] .hl-home .cr-home-membrane:not(#x-none) { background: #fff; }
body[data-view="home"] .hl-home .cr-home-membrane .cr-band-copy .wf-kicker:not(#x-none) { color: #176db5; }
body[data-view="home"] .hl-home .cr-home-membrane .cr-band-copy h2:not(#x-none) { color: #001d3a; }
body[data-view="home"] .hl-home .cr-home-membrane .cr-band-copy h2 span:not(#x-none) { color: #176db5; }
body[data-view="home"] .hl-home .cr-home-membrane .cr-band-copy > p:last-child:not(#x-none) { color: #4f6b80; }

/* Home company intro (2026-11-09): the semi-bold intro sentence read loosely at normal tracking; tightened slightly. */
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p:not(#x-none), body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p strong:not(#x-none) { letter-spacing: -.025em; }

/* Home 03 · SYSTEM (2026-11-09): blue light-wave artwork as the section background. The dark centre keeps the
   centred copy readable; a short navy fade at the top joins it to the section above. */
body[data-view="home"] .hl-home .hm-system-head:not(#x-none) { background: linear-gradient(180deg, #001d3a 0%, rgba(0, 29, 58, 0) 16%), url('./assets/home-2611/system-wave-bg.webp?v=1') center / cover no-repeat, #000d2d; }
@media (max-width: 700px) {
  body[data-view="home"] .hl-home .hm-system-head:not(#x-none) { background-position: 0 0, 78% center, 0 0; }
}

/* Home company intro (2026-11-09): plain light sky background (#f0f8fe); navy text with the main blue emphasis. */
body[data-view="home"] .hl-home .cr-company-intro:not(#x-none) { background: #f0f8fe; }
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p:not(#x-none) { color: #173951; }
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p strong:not(#x-none) { color: #176db5; }

/* Process steps inside the company intro (2026-11-09): light background, so the step text turns navy and the
   timeline uses the main blue; the near-black icon circles stay. The section heading is visually hidden. */
.cr-company-intro > #home-process.xh-process--intro { padding: clamp(56px, 5vw, 76px) 0 0; background: transparent; color: #001d3a; }
.cr-company-intro > #home-process.xh-process--intro .xh-process-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cr-company-intro > #home-process.xh-process--intro .xh-steps-wrap { margin-top: 0; }
.cr-company-intro > #home-process.xh-process--intro .xh-steps-line { background: rgba(23, 109, 181, .28); }
.cr-company-intro > #home-process.xh-process--intro .xh-step-dot { background: #176db5; box-shadow: 0 0 0 6px rgba(23, 109, 181, .14); }
.cr-company-intro > #home-process.xh-process--intro .xh-step-num { color: #176db5; }
.cr-company-intro > #home-process.xh-process--intro .xh-step h3 { color: #001d3a; }
.cr-company-intro > #home-process.xh-process--intro .xh-step p { color: #4f6b80; font-weight: 400; letter-spacing: normal; }
@media (max-width: 1080px) {
  .cr-company-intro > #home-process.xh-process--intro { padding-top: 48px; }
  .cr-company-intro > #home-process.xh-process--intro .xh-step:not(:last-child)::before { background: rgba(23, 109, 181, .26); }
}
/* White circles behind the intro step icons (2026-11-09): without a circle the pictograms looked uneven, so each
   sits on a plain white disc (no shadow); the accents (drop, check, graph line, pencil) stay navy. */
.cr-company-intro > #home-process.xh-process--intro { --c: clamp(112px, 8.8vw, 132px); }
.cr-company-intro > #home-process.xh-process--intro .xh-step-ico { background: #fff; border-radius: 50%; box-shadow: none; }
.cr-company-intro > #home-process.xh-process--intro .xh-step-ico svg { width: 54%; }
.cr-company-intro > #home-process.xh-process--intro .xh-step-ico svg :is([fill="#2b8fe3"], [fill="#5fb4ff"]):not(#x-none) { fill: #001d3a; }
.cr-company-intro > #home-process.xh-process--intro .xh-step-ico svg :is([stroke="#2b8fe3"], [stroke="#176db5"]):not(#x-none) { stroke: #001d3a; }
.cr-company-intro > #home-process.xh-process--intro .xh-step-ico svg [stroke="#fff"]:not(#x-none) { stroke: #48aaff; }
@media (max-width: 1080px) {
  .cr-company-intro > #home-process.xh-process--intro { --c: 76px; }
  .cr-company-intro > #home-process.xh-process--intro .xh-step-ico svg { width: 60%; }
}

/* Home 02 · DEVICE (2026-11-09): light sky background (#f0f8fe); navy text, main-blue label and emphasis, and an
   outlined navy button that fills with the main blue on hover. */
body[data-view="home"] .hl-home .hm-wave-head:not(#x-none) { background: #f0f8fe; }
body[data-view="home"] .hl-home .hm-wave-head .wf-kicker:not(#x-none) { color: #176db5; }
body[data-view="home"] .hl-home .hm-wave-head h2:not(#x-none) { color: #001d3a; }
body[data-view="home"] .hl-home .hm-wave-head .hm-band-emphasis:not(#x-none) { color: #176db5; }
body[data-view="home"] .hl-home .hm-wave-head .hm-wave-lead:not(#x-none), body[data-view="home"] .hl-home .hm-wave-head .hm-wave-description p:not(#x-none) { color: #4f6b80; }
body[data-view="home"] .hl-home .hm-wave-head .cr-band-actions .wf-secondary:not(#x-none) { border-color: rgba(0, 29, 58, .3); color: #001d3a; }

/* Intro steps, titles only (2026-11-09): the STEP numbers and descriptions are removed to cut the text; each
   step keeps its icon and a main-blue title. On the vertical (mobile) layout the title centres on its icon. */
.cr-company-intro > #home-process.xh-process--intro .xh-step :is(.xh-step-num, p) { display: none; }
.cr-company-intro > #home-process.xh-process--intro .xh-step h3 { margin: 26px 0 0; color: #176db5; }
@media (max-width: 1080px) {
  .cr-company-intro > #home-process.xh-process--intro .xh-step { grid-template-rows: auto; align-items: center; padding-bottom: 22px; }
  .cr-company-intro > #home-process.xh-process--intro .xh-step-ico { grid-row: 1; }
  .cr-company-intro > #home-process.xh-process--intro .xh-step h3 { grid-column: 2; margin: 0; }
}

/* Intro steps on mobile/tablet (2026-11-09): one horizontal row that scrolls sideways instead of a vertical list;
   smaller titles. The timeline is drawn on the list itself so it runs the full scroll width through the dots. */
@media (max-width: 1080px) {
  .cr-company-intro > #home-process.xh-process--intro { --c: 72px; --xd: 20px; }
  .cr-company-intro > #home-process.xh-process--intro .xh-steps-wrap { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cr-company-intro > #home-process.xh-process--intro .xh-steps-wrap::-webkit-scrollbar { display: none; }
  .cr-company-intro > #home-process.xh-process--intro .xh-steps-line { display: none; }
  .cr-company-intro > #home-process.xh-process--intro .xh-steps { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 104px; gap: 6px; width: max-content; max-width: none; margin: 0; padding: 0 20px;
    background: linear-gradient(rgba(23, 109, 181, .28), rgba(23, 109, 181, .28)) 0 calc(var(--c) + var(--xd) + 5.5px) / 100% 1px no-repeat; }
  .cr-company-intro > #home-process.xh-process--intro .xh-step { display: flex; flex-direction: column; align-items: center; padding: 0; text-align: center; scroll-snap-align: start; }
  .cr-company-intro > #home-process.xh-process--intro .xh-step::before { display: none; }
  .cr-company-intro > #home-process.xh-process--intro .xh-step-dot { display: block; width: 12px; height: 12px; margin-top: var(--xd); box-shadow: 0 0 0 5px rgba(23, 109, 181, .14); }
  .cr-company-intro > #home-process.xh-process--intro .xh-step h3 { margin: 14px 0 0; font-size: 14px; line-height: 1.35; letter-spacing: -.02em; white-space: nowrap; }
}

/* Home section spacing (2026-11-09): the home sections use the same top/bottom padding as the subpage sections
   (clamp(88px, 10vw, 150px)); they were 76–104px on PC and 48–65px on mobile. */
body[data-view="home"] .hl-home :is(.cr-company-intro, .cr-home-membrane, .hm-wave-head, .hm-system-head):not(#x-none) { padding-top: clamp(88px, 10vw, 150px); padding-bottom: clamp(88px, 10vw, 150px); }

/* Home company intro (2026-11-09): two columns on PC — left: the "HIFIL-M" label and the title; right: the
   description (regular, with bold emphasis). Left-aligned; mobile stacks them. */
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner:not(#x-none) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: end; text-align: left; }
body[data-view="home"] .hl-home .cr-company-intro .cr-intro-kicker:not(#x-none) { max-width: none; margin: 0 0 18px; color: #176db5; font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: .1em; }
body[data-view="home"] .hl-home .cr-company-intro .cr-intro-title:not(#x-none) { margin: 0; color: #001d3a; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.35; letter-spacing: -.045em; word-break: keep-all; }
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p.cr-intro-desc:not(#x-none) { max-width: none; margin: 0; color: #3f5163; font-size: clamp(17px, 1.3vw, 19px); font-weight: 400; line-height: 1.85; letter-spacing: -.01em; word-break: keep-all; }
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p.cr-intro-desc strong:not(#x-none) { color: #001d3a; font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 860px) {
  body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner:not(#x-none) { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 700px) {
  body[data-view="home"] .hl-home .cr-company-intro .cr-intro-kicker:not(#x-none) { margin-bottom: 12px; font-size: 16px; }
  body[data-view="home"] .hl-home .cr-company-intro .cr-intro-title:not(#x-none) { font-size: 27px; }
  body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p.cr-intro-desc:not(#x-none) { font-size: 16px; }
}
/* Keep the designed break in the intro title on mobile (the intro's other <br>s are hidden there). */
body[data-view="home"] .hl-home .cr-company-intro .cr-intro-title br:not(#x-none) { display: inline; }
/* Intro description: the designed line breaks are for PC only; tablet and mobile wrap naturally. The right column
   gets a little more room on PC so each designed line fits on one line. */
@media (min-width: 1081px) {
  body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner:not(#x-none) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 72px); }
  /* the description hugs the right edge so the right side isn't left empty */
  body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p.cr-intro-desc:not(#x-none) { justify-self: end; width: max-content; max-width: 100%; }
}
@media (max-width: 1080px) {
  body[data-view="home"] .hl-home .cr-company-intro .cr-intro-desc br:not(#x-none) { display: none; }
}

/* Intro: the title and the description start at the same height (2026-11-09). The label takes its own row above
   the title, so the right-hand description lines up with the title's first line, not with the label. */
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner:not(#x-none) { align-items: start; row-gap: 0; }
body[data-view="home"] .hl-home .cr-company-intro .cr-intro-head:not(#x-none) { display: contents; }
body[data-view="home"] .hl-home .cr-company-intro .cr-intro-kicker:not(#x-none) { grid-column: 1; grid-row: 1; }
body[data-view="home"] .hl-home .cr-company-intro .cr-intro-title:not(#x-none) { grid-column: 1; grid-row: 2; }
body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p.cr-intro-desc:not(#x-none) { grid-column: 2; grid-row: 2; align-self: start; }
@media (max-width: 860px) {
  body[data-view="home"] .hl-home .cr-company-intro .cr-intro-title:not(#x-none) { grid-column: 1; grid-row: 2; }
  body[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner > p.cr-intro-desc:not(#x-none) { grid-column: 1; grid-row: 3; margin-top: 20px; }
}
/* English PC: the intro title stays on its two designed lines; the left column grows to fit it and the
   description takes the remaining width (more lines are fine). */
@media (min-width: 1081px) {
  body.x-lang-en[data-view="home"] .hl-home .cr-company-intro > .wf-section-inner:not(#x-none) { grid-template-columns: max-content minmax(0, 1fr); }
  body.x-lang-en[data-view="home"] .hl-home .cr-company-intro .cr-intro-title:not(#x-none) { white-space: nowrap; }
}
/* PC-only line breaks (e.g. the English hero title). */
@media (max-width: 1080px) { br.x-br-pc { display: none; } }

/* Home 02 · DEVICE (2026-11-09): text left-aligned (label, title, lead, descriptions, button). */
body[data-view="home"] .hl-home .hm-wave-head .wf-section-inner:not(#x-none) { text-align: left; }
body[data-view="home"] .hl-home .hm-wave-head :is(.hm-wave-lead, .hm-wave-description):not(#x-none) { margin-left: 0; margin-right: 0; }

/* Home section buttons (02 · DEVICE, 03 · SYSTEM), 2026-11-09: on hover a rounded main-blue pill grows from the
   left edge to fill the button (its leading edge stays round), and the text turns white as the fill passes. */
body[data-view="home"] .hl-home .cr-band-actions .wf-secondary:not(#x-none) {
  position: relative; isolation: isolate; overflow: hidden; background: transparent;
  transition: color .2s ease, border-color .25s ease;
}
body[data-view="home"] .hl-home .cr-band-actions .wf-secondary:not(#x-none)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 0; border-radius: 999px; background: #176db5;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
body[data-view="home"] .hl-home .cr-band-actions .wf-secondary:is(:hover, :focus-visible):not(#x-none) { border-color: #176db5; color: #fff; transition: color .2s ease .16s, border-color .25s ease; }
body[data-view="home"] .hl-home .cr-band-actions .wf-secondary:is(:hover, :focus-visible):not(#x-none)::before { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  body[data-view="home"] .hl-home .cr-band-actions .wf-secondary:not(#x-none), body[data-view="home"] .hl-home .cr-band-actions .wf-secondary:not(#x-none)::before { transition: none; }
}

/* Home 02 · DEVICE copy (2026-11-09): the lead and the two description lines read as one block of the same level —
   one size, colour and line height, no paragraph gaps. */
body[data-view="home"] .hl-home .hm-wave-head :is(.hm-wave-lead, .hm-wave-description p):not(#x-none) { margin: 0; color: #4f6b80; font-size: 18px; font-weight: 400; line-height: 1.85; }
body[data-view="home"] .hl-home .hm-wave-head .hm-wave-description:not(#x-none) { margin-top: 0; }
@media (max-width: 700px) {
  body[data-view="home"] .hl-home .hm-wave-head :is(.hm-wave-lead, .hm-wave-description p):not(#x-none) { font-size: 16px; }
}
/* "차세대 무폭기형 MBR 솔루션." in the 02 · DEVICE copy: dark bold instead of blue (2026-11-09). */
body[data-view="home"] .hl-home .hm-wave-head .hm-wave-description strong.hm-band-emphasis:not(#x-none) { color: #001d3a; font-weight: 700; }

/* Home description text — one rule set (2026-11-09), taken from the company-intro description:
   size clamp(17px, 1.3vw, 19px) (16px on mobile), line height 1.85, tracking -.01em, regular weight; emphasis is
   bold only (no colour): navy-black on light sections, white on the dark ones. Text colour #3f5163 on light
   backgrounds; the dark sections (hero, 03 · SYSTEM) keep light text. Width caps are lifted so the designed PC
   line breaks hold at the larger size. Card body text (01 cards) is a separate level and is not included. */
body[data-view="home"] .hl-home :is(.cr-home-membrane .cr-band-copy > p:last-child, .hm-wave-head .hm-wave-lead, .hm-wave-head .hm-wave-description p, .hm-system-head .hm-system-lead, .wf-hero-copy .wf-hero-lead):not(#x-none) {
  max-width: none; font-size: clamp(17px, 1.3vw, 19px); font-weight: 400; line-height: 1.85; letter-spacing: -.01em; word-break: keep-all;
}
body[data-view="home"] .hl-home :is(.cr-home-membrane .cr-band-copy > p:last-child, .hm-wave-head .hm-wave-lead, .hm-wave-head .hm-wave-description p):not(#x-none) { color: #3f5163; }
body[data-view="home"] .hl-home :is(.hm-wave-head .hm-wave-description p, .hm-wave-head .hm-wave-lead, .cr-home-membrane .cr-band-copy > p:last-child) strong:not(#x-none) { color: #001d3a; font-weight: 700; }
body[data-view="home"] .hl-home .hm-system-head .hm-system-lead strong:not(#x-none) { color: #fff; font-weight: 700; }
@media (max-width: 700px) {
  body[data-view="home"] .hl-home :is(.cr-home-membrane .cr-band-copy > p:last-child, .hm-wave-head .hm-wave-lead, .hm-wave-head .hm-wave-description p, .hm-system-head .hm-system-lead, .wf-hero-copy .wf-hero-lead):not(#x-none) { font-size: 16px; }
}

/* Peeling-strength chart (2026-11-09): the HifilM bar uses the brand blue; the "약 200%" disc uses the logo orange
   (#ed8a37, sampled from hifilm-logo-ko.png). */
.hm-chart-panel .hm-bar-hifilm:not(#x-none) { fill: #176db5; }
.hm-chart-panel .hm-percent-badge circle:not(#x-none) { fill: #ed8a37; }

/* Home 02 · DEVICE with the WAVE motion clip (2026-11-09): PC — copy on the left, the looping clip on the right in
   a rounded frame; tablet/mobile — the clip follows the copy. */
body[data-view="home"] .hl-home .hm-wave-head .xh-wave-media:not(#x-none) { margin: 0; overflow: hidden; border-radius: 24px; background: #e9edf0; aspect-ratio: 16 / 9; }
body[data-view="home"] .hl-home .hm-wave-head .xh-wave-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1081px) {
  body[data-view="home"] .hl-home .hm-wave-head .wf-section-inner:not(#x-none) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  body[data-view="home"] .hl-home .hm-wave-head .wf-section-inner > :not(.xh-wave-media) { grid-column: 1; }
  body[data-view="home"] .hl-home .hm-wave-head .wf-section-inner > .wf-kicker { justify-self: start; }
  /* the frame runs the full height of the copy (label to button); the clip is cropped at the sides to fit */
  body[data-view="home"] .hl-home .hm-wave-head .xh-wave-media:not(#x-none) { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; aspect-ratio: auto; min-height: 0; }
  body[data-view="home"] .hl-home .hm-wave-head .xh-wave-media video { position: absolute; inset: 0; }
  body[data-view="home"] .hl-home .hm-wave-head .xh-wave-media:not(#x-none) { position: relative; }
}
@media (max-width: 1080px) {
  body[data-view="home"] .hl-home .hm-wave-head .xh-wave-media:not(#x-none) { margin-top: 40px; border-radius: 18px; }
}

/* Home 01 · MEMBRANE cards — visible transparent pill button (2026-11-09), styled like the 03 · SYSTEM button:
   translucent white outline, white text, and the rounded main-blue fill growing from the left on hover (also when
   the card is hovered). The whole card stays clickable (handled in x-2611.js). */
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup .hfm-text-link:not(#x-none) {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; align-self: flex-start;
  width: auto; height: auto; min-height: 48px; margin: 28px 0 0; padding: 13px 26px;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: transparent; box-shadow: none;
  color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: color .2s ease, border-color .25s ease;
}
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup .hfm-text-link:not(#x-none)::after { content: none; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup .hfm-text-link:not(#x-none)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 0; border-radius: 999px; background: #176db5;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup :is(article:hover .hfm-text-link, .hfm-text-link:focus-visible):not(#x-none) { border-color: #176db5; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup :is(article:hover .hfm-text-link, .hfm-text-link:focus-visible):not(#x-none)::before { width: 100%; }

/* Buttons on navy (01 · MEMBRANE cards, 03 · SYSTEM), 2026-11-09: the hover fill is the vivid blue used on navy
   (#48aaff) with navy text, as on the subpage CTA buttons; the 02 · DEVICE button on the light section keeps the
   main blue fill. */
body[data-view="home"] .hl-home :is(.hm-system-head .cr-band-actions .wf-secondary, .cr-home-membrane .wf-story-lineup .hfm-text-link):not(#x-none)::before { background: #48aaff; }
body[data-view="home"] .hl-home :is(.hm-system-head .cr-band-actions .wf-secondary:is(:hover, :focus-visible), .cr-home-membrane .wf-story-lineup article:hover .hfm-text-link, .cr-home-membrane .wf-story-lineup .hfm-text-link:focus-visible):not(#x-none) { border-color: #48aaff; color: #001d3a; }

/* Home 01 · MEMBRANE cards (2026-11-09): larger title and description (one-line title, two-line description kept). */
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup h3:not(#x-none) { font-size: clamp(23px, 1.8vw, 26px); }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup p:not(#x-none) { font-size: 16px; line-height: 1.75; }
@media (max-width: 700px) {
  body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup h3:not(#x-none) { font-size: 23px; }
  body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup p:not(#x-none) { font-size: 15.5px; }
}
/* Cards appear one after another when the card row itself scrolls into view (not with the section heading). */
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article.xh-rv:not(#x-none) { opacity: 0; translate: 0 56px; transition: none; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup.xh-cards-in article.xh-rv:not(#x-none) {
  opacity: 1; translate: 0 0;
  transition: opacity .8s ease var(--xc-d, 0s), translate .9s cubic-bezier(.22, .8, .24, 1) var(--xc-d, 0s), transform .45s cubic-bezier(.22, .8, .24, 1), box-shadow .45s ease, border-color .3s ease;
}
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:nth-child(2) { --xc-d: .18s; }
body[data-view="home"] .hl-home .cr-home-membrane .wf-story-lineup article:nth-child(3) { --xc-d: .36s; }

/* Home 02 · DEVICE copy on PC (2026-11-09): the two description sentences flow as one paragraph and break at the
   designed points, so lead + description read as four lines; the copy column is a little wider for that. */
@media (min-width: 1081px) {
  body[data-view="home"] .hl-home .hm-wave-head .wf-section-inner:not(#x-none) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  body[data-view="home"] .hl-home .hm-wave-head .hm-wave-description p:not(#x-none) { display: inline; }
}

/* Footer weights and colours (2026-11-09): lighter brand name (700), regular weight for the tagline, the company
   info table and the copyright; the mint accents (phone, e-mail, enquiry button text) become white. */
footer.wf-footer .x-foot-brand > strong:not(#x-none) { font-weight: 700; }
footer.wf-footer .x-foot-brand > p:not(#x-none) { font-weight: 400; }
footer.wf-footer .x-foot-brand .x-foot-cta:not(#x-none) { color: #fff; font-weight: 500; }
footer.wf-footer :is(dt, dd, dd a, dd span):not(#x-none) { font-weight: 400; }
footer.wf-footer dd :is(a, .x-tel-ko, .x-tel-en):not(#x-none) { color: rgba(255, 255, 255, .9); }
footer.wf-footer .wf-footer-company:not(#x-none) { font-weight: 400; }

/* Contact form header (2026-11-09): the description starts level with the title (not with the bottom of the
   label + title block). The label takes its own row above the title. */
@media (min-width: 1081px) {
  body.rd.x-page #contact-form .x-head--split:not(#x-none) { align-items: start; row-gap: 0; }
  body.rd.x-page #contact-form .x-head--split > div:first-child { display: contents; }
  body.rd.x-page #contact-form .x-head--split .x-eyebrow { grid-column: 1; grid-row: 1; }
  body.rd.x-page #contact-form .x-head--split .x-h2 { grid-column: 1; grid-row: 2; }
  body.rd.x-page #contact-form .x-head--split .x-head-actions { grid-column: 1; grid-row: 3; }
  body.rd.x-page #contact-form .x-head--split > div:last-child:not(:first-child) { grid-column: 2; grid-row: 2; align-self: start; }
  body.rd.x-page #contact-form .x-head--split .x-lead { margin-top: 0; }
}

/* English mode: hide the home headline until its translation is in (2026-11-09). */
html.x-en-pending .hl-home .wf-hero-stage h1 { visibility: hidden; }