/* ==========================================================================
   더베스트페이 가맹서류 접수 시스템 스타일
   규칙은 docs/디자인시스템_가이드.md 에 정리했다.
   - 색·글자 크기·모서리·그림자·층은 아래 토큰만 쓴다. 간격은 4px 단위 토큰(--sp-*)을 쓴다.
   - 화면 코드(JS)에 style 속성을 넣지 않는다. 한 번만 쓰는 간격은 맨 끝 유틸리티 클래스를 쓴다.
   순서: 1 토큰 → 2 기본 → 3 공통 부품 → 4 가맹점 화면 → 5 관리자 화면 → 6 로그인·시작 화면 → 7 반응형 → 8 유틸리티
   ========================================================================== */

/* 1. 토큰 ------------------------------------------------------------------ */
:root {
  /* 바탕·글자·선 */
  --bg: #f3f5f9;            /* 페이지 바탕 */
  --surface: #ffffff;       /* 카드·입력칸·표 */
  --surface-2: #f8fafc;     /* 표 머리, 보조 칸 */
  --surface-3: #eef1f5;     /* 중립 배지, 썸네일 바탕 */
  --hover: #f7f9fd;         /* 누를 수 있는 표 줄에 올렸을 때 */
  --track: #e6eaf1;         /* 진행 막대 바탕, 아이콘 버튼에 올렸을 때 */
  --text: #182233;
  --muted: #5b6880;         /* 보조 글자 */
  --faint: #6b778c;         /* 흐린 글자(설명·비활성). 흰 바탕 대비 4.5:1 이상(작은 글자에도 읽히게) */
  --line: #e2e7ef;          /* 구분선, 카드 테두리 */
  --line-strong: #cfd6e2;   /* 입력칸·버튼 테두리 */
  --on-color: #ffffff;      /* 색이 칠해진 바탕 위 글자 */
  --on-color-muted: rgba(255, 255, 255, .85);
  --on-color-faint: rgba(255, 255, 255, .7);

  /* 주색(파랑): 주요 버튼, 링크, 선택됨, 필수, 내 담당 */
  --primary: #1f56e0;
  --primary-hover: #1847c2;
  --primary-weak: #eaf0fe;
  --primary-line: #b9cbf6;
  --focus-ring: 0 0 0 3px rgba(31, 86, 224, .15);

  /* 의미 색. weak: 배지·안내 바탕 / line: 테두리 / strong: 바탕 위 진한 글자 */
  --ok: #11845a;      --ok-weak: #e5f5ee;      --ok-line: #b8e0cc;                               /* 정상·접수완료 */
  --danger: #cf3434;  --danger-weak: #fdeceb;  --danger-line: #efc2c2;  --danger-strong: #8f1f1f;  /* 보완필요·삭제·오류 */
  --danger-bg: #fffafa;                                                                        /* 오류·보완 칸 바탕 */
  --warn: #a25f00;    --warn-weak: #fff3dd;    --warn-line: #f2d6a2;    --warn-strong: #8a3b00;    /* 보완요청·경고·미할당 */
  --violet: #6741c8;  --violet-weak: #f0ebfc;                                                    /* 보완접수 */
  --info: #3f5478;    --info-weak: #e9eef8;    --info-line: #c5d1e6;                                                      /* 확인 전 */

  /* 어두운 면: 개발 모드 띠, 알림(토스트), 이미지 보기 */
  --ink: #1d2433;
  --ink-2: #3a4458;
  --ink-text: #c9d2e3;
  --overlay: rgba(15, 22, 36, .5);

  /* 로그인 안내 영역 */
  --brand-from: #2463eb;
  --brand-to: #1a45b8;

  /* 글자 */
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;      /* 배지, 작은 표시 */
  --fs-sm: 13px;      /* 보조 글자, 표 머리, 작은 버튼 */
  --fs-md: 14px;      /* 버튼, 표 내용, 입력 이름 */
  --fs-base: 15px;    /* 본문 */
  --fs-lg: 16px;      /* 입력칸(휴대폰 확대 방지), 큰 버튼 */
  --fs-xl: 17px;      /* 카드·구역·창 제목 */
  --fs-2xl: 21px;     /* 관리자 화면 제목, 완료 안내 */
  --fs-3xl: 24px;     /* 가맹점 화면 제목, 로그인 제목 */
  --fs-display: clamp(28px, 2.4vw, 36px);  /* 로그인 안내 제목 */
  --lh: 1.55;
  --lh-tight: 1.3;

  /* 간격(4px 단위) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* 모서리·그림자·층 */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-pop: 0 8px 24px rgba(16, 24, 40, .2);
  --shadow-modal: 0 20px 50px rgba(16, 24, 40, .25);
  --z-bar: 40;
  --z-modal: 50;
  --z-toast: 80;
}

/* 2. 기본 ------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); }
p { margin: 0; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 3. 공통 부품 -------------------------------------------------------------- */

/* 개발 모드 안내 띠(개발 모드에서만 보임) */
#proto-bar {
  position: sticky; top: 0; z-index: var(--z-bar);
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  padding: 6px var(--sp-4);
  background: var(--ink); color: var(--ink-text); font-size: var(--fs-sm);
}
#proto-bar a { color: var(--on-color); text-decoration: none; font-weight: 600; }
#proto-bar .tag { background: var(--ink-2); color: var(--on-color); border-radius: 4px; padding: 1px 6px; font-weight: 600; }

