/* ============================================================================
   로뎀 ERP 디자인 시스템 (2026-09-22 개편, 2026-09-26 베이지·청록으로 다시 개편)

   2026-09-26: 디자인 기준 이미지(`.claude/docs/ui/references/design-system.png`)에 맞춰 **베이지 바탕 +
   청록 기본 동작 + 떠 있는 면(뉴모피즘)**으로 바꿨다. 사용자가 시안(업체 목록 + 부품 10묶음)을 보고
   "이대로 진행"(2026-09-26). 색의 뜻(청록=기본 동작, 초록=정상, 빨강=삭제·위험, 노랑=주의)은 그대로다 -
   이미지의 청록 [Delete]는 따르지 않고 **삭제는 빨강 유지**(사용자 결정). 아래 2026-09-22 설명은 역사로 남긴다.

   사용자가 준 디자인 가이드(`/home/tempimg/public/images/2026-09-22042656.png`)를 따른다.
   상단 네비게이션 + 무채색이던 것을 **좌측 사이드바 + 파란 계열**로 바꿨다.

   왜 override 방식인가: global.css가 Bulma 실사용 클래스만 담은 발췌본이고 화면 20여 개가
   이미 그 클래스(.box/.table/.button/.tag/.input/.columns)로 쓰여 있다. 클래스 이름을 바꾸는
   대신 여기서 모양만 덮어쓰면 모든 화면이 한 번에 새 디자인을 입는다.

   색 규칙이 바뀌었다: 예전에는 "무채색 기준, 삭제 버튼만 빨강"이었는데 이 디자인은 파랑을
   기본으로 쓰고 상태를 색으로 구분한다(.claude/docs/conventions.md 갱신).
   ========================================================================== */

:root {
  /* 사이드바 - 본문과 같은 베이지, 지금 메뉴만 청록(2026-09-26) */
  --erp-nav-bg: #e9e3d8;
  --erp-nav-bg-hover: #e2dbce;
  --erp-nav-active: #0e4f52;
  --erp-nav-text: #6f675c;
  --erp-nav-text-strong: #2d2a26;

  /* 본문 - 베이지. 들어간 면(표 머리·읽기 전용 칸)은 --erp-surface-sunk, 올렸을 때 옅은 바탕은 --erp-surface-hover */
  --erp-bg: #ede7dd;
  --erp-surface: #f4efe7;
  --erp-surface-sunk: #ebe5da;
  --erp-surface-hover: #efe9df;
  --erp-border: #e0d8ca;
  --erp-border-strong: #cfc4b2;
  --erp-border-soft: #e8e1d5;

  --erp-text: #2d2a26;
  --erp-text-label: #4a443c;
  --erp-text-muted: #7a7166;
  --erp-text-faint: #a79d90;

  /* 강조색 - 뜻은 그대로, 채도를 낮춰 베이지에 맞췄다 */
  --erp-primary: #0e4f52;
  --erp-primary-dark: #093a3c;
  --erp-primary-soft: #dfe8e3;
  --erp-primary-ring: rgba(14, 79, 82, .14);
  --erp-success: #3d7a55;
  --erp-success-soft: #e0ebdf;
  --erp-danger: #b3413a;
  --erp-danger-dark: #963530;
  --erp-danger-soft: #f3dfd9;
  --erp-warning: #b27a22;
  --erp-warning-soft: #f3e6cc;
  --erp-info: #3a7385;
  --erp-info-soft: #dfe9ea;

  /* 글자 크기 척도 - 여섯 단계뿐이다.
     기본은 --fs-base 하나로 가고, 분명히 보조인 것(설명·경로·태그)만 한 단계 줄인다.
     예전에는 .62 ~ 1.6rem이 20종 가까이 흩어져 있어 화면마다 글자가 들쭉날쭉했다. */
  --fs-2xl: 24px;   /* 통계 숫자, 문서 제목 */
  --fs-xl: 20px;    /* 화면 제목 */
  --fs-lg: 16px;    /* 카드 섹션 제목 */
  --fs-base: 14px;  /* 본문 - 표·입력·버튼·메뉴 전부 */
  --fs-sm: 13px;    /* 보조 - 설명, 경로, 표 머리, 메타 */
  --fs-xs: 12px;    /* 가장 작은 것 - 태그, help, 배지 */

  /* 간격 척도 - 블록 사이는 --erp-gap 하나만 쓴다.
     예전에는 .9rem / 1rem / .85rem이 섞여 있어 카드가 어떤 건 붙고 어떤 건 떨어져 보였다. */
  --erp-gap: 18px;   /* 2026-09-26 1rem → 18px(기준 이미지 SPACING 18) */
  --erp-gap-sm: .5rem;
  --erp-field-h: 34px;

  /* 모서리 - 기준 이미지 척도 4/8/12/16/24. 버튼·알약·뱃지는 끝이 둥근 알약(999px) */
  --erp-radius-lg: 24px;  /* 모달 */
  --erp-radius: 16px;     /* 카드 */
  --erp-radius-md: 12px;  /* 카드 안 패널, 탭 틀, 토스트 */
  --erp-radius-sm: 8px;   /* 입력·표 안 칸 */

  /* 층 - 밝은 그림자(왼쪽 위) + 어두운 그림자(오른쪽 아래)로 떠 있는 면을 만든다(기준 이미지 LEVEL 1~5) */
  /* 2026-09-26 2차: 1차 값이 너무 얕고 좁아 기준 이미지와 달랐다(사용자 지적) - 번짐을 두 배 가까이 키웠다.
     2026-09-26 3차: 왼쪽 위의 흰 빛(하이라이트)을 없애고 **오른쪽 아래와 같은 음영**을 사방에 준다(사용자 요구 - 흰 빛이 들떠 보였다).
     그래서 흰 빛 변수(--erp-sh-light)는 없앴다.
     2026-09-26 4차: 사방이 같으니 밋밋하다(사용자) - 왼쪽 위는 **오른쪽 아래보다 약간 옅은 음영**(--erp-sh-soft)이다 */
  --erp-sh-dark: rgba(150, 128, 98, .30);  /* 오른쪽 아래 */
  --erp-sh-soft: rgba(150, 128, 98, .15);  /* 왼쪽 위(들어간 면은 안쪽 오른쪽 아래) */
  --erp-shadow-1: -3px -3px 9px var(--erp-sh-soft), 4px 4px 10px var(--erp-sh-dark);              /* 작게 뜸 - 버튼·알약 */
  --erp-shadow: -6px -6px 18px var(--erp-sh-soft), 8px 8px 22px var(--erp-sh-dark);               /* 올림 - 카드 */
  --erp-shadow-4: -8px -8px 26px var(--erp-sh-soft), 14px 16px 36px rgba(120, 98, 70, .40);      /* 모달·펼침 메뉴 */
  --erp-shadow-in: inset 3px 3px 7px var(--erp-sh-dark), inset -2px -2px 6px var(--erp-sh-soft); /* 들어감 - 입력·눌림 */
  --erp-sidebar-w: 224px;
  --erp-topbar-h: 60px;
}

/* 제목의 브라우저 기본 마진을 지운다.
   global.css에 h1~h6 리셋이 없어서 <h1>에 위아래 0.67em(약 13px)이 그대로 붙어 있었다 -
   화면 머리 위아래에 빈 띠가 생기고, 카드 안 제목도 위 여백이 제각각이던 원인이다.
   간격은 .page-head / .title.* 가 직접 정한다. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }

body {
  background: var(--erp-bg);
  color: var(--erp-text);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ── 전체 뼈대 ──────────────────────────────────────────────────────────────
   사이드바를 고정(fixed)하고 본문에 왼쪽 여백을 준다. 본문이 길어도 메뉴는 늘 같은 자리에
   있어야 화면을 오가며 쓰기 편하다. */
.erp-shell {
  min-height: 100vh;
}

.erp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--erp-sidebar-w);
  height: 100vh;
  background: var(--erp-nav-bg);
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow-y: auto;
  box-shadow: 4px 0 14px rgba(150, 132, 108, .18);
}

.erp-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1.15rem 1.15rem 1rem;
  color: var(--erp-nav-text-strong);
  font-weight: 700;
  font-size: var(--fs-lg);
  text-decoration: none;
}

.erp-brand:hover { color: var(--erp-nav-text-strong); }

.erp-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--erp-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  flex: 0 0 auto;
  color: #fff;
}

.erp-nav {
  padding: .35rem .6rem 1.5rem;
}

.erp-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .58rem .7rem;
  margin-bottom: .12rem;
  border-radius: 999px;
  color: var(--erp-nav-text);
  font-size: var(--fs-base);
  text-decoration: none;
  transition: background .12s, color .12s;
}

.erp-nav-item:hover {
  background: var(--erp-nav-bg-hover);
  color: var(--erp-nav-text-strong);
}

/* 지금 보고 있는 메뉴 - 어디에 있는지 한눈에 보여야 한다 */
.erp-nav-item.is-active {
  background: var(--erp-nav-active);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--erp-shadow-1);
}

.erp-nav-icon {
  width: 1.15rem;
  text-align: center;
  flex: 0 0 auto;
  opacity: .9;
}

.erp-nav-label {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--erp-text-faint);
  padding: 1rem .7rem .35rem;
}

/* ── 본문 영역 ───────────────────────────────────────────────────────────── */
.erp-main {
  margin-left: var(--erp-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 표가 넓어도 본문이 사이드바를 밀어내지 않게 한다. 넘치는 표는 .list-table이
     자기 안에서 스크롤하므로 여기서 잘라내지는 않는다 */
  min-width: 0;
}

.erp-topbar {
  height: var(--erp-topbar-h);
  background: var(--erp-bg);
  box-shadow: 0 4px 12px rgba(150, 132, 108, .14);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

.erp-topbar-search {
  flex: 1 1 auto;
  max-width: 380px;
}
.erp-topbar-search .input { border-radius: 999px; }

.erp-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.erp-icon-button {
  width: 34px;
  height: 34px;
  border-radius: var(--erp-radius-sm);
  border: 0;
  background: transparent;
  color: var(--erp-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
}

.erp-icon-button:hover { background: var(--erp-surface); color: var(--erp-text); box-shadow: var(--erp-shadow-1); }

/* 알림 개수 - 0이면 아예 안 그린다(할 일이 없는데 빨간 점이 보이면 금세 안 보게 된다) */
.erp-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--erp-danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.erp-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border-radius: var(--erp-radius-sm);
  text-decoration: none;
  color: var(--erp-text);
}

.erp-user:hover { background: var(--erp-surface); color: var(--erp-text); }

.erp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--erp-primary-soft);
  color: var(--erp-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex: 0 0 auto;
  border: 2px solid var(--erp-surface);
  box-shadow: var(--erp-shadow-1);
}

.erp-user-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.15; }
.erp-user-role { font-size: var(--fs-xs); color: var(--erp-text-faint); line-height: 1.15; }

/* 프로필 메뉴(layout.php) - 이름 머리 + 항목, 로그아웃은 구분선 아래 빨강 */
.erp-user-menu { position: relative; }
.erp-user-menu > summary { list-style: none; cursor: pointer; }
.erp-user-menu > summary::-webkit-details-marker { display: none; }
.erp-user-menu[open] > .erp-user { background: var(--erp-surface); }
.erp-user-dropdown {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 60;
  min-width: 13.5rem;
  padding: .35rem;
  background: var(--erp-surface);
  border: 0;
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow-4);
}
.erp-user-dropdown-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem .65rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--erp-border);
}
.erp-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: var(--erp-radius-sm);
  color: var(--erp-text);
  font-size: var(--fs-base);
  text-decoration: none;
  white-space: nowrap;
}
.erp-user-dropdown-item > svg { color: var(--erp-text-muted); flex: 0 0 auto; }
.erp-user-dropdown-item:hover { background: var(--erp-surface-sunk); color: var(--erp-text); }
.erp-user-dropdown-item.is-danger { color: var(--erp-danger); margin-top: .3rem; border-top: 1px solid var(--erp-border); border-radius: 0 0 var(--erp-radius-sm) var(--erp-radius-sm); }
.erp-user-dropdown-item.is-danger > svg { color: var(--erp-danger); }
.erp-user-dropdown-item.is-danger:hover { background: var(--erp-danger-soft); color: var(--erp-danger); }
.erp-user-dropdown form { margin: 0; }
button.erp-user-dropdown-item { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; }
.erp-user-dropdown-item.is-current { background: var(--erp-primary-soft); color: var(--erp-primary); font-weight: 600; }
.erp-user-dropdown-section { padding: .35rem .6rem .2rem; font-size: var(--fs-xs); color: var(--erp-text-faint); }
.erp-user-dropdown-divider { height: 1px; background: var(--erp-border); margin: .3rem 0; }
/* 종 아이콘 목록(알림) - 프로필 메뉴와 같은 드롭다운 모양 */
.erp-bell > summary { list-style: none; position: relative; }
.erp-bell > summary::-webkit-details-marker { display: none; }
.erp-bell-dropdown { min-width: 16rem; }
.erp-bell-item { justify-content: space-between; }
.erp-bell-empty { padding: .6rem; color: var(--erp-text-faint); font-size: var(--fs-sm); }
.erp-badge[hidden] { display: none; }

.erp-content { flex: 1 1 auto; min-width: 0; padding: .9rem 1.1rem 1.75rem; }

/* section/container는 화면들이 이미 쓰고 있다. 사이드바 레이아웃에서는 폭 제한과
   큰 여백이 오히려 방해라서 걷어낸다. */
.erp-content .section { padding: 0; }
.erp-content .container { max-width: none; width: 100%; margin: 0; }

/* ── global.css에 빠져 있는 Bulma 레이아웃 규칙 ─────────────────────────────
   global.css는 "실사용 클래스만 담은 손 유지 발췌본"이라 .field.is-grouped(가로 배치)가
   들어 있지 않다. 그래서 검색 폼의 .control이 전부 세로로 떨어져 있었다.
   발췌본을 건드리는 대신 여기서 채운다. */
.control { position: relative; }
.control.is-expanded { flex: 1 1 auto; min-width: 0; }

.field.is-grouped { display: flex; align-items: center; gap: .4rem; }
.field.is-grouped.is-grouped-multiline { flex-wrap: wrap; }
.field.is-grouped > .control { margin: 0; }

.buttons { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* 12칸 그리드 - global.css에는 .column.is-12 하나뿐이라 .is-3 같은 폭 지정이 전부
   무시되고 모든 칸이 같은 너비로 벌어져 있었다(폼 레이아웃이 깨지던 원인). */
.column.is-1 { flex: none; width: 8.3333%; }
.column.is-2 { flex: none; width: 16.6666%; }
.column.is-3 { flex: none; width: 25%; }
.column.is-4 { flex: none; width: 33.3333%; }
.column.is-5 { flex: none; width: 41.6666%; }
.column.is-6 { flex: none; width: 50%; }
.column.is-7 { flex: none; width: 58.3333%; }
.column.is-8 { flex: none; width: 66.6666%; }
.column.is-9 { flex: none; width: 75%; }
.column.is-10 { flex: none; width: 83.3333%; }
.column.is-11 { flex: none; width: 91.6666%; }
.column.is-12 { flex: none; width: 100%; }
.column.is-one-fifth { flex: none; width: 20%; }
.column.is-one-quarter { flex: none; width: 25%; }
.column.is-one-third { flex: none; width: 33.3333%; }
.column.is-half { flex: none; width: 50%; }

/* ── 목록 화면 ──────────────────────────────────────────────────────────────
   디자인 가이드 02번(목록 화면)을 그대로 따른다. 검색줄·표·페이지 이동이 **한 장의 카드**
   안에 들어간다. 예전에는 셋이 따로 떠 있어 어디까지가 한 목록인지 경계가 흐렸다. */
.list-card {
  background: var(--erp-surface);
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  margin-bottom: var(--erp-gap);
  overflow: hidden;
}

/* 검색줄 - **조건만** 놓는다. 신규 등록·선택 삭제 같은 동작은 여기 섞지 않는다
   (검색과 등록이 한 덩어리로 보이던 문제, 2026-09-22 지적).

   `라벨 | 입력`을 두 벌 놓은 네 칸 격자다. 조건 두 개가 한 줄에 나란히 앉고 라벨·입력의
   세로줄이 전부 맞는다(사용자가 준 화면 예시 그대로). 라벨 칸 폭을 고정했기 때문에
   왼쪽 벌과 오른쪽 벌의 입력 시작점도 같다.
   보기가 많아 반 칸에 안 들어가는 조건은 `.is-full`로 그 줄을 통째로 쓴다.
   조건은 접지 않고 처음부터 다 펼쳐 둔다 - 관리자 화면이라 넓어도 되고, 접어 두면
   무슨 조건으로 보고 있는지 안 보인다. */
.list-search {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem minmax(0, 1fr);
  column-gap: .6rem;
  row-gap: .45rem;
  align-items: center;
  padding: 1rem 1.1rem;
  background: transparent;
  border-bottom: 1px solid var(--erp-border);
}

/* 왼쪽 라벨 칸 */
.list-search-label {
  font-size: var(--fs-sm);
  color: var(--erp-text-muted);
  white-space: nowrap;
  line-height: var(--erp-field-h);
}

/* 오른쪽 입력 칸 - 한 칸에 여러 개가 들어가면 여기서 나란히 눕는다 */
.list-search-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}

/* 보기가 많은 조건은 남은 칸을 전부 쓴다 */
.list-search-field.is-full { grid-column: 2 / -1; }

/* 알약(보기를 펼쳐 놓은 조건)이 든 칸은 **라벨 옆부터 줄 끝까지**(2 / -1) 늘어난다 - 반 칸에 두면 보기 여섯 개가
   두 줄로 접히면서 둘째 줄 오른쪽이 휑하게 빈다(2026-09-23 지적).
   ⚠️ `grid-column-end: -1`만 주면 안 된다 - 시작이 auto이고 끝만 정해지면 브라우저가 **맨 오른쪽 한 칸**에 놓아서
   보기가 전부 오른쪽 끝으로 쏠렸다(업체관리 분류·상태, 같은 날 지적). 오른쪽 반 칸(3~4열)에 둬야 하는 조건은
   화면에서 `is-half`를 붙인다(아래). */
.list-search-field:has(.filter-options) { grid-column: 2 / -1; }
/* 보기가 적은 두 조건을 한 줄에 나란히 둘 때(입출금내역 탭의 상태 | 입출금) */
.list-search-field.is-half:has(.filter-options) { grid-column: auto; }

