/* =====================================================
   DASHBOARD.CSS - 라온인포텍 메인 대시보드
   - 전체 배경: 아주 연한 스카이블루 (기존 배경 이미지 제거)
   - 캘린더 및 카드: 흰색
   - 기존 캘린더/세션 JavaScript 로직 유지
   ===================================================== */

/* =====================================================
   1. 전체 레이아웃
   ===================================================== */

body:has(.dashboard-sidebar) {
    /* 기존 사이트 배경 이미지/그라데이션을 사용하지 않음 */
    background: #eff8ff !important;
    background-image: none !important;
    background-attachment: scroll !important;
    color: #17243c;
    font-family: system-ui, -apple-system, "Malgun Gothic", sans-serif;
}

/* =====================================================
   3. 상단 헤더 및 로그인 영역
   ===================================================== */

body:has(.dashboard-sidebar) header {
    display: block !important;
    position: relative;
    z-index: 2;
    background: white;
    box-shadow: none;
    border-bottom: 1px solid #e9edf4;
}

.dashboard-topbar {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 37px;
}

.topbar-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.topbar-heading strong {
    font-size: 18px;
}

.topbar-eyebrow,
.intro-kicker {
    color: #647da6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

body:has(.dashboard-sidebar) .login_box {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0;
}

body:has(.dashboard-sidebar) .login_box a {
    text-decoration: none;
}

body:has(.dashboard-sidebar) .login_box .session_user_name {
    color: #1d2b46;
    font-weight: 700;
}

body:has(.dashboard-sidebar) .login_box .loginbtn,
body:has(.dashboard-sidebar) .login_box .joinbtn,
body:has(.dashboard-sidebar) .login_box .logoutbtn {
    font-size: 13px;
    padding: 9px 15px;
    border-radius: 9px;
    background: #edf2fb;
    color: #29456e;
}

body:has(.dashboard-sidebar) .login_box .logoutbtn {
    background: #e8edfa;
}

body:has(.dashboard-sidebar) .mobile_login_box {
    display: none !important;
}

/* =====================================================
   4. 대시보드 본문 및 소개 영역
   ===================================================== */

.dashboard-content {
    max-width: 1460px;
    margin: auto;
    padding: 35px 38px 65px;
}

.dashboard-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.dashboard-intro h1 {
    font-size: 27px;
    font-weight: 800;
    margin: 9px 0;
    color: #17243c;
}

.dashboard-intro p {
    color: #718099;
    font-size: 14px;
    margin: 0;
}

.intro-apply {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #386ff2;
    color: white !important;
    padding: 13px 20px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* =====================================================
   5. 바로가기 카드
   ===================================================== */

.dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 37px;
}

.shortcut-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    background: white;
    padding: 21px 20px;
    border: 1px solid #e0eaf3;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(29, 53, 90, 0.045);
    text-decoration: none !important;
    color: #17243c !important;
}

.shortcut-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 22px;
}

.shortcut-icon.blue {
    background: #e7efff;
    color: #4675e9;
}

.shortcut-icon.violet {
    background: #f0eaff;
    color: #8a64d5;
}

.shortcut-icon.mint {
    background: #e5f8f3;
    color: #26a58c;
}

.shortcut-card strong,
.shortcut-card small {
    display: block;
}

.shortcut-card strong {
    font-size: 15px;
}

.shortcut-card small {
    font-size: 12px;
    color: #8995a9;
    margin-top: 5px;
}

.shortcut-arrow {
    margin-left: auto;
    color: #a2aec0;
}

/* =====================================================
   6. 캘린더 섹션 제목
   ===================================================== */

.dashboard-section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 16px;
}

.dashboard-section-title h2 {
    font-size: 21px;
    font-weight: 800;
    margin: 6px 0 0;
}

.section-description {
    font-size: 12px;
    color: #8190a6;
}

