@charset "utf-8";
/* =============================================================================
 * css_bizportal_admin.css - 어드민 CRM 전용 추가 스타일
 * -----------------------------------------------------------------------------
 * [적용 범위]
 *   /admin/ 화면 전용. inc_layout_admin_head.asp 가
 *   css_bizportal_main.css 다음에 이 파일을 불러온다.
 *   따라서 여기서는 "어드민에만 있는 골격"과 "고객 화면과 달라야 하는 값"만 정의한다.
 *   버튼·표·폼 같은 공통 부품은 main 을 그대로 쓴다.
 *
 * [어드민이 고객 화면과 다른 점]
 *   1. 화면 폭을 제한하지 않는다. 어드민은 표를 넓게 봐야 한다.
 *   2. 좌측 고정 LNB(200px) + 우측 본문 구조다.
 *   3. 밀도를 한 단계 높인다. 한 화면에 더 많은 행이 보여야 한다.
 *
 * [운영 사고 방지]
 *   .env-tag 는 DEV/STG 에서만 출력된다(APP_ENV <> "PRD").
 *   운영 화면인 줄 알고 개발 서버에서 데이터를 지우는 사고를 막는 장치이므로
 *   눈에 확 띄어야 한다. 절제된 톤 규칙의 예외다.
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 1. 어드민 토큰 (main 의 변수를 어드민 스코프에서만 덮는다)
 * -------------------------------------------------------------------------- */
body.admin {
    background: #EEF1F6;
    font-size: 13px;
}

/* -----------------------------------------------------------------------------
 * 2. 상단 GNB
 * -------------------------------------------------------------------------- */
.adm-gnb {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-primary-d);
    color: var(--c-white);
    border-bottom: 1px solid #0F1D35;
}
.adm-gnb-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-4);
    min-height: 48px;
}
.adm-logo { font-size: 15px; letter-spacing: -.02em; }
.adm-logo a { color: var(--c-white); text-decoration: none; }
.adm-logo a:hover { opacity: .9; text-decoration: none; }

.adm-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    font-size: 12px;
    color: #C9D4E6;
}
.adm-user .uname { color: var(--c-white); font-weight: 700; }
.adm-user .btn-txt { color: #C9D4E6; }
.adm-user .btn-txt:hover { color: var(--c-white); }

/* 권한 레벨 표시 (읽기전용 / 컨설턴트 / 운영자 / 시스템관리자) */
.ulevel {
    padding: 1px var(--sp-2);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
}

/* 환경 태그. 운영이 아닐 때만 출력된다. 일부러 강한 색을 쓴다. */
.env-tag {
    padding: 1px var(--sp-2);
    border-radius: var(--r-sm);
    background: #C2410C;
    color: var(--c-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 3. 본문 골격 (LNB + 컨텐츠)
 * -------------------------------------------------------------------------- */
.adm-body {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 48px);
}

/* --- 좌측 고정 사이드바 --- */
.adm-lnb {
    flex: 0 0 var(--w-lnb);
    width: var(--w-lnb);
    padding: var(--sp-3) 0 var(--sp-6);
    background: var(--c-primary);
    color: #C9D4E6;
    border-right: 1px solid #16294A;
}
.adm-lnb ul { margin: 0; padding: 0; list-style: none; }
.adm-lnb li { margin: 0; }

.adm-lnb a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1);
    padding: 8px var(--sp-4);
    color: #C9D4E6;
    font-size: 13px;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.adm-lnb a:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--c-white);
    text-decoration: none;
}

/* 활성 메뉴. 배경 + 좌측 굵은 선 + 굵은 글씨. 색 하나에만 의존하지 않는다. */
.adm-lnb a.on {
    background: var(--c-primary-d);
    border-left-color: #7FA6D9;
    color: var(--c-white);
    font-weight: 700;
}

