drone-httpserver/public/style.css

/* 기본 및 공통 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* 기본 배경색 (로그인 페이지 등에서 사용) */
    color: #333;             /* 기본 글자색 (로그인 페이지 등에서 사용) */
    /* [수정] flexbox 레이아웃 적용 */
    display: flex;
    flex-direction: column;
    height: 100vh; /* 전체 뷰포트 높이 사용 */
}

/* [추가] 로그인 페이지 좌측 상단 타이틀 */
.page-title {
    position: absolute; /* 페이지 기준 절대 위치 */
    top: 2rem;          /* 위쪽 여백 */
    left: 4rem;         /* 왼쪽 여백 */
    font-size: 2.5rem;  /* 폰트 크기 */
    color: #f0f0f0;      /* 요청대로 밝은 색상 (흰색에 가까움) */
    font-weight: 600;
    /* 배경 이미지와 구분을 위한 텍스트 그림자 */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    z-index: 10;        /* 다른 요소들 위에 표시 */
}


/* ========== [Dark Theme 수정] ========== */
button {
    cursor: pointer;
    border-radius: 4px;
    /* [수정] 다크 테마 기본 버튼 스타일 */
    border: 1px solid #555;
    background-color: #3a3a3a;
    color: #e0e0e0;
    padding: 5px 10px;
}
/* ====================================== */


/* 1. 로그인 페이지 스타일 (index.html) */
/* ... (기존 로그인 스타일 동일 - 다크 테마의 영향을 받지 않도록 고유 스타일 유지) ... */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    /* ========== [수정됨] 배경 이미지 적용 ========== */
    background-image: url('drone_background.png'); /* 배경 이미지 파일 경로 */
    background-size: cover;                       /* 화면을 꽉 채우도록 (비율 유지) */
    background-position: center;                  /* 이미지 중앙 정렬 */
    background-repeat: no-repeat;                 /* 이미지 반복 안 함 */
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); <-- 기존 배경 제거 */
    /* ============================================ */
}

.login-container {
    /* [수정] 배경색을 body 기본 배경색과 유사하게 변경 */
    background: #f0f2f5;
    padding: 2rem 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* [추가] 너비를 기존보다 2배가량 넓게 설정 (예: 700px) */
    width: 700px;
    /* [추가] width 사용 시 padding이 너비에 포함되도록 설정 */
    box-sizing: border-box;
}

.login-container h1 {
    font-size: 1.5rem;
    color: #444; /* body의 color(#e0e0e0)를 상속받지 않도록 명시 */
    margin-bottom: 2rem;
}

.input-group {
    margin-bottom: 1rem;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333; /* body의 color(#e0e0e0)를 상속받지 않도록 명시 */
}

.input-group input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff; /* 다크 테마 상속 방지 */
    color: #333;           /* 다크 테마 상속 방지 */
}

.login-button {
    width: 100%;
    padding: 0.8rem;
    background-color: #5a67d8;
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
}
.login-button:hover {
    background-color: #434190;
}


/* 2. 대시보드 페이지 스타일 (dashboard.html) */
header {
    background-color: #333; /* 이미 어두움 */
    padding: 0 1rem;
    /* [수정] 크기 고정 */
    flex-shrink: 0;
}

.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-button {
    background: none;
    border: none;
    color: #aaa; /* 이미 밝음 */
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
}

.tab-button.active {
    color: white;
    border-bottom: 3px solid #5a67d8;
}

.logout-button {
    background-color: #d9534f;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
}
.logout-button:hover {
    background-color: #c9302c;
}

/* ========== [Dark Theme 수정] ========== */
main {
    padding: 1rem;
    /* [수정] 남은 공간을 모두 채움 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 내용이 많을 때 축소 가능하도록 */

    /* [추가] 다크 테마 배경 및 글자색 */
    background-color: #1a1a1a;
    color: #e0e0e0;
}
/* ====================================== */

.tab-content {
    display: none;
}
.tab-content.active {
    /* [수정] display: block -> flex */
    display: flex;
    flex-direction: column;
    /* [수정] 부모(main) 공간을 채움 */
    flex-grow: 1;
    min-height: 0;
}

/* 2-1. Video 탭 (PDF 2페이지) */
/* (이 부분은 대부분 이미 어두운 테마 스타일을 가지고 있음) */

