*,
        *::before,
        *::after {
          box-sizing: border-box;
        }

        .central-container { 
        display: flex; /* Flexbox 레이아웃을 사용합니다 */
        justify-content: center; /* 수평 중앙 정렬 */
        height: 100%; 
        width: 100%;
        min-height: 100vh; /* 화면 전체 높이를 차지하도록 (옵션) */
        background: #f5f6fb;
        flex-wrap: nowrap; /* 컨테이너가 창 크기에 따라 줄을 바꾸도록 설정 */
        padding: 20px; /* 모바일에서 여백 추가 */
        }
        

        .form-wrapper {
          width: 100%;
          max-width: 500px; /* 폼이 너무 넓어지지 않도록 최대 너비 제한 */
          min-height: 650px;
          max-height: 700px;
          height: auto;
          margin: 0 auto;   /* 중앙 정렬 */
          background: #fff; /* 폼 배경(필요에 따라 사용) */
          box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 살짝 그림자(옵션) */
          border-radius: 8px; /* 모서리 둥글게(옵션) */
         }

        .form-box{
        width: 100%;
        margin: 0;   
        padding: 4rem;  
         }

        h4{
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        text-align: left; /* 모바일에서 가운데 정렬 */
        }


        .right-align {
          text-align: right;
        }
        .right-align a {
          color: rgb(102, 102, 102);
          margin-left: 10px; /* 링크 간의 간격 조절 */
          font-size: 14px; /* 모바일에서도 적절한 크기 유지 */
        }



        /* 공통 버튼 & 링크 스타일 */
        .auth-btn {
        /* 레이아웃 */
        display: block;          /* 줄 단위 배치 */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;  /* 패딩·테두리 포함한 너비 계산 */

        margin: 0; 
        /* 내부 여백·폰트 */
        padding: 12px 0;          /* 위아래 동일 */
        font: 700 14px/1 Arial, sans-serif;  /* weight size / line-height */

        /* 색상·모양 */
        color: #fff;
        background: #f25555;
        border: none;
        border-radius: 20px;
        text-align: center;
        text-decoration: none;   /* <a> 언더라인 제거 */

        /* 상호작용 */
        cursor: pointer;
        transition: background .2s ease, opacity .2s;
        -webkit-tap-highlight-color: transparent; /* iOS 클릭 하이라이트 제거 */
        }


        /* 버튼 요소의 기본 UA 스타일 제거(모바일 Safari 등) */
        button.auth-btn { 
        appearance: none;
        -webkit-appearance: none;
        }

        /* Hover / Focus */
        .auth-btn:hover,
        .auth-btn:focus {
        background: #d71919;
        }

        /* 클릭 시 */
        .auth-btn:active {
        opacity: .85;
        }

        /* 비활성 예시 */
        .auth-btn:disabled {
        opacity: .5;
        cursor: default;
        }


        /* 체크박스 전체 컨테이너 */
       .checkbox-container {
        display: flex;            /* 가로 배치 */
        flex-direction: column;   /* 수직으로 나열 */
        align-items: flex-start;  /* 왼쪽 정렬 */
        text-align: left;
        gap: 5px;
        margin-bottom: 20px;      /* 체크박스 영역과 아래 요소 사이 간격 */
        }

        .checkbox-container input[type="checkbox"] {

        /* 실제 크기 */
        padding: 5px;
        width: 13px;
        height: 13px;
        box-sizing: border-box;   /* border 포함 계산 */

        margin: 0;            /* margin-top 12px 제거 */
        margin-right: 8px;    /* 라벨과 거리 */

        /* 외형 */
        border: 1px solid #777;
        border-radius: 3px;
        background: #fff;
        cursor: pointer;
        }

        
        /* ② 체크 표시 직접 그리기 */
        .checkbox-container input[type="checkbox"]::after {
        content: '';
        position: absolute;
        inset: 2px;               /* 상하좌우 2px 여백 */
        display: none;
        /* background: url('/icons/check.svg') center/contain no-repeat; 예시 */
        }

        .checkbox-container input[type="checkbox"]:checked::after {
        display: block;
        }

        /* 각 체크박스를 감싸는 div */
        .rememberLogin,
        .keepLogin {
            display: inline-flex;
            align-items: center;  /* 세로 중앙 맞춤 */
            gap: 8px;             /* 최신 브라우저는 gap 지원 */
            white-space: nowrap;
            font-size: 0.95rem;   /* 모바일 가독성 */
            color: grey;
        }

        /* 체크박스 크기 확대 */
        .rememberLogin input[type="checkbox"],
        .keepLogin input[type="checkbox"] {
          width: 16px;
          height: 16px;
          margin: 0 8px 0 0;
          padding: 0;
          transform: none;
          vertical-align: middle;
          cursor: pointer;
          position: relative;
          top: -1px; 

        }

        .rememberLogin label,
        .keepLogin label {
          display: inline-flex;
          align-items: center;
          line-height: 1;
          cursor: pointer;          /* 라벨에도 클릭 가능한 느낌 */
        }




        /* ========== 반응형 미디어 쿼리 ========== */
        /* 해상도가 768px 이하(대략 태블릿 ~ 모바일)일 때 */
        @media (max-width: 768px) {
        
          .form-wrapper {
            width: 90%;
            max-width: 90%; 
            margin: 0 10px; /* 양 옆에 간단히 여백 */
            padding: 10px;
            }
        
           h4 {
            font-size: 1.25rem; 
            }
        
           a.button {
            font-size: 14px;
            padding-top: 10px;
            padding-bottom: 10px;
            }
        
           .checkbox-container {
            margin-bottom: 15px; /* 모바일에서 간격 조금 줄임 */
            }
        }

        /* 해상도가 480px 이하(소형 모바일)일 때 추가로 더 줄이고 싶다면 */
        @media (max-width: 480px) {

            .central-container {
            margin-top:20px;
            height : 500px;
            padding: 0;
            }

            .form-wrapper {
            padding: 0;
            margin: 0;


            }

            .form-box{
            width: 100%;
            margin: 0;   
            padding: 30px;  
            }

            h4 {
            font-size: 1.1rem; 
            }
        


            .checkbox-container input[type="checkbox"] {
            padding: 6px;
            width: 14px;
            height: 14px;
            margin-right: 6px;
        }

        }