@font-face {
  font-family: "Pretendard";
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
}

:root {
  --bg: #F7F8F9;
  --surface: #FFFFFF;
  --surface-2: #EFF2F3;
  --border: #E2E6E8;
  --text: #142226;
  --text-soft: #5C6C70;
  --text-faint: #8A989B;

  --marine: #0B3D42;
  --marine-2: #124E5C;
  --marine-soft: #E7EEEF;
  --gold: #E8A33D;
  --gold-soft: #FBEBD2;

  --danger: #C24A3F;
  --danger-soft: #F7E4E1;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-float: 0 8px 24px rgba(11, 61, 66, 0.16);
}

:root[data-theme="dark"] {
  --bg: #0F1B1F;
  --surface: #16262B;
  --surface-2: #1C2D32;
  --border: #26383D;
  --text: #EBF0F1;
  --text-soft: #9FB2B6;
  --text-faint: #6D8286;

  --marine: #1C6270;
  --marine-2: #2A7C8C;
  --marine-soft: #1B3238;
  --gold: #E8A33D;
  --gold-soft: #3A2E19;

  --danger: #E0685B;
  --danger-soft: #3A2220;

  --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

/* .app/.auth-shell 등 display:flex를 직접 지정한 요소도 [hidden] 속성이
   확실히 이기도록 강제한다 (author 스타일이 UA 기본 스타일보다 우선이라
   !important 없이는 display:flex가 [hidden]을 덮어써버림). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

button, input {
  font-family: inherit;
  color: inherit;
}

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ---------- 로그인 / 회원가입 ---------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 28% 18%, var(--marine-2) 0%, var(--marine) 62%);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-float);
  padding: 30px 28px 26px;
}

.auth-brand {
  padding: 0 0 24px;
  justify-content: center;
}

.auth-form h1 {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 800;
  color: var(--marine);
  text-align: center;
}

:root[data-theme="dark"] .auth-form h1 { color: var(--gold); }

.auth-form .field { margin-bottom: 14px; }

.auth-remember { margin: 2px 0 20px; }

.auth-submit { width: 100%; }

.auth-error {
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 700;
  margin: -6px 0 14px;
}

.auth-switch {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-soft);
  margin: 18px 0 0;
}

.auth-switch a {
  color: var(--marine-2);
  font-weight: 700;
  text-decoration: none;
}

:root[data-theme="dark"] .auth-switch a { color: var(--gold); }
.auth-switch a:hover { text-decoration: underline; }

/* ---------- 허브 (로그인 후 첫 화면, 4개 대메뉴) ---------- */
.hub-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.hub-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  flex: none;
}

.hub-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hub-username {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
}

.hub-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 32px 60px;
}

.hub-main h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 32px;
  color: var(--marine);
}

:root[data-theme="dark"] .hub-main h1 { color: var(--gold); }

/* 카드가 5개로 늘어나면서 2열 그리드로는 마지막 줄에 카드 하나가 왼쪽에 외로이 남는
   비대칭이 생겼다 - 고정 열 개수 그리드 대신 flex-wrap을 써서, 줄바꿈된 두 번째 줄도
   (3+2 등) justify-content:center로 항상 가운데 정렬되게 한다(그리드는 마지막 줄이
   왼쪽 정렬로 고정돼 이렇게 안 됨). 카드 크기는 예전 2열 그리드 시절과 같은 큰 크기를
   그대로 유지하고(작게 줄였다가 다시 키움 - 화면이 휑해 보인다는 피드백), 그만큼 한
   줄에는 3개까지만 들어가고 나머지가 다음 줄로 넘어간다(3+2) - 대신 컨테이너 폭을
   넉넉하게 잡아 3개짜리 줄이 화면을 꽉 채우도록 한다. */
.hub-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 980px;
}

.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 1 300px;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 20px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.hub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
  border-color: var(--marine-2);
}

.hub-card-icon {
  font-size: 32px;
}

.hub-card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  word-break: keep-all;
}

.hub-card-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: center;
  word-break: keep-all;
}

/* 2026-09-10: 허브가 7개 메뉴로 늘면서 "왼쪽에 세로로 긴 카드 1개 + 오른쪽 2단×3열"이라는
   위 .hub-grid(flex-wrap 균등배치)로는 표현할 수 없는 레이아웃이 필요해졌다 - 완전히 별도
   클래스(.hub-grid-main)로 새로 만들어서 .hub-grid(원가표수정 서브허브가 계속 쓰는 클래스)는
   전혀 안 건드린다(예전 "카드 클래스 공유" 버그 재발 방지 - PROGRESS.md 9/10 항목 참고).
   grid-template-areas로 각 카드의 자리를 이름으로 직접 지정해서, "경비처리"가 이름표
   "expense"를 양쪽 행에 걸쳐 씀으로써 자연스럽게 2행을 세로로 합친 카드가 된다(grid-row
   span을 따로 계산할 필요 없이 areas만 보면 배치가 바로 눈에 들어옴). */
.hub-grid-main {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 260px));
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "expense orders   settle    proposal"
    "expense invoice  costtable docs";
  gap: 20px;
  width: 100%;
  max-width: 1120px;
}

.hub-card[data-menu="expense"] { grid-area: expense; }
.hub-card[data-menu="orders"] { grid-area: orders; }
.hub-card[data-menu="settlement"] { grid-area: settle; }
.hub-card[data-menu="proposal"] { grid-area: proposal; }
.hub-card[data-menu="invoice"] { grid-area: invoice; }
.hub-card[data-menu="costtable"] { grid-area: costtable; }
.hub-card[data-menu="companydocs"] { grid-area: docs; }

/* 세로로 긴 "경비처리" 카드 - grid-area가 2행을 다 차지해서 flex(원래 .hub-card가
   flex-column)가 알아서 세로로 늘어나며, 그만큼 남는 세로 공간이 넉넉해서 아이콘/글자를
   살짝 키워 허전해 보이지 않게 한다. */
.hub-card-tall {
  padding: 40px 22px;
}
.hub-card-tall .hub-card-icon { font-size: 44px; }
.hub-card-tall .hub-card-title { font-size: 17px; }

/* ---------- "준비중" 공용 화면 ---------- */
.placeholder-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.placeholder-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-faint);
}

.placeholder-icon {
  font-size: 40px;
}

/* ---------- 뒤로가기 버튼 ---------- */
.back-btn {
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.back-btn:hover { color: var(--marine-2); background: var(--surface-2); }
:root[data-theme="dark"] .back-btn:hover { color: var(--gold); }

.back-btn-sidebar {
  align-self: flex-start;
  color: #EAF3F2;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.back-btn-sidebar:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold);
}

/* ---------- 사이드바 ---------- */
.sidebar {
  width: 216px;
  flex: none;
  background: var(--marine);
  color: #EAF3F2;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 22px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--marine);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand-text strong {
  font-weight: 800;
  font-size: 14.5px;
}

.brand-text span {
  font-size: 11.5px;
  color: #A9CBC7;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  text-align: left;
  color: #C6DEDB;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
}

.nav-item.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  flex: none;
}

.nav-item.is-active .nav-dot {
  background: var(--gold);
}

.sidebar-foot {
  margin-top: auto;
  padding: 12px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.foot-label {
  font-size: 10.5px;
  color: #8FB5B1;
}

.foot-value {
  font-size: 12.5px;
  font-weight: 600;
  color: #E7F1EF;
}

/* ---------- 메인 ---------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px 10px;
  flex: none;
}

.topbar h1 {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.2px;
}

.dark-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.dark-toggle:hover {
  color: var(--marine);
  transform: rotate(12deg);
}

/* 설정 화면 바로가기 톱니바퀴(2026-09-22) - 허브/모든 기능 화면 오른쪽 위. .dark-toggle과 같은 원형 버튼
   모양을 쓰되 별도 클래스로 둬서(허브에서만 .dark-toggle과 같이 씀) 다크모드 버튼이 없는 화면에서도 그대로 쓴다. */
.settings-shortcut-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.settings-shortcut-btn:hover {
  color: var(--marine);
  transform: rotate(25deg);
}

/* 행사상품제안(appShell) 상단바 - 제목 오른쪽에 설정 톱니바퀴 + 다크모드 버튼을 나란히 묶어둔다. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 설정 화면 맨 위 "돌아가기" 버튼 줄 */
.settings-back-row {
  margin-bottom: 4px;
}

.section {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 10px 32px 32px;
  overflow-y: auto;
}

.section.is-active {
  display: flex;
}

/* ---------- 대시보드 카드 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-card-accent {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--surface) 65%);
}

.stat-label {
  font-size: 12.5px;
  color: var(--text-soft);
  font-weight: 600;
}

.stat-value {
  font-size: 34px;
  font-weight: 800;
  color: var(--marine);
  letter-spacing: -0.5px;
}

:root[data-theme="dark"] .stat-value { color: #6FD0C6; }

.stat-value-sm {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 패널/공용 ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* 패널 안에서 버튼 2개가 딱 붙어있는 것처럼(정산파일 내보내기 섹션 등) 위아래로 쌓인
   요소끼리 여백 없이 답답해 보이는 문제가 화면마다 따로따로 반복됐다 - .panel의 "바로 아래"
   자식 요소끼리는 기본으로 16px 위 여백을 갖게 공통 규칙을 잡아둔다(버튼 간 최소 여백
   12~16px 권장). 이 규칙은 .panel 바로 다음(스타일시트에서 가장 이른 자리)에 둬서
   우선순위를 가장 낮게 잡았으므로, 더 촘촘하거나 넉넉한 간격이 실제로 필요한 곳은 그 요소
   자신의 CSS가 나중에 나오면서 얼마든지 덮어쓸 수 있다. 자식손자까지는 안 건드린다
   (> 는 한 단계만 적용 - 예: .option-grid 안의 .field들끼리는 이 규칙과 무관, 자기들끼리
   gap으로 이미 정렬돼있음). */
.panel > * + * {
  margin-top: 16px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel h2 {
  font-size: 14.5px;
  font-weight: 800;
  margin: 0 0 10px;
}

.hint-inline {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
}

.hint {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 14px;
}

.empty-hint {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0;
}

/* ---------- 드롭존 ---------- */
.dropzone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.dropzone {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover {
  border-color: var(--marine-2);
}

.dropzone.is-dragging {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.dropzone.is-done {
  border-style: solid;
  border-color: var(--marine-2);
  background: var(--marine-soft);
}

.dropzone-wide {
  margin-bottom: 0;
}

.dz-icon {
  font-size: 20px;
  flex: none;
  width: 30px;
  text-align: center;
}

.dz-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dz-text strong {
  font-size: 13px;
  font-weight: 700;
}

.dz-text span {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-file {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--marine-2);
  max-width: 55%;
}

:root[data-theme="dark"] .dz-file { color: #6FD0C6; }

.dz-file .dz-check {
  color: var(--gold);
  font-weight: 800;
  flex: none;
}

.dz-file .dz-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-file .dz-auto-tag {
  color: var(--text-faint);
  font-weight: 600;
  font-size: 10.5px;
  white-space: nowrap;
}

/* 원가표 자동탐색 실패 - "직접 선택해주세요" 안내 상태 */
.dropzone.is-not-found {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.dz-file .dz-notfound-icon {
  color: var(--danger);
  font-weight: 800;
  flex: none;
}

.dz-file .dz-notfound-text {
  color: var(--danger);
  white-space: normal;
}

/* ---------- 원가표 한 줄 상태 표시 (정산/주문수집/제안서생성 - 평소엔 접힌 한 줄 "칩" 모양,
   클릭하면 펼쳐서 파일을 직접 바꿀 수 있음. 상품원가표수정 화면은 그대로 큰 카드 유지).
   패널 자체는 다른 화면의 .panel과 똑같은 여백을 쓴다(다른 화면들과 톤이 안 맞아 보였음 -
   압축은 내용 쪽에서 이미 충분히 이뤄짐). .cost-compact에 여백을 둬서 바로 아래 이어지는
   버튼(주문수집 2단계의 "매입처 자동분류 실행" 등)과도 항상 넉넉하게 떨어지게 한다. ---------- */
.cost-compact {
  margin-bottom: 20px;
}

.cost-compact-summary {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
}

.cost-compact-summary::before {
  content: "📄";
  flex: none;
  font-size: 13px;
  line-height: 1;
}

.cost-compact-summary:hover {
  border-color: var(--marine-2);
}

.cost-compact-summary .cost-compact-chevron {
  margin-left: auto;
  opacity: 0.5;
  font-size: 10px;
  flex: none;
}

.cost-compact-summary.is-not-found {
  color: var(--danger);
  font-weight: 700;
  border-color: var(--danger);
  background: var(--danger-soft);
}

.cost-compact-summary.is-not-found::before {
  content: "⚠";
}

.cost-compact-body {
  margin-top: 12px;
}

.cost-compact-body .hint {
  margin-bottom: 10px;
}

/* ---------- 폼 ---------- */
.option-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.field input,
.field select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s ease;
}

.field input:focus,
.field select:focus {
  border-color: var(--marine-2);
}

/* ---------- 사이트 선택 (카드 그리드) ---------- */
.site-search {
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  outline: none;
  margin-bottom: 14px;
  display: block;
}

.site-search:focus { border-color: var(--marine-2); }

.site-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
  max-height: 250px;
  overflow-y: auto;
  padding: 4px 4px 4px 2px;
}

/* 예전엔 허브 화면의 대메뉴 카드(.hub-card)를 그대로 재사용했는데(선택 상태 표시만 얹음),
   그러다 보니 허브 카드 크기를 바꿀 때마다 여기(사이트 카드 20개 그리드)까지 같이
   깨졌다(가로 스크롤 생김/글자 잘림 - "상품원가표수정 준비중" 버그와 같은 원인) -
   완전히 독립된 클래스로 분리해서 서로 영향이 없게 한다. */
.site-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 14px;
  width: 100%;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.site-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
  border-color: var(--marine-2);
}

.site-card-icon {
  font-size: 32px;
}

.site-card.is-selected {
  border-color: var(--marine-2);
  background: var(--marine-soft);
  box-shadow: 0 0 0 1.5px var(--marine-2);
}

:root[data-theme="dark"] .site-card.is-selected {
  background: var(--marine-soft);
}

.site-card.is-selected .site-card-name {
  color: var(--marine-2);
}

:root[data-theme="dark"] .site-card.is-selected .site-card-name {
  color: var(--gold);
}

.site-card-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.site-card-empty {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  padding: 14px 0;
}

.naver-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.switch input {
  display: none;
}

.switch-track {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease;
  flex: none;
}

.switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

.switch input:checked + .switch-track {
  background: var(--marine-2);
  border-color: var(--marine-2);
}

.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(16px);
}

/* ---------- 버튼 ---------- */
/* 텍스트 수직 정렬은 padding+line-height 계산에만 기대지 않고 flex로 강제 중앙 정렬한다 -
   Pretendard 폰트의 line-height:normal 계산값이 DPI 스케일(125% 등)에 따라 미묘하게
   달라지면서 padding만으로는 위아래가 빡빡해 글자가 잘려 보이는 문제(특히 padding 상하만
   있고 좌우가 0에 가까웠던 .btn-cta)가 있어 아예 구조적으로 고쳤다. */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.15s ease;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.btn-primary {
  background: var(--marine);
  color: #FFFFFF;
}

.btn-primary:hover:not(:disabled) { background: var(--marine-2); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
}

.btn-ghost:hover:not(:disabled) {
  border-color: var(--marine-2);
  color: var(--marine-2);
}

.btn-sm {
  padding: 7px 12px;
  font-size: 12px;
}

.btn-cta {
  background: var(--marine);
  color: #FFFFFF;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.4;
  padding: 17px 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}

.btn-cta:hover:not(:disabled) { background: var(--marine-2); }

/* 주문수집 3단계 "발주서 생성" - 아이콘+제목+설명이 있는 더 크고 눈에 띄는 CTA 버튼.
   .btn-cta의 색/그림자는 그대로 물려받고, 레이아웃만 아이콘+텍스트 가로 배치로 바꾼다. */
.oc-generate-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 16px;
  padding: 22px 26px;
}

.oc-generate-btn .oc-generate-icon {
  font-size: 28px;
  flex: none;
}

.oc-generate-btn .oc-generate-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.oc-generate-btn .oc-generate-copy strong {
  font-size: 16.5px;
  font-weight: 800;
}

.oc-generate-btn .oc-generate-copy small {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.85;
}

/* 매입처별 확정 건수 카드 */
.oc-buyer-total {
  display: block;
  margin-bottom: 10px;
}

.oc-buyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.oc-buyer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.oc-buyer-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-buyer-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--marine-2);
  background: var(--marine-soft);
  padding: 2px 9px;
  border-radius: 999px;
  flex: none;
}

/* 발주 상태 기능(2026-09-22): "표시를 깜빡해서 다음날 중복 발주" 경고 배너 -
   정산 이상값 경고(.panel-anomaly-alert)와 같은 톤으로 눈에 띄게 만든다. */
.oc-purchase-warning {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.oc-purchase-warning p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
  white-space: pre-line;
}

/* 발주서 생성 결과 표에서 매입처별로 "발주 완료로 표시" 버튼/상태를 보여주는 자리 */
.oc-mark-purchased-btn { flex: none; }
.oc-purchased-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--marine-2);
  background: var(--marine-soft);
  padding: 2px 9px;
  border-radius: 999px;
}

/* 발주 제외 사유 모달의 라디오 3개 - 세로로 쌓는 .field 대신 가로 한 줄에 나란히(2026-09-22) */
.oc-exclude-reason-group {
  display: flex;
  gap: 16px;
  margin: 4px 0 12px;
}
.oc-exclude-reason-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.oc-exclude-btn { flex: none; }
.oc-excluded-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--danger);
  background: var(--danger-soft);
  padding: 2px 9px;
  border-radius: 999px;
}

:root[data-theme="dark"] .oc-buyer-count { color: var(--gold); background: var(--gold-soft); }

/* ---------- 진행 상황 ---------- */
.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 14px;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--marine) 0%, var(--marine-2) 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.progress-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.progress-fill.is-indeterminate {
  width: 35% !important;
  transition: none;
  animation: progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
}

.chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}

.chip.is-active {
  border-color: var(--marine-2);
  color: var(--marine-2);
  background: var(--marine-soft);
}

.chip.is-active .chip-dot {
  background: var(--marine-2);
  animation: pulse 1s ease-in-out infinite;
}

.chip.is-done {
  border-color: var(--gold);
  color: #8A5A0E;
  background: var(--gold-soft);
}