/* =====================================================
   7. 캘린더 - 흰색 카드 유지
   기존 휴가/공휴일/오늘 날짜의 개별 스타일은 index.css 유지
   ===================================================== */

body:has(.dashboard-sidebar) .calendar_area {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}

body:has(.dashboard-sidebar) .calendar_box {
    max-width: none !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #d9e7f2 !important;
    border-radius: 17px !important;
    padding: 28px !important;
    box-shadow: 0 5px 22px rgba(29, 53, 90, 0.05);
    backdrop-filter: none !important;
}

body:has(.dashboard-sidebar) .calendar_header {
    color: #17243c !important;
    font-size: 26px !important;
    gap: 24px !important;
}

body:has(.dashboard-sidebar) .calendar_header button {
    color: #48627f !important;
    font-size: 21px !important;
}

body:has(.dashboard-sidebar) .calendar_week {
    color: #62728a !important;
}

body:has(.dashboard-sidebar) .calendar_days {
    color: #263a58;
}

body:has(.dashboard-sidebar) .calendar_legend,
body:has(.dashboard-sidebar) .calendar_status {
    color: #64748b !important;
}

/* =====================================================
   9. 태블릿 / 작은 PC (1050px 이하)
   ===================================================== */

@media (max-width: 1050px) {

    .dashboard-content {
        padding: 27px 23px 50px;
    }

}

/* =====================================================
   10. 모바일 (650px 이하)
   ===================================================== */

