/********** 01. 메인 컨텐츠 컨테이너 **********/
#mainContent {
    padding: 100px 0px;        /* 상하, 좌우 */
}
/* h2 제목과 p 태그 사이 여백 설정 */
#mainContent h2 {
    color: #0081b4;
    margin-bottom: 50px;        /* h2 아래쪽 여백 */
    padding: 0px 170px;
    text-align: center;         /* 텍스트 가운데 정렬 */
}
/* p */
#mainContent p {
    color: #333333;
    padding: 0px 170px;
}

/* 최상단 이동 버튼 CSS */
#scroll-Btn {
    position: fixed;  /* 화면에 고정 */
    bottom: 20px;     /* 화면 아래에서 20px 위치 */
    right: 20px;      /* 화면 오른쪽에서 20px 위치 */
    background-color: #2f62a5;
    color: white;
    border: none;                  /* 테두리 없애기 */
    border-radius: 50%;            /* 둥근 버튼 */
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;               /* 클릭 시 커서 손모양 */
    display: none;                 /* 페이지 로드 시 버튼은 숨김 */
    transition: opacity 0.3s ease; /* 부드럽게 나타나는 효과 */
}
#scroll-Btn:hover {
    background-color: #ffffff;
    color: #2f62a5;
}

/* 비디오 컨테이너 */
#video-Container {
    background-color: rgb(223, 242, 255);
    border-radius: 7px;
    max-width: 1300px;
    max-height: 800px;
    height: 500px;
    margin: 40px auto;               /* 수평 가운데 정렬 */
    padding: 20px;
    display: flex;
    gap: 10px;                       /* 두 영상 사이 여백 */
}
/* 원본 영상, 비식별화 영상 박스 스타일 */
.video-box {
    padding: 10px 0px;
    flex: 1;                         /* 두 비디오 박스가 같은 비율로 공간을 차지 */
    display: flex;
    align-items: center;             /* 중앙*/
    justify-content: center;         /* 내용 중앙 정렬 ( */
    background-color: #1d1d1d;
    border-radius: 7px;
    position: relative;              /* 비디오 맞춤 조정을 위한 상대 위치 설정 */
}
#origVideo, #anonVideo {
    display: flex;
    flex-direction: column;  /* 세로로 배치 */
    align-items: center;     /* 중앙 정렬 */
    justify-content: center; /* 내용 중앙 정렬 */
}
/* 비디오 크기 설정 */
#origPlayer, #anonPlayer {
    width: 100%;            /* 부모 컨테이너 너비에 맞추기 */
    height: 100%;           /* 부모 컨테이너 높이에 맞추기 */
    object-fit: cover;      /* 비율 유지하며 내용 전체를 표시 */
}

/* 비디오 파일 업로드, 파일 업로드(내부) 버튼 */
#video-upload-Btn, #file-upload-Btn {
    padding: 10px;
    background-color: #0081b4;
    color: #ffffff;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    border: 2px solid #0081b4;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    justify-content: center;           /* 내용 중앙 정렬 */
}
#video-upload-Btn:hover, #file-upload-Btn:hover {
    background-color: #006188;
    color: #beedff;                         
    border: 2px solid #006188;
    transition: background-color 0.3s, color 0.3s;
}
/* 마스킹, 이모티콘, 동시 재생, 영상 다운로드 버튼 컨테이너 */
.button-container {
    display: flex;
    margin: 15px;
    gap: 30px;
}
/* 마스킹, 이모티콘, 동시 재생, 영상 다운로드 버튼 */
#masking-Btn, #emoticon-Btn, #simulPlay-Btn, #dwnVideo-Btn {
    padding: 10px;
    background-color: #ffffff;
    color: #0081b4;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    border: 2px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;                   /* 커서 모양 */
    display: flex;
    justify-content: center;           /* 내용 중앙 정렬 */
    align-items: center;               /* 내용 중앙 정렬 */
    position: relative;                /* 포지셔닝을 위한 relative 설정 */
}
#masking-Btn:hover, #emoticon-Btn:hover, #simulPlay-Btn:hover, #dwnVideo-Btn:hover {
    background-color: #006188;
    color: #beedff;                         
    border: 2px solid #006188;
    transition: background-color 0.3s, color 0.3s;
}
#emoticon-container {
    position: absolute; /* 절대 위치 지정 */
    top: 50%;           /* 수직 가운데 정렬 */
    width: 47px;
    height: 400px;      /* 높이를 제한하여 스크롤이 생기도록 설정 */
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: none; /* 기본적으로 숨김 */
    overflow-y: auto; /* 세로 스크롤 활성화 */
}

