/* ===== 전역 초기화 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", system-ui, sans-serif;
}

/* ────────────────────────── */
/* PC : 얇은 상단 헤더       */
/* ────────────────────────── */

.join-topbar {
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 12px;
}

/* 화면 가운데 흰 박스(컨테이너) */
.join-topbar-inner {
  max-width: 1100px;       /* 흰 박스 폭 */
  margin: 0 auto;          /* 양옆 여백(검은 부분이라고 그린 거) */
  padding: 0 24px;         /* 흰 박스 안에서 좌우 여백 */
  display: flex;
  align-items: center;
  width: 100%;
}

/* 왼쪽: 로고 */
.join-topbar-left {
  display: flex;
  align-items: center;
}

.join-logo {
  height: 25px;            /* 로고 살짝 줄이고 싶으면 여기만 조절 */
  display: block;
  object-fit: contain;
}

/* 오른쪽: 텍스트 묶음 */
.join-topbar-right {
  margin-left: auto;       /* 로고랑 최대한 떨어져서 오른쪽으로 붙음 */
  display: flex;
  align-items: center;
  gap: 12px;
}

.join-topbar-right a {
  color: #65748b;
  text-decoration: none;
  font-size: 12px;
}

.join-topbar-right a:hover {
  opacity: 0.7;
}

.join-topbar-right span {
  color: #d0d0d0;
  font-size: 12px;
}

/* ────────────────────────── */
/* PC : 회원가입 푸터         */
/* ────────────────────────── */

.join-footer {
    background: #f7f8fc;
    border-top: 1px solid #e5e7eb;
    padding: 40px 0 55px;
    margin: 0;
}

.join-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

/* 푸터 링크 (한 줄 고정) */
.join-footer-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    line-height: 1.6;
    margin-bottom: 14px;
}

.join-footer-links a {
    color: #6c7280;
    text-decoration: none;
    font-size: 13px;
}
.join-footer-links a:hover {
    opacity: 0.7;
}

.join-footer-links span {
    color: #d0d0d0;
}

/* PC에서는 줄바꿈 br 숨김 */
.join-footer-break {
    display: none;
}

.join-footer-copy {
    font-size: 12px;
    color: #9ca3af;
}