/* =============================================
   빠른상담 배너 - 공통 기본 리셋
   ============================================= */
.cs_wrap *,
.cs_wrap *::before,
.cs_wrap *::after {
  color: inherit;
  letter-spacing: -0.05em;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-family: inherit;
  box-sizing: border-box;
  word-break: keep-all;
  margin: 0;
}

/* =============================================
   Fixed 배너 공통
   ============================================= */
.cs_wrap {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 500;
  background-color: #1e2e68;
  font-family: 'Noto Sans KR', sans-serif;
}
.cs_wrap .cs {
  width: 100%;
}

/* =============================================
   페이지 하단 여백 (fixed 배너 가림 방지)
   ============================================= */
body {
  padding-bottom: 98px !important;
}

/* =============================================
   데스크탑 배너 (769px ~)
   clamp(최소, vw기준, 최대) 로 유동 스케일
   ============================================= */
.cs_pc {
  display: block;
}
.cs_pc .cs_box {
  max-width: 1200px;
  margin: 0 auto;
  /* 패딩·갭도 좁아지면 줄어듦 */
  padding: 0 clamp(10px, 1.5vw, 20px);
  height: 98px;
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.55vw, 8px);
}

/* select: 뷰포트에 비례, 최소 105px */
.cs_pc select {
  width: clamp(105px, 11.5vw, 145px);
  height: 33px;
  padding: 0 24px 0 clamp(6px, 0.8vw, 10px);
  background-color: #fff;
  color: #353535;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 6 0 0h9z' fill='%23353535'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* select option 스타일 (드롭다운 목록 항목) */
.cs_pc select option {
  background-color: #fff;
  color: #353535;
  font-weight: 700;
}

/* =============================================
   커스텀 셀렉트 공통
   ============================================= */
.cs_sel_hidden {
  display: none !important;
}
.cs_select_wrap {
  position: relative;
  flex-shrink: 0;
}
.cs_sel_trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 33px;
  padding: 0 8px 0 10px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.cs_sel_trigger svg {
  flex-shrink: 0;
  transition: transform 0.15s;
}
.cs_select_wrap.open .cs_sel_trigger svg {
  transform: rotate(180deg);
}
.cs_sel_val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #353535;
  font-weight: 700;
}
.cs_sel_list {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.18);
  z-index: 600;
  list-style: none;
  overflow: hidden;
}
.cs_select_wrap.open .cs_sel_list {
  display: block;
}
.cs_sel_list li {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #353535;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.cs_sel_list li:hover {
  background-color: #f0f4ff;
}

/* PC 커스텀 셀렉트 크기 */
.cs_pc .cs_select_wrap {
  width: clamp(105px, 11.5vw, 145px);
}
.cs_pc .cs_sel_trigger {
  font-size: clamp(12px, 1.1vw, 14px);
}
.cs_pc .cs_sel_list li {
  font-size: clamp(12px, 1.1vw, 14px);
}

/* MO 커스텀 셀렉트 크기 */
.cs_mo .cs_select_wrap {
  width: calc(50% - 4px);
  min-width: 0;
}
.cs_mo .cs_sel_trigger {
  font-size: 14px;
}

/* text inputs: 뷰포트에 비례, 최소 75px */
.cs_pc input[type="text"] {
  width: clamp(75px, 10.5vw, 140px);
  height: 33px;
  padding: 0 clamp(6px, 0.8vw, 10px);
  background-color: #fff;
  color: #353535;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  outline: none;
  flex-shrink: 0;
}
.cs_pc input[type="text"]::placeholder {
  color: #9f9f9f;
  font-weight: 700;
}

/* checkbox 영역: 텍스트가 좁아지면 자연스럽게 줄어듦 */
.cs_pc .check {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 7px);
  flex-shrink: 1;         /* 다른 요소 확보 후 남은 공간으로 줄어듦 */
  min-width: 0;
  cursor: pointer;
}
.cs_pc .check input[type="checkbox"] {
  display: none;
}
.cs_pc .check label {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.cs_pc .check input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.cs_pc .check_more {
  color: #fff;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 버튼: 가장 마지막 → margin-left:auto 로 오른쪽 끝 고정 */
.cs_pc button#csBtnPc {
  width: clamp(100px, 12vw, 158px);
  height: clamp(38px, 3.9vw, 48px);
  background-color: #ffd93d;
  color: #1e2e68;
  font-size: clamp(14px, 1.65vw, 20px);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.cs_pc button#csBtnPc:hover {
  background-color: #f5c800;
}

/* =============================================
   데스크탑: nav-bar 하단 클리핑
   ============================================= */
.nav-bar {
  max-height: calc(100vh - 150px - 98px - 10px);
  overflow: hidden;
}

/* =============================================
   webchat 위로 올리기 (certi.life / 공통 선택자)
   ============================================= */
[id="webchatSDK"],
[id*="webchat"],
[class*="webchat"],
[id*="wc-widget"],
[class*="wc-widget"],
[id*="certi"],
[class*="certi"] {
  bottom: 108px !important;
}

/* speech-bubble: 버튼(bottom:108px, 높이:60px) + 원래 gap(28px) = 196px */
[id="webchat-speech-bubble"],
[class*="webchat-speech-bubble"] {
  bottom: 196px !important;
}

/* 채팅 iframe: close 버튼(bottom:108px, 높이:60px) 위, 뷰포트 기준 max-height */
#webchat-iframe {
  bottom: 168px !important;
  max-height: calc(100dvh - 168px) !important;
}

