/* ============================================
   WithJ Studio - Mobile Responsive Styles
   Breakpoint: 768px 이하
   PC 스타일 절대 건드리지 않음
   ============================================ */

/* ============================================
   전체 적용 (PC + 모바일)
   ============================================ */

/* What We Do 호버 이미지 숨김 (나중에 복원 가능) */
.image-wrapper {
   display: none !important;
}

@media (max-width: 768px) {

   /* ============================================
      0. lang="ko" 폰트 렌더링 보정
      ============================================ */

   body {
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
   }

   /* 히어로 타이포 굵기 보강 */
   .char-anim {
      -webkit-text-stroke: 0.5px currentColor;
   }

   /* 푸터 LET'S TALK 굵기 보강 */
   .tp-footer-top-title {
      font-weight: 900 !important;
      -webkit-text-stroke: 0.5px currentColor;
   }

   /* 혜택 섹션 한글 부제 — WithJ만 굵게 */
   .withj-bold {
      font-weight: 900 !important;
      -webkit-text-stroke: 0.8px currentColor;
   }

   /* 섹션 대제목 (FROM DESIGN TO LAUNCH 등) */
   .tp-about-wd-title {
      font-weight: 900 !important;
   }

   /* What We Do 서비스 제목 */
   .tp-service-wd-item-title h3 {
      font-weight: 900 !important;
   }

   /* 혜택 섹션 제목 */
   .tp-skill-wd-item h3 {
      font-weight: 900 !important;
   }

   /* 포트폴리오 카드 제목 */
   .tp-portfolio-wd-title {
      font-weight: 900 !important;
   }

   /* What's Included 등 fw-700 */
   .fw-700 {
      font-weight: 900 !important;
   }

   /* 혜택 영문 제목 */
   .tp-awards-wd-item span.tp-text-common-black {
      font-weight: 900 !important;
   }

   /* Teko 스타일 텍스트 */
   .tp-ff-teko {
      font-weight: 900 !important;
   }

   /* ============================================
      0. 커스텀 커서
      ============================================ */

   #magic-cursor,
   #ball {
      display: none !important;
   }


   /* ============================================
      0.5 프리로더
      ============================================ */

   /* WITH J 프리로더 텍스트 20px → 40px (2배) */
   .loader-wrap .loader-wrap-heading .load-text {
      font-size: 40px !important;
   }


   /* ============================================
      1. 헤더 / 로고
      ============================================ */

   .tp-header-logo {
      margin-left: 10px !important;
      margin-top: 8px;
   }

   /* WITH J 텍스트 28px → 24px */
   .tp-header-logo a > div:first-child {
      font-size: 24px !important;
   }

   /* WEB STUDIO 텍스트 9px → 8px */
   .tp-header-logo a > div:last-child {
      font-size: 8px !important;
   }

   /* 오프캔버스 메뉴 폰트 크기 (18px → 28px) */
   .tp-offcanvas-menu ul li {
      margin-bottom: 25px !important;
   }

   .tp-offcanvas-menu ul li > a {
      font-size: 50px !important;
      font-weight: 600 !important;
   }

   /* 오프캔버스 상단 X 버튼 여백 축소 */
   .tp-offcanvas-top {
      margin-bottom: -10px !important;
      position: relative;
      z-index: 10;
   }

   /* 오프캔버스 Navigation 제목 */
   .tp-offcanvas-nav-title {
      padding-bottom: 15px;
      position: relative;
      top: -18px;
      z-index: 1;
   }

   /* 오프캔버스 메뉴 위아래 구분선 */
   .tp-offcanvas-menu {
      border-bottom: 1px solid #ccc;
      padding-top: 25px;
      padding-bottom: 25px;
      margin-bottom: 10px;
      position: relative;
   }
   .tp-offcanvas-menu::before {
      content: "";
      position: absolute;
      top: -25px;
      left: 0;
      right: 0;
      border-top: 1px solid #ccc;
   }

   /* 오프캔버스 Information 섹션 아래로 */
   .tp-offcanvas-contact {
      margin-top: 20px;
   }




   /* ============================================
      2. Hero 섹션
      ============================================ */

   /* Details Make the Difference 카드
      col-sm-8이 576px 미만에서 100%로 펼쳐져 배경 이미지 가림 → 50%로 고정
      오른쪽 50%에 배경 사진이 보이도록 */
   .tp-hero-wd-bottom .col-sm-8 {
      width: 50% !important;
      max-width: 50% !important;
      flex: 0 0 50% !important;
      margin-left: 10px !important;
   }

   /* 카드 내부 padding 축소 */
   .tp-hero-wd-bottom-info {
      padding: 16px 16px 20px 16px !important;
   }

   /* Details Make the Difference 타이틀 폰트 축소 (fs-25 → 16px) */
   .tp-hero-wd-bottom-title {
      font-size: 16px !important;
   }

   /* Built With 폰트 축소 (fs-25 → 14px) */
   .tp-hero-wd-bottom-info .tp-ff-teko.fs-25 {
      font-size: 14px !important;
   }

   /* 뱃지 아이콘 크기 축소 (26px → 16px) */
   .tp-hero-wd-bottom-info .tp-footer-social ul li a img,
   .tp-hero-wd-bottom-info .tp-footer-social ul li span img {
      width: 16px !important;
      height: 16px !important;
   }

   /* 뱃지 텍스트(Laravel 등) 및 간격 축소 */
   .tp-hero-wd-bottom-info .tp-footer-social ul li a,
   .tp-hero-wd-bottom-info .tp-footer-social ul li span {
      font-size: 13px !important;
   }

   .tp-hero-wd-bottom-info .tp-footer-social ul {
      gap: 12px !important;
   }

   /* GSAP Button Move Animation 제거
      main.js의 mousemove → translate(x,y) 인라인 스타일을 !important로 덮어씌움
      호버 fill 효과(.tp-btn-circle-dot)는 width/height 기반이라 영향 없음 */
   .btn-item {
      transform: none !important;
   }

   /* 섹션 전체 패딩 */
   .section-triger.pre-header {
      padding: 100px 20px 40px !important;
   }

   /* 2단 flex → 1단 세로 배치 */
   .section-triger.pre-header > div:first-child {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 32px;
   }

   /* 왼쪽 타이틀 div */
   .section-triger.pre-header > div:first-child > div:first-child {
      max-width: 100% !important;
   }

   /* 오른쪽 설명+버튼 div */
   .section-triger.pre-header > div:first-child > div:last-child {
      max-width: 100% !important;
      text-align: left !important;
   }

   /* Scroll to Explore */
   .section-triger.pre-header > div:last-child {
      margin-top: 40px !important;
   }


   /* ============================================
      3. About 미리보기
      ============================================ */

   /* BUILT BY ONE, ONE FLOW 타이틀 가운데 정렬 */
   .tp-about-wd-title {
      text-align: center !important;
   }

   /* FROM DESIGN TO LAUNCH 타이틀
      main.css @media(max-width:574.98px)에서 .tp-about-wd-title br { display:none } 로 숨겨짐
      더 구체적인 선택자로 br 복원 */
   .tp-service-wd-title-wrap .tp-about-wd-title br {
      display: inline !important;
   }

   .tp-service-wd-title-wrap .tp-about-wd-title {
      font-size: 10vw !important;
      text-align: center !important;
      white-space: normal !important;
   }

   /* 한글 부제 가운데 정렬 */
   .tp-service-wd-title-wrap p {
      text-align: center !important;
   }

   /* What We Do ABOUT US 버튼 가운데 정렬 */
   .tp-service-area .tp-rounded-btn-wd {
      text-align: center !important;
   }

   /* 한글 설명 텍스트 가운데 정렬 */
   .tp-about-wd-para p {
      text-align: center !important;
   }

   /* 삼각형 + 반원 도형 숨김 */
   .tp-about-wd-shape {
      display: none !important;
   }

   /* WITHJ 더 알아보기 버튼 가운데 정렬
      mr-40(margin-right:40px)이 버튼을 밀어서 flex로 정확히 중앙 고정 */
   .tp-about-wd-btn {
      display: flex !important;
      justify-content: center !important;
      margin-right: 0 !important;
      margin-top: 80px !important;
   }

   /* 1:1 브랜드 맞춤 제작 텍스트 숨김 */
   .tp-about-expreance.tp-about-wd-expreance {
      display: none !important;
   }

   /* 오른쪽 세로 사진 2개 숨김 (about-2, about-3) */
   .tp-about-wd-thumb2 {
      display: none !important;
   }


   /* ============================================
      4. WHY CHOOSE 카드 (Skill)
      ============================================ */

   /* ml-30, ml-60 오프셋 제거, 좌우 여백 동일하게 */
   .tp-skill-wd-item.ml-30,
   .tp-skill-wd-item.ml-60 {
      margin-left: 20px !important;
   }

   /* 카드: flex row, 아이콘+제목 가운데 정렬 */
   .tp-skill-wd-item {
      padding-top: 30px !important;
      padding-bottom: 30px !important;
      margin-left: 20px !important;
      margin-right: 20px !important;
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: center !important;
   }

   /* 아이콘 숨김 */
   .tp-skill-wd-item .tp-skill-wd-icon {
      display: none !important;
   }

   /* 서브 제목 가운데 정렬 */
   .tp-skill-wd-item h3 {
      flex: 0 0 100% !important;
      margin-bottom: 0 !important;
      text-align: center !important;
   }

   /* 본문 텍스트: 전체 너비, 가운데 정렬 */
   .tp-skill-wd-item p {
      flex: 0 0 100% !important;
      margin-top: 16px !important;
      text-align: center !important;
   }

   /* 아이콘 hover 흔들기 애니메이션 비활성화 */
   .tpshake-wrap:hover .tpshake {
      animation: none !important;
   }


   /* ============================================
      5. What We Do (서비스 호버 이미지)
      ============================================ */

   .image-wrapper {
      display: none !important;
   }

   /* 서비스 항목 번호(01~05) 숨김 */
   .tp-service-wd-item-title > span.tp-text-grey-1 {
      display: none !important;
   }

   /* 서비스 항목 제목 영역: 가운데 정렬 */
   .tp-service-wd-item-title {
      justify-content: center !important;
      text-align: center !important;
   }

   /* h3 (한글 소제목 + 영문 제목) 가운데 정렬 */
   .tp-service-wd-item-title h3 {
      text-align: center !important;
   }

   /* 설명 텍스트 + 태그 가운데 정렬 */
   .tp-service-wd-content {
      text-align: center !important;
   }




   /* ============================================
      5.5 WHY CHOOSE 하단 (브랜드의 새로운 시작)
      ============================================ */

   /* 텍스트 + 버튼 세로 쌓기, 가운데 정렬
      padding 비대칭(좌30px/우10px) → 대칭으로 수정 */
   .tp-skill-wd-para {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      padding: 8px 30px !important;
   }

   /* 버튼 margin-left 인라인 스타일 무력화 */
   .tp-skill-wd-para a {
      margin-left: 0 !important;
      margin-top: 12px !important;
   }


   /* ============================================
      6. Portfolio
      ============================================ */

   /* 마지막 포트폴리오 카드 하단 여백 축소 (30px → 1px) */
   .tp-portfolio-wd-item:last-child {
      margin-bottom: 1px !important;
   }

   /* 포트폴리오 카드 제목 font-size:60px → clamp */
   .tp-portfolio-wd-content h2 {
      font-size: clamp(28px, 6vw, 60px) !important;
   }

   /* 섹션 타이틀 가운데 정렬 + letter-spacing */
   .tp-portfolio-wd-title-wrap {
      text-align: center !important;
   }

   /* 한글 부제 폰트 축소 (20px → 16px) */
   .tp-portfolio-wd-title-wrap p {
      font-size: 16px !important;
   }

   .tp-portfolio-wd-title-wrap h2 {
      font-size: 40px !important;
      letter-spacing: -1px !important;
   }


   /* ============================================
      7. What's Included (Awards)
      ============================================ */

   /* 섹션 상단 여백 축소 (200px → 2px) */
   .tp-awareds-area {
      padding-top: 1px !important;
   }

   /* 제목~01번 사이 여백 축소 (60px → 25px) */
   .tp-awareds-area .tp-service-wd-border {
      margin-bottom: 1px !important;
   }

   /* 03~04번 사이 여백 축소 (40px → 1px) */
   .tp-awards-wd-wrap {
      margin-bottom: 1px !important;
   }

   /* 섹션 전체 가운데 정렬 (제목 + 부제) */
   .tp-awareds-area .tp-service-wd-title-wrap {
      text-align: center !important;
   }

   /* What's Included 제목 폰트 축소 (50px → 40px) */
   .tp-awards-wd-title {
      font-size: 40px !important;
   }

   /* 혜택 항목 전체 가운데 정렬 */
   .tp-awards-wd-item .row {
      justify-content: center !important;
      text-align: center !important;
   }

   /* 설명 컬럼 padding-left:130px 제거 */
   .tp-awards-wd-item .col-lg-9[style*="padding-left:130px"],
   .tp-awards-wd-item .col-lg-9[style*="padding-left: 130px"] {
      padding-left: 12px !important;
   }

   /* white-space:nowrap 해제 */
   .tp-awards-wd-item span[style*="white-space:nowrap"],
   .tp-awards-wd-item span[style*="white-space: nowrap"] {
      white-space: normal !important;
   }


   /* ============================================
      8. Footer
      ============================================ */

   /* 프로젝트 문의하기 + LET'S TALK 가운데 정렬 */
   .tp-footer-top-social-wrap {
      text-align: center !important;
   }

   /* START THE JOURNEY 버튼 숨김 */
   .tp-footer-btn {
      display: none !important;
   }


   /* LET'S TALK ~ Contact 여백 축소 (45px → 10px) */
   .tp-footer-main {
      padding-top: 10px !important;
   }

   /* Contact~카피라이트 여백 축소 */
   .tp-footer-main .tp-footer-widget {
      margin-bottom: 30px !important;
   }

   .tp-footer-main {
      padding-bottom: 35px !important;
   }

   /* 카피라이트 + 개인정보처리방침 가운데 정렬 */
   .tp-footer-bottom .row {
      text-align: center !important;
   }

   /* 푸터 구분선 숨김 */
   .tp-footer-main {
      border-top: none !important;
   }

   /* 로고 영역 숨김 */
   .tp-footer-main > .container > .row > .col-lg-5 {
      display: none !important;
   }

   /* Menu 영역 숨김 */
   .tp-footer-main .col-lg-7 > .row > .col-lg-5 {
      display: none !important;
   }

   /* Contact 컬럼: width 100%, 인라인 padding-left/transform 제거, 가운데 정렬 */
   .tp-footer-main .col-lg-7 > .row > div {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding-left: 0 !important;
      transform: none !important;
      text-align: center !important;
   }

   /* Contact 정보 폰트 */
   .tp-footer-main .tp-footer-widget span {
      font-size: 18px !important;
   }

   /* Contact 위젯 + 제목 + 텍스트 가운데 정렬 */
   .tp-footer-main .tp-footer-widget {
      text-align: center !important;
   }

   .tp-footer-main .tp-footer-widget-title {
      text-align: center !important;
   }

   .tp-footer-main .tp-footer-widget span {
      text-align: center !important;
   }


   /* ============================================
      8.5 About 페이지
      ============================================ */

   /* About 페이지 전체 좌우 패딩 */
   .tp-service-hero-area .container,
   .tp-service-details-area .container,
   .tp-about-process-area .container,
   .tp-process-area .container,
   .tp-faq-area .container {
      padding-left: 20px !important;
      padding-right: 20px !important;
   }

   /* Brand Story 제목~내용 여백 축소 (50px → 30px) */
   .tp-service-details-title-wrap {
      margin-bottom: 30px !important;
   }

   /* What We Offer 제목 가운데 정렬 */
   .tp-about-process-area .tp-section-title {
      text-align: center !important;
   }

   /* How We Work 배경을 메인 WHY CHOOSE와 동일하게 */
   .tp-process-area {
      background-image: url('../img/skill/bg.jpg') !important;
      background-size: cover !important;
      background-position: center !important;
   }

   .tp-process-area .tp-awards-bg-shape {
      display: none !important;
   }

   /* Built by One 제목~설명 여백 축소 (130px → 40px) */
   .tp-service-hero-left {
      margin-bottom: 40px !important;
   }


   /* ============================================
      8.6 Work 페이지
      ============================================ */

   /* Our Work 제목 스타일 */
   .work-title-area h1 {
      letter-spacing: -1px !important;
      font-size: 40px !important;
      margin-bottom: 10px !important;
      text-align: left !important;
   }

   /* Our Work 한글 부제 */
   .work-title-area p {
      text-align: left !important;
      font-size: 14px !important;
   }

   /* Our Work 부모 div 패딩 축소 */
   .work-title-area {
      padding-top: 120px !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
   }

   /* 포트폴리오 카드~푸터 여백 축소 (445px → 230px) */
   .tp-portfolio-area {
      padding-bottom: 115px !important;
   }

   .tp-footer-area {
      padding-top: 115px !important;
   }


   /* ============================================
      8.7 Contact 페이지 히어로 가운데 정렬
      ============================================ */

   /* 히어로 래퍼 인라인 left 제거 + 가운데 정렬 */
   .tp-contact-wrap > .text-center {
      left: 0 !important;
      text-align: center !important;
   }

   /* '홈페이지 제작 견적 문의' + 설명 문구 */
   .tp-contact-wrap > .text-center > p {
      text-align: center !important;
      margin-left: 0 !important;
   }

   /* 'Project With Us' 제목 */
   .tp-contact-wrap > .text-center > h2 {
      text-align: center !important;
   }

   /* 설명 문구 숨김 */
   .tp-contact-wrap > .text-center > p.fs-18 {
      display: none !important;
   }

   /* Gmail / 카톡 상담 영역 */
   .tp-contact-number {
      justify-content: center !important;
      margin-left: 0 !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 0 !important;
   }


   /* ============================================
      9. 모바일 스크롤 최적화
      ============================================ */

   /* 가로 스크롤 방지 */
   html, body {
      overflow-x: hidden;
   }

   /* 네이티브 터치 스크롤 가속 */
   .fix {
      -webkit-overflow-scrolling: touch;
   }

   /* ScrollSmoother 콘텐츠 GPU 레이어 고정 */
   #smooth-content {
      will-change: transform;
   }

}