css module 질문

안녕하세요 선생님 개인 포폴사이트 제작중에 궁금한점이 생겨 질문드립니다.!

[ App.js 내용 ]

 <div className="App">
      <Header navigate={navigate}/> ---> (nav bar 부분이고 App.js 하단에 컴포넌트 시켯습니다)

      <Routes>
        <Route path='/'element={<Main/>}/>
        <Route path="/skin" element={<Skin/>}/>
        <Route />
        <Route />
      </Routes>

      <div className='footer_area'> ---> (하단 footer 부분)
        <div className='footer_inner'>
          <div className='copyright'>
            © Aesop
          </div>
          <div className='sns'>
           <div/>
         

여기서 <Main /> 컴포넌트는 따로 js 파일을 만들어 컴포넌트를 했습니다

[ Main.js 내용]

import style from './Main.module.css' (메인 레이아웃이 다른 css파일과 중복되지 않게 하기 위해 모듈css파일을 따로만들었음)

<div className="main">
         <Swiper
            pagination={{
            dynamicBullets: true,
         }}
            modules={[Pagination]}
            className="mySwiper"
         >
          <SwiperSlide>
            <div className='main-img-slide'>
              < img src={process.env.PUBLIC_URL + '/images/main01.png'} />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='main-img-slide'>
              < img src={process.env.PUBLIC_URL + '/images/main02.png'} />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='main-img-slide'>
              < img src={process.env.PUBLIC_URL + '/images/main03.png'} />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='main-img-slide'>
              < img src={process.env.PUBLIC_URL + '/images/main04.png'} />
            </div>
          </SwiperSlide>
        </Swiper>
      </div>



여기서 궁금한점

1) module.css를 사용하기 위해서 className={style.Swiper} 이런식으로 붙혀야 적용이 된다고 알고있습니다.
그럼 모든 className앞에 style을 붙혀서 사용해야하는건지 만약 className="swiper-main" 이런 중간에
특수문자가(-) 있는 이름앞엔 style이 안붙는데 이유가 무엇인가요

2) App.js에 헤더 부분과 푸터부분은 다른 서브페이지에서도 공통으로 사용해야하니 여기다가 HTML을 고정시켜 놓는게 맞는건지

3) App.css가 찾아보니 App.css안에 기재된 내용과 다른 Main.module.css 와 내용이 겹치니까
App.css 도 App.moudule.css 로 따로 만들어서 App.js에 적용시켜 사용해야하는건지 헷갈립니다
(이렇게 적용해보니까 메인페이지 레이아웃이 이상해졌습니다..)

4) Main.module.css 내용에는 네브바 , 푸터 제외한 메인화면 css만 넣으면되는걸까요 

5) 그리고 반응형 css는 만약 App.module.css를 만들어야한다면 여기다가 공통 반응형 코드를 넣어야하는걸까요?

라우터를 사용해서 Navigate로 페이지를 나누는 과정에서 페이지마다 중복되지않고
적용되게 하고싶은 css를 찾다보니 이런 궁금증이 생겨 질문드립니다!