/* ==========================================================================
   날짜 선택 달력 (jQuery UI datepicker) — 리디자인

   실측(리디자인 전):
     #ui-datepicker-div  width 330 고정 / border 1px solid #2b2d3a / radius 0 /
                         그림자 없음 / font-family Verdana / font-size 15
     이전·다음달          .ui-icon-circle-triangle-w::before { content:'<' } 텍스트 부등호
     선택된 날            밝은 파랑 사각형
   화면 다른 컨트롤이 전부 radius 10 / 시스템 폰트인데 이것만 90년대 위젯이었다.

   스코프 주의
     위젯은 jQuery 가 body 끝에 하나 만들어 붙인다(#ui-datepicker-div).
     #container 안이 아니므로 페이지 스코프로는 닿지 않는다.
     대신 이 달력을 쓰는 화면은 셋뿐이다(결제내역 · 광고문의 현황 ·
     순위추적 결제 — 마지막은 진입 차단). 그래서 전역으로 둬도
     리디자인 제외 페이지에는 나타나지 않는다.

   기능은 건드리지 않는다. 클래스는 jQuery 가 붙이는 것을 그대로 쓴다.
     .ui-state-default  날짜 링크
     .ui-state-active   선택된 날
     .ui-state-highlight / .ui-datepicker-today  오늘
     .ui-state-disabled  선택 불가
   ========================================================================== */

#ui-datepicker-div.ui-datepicker {
    /* 레거시는 width:330px !important. auto 로 풀면 절대배치라
       내용이 아니라 남은 자리를 다 먹어(실측 1099px) 표가 늘어진다.
       고정 폭을 유지하고 값만 줄인다. */
    width: 316px !important;
    padding: 12px;
    border: 1px solid var(--mc-border, #e7ebf5);
    border-radius: var(--mc-radius, 16px);
    background: var(--mc-surface, #fff);
    box-shadow: 0 18px 40px -18px rgba(11, 18, 32, .28),
                0 2px 6px rgba(11, 18, 32, .06);
    font-family: inherit;
    font-size: 14px;
    color: var(--mc-body, #4a5468);
}

/* ---- 머리글 ---- */
#ui-datepicker-div .ui-datepicker-header {
    position: relative;
    padding: 2px 0 10px;
    border: 0;
    background: none;
}

#ui-datepicker-div .ui-datepicker-title {
    margin: 0 40px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mc-ink, #0b1220);
}

    /* 연·월이 각각 span 이다. 레거시가 연도를 float:left !important 로
       왼쪽에 붙여 놨는데 가운데 정렬을 쓰려면 풀어야 한다. */
    #ui-datepicker-div .ui-datepicker-title > span {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

/* ---- 이전 / 다음 달 ---- */
#ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) {
    position: absolute;
    top: 2px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--mc-radius-sm);
    background: none;
    cursor: pointer;
    transition: background .15s ease;
}

    #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next):hover {
        background: var(--mc-tint, #f4f7fe);
    }

#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }

    /* 레거시는 부등호 글자('<' '>')를 ::before 로 넣는다.
       글자 대신 선 두 개로 그린 꺾쇠를 쓴다. */
    #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) .ui-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 9px;
        height: 9px;
        margin: -5px 0 0 -5px;
        overflow: visible;
        text-indent: -9999px;
    }

        #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) .ui-icon::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 9px;
            height: 9px;
            border: 0;
            border-top: 1.8px solid var(--mc-body, #4a5468);
            border-right: 1.8px solid var(--mc-body, #4a5468);
            border-radius: 1px;
            font-size: 0;
        }

        #ui-datepicker-div .ui-datepicker-prev .ui-icon::before {
            transform: rotate(-135deg);
        }

        #ui-datepicker-div .ui-datepicker-next .ui-icon::before {
            transform: rotate(45deg);
        }

/* ---- 달력 표 ---- */
#ui-datepicker-div .ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

/* 요일 줄 회색 띠는 thead 에 깔려 있다(#f2f3f5). th 만 지워도 안 사라진다. */
#ui-datepicker-div .ui-datepicker-calendar thead,
#ui-datepicker-div .ui-datepicker-calendar thead tr {
    border: 0;
    background: none;
}

#ui-datepicker-div .ui-datepicker-calendar th {
    padding: 0 0 6px;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--mc-muted, #7c87a0);
    text-align: center;
}

    #ui-datepicker-div .ui-datepicker-calendar th.ui-datepicker-week-end {
        color: var(--mc-red, #e5484d);
    }