/* 한 줄 안의 칸은 같은 높이로 선다 - 1~2px씩 어긋나면 줄이 안 맞아 보인다 */
.list-search .button,
.list-search .input,
.list-search .select,
.list-search .select select { height: var(--erp-field-h); }

/* 검색줄의 조건 알약은 **너비를 맞춘다.** 글자 수대로 두면 `개인`은 좁고 `타업체로이동`은
   넓어서 줄이 들쭉날쭉해 보인다(2026-09-23 지적). 가장 긴 보기가 들어가는 폭으로 고정하고,
   그보다 긴 것만 제 폭을 갖는다. 줄이 바뀌어도 칸이 세로로 맞는다. */
.list-search .filter-check {
  height: var(--erp-field-h);
  min-width: 8rem;
  justify-content: flex-start;
}

/* 화면이 좁으면 폭 맞추기를 포기한다 - 알약이 화면 밖으로 밀리는 것보다 낫다 */
@media (max-width: 700px) {
  .list-search .filter-check { min-width: 0; }
}
/* 업체 폼에서 `개인`이면 감추는 줄·카드(company-form-scope.js) - .form-row의 display:grid가 hidden을 이기지 않게 */
[data-biz-only][hidden] { display: none !important; }
/* 보기 중 성격이 다른 하나를 조금 떨어뜨린다(업체 분류의 `개인`, _filter_options의 $optApart) */
.filter-check.is-apart { margin-left: 1rem; }
/* 검색줄에서는 떼지 않는다 - 줄이 꺾이면 틈만 남아 어색하다(2026-09-23 사용자 지적). 업체 등록 폼에서만 뗀다 */
.list-search .filter-check.is-apart { margin-left: 0; }

/* 입력칸은 제 칸을 꽉 채운다 - 폭이 제각각이면 오른쪽 끝이 들쭉날쭉해 보인다 */
.list-search-field > .input { flex: 1 1 8rem; min-width: 0; }
.list-search-field > .select { flex: 0 0 auto; }
.list-search .select select { min-width: 8rem; }
/* 날짜 칸은 날짜가 딱 들어갈 만큼만(2026-09-23 사용자 지적 - 너무 크다) */
.list-search .input[type="date"] { flex: 0 0 auto; width: 9.4rem; padding-left: .5rem; padding-right: .4rem; }

/* 검색/초기화는 줄 오른쪽 끝에 */
.list-search-actions {
  grid-column: 2 / -1;
  justify-self: end;
  display: flex;
  gap: .4rem;
}

/* 화면이 좁으면 한 줄에 조건 하나씩 - 억지로 두 벌을 유지하면 입력칸이 너무 좁아진다 */
@media (max-width: 1100px) {
  .list-search { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .list-search-field.is-full { grid-column: 2; }
}

/* 보기가 몇 개뿐인 조건은 드롭다운 대신 **보기를 전부 펼쳐 놓는다**.
   드롭다운은 열기 전까지 어떤 값이 있는지 알 수 없어서, 관리 화면에서는 한눈에
   보이는 쪽이 낫다(2026-09-22 사용자 요구). 하나만 고르면 라디오, 여러 개 고를 수
   있으면 체크박스이고, 생김새는 같은 알약 버튼이다. */
.filter-options {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  min-width: 0;
}

/* 보기 글이 길어 한 줄에 못 담는 조건(공급자 사업장 등)은 세로로 쌓는다.
   억지로 가로로 붙이면 알약이 화면 밖으로 밀린다. */
.filter-options.is-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
}

.filter-options.is-stack .filter-check {
  height: auto;
  min-height: var(--erp-field-h);
  padding: .4rem .7rem;
  white-space: normal;
  text-align: left;
}

/* 보기가 많은 조건은 묶음(수입/지출/지급) 이름을 중간에 달아 준다 */
.filter-options-group {
  display: inline-flex;
  align-items: center;
  height: var(--erp-field-h);
  font-size: var(--fs-xs);
  color: var(--erp-text-faint);
  padding: 0 .1rem 0 .5rem;
  white-space: nowrap;
}

/* 알약 안의 동그라미/네모는 작게 - 글자보다 커 보이면 줄이 들쭉날쭉해진다 */
.filter-check input[type="radio"],
.filter-check input[type="checkbox"] { width: 16px; height: 16px; }

/* 표 바로 위 줄 - 건수와 선택 삭제처럼 **표에 대한** 동작만 */
.list-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-bottom: 1px solid var(--erp-border);
}

.list-actions .list-count { font-size: var(--fs-sm); color: var(--erp-text-muted); }
.list-actions .is-right { margin-left: auto; display: flex; gap: .4rem; }
.list-actions .button { height: 30px; font-size: var(--fs-sm); }

/* 표 - 카드가 이미 테두리를 갖고 있으므로 표는 선만 그린다. 머리 띠가 떠 보이게 좌우·위를 조금 띄운다 */
.list-table { overflow-x: auto; padding: .6rem .75rem 0; }
.list-table .table { margin: 0; }
.list-table .table tbody tr:last-child td { border-bottom: 0; }

.col-check { width: 2.5rem; text-align: center; }
.col-no { width: 4.5rem; }
/* 관리 칸은 **절대 줄을 바꾸지 않는다** - 버튼이 아래로 접히면 행 높이가 그 줄만 두 배가
   되어 표가 들쭉날쭉해진다(2026-09-23 지적). 칸이 모자라면 칸이 넓어진다. */
.col-manage { width: 8.5rem; text-align: right; white-space: nowrap; }
/* 끌어서 순서 바꾸기(public/js/row-reorder.js) - 맨 앞 손잡이 칸.
   끄는 행은 브라우저 고스트가 아니라 **행 자체**가 세로로만 움직인다(translateY) - 떠 있는 것처럼
   그림자를 주고 다른 행 위로 올린다. 손잡이의 touch-action: none은 휴대폰에서 끌 때 화면이
   같이 스크롤되지 않게 한다. */
.col-drag { width: 2rem; padding-right: 0 !important; text-align: center; }
tbody .col-drag { cursor: grab; touch-action: none; }
.drag-handle { color: var(--erp-text-faint); letter-spacing: -2px; white-space: nowrap; user-select: none; }
tbody .col-drag:hover .drag-handle { color: var(--erp-text); }
.table tbody tr.is-dragging { position: relative; z-index: 2; box-shadow: var(--erp-shadow-4); }
.table tbody tr.is-dragging > td { background: var(--erp-primary-soft); }
body.is-row-dragging, body.is-row-dragging * { cursor: grabbing !important; user-select: none; }
.table tbody.is-saving { opacity: .6; pointer-events: none; }
/* 분류·상태 칸은 뱃지 하나뿐이다 - 제 폭만 차지하고 줄을 바꾸지 않는다 */
.col-tone { width: 1%; white-space: nowrap; }

/* 관리 칸의 수정/삭제 - 가이드의 연한 배경 작은 버튼 */
.btn-row {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  height: 26px;
  padding: 0 .6rem;
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-row svg { display: block; }
.btn-row.is-edit { background: var(--erp-primary-soft); color: var(--erp-primary); }
.btn-row.is-edit:hover { background: #cfdcd6; color: var(--erp-primary-dark); }
.btn-row.is-delete { background: var(--erp-danger-soft); color: var(--erp-danger); }
.btn-row.is-delete:hover { background: #ecd0c8; color: var(--erp-danger-dark); }
/* 문서 보기(견적서·계산서 고객용 화면을 새 탭에) - 고치지도 지우지도 않는 동작이라 무채색 */
.btn-row.is-view { background: var(--erp-surface-sunk); color: var(--erp-text); }
.btn-row.is-view:hover { background: #ddd4c6; }
/* 관리 칸에 버튼이 셋인 표(보기·수정·삭제, 수정·감추기·삭제) */
.col-manage.is-wide { width: 12rem; }

/* 아래쪽 - 왼쪽 총건수, 가운데 페이지 이동, 오른쪽 개수 선택 */
.list-foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--erp-border);
}

.list-foot .list-count { font-size: var(--fs-sm); color: var(--erp-text-muted); flex: 0 0 auto; }
.list-foot .pagination { margin: 0 auto; }
.list-foot .list-per-page { flex: 0 0 auto; }
.list-foot .list-per-page select { min-width: 7.5rem; }

/* 목록이 비었을 때 - 표 자리에 안내만. 점선 상자 + 돋보기(기준 이미지 EMPTY STATE, 2026-09-26),
   안의 링크(조건 풀기 등)는 버튼 모양이다 */
.list-empty {
  margin: 1rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--erp-border-strong);
  border-radius: var(--erp-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
  color: var(--erp-text-muted);
  font-size: var(--fs-base);
  font-weight: 600;
}
.list-empty::before {
  content: "";
  width: 48px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a79d90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.list-empty a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--erp-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--erp-shadow-1);
}

/* ── 등록/수정 화면 (가이드 03번) ───────────────────────────────────────────
   한 장의 카드 안에 회색 테두리 패널을 얹는다. 패널은 2열로 놓이고, 긴 항목
   (비고 등)을 담는 패널만 전체 폭을 쓴다. 라벨은 입력 왼쪽에 붙는다 - 위에
   얹으면 줄 수가 두 배가 되어 화면이 쓸데없이 길어진다.                        */
.form-card {
  background: var(--erp-surface);
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  padding: var(--erp-gap);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--erp-gap);
}

/* 등록·수정 화면의 칸(기본 정보·연락처 정보…)은 **한 줄에 하나씩 전체 폭**으로 쌓는다(2026-09-23 사용자 요구).
   좌우 두 칸으로 나누면 칸마다 폭이 반이라 주소·이메일 같은 값이 좁게 접혔다. 칸 **안의** 입력 두 개짜리
   배치(업종 | 업태 등)는 그대로 2열이다 - 그건 칸이 아니라 입력 줄이다. */
.form-card > .form-grid { grid-template-columns: minmax(0, 1fr); }
/* 예외: 짝이 되는 두 칸을 50%씩 나란히 봐야 하는 화면(견적서의 기본 정보 | 받는 곳). is-full 칸은 전체 폭 */
.form-card > .form-grid.is-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 여러 줄 입력칸(비고·내용·기타사항…)도 300px까지만 늘어나고 넘으면 칸 안에서 스크롤 - 모든 화면 공통.
   끌어서 키울 수는 있지만 300px을 넘지 않는다. */
.textarea { max-height: 300px; overflow-y: auto; }

/* 전체 폭을 쓰는 패널 */
.form-grid > .form-panel.is-full { grid-column: 1 / -1; }
/* 칸 안 두 열 격자에서 한 줄을 통째로 쓰는 입력(의뢰 내용 등) */
.form-grid > .form-row.is-span { grid-column: 1 / -1; }
/* 견적의뢰 상세(quote_request/show.php) - 칸 안 두 열 격자의 줄 사이를 입력 줄 간격만큼만(칸 사이 간격을 그대로
   쓰면 줄이 듬성듬성해진다), 아래 첨부파일 칸은 카드와 붙지 않게(사이에 숨은 삭제 폼이 끼어 있어 `~`) */
.quote-request-form .form-panel > .form-grid { row-gap: .55rem; }
.quote-request-form .form-panel > .form-grid > .form-row { margin-bottom: 0; }
.quote-request-form ~ .detail-grid { margin-top: var(--erp-gap); }

.form-panel {
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-md);
  padding: .85rem;
}

.form-panel-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--erp-text);
  margin: 0 0 .7rem;
}

/* 한 줄 = 라벨 + 입력. 라벨 폭을 고정해야 여러 줄의 입력칸 왼쪽이 맞는다. */
.form-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .55rem;
}

.form-row:last-child { margin-bottom: 0; }
.form-row.is-top { align-items: flex-start; }

.form-row > .label {
  flex: 0 0 7rem;
  margin: 0;
  padding-top: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--erp-text-label);
  line-height: var(--erp-field-h);
}

.form-row.is-top > .label { line-height: 1.5; padding-top: .45rem; }

/* 입력이 자리를 다 먹는다. 옆에 버튼이 붙는 줄은 .form-row-input으로 묶는다. */
.form-row > .input,
.form-row > .textarea,
.form-row > .select,
.form-row > .form-row-input { flex: 1 1 auto; min-width: 0; }

.form-row > .select select { width: 100%; }

.form-row-input { display: flex; align-items: center; gap: .4rem; }
.form-row-input > .input,
.form-row-input > .select { flex: 1 1 auto; min-width: 0; }
.form-row-input > .button { flex: 0 0 auto; }

/* 등록/수정 폼에서도 보기가 정해진 값은 드롭다운 대신 알약으로 펼친다
   (2026-09-22 사용자 요구 - 목록 검색줄과 같은 이유다). */
.form-row > .filter-options { flex: 1 1 auto; min-height: var(--erp-field-h); }

/* 알약이 여러 줄로 감싸지면 라벨을 첫 줄에 맞춘다 - 가운데로 두면 라벨만 아래로 내려간다 */
.form-row:has(> .filter-options) { align-items: flex-start; }
.form-row:has(> .filter-options) > .label { line-height: var(--erp-field-h); }

/* 업체를 이름으로 찾아 고르는 칸 - 업체 번호를 외우고 있는 사람은 없다(2026-09-22) */
.company-picker { position: relative; flex: 1 1 auto; min-width: 0; }
.company-picker > .input { width: 100%; }

.company-picker-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 16rem;
  overflow-y: auto;
  background: var(--erp-surface);
  border: 1px solid var(--erp-border-strong);
  border-radius: var(--erp-radius-sm);
  box-shadow: var(--erp-shadow-4);
}

.company-picker-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .4rem .6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--erp-border-soft);
}

.company-picker-item:last-child { border-bottom: 0; }
.company-picker-item strong { font-size: var(--fs-base); font-weight: 600; }
.company-picker-item span { font-size: var(--fs-sm); color: var(--erp-text-muted); }
.company-picker-item.is-active,
.company-picker-item:hover { background: var(--erp-primary-soft); }

.company-picker-empty {
  padding: .6rem;
  font-size: var(--fs-sm);
  color: var(--erp-text-faint);
  text-align: center;
}

/* 줄을 늘렸다 줄였다 하는 입력 묶음(사업자등록번호처럼 개수가 정해지지 않은 값) */
.repeat-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.repeat-row { display: flex; align-items: center; gap: .35rem; }
.repeat-row > .input { min-width: 0; }
.repeat-row > .input.is-key { flex: 0 0 11rem; }
.repeat-row > .input.is-note { flex: 1 1 auto; }

/* 첫 줄이 대표 값이다 - 표시를 붙여 어느 것이 지금 쓰는 값인지 보이게 한다 */
.repeat-row::before {
  content: "과거";
  flex: 0 0 2.6rem;
  font-size: var(--fs-xs);
  color: var(--erp-text-faint);
  text-align: center;
}

.repeat-row.is-first::before {
  content: "대표";
  color: var(--erp-primary);
  font-weight: 700;
}

/* 줄 끝의 [＋]/[×] - 견적서 품목 줄(.quote-item-act)과 같은 규칙이다.
   첫 줄에는 [＋](줄 추가)만, 나머지 줄에는 [×](빼기)만 보인다. */
.repeat-act { display: inline-flex; gap: .2rem; }
.repeat-act .btn-row { min-width: 1.9rem; justify-content: center; font-size: var(--fs-base); }
.repeat-row:first-child .repeat-act [data-repeat-remove],
.repeat-row:not(:first-child) .repeat-act [data-repeat-add] { display: none; }

.repeat-add { align-self: flex-start; }

/* 필수 표시 */
.form-row > .label .req { color: var(--erp-danger); margin-left: .15rem; }

/* 라벨 아래가 아니라 입력 아래에 붙는 도움말/에러 - 라벨 폭만큼 들여쓴다 */
.form-help {
  margin: -.25rem 0 .55rem calc(7rem + .6rem);
  font-size: var(--fs-xs);
  color: var(--erp-text-faint);
}

/* 종료일 칸(partials/_renewal_box.php) - 레거시처럼 날짜를 한 줄에 하나씩 적는 작은 텍스트 칸(두 줄 높이, 넘치면 스크롤) + [1개월후][1년후]
   도메인 줄 끝의 [＋][－](.row-steps, hosting/_domain_row.php) */
.renewal-box { flex: 1 1 auto; min-width: 0; max-width: 16rem; display: flex; flex-direction: column; gap: .3rem; }
.renewal-box { --renewal-h: 54px; } /* 두 줄 높이 - 도메인 표에서 옆 버튼·대행 알약도 이 높이에 맞춘다 */
.renewal-box > .renewal-dates {
  min-height: 0;
  height: var(--renewal-h);
  padding: .3rem .5rem;
  line-height: 1.5;
  resize: none;
  font-variant-numeric: tabular-nums;
}
.renewal-adds { display: flex; gap: .3rem; }
/* 도메인 표 - 버튼을 칸 옆에(칸은 두 줄 높이 그대로) */
.renewal-box.is-inline { flex-direction: row; align-items: center; }
.renewal-box.is-inline > .renewal-dates { flex: 1 1 auto; }
.renewal-box.is-inline .renewal-adds { flex: 0 0 auto; }
.renewal-box.is-inline .renewal-add { height: var(--renewal-h); white-space: nowrap; }
/* 도메인 표의 대행 알약도 날짜 칸과 같은 높이(사용자 요구 - 날짜 칸·버튼·대행이 한 높이로 서게). 글자 칸은 보통 높이 */
/* 도메인 줄은 날짜 칸(두 줄) 높이에 **전부** 맞춘다 - 대행 알약·글자 칸·[복사][＋][－]까지(사용자 요구) */
/* `.table .input`(표 안 28px, 이 파일 뒤쪽)보다 세게 걸어야 한다 */
.table .domain-row .filter-check,
.table .domain-row .input,
.table .domain-row .btn-row { height: 54px; }
.renewal-adds > .renewal-add { flex: 1 1 0; padding-left: .3rem; padding-right: .3rem; }
.row-steps { white-space: nowrap; text-align: center; }
.row-steps > .btn-row { min-width: 1.9rem; justify-content: center; }
.row-steps > .btn-row[hidden] { display: none; } /* .btn-row의 inline-flex가 hidden을 이기지 않게 */

