/* 사용자 결정으로 시안(design/v26)과 다르게 그리는 규칙 — 시안 CSS 다음, 마지막에 로드된다.
   규칙마다 왜·어디서·어느 폭인지 적는다. 목록은 DESIGN-SYSTEM.md §11. */

/* ① customers-kusf 'FLOW' 단계 5칸 (1101px 이상)
   반쪽 칸(509–582px)에 5칸이 한 줄로 들어가 칸 안쪽이 57–71px 뿐이라 "후보 구간"·"검수합니다." 가 글자 단위로 깨지고
   한두 글자가 아래로 떨어졌다(시안 그대로의 문제 — 시안은 6칸 단계에만 데스크톱 3열 규칙이 있다).
   시안이 721–1100px 에서 쓰는 2열 배치(마지막 홀수 칸은 가로 전체)를 데스크톱에도 쓴다. */
@media (min-width:1101px){
  body[data-page="customers-kusf"] main .split .steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-page="customers-kusf"] main .split .steps>:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ② 메인 산업 목록(world-index) 6칸 (1101–1199px)
   칸 여백 36px 때문에 안쪽이 112px 뿐이라 "시설 보안· / 안전" · "스포츠· / 미디어" · "플랜트· / 인프라" 로 끝이 떨어졌다(1101–1176px).
   바로 아래 구간(≤1100px)에서 시안이 쓰는 칸 여백 24px 를 이 구간에도 쓴다. */
@media (min-width:1101px) and (max-width:1199px){
  body.main-v4 .world-index a{padding-left:24px;padding-right:24px}
}

/* ③ opx 비교표(#compare) (721–1100px)
   5열 표가 태블릿 폭에 끼어 칸마다 "참여" · "맥락" · "출하" 같은 한두 글자 끝줄과 글자 단위 깨짐이 수십 건이었다(시안 그대로).
   시안이 720px 이하에서 쓰는 카드 배치(행마다 2열 카드, 첫·끝 칸은 가로 전체)를 이 구간에도 쓴다 — 규칙은 editorial-v13.css 그대로. */
@media (min-width:721px) and (max-width:1100px){
  #compare .tbl{display:block;min-width:0}
  #compare .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #compare .tbl tbody{display:block}
  #compare .tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;padding:24px 0;border-bottom:1px solid #d8dccf}
  #compare .tbl td{padding:0;border:0;min-width:0;font-size:14px}
  #compare .tbl td::before{content:attr(data-label);display:block;color:#858b7d;font-size:11px;margin-bottom:4px}
  #compare .tbl td:first-child{grid-column:1/-1;font-size:17px;color:#252c21}
  #compare .tbl td:first-child::before{display:none}
  #compare .tbl td:last-child{grid-column:1/-1}
  #compare .tbl .bd{font-size:12px}
}

/* ④ 메인 엔진 여정(engine-journey) 단계 번호 (721–734px 에서만 차이)
   옆 긴 라벨에 밀려 번호 칸이 줄어들며 "03" 이 "0 / 3" 으로 갈라졌다. 번호 칸은 줄어들지 않게 — 줄어들지 않던 폭에서는 그대로다. */
body.main-v4 .journey-label>span:first-child{flex-shrink:0}

/* ⑤ 문의 폼 서버 접수 (사용자 결정 2026-10-26) — 개인정보 수집·이용 동의 칸 · 함정 칸
   시안 폼의 선(1px --line) · 바탕(--paper) · 안내(.note 12px) 그대로, 체크 칸은 버튼과 같은 2px 잉크 테두리 + 주황 채움(픽셀 모양) */
html body main .form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
html body main .form .consent{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line,#DCDED3);background:var(--paper,#F8F7F2)}
html body main .form label.check{display:flex;align-items:flex-start;gap:10px!important;color:var(--ink,#20231D);cursor:pointer}
html body main .form input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;padding:0!important;border:2px solid #20231D;background:#FBF9F1;cursor:pointer}
html body main .form input[type=checkbox]:checked{background:#FF6A00;box-shadow:inset 0 0 0 3px #FBF9F1}
html body main .form input[type=checkbox]:focus-visible{outline:2px solid #FF6A00;outline-offset:2px}
html body main .form button[disabled]{opacity:.6;cursor:progress}

/* ⑥ 메인 첫 화면 '프로젝트 문의 ↗' 밑줄 (사용자 지적 2026-10-27 "언더바 라인이 좀 떨어져 있다")
   위아래 여백 12px 에 큰 화살표(17px)가 줄 높이를 키워 밑줄이 글자에서 떠 있었다. 밑줄만 5px 올려, 시안에서 같은 모양인
   '전체 적용 사례 ↗'(under-link)와 같은 간격으로. 여백을 줄이면 버튼이 낮아져 768px 이상에서 왼쪽 큰 제목까지 8px 올라가서,
   버튼 크기는 그대로 두고 밑줄을 테두리 대신 배경 줄(2px, 같은 색)로 그린다. 끝의 주황 점도 함께 5px 위로. */
body.main-v4 .hero-cta .plain-button{border-bottom-color:transparent;background:linear-gradient(#252a21,#252a21) left calc(100% - 3px)/100% 2px no-repeat}
body.main-v4 .hero-cta .plain-button:after{bottom:2px}