/* =========================
   모바일 레이아웃 기본 수정
   ========================= */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* 모바일 가로 스크롤 방지 */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }
    body {
        margin: 0;
        padding: 0;
    }
    #container, #container_wrap, #wrap, #wrapper,
    #content, .content, #main, .main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    img, iframe, video, embed, object {
        max-width: 100%;
        height: auto;
    }
    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
    input, select, textarea {
        max-width: 100%;
    }
}

/* =========================
   ✅ 모바일 모달 스크롤 & 버튼 표시
   ========================= */

#myModal1 * { box-sizing:border-box; }
#myModal1 ul, #myModal1 li { list-style:none; margin:0; padding:0; }

@media (max-width:768px){
  .pop-layer-wrap{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .pop-layer-inner{
    max-height:none !important;
    overflow:visible !important;
  }
  #myModal1 form{ padding-bottom:100px !important; }
  #myModal1 .button_wrap{
    padding:20px 16px 40px !important;
    margin-bottom:40px !important;
    background:#fff;
    position:relative;
    z-index:10;
  }
  #myModal1 .button_wrap button{
    width:100% !important;
    min-height:52px !important;
    font-size:16px !important;
    font-weight:800 !important;
    border-radius:12px !important;
    display:block !important;
  }
  #myModal1 .detail-agree{ margin-bottom:20px !important; }
}

/* =========================
   ✅ 상담 희망일시 안내 박스
   ========================= */
#myModal1 .cc-guide-header{
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);
  border:2px solid #2563eb;
  border-radius:12px;
  padding:14px 16px;
  margin:16px 0 12px 0;
  text-align:center;
}
#myModal1 .cc-guide-title{
  font-size:16px;
  font-weight:900;
  color:#111827;
  margin-bottom:4px;
  letter-spacing:-0.3px;
}
#myModal1 .cc-guide-desc{
  font-size:13px;
  font-weight:700;
  color:#2563eb;
}

/* =========================
   ✅ Callcenter Calendar (ONLY for #myModal1)
   ========================= */
#myModal1 .cc-wrap{
  border-top:1px solid #e5e7eb;
  margin-top:12px;
  padding-top:12px;
  margin-bottom:20px;
}

/* 요약 */
#myModal1 .cc-summary{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f9fafb;
  margin-bottom:8px;
}
#myModal1 .cc-summary .ico{ font-size:14px; }
#myModal1 .cc-summary .txt{
  font-weight:900;
  font-size:13px;
}

/* 캘린더 박스 */
#myModal1 .cc-cal{
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

/* 헤더 */
#myModal1 .cc-cal-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px;
  border-bottom:1px solid #e5e7eb;
}
#myModal1 .cc-cal-head .ym{
  font-weight:900;
  font-size:15px;
}
#myModal1 .cc-cal-head .cc-prev,
#myModal1 .cc-cal-head .cc-next{
  border:0;
  background:transparent;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  padding:4px 10px;
  border-radius:8px;
}
#myModal1 .cc-cal-head .cc-prev:hover,
#myModal1 .cc-cal-head .cc-next:hover{ background:#f3f4f6; }

/* 요일 */
#myModal1 .cc-dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:6px 8px;
  border-bottom:1px solid #f1f5f9;
}
#myModal1 .cc-dow div{
  font-size:11px;
  font-weight:800;
  color:#6b7280;
  text-align:center;
  padding:4px 0;
}

/* 날짜 그리드 */
#myModal1 .cc-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:8px;
  gap:6px;
}
#myModal1 .cc-day{
  height:38px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  background:#fff;
}
#myModal1 .cc-day.dim{
  border:0;
  background:transparent;
  cursor:default;
}
#myModal1 .cc-day.disabled{
  opacity:.35;
  cursor:not-allowed;
}
#myModal1 .cc-day.today{ border-color:#94a3b8; }
#myModal1 .cc-day.sel{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
#myModal1 .cc-day .mini{
  font-size:9px;
  font-weight:900;
  margin-top:1px;
  color:#2563eb;
}
#myModal1 .cc-day.sel .mini{ color:#dbeafe; }

/* 시간 영역 */
#myModal1 .cc-times{
  padding:10px 10px 12px;
  border-top:1px solid #e5e7eb;
}

/* 시간 라벨 */
#myModal1 .cc-hour-row{
  display:flex;
  justify-content:space-between;
  gap:2px;
  margin-bottom:6px;
}
#myModal1 .cc-hour-row .cc-hour{
  flex:1;
  text-align:center;
  font-size:10px;
  font-weight:800;
  color:#6b7280;
  white-space:nowrap;
}

/* ✅ 막대(핵심) */
#myModal1 .cc-bars{
  display:flex;
  height:46px;
  border-radius:10px;
  overflow:hidden;
  background:#e0f2fe;
  border:1px solid #bae6fd;
}
#myModal1 .cc-bar{
  flex:1;
  cursor:pointer;
  border-right:1px solid #bae6fd;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
}
#myModal1 .cc-bar:last-child{ border-right:0; }

#myModal1 .cc-bar.on{ background:#2563eb; border-right-color:#1d4ed8; }
#myModal1 .cc-bar.lock{ background:#fecaca; cursor:not-allowed; opacity:.8; }

#myModal1 .cc-bar:hover:not(.lock):not(.on){ background:#0ea5e9; }