/* 버튼: 기본 / primary / danger(.solid) / ok·fix(판정, .on) / ghost, 크기 sm·lg, block */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-weight: 600; font-size: var(--fs-md); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-color); }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn.danger, .btn.fix { color: var(--danger); border-color: var(--danger-line); }
.btn.danger:hover:not(:disabled) { background: var(--danger-weak); }
.btn.danger.solid, .btn.fix.on { background: var(--danger); border-color: var(--danger); color: var(--on-color); }
.btn.ok { color: var(--ok); border-color: var(--ok-line); }
.btn.ok.on { background: var(--ok); border-color: var(--ok); color: var(--on-color); }
/* 해당 없음(선택 서류, PRD F-44-2): 정상·보완필요와 섞이지 않게 회색 */
.btn.na { color: var(--muted); }
.btn.na.on { background: var(--muted); border-color: var(--muted); color: var(--on-color); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--primary-weak); }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-sm); }
.btn.lg { min-height: 52px; padding: 0 20px; font-size: var(--fs-lg); }
.btn.block { width: 100%; }
.btn-group { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: nowrap; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover:not(:disabled) { background: var(--track); color: var(--text); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn svg { width: 17px; height: 17px; }

/* 배지: 필수(req)·선택(opt), 접수 건 상태(st-*), 서류 상태(sl-*), 중복(dup), 주의(requested·warn-badge) */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.badge.req, .badge.st-received { background: var(--primary-weak); color: var(--primary); border-color: transparent; }
.badge.opt { background: var(--surface-3); color: var(--muted); border-color: transparent; }
.badge.requested, .badge.warn-badge, .badge.st-fix_requested { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.badge.st-fix_received { background: var(--violet-weak); color: var(--violet); border-color: transparent; }
.badge.st-done, .badge.sl-ok { background: var(--ok-weak); color: var(--ok); border-color: transparent; }
.badge.dup, .badge.sl-fix { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.badge.sl-none { background: var(--surface-3); color: var(--faint); border-color: transparent; }
.badge.sl-pending { background: var(--info-weak); color: var(--info); border-color: transparent; }
.badge.sl-na { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }

/* 카드와 구역 제목 */
.card {
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card > h2, .card-head h2 { font-size: var(--fs-xl); }
.card > h2 { margin-bottom: var(--sp-3); }
.card-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.card-desc { color: var(--muted); font-size: var(--fs-sm); margin: calc(var(--sp-1) * -1) 0 var(--sp-3); }
.section-title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--sp-1); }
.section-sub { color: var(--muted); font-size: var(--fs-md); margin-bottom: var(--sp-4); }

/* 입력 */
.field + .field { margin-top: var(--sp-4); }
.field-label { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-weight: 700; font-size: var(--fs-md); }
.field-static { padding: var(--sp-2) 0; }
.field-error { margin-top: var(--sp-2); color: var(--danger); font-size: var(--fs-sm); }
.field-warn { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-xs); background: var(--warn-weak); color: var(--warn); font-size: var(--fs-sm); }
.field-hint { margin-top: var(--sp-1); color: var(--faint); font-size: var(--fs-sm); }
.input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: var(--fs-lg);
}
/* 고칠 수 없는 칸(예: 보완 화면의 사업자번호) */
.input[readonly], .input:disabled { background: var(--bg); color: var(--muted); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.field.has-error .input { border-color: var(--danger); }
/* 펼침(⌄)·달력 아이콘: 브라우저 기본 표시 대신 같은 모양(16px, 선 1.5px, --muted 색)으로 그리고 오른쪽 끝에서 12px 안쪽에 둔다.
   data URI 안에서는 토큰을 쓸 수 없어 --muted 값(#5b6880)을 직접 적었다. */
select.input {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6880' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
input[type=date].input { padding-right: 12px; }
input[type=date].input::-webkit-calendar-picker-indicator {
  width: 16px; height: 16px; margin: 0 0 0 var(--sp-2); padding: 0; opacity: 1; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235b6880' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.25' y='3.25' width='11.5' height='10.5' rx='2'/%3E%3Cpath d='M2.25 6.75h11.5M5.5 1.75v3M10.5 1.75v3'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.check { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-weight: 700; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--primary); }

/* 표: list(관리자 목록), doc-table(제출 서류 안내), info-table(가맹점 정보), print-list(인쇄 목록) */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.table-wrap.flat { box-shadow: none; }
table.list { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.list th {
  padding: 10px var(--sp-3); border-bottom: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); text-align: left; white-space: nowrap;
}
table.list td { padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.row-link { cursor: pointer; }
table.list tr.row-link:hover { background: var(--hover); }
table.list tr.inactive td { color: var(--faint); }
/* 접수 목록: 표 안에 따로 스크롤을 두지 않고(브라우저 스크롤 하나만), 열 제목은 화면 위에 붙어 따라온다.
   그러려면 표를 감싼 칸이 스크롤 영역이 아니어야 해서 overflow를 풀고, 대신 표가 화면 폭 안에 들어오게 칸을 줄인다. */
.table-wrap:has(> table.list.cases) { overflow: visible; }
.table-wrap:has(> table.list.cases) thead th { position: sticky; top: var(--proto-h, 0px); z-index: 3; }
.table-wrap:has(> table.list.cases) thead th:first-child { border-top-left-radius: var(--radius); }
.table-wrap:has(> table.list.cases) thead th:last-child { border-top-right-radius: var(--radius); }
table.list.cases th, table.list.cases td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
table.list.cases td.date-cell { min-width: 6em; }
/* 표가 다 들어가지 않는 좁은 화면(1280px 미만)에서만 표 안에서 가로로 스크롤한다(이때는 열 제목 고정이 풀린다). 세로 스크롤은 어디서도 표 안에 생기지 않는다 */
@media (max-width: 1279px) {
  .table-wrap:has(> table.list.cases) { overflow-x: auto; }
}
/* 서류 양식·링크의 업무 유형별 양식 표: 표가 여러 개여도 열 시작 위치가 같게 열 너비를 고정한다(내용 길이로 열이 움직이지 않게).
   구분·필수 서류·버튼은 고정 폭(버튼은 오른쪽 끝에 맞춤), 양식은 표 폭의 비율, 공용 링크는 나머지. 칸이 모자라면 양식 이름은 띄어쓰기에서,
   링크는 /form/ 뒤(<wbr>)에서 줄을 바꾸고, 그래도 좁은 화면에서는 표 안에서 가로로 스크롤한다. 개별 발송 링크 표는 해당 없음 */
table.list.form-links { table-layout: fixed; min-width: 920px; }
table.list.form-links col.col-name { width: 18%; }
/* 양식 이름의 괄호 부분: 통째로 다음 줄로 넘기고, 그래도 칸보다 길 때만 안에서('-' 뒤) 줄을 바꾼다 */
table.list.form-links .name-paren { display: inline-block; max-width: 100%; }
table.list.form-links col.col-group, table.list.form-links col.col-req { width: 80px; }
table.list.form-links col.col-actions { width: 296px; }
table.list.form-links code.k { overflow-wrap: anywhere; }
table.list.form-links .btn-group { justify-content: flex-end; }
/* 변경 로그 '대상': 이메일·접수번호가 글자 중간에서 끊기지 않게 하고(긴 이메일은 칸이 그만큼 넓어짐) 칸을 넉넉히 둔다 */
table.list td.log-target { min-width: 16em; overflow-wrap: normal; }
@media (min-width: 1440px) {
  table.list.form-links col.col-name { width: 21%; }
}
.doc-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; }
.doc-table th, .doc-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-table th { background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.doc-table td:first-child { width: 64px; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th { width: 140px; padding: 9px 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-align: left; vertical-align: top; }
.info-table td { padding: 9px 0; font-weight: 600; }
.info-table tr + tr th, .info-table tr + tr td { border-top: 1px solid var(--line); }
.print-list { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.print-list th, .print-list td { padding: 7px var(--sp-2); border-bottom: 1px solid var(--line); text-align: left; }
.print-list th { color: var(--muted); }

/* 안내 상자: notice(가맹점 주의), banner(관리자 상단 알림), empty(빈 목록), loading */
.notice { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--warn-weak); color: var(--warn-strong); font-size: var(--fs-md); }
.banner { display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; padding: var(--sp-4); border-radius: var(--radius); }
.banner.warn { background: var(--warn-weak); border: 1px solid var(--warn-line); }
.banner.danger { background: var(--danger-weak); border: 1px solid var(--danger-line); }
.banner > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.banner.warn > svg { color: var(--warn); }
.banner.danger > svg { color: var(--danger); }
.banner .grow { flex: 1; min-width: 240px; }
.banner strong { display: block; margin-bottom: 2px; }
.empty { padding: var(--sp-12) var(--sp-4); color: var(--muted); text-align: center; }
/* 표 안의 '없습니다' 한 줄(통계: 표 머리는 그대로 두고 빈 상태를 보인다) */
table.list td.table-empty { padding: var(--sp-5) var(--sp-4); color: var(--muted); text-align: center; }
.loading { padding: var(--sp-12) var(--sp-4); color: var(--muted); text-align: center; }

/* 진행 막대(서류 현황), 쪽 나눔 */
.progress { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.progress .bar { width: 64px; height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--ok); }
.pager { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-4); }
.pager .btn { min-width: 36px; padding: 0 var(--sp-2); }
.pager .btn.current { background: var(--primary); border-color: var(--primary); color: var(--on-color); }

/* 창(모달)과 알림(토스트) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-10) var(--sp-4); background: var(--overlay); overflow-y: auto;
}
.modal { width: 100%; max-width: 560px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-modal); }
.modal.wide { max-width: 980px; }
.modal-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.modal-head h3 { flex: 1; font-size: var(--fs-xl); }
.modal-body { padding: var(--sp-5); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
/* 창은 화면 높이 안에 두고 본문만 스크롤한다(인쇄 미리보기처럼 길어도 제목과 버튼이 늘 보이게) */
.modal { display: flex; flex-direction: column; max-height: calc(100vh - var(--sp-10) * 2); max-height: calc(100dvh - var(--sp-10) * 2); }
.modal-body { min-height: 0; overflow-y: auto; }
.even-people { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.even-people .check { margin-top: 0; font-weight: 400; }
#toast-root {
  position: fixed; left: 50%; bottom: var(--sp-6); z-index: var(--z-toast); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none;
}
.toast { max-width: 90vw; padding: 10px var(--sp-4); border-radius: var(--radius-sm); background: var(--ink); color: var(--on-color); font-size: var(--fs-md); box-shadow: var(--shadow-pop); pointer-events: auto; }
.toast-action { min-height: 30px; margin-left: var(--sp-3); padding: 2px var(--sp-3); border: 1px solid currentColor; border-radius: var(--radius-xs); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.toast.error { background: var(--danger); }
.toast.ok { background: var(--ok); }

/* 4. 가맹점 화면(가맹서류 양식·보완 제출) ------------------------------------- */
.m-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-12); }
.m-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) 0 var(--sp-2); }
.brand { color: var(--primary); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.2px; }
/* 전화번호: 누르면 전화가 걸리는 링크. 누르기 쉽게 위아래로 넓히되 줄 높이는 그대로 둔다 */
.tel-link { display: inline-block; margin: calc(var(--sp-2) * -1) 0; padding: var(--sp-2) 0; color: var(--primary); font-weight: 700; text-decoration: none; }
.tel-link:hover { text-decoration: underline; }
.m-title { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.4px; }
.m-wrap .card + .card { margin-top: var(--sp-4); }
.guide h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
/* 이 양식을 쓰는 경우(비슷한 양식이 여럿일 때, 예: 대표자변경 공동대표) */
.guide-when { margin-bottom: var(--sp-2); font-weight: 700; }
/* 여러 문장 안내: 문장마다 새 줄(sentences) */
.guide .sentence { display: block; }
.guide .sentence + .sentence { margin-top: 2px; }
/* 업무 유형 안내(무선단말기 구매·지원 비용·입금 계좌) */
.guide-info { margin-bottom: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--primary-line); border-radius: var(--radius-sm); background: var(--primary-weak); font-size: var(--fs-md); }
.guide-info ul { margin-top: var(--sp-1); }
.intro p + p { margin-top: var(--sp-2); }
/* 양식 첫 안내의 꼭 지킬 점(사진 찍는 법·작성 중 저장 안 됨): 글머리표 + 보조 글자보다 진한 색 */
.intro-points { margin: var(--sp-2) 0 0; padding-left: 20px; color: var(--text); line-height: 1.6; list-style: disc; }
.intro-points li + li { margin-top: var(--sp-1); }
.intro-points li::marker { color: var(--muted); }
/* 화면 폭 대응: 휴대폰은 한 줄, 768px 이상은 입력칸·서류 칸 2열, 1024px 이상은 서류 안내도 2단(7. 반응형) */
/* 열 너비를 정해 두어야 긴 파일 이름이 칸을 넓혀 휴대폰 화면 밖으로 밀어내지 않는다. */
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.slot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.field-grid > .field + .field, .slot-grid > .slot + .slot { margin-top: 0; }

