/* 날짜 피커 — 서비스 레포 common.css 의 피커 절 사본이다(js/datepicker.js 와 한 쌍).

   ★ 서비스 토큰(--hc-*, --white, --sab, --sidebar-w)을 어드민 토큰으로 여기서 갈아 끼운다.
     사본 본문은 손대지 않는다 — 본문을 고치면 다음에 서비스 쪽 변경을 옮겨 올 때 diff 가 안 맞는다.
     c-select 가 ShadowDOM 변수를 매핑한 것과 같은 방법이고, 이유도 같다. */
.dtp_trig,
.pk_ov {
    --hc-text  : var(--t1);
    --hc-text2 : var(--t2);
    --hc-text3 : var(--t3);
    --hc-card  : var(--card);
    --hc-line  : var(--line);
    --hc-soft  : var(--soft);
    --hc-sel   : var(--accent);
    --white    : #FFF;
    --sab      : 0px;
    --sidebar-w: 0px;   /* 사본의 데스크탑 분기가 쓰는 값 — 어드민은 아래에서 팝오버로 덮으므로 0 이면 된다 */

    --brand-coral-ink: var(--accent-ink);
}

/* ===== 날짜·시간 피커 (캘린더 팝오버 + 시간 휠) — 네이티브 date/time input 대체, 전 화면 공통 =====
   마크업: <input type="hidden" id="{id}"> + <button type="button" class="dtp_trig" data-dtp="date|time" data-target="{id}">선택</button>
   오버레이(#pk_date_ov/#pk_time_ov)는 common.js 가 body 에 1회 생성. 값/표시/onchange 동기화도 common.js 담당. */

/* 캘린더 색 토큰(--cal-*) 단일 소스 — 일정 달력(.cal)·시트(.sheet_ov)·날짜 피커(.pk_ov) 공용. 두 곳 정의 드리프트 방지 */
.cal, .sheet_ov, .pk_ov {
    --cal-acc     : var(--brand-coral-ink);  /* 강조(오늘·선택·열림) — 코랄(구 퍼플 #6B5A86) */
    --cal-acc-bg  : rgba(240, 120, 79, .12);
    --cal-today   : #FF7A66;  /* 오늘 셀 마커 — 코랄 */
    --cal-today-sh: rgba(255, 122, 102, .45);
    --cal-sat     : #3F6FB5;  /* 토요일 — 파랑(관례) */
    --cal-sun     : #BC4A68;  /* 일요일·공휴일 — 로즈 */
}

[data-theme="dark"] .cal, [data-theme="dark"] .sheet_ov, [data-theme="dark"] .pk_ov {
    --cal-acc     : #F0A579;  /* 다크 — 밝은 코랄(구 라벤더) */
    --cal-acc-bg  : rgba(240, 120, 79, .18);
    --cal-today   : #E8856E;
    --cal-today-sh: rgba(255, 122, 102, .28);
    --cal-sat     : #8FB0E8;
    --cal-sun     : #F0A9C1;
}

/* 트리거 — 기존 input 자리에 얹는 보더리스 클릭 필드(호스트 박스 유지). 값/플레이스홀더 + 우측 아이콘 */
.dtp_trig {
    display    : flex;
    align-items: center;
    width      : 100%;
    border     : none;
    background : none;
    padding    : 0;
    margin     : 0;
    text-align : left;
    font-family: inherit;
    font-size  : 15.5px;
    font-weight: 600;
    color      : var(--hc-text);
    cursor     : pointer;
}
.cell_main .dtp_trig { font-size: 14px; }  /* 2열 셀 안 — 기존 .cell_main input 톤 */
.dtp_trig.ph         { color: var(--hc-text3); font-weight: 600; }  /* 미선택 = 플레이스홀더 */
.dtp_trig.open       { color: var(--cal-acc, var(--hc-sel)); }  /* 피커 열림 강조 (--cal-acc 없는 화면은 --hc-sel 폴백) */
.dtp_trig .pk_txt    { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dtp_trig .pk_ico {
    margin-left : auto;
    padding-left: 8px;
    font-size   : 16px;
    opacity     : .85;
    flex-shrink : 0;
    display     : flex;
    align-items : center;
}

/* 바텀 팝오버 — 폼 시트(z 1000)·삭제 시트(1100) 위로 */
.pk_ov {
    position       : fixed;
    inset          : 0;
    z-index        : 1600;
    background     : rgba(40, 30, 50, .34);
    backdrop-filter: blur(2px);
    display        : none;
    align-items    : flex-end;
    justify-content: center;
}
.pk_ov.show { display: flex; }
.pk_pop {
    width        : 100%;
    max-width    : 440px;
    max-height   : 92vh;  /* 월/년 그리드 길어져도 화면 밖으로 안 넘치게 */
    overflow-y   : auto;
    background   : var(--hc-card);
    border-radius: 22px 22px 0 0;
    box-shadow   : var(--shadow-md);
    padding      : 8px 16px calc(18px + var(--sab, env(safe-area-inset-bottom)));
    transform    : translateY(14px);
    opacity      : 0;
    transition   : transform .22s cubic-bezier(.22, .9, .3, 1), opacity .22s;
}
.pk_ov.show .pk_pop { transform: none; opacity: 1; }
.pk_grab { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--hc-line); margin: 4px auto 12px; }

