/* 공통 */
@import url(reset.css);

/* 전역 로딩 오버레이 */
#globalLoadingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    cursor: not-allowed;
}

#globalLoadingOverlay.active {
    display: flex;
}

#globalLoadingOverlay .global-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: #fff;
    border-radius: 50%;
    animation: globalSpinRotate 0.8s linear infinite;
}

#globalLoadingOverlay .global-loading-text {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: "Pretendard", sans-serif;
}

@keyframes globalSpinRotate {
    to { transform: rotate(360deg); }
}

/* Pretendard font 적용 */
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-ExtraBold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}

/* 컬러변수 선언 */
:root {
    --body-color: #2b303a;
    --darkgray-color: #44434f;
    --gray-color: #5a5b6a;
    --main-color: #5ed780;
    --main-hover-color: #82e99f;
    --skyblue-color: #b7d2fa;
    --border-color: #a1a1a1;
    --gray-font: #999999;

    --disabled: #bbb;
    --font-gray: #999;
    --border-gray: #dcdcdc;
    --point-color: #7094f4;
}

body {
    background-color: var(--body-color);
    color: rgba(255, 255, 255, 0.8);
    font-family: "Pretendard", sans-serif;
    overflow-x: hidden;
    -ms-overflow-style: none;
}

#container {
    width: 1920px;
    height: 1080px;
    margin: 0;
    padding: 40px;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub-title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

body.modal-open {
    overflow: hidden;
}

body.modal-open .platform {
    position: relative;
    filter: blur(4px);
    pointer-events: none;
}

/* Flatpickr 한국어 스타일 커스터마이징 */
.flatpickr-calendar {
    background: #272c38 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.flatpickr-months {
    background: #272c38 !important;
}

.flatpickr-month {
    background: #272c38 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #fff !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: #3ad47d !important;
}

.flatpickr-weekdays {
    background: #272c38 !important;
    color: #fff !important;
}

.flatpickr-weekday {
    color: #fff !important;
}

.flatpickr-days {
    background: #272c38 !important;
}

.flatpickr-day {
    color: #fff !important;
    border: none !important;
}

.flatpickr-day:hover {
    background: rgba(58, 212, 125, 0.2) !important;
    border-color: rgba(58, 212, 125, 0.2) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #3ad47d !important;
    border-color: #3ad47d !important;
    color: #fff !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #3ad47d !important;
    border-color: #3ad47d !important;
    color: #fff !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.3) !important;
}

.flatpickr-day.today {
    border-color: rgba(58, 212, 125, 0.5) !important;
}

.flatpickr-input {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    border: none !important;
    height: 32px;
    padding: 0;
}

.flatpickr-input:focus {
    outline: none;
}

/* 체크박스 커스텀 스타일 */
.checkbox-area {
    display: flex;
    flex-direction: row;
    gap: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
}

.checkbox-area span {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.2s;
}

.checkbox-area input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.checkbox-area input[type="checkbox"]:checked {
    background-color: #3ad47d;
    border-color: #3ad47d;
    background-image: url("/images/icon-checkbox-on.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.checkbox-area input[type="checkbox"]:checked::after {
    display: none;
}

.checkbox-area span.checked {
    color: #3ad47d;
}

/* 조회 버튼 공통 스타일 */
.btn-search {
    background-color: #3ad47d;
    border: none;
    color: #fff;
    padding: 6px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-search:hover {
    background-color: #2fb869;
}

/* --- Common Components Refactoring Start --- */

/* Checkbox Item (Label wrapper) */
.checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.2s;
}

.checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    background-color: transparent;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.checkbox-item input[type="checkbox"]:checked {
    background-color: #3ad47d;
    border-color: #3ad47d;
    background-image: url("/images/icon-checkbox-on.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.checkbox-item input[type="checkbox"]:checked::after {
    display: none;
}

.checkbox-item span {
    color: rgba(255, 255, 255, 0.6);
}

.checkbox-item input[type="checkbox"]:checked + span {
    color: #3ad47d;
}

/* Custom Checkbox (Variant with checkmark span) */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    user-select: none;
    white-space: nowrap;
}

.custom-checkbox input {
    display: none;
}

.custom-checkbox .checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background-color: transparent;
}

.custom-checkbox input:checked + .checkmark {
    background-color: #00c853;
    border-color: #00c853;
    background-image: url("/images/icon-checkbox-on.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.custom-checkbox:hover .checkmark {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Dropdown (Common) */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    background-color: transparent;
    color: #fff;
    font-size: 13px;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    min-width: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.dropdown-btn:hover {
    background-color: #2a303c;
}

.dropdown-btn .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    margin-left: 6px;
    transition: transform 0.2s;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 34px;
    background-color: #1f2430;
    border-radius: 6px;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    width: 200px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 20;
}

.dropdown-menu li {
    color: #d3d6dc;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-menu li:hover {
    background-color: #2f3644;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown.open .arrow {
    transform: rotate(180deg);
}

/* Date Inputs */
.compare-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.compare-date label,
.date-label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.date-input {
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 4px 10px;
    height: 32px;
    transition: border-color 0.2s;
}

.date-input img,
.date-input-box img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    opacity: 0.8;
}

.date-input input,
.date-input-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #eaeaea;
    font-size: 13px;
    cursor: pointer;
}

.date-input input {
    width: 110px;
}

.date-input input::placeholder {
    color: #6c7385;
}

/* Date Group & Input Box (Variant) */
.date-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-inputs-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input-box {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    height: 32px;
}

.date-input-box input {
    width: 90px;
}

.date-tilde,
.date-separator {
    color: rgba(255, 255, 255, 0.5);
}

/* Buttons */
.floor-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 20px;
    position: absolute;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 60%;
    gap: 10px;
    height: 20px;
    cursor: pointer;
}

.detail-btn {
    background-color: #333947;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Loading Spinner */
#spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* 모달 위로 올라오게 */
    color: var(--main-color);
}