/* =============================================================================
   ZZAPS — 회원가입 화면 전용 스타일 (약관 동의 블록 · 약관 모달)

   이 파일은 회원가입 화면에서만 읽는다.
   모든 선택자를 .zz-agree / .zz-doc-modal 안으로 가둔다.
   공통 app.css · 로그인 · 다른 폼 화면은 건드리지 않는다.
   색은 공통 테마 변수를 읽기만 한다.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 약관 동의 블록
   -------------------------------------------------------------------------- */

.zz-agree {
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.zz-agree-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

/* --- 전체 동의 --- */
.zz-agree-all {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 접근성 최소 터치 영역 */
    min-height: 44px;
    padding: 0 2px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.zz-agree-all span { font-size: 15px; color: var(--text); }

/* --- 항목 목록 --- */
.zz-agree-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.zz-agree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.zz-agree-item > label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.zz-agree-item > label > span {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    /* 긴 문구가 [보기] 버튼을 밀어내지 않게 */
    min-width: 0;
}

/* 체크박스 자체는 공통 스타일을 따르되 크기만 맞춘다 */
.zz-agree input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

/* 필수 / 선택 표시 */
.zz-agree-tag {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--text-dim);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    vertical-align: 1px;
}
.zz-agree-tag.is-required {
    background: var(--primary-dim);
    color: var(--primary);
}

/* [보기] — 링크지만 버튼처럼 보이게 */
.zz-agree-view {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 손가락으로 누를 수 있는 최소 크기 */
    min-width: 52px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}
.zz-agree-view:hover { color: var(--text); border-color: var(--border-strong); }

.zz-agree-err { list-style: none; }
.zz-agree-err .error-text { margin: 0 0 6px 30px; }

/* 아주 좁은 화면에서는 문구가 두 줄이 되므로 위아래 정렬로 바꾼다 */
@media (max-width: 359px) {
    .zz-agree { padding: 12px 14px; }
    .zz-agree-item > label > span { font-size: 13px; }
    .zz-agree-view { min-width: 46px; padding: 0 8px; }
}

/* -----------------------------------------------------------------------------
   2. 약관 전문 모달

   문서 본문은 /legal/{slug}?bare=1 을 iframe 으로 띄운다.
   레이어는 공통 토큰(--z-modal)을 쓴다. 화면 전용 숫자를 새로 만들지 않는다.
   -------------------------------------------------------------------------- */

.zz-doc-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.zz-doc-modal[hidden] { display: none; }

.zz-doc-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, .65);
    cursor: pointer;
}

.zz-doc-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 앱 컨테이너 폭을 넘지 않는다 */
    max-width: var(--zz-app-w, 430px);
    /* 화면 높이의 대부분을 쓰되 넘치지 않게 */
    height: min(86vh, 86dvh);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.zz-doc-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 14px 12px 14px 16px;
    border-bottom: 1px solid var(--border);
}
.zz-doc-modal-head h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.zz-doc-modal-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
}
.zz-doc-modal-close:hover { color: var(--text); background: var(--surface-2); }

.zz-doc-modal-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--bg);
}

.zz-doc-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
}
.zz-doc-modal-foot .btn { flex: 1; }
.zz-doc-modal-foot #zz-doc-modal-open { flex: 0 0 auto; }

/* 모달이 열려 있는 동안 뒤쪽 스크롤을 막는다 (JS 가 body 에 붙인다) */
body.zz-doc-open { overflow: hidden; }