@charset "utf-8";

/* =========================
   기본 Reset (모달 내부만)
   ========================= */
#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 16px !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, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #16a34a;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 12px 0;
  text-align: center;
}

#myModal1 .cc-guide-header .cc-guide-title {
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

#myModal1 .cc-guide-header .cc-guide-desc {
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
}

/* =========================
   ✅ Callcenter Calendar (컴팩트 버전)
   scoped to #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{
  width:16px; height:16px;
  display:inline-flex;
  align-items:center; justify-content:center;
  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;
  padding:0 !important;
}

/* 캘린더 헤더 (년월 + 이전/다음) */
#myModal1 .cc-cal-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
#myModal1 .cc-cal-head button{
  border:0;
  background:transparent;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  color:#111827;
  padding:4px 8px;
  border-radius:8px;
  pointer-events:auto;
  position:relative;
  z-index:2;
}
#myModal1 .cc-cal-head button:hover{ background:#f3f4f6; }
#myModal1 .cc-cal-head .ym{
  font-weight:900;
  font-size:15px;
}

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

/* 날짜 그리드 */
#myModal1 .cc-grid{
  display:grid !important;
  grid-template-columns:repeat(7,1fr) !important;
  padding:8px;
  gap:4px;
}

/* 개별 날짜 셀 */
#myModal1 .cc-day{
  height:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:13px;
  border-radius:8px;
  cursor:pointer;
}
#myModal1 .cc-day.dim,
#myModal1 .cc-day.disabled{
  color:#cbd5e1;
  cursor:default;
}
#myModal1 .cc-day.today{ border:1px solid #e5e7eb; }
#myModal1 .cc-day.sel{
  background:#16a34a;
  color:#fff;
}
#myModal1 .cc-day.sel .mini{ color:#dcfce7; }
#myModal1 .cc-day .mini{
  display:block;
  font-size:9px;
  font-weight:900;
  margin-top:1px;
  color:#16a34a;
}

/* =========================
   ✅ 시간 선택 (컴팩트 버전)
   ========================= */
#myModal1 .cc-times{
  padding:8px 10px;
  border-top:1px solid #e5e7eb;
  background:#fff;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
}

/* 시간 레이블 */
#myModal1 .cc-hour-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
  padding:0 2px;
}
#myModal1 .cc-hour-row .cc-hour{
  font-size:10px;
  font-weight:800;
  color:#6b7280;
  text-align:center;
  flex:0 0 auto;
}

/* 바 컨테이너 */
#myModal1 .cc-bars{
  display:flex;
  height:40px;
  background:#e0f2fe;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:8px;
}

/* 개별 바 */
#myModal1 .cc-bar{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:all 0.2s;
  border-right:1px solid #bae6fd;
  pointer-events:auto;
}
#myModal1 .cc-bar:last-child{ border-right:none; }

#myModal1 .cc-bar small{
  display:none;
  font-size:10px;
  font-weight:800;
  color:#6b7280;
  position:relative;
  z-index:1;
}

#myModal1 .cc-bar.on{
  background:#16a34a;
  border-right-color:#15803d;
}
#myModal1 .cc-bar.on small{
  color:#fff;
  font-weight:900;
}

#myModal1 .cc-bar.first-click{
  background:#0ea5e9;
  border-right-color:#0284c7;
}

#myModal1 .cc-bar.lock{
  background:#fecaca;
  border-right-color:#fca5a5;
  cursor:not-allowed;
  opacity:0.7;
}
#myModal1 .cc-bar.lock small{ color:#ef4444; }

#myModal1 .cc-bar:hover:not(.lock){
  background:#0ea5e9;
  border-right-color:#0284c7;
}
#myModal1 .cc-bar.on:hover{
  background:#15803d;
  border-right-color:#166534;
}

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

