/*
  넓은 화면(1100px 이상) 전용 배치 — 2026-09-19 신설. 루트·고시원 공용.
  휴대폰·태블릿은 이 파일의 영향을 받지 않는다(전부 min-width:1100px 안).
  왜: PC에서 본문이 휴대폰 폭(600px) 한 줄로 내려와 1920 화면 가로의 70%가 비어 보였다.
  방법: 섹션을 2단으로. 왼쪽 .shead(번호·제목·설명)는 스크롤해도 따라 내려오고, 오른쪽에 실물(계산기·동선도·표·폼).
        장식 대신 구조와 실사로 채운다(소방필증 홈페이지에서 얻은 결론). 사진 벽 띠(.wallband)는 04 가격·09 신청 앞.
*/

/* 사진 벽 띠: 휴대폰에서는 숨김 */
.wallband{display:none}

@media (min-width:1100px){
  section.wrap,section.nots > .wrap,footer.wrap{max-width:1120px}
  section.wrap,section.nots > .wrap{display:grid;grid-template-columns:360px minmax(0,1fr);column-gap:72px;align-items:start}
  section.wrap{padding-top:84px;padding-bottom:84px}
  section.nots{padding:84px 0}
  section.wrap > *,section.nots > .wrap > *{grid-column:2;min-width:0}

  /* 왼쪽 제목 칸: 오른쪽 내용이 끝날 때까지 따라 내려온다 */
  .shead{grid-column:1 !important;grid-row:1 / span 30;position:sticky;top:56px;align-self:start}
  /* 가로 전체를 쓰는 내용(띠·사례 카드)이 있는 섹션은 제목 칸이 그 위에서 멈춰야 겹치지 않는다.
     span = 가로 전체 내용 앞에 오는 오른쪽 칸 요소 수 (03: 결과 목록·캡처 2장 묶음 / 05: 휴대폰. 루트 02는 오른쪽 칸 요소가 없어 빈 줄이 되고 높이는 0) */
  #results .shead{grid-row:1 / span 2;position:static}
  #works .shead{grid-row:1 / span 1;position:static}   /* 따라 내려오기는 섹션 끝까지 가므로 이 두 섹션은 끈다 */
  .shead h2{font-size:32px;line-height:1.3;margin-bottom:20px}
  .shead p{font-size:16px}
  .shead .soft{font-size:15.5px}

  /* 가로 전체를 쓰는 것: 흐르는 띠와 그 제목, 사례 카드 묶음 */
  section.wrap > .rvh,section.wrap > .rvband{grid-column:1 / -1}
  section.wrap > .rvh{margin-top:48px;font-size:22px}
  section.wrap > .works{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
  .works .work{margin:0;height:100%}

  /* 섹션별 */
  .calc{padding:26px 28px}
  .flow{padding:28px 40px}
  .flow svg{max-width:560px;margin:0 auto;display:block}
  .shead .pick{margin-top:22px}
  .works-phones{height:360px;margin:0}
  /* 대표 소개(.about): 왼쪽은 번호+사진, 이름·경력·소개글은 전부 오른쪽 (2026-09-19)
     제목 칸과 .me 상자를 풀어서(display:contents) 사진과 이름 칸을 따로 배치한다 */
  .about .shead,.about .shead .me{display:contents}
  .about .num{grid-column:1;grid-row:1}
  .about .me img{grid-column:1;grid-row:2 / span 4;width:100%;max-width:360px;align-self:start}
  .about .me .who{grid-column:2;grid-row:2;padding-top:0}
  .about .me .who b{font-size:30px;letter-spacing:-.02em}
  .about .me .who span{font-size:16.5px;margin-top:10px;line-height:1.75;color:var(--text2)}
  .about > p{grid-column:2;margin-top:22px}
  .about > p:nth-of-type(1){grid-row:3}
  .about > p:nth-of-type(2){grid-row:4}
  section.wrap > p{font-size:18px}
  .shead .steps{margin-top:22px}
  #apply .form{margin-top:0 !important}
  section.wrap > .mid{margin-top:36px}
  .shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .shots .shot{margin-top:14px}
  .shots .shot:only-child{grid-column:1 / -1;max-width:760px}   /* 2026-09-19: 부천 작업 보고 카드를 빼서 한 장만 남음 */

  /* 사진 벽 띠: 첫 화면과 같은 사진 24장, 높이 180px, 양 끝은 배경으로 스며든다 */
  .wallband{display:block;position:relative;height:180px;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
  .wallband .wall{position:absolute;left:50%;top:-40%;height:180%;display:flex;gap:10px;transform:translateX(-50%) rotate(-8deg);opacity:0;transition:opacity 1.4s ease}
  .wallband .wall.on{opacity:1}
  .wallband .wall .col{flex:0 0 150px;display:flex;flex-direction:column;gap:10px}
  .wallband .wall img{width:150px;height:191px;object-fit:cover;border-radius:10px;display:block}
  .wallband .shade{position:absolute;inset:0;
    background:linear-gradient(180deg,var(--bg) 0%,rgba(14,14,17,.55) 30%,rgba(14,14,17,.55) 70%,var(--bg) 100%)}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .wallband .wall .col{animation:colup 70s linear infinite}
  .wallband .wall .col:nth-child(even){animation-direction:reverse;animation-duration:85s}
}