/* 호스팅 수정 화면(hosting/form.php) - 기본 정보 / 접속 정보 / 도메인 카드. 텍스트 칸은 크기 조절 손잡이 없음(사용자 요구) */
.hosting-form .textarea { resize: none; }
.renewal-field { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.renewal-field > .renewal-box { flex: 0 0 auto; max-width: none; }
.renewal-field > .renewal-box > .renewal-dates { flex: 0 0 13rem; width: 13rem; }
/* 앞의 관리형태(직접관리/대행)와 뒤의 [01개월후]/[12개월후]는 **보통 높이(34px) 그대로** 두 줄로 쌓고,
   날짜 칸을 그 두 줄 높이(34 + 4 + 34 = 72px, 세 줄 보임)로 늘린다(사용자 요구 - 버튼은 원래 높이, 칸을 키운다) */
.renewal-field { --renewal-h: calc(2 * var(--erp-field-h) + 4px); }
.renewal-field .renewal-box { --renewal-h: calc(2 * var(--erp-field-h) + 4px); }
.renewal-field > .filter-options.is-stack { flex: 0 0 auto; gap: 4px; }
.renewal-field > .filter-options.is-stack .filter-check { height: var(--erp-field-h); min-height: 0; padding: 0 .7rem; }
.renewal-field .renewal-adds { flex-direction: column; gap: 4px; }
.renewal-field .renewal-adds > .renewal-add { flex: 0 0 var(--erp-field-h); height: var(--erp-field-h); padding-left: .9rem; padding-right: .9rem; }
.renewal-summary { display: flex; align-items: baseline; gap: .6rem; }
.renewal-summary-date { font-size: var(--fs-lg); font-weight: 700; color: var(--erp-text); font-variant-numeric: tabular-nums; }
.renewal-summary-meta { font-size: var(--fs-xs); color: var(--erp-text-faint); }
.hosting-table th, .hosting-table td { vertical-align: middle; }
.hosting-table tbody th { white-space: nowrap; font-weight: 600; color: var(--erp-text-label); }
.hosting-table .renewal-box { max-width: none; }
.sftp-config {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--erp-border);
}
.sftp-config-title { font-weight: 600; color: var(--erp-text-label); }
.sftp-config-preview { flex: 1 1 100%; }
.sftp-config-preview > summary { display: inline-block; font-size: var(--fs-sm); color: var(--erp-primary); }
.sftp-config-preview > .textarea {
  margin-top: .4rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--fs-sm);
}