/********* 기능 소개 비디오 컨테이너 **********/
#function-Background {
    background-color: rgb(90, 140, 160);
}
.introduction h3 {
    color: #0081b4
}
.introduction p {
    color: #333333;
}

/* */
#function-Video {
    display: flex;
    justify-content: space-around;
    padding: 50px 10px;
    gap: 10px;
  }
/* 기능 소개 비디오3 */
.introduction {
  background-color: rgb(255, 255, 255);
  border: 2px solid #ffffff;
  border-radius: 10px;
  padding: 20px;
  width: 30%;
  font-style: italic;
  text-align: center;               /* 텍스트 중앙 정렬 */
}

/* DT Face 사용설명서 다운로드 */
.userManual-Container {
    margin: 100px 0px 0px 0px;
    display: flex;                /* Flexbox 사용 */
    justify-content: center;      /* 수평 가운데 정렬 */
    align-items: center;          /* 수직 가운데 정렬 */
    height: 100px;                /* 버튼을 수직으로 정렬할 공간 확보 */
}
#userManual-Btn {
    padding: 10px;
    background-color: #1900ff;
    color: #ffce2b;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
    border: 2px solid #1900ff;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    justify-content: center;           /* 내용 중앙 정렬 */
}
#userManual-Btn:hover {
    background-color: #0b006e;
    color: #ffce2b;                         
    border: 2px solid #0b006e;
    transition: background-color 0.3s, color 0.3s;
}


/****************************** 02. 영상 비식별화 페이지 ******************************/
#de-identi-Text h2 {
    color: #0081b4;
    margin-bottom: 50px;        /* h2 아래쪽 여백 */
    padding: 0px 170px;
    text-align: center;         /* 텍스트 가운데 정렬 */
}
#de-identi-Text p {
    color: #333333;
    padding: 0px 170px;
}
/* 파일 선택, 변환 하기, 동시 재생, 다운로드 버튼 */
#selectFile-Btn, #selectFile-Btn-2, #image-convs-Btn, #play-Btn, #download-Btn {
    margin: 30px 10px;
    padding: 10px;
    color: white;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    border: 2px solid #0081b4;
    background-color: #0081B4;
    border-radius: 5px;
    cursor: pointer;
}
#selectFile-Btn:hover, #selectFile-Btn-2:hover, #image-convs-Btn:hover, #play-Btn:hover, #download-Btn:hover  {
    color: #beedff;  
    border: 2px solid #006188;
    background-color: #006188;                       
    transition: background-color 0.3s, color 0.3s;
}
/* (라디오 버튼) 일괄 변환, 개별 변환, 자동차 변환 */
#radio-Option {
    display: flex;
    flex-wrap: nowrap;                     /* 줄 바꿈 금지 */
    justify-content: center;               /* 수평 가운데 정렬 */
    gap: 60px;
}
.radio-Style {
    display: inline-block;
    font-size: 14px;
    margin: 20px 0px;            /* 라디오 버튼과 영상과의 상하 margin */
    cursor: pointer;
}
.radio-Style [type="radio"] {
    display: none;
}
.radio-Style span {
    padding: 0px 5px;
    color: #2f62a5;
    background-color: #ffffff;
    text-align: center;
    height: 35px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #2f62a5;
    box-sizing: border-box;
}
.radio-Style [type="radio"]:checked + span {
    border:3px solid #2f62a5;
    color:#ffffff;
    background-color: #2f62a5;
    font-weight: 700;
}
.radio-Style [type="radio"]:disabled + span {
    text-align: center;
    height: 35px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid #ffffff;
    background-color: #ffffff;
    box-sizing: border-box;
}

#de-identi-Content {
    padding: 100px 0px 0px 0px;        /* 상하, 좌우 */
}
/* 비디오 컨테이너 */
.de-identi-video-Container {
    background-color: rgb(223, 242, 255);
    max-width: 1300px;
    max-height: 800px;
    height: 500px;
    margin: 0px auto;               /* 수평 가운데 정렬 */
    padding: 20px;
    display: flex;
    gap: 10px;                       /* 두 영상 사이 여백 */
}
/* 원본 영상, 비식별화 영상 박스 스타일 */
.de-identi-video-box {
    padding: 10px 0px;
    flex: 1;                         /* 두 비디오 박스가 같은 비율로 공간을 차지 */
    display: flex;
    align-items: center;             /* 중앙 */
    justify-content: center;         /* 내용 중앙 정렬 ( */
    background-color: #1d1d1d;
    border-radius: 7px;
    position: relative;              /* 비디오 맞춤 조정을 위한 상대 위치 설정 */
}
#de-identi-origVideo, #de-identi-anonVideo {
    display: flex;
    flex-direction: column;  /* 세로로 배치 */
    align-items: center;     /* 중앙 정렬 */
    justify-content: center; /* 내용 중앙 정렬 */
}
/* 비디오 크기 설정 */
#de-identi-origPlayer, #de-identi-anonPlayer {
    width: 100%;            /* 부모 컨테이너 너비에 맞추기 */
    height: 100%;           /* 부모 컨테이너 높이에 맞추기 */
    object-fit: cover;      /* 비율 유지하며 내용 전체를 표시 */
}

