/* ==========================================================================
   style.css - Responsive Refactoring Version
   ========================================================================== */

/* --- CSS 변수 (색상, 폰트 등) --- */
:root {
    --primary-color: #007bff;
    --primary-hover-color: #0056b3;
    --secondary-color: #6c757d;
    --secondary-hover-color: #5a6268;
    --success-color: #28a745;
    --success-bg-color: #d4edda;
    --success-border-color: #c3e6cb;
    --success-text-color: #155724;
    --danger-color: #dc3545;
    --danger-bg-color: #f8d7da;
    --danger-border-color: #f5c6cb;
    --danger-text-color: #721c24;
    --warning-color: #ffc107;
    --warning-text-color: #212529;
    --info-color: #17a2b8;
    --light-gray-color: #f8f9fa;
    --medium-gray-color: #e9ecef;
    --dark-gray-color: #6c757d;
    --border-color: #dee2e6;
    --text-color: #212529;
    --link-color: var(--primary-color);
    --body-bg-color: #f0f2f5;
    --component-bg-color: #ffffff;
    --header-height: 60px;
    --border-radius: 0.3rem; /* 4.8px if base is 16px */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.07);

    --font-family-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-lg: 1.25rem; /* 20px */
    --line-height-base: 1.6;
}

/* --- 기본 리셋 & 기본 스타일 --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px; /* 루트 폰트 크기 기준 설정 */
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--body-bg-color);
    /* 헤더 높이만큼 상단 여백 확보 */
    padding-top: var(--header-height);
}

/* --- 링크 --- */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--primary-hover-color);
    text-decoration: underline;
}

/* --- 제목 --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}
h1 { font-size: 2.25rem; } /* 36px */
h2 { font-size: 1.875rem; } /* 30px */
h3 { font-size: 1.5rem; }   /* 24px */
h4 { font-size: 1.125rem; } /* 18px */

/* --- 문단, 목록 등 --- */
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { padding-left: 2rem; margin-top: 0; margin-bottom: 1rem; }
small, .small { font-size: var(--font-size-sm); }
hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--border-color); }

/* --- 레이아웃 컨테이너 --- */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* 미디어 쿼리로 반응형 최대 너비 설정 */
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* --- 메인 콘텐츠 영역 --- */
/* 헤더 때문에 body에 padding-top을 주었으므로, 이 클래스는 상단 마진만 관리 */
.main-content-area {
    background-color: var(--component-bg-color);
    padding: 25px; /* 내부 여백 */
    margin-top: 20px; /* 헤더와의 간격 */
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
.main-content-area h2:first-child { /* 제목 상단 여백 제거 */
    margin-top: 0;
}

/* 특정 페이지 컨테이너 스타일 */
.login-container, .register-container, .change-password-container, .add-user-container, .edit-user-container {
    max-width: 500px; /* 로그인 등 작은 폼은 최대 너비 줄이기 */
    
}
.index-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height)); /* 헤더 제외한 전체 높이 */
    text-align: center;
    padding: 20px;
    background-color: transparent; /* 배경 없음 */
    box-shadow: none; /* 그림자 없음 */
}
.index-container .main-text {
    font-size: clamp(2.5em, 15vmin, 6em); /* 화면 크기에 따라 유동적 크기 */
    font-weight: bold;
    color: #333;
    word-break: break-all;
    margin-bottom: 0; /* 다른 요소 없을 시 하단 마진 제거 */
}

