@charset "utf-8";
/*
 * 공용 date-picker(common/calendar.js .vdp-*) 스타일 — 레거시 jQuery UI datepicker 외형 대체.
 *
 * ★ 왜 별도 파일인가: 이 위젯의 **JS 는 관리자·프론트 두 페이지그룹이 함께 쓰는데**(프론트 모듈이
 *   `/_Adm/_Js/common/calendar.js` 를 import 한다) 스타일이 관리자 전용 `_Adm/_Css/common.css` 안에만
 *   있었다. 그래서 프론트에서는 달력이 **스타일 없이** 떴고, `.vdp-day` 가 inline 으로 깔려 날짜를
 *   누를 수 있는 자리가 숫자 글자 폭으로 줄어 있었다(2026-09-22 육안 제보 — 셀은 넓은데 숫자만 눌린다).
 *   공용 위젯의 스타일은 공용 파일에 둔다 — 쓰는 쪽이 각자 링크한다.
 *
 * 링크하는 곳: 관리자 = `_Adm/_Css/common.css` 첫 줄 @import · 프론트 = `site/layout.html` <link>.
 */

/* ============================================================
   공용 date-picker(common/calendar.js .vdp-*) — 레거시 jQuery UI datepicker 외형 대체.
   전 관리자 화면 input.calendar 공통(모듈별 복제 금지). 헤더=이전·연select·월select·다음 + 요일헤더 + 날짜 hover.
   ============================================================ */
/* 기본은 입력 바로 뒤 인라인(absolute)이고, 잘라내는 조상을 벗어나면 JS 가 body 로 올려
   position:fixed 로 바꾼다(calendar.js promoteToBodyIfClipped). z-index 는 프론트 페이지
   크롬(최대 9999)보다 위여야 올려도 가려지지 않는다. */
.vdp-pop {position:absolute;z-index:10000;top:0;left:0;margin-top:2px;width:18em;padding:.3em;background:#fff;border:1px solid #1b6fc7;box-shadow:0 2px 6px rgba(0,0,0,.2);font-family:"Nanum Square",Dotum,sans-serif;font-size:12px;box-sizing:border-box;}
.vdp-head {position:relative;display:flex;align-items:center;justify-content:center;gap:.25em;padding:.3em;background:#1b6fc7;}
.vdp-head select {height:1.9em;border:1px solid #175ba8;border-radius:2px;background:#fff;color:#222;font-size:12px;padding:0 .2em;cursor:pointer;}
.vdp-prev, .vdp-next {width:1.8em;height:1.8em;line-height:1.6em;text-align:center;background:transparent;border:0;color:#fff;font-weight:bold;cursor:pointer;font-size:14px;flex:0 0 auto;}
.vdp-grid {width:100%;border-collapse:collapse;table-layout:fixed;margin:0;}
.vdp-grid thead th {padding:.5em 0;text-align:center;font-weight:bold;font-size:11px;color:#333;border:0;background:#f6f6f6;}
.vdp-grid tbody td {padding:1px;text-align:center;border:0;}
.vdp-day {display:block;padding:.35em 0;text-align:center;text-decoration:none;color:#333;border:1px solid transparent;border-radius:2px;}
.vdp-day:hover {background:#e9f2fb;border-color:#1b6fc7;color:#1b6fc7;}
.vdp-off {color:#ccc;cursor:default;}
/* #18: 레거시 jQuery UI datepicker 토·일 색상(prgr.default.css:243-244 .ui-datepicker-week-end)
   — 일=1열 빨강, 토=7열 파랑. nth-child 고정(마지막 주가 7칸 미만이어도 실제 요일열만 매칭). */
.vdp-grid tbody td:nth-child(1) a.vdp-day {color:#ff0000;}
.vdp-grid tbody td:nth-child(7) a.vdp-day {color:#0066ff;}

/* ------------------------------------------------------------------
   소비 페이지그룹의 요소 규칙 중화.

   ★ 이 위젯은 두 페이지그룹에서 쓰이는데, 페이지그룹마다 `table`·`th`·`td` 에 자기 규칙이 걸려 있어
     위젯 **내부로 흘러든다**. 실제로 프론트에서는 표에 `min-width:780px` 가 걸려 있어 달력 표가
     팝업(18em=216px)보다 넓게 벌어졌고, 날짜 칸이 팝업 밖으로 나가 본문에 가려 **눌리지 않았다**
     (2026-09-22). 글자 크기·칸 여백도 페이지그룹 본문 값을 물려받아 칸이 필요 이상으로 커졌다.

   ★ 선택자 특이성을 **위젯 클래스를 겹쳐 올린다**(`.vdp-pop.vdp-pop`). 소비 페이지그룹의 규칙은
     `.블록 section.info table th` 처럼 클래스 둘+요소 둘이라, 위젯 클래스 하나로는 특이성에서 진다.
     겹쳐 쓰면 **소비 쪽 클래스 이름을 알지 않고도** 이기므로 다른 페이지그룹에도 그대로 통한다
     (`!important` 는 쓰지 않는다 — 나중에 정당한 재정의까지 막는다).

   공용 위젯의 스타일시트는 **자기 내부에 필요한 값을 스스로 다 적는다** — 어느 페이지그룹에 실려도
   같은 꼴이 나와야 한다. 새 속성이 새어 들어오면 여기에 더한다.
   ------------------------------------------------------------------ */
.vdp-pop.vdp-pop .vdp-grid {width:100%;min-width:0;max-width:none;margin:0;border-collapse:collapse;table-layout:fixed;}
.vdp-pop.vdp-pop .vdp-grid thead th {min-width:0;height:auto;padding:.5em 0;font-size:11px;line-height:1.3;white-space:nowrap;word-break:normal;letter-spacing:0;}
.vdp-pop.vdp-pop .vdp-grid tbody td {min-width:0;height:auto;padding:1px;font-size:11px;line-height:1.3;white-space:nowrap;word-break:normal;letter-spacing:0;}
.vdp-pop.vdp-pop .vdp-day {font-size:12px;line-height:1.3;}
.vdp-pop.vdp-pop select {max-width:none;min-width:0;}