/* ========================================
   대시보드 스타일시트
   ======================================== */

/* 대시보드 메인 컨테이너 - 전체 대시보드 영역을 감싸는 컨테이너 */
.dashboard-container {
    padding: 0 5px 0 5px;                 
    height: 100%;                     /* 부모 요소의 전체 높이 사용 */
    overflow-y: auto;                 /* 세로 스크롤 허용 (내용이 넘칠 경우) */
    background-color: var(--background-color); /* CSS 변수로 정의된 배경색 사용 */
}

/* 대시보드 헤더 영역 - 페이지리스트와 동일한 스타일 */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* 대시보드 제목 스타일 - 페이지리스트와 동일 */
.dashboard-header h2 {
    margin: 0;
    font-size: 1.8rem;
}

/* 대시보드 콘텐츠 영역 - 그리드 레이아웃으로 좌우 분할 */
.dashboard-content {
    display: grid;                    /* CSS Grid 레이아웃 사용 */
    grid-template-columns: 1fr 1fr;   /* 2개의 동일한 크기 컬럼 (좌우 분할) */
    gap: 5px;                        /* 그리드 아이템 간 간격 30px */
    margin: 15px 0 0 0;
    height: calc(100% - 70px);        /* 전체 높이에서 헤더 높이(80px) 제외 */
}

/* 대시보드 섹션 - 각 영역(시계, 달력)을 감싸는 컨테이너 */
.dashboard-section {
    background: #1e1e1e;              /* 어두운 회색 배경 */
    border-radius: 12px;              /* 모서리 둥글게 */
    padding: 25px;                    /* 내부 여백 25px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
    border: 1px solid #404040;        /* 테두리 */
    width: 100%;                      /* 전체 너비 */
    height: 100%;                     /* 전체 높이 */
    max-height: 100%;                 /* 최대 높이 제한 */
    overflow: hidden;                 /* 넘치는 내용 숨김 */
    display: flex;                    /* Flexbox 사용 */
    flex-direction: column;           /* 세로 방향 배치 */
}

/* 섹션 제목 스타일 */
.dashboard-section h3 {
    margin: 0 0 20px 0;               /* 상단 마진 0, 하단 마진 20px */
    color: var(--primary-color);      /* 주요 색상 사용 */
    font-size: 1.3rem;                /* 글자 크기 1.3rem */
    font-weight: 600;                 /* 글자 굵기 600 */
    border-bottom: 1px solid #404040; /* 하단 구분선 */
    padding-bottom: 10px;             /* 구분선과 텍스트 사이 여백 */
    flex-shrink: 0;                   /* 제목은 축소되지 않도록 */
}

/* ========================================
   시계 관련 스타일
   ======================================== */

/* 시계 전체 컨테이너 - 아날로그와 디지털 시계를 세로로 배치 */
.clock-container {
    display: flex;                    /* Flexbox 레이아웃 사용 */
    flex-direction: column;           /* 세로 방향 배치 */
    align-items: center;              /* 가로 중앙 정렬 */
    gap: 20px;                        /* 요소 간 간격 20px */
    flex: 1;                          /* 남은 공간 모두 사용 */
    min-height: 0;                    /* 최소 높이 제거 */
    overflow: hidden;                 /* 넘치는 내용 숨김 */
}

/* 아날로그 시계 외부 컨테이너 */
.analog-clock {
    width: 90%;                       /* 부모 요소 너비의 90% */
    aspect-ratio: 1;                  /* 정사각형 비율 유지 (높이 = 너비) */
    border: 3px solid #404040;        /* 3px 두께의 회색 테두리 */
    border-radius: 50%;               /* 원형 모양 */
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); /* 그라데이션 배경 */
    position: relative;               /* 내부 요소들의 기준점 */
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3); /* 그림자 효과 */
}

/* 시계 얼굴 부분 - 시계 바늘들이 위치하는 영역 */
.clock-face {
    width: 100%;                      /* 부모 요소의 전체 너비 */
    height: 100%;                     /* 부모 요소의 전체 높이 */
    position: relative;               /* 시계 바늘들의 기준점 */
    border-radius: 50%;               /* 원형 모양 */
}

/* ========================================
   시계 바늘 공통 스타일
   ======================================== */

