@charset "UTF-8";
/*
    시스템 관리 > BIS 테마 관리 (bit/system/skin)

    좌측 테마 목록 · 우측 편집. 다른 패널형 화면(고객사정보 등)과 같은 규격을 쓴다.
 */

.sk-page{
    display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; align-items:stretch;
}
@media (max-width:1100px){ .sk-page{ grid-template-columns:1fr; } }

.sk-col{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid #d8e0ea; border-radius:8px; overflow:hidden; min-width:0;
}
.sk-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    height:46px; flex:none; padding:0 10px 0 12px;
    background:#f4f7fa; border-bottom:2px solid #0a529d;
}
.sk-head h2{ margin:0; font-size:14px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-head__btns{ display:flex; gap:6px; flex:none; }
.sk-cnt{
    display:inline-block; min-width:20px; margin-left:5px; padding:1px 6px;
    border-radius:999px; background:#dbe6f4; color:#0a529d; font-size:11.5px; font-weight:700;
}
.sk-head .btn.small{
    height:28px; padding:0 10px; font-size:12.5px; font-weight:600;
    line-height:26px; border-radius:5px; white-space:nowrap; flex:none;
}
.sk-head .btn.small:disabled{ opacity:.4; cursor:not-allowed; }
/* 사용 전환 : 아웃라인(파랑) */
#skToggle{ background:#fff; color:#047bb6; border:1px solid #047bb6; }

.sk-filter{
    display:flex; gap:8px; flex:none; padding:8px 10px; border-bottom:1px solid #eaeff5;
}
.sk-filter #skSearch{ flex:1 1 auto; min-width:0; }
/* 전역 .form-control 이 상하 padding 10px 을 갖고 있어 32px 높이 안에서 텍스트가
   세로로 짓눌려 '전체' 같은 글자가 잘려 보였다. 수직 padding 을 0 으로 잡고,
   높이도 34px 로 살짝 늘려 글자에 숨쉴 자리를 준다. */
.sk-filter .form-control{ height:34px; padding:0 10px; font-size:14px; line-height:1.2; }
/* select 는 우측 화살표 영역만큼 padding 을 더 준다 (좌우 명시). */
.sk-filter #skUse{ flex:0 0 120px; padding:0 26px 0 10px; }
/* 검색창(아이콘 포함) — 기본 .search-box(400px/48px) 를 패널 폭에 맞게 재정의 */
.sk-filter .search-box{ flex:1 1 auto; width:auto; min-width:0; height:34px; }
.sk-filter .search-box #skSearch,
.sk-filter .search-box .form-control{ width:100%; height:100%; border:none; padding:0 10px; }
.sk-filter .search-box .search-btn{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:34px; padding:0;
}
.sk-filter .search-box .search-btn img{ display:block; }

/* ── 좌측 목록 ────────────────────────────────────────────── */
.sk-list-scroll{ flex:1 1 auto; min-height:0; }
.sk-list{ list-style:none; margin:0; padding:0; }
.sk-list > li{ border-bottom:1px solid #eef2f7; }
.sk-item{
    display:flex; align-items:center; gap:8px; padding:9px 10px 9px 12px;
    cursor:pointer; position:relative;
}
.sk-item:hover{ background:#f2f6fb; }
.sk-item.is-on{ background:#e6effb; }
.sk-item.is-on::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0a529d;
}
/* 미사용 항목도 흐리게 하지 않는다 ('미사용' 뱃지로만 구분) */
.sk-item.is-off{ opacity:1; }
.sk-item__wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.sk-item__nm{
    display:flex; align-items:center; gap:5px;
    font-size:13.5px; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sk-item.is-on .sk-item__nm{ font-weight:700; color:#0a529d; }
.sk-item__sub{ font-size:11.5px; color:#9aa5b2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-off{
    flex:none; font-style:normal; font-size:10.5px; font-weight:700;
    background:#f1f3f6; color:#8a94a1; border-radius:3px; padding:1px 4px;
}
.sk-empty{ padding:44px 14px; margin:0; text-align:center; color:#9aa5b2; font-size:13px; }

/* ── 우측 편집 ────────────────────────────────────────────── */
.sk-body-scroll{ flex:1 1 auto; min-height:0; }
.sk-body{ padding:16px 18px; }

.sk-group{
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
    margin:0 0 12px; padding-bottom:7px;
    font-size:12.5px; font-weight:700; color:#0a529d;
    border-bottom:1px solid #e3eaf3;
}
.sk-group:not(:first-child){ margin-top:20px; }
.sk-group i{ font-style:normal; font-size:11.5px; font-weight:500; color:#8a94a1; }
.sk-group i b{ color:#c0392b; }
.sk-req{ color:#c0392b; font-style:normal; font-size:14px; }

.sk-f{ display:block; margin-bottom:12px; }
.sk-f > span{ display:block; font-size:13px; font-weight:600; color:#5b6673; margin-bottom:5px; }
.sk-f > span em{ color:#c0392b; font-style:normal; }
.sk-f .form-control{ width:100%; height:38px; }

/* 체크박스 한 줄 */
.sk-f--inline{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.sk-f--inline > span{ margin:0; font-weight:500; color:#3d4753; }
.sk-f--inline input[type=checkbox]{
    flex:none; width:15px; height:15px; margin:0; accent-color:#0a529d; cursor:pointer;
}

/* 두 칸 나란히 */
.sk-frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sk-frow .sk-f{ min-width:0; }

/* 날짜 선택 칸은 오른쪽에 캘린더 아이콘, 시각 선택 칸은 시계 아이콘.
   readonly 픽커라 입력 전체가 클릭 영역이므로 아이콘을 눌러도 칸을 눌러도 동일하게 열린다. */
.sk-f .js-datepicker,
.sk-f .js-timepicker{
    padding-right:34px;
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:16px 16px;
    cursor:pointer;
}
/* 회색 캘린더 아이콘 */
.sk-f .js-datepicker{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E"); }
/* 회색 시계 아이콘 — 화살표 없이 동그라미 + 바늘만 */
.sk-f .js-timepicker{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E"); }

.sk-ta{
    height:auto; min-height:78px; resize:vertical; padding:8px 10px;
    line-height:1.5;
}
.sk-ta{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.5) transparent; }
.sk-ta::-webkit-scrollbar{ width:11px; height:11px; }
.sk-ta::-webkit-scrollbar-track{ background:transparent; }
.sk-ta::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,.5); background-clip:padding-box;
    border:2px solid transparent; border-radius:7px;
}

.sk-hint{ margin:14px 0 0; font-size:11.5px; color:#9aa5b2; }

/* 스크롤은 각 패널 안쪽 wrapper 의 SimpleBar 가 잡는다. panel_fit 이 .sk-list/.sk-body 에 거는 상한·네이티브 스크롤은 무력화 */
#content .sk-list, #content .sk-body { max-height:none !important; min-height:0 !important; overflow:visible !important; }
/* BIS 테마관리 패널만 더 높게 — 공통 --panel-h(calc(100vh - 300px))는 그대로 두고
   이 화면에서만 변수를 재정의한다. 값을 줄일수록(빼는 px↓) 패널이 더 길어진다. */
#content .sk-page { --panel-h: calc(100vh - 300px); }

#content .sk-list-scroll { max-height: var(--panel-h); min-height: var(--panel-h-min); }
#content .sk-body-scroll { max-height: var(--panel-h); min-height: var(--panel-h-min); }