/* ==============================
   price-wrap_mms : 표 2개 랩
============================== */
.price-wrap_mms {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;

  display: grid;
  grid-template-columns: 1fr 1fr; /* 표1 표2 */
  gap: 30px;
}

/* 모바일에서는 1줄씩 */
@media (max-width: 768px) {
  .price-wrap_mms {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==============================
   표1 / 표2 각각 박스
============================== */
.price-box_mms {
  width: 100%;
  box-sizing: border-box;
}

/* ==============================
   상단 제목 테이블 (기존 클래스 그대로)
============================== */
.price-table_mms {
  width: 100%;
  display: block;            /* ✅ grid 해제 */
  background: #edf0ff;
  padding: 18px 0;
  font-size: 22px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 22px;
  text-align: center;
  box-sizing: border-box;
}

/* 기존 col 유지 */
.price-table_mms .col {
  border-right: none;        /* ✅ 표가 1열이니까 선 제거 */
}

/* ==============================
   금액 표시
============================== */
.price-value-wrap_mms {
  width: 100%;
  display: block;            /* ✅ grid 해제 */
  font-size: 22px;
  font-weight: 600;
  background: #ffffff;
  padding: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  text-align: center;
}

/* 왼쪽 값 */
.value-left_mms {
  font-size: 20px;
  color: #5873fe;
  font-weight: 600;
}

.value-left_mms span {
  font-size: 30px;
  font-weight: 800;
}

/* 오른쪽 값(필요시 사용) */
.value-right_mms {
  color: #bdbdbd;
}

.value-right_mms span {
  font-size: 30px;
  font-weight: 800;
  color: #bdbdbd;
}

/* ==============================
   구분선
============================== */
.price-line_mms {
  width: 100%;
  height: 1px;
  background: #e0e0e0;
  margin: 20px 0 24px;
}

/* ==============================
   안내 문구
============================== */
.price-info_mms {
  text-align: right;
  font-size: 18px;
  color: #666;
  line-height: 1.3;
  margin-bottom: 0;          /* ✅ 표2까지 간격 커지는거 방지 */
}

/* 2개 카드 나란히 */
.price-duo_mms{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(2, 580px);
  justify-content: center;
  gap:40px;
  box-sizing:border-box;
}

/* 카드 */
.price-card_mms{
  width:100%;
  box-sizing:border-box;
}

/* 카드 안 모든 section 폭 100% */
.price-card_mms section{
  width:100%;
}

/* ✅ 문제 해결 핵심 */
.price-card_mms .product-box,
.price-card_mms .product-inner,
.price-card_mms .product-text{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.price-card_mms .product-inner{
  display:block !important;
}

/* 모바일 */
@media (max-width:768px){
  .price-duo_mms{
    grid-template-columns:1fr;
  }
}

.mms_bg {
background: #f8f8f8;
max-width: 100%;
}


.price-card_mms_bg {
background: #f8f8f8;
max-width: 1300px;
}

.product-box-color_charge {
    background: #f8f8f8;
    padding-top: 50px;
}

/* 전체 래퍼 */
.price-wrap_charge {
  background: #f8f8f8; 
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
  position: relative;

}

.price-wrap_charge-bg{
  width:100%;
  background:#f8f8f8;
}

.price-card_mms.card-bg{
  background:#f8f8f8;
  padding:20px;
  box-sizing:border-box;
}




/******************************************************
'* 반응형 (태블릿 / 모바일) - 이용요금 페이지
'******************************************************/

/* 태블릿 (1240px 이하) */
@media (max-width: 1240px) {
    /* 요금 블록용 바탕 섹션은 좌우 여백 없이 (배너를 감싼 첫 섹션만 여백 유지) */
    .background-section:not([style]) {
        padding-left: 0;
        padding-right: 0;
    }

    /* 배너 섹션 안에 겹쳐 들어간 첫 요금 블록은 바깥 여백만큼 되돌림 */
    .background-section[style] > .background-section:not([style]) {
        margin-left: -20px;
        margin-right: -20px;
    }

    .product-text .title {
        word-break: keep-all;
    }

    .price-wrap_charge {
        padding: 0 20px;
    }

    .price-duo_mms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 20px;
        gap: 24px;
    }

    .price-wrap_mms {
        padding: 0 20px;
    }

    /* 제목 오른쪽 '자세히보기' 버튼을 본문 여백에 맞춤 */
    .product-text > .cate-btn[style*="absolute"] {
        right: 20px !important;
    }
}

/* 태블릿 세로 (1024px 이하) */
@media (max-width: 1024px) {
    .product-text > .cate-btn[style*="absolute"] {
        padding: 10px 28px;
        font-size: 17px;
    }

    /* 제목이 버튼 밑으로 들어가지 않도록 오른쪽 공간 확보 */
    .product-text:has(> .cate-btn[style*="absolute"]) .title {
        padding-right: 160px;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .background-section:not([style]) {
        padding-top: 30px;
    }

    .background-section[style] > .background-section:not([style]) {
        margin-left: -16px;
        margin-right: -16px;
    }

    .product-box-color_charge {
        padding-top: 40px;
    }

    /* 인라인 margin-top:-70px 완화 */
    .product-box-color_charge > .product-inner[style*="margin-top"] {
        margin-top: -40px !important;
    }

    /* 흰 바탕 상품 블록 (인라인 margin-bottom:-60px 완화) */
    .product-box[style*="margin-bottom"] {
        margin-bottom: -20px !important;
        padding-top: 36px;
    }

    .product-text:has(> .cate-btn[style*="absolute"]) .title {
        padding-right: 0;
    }

    .product-text .title span {
        display: block;
        margin-top: 4px;
        font-size: 17px;
        color: #555 !important;
    }

    /* '자세히보기' 버튼 : 제목 아래로 */
    .product-text > .cate-btn[style*="absolute"] {
        position: static !important;
        display: inline-block;
        margin-top: 4px;
        padding: 9px 22px !important;
        font-size: 15px;
        flex: none;
    }

    .price-wrap_charge {
        padding: 0 16px;
    }

    .price-duo_mms,
    .price-wrap_mms {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    /* 광고 사이즈(인라인 25px) 글자 줄이기 */
    .price-value-wrap .value-right span[style] {
        font-size: 17px !important;
    }

    /* 설치비 금액(회색) */
    .price-value-wrap .value-left span.gray,
    .price-value-wrap .value-right span.gray {
        font-size: 22px;
    }

    .price-info[style*="padding-bottom"] {
        padding-bottom: 0 !important;
    }

    .price-table_mms,
    .price-value-wrap_mms {
        font-size: 16px;
    }

    .value-left_mms span,
    .value-right_mms span {
        font-size: 22px;
    }

    .price-info_mms {
        text-align: left;
        font-size: 14px;
    }
}