@charset "UTF-8";

/* --- 1. 공통 레이아웃 --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Malgun Gothic', 'Noto Sans KR', sans-serif; background-color: #e9ecef; }
        a { text-decoration: none; color: inherit; }

        .mobile-wrapper {
            position: relative;
            width: 100%;
            max-width: 480px;
            min-height: 100vh;
            margin: 0 auto;
            background-color: #3b6dee; /* 파란색 배경 */
            overflow-x: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
        }

        /* --- 2. 상단 공통 헤더 --- */
        .header {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            background-color: #ffffff;
            border-bottom: 1px solid #ddd;
            position: relative;
            z-index: 5;
        }
        
        .btn-hamburger {
            position: absolute;
            left: 15px;
            font-size: 26px;
            background: none;
            border: none;
            cursor: pointer;
            color: #333;
            padding: 5px;
        }

        .header-title {
            font-size: 18px;
            font-weight: 800;
            color: #333;
            letter-spacing: -0.5px;
        }

        /* --- 3. 회원가입 콘텐츠 영역 --- */
        .main-content {
            flex: 1; 
            display: flex;
            justify-content: center;
            align-items: flex-start; 
            padding: 5vh 15px 20px; /* 약간 위쪽으로 배치 */
        }

        .signup-box {
            background-color: #f8f9fa; /* 이미지 배경색과 유사한 밝은 회색 */
            padding: 30px 20px;
            border-radius: 2px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            width: 100%;
            border: 2px solid #ddd;
            position: relative;
        }

        /* 타이틀 */
        .page-title {
            font-size: 22px;
            font-weight: bold;
            color: #38b76c; /* 초록색 */
            text-align: center;
            margin-bottom: 25px;
        }

        /* 약관 영역 */
        .terms-section {
            margin-bottom: 20px;
        }
        .terms-label {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
		.terms-box {
		    background-color: #e9ecef;
		    border: 1px solid #ddd;
		    height: 120px; /* 약관을 읽기 편하도록 높이를 살짝 늘렸습니다 (원하는 대로 조절 가능) */
		    padding: 10px;
		    font-size: 12px; /* 글씨가 많으므로 살짝 작게 */
		    color: #555;
		    overflow-y: auto; /* 내용이 높이를 초과하면 세로 스크롤 자동 생성 */
		    text-align: left; /* 긴 글은 좌측 정렬이 읽기 편합니다 */
		    line-height: 1.5; /* 줄 간격을 넓혀 가독성 확보 */
		    margin-bottom: 5px;
		}
		
		/* (선택사항) 스크롤바 디자인을 얇고 예쁘게 커스텀하고 싶다면 아래 코드를 추가하세요 */
		.terms-box::-webkit-scrollbar {
		    width: 6px;
		}
		.terms-box::-webkit-scrollbar-thumb {
		    background-color: #bbb;
		    border-radius: 3px;
		}
		.terms-box::-webkit-scrollbar-track {
		    background-color: #e9ecef;
		}
        .terms-agree {
            text-align: right;
            font-size: 13px;
            color: #333;
        }
        .terms-agree input[type="checkbox"] {
            vertical-align: middle;
            margin-right: 5px;
        }

        /* 폼 섹션 공통 (* 필수, * 선택정보) */
        .section-title {
            font-size: 13px;
            font-weight: bold;
            color: #555;
            margin: 20px 0 10px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }

        /* 폼 입력 행 (좌측 라벨, 우측 입력칸) */
        .form-row {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .form-label {
            width: 110px; /* 라벨 너비 고정 */
            font-size: 14px;
            font-weight: bold;
            color: #333;
            flex-shrink: 0;
        }
        .form-input, .form-select {
            flex-grow: 1;
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #999;
            background-color: #fdfdfd;
            font-size: 14px;
            box-sizing: border-box;
            height: 38px;
        }
        
        /* 특정 입력칸 너비 조절 및 부가 텍스트 */
        .row-half-input {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }
        .row-half-input .form-select {
            width: 50%; /* 절반 크기 */
            margin-right: 10px;
        }
        .suffix-text {
            font-size: 12px;
            color: #333;
        }

        /* 가입신청 버튼 */
        .btn-submit {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 30px;
            background-color: #38b76c; 
            color: #FFFFFF;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 30px;
        }
        .btn-submit .arrow-icon {
            background-color: rgba(0,0,0,0.15);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            font-size: 14px;
        }