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; /* 전체 뷰포트 높이 사용 */
}

button {
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 5px 10px;
}

/* 1. 로그인 페이지 스타일 (index.html) */
/* ... (기존 로그인 스타일 동일) ... */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-container {
    background: #fff;
    padding: 2rem 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-container h1 {
    font-size: 1.5rem;
    color: #444;
    margin-bottom: 2rem;
}

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

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.input-group input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.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;
}

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

.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 적용 */
    /* justify-content: center; */ /* 기존 중앙 정렬 제거 */
    /* align-items: center; */   /* 기존 중앙 정렬 제거 */
    /* font-size: 1.5rem; */     /* 기존 폰트 크기 제거 */
    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;
    /* #current-model 과 겹치지 않도록 z-index 추가 */
    position: relative;
    /* z-index: 1; */ /* [수정됨] z-index 제거 */
}
#info {
    font-size: 12px;
    color: #aaa;
    /* [수정됨] 박스 위에 표시되도록 z-index 추가 */
    position: relative;
    z-index: 10;
}
#frame {
    flex: 1; /* 높이 채우도록 추가 */
    min-height: 0; /* flex-shrink 방지 */
    max-width: 100%;
    /* max-height: calc(100vh - 80px); /* 기존 스타일 제거 */
    background: #000;
    object-fit: contain;
    border: 1px solid #333;
    /* [수정됨] 박스 컨테이너의 기준이 되도록 z-index 추가 */
    position: relative;
    z-index: 1;
}
#det-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* #video-res 와 겹치지 않도록 z-index 추가 */
    position: relative;
    z-index: 1;
}
#det-title {
    font-weight: bold;
    font-size: 13px;
}
#det-list {
    flex: 1;
    font-size: 11px;
    background: #000;
    border: 1px solid #333;
    padding: 6px;
    overflow-y: auto;
    white-space: pre;
}
.status {
    font-size: 11px;
    color: #6cf;
}
.status.err {
    color: #f66;
}

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

/* [수정됨] .toolbar 스타일 */
.toolbar {
    /* [수정] flexbox로 변경 */
    display: flex;
    justify-content: flex-end; /* 기존 text-align: right와 동일한 효과 */
    align-items: center;
    gap: 10px; /* 요소 간 간격 */
    margin-bottom: 1rem;
    /* text-align: right; -- 제거 */
}

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

/* [추가됨] 파일명 표시 레이블 */
#file-name-display {
    font-size: 0.9rem;
    color: #555;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 4px;
    min-width: 350px;
    text-align: left;
    font-style: italic;
    /* 버튼과 높이를 맞추기 위한 line-height */
    line-height: 1.4;
}


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

.model-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.model-table th,
.model-table td {
    border: 1px solid #ddd;
    padding: 0.8rem 1rem;
    text-align: left;
}

.model-table th {
    background-color: #f9f9f9;
}

/* [수정됨] 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;
}

.btn-browse {
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    display: inline-block;
    font-size: 14px;
    font-family: Arial, sans-serif;
    line-height: normal;
    background-color: #e0e0e0;
}
.btn-browse:hover {
    background-color: #d5d5d5;
}

.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) 아래 */
    /* 위치와 크기는 app.js에서 동적으로 설정됩니다. */
    top: 0;
    left: 0;
}

.bbox {
    position: absolute;
    border: 2px solid red; /* 요청된 빨간색 테두리 */
    box-sizing: border-box; /* 테두리 포함 크기 계산 */
}
/*<!--2025.11.12 16:22-->*/