/* 공통: bottom/left + margin-left 대신 top/left + translate 로 중앙 정렬 */
.hand {
    position: absolute;
    top: 50%;                        /* 시계 중심 y */
    left: 50%;                       /* 시계 중심 x */
    transform-origin: 50% 100%;      /* 요소 하단(100%) 중앙(50%)을 회전축으로 */
    /* 초기 위치를 피벗(하단 중앙)이 시계 중심에 오도록 이동 */
    transform: translate(-50%, -100%) rotate(0deg);
    border-radius: 4px;
    transition: transform 0.1s ease-out;
}

/* 개별 바늘 두께·길이는 그대로 px 혹은 %로 유지하되, margin-left 제거 */
.hour-hand {
    width: 8px;     /* 시침: 가장 굵게 */
    height: 30%;    /* 시침: 조금 더 길게 */
    background: var(--primary-color);
}

.minute-hand {
    width: 6px;     /* 분침: 중간 굵기 */
    height: 42%;    /* 분침: 조금 더 길게 */
    background: var(--primary-color);
}

.second-hand {
    width: 2px;
    height: 48%;    /* 초침: 조금 더 길게 */
    background: #e74c3c;              /* 원래 빨간색 */
}


/* 시계 중앙 점 - 바늘들이 회전하는 중심점 */
.center-dot {
    position: absolute;               /* 절대 위치 지정 */
    top: 50%;                         /* 상단에서 50% 위치 */
    left: 50%;                        /* 좌측에서 50% 위치 */
    width: 5.625%;                    /* 시계 너비의 5.625% (18px/320px = 5.625%) */
    height: 5.625%;                   /* 시계 높이의 5.625% (18px/320px = 5.625%) */
    background: var(--primary-color); /* 주요 색상 사용 */
    border-radius: 50%;               /* 원형 모양 */
    transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
    border: 0.9375% solid #404040;    /* 테두리 (3px/320px = 0.9375%) */
}

/* ========================================
   시계 숫자 스타일
   ======================================== */

/* 시계 숫자들의 공통 스타일 */
.number {
    position: absolute;               /* 절대 위치 지정 */
    width: 100%;                      /* 전체 너비 */
    height: 100%;                     /* 전체 높이 */
    text-align: center;               /* 텍스트 중앙 정렬 */
    font-size: 16px;                   /* 기본 크기 (JavaScript로 동적 조정됨) */
    opacity: 0;                        /* 초기에는 숨김 */
    transition: opacity 0.1s ease;     /* 부드러운 페이드인 효과 */
    font-weight: 600;                 /* 글자 굵기 600 */
    color: var(--primary-color);      /* 주요 색상 사용 */
    transform-origin: center;         /* 회전 기준점을 중앙으로 설정 */
}

/* 각 숫자의 회전 각도 설정 (12시 방향부터 시계방향으로) */
.number-1 { transform: rotate(30deg); }   /* 1시 방향 (30도) */
.number-2 { transform: rotate(60deg); }   /* 2시 방향 (60도) */
.number-3 { transform: rotate(90deg); }   /* 3시 방향 (90도) */
.number-4 { transform: rotate(120deg); }  /* 4시 방향 (120도) */
.number-5 { transform: rotate(150deg); }  /* 5시 방향 (150도) */
.number-6 { transform: rotate(180deg); }  /* 6시 방향 (180도) */
.number-7 { transform: rotate(210deg); }  /* 7시 방향 (210도) */
.number-8 { transform: rotate(240deg); }  /* 8시 방향 (240도) */
.number-9 { transform: rotate(270deg); }  /* 9시 방향 (270도) */
.number-10 { transform: rotate(300deg); } /* 10시 방향 (300도) */
.number-11 { transform: rotate(330deg); } /* 11시 방향 (330도) */
.number-12 { transform: rotate(0deg); }   /* 12시 방향 (0도) */

/* 숫자 내부 span 요소 - 실제 숫자 텍스트 */
.number > span {
    display: inline-block;            /* 인라인 블록 요소 */
    position: relative;               /* 상대 위치 지정 */
    top: 1.5625%;                     /* 상단에서 1.5625% 이동 (5px/320px = 1.5625%) */
    transform: rotate(-30deg);        /* 기본 회전 각도 보정 */
    margin-top: 2%;                   /* 숫자를 안쪽으로 이동 (초 표시선과 겹치지 않도록) */
}

