/* ============================================================
 * 관리자(내부망) 전용 스타일 - itp.css 다음에 로드 (AdminGlobalModel.appCss → layout/head)
 *  - 기준 해상도 1920x1080: 표·필터 위주라 공용(포털) 크기보다 글자·여백을 한 단계 키운다
 *  - 반응형: 헤더 햄버거 메뉴, 검색 폼 줄바꿈, 좁은 화면 달력 압축
 *  ※ itp.css 의 반응형 규칙과 겹치는 속성(사이드바 폭, 달력 칸 높이)은 넓은 화면에서만 덮어쓴다
 * ============================================================ */

/* 한글은 띄어쓰기 단위로만 줄바꿈 (좁은 표 칸에서 "구조분/석"처럼 단어 중간이 끊기지 않게).
   띄어쓰기 없는 긴 문자열은 넘치지 않도록 그때만 끊는다 */
body{word-break:keep-all;overflow-wrap:break-word;}

/* ───────── 폭: 1920 화면에서 표가 넉넉하도록 ───────── */
.itp-header.admin .inner,
.itp-container,
.itp-subnav .inner{max-width:1600px;}

/* ───────── 헤더 / 메뉴 ───────── */
.itp-header.admin .inner{height:80px;}
.itp-header.admin .itp-logo .logo-img{height:36px;}
.itp-header.admin .itp-nav{gap:6px;}
.itp-header.admin .itp-nav a{font-size:18px;padding:10px 16px;gap:7px;}
.itp-header.admin .itp-nav a i{font-size:20px;}
.itp-header.admin .itp-nav a.active::after{left:16px;right:16px;bottom:-6px;}
.itp-header.admin .util{font-size:16px;padding:9px 14px;}
.itp-header.admin .mobile-menu{top:80px;}
.mobile-menu .mobile-user{display:flex;align-items:center;gap:8px;padding:12px 16px 10px;font-size:16px;font-weight:700;
    color:var(--navy);border-bottom:1px solid var(--line);margin-bottom:6px;}
.mobile-menu .mobile-user i{color:var(--blue-500);font-size:19px;}
.mobile-menu a{font-size:17px;}
.mobile-menu a.active{background:var(--blue-50);color:var(--blue-700);}

/* ───────── 제목 · 안내 ───────── */
.section-title{font-size:24px;}
.section-title::before{height:24px;}
.msg{font-size:16.5px;}

