/* BASIC css start */
/* ============================================================
   THE LAB CHEMICAL — 회원가입 CSS (join.css)
   적용: 회원가입 약관동의 페이지
   ※ common.css 디자인 토큰(--navy, --border 등) 사용
============================================================ */


/* ════════════════════════════════════════
   페이지 타이틀
════════════════════════════════════════ */
#terms .cateTit_v2.join {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--text);
  margin-bottom: 30px;
}

#terms .cateTit_v2.join .title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-style: normal;
}


/* ════════════════════════════════════════
   전체 래퍼
════════════════════════════════════════ */
#terms {
  padding-bottom: 60px;
}

#terms .page-body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px 40px;
  box-shadow: var(--shadow-xs);
}

#terms fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

#terms fieldset legend {
  display: none;
}


/* ════════════════════════════════════════
   섹션 제목 (h3, h4)
════════════════════════════════════════ */
#terms .new-privercy-contract h3,
#terms h4.tit {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font);
  letter-spacing: -.02em;
  margin: 28px 0 8px;
}

#terms .new-privercy-contract h3:first-child,
#terms h4.tit:first-child {
  margin-top: 0;
}

#terms .new-privercy-contract h3 strong {
  color: var(--navy);
}

#terms .new-privercy-contract h3 span {
  color: var(--navy);
}

/* 필수/선택 체크 위치 */
#terms .new-privercy-contract h3 {
  position: relative;
}
#terms .new-privercy-contract h3 .check {
  position: absolute;
  top: 0;
  right: 0;
}
#terms .new-privercy-contract h3.w-normal {
  font-weight: 400;
  color: var(--text-sub);
  font-size: 13px;
}


/* ════════════════════════════════════════
   약관 textarea
════════════════════════════════════════ */
#terms .new-privercy-contract,
.new-privercy-contract {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#terms .privercy-contract,
.privercy-contract {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 10px;
  box-sizing: border-box;
}

#terms .privercy-contract textarea,
.privercy-contract textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 250px !important;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--text-sub);
  line-height: 1.7;
  resize: vertical;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  box-sizing: border-box;
}


/* ════════════════════════════════════════
   약관 탭 (.privercy-contract-tap)
════════════════════════════════════════ */
.privercy-contract-tap {
  height: auto;
  margin-bottom: 0;
}

.privercy-contract-tap ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 0;
  border-bottom: 2px solid var(--border);
}

.privercy-contract-tap ul li a {
  display: block;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--ease);
  white-space: nowrap;
}

.privercy-contract-tap ul li.sel a,
.privercy-contract-tap ul li a:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}


/* ════════════════════════════════════════
   동의 체크박스 (.privercy-agree)
════════════════════════════════════════ */
#terms .privercy-agree {
  margin: 8px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

#terms .privercy-agree label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
}

#terms .privercy-agree label strong {
  color: var(--navy);
}

#terms .privercy-agree input[type="checkbox"],
#terms .privercy-agree input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}

/* textarea 아래 체크 문구 (.privercy-chk) */
#terms .privercy-chk {
  margin-top: 8px;
  text-align: right;
}

#terms .privercy-chk label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

#terms .privercy-chk label strong {
  color: var(--navy);
}

#terms .privercy-chk input {
  width: 15px;
  height: 15px;
  accent-color: var(--navy);
}


/* ════════════════════════════════════════
   전체 동의 체크 영역 (#chkwrap)
════════════════════════════════════════ */
#chkwrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  margin-bottom: 20px;
}

#chkwrap .all-chk {
  height: auto;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

#chkwrap .all-chk .input-cbox {
  width: 15px;
  height: 15px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}

#chkwrap .cont {
  padding: 16px 20px;
}

#chkwrap .cont ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 0;
  list-style: none;
}

#chkwrap .cont ul::after {
  display: none;
}

#chkwrap .cont ul li {
  float: none;
  width: auto;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
}

#chkwrap .cont ul li input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}

#chkwrap .cont ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  text-decoration: none;
  transition: all var(--ease);
  line-height: 1.4 !important;
  margin-top: 0;
}