/* 각 숫자의 회전 각도에 따른 보정 회전 (숫자가 올바른 방향을 보도록) */
.number-1 > span { transform: rotate(-30deg); }   /* 1시 방향 보정 */
.number-2 > span { transform: rotate(-60deg); }   /* 2시 방향 보정 */
.number-3 > span { transform: rotate(-90deg); }   /* 3시 방향 보정 */
.number-4 > span { transform: rotate(-120deg); }  /* 4시 방향 보정 */
.number-5 > span { transform: rotate(-150deg); }  /* 5시 방향 보정 */
.number-6 > span { transform: rotate(-180deg); }  /* 6시 방향 보정 */
.number-7 > span { transform: rotate(-210deg); }  /* 7시 방향 보정 */
.number-8 > span { transform: rotate(-240deg); }  /* 8시 방향 보정 */
.number-9 > span { transform: rotate(-270deg); }  /* 9시 방향 보정 */
.number-10 > span { transform: rotate(-300deg); } /* 10시 방향 보정 */
.number-11 > span { transform: rotate(-330deg); } /* 11시 방향 보정 */
.number-12 > span { transform: rotate(0deg); }    /* 12시 방향 보정 */

/* ========================================
   시계 둘레 초 표시 선
   ======================================== */

/* 초 표시 선들의 공통 스타일 */
.second-mark {
    position: absolute;               /* 절대 위치 지정 */
    width: 100%;                      /* 전체 너비 */
    height: 100%;                     /* 전체 높이 */
    transform-origin: center;         /* 회전 기준점을 중앙으로 설정 */
}

/* 초 표시 선 - 얇은 선 */
.second-mark::before {
    content: '';                      /* 가상 요소 내용 */
    position: absolute;               /* 절대 위치 지정 */
    top: 0%;                          /* 상단에서 0% 위치 (시계 가장자리) */
    left: 50%;                        /* 좌측에서 50% 위치 (중앙) */
    width: 2px;                       /* 초침과 동일한 굵기 (2px) */
    height: 1.5%;                     /* 선 길이 (시계 높이의 1.5%) */
    background: var(--primary-color); /* 원래 주요 색상 */
    transform: translateX(-50%);      /* 정확한 중앙 정렬 */
    border-radius: 0.078%;            /* 모서리 둥글게 (너비의 50%) */
}

/* 5초 단위 초 표시 선 - 굵은 선 */
.second-mark.five-second::before {
    width: 0.4%;                      /* 굵은 선 너비 (시계 너비의 0.4%) */
    height: 2.5%;                     /* 굵은 선 길이 (시계 높이의 2.5%) */
    border-radius: 0.156%;            /* 모서리 둥글게 (너비의 50%) */
}



/* ========================================
   디지털 시계 스타일
   ======================================== */

/* 디지털 시계 표시 영역 */
.digital-time {
    font-size: 1.2rem;                /* 글자 크기 1.2rem */
    font-weight: 500;                 /* 글자 굵기 500 (medium) */
    color: var(--primary-color);      /* 주요 색상 사용 */
    text-align: center;               /* 텍스트 중앙 정렬 */
    padding: 15px;                    /* 내부 여백 15px */
    background: #1e1e1e;              /* 어두운 회색 배경 */
    border-radius: 8px;               /* 모서리 둥글게 */
    border: 1px solid #404040;        /* 테두리 */
    min-width: 300px;                 /* 최소 너비 300px */
}

/* ========================================
   달력 스타일
   ======================================== */

/* 달력 전체 컨테이너 */
.calendar {
    overflow: hidden;                 /* 넘치는 내용 숨김 */
    display: flex;                    /* Flexbox 사용 */
    flex-direction: column;           /* 세로 방향 배치 */
    align-self: center;               /* 가로 중앙 정렬 */
    margin: 5px;                      /* 사방으로 5px 마진 */
}

/* 달력 헤더 - 월 이동 버튼과 제목 */
.calendar-header {
    display: flex;                    /* Flexbox 레이아웃 사용 */
    height: 50px;                     /* 높이 35px */  
    justify-content: space-between;   /* 좌우 끝 정렬 */
    align-items: center;              /* 세로 중앙 정렬 */
    margin-bottom: 10px;              /* 하단 여백 10px로 줄임 */
    padding: 5px 0;                   /* 상하 내부 여백 5px로 줄임 */
    flex-shrink: 0;                   /* 헤더는 축소되지 않도록 */
}

