@charset "utf-8";
/* ============================================================================
   데이트피커(달력) 공통 스킨 — KRDS 룩
   ----------------------------------------------------------------------------
   [2026.08.13] 이용현황 화면(unified/usageStatus.jsp)에만 있던 스킨을 공통으로 승격.
     그 화면이 KRDS 스타일로 먼저 그려 놓았고, 값이 pub2026 토큰 기반이라 그대로 올렸다.

   ▶ 왜 화면이 아니라 공통인가
     달력 DOM 은 jQuery UI 가 <body> 직속에 하나만 만든다(#ui-datepicker-div).
     그래서 `.ui-datepicker` 규칙은 어느 JSP 안에 적든 **처음부터 전역**이다.
     화면마다 각자 그리면 화면 수만큼 같은 스킨이 복제될 뿐이라 공통이 정답이다.

   ▶ 엔진은 그대로 jQuery UI 다(교체 아님)
     호출부가 248건(초기화 ~150 · `"setDate"`/`"option"` 등 메서드 89)이라 엔진을 바꾸면 전부 다시 써야 한다.
     지금 필요한 건 '룩' 이므로 스킨만 KRDS 로 맞춘다.

   ▶ 로드 위치 = comn/fw/inc/commonJs.pub.jsp (퍼블 뼈대 전 화면 공통)
     ⚠guideTable.css **뒤**에 로드해야 한다 — 그 파일이 `.ui-datepicker-title select{width:35%}` 를 걸어
       연도가 "202" 로 잘린다(아래 min-width 보정과 한 세트).
     ⚠pub2026 CSS 에는 `.ui-datepicker` 규칙이 0건이라(전수확인) 퍼블 차수 전달분에 덮이지 않는다.

   ▶ 색·크기는 pub2026 토큰 + 폴백값. 폴백을 남겨 둔 이유는 퍼블 CSS 를 로드하지 않는
     레이아웃(온보딩·팝업·구 뼈대)에서 이 파일을 쓰게 되더라도 모양이 유지되게 하기 위함이다.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   달력 열기 버튼(플러그인이 자동 생성) — `showOn:"button"` 일 때 input 바로 뒤에 붙는다.
   [2026.08.13] 화면마다 제각각이던 아이콘을 여기서 한 번에 통일한다(마크업 수정 없음).

   🚨**`:has(img)` 로 좁힌 이유 — 이 클래스는 플러그인 전용이 아니다.**
     `.ui-datepicker-trigger` 를 **손으로 붙여 쓰는 화면이 있다**(wsearch 계열 10곳 :
     `<button class="ui-datepicker-trigger btn_date">` + `.btn_date` 가 배경이미지로 아이콘을 그림).
     여기에 무조건 `background:none` 을 주면 그 화면들의 **아이콘이 지워질 수 있다.**
     플러그인이 만든 것만 안에 `<img>` 를 갖고 있으므로, 그것만 골라 스킨을 건다.

   ⚠같은 이유로 **빈 버튼은 건드리지 않는다.** `datepickerOptNoBtn` 계열(약 67곳)은 buttonImage 없이
     빈 버튼을 만들어 두고 화면이 자체 아이콘으로 여는 방식이다. `:has(img)` 에 안 걸리므로
     **종전 그대로** 렌더된다(이번 변경으로 빈 네모가 새로 생길 일이 없다).

   ⚠간격은 `padding` 이 아니라 `margin-left` 로 준다 — 화면이 `#insertForm .ui-datepicker-trigger{margin-left:8px}`
     처럼 id 스코프로 간격을 잡아 둔 곳이 있는데(personalFixedChargeRequest·orgnInfoInsert),
     padding 이면 그 값에 **더해져** 벌어지고 margin 이면 화면 값이 이긴다.

   ※ 입력칸과 아이콘을 한 덩어리(테두리 안)로 묶는 건 껍데기(.form-calendar) 마크업이 필요하다.
     그건 화면별 작업이라 여기서 하지 않는다 — /sample/datepickerSample.do 의 ①~③ 참고.
   ---------------------------------------------------------------------------- */