/* 데스크탑/패드 — 바텀시트 대신 가운데 모달. 백드롭은 viewport 전체(사이드바까지 흐림), 팝업만 padding-left 로 콘텐츠 영역 가운데 */
@media (min-width: 768px) {
    .pk_ov  { align-items: center; padding-left: var(--sidebar-w, 0px); }
    .pk_pop { max-width: 380px; border-radius: 18px; padding: 16px 18px 18px; transform: scale(.96); }
    .pk_ov.show .pk_pop { transform: scale(1); }
    .pk_grab { display: none; }  /* 바텀시트 핸들 — 모달에선 불필요 */
}

/* 캘린더 */
.pk_cal_nav   { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.pk_cal_arrow {
    width          : 36px;
    height         : 36px;
    border-radius  : var(--radius-pill);
    border         : none;
    background     : var(--hc-soft);
    color          : var(--hc-text);
    font-size      : 18px;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
}
.pk_cal_arrow:active { transform: scale(.92); }
/* 년월 라벨 — 계층 네비 버튼(일→월→년). 클릭하면 한 단계 위 뷰로 */
.pk_cal_ym {
    border        : none;
    background    : none;
    font-family   : inherit;
    font-size     : 16px;
    font-weight   : 700;
    letter-spacing: -.3px;
    color         : var(--hc-text);
    cursor        : pointer;
    padding       : 6px 12px;
    border-radius : var(--radius-pill);
    transition    : background-color .12s;
}
.pk_cal_ym:active { transform: scale(.96); }
.pk_grid          { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pk_dow           { text-align: center; font-size: 11px; font-weight: 600; color: var(--hc-text3); padding: 4px 0 8px; }
.pk_dow.sun       { color: var(--cal-sun); }
.pk_dow.sat       { color: var(--cal-sat); }
.pk_cell {
    aspect-ratio   : 1 / 1;
    border         : none;
    background     : transparent;
    border-radius  : 13px;
    font-family    : inherit;
    font-size      : 14px;
    font-weight    : 600;
    color          : var(--hc-text);
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    position       : relative;
    transition     : background-color .12s;
}
.pk_cell.sun                { color: var(--cal-sun);                                }
.pk_cell.sat                { color: var(--cal-sat);                                }
.pk_cell.muted              { color: var(--hc-text3); opacity: .4; cursor: default; }
.pk_cell:not(.muted):active { background: var(--hc-soft);                           }
.pk_cell.today::after {
    content      : "";
    position     : absolute;
    bottom       : 6px;
    width        : 4px;
    height       : 4px;
    border-radius: 50%;
    background   : var(--hc-sel);
}
.pk_cell.sel                       { background: var(--grad-btn); color: var(--white); box-shadow: none; }
.pk_cell.sel.sun, .pk_cell.sel.sat { color: var(--white);                                                }
.pk_cell.sel.today::after          { background: var(--white);                                           }

/* 월 선택 / 년 선택 뷰 — 3×4 그리드(헤더 라벨·화살표는 공유) */
.pk_month_grid,
.pk_year_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 2px 0 2px; }
.pk_mcell,
.pk_ycell {
    height         : 52px;
    border         : 1.5px solid transparent;
    background     : var(--hc-soft);
    border-radius  : 14px;
    font-family    : inherit;
    font-size      : 15px;
    font-weight    : 600;
    color          : var(--hc-text);
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : background-color .12s, transform .12s;
}
.pk_mcell:active,
.pk_ycell:active { transform: scale(.95); }
.pk_mcell.today,  /* 오늘이 속한 월/년 — 테두리 강조 */
.pk_ycell.today {
    border    : 1.5px solid var(--cal-acc);
    background: transparent;
    color     : var(--hc-text);  /* 글자는 일반색(가독) — 오늘 표시는 코랄 테두리로 */
}
.pk_mcell.sel,  /* 현재 선택된 값의 월/년 — CTA 채움 */
.pk_ycell.sel {
    border    : 1.5px solid transparent;
    background: var(--grad-btn);
    color     : var(--white);
    box-shadow: none;  /* 글로우 제거 — 테두리 헤일로 어색함 해소, 연코랄 단색 채움 */
}
.pk_today_btn {
    margin-top   : 14px;
    width        : 100%;
    height       : 46px;
    border-radius: var(--radius-btn);
    border       : 1.5px solid var(--hc-line);
    background   : var(--hc-soft);
    color        : var(--hc-text);
    font-family  : inherit;
    font-size    : 14px;
    font-weight  : 600;
    cursor       : pointer;
}

/* 시간 휠 */
.pk_wheel_labels      { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }

.pk_wheel_labels span {
    flex       : 1;
    max-width  : 120px;
    text-align : center;
    font-size  : 12px;
    font-weight: 600;
    color      : var(--hc-text3);
}

.pk_wheel_labels .gap { max-width: 14px; }
.pk_wheel_wrap        { position: relative; display: flex; gap: 6px; margin: 6px 0 4px; justify-content: center; }
.pk_wheel_band {
    position      : absolute;
    left          : 8px;
    right         : 8px;
    top           : 50%;
    height        : 44px;
    transform     : translateY(-50%);
    border-radius : 14px;
    background    : var(--hc-soft);
    pointer-events: none;
    z-index       : 0;
}
.pk_wheel {
    position           : relative;
    z-index            : 1;
    height             : 220px;
    overflow-y         : scroll;
    overflow-x         : hidden;   /* .on scale(1.08) 가로 오버플로가 가로 스크롤 영역을 만들어 세로 드래그 중 좌우 흔들림 — 차단 */
    overscroll-behavior: contain;  /* 휠 끝에서 시트·배경으로 스크롤 전파 차단 */
    touch-action       : pan-y;
    scroll-snap-type   : y proximity;   /* mandatory 는 손 떼는 즉시 가장 가까운 칸으로 당겨 관성이 붙을 틈이 없다(뚝뚝 끊김). proximity 는 길게 미끄러지고 근처에 오면 붙는다 — 어중간하게 멎으면 JS(pkRecenter)가 정렬 */
    flex               : 1;
    max-width          : 120px;
    text-align         : center;
    scrollbar-width    : none;
    -webkit-mask       : linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
            mask       : linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.pk_wheel::-webkit-scrollbar { display: none; }
.pk_wheel .pk_pad            { height: 88px;  }
.pk_opt {
    height           : 44px;
    line-height      : 44px;
    scroll-snap-align: center;
    font-size        : 19px;
    font-weight      : 600;
    color            : var(--hc-text3);
    transition       : color .12s, transform .12s;
    cursor           : pointer;
}
.pk_opt.on { color: var(--hc-sel); font-weight: 700; transform: scale(1.08); }

.pk_colon {
    align-self : center;
    z-index    : 1;
    font-size  : 20px;
    font-weight: 700;
    color      : var(--hc-text2);
    padding    : 0 2px;
}

.pk_confirm_btn {
    margin-top   : 14px;
    width        : 100%;
    height       : 50px;
    border-radius: var(--radius-btn);
    border       : none;
    background   : var(--grad-btn);  /* 로그인 버튼과 동일 연코랄 */
    color        : var(--white);
    font-family  : inherit;
    font-size    : 15px;
    font-weight  : 600;
    box-shadow   : var(--shadow-btn);
    cursor       : pointer;
}
.pk_confirm_btn:active { transform: scale(.98); }


/* ═══ 어드민 오버라이드 — 여기부터는 사본이 아니다 ═══

   서비스는 이 피커를 딤 + 블러가 깔린 가운데 모달로 연다. 모바일에서 화면을 다 쓰는 시트라 맞는 모양이고,
   어드민에서는 필터바 한 칸을 고르는 일이라 화면을 통째로 덮을 무게가 아니다 — 트리거 바로 아래 팝오버로 연다.
   좌표는 CSS 가 알 수 없어 js/datepicker.js 끝의 어드민 블록이 잡아 준다.

   ★ 사본 본문은 고치지 않고 여기서 덮는다. 본문을 손대면 다음에 서비스 쪽 변경을 옮겨 올 때 diff 가 안 맞는다. */

/* 트리거 = 박스. 사본은 보더리스 클릭 영역이라(호스트 input 안에 얹히는 서비스 구조) 어드민이 쓸 모양이
   없어 화면마다 테두리·배경·글자를 복붙하던 자리 — 모양은 여기 한 번만, 화면은 앉을 치수만 덮기. */
.dtp_trig {
    height       : 38px;
    padding      : 0 11px;
    border       : 1px solid var(--line2);
    border-radius: 10px;
    background   : var(--card);
    font-size    : var(--text-sm);
    font-weight  : 500;
    transition   : border-color .15s;
}
.dtp_trig.ph       { font-weight: 500;                                                             }
.dtp_trig .pk_ico  { font-size: 14px; opacity: 1; color: var(--t3);                                }
.dtp_trig:disabled { background: var(--soft); color: var(--t3); cursor: default;                   }

/* 딤·블러를 걷는다 — 껍데기는 남긴다. 바깥 클릭으로 닫는 길이 이 요소를 타기 때문이다 */
.pk_ov {
    background     : none;
    backdrop-filter: none;
    align-items    : flex-start;
    justify-content: flex-start;
    padding-left   : 0;
}

/* 좌표는 스크립트가 넣는다(position: fixed + left/top). 여기서는 팝오버 모양만 준다 */
.pk_pop {
    position     : fixed;
    width        : 250px;
    max-width    : none;
    max-height   : 360px;   /* 안전망 — 아래 치수라면 일·월·년 어느 뷰도 여기에 안 닿는다 */
    border       : 1px solid var(--line2);
    border-radius: 14px;
    padding      : 10px 12px 12px;
    transform    : translateY(-4px);
}

.pk_ov.show .pk_pop { transform: none; }
.pk_grab            { display: none; }   /* 바텀시트 손잡이 — 팝오버엔 잡을 것이 없다 */

/* 치수 — 사본은 모바일 터치 규격이다(화살표 36 · 년월 칩 52 · 셀 14px). 손가락으로 누르는 크기라 그 화면에선 맞다.
   어드민은 마우스로 필터 한 칸을 고르는 자리라 그대로 쓰면 년 뷰에서 스크롤이 생기고 팝오버가 화면을 덮는다.
   전부 한 단계씩 줄여 세 뷰(일·월·년) 모두 스크롤 없이 들어가게 맞춘다. */
.pk_cal_nav    { margin: 0 0 8px;                                                                  }
.pk_cal_arrow  { width: 26px; height: 26px; font-size: 15px;                                       }
.pk_cal_ym     { padding: 4px 9px; font-size: 14px;                                                }
.pk_dow        { padding: 2px 0 5px; font-size: 10px;                                              }
.pk_cell       { border-radius: 9px; font-size: 13px;                                              }
.pk_cell.today::after { bottom: 4px; width: 3px; height: 3px;                                      }

.pk_month_grid,
.pk_year_grid  { gap: 6px;                                                                         }
.pk_mcell,
.pk_ycell      { height: 36px; border-radius: 10px; font-size: 13px;                               }

/* 시간 휠 — 사본은 터치 규격(칸 44 · 숫자 19px). 마우스로 고르는 자리라 날짜 셀(36px · 13px)과 같은 자로.
   숫자는 고르는 값 자체라 셀보다 한 단 크게. pad 64 = (160 − 32) ÷ 2 로 밴드가 휠 정가운데. */
.pk_wheel_labels span { font-size: 11px;                                                           }
.pk_wheel      { height: 160px; max-width: 84px;                                                   }
.pk_wheel .pk_pad { height: 64px;                                                                  }
.pk_wheel_band { height: 32px;                                                                     }
.pk_opt        { height: 32px; line-height: 32px; font-size: 14px;                                 }
.pk_colon      { font-size: 15px;                                                                  }
.pk_confirm_btn { margin-top: 10px; height: 36px; font-size: 13px;                                 }
#pk_time_ov .pk_pop { width: 210px;                                                                }