@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ================================================================================
   JC 관리자 웹 — 디자인 개편 최종 적용본
   「현행 다크 좌측 기둥 유지 + 본문은 1안 서류형(문서철)」   (사장님 확정안)

   원본 시안 : design_preview/admin_v3_doc.css  (1안 서류형)
   이 파일   : 위 시안에서 '좌측 기둥(240px 메뉴판)' 관련 규칙을 전부 걷어낸 것.

   로드 순서 : admin.css → accounting.css → meetings.css → (이 파일)
   따라서 같은 구체성이면 이 파일이 이깁니다. !important 는 JS 인라인 style 을
   덮어야 하는 자리(조직도 그룹 머리 · 회의설정 카드 머리 · 아바타 이미지)에만 씁니다.

   ── 콘셉트 ───────────────────────────────────────────────────────────────────
   관공서 결재 서류 · 연감 · 신문 조판. 건조하고 신뢰감 있는 문서 한 장.
   "떠 있는 카드"를 전부 눕혀 종이로 만들고, 구분은 그림자가 아니라 규칙선이 합니다.

   ── 다섯 가지 문법 (시안의 ③ 사이드바 반전은 사장님 지시로 폐기) ─────────────
   ① 바탕은 흰 종이 한 장  — 회색 캔버스·그림자·둥근 모서리 전폐 (radius 0~4px)
   ② 구분은 선과 여백으로  — 구역 위 2px 먹줄(#111827) / 행 사이 1px 가는 선
   ③ 알약 전폐             — 상태=6px 색점+본문색 글자 / 개수=굵은 숫자만
   ④ 채움은 딱 하나        — 주요 버튼만 진남색, 나머지는 흰 바탕 1px 테두리
   ⑤ 활자가 절반           — Pretendard + 좁은 자간 + 등폭 숫자(tabular-nums)

   ── 좌측 기둥 보존 (절대) ────────────────────────────────────────────────────
   · 좌측 240px 메뉴판에 해당하는 셀렉터는 이 파일에 단 한 줄도 없습니다.
     어두운 먹색 판 + 파란 현재위치 표시 = admin.css 원형 그대로 보입니다.
   · 좌측 판이 참조하는 토큰 3개(--c-text / --c-primary / --c-primary-bg)는
     :root 가 아니라 §1-B 의 '본문 영역'에만 다시 정의합니다. 자세한 이유는 §1-B.
   · 헤더 우측 ⚙ 설정 드롭다운은 좌측 판이 아니라 본문(헤더) 영역이므로
     서류형 문법을 그대로 적용합니다. (§5)

   ── 기능 무결 (절대) ─────────────────────────────────────────────────────────
   · display / visibility / pointer-events / position 은 한 곳도 건드리지 않습니다.
   · 요소를 숨기거나 옮기지 않습니다. 폭을 줄여 한글 라벨이 잘리게 하지 않습니다.
   · 클릭 대상은 작아지지 않습니다 — .btn 최소 38px / .btn-sm 최소 30px 로 오히려 키웠습니다.
   · 색만으로 뜻을 전하지 않습니다 — 색점 옆에 늘 한글 라벨과 O/X 글자가 남습니다.
   ================================================================================ */


/* ================================================================================
   1. 토큰 — 화면 인상의 8할이 여기서 바뀝니다
   admin.css / accounting.css 의 :root 를 통째로 덮어씁니다. 원본 CSS 안에서
   var(--c-*) 로 참조하던 곳과, JS 가 인라인으로 쓴 var(--c-primary-light) 같은
   자리까지 한 번에 따라옵니다. (JS 인라인 파란 띠가 !important 없이 중화되는 이유)

   ⚠ 좌측 판이 쓰는 3개(--c-text / --c-primary / --c-primary-bg)는 여기 없습니다.
     §1-B 에서 본문 영역에만 겁니다.
   ================================================================================ */
:root {
    /* ── 서류형 전용 토큰 ── */
    --doc-paper:  #FFFFFF;   /* 종이 — 본문 전체 평면 */
    --doc-ink:    #1A1D23;   /* 본문 잉크 */
    --doc-ink-2:  #5A6474;   /* 보조 잉크 */
    --doc-ink-3:  #8A93A3;   /* 힌트 */
    --doc-head:   #111827;   /* 먹색 — 2px 굵은 줄 · 구역 머리 · 제목 */
    --doc-rule:   #DDE3EC;   /* 구역 규칙선 1px */
    --doc-rule-2: #E6EAF1;   /* 표 행 구분선 1px (더 옅게) */
    --doc-tint:   #F5F7FA;   /* 행 호버 · 아주 옅은 면 */
    --doc-tint-2: #F7F9FC;
    --doc-navy:   #1D4ED8;   /* 포인트색 — 링크와 주요 버튼에만 */
    --doc-ok:     #15803D;
    --doc-warn:   #B45309;
    --doc-bad:    #B91C1C;

    /* ── 밀도·모서리 ── */
    --content-pad: 26px;
    --card-radius: 0px;      /* 카드 껍데기 폐지 */
    --header-h:    60px;

    /* ── admin.css 토큰 재정의 ── */
    --c-bg:            #FFFFFF;   /* 회색 캔버스 폐지 → 흰 종이 */
    --c-bg-card:       #FFFFFF;
    --c-border:        #DDE3EC;
    --c-text-sub:      #5A6474;
    --c-text-hint:     #8A93A3;
    --c-text-muted:    #8A93A3;

    --c-primary-hover: #1E40AF;
    /* #93C5FD(진한 하늘색)가 조직도·직책·회의설정의 "두꺼운 파란 띠"와 아바타 원을
       전부 만들고 있었습니다. 이 한 값을 무채색으로 내리면 그 띠들이 동시에 조용해집니다.
       (좌측 판은 이 토큰을 쓰지 않으므로 :root 에 둬도 안전합니다) */
    --c-primary-light: #EDF1F7;

    --c-success:    #15803D;  --c-success-bg: #F1F7F3;
    --c-warning:    #B45309;  --c-warning-bg: #FBF6EC;
    --c-danger:     #B91C1C;  --c-danger-bg:  #FBF2F2;
    --c-danger-hover: #991B1B;

    /* 그림자 3종 — 면에서는 완전히 없애고, 진짜 떠 있는 것(모달)만 남깁니다 */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 18px 48px rgba(17, 24, 39, 0.20);

    /* ── 원본 CSS·JS 가 참조하지만 정의된 적 없던 토큰들 ──
       (지금까지 조직도 멤버 테두리·겸직 임원 카드 배경이 '무효값'으로 비어 있었습니다) */
    --c-border-light: #E6EAF1;
    --c-surface:      #FFFFFF;
    --c-bg-subtle:    #F7F9FC;
    --c-bg-soft:      #F7F9FC;
    --c-bg-sub:       #F7F9FC;
    --c-bg-hover:     #F5F7FA;

    /* ── accounting.css 토큰 재정의 ── */
    --acct-ink:       #1A1D23;
    --acct-ink-2:     #2E3542;
    --acct-sub:       #5A6474;
    --acct-faint:     #98A1B0;
    --acct-line:      #EDF0F5;
    --acct-line-2:    #DDE3EC;
    --acct-tint:      #F7F9FC;
    --acct-tint-2:    #EEF2F7;
    --acct-in:        #1D4ED8;  --acct-in-bg:   #F3F6FC;  --acct-in-line:   #CBD9F2;
    --acct-out:       #B91C1C;  --acct-out-bg:  #FBF2F2;  --acct-out-line:  #EFC9C9;
    --acct-ok:        #15803D;  --acct-ok-bg:   #F1F7F3;  --acct-ok-line:   #C3E3CE;
    --acct-warn:      #B45309;  --acct-warn-bg: #FBF6EC;  --acct-warn-line: #EBD5AE;
    --acct-r:         0px;
    --acct-r-md:      0px;
    --acct-r-sm:      3px;
    --acct-row-h:     44px;
}


/* ================================================================================
   1-B. 좌측 기둥을 지키기 위한 '본문 전용' 토큰 3개  ★ 이 파일의 핵심 장치
   ────────────────────────────────────────────────────────────────────────────
   좌측 240px 판은 admin.css 안에서 아래 세 토큰만 참조합니다.
     · 판 배경     = var(--c-text)        → #111827 (먹색)
     · 로고 사각   = var(--c-primary)     → #2563EB (파랑)
     · 현재 위치   = var(--c-primary)     → #2563EB (파랑)
     · 발밑 얼굴칸 = var(--c-primary-bg)  → #EFF6FF (연한 하늘)
   이 셋을 :root 에서 바꾸면 좌측 판까지 같이 변합니다. 그래서 :root 에는 두지 않고,
   본문에 해당하는 컨테이너에만 겁니다. CSS 변수는 자식에게 상속되므로 이 한 블록으로
   로그인 화면 · 헤더 · 본문 · 모달 · 토스트 안쪽 전부가 서류형 값을 받고,
   좌측 판(형제 요소)만 admin.css 원값을 그대로 유지합니다.

   ⚠ 컨테이너 목록을 늘릴 일이 생기면 여기만 고치면 됩니다. 목록에서 빠진 요소는
     '깨지는' 것이 아니라 개편 전 파란색을 그대로 쓰게 됩니다(안전 실패).
   ================================================================================ */
.login-page,
.header,
.main-content,
.modal-overlay,
.admin-toast,
.menu-hint-toast,
.att-floating-tip,
.save-bar {
    --c-text:       #1A1D23;
    --c-primary:    #1D4ED8;
    --c-primary-bg: #F4F6FA;   /* 행 호버·연한 강조 — 파랑기를 뺀 회색 */
}


/* ================================================================================
   2. 활자 — 인상 변화의 절반
   system-ui(맑은 고딕/Segoe) → Pretendard. 폼 컨트롤은 font-family 를 상속받지
   않으므로 button·input·select·textarea 에 명시적으로 지정합니다.
   숫자는 전부 등폭(tabular-nums) — 금액·인원수의 자릿수 축이 세로로 한 줄이 됩니다.
   ================================================================================ */
body,
button,
input,
select,
textarea,
.btn,
.chip,
.filter-tab,
.search-input,
.form-input,
.filter-select,
.filter-date,
.role-select,
.pos-select {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                 system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

body {
    background: var(--doc-paper);
    color: var(--doc-ink);
    font-size: 14px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 표·통계·금액은 등폭 숫자로 — 서류의 숫자 축이 흔들리지 않습니다 */
table,
.stat-value,
.dash-stat-value,
.dash-week-day,
.dash-week-time,
.pagination,
.pos-count,
.ic-child-count,
.page-count,
.dash-todo-count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* 제목 계열 — 자간을 좁혀 편집 디자인의 밀도를 냅니다 */
h1, h2, h3, h4,
.page-title,
.header-title,
.card-header,
.stat-value,
.dossier-name,
.profile-card-name,
.acct-stat-value,
.acct-fig-val,
.dash-stat-value {
    letter-spacing: -0.025em;
}

::selection { background: var(--doc-head); color: #fff; }

/* 키보드 초점 — 서류형은 파란 번짐 대신 각진 먹줄로.
   ⚠ 본문 영역에만 겁니다. 어두운 좌측 판에 먹색 테두리를 그리면 초점이 보이지 않아
     키보드 사용자가 길을 잃습니다. 좌측 판은 브라우저 기본 초점 표시를 그대로 둡니다. */
.login-page   :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.header       :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.main-content :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.modal-overlay :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--doc-head);
    outline-offset: 1px;
}


/* ================================================================================
   3. 페이지 셸 — 제목 밑 2px 먹줄(마스트헤드)
   19개 화면이 쓰는 .page-header 는 지금까지 CSS 정의가 아예 없는 맨 div 였습니다.
   여기에 신문 제호 같은 굵은 밑줄 한 줄을 넣으면 전 화면이 동시에 '서류'가 됩니다.
   (인라인 style 의 display·margin 은 건드리지 않고 padding·border 만 얹습니다)
   ================================================================================ */
.main-content {
    background: var(--doc-paper);
    padding-top: 22px;
}

/* 굵은 먹줄(마스트헤드) 전면 폐지 (2026-08-19 사장님 확정 지적 2건):
   ① 찐한 줄 바로 밑에 회색 줄이 겹쳐 무의미 ② 참석로그처럼 제목 마크업이 없는
   화면에는 찐한 줄이 아예 없어 화면끼리 비일관.
   → 규칙: 제목은 굵은 글자로만 세우고, 선은 전 화면 공통 "가는 회색 1개"만. */
.page-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--doc-rule);
}
.page-toolbar {
    padding-bottom: 12px;
    border-bottom: none;
}