.ui-datepicker-trigger:has(img){display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;margin-left:6px;border:0;background:none;vertical-align:middle;cursor:pointer;}
.ui-datepicker-trigger img{display:block;width:17px;height:17px;border:0;}
.ui-datepicker-trigger:has(img):is(:hover,:focus-visible) img{opacity:.7;}
.ui-datepicker-trigger:has(img):focus-visible{outline:2px solid var(--border-primary,#3b6fe0);outline-offset:2px;border-radius:var(--radius-sm,4px);}

.ui-datepicker{display:none;width:288px;padding:12px;z-index:1200 !important;border:1px solid var(--border-default,#d1d6db);border-radius:var(--radius-md,8px);box-shadow:0 6px 18px rgba(0,0,0,.12);background:var(--bg-default,#fff);font-size:14px;}
/* 🚨[2026.08.13] 헤더 밑 가로선·높이·옛 글꼴 제거.
   jQuery UI 는 달력 헤더 div 에 **`ui-widget-header` 클래스도 함께** 붙인다
   (`<div class="ui-datepicker-header ui-widget-header …">`).
   그런데 앱 옛 CSS 의 `guideTable.css:634 .ui-widget-header{…}` 는 **jQuery UI 다이얼로그 제목줄용**으로 만든 규칙이라
     height:36px · margin-bottom:10px · border-bottom:1px solid #dfdfdf · NanumGothicB 18px bold
   가 달력 헤더까지 따라온다 → **헤더 밑에 회색 가로선**이 생기고 높이가 36px 로 고정돼 세로 정렬도 어긋난다.
   `.ui-datepicker` 를 앞에 붙여 (0,2,0) > (0,1,0) 으로 이기므로 !important 는 필요 없다.
   ⚠다이얼로그(.ui-dialog)에는 영향 없다 — 달력 안으로만 스코프했다. */
.ui-datepicker .ui-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:6px;
	height:auto;margin-bottom:8px;border-bottom:0;
	font-family:inherit;font-size:inherit;font-weight:normal;line-height:normal;color:inherit;}
.ui-datepicker .ui-datepicker-title{display:flex;gap:6px;order:2;flex:1;justify-content:center;}
.ui-datepicker .ui-datepicker-title select{height:32px;padding:0 6px;border:1px solid var(--border-default-weak,#e5e8eb);border-radius:var(--radius-sm,4px);font-size:14px;background:var(--bg-default,#fff);}
/* guideTable.css 가 .ui-datepicker-title select 에 width:35% 를 걸어 연도가 "202" 로 잘린다 → 최소폭으로 보정 */
.ui-datepicker .ui-datepicker-year{min-width:88px;}
.ui-datepicker .ui-datepicker-month{min-width:70px;}

/* 🚨[2026.08.13] 연도·월 필드가 좌우 화살표보다 아래로 내려앉던 것 보정.
   ▶ 원인 : 앱 옛 CSS 가 이 영역을 **!important 로** 잡고 있다 —
       guideTable.css:623~625  .ui-datepicker .ui-datepicker-title,
                               .ui-datepicker select.ui-datepicker-month,
                               .ui-datepicker select.ui-datepicker-year{height:25px!important; font-family:'NanumGothicR'!important; font-size:15px!important; line-height:…!important}
     화살표 버튼은 32px 인데 이 셀렉트만 **25px 로 눌려** 세로 중심이 어긋났다. 폰트도 이 두 칸만 옛 글꼴이었다.
   ▶ 처리 : 같은 `!important` + 한 단계 높은 특이도(헤더를 끼워 (0,3,1))로 되돌린다.
     ⚠이 파일은 guideTable.css **뒤**에 로드돼야 이 보정이 성립한다(commonJs.pub.jsp 로드 순서 참고). */
.ui-datepicker .ui-datepicker-header .ui-datepicker-title{height:auto !important;align-items:center;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title select{height:32px !important;line-height:normal !important;font-family:inherit !important;font-size:14px !important;margin:0 !important;}

.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border-default-weak,#e5e8eb);border-radius:var(--radius-sm,4px);cursor:pointer;text-decoration:none;}
.ui-datepicker .ui-datepicker-prev{order:1;}
.ui-datepicker .ui-datepicker-next{order:3;}
.ui-datepicker .ui-datepicker-prev:hover,.ui-datepicker .ui-datepicker-next:hover{background:var(--bg-secondary-weak,#eef2f7);}
.ui-datepicker .ui-datepicker-prev.ui-state-disabled,.ui-datepicker .ui-datepicker-next.ui-state-disabled{opacity:.35;cursor:default;}
/* 화살표 : jQuery UI 의 .ui-icon 텍스트("Prev"/"Next")를 숨기고 CSS 화살표로 대체 */
.ui-datepicker .ui-icon{display:block;width:8px;height:8px;overflow:hidden;text-indent:-9999px;border-top:2px solid var(--text-default,#4e5968);border-left:2px solid var(--text-default,#4e5968);}
.ui-datepicker .ui-datepicker-prev .ui-icon{transform:rotate(-45deg);margin-left:3px;}
.ui-datepicker .ui-datepicker-next .ui-icon{transform:rotate(135deg);margin-right:3px;}

.ui-datepicker table{width:100%;margin:0;border-collapse:collapse;}
.ui-datepicker th{padding:6px 0;font-size:13px;font-weight:700;color:var(--text-subtle-strong,#6b7684);text-align:center;border:0;background:none;}
.ui-datepicker td{padding:1px;border:0;text-align:center;}
.ui-datepicker td a,.ui-datepicker td span{display:block;padding:7px 0;border-radius:var(--radius-sm,4px);font-size:14px;color:var(--text-default,#4e5968);text-decoration:none;}
.ui-datepicker td a:hover{background:var(--bg-secondary-weak,#eef2f7);}
.ui-datepicker td a:focus-visible{outline:2px solid var(--border-primary,#3b6fe0);outline-offset:-2px;}
/* 주말 색 : jQuery UI 의 .ui-datepicker-week-end 는 토·일 모두 붙으므로 열 위치로 구분한다(일=빨강, 토=파랑) */
.ui-datepicker td:first-child a{color:#c0281a;}
.ui-datepicker td:last-child a{color:#1d5bbf;}
.ui-datepicker th:first-child{color:#c0281a;}
.ui-datepicker th:last-child{color:#1d5bbf;}
.ui-datepicker td .ui-state-highlight{box-shadow:inset 0 0 0 1px var(--border-primary,#3b6fe0);}   /* 오늘 */
.ui-datepicker td .ui-state-active{color:#fff !important;font-weight:700;background:var(--bg-primary-strong,#1d3a8a);}  /* 선택일 */
.ui-datepicker td span.ui-state-default{color:var(--text-subtle,#8b95a1);}                          /* 선택 불가 */