/* 달력 제목 (년월 표시) */
.calendar-title {
    font-size: 1.2rem;                /* 글자 크기 1.2rem */
    font-weight: 600;                 /* 글자 굵기 600 */
    color: var(--primary-color);      /* 주요 색상 사용 */
}

/* 달력 네비게이션 버튼 (이전/다음 월) */
.calendar-nav-btn {
    background: #404040;              /* 회색 배경 */
    color: var(--primary-color);      /* 주요 색상 텍스트 */
    border: 1px solid #606060;        /* 테두리 */
    border-radius: 50%;               /* 원형 모양 */
    width: 35px;                      /* 너비 35px */
    height: 35px;                     /* 높이 35px */
    cursor: pointer;                  /* 마우스 포인터 변경 */
    font-size: 1rem;                  /* 글자 크기 1rem */
    display: flex;                    /* Flexbox 사용 */
    align-items: center;              /* 세로 중앙 정렬 */
    justify-content: center;          /* 가로 중앙 정렬 */
    transition: background-color 0.2s; /* 배경색 변경 시 부드러운 전환 */
}

/* 네비게이션 버튼 호버 효과 */
.calendar-nav-btn:hover {
    background: #505050;              /* 호버 시 더 밝은 회색 */
}

/* 달력 그리드 컨테이너 */
.calendar-grid {
    width: 100%;                      /* 전체 너비 */
    max-width: 100%;                  /* 최대 너비 제한 */
    height: 100%;                     /* 전체 높이 */
    max-height: 100%;                 /* 최대 높이 제한 */
    overflow: hidden;                 /* 넘치는 내용 숨김 */
    display: flex;                    /* Flexbox 사용 */
    flex-direction: column;           /* 세로 방향 배치 */
}

/* 요일 헤더 행 */
.calendar-weekdays {
    display: grid;                    /* CSS Grid 레이아웃 사용 */
    grid-template-columns: repeat(7, 1fr); /* 7개의 동일한 크기 컬럼 */
    gap: 2px;                         /* 그리드 간격 2px */
    margin-bottom: 5px;               /* 하단 여백 5px로 줄임 */
    flex-shrink: 0;                   /* 요일 헤더는 축소되지 않도록 */
}

/* 요일 셀 스타일 */
.weekday {
    width: 100%;                     
    text-align: center;               /* 텍스트 중앙 정렬 */
    padding: 5px 2px;                 /* 내부 여백 줄임 */
    font-weight: 600;                 /* 글자 굵기 600 */
    color: #a0a0a0;                   /* 연한 회색 */
    font-size: 16px;                  /* 기본 크기 (JavaScript로 동적 조정됨) */
    background: #2a2a2a;              /* 어두운 회색 배경 */
    border-radius: 4px;               /* 모서리 둥글게 */
    opacity: 0;                       /* 초기에는 숨김 */
    transition: opacity 0.1s ease;    /* 부드러운 페이드인 효과 */
    display: flex;                    /* Flexbox 사용 */
    align-items: center;              /* 세로 중앙 정렬 */
    justify-content: center;          /* 가로 중앙 정렬 */
    box-sizing: border-box;           /* 패딩을 포함한 크기 계산 */
}

/* 일요일 스타일 (빨간색) */
.weekday:first-child {
    color: #e74c3c;                   /* 일요일은 빨간색 */
}

/* 토요일 스타일 (파란색) */
.weekday:last-child {
    color: #3498db;                   /* 토요일은 파란색 */
}

/* 날짜 그리드 */
.calendar-days {
    display: grid;                    /* CSS Grid 레이아웃 사용 */
    grid-template-columns: repeat(7, 1fr); /* 7개의 동일한 크기 컬럼 */
    gap: 2px;                         /* 그리드 간격 2px */
    width: 100%;                      /* 전체 너비 */
    max-width: 100%;                  /* 최대 너비 제한 */
    max-height: 100%;                 /* 최대 높이 제한 */
    overflow: hidden;                 /* 넘치는 내용 숨김 */
}

