/* ==========================================================================
   PAGE CONTENT — page_content/* "공통" 스타일만 모음
   (페이지 고유 스타일은 각 php 파일의 내부 <style>에 있음)
   화이트 + 헤어라인 + 세리프 헤드라인 + Jost 라벨 + 테라코타 포인트
   ========================================================================== */

/* ---------- 공통: 테이블 (ceo/map/process 등에서 사용) ---------- */
.sub_content .table {
  margin-top: 0;
  width: 100%;
  border-top: 1px solid var(--primary-color);
  line-height: 1.7;
}

.sub_content .table th {
  padding: 2rem 2.4rem;
  border-bottom: 1px solid var(--line-color);
  background: transparent;

  font-family: var(--eng-font);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
  color: var(--body-color);
  white-space: nowrap;
}

.sub_content .table td {
  padding: 2rem 2.4rem;
  border-bottom: 1px solid var(--line-color);
  border-left: none;
  font-weight: 300;
}

.sub_content .table thead th {
  border-bottom: 1px solid var(--primary-color);
  background: transparent;
}

/* ---------- 공통: 본문 리드 문장 ---------- */
.sub_content .sub_title_tit {
  margin-bottom: 4.8rem;

  font-family: var(--serif-font);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--body-color);
}

/* ==========================================================================
   공통: 폼메일 (fo_wrap) — online_form.php / online_form_board.php 공용
   ========================================================================== */
.fo_wrap {
  max-width: none; /* 컨테이너 꽉 채움 */
  margin: 0;
  border-top: 1px solid var(--primary-color);
  padding-top: 2.4rem;
}

.fo_wrap .input {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: 0.8rem 0;
}

.fo_wrap .input .tit {
  flex: 0 0 12rem;
  font-family: var(--eng-font);
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--body-color);
}

/* 박스형 필드 — 테두리 표시 */
.fo_wrap .frm_input {
  flex: 1;
  width: 100%;
  height: 5.2rem;
  padding: 0 1.6rem;
  border: 1px solid var(--line-color);
  border-radius: 0;
  background: var(--white-color);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--text-color);
  transition: border-color 0.25s;
}

.fo_wrap .frm_input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--white-color);
}

.fo_wrap select.frm_input {
  cursor: pointer;
}

.fo_wrap textarea.frm_input {
  width: 100%;
  height: 16rem;
  padding: 1.2rem 1.6rem;
  line-height: 1.8;
  resize: vertical;
}

.fo_wrap .fregister_agree label {
  font-size: 1.4rem;
  font-weight: 300;
}

.fo_wrap .fregister_agree label b {
  font-weight: 500;
}

/* 제출 버튼 — 블랙 사각 버튼 */
.fo_wrap .submit {
  margin-top: 4.8rem;
  text-align: center;
}

.fo_wrap .submit .btn,
.sub_content .fo_wrap .submit .btn_submit {
  position: relative;
  z-index: 1;
  margin-top: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 5.2rem;
  min-width: 20rem;
  padding: 0 4.8rem;
  overflow: hidden;
  border-radius: 0;

  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white-color);

  font-family: var(--eng-font);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  white-space: nowrap;

  transition: background 0.3s;
}

.sub_content .fo_wrap .submit .btn_submit::before,
.sub_content .fo_wrap .submit .btn_submit::after {
  content: none;
}

.fo_wrap .submit .btn:hover,
.sub_content .fo_wrap .submit .btn_submit:hover {
  background: var(--point-color);
  border-color: var(--point-color);
}

@media (max-width: 540px) {
  .fo_wrap .input {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .fo_wrap .input .tit {
    flex: none; /* 컬럼 전환 시 12rem이 높이로 잡히는 것 방지 */
  }

  .fo_wrap .frm_input {
    width: 100%;
  }
}