.waterWrap {display: flex; flex-direction: column; gap: 100px;}
	
    /* Section */
    .section { display: flex; flex-direction: column; gap: 30px; }
    .section-divider { height: 1px; background: #F8F9FA; }

    /* Section header */
    .section__header { display: flex; flex-direction: column; gap: 20px; }
    .section__title-row { display: flex; align-items: center; gap: 14px; height: 56px; }
    .section__num {
      font-size: 56px; font-weight: 800;
      color: rgba(60,126,210,0.1); line-height: 56px; white-space: nowrap;
    }
    .section__title { font-size: 28px; font-weight: 700; color: #000; white-space: nowrap; }
    .section__accent { width: 40px; height: 3px; background: var(--highlight); }
    .section__desc { font-size: 16px; font-weight: 400; color: var(--text); line-height: 1.6; }

    /* Feature card */
    .feature-card {
      background: #F8F9FA; border-radius: 16px; padding: 40px;
      display: flex; flex-direction: column; gap: 20px;
    }
    .feature-card__title { font-size: 16px; font-weight: 600; color: var(--c_base1); }
    .feature-list { display: flex; flex-direction: column; gap: 8px; }
    .feature-item { display: flex; align-items: flex-start; gap: 10px; }
    .feature-item__dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--c_base1); flex-shrink: 0; margin-top: 9px;
    }
    .feature-item__text { font-size: 16px; font-weight: 400; color: var(--text); line-height: 1.4; }

    /* Sub-category item (하폐수 공정) */
    .process-item { display: flex; flex-direction: column; gap: 4px; }
    .process-item__heading { font-size: 16px; font-weight: 600; color: #000; line-height: 1.6; }
    .process-item__sub { display: flex; align-items: flex-start; gap: 10px; }
    .process-item__sub .feature-item__dot { margin-top: 9px; }
    .process-item__sub-text { font-size: 16px; font-weight: 400; color: var(--text); line-height: 1.6; }

    /* Photo card */
    .photo-card {
      position: relative; border-radius: 16px; overflow: hidden;
      background: #F8F9FA; display: flex; align-items: flex-end; padding: 40px;
    }
    .photo-card img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; pointer-events: none;
    }
    .photo-label {
      position: relative; background: #fff; border-radius: 100px;
      padding: 12px 20px; font-size: 16px; font-weight: 500;
      color: #000; white-space: nowrap; z-index: 1;
    }

    /* ── SECTION 01 ── */
    /* 3-col feature cards */
    .cards-3col {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px; align-items: stretch;
    }
    /* 2x2 photo grid */
    .photos-2x2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 450px 500px;
      gap: 20px;
    }
    .photos-2x2 .photo-card { height: 100%; }

    /* ── SECTION 02 ── */
    /* Feature (left) + Photo (right) */
    .layout-feat-photo {
      display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    }
    .layout-feat-photo .photo-card { height: 450px; }

    /* ── SECTION 03 ── */
    /* Photo (left) + Feature (right) */
    .layout-photo-feat {
      display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;
    }
    .layout-photo-feat .photo-card { height: 480px; }

    /* ── SECTION 04 ── */
    /* Feature (left) + Photo (right) */
    .layout-feat-photo-04 {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;
    }
    .layout-feat-photo-04 .photo-card { height: 480px; }

    /* MBR diagram */
    .diagram-card {
      background: #fff; border: 1px solid #e5e5e5;
      border-radius: 16px; padding: 40px;
      display: flex; flex-direction: column; gap: 20px;
    }
    .diagram-card img { width: 100%; height: auto; display: block; }
    .diagram-caption { display: flex; flex-direction: column; gap: 4px; }
    .diagram-caption__title { font-size: 24px; font-weight: 600; color: var(--c_base1); line-height: 1.4; }
    .diagram-caption__sub   { font-size: 16px; font-weight: 400; color: #000; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1199px) {
     
      .waterWrap {gap: 60px; }
      .section__num { font-size: 40px; line-height: 40px; }
      .section__title { font-size: 22px; }
      .section__title-row { height: 40px; }
      .cards-3col { grid-template-columns: 1fr; }
      .photos-2x2 { grid-template-rows: 320px 360px; }
      .layout-feat-photo .photo-card,
      .layout-photo-feat .photo-card,
      .layout-feat-photo-04 .photo-card { height: 360px; }
    }

    @media (max-width: 767px) {
      .waterWrap { gap: 48px; }
      .section { gap: 20px; }
      .section__num { font-size: 32px; line-height: 32px; }
      .section__title { font-size: 18px; white-space: normal; }
      .section__title-row { height: auto; }
      .section__desc { white-space: normal; }
      .feature-card { padding: 24px; }
      .feature-item__text { white-space: normal; }
      .photo-card { padding: 20px; }
      .photo-label { font-size: 13px; padding: 8px 14px; }
      .cards-3col { grid-template-columns: 1fr; }
      .photos-2x2 { grid-template-columns: 1fr; grid-template-rows: repeat(4, 240px); }
      .layout-feat-photo,
      .layout-photo-feat,
      .layout-feat-photo-04 { grid-template-columns: 1fr; }
      .layout-feat-photo .photo-card,
      .layout-photo-feat .photo-card,
      .layout-feat-photo-04 .photo-card { height: 260px; }
      .diagram-card { padding: 20px; }
      .diagram-caption__title { font-size: 18px; }
    }