/* =============================================
   모바일 배너 (기본: 숨김)
   ============================================= */
.cs_mo {
  display: none;
}
.cs_mo .cs_box {
  padding: 17px 22px;
}
.cs_mo .cs_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}
.cs_mo .cs_row:last-child {
  margin-bottom: 0;
}
.cs_mo .check {
  display: flex;
  align-items: center;
  gap: 5px;
  width: calc(50% - 4px);
  min-width: 0;
  cursor: pointer;
}
.cs_mo .check input[type="checkbox"] {
  display: none;
}
.cs_mo .check label {
  width: 14px;
  height: 14px;
  border: 1.5px solid #fff;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.cs_mo .check input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute;
  left: 1px;
  top: -1px;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.cs_mo .check_more {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.55px;
  white-space: nowrap;
}
.cs_mo select option {
  background-color: #fff;
  color: #353535;
  font-weight: 700;
}
.cs_mo select {
  flex: 1;
  height: 33px;
  padding: 0 10px;
  background-color: #fff;
  color: #353535;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 6 0 0h9z' fill='%23353535'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.cs_mo input[type="text"] {
  width: calc(50% - 4px);
  height: 33px;
  padding: 0 12px;
  background-color: #fff;
  color: #353535;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  outline: none;
}
.cs_mo input[type="text"]::placeholder {
  color: #9f9f9f;
  font-weight: 700;
}
.cs_mo .cs_btn_primary,
.cs_mo .cs_btn_secondary {
  width: calc(50% - 4px);
  height: 42px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.cs_mo .cs_btn_primary {
  background-color: #ffd93d;
  color: #1e2e68;
}
.cs_mo .cs_btn_primary:hover { opacity: 0.9; }
.cs_mo .cs_btn_secondary {
  background-color: #fff;
  color: #1e2e68;
}
.cs_mo .cs_btn_secondary:hover { opacity: 0.85; }

/* =============================================
   모바일 분기 (≤768px)
   ============================================= */
@media all and (max-width: 768px) {
  .cs_pc { display: none !important; }
  .cs_mo { display: block !important; }

  body {
    padding-bottom: 176px !important;
  }

  .cs_mo input[type="text"] {
    font-size: 16px;
  }

  [id="webchatSDK"],
  [id*="webchat"],
  [class*="webchat"],
  [id*="wc-widget"],
  [class*="wc-widget"],
  [id*="certi"],
  [class*="certi"] {
    bottom: 186px !important;
  }

  /* speech-bubble: 버튼(bottom:186px, 높이:60px) + gap(28px) = 274px */
  [id="webchat-speech-bubble"],
  [class*="webchat-speech-bubble"] {
    bottom: 274px !important;
  }

  /* 채팅 iframe: 배너(176px) 바로 위에 밀착 */
  #webchat-iframe {
    bottom: 176px !important;
    max-height: calc(100dvh - 176px) !important;
  }
}

/* =============================================
   개인정보취급방침 모달
   ============================================= */
.cs_privacy_btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cs_modal_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2147483647;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.cs_modal_overlay.open {
  display: flex;
}
/* 모달 오픈 시 웹챗 요소 뒤로 내리기 */
body.cs_modal_open [id="webchatSDK"],
body.cs_modal_open [id*="webchat"],
body.cs_modal_open [class*="webchat"],
body.cs_modal_open [id*="wc-widget"],
body.cs_modal_open [class*="wc-widget"],
body.cs_modal_open [id*="certi"],
body.cs_modal_open [class*="certi"] {
  z-index: 1 !important;
}
.cs_modal_box {
  background: #fff;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}
.cs_modal_close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.cs_modal_close:hover {
  color: #111;
}
.cs_modal_body {
  padding: 36px 28px 28px;
  overflow-y: auto;
  flex: 1;
  font-family: 'Noto Sans KR', sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 1.7;
  word-break: keep-all;
}
.cs_modal_body h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1e2e68;
  margin-bottom: 12px;
  padding-right: 32px;
}
.cs_modal_body h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1e2e68;
  margin-top: 24px;
  margin-bottom: 8px;
}
.cs_modal_body p {
  margin-bottom: 8px;
}
.cs_modal_body ul,
.cs_modal_body ol {
  padding-left: 20px;
  margin-bottom: 8px;
}
.cs_modal_body ul {
  list-style: disc;
}
.cs_modal_body ul ul {
  list-style: circle;
  margin-top: 4px;
  margin-bottom: 0;
}
.cs_modal_body ol {
  list-style: decimal;
}
.cs_modal_body li {
  margin-bottom: 4px;
}
.cs_modal_note {
  color: #666;
  font-size: 13px;
}
@media all and (max-width: 768px) {
  .cs_modal_body {
    padding: 36px 20px 20px;
    font-size: 13px;
  }
  .cs_modal_body h2 {
    font-size: 16px;
  }
}