#ui-datepicker-div .ui-datepicker-calendar td {
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
}

    /* 날짜 한 칸 = 정사각형. a 와 span(선택 불가)이 같은 모양이어야
       빈 칸에서 격자가 흔들리지 않는다. */
    #ui-datepicker-div .ui-datepicker-calendar td > :is(a, span) {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: var(--mc-radius-sm);
        background: none;
        font-size: 14px;
        font-weight: 500;
        color: var(--mc-ink, #0b1220);
        text-align: center;
        text-decoration: none;
        transition: background .12s ease, color .12s ease;
    }

        #ui-datepicker-div .ui-datepicker-calendar td > a:hover {
            background: var(--mc-tint, #f4f7fe);
        }

        /* 주말 */
        #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end > :is(a, span) {
            color: var(--mc-red, #e5484d);
        }

        /* 오늘 — 테두리로만 표시한다. 채우면 선택과 구분이 안 된다. */
        #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today > :is(a, span),
        #ui-datepicker-div .ui-datepicker-calendar td > .ui-state-highlight {
            border-color: var(--mc-border, #e7ebf5);
            background: none;
            font-weight: 700;
        }

        /* 선택된 날.
           주말 규칙(td.ui-datepicker-week-end > :is(a, span))이 클래스+타입을
           하나 더 가져서 특이도로 이긴다. 실측: 파란 배경에 글자가 빨강이었다.
           주말 칸도 함께 집어 같은 무게로 맞춘다. */
        /* 오늘이 선택된 날이면 위 '오늘' 규칙(td.ui-datepicker-today > :is(a, span), 1,2,2)이
           이 규칙(1,2,1)을 이겨 background: none 이 되고 글자만 흰색으로 남아 숫자가
           사라졌다(종료일 기본값이 오늘이라 결제내역 종료일 달력에서 늘 보였다).
           today + active 조합을 따로 적어 특이도(1,3,1)로 이긴다. */
        #ui-datepicker-div .ui-datepicker-calendar td > .ui-state-active,
        #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end > .ui-state-active,
        #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today > .ui-state-active {
            border-color: transparent;
            background: var(--mc-blue, #2b5bff);
            color: #fff;
            font-weight: 700;
        }

        /* 선택 불가 · 다른 달 */
        #ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled > :is(a, span),
        #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month > :is(a, span) {
            background: none;
            color: var(--mc-muted, #7c87a0);
            opacity: .45;
        }

/* ---- 아래 버튼줄 (오늘 / 닫기) ---- */
#ui-datepicker-div .ui-datepicker-buttonpane {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--mc-border, #e7ebf5);
}

    #ui-datepicker-div .ui-datepicker-buttonpane button {
        height: 34px;
        padding: 0 14px;
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius-sm);
        background: var(--mc-surface, #fff);
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        color: var(--mc-body, #4a5468);
        cursor: pointer;
    }

/* ---- 위치 ----
   레거시(bundle.css)가 조회 달력을 옛 PC 레이아웃에 맞춰 왼쪽으로 당겨 뒀다.
     .history_datepicker_from { margin: 6px 0 0 -75px }
     .history_datepicker_to   { margin: 6px 0 0 -175px }
   리디자인 후 조회 줄 배치가 바뀌어 이 값이 어디에도 안 맞는다. 실측(서비스 결제내역)
     390px  시작일 달력 왼쪽 58px · 종료일 101px 이 화면 밖으로 잘렸다
     360px  58px · 131px 잘림        768px 시작일 58px 잘림
     1440px 화면 안이지만 입력칸보다 75 · 175px 왼쪽에 떴다
   당김을 지워 입력칸 바로 아래 왼쪽에 붙인다. 오른쪽으로 넘칠 때는
   jQuery UI 가 스스로 안으로 밀어 넣는다(_checkOffset). */
#ui-datepicker-div:is(.history_datepicker_from, .history_datepicker_to) {
    margin: 6px 0 0;
}

@media (max-width: 480px) {

    /* 좁은 화면에서 330px 짜리가 화면을 넘겼다. 자리에 맞춘다. */
    #ui-datepicker-div.ui-datepicker {
        width: calc(100vw - 24px) !important;
        max-width: 316px;
    }

    /* 칸이 화면 폭을 나눠 쓰는 폭이라 종료일 칸 아래에 맞추면 오른쪽 끝에 붙고,
       _checkOffset 이 밀어 넣으면 좌우 여백 없이 화면 끝에 닿는다.
       달력이 화면 폭에 가까우므로(316 / 360~480) 가운데에 세운다.
       left 는 jQuery 가 인라인으로 박으므로 !important 로 받는다. */
    #ui-datepicker-div.ui-datepicker {
        left: 50% !important;
        transform: translateX(-50%);
    }
}