/* ===================================================================
       메인 팝업 3종 전용 레이아웃 (이 페이지 전용, custom_2026.css / pad_2026.css
       의 main_pop2 / main_pop3 / main_pop_p 는 더 이상 사용하지 않음)

       - mpop-1 : layerPop2  (뒤쪽 카드, z-index 가장 낮음)
       - mpop-2 : layerPop3  (가운데 카드)
       - mpop-3 : layerPop   (맨 앞 카드, z-index 가장 높음)

       규칙
       1) 화면 폭이 이미지 3장(각 최대 500px) + 여백을 나란히 놓기에 충분하면
          → 가로 나열 (약간의 간격)
       2) 나란히 놓기엔 좁지만 이미지 1.5장 폭(750px)보다는 넓으면
          → 가로로 겹치는 부채꼴
       3) 750px 이하(모바일)면
          → 세로로 어긋나게 겹침
       =================================================================== */

    .mpop{
      position:absolute;
      background:#fff;
      text-align:center;
      box-shadow:2px 2px 14px #000;
      box-sizing:border-box;
    }
    .mpop-1{ z-index:9997; }
    .mpop-2{ z-index:9998; }
    .mpop-3{ z-index:9999; }

    /* 기본값 = 부채꼴 (750px 초과 ~ 1600px 미만) - 왼쪽 기준, top 동일(가로로만 겹침), 크기 확대 */
    .mpop-1{ left:4%; top:100px; width:44%; max-width:500px; min-width:380px; }
    .mpop-2{ left:22%; top:100px; width:44%; max-width:500px; min-width:380px; }
    .mpop-3{ left:40%; top:100px; width:44%; max-width:500px; min-width:380px; }

    @media screen and (min-width:1600px){
      .mpop-1{ left:100px; top:100px; width:500px; max-width:500px; min-width:500px; }
      .mpop-2{ left:620px; top:100px; width:500px; max-width:500px; min-width:500px; }
      .mpop-3{ left:1140px; top:100px; width:500px; max-width:500px; min-width:500px; }
    }

    /* 3) 이미지 1.5장 폭(750px) 이하: 모바일 - 세로로 어긋나게 겹침 */
    @media screen and (max-width:750px){
      .mpop-1{ left:50%; top:130px; width:92%; max-width:500px; min-width:260px; transform:translateX(-50%); }
      .mpop-2{ left:50%; top:160px; width:92%; max-width:500px; min-width:260px; transform:translateX(-50%); }
      .mpop-3{ left:50%; top:190px; width:92%; max-width:500px; min-width:260px; transform:translateX(-50%); }
    }