/* 비디오 파일 업로드, 파일 업로드(숨김) 버튼 */
#de-identi-video-upload-Btn, #de-identi-file-upload-Btn {
    margin: 15px 0px;                 /* 파일 선택 버튼과 영상과의 상하 margin */
    padding: 10px;
    background-color: #0081b4;
    color: #ffffff;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    border: 2px solid #0081b4;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    justify-content: center;           /* 내용 중앙 정렬 */
}
#de-identi-video-upload-Btn:hover, #de-identi-file-upload-Btn:hover {
    background-color: #006188;
    color: #beedff;                         
    border: 2px solid #006188;
    transition: background-color 0.3s, color 0.3s;
}

/* 인식된 객체 컨테이너 */
.de-identi-object-Container {
    max-width: 1300px;
    background-color: rgb(223, 242, 255);
    margin: 0px auto;                   /* 수평 가운데 정렬 */
    padding: 20px;  
    display: flex;  
    overflow-x: auto;                   /* 가로로 넘칠 경우 스크롤이 생기도록 */
    justify-content: flex-start;        /* 아이템이 왼쪽에 정렬되도록 */
    gap: 15px;                          /* 각 박스 간 간격 */
}   
.de-identi-object-Rectangle {    
    width: 100%;                        /* 부모의 너비를 기준으로 100% */
    background-color: rgb(170, 220, 255, 0.9);
    padding: 10px;
    display: flex;
    overflow-x: auto;                   /* 가로로 넘칠 경우 스크롤이 생기도록 */
    justify-content: flex-start;        /* 아이템이 왼쪽에 정렬되도록 */
    gap: 15px;                          /* 각 박스 간 간격 */
    scrollbar-width: thin;              /* 스크롤바 두께 */
    scrollbar-color: rgba(126, 203, 255, 0.9) rgb(170, 220, 255, 0.9);  /* 색상: thumb, track */
}
.de-identi-object-Rectangle > div {
    flex-shrink: 0;                     /* 아이템이 축소되지 않도록 설정 */
    width: 100px;
    height: 100px;
    background-color: rgb(196, 231, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 14px;
    color: rgb(80, 150, 200);
}

/* 타켓 이미지 컨테이너 */
.de-identi-target-Container {
    max-width: 1300px;
    background-color: rgb(223, 242, 255);
    margin: 0px auto;                   /* 수평 가운데 정렬 */
    padding: 20px;  
    display: flex;  
    overflow-x: auto;                   /* 가로로 넘칠 경우 스크롤이 생기도록 */
    justify-content: flex-start;        /* 아이템이 왼쪽에 정렬되도록 */
    gap: 15px;                          /* 각 박스 간 간격 */
}
.de-identi-target-Rectangle {                                               /* 이미지 레이아웃을 가로로 나열하고 스크롤 추가 */
    display: flex;                                                          /* flexbox로 배치 */
    overflow-x: auto;                                                       /* 가로로 넘칠 경우 스크롤이 생기도록 */
    padding: 10px;                  
    gap: 20px;                                                              /* 각 이미지 간 간격 */
    scrollbar-width: thin;                                                  /* 스크롤바 두께 */
    scrollbar-color: rgba(116, 165, 184, 0.7) rgb(170, 220, 255, 0.9); /* 색상: thumb, track */
  }
.de-identi-target-Rectangle > div {
  flex-shrink: 0;           /* 아이템이 축소되지 않도록 설정 */
  width: 200px;             /* 이미지의 넓이 설정 */
  height: 150px;            /* 이미지의 높이 설정 */
  background-color: rgba(116, 165, 184, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* 변환 하기 버튼 컨테이너 */
#convs-Btn-Container {
    display: flex;               /* Flexbox 사용 */
    justify-content: center;     /* 수평 가운데 정렬 */
    align-items: center;         /* 수직 가운데 정렬 (필요하면 추가) */
}

/* 원본 영상 ~ 변환된 영상 전체 컨테이너 */
.result-Container {
  display: flex;             
  flex-direction: column;     /* 수직 정렬 */
  justify-content: center;    /* 상하 정렬 */
  align-items: center;        /* 좌우 가운데 정렬 */
  width: 100%;                /* 전체 너비 */
  height: 100%;               /* 고정된 높이로 설정 */
  background-color: rgb(90, 140, 160);
}
.video-Container {
    display: flex;              /* 가로 정렬 */
    justify-content: center;    /* 가로 중앙 정렬 */
    align-items: center;        /* 세로 중앙 정렬 */
    width: 100%;                /* 부모 컨테이너의 너비 */
}
#original-video-Rectangle, #converted-video-Rectangle {
  width: 80%;
  height: 400px;
  background-color: #1d1d1d;
  border-radius: 5px;
  display: flex;                /* 내부 내용 가운데 정렬 */
  justify-content: center;      /* 수평 가운데 정렬 */
  align-items: center;          /* 수직 가운데 정렬 */
  margin: 20px 20px 0px 20px;                 /* 위, 오른쪽, 아래, 왼쪽 */
}
#original-video-Rectangle, #converted-video-Rectangle p {
  color: #3b3b3b;
  font-weight: bold;
}
#result-Btn-Container {
    display: flex;               /* 버튼들을 가로로 배치 */
    justify-content: center;     /* 수평 가운데 정렬 */
    align-items: center;         /* 수직 가운데 정렬 */
}


