/* ======================================================================
   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; }
/* 닫힌 묶음 안에 지금 화면이 있으면 머리 글씨를 활성 톤으로(0018 — 묶음은 기본 닫힘, 자동 펼침 안 함) */
.nav-group.has-cur:not(.is-open) > .nav-group-head { color: #fff; font-weight: 600; }
.nav-group.has-cur:not(.is-open) > .nav-group-head .nav-chevron { color: #10b981; }

/* 커스텀 툴팁 (§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; }

/* 모바일(≤768px) 셸 = 키트 v4.16.0 모바일 셸(cgrid.css · §2.19) — 아래 탭 줄 · 탭 드롭다운 · 오른쪽 서랍.
   예전 왼쪽 오프캔버스 드로어·우하단 햄버거 FAB·백드롭은 2026-10-29 걷어냈다(2.2.0). */
@media (max-width: 768px) {
    #sidebarHandle { display: none; }
    /* 아래 탭 줄의 사용자 영역은 로그아웃만 — 이름까지 두면 '지금 탭 ▾' 이 두세 글자로 잘린다 */
    html.cgm-on .cgm-r-profile { padding: 0 4px 0 10px; border-left: 0; }
    html.cgm-on .cgm-r-profile > span { 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; }

/* ======================================================================
   탭 작업공간 (ADMIN_PAGE_RULE §2.13) — 셸 전용
   탭바는 본문(밝음)이 아니라 사이드바(다크) 쪽에 속한다. 활성 탭만 밝게 빼서
   아래 본문과 폴더 탭처럼 이어지게 한다.
   ====================================================================== */
#tabBar { scrollbar-width: none; }
#tabBar::-webkit-scrollbar { display: none; }

.ws-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; margin-right: 2px;
    border-radius: 8px 8px 0 0;              /* 상단만 라운드 — 아래는 본문과 이어진다 */
    background: transparent; color: #94a3b8; font-size: 13px; white-space: nowrap; cursor: pointer; user-select: none; flex: 0 0 auto; }
/* ✕ 없는 탭(마지막 1개)은 좌우 패딩을 대칭으로 — 안 그러면 제목이 왼쪽으로 쏠려 보인다 */
.ws-tab:not(:has(.ws-tab-x)) { padding-right: 12px; }
.ws-tab:hover { background: rgba(255, 255, 255, .08); color: #e2e8f0; }
.ws-tab.active { background: #f1f5f9; color: #0f172a; font-weight: 600; }
/* 분할 패널에 떠 있지만 포커스는 아닌 탭 — 활성과 구분되게 중립 톤 */
.ws-tab.inpanel:not(.active) { background: rgba(255, 255, 255, .14); color: #e2e8f0; }
.ws-home { font-size: 14px; }
.ws-tab-x { width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 4px; font-size: 11px; color: inherit; opacity: .6; }
.ws-tab-x:hover { opacity: 1; background: rgba(0, 0, 0, .15); }

.tc-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #cbd5e1; font-size: 15px; }
.tc-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
.tc-btn:disabled { opacity: .35; cursor: default; }
.tc-btn.is-on { background: rgba(255, 255, 255, .16); color: #fff; }   /* 도움말(?) 켬 — 키트 helpHost 가 is-on 을 단다 */

.wsframe { position: absolute; border: 0; background: #fff; }
.panel-title { position: absolute; height: 28px; display: none; align-items: center; gap: 6px; padding: 0 10px;
    background: #e2e8f0; color: #334155; font-size: 12px; font-weight: 600; cursor: pointer; z-index: 2; border-bottom: 1px solid #cbd5e1; }
.panel-title.show { display: flex; }

#tabListMenu { position: absolute; z-index: 80; min-width: 220px; background: #1e293b; color: #e2e8f0;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); padding: 6px; display: none; }
#tabListMenu.show { display: block; }
.tlm-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.tlm-item:hover { background: rgba(255, 255, 255, .08); }
.tlm-item.active { background: rgba(16, 185, 129, .28); }
.tlm-x { margin-left: auto; opacity: .6; }
.tlm-x:hover { opacity: 1; }

/* 탭(iframe) 안에서는 화면이 자기 크롬을 숨긴다 — 셸이 이미 사이드바·헤더를 그리고 있다 */
body.admin-embed #adminSidebar,
body.admin-embed #adminHeader,
body.admin-embed #sidebarHandle { display: none !important; }

/* ======================================================================
   UI 스케일 — 이 프로젝트만 키트 기본보다 1.2배 크게.
   운영자 1인이 하루 종일 보는 화면이라 기본 크기가 작다는 요청.

   키트(cgrid.css)는 크기를 px 로 박아두고 토큰으로 빼두지 않았다. 그래서 키트를 고치는
   대신(다른 프로젝트까지 커진다) 여기서 프로젝트 단위로 덮는다.
   ⚠️ 키트가 padding/font-size 에 !important 를 쓴 자리(.data-table th/td)는
      여기서도 !important 로 맞서야 한다(§2.7 특정도 충돌 footgun).
   ====================================================================== */

/* ---------- 폼 컨트롤 ---------- */
.filter-input { height: 41px; font-size: 16px; padding: 0 0.72rem; }
.field textarea, .filter-input[rows], textarea.filter-input { min-height: 86px; padding: 10px 12px; height: auto; }
.field-label { font-size: 16px; }
.field-hint  { font-size: 13px; }
.field       { gap: 7px; }
.form-grid   { gap: 17px 19px; }
.req         { font-size: 16px; }

/* ---------- 버튼 ---------- */
.btn    { font-size: 16px; padding: 10px 19px; }
.btn-sm { font-size: 16px; padding: 0 17px; height: 41px; }

/* ---------- 그리드 ---------- */
.data-table th { font-size: 14px !important; padding: 12px 17px !important; }
.data-table td { font-size: 16px !important; padding: 13px 17px !important; }
.data-table td.seq-cell { font-size: 13px; }
.badge { font-size: 13px; padding: 3px 10px; }

/* 페이지당 개수(컴팩트 콤보) 폭은 키트 4.5rem 그대로(v4.17.1) — 16px 글자로도 "100" 이 들어간다(글자 26.7 / 쓸 폭 28.5px) */

/* ---------- 셸 ---------- */
.nav-link, .nav-group-head { font-size: 16px; }
.ws-tab { font-size: 15px; height: 40px; }

/* ---------- 이 앱의 자체 컴포넌트 ---------- */
.panel-head { font-size: 16px; }
.sub-table th { font-size: 13px; padding: 10px 14px; }
.sub-table td { font-size: 15px; padding: 9px 14px; }
.sub-table .filter-input { height: 36px; font-size: 15px; }
.sub-table .btn { height: 36px; font-size: 14px; padding: 0 12px; }
.sub-empty { font-size: 15px; }
.pick-item { font-size: 15px; padding: 10px 14px; }
.pick-sub  { font-size: 14px; }
.def-label { font-size: 13px; }
.def-value { font-size: 16px; }

/* ---------- 폼 라벨 표식 (§2.2 와 같은 언어) ----------
   검색 필터 라벨(.filter-group > label)·전체건수(.grid-count)가 이미 쓰는 세로 막대를
   폼 라벨에도 준다. 필드가 여럿 늘어설 때 어디부터 한 칸인지 눈으로 끊긴다.
   크기는 이 프로젝트 스케일(1.2배)에 맞춰 키트 기본(3×12)보다 살짝 크게. */
.field-label { display: inline-flex; align-items: center; gap: 7px; }
.field-label::before {
    content: ""; flex: 0 0 auto; display: inline-block;
    width: 3.5px; height: 15px; border-radius: 2px; background: var(--primary);
}

/* ---------- 흐름 안 액션 (원문 → [생성] → 원고) ----------
   푸터(저장/취소)와 성격이 다른, '지금 이 자리에서 실행하는' 버튼.
   구분선 위에 얹어 앞 단계와 뒤 단계 사이의 단계로 읽히게 한다. */
.flow-action {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border);
}
.flow-action .flow-hint { font-size: 14px; color: var(--text-secondary); }
/* 버튼이 먼저(왼쪽), 설명이 뒤 — 무엇을 누르는지부터 보이고 설명이 따라온다 */
.flow-action .flow-hint { flex: 1 1 auto; }

/* ---------- 파일 선택 (앱 공통 컴포넌트) ----------
   native <input type=file> 은 브라우저마다 모양이 달라 다른 컨트롤과 어긋난다(§1.6 native 위젯 금지).
   인풋은 숨기고 라벨을 컨트롤처럼 그린다. 라벨 전체가 드롭 영역이라 끌어다 놓아도 된다. */
.file-pick {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    border: 1.5px dashed var(--control-border); border-radius: var(--radius-sm);
    padding: 10px 14px; transition: border-color .15s, background .15s; min-height: 41px;
}
.file-pick:hover, .file-pick.is-over { border-color: var(--primary); background: var(--primary-light); }
.file-pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-pick-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--control-border); border-radius: var(--radius-sm);
    padding: 0 14px; height: 34px; font-size: 15px; font-weight: 600; background: #fff; color: var(--text-primary);
}
.file-pick:hover .file-pick-btn { border-color: var(--primary); }
.file-pick-name { font-size: 15px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick-name.has-file { color: var(--text-primary); font-weight: 600; }
.file-pick-clear { margin-left: auto; flex: 0 0 auto; border: 0; background: none; color: var(--text-secondary); font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.file-pick-clear:hover { background: rgba(0, 0, 0, .06); color: var(--danger); }

/* ---------- 필드 머리줄 (라벨 좌 · 보조 액션 우) ----------
   '원고 복사'처럼 그 필드에 딸린 버튼은 소제목 줄 오른쪽에 둔다 —
   입력칸 아래에 두면 다음 섹션의 것으로 읽힌다. */
.field-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.field-head .field-label { margin: 0; }
.field-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- 폼 안 콤보는 칸 폭을 다 쓴다 ----------
   키트 콤보는 inline-flex 라 내용만큼만 넓어진다. 검색바에서는 그게 맞지만
   폼 필드 안에서는 옆 인풋들과 폭이 어긋나 계단처럼 보인다. */
.field .combobox { display: flex; width: 100%; }
.field .combobox .combobox-input { width: 100%; }

/* ---------- 단계 구획 (작성 흐름이 있는 화면) ----------
   위에서 아래로 순서대로 하는 화면은 어디까지가 한 단계인지 보여야 한다.
   번호 + 제목 + 옅은 카드로 끊는다. */
.step { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.step + .step { margin-top: 18px; }
.step-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 18px; border-bottom: 1px solid var(--border); background: #f8fafc;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.step-no {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}
.step-head .step-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.step-body { padding: 18px; }

/* 단계 안에서는 소제목 라벨의 세로 막대를 빼 — 단계 제목과 표식이 겹쳐 시끄럽다 */
.step-body > .field > .field-label::before,
.step-body > .field-head .field-label::before { display: none; }
.step-body > .field > .field-label,
.step-body > .field-head .field-label { gap: 0; }


/* ══════════ 주소 검색 오버레이 (address-search.js) ══════════
   CGrid 모달(200)·컬럼팝(250)·콤보 포털(1200) 위에 떠야 한다 — 모달 안에서 여는 창이라서.
   부트스트랩을 쓰지 않으므로 필요한 것만 여기서 직접 그린다. */
.addr-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(15, 23, 42, .45);
    display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.addr-panel { width: 100%; max-width: 560px; background: #fff; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25); display: flex; flex-direction: column; max-height: 78vh; }
.addr-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.addr-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.addr-sub { font-size: 12px; color: #94a3b8; }
.addr-x { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; font-size: 18px; line-height: 1;
    color: #64748b; background: transparent; border: 0; cursor: pointer; }
.addr-x:hover { background: #f1f5f9; color: #0f172a; }
.addr-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.addr-results { overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 8px; min-height: 120px; }
.addr-item { display: block; width: 100%; text-align: left; padding: 10px 12px; background: #fff;
    border: 0; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.addr-item:last-child { border-bottom: 0; }
.addr-item:hover { background: #f8fafc; }
.addr-road { font-size: 13px; font-weight: 600; color: #0f172a; }
.addr-jibun { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.addr-empty { padding: 24px 12px; text-align: center; font-size: 13px; color: #94a3b8; }
.addr-error { color: #b91c1c; }