/* 서류 칸: 끌어다 놓기·선택, 올린 파일 목록, 보완 사유 */
.slot { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); }
.slot + .slot { margin-top: var(--sp-3); }
.slot.has-error { border-color: var(--danger); background: var(--danger-bg); }
.slot.dragging { border-color: var(--primary); box-shadow: var(--focus-ring); }
.slot-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.slot-name { font-weight: 700; }
/* 서류 조건(발급일·마스킹 등): 이름 아래 줄에 작은 회색 글자(slotTitle). 칸 머리는 flex라 줄 전체를 차지하게 한다 */
.slot-cond { display: block; flex-basis: 100%; order: 10; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; line-height: 1.45; }
.doc-name .slot-cond { margin-top: 1px; }
.req-check-name { display: flex; flex-direction: column; }
/* 상세: 받은 파일이 없고 요청하지 않은 선택 서류 목록 */
/* 상세 '최종 서류' 위: 가맹점이 [예]를 고른 질문(신청 의도). 서류가 없으면 '서류 없음' */
.answered { margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--primary-line); border-radius: var(--radius-sm); background: var(--primary-weak); font-size: var(--fs-md); }
.answered-title { margin-bottom: var(--sp-1); font-weight: 700; }
.answered li + li { margin-top: var(--sp-1); }
/* 질문 줄: 질문·상태 배지 왼쪽, [해당 없음 처리]·[해당 없음 취소] 버튼은 오른쪽(상태 배지와 헷갈리지 않게 테두리 있는 버튼). 해당 없음 질문은 흐린 글자 */
.answered-line { display: flex; align-items: center; gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; }
.answered-act { margin-left: auto; }
.answered-na .answered-q { color: var(--muted); }
/* 접수 목록 제신고 건의 양식 칸 아래: [예]로 답한 질문 짧은 요약(정산계좌·업종) */
.list-answers { margin-top: 2px; color: var(--primary); font-weight: 700; white-space: normal; word-break: keep-all; }
.doc-idle { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.doc-idle-title { font-weight: 600; color: var(--muted); }
.doc-idle-list { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-sm); }
.slot-reason { margin-top: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--danger-weak); color: var(--danger-strong); font-size: var(--fs-md); }
.slot-reason .note { display: block; margin-top: var(--sp-1); }
.slot-errors { margin-top: var(--sp-2); color: var(--danger); font-size: var(--fs-sm); }
.slot-errors div + div { margin-top: 2px; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-3); padding: var(--sp-5) var(--sp-4);
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted); text-align: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dropzone svg { width: 26px; height: 26px; color: var(--primary); }
.dropzone .dz-text { color: var(--text); font-size: var(--fs-md); }
.dropzone .dz-text strong { color: var(--primary); font-weight: 700; }
.dropzone .dz-sub { color: var(--faint); font-size: var(--fs-xs); }
.dropzone:hover, .dropzone:focus-visible { border-color: var(--primary); background: var(--primary-weak); outline: none; }
.slot.dragging .dropzone { border-style: solid; border-color: var(--primary); background: var(--primary-weak); }
.dropzone.compact { flex-direction: row; justify-content: center; gap: var(--sp-2); padding: 10px var(--sp-3); }
.dropzone.compact svg { width: 18px; height: 18px; }
.dropzone.compact .dz-sub { display: none; }
.dropzone.disabled { cursor: not-allowed; }
.dropzone.disabled svg { color: var(--faint); }
.dropzone.disabled:hover { border-color: var(--line-strong); background: var(--surface-2); }
.dropzone.disabled .dz-text { color: var(--muted); font-size: var(--fs-sm); }
.dz-touch { display: none; }
.file-list { margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.file-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.file-item + .file-item { margin-top: var(--sp-2); }
.thumb { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-xs); background: var(--surface-3); color: var(--muted); object-fit: cover; }
.thumb svg { width: 22px; height: 22px; }
.file-meta { flex: 1; min-width: 0; }
.file-name { overflow: hidden; font-size: var(--fs-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { color: var(--faint); font-size: var(--fs-xs); }
.file-actions { display: flex; flex: none; gap: 2px; }
.file-progress { display: flex; align-items: center; gap: var(--sp-2); color: var(--primary); font-size: var(--fs-xs); }
.file-progress .bar { width: 90px; height: 5px; border-radius: 4px; background: var(--track); overflow: hidden; }
.file-progress .bar i { display: block; height: 100%; background: var(--primary); }
/* 내려받기 버튼(.btn.sm) 묶음: 서류 칸 머리와 '양식 내려받기'. 좁은 화면에서는 다음 줄로 내려간다 */
.download-actions { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
/* 제출 서류 안내 표: 내려받기 버튼은 서류 이름 아래 줄 */
.doc-table .download-actions { display: flex; margin-top: var(--sp-2); }

/* 개인정보 동의, 제출 */
.consent-box { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-md); }
.consent-box h3 { margin-bottom: var(--sp-2); font-size: var(--fs-base); }
.consent-box ul { margin: var(--sp-2) 0 0; padding-left: 18px; }
.consent-box li + li { margin-top: var(--sp-1); }
.consent.has-error .check { color: var(--danger); }
.submit-area { margin-top: var(--sp-5); }
.page-foot { margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* 완료·안내(제출 완료, 사용할 수 없는 링크) */
.result { padding: var(--sp-8) var(--sp-5); text-align: center; }
.result .mark { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; }
.result .mark svg { width: 34px; height: 34px; }
.result .mark.ok { background: var(--ok-weak); color: var(--ok); }
.result .mark.warn { background: var(--warn-weak); color: var(--warn); }
.result h2 { margin-bottom: var(--sp-3); font-size: var(--fs-2xl); }
.result .receipt { display: inline-block; margin: var(--sp-2) 0 var(--sp-4); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 700; }

/* 운영 서버 첫 화면(개발 모드가 아닐 때) */
.landing { max-width: 560px; margin: calc(var(--sp-10) * 2) auto; padding: 0 var(--sp-4); text-align: center; }
.landing .brand { font-size: var(--fs-2xl); }
.landing p { margin-top: var(--sp-3); color: var(--muted); }

/* 5. 관리자 화면 ------------------------------------------------------------- */
.a-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.a-side {
  position: sticky; top: var(--proto-h, 0px); height: calc(100vh - var(--proto-h, 0px)); overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-3);
  background: var(--surface); border-right: 1px solid var(--line);
}
/* 왼쪽 위: 회사 로고 + 시스템 이름(누르면 접수 목록). 둘 다 왼쪽 메뉴 폭의 가운데 */
.a-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 var(--sp-3); padding: 4px 10px var(--sp-4); border-bottom: 1px solid var(--line); text-align: center; text-decoration: none; }
.a-brand img { display: block; width: 176px; height: auto; }
.a-brand-sub { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-group + .side-group { margin-top: var(--sp-4); }
.side-label { padding: var(--sp-1) 10px var(--sp-2); color: var(--faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; }
/* 메뉴 한 줄: 아이콘 + 이름, 40px 높이 */
.side-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.side-link svg { flex: none; color: var(--faint); }
.side-link:hover { background: var(--surface-2); }
.side-link:hover svg { color: var(--muted); }
.side-link.active { background: var(--primary-weak); color: var(--primary); }
.side-link.active svg { color: var(--primary); }
/* 준비 중인 업무 유형: 메뉴 대신 한 줄로(누를 수 없음) */
.side-planned { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: var(--sp-1); padding: var(--sp-2) 10px; color: var(--faint); font-size: var(--fs-sm); line-height: 1.5; }
.side-tag { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--warn-weak); color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
.side-foot { margin-top: auto; padding: var(--sp-4) 10px 0; border-top: 1px solid var(--line); }
.side-user { display: flex; align-items: center; gap: var(--sp-2); }
.side-email { margin-top: 2px; word-break: break-all; }
.a-content { min-width: 0; }
/* 관리자 본문: 넓은 모니터에서도 표를 넓게 쓰도록 1600px까지 */
.a-main { max-width: 1600px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-12); }

/* 화면 머리: 제목 + 버튼 + 설명(pageHead) */
.page-head { margin-bottom: var(--sp-4); }
.page-head-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.a-title { font-size: var(--fs-2xl); font-weight: 800; }
.page-desc { margin-top: var(--sp-1); color: var(--muted); }
/* 업무 유형 목록 제목 오른쪽의 공용 링크 복사: '링크 복사' 글자 + 양식 이름 버튼 */
.quick-links { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.quick-links-label { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }

/* 접수 목록: 담당자 탭, 진행 현황, 검색 영역, 담당자 칸 */
.tabs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.tab { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.tab:hover { border-color: var(--text); color: var(--text); }
.tab.on { border-color: var(--text); background: var(--text); color: var(--on-color); }
.tab .n { margin-left: var(--sp-2); font-weight: 600; opacity: .75; }
.tab-select { width: auto; min-height: 34px; border-radius: var(--radius-pill); font-size: var(--fs-sm); }
.group-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.group-toggle input { width: 16px; height: 16px; accent-color: var(--primary); }
.workload { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.workload-title { margin-right: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); cursor: pointer; }
.chip strong { color: var(--primary); }
.chip.warn strong { color: var(--warn); }
.chip.on { border-color: var(--primary); background: var(--primary-weak); }
.chip.me { border-color: var(--primary-line); }
.search-panel { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.search-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.search-row .input { width: auto; height: 44px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: var(--fs-md); }
.search-row .search { flex: 1; min-width: 260px; }
.search-row input[type=date] { min-width: 150px; }
.search-row select.input { max-width: 100%; }
table.list.cases th { text-align: center; }
table.list tr.group-row td { padding: var(--sp-2) var(--sp-3); background: var(--surface-2); font-size: var(--fs-sm); font-weight: 700; }
table.list tr.group-row.unassigned td { color: var(--warn); }
table.list tr.empty-row td { padding: var(--sp-4); background: var(--surface); color: var(--muted); font-size: var(--fs-md); }
table.list tr.attention td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.assignee-me { color: var(--primary); font-weight: 700; }
.assign-select { width: auto; min-height: 32px; padding: 4px 26px 4px var(--sp-2); font-size: var(--fs-sm); }
select.input.assign-select { padding-right: 30px; background-position: right 8px center; background-size: 14px 14px; }
.assign-select.mine { border-color: var(--primary-line); color: var(--primary); font-weight: 700; }
.assign-select.unset { color: var(--faint); }

/* 접수 상세 */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-4); align-items: start; }
.detail-grid .col > * + * { margin-top: var(--sp-4); }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
.summary .k { color: var(--muted); font-size: var(--fs-sm); }
.summary .v { margin-top: 2px; font-weight: 700; }
.assignee-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.assignee-bar .k { color: var(--muted); font-size: var(--fs-sm); }
.action-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.doc-row { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); }
.doc-row + .doc-row { margin-top: var(--sp-3); }
.doc-row.st-fix { border-color: var(--danger-line); background: var(--danger-bg); }
.doc-row.st-ok { border-color: var(--ok-line); }
/* 해당 없음으로 판정한 서류는 흐리게(파일은 그대로 볼 수 있다) */
.doc-row.st-na { border-style: dashed; }
.doc-row.st-na .doc-row-head .slot-name, .doc-row.st-na .doc-row-meta { color: var(--muted); }
.doc-row-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.doc-row-head .slot-name { font-size: var(--fs-base); }
.doc-row-meta { margin-top: var(--sp-1); color: var(--faint); font-size: var(--fs-sm); }
.doc-judge { display: flex; gap: var(--sp-2); }
.doc-reason { margin-top: var(--sp-2); color: var(--danger-strong); font-size: var(--fs-md); }
.history { margin: 0; padding: 0; list-style: none; }
.history li { position: relative; padding: 0 0 14px 18px; font-size: var(--fs-sm); }
.history li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.history li::after { content: ""; position: absolute; left: 3.5px; top: 17px; bottom: 0; width: 1px; background: var(--line); }
.history li:last-child::after { display: none; }
.history .when, .history .who { font-size: var(--fs-xs); }
.history .when { color: var(--faint); }
.history .who { color: var(--muted); }
.history .changes { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2); font-size: var(--fs-xs); }
.history .changes div + div { margin-top: 3px; }
.history .changes del { color: var(--danger); }
.history .changes ins { color: var(--ok); font-weight: 700; text-decoration: none; }
.dup-item { padding: var(--sp-3); border: 1px dashed var(--danger-line); border-radius: var(--radius-sm); background: var(--surface); }
.dup-item + .dup-item { margin-top: var(--sp-3); }
.dup-files { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }

/* 서류 보기·인쇄·보완 요청 창 */
.viewer-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* 그림 상자(.viewer-box)의 크기를 확대·회전에 맞춰 바꾸고 margin: auto로 가운데 둔다. 크면 위·왼쪽부터 스크롤된다. */
/* 뷰어 안 판정(상세에서 연 경우): 가맹점명·사업자번호, 서류 상태, [정상]·[보완필요] */
.viewer-judge { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.viewer-case { font-size: var(--fs-sm); }
/* 판정 줄이 있으면 그만큼 그림 영역을 줄여 창 안에 다 들어오게 한다 */
.viewer-judge ~ .viewer-stage { height: max(300px, calc(100vh - 360px)); }
.viewer-judge ~ .viewer-stage iframe { height: 100%; }
.viewer-stage { display: flex; height: 66vh; overflow: auto; padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--ink); }
.viewer-box { position: relative; flex: none; margin: auto; }
.viewer-box img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center center; }
.viewer-stage .loading, .viewer-msg { margin: auto; color: var(--on-color); }
.viewer-name { font-size: var(--fs-md); }
.viewer-stage iframe, .pdf-frame { width: 100%; height: 66vh; border: 0; border-radius: var(--radius-sm); background: var(--surface); }
.req-item { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.req-item + .req-item { margin-top: var(--sp-2); }
.req-item.on { border-color: var(--danger-line); background: var(--danger-bg); }
.req-check { font-weight: 700; cursor: pointer; }
.req-check .req-status { font-weight: 500; }
.req-item .req-fields { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.req-item .input { min-height: 38px; font-size: var(--fs-md); }
.preview-box { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.preview-box h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
/* 링크 칸 + 복사 버튼: 좁은 화면(휴대폰)에서는 링크 칸이 한 줄을 다 쓰고 버튼은 아래 줄로 */
.link-box { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.link-box .input { flex: 1 1 220px; min-width: 0; font-size: var(--fs-md); }

/* 통계(관리자·팀장): 요약 숫자(kpi), 단계 막대(funnel), 기간 추이 그래프(chart) */
/* 통계의 기준 안내 표시(?): 올리거나 키보드로 포커스하면 title로 기준 문장을 보여준다 */
.tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: var(--sp-1); border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px; cursor: help; }
.tip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 통계 기준 안내(접힘) */
.stats-guide summary { cursor: pointer; list-style: revert; }
.stats-guide .guide-list { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; }
.stats-guide dt { font-weight: 700; }
.stats-guide dd { margin: 0; color: var(--muted); }
/* 넓은 표의 첫 칸(담당자 이름)은 가로로 밀어도 보이게 */
table.list.sticky-first th:first-child, table.list.sticky-first td:first-child { position: sticky; left: 0; z-index: 1; min-width: 140px; background: var(--surface); }
table.list.sticky-first td:first-child strong { white-space: nowrap; }
table.list.sticky-first thead th:first-child { background: var(--surface-2); }
/* 누르면 접수 목록으로 가는 숫자 카드(통계 '지금 진행 상황') */
.kpi-link { display: flex; color: inherit; text-decoration: none; border-radius: var(--radius); }
/* 줄마다 카드 높이를 가장 높은 카드에 맞춘다(링크로 감싼 카드도) */
.kpi-link > .kpi { flex: 1; }
.kpi-link:hover .kpi { border-color: var(--primary-line); background: var(--hover); }
.kpi-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 카드가 적어도 줄 폭을 채운다(auto-fit: 빈 칸을 만들지 않음) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.kpi { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.kpi .k { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.kpi .v { margin-top: var(--sp-1); font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .d { margin-top: 2px; color: var(--faint); font-size: var(--fs-xs); }
/* 직전 기간 대비(좋아짐 초록, 나빠짐 빨강, 건수는 색 없음) */
.kpi .delta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.kpi .delta.good { color: var(--ok); }
.kpi .delta.bad { color: var(--danger); }
/* 표 안에서 누르면 그 조건으로 다시 보는 이름(통계 업무 유형별) */
.link-inline { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.link-inline:hover { text-decoration: underline; }
/* 월간 보고(통계): 표의 증감 글과 한눈에 보기 */
.report .delta { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.report .delta.good { color: var(--ok); }
.report .delta.bad { color: var(--danger); }
.report-cover h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-2xl); }
.report-actions { flex-wrap: wrap; justify-content: flex-end; }
.report-actions select.input { width: auto; min-width: 170px; }
.report-points { display: grid; gap: var(--sp-2); margin: 0; padding-left: var(--sp-5); line-height: 1.6; }
/* 인쇄·PDF 저장: 메뉴·버튼·개발 띠를 빼고 본문만(카드가 쪽 사이에서 잘리지 않게) */
@media print {
  #proto-bar, .a-side, .report-actions, .page-desc, #toast-root, .notice-root, .bulk-bar, .modal-backdrop { display: none !important; }
  .a-layout { display: block; }
  .a-main { max-width: none; padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}
.kpi.ok .v { color: var(--ok); }
.kpi.warn .v { color: var(--warn); }
.kpi.danger .v { color: var(--danger); }
.stats-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); }
.stats-sub { margin-bottom: var(--sp-2); color: var(--muted); font-size: var(--fs-md); font-weight: 700; }
.stats-note { margin-top: var(--sp-3); color: var(--faint); font-size: var(--fs-xs); }
/* 표·그래프 아래 설명 목록(한 줄씩): 긴 문단보다 읽기 쉽게 */
.stats-note-list { margin: var(--sp-3) 0 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.stats-note-list li + li { margin-top: 2px; }
.funnel { display: grid; gap: var(--sp-2); }
.funnel-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 140px; align-items: center; gap: var(--sp-3); }
.funnel-row .k { color: var(--muted); font-weight: 600; }
.funnel-row .n { font-variant-numeric: tabular-nums; }
.funnel-bar { height: 24px; border-radius: var(--radius-xs); background: var(--track); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--primary); }
.funnel-row.over .funnel-bar i { background: var(--danger); }
.chart { display: block; width: 100%; height: auto; margin-top: var(--sp-2); }
.chart .grid { stroke: var(--line); }
.chart .axis { fill: var(--faint); font-size: var(--fs-xs); }
.chart .bar-a { fill: var(--primary); }
.chart .bar-b { fill: var(--ok); }
.legend { display: flex; gap: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: var(--sp-1); border-radius: 2px; }
.legend .a { background: var(--primary); }
.legend .b { background: var(--ok); }
table.list th.num, table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 6. 로그인·비밀번호·시작 화면 --------------------------------------------- */
/* 로그인: 넓은 화면은 왼쪽 안내 + 오른쪽 로그인, 900px 이하는 한 줄(7. 반응형) */
.auth { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; min-height: calc(100vh - var(--proto-h, 0px)); }
.auth-brand {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-12) clamp(32px, 4.5vw, 72px);
  background: linear-gradient(155deg, var(--brand-from) 0%, var(--brand-to) 100%); color: var(--on-color);
}
.auth-company { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.2px; }
/* 회사 로고를 흰색 한 가지로(파란 바탕 위) */
.auth-company img { display: block; width: 200px; height: auto; filter: brightness(0) invert(1); }
.auth-brand h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.6px; }
.auth-brand p { max-width: 440px; color: var(--on-color-muted); font-size: var(--fs-lg); line-height: 1.65; }
.auth-points { display: grid; gap: var(--sp-3); margin: var(--sp-8) 0 0; padding: 0; list-style: none; }
.auth-points li { display: flex; align-items: center; gap: var(--sp-3); color: var(--on-color-muted); font-size: var(--fs-base); }
.auth-points li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--on-color-faint); }
.auth-foot { color: var(--on-color-faint); font-size: var(--fs-sm); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--sp-12) var(--sp-8); background: var(--surface); }
.auth-form { width: 100%; max-width: 420px; }
.auth-form h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-3xl); letter-spacing: -.5px; }
.auth-sub { margin-bottom: var(--sp-6); color: var(--muted); }
/* 로그인이 끊겨 온 경우의 까닭(자동 로그아웃 등) */
.auth-form .banner { margin-bottom: var(--sp-5); }
/* 이메일 저장: .check와 같은 상자, 글자는 보통 굵기. 줄 높이 40px(손가락으로 누르기 쉽게), 글자 오른쪽 빈 곳은 누르지 않게 */
.auth-remember { width: fit-content; min-height: 40px; margin-top: var(--sp-2); font-weight: 400; }
.auth-note { margin-top: var(--sp-3); color: var(--faint); font-size: var(--fs-sm); }
.demo-accounts { margin-top: var(--sp-4); padding: var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); }
.demo-grid { display: grid; grid-template-columns: auto auto 1fr; gap: 2px var(--sp-4); margin-top: var(--sp-2); overflow-wrap: anywhere; }
/* 비밀번호 정하기(임시 비밀번호로 로그인했을 때) */
.login-wrap { max-width: 400px; margin: calc(var(--sp-12) * 1.5) auto; padding: 0 var(--sp-4); }
.login-wrap .card { padding: var(--sp-8); }
.login-wrap h1 { margin-bottom: var(--sp-1); font-size: var(--fs-2xl); }
/* 시작 화면(개발 모드에서만) */
.home { max-width: 1080px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-8); }
.home h1 { font-size: var(--fs-3xl); letter-spacing: -.4px; }
.home .lead { margin-top: var(--sp-2); color: var(--muted); }
/* 두 열(.home-col)에 카드를 따로 쌓아 같은 줄 카드 높이 맞춤으로 생기는 빈 칸을 없앤다 */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; margin-top: var(--sp-4); }
.home-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.home-grid .card h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.home-grid .card .row { margin-top: var(--sp-3); }
/* 시작 화면 가맹점 양식: 링크(양식 이름) + 주소 끝부분(~/personal)을 한 줄에 */
.home-forms { display: flex; flex-direction: column; gap: 6px; width: 100%; }
/* 이름과 주소가 한 줄에 안 들어가면(휴대폰, 긴 이름) 주소가 다음 줄 오른쪽으로 내려간다 */
.home-form { flex-wrap: wrap; justify-content: flex-start; width: 100%; min-height: 40px; height: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); white-space: normal; text-align: left; }
.home-form-name { flex: 1 1 auto; min-width: 0; }
.home-form-path { margin-left: auto; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 400; white-space: nowrap; }
.steps { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); }
.steps li + li { margin-top: var(--sp-1); }
code.k { padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); font-size: var(--fs-sm); }