#chkwrap .cont ul li a:hover {
  border-color: var(--navy);
  color: var(--navy);
}

#chkwrap .cont strong { color: var(--text); }
#chkwrap .cont label  { font-weight: 600; font-family: var(--font); }

/* 마케팅 수신 */
#chkwrap .cont .marketing {
  padding: 12px 0 0 0;
  border-top: 1px dashed var(--border);
  margin-top: 12px;
  line-height: 1.5;
}

#chkwrap .cont .marketing .mk-wrap {
  height: auto;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

#chkwrap .cont .marketing .mk-wrap input {
  width: 14px;
  height: 14px;
  accent-color: var(--navy);
  margin-top: 0;
}


/* ════════════════════════════════════════
   약관 테이블 (#terms .tbl, .contract-tbl)
════════════════════════════════════════ */
#terms .tbl {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--text);
  border-left: none;
  margin-bottom: 12px;
}

#terms .tbl caption { display: none; }

#terms .tbl th {
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
  height: auto;
}

#terms .tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0;
  height: auto;
  background: #fff;
}

#terms .tbl td ul { list-style: none; padding: 0; margin: 0; }
#terms .tbl td ul li { padding: 0; }
#terms .tbl td .txt-l { padding: 0; text-align: left; }
#terms .tbl td .mr15 { margin-right: 12px; }

/* 개인정보 수집 테이블 */
#terms .contract-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

#terms .contract-tbl th,
#terms .contract-tbl td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
}

#terms .contract-tbl th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--text-sub);
}

#terms .contract-tbl th div {
  height: auto;
  line-height: 1.5;
}

#terms .contract-tbl tbody th {
  font-weight: 400;
}

/* 하단 버튼 테이블 영역 */
#terms .btn-foot {
  margin-top: 24px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 8px;
}

#terms .btn-foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

#terms .btn-foot a img {
  display: none; /* gif 이미지 숨김 */
}


/* ════════════════════════════════════════
   동의하고 가입하기 버튼 (.btn-agree)
════════════════════════════════════════ */
.btn-agree {
  margin-top: 32px;
}

.btn-agree a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--navy);
  border-radius: var(--radius);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font);
  letter-spacing: -.02em;
  text-decoration: none;
  transition: background var(--ease);
}

.btn-agree a:hover {
  background: var(--navy-dk);
}

/* btn-foot gif 대체 버튼 스타일 */
#terms .btn-foot a::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}

#terms .btn-foot a:first-child::after {
  content: '동의합니다';
  background: var(--navy);
  color: #fff;
  border: 1.5px solid var(--navy);
}

#terms .btn-foot a:last-child::after {
  content: '거부합니다';
  background: #fff;
  color: var(--text-sub);
  border: 1.5px solid var(--border);
}

#terms .btn-foot a:first-child:hover::after {
  background: var(--navy-dk);
  border-color: var(--navy-dk);
}

#terms .btn-foot a:last-child:hover::after {
  border-color: var(--navy);
  color: var(--navy);
}


/* ════════════════════════════════════════
   하단 안내 문구 (.btm-msg)
════════════════════════════════════════ */
.btm-msg {
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.8;
}


/* ════════════════════════════════════════
   form-wrap (일부 버전에서 사용)
════════════════════════════════════════ */
.form-wrap {
  width: 100%;
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding-bottom: 20px;
}

.form-wrap h3.form-title {
  margin: 0;
  padding: 18px 20px 0;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  letter-spacing: -.02em;
}

.form-wrap h3.form-title strong {
  display: block;
  background-image: none;
}


/* ════════════════════════════════════════
   반응형
════════════════════════════════════════ */
@media (max-width: 768px) {
  #terms .page-body {
    padding: 24px 20px 28px;
  }

  #chkwrap .cont ul li {
    min-width: 100%;
  }

  .privercy-contract-tap ul {
    flex-wrap: wrap;
  }

  .privercy-contract-tap ul li a {
    padding: 7px 10px;
    font-size: 12px;
  }
}
/* BASIC css end */