/* 제목 밑줄 바로 아래에 표/카드가 붙으면 그쪽 윗줄은 중복 — 한 겹만 남긴다 */
.page-header + .table-wrap,
.page-header + .card,
.page-toolbar + .table-wrap,
.page-toolbar + .card,
.page-header + .page-toolbar + .table-wrap,
.page-header + .page-toolbar + .card {
    border-top: none;
}

.page-header h2,
.page-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--doc-head);
    letter-spacing: -0.03em;
}
.page-header p {
    color: var(--doc-ink-2);
    line-height: 1.65;
}

.page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--doc-head);
}

/* 총건수 — 알약을 벗기고 '굵은 숫자'로만 (계약: 개수는 굵은 숫자만) */
.page-count {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--doc-ink);
    font-size: 15px;
    font-weight: 800;
}

.toolbar { margin-bottom: 18px; }
.filter-bar,
.audit-filter-bar { align-items: center; margin-bottom: 18px; }


/* ================================================================================
   4. 좌측 메뉴 기둥 — 손대지 않습니다 (사장님 확정)
   ────────────────────────────────────────────────────────────────────────────
   원본 시안(design_preview/admin_v3_doc.css §4)에는 좌측 판을 흰 종이로 뒤집는
   규칙 20여 개가 있었습니다. 사장님께서 "현행 다크 기둥은 그대로 두고 나머지만
   서류형" 으로 확정하셨으므로 그 블록을 통째로 들어냈습니다.
   이 파일에는 좌측 판을 가리키는 셀렉터가 하나도 없고, 좌측 판이 참조하는
   토큰 3개도 §1-B 에서 본문 영역에만 걸어 두었습니다. 결과적으로 좌측 판은
   admin.css 원형(먹색 판 #111827 + 파란 현재위치 #2563EB) 그대로 보입니다.
   ================================================================================ */


/* ================================================================================
   5. 상단 헤더 — 흰색 · 제목 17px 굵게 · 하단 1px 경계 (그림자 폐지)
   우측 ⚙ 설정 버튼과 그 드롭다운도 본문 영역이므로 서류형 문법을 적용합니다.
   ================================================================================ */
.header {
    background: var(--doc-paper);
    box-shadow: none;
    border-bottom: 1px solid var(--doc-rule);
    padding: 0 26px;
}

.header-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--doc-head);
    letter-spacing: -0.03em;
}