/****************************** 03. 실시간 영상 변환 페이지 ******************************/
#realTime-Text {
    margin-Top: 150px;
}
#realTime-Text h2 {
    color: #0081b4;
    margin-bottom: 50px;        /* h2 아래쪽 여백 */
    padding: 0px 170px;
    text-align: center;         /* 텍스트 가운데 정렬 */
}
/* p */
#realTime-Text p {
    color: #333333;
    padding: 0px 170px;
}
/* 변환 하기, 녹화 시작, 녹화 종료 버튼 CSS */
#start-recording-Btn, #end-of-recording-Btn, #apply-Btn {
  margin: 30px 10px;
  padding: 10px;
  color: white;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  border: 2px solid #0081b4;
  background-color: #0081B4;
  border-radius: 5px;
  cursor: pointer;
}
#start-recording-Btn:hover, #end-of-recording-Btn:hover, #apply-Btn:hover  {
    color: #beedff;  
    border: 2px solid #006188;
    background-color: #006188;                       
    transition: background-color 0.3s, color 0.3s;
}
/* 클릭 시 버튼 색상 */
#start-recording-Btn:active, #end-of-recording-Btn:active, #apply-Btn:active {
    border: #003042;
    background-color: #003042;
}

/* 실시간 영상 변환 페이지 전체 컨테이너 CSS */
#realTime-Container {
    background-color: rgb(90, 140, 160);
    padding: 20px;
    margin: 70px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 약간의 그림자 */
    text-align: center;
}
/* 실시간 영상 변환 박스 CSS */
.realTime-Rectangle {
    height: 500px;
    background-color: #1d1d1d;
    border-radius: 10px;
}

/* 변환 옵션 컨테이너 */
.option-Container-2 {
    height: 60px;
    background-color: rgb(90, 140, 160);
    border-radius: 10px;
    margin-Top: 20px;
    display: flex;
    justify-content: center;      /* 수평 가운데 정렬 */
    align-items: center;          /* 수직 가운데 정렬 */
}
  
/* 라디오 컨테이너 */
#radio-Option-2 {
  display: flex;
  flex-wrap: nowrap;                     /* 줄 바꿈 금지 */
  justify-content: center;               /* 수평 가운데 정렬 */
  grid-gap: 60px;                        /* 라디오 버튼 간 간격 */
}
/* 라디오 옵션 CSS */
.radio-Style-2 {
    font-size: 14px;
    margin: 0px 5px 0px 5px;
}
.radio-Style-2 [type="radio"] {
    display: none;
}
.radio-Style-2 span {
    padding: 0px 5px;
    color: #2f62a5;
    background-color: #ffffff;
    text-align: center;
    height: 35px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #2f62a5;
    box-sizing: border-box;
}
.radio-Style-2 [type="radio"]:checked + span {
    border:3px solid #2f62a5;
    color:#ffffff;
    background-color: #2f62a5;
    font-weight: 700;
}
.radio-Style-2 [type="radio"]:disabled + span {
    text-align: center;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid #ffffff;
    background-color: #ffffff;
    box-sizing: border-box;
}