/*
 * static/css/auth/signup_terms.css
 * 회원가입 약관동의 — Figma Sign up(12672:96030)
 * 페이지 틀·제목·'다음' 버튼은 signup.css(.signup-wrapper / .signup-title / .signup-submit-wrap, 함께 로드),
 * 체크박스+문구는 공통 .custom-checkbox · .check-label, 모달은 공통 .modal-dialog--figma, 본문은 legal.css. 여기는 차이만.
 */

/* 폭 600 · 제목(Bold 18/24) ↔ 52 ↔ 본문 · 박스 ↔ 80 ↔ 버튼 */
.signup-wrapper.signup-wrapper--terms { width: 600px; }
.signup-wrapper--terms .signup-title { font-size: 18px; line-height: 24px; letter-spacing: -0.45px; }
.signup-wrapper--terms .agree-form { gap: 80px; }

/* 동의 박스 — Cool Grey 50 · radius 20 · padding 60/80 · 묶음 간격 24 */
.agree-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 60px 80px;
    border-radius: 20px;
    background: var(--Fill-CoolGrey-50, #F8FAFC);
}

/* 묶음 — 줄 간격 10 */
.agree-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 하위 항목 — 왼쪽 24 들여씀 · 오른쪽 '보기' */
.agree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-left: 24px;
}
.agree-item--top { padding-left: 0; }   /* [선택] 묶음 머리 */
/* Email · SMS — 마케팅 정보 수신 아래 한 단계 더(48) */
.agree-channels {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 48px;
}

/* '보기' — 밑줄 Medium 16 */
.agree-view {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--Text-Grey-Main, #111);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: 16px;
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: 24px;
    letter-spacing: -0.4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.agree-view:hover { color: var(--Navy, #002D58); }

/* '보기' 모달 — 본문 스크롤 · 높이 80vh 안 · 하단 '동의' 120 */
.modal-dialog.agree-modal-dialog { max-height: 80vh; }
.agree-modal-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 8px; }
.agree-modal-body .legal-body { gap: 24px; }
.agree-modal-dialog > .modal-footer { justify-content: center; }
.agree-modal-dialog > .modal-footer .btn-common { min-width: 120px; }

@media (max-width: 640px) {
    .signup-wrapper.signup-wrapper--terms { width: 100%; padding: 0 16px 120px; }
    .signup-wrapper--terms .agree-form { gap: 40px; }
    .agree-box { padding: 32px 20px; }
    .agree-box .check-label, .agree-view { font-size: 14px; line-height: 20px; letter-spacing: -0.35px; }
    .agree-box .check-label { align-items: flex-start; }
}