/* 선택 문구 */
#myModal1 .cc-range{
  margin-top:8px;
  font-weight:900;
  font-size:13px;
  color:#111827;
}
#myModal1 .cc-range .sub{
  font-weight:800;
  font-size:12px;
  color:#6b7280;
}

@media (max-width:480px){
  #myModal1 .cc-day{ height:36px; font-size:12px; border-radius:9px; }
  #myModal1 .cc-bars{ height:44px; }
}
/* =========================
   ✅ (추가) 모바일 모달을 "전체화면 + 내부 스크롤 + 하단 버튼 고정"으로
   ========================= */
@media (max-width:768px){

  /* 모달 바깥 래퍼가 실제로 화면 전체를 잡아줘야 함 */
  #myModal1{
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
  }

  /* 모달 스크롤 컨테이너: iOS에서 100vh 대신 100dvh 사용 */
  #myModal1 .pop-layer-wrap{
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important; /* 튕김 방지 */
    padding-bottom: 0 !important;
  }

  /* 내부는 높이 계산 꼬이지 않도록 */
  #myModal1 .pop-layer-inner{
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 폼 하단 여백: 하단 고정 버튼에 내용 가려지는 것 방지 */
  #myModal1 form{
    padding-bottom: 96px !important; /* button_wrap 높이만큼 */
  }

  /* ✅ 하단 버튼 영역: sticky로 항상 하단에 붙기 */
  #myModal1 .button_wrap{
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;

    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid #e5e7eb !important;
    z-index: 50 !important;
  }

  /* 버튼 터치 영역 확실히 */
  #myModal1 .button_wrap button{
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 14px !important;
  }

  /* 선택 영역(캘린더/시간) 클릭이 버튼 아래로 숨어도 터치 안 꼬이게 */
  #myModal1 .cc-wrap{
    padding-bottom: 8px !important;
  }
}

/* =========================
   ✅ (추가) 아주 작은 화면에서 캘린더/시간 바 가독성
   ========================= */
@media (max-width:360px){
  #myModal1 .cc-hour-row .cc-hour{ font-size:9px !important; }
  #myModal1 .cc-bars{ height:42px !important; }
  #myModal1 .cc-day{ height:34px !important; }
}

/* =========================
   ✅ 모바일 탭 콘텐츠 영역 크기 고정 & 축소 방지
   ========================= */
@media (max-width:991px){
  /* 탭 콘텐츠 최소 높이 확보 */
  .ssadang-like .detail-content{
    min-height: 200px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ssadang-like .detail-content .content-box{
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  /* 탭 고정 시 너비 100% 유지 (축소 방지) */
  .ssadang-like .detail-menu-tab.menu-fixed{
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }
  /* #item-detail 너비 고정 */
  .ssadang-like #item-detail{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .ssadang-like .thessadang-tab-left{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ✅ 모바일 구매후기 카드 레이아웃 */
  .ssadang-like .detail-content .article-desc1.article-desc-list{
    padding: 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
  .ssadang-like .detail-content .article-desc1 > .article-list{
    flex-wrap: wrap !important;
  }
  /* 이미지: 왼쪽 상단 작게 */
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-image{
    flex: 0 0 56px !important;
    max-width: 56px !important;
    padding: 0 !important;
  }
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-image img{
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  /* 제목 영역: 이미지 옆에 나머지 너비 차지 */
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-subject{
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 0 0 12px !important;
    align-self: center !important;
  }
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-subject > p{
    padding: 6px 0 8px !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-subject > span{
    font-size: 13px !important;
    color: #9ca3af !important;
  }
  /* 작성자 + 날짜: 아래줄 전체 너비 */
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-name,
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-date{
    flex: 0 0 auto !important;
    max-width: none !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    text-align: left !important;
    padding-top: 8px !important;
  }
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-name{
    order: 3 !important;
    margin-left: 68px !important;
  }
  .ssadang-like .detail-content .article-desc1 > .article-list > .article-date{
    order: 4 !important;
    margin-left: 8px !important;
  }

  /* ✅ 모바일 상품문의(Q&A) 리스트 */
  .ssadang-like .detail-content .article-desc1.article-desc-table{
    width: 100% !important;
  }
  .ssadang-like .detail-content .article-desc1.article-desc-table .article-flex{
    flex-wrap: wrap !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
  }
  .ssadang-like .detail-content .article-desc1.article-desc-table .article-header{
    display: none !important;
  }
  .ssadang-like .detail-content .article-desc1.article-desc-table .article-flex > .num{
    display: none !important;
  }
  .ssadang-like .detail-content .article-desc1.article-desc-table .article-flex > .subject{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 14px !important;
    order: 0 !important;
  }
  .ssadang-like .detail-content .article-desc1.article-desc-table .article-flex > .state,
  .ssadang-like .detail-content .article-desc1.article-desc-table .article-flex > .name,
  .ssadang-like .detail-content .article-desc1.article-desc-table .article-flex > .date{
    flex: 0 0 auto !important;
    max-width: none !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    order: 1 !important;
    margin-top: 6px !important;
    margin-right: 10px !important;
  }
  .ssadang-like .detail-content .article-btn{
    margin-top: 16px !important;
  }
  .ssadang-like .detail-content .article-btn .btn_write{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
}