/* 6-2. 운영 편의: 누르는 건수 배지, 담당자 일괄 지정, 고정 처리 버튼, 알림 띠 */
button.badge.clickable { cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 700; }
button.badge.clickable:hover { box-shadow: inset 0 0 0 1px currentColor; }
button.badge.clickable.on { box-shadow: inset 0 0 0 2px currentColor; }
.chip-alert { padding: 0 6px; border-radius: var(--radius-pill); background: var(--danger-weak); color: var(--danger); font-size: var(--fs-xs); font-weight: 700; }
.chip-today { padding: 0 6px; border-radius: var(--radius-pill); background: var(--warn-weak); color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
.group-meta { color: var(--muted); font-weight: 500; }
.group-meta.danger { color: var(--danger); font-weight: 700; }
table.list tr.group-row td .btn { margin-left: var(--sp-2); }
table.list .check-cell { width: 40px; text-align: center; }
table.list a.case-link { color: inherit; text-decoration: none; }
table.list a.case-link:hover { color: var(--primary); text-decoration: underline; }
.bulk-bar {
  position: sticky; top: var(--proto-h, 0px); z-index: 5; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--primary-line); border-radius: var(--radius-sm); background: var(--primary-weak);
}
.bulk-bar .input { width: auto; min-height: 32px; }
.pager-gap { padding: 0 var(--sp-1); color: var(--faint); }
.action-bar.sticky {
  position: sticky; top: var(--proto-h, 0px); z-index: 5; align-items: center; margin-top: 0; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.banner.info { background: var(--info-weak); border: 1px solid var(--info-line); }
.banner.info > svg { color: var(--info); }
.dup-diff { width: 100%; margin-top: var(--sp-2); border-collapse: collapse; font-size: var(--fs-sm); }
.dup-diff th, .dup-diff td { padding: 4px var(--sp-2); border-bottom: 1px solid var(--line); text-align: left; }
.dup-diff th { color: var(--muted); font-weight: 600; }
.notice-root { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-bar); display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(420px, calc(100vw - 32px)); }
/* 관리자 화면 오른쪽 아래 알림 띠(main.js). 가맹점 주의 문구 .notice(주황 상자)와 섞이지 않게 .notice-root 안으로 좁힌다 */
.notice-root > .notice { display: flex; align-items: center; gap: var(--sp-3); margin-top: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); color: var(--text); font-size: var(--fs-sm); }
.notice-root > .notice > span { flex: 1; }
/* 자동 로그아웃 안내창(session.js): 남은 시간을 크게 보여준다 */
.session-count { display: block; margin-bottom: var(--sp-3); color: var(--warn-strong); font-size: var(--fs-3xl); font-variant-numeric: tabular-nums; }

