﻿/* ==============================
   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;
}