:root[data-theme="dark"] .chip.is-done { color: var(--gold); }

.chip.is-done .chip-dot { background: var(--gold); }

.chip.is-error {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.chip.is-error .chip-dot { background: var(--danger); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- 회사서류함 ---------- */
.docs-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.docs-tab {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
}

.docs-tab:hover { border-color: var(--marine-2); }

.docs-tab.is-active {
  background: var(--marine);
  border-color: var(--marine);
  color: #FFFFFF;
}

.docs-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.docs-search {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

.docs-search:focus { outline: none; border-color: var(--marine-2); }

.docs-upload-btn {
  flex: none;
  padding: 10px 20px;
  font-size: 13.5px;
}

.docs-category-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.docs-category-chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.docs-category-chip:hover { border-color: var(--marine-2); }

.docs-category-chip.is-active {
  background: var(--marine-soft);
  border-color: var(--marine-2);
  color: var(--marine-2);
}

:root[data-theme="dark"] .docs-category-chip.is-active { color: var(--gold); }

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.doc-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.12s ease;
}

.doc-card:hover {
  border-color: var(--marine-2);
  transform: translateY(-2px);
}

.doc-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.doc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doc-card-thumb .doc-card-icon {
  font-size: 40px;
  opacity: 0.6;
}

.doc-card-body {
  padding: 10px 12px;
}

.doc-card-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-card-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-card-category {
  display: inline-block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--marine-2);
  background: var(--marine-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

:root[data-theme="dark"] .doc-card-category { color: var(--gold); background: var(--gold-soft); }

/* ---------- 모달(업로드/확대보기 공용) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 61, 66, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}

.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: 24px 26px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-box-wide {
  max-width: 720px;
}

/* .panel > * + *(정산 화면 버튼 여백 작업 때 도입한 공통 규칙)와 같은 이유로, 모달 안
   직접 자식끼리도 기본 16px 위 여백을 준다 - 경비처리 등록 폼처럼 드롭존/입력칸/버튼이
   쭉 이어지는 모달에서 다닥다닥 붙어 보이지 않게. 이 규칙도 일부러 낮은 우선순위 자리에
   둬서, 이미 자체 margin이 있는 요소(.option-grid 등)가 있으면 그냥 더해질 뿐 깨지지 않음. */
.modal-box > * + * {
  margin-top: 16px;
}

.docs-upload-grid {
  grid-template-columns: repeat(2, 1fr);
}

.docs-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.docs-view-head h2 {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.docs-view-body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  min-height: 320px;
  max-height: 60vh;
  overflow: auto;
}

.docs-view-body img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.docs-view-body iframe {
  width: 100%;
  height: 60vh;
  border: none;
}

.docs-view-meta {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.7;
}

.docs-view-meta strong {
  color: var(--text);
}

.log-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--text-soft);
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.6;
  margin-top: 14px;
}

/* ---------- 결과 탭 ---------- */
.result-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.result-tab {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.result-tab.is-active {
  background: var(--marine);
  border-color: var(--marine);
  color: #FFFFFF;
}

.result-summary {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.result-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.result-row:last-child { border-bottom: none; }

.result-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-soft);
}

.result-tag.tag-filled { background: var(--marine-soft); color: var(--marine-2); }
.result-tag.tag-option { background: var(--gold-soft); color: #8A5A0E; }
.result-tag.tag-naver { background: var(--danger-soft); color: var(--danger); }
.result-tag.tag-skip { background: var(--surface-2); color: var(--text-faint); }
.result-tag.tag-popularity { background: var(--marine); color: #fff; }
.result-tag.tag-trending { background: var(--gold); color: var(--marine); }

:root[data-theme="dark"] .result-tag.tag-option { color: var(--gold); }

.result-name {
  font-weight: 700;
  flex: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-detail {
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-error {
  color: var(--danger);
  font-size: 13px;
}

.bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.bar-row .bar-label {
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--marine-2);
  border-radius: 999px;
}

.bar-row .bar-count {
  text-align: right;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 토스트 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--marine);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.is-error { background: var(--danger); }
.toast .toast-icon { color: var(--gold); font-weight: 800; }

/* ---------- 상품원가표수정 (견적서 -> 원가표 자동 반영, 5단계 흐름) ---------- */
.cost-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.cost-steps {
  flex: 1;
  overflow-y: auto;
  padding: 10px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cost-step-indicator {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cost-step {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.cost-step.is-active {
  background: var(--marine);
  color: #FFFFFF;
  border-color: var(--marine);
}

.cost-panel {
  display: none;
  flex-direction: column;
  gap: 18px;
}

.cost-panel.is-active { display: flex; }

.cost-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cost-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.cost-header-row-field,
.cost-block-count-field {
  max-width: 360px;
  margin: 12px 0;
}

.cost-grid-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.cost-map-table,
.cost-preview-table,
.cost-raw-grid,
.cost-block-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  white-space: nowrap;
}

.cost-map-table th, .cost-map-table td,
.cost-preview-table th, .cost-preview-table td,
.cost-raw-grid th, .cost-raw-grid td,
.cost-block-table th, .cost-block-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}

.cost-map-table th, .cost-preview-table th, .cost-raw-grid th {
  background: var(--surface-2);
  font-weight: 700;
}

.cost-required { color: var(--danger); font-size: 10.5px; font-weight: 800; }
.cost-ambiguous { color: var(--gold); font-size: 10.5px; font-weight: 700; }
:root:not([data-theme="light"]) .cost-ambiguous { color: #E8A33D; }

.cost-cell {
  width: 100%;
  min-width: 90px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.cost-cell:focus { border-color: var(--marine-2); }
.cost-cell-num { width: 90px; min-width: 90px; }
.cost-cell-readonly { font-weight: 700; color: var(--text-soft); }

.cost-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

.cost-badge-new { background: var(--marine-soft); color: var(--marine-2); }
.cost-badge-update { background: var(--gold-soft); color: #8A5A0E; }
:root[data-theme="dark"] .cost-badge-update { color: var(--gold); }

.cost-block-panel { margin-bottom: 12px; }
.cost-block-panel h3 { font-size: 13px; font-weight: 800; margin: 0 0 8px; }

.cost-sub-hub {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px 60px;
}

/* grid(2열)로 두면 "원가표 정리" 카드가 hidden이라도 그 자리(2번째 칸)가 그대로 비어
   남아서, 보이는 카드 하나가 화면 중앙이 아니라 왼쪽 칸에 치우쳐 보였다. 카드 개수와
   무관하게 항상 가운데로 모이도록 flex + justify-content:center로 바꾼다. */
.cost-sub-hub .hub-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 560px;
}

/* 예전엔 이 카드도 .hub-card를 그대로 재사용했다 - 허브 카드 크기를 바꿀 때마다 여기도
   같이 흔들리는 걸 막기 위해 완전히 독립된 클래스로 뺐다(사이트 선택 카드와 같은 이유). */
.subhub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.subhub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
  border-color: var(--marine-2);
}

.subhub-card-icon {
  font-size: 32px;
}

.subhub-card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  word-break: keep-all;
}

.subhub-card-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- 정산 (원물가 자동 채우기 + 채널 수수료율 학습/적용, 3단계 흐름) ----------
   상품원가표수정 마법사와 시각 스타일은 동일하지만, 두 화면이 DOM에 동시에 존재하는 동안
   상태 토글용 클래스(costGoToStep이 건드리는 .cost-step/.cost-panel)를 공유하면 서로의
   단계 표시가 어긋날 수 있어 별도 이름(.settle-*)으로 분리한다. */
.settle-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.settle-steps {
  flex: 1;
  overflow-y: auto;
  padding: 10px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settle-step-indicator {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settle-step {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.settle-step.is-active {
  background: var(--marine);
  color: #FFFFFF;
  border-color: var(--marine);
}

.settle-panel {
  display: none;
  flex-direction: column;
  gap: 18px;
}

.settle-panel.is-active { display: flex; }

.settle-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.settle-grid-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.settle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  white-space: nowrap;
}

.settle-table th, .settle-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}

.settle-table th { background: var(--surface-2); font-weight: 700; }

.settle-cell {
  width: 100%;
  min-width: 90px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.settle-cell:focus { border-color: var(--marine-2); }
.settle-cell-num { width: 100px; min-width: 100px; }

/* 표 셀 안에서 입력/버튼 여러 개를 나란히 두는 공용 래퍼. .settle-table의
   white-space:nowrap과 .settle-cell의 width:100%가 만나면(예: 비밀번호 입력칸 옆 "저장"
   버튼) 인라인 흐름만으로는 버튼이 셀 밖으로 넘쳐 옆 셀 내용과 겹쳐 보이는 문제가 있었다
   (설정 > 사이트 관리 표에서 발견). <td>에 직접 display:flex를 주면 테이블 셀 배치가
   깨지므로, 셀 안에 이 클래스를 가진 <div>를 하나 더 감싸서 쓴다. */
.btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-row .btn { flex-shrink: 0; }
.btn-row .settle-cell { flex: 1 1 auto; min-width: 0; }

/* 설정 > 사이트 관리 표의 작업 칸(저장/숨기기/삭제 최대 3버튼) - 어지간한 창 폭에서는
   한 줄에 다 들어가게 최소폭을 주고, 그래도 좁아지면 .btn-row의 flex-wrap이 다음 줄로
   넘겨서(행 높이는 늘어나되) 버튼끼리 겹치거나 잘리지 않게 한다. */
.site-actions-cell { min-width: 230px; }

.settle-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

.settle-badge-filled { background: var(--marine-soft); color: var(--marine-2); }
.settle-badge-failed { background: var(--danger-soft); color: var(--danger); }
.oc-price-basis { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.oc-price-basis label { font-size: 13px; }
.oc-price-note { display: block; margin-top: 4px; font-size: 12px; }
.oc-price-note.is-warn { color: var(--danger); }
.oc-price-note.is-info { color: var(--marine-2); }
.settle-badge-new { background: var(--marine-soft); color: var(--marine-2); }
.settle-badge-change { background: var(--gold-soft); color: #8A5A0E; }
.settle-badge-unresolved { background: var(--danger-soft); color: var(--danger); }
.settle-badge-nodata { background: var(--surface-2); color: var(--text-faint); }
:root[data-theme="dark"] .settle-badge-change { color: var(--gold); }

/* 정산 "확인 필요" 이상값 - 마진율 900% 같은 명백한 이상값이 그냥 지나가지 않도록, 이상값이
   있으면 패널 자체를 눈에 띄게 만들고 반영 전에 체크박스로 확인했다는 표시를 받는다. */
.panel-anomaly-alert {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.settle-anomaly-ack {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
}
.settle-anomaly-ack input { width: 16px; height: 16px; }
/* 문구를 눌러 체크박스로 스크롤했을 때 어디인지 잠깐 강조 */
.settle-anomaly-ack.is-flash { animation: settle-ack-flash 2s ease-out; }
@keyframes settle-ack-flash {
  0%, 30% { background: var(--gold-soft); box-shadow: 0 0 0 3px var(--gold); border-radius: 8px; }
  100% { background: transparent; box-shadow: 0 0 0 3px transparent; }
}
/* 반영 버튼이 비활성일 때 버튼 아래에 보이는 이유 문구(누르면 체크박스로 이동) */
.settle-apply-gate-hint {
  display: block;
  margin: 8px 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--danger);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  text-decoration: underline;
  cursor: pointer;
}
.settle-apply-gate-hint[hidden] { display: none; }

/* "상품명 확인 필요" 공용 위젯 - 자동후보 select 옆 "직접 검색" 토글 + 펼침 영역
   (상품원가표수정/정산/주문수집 세 화면이 전부 같은 마크업/스타일을 공유한다). */
.confirm-actions-cell { white-space: nowrap; }
.confirm-search-row td { white-space: normal; background: var(--surface-2); }

/* 사이트 관리 표의 개별 비밀번호 칸 - 오른쪽 끝 눈 아이콘(누르면 3초간 보임) */
.pw-field { position: relative; display: flex; align-items: center; }
.pw-field .site-password-input { width: 100%; padding-right: 36px; }
.pw-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.pw-toggle-btn:hover { color: var(--marine-2); background: var(--surface-2); }
.pw-toggle-btn svg[hidden] { display: none; }

/* 옵션 배수 추정(2026-09-21) - 옵션이 "500g+500g"류 묶음으로 보일 때만 뜨는 배수 선택기와
   정산 화면 "옵션 배수 확인 필요" 패널. 선택한 버튼(.is-active)만 진하게 표시한다. */
.confirm-mult-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--gold-soft);
  white-space: normal;
}
.confirm-mult-box .hint-inline { margin: 0; }
.confirm-mult-choices { align-items: center; flex-wrap: wrap; }
.mult-choice.is-active {
  background: var(--marine);
  border-color: var(--marine);
  color: #fff;
}
.mult-custom-input, .smult-custom { width: 96px; }
#settleMultTable td { white-space: normal; vertical-align: top; }
#settleMultTable .btn-row { flex-wrap: wrap; align-items: center; margin-top: 6px; }
.alias-mult-input { width: 80px; margin-left: 4px; }
.confirm-search-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 2px;
}
.confirm-search-box .hint { margin: 0; }
.confirm-search-input {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.confirm-search-input:focus { border-color: var(--marine-2); }
.confirm-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.confirm-search-results .empty-hint { margin: 4px 0; }
.confirm-search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 12.5px;
  transition: border-color .12s ease, background .12s ease;
}
.confirm-search-result-item:hover { border-color: var(--marine-2); background: var(--marine-soft); }
.confirm-search-result-name { font-weight: 700; }
.confirm-search-result-meta { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }
.confirm-addnew-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.confirm-addnew-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  min-width: 220px;
}
.confirm-addnew-input:focus { border-color: var(--marine-2); }

/* ---------- 상품명 매핑 사전: 원가표 상품명 자동완성 콤보 (설정 화면) ---------- */
.alias-add-form { grid-template-columns: repeat(3, 1fr); }
.product-combo { position: relative; }
.product-combo-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.product-combo-input:focus { border-color: var(--marine-2); }
.product-combo-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.product-combo-dropdown .empty-hint { margin: 4px; }
.product-combo-warning { color: var(--danger, #d9534f); margin: 4px 0 0; }

/* 상품명 매핑 사전 표(2026-09-20) - 공용 .settle-table의 white-space:nowrap 때문에 긴 원본
   상품명(실측 최대 65자)이 한 줄로 늘어나 표가 상자보다 넓어지고, 맨 오른쪽 버튼 칸이 가로
   스크롤 뒤로 밀려 잘렸다. 이 표만 고정 레이아웃 + 비율 폭으로 항상 상자 안에 맞추고, 셀은
   줄바꿈시킨다(다른 화면의 .settle-table은 그대로). 버튼 칸은 .btn-row의 flex-wrap으로
   창이 좁으면 2줄로 내려간다(잘리지 않음). */
#aliasTable { table-layout: fixed; }
#aliasTable th, #aliasTable td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
#aliasTable th:nth-child(1) { width: 24%; }
#aliasTable th:nth-child(2) { width: 28%; }
#aliasTable th:nth-child(3) { width: 9%; }
#aliasTable th:nth-child(4) { width: 11%; }
#aliasTable th:nth-child(5) { width: 7%; }
#aliasTable th:nth-child(6) { width: 21%; }
#aliasTable .settle-cell { min-width: 0; }

/* ---------- 경비처리: 월별 그룹 목록 ---------- */
.expense-month-group + .expense-month-group { margin-top: 24px; }

.expense-month-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.expense-month-header strong { font-size: 14px; color: var(--text); }

.expense-month-total {
  font-size: 12px;
  font-weight: 700;
  color: var(--marine-2);
}

:root[data-theme="dark"] .expense-month-total { color: var(--gold); }

.expense-amount-cell { font-weight: 800; text-align: right; white-space: nowrap; }

.expense-receipt-thumb-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  font-size: 15px;
  transition: border-color .12s ease;
}
.expense-receipt-thumb-btn:hover { border-color: var(--marine-2); }
.expense-receipt-thumb-btn img { width: 100%; height: 100%; object-fit: cover; }

/* 설정 > 발주서 양식 등록 모달(2026-10-03) */
.po-tpl-trim { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 13px; }
#poTplNotices .oc-price-note, #poTplNotices .auth-error { margin: 4px 0; }
#poTemplateTable { white-space: normal; }
#poTemplateTable td:first-child, #poTemplateTable td:nth-child(3) { white-space: nowrap; }
#poTemplateTable td:nth-child(2) { word-break: break-all; }
#poTemplateTable .btn-row { flex-wrap: wrap; gap: 4px; }

/* 주문수집 3단계: 발주할 주문 0건 안내(2026-10-03) */
.oc-empty-notice { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--gold-soft); color: #8A5A0E; font-size: 13.5px; }
.oc-empty-notice span { font-size: 12.5px; opacity: 0.9; }
:root[data-theme="dark"] .oc-empty-notice { color: var(--gold); }
/* 2단계 직접 지정한 주문 목록(2026-10-03) - 상품명이 길어도 표가 화면 폭 안에 */
#ocManualTable { white-space: normal; }
#ocManualTable td:nth-child(1), #ocManualTable td:nth-child(2), #ocManualTable td:nth-child(4), #ocManualTable td:nth-child(6) { white-space: nowrap; }
#ocManualTable td:nth-child(3) { word-break: break-all; min-width: 180px; }
#ocManualTable .btn-row { flex-wrap: wrap; gap: 4px; }

/* 주문수집 화면 단순화(2026-10-14): 탭(주문 처리/발주서 생성 | 조회/과거 주문 학습) + 요약 한 줄 + 원가표 한 줄 */
.oc-tabs { align-items: center; }
.oc-tab { cursor: pointer; font-family: inherit; }
.oc-tab:not(.is-active):hover { color: var(--text); border-color: var(--marine-2); }
.oc-tabs-spacer { flex: 1 1 auto; }
.oc-tab-aside:not(.is-active) { background: transparent; }
.oc-status-panel { display: flex; flex-direction: column; gap: 6px; }
.oc-status-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.oc-status-text { font-size: 15px; font-weight: 700; color: var(--text); }
.oc-status-text.is-error, .oc-cost-text.is-error { color: var(--danger); }
.oc-cost-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--text-faint); }
.oc-cost-text { overflow-wrap: anywhere; }
.oc-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--marine-2);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.oc-link-btn:disabled { color: var(--text-faint); text-decoration: none; cursor: default; }

/* 월 주문내역 파일 패널(2026-10-14) */
.oc-ledger-result { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13px; }
.oc-ledger-result p { margin: 0; }
.oc-ledger-warn { color: var(--danger); font-weight: 600; }
/* 읽기 전용(옮긴 뒤 데스크톱 2주, 2026-10-25) - 화면 맨 위 굵은 띠 */
.readonly-notice { position: sticky; top: 0; z-index: 300; display: flex; gap: 12px; align-items: center; padding: 10px 18px;
  background: #3A3F44; color: #fff; font-size: 14px; }
.readonly-notice[hidden] { display: none; }
.readonly-notice b { padding: 3px 10px; border-radius: 999px; background: #F2B33D; color: #13262E; font-weight: 800; }
/* 사방넷 파일 회사별로 나눠 넣기(S2, 2026-10-25) - 회사 카드 둘(회사 색 막대) + 쇼핑몰 표, 규칙에 없는 줄은 노랑 */
.sabang-preview { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 6px; background: var(--surface); }
.sabang-file { margin: 0 0 10px; }
.sabang-cos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.sabang-co { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border); border-left: 6px solid var(--co); }
.sabang-co-name { font-weight: 700; }
.sabang-co-num { grid-row: span 2; font-size: 30px; font-weight: 800; color: var(--co); line-height: 1; }
.sabang-co-num small { font-size: 13px; margin-left: 2px; color: var(--text-faint); }
.sabang-stop { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: rgba(242,179,61,.16); border: 1px solid rgba(242,179,61,.55); font-weight: 600; }
.sabang-preview tr.is-unknown td { background: rgba(242,179,61,.10); }
.sabang-done { margin: 6px 0; padding-left: 18px; line-height: 1.8; }
@media (max-width: 720px) { .sabang-cos { grid-template-columns: 1fr; } }
/* 손으로 한 것 한 번에 표시(2026-10-25) - 두 가지 중 하나를 크게 고르는 칸 + 조건 한 줄 + 미리보기 숫자 */
.bulk-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.bulk-kind-opt { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--surface); cursor: pointer; }
.bulk-kind-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--marine); }
.bulk-kind-opt span { display: flex; flex-direction: column; gap: 2px; }
.bulk-kind-opt b { font-size: 15px; }
.bulk-kind-opt small { font-size: 12px; color: var(--text-faint); }
.bulk-kind-opt:has(input:checked) { border-color: var(--marine); background: rgba(11,61,66,.05); box-shadow: inset 4px 0 0 var(--gold, #F2B33D); }
.bulk-kind-opt:has(input:focus-visible) { outline: 3px solid var(--gold, #F2B33D); outline-offset: 2px; }
.bulk-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.bulk-filters .field { min-width: 160px; }
.bulk-filters .bulk-upload-field { flex: 1 1 280px; }
.bulk-filters .bulk-upload-field select { width: 100%; }
.bulk-dates { display: inline-flex; align-items: center; gap: 6px; }
.bulk-dates input { padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.bulk-preview { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 6px 0 12px; background: var(--surface); }
.bulk-sum { display: flex; align-items: center; gap: 16px; }
.bulk-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--marine); }
.bulk-num small { font-size: 14px; margin-left: 2px; }
.bulk-what { display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
.bulk-what small { font-weight: 400; font-size: 12px; color: var(--text-faint); }
.bulk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.bulk-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
.bulk-sample td, .bulk-sample th { font-size: 12px; }
.bulk-none, .bulk-done { margin: 0; font-weight: 600; }
.bulk-done { color: #1d8a4e; }
.bulk-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.bulk-tag.is-purchased { background: rgba(34,160,90,.12); color: #1d8a4e; }
.bulk-tag.is-invoice { background: rgba(29,111,165,.10); color: #1d6fa5; }
.bulk-cond { font-size: 12px; color: var(--text-faint); }
@media (max-width: 720px) { .bulk-kind { grid-template-columns: 1fr; } }
.sm-move-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 6px 0 10px; }
.sm-move-form .field { min-width: 170px; }
.sm-move-arrow { font-size: 18px; color: var(--text-faint); padding-bottom: 6px; }
.shop-move-preview { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; background: var(--surface); }
.shop-move-what { margin: 0 0 4px; font-size: 14px; }
.shop-move-route { margin: 0 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.co-dot { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--co); }
.shop-move-sample td, .shop-move-sample th { font-size: 12px; }
.shop-move-done { margin: 0; color: #1d8a4e; font-weight: 600; }
.oc-ledger-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; margin-left: auto; cursor: pointer; }
.oc-ledger-auto input { width: 16px; height: 16px; accent-color: var(--marine); }
.oc-ledger-auto-state { font-size: 12.5px; color: var(--text-faint); margin-left: auto; }
.oc-ledger-off { margin: 4px 0 8px; padding: 7px 10px; border-radius: 6px; background: rgba(120,120,120,.08); border: 1px dashed var(--border); font-size: 12.5px; line-height: 1.5; }
#ocLedgerPanel.is-auto-off .oc-cost-line { opacity: .6; }

/* 설정 > 회사 이름: 쇼핑몰 이름 표 접기(2026-10-15) */
.company-name-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.company-name-row .field { margin-bottom: 0; width: 280px; max-width: 100%; }
.company-name-row .btn { margin-bottom: 3px; }
.company-name-row + .hint { margin-top: 8px; }
.company-shop-names { margin-top: 12px; }
.company-shop-names > summary { cursor: pointer; color: var(--text-soft); font-size: 13px; }
.company-shop-names[open] > summary { margin-bottom: 6px; }

/* 상품원가표수정 - 반영하면 바뀌는 것(2026-10-15) */
:root { --price-up: #C0392B; --price-down: #1F5FBF; }
:root[data-theme="dark"] { --price-up: #F07B6E; --price-down: #6EA8FF; }
.cost-nochange {
  font-size: 28px; font-weight: 800; color: var(--marine-2); background: var(--marine-soft);
  border-radius: var(--radius); padding: 18px 22px; margin: 6px 0 14px;
}
.cost-nochange span { display: block; font-size: 14px; font-weight: 500; color: var(--text-soft); margin-top: 4px; }
.cost-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 8px 0; }
.cost-summary-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); }
.cost-summary-title { font-size: 12.5px; color: var(--text-soft); margin-bottom: 6px; font-weight: 600; }
.cost-summary-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.cost-summary-line b { font-size: 20px; margin-left: 2px; }
.cost-up { color: var(--price-up); }
.cost-down { color: var(--price-down); }
.cost-same { color: var(--text-soft); }
.cost-change-table td.num, .cost-change-table th.num { text-align: right; white-space: nowrap; }
.cost-change-table td.cost-up, .cost-change-table td.cost-down { font-weight: 700; }
.cost-empty { color: var(--text-soft); padding: 10px 4px; }
.cost-fulllist {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--gold); border-radius: var(--radius-sm); background: var(--gold-soft);
}
.cost-fulllist label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cost-group-title { font-size: 14.5px; margin: 14px 0 6px; }
.cost-group-title:first-child { margin-top: 4px; }
.cost-fold > summary { cursor: pointer; color: var(--text-soft); font-size: 13.5px; margin: 8px 0; }
details.panel.cost-fold > summary { font-size: 16px; font-weight: 700; color: var(--text); }
.cost-special-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.cost-special-tools .field { margin-bottom: 0; width: 200px; }
.cost-result-list { margin: 8px 0 14px 18px; line-height: 1.8; }
/* 반영 완료: 백업 파일 이름 + [백업 폴더 열기] (2026-10-15) */
.cost-backup-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-soft); font-size: 13.5px; margin: 4px 0 8px; }
.cost-backup-line #costBackupName { word-break: break-all; }
.cost-checks-more { margin-top: 10px; }
/* 상품원가표수정 컬럼 매핑: 견적서 미리보기 + 업체(2026-10-15) */
.cost-quote-preview-wrap { max-height: 320px; margin-top: 6px; }
.cost-quote-preview td, .cost-quote-preview th { white-space: nowrap; font-size: 12.5px; }
.cost-quote-preview tr.cost-qp-fields th { color: var(--text); font-weight: 700; font-size: 12px; }
.cost-quote-preview tr.cost-qp-header td { background: var(--gold-soft); font-weight: 600; }
.cost-quote-preview td.cost-qp-mapped { background: var(--marine-soft); }
.cost-quote-preview tr.cost-qp-header td.cost-qp-mapped { background: var(--gold-soft); }
.cost-company-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cost-company-row .cost-select { min-width: 220px; }
#costCompanyReason { margin-top: 8px; }
#costCompanyReason.cost-company-warn { color: var(--danger); font-weight: 600; }

/* 상품원가표수정 안전장치/재계산/현재 원가표 다운로드/페이지(2026-10-15) */
.cost-blocked { margin: 10px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.cost-lowmatch { margin: 6px 0 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--text); font-weight: 600; }
.cost-recalc-line { color: var(--text-soft); font-size: 13.5px; margin: 4px 0; }
.cost-recalc-line.is-warn { color: var(--danger); font-weight: 700; }
.cost-current-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; font-size: 13px; color: var(--text-soft); }
.cost-current-info { word-break: break-all; }
.cost-current-warn { color: var(--danger); font-weight: 600; }
.cost-page-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 13.5px; }
.cost-page-tools label { display: inline-flex; align-items: center; gap: 6px; }

/* 전체 행 보기: 원가표 실제 값 / 예상 값 구분(2026-10-15) */
.cost-est-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--gold-soft); color: var(--text); vertical-align: middle; }
.cost-recalc-tag { display: none; margin-left: 6px; font-size: 11px; color: var(--text-soft); }
.cost-row-changing td { background: var(--gold-soft); }
.cost-row-changing .cost-recalc-tag { display: inline; }
.cost-cell-text { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cost-cell-empty { color: var(--text-faint); font-size: 12px; }

/* 설정 > 원가표 위치(2026-10-15 원가표는 한 벌) */
.cost-loc-line { margin: 4px 0; word-break: break-all; }
.cost-loc-status { margin: 2px 0 10px; color: var(--text-soft); font-size: 13.5px; }
.cost-loc-status.is-warn { color: var(--danger); font-weight: 700; }
.cost-loc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* 쇼핑몰 반영할 상품: 원가표 표시 색과 같은 색(2026-10-15) */
.mall-chip { display: inline-block; margin: 0 3px; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 700; color: #1f2a2d; white-space: nowrap; }
.mall-up { background: #FFC7CE; } .mall-down { background: #BDD7EE; } .mall-soldout { background: #BFBFBF; }
.mall-restock { background: #FFFF00; } .mall-new { background: #C6EFCE; } .mall-special { background: #F8CBAD; }

/* 정산 파일로 학습(2026-10-15) */
.sl-stats { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0 10px; }
.sl-stat { background: var(--marine-soft); border-radius: var(--radius-sm); padding: 8px 14px; display: flex; flex-direction: column; min-width: 110px; }
.sl-stat span { font-size: 12.5px; color: var(--text-soft); }
.sl-stat b { font-size: 22px; color: var(--text); }
tr.sl-unknown td { background: var(--danger-soft); }

/* 일시정지/품절 상품 후보·검색·판매중지 확인 필요(2026-10-16) */
.confirm-candidate-select option.is-inactive { color: #8a8a8a; }
.confirm-inactive-warn { margin-top: 4px; color: var(--danger); font-weight: 700; font-size: 12.5px; }
.confirm-search-result-item.is-inactive { opacity: 0.6; }
.inactive-badge { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11.5px; font-weight: 700; background: #d9d9d9; color: #444; }
.oc-inactive-panel { border: 2px solid var(--danger); }
.oc-inactive-panel h2 { color: var(--danger); }

/* 수수료율 없는 쇼핑몰 경고(2026-10-15) */
.oc-rate-warn { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--danger); color: var(--danger); font-weight: 700; font-size: 13px; background: var(--surface, transparent); }

/* 정산 내보내기 + 직접 수정(2026-10-16) */
.export-tools { flex-wrap: wrap; }
.export-tools > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.export-split { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: 6px; }
#exportFolderText { font-weight: 700; word-break: break-all; }
#exportFolderText.is-missing { color: var(--danger); }
.export-unfilled-title { color: var(--danger); font-weight: 700; }
.se-actions { flex-wrap: wrap; gap: 8px; }
.se-actions > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#seBlanksBtn.is-on { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); font-weight: 800; }
.se-table td { vertical-align: middle; }
.se-table .se-cell { width: 74px; min-width: 64px; text-align: right; padding: 4px 5px; }
.se-table th, .se-table td { padding: 5px 6px; }
.se-table .se-cell[data-col="수량"] { width: 48px; min-width: 44px; }
.se-date { color: var(--text-soft); }
.se-shop { font-size: 12px; }
.se-table .se-cell.is-edited, .se-table .se-buyer.is-edited { border-color: var(--marine-2); background: rgba(46, 125, 180, .12); font-weight: 700; }
.se-table .se-cell.is-blank { border-color: var(--danger); background: var(--danger-soft); }
.se-table .se-cell.is-invalid { border-color: var(--danger); color: var(--danger); }
.se-table .se-cell.is-manual { border-style: dashed; }
.se-table .se-buyer { min-width: 92px; max-width: 120px; padding: 4px 4px; }
.se-table .se-calc { text-align: right; font-weight: 700; color: var(--text-soft); min-width: 70px; }
.se-table .se-calc.is-neg { color: var(--danger); }
.se-table tr.se-row-edited td { background: rgba(46, 125, 180, .05); }
.se-name { min-width: 200px; max-width: 300px; white-space: normal; }
.se-name .cost-cell-text { max-width: 290px; }
.se-opt { display: inline-block; max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-soft); }
.se-manual-tag { display: inline-block; font-size: 10px; font-weight: 800; color: #fff; background: #8a5cd0; border-radius: 4px; padding: 0 4px; margin-right: 3px; vertical-align: middle; }
.se-blank-tag { color: var(--danger); font-weight: 700; font-size: 11.5px; }
.se-reason { font-size: 11.5px; color: var(--text-soft); }
.se-file { font-size: 11px; color: var(--text-soft); }
.se-status { white-space: normal; margin-top: 2px; line-height: 1.35; }
.se-map { display: flex; align-items: center; gap: 3px; font-size: 11px; white-space: nowrap; margin-top: 3px; }
.se-empty { color: var(--text-soft); padding: 14px; }
.se-file-pending { color: var(--danger); font-weight: 700; }
.se-sub { font-size: 14px; margin: 14px 0 6px; }
.se-log-wrap { max-height: 360px; overflow-y: auto; }

/* 체크칸 표 공통(2026-10-16): 머리줄 전체 체크 + N개 선택 / 페이지 나뉜 표 막대 */
.btn-xs { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }
.check-count { caption-side: top; text-align: left; font-size: 11.5px; color: var(--text-faint); padding: 0 0 4px; white-space: nowrap; }
.check-all-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: 12.5px; }
.pick-bar .pick-count { font-weight: 800; color: var(--marine-2); margin-right: 4px; }
.pick-pager { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }

/* 업로드 기록 짧게(2026-10-16) */
.uh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 2px 0 8px; font-size: 12.5px; }
.uh-filters label { display: inline-flex; align-items: center; gap: 4px; }
.uh-filters input[type="date"] { padding: 3px 6px; font-size: 12px; }
.settle-table.uh-table td { padding: 3px 8px; vertical-align: middle; }
.uh-table .uh-group td { background: var(--surface-2); }
.uh-table .uh-group.is-cancelled td { color: var(--text-faint); }
.uh-table .uh-file td:first-child { padding-left: 26px; }
.uh-table .uh-file.is-dim td { opacity: .5; }
.uh-table .uh-sites { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.uh-table .uh-actions { text-align: right; white-space: nowrap; width: 1%; }
.uh-table .uh-actions .btn + .btn { margin-left: 4px; }
.uh-table .settle-badge { padding: 2px 7px; }
.uh-more { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.uh-filters .cost-select, .uh-more .cost-select, .pick-bar .cost-select { padding: 4px 8px; font-size: 12px; min-height: 0; height: auto; }
.uh-lock { display: inline-block; font-size: 11.5px; color: var(--text-faint); padding: 3px 8px; border: 1px dashed var(--border); border-radius: 6px; cursor: help; }
.big-confirm-count { font-size: 40px; font-weight: 900; color: var(--danger); text-align: center; line-height: 1.2; }
/* 송장 받기(2026-10-16) */
.inv-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.inv-paste { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.inv-paste summary { cursor: pointer; font-weight: 600; }
.inv-paste-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.inv-paste-body textarea { width: 100%; font-family: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); box-sizing: border-box; }
.inv-paste-body .field { max-width: 320px; }
.inv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-chip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.inv-chip strong { font-size: 14px; }
.inv-chip.auto, .inv-badge.auto { background: rgba(34,160,90,.12); color: #1d8a4e; border-color: rgba(34,160,90,.35); }
.inv-chip.check, .inv-badge.check { background: rgba(230,150,20,.14); color: #b06f00; border-color: rgba(230,150,20,.4); }
.inv-chip.none, .inv-badge.none { background: rgba(200,60,60,.10); color: #b23a3a; border-color: rgba(200,60,60,.35); }
.inv-chip.pending, .inv-badge.pending { background: rgba(29,111,165,.10); color: #1d6fa5; border-color: rgba(29,111,165,.35); }
.inv-chip.manual, .inv-badge.manual { background: rgba(242,179,61,.18); color: #8a5a00; border-color: rgba(242,179,61,.55); }
.inv-table .inv-pick-btn { margin-top: 6px; display: inline-flex; }
.inv-unmarked { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.modal-box.inv-pick-box { max-width: 640px; width: min(640px, calc(100vw - 32px)); }
.inv-pick-for { margin: 0; font-size: 13.5px; }
.inv-pick-search { display: flex; gap: 8px; }
.inv-pick-search input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border-strong, var(--border)); border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--surface); color: var(--text); }
.inv-pick-search input:focus-visible { outline: 3px solid var(--gold, #F2B33D); outline-offset: 1px; }
.inv-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.inv-pick-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main state" "sub state"; gap: 2px 12px; align-items: center;
  text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; cursor: pointer; }
.inv-pick-item:hover { border-color: var(--marine); background: rgba(11,61,66,.04); }
.inv-pick-item:focus-visible { outline: 3px solid var(--gold, #F2B33D); outline-offset: 1px; }
.inv-pick-main { grid-area: main; min-width: 0; }
.inv-pick-sub { grid-area: sub; font-size: 12px; color: var(--text-faint); }
.inv-pick-state { grid-area: state; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.inv-pick-state.is-wait { background: rgba(29,111,165,.10); color: #1d6fa5; }
.inv-pick-state.is-done { background: rgba(34,160,90,.12); color: #1d8a4e; }
.inv-pending-ask { margin-top: 6px; padding: 6px 8px; border-left: 3px solid #1d6fa5; background: rgba(29,111,165,.06); font-size: 12.5px; line-height: 1.45; }
.inv-pending-ask .inv-sub { display: block; }
.inv-chip.already, .inv-badge.already { background: rgba(120,120,120,.12); color: var(--text-faint); }
.inv-badge { display: inline-block; font-size: 11.5px; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.inv-filter { display: flex; gap: 6px; margin: 8px 0; }
.inv-filter .is-on { background: var(--marine); color: #fff; border-color: var(--marine); }
.inv-table td { vertical-align: top; }
.inv-table td:nth-child(5) { white-space: nowrap; }
.inv-table .inv-rec .inv-sub, .inv-table .inv-rec .inv-warn { white-space: normal; max-width: 330px; }
.inv-table .inv-order, .inv-table .inv-rec { line-height: 1.45; }
.inv-table .inv-sub { font-size: 11.5px; color: var(--text-faint); }
.inv-table .inv-arrow { color: var(--text-faint); text-align: center; }
.inv-table .inv-no { font-family: Consolas, monospace; font-weight: 600; }
.inv-table select { max-width: 280px; font-size: 12px; }
.inv-warn { color: #b06f00; font-size: 11.5px; }
.inv-files td { vertical-align: middle; }
.inv-files .inv-notinv { color: var(--text-faint); }
.inv-wait-orders { margin: 4px 0 4px 12px; font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.inv-result-list { font-size: 12.5px; margin: 6px 0 0 16px; }
.courier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.courier-table-wrap { max-height: 340px; overflow: auto; }
.courier-sub { font-size: 14px; margin: 0 0 4px; }
@media (max-width: 900px) { .courier-grid { grid-template-columns: 1fr; } }
/* 오늘 수익 보고(2026-10-16) */
.profit-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.profit-bar input[type=date] { font-size: 14px; padding: 4px 8px; }
.profit-warn { background: rgba(230,150,20,.12); color: #b06f00; border: 1px solid rgba(230,150,20,.4); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 13px; font-weight: 600; }
.profit-table td.num, .profit-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.profit-table tfoot td { font-weight: 800; border-top: 2px solid var(--border); }
.profit-compare { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.profit-actions { justify-content: flex-start; gap: 8px; }
/* 상품장 양식 대비(2026-10-16) */
.cost-price-cands { margin: 4px 0 8px 18px; font-size: 13px; line-height: 1.6; }
.cost-price-cands li.is-picked { font-weight: 700; }
.cost-basis-line { margin: 4px 0; font-size: 13px; }
.cost-basis-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); margin-right: 4px; }
.cost-basis-badge.in { background: rgba(34,160,90,.12); color: #1d8a4e; }
.cost-basis-badge.out { background: rgba(60,110,200,.12); color: #2f5fb3; }
.cost-basis-badge.unknown { color: var(--text-faint); }
.cost-image-warn, .cost-basis-text { background: rgba(230,150,20,.12); color: #b06f00; border: 1px solid rgba(230,150,20,.4); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.cost-basis-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; font-size: 13px; }
.cost-basis-row input[type=number] { width: 90px; }

/* 정산 화면 탭(2026-10-17): 맨 위에 붙어 있어 스크롤해도 바로 바꿀 수 있음 */
.settle-tabs {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 0 12px; margin-bottom: 4px;
  background: var(--bg);
}
.settle-tab {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
  font-size: 14px; font-weight: 700; padding: 9px 20px; border-radius: 999px; cursor: pointer;
}
.settle-tab:hover { border-color: var(--marine-2); }
.settle-tab.is-active { background: var(--marine); border-color: var(--marine); color: #FFFFFF; }
/* 수익 보고 [고치기] */
.profit-table tr.profit-row-bad td { background: rgba(229, 57, 53, .06); }
.profit-fix-cell { white-space: nowrap; }
.profit-fix-why { font-size: 12px; color: #c62828; font-weight: 600; }
.se-from-profit {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 10px; padding: 8px 12px; font-size: 13.5px;
  border: 1px solid var(--marine-2); border-radius: 8px; background: var(--surface-2);
}

/* 경비처리 가계부(2026-10-17): 빠른 입력 / 달력 / 고정 지출 */
.exp-quick {
  display: grid; gap: 8px 10px; align-items: end;
  grid-template-columns: 150px 130px minmax(140px, 1.4fr) minmax(140px, 1.2fr) 110px minmax(110px, 1fr) auto auto;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.exp-quick label, .exp-quick .exp-q-receipt, .exp-fixed-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); font-weight: 700; min-width: 0; }
.exp-quick input, .exp-quick select, .exp-fixed-form input, .exp-fixed-form select { width: 100%; min-width: 0; }
.exp-q-amount input { text-align: right; font-weight: 800; font-size: 15px; }
.exp-q-receipt { flex-direction: row !important; align-items: center; flex-wrap: wrap; }
.exp-q-receipt > span:first-child { width: 100%; }
.exp-q-receipt-name { font-size: 12px; color: var(--text); font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-q-save { height: 38px; }
@media (max-width: 1200px) { .exp-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.exp-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; margin-top: 14px; align-items: start; }
@media (max-width: 1000px) { .exp-cal-wrap { grid-template-columns: 1fr; } }
.exp-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.exp-cal-head strong { font-size: 18px; min-width: 120px; text-align: center; color: var(--text); }
.exp-cal-week, .exp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.exp-cal-week span { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-soft); padding: 4px 0; }
.exp-cal-week .is-sun, .exp-cal-cell.is-sun .exp-cal-d { color: #c62828; }
.exp-cal-week .is-sat, .exp-cal-cell.is-sat .exp-cal-d { color: #1e5bb8; }
.exp-cal-cell {
  min-height: 78px; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: inherit;
}
.exp-cal-cell.is-empty { background: transparent; border-color: transparent; cursor: default; }
.exp-cal-cell:not(.is-empty):hover { border-color: var(--marine-2); }
.exp-cal-cell.has-amt { background: var(--gold-soft); }
.exp-cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--gold); }
.exp-cal-cell.is-sel { border-color: var(--marine); box-shadow: inset 0 0 0 2px var(--marine); }
.exp-cal-d { font-size: 12.5px; font-weight: 700; }
.exp-cal-amt { font-size: 14px; font-weight: 800; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-cal-sub { font-size: 11px; color: var(--text-soft); text-align: right; }
.exp-cal-plan { font-size: 10.5px; color: var(--text-faint); text-align: right; border-top: 1px dashed var(--border); margin-top: auto; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.exp-cal-side { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.exp-cal-side h4 { margin: 8px 0 2px; font-size: 13px; color: var(--text-soft); }
.exp-side-total { display: flex; flex-direction: column; gap: 2px; }
.exp-side-total > span:first-child { font-size: 13px; color: var(--text-soft); font-weight: 700; }
.exp-side-total b { font-size: 24px; color: var(--marine); }
:root[data-theme="dark"] .exp-side-total b { color: var(--gold); }
.exp-side-cmp, .exp-side-pending { font-size: 12.5px; color: var(--text-soft); }
.exp-side-pending { background: var(--surface-2); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.exp-up { color: #c62828; }
.exp-down { color: #1f7a3d; }
.exp-cat-list { display: flex; flex-direction: column; gap: 6px; }
.exp-cat-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 12.5px; }
.exp-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-cat-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.exp-cat-bar i { display: block; height: 100%; background: var(--gold); }
.exp-cat-amt { font-weight: 700; text-align: right; white-space: nowrap; }

.exp-day { margin-top: 16px; }
.exp-day h3 { font-size: 15px; margin: 0 0 8px; }
.exp-fixed-tag { display: inline-block; font-size: 11px; font-weight: 800; color: #FFFFFF; background: var(--marine-2); border-radius: 4px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
.exp-pay { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.exp-pay-card { color: #1e5bb8; border-color: rgba(30, 91, 184, .35); }
.exp-pay-cash { color: #1f7a3d; border-color: rgba(31, 122, 61, .35); }
.exp-pay-bank { color: #8a5a00; border-color: rgba(176, 111, 0, .35); }
.exp-form-fixed { background: var(--surface-2); border-radius: 6px; padding: 6px 10px; }

.exp-list-filters { grid-template-columns: minmax(280px, 1.4fr) 1fr 1fr 1.4fr; }
.exp-range { display: flex; align-items: center; gap: 6px; }
.exp-range input { flex: 1; min-width: 0; }
.exp-list-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.exp-list-spacer { flex: 1; }

.exp-fixed-total { font-size: 14px; color: var(--text-soft); }
.exp-fixed-total b { font-size: 18px; color: var(--marine); }
:root[data-theme="dark"] .exp-fixed-total b { color: var(--gold); }
.exp-fixed-form {
  display: grid; gap: 8px 10px; align-items: end; margin: 10px 0;
  grid-template-columns: minmax(140px, 1.4fr) 130px minmax(140px, 1.2fr) 110px 90px 140px minmax(110px, 1fr) auto;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
@media (max-width: 1200px) { .exp-fixed-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.exp-f-actions { display: flex; gap: 6px; }
.exp-fixed-off td { opacity: .55; }
.exp-fixed-on { color: #1f7a3d; font-weight: 700; }

/* 수입·지출(2026-10-22): 들어온 돈 = 파랑, 나간 돈 = 빨강. 색은 돈의 방향에만 쓴다(숫자 3개, 달력 +/−, 표 금액, 구분 표시, 토글). */
:root { --money-in: #1E63C6; --money-in-soft: #E3EEFF; --money-out: #C8382D; --money-out-soft: #FDE8E5; }
:root[data-theme="dark"] { --money-in: #7DB3F7; --money-in-soft: #1B3448; --money-out: #F0857A; --money-out-soft: #3B2422; }
.exp-in { color: var(--money-in); font-weight: 800; }
.exp-out { color: var(--money-out); font-weight: 800; }

.exp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.exp-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-radius: 20px; padding: 16px 20px 14px; background: var(--surface-2); }
.exp-stat.is-income { background: var(--money-in-soft); }
.exp-stat.is-expense { background: var(--money-out-soft); }
.exp-stat.is-left { background: var(--surface); box-shadow: inset 0 0 0 2px var(--border); }
.exp-stat-label { font-size: 14px; font-weight: 700; color: var(--text-soft); }
.exp-stat-hint { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-left: 4px; }
.exp-stat-num { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.exp-stat-num small { font-size: 0.45em; font-weight: 700; margin-left: 3px; opacity: 0.7; letter-spacing: 0; }
.exp-stat.is-income .exp-stat-num { color: var(--money-in); }
.exp-stat.is-expense .exp-stat-num { color: var(--money-out); }
.exp-stat.is-left.is-neg { box-shadow: inset 0 0 0 2px var(--money-out); }
.exp-stat.is-left.is-neg .exp-stat-num { color: var(--money-out); }
.exp-stat-sub { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.exp-stat.is-left.is-neg .exp-stat-sub { color: var(--money-out); }
.exp-stat-cmp { font-size: 12px; color: var(--text-soft); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(19, 38, 46, 0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .exp-stat-cmp { border-top-color: rgba(255, 255, 255, 0.08); }
@media (max-width: 900px) { .exp-stats { grid-template-columns: 1fr; } }

/* [수입] [지출] / [전체] [수입만] [지출만] 알약 토글 */
.exp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); }
.exp-seg-btn { border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.exp-seg-btn:hover { color: var(--text); }
.exp-seg-btn[aria-pressed="true"] { background: var(--marine); color: var(--on-marine); }
.exp-seg-btn.is-income[aria-pressed="true"] { background: var(--money-in); color: #FFFFFF; }
.exp-seg-btn.is-expense[aria-pressed="true"] { background: var(--money-out); color: #FFFFFF; }
:root[data-theme="dark"] .exp-seg-btn:is(.is-income, .is-expense)[aria-pressed="true"] { color: #0E1C23; }
.exp-seg-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.exp-q-kind { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); font-weight: 700; }
.exp-q-kind .exp-seg-btn { padding: 8px 15px; }
.exp-quick { grid-template-columns: auto 140px 120px minmax(120px, 1.4fr) minmax(130px, 1.2fr) 100px minmax(90px, 1fr) auto auto; }
.exp-quick[data-kind="income"] { box-shadow: inset 4px 0 0 var(--money-in); }
.exp-quick[data-kind="expense"] { box-shadow: inset 4px 0 0 var(--money-out); }
.exp-quick[data-kind="income"] .exp-q-amount input { color: var(--money-in); }
.exp-quick[data-kind="expense"] .exp-q-amount input { color: var(--money-out); }
@media (max-width: 1500px) { .exp-quick { grid-template-columns: auto 140px 120px minmax(0, 1fr) minmax(0, 1fr); } }
.exp-form-kind { margin: 2px 0 6px; }

/* 달력 칸: +수입 / −지출 */
.exp-cal-cell.has-amt { background: var(--surface); }
.exp-cal-cell.has-amt { padding-left: 6px; padding-right: 6px; }
.exp-cal-in, .exp-cal-out { font-size: 12px; letter-spacing: -0.2px; font-weight: 800; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.exp-cal-in { color: var(--money-in); }
.exp-cal-out { color: var(--money-out); }
.exp-cal-d + .exp-cal-in, .exp-cal-d + .exp-cal-out { margin-top: auto; }

/* 옆 칸: 지출 카테고리별 / 수입 분류별 막대 */
.exp-cal-side h4:first-child { margin-top: 0; }
.exp-cat-list.is-expense .exp-cat-bar i { background: var(--money-out); opacity: 0.75; }
.exp-cat-list.is-income .exp-cat-bar i { background: var(--money-in); opacity: 0.75; }

/* 표: 구분 표시 + 금액 색 */
.exp-kind { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.exp-kind-income { background: var(--money-in-soft); color: var(--money-in); }
.exp-kind-expense { background: var(--money-out-soft); color: var(--money-out); }
.exp-day h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.exp-day-sums { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.expense-month-total, :root[data-theme="dark"] .expense-month-total { color: var(--text-soft); font-size: 12.5px; }
.exp-list-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 6px; }

/* 수익 보고: 지출 · 남은 돈 · 본전 매출 */
.profit-expense { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 13.5px; }
.profit-exp-line b { font-size: 14.5px; }
.exp-neg { color: #c62828; }
.profit-be { border-radius: 8px; padding: 10px 12px; margin-top: 4px; border: 1px solid var(--border); background: var(--surface); }
.profit-be.is-ok { border-color: rgba(31, 122, 61, .5); background: rgba(31, 122, 61, .07); }
.profit-be.is-short { border-color: rgba(198, 40, 40, .5); background: rgba(198, 40, 40, .06); }
.profit-be.is-na { color: var(--text-soft); }
.profit-be-head b { font-size: 17px; }
.profit-be-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.profit-be-grid > div { display: flex; flex-direction: column; gap: 2px; }
.profit-be-grid span { font-size: 12px; color: var(--text-soft); }
.profit-be-grid b { font-size: 15px; }
.profit-be.is-ok .profit-be-verdict b { color: #1f7a3d; }
.profit-be.is-short .profit-be-verdict b { color: #c62828; }
@media (max-width: 900px) { .profit-be-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profit-exp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); margin-right: auto; }


/* 정산 화면 스크롤(2026-10-17): .settle-shell이 overflow:hidden이라 창보다 긴 탭(직접 수정 10줄 등)은 마우스 휠로 아래 [저장]까지
   내려갈 수 없었다 -> 정산 화면만 전체 스크롤(탭 줄은 sticky라 위에 붙어 있음). app.js도 탭을 바꿀 때 이 요소의 scrollTop을 0으로 돌린다.
   같은 .settle-shell을 쓰는 다른 화면(주문수집 등)은 그대로. */
#settlementShell { overflow-y: auto; }

/* 경비처리 화면 스크롤(2026-10-17): .settle-shell이 overflow:hidden이라 달력 + 그날 목록이 창보다 길면 휠로 못 내려갔다 -> 정산과 같이 화면 전체 스크롤 */
#expenseShell { overflow-y: auto; }

/* 거래처·판매처 화면 관리(2026-10-17, self_manage.js) */
.sm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.sm-toolbar input[type=search], .sm-toolbar input[type=text] { padding: 8px 10px; min-width: 220px; }
.sm-check, .sm-radio { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; margin: 6px 0; cursor: pointer; }
.sm-check input, .sm-radio input { margin-top: 3px; }
.sm-sub { font-size: 14.5px; margin: 18px 0 6px; }
.sm-scroll { max-height: 420px; overflow: auto; }
.sm-preview { max-height: 230px; overflow: auto; }
.sm-preview td, .sm-preview th { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sm-preview tbody tr { cursor: pointer; }
.sm-header-row td { background: var(--gold-soft) !important; font-weight: 800; }
.sm-hidden-row td { opacity: 0.55; }
.sm-actions { white-space: nowrap; }
.sm-actions .btn + .btn { margin-left: 4px; }
.sm-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--marine-soft); color: var(--marine-2); vertical-align: middle; }
.sm-badge.is-muted { background: var(--surface-2); color: var(--text-faint); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; }
.sm-chip button { border: 0; background: transparent; cursor: pointer; color: var(--text-faint); font: inherit; padding: 0; }
.sm-ledger { display: flex; gap: 4px; align-items: center; min-width: 230px; }
.sm-ledger .settle-cell { min-width: 150px; }
.sm-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; }
.sm-steps li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-faint); font-size: 12.5px; font-weight: 700; }
.sm-steps li b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); font-size: 11px; }
.sm-steps li.is-active { background: var(--marine); color: #fff; }
.sm-steps li.is-active b { color: var(--marine); }
.sm-steps li.is-done { color: var(--text); }
.sm-wiz .sm-step { min-height: 180px; }
.sm-wiz .sm-step > * + * { margin-top: 12px; }
.sm-code-table { margin: 6px 0; }
.sm-code-table summary { cursor: pointer; padding: 6px 0; font-size: 13.5px; }

/* ===== 행사 정보(2026-10-17, promo.js) ===== */
.pr-deadlines { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pr-day { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.pr-day.is-today { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); background: var(--danger-soft); }
.pr-day.is-tomorrow { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); background: var(--gold-soft); }
.pr-day.is-past { opacity: 0.55; }
.pr-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.pr-day-n { margin-left: auto; font-size: 12px; color: var(--text-faint); font-weight: 700; }
.pr-day-tag { font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--danger); color: #fff; }
.pr-day.is-tomorrow .pr-day-tag { background: var(--gold); color: #3a2a10; }
.pr-day-tag.is-muted { background: var(--surface-2); color: var(--text-faint); }
.pr-dl-row { display: grid; grid-template-columns: 46px 1fr; column-gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 5px 0;
  border-top: 1px dashed var(--border); cursor: pointer; font: inherit; color: inherit; }
.pr-dl-row:first-of-type { border-top: 0; }
.pr-dl-row:hover .pr-dl-event { text-decoration: underline; }
.pr-dl-time { grid-row: span 2; font-size: 12.5px; font-weight: 800; color: var(--marine-2); }
.pr-dl-site { font-size: 12px; color: var(--text-soft); }
.pr-dl-event { font-weight: 800; font-size: 13.5px; }
.pr-dl-meta { grid-column: 2; font-size: 11.5px; color: var(--text-faint); }
.pr-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.pr-layout > * { min-width: 0; }
.pr-card .option-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pr-card .settle-grid-wrap { overflow-x: auto; }
.pr-result { min-width: 0; overflow: hidden; }
.pr-side .site-search { width: 100%; margin-bottom: 8px; }
.pr-site-list { display: flex; flex-direction: column; gap: 4px; max-height: 640px; overflow: auto; }
.pr-site-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; padding: 7px 10px; cursor: pointer; font: inherit; color: inherit; }
.pr-site-item:hover { background: var(--surface-2); }
.pr-site-item.is-active { background: var(--marine-soft); border-color: var(--marine-2); }
.pr-site-name { font-weight: 800; font-size: 13.5px; }
.pr-site-sub { font-size: 11.5px; color: var(--text-faint); }
.pr-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr-detail-head h3 { margin: 0; font-size: 18px; }
.pr-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; }
.pr-card h4 { margin: 0 0 8px; font-size: 14.5px; }
.pr-card-head { display: flex; align-items: center; justify-content: space-between; }
.pr-card-head h4 { margin: 0; }
.pr-card .settle-grid-wrap { margin-top: 8px; }
.pr-table td { vertical-align: top; }
.pr-sub { font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
.pr-note { max-width: 260px; font-size: 12px; color: var(--text-soft); }
.pr-rule { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pr-rule .field { min-width: 140px; }
.pr-preset { background: var(--marine-soft); padding: 8px 10px; border-radius: var(--radius-sm); }
.pr-tabs { margin: 8px 0 10px; }
.pr-list { margin: 4px 0 8px 18px; padding: 0; font-size: 13px; line-height: 1.7; }
.pr-details { margin: 6px 0; font-size: 13px; }
.pr-details summary { cursor: pointer; }
.pr-imp-ev { font-size: 12.5px; line-height: 1.6; }
.pr-st { font-size: 10.5px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-faint); }
.pr-st-new { background: var(--marine-soft); color: var(--marine-2); }
.pr-st-update { background: var(--gold-soft); color: #7a5512; }
.pr-event-hint { margin-top: 2px; }
.pr-result { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; background: var(--surface); }
.pr-result .sm-sub { margin-top: 0; }
.pr-res-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; }
.pr-badges { display: inline-flex; gap: 6px; }
.pr-pill { font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); }
.pr-pill.is-warn { background: var(--gold-soft); color: #7a5512; }
.pr-pill.is-bad { background: var(--danger-soft); color: var(--danger); }
.pr-pill.is-ok { background: var(--marine-soft); color: var(--marine-2); }
.pr-md-line { font-size: 13px; margin: 6px 0; }
.pr-res-table td:first-child { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-row-warn td { background: var(--gold-soft); }
.pr-warn { font-size: 12px; color: #8a5a10; font-weight: 700; }
.pr-ok { font-size: 12px; color: var(--marine-2); font-weight: 700; }
.pr-neg { color: var(--danger); font-weight: 800; }
:root[data-theme="dark"] .pr-warn, :root[data-theme="dark"] .pr-st-update, :root[data-theme="dark"] .pr-pill.is-warn { color: var(--gold); }
:root[data-theme="dark"] .pr-day.is-tomorrow .pr-day-tag { color: #1a1408; }
@media (max-width: 900px) { .pr-layout { grid-template-columns: 1fr; } }
#prFormModal .modal-box { overflow-x: hidden; }
#prFmRoles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
#prFmRoles select, #prFormModal .option-grid select { width: 100%; min-width: 0; }
#prFormModal .sm-preview { max-width: 100%; }
#prEventModal .modal-box { overflow-x: hidden; }
#prEventModal .option-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#prEventModal textarea { font: inherit; }

/* ===== 월별 정산(2026-10-18, monthly.js) ===== */
#monthlyShell .panel { min-width: 0; }
/* 월별 정산 화면 스크롤(2026-10-18, 배포 후 발견): .settle-shell이 overflow:hidden이라 창 높이 800px 정도에서 매입처 표가 창 아래로 넘어가
   표 안에서 끝까지 내려도 마지막 줄이 안 보였다 -> 정산/경비처리처럼 화면 전체 스크롤 + 칸들이 줄어들지 않게. 표 높이도 창 높이에 맞춤
   (표 머리 + 탭이 함께 보이게). 다른 탭(정답지 비교/세금계산서 쇼핑몰/마진쉐어/프리랜서 신고)도 같은 셸이라 같이 고쳐짐. */
#monthlyShell { overflow-y: auto; }
#monthlyShell > * { flex-shrink: 0; }
/* 표 높이는 아래 "엑셀처럼" 블록(.xg-wrap)에서 */
.mo-source-info { font-size: 12.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.mo-unl-name { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-weight: 700; }
.mo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.mo-month { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.mo-month input, .mo-month select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.mo-source { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; flex: 1 1 320px; }
.mo-source b { overflow-wrap: anywhere; }
.mo-source-label { font-size: 12px; color: var(--text-faint); font-weight: 700; }
.mo-export { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.mo-export-result { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--marine-soft); color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mo-h2 { font-size: 15px; margin: 18px 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.mo-h2:first-of-type { margin-top: 6px; }
.mo-sum { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.mo-sum:empty { display: none; }
.mo-sum-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 120px; }
.mo-sum-item span { font-size: 12px; color: var(--text-faint); font-weight: 700; }
.mo-sum-item b { font-size: 17px; font-variant-numeric: tabular-nums; }
.mo-sum-input input { width: 140px; font-size: 15px; font-weight: 700; }
.mo-notes .hint { margin: 2px 0; }
.mo-scroll { max-height: 62vh; overflow: auto; }
.mo-table td, .mo-table th { white-space: nowrap; }
.mo-table td.mo-hints { white-space: normal; min-width: 260px; max-width: 520px; font-size: 12.5px; color: var(--text-soft); }
.mo-hints div + div { margin-top: 3px; }
.mo-table .num { font-variant-numeric: tabular-nums; }
.mo-names { display: block; font-size: 11.5px; color: var(--text-faint); font-weight: 400; white-space: normal; max-width: 260px; }
.mo-bank { max-width: 240px; white-space: normal !important; font-size: 12.5px; }
.mo-note { min-width: 150px; }
.mo-note2 { min-width: 110px; }
.settle-cell.mo-saved { border-color: var(--marine-2); background: var(--marine-soft); }
.mo-ok { color: var(--marine-2); font-weight: 700; }
.mo-bad { color: var(--danger); font-weight: 700; }
.mo-warn { color: #b06f00; font-weight: 700; }
.mo-pill { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); }
.mo-pill.mo-ok { background: var(--marine-soft); }
.mo-pill.mo-bad { background: var(--danger-soft); }
.mo-pill.mo-warn { background: var(--gold-soft); }
tr.mo-unlinked td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.sm-badge.is-warn { background: var(--gold-soft); color: #8a5a10; }
.mo-member-row td { background: var(--surface-2); }
.mo-members { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; white-space: normal; max-width: min(1100px, 70vw); }
.mo-pay-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.mo-pay-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--text-soft); min-width: 0; }
.mo-pay-form input, .mo-pay-form select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; min-width: 0; }
.mo-pay-form .mo-wide { grid-column: span 2; }
.mo-net { grid-column: 1 / -1; font-size: 13.5px; }
.mo-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.mo-inline-select { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.mo-rrn { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mo-bank-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 10px; }
.sm-head-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
  .mo-export { margin-left: 0; }
  .mo-pay-form .mo-wide { grid-column: 1 / -1; }
}

/* 받음/발행 체크(2026-10-18) */
.mo-checkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--marine-soft); }
.mo-checkbar b { font-size: 17px; font-variant-numeric: tabular-nums; }
.mo-checkbar .btn { margin-left: auto; }
.mo-checkbar .btn.is-on { background: var(--marine); color: #fff; border-color: var(--marine); }
.mo-chk-col { min-width: 132px; }
.mo-chk { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.mo-chk input { width: 16px; height: 16px; accent-color: var(--marine-2); }
.mo-chk-date { display: block; margin-top: 4px; width: 128px; font-size: 12px; }
.mo-table tr.is-done td:first-child { box-shadow: inset 3px 0 0 var(--marine-2); }
.mo-table.mo-only-todo tr.is-done, .mo-table.mo-only-todo tr.is-zero, .mo-table.mo-only-todo tr.mo-member-row { display: none; }
.mo-faint { color: var(--text-faint); font-weight: 400; }
#moPayTable td:first-child, #moOwnTable td:first-child, #moTaxTable td:first-child,
#moPayTable th:first-child, #moOwnTable th:first-child, #moTaxTable th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }

/* ===================================================================================== 월별 정산 표를 엑셀처럼(2026-10-18)
   사용자: "엑셀로 보던 게 편하다" -> 정산정리파일 시트처럼 얇은 줄(30px)·칸 격자·연한 파란 머리글·숫자 오른쪽 정렬, 입력 칸은 셀처럼(평소 테두리 없음).
   머리글은 위에, 첫 칸(회사명 등)은 왼쪽에, 합계 줄은 아래에 고정. 표 높이 = 창 높이 - 탭 줄(1366x768에서도 15줄 넘게).
   #monthlyShell 안에서만(ID 선택자라 design-c의 .settle-table 둥근 카드 모양보다 우선). 다크모드는 색 토큰만 바꿈. */
:is(#monthlyShell, #companyDocsShell, .db-modal) {
  --xg-line: #D3DCE4; --xg-head: #DDEBF7; --xg-head-text: #1F3B57; --xg-foot: #EEF4FA; --xg-focus: #2E75B6;
  --xg-done: #EAF5EE; --xg-hover: #F3F8FC; --xg-row-h: 30px;
}
:root[data-theme="dark"] :is(#monthlyShell, #companyDocsShell, .db-modal) {
  --xg-line: #2C4651; --xg-head: #1C3A52; --xg-head-text: #D6E7F5; --xg-foot: #18323E; --xg-focus: #6CB4EE;
  --xg-done: #163A2D; --xg-hover: #1A3440;
}
:is(#monthlyShell, #companyDocsShell, .db-modal) .xg-wrap {
  overflow: auto; max-height: max(320px, calc(100vh - 120px)); margin: 0 0 14px;
  border: 1px solid var(--xg-line); border-radius: 4px; background: var(--surface); padding: 0;
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg {
  border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text);
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg :is(th, td) {
  height: var(--xg-row-h); padding: 0 8px; border: 0; border-radius: 0 !important;
  border-right: 1px solid var(--xg-line); border-bottom: 1px solid var(--xg-line);
  background: var(--surface); color: var(--text); text-align: left; vertical-align: middle;
  white-space: nowrap; line-height: 1.2; box-sizing: border-box;
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg :is(th, td).num { text-align: right; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg thead th {
  position: sticky; top: 0; z-index: 3; height: 32px; text-align: center;
  background: var(--xg-head); color: var(--xg-head-text); font-size: 12.5px; font-weight: 800;
  box-shadow: inset 0 -1px 0 var(--xg-line);
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg thead th.num { text-align: center; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg :is(th, td):first-child {
  position: sticky; left: 0; z-index: 2; max-width: 230px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset -1px 0 0 var(--xg-line);
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg thead th:first-child { z-index: 5; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg tfoot td {
  position: sticky; bottom: 0; z-index: 3; background: var(--xg-foot); font-weight: 800;
  border-top: 1px solid var(--xg-head-text); box-shadow: inset 0 1px 0 var(--xg-head-text);
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg tfoot td:first-child { z-index: 4; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg tbody tr:hover > td { background: var(--xg-hover); }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg tbody tr.is-done > td.mo-chk-col { background: var(--xg-done); }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg tr.mo-unlinked > td:first-child { box-shadow: inset 3px 0 0 var(--gold), inset -1px 0 0 var(--xg-line); }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg tr.is-done > td:first-child { box-shadow: inset 3px 0 0 var(--marine-2), inset -1px 0 0 var(--xg-line); }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.hint { color: var(--text-faint); white-space: normal; height: 44px; }
/* 입력 칸 = 셀 */
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.xg-edit { padding: 0; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .xg-in {
  display: block; width: 100%; min-width: 0; height: calc(var(--xg-row-h) - 1px); margin: 0; padding: 0 8px;
  border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; outline: none; box-shadow: none;
  text-overflow: ellipsis;
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .xg-in.num { text-align: right; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.xg-edit:focus-within { box-shadow: inset 0 0 0 2px var(--xg-focus); background: var(--surface); }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.mo-saved { background: var(--marine-soft) !important; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.xg-edit.num { min-width: 124px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.mo-bank { width: 74px; max-width: 74px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.mo-acct { width: 158px; max-width: 158px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.mo-note { min-width: 170px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.mo-note2 { min-width: 120px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.xg-name { min-width: 150px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg :is(th, td).xg-no { min-width: 44px; width: 44px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .mo-names-inline { margin-left: 6px; font-size: 11.5px; color: var(--text-faint); font-weight: 400; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .sm-badge { font-size: 10.5px; padding: 1px 6px; vertical-align: 1px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .mo-faint { color: var(--text-faint); }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .mo-bad { color: var(--danger); font-weight: 800; }
/* 받음/발행: 체크 + 날짜 한 줄 */
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.mo-chk-col { min-width: 132px; padding: 0 6px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .mo-chk { display: flex; align-items: center; gap: 6px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .mo-chk input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--marine-2); cursor: pointer; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .xg-date {
  width: 118px; height: 24px; padding: 0 4px; border: 0; border-radius: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 12px; outline: none;
}
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .xg-date:focus { box-shadow: inset 0 0 0 2px var(--xg-focus); }
:root[data-theme="dark"] :is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .xg-date { color-scheme: dark; }
/* 줄 끝 작은 글자 버튼(주문 줄/연결/계좌/수정/보기) */
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.xg-acts, :is(#monthlyShell, #companyDocsShell, .db-modal) table.xg th.xg-acts-h { min-width: 120px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.xg-acts { padding: 0 4px; }
:is(#monthlyShell, #companyDocsShell, .db-modal) .xg-link {
  border: 0; background: transparent; color: var(--marine-2); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 3px 6px; border-radius: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
:is(#monthlyShell, #companyDocsShell, .db-modal) .xg-link:hover { background: var(--marine-soft); }
:is(#monthlyShell, #companyDocsShell, .db-modal) .xg-link.is-danger { color: var(--danger); }
:root[data-theme="dark"] :is(#monthlyShell, #companyDocsShell, .db-modal) .xg-link { color: #7FD3C6; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg td.mo-hints { max-width: 460px; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .mo-members { max-width: min(1000px, 70vw); padding: 6px 0; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg tr.mo-member-row td { height: auto; white-space: normal; }
:is(#monthlyShell, #companyDocsShell, .db-modal) table.xg .mo-pill { font-size: 11px; }
/* 눈에 띄는 버튼(쇼핑몰 추가, 자사 회사 목록 고치기, 다른 파일 고르기 ...) */
:is(#monthlyShell, #companyDocsShell, .db-modal, #docboxSettingsPanel) .btn.mo-tool-btn { padding: 10px 18px; font-size: 14px; font-weight: 800; border-radius: 10px; }
:is(#monthlyShell, #companyDocsShell, .db-modal, #docboxSettingsPanel) .btn.mo-tool-btn:not(.btn-primary) { background: var(--surface); color: var(--text); border: 1.5px solid var(--marine-2); }
:is(#monthlyShell, #companyDocsShell, .db-modal, #docboxSettingsPanel) .btn.mo-tool-btn:not(.btn-primary):hover:not(:disabled) { background: var(--marine-soft); }
:is(#monthlyShell, #companyDocsShell, .db-modal, #docboxSettingsPanel) .btn.mo-tool-btn.is-on { background: var(--marine); color: var(--on-marine, #fff); border-color: var(--marine); }
#monthlyShell .mo-h2 .mo-tool-btn { margin-left: 8px; }
/* 요약 칸은 작게(표가 더 보이게) */
#monthlyShell .mo-sum-item { padding: 6px 12px; min-width: 110px; }
#monthlyShell .mo-sum-item b { font-size: 16px; }
#monthlyShell .mo-notes .hint { margin: 1px 0; font-size: 12.5px; }
#monthlyShell .mo-checkbar { padding: 8px 12px; }
/* 요약 칸 차액: .mo-sum-item span(작은 회색 이름표) 규칙이 빨간 차액 글자에도 걸리던 것 */
#monthlyShell .mo-sum-item b span.mo-bad { font-size: inherit; color: var(--danger); font-weight: 800; }

/* ===================================================================================== 회사서류함 필요서류 체크표(2026-10-18)
   줄 = 서류, 칸 = 회사. 월별 정산과 같은 격자(.xg). 칸 = 버튼 하나(누르면 보기/올리기). 올림 = ✅ + 발급일, 2주 안 만료 = 주황, 만료 = 빨강, 필요 없음 = X(회색).
   민감 서류(신분증·등본·인감) 썸네일은 흐리게(.db-blur / .is-sensitive) - 누를 때만 보임. */
#companyDocsShell { overflow-y: auto; }
#companyDocsShell > * { flex-shrink: 0; }
#companyDocsShell #dbTabs { position: sticky; top: 0; z-index: 8; }
:is(#companyDocsShell, .db-modal) { --db-ok: #1E7B4F; --db-warn: #B86A00; --db-warn-soft: #FFF1DB; --db-bad-soft: #FBE3E0; }
:root[data-theme="dark"] :is(#companyDocsShell, .db-modal) { --db-ok: #7BD3A4; --db-warn: #F2B35B; --db-warn-soft: #3A2C14; --db-bad-soft: #3D2220; }
#companyDocsShell .db-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
#companyDocsShell .db-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
#companyDocsShell .db-sum-item { font-size: 14px; color: var(--text-soft); }
#companyDocsShell .db-sum-item b { font-size: 18px; color: var(--text); margin: 0 2px; }
#companyDocsShell .db-sum-bad, #companyDocsShell .db-sum-bad b { color: var(--danger); font-weight: 800; }
#companyDocsShell .db-sum-warn, #companyDocsShell .db-sum-warn b { color: var(--db-warn); font-weight: 800; }
#companyDocsShell .db-legend { display: inline-flex; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--text-faint); flex-wrap: wrap; }
#companyDocsShell .db-lg { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--xg-line); margin-left: 8px; }
#companyDocsShell .db-lg-ok { background: var(--surface); box-shadow: inset 3px 0 0 var(--db-ok); }
#companyDocsShell .db-lg-warn { background: var(--db-warn-soft); }
#companyDocsShell .db-lg-bad { background: var(--db-bad-soft); }
#companyDocsShell .db-legend .db-x { margin-left: 8px; }
#companyDocsShell .db-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
#companyDocsShell .db-grid-panel .hint { margin: 0 0 8px; }
#companyDocsShell .xg-wrap.db-scroll { max-height: max(320px, calc(100vh - 200px)); }
#companyDocsShell table.db-table th.db-type-h, #companyDocsShell table.db-table td.db-type { min-width: 230px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
#companyDocsShell table.db-table th.db-co-h { min-width: 210px; text-align: center; }
#companyDocsShell table.db-table td.db-cell-td { padding: 0; min-width: 210px; }
#companyDocsShell table.db-table .db-cell {
  display: flex; align-items: center; gap: 6px; width: 100%; height: calc(var(--xg-row-h) - 1px); margin: 0; padding: 0 10px;
  background: transparent; border: 0; border-radius: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
#companyDocsShell table.db-table .db-cell:focus-visible, #companyDocsShell table.db-table .db-cell:focus { outline: none; box-shadow: inset 0 0 0 2px var(--xg-focus); }
#companyDocsShell table.db-table td.db-cell-td:hover { background: var(--xg-hover); }
#companyDocsShell table.db-table .db-add { color: var(--text-faint); font-size: 12px; opacity: 0; }
#companyDocsShell table.db-table .db-cell:hover .db-add, #companyDocsShell table.db-table .db-cell:focus .db-add { opacity: 1; }
#companyDocsShell table.db-table td.is-ok { box-shadow: inset 3px 0 0 var(--db-ok); }
#companyDocsShell table.db-table .db-ok { font-size: 13px; }
#companyDocsShell table.db-table .db-date { font-variant-numeric: tabular-nums; }
#companyDocsShell table.db-table td.is-soon, #companyDocsShell table.db-table td.is-soon:hover { background: var(--db-warn-soft); color: var(--db-warn); font-weight: 700; box-shadow: inset 3px 0 0 var(--db-warn); }
#companyDocsShell table.db-table td.is-expired, #companyDocsShell table.db-table td.is-expired:hover { background: var(--db-bad-soft); color: var(--danger); font-weight: 800; box-shadow: inset 3px 0 0 var(--danger); }
#companyDocsShell table.db-table .db-st { font-size: 11.5px; }
#companyDocsShell table.db-table td.is-nn { color: var(--text-faint); }
:is(#companyDocsShell, .db-modal) .db-x { color: var(--text-faint); font-weight: 900; font-size: 14px; margin-right: 2px; }
:is(#companyDocsShell, .db-modal) .db-faint { color: var(--text-faint); font-weight: 400; font-size: 12px; }
#companyDocsShell table.db-table .db-more { margin-left: auto; font-size: 11px; color: var(--text-soft); background: var(--surface-2); border-radius: 8px; padding: 0 6px; }
#companyDocsShell table.db-table td.db-text-td { position: relative; min-width: 210px; }
#companyDocsShell table.db-table td.db-text-td .db-text { padding-right: 30px; }
#companyDocsShell table.db-table .db-text-more { position: absolute; right: 0; top: 0; width: 28px; padding: 0; justify-content: center; color: var(--text-faint); }
:is(#companyDocsShell, .db-modal) .db-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  color: var(--text-soft); background: var(--surface-2); vertical-align: 1px; }
:is(#companyDocsShell, .db-modal) .db-tag-s { color: var(--danger); background: var(--danger-soft); }
#companyDocsShell .db-unassigned { border: 1.5px dashed var(--gold); }
#companyDocsShell .db-unassigned h2 { font-size: 15px; }
#companyDocsShell .db-un-list { display: flex; flex-direction: column; gap: 6px; }
#companyDocsShell .db-un-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#companyDocsShell .db-un-item .btn { margin-left: auto; padding: 6px 12px; font-size: 13px; }

/* 칸 하나(보기/올리기) */
.db-modal .db-nn { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 14px; }
.db-modal .db-docs { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; }
.db-modal .db-doc { display: grid; grid-template-columns: 104px 1fr auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--xg-line); border-radius: 6px; }
.db-modal .db-doc.is-expired { background: var(--db-bad-soft); border-color: var(--danger); }
.db-modal .db-doc.is-expired .db-st { color: var(--danger); font-weight: 800; }
.db-modal .db-doc.is-soon { background: var(--db-warn-soft); border-color: var(--db-warn); }
.db-modal .db-doc.is-soon .db-st { color: var(--db-warn); font-weight: 800; }
.db-modal .db-thumb { position: relative; width: 104px; height: 74px; padding: 0; border: 1px solid var(--xg-line); border-radius: 4px; overflow: hidden;
  background: var(--surface-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.db-modal .db-thumb img { width: 100%; height: 100%; object-fit: cover; }
.db-modal .db-thumb.is-sensitive img, .db-blur { filter: blur(9px) saturate(.6); transform: scale(1.1); }
.db-modal .db-thumb.is-sensitive.is-shown img { filter: none; transform: none; }
.db-modal .db-thumb.is-sensitive.is-shown .db-blur-tag { display: none; }
.db-blur-tag { position: absolute; inset: auto 0 0 0; padding: 2px 4px; font-size: 10.5px; font-weight: 800; text-align: center; color: #fff; background: rgba(20, 34, 38, .72); }
.doc-card-thumb.is-sensitive { position: relative; overflow: hidden; }
.db-modal .db-doc-name { font-weight: 800; margin-bottom: 4px; }
.db-modal .db-doc-name .db-tag { margin: 0 6px 0 0; color: var(--db-ok); }
.db-modal .db-doc-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--text-soft); margin-bottom: 2px; }
.db-modal .db-doc-dates .xg-date { height: 28px; padding: 0 6px; border: 1px solid var(--xg-line); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; }
:root[data-theme="dark"] .db-modal .xg-date, :root[data-theme="dark"] .db-modal input[type="date"] { color-scheme: dark; }
.db-modal .db-doc-acts { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.db-modal .db-upload { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--xg-line); }
.db-modal .db-upload h3, .db-modal .db-manage h3 { font-size: 14px; margin: 0 0 8px; }
.db-modal .db-upload-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.db-modal .db-file-name { font-size: 13px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-modal .db-upload-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-modal .xg-link { padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--marine-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.db-modal .xg-link:hover { background: var(--marine-soft); }
.db-modal .xg-link.is-danger { color: var(--danger); }
.db-modal .xg-link:disabled { opacity: .35; cursor: default; }
:root[data-theme="dark"] .db-modal .xg-link { color: #7FD3C6; }
:root[data-theme="dark"] .db-modal .xg-link.is-danger { color: var(--danger); }

/* 묶어서 보내기 */
.db-modal .db-bundle-company { max-width: 320px; }
.db-modal .db-bundle-tools { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.db-modal .xg-wrap.db-bundle-wrap { max-height: 42vh; }
.db-modal table.xg tr.is-expired td { color: var(--danger); }
.db-modal table.xg tr.is-soon td.db-st { color: var(--db-warn); font-weight: 700; }
.db-modal .db-bchk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; }
.db-modal .db-bchk input { width: 16px; height: 16px; accent-color: var(--marine-2); }
.db-modal td.db-fname { color: var(--text-soft); font-size: 12.5px; }
.db-modal .db-bundle-acts { display: flex; gap: 8px; }
.db-modal .db-bundle-result { margin: 10px 0; padding: 10px 12px; border: 1.5px solid var(--db-ok); border-radius: 8px; background: var(--surface); }
.db-modal .db-res-head { display: flex; align-items: center; gap: 10px; color: var(--db-ok); }
.db-modal .db-res-head .btn { margin-left: auto; padding: 6px 12px; font-size: 13px; }
.db-modal .db-res-path { font-size: 12.5px; color: var(--text-soft); margin: 4px 0; word-break: break-all; }
.db-modal .db-bundle-result ul { margin: 4px 0 0; padding-left: 20px; font-size: 13px; columns: 2; }

/* 회사·서류 목록 고치기 */
.db-modal .modal-box-wide { max-width: min(960px, 94vw); }
.db-modal .db-manage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.db-modal .db-manage .xg-wrap { max-height: 30vh; }
.db-modal .db-manage .db-type-wrap { max-height: 42vh; }
.db-modal .db-manage table.xg { width: 100%; }
.db-modal .db-manage td.db-vm { width: 110px; }
.db-modal .db-manage td.db-chk-td { text-align: center; width: 56px; }
.db-modal .db-manage td.db-chk-td input { width: 16px; height: 16px; accent-color: var(--marine-2); }
.db-modal .db-add-row { display: flex; gap: 8px; }
.db-modal .db-add-row input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }

/* 허브 카드 "만료 서류 N개" */
.hub-card-alert { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hub-card-alert span { padding: 2px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 800; }
.hub-alert-bad { color: #fff; background: var(--danger); }
.hub-alert-warn { color: #6B3E00; background: var(--gold-soft); border: 1px solid var(--gold); }
:root[data-theme="dark"] .hub-alert-warn { color: var(--gold); }
@media (max-width: 900px) { .db-modal .db-upload-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 사이트 로고(2026-10-20)
   동그란 로고 + 얇은 테두리(흰 바탕 로고도 동그라미가 보이게, 다크모드는 밝은 테두리). 로고 없으면 글자 동그라미(.is-text). */
:root { --logo-ring: rgba(20, 40, 70, 0.18); --logo-bg: #fff; }
:root[data-theme="dark"] { --logo-ring: rgba(235, 242, 255, 0.55); --logo-bg: #fff; }
.site-logo {
  --logo: 22px;
  display: inline-block; flex: none; width: var(--logo); height: var(--logo); border-radius: 50%;
  object-fit: cover; background: var(--logo-bg); box-shadow: 0 0 0 1px var(--logo-ring); vertical-align: middle;
}
.site-logo.is-text {
  display: inline-grid; place-items: center; background: var(--logo-tint, #4f7d8f); color: #fff;
  font-weight: 800; font-size: calc(var(--logo) * 0.46); line-height: 1; user-select: none;
}
.site-logo.is-text::before { content: attr(data-ch); }
.site-card-icon .site-logo { --logo: 46px; }
.pr-site-item { flex-direction: row; align-items: center; gap: 9px; }
.pr-site-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-site-logo { --logo: 28px; }
.pr-detail-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-detail-logo { --logo: 40px; }
.pr-logo-actions { flex-wrap: wrap; justify-content: flex-end; }
.pr-dl-site { display: inline-flex; align-items: center; gap: 5px; }
.pr-dl-logo { --logo: 18px; }

/* 제안 마감 보드(2026-10-22): 요일 7칸 - 칸이 좁으면(1366x768) 가로 스크롤 대신 2줄(4 + 3). 색은 마감이 급한 정도(D-day)와 회사 색에만. */
.pr-board-head { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-board-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-board-title h2 { margin: 0; }
.pr-board-range { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.pr-board-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-bsum { display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); font-size: 13px; white-space: nowrap; }
.pr-bsum b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr-bsum small { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.pr-bsum.is-mine { box-shadow: inset 0 0 0 2px var(--co); }
.pr-bsum.is-mine b { color: var(--co); }
.pr-board-nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.pr-board-legend { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--text-soft); margin: 0 0 12px; }
.pr-leg-co { display: inline-flex; align-items: center; gap: 5px; }
.pr-leg-co i { width: 10px; height: 10px; border-radius: 50%; background: var(--co); }
.pr-leg-sep { width: 1px; height: 14px; background: var(--border); margin: 0 4px; }
.pr-leg-chip { margin-left: 6px; }

.pr-board-panel { container-type: inline-size; }
/* 2026-10-22 요일은 세로 7줄(왼쪽 요일·날짜), 그날 카드는 가로로 - 펼친 줄만 카드 전부, 접힌 줄은 한 줄 요약, 마감 없는 날은 얇은 줄 */
.pr-board { display: flex; flex-direction: column; gap: 6px; }
.pr-bday { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; min-width: 0;
  padding: 8px 12px; border: 0; border-radius: 14px; background: var(--surface-2); font: inherit; color: var(--text); text-align: left; }
.pr-bday.is-today { background: var(--marine-soft); box-shadow: inset 0 0 0 2px var(--marine); }
.pr-bday.is-past { opacity: 0.6; }
.pr-bday.is-none { padding: 3px 12px; background: transparent; border-radius: 10px; }
.pr-bday.is-none.is-today { background: var(--marine-soft); }
.pr-row-none { font-size: 12px; color: var(--text-faint); }
.pr-bday.is-folded { cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease; }
.pr-bday.is-folded:hover { background: var(--surface); box-shadow: var(--lift); }
.pr-bday.is-folded.is-today:hover { box-shadow: inset 0 0 0 2px var(--marine), var(--lift); }
.pr-bday.is-folded:focus-visible, .pr-row-head:focus-visible, .pr-strip-arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pr-bday.is-open { align-items: stretch; padding: 10px 12px; }
.pr-row-day { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.pr-row-day b { font-size: 15px; }
.pr-row-day > span { font-size: 12.5px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.pr-row-day em { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--marine); color: var(--on-marine); align-self: center; }
.pr-bday.is-none .pr-row-day b { font-size: 13px; color: var(--text-soft); }
.pr-row-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 2px; border: 0; border-radius: 10px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pr-row-n { flex: none; font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.pr-row-n b { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pr-row-chev { flex: none; font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--marine); }
.pr-row-head:hover .pr-row-chev, .pr-bday.is-folded:hover .pr-row-chev { background: var(--marine); color: var(--on-marine); }
.pr-row-sum { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pr-row-sum .pr-row-chev { margin-left: auto; }
.pr-row-logos { display: flex; align-items: center; flex: none; }
.pr-row-logo { --logo: 20px; margin-right: -4px; }
.pr-row-more { margin-left: 8px; font-size: 11px; font-weight: 800; color: var(--text-faint); }
.pr-row-first { flex: 0 1 auto; min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.pr-row-first small { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.pr-fold-todo { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E8892B; }
:root[data-theme="dark"] .pr-fold-todo { background: #F2A65A; }
/* 펼친 줄: 카드 가로로, 많으면 그 줄만 가로 스크롤 + 화살표 */
.pr-row-strip { position: relative; min-width: 0; }
.pr-bday-cards { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 2px; scrollbar-width: thin; padding: 2px 2px 4px; }
.pr-bday-cards > .pr-bcard { flex: 0 0 236px; scroll-snap-align: start; }
.pr-row-strip.has-more .pr-bday-cards { padding-right: 24px; }
.pr-strip-arrow { position: absolute; top: calc(50% - 4px); transform: translateY(-50%); z-index: 1; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: var(--lift); }
.pr-strip-arrow[hidden] { display: none; }
.pr-strip-arrow.is-prev { left: -8px; }
.pr-strip-arrow.is-next { right: -8px; }
.pr-strip-arrow:hover { background: var(--marine); color: var(--on-marine); }
.pr-bday.is-open .pr-bcard { animation: pr-open 0.18s ease-out both; }
@keyframes pr-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pr-bday.is-open .pr-bcard { animation: none; } .pr-bday-cards { scroll-behavior: auto; } }
@container (max-width: 640px) { .pr-bday { grid-template-columns: 1fr; gap: 6px; } .pr-row-head { flex-direction: row; align-items: center; } .pr-row-logos { display: none; } }
.pr-bday.is-today { background: var(--marine-soft); box-shadow: inset 0 0 0 2px var(--marine); }
.pr-bday.is-past { opacity: 0.6; }
.pr-bday-head { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px; font-size: 13px; color: var(--text-soft); }
.pr-bday-head b { font-size: 15px; color: var(--text); }
.pr-bday-head em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--marine); color: var(--on-marine); }
.pr-bday-n { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--text-faint); }
.pr-bday-empty { margin: 4px; font-size: 12px; color: var(--text-faint); }
.pr-board-empty { grid-column: 1 / -1; }

.pr-bcard { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  padding: 10px 11px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 0 rgba(19, 38, 46, 0.05), 0 4px 12px rgba(19, 38, 46, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease; }
.pr-bcard:hover { transform: translateY(-1px); box-shadow: var(--lift); }
.pr-bcard:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pr-bcard.is-past { opacity: 0.7; }
.pr-bcard-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pr-bcard-site { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-bcard-event { font-size: 14px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.pr-bcard-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.pr-bcard-md { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-dd { flex: none; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.pr-dd.is-today { background: var(--danger); color: #FFFFFF; }
.pr-dd.is-tomorrow { background: #E8892B; color: #FFFFFF; }
.pr-dd.is-past { background: transparent; color: var(--text-faint); }
:root[data-theme="dark"] .pr-dd.is-today, :root[data-theme="dark"] .pr-dd.is-tomorrow { color: #0E1C23; }
:root[data-theme="dark"] .pr-dd.is-tomorrow { background: #F2A65A; }

/* 회사 칩: 제안함 = 회사 색 채움 + ✓, 안 함 = 회사 색 테두리 빈칸, 입점 안 함 = 회색 – */
.pr-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.pr-chip { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1; }
.pr-chip i { font-style: normal; min-width: 9px; text-align: center; }
.pr-chip.is-done { background: var(--co); color: #FFFFFF; }
.pr-chip.is-todo { box-shadow: inset 0 0 0 1.5px var(--co); color: var(--co); }
.pr-chip.is-todo i { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--co); }
.pr-chip.is-none { background: var(--surface-2); color: var(--text-faint); }
.pr-chip.is-cur { outline: 2px solid var(--gold); outline-offset: 1px; }
:root[data-theme="dark"] .pr-chip.is-done { color: #0E1C23; }
:root[data-theme="dark"] .pr-chip.is-todo { color: var(--text); }
.pr-bcard.is-mytodo { box-shadow: inset 3px 0 0 var(--gold), 0 4px 12px rgba(19, 38, 46, 0.06); }

/* 행사 정보: 입점한 회사 체크 */
.pr-co-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-co-check { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pr-co-check input { margin: 0; accent-color: var(--co); width: 16px; height: 16px; }
.pr-co-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--co); }
.pr-co-check:has(input:checked) { box-shadow: inset 0 0 0 2px var(--co); }
.dsn-kpi-logo { --logo: 18px; margin-right: 4px; vertical-align: -4px; }
.dsn-kpi-logos { display: inline-flex; margin-right: 6px; vertical-align: -4px; }
.dsn-kpi-logos .dsn-kpi-logo { margin-right: -5px; vertical-align: 0; }
.dsn-kpi-logos .dsn-kpi-logo:last-child { margin-right: 0; }
.pr-logo-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px;
  border: 1px dashed var(--marine-2); border-radius: var(--radius-sm); background: var(--marine-soft); font-size: 13px;
}
.pr-logo-folder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-logo-folder .hint { margin: 0; word-break: break-all; }
.pr-logo-scroll { max-height: max(180px, calc(100vh - 440px)); }
.pr-logo-table td { vertical-align: middle; }
.pr-logo-table select { min-width: 160px; }
.pr-logo-table tr.is-off td:not(:first-child) { opacity: 0.62; }
.pr-logo-thumb { --logo: 34px; }
.pr-logo-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.pr-logo-lists > div { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; }
.pr-logo-lists h4 { margin: 0 0 4px; font-size: 13.5px; }
.pr-logo-lists p { margin: 2px 0; font-size: 13px; }

/* ===================================================================================== 회사서류함 회사별(2026-10-21)
   회사 나눈 폴더면 지금 회사 하나만: 위 회사 표시(회사 색 동그라미 - 왼쪽 메뉴 배지와 같은 색) + 표 = 서류 | 상태 | 발급일 | 만료 | 파일 보기(넓게).
   줄 왼쪽 띠 = 상태(있음 초록 / 2주 안 주황 / 만료 빨강). */
#companyDocsShell .db-co-stamp { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; --co: var(--marine); }
#companyDocsShell .db-co-mark {
  flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--co); color: #fff; font-size: 20px; font-weight: 800;
}
#companyDocsShell .db-co-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#companyDocsShell .db-co-text b { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
#companyDocsShell .db-co-text small { font-size: 12.5px; color: var(--text-faint); }
#companyDocsShell .db-scope-msg { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--db-warn-soft); color: var(--db-warn); font-weight: 700; font-size: 13.5px; line-height: 1.6; }
#companyDocsShell table.db-table.is-single { width: 100%; table-layout: fixed; }
#companyDocsShell table.db-table.is-single :is(th, td) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#companyDocsShell table.db-table.is-single th.db-type-h, #companyDocsShell table.db-table.is-single td.db-type { width: 27%; min-width: 0; max-width: none; }
#companyDocsShell table.db-table.is-single .db-s-st { width: 13%; }
#companyDocsShell table.db-table.is-single .db-s-d { width: 15%; font-variant-numeric: tabular-nums; }
#companyDocsShell table.db-table.is-single .db-s-file { width: 30%; }
#companyDocsShell table.db-table.is-single tbody tr.db-row { cursor: pointer; }
#companyDocsShell table.db-table.is-single tbody tr.db-row > td { height: 46px; }
#companyDocsShell table.db-table.is-single tbody tr.is-ok > td:first-child { box-shadow: inset 4px 0 0 var(--db-ok), inset -1px 0 0 var(--xg-line); }
#companyDocsShell table.db-table.is-single tbody tr.is-soon > td { background: var(--db-warn-soft); }
#companyDocsShell table.db-table.is-single tbody tr.is-soon > td:first-child { box-shadow: inset 4px 0 0 var(--db-warn), inset -1px 0 0 var(--xg-line); }
#companyDocsShell table.db-table.is-single tbody tr.is-expired > td { background: var(--db-bad-soft); }
#companyDocsShell table.db-table.is-single tbody tr.is-expired > td:first-child { box-shadow: inset 4px 0 0 var(--danger), inset -1px 0 0 var(--xg-line); }
#companyDocsShell table.db-table.is-single tbody tr.is-nn > td { color: var(--text-faint); }
#companyDocsShell table.db-table.is-single td.db-s-file { padding: 0 8px 0 0; }
#companyDocsShell table.db-table.is-single .db-file-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#companyDocsShell table.db-table.is-single .db-file-row .db-cell { flex: 1 1 auto; min-width: 0; }
#companyDocsShell table.db-table.is-single .db-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#companyDocsShell table.db-table.is-single .db-file-ico { flex: none; }
#companyDocsShell table.db-table.is-single .db-view-btn { flex: none; padding: 4px 12px; font-size: 12.5px; }
#companyDocsShell table.db-table.is-single .db-add { opacity: 1; color: var(--marine-2); font-weight: 700; }
#companyDocsShell .db-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--text-faint); }
#companyDocsShell .db-pill.is-ok { background: color-mix(in srgb, var(--db-ok) 14%, var(--surface)); color: var(--db-ok); }
#companyDocsShell .db-pill.is-warn { background: var(--surface); color: var(--db-warn); box-shadow: inset 0 0 0 1.5px var(--db-warn); }
#companyDocsShell .db-pill.is-bad { background: var(--danger); color: #fff; }

/* ===================================================================================== 회사서류함 거래처자료(2026-10-21 마무리)
   거래처 카드 = 행사상품제안 사이트 카드 모양(첫 글자 동그라미 + 이름 + 서류 수). 오른쪽 위 점: 빨강 = 만료, 주황 = 2주 안에 만료.
   숨긴 거래처는 흐리게 + "숨김". 카드를 누르면 그 거래처 서류 표(체크표의 한 회사 표와 같은 모양). */
#companyDocsShell .db-pt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; }
#companyDocsShell .db-pt-search { position: relative; flex: 1 1 320px; max-width: 460px; }
#companyDocsShell .db-pt-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
#companyDocsShell .db-pt-search input {
  width: 100%; height: 42px; padding: 0 16px 0 42px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
}
#companyDocsShell .db-pt-search input:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 4px var(--marine-soft); }
#companyDocsShell .db-pt-sum { margin-left: auto; font-size: 13px; color: var(--text-faint); }
#companyDocsShell .db-pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
#companyDocsShell .db-pt-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100%; min-width: 0;
  padding: 20px 12px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text);
  font: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
:root[data-design="c"] #companyDocsShell .db-pt-card { border: 0; box-shadow: var(--lift); }
#companyDocsShell .db-pt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
#companyDocsShell .db-pt-card:focus-visible { outline: 3px solid var(--marine); outline-offset: 2px; }
#companyDocsShell .db-pt-card.is-hidden { opacity: 0.55; }
#companyDocsShell .db-pt-mark .site-logo { --logo: 46px; }
#companyDocsShell .db-pt-mark.is-big .site-logo { --logo: 52px; }
#companyDocsShell .db-pt-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
#companyDocsShell .db-pt-sub { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-soft); }
#companyDocsShell .db-pt-card.is-empty .db-pt-sub { color: var(--text-faint); }
#companyDocsShell .db-pt-tag { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); }
#companyDocsShell .db-pt-tag.is-hidden { background: var(--p-grey, var(--surface-2)); }
#companyDocsShell .db-pt-dot { position: absolute; top: 12px; right: 12px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
#companyDocsShell .db-pt-dot.is-bad { background: var(--danger); }
#companyDocsShell .db-pt-dot.is-warn { background: var(--db-warn); }
#companyDocsShell .db-pt-empty { grid-column: 1 / -1; padding: 24px 0; text-align: center; }
#companyDocsShell .db-pt-detail-top { display: flex; align-items: center; gap: 18px; flex: 1 1 100%; }
#companyDocsShell .db-pt-detail-top .db-co-stamp { flex: 1 1 auto; }
#companyDocsShell .db-pt-addtype { align-items: center; }
#companyDocsShell .db-pt-addtype input { height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; min-width: 190px; }
#companyDocsShell .db-pt-un { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#companyDocsShell .db-pt-un select { max-width: 200px; }
#dbPartnerTable { width: 100%; }

/* 배수 칸(2026-10-22): 원가표 상품을 고르는 곳마다 "× 배수" + 무게·개수 비교 추천(파랑) / 경고(노랑) */
.confirm-mult-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mult-x { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--text-soft); white-space: nowrap; }
.mult-x .confirm-mult-input { width: 70px; text-align: right; font-weight: 800; }
.confirm-mult-hint { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; line-height: 1.4; }
.confirm-mult-hint span { font-weight: 600; opacity: 0.85; }
.confirm-mult-hint.is-suggest { background: var(--marine-soft); color: var(--marine-2); }
.confirm-mult-hint.is-warn { background: var(--gold-soft); color: #7a5200; box-shadow: inset 0 0 0 1.5px var(--gold); }
:root[data-theme="dark"] .confirm-mult-hint.is-warn { color: var(--gold); }
.confirm-mult-hint:not(.is-suggest):not(.is-warn) { color: var(--text-soft); }
.code-pick-row .confirm-mult-line { margin-top: 0; }
.mult-badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--gold-soft); color: #7a5200; white-space: nowrap; }
:root[data-theme="dark"] .mult-badge { color: var(--gold); }
.oc-mult-arrow { color: var(--text-faint); font-weight: 800; }
.mult-warn-box { margin: 12px 0; }
.mult-warn-scroll { max-height: 360px; overflow: auto; }
.mult-warn-table { min-width: 0; width: 100%; }
.mult-warn-table td { white-space: normal; vertical-align: middle; }
.mult-warn-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mult-warn-act .confirm-mult-line { margin-top: 0; }
.mult-warn-text { color: #7a5200; font-weight: 700; font-size: 12.5px; margin-top: 3px; }
:root[data-theme="dark"] .mult-warn-text { color: var(--gold); }
.mult-warn-ok { display: block; margin: 6px 0; }
.profit-mult { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--gold-soft); font-size: 13px; }

/* ================================================================================================================
   계정 관리(2026-10-22): 로그인 화면 가입 요청·비번 바꾸기 + 설정 계정 관리·작업 기록. 디자인 C "아침 부두" 토큰 그대로.
   눈에 띄는 것은 하나 - 임시 비밀번호 글자 타일(직원에게 불러 주기 쉽게). 나머지는 조용히.
   ================================================================================================================ */
.auth-lead { margin: -10px 0 20px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.auth-switch-sub { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-faint); }
.ac-hint-inline { font-size: 11.5px; font-weight: 600; color: var(--text-faint); }

/* 가입 요청: 카드를 넓게(두 칸), 768 높이에서는 바탕이 스크롤 */
#authShell { overflow-y: auto; }
:root[data-design="c"] .harbor-shell .auth-card.is-wide { max-width: 640px; }
#authShell .auth-card.is-wide { margin: 8px 0; }
.ac-req .auth-lead { text-align: left; margin: -8px 0 16px; }
.ac-req h1 { text-align: left !important; margin-bottom: 14px !important; }
.ac-req-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.ac-req-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr); }
.ac-req-grid .field { min-width: 0; }
.ac-req-grid .field input { width: 100%; min-width: 0; box-sizing: border-box; }
.ac-req-emer .field input, .ac-emer-row .field input { background: var(--surface); }
.ac-span2 { grid-column: 1 / -1; }
.ac-req .field, .ac-form .field { margin-bottom: 12px; }
:root[data-design="c"] .harbor-shell .ac-req .field input { min-height: 42px; }
.ac-req-emer { min-width: 0; margin: 4px 0 6px; padding: 12px 14px 2px; border: 0; border-radius: 16px; background: var(--surface-2); }
.ac-req-emer > .ac-req-grid { clear: both; }
.ac-req-emer legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 800; color: var(--text); }
.ac-req-emer legend small { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.ac-req-co { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 14px; }
.ac-req-label { font-size: 13px; font-weight: 800; color: var(--text); }
.ac-co-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-co-pick { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 6px; border-radius: 999px; background: var(--surface-2);
  font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; transition: box-shadow 0.12s ease, background 0.12s ease; }
.ac-co-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ac-co-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--co);
  font-size: 12px; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--co); }
.ac-co-pick:has(input:checked) { background: color-mix(in srgb, var(--co) 14%, var(--surface)); box-shadow: inset 0 0 0 2px var(--co); }
.ac-co-pick:has(input:checked) .ac-co-dot { background: var(--co); color: #FFFFFF; }
.ac-co-pick:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.ac-co-pick:has(input:disabled) { cursor: default; opacity: 0.75; }
.ac-agree { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); cursor: pointer; }
.ac-agree input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marine); }
.ac-agree span { display: flex; flex-direction: column; gap: 3px; }
.ac-agree b { font-size: 13.5px; color: var(--text); }
.ac-agree small { font-size: 12px; line-height: 1.5; color: var(--text-soft); }
.ac-req-done { text-align: center; }
.ac-done-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 16px; border-radius: 50%; background: var(--marine-soft);
  color: var(--marine); font-size: 30px; font-weight: 800; box-shadow: inset 0 0 0 3px var(--marine); }

/* 역할 표시 */
.ac-role-chip { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: var(--surface-2); color: var(--text-soft); vertical-align: 1px; }
.ac-role-chip.is-master { background: var(--gold-soft); color: #8A5A00; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
:root[data-theme="dark"] .ac-role-chip.is-master { color: var(--gold); }
.ac-mypw { margin: 4px 0 14px; }
.ac-mypw summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--marine-2); }
.ac-mypw-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ac-mypw-row .field { margin: 0; min-width: 170px; }

/* 계정 관리 */
.ac-panel h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 15px; }
.ac-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--gold);
  color: #13262E; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ac-count.is-muted, .ac-pending.is-empty .ac-count { background: var(--surface-2); color: var(--text-soft); }
.ac-show-off { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.ac-req-list { display: grid; gap: 8px; }
.ac-req-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: 16px; background: var(--gold-soft); box-shadow: inset 4px 0 0 var(--gold); }
.ac-req-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ac-req-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ac-req-who b { font-size: 14.5px; }
.ac-req-who small { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ac-req-cos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-req-cos-label { font-size: 11.5px; font-weight: 700; color: var(--text-faint); }
.ac-req-btns { display: flex; gap: 6px; }
.ac-avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--marine); color: var(--on-marine);
  font-size: 15px; font-weight: 800; }
.ac-avatar.is-sm { width: 28px; height: 28px; font-size: 13px; }
.ac-avatar.is-xs { width: 22px; height: 22px; font-size: 11px; }
.ac-empty { margin: 4px 0; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: 13px; color: var(--text-soft); }
.ac-co-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--co) 12%, var(--surface));
  font-size: 12px; font-weight: 800; color: var(--text); white-space: nowrap; }
.ac-co-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--co); }
.ac-co-chip + .ac-co-chip { margin-left: 4px; }
.ac-table th, .ac-table td { vertical-align: middle; white-space: normal; }
.ac-name-cell { display: flex; flex-direction: column; gap: 2px; }
.ac-name-cell .ac-id { margin-left: 38px; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ac-table tr.is-off td { color: var(--text-faint); }
.ac-name-btn { display: inline-flex; align-items: center; gap: 8px; padding: 2px 6px 2px 2px; border: 0; border-radius: 999px; background: none; font: inherit;
  color: var(--text); cursor: pointer; text-align: left; }
.ac-name-btn:hover { background: var(--marine-soft); }
.ac-name-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ac-name-btn b { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 25%, transparent); text-underline-offset: 3px; }
.ac-me { font-size: 11px; font-weight: 800; color: var(--marine-2); }
.ac-mono { font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap !important; }
.ac-table .ac-faint { white-space: nowrap; }
.ac-faint { color: var(--text-faint); }
.ac-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.ac-pill + .ac-pill { margin-left: 4px; }
.ac-pill.is-on { background: var(--marine-soft); color: var(--marine); }
.ac-pill.is-off { background: var(--surface-2); color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ac-pill.is-lock { background: var(--danger-soft); color: var(--danger); }
.ac-pill.is-wait { background: var(--gold-soft); color: #8A5A00; }
.ac-pill.is-due { background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .ac-pill.is-wait { color: var(--gold); }
.ac-danger { color: var(--danger) !important; }

/* 사람 창 */
.modal-box.ac-modal { max-width: 620px; }
.ac-modal-head { margin-bottom: 14px; }
.ac-modal-head h2 { margin: 0 0 4px; }
.ac-modal-sub { font-size: 12.5px; color: var(--text-soft); }
.ac-form .field input:disabled { background: var(--surface-2); color: var(--text); opacity: 1; -webkit-text-fill-color: var(--text); }
.ac-emer-row { padding: 12px 12px 0; margin-bottom: 4px; border-radius: 14px; background: var(--surface-2); }
.ac-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.ac-actions-label { margin-right: 4px; font-size: 12px; font-weight: 800; color: var(--text-faint); }

/* 임시 비밀번호: 글자 타일 */
.modal-box.ac-temp { max-width: 460px; text-align: center; }
.ac-ticket { margin: 16px 0 12px; padding: 18px 16px 16px; border-radius: 20px; background: var(--marine); color: var(--on-marine);
  display: grid; gap: 14px; position: relative; }
.ac-ticket::before, .ac-ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  transform: translateY(-50%); }
.ac-ticket::before { left: -9px; }
.ac-ticket::after { right: -9px; }
.ac-ticket div { display: grid; gap: 6px; }
.ac-ticket dt { font-size: 12px; font-weight: 700; opacity: 0.75; }
.ac-ticket dd { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.5px; }
.ac-pw-tiles { display: flex; justify-content: center; gap: 6px; }
.ac-pw-tiles span { display: grid; place-items: center; width: 36px; height: 44px; border-radius: 10px; background: var(--surface); color: var(--text);
  font-size: 24px; font-weight: 800; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); }
.ac-temp-note { margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
.ac-temp .settle-step-actions { justify-content: center; }

/* 작업 기록 */
.ac-audit-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ac-audit-filters .field { margin: 0; min-width: 130px; }
.ac-audit-filters select { min-width: 140px; }
.ac-audit-quick { display: flex; gap: 4px; }
.ac-audit-quick .is-on { background: var(--marine); color: var(--on-marine); }
.ac-audit-list { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.ac-audit-day { position: sticky; top: 0; z-index: 1; margin: 10px 0 4px; padding: 6px 2px; font-size: 12.5px; font-weight: 800; color: var(--text-soft);
  background: var(--surface); border-bottom: 1px solid var(--border); }
.ac-audit-day:first-child { margin-top: 0; }
.ac-audit-row { display: grid; grid-template-columns: 46px minmax(90px, 140px) 64px 104px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 13px; }
.ac-audit-time { font-variant-numeric: tabular-nums; color: var(--text-faint); font-weight: 700; }
.ac-audit-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-audit-kind { justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--surface-2); color: var(--text-soft); white-space: nowrap; }
.kind-login .ac-audit-kind { background: var(--p-sky); }
.kind-account .ac-audit-kind { background: var(--gold-soft); }
.kind-order .ac-audit-kind, .kind-purchase .ac-audit-kind { background: var(--p-mint); }
.kind-settle .ac-audit-kind, .kind-cost .ac-audit-kind { background: var(--p-peach); }
.kind-mapping .ac-audit-kind { background: var(--p-lilac); }
.kind-docs .ac-audit-kind, .kind-invoice .ac-audit-kind { background: var(--p-lemon); }
:root[data-theme="dark"] .ac-audit-kind { color: var(--text); }
.ac-audit-act { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ac-audit-act b { flex: none; font-weight: 700; }
.ac-audit-act small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font-size: 12px; }
.ac-audit-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* 직원에게는 고급 설정 숨김(settings_nav.js) */
#section-settings .set-role-off { display: none !important; }

@media (max-width: 720px) {
  .ac-req-grid, .ac-req-grid-3 { grid-template-columns: 1fr; }
  .ac-req-card { grid-template-columns: 1fr; }
  .ac-audit-row { grid-template-columns: 46px 1fr; }
  .ac-audit-co, .ac-audit-kind { display: none; }
}

/* ================================================================================================================
   전체 정리 1차(2026-10-22): 역할 3단계 + 매일 하는 일 한 길로. 디자인 C "아침 부두" 토큰 그대로.
   눈에 띄는 것은 "오늘 할 일" 띠 하나 - 부두 표지판처럼 번호가 이어진 한 줄. 나머지는 조용히.
   ================================================================================================================ */

/* 역할: data-roles="master ceo"처럼 적은 것만 그 역할에게 보임(없으면 모두). 서버도 같은 규칙(access.py) */
:root[data-role="staff"] [data-roles]:not([data-roles~="staff"]),
:root[data-role="ceo"] [data-roles]:not([data-roles~="ceo"]),
:root[data-role="master"] [data-roles]:not([data-roles~="master"]),
:root:not([data-role]) [data-roles="staff"],
:root[data-role=""] [data-roles="staff"] { display: none !important; }
/* 직원: 공유 데이터를 고치는 버튼·처음 설정 버튼은 안 보임(상품 연결 고르기만 함) */
:root[data-role="staff"] :is(.confirm-addnew-btn, .oc-open-mapping-btn, .oc-new-source-btn, .oc-ch-wizard-btn, #ocCostChangeBtn,
  #ocLedgerFolderBtn, #naverKeyBtn, #prImportBtn, #prNewSiteBtn, #prLogoImportBtn, #prLogoHint, #section-promo [data-act],
  #dbManageBtn, #dbPartnerAddTypeBtn, #dbPartnerNewType, #dbPartnerUnassigned [data-un-save], #dbCellDocs [data-move], #dbCellDocs [data-del],
  #dbCellModal .db-nn, #dbCellModal .db-upload, .db-text-more) { display: none !important; }
:root[data-role="staff"] :is(#prCoChecks, #dbCellDocs input, #dbTable .db-text) { pointer-events: none; opacity: 0.8; }
.role-note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-soft); }
.ac-role-chip.is-ceo { background: var(--p-sky); color: var(--marine-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marine-2) 30%, transparent); }
.ac-role-chip.is-staff { background: var(--surface-2); color: var(--text-soft); }
.ac-role-picks .ac-role-pick.is-master { --co: #B7791F; }
.ac-role-picks .ac-role-pick.is-ceo { --co: var(--marine-2); }
.ac-role-picks .ac-role-pick.is-staff { --co: #6B7F86; }
.ac-role-hint { flex-basis: 100%; font-size: 12px; color: var(--text-soft); }

/* 오늘 할 일 띠: 주문수집·정산 맨 위 */
.today-band { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 10px 14px; border-radius: 20px; background: var(--surface);
  box-shadow: var(--lift); overflow: hidden; }
.tb-title { flex: none; font-size: 13px; font-weight: 800; color: var(--text-soft); writing-mode: horizontal-tb; }
.tb-steps { display: flex; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.tb-steps li { flex: 1 1 0; min-width: 0; position: relative; }
.tb-steps li + li::before { content: ""; position: absolute; left: -2px; top: 50%; width: 10px; height: 2px; background: var(--border-strong); transform: translate(-50%, -50%); }
.tb-step { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 7px 10px; border: 0; border-radius: 14px; background: none;
  font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: background 0.12s ease; }
.tb-step:hover { background: var(--surface-2); }
.tb-step:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tb-no { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-soft);
  font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.tb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tb-label { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-left { font-size: 11.5px; font-weight: 600; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-left b { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.tb-step.is-todo .tb-no { background: var(--gold-soft); color: #8A5A00; box-shadow: inset 0 0 0 1.5px var(--gold); }
.tb-step.is-done .tb-no { background: var(--marine-soft); color: var(--marine); box-shadow: none; }
.tb-step.is-done .tb-left { color: var(--marine-2); }
.tb-step.is-now { background: var(--marine); color: var(--on-marine); }
.tb-step.is-now .tb-no { background: var(--on-marine); color: var(--marine); box-shadow: none; }
.tb-step.is-now .tb-left, .tb-step.is-now .tb-left b { color: var(--on-marine); opacity: 0.9; }
:root[data-theme="dark"] .tb-step.is-todo .tb-no { color: var(--gold); }
/* 조회(2026-10-23): 띠 오른쪽 끝 작은 버튼 - 매일 보지 않는 기록 */
.tb-aside { flex: none; align-self: center; padding: 5px 12px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: none;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.tb-aside:hover { color: var(--text); background: var(--surface-2); }
.tb-aside:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tb-aside.is-now { background: var(--marine); border-color: var(--marine); color: var(--on-marine); }
/* 주간 PC 백업 안 받아짐(2026-10-25, 웹 회장만): 띠 끝 꼬리표 - 저장 안 됨 띠와 같은 빨간 빗금 테이프 */
.tb-alert { display: flex; flex: none; align-items: center; gap: 10px; max-width: 260px; padding: 6px 12px 6px 0; overflow: hidden;
  border-radius: 14px; background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 45%, transparent); cursor: help; }
.tb-alert-tape { align-self: stretch; flex: 0 0 12px; margin: -6px 0; background: repeating-linear-gradient(-45deg, #FFD9D4 0 5px, #B3261E 5px 10px); }
.tb-alert .tb-label { color: var(--danger); }
.tb-alert .tb-left { color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
@media (max-width: 1100px) { .tb-left { display: none; } .tb-title { display: none; } }

/* 다음 단계 큰 버튼 */
.next-step-btn { min-height: 46px; padding: 0 22px; font-size: 15px; border-radius: 14px; }
.settle-step-actions:has(.next-step-btn) { align-items: center; }

/* 경고 옆 해결 버튼 */
.fix-btn { margin-left: 8px; white-space: nowrap; }
.oc-rate-warn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-rate-warn .role-note { margin: 0; flex-basis: 100%; }
.fix-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--gold-soft);
  font-size: 13px; }
.fix-bar .role-note { margin: 0; flex-basis: 100%; }

/* 접어 둔 것(고급 옵션·더 보기) */
.gen-advanced, .fold-more { margin: 12px 0 0; border-radius: 14px; background: var(--surface-2); }
.gen-advanced > summary, .fold-more > summary { cursor: pointer; padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--text-soft); list-style: none; }
.gen-advanced > summary::before, .fold-more > summary::before { content: "▸ "; }
.gen-advanced[open] > summary::before, .fold-more[open] > summary::before { content: "▾ "; }
.gen-advanced > summary small { margin-left: 6px; font-weight: 600; color: var(--text-faint); }
.gen-advanced-body, .fold-more > .btn-row, .fold-more > .fold-body { padding: 0 14px 12px; }

/* 설정: 고급 ▸ 분류 */
.set-rail-sep { margin: 6px 12px; height: 1px; background: var(--border); }
.set-cat-adv .set-adv-arrow { font-size: 11px; color: var(--text-faint); }
.fold-more.fold-inline { margin: 0; background: transparent; }
.fold-more.fold-inline > summary { padding: 4px 8px; }
.fold-more.fold-inline[open] { position: relative; }
.fold-more.fold-inline > .fold-body { position: absolute; right: 0; top: 100%; z-index: 5; padding: 8px; border-radius: 12px; background: var(--surface); box-shadow: var(--lift); }
.dash-stats-fold > .fold-body { padding-top: 6px; }
/* 2026-10-22 1차 정리: 허브 하루 업무 5개(주문·발주·송장·정산·행사상품제안)는 한 줄, 관리 4개는 다음 줄 - 20칸 격자로 나눔 */
:root[data-design="c"] body #hubShell .hub-grid-main { grid-template-columns: repeat(20, minmax(0, 1fr)); }
:root[data-design="c"] body #hubShell .hub-card[data-group="daily"] { grid-column: span 4; }
:root[data-design="c"] body #hubShell .hub-card[data-group="manage"] { grid-column: span 5; }
:root[data-design="c"] body #hubShell .hub-card[data-group="daily"] + .hub-card[data-group="manage"] { grid-column: 1 / span 5; }
@media (max-width: 1100px) {
  :root[data-design="c"] #hubShell .hub-grid-main { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :root[data-design="c"] #hubShell .hub-card[data-group="daily"], :root[data-design="c"] #hubShell .hub-card[data-group="manage"] { grid-column: span 2; }
  :root[data-design="c"] #hubShell .hub-card[data-group="daily"] + .hub-card[data-group="manage"] { grid-column: 1 / span 2; }
}

/* =====================================================================
   원가표·월 주문내역 띠(2026-10-24 웹 ②단계, webfiles.js) - 화물 꼬리표 한 줄.
   왼쪽 진녹 칸(종류) + 파일 이름 + 금색 판 번호 + 언제·누가. 데스크톱은 한 줄 정보만(버튼은 웹).
   2026-10-26 잠금 없앰: 노랑 빗금 테이프는 올릴 때 "그사이 올라온 판" 알림(.wf-between)으로 옮김.
   ===================================================================== */
.wf-dock { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.wf-dock .wf-strip { flex: 1 1 360px; margin: 0; }
.wf-strip {
  display: flex; align-items: stretch; min-height: 40px; margin: 0 0 12px; box-sizing: border-box; overflow: hidden;
  background: var(--surface, #FFFFFF); color: var(--text, #13262E);
  border: 1px solid var(--border-strong, #C5D7DA); border-radius: 12px; font-size: 13px;
}
.wf-strip:empty::after { content: ""; flex: 1; background: linear-gradient(90deg, transparent, var(--marine-soft, #DFF0EE), transparent); opacity: 0.5; }
.wf-stub {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 12px; position: relative;
  background: var(--marine, #0B3D42); color: var(--on-marine, #FFFFFF); font-weight: 800; font-size: 12px; white-space: nowrap;
}
.wf-stub::after {   /* 꼬리표 구멍 */
  content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--surface, #FFFFFF); border: 1px solid var(--border-strong, #C5D7DA);
}
.wf-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px 6px 16px; }
.wf-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.wf-ver {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 12px;
  background: var(--gold-soft, #FFF2D2); color: var(--text, #13262E); font-variant-numeric: tabular-nums;
}
.wf-meta { color: var(--text-soft, #536871); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wf-strip.is-missing .wf-meta, .wf-strip.is-error .wf-meta { color: var(--danger, #D2493E); }
.wf-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 5px 8px; }
.wf-btn {
  border: 1.5px solid var(--marine-2, #145A61); background: var(--surface, #FFFFFF); color: var(--marine, #0B3D42);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.wf-btn:hover:not(:disabled) { background: var(--marine-soft, #DFF0EE); }
.wf-btn.is-primary { background: var(--marine, #0B3D42); color: var(--on-marine, #FFFFFF); border-color: var(--marine, #0B3D42); }
.wf-btn.is-primary:hover:not(:disabled) { background: var(--marine-2, #145A61); }
.wf-btn.is-quiet { border-color: transparent; color: var(--text-soft, #536871); }
.wf-btn:focus-visible { outline: 3px solid var(--gold, #F2B33D); outline-offset: 2px; }
.wf-btn:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 640px) {
  .wf-strip { flex-wrap: wrap; }
  .wf-acts { width: 100%; justify-content: flex-end; border-top: 1px dashed var(--border-strong, #C5D7DA); }
  .wf-name { max-width: 100%; }
}

/* 고친 파일 확인 창·판 목록 */
.wf-modal .modal-box { max-height: min(86vh, 820px); display: flex; flex-direction: column; gap: 12px; }
.wf-files { margin: 0; color: var(--text-soft, #536871); overflow-wrap: anywhere; }
.wf-sum { margin: 0; font-size: 14px; }
.wf-sum b { font-variant-numeric: tabular-nums; }
.wf-warn, .wf-note { margin: 0; padding: 10px 12px 10px 28px; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.wf-warn { background: var(--danger-soft, #FDE8E5); color: var(--text, #13262E); border-left: 5px solid var(--danger, #D2493E); }
.wf-note { background: var(--gold-soft, #FFF2D2); border-left: 5px solid var(--gold, #F2B33D); }
.wf-table-wrap { overflow: auto; min-height: 120px; border: 1px solid var(--border-strong, #C5D7DA); border-radius: 12px; }
.wf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wf-table th { position: sticky; top: 0; background: var(--marine-soft, #DFF0EE); text-align: left; padding: 7px 10px; font-weight: 800; }
.wf-table td { padding: 6px 10px; border-top: 1px solid var(--border, #E1EBED); overflow-wrap: anywhere; vertical-align: top; }
.wf-table .wf-cell { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-table tr.is-warn td { background: var(--danger-soft, #FDE8E5); }
.wf-flag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--danger, #D2493E); color: #FFFFFF; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.wf-confirm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.wf-confirm input { width: 18px; height: 18px; accent-color: var(--danger, #D2493E); }
.wf-table tr.is-theirs td { background: var(--gold-soft, #FFF2D2); }
.wf-theirs {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; font-size: 11.5px; font-weight: 800;
  color: #0B3D42; background: var(--gold, #F2B33D);
}

/* 그사이 올라온 판(2026-10-26): 왼쪽 빗금 테이프 + 받은 판 -> 그사이 판 -> 내 파일 항로 */
.wf-between {
  position: relative; margin: 0; padding: 12px 14px 12px 26px; border-radius: 12px;
  background: var(--gold-soft, #FFF2D2); border: 1.5px solid var(--gold, #F2B33D);
}
.wf-between::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; border-radius: 10px 0 0 10px;
  background: repeating-linear-gradient(-45deg, var(--gold, #F2B33D) 0 7px, var(--marine, #0B3D42) 7px 14px);
}
.wf-between h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--text, #13262E); }
.wf-between-at { margin-left: 4px; font-weight: 700; color: var(--text-soft, #536871); font-variant-numeric: tabular-nums; }
.wf-track { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0 0 10px; padding: 0; }
.wf-track li {
  position: relative; flex: 1 1 0; min-width: 104px; padding: 18px 8px 0 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px;
}
.wf-track li::before {   /* 항로 줄 */
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--marine-2, #145A61);
}
.wf-track li:last-child::before { right: auto; width: 14px; }
.wf-track li::after {   /* 정박점 */
  content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--marine, #0B3D42); background: var(--surface, #FFFFFF);
}
.wf-track b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wf-track span { color: var(--text-soft, #536871); overflow-wrap: anywhere; }
.wf-track .wf-track-their::after { background: var(--gold, #F2B33D); border-color: var(--gold, #F2B33D); }
.wf-track .wf-track-their b { color: var(--text, #13262E); }
.wf-track .wf-track-mine::after { background: var(--marine, #0B3D42); }
.wf-track .wf-track-gap { color: var(--text-soft, #536871); justify-content: flex-end; }
.wf-between-cells { margin: 0; font-size: 13px; line-height: 1.55; }

/* 양식이 다른 곳(2026-10-26 PC에서 만든 원가표 등) */
.wf-layout { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.wf-layout h3 { margin: 0; font-size: 15px; font-weight: 800; }
.wf-layout .hint { margin: 0; }
.wf-lay-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.wf-lay-chips li { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; border: 1.5px solid var(--border-strong, #C5D7DA); }
.wf-lay-chips li.is-gone { border-color: var(--danger, #D2493E); color: var(--danger, #D2493E); }
.wf-lay-chips li.is-new { border-color: var(--marine-2, #145A61); color: var(--marine, #0B3D42); }
.wf-lay-wrap { min-height: 0; max-height: 220px; }
.wf-lay-kind { font-weight: 800; white-space: nowrap; }
.wf-lay-kind.is-removed { color: var(--danger, #D2493E); }
.wf-lay-kind.is-added { color: var(--marine-2, #145A61); }
.wf-blank { color: var(--text-soft, #536871); font-style: italic; }
.wf-blocked {
  margin: 0; padding: 10px 12px; border-radius: 12px; font-weight: 700; line-height: 1.55;
  background: var(--danger-soft, #FDE8E5); border: 1.5px solid var(--danger, #D2493E); color: var(--text, #13262E);
}
@media (max-width: 640px) {
  .wf-track { flex-direction: column; gap: 10px; }
  .wf-track li { padding: 0 0 0 20px; min-width: 0; }
  .wf-track li::before { top: 12px; bottom: -12px; left: 4px; right: auto; width: 2px; height: auto; }
  .wf-track li:last-child::before { display: none; }
}
.wf-vlist { list-style: none; margin: 0; padding: 0; overflow: auto; border: 1px solid var(--border-strong, #C5D7DA); border-radius: 12px; }
.wf-vrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border-top: 1px solid var(--border, #E1EBED); }
.wf-vrow:first-child { border-top: 0; background: var(--marine-soft, #DFF0EE); }
.wf-vmeta { flex: 1 1 220px; color: var(--text-soft, #536871); }
.wf-vacts { display: flex; gap: 6px; }
.wf-tpl-list { margin: 8px 0 0; padding: 0 0 0 18px; color: var(--text-soft, #536871); font-size: 13px; line-height: 1.7; }
.wf-tpl-list .is-empty { list-style: none; margin-left: -18px; }