/* --- 헤더 (header.php) --- */
.main-header {
    background-color: var(--component-bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0; /* 내부 패딩 제거, .main-nav 에서 처리 */
    box-shadow: var(--box-shadow);
    position: fixed; /* 상단 고정 */
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: 1030; /* 부트스트랩 기준 navbar z-index */
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1140px; /* .container 와 동일하게 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0 15px; /* 좌우 여백 */
}

/* 로고/사이트명 */
.nav-left .site-name {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    white-space: nowrap; /* 이름 줄바꿈 방지 */
}

/* 중앙 메뉴 (데스크탑) */
.nav-center {
    flex-grow: 1; /* 남는 공간 차지 */
    display: flex;
    justify-content: center; /* 메뉴 중앙 정렬 */
}
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.menu-list li {
    margin-left: 15px;
    margin-right: 15px;
}
.menu-list li a {
    text-decoration: none;
    color: var(--dark-gray-color);
    font-weight: 500;
    transition: color 0.2s ease;
    padding: 5px 0; /* 클릭 영역 확보 */
    white-space: nowrap;
}
.menu-list li a:hover,
.menu-list li a.active { /* 활성 메뉴 스타일 (필요시 추가) */
    color: var(--primary-color);
    text-decoration: none;
}

/* 오른쪽 영역 (사용자 정보, 버튼) */
.nav-right {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 너비 줄어들지 않게 */
}
.user-info {
    margin-right: 15px;
    color: var(--text-color);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.nav-right .auth-button { /* 헤더 내 로그인/로그아웃 버튼 */
    display: inline-block;
    padding: 6px 12px; /* 버튼 크기 약간 작게 */
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-left: 8px;
    white-space: nowrap;
}
.nav-right .auth-button.register-button {
    background-color: var(--success-color);
}
.nav-right .auth-button:hover {
    background-color: var(--primary-hover-color);
    color: white;
    text-decoration: none;
}
.nav-right .auth-button.register-button:hover {
    background-color: #1e7e34; /* Success hover */
}

/* 모바일 메뉴 버튼 (햄버거) */
.mobile-menu-button-container {
    display: none; /* 기본 숨김 */
    margin-left: 15px;
}
.mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 1.8em; /* 아이콘 크기 */
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    color: #333;
}

/* 모바일 메뉴 패널 */
.mobile-menu-panel {
    display: none; /* 기본 숨김 */
    position: absolute;
    top: var(--header-height); /* 헤더 바로 아래 */
    left: 0;
    right: 0;
    background-color: var(--component-bg-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1029; /* 헤더보다 낮게 */
    padding: 15px;
    border-top: 1px solid var(--border-color);
    max-height: calc(100vh - var(--header-height)); /* 화면 높이 넘지 않도록 */
    overflow-y: auto; /* 내용 많으면 스크롤 */
}
.mobile-menu-panel.active {
    display: block; /* 활성화 시 보임 */
}
.mobile-menu-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.mobile-menu-panel ul li {
    margin-bottom: 0; /* 아래쪽 마진 제거 */
}
.mobile-menu-panel ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.1em;
    display: block;
    padding: 12px 10px; /* 클릭 영역 확보 */
    border-bottom: 1px solid var(--border-color); /* 구분선 */
}
.mobile-menu-panel ul li:last-child a {
    border-bottom: none;
}
.mobile-menu-panel ul li a:hover {
    background-color: var(--light-gray-color);
    text-decoration: none;
}
/* 모바일 메뉴 내 버튼 스타일 */
.mobile-menu-panel .auth-button-mobile {
    display: block;
    width: 80%;
    max-width: 200px;
    margin: 15px auto 10px auto; /* 위아래 마진 조정 */
    padding: 12px;
    color: white;
    text-align: center;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: bold;
    border: none;
    font-size: 1em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.mobile-menu-panel .auth-button-mobile:hover {
    opacity: 0.9;
    color: white;
    text-decoration: none;
}
.mobile-menu-panel .register-button-mobile { background-color: var(--success-color); }
.mobile-menu-panel .login-button-mobile { background-color: var(--primary-color); }
.mobile-menu-panel .logout-button-mobile { background-color: var(--secondary-color); }
.mobile-menu-panel hr {
    margin: 10px 0;
    border-top: 1px solid var(--medium-gray-color);
}


/* --- 폼 요소 --- */
.form-group {
    margin-bottom: 1.25rem; /* 간격 약간 넓게 */
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="datetime-local"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem; /* 패딩 조정 */
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--component-bg-color);
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    appearance: none; /* 기본 브라우저 스타일 제거 */
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 포커스 시 효과 */
}
input[disabled], select[disabled], textarea[disabled] {
    background-color: var(--medium-gray-color);
    opacity: 0.7;
}
select {
    /* 기본 화살표가 appearance:none 으로 제거되므로, 커스텀 화살표 추가 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem; /* 화살표 공간 확보 */
}
/* Firefox 에서 number 입력 화살표 숨기기 */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.help-text {
    display: block;
    margin-top: 0.4rem;
    font-size: var(--font-size-sm);
    color: var(--dark-gray-color);
}

/* --- 버튼 --- */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--component-bg-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.75rem 1.25rem; /* 버튼 크기 조정 */
    font-size: var(--font-size-base);
    border-radius: var(--border-radius);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: auto; /* 기본 너비 자동 */
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: var(--component-bg-color);
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    text-decoration: none;
}
.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
.button:disabled, button:disabled, input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

