/**
 * [FILE: style.css]
 * 역할: 웹 서비스의 시각적 디자인, 레이아웃, 애니메이션 및 모바일 반응형 설정
 */

/* ---------------------------------------------------------
   0. 애니메이션 정의
   --------------------------------------------------------- */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ---------------------------------------------------------
   1. [공통 설정]
   --------------------------------------------------------- */
body {
    font-family: 'Pretendard', 'Malgun Gothic', -apple-system, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 10px 10px env(safe-area-inset-bottom, 10px) 10px;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 10px; 
    overflow: hidden;
}

/* ---------------------------------------------------------
   2. [스마트 헤더]
   --------------------------------------------------------- */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    flex-shrink: 0;
}

.left-section { display: flex; align-items: center; gap: 15px; }

.title-group { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }

.title1 { font-size: 20px; font-weight: 800; color: #111827; margin: 0; line-height: 1.1; }

.title { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; }

.divider { width: 1px; height: 32px; background-color: #e5e7eb; }

.timer-box { display: flex; flex-direction: column; align-items: flex-start; }

.timer-label { font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 2px; }

.timer-text { font-family: monospace; font-size: 18px; font-weight: 700; transition: color 0.3s; }

/* 타이머 상태별 색상 */
.text-green { color: #22c55e; }
.text-red { color: #ef4444; animation: pulse 2s infinite; }
.text-gray { color: #9ca3af; }

.day-toggle { display: flex; background-color: #f3f4f6; padding: 4px; border-radius: 8px; }

.day-btn {
    border: none; background: none; padding: 6px 12px; font-size: 13px; font-weight: 700;
    border-radius: 6px; cursor: pointer; color: #9ca3af; transition: all 0.2s;
}

.day-btn.active { background-color: white; color: #2563eb; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* ---------------------------------------------------------
   3. [메인 대시보드]
   --------------------------------------------------------- */
.dashboard-area {
    display: flex; flex: 1; gap: 10px; min-height: 0; overflow: hidden;
}

.left-panel, .sub-panel {
    background-color: white; border-radius: 10px; padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); overflow-y: auto; border: 1px solid #ddd;
}

.left-panel { flex: 1.5; }

.right-panel-wrapper { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.sub-panel { flex: 1; }

/* ---------------------------------------------------------
   4. [하단 컨트롤 패널]
   --------------------------------------------------------- */
.control-panel {
    background-color: #333; color: white; padding: 10px 15px; border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; flex-shrink: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.input-group { display: flex; align-items: center; gap: 8px; }

input[type="text"], input[type="password"] {
    padding: 6px; border: 1px solid #ccc; border-radius: 4px; width: 80px; font-size: 14px;
}

select { padding: 6px; border-radius: 4px; }

.radio-label { font-size: 14px; margin-right: 5px; cursor: pointer; white-space: nowrap; }

.submit-btn {
    background-color: #007bff; color: white; border: none; padding: 6px 15px;
    border-radius: 5px; font-weight: bold; cursor: pointer; white-space: nowrap;
}

/* ---------------------------------------------------------
   5. [데이터 테이블]
   --------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
    background-color: #f8f9fa; position: sticky; top: 0; padding: 8px;
    border-bottom: 2px solid #ddd; font-size: 13px; z-index: 10;
}

td { padding: 8px; border-bottom: 1px solid #eee; text-align: center; }

th:first-child, td:first-child { width: 40px; background-color: #f1f1f1; font-weight: bold; }

h3 { margin: 0 0 10px 0; font-size: 16px; display: inline-block; }

/* ---------------------------------------------------------
   6. [모바일 반응형 & 아코디언]
   --------------------------------------------------------- */
@media (max-width: 768px) {
    body { padding: 5px; gap: 5px; height: 100vh; overflow: hidden; }

    .header-container { padding: 10px; }
    .title1 { font-size: 18px; }
    .timer-text { font-size: 16px; }
    .divider { margin: 0 8px; }

    .dashboard-area { flex-direction: column; gap: 5px; }
    
    .accordion-item { 
        display: flex; flex-direction: column; background-color: white;
        border-radius: 8px; overflow: hidden; padding: 0 10px; border: 1px solid #ddd;
        transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .accordion-item:not(.collapsed) { flex: 1; }
    .accordion-item.collapsed { flex: 0 0 45px; }

    .left-panel, .right-panel-wrapper, .sub-panel { height: auto !important; margin: 0; padding: 10px 15px; box-shadow: none; }
    .right-panel-wrapper { display: contents; }

    .control-panel { flex-direction: column; gap: 5px; padding: 8px; align-items: stretch; }

    .input-group:nth-child(1) { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 5px; }
    
    .accordion-header {
        height: 45px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; flex-shrink: 0;
    }

    .arrow {
    display: inline-block;
    width: 8px;             /* 너비 */
    height: 8px;            /* 높이 */
    border-right: 2px solid #aaa; /* 오른쪽 테두리 */
    border-bottom: 2px solid #aaa; /* 아래쪽 테두리 */
    margin-left: 10px;      /* 텍스트와의 간격 */
    
    /* 기본 상태(펼쳐짐): 위쪽(^)을 향하도록 회전 */
    transform: rotate(225deg); 
    transition: transform 0.3s ease; /* 부드러운 회전 애니메이션 */
}

    .accordion-item.collapsed .accordion-content { display: none !important; }

    .accordion-content { flex: 1; overflow-y: auto; padding-bottom: 10px; }

    .accordion-item.collapsed .arrow 
    {
        transform: rotate(45deg); 
    }

    .hidden { display: none !important; }

    .input-group.mobile-row-2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

    /* [핵심] 관리자버튼 + 확인버튼을 오른쪽 끝으로 밀기 */
    .submit-group { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: 1; }

    .admin-btn, .submit-btn { height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------
   7. [=== Admin Styles ===] 관리자 전용 스타일
   --------------------------------------------------------- */

/* ⚙️ 버튼 스타일 */
.admin-btn {
    background: none; border: none; border-radius: 5px; padding: 8px 12px;
    cursor: pointer; font-size: 18px; color: white; outline: none; transition: all 0.3s;
}

.admin-btn:hover { background-color: rgba(255, 255, 255, 0.1); }

/* 관리자 인증 레이어 (중앙 팝업) */
.admin-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 2000;
}

.admin-auth-box {
    background: white; padding: 25px; border-radius: 12px; width: 280px; text-align: center; color: #333;
}

.admin-auth-box h4 { margin: 0 0 15px 0;      /* 상단 마진을 없애고 하단에만 여백을 줌 (중앙 정렬 핵심) */
    color: #111; 
    font-size: 18px;
    width: 100%;             /* 너비를 꽉 채워서 text-align이 정확히 먹게 함 */ 
}

.admin-auth-box input {
    width: 100%; 
    padding: 12px; 
    margin-bottom: 20px;     /* 버튼과의 간격 확보 */
    border: 1px solid #ddd; 
    border-radius: 6px; 
    box-sizing: border-box; 
    font-size: 16px;
    text-align: center;      /* 입력하는 비밀번호도 한가운데 오게 하면 더 예쁨! */
}

.auth-btns { display: flex; gap: 10px; }
.auth-btns button {
    flex: 1; padding: 10px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;
}
.btn-blue { background: #007bff; color: white; }

/* 관리자 하단 패널 (슬라이드 업) */
.admin-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: white; color: #333; box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    border-radius: 20px 20px 0 0; padding: 20px 20px 30px 20px; z-index: 1000;
    animation: slideUp 0.4s ease;
}

.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

/* 관리자 입력창 스타일 보강 */
.admin-inputs input {
    font-size: 16px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; outline: none; transition: border-color 0.2s;
}

.admin-inputs input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
}

.admin-actions button {
    width: 100%; padding: 12px; background-color: #28a745; color: white;
    border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 16px; margin-top: 5px;
}



/* 아코디언 pc 설정 무효화 */
/* [PC 전용 설정] 화면이 769px 이상일 때(PC) 적용 */
@media (min-width: 769px) {
    /* 1. 화살표 아이콘 숨기기 */
    .arrow {
        display: none !important;
    }

    /* 2. PC에서는 마우스 커서가 손가락 모양(👆)으로 안 바뀌게 설정 */
    .accordion-header {
        cursor: default !important;
        pointer-events: none; /* 클릭 자체를 무효화 */
    }
}