/* =============================================
   빠른상담 배너 - 공통 기본 리셋
   ============================================= */
.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 유동 스케일
   배너 98px 위까지 7개 아이템이 균등 분배되어 축소
   top:20px 기준, 배너 98px + 여백 10px
   ============================================= */
.nav-bar {
  overflow: hidden;
}
.nav-bar .sns-link {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 20px - 98px - 10px);
}
.nav-bar .sns-link li {
  flex: 1;
  min-height: 0;
  margin: 0 !important;
}
.nav-bar .sns-link li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.nav-bar .sns-link li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 1024px) {
  .nav-bar .sns-link {
    max-height: calc(100vh - 90px - 98px - 10px);
  }
}

/* =============================================
   모바일 배너 (기본: 숨김)
   ============================================= */
.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;
  }

  /* input focus 시 모바일 자동 확대 방지 (font-size 16px 미만이면 확대됨) */
  .cs_mo input[type="text"] {
    font-size: 16px;
  }
}

/* =============================================
   개인정보취급방침 모달
   ============================================= */
.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;
}
.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;
  }
}