/* 버튼 너비 100% */
.button-block, .button-full-width {
    display: block;
    width: 100%;
}

/* 버튼 색상 변형 */
.button-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); }
.button-secondary:hover { background-color: var(--secondary-hover-color); border-color: var(--secondary-hover-color); }
.button-success { background-color: var(--success-color); border-color: var(--success-color); }
.button-success:hover { background-color: #1e7e34; border-color: #1e7e34; }
.button-danger { background-color: var(--danger-color); border-color: var(--danger-color); }
.button-danger:hover { background-color: #bd2130; border-color: #bd2130; }
.button-warning { background-color: var(--warning-color); border-color: var(--warning-color); color: var(--warning-text-color); }
.button-warning:hover { background-color: #e0a800; border-color: #e0a800; color: var(--warning-text-color); }
.button-info { background-color: var(--info-color); border-color: var(--info-color); }
.button-info:hover { background-color: #117a8b; border-color: #117a8b; }

/* 버튼 크기 변형 */
.button-sm { padding: 0.5rem 0.8rem; font-size: var(--font-size-sm); }
.button-lg { padding: 0.8rem 1.5rem; font-size: var(--font-size-lg); }

/* --- 메시지 박스 (알림) --- */
.message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 500;
}
.message-success {
    color: var(--success-text-color);
    background-color: var(--success-bg-color);
    border-color: var(--success-border-color);
}
.message-error, .error-message { /* 로그인 오류 포함 */
    color: var(--danger-text-color);
    background-color: var(--danger-bg-color);
    border-color: var(--danger-border-color);
}
.message-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.message-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* --- 테이블 (manage_users.php) --- */
.table-container {
    width: 100%;
    overflow-x: auto; /* 작은 화면에서 가로 스크롤 */
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch; /* 모바일 스크롤 개선 */
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--text-color);
    background-color: transparent; /* 컨테이너 배경 사용 */
    border-collapse: collapse;
    min-width: 800px; /* 최소 너비 지정하여 스크롤 발생 유도 */
}
.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--border-color);
    text-align: left; /* 기본 왼쪽 정렬 */
    white-space: nowrap; /* 내용 줄바꿈 방지 (스크롤 시 유리) */
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color);
    background-color: var(--light-gray-color);
    font-weight: bold;
}
.table tbody + tbody {
    border-top: 2px solid var(--border-color);
}
.table-striped tbody tr:nth-of-type(odd) { /* 줄무늬 테이블 */
    background-color: rgba(0, 0, 0, 0.03);
}
.table-bordered { border: 1px solid var(--border-color); }
.table-bordered th,
.table-bordered td { border: 1px solid var(--border-color); }
.table-hover tbody tr:hover {
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.06);
}
/* 테이블 내 작업 버튼 정렬 */
.table td.actions {
    white-space: nowrap; /* 버튼 줄바꿈 방지 */
    text-align: center; /* 버튼 가운데 정렬 */
}
.table td.actions form { /* form 태그 영향 최소화 */
    display: inline-block;
    margin: 0;
    padding: 0;
}
.table td.actions .action-button { /* 테이블 내 작은 버튼 */
    padding: 5px 8px;
    font-size: var(--font-size-sm);
    margin-right: 3px;
    margin-bottom: 3px; /* 작은 화면에서 줄바꿈 시 간격 */
    line-height: 1.2;
    min-width: 50px;
}
.action-button.edit-button { /* 수정 버튼 색상 조정 */
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--warning-text-color);
}
.action-button.edit-button:hover {
    background-color: #e0a800; border-color: #e0a800; color: var(--warning-text-color);
}
.action-button.delete-button {
    background-color: var(--danger-color); border-color: var(--danger-color); color: white;
}
.action-button.delete-button:hover {
    background-color: #bd2130; border-color: #bd2130; color: white;
}
.action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 상태 보기 (status.php) --- */
.task-card {
    border: 1px solid var(--border-color);
    padding: 1.25rem; /* 패딩 조정 */
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    background-color: var(--light-gray-color);
    position: relative; /* 액션 버튼 위치 기준 */
    box-shadow: var(--box-shadow);
}
.task-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.2em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.task-card p {
    margin-bottom: 0.5rem;
    font-size: var(--font-size-base);
    line-height: 1.5;
    word-break: break-all; /* 긴 ID/URL 줄바꿈 */
}
.task-card strong {
    display: inline-block;
    min-width: 110px; /* 라벨 너비 확보 */
    color: #555;
    font-weight: bold;
    margin-right: 5px;
}
.task-card .task-actions {
    margin-top: 1rem;
    text-align: right;
}
.task-card .task-actions .action-button {
    font-size: var(--font-size-sm);
    padding: 6px 10px;
}