/* 6-3. 가맹점 업로드 보강: 실패한 파일, 서류 전체 안내, 방금 접수한 건 안내 */
.file-item.failed { border-color: var(--danger-line); background: var(--danger-weak); }
.file-fail { color: var(--danger); font-size: var(--fs-xs); }
.slot-note { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); }
.fresh-note { color: var(--warn); }
/* 해당할 때만 내는 서류: 질문에 '예'를 누르면 서류 칸이 나온다(가맹점 양식) */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.slot-ask-group { grid-column: 1 / -1; }
.slot-ask { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.slot-ask-q { flex: 1 1 240px; min-width: 0; }
.slot-ask-buttons { display: flex; gap: var(--sp-2); }
.slot-ask-buttons .btn { min-width: 72px; }
.slot-ask-buttons .btn.on { background: var(--primary); border-color: var(--primary); color: var(--on-color); }
.slot-ask-group > .field-warn { margin-top: var(--sp-2); }
.slot-ask-slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); align-items: start; }
/* 제출하지 못했을 때 확인할 항목 목록(누르면 그 칸으로) */
.error-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.link-btn { display: block; width: 100%; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.notice-card { border-color: var(--primary-line); background: var(--primary-weak); }

/* 7. 반응형: 480(작은 휴대폰) · 768(태블릿, 가맹점 2열) · 900(관리자 메뉴 접힘, 로그인 한 줄) · 1024(가맹점 서류 안내 2단) */
@media (hover: none) and (pointer: coarse) {
  .dz-desktop { display: none; }
  .dz-touch { display: inline; }
  /* 손가락으로 누르기 쉽게(40px 이상, 사이 8px) */
  .file-actions { gap: var(--sp-2); }
  .file-actions .icon-btn { width: 40px; height: 40px; }
  .download-actions { gap: var(--sp-2); }
  .download-actions .btn { min-height: 40px; padding: 0 14px; }
  .slot-ask-buttons .btn { min-height: 40px; }
  .session-modal .modal-foot .btn { min-height: 40px; }
  /* [다시 올리기]·[모든 서류 칸 보기]·삭제 되돌리기·창 닫기·뷰어 판정도 손가락으로 누르기 쉽게 */
  .file-actions .btn, .section-head .btn, .toast-action { min-height: 40px; }
  .modal-head .icon-btn { width: 40px; height: 40px; }
  .viewer-judge .btn, .doc-judge .btn { min-height: 40px; }
  /* 질문 줄의 [해당 없음 처리]·보완 요청 알림의 [재발송]·[새 탭에서 열기]·표 안의 작은 버튼 */
  .answered-act, .banner .btn-group .btn, table.list .btn.sm { min-height: 40px; min-width: 40px; }
  .search-row .input { font-size: 16px; }
}
@media (min-width: 768px) {
  .m-wrap.m-wide { max-width: 1120px; padding: 0 var(--sp-6) var(--sp-12); }
  .m-wide .card { padding: var(--sp-6) var(--sp-8); }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .slot-grid > .slot:only-child { grid-column: 1 / -1; }
  .slot-ask-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .slot-ask-slots > .slot:only-child { grid-column: 1 / -1; }
  .m-wide .submit-area { display: flex; justify-content: center; margin-top: var(--sp-6); }
  .m-wide .submit-area .btn { max-width: 360px; }
}
@media (min-width: 1024px) {
  .m-wide .guide {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-8);
    grid-template-areas: "title docs" "when docs" "info docs" "desc docs" "rule docs" "notice docs"; grid-template-rows: auto auto auto auto auto 1fr;
  }
  .m-wide .guide > h2 { grid-area: title; }
  .m-wide .guide > .guide-when { grid-area: when; }
  .m-wide .guide > .guide-info { grid-area: info; }
  .m-wide .guide > .guide-desc { grid-area: desc; }
  .m-wide .guide > .doc-table { grid-area: docs; margin: 0; }
  .m-wide .guide > .guide-rule { grid-area: rule; margin-top: var(--sp-3); }
  .m-wide .guide > .notice { grid-area: notice; align-self: start; margin-top: var(--sp-3); }
}
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-brand { gap: var(--sp-2); padding: var(--sp-6) var(--sp-5); }
  .auth-company img { width: 150px; }
  .auth-brand h1 { margin-bottom: var(--sp-1); font-size: var(--fs-3xl); }
  .auth-brand p { font-size: var(--fs-md); }
  .auth-points, .auth-foot { display: none; }
  .auth-main { padding: var(--sp-8) var(--sp-5) var(--sp-10); }
  .auth-form h2 { font-size: var(--fs-2xl); }
  .a-layout { grid-template-columns: 1fr; }
  .a-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-grid { grid-template-columns: 1fr; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 한 줄: 가맹점 → 관리자 → 샘플 데이터 → 둘러보는 순서(문서 순서 그대로) */
  .home-grid { display: flex; flex-direction: column; }
  .home-col { display: contents; }
  .req-item .req-fields { grid-template-columns: 1fr; }
  .stats-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .funnel-row { grid-template-columns: 80px minmax(0, 1fr) 110px; }
}
@media (max-width: 480px) {
  /* 막대 줄: 이름·숫자를 한 줄에, 막대는 아래 줄 전체 폭(좁은 휴대폰에서도 막대가 보이게) */
  .funnel-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .funnel-row .funnel-bar { grid-column: 1 / -1; grid-row: 2; }
  .card { padding: var(--sp-4); }
  .m-title { font-size: var(--fs-2xl); }
  /* 파일 한 줄: 위에 사진·이름·안내, 아래 오른쪽에 버튼(누르기 쉬운 크기를 지키면서 이름·오류 문구가 좁아지지 않게) */
  .file-item { flex-wrap: wrap; }
  .file-item .file-meta { flex: 1 1 0; min-width: 0; }
  .file-item .file-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* 8. 유틸리티: 다른 규칙보다 우선하도록 맨 끝에 둔다 ----------------------------- */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.pre-line { white-space: pre-line; }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }
.offscreen { position: fixed; opacity: 0; pointer-events: none; }
.bullets { margin: 0; padding-left: 18px; }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row.tight { gap: var(--sp-1); }
.row.nowrap { flex-wrap: nowrap; }
.spacer { flex: 1; }
.stack > * + * { margin-top: var(--sp-3); }
.stack.loose > * + * { margin-top: var(--sp-4); }
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.ml-2 { margin-left: var(--sp-2); }