:root {
        /* 하단 바 높이 = 위아래 여백(12.375) + 버튼 높이(42) + 테두리(1.25)
           세로 치수는 header.html 의 --hdr-h 68px 를 따른다 */
        --bar-h: 68px;
        /* 섹션 경계 물결의 높이. .cta-sec 은 물결이 섹션 위를 덮는 구조라
           제목까지의 여백을 이 값만큼 더 줘야 다른 섹션과 같아진다 */
        --wave-h: 100px;
        /* forest 가 페이지를 붙드는 메인 색(히어로·비용·푸터), sage 와
           cream 이 그 사이를 채운다. 밝은 면 위에서는 forest 가 본문
           글자색(ink)과 명도가 비슷하니, 강조는 버튼처럼 면을 칠하거나
           .em 처럼 밑띠를 깔아서 낸다. 짙은 면 위에서는 반대로 뒤집는다 */
        --forest: #1e3d2b;
        --sage: #e8efe6;
        --cream: #fafbf8;
        --ink: #1a2620;
        --amber: #d9a441;
      }
      * {
        box-sizing: border-box;
      }
      [hidden] {
        display: none !important;
      }
      html {
        scroll-behavior: smooth;
      }
      html,
      body {
        margin: 0;
        background: #1c3826;
      }
      body {
        font-family:
          "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
          "Malgun Gothic", system-ui, sans-serif;
        color: #1a2620;
        font-size: 21.25px;
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        text-wrap: pretty;
        /* 한글은 어절 단위로 끊어야 "됩니 / 다." 같은 줄바꿈이 생기지 않는다 */
        word-break: keep-all;
        overflow-wrap: break-word;
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
      }
      a {
        color: #1e3d2b;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      h1,
      h2,
      h3 {
        margin: 0;
        line-height: 1.32;
        letter-spacing: -0.02em;
        text-wrap: balance;
      }
      p {
        margin: 0;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      :focus-visible {
        outline: 3.75px solid #1e3d2b;
        outline-offset: 3.75px;
        border-radius: 5px;
      }

      .sec {
        padding: 150px 0 0;
        position: relative;
      }
      .wrap {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 50px 150px;
      }
      .wave {
        line-height: 0;
      }
      /* 섹션 배경 위에 겹쳐 얹는 물결. 흐름에 두면 섹션 위 여백 아래로
         밀리므로, 흐름에서 빼내 섹션 맨 위에 붙인다 (.sec 이 relative) */
      /* top 을 1px 위로 올려 위 섹션과 겹친다. 0 이면 모바일처럼 배율이
         소수인 화면에서 경계가 픽셀 사이에 걸려, 그 틈으로 이 섹션의 짙은
         배경이 가로선처럼 비친다. 위 섹션 색과 같은 물결이라 겹쳐도 티가
         안 난다 */
      .wave-top {
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        line-height: 0;
      }
      .wave svg,
      .wave-top svg {
        display: block;
        width: 100%;
        height: var(--wave-h);
      }

      .bg-cream {
        background: #fafbf8;
      }
      .bg-sage {
        background: #e8efe6;
      }
      .bg-forest {
        background: #274c36;
        color: #fafbf8;
      }

      .h2 {
        font-size: 52.5px;
        font-weight: 800;
      }
      /* 섹션 제목과 그 아래 리드 문장은 가운데로 모은다. 히어로 제목은
         .wrap 이 아니라 .hero-lineup 안에 있어(왼쪽 카피 + 오른쪽 카드
         두 칸 배치) 여기에 걸리지 않는다 */
      .wrap > .h2,
      .wrap > .lead {
        text-align: center;
      }
      .wrap > .lead {
        margin-left: auto;
        margin-right: auto;
      }
      .lead {
        font-size: 23.75px;
        max-width: 725px;
        margin-top: 27.5px;
        color: #41504a;
      }
      .bg-forest .lead,
      .hero .lead {
        color: rgba(250, 251, 248, 0.78);
      }
      /* 강조색 forest 는 본문 글자색과 명도가 거의 같아 색만으로는 구분이
         안 된다. 글자 아래쪽에 옅은 띠를 깔아 눈에 걸리게 한다 */
      /* 강조어 밑띠는 제목이든 본문이든 노란 띠 한 가지로 통일한다 —
         같은 표시라야 읽는 사람이 같은 것으로 알아본다. 글자색만 면에 따라
         뒤집고(밝은 면 ink / 짙은 면 sage) 띠 색은 그대로 둔다. 띠는 장식이라
         글자 대비에는 영향이 없다 */
      .em {
        color: #1e3d2b;
        box-shadow: inset 0 -0.24em 0 rgba(217, 164, 65, 0.55);
      }
      .bg-forest .em,
      .hero .em {
        color: #e8efe6;
        /* 짙은 면에서는 같은 알파로도 띠가 묻힌다. 한 단 진하게 */
        box-shadow: inset 0 -0.24em 0 rgba(217, 164, 65, 0.62);
      }
      .ph {
        border-bottom: 1.875px dashed rgba(26, 38, 32, 0.35);
        padding-bottom: 1.25px;
      }

      [data-reveal] {
        opacity: 0;
        transform: translateY(10px);
        transition:
          opacity 0.4s ease,
          transform 0.4s ease;
      }
      [data-reveal].rv-in {
        opacity: 1;
        transform: none;
      }

      .hero {
        position: relative;
        padding-top: 0;
        /* 이 색이 보이는 곳은 아래 물결 띠 하나뿐이다 — 그라디언트(.hero-bg)
           와 언덕(.hero-hills)은 .hero-pin 안에 있어 물결까지 내려오지 않기
           때문이다. forest 를 그대로 쓰면 물결 윗선에 한 단 밝아지는 가로줄이
           생기므로, 언덕 아래끝과 같은 톤으로 맞춰 둔다 */
        background: #1c3826;
        color: #fafbf8;
      }
      /* 히어로 배경(그라디언트·언덕)을 담는 칸. 배경이 밖으로 새지 않게
         overflow 를 잘라 둔다 */
      .hero-pin {
        position: relative;
        overflow: hidden;
      }
      .hero-copy {
        display: flex;
        flex-direction: column;
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        /* 바탕은 .hero 의 forest 이고, 여기서는 그 위에 빛만 얹는다.
           오른쪽 위에서 들어온 sage 빛이 왼쪽 아래로 잦아든다 */
        background:
          radial-gradient(
            1125px 575px at 78% 8%,
            rgba(232, 239, 230, 0.17),
            transparent 62%
          ),
          radial-gradient(
            875px 650px at 8% 92%,
            rgba(232, 239, 230, 0.1),
            transparent 65%
          ),
          linear-gradient(168deg, #2f5a41 0%, #274c36 52%, #1f3f2a 100%);
      }
      .hero-hills {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: 0;
        opacity: 0.55;
      }
      .hero-hills svg {
        display: block;
        width: 100%;
        height: 300px;
      }
      /* 히어로에 놓는 잎 석 장. .hero 가 아니라 .hero-pin 안에 들어간다 —
         섹션에 붙이면 붙들려 있는 동안 잎만 스크롤을 따라 올라간다.
         핀의 overflow 가 밖으로 넘긴 부분을 잘라 주므로 가로 스크롤도
         생기지 않는다. 색이 파일에 박혀 있어(sage) 짙은 히어로 전용이다 */
      .hero-leaf {
        position: absolute;
        pointer-events: none;
      }
      /* 문구 왼쪽의 큰 잎. 세로 자리는 배지 아래끝(182px)과 CTA 줄
         윗끝(477px) 사이다. 그림은 사방 11.5% 가 빈 여백이라 잎 자체는
         189~455px 에 앉는다. 제목은 57.5px 굵은 글씨라 잎이 뒤로 지나가도
         5.95:1 이 남지만, 배지 글자(17.5px)는 뒤로 들어오는 순간 3.88:1 로
         본문 AA 를 깨고 고스트 버튼 테도 3:1 아래로 떨어진다 */
      .hero-leaf-lg {
        left: -60px;
        top: 151px;
        width: 340px;
        height: 340px;
        /* 이보다 진하면 제목 뒤가 얼룩으로 읽힌다 */
        opacity: 0.14;
      }
      /* 카드 오른쪽의 작은 잎 둘. 화면 오른끝이 아니라 카드 열 오른끝을
         기준으로 잡는다 — .lineup 이 530 + 70 + 700 이라 카드 오른끝이
         `50% + 650px` 에 온다. 폭이 변해도 카드와의 거리가 그대로다.
         옆에 글이 없으니 진하기를 큰 잎보다 한 단 올려 둔다 */
      .hero-leaf-sm {
        left: calc(50% + 671px);
        top: 140px;
        width: 80px;
        height: 80px;
        opacity: 0.2;
      }
      .hero-leaf-sprig {
        left: calc(50% + 675px);
        top: 470px;
        width: 66px;
        height: 66px;
        opacity: 0.2;
      }
      /* 히어로 본문 칸. .wrap 과 같은 폭·여백을 쓰되, 히어로에만 걸리는
         규칙을 따로 두려고 클래스를 나눴다 */
      .lineup-copy .badge {
        margin-bottom: 27.5px;
      }
      .hero-lineup .h2 {
        font-size: 57.5px;
      }
      .hero-lineup {
        position: relative;
        max-width: 1400px;
        margin: 0 auto;
        padding: 120px 50px 135px;
      }

      /* 상단 내비게이션 — 로고 / 섹션 링크 / 전화·CTA */
      .nav {
        position: relative;
        z-index: 5;
      }
      .nav-in {
        max-width: 1400px;
        margin: 0 auto;
        padding: 37.5px 50px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
      }
      .nav-logo {
        display: inline-flex;
        align-items: center;
        gap: 11.25px;
        flex: none;
        font-size: 22.5px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #fafbf8;
      }
      .nav-logo:hover {
        color: #fafbf8;
      }
      .nav-logo svg {
        width: 30px;
        height: 30px;
        color: #e8efe6;
      }
      .nav-menu {
        display: flex;
        align-items: center;
        gap: 37.5px;
      }
      .nav-menu a {
        font-size: 19.375px;
        font-weight: 500;
        color: rgba(250, 251, 248, 0.76);
      }
      .nav-menu a:hover {
        color: #fafbf8;
      }
      .nav-act {
        display: flex;
        align-items: center;
        gap: 22.5px;
        flex: none;
      }
      .nav-tel {
        display: inline-flex;
        align-items: center;
        gap: 8.75px;
        font-size: 19.375px;
        font-weight: 700;
        color: #e8efe6;
      }
      .nav-tel:hover {
        color: #fafbf8;
      }
      .nav-tel svg {
        width: 20px;
        height: 20px;
      }
      .btn-sm {
        padding: 13.75px 25px;
        font-size: 18.75px;
        border-radius: 12.5px;
      }

      .badge {
        display: inline-flex;
        align-self: center;
        align-items: center;
        gap: 11.25px;
        border: 1.25px solid rgba(232, 239, 230, 0.5);
        border-radius: 1248.75px;
        padding: 10px 22.5px;
        font-size: 17.5px;
        font-weight: 500;
        color: #e8efe6;
        background: rgba(232, 239, 230, 0.13);
      }
      .badge .dot {
        width: 8.75px;
        height: 8.75px;
        border-radius: 50%;
        background: #e8efe6;
        flex: none;
      }
      .hero-sub {
        margin: 22.5px auto 0;
        font-size: 22.5px;
        max-width: 700px;
        color: rgba(250, 251, 248, 0.76);
      }
      .cta-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 17.5px;
        margin-top: 35px;
        flex-wrap: wrap;
      }
      .btn-ghost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 11.25px;
        min-height: 72.5px;
        padding: 0 37.5px;
        border-radius: 15px;
        background: transparent;
        border: 1.25px solid rgba(232, 239, 230, 0.55);
        color: #e8efe6;
        font-size: 21.25px;
        font-weight: 700;
        transition: border-color 0.2s ease;
      }
      .btn-ghost:hover {
        border-color: #e8efe6;
        color: #fafbf8;
      }
      .btn-ghost svg {
        width: 21.25px;
        height: 21.25px;
      }
      .hero .cta-row .btn {
        min-height: 72.5px;
        padding: 0 37.5px;
      }

      /* 히어로 비주얼 — 가운데 관제 화면 위로 작은 카드가 떠 있는 구성 */
      .hero-vis {
        position: relative;
        width: 100%;
        max-width: 1300px;
        margin: 37.5px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
      }
      /* 관제 화면 좌우 이미지 자리 — 파일을 넣으면 여백 없이 바로 붙는다.
         파일이 없으면 폭까지 0이 되어 빈 공간이 남지 않는다 */
      .hero-side {
        flex: none;
        width: auto;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        margin: 0;
      }
      .hslot {
        margin: 0;
        width: 195px;
        border-radius: 17.5px;
        overflow: hidden;
        background: #ffffff;
        transition:
          transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1),
          box-shadow 0.3s ease;
      }
      .hslot:hover {
        transform: scale(1.06);
        box-shadow: 0 20px 42.5px rgba(9, 22, 14, 0.38);
      }
      .hslot img {
        display: block;
        width: 100%;
        height: auto;
      }
      .hslot figcaption {
        display: none;
      }
      /* 파일이 아직 없으면 자리까지 통째로 접는다 */
      .hslot.is-empty {
        display: none;
      }
      .hslot.is-empty img {
        display: none;
      }
      .hslot.is-empty figcaption {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7.5px;
        height: 100%;
        padding: 12.5px;
        text-align: center;
        font-size: 16.25px;
        font-weight: 700;
        color: rgba(250, 251, 248, 0.8);
      }
      .hslot.is-empty code {
        font-size: 13.125px;
        font-weight: 500;
        line-height: 1.5;
        color: rgba(250, 251, 248, 0.5);
        word-break: break-all;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12.5px;
        background: #1e3d2b;
        color: #fafbf8;
        font-size: 21.25px;
        font-weight: 700;
        padding: 21.25px 40px;
        border-radius: 15px;
        border: 0;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.2s ease;
      }
      .btn:hover {
        background: #16301f;
        color: #fafbf8;
      }
      /* 짙은 면 위에서는 forest 버튼이 배경에 묻힌다. 명암을 뒤집는다 */
      .hero .btn,
      .bg-forest .btn {
        background: #e8efe6;
        color: #1e3d2b;
      }
      .hero .btn:hover,
      .bg-forest .btn:hover {
        background: #fafbf8;
        color: #1e3d2b;
      }
      .btn svg {
        width: 22.5px;
        height: 22.5px;
      }
      .trust {
        display: flex;
        justify-content: center;
        gap: 37.5px;
        margin-top: 30px;
        flex-wrap: wrap;
      }
      .trust li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18.75px;
        font-weight: 500;
        color: rgba(250, 251, 248, 0.82);
      }
      .trust svg {
        width: 20px;
        height: 20px;
        flex: none;
        color: #e8efe6;
      }

      /* 실제 관제 화면 스크린샷 */
      .shot {
        position: relative;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        aspect-ratio: 1920 / 911;
        border-radius: 20px;
        overflow: hidden;
        border: 1.25px solid rgba(30, 61, 43, 0.14);
        background: #e8efe6;
        box-shadow: 0 30px 75px rgba(30, 61, 43, 0.14);
        transition:
          transform 0.32s cubic-bezier(0.22, 0.7, 0.3, 1),
          box-shadow 0.32s ease;
      }
      .shot:hover {
        transform: scale(1.035);
        box-shadow: 0 40px 90px rgba(30, 61, 43, 0.2);
        z-index: 2;
      }
      .shot img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }

      /* 화면 속 신호 — 운행 중인 차량 위로 원이 퍼진다.
         .shot 의 가로세로비가 이미지와 같아서 viewBox 좌표가 그대로 맞는다 */
      .shot-fx {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      .shot-fx .ping {
        fill: none;
        stroke-width: 4;
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
        animation: ping 2.6s cubic-bezier(0.2, 0.55, 0.3, 1) infinite;
      }
      .shot-fx .fx-amber .ping {
        stroke: #f0862a;
      }
      .shot-fx .fx-blue .ping {
        stroke: #1d6fe0;
      }
      .shot-fx .pa {
        animation-delay: 0s;
      }
      .shot-fx .pb {
        animation-delay: 1.3s;
      }
      .shot-fx .pc {
        animation-delay: 0.45s;
      }
      .shot-fx .pd {
        animation-delay: 1.75s;
      }
      .shot-fx .pe {
        animation-delay: 0.9s;
      }
      .shot-fx .pf {
        animation-delay: 2.2s;
      }
      @keyframes ping {
        0% {
          transform: scale(0.56);
          opacity: 0;
        }
        12% {
          opacity: 0.8;
        }
        100% {
          transform: scale(1);
          opacity: 0;
        }
      }

      /* 데스크톱: 한 화면 높이를 바닥으로만 쓰고, 관제 화면이 커서
         첫 화면을 넘어가면 그대로 넘어가게 둔다 */
      @media (min-width: 961px) {
        .hero .wave svg {
          height: 60px;
        }
      }

      /* 히어로를 화면보다 길게 잡아 두고(.hero-stage) 그 안쪽(.hero-pin)을
         붙들면, 그 차이(runway)만큼 스크롤하는 동안 히어로는 제자리에
         머문 채 카드만 위로 올라간다. 두 열이 서로 다른 거리를 움직여
         엇갈리게 오르고, 넘친 부분은 .hero-pin 의 overflow 가 잘라 낸다.
         --stage-h / --sa / --sb 는 스크립트가 재서 넣는다 */
      @media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
        .hero-stage.is-live {
          height: var(--stage-h);
        }
        .hero-stage.is-live .hero-pin {
          position: sticky;
          top: 0;
          height: calc(100svh - var(--bar-h));
        }
        /* 이미 통째로 붙들려 있으니 왼쪽 칸은 따로 붙을 필요가 없다 */
        .hero-stage.is-live .lineup-copy {
          position: static;
        }
        .hero-stage.is-live .lcard {
          will-change: transform;
          /* .lcard 는 [data-reveal] 이라 transform 에 0.4s 전이가 걸려 있다.
             스크롤에 바로 붙어야 하는 움직임이므로 그 전이만 끊는다 */
          transition: opacity 0.4s ease;
        }
        .hero-stage.is-live .lcard:nth-child(2n + 1) {
          transform: translate3d(0, var(--sa, 0px), 0);
        }
        .hero-stage.is-live .lcard:nth-child(2n) {
          transform: translate3d(0, calc(110px + var(--sb, 0px)), 0);
        }
      }

      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(17.5px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .seq {
        opacity: 0;
        animation: rise 0.6s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
      }
      .s1 {
        animation-delay: 0.05s;
      }
      .s2 {
        animation-delay: 0.18s;
      }
      .s3 {
        animation-delay: 0.3s;
      }
      .s4 {
        animation-delay: 0.42s;
      }
      .s5 {
        animation-delay: 0.54s;
      }
      .s6 {
        animation-delay: 0.66s;
      }
      .s7 {
        animation-delay: 0.78s;
      }

      .pain {
        margin-top: 65px;
        max-width: 950px;
        border-top: 1.25px solid rgba(26, 38, 32, 0.12);
      }
      .pain li {
        display: flex;
        gap: 25px;
        align-items: flex-start;
        padding: 30px 5px;
        border-bottom: 1.25px solid rgba(26, 38, 32, 0.12);
      }
      .pain .no {
        font-size: 17.5px;
        font-weight: 800;
        color: #1e3d2b;
        padding-top: 7.5px;
        flex: none;
        width: 32.5px;
      }
      .pain b {
        display: block;
        font-size: 25px;
        font-weight: 700;
      }
      .pain p {
        margin-top: 7.5px;
        font-size: 20.625px;
        color: #4c5b54;
        max-width: 700px;
      }
      .warn {
        margin-top: 50px;
        font-size: 25px;
        font-weight: 700;
        max-width: 825px;
      }
      /* 문장 하나가 한 줄이다. 넓은 화면에서는 문장 중간에서 꺾이지 않게
         폭 제한을 풀고, 좁아지면 문장 안에서만 고르게 나눈다 */
      .warn-line {
        display: block;
        text-wrap: balance;
      }
      @media (min-width: 1200px) {
        #risk .warn {
          max-width: none;
        }
        .warn-line {
          white-space: nowrap;
        }
      }
      /* 과태료 섹션만 가운데 정렬. .lead 와 .warn 은 max-width 가 걸려 있어
         좌우 여백을 auto 로 풀어 줘야 글줄까지 가운데로 온다 */
      #risk .wrap {
        text-align: center;
      }
      #risk .lead,
      #risk .warn {
        margin-left: auto;
        margin-right: auto;
      }
      /* 과태료 문구의 근거 조항. 상자를 두르면 경고 배너처럼 튀므로
         .cost-note 처럼 가는 선 하나로 갈라 각주로 둔다 */
      .law-ref {
        margin: 55px auto 0;
        max-width: 825px;
        padding-top: 30px;
        border-top: 1.25px solid rgba(30, 61, 43, 0.14);
        font-size: 18.75px;
        color: #4c5b54;
      }
      /* 기본은 접어 두고 라벨만 보인다. 펼침 표시는 .qa 와 같은 갈매기표 */
      .law-ref-tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 16.25px;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #1e3d2b;
        cursor: pointer;
        list-style: none;
      }
      /* 이모지는 글꼴마다 기준선이 달라 혼자 떠 보이므로 줄 높이를 묶는다 */
      .law-ref-ico {
        font-size: 1.05em;
        line-height: 1;
      }
      .law-ref-note {
        font-weight: 600;
        color: #4c5b54;
      }
      .law-ref-tag::-webkit-details-marker {
        display: none;
      }
      .law-ref-tag::after {
        content: "";
        width: 8.75px;
        height: 8.75px;
        margin-top: -5px;
        border-right: 2px solid rgba(30, 61, 43, 0.4);
        border-bottom: 2px solid rgba(30, 61, 43, 0.4);
        transform: rotate(45deg);
        transition:
          transform 0.25s ease,
          margin-top 0.25s ease;
      }
      .law-ref[open] .law-ref-tag::after {
        margin-top: 5px;
        transform: rotate(-135deg);
      }
      @media (hover: hover) {
        .law-ref-tag:hover::after {
          border-color: #1e3d2b;
        }
      }
      /* 조문 원문. 섹션은 가운데 정렬이지만 두세 줄 넘는 법조문은
         왼쪽 정렬이어야 읽힌다 */
      .law-ref-body {
        margin: 17.5px 0 0;
        text-align: left;
        line-height: 1.75;
      }
      .law-ref-src {
        margin: 17.5px 0 0;
        font-size: 15px;
        color: rgba(26, 38, 32, 0.5);
      }
      /* 한 상자에 근거가 여럿이라, 근거마다 법령·조항을 머리말로 앞에 둔다.
         본문보다 짙고 굵게 해 어느 법의 내용인지 먼저 읽히게 한다 */
      .law-ref-head {
        margin: 22.5px 0 0;
        text-align: left;
        font-size: 16.25px;
        font-weight: 700;
        color: #1a2620;
      }
      .law-ref-head + .law-ref-body {
        margin-top: 6px;
      }
      /* 앞 근거의 출처 뒤로 간격을 벌리고 옅은 선을 그어 두 근거를 나눈다 */
      .law-ref-src + .law-ref-head {
        margin-top: 26px;
        padding-top: 22.5px;
        border-top: 1px dashed rgba(30, 61, 43, 0.18);
      }
      .law-ref-src a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 3.75px;
      }
      .law-ref-src a:hover {
        color: #1e3d2b;
      }
      .warn .amber {
        color: #1a2620;
        background: linear-gradient(transparent 58%, #d9a441 58%);
        padding: 0 3.75px;
      }
      .closing {
        margin-top: 55px;
        font-size: 32.5px;
        font-weight: 800;
        line-height: 1.55;
        max-width: 800px;
        padding-left: 27.5px;
        border-left: 5px solid #1e3d2b;
      }

      .flow-wrap {
        margin-top: 70px;
        background: #fafbf8;
        border-radius: 27.5px;
        padding: 55px 40px 42.5px;
        border: 1.25px solid rgba(30, 61, 43, 0.1);
      }
      .flow {
        display: block;
        width: 100%;
        height: auto;
      }
      .flow .node {
        opacity: 0;
        transform: scale(0.94);
        transform-box: fill-box;
        transform-origin: center;
      }
      .flow.on .node {
        animation: pop 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
      }
      .flow.on .n1 {
        animation-delay: 0.05s;
      }
      .flow.on .n3 {
        animation-delay: 0.18s;
      }
      .flow.on .n2 {
        animation-delay: 0.52s;
      }
      .flow.on .n4 {
        animation-delay: 0.8s;
      }
      .flow.on .n5 {
        animation-delay: 1.12s;
      }
      .flow.on .n6 {
        animation-delay: 1.2s;
      }

      /* 노드 그림 — 파일이 있으면 뜨고, 없으면 아래 손그림 아이콘이 그대로
         남는다. assets/images/ 에 파일만 넣으면 켜진다 */
      .flow .pic {
        opacity: 0;
      }
      .flow .node.has-img .pic {
        opacity: 1;
      }
      .flow .node.has-img .ico {
        display: none;
      }
      @keyframes pop {
        to {
          opacity: 1;
          transform: none;
        }
      }
      .flow.on .l1 {
        --d: 0.3s;
      }
      .flow.on .l4 {
        --d: 0.44s;
      }
      .flow.on .l3 {
        --d: 0.95s;
      }
      .flow.on .l5 {
        --d: 1.02s;
      }
      .flow.on .l2 {
        --d: 1.1s;
      }

      /* 노드를 잇는 파선 — 계속 흘러 전송이 멈추지 않고 이어진다는 것을
         보여준다. 예전에는 이 아래에 옅은 레일(.link)이 한 겹 더 깔려
         있었는데, 선이 두 겹으로 보여 걷어냈다. 등장 지연(--d)은 그때
         레일이 그려지던 차례를 그대로 물려받는다 */
      .flow .stream {
        opacity: 0;
        stroke-dasharray: 6 16;
      }
      .flow.on .stream {
        animation:
          fade 0.45s ease forwards,
          dash 1.15s linear infinite;
        animation-delay: calc(var(--d, 0s) + 0.46s);
      }
      @keyframes dash {
        to {
          stroke-dashoffset: -22;
        }
      }
      .flow .hub {
        opacity: 0;
      }
      .flow.on .hub {
        animation: fade 0.3s ease 0.84s forwards;
      }
      .flow .tip {
        opacity: 0;
      }
      .flow.on .tip {
        animation: fade 0.3s ease forwards;
      }
      .flow.on .t1 {
        animation-delay: 0.74s;
      }
      .flow.on .t4 {
        animation-delay: 0.88s;
      }
      .flow.on .t3 {
        animation-delay: 1.39s;
      }
      .flow.on .t5 {
        animation-delay: 1.46s;
      }
      .flow.on .t2 {
        animation-delay: 1.54s;
      }
      @keyframes fade {
        to {
          opacity: 1;
        }
      }
      .flow .done {
        opacity: 0;
        transform: scale(0.7);
        transform-box: fill-box;
        transform-origin: center;
      }
      .flow.on .done {
        animation: pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) 1.9s forwards;
      }
      .flow-note {
        margin-top: 32.5px;
        font-size: 18.75px;
        color: #4c5b54;
        text-align: center;
      }
      .flow-v {
        display: none;
      }
      /* 제목부터 흐름도 패널 끝까지 한 화면에 들어오게 한다. 흐름도는 폭을
         따라 커지는 그림이라, 화면 높이에서 제목·리드·패널 여백·하단 고정
         바(--hdr-h)를 뺀 높이(약 400px)를 넘지 않도록 폭을 거꾸로 묶는다.
         그림만 줄이면 패널 양옆이 비므로 패널 폭을 묶는다 — 80px 은 패널
         좌우 padding 합이다. 1024/510 은 .flow-h 의 viewBox 비율이다 */
      @media (min-width: 961px) {
        #how .flow-wrap {
          width: min(100%, calc((100svh - 400px) * 1024 / 510 + 80px));
          margin: 40px auto 0;
          padding: 32px 40px 30px;
        }
      }

      /* ---------- 자주 묻는 질문 (답변은 펴 둔 채로 시작한다) ---------- */
      /* 접었다 펴는 데 스크립트를 쓰지 않는다. details/summary 는 키보드
         조작과 화면낭독기 대응이 이미 붙어 있고, 스크립트가 막힌 환경에서도
         그대로 열린다. 여섯 항목 모두 마크업에 open 을 달아 두어 처음부터
         답이 보이고, 접는 것은 읽는 사람이 고른다 */
      /* 상자에 담지 않고 가로줄로만 나눈다. 섹션 면이 그대로 배경이 되므로
         질문 줄이 목록처럼 읽히고, 옆 섹션의 카드들과 처리가 겹치지 않는다 */
      /* 밖으로 흘린 잎을 자른다. 없으면 잎이 위 섹션까지 넘어가고
         오른쪽으로 흘린 만큼 가로 스크롤이 생긴다. #faq 안에는 밖으로
         나가야 하는 것이 없어 잘라도 잃는 것이 없다 */
      #faq {
        overflow: hidden;
      }
      /* 본문을 잎 위로 올린다 (#reviews·#steps 와 같은 짝) */
      #faq .wrap {
        position: relative;
        z-index: 1;
      }
      /* 제목이 "FAQ" 한 단어이고 리드까지 가운데 정렬이라 위쪽 좌우가
         통째로 비어 있다 — 1440px 에서 한쪽에 350×347 이다. 그 빈 자리에
         잎 두 장을 얹어 제목을 사이에 둔다. 후기 쪽과 짝이 다르다(저기는
         왼쪽 위 잔가지 + 오른쪽 아래 잎). 잘라 낸 그림이라 아래 값이 곧
         잎의 자리다 */
      .faq-leaf {
        position: absolute;
        z-index: 0;
        opacity: 0.1;
        pointer-events: none;
      }
      /* 위아래를 뒤집어 줄기가 왼쪽 위 모서리를 향하고 잎이 안쪽으로
         드리운다 */
      .faq-leaf-tl {
        left: -50px;
        top: -80px;
        width: 166px;
        height: 300px;
        transform: scaleY(-1);
      }
      /* 180도 돌려 줄기가 오른쪽 위를 향하고 잎이 왼쪽 아래로 드리운다 */
      .faq-leaf-tr {
        right: -60px;
        top: -70px;
        width: 260px;
        height: 258px;
        transform: rotate(180deg);
      }
      .qas {
        margin-top: 60px;
        display: grid;
        /* 두 줄로 나눠 좌우 세 개씩 앉힌다. 줄 단위로 채우므로 화면에
           보이는 차례가 마크업 차례와 같다 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 칸을 같은 높이로 늘려야 좌우 구분선이 한 줄로 맞는다. 상자를
           걷어냈으므로 한쪽만 펼쳤을 때 남는 자리는 빈 여백일 뿐이다 */
        align-items: stretch;
        column-gap: 70px;
        color: #1a2620;
      }
      /* 줄 사이는 선 하나로만 나눈다. 첫 줄 위에도 선을 얹어 목록의
         위쪽 끝을 닫는다 */
      .qa {
        border-bottom: 1.25px solid rgba(30, 61, 43, 0.14);
      }
      .qa:nth-child(-n + 2) {
        border-top: 1.25px solid rgba(30, 61, 43, 0.14);
      }
      .qa summary {
        display: grid;
        /* 표식 / 질문 / 갈매기표 */
        grid-template-columns: 32.5px 1fr 20px;
        gap: 17.5px;
        align-items: start;
        padding: 32.5px 5px;
        cursor: pointer;
        /* 기본 삼각형 표식을 지운다. 웹킷은 표식이 별도 의사요소라
           아래 규칙까지 있어야 양쪽에서 다 사라진다 */
        list-style: none;
      }
      .qa summary::-webkit-details-marker {
        display: none;
      }
      /* 질문 앞 표식. 면을 칠하지 않고 글자만 남겨 줄이 가벼워 보이게 한다.
         Q 는 섹션 이름을 붙이는 영문 라벨이 아니라 질문 줄을 가리키는
         표식이라 그대로 쓴다 */
      .qa summary::before {
        content: "Q";
        font-size: 26.25px;
        font-weight: 800;
        line-height: 1.45;
        color: #4a7c59;
        text-align: center;
      }
      .qa summary h3 {
        font-size: 23.75px;
        font-weight: 700;
        line-height: 1.55;
      }
      .qa[open] summary h3 {
        color: #1e3d2b;
      }
      /* 아래를 향한 갈매기표. 펼쳐지면 위로 뒤집어 상태를 알린다 */
      .qa summary::after {
        content: "";
        width: 11.25px;
        height: 11.25px;
        margin-top: 12.5px;
        justify-self: end;
        border-right: 2.25px solid rgba(30, 61, 43, 0.4);
        border-bottom: 2.25px solid rgba(30, 61, 43, 0.4);
        transform: rotate(45deg);
        transition: transform 0.25s ease;
      }
      .qa[open] summary::after {
        margin-top: 17.5px;
        transform: rotate(-135deg);
      }
      .qa p {
        /* 답변 글줄을 질문 글줄과 왼쪽 끝에서 맞춘다 (표식 32.5 + 간격 17.5) */
        margin: -7.5px 0 32.5px 55px;
        padding-right: 37.5px;
        font-size: 20.625px;
        color: #4c5b54;
      }

      /* ---------- 설치 구성 (왼쪽 카피 고정 + 오른쪽 엇갈린 카드) ---------- */
      .lineup {
        display: grid;
        grid-template-columns: minmax(0, 530px) minmax(0, 1fr);
        gap: 70px;
        align-items: start;
        margin-top: 10px;
      }
      .lineup-copy {
        position: sticky;
        top: 120px;
      }
      .lineup-copy .cta-row {
        justify-content: flex-start;
        margin-top: 40px;
      }
      /* 좁은 칸에서는 세 개를 가로로 늘어놓을 수 없다. 세로로 쌓는다 */
      .lineup-copy .trust {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 15px;
        margin-top: 35px;
      }
      .lineup-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 30px;
        /* 줄마다 높이를 같게 잡아, 글줄 수가 다른 카드끼리도 키가 맞는다 */
        grid-auto-rows: 1fr;
        align-items: stretch;
      }
      /* 오른쪽 열을 내려 카드가 서로 엇갈리게 놓인다. margin 이 아니라
         transform 을 쓰는 것은 줄 높이를 건드리지 않기 위해서다 */
      .lcard:nth-child(2n) {
        transform: translateY(110px);
      }
      .lcard {
        display: flex;
        flex-direction: column;
        min-height: 395px;
        padding: 37.5px 40px 0;
        background: #fafbf8;
        border-radius: 30px;
        /* 카드 테두리는 카드보다 밝은 sage 로 두른다 — 짙은 히어로 위에서
           밝은 테가 먼저 눈에 걸려 넉 장이 한 벌로 읽힌다. box-sizing 이
           border-box 라 테두리를 더해도 카드 치수는 그대로다 */
        border: 1.25px solid #e8efe6;
        /* 그림자는 후기 말풍선(.rev-bub)과 같은 어법이다 — 흐림 0 으로
           오른쪽 아래에 어긋나게 깐 단단한 턱 한 겹. 말풍선은 꼬리까지
           한 덩어리로 묶으려고 drop-shadow 를 쓰지만, 카드는 모서리가
           둥근 네모 하나뿐이라 box-shadow 로 족하다. 색은 히어로
           배경(forest)보다 한 단 짙어야 그늘로 읽힌다 */
        box-shadow: 5px 5px 0 rgba(15, 36, 24, 0.5);
        overflow: hidden;
      }
      .lcard h3 {
        color: #1a2620;
        font-size: 31.25px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .lcard p {
        margin-top: 15px;
        font-size: 19.375px;
        color: #4c5b54;
      }
      /* 그림은 카드 폭을 꽉 채우지 않고 조금 줄여 가운데 바닥에 둔다 —
         가득 채우면 그림이 글보다 먼저 눈에 걸린다 */
      .lcard .art {
        width: 90%;
        margin: auto auto 20px;
      }
      .lcard .art svg {
        display: block;
        width: 100%;
        height: auto;
      }
      /* 카드 그림은 파일이 있으면 그것이 뜨고, 없으면 아래 인라인 SVG 가
         그대로 남는다 — 구성도 노드(.flow .node.has-img)와 같은 방식이다.
         .has-img 는 onload 로 붙으므로 파일을 지우거나 이름을 바꿔도
         카드가 빈 채로 남지 않고 손그림으로 되돌아간다 */
      .lcard .art .pic {
        display: none;
        width: 100%;
        /* width/height 속성은 표현 힌트로 height 까지 잡아 버린다. auto 로
           풀어 줘야 아래 aspect-ratio 가 상자를 정한다 */
        height: auto;
        /* SVG 와 같은 상자(viewBox 320×210)를 쓴다. 카드 넉 장이 첫 화면에
           들어가는 높이 예산이 이 비율로 잡혀 있어, 그림을 갈아 끼워도
           카드 키가 달라지지 않는다 */
        aspect-ratio: 320 / 210;
        /* 그림 파일(800×525)을 이미 이 비율로 잘라 두어서 여기서 잘릴 것은
           없다 — cover 는 잘라 내려고가 아니라, 비율이 어긋난 그림으로 갈아
           끼웠을 때 상자를 비우지 않고 채우게 하려고 남겨 둔다 */
        object-fit: cover;
      }
      .lcard.has-img .art .pic {
        display: block;
      }
      .lcard.has-img .art svg {
        display: none;
      }
      /* 위치관제 그림만 잉크가 아래까지 내려와 있다 — 다른 셋은 파일
         아래쪽 10% 가 비어 있는데 이 그림은 6% 뿐이라(치수도 혼자
         800×533 이고 나머지 셋은 800×525 다), 그냥 두면 그림이 카드 바닥에
         붙는다. 그래서 상자는 다른 카드와 같게 두고, 그림만 조금 키워
         바닥에 맞춰 놓은 뒤 위로 넘치는 만큼을 잘라 낸다 — 잘리는 것은
         그림 위쪽 빈 여백(13%) 안쪽이라 그림은 다 보이고, 아래가 18px 쯤
         비어 옆 카드(22px)와 눈높이가 맞는다 */
      .lcard-map .art {
        position: relative;
        /* 그림이 흐름에서 빠지므로 상자 높이를 다른 카드와 같게 잡아 준다 */
        aspect-ratio: 320 / 210;
        overflow: hidden;
      }
      .lcard-map .art .pic {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* 옆 카드와 그림 크기가 맞는 지점. 넘치는 7% 는 그림 위쪽 빈 여백이다 */
        height: 107%;
        object-fit: contain;
      }

      /* ---------- 사용 후기 (대화 말풍선) ---------- */
      #reviews {
        position: relative;
        /* 말풍선이 좌우에서 밀려 들어오므로, 없으면 시작 위치가 섹션 밖으로
           삐져나와 가로 스크롤이 생긴다 */
        overflow: hidden;
      }
      /* 그림을 흐름 밖에 두었으니 본문을 그 위로 올린다 (#steps 와 같은 짝) */
      #reviews .wrap {
        position: relative;
        z-index: 1;
      }
      /* 두 귀퉁이의 잎. 히어로 잎과 같은 그림이지만 **파일이 다르다** —
         히어로 것은 짙은 면용이라 sage 로 칠해져 있어 cream 위에서는
         1.06:1 로 사라진다. `-forest` 판은 같은 그림의 알파만 두고 RGB 를
         forest 로 덮은 것이고, **빈 여백을 잘라 내 상자가 곧 잎이다**(히어로
         쪽 원본은 사방에 여백이 있어 상자와 잎이 어긋난다). 그림을 마스크로
         삼아 CSS 에서 색을 입히는 길은 막혀 있다 —
         **크롬이 webp 를 마스크 이미지로 받지 않는다**(그라디언트·SVG 는
         된다). PNG 로 바꾸면 되지만 같은 그림이 307KB 가 된다 */
      .rev-leaf {
        position: absolute;
        z-index: 0;
        /* 큰 면이라 히어로 잎(0.14)보다 옅게 둔다 */
        opacity: 0.1;
        pointer-events: none;
      }
      /* 제목·리드가 가운데 정렬이라 왼쪽 귀퉁이가 첫 후기(367px)까지
         통째로 비어 있다. 여백 띠에만 가두면 잎이 손톱만큼만 보이므로
         그 빈 자리를 쓴다. 잘라 낸 그림이라 이 값이 곧 잎의 자리다 —
         -70~250px(가로) · -10~307px(세로) */
      .rev-leaf-tl {
        left: -70px;
        top: -10px;
        width: 320px;
        height: 317px;
      }
      /* 아래 것은 좌우를 뒤집어 두 귀퉁이가 마주 보게 한다. 셋째 후기가
         왼쪽에 놓여 오른쪽 아래가 비는 자리다. bottom 은 물결(100px) 위로
         띄운 값이다 — 물결이 나중에 그려지는 불투명한 면이라 겹치면
         잎이 잘린다 */
      .rev-leaf-br {
        right: -50px;
        bottom: 170px;
        width: 178px;
        height: 321px;
        transform: scaleX(-1);
      }

      .revs {
        margin-top: 70px;
        display: grid;
        gap: 87.5px;
      }
      .rev {
        display: flex;
        /* 인물 바닥을 말풍선 바닥에 맞춘다 */
        align-items: flex-end;
        gap: 20px;
        max-width: 925px;
      }
      .rev-l {
        margin-right: auto;
      }
      .rev-r {
        margin-left: auto;
        flex-direction: row-reverse;
      }
      /* 인물 그림은 배경이 투명하게 잘려 있다. 원형 바탕을 깔지 않고
         그림만 그대로 놓는다 */
      .rev-av {
        flex: none;
        width: 187.5px;
        height: 187.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 말풍선 위로 겹쳐 올린다 */
        position: relative;
        z-index: 2;
      }
      /* 말풍선 쪽으로 당겨 겹치게 한다. .rev-r 은 행이 뒤집혀 있어
         당기는 방향도 반대다. 너무 깊이 물리면 인물이 글줄 첫 글자 위로
         올라와 문장이 묻히므로, 글이 시작되는 자리는 비워 둔다 */
      .rev-l .rev-av {
        margin-right: -40px;
      }
      .rev-r .rev-av {
        margin-left: -40px;
      }
      .rev-av img {
        width: 100%;
        height: 100%;
        /* cover 로 자르면 인물이 잘린다. 통째로 보여 준다 */
        object-fit: contain;
        display: block;
        /* 배경이 투명하게 잘린 그림이라 box-shadow 를 쓰면 그림이 아니라
           네모난 상자에 그림자가 진다. 알파를 따라가는 drop-shadow 라야
           인물 윤곽대로 떨어진다 */
        /* 흐림 0 — 번짐 없이 윤곽 그대로, 오른쪽으로 어긋나게 깐다 */
        filter: drop-shadow(5px 5px 0 rgba(30, 61, 43, 0.3));
      }
      .rev-bub {
        position: relative;
        /* cream 섹션 위에 놓이므로 흰 면으로는 경계가 보이지 않는다.
           한 단 짙은 sage 로 깔아 말풍선 모양이 드러나게 한다 */
        background: #e8efe6;
        border-radius: 20px;
        padding: 25px 30px;
        /* 꼬리(::before)까지 한 덩어리로 그림자를 두려고 box-shadow 가 아니라
           drop-shadow 를 쓴다. box-shadow 는 말풍선 네모만 따라가서 꼬리만
           그림자 없이 튀어나온 것처럼 보인다 */
        /* 흐림 0 — 오른쪽 아래로 어긋난 단단한 턱 한 겹 */
        filter: drop-shadow(5px 5px 0 rgba(30, 61, 43, 0.2));
      }
      /* 꼬리는 정사각형을 45도 돌려 말풍선 뒤로 살짝 내민다 */
      .rev-bub::before {
        content: "";
        position: absolute;
        /* 말풍선 세로 한가운데. 뿔 크기의 절반만큼 끌어올린다 */
        top: calc(50% - 8.75px);
        width: 17.5px;
        height: 17.5px;
        background: #e8efe6;
        border-radius: 3.75px;
        transform: rotate(45deg);
      }
      .rev-l .rev-bub::before {
        left: -6.25px;
      }
      .rev-r .rev-bub::before {
        right: -6.25px;
      }
      .rev-t {
        display: block;
        margin-bottom: 12.5px;
        font-size: 26.25px;
        font-weight: 800;
        line-height: 1.45;
        color: #1e3d2b;
        letter-spacing: -0.01em;
      }
      .rev-bub p {
        font-size: 21.25px;
        line-height: 1.75;
      }
      .rev-who {
        display: block;
        margin-top: 15px;
        font-size: 17.5px;
        font-weight: 700;
        color: #1e3d2b;
        /* 말한 사람의 이름이므로 글 끝에 서명처럼 붙인다 */
        text-align: right;
      }
      .rev-note {
        margin-top: 45px;
        font-size: 18.125px;
        color: #5b6a63;
      }

      /* 후기는 대화이므로 말풍선이 말한 사람 쪽에서 밀려나온다 — 꼬리가
         가리키는 방향과 같아야 "이 사람이 한 말"로 읽힌다. 셋이 좌·우·좌로
         번갈아 놓여 있어 스크롤하면 방향도 번갈아 든다.
         페이드는 .rev 의 [data-reveal] 이 맡고 여기서는 움직임만 얹는다 */
      .rev-l .rev-bub {
        transform: translateX(-24px);
      }
      .rev-r .rev-bub {
        transform: translateX(24px);
      }
      /* 인물은 아래에서 올라오며 말풍선 쪽으로 기운다. 시작을 반대쪽으로
         살짝 젖혀 두어(-3도) 도착점(+4도)까지 7도를 건너오게 했다 —
         반대에서 출발해야 기울어지는 동작 자체가 눈에 걸린다.
         곡선이 말풍선과 같다 — 도는 각이 7도로 넓어져서, 예전에 쓰던
         급한 감속(quint)으로는 앞에서 확 돌고 끝에서 기는 것처럼 보인다 */
      .rev-av {
        transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .rev-l .rev-av {
        transform: translateY(14px) rotate(-3deg);
      }
      .rev-r .rev-av {
        transform: translateY(14px) rotate(3deg);
      }
      /* 말풍선은 인물과 같은 곡선을 쓰되 조금 더 길다(0.8s). 아래 지연
         0.12s 까지 더하면 인물은 0.75s 에, 말풍선은 0.92s 에 멈춘다 —
         사람이 먼저 서고 말이 뒤따르는 순서가 여기서 나온다 */
      .rev-bub {
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      /* 기운 방향이 꼬리가 가리키는 방향과 같다 — 왼쪽 인물은 오른쪽으로,
         오른쪽 인물은 왼쪽으로. 4도면 187.5px 상자의 앞쪽 모서리가 글 쪽으로
         6px 쯤 더 나온다. 지금 겹침(-40px)에는 여유가 있지만, 각을 키울
         때는 글이 시작되는 자리가 남는지 같이 본다 */
      .rev-l.rv-in .rev-av {
        transform: rotate(4deg);
      }
      .rev-r.rv-in .rev-av {
        transform: rotate(-4deg);
      }
      /* 사람이 먼저 서고 말풍선이 뒤따른다 — 말하는 순서 */
      .rev.rv-in .rev-bub {
        transform: none;
        transition-delay: 0.12s;
      }

      .cost-nums {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        width: 100%;
        margin-top: 70px;
        text-align: center;
      }
      .cost-nums div {
        padding: 7.5px 25px;
      }
      .cost-nums div + div {
        border-left: 1.25px solid rgba(232, 239, 230, 0.18);
      }
      .cost-nums div b {
        display: block;
        font-variant-numeric: tabular-nums;
        font-size: clamp(47.5px, 6vw, 95px);
        font-weight: 800;
        color: #e8efe6;
        line-height: 1.08;
        letter-spacing: -0.02em;
      }
      /* 자릿수 릴 — 창(.nf-d) 하나에 0~9 를 세로로 쌓은 띠(.nf-reel)를
         넣고, --n 칸만큼 밀어 올려 그 숫자만 보이게 한다. 값이 바뀌면
         transform 만 달라지므로 바뀐 자리만 굴러간다 */
      .nf {
        display: inline-flex;
        align-items: flex-start;
      }
      .nf-d {
        display: inline-block;
        height: 1.12em;
        overflow: hidden;
      }
      .nf-reel {
        display: block;
        transform: translateY(calc(var(--n, 0) * -10%));
        transition: transform 0.55s cubic-bezier(0.22, 0.72, 0.24, 1);
      }
      .nf-reel > span {
        display: block;
        height: 1.12em;
        line-height: 1.12em;
      }
      .nf-sep {
        display: inline-block;
        line-height: 1.12em;
      }
      /* 라벨만 잡는다. 자식 선택자가 아니면 숫자 칸 안의 릴 span 까지
         걸려서 숫자가 라벨 크기로 쪼그라든다 */
      .cost-nums div > span {
        display: block;
        margin-top: 15px;
        font-size: 21.25px;
        color: rgba(250, 251, 248, 0.68);
      }
      /* 선은 숫자 세 칸이 끝나는 자리(없음 아래)까지 긋는다 — 글 폭에
         맞춰 끊으면 오른쪽 끝이 화면 한가운데서 멎어 위 칸들과 축이
         어긋나 보인다 */
      .cost-note {
        margin-top: 50px;
        font-size: 18.75px;
        color: rgba(250, 251, 248, 0.66);
        border-top: 1.25px solid rgba(232, 239, 230, 0.18);
        padding-top: 25px;
      }
      /* 선과 달리 글줄은 여기서 끊는다. 선까지 따라 늘리면 한 줄이 90자를
         넘어 읽기 힘들어진다 */
      .cost-note-t {
        display: block;
        max-width: 700px;
      }
      .cost-note .ph {
        border-bottom-color: rgba(250, 251, 248, 0.55);
      }

      .steps {
        margin-top: 70px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* 제목과 카피 줄 수가 칸마다 달라 그냥 두면 키가 어긋난다 */
        grid-auto-rows: 1fr;
        /* 칸 사이 여백은 화살표가 앉을 자리이기도 하다 — 이 값을 바꾸면
           아래 .step::after 의 left 도 절반값으로 맞춰야 화살표가 여백
           한가운데에 선다 */
        gap: 34px;
      }
      .step {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 30px;
        /* 밝은 면 위 패널 규칙대로 cream 이다(.flow-wrap 과 같다). 섹션이
           sage 라 카드와의 차이가 1.13:1 밖에 안 되므로, 면이 아니라 테가
           카드 경계를 세운다 */
        background: #fafbf8;
        border: 1.25px solid rgba(30, 61, 43, 0.1);
        border-radius: 22.5px;
        /* 호버로 카드째 든다. 히어로 .lcard 는 엇갈린 배치와 붙들기 이동이
           transform 자리를 이미 써서 호버를 그림에 걸어야 했는데, .step 은
           등장 연출만 쓰고 .rv-in 이 none 으로 비워 두므로 자리가 비어 있다.
           전이를 여기서 다시 선언하는 이유는 [data-reveal] 의 것을 덮어쓰기
           때문이다 — opacity 를 빼먹으면 등장할 때 페이드가 사라진다 */
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.35s ease,
          box-shadow 0.35s ease,
          opacity 0.4s ease;
      }
      /* 손가락으로 만지는 화면에서는 한 번 닿은 카드가 커진 채 굳으므로
         커서가 있는 환경에서만 건다 */
      @media (hover: hover) {
        .step:hover {
          transform: scale(1.03) rotate(-1.5deg);
          /* 색 변화는 면이 아니라 테로 낸다. 면을 어둡게 하는 길은 막혀
             있고(forest 를 cream 위에 3~10% 로 얹으면 sage 섹션과
             1.02~1.07:1 이 되어 호버한 카드가 오히려 배경에 묻힌다 — 단계별
             램프를 접었을 때와 같은 이유), 밝게 가려면 cream 위가 흰색뿐이라
             팔레트를 벗어난다. 테는 이미 forest 알파라 짙게만 하면 되고
             팔레트 안에 남는다 */
          border-color: rgba(30, 61, 43, 0.28);
          /* 흐림 0 으로 오른쪽 아래에 어긋나게 깐 턱 — 히어로 카드·후기
             말풍선과 같은 어법이다. 밝은 섹션이라 알파를 한참 낮춰 잡았다 */
          box-shadow: 5px 5px 0 rgba(30, 61, 43, 0.12);
          /* 커진 카드가 옆 카드 위로 올라와야 테가 안 잘린다 */
          z-index: 2;
        }
        /* 번호는 평소 대비 하한(3.15:1)에 겨우 걸쳐 있는 옅은 표식인데,
           호버에서만 forest 를 꽉 채워 11.5:1 로 올린다 — 카드가 떠오를 때
           번호가 같이 또렷해지면서 "이 단계"가 짚인다.
           specificity 가 (0,3,0) 이라 아래 .step .n 의 색을 이긴다 */
        .step:hover .n {
          color: #1e3d2b;
        }
        /* 번호가 차오를 때 아이콘도 같이 또렷해진다. 글과 겹치지 않는
           자리라 진하기에 상한이 없어 마음껏 올릴 수 있다 */
        .step:hover .step-ico {
          opacity: 0.5;
        }
      }
      /* 호버가 없는 터치 화면에서는 호버 뒤의 색(테·번호·아이콘)을 처음부터
         켜 둔다. 기울기·확대·그림자는 카드가 굳어 보이므로 빼고 색만 옮긴다.
         번호는 아래 .step .n 기본색보다 뒤에 오지 않으므로 .steps 를 붙여
         specificity 로 이긴다 */
      @media (hover: none) {
        .step {
          border-color: rgba(30, 61, 43, 0.28);
        }
        .steps .step .n {
          color: #1e3d2b;
        }
        .step .step-ico {
          opacity: 0.5;
        }
      }
      /* 번호·제목·카피는 배경 워터마크(.step-ico) 위로 올린다 */
      .step .n,
      .step b,
      .step p {
        position: relative;
        z-index: 1;
      }
      .step .n {
        font-size: 60px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        /* 제목에 밀리도록 옅게 두되, 장식이 아니라 읽히는 글자다 —
           0.55 가 하한이다. cream 위에서 3.15:1 로 큰 글자 AA(3:1)를 겨우
           넘고, 0.50 이면 2.78:1 로 떨어진다. 더 옅게 하고 싶으면 색을
           내릴 게 아니라 번호를 aria-hidden 으로 돌려야 한다 */
        color: rgba(30, 61, 43, 0.55);
        /* 호버에서 forest 로 차오르는 것을 따라가게 한다. 카드 전이와 같은
           길이라야 번호가 따로 노는 것처럼 안 보인다 */
        transition: color 0.35s ease;
      }
      .step b {
        display: block;
        margin-top: 20px;
        font-size: 21.25px;
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: -0.01em;
      }
      .step p {
        margin-top: 10px;
        font-size: 17.5px;
        line-height: 1.7;
        /* 페이지의 흐린 본문색 그대로다. cream 카드 위에서 6.90:1 이다.
           아이콘이 오른쪽 위로 올라가면서 이 글줄과는 더 이상 겹치지
           않으므로 민낯 값이 그대로 남는다 */
        color: #4c5b54;
      }
      /* 아이콘은 글 뒤에 깔리는 워터마크다. 카드 오른쪽 위에 크게 앉히고
         본문은 그 위로 올린다 — 카드 바깥으로 넘기지 않는 이유는 .step 에
         overflow 를 걸면 칸 사이 화살표(::after)까지 잘려 나가기 때문이다.
         960px 이하 규칙은 처음부터 top 이었으니 이제 위아래가 한 방향이다 */
      .step-ico {
        position: absolute;
        right: 18px;
        top: 18px;
        z-index: 0;
        /* 번호(60px)와 머리줄을 이루는 크기다. 120px 이던 것을 줄이면서
           아래끝이 108px 에서 88px 로 올라와, 제목 첫 줄(110px)과 더 이상
           겹치지 않는다 — 글 뒤에 아무것도 안 깔리므로 진하기 상한이
           통째로 없어졌다 */
        width: 88px;
        height: 88px;
        display: block;
        /* 호버에서 또렷해지는 것을 카드·번호와 같은 길이로 맞춘다 */
        transition: opacity 0.35s ease;
        /* 이 값은 아이콘이 카드 오른쪽 '아래'에 있어 카피(17.5px 보통
           굵기) 뒤로 깔리던 시절의 상한이다 — 넉 장 다 거의 검정인 픽셀을
           갖고 있어(ruler·monitor 는 순수 #000000) 그 픽셀이 카피 위에
           겹쳐도 본문 AA(4.5:1)가 남아야 했고, 한계가 0.18(4.53:1)이라
           여유를 두고 0.15 로 잡았다. 오른쪽 위로 올라간 지금은 4열에서
           제목 첫 줄(21.25px 굵은 글씨)하고만 겹치고 2×2·한 열에서는
           아무것과도 안 겹친다. 제목은 ink 라 가장 어두운 픽셀 위에서도
           10.68:1 이니 **상한이 더 이상 이 값을 묶지 않는다** — 더 또렷하게
           하고 싶으면 올려도 된다. 올릴 때는 번호(.n, 3.15:1 로 이미 하한)와
           겹치지 않는지만 같이 본다 */
        opacity: 0.15;
      }
      .step-ico img {
        display: block;
        width: 100%;
        height: 100%;
        /* 정사각 그림이라 지금은 늘어날 일이 없지만, 비율이 다른 그림으로
           갈아 끼워도 찌그러지지 않게 둔다 */
        object-fit: contain;
      }
      /* 칸과 칸 사이 흐름 표시. 카드 바깥 여백(gap 30px) 한가운데에 놓으므로
         .step 에 overflow 를 걸면 안 된다. 그림이 아니라 테두리 두 변을
         돌린 갈매기표라 파일이 늘지 않는다. sage 섹션 위 3.42:1 */
      .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 17px);
        width: 10px;
        height: 10px;
        border-top: 2.5px solid rgba(30, 61, 43, 0.6);
        border-right: 2.5px solid rgba(30, 61, 43, 0.6);
        transform: translate(-50%, -50%) rotate(45deg);
      }
      /* 섹션 바닥에 띠처럼 까는 배경 일러스트. 카드가 불투명한 cream 면이라
         그 뒤에 깔면 대부분 가려지므로, 카드 아래 빈 자리로 내렸다.
         글과 겹치지 않는 것이 이 배치의 전제다 — 겹치는 순간 카피(17.5px
         보통 굵기)의 본문 AA(4.5:1) 때문에 진하기를 0.10 언저리까지
         떨어뜨려야 한다. 지금은 안 겹치니 원본 그대로 진하게 쓴다.
         그 대신 .wrap 아래 여백이 그림 높이를 감당해야 한다 — 260px 는
         그림 높이(240px)에 20px 를 더한 값이다. 그림을 키우면 여기도
         같이 키운다 */
      #steps {
        position: relative;
        /* 좁은 화면에서 그림이 오른쪽으로 넘칠 때 잘라 낸다 */
        overflow: hidden;
      }
      /* 그림을 흐름 밖에 두었으니 본문을 그 위로 올린다 */
      #steps .wrap {
        position: relative;
        z-index: 1;
        padding-bottom: 260px;
      }
      #steps::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 0;
        width: min(40%, 560px);
        /* 상자를 원본과 같은 2.33:1 로 잡아 두면 그림이 상자를 정확히 채운다
           — 잘리지도(cover) 남지도(contain) 않는다 */
        aspect-ratio: 1432 / 614;
        background: url("assets/images/waste.webp") right bottom / contain
          no-repeat;
        /* 무늬일 뿐이니 클릭·드래그를 가로채지 않는다 */
        pointer-events: none;
      }

      .step-note {
        margin-top: 50px;
        display: inline-flex;
        align-items: center;
        gap: 12.5px;
        font-size: 21.25px;
        font-weight: 700;
        color: #1e3d2b;
        background: #fafbf8;
        border-radius: 1248.75px;
        padding: 15px 27.5px;
      }
      .step-note svg {
        width: 22.5px;
        height: 22.5px;
        color: #1e3d2b;
      }

      /* 배경 그림은 배경이 투명한 가로형 일러스트라, 섹션 아래쪽에 바닥
         띠처럼 깔고 그 높이만큼 본문 아래 여백을 준다. 그림 위쪽 1/4 는
         거의 비어 있어서, 폭의 1/4.5 만 비워도 폼과 겹치지 않는다 */
      /* forest 를 거의 불투명하게 덮은 숲 사진. 사진은 결이 촘촘하고 밝아
         그대로 두면 글자가 읽히지 않으므로 덮개가 반드시 필요하다.
         .bg-forest 의 배경색이 맨 밑에 남아, 사진을 못 불러와도 섹션이
         짙은 초록으로 유지된다 */
      .cta-sec {
        /* 물결이 섹션 위쪽 --wave-h 를 덮고 있어, 그만큼을 더해야 제목까지의
           여백이 다른 섹션과 같아진다 */
        padding-top: calc(150px + var(--wave-h));
        background-image:
          linear-gradient(rgba(39, 76, 54, 0.78), rgba(39, 76, 54, 0.9)),
          url("assets/images/cta-background.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
      }
      /* iOS Safari 는 fixed 배경을 지원하지 않고, 대신 사진을 섹션 전체
         높이에 맞춰 크게 늘려 흐릿하게 잘라 보인다. 터치 기기에서는
         섹션과 함께 스크롤되는 보통 배경으로 둔다 */
      @media (hover: none), (pointer: coarse) {
        .cta-sec {
          background-attachment: scroll;
        }
      }
      /* 아래 여백을 따로 두지 않는다. 바닥에 깔던 일러스트가 없어졌으니
         .wrap 의 기본값(위 150 / 아래 150)이 그대로 위아래를 맞춘다 */
      /* 왼쪽 안내(제목·리드·직통 연락) + 오른쪽 폼 카드 두 칸.
         폼 칸을 살짝 넓게 잡아 입력칸 두 줄 배치가 답답하지 않게 한다 */
      .cta-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
        gap: clamp(28px, 4vw, 64px);
        align-items: center;
        text-align: left;
      }
      .cta-copy .lead {
        max-width: 24em;
        margin: 22px 0 clamp(30px, 4vw, 44px);
      }
      /* 바로 연락 — 박스 없이 전화번호를 크게, 메일은 한 단계 작게 */
      .direct {
        max-width: 26em;
      }
      .direct-label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: #d9a441;
      }
      .direct-line {
        flex: 1;
        height: 1px;
        background: rgba(250, 251, 248, 0.24);
      }
      .direct-tel,
      .direct-mail {
        display: inline-flex;
        align-items: baseline;
        color: #fafbf8;
        transition: color 0.2s ease-out;
      }
      .direct-tel {
        margin-top: 12px;
        gap: 12px;
        font-size: clamp(36px, 5.2vw, 52px);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.05;
        font-variant-numeric: tabular-nums;
      }
      .direct-arrow {
        font-size: 0.5em;
        font-weight: 400;
        color: #d9a441;
        transition: transform 0.2s ease-out;
      }
      .direct-tel:hover,
      .direct-mail:hover {
        color: #d9a441;
        text-decoration: none;
      }
      .direct-tel:hover .direct-arrow,
      .direct-mail:hover .direct-arrow {
        transform: translate(2px, -2px);
      }
      .direct-meta {
        margin: 8px 0 0;
        font-size: 15px;
        color: rgba(250, 251, 248, 0.62);
      }
      .direct-mail {
        margin-top: 26px;
        gap: 10px;
        font-size: 19px;
        font-weight: 600;
        word-break: break-all;
      }
      .direct-mail .direct-arrow {
        font-size: 0.8em;
      }
      .direct-mail-tag {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: rgba(250, 251, 248, 0.55);
      }
      /* 폼 카드는 칸 안에 꽉 차게 둔다(가운데 정렬용 max-width·margin 해제) */
      .cta-sec .form {
        max-width: none;
        margin: 0;
        padding-left: 34px;
        padding-right: 34px;
        box-shadow: 0 28px 68px rgba(16, 32, 22, 0.28);
      }
      .form-foot {
        margin-top: 14px;
        text-align: center;
        font-size: 14px;
        color: #6b7a72;
      }
      @media (max-width: 960px) {
        .cta-grid {
          grid-template-columns: 1fr;
          gap: 42px;
        }
      }
      /* 흰 폼 카드만은 짙은 면이 아니라 밝은 면이다. .bg-forest 가 내려보낸
         밝은 글자색과 뒤집힌 버튼색을 카드 안에서만 되돌린다 — 그러지 않으면
         라벨이 흰 카드 위에서 사라지고 버튼도 옅게 뜬다 */
      .cta-sec .form {
        color: #1a2620;
      }
      .cta-sec .form .btn {
        background: #1e3d2b;
        color: #fafbf8;
      }
      .cta-sec .form .btn:hover {
        background: #16301f;
      }
      /* 카드 밖 안내 글줄은 반대로 짙은 면 위에 놓인다 */
      .cta-sec .fineprint {
        color: rgba(250, 251, 248, 0.72);
      }
      /* 문의 폼 입력칸 — 칸 높이와 칸 사이를 줄여 카드가 덜 길어지게 한다 */
      .cta-sec .form {
        padding-top: 40px;
        padding-bottom: 40px;
      }
      .cta-sec .field {
        margin-bottom: 18px;
      }
      .cta-sec .field label {
        font-size: 16px;
        margin-bottom: 6px;
      }
      .cta-sec .field input,
      .cta-sec .field textarea {
        font-size: 16.5px;
        padding: 10px 16px;
      }
      .cta-sec .field input {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .cta-sec .field textarea {
        min-height: 140px;
      }
      .cta-sec .agree {
        margin-bottom: 14px;
      }
      .cta-sec .form .btn {
        margin-top: 0;
        padding: 18px;
      }
      .field-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
      }
      .form {
        max-width: 800px;
        margin: 60px auto 0;
        text-align: left;
        background: #ffffff;
        border: 1.25px solid rgba(30, 61, 43, 0.12);
        border-radius: 25px;
        padding: 45px;
      }
      .field {
        margin-bottom: 25px;
      }
      .field label {
        display: block;
        font-size: 18.125px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .field input,
      .field select,
      .field textarea {
        width: 100%;
        font-family: inherit;
        font-size: 20.625px;
        color: #1a2620;
        background: #fafbf8;
        border: 1.875px solid rgba(30, 61, 43, 0.18);
        border-radius: 13.75px;
        padding: 17.5px 18.75px;
        line-height: 1.4;
      }
      .field input:hover,
      .field select:hover,
      .field textarea:hover {
        border-color: rgba(30, 61, 43, 0.5);
      }
      .field textarea {
        min-height: 147.5px;
        resize: vertical;
        line-height: 1.65;
      }
      /* 개인정보 수집·이용 동의 — 필수(required)라 체크하지 않으면 제출되지
         않는다. 라벨보다 한 단 작고 옅게 두어 입력칸과 위계를 가른다 */
      .agree {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 2.5px 0 22.5px;
        font-size: 17.5px;
        line-height: 1.6;
        color: #4c5b54;
        cursor: pointer;
      }
      .agree input {
        flex: none;
        width: 20px;
        height: 20px;
        margin: 4px 0 0;
        accent-color: #1e3d2b;
        cursor: pointer;
      }
      .form .btn {
        width: 100%;
        margin-top: 7.5px;
        padding: 22.5px;
      }
      .formok {
        margin-top: 22.5px;
        display: flex;
        align-items: center;
        gap: 12.5px;
        background: #e8efe6;
        color: #1e3d2b;
        border-radius: 13.75px;
        padding: 17.5px 20px;
        font-size: 19.375px;
        font-weight: 700;
      }
      .formok svg {
        width: 22.5px;
        height: 22.5px;
        flex: none;
      }
      .fineprint {
        margin-top: 27.5px;
        font-size: 18.125px;
        color: #5b6a63;
      }

      /* ---------- 푸터 (footer.html 구조 이식, 색상은 본 페이지 팔레트 유지) ---------- */
      /* 앞 CTA 가 forest 라 푸터까지 forest 면 두 면이 한 덩어리로 붙는다.
         ink 는 글자색이지 면 색이 아니므로, 면으로 쓰는 세 색(forest·cream·
         sage) 중 sage 로 뒤집어 끝을 닫는다 — forest 다음에 sage 를 놓는
         것은 #cost → #steps 에서 이미 쓰는 짝이다. 밝은 면이 됐으므로 안쪽
         글자·로고·심볼 색은 아래에서 전부 뒤집는다. 경계는 위 섹션의 wave 가
         긋고 있어 border-top 은 두지 않는다 */
      .ftr {
        background: #e8efe6;
        /* 하단 고정 바 높이만큼을 비워 두지 않는다. 바가 푸터에 닿기 전에
           먼저 사라지므로 가릴 일이 없고, 그만큼을 비우면 푸터 아래가
           휑하게 길어진다. 스크립트가 막힌 경우만 <noscript> 에서 되돌린다 */
        padding: 32.5px 30px calc(27.5px + env(safe-area-inset-bottom));
        color: #4c5b54;
        font-size: 16.25px;
        letter-spacing: -0.01em;
      }
      .ftr *,
      .ftr *::before,
      .ftr *::after {
        box-sizing: border-box;
      }
      .ftr p {
        margin: 0;
      }
      .ftr-wrap {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 25px;
        flex-wrap: wrap;
      }

      .ftr-logo {
        display: block;
        width: auto;
        height: 30px;
        margin-bottom: 12.5px;
        /* 원본 로고가 짙은 남색이다. 밝은 면 위에서는 반전하지 않고 그대로
           둔다 */
        opacity: 0.9;
      }
      .ftr-info p {
        line-height: 1.6;
      }
      .ftr-info a {
        color: #1e3d2b;
        text-decoration: none;
        transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .ftr-info a:hover {
        color: #16301f;
      }

      .ftr-side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 22.5px;
      }
      .ftr-sym {
        display: flex;
        gap: 15px;
      }
      .ftr-sym a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43.75px;
        height: 43.75px;
        border-radius: 10px;
        /* 심볼이 브랜드 고유색이라 제 바탕이 필요하다. 푸터가 sage 이므로
           한 단 밝은 cream 으로 어긋나게 깐다 */
        background: #fafbf8;
        opacity: 0.9;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .ftr-sym a:hover {
        opacity: 1;
      }
      .ftr-sym img {
        display: block;
        width: 32.5px;
        height: 32.5px;
        object-fit: contain;
      }
      .ftr-links {
        display: flex;
        gap: 17.5px;
      }
      .ftr-links a {
        color: #1e3d2b;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .ftr-links a:hover {
        color: #16301f;
      }

      /* ============================================================
         하단 고정 헤더 (header.html) — 다른 랜딩과 같은 구조·치수
         로고 / 대표번호 / 스마트스토어 / 견적 받기
         폐기물 팔레트 — forest 를 주 행동색으로, 바는 cream 유리
         ============================================================ */
      .hdr {
        --hdr-ink: #1a2620;
        --hdr-ink-2: #4c5b54;
        --hdr-line: rgba(30, 61, 43, 0.12);
        --hdr-line-2: rgba(30, 61, 43, 0.2);
        --hdr-wash: rgba(30, 61, 43, 0.05);
        --hdr-surface: rgba(250, 251, 248, 0.92);
        --hdr-store-bg: #ffffff;
        --hdr-accent: #1e3d2b;
        --hdr-accent-2: #16301f;
        --hdr-on-accent: #fafbf8;
        --hdr-radius: 12.5px;
        --hdr-btn-h: 42px;
        --hdr-h: 68px;
        --hdr-gutter: 24px;
        --hdr-page: 1280px;
        --hdr-ease: cubic-bezier(0.4, 0, 0.2, 1);

        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        box-sizing: border-box;
        height: calc(var(--hdr-h) + env(safe-area-inset-bottom));
        padding: 0 var(--hdr-gutter) env(safe-area-inset-bottom);
        color: var(--hdr-ink);
        font-family:
          "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic",
          system-ui, sans-serif;
        line-height: 1.5;
        background: var(--hdr-surface);
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        border-top: 1px solid var(--hdr-line);
        box-shadow:
          0 -1px 2px rgba(30, 61, 43, 0.04),
          0 -10px 30px rgba(30, 61, 43, 0.07);
        transition:
          transform 0.3s var(--hdr-ease),
          opacity 0.3s var(--hdr-ease);
      }

      .hdr *,
      .hdr *::before,
      .hdr *::after {
        box-sizing: border-box;
      }
      .hdr img {
        display: block;
        max-width: 100%;
      }
      .hdr a {
        text-decoration: none;
        color: inherit;
      }
      .hdr :focus-visible {
        outline: 2px solid var(--hdr-accent);
        outline-offset: 3px;
        border-radius: var(--hdr-radius);
      }

      /* 푸터 구간에서는 물러난다 — 클래스는 script.js 가 붙인다 */
      .hdr.is-hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
      }

      .hdr .hdr-wrap {
        max-width: var(--hdr-page);
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
      .hdr-logo {
        display: flex;
        align-items: center;
        border-radius: var(--hdr-radius);
      }
      .hdr-logo img {
        height: 30px;
        width: auto;
      }
      .hdr-cta {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .hdr-tel {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: var(--hdr-btn-h);
        padding: 0 10px;
        border-radius: var(--hdr-radius);
        color: var(--hdr-ink);
        white-space: nowrap;
        transition:
          background 0.18s var(--hdr-ease),
          color 0.18s var(--hdr-ease);
      }
      .hdr-tel:hover {
        background: var(--hdr-wash);
        color: var(--hdr-ink);
      }
      .hdr-tel svg {
        width: 16px;
        height: 16px;
        flex: none;
        fill: var(--hdr-ink-2);
        transition: fill 0.18s var(--hdr-ease);
      }
      .hdr-tel:hover svg {
        fill: var(--hdr-ink);
      }
      .hdr-tel .num {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
      }

      .hdr .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        height: var(--hdr-btn-h);
        min-height: 0;
        padding: 0 16px;
        border-radius: var(--hdr-radius);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        cursor: pointer;
        transition:
          background 0.18s var(--hdr-ease),
          border-color 0.18s var(--hdr-ease),
          box-shadow 0.18s var(--hdr-ease);
      }
      .hdr .btn-store {
        background: var(--hdr-store-bg);
        color: var(--hdr-ink);
        border: 1px solid var(--hdr-line-2);
      }
      .hdr .btn-store:hover {
        background: var(--hdr-wash);
        color: var(--hdr-ink);
      }
      .hdr .btn-store img {
        width: 18px;
        height: 18px;
        flex: none;
        object-fit: contain;
      }
      .hdr .btn-primary {
        background: var(--hdr-accent);
        color: var(--hdr-on-accent);
        border: 1px solid transparent;
      }
      .hdr .btn-primary:hover {
        background: var(--hdr-accent-2);
        color: var(--hdr-on-accent);
      }

      /* 버튼 모양은 이 페이지의 어법을 따른다 — 배치·치수만 공용이다.
         글자는 700, 보조 버튼은 흰 면에 옅은 forest 테두리를 두고
         호버에서 테두리만 forest 로 짙어진다 (본문 .btn 과 같은 어법) */
      .hdr .btn {
        font-weight: 700;
        letter-spacing: 0;
      }
      .hdr .btn-store {
        color: #1e3d2b;
        border: 1.25px solid rgba(30, 61, 43, 0.18);
      }
      .hdr .btn-store:hover {
        background: var(--hdr-store-bg);
        border-color: #1e3d2b;
        color: #1e3d2b;
      }
      .hdr-tel,
      .hdr-tel:hover {
        color: #1e3d2b;
      }
      .hdr-tel .num {
        font-weight: 700;
      }
      .hdr-tel svg,
      .hdr-tel:hover svg {
        fill: #1e3d2b;
      }

      @media (max-width: 720px) {
        .hdr {
          --hdr-h: 60px;
          --hdr-btn-h: 40px;
          --hdr-gutter: 14px;
        }
        .hdr .hdr-wrap {
          gap: 10px;
        }
        .hdr-logo img {
          height: 24px;
        }
        .hdr-cta {
          gap: 7px;
        }
        .hdr-tel {
          padding: 0 6px;
          gap: 6px;
        }
        .hdr .btn {
          padding: 0 13px;
        }
        .hdr .btn-store {
          padding: 0 11px;
        }
        .hdr .btn-store .label {
          display: none;
        }
      }
      @media (max-width: 420px) {
        .hdr-tel {
          padding: 0 8px;
        }
        .hdr-tel .num {
          display: none;
        }
        .hdr-tel svg {
          width: 19px;
          height: 19px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hdr,
        .hdr .btn,
        .hdr-tel,
        .hdr-tel svg {
          transition: none;
        }
      }
      /* 본문이 바 높이를 셀 때 쓰는 값(--bar-h)도 헤더의 좁은 화면 치수를 따른다 */
      @media (max-width: 720px) {
        :root {
          --bar-h: 60px;
        }
      }

      /* ============================================================
   형제 사이트 이동 독 — 심볼 줄 + 맨 위로 (sibling.html)
   토큰만 이 페이지 팔레트로 갈아 끼우고 구조와 동작은 원본 그대로다
   ============================================================ */
      .float-dock,
      .float-top {
        --float-size: 52px;
        --float-gap: 16px;
        --float-right: 28px;
        /* 호스트에 하단 고정 바가 있으므로 그만큼 올린다 */
        --float-bottom: calc(var(--bar-h) + 18px);
        --float-sym-bg: #fafbf8;
        --float-surface: #fafbf8;
        --float-line: rgba(30, 61, 43, 0.18);
        --float-accent: #1e3d2b;
        --float-ease: cubic-bezier(0.16, 1, 0.3, 1);

        box-sizing: border-box;
        font-family:
          "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
          "Malgun Gothic", system-ui, sans-serif;
      }

      /* 안쪽 리셋
         호스트 페이지에 리셋이 없어도 무너지지 않게 두 덩어리 안쪽만 정리한다 */
      .float-dock *,
      .float-dock *::before,
      .float-dock *::after {
        box-sizing: border-box;
      }
      .float-dock a {
        text-decoration: none;
        color: inherit;
      }
      .float-dock img {
        display: block;
      }
      .float-top {
        margin: 0;
        padding: 0;
        font: inherit;
      }
      .float-dock :focus-visible,
      .float-top:focus-visible {
        outline: 2px solid var(--float-accent);
        outline-offset: 3px;
        border-radius: 50%;
      }

      /* 두 덩어리는 화면 오른쪽 아래에 세로로 선다
         맨 위로 버튼이 바닥을 잡고 심볼 줄은 그 위에 올라앉는다 */
      .float-dock {
        position: fixed;
        right: var(--float-right);
        bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom));
        z-index: 29;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition:
          bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.32s ease;
      }
      /* 맨 위로 버튼이 서면 심볼 줄은 그 높이만큼 비켜 올라간다 */
      .float-dock.is-lift {
        bottom: calc(
          var(--float-bottom) + var(--float-size) + var(--float-gap) +
            env(safe-area-inset-bottom)
        );
      }

      /* 공통 부유 버튼 */
      .float-btn {
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          filter 0.2s ease;
      }
      .float-btn:hover {
        transform: translateY(-3px);
      }

      /* 콘텐츠보다 오래 화면에 남는 것은 그 자체로 시선을 나눠 가진다
         평소에는 심볼 하나만 세우고 손이 닿을 때만 나머지가 올라온다 */
      .float-sym {
        display: flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 8px 20px rgba(30, 61, 43, 0.22));
      }
      .float-sym:hover {
        filter: drop-shadow(0 12px 26px rgba(30, 61, 43, 0.32));
      }
      .float-sym img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      /* 블로그·스토어 심볼은 마크만 있어 제 바탕이 필요하다
         (아이오티플렉스 심볼은 그 자체가 면이라 그대로 둔다)
         바탕은 심볼 칸을 꽉 채우므로 --float-size 와 같은 52x52 다 */
      .float-sym.has-plate {
        background: var(--float-sym-bg);
        border: 1px solid var(--float-line);
        border-radius: 14px;
      }
      /* 마크가 테두리에 닿지 않게 안으로 물린다
         네이버 로고는 가로가 길어 contain 으로 넣으면 위아래가 남는다 */
      .float-sym.has-plate img {
        width: 62%;
        height: 62%;
      }
      .float-dock .float-sym {
        flex: none;
        width: var(--float-size);
        height: var(--float-size);
        transition:
          height 0.3s var(--float-ease),
          margin-top 0.3s var(--float-ease),
          opacity 0.24s ease,
          transform 0.3s var(--float-ease),
          filter 0.2s ease;
      }
      .float-dock .float-sym + .float-sym {
        margin-top: var(--float-gap);
      }
      .float-dock .float-sym:not(:first-child) {
        height: 0;
        margin-top: 0;
        opacity: 0;
        transform: translateY(10px) scale(0.86);
        pointer-events: none;
        overflow: hidden;
      }
      .float-dock:hover .float-sym:not(:first-child),
      .float-dock:focus-within .float-sym:not(:first-child),
      .float-dock.is-open .float-sym:not(:first-child) {
        height: var(--float-size);
        margin-top: var(--float-gap);
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      .float-dock:hover .float-sym:not(:first-child):hover,
      .float-dock:focus-within .float-sym:not(:first-child):hover,
      .float-dock.is-open .float-sym:not(:first-child):hover {
        transform: translateY(-3px);
      }

      /* 맨 위로
         절반을 넘겨 내려간 뒤부터 나타난다 */
      .float-top {
        position: fixed;
        right: var(--float-right);
        bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom));
        z-index: 29;
        width: var(--float-size);
        height: var(--float-size);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--float-surface);
        border: 1px solid var(--float-line);
        border-radius: 50%;
        box-shadow: 0 8px 20px rgba(30, 61, 43, 0.12);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.32s ease,
          transform 0.2s ease,
          box-shadow 0.2s ease,
          border-color 0.2s ease;
      }
      .float-top.is-show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .float-top:hover {
        border-color: var(--float-accent);
        box-shadow: 0 12px 26px rgba(30, 61, 43, 0.2);
      }
      .float-top span {
        font-size: 20px;
        font-weight: 800;
        line-height: 1;
        color: var(--float-accent);
      }

      /* 어두운 무대 위에서는 독이 앞으로 나서지 않는다
         dark zone 표시가 붙은 구간이 독의 높이에 걸치면 물러선다 */
      body.dock-dim .float-dock {
        opacity: 0.26;
      }
      /* 맨 위로 버튼은 찾으러 오는 도구라 흔적은 남긴다 */
      body.dock-dim .float-top.is-show {
        opacity: 0.45;
      }
      body.dock-dim .float-dock:hover,
      body.dock-dim .float-dock:focus-within,
      body.dock-dim .float-dock.is-open,
      body.dock-dim .float-top.is-show:hover,
      body.dock-dim .float-top.is-show:focus-visible {
        opacity: 1;
      }

      /* 반응형
         좁은 화면에서는 오른쪽 여백만 줄이고 순서와 동작은 그대로 둔다 */
      @media (max-width: 768px) {
        .float-dock,
        .float-top {
          --float-right: 16px;
          --float-bottom: calc(var(--bar-h) + 18px);
        }
      }

      /* 모션을 줄이기로 한 사용자에게는 전환 없이 즉시 바뀐다 */
      @media (prefers-reduced-motion: reduce) {
        .float-dock,
        .float-dock .float-sym,
        .float-btn,
        .float-btn:hover,
        .float-top {
          transition: none;
          transform: none;
        }
      }

      /* ---------- 1400px 이하 ---------- */
      /* 좌우 이미지는 폭이 줄면 작아지다가 물러난다 */
      /* 카드 오른쪽 여백이 100px 아래로 떨어지면 잎을 카드에서 띄운 만큼
         반대편 화면 끝에 붙는다. 그 앞에서 내린다 */
      @media (max-width: 1520px) {
        .hero-leaf-sm,
        .hero-leaf-sprig {
          display: none;
        }
      }
      @media (max-width: 1475px) {
        .hslot {
          width: 165px;
        }
      }
      @media (max-width: 1300px) {
        .hero-side {
          display: none;
        }
      }

      @media (max-width: 1400px) {
        /* 칸이 좁아지면 카피가 서너 줄로 흩어진다. 넉 장을 두 줄로 접어
           칸 폭을 되찾는다 */
        .steps {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        /* 둘째 칸 뒤는 줄이 바뀌는 자리다 — 오른쪽을 가리키는 화살표가
           남으면 섹션 밖을 가리킨다 */
        .step:nth-child(2)::after {
          content: none;
        }
        .wrap {
          padding-left: 40px;
          padding-right: 40px;
        }
        .nav-in {
          padding-left: 40px;
          padding-right: 40px;
        }
        .nav-menu {
          gap: 27.5px;
        }
        .nav-menu a {
          font-size: 18.75px;
        }
        h1 {
          font-size: 57.5px;
        }
        .h2 {
          font-size: 45px;
        }
        .cost-nums {
          margin-top: 57.5px;
        }
      }

      @media (max-width: 1175px) {
        .nav-menu {
          display: none;
        }
      }

      @media (max-width: 1275px) {
        /* 한 열로 접히면 문구도 카드도 화면 폭을 다 써 잎 셋 다 자리가 없다 */
        .hero-leaf {
          display: none;
        }
        /* 후기 쪽도 같은 자리에서 접는다 — 이 아래로는 말풍선이 넓어져
           오른쪽 아래 잎이 셋째 후기의 서명(.rev-who)에 닿는다 */
        .rev-leaf {
          display: none;
        }
        /* FAQ 도 같이 접는다. 한 열로 내려오면 질문·답변이 폭을 다 쓰고
           제목 좌우의 빈 자리도 같이 좁아진다 */
        .faq-leaf {
          display: none;
        }
        .hero-lineup {
          padding-left: 40px;
          padding-right: 40px;
        }
        .hero-lineup .h2 {
          font-size: 47.5px;
        }
        .lineup {
          grid-template-columns: 1fr;
          gap: 45px;
        }
        .lineup-copy {
          position: static;
        }
      }

      /* ---------- 960px 이하 (모바일) ---------- */
      @media (max-width: 960px) {
        body {
          font-size: 20px;
        }
        .sec {
          padding-top: 90px;
        }
        /* 히어로는 배경을 화면 맨 위까지 끌어올려야 한다. 위 .sec 규칙이
           기본값의 padding-top: 0 을 덮어써 짙은 띠가 생기므로 다시 0 으로
           돌린다 */
        .hero {
          padding-top: 0;
        }
        .cta-sec {
          padding-top: calc(90px + var(--wave-h));
        }
        .wrap {
          padding: 0 25px 90px;
        }
        :root {
          --wave-h: 55px;
        }
        .h2 {
          font-size: 32.5px;
        }
        .lead {
          font-size: 20.625px;
          margin-top: 20px;
        }

        .nav-in {
          padding: 20px 25px;
        }
        .nav-logo {
          font-size: 20px;
        }
        .nav-logo svg {
          width: 27.5px;
          height: 27.5px;
        }
        .nav-tel {
          display: none;
        }
        .btn-sm {
          padding: 12.5px 20px;
          font-size: 17.5px;
        }

        .hero .wrap {
          padding-top: 42.5px;
          padding-bottom: 27.5px;
        }
        .badge {
          font-size: 15.625px;
          padding: 8.75px 17.5px;
        }
        h1 {
          font-size: 36.25px;
          margin-top: 25px;
        }
        .hero-sub {
          font-size: 20px;
          margin-top: 22.5px;
        }
        .cta-row {
          flex-direction: column;
          align-items: stretch;
          gap: 15px;
          margin-top: 35px;
        }
        .cta-row .btn,
        .cta-row .btn-ghost {
          width: 100%;
        }
        .hero .cta-row .btn,
        .btn-ghost {
          min-height: 67.5px;
        }
        .trust {
          gap: 12.5px 27.5px;
          margin-top: 27.5px;
        }
        .trust li {
          font-size: 18.125px;
        }
        .hero-vis {
          margin-top: 32.5px;
        }
        .shot {
          border-radius: 17.5px;
        }
        .shot img {
          height: auto;
        }

        .pain {
          margin-top: 40px;
        }
        .pain li {
          gap: 17.5px;
          padding: 25px 2.5px;
        }
        .pain b {
          font-size: 21.875px;
        }
        .pain p {
          font-size: 18.75px;
        }
        .warn {
          margin-top: 35px;
          font-size: 21.25px;
        }
        .law-ref {
          margin-top: 40px;
          padding-top: 25px;
          font-size: 17.5px;
        }
        .law-ref-tag {
          font-size: 15px;
        }
        .closing {
          margin-top: 40px;
          font-size: 25px;
          padding-left: 20px;
        }

        .flow-wrap {
          margin-top: 40px;
          padding: 27.5px 20px 25px;
          border-radius: 22.5px;
        }
        .flow-h {
          display: none;
        }
        .flow-v {
          display: block;
        }
        .flow-note {
          margin-top: 22.5px;
          font-size: 16.875px;
        }

        .hero-lineup {
          padding: 75px 25px 95px;
        }
        .hero-lineup .h2 {
          font-size: 35px;
        }
        .lineup-copy .badge {
          margin-bottom: 20px;
          font-size: 15.625px;
          padding: 8.75px 17.5px;
        }
        .lineup {
          gap: 35px;
        }
        .lineup-grid {
          grid-template-columns: 1fr;
          grid-auto-rows: auto;
          gap: 20px;
        }
        .lcard:nth-child(2n) {
          transform: none !important;
        }
        .lcard {
          min-height: 0;
          padding: 32.5px 30px 0;
          border-radius: 25px;
        }
        .lcard h3 {
          font-size: 26.25px;
        }
        .lcard p {
          font-size: 18.75px;
        }
        /* 한 줄에 한 장이라 카드가 넓다. 그림을 더 줄여 키를 낮춘다 */
        .lcard .art {
          width: 78%;
        }

        .revs {
          margin-top: 40px;
          gap: 75px;
        }
        .rev {
          gap: 12.5px;
          max-width: 88%;
        }
        .rev-av {
          width: 137.5px;
          height: 137.5px;
        }
        .rev-l .rev-av {
          margin-right: -26.25px;
        }
        .rev-r .rev-av {
          margin-left: -26.25px;
        }
        .rev-bub {
          padding: 20px 22.5px;
          border-radius: 17.5px;
        }
        .rev-t {
          font-size: 23.125px;
          margin-bottom: 10px;
        }
        .rev-bub p {
          font-size: 19.375px;
        }
        .rev-bub::before {
          top: calc(50% - 7.5px);
          width: 15px;
          height: 15px;
        }
        .rev-l .rev-bub::before {
          left: -5px;
        }
        .rev-r .rev-bub::before {
          right: -5px;
        }
        .rev-who {
          margin-top: 12.5px;
          font-size: 16.25px;
        }
        .rev-note {
          margin-top: 32.5px;
          font-size: 16.875px;
        }

        .qas {
          margin-top: 35px;
          /* 좁은 화면에서는 두 칸이 들어가지 않는다. 한 줄로 되돌린다 */
          grid-template-columns: 1fr;
        }
        /* 한 줄이 되면 첫 항목에만 위쪽 선이 필요하다 */
        .qa:nth-child(-n + 2) {
          border-top: 0;
        }
        .qa:first-child {
          border-top: 1.25px solid rgba(30, 61, 43, 0.14);
        }
        .qa summary {
          grid-template-columns: 27.5px 1fr 17.5px;
          gap: 15px;
          padding: 25px 2.5px;
        }
        .qa summary::before {
          font-size: 22.5px;
        }
        .qa summary h3 {
          font-size: 21.25px;
        }
        .qa p {
          margin: -5px 0 27.5px 42.5px;
          /* 화면이 좁으면 오른쪽 여백까지 글줄에 내준다 */
          padding-right: 0;
          font-size: 19.375px;
        }

        .cost-nums {
          margin-top: 40px;
        }
        .cost-nums div {
          padding: 5px 10px;
        }
        .cost-nums div b {
          font-size: clamp(32.5px, 8vw, 50px);
        }
        .cost-nums div > span {
          margin-top: 10px;
          font-size: 16.25px;
        }
        .cost-note {
          margin-top: 35px;
          font-size: 17.5px;
        }

        .steps {
          margin-top: 37.5px;
          grid-template-columns: 1fr;
          /* 한 줄에 한 칸이면 카피 길이 차이가 눈에 안 띄므로, 짧은 칸에
             빈 자리를 만들면서까지 키를 맞출 이유가 없다 */
          grid-auto-rows: auto;
          /* 15px 이면 화살표가 카드에 닿는다 */
          gap: 26px;
        }
        /* 좁은 화면은 .wrap 아래 여백이 90px 로 줄어드니 그림도 같이 줄인다.
           82% 폭이면 높이가 그 안에 들어가도록 여백을 다시 잡는다 */
        #steps .wrap {
          padding-bottom: 180px;
        }
        #steps::after {
          width: 82%;
        }
        /* 한 열로 내려오면 흐름도 아래로 바뀐다. 줄바꿈 자리가 없어졌으니
           1400px 에서 지웠던 둘째 칸 화살표도 되살린다 */
        .step:not(:last-child)::after,
        .step:nth-child(2)::after {
          content: "";
          top: calc(100% + 13px);
          left: 50%;
          transform: translate(-50%, -50%) rotate(135deg);
        }
        .step {
          padding: 27.5px 27.5px 30px;
          border-radius: 18.75px;
        }
        .step .n {
          font-size: 56px;
        }
        .step b {
          margin-top: 15px;
          font-size: 21.25px;
        }
        .step-ico {
          top: 27.5px;
          right: 27.5px;
          width: 44px;
          height: 44px;
        }
        .step-note {
          margin-top: 35px;
          font-size: 19.375px;
        }

        .field-grid {
          grid-template-columns: 1fr;
        }
        .form {
          margin-top: 37.5px;
          padding: 30px 25px;
          border-radius: 22.5px;
        }
        .cta-sec .form {
          padding: 24px 22px;
        }
        .cta-tel {
          display: flex;
        }
        .cta-sec .field input {
          min-height: 46px;
        }
        .field input,
        .field select {
          min-height: 54px;
        }
        .field textarea {
          min-height: 100px;
        }
        .fineprint {
          margin-top: 22.5px;
          font-size: 16.875px;
        }

        .ftr {
          padding: 27.5px 20px calc(22.5px + env(safe-area-inset-bottom));
        }
        .ftr-wrap {
          flex-direction: column;
          gap: 30px;
        }
        .ftr-side {
          align-items: flex-start;
        }

      }

      /* 640px 아래에서는 인물을 옆에 두면 말풍선에 글 몇 자 폭밖에 안 남는다
         — 390px 화면에서 줄당 6.7자까지 좁아져 후기 하나가 열다섯 줄로
         늘어난다. 인물을 말풍선 위로 올리고 폭을 다 내주면 15.2자가 되어
         같은 글이 절반 이하의 줄로 앉는다. 640px 을 경계로 잡은 것은 그
         위(18자)까지는 가로 배치가 아직 읽히기 때문이다 */
      @media (max-width: 640px) {
        .revs {
          /* 세로가 짧아진 만큼 사이도 좁힌다 */
          gap: 45px;
        }
        .rev,
        .rev-r {
          flex-direction: column;
          gap: 0;
          max-width: 100%;
        }
        /* 세로로 쌓으면 align-items 가 좌우를 정한다 — 인물이 말한 사람
           쪽에 서야 좌·우·좌 리듬이 그대로 남는다 */
        .rev {
          align-items: flex-start;
        }
        .rev-r {
          align-items: flex-end;
        }
        .rev-av {
          width: 92.5px;
          height: 92.5px;
        }
        /* 가로 배치에서 쓰던 음수 여백을 걷고, 가장자리에서 조금 들여놓는다 */
        .rev-l .rev-av {
          margin-right: 0;
          margin-left: 10px;
        }
        .rev-r .rev-av {
          margin-left: 0;
          margin-right: 10px;
        }
        .rev-bub {
          width: 100%;
          /* 인물 아래를 말풍선이 물어 둘이 한 덩어리로 읽힌다 */
          margin-top: -12.5px;
        }
        /* 꼬리는 인물이 선 자리에 그대로 가려지므로 접는다. 겹침만으로도
           누가 한 말인지 읽힌다 */
        .rev-bub::before {
          display: none;
        }
      }


      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
        }
        .seq,
        [data-reveal],
        .flow .node,
        .flow .tip,
        .flow .hub,
        .flow .node.has-img .pic,
        .flow .done,
        /* .rev-av·.rev-bub 는 .rev 의 자식이라 위 [data-reveal] 에 안 잡힌다.
           여기 없으면 말풍선이 밀려 들어오다 만 자리에 멈춘다.
           꼬리(.rev-bub::before)의 rotate 는 배치라서 건드리지 않는다 */
        .rev-av,
        .rev-bub {
          opacity: 1 !important;
          transform: none !important;
        }
        /* 인물의 기울기는 움직임이 아니라 배치다 — 말한 사람을 가리키는
           표시라서 모션을 꺼도 남아야 한다. 위 규칙이 transform 을 통째로
           지우므로 여기서 다시 세운다 */
        .rev-l .rev-av {
          transform: rotate(4deg) !important;
        }
        .rev-r .rev-av {
          transform: rotate(-4deg) !important;
        }
        /* 엇갈린 배치는 움직임이 아니라 배치다. 위 규칙이 transform 을
           통째로 지우므로 여기서 다시 세워 둔다 */
        .lcard:nth-child(2n) {
          transform: translateY(110px) !important;
        }
        /* 레일이 없어졌으므로 흐르는 선이 곧 연결선이다. 움직임만 멈추고
           파선 그대로 보여 준다 */
        .flow .stream {
          opacity: 1 !important;
        }
        .shot-fx {
          display: none !important;
        }
      }
    

/* 개인정보 수집·이용 동의 — 내용 보기 */
.agree label {
  cursor: pointer;
}
.agree .terms summary {
  display: inline-block;
  margin-top: 4px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agree .terms summary::-webkit-details-marker {
  display: none;
}
.agree .terms .full {
  margin-top: 8px;
  font-size: 0.92em;
  line-height: 1.7;
  word-break: keep-all;
}

/* 개인정보 동의 내용: 항목과 내용을 두 열로 맞춰 구분 (homepage cs.html과 같은 방식) */
.agree .terms .full dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
}
.agree .terms .full dt {
  font-weight: 400;
}
.agree .terms .full dd {
  margin: 0;
}
.agree .terms .full p {
  margin: 10px 0 0;
  font-size: inherit;
  line-height: inherit;
}
@media (max-width: 560px) {
  .agree .terms .full dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .agree .terms .full dd {
    margin-bottom: 8px;
  }
}

/* 개인정보 동의: '내용 보기'를 동의 문구와 같은 줄 오른쪽에 둔다 */
.agree > div {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.agree > div > label {
  display: block;
  padding-right: 5.5em;
}
.agree .terms summary {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}