.header-user { color: var(--doc-ink-2); }
.header-user-link { border-radius: 2px; color: var(--doc-ink-2); font-weight: 600; }
.header-user-link:hover { background: var(--doc-tint); color: var(--doc-head); }

.header-gear-btn { border-radius: 2px; color: var(--doc-ink-2); }
.header-gear-btn:hover { background: var(--doc-tint); color: var(--doc-head); }
/* 지금 보고 있는 화면이 ⚙ 안이면 — 먹색 사각으로 '여기 있음'을 알립니다 */
.header-gear-btn.active {
    background: var(--doc-head);
    border-color: var(--doc-head);
    color: #fff;
}

.header-gear-menu {
    padding: 4px;
    border-radius: 3px;
    border: 1px solid var(--doc-rule);
    box-shadow: var(--shadow-lg);
}
/* ⚙ 드롭다운 항목 — 좌측 판과 같은 클래스명을 쓰지만 위치는 헤더(본문 영역)입니다.
   반드시 .header-gear-menu 밑으로만 한정해서 좌측 판에 닿지 않게 합니다. */
.header-gear-menu .nav-link { color: var(--doc-ink-2); border-radius: 2px; }
.header-gear-menu .nav-link:hover { background: var(--doc-tint); color: var(--doc-head); }
.header-gear-menu .nav-link.active { background: var(--doc-head); color: #fff; font-weight: 700; }
.header-gear-divider { background: var(--doc-rule); }


/* ================================================================================
   6. 면(surface) 해체 — 카드가 사라지고 페이지가 한 장의 서류가 됩니다
   "흰 카드 + 둥근 모서리 + 옅은 그림자"의 반복이 AI 템플릿 인상의 핵심이었습니다.
   그림자·모서리·테두리를 걷고, 구역 위에 2px 먹줄 하나만 올립니다(신문 섹션 머리).
   좌우 안쪽 여백도 0 으로 눕혀 본문이 페이지 판면에 그대로 붙게 합니다.
   ================================================================================ */
.card,
.settings-section,
.acct-card,
.dossier-tab-content,
.profile-card,
.dossier-profile-card,
.stat-card,
.acct-stat,
.acct-band,
.acct-notice,
.acct-empty,
.pos-group-card,
.ic-group {
    background: var(--doc-paper);
    border: none;
    border-top: 1px solid var(--doc-rule);   /* 먹줄은 페이지 제목에만 — 구역은 가는 선 */
    border-radius: 0;
    box-shadow: none;
}

/* 구역 머리 — 배경을 칠하지 않고 굵기·색·가는 밑줄로만 세웁니다 */
.card-header,
.acct-card-head,
.settings-section-header,
.mtg-card-head {
    padding: 14px 0 12px;
    background: transparent;
    border-bottom: 1px solid var(--doc-rule);
    color: var(--doc-head);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.acct-card-head h3,
.settings-section-header h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--doc-head);
    letter-spacing: -0.025em;
}
.settings-section-header svg { stroke: var(--doc-ink-2); }

.card-body,
.acct-card-body,
.settings-section-body,
.mtg-card-body {
    padding: 16px 0 22px;
}

/* 표 껍데기 — 카드째로 눕힙니다(가로 스크롤은 그대로 유지) */
.table-wrap,
.acct-table-wrap,
.attendance-table-wrap,
#acct-panel .table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* 통계 카드가 마우스에 들썩이던 것을 멈춥니다 — 업무 서류에서는 산만합니다 */
.stat-card { padding: 16px 0 18px; }
.stat-card-clickable:hover {
    transform: none;
    box-shadow: none;
    background: var(--doc-tint-2);
}