/* [추가] .video-container가 공간을 채우도록 */
.video-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* ========== .video-player 스타일 수정 ========== */
.video-player {
    width: 100%;
    /* [제거] min-height: 720px; */
    /* [추가] .video-container 공간을 채움 */
    flex-grow: 1;
    min-height: 0; /* 축소 가능하도록 */
    background-color: #111; /* video-test.html 배경색 적용 (이미 어두움) */
    color: #eee;            /* video-test.html 글자색 적용 (이미 밝음) */
    display: flex;
    flex-direction: row;   /* 가로 정렬로 변경 */
    gap: 10px;             /* video-test.html gap 적용 */
    padding: 10px;         /* video-test.html padding 적용 */
    box-sizing: border-box;/* video-test.html box-sizing 적용 */
    border-radius: 4px;
    position: relative;
}

/* ========== [수정됨] #current-model <select> 스타일 -> Segmented Control 스타일로 수정 ========== */
.segmented-control-container {
    position: absolute;
    top: 40px; /* #info (12px) 아래 여유 공간 */
    left: 20px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap; /* 좁은 화면에서 줄바꿈 */
    gap: 4px; /* 버튼 사이 간격 */
    background-color: rgba(50, 50, 50, 0.7); /* 반투명 배경 (이미 어두움) */
    padding: 4px;
    border-radius: 6px;
}

/* 실제 라디오 버튼은 숨김 */
.segmented-control-container input[type="radio"] {
    display: none;
}

/* 버튼처럼 보일 라벨 스타일 */
.segmented-control-button {
    display: inline-block;
    padding: 6px 10px;
    font-size: 0.85rem; /* 폰트 약간 작게 */
    color: #eee;
    background-color: #555;
    border: 1px solid #777;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    user-select: none; /* 텍스트 선택 방지 */
}

/* 마우스 오버시 */
.segmented-control-button:hover {
    background-color: #666;
}

/* 선택된(checked) 라디오 버튼의 *다음* 형제(label) 스타일 */
.segmented-control-container input[type="radio"]:checked + .segmented-control-button {
    background-color: #5a67d8; /* 활성 탭 색상과 유사하게 */
    color: white;
    border-color: #434190;
    font-weight: bold;
}
/* ========== [수정됨] 스타일 변경 끝 ========== */


/* ========== video-test.html 스타일 추가 (이미 어두움) ========== */
#video-wrap {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
#info {
    font-size: 12px;
    color: #aaa;
    position: relative;
    z-index: 10;
}
#frame {
    flex: 1;
    min-height: 0;
    max-width: 100%;
    background: #000;
    object-fit: contain;
    border: 1px solid #333;
    position: relative;
    z-index: 1;
}
#det-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}
#det-title {
    font-weight: bold;
    font-size: 13px;
    /* main으로부터 color: #e0e0e0 상속받음 */
}
#det-list {
    flex: 1;
    font-size: 11px;
    background: #000;
    border: 1px solid #333;
    padding: 6px;
    overflow-y: auto;
    white-space: pre;
    /* .video-player로부터 color: #eee 상속받음 */
}
.status {
    font-size: 11px;
    color: #6cf;
}
.status.err {
    color: #f66;
}

/* 2-2. AI Models 탭 (PDF 3페이지) */

/* [수정됨] .toolbar 스타일 */
.toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

/* [추가됨] 새로고침 버튼을 맨 오른쪽으로 밀기 */
.toolbar .refresh-button {
    margin-left: auto;
}

/* ========== [Dark Theme 수정] ========== */
/* [추가됨] 파일명 표시 레이블 */
#file-name-display {
    font-size: 0.9rem;
    /* [수정] 글자색 */
    color: #ccc;
    /* [수정] 배경색 */
    background-color: #2a2a2a;
    /* [수정] 테두리 */
    border: 1px solid #444;
    padding: 5px 10px;
    border-radius: 4px;
    min-width: 350px;
    text-align: left;
    font-style: italic;
    line-height: 1.4;
}


.hidden-file-input {
    display: none;
}

.model-table {
    width: 100%;
    border-collapse: collapse;
    /* [수정] 배경색 */
    background: #2a2a2a;
    box-shadow: none; /* 다크 모드에서는 그림자 제거 */
}

.model-table th,
.model-table td {
    /* [수정] 테두리 */
    border: 1px solid #444;
    padding: 0.8rem 1rem;
    text-align: left;
    /* main으로부터 color: #e0e0e0 상속받음 */
}

.model-table th {
    /* [수정] 배경색 */
    background-color: #333;
    text-align: center;
}
/* ====================================== */

/* [수정됨] nth-child 선택자 수정 (컬럼 1, 4 중앙 정렬) */
.model-table td:nth-child(1),
.model-table td:nth-child(4) {
    text-align: center;
}
/* [수정됨] nth-child 선택자 수정 (컬럼 5 '삭제' 중앙 정렬) */
.model-table td:nth-child(5) {
    text-align: center;
}