/* 반응형 */
@media (max-width:480px){
  #myModal1 .cc-day{ height:34px; font-size:12px; }
  #myModal1 .cc-bars{ height:38px; }
  #myModal1 .cc-summary{ padding:6px 8px; }
  #myModal1 .cc-summary .txt{ font-size:12px; }
  #myModal1 .cc-grid{ padding:6px; gap:3px; }
  #myModal1 .cc-guide-header{ padding:12px 14px; }
  #myModal1 .cc-guide-header .cc-guide-title{ font-size:15px; }
  #myModal1 .cc-guide-header .cc-guide-desc{ font-size:12px; }
  
  /* ✅ 모바일 여백 증가 */
  #myModal1 .cc-wrap { margin-bottom: 30px; }
}

/* =========================================================
   ✅ (옵션) 모달 밖에서도 쓰고 싶을 때만:
   cc 영역을 <div class="cc-default"> ... </div> 로 감싸서 사용
   ========================================================= */

.cc-default .cc-wrap{
  margin-top:16px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.cc-default .cc-summary{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
.cc-default .cc-summary .ico{
  width:34px; height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  font-size:16px;
}
.cc-default .cc-summary .txt{
  font-size:14px;
  font-weight:800;
  color:#111827;
  line-height:1.2;
}
.cc-default .cc-summary .sub{
  font-size:12px;
  color:#6b7280;
  margin-top:4px;
}

.cc-default .cc-cal{
  padding:14px;
  background:#fff;
}

.cc-default .cc-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.cc-default .cc-cal-head .ym{
  font-size:16px;
  font-weight:900;
  letter-spacing:-0.3px;
  color:#111827;
}

.cc-default .cc-prev,
.cc-default .cc-next{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:18px;
  cursor:pointer;
}
.cc-default .cc-prev:hover,
.cc-default .cc-next:hover{ background:#f9fafb; }

.cc-default .cc-dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin-bottom:8px;
  color:#6b7280;
  font-size:12px;
  font-weight:700;
  text-align:center;
}

.cc-default .cc-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

.cc-default .cc-day{
  height:42px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
  font-weight:800;
  color:#111827;
}
.cc-default .cc-day.dim{
  border:0;
  background:transparent;
  cursor:default;
}
.cc-default .cc-day.disabled{
  opacity:.35;
  cursor:not-allowed;
}
.cc-default .cc-day.today{ border-color:#111827; }
.cc-default .cc-day .mini{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:800;
  color:#6b7280;
}
.cc-default .cc-day.sel{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.cc-default .cc-day.sel .mini{ color:#e5e7eb; }

.cc-default .cc-times{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  background:#fafafa;
}

.cc-default .cc-hour-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  padding:0 2px;
}
.cc-default .cc-hour-row .cc-hour{
  font-size:11px;
  font-weight:800;
  color:#6b7280;
  text-align:center;
  flex:0 0 auto;
}

.cc-default .cc-bars{
  display:flex;
  height:50px;
  background:#e0f2fe;
  border-radius:12px;
  overflow:hidden;
}

.cc-default .cc-bar{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:all 0.2s;
  border-right:1px solid #bae6fd;
}
.cc-default .cc-bar:last-child{ border-right:none; }

.cc-default .cc-bar small{
  display:none;
  font-size:11px;
  font-weight:800;
  color:#6b7280;
  position:relative;
  z-index:1;
}

.cc-default .cc-bar.on{
  background:#22c55e;
  border-right-color:#16a34a;
}
.cc-default .cc-bar.on small{
  color:#fff;
  font-weight:900;
}

.cc-default .cc-bar.first-click{
  background:#0ea5e9;
  border-right-color:#0284c7;
}

.cc-default .cc-bar.lock{
  background:#fecaca;
  border-right-color:#fca5a5;
  cursor:not-allowed;
  opacity:0.7;
}
.cc-default .cc-bar.lock small{ color:#ef4444; }

.cc-default .cc-bar:hover:not(.lock){
  background:#0ea5e9;
  border-right-color:#0284c7;
}
.cc-default .cc-bar.on:hover{
  background:#16a34a;
  border-right-color:#15803d;
}

.cc-default .cc-range{
  margin-top:10px;
  font-size:13px;
  font-weight:900;
  color:#111827;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.cc-default .cc-range .sub{
  font-size:12px;
  font-weight:800;
  color:#6b7280;
}

@media (max-width:480px){
  .cc-default .cc-bars{ height:46px; }
}