/* 80-mobile — 전역 반응형 보정 (8번 소유). 새 클래스 없음, 기존·공용 선택자만.
   메뉴·햄버거·메뉴 CTA = 20-flow(2번), 홈 .vis·#proof = 30-home(3번) 우선. */

@media (max-width:760px){
  /* 섹션 리듬: 위아래 80+80 → 56+56 */
  :root{--secpad:56px}
  .sec-h,.sec.wide .sec-h{margin-bottom:24px}
  .sec.wide .sec-h{padding-bottom:24px}
  .sec-b>*+*{margin-top:28px}
  .sec-b>h3{margin-top:44px}
  .cta .grid{padding-top:64px;padding-bottom:56px;row-gap:28px}
  .cta h2::before{margin-bottom:24px}

  /* 상세 히어로 압축: 사진이 첫 화면에 들어오도록 (D4·D29) */
  .hero .grid,.hero.split .grid{padding-top:28px;padding-bottom:0}
  .hero .kicker{margin-bottom:12px}
  .hero .lead,.hero.split .lead{margin-top:18px;padding-top:14px;font-size:16px;line-height:1.7}
  .hero-img,.hero.split .hero-img{margin:20px calc(var(--mar) * -1) 0}
  .hero .grid>.hero-img{justify-self:stretch;width:auto}
  .hero-img img,.hero.split .hero-img img{aspect-ratio:3/2}
  .hero-img img.natural{aspect-ratio:auto}
  /* 2문장 lead 페이지: 사진을 H1 바로 아래로 시각 이동(DOM 불변, D29) */
  .pg-lake-purification .hero .grid>.kicker,.pg-lake-purification .hero .grid>h1,
  .pg-aquaculture .hero .grid>.kicker,.pg-aquaculture .hero .grid>h1,
  .pg-bubble-explosion .hero .grid>.kicker,.pg-bubble-explosion .hero .grid>h1,
  .pg-doosan-project .hero .grid>.kicker,.pg-doosan-project .hero .grid>h1{order:-2}
  .pg-lake-purification .hero .grid>.hero-img,.pg-aquaculture .hero .grid>.hero-img,
  .pg-bubble-explosion .hero .grid>.hero-img,.pg-doosan-project .hero .grid>.hero-img{order:-1}

  /* 히어로 facts: 2열 칸(홀수 마지막 span 2), 숫자 위·라벨 아래 */
  .hero .facts,.hero.split .facts,.hero .hero-img+.facts,.hero.split .hero-img+.facts{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut);margin-top:20px;border-top:0}
  .hero .facts li,.hero .hero-img+.facts li,.hero.split .hero-img+.facts li{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;padding:12px 0 14px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
  .hero .facts li:last-child:nth-child(odd){grid-column:1/-1}
  .hero .facts b,.hero .hero-img+.facts b,.hero.split .hero-img+.facts b{text-align:left;font-size:18px;line-height:1.35}
  .hero .facts li>span{font-size:13.5px;line-height:1.45}
  .hero .facts b span{font:inherit;color:inherit}

  /* 표: 짓눌린 열 대신 가로 스크롤 + 첫 열 고정 + 오른쪽 그림자 힌트 */
  .tbl{margin-right:calc(var(--mar) * -1);padding-right:var(--mar);
    background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/24px 100% no-repeat local,
               linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/24px 100% no-repeat local,
               radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) 100% 0/12px 100% no-repeat scroll}
  .sec.gray .tbl,.sec.dark .tbl{background-image:linear-gradient(90deg,var(--gray) 30%,rgba(245,245,245,0)),linear-gradient(270deg,var(--gray) 30%,rgba(245,245,245,0)),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent)}
  /* 캡션은 표(min-width) 폭이 아니라 화면 폭에 맞춰 줄바꿈, 스크롤해도 왼쪽 고정 */
  .tbl caption{position:sticky;left:0;max-width:calc(100vw - 2 * var(--mar));white-space:normal}
  table.data:has(tr>:nth-child(3)){min-width:520px}
  table.data:has(tr>:nth-child(4)){min-width:600px}
  table.data th,table.data td{padding:12px 14px 12px 0}
  table.data:has(tr>:nth-child(3)) tr>:first-child{position:sticky;left:0;z-index:1;max-width:9em;background:#fff;box-shadow:1px 0 0 var(--line)}
  .sec.gray table.data tr>:first-child,.sec.dark table.data tr>:first-child{background:var(--gray)}

  /* 사진: 2열 작은 칸도 실제 사진이 꽉 차게 (세로·그래프 제외) */
  .figs{gap:16px 10px}
  .figs figure:not(.tall):not(:has(.chart)) img{object-fit:cover;aspect-ratio:4/3;height:auto}

  /* 터치 영역 44/48px */
  .btn,.btn-w,.btn-o,.cta a{min-height:48px;align-items:center}
  .f-links{gap:0 20px}
  .f-links a{display:inline-flex;align-items:center;min-height:44px}
  .index li a{min-height:48px}
  table.data td a,table.data th a{display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box}
  /* inline padding: 줄 높이(마커 정렬)는 그대로, 터치 영역만 44px+ */
  ul.list li a{display:inline;padding:13px 0}
  /* 밑줄은 글자에 붙이고(border 대신 text-decoration), padding은 터치 영역만 넓힘 */
  .sec-b p a,.faq p a{padding-block:6px;border-bottom:0;text-decoration:underline 1px;text-underline-offset:3px}
}

@media (max-width:374px){
  :root{--mar:16px}
}