/* ========== [Dark Theme 수정] ========== */
.btn-browse {
    cursor: pointer;
    border-radius: 4px;
    /* [수정] 테두리 */
    border: 1px solid #666;
    padding: 5px 10px;
    display: inline-block;
    font-size: 14px;
    font-family: Arial, sans-serif;
    line-height: normal;
    /* [수정] 배경색 */
    background-color: #4f4f4f;
    /* [수정] 글자색 (기본 button 스타일에서 상속) */
    /* color: #e0e0e0; */
}
.btn-browse:hover {
    /* [수정] hover 배경색 */
    background-color: #5a5a5a;
}
/* ====================================== */

.btn-action { background-color: #4CAF50; color: white; border:none; }
.btn-delete { background-color: #f44336; color: white; border:none; }

/* [추가됨] 바운딩 박스 스타일 */
#bbox-container {
    position: absolute;
    pointer-events: none; /* 클릭 이벤트 방지 */
    z-index: 5; /* 프레임(1) 위, 정보(10) 아래 */
    top: 0;
    left: 0;
}

.bbox {
    position: absolute;
    border: 2px solid red;
    box-sizing: border-box;
}

/* [추가] 요소 숨기기 위한 유틸리티 클래스 */
.hidden {
    display: none;
}

/* ... (파일 상단 body, button 등 공통 스타일은 그대로 둡니다) ... */


/* 1. 로그인 페이지 스타일 (index.html) */
/* [수정] 이미지와 유사하게 변경 */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    /* [수정] 배경 이미지 제거 */
    /* background-image: url('drone_background.png'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* body의 기본 배경색(#f0f2f5)이 적용됩니다. */
}

.login-container {
    /* [수정] 배경색을 흰색으로 변경 */
    background: #ffffff;
    padding: 2rem 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* [수정] text-align 제거 (기본값 left) */
    /* text-align: center; */
    /* [수정] 너비를 좁게 설정 (예: 400px) */
    width: 400px;
    box-sizing: border-box;
}

.login-container h1 {
    /* [수정] 폰트 크기 및 여백 조정 */
    font-size: 2.2rem; /* 이미지처럼 크게 */
    color: #333; /* 다크 테마 상속 방지 (기존 #444보다 진하게) */
    margin-bottom: 0.5rem; /* 부제목과 가깝게 */
    font-weight: bold;
}

/* [추가] 부제목 스타일 */
.login-subtext {
    font-size: 1rem;
    color: #888; /* 이미지처럼 연한 회색 */
    margin-top: 0;
    margin-bottom: 2.5rem; /* 입력창과 여백 */
}

.input-group {
    margin-bottom: 1rem;
    text-align: left;
    /* [추가] 아이콘 배치를 위해 relative 속성 추가 */
    position: relative;
}

.input-group label {
    /* 이 스타일은 더 이상 사용되지 않지만, 다른 곳에서 쓸 수 있으므로 둡니다. */
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

/* [추가] 아이콘 스타일 */
.input-group .icon {
    position: absolute;
    left: 1rem; /* input의 padding-left와 유사하게 */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1.1rem;
    /* 아이콘이 입력 이벤트를 가로채지 않도록 */
    pointer-events: none;
}


.input-group input {
    width: 100%;
    /* [수정] 아이콘 공간 확보를 위해 padding-left 늘림 */
    padding: 1rem 1rem 1rem 3rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    font-size: 1rem; /* placeholder 글자 크기 */
}

.login-button {
    /* [수정] width: 100% 제거 (auto로 변경) */
    width: auto;
    /* [수정] 이미지와 유사한 padding으로 변경 */
    padding: 0.8rem 2.5rem;
    background-color: #5a67d8;
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
}
.login-button:hover {
    background-color: #434190;
}

/* ... (기존 CSS 코드) ... */

/* [수정] 로그인 페이지 하단 흰색 바 */
.footer-bar {
    position: absolute;      /* 뷰포트(페이지 전체) 기준 */
    bottom: 0;             /* 하단에 고정 */
    left: 0;               /* 왼쪽 끝 */
    width: 100%;           /* 전체 너비 */
    height: 50px;          /* 요청한 높이 50px */
    background-color: #ffffff; /* 흰색 배경 */
    opacity: 0.5;          /* [수정] 70% 투명도 (0.3 -> 0.7) */

    z-index: 100;

    /* [추가] Flexbox를 사용하여 중앙 정렬 및 간격 설정 */
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center;     /* 수직 중앙 정렬 */
    gap: 20px;               /* 자식 요소(이미지) 사이의 간격 */
}