/* 아이콘 타일 — 파스텔 둥근 사각 → 1px 테두리 빈 사각 + 저채도 잉크 아이콘 */
.stat-icon,
.permission-icon,
.acct-stat-icon,
.dash-todo-icon {
    background: transparent;
    border: 1px solid var(--doc-rule);
    border-radius: 2px;
    color: var(--doc-ink-2);
}
.stat-icon.blue,   .stat-icon-primary { background: transparent; color: var(--doc-navy); }
.stat-icon.green,  .stat-icon-success { background: transparent; color: var(--doc-ok); }
.stat-icon.yellow, .stat-icon-warning { background: transparent; color: var(--doc-warn); }
.stat-icon.red,    .stat-icon-danger  { background: transparent; color: var(--doc-bad); }
.stat-icon-purple { background: transparent; color: #5B21B6; }
.permission-icon.icon-member,
.permission-icon.icon-post,
.permission-icon.icon-schedule,
.permission-icon.icon-notice,
.permission-icon.icon-push { background: transparent; }
.acct-stat.tone-ok   .acct-stat-icon { background: transparent; color: var(--doc-ok); }
.acct-stat.tone-warn .acct-stat-icon { background: transparent; color: var(--doc-warn); }
.acct-stat.tone-out  .acct-stat-icon { background: transparent; color: var(--doc-bad); }
.acct-stat.tone-in   .acct-stat-icon { background: transparent; color: var(--doc-navy); }

.stat-value  { font-size: 27px; font-weight: 800; color: var(--doc-head); }
.stat-label  { color: var(--doc-ink-2); }

/* 사람 얼굴도 증명사진처럼 각지게 — 명부 서류의 문법입니다 */
.avatar,
.avatar-sm,
.profile-card-avatar,
.dossier-avatar,
.dossier-avatar.dossier-avatar-lg {
    border-radius: 2px;
    background: #EDF1F6;
    color: var(--doc-head);
}
.dossier-avatar img { border-radius: 2px; }
.avatar-camera-btn { border-radius: 2px; border-color: var(--doc-rule); box-shadow: none; }
/* JS 가 인라인으로 border-radius:50% 를 박아 둔 로고 아바타(회원 목록 전반) */
.avatar > img,
.avatar-sm > img,
.profile-card-avatar > img,
.dossier-avatar > img { border-radius: 2px !important; }


/* ================================================================================
   7. 표 — 신문 조판 (관리 콘솔의 주인공)
   머리 위 2px 먹줄 · 머리 배경 없음 · 세로줄 없음 · zebra 없음 ·
   가로선은 1px #E6EAF1 한 겹 · 행 높이 36px · 첫/끝 칸은 판면에 붙임.
   ================================================================================ */
table { border-collapse: collapse; }

thead th,
.data-table th,
.acct-table thead th {
    padding: 9px 14px 8px;
    background: transparent;
    border-top: 1px solid var(--doc-rule);
    border-bottom: 1px solid var(--doc-rule);
    color: var(--doc-ink-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;      /* 한글엔 효과가 없고 영문 라벨만 딱딱해집니다 */
    letter-spacing: 0.02em;
}

tbody td,
.data-table td {
    padding: 8px 14px;         /* 13px → 8px : 행 높이 46px → 36px */
    border-bottom: 1px solid var(--doc-rule-2);
    color: var(--doc-ink);
    font-size: 14px;
}

/* 첫 칸·끝 칸을 판면 끝에 맞춥니다 — 제목 밑 먹줄과 세로 축이 맞습니다
   (참석 로그 매트릭스는 고정 열이 있어 제외) */
.table-wrap table:not(.attendance-table) thead th:first-child,
.table-wrap table:not(.attendance-table) tbody td:first-child,
.acct-table-wrap .acct-table thead th:first-child,
.acct-table-wrap .acct-table tbody td:first-child { padding-left: 2px; }
.table-wrap table:not(.attendance-table) thead th:last-child,
.table-wrap table:not(.attendance-table) tbody td:last-child,
.acct-table-wrap .acct-table thead th:last-child,
.acct-table-wrap .acct-table tbody td:last-child { padding-right: 2px; }

/* 행 호버가 파란 판때기로 번쩍이던 것을 종이 그림자 정도로 낮춥니다 */
tbody tr:hover { background: var(--doc-tint); }
.data-table tr:hover { background: var(--doc-tint); }
.acct-table tbody tr:hover { background: var(--doc-tint); }
.mtg-table .mtg-row:hover { background: var(--doc-tint); }

/* 회계 표 — 행 높이만 한 단계 넉넉히(금액 줄) */
.acct-table tbody td { padding: 11px 14px; color: var(--doc-ink); }
.acct-table td.acct-name { color: var(--doc-head); font-weight: 700; }
.acct-money { color: var(--doc-head); font-weight: 700; }

.table-empty { color: var(--doc-ink-3); padding: 44px 20px; }
.table-empty svg { stroke: var(--doc-rule); }

/* 회원 관리 — 직책 미입력 줄 : 행 전체를 파랗게 칠하면 '선택된 줄'과 헷갈립니다.
   바탕은 흰 종이로 되돌리고 좌측 3px 먹줄로만 "여기 볼 것"을 표시합니다. */
.data-table tbody tr.member-row-nopos > td { background: #FCFCFD; }
.data-table tbody tr.member-row-nopos > td:first-child { box-shadow: inset 3px 0 0 var(--doc-warn); }
.data-table tbody tr.member-row-nopos:hover > td { background: var(--doc-tint); }

.pagination { padding: 18px 0 4px; }
.pagination button {
    border-radius: 2px;
    border-color: var(--doc-rule);
    color: var(--doc-ink-2);
    font-weight: 600;
}
.pagination button:hover:not(:disabled) { border-color: var(--doc-head); color: var(--doc-head); background: var(--doc-tint); }
.pagination button.active { background: var(--doc-head); border-color: var(--doc-head); color: #fff; }


/* ================================================================================
   8. 상태 표시 — 배경칠 전폐 · 6px 색점 + 본문색 글자  (계약의 핵심)
   "● 활동" 처럼 읽힙니다. 알약이 사라지면 표 한 장에서 색 덩어리가 전부 빠집니다.
   ⚠ 글자(라벨)는 그대로 남습니다 — 색만으로 뜻을 전하지 않습니다.
   ⚠ .badge 의 display:inline-block 은 건드리지 않고, 점은 ::before 로 새로 그립니다.
   ================================================================================ */
.badge,
.action-badge,
.acct-badge,
.perm-role-badge,
.badge-active, .badge-success, .badge-pending, .badge-suspended,
.badge-muted, .badge-admin, .badge-notice, .badge-general,
.badge-cat-blue, .badge-cat-green, .badge-cat-yellow, .badge-cat-red,
.action-badge.action-danger, .action-badge.action-warning,
.action-badge.action-info, .action-badge.action-view,
.perm-role-badge.role-super_admin, .perm-role-badge.role-admin, .perm-role-badge.role-member,
.acct-badge-income, .acct-badge-expense, .acct-badge-ok,
.acct-badge-danger, .acct-badge-warn, .acct-badge-muted {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--doc-ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 색점 — 6px. 기본은 무채색이고, 아래에서 상태별로 색을 줍니다 */
.badge::before,
.action-badge::before,
.perm-role-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    vertical-align: 0.12em;
    border-radius: 50%;
    background: var(--doc-ink-3);
}
/* 이 배지는 inline-flex + gap:6px 이라 여백이 두 번 들어갑니다 */
.perm-role-badge::before { margin-right: 0; }
/* .acct-badge 는 accounting.css 에 이미 점(::before)이 있어 크기·색만 고칩니다 */
.acct-badge::before {
    width: 6px;
    height: 6px;
    margin-right: 1px;
    background: var(--doc-ink-3);
}

.badge-active::before,
.badge-success::before,
.acct-badge-ok::before          { background: var(--doc-ok); }
.badge-pending::before,
.acct-badge-warn::before,
.action-badge.action-warning::before { background: var(--doc-warn); }
.badge-suspended::before,
.acct-badge-danger::before,
.acct-badge-expense::before,
.action-badge.action-danger::before,
.perm-role-badge.role-super_admin::before { background: var(--doc-bad); }
.badge-admin::before,
.badge-notice::before,
.acct-badge-income::before,
.action-badge.action-info::before,
.perm-role-badge.role-admin::before  { background: var(--doc-navy); }
.badge-muted::before,
.badge-general::before,
.acct-badge-muted::before,
.action-badge.action-view::before,
.perm-role-badge.role-member::before { background: #C2C9D4; }

.badge-cat-blue::before   { background: var(--doc-navy); }
.badge-cat-green::before  { background: var(--doc-ok); }
.badge-cat-yellow::before { background: var(--doc-warn); }
.badge-cat-red::before    { background: var(--doc-bad); }

/* ── 개수는 굵은 숫자만 (알약·테두리 없음) ── */
.dash-todo-count,
.pos-count,
.ic-child-count,
.acct-count-badge {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.pos-count, .ic-child-count, .acct-count-badge { color: var(--doc-ink-2); }
.dash-todo-count { color: var(--doc-bad); font-size: 16px; }
.dash-todo-zero  { color: var(--doc-ink-3); }


/* ================================================================================
   9. 필터 — 알약 → 각진 색인표(index tab)
   선택된 것만 먹색으로 채워 '지금 펼친 장'을 알립니다.
   ⚠ 높이·여백을 키워 클릭 대상은 오히려 넓어집니다(32px → 34px).
   ================================================================================ */
.filter-tabs {
    gap: 2px;
    border-bottom: 1px solid var(--doc-rule);
    margin-bottom: 2px;
}
.filter-tab {
    min-height: 34px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--doc-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.filter-tab:hover { background: var(--doc-tint); border-color: transparent; color: var(--doc-head); }
.filter-tab.active {
    background: var(--doc-head);
    border-color: var(--doc-head);
    color: #fff;
    font-weight: 700;
}

.chip {
    height: 34px;
    border-radius: 0;
    border: 1px solid var(--doc-rule);
    background: var(--doc-paper);
    color: var(--doc-ink-2);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.chip:hover { border-color: var(--doc-head); color: var(--doc-head); background: var(--doc-tint); }
.chip.chip-active,
.chip-active {
    background: var(--doc-head);
    border-color: var(--doc-head);
    color: #fff;
}
.chip.chip-active:hover { background: #000; color: #fff; }


/* ================================================================================
   10. 버튼 — 사각 3px. 채움은 '주요' 하나뿐, 나머지는 흰 바탕 + 1px 테두리 글자 버튼
   표 한 줄에 3~4개씩 반복되던 빨강·초록·주황 덩어리가 전부 조용해집니다.
   마우스를 올리면 제 색으로 채워져 "누르면 실행된다"는 신호는 그대로 남습니다.
   ================================================================================ */
/* ⚠ padding 은 원본 값을 그대로 두고 min-height 만 얹습니다 — 클릭 대상은 커지기만 합니다
   (.btn 38px ← 기존 약 38px / .btn-sm 30px ← 기존 약 26px) */
.btn {
    min-height: 38px;
    padding: 9px 18px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn:active { transform: none; }          /* 눌릴 때 크기 출렁임 제거 */
.btn-sm { min-height: 30px; padding: 5px 12px; font-size: 12.5px; border-radius: 2px; }
.btn-block { height: 48px; border-radius: 3px; font-size: 15px; }

/* 딱 하나의 채움 — 진남색 (포인트색은 링크·주요 버튼에만) */
.btn-primary {
    background: var(--doc-navy);
    border-color: var(--doc-navy);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: #1E40AF; border-color: #1E40AF; }

/* 나머지는 전부 흰 바탕 + 1px 테두리 텍스트 버튼 */
.btn-outline,
.btn-ghost {
    background: var(--doc-paper);
    border-color: var(--doc-rule);
    color: var(--doc-ink);
}
.btn-outline:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
    background: var(--doc-tint);
    border-color: var(--doc-head);
    color: var(--doc-head);
}

.btn-danger,
.btn-danger-outline {
    background: var(--doc-paper);
    border-color: #E4C4C4;
    color: var(--doc-bad);
}
.btn-danger:hover:not(:disabled),
.btn-danger-outline:hover:not(:disabled) {
    background: var(--doc-bad);
    border-color: var(--doc-bad);
    color: #fff;
}

.btn-success {
    background: var(--doc-paper);
    border-color: #C3DCCB;
    color: var(--doc-ok);
}
.btn-success:hover:not(:disabled) { background: var(--doc-ok); border-color: var(--doc-ok); color: #fff; }

.btn-warning {
    background: var(--doc-paper);
    border-color: #E3D2B4;
    color: var(--doc-warn);
}
.btn-warning:hover:not(:disabled) { background: var(--doc-warn); border-color: var(--doc-warn); color: #fff; }

.btn-icon-sm { border-radius: 2px; color: var(--doc-ink-2); }
.btn-icon-sm:hover { background: var(--doc-tint); color: var(--doc-head); }
.btn-del-x { border-radius: 2px; border-color: var(--doc-rule); color: var(--doc-ink-3); }
.btn-del-x:hover { background: var(--doc-bad); border-color: var(--doc-bad); color: #fff; }
.pos-del { border-color: #E4C4C4; color: var(--doc-bad); }
.pos-del:hover { background: var(--doc-bad); border-color: var(--doc-bad); color: #fff; }


/* ================================================================================
   11. 입력 — 사각 3px · 가는 테두리 · 초점은 파란 번짐 대신 먹줄
   날짜 칸이 다른 입력과 높이·테두리가 달라 '날것'으로 보이던 것도 같이 맞춥니다.
   ================================================================================ */
.search-input,
.form-input,
.filter-select,
.filter-date,
.role-select,
.pos-select,
.acct-input,
.acct-page .filter-select,
.content-form-input,
.content-form-textarea,
.form-field input:not([type="radio"]):not([type="checkbox"]),
.form-field select,
.form-field textarea,
.acct-field input,
.acct-field select,
.acct-field textarea {
    border-radius: 3px;
    border-color: var(--doc-rule);
    color: var(--doc-ink);
    background: var(--doc-paper);
    letter-spacing: -0.01em;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--doc-rule);
    border-radius: 3px;
    background: var(--doc-paper);
    color: var(--doc-ink);
    font-family: inherit;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.8; }
input[type="date"]::-webkit-datetime-edit-text { color: var(--doc-ink-3); padding: 0 1px; }

/* 초점 — 3px 파란 번짐 → 먹색 테두리 한 겹 (서류의 기입란) */
.search-input:focus,
.form-input:focus,
.filter-select:focus,
.filter-date:focus,
.pos-select:focus,
.role-select:focus,
.acct-input:focus,
.acct-page .filter-select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.acct-field input:focus,
.acct-field select:focus,
.acct-field textarea:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
    border-color: var(--doc-head);
    box-shadow: inset 0 -2px 0 var(--doc-head);
    outline: none;
}

.form-field label,
.acct-field label,
.content-form-label {
    color: var(--doc-ink-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* 토글 스위치 — 트랙만 각지게(3px), 손잡이는 원형 유지(스위치로 읽혀야 하므로) */
/* 스위치는 각지게 하지 않는다 — 겉만 네모, 알맹이 원형이면 흉하다 (2026-08-19 사장님 지적) */
.toggle-slider,
.perm-toggle .perm-slider { border-radius: 999px; }
.toggle-slider::before,
.perm-toggle .perm-slider::before { border-radius: 50%; box-shadow: none; border: 1px solid rgba(17,24,39,0.14); }
.toggle-switch input:checked + .toggle-slider,
.perm-toggle input:checked + .perm-slider { background: var(--doc-head); }

.editable-field { border-radius: 2px; }
.editable-field .edit-input,
td.editable-cell .cell-input { border-radius: 2px; border-color: var(--doc-head); }


/* ================================================================================
   12. 대시보드 — 3층 구조를 '연감 통계면'으로
   ================================================================================ */
.dash2 { gap: 24px; }

/* 좌우만 판면에 붙이고 세로 높이는 그대로 둡니다(누르는 줄이므로) */
.dash-todo-row { border-radius: 0; border-bottom-color: var(--doc-rule-2); padding: 12px 2px; }
button.dash-todo-row:hover { background: var(--doc-tint); }
.dash-todo-go { color: var(--doc-ink-3); }
button.dash-todo-row:hover .dash-todo-go { color: var(--doc-head); }

.dash-week-row { border-bottom-color: var(--doc-rule-2); padding: 11px 2px; }
.dash-week-day { color: var(--doc-ink-2); }

/* 종류 라벨·응답 현황도 §8 문법(색점 + 본문색 글자)으로 통일 */
.dash-week-kind,
.dash-week-kind.is-meeting,
.dash-week-kind.is-schedule,
.dash-rsvp,
.dash-rsvp.is-none {
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--doc-ink);
    font-size: 12.5px;
    font-weight: 600;
}
.dash-week-kind::before,
.dash-rsvp::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    vertical-align: 0.12em;
    border-radius: 50%;
    background: var(--doc-ink-3);
}
.dash-week-kind.is-meeting::before  { background: var(--doc-navy); }
.dash-week-kind.is-schedule::before { background: var(--doc-ok); }
.dash-rsvp::before { background: var(--doc-warn); }
.dash-rsvp.is-none::before { background: #C2C9D4; }
.dash-rsvp.is-none { color: var(--doc-ink-3); }

/* 오늘 생일 — 노란 상자 → 좌측 3px 먹줄 한 줄 */
.dash-bday {
    padding: 11px 0 11px 12px;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 3px 0 0 var(--doc-warn);
    border-bottom: 1px solid var(--doc-rule-2);
}
.dash-bday .btn { background: var(--doc-paper); border-color: var(--doc-rule); }

/* 현황 3칸 — 회색 둥근 타일 → 위 2px 먹줄만 있는 통계 단(段) */
.dash-stat-cell {
    padding: 14px 0 4px;
    border-radius: 0;
    background: transparent;
    border-top: 1px solid var(--doc-rule);
}
.dash-stat-label { color: var(--doc-ink-2); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.dash-stat-value { font-size: 26px; font-weight: 800; color: var(--doc-head); }
.dash-stat-sub { color: var(--doc-ink-3); }
.dash-delta { color: var(--doc-ok); }
.dash-delta.is-zero { color: var(--doc-ink-3); }
.dash-money-in  { color: var(--doc-navy); }
.dash-money-out { color: var(--doc-bad); }
.dash-empty, .dash-hint { color: var(--doc-ink-3); }

.recent-item { border-bottom-color: var(--doc-rule-2); }
.recent-sub, .recent-time { color: var(--doc-ink-3); }


/* ================================================================================
   13. 참석 로그 O/X — 초록 출석 도장판 → 서류 기입란
   O = 먹색 진한 글자(배경 없음) / X = 옅은 회색. 글자와 aria-label 은 그대로 둡니다.
   ================================================================================ */
.attendance-table thead th {
    background: var(--doc-paper);
    border-top: 1px solid var(--doc-rule);
    border-bottom: 1px solid var(--doc-rule);
}
.attendance-table thead th.att-col-name,
.attendance-table thead th.att-col-pos { background: var(--doc-paper); }
.attendance-table .att-event-title { color: var(--doc-head); }
.attendance-table .att-event-date { color: var(--doc-ink-3); }

.attendance-table th,
.attendance-table td { border-bottom-color: var(--doc-rule-2); }
.attendance-table .att-col-pos { border-right: 1px solid var(--doc-rule); box-shadow: none; }

/* zebra 폐지 */
.attendance-table tbody tr:nth-child(even) > td { background: var(--doc-paper); }
.attendance-table tbody tr.att-row-special > .att-col-name,
.attendance-table tbody tr.att-row-special > .att-col-pos,
.attendance-table tbody tr.att-row-special > td { background: #FCFAF4; }
.attendance-table tbody tr:hover > td { background: var(--doc-tint); }
.attendance-table tbody tr.att-row-special:hover > td { background: #F7F3E9; }

.attendance-table .att-o,
.attendance-table .att-x,
.att-legend .att-o,
.att-legend .att-x {
    border-radius: 0;
    background: transparent;
}
.attendance-table .att-o,
.att-legend .att-o { color: var(--doc-head); font-weight: 800; }
.attendance-table .att-x,
.att-legend .att-x { color: #C7CDD8; font-weight: 500; }

/* 열 머리의 참석/불참/미정 집계 — 알약을 벗기고 숫자로만 */
.attendance-table .att-t {
    border-radius: 0;
    background: transparent;
    font-weight: 700;
}
.attendance-table .att-t-yes  { color: var(--doc-ok); }
.attendance-table .att-t-no   { color: var(--doc-ink-2); }
.attendance-table .att-t-un   { color: var(--doc-warn); }
.attendance-table .att-t-zero { color: var(--doc-ink-3); }

.att-memo-mark::after { border-radius: 50%; background: var(--doc-warn); box-shadow: 0 0 0 2px #fff; }
.att-floating-tip { border-radius: 2px; background: var(--doc-head); }
.att-legend { color: var(--doc-ink-2); }


/* ================================================================================
   14. 회계 — 색 체계·정보 배치는 2026-07-29 개편본을 존중하고 '면'만 눕힙니다
   ================================================================================ */
/* 탭 레일 — 둥근 알약 레일 → 아래 규칙선 위에 놓인 각진 색인표 */
.acct-tabs {
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--doc-rule);
    border-radius: 0;
    margin-bottom: 20px;
}
.acct-tab { border-radius: 0; color: var(--doc-ink-2); font-weight: 600; }
.acct-tab:hover { background: var(--doc-tint); color: var(--doc-head); }
.acct-tab.active {
    background: var(--doc-head);
    color: #fff;
    box-shadow: none;
    font-weight: 700;
}
.acct-tab.active svg { opacity: 1; }

/* 툴바 — 떠 있는 흰 띠 → 아래 가는 줄 하나 */
.acct-toolbar {
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--doc-rule);
    border-radius: 0;
    box-shadow: none;
}
.acct-seg {
    padding: 0;
    background: transparent;
    border: 1px solid var(--doc-rule);
    border-radius: 0;
}
.acct-seg .chip { border-radius: 0; box-shadow: none; }
.acct-seg .chip:hover { background: var(--doc-tint); color: var(--doc-head); }
.acct-seg .chip.chip-active { background: var(--doc-head); color: #fff; box-shadow: none; }
.acct-range, .acct-monthnav { border-radius: 3px; border-color: var(--doc-rule); }
.acct-monthnav .acct-navbtn:hover { background: var(--doc-tint); color: var(--doc-head); }
.acct-range:focus-within { border-color: var(--doc-head); box-shadow: none; }

/* 요약 카드 — 위 2px 먹줄 + 좌측 3px 성격 띠 (서류철 색인 탭 느낌) */
.acct-stat { padding: 16px 0 18px 14px; }
.acct-stat::before { width: 3px; background: #C7CDD8; }
.acct-stat.tone-ok::before   { background: var(--doc-ok); }
.acct-stat.tone-warn::before { background: var(--doc-warn); }
.acct-stat.tone-out::before  { background: var(--doc-bad); }
.acct-stat.tone-in::before   { background: var(--doc-navy); }
.acct-stat-label { color: var(--doc-ink-2); font-weight: 700; }
.acct-stat-value { font-size: 26px; font-weight: 800; color: var(--doc-head); }
.acct-stat-cap { color: var(--doc-ink-2); }
.acct-meter { border-radius: 0; background: #EEF1F6; height: 4px; }
.acct-meter > span { border-radius: 0; background: var(--doc-ok); }

/* 안내문 — 색 상자를 걷고 좌측 규칙선 한 줄로 */
.acct-hint {
    padding: 10px 0 10px 13px;
    background: transparent;
    border: none;
    border-left: 3px solid var(--doc-head);
    border-radius: 0;
    color: var(--doc-ink-2);
}
.acct-hint b { color: var(--doc-head); }
.acct-hint.plain { border-left: none; padding-left: 19px; }
.acct-hint.plain::before {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--doc-rule);
    color: var(--doc-ink-2);
    line-height: 13px;
}
.acct-hint.warn {
    background: transparent;
    border-left: 3px solid var(--doc-warn);
    color: #7C3E06;
}
.acct-legend {
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--doc-rule);
    border-radius: 0;
    color: var(--doc-ink-2);
}
.acct-dot { border-radius: 50%; width: 7px; height: 7px; }

/* 결산 요약 띠 — 칸 사이 세로 규칙선만 남깁니다 */
.acct-band { padding: 0; }
.acct-fig { padding: 16px 18px; border-left: 1px solid var(--doc-rule); }
.acct-fig:first-child { padding-left: 0; }
.acct-fig-label { color: var(--doc-ink-2); font-weight: 700; }
.acct-fig-val { color: var(--doc-head); font-weight: 800; }
.acct-fig-cap { color: var(--doc-ink-2); }
.acct-fig.is-in  .acct-fig-val { color: var(--doc-navy); }
.acct-fig.is-out .acct-fig-val { color: var(--doc-bad); }
/* 결론 칸 — 배경 대신 위쪽 굵은 먹줄로 '확정된 답' 표시 */
.acct-fig.is-result {
    background: transparent;
    border-left: 1px solid var(--doc-rule);
    box-shadow: inset 0 3px 0 var(--doc-head);
}

.acct-settle-section td { background: transparent; border-top: 1px solid var(--doc-rule); color: var(--doc-ink-2); }
.acct-settle-section.is-in td  { box-shadow: inset 3px 0 0 var(--doc-navy); color: var(--doc-navy); }
.acct-settle-section.is-out td { box-shadow: inset 3px 0 0 var(--doc-bad);  color: var(--doc-bad); }
.acct-table tbody tr.acct-settle-carry td { background: transparent; color: var(--doc-head); }
.acct-table tbody tr.acct-settle-carry:hover td { background: var(--doc-tint); }
.acct-table tbody tr.acct-settle-carry.is-result td {
    border-top: 2px solid var(--doc-head);
    background: transparent;
}
.acct-table tbody tr.acct-tx-excluded { background: #FCFAF4; }
.acct-table tbody tr.acct-tx-excluded:hover { background: #F7F3E9; }

/* 검산 줄 — 초록 배너 → 위 가는 줄 + 조용한 한 문장 */
.acct-check {
    padding: 10px 0 0;
    border: none;
    border-top: 1px solid var(--doc-rule);
    border-radius: 0;
    background: transparent;
    color: var(--doc-ok);
}
.acct-check.bad { background: transparent; color: var(--doc-bad); }

.acct-bar-track, .acct-bar-fill { border-radius: 0; }
.acct-bar-track { background: #EEF1F6; height: 7px; }
.acct-fill-ok { background: var(--doc-head); }
.acct-fill-warn { background: var(--doc-warn); }
.acct-rate-ok { color: var(--doc-head); }

.acct-cat-item { padding: 10px 0; border-bottom-color: var(--doc-rule-2); }
.acct-cat-item:hover { background: var(--doc-tint); }
.acct-cat-swatch, .acct-cat-dot { border-radius: 0; }
.acct-cat-text { color: var(--doc-head); }
.acct-cat-add {
    padding: 14px 0;
    background: transparent;
    border-top: 1px solid var(--doc-rule);
}
.acct-cat-add .acct-input { background: var(--doc-paper); }
.acct-icon-btn { border-radius: 2px; border-color: var(--doc-rule); color: var(--doc-ink-2); }
.acct-icon-btn:hover:not(:disabled) { background: var(--doc-tint); color: var(--doc-head); border-color: var(--doc-head); }
.acct-icon-btn.danger { border-color: #E4C4C4; color: var(--doc-bad); }
.acct-icon-btn.danger:hover:not(:disabled) { background: var(--doc-bad); border-color: var(--doc-bad); color: #fff; }
.acct-money-input::after { color: var(--doc-ink-2); }

.acct-notice, .acct-empty { padding: 46px 0; }
.acct-notice-emoji, .acct-empty-icon {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--doc-rule);
}
.acct-notice h3, .acct-empty strong { color: var(--doc-head); font-weight: 800; }
.acct-notice p, .acct-empty p, .acct-cat-empty { color: var(--doc-ink-2); }
#acct-panel .skeleton-row { border-bottom-color: var(--doc-rule-2); }


/* ================================================================================
   15. 회의 — 동그라미 번호표 → 각진 번호칸, 파란 상자 → 규칙선
   ================================================================================ */
.mtg-section,
.mtg-agenda-row {
    border: 1px solid var(--doc-rule);
    border-radius: 0;
}
.mtg-agenda-no {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--doc-head);
    color: var(--doc-head);
    font-weight: 800;
}
.mtg-agenda-title { color: var(--doc-head); font-weight: 700; }
.mtg-agenda-desc, .mtg-hint, .mtg-sub { color: var(--doc-ink-2); }

.mtg-notice {
    padding: 10px 0 10px 13px;
    background: transparent;
    border-left: 3px solid var(--doc-navy);
    border-radius: 0;
    color: var(--doc-ink);
}
.mtg-empty,
.mtg-locked {
    background: transparent;
    border: 1px dashed var(--doc-rule);
    border-radius: 0;
    color: var(--doc-ink-2);
}
.mtg-target-item {
    background: var(--doc-paper);
    border: 1px solid var(--doc-rule);
    border-radius: 0;
}
.mtg-member-hit { border-radius: 0; border-color: var(--doc-rule); }
.mtg-member-hit:hover { background: var(--doc-tint); border-color: var(--doc-head); }
/* 참석자 칩 → 이름표(사각) */
.mtg-chip {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--doc-rule);
    color: var(--doc-ink);
}
.mtg-att-label { color: var(--doc-ink-2); }
.mtg-att-group { border-top-color: var(--doc-rule-2); }
.mtg-agenda-edit-row { border-bottom-color: var(--doc-rule); }
.mtg-detail-title h2 { font-size: 20px; font-weight: 800; color: var(--doc-head); letter-spacing: -0.03em; }
.mtg-detail-sub { color: var(--doc-ink-2); }
.mtg-card { margin-bottom: 22px; }


/* ================================================================================
   16. 조직도 · 직책 · 업종 · 권한 — JS 인라인 style 을 덮어야 하는 자리
   orgchart.js / meeting-settings.js 가 그룹 머리에 background:var(--c-primary-light)
   를 인라인으로 박아 두어 여기서만 !important 가 필요합니다.
   (§1 에서 --c-primary-light 자체를 무채색으로 내렸으므로 색은 이미 조용해졌고,
    여기서는 '띠'를 아예 흰 종이 + 가는 줄로 바꿉니다)
   ================================================================================ */
.oc-group,
#mtt-wrap .card {
    border: 1px solid var(--doc-rule);
    border-radius: 0;
}
.oc-group > div:first-child,
#mtt-wrap .card > div:first-child {
    background: var(--doc-paper) !important;
    border-bottom: 1px solid var(--doc-rule) !important;
    border-radius: 0 !important;
}
.oc-group > div:first-child > strong,
#mtt-wrap .card > div:first-child > strong {
    color: var(--doc-head) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
}
.oc-group > div:first-child > .oc-grip { color: var(--doc-ink-3) !important; }
.oc-member {
    border: 1px solid var(--doc-rule) !important;
    border-radius: 0 !important;
}
/* 대상 권한군·등급 체크 줄 — 파란 배경이 사라진 만큼 선택 상태를 먹줄로 보강 */
#mtt-wrap label { border-radius: 0 !important; }
#mtt-wrap label:has(input[type="checkbox"]:checked) {
    box-shadow: inset 0 0 0 1px var(--doc-head);
}

.pos-group-head,
.ic-parent-row {
    background: transparent;
    border-bottom: 1px solid var(--doc-rule);
    color: var(--doc-head);
}
.pos-group-head { font-weight: 800; letter-spacing: -0.025em; }
.pos-row,
.ic-child-row,
.ic-toggle,
.approval-card,
.dossier-item-card,
.permission-card,
.perm-super-notice,
.settings-row,
.content-preview-img { border-radius: 0; }

.pos-row,
.ic-child-row {
    border-color: var(--doc-rule);
    background: var(--doc-paper);
}
.pos-row:hover,
.ic-child-row:hover {
    border-color: var(--doc-head);
    background: var(--doc-tint);
    box-shadow: none;
}
.pos-name, .ic-parent-name, .ic-child-name { color: var(--doc-head); }
.ic-toggle { border-color: var(--doc-rule); color: var(--doc-ink-2); }
.ic-toggle:hover { border-color: var(--doc-head); color: var(--doc-head); }
.approval-card { border-color: var(--doc-rule); }
.approval-card:hover { box-shadow: none; background: var(--doc-tint-2); }

.dossier-item-card { background: var(--doc-paper); border-color: var(--doc-rule); }
.permission-card {
    background: var(--doc-paper);
    border-bottom: 1px solid var(--doc-rule-2);
    margin-bottom: 0;
}
.permission-card:hover { background: var(--doc-tint); }
.permission-name { color: var(--doc-head); }
.perm-super-notice {
    padding: 10px 0 10px 13px;
    background: transparent;
    border-left: 3px solid var(--doc-head);
    color: var(--doc-ink-2);
}

/* 인물카드 — 파란 탭 밑줄 → 먹줄, 파란 섹션 제목 → 먹색 + 가는 줄 */
/* ⚠ 2px 를 유지합니다 — .dossier-tab 이 margin-bottom:-2px 로 밑줄을 겹쳐 그립니다 */
.dossier-tabs { border-bottom: 2px solid var(--doc-rule); }
.dossier-tab { border-radius: 0; color: var(--doc-ink-2); font-weight: 600; }
.dossier-tab:hover { color: var(--doc-head); }
.dossier-tab.active { color: var(--doc-head); border-bottom-color: var(--doc-head); font-weight: 800; }
.dossier-tab-content { padding: 20px 0 24px; }
.dossier-section-title {
    color: var(--doc-head);
    font-weight: 800;
    letter-spacing: -0.025em;
    border-bottom: 1px solid var(--doc-rule);
}
.dossier-name, .profile-card-name { font-size: 20px; font-weight: 800; color: var(--doc-head); }
.dossier-meta, .dossier-field-label, .profile-card-email { color: var(--doc-ink-2); }
.dossier-timeline::before { background: var(--doc-rule); width: 1px; }
.dossier-timeline-dot {
    border-radius: 0;
    background: var(--doc-head);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--doc-rule);
}
.dossier-profile-card, .profile-card { padding: 20px 0 22px; }


/* ================================================================================
   17. 모달 · 토스트 · 스켈레톤 — 진짜로 떠 있는 것만 그림자를 남깁니다
   ================================================================================ */
.modal,
.modal-content,
.modal-box {
    border-radius: 3px;
    border-top: 3px solid var(--doc-head);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--doc-rule);
    padding: 18px 24px 14px;
}
.modal-header h3 { font-size: 17px; font-weight: 800; color: var(--doc-head); letter-spacing: -0.03em; }
.modal-body { padding-top: 16px; }
.modal-footer { border-top-color: var(--doc-rule); }
.modal-close { color: var(--doc-ink-2); }
.acct-modal .modal-footer { background: transparent; border-top-color: var(--doc-rule); }
.acct-modal .modal-header { border-bottom-color: var(--doc-rule); }
.acct-modal .modal-header .btn-outline { border-radius: 2px; }
.acct-warn {
    border-radius: 0;
    background: transparent;
    border: none;
    border-left: 3px solid var(--doc-warn);
    padding-left: 12px;
}

.save-bar {
    border-radius: 0;
    border-top: 1px solid var(--doc-rule);
    box-shadow: none;
    padding: 14px 0;
}

.admin-toast { border-radius: 2px; box-shadow: var(--shadow-lg); font-weight: 600; }
.admin-toast.success { background: var(--doc-ok); }
.admin-toast.error { background: var(--doc-bad); }
/* 먹색 판 + 흰 글자 — admin.css 가 color:#fff 를 이미 주므로 대비 그대로 유지됩니다 */
.menu-hint-toast { border-radius: 2px; background: var(--doc-head); }
.menu-hint-toast .menu-hint-close { border-radius: 2px; }

.skeleton {
    border-radius: 2px;
    background: linear-gradient(90deg, #F2F4F8 25%, #E7EBF1 50%, #F2F4F8 75%);
    background-size: 200% 100%;
}
.skeleton-cell { border-radius: 2px; }
.skeleton-row { border-bottom-color: var(--doc-rule-2); }

/* 막대·차트 — 둥근 끝을 잘라 도표(圖表)로 */
.bar-track, .bar-fill { border-radius: 0; }
.bar-track { background: #EEF1F6; }
.bar-fill { background: var(--doc-head); }
.h-bar-track, .h-bar-fill { border-radius: 0; }
.h-bar-track { background: #EEF1F6; }
.bar-label, .h-bar-label { color: var(--doc-ink-2); }
.legend-dot { border-radius: 0; }
.donut-label { color: var(--doc-ink-3); }
.donut-total { color: var(--doc-head); font-weight: 800; }


/* ================================================================================
   18. 로그인 화면 — 남보라 그라데이션 → 먹색 표지(表紙)
   첫 화면이 곧 제품의 첫인상입니다. 여기가 바뀌지 않으면 개편이 아닙니다.
   ================================================================================ */
.login-brand {
    background: var(--doc-head);
    padding: 52px 48px;
}
.login-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 2px;
    background: #fff;
    color: var(--doc-head);
    font-weight: 800;
    backdrop-filter: none;
    margin-bottom: 36px;
}
.login-brand h1 { font-size: 33px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.25; }
.login-brand p { opacity: 0.62; letter-spacing: -0.01em; }
.login-brand-features li { opacity: 0.62; padding-left: 16px; }
.login-brand-features li::before {
    width: 7px;
    height: 1px;
    top: 11px;
    border-radius: 0;
    background: rgba(255,255,255,0.55);
}

.login-form-panel { background: var(--doc-paper); }
.login-form-wrap h2 { font-size: 23px; font-weight: 800; color: var(--doc-head); letter-spacing: -0.03em; }
.login-subtitle { color: var(--doc-ink-2); }
.login-error { color: var(--doc-bad); }
.login-back-link { color: var(--doc-ink-2); }
.login-back-link:hover { color: var(--doc-head); }


/* ================================================================================
   19. 남은 알약·모서리 정리 + 잔여 파랑 중화
   ================================================================================ */
.pin-badge,
.content-form-input,
.content-form-textarea,
.mtg-material-name,
.acct-short { border-radius: 0; }

.text-sub, .text-hint { color: var(--doc-ink-2); }
.text-muted { color: var(--doc-ink-3); }
.text-primary-color { color: var(--doc-navy); }
.text-error { color: var(--doc-bad); }
.text-success { color: var(--doc-ok); }
.bg-primary-light { background: var(--doc-tint); }
.bg-error { background: #FBF2F2; }
.bg-success { background: #F1F7F3; }
.bg-warning { background: #FBF6EC; }

.inline-error, .acct-err, .acct-cat-err, .pw-mismatch-warning { color: var(--doc-bad); }
.acct-help, .acct-legend-note, .acct-dim { color: var(--doc-ink-2); }
.date-separator { color: var(--doc-ink-3); }
.member-sub { color: var(--doc-ink-3); }
.member-name { color: var(--doc-head); font-weight: 600; }

/* Quill 에디터도 같은 각으로 (index.html 인라인 <style> 을 덮습니다) */
.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: var(--doc-rule); border-radius: 0; }
.ql-toolbar.ql-snow { border-top-left-radius: 0; border-top-right-radius: 0; }
.ql-container.ql-snow { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* 모서리 잔여물 일괄 정리 — 사람 얼굴·스위치 손잡이는 위에서 이미 예외 처리했습니다 */
.mtg-material-ops .btn,
.acct-toolbar .btn,
.acct-toolbar .btn-sm,
.acct-table .acct-row-actions .btn,
.acct-notice .btn,
.acct-empty-actions .btn,
.acct-hint-row .btn,
.acct-modal .modal-footer .btn,
.acct-opening-actions .btn,
.acct-cat-add .btn { border-radius: 3px; }


/* ================================================================================
   20. 좁은 화면 — 판면 여백만 줄이고 규칙선 문법은 그대로 유지합니다
   ================================================================================ */
@media (max-width: 1024px) {
    :root { --content-pad: 20px; }
}

@media (max-width: 768px) {
    .header { padding: 0 16px; }
    .page-header, .page-toolbar { padding-bottom: 10px; }
    .page-header h2, .page-title { font-size: 18px; }
    thead th, .data-table th { padding: 8px 10px; }
    tbody td, .data-table td { padding: 8px 10px; }
    .acct-table thead th, .acct-table tbody td { padding-left: 10px; padding-right: 10px; }
    .login-brand { padding: 32px 24px; }
}

@media (max-width: 480px) {
    .modal { border-radius: 3px; }
}


/* ================================================================================
   21. 인쇄 — 이 시안은 화면 자체가 이미 서류라, 그대로 뽑아도 어긋나지 않습니다
   ================================================================================ */
@media print {
    body { background: #fff; }
    .header { border-color: #9CA3AF; }
    .page-header { border-bottom-color: #9CA3AF; }
}