body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
            background-color: #e9ecef;
            color: #343a40;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
        }
            /* 새로운 wrapper div에 Flexbox 스타일 적용 */
        #main-content-wrapper {
            display: flex; /* 자식 요소(videoContainer, resultContainer)들을 가로로 배치 */
            justify-content: center; /* 가로 방향 중앙 정렬 (필요시) */
            align-items: flex-start; /* 세로 방향 시작점 정렬 (콘텐츠 길이에 따라 조절) */
            gap: 20px; /* 두 컨테이너 사이 간격 */
            width: 100%; /* 부모 너비의 100% 사용 */
            max-width: 1280px; /* 전체 최대 너비 지정 (선택 사항) */
            flex-wrap: wrap; /* 화면이 작아지면 자동으로 줄바꿈 */
        }
        
        #videoContainer, #resultContainer {
            background-color: #ffffff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin: 0; /* 부모 div에서 gap으로 간격 관리하므로 마진 제거 */
            flex: 1; /* 사용 가능한 공간을 동등하게 나눔 */
            min-width: 300px; /* 내용이 너무 작아지는 것을 방지 (반응형) */
            max-width: calc(50% - 10px); /* (100% - gap) / 2 와 유사하게 설정 */
            text-align: center;
            /* 기존 width: 90%; max-width: 600px;는 이제 필요 없습니다. */
        }
        
    /* 화면이 작아질 때 (예: 모바일) 두 div가 세로로 쌓이도록 */
    @media (max-width: 768px) {
        #main-content-wrapper {
            flex-direction: column; /* 세로로 정렬 */
            align-items: center; /* 가운데 정렬 */
        }
        #videoContainer, #resultContainer {
            max-width: 90%; /* 화면 너비에 맞게 조절 */
            margin-bottom: 20px; /* 세로로 쌓일 때 아래쪽 간격 */
        }
    }


    video {
        width: 100%;
        max-width: 480px;
        height: auto;
        background-color: #000;
        border: 2px solid #ced4da;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    button {
        padding: 12px 25px;
        font-size: 17px;
        font-weight: bold;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        margin-top: 10px;
    }
    button:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
    }
    button:active {
        transform: translateY(0);
    }
    #statusMessage {
        margin-top: 20px;
        font-weight: bold;
        min-height: 20px; /* 메시지 영역 확보 */
    }
    #resultImage {
        /* max-width: 100%; -> videoContainer/resultContainer에 max-width를 줬기 때문에 이제 여기서 굳이 필요없음 */
        height: auto; /* 너비가 100%가 될 때 높이가 자동으로 조절되도록 */
        border: 1px solid #000;
        border-radius: 8px;
        margin-top: 20px;
        display: none; /* 초기에는 숨김 */
        /* width: 640px; height: 480px;는 이제 이미지 크기에 맞추거나 제거하는 것이 좋습니다.
           현재 flex: 1; 설정으로 인해 width 100%를 가져가면서 height: auto로 설정하면 잘 나옵니다.*/
        width: 100%; /* 부모 컨테이너(resultContainer)의 100%를 차지 */
    }
    .success { color: #28a745; }
    .error { color: #dc3545; }
    .info { color: #17a2b8; }
    .loading { color: #ffc107; }
    .hidden { display: none; }

    #rgrp{
      width:100%; /* div 내부에서 100% 사용 */
      text-align: center;
      vertical-align: middle;
      height: 40px;
      margin-top: 10px;
      font-size: 20px;
      /* label과 input 사이의 간격 조절 */
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px; /* 라디오 버튼과 라벨 사이의 간격 */
     margin-bottom: 10px;
    }

    #ori_img_girl{
        margin-left: 50px; /* 여자 라디오 버튼 왼쪽에 여백 추가 */
    }
    #rgrp label {
        cursor: pointer; /* 라벨에 마우스 오버 시 포인터 변경 */
    }
    #qrCodeContainer{
      margin-top: 30px;    
      display: flex;
      justify-content: center;
      align-items: center;         
      height: 150px;
    }