/* 메뉴 그룹 헤더 (공고 관리 / 고객 관리 / 리포트 / 시스템) */
.adm-lnb .grp {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-4) var(--sp-1);
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #90A5C4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}
.adm-lnb li:first-child + .grp { margin-top: var(--sp-2); }

/* LNB 안의 대기건수 배지 */
.adm-lnb .badge { margin-left: auto; }

/* --- 우측 본문 --- */
.adm-content {
    flex: 1 1 auto;
    min-width: 0;                 /* 넓은 표가 flex 아이템을 밀어내지 않게 한다 */
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
}
.adm-content .page-head { margin-bottom: var(--sp-3); }
.adm-content .card { margin-bottom: var(--sp-3); }

/* 어드민 표는 밀도를 한 단계 높인다 */
.adm-content .tbl { font-size: 12px; }
.adm-content .tbl th,
.adm-content .tbl td { padding: 5px var(--sp-2); }

/* -----------------------------------------------------------------------------
 * 4. 하단
 * -------------------------------------------------------------------------- */
.adm-foot {
    padding: var(--sp-3) var(--sp-5);
    background: #E3E8F0;
    border-top: 1px solid var(--c-line);
    color: var(--c-text-sub);
    font-size: 11px;
}
.adm-foot p { margin: 0; }
/* 감사 로그 고지. 운영자가 항상 인지해야 하므로 흐리게 처리하지 않는다. */
.adm-foot-note {
    margin-top: var(--sp-1) !important;
    color: var(--c-warn);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * 5. 어드민 로그인 화면
 * -------------------------------------------------------------------------- */
/* 로그인 화면은 GNB/LNB 없이 카드 하나만 뜬다. */
body.admin-login {
    background: var(--c-primary);
    background: linear-gradient(160deg, var(--c-primary-d), var(--c-accent));
}
body.admin-login .login-wrap { margin-top: 90px; }
body.admin-login .login-logo span { display: block; margin-top: 2px; }

/* -----------------------------------------------------------------------------
 * 6. 반응형
 * -------------------------------------------------------------------------- */

/* --- 1024px 이하 : LNB 를 가로 메뉴 줄로 접는다 --- */
@media screen and (max-width: 1024px) {
    .adm-body { display: block; min-height: 0; }

    .adm-lnb {
        width: auto;
        flex: none;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid #16294A;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .adm-lnb ul {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .adm-lnb a {
        padding: var(--sp-2) var(--sp-3);
        border-left: 0;
        border-bottom: 3px solid transparent;
    }
    .adm-lnb a.on { border-left: 0; border-bottom-color: #7FA6D9; }

    /* 접힌 상태에서 그룹 헤더는 구분선 역할만 한다 */
    .adm-lnb .grp {
        margin: 0;
        padding: var(--sp-2) var(--sp-2);
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, .18);
    }

    .adm-content { padding: var(--sp-3) var(--sp-3) var(--sp-5); }
}

/* --- 768px 이하 --- */
@media screen and (max-width: 768px) {
    .adm-gnb-inner { flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); }
    .adm-user { width: 100%; margin-left: 0; justify-content: flex-start; }
    .adm-logo { font-size: 14px; }

    /* main 의 표 -> 카드 변환을 어드민에서도 그대로 쓴다.
       어드민 표는 열이 많아 카드로 바뀌면 세로로 길어지지만,
       가로 스크롤로 두면 값을 잘못 읽어 운영 사고가 난다. 세로가 안전하다. */
    .adm-content { padding: var(--sp-2) var(--sp-2) var(--sp-5); }
    .adm-content .tbl-list td { padding: var(--sp-2); }

    body.admin-login .login-wrap { margin-top: var(--sp-5); }
}

/* -----------------------------------------------------------------------------
 * 7. 인쇄
 * -------------------------------------------------------------------------- */
@media print {
    .adm-body { display: block; }
    .adm-content { padding: 0; }
    body.admin { background: #FFF; }
}