/* status.php 기타 */
#action-message { /* 작업 취소 결과 메시지 영역 */
    display: none; /* 초기 숨김 */
}
.status-view-button, .broadcast-start-button, .user-manage-button { /* 페이지 하단 이동 버튼 */
    margin-top: 1rem;
}

/* --- 시작 페이지 (start_broadcast.php) --- */
.resource-info {
    background-color: var(--light-gray-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.resource-info p {
    margin-bottom: 0.5rem;
}
.resource-info strong {
    display: inline-block;
    min-width: 120px;
}
.resource-info .count-active { font-weight: bold; color: var(--danger-color); }
.resource-info .count-limit { font-weight: bold; color: var(--primary-color); }
.resource-info .count-available { font-weight: bold; color: var(--success-color); }

/* --- 반응형 웹 미디어 쿼리 --- */

/* 중간 화면 크기 (태블릿 등) - 예: 992px 미만 */
@media (max-width: 991.98px) {
    .nav-center .menu-list { /* 메뉴 간격 조정 */
        margin-left: 10px;
        margin-right: 10px;
    }
    .nav-center .menu-list li a { font-size: 0.95em; }
    .nav-right .user-info { font-size: 0.8em; margin-right: 10px;}
    .nav-right .auth-button { padding: 5px 10px; font-size: 0.8em; }
}

/* 작은 화면 크기 (모바일 등) - 예: 768px 미만 */
@media (max-width: 767.98px) {
    .nav-center { display: none; } /* 데스크탑 중앙 메뉴 숨김 */
    .nav-right .user-info { display: none; } /* 사용자 정보 텍스트 숨김 */

    .nav-right { /* 버튼 영역이 오른쪽에 남도록 */
        order: 2; /* 순서 조정: 로고(1) -> 버튼(2) -> 햄버거(3) */
    }
    .nav-left { order: 1; }

    .mobile-menu-button-container { /* 햄버거 버튼 보이기 */
        display: block;
        order: 3;
    }

    /* 테이블 반응형 처리 */
    .table-responsive-force { /* 강제로 테이블 구조 변경 (필요시) */
        border: 0;
    }
    .table-responsive-force thead {
        display: none; /* 헤더 숨김 */
    }
    .table-responsive-force tr {
        margin-bottom: 1rem;
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 0.5rem;
        background-color: var(--component-bg-color);
    }
    .table-responsive-force td {
        display: block;
        text-align: right; /* 값을 오른쪽으로 */
        padding-left: 50%; /* 라벨 공간 확보 */
        position: relative;
        border: 0;
        border-bottom: 1px solid var(--medium-gray-color);
        white-space: normal; /* 줄바꿈 허용 */
    }
    .table-responsive-force td:last-child {
        border-bottom: 0;
    }
    .table-responsive-force td::before {
        content: attr(data-label); /* data-label 속성으로 라벨 표시 */
        position: absolute;
        left: 0.5rem;
        width: calc(50% - 1rem); /* 라벨 너비 */
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #555;
    }
    .table-responsive-force td.actions { /* 작업 버튼 영역 조정 */
        text-align: center;
        padding-left: 0.5rem;
    }
    .table-responsive-force td.actions::before { display: none; } /* 작업 라벨 숨김 */

     /* 기본 테이블은 가로 스크롤 유지 */
    .table {
        /* min-width 는 이미 설정됨 */
    }
    .table-container {
        /* overflow-x 는 이미 설정됨 */
    }
}

/* 아주 작은 화면 크기 (필요시 추가) - 예: 480px 미만 */
@media (max-width: 479.98px) {
    body { font-size: 0.95rem; } /* 기본 폰트 크기 약간 줄임 */
    .main-content-area { padding: 15px; }
    h2 { font-size: 1.5rem; } /* 24px */
    h3 { font-size: 1.25rem; } /* 20px */

    .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }
     /* 테이블 라벨/값 정렬 재조정 (선택적) */
    .table-responsive-force td { padding-left: 40%; }
    .table-responsive-force td::before { width: calc(40% - 1rem); }
}

/* ================================================== */
/* Control Panel Modal Styles                         */
/* ================================================== */

/* 모달 배경 */
.modal-control-panel {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
  /* 애니메이션 효과 (선택 사항) */
  /* animation-name: fadeIn; */
  /* animation-duration: 0.3s; */
}

/* 모달 내용 박스 */
.modal-control-panel .modal-content {
  background-color: #fefefe;
  margin: 8% auto; /* 8% from the top and centered */
  padding: 20px 25px;
  border: 1px solid #ccc;
  width: 90%; /* Default width */
  max-width: 750px; /* Maximum width */
  border-radius: 8px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
  max-height: 80vh; /* Limit modal height */
}

/* 닫기 버튼 */
.modal-control-panel .close-button {
  color: #aaa;
  position: absolute; /* Position relative to modal-content */
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}
.modal-control-panel .close-button:hover,
.modal-control-panel .close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 모달 헤더 (방송 ID, 시청자 수) */
.modal-control-panel-header {
  display: flex;
  justify-content: space-between; /* Left and Right align */
  align-items: center;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0; /* Do not shrink */
}
.modal-control-panel-header .broadcast-id {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
}
.modal-control-panel-header .viewer-counts {
  font-size: 0.9em;
  color: #555;
  text-align: right;
}

/* 테스터 버튼 목록 영역 */
.modal-control-panel-tester-list {
  display: flex; /* Enable flexbox */
  flex-wrap: wrap; /* Enable wrapping */
  gap: 8px 12px; /* Spacing between buttons (vertical gap, horizontal gap) */
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow-y: auto; /* Enable vertical scroll */
  max-height: 35vh; /* Adjust max height as needed */
  flex-grow: 1; /* Allow this area to grow */
  align-content: flex-start; /* Align wrapped lines to the top */
}

/* 개별 테스터 버튼 */
.modal-control-panel-tester-list .tester-button {
  padding: 7px 14px;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9em;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0; /* Prevent buttons from shrinking */
}
.modal-control-panel-tester-list .tester-button:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}
.modal-control-panel-tester-list .tester-button.selected {
  /* Use primary color variables if defined in style.css */
  background-color: var(--primary-color, #007bff);
  color: white;
  border-color: var(--primary-color, #007bff);
  font-weight: bold;
}

/* 명령어 영역 (하단 고정 스타일은 필요 시 추가) */
.modal-control-panel-command-area {
  padding-top: 15px;
  border-top: 1px solid #eee;
  flex-shrink: 0; /* Do not shrink */
  background-color: #fefefe; /* Ensure background for potential sticky positioning */
  /* position: sticky; */ /* Uncomment for sticky footer */
  /* bottom: 0; */
}
.modal-control-panel-command-area .command-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}
.modal-control-panel-command-area .chat-input {
  flex-grow: 1; /* Take available space */
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9em;
}
/* 명령어 영역 버튼들 */
.modal-control-panel-command-area .button {
  padding: 8px 15px; /* Adjust padding */
  flex-shrink: 0; /* Prevent buttons from shrinking */
}
.modal-control-panel-command-area .save-list-button {
  /* background-color: #6c757d; /* Example secondary color */
  /* border-color: #6c757d; */
  /* color: white; */
}

/* 토스트 알림 컨테이너 */
.toast-container {
  position: fixed;
  top: 30px; /* Adjust vertical position */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050; /* Ensure it's above modal */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: fit-content; /* Adjust width based on content */
  max-width: 90%;
}

/* 개별 토스트 알림 */
.toast-notification {
  padding: 12px 25px;
  border-radius: 6px;
  color: white;
  font-size: 1em; /* Slightly larger */
  opacity: 0; /* Start hidden */
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  text-align: center;
  animation: toastFadeInOut 4s ease-in-out forwards; /* 4초 지속 */
  margin-bottom: 10px; /* Add margin between toasts if multiple appear */
}
.toast-info { background-color: #17a2b8; } /* Example info color */
.toast-success { background-color: #28a745; } /* Example success color */
.toast-error { background-color: #dc3545; } /* Example error color */

/* 토스트 페이드 인/아웃 애니메이션 */
@keyframes toastFadeInOut {
  0% { opacity: 0; transform: translateY(-20px); }
  15% { opacity: 0.9; transform: translateY(0); } /* Fade in fast */
  85% { opacity: 0.9; transform: translateY(0); } /* Stay visible */
  100% { opacity: 0; transform: translateY(10px); } /* Fade out */
}

/* 반응형 조정 (모바일 등 작은 화면) */
@media (max-width: 768px) {
  .modal-control-panel .modal-content {
    width: 95%;
    margin: 5% auto;
    max-height: 90vh;
    padding: 15px;
  }
  .modal-control-panel-header {
    flex-direction: column; /* Stack header items */
    align-items: flex-start; /* Align left */
    gap: 5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .modal-control-panel-header .viewer-counts {
    text-align: left; /* Align left on mobile */
  }
  .modal-control-panel-tester-list {
    max-height: 40vh; /* Adjust height for mobile */
    gap: 6px 8px; /* Reduce gap */
  }
  .modal-control-panel-tester-list .tester-button {
    padding: 6px 10px;
    font-size: 0.85em;
  }
  .modal-control-panel-command-area .command-input-group {
     flex-wrap: wrap; /* Allow command buttons to wrap */
  }
   .modal-control-panel-command-area .chat-input {
      width: 100%; /* Make input full width initially */
      margin-bottom: 8px; /* Add space when buttons wrap */
   }
   .modal-control-panel-command-area .button {
       flex-grow: 1; /* Allow buttons to take space */
       text-align: center;
   }
}