@media (max-width: 650px) {

    .dashboard-topbar {
        height: 65px;
        padding: 0 17px;
    }

    .topbar-heading strong {
        font-size: 15px;
    }

    .topbar-eyebrow {
        display: none;
    }

    .dashboard-content {
        padding: 24px 14px 40px;
    }

    .dashboard-intro {
        align-items: flex-start;
    }

    .dashboard-intro h1 {
        font-size: 20px;
    }

    .dashboard-intro p {
        font-size: 12px;
    }

    .intro-apply {
        padding: 10px 11px;
        font-size: 12px;
    }

    .dashboard-shortcuts {
        gap: 9px;
        margin-bottom: 29px;
    }

    .shortcut-card {
        padding: 13px 9px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .shortcut-icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .shortcut-card strong {
        font-size: 12px;
    }

    .shortcut-card small,
    .shortcut-arrow,
    .section-description {
        display: none;
    }

    body:has(.dashboard-sidebar) .calendar_box {
        padding: 12px !important;
    }

    .calendar_header {
        font-size: 21px !important;
        gap: 18px !important;
    }

    .dashboard-section-title h2 {
        font-size: 18px;
    }

    body:has(.dashboard-sidebar) .login_box {
        gap: 5px !important;
    }

    body:has(.dashboard-sidebar) .login_box .loginbtn,
    body:has(.dashboard-sidebar) .login_box .joinbtn,
    body:has(.dashboard-sidebar) .login_box .logoutbtn {
        font-size: 11px;
        padding: 7px 8px;
    }

    body:has(.dashboard-sidebar) .login_box .session_user_name {
        font-size: 11px;
    }

}

/* =====================================================
   11. 캘린더 날짜 숫자 및 그리드 통합 스타일
   - 빈 날짜 칸도 동일한 선명도의 테두리 적용
   - 날짜 칸 사이 구분선과 외곽선 연결
   - 캘린더 흰색 / 대시보드 연한 스카이블루 유지
   ===================================================== */

body:has(.dashboard-sidebar) .calendar_days {
    /* 하단선은 마지막 날짜 행이 직접 그려 중복과 누락을 방지 */
    border: 1px solid #d6e2ef !important;
    border-bottom: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    color: #173b65;

    /* 달력 높이가 고정되어도 마지막 주까지 칸을 균등 배치 */
    grid-auto-rows: minmax(90px, 1fr);
    align-content: stretch;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day {
    box-sizing: border-box;
    color: #173b65 !important;
    border-right: 1px solid #d6e2ef !important;
    border-bottom: 1px solid #d6e2ef !important;
}

/* 빈 날짜 칸의 opacity 때문에 테두리가 흐려지는 문제 해결 */

body:has(.dashboard-sidebar) .calendar_days .calendar_day.empty {
    opacity: 1 !important;
    background: #ffffff;
}

/* 각 주 마지막 열은 외곽선과 겹치지 않도록 제거 */

body:has(.dashboard-sidebar) .calendar_days .calendar_day:nth-child(7n) {
    border-right: 0 !important;
}

/* =====================================================
   마지막 주 하단선 누락 및 이중선 방지
   - 모든 날짜 칸(빈칸 포함)의 하단 테두리를 표시
   - 캘린더 외곽의 border-bottom은 위에서 제거
   - PC 90px 고정 및 모바일 반응형 모두 동일한 원리
   ===================================================== */

body:has(.dashboard-sidebar) .calendar_days .calendar_day:nth-last-child(-n + 7) {
    border-bottom: 1px solid #d6e2ef !important;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day .day_number {
    color: inherit !important;
    opacity: 1;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day:nth-child(7n + 1) {
    color: #c92c43 !important;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day:nth-child(7n) {
    color: #215fc3 !important;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day.holiday .day_number {
    color: #c92c43 !important;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day.today .day_number {
    background: #2468d4 !important;
    color: #ffffff !important;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day:hover,
body:has(.dashboard-sidebar) .calendar_days .calendar_day:focus-visible {
    background: #f2f8ff !important;
}

/* =====================================================
   12. 모바일 상단 헤더 - 메뉴 버튼과 로그인 영역
   ===================================================== */

@media (max-width: 650px) {

    body:has(.dashboard-sidebar) .dashboard-topbar {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-areas: "menu account";
        align-items: center;
        column-gap: 8px;
        row-gap: 10px;
        height: auto !important;
        min-height: 65px;
        padding: 12px 15px !important;
    }



    body:has(.dashboard-sidebar) .dashboard-topbar > .login_box {
        grid-area: account;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        justify-self: end;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
        gap: 6px !important;
    }

    body:has(.dashboard-sidebar) .dashboard-topbar > .topbar-heading {
        grid-area: title;
        min-width: 0;
        width: 100%;
        padding-top: 4px;
    }

    body:has(.dashboard-sidebar) .topbar-heading strong {
        display: block;
        font-size: 17px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    body:has(.dashboard-sidebar) .login_box .session_user_name {
        overflow-wrap: anywhere;
        text-align: right;
    }

}

/* =====================================================
   13. 캘린더 아래 빠른 메뉴
   - 소개 문구 제거 후 카드 위치 이동
   - 캘린더와 카드 사이 간격 유지
   ===================================================== */

body:has(.dashboard-sidebar) .dashboard-shortcuts {
    margin-top: 24px;
    margin-bottom: 0;
}

@media (max-width: 650px) {

    body:has(.dashboard-sidebar) .dashboard-shortcuts {
        margin-top: 16px;
        margin-bottom: 0;
    }

}

/* =====================================================
   14. 모바일 상단 헤더 높이 최종 조정
   - 기존 모바일 그리드 및 로그인 배치 유지
   - 650px 이하에서만 적용
   ===================================================== */

@media (max-width: 650px) {

    body:has(.dashboard-sidebar) .dashboard-topbar {
        height: 56px !important;
        min-height: 56px;
        padding: 5px 15px !important;
        row-gap: 0;
    }



}

/* =====================================================
   15. 모바일 로그인 / 회원가입 버튼 크기 및 정렬
   - 비로그인: 로그인 / 회원가입 모두 78px × 34px
   - 로그인: 사용자명 + 로그아웃 한 줄 정렬
   - 캘린더 및 사이드바 스타일 변경 없음
   ===================================================== */

@media (max-width: 650px) {

    /* -------------------------------------------------
       모바일 상단 로그인 영역 공통 정렬
       ------------------------------------------------- */

    body:has(.dashboard-sidebar) .dashboard-topbar > .login_box {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        justify-self: end;
        gap: 8px !important;
        min-width: 0;
        max-width: 100%;
    }

    /* -------------------------------------------------
       로그인 전: 로그인 / 회원가입 버튼 동일 크기
       ------------------------------------------------- */

    body:has(.dashboard-sidebar) .dashboard-topbar .login_box .loginbtn,
    body:has(.dashboard-sidebar) .dashboard-topbar .login_box .joinbtn {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        flex: 0 0 78px !important;

        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;

        height: 34px !important;

        padding: 0 !important;

        box-sizing: border-box;

        font-size: 11px;
        font-weight: 600;

        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
    }

    /* -------------------------------------------------
       로그인 후: 사용자 이름 정렬
       ------------------------------------------------- */

    body:has(.dashboard-sidebar) .dashboard-topbar .login_box .session_user_name {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 !important;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        text-align: right;
    }

    /* -------------------------------------------------
       로그인 후: 로그아웃 버튼 정렬
       ------------------------------------------------- */

    body:has(.dashboard-sidebar) .dashboard-topbar .login_box .logoutbtn {
        display: inline-flex !important;
        flex: 0 0 auto;
        height: 34px;
        padding: 0 10px !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
    }

}
/* =====================================================
   16. 모바일 로그인 영역 오른쪽 위치 미세 조정
   ===================================================== */

@media (max-width: 650px) {

    body:has(.dashboard-sidebar) .dashboard-topbar > .login_box {
        position: relative;
        left: 8px;
    }

}
/* =====================================================
   17. 로그인 / 회원가입 / 로그아웃 버튼 색상
   - 파우더 블루 적용
   - PC / 모바일 공통
   ===================================================== */

body:has(.dashboard-sidebar) .login_box .loginbtn,
body:has(.dashboard-sidebar) .login_box .joinbtn,
body:has(.dashboard-sidebar) .login_box .logoutbtn {

    background: #cbdcf5 !important;
    color: #244b80 !important;

}

/* =====================================================
   18. PC 캘린더 날짜 칸 높이 고정
   - PC(768px 이상)에서 날짜 행 높이를 90px로 통일
   - 모바일(767px 이하)은 기존 반응형 스타일 유지
   - 마지막 행 외곽 테두리 처리 유지
   ===================================================== */

@media (min-width: 768px) {

    body:has(.dashboard-sidebar) .calendar_days {
        grid-auto-rows: 90px;
        align-content: start;
    }

    body:has(.dashboard-sidebar) .calendar_days .calendar_day {
        height: 90px;
        min-height: 90px;
        max-height: 90px;
        box-sizing: border-box;
        overflow: hidden;
    }

}

/* =====================================================
   19. 월별 슬라이드 높이 분리
   - 옆 달의 6주 높이가 현재 달 5주 패널을 늘리지 않도록 설정
   - 현재 달에 필요한 행만 표시 (높이는 index.js가 동기화)
   ===================================================== */

body:has(.dashboard-sidebar) .calendar_track {
    align-items: flex-start;
}

body:has(.dashboard-sidebar) .calendar_slide {
    align-self: flex-start;
    align-content: start;
}


/* =====================================================
   20. 모바일 캘린더 제목 우측 오늘 날짜 표시
   - PC: 기존 설명 문구 유지
   - 모바일: 설명 대신 오늘 날짜 표시
   - 캘린더 및 하단 카드 크기는 변경하지 않음
   ===================================================== */

.mobile-today-date {
    display: none;
}

@media (max-width: 650px) {
    .dashboard-section-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .dashboard-section-title > div {
        min-width: 0;
    }

    .dashboard-section-title .mobile-today-date {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        white-space: nowrap;
        color: #386ff2;
        font-size: 13px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 360px) {
    .dashboard-section-title .mobile-today-date {
        font-size: 11px;
    }
}

/* =====================================================
   21. 모바일 캘린더 제목 / 오늘 날짜 디자인 통일
   - 왼쪽 휴가 캘린더 / 오른쪽 오늘 날짜 한 줄 정렬
   - 제목과 날짜의 색상, 굵기 통일
   - 기존 PC 디자인 유지
   ===================================================== */

@media (max-width: 650px) {

    .dashboard-section-title {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }

    .dashboard-section-title h2 {
        font-size: 18px;
        font-weight: 800;
        color: #17243c;
    }

    .dashboard-section-title .mobile-today-date {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        font-size: 16px;
        font-weight: 800;
        color: #17243c;
        white-space: nowrap;
        letter-spacing: -0.5px;
        font-variant-numeric: tabular-nums;
    }

}

@media (max-width: 360px) {

    .dashboard-section-title .mobile-today-date {
        font-size: 13px;
    }

}

/* 모바일 날짜 최종 표시 보장 */
@media (max-width: 650px) {
    body .dashboard-section-title .mobile-today-date {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: flex-end;
        font-size: 16px;
        font-weight: 800;
        color: #17243c;
        white-space: nowrap;
    }
}
@media (max-width: 360px) {
    body .dashboard-section-title .mobile-today-date {
        font-size: 13px;
    }
}

/* =====================================================
   22. PC / 모바일 오늘 날짜 항상 표시
   ===================================================== */
.dashboard-section-title .section-description { display: none !important; }
.dashboard-section-title .mobile-today-date {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    color: #17243c;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 650px) {
    .dashboard-section-title .mobile-today-date { font-size: 16px; }
}
@media (max-width: 360px) {
    .dashboard-section-title .mobile-today-date { font-size: 13px; }
}


/* =====================================================
   23. PC 대시보드 90% 수준 컴팩트 레이아웃
   - 모바일/태블릿(1050px 이하) 기존 디자인 유지
   - PC 캘린더 날짜 행, 카드, 바깥 여백만 축소
   - 날짜/휴가/공휴일/슬라이드 동작 유지
   ===================================================== */
@media (min-width: 1051px) {

    .dashboard-content {
        max-width: 1314px;
        padding: 22px 28px 35px;
    }

    .dashboard-section-title {
        margin-bottom: 12px;
    }

    .dashboard-section-title h2 {
        font-size: 19px;
    }

    .dashboard-section-title .mobile-today-date {
        font-size: 17px;
    }

    body:has(.dashboard-sidebar) .calendar_box {
        padding: 20px !important;
    }

    body:has(.dashboard-sidebar) .calendar_header {
        font-size: 23px !important;
        gap: 20px !important;
    }

    body:has(.dashboard-sidebar) .calendar_days {
        grid-auto-rows: 80px;
    }

    body:has(.dashboard-sidebar) .calendar_days .calendar_day {
        height: 80px;
        min-height: 80px;
        max-height: 80px;
    }

    body:has(.dashboard-sidebar) .dashboard-shortcuts {
        margin-top: 16px;
    }

    body:has(.dashboard-sidebar) .shortcut-card {
        padding: 15px 16px;
        gap: 12px;
    }

    body:has(.dashboard-sidebar) .shortcut-icon {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }
}


/* =====================================================
   24. 오늘 날짜: 원형 강조 제거 / 칸 전체 하늘색 강조
   - 날짜 숫자 위치 및 기존 휴가 일정 정렬 유지
   - PC / 모바일 공통
   ===================================================== */
body:has(.dashboard-sidebar) .calendar_days .calendar_day.today {
    background: #dceeff !important;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day.today .day_number {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #174a91 !important;
    font-weight: 700 !important;
    line-height: inherit !important;
}

body:has(.dashboard-sidebar) .calendar_days .calendar_day.today:hover,
body:has(.dashboard-sidebar) .calendar_days .calendar_day.today:focus-visible {
    background: #cfe5ff !important;
}