/* ============================================================
   애드멘토 모바일 최적화 레이어 (contents.css 뒤에 로드)
   - 원본은 데스크톱 전용(1200px 고정 그리드)이었음
   - 이 파일은 미디어쿼리 오버라이드만 담음 → 데스크톱 화면 무영향
   - (주의) css/mobile.css 는 옛 그누보드 모바일스킨 원본 → 별개 파일
   브레이크포인트: 1024(축소 데스크톱) / 900(모바일 전환) / 640 / 400
   ============================================================ */

/* ---------- ~1024px : 고정 1200px 그리드 해제 ---------- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  .baseWidth, .innerWidth { max-width: 100%; padding-left: 20px; padding-right: 20px; }
  .header > div { width: 100%; padding: 0 16px; }
  .item { width: calc(100% - 40px); }
  .scroll { left: 20px; margin-left: 0; }
  .custTel { left: auto; right: 16px; margin-left: 0; }
  .gcWrap, .gcBox, .gcBtnArea { width: 100% !important; }
}

/* ---------- ~900px : 모바일 레이아웃 ---------- */
@media (max-width: 900px) {

  /* ===== 헤더 / 내비 ===== */
  .header { height: 60px; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
  .logo { width: 132px; height: 30px; }
  .nav { display: none; }               /* 데스크톱 내비 숨김 → 햄버거로 대체 */

  .mobMenuBtn {
    display: flex !important; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 9px;
    background: transparent; border: 0; cursor: pointer; z-index: 10001; position: relative;
  }
  .mobMenuBtn i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; }
  body.mob-open .mobMenuBtn i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mob-open .mobMenuBtn i:nth-child(2) { opacity: 0; }
  body.mob-open .mobMenuBtn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobMenu {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(10, 14, 30, .97);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  body.mob-open .mobMenu { opacity: 1; visibility: visible; }
  .mobMenu a {
    display: block; color: #fff; font-size: 21px; font-weight: 800; padding: 13px 30px; text-align: center;
  }
  .mobMenu a.mm-tel {
    margin-top: 22px; font-size: 17px; color: #ffb340;
    border: 1px solid rgba(255, 179, 64, .5); border-radius: 999px; padding: 11px 26px;
  }
  body.mob-open { overflow: hidden; }

  /* ===== 히어로(#mainVisual) ===== */
  #videobcg { object-fit: cover; width: 100%; height: 100%; }
  .txtBox > span:nth-child(1), .txtBox > span:nth-child(2), .txtBox > span strong { font-size: 27px; }
  .txtBox > span:nth-child(2) { margin: 10px 0; }
  .txtBox p span, .txtBox p span em { font-size: 27px; }
  .custTel { bottom: 18px; }
  .custTel img { width: 150px; height: auto; display: block; }
  .scroll { bottom: 22px; }

  /* ===== 섹션1: 카운터 ===== */
  .truthDiv h2 { flex-direction: column; align-items: center; }
  .truthDiv h2 span, .truthDiv h2 strong { font-size: 27px; margin-left: 0; }
  .truthList { padding: 40px 0 0; flex-direction: column; gap: 34px; }
  .truthList article:nth-child(1), .truthList article:nth-child(2), .truthList article:nth-child(3) { flex: none; }
  .truthList article span { font-size: 14px; margin: 12px 0 10px; }
  .truthList article p strong { font-size: 58px; }
  .truthList article p em { font-size: 24px; }

  /* ===== 섹션2: 특별함 ===== */
  .s2_box h2 { font-size: 24px; padding: 16px 0 10px; }
  .s2_box div em, .s2_box div strong { font-size: 32px; }
  .s2_box ul { margin: 30px 0; flex-wrap: wrap; }
  .s2_box ul li { margin: 0 10px 8px; }
  .s2_box p { padding: 0 20px; }
  .s2_box p span { font-size: 14px; padding: 5px 0; }

  /* ===== 섹션3: 브랜딩 (데스크톱 GSAP 핀 → 모바일 정적 스택) ===== */
  .section3 { height: auto !important; padding: 60px 0; }
  .s3_box { position: static !important; flex-direction: column; height: auto !important; }
  .s3_con { flex: none; height: auto; padding: 0 20px; }
  .s3_conbox { padding: 0 !important; width: auto !important; }
  .s3_conbox h3 span, .s3_conbox h3 span strong { font-size: 25px !important; }
  .con_tBox { position: static !important; height: auto !important; }
  .con_t1, .con_t2, .con_t3 {
    position: static !important; opacity: 1 !important; top: auto !important;
    margin: 26px 0 0;
  }
  .con_t1 em, .con_t2 em, .con_t3 em { font-size: 15px !important; }
  .con_t1 div strong, .con_t2 div strong, .con_t3 div strong { font-size: 18px !important; }
  .con_t1 p span, .con_t2 p span, .con_t3 p span,
  .con_t1 p strong, .con_t2 p strong, .con_t3 p strong { font-size: 13.5px !important; }
  .s3_img { position: static !important; width: 100% !important; height: 230px !important; margin-top: 30px; flex: none !important; }
  .img301 { position: static !important; opacity: 1 !important; width: 100% !important; height: 230px !important;
    background-size: cover !important; background-position: center !important; transform: none !important; }
  .img302, .img303 { display: none !important; }

  /* ===== 섹션4: 서비스 ===== */
  .serCon h3 span { font-size: 23px !important; }
  .serCon h3 strong { font-size: 25px !important; }
  .serCon p span { font-size: 13.5px !important; display: block; }

  /* ===== 섹션5: 그래프 포트폴리오 ===== */
  .gaThumDiv { height: auto !important; }
  .gcWrap {
    position: static !important; transform: none !important;
    width: 100% !important; height: auto !important; padding: 20px 12px 8px !important;
  }
  .gcBtnArea { display: none !important; }
  .gcBox { width: 100% !important; height: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gcTitle strong { font-size: 19px !important; }
  .gcTitle span { font-size: 12px !important; display: block; }
  .gtp { font-size: 12.5px !important; }
  .graphView { min-width: 620px; }
  .gpLine { padding-right: 40px !important; }
  .gpLine li { flex: 0 0 72px; margin-right: 34px; height: 380px; }
  .pgBox { position: static !important; margin: 14px auto 0 !important; transform: scale(.85); }
  .tipText { position: static !important; margin: 6px 14px 12px !important; font-size: 11.5px !important; }
  .graphTitle h3 { font-size: 22px !important; }
  .graphTitle h3 strong { font-size: 22px !important; }
  .graphTitle p { font-size: 13px !important; }

  /* ===== 인터뷰 영상 레이어 ===== */
  .adMovieWrap { width: 94vw !important; }
  .adMovieWrap .mv { position: relative !important; height: auto !important; }
  #videobcg2 { position: relative !important; min-width: 0 !important; min-height: 0 !important;
    width: 100% !important; height: auto !important; }

  /* ===== 섹션6: 광고계약 ===== */
  .s6_box { flex-direction: column; }
  .advLeft { flex: none; width: 100%; padding: 0; }
  .advLeft h2 span, .advLeft h2 span strong { font-size: 27px; margin: 6px 0; }
  .advLeft p span, .advLeft p span strong { font-size: 14.5px; margin: 6px 0; }
  .advRight { width: 100% !important; height: auto !important; margin-top: 26px; }
  .movieBox { height: auto !important; }
  #videobcg1 { position: relative !important; left: 0 !important; right: auto !important;
    min-width: 0 !important; min-height: 0 !important;
    width: 100% !important; height: auto !important; display: block; }
  .movieBox p { position: absolute; }
  .movieBox p span, .movieBox p span strong { font-size: 19px !important; }

  /* ===== 카톡 후기 ===== */
  .kakaoSection article > h2 span, .kakaoSection article > h2 span strong { font-size: 25px; }
  .kakaoSection article > p span, .kakaoSection article > p span strong { font-size: 13.5px; }
  .advSlider, .spaceWrap, .sliderBox { width: 100% !important; }
  .sliderBox { padding: 0 14px; }
  .sliderSwiper .swiper-slide img { width: 100%; height: auto; }

  /* ===== 섹션7: 집중 ===== */
  .s7_box h2 span, .s7_box h2 span strong { font-size: 25px; }
  .s7_box p span { font-size: 13.5px; }
  .s7_list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 10px; }
  .s7_list li { margin: 0 !important; width: auto !important; flex: none !important; }
  .s7_list li strong { font-size: 13px !important; }

  /* ===== 섹션8: 마케팅 상품 ===== */
  .s8_box h2 span, .s8_box h2 strong { font-size: 25px; }
  .s8_list { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 18px 4%; }
  .s8_list li { flex: 0 0 30% !important; margin: 0 !important; width: auto !important; }
  .s8_list li div { display: flex; justify-content: center; }
  .s8_list li div i { transform: scale(.82); transform-origin: center; }
  .s8_list li strong { font-size: 12px !important; }
  .vp_img { display: none !important; }

  /* ===== 섹션9: 반려동물 ===== */
  .section9 { height: auto !important; padding: 56px 0 40px; }
  .s9_box { height: auto !important; }
  .s9_box h2 { position: static !important; margin: 0 0 18px !important; text-align: center; }
  .s9_box h2 span, .s9_box h2 span em { font-size: 24px !important; }
  .s9_con { position: static !important; margin-top: 14px; padding: 0 14px; flex-wrap: wrap; }
  .s9_con article { align-items: center; }
  .s9_con article p { flex-wrap: wrap; justify-content: center; margin: 0 8px; }
  .s9_con article p span, .s9_con article p em { font-size: 15px !important; }
  .s9_con article i.ddaum_first, .s9_con article i.ddaum_last { width: 20px !important; height: 21px !important; flex: 0 0 auto; }
  .advSlider2, .spaceWrap2 { width: 100% !important; }
  .spaceThum2 img { width: 100%; height: auto; }

  /* ===== 섹션10: QnA ===== */
  .s10_box { flex-direction: column; }
  .s10_box h2 { flex: none; padding: 0 0 8px; text-align: center; }
  .s10_box h2 span, .s10_box h2 strong { font-size: 26px; display: inline-block; margin-top: 0; }
  .s10_box h2 strong { margin-left: 8px; }
  .s10_box .s10_con { flex-direction: column-reverse; }   /* 질문 목록을 위로 */
  .qnaList { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 4px 22px; }
  .qnaList li, .qnaList li.on { width: auto !important; padding: 9px 13px !important; font-size: 12px !important; margin: 0 !important; border-radius: 8px; }
  .qnaWrap {
    flex: none !important; width: 100% !important; height: auto !important;
    background: none !important; display: flex; justify-content: center; padding: 0 0 10px;
  }
  .qnaCon { width: 100%; max-width: 400px; height: 520px; }

  /* ===== 섹션11: 문의 폼 ===== */
  .section11 { padding: 64px 0 30px !important; }
  .s11_header { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 16px; }
  .s11_header h2 { flex-wrap: wrap; }
  .s11_header h2 strong, .s11_header h2 span { font-size: 24px; }
  .s11_header p { font-size: 24px !important; }
  .formBoxFooter article { margin-top: 18px; }
  .formBoxFooter label { font-size: 13.5px !important; display: block; margin-bottom: 8px; }
  .inpx { width: 100% !important; box-sizing: border-box; font-size: 15px; }
  .texta { width: 100% !important; box-sizing: border-box; min-height: 110px; font-size: 15px; }
  .todayPrice { display: flex; flex-direction: column; gap: 10px; }
  .todayPrice > div { display: flex; align-items: center; gap: 8px; }
  .todayPrice > div strong { flex: 0 0 auto; font-size: 14px; }
  .todayPrice > div .inpx { flex: 1; width: auto !important; }
  .todayPrice i { display: none; }
  .policyArea { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; }
  .btnApp { width: 100% !important; height: auto !important; padding: 15px 0 !important; font-size: 16px !important; }
  .agreeBoxWrap { font-size: 11px !important; line-height: 1.7; }

  /* ===== 푸터 ===== */
  .footerSection { padding: 6px 0; }
  .footer { padding: 22px 18px !important; }
  .footer ul li { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 4px 0; }
  .footer ul li span { font-size: 11px !important; margin: 0 !important; display: inline-block; }
  .footer p { font-size: 11px !important; padding-top: 10px; }
}

/* ---------- ~640px : 소형 폰 미세조정 ---------- */
@media (max-width: 640px) {
  .txtBox > span:nth-child(1), .txtBox > span:nth-child(2), .txtBox > span strong,
  .txtBox p span, .txtBox p span em { font-size: 21px; }
  .truthList article p strong { font-size: 48px; }
  .s2_box ul li { margin: 0 6px 8px; }
  .s8_list li { flex: 0 0 46% !important; }
  .custTel img { width: 128px; }
  .gpLine li { flex: 0 0 64px; margin-right: 26px; height: 330px; }
  .graphView { min-width: 560px; }
}

/* ---------- ~400px : QnA 말풍선 스케일 보정 ---------- */
@media (max-width: 400px) {
  .qnaCase { transform: scale(.86); transform-origin: top right; }
  .qnaCon { height: 460px; }
}

/* 데스크톱에서 모바일 전용 요소 숨김 (미디어쿼리 밖 기본값) */
@media (min-width: 901px) {
  .mobMenuBtn, .mobMenu { display: none !important; }
}