/* ======================================================================
   app.css — 이 앱의 껍데기만. 그리드 키트(cgrid.css)와 섞지 않는다.
   사이드바 / 사이드바 메뉴 계층 / 로그인 / 상세 패널
   ADMIN_PAGE_RULE §2.8 §2.9 §2.12 준수
   ====================================================================== */

/* ---------- 사이드바 접기/펼치기 (§2.8 ⑤) ---------- */
#adminSidebar { transition: margin-left .2s ease; }
body.sidebar-collapsed #adminSidebar { margin-left: -15rem; }   /* w-60 = 15rem 슬라이드 아웃 */
/* 가장자리 핸들: 펼침=사이드바 경계(좌측만 둥글게, 어두운 탭+흰 화살표) / 접힘=화면 왼쪽 끝(우측만 둥글게, 흰 배경+검은 화살표) */
#sidebarHandle { left: calc(15rem - 24px); border-radius: 8px 0 0 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    background: #1e293b !important; color: #ffffff !important; transition: left .2s ease, background .2s ease, color .2s ease; }
#sidebarHandle svg { display: block; transition: transform .2s ease; }
body.sidebar-collapsed #sidebarHandle { left: 0; border-radius: 0 8px 8px 0; background: #ffffff !important; color: #111827 !important; border: 1px solid #e2e8f0; }
body.sidebar-collapsed #sidebarHandle svg { transform: scaleX(-1); }   /* 닫힘 = 오른쪽(›) 화살표 */

/* 사이드바 메뉴 스크롤바: 얇고 은은하게(다크 배경) — §2.9 */
#adminSidebar nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; padding-bottom: 48px; }   /* §2.8⑦ 하단 여유 */
#adminSidebar nav::-webkit-scrollbar { width: 6px; }
#adminSidebar nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
#adminSidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }
#adminSidebar nav::-webkit-scrollbar-track { background: transparent; }
/* 본문 스크롤바: 얇게 */
main { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .35) transparent; }
main::-webkit-scrollbar { width: 8px; }
main::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); border-radius: 4px; }
main::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .5); }
main::-webkit-scrollbar-track { background: transparent; }

/* ---------- 사이드바 메뉴 계층 (§2.8 ⑦: 0뎁스 그룹 / 1뎁스 리프) ---------- */
.nav-link, .nav-group-head { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 14px; color: #cbd5e1; line-height: 1.2; text-align: left; }
.nav-group-head { padding: 10px 16px; }                  /* 0뎁스 그룹: 라벨 16px (꺽쇠 우측) */
.nav-top { padding: 10px 16px; }                          /* 그룹 밖 최상위 리프: 그룹헤더와 동일 16px */
.nav-leaf { padding: 9px 16px 9px 36px; }                /* 1뎁스 리프: 16 + 20 들여쓰기 */
.nav-link:hover, .nav-group-head:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link.is-active { background: #1e293b; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 0 #10b981; }
.nav-link.is-active .nav-label { color: #fff; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* §2.8⑦ 말줄임 */
/* 꺽쇠 = 행 오른쪽 끝(§2.8⑦) — 라벨 시작선을 리프와 맞추기 위함 */
.nav-chevron { order: 9; margin-left: auto; width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s; color: #64748b; }
.nav-mini-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #94a3b8; }
.nav-mini-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-mini-btn svg { width: 16px; height: 16px; }
.nav-group.is-open > .nav-group-head .nav-chevron { transform: rotate(90deg); }
.nav-group-body { display: none; }
.nav-group.is-open > .nav-group-body { display: block; }

/* 커스텀 툴팁 (§2.5 전역 — 네이티브 title 금지, 지연 0) */
.nav-tooltip { position: fixed; z-index: 200; transform: translateY(-50%); background: #fff; color: var(--primary); border: 1px solid var(--primary); font-size: 12px;
    padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .07s; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.nav-tooltip.show { opacity: 1; }

/* ---------- 로그인 ---------- */
body:has(.login-wrap) { margin: 0; padding: 0; background: #0f172a; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #0f172a; position: relative; }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; padding: 34px 30px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.login-logo { font-size: 21px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; text-align: center; }
.login-logo span { color: #64748b; font-weight: 700; }
.login-form { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.login-form .filter-input { height: 44px; font-size: 14px; }
.login-form .btn { height: 44px; justify-content: center; font-size: 14px; }
.login-error { font-size: 12.5px; color: var(--danger); font-weight: 600; text-align: center; }
.login-notice { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; text-align: center; }
.login-version { position: fixed; left: 16px; bottom: 12px; font-size: 11px; color: rgba(255, 255, 255, .45); }

/* ---------- 상세/폼 패널 (고객 상세·원고 상세 공용) ---------- */
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel + .panel { margin-top: 16px; }
.panel-head { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.panel-head::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--primary); }
.panel-head .head-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.panel-body { padding: 16px 18px; }

/* 정의형 정보 목록 (라벨-값) */
.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 22px; }
.def-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.def-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.def-value { font-size: 13.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.def-value.empty { color: #cbd5e1; }

/* 모바일: 사이드바 = 오프캔버스 드로어 (§2.12) */
@media (max-width: 768px) {
    #adminSidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; z-index: 60; margin-left: 0 !important; transform: translateX(0); transition: transform .22s ease; }
    body.sidebar-collapsed #adminSidebar { transform: translateX(-100%); }
    #sidebarBackdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    body:not(.sidebar-collapsed) #sidebarBackdrop { opacity: 1; pointer-events: auto; }
    /* 모바일: 가장자리 핸들 대신 우하단 햄버거 FAB */
    #sidebarHandle { display: none; }
    #sidebarFab { display: flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; bottom: 16px; z-index: 65;
        width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
        background: #111827; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
    #sidebarFab:active { transform: scale(.94); }
}
/* 데스크탑에서는 오프캔버스 보조요소를 숨긴다(가장자리 핸들 사용) */
#sidebarBackdrop { display: none; }
#sidebarFab { display: none; }

/* ---------- 패널 안 보조 표 (상세 화면의 관련인물·보험·이력) ----------
   메인 목록은 CGrid(data-grid)가 담당한다. 여기 표들은 행마다 인라인 폼이 들어가
   그리드 키트와 성격이 달라 별도 스타일을 쓴다. */
.sub-table { width: 100%; border-collapse: collapse; }
.sub-table th { background: #f8fafc; font-size: 11px; font-weight: 600; color: var(--text-secondary);
    padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sub-table td { font-size: 13px; padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.sub-table tr:last-child td { border-bottom: none; }
.sub-table tbody tr:hover td { background: var(--primary-light); }
.sub-table .filter-input { height: 30px; font-size: 12.5px; padding: 3px 8px; }
.sub-table .btn { height: 30px; padding: 0 10px; font-size: 12px; }
.sub-empty { padding: 22px 12px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* 검색 결과 리스트 (관련 인물 추가 모달) */
.pick-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pick-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; font-size: 13px;
    border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; }
.pick-item:last-child { border-bottom: none; }
.pick-item:hover { background: var(--primary-light); }
.pick-item.is-picked { background: var(--primary); color: #fff; }
.pick-item.is-picked .pick-sub { color: rgba(255, 255, 255, .75); }
.pick-sub { color: var(--text-secondary); font-size: 12px; }
.pick-empty { padding: 18px 12px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* 키트에 없는 위험(빨강) 배지 — LMS 한도 초과, 발송 실패 등 */
.badge-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }