@charset "UTF-8";

/* =============================================
   가맹점 등록 페이지 레이아웃 (index.css)
   구조적 배치만 담당 — 색상·폰트는 style.css 변수 사용
   ============================================= */

.form-section {
    margin-bottom: var(--section-gap);
}

/* ── 2열 그리드 ── */
.form-grid {
    display: flex;
    gap: var(--col-gap);
    align-items: flex-start;
}

.form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    min-width: 0;
}

/* ── 단일 행: label + input 수평 배치 ── */
.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 빈 행 간격 */
.form-spacer {
    height: var(--input-h);
}

/* 전체 너비 행 (URL 등) */
.form-row--full {
    margin-top: var(--row-gap);
}


/* ── 제출 버튼 영역 ── */
.form-submit {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 3vw, 40px);
}

/* =============================================
   반응형
   ============================================= */

/* 태블릿 (≤ 768px): 2열 → 1열 */
@media (max-width: 768px) {
    .form-grid {
        flex-direction: column;
        gap: var(--row-gap);
    }

    .form-col {
        width: 100%;
    }
}

/* 모바일 (≤ 480px): label + input 세로 배치 */
@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .form-label {
        min-width: unset;
    }

}