/* 권한 관리(permission/index.php) - 위 스위치 카드와 권한 창의 표 */
.access-switch { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.access-switch.is-on { border-color: var(--erp-success); }
.access-switch-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .25rem; }
.access-switch .help { margin: 0; }
/* 로그인 계정 바로 연결(권한 관리 목록 + 창, partials/_account_link_modal.php) */
.account-link-bar { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; }
.account-link-picked { font-size: var(--fs-sm); font-weight: 600; color: var(--erp-primary); }
/* 계정 연결 칸 - 연결돼 있으면 [이메일 ×] 알약, 아니면 [＋ 계정 연결] 버튼. 둘이 같은 높이라 줄마다 칸 모양이 흔들리지 않는다 */
.col-account { width: 1%; white-space: nowrap; }
.account-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 26px;
  padding: 0 .2rem 0 .6rem;
  border-radius: 999px;
  background: var(--erp-success-soft);
  color: #2f5f42;
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: middle;
}
.account-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--erp-success); }
.account-unlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--erp-success);
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.account-unlink:hover { background: var(--erp-danger-soft); color: var(--erp-danger); }
.btn-row.account-connect {
  height: 26px;
  padding: 0 .75rem;
  border: 1px dashed var(--erp-border-strong);
  border-radius: 999px;
  background: var(--erp-surface);
  color: var(--erp-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.btn-row.account-connect:hover { border-style: solid; border-color: var(--erp-primary); background: var(--erp-primary-soft); }
.modal-sheet.is-wide.account-link-modal .modal-body { min-height: 0; } /* 넓은 창의 최소 높이(입출금등록용)가 빈칸만 만든다 */
.al-section + .al-section { margin-top: 1.25rem; }
.al-section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-weight: 700; color: var(--erp-text); }
.al-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--erp-primary-soft); color: var(--erp-primary);
  font-size: var(--fs-xs); font-weight: 800;
}
.al-count { font-size: var(--fs-sm); font-weight: 600; color: var(--erp-primary); }
.al-people { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 7.5rem; overflow-y: auto; }
.al-person { padding: .25rem .65rem; border-radius: 999px; background: var(--erp-surface-sunk); border: 1px solid var(--erp-border); font-size: var(--fs-sm); }
.al-search { position: relative; }
.al-search > svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--erp-text-faint); pointer-events: none; }
.al-search > .input { padding-left: 2.1rem; height: 40px; }
.al-results { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; min-height: 9rem; max-height: 18rem; overflow-y: auto; transition: opacity .15s; }
.al-results.is-loading { opacity: .5; }
.al-empty { margin: 0; padding: 2rem 1rem; text-align: center; font-size: var(--fs-sm); color: var(--erp-text-faint); }
.al-user {
  display: flex; align-items: center; gap: .75rem;
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.al-user:hover { border-color: var(--erp-primary); background: var(--erp-surface-hover); }
.al-user.is-chosen { border-color: var(--erp-primary); background: var(--erp-primary-soft); box-shadow: 0 0 0 1px var(--erp-primary) inset; }
.al-avatar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--erp-surface-sunk); color: var(--erp-text-label);
  font-weight: 700;
}
.al-avatar.is-google { background: #e8f0fe; color: #1a73e8; }
.al-avatar.is-kakao { background: #fee500; color: #3c1e1e; }
.al-user-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.al-user-name { font-weight: 600; color: var(--erp-text); }
.al-user-email { font-size: var(--fs-sm); color: var(--erp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-user-tags { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; max-width: 45%; }
.al-check { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--erp-border-strong); }
.al-user.is-chosen .al-check { border-color: var(--erp-primary); background: var(--erp-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.account-link-modal .modal-foot { align-items: center; }
.al-summary { font-size: var(--fs-sm); color: var(--erp-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-summary strong { color: var(--erp-text); }
.permission-table th { white-space: nowrap; }
.permission-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* 2차 로그인 화면(가입 신청·확인 중·사람 고르기) - 사이드바 없이 가운데 카드 하나 */
/* global.css가 html을 흰색으로 칠해서, 내용이 짧으면 body(회색)가 끝나는 곳부터 아래가 하얗게 끊겼다(2026-09-24) */
/* 첫 화면(home.php)과 같은 남색 배경 + 옅은 격자 위에 흰 카드(2026-09-24 사용자: "디자인을 좀 해줘") */
html:has(.gate-card) {
  min-height: 100%;
  background:
    linear-gradient(rgba(237, 231, 221, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(237, 231, 221, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(60rem 40rem at 85% 0%, rgba(58, 143, 138, .45), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(237, 231, 221, .12), transparent 60%),
    linear-gradient(160deg, #0a2021 0%, #123b3c 55%, #0a2021 100%);
  background-attachment: fixed;
}
html:has(.gate-card) body { background: transparent; }
main.section:has(.gate-card) { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem 16px; }
main.section:has(.gate-card) > .container { max-width: none; }
.join-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; }
.gate-card {
  max-width: 30rem;
  margin: 0 auto;
  padding: 2.25rem 2.25rem 1.75rem;
  background: var(--erp-surface);
  border-radius: var(--erp-radius-lg);
  box-shadow: 0 30px 80px rgba(3, 18, 19, .55);
}
.gate-kicker { margin: 0 0 1.1rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--erp-primary); }
.gate-title { font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 .5rem; color: var(--erp-text); }
.gate-lead { font-size: var(--fs-sm); color: var(--erp-text-muted); margin: 0 0 1.5rem; line-height: 1.65; word-break: keep-all; }
/* 진행 표시 - 점 네 개를 선으로 잇는다. 지난 단계는 체크, 지금 단계는 파랑(반려면 빨강) */
.gate-steps { display: flex; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.gate-steps li { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.gate-steps li + li::before {
  content: '';
  position: absolute;
  top: 12px;
  right: calc(50% + 16px);
  left: calc(-50% + 16px);
  height: 2px;
  background: var(--erp-border);
}
.gate-steps li.is-done + li::before, .gate-steps li.is-done::before, .gate-steps li.is-current::before { background: var(--erp-primary); }
.gate-step-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--erp-border);
  background: var(--erp-surface);
  font-size: var(--fs-xs); font-weight: 700; color: var(--erp-text-faint);
}
.gate-steps li.is-done .gate-step-dot { border-color: var(--erp-primary); background: var(--erp-primary); color: #fff; }
.gate-steps li.is-current .gate-step-dot { border-color: var(--erp-primary); color: var(--erp-primary); box-shadow: 0 0 0 4px var(--erp-primary-soft); }
.gate-steps li.is-current.is-error .gate-step-dot { border-color: var(--erp-danger); color: var(--erp-danger); box-shadow: 0 0 0 4px var(--erp-danger-soft); }
.gate-step-name { font-size: var(--fs-xs); color: var(--erp-text-faint); white-space: nowrap; }
.gate-steps li.is-done .gate-step-name { color: var(--erp-text-muted); }
.gate-steps li.is-current .gate-step-name { color: var(--erp-text); font-weight: 700; }
/* 칸 - 라벨은 위, 설명은 아래 */
.gate-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.gate-field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--erp-text-label); }
.gate-field .req { color: var(--erp-danger); }
.gate-card .input { height: 44px; border-radius: 8px; background: var(--erp-surface-sunk); border-color: var(--erp-border); }
.gate-card .textarea { min-height: 4.5rem; padding: .6rem .75rem; border-radius: 8px; background: var(--erp-surface-sunk); border-color: var(--erp-border); font-family: inherit; line-height: 1.55; resize: vertical; }
.gate-card .textarea:focus { background: var(--erp-surface); border-color: var(--erp-primary); box-shadow: 0 0 0 3px var(--erp-primary-ring); }
.join-memo-cell { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; } /* 목록 표는 한 줄 - 긴 설명은 말줄임, 전체는 마우스를 올리면 */
.gate-card .input:focus { background: var(--erp-surface); border-color: var(--erp-primary); box-shadow: 0 0 0 3px var(--erp-primary-ring); }
.gate-field > .form-help { margin: 0; }
.gate-hint { font-size: var(--fs-xs); color: var(--erp-text-faint); line-height: 1.5; word-break: keep-all; }
.gate-card .gate-submit { width: 100%; height: 48px; margin-top: .5rem; justify-content: center; font-size: var(--fs-lg); font-weight: 700; }
.gate-card .gate-submit.is-primary { box-shadow: 0 10px 24px rgba(14, 79, 82, .35); }
.gate-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 1.1rem; font-size: var(--fs-sm); }
.gate-links a { color: var(--erp-text-muted); }
.gate-links a:hover { color: var(--erp-primary); text-decoration: underline; }
@media (max-width: 480px) {
  .gate-card { padding: 1.75rem 1.25rem 1.5rem; }
}
.switch-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.switch-list form { margin: 0; }
.switch-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .75rem 1rem;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.switch-item:hover { border-color: var(--erp-primary); }
.switch-item.is-current { border-color: var(--erp-primary); background: var(--erp-primary-soft); }
.switch-name { font-weight: 600; color: var(--erp-text); }
.switch-meta { font-size: var(--fs-sm); color: var(--erp-text-muted); }

/* 로그인할 때 서브계정 고르기 창(partials/_switch_modal.php) - 로그인·신청 화면과 같은 남색 배경 위에 흰 카드.
   카드를 골라 두고 [시작하기]. 뒤는 비어 있으니(ErpGate::askFirst) 배경을 흐린 회색 대신 브랜드 배경으로 덮는다. */
.switch-modal { width: min(480px, calc(100vw - 32px)); border-radius: var(--erp-radius-lg); overflow: hidden; box-shadow: 0 40px 100px rgba(3, 18, 19, .6); }
.modal-sheet.switch-modal::backdrop {
  background:
    linear-gradient(rgba(237, 231, 221, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(237, 231, 221, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(60rem 40rem at 85% 0%, rgba(58, 143, 138, .45), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(237, 231, 221, .12), transparent 60%),
    linear-gradient(160deg, #0a2021 0%, #123b3c 55%, #0a2021 100%);
}
.switch-modal > form { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.switch-modal-head {
  position: relative;
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(22rem 10rem at 100% 0%, rgba(127, 184, 179, .35), transparent 70%),
    linear-gradient(135deg, #123b3c 0%, #0e4f52 100%);
}
.switch-modal-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: .7rem; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .35);
  font-size: var(--fs-xl); font-weight: 800;
}
.switch-modal-hello { margin: 0 0 .2rem; font-size: var(--fs-sm); color: #cfe0dc; }
.switch-modal-title { margin: 0 0 .5rem; font-size: var(--fs-xl); font-weight: 800; color: #fff; letter-spacing: -.01em; }
.switch-modal-lead { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: #cfe0dc; word-break: keep-all; }
.switch-modal-list { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.5rem .25rem; overflow-y: auto; }
.switch-option {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 1rem;
  border: 1.5px solid var(--erp-border);
  border-radius: 12px;
  background: var(--erp-surface);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.switch-option:hover { border-color: var(--erp-primary); background: var(--erp-surface-hover); }
.switch-option > input { position: absolute; opacity: 0; pointer-events: none; }
.switch-option:has(> input:checked) { border-color: var(--erp-primary); background: var(--erp-primary-soft); box-shadow: 0 6px 18px var(--erp-primary-ring); }
.switch-option:has(> input:focus-visible) { outline: 2px solid var(--erp-primary); outline-offset: 2px; }
.switch-option-avatar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  font-size: var(--fs-lg); font-weight: 800;
}
.switch-option-avatar.is-tone-0 { background: #dde6ec; color: #2f5a78; }
.switch-option-avatar.is-tone-1 { background: #dcfce7; color: #15803d; }
.switch-option-avatar.is-tone-2 { background: #fef3c7; color: #b45309; }
.switch-option-avatar.is-tone-3 { background: #fce7f3; color: #be185d; }
.switch-option-avatar.is-tone-4 { background: #e0e7ff; color: #4338ca; }
.switch-option-avatar.is-tone-staff { background: #cffafe; color: #0e7490; }
.switch-option-avatar.is-tone-admin { background: #2d2a26; color: #fff; }
.switch-option-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.switch-option-name { font-weight: 700; color: var(--erp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-option-meta { font-size: var(--fs-sm); color: var(--erp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-option-recent { flex: 0 0 auto; padding: .15rem .5rem; border-radius: 999px; background: var(--erp-surface); border: 1px solid var(--erp-border-strong); color: var(--erp-primary); font-size: var(--fs-xs); font-weight: 700; }
.switch-option-radio { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--erp-border-strong); background: var(--erp-surface); }
.switch-option:has(> input:checked) .switch-option-radio {
  border-color: var(--erp-primary);
  background: var(--erp-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.switch-modal-tip {
  display: flex; align-items: flex-start; gap: .45rem;
  margin: .9rem 1.5rem 0;
  font-size: var(--fs-xs); line-height: 1.6; color: var(--erp-text-muted); word-break: keep-all;
}
.switch-modal-tip > svg { flex: 0 0 auto; margin-top: .2rem; color: var(--erp-text-faint); }
.switch-modal-tip b { color: var(--erp-text); font-weight: 600; }
.switch-modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.1rem; padding: 1rem 1.5rem;
  border-top: 1px solid var(--erp-border);
  background: var(--erp-surface-hover);
}
.switch-modal-skip { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.switch-modal-skip input { width: 18px; height: 18px; margin-top: .1rem; }
.switch-modal-skip > span { display: flex; flex-direction: column; font-size: var(--fs-sm); font-weight: 600; color: var(--erp-text); }
.switch-modal-skip small { font-size: var(--fs-xs); font-weight: 400; color: var(--erp-text-faint); }
.switch-modal .switch-modal-start:focus { outline: none; }
.switch-modal .switch-modal-start:focus-visible { box-shadow: 0 0 0 3px rgba(14, 79, 82, .35), 0 8px 20px rgba(14, 79, 82, .3); }
html:has(#switch-modal[open]) { background: #0a2021; } /* 스크롤바 자리까지 같은 배경 - 오른쪽에 흰 띠가 남았다 */
.switch-modal .switch-modal-start { flex: 0 0 auto; height: 42px; padding: 0 1.6rem; font-weight: 700; box-shadow: 0 8px 20px rgba(14, 79, 82, .3); }
@media (max-width: 480px) {
  .switch-modal-foot { flex-direction: column; align-items: stretch; }
  .switch-modal .switch-modal-start { width: 100%; }
}
/* 가입 신청 매칭(join_request/show.php) - 새로 만들기 두 줄, 업데이트 확인 창의 기존|신청서 비교표 */
.join-create { display: flex; flex-direction: column; gap: .6rem; }
.join-create-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.join-create-label { flex: 0 0 6.5rem; font-weight: 600; color: var(--erp-text-label); }
.join-create-row > .has-text-grey { flex: 1 1 auto; }
.join-create-row > .company-picker { flex: 1 1 18rem; max-width: 28rem; }
.compare-table tr.is-changed td { background: var(--erp-warning-soft); }

/* 비로그인 첫 화면(home.php) - 로그인 + 문의하기, 문의 모달 */
/* 화면 전체를 덮는다 - layout.php가 감싸는 main.section·.container의 여백과 폭 제한을 이 화면에서만 푼다 */
html:has(.home-gate) { background: #0a2021; }
main.section:has(> .container > .home-gate) { padding: 0; }
main.section > .container:has(> .home-gate) { max-width: none; padding: 0; }
.home-gate {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: 3rem clamp(1rem, 5vw, 5rem);
  color: #e6efec;
  background:
    radial-gradient(60rem 40rem at 85% 10%, rgba(58, 143, 138, .45), transparent 60%),
    radial-gradient(40rem 30rem at 10% 90%, rgba(237, 231, 221, .12), transparent 60%),
    linear-gradient(160deg, #0a2021 0%, #123b3c 55%, #0a2021 100%);
}
/* 옅은 격자 - 도면·스프레드시트 느낌 */
.home-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(237, 231, 221, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 231, 221, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
/* 대시보드 그림 - 비스듬히 눕혀 뒤에 깔고, 글자가 읽히도록 흐리게 */
.home-hero-art {
  position: absolute;
  width: min(1100px, 95vw);
  right: -8vw;
  top: 50%;
  transform: translateY(-50%) perspective(1600px) rotateY(-22deg) rotateX(10deg) rotateZ(2deg);
  opacity: .55;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .45));
  pointer-events: none;
  user-select: none;
}
.home-intro, .home-card { position: relative; z-index: 1; }
.home-intro { flex: 0 1 34rem; }
.home-brand { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-lg); font-weight: 700; color: #fff; }
.home-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #0e4f52, #3a8f8a);
  color: #fff;
  box-shadow: 0 8px 20px rgba(14, 79, 82, .45);
}
.home-headline {
  margin: 1.5rem 0 1rem;
  font-size: clamp(28px, 3.4vw, 44px); /* 척도(--fs-*)는 관리 화면용 - 첫 화면 제목만 예외로 크게 */
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #fff;
}
.home-sub { font-size: var(--fs-lg); line-height: 1.6; color: #c9d6d2; margin: 0; }
.home-card {
  flex: 0 0 24rem;
  max-width: 100%;
  padding: 2.5rem 2.25rem 2.25rem;
  border-radius: var(--erp-radius-lg);
  background: var(--erp-surface);
  box-shadow: 0 30px 80px rgba(3, 18, 19, .55), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  backdrop-filter: blur(12px);
  color: var(--erp-text);
}
.home-card-kicker { margin: 0 0 .35rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--erp-primary); }
.home-card-title { margin: 0 0 .5rem; font-size: var(--fs-2xl); font-weight: 800; color: var(--erp-text); }
.home-lead { font-size: var(--fs-sm); line-height: 1.6; color: var(--erp-text-muted); margin: 0 0 1.5rem; }
.home-card .home-button { width: 100%; justify-content: center; height: 46px; font-size: var(--fs-lg); font-weight: 700; }
.home-card .home-button.is-primary { box-shadow: 0 10px 24px rgba(14, 79, 82, .35); }
/* 구글·카카오 버튼 - 각 회사 안내 색(구글: 흰 바탕+로고, 카카오: #FEE500 바탕+검은 말풍선) */
.home-card .home-social { gap: .6rem; font-size: var(--fs-base); font-weight: 600; }
.home-card .home-social + .home-social { margin-top: .6rem; }
.home-card .home-social.is-google { background: #fff; border: 1px solid var(--erp-border-strong); color: #1f1f1f; }
.home-card .home-social.is-google:hover { background: #fff; border-color: var(--erp-text-faint); }
.home-card .home-social.is-kakao { background: #fee500; border: 1px solid #fee500; color: rgba(0, 0, 0, .85); }
.home-card .home-social.is-kakao:hover { background: #f5dc00; border-color: #f5dc00; }
.home-divider { display: flex; align-items: center; gap: .6rem; margin: 1.5rem 0 .9rem; color: var(--erp-text-faint); font-size: var(--fs-xs); }
.home-divider::before, .home-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--erp-border); }
/* 좁은 화면 - 소개를 위로, 카드는 아래 전체 폭 */
@media (max-width: 900px) {
  .home-gate { flex-direction: column; align-items: stretch; justify-content: center; gap: 2rem; padding: 2.5rem 16px; }
  .home-intro { flex: none; }
  .home-headline { margin-top: 1.1rem; }
  .home-sub { font-size: var(--fs-base); }
  .home-card { flex: none; width: 100%; max-width: 28rem; margin: 0 auto; padding: 2rem 1.5rem; }
  .home-hero-art { width: 160vw; right: -60vw; top: 12%; opacity: .3; }
}
.inquiry-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 문의하기 창 - 고객이 보는 창이라 관리 화면 모달보다 여유 있게: 라벨은 칸 위, 두 칸씩, 번호 붙은 묶음 */
.inquiry-sheet { width: min(720px, calc(100vw - 32px)); border-radius: var(--erp-radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(3, 18, 19, .45); }
.modal-sheet.inquiry-sheet::backdrop { background: rgba(5, 20, 21, .6); backdrop-filter: blur(3px); }
.inquiry-sheet > form { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.inquiry-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.4rem 1.5rem 1.25rem;
  color: #fff;
  background:
    radial-gradient(24rem 10rem at 100% 0%, rgba(127, 184, 179, .35), transparent 70%),
    linear-gradient(135deg, #123b3c 0%, #0e4f52 100%);
}
.inquiry-head-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}
.inquiry-title { margin: 0 0 .2rem; font-size: var(--fs-xl); font-weight: 800; color: #fff; }
.inquiry-sub { margin: 0; padding-right: 1.5rem; font-size: var(--fs-sm); line-height: 1.5; color: #cfe0dc; word-break: keep-all; }
.inquiry-close { position: absolute; top: .9rem; right: 1rem; color: rgba(255, 255, 255, .7); font-size: 22px; }
.inquiry-close:hover { color: #fff; }
.inquiry-body { flex: 1 1 auto; max-height: none; padding: 1.4rem 1.5rem .5rem; background: var(--erp-surface); }
.inquiry-section + .inquiry-section { margin-top: 1.5rem; }
.inquiry-section-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: var(--fs-base); font-weight: 700; color: var(--erp-text); }
.inquiry-section-title > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--erp-primary-soft); color: var(--erp-primary);
  font-size: var(--fs-xs); font-weight: 800;
}
.inquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.inquiry-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.inquiry-field.is-full { grid-column: 1 / -1; }
.inquiry-field > label, .inquiry-captcha-row > label { font-size: var(--fs-sm); font-weight: 600; color: var(--erp-text-label); }
.inquiry-sheet .req { color: var(--erp-danger); }
.inquiry-sheet .input, .inquiry-sheet .textarea { height: 42px; border-radius: 8px; background: var(--erp-surface-sunk); border-color: var(--erp-border); }
.inquiry-sheet .textarea { font-family: inherit; height: auto; min-height: 8.5rem; padding: .65rem .75rem; line-height: 1.6; }
.inquiry-sheet .input:focus, .inquiry-sheet .textarea:focus { background: var(--erp-surface); border-color: var(--erp-primary); box-shadow: 0 0 0 3px var(--erp-primary-ring); }
.inquiry-sheet .error-message { margin-top: 0; }
/* 첨부 - 파일 칸 자체를 점선 상자로 */
.inquiry-file {
  width: 100%;
  height: 42px;
  padding: 5px;
  border: 1px dashed var(--erp-border-strong);
  border-radius: 8px;
  background: var(--erp-surface-sunk);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--erp-text-muted);
  cursor: pointer;
}
.inquiry-file:hover { border-color: var(--erp-primary); background: var(--erp-primary-soft); }
.inquiry-file::file-selector-button {
  margin-right: .6rem;
  height: 30px;
  padding: 0 .8rem;
  border: 0;
  border-radius: 6px;
  background: var(--erp-primary-soft);
  color: var(--erp-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.inquiry-field > .help { font-size: var(--fs-xs); color: var(--erp-text-faint); word-break: keep-all; }
/* 자동등록 방지 + 동의 - 옅은 회색 상자 하나에 */
.inquiry-confirm { margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: 10px; background: var(--erp-bg); border: 1px solid var(--erp-border); }
.inquiry-captcha-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.inquiry-captcha { display: inline-flex; align-items: center; gap: .5rem; }
.inquiry-captcha > .input { width: 5rem; height: 38px; text-align: center; background: var(--erp-surface); }
.inquiry-captcha-q { padding: .35rem .7rem; border-radius: 6px; background: var(--erp-surface); border: 1px solid var(--erp-border); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.inquiry-agree { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--erp-border); }
.inquiry-agree .checkbox { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--erp-text); cursor: pointer; }
.inquiry-agree .checkbox input { width: 18px; height: 18px; }
.inquiry-agree details > summary { font-size: var(--fs-sm); color: var(--erp-primary); margin-top: .4rem; cursor: pointer; }
.inquiry-agree-text { font-size: var(--fs-sm); color: var(--erp-text-muted); background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); padding: .6rem .75rem; margin-top: .4rem; }
.inquiry-agree-text p { margin: 0 0 .3rem; }
.inquiry-body > [data-inquiry-error]:empty { display: none; }
.inquiry-foot { padding: .9rem 1.5rem; background: var(--erp-surface); }
.inquiry-foot .button { height: 42px; padding: 0 1.25rem; font-weight: 600; }
.inquiry-foot .button.is-primary { padding: 0 1.6rem; box-shadow: 0 8px 20px rgba(14, 79, 82, .3); }
.inquiry-done { text-align: center; padding: 3rem 1.5rem; }
.inquiry-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 50%; background: var(--erp-success-soft); color: var(--erp-success); }
.inquiry-done-title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: .4rem; }
@media (max-width: 600px) {
  .inquiry-grid { grid-template-columns: minmax(0, 1fr); }
  .inquiry-head, .inquiry-body, .inquiry-foot { padding-left: 1rem; padding-right: 1rem; }
}

/* 아래 버튼 바 - 왼쪽 "목록으로", 오른쪽 저장류 */
.form-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: var(--erp-gap);
  padding-top: var(--erp-gap);
  border-top: 1px solid var(--erp-border);
}

.form-actions .is-right { margin-left: auto; display: flex; gap: .4rem; }

/* ── 상세 화면 (가이드 04번) ────────────────────────────────────────────────
   수정/삭제/목록으로는 화면 머리 오른쪽에 있고, 본문은 "라벨-값" 2열 패널이다. */
.detail-grid {
  display: grid;
  /* 상세 화면의 칸도 한 줄에 하나씩 전체 폭(2026-09-23 사용자 요구 - 등록·수정 화면과 같다) */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--erp-gap);
  margin-bottom: var(--erp-gap);
}

/* 비고·내용처럼 길게 쓰는 값 - 줄바꿈은 살리고, 300px을 넘으면 칸 안에서 스크롤(2026-09-23 사용자 요구).
   값이 길다고 상세 화면 전체가 한없이 길어지면 아래 칸을 찾기 어렵다. */
.detail-list dd.detail-long {
  white-space: pre-line;
  max-height: 300px;
  overflow-y: auto;
}

.detail-grid:last-child { margin-bottom: 0; }
.detail-grid > .is-full { grid-column: 1 / -1; }

.detail-panel {
  background: var(--erp-surface);
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  padding: .85rem 1rem;
}

.detail-panel-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
}

.detail-panel-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--erp-text);
}

.detail-panel-head .is-right { margin-left: auto; font-size: var(--fs-sm); }

/* 표를 감싼 패널은 표가 테두리에 붙게 한다 */
.detail-panel.has-table { padding: .85rem 0 0; }
.detail-panel.has-table .detail-panel-head { padding: 0 1rem; }
.detail-panel.has-table .table { margin: 0; }
.detail-panel.has-table .table tbody tr:last-child td { border-bottom: 0; }
/* 표 머리글은 위아래 모두 선을 긋는다(2026-09-22 사용자 지적). 목록 카드는 머리글 위에
   `.list-actions`의 밑줄이 있어 위아래가 맞는데, 상세 패널은 패널 제목 아래에 선이 없어서
   머리글 아래쪽에만 선이 보였다. */
.detail-panel.has-table .table thead th { border-top: 0; }
/* 표 머리 띠가 패널 안에서 떠 보이게 좌우를 띄운다 */
.detail-panel.has-table > .table,
.detail-panel.has-table > .table-container { margin: 0 .75rem; width: calc(100% - 1.5rem); }

/* 상세 화면 탭(업체 상세) - 머리 아래 한 줄. 탭마다 주소가 다른 링크다(`?tab=`).
   지금 탭은 파랑 밑줄로만 표시한다 - 파랑은 기본 동작 색이라 배경까지 칠하면 버튼처럼 보인다.
   스크롤은 두지 않는다(2026-09-23 사용자 요구) - 예전 overflow-x:auto가, 밑줄을 줄 선에 겹치려고 1px 내린 탭
   때문에 세로 스크롤 막대까지 띄웠다. 좁은 화면에서 넘치면 다음 줄로 내려간다. */
/* 2026-09-26 떠 있는 틀 안에 탭(기준 이미지 TABS). 2차(사용자 지적 - 이미지와 달랐다):
   지금 탭은 **진한 굵은 글씨 + 틀 맨 아래에 붙은 청록 밑줄 3px**(글자는 청록이 아니다), 안 고른 탭도 진한 회갈색,
   틀 모서리는 8px, 밑줄이 틀 아래 가장자리에 닿도록 틀에 위아래 여백을 두지 않는다 */
.detail-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: 1rem;
  padding: 0 .5rem;
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-1);
  overflow: hidden;
}
.detail-tabs a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem 1.1rem calc(.8rem - 3px);
  border-bottom: 3px solid transparent;
  color: var(--erp-text-label);
  font-size: var(--fs-base);
  white-space: nowrap;
}
.detail-tabs a:hover { color: var(--erp-text); }
/* 아이콘은 글자보다 한 톤 연하게 - 켜진 탭에서만 글자와 같은 색이 된다 */
.detail-tabs a svg { color: var(--erp-text-muted); }
.detail-tabs a:hover svg,
.detail-tabs a.is-active svg { color: var(--erp-text); }
.detail-tabs a.is-active {
  border-bottom-color: var(--erp-primary);
  color: var(--erp-text);
  font-weight: 700;
}

/* 표 패널 안에 접어 둔 폼(담당자 추가 등) - 패널 좌우 여백을 여기서 준다.
   표를 사이에 두고 감쌀 수 없어 <details>로 못 묶는다. 여는 단추는 패널 머리에 있고
   열림 상태만 .is-open으로 옮겨 준다(각 화면의 작은 스크립트). */
.detail-panel.has-table .list-empty { margin: 0; border: 0; }
.panel-form { display: none; padding: .9rem 1rem 1rem; border-top: 1px solid var(--erp-border); }
.panel-form.is-open { display: block; }
.panel-form .form-actions { margin-top: .9rem; padding-top: .9rem; }

/* 라벨-값 목록. 표가 아니라 그리드로 짜야 값이 길어도 라벨 폭이 안 밀린다. */
.detail-list {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  row-gap: 0;
}

.detail-list > dt,
.detail-list > dd {
  padding: .4rem 0;
  border-bottom: 1px solid var(--erp-border-soft);
  min-width: 0;
}

.detail-list > dt { color: var(--erp-text-muted); font-size: var(--fs-sm); }
.detail-list > dd { margin: 0; color: var(--erp-text); word-break: break-all; }
.detail-list > dt:nth-last-of-type(1),
.detail-list > dd:nth-last-of-type(1) { border-bottom: 0; }
.detail-list a { color: var(--erp-primary); text-decoration: none; }
.detail-list a:hover { text-decoration: underline; }

/* 화면이 좁아지면 2열을 포기한다 - 가로 스크롤이 생기는 것보다 낫다 */
@media (max-width: 900px) {
  .form-grid,
  .form-card > .form-grid.is-halves,
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 검색줄 안의 체크박스 필터 - 버튼처럼 보이되 눌린 상태가 드러나야 한다 */
/* 2026-09-26 알약 모양으로 떠 있고, 고르면 들어간다 */
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-color: transparent;
  border-radius: 999px;
  padding: 0 .8rem;
  font-size: var(--fs-base);
  color: var(--erp-text-muted);
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-1);
  cursor: pointer;
  white-space: nowrap;
}

.filter-check:hover { border-color: var(--erp-border-strong); }
.filter-check:has(input:checked) { border-color: var(--erp-primary); background: var(--erp-primary-soft); color: var(--erp-primary); box-shadow: var(--erp-shadow-in); }
.filter-check input { margin: 0; }

/* ── 화면 머리 ──────────────────────────────────────────────────────────────
   한 줄이다: 아이콘 + 제목 + (건수·상태) ... 오른쪽 버튼.
   경로 표시는 뺐다 - 사이드바에 지금 위치가 이미 강조돼 있어 같은 정보를 두 번 보여주는
   셈이었고, 머리가 두 줄이 되면서 본문이 그만큼 밀렸다. */
.page-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
}

.page-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-1);
  color: var(--erp-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.page-head-title { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.page-head-meta { font-size: var(--fs-sm); color: var(--erp-text-muted); }
.page-head-tags { display: inline-flex; align-items: center; gap: .25rem; }
.page-head-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
/* 업체 상세 탭 안에서 연 화면의 제목줄 - 위의 업체명보다 작게(CompanyTab, _page_head.php) */
.page-head.is-sub { margin-bottom: .8rem; }
.page-head.is-sub .page-head-icon { width: 28px; height: 28px; }
.page-head.is-sub .page-head-icon svg { width: 16px; height: 16px; }
.page-head.is-sub .page-head-title { font-size: var(--fs-lg); }

/* ── 카드(.box) ─────────────────────────────────────────────────────────── */
.box {
  background: var(--erp-surface);
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  padding: 1rem;
  margin-bottom: var(--erp-gap);
}

/* 카드 안 마지막 요소의 아래 여백은 지운다 - 안 그러면 카드 밑이 들쭉날쭉해진다 */
.box > *:last-child { margin-bottom: 0; }
.box p { margin: 0 0 .6rem; }
.box p:last-child { margin-bottom: 0; }

.box .title { color: var(--erp-text); }
.title { margin: 0 0 .6rem; font-weight: 700; color: var(--erp-text); }
.title.is-6 { font-size: var(--fs-lg); }
.title.is-5 { font-size: var(--fs-lg); }
.title.is-4 { font-size: var(--fs-xl); }
.title.is-3 { font-size: var(--fs-2xl); margin-bottom: .25rem; }
.heading {
  font-size: var(--fs-xs);
  color: var(--erp-text-muted);
  letter-spacing: .02em;
  margin-bottom: .3rem;
  text-transform: none;
}

/* 통계 카드 - 대시보드 상단 */
.stat-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--erp-surface);
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.stat-card:hover { border-color: var(--erp-border-strong); color: inherit; }
.stat-card-body { flex: 1 1 auto; min-width: 0; }
.stat-card-label { font-size: var(--fs-sm); color: var(--erp-text-muted); }
.stat-card-value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; margin-top: .15rem; }
.stat-card-hint { font-size: var(--fs-xs); color: var(--erp-text-faint); }

.stat-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--erp-primary-soft);
  color: var(--erp-primary);
}

.stat-card-icon.is-danger { background: var(--erp-danger-soft); color: var(--erp-danger); }
.stat-card-icon.is-success { background: var(--erp-success-soft); color: var(--erp-success); }
.stat-card-icon.is-warning { background: var(--erp-warning-soft); color: var(--erp-warning); }

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
/* 2026-09-26 알약 모양으로 떠 있고, 누르면 들어간다(기준 이미지 PRIMARY BUTTON · PRESSED STATE) */
.button {
  border-radius: 999px;
  border-color: transparent;
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-1);
  color: var(--erp-text);
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 0 1.05rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

.button:hover { background: var(--erp-surface); border-color: transparent; color: var(--erp-primary); }
.button:active { box-shadow: var(--erp-shadow-in); }
.button.is-small { font-size: var(--fs-sm); padding: 0 .6rem; }
.button[hidden] { display: none !important; } /* .button의 display가 hidden을 이겨서 접수 뒤에도 [보내기]가 남았다(2026-09-24) */
.stamp-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.stamp-upload > .input[type="file"] { flex: 0 1 18rem; min-width: 0; }

/* 기본 동작(저장/등록/검색)은 파랑. 가이드의 Primary */
.button.is-dark,
.button.is-link,
.button.is-primary {
  background: var(--erp-primary);
  border-color: var(--erp-primary);
  color: #fff;
}

.button.is-dark:hover,
.button.is-link:hover,
.button.is-primary:hover {
  background: var(--erp-primary-dark);
  border-color: var(--erp-primary-dark);
  color: #fff;
}

.button.is-danger { background: var(--erp-danger); border-color: var(--erp-danger); color: #fff; }
.button.is-danger:hover { background: var(--erp-danger-dark); border-color: var(--erp-danger-dark); color: #fff; }
.button.is-danger.is-light { background: var(--erp-danger-soft); border-color: transparent; color: var(--erp-danger); }
.button.is-danger.is-light:hover { background: #ecd0c8; color: var(--erp-danger-dark); }

.button.is-success { background: var(--erp-success); border-color: var(--erp-success); color: #fff; }
.button.is-warning { background: var(--erp-warning); border-color: var(--erp-warning); color: #fff; }
.button.is-white { background: var(--erp-surface); }
.button[disabled] { background: #e2dbcf; border-color: transparent; color: var(--erp-text-faint); box-shadow: none; cursor: not-allowed; }

/* 보내는 중 - form-validate.js가 누른 버튼에 붙인다. 들어간 면 + 도는 표시(기준 이미지 PRESSED STATE, 2026-09-26).
   버튼은 잠겨(disabled) 있지만 제 색을 지킨다 - 무엇을 눌렀는지 보여야 한다 */
.button.is-loading,
.button.is-loading[disabled] { color: var(--erp-text); background: var(--erp-surface); box-shadow: var(--erp-shadow-in); pointer-events: none; }
.button.is-primary.is-loading,
.button.is-primary.is-loading[disabled] { background: var(--erp-primary-dark); border-color: var(--erp-primary-dark); color: #fff; }
.button.is-danger.is-loading,
.button.is-danger.is-loading[disabled] { background: var(--erp-danger-dark); border-color: var(--erp-danger-dark); color: #fff; }
.button.is-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: erp-spin .8s linear infinite;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button.is-loading::before { animation-duration: 2.4s; } }

/* 체크박스를 버튼처럼 쓰는 필터 토글 */
.button.checkbox { font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }

/* ── 입력 ───────────────────────────────────────────────────────────────── */
.input,
.textarea,
.select select {
  border-color: var(--erp-border);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface-sunk);
  box-shadow: var(--erp-shadow-in);
  color: var(--erp-text);
  font-size: var(--fs-base);
  padding: 0 .65rem;
  width: 100%;
  line-height: 1.4;
}

.textarea { padding: .5rem .65rem; line-height: 1.5; }

.input:focus,
.textarea:focus,
.select select:focus {
  outline: 0;
  background: var(--erp-surface);
  border-color: var(--erp-primary);
  box-shadow: 0 0 0 3px var(--erp-primary-ring);
}

.input::placeholder, .textarea::placeholder { color: var(--erp-text-faint); }
.input.is-small, .select.is-small select { font-size: var(--fs-sm); padding: 0 .5rem; }
.textarea.is-small { font-size: var(--fs-sm); padding: .4rem .5rem; }
.input[readonly] { background: #e6dfd3; color: var(--erp-text-muted); }

.label { font-size: var(--fs-sm); font-weight: 600; color: var(--erp-text-label); margin-bottom: .3rem; display: block; }
.label.is-small { font-size: var(--fs-sm); }
.help { font-size: var(--fs-xs); color: var(--erp-text-faint); margin-top: .25rem; }
.field { margin-bottom: var(--erp-gap); }

/* 체크박스·라디오 - 브라우저 기본 모양 대신 기준 이미지(CHECKBOX · RADIO)대로 직접 그린다(2026-09-26 2차, 사용자 지적).
   안 고른 체크박스: 떠 있는 베이지 네모. 안 고른 라디오: 들어간 베이지 동그라미.
   고른 체크박스: 청록 네모 + 흰 체크. 고른 라디오: **청록 원 + 가운데 밝은 점**(2026-09-26 4차 - 이미지대로, 예전엔 밝은 원 + 청록 점이라 달랐다).
   크기는 쓰는 곳에서 width/height로 정한다(기본 18px). 숨겨 쓰는 입력(.switch-option > input 등)은 opacity 0 그대로라 영향 없다. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  background: var(--erp-surface-sunk) center / 72% no-repeat;
  box-shadow: inset 2px 2px 4px var(--erp-sh-dark), inset -2px -2px 4px var(--erp-sh-soft);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .12s, box-shadow .12s;
}
input[type="checkbox"] { border-radius: 5px; background-color: var(--erp-surface); box-shadow: -1px -1px 3px var(--erp-sh-soft), 2px 2px 4px var(--erp-sh-dark); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked {
  background-color: var(--erp-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  box-shadow: 2px 2px 5px var(--erp-sh-dark), -1px -1px 3px var(--erp-sh-soft);
}
input[type="radio"]:checked {
  background: var(--erp-primary) radial-gradient(circle, var(--erp-surface) 0 31%, transparent 35%);
  box-shadow: 2px 2px 5px var(--erp-sh-dark), -1px -1px 3px var(--erp-sh-soft);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 2px solid var(--erp-primary); outline-offset: 2px; }
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* 검증 실패 표시 - form-validate.js가 붙이는 클래스 */
.field-error { border-color: var(--erp-danger) !important; }
.error-message { display: block; font-size: var(--fs-xs); color: var(--erp-danger); margin-top: .25rem; }

/* ── 표 ─────────────────────────────────────────────────────────────────── */
/* 2026-09-26 표 머리는 떠 있는 둥근 띠(기준 이미지 COMPACT TABLE HEADER). 띠 모서리를 둥글리려고 separate로 그린다 */
.table {
  width: 100%;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-base);
}

.table th {
  background: var(--erp-surface-sunk);
  color: var(--erp-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--erp-border);
  white-space: nowrap;
}

/* 표 본문 글자 크기는 한 가지다. 화면마다 셀에 크기 클래스를 붙였다 말았다 해서
   같은 행 안에서도 글자가 커졌다 작아졌다 하던 문제(2026-09-22 지적)를 여기서 막는다.
   정말 보조인 것(태그·help·머리글)만 따로 작아진다. */
.table td {
  font-size: var(--fs-base);
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--erp-border-soft);
  vertical-align: middle;

  /* 긴 값(주소 등)은 줄을 바꾼다. 칸 밖으로 삐져나가는 건 그냥 오류다
     (2026-09-22 지적 - 상세 화면의 주소가 상자 테두리를 뚫고 나갔다). */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 목록 표만 한 줄 고정 - 행 높이가 들쭉날쭉하면 훑어보기 어렵다.
   길어지면 카드 안에서 가로로 밀린다(.list-table이 스크롤을 갖고 있다). */
.list-table .table th,
.list-table .table td { white-space: nowrap; }
.list-table .table td.is-wrap { white-space: normal; }

/* 긴 글(내용·비고)만 줄바꿈을 허용한다 - 전부 허용하면 행 높이가 제각각이 되어
   표를 훑어 내려가기 어렵다 */
.table td.is-wrap { white-space: normal; }

.table tbody tr:hover { background: var(--erp-surface-hover); }
.table thead th { background: var(--erp-surface); border-bottom: 0; }
.table thead { filter: drop-shadow(-2px -2px 3px var(--erp-sh-soft)) drop-shadow(2px 3px 4px var(--erp-sh-dark)); }
.table thead tr:first-child th:first-child { border-radius: 10px 0 0 10px; }
.table thead tr:first-child th:last-child { border-radius: 0 10px 10px 0; }
.table thead + tbody tr:first-child td { padding-top: .6rem; }
.table.is-narrow th, .table.is-narrow td { padding: .36rem .5rem; }

.table tfoot th { background: var(--erp-surface-sunk); border-top: 1px solid var(--erp-border); }
.table a { color: var(--erp-primary); text-decoration: none; font-weight: 500; }
.table a:hover { text-decoration: underline; }
.table-container { overflow-x: auto; }

/* 표 안의 작은 입력(행 단위 편집 화면) - 칸이 꽉 차 보이지 않게 */
.table .input.is-small, .table .select.is-small select { min-width: 0; }

/* ── 상태 태그 ──────────────────────────────────────────────────────────── */
/* 2026-09-26 뜻 색을 **진한 바탕 + 흰 글자**로(기준 이미지 BADGES 모양, 사용자가 A안 - 색 구분은 그대로) */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .16rem .6rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--erp-text-muted);
  color: #fff;
  white-space: nowrap;
}

.tag.is-light { background: var(--erp-text-faint); color: #fff; }
.tag.is-dark, .tag.is-primary { background: var(--erp-primary); color: #fff; }
.tag.is-success { background: var(--erp-success); color: #fff; }
.tag.is-danger, .tag.is-danger.is-light { background: var(--erp-danger); color: #fff; }
.tag.is-warning, .tag.is-warning.is-light { background: var(--erp-warning); color: #fff; }
.tag.is-info { background: var(--erp-info); color: #fff; }
.tag.is-medium { font-size: var(--fs-sm); padding: .25rem .7rem; }

/* ── 업체 분류·상태 색 ──────────────────────────────────────────────────────
   목록 뱃지(`.tag.is-coded`)와 검색줄 알약(`.filter-check.is-coded`)이 **같은 이름**을 쓴다.
   검색줄에서 고른 색과 표에서 보이는 색이 다르면 색이 아무것도 알려주지 못한다
   (2026-09-22 사용자 요구). 이름표는 `src/models/Company.php`의 CATEGORY_TONES/STATUS_TONES.

   분류(`erp-c-*`)는 위험도가 아니라 **성격**이라 다섯을 서로 다른 색상으로만 가른다 -
   초록=좋음/빨강=나쁨 같은 의미는 없다.
   상태(`erp-s-*`)는 화면 색 규칙 그대로다 - 정상=초록, 보류=노랑(주의), 폐업=빨강(끝),
   타업체로이동=하늘, 임시저장=회색. 예전에는 임시저장·보류가 같은 노랑, 폐업·타업체로이동이
   같은 회색이라 다섯 중 셋이 구분되지 않았다. */
/* 2026-09-26 뜻·구분은 그대로, 채도를 낮춰 베이지에 맞췄다. 뱃지는 --c-fg 바탕 + 흰 글자, 알약·행은 옅은 --c-bg/--c-row */
.erp-c-trade   { --c-bg: #dde6ec; --c-fg: #2f5a78; --c-line: #aec3d3; }
.erp-c-partner { --c-bg: #e6e0ec; --c-fg: #5d4a7c; --c-line: #c5b8d6; }
.erp-c-rodem   { --c-bg: #dce8e3; --c-fg: #0e4f52; --c-line: #a6c6bc; }
.erp-c-self    { --c-bg: #f1e2d2; --c-fg: #9a5424; --c-line: #dcb898; }
.erp-c-personal{ --c-bg: #efdfe2; --c-fg: #8a3a50; --c-line: #d7b0ba; }
.erp-c-none    { --c-bg: #e6dfd3; --c-fg: #7a7166; --c-line: #cfc4b2; }

.erp-s-draft   { --c-bg: #e6dfd3; --c-fg: #5f574d; --c-line: #cfc4b2; --c-row: #f1ebe2; }
.erp-s-normal  { --c-bg: #e0ebdf; --c-fg: #2f5f42; --c-line: #aecaaf; --c-row: #f0f1e8; }
.erp-s-hold    { --c-bg: #f3e6cc; --c-fg: #8a5d17; --c-line: #e0c48e; --c-row: #f6ecdb; }
.erp-s-closed  { --c-bg: #f3dfd9; --c-fg: #8e342e; --c-line: #deaea4; --c-row: #f5e6df; }
.erp-s-moved   { --c-bg: #dfe9ea; --c-fg: #2c5a68; --c-line: #abc6cc; --c-row: #eceee8; }

.tag.is-coded { background: var(--c-fg); color: #fff; }

/* 상태는 뱃지만이 아니라 **행 전체**를 칠한다(2026-09-22 사용자 요구) - 목록을 훑을 때
   어느 줄이 폐업이고 어느 줄이 보류인지 상태 칸까지 눈을 옮기지 않고 알 수 있어야 한다.
   배경은 뱃지보다 훨씬 옅은 톤(`--c-row`)이다 - 뱃지 색을 그대로 깔면 글자가 묻힌다.
   `tr`이 아니라 `td`에 칠하는 이유: 셀 배경이 행 배경을 덮기 때문에 한쪽만 칠하면
   마우스를 올렸을 때 색이 안 바뀐다. */
.table tbody tr.erp-row > td { background: var(--c-row); }
.table tbody tr.erp-row:hover > td { background: var(--c-bg); }

/* 알약은 **끄고 켜기 전부** 제 색을 띤다 - 켠 것만 색이 나오면 무엇이 무슨 색인지
   눌러 보기 전에는 알 수 없다. 켜면 배경까지 칠해져 지금 고른 것이 드러난다. */
.filter-check.is-coded { border-color: var(--c-line); color: var(--c-fg); }
.filter-check.is-coded:hover { border-color: var(--c-fg); }
.filter-check.is-coded:has(input:checked) {
  border-color: var(--c-fg);
  background: var(--c-bg);
  color: var(--c-fg);
}

/* ── 모달 ──────────────────────────────────────────────────────────────────
   짧은 입력(입출금등록·그룹 추가)만 모달로 연다. 긴 화면은 예전처럼 페이지다 -
   탭 5개짜리 업체 상세 같은 것을 모달에 넣으면 스크롤이 두 겹이 된다(2026-09-23).

   `<dialog>`를 쓴다. 브라우저가 겹침 순서·ESC 닫기·바깥 영역을 알아서 처리해서,
   직접 만들면 늘 빠뜨리는 것들(뒤 화면이 같이 스크롤되는 것 등)이 생기지 않는다. */
.modal-sheet {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--erp-radius-lg);
  background: var(--erp-surface);
  color: var(--erp-text);
  box-shadow: var(--erp-shadow-4);
}

.modal-sheet.is-wide { width: min(640px, calc(100vw - 32px)); }
/* 목록이 들어가는 모달 - 칸이 줄바꿈되지 않을 만큼 넓게(2026-09-23 지적).
   640px에서는 `로뎀 공유목공방`·`20,000,000`이 두 줄로 접혀 읽기 어려웠다. */
.modal-sheet.is-list { width: min(1040px, calc(100vw - 32px)); }
/* 입출금등록은 가로가 아니라 **세로**를 키운다(2026-09-23 사용자 요구) - 그룹 폴다운이 위로 펼쳐질 때
   창 머리까지 덮지 않고 창 안에 들어오게 본문에 최소 높이를 준다 */
.modal-sheet.is-wide .modal-body { min-height: min(600px, 72vh); max-height: min(80vh, 760px); }
/* 모달이 열려 있는 동안 **뒤 페이지는 스크롤되지 않는다**(2026-09-23 사용자 요구 - 모달에서 휠을 굴리면 뒤가 내려가서
   닫고 나면 보던 자리가 아니었다). <dialog>는 스크롤을 잠가 주지 않는다. 모달 안(목록·입력칸)의 스크롤은 그대로다.
   **뒤 화면 폭이 바뀌면 안 된다**(2026-09-26 사용자): 예전 `scrollbar-gutter: stable`은 스크롤이 **없던** 화면에도 스크롤 자리를
   만들어 모달을 여는 순간 뒤 화면이 그만큼 좁아졌다. 이제 modal.js가 열기 직전에 실제 스크롤바 폭을 재서 --erp-scroll-gap에 넣는다 -
   스크롤이 없던 화면은 0, 있던 화면은 그 폭만큼만 오른쪽을 비워 둔다. */
html:has(dialog[open]) { overflow: hidden; padding-right: var(--erp-scroll-gap, 0px); }
/* 뒤 막은 **아주 옅은 색**(2026-09-26 사용자 - 35% 갈색 막은 탁했고, 완전 투명은 창이 떠 보이지 않았다 → 16%). <dialog>라 뒤 화면은
   눌리지 않고, 바깥을 누르면 창이 닫힌다(modal.js). 창은 --erp-shadow-4로 떠 보인다.
   예외: 서브계정 고르기 창(.switch-modal)·문의하기 창(.inquiry-sheet)은 아래에서 제 배경을 그대로 깐다 */
.modal-sheet::backdrop { background: rgba(45, 40, 32, .16); }

.modal-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.1rem 1.25rem .4rem;
}

.modal-head .modal-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
/* 부제는 `기간` 뒤에 조건 알약이 붙는다(내역 모달) - 글자와 알약의 밑줄을 맞춘다 */
.modal-head .modal-sub {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-sm);
  color: var(--erp-text-muted);
  font-variant-numeric: tabular-nums;
}

.modal-close {
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--erp-text-faint);
  padding: .2rem .3rem;
}

.modal-close:hover { color: var(--erp-text); }
.modal-body { padding: .75rem 1.25rem 1rem; max-height: min(70vh, 640px); overflow-y: auto; }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  padding: .5rem 1.25rem 1.25rem;
}
/* 왼쪽 [삭제] · 오른쪽 [취소][저장] (입출금 수정 창) */
.modal-foot > .is-right { display: flex; gap: .4rem; margin-left: auto; }
/* [삭제]는 수정일 때만 - `.button`의 display가 hidden을 이기지 않게 */
.modal-foot [data-tx-delete][hidden] { display: none; }

/* 확인창·알림창(public/js/ui-dialog.js - confirm()/alert() 대신, 2026-09-25). 문구의 줄바꿈을 살린다 */
.modal-sheet.ui-dialog { width: min(420px, calc(100vw - 32px)); }
.ui-dialog .modal-body { white-space: pre-line; word-break: keep-all; line-height: 1.6; text-align: center; }
/* 2026-09-26 가운데 정렬(기준 이미지 MODAL CONFIRMATION). 위험한 확인([삭제]가 빨강)이면 경고 그림을 단다 */
.ui-dialog .modal-head,
.ui-dialog .modal-foot { justify-content: center; }
.ui-dialog .modal-foot .button { min-width: 6.5rem; }
.ui-dialog:has([data-ui-ok].is-danger) .ui-dialog-body::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto .75rem;
  border-radius: 50%;
  box-shadow: var(--erp-shadow-1);
  background: var(--erp-danger-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3413a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / 28px no-repeat;
}
/* 골라진 버튼이 보여야 Enter·←/→가 무엇을 누르는지 안다 - 마우스로 연 창에서도 늘 테두리를 그린다 */
.ui-dialog .modal-foot .button:focus { outline: 2px solid var(--erp-primary); outline-offset: 2px; }
.ui-dialog .modal-foot .button.is-danger:focus { outline-color: var(--erp-danger); }

/* 모달 안은 `라벨 | 입력` 두 칸 격자 - 목록 검색줄과 같은 규칙이라 입력칸 왼쪽이 맞는다 */
.modal-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
}

.modal-row > .label {
  justify-self: end;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--erp-text-muted);
}

.modal-row .req { color: var(--erp-danger); }
.modal-row-wide { grid-column: 1 / -1; }

/* 라벨 칸을 비우고 입력 아래에 붙는 설명·에러 */
.modal-help {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--erp-text-faint);
  margin: -.3rem 0 .5rem;
}

/* [?] 도움말 말풍선(public/js/help-tip.js) - 설명은 누를 때만 뜬다(2026-09-23 사용자 요구) */
.help-wrap { display: inline-flex; vertical-align: middle; margin-left: .25rem; }
.help-tip {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-1);
  color: var(--erp-text-faint);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.help-tip:hover,
.help-tip[aria-expanded="true"] { border-color: var(--erp-primary); color: var(--erp-primary); }
.help-bubble {
  position: fixed; /* 자리는 help-tip.js가 [?] 옆으로 잡는다 - 스크롤 칸 끝에서 잘리지 않게 */
  z-index: 1000;
  width: max-content;
  max-width: 20rem;
  padding: .55rem .75rem;
  border-radius: 8px;
  background: var(--erp-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: var(--erp-shadow-1);
}
.help-bubble[hidden] { display: none; }
/* 꼬리 - [?]를 가리킨다 */
.help-bubble::before {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(8px + .575rem - 5px);
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: var(--erp-primary);
}
.help-bubble.is-above::before { top: auto; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--erp-primary); }
.help-bubble b { color: #fff; }

.modal-row .fixed-value {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: var(--erp-field-h);
  font-weight: 600;
}

@media (max-width: 560px) {
  .modal-row { grid-template-columns: minmax(0, 1fr); }
  .modal-row > .label { justify-self: start; }
  .modal-help { grid-column: 1; }
}

/* 감춰 둔 그룹 줄 - `감춘 그룹도 보기`를 켰을 때만 보인다. 흐리게 두어 지금 쓰는 줄과 갈린다.
   (Bulma의 `.is-hidden`과 이름이 겹치지 않게 `-row`를 붙였다 - 그건 display:none이다) */
.table tbody tr.is-hidden-row > td { background: var(--erp-surface-hover); }
.table tbody tr.is-hidden-row a { color: var(--erp-text-muted); }
.table tbody tr.is-hidden-row td { color: var(--erp-text-faint); }

/* 그룹 고르는 칸 - 업체 고르는 칸(.company-picker)과 같은 모양이다.
   다른 점은 목록 맨 아래의 `＋ 새 그룹으로 만들기` 한 줄뿐이다. */
.group-picker { position: relative; }

.group-picker-list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin-top: .2rem;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow);
  overflow: hidden;
}

.group-picker-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--erp-border-soft);
  background: none;
  font-size: var(--fs-base);
  color: var(--erp-text);
  text-align: left;
  cursor: pointer;
}

.group-picker-item:last-child { border-bottom: 0; }
.group-picker-item:hover { background: var(--erp-primary-soft); }
.group-picker-item .ago { margin-left: auto; font-size: var(--fs-sm); color: var(--erp-text-faint); }
.group-picker-item.is-new { color: var(--erp-primary); font-weight: 600; background: var(--erp-primary-soft); }
.group-picker-note { padding: .45rem .7rem; font-size: var(--fs-sm); color: var(--erp-text-faint); }

/* 입출금등록의 `그룹` 폴다운(public/js/group-select.js, 2026-09-23). 셀렉트박스처럼 생긴 버튼을 누르면
   **위쪽으로 떠서** 펼쳐진다 - 아래 칸을 밀어내면 모달이 틀어진다(사용자 지적). 모달 본문(스크롤 칸)에서
   잘리지 않게 화면 기준(position:fixed)으로 JS가 자리를 잡고, 위에 자리가 모자랄 때만 아래로 편다.
   줄마다 [감추기], 감춘 그룹은 흐리게 + [되돌리기]. */
.group-select { min-width: 0; }
.group-select-toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--erp-field-h);
  padding: 0 2.2rem 0 .75rem;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface);
  font-size: var(--fs-base);
  color: var(--erp-text);
  text-align: left;
  cursor: pointer;
}
.group-select-toggle::after {
  content: "";
  position: absolute;
  right: .9rem;
  top: 50%;
  width: .45rem;
  height: .45rem;
  border: solid var(--erp-text-faint);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-70%) rotate(45deg);
}
.group-select-toggle[aria-expanded="true"] { border-color: var(--erp-primary); }
.group-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-select-label.is-empty { color: var(--erp-text-faint); }
.group-select-label.is-new::before { content: "새 그룹 · "; color: var(--erp-primary); font-weight: 600; }

.group-select-panel {
  position: fixed;
  z-index: 1000;
  /* 뒤의 입력 칸들과 섞여 보이지 않게 - 파란 테두리 + 진한 그림자 + 머리줄(2026-09-23 사용자 지적) */
  border: 2px solid var(--erp-primary);
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-4), 0 0 0 4px var(--erp-primary-ring);
}
/* 꼬리 - 어느 칸의 목록인지 가리킨다(위로 열리면 아래 꼬리, 아래로 열리면 위 꼬리) */
.group-select-panel::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  bottom: -8px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: var(--erp-primary);
}
.group-select-panel.is-below::after { bottom: auto; top: -8px; border-top: 0; border-bottom: 7px solid var(--erp-primary); border-top-color: transparent; }
.group-select-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  background: var(--erp-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.group-select-count { font-weight: 400; opacity: .85; }
.group-select-panel[hidden] { display: none; }
.group-select-list { max-height: 15rem; overflow-y: auto; }
.group-select-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-bottom: 1px solid var(--erp-border-soft);
  cursor: pointer;
}
.group-select-item:hover { background: var(--erp-primary-soft); }
.group-select-item.is-current { background: var(--erp-primary-soft); font-weight: 600; }
.group-select-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-select-name.is-empty { color: var(--erp-text-faint); font-weight: 400; }
.group-select-meta { font-size: var(--fs-xs); color: var(--erp-text-faint); white-space: nowrap; }
.group-select-item .btn-row { flex: none; }
.group-select-item.is-hidden-group .group-select-name,
.group-select-item.is-hidden-group .group-select-meta { color: var(--erp-text-faint); }
.group-select-note { padding: .45rem .7rem; font-size: var(--fs-sm); color: var(--erp-text-faint); }
.group-select-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-top: 1px solid var(--erp-border);
  background: var(--erp-surface-sunk);
  border-radius: 0 0 var(--erp-radius-sm) var(--erp-radius-sm);
}
.group-select-hidden { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-sm); color: var(--erp-text-muted); white-space: nowrap; cursor: pointer; }
.group-select-foot .input { flex: 1 1 auto; min-width: 0; height: 30px; }

/* ── 분류 보드(2×2) ────────────────────────────────────────────────────────
   `수입/지출 × 기업/개인` 네 칸. 화면 생김새가 곧 규칙이라, 입출금등록에서 분류가 어떻게
   좁혀지는지(category-scope.js)가 그림으로 읽힌다. 칩을 끌어 칸을 옮기면 구분·장부가 바뀐다. */
.cat-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--erp-gap);
}

.cat-cell {
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow);
}

/* 개인 칸은 업체 분류 `개인`과 같은 분홍 계열로 - 두 화면의 색이 같아야 같은 것으로 읽힌다 */
.cat-cell.is-personal .cat-cell-head { background: var(--c-bg); border-bottom-color: var(--c-line); }

.cat-cell-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--erp-border);
  background: var(--erp-surface-sunk);
  border-radius: var(--erp-radius) var(--erp-radius) 0 0;
}

.cat-cell-head h2 { margin: 0; font-size: var(--fs-base); font-weight: 700; }
.cat-cell-count { font-size: var(--fs-sm); color: var(--erp-text-muted); }

/* 칩이 놓이는 자리. 비어 있어도 높이를 남겨 둔다 - 끌어다 놓을 곳이 보여야 한다 */
.cat-chips { flex: 1 1 auto; padding: .5rem; min-height: 4.5rem; }

.cat-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  /* 끌어서 옮기는 것이 이 화면의 주된 동작이라 **잡을 곳을 넉넉히** 둔다 -
     칸이 작으면 손잡이를 겨냥하느라 불편하다(2026-09-23 지적) */
  min-height: 38px;
  padding: .35rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--erp-radius-sm);
  font-size: var(--fs-base);
  background: var(--erp-surface);
  cursor: grab;
  user-select: none;
}

.cat-chip + .cat-chip { margin-top: .25rem; }
.cat-chip:hover { background: var(--erp-surface-hover); border-color: var(--erp-border); }
.cat-chip:active { cursor: grabbing; }

/* 칩 안의 손잡이는 표의 것보다 크게 - 여기서는 끄는 게 본 동작이다 */
.cat-chip .drag-handle {
  font-size: var(--fs-lg);
  letter-spacing: -3px;
  padding: 0 .15rem;
  line-height: 1;
}

.cat-chip:hover .drag-handle { color: var(--erp-text); }

/* 들어낸 자리 - 없으면 남은 칩이 곧바로 위로 붙어 화면이 출렁인다 */
.cat-slot {
  border: 1px dashed var(--erp-primary);
  border-radius: var(--erp-radius-sm);
  background: var(--erp-primary-soft);
  margin-top: .25rem;
}

.cat-chips > .cat-slot:first-child { margin-top: 0; }
.cat-chip-name { flex: 1 1 auto; min-width: 0; }
.cat-chip-count { font-size: var(--fs-sm); color: var(--erp-text-faint); font-variant-numeric: tabular-nums; }

/* 사용 안 함 - 지운 게 아니라 새로 고를 때만 빠진다. 칸 맨 아래로 내려가 있다 */
.cat-chip.is-off { opacity: .55; }
.cat-chip.is-off .cat-chip-name { text-decoration: line-through; }

.cat-chip-edit {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--erp-text-faint);
  font-size: var(--fs-sm);
  padding: .1rem .25rem;
  border-radius: var(--erp-radius-sm);
}

.cat-chip:hover .cat-chip-edit { color: var(--erp-primary); background: var(--erp-primary-soft); }

/* 끌고 있는 칩은 마우스를 그대로 따라다닌다(HTML5 고스트를 쓰지 않는 이유는 JS 주석 참고) */
.cat-chip.is-dragging {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  box-shadow: var(--erp-shadow-4);
  background: var(--erp-surface);
  border-color: var(--erp-primary);
}

/* 끄는 동안에는 화면 어디서도 글자가 긁히지 않게 */
body.is-chip-dragging, body.is-chip-dragging * { cursor: grabbing !important; user-select: none; }

.cat-empty {
  margin: 0;
  padding: .9rem .5rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--erp-text-faint);
  border: 1px dashed var(--erp-border-strong);
  border-radius: var(--erp-radius-sm);
}

.cat-add {
  margin: 0 .5rem .5rem;
  padding: .35rem;
  border: 1px dashed var(--erp-border-strong);
  border-radius: var(--erp-radius-sm);
  background: none;
  color: var(--erp-text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.cat-add:hover { border-color: var(--erp-primary); color: var(--erp-primary); background: var(--erp-primary-soft); }

/* 화면이 좁으면 네 칸을 한 줄씩 - 억지로 2열을 지키면 칩 이름이 잘린다 */
@media (max-width: 900px) {
  .cat-board { grid-template-columns: minmax(0, 1fr); }
}

/* ── 년별·월별 매출통계 ────────────────────────────────────────────────────
   레거시 `입금및 지불현황`을 대신하는 두 화면. 숫자가 빽빽한 표라 **값이 있는 칸만**
   눈에 들어오게 한다 - 레거시는 `0,00`이 화면을 덮어 정작 값이 안 보였다(2026-09-23). */

/* 연·월 넘기기 - 드롭다운보다 화살표가 낫다. 한 해씩 넘길 때 한 번만 누르면 된다 */
/* 사이드바 하위 메뉴 - 윗 메뉴에 딸린 화면임이 들여쓰기로 보인다 */
.erp-nav-item.is-sub { padding-left: 2.6rem; font-size: var(--fs-sm); }
.erp-nav-item.is-sub .erp-nav-icon { opacity: .7; }

.year-nav { display: inline-flex; align-items: center; gap: .3rem; }
.year-nav strong { min-width: 4.5rem; text-align: center; font-size: var(--fs-lg); }
.year-nav .button { min-width: 2.2rem; padding: 0 .5rem; }
.year-nav.is-lead strong { font-size: var(--fs-xl); min-width: 6rem; }

/* 숫자 칸 - 누르면 그 칸의 내역이 뜬다. 버튼처럼 보이지 않게 두되 올리면 드러난다 */
.money-cell {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed transparent;
}

.money-cell:hover { color: var(--erp-primary); border-bottom-color: var(--erp-primary); }

/* 년별 표 - 줄 이름 두 칸(줄 · 상태)이 왼쪽에 붙고 나머지는 숫자다 */
.money-grid td, .money-grid th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.money-grid .money-line { background: var(--erp-surface-sunk); font-weight: 700; }
.money-grid .money-status { background: var(--erp-surface-hover); color: var(--erp-text-muted); font-weight: 500; }
.money-grid .money-formula { display: block; font-size: var(--fs-xs); color: var(--erp-text-faint); font-weight: 400; }
/* 분기·누계 칸은 월과 성격이 달라 배경으로 가른다 - 레거시의 노란 칸이 하던 일이다 */
.money-grid .is-quarter { background: #f6ecdb; }
.money-grid .is-total { background: var(--erp-primary-soft); font-weight: 600; }

.money-grid tfoot th, .money-grid tfoot td { border-top: 2px solid var(--erp-border); }

/* 그래프 - 차트 라이브러리를 쓰지 않는다. 막대는 CSS 높이, 꺾은선은 인라인 SVG다. */
.chart-card { margin-top: var(--erp-gap); }
.chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .6rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: var(--fs-sm); color: var(--erp-text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.chart-legend i { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.chart-legend .is-income { background: var(--erp-primary); }
.chart-legend .is-excluded { background: #8a7aa8; }
.chart-legend .is-expense { background: var(--erp-danger); }
.chart-legend .is-net { background: var(--erp-text); height: 2px; border-radius: 0; }

.chart-plot { position: relative; display: flex; align-items: flex-end; gap: .4rem; height: 190px; }
.chart-col { flex: 1 1 0; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.chart-bars { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.chart-bar { flex: 1 1 0; max-width: .8rem; border-radius: 2px 2px 0 0; }
.chart-bar.is-income { background: var(--erp-primary); }
.chart-bar.is-excluded { background: #8a7aa8; }
.chart-bar.is-expense { background: var(--erp-danger); }
.chart-label { text-align: center; font-size: var(--fs-xs); color: var(--erp-text-muted); padding-top: .25rem; }

.chart-line { position: absolute; inset: 0 0 1.1rem 0; width: 100%; pointer-events: none; }
.chart-line polyline { fill: none; stroke: var(--erp-text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-line .chart-zero { stroke: var(--erp-border-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

/* 월별(달력) - 7열 고정. 좁으면 가로로 민다(열을 줄이면 달력이 아니게 된다) */
/* 연·월 넘기기와 달 합계 카드가 **한 줄**에 선다 - 예전에는 합계가 오른쪽 구석의 작은 표라
   가운데가 통째로 비어 보였다(2026-09-23 지적) */
.cal-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--erp-gap) 1.5rem;
  margin-bottom: var(--erp-gap);
  padding: .8rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow);
}
/* 달 합계 - 카드 한 줄로 연·월 넘기기 옆에 붙는다. 구석의 작은 표보다 읽기 쉽다.
   `.cal-top`이 이미 카드라서 안쪽 테두리·배경은 지운다(카드 안의 카드가 되면 지저분하다). */
.cal-cards {
  flex: 1 1 24rem;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.cal-cards .ds-value { font-variant-numeric: tabular-nums; }
.cal-cards .is-income .ds-value { color: var(--erp-primary); }
.cal-cards .is-excluded .ds-value { color: var(--erp-warning); }
.cal-cards .is-expense .ds-value { color: var(--erp-danger); }
.cal-cards .is-net { border-left: 2px solid var(--erp-border); padding-left: .9rem; }
/* 카드의 숫자도 누르면 그 달 내역이 뜬다 - 큰 글씨라 점선 밑줄을 조금 띄운다 */
.cal-cards .ds-value .money-cell { font: inherit; color: inherit; padding-bottom: 2px; }
.cal-cards .ds-sub .money-cell { font-size: inherit; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(8.5rem, 1fr)); gap: 1px; background: var(--erp-border); }
.cal-dow { background: var(--erp-surface-sunk); padding: .4rem; text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.cal-dow.is-sun { color: var(--erp-danger); }
.cal-dow.is-sat { color: var(--erp-primary); }

.cal-day { background: var(--erp-surface); padding: .35rem; min-height: 7rem; }
/* 앞뒤 달 날짜 - 눌러서 고칠 수는 있지만 이 달 합계에는 안 들어간다 */
.cal-day.is-outside { background: var(--erp-surface-hover); }
.cal-day.is-outside .cal-date { color: var(--erp-text-faint); }
.cal-day.is-today { background: var(--erp-warning-soft); }
.cal-date { font-size: var(--fs-sm); font-weight: 700; margin-bottom: .2rem; }
.cal-date.is-sun { color: var(--erp-danger); }
.cal-date.is-sat { color: var(--erp-primary); }

.cal-cell { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cal-cell th { text-align: left; color: var(--erp-text-faint); font-weight: 500; padding: 0 .2rem 0 0; white-space: nowrap; }
.cal-cell td { text-align: right; padding: 0 .1rem; }
.cal-cell .is-income { color: var(--erp-primary); }
.cal-cell .is-expense, .cal-cell .is-excluded { color: var(--erp-danger); }
.cal-cell tr.is-total th { color: var(--erp-text); font-weight: 700; }
.cal-cell tr.is-total td { border-top: 1px solid var(--erp-border-soft); font-weight: 700; }

@media (max-width: 1100px) {
  .cal-grid { min-width: 62rem; }
  .list-card:has(.cal-grid) { overflow-x: auto; }
}

/* 내역 모달 - 맨 위 총액, 표, 맨 아래 쪽 이동 */
/* 총액 줄 - 표 머리글과 같은 회색 배경이라 둘이 한 덩어리로 뭉개져 보였다(2026-09-23 손질).
   테두리를 주고 건수와 금액 사이를 벌려 `무엇을 몇 건 보고 있는지`가 먼저 읽히게 한다. */
.slice-sum {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  padding: .6rem .85rem;
  margin-bottom: .7rem;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-sm);
  background: var(--erp-surface);
  font-size: var(--fs-sm);
  color: var(--erp-text-muted);
}

.slice-sum strong { font-size: var(--fs-lg); color: var(--erp-text); font-variant-numeric: tabular-nums; }
/* 건수는 금액과 성격이 달라 한 칸 떼어 놓는다 */
.slice-sum .slice-count {
  font-weight: 700;
  color: var(--erp-text);
  padding-right: 1.1rem;
  border-right: 1px solid var(--erp-border);
}
.slice-sum .is-net { margin-left: auto; }

/* 칸이 줄바꿈되지 않게 - 내용만 줄을 바꾸고, 나머지는 제 폭을 지킨다.
   **너비를 못박는다**(2026-09-23 손질) - 안 박아 두면 브라우저가 남는 폭을 고루 나눠서
   `날짜`가 쓸데없이 넓어지고 정작 `내용`이 좁아진다. 남는 폭은 전부 `내용`이 갖는다. */
.slice-table td, .slice-table th { white-space: nowrap; }
.slice-table .is-date { width: 6.5rem; font-variant-numeric: tabular-nums; color: var(--erp-text-muted); }
.slice-table .is-title { white-space: normal; width: auto; }
.slice-table .is-cat { width: 7rem; }
.slice-table .is-company { width: 9rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.slice-table .is-amount { width: 8rem; font-variant-numeric: tabular-nums; }
/* 버튼 하나뿐인 칸이라 목록의 8.5rem은 너무 넓다 - 금액과 버튼 사이가 휑하게 비었다 */
.slice-table .col-manage { width: 4.5rem; }

/* 목록만 스크롤한다 - 총액은 위에, 쪽 이동은 아래에 붙어 있어야 바로 넘길 수 있다.
   모달 몸통은 스크롤을 넘겨주고(overflow:hidden), 가운데 표만 흐른다. */
#money-slice-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 키를 고정한다 - 쪽마다 줄 수가 다르면 아래 쪽 이동 버튼이 위아래로 튀어서 잘못 누른다.
     아래 `닫기` 바를 뺀 만큼(2026-09-23) 키를 키웠다 - 그 자리에 내역이 두 줄 더 들어간다. */
  min-height: min(72vh, 620px);
  max-height: min(80vh, 740px);
}

.slice-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* 머리글은 스크롤해도 붙어 있다 - 열이 여섯이라 이름이 안 보이면 못 읽는다 */
.slice-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--erp-surface);
  box-shadow: inset 0 -1px 0 var(--erp-border);
}

/* 쪽 이동 - 목록 카드의 아래줄(.list-foot)과 같은 배치: `쪽 표시`가 왼쪽, 버튼이 가운데.
   전에는 버튼 묶음이 가운데 있고 `1 / 3 쪽`이 그 뒤에 붙어서 줄 전체가 오른쪽으로 쏠렸다. */
.slice-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-top: .7rem;
  border-top: 1px solid var(--erp-border);
}

.slice-pager .list-count { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--erp-text-muted); }
.slice-pager .pagination { margin: 0 auto; }
/* 목록의 쪽 이동은 <a>인데 여기는 <button>이다 - 버튼 기본 모양을 지우고 같은 옷을 입힌다 */
.slice-pager .pagination-first,
.slice-pager .pagination-last,
.slice-pager .pagination-previous,
.slice-pager .pagination-next,
.slice-pager .pagination-link { cursor: pointer; font: inherit; font-size: var(--fs-sm); line-height: 1.4; }
.slice-pager .pagination-link[disabled],
.slice-pager .pagination-first[disabled],
.slice-pager .pagination-last[disabled],
.slice-pager .pagination-previous[disabled],
.slice-pager .pagination-next[disabled] { opacity: .45; pointer-events: none; }
/* 오른쪽에 개수 선택이 없어 가운데 묶음이 왼쪽으로 쏠린다 - `쪽 표시`만큼 빈 칸을 둔다 */
.slice-pager::after { content: ''; flex: 0 0 4.5rem; }

/* 모달 안 수정 폼 - 아래 버튼 줄은 모달 바닥이 아니라 폼 끝에 붙는다 */

/* 매출 통계의 집계 칸 - **몇 줄씩 끊어** 보여주고 제목 줄 오른쪽 버튼으로 넘긴다
   (2026-09-23 사용자 요구). 월별 추이 197줄을 한꺼번에 펼치면 아래 칸들이 화면 밖으로
   밀리고, 스크롤만 달면 지금 몇 번째를 보는지 알 수 없다. 넘기기는 public/js/stat-panel.js. */
.stat-panel-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.stat-panel-head .title { margin: 0; }

/* 칸마다 무엇을 세는지 한 줄로 적는다 - `업체별 7,040만원`이 번 돈인지 쓴 돈인지
   이름만 봐서는 알 수 없었다(2026-09-23 지적) */
/* 계산서 목록의 사업자등록번호 - 업체 연결이 이 번호로 된다. 자릿수가 눈에 들어와야 한다 */
.is-bizno { white-space: nowrap; font-variant-numeric: tabular-nums; }

.stat-basis {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--erp-text-faint);
  margin-left: .35rem;
}

/* 막대 - 순액이라 음수가 나온다. 길이는 절댓값, 색으로 방향을 보인다 */
.stat-bar { height: .75rem; border-radius: 2px; background: var(--erp-primary); }
.stat-bar.is-minus { background: var(--erp-danger); }

.stat-pager { margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; }
.stat-pager .button { min-width: 1.9rem; height: 26px; padding: 0 .4rem; font-size: var(--fs-sm); }
.stat-pager-meta { font-size: var(--fs-sm); color: var(--erp-text-muted); min-width: 3rem; text-align: center; }

.stat-panel .table { margin-bottom: 0; }
.stat-panel .table tbody tr:last-child td { border-bottom: 0; }

/* 순위 - 금액 순으로 줄 세운 목록이라 몇 등인지가 곧 내용이다 */
.stat-rank {
  width: 2.2rem;
  color: var(--erp-text-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── 알림 상자 ──────────────────────────────────────────────────────────── */
/* 2026-09-26 기본 안내는 청록 바탕(기준 이미지 ALERT BANNER). 주의·오류·완료는 뜻 색 그대로 */
.notification {
  border-radius: var(--erp-radius-md);
  padding: .8rem 1rem;
  font-size: var(--fs-base);
  background: var(--erp-primary);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--erp-shadow-1);
  margin-bottom: var(--erp-gap);
}

.notification.is-light { background: var(--erp-surface); color: var(--erp-text-muted); border-color: transparent; }
.notification.is-danger, .notification.is-danger.is-light { background: var(--erp-danger-soft); color: #8e342e; border-color: #e6c3ba; }
.notification.is-warning { background: var(--erp-warning-soft); color: #8a5d17; border-color: #e6d1a5; }
.notification.is-success { background: var(--erp-success-soft); color: #2f5f42; border-color: #c3d8c3; }
.notification a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ── 페이지네이션 ───────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: .3rem; justify-content: center; margin: var(--erp-gap) 0 0; }
/* 2026-09-26 지금 쪽만 청록 네모, 나머지는 글자만(기준 이미지 PAGINATION) */
.pagination-first, .pagination-last, .pagination-previous, .pagination-next, .pagination-link {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--erp-radius-sm);
  padding: .35rem .7rem;
  font-size: var(--fs-sm);
  color: var(--erp-text-muted);
  text-decoration: none;
}
.pagination-first:hover, .pagination-last:hover, .pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { border-color: var(--erp-primary); color: var(--erp-primary); }
.pagination-link.is-static { background: transparent; border-color: transparent; }
.pagination-first[disabled], .pagination-last[disabled], .pagination-previous[disabled], .pagination-next[disabled] { opacity: .45; pointer-events: none; }
.pagination-list { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }

/* 좁은 화면의 쪽 번호 줄 - `« ‹ [11 / 16] › » [20개씩]` 한 줄(2026-09-27 사용자 요구).
   번호 목록과 `11 / 16 쪽` 글자는 감추고 쪽 고르기 드롭다운(_list_foot.php)을 보인다. 더 좁으면 « »도 뺀다 */
.pagination-jump { display: none; }
@media (max-width: 700px) {
  .list-foot { flex-wrap: nowrap; gap: .4rem; padding: .6rem .75rem; }
  .list-foot .list-count,
  .list-foot .pagination-list { display: none; }
  .list-foot .pagination { margin: 0; gap: .1rem; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; }
  .list-foot .pagination-jump { display: inline-flex; }
  .list-foot .pagination-jump select { min-width: 5.6rem; }
  .list-foot .pagination-first, .list-foot .pagination-last,
  .list-foot .pagination-previous, .list-foot .pagination-next { padding: .35rem .45rem; flex: 0 0 auto; }
  .list-foot .list-per-page select { min-width: 0; }
}
@media (max-width: 340px) {
  .list-foot .pagination-first, .list-foot .pagination-last { display: none; }
}

/* ── 그 밖 ──────────────────────────────────────────────────────────────── */
.level { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: var(--erp-gap); }
.level-left, .level-right { display: flex; align-items: center; gap: .5rem; }
.level-right { margin-left: auto; }
.level-item { flex: 1 1 0; }

/* 열 묶음 - 가로 여백은 음수 마진으로 상쇄하고, **세로 간격은 칸의 아래 padding 하나로만**
   만든다. 둘 다 주면 간격이 두 배가 되어 "어떤 카드는 붙고 어떤 건 떨어져" 보인다.
   마지막 줄의 아래 padding이 다음 블록과의 간격도 겸한다. */
.columns { display: flex; flex-wrap: wrap; margin: 0 -.5rem; }
.column { padding: 0 .5rem var(--erp-gap); flex: 1 1 0; min-width: 0; }
.columns.is-multiline { flex-wrap: wrap; }

/* 칸 안의 카드는 자기 아래 여백을 갖지 않는다 - 칸 padding과 겹쳐 두 배가 된다 */
.column > .box,
.column > .stat-card { margin-bottom: 0; }

/* 카드 안 마지막 열 묶음은 아래 여백을 지운다 - 카드 padding이 이미 있다 */
.box > .columns:last-child > .column { padding-bottom: 0; }

.has-text-grey { color: var(--erp-text-muted) !important; }
.has-text-grey-light { color: var(--erp-border-strong) !important; }
.has-text-danger { color: var(--erp-danger) !important; }

/* global.css(Bulma 발췌본)에 빠져 있던 유틸리티 - 화면들이 실제로 쓰는 것만 채운다.
   없으면 간격이나 글자 굵기가 조용히 무시되어 배치가 어긋난다.
   크기 유틸리티는 global.css 값(제각각)을 덮어써서 위 척도에 맞춘다. */
.is-size-4 { font-size: var(--fs-xl); }
.is-size-5 { font-size: var(--fs-lg); }
.is-size-6 { font-size: var(--fs-base); }
.is-size-7 { font-size: var(--fs-sm); }
.has-text-weight-semibold { font-weight: 600; }
.has-text-weight-normal { font-weight: 400; }
.has-text-left { text-align: left; }
.is-fullwidth { width: 100%; }
.select.is-fullwidth, .select.is-fullwidth select { width: 100%; }
.ml-1 { margin-left: .25rem; }
.ml-2 { margin-left: .5rem; }
.ml-3 { margin-left: .75rem; }
.mr-3 { margin-left: 0; margin-right: .75rem; }
.mt-1 { margin-top: .25rem; }
.p-3 { padding: .75rem; }

/* ── 선과 높이 기준 ─────────────────────────────────────────────────────────
   버튼·입력·드롭다운·필터 칩이 제각각 1~2px씩 달라 줄이 안 맞아 보였다.
   높이는 --erp-field-h 하나, 테두리는 --erp-border 하나로 통일한다. */

/* 인라인 SVG는 기본이 inline이라 글자 baseline에 걸려 아래로 내려앉는다.
   아이콘이 텍스트와 세로 중앙이 안 맞던 진짜 원인이다. */
.erp-nav-icon svg,
.erp-brand-mark svg,
.erp-icon-button svg,
.page-head-icon svg,
.stat-card-icon svg,
.button svg,
.tag svg { display: block; }

/* 조작 요소 높이는 세 단계뿐이다 - 기본 / 작게 / 표 안.
   예전에는 요소마다 padding으로 높이가 정해져 1~3px씩 어긋나 있었다. */
.input,
.select select,
.button,
.filter-check {
  height: var(--erp-field-h);
  border-width: 1px;
  border-style: solid;
}

.textarea { height: auto; }

/* `is-small`은 글자만 한 단계 작아지고 **높이는 같다**. 높이까지 줄이면 같은 줄에
   섞였을 때 1~2px씩 어긋나 보인다(2026-09-22 지적). 표 안의 칸만 예외로 28px다. */

/* 드롭다운 화살표(global.css의 .select::after)가 글자를 덮지 않게 자리를 비워 둔다 */
.select select { padding-right: 2rem; }
.select::after { top: 50%; }

/* 버튼 안의 글자·아이콘을 가운데로. 예전에는 블록이라 줄 높이에 따라 흔들렸다. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}

/* 표 안에서 태그·버튼이 글자 baseline에 걸리지 않게 */
.tag,
.table .button { vertical-align: middle; }

/* 표 줄 - 머리와 본문, 카드 테두리가 서로 다른 회색이었다.
   머리 아래만 진하게 긋고 행 사이는 연한 한 가지로 통일한다. */
.table th { border-bottom: 1px solid var(--erp-border); }
.table thead th { border-bottom: 0; }
.table td { border-bottom: 1px solid var(--erp-border-soft); }
.table tfoot th { border-top: 1px solid var(--erp-border); border-bottom: 0; }

/* 카드로 감싼 표는 바깥 테두리가 이미 있으므로 마지막 줄 선을 지운다 */
.list-table .table tfoot tr:last-child th { border-bottom: 0; }

/* 표 안의 작은 입력이 행 높이를 밀어 올리지 않게.
   높이만 줄이고 글자는 --fs-base 그대로 둔다 - 같은 줄에서 그냥 글자칸은 14px인데
   입력칸만 13px이면 한 행 안에서 크기가 갈린다. */
.table .input,
.table .select select,
.table .textarea,
.table .button { height: 28px; font-size: var(--fs-base); }
.table .textarea { height: auto; }

details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* 정의형 표(상세 화면) - 가이드의 "기본 정보 / 연락처 정보" 블록 */
.detail-table th {
  background: var(--erp-surface-sunk);
  color: var(--erp-text-muted);
  font-weight: 600;
  width: 8.5rem;
}

.detail-table td { color: var(--erp-text); }

/* ── 좁은 화면 ──────────────────────────────────────────────────────────── */
.erp-nav-toggle { display: none; }

@media (max-width: 1023px) {
  .erp-sidebar {
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(60, 50, 38, .35);
  }

  body.nav-open .erp-sidebar { transform: translateX(0); }
  .erp-main { margin-left: 0; }
  .erp-nav-toggle { display: inline-flex; }
  .erp-topbar-search { max-width: none; }
  .erp-user-name, .erp-user-role { display: none; }
  .column,
  .column[class*="is-"] { flex: 1 1 100%; width: 100%; }
  .erp-content { padding: .9rem; }
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(60, 50, 38, .35);
  z-index: 35;
}

.nav-backdrop.is-active { display: block; }

/* ── ERP 고객용 문서(견적서·계산서) ────────────────────────────────────────
   고객이 링크로 열거나 인쇄하는 화면. 화면에서는 A4 폭 정도로 가운데 정렬하고,
   인쇄할 때는 버튼·배경을 걷어내 종이에 그대로 나가게 한다. */
.doc-sheet {
  max-width: 900px;
  margin: 0 auto;
}

.doc-sheet .doc-title {
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 1.2rem 0;
  border-top: 2px solid var(--erp-text);
  border-bottom: 2px solid var(--erp-text);
  margin-bottom: 1.5rem;
}

/* 취소선 정가 - 깎아준 사실을 보이게 하는 장치라 인쇄물에도 그대로 나가야 한다 */
.doc-sheet .doc-was {
  text-decoration: line-through;
  color: var(--erp-text-faint);
}

.doc-sheet .doc-total { font-size: var(--fs-xl); font-weight: 700; }

/* 상세 화면 위쪽의 숫자 요약 줄 - 합계·잔액처럼 먼저 읽어야 하는 값 몇 개.
   .level을 쓰면 화면마다 칸 폭이 달라져서 전용 그리드로 고정한다. */
.detail-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--erp-surface);
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  margin-bottom: var(--erp-gap);
}
/* 입출금 목록(partials/_transaction_list.php) - 그룹·업체 셀렉트는 가장 긴 이름만큼 넓어지지 않게 막는다
   (안 그러면 [그룹 수정][＋ 그룹 추가]가 다음 줄로 꺾인다) */
.tx-list-search select[name="group"],
.tx-list-search select[name="company"] { max-width: 12rem; }
/* 업체 탭에서는 업체 칸이 그 업체로 고정이다 - 바꿀 수 있는 칸처럼 보이지 않게 회색으로 */
.tx-list-search select:disabled { background: #e6dfd3; color: var(--erp-text); cursor: not-allowed; opacity: 1; }
.tx-list-search .select:has(select:disabled)::after { display: none; }

/* 카드 세 장(검색 · 합계 · 목록) - 검색 카드는 검색줄 자체가 카드 속을 채운다, 합계 카드는 카드 사이 간격만 */
.tx-card-search { padding: 0; overflow: hidden; }
.tx-card-search > .list-search { border-bottom: 0; }
.tx-cards > .detail-stats { margin-bottom: 0; }

/* 기간 옆 [이번달][1개월전][2개월전][전체 기간] - 붙여서 한 덩어리로 */
.period-buttons { display: inline-flex; gap: .25rem; margin-left: .2rem; }
/* 달 · 분기 · 연도 · 전체 기간 묶음 사이는 조금 띄운다 */
.period-buttons + .period-buttons { margin-left: .55rem; }
/* [전체 기간] - 기간을 푸는 버튼이라 색을 달리한다(짙은 갈회색). 청록은 기본 동작 색이라 겹치지 않게 */
/* 맨 오른쪽 끝으로 민다(기간 칸 안에서) - 좁으면 다음 줄로 내려가도 오른쪽에 붙는다 */
.period-buttons:last-child { margin-left: auto; padding-left: .8rem; }
.button.is-period-all { border-color: #5f574d; color: #4a443c; }
.button.is-period-all:hover { background: var(--erp-surface-sunk); color: #4a443c; }
.button.is-period-all.is-on { background: #4a443c; border-color: #4a443c; color: #fff; }
.period-buttons .button.is-small { height: var(--erp-field-h); padding: 0 .5rem; font-size: var(--fs-sm); }

.detail-stats > div {
  padding: .8rem 1rem;
  border-left: 1px solid var(--erp-border-soft);
  text-align: center;
  min-width: 0;
}

.detail-stats > div:first-child { border-left: 0; }
.detail-stats .ds-label { font-size: var(--fs-sm); color: var(--erp-text-muted); }
.detail-stats .ds-value { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; margin-top: .15rem; }
.detail-stats .ds-value.is-lead { font-size: var(--fs-2xl); }
.detail-stats .ds-value s { color: var(--erp-text-faint); font-weight: 600; }
/* 숫자 아래 한 줄 - 그 값이 어떻게 나왔는지(`매출 − 비용`) 같은 보조 설명 */
.detail-stats .ds-sub { font-size: var(--fs-xs); margin-top: .15rem; }
.detail-stats .ds-hint {
  grid-column: 1 / -1;
  border-left: 0;
  border-top: 1px solid var(--erp-border-soft);
  padding: .45rem 1rem;
  font-size: var(--fs-sm);
  color: var(--erp-text-faint);
}

/* 고객에게 보낼 링크 줄 */
.share-link { display: flex; gap: .4rem; align-items: center; }
.share-link .input { flex: 1 1 auto; min-width: 0; }
.share-link .button { flex: 0 0 auto; }
/* 견적서 작성의 불러오기(src/views/quotation/form.php).
   아래 작성 폼과 **모양이 달라야** 무엇을 하는 칸인지 한눈에 갈린다(2026-09-22 사용자 지적) -
   연한 파랑 상자 + 제목줄, 두 목록은 색이 다른 이름표. 드롭다운 두 개는 한 줄에 반씩, 좁으면 아래로. */
.quote-load {
  margin-bottom: var(--erp-gap);
  padding: .9rem 1.1rem 1rem;
  background: var(--erp-primary-soft);
  border: 1px solid #bcd0c8;
  border-radius: var(--erp-radius);
}
.quote-load-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; margin-bottom: .75rem; color: var(--erp-primary); }
.quote-load-head h2 { font-size: var(--fs-lg); font-weight: 700; color: var(--erp-text); }
.quote-load-help { font-size: var(--fs-sm); color: var(--erp-text-muted); }
.quote-load-help strong { color: var(--erp-text); }
.quote-load-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.quote-load-field { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.quote-load-field .select { flex: 1 1 auto; min-width: 0; }
.quote-load-field .select, .quote-load-field .select select { width: 100%; }
.quote-load-field select { background: var(--erp-surface); font-weight: 600; }
/* 아직 안 고른 상태는 흐리게 - 고른 뒤에는 진한 글씨로 무엇이 골라졌는지 드러난다 */
.quote-load-field select:invalid { color: var(--erp-text-faint); font-weight: 400; }
.quote-load-field select option { color: var(--erp-text); font-weight: 400; }
.quote-load-label {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .35rem;
  min-width: 7.5rem; justify-content: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700;
}
.quote-load-label.is-sample { background: #e6e0ec; color: #5d4a7c; }
.quote-load-label.is-progress { background: var(--erp-surface); color: var(--erp-primary); }
.quote-load-count { padding: 0 .4rem; border-radius: 999px; background: rgba(255, 255, 255, .75); font-size: var(--fs-xs); }
.quote-load-status { margin: .7rem 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--erp-success); }
@media (max-width: 900px) { .quote-load-row { grid-template-columns: minmax(0, 1fr); } }
#quote-groups > .js-quote-group:last-child { margin-bottom: 0 !important; }
/* 품목 금액 - 수량 × 단가 자동이라 입력칸처럼 보이지 않게 */
.input.quote-amount,
.input.invoice-auto { background: #e6dfd3; color: var(--erp-text); cursor: default; }
/* 세금계산서 품목 - 금액 칸은 오른쪽 정렬, 아래 합계줄과 합계금액 */
.invoice-items input[name="item_unit_price[]"],
.invoice-items input[name="item_supply_amount[]"],
.invoice-items input[name="item_vat_amount[]"] { text-align: right; }
.invoice-items tfoot th { font-size: var(--fs-base); color: var(--erp-text); }
/* [업체찾기] 버튼 방식(company-finder.js) - 등록번호(또는 업체명) 칸 옆에 버튼, 누르면 아래에 검색 칸 */
.finder-line { display: flex; gap: .4rem; align-items: center; width: 100%; }
.finder-line .input { flex: 1 1 auto; min-width: 0; }
.finder-line .button { flex: 0 0 auto; }
.finder-panel { display: flex; gap: .4rem; align-items: flex-start; margin: 0 0 .55rem; }
/* display:flex가 hidden 속성을 이기지 않게 - 안 누르면 검색 칸이 보이면 안 된다 */
.finder-panel[hidden] { display: none; }
/* 폼 줄 안에서는 입력 칸과 같은 x에서 시작(라벨 7rem + 간격 .6rem) */
.form-panel > .js-company-finder > .finder-panel { margin-left: 7.6rem; }
/* 한 줄(라벨 | 칸) 안에 들어간 경우(견적서 공급자) - 칸 자리를 꽉 채운다 */
.form-row > .js-company-finder { flex: 1 1 auto; min-width: 0; }
.form-row > .js-company-finder > .finder-panel { margin: .4rem 0 0; }
.finder-panel .company-picker { flex: 1 1 auto; }
/* 업체 상세 `계정` 탭 - 사이트 주소는 한 줄로 자르고(…), 비밀번호 `•••••• [보기]`는 줄을 바꾸지 않는다 */
/* 표 칸(td)은 내용에 맞춰 늘어나 max-width가 안 먹는다 - 안쪽 링크에 폭을 준다 */
.cred-url a { display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cred-secret { white-space: nowrap; }
/* [복사] ↔ [복사됨] - 글자가 바뀌어도 폭이 같아야 줄이 흔들리지 않는다(2026-09-23 사용자 지적). 긴 쪽(복사됨)에 맞춘다 */
.btn-row.js-secret-copy { width: 4.6em; justify-content: center; }
.invoice-total { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; margin-top: .8rem; }
.invoice-total strong { font-size: var(--fs-lg); color: var(--erp-primary); }
/* 품목 줄 끝 - 그룹의 첫 줄에는 [＋](항목 추가)만, 나머지 줄에는 [×](빼기)만 보인다 */
.quote-item-act .btn-row { min-width: 1.9rem; justify-content: center; font-size: var(--fs-base); }
#quote-groups tr.js-quote-item:first-child .js-remove-item,
#quote-groups tr.js-quote-item:not(:first-child) .js-add-item { display: none; }
/* 비고가 `서비스`(무료 제공)인 줄 - 합산 안 됨을 금액 칸 색으로도 보인다 */
.js-quote-item.is-service input[name$="[unit_price]"], .js-quote-item.is-service input[name$="[amount]"] { color: var(--erp-text-muted); background: #e6dfd3; }
/* 견적서 합계(품목 아래) - 소계·제안가·최종견적가. 숫자는 오른쪽 정렬 없이 값 칸 한 줄에 */
.quote-total-value { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; }
.quote-total-value .input { width: 12rem; text-align: right; }
.quote-total-value .has-text-grey { font-size: var(--fs-sm); }
.quote-final { font-size: var(--fs-lg); color: var(--erp-primary); }

@media (max-width: 720px) {
  .detail-stats { grid-auto-flow: row; }
  .detail-stats > div { border-left: 0; border-top: 1px solid var(--erp-border-soft); }
  .detail-stats > div:first-child { border-top: 0; }
}

/* ── 세금계산서 양식 (별지 제11호 서식) ────────────────────────────────────
   고객에게 그대로 나가는 문서다. "웹 화면"처럼 보이면 계산서를 받은 줄 모르고 다시
   발행해 달라고 연락이 온다(2026-09-22 사용자 지적). 그래서 국세청 서식 그대로,
   테두리 굵기·칸 배치까지 종이 계산서와 같게 그린다.                            */
.tax-invoice {
  max-width: 940px;
  margin: 1rem auto;
  background: #fff;
  color: #111;
  font-size: var(--fs-sm);
}

.tax-invoice .ti-head {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: .35rem;
}

.tax-invoice .ti-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .35em;
  text-indent: .35em;
}

.tax-invoice .ti-title small {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-indent: 0;
  color: #444;
  margin-top: .2rem;
}

.tax-invoice .ti-no { flex: 0 0 auto; text-align: right; line-height: 1.6; }

/* 서식 전체가 하나의 표다. 칸 경계는 실선, 바깥과 큰 묶음만 굵게. */
.tax-invoice table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tax-invoice th,
.tax-invoice td {
  border: 1px solid #333;
  padding: .3rem .4rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  height: 26px;
  word-break: break-all;
  background: transparent;
  color: #111;
  white-space: normal;
  vertical-align: middle;
}

/* 항목 이름 칸 - 종이 서식의 연회색 칸 */
.tax-invoice th {
  background: #f2f4f7;
  text-align: center;
  color: #111;
}

.tax-invoice .ti-grid { border: 2px solid #333; }

/* 공급자 / 공급받는자를 가르는 가운데 굵은 선 */
.tax-invoice .ti-split { border-left-width: 2px; }

/* 세로로 쓰는 `공급자` / `공급받는자` 띠 */
.tax-invoice .ti-side {
  width: 22px;
  padding: .2rem 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .12em;
  white-space: nowrap;
  text-align: center;
}

.tax-invoice .ti-num { text-align: right; font-variant-numeric: tabular-nums; }
.tax-invoice .ti-center { text-align: center; }

/* 등록번호는 종이 서식처럼 자릿수를 띄워 읽게 한다 */
.tax-invoice .ti-bizno { text-align: center; letter-spacing: .25em; font-size: var(--fs-base); }

/* 합계금액 줄 */
.tax-invoice .ti-sum th { font-weight: 700; }
.tax-invoice .ti-sum .ti-total { font-size: var(--fs-lg); font-weight: 700; text-align: right; }

.tax-invoice .ti-foot-note { text-align: center; white-space: nowrap; }

.tax-invoice .ti-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
}

/* 좁은 화면에서는 서식을 줄이지 않고 가로로 민다 - 칸을 접으면 계산서로 안 보인다 */
.tax-invoice-scroll { overflow-x: auto; }
.tax-invoice-scroll > .tax-invoice { min-width: 860px; }

/* ── 견적서 양식 ────────────────────────────────────────────────────────────
   세금계산서와 같은 이유로 "종이 견적서" 모양을 지킨다 - 수신처, 공급자 도장 자리,
   합계금액 한 줄이 위에 오고 품목이 아래에 온다.                                */
.quote-sheet {
  max-width: 940px;
  margin: 1rem auto;
  background: #fff;
  color: #111;
}

.quote-sheet .qs-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .4em;
  text-indent: .4em;
  padding: .6rem 0 1rem;
}

.quote-sheet .qs-head {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: .9rem;
}

.quote-sheet .qs-to { flex: 1 1 auto; min-width: 0; }
.quote-sheet .qs-to-name { font-size: var(--fs-xl); font-weight: 700; }
.quote-sheet .qs-to-sub { color: #444; margin-top: .25rem; }

/* 공급자 칸 - 종이 견적서의 오른쪽 위 상자 */
.quote-sheet .qs-from {
  flex: 0 0 auto;
  width: 330px;
  border: 1px solid #333;
}

.quote-sheet .qs-from table { width: 100%; border-collapse: collapse; }
.quote-sheet .qs-from th,
.quote-sheet .qs-from td {
  border: 1px solid #333;
  padding: .28rem .45rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  color: #111;
  white-space: normal;
  word-break: break-all;
}

.quote-sheet .qs-from th {
  background: #f2f4f7;
  width: 74px;
  text-align: center;
}

/* 합계금액 한 줄 - 고객이 제일 먼저 보는 곳 */
.quote-sheet .qs-total {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: 2px solid #333;
  padding: .6rem .9rem;
  margin-bottom: 1rem;
}

.quote-sheet .qs-total-label { flex: 0 0 auto; font-weight: 700; }
.quote-sheet .qs-total-value { flex: 1 1 auto; text-align: right; font-size: 22px; font-weight: 700; }
.quote-sheet .qs-total-note { flex: 0 0 auto; color: #444; font-size: var(--fs-sm); }

.quote-sheet .qs-group { margin-bottom: 1rem; }
.quote-sheet .qs-group-title { font-size: var(--fs-base); font-weight: 700; margin-bottom: .3rem; }
.quote-sheet .qs-group-desc { color: #444; font-size: var(--fs-sm); margin-bottom: .35rem; white-space: pre-line; }

.quote-sheet table.qs-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.quote-sheet .qs-table th,
.quote-sheet .qs-table td {
  border: 1px solid #333;
  padding: .32rem .45rem;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: #111;
  white-space: normal;
  word-break: break-all;
  background: transparent;
}

.quote-sheet .qs-table th { background: #f2f4f7; text-align: center; font-weight: 600; }
.quote-sheet .qs-table .qs-num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-sheet .qs-table .qs-center { text-align: center; }
.quote-sheet .qs-table tfoot th { background: #f8fafc; font-weight: 700; }

.quote-sheet .qs-note {
  border: 1px solid #333;
  padding: .6rem .8rem;
  white-space: pre-line;
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.quote-sheet .qs-note-title { font-weight: 700; margin-bottom: .3rem; }

/* 도장 - `(인)` 글자 위에 도장 이미지를 겹쳐 찍는다(App\Utils\Stamp). 종이에 찍은 것처럼 글자가 비치게
   multiply로 섞고, 칸 높이를 밀어 올리지 않게 절대 위치로 띄운다. 인쇄·PDF에도 그대로 나온다. */
.qs-seal { position: relative; display: inline-block; }
.qs-seal img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  max-width: none; /* global.css의 img{max-width:100%} 때문에 (인) 글자 폭(21px)으로 찌그러졌다 */
  object-fit: contain;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media print { .qs-seal img { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* 업체 수정 화면의 도장 칸 - 지금 도장, 문서에 찍히는 모양 미리보기 */
.stamp-current img { max-width: 120px; max-height: 120px; border: 1px dashed var(--erp-border-strong); border-radius: var(--erp-radius-sm); padding: .4rem; background: #fff; } /* 도장은 흰 종이 위에서 본다 */
.stamp-preview { border-collapse: collapse; background: #fff; }
.stamp-preview th, .stamp-preview td { border: 1px solid #999; padding: .55rem .8rem; font-size: var(--fs-base); }
.stamp-preview th { background: #f5f5f5; font-weight: 600; }
.stamp-preview td { min-width: 12rem; }

.quote-sheet .qs-actions { display: flex; justify-content: center; gap: .4rem; margin-top: 1rem; }

.quote-sheet-scroll { overflow-x: auto; }
.quote-sheet-scroll > .quote-sheet { min-width: 820px; }

@media print {
  /* 인쇄에서는 조작용 요소를 전부 걷어낸다 */
  .no-print,
  .erp-sidebar,
  .erp-topbar,
  .nav-backdrop,
  .button {
    display: none !important;
  }

  body { background: #fff; }
  .erp-main { margin-left: 0; }
  .erp-content { padding: 0; }
  .section { padding: 0; }
  .doc-sheet { max-width: none; }

  /* 세금계산서는 종이 한 장에 그대로 - 배경색과 테두리를 인쇄에서도 살린다 */
  .tax-invoice { max-width: none; margin: 0; }
  .tax-invoice-scroll { overflow: visible; }
  .tax-invoice-scroll > .tax-invoice { min-width: 0; }
  .tax-invoice th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tax-invoice th, .tax-invoice td { border-color: #333 !important; }
  .tax-invoice table { break-inside: avoid; }

  .quote-sheet { max-width: none; margin: 0; }
  .quote-sheet-scroll { overflow: visible; }
  .quote-sheet-scroll > .quote-sheet { min-width: 0; }
  .quote-sheet th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .quote-sheet th, .quote-sheet td { border-color: #333 !important; }
  .quote-sheet .qs-group { break-inside: avoid; }

  .box {
    box-shadow: none !important;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  /* 배경색을 지우면 표 구분이 사라지므로 테두리로 대신한다 */
  .table th,
  .table td {
    border-color: #999 !important;
  }
}

/* 통계 카드 내부는 <a> 안이라 span으로 짰다 - 줄바꿈이 되게 block으로 편다 */
.stat-card-body,
.stat-card-label,
.stat-card-value,
.stat-card-hint { display: block; }

/* 현재 쪽 표시 */
.pagination-link.is-current {
  background: var(--erp-primary);
  border-color: var(--erp-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--erp-shadow-1);
}

.pagination-ellipsis { padding: 0 .3rem; color: var(--erp-text-faint); }

/* 목록 체크박스 - 기본 크기가 제각각이라 줄이 안 맞아 보인다 */
.col-check input[type="checkbox"] { width: 17px; height: 17px; vertical-align: middle; margin: 0; }



/* 년별 매출통계의 0 - 칸이 비어 보이지 않게 흐리게 적는다(2026-09-23 사용자 요구 - "0도 노출") */
.money-zero { color: var(--erp-text-faint); }

/* 년별 매출통계 선 그래프(Chart.js) - 캔버스는 이 높이를 채운다 */
.chart-canvas { position: relative; height: 360px; }

/* 토스트(partials/_toast.php, Bootstrap .bs-scope) - 2026-09-26 베이지 카드 + 성공 청록 체크 / 실패 빨간 느낌표
   (기준 이미지 TOAST STACK). 부트스트랩의 text-bg-* 색(초록·빨강 바탕)을 덮는다 */
.bs-scope .toast.text-bg-success,
.bs-scope .toast.text-bg-danger {
  background: var(--erp-surface) !important;
  color: var(--erp-text) !important;
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow);
}
.bs-scope .toast .toast-body { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.bs-scope .toast .toast-body::before { content: "✓"; color: var(--erp-primary); font-weight: 800; }
.bs-scope .toast.text-bg-danger .toast-body::before { content: "!"; color: var(--erp-danger); }
.bs-scope .toast .btn-close-white { filter: none; }