/* ───────── 표 ───────── */
/* 표가 화면보다 넓으면 표만 가로 스크롤 (페이지 전체가 밀려 모바일에서 축소 표시되는 것 방지) */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* 대시보드 2단(대기 처리 / 인기 장비): 칸이 표 내용 폭에 끌려 넓어지지 않게 */
.adb-2>*{min-width:0;}
.adb-2.single{grid-template-columns:1fr;}   /* '대기 신청 바로 처리' 위젯 한 칸 전체(포털 오픈 후, 인기 장비 TOP 5 는 제거) */
.tbl th,.tbl td{padding:15px 18px;font-size:17px;}
.tbl thead th{font-size:16px;}
.badge{font-size:15px;padding:5px 12px;}
.reason-link{font-size:14.5px;padding:5px 11px;}
.wf-actions .btn,.wf-actions .reason-link{font-size:15px;}
/* 신청 목록·대시보드 → 신청 상세 링크 */
.aal-link{color:var(--navy);font-weight:600;}
.aal-link:hover{color:var(--blue-700);text-decoration:underline;}
/* 대시보드 대기 신청: LIMS 일정을 못 만들어 대기로 남은 건 */
.adb-lims-fail{margin-left:6px;font-size:12.5px;padding:2px 8px;vertical-align:middle;}
/* 신청 상세: 신청 내용 표(항목명 칸) */
.aav-info th{width:170px;background:#f7f9fc;color:var(--ink-soft);font-weight:700;font-size:16px;white-space:nowrap;}
.aav-purpose{white-space:pre-wrap;line-height:1.7;}
.aav-kind{color:var(--ink-soft);word-break:keep-all;}   /* 장비별 처리의 분류 경로 - 장비명보다 옅게 */

/* ───────── 버튼 · 칩 · 폼 ───────── */
.btn{font-size:17px;}
.btn.sm{font-size:16px;padding:8px 15px;}
.chip{font-size:16px;padding:7px 15px;}
.form-group label{font-size:16px;}
.form-control{font-size:17px;padding:12px 14px;}
/* 서버가 채우는 값(입력 없음, 예약 대행 등록의 소속 기관·신청자 이메일) - 입력칸과 같은 높이의 글자 */
.form-static{padding:12px 14px;border:1px solid transparent;border-radius:10px;background:#f3f6fa;color:#1f2937;font-size:17px;line-height:1.2;word-break:break-all;}
.form-static.empty{color:#8a94a3;}
.list-head-right .search-input{width:260px;}
.list-head-right .search-date{width:165px;}
.pager .pg{min-width:42px;height:42px;font-size:16.5px;}

/* ───────── 목록 검색 영역 (신청 관리): 회색 박스 안에 [처리 상태 | WizFlow] / [이용일 · 검색어 · 버튼] ───────── */
.search-panel{display:flex;flex-direction:column;gap:14px;margin:0 0 20px;padding:18px 22px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);}
.search-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;}
.search-label{flex:none;min-width:80px;font-size:15.5px;font-weight:700;color:var(--ink-soft);}
.search-field+.search-label{margin-left:20px;min-width:0;}
.search-row .chip-group{gap:6px;}
.search-row .chip{margin:0;background:#fff;}
.search-row .chip.active{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}
.search-sep{flex:none;width:1px;height:24px;background:#d5dde6;margin:0 10px;}
.search-field{display:flex;align-items:center;gap:8px;min-width:0;}   /* 좁은 화면에서 날짜 두 칸이 함께 줄어들도록 */
.search-panel .form-control{background:#fff;}
.search-panel .search-date{width:170px;}
.search-panel .search-keyword{width:320px;}
.search-actions{display:flex;gap:8px;margin-left:auto;}
/* 건수 (일괄 처리 바 왼쪽) */
.list-count{font-size:16px;color:var(--ink-soft);}
.list-count b{color:var(--navy);font-weight:800;}

/* ───────── 대시보드 KPI ───────── */
.kpi .ico{width:52px;height:52px;font-size:25px;}
.kpi .v{font-size:32px;}
.kpi .l{font-size:16px;}

/* ───────── 예약 현황 달력 ───────── */
.cal-title{font-size:25px;}
.cal-title .nav-btn{width:38px;height:38px;font-size:22px;}
.cal-legend{font-size:15.5px;}
.cal-grid .dow{font-size:16px;padding:12px 0;}
.cal-cell .daynum{font-size:16px;}
.cal-cell.today .daynum{width:30px;height:30px;}
.cal-evt{font-size:14.5px;padding:3px 8px;}
.cal-more{font-size:14px;}
.cal-pop{width:380px;}
.cal-pop-head{font-size:17.5px;}
.cal-pop-head span{font-size:15px;}
.cal-pop-item{font-size:15.5px;}
/* 장비명(설치위치)가 길어 잘리지 않게 줄바꿈 */
.cal-pop-item .nm{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;}
.cal-pop-item .badge{font-size:13.5px;}

/* ───────── 장비 목록 필터 · 예약 등록 트리 ───────── */
.filter>summary{font-size:18px;}
.filter-label{font-size:16px;}
.ftree-row{font-size:16px;}
.ftree-count{font-size:14px;}
.tree-head,.equip-check,.pick-head,.selected-item{font-size:16px;}
/* 예약 등록 분류 체크박스 - 하위 장비 일괄 선택 (누를 때 분류 접힘은 막음) */
.kind-check{flex:none;margin:0;width:16px;height:16px;cursor:pointer;}
.kind-check:disabled{cursor:default;}
.equip-check-kind,.pick-cnt{font-size:14px;}
.tree-badge{font-size:13.5px;}
/* 예약 등록: 오른쪽 '선택한 장비' 상자를 왼쪽 분류 트리 높이에 맞춤 */
.apply-pick-col .selected-box{flex:1;margin-top:8px;}

/* ───────── 서브탭(메일 로그 / 알림 수신) · 로그인 ───────── */
.itp-subnav a{font-size:18px;}
.login-card{max-width:440px;}

/* 넓은 화면에서만 (itp.css 의 좁은 화면 규칙을 덮지 않도록) */
@media (min-width:881px){
    .sidebar{width:360px;}
    .cal-cell{min-height:124px;padding:10px;}
}

/* ============================================================
 * 반응형
 * ============================================================ */

/* 헤더: 메뉴 + 계정이 한 줄에 다 안 들어가는 폭부터 햄버거 메뉴로 전환
   (메뉴 4개 기준 약 1150px 필요. 포털 오픈 후 메뉴 7개가 되면 이 폭을 다시 확인할 것) */
@media (max-width:1180px){
    .itp-header.admin .itp-nav,
    .itp-header.admin .util{display:none !important;}
    .itp-header.admin .nav-toggle{display:inline-flex;}
    .itp-header.admin .itp-logo .logo-divider{display:none;}
}

/* 장비 목록 2단(사이드바/목록)이 세로로 쌓일 때: 칸을 화면 폭에 맞춰야 표가 칸 안에서 가로 스크롤된다
   (itp.css 의 align-items:flex-start 그대로면 목록 칸이 표 내용 폭만큼 넓어져 페이지 전체가 넘침) */
@media (max-width:880px){
    .layout-2{align-items:stretch;}
}

/* 태블릿 이하: 목록 상단(제목 / 필터·검색)을 위아래로 */
@media (max-width:980px){
    .list-head:has(.list-head-right){flex-direction:column;align-items:stretch;}
    .list-head-right{justify-content:flex-start;}
    .cal-toolbar{flex-direction:column;align-items:flex-start;}
    .cal-toolbar .list-head-right{width:100%;}
}

/* 모바일 */
@media (max-width:768px){
    .itp-header.admin .inner{height:64px;padding:0 14px;}
    .itp-header.admin .itp-logo .logo-img{height:30px;}
    .itp-header.admin .mobile-menu{top:64px;}
    .section-title{font-size:20px;flex-wrap:wrap;row-gap:2px;}
    .section-title::before{height:20px;}
    /* 대시보드 패널 머리(제목 + 버튼): 좁으면 버튼을 다음 줄로 */
    .adb-3{flex-wrap:wrap;gap:8px;}
    .kpi .v{font-size:26px;}
    .kpi .l{font-size:15px;}

    /* 검색 폼: 입력칸이 화면 폭에 맞춰 줄바꿈 */
    .list-head-right form{flex-wrap:wrap;width:100%;}
    .list-head-right .search-input,
    .list-head-right .search-date{flex:1 1 120px;width:auto;max-width:none;min-width:0;}   /* 입력칸 기본 최소폭 해제 → 시작일 ~ 종료일 한 줄 */
    .bulk-actions{margin-left:0;flex-wrap:wrap;}
    /* 신청 관리 검색 박스: 라벨은 한 줄, 입력은 화면 폭에 맞춰 */
    .search-panel{padding:14px;gap:10px;}
    .search-row{gap:8px;}
    .search-label,.search-field+.search-label{width:100%;min-width:0;margin-left:0;font-size:14.5px;}
    .search-sep{display:none;}
    .search-field{flex:1 1 100%;}
    .search-panel .search-date{flex:1;width:auto;min-width:0;}
    .search-panel .search-keyword{flex:1 1 100%;width:auto;min-width:0;}
    .search-actions{width:100%;margin-left:0;}
    .search-actions .btn{flex:1;}
    /* 페이지 번호(최대 10개 + 이전/다음)가 폭을 넘지 않게 */
    .pager{flex-wrap:wrap;gap:4px;}
    .pager .pg{min-width:34px;height:34px;padding:0 8px;font-size:14.5px;}

    /* 달력: 칸이 좁으므로 일정은 상태색 막대로만 표시 (날짜를 누르면 아래 주간·일간 목록) */
    .cal-title{font-size:21px;}
    .cal-grid .dow{font-size:13px;padding:8px 0;}
    .cal-cell{min-height:64px;padding:4px;}
    .cal-cell .daynum{font-size:13px;}
    .cal-cell.today .daynum{width:24px;height:24px;}
    .cal-evt{font-size:0;height:6px;padding:0;margin-top:3px;border-radius:3px;}
    .cal-more{font-size:12px;white-space:nowrap;}
    .cal-more-txt{display:none;}   /* "+2 더보기" → "+2" */
    .cal-legend{flex-wrap:wrap;gap:8px;}

    /* 표 글자는 한 단계 줄여 가로 스크롤 양을 줄인다.
       itp.css 의 모바일 규칙(표 자체를 블록 스크롤)은 쓰지 않고 감싼 .tbl-wrap 이 스크롤 → 짧은 표도 폭을 채움 */
    .tbl-wrap>.tbl{display:table;}
    .tbl th,.tbl td{padding:12px 14px;font-size:15.5px;}
    .tbl thead th{font-size:14.5px;}
    /* 신청 상세 신청 내용: 항목명/값을 위아래로 */
    .aav-info,.aav-info tbody,.aav-info tr,.aav-info th,.aav-info td{display:block;width:auto;}
    .aav-info th{border-bottom:none;padding-bottom:4px;font-size:14.5px;}
}