/* 날짜 셀 스타일 */
.calendar-day {
    width: 100%;                      /* 가로 크기를 weekday와 동일하게 */
    display: flex;                    /* Flexbox 사용 */
    align-items: center;              /* 세로 중앙 정렬 */
    justify-content: center;          /* 가로 중앙 정렬 */
    cursor: pointer;                  /* 마우스 포인터 변경 */
    border-radius: 4px;               /* 모서리 둥글게 */
    font-size: 16px;                  /* 기본 크기 (JavaScript로 동적 조정됨) */
    font-weight: 500;                 /* 글자 굵기 500 */
    transition: all 0.2s;             /* 모든 속성 변경 시 부드러운 전환 */
    border: 1px solid transparent;    /* 투명 테두리 (호버 시 보임) */
    color: var(--primary-color);      /* 주요 색상 사용 */
    opacity: 0;                       /* 초기에는 숨김 */
    box-sizing: border-box;           /* 패딩을 포함한 크기 계산 */
}

/* 날짜 셀 호버 효과 */
.calendar-day:hover {
    background-color: #404040;        /* 호버 시 회색 배경 */
    border-color: #606060;            /* 호버 시 테두리 색상 */
}

/* 다른 달의 날짜 스타일 */
.calendar-day.other-month {
    color: #606060;                   /* 다른 달은 연한 회색 */
}

/* 다른 달의 일요일 스타일 */
.calendar-day.other-month.sunday {
    color: #8b5a5a;                   /* 다른 달 일요일은 어두운 빨간색 */
}

/* 다른 달의 토요일 스타일 */
.calendar-day.other-month.saturday {
    color: #5a7a8b;                   /* 다른 달 토요일은 어두운 파란색 */
}

/* 일요일 날짜 스타일 */
.calendar-day.sunday {
    color: #e74c3c;                   /* 일요일은 빨간색 */
}

/* 토요일 날짜 스타일 */
.calendar-day.saturday {
    color: #3498db;                   /* 토요일은 파란색 */
}

/* 오늘 날짜 스타일 */
.calendar-day.today {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); /* 그라데이션 배경 */
    color: var(--primary-color);      /* 주요 색상 텍스트 */
    font-weight: 600;                 /* 글자 굵기 600 */
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3); /* 그림자 효과 */
    border: 1px solid #606060;        /* 테두리 */
}

/* 오늘이 일요일인 경우 */
.calendar-day.today.sunday {
    color: #e74c3c;                   /* 오늘이 일요일이면 빨간색 */
}

/* 오늘이 토요일인 경우 */
.calendar-day.today.saturday {
    color: #3498db;                   /* 오늘이 토요일이면 파란색 */
}

/* ========================================
   모바일 반응형 스타일
   ======================================== */

/* 768px 이하 화면에서 적용되는 모바일 스타일 */
@media (max-width: 768px) {
    /* 대시보드 콘텐츠를 세로로 배치 */
    .dashboard-content {
        grid-template-columns: 1fr;   /* 1개 컬럼으로 변경 (세로 배치) */
        gap: 20px;                    /* 간격을 20px로 줄임 */
    }
    
    /* 대시보드 컨테이너 여백 조정 */
    .dashboard-container {
        padding: 15px;                /* 여백을 15px로 줄임 */
    }
    
    /* 섹션 내부 여백 조정 */
    .dashboard-section {
        padding: 20px;                /* 여백을 20px로 줄임 */
    }
    
    /* 아날로그 시계 크기 축소 - 모바일에서는 더 작게 조정 */
    .analog-clock {
        width: 70%;                   /* 모바일에서는 70%로 축소 */
        aspect-ratio: 1;              /* 정사각형 비율 유지 */
        max-width: 200px;             /* 최대 너비 제한 */
        max-height: 200px;            /* 최대 높이 제한 */
    }
    
   
    
    /* 디지털 시계 크기 조정 */
    .digital-time {
        font-size: 1rem;              /* 글자 크기를 1rem으로 축소 */
        min-width: 250px;             /* 최소 너비를 250px로 축소 */
    }
    
    /* 달력 날짜 글자 크기 조정 */
    .calendar-day {
        font-size: 0.8rem;            /* 글자 크기를 0.8rem으로 축소 */
    }
    
    /* 요일 헤더 글자 크기 조정 */
    .weekday {
        font-size: 0.8rem;            /* 글자 크기를 0.8rem으로 축소 */
        padding: 8px 3px;             /* 여백 조정 */
    }
}