/* 모바일 좌우 여백 통일                               (2026-10-18)

   테마가 블록마다 다른 방식으로 여백을 잡아놔서, 폰에서 보면
   제목·본문·큰 글자의 시작선이 제각각이었다.
     · 본문 블록   : container + sm-margin-45px-lr + sm-w-90
     · Concept 문단: container + sm-w-80 가운데 정렬
     · 나머지      : container 기본값

   기준을 하나로 모은다 — 폰에서는 좌우 24px 한 가지만 쓴다.
   테마 CSS 는 건드리지 않고 여기서 덮는다. */

@media (max-width: 767px) {

  /* 1. 여백은 container 한 곳에서만 준다 */
  /* 자식 선택자로 잡았더니 .row 안에 한 겹 더 들어간 container 를
     놓쳤다. 게다가 아래의 --bs-gutter-x:0 이 그 container 의 좌우
     여백까지 같이 0 으로 만들어 글이 화면 끝에 붙어 있었다. */
  section .container,
  footer .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 1-2. container 안에 container 가 한 겹 더 들어간 자리(SK텔레콤
        페이지의 '그 밖에 프로젝트')는 24px 이 두 번 쌓여 48px 이 된다.
        여백은 바깥 container 가 이미 줬으니 안쪽은 비운다. */
  section .container .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1-3. container-fluid 는 폭을 꽉 채우는 틀이라 기본 15px 만 준다.
        기아 모하비 블록이 이 틀을 써서 글 시작선만 15px 로 떨어졌다.
        틀의 여백은 비우고, 안의 열이 24px 을 갖게 한다.
        px-0 이 붙은 열(이미지 전용)은 그대로 0 — 그림은 화면 끝까지. */
  section .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section .container-fluid > .row > [class*="col-"]:not(.px-0):not(.p-0) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 2. 열이 또 여백을 더하면 이중이 된다. 폰에서는 어차피 한 줄로
        쌓이니 열 사이 간격은 필요 없다. */
  section .row {
    --bs-gutter-x: 0 !important;
  }

  /* 3. 블록에 따로 박힌 여백·폭을 푼다 */
  .sm-margin-45px-lr {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* margin-45px-lr 은 sm- 이 안 붙어 폰에서도 좌우 45px 이 그대로
     붙는다. 같은 블록에 w-100(폭 100%)까지 걸려 있어서 45px 씩
     화면 밖으로 밀려나 글 오른쪽이 잘렸다.
     마진을 패딩으로 바꿔 안쪽에서 여백을 주고, 값도 24px 로 맞춘다.
     (이 블록들은 container 밖에 바로 놓여 있어 1번 규칙이 못 닿는다) */
  .margin-45px-lr {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .sm-w-90,
  .sm-w-80,
  .sm-w-95 {
    width: 100% !important;
  }

  /* 글 블록에 남아 있는 폭 제한(w-90, lg-w-85 …)을 푼다.
     왼쪽은 24px 에 맞는데 오른쪽만 덜 가서, 바로 아래 이미지보다
     글이 좁아 보였다. 폰에서는 한 줄 폭을 다 쓰는 게 맞다. */
  section p[class*="w-"],
  section h1[class*="w-"],
  section h2[class*="w-"],
  section h3[class*="w-"],
  section h4[class*="w-"],
  section h5[class*="w-"],
  section h6[class*="w-"],
  section span[class*="w-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2-2. 여백은 container 한 곳에서만 준다 — 그 안쪽은 전부 0.
         행의 음수 마진(-15px), 열의 패딩(15px), 문단에 직접 붙은
         좌우 마진(20~30px)이 겹겹이 쌓여 글 시작선이 35px·54px 로
         제각각이었다. 폰에서는 열이 어차피 한 줄로 쌓이니
         이 여백들은 전부 필요 없다. */
  section .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* container 안의 열은 container 가 이미 24px 을 줬으니 0.
     container 밖에 바로 놓인 열은 스스로 24px 을 가져야 한다.
     (처음엔 모든 열을 0 으로 밀었더니 container 없는 갤럭시 블록이
      화면 끝에 붙어버렸다) */
  section .container [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section > [class*="col-"],
  section > .row > [class*="col-"],
  section > div > [class*="col-"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  [class*="margin-"][class*="-lr"],
  [class*="margin-"][class*="-left"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3-2. 안쪽에서 또 여백을 더하는 유틸리티들.
         container 24px 위에 29px 가 더 붙어 글이 53px 에서 시작했다.
         (라운즈 페이지가 전반적으로 좁아 보이던 이유) */
  .padding-7-rem-lr,
  .padding-5-rem-lr,
  .padding-4-rem-lr {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 흰 카드처럼 배경이 있는 블록은 안쪽 여백이 있어야 글이 모서리에
     붙지 않는다. 대신 카드를 화면 끝까지 넓혀 글 시작선을 24px 로
     맞춘다 — 여백을 없애는 게 아니라 옮기는 것이다. */
  /* 열 패딩을 0 으로 미는 위 규칙보다 뒤에, 더 좁게 잡는다.
     카드는 배경이 있어 안쪽 여백이 남아야 한다. */
  section .container [class*="col-"].padding-6-half-rem-all,
  section .container [class*="col-"].padding-6-rem-all,
  section .container [class*="col-"].padding-5-rem-all,
  section [class*="col-"].padding-6-half-rem-all,
  section [class*="col-"].padding-6-rem-all,
  section [class*="col-"].padding-5-rem-all,
  .padding-6-half-rem-all,
  .padding-6-rem-all,
  .padding-5-rem-all {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* 카드가 든 섹션은 container 여백을 비운다. 음수 마진으로 끌어내
     봤더니 행 간격과 엇갈려 좌우가 9px/57px 로 틀어졌다.
     여백을 '빼는' 쪽이 안전하다. */
  /* 섹션이 스스로 주는 좌우 패딩(p-3 등)은 비운다.
     container 24px 위에 11px 이 더 얹혀 글이 35px 에서 시작했다.
     세로 패딩은 건드리지 않는다.
     section[class] 로 잡는다 — p-3 같은 부트스트랩 유틸리티가
     !important 라, 그냥 section 으로는 우선순위에서 밀린다. */
  section[class] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 큰 화면 전용 패딩 유틸리티는 폰에서 쓸 일이 없다 */
  [class*="lg-padding-"],
  [class*="xl-padding-"],
  [class*="md-padding-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 카드 클래스만 정확히 짚는다. [class*="-rem-all"] 로 두루뭉술하게
     잡았더니 lg-padding-2-rem-all 이 붙은 문단까지 걸려, 엉뚱한
     container 의 여백이 0 이 되고 글이 화면 끝에 붙었다. */
  section .container:has(.padding-6-half-rem-all, .padding-6-rem-all, .padding-5-rem-all) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 행에 남아 있는 음수 마진까지 지워야 카드가 0 에서 시작한다.
     그러지 않으면 카드 안쪽 24px 이 15px 만큼 먹혀 글이 9px 에 선다.
     자식(>)이 아니라 후손으로 잡는다 — 이 행은 container 바로 아래가
     아니라 .overlap-section > .d-flex 안쪽에 들어 있다. */
  section .container:has(.padding-6-half-rem-all, .padding-6-rem-all, .padding-5-rem-all) .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4. 가운데 정렬로 폭을 줄여놓은 문단도 같은 선에 맞춘다 */
  section .container p[style*="margin: 0 auto"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. 화면 밖으로 흘려보낸 이미지 블록 (outside-box-*)
        PC 에서는 그림이 화면 끝을 넘어가며 시원해 보이라고 음수 마진을
        준다(-30vw, -557px …). 테마도 991px 아래에서는 이 마진을 0 으로
        되돌려 놓는데, 값이 태그 안 style= 에 직접 박혀 있어서 그 규칙이
        진다. 폰에서는 그림이 통째로 왼쪽 밖으로 밀려 오른쪽 끄트머리만
        보였다 (SK텔레콤 sk-02.webp).
        마진을 걷어내고, 그림은 화면 폭에 맞춘다. */
  .outside-box-left,
  .outside-box-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .outside-box-left > img,
  .outside-box-right > img {
    width: 100% !important;
    height: auto !important;
  }

  /* 6. 히어로 제목
        테마 기본값은 h2 = 3.9rem / 줄간격 4.2rem 인데, 폰에서는 뿌리
        글자가 11px 까지 줄어도 제목이 42.9px 이라 한 화면을 거의 다
        먹었다. 80% 로 줄인다 — 3.12rem(약 34px).
        줄간격도 같은 비율로. 페이지에 따라 태그 안 style= 에
        line-height:5rem 이 박혀 있어서 !important 로 덮는다.
        rem 으로 두는 이유 — 테마가 화면 폭에 따라 뿌리 글자 크기를
        14→13→12→11px 로 바꾼다. px 로 박으면 그 반응이 끊긴다. */
  section.cover-background.p-0 h1,
  section.cover-background.p-0 h2 {
    font-size: 3.12rem !important;
    line-height: 3.36rem !important;
  }

  /* 7. 제목 아래 여백 — 폰에서는 15px 하나로
        페이지마다 값이 제각각이었다.
          21-01  35px(클래스)   21-02  0px(mb-0)
          21-04  30.6px(margin-seven-bottom)
          21-00·21-03  15px  ← 테마가 폰에서 쓰는 기본값
        수가 가장 많고 테마 자신의 값이기도 한 15px 로 모은다.
        제목에만 건다 — 같은 클래스를 블록 사이 간격으로도 쓰고 있어서
        싸잡아 줄이면 단락이 서로 붙는다. */
  h1.margin-35px-bottom, h2.margin-35px-bottom,
  h3.margin-35px-bottom, h4.margin-35px-bottom,
  h5.margin-35px-bottom, h6.margin-35px-bottom,
  h2.margin-seven-bottom {
    margin-bottom: 15px !important;
  }

  /* 7-2. 히어로 제목 → 바로 아래 정보 줄
          21-02 만 3.5rem(38.5px)이고 나머지 4개는 2.5rem(27.5px)이었다. */
  section.cover-background.p-0 h2[class*="margin-"] {
    margin-bottom: 2.5rem !important;
  }
}